@charset "UTF-8";
/* =====================================================================
   hex-renamed  ·  custom.css
   ---------------------------------------------------------------------
   Tema oscuro + glassmorphism para WHMCS 8.1+  (base: Twenty-One)

   CSS puro, sin preprocesadores (RT-01). Bootstrap 4 se mantiene (RT-03).
   Este archivo se carga DESPUES de all.min.css y theme.min.css, por lo
   que sobrescribe al tema base por orden de cascada.

   NOTA DE ARQUITECTURA
   Los estilos del carrito/orderform NO viven aqui: viven en
   templates/orderforms/hex-renamed/css/orderform-custom.css.
   Motivo: common.tpl del orderform vuelve a cargar su propio all.min.css
   DESPUES de este archivo, por lo que cualquier regla de carrito escrita
   aqui seria pisada. Ver README.md > "Orden de carga del CSS".

   INDICE
     01. Tokens de diseño (:root)
     02. Base: body, tipografia, enlaces, scrollbar
     03. Superficies: glass, cards, paneles
     04. Botones
     05. Formularios y controles
     06. Navbar, topbar y cabecera
     07. Breadcrumb
     08. Sidebar y menus
     09. Tablas y listados
     10. Alertas, badges y estados
     11. Homepage: isla de accesos
     12. Area de cliente
     13. Modales, dropdowns, popovers y tooltips
     14. Footer
     15. Accesibilidad (foco, area clickeable, reduced-motion)
     16. Responsive
     17. Utilidades del tema
   ===================================================================== */


/* =====================================================================
   01. TOKENS DE DISEÑO
   ---------------------------------------------------------------------
   Paleta alineada con la landing de HexServers (RF-02.2).
   Origen: src/lib/theme.js -> DEFAULT_THEME + PRIMARY_RAMP / ACCENT_RAMP.

     landing            aqui
     -----------------  ------------------------------------------
     primary  #5b8def   --accent          (azul, texto y bordes)
     hex-400  #7ca4f2   --accent-soft     (azul claro sobre cards)
     accent   #7a6ff0   --accent-2        (violeta)
     plasma-400 #9b93f4 --accent-2-soft
     background #07070a --bg
     surface  #0e0e13   --bg-elevated
     text     #e4e6ee   --text-secondary

   DOS DESVIACIONES DELIBERADAS RESPECTO A LA LANDING
   1. --accent-strong (#486fbd) no existe en la landing: alli el boton
      principal usa el degradado hex-500 -> hex-600 con texto blanco, que
      se queda en 3,2:1 y no pasa AA. Aqui se usa un azul un punto mas
      profundo, del mismo tono, que da 4,9:1 con texto blanco (RF-03.2).
   2. El cristal usa los valores del modo "sobrio" de la landing, que es
      el de fabrica: superficies planas, sin degradados ni halos.

   Contrastes verificados sobre --bg (#07070a):
     --text            #ffffff  -> 20.1:1  (AAA)
     --text-secondary  #cbd5e1  -> 13.4:1  (AAA)
     --text-tertiary   #94a3b8  ->  7.9:1  (AAA)
     --text-muted      #7c8aa0  ->  5.8:1  (AA)
     --accent          #5b8def  ->  6.2:1  (AA)
     --accent-soft     #7ca4f2  ->  8.6:1  (AAA)
     --accent-2        #7a6ff0  ->  5.1:1  (AA)
     --accent-strong   #486fbd  ->  4.9:1 con texto blanco encima (AA)
     --focus           #bfd3ff  -> 13.4:1 sobre fondo, 3.3:1 sobre accent

   Para volver al magenta original basta con cambiar los cuatro valores
   de --accent* ; nada mas en el archivo lleva colores a fuego.
   ===================================================================== */

:root {
    /* --- Fondos -------------------------------------------------- */
    --bg:                 #07070a;   /* landing: --color-void */
    --bg-deep:            #000000;   /* listado de productos */
    --bg-elevated:        #0e0e13;   /* landing: --color-void-2 */
    --bg-card:            #12121a;   /* card de producto */
    --bg-card-hover:      #181822;

    /* --- Texto ---------------------------------------------------- */
    --text:               #ffffff;
    --text-secondary:     #cbd5e1;   /* slate-300 */
    --text-tertiary:      #94a3b8;   /* slate-400 */
    --text-muted:         #7c8aa0;   /* etiquetas pequeñas, sigue en AA */
    --text-disabled:      #64748b;   /* slate-500 (exento WCAG) */

    /* --- Acento principal: azul ----------------------------------- */
    --accent:             #5b8def;
    --accent-soft:        #7ca4f2;
    --accent-strong:      #486fbd;   /* relleno de boton, texto blanco 4.9:1 */
    --accent-hover:       #4b73c2;   /* hover del boton,  blanco 4.6:1 */
    --accent-active:      #3c5c9e;   /* pulsado,          blanco 6.5:1 */
    --accent-tint:        rgba(91, 141, 239, 0.12);
    --accent-tint-strong: rgba(91, 141, 239, 0.22);
    --accent-border:      rgba(91, 141, 239, 0.35);

    /* --- Acento secundario: violeta ------------------------------- */
    --accent-2:           #7a6ff0;
    --accent-2-soft:      #9b93f4;
    --accent-2-tint:      rgba(122, 111, 240, 0.14);

    /* --- Semanticos (siempre acompañados de icono, RF-09.4) -------- */
    --success:            #34d399;
    --success-tint:       rgba(52, 211, 153, 0.12);
    --warning:            #fbbf24;
    --warning-tint:       rgba(251, 191, 36, 0.12);
    --danger:             #f87171;
    --danger-tint:        rgba(248, 113, 113, 0.12);
    --info:               #7ca4f2;
    --info-tint:          rgba(124, 164, 242, 0.12);

    /* --- Cristal (valores del modo "sobrio" de la landing) --------- */
    --glass-bg:           rgba(255, 255, 255, 0.035);
    --glass-bg-strong:    rgba(255, 255, 255, 0.06);
    --glass-blur:         blur(16px);
    --glass-border:       1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow:       0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
                          0 18px 50px -28px rgba(0, 0, 0, 0.9);

    /* --- Bordes y separadores ------------------------------------- */
    --hairline:           rgba(255, 255, 255, 0.08);
    --hairline-soft:      rgba(255, 255, 255, 0.05);
    --hairline-strong:    rgba(255, 255, 255, 0.14);

    /* --- Foco (RF-03.6 / RF-09.2) ---------------------------------
       Azul muy claro, de la misma rampa que el acento. Sustituye al
       ambar anterior, que cumplia pero desentonaba en un tema azul.
       Contraste del anillo: 13.4:1 sobre el fondo y 3.3:1 sobre el
       relleno de los botones de acento, por encima del 3:1 que pide
       WCAG para indicadores no textuales. */
    --focus:              #bfd3ff;
    --focus-width:        3px;
    --focus-offset:       2px;

    /* --- Geometria (landing: rounded-xl / rounded-2xl) ------------ */
    --radius-sm:          8px;
    --radius:             12px;
    --radius-lg:          16px;
    --radius-pill:        999px;

    /* --- Area minima clickeable (RF-03.4 / RF-09) ----------------- */
    --tap-target:         44px;

    /* --- Tipografia (misma pila que la landing) ------------------- */
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-numeric: "Inter", "Segoe UI", system-ui, sans-serif;

    /* --- Transiciones --------------------------------------------- */
    --t-fast:             120ms ease;
    --t:                  180ms ease;
}


/* =====================================================================
   02. BASE
   ===================================================================== */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body,
body.primary-bg-color {
    background-color: var(--bg);
    /* Halos discretos, al nivel del modo "sobrio" de la landing. */
    background-image:
        radial-gradient(1100px 560px at 15% -10%, rgba(91, 141, 239, 0.10), transparent 62%),
        radial-gradient(900px 480px at 90% 2%,    rgba(122, 111, 240, 0.08), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.9375rem;   /* 15px */
    line-height: 1.6;
    min-height: 100vh;
}

/* Rejilla de fondo de la landing (.backdrop-grid), muy atenuada. */
body::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 64px 64px;
    content: "";
    height: 60vh;
    left: 0;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    /* z-index NEGATIVO a proposito: ver la nota de abajo. */
    z-index: -1;
}


/* El contenido va por encima de la rejilla.
   ---------------------------------------------------------------------
   OJO, AQUI HUBO UN BUG FEO. Antes esto era:

       .header, #main-body, ... { position: relative; z-index: 1; }

   con la rejilla en z-index: 0. Funcionaba para el fondo, pero ese
   `z-index: 1` convierte a #main-body en un CONTEXTO DE APILAMIENTO, y
   eso atrapa dentro a todo lo que lleve z-index, por alto que sea.

   Consecuencia: cualquier modal renderizado dentro de #main-body (el de
   "¿quitar este articulo?" del carrito, por ejemplo) quedaba por debajo
   de su propio .modal-backdrop, que Bootstrap cuelga de <body> con
   z-index 1040 y por tanto vive en el contexto raiz. El modal se veia
   -porque el backdrop es translucido- pero NO se podia pulsar nada, y la
   pantalla entera se quedaba oscurecida.

   Los modales del tema (#modalAjax, el selector de idioma) no lo sufrian
   porque footer.tpl los pinta FUERA de #main-body.

   La solucion es no crear el contexto: la rejilla se manda al fondo con
   z-index: -1 (sigue viendose, porque un hijo con z-index negativo pinta
   por encima del fondo de su ancestro) y el contenido ya no necesita
   z-index ninguno. .header conserva el suyo (1030) en la seccion 06.b,
   que es el que necesita la cabecera sticky. */
.header,
#main-body,
.master-breadcrumb,
#footer,
footer.footer { position: relative; }

/* El tema base pinta muchos bloques de blanco mediante estas clases. */
.primary-bg-color,
.secondary-bg-color,
#main-body,
#main-body .container {
    background-color: transparent;
}

/* Titulares en Space Grotesk, como la landing (.display). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.0625rem; }

p { color: var(--text-secondary); }

small, .small { color: var(--text-tertiary); }

hr { border-top: 1px solid var(--hairline); }

a {
    color: var(--accent-soft);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover,
a:focus {
    color: var(--text);
    text-decoration: underline;
}

code, kbd, pre, samp {
    font-family: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

code {
    background: rgba(255, 255, 255, 0.07);
    color: var(--accent-soft);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.4em;
}

pre {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
    padding: 1rem;
}

::selection {
    background: var(--accent-tint-strong);
    color: var(--text);
}

/* Scrollbar en tono oscuro (Chromium/Edge + Firefox). */
* {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.28); }


/* =====================================================================
   03. SUPERFICIES: GLASS, CARDS, PANELES
   ---------------------------------------------------------------------
   .hex-glass es la clase utilitaria; las reglas siguientes la aplican
   a los contenedores que Twenty-One ya genera (RF-02.3).
   ===================================================================== */

.hex-glass,
.card,
.panel,
.well,
#main-body .card,
#main-body .panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    color: var(--text-secondary);
}

/* Navegadores sin backdrop-filter: se compensa opacando el fondo para
   no perder contraste (RNF-02, Firefox antiguo). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hex-glass,
    .card,
    .panel,
    .well,
    .header .navbar,
    .modal-content,
    .dropdown-menu {
        background: rgba(18, 18, 26, 0.96);
    }
}

.card-header,
.panel-heading {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--hairline);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--text);
    font-weight: 600;
}

.card-footer,
.panel-footer {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--hairline);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    color: var(--text-tertiary);
}

.card-title,
.panel-title { color: var(--text); }

.card-body,
.panel-body { color: var(--text-secondary); }

/* Twenty-One usa .card-columns en la home; ajustamos separacion. */
.card-columns .card { margin-bottom: 1.25rem; }

.list-group { background: transparent; }

.list-group-item {
    background: transparent;
    border-color: var(--hairline);
    color: var(--text-secondary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.list-group-item.active {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--text);
}

.list-group-item.disabled,
.list-group-item:disabled {
    background: transparent;
    color: var(--text-disabled);
}


/* =====================================================================
   04. BOTONES
   ---------------------------------------------------------------------
   RF-03: minimalistas (sin degradados ni sombras duras), contraste AA,
   estados diferenciados y area minima de 44x44px.
   ===================================================================== */

.btn {
    background-image: none;          /* RF-03.1 sin degradados */
    border: 1px solid transparent;
    border-radius: var(--radius);
    box-shadow: none;                /* RF-03.1 sin sombras duras */
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    min-height: var(--tap-target);   /* RF-03.4 */
    padding: 0.6875rem 1.125rem;
    text-shadow: none;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn:hover { text-decoration: none; }

.btn:active { transform: translateY(1px); }

.btn.disabled,
.btn:disabled {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

/* Botones pequeños: se mantiene el area tactil aunque baje la fuente. */
.btn-sm,
.btn-group-sm > .btn {
    font-size: 0.8125rem;
    min-height: var(--tap-target);
    padding: 0.5rem 0.875rem;
}

.btn-lg,
.btn-group-lg > .btn {
    font-size: 1rem;
    min-height: 52px;
    padding: 0.875rem 1.5rem;
}

/* --- Primario: relleno de acento + texto blanco (5.9:1) ----------- */
.btn-primary,
.btn-success,
.hex-btn-primary {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

.btn-primary:hover,
.btn-success:hover,
.hex-btn-primary:hover,
.btn-primary:focus,
.btn-success:focus,
.hex-btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active,
.hex-btn-primary:active {
    background-color: var(--accent-active);
    border-color: var(--accent-active);
    color: #ffffff;
}

/* --- Secundario / default: borde fino sobre fondo translucido ----- */
.btn-default,
.btn-secondary,
.btn-light,
.hex-btn-ghost {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--hairline-strong);
    color: var(--text);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover,
.hex-btn-ghost:hover,
.btn-default:focus,
.btn-secondary:focus,
.btn-light:focus,
.hex-btn-ghost:focus {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--text);
}

.btn-default:active,
.btn-secondary:not(:disabled):not(.disabled):active,
.hex-btn-ghost:active {
    background-color: rgba(255, 255, 255, 0.16);
}

/* --- Outline ------------------------------------------------------ */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light {
    background-color: transparent;
    border-color: var(--accent);
    color: var(--accent-soft);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: var(--accent-tint-strong);
    border-color: var(--accent);
    color: var(--text);
}

.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

/* --- Semanticos --------------------------------------------------- */
.btn-danger {
    background-color: #b02a37;
    border-color: #b02a37;
    color: #ffffff;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #96222d;
    border-color: #96222d;
    color: #ffffff;
}

.btn-info {
    background-color: #1f6f8f;
    border-color: #1f6f8f;
    color: #ffffff;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #195b75;
    border-color: #195b75;
    color: #ffffff;
}

.btn-warning {
    background-color: #8a5a00;
    border-color: #8a5a00;
    color: #ffffff;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #714a00;
    border-color: #714a00;
    color: #ffffff;
}

/* --- Enlace-boton -------------------------------------------------- */
.btn-link {
    color: var(--accent-soft);
    min-height: var(--tap-target);
}
.btn-link:hover,
.btn-link:focus { color: var(--text); }

/* --- Grupos -------------------------------------------------------- */
.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-group > .btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

/* Botones que solo llevan icono: se etiquetan para lectores de
   pantalla y se les garantiza el area tactil (RF-03.5 / RF-09.5). */
.btn .fa,
.btn .fas,
.btn .far,
.btn .fal,
.btn .fad,
.btn .fab { vertical-align: -0.05em; }


/* =====================================================================
   05. FORMULARIOS Y CONTROLES
   ===================================================================== */

label,
.control-label {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.375rem;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text);
    font-size: 0.9375rem;
    min-height: var(--tap-target);
    padding: 0.625rem 0.875rem;
    transition: border-color var(--t-fast), background-color var(--t-fast);
}

.form-control:hover,
.custom-select:hover { border-color: rgba(255, 255, 255, 0.28); }

.form-control:focus,
.custom-select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    box-shadow: none;
    color: var(--text);
}

.form-control::placeholder { color: var(--text-tertiary); opacity: 1; }

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-disabled);
}

