/* ============================================
   Jobers Gastos - Diseño Profesional
   Colores corporativos Jobers (verde)
   ============================================ */

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

:root {
    --primary: #1a6b3c;
    --primary-light: #22874d;
    --primary-dark: #145530;
    --primary-subtle: #e8f5ec;
    --accent: #6b8e23;
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --success: #16a34a;
    --bg: #f3f4f6;
    --sidebar-bg: #1a6b3c;
    --sidebar-hover: rgba(255,255,255,0.1);
    --sidebar-text: #94a3b8;
    --sidebar-active: #22874d;
    --topbar-bg: #1a6b3c;
    --card-bg: #ffffff;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --text: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --filter-bg: #fafbfc;
    --row-hover: #f0fdf4;
    --row-selected: #dcfce7;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --radius: 8px;
    --radius-lg: 12px;
    /* AG Grid */
    --grid-header-bg: linear-gradient(180deg, #22874d 0%, #1a6b3c 100%);
    --grid-header-fg: #e2e8f0;
    --grid-header-hover: rgba(255,255,255,0.08);
    --grid-header-icon: #94a3b8;
    --grid-header-sorted: #4ade80;
    --grid-bg: #ffffff;
    --grid-fg: #111827;
    --grid-row-hover: #f0fdf4;
    --grid-row-selected: #dcfce7;
    --grid-border: #e5e7eb;
    --grid-row-border: #f3f4f6;
    --grid-odd-row: #ffffff;
}

/* --- Tema Oscuro --- */
[data-theme="oscuro"] {
    /* Base */
    --bg: #0f172a;
    --card-bg: #1e293b;
    --border: #334155;
    --border-light: #1e293b;
    --filter-bg: #0f172a;
    --input-bg: #0f172a;
    /* Texto */
    --text: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    /* Colores principales */
    --primary: #22c55e;
    --primary-light: #4ade80;
    --primary-dark: #16a34a;
    --primary-subtle: #052e16;
    --accent: #84cc16;
    --danger: #ef4444;
    --danger-light: #450a0a;
    --warning: #f59e0b;
    --success: #22c55e;
    /* Layout */
    --sidebar-bg: #1e293b;
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-text: #94a3b8;
    --sidebar-active: #334155;
    --topbar-bg: #1e293b;
    --row-hover: #1e3a2f;
    --row-selected: #052e16;
    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
    /* AG Grid */
    --grid-header-bg: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    --grid-header-fg: #e2e8f0;
    --grid-header-hover: rgba(255,255,255,0.1);
    --grid-header-icon: #94a3b8;
    --grid-header-sorted: #4ade80;
    --grid-bg: #1e293b;
    --grid-fg: #e2e8f0;
    --grid-row-hover: #1e3a2f;
    --grid-row-selected: #052e16;
    --grid-border: #475569;
    --grid-row-border: #334155;
    --grid-odd-row: #1e293b;
}

/* --- Tema Azul Corporativo --- */
[data-theme="azul"] {
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-subtle: #eff6ff;
    --accent: #0ea5e9;
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --success: #16a34a;
    --bg: #f0f4f8;
    --sidebar-bg: #1e3a5f;
    --sidebar-hover: rgba(255,255,255,0.1);
    --sidebar-text: #94a3b8;
    --sidebar-active: #2563eb;
    --topbar-bg: #1e3a5f;
    --card-bg: #ffffff;
    --border: #d1d5db;
    --border-light: #f0f4f8;
    --text: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --filter-bg: #f8fafc;
    --row-hover: #eff6ff;
    --row-selected: #dbeafe;
    --grid-header-bg: linear-gradient(180deg, #3b82f6 0%, #1e3a5f 100%);
    --grid-header-fg: #e2e8f0;
    --grid-header-hover: rgba(255,255,255,0.12);
    --grid-header-icon: #93c5fd;
    --grid-header-sorted: #60a5fa;
    --grid-bg: #ffffff;
    --grid-fg: #111827;
    --grid-row-hover: #eff6ff;
    --grid-row-selected: #dbeafe;
    --grid-border: #d1d5db;
    --grid-row-border: #f0f4f8;
    --grid-odd-row: #ffffff;
}

/* --- Tema Claro (minimalista) --- */
[data-theme="claro"] {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --primary-subtle: #eef2ff;
    --accent: #a78bfa;
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --success: #16a34a;
    --bg: #fafafa;
    --sidebar-bg: #ffffff;
    --sidebar-hover: #f3f4f6;
    --sidebar-text: #6b7280;
    --sidebar-active: #eef2ff;
    --topbar-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e5e7eb;
    --border-light: #f9fafb;
    --text: #111827;
    --text-secondary: #374151;
    --text-muted: #9ca3af;
    --filter-bg: #fafafa;
    --row-hover: #f9fafb;
    --row-selected: #eef2ff;
    --grid-header-bg: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
    --grid-header-fg: #ffffff;
    --grid-header-hover: rgba(255,255,255,0.15);
    --grid-header-icon: #c7d2fe;
    --grid-header-sorted: #fbbf24;
    --grid-bg: #ffffff;
    --grid-fg: #111827;
    --grid-row-hover: #f9fafb;
    --grid-row-selected: #eef2ff;
    --grid-border: #e5e7eb;
    --grid-row-border: #f9fafb;
    --grid-odd-row: #ffffff;
}

/* Tema Claro: sidebar y topbar con texto oscuro */
[data-theme="claro"] .topbar { border-bottom: 1px solid var(--border); }
[data-theme="claro"] .topbar-title { color: var(--primary); }
[data-theme="claro"] .topbar-user { color: var(--text-secondary); }
[data-theme="claro"] .topbar-ctx { color: var(--text); background: var(--primary-subtle); }
[data-theme="claro"] .sidebar { border-right: 1px solid var(--border); }
[data-theme="claro"] .nav-title { color: var(--text-secondary); }
[data-theme="claro"] .nav-title:hover { color: var(--primary); background: var(--primary-subtle); }
[data-theme="claro"] .nav-section.open > .nav-title { color: var(--primary); }
[data-theme="claro"] .nav-item { color: var(--text-muted); }
[data-theme="claro"] .nav-item:hover { background: var(--primary-subtle); color: var(--primary); }
[data-theme="claro"] .nav-item.active { background: var(--primary-subtle); color: var(--primary); border-left-color: var(--primary); }
[data-theme="claro"] .sidebar-toggle { border-bottom: 1px solid var(--border); }
[data-theme="claro"] .toggle-arrow { color: var(--text-muted); }

/* Tema Oscuro: elementos de formulario */
[data-theme="oscuro"] .form-group input,
[data-theme="oscuro"] .form-group select,
[data-theme="oscuro"] .form-group textarea,
[data-theme="oscuro"] .dash-filter-group select,
[data-theme="oscuro"] .detail-panel,
[data-theme="oscuro"] input[type="date"] {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="oscuro"] .detail-panel { background: var(--card-bg); }
[data-theme="oscuro"] option { background: var(--input-bg); color: var(--text); }
[data-theme="oscuro"] .btn { background: var(--card-bg); color: var(--text); border-color: var(--border); }
[data-theme="oscuro"] .btn:hover { background: var(--border); }
[data-theme="oscuro"] .modal-overlay .modal-box { background: var(--card-bg); color: var(--text); }
[data-theme="oscuro"] .toast { background: var(--card-bg); color: var(--text); }

/* Panel de usuario unificado */
.user-menu-wrapper {
    position: relative;
}
.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 3px 10px 3px 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.user-menu-btn:hover { background: rgba(255,255,255,0.18); }
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.user-menu-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu-arrow {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}
[data-theme="claro"] .user-menu-btn { background: var(--primary-subtle); border-color: var(--border); }
[data-theme="claro"] .user-menu-btn:hover { background: #e0e7ff; }
[data-theme="claro"] .user-menu-name { color: var(--text); }
[data-theme="claro"] .user-menu-arrow { color: var(--text-muted); }

.user-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    min-width: 240px;
    overflow: hidden;
}
.user-menu-dropdown.open { display: block; }

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}
.user-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
.user-menu-fullname { font-size: 14px; font-weight: 600; color: var(--text); }
.user-menu-ctx { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.user-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.user-menu-item:hover { background: var(--primary-subtle); }
.user-menu-theme-label {
    cursor: default;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 16px 4px;
}
.user-menu-theme-label:hover { background: none; }
.user-menu-themes {
    padding: 0 8px 6px;
}
.user-menu-logout { color: var(--danger); }
.user-menu-logout:hover { background: var(--danger-light); }

/* Opciones de tema dentro del panel */
.theme-option {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    transition: background 0.12s;
}
.theme-option:hover { background: var(--primary-subtle); }
.theme-option.active { font-weight: 600; color: var(--primary); background: var(--primary-subtle); }
.theme-option-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   LOGIN
   Pensado desde el movil: la marca no desaparece nunca.
   ============================================ */
.login-container {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;   /* dvh evita el salto al ocultarse la barra del navegador */
}

/* ---- Panel de marca ---- */
.login-left {
    flex: 1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 56px;
    background: linear-gradient(160deg, #06140c 0%, #0f2a18 35%, #1a5c2e 100%);
}

/* Dos manchas de luz que respiran muy despacio. Puro ambiente:
   van detras del contenido (z-index -1) y se paran solas si el
   sistema pide menos animacion. */
.login-left::before,
.login-left::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}

.login-left::before {
    top: -25%; right: -20%;
    width: 70%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(74,222,128,0.30), transparent 70%);
    animation: login-aurora 19s ease-in-out infinite alternate;
}

.login-left::after {
    bottom: -22%; left: -15%;
    width: 62%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(107,142,35,0.26), transparent 70%);
    animation: login-aurora 25s ease-in-out infinite alternate-reverse;
}

