/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}


/* ============================================================
   HybsChat — tokens de diseño
   ------------------------------------------------------------
   Se anexa al final de custom.css: el último :root gana, así que
   redefine la escala --primary-* que Nexus deja apuntando a los
   grises y el tema entero toma el color de marca.

   COLOR BASE:  linear-gradient(135deg, #00C492, #00a97e)
   ============================================================ */

:root {
    /* ── Marca ──────────────────────────────────────────────
       El gradiente es el color base de HybsChat. Va en SUPERFICIES
       (botones, barras, acentos), no en texto: sobre blanco da
       2.26:1 y es ilegible. Para texto está --hybs-brand-text. */
    --hybs-brand: linear-gradient(135deg, #00C492, #00a97e);
    --hybs-brand-from: #00C492;
    --hybs-brand-to:   #00a97e;

    /* Escala derivada del verde de marca (500 y 600 son los dos
       extremos del gradiente). */
    --primary-50:  #e6faf4;
    --primary-100: #ccf5e9;
    --primary-200: #99ebd3;
    --primary-300: #5fdfb9;
    --primary-400: #26d3a2;
    --primary-500: #00c492;   /* marca, claro */
    --primary-600: #00a97e;   /* marca, oscuro */
    --primary-700: #008d69;
    --primary-800: #007054;
    --primary-900: #005b45;
    --primary-950: #003b2d;

    /* Verde legible sobre blanco: 6.09:1, pasa AA para texto normal.
       El de marca (#00C492) da 2.26:1 y no sirve para leer. */
    --hybs-brand-text: #007054;

    /* Neutrales con una pizca de verde, para que los grises no
       peleen con la marca. */
    --hybs-ink:        #0f1e1a;
    --hybs-ink-soft:   #40534d;
    --hybs-ink-faint:  #6b7d78;
    --hybs-line:       #e2e9e6;
    --hybs-surface:    #ffffff;
    --hybs-surface-2:  #f6f9f8;

    /* ── Forma ──────────────────────────────────────────────
       Una escala corta y consistente: tres radios y tres sombras.
       Cuando hay quince valores sueltos, la interfaz se ve armada
       por partes. */
    --hybs-r-sm: 8px;
    --hybs-r-md: 12px;
    --hybs-r-lg: 16px;
    --hybs-r-pill: 999px;

    --hybs-shadow-sm: 0 1px 2px rgba(15, 30, 26, .06);
    --hybs-shadow-md: 0 2px 8px rgba(15, 30, 26, .07);
    --hybs-shadow-lg: 0 8px 28px rgba(15, 30, 26, .10);

    /* ── Tipografía ─────────────────────────────────────────
       Se mantiene Open Sans, la que el tema ya carga localmente:
       traer otra familia obligaría a un CDN o a empaquetar el
       webfont, y ninguna de las dos vale el costo acá. Lo que sí
       se ajusta es la escala y los pesos, que es de donde sale la
       jerarquía. */
    --hybs-fs-xs: 12px;
    --hybs-fs-sm: 13px;
    --hybs-fs-md: 14px;
    --hybs-fs-lg: 16px;
    --hybs-fs-xl: 20px;
    --hybs-fs-2xl: 26px;
}

/* ── El acento de marca donde se ve ─────────────────────── */

/* Botón primario: el gradiente de marca. Texto blanco en semibold,
   que es como la marca lo usa. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
#hybs-dashboard-root .hybs-isp-save {
    background: var(--hybs-brand);
    border: 0;
    border-radius: var(--hybs-r-sm);
    font-weight: 600;
    color: #fff;
    box-shadow: var(--hybs-shadow-sm);
}
.btn-primary:hover,
#hybs-dashboard-root .hybs-isp-save:hover {
    background: linear-gradient(135deg, #00b485, #009570);   /* un punto más oscuro */
    color: #fff;
    box-shadow: var(--hybs-shadow-md);
}
.btn-primary:focus-visible,
#hybs-dashboard-root .hybs-isp-save:focus-visible {
    outline: 2px solid var(--primary-700);
    outline-offset: 2px;
}

/* Links: el verde legible, no el de marca. */
a { color: var(--hybs-brand-text); }
a:hover { color: var(--primary-900); }