/* Las opciones nativas de <select> las pinta el SO: forzamos fondo
   oscuro para que no queden en blanco sobre blanco. */
select.form-control option,
.custom-select option {
    background-color: var(--bg-elevated);
    color: var(--text);
}

.custom-select {
    /* Flecha propia en tono claro (la de Bootstrap es oscura). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b0b8c4'%3E%3Cpath d='M8 11.5 3.5 7h9z'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    padding-right: 2.25rem;
}

.input-group-text {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline-strong);
    color: var(--text-secondary);
}

.form-text,
.help-block,
.field-help-text { color: var(--text-tertiary); }

.form-check-label,
.checkbox label,
.radio label { color: var(--text-secondary); font-weight: 400; }

/* Checkbox/radio nativos con el acento del tema. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
    height: 1.05rem;
    width: 1.05rem;
}

/* Validacion */
.has-error .form-control,
.form-control.is-invalid,
.is-invalid { border-color: var(--danger); }

.has-error .control-label,
.invalid-feedback,
.text-danger { color: var(--danger) !important; }

.valid-feedback,
.text-success { color: var(--success) !important; }


/* =====================================================================
   06. NAVBAR, TOPBAR Y CABECERA
   ---------------------------------------------------------------------
   RF-04. La cabecera es sticky y con efecto glass; en el listado de
   productos pasa a negro solido (ver seccion 06.d).
   ===================================================================== */

/* --- 06.a Topbar (barra de sesion) --------------------------------
   Igual que la cabecera: theme.min.css la pinta por id (#header .topbar,
   gris #404040), asi que hace falta el id para ganar la cascada. */
#header.header .topbar,
.header .topbar {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 0.8125rem;
}

/* La fila entera centrada verticalmente. header.tpl ya no usa .d-flex ni
   .input-group aqui: la fila es .hex-topbar-row. Se conserva .d-flex en el
   selector por si alguien restaura el markup original. */
.header .topbar .hex-topbar-row,
.header .topbar .d-flex {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    min-height: 48px;
}

.header .topbar .hex-topbar-left,
.header .topbar .hex-topbar-right {
    align-items: center;
    display: flex;
    gap: 0.375rem;
    min-width: 0;   /* deja que el nombre largo se recorte con ellipsis */
}

.header .topbar .btn,
.header .topbar .input-group-text,
.header .topbar .btn-active-client {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    min-height: var(--tap-target);   /* RF-03.4, igual que el resto */
    padding: 0.25rem 0.625rem;
}

.header .topbar .btn:hover,
.header .topbar .btn:focus {
    color: var(--text);
    text-decoration: none;
}

/* Boton de notificaciones */
.header .topbar #accountNotifications {
    align-items: center;
    border-radius: var(--radius-sm);
    display: inline-flex;
    gap: 0.4375rem;
}

.header .topbar #accountNotifications:hover { background: rgba(255, 255, 255, 0.06); }

/* Bloque "Conectado como" ------------------------------------------
   Etiqueta + pastilla con el nombre del cliente + botones de icono.

   Los selectores empiezan por #header.header porque theme.min.css pinta
   este bloque con "header.header .topbar .active-client .btn ..." (hasta
   cinco clases) e incluso le mete un border-bottom punteado al nombre:
   con una sola clase perderiamos la cascada y volveria el subrayado. */
#header.header .topbar .hex-session-label,
.header .topbar .hex-session-label {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: 0.8125rem;
    white-space: nowrap;
}

#header.header .topbar .hex-session-chip,
.header .topbar .hex-session-chip {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.375rem;
    line-height: 1.2;
    max-width: 26ch;
    min-height: 32px;
    min-width: 0;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    transition: background-color var(--t-fast), border-color var(--t-fast);
}

#header.header .topbar .hex-session-chip:hover,
#header.header .topbar .hex-session-chip:focus,
.header .topbar .hex-session-chip:hover,
.header .topbar .hex-session-chip:focus {
    background: rgba(255, 255, 255, 0.11);
    border-color: var(--hairline-strong);
    color: var(--text);
    text-decoration: none;
}

#header.header .topbar .hex-session-chip i,
.header .topbar .hex-session-chip i {
    color: var(--accent-soft);
    flex: 0 0 auto;
    font-size: 0.9375rem;
}

/* El nombre se recorta en vez de romper la fila. El border-bottom que
   theme.min.css pintaba aqui queda anulado de forma explicita. */
#header.header .topbar .hex-session-chip .hex-session-name,
.header .topbar .hex-session-chip .hex-session-name {
    border: 0;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botones de icono (cambiar de cuenta, volver al admin) */
#header.header .topbar .hex-topbar-icon-btn,
.header .topbar .hex-topbar-icon-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.8125rem;
    gap: 0.375rem;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    transition: background-color var(--t-fast), color var(--t-fast);
}

#header.header .topbar .hex-topbar-icon-btn:hover,
#header.header .topbar .hex-topbar-icon-btn:focus,
.header .topbar .hex-topbar-icon-btn:hover,
.header .topbar .hex-topbar-icon-btn:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--hairline);
    color: var(--text);
    text-decoration: none;
}

#header.header .topbar .hex-return-to-admin,
.header .topbar .hex-return-to-admin { color: var(--accent-soft); }

@media (max-width: 575.98px) {
    #header.header .topbar .hex-session-chip,
    .header .topbar .hex-session-chip { max-width: 14ch; }
}

/* --- 06.b Cabecera glass (RF-04.5) --------------------------------
   El selector incluye #header porque theme.min.css pinta la cabecera
   por id: una clase suelta perderia la cascada y quedaria en blanco. */
#header.header,
.header {
    background: rgba(7, 7, 10, 0.72);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--hairline-soft);  /* RF-04.4 */
    position: sticky;
    top: 0;
    z-index: 1030;
}

.header .navbar {
    background: transparent;
    border: none;
    padding: 0.5rem 0;
}

.header .navbar .container {
    align-items: center;
    display: flex;
}

/* Logo a la izquierda (RF-04.1) */
.navbar-brand {
    align-items: center;
    color: var(--text) !important;
    display: inline-flex;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-right: 1.5rem;
    min-height: var(--tap-target);   /* RF-03.4 tambien para el logo */
    padding: 0.25rem 0;
}

.navbar-brand .logo-img { max-height: 40px; width: auto; }

/* --- 06.c Menu principal ------------------------------------------ */
.main-navbar-wrapper {
    background: transparent;
    border-top: 1px solid var(--hairline-soft);
    padding: 0;
}

/* Menu centrado (RF-04.2). El TPL marca el bloque con .hex-nav-center. */
.main-navbar-wrapper .navbar-collapse { align-items: center; }

@media (min-width: 1200px) {
    .main-navbar-wrapper #nav.hex-nav-center {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- Items del menu -----------------------------------------------
   Mismo tratamiento que la navbar de la landing: pastilla de fondo al
   pasar por encima y pastilla tintada con aro para el item activo.

   Antes esto era un subrayado que aparecia de golpe en :hover y
   compartia regla con el estado activo, asi que al recorrer el menu
   parecia que el indicador de "donde estoy" iba saltando de un item a
   otro. Ahora hover y activo son dos cosas distintas: el fondo dice
   "estas encima" y el aro dice "estas aqui". */
#nav > li > a,
.navbar-nav > li > a,
.navbar-nav .nav-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: var(--tap-target);
    padding: 0.5rem 0.75rem !important;
    position: relative;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

#nav > li > a:hover,
#nav > li > a:focus,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    text-decoration: none;
}

#nav > li.active > a,
#nav > li > a.active {
    background: var(--accent-tint-strong);
    border-color: var(--accent-border);
    color: var(--text);
    font-weight: 600;
}

/* Separacion entre items, como el gap-1 de la landing. */
#nav > li { margin-right: 0.125rem; }

/* El caret de los dropdown no debe empujar el texto. */
#nav > li > a.dropdown-toggle::after {
    margin-left: 0.4375rem;
    opacity: 0.6;
    vertical-align: middle;
}

/* --- 06.d Acciones a la derecha (RF-04.3) ------------------------- */
.hex-nav-actions {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    margin-left: auto;
}

.hex-nav-actions .btn { white-space: nowrap; }

/* Los selectores llevan .header .hex-nav-actions delante a proposito:
   theme.min.css define el color de los enlaces de la cabecera con dos
   clases, y una clase suelta no ganaria la cascada. */

/* Boton secundario (ej. Discord) */
.header .hex-nav-actions .btn.hex-btn-nav-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    color: var(--text);
}
.header .hex-nav-actions .btn.hex-btn-nav-secondary:hover,
.header .hex-nav-actions .btn.hex-btn-nav-secondary:focus {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--text);
}

/* Boton primario con acento (ej. Login) */
.header .hex-nav-actions .btn.hex-btn-nav-primary {
    background: var(--accent-strong);
    border: 1px solid var(--accent-strong);
    color: #ffffff;
}
.header .hex-nav-actions .btn.hex-btn-nav-primary:hover,
.header .hex-nav-actions .btn.hex-btn-nav-primary:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

/* Menu de cuenta ("Hola, ...") -------------------------------------
   Antes colgaba de su propio <ul class="navbar-nav"> fuera de este
   grupo: heredaba el color apagado de los items del menu principal
   (--text-tertiary) y se alineaba con el menu, no con los botones, asi
   que quedaba mas bajo y translucido. Ahora es un item mas del grupo de
   acciones y se pinta como pastilla con el mismo alto que los botones. */
.hex-nav-actions .hex-nav-account {
    align-items: center;
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hex-nav-actions .hex-nav-account > li { margin: 0; position: relative; }

.header .hex-nav-actions .hex-nav-account > li > a,
.header .hex-nav-actions .hex-nav-account > li > a.nav-link {
    align-items: center;
    background: transparent;
    border: 1px solid var(--hairline);
    /* Mismo radio que .btn para que case con Discord / Area del Cliente. */
    border-radius: var(--radius);
    color: var(--text-secondary);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.25rem;
    line-height: 1.2;
    margin: 0;
    max-width: 22ch;
    min-height: var(--tap-target);
    overflow: hidden;
    padding: 0.5rem 0.75rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header .hex-nav-actions .hex-nav-account > li > a:hover,
.header .hex-nav-actions .hex-nav-account > li > a:focus,
.header .hex-nav-actions .hex-nav-account > li.show > a {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hairline-strong);
    color: var(--text);
    text-decoration: none;
}

/* El caret separado del texto y sin empujar la pastilla. */
.header .hex-nav-actions .hex-nav-account > li > a.dropdown-toggle::after {
    margin-left: 0.375rem;
    opacity: 0.6;
    vertical-align: middle;
}

/* El desplegable se ancla a la derecha de la pastilla para no salirse
   del viewport en pantallas justas. */
.hex-nav-actions .hex-nav-account .dropdown-menu {
    left: auto;
    min-width: 220px;
    right: 0;
}

@media (max-width: 1199.98px) {
    /* En movil el bloque de acciones se apila: la pastilla ocupa el ancho
       completo y el desplegable se alinea con ella. */
    .header .hex-nav-actions .hex-nav-account,
    .header .hex-nav-actions .hex-nav-account > li { width: 100%; }
    .header .hex-nav-actions .hex-nav-account > li > a {
        justify-content: center;
        max-width: none;
        width: 100%;
    }
}

/* --- Boton del carrito --------------------------------------------
   Heredaba el borde gris claro (#e5e5e5) y el radio de 3.75px del .btn
   del tema base, lo que le daba un aspecto anticuado. Se rehace como
   boton de icono cuadrado-redondeado, con el contador como pastilla
   superpuesta en la esquina. Los selectores llevan .header .toolbar
   delante para ganar a la regla base. */
.header .toolbar a.cart-btn,
.header .toolbar .cart-btn,
a.cart-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--tap-target);
    justify-content: center;
    line-height: 1;
    max-height: var(--tap-target);   /* el .btn base añadia padding */
    max-width: var(--tap-target);
    min-height: var(--tap-target);
    min-width: var(--tap-target);
    overflow: visible;
    padding: 0 !important;
    position: relative;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    width: var(--tap-target);
}

/* El <li> que lo envuelve no debe estirarlo ni desplazarlo. */
.header .toolbar .nav-item {
    align-items: center;
    display: flex;
}

.header .toolbar a.cart-btn:hover,
.header .toolbar a.cart-btn:focus,
a.cart-btn:hover,
a.cart-btn:focus {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.26);
    color: var(--text);
}

.header .toolbar a.cart-btn > i,
a.cart-btn > i {
    font-size: 1.0625rem;
    line-height: 1;
    margin: 0;
}

