/* ============================================================
   Panel SUPERADMIN de Lokky — mismo territorio de la portada v2:
   claro institucional + el símbolo modular. Denso y funcional,
   pero con la gramática de la marca.

   LAS REGLAS, que son lo que separa esto de un cambio de colores:
   · Cero degradados. La separación es un hairline de 1px, nunca
     una sombra.
   · El índigo ocupa poco — botones primarios y enlaces activos, y
     ya. Su fuerza viene de la escasez.
   · El color semántico (verde/ámbar/rojo de estados y semáforos)
     es independiente del índigo y no se mezcla con él.
   · IBM Plex Mono SOLO para datos: cifras, claves, estados,
     fechas, tokens, URLs. Nunca para prosa.
   ============================================================ */
:root{
  /* Los tokens salen tal cual del :root de la plantilla aprobada
     (plantilla_portada_getlokky_v2.html). No se inventan valores. */
  --hueso:#FBFAF7;
  --papel:#FFFFFF;
  --hueso-hondo:#F4F2EC;

  --tinta:#101114;
  --tinta-media:#5C6068;
  --tinta-tenue:#8A8F99;

  --regla:#E3E0D9;
  --regla-fuerte:#CFCABF;

  --indigo:#26306B;
  --indigo-hondo:#1A2150;
  --indigo-vel:#EEF0F8;
  --indigo-borde:#CDD2E4;

  /* Semánticos: NO son la marca. Verde y ámbar son los de la
     portada; el rojo es el único valor que hubo que sumar, porque
     la portada no tiene ninguno — está construido en el mismo
     registro que --ok y --espera (oscuro, desaturado) para pasar
     contraste sobre el fondo claro. */
  --ok:#2F7D5B;
  --espera:#8A6D2F;
  --falla:#A33A32;

  --f-texto:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --radio:10px;
  --radio-chico:6px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--hueso);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:700;line-height:1.15;letter-spacing:-.028em}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

/* Todo lo que es DATO va en mono y con cifras tabulares. */
.mono,.num,.chip,.cifra small,.cifra strong,th,
.salud-dato small,.log-item time,.miga,.p-logo small{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
}

/* --- La marca: símbolo modular + logotipo --- */
.p-logo{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--tinta);text-decoration:none;flex:none;
}
.p-logo:hover{text-decoration:none}
.p-logo svg{display:block;flex:none}
.p-logo .wm{font-size:20px;font-weight:700;letter-spacing:-.048em}
.p-logo small{
  font-size:.62rem;color:var(--tinta-media);
  letter-spacing:.14em;text-transform:uppercase;
}

/* --- La retícula viva ------------------------------------
   Solo en dos sitios: el login y la cabecera del Tablero. En
   las pantallas de trabajo no va — ahí se están leyendo datos
   y el movimiento estorba. Mismos frenos que en la portada:
   arranca en la L, cambia cada 2,6 s, opacidad baja, se
   detiene fuera de pantalla y respeta prefers-reduced-motion.
   -------------------------------------------------------- */
.reticula-viva{pointer-events:none;user-select:none}
.reticula-viva svg{display:block;width:100%;height:auto}
.reticula-viva rect{
  fill:var(--indigo);
  transition:fill-opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.reticula-viva rect[data-on="0"]{fill-opacity:.05}
.reticula-viva rect[data-on="1"]{fill-opacity:.16}
@media (prefers-reduced-motion: reduce){
  .reticula-viva rect{transition:none}
}

/* --- Cabecera del panel --- */
.p-cabecera{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1.4rem;
  padding:.7rem 1.4rem;
  background:rgba(251,250,247,.9);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--regla);
}
.p-nav{display:flex;gap:.25rem;flex:1;flex-wrap:wrap}
.p-nav a{
  color:var(--tinta-media);font-weight:500;font-size:.92rem;
  padding:.4rem .8rem;border-radius:var(--radio-chico);
}
.p-nav a:hover{color:var(--tinta);background:var(--hueso-hondo);text-decoration:none}
.p-nav a.activa{color:var(--indigo);background:var(--indigo-vel)}
.p-salir{font-size:.85rem;color:var(--tinta-media)}