/* ── El menú principal de WHMCS ────────────────────────────
   Sólido, sin degradado.

   #00c492 como FONDO de toda la columna obliga a texto oscuro
   (blanco encima da 2.26:1) y una superficie tan saturada cansa a
   las ocho horas. Así que va al revés: sólido oscuro de la misma
   familia, con #00c492 puro en los acentos, donde rinde de verdad.

     fondo  #00473a  → texto blanco 10.70:1
     acento #00c492  → sobre ese fondo 4.74:1

   Para probar otro tono, es una sola variable: --hybs-nav-solid. */

.hybs-sidenav {
    --hybs-nav-solid: #00473a;

    --hybs-nav-bg: var(--hybs-nav-solid);
    --hybs-nav-bg-hover: rgba(0, 196, 146, .14);
    --hybs-nav-border: rgba(0, 196, 146, .20);
    --hybs-nav-fg: #ffffff;
    --hybs-nav-fg-dim: rgba(255, 255, 255, .74);

    background: var(--hybs-nav-solid);
}

/* El logo, siempre blanco. `brightness(0) invert(1)` aplana cualquier
   logo a blanco sólido: sirve con el actual a color y no estorba
   cuando se suba el blanco definitivo (blanco → blanco). */
.hybs-sidenav-brand img { filter: brightness(0) invert(1); }

.hybs-sidenav-brand { position: relative; }
.hybs-sidenav-brand::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--primary-500, #00c492);
}

/* Los íconos en el verde de marca: sobre el sólido oscuro dan 4.74:1
   y es donde #00c492 se luce sin comprometer la lectura. */