/* El contador se superpone a la esquina superior derecha.
   background y color van con !important porque el markup de WHMCS le
   pone la clase .badge-info, y los chips de estado (seccion 10) la
   declaran con !important: sin esto el contador saldria como una
   pastilla azul translucida en vez de solida. */
.header .toolbar .cart-btn .badge,
.cart-btn .badge,
#cartItemCount {
    align-items: center;
    background: var(--accent-strong) !important;
    border: 2px solid var(--bg);
    border-radius: var(--radius-pill);
    color: #ffffff !important;
    display: inline-flex;
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    height: 19px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    min-width: 19px;
    padding: 0 0.3em;
    position: absolute;
    right: -7px;
    text-align: center;
    top: -7px;
}

/* El contador se muestra siempre, incluso en 0: el JS del carrito lo
   actualiza con jQuery('#cartItemCount').html(...) y necesita que el
   elemento exista en el DOM. Ocultarlo con {if $cartitemcount} en el
   TPL romperia la actualizacion al añadir un producto sin recargar. */

/* El botón hamburguesa del móvil, a juego con el del carrito. */
.header .toolbar .nav-item > button.nav-link {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    color: var(--text-secondary);
    display: inline-flex;
    height: var(--tap-target);
    justify-content: center;
    padding: 0;
    width: var(--tap-target);
}

.header .toolbar .nav-item > button.nav-link:hover {
    background: rgba(255, 255, 255, 0.11);
    color: var(--text);
}

/* Buscador de la cabecera */
.header .search .form-control {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--hairline-strong);
}
.header .search .btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-right: none;
    color: var(--text-secondary);
}

/* --- 06.e RF-04.6: navbar negra solida en listado de productos ----
   La clase la aplica header.tpl sobre <body> cuando la plantilla en
   curso es la de productos del carrito. */
body.hex-page-products,
body.hex-page-products.primary-bg-color {
    background-color: var(--bg-deep);    /* RF-05.1 */
    background-image: none;
}

body.hex-page-products #header.header,
body.hex-page-products .header {
    background: #000000;                 /* RF-04.6 negro solido, sin glass */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--hairline-soft);
}

body.hex-page-products .header .topbar { background: #000000; }


/* =====================================================================
   07. BREADCRUMB
   ===================================================================== */

.master-breadcrumb {
    background: transparent;
    border-bottom: 1px solid var(--hairline-soft);
    padding: 0.25rem 0;
}

.breadcrumb {
    background: transparent;
    font-size: 0.8125rem;
    margin: 0;
    padding: 0.5rem 0;
}

.breadcrumb-item,
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item a:hover { color: var(--accent-soft); text-decoration: none; }
.breadcrumb-item.active { color: var(--text-secondary); font-weight: 500; }

/* Separador propio: el "/" por defecto queda muy marcado. */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-disabled);
    content: "\203A";              /* › */
    padding: 0 0.5rem;
}


/* =====================================================================
   08. SIDEBAR Y MENUS
   ===================================================================== */

.sidebar .card,
.sidebar .panel,
.card-sidebar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    margin-bottom: 1.25rem;
}

.sidebar .card-header,
.sidebar .panel-heading {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.sidebar .panel-title,
.card-sidebar .panel-title {
    font-size: 0.9375rem;
    margin: 0;
}

/* OJO: includes/sidebar.tpl emite DOS tipos de item y no se pueden
   tratar igual.

     a.list-group-item    -> item de menu. Lleva dentro
                             .sidebar-menu-item-wrapper con icono,
                             etiqueta e insignia. Se maqueta con flex.

     div.list-group-item  -> fila informativa (el panel "Informacion del
                             Ticket": Solicitante, Departamento, Estado…).
                             Aqui el contenido es texto suelto mas una
                             <span class="badge float-right">, es decir,
                             FLUJO NORMAL con un float.

   Poner `display: flex` a los dos (que es lo que se hacia antes) rompe
   el segundo: el float deja de tener efecto y cada trozo de texto pasa a
   ser un item flex sin separacion, asi que la etiqueta y el valor
   quedaban pegados ("SolicitanteRodrigo Nicolas"). */
/* LOS ITEMS DE MENU SON PASTILLAS, NO FILAS CON BORDE
   ---------------------------------------------------------------------
   Antes cada item era una fila a sangre con `border-color` en los cuatro
   lados, heredando el modelo de Bootstrap. Eso arrastraba un bug: el
   tema base pinta el item activo con

       .sidebar .list-group-item.active,
       .sidebar .list-group-item.active:hover,
       .sidebar .list-group-item.active:focus { border-color: #666; }

   y la regla propia solo redefinia `border-left-color`, asi que los otros
   tres lados se quedaban en **#666**. A eso se suma que Bootstrap le da
   `z-index: 2` al item activo y le devuelve el borde superior con
   `.list-group-item + .list-group-item.active { border-top-width: 1px }`.
   Resultado: una linea gris clara cruzando la lista por encima y por
   debajo del item seleccionado -- la raya que se veia debajo de «Activo»
   en el filtro de estado.

   Se podia parchear redefiniendo los cuatro `border-*-color`, pero el
   problema volveria con cualquier otra regla del tema base que toque
   bordes. Asi que los items pasan a no tener borde en absoluto: cada uno
   es una pastilla con su propio radio, separadas por margen, y el estado
   activo se marca con fondo tintado y una barra de acento dibujada con
   `::before`. Sin bordes no hay lineas que arreglar, y de paso es el
   patron que usan hoy las barras laterales de este tipo.

   La barra de acento en `::before` (y no en `border-left`) tiene un
   segundo motivo: al no ocupar sitio en el modelo de caja, todos los
   items comparten el mismo padding y las etiquetas quedan alineadas sin
   necesidad de reservar 3px transparentes en los que no estan activos.

   Los selectores llevan `#main-body` porque hay que ganarle a
   `.sidebar .list-group-item.active:hover`, que son cuatro clases. */
#main-body .sidebar .list-group,
#main-body .sidebar .list-group-flush { padding: 0.375rem; }

#main-body .sidebar .list-group-item {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    min-height: var(--tap-target);
    /* La barra de acento se recorta contra las esquinas redondeadas. */
    overflow: hidden;
    padding: 0.5rem 0.75rem;
    position: relative;
    transition: background-color var(--t-fast), color var(--t-fast);
}

/* Items de menu: los que si son flex. */
#main-body .sidebar a.list-group-item,
#main-body .sidebar .list-group-item:has(.sidebar-menu-item-wrapper) {
    align-items: center;
    display: flex;
    margin-bottom: 2px;
}

#main-body .sidebar a.list-group-item:last-child { margin-bottom: 0; }

#main-body .sidebar a.list-group-item:hover,
#main-body .sidebar a.list-group-item:focus {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    text-decoration: none;
}

/* Filas informativas: etiqueta a la izquierda, valor a la derecha.
   Se usa flex con space-between porque los trozos de texto sueltos se
   convierten en items flex anonimos y el `gap` los separa, den igual las
   etiquetas que use WHMCS por dentro (que las genera en PHP). */
#main-body .sidebar div.list-group-item:not(:has(.sidebar-menu-item-wrapper)) {
    align-items: baseline;
    /* Estas NO son pastillas: son pares etiqueta/valor que se leen como
       una tabla, asi que conservan el filete de separacion y el radio a
       cero. Sin el, con los items ya sin borde, quedaban todas pegadas. */
    border-bottom: 1px solid var(--hairline-soft);
    border-radius: 0;
    column-gap: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    justify-content: space-between;
    line-height: 1.45;
    margin-bottom: 0;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem;
    row-gap: 0.125rem;
}

#main-body .sidebar div.list-group-item:not(:has(.sidebar-menu-item-wrapper)):last-child {
    border-bottom: 0;
}

/* El texto suelto es la etiqueta: se apaga para que el dato destaque. */
.sidebar div.list-group-item:not(:has(.sidebar-menu-item-wrapper)) {
    color: var(--text-tertiary);
}

/* WHMCS envuelve el valor en un <span>. Cuando existe, se lleva a la
   derecha y se resalta. Si el valor viniera como texto suelto, el
   space-between del contenedor ya lo coloca igual. */
.sidebar div.list-group-item:not(:has(.sidebar-menu-item-wrapper)) > span:not(.badge) {
    color: var(--text);
    font-weight: 600;
    min-width: 0;
    text-align: right;
    /* Sin `margin-left: auto`: el space-between del contenedor ya lo
       manda a la derecha, y el margen automatico se comia el espacio
       libre dejando la insignia fuera de la tarjeta. */
}

/* La insignia venia con .float-right, que dentro de un contenedor flex
   no hace nada. Ademas en el markup va ANTES del texto, asi que sin
   `order` se quedaba a la izquierda pisando la etiqueta. */
.sidebar div.list-group-item .badge,
.sidebar div.list-group-item .float-right {
    float: none !important;
    margin-left: 0.5rem;
    order: 99;
}

/* Sin :has() (navegadores viejos) las filas informativas se quedan en
   flujo normal, que es justo como las diseño WHMCS: el float-right sigue
   funcionando y no hay colision. Degradan bien. */

/* Item activo. Se listan tambien :hover y :focus porque el tema base los
   redefine con esas mismas pseudoclases y, sin ellas, el gris #666 le
   volvia al pasar el raton por encima. */
#main-body .sidebar .list-group-item.active,
#main-body .sidebar .list-group-item.active:hover,
#main-body .sidebar .list-group-item.active:focus {
    background: var(--accent-tint);
    border-color: transparent;
    color: var(--text);
    font-weight: 600;
}

/* Barra de acento del item activo: `::before` en vez de `border-left`,
   para que no ocupe sitio en la caja y no desplace la etiqueta. El
   `overflow: hidden` del item la recorta contra la esquina redondeada. */
#main-body .sidebar .list-group-item.active::before {
    background: var(--accent);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

/* Insignias de la barra lateral.
   `theme.css` las deja en `background-color:#fff; color:#666; width:28px`
   -- pastilla blanca del tema claro -- y la regla propia solo cubria las
   de los items de menu (.sidebar-menu-item-badge). Las de las filas
   informativas y las de las cabeceras seguian saliendo en blanco. */
#main-body .sidebar .list-group-item .badge,
#main-body .sidebar .card-header .badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    min-width: 28px;
    width: auto;
}

.card-minimise,
.panel-minimise { color: var(--text-tertiary); }


/* =====================================================================
   09. TABLAS Y LISTADOS
   ===================================================================== */

.table,
.table-striped > tbody > tr,
table { color: var(--text-secondary); }

.table thead th {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--hairline);
    border-top: none;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table thead th {
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.table td,
.table th {
    border-top: 1px solid var(--hairline-soft);
    padding: 0.8125rem 1rem;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.025); }

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--hairline); }

/* ---------------------------------------------------------------------
   09.b DataTables (listas del area de clientes)
   ---------------------------------------------------------------------
   Es la pieza que seguia viendose "vanilla": el wrapper, la cabecera de
   la tabla, la fila de "Sin Resultados", el buscador y el selector de
   entradas venian en blanco del CSS base. Se cubre todo aqui.

   Los selectores llevan #main-body delante porque las reglas del tema
   base combinan varias clases y una sola no ganaria la cascada.
   --------------------------------------------------------------------- */

#main-body .dataTables_wrapper {
    background: transparent;
    color: var(--text-secondary);
}

/* Barra superior generada por el dom '<"listtable"fit>pl' */
#main-body .dataTables_wrapper .listtable {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

#main-body .dataTables_wrapper .dataTables_info,
#main-body .dataTables_wrapper .dataTables_length,
#main-body .dataTables_wrapper .dataTables_length label,
#main-body .dataTables_wrapper .dataTables_filter,
#main-body .dataTables_wrapper .dataTables_filter label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin: 0;
}

/* Buscador y selector de entradas */
#main-body .dataTables_wrapper .dataTables_filter input,
#main-body .dataTables_wrapper .dataTables_length select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text);
    margin-left: 0.5rem;
    min-height: var(--tap-target);
    padding: 0.375rem 0.75rem;
}

#main-body .dataTables_wrapper .dataTables_filter input:focus,
#main-body .dataTables_wrapper .dataTables_length select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    outline: none;
}

#main-body .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--text-tertiary); }
#main-body .dataTables_wrapper .dataTables_length select option {
    background-color: var(--bg-elevated);
    color: var(--text);
}

/* La tabla en si.
   ---------------------------------------------------------------------
   theme.min.css la enmarca con `.table-list { border: 1px solid #ddd;
   border-radius: 4px }`. Sobre fondo negro ese #ddd es un marco casi
   blanco alrededor de la lista de servicios. Aqui se baja al filete mas
   tenue del sistema y el radio se iguala al de las esquinas de la
   cabecera (que ya usan --radius mas abajo), que con 4px no encajaban. */
#main-body table.dataTable,
#main-body .table-list {
    background: transparent;
    border: 1px solid var(--hairline-soft);
    border-collapse: separate;
    border-radius: var(--radius);
    border-spacing: 0;
    color: var(--text-secondary);
    width: 100%;
}

#main-body table.dataTable thead th,
#main-body table.dataTable thead td,
#main-body .table-list thead th {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--hairline);
    border-top: none;
    color: var(--text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.8125rem 1rem;
    text-transform: uppercase;
}

#main-body table.dataTable thead th:first-child { border-radius: var(--radius) 0 0 0; }
#main-body table.dataTable thead th:last-child  { border-radius: 0 var(--radius) 0 0; }

#main-body table.dataTable tbody td,
#main-body .table-list tbody td {
    background: transparent;
    border-top: 1px solid var(--hairline-soft);
    color: var(--text-secondary);
    padding: 0.8125rem 1rem;
    vertical-align: middle;
}

#main-body table.dataTable tbody tr { background: transparent; }

#main-body table.dataTable tbody tr:hover td {
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
}

/* Las filas son clickables (onclick en el <tr>). */
#main-body table.dataTable.table-list tbody tr { cursor: pointer; }

#main-body table.dataTable tbody td strong { color: var(--text); }

/* Fila de "Sin Resultados": era una banda blanca. */
#main-body table.dataTable tbody td.dataTables_empty,
#main-body .dataTables_wrapper .dataTables_empty {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 2.25rem 1rem;
    text-align: center;
}

/* Flechas de ordenacion: las del base son imagenes claras. */
#main-body table.dataTable thead .sorting,
#main-body table.dataTable thead .sorting_asc,
#main-body table.dataTable thead .sorting_desc {
    background-image: none;
    cursor: pointer;
    position: relative;
}