@keyframes login-aurora {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(5%, 7%, 0) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .login-left::before,
    .login-left::after { animation: none; }
}

.login-brand {
    position: relative;
    z-index: 1;
}

.login-logo {
    width: 200px;
    max-width: 60vw;
    margin-bottom: 14px;
    filter: brightness(1.1);
}

.login-app-name {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.6px;
    margin-bottom: 6px;
}

.login-version {
    display: inline-block;
    font-size: 12px;
    color: #4ade80;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 3px 10px;
    border: 1px solid rgba(74,222,128,0.3);
    border-radius: 999px;
    background: rgba(74,222,128,0.08);
}

.login-footer {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
}

/* ---- Panel del formulario ---- */
.login-right {
    width: 460px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    box-shadow: -4px 0 24px rgba(0,0,0,0.10);
}

.login-box {
    width: 350px;
    padding: 20px 0;
}

.login-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 26px;
}

/* Campos del login: mas aire y esquinas mas suaves que en el resto
   de la aplicacion, que es una pantalla de formularios densos. */
.login-box .form-group { margin-bottom: 18px; }

.login-box .form-group label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.login-box .form-group input,
.login-box .form-group select {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    background: var(--filter-bg);
}

.login-box .form-group input:focus,
.login-box .form-group select:focus {
    background: var(--card-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(26,107,60,0.10);
}

/* Ver/ocultar contraseña: en el movil se teclea a ciegas y con prisa */
.input-clave { position: relative; }
.input-clave input { padding-right: 46px; }

.btn-ver-clave {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.btn-ver-clave:hover {
    color: var(--primary);
    background: var(--primary-subtle);
}

.login-box .login-btn {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    margin-top: 6px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    box-shadow: 0 4px 14px rgba(26,107,60,0.28);
    transition: filter 0.2s, box-shadow 0.2s, transform 0.12s;
}

.login-box .login-btn:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 20px rgba(26,107,60,0.34);
}

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

/* ---- Movil ----
   El panel de marca deja de ser una columna y pasa a ser una cabecera:
   el logo sigue ahi, que era justo lo que se perdia antes. La tarjeta
   del formulario sube y monta sobre el degradado. */
@media (max-width: 900px) {
    .login-container { flex-direction: column; }

    .login-left {
        flex: 0 0 auto;
        align-items: center;
        text-align: center;
        justify-content: flex-start;
        padding: calc(36px + env(safe-area-inset-top)) 24px 60px;
    }

    .login-logo { width: 160px; margin-bottom: 10px; }
    .login-app-name { font-size: 22px; }
    .login-footer { display: none; }

    .login-right {
        width: 100%;
        flex: 1;
        margin-top: -30px;
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -10px 32px rgba(0,0,0,0.20);
        align-items: flex-start;
        padding: 30px 0 calc(28px + env(safe-area-inset-bottom));
    }

    .login-box {
        width: min(420px, 86%);
        padding: 0;
    }

    /* 16px justos: por debajo de eso iOS hace zoom al enfocar el campo
       y deja la pagina descuadrada. */
    .login-box .form-group input,
    .login-box .form-group select {
        font-size: 16px;
        padding: 13px 14px;
    }

    .login-box .form-group label { font-size: 11px; }

    /* Objetivo tactil comodo */
    .login-box .login-btn { padding: 16px; font-size: 16px; }
}
/* ============================================
   FORMULARIOS
   ============================================ */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    background: var(--card-bg);
}

