.dc-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
  padding: var(--dc-space-3) var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  border: 1px solid var(--dc-border);
  background: var(--dc-bg-elevated);
  color: var(--dc-fg);
  font-family: var(--dc-font-sans);
  font-weight: var(--dc-fw-semibold);
  font-size: var(--dc-fs-14);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dc-dur-fast) var(--dc-ease), color var(--dc-dur-fast) var(--dc-ease), transform var(--dc-dur-fast) var(--dc-ease);
}

.dc-boton:hover {
  background: var(--dc-gray-100);
}

.dc-boton:active {
  transform: scale(0.98);
}

.dc-boton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dc-boton-primario {
  border-color: transparent;
  background: var(--dc-primary);
  color: var(--dc-fg-on-primary);
}

.dc-boton-primario:hover {
  background: var(--dc-primary-700);
  color: var(--dc-fg-on-primary);
}

.dc-boton-peligro {
  border-color: transparent;
  background: var(--dc-danger);
  color: var(--dc-white);
}

.dc-boton-peligro:hover {
  background: #B0124F;
  color: var(--dc-white);
}

.dc-card {
  background: var(--dc-bg-elevated);
  border: 1px solid var(--dc-border);
  border-left: 4px solid transparent;
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
  padding: var(--dc-space-6);
}

.dc-card-acento-celeste {
  border-left-color: var(--dc-accent-celeste);
}

.dc-card-acento-fucsia {
  border-left-color: var(--dc-accent-fucsia);
}

.dc-card-acento-verde {
  border-left-color: var(--dc-accent-verde);
}

.dc-card-acento-naranja {
  border-left-color: var(--dc-accent-naranja);
}

.dc-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-1) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  font-family: var(--dc-font-sans);
  font-weight: var(--dc-fw-semibold);
  font-size: var(--dc-fs-12);
  letter-spacing: var(--dc-tracking-wide);
  background: var(--dc-gray-100);
  color: var(--dc-fg-muted);
}

.dc-badge-exito {
  background: rgba(102, 179, 77, 0.14);
  color: #2F6B23;
}

.dc-badge-advertencia {
  background: rgba(248, 174, 72, 0.16);
  color: #8A4B00;
}

.dc-badge-peligro {
  background: rgba(251, 45, 124, 0.12);
  color: #B0124F;
}

.dc-badge-neutro {
  background: var(--dc-gray-100);
  color: var(--dc-gray-600);
}

.dc-badge-p10 {
  background: rgba(42, 166, 224, 0.14);
  color: var(--dc-primary-700);
}

.dc-badge-p50 {
  background: var(--dc-primary-50);
  color: var(--dc-primary);
}

.dc-badge-p90 {
  background: rgba(248, 174, 72, 0.16);
  color: #8A4B00;
}

.dc-eyebrow-linea {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-3);
  font-weight: var(--dc-fw-bold);
  font-size: var(--dc-fs-12);
  text-transform: uppercase;
  letter-spacing: var(--dc-tracking-widest);
  color: var(--dc-primary);
}

.dc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--dc-space-4);
  padding: var(--dc-space-12) var(--dc-space-6);
  color: var(--dc-fg-muted);
}

.dc-empty-imagen {
  width: 160px;
  height: auto;
}

.dc-empty-titulo {
  font-weight: var(--dc-fw-bold);
  font-size: var(--dc-fs-18);
  color: var(--dc-fg);
}

.dc-empty-texto {
  font-size: var(--dc-fs-14);
  max-width: 32rem;
}

.dc-alerta {
  border-radius: var(--dc-radius-md);
  padding: var(--dc-space-3) var(--dc-space-4);
  font-size: var(--dc-fs-14);
  border: 1px solid transparent;
}

.dc-alerta-info {
  background: var(--dc-gray-100);
  color: var(--dc-fg-muted);
  border-color: var(--dc-border);
}

.dc-alerta-exito {
  background: rgba(102, 179, 77, 0.1);
  color: #2F6B23;
  border-color: rgba(102, 179, 77, 0.3);
}

.dc-alerta-advertencia {
  background: rgba(248, 174, 72, 0.12);
  color: #8A4B00;
  border-color: rgba(248, 174, 72, 0.3);
}

.dc-alerta-error {
  background: rgba(251, 45, 124, 0.1);
  color: #B0124F;
  border-color: rgba(251, 45, 124, 0.3);
}

.dc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-1);
  padding: var(--dc-space-1) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  font-family: var(--dc-font-sans);
  font-size: var(--dc-fs-12);
  font-weight: var(--dc-fw-medium);
  background: var(--dc-gray-100);
  color: var(--dc-fg-muted);
  border: 1px solid var(--dc-border);
}

.dc-chip-activo {
  background: var(--dc-primary-50);
  color: var(--dc-primary);
  border-color: transparent;
}