/* Se dibujan con mascara SVG, no con el glifo de Font Awesome: el glifo
   obliga a acertar el nombre de la familia ("Font Awesome 5 Pro" / "5
   Free" / "6 Pro") y cuando no coincide salen recuadros vacios, que es
   lo que se veia entre PRODUCTO/SERVICIO, LISTA DE PRECIOS, etc.
   Las variables --hex-icon-* las define hex-icons.css. */
#main-body table.dataTable thead .sorting::after,
#main-body table.dataTable thead .sorting_asc::after,
#main-body table.dataTable thead .sorting_desc::after {
    background-color: currentColor;
    color: var(--text-disabled);
    content: "";
    display: inline-block;
    height: 0.875em;
    margin-left: 0.5rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: 0.9;
    vertical-align: -0.15em;
    width: 0.875em;
}

#main-body table.dataTable thead .sorting::after {
    -webkit-mask-image: var(--hex-icon-sort);
    mask-image: var(--hex-icon-sort);
}

#main-body table.dataTable thead .sorting_asc::after {
    color: var(--accent-soft);
    -webkit-mask-image: var(--hex-icon-sort-asc);
    mask-image: var(--hex-icon-sort-asc);
}

#main-body table.dataTable thead .sorting_desc::after {
    color: var(--accent-soft);
    -webkit-mask-image: var(--hex-icon-sort-desc);
    mask-image: var(--hex-icon-sort-desc);
}

/* ---------------------------------------------------------------------
   09.c Paginacion (DataTables y Bootstrap)
   ---------------------------------------------------------------------
   Los "Anterior / Siguiente" del base son dos cajas blancas pegadas con
   borde gris. Aqui pasan a botones sueltos con el mismo lenguaje que el
   resto: fondo de cristal, borde fino y radio de 12px.
   --------------------------------------------------------------------- */

#main-body .dataTables_wrapper .dataTables_paginate {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding: 0;
}

#main-body .dataTables_wrapper .dataTables_paginate .paginate_button,
#main-body .dataTables_wrapper .dataTables_paginate a {
    align-items: center;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--hairline-strong) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    justify-content: center;
    margin: 0 !important;
    min-height: var(--tap-target);
    min-width: var(--tap-target);
    padding: 0.5rem 0.875rem !important;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

#main-body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: var(--text) !important;
}

#main-body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    color: #ffffff !important;
}

/* Deshabilitado: WCAG exime a los controles inactivos, pero "Anterior"
   con --text-disabled se quedaba en 4.2:1 y no se leia. Con --text-muted
   sube a 5.5:1 y se sigue distinguiendo del activo por el fondo plano y
   el borde mas tenue. */
#main-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#main-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: var(--hairline) !important;
    color: var(--text-muted) !important;
    cursor: default;
}

/* Paginacion de Bootstrap (otras listas del area de clientes). */
.pagination {
    display: flex;
    gap: 0.375rem;
}

.pagination .page-link {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius) !important;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.8125rem;
    font-weight: 600;
    justify-content: center;
    min-height: var(--tap-target);
    min-width: var(--tap-target);
}

.pagination .page-link:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.26);
    color: var(--text);
}

.pagination .page-item.active .page-link {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

.pagination .page-item.disabled .page-link {
    background: transparent;
    border-color: var(--hairline);
    color: var(--text-muted);
}


/* =====================================================================
   10. ALERTAS, BADGES Y ESTADOS
   ---------------------------------------------------------------------
   RF-09.4: color + icono + texto. Los iconos se inyectan con ::before
   para que ningun mensaje dependa solo del color.
   ===================================================================== */

.alert {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-left-width: 3px;
    border-radius: var(--radius);
    color: var(--text-secondary);
    padding: 0.875rem 1rem;
}

.alert .alert-link { color: var(--text); text-decoration: underline; }

.alert-success { background: var(--success-tint); border-left-color: var(--success); color: var(--text); }
.alert-info    { background: var(--info-tint);    border-left-color: var(--info);    color: var(--text); }
.alert-warning { background: var(--warning-tint); border-left-color: var(--warning); color: var(--text); }
.alert-danger  { background: var(--danger-tint);  border-left-color: var(--danger);  color: var(--text); }

/* Icono automatico salvo que la alerta ya traiga uno en el markup.
   ---------------------------------------------------------------------
   Antes se dibujaba con el glifo de Font Awesome:

       .alert-warning::before { content: "\f071"; font-family: "Font Awesome 5 Pro" }

   Eso obliga a acertar con el nombre exacto de la familia, que cambia
   entre versiones de WHMCS (5 Pro / 5 Free / 6 Pro). Cuando no coincide
   el navegador no dibuja nada y la alerta se queda sin icono — que es lo
   que pasaba en viewticket (aviso) y en el carrito (exito).

   Ahora se usa la misma tecnica que hex-icons.css: un SVG de Lucide como
   mascara. No depende de ninguna fuente y hereda el color con
   currentColor. Las variables --hex-icon-* las define hex-icons.css. */
.alert::before {
    background-color: currentColor;
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    height: 1.125em;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    margin-right: 0.5rem;
    vertical-align: -0.2em;
    width: 1.125em;
}

.alert-success::before {
    color: var(--success);
    -webkit-mask-image: var(--hex-icon-success);
    mask-image: var(--hex-icon-success);
}
.alert-info::before {
    color: var(--info);
    -webkit-mask-image: var(--hex-icon-info);
    mask-image: var(--hex-icon-info);
}
.alert-warning::before {
    color: var(--warning);
    -webkit-mask-image: var(--hex-icon-warning);
    mask-image: var(--hex-icon-warning);
}
.alert-danger::before {
    color: var(--danger);
    -webkit-mask-image: var(--hex-icon-danger);
    mask-image: var(--hex-icon-danger);
}

/* Una alerta sin tipo (solo .alert) no tiene mascara: sin esto quedaria
   un cuadrado relleno de currentColor. */
.alert:not(.alert-success):not(.alert-info):not(.alert-warning):not(.alert-danger)::before {
    display: none;
}

/* Cuando la alerta abre con un titulo (alert.tpl con `title`), el icono
   es inline y el <h2> de bloque lo empuja a su propia linea. Flotandolo
   se queda junto al titulo. */
.alert:has(> h2)::before {
    float: left;
    margin-top: 0.125em;
}

/* Si el TPL ya inserta un <i>, evitamos el icono duplicado. */
.alert > i:first-child ~ *,
.alert:has(> i:first-child)::before { content: none; }

.badge {
    border-radius: var(--radius-pill);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.35em 0.65em;
}

.badge-primary { background: var(--accent-strong); color: #ffffff; }

/* Las variantes semanticas de .badge y .label se definen junto a los
   chips de estado, justo debajo, para no repetir los mismos colores en
   dos sitios. */

/* ---------------------------------------------------------------------
   Chips de estado (servicios, facturas, tickets, dominios)
   ---------------------------------------------------------------------
   El tema base los pinta como pastillas de color saturado con texto
   blanco encima: "Pagada" sobre verde daba 2,5:1 y "Impaga" sobre rojo
   3,9:1, ambos por debajo de AA. Aqui pasan a fondo tintado y texto del
   propio color, que es como se ven el resto de estados del tema y sube
   el contraste por encima de 4,5:1 en todos los casos.

   Se listan los estados de WHMCS uno a uno en vez de usar [class*=] para
   no capturar por accidente clases ajenas de modulos de terceros.

   OJO CON LA DOBLE CLASE  (bug del panel de tickets recientes)
   Estos selectores estaban escritos como `.status.status-closed`, es
   decir, exigiendo las DOS clases. Los chips que salen de una plantilla
   del tema si las llevan (`<span class="label status status-closed">`,
   ver supportticketslist.tpl), pero los que genera WHMCS en PHP para los
   paneles del dashboard llevan solo una:

       <span class="label status-closed">Cerrado</span>

   Al no casar, se quedaban con el color de `theme.css`
   (`.status-closed { background-color: #87939f }`): una pastilla gris
   claro con texto blanco, del tema claro original, en medio del panel
   oscuro de «Tickets recientes».

   Por eso los selectores pasan a ser de UNA sola clase (`.status-closed`
   en vez de `.status.status-closed`): asi cubren las dos formas de markup.
   Es seguro hacerlo, porque son exactamente las clases a las que
   `theme.css` ya les pinta un fondo de color: cualquier elemento que case
   con ellas ya lo estaba dibujando el tema base como pastilla de estado.
   --------------------------------------------------------------------- */

.status,
.label,
span.status,
td .status {
    border-radius: var(--radius-pill);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.25em 0.7em;
}

/* --- Verde: todo va bien ------------------------------------------- */
.status-active,
.status-paid,
.status-completed,
.status-delivered,
.status-answered,
.label-success,
.badge-success {
    background: var(--success-tint) !important;
    color: var(--success) !important;
}

/* --- Ambar: requiere atencion -------------------------------------- */
.status-pending,
.status-unpaid,
.status-draft,
.status-open,
.status-onhold,
.status-customer-reply,
.status-pending-transfer,
.status-pending-registration,
.label-warning,
.badge-warning {
    background: var(--warning-tint) !important;
    color: var(--warning) !important;
}

/* --- Rojo: problema o fin de vida ---------------------------------- */
.status-cancelled,
.status-terminated,
.status-suspended,
.status-overdue,
.status-expired,
.status-fraud,
.status-inprogress,
.label-danger,
.badge-danger {
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
}

/* --- Neutro: informativo o cerrado --------------------------------- */
.status-closed,
.status-refunded,
.status-collections,
.status-inactive,
.status-transferred-away,
.label-default,
.badge-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
}

.status-info,
.label-info,
.badge-info { background: var(--info-tint) !important; color: var(--info) !important; }

.progress { background: rgba(255, 255, 255, 0.07); border-radius: var(--radius-pill); }
.progress-bar { background-color: var(--accent-strong); }


/* =====================================================================
   11. HOMEPAGE: ISLA DE ACCESOS
   ---------------------------------------------------------------------
   RF-07. Bloque insertado al principio de homepage.tpl. Cada tarjeta es
   un <a> que envuelve todo el contenido (RF-07.4), de modo que toda la
   superficie es clickeable y accesible por teclado en un solo tab-stop.
   ===================================================================== */

.hex-access-island {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    margin: 1.5rem 0 2rem;
    padding: 1.5rem;
}

.hex-access-island__title {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 0 0.25rem;
}

.hex-access-island__subtitle {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin: 0 0 1.25rem;
}

/* Grid responsive: 4 col desktop / 3 col laptop / 2 tablet / 1 movil
   (RF-07.5, RF-08.1). */
.hex-access-grid {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 576px)  { .hex-access-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* auto-fit y no `repeat(6, ...)`: el numero de accesos se edita en
   includes/access-island.tpl ($hexAccessItems), y con un numero fijo de
   columnas quitar uno dejaba un hueco al final de la fila. Asi las
   tarjetas se reparten el ancho sean cinco, seis o las que haya. */
@media (min-width: 992px)  { .hex-access-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

.hex-access-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    justify-content: center;
    min-height: 116px;
    padding: 1.125rem 0.75rem;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t), border-color var(--t), transform var(--t);
}

.hex-access-card:hover,
.hex-access-card:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    color: var(--text);
    text-decoration: none;
    transform: translateY(-2px);
}

.hex-access-card__icon {
    align-items: center;
    color: var(--accent-soft);
    display: flex;
    font-size: 1.5rem;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    transition: color var(--t);
    width: 2.25rem;
}

.hex-access-card:hover .hex-access-card__icon { color: var(--text); }

.hex-access-card__label {
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.hex-access-card__badge {
    background: var(--accent-strong);
    border-radius: var(--radius-pill);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
}


/* =====================================================================
   12. AREA DE CLIENTE
   ===================================================================== */

/* Botonera de iconos de la home de Twenty-One (.action-icon-btns). */
.action-icon-btns > div > a {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    min-height: 120px;
    padding: 1.125rem 0.75rem;
    text-align: center;
    transition: background-color var(--t), border-color var(--t), transform var(--t);
}

.action-icon-btns > div > a:hover,
.action-icon-btns > div > a:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    color: var(--text);
    text-decoration: none;
    transform: translateY(-2px);
}

.action-icon-btns .ico-container {
    color: var(--accent-soft);
    font-size: 1.5rem;
    margin: 0;
}

.action-icon-btns > div > a:hover .ico-container { color: var(--text); }

/* ---------------------------------------------------------------------
   12.a Tiles de estadisticas (clientareahome.tpl)
   ---------------------------------------------------------------------
   theme.min.css los pinta de #f8f8f8 con una barra de color abajo. Aqui
   pasan a ser cuatro cards planas: cifra grande en la tipografia de
   titulares, etiqueta pequeña en mayusculas y una linea de acento que
   solo se enciende al pasar por encima.

   Los selectores llevan #main-body delante a proposito: las reglas del
   tema base usan dos clases y una clase suelta no ganaria la cascada.
   --------------------------------------------------------------------- */

#main-body .tiles .row { gap: 0.75rem 0; }

#main-body .tiles .tile,
#main-body .tiles a.tile {
    align-items: flex-start;
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    justify-content: center;
    margin: 0 0.375rem;
    min-height: 104px;
    overflow: hidden;
    padding: 1.125rem 1.25rem;
    position: relative;
    text-decoration: none;
    transition: background-color var(--t), border-color var(--t);
}

#main-body .tiles .tile:hover,
#main-body .tiles .tile:focus-visible {
    background: var(--glass-bg-strong);
    border-color: var(--hairline-strong);
    color: var(--text-tertiary);
    text-decoration: none;
}

/* El icono pasa a marca de agua en la esquina, sin robar protagonismo. */
#main-body .tiles .tile > i {
    color: var(--text);
    font-size: 1.25rem;
    opacity: 0.16;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: opacity var(--t), color var(--t);
}

#main-body .tiles .tile:hover > i { color: var(--accent-soft); opacity: 0.5; }

#main-body .tiles .tile .stat {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

#main-body .tiles .tile .title {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* La barra de color inferior se convierte en subrayado de acento. */
#main-body .tiles .tile .highlight {
    background: var(--accent) !important;
    bottom: 0;
    height: 2px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity var(--t);
}

#main-body .tiles .tile:hover .highlight { opacity: 1; }


