/* Panel AGIA · dirección "Mostrador claro"
 *
 * Claro por defecto, alto contraste, todo grande, cero decoración.
 * Diseñado para el peor escenario real: sol, prisa, una mano, y una
 * vendedora que no quiere aprender nada.
 *
 * Reglas duras del sistema:
 *   · Nada táctil por debajo de 56 px de alto.
 *   · Ningún texto por debajo de 16 px (menos que eso, iOS hace
 *     zoom al enfocar un campo y descoloca la pantalla).
 *   · Un solo acento, el magenta de D21, y solo en lo accionable.
 *   · El verde se reserva para "se guardó". No decora nada.
 */

:root {
  --fondo: #ffffff;
  --superficie: #f2f3f5;
  --borde: #c8ccd4;
  --borde-fuerte: #14171c;
  --texto: #14171c;
  --texto-suave: #565e6b;

  --acento: #c42b5a;          /* magenta D21 */
  --acento-oscuro: #a01f49;
  --acento-texto: #ffffff;

  --bien: #12683f;
  --bien-fondo: #e4f5eb;
  --mal: #b3261e;
  --mal-fondo: #fdeceb;
  --aviso: #a25c00;

  --radio: 10px;
  --alto-tactil: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101216;
    --superficie: #1a1d23;
    --borde: #3a4049;
    --borde-fuerte: #e9ecf1;
    --texto: #e9ecf1;
    --texto-suave: #a3abb8;

    --acento: #ff6b8a;
    --acento-oscuro: #ff8ba3;
    --acento-texto: #101216;

    --bien: #4ecb84;
    --bien-fondo: #10261a;
    --mal: #ff7b70;
    --mal-fondo: #2a1412;
    --aviso: #e0a13c;
  }
}

* { box-sizing: border-box; }

html {
  /* La barra superior es fija: sin esto, al enfocar un campo con el
     teclado el navegador lo deja debajo de ella y no se ve. */
  scroll-padding-top: 112px;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:where(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ── Acceso ─────────────────────────────────────────────── */

.acceso { min-height: 100dvh; display: grid; place-items: center; padding: 24px 20px; }
.acceso__caja { width: 100%; max-width: 380px; }

.acceso__marca {
  margin: 0 0 32px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--texto-suave);
}

.acceso__pregunta { margin: 0 0 20px; font-size: 20px; font-weight: 700; text-align: center; }

.personas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.personas button {
  width: 100%;
  min-height: var(--alto-tactil);
  padding: 12px 20px;
  text-align: left;
  font-size: 19px;
  font-weight: 600;
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.personas button:active { border-color: var(--acento); }
.personas small { display: block; font-size: 15px; font-weight: 400; color: var(--texto-suave); }

.volver {
  margin-bottom: 16px;
  min-height: 48px;
  padding: 8px 4px;
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-size: 16px;
}

.pin { display: flex; justify-content: center; gap: 16px; margin: 0 0 32px; }

.pin span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--borde);
}

.pin span[data-lleno] { background: var(--acento); border-color: var(--acento); }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.teclado button {
  height: 68px;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.teclado button:active { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.teclado button:disabled { opacity: .45; }

/* ── Armazón ────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--fondo);
  border-bottom: 2px solid var(--borde-fuerte);
}

/* Una sola línea: el nombre completo de un cliente ("Lubricantes y
   Accesorios FLORIDA C.A") hacía saltar la barra a dos renglones y
   se comía 40 px de una pantalla que ya es chica. */
.barra > div { min-width: 0; }
.barra strong { display: block; font-size: 18px; }
.barra small {
  display: block;
  font-size: 14px;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Solo lo ve el admin, y solo con más de un agente. Se parece a
   texto y no a un formulario: es contexto, no un dato que llenar. */
.selector-agente {
  max-width: 320px;
  padding: 2px 4px;
  background: var(--fondo);
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 14px;
}

.salir {
  min-height: 48px;
  padding: 10px 16px;
  background: none;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-suave);
  font-size: 16px;
}

.contenido { padding: 20px 18px 110px; max-width: 620px; margin: 0 auto; }
body.sin-navegacion .contenido { padding-bottom: 40px; }
body.sin-navegacion .toast { bottom: 28px; }

.navegacion {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--fondo);
  border-top: 2px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}

.navegacion button {
  flex: 1;
  min-height: 62px;
  padding: 8px 4px;
  background: none;
  border: 0;
  border-top: 4px solid transparent;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
}

.navegacion button[aria-current="page"] { color: var(--acento); border-top-color: var(--acento); }

/* ── Formularios ────────────────────────────────────────── */

.campo { margin-bottom: 20px; }

.campo > label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.campo__obligatorio { color: var(--acento); }

.campo__ayuda { display: block; margin-top: 8px; font-size: 15px; color: var(--texto-suave); font-weight: 400; }

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="number"],
.campo input[type="date"],
.campo textarea,
.campo select {
  width: 100%;
  min-height: var(--alto-tactil);
  padding: 14px 16px;
  font-size: 18px;
  background: var(--fondo);
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.campo textarea { min-height: 110px; resize: vertical; line-height: 1.4; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--borde-fuerte); }

