@charset "UTF-8";
/* =====================================================================
   EssencePOS · Admin — Hoja de compatibilidad (admin2-compat.css)
   28-ago-2026

   PARA QUÉ SIRVE
   El rediseño cubrió navegación, resumen y clientes. Las otras seis
   pestañas —Uso, Sesiones, Nuevo, Eventos, Planes, SMS VIP y Ajustes—
   siguen escritas con las clases de siempre (`card`, `btn`, `stat`,
   `plan-card`, `sms-modal`…). Esta hoja las viste con la paleta clara del
   POS para poder retirar `admin.css` y `premium.css` del <head> sin que
   nada se quede sin estilo.

   No es un rediseño de esas pantallas: es ponerlas en la misma luz que el
   resto mientras se rehacen una a una. Cuando una pestaña se reescriba con
   las clases nuevas, se borra su bloque de aquí.

   ── POR QUÉ NO BASTA CON REDEFINIR LAS VARIABLES ──
   Una primera versión de este archivo intentaba solo eso: cambiar
   `--text`, `--bg-card`, `--border`… en `:root` y dejar que las hojas
   viejas se adaptaran solas. Es una idea buena y esa parte se conserva
   entera aquí (sección 01), porque `admin.php` usa esos nombres en decenas
   de atributos `style="color:var(--muted)"`.

   Pero no alcanza, y se puede medir. Buena parte de las seis pestañas NO
   toma sus colores de variables: los tiene escritos a pelo dentro de los
   tres bloques <style> que el propio `admin.php` inyecta. Con el enfoque de
   solo variables, el navegador devolvía esto:

       .sms-strip-card   fondo  #0f172a   (casi negro, sobre página blanca)
       .sms-table        fondo  #0f172a
       .sms-table td     texto  #475569   ← gris oscuro SOBRE negro: ilegible
       .sms-modal-box    fondo  #0f172a
       .cred2-card       fondo  rgba(255,255,255,.024)  ← invisible en blanco
       .cred2-v          texto  #e8eaf2   ← casi blanco sobre blanco

   O sea: la pestaña SMS entera y el bloque de credenciales se quedaban
   fuera, y en el peor caso con texto oscuro sobre fondo oscuro. Por eso
   esta hoja tiene DOS capas: el puente de variables y, encima, las clases
   escritas de verdad.

   ── CÓMO ENLAZARLA ──
       admin2.css → admin2-panel.css → admin2-clientes.css → admin2-compat.css
   Va la ÚLTIMA. Y las dos hojas viejas ya no se cargan.

   ── POR QUÉ CASI TODO EMPIEZA POR `body.admin-app` ──
   No es manía. Un <style> del documento gana a una hoja enlazada cuando la
   especificidad empata, así que `.sms-strip-card` de esta hoja perdería
   contra el `.sms-strip-card` que `admin.php` escribe en su propio <style>.
   Subir un escalón —`body.admin-app .sms-strip-card`, 0-2-1 contra
   0-1-0— gana sin importar el orden y sin recurrir a `!important`.

   ── DÓNDE SÍ HAY `!important` (y por qué no hay alternativa) ──
   `admin.php` tiene ~25 atributos `style="color:#e2e8f0"` y parecidos,
   pensados para fondo oscuro. Un atributo `style=` solo se puede vencer con
   `!important`; no existe selector que le gane. Están todos agrupados al
   final, marcados uno a uno, y el arreglo de verdad es borrar esos
   atributos del PHP: entonces ese bloque se puede quitar entero.

   Índice
     01. Puente de variables antiguas
     02. Arreglos de base
     03. Estructura y páginas
     04. Tarjetas
     05. Formularios
     06. Botones
     07. Etiquetas de estado y avisos
     08. Métricas
     09. Tablas
     10. Planes
     11. SMS VIP
     12. Credenciales y fichas
     13. Acceso (login y OTP)
     14. Varios
     15. Neutralizadores de color en línea
   ===================================================================== */

/* ── 01. Puente de variables antiguas ───────────────────────────────
   `admin.php` usa los nombres de token viejos dentro de atributos
   `style="color:var(--muted)"`. Son cuarenta y pico de sitios. Si se borran
   `premium.css` y `admin.css` esas variables dejan de existir, la
   declaración se vuelve inválida y el texto hereda el color del padre: el
   dato secundario pasa a verse igual de negro que el principal y se pierde
   la jerarquía.

   Así que no se borran los nombres: se les cambia el valor. Cada uno apunta
   a su equivalente claro. Es lo que permite quitar las hojas viejas sin
   tocar una sola línea de PHP. */
:root {
  /* Superficies: de casi negro a la escala slate del POS. */
  --bg-deep:    #f8fafc;
  --bg-mid:     #ffffff;   /* lo usa el fondo de algún modal heredado */
  --bg-card:    #ffffff;
  --bg-card2:   #fafbfc;

  /* Los bordes eran blancos translúcidos, pensados para verse sobre negro.
     Sobre blanco, un borde blanco no existe. */
  --border:        #e2e8f0;
  --border-h:      #cbd5e1;
  --border-strong: #cbd5e1;

  /* Texto: este es el cambio que hace que se pueda leer. */
  --text:   #0f172a;
  --text2:  #475569;
  --muted:  #64748b;
  --dim:    #64748b;
  --t1:     #0f172a;
  --t2:     #475569;
  /* Este gris se usa como color de TEXTO en la navegación y en varias
     pestañas. #94a3b8 sobre blanco da 2,5:1 y no llega al 4,5:1 mínimo:
     los rótulos de los menús («Dar de alta un negocio») no se leían.
     Para bordes y puntos, que no hay que leer, está --tinta-borde. */
  --t3:     #64748b;

  /* El acento pasa de violeta a verde esmeralda. `admin.css` llegaba a
     definir `--green: var(--accent)`, o sea que el verde del panel era
     violeta; aquí cada color vuelve a llamarse como lo que es. */
  --accent:    #047857;
  --accent2:   #065f46;
  --accent-dk: #064e3b;
  --green:     #047857;
  --green-dk:  #065f46;
  --cyan:      #1d4ed8;
  --pink:      #6d28d9;
  --amber:     #92400e;
  --red:       #991b1b;
  --yellow:    #92400e;
  --orange:    #b45309;

  --green-bg:     #ecfdf5;
  --green-border: #a7f3d0;
  --blue-bg:      #eff6ff;
  --yellow-bg:    #fef3c7;
  --red-bg:       #fee2e2;
  --red-border:   #fecaca;
  --orange-bg:    #fef3c7;

  /* Gris de «dato secundario» para TEXTO. No es --tinta-3 (#94a3b8): ese
     sobre blanco da 2,5:1 de contraste y no llega al 4,5:1 que pide la AA.
     #64748b da 4,8:1 y se sigue leyendo como secundario. El #94a3b8 se queda
     para lo que no hay que leer: bordes, puntos, separadores. */
  --compat-apagado: #64748b;

  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-sm: 9px; --r-md: 14px; --r-lg: 16px; --r-xl: 16px;
}