/* ---------------------------------------------------------------------
   12.b Paneles del dashboard (.client-home-cards)
   ---------------------------------------------------------------------
   Eran los recuadros blancos del area de clientes. El tema base tiñe la
   cabecera de blanco y le pone un borde de color por card-accent-*;
   aqui la cabecera es transparente con una linea fina debajo y el color
   del acento queda como un punto discreto junto al titulo.
   --------------------------------------------------------------------- */

#main-body .client-home-cards .card,
#main-body .active-products-services .card,
#main-body .client-home-panels .card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

#main-body .client-home-cards .card .card-header,
#main-body .primary-content .card > .card-header,
#main-body .card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    color: var(--text);
    padding: 0.875rem 1.125rem;
}

#main-body .card > .card-header .card-title,
#main-body .card > .card-header h3 {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

#main-body .card > .card-header .card-title > i:first-child {
    color: var(--accent-soft);
    margin-right: 0.25rem;
}

#main-body .client-home-cards .card .card-body,
#main-body .primary-content .card > .card-body {
    color: var(--text-secondary);
    padding: 1.125rem;
}

#main-body .client-home-cards .card .card-footer,
#main-body .primary-content .card > .card-footer {
    background: transparent;
    border-top: 1px solid var(--hairline);
    color: var(--text-muted);
    font-size: 0.8125rem;
    padding: 0.625rem 1.125rem;
}

/* Una card-footer vacia no debe dejar una franja suelta. */
#main-body .card > .card-footer:empty { display: none; }

/* Los bordes de color de card-accent-* se sustituyen por el hairline. */
#main-body .card[class*="card-accent-"] {
    border-color: rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Botones pequeños de la cabecera de panel (bg-color-*). */
#main-body .card-header .btn[class*="bg-color-"],
#main-body .card-header .btn-xs {
    align-items: center;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    color: var(--text) !important;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.375rem;
    min-height: var(--tap-target);   /* RF-03.4 */
    padding: 0.25rem 0.875rem;
}

/* `.hex-panel__action` va en la lista porque el markup nuevo ya no le
   cuelga la clase `bg-color-<color>` del panel: ese color venia del tema
   claro y aqui el boton de la cabecera es siempre neutro con hover de
   acento. Ver clientareahome.tpl. */
#main-body .card-header .btn[class*="bg-color-"]:hover,
#main-body .card-header .btn[class*="bg-color-"]:focus-visible,
#main-body .hex-panel__action:hover,
#main-body .hex-panel__action:focus-visible {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong);
    color: #ffffff !important;
    text-decoration: none;
}

/* Listas dentro de los paneles (anuncios, tickets recientes, accesos...).
   ---------------------------------------------------------------------
   ESTA REGLA LLEVABA `display:flex; flex-direction:column` Y ERA LA CAUSA
   DEL LISTADO DE TICKETS ROTO.

   El contenido de estos items no siempre sale de una plantilla: en los
   paneles del dashboard lo genera WHMCS en PHP como HTML de flujo normal.
   El de «Tickets recientes», por ejemplo, es tal cual:

       <span class="label status-closed pull-right">Cerrado</span>
       #VNL-141200 - Pago transferencia<br>
       <small>Ultima actualizacion: ...</small>

   Al convertir el item en contenedor flex pasaban tres cosas a la vez:
     1. el `pull-right` (y cualquier float) se ignora -- los hijos de un
        flex container no flotan --, asi que el chip dejaba de ir a la
        derecha y se colocaba ARRIBA, en su orden del DOM;
     2. con `flex-direction: column` y el `align-items: stretch` que va
        por defecto, ese chip se estiraba a TODO el ancho del panel: de
        ahi las barras grises con «Cerrado» centrado;
     3. los nodos de texto suelto y los `<br>` se convierten en items
        anonimos, que con `justify-content: center` se solapaban entre si
        cuando el panel se queda mas corto que su contenido.

   La solucion es no tocar el modo de formato: flujo en bloque, que es
   para lo que ese HTML esta escrito. El ritmo vertical se consigue con
   padding, y el area pulsable minima con `min-height` + `line-height`,
   sin necesidad de centrar con flexbox.

   Los items que SI salen de una plantilla del tema y necesitan flex lo
   piden por su cuenta (`.hex-panel__item`, § 12.e). */
#main-body .client-home-cards .card .list-group-item,
#main-body .primary-content .card .list-group-item {
    background: transparent;
    border-color: var(--hairline-soft);
    border-left: none;
    border-right: none;
    color: var(--text-secondary);
    /* flow-root y no block: crea un contexto de formato propio, asi el
       chip flotante de la derecha queda contenido dentro del item y no se
       derrama sobre el siguiente cuando el asunto del ticket es corto.
       En un navegador que no conozca el valor la declaracion se descarta
       y el item se queda con el `display:block` de Bootstrap, que es el
       comportamiento anterior: se degrada solo. */
    display: flow-root;
    min-height: var(--tap-target);   /* RF-03.4 */
    padding: 0.75rem 1.125rem;
}

/* El chip de estado vuelve a la derecha, alineado con la primera linea.
   `pull-right` es de Bootstrap 3 y no existe en el 4, asi que el float lo
   pone esta regla: WHMCS sigue emitiendo esa clase en el HTML de los
   paneles. */
#main-body .client-home-cards .card .list-group-item > .label,
#main-body .client-home-cards .card .list-group-item > .status,
#main-body .primary-content .card .list-group-item > .label,
#main-body .primary-content .card .list-group-item > .status {
    float: right;
    margin: 0 0 0.25rem 0.75rem;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Segunda linea de los items generados por WHMCS (fecha de ultima
   respuesta, importes...). En el HTML llega como <small> detras de un
   <br>, asi que se le da su propio bloque en vez de dejarlo pegado. */
#main-body .client-home-cards .card .list-group-item > small,
#main-body .primary-content .card .list-group-item > small {
    color: var(--text-muted);
    display: block;
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

#main-body .card .list-group-item-action:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

#main-body .card .list-group-item small { color: var(--text-muted); }

/* ---------------------------------------------------------------------
   12.c Sidebar del area de clientes
   --------------------------------------------------------------------- */

#main-body .sidebar .card-sidebar .card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
}

#main-body .sidebar .sidebar-menu-item-wrapper {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    width: 100%;
}

/* Columna de icono de ancho fijo: sin esto cada glifo mide lo suyo y
   las etiquetas del menu arrancan a alturas y sangrados distintos. El
   ancho es el mismo que .fa-fw (1.25em) para que un item con icono y
   otro sin el se lean como una sola columna. */
#main-body .sidebar .sidebar-menu-item-icon-wrapper {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    flex: 0 0 1.25rem;
    justify-content: center;
    line-height: 1;
    width: 1.25rem;
}

#main-body .sidebar .sidebar-menu-item-icon-wrapper > i {
    font-size: 0.9375rem;
    text-align: center;
    width: 1.25rem;
}

/* Los items sin icono se alinean con los que si lo tienen. */
#main-body .sidebar .sidebar-menu-item-wrapper > .sidebar-menu-item-label:first-child {
    padding-left: 1.875rem;   /* 1.25rem de icono + 0.625rem de gap */
}

#main-body .sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper,
#main-body .sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper {
    color: var(--accent-soft);
}

#main-body .sidebar .sidebar-menu-item-label {
    flex: 1 1 auto;
    font-size: 0.875rem;
    min-width: 0;
}

#main-body .sidebar .sidebar-menu-item-badge { flex: 0 0 auto; }

#main-body .sidebar .sidebar-menu-item-badge .badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

#main-body .sidebar .list-group-item.active .badge {
    background: var(--accent-tint-strong);
    color: var(--accent-soft);
}

/* Cuerpo de los paneles del sidebar (informacion del ticket,
   destinatarios CC, notas...).
   ---------------------------------------------------------------------
   Estos bloques no salen de una plantilla: los genera WHMCS en PHP como
   HTML suelto (`$item->getBodyHtml()`), asi que el markup varia de un
   panel a otro. Por eso las reglas van sobre el contenedor y no sobre
   clases concretas: se normaliza el ritmo vertical, se alinean los pares
   etiqueta/valor y se impide que los grupos de formulario se salgan de
   la tarjeta (el input de "Añadir correo" desbordaba por la derecha
   porque .input-group no encoge sin un min-width:0 explicito). */

#main-body .sidebar .card-sidebar .card-body {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 0.875rem 1rem;
}

#main-body .sidebar .card-sidebar .card-body > *:last-child { margin-bottom: 0; }

/* Pares etiqueta / valor: la etiqueta a la izquierda, el dato a la
   derecha, y si no caben en una linea el dato baja alineado a la
   izquierda en lugar de quedar colgando. */
#main-body .sidebar .card-sidebar .card-body .row {
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-left: 0;
    margin-right: 0;
}

/* Se conservan los canales (gutters) de Bootstrap reducidos, NO a cero:
   con `padding: 0` las dos columnas quedaban pegadas y la etiqueta se
   comia el valor. Y nada de `word-break: break-word`, que partia por la
   mitad palabras como "Responder" en los botones estrechos del panel. */
#main-body .sidebar .card-sidebar .card-body .row > [class*="col-"] {
    min-width: 0;
    overflow-wrap: break-word;   /* solo parte lo que no cabe de ninguna forma */
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

#main-body .sidebar .card-sidebar .card-body .row > [class*="col-"]:first-child { padding-left: 0; }
#main-body .sidebar .card-sidebar .card-body .row > [class*="col-"]:last-child  { padding-right: 0; }

#main-body .sidebar .card-sidebar .card-body label,
#main-body .sidebar .card-sidebar .card-body strong,
#main-body .sidebar .card-sidebar .card-body dt {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.125rem;
    text-transform: uppercase;
}

#main-body .sidebar .card-sidebar .card-body dd {
    color: var(--text);
    margin-bottom: 0.625rem;
}

/* Formularios dentro del sidebar: ancho completo y sin desbordes. */
#main-body .sidebar .card-sidebar .card-body .input-group {
    flex-wrap: nowrap;
    width: 100%;
}

#main-body .sidebar .card-sidebar .card-body .input-group > .form-control {
    min-width: 0;               /* sin esto el input no encoge y desborda */
}

#main-body .sidebar .card-sidebar .card-body .input-group > .input-group-append > .btn,
#main-body .sidebar .card-sidebar .card-body .input-group > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

#main-body .sidebar .card-sidebar .card-body .form-control,
#main-body .sidebar .card-sidebar .card-body .btn { font-size: 0.8125rem; }

/* Botones de accion del panel (Responder / Cerrar ticket).
   ---------------------------------------------------------------------
   WHMCS los mete en dos columnas dentro del cuerpo del panel. En una
   barra lateral estrecha cada boton se queda con ~90px y la etiqueta se
   partia por la mitad ("Respond / er").

   Se apilan a ancho completo: en una columna de sidebar es lo que toca,
   y ademas el area pulsable pasa a ser comoda. */
#main-body .sidebar .card-sidebar .card-body .btn {
    align-items: center;
    display: inline-flex;
    gap: 0.375rem;
    justify-content: center;
    min-height: var(--tap-target);
    overflow-wrap: normal;
    white-space: normal;
    word-break: normal;
}

#main-body .sidebar .card-sidebar .card-body .row > [class*="col-"] > .btn,
#main-body .sidebar .card-sidebar .card-body .btn-block { width: 100%; }

/* Si los botones vienen en una fila de columnas, la fila se apila. */
#main-body .sidebar .card-sidebar .card-body .row:has(> [class*="col-"] > .btn) {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr);
}

#main-body .sidebar .card-sidebar .card-body .row:has(> [class*="col-"] > .btn) > [class*="col-"] {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
}

/* Botones agrupados (.btn-group) dentro del panel: tambien apilados. */
#main-body .sidebar .card-sidebar .card-body .btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

#main-body .sidebar .card-sidebar .card-body .btn-group > .btn {
    border-radius: var(--radius-sm) !important;
    width: 100%;
}

/* Filas tipo "valor + boton de quitar" (destinatarios CC): el icono a la
   derecha y el texto ocupando el resto, en vez de un float que dejaba el
   icono suelto en su propia linea. */
#main-body .sidebar .card-sidebar .card-body .row > [class*="col-"] > a > i,
#main-body .sidebar .card-sidebar .card-body a > i.fa-minus-circle {
    color: var(--danger);
    vertical-align: middle;
}

#main-body .sidebar .card-sidebar .card-body .row:empty { display: none; }

/* ---------------------------------------------------------------------
   12.c-bis Ficha del servicio (clientareaproductdetails)
   ---------------------------------------------------------------------
   theme.min.css pinta este bloque con:

       div.product-details div.product-icon { background-color: #efefef }
       .product-status-active               { background-color: #46A546 }
       .product-status-text                 { color: #fff }

   Es decir, un recuadro gris claro con el nombre del producto en blanco
   encima (ilegible sobre el tema oscuro) y una franja de color a todo lo
   ancho debajo. Aqui se desmonta: la pastilla del icono usa el tinte de
   acento, el nombre recupera el color del texto y el estado pasa a ser un
   chip con un punto de color, que ocupa lo que mide y no una banda.

   Los selectores llevan #main-body delante porque las reglas del tema
   base usan `div.product-details div.product-icon` (0,2,2).
   --------------------------------------------------------------------- */

#main-body .hex-service-hero {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    display: flex;
    gap: 1rem;
    padding: 1.125rem;
}

/* Anula el color de fondo que theme.min.css asigna por estado: el estado
   ya se comunica con el chip, no tiñendo la tarjeta entera. */
#main-body .hex-service-hero.product-status-pending,
#main-body .hex-service-hero.product-status-active,
#main-body .hex-service-hero.product-status-suspended,
#main-body .hex-service-hero.product-status-terminated,
#main-body .hex-service-hero.product-status-cancelled,
#main-body .hex-service-hero.product-status-fraud {
    background-color: rgba(255, 255, 255, 0.03);
}

#main-body .hex-service-hero .hex-service-icon {
    align-items: center;
    background: var(--accent-tint);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    color: var(--accent-soft);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.5rem;
    height: 64px;
    justify-content: center;
    width: 64px;
}

#main-body .hex-service-hero .hex-service-titles { min-width: 0; }

#main-body .hex-service-hero .hex-service-name {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    overflow-wrap: anywhere;
}

#main-body .hex-service-hero .hex-service-group {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin: 0.125rem 0 0.5rem;
}

