@charset "UTF-8";
/* =====================================================================
   EssencePOS — Panel de administración · Sistema de diseño (admin2.css)
   28-ago-2026

   Hoja ÚNICA y autónoma: sustituye a assets/admin.css + assets/premium.css
   juntas. No hereda ninguna variable de ellas ni carga nada más que las
   tipografías de Google Fonts (que se importan aquí abajo).

   Por qué claro y no oscuro: el panel es la trastienda del POS, y el POS es
   claro. Miguel salta de uno a otro varias veces al día; que cambie la luz
   entre pestañas cansa y hace que parezcan dos productos distintos.

   Índice
     01. Tipografías
     02. Variables (paleta, radios, sombras, espaciado)
     03. Base y accesibilidad
     04. Estructura: barra lateral, cabecera móvil, contenido
     05. Tipografía de página
     06. Tarjetas y tarjetas de métrica
     07. Botones
     08. Etiquetas de estado y píldoras
     09. Tablas (normal, compacta y apilada en móvil)
     10. Buscador, filtros y paginación
     11. Menús de acciones (sin JS)
     12. Formularios
     13. Avisos
     14. Modales
     15. Estado vacío
     16. Detalle de cliente (lista clave/valor, secciones)
     17. Utilidades
   ===================================================================== */

/* ── 01. Tipografías ────────────────────────────────────────────────
   Plus Jakarta Sans para todo e IBM DM Mono para cifras, códigos y slugs:
   las columnas de dinero solo se leen «en vertical» si los dígitos miden
   todos lo mismo. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── 02. Variables ─────────────────────────────────────────────────── */
:root {
  /* Superficies */
  --fondo:        #f8fafc;   /* fondo de la página */
  --sup:          #ffffff;   /* tarjetas, tablas, barra lateral */
  --sup-2:        #fafbfc;   /* cabeceras de tabla, filas alternas */
  --sup-3:        #f1f5f9;   /* hover de fila, chips apagados */

  /* Texto */
  --tinta:        #0f172a;   /* titulares y cifras */
  --tinta-2:      #475569;   /* texto normal */
  --tinta-3:      #64748b;   /* etiquetas, datos secundarios.
                                #94a3b8 daba 2,5:1 sobre blanco y no se leía;
                                este da 4,8:1 y sigue pareciendo secundario. */
  --tinta-borde:  #94a3b8;   /* el gris claro, SOLO para bordes y puntos */

  /* Bordes: 1,5 px es el grosor del POS; con 1 px se pierde en pantallas HiDPI */
  --borde:        #e2e8f0;
  --borde-2:      #cbd5e1;
  --borde-gr:     1.5px;

  /* Verde esmeralda — acento y color de «todo va bien» */
  --verde:        #047857;
  --verde-osc:    #065f46;
  --verde-cla:    #059669;
  --verde-sua:    #ecfdf5;
  --verde-bor:    #a7f3d0;

  /* Ámbar — avisos, prueba, «vence pronto» */
  --ambar:        #92400e;
  --ambar-sua:    #fef3c7;
  --ambar-bor:    #fcd34d;

  /* Rojo — peligro, vencido, suspendido */
  --rojo:         #991b1b;
  --rojo-fuerte:  #dc2626;
  --rojo-sua:     #fee2e2;
  --rojo-bor:     #fecaca;

  /* Violeta — información secundaria (planes, etiquetas neutras) */
  --violeta:      #6d28d9;
  --violeta-sua:  #ede9fe;
  --violeta-bor:  #ddd6fe;

  /* Azul — solo para enlaces y datos informativos */
  --azul:         #1d4ed8;
  --azul-sua:     #eff6ff;
  --azul-bor:     #bfdbfe;

  /* Radios */
  --r-xs:  7px;
  --r-s:   9px;
  --r:    11px;
  --r-m:  14px;
  --r-l:  16px;
  --r-xl: 20px;

  /* Sombras: casi imperceptibles. El panel se apoya en bordes, no en relieve. */
  --som-1: 0 1px 2px rgba(15,23,42,.04);
  --som-2: 0 2px 8px rgba(15,23,42,.06);
  --som-3: 0 12px 32px rgba(15,23,42,.10);
  --som-4: 0 24px 60px rgba(15,23,42,.16);

  /* Tipografías */
  --fam:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Medidas de la estructura */
  --lateral-ancho: 236px;
  --cab-alto:      60px;

  /* Anillo de foco. Se define una vez para que TODO lo enfocable se vea igual
     al navegar con Tab: si cada componente inventa el suyo, el teclado deja
     de ser predecible. */
  --foco: 0 0 0 3px rgba(4,120,87,.22);
}

/* ── 03. Base y accesibilidad ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--fam);
  background: var(--fondo);
  color: var(--tinta-2);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a.enlace { color: var(--verde); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
a.enlace:hover { color: var(--verde-osc); }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
/* Iconos: Phosphor (MIT), la MISMA familia que usa la app POS
   (phosphor-react-native), para que panel y punto de venta se vean del mismo
   producto. Van incrustados en el HTML; no se carga nada de ningún CDN.

   Son formas RELLENAS con viewBox 0 0 256 256, así que heredan el color por
   `fill`, no por `stroke`. Ojo: si alguien pega aquí un icono de trazo se verá
   como una mancha negra. No se mezclan los dos estilos en la misma pantalla.

   Los tamaños van uno o dos píxeles por encima de lo que pedía el trazo: un
   Phosphor relleno a 16 px se percibe más ligero que una línea de 2 px. */
svg { fill: currentColor; }

/* Un único estilo de foco visible para teclado. Se usa :focus-visible para no
   dibujar el anillo cuando se hace clic con el ratón. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Salto al contenido: lo primero que encuentra un teclado al entrar. */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--verde); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: var(--r);
  transition: top .15s;
}
.saltar:focus { top: 12px; }

/* Quien haya pedido menos movimiento en su sistema no ve ninguna transición. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }
::selection { background: var(--verde-sua); color: var(--verde-osc); }

/* ── 04. Estructura ────────────────────────────────────────────────── */
/*
  Escritorio: barra lateral fija de 236 px + contenido a la derecha.
  Móvil: la lateral se convierte en una cabecera con el logo y una tira de
  pestañas que se desplaza en horizontal. Es la solución que no necesita JS:
  un menú desplegable exige script para abrirse, y aquí nada puede depender
  de eso.
*/
.admin { min-height: 100vh; }

.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--lateral-ancho);
  background: var(--sup);
  border-right: var(--borde-gr) solid var(--borde);
  display: flex; flex-direction: column;
  overflow-y: auto;
}