.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.campo--doble .campo { margin-bottom: 20px; }

/* Lista cerrada: botones, no desplegable. Un desplegable en un
   teléfono son tres toques; esto es uno, y se ven las opciones. */
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }

.opciones button {
  min-height: 56px;
  padding: 12px 18px;
  font-size: 17px;
  font-weight: 600;
  background: var(--fondo);
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.opciones button[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

.boton-principal {
  width: 100%;
  min-height: 68px;
  margin-top: 8px;
  padding: 16px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--acento);
  color: var(--acento-texto);
  border: 2px solid var(--acento);
  border-radius: var(--radio);
}

.boton-principal:active { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.boton-principal:disabled { opacity: .6; }

/* ── Grupos de configuración ────────────────────────────── */

.grupos { display: grid; gap: 20px; }

.grupo {
  padding: 20px;
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.grupo h2 {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.grupo .campo:last-child { margin-bottom: 0; }

/* Confirmación por campo. Sin esto, tras cambiar diez cosas el
   dueño no sabe cuál entró. */
.campo__guardado {
  float: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--bien);
}

.campo__guardado::before { content: "✓ "; }

/* Un campo vacío con consecuencia la dice, y en su propio color. */
.campo__vacio {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--aviso);
  background: var(--superficie);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 15px;
  color: var(--texto);
}

.pie { margin: 24px 0 0; font-size: 15px; color: var(--texto-suave); }

/* ── Estado del agente ──────────────────────────────────── */

.estado {
  padding: 20px;
  margin-bottom: 24px;
  border: 2px solid var(--borde);
  border-left-width: 8px;
  border-radius: var(--radio);
  background: var(--fondo);
}

.estado[data-tono="bien"]  { border-left-color: var(--bien); }
.estado[data-tono="aviso"] { border-left-color: var(--aviso); }
.estado[data-tono="mal"]   { border-left-color: var(--mal); }

.estado h2 { margin: 0 0 6px; font-size: 20px; }
.estado > p { margin: 0 0 16px; color: var(--texto-suave); }

.estado__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 15px;
}

.estado__datos dt { color: var(--texto-suave); }
.estado__datos dd { margin: 0; font-weight: 600; }

/* Conversaciones en pausa. Solo se pinta en color cuando llevan
   demasiado tiempo: unas pocas y recientes son trabajo normal. */
.pausadas {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--borde);
  background: var(--superficie);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 15px;
  color: var(--texto-suave);
}

.pausadas[data-olvidada="true"] {
  border-left-color: var(--aviso);
  color: var(--texto);
  font-weight: 600;
}

/* ── Métricas ───────────────────────────────────────────── */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.metrica {
  padding: 16px 18px;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.metrica__titulo { display: block; font-size: 14px; color: var(--texto-suave); }

.metrica__valor {
  display: block;
  margin-top: 4px;
  /* Se encoge sola: un monto largo desbordaba la tarjeta. */
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.metrica__valor.sin-dato { font-size: 17px; font-weight: 400; }

.metrica__comparacion { display: block; margin-top: 6px; font-size: 14px; color: var(--texto-suave); }
.metrica__comparacion[data-signo="mas"]   { color: var(--bien); }
.metrica__comparacion[data-signo="menos"] { color: var(--aviso); }

/* ── Grupos de configuración ────────────────────────────── */

.mensaje {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radio);
  border: 2px solid;
  font-size: 16px;
}

.mensaje[data-tono="mal"]  { background: var(--mal-fondo);  border-color: var(--mal);  color: var(--mal); }
.mensaje[data-tono="bien"] { background: var(--bien-fondo); border-color: var(--bien); color: var(--bien); }
.mensaje[data-tono="aviso"]{ background: var(--superficie); border-color: var(--borde); color: var(--texto); }

.aviso { /* pantalla de acceso */
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: var(--radio);
  background: var(--mal-fondo);
  border: 2px solid var(--mal);
  color: var(--mal);
  font-size: 16px;
  text-align: center;
}

/* ── Listas de registros ────────────────────────────────── */

.seccion-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 32px 0 12px;
  padding-top: 20px;
  border-top: 2px solid var(--borde);
}