/* Las observaciones de la factura admiten varias lineas: que se pueda
   agrandar a mano y que no se estire a lo ancho descuadrando el formulario. */
.form-group textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.4;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,107,60,0.12);
}

.form-group input::placeholder { color: #9ca3af; }

/* ============================================
   BOTONES
   ============================================ */
.btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn:hover { background: var(--bg); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-light); box-shadow: var(--shadow); }

.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; }

.btn-sm { padding: 5px 12px; font-size: 12px; }

.error-msg {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--danger-light);
    color: var(--danger);
    border-radius: var(--radius);
    font-size: 13px;
    text-align: center;
    border: 1px solid #fecaca;
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
#app-screen {
    display: grid;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
    grid-template-columns: auto 1fr;
    grid-template-rows: 42px 1fr;
    /* Alto acotado a la ventana: lo que se desplaza es el contenido, no la
       pagina. Con min-height el area de contenido podia crecer hacia abajo
       y entonces no hay alto sobrante que repartir con el grid. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* TOPBAR */
.topbar {
    grid-area: topbar;
    background: var(--topbar-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 20;
}

.topbar-left { display: flex; align-items: center; }

/* Marca de la barra: lleva al panel de control */
.topbar-home {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.topbar-home:hover { background: rgba(255,255,255,0.12); }
.topbar-home:active { background: rgba(255,255,255,0.20); }

.topbar-logo {
    height: 22px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

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

/* Solo tiene sentido en movil, donde no caben las tres pastillas */
.btn-ctx-movil { display: none; }

.topbar-right { display: flex; align-items: center; gap: 12px; }

.topbar-ctx {
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    background: rgba(255,255,255,0.12);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}


/* Sidebar toggle arrow */
.sidebar-toggle {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px;
    cursor: pointer;
}

.toggle-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    transition: all 0.2s;
}

.toggle-arrow:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Sidebar collapsed state */
.sidebar.collapsed {
    width: 48px;
    min-width: 48px;
    padding: 4px 0;
    overflow: visible;
}

.sidebar.collapsed .sidebar-toggle { display: flex; justify-content: center; padding: 6px 0; }
.sidebar.collapsed .toggle-arrow { transform: rotate(180deg); }

.sidebar.collapsed .nav-items,
.sidebar.collapsed .nav-arrow { display: none; }

.sidebar.collapsed .nav-section { margin: 0; }

.sidebar.collapsed .nav-title {
    justify-content: center;
    padding: 10px 0;
    font-size: 0;
    position: relative;
}

.sidebar.collapsed .nav-section-icon { display: none; }

.sidebar.collapsed .nav-title::before {
    content: attr(data-icon);
    font-size: 20px;
    display: block;
}

/* Tooltip en hover cuando colapsado */
.sidebar.collapsed .nav-title:hover::after {
    content: attr(data-icon) ' ' attr(data-text);
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    background: #111;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Al clickar icono colapsado, expandir y abrir esa sección */
.sidebar.collapsed .nav-title { cursor: pointer; }

/* SIDEBAR */
.sidebar {
    grid-area: sidebar;
    background: var(--sidebar-bg);
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: none;
    transition: width 0.2s ease, padding 0.2s ease;
    width: 240px;
    min-width: 240px;
    height: calc(100vh - 42px);
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.nav-section { margin-bottom: 2px; }

/* Accordion title */
.nav-title {
    padding: 10px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.65);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.12s;
    user-select: none;
}

.nav-title:hover { color: #fff; background: rgba(255,255,255,0.08); }

.nav-arrow {
    font-size: 10px;
    transition: transform 0.2s;
    display: inline-block;
    width: 12px;
}

/* Accordion items container */
.nav-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.nav-section.open > .nav-items {
    max-height: 500px;
}

.nav-section.open > .nav-title { color: #4ade80; }
.nav-section.open > .nav-title .nav-arrow { transform: rotate(0deg); }
.nav-section:not(.open) > .nav-title .nav-arrow { transform: rotate(-90deg); }

.nav-item {
    display: block;
    padding: 8px 16px 8px 34px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.12s;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: #e2e8f0;
}

.nav-item.active {
    background: rgba(34,135,77,0.12);
    color: #4ade80;
    border-left-color: var(--sidebar-active);
    font-weight: 600;
}

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */
.content {
    grid-area: content;
    padding: 8px 12px;
    overflow: auto;
    background: var(--bg);
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    min-height: 28px;
}

.content-header h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.content-actions { display: flex; gap: 6px; }

/* Panel filtros de fecha */
.date-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}

.date-filters label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
}

.date-filters input[type="date"] {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
}

/* Multiseleccion desplegable dentro de la barra de filtros (tipos de pago
   en la Norma 34.14). Sin marcar nada = todos. */
.date-filters .multi-select {
    position: relative;
}

.date-filters .multi-select > summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 24px 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card-bg);
    font-size: 12px;
    white-space: nowrap;
}

.date-filters .multi-select > summary::-webkit-details-marker { display: none; }

.date-filters .multi-select > summary::after {
    content: "\25BC";
    position: absolute;
    right: 8px;
    font-size: 9px;
    color: var(--text-muted);
}

.date-filters .multi-select[open] > summary::after { content: "\25B2"; }

.date-filters .multi-select-body {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.date-filters .multi-select-body label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
    border-radius: 4px;
}

.date-filters .multi-select-body label:hover { background: var(--hover-bg, rgba(0, 0, 0, 0.04)); }

/* En movil el desplegable ocupa el ancho del panel y no se sale de pantalla */
@media (max-width: 768px) {
    .date-filters .multi-select { position: static; }
    .date-filters .multi-select-body { left: 8px; right: 8px; min-width: 0; }
}

/* ============================================
   GRID CON FILTROS Y COLUMNAS REDIMENSIONABLES
   ============================================ */
.grid-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* Altura de reserva, por si algun camino no marca el modo grid.
   En modo grid manda la regla de abajo, que es mas especifica. */
#ag-grid-container { height: calc(100vh - 120px); }

/* Modo grid: el area de contenido reparte el alto y el grid se queda con
   todo lo que sobra. Antes iba a calc(100vh - 120px): si el hueco real
   por encima no eran justo esos 120px, quedaba una banda en blanco bajo
   el paginador. Asi no hay numero que acertar.
   Se excluye el buzon, que usa el mismo contenedor en dos columnas. */
.content.con-grid:not(:has(.buzon-preview)) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.content.con-grid:not(:has(.buzon-preview)) > .content-header { flex-shrink: 0; }

.content.con-grid:not(:has(.buzon-preview)) > #grid-container {
    flex: 1;
    min-height: 0;
}