/* Chip de estado. El color lo hereda del contenedor
   .product-status-<estado> mediante --hex-status. */
#main-body .hex-service-hero .hex-service-status.product-status-text {
    align-items: center;
    background: color-mix(in srgb, var(--hex-status, var(--text-tertiary)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--hex-status, var(--text-tertiary)) 40%, transparent);
    border-radius: var(--radius-pill);
    color: var(--hex-status, var(--text-secondary));
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.4375rem;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.625rem;
    text-transform: uppercase;
}

#main-body .hex-service-hero .hex-service-status-dot {
    background: var(--hex-status, var(--text-tertiary));
    border-radius: 50%;
    flex: 0 0 auto;
    height: 7px;
    width: 7px;
}

#main-body .hex-service-hero.product-status-active     { --hex-status: var(--success); }
#main-body .hex-service-hero.product-status-pending    { --hex-status: var(--warning); }
#main-body .hex-service-hero.product-status-suspended  { --hex-status: var(--info); }
#main-body .hex-service-hero.product-status-terminated,
#main-body .hex-service-hero.product-status-cancelled  { --hex-status: var(--text-tertiary); }
#main-body .hex-service-hero.product-status-fraud      { --hex-status: var(--danger); }

/* color-mix no esta en navegadores antiguos; ahi el chip se queda con el
   fondo de respaldo y sigue siendo legible gracias al punto de color. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    #main-body .hex-service-hero .hex-service-status.product-status-text {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--hairline-strong);
    }
}

/* --- Datos de facturacion ------------------------------------------ */
#main-body .hex-service-facts {
    display: grid;
    gap: 0.75rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

#main-body .hex-service-facts .hex-service-fact { min-width: 0; }
#main-body .hex-service-facts .hex-service-fact--wide { grid-column: 1 / -1; }

#main-body .hex-service-facts dt {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.125rem;
    text-transform: uppercase;
}

#main-body .hex-service-facts dd {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

/* --- Panel de pestañas del servicio ---------------------------------
   theme.min.css le pone `background-color:#fff` y un borde #ddd, y la
   plantilla base ademas le colgaba la utilidad `bg-white` de Bootstrap
   (que es !important y no se puede pisar desde CSS). La utilidad se
   quito del .tpl; el fondo lo pone esta regla. */
#main-body div.product-details-tab-container,
#main-body .product-details-tab-container {
    background-color: rgba(255, 255, 255, 0.02);
    /* El borde del tema base es `1px solid #ddd`: sobre fondo negro es un
       marco casi blanco que se come el texto de dentro. Se baja al
       filete mas tenue del sistema (5 % de blanco) y se apoya en un
       fondo levemente elevado para marcar el panel sin el marco. */
    border: 1px solid var(--hairline-soft);
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: 0;
    color: var(--text-secondary);
    padding: 1.25rem;
}

#main-body .product-details-tab-container strong { color: var(--text); }

/* --- Botonera del servicio ------------------------------------------ */
#main-body .product-actions-wrapper .btn-block {
    justify-content: center;
    min-height: var(--tap-target);
}

@media (max-width: 575.98px) {
    #main-body .hex-service-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    #main-body .hex-service-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   12.d Contenedores de tabla del area de clientes
   --------------------------------------------------------------------- */

#main-body .table-container,
#main-body .tab-content,
#main-body .panel-body,
#main-body .well {
    background: transparent;
    color: var(--text-secondary);
}

#main-body .card > .table-container > .table { margin-bottom: 0; }

#main-body .card > .table-container > .table > tbody > tr:last-child > td {
    border-bottom: none;
}

.client-alerts li a {
    color: var(--text-secondary);
    display: flex;
    gap: 0.5rem;
    min-height: var(--tap-target);
    padding: 0.5rem 0.75rem;
}
.client-alerts li a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

/* Nav de pestañas del area de cliente */
.nav-tabs {
    border-bottom: 1px solid var(--hairline);
}

.nav-tabs .nav-link {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-tertiary);
    font-weight: 600;
    min-height: var(--tap-target);
}

.nav-tabs .nav-link:hover { border-bottom-color: var(--hairline-strong); color: var(--text); }

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--accent);   /* subrayado de acento */
    color: var(--text);
}


/* =====================================================================
   12.e SISTEMA DE TICKETS
   ---------------------------------------------------------------------
   Listado, hilo de conversacion y formulario de respuesta. El tema base
   los deja como tablas y bloques planos con bordes grises; aqui el hilo
   pasa a leerse como una conversacion, con las respuestas del equipo
   marcadas por un filete de acento.
   ===================================================================== */

/* --- Listado de tickets -------------------------------------------- */

#main-body #tableTicketsList .ticket-number {
    color: var(--text-muted);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
    min-width: 3.5rem;
}

#main-body #tableTicketsList .ticket-subject {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Sin leer: el tema base solo lo pone en negrita. Se le añade un punto
   de acento para que se distinga de un vistazo. */
#main-body #tableTicketsList .ticket-subject.unread {
    color: var(--text);
    font-weight: 700;
    position: relative;
}

#main-body #tableTicketsList .ticket-subject.unread::before {
    background: var(--accent);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 6px;
    margin-right: 0.4375rem;
    vertical-align: middle;
    width: 6px;
}

/* El enlace ocupa toda la celda con margen negativo + padding, para que
   el area pulsable sea la fila entera y no solo la altura del texto. */
#main-body #tableTicketsList a.border-left {
    align-items: center;
    border-left: none !important;   /* el base metia un borde gris suelto */
    color: inherit;
    display: flex;
    flex-wrap: wrap;
    margin: -0.8125rem -1rem;
    min-height: var(--tap-target);
    padding: 0.8125rem 1rem;
    text-decoration: none;
}

#main-body #tableTicketsList a.border-left:hover .ticket-subject { color: var(--accent-soft); }

/* Estado con color propio del departamento (style inline del TPL). */
#main-body .status-custom {
    border-radius: var(--radius-pill);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25em 0.7em;
}

/* --- Cabecera del ticket ------------------------------------------- */

#main-body .view-ticket > .card-body:first-child {
    border-bottom: 1px solid var(--hairline);
}

#main-body .view-ticket .card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin: 0;
}

#main-body .view-ticket .ticket-actions {
    display: flex;
    float: none !important;
    gap: 0.5rem;
    margin: 0 !important;
}

#main-body .view-ticket .ticket-actions .btn {
    font-size: 0.8125rem;
    min-height: var(--tap-target);
}

/* --- Hilo de la conversacion --------------------------------------- */

#main-body .view-ticket .ticket-reply {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Respuestas del equipo: filete de acento a la izquierda. */
#main-body .view-ticket .ticket-reply.staff {
    background: rgba(91, 141, 239, 0.05);
    border-color: var(--accent-border);
    border-left: 3px solid var(--accent);
}

#main-body .view-ticket .posted-by {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--hairline-soft);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

#main-body .view-ticket .posted-by-name {
    color: var(--text);
    font-weight: 600;
}

#main-body .view-ticket .posted-on { color: var(--text-muted); }

#main-body .view-ticket .requestor-badge {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    float: none !important;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: auto;
    padding: 0.25em 0.7em;
    text-transform: uppercase;
}

#main-body .view-ticket .ticket-reply.staff .requestor-badge {
    background: var(--accent-tint-strong);
    color: var(--accent-soft);
}

#main-body .view-ticket .message {
    color: var(--text-secondary);
    line-height: 1.65;
    padding: 1rem !important;
}

#main-body .view-ticket .message hr { border-top-color: var(--hairline); }

#main-body .view-ticket .message img { border-radius: var(--radius-sm); max-width: 100%; }

#main-body .view-ticket .message pre,
#main-body .view-ticket .message code {
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-sm);
}

#main-body .view-ticket .message blockquote {
    border-left: 3px solid var(--hairline-strong);
    color: var(--text-tertiary);
    margin: 0.75rem 0;
    padding-left: 0.875rem;
}

/* --- Adjuntos ------------------------------------------------------- */

#main-body .view-ticket .attachments {
    border-top: 1px solid var(--hairline-soft);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    padding: 0.875rem 1rem !important;
}

#main-body .view-ticket .attachments strong { color: var(--text-secondary); }

#main-body .attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0.625rem 0 0;
    padding: 0;
}

#main-body .attachment-list li { margin: 0; }

#main-body .attachment-list a,
#main-body .attachment-list > li > span {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: inline-flex;
    gap: 0.5rem;
    min-height: var(--tap-target);
    padding: 0.4375rem 0.75rem;
    text-decoration: none;
    transition: background-color var(--t-fast), border-color var(--t-fast);
}

#main-body .attachment-list a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--hairline-strong);
    color: var(--text);
}

#main-body .attachment-list figure {
    color: var(--accent-soft);
    margin: 0;
}

#main-body .attachment-list .caption {
    font-size: 0.8125rem;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Valoracion de la respuesta ------------------------------------- */

#main-body .view-ticket .rating {
    align-items: center;
    display: flex;
    gap: 0.1875rem;
}

#main-body .view-ticket .rating .star {
    color: var(--text-disabled);
    cursor: pointer;
    font-size: 1rem;
    transition: color var(--t-fast);
}

/* Estrella rellena por mascara. Con el glifo de Font Awesome, si el
   nombre de la familia no coincide, la valoracion se quedaba en blanco. */
#main-body .view-ticket .rating .star::before {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 1em;
    -webkit-mask-image: var(--hex-icon-star-filled);
    mask-image: var(--hex-icon-star-filled);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: -0.135em;
    width: 1em;
}

#main-body .view-ticket .rating .star.active,
#main-body .view-ticket .rating .star:hover { color: var(--warning); }

#main-body .view-ticket .rated {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* --- Editor Markdown (respuesta de ticket, nuevo ticket) -------------
   OJO CON LOS NOMBRES DE CLASE
   WHMCS no usa EasyMDE/SimpleMDE aqui, sino **bootstrap-markdown**
   (`element.markdown({...})` en scripts.js). Eso significa que NO existen
   .CodeMirror ni .editor-toolbar: el editor real es

       div.md-editor
         > div.btn-toolbar          (barra de botones)
         > textarea.markdown-editor (el campo)
         > div.md-preview           (la vista previa)
         > div.markdown-editor-status

   Los estilos anteriores apuntaban a las clases de EasyMDE, por eso el
   recuadro de respuesta seguia saliendo blanco.

   Ademas theme.min.css pinta el textarea, la vista previa y la barra con
   `background-color: #fff !important`, asi que hace falta !important
   para ganarle. */

#main-body .md-editor {
    background: transparent;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    overflow: hidden;              /* que los hijos respeten el radio */
}

#main-body .md-editor.active {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

#main-body .md-editor > .btn-toolbar,
#main-body .md-editor > .md-header {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid var(--hairline);
    margin: 0;
    padding: 0.375rem 0.5rem;
}

#main-body .md-editor > textarea.markdown-editor,
#main-body .md-editor > textarea,
#main-body .md-editor > .md-preview {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    color: var(--text) !important;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    line-height: 1.6;
    padding: 0.875rem 1rem !important;
    resize: vertical;
}

#main-body .md-editor > textarea:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    outline: none;
}

#main-body .md-editor > textarea::placeholder { color: var(--text-muted); }

/* Botones de la barra de herramientas. bootstrap-markdown los pinta como
   .btn-default de Bootstrap 3, que aqui quedaban en blanco. */
#main-body .md-editor .btn-toolbar .btn,
#main-body .md-editor .md-header .btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text-tertiary);
    min-height: 32px;
    padding: 0.25rem 0.5rem;
}

#main-body .md-editor .btn-toolbar .btn:hover,
#main-body .md-editor .btn-toolbar .btn:focus,
#main-body .md-editor .btn-toolbar .btn.active,
#main-body .md-editor .md-header .btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hairline);
    color: var(--text);
}

#main-body .md-editor .btn-toolbar .btn-group { margin-right: 0.375rem; }

/* Pie con el contador de lineas/palabras y el aviso de autoguardado. */
#main-body .md-editor > .md-footer,
#main-body .markdown-editor-status {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-top: 1px solid var(--hairline);
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* La vista previa renderiza HTML: hereda la tipografia del tema. */
#main-body .md-editor > .md-preview,
#main-body .markdown-content { color: var(--text-secondary); }

#main-body .md-preview h1,
#main-body .md-preview h2,
#main-body .md-preview h3,
#main-body .md-preview h4,
#main-body .markdown-content h1,
#main-body .markdown-content h2,
#main-body .markdown-content h3,
#main-body .markdown-content h4 { color: var(--text); }

#main-body .md-preview pre,
#main-body .md-preview code,
#main-body .markdown-content pre,
#main-body .markdown-content code {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--accent-soft);
}

#main-body .md-preview blockquote,
#main-body .markdown-content blockquote {
    border-left: 3px solid var(--hairline-strong);
    color: var(--text-tertiary);
}

/* Modo pantalla completa: el plugin lo fuerza a blanco con !important. */
#main-body .md-editor.md-fullscreen-mode,
#main-body .md-editor.md-fullscreen-mode .md-input,
#main-body .md-editor.md-fullscreen-mode .md-preview {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Selector de archivo del adjunto */
#main-body .custom-file,
#main-body .custom-file-input,
#main-body .custom-file-label {
    height: var(--tap-target);
}

#main-body .custom-file-label {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--text-tertiary);
    display: flex;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
}

#main-body .custom-file-label::after {
    background: rgba(255, 255, 255, 0.08);
    border-left: 1px solid var(--hairline);
    color: var(--text-secondary);
    height: calc(var(--tap-target) - 2px);
    line-height: 1.9;
}

#main-body .attachment-group .input-group-append .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    min-height: var(--tap-target);
}


/* ---------------------------------------------------------------------
   12.e Dashboard del area de clientes  (remake)
   ---------------------------------------------------------------------
   Estilos de las tres piezas nuevas de clientareahome.tpl:

       .hex-dash-hero     -> includes/dashboard-hero.tpl
       .hex-metrics       -> includes/dashboard-metrics.tpl
       .hex-quicklinks    -> includes/dashboard-metrics.tpl
       .hex-panel*        -> clientareahome.tpl

   El bloque 12.a (`.tiles`) se conserva pero YA NO SE USA en el
   dashboard: lo sustituye `.hex-metrics`. Se deja porque es el estilo que
   recuperaria el tema si alguien revierte clientareahome.tpl a la version
   de Twenty-One.

   Superficies planas, sin degradados ni halos, igual que el resto del
   tema (ver la nota de las dos desviaciones en § 01). Lo que hace que
   esto no se parezca a Twenty-One no es el color: es la jerarquia
   tipografica, el aire entre bloques y que el acento aparezca solo en la
   accion principal y en los detalles pequeños.
   --------------------------------------------------------------------- */

