/* ==========================================================================
   AI MATIC — sistema visual de la plataforma (29 de septiembre de 2026)

   Dirección (ui-ux-pro-max, "AI dashboard / developer tool"): tablero oscuro
   de precisión técnica — fondo casi negro azulado, superficies apenas más
   claras, UN acento verde ("todo corre") y datos en números tabulares.
   Tipografía: Inter, servida desde aquí (sin depender de Google).

   ESTA ES LA MARCA DE AI MATIC, NO LA DEL RESTAURANTE. El panel de cocina de
   cada cliente conserva la suya (panel.css). Lo que ve el restaurantero al
   entrar y lo que ve AI Matic en su consola es AI Matic.

   CONTRASTES (texto sobre --fondo #0A0F1C), medidos:
     --texto        #F1F5F9  17.6:1
     --tenue        #94A3B8   7.4:1
     --acento       #22C55E   8.6:1   (verde "ok")
     --aviso        #F5B942  10.3:1
     --peligro      #F87171   6.6:1
     --info         #60A5FA   7.0:1
   Texto sobre el botón verde: #052E16 → 7.9:1.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fondo: #0A0F1C;
  --superficie: #0F1729;
  --superficie-2: #141E35;
  --superficie-3: #1A2642;
  --borde: #1E2A44;
  --borde-fuerte: #2B3A5C;
  --texto: #F1F5F9;
  --tenue: #94A3B8;
  --apagado: #64748B;
  --acento: #22C55E;
  --acento-fuerte: #16A34A;
  --sobre-acento: #052E16;
  --acento-fondo: rgba(34, 197, 94, 0.12);
  --aviso: #F5B942;
  --aviso-fondo: rgba(245, 185, 66, 0.12);
  --peligro: #F87171;
  --peligro-fondo: rgba(248, 113, 113, 0.12);
  --info: #60A5FA;
  --info-fondo: rgba(96, 165, 250, 0.12);
  --anillo: 0 0 0 3px rgba(34, 197, 94, 0.35);

  --radio: 10px;
  --radio-grande: 14px;
  --sombra: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --z-barra: 20;
  --z-modal: 50;
  --z-aviso: 60;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
.num, .cifra, td.num { font-variant-numeric: tabular-nums; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { letter-spacing: -0.015em; margin: 0; }

/* ── Marca ─────────────────────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--texto); letter-spacing: -0.02em; }
.marca:hover { text-decoration: none; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca small { font-weight: 500; color: var(--tenue); font-size: 12px; letter-spacing: 0; padding: 2px 8px; border: 1px solid var(--borde); border-radius: 999px; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radio); border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2); color: var(--texto);
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--superficie-3); border-color: #3A4B72; text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn-primario:hover { background: #2FD66C; border-color: #2FD66C; }
.btn-peligro { color: var(--peligro); border-color: rgba(248,113,113,.35); background: transparent; }
.btn-peligro:hover { background: var(--peligro-fondo); border-color: var(--peligro); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--tenue); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-chico { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn-ancho { width: 100%; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ── Formularios ───────────────────────────────────────────────────────── */
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto); }
.campo .ayuda { font-size: 12.5px; color: var(--tenue); }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 46px; padding: 10px 14px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  font: inherit; font-size: 16px; /* 16px: iOS no hace zoom al tocar */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entrada::placeholder { color: var(--apagado); }
.entrada:hover { border-color: #3A4B72; }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: var(--anillo); }
.entrada[aria-invalid="true"] { border-color: var(--peligro); }
.error-campo { color: var(--peligro); font-size: 13px; min-height: 0; }
.con-ojo { position: relative; }
.con-ojo .entrada { padding-right: 52px; }
.con-ojo button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 38px; border: 0; background: transparent; color: var(--tenue); cursor: pointer; border-radius: 8px; }
.con-ojo button:hover { color: var(--texto); background: var(--superficie-2); }