.content.con-grid:not(:has(.buzon-preview)) > #grid-container > #ag-grid-container {
    height: 100%;
}

/* Buzón split layout: grid + preview lado a lado */
.content:has(.buzon-preview) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.content:has(.buzon-preview) .content-header {
    width: 100%;
    flex-shrink: 0;
}

.content:has(.buzon-preview) .grid-container {
    flex: 1;
    min-width: 300px;
}

.buzon-preview {
    width: 40%;
    min-width: 300px;
    flex-shrink: 0;
    background: #1a1a2e;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: calc(100vh - 120px);
}

/* AG Grid theme overrides - usa variables CSS de cada tema */
.ag-theme-alpine {
    --ag-background-color: var(--grid-bg);
    --ag-foreground-color: var(--grid-fg);
    --ag-header-background-color: var(--grid-bg);
    --ag-header-foreground-color: var(--grid-header-fg);
    --ag-header-cell-hover-background-color: var(--grid-header-hover);
    --ag-row-hover-color: var(--grid-row-hover);
    --ag-selected-row-background-color: var(--grid-row-selected);
    --ag-odd-row-background-color: var(--grid-odd-row);
    --ag-font-size: 13px;
    --ag-font-family: 'Inter', 'Segoe UI', sans-serif;
    --ag-border-color: var(--grid-border);
    --ag-row-border-color: var(--grid-row-border);
    --ag-header-column-separator-color: rgba(255,255,255,0.1);
    --ag-header-column-separator-display: block;
    --ag-header-column-resize-handle-color: rgba(255,255,255,0.3);
    --ag-control-panel-background-color: var(--grid-bg);
    --ag-secondary-border-color: var(--grid-row-border);
    --ag-input-focus-border-color: var(--primary);
    --ag-range-selection-background-color: var(--grid-row-selected);
    --ag-modal-overlay-background-color: var(--grid-bg);
    --ag-chip-background-color: var(--grid-row-border);
    --ag-input-border-color: var(--grid-border);
    --ag-input-background-color: var(--grid-bg);
    --ag-popup-background-color: var(--grid-bg);
}

.ag-theme-alpine .ag-header-row,
.ag-theme-alpine .ag-header-viewport,
.ag-theme-alpine .ag-header {
    background: var(--grid-header-bg) !important;
}

.ag-theme-alpine .ag-header-row {
    color: var(--grid-header-fg) !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ag-theme-alpine .ag-header-cell {
    background: transparent !important;
    color: var(--grid-header-fg) !important;
}

.ag-theme-alpine .ag-header-cell:hover {
    background: var(--grid-header-hover) !important;
}

.ag-theme-alpine .ag-header-icon .ag-icon {
    color: var(--grid-header-icon) !important;
}

.ag-theme-alpine .ag-header-cell-sorted-asc .ag-icon,
.ag-theme-alpine .ag-header-cell-sorted-desc .ag-icon {
    color: var(--grid-header-sorted) !important;
}

/* Indicador de filtro activo en cabecera */
.ag-theme-alpine .ag-header-cell-filtered {
    background: rgba(250, 204, 21, 0.15) !important;
}
.ag-theme-alpine .ag-header-cell-filtered::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #fbbf24;
}
.ag-theme-alpine .ag-header-cell-filtered .ag-icon-filter {
    color: #fbbf24 !important;
}

/* Menú contextual del grid */
.grid-context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    min-width: 200px;
}

.ctx-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}

.ctx-item:hover { background: var(--primary-subtle); }

.ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* SetFilter custom (listado de valores con checkboxes) */
.set-filter-container {
    padding: 0;
    min-width: 260px;
    max-width: 320px;
    font-size: 13px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.set-filter-container::before {
    content: 'Filtrar valores';
    display: block;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(180deg, #22874d 0%, #1a6b3c 100%);
}

.set-filter-search { padding: 10px 12px 6px; }
.set-filter-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: var(--filter-bg);
}
.set-filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,107,60,0.1); }

