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

    ** Custom Stylesheet **

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

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

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

/* NOTA DE AUDITORÍA: se eliminó "html { font-size: 14px; }" que traía este
   archivo (heredado de la plantilla "Nexus Cart" de la que fue copiado, ver
   comentario original arriba). Ese valor sobrescribía el 16px por defecto
   del navegador y encogía TODO lo medido en rem en el resto del tema
   (h1-h6, botones, inputs, spacing de Bootstrap) a un 87.5% de su tamaño
   real en cada página del área de clientes. */

:root {
    --white: #fff;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   HEADER — distribución en 2 niveles (Fase 5 / Etapa 1)
   Estructura tomada como referencia: Nivel 1 (logo, buscador,
   cuenta, carrito) + Nivel 2 (menú principal, ancho completo).
   Identidad visual (colores, tipografía, logo, botones) sin
   cambios: se mantienen los mismos tokens de marca ya usados.
   Solo afecta selectores dentro de header.header.
   ========================================================= */
body {
    font-family: var(--font-body);
    color: var(--gray-900);
}

/* --- Sticky + Sombra (sin cambios de color) --- */
header.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--ease) .2s;
}

/* --- Barra superior (usuario logueado, sin cambios) --- */
header.header .topbar {
    background-color: var(--primary);
    padding: var(--space-3xs) 0;
}
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
}
header.header .topbar .btn:hover,
header.header .topbar .active-client .btn:hover {
    color: var(--white);
}
header.header .topbar .active-client .btn.btn-active-client span {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* =========================================================
   NIVEL 1 — logo | buscador | cuenta + carrito
   ========================================================= */
header.header .header-top-row {
    background-color: var(--white);
    padding: var(--space-md) 0;
}
header.header .header-top-row .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Logo: mismo tamaño ya definido, solo se centra verticalmente */
header.header .header-top-row .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: auto;
    flex-shrink: 0;
}

/* Buscador: mismo estilo gráfico ya usado, solo cambia de ubicación */
header.header .header-top-row .search-form {
    flex: 0 1 280px;
    width: 280px;
    order: 2;
}
header.header .search {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background-color: var(--gray-50);
    overflow: hidden;
    transition: all var(--ease) .15s;
}
header.header .search .btn {
    color: var(--gray-400);
    background: transparent;
    border: 0;
    padding-left: var(--space-sm);
    padding-right: var(--space-2xs);
}
header.header .search .form-control {
    background: transparent;
    border: 0;
    padding-left: 0;
}
header.header .search:hover {
    background-color: var(--gray-100);
}
header.header .search:focus-within {
    background-color: var(--white);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
header.header .search:focus-within .btn {
    color: var(--accent);
}

/* Cuenta + carrito: mismo look ya definido */
header.header .header-top-row .user-menu-group {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    order: 3;
    margin-left: var(--space-sm);
    padding-left: var(--space-md);
    border-left: 1px solid var(--gray-200);
}
header.header .navbar-nav a,
header.header .navbar-light .nav-link {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
    transition: color var(--ease) .15s;
}
header.header .secondary-nav > li > a:hover {
    color: var(--accent);
}
header.header .dropdown-item:hover,
header.header .dropdown-item:focus {
    color: var(--accent);
    background-color: var(--accent-soft);
}
header.header .dropdown-item.active,
header.header .dropdown-item:active {
    background-color: var(--accent-soft);
    color: var(--accent);
}
header.header .dropdown-menu {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2xs) 0;
    margin-top: var(--space-2xs);
}
header.header .cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--primary);
    background-color: var(--gray-50);
    border: 0;
    box-shadow: none;
    position: relative;
    text-decoration: none;
    transition: all var(--ease) .15s;
}
header.header .cart-btn:hover,
header.header .cart-btn:focus {
    background-color: var(--accent-soft);
    color: var(--accent);
    text-decoration: none;
    box-shadow: none;
}
header.header .cart-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background-color: var(--accent);
    color: var(--white);
    border-radius: 50%;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

