/*
 * Tema "Qlave" del panel (Filament). Traduce el lenguaje de capitalqlave.com
 * a un panel de trabajo: marino + rojo sobre cielo y crema, Manrope/DM Sans,
 * radios generosos y la sombra dura como único gesto de marca.
 *
 * Reglas del tema:
 *  - La sombra dura (--q-hard) solo va en lo que se destaca: tarjetas de
 *    estadísticas, modales y el formulario del login. Tablas y secciones van
 *    planas con borde fino, para que una lista larga no se vuelva ruido.
 *  - Los colores base (primary/danger/gray) se definen en AdminPanelProvider;
 *    aquí solo van los tokens que Filament no genera (superficies, líneas).
 *  - CSS plano, sin Tailwind: el CSS compilado de Filament está purgado.
 */

/* ---------- Fuentes (alojadas localmente) ---------- */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dmsans-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
    --q-navy: #203c56;
    --q-red: #d72235;
    --q-cream: #fffdf9;
    --q-sky: #b9d9ee;
    --q-sky-soft: #e4eff7;
    --q-peach: #f6c6ad;
    --q-line: rgba(32, 60, 86, 0.16);
    --q-hard: 0 6px 0 0 rgba(32, 60, 86, 0.42);
    --q-r-sm: 8px;
    --q-r-md: 14px;
    --q-r-lg: 20px;
    --q-display: 'Manrope', 'DM Sans', system-ui, sans-serif;
    --font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

html.dark {
    --q-line: rgba(255, 255, 255, 0.1);
    --q-hard: none;
}

body {
    font-family: var(--font-family);
}

body.fi-body .fi-header-heading,
body.fi-body .fi-section-header-heading,
body.fi-body .fi-modal-heading,
body.fi-body .fi-simple-header-heading,
body.fi-body .fi-wi-stats-overview-stat-value,
body.fi-body .fi-sidebar-group-label {
    font-family: var(--q-display);
}

body.fi-body .fi-header-heading {
    font-weight: 700;
    letter-spacing: -0.035em;
}

body.fi-body .fi-section-header-heading,
body.fi-body .fi-modal-heading {
    font-weight: 650;
    letter-spacing: -0.02em;
}

/* ---------- Fondo: papel milimétrico sobre cielo ---------- */

html body.fi-body {
    background-color: var(--q-sky-soft);
    background-image:
        linear-gradient(rgba(32, 60, 86, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 60, 86, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
    background-attachment: fixed;
}

html.dark body.fi-body {
    background-color: rgb(var(--gray-950));
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* ---------- Barra superior: plana, de borde a borde ---------- */
/*
 * Igual en los cuatro modos de navegación (superior, lateral, compacto y
 * oculto). Con el sidebar, su encabezado mide lo mismo (h-16) y comparte el
 * filete rojo, así que la línea corre continua por debajo de ambos.
 */

body.fi-body .fi-topbar {
    background: transparent;
}

body.fi-body .fi-topbar > nav {
    border-radius: 0;
    background-color: var(--q-cream);
    box-shadow: 0 2px 20px rgba(32, 60, 86, 0.07);
    --tw-ring-color: transparent;
}

html.dark body.fi-body .fi-topbar > nav {
    background-color: rgb(var(--gray-900));
}

body.fi-body .fi-topbar-item-button {
    border-radius: var(--q-r-sm);
}

body.fi-body .fi-topbar-item-active .fi-topbar-item-button {
    background-color: rgba(var(--primary-600), 0.1);
}

/* ---------- Barra lateral ---------- */
/*
 * Ojo con la especificidad: app.css de Filament se carga DESPUÉS de este
 * archivo y trae `lg:bg-transparent` (el sidebar quedaba transparente en
 * escritorio, con el papel milimétrico asomando) y `bg-gray-100` en el ítem
 * activo. Por eso `aside.fi-sidebar` y los `!important` de abajo.
 */

body.fi-body aside.fi-sidebar {
    background-color: var(--q-cream) !important;
    box-shadow: 1px 0 0 0 var(--q-line) !important;
}

html.dark body.fi-body aside.fi-sidebar {
    background-color: rgb(var(--gray-900)) !important;
}

body.fi-body .fi-sidebar-header {
    background-color: transparent !important;
}

body.fi-body .fi-sidebar-nav-groups {
    gap: 1.25rem;
}

body.fi-body .fi-sidebar-group-label {
    font-weight: 700;
    letter-spacing: -0.005em;
    color: rgba(32, 60, 86, 0.62);
}

html.dark body.fi-body .fi-sidebar-group-label {
    color: rgb(var(--gray-400));
}

body.fi-body .fi-sidebar-item-button {
    border-radius: var(--q-r-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Inactivos: texto marino, ícono marino atenuado, hover en azul cielo. */
body.fi-body aside.fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    color: var(--q-navy);
}

body.fi-body aside.fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
    color: rgba(32, 60, 86, 0.55);
}

body.fi-body aside.fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: rgba(185, 217, 238, 0.5);
}

html.dark body.fi-body aside.fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    color: rgb(var(--gray-200));
}

html.dark body.fi-body aside.fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
    color: rgb(var(--gray-500));
}