.set-filter-select-all {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--filter-bg);
}
.set-filter-select-all label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
}

.set-filter-list {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding: 4px 8px;
}

.set-filter-item { padding: 1px 0; }
.set-filter-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 6px;
    border-radius: 4px;
    transition: background 0.1s;
}
.set-filter-item label:hover { background: var(--primary-subtle); }

.set-filter-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--primary);
}

.set-filter-item .value-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.set-filter-item .value-count {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: auto;
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 10px;
}

.set-filter-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--filter-bg);
}

.btn-filter {
    padding: 6px 16px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-filter.btn-reset { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-filter.btn-reset:hover { background: var(--bg); }
.btn-filter.btn-apply { background: var(--primary); border: 1px solid var(--primary); color: white; }
.btn-filter.btn-apply:hover { background: var(--primary-light); }

.set-filter-list::-webkit-scrollbar { width: 5px; }
.set-filter-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.set-filter-list::-webkit-scrollbar-thumb:hover { background: #aaa; }

.data-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-grid thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-grid th {
    background: linear-gradient(180deg, #1a3a24 0%, #0f1f17 100%);
    color: #e2e8f0;
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border-right: 1px solid rgba(255,255,255,0.06);
    position: relative;
}

.data-grid th:hover { background: linear-gradient(180deg, #22503a 0%, #162b1f 100%); }

.data-grid th .sort-arrow {
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.4;
}
.data-grid th .sort-arrow.active { opacity: 1; color: #4ade80; }

/* Resize handle */
.data-grid th .col-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
}
.data-grid th .col-resize:hover,
.data-grid th .col-resize.resizing {
    background: rgba(74,222,128,0.5);
}

/* Fila de filtros */
.filter-row th,
.filter-row td {
    background: var(--filter-bg);
    padding: 5px 6px;
    border-bottom: 2px solid var(--border);
}

.filter-row input {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.filter-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,107,60,0.08); }

/* Cuerpo del grid */
.data-grid td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    font-size: 13px;
}

.data-grid tbody tr {
    cursor: pointer;
    transition: background 0.08s;
}

.data-grid tbody tr:hover { background: var(--row-hover); }
.data-grid tbody tr.selected { background: var(--row-selected); box-shadow: inset 3px 0 0 var(--primary); }

.data-grid tbody tr:nth-child(even) { background: #fafbfc; }
.data-grid tbody tr:nth-child(even):hover { background: var(--row-hover); }

.grid-empty {
    padding: 60px 40px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* Contador de filas */
.grid-footer {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--filter-bg);
}

/* ============================================
   PANEL DETALLE
   ============================================ */
.detail-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    box-shadow: var(--shadow);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.detail-header h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    flex: 1;
}

.detail-header-actions {
    display: flex;
    gap: 6px;
}

.btn-back {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    line-height: 1;
}

.btn-back:hover {
    background: var(--primary-subtle);
}

/* Checkboxes de situación */
.check-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: default;
    white-space: nowrap;
}

.check-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Campos visualmente readonly pero que envían valor */
.field-readonly {
    pointer-events: none;
    background: #f3f4f6 !important;
    color: var(--text-secondary);
}

.detail-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.detail-form-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    align-items: start;
}

/* Tabs dentro de detail usan ancho completo */
.tab-pane .detail-form-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.tab-bar, .tab-pane {
    grid-column: 1 / -1;
}

.detail-actions {
    display: none;
}

/* ============================================
   TABS
   ============================================ */
.tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    grid-column: 1 / -1;
    background: var(--bg);
    padding: 3px;
    border-radius: var(--radius);
}

.tab-btn {
    padding: 6px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all 0.15s;
}

.tab-btn:hover { color: var(--text); background: var(--card-bg); }
.tab-btn.active {
    color: var(--card-bg);
    background: var(--primary);
    box-shadow: var(--shadow-sm);
}

.tab-content { grid-column: 1 / -1; }
.tab-pane { display: none; }

.factura-detail, .visado-detail { display: block; }

/* Vista plana de factura (todo en un pantallazo) */
.factura-flat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flat-row {
    display: flex;
    gap: 8px;
    /* Las dos columnas acaban a la misma altura. Con flex-start el recuadro de
       documentos no se estiraba y quedaba mas corto que el de datos, sin
       alinear por abajo. */
    align-items: stretch;
}

.flat-col-full {
    width: 100%;
}

.flat-col-datos {
    flex: 0 0 42%;
    min-width: 320px;
}

.flat-col-iva {
    flex: 1;
    min-width: 300px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.flat-col-iva .sub-grid { margin: 0; }
.flat-col-iva .subtab-toolbar { padding: 6px 10px; }

.flat-col-right {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Las lineas de IVA ocupan su propia fila a todo lo ancho, debajo de datos y
   documentos. Antes iban dentro de la columna de datos (42%) y habia que
   encogerles la letra para que entraran: por eso no se leia el tipo de IVA. */
.flat-row-iva {
    width: 100%;
}

.flat-row-iva .flat-col-iva {
    flex: 1 1 100%;
    min-width: 0;
}

/* El desplegable de IVA/IRPF se quedaba sin ancho para mostrar el valor */
.flat-col-iva .iva-pct,
.flat-col-iva .irpf-pct {
    min-width: 64px;
}

/* La lupa y la X van superpuestas al campo. El hueco para que no tapen el
   texto solo estaba puesto para .search-display, y el tipo de gasto de las
   lineas usa .grid-input: por eso los iconos se pintaban encima. */
.search-field .grid-input {
    width: 100%;
    padding-right: 40px;
    text-overflow: ellipsis;
}

.flat-col-iva .td-tipogasto {
    min-width: 180px;
}

/* Las tres marcas (ISP, intracomunitaria, no sujeto) comparten una celda en
   vez de gastar tres columnas */
.celda-marcas {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.celda-marcas label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
}

.celda-marcas input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary);
    margin: 0;
}

.flat-section-docs {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* El pane de documentos es el eslabon que faltaba: se quedaba en bloque suelto
   y cortaba la cadena de alturas, asi que el visor no crecia y el recuadro no
   llegaba hasta abajo. */
.flat-section-docs #tab-docs {
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.flat-section-docs .doc-layout {
    flex-direction: row;
    /* Sin alto fijo: se estira hasta donde llegue la columna de datos, que es
       la que manda. Antes iba a una fraccion de la pantalla calculada a ojo y
       por eso no cuadraba con el recuadro de al lado. */
    flex: 1;
    min-height: 0;
}

.flat-section-docs .doc-sidebar {
    width: 70px;
}

.arbol-collapsed { display: none !important; }

.flat-section-docs .doc-viewer {
    flex: 1;
    min-height: 0;
}

@media (max-width: 1100px) {
    .flat-row { flex-wrap: wrap; }
    .flat-col-datos, .flat-col-right { flex: 1 1 100%; min-width: 0; }
    /* Apiladas no hay columna de al lado que mande el alto, asi que el visor
       necesita uno propio. */
    .flat-section-docs .doc-layout { min-height: 320px; }
}

/* Secciones agrupadas en formularios */
.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;
}

.form-section-full { }


.form-section-title {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary);
    background: var(--primary-subtle);
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
}