/* Toggler móvil (controla el Nivel 2) */
header.header .header-top-row .navbar-toggler {
    order: 4;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    color: var(--primary);
    margin-left: var(--space-sm);
}
header.header .header-top-row .navbar-toggler:hover {
    border-color: var(--accent);
    color: var(--accent);
}
header.header .header-top-row .navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* =========================================================
   NIVEL 2 — menú principal, ancho completo
   ========================================================= */
header.header .header-bottom-row {
    background-color: var(--white);
    border-top: 1px solid var(--gray-200);
}
header.header .header-bottom-row .navbar-collapse {
    width: 100%;
}
header.header .primary-nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
}
header.header .navbar-nav > li {
    margin: 0 var(--space-3xs);
}
header.header .navbar-nav > li > a {
    font-size: var(--text-md);
    padding: var(--space-sm) var(--space-sm);
    position: relative;
    z-index: 1;
}

/* Fondo celeste suave y redondeado en :hover / :focus, sin
   alterar el tamaño del botón (pseudo-elemento en capa inferior,
   inscripto dentro del padding ya existente). */
header.header .navbar-nav > li > a::before {
    content: "";
    position: absolute;
    inset: 4px 2px;
    border-radius: var(--evnet-btn-radius, 11px);
    background-color: var(--evnet-accent-soft, var(--accent-soft));
    opacity: 0;
    z-index: -1;
    transition: opacity var(--ease) .15s;
}
header.header .navbar-nav > li > a:hover::before,
header.header .navbar-nav > li > a:focus::before {
    opacity: 1;
}

header.header .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--accent);
    transform: scaleX(0);
    transition: transform var(--ease) .15s;
}
header.header .navbar-nav > li > a:hover::after,
header.header .navbar-nav > li > a:focus::after {
    transform: scaleX(1);
}
header.header .navbar-nav a:hover,
header.header .navbar-nav a:focus {
    color: var(--accent);
}
header.header .navbar-nav > li.active > a,
header.header .navbar-nav > li > a[aria-current] {
    color: var(--accent);
}
header.header .navbar-nav > li.active:not(.dropdown) > a::after {
    transform: scaleX(1);
}

/* =========================================================
   RESPONSIVE (HEADER)
   ========================================================= */
@media (max-width: 991.98px) {
    header.header .header-top-row .navbar-toggler {
        display: inline-flex;
    }
    header.header .header-top-row .search-form {
        flex: 1 1 auto;
        width: auto;
        order: 2;
    }
    header.header .header-top-row .container {
        flex-wrap: nowrap;
    }
    header.header .header-bottom-row .navbar-collapse {
        padding: var(--space-md);
    }
    header.header .primary-nav {
        flex-direction: column;
        align-items: stretch;
    }
    header.header .navbar-nav > li {
        margin: 0;
    }
    header.header .navbar-nav > li > a {
        padding: var(--space-sm) var(--space-xs);
    }
    header.header .navbar-nav > li > a::after {
        display: none;
    }
}
@media (max-width: 767.98px) {
    header.header .header-top-row .container {
        flex-wrap: wrap;
    }
    header.header .header-top-row .navbar-brand {
        flex: 1 1 auto;
    }
    header.header .header-top-row .search-form {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        margin-top: var(--space-sm);
    }
    header.header .header-top-row .user-menu-group {
        order: 2;
        margin-left: var(--space-xs);
        padding-left: var(--space-xs);
    }
    header.header .header-top-row .navbar-toggler {
        order: 3;
        margin-left: var(--space-xs);
    }
}
@media (max-width: 575.98px) {
    header.header .topbar {
        padding: var(--space-3xs) 0;
    }
    header.header .header-top-row {
        padding: var(--space-sm) 0;
    }
}

/* =========================================================
   ETAPA 2 — FOOTER (identidad EfrainVillagran.net)
   Footer minimalista: fondo corporativo, texto centrado,
   única línea de copyright. Sin columnas ni enlaces.
   ========================================================= */
