/* ==========================================================================
   Componentes reutilizables
   ========================================================================== */

/* ---------- Cabecera de página ---------- */
.cabecera-pagina {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3);
  flex-wrap: wrap; margin-bottom: var(--e4);
}
.cabecera-pagina h1 { margin: 0; }
.cabecera-pagina .subtitulo { margin: 2px 0 0; font-size: var(--t-s); color: var(--texto-2); }
.volver { display: inline-flex; align-items: center; gap: var(--e1); margin-bottom: var(--e2); font-size: var(--t-s); color: var(--texto-2); text-decoration: none; }
.volver:hover { color: var(--texto); }

/* ---------- Botones ----------
   .btn es el secundario por defecto; variantes: -primario, -secundario, -fantasma, -peligro, -grande.
   Los <button> sin clase dentro del contenido toman el estilo secundario. */
.btn, .contenido button:not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 36px; padding: 7px 14px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  background: var(--superficie); color: var(--texto);
  font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover, .contenido button:not([class]):hover { background: var(--superficie-2); border-color: #C4BDAE; color: var(--texto); }
.btn:focus-visible, .contenido button:not([class]):focus-visible { outline: none; box-shadow: var(--foco); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .icono { width: 18px; height: 18px; }

.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.btn-primario:hover { background: var(--acento-osc); border-color: var(--acento-osc); color: var(--acento-texto); }
.btn-secundario { background: var(--superficie); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: rgba(22, 23, 28, .05); border-color: transparent; }
.btn-peligro { background: var(--superficie); border-color: var(--rojo-borde); color: var(--rojo-tinta); }
.btn-peligro:hover { background: var(--rojo-fondo); border-color: var(--rojo); color: var(--rojo-tinta); }
.btn-grande { min-height: 48px; padding: 12px 20px; font-size: var(--t-m); border-radius: var(--r-l); }
.btn-bloque { width: 100%; }

/* ---------- Tarjeta ---------- */
.card {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-l);
  padding: var(--e4); box-shadow: var(--sombra-1);
}
.card + .card { margin-top: var(--e4); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.card-titulo h2, .card-titulo h3 { margin: 0; }

/* ---------- Indicadores (KPI) ---------- */
.kpis-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-l);
  padding: var(--e3) var(--e4); box-shadow: var(--sombra-1); min-width: 0;
  color: inherit; text-decoration: none; display: block;
}
.kpi-etiqueta { font-size: 11px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .08em; }
.kpi-valor { font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi-detalle { font-size: var(--t-xs); color: var(--texto-2); }
.kpi-rojo .kpi-valor { color: var(--rojo); }
.kpi-amarillo .kpi-valor { color: var(--amarillo-tinta); }
.kpi-verde .kpi-valor { color: var(--verde-tinta); }
@media (max-width: 900px) { .kpis-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Píldoras y estados (semáforo SIEMPRE con ícono + texto) ---------- */
.pill, .estado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--gris-fondo); color: var(--gris-tinta);
}
.pill { border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); }
.pildoras { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.estado-icono { font-size: 10px; line-height: 1; }
.estado-verde, .pill-verde { background: var(--verde-fondo); color: var(--verde-tinta); border-color: var(--verde-borde); }
.estado-amarillo, .pill-amarillo { background: var(--amarillo-fondo); color: var(--amarillo-tinta); border-color: var(--amarillo-borde); }
.estado-rojo, .pill-rojo { background: var(--rojo-fondo); color: var(--rojo-tinta); border-color: var(--rojo-borde); }
.estado-gris, .pill-gris { background: var(--gris-fondo); color: var(--gris-tinta); border-color: var(--gris-borde); }
.estado-acento { background: color-mix(in srgb, var(--acento) 12%, #fff); color: var(--acento-tinta); }

/* ---------- Avisos (píldoras informativas) ---------- */
.avisos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.aviso {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--gris-borde); background: var(--gris-fondo); color: var(--texto);
  font-size: var(--t-s); text-decoration: none;
}
a.aviso:hover { color: var(--texto); filter: brightness(.97); text-decoration: underline; text-decoration-color: currentColor; }
.aviso .icono { width: 16px; height: 16px; }
.aviso-rojo { background: var(--rojo-fondo); border-color: var(--rojo-borde); }
.aviso-amarillo { background: var(--amarillo-fondo); border-color: var(--amarillo-borde); }
.aviso-verde { background: var(--verde-fondo); border-color: var(--verde-borde); }
.aviso-gris { background: var(--gris-fondo); border-color: var(--gris-borde); }
.aviso-banner { display: flex; border-radius: var(--r); margin-bottom: var(--e4); color: var(--gris-tinta); font-weight: 500; }

/* ---------- Mensajes (Django messages, errores de formulario) ---------- */
.mensaje {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: 10px 14px; margin-bottom: var(--e3);
  border-radius: var(--r); border: 1px solid var(--azul-borde); border-left-width: 4px;
  background: var(--azul-fondo); color: var(--azul-tinta); font-size: 14px;
}
.mensaje ul { margin: 0; padding: 0; list-style: none; }
.mensaje-success { background: var(--verde-fondo); border-color: var(--verde-borde); border-left-color: var(--verde); color: var(--verde-tinta); }
.mensaje-warning { background: var(--amarillo-fondo); border-color: var(--amarillo-borde); border-left-color: var(--amarillo); color: var(--amarillo-tinta); }
.mensaje-error { background: var(--rojo-fondo); border-color: var(--rojo-borde); border-left-color: var(--rojo); color: var(--rojo-tinta); }

/* ---------- Tablas ---------- */
.tabla-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-l); overflow-x: auto; box-shadow: var(--sombra-1); margin-bottom: var(--e4); }
.tabla { width: 100%; background: var(--superficie); font-size: 14px; margin-bottom: var(--e4); }
.tabla-caja .tabla { margin-bottom: 0; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla th {
  background: var(--superficie-2); color: var(--texto-2);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #FDFCF9; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Celular: cada fila como tarjeta (solo tablas con data-label en sus celdas) */
@media (max-width: 640px) {
  .tabla:has(td[data-label]) { background: transparent; }
  .tabla:has(td[data-label]) thead { display: none; }
  .tabla:has(td[data-label]), .tabla:has(td[data-label]) tbody,
  .tabla:has(td[data-label]) tr, .tabla:has(td[data-label]) td { display: block; width: 100%; }
  .tabla:has(td[data-label]) tr {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-l);
    padding: var(--e2) var(--e3); margin-bottom: var(--e2); box-shadow: var(--sombra-1);
  }
  .tabla:has(td[data-label]) td {
    display: flex; justify-content: space-between; gap: var(--e3);
    padding: 6px 0; border-bottom: 1px solid var(--borde); text-align: right;
  }
  .tabla:has(td[data-label]) td:last-child { border-bottom: 0; }
  .tabla td[data-label]::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: 11px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px;
  }
  .tabla td[data-label=""]::before { content: none; }
  .tabla-caja:has(td[data-label]) { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  /* Tablas sin data-label: desplazamiento horizontal */
  .tabla:not(:has(td[data-label])) { display: block; overflow-x: auto; }
}

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e4); }
.campo label, .campo > .etiqueta-campo { font-size: 14px; font-weight: 600; color: var(--texto); }
.campo .ayuda { font-size: var(--t-xs); color: var(--texto-2); }
.campo-error input, .campo-error select, .campo-error textarea { border-color: var(--rojo); }
.error, .errorlist { color: var(--rojo-tinta); font-size: var(--t-s); }
.errorlist { margin: 4px 0 0; padding: 0; list-style: none; }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
select, textarea {
  width: 100%; max-width: 100%;
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  background: var(--superficie); color: var(--texto); font-size: var(--t-m);
  transition: border-color .15s, box-shadow .15s;
}
select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A5A60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
textarea { min-height: 80px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #BDB5A5; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento-tinta); box-shadow: var(--foco); }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--acento); vertical-align: -3px; margin: 0 6px 0 0; }
input[type="file"] { font-size: 14px; }
.check { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 500; cursor: pointer; }

/* ---------- Pasos (stepper) ---------- */
.pasos { display: flex; align-items: center; gap: var(--e5); margin: 0 0 var(--e4); padding: 0; list-style: none; counter-reset: paso; flex-wrap: wrap; }
.pasos > * {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  background: var(--superficie); border: 1px solid var(--borde);
  font-size: var(--t-s); font-weight: 500; color: var(--texto-2);
}
.pasos > *::before {
  counter-increment: paso; content: counter(paso);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gris-fondo); color: var(--texto-2); font-size: 12px; font-weight: 700;
}
.pasos > .activo { border-color: var(--acento); color: var(--texto); font-weight: 600; }
.pasos > .activo::before { background: var(--acento); color: var(--acento-texto); }
.pasos > .hecho { color: var(--texto); }
.pasos > .hecho::before { content: "✓"; background: var(--verde-fondo); color: var(--verde-tinta); }
/* Conector entre pasos */
.pasos > * + *::after {
  content: ""; position: absolute; right: calc(100% + 5px); top: 50%;
  width: calc(var(--e5) - 10px); height: 2px; border-radius: 2px; background: var(--borde-fuerte);
}
.pasos > .hecho + *::after, .pasos > .hecho + .activo::after { background: var(--verde); }
@media (max-width: 640px) {
  .pasos { gap: var(--e4); flex-wrap: nowrap; }
  .pasos > * + *::after { width: calc(var(--e4) - 8px); right: calc(100% + 4px); }
  .pasos > * { padding-right: 10px; }
}