.dc-icon {
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.dc-grafico-pacing {
  display: block;
  width: 100%;
  height: auto;
}

.dc-grafico-banda {
  fill: var(--dc-primary-50);
  stroke: none;
}

.dc-grafico-linea-esperado {
  fill: none;
  stroke: var(--dc-gray-400);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.dc-grafico-linea-real {
  fill: none;
  stroke: var(--dc-accent-celeste);
  stroke-width: 2;
}

.dc-grafico-punto {
  stroke: var(--dc-bg-elevated);
  stroke-width: 1.5;
}

.dc-grafico-punto-verde {
  fill: var(--dc-accent-verde);
}

.dc-grafico-punto-amarillo {
  fill: var(--dc-accent-naranja);
}

.dc-grafico-punto-rojo {
  fill: var(--dc-accent-fucsia);
}

.dc-grafico-etiqueta {
  font-family: var(--dc-font-sans);
  font-size: var(--dc-fs-12);
  fill: var(--dc-fg-subtle);
}

.dc-grafico-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-4);
  list-style: none;
  margin: var(--dc-space-4) 0 0;
  padding: 0;
  font-size: var(--dc-fs-14);
  color: var(--dc-fg-muted);
}

.dc-grafico-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
}

.dc-grafico-leyenda-marca {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--dc-radius-sm);
  background: var(--dc-gray-400);
  border: 1px solid var(--dc-border);
}

.dc-grafico-leyenda-real .dc-grafico-leyenda-marca {
  background: var(--dc-accent-celeste);
  border-color: transparent;
}

.dc-grafico-leyenda-banda .dc-grafico-leyenda-marca {
  background: var(--dc-primary-50);
}

.dc-grafico-cobertura {
  display: block;
  width: 100%;
  height: auto;
}

.dc-grafico-cobertura-pista {
  fill: var(--dc-gray-100);
  stroke: var(--dc-border);
  stroke-width: 1;
}

.dc-grafico-cobertura-banda {
  fill: var(--dc-primary-50);
  stroke: none;
}

.dc-grafico-cobertura-marcador {
  stroke-width: 3;
  stroke-linecap: round;
}

.dc-grafico-cobertura-marcador-verde {
  stroke: var(--dc-accent-verde);
}

.dc-grafico-cobertura-marcador-rojo {
  stroke: var(--dc-accent-fucsia);
}

.dc-grafico-cobertura-valor {
  font-family: var(--dc-font-sans);
  font-weight: var(--dc-fw-bold);
  font-size: var(--dc-fs-14);
  fill: var(--dc-fg);
}

.dc-grafico-calor {
  display: block;
  width: 100%;
  height: auto;
}

.dc-grafico-calor-celda {
  stroke: var(--dc-border);
  stroke-width: 1;
}

.dc-grafico-calor-celda-incompleta {
  stroke: var(--dc-gray-500);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

.dc-grafico-calor-nivel-0 {
  fill: color-mix(in srgb, var(--dc-bg-elevated) 85%, var(--dc-primary) 15%);
}

.dc-grafico-calor-nivel-1 {
  fill: color-mix(in srgb, var(--dc-bg-elevated) 65%, var(--dc-primary) 35%);
}

.dc-grafico-calor-nivel-2 {
  fill: color-mix(in srgb, var(--dc-bg-elevated) 40%, var(--dc-primary) 60%);
}

.dc-grafico-calor-nivel-3 {
  fill: color-mix(in srgb, var(--dc-bg-elevated) 15%, var(--dc-primary) 85%);
}

.dc-grafico-calor-nivel-4 {
  fill: var(--dc-primary-900);
}

.dc-grafico-calor-valor {
  font-family: var(--dc-font-mono);
  font-size: var(--dc-fs-12);
  fill: var(--dc-fg);
  text-anchor: middle;
}

.dc-grafico-calor-valor-claro {
  font-family: var(--dc-font-mono);
  font-size: var(--dc-fs-12);
  fill: var(--dc-white);
  text-anchor: middle;
}

.dc-grafico-calor-etiqueta-dia {
  font-family: var(--dc-font-sans);
  font-size: var(--dc-fs-12);
  fill: var(--dc-fg-subtle);
  text-anchor: end;
}

.dc-grafico-leyenda-calor-0 .dc-grafico-leyenda-marca {
  background: color-mix(in srgb, var(--dc-bg-elevated) 85%, var(--dc-primary) 15%);
}

.dc-grafico-leyenda-calor-1 .dc-grafico-leyenda-marca {
  background: color-mix(in srgb, var(--dc-bg-elevated) 65%, var(--dc-primary) 35%);
}

.dc-grafico-leyenda-calor-2 .dc-grafico-leyenda-marca {
  background: color-mix(in srgb, var(--dc-bg-elevated) 40%, var(--dc-primary) 60%);
}

.dc-grafico-leyenda-calor-3 .dc-grafico-leyenda-marca {
  background: color-mix(in srgb, var(--dc-bg-elevated) 15%, var(--dc-primary) 85%);
}

.dc-grafico-leyenda-calor-4 .dc-grafico-leyenda-marca {
  background: var(--dc-primary-900);
}

.dc-grafico-leyenda-calor-incompleto .dc-grafico-leyenda-marca {
  background: var(--dc-bg-elevated);
  border: 1px dashed var(--dc-gray-500);
}

.dc-nav-publica-envoltorio {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--dc-space-4) var(--dc-space-4) 0;
}

.dc-nav-publica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-4);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--dc-space-2) var(--dc-space-2) var(--dc-space-2) var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  border: 1px solid var(--dc-border);
  background: var(--dc-bg-elevated);
  box-shadow: var(--dc-shadow-md);
}

.dc-nav-publica-marca {
  display: inline-flex;
  align-items: center;
}

.dc-nav-publica-acciones {
  display: flex;
  align-items: center;
  gap: var(--dc-space-3);
}