footer.footer {
    background-color: #0A2458;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}
footer.footer .copyright {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    margin: 0;
}

/* =========================================================
   ETAPA 2 — BOTÓN FLOTANTE DE WHATSAPP
   Fijo en la esquina inferior derecha, visualmente
   independiente del Footer (position: fixed).
   ========================================================= */
.whatsapp-float {
    position: fixed;
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 1040;
}
.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #25D366;
    color: var(--white);
    font-size: 28px;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform var(--ease) .15s, box-shadow var(--ease) .15s, background-color var(--ease) .15s;
}
.whatsapp-float a:hover,
.whatsapp-float a:focus {
    background-color: #1ebe5b;
    color: var(--white);
    text-decoration: none;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}
@media (max-width: 575.98px) {
    .whatsapp-float {
        right: var(--space-sm);
        bottom: var(--space-sm);
    }
    .whatsapp-float a {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
}

/* =========================================================
   ETAPA 3 — SISTEMA DE BOTONES
   Tokens y reglas extraídos directamente de css/style.css de
   EfrainVillagran.net (documento técnico aprobado). Variables
   propias con los valores exactos del sitio, para no depender
   de --primary/--accent genéricos heredados de Nexus Cart
   (que no coinciden 1:1 con la paleta real de la marca).
   Un único sistema reutilizable: toda variante de botón parte
   de la misma base .btn-evnet y solo cambia color/borde.
   ========================================================= */
:root {
    --evnet-primary: #0A2458;
    --evnet-accent: #1E88FF;
    --evnet-accent-2: #0B6FE0;
    --evnet-accent-soft: #E8F2FF;
    --evnet-white: #FFFFFF;
    --evnet-gray-200: #E2E7F1;

    --evnet-btn-radius: 11px;
    --evnet-btn-radius-lg: 12px;
    --evnet-btn-ease: cubic-bezier(.22, .61, .36, 1);

    --evnet-btn-shadow: 0 1px 2px rgba(10, 36, 88, .12), 0 10px 22px rgba(30, 136, 255, .28);
    --evnet-btn-shadow-hover: 0 4px 10px rgba(10, 36, 88, .16), 0 16px 30px rgba(30, 136, 255, .32);
    --evnet-btn-shadow-sm: 0 1px 3px rgba(10, 36, 88, .07);
}

/* --- Base común: todos los botones del área de clientes --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 24px;
    border-radius: var(--evnet-btn-radius);
    border: 0;
    white-space: nowrap;
    transition: transform .2s var(--evnet-btn-ease),
                box-shadow .2s var(--evnet-btn-ease),
                background .2s var(--evnet-btn-ease),
                border-color .2s var(--evnet-btn-ease),
                color .2s var(--evnet-btn-ease);
}
.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--evnet-accent-soft);
}
.btn:disabled,
.btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-lg {
    padding: 15px 28px;
    font-size: 15.5px;
    border-radius: var(--evnet-btn-radius-lg);
}
.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 9px;
}

/* --- Primario: acción principal (pagar, enviar, guardar) --- */
.btn-primary {
    background-color: var(--evnet-accent);
    color: var(--evnet-white);
    box-shadow: var(--evnet-btn-shadow);
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--evnet-accent-2);
    color: var(--evnet-white);
    transform: translateY(-2px);
    box-shadow: var(--evnet-btn-shadow-hover);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* --- Secundario / Default: acción alternativa (cancelar, volver) --- */
.btn-secondary,
.btn-default,
.btn-outline-secondary {
    background-color: var(--evnet-white);
    color: var(--evnet-primary);
    border: 1.5px solid var(--evnet-gray-200);
    box-shadow: none;
}
.btn-secondary:hover:not(:disabled),
.btn-default:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
    color: var(--evnet-primary);
    border-color: var(--evnet-primary);
    transform: translateY(-2px);
    box-shadow: var(--evnet-btn-shadow-sm);
}

/* --- Sobre fondo oscuro (topbar, banners con fondo primary) --- */
.btn-outline-light {
    background-color: transparent;
    color: var(--evnet-white);
    border: 1.5px solid rgba(255, 255, 255, .35);
    box-shadow: none;
}
.btn-outline-light:hover:not(:disabled) {
    border-color: var(--evnet-white);
    background-color: rgba(255, 255, 255, .08);
    color: var(--evnet-white);
    transform: translateY(-2px);
}