.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: var(--borde-gr) solid var(--borde);
  flex-shrink: 0;
}
.marca__logo {
  width: 34px; height: 34px; border-radius: var(--r-s);
  background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.02em;
  flex-shrink: 0;
}
.marca__texto { font-size: 15.5px; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; line-height: 1.1; }
.marca__sub { font-size: 11px; font-weight: 600; color: var(--tinta-3); letter-spacing: .02em; }

.nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav__titulo {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-3); padding: 14px 10px 6px;
}
.nav__titulo:first-child { padding-top: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-s);
  font-size: 13.5px; font-weight: 600; color: var(--tinta-2);
  transition: background .15s, color .15s;
}
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--tinta-3); transition: color .15s; }
.nav a:hover { background: var(--sup-3); color: var(--tinta); }
.nav a:hover svg { color: var(--tinta-2); }
.nav a.activa { background: var(--verde-sua); color: var(--verde-osc); }
.nav a.activa svg { color: var(--verde); }
/* Contador a la derecha del enlace (p. ej. «Clientes 47»). */
.nav__cuenta {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--tinta-3); background: var(--sup-3);
  padding: 1px 7px; border-radius: 99px; min-width: 24px; text-align: center;
}
.nav a.activa .nav__cuenta { background: #fff; color: var(--verde-osc); }
.nav__cuenta--alerta { background: var(--rojo-sua); color: var(--rojo); }

.lateral__pie {
  border-top: var(--borde-gr) solid var(--borde);
  padding: 12px; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--verde-sua); color: var(--verde-osc);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px; flex-shrink: 0;
  border: var(--borde-gr) solid var(--verde-bor);
}
.lateral__pie-datos { min-width: 0; line-height: 1.25; }
.lateral__pie-nombre { font-size: 12.5px; font-weight: 700; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__pie-rol { font-size: 11px; color: var(--tinta-3); }
.salir {
  margin-left: auto; width: 30px; height: 30px; border-radius: var(--r-xs);
  border: var(--borde-gr) solid var(--borde);
  background: var(--sup); color: var(--tinta-3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .15s; flex-shrink: 0;
}
.salir svg { width: 17px; height: 17px; }
.salir:hover { background: var(--rojo-sua); border-color: var(--rojo-bor); color: var(--rojo); }

/* Contenido */
.contenido {
  margin-left: var(--lateral-ancho);
  padding: 28px 32px 72px;
  max-width: 1240px;
}

/* Cabecera de escritorio dentro del contenido (acciones a la derecha) */
.cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.cabecera__acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Menú hamburguesa (solo por debajo de 860 px) ───────────────────
   Mismo gesto que el de la landing (index.html: .nav-ham / .nav-mob) pero con
   clases propias del panel y en la paleta clara.

   Se puede abrir de DOS maneras y la hoja soporta las dos:
     a) Sin JavaScript — una casilla oculta `.nav-interruptor` que se marca con
        el <label class="hamburguesa">. Es la que se usa por defecto: el menú
        es la navegación del panel y no puede quedarse muerto si falla un
        script.
     b) Con JavaScript — poner la clase `.menu-abierto` en el <aside class="lateral">.
   La casilla va como PRIMER hijo de .lateral para que el resto sean hermanos
   suyos y el selector `~` alcance al menú y al velo. */
.hamburguesa { display: none; }
.nav-interruptor { position: absolute; width: 1px; height: 1px; opacity: 0; }
.velo { display: none; }

@media (max-width: 860px) {
  /* La barra lateral pasa a ser una cabecera en una sola línea:
     logo · usuario · hamburguesa. */
  .lateral {
    position: sticky; top: 0; inset: auto; width: auto; z-index: 80;
    border-right: none; border-bottom: var(--borde-gr) solid var(--borde);
    overflow: visible;
    flex-direction: row; align-items: center; gap: 4px;
  }
  .marca {
    border-bottom: none; padding: 11px 16px; flex: 1; min-width: 0;
    position: relative; z-index: 3;
  }
  .lateral__pie {
    border-top: none; padding: 0 4px 0 0; margin-left: auto;
    position: relative; z-index: 3;
  }
  .lateral__pie-datos { display: none; }
  .avatar { width: 30px; height: 30px; }

  /* Botón: tres barras que se cruzan al abrir. */
  .hamburguesa {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4.5px; flex-shrink: 0;
    width: 38px; height: 38px; margin-right: 12px;
    border: var(--borde-gr) solid var(--borde); border-radius: var(--r-s);
    background: var(--sup); cursor: pointer;
    position: relative; z-index: 3;
    transition: background .15s, border-color .15s;
  }
  .hamburguesa:hover { background: var(--sup-3); border-color: var(--borde-2); }
  .hamburguesa span {
    display: block; width: 16px; height: 1.5px; border-radius: 2px;
    background: var(--tinta);
    transition: transform .22s, opacity .18s;
  }
  .nav-interruptor:checked ~ .hamburguesa,
  .lateral.menu-abierto .hamburguesa { background: var(--verde-sua); border-color: var(--verde-bor); }
  .nav-interruptor:checked ~ .hamburguesa span:nth-child(1),
  .lateral.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-interruptor:checked ~ .hamburguesa span:nth-child(2),
  .lateral.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
  .nav-interruptor:checked ~ .hamburguesa span:nth-child(3),
  .lateral.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  /* El anillo de foco lo pinta el <label>, porque la casilla real está oculta. */
  .nav-interruptor:focus-visible ~ .hamburguesa { outline: 2px solid var(--verde); outline-offset: 2px; }

  /* Velo: además de oscurecer, es el que cierra el menú al tocar fuera
     (es un <label> apuntando a la misma casilla). */
  /* Empieza justo DEBAJO de la cabecera, no encima: si tapara también el logo
     y el botón de cerrar, la cabecera se vería apagada y daría la sensación de
     estar desactivada. */
  .velo {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    height: 100vh; z-index: 1;
    background: rgba(15,23,42,.42);
    opacity: 0; pointer-events: none;
    transition: opacity .22s;
  }
  .nav-interruptor:checked ~ .velo,
  .lateral.menu-abierto .velo { opacity: 1; pointer-events: auto; }

  /* Panel desplegable: cae desde debajo de la cabecera y ocupa casi toda la
     pantalla. Se desplaza solo si las nueve secciones no caben. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
    max-height: calc(100vh - 100%);
    padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--sup);
    border-bottom: var(--borde-gr) solid var(--borde);
    border-radius: 0 0 var(--r-l) var(--r-l);
    box-shadow: 0 18px 40px rgba(15,23,42,.14);
    overflow-y: auto;
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .nav-interruptor:checked ~ .nav,
  .lateral.menu-abierto .nav { opacity: 1; transform: none; pointer-events: auto; }

  /* En el panel los enlaces son más altos: se tocan con el dedo. */
  .nav a { padding: 12px 12px; font-size: 15px; border-radius: var(--r); }
  .nav a svg { width: 18px; height: 18px; }
  .nav__titulo { padding: 14px 12px 5px; }
  .nav__cuenta { font-size: 12px; }

  /* Con el menú abierto la página de debajo no se mueve. Si el navegador no
     soporta :has(), el menú sigue funcionando: solo se pierde este detalle. */
  body:has(.nav-interruptor:checked) { overflow: hidden; }

  .contenido { margin-left: 0; padding: 20px 16px 80px; }
}
@media (max-width: 480px) {
  .contenido { padding: 16px 13px 80px; }
}