.seccion-titulo h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.seccion-titulo span { font-size: 15px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* Buscar entre lo cargado. Con 124 filtros y subiendo, encontrar
   pesa tanto como cargar: antes de meter uno hay que saber si ya
   está, y con el filtro en la mano hay que poder preguntar al revés
   —"¿para qué carros sirve este?"— buscando por referencia. */
.buscador { margin-bottom: 16px; }

.buscador label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-suave);
}

.buscador input[type="search"] {
  width: 100%;
  min-height: var(--alto-tactil);
  padding: 12px 14px;
  font-size: 17px;
  background: var(--fondo);
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  /* Sin esto iOS lo dibuja como una píldora gris que no se parece a
     ningún otro campo de la app. */
  -webkit-appearance: none;
  appearance: none;
}

.buscador input[type="search"]:focus { border-color: var(--borde-fuerte); }
.buscador .campo__ayuda { margin-top: 6px; }

/* "Ver más" ocupa el ancho: es un blanco táctil, no un enlace. */
.registros + .boton-secundario { width: 100%; margin-top: 16px; }

.registros { list-style: none; margin: 0; padding: 0; }

.registros li {
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
}

.registros li:first-child { animation: entrar .2s ease-out; }

.registro__titulo { font-size: 17px; font-weight: 600; }
.registro__detalle { margin-top: 4px; font-size: 15px; color: var(--texto-suave); }

/* Lo que el bot va a decir, literal. Se muestra como una cita para
   que se lea distinto de los datos de alrededor. */
.registro__cita {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 3px solid var(--borde);
  font-size: 16px;
  color: var(--texto);
}

.boton-secundario {
  margin-top: 12px;
  min-height: 44px;
  padding: 8px 16px;
  background: none;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-suave);
  font-size: 15px;
}

.boton-secundario:active { border-color: var(--mal); color: var(--mal); }

/* Estado de un registro: si el bot lo está usando o no. */
.etiqueta {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid;
}

.etiqueta[data-estado="viva"]    { color: var(--bien);  border-color: var(--bien);  background: var(--bien-fondo); }
.etiqueta[data-estado="vencida"] { color: var(--texto-suave); border-color: var(--borde); background: var(--superficie); }
.etiqueta[data-estado="futura"]  { color: var(--aviso); border-color: var(--aviso); background: var(--superficie); }

/* Una promoción vencida se ve, pero apagada: sigue ahí para que se
   entienda por qué el bot dejó de mencionarla. */
.registros li[data-vencida="true"] .registro__titulo,
.registros li[data-vencida="true"] .registro__cita { opacity: .6; }

.sin-dato { color: var(--texto-suave); font-style: italic; }

.cargando { padding: 32px 0; text-align: center; color: var(--texto-suave); font-size: 16px; }

.tarjeta {
  padding: 18px;
  margin-bottom: 14px;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.tarjeta h2 { margin: 0 0 8px; font-size: 18px; }
.tarjeta p { margin: 0; color: var(--texto-suave); }

/* ── Confirmación flotante ──────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: calc(100vw - 32px);
  padding: 14px 22px;
  border-radius: var(--radio);
  background: var(--bien);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
}

.toast[data-tono="mal"] { background: var(--mal); }
.toast[data-tono="aviso"] { background: var(--borde-fuerte); color: var(--fondo); }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: entrar .16s ease-out; }
  @keyframes entrar { from { opacity: 0; transform: translate(-50%, 10px); } }
}

@media (prefers-reduced-motion: reduce) {
  .registros li:first-child { animation: none; }
}

/* ── Escritorio ─────────────────────────────────────────────
 *
 * A partir de 1024 px cambia el armazón, no el estilo: la barra de
 * navegación pasa de abajo a la izquierda —una barra inferior de
 * ancho completo en un monitor no se parece a nada— y el contenido
 * usa el ancho en vez de dejar 400 px muertos a cada lado.
 *
 * Los controles bajan de 64 a 56 px: con un ratón sobra, y así el
 * formulario entra completo sin desplazarse. Sigue siendo cómodo
 * para un dedo, por si esto termina en una tablet en el mostrador.
 */
@media (min-width: 1024px) {
  :root { --alto-tactil: 56px; }

  #app {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100dvh;
  }

  .barra { grid-column: 1 / -1; padding: 16px 32px; }
  .barra small { font-size: 15px; }

  /* Explícito: en el HTML la navegación va después del contenido
     —el orden correcto en el teléfono, donde está abajo— así que
     sin esto el auto-placement las intercambia. */
  .navegacion {
    grid-column: 1;
    grid-row: 2;
    position: static;
    flex-direction: column;
    align-content: start;
    border-top: 0;
    border-right: 2px solid var(--borde);
    padding-bottom: 0;
  }

  .navegacion button {
    flex: 0 0 auto;
    min-height: 56px;
    padding: 14px 22px;
    text-align: left;
    font-size: 16px;
    border-top: 0;
    border-left: 4px solid transparent;
  }

  .navegacion button[aria-current="page"] {
    border-top-color: transparent;
    border-left-color: var(--acento);
    background: var(--superficie);
  }

  /* La vendedora tiene una sola sección: sin barra, sin columna. */
  body.sin-navegacion #app { grid-template-columns: minmax(0, 1fr); }

  .contenido { grid-column: 2; grid-row: 2; max-width: 1180px; margin: 0; padding: 28px 32px 48px; }
  body.sin-navegacion .contenido { grid-column: 1; padding-bottom: 48px; }

  /* Algo más denso: con el ratón no hace falta tanta separación, y
     así el formulario entra de una en una pantalla de portátil. */
  .campo, .campo--doble .campo { margin-bottom: 16px; }
  .campo > label, .campo__etiqueta { margin-bottom: 6px; }
  .campo textarea { min-height: 88px; }
  .boton-principal { min-height: 60px; margin-top: 4px; }

  .dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }

  /* El título de la lista ya no separa dos bloques apilados: es el
     encabezado de su propia columna. */
  .columna-lateral .seccion-titulo {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Los grupos de configuración en dos columnas: en un monitor,
     una sola columna de tarjetas deja media pantalla vacía. */
  .grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  .toast { bottom: 28px; }

  /* Con ratón sí hay estado intermedio antes del clic. */
  .personas button:hover,
  .teclado button:hover,
  .opciones button:hover,
  .salir:hover { border-color: var(--borde-fuerte); }
  .navegacion button:hover { background: var(--superficie); color: var(--texto); }
  .boton-principal:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
}