/* --- Semántica funcional de WHMCS: se conserva el color, se
   adapta la forma/movimiento al lenguaje visual de la marca --- */
.btn-success {
    box-shadow: var(--evnet-btn-shadow-sm);
}
.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
}
.btn-success:active:not(:disabled) {
    transform: translateY(0);
}

.btn-warning {
    box-shadow: var(--evnet-btn-shadow-sm);
}
.btn-warning:hover:not(:disabled) {
    transform: translateY(-2px);
}
.btn-warning:active:not(:disabled) {
    transform: translateY(0);
}

.btn-danger {
    box-shadow: var(--evnet-btn-shadow-sm);
}
.btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
}
.btn-danger:active:not(:disabled) {
    transform: translateY(0);
}

/* --- Link: acción de bajo énfasis dentro de texto/listas --- */
.btn-link {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--evnet-accent);
    font-weight: 600;
    text-decoration: none;
}
.btn-link:hover:not(:disabled) {
    color: var(--evnet-accent-2);
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}
.btn-link:focus,
.btn-link:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--evnet-accent-soft);
    outline-offset: 2px;
}

/* --- Botones de tabla: versión compacta reutilizando .btn-sm --- */
.table .btn,
.table-responsive .btn {
    padding: 6px 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

/* --- Carrito: botones de cantidad (+/-), compactos y cuadrados --- */
.qty-btn,
.quantity-selector .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
}

/* --- Responsive: los botones dentro de CTAs apilan a ancho
   completo en mobile, igual que en el sitio principal --- */
@media (max-width: 575.98px) {
    .btn-group-ctas .btn,
    .form-submit {
        width: 100%;
    }
}

/* =========================================================
   ETAPA 4 — TARJETAS Y PANELES
   Tokens y reglas extraídos directamente de css/style.css de
   EfrainVillagran.net (documento técnico aprobado, Etapa 4).
   Un único sistema reutilizable: toda tarjeta/panel del área
   de clientes parte de .card (Bootstrap, ya usado en todo el
   tema WHMCS) y solo se agregan utilidades para los casos que
   el sitio distingue con un patrón propio (tarjeta interactiva
   destacada, ícono en caja, acordeón, panel oscuro).
   No se modifica Smarty/PHP/lógica de módulos: solo apariencia.
   ========================================================= */
:root {
    --evnet-radius-lg: 22px;
    --evnet-radius-md: 14px;
    --evnet-shadow-md: 0 12px 30px rgba(10, 36, 88, .10);
    --evnet-shadow-lg: 0 28px 64px rgba(10, 36, 88, .18);
}

/* --- Base: todo panel/card estático del área de clientes
   (facturas, detalles de servicio, widgets del Dashboard,
   paneles del carrito). Referencia real: .contact-form del
   sitio — fondo blanco, borde sutil, radio grande, sombra fija
   en reposo, SIN elevación en hover (no son elementos clicables
   en sí mismos). --- */
.card {
    background-color: var(--evnet-white);
    border: 1px solid var(--evnet-gray-200);
    border-radius: var(--evnet-radius-lg);
    box-shadow: var(--evnet-shadow-md);
}
.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--evnet-gray-200);
}
.card-header {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--evnet-primary);
}

/* --- Interactiva/seleccionable: para tarjetas que sí son
   clicables o seleccionables (ej. elegir un plan en el carrito,
   accesos rápidos del Dashboard). Referencia real: .service-card
   / .hub-card / .price-card — elevación + sombra + borde que se
   funde en hover. Se aplica como utilidad adicional, no por
   defecto, para no generar movimiento en paneles que no son
   clicables. --- */
.card-interactive {
    transition: transform .3s var(--evnet-btn-ease),
                box-shadow .3s var(--evnet-btn-ease),
                border-color .3s var(--evnet-btn-ease);
}
.card-interactive:hover {
    transform: translateY(-6px);
    box-shadow: var(--evnet-shadow-lg);
    border-color: transparent;
}