/* ── Mensajes ──────────────────────────────────────────────────────────── */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio); font-size: 14px; border: 1px solid; }
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.aviso-ok { background: var(--acento-fondo); border-color: rgba(34,197,94,.3); color: #BBF7D0; }
.aviso-error { background: var(--peligro-fondo); border-color: rgba(248,113,113,.35); color: #FECACA; }
.aviso-info { background: var(--info-fondo); border-color: rgba(96,165,250,.3); color: #BFDBFE; }
.aviso-cuidado { background: var(--aviso-fondo); border-color: rgba(245,185,66,.3); color: #FDE68A; }
[hidden] { display: none !important; }

/* ── Pantallas de entrada (entrar / restablecer) ───────────────────────── */
.acceso {
  min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(var(--fondo), var(--fondo));
  position: relative; overflow: hidden;
}
.acceso::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%);
}
.acceso-caja { position: relative; width: 100%; max-width: 420px; }
.acceso-caja .marca { margin-bottom: 28px; }
.tarjeta-acceso { background: rgba(15,23,41,.85); backdrop-filter: blur(8px); border: 1px solid var(--borde); border-radius: 16px; padding: 28px; box-shadow: var(--sombra); }
.tarjeta-acceso h1 { font-size: 24px; margin-bottom: 6px; }
.tarjeta-acceso .sub { color: var(--tenue); margin: 0 0 24px; font-size: 14.5px; }
.pie-acceso { text-align: center; margin-top: 18px; font-size: 13px; color: var(--tenue); }
.separador { display: flex; align-items: center; gap: 12px; color: var(--apagado); font-size: 12px; margin: 20px 0; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.fila-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.enlace-boton { background: none; border: 0; color: var(--acento); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; min-height: 32px; }
.enlace-boton:hover { text-decoration: underline; }

/* ── Consola: estructura ───────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; border-right: 1px solid var(--borde); background: #0B1222; padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; }
.lateral nav { display: grid; gap: 4px; }
.lateral nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--tenue); font-weight: 500; font-size: 14px; min-height: 44px; }
.lateral nav a:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.lateral nav a[aria-current="page"] { background: var(--superficie-2); color: var(--texto); box-shadow: inset 2px 0 0 var(--acento); }
.lateral nav svg { width: 18px; height: 18px; }
.lateral .yo { margin-top: auto; padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 13px; }
.lateral .yo strong { display: block; font-size: 14px; }
.lateral .yo span { color: var(--tenue); word-break: break-all; }
.principal { padding: 28px 32px 64px; max-width: 1180px; width: 100%; }
.cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabeza h1 { font-size: 26px; }
.cabeza p { margin: 4px 0 0; color: var(--tenue); font-size: 14px; }
.barra-movil { display: none; }
.tabs-movil { display: none; }

/* La barra de la cuenta del dueño (una sola página, sin menú lateral) */
.barra-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: rgba(10,15,28,.92); backdrop-filter: blur(8px); z-index: var(--z-barra); }
.titulo-seccion { font-size: 13px; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; margin: 0; }

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 18px 20px; }
.tarjeta h2 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.tarjeta .sub { color: var(--tenue); font-size: 13px; margin: 0 0 14px; }
.rejilla { display: grid; gap: 14px; }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.seccion { margin-top: 26px; }
.seccion > h2 { font-size: 13px; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }

.metrica { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 16px 18px; }
.metrica .etiqueta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--tenue); font-size: 12.5px; font-weight: 500; }
.metrica .cifra { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; line-height: 1.15; }
.metrica .detalle { color: var(--tenue); font-size: 12.5px; margin-top: 4px; }
.barra-uso { height: 5px; background: var(--superficie-3); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.barra-uso i { display: block; height: 100%; background: var(--acento); border-radius: 3px; }

/* ── Estado: punto + etiqueta ──────────────────────────────────────────── */
.estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.estado-ok { color: var(--acento); background: var(--acento-fondo); }
.estado-aviso { color: var(--aviso); background: var(--aviso-fondo); }
.estado-falla { color: var(--peligro); background: var(--peligro-fondo); }
.estado-info { color: var(--info); background: var(--info-fondo); }
.estado-apagado, .estado-desconocido { color: var(--tenue); background: var(--superficie-2); }
.estado-vivo::before { box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: late 2s infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* El semáforo grande de arriba */
.veredicto { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radio-grande); border: 1px solid var(--borde); background: var(--superficie); margin-bottom: 18px; }
.veredicto .luz { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.veredicto.bien .luz { background: var(--acento); box-shadow: 0 0 0 6px var(--acento-fondo); }
.veredicto.cuidado .luz { background: var(--aviso); box-shadow: 0 0 0 6px var(--aviso-fondo); }
.veredicto.mal .luz { background: var(--peligro); box-shadow: 0 0 0 6px var(--peligro-fondo); }
.veredicto.mal { border-color: rgba(248,113,113,.4); }
.veredicto strong { display: block; font-size: 16px; }
.veredicto span { color: var(--tenue); font-size: 13.5px; }
.veredicto .btn { margin-left: auto; }

/* ── Lista de clientes ─────────────────────────────────────────────────── */
.lista { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden; }
.fila-cliente { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(110px, .9fr) 28px; gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--borde); cursor: pointer; transition: background-color .15s ease; color: var(--texto); }
.fila-cliente:first-child { border-top: 0; }
.fila-cliente:hover { background: var(--superficie-2); text-decoration: none; }
.fila-cliente .nombre strong { display: block; font-size: 15px; }
.fila-cliente .nombre span, .fila-cliente .dato span { color: var(--tenue); font-size: 12.5px; }
.fila-cliente .dato strong { display: block; font-size: 14px; }
.fila-cliente .flecha { color: var(--apagado); }
.encabezado-lista { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(110px, .9fr) 28px; gap: 14px; padding: 10px 20px; font-size: 12px; font-weight: 600; color: var(--apagado); text-transform: uppercase; letter-spacing: .05em; background: #0C1426; border-bottom: 1px solid var(--borde); }
.fila-cliente > * { min-width: 0; }
.fila-cliente .estado { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* La etiqueta "Este mes" / "Soporte" dentro de la fila solo hace falta cuando
   no se ve el encabezado de la lista (en pantallas angostas). */
.fila-cliente .dato > span:first-child { display: none; }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.vacio { padding: 28px 20px; color: var(--tenue); font-size: 14px; text-align: center; }

/* ── Pestañas de la ficha ──────────────────────────────────────────────── */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 4px 0 20px; overflow-x: auto; scrollbar-width: none; }
.pestanas button { background: none; border: 0; color: var(--tenue); font: inherit; font-weight: 600; font-size: 14px; padding: 12px 14px; min-height: 44px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); }
.migas { display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); font-size: 13px; margin-bottom: 10px; background: none; border: 0; cursor: pointer; font: inherit; padding: 6px 0; min-height: 36px; }
.migas:hover { color: var(--texto); }
.migas svg, .tarjeta svg:not(.interruptor svg), .vacio svg { width: 16px; height: 16px; flex: none; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; font-weight: 600; color: var(--apagado); text-transform: uppercase; letter-spacing: .05em; padding: 11px 16px; background: #0C1426; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 12px 16px; border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:first-child td { border-top: 0; }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla tr.clicable { cursor: pointer; }
.tabla tr.clicable:hover td { background: var(--superficie-2); }
.tenue { color: var(--tenue); }
.chico { font-size: 12.5px; }

/* ── Conversación ──────────────────────────────────────────────────────── */
.conversacion { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.globo { max-width: 82%; padding: 9px 13px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.globo small { display: block; color: var(--apagado); font-size: 11.5px; margin-bottom: 2px; }
.globo.cliente { background: var(--superficie-3); justify-self: start; border-top-left-radius: 4px; }
.globo.bot { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.2); justify-self: end; border-top-right-radius: 4px; }
.globo.sistema { justify-self: center; background: transparent; border: 1px dashed var(--borde-fuerte); color: var(--tenue); font-size: 12.5px; max-width: 100%; }
.globo.bajo { box-shadow: inset 3px 0 0 var(--aviso); }

/* ── El mapa del sistema ───────────────────────────────────────────────── */
.mapa-grupo { margin-top: 22px; }
.mapa-grupo > h2 { font-size: 13px; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.camino { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; counter-reset: paso; }
.nodo { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 14px 16px 16px; min-height: 132px; display: flex; flex-direction: column; gap: 6px; }
.nodo.en-camino { counter-increment: paso; }
.nodo.en-camino h3::before { content: counter(paso) " · "; color: var(--apagado); font-weight: 600; font-variant-numeric: tabular-nums; }
.nodo .icono { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto); }
.nodo .icono svg { width: 18px; height: 18px; }
.nodo h3 { font-size: 14.5px; font-weight: 600; margin-top: 4px; }
.nodo .que { color: var(--tenue); font-size: 12.5px; line-height: 1.4; }
.nodo .detalle { font-size: 12.5px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--borde); color: var(--texto); line-height: 1.4; }
.nodo.falla { border-color: rgba(248,113,113,.5); background: linear-gradient(var(--peligro-fondo), var(--peligro-fondo)), var(--superficie); }
.nodo.falla .icono { color: var(--peligro); border-color: rgba(248,113,113,.4); }
.nodo.aviso { border-color: rgba(245,185,66,.45); }
.nodo.aviso .icono { color: var(--aviso); border-color: rgba(245,185,66,.4); }
.nodo.ok .icono { color: var(--acento); border-color: rgba(34,197,94,.35); }
.nodo.apagado { opacity: .8; }
.flujo-leyenda { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Modal (dialog nativo) ─────────────────────────────────────────────── */
dialog.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--borde-fuerte); border-radius: 16px; background: var(--superficie); color: var(--texto); box-shadow: 0 24px 64px rgba(0,0,0,.6); }
dialog.modal::backdrop { background: rgba(2, 6, 18, .72); backdrop-filter: blur(3px); }
.modal-cuerpo { padding: 22px 22px 8px; }
.modal-cuerpo h2 { font-size: 18px; margin-bottom: 6px; }
.modal-cuerpo > p { color: var(--tenue); font-size: 14px; margin: 0 0 18px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; flex-wrap: wrap; }

