@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────
   TOKENS — iOS-inspired Legal App
   ───────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg:            #f0f2f5;
    --surface:       #ffffff;
    --surface-alt:   #f0f4fa;
    --surface-glass: rgba(255,255,255,0.97);
    --surface-deep:  #e8edf6;

    /* Text */
    --text:          #0f1824;
    --text-2:        #2c3a4e;
    --muted:         #556070;

    /* Brand */
    --primary:       #1460c8;
    --primary-hover: #1050aa;
    --primary-soft:  #e7f0ff;
    --accent:        #ff7a1a;

    /* Status */
    --ok:            #1b8a4a;
    --error:         #bf2c2c;

    /* Structure */
    --border:        #d4dce8;
    --border-light:  rgba(180, 200, 230, 0.5);

    /* Radius — professional desktop */
    --radius:        10px;
    --radius-sm:     7px;
    --radius-xs:     5px;
    --radius-pill:   999px;

    /* Shadows — clean and restrained */
    --shadow:        0 1px 4px rgba(10,25,55,0.07), 0 4px 14px rgba(10,25,55,0.07);
    --shadow-lg:     0 2px 8px rgba(10,25,55,0.06), 0 10px 28px rgba(10,25,55,0.1);
    --shadow-card:   0 1px 2px rgba(10,25,55,0.05), 0 2px 6px rgba(10,25,55,0.04);

    /* Timing */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:      150ms;
    --dur-mid:       240ms;

    /* Bottom nav height + iOS safe area */
    --bottom-nav-h:  64px;
    --safe-top:      env(safe-area-inset-top, 0px);
    --safe-bottom:   env(safe-area-inset-bottom, 0px);
    --safe-left:     env(safe-area-inset-left, 0px);
    --safe-right:    env(safe-area-inset-right, 0px);
    --topnav-offset: 0px;
    --tenant-bg-soft: transparent;
}

/* ─────────────────────────────────────────────
   RESET + BASE
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* El degradado de fondo vive en <body>, cuyo alto es el del contenido: en una
       pagina corta (p.ej. /contabilidad sin expedientes) el body terminaba antes que
       la ventana y por debajo asomaba el fondo del html — se veia como si la pagina
       estuviera "cortada" a media pantalla. Afecta a cualquier pagina corta, no solo
       a contabilidad. */
    background: var(--bg);
}

/* FRANJA BLANCA AL RECARGAR UNA PAGINA PUBLICA.
   La regla de arriba es correcta para la APP (fondo claro), pero en CSS el
   fondo del <body> solo se propaga al lienzo si <html> NO tiene uno propio.
   Como aqui si lo tiene, en las paginas publicas —cuyo body es oscuro
   (#050d1c)— el lienzo se quedaba claro: al recargar se veia el gris asomando
   por debajo del contenido oscuro, y tambien al hacer overscroll.
   No se tapa con un div al final: se corrige el lienzo, que es la causa.
   :has() evita tener que tocar el <html> de cada plantilla publica; donde no
   estuviera soportado simplemente se queda el comportamiento anterior. */
html:has(> body.landing-body) {
    background: #050d1c;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: linear-gradient(180deg, var(--tenant-bg-soft) 0px, var(--bg) 220px);
    -webkit-font-smoothing: antialiased;
    /* space for fixed top nav and iOS bottom tab bar on mobile */
    padding-top: var(--topnav-offset);
    padding-bottom: 0;
    overflow-x: hidden; /* prevent horizontal scroll from overflowing selects */
}

a {
    color: var(--primary);
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ─────────────────────────────────────────────
   NAVBAR — iOS frosted glass
   ───────────────────────────────────────────── */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1400;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    padding-top: calc(15px + var(--safe-top));
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
                0 2px 10px rgba(10,25,55,0.05);
}

.topnav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0.5;
    pointer-events: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.brand-logo {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 9px;
    object-fit: cover;
}

.hero-logo {
    width: min(100%, 260px);
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 14px rgba(6,18,42,0.22));
}

/* Desktop menu */
/* La barra NUNCA debe partirse en dos filas: no es un diseno, es un desbordamiento, y
   ademas descuadra el hueco que reserva --topnav-offset. Antes tenia flex-wrap: wrap y
   al quedarse sin sitio "Ayuda" saltaba a una segunda linea.
   Cuando deja de caber NO se scrollea en horizontal: se pasa a hamburguesa (ver el
   bloque @media de mas abajo, subido a 1400px justamente por eso). */
.menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: 14px;
}

/* Los enlaces no se comprimen: preferimos scroll a textos aplastados o partidos. */
.menu > a,
.menu > .menu-group,
.menu > .nav-sep {
    flex-shrink: 0;
}

.menu-auth {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tenant-context-switcher {
    display: inline-flex;
    align-items: center;
    width: clamp(118px, 12vw, 172px);
    min-width: 118px;
    max-width: 172px;
    flex: 0 1 172px;
    position: relative;
}

.tenant-context-label { margin: 0; }

/* El ocultado del <select> nativo se subio a .ios-select-wrap (arriba, junto al resto del
   componente) — era la primera de las dos copias que existian de esta misma regla. */

.tenant-context-switcher.disabled { opacity: 0.6; pointer-events: none; }

/* Dos-líneas para empresa-owner */
.tenant-context-switcher--two-line {
    flex-direction: column;
    align-items: flex-start;
    width: clamp(130px, 14vw, 190px);
    max-width: 190px;
}
.tcs-empresa-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 4px 12px 0;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* En el ios-select-trigger del dos-líneas, la etiqueta del bufete aparece más pequeña */
.tenant-context-switcher--two-line .ios-select-trigger {
    border-radius: 12px;
    padding: 2px 10px 5px 12px;
}
.tenant-context-switcher--two-line .ios-select-trigger-label {
    font-size: .78rem;
}
/* Overflow dos-líneas */
.tenant-context-overflow--two-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.tenant-context-overflow--two-line .tenant-context-overflow-name {
    font-size: .78rem;
}
.tenant-context-overflow--two-line svg {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Overflow link (>= threshold) — replaces native select */
.tenant-context-overflow {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    max-width: clamp(118px, 12vw, 172px);
    transition: background 0.15s, box-shadow 0.15s;
}
.tenant-context-overflow:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,1);
    color: var(--primary, #1f7be6);
}
.tenant-context-overflow-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-context-overflow svg {
    width: 13px; height: 13px;
    stroke: #6b7280; fill: none; stroke-width: 2.5;
    flex-shrink: 0;
}

/* ── iOS custom select ─────────────────────────────────────── */
.ios-select-wrap    { position: relative; width: 100%; }

/* Esconde el <select> nativo una vez que enhanceIosSelect lo ha metido dentro de su wrap.
   Sin esto se ven los DOS a la vez, el nativo debajo del disparador iOS.
   Va aqui y no en cada pantalla a proposito: la regla vivia duplicada y con distinto
   alcance en .tenant-context-switcher (navbar) y en .firmante-row (panel de firmas), asi
   que cualquier pantalla nueva que usara .ios-select-native nacia rota — le pasaba a
   /plataforma/empresas/planes, donde el select nativo se veia duplicado.
   El selector cuelga de .ios-select-wrap, que lo crea el propio JS: un select todavia sin
   envolver (JS caido, o el escaneo aun sin correr) sigue viendose y funcionando. */
.ios-select-wrap > select.ios-select-native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.ios-select-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.78rem;
    font-weight: 600;
    color: #1c1c1e;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: box-shadow 0.15s, background 0.15s;
    user-select: none;
    text-align: left;
}

.ios-select-trigger:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,1);
}

.ios-select-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ios-select-caret {
    width: 13px; height: 13px;
    stroke: #6b7280; fill: none; stroke-width: 2.5;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.ios-select-wrap[data-open="true"] .ios-select-caret { transform: rotate(180deg); }

/* overlay — siempre activo, transparente en desktop.
   El desplegable se abre por encima de CUALQUIER modal (.confirm-overlay 3000,
   .unsaved-overlay 3100, .plan-editor-overlay 3250): se cuelga de body al abrirse y, por
   debajo de ellos, un desplegable dentro de un modal quedaba escondido tras su fondo. */
.ios-select-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 3400;
    background: transparent;
    animation: ios-fade-in 0.18s ease;
}

@keyframes ios-fade-in { from { opacity:0; } to { opacity:1; } }

/* dropdown panel — adjunto a body, posicionado por JS */
.ios-select-dropdown {
    position: absolute;
    min-width: 200px;
    background: rgba(242,242,247,0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    /* Sin esto, un select con muchas opciones (ej. bufete con 50 usuarios en el panel de
       firmas) crecia hasta salirse de la pantalla — solo scrollea la zona de opciones,
       el encabezado, el buscador y el pie quedan fijos. */
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 480px);
    z-index: 3401;
    transform-origin: top right;
    animation: ios-pop-in 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes ios-pop-in {
    from { opacity:0; transform: scale(0.88) translateY(-6px); }
    to   { opacity:1; transform: scale(1)    translateY(0); }
}

.ios-select-header {
    padding: 10px 16px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ios-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1c1c1e;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.1s;
}

.ios-select-option:last-child { border-bottom: none; }

/* ── Desplegable por secciones plegables ──────────────────────────────
   Solo se activa cuando el <select> trae <optgroup>; sin ellos el desplegable
   se pinta plano igual que siempre. Ver enhanceIosSelect en layout.html. */
.ios-select-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ios-select-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex: 0 0 auto;
}
.ios-select-search svg {
    width: 14px; height: 14px;
    stroke: #6b7280; fill: none; stroke-width: 2;
    flex-shrink: 0;
}
.ios-select-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    padding: 2px 0;
    color: #1c1c1e;
}
.ios-select-search input:focus { outline: none; }

.ios-select-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    background: rgba(0,0,0,0.025);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ios-select-group-head:hover { background: rgba(0,0,0,0.05); }
.ios-select-group-label { flex: 1; min-width: 0; }
.ios-select-group-count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,0.07);
    color: #6b7280;
}
.ios-select-group-chevron {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2.5;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.ios-select-group[data-open="true"] .ios-select-group-chevron { transform: rotate(90deg); }

.ios-select-group .ios-select-group-items { display: none; }
.ios-select-group[data-open="true"] .ios-select-group-items { display: block; }
/* Sin encabezado (un unico grupo) los items se ven siempre: no hay nada que plegar. */
.ios-select-group:not(:has(.ios-select-group-head)) .ios-select-group-items { display: block; }

.ios-select-footer {
    flex: 0 0 auto;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.ios-select-footer .ios-select-option { border-bottom: none; }

.ios-select-dropdown .hidden { display: none !important; }

.ios-select-option:hover  { background: rgba(0,0,0,0.04); }
.ios-select-option:active { background: rgba(0,0,0,0.08); }

.ios-select-option.selected {
    color: var(--primary, #007aff);
    font-weight: 600;
}

.ios-select-check {
    width: 16px; height: 16px;
    stroke: var(--primary, #007aff); fill: none; stroke-width: 2.5;
    flex-shrink: 0;
    visibility: hidden;
}
.ios-select-option.selected .ios-select-check { visibility: visible; }

/* ── Mobile: bottom sheet ──────────────────────────────────── */
@media (max-width: 640px) {
    .ios-select-overlay { background: rgba(0,0,0,0.32); }

    .ios-select-dropdown {
        position: fixed;
        bottom: 0; left: 0; right: 0; top: auto;
        min-width: 0;
        border-radius: 20px 20px 0 0;
        transform-origin: bottom center;
        animation: ios-sheet-in 0.28s cubic-bezier(0.32,0.72,0,1);
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }

    @keyframes ios-sheet-in {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .ios-select-option { padding: 15px 20px; font-size: 1rem; }
}

.user-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu a {
    color: var(--text-2);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    transition: background var(--dur-fast) var(--ease-smooth),
                color var(--dur-fast) var(--ease-smooth);
}

.menu a:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.menu a.nav-active {
    background: rgba(20, 96, 200, 0.12);
    color: var(--primary);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--primary);
}

/* Dropdown group */
.menu-group {
    position: relative;
}

.menu-group-btn {
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.menu-group-btn:hover,
.menu-group.active .menu-group-btn,
.menu-group.open .menu-group-btn {
    background: var(--primary-soft);
    color: var(--primary);
}

.menu-submenu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    z-index: 200;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    animation: dropdown-in var(--dur-fast) var(--ease-smooth);
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.menu-submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: var(--radius-xs);
    font-size: 0.92rem;
}

.submenu-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
}

.menu-group.open .menu-submenu {
    display: block;
}

/* Hamburger */
.nav-toggle {
    display: none;
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-xs);
    color: var(--text);
    transition: background var(--dur-fast);
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1120px) {
    .tenant-context-switcher {
        width: clamp(108px, 19vw, 146px);
        min-width: 108px;
        max-width: 146px;
    }
}

.nav-toggle:hover { background: var(--surface-alt); }

.hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: background var(--dur-mid);
}

.hamburger-bar::before,
.hamburger-bar::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: currentColor;
    left: 0;
    transition: transform var(--dur-mid) var(--ease-smooth),
                top var(--dur-mid) var(--ease-smooth);
}

.hamburger-bar::before { top: -6px; }
.hamburger-bar::after  { top:  6px; }

.topnav.nav-open .hamburger-bar           { background: transparent; }
.topnav.nav-open .hamburger-bar::before   { top: 0; transform: rotate(45deg); }
.topnav.nav-open .hamburger-bar::after    { top: 0; transform: rotate(-45deg); }

/* ─────────────────────────────────────────────
   BOTTOM TAB BAR — iOS style (mobile only)
   ───────────────────────────────────────────── */
.bottom-tabbar {
    display: none;  /* shown via media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    background: rgba(248, 250, 254, 0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -1px 0 rgba(255,255,255,0.7) inset,
                0 -4px 16px rgba(10,25,55,0.07);
}

.bottom-tabbar-inner {
    display: flex;
    align-items: stretch;
    height: var(--bottom-nav-h);
    max-width: 480px;
    margin: 0 auto;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 4px;
    border-radius: 10px;
    transition: color var(--dur-fast), background var(--dur-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
    min-height: 44px;
}

.tab-item.active {
    color: var(--primary);
}

.tab-item:active {
    background: var(--surface-alt);
    transform: scale(0.94);
}

.tab-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-fast) var(--ease-spring);
}

.tab-item.active .tab-icon {
    stroke-width: 2.2;
}

.tab-item:active .tab-icon {
    transform: scale(0.88);
}

/* ─────────────────────────────────────────────
   PAGE LAYOUT
   ───────────────────────────────────────────── */
.page {
    max-width: min(1840px, calc(100vw - 32px));
    margin: 24px auto;
    padding: 0 20px 52px;
}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

/* ─────────────────────────────────────────────
   CARD — iOS elevated surface
   ───────────────────────────────────────────── */
.card {
    /* Lo lee la barra de guardar del formulario para salir a sangre sin pasarse. */
    --card-pad-x: 28px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 28px;
    transition: box-shadow var(--dur-mid) var(--ease-smooth);
    min-width: 0;
    max-width: 100%;
}

.card:focus-within {
    box-shadow: var(--shadow);
}

.card-danger-zone {
    border-color: #fca5a5;
    background: #fff8f8;
}

.card-danger-zone .section-title {
    color: #b91c1c;
}

.hero-main {
    background: linear-gradient(145deg, #0b2848 0%, #1255a0 48%, #1e6fd6 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Subtle shine overlay */
.hero-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}

.hero-main h1 {
    margin-top: 0;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero-main p {
    color: rgba(255,255,255,0.88);
    max-width: 52ch;
    font-size: 1.02rem;
}

/* ─────────────────────────────────────────────
   STAT CARDS
   ───────────────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stats.stats-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-smooth);
    cursor: default;
}

.stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.stat-label {
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.88rem;
}

/* ─────────────────────────────────────────────
   SECTION / GRID
   ───────────────────────────────────────────── */
.section-title {
    margin: 0 0 16px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
}

.section-stack {
    display: grid;
    gap: 20px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* 🔴 Las columnas ya podian encoger (`minmax(0, 1fr)`), pero los HIJOS no: un elemento de
   rejilla lleva `min-width: auto`, o sea que no baja de su ancho minimo de contenido. En
   /panel eso hacia que la tarjeta de "Ultimos expedientes" midiera 436px dentro de una celda
   de 330 y se saliera de la pagina — 91px de desborde a 390, con los chips y el final de los
   nombres fuera de la pantalla y sin barra para llegar a ellos.
   Poner el `minmax(0, 1fr)` de la columna sin esto es hacer la mitad del trabajo. */
.grid-2 > * {
    min-width: 0;
}

.layout-main-aside {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr);
    gap: 24px;
    align-items: start;
}

.contabilidad-expediente-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.contabilidad-workflow {
    display: grid;
    gap: 24px;
}

/* 1840, igual que el resto de la aplicacion. Estuvo en 1680 y era la UNICA pantalla mas
   estrecha que las demas: medido en un monitor de 27" (2560), /expedientes, /clientes,
   /contabilidad, /modelos, /usuarios y /mi-empresa daban 1840 y esta 1680, asi que al pasar
   del panel general a la ficha de un expediente los bordes de la tarjeta pegaban un salto
   hacia dentro de 160px sin ningun motivo visible. */
.accounting-page {
    max-width: min(1840px, calc(100vw - 32px));
}

.accounting-overview-card {
    display: grid;
    gap: 18px;
    padding: 24px;
}

/* ── Tablas de "Actividad economica" ──────────────────────────────────────────
   Las dos (movimientos y cambios en condiciones) se quedaron sin las DOS cosas que el
   resto de tablas de la app si tienen: reparto fijo de anchos y cambio a fichas. Su ancho
   minimo natural (762px medidos, lo empujan el email del usuario y los dos botones de la
   ultima columna) arrastraba a la tarjeta y a la PAGINA entera: 21px de desborde a 800 y
   431px a 390 — mas de la mitad de la tarjeta fuera de la pantalla, sin forma de llegar al
   boton de anular. Verificado navegando la app en vivo, no solo leyendo el CSS.
   Con reparto fijo la suma es siempre el 100% del contenedor, asi que la tabla no puede
   sacar barra horizontal caiga lo que caiga dentro. Si se anade o quita una columna, hay
   que repartir de nuevo. */
@media (min-width: 901px) {
    .accounting-activity-card table.table-sm {
        table-layout: fixed;
        width: 100%;
    }

    /* Movimientos: codigo, fecha, monto, estado, usuario (lo que sobra), accion */
    .accounting-activity-card #activityPayments .col-cod { width: 140px; }
    .accounting-activity-card #activityPayments .col-fec { width: 100px; }
    /* 130: con 110 el importe se partia en dos lineas ("400,00" / "EUR"). Los 10px salen de
       CODIGO, que iba sobrado (el codigo son 13 caracteres monoespaciados). */
    .accounting-activity-card #activityPayments .col-mon { width: 130px; white-space: nowrap; }
    .accounting-activity-card #activityPayments .col-est { width: 100px; }
    /* 230 y no 200: medido, "Ver detalle" (95px) + "Anular" (88px) + el hueco piden 191, y
       una columna de 200 deja 168 utiles tras el padding — los dos botones se partian en dos
       lineas dentro de la celda. */
    .accounting-activity-card #activityPayments .col-acc { width: 230px; }

    /* Cambios en condiciones: una columna menos y sin boton de anular */
    .accounting-activity-card #activityConfigs .col-fec { width: 150px; }
    .accounting-activity-card #activityConfigs .col-net { width: 120px; }
    .accounting-activity-card #activityConfigs .col-est { width: 140px; }
    .accounting-activity-card #activityConfigs .col-acc { width: 140px; }

    /* El email es lo unico que puede desbordar su celda: se recorta con puntos suspensivos
       y el valor entero sigue estando en el detalle del movimiento. */
    .accounting-activity-card .col-usr {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Los dos botones de la ultima columna, en linea y a su tamano. Sin esto la regla
       global de ≤1100 (`.actions .btn { flex: 1 1 calc(50% - 4px) }`) los apila dentro de
       una celda de 200px. */
    .accounting-activity-card td .actions {
        width: auto;
    }

    .accounting-activity-card td .actions .btn,
    .accounting-activity-card td .actions button.btn {
        flex: 0 0 auto;
    }
}

/* Umbral 900 y no los 820 de costumbre: son 6 columnas y ademas la ultima lleva dos botones.
   Restando lo que piden las otras cinco (660px), para que al email le queden ~170px utiles
   hace falta un contenedor de ~830px, o sea ~900 de ventana. Por debajo, fichas.
   ⚠️ Las dos tablas cambian al MISMO ancho a proposito: comparten tarjeta y se alternan con
   las pestañas, asi que dos umbrales distintos harian que una fuese tabla y la otra fichas
   segun que pestaña estuvieras mirando. */
@media (max-width: 900px) {
    .accounting-activity-card .table-wrap:has(~ .mobile-cards) {
        display: none;
    }

    /* El marco lo pone .mobile-cards y cada ficha es una fila con su divisoria, igual que
       en el resto de la app. Se redeclara aqui y no se hereda del bloque de 820 porque
       estas fichas aparecen antes (900): entre 900 y 820 saldrian sin ningun estilo. */
    .accounting-activity-card .mobile-cards {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        overflow: hidden;
    }

    .conta-activity-cards .mobile-card {
        display: grid;
        gap: 6px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-light);
    }

    .conta-activity-cards .mobile-card:last-child {
        border-bottom: none;
    }

    .conta-activity-cards .mobile-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    /* A su tamano, no repartiendose el ancho: con la regla global de ≤1100 cada boton salia
       al 50% y "Ver detalle"/"Anular" quedaban como dos franjas. */
    .conta-activity-cards .mobile-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: auto;
        padding-top: 4px;
    }

    .conta-activity-cards .mobile-card-actions .btn,
    .conta-activity-cards .mobile-card-actions button.btn {
        flex: 0 0 auto;
    }
}

.accounting-overview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.accounting-overview-head .section-title,
.accounting-overview-head p {
    margin-bottom: 0;
}

.accounting-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: rgba(20, 96, 200, 0.1);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.accounting-context-strip {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.7fr) minmax(220px, 1fr);
    gap: 10px;
}

.accounting-context-strip > div,
.accounting-metric {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    padding: 12px 14px;
}

.accounting-context-strip strong,
.accounting-metric strong {
    overflow: hidden;
    color: var(--text);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-context-strip small,
.accounting-metric small {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.accounting-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.accounting-metric {
    min-height: 104px;
    justify-content: center;
    background: linear-gradient(180deg, #f6f9fe 0%, #eef3fb 100%);
}

.accounting-metric span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.accounting-metric strong {
    color: var(--primary);
    font-size: clamp(1.2rem, 1.6vw, 1.55rem);
    letter-spacing: -0.03em;
}

.accounting-metric.metric-warn {
    border-color: #ffcfa0;
    background: linear-gradient(180deg, #fff8ef 0%, #fff0df 100%);
}

.accounting-metric.metric-warn strong {
    color: #8a4300;
}

.accounting-actions-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #f8fbff;
}

.accounting-actions-panel h3 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.accounting-actions-panel p {
    margin: 0;
}

.accounting-warning {
    padding: 10px 12px;
    border: 1px solid #ffcfa0;
    border-radius: var(--radius-xs);
    background: #fff8ef;
    color: #7a3600;
    font-size: 0.9rem;
    font-weight: 700;
}

.accounting-activity-shell {
    display: grid;
}

.accounting-activity-card {
    display: grid;
    gap: 14px;
}

.accounting-activity-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.accounting-activity-head .section-title,
.accounting-activity-head .muted {
    margin: 0;
}

.accounting-activity-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.accounting-activity-tabs .btn {
    min-height: 38px;
}

.activity-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 2px;
    border-radius: var(--radius-pill);
    background: rgba(20, 96, 200, 0.12);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0 6px;
}

.accounting-activity-tools {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.activity-search-field {
    margin: 0;
    min-width: min(460px, 100%);
    flex: 1 1 380px;
}

.activity-search-field label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.js-activity-panel[hidden] {
    display: none !important;
}

.js-activity-panel .table-wrap {
    margin-top: 2px;
}

.js-activity-no-results {
    margin-top: 10px;
}

.accounting-history-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(420px, 0.85fr);
}

.accounting-modal-overlay {
    padding: 24px;
    background: rgba(10, 20, 40, 0.42);
    backdrop-filter: blur(9px) saturate(140%);
    -webkit-backdrop-filter: blur(9px) saturate(140%);
}

.accounting-modal-dialog {
    position: relative;
    max-width: min(1120px, calc(100vw - 36px));
    width: min(1120px, calc(100vw - 36px));
    max-height: min(88vh, 820px);
    overflow: auto;
    padding: 26px;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
    color: var(--text);
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.modal-close:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Para cerrar botones que ya viven dentro de su propio encabezado en flex
   (no necesitan flotar en la esquina del modal) */
.modal-close.inline {
    position: static;
}

.accounting-modal-panel[hidden] {
    display: none !important;
}

.accounting-modal-panel {
    display: grid;
    gap: 18px;
}

.accounting-modal-titlebar {
    padding-right: 42px;
}

.accounting-modal-titlebar h3 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.accounting-modal-titlebar p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.accounting-modal-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.65fr);
    gap: 18px;
    align-items: start;
}

.accounting-modal-summary {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.accounting-modal-summary h4 {
    margin: 0;
    font-size: 0.96rem;
}

.accounting-modal-summary .summary-card {
    background: var(--surface);
}

.accounting-modal-form {
    min-width: 0;
}

.accounting-guidance-box {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid #ffcfa0;
    border-radius: var(--radius-xs);
    background: #fff8ef;
    color: #7a3600;
}

.accounting-guidance-box span {
    font-size: 0.9rem;
}

.lawyer-panel-layout {
    grid-template-columns: minmax(0, 1.9fr) minmax(360px, 1fr);
}

.main-col, .side-col { min-width: 0; }

/* usuarios: columna principal flexible, alta de usuario fija */
.usuarios-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
}

.side-sticky {
    position: sticky;
    top: 84px;
}

/* ─────────────────────────────────────────────
   TOOLBAR
   ───────────────────────────────────────────── */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   BUTTONS — iOS rounded
   ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 11px 16px;
    min-height: 44px;
    cursor: pointer;
    transition: opacity var(--dur-fast),
                background var(--dur-fast),
                box-shadow var(--dur-fast),
                transform var(--dur-fast) var(--ease-spring);
    font-family: inherit;
    text-decoration: none;
    letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn:hover:not(:disabled):not(.is-loading) {
    background: var(--primary-hover);
    box-shadow: 0 4px 16px rgba(20,96,200,0.25);
    transform: translateY(-1px);
}

.btn:active:not(:disabled):not(.is-loading) {
    transform: scale(0.97) translateY(0);
    box-shadow: none;
}

.btn:disabled,
.btn.loading {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.is-loading {
    opacity: 0.72;
    cursor: wait;
    pointer-events: none;
    position: relative;
}

.btn.is-loading::after {
    content: '';
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.55s linear infinite;
    flex-shrink: 0;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

#importOfficialForm.is-busy { opacity: 0.95; }

.btn-svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.btn.small {
    padding: 8px 13px;
    font-size: 0.875rem;
    min-height: 36px;
    border-radius: var(--radius-xs);
}

.btn.secondary {
    background: var(--surface-alt);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn.secondary:hover:not(:disabled):not(.is-loading) {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 2px 10px rgba(10,25,55,0.1);
}

.btn.warn {
    background: #fff4ea;
    color: #7a3600;
    border-color: #ffcfa0;
}

.btn.warn:hover:not(:disabled):not(.is-loading) {
    background: #ffe8d4;
    box-shadow: 0 4px 12px rgba(200,80,0,0.15);
}

.btn.ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-2);
}

.btn.ghost:hover:not(:disabled):not(.is-loading) {
    background: var(--surface-alt);
    box-shadow: none;
    transform: none;
}

/* Acción: Desactivar / Activar — ámbar/dorado */
.btn.action-amber {
    background: #fffaeb;
    color: #7d5a00;
    border-color: #ffd87a;
}
.btn.action-amber:hover:not(:disabled):not(.is-loading) {
    background: #fff4cc;
    box-shadow: 0 4px 12px rgba(200,140,0,0.15);
}

/* Acción: verde suave (Activar) */
.btn.action-green {
    background: #f0fbf4;
    color: #0f6332;
    border-color: #7dd8a3;
}
.btn.action-green:hover:not(:disabled):not(.is-loading) {
    background: #dff6e8;
    box-shadow: 0 4px 12px rgba(15,100,50,0.15);
}

/* Acción: Reset / seguridad — violeta suave */
.btn.action-violet {
    background: #f5f0ff;
    color: #5b21b6;
    border-color: #c4b5fd;
}
.btn.action-violet:hover:not(:disabled):not(.is-loading) {
    background: #ede9ff;
    box-shadow: 0 4px 12px rgba(91,33,182,0.15);
}

/* Acción: Editar — azul primario suave */
.btn.action-blue {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: rgba(20,96,200,0.35);
}
.btn.action-blue:hover:not(:disabled):not(.is-loading) {
    background: #dae8ff;
    box-shadow: 0 4px 12px rgba(20,96,200,0.2);
}

/* Acción: Eliminar — rojo verdadero */
.btn.danger {
    background: #fff0f0;
    color: #bf2c2c;
    border-color: #f5a5a5;
}
.btn.danger:hover:not(:disabled):not(.is-loading) {
    background: #ffe4e4;
    box-shadow: 0 4px 12px rgba(191,44,44,0.18);
}

.btn.danger-solid {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
}
.btn.danger-solid:hover:not(:disabled):not(.is-loading) {
    background: #b91c1c;
    box-shadow: 0 4px 14px rgba(185,28,28,0.35);
}
.btn.danger-solid:active:not(:disabled):not(.is-loading) {
    background: #991b1b;
    box-shadow: none;
}

/* Sin esto, "hidden" no alcanza a esconder un .actions: la regla del navegador para
   [hidden] tiene menos prioridad que CUALQUIER "display" puesto por una clase — asi que
   display:flex de acá abajo le ganaba al hidden, y el div quedaba oculto solo "en el papel"
   (el atributo estaba puesto, pero visualmente seguia mostrandose). */
/* 🔴 REGLA GLOBAL, y resuelve una familia entera de fallos.
   El atributo `hidden` del navegador vale `display: none` con la prioridad mas baja que
   existe, asi que CUALQUIER clase que ponga un `display` le gana: el elemento queda oculto
   "en el papel" (el atributo esta puesto y el JS cree que funciono) pero se sigue viendo.
   En este proyecto se habia parcheado CINCO veces, una clase por vez
   (`.js-activity-panel`, `.accounting-modal-panel`, `.actions`, `.unsaved-overlay`,
   `.empty`), y a la sexta volvio a aparecer: el boton "Cargar más" del historial se veia
   aunque no hubiera ni un registro, porque `.btn` declara `display: inline-flex`.
   Con esto, `el.hidden = true` oculta SIEMPRE, lleve la clase que lleve. Los cinco parches
   de arriba quedan redundantes; se dejan porque no molestan. */
[hidden] {
    display: none !important;
}

.actions[hidden] {
    display: none;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ─────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.94rem;
}

th, td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    background: #eef2fa;
    color: #2a3a52;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 2px solid var(--border);
}

tr:last-child td { border-bottom: none; }
/* Filas de detalle ocultas (bk-detail-row, display:none) siguen contando como ":last-child"
   para el selector de arriba — la fila de DATOS visible antes de ellas nunca calificaba como
   "ultima" y le quedaba un borde inferior de mas, una linea suelta que no coordinaba con el
   resto de la tabla. */
tr:has(+ tr.bk-detail-row:last-child) td { border-bottom: none; }

tbody tr {
    transition: background var(--dur-fast);
}

tbody tr:hover { background: #f8fbff; }

tbody tr.row-warning {
    background: rgba(255, 122, 26, 0.08);
}

tbody tr.row-warning:hover {
    background: rgba(255, 122, 26, 0.15);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.table-wrap table {
    min-width: 720px;
    border: none;
    border-radius: 0;
}

.th-group-divider,
.td-group-divider {
    border-left: 2px solid #b4c6de;
}

/* ─────────────────────────────────────────────
   MOBILE TABLE CARDS (shown < 700px)
   ───────────────────────────────────────────── */
.mobile-cards { display: none; }

/* ── Fichas de listado (molde unico) ──────────────────────────────────────────
   Vive en el nivel superior y NO dentro de `@media (max-width: 1100px)`, que es donde
   estaba: las fichas de /contabilidad aparecen ya a 1300 y entre 1300 y 1100 salian sin
   ningun estilo. Es inofensivo fuera del movil porque `.mobile-cards` esta en
   `display: none` hasta que la pantalla de turno lo enciende en su propio corte.
   ⚠️ EL MOLDE DE UN LISTADO (clientes, expedientes, contabilidad), y son tres reglas:
   1. Cabecera y acciones: titulo + subtitulo + chip de estado, ficha entera clicable
      (`data-href`) y las MISMAS acciones que la fila de la tabla, ni una mas ni una menos.
   2. Los datos van en UNA LINEA que fluye (`.card-facts`), con la etiqueta pequena delante
      del valor y separados por puntos — no una fila por dato.
   3. TOPE DE TRES DATOS. Lo que no entre no va en la ficha: se ve al abrirla.

   El punto 3 no es decoracion, es la mitad de la regla. Se probo cambiar solo el formato en
   /contabilidad, que tenia cinco datos, y NO arreglaba nada: los cinco se convertian en
   cuatro renglones de texto corrido donde etiqueta y valor se mezclaban — mas bajo, pero
   peor de leer. Con dos o tres datos la misma linea se lee de un vistazo. Es decir: el
   problema de una ficha cargada casi nunca es como estan colocados los datos, es cuantos
   hay. */
.mobile-card {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--border-light);
    padding: 12px 14px;
    display: grid;
    gap: 5px;
}

.mobile-card:last-child {
    border-bottom: none;
}

.mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mobile-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.3;
}

.mobile-card-subtitle {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 2px;
}

.card-facts {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.55;
    margin-top: 2px;
}

.card-facts .k {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .75;
}

.card-facts .v {
    color: var(--text-2);
    font-weight: 500;
}

/* El dato principal de la ficha (el saldo pendiente en contabilidad) en el color del texto
   normal y en negrita: es lo que se busca al recorrer la lista. */
.card-facts .destacado .v {
    color: var(--text);
    font-weight: 700;
}

.card-facts .sep {
    margin: 0 7px;
    opacity: .5;
}

/* Sin divisoria propia: la fila ya esta separada de la siguiente por el borde de
   .mobile-card, y dos lineas seguidas partian cada ficha en dos bloques. */
.mobile-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.mobile-card-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 80px;
}

/* Utilidad generica — varios paneles (ej. firmas/panel.html) hacen
   classList.toggle("hidden", ...) por JS asumiendo que esta clase existe. */
.hidden { display: none !important; }

/* ─────────────────────────────────────────────
   CHIPS / BADGES
   ───────────────────────────────────────────── */
.muted {
    color: var(--muted);
    font-size: 0.88rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.81rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.chip.pending {
    background: #fff4dd;
    color: #7d4a00;
}

.chip.done {
    background: #e2f9eb;
    color: #0f6332;
}

.chip-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ─────────────────────────────────────────────
   FORMS — iOS-style
   ───────────────────────────────────────────── */
form.inline { display: inline-block; }

form.stack {
    display: grid;
    gap: 14px;
}

label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-2);
}

input, textarea, select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font: inherit;
    font-size: 16px; /* prevent iOS zoom */
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--dur-fast),
                box-shadow var(--dur-fast),
                background var(--dur-fast);
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20,96,200,0.12);
    background: #fff;
}

input[type="date"] {
    min-height: 44px;
    padding-right: 10px;
    -webkit-appearance: auto;
    appearance: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    font-variant-numeric: tabular-nums;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    margin-left: 8px;
    filter: saturate(0.7);
}

input[type="date"].ios-native-date {
    letter-spacing: 0.02em;
}

/* Fecha fuera del rango permitido (la marca el bloque 7 de layout.html mientras se
   teclea). No se usa :invalid a secas porque tambien pinta en rojo un campo obligatorio
   vacio, que no es el caso que queremos senalar. */
input[type="date"].fecha-fuera-de-rango,
input[type="date"].fecha-fuera-de-rango:focus {
    border-color: var(--error, #bf2c2c);
    box-shadow: 0 0 0 3px rgba(191, 44, 44, 0.16);
}

input[type="date"].ios-native-date:focus {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

input[type="file"] {
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fd 100%);
    border: 1px solid #c8d4e9;
    color: var(--text-2);
    -webkit-appearance: none;
    appearance: none;
}

input[type="file"]::file-selector-button {
    border: 1px solid #b8c8e2;
    border-radius: 10px;
    padding: 8px 12px;
    margin-right: 10px;
    font: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    color: #1f3555;
    background: linear-gradient(180deg, #ffffff 0%, #f2f6fc 100%);
    cursor: pointer;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}

input[type="file"]::-webkit-file-upload-button {
    border: 1px solid #b8c8e2;
    border-radius: 10px;
    padding: 8px 12px;
    margin-right: 10px;
    font: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    color: #1f3555;
    background: linear-gradient(180deg, #ffffff 0%, #f2f6fc 100%);
    cursor: pointer;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
    border-color: #9db6dc;
    box-shadow: 0 1px 4px rgba(16, 62, 126, 0.16);
}

input[type="file"]:focus-visible::file-selector-button,
input[type="file"]:focus-visible::-webkit-file-upload-button {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20,96,200,0.15);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23556070' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Prevent iOS Safari from expanding select beyond its container */
    -webkit-appearance: none;
    appearance: none;
}

.field {
    display: grid;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* ─────────────────────────────────────────────
   TABS — iOS segmented control
   ───────────────────────────────────────────── */
/* ⚠️ Una sola fila SIEMPRE. Antes habia dos comportamientos con la frontera en 1100px:
   por encima las pestanas se partian en DOS FILAS y por debajo scrolleaban de lado. El
   salto entre uno y otro desconcierta, y en el formulario de cliente la tira va pegada
   arriba al hacer scroll: en dos filas se come el doble de pantalla fija.
   Una tira de pestanas que se arrastra es el patron normal (iOS, Android, GitHub); lo que
   no vale es una tabla que se arrastra, que es otra cosa. Las flechas de los extremos las
   pone el realce de fragments/layout.html. */
.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.tab-btn {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: var(--radius-xs);
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth),
                color var(--dur-fast),
                box-shadow var(--dur-fast);
    font-family: inherit;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.tab-btn.active {
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(10,25,55,0.1), 0 1px 3px rgba(10,25,55,0.06);
}

.tab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.6);
    color: var(--text-2);
}

.tab-panel {
    display: none;
    gap: 12px;
}

.tab-panel.active {
    display: grid;
}

.client-smart-search {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.client-smart-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.client-smart-search-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 3px 9px;
    background: rgba(20, 96, 200, 0.1);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.client-smart-search-hint {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.client-smart-search-box {
    position: relative;
}

.client-smart-search-box input[type="search"] {
    padding-left: 42px;
    padding-right: 42px;
    background: var(--surface);
}

.client-smart-search-box input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.client-smart-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.client-smart-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.client-smart-search-clear:hover {
    background: rgba(10, 25, 55, 0.08);
    color: var(--text);
}

.client-smart-search-results {
    position: absolute;
    z-index: 25;
    left: 12px;
    right: 12px;
    top: calc(100% - 10px);
    max-height: 320px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: 0 16px 38px rgba(10, 25, 55, 0.16);
}

.client-smart-result {
    display: grid;
    width: 100%;
    gap: 3px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.client-smart-result:hover,
.client-smart-result.active {
    background: rgba(20, 96, 200, 0.1);
}

.client-smart-result-main {
    font-size: 0.94rem;
    font-weight: 800;
}

.client-smart-result-meta,
.client-smart-search-empty {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.client-smart-search-empty {
    padding: 12px;
}

.field.field-search-hit {
    border-radius: var(--radius-sm);
    animation: field-search-hit 1.8s ease-out;
}

@keyframes field-search-hit {
    0% {
        background: rgba(20, 96, 200, 0.16);
        box-shadow: 0 0 0 4px rgba(20, 96, 200, 0.14);
    }
    100% {
        background: transparent;
        box-shadow: 0 0 0 0 rgba(20, 96, 200, 0);
    }
}

/* ─────────────────────────────────────────────
   MISC COMPONENTS
   ───────────────────────────────────────────── */
.subheading {
    margin: 4px 0 8px;
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 700;
}

.builder-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f9fbff;
    padding: 14px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.chip-remove {
    margin-left: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0;
}

.alert {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1px solid;
    font-weight: 600;
    font-size: 0.93rem;
}

.inline-alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 0.9rem;
}
.inline-alert--info  { color: #1a5c99; background: #e8f2fc; border-color: #b6d4f4; }
.inline-alert--warn  { color: #7a5200; background: #fff8e1; border-color: #ffe08a; }
.inline-alert--error { color: #8a1d1d; background: #ffe8e8; border-color: #f4b4b4; }

.alert.success {
    color: #0e6032;
    background: #e3f8eb;
    border-color: #b6e4c7;
}

.alert.error {
    color: #8a1d1d;
    background: #ffe8e8;
    border-color: #f4b4b4;
}

.alert.info {
    color: #1a4780;
    background: #eef5ff;
    border-color: #bad1f0;
}

/* Mismo selector que la conversion a toast de fragments/layout.html: mientras la pagina
   carga, esos avisos no ocupan sitio (se muestran como toast al terminar). */
.flash-pending .alert.success,
.flash-pending .alert.error,
.flash-pending .alert.info,
.flash-pending .alert.warning {
    display: none !important;
}

/* ─────────────────────────────────────────────
   TOAST — Apple iOS notification system
   ─────────────────────────────────────────────
   Desktop : viñeta translúcida derecha, bajo navbar
   Mobile  : Dynamic Island / banner centrado, top
   ───────────────────────────────────────────── */

/* ── Stack container ── */
.toast-stack {
    position: fixed;
    top: calc(var(--topnav-offset) + 12px);
    right: 16px;
    z-index: 1900;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
    /* Stack anchored below navbar, never in front of modals (z-index 3000) */
}

/* ── Toast card ── */
.toast {
    --toast-accent:  #1460C8;
    --toast-icon-bg: rgba(20,96,200,0.12);
    --toast-fg:      #0b2040;
    --toast-bg:      rgba(248,250,253,0.88);
    --toast-border:  rgba(20,96,200,0.18);
    --toast-track:   rgba(20,96,200,0.18);
    --toast-fill:    #1460C8;

    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 12px 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--toast-border);
    background: var(--toast-bg);
    backdrop-filter: blur(28px) saturate(1.9);
    -webkit-backdrop-filter: blur(28px) saturate(1.9);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 16px rgba(0,0,0,0.08),
        0 12px 40px rgba(0,0,0,0.07),
        inset 0 1px 0 rgba(255,255,255,0.7);
    color: var(--toast-fg);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
    overflow: hidden;
    pointer-events: auto;
    cursor: default;
    user-select: none;
    will-change: transform, opacity;
    transform: translateX(calc(100% + 24px)) scale(0.92);
    opacity: 0;
    animation: toast-slide-in 420ms cubic-bezier(0.28, 1.18, 0.52, 1) forwards;
    touch-action: pan-y;
}

/* Types — Apple SF color tokens */
.toast.success {
    --toast-accent:  #30d158;
    --toast-icon-bg: rgba(48,209,88,0.12);
    --toast-fg:      #0a3320;
    --toast-bg:      rgba(236,252,242,0.90);
    --toast-border:  rgba(48,209,88,0.28);
    --toast-track:   rgba(48,209,88,0.18);
    --toast-fill:    #25a244;
}
.toast.error {
    --toast-accent:  #ff453a;
    --toast-icon-bg: rgba(255,69,58,0.11);
    --toast-fg:      #3b0a08;
    --toast-bg:      rgba(255,241,240,0.92);
    --toast-border:  rgba(255,69,58,0.28);
    --toast-track:   rgba(255,69,58,0.16);
    --toast-fill:    #e02d23;
}
.toast.warning {
    --toast-accent:  #ff9f0a;
    --toast-icon-bg: rgba(255,159,10,0.12);
    --toast-fg:      #3a1f00;
    --toast-bg:      rgba(255,248,232,0.92);
    --toast-border:  rgba(255,159,10,0.28);
    --toast-track:   rgba(255,159,10,0.18);
    --toast-fill:    #d4800a;
}

/* ── Icon circle ── */
.toast-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--toast-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    box-shadow: 0 0 0 1px var(--toast-border);
}
.toast-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--toast-accent);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Content area ── */
.toast-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 1px;
}
.toast-title {
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    color: var(--toast-fg);
    overflow-wrap: anywhere;
}
.toast-sub {
    font-size: 0.80rem;
    font-weight: 400;
    color: color-mix(in srgb, var(--toast-fg) 68%, transparent);
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.toast-link {
    color: var(--toast-accent);
    font-weight: 600;
    text-decoration: none;
}
.toast-link:hover { text-decoration: underline; }

/* ── Close button ── */
.toast-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(120,130,150,0.14);
    color: color-mix(in srgb, var(--toast-fg) 55%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-top: 3px;
    transition: background 120ms, transform 120ms;
    line-height: 1;
}
.toast-close svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
}
.toast-close:hover {
    background: rgba(120,130,150,0.28);
    transform: scale(1.12);
}

/* ── Progress bar ── */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2.5px;
    width: 100%;
    border-radius: 0 0 16px 16px;
    background: var(--toast-track);
    overflow: hidden;
}
.toast-progress-fill {
    height: 100%;
    width: 100%;
    background: var(--toast-fill);
    transform-origin: left center;
    transform: scaleX(1);
    border-radius: inherit;
    transition: transform linear;
}

/* ── Exit state ── */
.toast.hiding {
    animation: toast-slide-out 280ms cubic-bezier(0.4, 0, 0.8, 0.4) forwards;
}
.toast.swiping {
    transition: transform 60ms linear, opacity 60ms linear;
}

/* ── Keyframes ── */
@keyframes toast-slide-in {
    0%   { opacity: 0; transform: translateX(calc(100% + 24px)) scale(0.88); }
    60%  { opacity: 1; transform: translateX(-6px) scale(1.01); }
    80%  { transform: translateX(3px) scale(0.995); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-slide-out {
    0%   { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(calc(100% + 24px)) scale(0.90); }
}

/* ── Dark mode ── */
[data-theme="dark"] .toast {
    --toast-fg:     #e8eef8;
    --toast-bg:     rgba(28,34,46,0.88);
    --toast-border: rgba(255,255,255,0.10);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.22),
        0 4px 16px rgba(0,0,0,0.30),
        0 12px 40px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme="dark"] .toast.success {
    --toast-fg:  #c9f5d8;
    --toast-bg:  rgba(15,40,25,0.90);
}
[data-theme="dark"] .toast.error {
    --toast-fg:  #ffd0ce;
    --toast-bg:  rgba(44,12,10,0.92);
}
[data-theme="dark"] .toast.warning {
    --toast-fg:  #ffe8b8;
    --toast-bg:  rgba(40,24,0,0.90);
}

/* ── Mobile: centered banner (Dynamic Island style) ── */
@media (max-width: 740px) {
    .toast-stack {
        top: calc(var(--topnav-offset) + 10px);
        right: 50%;
        transform: translateX(50%);
        width: min(420px, calc(100vw - 24px));
    }
    .toast {
        border-radius: 20px;
        animation: toast-drop-in 400ms cubic-bezier(0.28, 1.18, 0.52, 1) forwards;
        box-shadow:
            0 1px 2px rgba(0,0,0,0.06),
            0 6px 20px rgba(0,0,0,0.14),
            0 20px 50px rgba(0,0,0,0.10),
            inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .toast.hiding {
        animation: toast-drop-out 240ms cubic-bezier(0.4, 0, 0.8, 0.4) forwards;
    }
    @keyframes toast-drop-in {
        0%   { opacity: 0; transform: translateY(-60%) scale(0.75); }
        55%  { opacity: 1; transform: translateY(5px) scale(1.02); }
        75%  { transform: translateY(-3px) scale(0.99); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes toast-drop-out {
        0%   { opacity: 1; transform: translateY(0) scale(1); }
        100% { opacity: 0; transform: translateY(-48px) scale(0.82); }
    }
}

/* ─────────────────────────────────────────────
   CONFIRM DIALOG — iOS action sheet on mobile
   ───────────────────────────────────────────── */
.confirm-overlay,
.unsaved-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(10,20,40,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlay-in 0.18s var(--ease-smooth);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* El de "cambios sin guardar" va por encima de cualquier otro modal ya abierto */
.unsaved-overlay {
    z-index: 3100;
}

.confirm-overlay[hidden],
.unsaved-overlay[hidden] {
    display: none !important;
}

@keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.confirm-dialog,
.unsaved-dialog {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(10,25,55,0.22);
    padding: 28px 24px 24px;
    max-width: 400px;
    width: 100%;
    animation: dialog-in 0.22s var(--ease-spring);
}

.confirm-dialog {
    background: #ffffff;
}

/* Aviso de cliente sin representante (clientes/form.html): tres acciones en una fila. */
.confirm-dialog.sin-representante-dialog {
    max-width: 560px;
}
@media (max-width: 640px) {
    .confirm-dialog.sin-representante-dialog .actions .btn {
        flex: 1 1 100%;
    }
}

/* Fondo esmerilado propio de este dialogo puntual (icono de alerta + glass) */
.unsaved-dialog {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

@keyframes dialog-in {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-dialog h3,
.unsaved-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.confirm-dialog p,
.unsaved-body {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.5;
}

.confirm-dialog .actions {
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.fieldset-section {
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    padding: 16px 16px 12px;
    margin: 0 0 14px;
}
.fieldset-legend {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 6px;
}
.required {
    color: var(--danger, #e02020);
    margin-left: 2px;
}

/* ─────────────────────────────────────────────
   UNSAVED CHANGES DIALOG
   (overlay/dialog/titulo/texto base ya definidos junto a .confirm-overlay)
   ───────────────────────────────────────────── */
.unsaved-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff3cd;
    color: #d97706;
    border: 2px solid #f59e0b;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.unsaved-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.unsaved-icon svg path,
.unsaved-icon svg line,
.unsaved-icon svg polyline,
.unsaved-icon svg polygon,
.unsaved-icon svg circle {
    fill: none;
    stroke: currentColor;
}

.unsaved-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   LIST + EMPTY
   ───────────────────────────────────────────── */
.list-clean {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.list-item {
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: box-shadow var(--dur-fast),
                transform var(--dur-fast) var(--ease-spring);
}

.list-item:hover {
    box-shadow: var(--shadow-card);
    transform: translateX(2px);
}

.empty {
    padding: 24px 20px;
    background: #f8fbff;
    border: 1.5px dashed #c0d4ee;
    border-radius: var(--radius-sm);
    color: #4d6080;
    text-align: center;
    font-size: 0.93rem;
}

/* El atributo hidden tiene que ganar SIEMPRE. Sin esto, una regla mas especifica y
   posterior que le fije display (p.ej. `.page--scroll-list .empty { display: flex }`,
   que usan /clientes y /expedientes) lo pisa y el bloque se pinta igual — pasaba con
   los dos mensajes de vacio saliendo a la vez. */
.empty[hidden] { display: none !important; }

/* ─────────────────────────────────────────────
   DETAILS / SUMMARY
   ───────────────────────────────────────────── */
details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    background: var(--surface);
}

details[open] { background: #f9fbff; }

summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-2);
    list-style: none;
}

summary::-webkit-details-marker { display: none; }

code {
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 0.83rem;
    background: var(--surface-alt);
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   MODEL SELECTOR
   ───────────────────────────────────────────── */
.model-selector {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.model-selector > .card {
    min-height: 0;
    height: 100%;
}

.model-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.template-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.template-family-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 6px;
}

.family-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: #fbfdff;
    padding: 9px 11px;
    margin-bottom: 8px;
}

.family-block summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.family-items {
    margin-top: 8px;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}

.template-link {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    transition: background var(--dur-fast);
}

.template-link a { color: var(--text); }
.template-link:last-child { border-bottom: 0; }
.template-link:hover { background: var(--surface-alt); }

.template-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
}

.template-link.compact {
    padding: 8px 8px;
    border-bottom-style: dashed;
}

/* ⚠️ CORTE UNICO DE ESTA PANTALLA: 1180px, el suelo del modo escritorio del proyecto.
   Lo usan /modelos y /plataforma/catalogo-oficial, que comparten TODO este CSS (mismo
   <main class="page page--modelos-workspace">, misma estructura por dentro).
   Por encima: las dos columnas de edicion. Por debajo: no se edita, sale el aviso de
   "hazlo desde el ordenador" (ver el bloque max-width: 1179.98px).
   Estaba en 901px y el aviso en 1024px — dos cortes distintos para la MISMA decision.
   Entre medias se aplicaban los dos a la vez: se veian el editor Y el aviso, y como el
   aviso es otra tarjeta de la rejilla abria una segunda fila que le robaba la altura al
   editor (PDF cortado, panel derecho recortado). Si algun dia se mueve este numero, hay
   que mover TAMBIEN el del bloque de abajo: son la misma frontera. */
@media (min-width: 1180px) {
    .page--modelos-workspace {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--topnav-offset) - 48px);
        padding-top: 6px;
        padding-bottom: 0;
        overflow: hidden;
    }

    .page--modelos-workspace--mapped {
        height: auto;
        min-height: calc(100vh - var(--topnav-offset) - 48px);
        overflow: visible;
    }

    .page--modelos-workspace .page-header,
    .page--modelos-workspace .cff-bar,
    .page--modelos-workspace .alert,
    .page--modelos-workspace #importRuntimeAlert,
    .page--modelos-workspace #importLogPanel,
    .page--modelos-workspace #modelSearchEmpty {
        flex: 0 0 auto;
    }

    .page--modelos-workspace .model-selector {
        flex: 1 1 auto;
        min-height: 0;
    }

    .page--modelos-workspace--mapped .model-selector {
        flex: 0 0 auto;
        height: var(--modelos-selector-height, auto);
        min-height: min(760px, calc(100vh - var(--topnav-offset) - 48px));
    }

    .page--modelos-workspace .model-selector > .card {
        min-height: 0;
        overflow: hidden;
    }

    /* ⚠️ El `:not(.pdf-editor-desktop-only)` no es cosmetico. Esta regla tiene mas peso que
       el `display: none` con el que nace el aviso de "solo escritorio", asi que sin excluirlo
       se lo forzaba a visible JUSTO en escritorio, que es donde no debe salir. Y como
       .model-selector es una rejilla de dos columnas, ese aviso de mas abria una segunda fila
       que le robaba altura al editor: el PDF se veia cortado por abajo. Un solo sintoma en el
       CSS, dos fallos en pantalla. */
    .page--modelos-workspace .model-selector > .card:not(.model-sidebar):not(.pdf-editor-desktop-only) {
        display: flex;
        flex-direction: column;
    }

    .page--modelos-workspace .model-selector > .card:not(.model-sidebar) > .toolbar {
        margin-bottom: 8px;
    }

    .page--modelos-workspace .model-selector > .card:not(.model-sidebar) .section-title {
        margin-bottom: 0;
    }

    .page--modelos-workspace .model-selector > .card:not(.model-sidebar) > .toolbar,
    .page--modelos-workspace .model-selector > .card:not(.model-sidebar) > p,
    .page--modelos-workspace .model-selector > .card:not(.model-sidebar) > .metadata-audit,
    .page--modelos-workspace .model-selector > .card:not(.model-sidebar) > .empty {
        flex: 0 0 auto;
    }

    .page--modelos-workspace .template-list,
    .page--modelos-workspace .template-family-list {
        min-height: 0;
        max-height: none;
    }

    .page--modelos-workspace .mapping-workspace {
        flex: 1 1 auto;
        min-height: 0;
    }

    .page--modelos-workspace--mapped .mapping-workspace {
        flex: 1 1 auto;
        height: var(--modelos-mapping-height, auto);
    }

    .page--modelos-workspace .mapping-preview-panel,
    .page--modelos-workspace .mapping-form-panel {
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    /* El panel de firmantes vive debajo del mapeo de campos, en la misma
       columna de altura fija. En vez de que toda la columna scrollee (eso
       generaba scroll anidado raro junto con #mappingRows, que ya scrollea
       solo), le achicamos el alto disponible al mapeo de campos y le damos
       su propio scroll acotado al panel de firmantes — cada uno con su
       area de scroll independiente, la barra de busqueda queda fija arriba. */
    .page--modelos-workspace .mapping-form-panel:has(.signature-panel) .mapping-form-stack {
        flex: 1 1 55%;
        min-height: 0;
    }

    .page--modelos-workspace .mapping-form-panel .signature-panel {
        flex: 1 1 auto;
        min-height: 120px;
        overflow-y: auto;
        padding-right: 4px;
    }

    .page--modelos-workspace .mapping-preview-panel {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .page--modelos-workspace .mapping-preview-panel > .toolbar,
    .page--modelos-workspace .mapping-preview-panel > p {
        flex: 0 0 auto;
    }

    .page--modelos-workspace .mapping-preview-panel .pdf-preview-shell {
        flex: 0 0 auto;
        min-height: 0;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-start;
    }

    .page--modelos-workspace--mapped .mapping-preview-panel .pdf-preview-shell {
        flex: 0 0 var(--modelos-pdf-shell-height, auto);
        height: var(--modelos-pdf-shell-height, auto);
    }

    .page--modelos-workspace .mapping-preview-panel .pdf-preview-shell img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .page--modelos-workspace--mapped .mapping-preview-panel .pdf-preview-shell img {
        display: block;
        width: 100%;
        height: auto;
    }

    .page--modelos-workspace .mapping-form-stack {
        min-height: 0;
        height: 100%;
    }

    .page--modelos-workspace .mapping-form-stack > .actions {
        flex: 0 0 auto;
    }

    .page--modelos-workspace .mapping-rows {
        min-height: 0;
    }
}

/* ⚠️ La OTRA MITAD del corte de 1180. Tiene que moverse SIEMPRE junto con el
   `@media (min-width: 1180px)` de arriba: si los dos numeros dejan de ser el mismo,
   vuelve a existir una franja donde conviven el editor y el aviso.
   Aqui la pantalla deja de ser un editor: una sola columna, la lista con altura propia
   y, en su lugar, el aviso de que el mapeo se hace desde el ordenador. Estas reglas
   estaban en el bloque generico de max-width: 900px, mezcladas con contabilidad y
   landing; se sacaron para poder mover su corte sin arrastrar aquellas. */
@media (max-width: 1179.98px) {
    .model-selector {
        grid-template-columns: 1fr;
    }

    .model-sidebar {
        max-height: none;
        min-height: auto;
    }

    .template-list,
    .template-family-list {
        max-height: 340px;
    }

    .mapping-workspace {
        grid-template-columns: 1fr;
    }

    .mapping-preview-panel .pdf-preview-shell {
        min-height: 340px;
    }

    /* La tarjeta del editor es "la del selector que no es ni la lista ni el aviso".
       Se apaga entera y se enciende el aviso en su lugar. Va con el mismo peso que la
       regla de arriba que la enciende, pero como viven en cortes que no se solapan,
       nunca compiten. */
    .page--modelos-workspace .model-selector > .card:not(.model-sidebar):not(.pdf-editor-desktop-only) {
        display: none;
    }

    .page--modelos-workspace .pdf-editor-desktop-only {
        display: flex;
    }
}


/* ─────────────────────────────────────────────
   MAPPING WORKSPACE
   ───────────────────────────────────────────── */
/* ⚠️ Los minimos SUMAN y deciden a partir de que ancho se corta el panel derecho:
   420 + 330 + 16 de hueco = 766px, y a 1180px de ventana (el suelo del modo escritorio)
   el hueco interior es de 802px, asi que entra. Con los 460+340 de antes hacian falta
   816px y no habia sitio hasta los 1220px: medido, entre 1200 y 901 se perdian por la
   derecha el buscador y los botones de guardar, SIN barra para llegar a ellos. Si se
   tocan estos numeros hay que rehacer la cuenta contra los 802px. */
.mapping-workspace {
    display: grid;
    grid-template-columns: minmax(420px, 1.45fr) minmax(330px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.template-alias-workspace {
    display: grid;
    grid-template-columns: minmax(460px, 1.2fr) minmax(340px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.detail-overlay {
    z-index: 3200;
}

.detail-dialog {
    max-width: min(920px, calc(100vw - 24px));
    width: min(920px, calc(100vw - 24px));
}

.detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-notes {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
    padding: 10px 12px;
    color: var(--text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.alias-editor-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: #fbfdff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.alias-editor-panel > form.stack {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: 10px;
}

.alias-editor-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.alias-editor-table { min-width: 0 !important; }

.alias-editor-table th:nth-child(1),
.alias-editor-table td:nth-child(1) { width: 56px; }

.alias-editor-table th:nth-child(4),
.alias-editor-table td:nth-child(4) { width: 120px; }

.alias-row.active { background: #eef5ff; }

.metadata-audit {
    margin: 10px 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: #f5f8ff;
    padding: 12px;
}

.metadata-audit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px 14px;
}

.metadata-audit-grid strong {
    display: block;
    font-size: 0.84rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.metadata-audit-grid code {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

.mapping-guide-note {
    margin: 0 0 8px;
    line-height: 1.35;
}

.metadata-audit--compact {
    display: flex;
    align-items: center;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 9px 12px;
}

.metadata-audit--compact > div {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.metadata-audit--compact strong {
    color: var(--muted);
    font-size: 0.78rem;
}

.metadata-audit--compact span,
.metadata-audit--compact a {
    font-size: 0.9rem;
    white-space: nowrap;
}

.mapping-preview-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: #fbfdff;
    min-height: 100%;
}

.field-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.field-inline select {
    width: auto;
    min-width: 96px;
}

.pdf-preview-shell {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: #f0f3f8;
}

.pdf-preview-shell img {
    display: block;
    width: 100%;
    height: auto;
}

.mapping-preview-panel .pdf-preview-shell {
    min-height: 560px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mapping-preview-panel .pdf-preview-shell img {
    object-fit: contain;
}

.pdf-pointer {
    position: absolute;
    border: 2px solid var(--accent);
    background: rgba(255,122,26,0.18);
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
    transition: left 120ms ease, top 120ms ease, width 120ms ease, height 120ms ease;
    pointer-events: none;
}

.pdf-pointer.hidden { display: none; }

.mapping-form-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
}

.mapping-form-panel .field {
    margin-bottom: 0;
}

.mapping-form-stack {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
}

.mapping-rows {
    flex: 1 1 auto;
    min-height: 280px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    /* Sin esto, al filtrar por el buscador de campos las pocas tarjetas visibles
       se estiraban a lo alto para llenar la columna (align-content por defecto es
       stretch). Con start conservan su altura natural y el hueco sobrante queda
       vacio abajo, como cuando la lista esta completa. */
    align-content: start;
    gap: 8px;
    padding-right: 4px;
}

.signature-panel {
    margin-top: 4px;
    padding-top: 10px;
    font-size: 0.85rem;
}

.signature-panel h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.signature-panel > p.muted {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.78rem;
    line-height: 1.3;
}

.signature-panel .signature-rows {
    min-height: 0;
    flex: 0 0 auto;
    overflow: visible;
    gap: 6px;
}

/* Formato tabla compacto: campo | rol | indice | quitar, todo en una fila
   angosta para que entre en la columna del panel sin desbordar. */
.signature-panel .signature-row {
    cursor: default;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) 52px 28px;
    align-items: end;
    gap: 6px;
    padding: 8px;
}

.signature-panel .signature-row .field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.signature-panel .signature-row .field label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.signature-panel .signature-row select,
.signature-panel .signature-row input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    font-size: 0.78rem;
    height: 30px;
}

.signature-panel .signature-row .btn.ghost.small {
    padding: 0;
    width: 28px;
    height: 30px;
    font-size: 0;
    line-height: 0;
}

.signature-panel .signature-row .btn.ghost.small::before {
    content: "\2715";
    font-size: 12px;
    line-height: 1;
}

.signature-panel .actions {
    margin-top: 10px;
    gap: 10px;
}

.signature-panel .actions .btn {
    padding: 7px 12px;
    font-size: 0.85rem;
}

.backup-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backup-schedule-summary-box {
    padding: 10px 12px;
}

.switch-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.switch-field input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.switch-slider {
    position: relative;
    width: 46px;
    height: 26px;
    flex: 0 0 46px;
    border-radius: 999px;
    background: #d4dbe8;
    border: 1px solid #c1cadb;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

.switch-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 35, 70, 0.2);
    transition: transform var(--dur-fast);
}

.switch-field input[type="checkbox"]:checked + .switch-slider {
    background: var(--primary);
    border-color: var(--primary);
}

.switch-field input[type="checkbox"]:checked + .switch-slider::after {
    transform: translateX(20px);
}

.switch-field input[type="checkbox"]:focus-visible + .switch-slider {
    box-shadow: 0 0 0 3px rgba(20,96,200,0.2);
}

.mapping-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px;
    background: var(--surface);
    display: grid;
    gap: 8px;
    cursor: pointer;
    transition: border-color var(--dur-fast),
                background var(--dur-fast),
                box-shadow var(--dur-fast);
}

.mapping-row:hover {
    background: #f8fbff;
}

.mapping-row.active {
    border-color: #7bb5ff;
    box-shadow: 0 0 0 2px rgba(127,181,255,0.2);
    background: #f4f8ff;
}

.mapping-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mapping-row-header code {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
}

.mapping-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 0.83rem;
}

/* Mismo corte que el bloque grande de arriba: por debajo de 1180 no hay edicion, asi que
   tampoco tiene sentido dejar el PDF pegado al hacer scroll. */
@media (min-width: 1180px) {
    .mapping-preview-panel {
        position: sticky;
        top: 80px;
    }
}

/* ─────────────────────────────────────────────
   SUMMARY GRID
   ───────────────────────────────────────────── */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.summary-grid div {
    display: grid;
    gap: 2px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 11px;
    min-width: 0;
}

.summary-grid strong {
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.35;
}

/* ─────────────────────────────────────────────
   LANDING PAGE
   ───────────────────────────────────────────── */
.landing-page {
    display: grid;
    gap: 22px;
}

.landing-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-light);
}

.landing-topbar-inner {
    max-width: min(1680px, calc(100vw - 20px));
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.landing-menu {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
}

.landing-menu a {
    color: var(--text-2);
    font-weight: 600;
    font-size: 0.93rem;
    padding: 7px 10px;
    border-radius: var(--radius-xs);
    transition: background var(--dur-fast);
}

.landing-menu a:hover { background: var(--surface-alt); }

.landing-topbar .actions { margin-left: auto; }

.landing-hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
}

.landing-hero-main {
    background: linear-gradient(145deg, #0a2744 0%, #1254a8 55%, #1d72d8 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.landing-hero-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}

.landing-hero-main h1 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.landing-hero-main p {
    color: rgba(255,255,255,0.9);
    max-width: 60ch;
    font-size: 1rem;
}

.landing-hero-side h2 { margin-top: 0; }

.landing-list .list-item {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 11px 13px;
}

.landing-section {
    display: grid;
    gap: 12px;
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.step-card {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--primary);
}

.step-number {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.step-card h3 {
    margin: 0 0 7px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.step-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.feature-card h3 {
    margin: 0 0 7px;
    font-size: 1rem;
    font-weight: 700;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.landing-cta {
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #ebf2ff 100%);
}

.landing-cta h2 {
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.landing-cta p {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--muted);
}

.landing-cta .actions { justify-content: center; }

/* ─────────────────────────────────────────────
   LEAD CHART
   ───────────────────────────────────────────── */
.lead-chart-wrap {
    display: grid;
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: 8px;
}

.lead-pie-shell {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto;
}

.lead-pie {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 10px rgba(255,255,255,0.5),
                0 10px 22px rgba(20,55,105,0.12);
}

.lead-pie-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 2px 8px rgba(10,25,55,0.08);
}

.lead-pie-center span {
    font-size: 0.72rem;
    color: var(--muted);
}

.lead-pie-center strong {
    font-size: 1.2rem;
    color: var(--text);
    font-weight: 700;
}

.lead-legend {
    display: grid;
    gap: 7px;
}

.lead-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    padding: 8px 12px;
    transition: background var(--dur-fast);
}

.lead-legend-row:hover { background: var(--surface-alt); }

.lead-legend-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 0;
}

.lead-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(20,50,80,0.16);
    flex: 0 0 auto;
}

.lead-legend-values {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    font-size: 0.87rem;
}

/* ─────────────────────────────────────────────
   NAV SEPARATOR & ADMIN LINKS
   ───────────────────────────────────────────── */
.nav-sep {
    width: 1px;
    height: 20px;
    background: rgba(100, 130, 170, 0.45);
    align-self: center;
    flex-shrink: 0;
    margin: 0 8px;
}

.menu a.nav-admin {
    color: var(--text-2);
    font-size: 0.92rem;
}

.menu a.nav-admin:hover {
    color: var(--text);
}

.menu .menu-group.nav-admin .menu-group-btn {
    color: var(--text-2);
    font-size: 0.92rem;
}

/* ─────────────────────────────────────────────
   PAGE HEADER — replaces .toolbar on list pages
   ───────────────────────────────────────────── */
/* Cabecera de pagina — es el rotulo de un listado, no la portada de una web.
   ⚠️ Aqui hubo un `flex-wrap: nowrap` que salio mal: los botones tienen prohibido
   encogerse y el bloque de texto podia encoger hasta cero, asi que en /clientes/nuevo
   (dos botones) el titulo se estrangulaba a UNA PALABRA POR LINEA entre 830 y 1180px.
   La solucion no es elegir entre "baja el boton" o "se aplasta el texto": es darle al
   texto un ancho minimo (ver .page-header-meta) y dejar que envuelva solo cuando ese
   minimo ya no cabe. Asi el boton se queda arriba mientras haya sitio de verdad. */
.page-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

/* `flex: 1 1 340px` es lo que impide que el titulo se estrangule: por debajo de 340px de
   texto la cabecera envuelve y el boton baja, que es feo pero legible. Aplastar el titulo
   a una palabra por linea no lo es. */
.page-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1 1 340px;
    /* Suelo real, no 0: por debajo de esto la cabecera envuelve en vez de aplastar el
       titulo. El min() evita que ese suelo desborde en un movil. */
    min-width: min(340px, 100%);
    text-align: left;
}

.page-header-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
    line-height: 1.2;
}

.page-header-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Boton de accion de la cabecera: compacto. El .btn base mide 44px de alto porque esta
   pensado para formularios (donde es un objetivo tactil); aqui es un rotulo de barra. */
.page-header-cta {
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    min-height: 38px;
    padding: 9px 15px;
    font-size: 0.88rem;
}

/* `margin-left: auto` lo mantiene pegado a la derecha SIEMPRE — en la misma linea que el
   titulo o, si algun dia no cabe, en la suya. Antes, al envolver, se quedaba a la
   izquierda y la misma pantalla se comportaba distinto segun tuviera uno o dos botones:
   con uno (.page-header-cta suelto) seguia arriba a la derecha, con dos bajaba. */
.page-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-amber {
    background: #fffaeb;
    border-color: #d97706;
    color: #92400e;
}
.btn-amber:hover:not(:disabled):not(.is-loading) {
    background: #fef3c7;
    border-color: #b45309;
    box-shadow: 0 4px 12px rgba(217,119,6,0.18);
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────
   CLIENT FORM — sticky tabs + sticky footer
   ───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   TIRA DE PESTANAS CON FLECHAS
   El envoltorio y los botones los crea el JS de fragments/layout.html: asi cualquier
   .tabs que no quepa gana flechas sin tocar su plantilla. Sin JS todo sigue funcionando
   (se arrastra con el dedo o con la rueda), solo faltan las flechas.
   ───────────────────────────────────────────── */
.tabs-scroller {
    position: relative;
    min-width: 0;
}

/* Hueco para que la primera y la ultima pestana no queden debajo de una flecha. */
.tabs-scroller.has-arrows > .tabs {
    padding-left: 32px;
    padding-right: 32px;
}

.tabs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px rgba(10, 25, 55, 0.16);
    transition: background var(--dur-fast), color var(--dur-fast);
}

.tabs-arrow[data-visible="true"] {
    display: flex;
}

.tabs-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.tabs-arrow svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tabs-arrow--izq { left: 4px; }
.tabs-arrow--der { right: 4px; }

/* Con el envoltorio puesto, lo que se queda pegado arriba es EL, no la tira: si lo fuera
   la tira, las flechas (que son hijas del envoltorio) se quedarian atras al scrollear. */
.page--client-form .tabs-scroller {
    position: sticky;
    top: var(--topnav-offset);
    z-index: 20;
    background: var(--surface-alt);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
}

.page--client-form .tabs-scroller > .tabs {
    position: static;
    box-shadow: none;
    margin-bottom: 0;
}

.page--client-form .tabs {
    position: sticky;
    top: var(--topnav-offset);
    z-index: 20;
    background: var(--surface-alt);
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    margin-bottom: 16px;
}

/* ⚠️ Los -28px iban a pelo contra el padding de .card, que en pantallas estrechas pasa a
   ser 18px: la barra se salia 10px por cada lado del recuadro. Ahora se lee el mismo
   valor que usa la tarjeta (--card-pad-x), asi no pueden desincronizarse. */
.page--client-form .form-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    margin-left: calc(var(--card-pad-x, 28px) * -1);
    margin-right: calc(var(--card-pad-x, 28px) * -1);
    padding-left: var(--card-pad-x, 28px);
    padding-right: var(--card-pad-x, 28px);
    padding-bottom: 14px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.07);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ------------------------------------------------------------
   CONTABILIDAD GENERAL - top split layout
   ------------------------------------------------------------ */
.conta-general-top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}

.conta-general-panel,
.conta-general-filters {
    min-width: 0;
}

.conta-general-panel .section-title,
.conta-general-filters .section-title {
    margin-bottom: 12px;
}

.conta-stats {
    margin-bottom: 0;
}

.conta-general-filters form.stack {
    gap: 12px;
}

.conta-general-filters .grid-2 {
    gap: 12px;
}

.conta-general-filters .actions {
    justify-content: flex-end;
}

/* ─────────────────────────────────────────────
   FILTER BAR — compact horizontal filter strip
   ───────────────────────────────────────────── */
.filter-bar {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.filter-bar > form.stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.filter-bar > form.stack .field {
    flex: 1 1 180px;
    min-width: 0;
}

.filter-bar > form.stack .actions {
    flex-shrink: 0;
    align-self: flex-end;
    width: auto;
}

/* ─────────────────────────────────────────────
   PANEL TABS — tab bar for /panel sections
   ───────────────────────────────────────────── */
.panel-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-2, #f3f5f9);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 20px;
    width: fit-content;
    max-width: 100%;
}

.panel-tab {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: calc(var(--radius-sm) - 2px);
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth),
                color var(--dur-fast),
                box-shadow var(--dur-fast);
    font-family: inherit;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.panel-tab.active {
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(10,25,55,0.1), 0 1px 2px rgba(10,25,55,0.06);
}

.panel-tab:hover:not(.active) {
    background: rgba(255,255,255,0.7);
    color: var(--text-2);
}

.panel-tab-panel {
    display: none;
}
.panel-tab-panel.active {
    display: block;
}

@media (max-width: 520px) {
    .panel-tabs { width: 100%; }
    .panel-tab  { flex: 1 1 0; text-align: center; padding: 8px 10px; font-size: 0.82rem; }
}

/* ─────────────────────────────────────────────
   KPI STRIP — horizontal KPI bar
   ───────────────────────────────────────────── */
.kpi-strip {
    display: flex;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

.kpi-item {
    flex: 1 1 0;
    background: var(--surface);
    padding: 20px 24px;
    min-width: 0;
    transition: background var(--dur-fast);
}

.kpi-item:hover {
    background: #f6f9ff;
}

/* 4 -> 2x2 a 900, no a 1100: a 1100 cada KPI medía 519px de ancho —481 en un iPad— para un
   numero y una etiqueta de dos palabras, mientras los cuatro entran comodos en una fila hasta
   ~900 (a 1180 miden 276). Mismo criterio que en las dos pantallas de contabilidad.
   ⚠️ Va aqui, justo DESPUES de `.kpi-item`, y no en un bloque de 900 cualquiera: el primer
   `@media (max-width: 900px)` del fichero esta ANTES de esa definicion base, asi que la regla
   existia y perdia por orden — los KPI seguian en una sola fila hasta 81px de ancho a 390. */
@media (max-width: 900px) {
    .kpi-item {
        flex: 1 1 calc(50% - 1px);
        min-width: calc(50% - 1px);
    }
}

.kpi-value {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0;
}

.kpi-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 6px 0 0;
}

/* ─────────────────────────────────────────────
   ENTITY HEADER — identity block for detail pages
   ───────────────────────────────────────────── */
.entity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    flex-wrap: wrap;
}

.entity-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entity-header-id {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.entity-header-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}

.entity-header-meta {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0;
}

.entity-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   CARD STACKING — replaces style="margin-top"
   Solo aplica dentro de .card-stack (columnas de tarjetas).
   NO usar en grids: el selector adyacente dispara en DOM,
   no en layout visual, y rompe grid-2 / layout-main-aside.
   ───────────────────────────────────────────── */
.card-stack > .card + .card {
    margin-top: 16px;
}

/* ─────────────────────────────────────────────
   CHIP VARIANTS — additional states
   ───────────────────────────────────────────── */
.chip.error {
    background: #ffe8e8;
    color: #8a1d1d;
}

.chip.info {
    background: #e8f0ff;
    color: #1a3f80;
}

.chip.neutral {
    background: var(--surface-alt);
    color: var(--muted);
    border: 1px solid var(--border);
}

.chip.warn {
    background: #fff3dd;
    color: #714800;
}

/* ─────────────────────────────────────────────
   SECTION LABEL — uppercase category label
   ───────────────────────────────────────────── */
.section-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────
   PERMISSIONS GRID — migrated from usuarios/listado.html
   ───────────────────────────────────────────── */
.perm-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.perm-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.perm-role-selector {
    display: flex;
    align-items: center;
}

.perm-role-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 0.875rem;
    cursor: pointer;
    background: var(--surface-alt);
}

.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

/* Con tarjetas de 190px, en un monitor de 27" caben nueve por fila: los once modulos
   quedaban en una fila llena y otra con dos, con el 70% de la segunda vacio. Ensanchando
   la tarjeta salen seis por fila (6+5), que llena las dos y ademas deja los permisos mas
   comodos de leer. Se ensancha la tarjeta en vez de topar la rejilla a proposito: topar
   dejaria un hueco muerto a la derecha dentro de una tarjeta que si ocupa todo el ancho. */
@media (min-width: 1500px) {
    .perm-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

.perm-module-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: #fff;
}

.perm-module-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}

.perm-module-name {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #374151;
    text-transform: uppercase;
}

.perm-module-badge {
    font-size: 0.72rem;
    font-weight: 600;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 20px;
    padding: 1px 7px;
}

.perm-chip-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
}

.perm-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.12s;
}

.perm-chip:hover { background: #f0f4ff; }

.perm-chip-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}

.perm-chip-label {
    font-size: 0.8rem;
    color: #374151;
    line-height: 1.2;
}

.perm-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.perm-chip:has(input[type="checkbox"]:checked)              { background: #eff6ff; }
.perm-chip:has(input[type="checkbox"]:checked) .perm-chip-dot   { background: #2563eb; border-color: #2563eb; box-shadow: inset 0 0 0 2px #fff; }
.perm-chip:has(input[type="checkbox"]:checked) .perm-chip-label { color: #1e40af; font-weight: 600; }
.perm-chip:has(input[type="checkbox"]:checked):hover        { background: #dbeafe; }

.perm-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   USER PERMISSIONS v2 — tabla con scroll
   ───────────────────────────────────────────── */

.uperm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.uperm-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.uperm-override-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    padding: 2px 10px;
}

/* Toolbar */
.uperm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.uperm-filters {
    display: flex;
    gap: 4px;
    background: var(--surface-2, #f3f5f9);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 3px;
}
.uperm-filter {
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: calc(var(--radius-xs) - 1px);
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.uperm-filter.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(10,25,55,0.08);
}
.uperm-filter:hover:not(.active) { background: rgba(255,255,255,0.6); color: var(--text-2); }

.uperm-search {
    flex: 1;
    min-width: 160px;
    max-width: 260px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 0.85rem;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
}
.uperm-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Scroll container */
.uperm-scroll {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    margin-bottom: 14px;
    scroll-behavior: smooth;
}
.uperm-scroll::-webkit-scrollbar { width: 6px; }
.uperm-scroll::-webkit-scrollbar-track { background: transparent; }
.uperm-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Module group */
.uperm-module-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface-2, #f8fafc);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}
.uperm-module-name {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #374151;
}
.uperm-module-count {
    font-size: 0.68rem;
    font-weight: 600;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 20px;
    padding: 1px 7px;
}

/* uperm-chip: chip de permiso de usuario con 3 botones icono */
.uperm-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: default;
}
.uperm-chip:hover { background: #f0f4ff; }
.uperm-chip[data-state="ALLOW"] { background: #f0fdf4; }
.uperm-chip[data-state="ALLOW"]:hover { background: #dcfce7; }
.uperm-chip[data-state="DENY"]  { background: #fef2f2; }
.uperm-chip[data-state="DENY"]:hover  { background: #fee2e2; }
.uperm-chip .perm-chip-label { flex: 1; min-width: 0; }
.uperm-chip .perm-chip-dot.user-perm-dot-on {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: inset 0 0 0 2px #fff;
}

/* 3 icon buttons */
.uperm-btns { display: flex; gap: 2px; flex-shrink: 0; margin-left: auto; }
.uperm-btn {
    position: relative;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    cursor: pointer;
    color: #9ca3af;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.uperm-btn svg { width: 11px; height: 11px; pointer-events: none; }
.uperm-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.uperm-btn:hover { border-color: #9ca3af; color: #374151; background: #f3f4f6; }
.uperm-btn.is-inherit.checked { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.uperm-btn.is-allow.checked   { background: #ecfdf5; border-color: #86efac; color: #166534; }
.uperm-btn.is-deny.checked    { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

.uperm-empty { padding: 16px 0; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 640px) { .uperm-search { max-width: 100%; } }

.user-perm-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.user-perm-chip-list {
    gap: 6px;
    padding: 8px;
}

.user-perm-chip {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: #ffffff;
    cursor: default;
}

.user-perm-chip:hover {
    background: #f8fbff;
}

.user-perm-chip .perm-chip-dot {
    margin-top: 2px;
}

.user-perm-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.user-perm-hint {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.2;
}

.user-perm-controls {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 7px;
    border-top: 1px dashed var(--border);
}

.user-perm-choice {
    position: relative;
}

.user-perm-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.user-perm-choice span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: #4b5563;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 9px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    cursor: pointer;
}

.user-perm-choice.is-inherit input:checked + span {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.user-perm-choice.is-allow input:checked + span {
    background: #ecfdf3;
    border-color: #86efac;
    color: #166534;
}

.user-perm-choice.is-deny input:checked + span {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* ─────────────────────────────────────────────
   LOCKED INPUTS
   ───────────────────────────────────────────── */
input.is-locked,
textarea.is-locked,
select.is-locked {
    background: #ecf1f8;
    color: #3d4f6a;
    cursor: not-allowed;
    border-color: #cdd8ea;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — TABLET 768–1024px
   ───────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 701px) {
    .mapping-workspace,
    .template-alias-workspace {
        grid-template-columns: 1.2fr 1fr;
    }

    .landing-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — TABLET 900px
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero, .grid-2 {
        grid-template-columns: 1fr;
    }

    .layout-main-aside {
        grid-template-columns: 1fr;
    }

    .accounting-context-strip,
    .accounting-modal-grid {
        grid-template-columns: 1fr;
    }

    /* Los KPI se quedan en 2x2 hasta movil — ver el bloque de 1100. */
    .accounting-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accounting-actions-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .accounting-actions-panel .actions,
    .accounting-actions-panel .btn {
        width: 100%;
    }

    .accounting-activity-head {
        flex-direction: column;
        align-items: stretch;
    }

    .accounting-activity-tabs {
        width: 100%;
    }

    .accounting-activity-tabs .btn {
        flex: 1 1 220px;
        justify-content: center;
    }

    .accounting-activity-tools {
        align-items: stretch;
    }

    .activity-search-field {
        flex-basis: 100%;
        min-width: 0;
    }

    .side-sticky {
        position: static;
    }

    /* .model-selector / .model-sidebar / .template-list / .template-family-list /
       .mapping-workspace / .mapping-preview-panel .pdf-preview-shell se movieron al
       bloque max-width: 1179.98px (corte unico de /modelos y /catalogo-oficial).
       .template-alias-workspace se queda aqui: es de /plantillas/{id}/editar, que tiene
       su propio corte y no comparte layout con esas dos. */
    .template-alias-workspace {
        grid-template-columns: 1fr;
    }

    .metadata-audit-grid {
        grid-template-columns: 1fr;
    }

    .backup-schedule-grid {
        grid-template-columns: 1fr;
    }

    .lead-chart-wrap {
        grid-template-columns: 1fr;
    }

    .lead-pie-shell {
        width: 170px;
        height: 170px;
    }

    .landing-hero {
        grid-template-columns: 1fr;
    }

    .landing-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ─────────────────────────────────────────────
   TABLE COMFORTABLE (.table-sm) — agrupación lógica
   Mantiene el mismo padding base; solo confirma
   vertical-align: middle (la base global ya lo hace).
   ───────────────────────────────────────────── */
.table-sm th,
.table-sm td {
    padding: 14px 16px;
    vertical-align: middle;
}

.table-sm th {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.td-entity {
    min-width: 170px;
}

.td-primary {
    display: block;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.td-sub {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.35;
}

/* ─────────────────────────────────────────────
   /clientes — la tabla NO scrollea en horizontal
   El listado usaba el ancho automatico del navegador, asi que una sola celda larga (un
   email de 30 caracteres, una etiqueta de origen de tres palabras) estiraba la tabla mas
   alla del contenedor y aparecia la barra horizontal: la columna de acciones quedaba
   cortada y habia que arrastrar para llegar a los botones.
   Con table-layout: fixed el reparto lo decidimos nosotros y la suma es SIEMPRE el 100%
   del contenedor — nunca puede desbordar, tenga el contenido que tenga.
   ⚠️ Con table-layout: fixed los min-width de celda (.td-entity) dejan de tener efecto:
   manda el ancho declarado de la columna. Si se anade una columna aqui, hay que darle su
   ancho o repartir de nuevo.
   ───────────────────────────────────────────── */
.page--clientes-list .table-wrap table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

/* ─────────────────────────────────────────────
   /expedientes — mismo molde que /clientes
   Cinco columnas pasaron a cuatro al sacar los datos de pago, asi que ahora caben de sobra;
   aun asi el reparto se declara para que no vuelva a decidirlo el navegador (una celda
   larga estiraba la tabla y aparecia la barra de arrastrar).
   "Expediente" no lleva ancho: se queda con todo el sobrante, es lo que identifica la fila.
   ───────────────────────────────────────────── */
/* ⚠️ El reparto fijo solo por encima de 820px. Con `table-layout: fixed` y anchos en px,
   por debajo de ~600px las columnas se comprimen hasta casi cero y el texto sale UNA LETRA
   POR LINEA, con los encabezados montados unos sobre otros. Y no lo detecta un chequeo de
   desbordamiento: la tabla "cabe", solo que es ilegible. Por debajo de 820 mandan las
   fichas (.mobile-cards), asi que la tabla ni se ve. */
@media (min-width: 821px) {
    .page--exp-list .table-wrap table {
        table-layout: fixed;
        width: 100%;
        min-width: 0;
    }
}

/* Tipo (con el servicio debajo) y estado del tramite. Con ~790px de tabla (el corte de 821),
   18+16+15% + cobro + acciones dejan al nombre del expediente ~200px. */
.page--exp-list .col-tipo {
    width: 18%;
    overflow-wrap: anywhere;
}

.page--exp-list .col-tipo .td-sub {
    display: block;
}

.page--exp-list .col-estado-tramite {
    width: 16%;
    overflow-wrap: anywhere;
}

.page--exp-list .col-tipo .chip,
.page--exp-list .col-estado-tramite .chip {
    margin-left: 4px;
}

/* Responsable: nombre y, si esta desactivado, su chip. */
.page--exp-list .col-responsable {
    width: 15%;
    overflow-wrap: anywhere;
}

.page--exp-list .col-responsable .chip {
    margin-left: 4px;
}

/* En un monitor grande la columna del nombre se quedaba con ~1020px para textos de 30
   caracteres, mientras TRAMITE y ESTADO se apinaban a la derecha: no desbordaba nada, solo
   sobraba sitio mal repartido. A partir de 1500 se le da mas aire a las otras tres; el
   nombre sigue quedandose con ~880px, de sobra para lo que lleva. */
@media (min-width: 1500px) {
    .page--exp-list .col-tipo {
        width: 20%;
    }

    .page--exp-list .col-estado-tramite {
        width: 18%;
    }

    .page--exp-list .col-estado {
        width: 170px;
    }

    .page--exp-list .col-acciones {
        width: 85px;
    }
}

.page--exp-list .col-estado {
    width: 140px;
}

/* Ficha movil del listado: archivado y cobro a la derecha del titulo. */
.page--exp-list .mobile-card-chips {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 50%;
}

.page--exp-list .col-acciones {
    /* 85 y no 190: la columna ya solo lleva el kebab. Los 105px que se liberan se los queda
       el nombre del expediente, que era justo la columna que se quedaba corta. */
    width: 85px;
    text-align: right;
}

.page--exp-list .col-acciones .icon-actions {
    justify-content: flex-end;
}

.page--exp-list .td-entity {
    overflow-wrap: anywhere;
}

/* Cliente (sin ancho) se queda con todo el sobrante: es la columna que da identidad. */
.page--clientes-list .col-contacto {
    width: 170px;
}

.page--clientes-list .col-email {
    width: 32%;
    /* Un email no tiene espacios: sin esto se sale de su celda en vez de partirse. */
    overflow-wrap: anywhere;
}

.page--clientes-list .td-entity {
    overflow-wrap: anywhere;
}

.page--clientes-list .col-acciones {
    /* 85 y no 190, por lo mismo que en /expedientes: la columna ya solo lleva el kebab. */
    width: 85px;
    text-align: right;
}

.page--clientes-list .col-acciones .icon-actions {
    justify-content: flex-end;
}

/* Los botones de una fila NUNCA se apilan uno encima de otro: si no caben se ensancha la
   columna, no se parte en dos lineas.
   `.icon-actions` ya declara nowrap, pero `.table-wrap td .actions` (0,3,1) le gana a
   `.icon-actions` (0,1,0) y volvia a poner wrap: wrap. */
.table-wrap td .actions.icon-actions,
.mobile-card-actions.icon-actions {
    flex-wrap: nowrap;
}

/* ─────────────────────────────────────────────
   SUMMARY CARD — ficha compacta en sidebar
   ───────────────────────────────────────────── */
.summary-card {
    background: var(--surface-alt);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-light);
    padding: 12px 14px;
    display: grid;
    gap: 9px;
}

.summary-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.91rem;
}

.summary-card-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.summary-card-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

/* Side-col card density */
.side-col .card {
    padding: 18px 20px;
}

.side-col .subheading {
    font-size: 0.88rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────
   TABLE ACTIONS — comfortable inside rows
   ───────────────────────────────────────────── */
.table-wrap td .actions {
    gap: 6px;
    flex-wrap: wrap;
}

.table-wrap td .btn.small {
    padding: 7px 12px;
    font-size: 0.85rem;
    min-height: 34px;
}

/* ─────────────────────────────────────────────
   IOS-STYLE INPUT — prueba comparativa
   ───────────────────────────────────────────── */
input.ios-input {
    background: rgba(118, 118, 128, 0.08);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 0.92rem;
    color: #1c1c1e;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    box-shadow: none;
}

input.ios-input::placeholder {
    color: #8e8e93;
}

input.ios-input:hover {
    background: rgba(118, 118, 128, 0.12);
}

input.ios-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--primary, #007aff);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* ─────────────────────────────────────────────
   INPUT WITH INLINE ACTION ICONS
   ───────────────────────────────────────────── */
.input-with-actions {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-with-actions input,
.input-with-actions select {
    flex: 1;
    padding-right: 76px;
    min-width: 0;
}

.input-suffix {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 3px;
    align-items: center;
}

.icon-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    text-decoration: none;
    padding: 0;
}

.icon-btn-sm svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn-sm:hover {
    background: var(--surface-alt, #f3f4f6);
    color: var(--text, #1f2937);
}

.icon-btn-sm.action-blue {
    color: #1d4ed8;
}
.icon-btn-sm.action-blue:hover {
    background: #dbeafe;
}

.icon-btn-sm.ghost {
    color: #9ca3af;
}
.icon-btn-sm.ghost:hover {
    background: #f3f4f6;
    color: #6b7280;
}

/* ─────────────────────────────────────────────
   ICON BUTTONS — iOS-style compact icon actions
   ───────────────────────────────────────────── */
.icon-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: var(--surface-alt, #f3f4f6);
    color: var(--text, #1f2937);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    flex-shrink: 0;
    text-decoration: none;
    padding: 0;
}

.icon-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.icon-btn:hover {
    background: var(--primary-light, #dbeafe);
    color: var(--primary, #1d4ed8);
    transform: scale(1.08);
}

.icon-btn:active {
    transform: scale(0.96);
}

.icon-btn.action-blue {
    background: #eff6ff;
    color: #1d4ed8;
}
.icon-btn.action-blue:hover {
    background: #dbeafe;
    color: #1e40af;
}

.icon-btn.ghost {
    background: transparent;
    color: var(--text-muted, #6b7280);
}
.icon-btn.ghost:hover {
    background: var(--surface-alt, #f3f4f6);
    color: var(--text, #1f2937);
}

.icon-btn.danger {
    background: #fff1f2;
    color: #e11d48;
}
.icon-btn.danger:hover {
    background: #ffe4e6;
    color: #be123c;
}

@media (hover: none) {
    .icon-btn:hover { transform: none; }
}

.icon-btn.action-amber {
    background: #fffaeb;
    color: #7d5a00;
}
.icon-btn.action-amber:hover {
    background: #fff4cc;
    color: #5a3e00;
}

.icon-btn.action-green {
    background: #f0fbf4;
    color: #0f6332;
}
.icon-btn.action-green:hover {
    background: #dff6e8;
    color: #0a4a25;
}

.icon-btn.action-violet {
    background: #f5f0ff;
    color: #5b21b6;
}
.icon-btn.action-violet:hover {
    background: #ede9ff;
    color: #4c1d95;
}

/* ─────────────────────────────────────────────
   COMBOBOX — searchable client selector
   ───────────────────────────────────────────── */
.combobox-wrap {
    width: 100%;
}
.combobox-wrap .cff-search-wrap {
    flex: unset;
    width: 100%;
}
.combobox-wrap:has(.combobox-list:not([hidden])) .cff-search-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.combobox-list {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 190px;
    overflow-y: auto;
    padding: 4px 0;
    list-style: none;
    margin: 0;
}
.combobox-list[hidden] { display: none !important; }
.combobox-list li[hidden] { display: none !important; }
.combobox-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
}
.combobox-list li:hover,
.combobox-list li.cb-active {
    background: var(--primary-soft);
    color: var(--primary);
}
.combobox-list li.cb-empty {
    color: var(--muted);
    cursor: default;
    font-style: italic;
}
.combobox-list li.cb-empty:hover {
    background: none;
    color: var(--muted);
}
.combobox-list .cb-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combobox-list .cb-dni {
    font-size: 0.78rem;
    color: var(--muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────
   ROW CTA BUTTON — pill text button for primary row action
   ───────────────────────────────────────────── */
.row-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--primary, #1d4ed8);
    color: var(--primary, #1d4ed8);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms, color 150ms;
    line-height: 1;
}
.row-cta-btn:hover {
    background: var(--primary, #1d4ed8);
    color: #fff;
}
.row-cta-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   KEBAB MENU — overflow actions dropdown
   ───────────────────────────────────────────── */
/* ── Table action icon buttons ── */
.tbl-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tbl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    background: var(--surface-2, #f2f4f8);
    color: var(--text-2, #5a6479);
    transition: background 0.15s, transform 0.1s;
}
.tbl-action-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.tbl-action-btn:hover { transform: scale(1.08); }
.tbl-action-btn:active { transform: scale(0.94); }
.tbl-action-warn  { background: rgba(217,119,6,0.10); color: #b45309; }
.tbl-action-warn:hover  { background: rgba(217,119,6,0.18); }
.tbl-action-danger { background: rgba(191,44,44,0.10); color: var(--error, #bf2c2c); }
.tbl-action-danger:hover { background: rgba(191,44,44,0.18); }

.kebab-wrap {
    position: relative;
}

/* ── Acciones de fila: SIEMPRE a la derecha, en tabla y en ficha ──────────────
   Estaba de las tres maneras a la vez, medido: en la tabla /clientes a la derecha,
   /expedientes ocupando todo y /contabilidad a la izquierda; y en las fichas justo al reves
   de su propia tabla. Ahora manda una sola regla.
   No es capricho: el menu del kebab se despliega con `right: 0`, o sea hacia la IZQUIERDA
   del boton, asi que solo cabe si el boton esta a la derecha. Con el kebab pegado al borde
   izquierdo el menu se salia de la pantalla — medido en /contabilidad a 390, iba de -86px a
   72px, mas de la mitad fuera. */
.actions.icon-actions,
.mobile-card-actions.icon-actions {
    justify-content: flex-end;
}

/* Separador antes de lo destructivo dentro del kebab: "Eliminar cliente" o "Archivar" no
   pueden ir pegados a "Crear expediente" como una opcion mas de la lista. */
.kebab-menu .kebab-danger-group {
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
    padding-top: 4px;
}
.kebab-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    min-width: 158px;
    z-index: 200;
    overflow: hidden;
}
.kebab-menu.open {
    display: block;
}
.kebab-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    font-size: 0.84rem;
    font-weight: 400;
    text-align: left;
    color: var(--text, #1f2937);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 120ms;
    white-space: nowrap;
    line-height: 1.2;
    box-sizing: border-box;
}
.kebab-item:hover {
    background: var(--surface-alt, #f5f5f5);
}
.kebab-item--danger {
    color: var(--error, #e11d48);
}
.kebab-item--danger:hover {
    background: #fff1f2;
}
.kebab-menu form.inline {
    display: block;
    width: 100%;
}

/* ─────────────────────────────────────────────
   TD LINK — clickable primary cell text
   ───────────────────────────────────────────── */
a.td-link {
    text-decoration: none;
    color: var(--text);
    transition: color 150ms;
}
a.td-link:hover {
    color: var(--primary, #1d4ed8);
    text-decoration: underline;
}

/* Clickable table rows */
tr[data-href] {
    cursor: pointer;
}
tr[data-href]:hover td {
    background: var(--primary-soft, #e7f0ff);
}

/* Reset-pass details styled as icon-btn popup */
details.icon-btn-details {
    position: static;
    border: none;
    background: none;
    padding: 0;
    overflow: visible;
}

details.icon-btn-details > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
details.icon-btn-details > summary::-webkit-details-marker { display: none; }

details.icon-btn-details .icon-btn-details-body {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    padding: 12px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(91,33,182,0.12);
    display: grid;
    gap: 8px;
}

/* ─────────────────────────────────────────────
   SIDE COL FORMS — comfortable vertical rhythm
   ───────────────────────────────────────────── */
.side-col form.stack {
    gap: 12px;
}

.side-col .field {
    gap: 5px;
}

.side-col .field label {
    font-size: 0.83rem;
}

/* ─────────────────────────────────────────────
   USER MENU DROPDOWN — compact navbar badge
   ───────────────────────────────────────────── */
.user-menu {
    position: relative;
    flex-shrink: 0;
}

/* ── Contexto (empresa / bufete) a la izquierda del logo ──────────────────
   APILADO, no en linea: los nombres reales ("PALMERAXIOM S.L.", "PALMERAXIOM
   MURCIA") no caben uno al lado del otro sin truncarse, y la barra tiene alto de
   sobra. Empresa completa arriba, bufete mas pequeno debajo.
   Ojo: lo que se ve de un .tenant-context-switcher NO es el <form> sino el boton
   .ios-select-trigger que crea enhanceIosSelect — el borde, el radio de 20px y la
   sombra son suyos y hay que neutralizarlos ahi. */
.nav-context {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 1;
    min-width: 0;
    margin-left: 14px;
    /* Las dos lineas iban pegadas y se leian montadas. */
    gap: 3px;
    line-height: 1.25;
}

/* El ancho venia fijado por clamp() en .tenant-context-switcher; con max-width: none
   no bastaba (width seguia mandando) y el nombre salia como "PALMERAXI...". */
.nav-context .tenant-context-switcher,
.nav-context .tenant-context-overflow,
.nav-context .tenant-context-switcher--two-line {
    width: auto;
    min-width: 0;
    max-width: 260px;
    flex: 0 0 auto;
}

/* Empresa-owner: la variante de dos lineas ya venia apilada, solo se reajusta. */
.nav-context .tenant-context-switcher--two-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Nombre de la empresa. NO gris aunque no sea pulsable (cuando solo hay una): que
   no se pueda tocar no significa que sea informacion de segunda. */
.nav-context .tcs-empresa-label {
    padding: 0 6px 1px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Sin caja: solo texto y flecha, con fondo al pasar por encima. Asi deja de competir
   visualmente con el logo y con los enlaces del menu. */
.nav-context .ios-select-trigger,
.nav-context .tenant-context-overflow,
.nav-context .tenant-context-switcher--two-line .ios-select-trigger {
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 6px;
    padding: 1px 6px;
    width: auto;
    max-width: 260px;
    gap: 4px;
}

.nav-context .ios-select-trigger:hover,
.nav-context .tenant-context-overflow:hover {
    background: var(--surface-deep);
    box-shadow: none;
}

/* El bufete es la segunda linea: mas pequeno que la empresa, pero legible. */
.nav-context .ios-select-trigger-label,
.nav-context .tenant-context-overflow-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-2);
}

.nav-context .ios-select-caret { width: 11px; height: 11px; }

/* Superadmin ve DOS selectores (empresa y bufete). El primero es la linea de arriba
   y hereda el tamano de la empresa; el segundo se queda pequeno como el bufete. */
.nav-context > .tenant-context-switcher:first-child:not(.tenant-context-switcher--two-line) .ios-select-trigger-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
}

/* La marca ya muestra el nombre del bufete (tenantBrandDisplayName): con el contexto
   al lado salia dos veces seguidas. Con contexto visible, la marca queda en el logo. */
.topnav:has(.nav-context) .brand span {
    display: none;
}

/* Antes esto ocultaba el contexto por debajo de 900px y devolvia el texto de la marca:
   al hacer zoom o pasar a movil desaparecian empresa y bufete y aparecia "ABOGADOS" de la
   nada. Mal criterio — en una app multi-bufete, saber en cual estas es justo lo ultimo que
   se debe esconder (operar en el bufete equivocado es el error caro). Se queda visible y
   lo que se recorta son los anchos. */
/* Antes de que el menu tenga que scrollear, se aprieta lo prescindible: separaciones,
   relleno de los enlaces y el ancho del contexto. Asi la barra cabe entera en el rango
   de anchos donde antes se partia (portatiles de 13-14 pulgadas con superadmin). */
@media (max-width: 1500px) {
    .topnav { gap: 6px; padding-left: 16px; padding-right: 16px; }
    .menu { gap: 2px; margin-left: 8px; }
    .nav-context .tenant-context-switcher,
    .nav-context .tenant-context-overflow,
    .nav-context .tenant-context-switcher--two-line,
    .nav-context .tcs-empresa-label,
    .nav-context .ios-select-trigger { max-width: 175px; }
}

@media (max-width: 900px) {
    .nav-context { margin-left: 8px; }
    .nav-context .tenant-context-switcher,
    .nav-context .tenant-context-overflow,
    .nav-context .tenant-context-switcher--two-line,
    .nav-context .tcs-empresa-label,
    .nav-context .ios-select-trigger { max-width: 150px; }
}

@media (max-width: 560px) {
    .nav-context .tenant-context-switcher,
    .nav-context .tenant-context-overflow,
    .nav-context .tenant-context-switcher--two-line,
    .nav-context .tcs-empresa-label,
    .nav-context .ios-select-trigger { max-width: 110px; }
}

/* ── Chip de saldo de firma bajo ──────────────────────────────────────────
   Solo se pinta cuando quedan pocas firmas (ver NavbarSignatureSummary.saldoBajo).
   No abre nada propio: lleva al menu de cuenta, que es donde vive el saldo. */
.firma-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--warn, #b45309);
    background: rgba(180, 83, 9, 0.10);
    color: var(--warn, #b45309);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.firma-alert-chip svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
}

.firma-alert-chip:hover { background: rgba(180, 83, 9, 0.18); }

.firma-alert-chip--empty {
    border-color: var(--error, #bf2c2c);
    background: rgba(191, 44, 44, 0.10);
    color: var(--error, #bf2c2c);
}

/* ── Bloque de saldo dentro del menu de cuenta ────────────────────────────
   Reutiliza las clases .firma-bubble-* que ya existian cuando esto era un popover
   propio en la navbar; aqui solo se le da el marco de seccion del menu. */
/* El menu base es angosto (200px); con el bloque de saldo dentro necesita mas aire. */
.user-menu-drop:has(.firma-menu-block) { min-width: 292px; }

.firma-menu-block {
    /* Sangra hasta los bordes del menu para que las lineas separadoras lleguen de
       punta a punta y no queden flotando dentro del padding del desplegable. */
    margin: 0 -12px;
    padding: 12px 14px;
    /* Sin bordes propios: quedaban lineas dobles. Arriba ya cierra el borde inferior de
       .user-menu-profile y abajo el borde superior de la primera .user-menu-action-btn,
       asi que el bloque solo tenia que ocupar el hueco entre ambas. */
}

.firma-menu-block .firma-bubble-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.firma-menu-block select {
    width: 100%;
    margin-bottom: 8px;
}

/* ── Campana de notificaciones ────────────────────────────────────────── */
/* ── Campana ─────────────────────────────────────────────────────────── */
.firma-bubble-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.firma-bubble-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.firma-bubble-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .84rem;
    color: var(--text-muted);
}

.firma-bubble-list li strong {
    color: var(--text);
}

.firma-bubble-held strong {
    color: #b45309;
}

.firma-bubble-note {
    margin: 0 0 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.firma-bubble-label {
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.firma-menu-block select {
    width: 100%;
    margin-bottom: 8px;
}

.firma-menu-block .btn {
    width: 100%;
}

.firma-bubble-pending {
    margin: 0;
    font-size: .8rem;
    color: var(--text-muted);
}

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.notif-bell:hover { background: var(--bg-hover, rgba(0,0,0,0.06)); color: var(--text, #1a202c); }
.notif-bell svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.notif-badge {
    position: absolute;
    top: 3px; right: 3px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    border: 1.5px solid var(--surface, #fff);
}

/* ── Overlay ─────────────────────────────────────────────────────────── */
.notif-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    /* backdrop-filter solo activo cuando abierto — evita artefactos visuales en estado cerrado */
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s ease, visibility 0.32s, background 0.32s;
}
.notif-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ── Drawer ──────────────────────────────────────────────────────────── */
.notif-drawer {
    position: fixed;
    /* respeta la altura del navbar para no solapar */
    top: calc(var(--topnav-offset, 64px) + 8px);
    right: 12px;
    bottom: 12px;
    width: 380px;
    max-width: calc(100vw - 24px);
    background: var(--surface, #fff);
    box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    /* estado cerrado */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(100% + 28px)) scale(0.92);
    will-change: transform, opacity;
}
.notif-drawer.open {
    animation: notif-drawer-in 440ms cubic-bezier(0.28, 1.18, 0.52, 1) forwards;
    visibility: visible;
    pointer-events: auto;
}
.notif-drawer.closing {
    animation: notif-drawer-out 300ms cubic-bezier(0.4, 0, 0.8, 0.4) forwards;
    visibility: visible;
    pointer-events: none;
}
@keyframes notif-drawer-in {
    0%   { opacity: 0; transform: translateX(calc(100% + 28px)) scale(0.88); }
    60%  { opacity: 1; transform: translateX(-8px) scale(1.01); }
    80%  { transform: translateX(4px) scale(0.997); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes notif-drawer-out {
    0%   { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(calc(100% + 28px)) scale(0.92); }
}

/* cabecera */
.notif-drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 18px 16px;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    flex-shrink: 0;
    /* Con TRES controles (Marcar leidas + Vaciar + cerrar) la cabecera ya no cabe en un
       drawer de 340px. Envuelve a proposito en vez de estrujar el titulo: el suelo de
       .notif-drawer-head-left es lo que fuerza el salto — mismo criterio que
       .page-header-meta (ver CLAUDE.md), nunca min-width: 0 ahi. */
    flex-wrap: wrap;
}
.notif-drawer-head-left {
    flex: 1 1 130px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.notif-drawer-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.notif-drawer-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text, #111827);
}
.notif-drawer-count {
    font-size: 11.5px;
    color: var(--primary, #2563eb);
    font-weight: 500;
}
.notif-drawer-read-all,
.notif-drawer-clear {
    font-size: 12px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.notif-drawer-read-all { color: var(--primary, #2563eb); }
.notif-drawer-read-all:hover { background: var(--primary-soft, #eff6ff); }
/* "Vaciar" quita filas, asi que no comparte el azul de "Marcar leidas" — apagado en reposo
   para no competir con la accion normal, y rojo solo al apuntarlo. No es destructivo de
   verdad (las de plataforma solo se ocultan para quien lo pide), por eso no va en rojo fijo. */
.notif-drawer-clear { color: var(--muted); }
.notif-drawer-clear:hover { background: #fee2e2; color: #dc2626; }
.notif-drawer-close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-alt);
    border: 1.5px solid var(--border); cursor: pointer;
    border-radius: var(--radius-xs);
    color: var(--text);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.notif-drawer-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.notif-drawer-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; }

/* Autoria: boton "admin · editado hace 2 h" que abre el historial (fragments/layout.html).
   Sin esto el SVG del reloj se pinta a su tamano por defecto y con relleno negro solido
   (un svg sin width/height/fill:none hereda esos defaults del navegador). */
.autoria {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 2px 0;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    text-align: left;
}
.autoria:hover { color: var(--primary, #007aff); }
.autoria-icono { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.autoria-actor { font-weight: 600; }
.autoria-sep { opacity: 0.6; }
.autoria-texto { white-space: nowrap; }

/* lista */
.notif-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 12px;
    scroll-behavior: smooth;
}
.notif-drawer-list::-webkit-scrollbar { width: 4px; }
.notif-drawer-list::-webkit-scrollbar-thumb { background: var(--border-color, #e5e7eb); border-radius: 4px; }

/* ── Item ────────────────────────────────────────────────────────────── */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 0;
    position: relative;
}
.notif-item + .notif-item::before {
    content: '';
    position: absolute;
    top: 0; left: 58px; right: 18px;
    height: 1px;
    background: var(--border-color, #f3f4f6);
}
.notif-item:hover { background: var(--bg-hover, #fafafa); }
.notif-item.unread { background: #f0f7ff; }
.notif-item.unread:hover { background: #e6f0fd; }

/* punto de no leído */
.notif-item.unread::after {
    content: '';
    position: absolute;
    top: 50%; right: 18px;
    transform: translateY(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary, #2563eb);
    transition: opacity 0.12s;
}
/* Al pasar el mouse se oculta el punto — el boton de quitar aparece en el mismo lugar,
   no tiene sentido mostrar los dos juntos. */
.notif-item:hover.unread::after { opacity: 0; }

.notif-item-dismiss {
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.notif-item:hover .notif-item-dismiss { opacity: 1; }
.notif-item-dismiss:hover { background: #fee2e2; color: #dc2626; }

.notif-item-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    margin-top: 1px;
}
.notif-item-icon.INFO    { background: #eff6ff; }
.notif-item-icon.WARN    { background: #fffbeb; }
.notif-item-icon.ALERT   { background: #fef2f2; }
.notif-item-icon.SUCCESS { background: #f0fdf4; }

.notif-item-body { flex: 1; min-width: 0; padding-right: 14px; }
.notif-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #111827);
    margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-msg {
    font-size: 12.5px;
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-top: 5px;
    display: block;
}

/* vacío */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    color: var(--text-muted, #9ca3af);
    font-size: 13.5px;
    text-align: center;
}
/* .notif-empty fuerza display:flex arriba — sin esto el JS pone hidden=true (atributo
   [hidden], regla de baja prioridad del navegador) y la clase de todos modos lo gana,
   así que el aviso de "vacío" se quedaba visible AL MISMO TIEMPO que la lista real de
   notificaciones. Mismo patrón que .confirm-overlay[hidden] más arriba. */
.notif-empty[hidden] {
    display: none !important;
}
.notif-empty svg {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
}

/* ── Historial de auditoría (línea de tiempo) ───────────────────────── */
/* Patrón de timeline vertical: un punto por evento sobre una línea continua. La línea la
   dibuja el ::before del <ul> (no de cada evento) para que no se corte entre filas. */
.hist-dia {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #9ca3af);
    margin: 18px 0 8px;
}
.hist-dia:first-child { margin-top: 4px; }

.hist-lista {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    position: relative;
}
.hist-lista::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1.5px;
    background: var(--border, #e5e7eb);
}

.hist-evento {
    position: relative;
    padding: 0 0 16px;
}
.hist-evento:last-child { padding-bottom: 2px; }
.hist-evento::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--surface, #fff);
    border: 2px solid var(--border, #e5e7eb);
}
/* El color del punto es lo único que distingue el tipo de evento — sin chips, que en una
   lista larga compiten con el texto en vez de ayudar a leerlo. */
.hist-evento--alta::before    { border-color: #16a34a; }
.hist-evento--edicion::before { border-color: #2563eb; }
.hist-evento--baja::before    { border-color: #dc2626; }

.hist-frase {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text, #111827);
}
.hist-meta {
    font-size: 11.5px;
    color: var(--text-muted, #9ca3af);
    margin-top: 1px;
}
.hist-sep { margin: 0 5px; }

.hist-cambios {
    list-style: none;
    margin: 7px 0 0;
    padding: 8px 10px;
    background: var(--surface-alt, #f9fafb);
    border-radius: var(--radius-xs, 6px);
    font-size: 12.5px;
    line-height: 1.7;
}
.hist-cambios li { overflow-wrap: anywhere; }
.hist-campo {
    color: var(--text-muted, #9ca3af);
    margin-right: 3px;
}
.hist-antes { text-decoration: line-through; color: var(--text-muted, #9ca3af); }
.hist-flecha { color: var(--text-muted, #9ca3af); margin: 0 2px; }
.hist-nuevo { font-weight: 600; }

/* "+N campos más": botón de texto, sin peso visual — no compite con el contenido */
.hist-mas-campos { margin-top: 2px; }
.hist-toggle {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #2563eb);
    cursor: pointer;
}
.hist-toggle:hover { text-decoration: underline; }

/* Contador total, al lado del título del modal */
.hist-total {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #9ca3af);
    margin-left: 6px;
}

.hist-mas {
    width: 100%;
    margin-top: 14px;
}

/* ── Detalle de notificación (texto completo) ───────────────────────── */
/* El dialogo en si NO scrollea (por eso "overflow: hidden", no "auto") — asi la cruz de
   cerrar, que es "position: absolute" respecto a este contenedor, nunca se mueve con la
   lectura. Lo que scrollea es SOLO .notif-detail-scroll, de adentro. */
.confirm-dialog.notif-detail-dialog {
    max-width: 440px;
    max-height: min(80vh, 560px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notif-detail-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* imprescindible para que un hijo flex pueda scrollear (ver CLAUDE.md) */
}
/* La cruz es "position: absolute" y flota sobre la esquina — sin este hueco, un titulo largo
   de 2 lineas pasa por debajo y queda tapado. */
.notif-detail-dialog #notifDetailTitle {
    padding-right: 44px;
}
/* Tinte rojo transparente SIEMPRE visible acá (no solo al pasar el mouse) — es la accion mas
   importante de este modal en particular (es la unica forma de cerrarlo) y tiene que notarse
   de entrada. No se toca `.modal-close` en general: el resto de los ~15 modales de la app
   siguen con el gris neutro de siempre, esto es especifico de este dialogo. */
.notif-detail-dialog .modal-close {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: #dc2626;
}
.notif-detail-dialog .modal-close:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}
.notif-detail-dialog #notifDetailMsg {
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.notif-detail-time {
    margin: -14px 0 0;
    color: var(--text-muted, #9ca3af);
    font-size: 11.5px;
}

/* pie del drawer */
.notif-drawer-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color, #f0f0f0);
    padding: 4px 8px;
}
.notif-drawer-manage {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    transition: background 0.14s, color 0.14s;
}
.notif-drawer-manage:hover {
    background: var(--bg-hover, #f3f4f6);
    color: var(--text, #111827);
}
.notif-drawer-manage svg {
    width: 15px; height: 15px;
    stroke: currentColor; stroke-width: 1.8; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}

/* Tablet: drawer un poco más estrecho y pegado al borde */
@media (max-width: 768px) {
    .notif-drawer {
        width: 340px;
        right: 8px;
        bottom: 8px;
        top: calc(var(--topnav-offset, 64px) + 6px);
        border-radius: 16px;
    }
}
/* Móvil: panel de hoja completa desde abajo del navbar */
@media (max-width: 480px) {
    .notif-overlay { inset: 0; }
    .notif-drawer {
        top: var(--topnav-offset, 64px);
        right: 0; bottom: 0; left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
    }
    @keyframes notif-drawer-in {
        0%   { opacity: 0; transform: translateY(100%) scale(0.96); }
        65%  { opacity: 1; transform: translateY(-6px) scale(1.005); }
        82%  { transform: translateY(3px) scale(0.999); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes notif-drawer-out {
        0%   { opacity: 1; transform: translateY(0) scale(1); }
        100% { opacity: 0; transform: translateY(100%) scale(0.96); }
    }
}

.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-2);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 10px;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
    white-space: nowrap;
}

.user-menu-btn:hover {
    background: var(--surface-deep);
    border-color: var(--primary);
}

.user-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.user-menu-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-caret {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform var(--dur-fast);
}

.user-menu.open .user-caret {
    transform: rotate(180deg);
}

/* Mismos tokens que .ios-select-dropdown (el desplegable de contexto): fondo, desenfoque,
   borde, radio y sombra identicos. Antes cada uno tenia los suyos y se notaba al abrirlos
   uno detras de otro en la misma barra. */
.user-menu-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: rgba(242,242,247,0.96);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    overflow: hidden;
    padding: 10px 12px;
    z-index: 200;
    display: grid;
    gap: 8px;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transition: opacity var(--dur-fast), transform var(--dur-fast), visibility 0s var(--dur-fast);
}

.user-menu.open .user-menu-drop {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.user-menu-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 8px;
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.user-menu-name {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.user-menu-email {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* Filas con la misma metrica que .ios-select-option: mismo alto, mismo padding y la
   misma linea divisoria, para que los dos desplegables se lean como el mismo componente. */
.user-menu-actions {
    display: grid;
    gap: 0;
    /* Sin margen inferior negativo: pegada al borde, la ultima fila la recortaban las
       esquinas redondeadas del desplegable (overflow: hidden + radius 14) y "Cerrar
       sesion" parecia mas estrecha que "Mi cuenta". Con el padding del contenedor
       debajo, las dos filas miden exactamente lo mismo. */
    margin: 0 -12px 0;
}

.user-menu-action-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1c1c1e;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-radius: 0;
}

.user-menu-action-btn:hover {
    background: rgba(0,0,0,0.04);
    color: #1c1c1e;
}

/* ─────────────────────────────────────────────
   LEAD SOURCE LIST — replaces donut chart
   ───────────────────────────────────────────── */
.lead-source-list {
    display: grid;
    gap: 7px;
}

.lead-source-row {
    display: grid;
    grid-template-columns: 10px 1fr minmax(0, 120px) 40px 28px;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}

.lead-source-name {
    color: var(--text-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-source-bar-wrap {
    height: 6px;
    background: var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.lead-source-bar {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--primary);
    transition: width 0.4s var(--ease-smooth);
}

.lead-source-pct {
    text-align: right;
    font-weight: 700;
    color: var(--text);
    font-size: 0.82rem;
}

.lead-source-count {
    text-align: right;
    font-size: 0.78rem;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MOBILE ≤700px (iOS priority)
   ───────────────────────────────────────────── */
/* ── Barra superior plegada (hamburguesa) ────────────────────────────────
   La clase `nav-collapsed` la pone el JS de fragments/layout.html MIDIENDO si la barra
   cabe, no un ancho fijo. Antes esto era una consulta de medios a 1400px, y ese numero
   estaba calculado para el superadmin, que lleva dos entradas mas (Plataforma, Sistema):
   al dueno de empresa, con 7 entradas, le escondia el menu unos 250px antes de que le
   hiciera falta. Un solo numero no puede servir para dos menus de distinto tamano, y
   manana, con una entrada mas, volveria a quedarse corto.
   Efecto secundario buscado: estas reglas ahora son descendientes de .topnav. Antes
   `.ios-select-trigger` y `.user-menu-*` se aplicaban a TODA la pagina por debajo de
   1400px, encogiendo la letra de cualquier desplegable de un formulario.
   Si el JS fallara, `nav-collapsed` no se pondria nunca: por eso el JS lleva un respaldo
   por ancho (< 1400px, el comportamiento de antes) dentro de su propio try/catch. */
/* Navbar adjustments */
.topnav.nav-collapsed {
    flex-wrap: nowrap;
    padding: 10px 16px;
    padding-top: calc(10px + var(--safe-top));
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
}

.topnav.nav-collapsed .nav-toggle {
    display: flex;
}

/* Menu movil: panel FLOTANTE colgado de la barra, no una fila mas dentro de ella.
   Antes era un hijo en flujo con width:100%, asi que al abrirlo la barra crecia, el
   ResizeObserver recalculaba --topnav-offset y toda la pagina se empujaba hacia
   abajo — el contenido daba un salto cada vez que se abria el menu. Con position
   absolute la barra mantiene su altura y el panel se superpone al contenido, que es
   el comportamiento normal de un menu desplegable. */
.topnav.nav-collapsed .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 16px 12px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    margin: 0;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 14px 30px rgba(10, 25, 55, 0.14);
    /* Si el menu es mas alto que la pantalla, scrollea el panel — nunca la barra. */
    max-height: calc(100vh - var(--topnav-offset));
    overflow-y: auto;
    animation: menu-slide-down 0.22s var(--ease-spring);
}



.topnav.nav-collapsed .menu-auth {
    order: 2;
    width: auto;
    margin-left: auto;
    gap: 6px;
    flex-wrap: nowrap;
    border-top: none;
    padding-top: 0;
}

.topnav.nav-collapsed .nav-toggle {
    order: 3;
    margin-left: 6px;
}

.topnav.nav-collapsed .menu {
    order: 4;
}

/* ⚠️ `.nav-context` apila los dos selectores en COLUMNA. Aqui habia un `flex: 0 1 110px`
   heredado de cuando iban en fila a la derecha: en un contenedor en columna el flex-basis
   es la ALTURA, asi que cada selector pasaba a medir 110px de alto y la barra plegada se
   iba a ~240px — el logo flotando en medio y los dos nombres separados. Solo se acota el
   ancho; el alto lo decide el contenido. */
.topnav.nav-collapsed .nav-context .tenant-context-switcher,
.topnav.nav-collapsed .nav-context .tenant-context-overflow,
.topnav.nav-collapsed .nav-context .tcs-empresa-label,
.topnav.nav-collapsed .nav-context .ios-select-trigger {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 190px;
}

.topnav.nav-collapsed .ios-select-trigger {
    font-size: 0.72rem;
    padding: 5px 8px 5px 10px;
}

.topnav.nav-collapsed .user-menu-label {
    display: none;
}

.topnav.nav-collapsed .user-menu-drop {
    right: 0;
    min-width: 180px;
}

.topnav.nav-collapsed.nav-open .menu {
    display: flex;
}

.topnav.nav-collapsed .menu a {
    padding: 12px 14px;
    border-radius: var(--radius-xs);
    width: 100%;
    font-size: 1rem;
}

.topnav.nav-collapsed .menu-group {
    width: 100%;
}

.topnav.nav-collapsed .menu-group-btn {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-xs);
    font-size: 1rem;
}

.topnav.nav-collapsed .menu-submenu {
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 4px 0 4px 18px;
    min-width: 0;
    animation: none;
}

.topnav.nav-collapsed .menu-submenu a {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.96rem;
}

/* Nav separator: ocultar en menú vertical */
.topnav.nav-collapsed .nav-sep {
    display: none;
}

@keyframes menu-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Cabecera estrecha: los botones secundarios se quedan en icono ───────────
   Antes de gastar una fila entera, se recorta lo que menos cuesta: la etiqueta de los
   botones SECUNDARIOS. El principal conserva la suya a proposito — "volver" se entiende
   con una flecha, pero un icono de "Modo guiado" no lo descifra nadie, y justo le tocaria
   a quien tiene la pantalla pequena.
   `font-size: 0` oculta el texto sin tocar el SVG (que lleva su tamano en el atributo) y
   sin cambiar las plantillas; el texto sigue ahi para los lectores de pantalla. Los
   botones llevan `title` en la plantilla para que al pasar el raton se lea. */
@media (max-width: 820px) and (min-width: 641px) {
    .page-header-actions .btn.ghost,
    .page-header-actions .btn.secondary {
        font-size: 0;
        gap: 0;
        padding-left: 11px;
        padding-right: 11px;
    }
}

/* ── Movil: los botones de cabecera pasan a fila propia ─────────────────────
   Aqui si vale la fila entera: hay poco ancho y mucho dedo. Y recuperan su etiqueta,
   porque en una fila propia sobra sitio para leerla. */
@media (max-width: 640px) {
    /* Aqui SI a una columna: en movil dos KPI por fila dejan el numero sin sitio. */
    .accounting-metrics {
        grid-template-columns: 1fr;
    }

    /* Los KPI de /panel se quedan en 2x2 tambien en movil: son un numero corto y una
       etiqueta de dos palabras, y a 390 miden 164px — se leen de sobra. A una columna
       gastarian cuatro filas para cuatro cifras. */

    .page-header-actions {
        width: 100%;
    }


    .page-header-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ── Cambio de tabla a tarjetas ───────────────────────────────────────────
   Umbral PROPIO (820px), separado del resto del layout movil, porque son dos preguntas
   distintas: "aprieta los margenes" no es lo mismo que "cambia la tabla por tarjetas".
   Estaba a 1100px y era demasiado pronto — la tabla solo necesita 720px de ancho, asi
   que entre 820 y 1100 se estaba tirando media pantalla para apilar tres datos en una
   columna estrecha. Las tarjetas son para movil; en un portatil la tabla se lee mejor.
   El 820 sale de los 720px de min-width de la tabla mas el padding lateral de .page. */
@media (max-width: 820px) {
    /* La tabla solo se oculta si ESA tabla tiene tarjetas que la sustituyan. De las 17
       plantillas con tabla solo clientes/listado las tiene: las otras 16 se quedaban
       COMPLETAMENTE EN BLANCO por debajo del umbral. Con el selector hermano, una tabla
       sin alternativa se queda visible y scrollea en horizontal. */
    .table-wrap:has(~ .mobile-cards) {
        display: none;
    }

    /* El listado movil es UN panel con filas, no tarjetas sueltas: el marco lo pone
       .mobile-cards (mismo borde y radio que .table-wrap) y cada ficha es una fila con
       su divisoria, igual que las filas de la tabla. */
    /* ⚠️ SIN `overflow: hidden`. Lo llevaba, y recortaba el menu de los tres puntos de las
       ultimas fichas: es `position: absolute` y se sale del contenedor por abajo (medido en
       /clientes y en /contabilidad, en las dos). No hacia falta para nada — estaba para
       redondear las esquinas, pero `.mobile-card` es `background: transparent` y no tiene
       fondo al pasar el raton, asi que ningun hijo pinta dentro de las esquinas. */
    .mobile-cards {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
    }
}

/* ── Layout movil del resto de la aplicacion ──────────────────────────────
   Umbral historico (1100px). NO subirlo sin revisar que hay dentro: este bloque decide,
   entre otras cosas, que las tablas se cambien por tarjetas y que los modales pasen a
   pantalla completa. */
@media (max-width: 1100px) {
    /* Page */
    .page {
        margin: 12px auto;
        padding: 0 14px 28px;
    }

    /* Card */
    .card {
        --card-pad-x: 18px;
        padding: 20px 18px;
        border-radius: var(--radius-sm);
    }

    /* Hero */
    .hero-main h1 {
        font-size: clamp(1.6rem, 6vw, 2.1rem);
    }

    /* Stats: 2-col grid on mobile */
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats.stats-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-value {
        font-size: 1.75rem;
    }

    /* Toolbar */
    .toolbar {
        align-items: flex-start;
    }

    /* Actions: full width on mobile */
    .actions {
        width: 100%;
    }

    .actions .btn,
    .actions a.btn,
    .actions button.btn {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        text-align: center;
    }

    /* Selects: contain within viewport */
    select {
        max-width: 100%;
        width: 100%;
        min-width: 0;
        /* truncate the displayed option text if too long */
        text-overflow: ellipsis;
    }

    /* Fields: prevent overflow */
    .field,
    .field-inline {
        min-width: 0;
        max-width: 100%;
    }

    .field-inline {
        flex-wrap: wrap;
    }

    .field-inline select {
        width: 100%;
        min-width: 0;
    }

    /* Tabs: iOS segment style */
    .tabs {
        padding: 3px;
    }

    .tabs::-webkit-scrollbar { display: none; }


    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }


    .accounting-activity-card .table-wrap {
        display: block;
    }

    /* "Limpiar" y "Ver anulados" comparten fila en vez de ocupar una entera cada uno: son
       dos botones de una palabra y se comian dos filas completas debajo del buscador. */
    .accounting-activity-tools .btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        justify-content: center;
    }

    /* Las dos pestañas comparten fila y solo se apilan cuando de verdad no caben. Con
       `width: 100%` se apilaban ya desde 1100 — o sea en un iPad — dos botones cortos
       ocupando dos filas enteras encima del buscador. */
    .accounting-activity-tabs {
        width: 100%;
    }

    /* Las dos PESTAÑAS se reparten la fila; "Historial" no. Es un boton de accion metido en
       el mismo grupo que dos pestañas de alternancia, asi que si se le deja crecer acaba
       ocupando el ancho entero de su fila cuando envuelve — el boton menos usado de los tres
       convertido en el mas grande (visto a 640). */
    .accounting-activity-tabs .js-activity-tab {
        flex: 1 1 200px;
        width: auto;
        justify-content: center;
    }

    .accounting-activity-tabs .btn:not(.js-activity-tab) {
        flex: 0 0 auto;
        width: auto;
    }


    /* Summary grid */
    .summary-grid {
        grid-template-columns: 1fr;
    }

    /* Landing */
    .landing-menu { display: none; }

    .landing-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-feature-grid {
        grid-template-columns: 1fr;
    }

    /* Toast position handled in the main toast block above */

    /* Section stack: reduce gap on mobile */
    .section-stack {
        gap: 14px;
    }

    /* Filter bar: stack on mobile */
    .filter-bar > form.stack {
        flex-direction: column;
    }

    .filter-bar > form.stack .field {
        flex: 1 1 auto;
        width: 100%;
    }

    .filter-bar > form.stack .actions {
        width: 100%;
    }

    /* Page header: compact on mobile */
    .page-header {
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    /* KPI strip: 2 per row on mobile */
    .kpi-strip {
        flex-wrap: wrap;
    }

    /* El 2x2 de los KPI se movio al bloque de 900: a 1100 cada uno medía 519px de ancho
       —y 481 en un iPad— para un numero y una etiqueta de dos palabras, mientras los cuatro
       caben de sobra en una fila hasta ~900 (a 1180 miden 276 y se leen bien). Mismo criterio
       que en las dos pantallas de contabilidad. */

    /* Confirm dialog: bottom sheet on iOS */
    .confirm-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .confirm-dialog {
        max-width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        padding: 28px 20px calc(24px + var(--safe-bottom)) 20px;
        animation: sheet-in 0.26s var(--ease-spring);
    }

    .accounting-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .confirm-dialog.accounting-modal-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--radius) var(--radius) 0 0;
        padding: 24px 16px calc(22px + var(--safe-bottom));
    }

    .accounting-overview-card {
        padding: 18px;
    }

    /* 4 -> 2x2, no 4 -> 1. Estaba en una sola columna desde 1100, o sea ya en un iPad
       horizontal o en un portatil de 13" con un paso de zoom: cuatro barras de 925px con el
       numero centrado y aire por todos lados. A una sola columna se baja en movil (640). */
    .accounting-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @keyframes sheet-in {
        from { opacity: 0; transform: translateY(100%); }
        to   { opacity: 1; transform: translateY(0); }
    }

}

/* La regla global `.actions .btn { flex: 1 1 calc(50% - 4px) }` de ≤1100 tambien pega
   dentro de los modales y les estiraba los botones. El `width: 100%` del contenedor SI se
   mantiene a proposito: el divisor de arriba del pie es un borde de ese contenedor y tiene
   que cruzar el dialogo entero, no solo el ancho de los botones. */
@media (max-width: 1100px) {
    .confirm-dialog .actions .btn,
    .confirm-dialog .actions a.btn,
    .confirm-dialog .actions button.btn {
        flex: 0 0 auto;
    }
}

/* Los botones de un modal se reparten el ancho SOLO en movil de verdad.
   Estaba en el bloque de 1100 y eso rompia el estandar de modales de CLAUDE.md ("los
   botones van juntos a la derecha") en cualquier portatil con zoom o tablet: en el picker
   de "Agregar modelo" salian dos botones gigantes de lado a lado a 1024px. */
@media (max-width: 640px) {
    .confirm-dialog .actions {
        justify-content: stretch;
    }

    .confirm-dialog .actions .btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    body {
        padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    }

    .bottom-tabbar {
        display: block;
    }

    /* La barra de guardar es sticky a bottom:0, o sea al fondo de la ventana — justo
       donde vive la barra de navegacion inferior. Se solapaban y el boton quedaba medio
       tapado. Se sube por encima de ella. */
    .page--client-form .form-footer {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    }

    /* "Contabilidad" es la etiqueta mas larga de las cinco y a 390px se comia el hueco de
       su pestana. Se aprieta un punto la letra en vez de acortar la palabra: "Contab." no
       lo entiende nadie a la primera. */
    .tab-item {
        font-size: 0.62rem;
        padding: 6px 2px;
        white-space: nowrap;
    }

    /* Los cinco destinos diarios viven abajo, al alcance del pulgar. Aqui arriba estaban
       REPETIDOS: la hamburguesa y la barra inferior decian exactamente lo mismo, y dos
       menus con el mismo contenido ensenan que ninguno es el bueno. La hamburguesa se
       queda con lo que no cabe abajo (Configuracion, Ayuda, Plataforma, Sistema). */
    .topnav.nav-collapsed .menu > a.nav-dup {
        display: none;
    }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — SMALL MOBILE ≤390px (iPhone 14/SE)
   ───────────────────────────────────────────── */
/* Con TRES botones en la cabecera, el reparto al 50% del bloque de 640 deja dos arriba y el
   tercero solo, estirado a la fila entera — medido en /clientes/{id}/editar a 390:
   177/145/330. Se apilan al mismo ancho, que es la misma regla que se aplico a los botones de
   "Acciones rapidas": lo que chirria no es que esten apilados, es que midan cosas distintas.
   ⚠️ El corte es 500 y no 640 a proposito: a 640 los tres SI caben en una fila (medido
   214/182/168) y forzar ahi el apilado era peor que el problema que venia a arreglar. */
@media (max-width: 500px) {
    .page-header-actions:has(> :nth-child(3)) .btn,
    .page-header-actions:has(> :nth-child(3)) a.btn,
    .page-header-actions:has(> :nth-child(3)) button.btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 390px) {
    .hero-main h1 {
        font-size: 1.55rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .btn {
        font-size: 0.88rem;
        padding: 10px 12px;
    }

    .actions .btn,
    .actions a.btn,
    .actions button.btn {
        flex: 1 1 100%;
    }

    .tabs {
        gap: 3px;
        padding: 3px;
    }

    .tab-btn {
        padding: 8px 10px;
        font-size: 0.84rem;
    }
}

/* ─────────────────────────────────────────────
   STACKED FORM + FIELD GRID — platform forms
   ───────────────────────────────────────────── */
.stacked-form {
    display: grid;
    gap: 16px;
}

.field-grid {
    display: grid;
    gap: 14px;
}

.field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
    display: grid;
    gap: 7px;
    align-content: start;
}

.field > span:first-child {
    min-height: 1.2em;
    line-height: 1.25;
}

.field input,
.field select,
.field textarea {
    width: 100%;
}

.field-hint {
    display: block;
    min-height: 1.2em;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.35;
}

.field-hint-empty {
    visibility: hidden;
}

.field-span-2 {
    grid-column: 1 / -1;
}

/* Platform module shell — compact spacing */
.platform-shell.page {
    margin-top: 12px;
    padding-bottom: 20px;
}
.platform-shell .section-stack {
    gap: 8px;
}
.platform-shell .section-stack > section,
.platform-shell .section-stack > article {
    display: grid;
    gap: 8px;
}
.platform-shell .grid-2 {
    gap: 8px;
    align-items: start;
}
.platform-shell .card {
    padding: 14px 16px;
}
.platform-shell .card h2.section-title {
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.platform-shell h1.section-title {
    font-size: 1.1rem;
}
.platform-shell .toolbar {
    margin-bottom: 8px;
}
.platform-shell .module-header {
    padding: 4px 0 10px;
}
.platform-shell .module-header-title {
    font-size: 1.3rem;
}
.platform-shell form.stack {
    gap: 8px;
}
.platform-shell .field-grid.two,
.platform-shell .field-grid.three {
    gap: 8px;
}
.platform-shell .field {
    gap: 4px;
}
.platform-shell .section-hr {
    margin: 10px 0;
}
.platform-shell .muted {
    font-size: 0.82rem;
}
.platform-shell .empty {
    padding: 10px 0;
    font-size: 0.85rem;
}
.platform-shell .table-wrap table th,
.platform-shell .table-wrap table td {
    padding: 7px 10px;
    font-size: 0.83rem;
}
.platform-shell .emp-db-row {
    gap: 12px;
    margin: 6px 0 8px;
}
.platform-shell .emp-panel-label {
    margin-bottom: 6px;
}

.platform-shell .module-note {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%);
}

/* Module nav card — title + tabs header */
.module-nav-card {
    padding-bottom: 0;
}

.module-nav-card .section-title {
    margin-bottom: 6px;
}

.module-nav-card .muted {
    margin-bottom: 14px;
}

.module-tabs {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

/* Actions column in tables — prevent wrap mess */
td .actions {
    flex-wrap: nowrap;
    gap: 6px;
}

@media (max-width: 900px) {
    td .actions {
        flex-wrap: wrap;
    }
}

/* Details / summary reset pass — iOS style */
details.action-details {
    border-color: #c4b5fd;
    background: #f5f0ff;
    padding: 0;
    overflow: hidden;
}

details.action-details summary {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5b21b6;
    padding: 8px 13px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

details.action-details summary::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M12 15h4M14 13v4M17.5 11L12 5.5'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

details.action-details[open] summary {
    border-bottom: 1px solid #c4b5fd;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

details.action-details .details-body {
    padding: 12px 13px;
    display: grid;
    gap: 10px;
    background: #ede9ff;
}

@media (max-width: 700px) {
    .field-grid.two {
        grid-template-columns: 1fr;
    }
}

/* Gap between module-nav-card and the section-stack below it (legacy) */
.module-nav-card + .section-stack,
.module-nav-card + div.section-stack {
    margin-top: 20px;
}

/* ─────────────────────────────────────────────
   MODULE HEADER — replaces module-nav-card
   iOS-style page title + segment control row
   ───────────────────────────────────────────── */
.module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 0 20px;
    flex-wrap: wrap;
}

.module-header-meta {
    display: grid;
    gap: 2px;
}

.module-header-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.module-header + .section-stack {
    /* no extra margin needed, module-header already has padding-bottom */
}

/* ─────────────────────────────────────────────
   SEGMENT CONTROL — iOS segmented tabs
   ───────────────────────────────────────────── */
.segment-control {
    display: flex;
    gap: 2px;
    background: var(--surface-deep);
    border-radius: var(--radius);
    padding: 4px;
    border: 1px solid var(--border);
}

.segment-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-smooth),
                color var(--dur-fast),
                box-shadow var(--dur-fast);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.segment-tab:hover:not(.active) {
    color: var(--text-2);
    background: rgba(255,255,255,0.5);
}

.segment-tab.active {
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(10,25,55,0.1), 0 1px 2px rgba(10,25,55,0.06);
}

.segment-icon {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .module-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 14px;
    }
    .segment-control {
        width: 100%;
    }
    .segment-tab {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.8rem;
    }
    .segment-icon {
        display: none;
    }
}

/* ─────────────────────────────────────────────
   NUEVO BUFETE — onboarding layout
   ───────────────────────────────────────────── */
.nuevo-bufete-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
}

.nuevo-bufete-guide {
    background: linear-gradient(145deg, #f0f6ff 0%, #e8edf8 100%);
    border-color: rgba(20,96,200,0.15);
}

.nuevo-bufete-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 8px;
}

.nuevo-bufete-heading {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 10px;
}

.nuevo-bufete-steps {
    display: grid;
    gap: 14px;
}

.nuevo-bufete-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nuevo-bufete-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.nuevo-bufete-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(20,96,200,0.2);
    border-radius: var(--radius-pill);
    padding: 3px 11px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

@media (max-width: 860px) {
    .nuevo-bufete-grid {
        grid-template-columns: 1fr;
    }
    .nuevo-bufete-guide {
        order: 2;
    }
}

/* Onboarding invitacion y configuracion */
.onboarding-shell {
    max-width: 1080px;
}

.onboarding-card {
    border-color: rgba(20, 96, 200, 0.2);
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.onboarding-headline {
    margin-bottom: 14px;
}

.onboarding-summary-grid > div {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.78);
}

.onboarding-branding-preview {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    border: 1px solid #c7d9f4;
    border-radius: 14px;
    background: #f7fbff;
    padding: 12px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.onboarding-branding-preview-cover {
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 18% 22%, rgba(31, 123, 230, 0.2), transparent 45%),
            radial-gradient(circle at 88% 35%, rgba(255, 122, 26, 0.19), transparent 38%);
    pointer-events: none;
}

.onboarding-branding-preview-logo {
    grid-row: 1 / span 2;
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f3f78, #1f7be6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

.onboarding-branding-preview-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
}

.onboarding-intro {
    overflow: hidden;
}

.onboarding-intro-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.onboarding-intro-media {
    border-radius: 18px;
    border: 1px solid rgba(20, 96, 200, 0.2);
    background: linear-gradient(145deg, #eff5ff, #e7eefc);
    position: relative;
    min-height: 250px;
    overflow: hidden;
}

.onboarding-intro-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31,123,230,0.35) 0%, transparent 68%);
    top: -50px;
    left: -40px;
}

.onboarding-intro-lines {
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(120deg, rgba(20,96,200,0.18) 0%, transparent 40%),
            repeating-linear-gradient(
                    90deg,
                    rgba(15,63,120,0.09) 0 1px,
                    transparent 1px 16px
            );
}

.onboarding-intro-pulse {
    position: absolute;
    right: 24px;
    bottom: 20px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 2px solid rgba(20, 96, 200, 0.35);
    box-shadow: 0 0 0 0 rgba(20, 96, 200, 0.25);
    animation: onboardingPulse 2.4s ease-out infinite;
}

@keyframes onboardingPulse {
    0% { box-shadow: 0 0 0 0 rgba(20, 96, 200, 0.28); transform: scale(1); }
    70% { box-shadow: 0 0 0 18px rgba(20, 96, 200, 0); transform: scale(1.04); }
    100% { box-shadow: 0 0 0 0 rgba(20, 96, 200, 0); transform: scale(1); }
}

.onboarding-intro-content {
    display: grid;
    gap: 12px;
}

.onboarding-quick-steps {
    margin: 0;
    padding-left: 20px;
    color: var(--text-2);
    font-size: 0.9rem;
    display: grid;
    gap: 4px;
}

@media (max-width: 900px) {
    .onboarding-intro-hero {
        grid-template-columns: 1fr;
    }
    .onboarding-intro-media {
        min-height: 170px;
    }
}

/* Empresa - invitacion y onboarding */
.empresa-invite-page .page-header,
.empresa-onboarding-page .page-header {
    margin-bottom: 18px;
}

/* ── Aceptación contractual del alta ─────────────────────────
   La casilla no puede parecer un extra opcional al lado del captcha: es la
   prueba de que el cliente aceptó unas condiciones, así que el bloque va
   destacado y el texto se lee completo, sin truncar. */
.legal-accept-section {
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 12px;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--accent, #1564cc) 4%, transparent);
}
.legal-accept-intro { margin: 0 0 12px; }
.legal-accept-docs {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.legal-accept-docs li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: .9rem;
}
.legal-accept-version {
    font-size: .78rem;
    opacity: .6;
}
.legal-accept-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    line-height: 1.6;
    cursor: pointer;
}
/* La casilla necesita ancho propio: la regla global `input { width: 100% }`
   la estiraría de lado a lado y empujaría el texto fuera de la tarjeta.
   Es el mismo tropiezo que ya hubo con los checkbox del picker de modelos. */
.legal-accept-check input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent, #1564cc);
    appearance: auto;
    -webkit-appearance: checkbox;
}
.legal-accept-note {
    margin: 12px 0 0;
    font-size: .8rem;
}

.empresa-invite-grid {
    align-items: stretch;
}

.empresa-invite-card,
.empresa-invite-info {
    height: 100%;
}

.empresa-invite-info {
    display: grid;
    gap: 12px;
}

.empresa-invite-active {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: rgba(20, 96, 200, 0.04);
}

.empresa-invite-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.empresa-invite-kv strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
}

.empresa-invite-form {
    margin-top: 8px;
}

.empresa-invite-form .field-grid.two {
    align-items: start;
}

.empresa-invite-form .field-hint {
    min-height: 1.2em;
}

.empresa-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.empresa-invite-actions .btn {
    min-width: 220px;
    justify-content: center;
}

.empresa-invite-actions.compact .btn {
    min-width: 0;
}

.empresa-invite-history {
    margin-top: 16px;
}

.empresa-invite-history .table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-subtitle {
    margin: 6px 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-2);
}

.empresa-onboarding-card {
    max-width: 1040px;
    margin: 0 auto;
}

.empresa-onboarding-form .form-section {
    padding: 12px 0;
}

.empresa-onboarding-form .form-section:not(:last-of-type) {
    border-bottom: 1px solid var(--border-light);
}

@media (max-width: 900px) {
    .empresa-invite-kv {
        grid-template-columns: 1fr;
    }

    .empresa-invite-actions .btn {
        min-width: 0;
        width: 100%;
    }
}

/* Mi bufete (autoservicio cliente) */
.tenant-profile-hero {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: #f8fbff;
}

.tenant-profile-cover {
    min-height: 150px;
    background:
            linear-gradient(145deg, rgba(20,96,200,0.2), rgba(31,123,230,0.1)),
            radial-gradient(circle at 84% 30%, rgba(255,122,26,0.2), transparent 50%);
    background-size: cover;
    background-position: center;
    position: relative;
}

.tenant-profile-logo-wrap {
    position: absolute;
    left: 18px;
    bottom: -28px;
}

.tenant-profile-logo {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    border: 3px solid #fff;
    object-fit: cover;
    box-shadow: 0 9px 20px rgba(15, 45, 85, 0.22);
    background: #fff;
}

.tenant-profile-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f3f78, #1f7be6);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

.tenant-profile-meta {
    padding: 38px 16px 14px;
    display: grid;
    gap: 7px;
}

.tenant-profile-meta h3 {
    margin: 0;
    font-size: 1.08rem;
}

.tenant-color-swatches {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tenant-color-chip {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid rgba(15, 45, 85, 0.2);
}

/* Planes admin */
.plan-admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.plan-actions-cell {
    gap: 8px;
    flex-wrap: wrap;
}

.plan-row-selected td {
    background: rgba(20, 96, 200, 0.06);
}

.plan-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,20,40,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3250;
    padding: 24px 16px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: overlay-in 0.18s var(--ease-smooth);
}
.plan-editor-overlay[hidden] { display: none !important; }

.confirm-dialog.plan-editor-dialog {
    max-width: min(960px, 96vw);
    width: 100%;
    max-height: min(90vh, 960px);
    overflow: auto;
    padding: 24px;
}

.plan-editor-head {
    margin-bottom: 12px;
}

.plan-editor-head h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.plan-module-inline {
    align-items: center;
    gap: 8px;
}

.plan-module-picker {
    flex: 1 1 auto;
    min-width: 220px;
}

.plan-editor-actions {
    justify-content: flex-end;
}

/* Landing pricing */
/* ── Pricing section (dark) ──────────────────────────────────────────── */
.lp-pricing {
    background: linear-gradient(160deg, #070e1e 0%, #0b1632 55%, #060c1a 100%);
    position: relative;
    overflow: hidden;
    padding-block: 90px 110px;
}

.lp-pricing-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse at center,
        rgba(30, 110, 255, 0.16) 0%,
        rgba(30, 110, 255, 0.05) 45%,
        transparent 72%);
    pointer-events: none;
}

.lp-pricing-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

/* ── Stage & nav ─────────────────────────────────────────────────────── */
.lp-pricing-stage {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-pricing-nav {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(200, 220, 255, 0.70);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s;
    z-index: 10;
}

.lp-pricing-nav:hover {
    background: rgba(30, 100, 255, 0.40);
    border-color: rgba(100, 170, 255, 0.40);
    color: #fff;
    transform: scale(1.10);
    box-shadow: 0 0 28px rgba(40, 120, 255, 0.45), 0 0 0 4px rgba(40,120,255,0.10);
}

.lp-pricing-nav:active {
    transform: scale(0.90);
    background: rgba(30, 100, 255, 0.60);
    box-shadow: 0 0 14px rgba(40, 120, 255, 0.30);
    transition: transform .10s, background .10s, box-shadow .10s !important;
}
.lp-pricing-nav svg { width: 22px; height: 22px; }

@keyframes lp-nav-flash {
    0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.70); }
    60%  { box-shadow: 0 0 0 14px rgba(59,130,246,0.00); }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.00); }
}
.lp-nav-flash {
    animation: lp-nav-flash 0.35s ease-out forwards;
}


/* ── 3-D viewport ────────────────────────────────────────────────────── */
.lp-pricing-viewport {
    flex: 1;
    overflow: visible;
    position: relative;
    perspective: 900px;
    perspective-origin: 50% 36%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.lp-pricing-track {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.lp-price-card {
    position: absolute;
    left: 50%;
    top: 0;
    width: clamp(290px, 34vw, 370px);
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    background: linear-gradient(150deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(232, 244, 255, 0.93) 100%);
    box-shadow: 0 12px 32px rgba(0, 5, 20, 0.30);
    padding: 30px 26px 26px;
    display: grid;
    gap: 16px;
    transform-style: preserve-3d;
    /* transition is set dynamically by JS per navigation — no static rule here */
    will-change: transform, opacity;
    cursor: default;
    pointer-events: none;
    filter: none;
}

.lp-price-card.is-focus {
    border-color: rgba(60, 140, 255, 0.50);
    box-shadow:
        0 0 0 1px rgba(60, 140, 255, 0.18),
        0 0 60px rgba(30, 110, 255, 0.28),
        0 32px 70px rgba(0, 8, 30, 0.60);
    pointer-events: auto;
}

@keyframes lp-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(60,140,255,.18), 0 0 60px rgba(30,110,255,.28), 0 32px 70px rgba(0,8,30,.60); }
    50%       { box-shadow: 0 0 0 1px rgba(60,140,255,.26), 0 0 90px rgba(30,110,255,.40), 0 32px 70px rgba(0,8,30,.60); }
}
.lp-price-card.is-focus { animation: lp-glow-pulse 3s ease-in-out infinite; }

/* ── Badge ───────────────────────────────────────────────────────────── */
.lp-price-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #1460c8 0%, #3b82f6 100%);
    color: #fff;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(20, 96, 200, 0.50);
}

/* ── Card internals ──────────────────────────────────────────────────── */
.lp-price-code {
    margin: 0;
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #1460c8;
    font-weight: 700;
}

.lp-price-head h3 {
    margin: 3px 0 6px;
    font-size: 1.55rem;
    color: #08192e;
    font-weight: 800;
}

.lp-price-desc {
    margin: 0;
    color: #4a5d78;
    font-size: 0.89rem;
    line-height: 1.56;
}

.lp-price-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-block: 4px;
    border-top: 1px solid rgba(15, 50, 110, 0.08);
    border-bottom: 1px solid rgba(15, 50, 110, 0.08);
}

.lp-price-value strong {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 800;
    background: linear-gradient(135deg, #0d3d88 0%, #1e6aff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-price-value span {
    color: #6b80a0;
    font-size: 0.84rem;
    font-weight: 600;
}

.lp-price-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
    color: #1a2e48;
    font-size: 0.88rem;
}

.lp-price-features li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.lp-price-features li::before {
    content: '';
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8l3.5 3.5 7-7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 11px no-repeat,
        linear-gradient(135deg, #1460c8, #3b82f6);
}

.lp-price-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 50, 110, 0.08);
}

.lp-module-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(20, 96, 200, 0.08);
    border: 1px solid rgba(20, 96, 200, 0.18);
    color: #1460c8;
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── CTA button inside card ──────────────────────────────────────────── */
.lp-btn-pricing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #1460c8 0%, #2a7eff 100%);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(20, 96, 200, 0.38);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.lp-btn-pricing:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(20, 96, 200, 0.50);
    filter: brightness(1.08);
}

/* .lp-btn-outline-light esta pensado para fondo OSCURO (texto y borde blancos
   translucidos) y ahi funciona — el hero, el footer. Dentro de .lp-price-card
   no: esa tarjeta tiene un degradado casi blanco, asi que el boton quedaba
   blanco sobre blanco, apenas visible. Variante para fondo claro, con la misma
   forma que .lp-btn-pricing para que los dos botones de la tarjeta hagan pareja.
   Se scopea a .lp-price-card en vez de tocar la clase base, que sigue siendo
   correcta en todos los demas sitios donde se usa. */
.lp-price-card .lp-btn-outline-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1460c8;
    background: rgba(20, 96, 200, 0.06);
    border: 1.5px solid rgba(20, 96, 200, 0.28);
}

.lp-price-card .lp-btn-outline-light:hover {
    color: #0f4ba0;
    background: rgba(20, 96, 200, 0.12);
    border-color: rgba(20, 96, 200, 0.55);
}

/* ── Dots ────────────────────────────────────────────────────────────── */
.lp-pricing-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 44px;
}

.lp-pricing-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .25s, width .30s cubic-bezier(.34,1.2,.64,1), transform .20s;
}

.lp-pricing-dot.active {
    width: 26px;
    background: linear-gradient(90deg, #1460c8, #3b82f6);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.55);
}

.lp-pricing-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.2);
}

.lp-price-code {
    margin: 0;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0f4a99;
    font-weight: 700;
}

.lp-price-head h3 {
    margin: 2px 0 6px;
    font-size: 1.45rem;
    color: #0f1d37;
}

.lp-price-desc {
    margin: 0;
    color: #42526b;
    font-size: 0.92rem;
    line-height: 1.55;
}

.lp-price-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.lp-price-value strong {
    font-size: 2.05rem;
    line-height: 1;
    color: #0f4a99;
}

.lp-price-value span {
    color: #55657b;
    font-size: 0.86rem;
    font-weight: 600;
}

.lp-price-features {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 7px;
    color: #20314b;
    font-size: 0.9rem;
}

.lp-price-modules {
    margin: 0;
    font-size: 0.78rem;
    color: #586a82;
}

.lp-price-actions .lp-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 760px) {
    .lp-pricing-stage { gap: 6px; }
    .lp-pricing-nav { width: 42px; height: 42px; }
    .lp-pricing-nav svg { width: 19px; height: 19px; }
    .lp-price-card {
        width: clamp(256px, 82vw, 318px);
        padding: 24px 18px 20px;
    }

    .confirm-dialog.plan-editor-dialog {
        padding: 20px 16px;
    }

    .plan-module-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .plan-module-picker {
        min-width: 0;
        width: 100%;
    }
}

.color-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.color-config-field {
    display: grid;
    gap: 8px;
}

.color-input-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.color-picker {
    width: 48px;
    min-width: 48px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 4px;
    cursor: pointer;
}

.color-text-input {
    flex: 1 1 auto;
    min-width: 0;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(10, 25, 55, 0.2);
    cursor: pointer;
    padding: 0;
}

.color-swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 9px rgba(10, 25, 55, 0.2);
}

.branding-live-preview {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-alt);
    overflow: hidden;
}

.branding-live-bar {
    padding: 10px 12px;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
}

.branding-live-body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.branding-live-body .branding-live-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    padding: 0 14px;
    max-width: max-content;
}

.branding-live-body .branding-live-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    max-width: max-content;
}

.panel-mode-switch {
    display: inline-flex;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px;
    background: var(--surface-alt);
}

.panel-mode-switch .mode-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-2);
}

.panel-mode-switch .mode-option.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-card);
}

.panel-mode-compact {
    display: grid;
    gap: 6px;
    justify-items: end;
}

@media (max-width: 760px) {
    .panel-mode-compact {
        justify-items: start;
        margin-top: 8px;
    }
}

.module-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.module-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.module-card .module-name {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.module-card .module-value {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--primary);
}

.module-card .module-extra {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-2);
}

@media (max-width: 860px) {
    .color-config-grid {
        grid-template-columns: 1fr;
    }
}

/* Backups historial uses <section class="card"> — ensure correct base styling */
section.card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

/* Module block spacer — visual separator inside cards */
.module-block-spacer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.module-block-spacer > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted, #6b7280);
}
.module-block-spacer > summary::-webkit-details-marker,
.module-block-spacer > summary::marker { display: none; }
.module-block-spacer > form { margin-top: 12px; }

/* Module actions — action row below content in module cards */
.module-actions {
    margin-top: 16px;
}

/* Empresa lista — inline stats row */
.emp-stats-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.875rem;
}
.emp-stat { color: var(--text-muted); }
.emp-stat strong { color: var(--text); font-weight: 600; }
.emp-stat-sep { color: var(--border); }

/* Empresa editar — panel operativo + bd status */
.emp-panel-section { margin-bottom: 4px; }
.emp-panel-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 8px; }
.emp-db-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 12px; }
.emp-db-item { display: flex; flex-direction: column; gap: 2px; }
.emp-db-item span.muted { font-size: 0.75rem; }

/* ── pcard — single continuous admin card ────────────────────────────────── */
.pcard {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.me-card {
    overflow: visible;
}
.pcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-2, #f8f9fb);
}
.pcard-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.pcard-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--text); }
.pcard-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcard-meta-sep { font-size: 0.78rem; color: var(--text-muted); }

.pcard-section {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
}
.pcard-section:last-child { border-bottom: none; }
.pcard-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.pcard-section-label.danger { color: #b91c1c; }
.pcard-danger { background: #fff8f8; }

/* Cols single (full width section) */
.pcard-cols-single { width: 100%; }

/* Section label with count badge */
.pcard-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 5px;
    vertical-align: middle;
}

/* Status buttons — iOS style */
.ios-btn-green {
    background: #16a34a;
    color: #fff;
    border-color: transparent;
}
.ios-btn-green:hover { background: #15803d; }
.ios-btn-warn {
    background: #f59e0b;
    color: #fff;
    border-color: transparent;
}
.ios-btn-warn:hover { background: #d97706; }
.ios-btn-blue {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}
.ios-btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: transparent;
}
.ios-btn-danger:hover { background: #b91c1c; }

/* Status badge (archived) */
.pcard-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}
.pcard-status-badge.cancelled {
    background: #fee2e2;
    color: #991b1b;
}
.pcard-status-badge svg { stroke: currentColor; stroke-width: 2.5; }

/* Action group (estado buttons row) */
.pcard-action-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* DB card */
.pcard-db-card {
    background: var(--bg, #f8f9fb);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pcard-db-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-db-label { font-size: 0.75rem; color: var(--text-muted); }
.pcard-db-value { font-size: 0.82rem; }

/* User list */
.pcard-user-list { display: flex; flex-direction: column; gap: 0; }
.pcard-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}
.pcard-user-row:last-child { border-bottom: none; }
.pcard-user-info { display: flex; flex-direction: column; gap: 1px; font-size: 0.85rem; line-height: 1.3; }

/* Risk zone */
.pcard-risk-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.pcard-risk-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    width: 100%;
}
.pcard-risk-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pcard-risk-icon.warn { background: #fff3cd; color: #d97706; }
.pcard-risk-icon.danger { background: #fee2e2; color: #dc2626; }
.pcard-risk-icon svg { stroke: currentColor; }
.pcard-risk-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.pcard-risk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcard-risk-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin: 0; }
.pcard-risk-desc { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.4; }

.pcard-cols {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
}
.pcard-col { min-width: 0; }
.pcard-col-divider {
    width: 1px;
    background: var(--border-light);
    align-self: stretch;
    margin: 0 18px;
}

/* ── Platform/Sistema — inline-style cleanup ─────────────────────────────── */

/* Section divider and subsection title */
.section-hr { margin: 20px 0; border: 0; border-top: 1px solid var(--border); }
.section-subtitle { font-size: 1.02rem; }

/* Small chip variant */
.chip.chip-sm { font-size: 11px; }

/* Auto margins for common platform card patterns */
.platform-shell .bar-track + .actions { margin-top: 12px; }
.platform-shell .summary-grid + .actions { margin-top: 14px; }
.platform-shell .summary-grid + .summary-grid { margin-top: 14px; }
.platform-shell .card > p + .summary-grid { margin-top: 10px; }
.platform-shell .filter-bar { margin-bottom: 12px; }
.platform-shell .filter-bar-wrap { margin-top: 16px; }

/* Backup empresa accordion */
.backup-empresa-list { margin-top: 8px; }
.backup-empresa-section-head { margin-bottom: 12px; }

.backup-empresa-item.card { margin-bottom: 8px; padding: 0; }

.backup-empresa-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    gap: 12px;
}
.backup-empresa-item > summary::-webkit-details-marker,
.backup-empresa-item > summary::marker { display: none; }

.backup-empresa-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }

.backup-empresa-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.backup-empresa-nombre { font-weight: 600; }
.backup-empresa-stats  { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.backup-empresa-body {
    padding: 0 20px 16px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.backup-empresa-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 8px;
}

.backup-stat-count { font-size: 13px; }
.backup-stat-date  { font-size: 12px; }
.table-wrap.table-wrap-sm { max-height: 280px; overflow-y: auto; }

/* ─────────────────────────────────────────────
   AYUDA — sidebar layout
   ───────────────────────────────────────────── */
.ayuda-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.ayuda-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-alt, #f3f4f6);
    border-radius: var(--radius-sm);
}
.ayuda-check-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface-alt, #f3f4f6);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}
.ayuda-check-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.ayuda-check-icon.ok      { background: #f0fbf4; color: #0f6332; border-color: #bbf7d0; }
.ayuda-check-icon.warn    { background: #fffaeb; color: #7d5a00; border-color: #fde68a; }
.ayuda-check-icon.danger  { background: #fff1f1; color: #b91c1c; border-color: #fecaca; }
.ayuda-check-label { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 2px; }
.ayuda-check-value { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 0; }

/* ── FAQ buscador ── */
.faq-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.faq-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
}
.faq-search-input {
    width: 100%;
    padding: 10px 40px 10px 38px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface-alt, #f3f4f6);
    font-size: 0.92rem;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.faq-search-input:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    background: #fff;
}
.faq-search-clear {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: 50%;
}
.faq-search-clear svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.faq-search-clear:hover { background: var(--border); color: var(--text); }

/* ── FAQ módulos ── */
.faq-modules { display: flex; flex-direction: column; gap: 10px; }

.faq-module {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

/* module header = summary when <details> */
.faq-module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-alt, #f8f9fa);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.12s;
}
.faq-module-header::-webkit-details-marker { display: none; }
.faq-module-header:hover { background: #f0f4f8; }
.faq-module[open] > .faq-module-header { border-bottom: 1px solid var(--border); }

/* collapse arrow on module */
.faq-module-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.faq-module[open] > .faq-module-header .faq-module-arrow { transform: rotate(180deg); }

.faq-module-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.faq-module-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.faq-module-name { font-weight: 700; font-size: 0.92rem; flex: 1; color: var(--text); }
.faq-module-count { font-size: 0.75rem; color: var(--text-muted); }

/* ── FAQ Accordion ── */
.faq-accordion { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    gap: 12px;
    user-select: none;
    transition: background 0.12s;
}
.faq-q:hover { background: var(--surface-alt, #f8f9fa); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: '+';
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    width: 20px;
    text-align: center;
}
.faq-item[open] > .faq-q { color: var(--primary, #2563eb); background: #f8fbff; }
.faq-item[open] > .faq-q::after { transform: rotate(45deg); color: var(--primary, #2563eb); }

.faq-a {
    margin: 0;
    padding: 0 16px 14px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.65;
    animation: faq-in 0.18s ease;
}
@keyframes faq-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   TICKETS DE SOPORTE — /plataforma/soporte
   Todo el bloque vive aqui, no repartido entre app.css y el <style> de la plantilla:
   antes .ticket-item estaba aqui y .ticket-reply alla, y no habia forma de saber donde
   tocar. Los cortes responsive son 900 (cabecera a columna) y 640 (movil).
   ───────────────────────────────────────────── */

/* Tira de filtros: mismo lenguaje que .segment-control del resto de /plataforma, para que
   la pantalla se lea como una sola pieza. UNA sola fila que se arrastra si no cabe —
   nunca dos filas (regla de .tabs en CLAUDE.md). */
.ticket-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ticket-filters::-webkit-scrollbar { display: none; }
.ticket-filter {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.ticket-filter:hover:not(.active) { color: var(--text-2); background: rgba(255,255,255,0.5); }
.ticket-filter.active {
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(10,25,55,0.1), 0 1px 2px rgba(10,25,55,0.06);
}
.ticket-empty-filtered {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    background: var(--surface-alt);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.ticket-list { display: flex; flex-direction: column; gap: 12px; }

.ticket-item {
    position: relative;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow .18s ease;
}
.ticket-item:hover { box-shadow: var(--shadow); }
/* Franja de estado a la izquierda: se lee el estado de un vistazo sin buscar el chip. Va
   en ::before y no en border-left para que no descuadre el padding de las filas. */
.ticket-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--border);
}
.ticket-item[data-status="PENDIENTE"]::before   { background: #f59e0b; }
.ticket-item[data-status="EN_REVISION"]::before { background: var(--primary, #2563eb); }
.ticket-item[data-status="RESUELTO"]::before    { background: #16a34a; }
.ticket-item[data-status="NO_PROCEDE"]::before  { background: #94a3b8; }
.ticket-item[data-status="CERRADO"]::before     { background: #d1d5db; }

.ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}
/* Los dos bloques envuelven POR DENTRO antes de que la cabecera parta en dos filas: sin
   esto el correo del solicitante empujaba la fila entera y quedaba un hueco enorme en
   medio (el fallo "regado" documentado en CLAUDE.md). */
.ticket-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.ticket-who  { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; justify-content: flex-end; }
.ticket-code {
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--primary-soft, #eff6ff);
    color: var(--primary, #2563eb);
    padding: 3px 9px;
    border-radius: 7px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.ticket-date { font-size: 0.8rem; white-space: nowrap; }
.ticket-actor {
    font-size: 0.78rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-body { padding: 12px 16px; }
.ticket-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-field {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: var(--surface-alt);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.78rem;
    min-width: 0;
}
.ticket-field-key {
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ticket-field-val { color: var(--text); min-width: 0; overflow-wrap: anywhere; }

/* Respuesta ya enviada al cliente */
.ticket-response {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--primary-soft, #eff6ff);
    border: 1px solid var(--border);
}
.ticket-response-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .82rem;
    margin-bottom: 5px;
}
.ticket-response-head strong { display: inline-flex; align-items: center; gap: 6px; color: var(--primary, #2563eb); }
.ticket-response-head .muted {
    font-size: .78rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket-response-icon {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.ticket-response p { margin: 0; font-size: .89rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Formulario de respuesta, plegado */
.ticket-reply { margin-top: 12px; }
.ticket-reply summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .84rem;
    color: var(--primary, #2563eb);
    font-weight: 600;
    padding: 6px 10px 6px 6px;
    border-radius: 9px;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
/* El triangulo nativo del <summary> se sustituye por el chevron propio (mismo dibujo que
   el resto de desplegables de la app). Hacen falta las DOS reglas: Safari usa
   ::-webkit-details-marker y el resto list-style. */
.ticket-reply summary::-webkit-details-marker { display: none; }
.ticket-reply summary:hover { background: var(--primary-soft, #eff6ff); }
.ticket-reply-caret {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 2.5; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.ticket-reply[open] > summary > .ticket-reply-caret { transform: rotate(90deg); }
.ticket-reply form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ticket-reply textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 11px;
    border: 1.5px solid var(--border);
    padding: 10px 12px;
    font: inherit;
    font-size: .89rem;
    resize: vertical;
    min-height: 82px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.ticket-reply textarea:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px var(--primary-soft, #eff6ff);
}
.ticket-reply-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* El hijo flex es .ios-select-wrap, NO el <select>: enhanceIosSelect esconde el nativo y
   pinta su propio disparador. La regla vieja apuntaba al select oculto y no hacia nada. */
.ticket-reply-actions .ios-select-wrap { flex: 1 1 220px; min-width: 0; }
.ticket-reply-actions > .btn { flex: 0 0 auto; }

.ticket-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt, #f8f9fa);
}
/* Empuja "Eliminar" al extremo opuesto: es lo unico irreversible y no debe quedar pegado
   a "Reabrir". Con margin-left:auto en vez de un separador para que al envolver en movil
   caiga en su propia fila en vez de dejar una raya suelta. */
.ticket-actions .ticket-actions-danger { margin-left: auto; }

@media (max-width: 900px) {
    /* La cabecera pasa a columna ANTES de que el correo la parta sola: asi el bloque de
       quien lo pidio queda alineado con el resto y no colgando a la derecha. */
    .ticket-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ticket-who { justify-content: flex-start; }
    .ticket-actor { max-width: 100%; }
}

@media (max-width: 640px) {
    .ticket-header, .ticket-body { padding-left: 13px; padding-right: 13px; }
    .ticket-actions { padding: 10px 13px 12px; }
    /* En movil los botones se reparten la fila de dos en dos. El <form class="inline"> es
       el hijo flex, asi que el ancho se le da a EL y el boton de dentro va al 100% — un
       .btn suelto dentro de un form no se estira solo (gotcha documentado en CLAUDE.md). */
    .ticket-actions > form.inline { flex: 1 1 calc(50% - 4px); }
    .ticket-actions > form.inline .btn { width: 100%; }
    .ticket-actions .ticket-actions-danger { margin-left: 0; flex: 1 1 100%; }
    .ticket-reply-actions > .btn { flex: 1 1 100%; }
    .ticket-filters { margin-bottom: 12px; }
}

.ayuda-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.ayuda-sidebar {
    position: sticky;
    top: 80px;
    display: grid;
    gap: 4px;
}

.ayuda-sidebar-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 12px 4px;
    margin: 0;
}

.ayuda-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.ayuda-nav-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.ayuda-nav-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
}

.ayuda-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ayuda-content {
    display: grid;
    gap: 20px;
}

.ayuda-section {
    scroll-margin-top: 80px;
}

.ayuda-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: var(--radius-pill);
    padding: 3px 11px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.ayuda-steps {
    display: grid;
    gap: 12px;
    counter-reset: step-counter;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ayuda-steps li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: start;
    counter-increment: step-counter;
}

.ayuda-steps li::before {
    content: counter(step-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.ayuda-rule-list {
    display: grid;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ayuda-rule-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--text-2);
}

.ayuda-rule-list li::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: 7px;
}

.ayuda-module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ayuda-module-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    background: var(--surface-alt);
    display: grid;
    gap: 6px;
    transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}

.ayuda-module-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.ayuda-module-icon {
    width: 28px;
    height: 28px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ayuda-module-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.ayuda-module-desc {
    font-size: 0.84rem;
    color: var(--muted);
    margin: 0;
}

.ayuda-faq {
    display: grid;
    gap: 0;
}

.ayuda-faq-item {
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

.ayuda-faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ayuda-faq-q {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}

.ayuda-faq-a {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.55;
}

@media (max-width: 860px) {
    .ayuda-shell {
        grid-template-columns: 1fr;
    }
    .ayuda-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .ayuda-sidebar-title {
        width: 100%;
        padding: 0 0 4px;
    }
    .ayuda-nav-link {
        padding: 7px 12px;
        background: var(--surface-alt);
        border: 1px solid var(--border);
    }
    .ayuda-module-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────
   FASE 03 — FORM SECTIONS & CLIENT FORM
   ───────────────────────────────────────────── */

.form-section {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 24px;
}
.form-section:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.form-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.info-panel {
    background: rgba(20, 96, 200, 0.08);
    border: 1px solid rgba(20, 96, 200, 0.2);
    border-radius: 10px;
    color: var(--text-2);
    font-size: 0.86rem;
    line-height: 1.45;
    padding: 10px 12px;
}

.form-actions-sticky {
    position: sticky;
    bottom: 12px;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 35%, rgba(255,255,255,0.96) 100%);
}

.required-mark {
    color: #d94f4f;
    margin-left: 3px;
    font-weight: 700;
}

input.preview-field {
    background: var(--surface-alt);
    color: var(--text-2);
    font-weight: 600;
    border-color: transparent;
    cursor: default;
}
input.preview-field:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

.rep-autocomplete-info {
    background: rgba(20, 96, 200, 0.07);
    border: 1px solid rgba(20, 96, 200, 0.18);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--text-2);
    margin-bottom: 16px;
}

.form-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 28px;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 96, 200, 0.12);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: middle;
}

.field-checkbox {
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.check-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.check-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.representative-fields {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(20, 96, 200, 0.03);
}

.representative-toggle-wrap {
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.switch-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.switch-inline input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.switch-track {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #c7d0dd;
    border: 1px solid #b8c3d3;
    position: relative;
    transition: background .2s ease, border-color .2s ease;
    flex-shrink: 0;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 29, 56, 0.22);
    transition: transform .2s ease;
}

.switch-inline input[type="checkbox"]:checked + .switch-track {
    background: var(--primary);
    border-color: var(--primary-hover);
}

.switch-inline input[type="checkbox"]:checked + .switch-track::after {
    transform: translateX(18px);
}

.switch-inline input[type="checkbox"]:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px rgba(20, 96, 200, 0.18);
}

.switch-label {
    font-weight: 700;
    color: var(--text);
}

/* Ensure accounting action modals are not constrained by generic confirm dialog width. */
.confirm-dialog.accounting-modal-dialog {
    max-width: min(1120px, calc(100vw - 36px));
    width: min(1120px, calc(100vw - 36px));
    max-height: min(88vh, 820px);
    overflow: auto;
    overflow-x: hidden;
    padding: 26px;
}

.confirm-dialog.create-user-dialog {
    max-width: 680px;
    width: min(680px, calc(100vw - 32px));
    max-height: min(88vh, 820px);
    overflow: auto;
}

@media (max-width: 640px) {
    .form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .form-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 1200px) {
    .conta-general-top {
        grid-template-columns: 1fr;
    }

    .lawyer-panel-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .conta-general-filters .actions {
        width: 100%;
    }

    /* La regla que habia aqui (`.conta-kpi-strip .kpi-item`) apuntaba a una clase que NO
       existe en esta pantalla — los elementos son `.conta-kpi-item`, y `.kpi-item` a secas
       solo vive en la pantalla de inicio, de donde se copio sin adaptar. No matcheaba nada.
       Se ha movido junto a la definicion del bloque, con el nombre bueno y con los cortes
       donde de verdad hacen falta (el recorte empezaba a 1180, no a 700). */
}

/* ── WIZARD MODO GUIADO ────────────────────────────────────── */
.wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.wizard-overlay[hidden] { display: none; }
.wizard-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wizard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.wizard-title {
    font-weight: 700;
    font-size: 1rem;
    flex: 1;
}
.wizard-step-counter {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
}
.wizard-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--surface-alt);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wizard-close:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}
.wizard-progress-bar-wrap {
    height: 3px;
    background: var(--border);
    flex-shrink: 0;
}
.wizard-progress-bar {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s var(--ease-smooth);
}
/* wizard-body: contenedor flex sin scroll propio — cada pantalla maneja el suyo */
.wizard-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Pantalla de selección de trámite */
#wizardModeScreen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#wizardModeScreen[hidden] { display: none !important; }

/* Pantalla de pasos del formulario */
#wizardStepScreen {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
    min-height: 0;
}
#wizardStepScreen[hidden] { display: none !important; }

/* Barra superior fija: tabs + buscador */
.wizard-mode-toolbar {
    flex-shrink: 0;
    padding: 14px 20px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wizard-mode-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.wizard-tab {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
    white-space: nowrap;
    line-height: 1.4;
}
.wizard-tab:hover:not(.disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}
.wizard-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.wizard-tab.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
.wizard-tab-badge {
    font-size: 0.62rem;
    font-weight: 600;
    background: rgba(0,0,0,0.08);
    color: inherit;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.75;
}
.wizard-search {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")
        no-repeat 10px center;
    font-size: 0.87rem;
    color: var(--text);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.wizard-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    background-color: var(--surface);
}
.wizard-search::placeholder { color: var(--muted); }

/* Lista de trámites — zona con scroll */
/* ⚠️ `repeat(3, 1fr)` estaba clavado, sin ninguna consulta de medios: en movil el modal
   mide ~320px utiles y las tres columnas no caben, asi que la tercera quedaba CORTADA
   contra el borde derecho. Con auto-fill el propio navegador reparte: 3 columnas en un
   portatil, 2 en tablet y 1 en movil, sin puntos de corte que mantener.
   Los 190px son el ancho al que un trámite ("EX-16 Cedula inscripcion / Titulo de viaje")
   sigue siendo legible en dos lineas. */
.wizard-mode-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* ⚠️ `min-width: 0` es lo que de verdad arreglaba el desbordamiento. Como hijo flex, el
       minimo automatico (`min-width: auto`) es su contenido: la lista crecia hasta caber
       las 3 columnas a su ancho natural y se salia del dialogo. Mientras estuvo asi, ni
       cambiar las columnas ni anadir consultas de medios servia de nada — la rejilla no
       estaba midiendo contra el dialogo. */
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 20px;
    align-content: start;
}

/* ⚠️ Las 3 columnas estaban clavadas sin ninguna consulta de medios: en movil el dialogo
   deja ~356px utiles y las tres no caben — la tercera quedaba CORTADA contra su borde
   derecho.
   Se reparte con los cortes de siempre (900 / 640) y NO con `auto-fill`: auto-fill mide
   contra el ancho del DIALOGO, no el de la ventana, y aqui devolvia tres pistas desiguales
   (190 / 116 / 106) que seguian desbordando. Con numeros explicitos el resultado es el
   mismo en cualquier navegador y se entiende de un vistazo. */
@media (max-width: 900px) {
    .wizard-mode-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wizard-mode-list {
        grid-template-columns: 1fr;
    }
}

/* Cards de trámite */
.wizard-mode-option {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px 12px 16px;
    cursor: pointer;
    background: var(--surface);
    text-align: left;
    position: relative;
    transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.wizard-mode-option::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: transparent;
    transition: background var(--dur-fast);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.wizard-mode-option:hover {
    border-color: var(--primary);
    background: var(--surface-alt);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}
.wizard-mode-option:hover::before { background: var(--primary); }
.wizard-mode-option.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 1px var(--primary);
}
.wizard-mode-option.selected::before { background: var(--primary); }
.wizard-mode-option.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.wizard-mode-key {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 3px;
}
.wizard-mode-desc {
    font-size: 0.80rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.35;
}
.wizard-mode-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}

/* Barra inferior fija: Cancelar / Empezar */
.wizard-mode-actions {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border-light);
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Grupo EX-10 (trámites con variantes) — 1 col normal, 2 cols al expandir */
.wizard-mode-group {
    grid-column: span 3;
}
.wizard-mode-group.expanded {
    grid-column: 1 / -1;
}
.wizard-group-trigger {
    width: 100%;
    display: flex;
    align-items: center;
}
.wizard-mode-group.expanded .wizard-group-trigger {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom-color: var(--primary);
}
.wizard-group-arrow {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s var(--ease-smooth);
    padding-left: 8px;
}
.wizard-mode-group.expanded .wizard-group-arrow {
    transform: rotate(180deg);
}
.wizard-group-options {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px 14px;
    background: var(--primary-soft);
    border: 1.5px solid var(--primary);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin-top: -2px;
}
.wizard-mode-group.expanded .wizard-group-options {
    display: flex;
}
.wizard-group-option {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.wizard-group-option:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}
.wizard-group-option.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.wizard-step-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 16px;
}
.wizard-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.wizard-fields-grid .field { display: flex; flex-direction: column; gap: 4px; }
.wizard-fields-grid .field.full { grid-column: 1 / -1; }
.wizard-supplemental {
    grid-column: 1 / -1;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 12px;
}
.wizard-supplemental > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-2);
}
.wizard-supplemental[open] > summary { margin-bottom: 12px; }
.wizard-supplemental > summary::after { content: '+'; float: right; }
.wizard-supplemental[open] > summary::after { content: '−'; }
.wizard-fields-grid label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.wizard-fields-grid input,
.wizard-fields-grid select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 0.88rem;
    background: var(--surface);
    color: var(--text);
    box-sizing: border-box;
}
.wizard-fields-grid input:focus,
.wizard-fields-grid select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
}
.wizard-info-note {
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--surface-alt);
    border-left: 3px solid var(--primary-soft);
    padding: 6px 10px;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    margin-bottom: 4px;
    grid-column: 1 / -1;
}
.wizard-rep-reminder {
    grid-column: 1 / -1;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-xs);
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #92400e;
    margin-top: 8px;
}
.wizard-footer[hidden] { display: none; }
.wizard-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.wizard-footer .btn.ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    margin-right: auto;
}
.wizard-footer .btn.ghost:hover { background: var(--surface-alt); }

/* ── REPRESENTANTE HINT ────────────────────────────────────── */
.ex-rep-hint {
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--surface-alt);
    border-left: 3px solid var(--primary-soft);
    padding: 6px 10px;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING V2 — Cinematic Legal Tech
   Scope: .lp-* (aislado, no afecta al panel)
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset body para landing (sin padding-top del topnav fijo) ── */
body.landing-body {
    padding-top: 0;
    overflow-x: hidden;
}

/* ── Navbar landing ─────────────────────────────────────────── */
.lp-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    display: flex;
    align-items: center;
    padding: 0 clamp(20px, 5vw, 64px);
    height: 64px;
    background: rgba(6, 14, 28, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background var(--dur-mid);
}
.lp-nav.scrolled {
    background: rgba(6, 14, 28, 0.95);
}
.lp-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    flex-shrink: 0;
}
.lp-nav-brand img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
}
.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 28px;
}
.lp-nav-links a {
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: color var(--dur-fast), background var(--dur-fast);
}
.lp-nav-links a:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.lp-nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-smooth);
    white-space: nowrap;
}
.lp-btn-ghost {
    color: rgba(255,255,255,0.8);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
}
.lp-btn-ghost:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.35);
}
.lp-btn-primary {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 4px 14px rgba(20,96,200,0.4);
}
.lp-btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 20px rgba(20,96,200,0.55);
    transform: translateY(-1px);
}
.lp-btn-primary-dark {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 4px 14px rgba(20,96,200,0.4);
    padding: 13px 32px;
    font-size: 1rem;
}
.lp-btn-primary-dark:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(20,96,200,0.55);
}
.lp-btn-outline-light {
    color: rgba(255,255,255,0.85);
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.25);
    padding: 13px 28px;
    font-size: 1rem;
}
.lp-btn-outline-light:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.45);
}

/* ── Secciones base ─────────────────────────────────────────── */
.lp-section {
    padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.lp-section-full {
    padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
}
.lp-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.lp-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}
.lp-label-light {
    color: rgba(100,180,255,0.9);
}
.lp-h2 {
    margin: 0 0 16px;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.18;
    color: var(--text);
}
.lp-h2-light {
    color: #fff;
}
.lp-lead {
    margin: 0 0 40px;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--muted);
    max-width: 56ch;
    line-height: 1.7;
}
.lp-lead-light {
    color: rgba(255,255,255,0.68);
}

/* ── 1. HERO ────────────────────────────────────────────────── */
.lp-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px clamp(20px, 6vw, 80px) 80px;
    overflow: hidden;
    background: #06101e;
}

/* Gradiente de fondo rico */
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(20,96,200,0.28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(10,50,120,0.22) 0%, transparent 60%),
        linear-gradient(170deg, #06101e 0%, #0a1a35 55%, #071228 100%);
    pointer-events: none;
}

/* Grid de puntos decorativo */
.lp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}

.lp-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}
.lp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(20,96,200,0.18);
    border: 1px solid rgba(20,96,200,0.35);
    color: rgba(150,200,255,0.95);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.lp-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4da3ff;
    box-shadow: 0 0 8px #4da3ff;
    animation: lp-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}
.lp-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #fff;
}
.lp-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #4da3ff 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lp-hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255,255,255,0.6);
    max-width: 54ch;
    margin: 0 auto 40px;
    line-height: 1.7;
}
.lp-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.lp-hero-scroll {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.3);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: lp-bounce 2s ease-in-out infinite;
}
.lp-hero-scroll svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}
@keyframes lp-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* Mockup card en el hero */
.lp-hero-mockup {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    max-width: 860px;
    width: 100%;
}
.lp-mockup-frame {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 24px 60px rgba(0,0,0,0.6),
        0 8px 20px rgba(0,0,0,0.4);
}
.lp-mockup-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lp-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.lp-mockup-dot:nth-child(1) { background: rgba(255,95,87,0.7); }
.lp-mockup-dot:nth-child(2) { background: rgba(255,188,46,0.7); }
.lp-mockup-dot:nth-child(3) { background: rgba(40,202,66,0.7); }
.lp-mockup-img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(145deg, #0d1f3c 0%, #0a1628 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.2);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    border: 1.5px dashed rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 40px 60px;
    margin: 24px;
    width: calc(100% - 48px);
    transition: border-color var(--dur-mid);
}
.lp-img-placeholder svg {
    width: 40px;
    height: 40px;
    stroke: rgba(255,255,255,0.15);
    fill: none;
    stroke-width: 1.5;
}
.lp-img-placeholder-light {
    color: var(--muted);
    border-color: var(--border);
    background: var(--surface-alt);
    margin: 0;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    border-style: dashed;
    border-width: 2px;
}
.lp-img-placeholder-light svg {
    stroke: var(--border);
}

/* ── 2. PROBLEMA ────────────────────────────────────────────── */
.lp-problem {
    background: var(--bg);
}
.lp-problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 48px;
}
.lp-pain-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--dur-mid), transform var(--dur-mid);
}
.lp-pain-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.lp-pain-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: #fff5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-pain-icon svg {
    width: 20px;
    height: 20px;
    stroke: #c0392b;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
[data-theme="dark"] .lp-pain-icon {
    background: rgba(255,69,58,0.12);
}
.lp-pain-card h3 {
    margin: 0;
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--text);
}
.lp-pain-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ── 3. SOLUCIÓN / MÓDULOS ──────────────────────────────────── */
.lp-solution {
    background: var(--surface);
}
.lp-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
}
.lp-module-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow var(--dur-mid), transform var(--dur-mid), border-color var(--dur-mid);
    position: relative;
    overflow: hidden;
}
.lp-module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-mid) var(--ease-smooth);
}
.lp-module-card:hover::before {
    transform: scaleX(1);
}
.lp-module-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--primary-soft);
}
.lp-module-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-module-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
[data-theme="dark"] .lp-module-icon {
    background: rgba(10,132,255,0.15);
}
[data-theme="dark"] .lp-module-icon svg {
    stroke: #4da3ff;
}
.lp-module-card h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.lp-module-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.65;
}

/* ── 4. EXPEDIENTE ──────────────────────────────────────────── */
.lp-expediente {
    background: var(--bg);
}
.lp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    margin-top: 0;
}
.lp-split-reverse {
    direction: rtl;
}
.lp-split-reverse > * {
    direction: ltr;
}
.lp-split-text { }
.lp-flow-list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lp-flow-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}
.lp-flow-item:last-child { border-bottom: none; }
.lp-flow-num {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
[data-theme="dark"] .lp-flow-num {
    background: rgba(10,132,255,0.15);
    color: #4da3ff;
}
.lp-flow-item h4 {
    margin: 0 0 4px;
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--text);
}
.lp-flow-item p {
    margin: 0;
    font-size: 0.87rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ── 5. AUTOMATIZACIÓN ──────────────────────────────────────── */
.lp-automation {
    background: linear-gradient(135deg, #06101e 0%, #0d1f3c 60%, #132a52 100%);
    position: relative;
    overflow: hidden;
}
.lp-automation::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.lp-automation::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20,96,200,0.25) 0%, transparent 70%);
    pointer-events: none;
}
.lp-automation .lp-section-inner {
    position: relative;
    z-index: 1;
}
.lp-auto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    margin-top: 0;
}
.lp-auto-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 36px;
}
.lp-auto-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.lp-auto-step-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: rgba(20,96,200,0.25);
    border: 1px solid rgba(20,96,200,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-auto-step-icon svg {
    width: 18px;
    height: 18px;
    stroke: #4da3ff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-auto-step h4 {
    margin: 0 0 4px;
    font-size: 0.97rem;
    font-weight: 700;
    color: #fff;
}
.lp-auto-step p {
    margin: 0;
    font-size: 0.87rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
}
.lp-auto-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-mockup-frame-light {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
}

/* ── 6. CONFIANZA ───────────────────────────────────────────── */
.lp-trust {
    background: var(--surface);
}
.lp-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.lp-trust-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: box-shadow var(--dur-mid), transform var(--dur-mid);
}
.lp-trust-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.lp-trust-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-trust-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
[data-theme="dark"] .lp-trust-icon {
    background: rgba(10,132,255,0.15);
}
[data-theme="dark"] .lp-trust-icon svg {
    stroke: #4da3ff;
}
.lp-trust-card h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.lp-trust-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.65;
}

/* ── 7. CTA FINAL ───────────────────────────────────────────── */
.lp-cta {
    background: linear-gradient(160deg, #06101e 0%, #0d1f3c 100%);
    text-align: center;
    padding: clamp(100px, 12vw, 140px) clamp(20px, 6vw, 80px);
    position: relative;
    overflow: hidden;
}
.lp-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(20,96,200,0.2) 0%, transparent 70%);
    pointer-events: none;
}
.lp-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}
.lp-cta h2 {
    margin: 0 0 18px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: #fff;
}
.lp-cta p {
    margin: 0 0 40px;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
}
.lp-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── FOOTER MÍNIMO ──────────────────────────────────────────── */
.lp-footer {
    background: #040c18;
    padding: 28px clamp(20px, 5vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.lp-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.lp-footer-brand img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(0.35);
}
.lp-footer-copy {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.25);
}

/* ── Mockup frame body ──────────────────────────────────────── */
.lp-mockup-urlbar {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-left: 10px;
    font-family: monospace;
}
.lp-mockup-body {
    padding: 0;
    background: #f0f2f5;
    overflow: hidden;
}

/* ── Panel widget (hero mockup) ─────────────────────────────── */
.lp-pw-topnav {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.72rem;
}
.lp-pw-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #0f1824;
    font-size: 0.8rem;
}
.lp-pw-brand-icon {
    width: 16px;
    height: 16px;
    stroke: #1460c8;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.lp-pw-nav-links {
    display: flex;
    gap: 4px;
}
.lp-pw-nav-link {
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: 500;
    color: #556070;
    font-size: 0.7rem;
}
.lp-pw-nav-link.active {
    background: #e7f0ff;
    color: #1460c8;
    font-weight: 700;
}
.lp-pw-avatar {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1460c8;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-pw-kpi-strip {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0;
    overflow: hidden;
}
.lp-pw-kpi {
    flex: 1;
    padding: 10px 12px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-pw-kpi:last-child { border-right: none; }
.lp-pw-kpi-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1460c8;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.lp-pw-kpi-label {
    font-size: 0.6rem;
    color: #556070;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.lp-pw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
}
.lp-pw-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
}
.lp-pw-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f1824;
    margin-bottom: 8px;
}
.lp-pw-badge {
    font-size: 0.62rem;
    font-weight: 600;
    color: #1460c8;
    background: #e7f0ff;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid #c5d9f7;
}
.lp-pw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f2f5;
}
.lp-pw-row:last-child { border-bottom: none; }
.lp-pw-row-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #0f1824;
}
.lp-pw-row-sub {
    font-size: 0.62rem;
    color: #556070;
}
.lp-pw-chip {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.lp-pw-chip-ok   { background: #dcfce7; color: #15803d; }
.lp-pw-chip-warn { background: #fef9c3; color: #92400e; }
.lp-pw-chip-info { background: #e7f0ff; color: #1460c8; }
.lp-pw-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}
.lp-pw-stat {
    background: #f0f2f5;
    border-radius: 6px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-pw-stat-label {
    font-size: 0.58rem;
    color: #556070;
}
.lp-pw-stat-val {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f1824;
}
.lp-pw-stat-flow {
    font-size: 0.6rem;
}
.lp-pw-bar-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}
.lp-pw-bar-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: #556070;
    font-weight: 600;
}
.lp-pw-bar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-pw-bar-track {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.lp-pw-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ── Expediente widget ──────────────────────────────────────── */
.lp-exp-widget {
    background: #fff;
    border: 1px solid #d4dce8;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10,25,55,0.1);
}
.lp-ew-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8faff;
    border-bottom: 1px solid #e2e8f0;
}
.lp-ew-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f1824;
}
.lp-ew-header-btns {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.lp-ew-btn {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f0f2f5;
    border: 1px solid #d4dce8;
    color: #2c3a4e;
    cursor: default;
    white-space: nowrap;
}
.lp-ew-btn-primary {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    background: #1460c8;
    color: #fff;
    cursor: default;
    display: inline-block;
    white-space: nowrap;
}
.lp-ew-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 12px;
    padding: 12px;
    background: #f0f2f5;
}
.lp-ew-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
}
.lp-ew-card h4 {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f1824;
}
.lp-ew-field {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.7rem;
}
.lp-ew-field:last-child { border-bottom: none; }
.lp-ew-field > span:first-child {
    font-weight: 700;
    color: #2c3a4e;
    min-width: 90px;
    flex-shrink: 0;
}
.lp-ew-field > span:last-child { color: #556070; }
.lp-ew-select {
    border: 1px solid #d4dce8;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.72rem;
    color: #556070;
    background: #fff;
    margin-bottom: 10px;
}
.lp-ew-btn-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.lp-ew-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.lp-ew-side-header h4 { margin: 0; font-size: 0.82rem; font-weight: 700; color: #0f1824; }
.lp-ew-money-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.lp-ew-money {
    background: #f0f2f5;
    border-radius: 6px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.lp-ew-money > span {
    font-size: 0.6rem;
    color: #556070;
}
.lp-ew-money > strong {
    font-size: 0.72rem;
    color: #0f1824;
    font-weight: 700;
}

/* ── Modelos widget (automatización) ────────────────────────── */
.lp-models-widget {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
}
.lp-mw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}
.lp-mw-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}
.lp-mw-search svg {
    width: 13px;
    height: 13px;
    stroke: rgba(255,255,255,0.25);
    flex-shrink: 0;
}
.lp-mw-list {
    display: flex;
    flex-direction: column;
    padding: 0 12px 12px;
    gap: 6px;
}
.lp-mw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    transition: background var(--dur-fast);
}
.lp-mw-item-active {
    background: rgba(20,96,200,0.2);
    border-color: rgba(20,96,200,0.4);
}
.lp-mw-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-mw-item-icon svg {
    width: 14px;
    height: 14px;
    stroke: rgba(255,255,255,0.5);
}
.lp-mw-item-active .lp-mw-item-icon svg {
    stroke: #4da3ff;
}
.lp-mw-item-body { flex: 1; min-width: 0; }
.lp-mw-item-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-mw-item-active .lp-mw-item-name { color: #fff; }
.lp-mw-item-meta {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
}

/* ── Hero reveal animations ─────────────────────────────────── */
.lp-reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
    transition-delay: var(--lp-delay, 0ms);
}
.lp-reveal-fade {
    opacity: 0;
    transition: opacity 0.6s var(--ease-smooth);
    transition-delay: var(--lp-delay, 0ms);
}
.lp-reveal-up.lp-revealed,
.lp-reveal-fade.lp-revealed {
    opacity: 1;
    transform: none;
}

/* ── Parallax layer del hero ────────────────────────────────── */
.lp-hero-parallax {
    position: absolute;
    inset: -20% 0 -20% 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(20,96,200,0.28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(10,50,120,0.22) 0%, transparent 60%);
    pointer-events: none;
    will-change: transform;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lp-modules-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-split        { grid-template-columns: 1fr; gap: 40px; }
    .lp-split-reverse { direction: ltr; }
    .lp-auto-grid    { grid-template-columns: 1fr; gap: 40px; }
    .lp-trust-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .lp-contact-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .lp-modules-grid        { grid-template-columns: 1fr; }
    .lp-problem-grid        { grid-template-columns: 1fr; }
    .lp-trust-grid          { grid-template-columns: 1fr; }
    .lp-nav-links           { display: none; }
    .lp-hero h1             { font-size: clamp(2rem, 10vw, 3rem); }
    .lp-pw-kpi-strip        { display: grid; grid-template-columns: repeat(3, 1fr); }
    .lp-pw-grid             { grid-template-columns: 1fr; }
    .lp-ew-body             { grid-template-columns: 1fr; }
    .lp-ew-header-btns      { display: none; }
    .lp-form-row            { grid-template-columns: 1fr; }
    .lp-footer-bottom       { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lp-footer-legal-links  { gap: 14px; }
}

/* ── Nav wordmark ───────────────────────────────────────────── */
.lp-nav-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
}
.lp-nav-wordmark {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

/* ── CTA logo ───────────────────────────────────────────────── */
.lp-cta-logo {
    width: 52px;
    height: 52px;
    margin: 0 auto 24px;
}
.lp-cta-logo svg {
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

/* ── CONTACTO ────────────────────────────────────────────────── */
.lp-contact {
    background: linear-gradient(160deg, #06101e 0%, #0a1a35 60%, #0d1f3c 100%);
    position: relative;
    overflow: hidden;
}
.lp-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.lp-contact .lp-section-inner { position: relative; z-index: 1; }
.lp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}
.lp-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
    cursor: pointer;
}
.lp-contact-card:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.2);
    transform: translateX(4px);
}
.lp-contact-card-static { cursor: default; }
.lp-contact-card-static:hover { transform: none; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.lp-contact-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(20,96,200,0.25);
    border: 1px solid rgba(20,96,200,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-contact-card-icon svg {
    width: 20px;
    height: 20px;
    stroke: #4da3ff;
    flex-shrink: 0;
}
.lp-contact-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lp-contact-card-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}
.lp-contact-card-arrow {
    width: 18px;
    height: 18px;
    margin-left: auto;
    stroke: rgba(255,255,255,0.25);
    flex-shrink: 0;
    transition: stroke var(--dur-fast), transform var(--dur-fast);
}
.lp-contact-card:hover .lp-contact-card-arrow {
    stroke: rgba(255,255,255,0.6);
    transform: translateX(3px);
}

/* ── Formulario de contacto ─────────────────────────────────── */
.lp-contact-form {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: clamp(24px, 4vw, 40px);
    backdrop-filter: blur(10px);
}
.lp-contact-form-title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}
.lp-contact-form-sub {
    margin: 0 0 28px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}
.lp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.lp-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.lp-form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.02em;
}
.lp-form-optional {
    font-weight: 400;
    color: rgba(255,255,255,0.35);
}
/* Información de primera capa bajo el botón de enviar. Tiene que leerse
   —es información obligatoria—, pero sin competir con el propio formulario. */
.lp-form-privacy {
    margin: 16px 0 0;
    font-size: .76rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.42);
}
.lp-form-privacy strong {
    color: rgba(255,255,255,0.62);
    font-weight: 600;
}
.lp-form-privacy a { color: #7eb3ff; }
.lp-form-input {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 0.9rem;
    color: #fff;
    width: 100%;
    outline: none;
    font-family: inherit;
    transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.lp-form-input::placeholder { color: rgba(255,255,255,0.28); }
.lp-form-input:focus {
    border-color: rgba(77,163,255,0.55);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px rgba(20,96,200,0.2);
}
.lp-form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.lp-btn-form-submit {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
    box-shadow: 0 4px 14px rgba(20,96,200,0.4);
    margin-top: 4px;
}
.lp-btn-form-submit svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}
.lp-btn-form-submit:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 20px rgba(20,96,200,0.55);
    transform: translateY(-1px);
}

/* ── FOOTER COMPLETO ─────────────────────────────────────────── */
.lp-footer-full {
    background: #040c18;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.lp-footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(24px, 4vw, 60px);
    padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 64px);
    max-width: 1200px;
    margin: 0 auto;
}
.lp-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}
.lp-footer-logo svg {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}
.lp-footer-wordmark {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}
.lp-footer-tagline {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.65;
    margin: 0 0 24px;
}
.lp-footer-social {
    display: flex;
    gap: 10px;
}
.lp-footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.lp-footer-social-link:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.lp-footer-social-link svg {
    width: 16px;
    height: 16px;
}
.lp-footer-col-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin: 0 0 16px;
}
.lp-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-footer-links a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color var(--dur-fast);
}
.lp-footer-links a:hover { color: #fff; }
.lp-footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.lp-footer-contact-list li svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: rgba(255,255,255,0.25);
}
.lp-footer-contact-list a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color var(--dur-fast);
}
.lp-footer-contact-list a:hover { color: #fff; }
.lp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px clamp(20px, 5vw, 64px);
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.lp-footer-copy {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.22);
}
/* Pasaron de 3 enlaces a 7 al publicarse el cuerpo legal completo: sin
   flex-wrap, en un portatil de 13" la fila empujaba el copyright fuera. */
.lp-footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 8px;
}
.lp-footer-legal-links a {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.22);
    text-decoration: none;
    transition: color var(--dur-fast);
}
.lp-footer-legal-links a:hover { color: rgba(255,255,255,0.6); }

/* ── Dark mode overrides (landing) ─────────────────────────── */
[data-theme="dark"] .lp-problem { background: #000; }
[data-theme="dark"] .lp-solution { background: var(--surface); }
[data-theme="dark"] .lp-expediente { background: #000; }
[data-theme="dark"] .lp-trust { background: var(--surface); }
[data-theme="dark"] .lp-module-card { background: var(--surface-alt); }
[data-theme="dark"] .lp-pain-card   { background: var(--surface-alt); }
[data-theme="dark"] .lp-trust-card  { background: var(--surface-alt); }
[data-theme="dark"] .lp-flow-item   { border-bottom-color: var(--border); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp-problem    { background: #000; }
    :root:not([data-theme="light"]) .lp-solution   { background: var(--surface); }
    :root:not([data-theme="light"]) .lp-expediente { background: #000; }
    :root:not([data-theme="light"]) .lp-trust      { background: var(--surface); }
    :root:not([data-theme="light"]) .lp-module-card { background: var(--surface-alt); }
    :root:not([data-theme="light"]) .lp-pain-card  { background: var(--surface-alt); }
    :root:not([data-theme="light"]) .lp-trust-card { background: var(--surface-alt); }
    :root:not([data-theme="light"]) .lp-flow-item  { border-bottom-color: var(--border); }
}

/* ═══════════════════════════════════════════════════════════════
   LANDING V3 — Mejoras UI/UX + Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── Fix doble padding horizontal en secciones ──────────────── */
.lp-section-full {
    padding-left: 0;
    padding-right: 0;
}

/* ── Mockup 3D tilt ─────────────────────────────────────────── */
.lp-mockup-tilt {
    transform: perspective(1100px) rotateX(3.5deg) rotateY(0deg);
    transform-origin: center bottom;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lp-hero-mockup:hover .lp-mockup-tilt {
    transform: perspective(1100px) rotateX(1deg) rotateY(0deg);
}

/* ── Mockup glow bajo el frame ──────────────────────────────── */
.lp-mockup-frame {
    position: relative;
}
.lp-mockup-frame::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 10%;
    right: 10%;
    height: 60px;
    background: radial-gradient(ellipse, rgba(20,96,200,0.45) 0%, transparent 70%);
    filter: blur(16px);
    pointer-events: none;
    border-radius: 50%;
}

/* ── Trust grid — 4 columnas en desktop ─────────────────────── */
.lp-trust-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.lp-trust-grid-4 .lp-trust-card {
    flex-direction: column;
    gap: 14px;
}
.lp-trust-grid-4 .lp-trust-card > div { flex: 1; }

/* ── Pain cards — acento de color superior ──────────────────── */
.lp-pain-card {
    position: relative;
    overflow: hidden;
}
.lp-pain-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #f97316);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 3px 3px 0 0;
}
.lp-pain-card:hover::before {
    transform: scaleX(1);
}

/* ── Module cards: glow subtle en hover ─────────────────────── */
.lp-module-card:hover {
    box-shadow: 0 8px 32px rgba(20,96,200,0.14), var(--shadow-lg);
}

/* ── Hamburger button (mobile nav) ─────────────────────────── */
.lp-nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.lp-nav-hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s;
    transform-origin: center;
}
.lp-nav-hamburger-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.lp-nav-hamburger-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.lp-nav-hamburger-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile menu overlay ────────────────────────────────────── */
.lp-mobile-menu {
    display: none;
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 190;
    background: rgba(6, 14, 28, 0.97);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transform: translateY(-12px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.28s ease;
    pointer-events: none;
}
.lp-mobile-menu.lp-mobile-menu-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lp-mobile-menu-inner {
    display: flex;
    flex-direction: column;
    padding: 32px clamp(20px, 6vw, 40px);
    height: 100%;
    gap: 0;
}
.lp-mobile-link {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: color 0.18s ease, padding-left 0.22s ease;
}
.lp-mobile-link:hover {
    color: #fff;
    padding-left: 8px;
}
.lp-mobile-actions {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-mobile-actions .lp-btn {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
    font-size: 1rem;
}

/* ── Hero: scroll indicator mejorado ───────────────────────── */
.lp-hero-scroll svg {
    animation: lp-bounce-arrow 2s ease-in-out infinite;
}
@keyframes lp-bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

/* ── CTA: glow animado ──────────────────────────────────────── */
.lp-cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(20,96,200,0.18) 0%, transparent 70%);
    animation: lp-cta-glow 5s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes lp-cta-glow {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* ── Scroll progress bar ────────────────────────────────────── */
.lp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #1a6fff, #a78bfa);
    z-index: 300;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ── RESPONSIVE V3 ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .lp-trust-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .lp-trust-grid-4 .lp-trust-card { flex-direction: row; }
}
@media (max-width: 760px) {
    .lp-nav-links  { display: none; }
    .lp-nav-cta    { display: none; }
    .lp-nav-hamburger { display: flex; }
    .lp-mobile-menu   { display: block; }
    .lp-hero-mockup   { margin-top: 40px; }
    .lp-mockup-tilt   { transform: none; }
    .lp-mockup-tilt:hover { transform: none; }
    .lp-pw-nav-links  { display: none; }
    .lp-trust-grid-4  { grid-template-columns: 1fr; }
    .lp-trust-grid-4 .lp-trust-card { flex-direction: row; }
}
@media (max-width: 520px) {
    .lp-hero-mockup { display: none; }
    .lp-hero { min-height: 100svh; padding-bottom: 100px; }
}

/* ── Reducir padding excesivo en secciones ──────────────────── */
.lp-section {
    padding-top: clamp(56px, 7vw, 88px);
    padding-bottom: clamp(56px, 7vw, 88px);
}
.lp-section-full {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Navbar: transparente al inicio, glass al hacer scroll ──── */
.lp-nav {
    background: rgba(4, 10, 22, 0);
    border-bottom-color: rgba(255,255,255,0);
    transition: background 0.4s ease, border-bottom-color 0.4s ease, box-shadow 0.4s ease;
}
.lp-nav.scrolled {
    background: rgba(6, 14, 28, 0.92);
    border-bottom-color: rgba(255,255,255,0.07);
    box-shadow: 0 1px 24px rgba(0,0,0,0.35);
}

/* ── Problema grid: 5 items bien distribuidos ───────────────── */
.lp-problem-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .lp-problem-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
    }
    .lp-problem-grid .lp-pain-card:nth-child(1) { grid-column: 1 / 3; }
    .lp-problem-grid .lp-pain-card:nth-child(2) { grid-column: 3 / 5; }
    .lp-problem-grid .lp-pain-card:nth-child(3) { grid-column: 5 / 7; }
    .lp-problem-grid .lp-pain-card:nth-child(4) { grid-column: 2 / 4; }
    .lp-problem-grid .lp-pain-card:nth-child(5) { grid-column: 4 / 6; }
}
@media (max-width: 700px) {
    .lp-problem-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .lp-problem-grid .lp-pain-card { grid-column: auto !important; }
}
@media (max-width: 460px) {
    .lp-problem-grid { grid-template-columns: 1fr !important; }
}

/* ── Back to top button ─────────────────────────────────────── */
.lp-back-top {
    position: fixed;
    bottom: 32px;
    right: 28px;
    z-index: 250;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20, 96, 200, 0.9);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(20,96,200,0.45);
    opacity: 0;
    transform: translateY(12px) scale(0.88);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    pointer-events: none;
    backdrop-filter: blur(8px);
}
.lp-back-top svg {
    width: 18px;
    height: 18px;
}
.lp-back-top.lp-back-top-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.lp-back-top:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 28px rgba(20,96,200,0.6);
    transform: translateY(-2px) scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   AUTH — Login / acceso
   ═══════════════════════════════════════════════════════════════ */
body.auth-body {
    padding-top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #050d1c;
}
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 20px;
    position: relative;
    overflow: hidden;
}
.auth-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.auth-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.auth-bg-glow-1 {
    width: 500px;
    height: 400px;
    top: -100px;
    left: -100px;
    background: radial-gradient(ellipse, rgba(20,96,200,0.22) 0%, transparent 70%);
}
.auth-bg-glow-2 {
    width: 400px;
    height: 360px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(ellipse, rgba(100,60,200,0.15) 0%, transparent 70%);
}
.auth-bg-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
}
/* ── Wrap de la card ── */
.auth-card-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Logo móvil */
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 4px;
}
.auth-brand-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.auth-brand-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04em; color: #fff; }

/* ── Card principal ── */
.auth-card {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #0f1d33 0%, #0c1828 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: clamp(28px, 5vw, 38px);
    box-shadow:
        0 32px 64px rgba(0,0,0,0.55),
        0 1px 0 rgba(255,255,255,0.07) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset;
    animation: authCardIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

/* Línea gradiente superior — contenida por overflow:hidden */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(77,159,255,0.85) 30%,
        rgba(167,139,250,0.95) 60%,
        transparent 100%);
}

/* Cabecera de la card */
.auth-card-head { margin-bottom: 24px; }

.auth-card-avatar {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(26,111,255,0.25), rgba(124,58,237,0.2));
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #7eb8ff;
    box-shadow: 0 4px 16px rgba(26,111,255,0.2);
}
.auth-card-avatar svg { width: 24px; height: 24px; }

.auth-card-title {
    margin: 0 0 5px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #fff;
    line-height: 1.2;
}
.auth-card-sub {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.5;
}

/* ── Alertas ── */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 16px;
    font-weight: 500;
}
.auth-alert svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.auth-alert-error { background: rgba(191,44,44,0.14); border: 1px solid rgba(191,44,44,0.28); color: #fca5a5; }
.auth-alert-info  { background: rgba(20,96,200,0.16); border: 1px solid rgba(20,96,200,0.3);  color: #93c5fd; }
.auth-alert-ok    { background: rgba(27,138,74,0.14);  border: 1px solid rgba(27,138,74,0.28); color: #86efac; }

/* ── Formulario ── */
.auth-form { display: flex; flex-direction: column; gap: 0; }

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

.auth-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Label row con link olvidaste */
.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.auth-label-link {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(77,163,255,0.65);
    text-decoration: none;
    letter-spacing: 0;
    text-transform: none;
    transition: color 0.2s ease;
}
.auth-label-link:hover { color: #7eb8ff; }

/* Wrap del input con transición de icono */
.auth-input-wrap { position: relative; }
.auth-input-wrap:focus-within .auth-input-icon { color: rgba(77,163,255,0.8); }

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    color: rgba(255,255,255,0.22);
    pointer-events: none;
    transition: color 0.2s ease;
}

.auth-input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-left: 2px solid rgba(255,255,255,0.09);
    border-radius: 11px;
    font-size: 0.9rem;
    color: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.auth-input::placeholder { color: rgba(255,255,255,0.2); }
.auth-input:focus {
    border-color: rgba(77,163,255,0.45);
    border-left-color: #4d9fff;
    background: rgba(255,255,255,0.075);
    box-shadow: 0 0 0 3px rgba(20,96,200,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
.auth-select { appearance: none; cursor: pointer; }

/* ── Selector de empresa/bufete (login multi-empresa) ── */
.login-tenant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.login-tenant-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.login-tenant-card:hover {
    border-color: rgba(77,163,255,0.35);
    background: rgba(255,255,255,0.07);
}
.login-tenant-card.selected {
    border-color: #4d9fff;
    background: rgba(20,96,200,0.14);
    box-shadow: 0 0 0 3px rgba(20,96,200,0.18);
}
.login-tenant-card__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.login-tenant-card.selected .login-tenant-card__check {
    border-color: #4d9fff;
    background: #4d9fff;
}
.login-tenant-card__check svg {
    width: 13px;
    height: 13px;
    stroke: rgba(255,255,255,0.0);
    stroke-width: 2.5;
    fill: none;
    transition: stroke 0.15s ease;
}
.login-tenant-card.selected .login-tenant-card__check svg {
    stroke: #fff;
}
.login-tenant-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.login-tenant-card__name {
    font-size: 15px;
    font-weight: 500;
    color: #f0f4ff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.login-tenant-card__rol {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Toggle contraseña */
.auth-input-pass { padding-right: 44px; }
.auth-pass-toggle {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    padding: 4px;
    color: rgba(255,255,255,0.22);
    display: flex; align-items: center;
    transition: color 0.2s ease;
}
.auth-pass-toggle svg { width: 15px; height: 15px; }
.auth-pass-toggle:hover { color: rgba(255,255,255,0.6); }

/* ── Botón principal ── */
.auth-btn {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 24px;
    margin-top: 8px;
    background: linear-gradient(135deg, #1a6fff 0%, #5b3ff8 100%);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 20px rgba(26,111,255,0.4), 0 1px 0 rgba(255,255,255,0.15) inset;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.auth-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.auth-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 8px 28px rgba(26,111,255,0.55), 0 1px 0 rgba(255,255,255,0.15) inset;
}
.auth-btn:active { transform: translateY(0); }

/* Shimmer en hover */
.auth-btn-shimmer {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%) skewX(-12deg);
}
.auth-btn:hover .auth-btn-shimmer { animation: authShimmer 0.6s ease-out both; }

/* ── Nota al pie de la card ── */
.auth-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0 0;
    padding: 12px 14px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
    line-height: 1.55;
}
.auth-note::before {
    content: '';
    width: 14px; height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Link dentro de auth-note */
.auth-note-link {
    color: rgba(77,163,255,0.8);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.auth-note-link:hover { color: #7eb8ff; }

/* Estado enviado (forgot-password) */
.auth-sent-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 0 4px;
}
.auth-sent-icon {
    width: 64px; height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(26,111,255,0.2), rgba(74,222,128,0.15));
    border: 1px solid rgba(74,222,128,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    margin-bottom: 8px;
    box-shadow: 0 4px 20px rgba(74,222,128,0.15);
}
.auth-sent-icon svg { width: 28px; height: 28px; }
.auth-sent-title {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}
.auth-sent-sub {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.6;
}

/* ── Enlace volver ── */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.3);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.auth-back svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.auth-back:hover {
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
}
.auth-back:hover svg { transform: translateX(-2px); }

/* ── Footer ── */
.auth-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px clamp(16px, 4vw, 40px);
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.04);
    position: relative;
    z-index: 1;
}
.auth-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 30%; right: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77,159,255,0.3), transparent);
}
.auth-footer-copy {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.15);
    letter-spacing: 0.01em;
}
.auth-footer-links {
    display: flex;
    align-items: center;
    gap: 6px;
}
.auth-footer-links a {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.22);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 2px 4px;
}
.auth-footer-links a:hover { color: rgba(255,255,255,0.6); }
.auth-footer-sep {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}
@media (max-width: 500px) {
    .auth-footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ── Show/hide password toggle ── */
.auth-input-wrap-toggle { position: relative; }
.auth-input-wrap-toggle .auth-input { padding-right: 42px; }
.auth-input-toggle {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 4px;
    cursor: pointer;
    color: rgba(255,255,255,0.28);
    transition: color 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    line-height: 0;
}
.auth-input-toggle svg { width: 17px; height: 17px; }
.auth-input-toggle:hover { color: rgba(255,255,255,0.65); }

/* ── Password strength bar ── */
.auth-strength {
    display: flex; align-items: center; gap: 10px;
    margin-top: 7px;
    height: 14px;
}
.auth-strength-track {
    flex: 1; height: 3px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
}
.auth-strength-fill {
    height: 100%; width: 0;
    border-radius: 4px;
    transition: width 0.35s cubic-bezier(0.4,0,0.2,1), background 0.35s ease;
    background: rgba(255,255,255,0.15);
}
.auth-strength-fill.rp-weak   { background: #ef4444; }
.auth-strength-fill.rp-fair   { background: #f59e0b; }
.auth-strength-fill.rp-good   { background: #22c55e; }
.auth-strength-fill.rp-strong { background: linear-gradient(90deg,#22c55e,#4ade80); }
.auth-strength-label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em;
    color: rgba(255,255,255,0.35);
    min-width: 64px; text-align: right;
    transition: color 0.3s ease;
}

/* ── Password match hint ── */
.auth-match-hint {
    font-size: 0.72rem; font-weight: 500;
    margin-top: 5px; height: 16px;
    color: rgba(255,255,255,0.2);
    transition: color 0.2s ease;
}
.auth-match-hint.rp-match-ok  { color: #4ade80; }
.auth-match-hint.rp-match-err { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   LANDING V4 — fondos parallax + fixes carousel/auth
   ═══════════════════════════════════════════════════════════════ */

body.landing-body {
    position: relative;
    isolation: isolate;
    background: #050d1c;
    /* la landing no tiene bottom-tabbar: anular el padding-bottom global en mobile */
    padding-bottom: 0 !important;
}

.lp-scroll-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.lp-scroll-backdrop-layer {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.lp-scroll-backdrop-layer-a {
    background-image:
        linear-gradient(180deg, rgba(3, 12, 26, 0.68) 0%, rgba(3, 12, 26, 0.56) 100%),
        url("/images/landing/scene_09.webp");
    opacity: 0.62;
    transform: translate3d(0, 0, 0) scale(1.12);
}

.lp-scroll-backdrop-layer-b {
    background-image:
        linear-gradient(200deg, rgba(6, 18, 40, 0.78) 0%, rgba(6, 18, 40, 0.62) 100%),
        url("/images/landing/scene_10.webp");
    mix-blend-mode: screen;
    opacity: 0.38;
    transform: translate3d(0, 0, 0) scale(1.16);
}

.lp-scroll-backdrop-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(20, 96, 200, 0.18), transparent 48%),
        radial-gradient(circle at 50% 120%, rgba(3, 12, 26, 0.72), rgba(3, 12, 26, 0.95));
}

body.landing-body > main,
body.landing-body > .lp-footer-full {
    position: relative;
    z-index: 2;
}

body.landing-body > .lp-nav {
    z-index: 220;
}

body.landing-body > .lp-back-top {
    z-index: 260;
}

/* ── Navbar demo link ──────────────────────────────────── */
.lp-nav-demo-link {
    display: none;
    color: rgba(255,255,255,0.68);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    transition: color var(--dur-fast), background var(--dur-fast);
}
.lp-nav-demo-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
@media (min-width: 860px) {
    .lp-nav-demo-link { display: inline-flex; align-items: center; }
}

.lp-btn-nav-primary {
    color: #fff;
    background: var(--primary);
    padding: 8px 20px;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px rgba(20,96,200,0.35);
}
.lp-btn-nav-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 16px rgba(20,96,200,0.5);
    transform: translateY(-1px);
}

/* ── Section backgrounds — dark navy gradients (scoped a landing, mayor especificidad
       que [data-theme="dark"] .lp-*) ─────────────────────────────────────────────── */
body.landing-body .lp-problem    { background: linear-gradient(160deg, #070e20 0%, #0c1630 100%) !important; }
body.landing-body .lp-solution   { background: linear-gradient(160deg, #060c1c 0%, #0a1428 100%) !important; }
body.landing-body .lp-expediente { background: linear-gradient(160deg, #08102a 0%, #0d1c38 100%) !important; }
body.landing-body .lp-trust      { background: linear-gradient(160deg, #060e22 0%, #0b1430 100%) !important; }

.lp-pricing-track {
    padding-top: 0; /* absolutes ignoran padding; se controla con top del card */
}

/* Baja el card para que el badge (que sobresale ~14px arriba) quede dentro del viewport */
.lp-price-card {
    top: 32px;
    padding-top: 38px;
}

/* Badge centrado en el borde superior del card */
.lp-price-badge {
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 4;
    box-shadow: 0 2px 12px rgba(20,96,200,0.55), 0 0 0 3px rgba(255,255,255,0.12);
}

/* Un plan PROXIMAMENTE se anuncia pero no se contrata todavia, y la tarjeta
   tiene que decirlo sin leer la letra pequena: se atenua y su distintivo pasa
   de azul (accion) a gris (informativo). No se oculta ni se recorta nada — la
   regla de "nada desaparece en silencio" tambien aplica aqui: el plan esta a la
   vista, con su precio si lo tiene, solo que su CTA lleva a contacto. */
.lp-price-badge-soon {
    background: #64748b;
    box-shadow: 0 2px 12px rgba(15,23,42,0.45), 0 0 0 3px rgba(255,255,255,0.10);
}

.lp-price-card-soon {
    opacity: 0.86;
}

.lp-price-card-soon .lp-price-value strong {
    color: #cbd5e1;
}

/* Ocupa el hueco del CTA en un plan "proximamente". Deliberadamente NO es un
   boton ni un enlace: no hay lista de espera implementada y un boton invita a
   pulsar algo que no hace nada. */
/* CONTRASTE DEL BLOQUE PILOTO FUNDADORES.
   El bloque vive sobre fondo oscuro pero reutiliza .lp-price-features y una
   fila de precio pensadas para la TARJETA BLANCA del carrusel, asi que su
   texto venia en tono oscuro (#0f1824 el precio, #20314b los bullets): oscuro
   sobre oscuro, ilegible. Se ajusta solo el color dentro de este bloque; la
   tarjeta blanca del carrusel no se toca. */
.lp-piloto-card .lp-piloto-price strong {
    color: #ffffff;
}

.lp-piloto-card .lp-piloto-price span {
    color: rgba(226, 236, 255, 0.82);
}

.lp-piloto-card .lp-price-features li {
    color: rgba(226, 236, 255, 0.88);
}

/* Secciones del editor de planes: agrupan los campos por lo que significan
   (identidad / comercial / capacidad) en vez de dejarlos en una lista plana. */
.plan-form-section {
    padding: 14px 0 2px;
    border-top: 1px solid var(--border, #e5e7eb);
    margin-top: 6px;
}

.plan-form-section-title {
    margin: 0 0 12px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2, #64748b);
}

/* Tarifa por usuario: solo la usan los planes antiguos, asi que va plegada.
   Sigue accesible y editable — no se oculta, se aparta. */
.plan-form-legacy {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: 10px;
    background: rgba(100, 116, 139, .04);
}

.plan-form-legacy > summary {
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-2, #64748b);
    user-select: none;
}

.plan-form-legacy[open] > summary {
    margin-bottom: 10px;
}

/* Filtro del catalogo de planes. Reusa .btn.small.secondary + .active; aqui solo se
   define la fila que los contiene y el contador.
   ⚠️ Ya NO es el mismo patron que .ticket-filter de /plataforma/soporte: aquella pasó a
   ser un control segmentado propio (tira de una fila que se arrastra, estilo
   .segment-control). Este sigue siendo botones sueltos que envuelven, que es lo correcto
   aqui porque son dos y actuan como interruptores acumulables, no como pestañas. */
.plan-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.plan-filters-label {
    font-size: .82rem;
    color: var(--text-2, #64748b);
    margin-right: 2px;
}

.plan-filter.active {
    background: var(--primary, #2563eb);
    color: #fff;
    border-color: var(--primary, #2563eb);
}

.plan-filter-count {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(100, 116, 139, .18);
    font-size: .74rem;
    font-weight: 700;
}

.plan-filter.active .plan-filter-count {
    background: rgba(255, 255, 255, .25);
}

.lp-price-soon-note {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .lp-pricing-viewport {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .lp-price-card {
        top: 28px;
        padding-top: 34px;
    }

    .lp-price-badge {
        font-size: 0.64rem;
        padding: 4px 12px;
    }
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f8fbff;
    caret-color: #f8fbff;
    border: 1px solid rgba(77, 163, 255, 0.45);
    -webkit-box-shadow: 0 0 0 1000px rgba(8, 19, 38, 0.94) inset;
    box-shadow: 0 0 0 1000px rgba(8, 19, 38, 0.94) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* ── Image Sequence Scrubbing ────────────────────────────── */

/* ── Hero single-image background with Ken Burns ──────── */
.lp-hero-bg {
    position: absolute;
    inset: -10%;
    background-image: url('/images/landing/scene_07.webp');
    background-size: cover;
    background-position: center 30%;
    will-change: transform;
    animation: lp-kb-3 28s ease-in-out infinite alternate;
    z-index: 0;
}

/* Cinematic vignette over hero photo */
.lp-hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(4,9,22,0.55) 0%, transparent 20%),
        linear-gradient(0deg,   rgba(4,9,22,0.72) 0%, transparent 22%),
        radial-gradient(ellipse 110% 100% at 50% 50%, transparent 48%, rgba(2,8,22,0.55) 100%),
        linear-gradient(160deg, rgba(5,10,26,0.72) 0%, rgba(10,20,40,0.50) 60%, rgba(4,9,22,0.68) 100%);
}

/* Hero content above photo layers */
.lp-hero > .lp-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

/* Stats strip below CTA buttons */
.lp-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 52px;
    padding: 18px 28px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.lp-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 24px;
}
.lp-hero-stat strong {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
}
.lp-hero-stat span {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(180,210,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.lp-hero-stat-sep {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* Scroll indicator */
.lp-hero > .lp-hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.25);
}

/* Reduced motion: disable KB on hero bg */
@media (prefers-reduced-motion: reduce) {
    .lp-hero-bg { animation: none; }
}

/* Responsive hero stats */
@media (max-width: 560px) {
    .lp-hero-stats {
        padding: 14px 18px;
        gap: 0;
        border-radius: 16px;
    }
    .lp-hero-stat { padding: 6px 14px; }
    .lp-hero-stat strong { font-size: 1.2rem; }
    .lp-hero-stat-sep { height: 24px; }
}

/* ── Stage: tall scroll container so the sticky canvas has room to scrub */
.lp-hero.lp-seq-stage {
    height: 500vh;
    min-height: unset;
    display: block;
    padding: 0;
    /* overflow must NOT be hidden — sticky needs visible ancestor */
    overflow: visible;
    background: transparent;
}

/* Hero's own ::before/::after are on the 500vh container; suppress them */
.lp-hero.lp-seq-stage::before,
.lp-hero.lp-seq-stage::after {
    display: none;
}

/* Sticky viewport: mimics original .lp-hero layout */
.lp-seq-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px clamp(20px, 6vw, 80px) 80px;
    overflow: hidden;
    background: #06101e; /* fallback when no frames */
    will-change: transform;
}

/* Static dark-gradient fallback (shown until first frame loads) */
.lp-seq-sticky::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(20,96,200,0.28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(10,50,120,0.22) 0%, transparent 60%),
        linear-gradient(170deg, #06101e 0%, #0a1a35 55%, #071228 100%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.8s ease;
}

/* Once frames are available, fade out static fallback gradient */
.lp-seq-sticky.seq-has-frames::before { opacity: 0; }

/* The canvas — fills the sticky container */
#lpSeqCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* Cinematic vignette — same language as .lp-bg-ov but more subtle for hero */
.lp-seq-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        /* edge feather to blend into next section */
        linear-gradient(180deg, rgba(3,8,20,0.60) 0%, transparent 14%),
        linear-gradient(0deg,   rgba(3,8,20,0.78) 0%, transparent 18%),
        /* subtle left-center luminosity */
        radial-gradient(ellipse 70% 55% at 18% 50%, rgba(20,96,200,0.12) 0%, transparent 60%),
        /* edge darken */
        radial-gradient(ellipse 110% 100% at 50% 50%, transparent 52%, rgba(2,8,20,0.40) 100%);
}

/* Hero content above canvas */
.lp-seq-sticky > .lp-hero-content,
.lp-seq-sticky > .lp-hero-mockup {
    position: relative;
    z-index: 3;
}

/* Scroll-hint hint text at bottom of sticky frame */
.lp-seq-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.28);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
    animation: lp-bounce 2.4s ease-in-out infinite;
}
.lp-seq-hint svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Transition between seq stage and next section */
.lp-seq-stage + .lp-section-full {
    position: relative;
    z-index: 2;
}

/* Ensure back-to-top stays above everything */
body.landing-body > .lp-back-top {
    z-index: 9999;
}

@media (max-width: 600px) {
    .lp-hero.lp-seq-stage { height: 450vh; }

    /* back-to-top: más pequeño y pegado a la esquina en mobile */
    .lp-back-top {
        width: 38px;
        height: 38px;
        bottom: 20px;
        right: 16px;
    }
    .lp-back-top svg { width: 15px; height: 15px; }

    /* pricing carousel en teléfonos pequeños */
    .lp-pricing-stage { gap: 4px; }
    .lp-pricing-nav { width: 36px; height: 36px; }
    .lp-pricing-nav svg { width: 16px; height: 16px; }
    .lp-price-card {
        width: clamp(240px, 78vw, 300px);
        padding: 22px 16px 18px;
        gap: 12px;
    }
    .lp-price-value strong { font-size: clamp(2rem, 9vw, 2.6rem); }
    .lp-pricing-header { margin-bottom: 36px; }
    .lp-pricing-header .lp-h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* ── Reduced motion: disable scrubbing, revert to static hero ── */
@media (prefers-reduced-motion: reduce) {
    .lp-hero.lp-seq-stage {
        height: auto;
        min-height: 100svh;
        display: flex;
        padding: 120px clamp(20px, 6vw, 80px) 80px;
        overflow: hidden;
    }
    .lp-hero.lp-seq-stage::before,
    .lp-hero.lp-seq-stage::after {
        display: block;
    }
    .lp-seq-sticky {
        position: relative;
        top: auto;
        height: auto;
        min-height: unset;
        padding: 0;
        background: transparent;
    }
    .lp-seq-sticky::before { display: none; }
    #lpSeqCanvas { display: none; }
    .lp-seq-vignette { display: none; }
    .lp-seq-sticky > .lp-hero-content,
    .lp-seq-sticky > .lp-hero-mockup { z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-scroll-backdrop-layer {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PHOTO SECTION BACKGROUNDS — Ken Burns + Glass cards
   Hilo conductor visual: firma → sala → silueta → ciudad
   ═══════════════════════════════════════════════════════════════ */

/* Ken Burns keyframe variants — each subtly different direction */
@keyframes lp-kb-1 {
    0%   { transform: scale(1.00) translate(0%,    0%   ); }
    100% { transform: scale(1.09) translate(-2.5%, -1.5%); }
}
@keyframes lp-kb-2 {
    0%   { transform: scale(1.09) translate(2%,    1%   ); }
    100% { transform: scale(1.00) translate(-1.5%, -0.5%); }
}
@keyframes lp-kb-3 {
    0%   { transform: scale(1.00) translate(-1.5%, 2%   ); }
    100% { transform: scale(1.08) translate(2%,    -1%  ); }
}
@keyframes lp-kb-4 {
    0%   { transform: scale(1.08) translate(1%,    -2%  ); }
    100% { transform: scale(1.00) translate(-2%,   1%   ); }
}

/* Photo wrap: clips the Ken Burns overflow */
.lp-bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* The photo layer itself — oversized so KB zoom doesn't show edges */
.lp-bg-img {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
.lp-bg-img[data-kb="1"] { animation: lp-kb-1 20s ease-in-out infinite alternate; }
.lp-bg-img[data-kb="2"] { animation: lp-kb-2 24s ease-in-out infinite alternate; }
.lp-bg-img[data-kb="3"] { animation: lp-kb-3 18s ease-in-out infinite alternate; }
.lp-bg-img[data-kb="4"] { animation: lp-kb-4 22s ease-in-out infinite alternate; }

/* Cinematic overlay — darkens photo + adds color grade per section */
.lp-bg-ov {
    position: absolute;
    inset: 0;
    /* top/bottom edge feather to blend sections into dark body */
    background:
        linear-gradient(180deg, rgba(4,9,22,0.72) 0%,   transparent 10%),
        linear-gradient(0deg,   rgba(4,9,22,0.72) 0%,   transparent 10%),
        linear-gradient(140deg, rgba(4,9,22,0.82) 0%,   rgba(6,14,34,0.74) 100%);
}
/* Per-section color grading */
.lp-bg-ov-navy   { background:
    linear-gradient(180deg, rgba(3,8,20,0.75)  0%, transparent 10%),
    linear-gradient(0deg,   rgba(3,8,20,0.75)  0%, transparent 10%),
    linear-gradient(140deg, rgba(3,8,24,0.83)  0%, rgba(5,12,32,0.76) 100%); }

.lp-bg-ov-warm   { background:
    linear-gradient(180deg, rgba(5,8,18,0.72)  0%, transparent 10%),
    linear-gradient(0deg,   rgba(5,8,18,0.72)  0%, transparent 10%),
    linear-gradient(140deg, rgba(8,10,22,0.80) 0%, rgba(18,10,5,0.68)  100%); }

.lp-bg-ov-dark   { background:
    linear-gradient(180deg, rgba(2,5,14,0.80)  0%, transparent 10%),
    linear-gradient(0deg,   rgba(2,5,14,0.80)  0%, transparent 10%),
    linear-gradient(140deg, rgba(3,6,18,0.88)  0%, rgba(4,9,22,0.82)  100%); }

.lp-bg-ov-sunset { background:
    linear-gradient(180deg, rgba(4,6,16,0.78)  0%, transparent 10%),
    linear-gradient(0deg,   rgba(4,6,16,0.78)  0%, transparent 10%),
    linear-gradient(140deg, rgba(14,8,4,0.82)  0%, rgba(5,10,22,0.74)  100%); }

/* Sections: ensure position context */
.lp-problem,
.lp-solution,
.lp-expediente,
.lp-trust {
    position: relative;
    overflow: hidden;
}

/* Automation section */
body.landing-body .lp-automation {
    background: linear-gradient(160deg, #050b18 0%, #0a1220 100%);
    overflow: hidden;
    position: relative;
}

/* Pricing section subtle accent */
body.landing-body .lp-pricing {
    background: linear-gradient(160deg, #07101e 0%, #0c1830 100%);
    overflow: hidden;
    position: relative;
}

/* Contact section */
body.landing-body .lp-contact {
    background: linear-gradient(160deg, #060d20 0%, #0b1428 100%);
    overflow: hidden;
    position: relative;
}

/* Ensure inner content always above photo */
.lp-problem    > .lp-section-inner,
.lp-solution   > .lp-section-inner,
.lp-expediente > .lp-section-inner,
.lp-trust      > .lp-section-inner,
.lp-automation > .lp-section-inner,
.lp-pricing    > .lp-section-inner,
.lp-contact    > .lp-section-inner {
    position: relative;
    z-index: 2;
}
.lp-cta-inner   { position: relative; z-index: 2; }
.lp-pricing-orb { z-index: 1; }

/* ── Glass cards — pain / module / trust (solo landing) ──────── */
body.landing-body .lp-pain-card,
body.landing-body .lp-module-card,
body.landing-body .lp-trust-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 28px rgba(0,5,30,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.landing-body .lp-pain-card:hover,
body.landing-body .lp-module-card:hover,
body.landing-body .lp-trust-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(80,160,255,0.20);
    transform: translateY(-4px);
}

/* Text inside glass cards */
body.landing-body .lp-pain-card h3,
body.landing-body .lp-module-card h3,
body.landing-body .lp-trust-card h3,
body.landing-body .lp-trust-card div > h3 { color: #ffffff; }

body.landing-body .lp-pain-card p,
body.landing-body .lp-module-card p,
body.landing-body .lp-trust-card p { color: rgba(200,220,255,0.62); }

/* Icon accent in glass cards */
body.landing-body .lp-pain-icon,
body.landing-body .lp-module-icon,
body.landing-body .lp-trust-icon {
    background: rgba(20,96,200,0.20);
    border: 1px solid rgba(20,96,200,0.30);
}
body.landing-body .lp-pain-icon svg,
body.landing-body .lp-module-icon svg,
body.landing-body .lp-trust-icon svg {
    stroke: rgba(120,190,255,0.95);
}

/* ── Expediente section — flow list on dark bg (solo landing) ── */
body.landing-body .lp-expediente .lp-flow-item h4 { color: #ffffff; }
body.landing-body .lp-expediente .lp-flow-item p  { color: rgba(220,235,255,0.68); }
body.landing-body .lp-expediente .lp-flow-num {
    background: rgba(20,96,200,0.85);
    color: #fff;
    border: 1px solid rgba(20,96,200,0.4);
}
.lp-expediente .lp-flow-connector { background: rgba(255,255,255,0.12); }

/* ── Reduced motion: disable Ken Burns ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lp-bg-img { animation: none !important; }
}

/* ── Section subtle dot-grid accent ───────────────────────── */
.lp-problem::before,
.lp-solution::before,
.lp-expediente::before,
.lp-automation::before,
.lp-trust::before,
.lp-pricing::before,
.lp-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

/* Section inner above dot pattern */
.lp-problem    > .lp-section-inner,
.lp-solution   > .lp-section-inner,
.lp-expediente > .lp-section-inner,
.lp-automation > .lp-section-inner,
.lp-trust      > .lp-section-inner,
.lp-pricing    > .lp-section-inner,
.lp-contact    > .lp-section-inner { position: relative; z-index: 2; }

/* ── Automation / trust text on dark bg (solo landing) ──────── */
body.landing-body .lp-automation .lp-auto-step h4  { color: #fff; }
body.landing-body .lp-automation .lp-auto-step p   { color: rgba(200,220,255,0.62); }
body.landing-body .lp-trust .lp-trust-card h3      { color: #fff; }
body.landing-body .lp-trust .lp-trust-card p       { color: rgba(200,220,255,0.62); }

/* ── Contact section form and text on dark bg (solo landing) ── */
body.landing-body .lp-contact .lp-contact-card          { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
body.landing-body .lp-contact .lp-contact-card-label    { color: rgba(180,210,255,0.55); }
body.landing-body .lp-contact .lp-contact-card-value    { color: #fff; }
body.landing-body .lp-contact .lp-contact-card-icon     { background: rgba(20,96,200,0.18); border-color: rgba(20,96,200,0.3); }
body.landing-body .lp-contact .lp-contact-card-icon svg { stroke: rgba(120,185,255,0.9); }
body.landing-body .lp-contact .lp-contact-form          { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); }
body.landing-body .lp-contact .lp-contact-form-title    { color: #fff; }
body.landing-body .lp-contact .lp-contact-form-sub      { color: rgba(200,220,255,0.6); }

/* ── Pricing section text on dark bg (solo landing) ─────────── */
body.landing-body .lp-pricing .lp-price-card { border-color: rgba(255,255,255,0.09); }

/* ════════════════════════════════════════════════════════════════
   CREATIVE IMAGE TREATMENTS — Variety across sections
   ════════════════════════════════════════════════════════════════ */

/* ── PROBLEMA: proper two-column editorial split ───────────── */
.lp-problem-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(40px, 6vw, 72px);
    align-items: start;
}
.lp-problem-content .lp-problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px;
}
.lp-problem-photo-col { align-self: stretch; }
.lp-problem-photo-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,5,20,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.lp-problem-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    animation: lp-kb-2 26s ease-in-out infinite alternate;
    transform-origin: center center;
    scale: 1.1;
}
.lp-problem-photo-ov {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7,14,32,0.35) 0%, transparent 30%),
        linear-gradient(0deg,   rgba(7,14,32,0.55) 0%, transparent 38%);
}
/* Stat flotante en esquina inferior izquierda de la foto */
.lp-problem-photo-stat {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(6,14,32,0.78);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    gap: 14px;
}
.lp-problem-photo-stat-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: #4da3ff;
    letter-spacing: -0.04em;
    line-height: 1;
    flex-shrink: 0;
}
.lp-problem-photo-stat-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(200,220,255,0.70);
    line-height: 1.4;
}
@media (max-width: 1020px) {
    .lp-problem-layout { grid-template-columns: 1fr; }
    .lp-problem-photo-col { display: none; }
}
@media (max-width: 560px) {
    .lp-problem-content .lp-problem-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-problem-photo-frame img { animation: none; scale: 1; }
}

/* ── MÓDULOS: cinematic panoramic banner — all header copy inside ── */
.lp-solution-photo-header {
    position: relative;
    width: 100%;
    height: clamp(260px, 36vw, 400px);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 48px;
    box-shadow: 0 12px 48px rgba(0,5,20,0.55), 0 0 0 1px rgba(255,255,255,0.05);
}
.lp-solution-photo-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    animation: lp-kb-1 28s ease-in-out infinite alternate;
    transform-origin: center center;
    scale: 1.12;
}
.lp-solution-photo-grad {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,   rgba(6,12,28,0.97) 0%, rgba(6,12,28,0.68) 38%, rgba(6,12,28,0.18) 65%, transparent 100%),
        linear-gradient(180deg, rgba(6,12,28,0.50) 0%, transparent 28%),
        linear-gradient(90deg,  rgba(6,12,28,0.20) 0%, transparent 50%);
}
.lp-solution-photo-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(24px, 4vw, 48px);
    max-width: 720px;
}
@media (prefers-reduced-motion: reduce) {
    .lp-solution-photo-header img { animation: none; scale: 1; }
}

/* ── EXPEDIENTE: photo frame above the widget, with tag ──── */
.lp-exp-right-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lp-exp-photo-frame {
    position: relative;
    width: 100%;
    height: clamp(180px, 22vw, 240px);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    box-shadow: 0 -4px 24px rgba(0,5,20,0.3);
}
.lp-exp-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
    animation: lp-kb-3 24s ease-in-out infinite alternate;
    transform-origin: center center;
    scale: 1.1;
}
.lp-exp-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,   rgba(8,16,42,0.78) 0%, transparent 40%),
        linear-gradient(180deg, rgba(8,16,42,0.45) 0%, transparent 28%),
        linear-gradient(90deg,  rgba(8,16,42,0.12) 0%, transparent 40%);
}
.lp-exp-photo-tag {
    position: absolute;
    bottom: 14px;
    left: 16px;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(180,210,255,0.70);
    background: rgba(8,16,42,0.65);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
}
/* Widget below photo inherits the same border-radius at top */
.lp-exp-right-col .lp-exp-widget {
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 48px rgba(0,5,20,0.55);
}
@media (prefers-reduced-motion: reduce) {
    .lp-exp-photo-frame img { animation: none; scale: 1; }
}

/* ── AUTOMATIZACIÓN: dramatic photo behind the right-column visual ── */
.lp-auto-visual {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.lp-auto-photo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.lp-auto-photo-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    opacity: 0.38;
    animation: lp-kb-4 26s ease-in-out infinite alternate;
    transform-origin: center center;
    scale: 1.08;
}
.lp-auto-photo-ov {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5,11,24,0.82) 0%, rgba(5,11,24,0.55) 50%, rgba(5,11,24,0.78) 100%),
        linear-gradient(90deg,  rgba(5,11,24,0.45) 0%, transparent 60%);
}
.lp-auto-visual .lp-models-widget {
    position: relative;
    z-index: 2;
    margin: 20px;
}
@media (prefers-reduced-motion: reduce) {
    .lp-auto-photo-bg img { animation: none; scale: 1; }
}

/* ── CONFIANZA: editorial split — tall photo left, header+cards right ── */
.lp-trust-split {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: clamp(44px, 6vw, 80px);
    align-items: stretch;
}
.lp-trust-photo-col {
    position: relative;
    display: flex;
    flex-direction: column;
}
.lp-trust-photo-frame {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 480px;
    border-radius: 20px;
    overflow: hidden;
    /* aspect-ratio removed — frame stretches to match right column height */
    box-shadow:
        0 24px 64px rgba(0,5,20,0.65),
        0 0 0 1px rgba(255,255,255,0.07);
}
.lp-trust-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    animation: lp-kb-1 30s ease-in-out infinite alternate;
    transform-origin: center 20%;
    scale: 1.1;
}
.lp-trust-photo-ov {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,   rgba(6,13,32,0.92) 0%, rgba(6,13,32,0.45) 35%, transparent 65%),
        linear-gradient(180deg, rgba(6,13,32,0.45) 0%, transparent 25%);
}
/* Quote overlaid on the bottom of the photo */
.lp-trust-photo-quote {
    position: absolute;
    bottom: 24px;
    left: 20px;
    right: 20px;
    margin: 0;
    padding: 16px 20px;
    background: rgba(6,14,32,0.72);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    font-size: 0.92rem;
    font-style: italic;
    font-weight: 500;
    color: rgba(220,235,255,0.80);
    line-height: 1.55;
}
.lp-trust-header {
    margin-bottom: 32px;
}
.lp-trust-header .lp-lead {
    margin-bottom: 0;
}
.lp-trust-grid.lp-trust-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 0;
}
@media (max-width: 1060px) {
    .lp-trust-split { grid-template-columns: 300px 1fr; }
}
@media (max-width: 860px) {
    .lp-trust-split { grid-template-columns: 1fr; align-items: start; }
    .lp-trust-photo-frame { min-height: unset; aspect-ratio: 16/7; border-radius: 16px; }
    .lp-trust-photo-frame img { object-position: center 30%; }
    .lp-trust-photo-quote { display: none; }
}
@media (max-width: 560px) {
    .lp-trust-grid.lp-trust-grid-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-trust-photo-frame img { animation: none; scale: 1; }
}

/* ── PLANES: very-dark photo background — subtle texture ── */
.lp-bg-ov-pricing {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3,8,20,0.90) 0%, rgba(3,8,20,0.82) 50%, rgba(3,8,20,0.90) 100%);
}

/* ── CONTACTO: layout split-panel — foto+texto izquierda, formulario derecha ── */
.lp-contact-visual {
    position: relative;
    overflow: hidden;
    min-height: clamp(480px, 55vw, 660px);
}
.lp-contact-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    animation: lp-kb-1 28s ease-in-out infinite alternate;
    transform-origin: center center;
    scale: 1.08;
}
.lp-contact-visual-ov {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,  rgba(3,8,22,0.10) 0%,  rgba(3,8,22,0.55) 100%),
        linear-gradient(to bottom, rgba(3,8,22,0.25) 0%,  rgba(3,8,22,0.80) 100%);
}
.lp-contact-visual-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: clamp(36px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.lp-contact-form-col {
    background: rgba(8,16,42,0.82);
    backdrop-filter: blur(14px);
    padding: clamp(36px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lp-contact-form-col .lp-contact-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
    .lp-contact-visual > img { animation: none; scale: 1; }
}

/* ════════════════════════════════════════════════════════════════
   DESIGN POLISH — Typography, dark-theme fixes, responsive
   ════════════════════════════════════════════════════════════════ */

/* ── Consistent section padding (single source of truth) ────── */
body.landing-body .lp-section-full { padding: 0; }
body.landing-body .lp-section {
    padding-top:    clamp(72px, 9vw, 108px);
    padding-bottom: clamp(72px, 9vw, 108px);
    padding-left:   clamp(20px, 5vw, 64px);
    padding-right:  clamp(20px, 5vw, 64px);
}

/* ── Dark-theme text hierarchy — applied to all dark sections ── */
body.landing-body .lp-h2-light  { color: #fff; letter-spacing: -0.035em; }
body.landing-body .lp-lead-light {
    color: rgba(200,220,255,0.65);
    max-width: 54ch;
}
body.landing-body .lp-label-light {
    color: rgba(100,180,255,0.85);
    letter-spacing: 0.14em;
}

/* ── Flow items dark border ──────────────────────────────────── */
body.landing-body .lp-flow-item {
    border-bottom-color: rgba(255,255,255,0.07);
}

/* ── Modules grid: 3 col desktop, 2 col tablet, 1 col mobile ── */
body.landing-body .lp-modules-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 0;
}
@media (max-width: 900px) {
    body.landing-body .lp-modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    body.landing-body .lp-modules-grid { grid-template-columns: 1fr; }
}

/* ── Pain cards in split layout: 2-col inside content col ───── */
.lp-problem-content .lp-pain-card h3 { font-size: 0.92rem; }
.lp-problem-content .lp-pain-card p  { font-size: 0.83rem; }

/* ── Expediente split: vertical align start so photo+widget ─── */
body.landing-body .lp-split { align-items: start; }

/* ── Auto-step icon always visible in dark section ─────────── */
body.landing-body .lp-auto-step-icon {
    background: rgba(20,96,200,0.22);
    border-color: rgba(20,96,200,0.40);
}

/* ── Pricing section inner above photo bg ───────────────────── */
body.landing-body .lp-pricing > .lp-section-inner { z-index: 3; }

/* ── Contact grid: split-panel, cero gap, ambas columnas como un bloque ── */
body.landing-body .lp-contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 72px rgba(0,5,20,0.65), 0 0 0 1px rgba(255,255,255,0.07);
}
@media (max-width: 860px) {
    body.landing-body .lp-contact-grid {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }
    .lp-contact-visual { min-height: clamp(280px, 55vw, 400px); }
    .lp-contact-visual-content { padding: 28px 24px; }
    .lp-contact-form-col { padding: 32px 24px; }
}

/* ── Hero scroll arrow z-index and stroke ───────────────────── */
body.landing-body .lp-hero > .lp-hero-scroll {
    stroke: rgba(255,255,255,0.30);
}
body.landing-body .lp-hero > .lp-hero-scroll svg {
    stroke: rgba(255,255,255,0.30);
}

/* ── Section transition: subtle top border accent (solo landing) ── */
body.landing-body .lp-solution  { border-top: 1px solid rgba(255,255,255,0.04); }
body.landing-body .lp-expediente{ border-top: 1px solid rgba(255,255,255,0.04); }
body.landing-body .lp-automation{ border-top: 1px solid rgba(255,255,255,0.04); }
body.landing-body .lp-trust     { border-top: 1px solid rgba(255,255,255,0.04); }
body.landing-body .lp-pricing   { border-top: 1px solid rgba(255,255,255,0.04); }
body.landing-body .lp-contact   { border-top: 1px solid rgba(255,255,255,0.04); }

/* ── Hero stats pill: max-width so it doesn't stretch on wide ── */
.lp-hero-stats { max-width: 600px; }

/* ── Trust cards in 2-col layout: flex-direction column ─────── */
.lp-trust-grid.lp-trust-grid-2 .lp-trust-card {
    flex-direction: column;
    gap: 12px;
}

/* ── Responsive nav: hide demo link on small screens ─────────── */
@media (max-width: 860px) {
    .lp-nav-demo-link { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   DESIGN POLISH V2 — Typography + layout refinements
   ════════════════════════════════════════════════════════════════ */

/* ── Fix lead-light max-width inside narrow column layouts ──── */
.lp-problem-content .lp-lead-light,
.lp-trust-cards-col .lp-lead-light,
.lp-contact-info    .lp-lead-light,
.lp-auto-grid       .lp-lead-light {
    max-width: none;
}

/* ── Label: left-border accent for visual anchoring ──────────── */
body.landing-body .lp-label-light {
    display: inline-flex;
    align-items: center;
    padding-left: 11px;
    border-left: 2px solid rgba(77,163,255,0.65);
    margin-bottom: 16px;
    line-height: 1;
}

/* ── Exception: centered sections keep label without left bar ── */
.lp-pricing-header .lp-label-light,
.lp-solution-photo-text .lp-label-light {
    border-left: none;
    padding-left: 0;
}

/* ── h2 in modules photo banner: tighter size + line height ──── */
.lp-solution-photo-text .lp-h2 {
    font-size: clamp(1.35rem, 3.2vw, 2.1rem);
    line-height: 1.13;
    letter-spacing: -0.045em;
}

/* ── Stronger bottom gradient so banner text is always legible ── */
.lp-solution-photo-grad {
    background:
        linear-gradient(0deg,
            rgba(6,12,28,0.99) 0%,
            rgba(6,12,28,0.92) 25%,
            rgba(6,12,28,0.55) 52%,
            rgba(6,12,28,0.12) 78%,
            transparent       100%),
        linear-gradient(180deg, rgba(6,12,28,0.65) 0%, transparent 30%),
        linear-gradient(90deg,  rgba(6,12,28,0.30) 0%, transparent 55%);
}

/* ── All section h2 in dark sections: tight leading ──────────── */
body.landing-body .lp-section .lp-h2-light {
    letter-spacing: -0.042em;
    line-height: 1.11;
}

/* ── Automation visual: enforced min-height ───────────────────── */
.lp-auto-visual {
    min-height: clamp(380px, 52vw, 540px);
    display: flex;
    align-items: stretch;
}
.lp-auto-visual .lp-models-widget {
    align-self: center;
}
@media (max-width: 900px) {
    .lp-auto-visual { min-height: clamp(300px, 65vw, 440px); }
}

/* ── Expediente widget: no double top-border at photo junction ── */
.lp-exp-right-col .lp-exp-widget {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* contact photo height defined in CREATIVE IMAGE TREATMENTS block */

/* ── Pricing header: centered text block ─────────────────────── */
.lp-pricing-header {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
}
.lp-pricing-header .lp-lead-light {
    max-width: none;
}

/* ── Hero badge dot: subtle pulse ────────────────────────────── */
@keyframes lp-badge-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 0 rgba(77,163,255,0.6); }
    50%       { opacity: 0.7; transform: scale(0.75); box-shadow: 0 0 0 4px rgba(77,163,255,0); }
}
.lp-hero-badge-dot {
    animation: lp-badge-pulse 2.4s ease-in-out infinite;
}

/* ── Module cards: always left-align text ────────────────────── */
.lp-module-card { text-align: left; }

/* ── Trust cards 2-col: flex column so icon sits on top ─────── */
.lp-trust-grid.lp-trust-grid-2 .lp-trust-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.lp-trust-icon {
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
}

/* ── Auto steps: subtle separator lines ─────────────────────── */
body.landing-body .lp-auto-step {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    gap: 16px;
}
body.landing-body .lp-auto-step:last-child {
    border-bottom: none;
}
body.landing-body .lp-auto-step h4 { line-height: 1.25; }

/* ── Section h2 margins: consistent top spacing after label ─── */
body.landing-body .lp-label-light + .lp-h2,
body.landing-body .lp-label-light + .lp-h2-light {
    margin-top: 4px;
}

/* ===== ADMIN: LOG IMPORTACION MODELOS ===== */
.import-log-panel {
    margin-bottom: 16px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-soft) 84%, white 16%);
}
.import-log-panel details {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--bg);
}
.import-log-panel details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}
.import-log-panel .list.compact {
    margin: 8px 0 0;
    padding-left: 18px;
}
.import-log-panel .list.compact li {
    margin: 4px 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.35;
}

/* ===== PLATAFORMA/COBROS ===== */
.summary-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 760px) {
    .summary-grid.compact {
        grid-template-columns: 1fr;
    }
}

/* ===== SISTEMA ===== */
.bar-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #e8edf5;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    border-radius: inherit;
    min-width: 2px;
    transition: width 240ms ease;
}

/* ===== AYUDA: VIDEOS ===== */
.ayuda-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ayuda-video-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    padding: 12px;
}
.ayuda-video-card h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.ayuda-video-card p {
    margin: 0 0 10px;
    font-size: 0.84rem;
    color: var(--muted);
}
.ayuda-video-card video {
    width: 100%;
    display: block;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #071227;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.ayuda-video-fallback {
    display: none;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 14px;
    background: #eef2f8;
    color: var(--text-2);
    min-height: 152px;
}
.ayuda-video-fallback strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.ayuda-video-fallback p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
}
.ayuda-click-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.ayuda-click-item {
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: rgba(20, 96, 200, 0.04);
    padding: 9px 11px;
    font-size: 0.86rem;
}
@media (max-width: 900px) {
    .ayuda-video-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== PANEL HOME — expedientes, alertas, captación ===== */

/* ── Últimos expedientes: sub-cards encerradas ── */
.exp-scroll-box {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 2px;
}
.exp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    min-width: 0;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.exp-row:hover {
    box-shadow: var(--shadow-card);
    transform: translateX(2px);
}
.exp-row-meta {
    flex: 1;
    min-width: 0;
}
.exp-row-name {
    font-weight: 600;
    font-size: 0.93rem;
    line-height: 1.4;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.exp-row-client {
    font-size: 0.83rem;
    line-height: 1.4;
    color: var(--text-muted, var(--text-2));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 3px;
}
.exp-row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

/* ── Alertas: scroll contenido, fade inferior ── */
.alerta-scroll-wrap {
    position: relative;
    margin-top: 12px;
}
.alerta-list {
    max-height: 208px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    padding-bottom: 2px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.alerta-list::-webkit-scrollbar {
    width: 4px;
}
.alerta-list::-webkit-scrollbar-track {
    background: transparent;
}
.alerta-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.alerta-scroll-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 6px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.alerta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.alerta-item-meta {
    flex: 1;
    min-width: 0;
}
.alerta-item-nombre {
    font-size: 0.93rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alerta-item-cliente {
    font-size: 0.82rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Captación: donut chart ── */
.captacion-chart {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}
.captacion-donut-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}
.captacion-donut {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}
.captacion-donut::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--surface);
}
.captacion-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    pointer-events: none;
}
.captacion-donut-total {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-1);
}
.captacion-donut-sublabel {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-2);
    margin-top: 2px;
}
.captacion-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.captacion-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.captacion-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.captacion-legend-name {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.captacion-legend-count {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-1);
    flex-shrink: 0;
}
.captacion-legend-pct {
    font-size: 0.75rem;
    color: var(--text-2);
    min-width: 38px;
    text-align: right;
    flex-shrink: 0;
}

/* ===== LISTA CON SCROLL INTERNO — viewport-constrained layout ===== */
/* Usado en expedientes/listado y clientes/listado para que el header
   y la barra de filtros queden fijos y solo la tabla haga scroll.    */
/* ⚠️ El suelo es 821px, NO 700px, y tiene que seguir atado al umbral de las fichas.
   Este bloque fija la altura de la pagina a la pantalla y pone overflow:hidden, dejando
   que scrollee UN hijo: .table-wrap. Pero por debajo de 820px la tabla esta oculta y en
   su lugar van .mobile-cards, que no scrollean. Entre 700 y 820 quedaba un contenedor
   cerrado con contenido imposible de alcanzar: en /clientes las fichas se cortaban y no
   habia forma de bajar. Se veia con zoom al 150% sobre 1180px (=787px reales).
   Si se mueve el umbral de las fichas (820), hay que mover este a la vez. */
@media (min-width: 821px) {
    .page--scroll-list {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--topnav-offset) - 48px);
        padding-top: 6px;
        padding-bottom: 0;
        overflow: hidden;
    }
    .page--scroll-list .page-header,
    .page--scroll-list .filter-bar,
    .page--scroll-list .cff-bar,
    .page--scroll-list .alert {
        flex-shrink: 0;
    }
    .page--scroll-list .table-wrap {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    /* Sticky necesita overflow:visible en la tabla. Tambien pasa a border-collapse:separate
       (en vez del collapse global de <table>): collapse + position:sticky es una combinacion
       con bugs de repintado conocidos — los bordes de las filas (no solo los del encabezado)
       se ven bien en reposo y se degradan/desaparecen al scrollear. */
    .page--scroll-list .table-wrap table {
        overflow: visible;
        border-collapse: separate;
        border-spacing: 0;
    }
    /* Cabecera pegajosa — fila 1. Usa border-bottom real (no box-shadow): box-shadow
       sobre position:sticky repinta mal en varios navegadores al scrollear (la linea
       se ve tenue o desaparece), un border si se repinta bien. */
    .page--scroll-list .table-wrap thead tr:first-child th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #eef2fa;
        border-bottom: 1px solid var(--border);
    }
    /* Cabecera pegajosa — fila 2 (offset = alto fila 1 = padding×2 + line-height + su
       propio border-bottom = 14+16+14+1 = 45px) */
    .page--scroll-list .table-wrap thead tr:nth-child(2) th {
        position: sticky;
        top: 45px;
        z-index: 2;
        background: #eef2fa;
        border-bottom: 2px solid var(--border);
    }
    /* Scrollbar discreta */
    .page--scroll-list .table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
    .page--scroll-list .table-wrap::-webkit-scrollbar-track { background: transparent; }
    .page--scroll-list .table-wrap::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }
    /* Estado vacío: centrado en el espacio disponible */
    .page--scroll-list .empty {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===== PLATAFORMA GENERAL (admin) ===== */
.platform-overview-card {
    border: 1px solid var(--border-light);
}

.platform-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.platform-overview-logo {
    width: min(240px, 100%);
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.platform-kpi-bars {
    display: grid;
    gap: 14px;
}

.platform-kpi-row {
    display: grid;
    gap: 7px;
}

.platform-kpi-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.platform-kpi-meta strong {
    font-size: 0.9rem;
}

.platform-collection-gauge {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .platform-kpi-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ===================================================
   CONTABILIDAD — panel general + filtros + scroll
   =================================================== */

/* ── Panel general ── */
.conta-panel-compact {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 28px 20px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}
.conta-panel-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    margin: 0 0 18px;
}
.conta-panel-note {
    font-size: 0.7rem;
    color: var(--muted);
    margin: 14px 0 0;
    text-align: right;
    letter-spacing: 0.02em;
}
/* Los dos bloques (importes y contadores) se apilan cuando dejan de caber juntos. Sin esto
   el de contadores (`flex-shrink: 0`, 404px fijos) se quedaba con el ancho entero y
   estrujaba el de importes hasta 0px — que es como los cuatro totales acababan invisibles
   en movil aunque cada uno supiera envolver por su cuenta. */
.conta-panel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

/* El apilado va en UN corte explicito, no se deja a la envoltura natural del flex: dejandolo
   suelto, a 1280 los contadores se iban solos a una segunda fila y el separador —que sigue
   siendo vertical hasta que la regla de abajo lo tumba— se quedaba como una raya suelta a la
   derecha, con los contadores desalineados debajo de los importes.
   El numero esta medido: los cuatro importes en fila piden ~690px, el separador 57 y los
   contadores 404 fijos = 1151 de contenido; con los 88 que se llevan el padding de la pagina
   y de la tarjeta, hace falta una ventana de ~1240. */
@media (min-width: 1300px) {
    .conta-panel-row {
        flex-wrap: nowrap;
    }
}

@media (max-width: 1299.98px) {
    .conta-panel-row > .conta-kpi-strip,
    .conta-panel-row > .conta-stat-strip {
        flex: 1 1 100%;
    }

    /* El separador vertical no pinta nada entre dos bloques apilados: pasa a horizontal. */
    .conta-panel-sep {
        width: 100%;
        height: 1px;
        margin: 16px 0;
    }

    /* Los contadores se reparten la fila. Sin esto se quedaban a su ancho natural (404px)
       dentro de un bloque que ya ocupa el 100%, y el resto de la fila mostraba el fondo del
       contenedor — que es gris porque es lo que dibuja las lineas entre items via `gap`.
       Quedaba un rectangulo gris enorme a la derecha de "VENCIDOS". */
    .conta-stat-item {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* KPI strip izquierda */
/* 🔴 `overflow: hidden` aqui no recorta con scroll: BORRA. Los cuatro importes son el
   contenido principal de esta pantalla y desaparecian sin dejar rastro segun se estrechaba
   — medido en vivo: 3 de 4 a 1180, 2 de 4 en un iPad (1024), 1 de 4 a 800 y NINGUNO a 640,
   con el bloque a 0px de ancho a 390. Y encima empujaba la pagina 137px fuera a 390.
   El recorte se debia a que los elementos no podian envolver (la regla que lo hacia estaba
   muerta, ver el bloque de 700). Con `flex-wrap: wrap` y un ancho base por elemento pasan a
   2x2 y luego a 1, y ya no hay nada que recortar. El `overflow: hidden` se mantiene porque
   es lo que redondea las esquinas del bloque, no una decision de recorte. */
.conta-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--border);
    flex: 1 1 auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.conta-kpi-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 24px;
    background: var(--surface);
    transition: background var(--dur-fast);
}

/* 4 -> 2x2 a 900, no antes: por debajo de 1300 el bloque de importes ya ocupa el ancho
   entero (se apila sobre el de contadores), asi que los cuatro siguen entrando comodos en
   una fila hasta que cada uno baja de ~195px, que es donde la cifra empieza a quedarse sin
   sitio. Adelantar el 2x2 solo gastaria alto sin ganar nada. */
@media (max-width: 900px) {
    .conta-kpi-item {
        flex: 1 1 calc(50% - 1px);
        min-width: calc(50% - 1px);
    }
}

/* Y a una sola columna en movil: dos importes por fila dejan la cifra sin sitio. */
@media (max-width: 640px) {
    .conta-kpi-item {
        flex: 1 1 100%;
        min-width: 100%;
    }

    /* Los contadores a 2x2: en cuatro columnas a 390 quedan a ~80px y la etiqueta se corta
       a media palabra ("PARCIALI", "PENDIENT"). */
    .conta-stat-item {
        flex: 1 1 calc(50% - 1px);
        min-width: calc(50% - 1px);
    }
}
.conta-kpi-item:hover { background: #f6f9ff; }
.conta-kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 4px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.conta-kpi-label {
    font-size: 0.65rem;
    color: var(--muted);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Separador */
.conta-panel-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 28px;
    flex-shrink: 0;
}

/* Una sola linea gris con los datos separados por puntos, sin etiquetas — el molde de
   "Documentos listos", no el generico de una fila por dato (que para tres datos gasta seis
   lineas y se ve desparramado).
   ⚠️ Vive en el nivel superior y no dentro de un @media a proposito: la usan las fichas de
   DOS pantallas que aparecen a anchos distintos (la contabilidad del expediente a 900 y el
   panel general a 1300). Metida en el bloque de 900, el panel general salia sin separadores
   entre 1300 y 900. Es inofensiva fuera del movil porque .mobile-cards ya esta oculto. */
.conta-card-meta {
    display: flex;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--muted);
    min-width: 0;
}

.conta-card-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.conta-card-meta span + span::before {
    content: "·";
    margin: 0 7px;
}

/* ── Tabla de /contabilidad (panel general) ───────────────────────────────────
   Nueve columnas y ningun reparto de anchos: la tabla se quedaba clavada en 1133px e
   imponia arrastre horizontal desde 1180 hacia abajo. Medido: 8 de 9 columnas visibles a
   1180, 7 a 1024, 5 a 800, 3 a 640 y UNA a 390 — en la pantalla de contabilidad, sin ver
   ni estado ni importes ni acciones. La pagina no marcaba desborde porque .table-wrap
   scrollea, que es precisamente lo que lo hacia invisible en un chequeo automatico.
   Con reparto fijo la suma es el 100% del contenedor y no puede aparecer barra horizontal.
   Anchos medidos sobre el contenido real, no estimados (ver cada comentario). */
@media (min-width: 1300px) {
    .page--conta-list .table-wrap table {
        table-layout: fixed;
        width: 100%;
        min-width: 0;
    }

    /* Las ocho columnas fijas suman 1020px EXACTOS, y ese numero es el que fija el corte de
       abajo: al nombre le tienen que quedar ~200 utiles para no salir a tres lineas, y con
       los ~79px del padding de la pagina eso da los 1300 de ventana. Si se toca cualquiera de
       estos anchos hay que rehacer esa cuenta y mover el corte.
       155: el chip mas largo es SIN_CONFIGURAR, y una pastilla de estado nunca debe partirse
       en dos lineas. */
    .page--conta-list .col-cg-est { width: 155px; }
    /* 140: "TRANSFERENCIA" son ~105px de texto mas el padding de la celda. */
    .page--conta-list .col-cg-met { width: 140px; }
    .page--conta-list .col-cg-ven { width: 110px; }
    /* 130: el importe mas largo de la muestra ("4444,00 EUR") mide 88px y con 120 se partia
       en dos lineas. Los 15px salen de SERVICIO, que envuelve igual de todas formas, para no
       mover el total de 1020 ni el corte que depende de el. */
    .page--conta-list .col-cg-tot { width: 130px; }
    .page--conta-list .col-cg-cob { width: 125px; }
    /* 140 y no 120 como sus vecinas: esta columna puede decir "SIN CONFIGURAR". */
    .page--conta-list .col-cg-pen { width: 140px; }
    /* 85 y no 65 (que es lo que pide el boton de tres puntos): lo que manda aqui es el
       ENCABEZADO. "ACCIONES" mide 81px y con 65 se salia de su celda 16px, y esos 16px
       hacian que la tabla se pudiera arrastrar en horizontal aunque a simple vista se viera
       entera. Un desborde de encabezado no se ve, pero cuenta igual. */
    .page--conta-list .col-cg-acc { width: 85px; }
    /* Envuelve sin problema ("Solicitud de Residencia Temporal" cae a dos lineas). */
    .page--conta-list .col-cg-serv { width: 135px; }

    .page--conta-list .th-entity,
    .page--conta-list .td-entity {
        overflow-wrap: anywhere;
    }
}

/* El corte es 1240, el MISMO que el del panel de arriba: la pantalla entera cambia de forma
   a la vez. Y esta medido: las ocho columnas con ancho fijo suman 1040 y al nombre le tienen
   que quedar ~200 utiles; con los ~79 que se lleva el padding de la pagina, eso son ~1300 de
   ventana. Medido, no estimado: a 1240 el nombre se quedaba en 161px y la fila salia a tres
   lineas ("CARLOS / ALBERTO / DE LA O / BRITO"). */
@media (max-width: 1299.98px) {
    .page--conta-list .table-wrap:has(~ .mobile-cards) {
        display: none;
    }

    /* Sin `overflow: hidden`, por lo mismo que el generico de arriba. */
    .page--conta-list .mobile-cards {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
    }

}

/* Stats de conteo derecha */
/* `flex-wrap: wrap` por el mismo motivo que en .conta-kpi-strip: este bloque tambien lleva
   `overflow: hidden`, asi que sin envoltura lo que no cabe no se corta con scroll, se BORRA.
   Sin esto los cuatro contadores desaparecian por debajo de 640. */
.conta-stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--border);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    align-items: stretch;
}
.conta-stat-item {
    padding: 16px 22px;
    text-align: center;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    transition: background var(--dur-fast);
}
.conta-stat-item:hover { background: #f6f9ff; }
.conta-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.conta-stat-label {
    font-size: 0.65rem;
    color: var(--muted);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── Barra de filtros: card compacta ── */
/* Barra de filtros. Se mantiene como tarjeta con su fila inferior libre: hoy solo hay un
   filtro, pero es donde van a ir los que vengan. Lo que se recorto es el relleno y el
   tamano de los controles — era una caja de ~126px de alto para dos controles. */
.cff-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    box-shadow: var(--shadow-card);
    margin-bottom: 12px;
}

/* Fila 1: búsqueda prominente */
.cff-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.cff-search-wrap {
    flex: 1;
    position: relative;
}
.cff-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--muted);
    stroke-width: 2;
    pointer-events: none;
}
.cff-search-input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.87rem;
    color: var(--text);
    background: var(--surface);
    box-sizing: border-box;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.cff-search-input::placeholder { color: var(--muted); }
.cff-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.cff-search-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Fila 2: filtros como píldoras compactas */
.cff-refine-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cff-refine-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    flex-shrink: 0;
    padding-right: 6px;
    border-right: 1px solid var(--border);
    margin-right: 2px;
}

/* Selects en píldora — altura fija para igualar con range pill */
.cff-pill-select {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 120px;
    height: 32px;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0 26px 0 12px;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--text-2);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 13px;
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.cff-pill-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
}
.cff-pill-select:hover { border-color: #b0becc; }
.cff-pill-select.cff-pill-active {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 13px;
}
.cff-pill-select.cff-pill-active:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.cff-pill-select.cff-pill-active option { background: var(--surface); color: var(--text); }

/* Grupos de rango — misma altura que los selects */
.cff-range-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    box-sizing: border-box;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0 12px;
    background: var(--surface);
    transition: border-color var(--dur-fast);
}
.cff-range-pill:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
}
.cff-range-pill-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.cff-range-pill input {
    border: none;
    background: transparent;
    font-size: 0.79rem;
    color: var(--text);
    padding: 0;
    margin: 0;
    height: 100%;
    outline: none;
    min-width: 0;
    line-height: 1;
    box-sizing: border-box;
}
.cff-range-pill input[type="date"] { width: 112px; }
.cff-range-pill input[type="number"] { width: 54px; }
.cff-range-pill input::placeholder { color: var(--muted); }
.cff-range-sep {
    color: var(--muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    user-select: none;
}
.cff-range-pill.cff-pill-active { border-color: var(--primary); border-width: 2px; background: var(--surface); }
.cff-range-pill.cff-pill-active .cff-range-pill-label { color: var(--primary); }

/* Toggle pegado al extremo derecho */
.cff-toggle {
    font-size: 0.78rem;
    margin-left: auto;
}

/* Varios interruptores juntos a la derecha: solo el primero empuja. Con margin-left:auto en
   todos, el espacio libre se repartia y el primero quedaba flotando en medio de la fila. */
.cff-toggle + .cff-toggle {
    margin-left: 14px;
}

/* Botones del buscador con identidad visual clara */
.cff-btn-apply {
    background: var(--surface);
    color: var(--primary);
    border: 2px solid var(--primary);
    font-weight: 600;
}
.cff-btn-apply:hover {
    background: var(--primary-soft);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}
.cff-btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: var(--surface);
    color: var(--error);
    border: 1.5px solid var(--error);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    font-size: 0.79rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.cff-btn-clear:hover {
    background: #fff0f0;
    border-color: #a02020;
    color: #a02020;
}

/* sr-only para labels accesibles pero invisibles */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Panel de KPIs scrollea con la pagina; la barra de busqueda se pega
   arriba al llegar; el listado scrollea internamente por su cuenta.
   Antes la pagina entera quedaba encerrada a la altura del viewport
   (overflow:hidden) — en pantallas cortas, si el header + KPIs + barra de
   busqueda ya ocupaban mas alto que el disponible, no quedaba nada para la
   tabla y no habia forma de scrollear para llegar a lo que quedaba tapado. */
@media (min-width: 700px) {
    .page--conta-list .cff-bar {
        position: sticky;
        top: var(--topnav-offset);
        z-index: 5;
    }
    .page--conta-list .table-wrap {
        max-height: 60vh;
        overflow-y: auto;
    }
    .page--conta-list .table-wrap table { overflow: visible; border-collapse: separate; border-spacing: 0; }
    .page--conta-list .table-wrap thead tr:first-child th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #eef2fa;
        border-bottom: 1px solid var(--border);
    }
    .page--conta-list .table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
    .page--conta-list .table-wrap::-webkit-scrollbar-track { background: transparent; }
    .page--conta-list .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    /* /clientes y /expedientes llegan hasta abajo porque .page--scroll-list fija la
       altura al viewport y su .empty lleva flex:1. Aqui NO se puede fijar la altura
       (ver la nota de arriba: con el panel de KPIs encerrado, en pantallas cortas no
       quedaba sitio para la tabla ni forma de scrollear). La solucion es min-height en
       vez de height: llena la pantalla cuando sobra sitio, y sigue creciendo y
       scrolleando con normalidad cuando el listado es largo. */
    .page--conta-list {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - var(--topnav-offset) - 48px);
    }
    .page--conta-list > .page-header,
    .page--conta-list > .card,
    .page--conta-list > .cff-bar,
    .page--conta-list > .alert,
    .page--conta-list > .table-wrap {
        flex-shrink: 0;
    }
    .page--conta-list .empty {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        flex: 1 1 auto;
    }
}

/* ── Inline shortcuts (dentro de page-header) ── */
.wf-shortcuts-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.wf-icon-step {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;
    padding: 4px;
    transition: background 0.13s, transform 0.13s cubic-bezier(0.34,1.56,0.64,1);
}
.wf-icon-step:hover { background: var(--surface-alt, #f0f4f8); transform: translateY(-1px); }
.wf-icon-step .wf-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.wf-icon-step .wf-step-icon svg {
    width: 18px;
    height: 18px;
}
.wf-shortcuts-inline .wf-step-connector {
    margin-top: 0;
    padding: 0 1px;
}
.wf-shortcuts-inline .wf-step-connector svg { width: 12px; height: 12px; }

/* ── Workflow shortcuts (home standalone — mantener por si acaso) ── */
.workflow-shortcuts {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 20px;
    flex-wrap: wrap;
    row-gap: 10px;
    width: fit-content;
}

.wf-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--text);
    min-width: 68px;
    max-width: 90px;
    padding: 6px 6px;
    border-radius: 10px;
    transition: background 0.14s, transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
}
.wf-step:hover { background: var(--surface-alt, #f8f9fa); transform: translateY(-2px); }

.wf-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wf-step-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wf-step-num {
    position: absolute;
    top: 2px;
    right: calc(50% - 30px);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--text-muted, #9ca3af);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wf-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-2, #374151);
    text-align: center;
    line-height: 1.25;
}

.wf-step-connector {
    display: flex;
    align-items: center;
    color: var(--border, #e5e7eb);
    padding: 0 2px;
    flex-shrink: 0;
    margin-top: -8px;
}
.wf-step-connector svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

@media (max-width: 600px) {
    .workflow-shortcuts { padding: 12px 10px; width: 100%; }
    .wf-step-connector { display: none; }
    .wf-step { min-width: calc(33.3% - 6px); max-width: none; }
}

/* ── Page shortcut (icon-only action button) ── */
.page-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface, #fff);
    cursor: pointer;
    font: inherit;
    transition: background 0.13s, transform 0.13s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.13s;
}
.page-shortcut:hover { background: var(--surface-alt, #f8f9fa); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.07); }

.page-shortcut-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-shortcut-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.page-shortcut-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-2, #374151);
    text-align: center;
    white-space: nowrap;
}

/* ── Form actions (no sticky) ── */
.form-actions-end {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* ── Branding upload fields ── */
.branding-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.branding-upload-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.branding-upload-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-2, #374151);
}
.branding-upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: var(--surface-alt, #f8f9fa);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.14s, background 0.14s;
    min-height: 80px;
}
.branding-upload-btn:hover { border-color: var(--primary, #2563eb); background: #f0f6ff; }
.branding-upload-btn svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-muted, #9ca3af);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.branding-upload-btn span { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.branding-upload-hint { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }
.branding-upload-input { display: none; }
.branding-upload-indicator {
    font-size: 0.75rem;
    color: var(--primary, #2563eb);
    font-weight: 500;
    min-height: 16px;
    word-break: break-all;
}
@media (max-width: 600px) {
    .branding-upload-grid { grid-template-columns: 1fr; }
}

/* ── Page title row (icon inside header row) ── */
.page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-icon-action {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}
.page-icon-action:hover .page-shortcut-icon { opacity: 0.82; transform: translateY(-2px); }
.page-shortcut-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.13s, transform 0.13s var(--ease-spring);
}
.page-shortcut-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Panel flow (home directional shortcuts) ── */
.panel-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 14px;
    flex-wrap: wrap;
}
.panel-flow-primary {
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-flow-sep {
    width: 1px;
    height: 36px;
    background: var(--border);
    flex-shrink: 0;
}
.panel-flow-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-flow-step {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    transition: transform 0.13s var(--ease-spring), box-shadow 0.13s;
}
.panel-flow-step:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.panel-flow-step.secondary:hover .panel-flow-icon { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.panel-flow-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panel-flow-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.panel-flow-icon.sm {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}
.panel-flow-icon.sm svg { width: 17px; height: 17px; }
.panel-flow-arrow {
    display: flex;
    align-items: center;
    color: var(--muted);
}
.panel-flow-arrow svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PÚBLICO — overrides dark forzados
   La landing siempre es oscura; los componentes usan variables
   de modo claro, así que los sobreescribimos aquí.
   ═══════════════════════════════════════════════════════════════ */

/* Secciones — :root prefix garantiza especificidad (0,3,1) > (0,3,0) del media query */
:root body.landing-body .lp-problem  { background: #050c1c; }
:root body.landing-body .lp-solution { background: #0a1428; }
:root body.landing-body .lp-trust    { background: #050c1c; }

/* Pain cards (problema) */
:root body.landing-body .lp-pain-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    box-shadow: none;
}
:root body.landing-body .lp-pain-card:hover {
    background: rgba(77,142,255,.07);
    border-color: rgba(77,142,255,.2);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
:root body.landing-body .lp-pain-card h3 { color: rgba(255,255,255,.9); }
:root body.landing-body .lp-pain-card p  { color: rgba(255,255,255,.45); }
:root body.landing-body .lp-pain-icon    { background: rgba(255,69,58,.12); }

/* Module cards (solución) */
:root body.landing-body .lp-module-card {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.07);
}
:root body.landing-body .lp-module-card:hover {
    background: rgba(77,142,255,.06);
    border-color: rgba(77,142,255,.2);
}
:root body.landing-body .lp-module-card::before { background: #4d8eff; }
:root body.landing-body .lp-module-card h3 { color: rgba(255,255,255,.9); }
:root body.landing-body .lp-module-card p  { color: rgba(255,255,255,.45); }
:root body.landing-body .lp-module-icon    { background: rgba(77,142,255,.12); }
:root body.landing-body .lp-module-icon svg { stroke: #4d8eff; }

/* Trust cards */
:root body.landing-body .lp-trust-card {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.07);
    box-shadow: none;
}
:root body.landing-body .lp-trust-card:hover {
    background: rgba(77,142,255,.06);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
:root body.landing-body .lp-trust-card h3 { color: rgba(255,255,255,.9); }
:root body.landing-body .lp-trust-card p  { color: rgba(255,255,255,.45); }
:root body.landing-body .lp-trust-icon    { background: rgba(77,142,255,.12); }
:root body.landing-body .lp-trust-icon svg { stroke: #4d8eff; }



/* ── Overflow fix (back-top no genera scroll horizontal) ──── */
html:has(body.landing-body) { overflow-x: clip; }
body.landing-body { overflow-x: clip; }

/* ── Clientes strip / marquee ─────────────────────────────── */
.lp-clients-strip { background: #050c1c; }
.lp-clients-strip-label {
    text-align: center;
    padding-top: 44px;
    margin: 0 0 28px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.lp-marquee-outer {
    overflow: hidden;
    padding-bottom: 44px;
}
.lp-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    animation: lp-marquee 70s linear infinite;
    --mq-end: -50%;
}
@keyframes lp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--mq-end)); }
}
.lp-marquee-outer:hover .lp-marquee-track { animation-play-state: paused; }
.lp-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: clamp(280px, 38vw, 520px);
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    padding: 0 24px;
    transition: color .2s;
}
.lp-marquee-item:hover { color: rgba(255,255,255,.85); }
.lp-marquee-sep {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,.15);
    flex-shrink: 0;
}
.lp-marquee-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .6;
    flex-shrink: 0;
}

/* ── Quiénes somos (nosotros.html) ────────────────────────── */
.lp-about-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lp-about-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
    text-align: center;
    margin: 0 auto;
    padding: clamp(120px,16vw,180px) clamp(20px,5vw,64px) clamp(80px,10vw,120px);
}
.lp-about-manifesto {
    font-size: clamp(2.8rem,7vw,5.5rem);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
    letter-spacing: -.03em;
    margin: 16px 0 28px;
}
.lp-about-manifesto em {
    font-style: normal;
    background: linear-gradient(135deg,#4d8eff 0%,#a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lp-about-hero-sub {
    font-size: clamp(1rem,2vw,1.2rem);
    color: rgba(255,255,255,.6);
    max-width: 560px;
    line-height: 1.7;
    margin: 0 auto;
}

/* Origen */
.lp-about-origin { background: #0a1428; padding: 64px 0; }
.lp-about-origin-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    align-items: start;
}
.lp-about-origin-quote blockquote {
    font-size: clamp(1.1rem,2.2vw,1.5rem);
    font-weight: 600;
    color: rgba(255,255,255,.85);
    line-height: 1.5;
    margin: 0 0 20px;
    padding-left: 24px;
    border-left: 3px solid #4d8eff;
    font-style: italic;
}
.lp-about-origin-quote cite {
    font-size: .85rem;
    color: rgba(255,255,255,.35);
    font-style: normal;
    padding-left: 24px;
}
.lp-about-origin-body h2 { margin: 0 0 20px; }
.lp-about-origin-body p {
    color: rgba(255,255,255,.6);
    line-height: 1.75;
    margin: 0 0 16px;
    font-size: 1rem;
}
.lp-about-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.lp-about-chips span {
    background: rgba(77,142,255,.1);
    border: 1px solid rgba(77,142,255,.25);
    color: #7eb3ff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 5px 14px;
    border-radius: 100px;
}

/* Principios */
.lp-about-principles { background: #050c1c; padding: 64px 0; }
.lp-about-principles-header { margin-bottom: 64px; }
.lp-about-principles-header h2 { margin-top: 12px; }
.lp-about-principles-list { display: flex; flex-direction: column; }
.lp-about-principle {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 32px;
    padding: 44px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    align-items: start;
    transition: background .2s;
}
.lp-about-principle:last-child { border-bottom: 1px solid rgba(255,255,255,.06); }
.lp-about-principle-num {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255,255,255,.07);
    line-height: 1;
    letter-spacing: -.04em;
    transition: color .3s;
}
.lp-about-principle:hover .lp-about-principle-num { color: rgba(77,142,255,.3); }
.lp-about-principle-body h3 {
    font-size: clamp(1.05rem,2vw,1.3rem);
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin: 0 0 12px;
    line-height: 1.3;
}
.lp-about-principle-body p {
    font-size: .95rem;
    color: rgba(255,255,255,.45);
    line-height: 1.75;
    margin: 0;
    max-width: 620px;
}

/* Tecnología */
.lp-about-tech { background: #0a1428; padding: 64px 0; }
.lp-about-tech-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 64px;
    align-items: start;
}
.lp-about-tech-text p { margin-top: 16px; }
.lp-about-tech-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.lp-about-tech-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 22px 20px;
    transition: border-color .25s, background .25s;
}
.lp-about-tech-card:hover {
    background: rgba(77,142,255,.06);
    border-color: rgba(77,142,255,.25);
}
.lp-about-tech-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: rgba(77,142,255,.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4d8eff;
}
.lp-about-tech-icon svg { width: 20px; height: 20px; }
.lp-about-tech-card strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    margin-bottom: 4px;
}
.lp-about-tech-card span {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    line-height: 1.5;
}

/* CTA nosotros */
.lp-about-cta {
    background: #050c1c;
    border-top: 1px solid rgba(255,255,255,.06);
}
.lp-about-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
    padding-top: 160px;
    padding-bottom: 160px;
}
.lp-about-cta-text { max-width: 640px; }
.lp-about-cta-text h2 { margin: 0 0 14px; font-size: clamp(1.6rem,3vw,2.2rem); }
.lp-about-cta-text p { margin: 0; color: rgba(255,255,255,.55); font-size: 1.05rem; }
.lp-about-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Responsive nosotros */
@media (max-width: 960px) {
    .lp-about-origin-grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-about-tech-grid   { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
    .lp-about-manifesto      { font-size: clamp(2.2rem,10vw,3.2rem); }
    .lp-about-principle      { grid-template-columns: 56px 1fr; gap: 20px; padding: 32px 0; }
    .lp-about-principle-num  { font-size: 2rem; }
    .lp-about-tech-cards     { grid-template-columns: 1fr; }
    .lp-about-cta-actions    { flex-direction: column; width: 100%; max-width: 360px; }
    .lp-about-cta-actions .lp-btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── Páginas legales ───────────────────────────────────────── */
.lp-legal-body { background: #0a1428; }
.lp-legal-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 80px clamp(20px,5vw,64px) 120px;
}
.lp-legal-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255,190,0,.07);
    border: 1px solid rgba(255,190,0,.2);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 48px;
    color: rgba(255,255,255,.75);
    font-size: .92rem;
    line-height: 1.6;
}
.lp-legal-notice svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #ffc107;
}
.lp-legal-notice p { margin: 0; }
.lp-legal-notice a { color: #7eb3ff; }
.lp-legal-section { margin-bottom: 40px; }
.lp-legal-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin: 0 0 14px;
}
.lp-legal-section p {
    font-size: .95rem;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
    margin: 0 0 12px;
}
.lp-legal-section a { color: #7eb3ff; }
.lp-legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin-top: 8px;
}
.lp-legal-table th {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.5);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-legal-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: rgba(255,255,255,.55);
    vertical-align: top;
}
.lp-legal-back { margin-top: 64px; }

/* 🔴 Superficie clara heredada dentro de un documento OSCURO ──────────
   Las páginas legales pintan sobre `.lp-legal-body` (#0a1428) y escriben en
   blanco translúcido, pero comparten hoja de estilos con la aplicación, cuyas
   reglas GLOBALES de elemento están escritas para la interfaz clara:

       table { background: var(--surface); }   ← var(--surface) es #ffffff
       th    { background: #eef2fa; }
       tbody tr:hover { background: #f8fbff; }
       code  { background: var(--surface-alt); }

   `.lp-legal-table` reescribía el COLOR de `th` y `td`, pero nunca el
   `background` del propio `<table>`. Resultado: texto blanco sobre fondo
   blanco — la tabla se veía como una caja blanca vacía. Y el encabezado era
   doblemente invisible, porque su `rgba(255,255,255,.05)` es casi transparente
   y dejaba pasar ese mismo blanco.

   El arreglo va aquí, acotado a `.lp-legal-body`, y NO en cada página ni en
   cada componente: la causa es una sola —la superficie clara heredada— y
   cualquier tabla, caja o bloque de código que se añada mañana a un documento
   legal la heredaría igual. Un parche por página habría dejado el siguiente
   documento roto de fábrica.

   ⚠ Al añadir un elemento nuevo a un documento legal, comprobar si la
   aplicación le da fondo claro por una regla global de elemento. Si el
   componente no declara su propio fondo, lo hereda. */
.lp-legal-body table {
    background: transparent;
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
}
.lp-legal-body th {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.62);
    border-bottom: 1px solid rgba(255,255,255,.12);
    /* El `nowrap` global sirve para las tablas de datos de la aplicación, con
       encabezados de una palabra. Aquí son frases ("Categorías de datos que
       puede tratar") y forzarían una tabla enorme de arrastrar. */
    white-space: normal;
    vertical-align: bottom;
}
.lp-legal-body td {
    background: transparent;
    color: rgba(255,255,255,.55);
}
.lp-legal-body tbody tr { background: transparent; }
.lp-legal-body tbody tr:hover { background: rgba(255,255,255,.035); }
.lp-legal-body tr:last-child td { border-bottom: none; }
.lp-legal-body code {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    /* Igual que arriba: `nowrap` es de la interfaz de la aplicación. Un
       identificador largo dentro de un párrafo tiene que poder partirse. */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── Páginas legales: piezas añadidas al cerrar el frente legal ──────
   Los documentos definitivos son mucho más largos que los provisionales que
   había antes (listas, definiciones, subapartados, tablas de proveedores),
   así que hacían falta estilos para eso. El bloque de arriba se conserva
   tal cual: esto solo añade. */

/* Sello de versión bajo el título del hero. Sustituye al texto suelto
   "Versión provisional" que llevaba cada documento escrito a mano. */
.lp-legal-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 5px 14px;
    margin-top: 14px;
}
.lp-legal-stamp b { color: rgba(255,255,255,.8); font-weight: 600; }

/* Ficha de identidad del prestador. Se repite en varios documentos y tiene
   que leerse igual en todos: por eso es una pieza, no markup suelto. */
.lp-legal-identity {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0 0 28px;
}
.lp-legal-identity dl {
    display: grid;
    grid-template-columns: minmax(150px, auto) 1fr;
    gap: 8px 20px;
    margin: 0;
    font-size: .92rem;
}
/* Las etiquetas de la ficha (TITULAR, NIF, DOMICILIO…) quedaban en 4,49:1
   sobre el fondo del recuadro — justo por debajo del 4,5:1 que pide AA para
   texto pequeño, y son mayúsculas de 12px, el peor caso de legibilidad.
   Medido, no estimado: con .52 suben a ~5,3:1. */
.lp-legal-identity dt {
    color: rgba(255,255,255,.52);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding-top: .18em;
}
.lp-legal-identity dd { margin: 0; color: rgba(255,255,255,.78); }
.lp-legal-identity a { color: #7eb3ff; }

/* Variante corta: la usan los documentos que NO repiten NIF ni domicilio y
   remiten al Aviso Legal para la identificación completa. */
.lp-legal-identity--corta p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    line-height: 1.7;
}
.lp-legal-identity--corta strong { color: rgba(255,255,255,.9); }
.lp-legal-identity-mas {
    margin-top: 10px !important;
    font-size: .85rem !important;
    color: rgba(255,255,255,.55) !important;
}

.lp-legal-section ul,
.lp-legal-section ol {
    margin: 0 0 14px;
    padding-left: 1.25rem;
    font-size: .95rem;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
}
.lp-legal-section li { margin-bottom: 7px; }
.lp-legal-section li::marker { color: rgba(255,255,255,.3); }
.lp-legal-section strong { color: rgba(255,255,255,.8); }
.lp-legal-section h3 {
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255,255,255,.72);
    margin: 24px 0 10px;
}
.lp-legal-section code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .86em;
    background: rgba(255,255,255,.07);
    border-radius: 4px;
    padding: .1em .36em;
    color: rgba(255,255,255,.72);
}

/* Aviso destacado dentro del cuerpo (no el de "provisional", que se retiró):
   sirve para lo que el lector NO debe pasar por alto — que las copias
   conservan restos, que la firma es SES y no cualificada, etc. */
.lp-legal-callout {
    border-left: 2px solid #7eb3ff;
    background: rgba(126,179,255,.06);
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: .92rem;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
}
.lp-legal-callout p { margin: 0; }
.lp-legal-callout p + p { margin-top: 8px; }

/* La tabla no puede sacar barra horizontal a la página: scrollea ella,
   dentro de su envoltorio. Es la regla general de tablas del proyecto. */
.lp-legal-tablewrap {
    overflow-x: auto;
    margin: 8px 0 14px;
    -webkit-overflow-scrolling: touch;
}
.lp-legal-tablewrap .lp-legal-table { min-width: 560px; }

/* Índice de apartados. Los documentos definitivos tienen entre 12 y 20
   apartados: sin índice hay que rodar la página entera para saber si algo
   está cubierto. */
.lp-legal-toc {
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 18px 0;
    margin: 0 0 44px;
    columns: 2;
    column-gap: 30px;
}
.lp-legal-toc a {
    display: block;
    font-size: .88rem;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    margin-bottom: 5px;
    break-inside: avoid;
}
.lp-legal-toc a:hover { color: #7eb3ff; }
.lp-legal-section { scroll-margin-top: 24px; }

/* Enlaces al resto de documentos, al pie. Antes ningún documento remitía a
   los otros dos: eran tres textos sueltos, no un cuerpo legal. */
.lp-legal-related {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.lp-legal-related h2 {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin: 0 0 14px;
    font-weight: 600;
}
.lp-legal-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lp-legal-related-links a {
    font-size: .86rem;
    color: rgba(255,255,255,.62);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 6px 14px;
}
.lp-legal-related-links a:hover {
    color: #fff;
    border-color: rgba(126,179,255,.5);
}

@media (max-width: 700px) {
    .lp-legal-toc { columns: 1; }
    .lp-legal-identity dl { grid-template-columns: 1fr; gap: 2px 0; }
    .lp-legal-identity dt { margin-top: 10px; }
    .lp-legal-identity dt:first-child { margin-top: 0; }
}

/* ── Hero pequeño (páginas legales, contacto, etc.) ───────── */
.lp-page-hero {
    position: relative;
    min-height: 38vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.lp-page-hero-sm { min-height: 28vh; }
.lp-page-hero-content {
    position: relative;
    z-index: 2;
    padding: 60px clamp(20px,5vw,64px) 52px;
    max-width: 900px;
}

/* ── Footer responsive ────────────────────────────────────── */
@media (max-width: 900px) {
    .lp-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }
    .lp-footer-col-brand { grid-column: 1 / -1; }
    .lp-footer-contact-list li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}
@media (max-width: 600px) {
    .lp-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .lp-footer-col-brand { grid-column: auto; }
}
@media (max-width: 600px) {
    .lp-marquee-item        { min-width: clamp(220px,70vw,340px); font-size: 1rem; padding: 0 16px; }
    .lp-clients-strip-label { padding-top: 36px; margin-bottom: 20px; }
    .lp-marquee-outer       { padding-bottom: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH LOGIN v2 — split layout + mockup dashboard
   ═══════════════════════════════════════════════════════════════ */

@keyframes authGlowFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(28px,-18px) scale(1.06); }
    66%       { transform: translate(-16px,14px) scale(0.96); }
}
@keyframes authCardIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes authShimmer {
    0%   { transform: translateX(-100%) skewX(-12deg); }
    100% { transform: translateX(250%) skewX(-12deg); }
}
@keyframes authMockupIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-bg-glow-1 { animation: authGlowFloat 12s ease-in-out infinite; }
.auth-bg-glow-2 { animation: authGlowFloat 17s ease-in-out infinite reverse; }

/* ── Layout ── */
body.auth-body .auth-main:has(.auth-split) { padding: 0; align-items: stretch; }
.auth-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ── Panel izquierdo: flujo de caso ── */
.auth-panel {
    background: linear-gradient(150deg, #040d1c 0%, #0a1d40 50%, #060f25 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 48px;
    position: relative;
    overflow: hidden;
}
.auth-panel-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.auth-panel-deco-1 {
    width: 900px; height: 800px;
    top: -320px; left: -280px;
    background: radial-gradient(ellipse, rgba(20,96,200,0.18) 0%, transparent 55%);
    animation: authGlowFloat 15s ease-in-out infinite;
}
.auth-panel-deco-2 {
    width: 700px; height: 600px;
    bottom: -250px; right: -180px;
    background: radial-gradient(ellipse, rgba(100,40,220,0.13) 0%, transparent 55%);
    animation: authGlowFloat 20s ease-in-out infinite reverse;
}

/* Partículas */
.auth-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.auth-particles i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(77,159,255,0.3);
    animation: authParticleRise linear infinite;
}
.auth-particles i:nth-child(1) { width:3px;height:3px;left:10%;animation-duration:16s;animation-delay:0s;   bottom:-10px; }
.auth-particles i:nth-child(2) { width:2px;height:2px;left:25%;animation-duration:20s;animation-delay:3s;   bottom:-10px;background:rgba(167,139,250,0.4); }
.auth-particles i:nth-child(3) { width:3px;height:3px;left:45%;animation-duration:13s;animation-delay:6s;   bottom:-10px; }
.auth-particles i:nth-child(4) { width:2px;height:2px;left:60%;animation-duration:18s;animation-delay:1s;   bottom:-10px;background:rgba(167,139,250,0.3); }
.auth-particles i:nth-child(5) { width:4px;height:4px;left:75%;animation-duration:22s;animation-delay:4s;   bottom:-10px; }
.auth-particles i:nth-child(6) { width:2px;height:2px;left:85%;animation-duration:14s;animation-delay:9s;   bottom:-10px;background:rgba(167,139,250,0.5); }
.auth-particles i:nth-child(7) { width:3px;height:3px;left:32%;animation-duration:19s;animation-delay:11s;  bottom:-10px; }
.auth-particles i:nth-child(8) { width:2px;height:2px;left:55%;animation-duration:15s;animation-delay:2s;   bottom:-10px;background:rgba(77,159,255,0.2); }
@keyframes authParticleRise {
    0%   { transform:translateY(0) scale(1);   opacity:0; }
    8%   { opacity:1; }
    92%  { opacity:0.5; }
    100% { transform:translateY(-110vh) scale(0.3); opacity:0; }
}

/* ── Keyframes flujo ── */
@keyframes authFlowCardIn {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes authFlowFloat {
    0%,100% { transform:translateY(0px); }
    50%     { transform:translateY(-5px); }
}
@keyframes authLineGrow {
    from { transform:scaleY(0); opacity:0; }
    to   { transform:scaleY(1); opacity:1; }
}
@keyframes authLineProgress {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}
@keyframes authDotIn {
    from { opacity:0; transform:scale(0); }
    to   { opacity:1; transform:scale(1); }
}
@keyframes authPulseBadge {
    0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(77,159,255,0.4); }
    50%     { opacity:0.85; box-shadow: 0 0 0 5px rgba(77,159,255,0); }
}
@keyframes authActiveGlow {
    0%,100% { opacity:0.5; transform:scale(1); }
    50%     { opacity:1;   transform:scale(1.04); }
}
@keyframes authLiveDot {
    0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
    50%     { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}
@keyframes authHeaderIn {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes authFooterIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Contenedor flujo ── */
.auth-flow-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* Cabecera bufete */
.auth-flow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    opacity: 0;
    animation: authHeaderIn 0.5s ease-out 0.1s forwards;
}
.auth-flow-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: authLiveDot 2s ease-in-out infinite;
}
.auth-flow-bufete {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    flex: 1;
    letter-spacing: -0.01em;
}
.auth-flow-live-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 5px;
    padding: 2px 7px;
}

/* ── Tarjetas ── */
.auth-flow-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    opacity: 0;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

/* Estado: completada */
.auth-flow-state-done {
    opacity: 0;
    animation: authFlowCardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.3s forwards,
               authFlowFloat 4.2s ease-in-out 1.5s infinite;
    border-color: rgba(74,222,128,0.15);
}
.auth-flow-state-done .auth-flow-card-icon { opacity: 0.7; }
.auth-flow-state-done .auth-flow-card-body strong { color: rgba(255,255,255,0.6); }

/* Estado: activa */
.auth-flow-state-active {
    opacity: 0;
    animation: authFlowCardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.85s forwards,
               authFlowFloat 3.8s ease-in-out 2s infinite;
    border-color: rgba(77,159,255,0.35);
    background: rgba(77,159,255,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(77,159,255,0.2);
}

/* Glow detrás de card activa */
.auth-flow-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(77,159,255,0.12) 0%, transparent 70%);
    pointer-events: none;
    animation: authActiveGlow 3s ease-in-out infinite;
}

/* Estado: pendiente */
.auth-flow-state-pending {
    opacity: 0;
    animation: authFlowCardIn 0.55s cubic-bezier(0.22,1,0.36,1) 1.4s forwards,
               authFlowFloat 4.6s ease-in-out 2.6s infinite;
    border-color: rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}
.auth-flow-state-pending .auth-flow-card-icon { opacity: 0.4; }
.auth-flow-state-pending .auth-flow-card-body strong { color: rgba(255,255,255,0.35); }
.auth-flow-state-pending .auth-flow-card-detail { color: rgba(255,255,255,0.2) !important; }

/* Icono */
.auth-flow-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.auth-flow-card-icon svg { width: 17px; height: 17px; }
.auth-flow-icon-client  { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.auth-flow-icon-case    { background: rgba(245,158,11,0.15);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.auth-flow-icon-pending { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.08); }

/* Cuerpo texto */
.auth-flow-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.auth-flow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.auth-flow-card-body strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auth-flow-card-detail {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Timestamps */
.auth-flow-time {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.25);
    white-space: nowrap;
    flex-shrink: 0;
}
.auth-flow-time-now  { color: #60a5fa; font-weight: 600; }
.auth-flow-time-pending { color: rgba(255,255,255,0.18); }

/* Check completado */
.auth-flow-card-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #4ade80;
}
.auth-flow-card-check svg { width: 11px; height: 11px; }

/* Badges */
.auth-flow-badge {
    font-size: 0.67rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 4px;
}
.auth-flow-badge svg { width: 11px; height: 11px; }
.auth-flow-badge-active {
    background: rgba(77,159,255,0.18);
    color: #93c5fd;
    border: 1px solid rgba(77,159,255,0.3);
    animation: authPulseBadge 2s ease-in-out infinite;
}
.auth-flow-badge-pending {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px 7px;
}

/* ── Conectores ── */
.auth-flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0 3px;
    gap: 3px;
}
.auth-flow-line {
    width: 2px;
    border-radius: 2px;
    transform-origin: top center;
    height: 24px;
}
.auth-flow-line-done {
    background: linear-gradient(180deg, #4ade80, rgba(77,159,255,0.6));
    animation: authLineGrow 0.35s ease-out 0.8s both;
}
.auth-flow-line-progress {
    background: linear-gradient(180deg, rgba(77,159,255,0.8) 0%, rgba(77,159,255,0.1) 100%);
    background-size: 100% 200%;
    animation: authLineGrow 0.35s ease-out 1.35s both,
               authLineProgress 2s linear 2s infinite;
}
.auth-flow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    opacity: 0;
}
.auth-flow-dot-done {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,0.7);
    animation: authDotIn 0.3s ease-out 1.1s forwards;
}
.auth-flow-dot-pending {
    background: rgba(77,159,255,0.5);
    box-shadow: 0 0 6px rgba(77,159,255,0.4);
    animation: authDotIn 0.3s ease-out 1.65s forwards;
}

/* ── Pie estadísticas ── */
.auth-flow-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    animation: authFooterIn 0.5s ease-out 2s forwards;
}
.auth-flow-footer span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}
.auth-flow-footer svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .auth-flow-wrap { max-width: 100%; }
    .auth-panel { padding: 40px 32px; }
}
@media (max-width: 760px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-panel  { display: none; }
    .auth-brand-mobile { display: inline-flex; }
    body.auth-body .auth-main { padding: 40px 20px 20px; align-items: center; }
    .auth-form-panel { padding: 0; width: 100%; background: transparent; }
}

/* ── Panel derecho ── */
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: linear-gradient(160deg, #08101e 0%, #0b1530 100%);
    animation: authCardIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}

/* Borde superior gradiente animado */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #1a6fff 0%, #7c3aed 50%, #1a6fff 100%);
    background-size: 200% 100%;
    border-radius: 18px 18px 0 0;
    animation: authShimmerBorder 4s linear infinite;
}
@keyframes authShimmerBorder {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Avatar icono cabecera card */
.auth-card-avatar {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(26,111,255,0.2), rgba(124,58,237,0.15));
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: rgba(77,163,255,0.8);
}
.auth-card-avatar svg { width: 22px; height: 22px; }

/* Botón con shimmer */
.auth-btn { position: relative; overflow: hidden; }
.auth-btn-shimmer {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%) skewX(-12deg);
}
.auth-btn:hover .auth-btn-shimmer {
    animation: authShimmer 0.65s ease-out both;
}

/* Inline link olvidaste */
.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.auth-label-link {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(77,163,255,0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}
.auth-label-link:hover { color: #4da3ff; }

/* Toggle contraseña */
.auth-input-pass { padding-right: 44px; }
.auth-pass-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: rgba(255,255,255,0.28);
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
.auth-pass-toggle svg { width: 16px; height: 16px; }
.auth-pass-toggle:hover { color: rgba(255,255,255,0.6); }

/* Logo móvil */
.auth-brand-mobile { display: none; }

/* ─────────────────────────────────────────────
   PLATFORM DETAIL — empresa_editar y similares
   ───────────────────────────────────────────── */
.page--platform-detail { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.page--platform-detail .page-header { margin-bottom: 20px; }
.page-header-subtitle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Tab peligroso */
.tab-btn--danger { color: #dc2626; }
.tab-btn--danger:hover { background: #fff1f1; }
.tab-btn--danger.active { color: #dc2626; border-bottom-color: #dc2626; }

/* Sección header con acción a la derecha */
.form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.form-section-header .form-section-title { margin-bottom: 0; }

/* Estado de empresa */
.plat-state-grid { display: flex; flex-direction: column; gap: 10px; }
.plat-state-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-alt, #f0f4fa);
    border-radius: 10px;
    flex-wrap: wrap;
}
.plat-state-info { display: flex; align-items: center; gap: 10px; }
.plat-state-label { font-size: .8rem; font-weight: 500; color: var(--text-2); }
.plat-state-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Lista de usuarios / propietarios */
.plat-user-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.plat-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface-alt, #f0f4fa);
    border-radius: 10px;
}
.plat-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary-soft, #eff6ff);
    color: var(--primary, #1460C8);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
    flex-shrink: 0;
}
.plat-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plat-user-name { font-size: .85rem; font-weight: 600; color: var(--text); }
.plat-user-email { font-size: .75rem; color: #9ca3af; }

/* Tarjeta de base de datos */
.plat-db-card {
    background: var(--surface-alt, #f0f4fa);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}
.plat-db-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.plat-db-label { font-size: .8rem; font-weight: 500; color: var(--text-2); }
.plat-db-value { font-size: .8rem; font-family: ui-monospace, monospace; color: var(--text); }

/* Expediente detail workspace */
/* Banda de identidad de la ficha (NO es una page-header: esto es una vista de detalle, y
   el patron correcto es identidad + datos clave + acciones en una sola banda compacta).
   ⚠️ Los minimos de 220 y 420px no se pueden cumplir por debajo de ~1000px, y ahi la
   rejilla reventaba. Por eso baja por pasos en vez de aguantar hasta romperse. */
.exp-case-hero {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(420px, 2fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 16px;
}

.exp-case-main h1 {
    margin: 2px 0 2px;
    font-size: 1.55rem;
    line-height: 1.15;
}

.exp-case-main p {
    margin: 0;
    color: var(--text-2);
    font-weight: 600;
}

.exp-case-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.exp-case-facts div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.exp-case-facts span {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
}

.exp-case-facts strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}

/* nowrap: `.actions` trae flex-wrap: wrap, y al estrechar la columna los dos botones se
   partian en dos filas y se estiraban a lo ancho — mas altos y mas feos cuanto menos sitio
   habia. Que no se partan; la columna `auto` de la rejilla ya se queda con lo que necesiten. */
.exp-case-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Los datos que no caben se cortan con puntos suspensivos en vez de estirar la caja o
   partirse en dos lineas. El texto completo se ve al pasar el raton (atributo title en la
   plantilla). */
.exp-case-facts strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* TRES pasos y ninguno mas. Este bloque llego a tener CINCO cortes (1200, 1180, 820, 760,
   560): 1200/1180 y 820/760 hacian casi lo mismo con 20 y 60px de diferencia, y los de
   1180 y 760 estaban mas abajo en el archivo, asi que ganaban por posicion y apilaban el
   hero de golpe justo donde queriamos que bajara por pasos.
   Si hace falta otro comportamiento se ajusta uno de estos tres; no se anade un cuarto. */

/* Paso 1 — ya no caben las tres columnas. Identidad y acciones COMPARTEN la primera fila
   (colocacion explicita: si se deja al reparto automatico, los botones se llevan una fila
   entera para ellos solos y la ficha se hace MAS ALTA al estrechar, que es justo lo
   contrario de lo que debe pasar). Los datos pasan debajo, a lo ancho. */
@media (max-width: 1200px) {
    .exp-case-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .exp-case-main {
        grid-column: 1;
        grid-row: 1;
    }

    .exp-case-actions {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .exp-case-facts {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Paso 2 — los cuatro datos en dos columnas. */
@media (max-width: 820px) {
    .exp-case-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Paso 3 — movil: todo apilado y las acciones a la izquierda, donde cae el pulgar.
   El corte es 640 (el de la tabla de CLAUDE.md, el mismo al que los botones de cabecera
   bajan a su propia fila), no un numero suelto.

   ⚠️ HAY QUE BORRAR LA COLOCACION DEL PASO 1, no basta con dejar una sola columna.
   El paso de 1200 clava `.exp-case-actions` en la columna 2; cambiar
   `grid-template-columns` a una sola columna NO lo deshace — la rejilla se inventa una
   segunda columna implicita para alojarlo. Sintoma exacto que dejo esto roto: a 390px el
   hero seguia calculando DOS pistas (76px + 198px), el titulo salia partido con los
   botones al lado y las cuatro fichas de datos quedaban en una columna de 76px con todo
   truncado ("PAUL...", "Z129..."). Y la consulta de medios SI coincidia — lo que perdia
   era la colocacion, no la regla. Si se toca el paso 1, revisar este reset. */
@media (max-width: 640px) {
    .exp-case-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .exp-case-main {
        grid-column: 1;
        grid-row: 1;
    }

    .exp-case-actions {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        width: 100%;
    }

    .exp-case-facts {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: minmax(0, 1fr);
    }

    .exp-case-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Franja de seguimiento: gemela de la economica y encima de ella. Tipo, estado del tramite y
   responsable; cada accion va DENTRO de su bloque, pegada al dato (al otro extremo de la fila
   quedaria un hueco enorme). En movil los bloques se apilan como la economica. */
.exp-workflow-strip {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Con clasificacion: tres bloques iguales. Por debajo de 1100 el tipo y el estado comparten
   fila y el responsable baja a la siguiente, en vez de estrujar los tres nombres. */
.exp-workflow-strip--completa {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .exp-workflow-strip--completa {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.exp-workflow-item {
    min-width: 0;
    flex: 0 1 340px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
    padding: 8px 10px;
}

.exp-workflow-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.exp-workflow-sub {
    color: var(--muted);
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exp-workflow-label {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
}

.exp-workflow-value {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.exp-workflow-value strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    line-height: 1.25;
}

.exp-workflow-value .chip {
    flex-shrink: 0;
}

.exp-workflow-empty {
    color: var(--muted);
    font-weight: 600;
}

.exp-workflow-action {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .exp-workflow-strip,
    .exp-workflow-strip--completa {
        display: flex;
        flex-direction: column;
    }

    .exp-workflow-item {
        flex: 1 1 auto;
    }
}

/* Pestanas Documentos / Actividad de la ficha: a su tamano, no de lado a lado. */
.exp-tabs {
    max-width: 360px;
    margin: 0;
}

.exp-actividad-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.exp-actuacion-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
}

.exp-actuacion-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.exp-actuacion-grid textarea {
    min-height: 76px;
    resize: vertical;
}

/* Un grupo de acciones dentro de la ficha: fuera de la regla global de ≤1100 que lo estira. */
.exp-actuacion-actions {
    width: auto;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.exp-actuacion-actions .btn {
    flex: 0 0 auto;
}

.exp-actuacion-nota {
    font-size: .8rem;
}

.exp-actividad-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exp-actividad-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    overflow-wrap: anywhere;
}

.exp-actividad-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.exp-actividad-fecha {
    font-weight: 700;
    font-size: .85rem;
}

.exp-actividad-detalle,
.exp-actividad-texto {
    margin: 0;
    font-size: .9rem;
}

.exp-actividad-texto {
    white-space: pre-wrap;
}

.exp-actividad-pie {
    font-size: .76rem;
}

.exp-actividad-estado {
    margin: 0;
}

.exp-actividad-error {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--error);
}

.exp-actividad-mas {
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    .exp-actuacion-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .exp-actuacion-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .exp-actuacion-actions .btn {
        justify-content: center;
    }
}

.exp-clasificacion-dialog {
    width: min(520px, 100%);
    max-height: min(88vh, 640px);
    overflow: auto;
}

.exp-clasificacion-aviso {
    margin: 0;
    font-size: .85rem;
}

.exp-responsable-dialog {
    width: min(520px, 100%);
    max-height: min(88vh, 720px);
    overflow: auto;
}

.exp-responsable-historial h4 {
    margin: 4px 0 6px;
    font-size: .85rem;
}

.exp-responsable-historial-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.exp-responsable-historial-list li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.exp-responsable-historial-list .muted {
    font-size: .76rem;
}

.exp-finance-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto repeat(4, minmax(120px, 1fr)) auto;
    gap: 10px;
    align-items: stretch;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.exp-finance-strip--needs-config {
    border-top-color: rgba(255, 122, 26, .38);
}

.exp-finance-status,
.exp-finance-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
    padding: 8px 10px;
}

.exp-finance-status {
    align-items: flex-start;
    min-width: 132px;
}

.exp-finance-chip-attention {
    color: #b45309;
    background: #fff7ed;
    border-color: #fdba74;
    box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .12);
}

.exp-finance-item span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
}

.exp-finance-item strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    line-height: 1.25;
}

.exp-finance-action {
    align-self: stretch;
    white-space: nowrap;
}

.exp-finance-action--attention {
    color: var(--primary) !important;
    background: #fff;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 3px 10px rgba(20, 96, 200, .10);
    font-weight: 700;
}

.exp-finance-action--attention:hover,
.exp-finance-action--attention:focus-visible {
    color: var(--primary) !important;
    background: var(--primary-soft);
    border-color: var(--primary) !important;
}

.exp-finance-action--attention:active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary) !important;
}

.exp-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.exp-primary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.exp-section-head {
    align-items: flex-start;
    gap: 14px;
}

.exp-section-head .section-title,
.exp-section-head h3 {
    margin-bottom: 2px;
}

.exp-section-head p {
    margin: 0;
}

/* Franja de "Sincronizar/Cancelar" por sobre — vive DENTRO de .exp-section-head (que ya es
   flex-wrap), con flex-basis:100% para que caiga siempre en su propia fila, debajo del
   titulo y los botones de arriba, en vez de otra fila mas de la lista de documentos. */
.exp-sobre-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 100%;
    padding: 10px 14px;
    margin-top: 6px;
    background: var(--surface-alt, #f8f9fa);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    font-size: 0.85rem;
}
.exp-sobre-strip-label {
    color: var(--text-muted, #6b7280);
    flex: 1 1 auto;
    min-width: 0;
}
.exp-sobre-strip .actions {
    margin-left: auto;
}

/* Reparto fijo de anchos, igual que en /clientes y /expedientes: la suma es siempre el
   100% del contenedor, asi que la tabla NO puede sacar barra horizontal caiga lo que caiga
   dentro. Antes la ultima columna pedia 400px fijos y los botones 146px cada uno, y por
   debajo de ~823px la tabla se iba a 723px de ancho minimo y se cortaba contra el borde.
   ⚠️ Solo por encima de 820: por debajo mandan las fichas (.exp-doc-cards) y la tabla se
   oculta. Si se anade o quita una columna hay que repartir de nuevo. */
@media (min-width: 901px) {
    .exp-doc-table table {
        table-layout: fixed;
        width: 100%;
        min-width: 0;
    }
}

/* ⚠️ El cambio a fichas de ESTA tabla es a 900, no a los 820 de costumbre, y el numero
   esta medido, no elegido: son cinco columnas y ademas la primera lleva un boton dentro
   ("Historial de hojas (9)", ~188px). Restando lo que piden las otras cuatro, para que al
   nombre le queden 200px utiles hace falta un contenedor de ~800px, o sea ~900 de ventana.
   Por debajo de eso la tabla CABIA (no sacaba barra horizontal) pero el nombre salia a una
   palabra por linea, "PLANTILLA" y "TIPO" se montaban en el encabezado y el boton de
   historial se metia debajo de la columna de al lado. Cabe != esta bien. */
.exp-doc-table .col-doc-tipo {
    /* 160 y no 90: el tipo mas largo real es un modelo propio con sufijo de desempate
       ("COMUNICACIONES-02", ver el gotcha del catalogo curado en CLAUDE.md), que en 90px se
       partia en dos y el segundo trozo caia por debajo del chip de estado. El ancho sale de
       la columna de ACCIONES, que iba sobrada — el nombre no pierde nada. */
    width: 170px;
    /* Nunca se parte: un tipo largo cortado en dos lineas caia por debajo del chip de estado y
       parecia un fallo de maquetacion. Si no cabe se recorta con puntos suspensivos y el texto
       completo queda en el `title` de la celda (lo pone la plantilla). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 145 y no menos: "EN REVISION" es la etiqueta mas larga y con menos la pastilla se parte
   en dos lineas (una pastilla de estado partida se lee fatal). Va junto con el `nowrap` de
   abajo: sin el, el texto se parte igualmente; sin el ancho, se sale de la celda. */
.exp-doc-table .col-doc-estado {
    width: 145px;
}

.exp-doc-table .col-doc-adjuntos {
    width: 95px;
}

.exp-doc-table .chip,
.exp-doc-cards .chip {
    white-space: nowrap;
}

/* Las fichas de la cartera siguen el MISMO patron que las filas de "Documentos listos":
   nombre, una linea gris de datos y los botones a su tamano natural. Antes heredaban el
   estilo generico de ficha (una fila por dato con su etiqueta, y `flex: 1 1 auto` en los
   botones) y quedaba desparramado: cuatro lineas de texto para dos datos, y tres botones
   de anchos distintos con el ultimo solo en una fila para el. */
.exp-doc-cards .mobile-card {
    gap: 6px;
}

.exp-doc-card-meta {
    display: flex;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--muted);
}

.exp-doc-card-meta span + span::before {
    content: "\00b7";
    margin: 0 7px;
}

.exp-doc-cards .mobile-card-actions {
    padding-top: 4px;
}

/* A su tamano, no repartiendose el ancho: con `flex: 1 1 auto` cada boton salia de un largo
   distinto segun cuanto midiera su texto. */
.exp-doc-cards .mobile-card-actions .btn {
    flex: 0 0 auto;
    min-width: 0;
}

/* En la ficha, "Quitar" y "Detalle/Historial" se quedan SOLO EN ICONO. No es un capricho de
   espacio: son los dos unicos con un dibujo inequivoco (papelera y lista), y quitarles el
   texto es lo que hace que la fila entera quepa en una sola linea
   (`Abrir revision` + lista + papelera) en vez de partirse y dejar "Quitar" solo abajo.

   ⚠️ "Abrir revision" y "Ver PDF listo" NO pueden hacer esto todavia: hoy comparten el mismo
   dibujo (el documento con lineas), asi que sin texto serian dos botones identicos que hacen
   cosas distintas. Para recortarlos hay que darles iconos distintos primero.

   `font-size: 0` es el mismo mecanismo que ya usa la cabecera de pagina para lo mismo: apaga
   el texto sin tocar el SVG (que tiene su propio tamano en `.btn-svg`). Por eso los dos
   llevan `title` y `aria-label` en la plantilla — sin texto visible, es lo unico que queda. */
/* Tambien en la TABLA (pantalla grande): con texto, "Preparar revision" + "Quitar" no
   caben juntos en la columna de acciones y "Quitar" se iba a una segunda fila el solo. */
/* Y en "Documentos listos": "Descargar" y "Eliminar" se repiten en todas las filas y su
   dibujo se entiende solo. Lo que SI conserva texto ahi es lo que cambia el estado del
   documento ("Enviar a firmar", "Cancelar"): una cruz suelta junto a un chip FIRMADA se
   leeria como "cerrar", no como "anular la firma". */
.exp-doc-cards .mobile-card-actions .btn.is-icon-only,
.exp-generated-actions .btn.is-icon-only,
.exp-doc-table .exp-row-actions .btn.is-icon-only {
    font-size: 0;
    gap: 0;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 0;
}

/* 250 es lo que pide el peor caso real medido: "Ver PDF listo" (~128px) + hueco + papelera
   (~36px) + el relleno de la celda. Con 200 la papelera se caia a una segunda linea ella sola
   en las filas que llevan las dos cosas. */
.exp-doc-table .col-doc-acciones {
    width: 250px;
}

/* ⚠️ 950, no 900: el umbral se RECALCULA cada vez que cambia el reparto de columnas de
   arriba. Las cuatro columnas fijas piden ahora 660px (170+145+95+250); para que al nombre le
   queden los 200px utiles que necesita hace falta un contenedor de ~860px, o sea ~950 de
   ventana. Si se vuelve a tocar un ancho, hay que rehacer esta cuenta. */
@media (max-width: 950px) {
    .exp-doc-table {
        display: none;
    }

    .exp-doc-cards {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        overflow: hidden;
    }
}

/* La primera columna (nombre) se queda con el sobrante y parte palabras largas antes que
   ensanchar la tabla. */
.exp-doc-table .col-doc-nombre {
    overflow-wrap: anywhere;
}

/* Alineados a la DERECHA, no a la izquierda. Alineado al principio, la papelera caia en
   una vertical distinta en cada fila (pegada al borde izquierdo cuando la fila no tenia
   "Ver PDF listo", y 130px mas alla cuando si lo tenia): la columna se veia descuadrada.
   Solo se puede alinear el primer boton o el ultimo, no los dos — y el que esta en TODAS
   las filas es la papelera, asi que manda ella. De paso queda igual que "Documentos
   listos", que ya alineaba al final. */
.exp-row-actions {
    gap: 6px;
    justify-content: flex-end;
}

/* Sin `min-width` fijo: con el reparto de arriba la columna ya tiene su sitio, y un
   minimo en px sumado por cada boton es justo lo que hacia crecer la tabla mas alla del
   contenedor. Se quedan a su tamano natural y no se parten en dos lineas. */
.exp-doc-table .exp-row-actions .btn.small {
    justify-content: center;
    white-space: nowrap;
    flex: 0 0 auto;
}

.exp-contract-table-row {
    background: #f8fbff;
}

.exp-contract-table-row td:first-child {
    border-left: 4px solid var(--primary, #1460c8);
}

.exp-contract-table-row strong {
    color: #172033;
}

/* Sin ancho minimo: vive DENTRO de la primera celda de la tabla, y un minimo en px hacia
   que se saliera por debajo de la columna de al lado en cuanto la tabla se estrechaba. */
/* Vive DENTRO de la primera celda de la tabla, asi que se adapta a lo que mida esa
   columna: `width:100%` con tope de 200px. Con un ancho minimo en px (tenia 188) se salia
   por debajo de la columna de al lado en cuanto la tabla se estrechaba. Y `white-space:
   normal` para que el texto se parta en dos lineas antes que desbordar. */
.exp-contract-history-trigger {
    margin-top: 10px;
    width: 100%;
    max-width: 200px;
    justify-content: center;
    white-space: normal;
    line-height: 1.25;
}

.exp-missing {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 320px;
}

.exp-generated-list {
    gap: 10px;
}

.exp-generated-row {
    padding: 14px 16px;
}

.exp-contract-ready-row {
    border-left: 4px solid var(--primary, #1460c8);
    background: #f8fbff;
}

.exp-generated-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.exp-generated-title {
    min-width: 0;
}

.exp-generated-title strong,
.exp-generated-title .muted {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exp-generated-actions {
    justify-content: flex-end;
    gap: 8px;
}

.exp-model-picker .confirm-dialog {
    max-width: 820px;
}

.exp-contract-history-dialog {
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    max-height: min(720px, calc(100vh - 72px));
}

.exp-contract-history-dialog .exp-contract-history-list {
    overflow-y: auto;
    padding-right: 4px;
}

/* ⚠️ El divisor de `.confirm-dialog .actions` (la linea gris de encima de los botones del
   PIE de un modal, parte del estandar) tambien pegaba aqui, porque esto es un `.actions`
   pero DE FILA, no el pie: salia una rayita suelta encima del boton de cada revision.
   Se quita a mano. Si se anade otro grupo de acciones por fila dentro de un modal, le
   pasara lo mismo. */
.exp-contract-history-actions,
.confirm-dialog .exp-contract-history-actions {
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.exp-contract-history-actions .btn.small {
    min-width: 126px;
    justify-content: center;
}

/* ⚠️ Esta pantalla se sale a mano de la regla global de ≤1100px
   (`.actions { width: 100% }` + `.actions .btn { flex: 1 1 calc(50% - 4px) }`, comentada
   como "on mobile" pero que en realidad salta ya en un iPad o en un portatil con zoom).
   Lo que hacia aqui: "Agregar modelo" se convertia en una franja azul de lado a lado, y
   cada fila de "Documentos listos" pasaba a una parrilla 2x2 descuadrada con "Vista previa"
   enorme arriba y "Descargar"/"Cancelar firma" debajo. Los botones vuelven a medir lo que
   dice su texto; el grupo de la cabecera se queda pegado a la derecha. */
@media (max-width: 1100px) {
    .exp-section-head .actions {
        width: auto;
        margin-left: auto;
    }

    .exp-generated-actions,
    .exp-contract-history-actions,
    .exp-row-actions {
        width: auto;
    }

    .exp-section-head .actions .btn,
    .exp-section-head .actions a.btn,
    .exp-section-head .actions button.btn,
    .exp-generated-actions .btn,
    .exp-generated-actions a.btn,
    .exp-generated-actions button.btn,
    .exp-contract-history-actions .btn,
    .exp-contract-history-actions a.btn,
    .exp-contract-history-actions button.btn,
    .exp-row-actions .btn,
    .exp-row-actions a.btn,
    .exp-row-actions button.btn {
        flex: 0 0 auto;
    }

    /* Mismo caso, en /mi-empresa: la regla global de arriba convertia el "Guardar" de cada
       plantilla de correo en una franja de lado a lado ya a 1100 — o sea en un iPad o en un
       portatil de 13" con un paso de zoom, no "en movil". Y el contraste lo dejaba en
       evidencia: el "Guardar" de "Correo de archivo", que esta fuera de este bloque, salia a
       su tamano normal justo debajo. Dos botones que hacen lo mismo, en la misma pantalla,
       con dos pintas. */
    .email-templates-block .actions {
        width: auto;
    }

    .email-templates-block .actions .btn,
    .email-templates-block .actions button.btn {
        flex: 0 0 auto;
    }

    /* Contabilidad del expediente: la cabecera de esta pantalla usa `.toolbar` y no
       `.page-header`, asi que no hereda el comportamiento estandar de cabecera y caia de
       lleno en la regla global de arriba — "Panel general" y "Abrir expediente" al 50% y
       "Enviar resumen contable" solo, en otra fila y a su tamano, porque va dentro de un
       <form> y la regla apunta al boton, no al formulario. Los tres a su tamano y pegados
       a la derecha, como en cualquier otra cabecera. */
    .accounting-page > .toolbar .actions {
        width: auto;
        margin-left: auto;
    }

    .accounting-page > .toolbar .actions .btn,
    .accounting-page > .toolbar .actions a.btn,
    .accounting-page > .toolbar .actions button.btn {
        flex: 0 0 auto;
    }

    /* "Acciones rapidas": mismo problema, y ahi el que se quedaba ancho abajo era "Cierre
       excepcional" — la accion mas grave del panel. Los tres iguales. */
    .accounting-actions-panel .actions .btn,
    .accounting-actions-panel .actions a.btn,
    .accounting-actions-panel .actions button.btn,
    .accounting-actions-panel > .actions {
        flex: 0 0 auto;
        width: auto;
    }
}

/* Por debajo de 700 los tres botones ya no caben en una fila y se partian en dos (234+162
   arriba, 188 solo abajo) y en tres a 390 — cada uno de un ancho distinto y pegados a la
   izquierda, con el borde derecho hecho una escalera.
   Se apilan y se les da a los tres el ancho del mas largo. NO se estiran a la fila completa
   (dejaria "Cierre excepcional", que es la accion mas grave, tan grande como la principal) ni
   se centran (romperia la alineacion a la izquierda del resto de la tarjeta). Lo que chirriaba
   no era que estuvieran a la izquierda, era que midieran tres cosas distintas. */
@media (max-width: 700px) {
    .accounting-actions-panel > .actions {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ⚠️ Hace falta repetir el selector con `button.btn` y `a.btn`: la regla de ≤1100 de aqui
       arriba usa `.accounting-actions-panel .actions button.btn`, que al llevar un elemento
       pesa mas (0,3,1) que un selector de solo clases (0,3,0) y le ganaba a este `width`.
       Con clases sueltas la regla existia y no hacia nada. */
    .accounting-actions-panel > .actions > .btn,
    .accounting-actions-panel > .actions > a.btn,
    .accounting-actions-panel > .actions > button.btn {
        /* 248 y no 234: 234 era EXACTAMENTE el ancho natural del mas largo ("Condiciones
           economicas"), o sea cero holgura — y a 640 el texto se partia en dos lineas dentro
           del boton. Con `max-width: 100%` para que en una pantalla mas estrecha que eso se
           encojan en vez de desbordar. */
        width: 248px;
        max-width: 100%;
    }
}

.exp-model-dialog {
    display: flex;
    flex-direction: column;
    height: min(760px, calc(100vh - 72px));
    max-height: calc(100vh - 72px);
}

.exp-model-search {
    margin: 12px 0;
}

.exp-model-search .cff-search-row {
    margin-bottom: 0;
}

.exp-model-results {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding-right: 4px;
    min-height: 0;
}

.exp-model-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* Checkbox nativo dentro de un picker de modelos (seleccion multiple).
   La regla global input{width:100%;appearance:none} tambien pega en los checkboxes
   si no se resetea explicitamente — mismo patron que .check-inline. Sin esto el
   checkbox se dibuja como una caja vacia estirada que, al ser .exp-model-row un
   space-between, empuja el texto de la fila hasta el borde y lo deja recortado.
   ⚠️ Estas dos reglas vivian en un <style> dentro de modelos/listado.html. Al
   reutilizar el picker en la ficha del expediente dejaron de aplicar (un <style>
   de plantilla solo existe en esa pagina), asi que suben aca, que es donde tiene
   que estar lo que comparten dos pantallas. */
.model-picker-checkbox {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--primary);
}

/* Mismo motivo que .model-picker-checkbox de arriba: la regla global
   input{width:100%;appearance:none} tambien se come cualquier <input type="radio">
   suelto, dejandolo como una caja vacia estirada — visto en /mi-empresa, el toggle
   Texto/HTML del correo de firma (2026-08-27). Reusable para cualquier grupo de
   radios simple (label + texto al lado), no solo ese formulario puntual. */
.radio-inline-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.radio-inline-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
}
.radio-inline-group input[type="radio"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--primary);
}

/* ── Control segmentado tipo iOS (Texto/HTML del correo de firma) ──────────────
   El radio-inline-group de arriba quedaba mas bajo que el input de al lado (un
   grupo de radios sueltos mide una linea de texto, un <input> mide ~44px con su
   padding) — dos alturas distintas en la misma fila de field-grid.two se ve
   descuadrado. Esto es un toggle real (mismo alto que un input, con "pista" y
   una perilla que se mueve), no una lista de opciones — msmo lenguaje visual
   que un segmented control de iOS. Sigue usando <input type="radio"> reales
   por debajo (accesible, funciona sin JS) — el estado activo se pinta con
   :has(), mismo mecanismo que .perm-chip:has(input:checked) mas arriba. */
.format-segmented {
    display: flex;
    gap: 2px;
    padding: 3px;
    height: 44px;
    box-sizing: border-box;
    background: var(--surface-alt, #f1f4f8);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
}
.format-segment {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: calc(var(--radius-xs) - 3px);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.format-segment input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.format-segment:has(input:checked) {
    background: var(--surface, #fff);
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(10,25,55,0.12);
}
.format-segment:hover:not(:has(input:checked)) {
    color: var(--text-2);
}

/* ── Variables {{cliente.nombre}} del correo de firma ────────────────────────
   Pastillas clickeables (insertan la variable en el campo con foco) + una vista
   previa en vivo con datos de ejemplo, todo client-side (sin ida y vuelta al
   servidor: la sustitucion es un buscar-y-reemplazar trivial). */
.var-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.var-pill {
    border: 1px solid var(--border);
    background: var(--primary-soft, #eff6ff);
    color: var(--primary, #1460C8);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.var-pill:hover { background: #dbeafe; }
.var-pill:active { transform: scale(0.96); }

/* Pastilla de marcador estructural (donde va el boton) — a proposito con otro color que
   .var-pill (dato de negocio), para que se lea como algo distinto de un dato a mostrar. */
.action-pill {
    border: 1px solid var(--border);
    background: #f5f3ff;
    color: #6d28d9;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.action-pill:hover { background: #ede9fe; }
.action-pill:active { transform: scale(0.96); }

.email-tpl-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--surface-alt, #f8f9fa);
    border: 1px dashed var(--border);
    border-radius: var(--radius-xs);
}
.email-tpl-preview-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.email-tpl-preview-subject {
    font-size: 0.88rem;
    color: var(--text);
}
.email-tpl-preview-body {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
}
.email-tpl-preview-frame {
    width: 100%;
    min-height: 260px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: #fff;
}

/* ── Diferenciar Texto vs HTML a simple vista ────────────────────────────────
   Antes no habia forma de saber, mirando la pantalla, si un tipo de correo
   estaba en Texto o en HTML sin abrir el toggle — y en HTML el textarea se
   veia identico a Texto aunque adentro hubiera marcado. */
.format-live-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-alt, #f1f4f8);
    color: var(--muted);
}
.format-live-badge[data-html="true"] {
    background: #ede9fe;
    color: #6d28d9;
}
/* El textarea de Mensaje pasa a monoespaciado cuando el formato es HTML — se
   lee como codigo, no como prosa, apenas se mira la pantalla. */
.js-email-tpl-field.is-html-mode {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    background: #0b1220;
    color: #cbd5e1;
    border-color: #1f2937;
}

/* ── Opcion apagada de un desplegable, con su motivo ──────────────────────────
   Nada desaparece en silencio: lo que no se puede elegir se enseña igual, en gris y con
   la explicacion debajo (ver MotivoBloqueo en el backend y la seccion correspondiente de
   CLAUDE.md). Vive aca y no dentro de una pantalla porque lo va a usar cualquier
   desplegable que hoy filtre a escondidas.
   El check de seleccionado se apaga: una opcion que no se puede elegir nunca esta elegida. */
.ios-select-option[data-disabled="true"] {
    cursor: not-allowed;
    opacity: .72;
    align-items: flex-start;
}

.ios-select-option[data-disabled="true"]:hover {
    background: transparent;
}

.ios-select-option[data-disabled="true"] svg {
    visibility: hidden;
}

/* Ambar, no rojo: no es un error del usuario, es un requisito que falta cumplir.
   Mismo tono que `.chip.warn`, que es el ambar ya establecido en la app. */
.ios-select-option-reason {
    color: #714800;
}

/* Bloque de consentimiento de acceso en /mi-empresa#riesgo. Separado visualmente de las
   acciones de borrado que hay debajo: comparten pestaña pero no son la misma cosa — una es
   una decision de privacidad y las otras son borrar un logo. */
.me-access-block {
    padding: 16px 18px;
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

/* El enlace para arreglarlo va DENTRO de la opcion, pegado al motivo. Es lo unico
   pulsable de una opcion apagada, por eso recupera el cursor de mano y la opacidad. */
.ios-select-option-fix {
    align-self: flex-start;
    margin-top: 3px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
    opacity: 1;
}

.ios-select-option-fix:hover {
    text-decoration: none;
}

/* Nota bajo un desplegable para el otro caso: la persona NO EXISTE en la ficha, asi que no
   hay ninguna opcion que apagar y el motivo no cabe dentro del desplegable.
   ⚠ Hoy no la usa nadie: se conserva para el pendiente de "esa persona no existe" (ver
   PENDING.md). Si ese pendiente se descarta, esta regla se borra. */
.campo-nota-ausencia {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--muted);
}

.campo-nota-ausencia a {
    color: var(--primary);
    font-weight: 600;
}

.model-picker-select-all {
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    background: var(--surface-alt);
}

.exp-model-row-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.exp-model-row-main strong,
.exp-model-row-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exp-model-scenario {
    margin-top: 8px;
    max-width: 420px;
}

.exp-model-scenario span {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 4px;
    white-space: normal;
}

.exp-model-scenario-empty {
    margin-top: 8px;
    font-size: 0.86rem;
}

.pdf-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.pdf-preview-title {
    min-width: 0;
}

.pdf-preview-title .chip {
    margin-top: 10px;
}

.pdf-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.pdf-preview-doc-actions {
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.pdf-preview-head h1 {
    margin: 2px 0 0;
    font-size: 1.35rem;
}

.pdf-preview-head p {
    margin: 4px 0 0;
}

.pdf-preview-shell {
    padding: 10px;
    height: calc(100vh - var(--topnav-offset, 0px) - 190px);
    min-height: 620px;
}

.pdf-preview-shell iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

/* La altura minima es para que el lienzo no baile al cambiar de pagina con el PDF cargando.
   Solo aplica en escritorio: por debajo de 1024 el editor no se pinta (ver el corte medido mas
   abajo), y dejarla puesta llenaba la pantalla de tarjeta vacia — a 390px el documento medía
   1180px de alto con casi 800 de hueco blanco. */
.pdf-editor-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1024px) {
    .pdf-editor-shell {
        min-height: calc(100vh - var(--topnav-offset, 0px) - 190px);
    }

    /* La vista previa de un documento ya no la necesita: el alto lo da su recuadro de paginas,
       ajustado por script a lo que queda de pantalla, y cada pagina reserva su hueco antes de
       cargar. Con el minimo puesto la tarjeta sobresalia y habia dos barras de scroll. La hoja de
       encargo (que tambien usa .pdf-editor-shell) lo conserva. */
    .pdf-editor-shell--campos {
        min-height: 0;
    }
}

.pdf-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* El selector de pagina se salia de madre por debajo de 1100: el bloque global de esa medida
   estira CUALQUIER <select> al 100% y permite que `.field-inline` envuelva, asi que "Pagina",
   el desplegable y "de 3" acababan en tres lineas, con el desplegable de lado a lado. Es la
   misma regla global que ya habia que esquivar en la ficha del expediente (ver CLAUDE.md).
   Gana por especificidad: las media queries no suman especificidad. */
.pdf-editor-toolbar .field-inline {
    flex-wrap: nowrap;
}

.pdf-editor-toolbar .field-inline select {
    width: auto;
    min-width: 96px;
    flex: 0 0 auto;
}

/* Y el mismo bloque global de ≤1100 estira cualquier `.actions` al 100%: "Volver" se comia
   una fila entera el solo y empujaba "Aprobar"/"Eliminar" a la de abajo, ya en un iPad. Es
   la tercera pantalla donde hay que esquivar esa regla (ver CLAUDE.md). El reparto de movil
   lo sigue decidiendo el bloque de 760, que va despues. */
@media (max-width: 1100px) {
    .pdf-preview-actions .actions {
        width: auto;
    }

    .pdf-preview-actions .actions .btn {
        flex: 0 0 auto;
    }
}

.pdf-editor-status {
    min-width: 130px;
    text-align: right;
}

/* Envoltorio para poder enseñar el motivo de un boton DESHABILITADO. Un boton `disabled` no
   recibe eventos de raton en ningun navegador, asi que su propio `title` no se muestra jamas:
   hay que colgarlo de un elemento que si los reciba. Se comporta como el boton (mismo hueco
   en un `.actions`, que es flex) para no alterar la fila. Generico: cualquier pantalla con un
   boton apagado que deba explicar por que lo esta. */
.btn-tip-wrap {
    display: inline-flex;
}

/* Aviso de "solo escritorio": oculto por defecto, aparece cuando se esconde el editor. */
.pdf-editor-desktop-only {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.pdf-editor-desktop-only h2 {
    margin: 0;
    font-size: 1.1rem;
}

.pdf-editor-desktop-only p {
    margin: 0;
}

.pdf-desktop-only-icon {
    width: 30px;
    height: 30px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ⚠️ 1024 es un corte MEDIDO, no elegido, y por eso no coincide con ninguno de los de la tabla
   general: es el ultimo ancho en el que las casillas del formulario oficial siguen siendo
   usables. Medido sobre un EX-04 (73 campos), alto de la casilla mas pequena: 22px a 1470,
   20px a 1024, 15px a 800, 11px a 640 y 6px a 390 — siempre con letra de 12px dentro. O sea
   que el iPad en horizontal (1024) entra justo, y por debajo el editor deja de servir.
   Si algun dia se cambia el tamano del lienzo (`.pdf-editor-canvas`), hay que rehacer esta
   medida: el corte depende de el, no del gusto. */
/* ⚠️ `--campos`, NO `.pdf-editor-shell` a secas: la hoja de encargo reutiliza la clase base
   (`hojas_encargo/*.html`), y esconderla a ella dejaba esa pantalla EN BLANCO por debajo de
   1024 — solo cabecera y aviso. Pasó de verdad el 2026-08-25. */
/* ⚠️ El aviso se enciende SIEMPRE con el alcance de su pantalla (`.page--pdf-preview` aqui),
   nunca con `.pdf-editor-desktop-only` a secas. Tres pantallas comparten esa clase y NO
   cortan al mismo ancho: esta a 1024 (medido, arriba), y /plantillas/{id}/editar, /modelos y
   /plataforma/catalogo-oficial a 1180. Con la regla global, al bajar una de ellas a 1180 el
   aviso se encendia tambien en las otras entre 1024 y 1180, conviviendo con su editor —
   exactamente el fallo que hubo en /modelos. */
@media (max-width: 1023.98px) {
    .pdf-editor-shell--campos {
        display: none;
    }

    .page--pdf-preview .pdf-editor-desktop-only {
        display: flex;
    }
}

/* Odoo 89: mismo aviso, para el editor de plantillas (/plantillas/{id}/editar). Corta a 1180
   igual que /modelos y /plataforma/catalogo-oficial: es el suelo del modo escritorio y la
   misma clase de trabajo (ubicar casillas sobre un PDF). Clase propia (no `.pdf-editor-shell`)
   porque no comparte el layout de lienzo de la vista previa de un documento. */
@media (max-width: 1179.98px) {
    .page--plantilla-editor .template-editor-shell {
        display: none;
    }

    .page--plantilla-editor .pdf-editor-desktop-only {
        display: flex;
    }
}

.pdf-editor-canvas {
    position: relative;
    align-self: center;
    width: min(100%, 1040px);
    background: #2f2f2f;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.pdf-editor-canvas img {
    display: block;
    width: 100%;
    height: auto;
}

/* Vista previa de un documento: todas las paginas en un recuadro con scroll propio, como un
   visor de PDF (hojas blancas sobre fondo gris suave). El alto lo fija el script (lo que queda de
   pantalla) y cada hoja reserva su hueco con aspect-ratio antes de que llegue su imagen, asi el
   scroll no salta al cargar y las casillas ya estan en su sitio. */
.pdf-editor-canvas.pdf-editor-viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 25, 55, .28) transparent;
}

/* El selector de pagina se alinea con el recuadro de las paginas (centrado), no con la tarjeta. */
.pdf-editor-shell--campos .pdf-editor-toolbar {
    align-self: center;
    width: min(100%, 1040px);
}

.pdf-editor-viewport:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pdf-editor-page {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    background: #fff;
    border-radius: 3px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pdf-editor-page img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .25s ease;
}

.pdf-editor-page .pdf-editor-layer {
    transition: opacity .25s ease;
}

/* Hasta que llega la imagen: ni documento ni casillas, solo la hoja con un brillo de carga y el
   aviso centrado. Las casillas aparecen a la vez que el documento. Se ocultan con opacidad y no
   con visibility: asi siguen alcanzables con el tabulador, y al entrar en una se muestran
   (.show-fields) aunque la imagen de su pagina aun no haya llegado. */
.pdf-editor-page.is-loading img,
.pdf-editor-page.is-error img {
    opacity: 0;
}

.pdf-editor-page.is-loading .pdf-editor-layer,
.pdf-editor-page.is-error .pdf-editor-layer {
    opacity: 0;
    pointer-events: none;
}

.pdf-editor-page.show-fields .pdf-editor-layer {
    opacity: 1;
    pointer-events: auto;
}

.pdf-editor-page.is-loading {
    background: linear-gradient(100deg, #fff 30%, var(--surface-alt) 50%, #fff 70%) 0 0 / 250% 100%;
    animation: pdf-page-shimmer 1.6s ease-in-out infinite;
}

@keyframes pdf-page-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

.pdf-editor-page-status {
    position: absolute;
    top: min(25%, 180px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--text-muted);
    font-size: .85rem;
    white-space: nowrap;
}

.pdf-editor-page.is-loading .pdf-editor-page-status,
.pdf-editor-page.is-error .pdf-editor-page-status {
    display: inline-flex;
}

.pdf-editor-page-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--surface-deep);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: btn-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pdf-editor-page.is-loading { animation: none; }
    .pdf-editor-page-spinner { animation-duration: 2s; }
}

.pdf-editor-layer {
    position: absolute;
    inset: 0;
}

.pdf-editor-field {
    position: absolute;
    display: block;
    margin: 0;
}

.pdf-editor-field input[type="text"] {
    width: 100%;
    height: 100%;
    border: 1.5px solid rgba(20, 96, 200, .45);
    border-radius: 2px;
    background: rgba(244, 248, 255, .78);
    color: var(--text);
    font: 700 12px/1 Arial, sans-serif;
    padding: 0 3px;
    outline: none;
}

.pdf-editor-field.has-value input[type="text"] {
    background: #f4f8ff;
}

.pdf-editor-field input[type="text"]:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(20, 96, 200, .16);
}

.pdf-editor-field input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.pdf-editor-field--checkbox {
    min-width: 12px;
    min-height: 12px;
    cursor: pointer;
}

.pdf-editor-field--checkbox::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(15px, 92%);
    height: min(15px, 92%);
    transform: translate(-50%, -50%);
    border: 1.5px solid rgba(15, 24, 36, .75);
    border-radius: 3px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
    z-index: 1;
}

.pdf-editor-field--checkbox::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(8px, 58%);
    height: min(5px, 42%);
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: translate(-50%, -62%) rotate(-45deg) scale(0);
    transform-origin: center;
    z-index: 1;
}

.pdf-editor-field--checkbox.is-checked::before {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.pdf-editor-field--checkbox.is-checked::after {
    transform: translate(-50%, -62%) rotate(-45deg) scale(1);
}

.pdf-editor-field input:disabled {
    cursor: default;
    opacity: .85;
}

/* Las casillas van sobre el PDF, que es papel blanco con cualquier tema. El tema oscuro pinta
   todos los input con fondo oscuro y letra clara (theme.css se carga despues y empata en
   especificidad), asi que aqui se fijan colores de papel con un selector mas especifico. */
.pdf-editor-page .pdf-editor-field input[type="text"] {
    background: rgba(244, 248, 255, .78);
    color: #0f1824;
    border-color: rgba(20, 96, 200, .45);
}

.pdf-editor-page .pdf-editor-field.has-value input[type="text"] {
    background: #f4f8ff;
}

.pdf-editor-page .pdf-editor-field input[type="text"]:focus {
    background: #fff;
    color: #0f1824;
    border-color: #1460c8;
    box-shadow: 0 0 0 2px rgba(20, 96, 200, .16);
}

/* La franja de dinero se queda en UNA SOLA FILA todo lo que puede, y el corte esta medido,
   no elegido: la fila entera pide 132px de chip + 4x120 de datos + ~190 de boton + huecos =
   ~852px de contenedor, o sea unos 960 de ventana. Empezo bajando a 1180 (dos columnas, con
   el chip solo en una fila entera y el boton como una barra vacia de lado a lado), luego a
   1100 — y a 1100 seguia sobrando sitio: quedaba el chip a un extremo, el boton al otro y
   medio metro de nada en medio. Se veia "regada". */
@media (max-width: 960px) {

    /* Lo unico que baja es el boton: el chip se queda con los cuatro datos en la primera
       fila (por eso `auto` delante), y la accion pasa debajo pegada a la derecha, a su
       tamano. Asi no queda ningun hueco grande en medio de una fila. */
    .exp-finance-strip {
        grid-template-columns: auto repeat(4, minmax(0, 1fr));
    }

    .exp-finance-status {
        grid-column: 1;
        grid-row: 1;
    }

    .exp-finance-item {
        grid-row: 1;
    }

    .exp-finance-action {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
        align-self: center;
    }
}

@media (max-width: 820px) {

    .exp-finance-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Hay que volver a colocar estado y boton: el paso anterior los mandaba a las columnas
       1-2 y 3-4, y con solo dos columnas el navegador se inventa una tercera y una cuarta
       para alojarlos — la franja sale con tres cajas de anchos distintos en la primera fila
       y el resto descuadrado detras. */
    .exp-finance-status {
        grid-column: 1;
        grid-row: 1;
    }

    .exp-finance-action {
        grid-column: 2;
        grid-row: 1;
    }

    .exp-finance-item {
        grid-row: auto;
    }
}

/* Movil: todo en una columna. El corte es 640, no 760: a 760 las dos columnas siguen
   midiendo ~350px cada una y se leen perfectamente. */
@media (max-width: 640px) {

    .exp-finance-strip {
        grid-template-columns: 1fr;
    }

    .exp-finance-status,
    .exp-finance-action {
        grid-column: auto;
        grid-row: auto;
        justify-self: stretch;
    }
}

@media (max-width: 760px) {

    .exp-section-head,
    .pdf-preview-head {
        flex-direction: column;
        align-items: stretch;
    }

    .exp-section-head .actions,
    .pdf-preview-head .actions,

    .pdf-preview-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    /* La franja del sobre vive DENTRO de .exp-section-head, asi que heredaba de la regla de
       aqui arriba el `flex-direction: column` + `align-items: stretch` — y sus dos botones
       salian con dos pintas distintas: "Cancelar" es hijo directo del grupo y se estiraba a
       la fila entera (262px medidos a 390), mientras "Sincronizar" se quedaba a su tamano
       natural porque va envuelto en un <form> (lo necesita para poder enviarse), y lo que se
       estira es el formulario, no el boton de dentro. Encima el gigante era justo el
       destructivo y el discreto el inofensivo: al reves de lo que interesa.
       Vuelven a fila y se reparten el ancho, que es como se comporta el resto de la app en
       movil. Los dos botones son cortos y caben de sobra.
       ⚠️ Es el mismo problema que ya estaba resuelto mas abajo para `.exp-generated-actions`
       (`form` y `form .btn` a `width: 100%`): si se anade otro grupo de acciones con un boton
       dentro de un <form>, hay que acordarse de esto o vuelve a pasar. */
    .exp-sobre-strip .actions {
        width: 100%;
        margin-left: 0;
        flex-direction: row;
        align-items: stretch;
    }

    .exp-sobre-strip .actions form.inline,
    .exp-sobre-strip .actions > .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .exp-sobre-strip .actions form.inline .btn {
        width: 100%;
        justify-content: center;
    }

    /* La cabecera de la vista previa se comia un tercio del movil (337px medidos a 390):
       titulo, chip y los TRES botones uno debajo de otro, cada uno de lado a lado, antes de
       ver nada del documento. Ahora comparten fila y se reparten el ancho; el que no quepa
       baja solo.
       ⚠️ `align-items: flex-start` no es opcional: el contenedor viene con `stretch` de la
       regla de arriba y "Volver", al ser hijo unico de su grupo, se estiraba en ALTO hasta
       igualar la columna de al lado (un boton de 100px de alto). */
    .pdf-preview-head .pdf-preview-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    /* `display: contents` disuelve el grupo: sus dos formularios pasan a ser hijos directos
       de la fila y se reparten con "Volver" en igualdad. Sin esto seguian apilados, porque
       `.pdf-preview-head .actions { flex-direction: column }` gana por especificidad a un
       selector de una sola clase. */
    .pdf-preview-head .pdf-preview-doc-actions {
        display: contents;
    }

    .pdf-preview-head .pdf-preview-nav,
    .pdf-preview-head .pdf-preview-actions .inline {
        flex: 1 1 140px;
        width: auto;
    }

    .pdf-preview-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .pdf-preview-doc-actions {
        padding-left: 0;
        border-left: 0;
    }

    /* Aqui habia dos selectores de boton pegados a esta regla (`.exp-section-head .actions
       .btn` y `.pdf-preview-head .actions .btn`), seguramente un `width: 100%` que se perdio
       en algun merge: un boton no es una rejilla, asi que `grid-template-columns` no le
       hacia nada. No hacen falta — el contenedor ya estira sus botones con
       `align-items: stretch`. */
    .exp-generated-main {
        grid-template-columns: 1fr;
    }

    .exp-generated-actions {
        justify-content: flex-start;
    }

    .exp-generated-actions .btn,
    .exp-generated-actions form {
        width: 100%;
    }

    .exp-generated-actions form .btn {
        width: 100%;
        justify-content: center;
    }

    .exp-model-dialog {
        height: calc(100vh - 34px);
        max-height: calc(100vh - 34px);
    }

    /* La fila del picker se queda HORIZONTAL tambien en movil: la casilla a la izquierda
       y el texto a su derecha. Al ponerla en columna la casilla saltaba a su propia linea
       encima del texto (dejaba de leerse como "casilla DE esta fila") y cada fila pasaba a
       medir ~100px de alto, asi que en un movil solo se veian cuatro modelos. */
    .exp-model-row {
        align-items: center;
    }

    .pdf-preview-shell {
        height: calc(100vh - var(--topnav-offset, 0px) - 260px);
        min-height: 420px;
    }
}

/* Hint de formulario */
.form-hint { font-size: .82rem; color: var(--muted, #6b7280); margin: 0 0 10px; }

/* Sección peligrosa dentro de tab */
.danger-section { background: #fffafa; border: 1px solid #fecaca; border-radius: 10px; }
.danger-title { color: #dc2626 !important; }

/* ─────────────────────────────────────────────
   MI EMPRESA — perfil de empresa / bufete
   ───────────────────────────────────────────── */

/* ── Cabecera hero ── */
.me-head { padding: 0 !important; overflow: hidden; }
.me-hero { width: 100%; }
.me-cover {
    height: 140px;
    background: linear-gradient(135deg, #dde4f0 0%, #c8d3e8 100%);
    background-size: cover;
    background-position: center;
}
.me-hero-body {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 24px 20px;
}
.me-logo-wrap { margin-top: -28px; flex-shrink: 0; }
.me-logo {
    width: 56px; height: 56px;
    border-radius: 13px;
    border: 3px solid #fff;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    display: flex; align-items: center; justify-content: center;
}
.me-logo-initials {
    font-size: 1.4rem; font-weight: 800;
    color: var(--primary, #1460C8);
    background: #eff6ff;
}
.me-hero-meta { flex: 1; min-width: 0; padding-top: 8px; }
.me-hero-name { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 3px; }
.me-hero-desc { font-size: .82rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.me-hero-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.me-badge-sep {
    font-size: .75rem;
    color: #9ca3af;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.me-badge-sep::before { content: '·'; color: #d1d5db; }

/* ── Navegación interna ── */
.me-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background: #f8fbff;
    border-top: 1px solid var(--border, #d7e2f2);
    border-bottom: 1px solid var(--border, #d7e2f2);
}
.me-tab {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #d7e2f2;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.me-tab:hover {
    border-color: #9ec2f7;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .08);
    transform: translateY(-1px);
}
.me-tab.active {
    border-color: rgba(37, 99, 235, .35);
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}
.me-tab span {
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.me-tab small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.me-panel-hidden { display: none !important; }

/* ── Identidad 2 cols ── */
.me-identity-cols {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}
.me-identity-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── iOS Color Picker ── */
.me-color-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.me-color-col { display: flex; flex-direction: column; gap: 8px; }
.me-color-label { font-size: .75rem; font-weight: 600; color: var(--text-2, #6b7280); letter-spacing: .02em; }

.ios-color-picker {
    display: flex;
    align-items: center;
    background: rgba(242,242,247,0.9);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    gap: 8px;
}
.ios-color-preview {
    width: 22px; height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1.5px solid rgba(0,0,0,0.12);
    transition: background 0.2s;
}
.ios-color-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: .85rem;
    font-family: ui-monospace, monospace;
    color: var(--text);
    outline: none;
    min-width: 0;
    padding: 0;
}
.ios-color-eyedrop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
}
.ios-color-eyedrop:hover { background: rgba(0,0,0,0.06); color: var(--primary, #1460C8); }
.ios-color-eyedrop svg {
    width: 15px; height: 15px;
    pointer-events: none;
    flex-shrink: 0;
}
.ios-color-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%; height: 100%;
    border: none;
    padding: 0;
}
.ios-swatches {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.ios-swatch {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    outline: none;
    padding: 0;
}
.ios-swatch:hover { transform: scale(1.2); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.ios-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2.5px var(--swatch-color, #1460C8), 0 2px 6px rgba(0,0,0,0.15);
}

/* ── Col preview ── */
.me-identity-preview { display: flex; flex-direction: column; gap: 16px; }
.me-preview-block { display: flex; flex-direction: column; gap: 8px; }
.me-preview-label { font-size: .75rem; font-weight: 600; color: var(--text-2, #6b7280); }
.me-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Contacto 3 cols ── */
.me-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.me-contract-head {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.pcard-section[data-me-panel="contratos"] {
    margin: 16px 18px;
    border: 1px solid #d8e5f5;
    border-bottom: 1px solid #d8e5f5;
    border-radius: 14px;
    background: #fff;
}
.pcard-section[data-me-panel="contratos"] + .pcard-section[data-me-panel="contratos"] {
    margin-top: 20px;
}
.me-contract-subtitle {
    margin: 5px 0 0;
    font-size: .86rem;
}
.me-contract-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #cfe0f8;
    border-radius: 10px;
    background: #f6f9fe;
    color: #526174;
    font-size: .82rem;
}
.me-contract-scope strong { color: #203047; }
.me-contract-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.me-contract-note {
    padding: 11px 13px;
    border-left: 3px solid var(--primary, #1460c8);
    border-radius: 0 8px 8px 0;
    background: var(--primary-soft, #eef5ff);
    color: #526174;
    font-size: .82rem;
    line-height: 1.5;
}
.me-contract-subsection {
    margin-top: 2px;
    padding-top: 18px;
    border-top: 1px solid #d8e5f5;
}
.me-contract-subsection h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.me-signer-same-pill {
    width: fit-content;
    margin: 12px 0 12px;
    padding: 0;
}
.me-native-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid #cbd8ea;
    border-radius: 10px;
    background: #f8fbff;
    cursor: pointer;
    font-weight: 700;
    color: #1f2937;
}
.me-native-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.me-native-checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid #95a8c5;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 0 0 2px #fff;
}
.me-native-checkbox input[type="checkbox"]:checked + .me-native-checkbox-box {
    border-color: var(--primary, #1460c8);
    background: var(--primary, #1460c8);
}
.me-native-checkbox input[type="checkbox"]:checked + .me-native-checkbox-box::after {
    content: "✓";
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 19px;
    text-align: center;
}
.me-native-checkbox input[type="checkbox"]:focus-visible + .me-native-checkbox-box {
    outline: 3px solid rgba(20, 96, 200, .2);
    outline-offset: 2px;
}
.me-contract-subsection.is-same-provider [data-signer-same-row="identity"] {
    display: none !important;
}
.me-contract-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.me-contract-summary > div {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fafcff;
}
.me-contract-summary dt {
    margin-bottom: 4px;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.me-contract-summary dd {
    margin: 0;
    color: var(--text);
    font-size: .86rem;
    font-weight: 600;
}
.me-template-form { margin-top: 6px; }
.me-template-workspace {
    display: grid;
    grid-template-columns: minmax(440px, .72fr) minmax(720px, 1.28fr);
    gap: 22px;
    align-items: start;
    width: 100%;
}
.me-template-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.me-template-blocks-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.me-template-blocks-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.me-template-blocks-head strong {
    color: var(--text);
    font-size: .9rem;
}
.me-template-blocks-head span {
    color: #6b7280;
    font-size: .76rem;
}
.me-template-blocks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.me-template-block {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 13px;
    border: 1px solid #d8e1ee;
    border-radius: 11px;
    background: #fbfdff;
    transition: opacity .15s, background .15s;
}
.me-template-block.is-disabled {
    opacity: .62;
    background: #f4f6f8;
}
.me-template-block.is-invalid {
    border-color: var(--danger, #e02020);
    background: #fff5f5;
}
.me-template-block.is-invalid .me-template-block-main span {
    color: var(--danger, #e02020);
    font-style: normal;
    font-weight: 600;
}
.me-template-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.me-template-block-order {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-soft, #eaf2ff);
    color: var(--primary, #1460c8);
    font-size: .75rem;
    font-weight: 800;
}
.me-template-switch .switch-slider {
    width: 34px;
    height: 20px;
    flex: 0 0 34px;
}
.me-template-switch .switch-slider::after {
    width: 14px;
    height: 14px;
}
.me-template-switch input[type="checkbox"]:checked + .switch-slider::after {
    transform: translateX(14px);
}
.me-template-block-actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}
.me-template-block-actions .icon-btn {
    width: 29px;
    height: 29px;
    font-size: 1rem;
}
.me-template-block--compact {
    padding: 11px 12px;
}
.me-template-block--compact .me-template-block-head {
    align-items: center;
}
.me-template-block-main {
    min-width: 0;
    flex: 1;
}
.me-template-block-main strong,
.me-template-block-main span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-template-block-main strong {
    color: #172033;
    font-size: .88rem;
}
.me-template-block-main span {
    margin-top: 3px;
    color: #64748b;
    font-size: .76rem;
}
.me-template-block-main span.is-placeholder {
    color: #94a3b8;
    font-style: italic;
}
.me-template-block--compact .me-template-switch,
.me-template-block--compact .me-template-block-actions {
    flex-shrink: 0;
}
.me-contract-section-dialog {
    width: min(820px, calc(100vw - 32px));
    max-width: 820px;
    max-height: min(780px, calc(100vh - 56px));
    overflow-y: auto;
}
.me-contract-section-dialog .form-actions-end .btn {
    min-width: 150px;
    justify-content: center;
}
.me-contract-template-preview {
    width: min(100%, 900px);
    max-width: 900px;
    height: min(1120px, calc(100vh - var(--topnav-offset, 0px) - 250px));
    min-height: 740px;
    padding: 56px 64px;
}
.me-contract-template-preview .me-a4-introduction {
    color: #2f3745;
    line-height: 1.62;
}
.me-contract-template-parties > div:first-child span {
    color: #94a3b8;
}
.me-template-preview-wrap {
    position: sticky;
    top: calc(var(--topnav-offset, 64px) + 18px);
    min-width: 0;
    width: 100%;
}
.me-template-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}
.me-template-preview-head small {
    color: #8491a3;
    font-size: .68rem;
    font-weight: 600;
    text-transform: none;
}
.me-a4-preview {
    min-height: 650px;
    padding: 38px 40px;
    border: 1px solid #d4dce8;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(31, 45, 68, .12);
    color: #20242a;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.45;
}
.me-a4-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 11px;
    border-bottom: 2px solid var(--primary, #1460c8);
    color: #38465a;
}
.me-a4-brand { font-size: 13px; font-weight: 800; }
.me-a4-tax { font-size: 10px; }
.me-a4-preview h2 {
    margin: 26px 0 20px;
    color: #151a22;
    font-size: 17px;
    text-align: center;
}
.me-a4-parties {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 18px;
    padding: 10px 12px;
    background: #f5f7fa;
}
.me-a4-introduction,
.me-a4-section p,
.me-a4-footer {
    white-space: pre-wrap;
}
.me-a4-section { margin-top: 16px; }
.me-a4-section h3 {
    margin: 0 0 5px;
    font-size: 11px;
    text-transform: uppercase;
}
.me-a4-section p { margin: 0; text-align: justify; }
.me-a4-section p.is-placeholder {
    color: #9aa4b2;
    font-style: italic;
}
.me-a4-footer {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid #d7dde6;
}
.me-a4-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    margin-top: 48px;
}
.me-a4-signatures > div {
    padding-top: 28px;
    border-top: 1px solid #717782;
    text-align: center;
}

/* Hoja de encargo por expediente */
.engagement-page {
    max-width: min(1840px, calc(100vw - 32px));
}
.engagement-shell {
    padding: 22px;
}

/* Aviso de "solo escritorio" de la hoja de encargo. Comparte pieza visual con el de la vista
   previa de un modelo (`.pdf-editor-desktop-only`) — mismo icono, mismo tono. */
.engagement-desktop-only {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.engagement-desktop-only h2 {
    margin: 0;
    font-size: 1.1rem;
}

.engagement-desktop-only p {
    margin: 0;
}

/* ⚠️ 1050, no 1024 como la vista previa de un modelo, y tampoco es un numero elegido: es el
   ancho al que ESTA pantalla dejaba de caber en dos columnas (ver el calculo de los minimos de
   `.engagement-layout`). Cada corte se mide contra su propia pantalla; no se copian entre si. */
/* ⚠️ 1050 EXACTO, no 1049.98: la regla que pasa esta pantalla a una sola columna es
   `max-width: 1050px`, asi que a 1050 clavado convivian las dos — se apagaba el corte y se
   pintaba el layout de una columna, justo el que queriamos evitar. Los dos numeros tienen que
   ser el MISMO. */
@media (max-width: 1050px) {
    .engagement-shell {
        display: none;
    }

    .engagement-desktop-only {
        display: flex;
    }
}
.engagement-warning-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}
.engagement-warning-list .accounting-warning { margin: 0; }
.accounting-warning--critical {
    border-color: #f4b5b5;
    background: #fff1f1;
    color: #9f1d1d;
}
.engagement-diff-card {
    margin-bottom: 14px;
    padding: 13px 15px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff7ed;
    color: #7c2d12;
}
.engagement-diff-card p {
    margin: 4px 0 8px;
    color: #9a3412;
}
.engagement-diff-card ul {
    margin: 8px 0 0;
    padding-left: 18px;
}
/* ⚠️ Los minimos de estas dos columnas SUMAN, y esa suma es lo que decide a partir de que
   ancho la pagina saca barra horizontal. Estaban en 440 + 720 + 22 de hueco = 1182px de
   contenido, o sea ~1258px de ventana... pero la pantalla no pasa a una sola columna hasta
   1050. Entre medias quedaba una franja de 200px DESBORDANDO en horizontal, y justo ahi vive
   el portatil de 13" (1180, el suelo del modo escritorio) y el iPad con la barra lateral.
   Ahora los minimos suman 920 + 22 = 942, que entra de sobra en el contenedor que queda a
   1050 (~974px). Si se vuelven a tocar, rehacer esta cuenta: minimo1 + minimo2 + gap tiene
   que caber en (ancho de corte - 32 de la pagina - 44 del padding de la tarjeta). */
.engagement-layout {
    display: grid;
    grid-template-columns: minmax(360px, .72fr) minmax(560px, 1.28fr);
    gap: 22px;
    align-items: start;
    width: 100%;
}
.engagement-editor {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 0;
    min-width: 0;
}
.engagement-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}
.engagement-editor-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}
.engagement-editor-head h2 {
    margin: 0;
    font-size: 1rem;
}
.engagement-editor .field small {
    color: #748094;
    font-size: .75rem;
    line-height: 1.45;
}
.engagement-snapshot-card {
    border: 1px solid #d7e1ef;
    border-radius: 11px;
    overflow: hidden;
}
.engagement-signer-card,
.engagement-client-signer-card {
    overflow: visible;
}
.engagement-snapshot-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    background: #f1f5fb;
}
.engagement-snapshot-head h3 {
    margin: 0;
    color: #334155;
    font-size: .82rem;
}
.engagement-snapshot-head span {
    color: #768397;
    font-size: .7rem;
}
.engagement-signer-card > .field,
.engagement-client-signer-card > .field {
    padding: 14px 16px 8px;
}
.engagement-signer-fields,
.engagement-client-signer-fields {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
    gap: 12px 14px;
}
.engagement-signer-fields.is-hidden,
.engagement-client-signer-fields.is-hidden {
    display: none !important;
}
.engagement-signer-fields .field,
.engagement-client-signer-fields .field {
    min-width: 0;
}
.engagement-signer-fields input,
.engagement-signer-card select,
.engagement-client-signer-fields input,
.engagement-client-signer-card select {
    width: 100%;
    min-width: 0;
}
.engagement-signer-fields input[readonly],
.engagement-client-signer-fields input[readonly] {
    background: #f8fafc;
    color: #334155;
}
.engagement-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
}
.engagement-data-grid > div {
    padding: 11px 13px;
    border-top: 1px solid #e2e8f0;
}
.engagement-data-grid > div:nth-child(odd) {
    border-right: 1px solid #e2e8f0;
}
.engagement-data-grid dt {
    margin-bottom: 4px;
    color: #7a8799;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}
.engagement-data-grid dd {
    margin: 0;
    color: #253248;
    font-size: .82rem;
    font-weight: 700;
}
.engagement-preview-column {
    position: sticky;
    top: 82px;
    min-width: 0;
}
.engagement-document-preview {
    width: min(100%, 900px);
    max-width: 900px;
    height: min(1120px, calc(100vh - var(--topnav-offset, 0px) - 250px));
    min-height: 740px;
    margin: 0 auto;
    padding: 56px 64px;
    font-size: 12px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #cfd8e6;
    border-left: 8px solid var(--primary, #1460c8);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    scrollbar-gutter: stable;
}
.engagement-doc-header {
    align-items: flex-start;
    padding: 18px 22px;
    border: 1px solid #d9e2ef;
    border-left: 4px solid var(--primary, #1460c8);
    border-radius: 4px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 70%);
}
.engagement-doc-header span {
    display: block;
    margin-top: 4px;
    color: #718198;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.engagement-doc-header .me-a4-tax {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    color: #253248;
    font-size: 10px;
}
.engagement-doc-header .me-a4-tax strong {
    font-size: 12px;
}
.engagement-doc-meta {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: -12px 0 22px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.engagement-doc-meta span {
    padding: 4px 7px;
    border: 1px solid #dde6f2;
    border-radius: 999px;
    background: #f8fafc;
}
.engagement-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 19px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.engagement-parties > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.engagement-parties > div:last-child {
    padding-left: 28px;
    border-left: 1px solid #e2e8f0;
}
.engagement-parties strong {
    margin-bottom: 7px;
    color: #475569;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.engagement-parties span {
    color: #1f2937;
    line-height: 1.45;
}
.engagement-parties .engagement-signer-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
.engagement-parties .engagement-signer-lines span {
    line-height: 1.4;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.engagement-economic-preview {
    padding: 16px 18px;
    border: 1px solid #d7e2f2;
    border-radius: 6px;
    background: #f8fbff;
}
.engagement-economic-preview h3 {
    margin: 0 0 14px;
    padding: 0;
    border-bottom: none;
    background: transparent;
    text-transform: uppercase;
    font-weight: 700;
}
.engagement-economic-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin: 0;
}
.engagement-economic-table > div {
    padding: 0;
    border: none;
}
.engagement-economic-table dt {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.engagement-economic-table dd {
    margin: 0;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
}
.engagement-document-preview .me-a4-section {
    margin-top: 20px;
}
.engagement-document-preview .me-a4-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #1f2937;
    font-size: 10px;
    letter-spacing: .04em;
}
.engagement-document-preview .me-a4-section h3::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--primary, #1460c8);
}
.engagement-document-preview .me-a4-section p {
    color: #2f3745;
    line-height: 1.62;
}
.engagement-document-preview .me-a4-signatures {
    margin-top: 66px;
}
.engagement-document-preview .me-a4-signatures > div {
    padding-top: 38px;
    border-top-color: #475569;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}
.exp-contract-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.exp-contract-row,
.exp-contract-empty {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #d7e1ef;
    border-radius: 13px;
    background: #f8fbff;
}
.exp-contract-main {
    min-width: 0;
    flex: 1;
}
.exp-contract-titleline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.exp-contract-warnings {
    display: grid;
    gap: 7px;
    margin-top: 11px;
}
.exp-contract-diff {
    margin-top: 10px;
    color: #9a3412;
    font-size: .85rem;
}
.exp-contract-diff ul {
    margin: 8px 0 0;
    padding-left: 18px;
}
.exp-contract-history {
    margin-top: 11px;
    color: #536173;
    font-size: .85rem;
}
.exp-contract-history summary {
    cursor: pointer;
    font-weight: 700;
}
.exp-contract-history-list {
    display: grid;
    gap: 8px;
    margin-top: 9px;
}
.exp-contract-history-item {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, auto) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid #dbe5f1;
    border-radius: 10px;
    background: #ffffff;
}
.exp-contract-history-item > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}
.exp-contract-actions {
    justify-content: flex-end;
    min-width: 150px;
}
.exp-contract-empty p {
    margin: 4px 0 0;
}

@media (max-width: 1050px) {
    .engagement-layout { grid-template-columns: 1fr; }
    .engagement-preview-column { position: static; }
    .engagement-document-preview {
        width: 100%;
        height: min(860px, 75vh);
        min-height: 620px;
    }
    .exp-contract-row,
    .exp-contract-empty { flex-direction: column; }
    .exp-contract-actions { justify-content: flex-start; }
    .exp-contract-history-item { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .engagement-data-grid,
    .engagement-parties,
    .engagement-economic-table { grid-template-columns: 1fr; }
    .engagement-data-grid > div:nth-child(odd) { border-right: none; }
    .engagement-parties > div:last-child {
        padding-left: 0;
        padding-top: 14px;
        margin-top: 12px;
        border-left: none;
        border-top: 1px solid #e2e8f0;
    }
    .engagement-document-preview {
        height: min(760px, 72vh);
        min-height: 560px;
        padding: 30px 23px;
    }
}

/* ── Sección bufetes ── */
.me-section-head { display: flex; align-items: center; gap: 10px; }
.me-bufete-list {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.me-bufete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.me-bufete-item:last-child { border-bottom: none; }
.me-bufete-avatar {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--primary-soft, #eff6ff);
    color: var(--primary, #1460C8);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 700;
    flex-shrink: 0;
}
.me-bufete-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-bufete-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.me-bufete-sub { font-size: .75rem; color: #9ca3af; }
.me-new-bufete-form { display: flex; gap: 10px; align-items: flex-end; max-width: 480px; }

/* ── Badge bufete activo en secciones ── */
.me-bufete-ctx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary, #1460C8);
    background: var(--primary-soft, #eff6ff);
    border: 1px solid rgba(20,96,200,0.15);
    border-radius: 20px;
    padding: 3px 9px 3px 7px;
}
.me-bufete-ctx-badge svg { opacity: .7; flex-shrink: 0; }

/* ── Bufete list: wrap + inline form ── */
.me-bufete-item-wrap {
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.me-bufete-item-wrap:last-child { border-bottom: none; }
.me-bufete-item-wrap .me-bufete-item { border-bottom: none; background: transparent; }
.me-bufete-edit-btn {
    font-size: .75rem !important;
    padding: 4px 10px !important;
    gap: 4px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.me-bufete-form-row {
    padding: 12px 16px 16px;
    background: #f8faff;
    border-top: 1px solid var(--border);
}
.me-bufete-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* ── Zona de riesgo ── */
.me-danger-section {
    border-top: 2px solid #fecaca !important;
    background: #fffafa;
    border-radius: 0 0 var(--radius, 12px) var(--radius, 12px);
}
.me-danger-label { color: #dc2626 !important; }
.me-danger-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.me-danger-btn { color: #dc2626 !important; border-color: #fca5a5 !important; }
.me-danger-btn:hover { background: #fef2f2 !important; border-color: #dc2626 !important; }

/* ── Responsive mi-empresa ── */
@media (max-width: 1050px) {
    .me-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .me-identity-cols { grid-template-columns: 1fr; }
    .me-contact-grid { grid-template-columns: 1fr 1fr; }
    .me-uploads { grid-template-columns: 1fr 1fr; }
    .me-template-workspace { grid-template-columns: 1fr; }
    .me-template-preview-wrap { position: static; }
}
@media (max-width: 640px) {
    .me-tabs { grid-template-columns: 1fr; }
    .me-bufete-form-grid { grid-template-columns: 1fr; }
    .me-contract-summary { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .me-cover { height: 90px; }
    .me-hero-body { padding: 0 14px 14px; gap: 10px; }
    .me-contact-grid { grid-template-columns: 1fr; }
    .me-color-block { grid-template-columns: 1fr; }
    .me-uploads { grid-template-columns: 1fr; }
    .me-danger-actions { flex-direction: column; }
    .me-new-bufete-form { flex-direction: column; max-width: 100%; }
    .me-template-block--compact .me-template-block-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .me-template-block--compact .me-template-block-actions {
        width: 100%;
    }
    .me-template-block--compact .me-template-block-actions {
        justify-content: flex-start;
        margin-left: 0;
    }
    .me-template-blocks-head { align-items: flex-start; flex-direction: column; }
    .me-a4-preview { min-height: 540px; padding: 26px 22px; }
    .me-contract-template-preview {
        height: min(760px, 72vh);
        min-height: 540px;
    }
}


/* ── Migration management ── */
/* compact top card */
.mig-compact-card { padding: 14px 20px; }
.mig-inline-stats {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mig-inline-label {
    font-size: .75rem; font-weight: 700; color: var(--text-muted, #6b7280);
    text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.mig-inline-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.mig-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; font-size: .78rem;
    border: 1.5px solid var(--border-color, #e5e7eb);
    background: var(--surface-2, #f9fafb); color: var(--text-muted, #6b7280);
}
.mig-pill strong { font-weight: 700; color: var(--text-primary, #111); }
.mig-pill.warn.lit { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.mig-pill.warn.lit strong { color: #b45309; }
.mig-pill.err.lit { border-color: #fca5a5; background: #fff5f5; color: #dc2626; }
.mig-pill.err.lit strong { color: #dc2626; }
.mig-pill.ok strong { color: #16a34a; }
.mig-pill.ok.lit { border-color: #86efac; background: #f0fdf4; color: #16a34a; }
.mig-pill.ok.lit strong { color: #16a34a; }
.mig-inline-last { font-size: .76rem; margin-left: auto; white-space: nowrap; }
.mig-compact-divider { height: 1px; background: var(--border-color, #e5e7eb); margin: 12px 0; }

/* upload inline row */
.mig-inline-upload {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mig-file-pill {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 10px;
    border: 1.5px dashed var(--border-color, #d1d5db);
    background: var(--surface-2, #f9fafb); font-size: .83rem;
    color: var(--text-muted, #6b7280); cursor: pointer;
    transition: border-color .15s, background .15s;
    white-space: nowrap; flex-shrink: 0;
}
.mig-file-pill svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.mig-file-pill:hover, .mig-file-pill.drag-over { border-color: #1f7be6; background: #eff6ff; color: #1f7be6; }
.mig-file-pill.has-file { border-color: #22c55e; border-style: solid; background: #f0fdf4; color: #15803d; }
.mig-file-pill input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* segmented control (iOS UISegmentedControl) */
.mig-seg {
    display: inline-flex; flex-shrink: 0;
    background: rgba(118,118,128,.12);
    border-radius: 8px; padding: 2px; gap: 1px;
}
.mig-seg-opt {
    position: relative; padding: 5px 14px;
    border: none; border-radius: 6px; background: transparent;
    font-size: .78rem; font-weight: 500; color: #555;
    cursor: pointer; white-space: nowrap;
    transition: color .12s;
    letter-spacing: -.01em;
}
.mig-seg-opt:hover { color: #111; }
.mig-seg-opt.active {
    background: #fff;
    color: #111; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
}

/* empresa select inline */
.mig-empresa-select {
    appearance: none; -webkit-appearance: none;
    padding: 5px 26px 5px 11px; border-radius: 6px;
    border: 1.5px solid var(--border-color, #e5e7eb);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    font-size: .78rem; font-weight: 500; color: #111;
    cursor: pointer; outline: none; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    min-width: 140px;
}
.mig-empresa-select:focus { border-color: #1f7be6; box-shadow: 0 0 0 3px rgba(31,123,230,.12); }

.mig-upload-submit { flex-shrink: 0; }


/* legacy file-drop-zone (kept for other uses) */

.mig-coverage { font-weight: 600; }
.mig-script-name { font-size: .82rem; }
.mig-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; }
.mig-badge svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; }
.mig-actions-cell { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row-error { background: #fff5f5; }
.row-warn  { background: #fffbeb; }



.mig-warning {
    display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0;
    font-size: .82rem; color: var(--text-muted, #6b7280);
    background: #fefce8; border: 1px solid #fde68a;
    border-radius: 8px; padding: 10px 14px; margin: 0;
}
.mig-warning svg { width: 16px; height: 16px; flex-shrink: 0; stroke: #b45309; fill: none; stroke-width: 2; stroke-linecap: round; margin-top: 1px; }
.mig-warning code { font-size: .8rem; background: #fef9c3; padding: 1px 4px; border-radius: 3px; }

.file-drop-zone {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    border: 2px dashed var(--border-color, #d1d5db);
    border-radius: 10px; padding: 24px 16px; cursor: pointer;
    background: var(--surface-2, #f9fafb); transition: border-color .15s, background .15s;
    min-height: 90px; text-align: center;
}
.file-drop-zone:hover, .file-drop-zone.drag-over { border-color: #1f7be6; background: #eff6ff; }
.file-drop-icon { width: 28px; height: 28px; stroke: var(--text-muted, #9ca3af); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.file-drop-label { font-size: .84rem; color: var(--text-muted, #6b7280); pointer-events: none; }
.file-drop-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-drop-zone.has-file { border-color: #22c55e; background: #f0fdf4; }
.file-drop-zone.has-file .file-drop-icon { stroke: #16a34a; }
.file-drop-zone.has-file .file-drop-label { color: #15803d; font-weight: 600; }

.mig-error-trigger { cursor: pointer; }

/* ── Script detail modal ── */
.mig-detail-modal {
    display: none; position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,.45); align-items: flex-start; justify-content: center;
    padding: 60px 16px 16px; overflow-y: auto;
}
.mig-detail-modal.open { display: flex; }
.mig-detail-box {
    background: var(--surface-1, #fff); border-radius: 16px;
    width: 100%; max-width: 860px; box-shadow: 0 24px 64px rgba(0,0,0,.22);
    overflow: hidden;
}
.mig-detail-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.mig-detail-header h3 { margin: 0; font-size: 1rem; }
.mig-detail-content { padding: 20px 24px; }

/* ── Error inline modal ── */
.mig-error-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.45); align-items: center; justify-content: center;
}
.mig-error-modal.open { display: flex; }
.mig-error-box {
    background: var(--surface-1, #fff); border-radius: 14px;
    padding: 24px; max-width: 640px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.mig-error-box h3 { margin: 0 0 12px; font-size: 1rem; }
.mig-error-box pre {
    background: #1e1e2e; color: #cdd6f4; border-radius: 8px;
    padding: 14px; font-size: .78rem; overflow: auto; max-height: 300px; margin: 0 0 16px;
    white-space: pre-wrap; word-break: break-all;
}

@media (max-width: 800px) {
    .mig-upload-grid { grid-template-columns: 1fr; }
    .mig-form-footer { flex-direction: column; }
}


/* ── Mig colapsable ── */
.mig-collapse-card { padding: 0; overflow: hidden; }
.mig-collapse-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 16px 20px; background: none; border: none;
    cursor: pointer; text-align: left;
}
.mig-collapse-trigger:hover { background: var(--surface-2, #f9fafb); }
.mig-collapse-chevron {
    width: 18px; height: 18px; stroke: var(--text-muted, #9ca3af);
    fill: none; stroke-width: 2; stroke-linecap: round;
    transition: transform .2s;
}
.mig-collapse-trigger.open .mig-collapse-chevron { transform: rotate(180deg); }
.mig-collapse-body { padding: 0 20px 16px; }

/* ── Mig detail modal tabs ── */
.mig-detail-tabs { display: flex; gap: 4px; margin-left: 12px; }
.mig-detail-tab {
    padding: 5px 14px; border-radius: 8px; border: 1.5px solid var(--border-color, #e5e7eb);
    background: none; font-size: .82rem; font-weight: 500;
    color: var(--text-muted, #6b7280); cursor: pointer; transition: all .15s;
}
.mig-detail-tab.active {
    border-color: #1f7be6; background: #1f7be6; color: #fff;
}
.mig-detail-header {
    display: flex; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border-color, #e5e7eb);
    gap: 0;
}
.mig-detail-header h3 { margin: 0; font-size: .95rem; flex-shrink: 0; }
.mig-detail-header .mig-detail-close { margin-left: auto; }

/* ── SQL viewer ── */
.mig-sql-pre {
    background: #1e1e2e; color: #cdd6f4; border-radius: 10px;
    padding: 16px; font-size: .78rem; line-height: 1.6;
    overflow: auto; max-height: 420px; margin: 0;
    white-space: pre; word-break: normal;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── Backup: barra de control ── */
.bk-ctrl-btns { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.bk-ctrl-btns .btn.active { background: #eff6ff; border-color: #1f7be6; color: #1f7be6; }
.bk-ctrl-panel { padding-top: 2px; }
.bk-ctrl-form {
    display: flex; align-items: center; gap: 8px 12px;
    flex-wrap: wrap; padding: 4px 0;
}
.bk-ctrl-sep { width: 1px; height: 20px; background: var(--border-color, #e5e7eb); flex-shrink: 0; }
.bk-ctrl-switch { flex-shrink: 0; gap: 8px; }
.bk-ctrl-switch-label { font-size: .78rem; white-space: nowrap; }
.bk-ctrl-inline-label { font-size: .75rem; color: var(--text-muted, #9ca3af); white-space: nowrap; flex-shrink: 0; }
.bk-ctrl-summary { white-space: nowrap; }
.bk-time-input { width: 100px; }
.bk-ctrl-time-group { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.bk-weekday-select { min-width: 110px; }
.bk-retention-input { width: 64px; text-align: center; }

/* ── Backup: titulos descriptivos de seccion (nombre + una linea de contexto) ── */
.bk-section-title { font-size: .98rem; font-weight: 700; color: var(--text-primary, #111); margin: 0 0 2px; }
.bk-section-subtitle { font-size: .78rem; color: var(--text-muted, #6b7280); margin: 0 0 14px; }
.bk-section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.bk-section-head .bk-section-subtitle { margin-bottom: 0; }
.bk-section-head .bk-panel-actions { flex-shrink: 0; }

/* ── Backup: configuracion (programacion + almacenamiento) en 2 columnas responsive ── */
.bk-config-grid { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.bk-config-col { flex: 1 1 320px; min-width: 260px; }
.bk-config-col-title {
    font-size: .75rem; font-weight: 700; color: var(--text-muted, #6b7280);
    text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.bk-config-sep { width: 1px; align-self: stretch; background: var(--border-color, #e5e7eb); min-height: 40px; }
@media (max-width: 720px) {
    .bk-config-sep { display: none; }
}

/* ── Backup: fleet layout ── */
.bk-fleet-card { padding: 0; overflow: hidden; }
.bk-fleet-header { padding: 20px 28px 4px; }
.bk-fleet-header .bk-section-title { margin-bottom: 0; }
.bk-fleet-header .bk-section-subtitle { margin-bottom: 0; }
.bk-fleet-layout { display: flex; min-height: 200px; }

/* Sidebar lista de BDs */
.bk-db-sidebar {
    width: 210px; flex-shrink: 0;
    border-right: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-2, #f9fafb);
    display: flex; flex-direction: column;
    overflow-y: auto; max-height: 520px;
}
.bk-db-sidebar-title {
    padding: 12px 16px 8px;
    font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted, #9ca3af);
}
.bk-db-tab {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 16px; border: none; background: none;
    cursor: pointer; text-align: left;
    border-left: 3px solid transparent;
    transition: background .1s, border-color .1s;
}
.bk-db-tab:hover { background: var(--border-color, #f3f4f6); }
.bk-db-tab.active {
    background: #fff; border-left-color: #1f7be6;
}
.bk-db-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #d1d5db;
}
.bk-db-dot.ok { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.bk-db-tab-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bk-db-tab-name { font-size: .82rem; font-weight: 600; color: var(--text-primary, #111); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-db-tab-sub { font-size: .7rem; color: var(--text-muted, #9ca3af); white-space: nowrap; }
.bk-db-tab.active .bk-db-tab-name { color: #1f7be6; }

/* Contenido derecho */
.bk-db-content { flex: 1; min-width: 0; overflow: hidden; }

.bk-db-panel { padding: 10px 20px 16px; }
.bk-db-panel-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.bk-db-panel-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-db-panel-name {
    font-size: .92rem; font-weight: 700;
    font-family: ui-monospace, monospace; color: var(--text-primary, #111);
}
.bk-panel-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.bk-restore-form { display: flex; gap: 6px; align-items: center; }
.bk-fecha-select {
    width: auto; max-width: 130px; font-size: .78rem; padding: 5px 8px;
    border-radius: 6px; border: 1px solid var(--border-color, #d1d5db);
    background: #fff; color: var(--text-primary, #111);
}
.bk-panel-actions .btn.active { background: #fff7ed; border-color: #f97316; color: #ea580c; }
.bk-restore-inline {
    margin-bottom: 14px; padding: 10px 14px;
    background: #fff7ed; border: 1px solid #fed7aa;
    border-radius: 8px;
}
.bk-detail-row td { padding: 0 12px 10px; border-top: none; }
.bk-detail-content {
    padding: 8px 12px; border-radius: 6px;
    background: #f8fafc; border: 1px solid var(--border-color, #e5e7eb);
    font-size: .78rem; line-height: 1.5;
    white-space: normal; word-break: break-word;
}

@media (max-width: 860px) {
    .mig-inline-last { display: none; }
    .mig-inline-upload { gap: 8px; }
    .bk-ctrl-form { flex-wrap: wrap; }
}

/* ── Fila de documento bloqueada en el panel de firmas ──────────────────────
   Un documento que ya viaja en un sobre vivo se sigue viendo, apagado y con el motivo
   debajo (misma regla que las opciones bloqueadas de los desplegables: nada desaparece
   en silencio). El interruptor se apaga de verdad — `pointer-events: none` sobre la fila
   entera, porque el <input> real esta oculto y el clic lo recibe el <label>. */
.ios-list-row.is-blocked {
    opacity: .62;
    cursor: not-allowed;
    pointer-events: none;
}

.ios-list-row.is-blocked .switch-track {
    background: #e2e7ee;
    border-color: #d3dae4;
}

/* Ambar, igual que `.ios-select-option-reason`: no es un error, es un estado. */
.ios-list-row-reason {
    display: block;
    margin-top: 2px;
    color: #714800;
}


/* ══════════════════════════════════════════════════════════════════════════
   LANDING 2026-09 — hero de extranjeria, metricas con rotulo y nota de modulo
   Va al final del fichero a proposito: en CSS gana la ultima regla de igual
   especificidad, y estas tienen que pisar las de mas arriba. Por eso los
   ajustes por ancho van en @media PROPIOS aqui dentro y no sueltos: una regla
   sin media query puesta al final anularia las @media anteriores.
   ══════════════════════════════════════════════════════════════════════════ */

/* El H1 nuevo tiene 79 caracteres frente a los 39 del anterior, que iba
   partido a mano con <br>. Sin ayuda se queda en dos lineas muy desiguales
   (la ultima con una sola palabra). max-width en ch fija cuantos caracteres
   caben por linea y text-wrap: balance reparte el resto entre las lineas.
   balance no lo soporta todo navegador; donde no llega, el max-width solo ya
   da un reparto aceptable. */
.lp-hero h1 {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}
@media (max-width: 700px) {
    /* En movil el ancho lo manda la pantalla, no el numero de caracteres: con
       20ch el titular se estrangula a media columna. */
    .lp-hero h1 { max-width: 100%; }
}

/* ── Bloque de metricas: rotulo + tira ─────────────────────────────────── */
.lp-hero-stats-block {
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lp-hero-stats-title {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(180,210,255,0.55);
}
/* El margin-top vivia en la tira; ahora lo lleva el bloque, o se sumarian los
   dos y el rotulo quedaria despegado del hero. */
.lp-hero-stats-block .lp-hero-stats { margin-top: 0; }
/* 600px daban de sobra con etiquetas de una palabra ("Clientes"). Las nuevas
   son frases ("Modelos juridicos en catalogo"), asi que la tira necesita mas
   sitio o cada columna parte el texto en tres lineas. */
.lp-hero-stats-block .lp-hero-stats { max-width: 900px; }
/* Las etiquetas antiguas eran de una palabra ('Clientes') y la regla base les pone
   white-space: nowrap. Con frases ('Modelos juridicos en catalogo') eso impedia el
   salto de linea y las etiquetas de dos columnas contiguas se pegaban entre si
   ('DOCUMENTOS GENERADOSMODELOS JURIDICOS...'). Ademas max-width no hace nada sobre un
   span inline: hace falta display:block. */
.lp-hero-stats-block .lp-hero-stat span {
    display: block;
    white-space: normal;
    max-width: 15ch;
    text-align: center;
    line-height: 1.35;
}

@media (max-width: 900px) {
    /* Cuatro columnas no caben: 2x2, y el separador vertical deja de tener
       sentido en cuanto hay dos filas. */
    .lp-hero-stats-block .lp-hero-stats { max-width: 420px; }
    .lp-hero-stats-block .lp-hero-stat { flex: 1 1 45%; padding: 10px 8px; }
    .lp-hero-stats-block .lp-hero-stat-sep { display: none; }
}

/* ── Nota de alcance dentro de una tarjeta de modulo ───────────────────── */
/* "Cobros y control economico" NO es facturacion fiscal: no hay factura, ni
   serie, ni VeriFactu. La aclaracion se enseña en la propia tarjeta, discreta
   pero legible — no en un tooltip ni en letra pequeña ilegible. */
.lp-module-note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.5;
}
/* Los <p> de las tarjetas de modulo se recolorean mas arriba con selectores
   de mayor peso (body.landing-body .lp-module-card p), asi que la nota
   necesita el mismo peso para no heredar ese color. */
body.landing-body .lp-module-card p.lp-module-note {
    color: rgba(255,255,255,0.40);
}


/* ── Hero: la variante que toca segun el ancho real */
/* El <link rel="preload"> de landing.html ofrece 960w y 1920w con imagesizes="100vw", asi
   que el navegador elige la de 960 mientras (ancho CSS x densidad) <= 960. El corte del CSS
   tiene que ser EL MISMO numero o se descargan las dos: medido con el corte en 700, la home
   a 800px pesaba 962 KB (mas que a 1470) porque el preload traia la de 960 y el CSS pedia
   ademas la de 1920. */
@media (max-width: 960px) {
    .lp-hero-bg { background-image: url('/images/landing/scene_07-960.webp'); }
}

/* ── Capturas reales del producto ──────────────────────────────────────── */
/* Sustituyen a los mockups HTML que habia en Automatizacion y en /expediente.
   Marco claro y sombra para que la captura se despegue del fondo oscuro de la
   landing sin necesidad de tratarla en el editor de imagen. */
.lp-auto-shot,
.lp-exp-shot {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    background: #fff;
}
.lp-auto-shot img,
.lp-exp-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.lp-auto-shot figcaption,
.lp-exp-shot figcaption {
    padding: 10px 16px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.62);
    background: rgba(8,18,38,0.92);
    border-top: 1px solid rgba(255,255,255,0.10);
}
/* La captura del editor es alta (un A4 completo) y vive dentro de .lp-auto-visual, que es
   un flex con align-items: stretch. Medido en el navegador: la figura se estiraba a 540px
   con 310px de contenido, y esos 230px sobrantes se veian como una banda blanca debajo del
   pie de foto (el fondo blanco de la propia figura). align-self la devuelve a su tamaño.
   El aspect-ratio recorta por abajo, donde el formulario ya no lleva datos rellenados, y
   4/5 aprovecha casi toda la altura disponible de la columna. */
.lp-auto-shot {
    align-self: center;
    width: 100%;
}
.lp-auto-shot img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
}

/* ══════════════════════════════════════════════════════════════════════════
   /expediente — composicion del bloque principal
   La pagina heredaba el molde generico: contenedor de 1200px y .lp-split a
   1fr 1fr. Con el mockup antiguo (una maqueta HTML que se estiraba) cuadraba,
   pero con una captura real apaisada la mitad derecha se quedaba corta: la
   imagen bajaba a ~560px de ancho y ~150 de alto y quedaba flotando arriba a
   la derecha con cientos de pixeles vacios debajo. Aqui solo se recompone ese
   bloque; fondo, nav, copy, lista, CTA y footer no se tocan.
   ══════════════════════════════════════════════════════════════════════════ */

/* Mas ancho util SOLO en esta pagina: .lp-section-inner (1200px) la comparten
   las cinco paginas publicas, asi que el ensanchado va acotado con el
   contenedor de seccion propio o se descuadran home, planes y contacto. */
.lp-expediente .lp-section-inner { max-width: 1400px; }

/* ⚠️ El reparto de columnas va DENTRO de un @media min-width, no suelto.
   Escrito sin media query anulaba el "@media (max-width:1100px) .lp-split {
   grid-template-columns: 1fr }" de mas arriba — misma especificidad y despues
   en el fichero — y la pagina se quedaba en DOS columnas hasta en movil:
   medido a 390px, la columna de texto caia a 134px de ancho y la captura a
   182px. Es el gotcha de siempre: una regla sin media query al final del
   fichero pisa las @media anteriores. */
@media (min-width: 1101px) {
    /* Texto ~42% / visual ~58%: el texto no necesita mas de ~560px para leerse
       y todo lo que sobra rinde mas en la captura. minmax(0, …) en las dos
       columnas para que ninguna pueda desbordar por su contenido minimo. */
    .lp-expediente .lp-split {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
        gap: clamp(32px, 4vw, 56px);
    }
    /* La columna de texto es bastante mas alta que la captura (709 vs 380 px
       medidos a 1470). Con el align-items: start que trae body.landing-body,
       todo ese sobrante se acumulaba DEBAJO de la imagen y se leia como un
       error de maquetacion. Centrada, el aire se reparte arriba y abajo y la
       composicion se lee equilibrada. Hace falta repetir body.landing-body
       para ganar en especificidad a esa regla. */
    body.landing-body .lp-expediente .lp-split { align-items: center; }
}

/* ⚠️ El apilado generico de .lp-split esta en 900px, no en 1100 (comprobado en
   el navegador, no asumido). Eso dejaba la franja 901-1100 —un iPad en
   horizontal— con dos columnas de ~430px: la captura se quedaba en 428x206 y
   sobraban 488px debajo del texto, que es justo el defecto que se venia a
   corregir. Para esta pagina el apilado sube a 1100 (punto de corte que el
   sistema ya usa): a 1024 la captura pasa a ocupar los ~920px de ancho de la
   pagina en vez de 428. */
@media (max-width: 1100px) {
    .lp-expediente .lp-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* La captura manda en su columna: ancho completo, sin tope artificial. */
.lp-exp-shot { width: 100%; }

/* ─────────────────────────────────────────────
   /configuracion/expedientes — tipos y estados del tramite
   Una tarjeta por tipo con sus estados en filas (no tabla: en movil cada fila se apila sin
   scroll horizontal). Las acciones van a la derecha, a su tamano.
   ───────────────────────────────────────────── */
.cfg-tipos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cfg-tipo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-margin-top: 90px;
}

.cfg-tipo--inactivo {
    opacity: .82;
}

.cfg-tipo-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cfg-tipo-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.cfg-tipo-titulo h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

.cfg-tipo-meta {
    margin: 2px 0 0;
    font-size: .82rem;
}

.cfg-acciones {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cfg-acciones .btn,
.cfg-acciones form {
    flex: 0 0 auto;
}

.cfg-estados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cfg-estado {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
}

.cfg-estado--inactivo .cfg-estado-nombre {
    color: var(--muted);
}

.cfg-estado-orden {
    color: var(--muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.cfg-estado-texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-wrap: anywhere;
}

.cfg-estado-nombre {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cfg-estado-meta {
    font-size: .8rem;
}

.cfg-vacio {
    margin: 0;
}

.cfg-dialog {
    width: min(520px, 100%);
    max-height: min(88vh, 680px);
    overflow: auto;
}

.cfg-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.cfg-check input {
    width: auto;
}

@media (max-width: 760px) {
    .cfg-estado {
        grid-template-columns: minmax(0, 1fr);
    }

    .cfg-estado-orden {
        display: none;
    }

    .cfg-estado .cfg-acciones {
        justify-content: flex-start;
    }
}