/* --- Destacada: plan/opción recomendada dentro de un grupo de
   tarjetas interactivas. Referencia real: .price-card.featured
   --- */
.card-featured {
    border-color: var(--evnet-accent);
    box-shadow: var(--evnet-shadow-md);
    position: relative;
}
.card-featured .card-badge {
    position: absolute;
    top: -13px;
    left: 26px;
    background-color: var(--evnet-accent);
    color: var(--evnet-white);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 100px;
    letter-spacing: .03em;
}

/* --- Panel oscuro: bloques de estadísticas o resumen sobre
   fondo primary (ej. widgets de estado del Dashboard).
   Referencia real: .stats-strip / .stat-card --- */
.card-dark {
    background-color: var(--evnet-primary);
    border: 0;
    color: rgba(255, 255, 255, .75);
}
.card-dark .card-header,
.card-dark .card-footer {
    border-color: rgba(255, 255, 255, .12);
    color: var(--evnet-white);
}

/* --- Ícono en caja: componente reutilizable para encabezar
   widgets/paneles con un ícono destacado. Referencia real:
   .benefit-icon / .service-icon / .hub-card-icon /
   .contact-list-icon (mismo patrón, 3 tamaños distintos) --- */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--evnet-accent-soft);
    color: var(--evnet-accent);
    flex-shrink: 0;
}
.icon-box-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.icon-box-md {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}
.icon-box-lg {
    width: 64px;
    height: 64px;
    border-radius: 16px;
}

/* --- Acordeón (FAQ / Base de Conocimientos / detalles
   expandibles del área de clientes). Referencia real: .faq-item
   — radio menor que el resto de las cards, sin elevación en
   hover, solo expansión de contenido. --- */
.accordion > .card {
    border-radius: var(--evnet-radius-md);
    overflow: hidden;
    box-shadow: none;
}
.accordion > .card + .card {
    margin-top: 14px;
}

/* =========================================================
   ETAPA 5 — FORMULARIOS
   Tokens y reglas extraídos directamente de css/style.css de
   EfrainVillagran.net (.contact-form / .form-field), documento
   técnico aprobado en Etapa 5. Un único sistema reutilizado en
   todos los formularios de WHMCS (Login, Registro, Checkout,
   Tickets, Contacto, Área de Cliente, Carrito): se aplica sobre
   las clases estándar de Bootstrap que ya usa el tema (.form-
   control, .form-group, .custom-control, .invalid-feedback,
   .form-text), sin crear reglas por página ni tocar Smarty/PHP.

   Select, checkbox/radio, ayuda por campo, error por campo y
   disabled NO existen como referencia real en el sitio (ver
   documento de la Etapa 5): se extienden por analogía directa
   del propio sistema ya aprobado — mismo radio, mismo borde,
   mismo anillo de foco (--evnet-accent-soft) y los dos colores
   de estado que el sitio sí define en .form-status
   (#15803D éxito / #B91C1C error) — nunca un lenguaje nuevo.
   ========================================================= */

/* --- Label: igual en todos los formularios --- */
.form-group label,
.form-field label,
.col-form-label {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 7px;
}

/* --- Input, textarea, select: mismo contenedor visual para
   los tres, tal como en .contact-form (input y textarea ya
   comparten estilo en el sitio; select se extiende igual) --- */
.form-control,
.form-field input,
.form-field textarea {
    width: 100%;
    border: 1.5px solid var(--evnet-gray-200);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14.5px;
    /* FIX: texto de País (y cualquier .form-control) recortado
       verticalmente cuando el <select> está cerrado. Causa real:
       theme.css trae `.form-control { height: calc(1.5em + 0.75rem + 2px);
       line-height: 1.5; }` (altura fija estilo Bootstrap). Este bloque
       nunca sobrescribió `height` ni `line-height`, así que la altura
       fija de theme.css se sigue calculando en base al font-size actual
       (14.5px) + line-height heredado de <body> (1.5), dando un alto de
       ~36px -- insuficiente para el padding de 12px arriba/abajo que
       definimos acá, y el contenido queda recortado por el propio
       renderizado nativo del <select>. Al poner height:auto y un
       line-height fijo, el alto pasa a depender del padding real y no
       de la fórmula vieja de Bootstrap. */
    height: auto;
    line-height: 1.3;
    color: var(--evnet-primary);
    background-color: #F7F9FC; /* --gray-50 real del sitio */
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
textarea.form-control,
.form-field textarea {
    resize: vertical;
    min-height: 110px;
}

/* --- Focus: idéntico al del sitio, mismo anillo ya usado en
   Header/Botones --- */
.form-control:focus,
.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--evnet-accent);
    box-shadow: 0 0 0 4px var(--evnet-accent-soft);
    background-color: var(--evnet-white);
}