html.dark body.fi-body aside.fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

/* Activo: bloque marino sólido con texto crema, como el botón "Ingresar" del sitio. */
body.fi-body aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: var(--q-navy) !important;
}

body.fi-body aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
body.fi-body aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
body.fi-body aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button svg {
    color: var(--q-cream) !important;
}

html.dark body.fi-body aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: rgba(var(--primary-500), 0.6) !important;
}

/* ---------- Marca ---------- */

body.fi-body .fi-logo {
    width: auto;
}

/* El texto del logo es marino: en modo oscuro se usa la variante clara (sin ficha de fondo). */
html.dark .fi-split-login-logo {
    content: url('/img/logo-oscuro.png');
}

/* ---------- Superficies ---------- */

body.fi-body .fi-section,
body.fi-body .fi-ta-ctn,
body.fi-body .fi-fo-wizard,
body.fi-body .fi-wi-chart,
body.fi-body .fi-in-repeatable-item {
    border-radius: var(--q-r-lg);
    background-color: var(--q-cream);
    box-shadow: none;
    --tw-ring-color: var(--q-line);
}

html.dark body.fi-body .fi-section,
html.dark body.fi-body .fi-ta-ctn,
html.dark body.fi-body .fi-fo-wizard,
html.dark body.fi-body .fi-wi-chart {
    background-color: rgb(var(--gray-900));
}

body.fi-body .fi-ta-header-cell {
    font-size: 0.78rem;
    font-weight: 650;
    color: rgb(var(--gray-500));
}

body.fi-body .fi-ta-header-cell-label {
    font-family: var(--q-display);
}

body.fi-body .fi-ta-row:hover {
    background-color: rgba(var(--primary-600), 0.045);
}

/* ---------- Estadísticas del Escritorio: tarjetas con sombra dura ---------- */

body.fi-body .fi-wi-stats-overview-stat {
    border-radius: var(--q-r-lg);
    background-color: var(--q-cream);
    box-shadow: var(--q-hard);
    --tw-ring-color: var(--q-line);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.fi-body .fi-wi-stats-overview-stat:hover {
    transform: translateY(2px);
    box-shadow: 0 4px 0 0 rgba(32, 60, 86, 0.42);
}

html.dark body.fi-body .fi-wi-stats-overview-stat {
    background-color: rgb(var(--gray-900));
}

/* El color semántico de cada Stat se ve en el ícono (ver admin-custom.css). */
body.fi-body .fi-wi-stats-overview-stat-icon {
    background-color: rgba(var(--primary-600), 0.1);
    color: var(--q-navy);
}

html.dark body.fi-body .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--primary-300));
}

/* ---------- Botones y campos ---------- */

body.fi-body .fi-btn {
    border-radius: var(--q-r-sm);
    font-weight: 600;
}

body.fi-body .fi-input-wrp {
    border-radius: var(--q-r-sm);
}

body.fi-body .fi-fo-field-wrp-label span {
    font-weight: 600;
}