.p-contenido{max-width:1180px;margin:0 auto;padding:1.6rem 1.4rem 4rem}
.p-titulo{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.p-titulo h1{font-size:1.7rem;letter-spacing:-.032em}
.p-titulo .miga{font-size:.85rem;color:var(--tinta-media)}

/* Cabecera del Tablero: el único sitio del panel, aparte del
   login, donde la retícula se mueve. */
.tablero-cab{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  border-bottom:1px solid var(--regla);
  padding-bottom:1.1rem;margin-bottom:1.4rem;
}
.tablero-cab .p-titulo{flex:1;margin-bottom:0;align-items:baseline}
.tablero-cab .reticula-viva{width:82px;flex:none}
@media (max-width:700px){ .tablero-cab .reticula-viva{display:none} }

/* --- Tarjetas y grillas --- */
.carta{
  background:var(--papel);
  border:1px solid var(--regla);
  border-radius:var(--radio);
  padding:1.1rem 1.2rem;
}
.carta h2{font-size:1.05rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;justify-content:space-between}
.grilla{display:grid;gap:1rem}
/* Un hijo de grid no baja del ancho de su contenido si no se le dice.
   Sin esto una tabla ancha estira la tarjeta y desborda el móvil, y el
   scroll de .tabla-envuelta nunca llega a usarse. */
.grilla > *{min-width:0}
.grilla-2{grid-template-columns:1fr}
.grilla-cifras{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
@media(min-width:900px){ .grilla-2{grid-template-columns:1fr 1fr} }

/* --- Cifras del tablero --- */
.cifra{padding:1rem 1.1rem}
.cifra small{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-media);margin-bottom:.35rem}
.cifra strong{font-size:1.45rem;font-weight:700;letter-spacing:-.02em}
.cifra .positivo{color:var(--ok)}
.cifra .negativo{color:var(--falla)}

/* --- Chips de estado ---
   Fondo hueso + hairline y texto del color semántico: se leen de
   un vistazo y pasan contraste sobre la tarjeta blanca. */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  padding:.2rem .55rem;border-radius:4px;white-space:nowrap;
  background:var(--hueso);border:1px solid var(--regla-fuerte);color:var(--tinta-media);
}
.chip-prospecto{color:var(--tinta-media)}
.chip-en_demo{color:var(--espera);border-color:var(--espera)}
.chip-activo{color:var(--ok);border-color:var(--ok)}
.chip-pausado{color:var(--falla);border-color:var(--falla)}
.chip-ok{color:var(--ok);border-color:var(--ok)}
.chip-mal{color:var(--falla);border-color:var(--falla)}
.chip-neutro{color:var(--tinta-media)}
/* Módulo construido pero sin su conexión externa definitiva */
.chip-preparacion{color:var(--espera);border-color:var(--espera)}

/* Semáforo (punto de salud). Plano: sin halos ni sombras. */
.semaforo{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.semaforo.verde{background:var(--ok)}
.semaforo.rojo{background:var(--falla)}
.semaforo.gris{background:var(--tinta-tenue)}

/* --- Tablas --- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{
  text-align:left;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-media);
  padding:.5rem .6rem;border-bottom:1px solid var(--regla);
  font-weight:500;
}
td{padding:.55rem .6rem;border-bottom:1px solid var(--regla);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.enlace{cursor:pointer}
tr.enlace:hover td{background:var(--hueso-hondo)}
.num{text-align:right;font-size:.82rem}
.tabla-envuelta{overflow-x:auto}

/* --- Formularios --- */
label{display:block;font-size:.8rem;color:var(--tinta-media);margin-bottom:.25rem;font-weight:500}
input,select,textarea{
  width:100%;
  background:var(--papel);
  border:1px solid var(--regla-fuerte);
  border-radius:var(--radio-chico);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:.92rem;
  padding:.55rem .7rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--indigo);outline-offset:1px;border-color:var(--indigo-borde)}
input::placeholder,textarea::placeholder{color:var(--tinta-tenue)}
input[type=color]{padding:.15rem;height:2.4rem;cursor:pointer}
input[type=checkbox]{width:auto}
textarea{resize:vertical;min-height:4.2rem}
/* El dato se escribe en mono: claves, URLs, tokens, fechas, cifras */
input[type=number],input[type=date],input[type=password],
#f-clave,#f-subdominio,#f-instancia{font-family:var(--f-mono);font-size:.88rem}
.campo{margin-bottom:.85rem}
.campos{display:grid;gap:.85rem 1rem;grid-template-columns:1fr}
@media(min-width:700px){ .campos{grid-template-columns:1fr 1fr} .campo-ancho{grid-column:1/-1} }

/* --- Botones --- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--f-texto);font-weight:600;font-size:.88rem;
  padding:.55rem 1.1rem;border-radius:var(--radio-chico);cursor:pointer;
  border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.boton-primario{background:var(--indigo);color:#fff}
.boton-primario:hover{background:var(--indigo-hondo)}
.boton-secundario{background:var(--papel);color:var(--tinta);border-color:var(--regla-fuerte)}
.boton-secundario:hover{border-color:var(--tinta-media)}
.boton-peligro{background:var(--papel);color:var(--falla);border-color:var(--falla)}
.boton-peligro:hover{background:var(--hueso-hondo)}
.boton-mini{padding:.28rem .7rem;font-size:.76rem}
.boton:disabled{opacity:.5;cursor:not-allowed}

/* --- Interruptor de módulo ---
   Encendido va en verde semántico, no en índigo: es un estado. */