/* ---------- Estado vacío ---------- */
.vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e2);
  padding: var(--e6) var(--e5);
  background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-l);
  color: var(--texto-2);
}
.vacio .icono { width: 32px; height: 32px; color: var(--texto-3); margin-bottom: var(--e1); }
.vacio h2, .vacio h3 { margin: 0; color: var(--texto); }
.vacio p { margin: 0; max-width: 46ch; }

/* ---------- Tarjeta de máquina ---------- */
.maquinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.maquina {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); color: var(--texto); text-decoration: none;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
a.maquina:hover { color: var(--texto); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); transform: translateY(-1px); }
.maquina-foto { width: 100%; height: 96px; object-fit: cover; background: var(--grafito-3); }
.maquina-iniciales {
  display: grid; place-items: center; width: 100%; height: 96px;
  background: linear-gradient(135deg, #4A4B52, #1F2026);
  color: #fff; font-size: 30px; font-weight: 700; letter-spacing: .04em;
}
.maquina-cuerpo { padding: var(--e3); display: flex; flex-direction: column; gap: 6px; }
.maquina-nombre { font-weight: 700; font-size: var(--t-m); }
.maquina-cifras { font-size: var(--t-s); color: var(--texto-2); }
.maquina-cifras b { color: var(--texto); }

/* ---------- Desplegables (<details>): indicador dibujado con CSS, no depende de la fuente ---------- */
.contenido details > summary { cursor: pointer; list-style: none; gap: 6px; }
.contenido details > summary::-webkit-details-marker { display: none; }
.contenido details > summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.contenido details[open] > summary::after { transform: translateY(2px) rotate(225deg); }

/* ---------- Paginación ---------- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: var(--e3); margin: var(--e4) 0; }
.paginacion-estado { font-size: 14px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.paginacion .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

/* ---------- Casillas: única y grupos en grilla ---------- */
.campo-check { justify-content: flex-end; min-height: 40px; }
.campo-check .check { min-height: 40px; }
.campo .check, .opciones-grid .check { font-size: 14px; font-weight: 500; }
fieldset.campo { border: 0; padding: 0; margin: 0 0 var(--e4); min-width: 0; }
fieldset.campo > legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.opciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e2); }
.opcion {
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie-2);
}
.opcion:hover { border-color: var(--borde-fuerte); }
.opcion:has(input:checked) { border-color: var(--acento-tinta); background: color-mix(in srgb, var(--acento) 6%, #fff); }
.opcion:has(input:focus-visible) { box-shadow: var(--foco); }
.opcion input { flex: none; }

/* Archivo: botón de selección con el estilo secundario */
input[type="file"] { width: 100%; max-width: 100%; min-width: 0; color: var(--texto-2); }
input[type="file"]::file-selector-button {
  margin-right: var(--e3); min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r); background: var(--superficie);
  font: inherit; font-weight: 600; color: var(--texto); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--superficie-2); }
.campo a { word-break: break-all; }

/* ---------- Textos de apoyo ---------- */
.grupo-ayuda, .nota { font-size: var(--t-s); color: var(--texto-2); }
.grupo-ayuda { margin: calc(-1 * var(--e2)) 0 var(--e4); }
.nota { margin: var(--e3) 0 0; }
.vacio-linea {
  margin: 0; padding: var(--e4); text-align: center;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r); background: var(--superficie-2);
  color: var(--texto-2); font-size: 14px;
}