/* ── Aviso flotante ────────────────────────────────────────────────────── */
.brindis { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--superficie-3); border: 1px solid var(--borde-fuerte); color: var(--texto); padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; z-index: var(--z-aviso); transition: opacity .2s ease, transform .2s ease; box-shadow: var(--sombra); max-width: calc(100vw - 32px); }
.brindis.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.brindis.error { border-color: rgba(248,113,113,.5); }

/* ── Cargando ──────────────────────────────────────────────────────────── */
.esqueleto { background: linear-gradient(90deg, var(--superficie) 0%, var(--superficie-2) 50%, var(--superficie) 100%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; border-radius: var(--radio-grande); border: 1px solid var(--borde); }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Interruptor ───────────────────────────────────────────────────────── */
.interruptor { position: relative; width: 48px; height: 28px; flex: none; }
.interruptor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: var(--superficie-3); border: 1px solid var(--borde-fuerte); transition: background-color .2s ease; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--tenue); transition: transform .2s ease, background-color .2s ease; }
.interruptor input:checked + span { background: var(--acento); border-color: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(20px); background: #fff; }
.interruptor input:focus-visible + span { box-shadow: var(--anillo); }

/* ── Celular ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .encabezado-lista { display: none; }
  .fila-cliente { grid-template-columns: 1fr auto auto; gap: 10px 12px; }
  .fila-cliente .nombre { grid-column: 1 / -1; }
  .fila-cliente .dato { display: flex; gap: 8px; align-items: center; }
  .fila-cliente .dato > span:first-child { display: inline; }
  .fila-cliente .flecha { display: none; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .barra-movil { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: rgba(10,15,28,.92); backdrop-filter: blur(8px); z-index: var(--z-barra); }
  .tabs-movil { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: rgba(11,18,34,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--borde); z-index: var(--z-barra); padding-bottom: env(safe-area-inset-bottom); }
  .tabs-movil a { display: grid; justify-items: center; gap: 2px; padding: 9px 4px 10px; color: var(--tenue); font-size: 11.5px; font-weight: 600; min-height: 56px; }
  .tabs-movil a:hover { text-decoration: none; }
  .tabs-movil a[aria-current="page"] { color: var(--acento); }
  .tabs-movil svg { width: 22px; height: 22px; }
  .principal { padding: 20px 16px 96px; }
  .rejilla-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metrica { padding: 14px; }
  .metrica .cifra { font-size: 21px; }
  .veredicto { padding: 14px 16px; }
  .cabeza h1 { font-size: 22px; }
  .fila-cliente { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .fila-cliente .dato { grid-column: 1 / -1; justify-content: space-between; }
  .fila-cliente .dato strong { display: inline; }
  .veredicto { flex-wrap: wrap; }
  .veredicto .btn { margin-left: 0; width: 100%; }
  .tarjeta-acceso { padding: 22px; }
  .globo { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}