/* --- Disabled: mismo criterio ya definido para botones en la
   Etapa 3 (opacidad reducida, sin interacción) --- */
.form-control:disabled,
.form-control[readonly] {
    opacity: .5;
    cursor: not-allowed;
    background-color: var(--evnet-gray-200);
}

/* --- Checkbox / Radio (Bootstrap custom-control): no existen
   con diseño propio en el sitio — se extiende el color y radio
   ya usados en el resto del sistema en vez de dejar el estilo
   nativo del navegador. --- */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--evnet-accent);
    border-color: var(--evnet-accent);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px var(--evnet-accent-soft);
}
.custom-control-input:disabled ~ .custom-control-label {
    opacity: .5;
    cursor: not-allowed;
}
.custom-control-label::before {
    border: 1.5px solid var(--evnet-gray-200);
}
.custom-checkbox .custom-control-label::before {
    border-radius: 5px; /* proporcional al 10px de los inputs de texto */
}

/* --- Mensaje de ayuda por campo: no existe en el sitio: se
   extiende con la misma escala tipográfica que ya usa el
   label, un nivel por debajo. --- */
.form-text {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--gray-400);
}

/* --- Error / éxito por campo: no existen en el sitio a nivel
   de campo individual (solo a nivel de formulario completo vía
   .form-status) — se extienden usando exactamente los mismos
   dos colores que el sitio ya define para ese propósito. --- */
.is-invalid,
.form-control.is-invalid {
    border-color: #B91C1C;
}
.is-invalid:focus,
.form-control.is-invalid:focus {
    border-color: #B91C1C;
    box-shadow: 0 0 0 4px rgba(185, 28, 28, .15);
}
.invalid-feedback {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: #B91C1C;
}
.is-valid,
.form-control.is-valid {
    border-color: #15803D;
}
.valid-feedback {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: #15803D;
}

/* --- Mensaje de estado general del formulario (igual patrón
   que .form-status del sitio, reutilizable en cualquier
   formulario de WHMCS que muestre un resultado general) --- */