.form-section-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 16px;
}

.form-section-body .form-group {
    flex: 1 1 200px;
    min-width: 150px;
    margin-bottom: 0;
}

.form-section-body .form-group label {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    display: block;
    color: var(--text-secondary);
}
.form-section-body .form-group input,
.form-section-body .form-group select {
    padding: 7px 10px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.form-section-body .form-group input:focus,
.form-section-body .form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(26,107,60,0.08);
    outline: none;
}

.form-section-body-full {
    padding: 6px 10px;
}

.form-section-body-full .form-group { margin-bottom: 0; }
.form-section-body-full .form-group textarea {
    width: 100%;
    min-height: 50px;
    padding: 5px 8px;
    font-size: 13px;
}

/* Layout secciones: se expanden a todo el ancho disponible */
.factura-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.factura-sections .form-section {
    flex: 1 1 250px;
    min-width: 200px;
    max-width: 100%;
}

.factura-sections .form-section-full {
    flex-basis: 100%;
}

.factura-detail .detail-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* ============================================
   SUB-GRIDS (IVA, Gastos, Docs)
   ============================================ */
.sub-grid { margin-top: 8px; font-size: 12px; }
.sub-grid th { padding: 8px 12px; font-size: 11px; }
.sub-grid td { padding: 6px 8px; }

.grid-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}
.grid-input:focus { border-color: var(--primary); }

.subtab-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.grid-totals {
    display: flex;
    gap: 28px;
    padding: 12px 14px;
    background: var(--primary-subtle);
    border-top: 2px solid var(--border);
    font-size: 13px;
    border-radius: 0 0 var(--radius) var(--radius);
}
.grid-totals strong { color: var(--primary); }

/* ============================================
   INFO GRID (Visado)
   ============================================ */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.info-field {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--filter-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.info-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    font-weight: 600;
}

.info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

/* ============================================
   CARRUSEL DE DOCUMENTOS (layout horizontal)
   Panel izquierdo: thumbnails vertical
   Panel derecho: visor del documento
   ============================================ */
.doc-layout {
    display: flex;
    gap: 10px;
    height: calc(100vh - 220px);
    min-height: 400px;
}