/* --- Cabecera: saludo, estado y CTA -------------------------------- */
#main-body .hex-dash-hero {
    align-items: flex-end;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1.625rem 1.5rem;
}

#main-body .hex-dash-hero__text { min-width: 0; }

#main-body .hex-dash-hero__eyebrow {
    color: var(--accent-soft);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 0.375rem;
    text-transform: uppercase;
}

#main-body .hex-dash-hero__title {
    color: var(--text);
    font-family: var(--font-display);
    /* clamp en vez de una media query: el titulo es la unica pieza del
       dashboard cuyo tamaño escala de verdad con el ancho. */
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

#main-body .hex-dash-hero__summary {
    color: var(--text-tertiary);
    font-size: 0.9375rem;
    margin: 0.5rem 0 0;
    max-width: 52ch;
}

#main-body .hex-dash-hero__summary strong {
    color: var(--text);
    font-weight: 700;
}

#main-body .hex-dash-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

#main-body .hex-dash-hero__cta {
    align-items: center;
    border-radius: var(--radius);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    min-height: var(--tap-target);   /* RF-03.4 */
    padding: 0.5rem 1.125rem;
    text-decoration: none;
    transition: background-color var(--t), border-color var(--t), color var(--t);
    white-space: nowrap;
}

#main-body .hex-dash-hero__cta--primary {
    background: var(--accent-strong);   /* blanco encima: 4,9:1 */
    border: 1px solid var(--accent-strong);
    color: #ffffff;
}

#main-body .hex-dash-hero__cta--primary:hover,
#main-body .hex-dash-hero__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
    text-decoration: none;
}

#main-body .hex-dash-hero__cta--ghost {
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--text-secondary);
}

#main-body .hex-dash-hero__cta--ghost:hover,
#main-body .hex-dash-hero__cta--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-border);
    color: var(--text);
    text-decoration: none;
}

/* HTML que inyectan los modulos de addon entre las metricas y los
   paneles. No se le da estilo -- es HTML ajeno --, solo separacion, que
   antes no tenia ninguna y quedaba pegado al bloque de arriba. */
#main-body .hex-addon-slot { margin-bottom: 1.25rem; }

/* --- Rejilla de metricas -------------------------------------------
   `auto-fit` con un minimo de 13rem: cuatro tarjetas en escritorio, dos
   en tablet, una en movil, sin media queries y sin dejar un hueco al
   final de la fila si se añade o se quita una. */
#main-body .hex-metrics {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-bottom: 0.875rem;
}

#main-body .hex-metric {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius);
    color: var(--text-tertiary);
    display: block;
    overflow: hidden;
    padding: 1.125rem 1.125rem 1rem;
    position: relative;
    text-decoration: none;
    transition: background-color var(--t), border-color var(--t);
}

#main-body .hex-metric:hover,
#main-body .hex-metric:focus-visible {
    background: var(--glass-bg-strong);
    border-color: var(--hairline-strong);
    text-decoration: none;
}

/* Linea inferior del tono de la tarjeta, que solo se enciende al pasar
   por encima. Es el unico resto del `.highlight` de Twenty-One, y ahora
   el color significa algo: lo hereda de --hex-tone. */
#main-body .hex-metric::after {
    background: var(--hex-tone, var(--accent));
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity var(--t);
}

#main-body .hex-metric:hover::after,
#main-body .hex-metric:focus-visible::after { opacity: 1; }

#main-body .hex-metric__icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--hex-tone, var(--accent-soft));
    display: inline-flex;
    font-size: 0.9375rem;
    height: 32px;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 32px;
}

#main-body .hex-metric__value {
    color: var(--text);
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

#main-body .hex-metric__label {
    color: var(--text-secondary);
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 0.3125rem;
}

/* Linea de estado. El icono va SIEMPRE acompañando al texto: el tono de
   color es refuerzo, nunca la unica señal (RF-09.4). */
#main-body .hex-metric__note {
    align-items: center;
    color: var(--hex-tone, var(--text-muted));
    display: flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.3125rem;
    margin-top: 0.5rem;
}

#main-body .hex-metric--ok   { --hex-tone: var(--success); }
#main-body .hex-metric--warn { --hex-tone: var(--warning); }
#main-body .hex-metric--info { --hex-tone: var(--accent-soft); }
#main-body .hex-metric--idle { --hex-tone: var(--text-muted); }

/* En la tarjeta apagada el icono no se tiñe: se queda neutro para que el
   contraste de la cifra siga siendo lo primero que se lee. */
#main-body .hex-metric--idle .hex-metric__icon { color: var(--text-tertiary); }

/* --- Accesos secundarios ------------------------------------------- */
#main-body .hex-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

#main-body .hex-quicklink {
    align-items: center;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.5rem;
    min-height: var(--tap-target);   /* RF-03.4 */
    padding: 0.375rem 1rem;
    text-decoration: none;
    transition: background-color var(--t), border-color var(--t), color var(--t);
}

#main-body .hex-quicklink > i { color: var(--text-muted); font-size: 0.9375rem; }

#main-body .hex-quicklink:hover,
#main-body .hex-quicklink:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-border);
    color: var(--text);
    text-decoration: none;
}

#main-body .hex-quicklink:hover > i { color: var(--accent-soft); }

/* --- Paneles del dashboard -----------------------------------------
   El fondo, el borde y el radio ya los pone la regla de § 12.b, que sigue
   apuntando a `.client-home-cards .card`. Aqui va solo lo que cambia por
   el markup nuevo. */
#main-body .hex-dash-columns {
    display: grid;
    gap: 0 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* La cabecera pasa a ser una fila de tres piezas. En la base era un <h3>
   con un `float-right` dentro, que en titulos de dos lineas dejaba el
   boton descolgado del texto. */
#main-body .hex-panel__header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

#main-body .hex-panel__icon {
    align-items: center;
    background: var(--accent-tint);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    color: var(--accent-soft);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.875rem;
    height: 28px;
    justify-content: center;
    width: 28px;
}

#main-body .hex-panel__title {
    flex: 1 1 auto;
    min-width: 0;
}

#main-body .hex-panel__action { flex: 0 0 auto; }

#main-body .hex-panel__badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    margin-left: 0.375rem;
    vertical-align: 0.1em;
}

/* Items de lista de los paneles.
   ---------------------------------------------------------------------
   NO se convierten en contenedor flex, a proposito: la etiqueta de cada
   hijo puede venir de WHMCS como HTML de flujo (chip + asunto + <br> +
   <small>), y flexbox lo rompe. Ver la nota larga en § 12.b.

   El icono y el badge se colocan con `inline-block` y `float`, que
   conviven con ese HTML sin cambiar su modo de formato. */
#main-body .hex-panel__item-icon {
    color: var(--text-muted);
    display: inline-block;
    margin-right: 0.5rem;
    text-align: center;
    width: 1.25rem;
}

#main-body .hex-panel__item:hover .hex-panel__item-icon { color: var(--accent-soft); }

#main-body .hex-panel__item-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    float: right;
    margin-left: 0.75rem;
}

#main-body .hex-panel__item.active .hex-panel__item-badge {
    background: var(--accent-tint-strong);
    color: var(--accent-soft);
}

/* El asunto de cada ticket / factura, que llega como texto suelto, se
   queda en el color de titulo para que destaque sobre la fecha. */
#main-body .hex-panel__list .hex-panel__item { color: var(--text); }
#main-body .hex-panel__list .hex-panel__item small { color: var(--text-muted); }

/* Caja con scroll de los paneles que traen varias filas (tickets
   recientes, ultimas facturas).
   ---------------------------------------------------------------------
   Es la SEGUNDA causa del listado de tickets roto. `theme.css` trae:

       .client-home-cards .list-group {
           max-height: 170px;
           overflow: auto;
           border-top:    1px solid #ddd !important;
           border-bottom: 1px solid #ddd !important;
       }

   Dos problemas. Uno, esos 170px estan calculados para las filas de
   `padding: 4px 10px` del tema claro; con el area pulsable de 44px que
   pide RF-03.4 no entran ni cuatro filas, asi que la cuarta se quedaba
   cortada por la mitad -- media linea de texto asomando por debajo del
   borde, que es lo que se veia en el panel de tickets. Y dos, esos
   bordes `#ddd !important` son dos lineas casi blancas cruzando el panel
   oscuro.

   Se sube el alto a 22rem (cinco filas completas y media, de modo que
   quede claro que hay mas y se puede desplazar) y los bordes pasan al
   filete del tema. El `!important` es obligatorio aqui: el del tema base
   tambien lo lleva y no se gana por especificidad. */
#main-body .client-home-cards .list-group,
#main-body .hex-panel__list {
    border-bottom: 1px solid var(--hairline) !important;
    border-radius: 0;
    border-top: 1px solid var(--hairline) !important;
    max-height: 22rem;
    overflow-y: auto;
}

/* Si la lista es lo ultimo del panel, el borde de abajo se solapa con el
   de la propia tarjeta y se ve una linea doble. */
#main-body .client-home-cards .list-group:last-child,
#main-body .hex-panel__list:last-child {
    border-bottom: 0 !important;
}

/* --- Servicios activos (panel a ancho completo) --------------------
   `.div-service-item` viene de includes/active-products-services-item.tpl
   y `theme.css` lo deja como una fila flex sin mas: sin separacion, sin
   estado de hover y con el nombre del producto al mismo peso visual que
   el dominio. Aqui cada servicio pasa a ser una fila con su propia
   superficie, que es lo que hace que el bloque deje de parecer una tabla
   de 2015. */
#main-body .hex-panel--wide .div-service-item,
#main-body .active-products-services .div-service-item {
    border-radius: var(--radius);
    gap: 0.875rem;
    min-height: var(--tap-target);   /* RF-03.4 */
    padding: 0.75rem 0.875rem;
    transition: background-color var(--t);
}

#main-body .hex-panel--wide .div-service-item:hover,
#main-body .active-products-services .div-service-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

#main-body .div-service-name { margin-left: 0; margin-right: 0; }

#main-body .div-service-name .font-weight-bold {
    color: var(--text);
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
}

/* La IP o el dominio en cifras tabulares: son datos que se leen y se
   copian, no prosa. */
#main-body .div-service-name .text-domain {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

#main-body .div-service-status { flex: 0 0 auto; }

@media (max-width: 991.98px) {
    #main-body .hex-dash-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    #main-body .hex-dash-hero {
        align-items: stretch;
        padding: 1.25rem 1.125rem;
    }
    #main-body .hex-dash-hero__actions { flex-direction: column; }
    #main-body .hex-dash-hero__cta { justify-content: center; }
    #main-body .hex-metric { padding: 1rem; }
    #main-body .hex-metric__value { font-size: 1.75rem; }
}


/* =====================================================================
   13. MODALES, DROPDOWNS, POPOVERS Y TOOLTIPS
   ===================================================================== */

.modal-backdrop.show { opacity: 0.7; }

/* El fondo iba al 86 % y con desenfoque: sobre una pagina oscura el
   dialogo se leia como una mancha, no como una ventana. Se sube al 98 %
   para que tenga borde propio y se distinga de lo que hay detras. */
.modal-content {
    background: rgba(16, 16, 22, 0.98);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7);
    color: var(--text-secondary);
}

/* Bootstrap ancla los modales arriba; con la cabecera sticky del tema el
   dialogo aparecia pegado (y a veces por debajo) del header. Se centran
   verticalmente sin tocar el markup, que viene de WHMCS. */
.modal.show .modal-dialog {
    align-items: center;
    display: flex;
    min-height: calc(100% - 3.5rem);
}

.modal.show .modal-dialog > .modal-content { width: 100%; }

.modal-header,
.modal-footer { border-color: var(--hairline); }
.modal-title  { color: var(--text); }

.modal-header .close,
.close {
    color: var(--text-secondary);
    opacity: 1;
    text-shadow: none;
    min-height: var(--tap-target);
    min-width: var(--tap-target);
}
.close:hover { color: var(--text); opacity: 1; }

/* El menu era casi ilegible: el fondo dejaba pasar la pagina y el tema
   base pinta los enlaces de #444 (gris oscuro sobre fondo oscuro). Se
   sube la opacidad del fondo y se fuerza el color del texto con la
   especificidad suficiente para ganar a la regla base. */
.dropdown-menu {
    background: rgba(14, 14, 19, 0.98);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.85);
    padding: 0.375rem;
}

/* Sin backdrop-filter el fondo debe ser totalmente opaco. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .dropdown-menu { background: #0e0e13; }
}

#nav .dropdown-menu > li > a,
#nav .dropdown-menu .dropdown-item,
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-item,
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: var(--tap-target);
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap;
}

#nav .dropdown-menu > li > a:hover,
#nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu .dropdown-item:hover,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text) !important;
    text-decoration: none;
}

/* Los <li> que envuelven a .dropdown-item no deben pintar nada. */
.dropdown-menu > li.dropdown-item {
    background: transparent;
    display: block;
    min-height: 0;
    padding: 0 !important;
}

.dropdown-menu > li.dropdown-item > a { width: 100%; }

.dropdown-menu .dropdown-item > i,
.dropdown-menu > li > a > i {
    color: var(--text-muted);
    margin-right: 0.5rem;
    width: 1rem;
}

.dropdown-menu .dropdown-item:hover > i,
.dropdown-menu > li > a:hover > i { color: var(--accent-soft); }

.dropdown-divider { border-color: var(--hairline); }

/* --- Popovers ------------------------------------------------------
   theme.min.css los pinta blancos y ademas les fija la pila de fuentes
   del sistema (-apple-system, Segoe UI...), asi que el texto no salia en
   Inter como el resto del tema. El popover de notificaciones va todavia
   mas lejos: se cuelga de <body> con la clase .popover-user-notifications
   y fuerza "Open Sans".

   Se declaran con !important porque el popover vive fuera de #main-body
   y no hay ningun ancestro con el que ganar especificidad de forma
   limpia; ademas Bootstrap le escribe estilos en linea al posicionarlo. */