.form-status {
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    min-height: 18px;
}
.form-status.success { color: #15803D; }
.form-status.error { color: #B91C1C; }

/* --- FIX: dropdown de País casi invisible en formularios WHMCS
   (ej. clientareadetails.tpl, variable {$clientcountriesdropdown}).
   El <select> SÍ trae la clase .form-control (confirmado inspeccionando
   el HTML real: id="inputCountry" class="field form-control"), así que
   el color/fondo de .form-control ya le aplica en teoría. El problema
   real es que Bootstrap solo pone appearance:none en .custom-select,
   NO en .form-control cuando el elemento es un <select> nativo. Sin
   eso, algunos navegadores (Chrome/Firefox en modo oscuro del SO)
   renderizan el <select> cerrado con el widget nativo del sistema y
   pueden ignorar nuestro color/background-color para el texto visible.
   Forzamos appearance:none + color-scheme:light para que el <select>
   se pinte 100% con nuestro CSS y no con el tema oscuro del SO. Cubre
   cualquier <select class="form-control">, no solo el de País. --- */
select.form-control,
select#stateinput,
#registration select.field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color-scheme: light;
    background-color: #F7F9FC;
    color: var(--evnet-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%230A2458' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    /* FIX (11/09/2026, v3): el intento v2 (display:flex + align-items:center)
       se probó en vivo en Chrome real y el texto seguía recortado contra
       el borde superior ("Chile", "USD"), confirmado por captura de
       pantalla. Causa: display:flex en un <select> cerrado no centra de
       forma confiable el VALOR visible en todos los navegadores -- Chrome
       en varias versiones solo aplica ese centrado al menú desplegado,
       no a la caja cerrada. Se reemplaza por la técnica clásica y
       confiable cross-browser: igualar height y line-height, y anular
       el padding vertical (que ya no hace falta porque el alto fijo +
       line-height se encargan del centrado). padding-left se hereda del
       bloque general .form-control (14px), no se toca acá. */
    height: 44px;
    line-height: 41px;
    padding-top: 0;
    padding-bottom: 0;
}
select.form-control:focus,
select#stateinput:focus,
#registration select.field:focus {
    color-scheme: light;
    background-color: var(--evnet-white);
}

/* --- FIX: dropdown de Provincia/Estado en blanco (se ve así en
   clientregister.tpl / clientareadetails.tpl cuando se elige un país
   con estados definidos, ej. Estados Unidos). El campo empieza como
   <input type="text" id="state" class="field form-control">, pero
   clientregister.tpl trae un <label for="stateinput"> apuntando a un
   elemento con id="stateinput" -- esto confirma que el JS núcleo de
   WHMCS (StatesDropdown.js, no incluido en la plantilla) reemplaza
   ese input por un <select id="stateinput"> cuando el país tiene
   estados. Ese <select> generado por el JS núcleo puede NO traer la
   clase .form-control (por eso el fix de País no lo cubría), así que
   lo apuntamos también por su ID exacto, que sí es fijo y confirmado
   en el TPL, más un respaldo genérico para cualquier <select> dentro
   de .prepend-icon en el formulario de registro. --- */

/* --- Layout de dos columnas (ej. Nombre + Email), igual patrón
   que .form-row del sitio --- */
.form-row-evnet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 575.98px) {
    .form-row-evnet {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* =========================================================
   ETAPA 6 — Componente real: Listado de Productos (Standard
   Cart order form)
   Archivos que renderizan esta pantalla (confirmados leyendo
   el código real, sin modificarlos):
     orderforms/standard_cart/products.tpl
     orderforms/standard_cart/sidebar-categories.tpl
   Ningún .tpl fue tocado. 100% CSS puro sobre los selectores
   reales de esas plantillas, reutilizando los tokens ya
   definidos en las Etapas 3, 4 y 5. No se afecta ningún otro
   uso de .btn-success ni de .card en el resto del sistema:
   los selectores están acotados a las clases propias de esta
   pantalla (.product, .product-pricing, .btn-order-now, etc.)
   ========================================================= */

/* --- Título de página ("Hosting"): mismo peso/familia que el
   resto del sistema --- */
.header-lined h1 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: clamp(27px, 3.3vw, 36px);
    line-height: 1.15;
    color: var(--evnet-primary);
    letter-spacing: -0.01em;
}

/* --- Tarjeta de producto: reutiliza el sistema de la Etapa 4
   (radio grande + elevación en hover, como una card interactiva
   ya que cada .product es seleccionable) --- */
.products .product {
    background-color: var(--evnet-white);
    border: 1px solid var(--evnet-gray-200);
    border-radius: var(--evnet-radius-lg);
    padding: 26px;
    height: calc(100% - 24px);
    margin-bottom: 24px;
    transition: transform .3s var(--evnet-btn-ease),
                box-shadow .3s var(--evnet-btn-ease),
                border-color .3s var(--evnet-btn-ease);
}
.products .product:hover {
    transform: translateY(-6px);
    box-shadow: var(--evnet-shadow-lg);
    border-color: transparent;
}
.products .product header {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--evnet-primary);
    margin-bottom: 6px;
}
.products .product header .qty {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 100px;
    background-color: var(--evnet-accent-soft);
    color: var(--evnet-accent);
    font-size: 11.5px;
    font-weight: 700;
}