/* ── 02. Arreglos de base ───────────────────────────────────────────── */

/* `admin_svg()` (admin.php:1798) devuelve iconos de TRAZO con los ajustes en
   atributos: `fill="none" stroke="currentColor"`. Un atributo de
   presentación pierde contra cualquier regla CSS, así que el
   `svg { fill: currentColor }` de admin2.css —que existe para los Phosphor,
   que son rellenos— convierte esos iconos en manchas negras.
   Se les devuelve el `fill:none` sin tocar los Phosphor, que no llevan
   atributo `stroke`. */
/* OJO: aquí había `svg[stroke] { fill: none }`, para que los iconos de trazo
   de `admin_svg()` no salieran como manchas negras. Pero los Phosphor de
   `a2_icon()` llevan `stroke="none"` explícito, así que TAMBIÉN casaban con ese
   selector — y con más peso que `.a2-ico{fill:currentColor}`. Resultado: los 40
   iconos del panel se dibujaban con `fill:none`, o sea invisibles.
   Ahora se excluyen los que dicen `stroke="none"`, que son justamente los
   rellenos. Cuando `admin_svg()` devuelva Phosphor, esta regla sobra entera. */
/* Retirada: ya no quedan iconos de trazo. `admin_svg()` devuelve
   Phosphor, que son rellenos. Esta regla existía para ellos y llegó a
   dejar invisibles los Phosphor, que también llevan atributo stroke. */

/* El <div class="bg"> pintaba el degradado oscuro de `premium.css`. Al
   quitar esa hoja se queda vacío, pero se oculta ya para que el fondo se vea
   claro también mientras las dos hojas conviven. */
body.admin-app .bg { display: none; }

/* `premium.css` forzaba `font-size:16px !important` en todos los campos.
   Aquí NO se pelea esa regla a propósito: desaparece sola al quitar la hoja,
   y responder con otro `!important` dejaría el panel con dos reglas
   peleando para siempre. Lo que sí se conserva es el motivo de aquello: por
   debajo de 16 px, Safari en iOS hace zoom al enfocar un campo y no vuelve.
   De ahí los 16 px en móvil y 14 en escritorio. */
body.admin-app input,
body.admin-app select,
body.admin-app textarea { font-size: 16px; }
@media (min-width: 768px) {
  body.admin-app input,
  body.admin-app select,
  body.admin-app textarea { font-size: 14px; }
}

body.admin-app { background: var(--fondo, #f8fafc); color: var(--tinta-2, #475569); }
body.admin-app code { font-family: var(--mono); font-size: .92em; }
body.admin-app hr { border: none; border-top: 1.5px solid var(--borde, #e2e8f0); margin: 18px 0; }

/* ── 03. Estructura y páginas ───────────────────────────────────────── */
body.admin-app.admin-shell { overflow-y: auto; overflow-x: hidden; min-height: 100vh; height: auto; }
body.admin-app .admin-wrap { min-height: 100vh; position: relative; }

body.admin-app .main,
body.admin-app .page-main { max-width: 1180px; margin: 26px auto 80px; padding: 0 18px; }
body.admin-app .content { padding: 0; max-width: none; }

body.admin-app .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--compat-apagado); margin-bottom: 8px;
  background: none; -webkit-text-fill-color: currentColor;  /* mataba el degradado de texto */
}
body.admin-app h1.page-title,
body.admin-app .page-title {
  font-size: 25px; font-weight: 800; letter-spacing: -.035em;
  color: var(--tinta); margin-bottom: 6px; line-height: 1.2;
}
body.admin-app .lead {
  font-size: 13.5px; color: var(--tinta-2); margin-bottom: 24px;
  line-height: 1.55; max-width: 640px;
}

/* Estado vacío. Con especificidad alta porque el <style> del <head> redefine
   `.empty` con el gris del tema oscuro. */
body.admin-app .empty,
body.admin-app .tbl-empty {
  padding: 40px 24px; text-align: center;
  color: var(--compat-apagado); font-size: 13px; background: none;
}
body.admin-app .empty code { background: var(--sup-3); padding: 2px 6px; border-radius: 6px; color: var(--tinta-2); }

@media (max-width: 860px) {
  body.admin-app .main,
  body.admin-app .page-main { margin-top: 18px; padding: 0 14px; }
  body.admin-app h1.page-title, body.admin-app .page-title { font-size: 21px; }
}

/* ── 04. Tarjetas ───────────────────────────────────────────────────
   `.card` pasa a verse como `.tarjeta` de admin2.css: blanca, borde de
   1,5 px, esquinas de 16.

   Detalle que importa: el relleno va en los hijos, NO en la tarjeta. En
   `admin.php` una `.card` puede contener una cabecera, un formulario o una
   tabla a sangre; con relleno en la tarjeta, la tabla quedaba metida hacia
   dentro y las líneas de fila no llegaban al borde. */
body.admin-app .card {
  position: relative;
  background: var(--sup, #fff);
  border: 1.5px solid var(--borde, #e2e8f0);
  border-radius: var(--r-l, 16px);
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  margin-bottom: 16px;
}
body.admin-app .card::before { display: none; }  /* la línea violeta de arriba */

body.admin-app .card-head,
body.admin-app .card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--borde);
  background: var(--sup-2, #fafbfc);
}
body.admin-app .card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 800; letter-spacing: -.02em;
  color: var(--tinta);
}
body.admin-app .card-sub { font-size: 12.5px; color: var(--compat-apagado); margin-top: 3px; font-weight: 500; }

/* El cuadrito del icono de la cabecera */
body.admin-app .card-title .ico,
body.admin-app .stat-label .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--verde-sua, #ecfdf5);
  border: 1px solid var(--verde-bor, #a7f3d0);
  color: var(--verde, #047857);
  box-shadow: none;
}


/* Hijos directos de la tarjeta que sí necesitan aire */
body.admin-app .card > form,
body.admin-app .card > p,
body.admin-app .card > .dash-2col,
body.admin-app .card > .u-filter { padding: 18px; }
body.admin-app .card > form > *:first-child { margin-top: 0; }

/* …y los que van a sangre */
body.admin-app .card > .table-wrap,
body.admin-app .card > .empty,
body.admin-app .card > .tbl-empty { margin: 0; border-radius: 0; border: none; }

/* ── 05. Formularios ────────────────────────────────────────────────── */
body.admin-app .form-card {
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-l, 16px); padding: 22px; max-width: 720px;
}
body.admin-app .form-title { font-size: 17px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; margin-bottom: 4px; }
body.admin-app .form-sub { font-size: 13px; color: var(--compat-apagado); }
body.admin-app .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { body.admin-app .form-row { grid-template-columns: 1fr; } }

/* Las etiquetas del panel viejo son mayúsculas diminutas. Se dejan en la
   caja alta original —cambiarlas movería el diseño de seis pestañas— pero
   con el gris legible de la paleta clara. */
/* OJO CON EL ALCANCE. Esta regla decía `body.admin-app label` a secas y por
   tanto alcanzaba TAMBIÉN a los componentes ya rediseñados. Con `display:block`
   y más peso que `.interruptor { display:flex }`, el interruptor de la pestaña
   Ajustes dejaba de ser una fila: la pastilla se quedaba en width 0 y no se
   veía ningún interruptor en toda la pantalla.

   Se excluyen las etiquetas que ya tienen diseño propio. Cuando no quede
   ninguna pestaña con las clases viejas, esta regla se borra entera. */
body.admin-app label:not(.interruptor):not(.campo):not(.opcion):not(.cuenta):not(.cli-critica *) {
  display: block;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--compat-apagado); margin: 14px 0 6px;
}
body.admin-app input,
body.admin-app select,
body.admin-app textarea {
  width: 100%; padding: 11px 13px;
  background: var(--sup);
  border: 1.5px solid var(--borde);
  border-radius: var(--r, 11px);
  color: var(--tinta);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
body.admin-app input::placeholder,
body.admin-app textarea::placeholder { color: var(--compat-apagado); }
body.admin-app input:hover:not(:disabled),
body.admin-app select:hover:not(:disabled),
body.admin-app textarea:hover:not(:disabled) { border-color: var(--borde-2); }
body.admin-app input:focus,
body.admin-app select:focus,
body.admin-app textarea:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(4,120,87,.22);
}
body.admin-app input[type="checkbox"],
body.admin-app input[type="radio"] { width: auto; accent-color: var(--verde); }

/* Foco de teclado igual que en admin2.css: un solo anillo en todo el panel */
body.admin-app a:focus-visible,
body.admin-app button:focus-visible,
body.admin-app summary:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 7px;
}