/* Asterisco de campo obligatorio: el de Filament es un superíndice diminuto; aquí se agranda y contrasta en claro y oscuro. */
body.fi-body .fi-fo-field-wrp-label sup {
    display: inline;
    margin-left: 0.15rem;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
    top: 0.12em;
    color: #d72235 !important;
}

html.dark body.fi-body .fi-fo-field-wrp-label sup {
    color: #ff6b7a !important;
}

body.fi-body .fi-badge {
    border-radius: 999px;
    font-weight: 600;
}

/* ---------- Modales: sombra dura, como las tarjetas del sitio ---------- */

body.fi-body .fi-modal-window {
    border-radius: var(--q-r-lg) !important;
    background-color: var(--q-cream);
    box-shadow: var(--q-hard), 0 24px 48px rgba(32, 60, 86, 0.18);
}

html.dark body.fi-body .fi-modal-window {
    background-color: rgb(var(--gray-900));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* ---------- Filete rojo bajo la barra superior y el encabezado del sidebar ---------- */

body.fi-body .fi-topbar > nav,
body.fi-body .fi-sidebar-header {
    position: relative;
}

body.fi-body .fi-topbar > nav::after,
body.fi-body .fi-sidebar-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background-color: var(--q-red);
    pointer-events: none;
}

/* ---------- Acción principal en rojo ---------- */
/*
 * Solo los botones rellenos de color primario (Nuevo…, Guardar, Timbrar…).
 * El resto del primario (enlaces, foco, interruptores, menú activo) sigue
 * en marino. Filament pinta el botón con variables inline (--c-*), por eso
 * el !important: gana a un estilo en línea.
 */

body.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    --c-400: var(--danger-400) !important;
    --c-500: var(--danger-500) !important;
    --c-600: var(--danger-600) !important;
}

/* ---------- Acciones de fila en pastilla ---------- */

body.fi-body .fi-ta-actions .fi-link {
    --q-act: var(--primary-600);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background-color: rgba(185, 217, 238, 0.45);
    color: rgb(var(--q-act));
    font-weight: 600;
    transition: background-color 0.15s ease;
}

body.fi-body .fi-ta-actions .fi-link:hover {
    background-color: rgba(185, 217, 238, 0.85);
}

body.fi-body .fi-ta-actions .fi-link.fi-color-danger {
    --q-act: var(--danger-600);
    background-color: rgba(var(--danger-600), 0.1);
}

body.fi-body .fi-ta-actions .fi-link.fi-color-danger:hover {
    background-color: rgba(var(--danger-600), 0.2);
}

body.fi-body .fi-ta-actions .fi-link.fi-color-success { --q-act: var(--success-700); background-color: rgba(var(--success-600), 0.12); }
body.fi-body .fi-ta-actions .fi-link.fi-color-warning { --q-act: var(--warning-700); background-color: rgba(var(--warning-600), 0.12); }
body.fi-body .fi-ta-actions .fi-link.fi-color-gray { --q-act: var(--gray-700); background-color: rgba(var(--gray-500), 0.12); }

body.fi-body .fi-ta-actions .fi-link span,
body.fi-body .fi-ta-actions .fi-link svg {
    color: inherit !important;
    font-weight: inherit;
}

html.dark body.fi-body .fi-ta-actions .fi-link {
    --q-act: var(--primary-300);
    background-color: rgba(255, 255, 255, 0.08);
}

html.dark body.fi-body .fi-ta-actions .fi-link:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

html.dark body.fi-body .fi-ta-actions .fi-link.fi-color-danger { --q-act: var(--danger-400); }
html.dark body.fi-body .fi-ta-actions .fi-link.fi-color-success { --q-act: var(--success-400); }
html.dark body.fi-body .fi-ta-actions .fi-link.fi-color-warning { --q-act: var(--warning-400); }
html.dark body.fi-body .fi-ta-actions .fi-link.fi-color-gray { --q-act: var(--gray-300); }

/* ---------- Badges de estado: pastilla suave con punto de color ---------- */

body.fi-body .fi-badge {
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    font-weight: 600;
    --tw-ring-color: transparent;
    box-shadow: none;
}

body.fi-body .fi-badge::before {
    content: '';
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: currentColor;
}

/* Un badge con ícono ya trae su propio símbolo: sin punto. */
body.fi-body .fi-badge:has(.fi-badge-icon)::before {
    display: none;
}