/* ── 05. Tipografía de página ──────────────────────────────────────── */
.titulo {
  font-size: 25px; font-weight: 800; color: var(--tinta);
  letter-spacing: -.035em; line-height: 1.2;
}
.entradilla { font-size: 13.5px; color: var(--tinta-2); margin-top: 5px; max-width: 620px; }
.rotulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-3);
}
.seccion-titulo {
  font-size: 15px; font-weight: 800; color: var(--tinta);
  letter-spacing: -.02em; margin-bottom: 3px;
}
.seccion-sub { font-size: 12.5px; color: var(--tinta-3); }
@media (max-width: 600px) { .titulo { font-size: 21px; } }

/* ── 06. Tarjetas ──────────────────────────────────────────────────── */
.tarjeta {
  background: var(--sup);
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r-l);
  overflow: hidden;
}
.tarjeta + .tarjeta { margin-top: 18px; }
.tarjeta__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 15px 18px;
  border-bottom: var(--borde-gr) solid var(--borde);
}
.tarjeta__cuerpo { padding: 18px; }
.tarjeta__cuerpo--liso { padding: 0; }  /* para meter una tabla a sangre */
.tarjeta__pie {
  padding: 12px 18px; border-top: var(--borde-gr) solid var(--borde);
  background: var(--sup-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* Tarjetas de métrica */
.metricas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.metricas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metricas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .metricas, .metricas--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .metricas, .metricas--3, .metricas--2 { grid-template-columns: 1fr; } }

.metrica {
  background: var(--sup);
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r-m);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
a.metrica:hover, .metrica--pulsable:hover { border-color: var(--borde-2); box-shadow: var(--som-2); }
.metrica__alto { display: flex; align-items: center; gap: 9px; }
.metrica__icono {
  width: 30px; height: 30px; border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--sup-3); color: var(--tinta-2);
}
.metrica__icono svg { width: 17px; height: 17px; }
.metrica__etiqueta {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3);
}
.metrica__cifra {
  font-family: var(--mono); font-weight: 500;
  font-size: 27px; line-height: 1.05; letter-spacing: -.03em;
  color: var(--tinta);
}
.metrica__pie { font-size: 12px; color: var(--tinta-3); }
.metrica__delta { font-weight: 700; }
.metrica__delta--sube { color: var(--verde); }
.metrica__delta--baja { color: var(--rojo); }

/* Color del icono según el asunto de la métrica */
.metrica--verde   .metrica__icono { background: var(--verde-sua);   color: var(--verde); }
.metrica--ambar   .metrica__icono { background: var(--ambar-sua);   color: var(--ambar); }
.metrica--rojo    .metrica__icono { background: var(--rojo-sua);    color: var(--rojo); }
.metrica--violeta .metrica__icono { background: var(--violeta-sua); color: var(--violeta); }

/* Barra de progreso (uso, cupos, créditos SMS) */
.progreso { height: 6px; background: var(--sup-3); border-radius: 99px; overflow: hidden; }
.progreso__fill { height: 100%; border-radius: 99px; background: var(--verde); transition: width .3s; }
.progreso__fill--ambar { background: #d97706; }
.progreso__fill--rojo  { background: var(--rojo-fuerte); }

/* ── 07. Botones ───────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: var(--borde-gr) solid var(--borde-2);
  border-radius: var(--r);
  background: var(--sup); color: var(--tinta);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.boton svg { width: 17px; height: 17px; flex-shrink: 0; }
.boton:hover { background: var(--sup-3); border-color: var(--tinta-3); }
.boton:active { transform: translateY(.5px); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.boton:disabled:hover { background: var(--sup); border-color: var(--borde-2); }

/* Principal — una sola por pantalla: la acción que Miguel viene a hacer. */
.boton--principal {
  background: var(--verde); border-color: var(--verde); color: #fff;
  box-shadow: var(--som-1);
}
.boton--principal:hover { background: var(--verde-osc); border-color: var(--verde-osc); }

/* Secundaria — verde pero de bajo peso, para acciones de apoyo. */
.boton--secundario {
  background: var(--verde-sua); border-color: var(--verde-bor); color: var(--verde-osc);
}
.boton--secundario:hover { background: #d9f7ea; border-color: var(--verde-cla); }

/* Peligro — solo suspender, borrar o revocar. */
.boton--peligro {
  background: var(--rojo-sua); border-color: var(--rojo-bor); color: var(--rojo);
}
.boton--peligro:hover { background: #fecdd3; border-color: #f87171; }
.boton--peligro-solido { background: var(--rojo-fuerte); border-color: var(--rojo-fuerte); color: #fff; }
.boton--peligro-solido:hover { background: var(--rojo); border-color: var(--rojo); }

/* Aviso — para «+1 mes», «recordar pago» y demás acciones de cobro. */
.boton--aviso { background: var(--ambar-sua); border-color: var(--ambar-bor); color: var(--ambar); }
.boton--aviso:hover { background: #fde68a; }

/* Sin caja: enlaces de acción dentro de tablas y modales. */
.boton--fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.boton--fantasma:hover { background: var(--sup-3); border-color: transparent; color: var(--tinta); }

/* Tamaños */
.boton--sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-s); }
.boton--sm svg { width: 16px; height: 16px; }
.boton--lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: var(--r-m); }
.boton--bloque { width: 100%; }
.boton--icono { width: 34px; height: 34px; padding: 0; }
.boton--sm.boton--icono { width: 30px; height: 30px; }

/* Grupo de botones pegados (p. ej. densidad de tabla) */
.grupo-botones { display: inline-flex; border: var(--borde-gr) solid var(--borde-2); border-radius: var(--r); overflow: hidden; }
.grupo-botones .boton { border: none; border-radius: 0; height: 34px; background: var(--sup); }
.grupo-botones .boton + .boton { border-left: var(--borde-gr) solid var(--borde); }
.grupo-botones .boton.activa { background: var(--verde-sua); color: var(--verde-osc); }

.acciones-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Dentro de una tabla las acciones NO se parten en dos líneas: si lo hacen, esa
   fila crece y rompe el ritmo de toda la lista. */
.tabla td .acciones-fila { flex-wrap: nowrap; justify-content: flex-end; }
.acciones-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.acciones-rejilla form { margin: 0; }
/* Aquí las etiquetas son largas («Recordar por WhatsApp»); se deja que el texto
   se parta en dos líneas antes que salirse del botón. */
.acciones-rejilla .boton {
  width: 100%; white-space: normal; text-align: center;
  height: auto; min-height: 38px; padding: 8px 12px; line-height: 1.25;
}

/* ── 08. Estados y píldoras ────────────────────────────────────────── */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
/* El punto de color permite distinguir estados sin depender del color del
   texto (daltonismo): cambia también la palabra, nunca solo el tono. */
.estado::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.estado--activo    { background: var(--verde-sua);   color: var(--verde-osc); border-color: var(--verde-bor); }
.estado--prueba    { background: var(--violeta-sua); color: var(--violeta);   border-color: var(--violeta-bor); }
.estado--porvencer { background: var(--ambar-sua);   color: var(--ambar);     border-color: var(--ambar-bor); }
.estado--vencido   { background: var(--rojo-sua);    color: var(--rojo);      border-color: var(--rojo-bor); }
.estado--suspendido{ background: #f1f5f9;            color: #334155;          border-color: var(--borde-2); }
.estado--cancelado { background: var(--sup-3);       color: var(--tinta-3);   border-color: var(--borde); }
.estado--gratis    { background: var(--azul-sua);    color: var(--azul);      border-color: var(--azul-bor); }
.estado--sin-punto::before { display: none; }

/* Píldora neutra: planes, tipo de negocio, etiquetas sueltas. */
.pildora {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-xs);
  background: var(--sup-3); color: var(--tinta-2);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.pildora--mono { font-family: var(--mono); font-weight: 500; font-size: 11.5px; }
.pildora--verde   { background: var(--verde-sua);   color: var(--verde-osc); }
.pildora--violeta { background: var(--violeta-sua); color: var(--violeta); }
.pildora--ambar   { background: var(--ambar-sua);   color: var(--ambar); }
.pildora--rojo    { background: var(--rojo-sua);    color: var(--rojo); }

/* Punto suelto para listas de sesiones («en línea»). */
.punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); }
.punto--vivo { background: var(--verde-cla); box-shadow: 0 0 0 3px var(--verde-sua); }

/* ── 09. Tablas ────────────────────────────────────────────────────── */
.tabla-caja {
  background: var(--sup);
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r-l);
  overflow: hidden;
}
/* Dentro de .tarjeta__cuerpo--liso la tabla ya lleva el borde de la tarjeta */
.tarjeta .tabla-caja { border: none; border-radius: 0; }