/* Ajustes del SaaS — filas con interruptor */
body.admin-app .set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 15px 2px;
  border-bottom: 1px solid var(--borde);
}
body.admin-app .set-row:last-of-type { border-bottom: none; }
body.admin-app .set-name { font-size: 13.5px; font-weight: 700; color: var(--tinta); }
body.admin-app .set-desc { font-size: 12.5px; color: var(--compat-apagado); margin-top: 3px; line-height: 1.5; max-width: 460px; }

body.admin-app .sw { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
body.admin-app .sw input { opacity: 0; width: 0; height: 0; }
body.admin-app .sw-track {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--borde-2, #cbd5e1); border-radius: 999px; transition: background .2s;
}
body.admin-app .sw-track::before {
  content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
  box-shadow: 0 1px 2px rgba(15,23,42,.18);
}
body.admin-app .sw input:checked + .sw-track { background: var(--verde); }
body.admin-app .sw input:checked + .sw-track::before { transform: translateX(20px); background: #fff; }
body.admin-app .sw input:focus-visible + .sw-track { box-shadow: 0 0 0 3px rgba(4,120,87,.22); }

/* Tipo de negocio y módulos (ficha del cliente) */
body.admin-app .bt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px; padding: 0;
}
body.admin-app .bt-opt { position: relative; display: block; }
body.admin-app .bt-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
body.admin-app .bt-opt-card {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 13px; background: var(--sup);
  border: 1.5px solid var(--borde); border-radius: var(--r, 11px);
  cursor: pointer; transition: border-color .15s, background .15s; min-width: 0;
}
body.admin-app .bt-opt-card:hover { border-color: var(--borde-2); }
body.admin-app .bt-opt input:checked + .bt-opt-card {
  background: var(--verde-sua); border-color: var(--verde);
  box-shadow: inset 0 0 0 1px var(--verde);
}
body.admin-app .bt-opt input:focus-visible + .bt-opt-card { box-shadow: 0 0 0 3px rgba(4,120,87,.22); }
body.admin-app .bt-label { font-size: 12.5px; font-weight: 600; color: var(--tinta); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }

body.admin-app .feat-toggles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 9px; margin: 12px 0 0; padding-bottom: 4px;
}
body.admin-app .feat-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--sup);
  border: 1.5px solid var(--borde); border-radius: var(--r-s, 9px); cursor: pointer;
}
body.admin-app .feat-toggle:hover { border-color: var(--borde-2); background: var(--sup-2); }
body.admin-app .feat-toggle input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--verde); margin: 0; cursor: pointer; }
body.admin-app .feat-toggle label {
  font-size: 12.5px; color: var(--tinta); line-height: 1.3; cursor: pointer;
  min-width: 0; overflow-wrap: anywhere; margin: 0;
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
body.admin-app .toggle-overrides {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 0 0; font-size: 12.5px; color: var(--tinta-2);
}
body.admin-app .toggle-overrides input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--verde); margin: 0; }

/* ── 06. Botones ────────────────────────────────────────────────────
   Se corresponden con los de admin2.css: `.btn-green`/`.btn-primary` son la
   acción principal, `.btn-outline` la secundaria. */