/* ---------- Estados vacíos: arco de la marca ---------- */

body.fi-body .fi-ta-empty-state {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
}

body.fi-body .fi-ta-empty-state-icon-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 5rem;
    padding: 0;
    margin-bottom: 1.25rem;
    border-radius: 999px 999px 8px 8px;
    background-color: var(--q-peach);
    box-shadow: 0 5px 0 0 rgba(32, 60, 86, 0.3);
}

html.dark body.fi-body .fi-ta-empty-state-icon-ctn {
    background-color: rgba(246, 198, 173, 0.18);
    box-shadow: none;
}

body.fi-body .fi-ta-empty-state-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--q-navy);
}

html.dark body.fi-body .fi-ta-empty-state-icon {
    color: rgb(var(--primary-200));
}

body.fi-body .fi-ta-empty-state-heading {
    font-family: var(--q-display);
    font-weight: 650;
    letter-spacing: -0.02em;
}

/* ---------- Usuarios: avatar en arco y tarjetas de rol ---------- */
/* Avatar circular con iniciales. Operador = durazno, administrador = marino,
   así el rol se lee antes que el texto. */

body.fi-body .q-usuario {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.15rem 0;
}

body.fi-body .q-usuario-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background-color: var(--q-peach);
    color: var(--q-navy);
    font-family: var(--q-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.fi-body .q-usuario-avatar--admin {
    background-color: var(--q-navy);
    color: var(--q-cream);
}

html.dark body.fi-body .q-usuario-avatar {
    background-color: rgba(246, 198, 173, 0.2);
    color: #f6c6ad;
}

html.dark body.fi-body .q-usuario-avatar--admin {
    background-color: rgba(var(--primary-500), 0.6);
    color: #fff;
}

/* Sucursales: mismo avatar, pero cuadrado redondeado con el ícono de tienda. */
body.fi-body .q-usuario-avatar--sucursal {
    border-radius: var(--q-r-md);
    background-color: var(--q-sky);
    color: var(--q-navy);
}

body.fi-body .q-usuario-avatar--inactiva {
    background-color: rgba(var(--gray-500), 0.15);
    color: rgb(var(--gray-500));
}

body.fi-body .q-usuario-avatar-icono {
    width: 1.25rem;
    height: 1.25rem;
}

html.dark body.fi-body .q-usuario-avatar--sucursal {
    background-color: rgba(185, 217, 238, 0.18);
    color: #b9d9ee;
}

html.dark body.fi-body .q-usuario-avatar--inactiva {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgb(var(--gray-400));
}

/* Emisores: logo en lugar de iniciales, y CSD vencido. */
body.fi-body .q-usuario-avatar--logo {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--q-line);
}

body.fi-body .q-usuario-avatar--logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body.fi-body .q-cuenta-mal {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    background-color: rgba(var(--danger-600), 0.14);
    color: rgb(var(--danger-700));
}

html.dark body.fi-body .q-cuenta-mal { color: rgb(var(--danger-400)); }

body.fi-body .q-usuario-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

body.fi-body .q-usuario-nombre {
    font-weight: 600;
    color: rgb(var(--gray-950));
}

html.dark body.fi-body .q-usuario-nombre {
    color: #fff;
}