.popover,
.popover-user-notifications {
    background-color: rgba(14, 14, 19, 0.96) !important;
    border: var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    color: var(--text-secondary);
    font-family: var(--font-ui) !important;
    font-size: 0.875rem;
}

.popover-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--hairline);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
}

.popover-body,
.popover-user-notifications .popover-body { color: var(--text-secondary); }

/* La flecha se pinta con dos triangulos superpuestos (borde + relleno);
   hay que teñir los cuatro lados porque el popover se coloca arriba,
   abajo, a izquierda o a derecha segun el espacio disponible. */
.popover .arrow::after {
    border-top-color: rgba(14, 14, 19, 0.96);
    border-bottom-color: rgba(14, 14, 19, 0.96);
    border-left-color: rgba(14, 14, 19, 0.96);
    border-right-color: rgba(14, 14, 19, 0.96);
}
.popover .arrow::before {
    border-top-color: var(--hairline-strong);
    border-bottom-color: var(--hairline-strong);
    border-left-color: var(--hairline-strong);
    border-right-color: var(--hairline-strong);
}

/* --- Popover de notificaciones de la topbar ------------------------ */
.popover-user-notifications {
    border-color: var(--hairline-strong) !important;
    min-width: 320px;
    padding: 0.25rem;
}

.popover-user-notifications .popover-body { padding: 0; }

.popover-user-notifications ul li {
    border-bottom: 1px solid var(--hairline-soft);
    min-height: 0;              /* el base reservaba 66px de alto fijo */
    padding: 0;
}

.popover-user-notifications ul li:last-child { border-bottom: 0; }

/* El markup base flota el icono a la izquierda y compensa el texto con
   un margin-left de 40px: si el mensaje ocupa dos lineas, la segunda se
   mete debajo del icono. Se pasa a flex y el margen deja de hacer falta. */
.popover-user-notifications ul li a {
    align-items: flex-start;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.625rem;
    line-height: 1.45;
    padding: 0.625rem 0.75rem;
}

.popover-user-notifications ul li a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text);
    text-decoration: none;
}

.popover-user-notifications ul li i.fas,
.popover-user-notifications ul li i.far {
    flex: 0 0 auto;
    float: none;                /* el base lo flotaba */
    font-size: 1rem;
    padding-top: 0.125rem;
}

.popover-user-notifications ul li .message { margin-left: 0; }

.popover-user-notifications ul li.none {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    padding: 0.75rem;
    text-align: center;
}

.tooltip-inner {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    color: var(--text);
}


/* =====================================================================
   14. FOOTER
   ===================================================================== */

#footer,
footer.footer {
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid var(--hairline-soft);
    color: var(--text-tertiary);
    margin-top: 3rem;
    padding: 2rem 0;
}

#footer a,
footer.footer a { color: var(--text-secondary); }
#footer a:hover,
footer.footer a:hover { color: var(--text); }

.footer-language-select .btn,
#footer .btn { min-height: var(--tap-target); }


/* =====================================================================
   15. ACCESIBILIDAD
   ---------------------------------------------------------------------
   RF-03.3 / RF-03.6 / RF-09.2. Anillo de foco azul claro (#bfd3ff),
   de la misma rampa que el acento: 13.4:1 sobre el fondo y 3.3:1 sobre
   el relleno de los botones de acento, asi que se ve sobre cualquier
   superficie del tema y cumple el 3:1 que pide WCAG para indicadores
   no textuales.
   ===================================================================== */

/* Se elimina el outline solo cuando el foco viene del raton. */
:focus:not(:focus-visible) { outline: none; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.hex-access-card:focus-visible,
.list-group-item:focus-visible,
.dropdown-item:focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

/* Bootstrap 4 anula el outline con box-shadow: lo neutralizamos. */
.btn:focus,
.btn.focus,
.form-control:focus,
.custom-select:focus { box-shadow: none; }

/* Fallback para navegadores sin :focus-visible. */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    .btn:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: var(--focus-width) solid var(--focus);
        outline-offset: var(--focus-offset);
    }
}

/* Salto al contenido principal para usuarios de teclado. */
.hex-skip-link {
    background: var(--accent-strong);
    border-radius: 0 0 var(--radius) 0;
    color: #ffffff;
    font-weight: 700;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: absolute;
    top: -100px;
    z-index: 2000;
    transition: top var(--t);
}

.hex-skip-link:focus {
    color: #ffffff;
    outline: var(--focus-width) solid var(--focus);
    outline-offset: calc(var(--focus-offset) * -1);
    text-decoration: none;
    top: 0;
}

.sr-only-focusable:focus {
    background: var(--accent-strong);
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
    .hex-access-card:hover,
    .action-icon-btns > div > a:hover { transform: none; }
}

/* Modo de alto contraste: se refuerzan los bordes que en glass son
   deliberadamente tenues. */
@media (prefers-contrast: more) {
    :root {
        --glass-bg:      rgba(255, 255, 255, 0.10);
        --hairline:      rgba(255, 255, 255, 0.28);
        --hairline-soft: rgba(255, 255, 255, 0.20);
        --text-secondary: #d4dae3;
    }
}


/* =====================================================================
   16. RESPONSIVE
   ---------------------------------------------------------------------
   RF-08. No se usan escalas forzadas (transform/zoom): se ajustan
   tamaños y columnas reales para mantener la legibilidad (RF-08.5).
   ===================================================================== */

@media (max-width: 1199.98px) {
    /* El menu colapsado se muestra como panel glass debajo del header. */
    .main-navbar-wrapper .navbar-collapse {
        background: rgba(14, 14, 19, 0.94);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        border: var(--glass-border);
        border-radius: var(--radius);
        margin: 0.5rem 0 0.75rem;
        padding: 0.5rem;
    }

    .hex-nav-actions {
        flex-wrap: wrap;
        margin: 0.5rem 0 0;
        width: 100%;
    }
    .hex-nav-actions .btn { flex: 1 1 0; }
    /* La pastilla de cuenta ocupa su propia fila encima de los botones. */
    .hex-nav-actions .hex-nav-account { flex: 1 1 100%; }
}

@media (max-width: 767.98px) {
    html { font-size: 15px; }

    h1, .h1 { font-size: 1.625rem; }
    h2, .h2 { font-size: 1.3125rem; }
    h3, .h3 { font-size: 1.125rem; }

    .header { position: static; }   /* evita robar alto util en movil */

    .hex-access-island { padding: 1.125rem; }

    .card-columns { column-count: 1; }

    /* Tablas anchas del area de cliente: scroll horizontal propio. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575.98px) {
    .btn-block + .btn-block { margin-top: 0.5rem; }
    .hex-access-card { min-height: 100px; }
}


/* =====================================================================
   16.b BARRIDO DE FONDOS CLAROS HEREDADOS
   ---------------------------------------------------------------------
   Twenty-One esta pensado para fondo blanco y siembra fondos claros por
   todo el CSS: #fff, #f5f5f5, #f6f6f6, #f8f8f8, #efefef... Cada uno de
   ellos es una pagina que aparece como un recuadro blanco con texto
   claro encima.

   Esta seccion los recoge en bloque, ordenados por pagina. Se hizo un
   barrido automatico de theme.css buscando toda regla con un fondo de
   la lista de arriba y cruzandolo con lo que ya cubria este archivo; lo
   que sigue es el resto.

   AVISO SOBRE LAS UTILIDADES DE BOOTSTRAP
   `bg-white` y `bg-light` llevan !important, asi que NO se pueden pisar
   desde aqui: hay que quitarlas de la plantilla. Ya se hizo en
   clientareaproductdetails.tpl, includes/domain-search.tpl,
   includes/sidebar.tpl y orderforms/.../domainregister.tpl. Si aparece
   otra pagina en blanco, busca primero esas dos clases en su .tpl.
   ===================================================================== */

/* --- Anuncios ------------------------------------------------------- */
#main-body .announcements .announcement article {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius);
    color: var(--text-secondary);
    padding: 1rem 1.125rem;
}

#main-body .announcements .announcement + .announcement {
    border-top: 1px solid var(--hairline-soft);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

#main-body .announcements .announcement h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}

#main-body .announcements .announcement h1 a { color: var(--text); }
#main-body .announcements .announcement h1 a:hover { color: var(--accent-soft); }

/* --- Base de conocimientos ------------------------------------------ */
#main-body .kb-category a,
#main-body .kb-article-item {
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

#main-body .kb-category a:hover,
#main-body .kb-article-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

/* --- Avisos de verificacion de email -------------------------------- */
#main-body .verification-banner,
.verification-banner {
    background-color: var(--warning-tint);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

/* --- Invitaciones y cambio de cuenta -------------------------------- */
#main-body .invite-box,
#main-body .continue-container,
#main-body .select-account a:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);   /* el base lo deja en #eee */
    border-radius: var(--radius);
    color: var(--text-secondary);
}

#main-body .select-account a {
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

/* --- Seguridad: codigos de respaldo del 2FA ------------------------- */
#main-body .twofa-setup .backup-code {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

#main-body .twofa-setup .activation-msg {
    border: 1px dashed var(--hairline-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

#main-body .twofa-module {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

/* --- Valoracion de tickets ------------------------------------------ */
#main-body .ticketfeedbackstaffcont {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

/* --- Metodos de pago y pagos masivos -------------------------------- */
#main-body div.credit-card {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

#main-body tr.masspay-total td {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

/* --- Mejoras de producto (upgrade) ---------------------------------- */
#main-body .upgrade .product-to-be-upgraded {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

/* --- Bloques promocionales de WHMCS --------------------------------- */
#main-body .promo-container,
#main-body .promo-banner {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

/* --- Pestañas responsive (detalles del producto) ---------------------
   Tres focos de blanco aqui:
     1. el "conector" que une la pestaña activa con el panel,
     2. el hover de las pestañas en escritorio (#f7f7f7),
     3. en <768px el tema base convierte la lista en una caja con
        `background:#fff` y bordes `#ddd` a tres lados.
   Ese ultimo es el borde brillante que se veia alrededor del panel. */
#main-body .responsive-tabs-sm-connector .channel {
    background-color: transparent;
}

#main-body .responsive-tabs-sm-connector .bottom-border {
    background-color: var(--hairline-soft);
}

#main-body .responsive-tabs-sm .nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

@media (max-width: 767.98px) {
    #main-body .responsive-tabs-sm {
        background: rgba(255, 255, 255, 0.03);
        border-color: var(--hairline-soft);
    }
    #main-body .responsive-tabs-sm .nav-item {
        border-bottom-color: var(--hairline-soft) !important;
    }
    #main-body .responsive-tabs-sm .nav-item a.active {
        background-color: var(--accent-tint) !important;
        color: var(--text);
    }
}

/* --- Buscador de dominios de la portada ------------------------------
   La plantilla ya no lleva `bg-white` (ver aviso de arriba). */
.home-domain-search {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--hairline-soft);
    border-top: 1px solid var(--hairline-soft);
    color: var(--text-secondary);
}

.home-domain-search h2 { color: var(--text); }
.home-domain-search .tld-logos { color: var(--text-tertiary); }

.home-domain-search .input-group-wrapper {
    background-color: transparent;
}

/* --- Paginas de precios de dominios ---------------------------------
   El sitio no vende dominios hoy, pero estas paginas siguen siendo
   accesibles por URL y quedaban en blanco. */
#main-body .featured-tld {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

#main-body .featured-tld .price {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

#main-body .domain-pricing .tld-pricing-header,
#main-body .domain-pricing .tld-pricing-header div:nth-child(odd),
#main-body .domain-pricing .tld-pricing-header .col-xs-2,
#main-body .domain-pricing .tld-pricing-header .col-sm-4 {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* --- Controles de formulario personalizados --------------------------
   .custom-control-label::before es el cuadrado/circulo de los checkbox
   y radios "custom" de Bootstrap: en blanco sobre fondo oscuro parecian
   siempre marcados. */
#main-body .custom-control-label::before,
.custom-control-label::before {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--hairline-strong);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* --- Campos validados ------------------------------------------------
   Bootstrap le pone al campo valido/invalido un `background` compuesto
   (el icono de tick o de aspa MAS `#fff`), asi que al validar un select
   o un input este se volvia blanco de golpe. Se conserva el icono y se
   devuelve el fondo del tema. */
#main-body .form-control.is-valid,
#main-body .form-control.is-invalid,
#main-body .custom-select.is-valid,
#main-body .custom-select.is-invalid,
#main-body .was-validated .form-control:valid,
#main-body .was-validated .form-control:invalid,
#main-body .was-validated .custom-select:valid,
#main-body .was-validated .custom-select:invalid {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

#main-body .form-control.is-valid,
#main-body .custom-select.is-valid,
#main-body .was-validated .form-control:valid,
#main-body .was-validated .custom-select:valid { border-color: var(--success); }

#main-body .form-control.is-invalid,
#main-body .custom-select.is-invalid,
#main-body .was-validated .form-control:invalid,
#main-body .was-validated .custom-select:invalid { border-color: var(--danger); }

/* --- Consumo facturable ----------------------------------------------
   clientareaproductusagebilling.tpl usa la clase
   .table-solid-bottom-border-light-gray, que trae un borde #dee2e6. */
#main-body table.table-solid-bottom-border-light-gray,
#main-body table.table-solid-bottom-border-light-gray td,
#main-body table.table-solid-bottom-border-light-gray th {
    border-color: var(--hairline) !important;
}

/* --- Piezas sueltas -------------------------------------------------- */
#main-body .img-thumbnail,
.img-thumbnail {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
}

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
    background-color: rgba(255, 255, 255, 0.09);
    color: var(--text);
}

.modal-localisation .item-selector .item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text);
}


/* =====================================================================
   17. UTILIDADES DEL TEMA
   ===================================================================== */

.hex-surface {
    background: var(--bg-card);
    border-radius: var(--radius);
}

.hex-divider {
    background: var(--hairline);
    border: none;
    height: 1px;
    margin: 1.5rem 0;
}

.hex-text-muted     { color: var(--text-tertiary) !important; }
.hex-text-accent    { color: var(--accent-soft) !important; }
.hex-text-primary   { color: var(--text) !important; }

.text-muted { color: var(--text-tertiary) !important; }

.hex-eyebrow {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Titulo grande a dos lineas (RF-05.2). */
.hex-display {
    color: var(--text);
    font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0;
}

.hex-display .hex-display__line { display: block; }
.hex-display .hex-display__accent { color: var(--accent-soft); }