body.admin-app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 15px;
  border: 1.5px solid var(--borde-2); border-radius: var(--r, 11px);
  background: var(--sup); color: var(--tinta);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
  box-shadow: none; transform: none;
}
body.admin-app .btn:hover { background: var(--sup-3); border-color: var(--compat-apagado); transform: none; filter: none; }
body.admin-app .btn:active { transform: translateY(.5px); }
body.admin-app .btn:disabled { opacity: .5; cursor: not-allowed; }
body.admin-app .btn svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 1; }

body.admin-app .btn-green,
body.admin-app .btn-primary {
  background: var(--verde); border-color: var(--verde); color: #fff;
  box-shadow: none; filter: none;
}
body.admin-app .btn-green:hover,
body.admin-app .btn-primary:hover { background: var(--verde-osc, #065f46); border-color: var(--verde-osc, #065f46); color: #fff; }


body.admin-app .btn-outline {
  background: var(--sup); border: 1.5px solid var(--borde-2); color: var(--tinta-2);
}
body.admin-app .btn-outline:hover { background: var(--sup-3); border-color: var(--compat-apagado); color: var(--tinta); }

body.admin-app .btn-ghost { background: transparent; border-color: transparent; color: var(--tinta-2); }
body.admin-app .btn-ghost:hover { background: var(--sup-3); border-color: transparent; }

body.admin-app .btn-red {
  background: var(--rojo-sua, #fee2e2); border-color: var(--rojo-bor, #fecaca); color: var(--rojo, #991b1b);
}
body.admin-app .btn-red:hover { background: #fecdd3; border-color: #f87171; }

body.admin-app .btn-sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-s, 9px); }

/* En móvil ningún botón baja de 44 px: es lo mínimo para acertarle con el
   dedo, y es el mismo criterio que sigue admin2.css. */
@media (max-width: 860px) {
  body.admin-app .btn { min-height: 44px; }
  body.admin-app .btn-sm { min-height: 44px; padding: 0 14px; }
}

/* ── 07. Etiquetas de estado y avisos ───────────────────────────────
   Los modificadores se piden con las DOS clases (`.badge.badge-active`)
   para no pisar el `.a2-badge badge-active` que usan las pestañas nuevas:
   ahí manda `admin2-panel.css`. */
body.admin-app .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
  text-transform: none;   /* en mayúsculas se leían peor los estados largos */
}
body.admin-app .badge.badge-active    { background: var(--verde-sua); color: var(--verde-osc, #065f46); border-color: var(--verde-bor); }
body.admin-app .badge.badge-trialing  { background: var(--violeta-sua, #ede9fe); color: var(--violeta, #6d28d9); border-color: var(--violeta-bor, #ddd6fe); }
body.admin-app .badge.badge-pending   { background: var(--ambar-sua, #fef3c7); color: var(--ambar, #92400e); border-color: var(--ambar-bor, #fcd34d); }
body.admin-app .badge.badge-expired,
body.admin-app .badge.badge-suspended { background: var(--rojo-sua); color: var(--rojo); border-color: var(--rojo-bor); }
body.admin-app .badge.badge-cancelled { background: var(--sup-3); color: var(--compat-apagado); border-color: var(--borde); }

/* `admin2-panel.css` cubre cuatro de los seis estados; estos dos le faltaban
   y los usa la pestaña Uso. */
.badge-pending   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.badge-cancelled { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }

/* Avisos de resultado de una acción */
body.admin-app .flash {
  padding: 13px 16px; border-radius: var(--r-m, 14px);
  border: 1.5px solid var(--borde);
  font-size: 13px; font-weight: 600; line-height: 1.5;
  margin-bottom: 18px;
}
body.admin-app .flash-ok  { background: var(--verde-sua); border-color: var(--verde-bor); color: var(--verde-osc, #065f46); }
body.admin-app .flash-err { background: var(--rojo-sua);  border-color: var(--rojo-bor);  color: var(--rojo); }

body.admin-app .green { color: var(--verde); }

/* ── 08. Métricas ───────────────────────────────────────────────────
   Las `.stat` de Sesiones se ponen a la altura de las `.metrica` nuevas.
   Fuera el degradado, el halo de color y el levantarse al pasar por encima:
   son cifras para leer, no botones. */
body.admin-app .stat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 22px;
}
@media (max-width: 1000px) { body.admin-app .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { body.admin-app .stat-grid { grid-template-columns: 1fr; } }

body.admin-app .stat {
  position: relative;
  background: var(--sup);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-m, 14px);
  padding: 16px 18px;
  overflow: hidden;
  box-shadow: none;
  transition: border-color .15s;
}
body.admin-app .stat:hover { transform: none; border-color: var(--borde-2); box-shadow: none; }
body.admin-app .stat::after { display: none; }   /* el círculo de color del fondo */

body.admin-app .stat-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--compat-apagado); margin-bottom: 8px;
}
body.admin-app .stat-value {
  font-family: var(--mono); font-size: 27px; font-weight: 500;
  color: var(--tinta); letter-spacing: -.03em; line-height: 1.05;
  text-shadow: none;
}
body.admin-app .stat-foot { font-size: 12px; color: var(--compat-apagado); margin-top: 6px; opacity: 1; }

/* El color del icono según el asunto, en la escala clara */
body.admin-app .stat--accent .ico,
body.admin-app .stat--green  .ico { background: var(--verde-sua);   border-color: var(--verde-bor);   color: var(--verde); }
body.admin-app .stat--cyan   .ico { background: var(--azul-sua, #eff6ff);    border-color: var(--azul-bor, #bfdbfe);    color: var(--azul, #1d4ed8); }
body.admin-app .stat--pink   .ico { background: var(--violeta-sua); border-color: var(--violeta-bor); color: var(--violeta); }
body.admin-app .stat--amber  .ico { background: var(--ambar-sua);   border-color: var(--ambar-bor);   color: var(--ambar); }
body.admin-app .stat--red    .ico { background: var(--rojo-sua);    border-color: var(--rojo-bor);    color: var(--rojo); }

body.admin-app .stat-grid--mini { margin-top: -8px; margin-bottom: 26px; }
body.admin-app .stat-grid--mini .stat-value { font-size: 22px; }

/* ── 09. Tablas ─────────────────────────────────────────────────────
   Misma altura de fila que la tabla de clientes rediseñada (56 px) para que
   Uso y Sesiones se lean igual de densas que la pestaña nueva. */
body.admin-app .table-wrap {
  border-radius: 0; overflow: hidden; overflow-x: auto;
  background: var(--sup); border: none;
  -webkit-overflow-scrolling: touch;
}
body.admin-app table.tbl,
body.admin-app table:not(.tbl):not(.sms-table) { width: 100%; border-collapse: collapse; font-size: 13.5px; }

body.admin-app .tbl thead th,
body.admin-app table:not(.tbl):not(.sms-table) th {
  text-align: left; vertical-align: middle;
  padding: 11px 16px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--compat-apagado);
  background: var(--sup-2);
  border-bottom: 1.5px solid var(--borde);
  white-space: nowrap;
}
body.admin-app .tbl tbody td,
body.admin-app table:not(.tbl):not(.sms-table) td {
  height: 56px; padding: 8px 16px;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta-2); vertical-align: middle;
}
body.admin-app .tbl tbody tr:last-child td { border-bottom: none; }
body.admin-app .tbl tbody tr:hover td,
body.admin-app table:not(.tbl):not(.sms-table) tr:hover td { background: var(--sup-2); }
body.admin-app .tbl tbody td b,
body.admin-app .tbl tbody td strong { color: var(--tinta); }
body.admin-app .tbl .mono, body.admin-app td.mono { font-family: var(--mono); font-weight: 500; color: var(--tinta); }
body.admin-app .tbl-empty a { color: var(--verde); font-weight: 600; }

/* `.ses-trow` y `.sms-row` no llevan estilo a propósito: son enganches para
   los filtros de JavaScript (`querySelectorAll('.sms-row')`), no un aspecto.
   Su pinta sale de `.tbl tr` y de `.sms-table tr`. */

/* Las tablas de Uso y Sesiones tienen nueve columnas: no caben en un
   teléfono ni recortándolas. Se desplazan dentro de su caja, nunca
   arrastrando la página entera de lado. */
@media (max-width: 900px) {
  body.admin-app .table-wrap table { min-width: 720px; }
}

/* ── 10. Planes ─────────────────────────────────────────────────────── */
body.admin-app .plan-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
body.admin-app .plan-card {
  display: flex; flex-direction: column;
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-l, 16px); overflow: hidden;
}
/* El plan recomendado se marca con el borde verde, no con un fondo: un fondo
   distinto en una tarjeta de formulario se lee como «seleccionado». */
body.admin-app .plan-card.featured { border-color: var(--verde-bor); box-shadow: inset 0 0 0 1px var(--verde-bor); }
body.admin-app .plan-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1.5px solid var(--borde); background: var(--sup-2);
}
body.admin-app .plan-id {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--verde-osc, #065f46); background: var(--verde-sua);
  padding: 3px 9px; border-radius: 7px;
}
body.admin-app .plan-featured {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ambar); background: var(--ambar-sua);
  border: 1px solid var(--ambar-bor); padding: 2px 9px; border-radius: 999px;
}
body.admin-app .plan-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
body.admin-app .plan-prices,
body.admin-app .plan-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.admin-app .plan-price-block label,
body.admin-app .plan-limit-block label { margin-top: 12px; }
body.admin-app .plan-limit-help { font-size: 11px; color: var(--compat-apagado); margin-top: 5px; }
body.admin-app .pp-monthly,
body.admin-app .pp-yearly { font-family: var(--mono); font-weight: 500; }
body.admin-app .plan-foot {
  padding: 12px 16px; border-top: 1.5px solid var(--borde);
  background: var(--sup-2); display: flex; justify-content: flex-end;
}
@media (max-width: 560px) {
  body.admin-app .plan-prices, body.admin-app .plan-limits { grid-template-columns: 1fr; }
}

/* ── 11. SMS VIP ────────────────────────────────────────────────────
   Toda esta pestaña trae su propio <style> DENTRO del <body>, con los
   colores oscuros escritos a mano (#0f172a de fondo, #f1f5f9 de texto). Es
   la parte que el enfoque de solo variables no podía tocar: aquí no hay
   variables que redefinir. De ahí que cada regla lleve `body.admin-app`
   delante — es lo que la hace ganar sin `!important`. */
body.admin-app .sms-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
body.admin-app .sms-strip-card {
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-m, 14px); padding: 15px 17px;
}
body.admin-app .sms-strip-lbl {
  font-size: 11px; font-weight: 700; color: var(--compat-apagado);
  text-transform: uppercase; letter-spacing: .07em;
}
body.admin-app .sms-strip-val {
  font-family: var(--mono); font-size: 26px; font-weight: 500;
  color: var(--tinta); margin-top: 8px; letter-spacing: -.03em;
}
body.admin-app .sms-strip-val.green { color: var(--verde); }
body.admin-app .sms-strip-val.amber { color: var(--ambar); }
body.admin-app .sms-strip-sub { font-size: 12px; color: var(--compat-apagado); margin-top: 4px; }

body.admin-app .sms-table {
  width: 100%; border-collapse: collapse;
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-l, 16px); overflow: hidden;
}
body.admin-app .sms-table th {
  padding: 11px 14px; text-align: left;
  background: var(--sup-2);
  font-size: 11px; font-weight: 700; color: var(--compat-apagado);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1.5px solid var(--borde);
}
body.admin-app .sms-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--borde);
  font-size: 13px; color: var(--tinta-2);
}
body.admin-app .sms-table tr:last-child td { border-bottom: none; }
body.admin-app .sms-table tbody tr:hover td { background: var(--sup-2); }
/* Resaltar una fila es «te he traído aquí», no un estado: verde muy suave */
body.admin-app .sms-table tr.highlight td { background: var(--verde-sua); }
body.admin-app .sms-table .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta); }
body.admin-app .sms-name { font-weight: 700; color: var(--tinta); }
body.admin-app .sms-slug { font-size: 11.5px; color: var(--compat-apagado); font-family: var(--mono); }
body.admin-app .sms-low  { color: var(--rojo); font-weight: 700; }
body.admin-app .sms-zero { color: var(--compat-apagado); }
body.admin-app .sms-pending-badge {
  display: inline-block; background: var(--ambar-sua); color: var(--ambar);
  border: 1px solid var(--ambar-bor);
  font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
}