.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla thead th {
  text-align: left; vertical-align: middle;
  padding: 11px 16px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3);
  background: var(--sup-2);
  border-bottom: var(--borde-gr) solid var(--borde);
  white-space: nowrap;
}
/* La altura manda sobre el relleno: en una tabla `height` se comporta como
   mínimo, así que todas las filas miden lo mismo lleven botones o no. 56 px es
   el punto donde entra un botón pequeño con aire y siguen cabiendo unas doce
   filas en pantalla. */
.tabla tbody td {
  height: 56px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta-2);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: var(--sup-2); }
/* Fila que exige atención (vencida, sin usar). El aviso va a la izquierda para
   que se vea al recorrer la lista con la vista en vertical. */
.tabla tbody tr.fila--alerta td:first-child { box-shadow: inset 3px 0 0 var(--rojo-fuerte); }
.tabla tbody tr.fila--aviso  td:first-child { box-shadow: inset 3px 0 0 #d97706; }

.tabla .num { text-align: right; font-family: var(--mono); font-weight: 500; color: var(--tinta); white-space: nowrap; }
.tabla th.num { text-align: right; }
.tabla .centro { text-align: center; }
.tabla .encoge { width: 1%; white-space: nowrap; }

/* Celda principal: el nombre del negocio.
   Va en UNA sola línea a propósito. Apilar aquí el correo debajo del nombre
   subía la fila a 84 px, que es la densidad que Miguel ya había rechazado.
   El correo, el NIT y el teléfono viven en la ficha del cliente (.kv), que es
   donde se consultan; en la tabla solo queda un dato corto de contexto
   («2 sedes»), y si no cabe se recorta con puntos suspensivos. */
.celda-principal { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.celda-principal strong { font-size: 13.5px; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; white-space: nowrap; }
.celda-principal small {
  font-size: 11.5px; color: var(--tinta-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Escape para las pocas tablas donde el segundo dato es imprescindible. */
.celda-principal--apilada { flex-direction: column; align-items: flex-start; gap: 1px; }
.celda-sub { font-size: 11.5px; color: var(--tinta-3); }

/* Cabecera ordenable */
.tabla th .orden {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.tabla th .orden:hover { color: var(--tinta-2); }
.tabla th .orden svg { width: 13px; height: 13px; opacity: .55; }
.tabla th .orden[aria-sort="ascending"] svg,
.tabla th .orden[aria-sort="descending"] svg { opacity: 1; color: var(--verde); }

/* ── Modo compacto ──
   Miguel puede tener decenas de clientes; con esto caben ~40 % más filas en
   pantalla sin perder legibilidad (el cuerpo sigue en 13 px). */
.tabla--compacta thead th { padding: 8px 12px; font-size: 10.5px; }
.tabla--compacta tbody td { height: 38px; padding: 5px 12px; font-size: 13px; }
.tabla--compacta .celda-principal strong { font-size: 13px; }
.tabla--compacta .celda-principal small,
.tabla--compacta .celda-sub { font-size: 11px; }
.tabla--compacta .estado { padding: 1px 8px; font-size: 11px; }
.tabla--compacta .boton--sm { height: 27px; padding: 0 9px; font-size: 12px; }
.tabla--compacta .boton--sm.boton--icono { width: 27px; }

/* Filas alternas: en tablas largas ayuda a no saltar de renglón. */
.tabla--cebra tbody tr:nth-child(even) td { background: var(--sup-2); }
.tabla--cebra tbody tr:hover td { background: var(--verde-sua); }

/* ── Tabla apilada en móvil ──
   Con .tabla--apilable cada fila se vuelve una tarjeta y cada celda muestra su
   título desde data-col. Es la única forma de que una tabla de 8 columnas se
   pueda leer en un celular sin arrastrarla de lado eternamente.
   Uso: <td data-col="Plan">…</td>. La celda del nombre lleva .celda-titulo. */
@media (max-width: 1100px) {
  .tabla--apilable, .tabla--apilable tbody, .tabla--apilable tr, .tabla--apilable td { display: block; width: auto; }
  .tabla--apilable thead { display: none; }
  .tabla-caja:has(.tabla--apilable) { border: none; border-radius: 0; background: transparent; overflow: visible; }
  .tarjeta__cuerpo--liso:has(.tabla--apilable) { padding: 12px; }

  .tabla--apilable tbody tr {
    background: var(--sup);
    border: var(--borde-gr) solid var(--borde);
    border-radius: var(--r-m);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .tabla--apilable tbody tr:last-child { margin-bottom: 0; }
  .tabla--apilable tbody tr:hover td { background: transparent; }
  .tabla--apilable tbody tr.fila--alerta { border-color: var(--rojo-bor); }
  .tabla--apilable tbody tr.fila--alerta td:first-child,
  .tabla--apilable tbody tr.fila--aviso  td:first-child { box-shadow: none; }
  .tabla--apilable tbody tr.fila--aviso { border-color: var(--ambar-bor); }

  /* Al apilar hay que soltar la altura fija de 56/38 px: aquí cada celda es un
     renglón de la tarjeta, no una fila de tabla. */
  .tabla--apilable td, .tabla--apilable.tabla--compacta td { height: auto; }
  .tabla--apilable td {
    display: grid; grid-template-columns: minmax(88px, 34%) 1fr;
    align-items: baseline; justify-items: start; gap: 10px;
    padding: 7px 0; border-bottom: 1px dashed var(--borde);
  }
  /* En la tarjeta sí caben nombre y dato secundario en dos líneas. */
  .tabla--apilable .celda-principal { flex-direction: column; align-items: flex-start; gap: 1px; }
  .tabla--apilable .celda-principal strong,
  .tabla--apilable .celda-principal small { white-space: normal; overflow: visible; }
  .tabla--apilable td::before {
    content: attr(data-col);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--tinta-3);
  }
  .tabla--apilable td:last-child { border-bottom: none; padding-bottom: 0; }

  /* La celda del nombre hace de título de la tarjeta: sin rótulo y a todo ancho. */
  .tabla--apilable td.celda-titulo {
    display: block; padding-top: 0; padding-bottom: 9px;
    border-bottom: 1px solid var(--borde); margin-bottom: 3px;
  }
  .tabla--apilable td.celda-titulo::before { display: none; }
  .tabla--apilable td.celda-titulo .celda-principal strong { font-size: 15px; }

  /* Las acciones ocupan la fila entera al final de la tarjeta. */
  .tabla--apilable td.celda-acciones { display: block; padding-top: 11px; }
  .tabla--apilable td.celda-acciones::before { display: none; }
  .tabla--apilable td.celda-acciones .acciones-fila { justify-content: flex-start; flex-wrap: wrap; }
  .tabla--apilable .num { text-align: left; }
  .tabla--apilable .encoge { width: auto; }
}

/* ── Columnas que se retiran cuando no hay sitio ────────────────────
   La tabla de clientes necesita unos 1.030 px, y a la izquierda hay 236 px de
   barra lateral: entre 1.101 y 1.400 px no cabe entera y la página se iba de
   lado. En vez de dejar que se desplace en horizontal, se quitan las dos
   columnas que menos falta hacen para la pregunta de siempre («¿quién me
   debe?»): el plan y la última venta. Los dos datos siguen en la ficha.
   Marca esas celdas —th y td— con .col-opcional.
   Por debajo de 1.100 px ya no hay tabla: hay tarjetas, y ahí se ve todo. */
@media (min-width: 1101px) and (max-width: 1400px) {
  .tabla thead th, .tabla tbody td { padding-left: 12px; padding-right: 12px; }
  .tabla .col-opcional { display: none; }
}

/* Tabla que sí puede desplazarse (registros de eventos, con muchas columnas
   y sin lectura «por cliente»). Se marca el borde para que se note que hay más. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll .tabla { min-width: 640px; }

/* ── 10. Buscador, filtros y paginación ────────────────────────────── */
.barra-herramientas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: var(--borde-gr) solid var(--borde);
  background: var(--sup);
}
.barra-herramientas__fin { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.buscador { position: relative; flex: 1 1 240px; min-width: 180px; max-width: 380px; }
.buscador svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--tinta-3); pointer-events: none;
}
.buscador input {
  width: 100%; height: 38px; padding: 0 34px 0 36px;
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r); background: var(--sup);
  font-size: 13.5px; color: var(--tinta); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.buscador input::placeholder { color: var(--tinta-3); }
.buscador input:hover { border-color: var(--borde-2); }
.buscador input:focus { border-color: var(--verde); box-shadow: var(--foco); }
.buscador__limpiar {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: none; background: none; cursor: pointer;
  color: var(--tinta-3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.buscador__limpiar svg { position: static; transform: none; width: 14px; height: 14px; }
.buscador__limpiar:hover { background: var(--sup-3); color: var(--tinta); }

/* Filtros rápidos: enlaces con ?estado=… , no botones de JS. */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 99px;
  border: var(--borde-gr) solid var(--borde);
  background: var(--sup); color: var(--tinta-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.filtro:hover { border-color: var(--borde-2); background: var(--sup-3); color: var(--tinta); }
.filtro.activo { background: var(--verde-sua); border-color: var(--verde-bor); color: var(--verde-osc); }
.filtro__cuenta { font-family: var(--mono); font-size: 11.5px; color: var(--tinta-3); }
.filtro.activo .filtro__cuenta { color: var(--verde); }

/* Selector compacto para «ordenar por» y «ver N por página» */
.selector-mini {
  height: 32px; padding: 0 30px 0 11px; border-radius: var(--r-s);
  border: var(--borde-gr) solid var(--borde); background: var(--sup);
  font-size: 12.5px; font-weight: 600; color: var(--tinta-2); cursor: pointer;
  appearance: none; -webkit-appearance: none; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.selector-mini:hover { border-color: var(--borde-2); }
.selector-mini:focus { border-color: var(--verde); box-shadow: var(--foco); }

/* Paginación */
.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-top: var(--borde-gr) solid var(--borde);
  background: var(--sup-2);
}
.paginacion__resumen { font-size: 12.5px; color: var(--tinta-3); }
.paginacion__resumen b { color: var(--tinta-2); font-family: var(--mono); font-weight: 500; }
.paginacion__paginas { display: flex; align-items: center; gap: 4px; }
.pagina {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--borde-gr) solid var(--borde); border-radius: var(--r-s);
  background: var(--sup); color: var(--tinta-2);
  font-size: 13px; font-weight: 600; font-family: var(--mono); cursor: pointer;
  transition: all .15s;
}
.pagina:hover { border-color: var(--borde-2); background: var(--sup-3); color: var(--tinta); }
.pagina.activa { background: var(--verde); border-color: var(--verde); color: #fff; }
.pagina[aria-disabled="true"], .pagina:disabled { opacity: .45; pointer-events: none; }
.pagina--puntos { border: none; background: none; color: var(--tinta-3); pointer-events: none; }
.pagina svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .barra-herramientas { padding: 12px; }
  .buscador { flex: 1 1 100%; max-width: none; }
  .barra-herramientas__fin { margin-left: 0; width: 100%; }
  .paginacion { justify-content: center; }
  .paginacion__resumen { width: 100%; text-align: center; }
  /* «Anterior» y «Siguiente» son palabras, no flechas, así que la fila no cabe
     de una vez en un teléfono: se deja que salte de línea antes que recortarse
     contra el borde de la tarjeta. */
  .paginacion__paginas { flex-wrap: wrap; justify-content: center; }
}

/* ── 11. Menús de acciones ─────────────────────────────────────────
   Hechos con <details>/<summary>: se abren y cierran sin una línea de JS y
   funcionan con teclado de serie. El único añadido opcional del panel es
   cerrarlos al hacer clic fuera. */
.menu { position: relative; display: inline-block; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 9px;
  border: var(--borde-gr) solid var(--borde); border-radius: var(--r-s);
  background: var(--sup); color: var(--tinta-2);
  font-size: 12.5px; font-weight: 600;
  transition: all .15s;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--borde-2); background: var(--sup-3); color: var(--tinta); }
.menu[open] > summary { border-color: var(--verde-bor); background: var(--verde-sua); color: var(--verde-osc); }
.menu > summary svg { width: 16px; height: 16px; }

.menu__lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 210px; padding: 6px;
  background: var(--sup);
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r-m);
  box-shadow: var(--som-3);
  display: flex; flex-direction: column; gap: 1px;
}
.menu--izq .menu__lista { right: auto; left: 0; }
.menu__lista form { margin: 0; }
.menu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; border-radius: var(--r-xs);
  background: none; color: var(--tinta-2);
  font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.menu__item svg { width: 16px; height: 16px; color: var(--tinta-3); flex-shrink: 0; }
.menu__item:hover { background: var(--sup-3); color: var(--tinta); }
.menu__item:hover svg { color: var(--tinta-2); }
.menu__item--peligro { color: var(--rojo); }
.menu__item--peligro svg { color: var(--rojo); }
.menu__item--peligro:hover { background: var(--rojo-sua); color: var(--rojo); }
.menu__sep { height: 1px; background: var(--borde); margin: 5px 2px; }
.menu__rotulo {
  padding: 7px 10px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3);
}

/* En móvil las acciones quedan a la IZQUIERDA de la tarjeta, así que el menú
   se abre hacia la derecha. Se limita el ancho a la pantalla para que no se
   salga por el borde.
   (Antes esto usaba position:static en .menu; el resultado era que la lista se
   colocaba respecto al <body> y aparecía a media página de distancia.) */
@media (max-width: 860px) {
  .menu__lista {
    left: 0; right: auto;
    min-width: 220px; max-width: calc(100vw - 40px);
  }
}

/* ── 12. Formularios ───────────────────────────────────────────────── */
.formulario { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .etiqueta {
  font-size: 12.5px; font-weight: 700; color: var(--tinta);
  display: flex; align-items: center; gap: 6px;
}
.campo .pista { font-size: 11.5px; color: var(--tinta-3); font-weight: 500; line-height: 1.45; }
.campo .error { font-size: 12px; font-weight: 600; color: var(--rojo-fuerte); }
.opcional { font-weight: 500; color: var(--tinta-3); }

.control {
  width: 100%; height: 44px; padding: 0 13px;
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r);
  background: var(--sup); color: var(--tinta);
  /* 16 px en móvil a propósito: por debajo de eso Safari en iOS hace zoom al
     enfocar el campo y no vuelve solo. En escritorio baja a 14 px. */
  font-size: 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
@media (min-width: 768px) { .control { font-size: 14px; height: 42px; } }
.control::placeholder { color: var(--tinta-3); }
.control:hover:not(:disabled) { border-color: var(--borde-2); }
.control:focus { border-color: var(--verde); box-shadow: var(--foco); }
.control:disabled { background: var(--sup-3); color: var(--tinta-3); cursor: not-allowed; }
.control.malo { border-color: var(--rojo-fuerte); }
.control.malo:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }

textarea.control { height: auto; min-height: 96px; padding: 11px 13px; line-height: 1.55; resize: vertical; }

select.control {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%2394a3b8' d='M5.5 7 0 0h11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}

/* Campo con prefijo/sufijo (pesos, días, %) */
.control-grupo { display: flex; align-items: stretch; }
.control-grupo .afijo {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--sup-3); border: var(--borde-gr) solid var(--borde);
  font-size: 13px; font-weight: 700; color: var(--tinta-3); white-space: nowrap;
}
.control-grupo .afijo:first-child { border-right: none; border-radius: var(--r) 0 0 var(--r); }
.control-grupo .afijo:last-child  { border-left: none;  border-radius: 0 var(--r) var(--r) 0; }
.control-grupo .afijo:first-child + .control { border-radius: 0 var(--r) var(--r) 0; }
.control-grupo .control:has(+ .afijo) { border-radius: var(--r) 0 0 var(--r); }