/* --- Lista de características --- */
.products .product-desc ul {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}
.products .product-desc ul li {
    font-size: 13.5px;
    color: var(--gray-600);
    padding: 6px 0;
    border-bottom: 1px solid var(--evnet-gray-200);
}
.products .product-desc ul li:last-child {
    border-bottom: 0;
}
.products .product-desc ul li .feature-value {
    font-weight: 700;
    color: var(--evnet-primary);
    margin-right: 4px;
}

/* --- Precio: el punto focal. El ciclo de facturación es texto
   plano sin span propio en el .tpl, así que se resuelve por
   cascada: el contenedor completo queda "secundario" y el
   precio se destaca al pisar ese estilo con más especificidad. --- */
.products .product-pricing {
    margin-top: 18px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-400);
    line-height: 1.6;
}
.products .product-pricing .price {
    display: inline-block;
    font-size: 28px;
    font-weight: 800;
    color: var(--evnet-primary);
    line-height: 1.2;
}
.products .product-pricing small {
    display: block;
    font-size: 12px;
    color: var(--gray-400);
}

/* --- Botón "Comprar ahora": clase propia (.btn-order-now),
   así que el cambio queda acotado a este botón y no afecta
   ningún otro .btn-success del resto del sistema. --- */
.btn-order-now {
    background-color: var(--evnet-accent);
    border-color: var(--evnet-accent);
    color: var(--evnet-white);
    border-radius: var(--evnet-btn-radius);
    font-weight: 700;
}
.btn-order-now:hover,
.btn-order-now:focus {
    background-color: var(--evnet-accent-2);
    border-color: var(--evnet-accent-2);
    color: var(--evnet-white);
}

/* --- Sidebar (Categorías / Acciones): ya usa .card/.card-header
   del sistema de la Etapa 4 sin necesidad de nada nuevo; solo
   se agrega el estado hover/active de .list-group-item, que
   todavía no existía en el sistema. --- */
.card-sidebar .list-group-item {
    border: 0;
    border-radius: 8px;
    margin: 2px 8px;
    width: calc(100% - 16px);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--evnet-primary);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.card-sidebar .list-group-item:hover,
.card-sidebar .list-group-item.active,
.card-sidebar .list-group-item.list-group-item-action:hover,
.card-sidebar .list-group-item.list-group-item-action.active {
    background-color: var(--evnet-accent-soft) !important;
    color: var(--evnet-accent) !important;
}
.card-sidebar .list-group-item i {
    color: var(--evnet-accent);
    width: 18px;
    text-align: center;
}
.card-sidebar .card-header .panel-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--evnet-primary);
    margin: 0;
}
.card-sidebar .card-minimise {
    color: var(--gray-400);
}

/* =========================================================
   "¡Hola, [nombre]!" en escritorio — versión segura.
   La copia desktop queda FUERA de #nav para no participar en
   autoCollapse ni en el menú "Más". Mobile conserva la copia
   original del Nivel 1.
   ========================================================= */
header.header .header-bottom-row .navbar-collapse {
    align-items: center;
}
header.header .header-bottom-row .nav-account-desktop {
    flex: 0 0 auto;
    margin-left: var(--space-sm);
}
header.header .header-bottom-row .nav-account-desktop > li {
    margin: 0;
}
@media (max-width: 991.98px) {
    header.header .header-bottom-row .nav-account-desktop {
        display: none !important;
    }
}

/* =========================================================
   Botón "Volver a los detalles del servicio" (WHMCS core,
   pantalla de Actualizar/Degradar -- upgrade.tpl). No existe
   como HTML fijo en ninguna plantilla EVNET, lo imprime el
   core con las clases genéricas .btn.btn-block.btn-primary,
   por eso se acota con el ícono fa-arrow-circle-left que solo
   tiene este botón, y no con esas clases (que sí se repiten
   en otros botones, como "Renovar servicio"). En la columna
   angosta del sidebar de esa pantalla, el texto no entra en
   una sola línea y queda cortado por el white-space: nowrap
   global de .btn -- aquí se permite el salto de línea solo
   para este botón puntual (soporte de :has() amplio en todos
   los navegadores modernos a 2026). */
.btn.btn-primary:has(> i.fa-arrow-circle-left) {
    white-space: normal;
    line-height: 1.3;
}