/* ── Consumo de IA ───────────────────────────────────────────
   Solo lo ve un admin. Lidera con el promedio diario y no con el
   total: el total dice lo que ya pasó, el promedio dice cuánto
   aguanta lo que queda. */

.consumo__titulo {
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.consumo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.consumo__lista li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
}

.consumo__lista li:last-child { border-bottom: none; }

.consumo__monto {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* El aviso de saldo cambia de tono, no solo de texto: a los cinco
   días hay que mirarlo, a los dos hay que actuar. */
.consumo__saldo {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--radio);
  font-weight: 600;
  background: var(--superficie);
}

.consumo__saldo[data-tono="bien"]  { background: var(--bien-fondo); color: var(--bien); }
.consumo__saldo[data-tono="aviso"] { background: #fff4e0; color: var(--aviso); }
.consumo__saldo[data-tono="mal"]   { background: var(--mal-fondo); color: var(--mal); }

@media (prefers-color-scheme: dark) {
  .consumo__saldo[data-tono="aviso"] { background: #3a2c10; }
}

/* La letra chica que evita que un número se lea como algo que no
   es. Nunca se esconde: es la diferencia entre un dato medido y
   uno estimado. */
.consumo__nota {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* El unico dato que hay que teclear en todo el panel. Va abierto y
   no escondido tras un "editar": de el depende que exista la alerta
   de saldo, y un formulario escondido no se usa. */
.saldo { margin-top: 18px; }

.saldo__fila {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.saldo__monto {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  height: var(--alto-tactil);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.saldo__monto:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 1px;
}

/* Dentro de la fila el boton va alineado con el campo, no debajo:
   el margen y el rojo de :active son para acciones destructivas y
   anotar un saldo no lo es. */
.saldo__fila .boton-secundario {
  margin-top: 0;
  white-space: nowrap;
  align-self: stretch;
  padding: 0 18px;
}

.saldo__fila .boton-secundario:active {
  border-color: var(--acento);
  color: var(--acento);
}

/* ── Interruptor sí/no (campos booleanos de "Datos") ─────────────
   Un switch se entiende de un vistazo; escribir true/false no. */
.interruptor {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--alto-tactil);
  cursor: pointer;
}
.interruptor__entrada {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: -1px;
}
.interruptor__pista {
  flex: 0 0 auto;
  width: 60px; height: 34px;
  border-radius: 999px;
  background: var(--borde);
  border: 2px solid var(--borde);
  position: relative;
  transition: background .15s, border-color .15s;
}
.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--fondo);
  transition: transform .15s;
}
.interruptor__entrada:checked + .interruptor__pista {
  background: var(--acento);
  border-color: var(--acento);
}
.interruptor__entrada:checked + .interruptor__pista::after {
  transform: translateX(26px);
}
.interruptor__entrada:focus-visible + .interruptor__pista {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}
.interruptor__texto { font-weight: 600; }
.interruptor__estado {
  margin-left: auto;
  color: var(--texto-suave);
  font-size: 16px;
}