/* Panel izquierdo: thumbnails + controles */
.doc-sidebar {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-thumbnails {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding-right: 4px;
}

.doc-thumbnails::-webkit-scrollbar { width: 3px; }
.doc-thumbnails::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.doc-thumb {
    flex-shrink: 0;
    padding: 3px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    background: var(--card-bg);
    transition: all 0.12s;
    position: relative;
    width: 60px;
}

.doc-thumb:hover { border-color: var(--primary-light); background: var(--primary-subtle); }
.doc-thumb.active { border-color: var(--primary); background: var(--primary-subtle); }

.doc-thumb-icon { font-size: 16px; line-height: 1; }

.doc-thumb-name {
    font-size: 8px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-thumb-delete {
    position: absolute;
    top: -2px;
    right: 1px;
    background: none;
    border: none;
    color: #bbb;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.doc-thumb-delete:hover { color: var(--danger); }

.doc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.doc-nav-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 6px;
    color: var(--text-secondary);
    transition: all 0.1s;
}

.doc-nav-btn:hover:not(:disabled) { background: var(--primary-subtle); color: var(--primary); }
.doc-nav-btn:disabled { opacity: 0.3; cursor: default; }

.doc-nav-info {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Panel derecho: visor */
.doc-viewer {
    flex: 1;
    background: #1a1a2e;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.doc-viewer-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.doc-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* PDF en móvil: llegan páginas sueltas ya convertidas a imagen, porque
   iOS Safari no renderiza PDFs dentro de un iframe. */
.pdf-movil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* Aquí interesa que la página se lea a todo el ancho, no que quepa
   entera: para eso se hace scroll. */
.pdf-movil .doc-viewer-img {
    width: 100%;
    height: auto;
    max-height: none;
    flex-shrink: 0;
}

.pdf-nav {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    background: var(--card-bg);
    border-radius: 999px;
    box-shadow: var(--shadow);
}

.doc-viewer-empty {
    color: #6b7280;
    text-align: center;
    font-size: 14px;
}

.doc-toolbar {
    padding: 6px 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.doc-viewer.drag-over {
    background: rgba(26,107,60,0.15) !important;
    border: 2px dashed var(--primary) !important;
}

/* ============================================
   BÚSQUEDA MODAL (campo + lupa → modal)
   ============================================ */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field .search-display {
    flex: 1;
    width: 100%;
    background: var(--card-bg);
    cursor: pointer;
    padding-right: 44px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.search-field-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    padding: 4px;
    user-select: none;
}

.search-field-lupa {
    right: 22px;
    font-size: 13px;
}
.search-field-lupa:hover { color: var(--primary); }

.search-field-clear {
    right: 6px;
    font-size: 17px;
    font-weight: 700;
}
.search-field-clear:hover { color: var(--danger); }

/* Preview XML */
.xml-preview {
    margin: 0;
    padding: 12px;
    font-size: 11px;
    line-height: 1.5;
    font-family: 'Consolas', 'Monaco', monospace;
    background: var(--card-bg);
    color: var(--text);
    overflow: auto;
    height: 100%;
    white-space: pre;
    tab-size: 2;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-modal {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 650px;
    max-width: 92vw;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.15s ease;
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--primary);
    color: #fff;
}

.search-modal-header h4 { font-size: 15px; font-weight: 600; margin: 0; color: #fff; }

.search-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.search-modal-close:hover { opacity: 1; }

.search-modal-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--filter-bg);
}

.search-modal-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}
.search-modal-input:focus { border-color: var(--primary); }

.search-modal-count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.search-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.search-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.search-modal-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.search-modal-table th {
    background: var(--filter-bg);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 14px;
    text-align: left;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.search-modal-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

.search-modal-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

.search-modal-table tbody tr:hover {
    background: var(--primary-subtle);
}

.search-modal-table tbody tr.selected {
    background: var(--primary);
    color: #fff;
}
.search-modal-table tbody tr.selected td { color: #fff; }

.search-modal-footer {
    padding: 8px 18px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--filter-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   DIAGRAMA DE FLUJO (SVG)
   ============================================ */
.flujo-diagrama {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    overflow: auto;
    min-height: 200px;
}

.flujo-svg { display: block; }

.flujo-node-rect {
    stroke: rgba(0,0,0,0.15);
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    cursor: default;
}

.flujo-node-name {
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.flujo-node-order {
    font-size: 9px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    opacity: 0.8;
}

.flujo-arrow {
    stroke: var(--primary);
    stroke-width: 2;
    stroke-dasharray: 6 3;
}

.flujo-arrow-path {
    stroke: var(--primary);
    stroke-width: 2;
    stroke-dasharray: 6 3;
    fill: none;
}

/* ============================================
   ICONOS DEL MENÚ SIDEBAR
   ============================================ */
.nav-icon {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 8px;
    font-size: 13px;
    opacity: 0.7;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    top: 50px;
    right: 16px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
}

.toast {
    padding: 12px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: toastIn 0.25s ease;
    cursor: pointer;
}

.toast-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.toast-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.toast-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0;
}
.toast-close:hover { opacity: 1; }

@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ============================================
   SPINNER
   ============================================ */
.spinner-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ============================================
   RESPONSIVE
   ============================================ */

/* ============================================
   DASHBOARD
   ============================================ */
.dash-container {
    padding: 12px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.dash-title {
    margin: 0;
    font-size: 20px;
    color: var(--primary);
    font-weight: 700;
}
.dash-filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.dash-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-filter-group label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.dash-filter-group select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    min-width: 140px;
}
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.dash-kpi {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    transition: box-shadow 0.15s;
}
.dash-kpi:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.dash-kpi-icon { font-size: 22px; margin-bottom: 4px; }
.dash-kpi-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.dash-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.dash-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.dash-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dash-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .dash-charts-row { grid-template-columns: 1fr; }
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-header { flex-direction: column; }
    .dash-filters { width: 100%; }
}

/* Dashboard tabs */
.dash-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--border);
}
.dash-tab {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.dash-tab:hover { color: var(--primary); }
.dash-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.dash-tab-content {
    display: none;
}
.dash-tab-content.active {
    display: block;
}

/* Botón Importar Factura-e */
.btn-importar-facturae {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.btn-importar-facturae:hover {
    background: var(--primary-dark) !important;
}

/* Tarjetas móvil */
.mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.mobile-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mobile-card:active { transform: scale(0.99); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

.mobile-card-header {
    padding: 10px 14px 6px;
    border-bottom: 1px solid var(--border-light);
    background: var(--filter-bg);
}
.mobile-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}
.mobile-card-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
}

.mobile-card-body {
    padding: 8px 14px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.mobile-card-field {
    display: flex;
    flex-direction: column;
}
.mobile-card-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mobile-card-value {
    font-size: 13px;
    color: var(--text);
}

.mobile-cards-count {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Panel filtros móvil */
.mobile-filter-panel {
    display: none;
}

.mobile-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}
.mobile-filter-toggle:active { background: var(--primary-subtle); }
.mobile-filter-arrow { font-size: 10px; transition: transform 0.2s; }
.mobile-filter-panel.open .mobile-filter-arrow { transform: rotate(180deg); }

.mobile-filter-body {
    display: none;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 6px;
}
.mobile-filter-panel.open .mobile-filter-body { display: block; }

.mobile-filter-field { margin-bottom: 8px; }
.mobile-filter-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px; }
.mobile-filter-field input {
    width: 100%; box-sizing: border-box;
    padding: 7px 10px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 6px;
    font-family: inherit;
}
.mobile-filter-field input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(26,107,60,0.08); }

/* Tablet */
@media (max-width: 1024px) {
    .sidebar { width: 200px; min-width: 200px; }
    .flat-row { flex-wrap: wrap; }
    .flat-col-datos, .flat-col-right { flex: 1 1 100%; min-width: 0; }
    .detail-form-sections { grid-template-columns: 1fr; }
}

/* Móvil */
@media (max-width: 768px) {
    /* Mostrar panel filtros móvil */
    .mobile-filter-panel { display: block; }

    /* Ocultar AG Grid container scroll */
    .ag-theme-alpine { display: none !important; }

    /* En movil no hay AG Grid que dimensionar: se pintan tarjetas. El
       reparto de alto del modo grid sobra aqui y ademas dejaba la lista
       sin nadie que pudiera desplazarse con el dedo, porque el reparto
       lleva overflow:hidden. Se vuelve al flujo normal. */
    .content.con-grid:not(:has(.buzon-preview)) {
        display: block;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content.con-grid:not(:has(.buzon-preview)) > #grid-container { flex: none; }
    .content.con-grid:not(:has(.buzon-preview)) > #grid-container > #ag-grid-container { height: auto; }

    /* Layout: una sola columna */
    #app-screen {
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "content";
    }

    /* Sidebar: oculto por defecto, overlay al abrir */
    .sidebar {
        display: none;
        position: fixed;
        top: 42px;
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: 50;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }
    .sidebar.mobile-open { display: block; }

    /* Overlay oscuro detrás del sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        top: 42px;
        background: rgba(0,0,0,0.4);
        z-index: 49;
    }
    .sidebar-backdrop.show { display: block; }

    /* Topbar: más compacto */
    .topbar { padding: 0 8px; }
    .topbar-left { min-width: 0; }
    .topbar-left h2 { width: auto; font-size: 13px; }
    /* En el movil manda el logo y se retira el texto: la pastilla de
       empresa y el boton de menu aprovechan mejor ese ancho, y la marca
       se sigue reconociendo igual. Sigue llevando al panel al tocarlo. */
    .topbar-title { display: none; }
    .topbar-logo { height: 20px; }
    .topbar-home { gap: 0; padding: 4px 6px; }
    /* Las tres pastillas no caben: se cambian por un solo boton que abre
       el mismo modal. El nombre de la empresa se lee en el menu de usuario. */
    .topbar-center { display: flex; flex: 0 0 auto; justify-content: center; }
    .topbar-ctx { display: none; }
    .btn-ctx-movil {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: rgba(255,255,255,0.14);
        color: #fff;
        cursor: pointer;
        transition: background 0.15s;
    }
    .btn-ctx-movil:active { background: rgba(255,255,255,0.28); }
    .topbar-user { font-size: 11px; }

    /* Botón hamburger */
    .btn-hamburger {
        display: flex;
        background: none;
        border: none;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        padding: 4px 8px;
        margin-right: 6px;
    }

    /* Contenido */
    .content { padding: 6px 8px; }
    .content-header { flex-wrap: wrap; gap: 4px; }
    .content-header h3 { font-size: 11px; width: 100%; }
    .content-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
    .content-actions .btn { font-size: 11px; padding: 5px 8px; }

    /* Filtros de fecha */
    .date-filters { flex-wrap: wrap; }
    .date-filters input[type="date"] { width: 130px; }

    /* Grid */
    .ag-theme-alpine { font-size: 12px; }
    .ag-theme-alpine .ag-header-row { font-size: 10px; }

    /* Detalle */
    .detail-panel { padding: 6px 8px; }
    .detail-header h4 { font-size: 11px; }
    .detail-header-actions { flex-wrap: wrap; gap: 3px; }
    .detail-header-actions .btn { font-size: 11px; padding: 4px 8px; }
    .detail-form { grid-template-columns: 1fr; gap: 8px; }
    .detail-form-sections { grid-template-columns: 1fr; padding: 4px; gap: 8px; }

    /* Secciones formulario */
    .form-section-body { flex-direction: column; gap: 8px; padding: 8px 12px; }
    .form-section-body .form-group { flex: 1 1 100%; min-width: 0; }

    /* Tabs */
    .tab-bar { flex-wrap: wrap; }
    .tab-btn { font-size: 11px; padding: 5px 10px; }

    /* Facturas: layout columna en vez de dos columnas */
    .factura-sections { grid-template-columns: 1fr !important; }

    /* Visado: layout vertical */
    .visado-detail > div:first-child { grid-template-columns: 1fr !important; }

    /* Buzón preview: debajo */
    .buzon-preview { width: 100% !important; min-width: 0; height: 300px; }
    .content:has(.buzon-preview) { flex-direction: column; }

    /* Modales */
    .modal-box { min-width: 0; width: 95vw; max-width: 95vw; }
    .search-modal { width: 95vw; max-width: 95vw; height: 80vh; }

    /* Login */
    .login-right { width: 100%; }
    .login-box { width: 90%; padding: 16px 0; }

    /* Toasts */
    .toast-container { max-width: 90vw; right: 8px; }
}

/* ============================================
   Tema DESARROLLO - solo etiqueta
   ============================================ */
body.dev-mode .topbar-right::before {
    content: 'DESARROLLO';
    background: #fbbf24;
    color: #78350f;
    padding: 2px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 10px;
    align-self: center;
}

/* En el movil la etiqueta comia media barra. Esta regla tiene que ir
   DESPUES de la de arriba: con la misma especificidad gana la ultima. */
@media (max-width: 768px) {
    body.dev-mode .topbar-right::before {
        font-size: 8px;
        padding: 1px 5px;
        letter-spacing: 0;
        margin-right: 6px;
    }
}

/* ============================================
   Modales (reemplazo de alert/confirm/prompt)
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: modalFadeIn 0.15s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    min-width: 360px;
    max-width: 500px;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease;
}
@keyframes modalSlideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-header {
    padding: 16px 20px 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-header .modal-icon { font-size: 22px; }
.modal-header.modal-danger { color: var(--danger); }
.modal-header.modal-warning { color: #b45309; }

.modal-body {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.modal-body textarea, .modal-body input[type="text"], .modal-body input[type="date"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    margin-top: 8px;
    outline: none;
    box-sizing: border-box;
}
.modal-body textarea { min-height: 80px; resize: vertical; }
.modal-body textarea:focus, .modal-body input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,107,60,0.1); }

.modal-body select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    margin-top: 8px;
    outline: none;
    box-sizing: border-box;
}

.modal-footer {
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border);
    background: var(--filter-bg);
}
.modal-footer .btn { min-width: 90px; }