.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fila-campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .fila-campos, .fila-campos--3 { grid-template-columns: 1fr; } }

.form-acciones {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 4px;
}

/* Casilla e interruptor */
.casilla { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.casilla input[type="checkbox"], .casilla input[type="radio"] {
  width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--verde); cursor: pointer;
}
.casilla span { font-size: 13px; color: var(--tinta-2); line-height: 1.45; }
.casilla strong { display: block; font-size: 13px; color: var(--tinta); }

.casillas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.casilla-caja {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r); background: var(--sup); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.casilla-caja input[type="checkbox"], .casilla-caja input[type="radio"] {
  width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--verde); cursor: pointer;
}
.casilla-caja > span { font-size: 12.5px; color: var(--tinta-3); line-height: 1.4; min-width: 0; }
.casilla-caja strong { display: block; font-size: 13px; font-weight: 700; color: var(--tinta); }
.casilla-caja:hover { border-color: var(--borde-2); background: var(--sup-2); }
.casilla-caja:has(input:checked) { border-color: var(--verde-bor); background: var(--verde-sua); }
.casilla-caja:has(input:focus-visible) { box-shadow: var(--foco); }

/* Tarjeta de opción (tipo de negocio, plan) — el radio se oculta de forma
   accesible; sigue siendo enfocable con teclado. */