body.admin-app .sms-add-btn,
body.admin-app .sms-del-btn,
body.admin-app .sms-wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 32px; padding: 0 12px; border-radius: var(--r-s, 9px);
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none;
  text-transform: none; letter-spacing: 0;   /* en versalitas se leían peor */
  border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
body.admin-app .sms-add-btn { background: var(--verde); border-color: var(--verde); color: #fff; }
body.admin-app .sms-add-btn:hover { background: var(--verde-osc, #065f46); border-color: var(--verde-osc, #065f46); }
body.admin-app .sms-del-btn { background: var(--rojo-sua); border-color: var(--rojo-bor); color: var(--rojo); }
body.admin-app .sms-del-btn:hover { background: #fecdd3; border-color: #f87171; color: var(--rojo); }
body.admin-app .sms-wa-btn { background: var(--sup); border-color: var(--borde-2); color: var(--tinta-2); }
body.admin-app .sms-wa-btn:hover { border-color: var(--verde); color: var(--verde); background: var(--verde-sua); }
@media (max-width: 860px) {
  body.admin-app .sms-add-btn,
  body.admin-app .sms-del-btn,
  body.admin-app .sms-wa-btn { min-height: 44px; padding: 0 14px; }
}

/* Modal de packs */
body.admin-app .sms-modal {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(15,23,42,.45);
  align-items: center; justify-content: center; padding: 20px;
}
body.admin-app .sms-modal.open { display: flex; }
body.admin-app .sms-modal-box {
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-xl, 20px); padding: 0; width: 100%; max-width: 480px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,.16);
}
body.admin-app .sms-modal-head {
  padding: 17px 20px; border-bottom: 1.5px solid var(--borde);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
body.admin-app .sms-modal-title { font-size: 16px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; }
body.admin-app .sms-modal-sub { font-size: 12.5px; color: var(--compat-apagado); margin-top: 3px; }
body.admin-app .sms-modal-close {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-xs, 7px); background: var(--sup);
  border: 1.5px solid var(--borde); color: var(--compat-apagado);
  cursor: pointer; font-size: 16px; line-height: 1;
}
body.admin-app .sms-modal-close:hover { background: var(--sup-3); color: var(--tinta); }
@media (max-width: 860px) { body.admin-app .sms-modal-close { width: 44px; height: 44px; } }
body.admin-app .sms-modal-body { padding: 18px 20px; }
body.admin-app .sms-modal-body label { color: var(--compat-apagado); }
body.admin-app .sms-modal-body input,
body.admin-app .sms-modal-body select {
  background: var(--sup); border: 1.5px solid var(--borde);
  color: var(--tinta); border-radius: var(--r, 11px); padding: 11px 13px;
}
body.admin-app .sms-modal-body input:focus,
body.admin-app .sms-modal-body select:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(4,120,87,.22); }
body.admin-app .sms-modal-foot {
  padding: 14px 20px; border-top: 1.5px solid var(--borde);
  background: var(--sup-2); display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
}
body.admin-app .sms-pack-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
body.admin-app .sms-pack-preset {
  padding: 10px; background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-s, 9px); font-size: 12px; color: var(--compat-apagado);
  cursor: pointer; text-align: left; font-family: inherit;
}
body.admin-app .sms-pack-preset:hover { border-color: var(--verde-bor); background: var(--verde-sua); color: var(--verde-osc, #065f46); }
body.admin-app .sms-pack-preset b { display: block; color: var(--tinta); font-size: 13px; }

/* ── 12. Credenciales y fichas ──────────────────────────────────────
   El bloque `cred2-*` también trae su <style> propio (admin.php ~96-124),
   con `background: rgba(255,255,255,.025)`: sobre negro era una tarjeta
   tenue, sobre blanco no se ve. */
body.admin-app .cred2-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px; }
@media (min-width: 760px) { body.admin-app .cred2-grid { grid-template-columns: 1fr 1fr; } }
body.admin-app .cred2-card {
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-m, 14px); overflow: hidden;
}
body.admin-app .cred2-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: var(--sup-2); border-bottom: 1.5px solid var(--borde);
}
body.admin-app .cred2-prod {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--verde-osc, #065f46); background: var(--verde-sua);
  border: 1px solid var(--verde-bor); padding: 2px 9px; border-radius: 999px;
}
body.admin-app .cred2-url { font-size: 12px; color: var(--verde); text-decoration: none; font-weight: 600; }
body.admin-app .cred2-url:hover { text-decoration: underline; }
body.admin-app .cred2-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--borde);
}
body.admin-app .cred2-row:last-child { border-bottom: none; }
body.admin-app .cred2-k {
  min-width: 92px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--compat-apagado); font-weight: 700;
}
/* El valor va en una pastilla: dice «esto es el dato, y se puede copiar».
   El <style> de admin.php la pintaba con `rgba(0,0,0,.3)`, que sobre la
   tarjeta oscura era un gris discreto y sobre blanco es una mancha negra. */