body.fi-body .q-usuario-correo {
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

body.fi-body .q-usuario-tu {
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(var(--primary-600), 0.1);
    color: rgb(var(--primary-600));
    font-size: 0.7rem;
    font-weight: 650;
}

html.dark body.fi-body .q-usuario-tu {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(var(--primary-300));
}

/* Radio con descripción → tarjetas seleccionables. */
body.fi-body .q-radio-cards > div > label {
    height: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--q-line);
    border-radius: var(--q-r-md);
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.fi-body .q-radio-cards > div > label:hover {
    background-color: rgba(185, 217, 238, 0.25);
}

body.fi-body .q-radio-cards > div > label:has(input:checked) {
    border-color: var(--q-navy);
    background-color: rgba(185, 217, 238, 0.4);
    box-shadow: 0 0 0 1px var(--q-navy);
}

html.dark body.fi-body .q-radio-cards > div > label:has(input:checked) {
    border-color: rgb(var(--primary-400));
    box-shadow: 0 0 0 1px rgb(var(--primary-400));
    background-color: rgba(255, 255, 255, 0.06);
}

/* ---------- Configuración de timbrado: una tarjeta por cuenta ---------- */
/* Mismo código de color que la tabla de Sucursales: Producción = marino, Pruebas = naranja. */

body.fi-body .q-cuenta {
    border-top: 5px solid var(--q-navy);
}

body.fi-body .q-cuenta--pruebas {
    border-top-color: rgb(var(--warning-500));
}

html.dark body.fi-body .q-cuenta {
    border-top-color: rgb(var(--primary-400));
}

html.dark body.fi-body .q-cuenta--pruebas {
    border-top-color: rgb(var(--warning-400));
}

body.fi-body .q-cuenta-estado {
    padding: 0.85rem 1rem;
    border-radius: var(--q-r-md);
    background-color: rgba(185, 217, 238, 0.3);
}

html.dark body.fi-body .q-cuenta-estado {
    background-color: rgba(255, 255, 255, 0.05);
}

body.fi-body .q-cuenta-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

body.fi-body .q-cuenta-ok,
body.fi-body .q-cuenta-falta {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
}

body.fi-body .q-cuenta-ok {
    background-color: rgba(var(--success-600), 0.14);
    color: rgb(var(--success-700));
}

body.fi-body .q-cuenta-falta {
    background-color: rgba(var(--warning-600), 0.16);
    color: rgb(var(--warning-700));
}

html.dark body.fi-body .q-cuenta-ok { color: rgb(var(--success-400)); }
html.dark body.fi-body .q-cuenta-falta { color: rgb(var(--warning-400)); }

body.fi-body .q-cuenta-host {
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

body.fi-body .q-cuenta-uso {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(var(--gray-600));
}

html.dark body.fi-body .q-cuenta-uso { color: rgb(var(--gray-300)); }

/* ---------- Barra inferior móvil ---------- */

.fi-bottom-nav {
    background-color: rgba(255, 253, 249, 0.94);
}

html.dark .fi-bottom-nav {
    background-color: rgba(var(--gray-900), 0.94);
}

/* ---------- Login ---------- */

.fi-split-login {
    --l-ink: var(--q-navy);
    --l-muted: #4f6474;
    --l-bg: var(--q-sky);
    display: flex;
    min-height: 100vh;
    width: 100%;
    background-color: var(--l-bg);
    background-image:
        linear-gradient(rgba(32, 60, 86, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 60, 86, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    font-family: var(--font-family);
    color: var(--l-ink);
}

html.dark .fi-split-login {
    --l-ink: #f3efe6;
    --l-muted: #b3c3d1;
    --l-bg: #172c40;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.fi-split-login-brand {
    position: relative;
    display: flex;
    width: 54%;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 2.5rem 3.5rem 0;
}

.fi-split-login-logo {
    display: block;
    height: 5rem;
    width: auto;
    border-radius: var(--q-r-md);
}

.fi-split-login-brand-middle {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    padding-top: 2.5rem;
}

.fi-split-login-heading {
    margin: 0;
    font-family: var(--q-display);
    font-size: clamp(2.6rem, 4.6vw, 4.2rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.07em;
    color: var(--l-ink);
}

.fi-split-login-heading span {
    display: block;
    color: var(--q-red);
}

html.dark .fi-split-login-heading span {
    color: #ff6b7a;
}

.fi-split-login-tagline {
    margin: 1.25rem 0 0;
    max-width: 24rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--l-muted);
}

.fi-split-login-points {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fi-split-login-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--l-ink);
}

.fi-split-login-points svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    color: var(--q-red);
}

/* Arcos: el motivo de la portada del sitio, aquí solo como forma. */
.fi-split-login-arcs {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    height: 11rem;
    margin: 2rem -2rem 0;
    pointer-events: none;
}

.fi-split-login-arcs i {
    display: block;
    flex: none;
    width: 7.5rem;
    border-radius: 999px 999px 0 0;
    background-color: var(--q-cream);
    transform-origin: bottom center;
}

.fi-split-login-arcs i:nth-child(1) { height: 7rem;  transform: rotate(-12deg); }
.fi-split-login-arcs i:nth-child(2) { height: 9rem;  transform: rotate(-6deg); }
.fi-split-login-arcs i:nth-child(3) { height: 11rem; background-color: var(--q-peach); }
.fi-split-login-arcs i:nth-child(4) { height: 9.5rem; transform: rotate(6deg); }
.fi-split-login-arcs i:nth-child(5) { height: 7.5rem; transform: rotate(12deg); }

html.dark .fi-split-login-arcs i {
    background-color: rgba(255, 255, 255, 0.08);
}

html.dark .fi-split-login-arcs i:nth-child(3) {
    background-color: rgba(246, 198, 173, 0.22);
}

/* Formulario */

.fi-split-login-form-panel {
    display: flex;
    width: 46%;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.fi-split-login-form-brand {
    display: none;
}

.fi-split-login-form-inner {
    width: 100%;
    max-width: 25rem;
    padding: 2.25rem 2rem;
    border-radius: var(--q-r-lg);
    background-color: var(--q-cream);
    box-shadow: var(--q-hard);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

html.dark .fi-split-login-form-inner {
    background-color: rgb(var(--gray-900));
    border-color: var(--q-line);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.fi-split-login-form-panel .fi-simple-header-heading {
    font-weight: 650;
    letter-spacing: -0.03em;
}

.fi-split-login-form-panel .fi-btn-color-primary {
    font-weight: 650;
}

@media (max-width: 1023px) {
    .fi-split-login-brand {
        display: none;
    }

    .fi-split-login-form-panel {
        width: 100%;
        flex-direction: column;
    }

    .fi-split-login-form-brand {
        display: block;
        margin-bottom: 1.5rem;
    }

    .fi-split-login-form-brand .fi-split-login-logo {
        height: 4.5rem;
    }
}

/* Campo obligatorio: franja roja a la izquierda del control (además del asterisco). Solo el control propio del campo, no los de un Repeater. */
body.fi-body .fi-fo-field-wrp > .grid:has(> div > .fi-fo-field-wrp-label sup) > div > .fi-input-wrp {
    border-left: 4px solid #d72235;
}

html.dark body.fi-body .fi-fo-field-wrp > .grid:has(> div > .fi-fo-field-wrp-label sup) > div > .fi-input-wrp {
    border-left-color: #ff6b7a;
}

/* ===== Pestañas de formulario (Facturas, REP, Notas de crédito, Sucursales…) =====
   La pestaña activa es un bloque de color: marino con texto crema en claro, azul cielo con texto
   marino en oscuro (mismo código que el ítem activo del sidebar). Antes solo cambiaba a un gris casi
   igual al fondo y no se distinguía en cuál se estaba. `fi-active` lo pone Filament. */
html body.fi-body .fi-fo-tabs .fi-tabs-item { border-radius: 0.5rem; }
html body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active {
    background-color: #203c56 !important;
    box-shadow: 0 2px 0 0 #d72235;
}
html body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
html body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon,
html body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active > span:not(.fi-badge) { color: #fffdf9 !important; }
html.dark body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active { background-color: #b9d9ee !important; box-shadow: 0 2px 0 0 #ff6b7a; }
html.dark body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
html.dark body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon,
html.dark body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active > span:not(.fi-badge) { color: #203c56 !important; }
/* El contador de la pestaña activa (p. ej. nº de conceptos) es una pastilla invertida: antes heredaba el texto crema sobre su fondo claro y no se leía. */
html body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active .fi-badge { background-color: #fffdf9 !important; color: #203c56 !important; }
html.dark body.fi-body .fi-fo-tabs .fi-tabs-item.fi-active .fi-badge { background-color: #203c56 !important; color: #b9d9ee !important; }
html body.fi-body .fi-fo-tabs .fi-tabs-item:not(.fi-active):hover { background-color: rgba(185, 217, 238, .45); }
html.dark body.fi-body .fi-fo-tabs .fi-tabs-item:not(.fi-active):hover { background-color: rgba(185, 217, 238, .12); }