.opcion { position: relative; display: block; }
.opcion input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opcion__caja {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r); background: var(--sup); cursor: pointer;
  transition: all .15s; height: 100%;
}
.opcion__caja:hover { border-color: var(--borde-2); }
.opcion input:checked + .opcion__caja {
  border-color: var(--verde); background: var(--verde-sua);
  box-shadow: inset 0 0 0 1px var(--verde);
}
.opcion input:focus-visible + .opcion__caja { box-shadow: var(--foco); }
.opcion__icono { font-size: 19px; line-height: 1; flex-shrink: 0; }
.opcion__texto { font-size: 13px; font-weight: 600; color: var(--tinta); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.opciones-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
@media (max-width: 560px) { .opciones-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Interruptor de ajuste (pestaña Ajustes) */
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.interruptor input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.interruptor__pista {
  width: 42px; height: 24px; border-radius: 99px; background: var(--borde-2);
  position: relative; flex-shrink: 0; transition: background .18s;
}
.interruptor__pista::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  box-shadow: var(--som-1); transition: transform .18s;
}
.interruptor input:checked + .interruptor__pista { background: var(--verde); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .interruptor__pista { box-shadow: var(--foco); }
.interruptor__texto { font-size: 13.5px; color: var(--tinta-2); }
.interruptor__texto strong { display: block; font-size: 13.5px; color: var(--tinta); font-weight: 700; }

/* Fila de ajuste con separador (lista de ajustes del SaaS) */
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.ajuste + .ajuste { border-top: 1px solid var(--borde); }
.ajuste__texto { min-width: 0; }
.ajuste__texto strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.ajuste__texto span { font-size: 12.5px; color: var(--tinta-3); }

/* Código de un solo uso (OTP) */
.control--otp {
  text-align: center; letter-spacing: .45em; text-indent: .45em;
  font-family: var(--mono); font-size: 22px; font-weight: 500; height: 56px;
}

/* ── 13. Avisos ────────────────────────────────────────────────────── */
.aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-m);
  border: var(--borde-gr) solid var(--borde);
  background: var(--sup);
  font-size: 13px; line-height: 1.5; color: var(--tinta-2);
}
.aviso + .aviso { margin-top: 10px; }
.aviso__icono { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.aviso__cuerpo { min-width: 0; flex: 1; }
.aviso strong { color: inherit; font-weight: 700; }
.aviso__acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.aviso--ok       { background: var(--verde-sua);   border-color: var(--verde-bor);   color: var(--verde-osc); }
.aviso--info     { background: var(--azul-sua);    border-color: var(--azul-bor);    color: #1e40af; }
.aviso--atencion { background: var(--ambar-sua);   border-color: var(--ambar-bor);   color: var(--ambar); }
.aviso--error    { background: var(--rojo-sua);    border-color: var(--rojo-bor);    color: var(--rojo); }
.aviso--neutro   { background: var(--sup-2);       border-color: var(--borde);       color: var(--tinta-2); }
.aviso__cerrar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: currentColor; opacity: .55; width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs);
}
.aviso__cerrar:hover { opacity: 1; background: rgba(15,23,42,.06); }
.aviso__cerrar svg { width: 14px; height: 14px; }