.hybs-sidenav-icon { color: var(--primary-500, #00c492); }
.hybs-sidenav-link:hover .hybs-sidenav-icon { color: #fff; }
.hybs-sidenav-divider { background: rgba(0, 196, 146, .20); }

/* Activo: fondo apenas teñido y una barra de marca a la izquierda.
   Sobrio —el texto sigue en blanco sobre oscuro, ~10:1— y la posición
   se lee de un vistazo por la barra, no por un bloque de color. */
.hybs-sidenav-item.is-current > .hybs-sidenav-link:not(.hybs-sidenav-toggle),
.hybs-sidenav-sublink.is-current {
    position: relative;
    background: rgba(0, 196, 146, .16);
    color: #ffffff;
    font-weight: 700;
}
.hybs-sidenav-item.is-current > .hybs-sidenav-link:not(.hybs-sidenav-toggle)::before,
.hybs-sidenav-sublink.is-current::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-500, #00c492);
}
.hybs-sidenav-item.is-current > .hybs-sidenav-link .hybs-sidenav-icon { color: var(--primary-400, #26d3a2); }

/* ── Superficies ────────────────────────────────────────── */

.card,
.panel,
#hybs-dashboard-root .hybs-card {
    border-radius: var(--hybs-r-md);
    border-color: var(--hybs-line);
    box-shadow: var(--hybs-shadow-sm);
}


/* ── El menú del dashboard ──────────────────────────────────
   Mismo criterio que el menú principal: una superficie sólida y el
   activo recortado sobre ella. Antes eran botones transparentes
   sobre blanco —sin contenedor, sin suelo— y por eso los tabs se
   sentían flotando.

   Invertido respecto del sidebar, porque acá el fondo es claro:
     sidebar    fondo oscuro  → activo teñido + barra de marca
     dashboard  fondo gris    → activo BLANCO + barra de marca

   Sin esquinas redondeadas a propósito: la barra queda pegada al
   hacer scroll y un contenedor redondeado dejaría ver el contenido
   pasando por las esquinas.
   ────────────────────────────────────────────────────────── */

#hybs-dashboard-root .hybs-tabs-nav {
    display: flex;
    flex-wrap: nowrap;                    /* una sola fila, siempre */
    gap: 2px;
    align-items: center;
    margin: 0 0 22px;
    padding: 7px 8px;

    background: var(--hybs-surface-2, #f6f9f8);
    border: 1px solid var(--hybs-line, #e2e9e6);
    border-left: 0;
    border-right: 0;

    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    position: sticky;
    top: 0;
    z-index: 20;
}

/* La barra de scroll a la vista molesta; el desbordamiento se
   entiende igual porque el último tab queda cortado. */
#hybs-dashboard-root .hybs-tabs-nav::-webkit-scrollbar { height: 0; }
#hybs-dashboard-root .hybs-tabs-nav { scrollbar-width: none; }

#hybs-dashboard-root .hybs-tab-btn {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--hybs-r-sm, 8px);
    background: transparent;
    color: var(--hybs-ink-soft, #40534d);   /* 8.20:1 sobre el fondo claro */
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .13s ease, color .13s ease, box-shadow .13s ease;
}

#hybs-dashboard-root .hybs-tab-btn:hover {
    background: rgba(255, 255, 255, .7);
    color: var(--hybs-ink, #0f1e1a);
}

#hybs-dashboard-root .hybs-tab-btn:focus-visible {
    outline: 2px solid var(--primary-600, #00a97e);
    outline-offset: 1px;
}

/* Activo: recortado en blanco sobre la superficie gris, con la barra
   de marca abajo. El texto va en verde oscuro (5.61:1 sobre blanco);
   blanco sobre el gradiente daría 3.01:1 y a 13px no alcanza. */
#hybs-dashboard-root .hybs-tab-btn.active {
    position: relative;
    background: #ffffff;
    color: var(--primary-800, #007054);
    border-color: var(--hybs-line, #e2e9e6);
    box-shadow: var(--hybs-shadow-sm, 0 1px 2px rgba(15, 30, 26, .06));
}
#hybs-dashboard-root .hybs-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--primary-500, #00c492);
}

/* El emoji hace de ícono: tamaño propio para que no crezca con el
   texto ni se coma la altura de la fila. */
#hybs-dashboard-root .hybs-tab-btn > :first-child { font-size: 15px; line-height: 1; }
#hybs-dashboard-root .hybs-tab-btn span { font-size: inherit; }

/* Antes: `span { display: none }` abajo de 480px dejaba solo emoji y
   había que adivinar. Con la fila scrolleable no hace falta. */
@media (max-width: 480px) {
    #hybs-dashboard-root .hybs-tab-btn { padding: 9px 12px; font-size: 13px; }
    #hybs-dashboard-root .hybs-tab-btn span { display: inline; }
}

/* El pill de versión, al final de la fila. */
#hybs-dashboard-root .hybs-version-pill {
    margin-left: auto;
    flex: none;
    scroll-snap-align: end;
    align-self: center;
    border-radius: var(--hybs-r-pill, 999px);
    background: #fff;
}
#hybs-dashboard-root .hybs-version-pill:hover {
    color: var(--primary-800, #007054);
    border-color: var(--primary-200, #99ebd3);
    background: var(--primary-50, #e6faf4);
}

@media (prefers-reduced-motion: reduce) {
    #hybs-dashboard-root .hybs-tabs-nav { scroll-behavior: auto; }
    #hybs-dashboard-root .hybs-tab-btn { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   Terminaciones
   ----------------------------------------------------------
   Lo que separa una interfaz correcta de una que se siente
   terminada rara vez es un cambio grande: son las capas de
   sombra, los bordes hairline, cómo se comportan los números
   en una tabla y qué pasa al enfocar con el teclado.
   ══════════════════════════════════════════════════════════ */

/* ── Profundidad en capas ───────────────────────────────────
   Una sombra sola se ve plana y sucia. Dos —una de contacto,
   corta y algo densa, y otra difusa— es como se comporta la luz
   real: el borde se apoya, el cuerpo flota apenas. */
:root {
    --hybs-shadow-sm:
        0 1px 1px rgba(15, 30, 26, .04),
        0 1px 2px rgba(15, 30, 26, .06);
    --hybs-shadow-md:
        0 1px 2px rgba(15, 30, 26, .05),
        0 4px 12px rgba(15, 30, 26, .07);
    --hybs-shadow-lg:
        0 2px 4px rgba(15, 30, 26, .05),
        0 12px 32px rgba(15, 30, 26, .10);

    /* Bordes con alpha en vez de gris sólido: se apoyan sobre el
       fondo en lugar de dibujar una línea gris encima. */
    --hybs-line: rgba(15, 30, 26, .10);
    --hybs-line-soft: rgba(15, 30, 26, .06);

    /* Una curva con más salida que entrada se siente responsiva
       sin parecer apurada. */
    --hybs-ease: cubic-bezier(.2, 0, .2, 1);
}

/* ── Superficies ────────────────────────────────────────────
   El dashboard usa 26 tarjetas: es el componente que define el
   carácter de la interfaz. Borde hairline, sombra en capas y un
   radio algo menor —14px se lee blando en una superficie grande. */
#hybs-dashboard-root .hybs-card {
    border: 1px solid var(--hybs-line);
    border-radius: var(--hybs-r-md, 12px);
    box-shadow: var(--hybs-shadow-sm);
    padding: 24px 28px;
}

/* ── Jerarquía tipográfica ──────────────────────────────────
   Los títulos de sección estaban en #9CA3AF: 2.5:1 sobre blanco,
   por debajo de lo legible. Un título no debería ser lo más
   difícil de leer de la pantalla. */
#hybs-dashboard-root .hybs-section-title {
    color: var(--hybs-ink-soft, #40534d);      /* 8.20:1 */
    font-size: 11.5px;
    letter-spacing: .08em;
}

#hybs-dashboard-root .hybs-isp-label {
    color: var(--hybs-ink-soft, #40534d);
    letter-spacing: .05em;
}

/* Los números de una métrica cambian de ancho según el dígito y
   la cifra "baila" al actualizarse. Tabular los fija. */
#hybs-dashboard-root .hybs-card table td,
#hybs-dashboard-root .hybs-card table th,
.hybs-stat,
.hybs-num { font-variant-numeric: tabular-nums; }

/* ── Campos ─────────────────────────────────────────────────
   El foco no puede ser solo un cambio de color de borde: el anillo
   con offset es lo que hace que se vea desde el otro lado del
   escritorio, y lo que la gente que navega con teclado necesita. */
#hybs-dashboard-root .hybs-isp-input:focus,
#hybs-dashboard-root .hybs-isp-select:focus,
.form-control:focus {
    border-color: var(--primary-500, #00c492);
    box-shadow: 0 0 0 3px rgba(0, 196, 146, .18);
    outline: none;
}

/* ── Foco visible, en todas partes ──────────────────────────
   Un solo anillo consistente en vez del outline por defecto del
   navegador, distinto en cada control. */
a:focus-visible,
button:focus-visible,
.hybs-btn:focus-visible,
.hybs-vbtn:focus-visible {
    outline: 2px solid var(--primary-600, #00a97e);
    outline-offset: 2px;
    border-radius: var(--hybs-r-sm, 8px);
}

/* ── Barras de scroll ───────────────────────────────────────
   Las del sistema son anchas y grises y cortan la superficie.
   Finas y en la familia del contenedor desaparecen hasta que se
   las necesita. */
.hybs-sidenav-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.hybs-sidenav-nav::-webkit-scrollbar { width: 6px; }
.hybs-sidenav-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
}
.hybs-sidenav-nav::-webkit-scrollbar-track { background: transparent; }

/* ── Detalles de marca ──────────────────────────────────────
   Seleccionar texto es de las pocas interacciones que ocurren en
   toda la pantalla: que use el color de la casa se nota. */
::selection {
    background: rgba(0, 196, 146, .22);
    color: var(--hybs-ink, #0f1e1a);
}

/* Transiciones parejas en lo que responde al puntero. */
#hybs-dashboard-root .hybs-card,
.hybs-btn,
.hybs-vbtn,
#hybs-dashboard-root .hybs-tab-btn,
.hybs-sidenav-link {
    transition-timing-function: var(--hybs-ease);
}

/* El menú, con un punto más de aire: la densidad de una lista
   corta no es la de una de quince ítems. */
.hybs-sidenav-list { padding: 0 12px; }
.hybs-sidenav-link { padding: 10px 12px; }

/* Y la marca del panel, con el tracking apretado que usan los
   logotipos cuando van en texto. */
.hybs-sidenav-brandtext { letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
    #hybs-dashboard-root .hybs-card, .hybs-btn, .hybs-vbtn,
    #hybs-dashboard-root .hybs-tab-btn, .hybs-sidenav-link { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   Modal de plantillas — a lo que dé la pantalla
   ----------------------------------------------------------
   Escribir una plantilla es la tarea más larga del panel: nombre,
   categoría, idioma, cuerpo, variables, y revisar el preview. En
   960px todo eso queda apilado y el preview —lo único que dice si
   el mensaje va a quedar bien— vive debajo del pliegue.
   ══════════════════════════════════════════════════════════ */

#hybs-tmpl-modal .hybs-modal-xl {
    /* Casi toda la ventana, con aire a los lados para que siga
       leyéndose como una capa por encima y no como otra página. */
    max-width: min(1360px, 95vw);
    max-height: 92vh;
    width: 100%;
    border-radius: var(--hybs-r-lg, 16px);
    box-shadow: var(--hybs-shadow-lg);
}

/* Más alto para el cuerpo del mensaje: es donde se pasa el tiempo. */
#hybs-tmpl-modal #tmpl-body {
    min-height: 190px;
    line-height: 1.6;
    resize: vertical;
}

/* ── Dos columnas cuando hay lugar ──────────────────────────
   Formulario a la izquierda, preview a la derecha y a la vista
   mientras se escribe. Abajo de 1100px vuelve a una sola columna,
   que es lo correcto: dos columnas angostas se leen peor que una
   ancha.

   `:has()` en vez de acertarle al orden con nth-child: si mañana
   se agrega un campo, esto no se desacomoda. Donde no exista,
   queda en una columna — o sea, como está hoy. */
@media (min-width: 1100px) {
    #hybs-tmpl-modal .hybs-modal-body {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
        column-gap: 30px;
        row-gap: 14px;
        align-items: start;
    }

    #hybs-tmpl-modal .hybs-modal-body > * { grid-column: 1; }

    #hybs-tmpl-modal .hybs-modal-body > div:has(#tmpl-preview),
    #hybs-tmpl-modal #tmpl-snippet-preview-wrap {
        grid-column: 2;
        margin-top: 0;
    }

    /* El preview acompaña el scroll del formulario: al escribir el
       cuerpo se ve el resultado sin perderlo de vista. */
    #hybs-tmpl-modal .hybs-modal-body > div:has(#tmpl-preview) {
        position: sticky;
        top: 0;
    }

    /* La burbuja mantiene el ancho de WhatsApp: agrandarla mentiría
       sobre cómo se va a ver el mensaje en el teléfono. */
    #hybs-tmpl-modal #tmpl-preview { max-width: 340px; }
}

/* La cabecera y el pie quedan fijos; scrollea solo el cuerpo. */
#hybs-tmpl-modal .hybs-modal-head,
#hybs-tmpl-modal .hybs-modal-foot { flex: 0 0 auto; }
#hybs-tmpl-modal .hybs-modal-body { flex: 1 1 auto; }


/* ══════════════════════════════════════════════════════════
   Interior de los paneles — formularios y tablas
   ----------------------------------------------------------
   Todo con el ID delante: el <style> del dashboard se inyecta al
   final del <body> y con la misma especificidad le gana al tema
   (ver gotcha #160).
   ══════════════════════════════════════════════════════════ */

/* ── Campos ─────────────────────────────────────────────────
   Estaban con fondo #FAFAFA, que en un formulario se lee como
   "deshabilitado": el gris es la convención de campo bloqueado.
   Van en blanco, y el gris queda libre para señalar justamente eso.

   Borde de 1.5px a 1px: el grosor es lo que hacía que un formulario
   de 43 campos se viera cargado. El contraste se recupera con el
   color, no con el grosor — #7f8f89 da 3.39:1, arriba del mínimo
   para un control; el #D1D5DB anterior daba 1.47:1 y apenas se veía. */
#hybs-dashboard-root .hybs-isp-input,
#hybs-dashboard-root .hybs-isp-select,
#hybs-dashboard-root textarea.hybs-isp-input {
    background: #fff;
    border: 1px solid #7f8f89;
    border-radius: var(--hybs-r-sm, 8px);
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--hybs-ink, #0f1e1a);
    transition: border-color .13s var(--hybs-ease), box-shadow .13s var(--hybs-ease);
}

#hybs-dashboard-root .hybs-isp-input:hover:not(:disabled):not([readonly]),
#hybs-dashboard-root .hybs-isp-select:hover:not(:disabled) {
    border-color: var(--primary-600, #00a97e);
}

#hybs-dashboard-root .hybs-isp-input::placeholder {
    color: #8d9c96;
    opacity: 1;                       /* Firefox lo aclara por su cuenta */
}

/* Deshabilitado y solo-lectura, ahora que el gris significa algo. */
#hybs-dashboard-root .hybs-isp-input:disabled,
#hybs-dashboard-root .hybs-isp-select:disabled,
#hybs-dashboard-root .hybs-isp-input[readonly] {
    background: var(--hybs-surface-2, #f6f9f8);
    color: var(--hybs-ink-faint, #6b7d78);
    border-color: var(--hybs-line, rgba(15, 30, 26, .10));
    cursor: not-allowed;
}

/* La flecha del select, dibujada: la nativa cambia en cada sistema
   y rompe la coherencia entre campos. */
#hybs-dashboard-root .hybs-isp-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2340534d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

/* Ayudas: estaban en #9CA3AF = 2.54:1. Una instrucción que no se
   puede leer no es una instrucción. */
#hybs-dashboard-root .hybs-isp-hint {
    color: #63736e;                   /* 4.99:1 */
    font-size: 11.5px;
    line-height: 1.5;
    margin-top: 4px;
}

/* Un poco más de aire entre etiqueta y campo. */
#hybs-dashboard-root .hybs-isp-field { gap: 6px; }

/* La grilla era `1fr 1fr` fija: en el celular quedaban dos columnas
   apretadas con los campos partidos. */
#hybs-dashboard-root .hybs-isp-grid {
    gap: 16px;
    margin-bottom: 18px;
}
@media (max-width: 640px) {
    #hybs-dashboard-root .hybs-isp-grid { grid-template-columns: 1fr; }
}