body.admin-app .cred2-v {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px;
  color: var(--tinta); overflow-wrap: anywhere;
  background: var(--sup-3); border: 1px solid var(--borde);
  padding: 7px 11px; border-radius: var(--r-xs, 7px);
}
body.admin-app .cred2-v.pass { color: var(--ambar); font-weight: 500; }
body.admin-app .cred2-v.mono { color: var(--verde-osc, #065f46); }
body.admin-app .cred2-v.link { color: var(--azul, #1d4ed8); }
body.admin-app .cred2-na { flex: 1; color: var(--compat-apagado); font-size: 12.5px; font-style: italic; }
body.admin-app .cred2-copy,
body.admin-app .cred2-reset {
  flex-shrink: 0; min-height: 32px; padding: 0 12px;
  border-radius: var(--r-s, 9px); font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
body.admin-app .cred2-copy { background: var(--verde-sua); color: var(--verde-osc, #065f46); border-color: var(--verde-bor); }
body.admin-app .cred2-copy:hover { background: #d9f7ea; border-color: var(--verde); color: var(--verde-osc, #065f46); }
body.admin-app .cred2-copy:active { transform: scale(.96); }
body.admin-app .cred2-reset { flex: 1; background: var(--ambar-sua); color: var(--ambar); border-color: var(--ambar-bor); }
body.admin-app .cred2-reset:hover { background: #fde68a; color: var(--ambar); }
@media (max-width: 860px) {
  body.admin-app .cred2-copy, body.admin-app .cred2-reset { min-height: 44px; padding: 0 16px; }
  body.admin-app .cred2-row { flex-wrap: wrap; gap: 9px; }
  body.admin-app .cred2-k { min-width: 100%; flex: 1 1 100%; margin-bottom: 2px; }
}

/* Resultado del alta de un cliente nuevo */
body.admin-app .result-card {
  background: var(--verde-sua); border: 1.5px solid var(--verde-bor);
  border-radius: var(--r-l, 16px); padding: 20px; margin-bottom: 20px;
}
body.admin-app .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { body.admin-app .result-grid { grid-template-columns: 1fr; } }
body.admin-app .result-item {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r, 11px); padding: 11px 13px;
}
body.admin-app .result-item > span:first-child {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--compat-apagado);
}
body.admin-app .result-item > span:last-child { font-size: 14px; font-weight: 700; color: var(--tinta); }
body.admin-app .pin-big {
  font-size: 30px; font-weight: 700; color: var(--verde);
  letter-spacing: .18em; font-family: var(--mono);
}

/* Rotulillo de dato dentro de una ficha */
body.admin-app .t-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--compat-apagado);
}
body.admin-app .t-info-list { display: flex; flex-direction: column; }
body.admin-app .t-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--r-xs, 7px);
  background: var(--sup); border: 1.5px solid var(--borde);
  color: var(--compat-apagado); cursor: pointer; transition: all .15s;
}
body.admin-app .t-icon-btn:hover { background: var(--verde-sua); border-color: var(--verde-bor); color: var(--verde); }
body.admin-app .t-icon-btn svg { width: 14px; height: 14px; }

@media (max-width: 860px) { body.admin-app .t-icon-btn { width: 44px; height: 44px; } }

/* ── 13. Acceso (login y OTP) ───────────────────────────────────────
   Sale antes de entrar, así que es lo primero que se ve del panel: si esta
   pantalla sigue oscura, da igual lo claro que esté el resto. */
body.admin-app .login-wrap {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--fondo, #f8fafc);
}
body.admin-app .login-card {
  position: relative; width: 100%; max-width: 400px;
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-xl, 20px); padding: 32px 28px 26px;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.admin-app .login-card::before { display: none; }   /* la raya violeta de arriba */
body.admin-app .login-shark { display: none; }          /* el tiburón de Sharktool */
body.admin-app .login-h {
  text-align: center; font-size: 20px; font-weight: 800;
  letter-spacing: -.03em; margin-bottom: 6px;
  color: var(--tinta);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;   /* el título era texto con degradado */
}
body.admin-app .login-sub { text-align: center; font-size: 13px; color: var(--compat-apagado); margin-bottom: 22px; }
body.admin-app .login-err {
  background: var(--rojo-sua); border: 1.5px solid var(--rojo-bor); color: var(--rojo);
  border-radius: var(--r, 11px); padding: 11px 14px; font-size: 13px;
  font-weight: 600; margin-bottom: 14px;
}
body.admin-app .login-card label { margin-top: 12px; }
body.admin-app .login-card .btn { width: 100%; min-height: 46px; margin-top: 16px; }
body.admin-app .otp-input {
  text-align: center; letter-spacing: .45em; text-indent: .45em;
  font-size: 22px; font-weight: 500; font-family: var(--mono);
  height: 56px; padding: 0 13px;
}

/* ── 14. Varios ─────────────────────────────────────────────────────── */

/* Chips de producto y de módulo */
body.admin-app .prod-chip,
body.admin-app .prod-tag,
body.admin-app .mod-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: var(--sup-3); color: var(--tinta-2);
  border: 1px solid var(--borde);
}
body.admin-app .mod-chip { margin: 2px 4px 2px 0; font-size: 11px; }
body.admin-app .mod-chip small { color: var(--tinta-2); font-weight: 500; margin-left: 4px; }

/* Punto de actividad: verde hoy, ámbar <7 días, rojo 7+, gris nunca.
   Sin resplandor: en fondo claro un `box-shadow` de color se ve sucio. */
body.admin-app .u-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; box-shadow: none;
}
body.admin-app .u-dot--ok    { background: #059669; }
body.admin-app .u-dot--warn  { background: #d97706; }
body.admin-app .u-dot--bad   { background: #dc2626; }
body.admin-app .u-dot--never { background: var(--borde-2, #cbd5e1); }

body.admin-app .u-filter { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
body.admin-app .u-inactive-note {
  margin-top: 14px; padding: 12px 15px;
  border: 1.5px solid var(--rojo-bor); background: var(--rojo-sua);
  border-radius: var(--r, 11px); font-size: 12.5px; color: var(--rojo); line-height: 1.6;
}

/* Insignia de «cómo va» el cliente */
body.admin-app .hb {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
body.admin-app .hb--ok    { background: var(--verde-sua);   color: var(--verde-osc, #065f46); border-color: var(--verde-bor); }
body.admin-app .hb--build { background: var(--azul-sua, #eff6ff); color: var(--azul, #1d4ed8); border-color: var(--azul-bor, #bfdbfe); }
body.admin-app .hb--watch { background: var(--ambar-sua);   color: var(--ambar);   border-color: var(--ambar-bor); }
body.admin-app .hb--off   { background: var(--sup-3);       color: var(--tinta-2); border-color: var(--borde); }

body.admin-app .op-num { font-family: var(--mono); font-size: 13px; color: var(--tinta-2); }
body.admin-app .op-num b { color: var(--verde); font-weight: 700; }

/* Sesiones: frescura del último acceso */
body.admin-app .ses-green { color: var(--verde); }
body.admin-app .ses-amber { color: var(--ambar); }
body.admin-app .ses-red   { color: var(--rojo); }

/* Registro de eventos */
body.admin-app .event-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 18px; border-bottom: 1px solid var(--borde);
}
body.admin-app .event-row:last-child { border-bottom: none; }
body.admin-app .event-icon {
  width: 30px; height: 30px; border-radius: var(--r-s, 9px); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sup-3); color: var(--tinta-2);
}
body.admin-app .event-icon svg { width: 15px; height: 15px; }

body.admin-app .event-icon.ok   { background: var(--verde-sua);   color: var(--verde); }
body.admin-app .event-icon.err  { background: var(--rojo-sua);    color: var(--rojo); }
body.admin-app .event-icon.warn { background: var(--ambar-sua);   color: var(--ambar); }
body.admin-app .event-icon.info { background: var(--violeta-sua); color: var(--violeta); }

/* Menú de acciones heredado (se abre al pasar por encima) */
body.admin-app .actions-wrap { position: relative; display: inline-block; }
body.admin-app .actions-menu {
  display: none; position: absolute; right: 0; top: 100%; z-index: 100;
  min-width: 200px; padding: 6px; margin-top: 6px;
  background: var(--sup); border: 1.5px solid var(--borde);
  border-radius: var(--r-m, 14px); box-shadow: 0 12px 32px rgba(15,23,42,.10);
}
body.admin-app .actions-wrap:hover .actions-menu,
body.admin-app .actions-wrap.open .actions-menu { display: block; }
body.admin-app .action-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; font-size: 13px; font-weight: 600;
  color: var(--tinta-2); border-radius: var(--r-xs, 7px);
  cursor: pointer; background: none; border: none; font-family: inherit;
}
body.admin-app .action-item:hover { background: var(--sup-3); color: var(--tinta); }
@media (max-width: 860px) { body.admin-app .action-item { min-height: 44px; } }

/* Saldo por API de SMS */
body.admin-app .api-bal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 4px 2px; }
body.admin-app .api-bal {
  position: relative; background: var(--sup);
  border: 1.5px solid var(--borde); border-radius: var(--r-m, 14px); padding: 14px 16px;
}
body.admin-app .api-bal--on { border-color: var(--verde-bor); background: var(--verde-sua); }
body.admin-app .api-bal-name { font-weight: 700; font-size: 13px; color: var(--tinta); }
body.admin-app .api-bal-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: #fff; background: var(--verde); border-radius: 6px; padding: 2px 8px;
}
body.admin-app .api-bal-val { font-family: var(--mono); font-size: 25px; font-weight: 500; color: var(--verde); letter-spacing: -.03em; }
body.admin-app .api-bal-val small { font-size: 12px; color: var(--compat-apagado); font-family: inherit; }
body.admin-app .api-bal-val.api-bal-err { color: var(--compat-apagado); }
body.admin-app .api-bal-cop { font-size: 12px; color: var(--compat-apagado); margin-top: 2px; }
body.admin-app .api-bal-key { font-size: 10.5px; color: var(--compat-apagado); opacity: 1; margin-top: 8px; font-family: var(--mono); }
body.admin-app .api-bal-use {
  margin-top: 10px; width: 100%; min-height: 34px; padding: 0 10px;
  background: var(--sup); border: 1.5px solid var(--borde-2);
  border-radius: var(--r-s, 9px); color: var(--tinta-2);
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
}
body.admin-app .api-bal-use:hover { border-color: var(--verde); color: var(--verde); background: var(--verde-sua); }
@media (max-width: 860px) { body.admin-app .api-bal-use { min-height: 44px; } }

/* Gráfica de ingresos del resumen */
body.admin-app .dash-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 18px; }
body.admin-app .rev-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 14px 4px 0; }
body.admin-app .rev-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; height: 100%; }
body.admin-app .rev-bar { width: 100%; max-width: 56px; border-radius: 8px 8px 3px 3px; background: var(--verde); }
body.admin-app .rev-lbl { font-size: 11px; color: var(--compat-apagado); white-space: nowrap; }
body.admin-app .rev-val { font-size: 10.5px; color: var(--verde); font-family: var(--mono); white-space: nowrap; }

/* ── 15. Neutralizadores de color en línea ──────────────────────────
   Aquí abajo está el único `!important` de la hoja, y está porque no hay
   otra salida: son atributos `style="color:#…"` escritos en `admin.php`
   para fondo oscuro. Un atributo `style=` solo se pierde contra un
   `!important`; no hay selector que le gane de otro modo.

   Sin esto, «Codigo de negocio» en el alta de un cliente sale en #4ade80
   sobre blanco, y el nombre del último pack de SMS en #e2e8f0: texto casi
   invisible, no simplemente feo.

   Se alcanzan por el propio atributo (`[style*="color:#"]`), que es lo que
   permite corregirlos sin tocar el PHP. Es un parche declarado: el arreglo
   de verdad es borrar esos atributos de `admin.php`, y entonces esta
   sección entera se puede quitar. */
body.admin-app .result-card [style*="color:#"],
body.admin-app .result-card [style*="color: #"],
body.admin-app .sms-table [style*="color:#"],
body.admin-app .sms-table [style*="color: #"],
body.admin-app #pricePreview [style*="color:#"],
body.admin-app .prod-tag[style*="color:#"] { color: var(--tinta-2) !important; }

body.admin-app .result-card code[style*="color:#"],
body.admin-app .result-card b[style*="color:#"],
body.admin-app .sms-table b[style*="color:#"] { color: var(--tinta) !important; }

/* Las etiquetas del alta iban en verde neón; se quedan en verde, pero legible */
body.admin-app .result-card .t-label[style*="color:#"] { color: var(--verde) !important; }

/* La cifra del precio estimado sí manda: se queda en verde. Lleva el id del
   contenedor delante para ganarle a la regla genérica de arriba, que también
   es `!important` y llegaba con más clases. */
body.admin-app #pricePreview #priceAmount { color: var(--verde) !important; }
body.admin-app #pricePreview #priceAmount span { color: var(--compat-apagado) !important; }
body.admin-app #pricePreview { border-color: var(--verde-bor) !important; }

/* El buscador de la pestaña SMS lleva el fondo oscuro en el atributo */
body.admin-app input[type="search"][style*="#1e293b"] {
  background: var(--sup) !important;
  border: 1.5px solid var(--borde) !important;
  color: var(--tinta) !important;
}

/* `admin.php` escribe `style="color:var(--t3)"` en los subtítulos de Planes y
   SMS. Ese token vale #94a3b8, que sobre blanco da 2,45:1 y no llega al 4,5:1
   de la AA. No se toca el valor de `--t3` —lo definen y lo usan las hojas de
   navegación y de clientes, y cambiarlo por debajo les movería el diseño—; se
   corrige solo donde va escrito a mano, buscándolo por el atributo. */
body.admin-app [style*="var(--t3)"] { color: var(--compat-apagado) !important; }

/* Los <code> sueltos de la ficha de alta llevan color claro en línea */
body.admin-app .card code[style*="color:#"],
body.admin-app .form-card code[style*="color:#"] { color: var(--tinta) !important; }