/* ── 14. Modales ───────────────────────────────────────────────────
   Sobre <dialog>: el navegador ya se encarga del foco atrapado, de Esc y de
   la capa de fondo. Se incluye también la variante .modal con [open] por si
   algún diálogo tiene que renderizarse desde PHP sin script. */
dialog.modal, .modal {
  padding: 0; border: none; background: transparent; max-width: none; max-height: none;
}
dialog.modal::backdrop { background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }

.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal[open] { display: flex; align-items: center; justify-content: center; padding: 20px; }
dialog.modal[open] { display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__fondo { position: fixed; inset: 0; background: rgba(15,23,42,.45); }

.modal__caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px; max-height: calc(100vh - 48px);
  background: var(--sup);
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r-xl);
  box-shadow: var(--som-4);
  display: flex; flex-direction: column; overflow: hidden;
  text-align: left;
}
.modal__caja--ancho { max-width: 780px; }
.modal__cabeza {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px; border-bottom: var(--borde-gr) solid var(--borde);
}
.modal__titulo { font-size: 16.5px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; }
.modal__sub { font-size: 12.5px; color: var(--tinta-3); margin-top: 3px; }
.modal__cerrar {
  margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
  border: var(--borde-gr) solid var(--borde); border-radius: var(--r-xs);
  background: var(--sup); color: var(--tinta-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal__cerrar svg { width: 15px; height: 15px; }
.modal__cerrar:hover { background: var(--sup-3); color: var(--tinta); }
.modal__cuerpo { padding: 18px 20px; overflow-y: auto; font-size: 13.5px; color: var(--tinta-2); }
.modal__pie {
  padding: 14px 20px; border-top: var(--borde-gr) solid var(--borde);
  background: var(--sup-2);
  display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
}
/* En un modal de confirmación destructiva el icono manda: se ve antes que el texto. */
.modal__marca {
  width: 38px; height: 38px; border-radius: var(--r-s); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.modal__marca svg { width: 21px; height: 21px; }
.modal__marca--peligro { background: var(--rojo-sua); color: var(--rojo); }
.modal__marca--aviso   { background: var(--ambar-sua); color: var(--ambar); }
.modal__marca--ok      { background: var(--verde-sua); color: var(--verde); }

@media (max-width: 560px) {
  .modal[open], dialog.modal[open] { padding: 0; align-items: flex-end; }
  .modal__caja { max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
  .modal__pie { flex-direction: column-reverse; align-items: stretch; }
  .modal__pie .boton { width: 100%; }
}

/* ── 15. Estado vacío ──────────────────────────────────────────────── */
.vacio {
  padding: 48px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.vacio__icono {
  width: 52px; height: 52px; border-radius: var(--r-m);
  background: var(--sup-3); color: var(--tinta-3);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.vacio__icono svg { width: 26px; height: 26px; }
.vacio__titulo { font-size: 15px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; }
.vacio__texto { font-size: 13px; color: var(--tinta-3); max-width: 380px; line-height: 1.55; }
.vacio .boton { margin-top: 14px; }
.vacio--chico { padding: 30px 20px; }

/* ── 16. Detalle de cliente ────────────────────────────────────────── */
.detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .detalle { grid-template-columns: 1fr; } }

.bloque {
  border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r-m); background: var(--sup); overflow: hidden;
}
.bloque__cabeza {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: var(--borde-gr) solid var(--borde);
  background: var(--sup-2);
}
.bloque__cabeza svg { width: 16px; height: 16px; color: var(--verde); flex-shrink: 0; }
.bloque__titulo {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta);
}
.bloque__meta { margin-left: auto; font-size: 12px; color: var(--tinta-3); font-weight: 500; }
.bloque__cuerpo { padding: 14px; }
.bloque__cuerpo--liso { padding: 0; }

/* Lista clave/valor */
.kv { display: flex; flex-direction: column; }
.kv__fila {
  display: grid; grid-template-columns: minmax(110px, 34%) 1fr;
  align-items: center; gap: 10px 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--borde);
}
.kv__fila:last-child { border-bottom: none; }
.kv__k { font-size: 11.5px; font-weight: 700; color: var(--tinta-3); }
.kv__v { font-size: 13.5px; color: var(--tinta); min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; word-break: break-word; }
.kv__v.mono { font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
@media (max-width: 520px) { .kv__fila { grid-template-columns: 1fr; gap: 3px; } }

/* Valor oculto (contraseñas, claves de API) */
.secreto { font-family: var(--mono); font-size: 12.5px; color: var(--ambar); word-break: break-all; }
.secreto--tapado { color: var(--tinta-3); letter-spacing: .16em; }
.boton-copiar {
  width: 26px; height: 26px; flex-shrink: 0;
  border: var(--borde-gr) solid var(--borde); border-radius: var(--r-xs);
  background: var(--sup); color: var(--tinta-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.boton-copiar svg { width: 14px; height: 14px; }
.boton-copiar:hover { background: var(--verde-sua); border-color: var(--verde-bor); color: var(--verde); }

/* ── 17. Utilidades ────────────────────────────────────────────────── */
/* Botón de página con palabra: «‹ Anterior» y «Siguiente ›».
   El caret va ACOMPAÑADO del texto a propósito. Solo, se confunde con la
   flechita de ordenar columnas que hay justo encima, en la cabecera de la
   tabla. Como la fila queda larga, en móvil salta de línea (ver más abajo). */
.pagina--texto { padding: 0 12px; gap: 5px; font-family: var(--fam); font-size: 12.5px; font-weight: 600; }
.pagina--texto svg { width: 14px; height: 14px; }

.mono { font-family: var(--mono); font-weight: 500; }
.dinero { font-family: var(--mono); font-weight: 500; color: var(--tinta); white-space: nowrap; }
.apagado { color: var(--tinta-3); }
.destacado { color: var(--tinta); font-weight: 700; }
.verde { color: var(--verde); }
.ambar { color: var(--ambar); }
.rojo  { color: var(--rojo); }
.pequeno { font-size: 12px; }
.minusculo { font-size: 11.5px; }
.nowrap { white-space: nowrap; }
.derecha { text-align: right; }
.centrado { text-align: center; }
.separador { height: 1px; background: var(--borde); border: none; margin: 18px 0; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.oculto { display: none !important; }
.pila { display: flex; flex-direction: column; }
.pila--4 { gap: 4px; } .pila--8 { gap: 8px; } .pila--12 { gap: 12px; } .pila--18 { gap: 18px; }
.linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crece { flex: 1; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }

/* Pantalla de acceso (contraseña + OTP), fuera de la estructura del panel */
.acceso {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--fondo);
}
.acceso__caja {
  width: 100%; max-width: 400px;
  background: var(--sup); border: var(--borde-gr) solid var(--borde);
  border-radius: var(--r-xl); padding: 32px 28px 26px;
  box-shadow: var(--som-2);
}
.acceso__marca { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 20px; }
.acceso__titulo { font-size: 20px; font-weight: 800; color: var(--tinta); text-align: center; letter-spacing: -.03em; }
.acceso__sub { font-size: 13px; color: var(--tinta-3); text-align: center; margin: 5px 0 22px; }

/* ── 18. Objetivos táctiles en móvil ────────────────────────────────
   Todo lo que se toca mide 44×44 px como mínimo. El dibujo del icono NO
   cambia de tamaño: el área crece por relleno, así que visualmente el panel
   sigue siendo el mismo y lo que gana es el dedo.
   Va al final de la hoja a propósito, para que gane sobre las medidas de
   escritorio sin tener que repetir selectores con más peso. */
@media (max-width: 860px) {
  .boton { min-height: 44px; }
  .boton--sm { min-height: 44px; padding: 0 14px; font-size: 13px; }
  /* La rejilla de acciones baja la altura para dejar que el texto largo se
     parta en dos líneas; aquí hay que devolverle el mínimo. */
  .acciones-rejilla .boton { min-height: 44px; }
  .boton--icono, .boton--sm.boton--icono { width: 44px; min-width: 44px; height: 44px; }
  .grupo-botones .boton { height: 44px; }

  .hamburguesa { width: 44px; height: 44px; }
  .salir { width: 44px; height: 44px; }
  /* El avatar comparte barra con dos botones; si es enlace al perfil también
     se toca, así que se le da la misma área. El círculo crece, el texto no. */
  .avatar { width: 44px; height: 44px; font-size: 14px; }

  .menu > summary { min-height: 44px; min-width: 44px; padding: 0 12px; }
  .menu__item { min-height: 44px; padding: 10px 12px; }

  .filtro { height: 44px; padding: 0 15px; }
  .selector-mini { height: 44px; padding: 0 34px 0 14px; background-position: right 14px center; }
  .buscador input { height: 44px; padding-right: 46px; }
  .buscador__limpiar { width: 44px; height: 44px; right: 1px; border-radius: var(--r-s); }
  .pagina { min-width: 44px; height: 44px; }
  .pagina--puntos { min-width: 24px; }

  .boton-copiar { width: 44px; height: 44px; }
  .aviso__cerrar { width: 44px; height: 44px; }
  .modal__cerrar { width: 44px; height: 44px; }

  /* Casillas e interruptores: la zona sensible es la etiqueta entera, se le
     da altura para que no haya que apuntar al cuadradito. */
  /* El interruptor solo envuelve la pista de 42 px; se le da ancho mínimo para
     que el área llegue a 44 sin agrandar el dibujo. */
  .casilla { min-height: 44px; align-items: center; }
  .interruptor { min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
  .casilla input[type="checkbox"], .casilla input[type="radio"],
  .casilla-caja input[type="checkbox"], .casilla-caja input[type="radio"] { width: 22px; height: 22px; }
  .casilla-caja { min-height: 52px; }
  .opcion__caja { min-height: 52px; }
  .ajuste { padding: 10px 0; }

  /* La compacta es de escritorio: en móvil las tablas se apilan en tarjetas y
     mandan las medidas de arriba. Si alguna tabla compacta NO se apila (el
     registro de eventos), no lleva botones dentro, así que 38 px no estorba. */
  .tabla--compacta:not(.tabla--apilable) tbody td { height: 44px; }
}