/* Los mensajes de guardado, con color propio según el resultado. */
#hybs-dashboard-root .hybs-isp-msg.ok  { color: var(--primary-800, #007054); }
#hybs-dashboard-root .hybs-isp-msg.err { color: #b42318; }

/* ── Tablas ─────────────────────────────────────────────────
   Los <th> y <td> traen estilos inline, que ganan sobre cualquier
   hoja. Así que acá va solo lo que NO tienen inline: el estado de
   la fila y el contenedor. Nada de !important para pelearles.

   La fila resaltada al pasar el puntero es lo que más ayuda en las
   matrices de Equipo e Inboxes, donde hay que seguir una fila larga
   hasta la columna correcta. */
#hybs-dashboard-root table tbody tr {
    transition: background-color .1s var(--hybs-ease);
}
#hybs-dashboard-root table tbody tr:hover {
    background: var(--primary-50, #e6faf4);
}

/* Rayado muy suave: ordena la lectura sin competir con el hover. */
#hybs-dashboard-root table tbody tr:nth-child(even) {
    background: rgba(15, 30, 26, .018);
}
#hybs-dashboard-root table tbody tr:nth-child(even):hover {
    background: var(--primary-50, #e6faf4);
}

/* Los checkbox de las matrices, en el color de la casa y más
   cómodos de acertar. */
#hybs-dashboard-root table input[type="checkbox"],
#hybs-dashboard-root .hybs-card input[type="checkbox"] {
    accent-color: var(--primary-600, #00a97e);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Las tablas anchas se desplazan dentro de su caja: sin esto el
   ancho de la matriz de Equipo empuja la página entera. */
#hybs-dashboard-root .hybs-card > div[style*="overflow"] {
    border-radius: var(--hybs-r-sm, 8px);
}

/* La primera columna de las matrices lleva fondo propio porque queda fija al
   desplazar (si fuera transparente, las columnas de la derecha se verían pasar
   por debajo). Eso la dejaba fuera del rayado y del hover: la fila entera se
   pintaba menos su primera celda. */
#hybs-dashboard-root .hybs-mtx tbody tr:nth-child(even) td.hybs-mtx-h {
    background: #fbfcfc;
}
#hybs-dashboard-root .hybs-mtx tbody tr:hover td.hybs-mtx-h {
    background: var(--primary-50, #e6faf4);
}