.interruptor{
  position:relative;width:42px;height:24px;border-radius:999px;
  background:var(--hueso-hondo);border:1px solid var(--regla-fuerte);
  cursor:pointer;flex:none;transition:background .2s ease,border-color .2s ease;
}
.interruptor::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--tinta-tenue);transition:all .2s ease;
}
.interruptor.encendido{background:var(--papel);border-color:var(--ok)}
.interruptor.encendido::after{left:20px;background:var(--ok)}
.interruptor.ocupado{opacity:.5;pointer-events:none}

/* --- Avisos --- */
.aviso{
  border-radius:var(--radio-chico);padding:.7rem .9rem;font-size:.88rem;margin-bottom:1rem;
  border:1px solid var(--regla);background:var(--papel);color:var(--tinta-media);
}
.aviso-error{border-color:var(--falla);color:var(--falla)}
.aviso-ok{border-color:var(--ok);color:var(--ok)}
/* Advertencia de módulo en habilitación: no es un error, es un cuidado */
.aviso-ojo{border-color:var(--espera);color:var(--espera)}
.vacio{color:var(--tinta-media);font-size:.9rem;padding:.8rem 0;text-align:center}

/* --- Modal simple --- */
dialog{
  background:var(--papel);color:var(--tinta);
  border:1px solid var(--regla-fuerte);border-radius:var(--radio);
  padding:1.4rem;width:min(680px,92vw);max-height:88vh;overflow-y:auto;
  /* El reset de arriba le quita el margin:auto con el que el navegador
     centra los diálogos; se lo devolvemos. */
  margin:auto;
}
dialog::backdrop{background:rgba(16,17,20,.42)}
dialog h2{font-size:1.15rem;margin-bottom:1rem}
.modal-pie{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}

/* --- Login --- */
.login-marco{position:relative;min-height:100vh;display:grid;place-items:center;padding:1.5rem}
/* La retícula viva, detrás del formulario y más grande que él: se ve
   respirar alrededor, pero el formulario va sobre superficie opaca —
   ningún texto queda leyéndose encima del movimiento. */
.login-marco .reticula-viva{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(520px,92vw);z-index:0;
}
.login-caja{
  position:relative;z-index:1;width:min(380px,100%);text-align:center;
  background:var(--papel);border:1px solid var(--regla);
  border-radius:var(--radio);padding:1.9rem 1.6rem 1.7rem;
}
.login-caja .p-logo{justify-content:center;margin-bottom:.5rem}
.login-caja .p-logo .wm{font-size:26px}
.login-caja p{color:var(--tinta-media);font-size:.9rem;margin-bottom:1.4rem}
.login-caja form{display:grid;gap:.8rem;text-align:left}

/* --- Ficha del cliente --- */
.salud-fila{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center}
.salud-dato small{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-media)}
.salud-dato span{font-size:.92rem;font-weight:600}
.salud-dato span.falla{color:var(--falla)}
canvas.grafica{width:100%;height:170px;display:block}
.lista-simple{list-style:none;font-size:.9rem}
.lista-simple li{display:flex;justify-content:space-between;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--regla)}
.lista-simple li:last-child{border-bottom:none}
.lista-simple .num{color:var(--tinta-media)}
.lista-simple .num.falla{color:var(--falla)}
.log-item{font-size:.84rem;padding:.5rem 0;border-bottom:1px solid var(--regla);display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.log-item:last-child{border-bottom:none}
.log-item time{font-size:.7rem;color:var(--tinta-media);flex:none}
.log-item .detalle{color:var(--tinta-media)}

/* Vista previa de marca — aquí manda la marca DEL RESTAURANTE:
   los colores los pinta ficha.js con lo que traiga la instancia,
   no la paleta de Lokky. */
.previa-marca{
  border:1px solid var(--regla);border-radius:var(--radio);overflow:hidden;
  background:var(--hueso-hondo);
}
.previa-portada{height:110px;background:var(--hueso-hondo);background-size:cover;background-position:center;display:grid;place-items:center;color:var(--tinta-media);font-size:.8rem}
.previa-cuerpo{padding:1rem 1.1rem;display:grid;gap:.5rem}
.previa-cuerpo img{max-height:46px;max-width:140px;object-fit:contain;justify-self:start}
.previa-nombre{font-size:1.3rem;font-weight:700}
.previa-eslogan{font-size:.88rem;opacity:.75}
.previa-boton{justify-self:start;border-radius:var(--radio-chico);padding:.4rem 1rem;font-size:.8rem;font-weight:700}

.seccion-panel{margin-bottom:1.2rem}
.fila-acciones{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.texto-tenue{color:var(--tinta-media);font-size:.82rem}
.mono{font-size:.8rem}
/* Un dato que pide atención: fecha vencida, base con problemas,
   margen por debajo. Color semántico, nunca el índigo de la marca. */
.falla{color:var(--falla)}