:root {
    /* Modern Slate & Indigo SaaS Palette */
    --primary: #4f46e5;         /* Indigo 600 - Brand Accent */
    --primary-dark: #4338ca;    /* Indigo 700 - Brand Hover */
    --primary-light: #eef2ff;   /* Indigo 50 - Brand Light BG */
    --dark-slate: #0f172a;      /* Slate 900 - Primary Text/Deep Buttons */
    --text-color: #334155;      /* Slate 700 - Body Text */
    /* #64748b (slate 500) daba 4,36:1 sobre el fondo tenido del body: por debajo
       del 4,5:1 de 1.4.3 para texto normal. Este da 5,00:1 y apenas cambia a la
       vista. No se veia porque la prueba de contraste descartaba todo lo que
       tuviera un degradado por encima, y el body lleva tres. */
    --text-muted: #5a6b80;      /* Slate 500 oscurecido para cumplir AA */
    --bg-color: #f8f9fb;        /* Soft gray-blue - Main Window Background */
    --panel-bg: #ffffff;        /* Pure White - Card Panels */
    /* Superficie sutil para filas de total y teclas. Estaba declarada solo
       dentro de body.dark-mode, asi que en tema claro no existia y todo lo que
       la usaba salia transparente. Se elige #f8fafc, que es el gris que ya
       usaba .data-table thead th a pelo, en vez de meter un tercero. */
    --bg-surface: #f8fafc;
    --border-color: #e2e8f0;    /* Slate 200 - Softer borders */
    --accent: #d97706;          /* Amber 600 - Warnings & Accent totals */
    --success: #059669;         /* Emerald 600 - Connections & Success */
    --success-light: #ecfdf5;   /* Emerald 50 - Success BG */
    --error: #e11d48;           /* Rose 600 - Danger / Reset */
    --error-light: #fff1f2;     /* Rose 50 - Danger BG */
    
    --sidebar-bg: #0f172a;
    --sidebar-border: #1e293b;
    --sidebar-text: #94a3b8;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.07);

    /* Elegant soft shadows */
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 14px -1px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 10px -4px rgba(15, 23, 42, 0.04);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(217, 119, 6, 0.03) 0px, transparent 50%);
    color: var(--text-color);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Minimalist Clean Top Header */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    color: var(--dark-slate);
    padding: 0.75rem 2rem;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    z-index: 50;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 36px;
    height: 36px;
    /* El cian era #06b6d4 y el blanco encima daba 2,43:1. Este da 5,36:1. */
    background: linear-gradient(135deg, var(--primary), #0e7490);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.logo-text h1 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dark-slate);
    letter-spacing: -0.5px;
}

.logo-text span {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.25px;
    display: block;
    margin-top: -1px;
}

.header-badge {
    background-color: var(--success-light);
    border: 1px solid rgba(5, 150, 105, 0.15);
    color: var(--ui-success);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-badge-dot {
    width: 6px;
    height: 6px;
    background-color: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.5; }
}

/* Elegant Dark Sidebar & Grid Layout (Sticky/Fixed) */
.app-container {
    display: flex;
    flex: 1;
    height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

aside {
    width: 275px;
    flex-shrink: 0;
    height: 100%;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-right: 1px solid #1e293b;
    padding: 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
}

aside::-webkit-scrollbar {
    width: 10px;
}
aside::-webkit-scrollbar-track {
    background: transparent;
}
/* 3,6:1 en el extremo mas claro del degradado del menu. Con 0,12 de opacidad
   daba 1,41:1 y no se distinguia del fondo. */
aside::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 99px;
}

/* Sidebar Top User Card */
.sidebar-user-header-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar-user-top-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #0e7490);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
    position: relative;
}

.sidebar-user-avatar-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    background: #10b981;
    border: 2px solid #0f172a;
    border-radius: 50%;
}

.sidebar-user-details {
    overflow: hidden;
    flex: 1;
}

.sidebar-user-name-text {
    font-weight: 700;
    font-size: 0.86rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-company-subtext {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.sidebar-role-select-box {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.role-switcher-dropdown {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-switcher-dropdown:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-sidebar-logout {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.btn-sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fee2e2;
}

.menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.menu-group-label {
    padding: 0.5rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    user-select: none;
    list-style: none;
}
.menu-group-label:first-child { margin-top: 0; }
.menu-group-label:hover { color: #94a3b8; }
.mg-chevron { font-size: 0.6rem; transition: transform 0.15s; }

.menu-item-btn {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    border-left: 3px solid transparent;
}

.menu-item-btn:hover {
    background-color: var(--sidebar-hover);
    color: #ffffff;
    transform: translateX(2px);
}

.menu-item-btn.active {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    border-left: 3px solid #a5b4fc;
}

.sidebar-footer {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    font-size: 0.75rem;
    color: #e2e8f0;
}

.sidebar-footer-title {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#side-comp-nif {
    color: #94a3b8;
}

/* Landmark principal: envuelve a .workspace sin romper el flex de .app-container.
   Sin estas reglas main queda en flex:0 1 auto y .workspace encoge a su ancho
   intrinseco en lugar de ocupar el hueco disponible. */
main#main-content {
    display: flex;
    flex: 1;
    min-width: 0;
    height: 100%;
}

main#main-content:focus-visible {
    outline: 3px solid var(--ui-primary);
    outline-offset: -3px;
}

/* Workspace main content */
.workspace {
    flex: 1;
    height: 100%;
    padding: 2.25rem 2.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent infinite stretch on ultra-wide screens.
       1680px deja que un monitor de 1920 se llene entero (244 de menu + 1676)
       y sigue poniendo tope en pantallas de 2560 o mas. */
    max-width: 1680px;
}

.workspace::-webkit-scrollbar {
    width: 12px;
}
.workspace::-webkit-scrollbar-track {
    background: transparent;
}
/* 3,29:1 contra el fondo del area de trabajo. El gris anterior daba 1,41:1 y
   era practicamente invisible: es la unica senal de que queda contenido. */
.workspace::-webkit-scrollbar-thumb {
    background: #7c8ba1;
    border-radius: 99px;
}
.workspace::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.workspace-header {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.85rem;
}

.workspace-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-slate);
    letter-spacing: -0.5px;
}

.workspace-header p {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Premium Card Panels */
.glass-panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.glass-panel h3 {
    color: var(--dark-slate);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.25px;
}

/* Clean Alert Boxes */
.info-alert {
    background-color: #eff6ff; /* Soft Blue */
    border: 1px solid #dbeafe;
    border-left: 4px solid #3b82f6;
    padding: 0.85rem 2.5rem 0.85rem 1.1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #1e40af;
    margin-bottom: 1.25rem;
    line-height: 1.5;
    position: relative;
}

.info-alert-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    /* #93c5fd sobre el fondo del aviso daba 1,66:1. */
    color: #1e40af;
    padding: 0.15rem 0.3rem;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.info-alert-close:hover {
    color: #1e40af;
    background: rgba(37, 99, 235, 0.08);
}

.info-alert strong {
    font-weight: 700;
}

.info-alert a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 600;
}

/* Dashboard Metric Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.metric-card {
    background-color: var(--panel-bg);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Colored left borders removed — clean neutral cards */

.metric-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 0.3rem;
    letter-spacing: -0.5px;
}

.metric-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Role Banner styling */
.role-access-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.role-access-banner.admin {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #c7d2fe;
    color: #3730a3;
}
.role-access-banner.employee {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
    color: #065f46;
}
.role-access-banner.auditor {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
    color: #92400e;
}

/* Modern Minimalist Forms */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-help {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Agrupacion de la direccion fiscal. El min-width:0 no es decorativo: sin el,
   la anchura minima intrinseca del fieldset impide que la rejilla se encoja y
   a 320 px aparece desplazamiento horizontal. */
.form-fieldset {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.9rem 1rem 0.25rem;
    margin: 0 0 1rem;
}

.form-fieldset > legend {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark-slate);
    padding: 0 0.4rem;
}

/* Rejilla propia en lugar de .form-row: auto-fit reparte los campos entre
   tantas columnas como quepan, y con dos campos en una fila de tres deja un
   hueco. Aqui la proporcion es parte del significado: la calle es larga y el
   codigo postal corto. */
.direccion-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.direccion-grid.mitades {
    grid-template-columns: 1fr 1fr;
}

/* Nombre, primer apellido y segundo apellido. Los tres pesan lo mismo, al
   contrario que calle y codigo postal. */
.direccion-grid.tercios {
    grid-template-columns: 1fr 1fr 1fr;
}

.direccion-grid > .form-group {
    min-width: 0;
}

/* Cabecera de panel con buscador. El campo tenia 250 px fijos, y la anchura
   minima de su fila arrastraba al panel entero: por debajo de 400 px la pagina
   se desplazaba de lado y la tabla se salia de su contenedor con barra propia,
   que es justamente lo que 1.4.10 no admite. */
.panel-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.panel-cabecera-busca {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.panel-cabecera-busca input[type="search"] {
    width: min(250px, 100%);
    min-width: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

@media (max-width: 600px) {
    .direccion-grid,
    .direccion-grid.mitades,
    .direccion-grid.tercios {
        grid-template-columns: minmax(0, 1fr);
    }
}

label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dark-slate);
    letter-spacing: 0.25px;
}

input, select, textarea {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    color: var(--dark-slate);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.15s ease-in-out;
    box-shadow: var(--shadow-sm);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

input[readonly], select[readonly] {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* Elegant Structured Tables */
/* El position:relative no es decorativo. Los textos .sr-only van en absoluto
   sin ancestro posicionado, asi que su bloque contenedor era el documento
   entero: los que caen dentro de una tabla ancha se quedaban en su posicion
   estatica, mas alla del borde derecho de la pantalla, y estiraban el documento.
   A 320 px la pagina se desplazaba 226 px de lado sin nada que ver (1.4.10),
   arrastrando ademas el foco fuera de la parte visible. Con esto quedan dentro
   del contenedor que ya desplaza. */
.table-container {
    position: relative;
    overflow-x: auto;
    width: 100%;
}

.data-table-container {
    position: relative;
    overflow-x: auto;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.data-table th {
    background: #f8fafc;
    padding: 0.75rem 1.25rem;
    color: #64748b;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.data-table td {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 0.82rem;
}

.data-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background-color: #f1f5f9;
}

/* Sticky table headers — keep column labels visible while scrolling */
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
}
body.dark-mode .data-table thead th {
    background: var(--bg-surface);
}

/* Compact action buttons inside table rows */
.flex-gap-05 .btn {
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
    border-radius: 7px;
}
.flex-gap-05 {
    gap: 0.25rem;
}

/* cobr-badge: prevent wrapping in Estado column */
.data-table .cobr-badge {
    white-space: nowrap;
}

/* Invoice form list lines table */
.items-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.85rem;
}

.items-table th {
    text-align: left;
    padding: 0.85rem 1rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    background-color: var(--bg-color);
}

.items-table td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.items-table input {
    width: 100%;
    padding: 0.5rem 0.75rem;
}

/* Premium Buttons Styling */
.btn {
    background-color: var(--dark-slate);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    background-color: #1e293b;
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
    color: var(--dark-slate);
    transform: translateY(-1px);
}

.btn-danger {
    background-color: var(--error);
    /* Sin esto, combinado con .btn-secondary hereda texto oscuro sobre rojo:
       2,2:1. Con blanco encima, 4,70:1. */
    color: #ffffff;
    border: none;
}

.btn-danger:hover {
    background-color: #be123c; /* Rose 700 */
    color: white;
}

.btn-accent {
    background-color: var(--primary);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.btn-accent:hover {
    background-color: var(--primary-dark);
}

/* Billing Totals Block */
.form-total-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.form-total-row {
    display: flex;
    width: 300px;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.form-total-row span:last-child {
    font-weight: 600;
    color: var(--dark-slate);
}

.form-total-row.grand {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ui-primary);
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.form-total-row.grand span:last-child {
    color: var(--ui-primary);
    font-weight: 800;
}

/* Badges & Monospace Tags */
.badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid transparent;
}

.badge-success {
    background-color: var(--success-light);
    border-color: rgba(5, 150, 105, 0.15);
    color: var(--ui-success);
}

.hash-tag {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.75rem;
    background-color: var(--bg-color);
    color: var(--text-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    max-width: 140px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--border-color);
}

/* Checklist compliance list */
#pane-cert label {
    padding: 0.75rem 1rem;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s;
}

#pane-cert label:hover {
    border-color: var(--primary);
}

/* A4 Invoice Preview Modal & Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.4); /* Slate 900 tint */
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 3rem;
}

.modal-container {
    width: 100%;
    max-width: 840px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: space-between;
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 1rem 1.75rem;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

/* Document A4 Page Layout */
.printable-invoice {
    background-color: white;
    color: #1e293b;
    border-radius: 16px;
    padding: 4rem;
    box-shadow: var(--shadow-lg);
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    line-height: 1.5;
    border: 1px solid var(--border-color);
}

.print-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 2rem;
}

.print-logo-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-slate);
    letter-spacing: -0.75px;
}

.print-logo-nif {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-top: 0.2rem;
}

.print-invoice-meta {
    text-align: right;
}

.print-invoice-meta h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-slate);
    letter-spacing: -0.5px;
}

.print-invoice-meta p {
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.3rem;
}

.print-parties {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    background-color: var(--bg-color);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.print-party-title {
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.75px;
    margin-bottom: 0.5rem;
}

.print-party-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark-slate);
}

/* Invoice PDF table styling */
.print-items-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.print-items-table th {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 2px solid var(--dark-slate);
    color: var(--dark-slate);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.print-items-table td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.print-items-table tr:last-child td {
    border-bottom: none;
}

.print-totals {
    margin-left: auto;
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.88rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 1.25rem;
}

.print-total-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
}

.print-total-row.grand {
    border-top: 2px solid var(--dark-slate);
    padding-top: 0.75rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark-slate);
}

.print-total-row.grand span:last-child {
    color: var(--dark-slate);
}

/* Verifactu Block under the invoice */
.print-verifactu-container {
    border-top: 2px dashed var(--border-color);
    padding-top: 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
}

.print-qr-img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: white;
    image-rendering: pixelated; /* módulos del QR nítidos al escalar */
}

/* Leyenda obligatoria sobre el código (Orden HAC/1177/2024): "QR tributario" */
.qr-tributario-label {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--dark-slate, #1e293b);
    margin-bottom: 0.25rem;
}

/* En impresión el QR debe medir entre 30x30 y 40x40 mm (ISO/IEC 18004,
   nivel M). Se fija a 35 mm con margen blanco alrededor. */
@media print {
    .print-qr-img {
        width: 35mm !important;
        height: 35mm !important;
        border: none;
        padding: 2mm;
    }
}

.print-vf-legal {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.print-vf-badge {
    background-color: var(--dark-slate);
    color: white;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    width: fit-content;
    letter-spacing: 0.75px;
}

.print-vf-text {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark-slate);
}

.print-vf-hash {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    background-color: var(--bg-color);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    word-break: break-all;
    line-height: 1.3;
}

/* Toast System */
.notification {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    background-color: #fff;
    border: 1px solid var(--border-color);
    color: var(--dark-slate);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 2000;
    transform: translateY(180%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 600;
    font-size: 0.88rem;
    border-left: 4px solid var(--success);
}

.notification.show {
    transform: translateY(0);
}

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

.no-print {
    display: flex;
}

/* Un enlace sin clase heredaba el azul por defecto del navegador, que sobre
   el panel oscuro da 1,70:1. Especificidad 0-0-1: cualquier regla con clase
   la gana, asi que no toca nada de lo que ya tiene estilo. */
a { color: var(--ui-primary); }
a:not([class]) { text-decoration: underline; }
.btn a, .printable-invoice a, .badge a { color: inherit; }

/* Marca de campo obligatorio. El asterisco va con aria-hidden: el atributo
   required ya lo anuncia el lector y repetirlo dice "asterisco" en cada campo.
   Lo que faltaba era que se viera. */
.req { color: var(--ui-danger); font-weight: 700; }
.form-leyenda { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; }

/* Utility Helper Classes */
.text-accent { color: var(--ui-accent) !important; }
.text-success { color: var(--ui-success) !important; }
/* --error se queda en 4,49:1 sobre el panel, justo por debajo del minimo, y
   en modo oscuro no tiene variante. --ui-danger si la tiene y cumple en ambos. */
.text-danger { color: var(--ui-danger) !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end { display: flex; justify-content: flex-end; }
.flex-gap-05 { display: flex; gap: 0.5rem; }
.flex-gap-1 { display: flex; gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }

.grid-span-2 { grid-column: span 2; }

.m-bottom-05 { margin-bottom: 0.5rem; }
.m-bottom-1 { margin-bottom: 1rem; }
.m-bottom-15 { margin-bottom: 1.5rem; }
.m-bottom-2 { margin-bottom: 2rem; }
.m-top-1 { margin-top: 1rem; }
.m-top-15 { margin-top: 1.5rem; }
.m-top-2 { margin-top: 2rem; }

.p-top-1 { padding-top: 1rem; }
.p-top-125 { padding-top: 1.25rem; }
.p-bottom-075 { padding-bottom: 0.75rem; }

.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }

.font-mono { font-family: 'Courier New', Courier, monospace; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: normal !important; }

.font-size-sm { font-size: 0.85rem !important; }
.font-size-xs { font-size: 0.75rem !important; }
.font-size-xxs { font-size: 0.65rem !important; }

.info-alert.alert-success {
    background-color: var(--success-light);
    border-color: rgba(5, 150, 105, 0.15);
    border-left: 4px solid var(--success);
    color: var(--ui-success);
}
.info-alert.alert-danger {
    background-color: var(--error-light);
    border-color: rgba(225, 29, 72, 0.15);
    border-left: 4px solid var(--error);
    color: var(--ui-danger);
}

.panel-secondary {
    border-color: var(--border-color) !important;
    background-color: var(--bg-color) !important;
}

.btn-success-light {
    background-color: var(--success-light) !important;
    border: 1px solid rgba(5, 150, 105, 0.2) !important;
    color: var(--ui-success) !important;
}
.btn-warning-light {
    background-color: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    color: #92400e !important;
}
.m-top-025 { margin-top: 0.25rem !important; }
.m-top-015 { margin-top: 0.15rem !important; }

.w-50 { width: 50% !important; }
.w-12 { width: 12% !important; }
.w-15 { width: 15% !important; }
.w-13 { width: 13% !important; }
.w-10 { width: 10% !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.gap-05 { gap: 0.5rem !important; }
.flex-align-center { display: flex; align-items: center; }
.w-auto { width: auto !important; }
.m-0 { margin: 0 !important; }

/* Visual Chain Wrapper & Nodes */
.visual-chain-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 1.5rem 1rem;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.chain-node {
    min-width: 150px;
    flex-shrink: 0;
    padding: 1rem;
    border-radius: 14px;
    background-color: #fff;
    border: 2px solid var(--success);
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
    user-select: none;
}

.chain-node:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.chain-node.valid {
    border-color: var(--success);
    box-shadow: 0 0 14px rgba(5, 150, 105, 0.15);
}

.chain-node.valid::before {
    content: '🛡️';
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #fff;
    border: 1.5px solid var(--success);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: var(--shadow-sm);
}

.chain-node.invalid {
    border-color: var(--error);
    background-color: var(--error-light);
    color: var(--ui-danger);
    box-shadow: 0 0 16px rgba(225, 29, 72, 0.25);
    animation: pulse-border-red 2s infinite;
}

.chain-node.invalid::before {
    content: '🚨';
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #fff;
    border: 1.5px solid var(--error);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    animation: shake 0.5s ease-in-out infinite alternate;
}

@keyframes pulse-border-red {
    0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

@keyframes shake {
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}

.chain-node-id {
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--ui-primary);
    margin-bottom: 0.25rem;
}

.chain-node.invalid .chain-node-id {
    color: var(--ui-danger);
}

.chain-node-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-slate);
    margin-bottom: 0.5rem;
}

.chain-node.invalid .chain-node-total {
    color: var(--ui-danger);
}

.chain-node-hash-box {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    background-color: var(--bg-color);
    color: var(--text-muted);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    display: block;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chain-arrow {
    font-size: 1.25rem;
    color: var(--ui-success);
    user-select: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slide-right 2s infinite ease-in-out;
}

.chain-arrow.broken {
    color: var(--ui-danger);
    animation: flash-red 1s infinite alternate;
}

@keyframes slide-right {
    0% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    100% { transform: translateX(-2px); }
}

@keyframes flash-red {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Printing Media Rules */
@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    body {
        background: white;
        color: black;
    }
    .app-container, .modal-actions, .modal-overlay {
        background: white;
        display: block !important;
        position: static;
        padding: 0;
        box-shadow: none;
    }
    /* Lo que NO puede salir en una factura que se entrega a un cliente o a
       Hacienda. No es accesibilidad: es que el documento fiscal llevaba impreso
       "Saltar al contenido principal", "Resumen fiscal y estado del sistema" y
       "Cadena Veri*factu: sin comprobar" por encima de la cabecera.
       La lista es negra y por tanto se queda corta sola cada vez que alguien
       anade algo al panel; por eso hay una prueba que imprime la vista previa y
       falla si vuelve a colarse cromo de la aplicacion. */
    aside, .workspace-header, .glass-panel, .metrics-grid, .modal-actions, header, .info-alert, .no-print,
    .skip-link, .dashboard-details {
        display: none !important;
    }
    .modal-container {
        max-width: 100%;
    }
    .printable-invoice {
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
    }
    body.print-decl-active {
        background: white !important;
    }
    body.print-decl-active .app-container,
    body.print-decl-active main#main-content,
    body.print-decl-active .workspace {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
    }
    body.print-decl-active aside,
    body.print-decl-active header,
    body.print-decl-active .workspace-header,
    body.print-decl-active .glass-panel:not(#decl-printable-area),
    body.print-decl-active .info-alert,
    body.print-decl-active .no-print,
    body.print-decl-active .modal-overlay {
        display: none !important;
    }
    body.print-decl-active #decl-printable-area {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
        body.print-decl-active #decl-printable-area .declaration-box {
                border: 2px solid #000 !important;
                background-color: #fff !important;
                color: #000 !important;
                padding: 2.5cm 2cm !important;
                border-radius: 0 !important;
                font-size: 0.95rem !important;
            }
        }

        /* Active Session Info Box in Sidebar */
        .session-info-box {
            font-size: 0.75rem;
            color: var(--text-color);
        }
        
        .logout-link {
            transition: color 0.15s ease-in-out;
        }

        .logout-link:hover {
            color: #be123c !important; /* Rose 700 on hover */
            text-decoration: underline !important;
        }

        /* Role Badges */
        .badge-role {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.62rem;
            padding: 0.2rem 0.5rem;
            border-radius: 6px;
            display: inline-block;
            border: 1px solid transparent;
        }
        
        .badge-admin {
            background-color: var(--primary-light);
            color: var(--ui-primary);
            border-color: rgba(79, 70, 229, 0.15);
        }
        
        .badge-employee {
            background-color: #eff6ff; /* Blue 50 */
            color: #2563eb; /* Blue 600 */
            border-color: rgba(37, 99, 235, 0.15);
        }
        
        .badge-auditor {
            background-color: #fef3c7; /* Amber 50 */
            color: #d97706; /* Amber 600 */
            border-color: rgba(217, 119, 6, 0.15);
        }

        /* Dashboard Charts styling */
        .charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-top: 1rem;
        }
        
        @media (max-width: 900px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .chart-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            background-color: var(--bg-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.25rem;
        }
        
        .chart-title {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .bar-chart {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .bar-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            font-size: 0.8rem;
        }
        
        .bar-label {
            min-width: 100px;
            color: var(--text-color);
            font-weight: 500;
        }
        
        .bar-wrapper {
            flex: 1;
            height: 8px;
            background-color: var(--border-color);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        
        .bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .bar-val {
            min-width: 80px;
            text-align: right;
            font-weight: 700;
            color: var(--dark-slate);
        }
        
        .distribution-circle-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }

        /* Class to hide elements based on role */
        .role-hidden {
            display: none !important;
        }
        
        /* Disabled class for read-only view elements */
        .role-disabled {
            opacity: 0.65;
            pointer-events: none !important;
            cursor: not-allowed !important;
            background-color: var(--bg-color) !important;
        }
        
        /* Make form elements visual state show read-only nicely */
        .role-disabled input, .role-disabled select, .role-disabled textarea, .role-disabled button {
            cursor: not-allowed !important;
        }

/* === Dashboard & sidebar polish === */

.session-info-box {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--success);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-top: 0.6rem;
}

.menu-item-btn {
    will-change: transform;
}

.menu-item-btn:hover {
    transform: translateX(2px);
}

/* =====================================================================
   NUEVAS ANIMACIONES & SISTEMA VISUAL PRO FACTOLEGAL
   ===================================================================== */

/* 1. Escudo Fiscal & Semáforo de Cumplimiento */
.escudo-fiscal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 99px;
    font-size: 0.74rem;
    font-weight: 700;
    background: #ecfdf5;
    color: var(--ui-success);
    border: 1px solid rgba(5,150,105,0.25);
    box-shadow: 0 0 12px rgba(5,150,105,0.12);
    animation: shieldPulse 3s infinite ease-in-out;
}

.escudo-fiscal-badge.warning {
    background: var(--ui-warning-bg);
    color: var(--ui-warning);
    border-color: rgba(217,119,6,0.25);
    box-shadow: 0 0 12px rgba(217,119,6,0.15);
}

.escudo-fiscal-badge.danger {
    background: #fef2f2;
    color: var(--ui-danger);
    border-color: rgba(220,38,38,0.25);
    box-shadow: 0 0 12px rgba(220,38,38,0.2);
    animation: pulse-border-red 1.5s infinite;
}

@keyframes shieldPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(5,150,105,0.15); transform: scale(1); }
    50% { box-shadow: 0 0 18px rgba(5,150,105,0.35); transform: scale(1.02); }
}

/* 2. Caja del QR de la factura imprimible.
   Aqui habia un laser animado que recorria el codigo: movimiento perpetuo sin
   forma de pararlo desde el contenido (2.2.2), pero sobre todo un problema
   funcional. Ningun bloque de impresion lo ocultaba y el contenedor fuerza
   print-color-adjust: exact, asi que al imprimir se congelaba en un fotograma
   cualquiera y salia una banda azul de 3 px con halo atravesando el QR en
   papel. En pantalla cruzaba los modulos cada 2,5 segundos, justo mientras el
   cliente intenta escanearlo.
   El redondeo y el recorte tambien se van: el QR necesita margen libre
   alrededor y las esquinas lo mordian. */
.qr-laser-wrapper {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 4px;
}

/* 3. Empty States Ilustrados */
.empty-state-box {
    text-align: center;
    padding: 3.5rem 2rem;
    background: #fafafa;
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    margin: 1rem 0;
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    display: inline-block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.06));
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.empty-state-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--dark-slate);
    margin-bottom: 0.35rem;
}

.empty-state-desc {
    font-size: 0.86rem;
    color: var(--text-muted);
    max-width: 440px;
    margin: 0 auto 1.5rem;
    line-height: 1.55;
}

/* 4. Badges de Tipos de Factura (F1, F2, R1-R5) */
.badge-tipo-f1 { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.72rem; }
.badge-tipo-f2 { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.72rem; }
.badge-tipo-r1 { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; font-weight: 800; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.72rem; }

/* 5. Partículas Animadas en la Cadena Criptográfica */
.chain-particle-line {
    position: relative;
    width: 32px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.chain-particle-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 12px;
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--success);
    animation: particleFlow 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.chain-particle-line.broken::before {
    background: var(--error);
    box-shadow: 0 0 8px var(--error);
}

@keyframes particleFlow {
    0% { left: -12px; opacity: 0; }
    30% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* 6. Efecto Glitch y Pantalla Sacudida al Simular Hackeo */
.tamper-glitch-active {
    animation: screenGlitch 0.45s ease-in-out;
}

@keyframes screenGlitch {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-3px, 3px); filter: hue-rotate(90deg); }
    40% { transform: translate(-3px, -3px); filter: hue-rotate(180deg); }
    60% { transform: translate(3px, 3px); filter: hue-rotate(270deg); }
    80% { transform: translate(3px, -3px); filter: hue-rotate(360deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* 7. Toast con Barra de Progreso */
.notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3.5px;
    background: var(--success);
    width: 100%;
    animation: toastProgress 3.5s linear forwards;
    border-bottom-left-radius: 12px;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* =====================================================================
   INVOICE CUSTOMIZATION: Corporate Color, QR Position, A4 Template
   ===================================================================== */

/* Corporate color accent via CSS custom property */
.printable-invoice {
    --invoice-accent: #2563eb;
}

/* La nota que acompana a la hoja: va fuera del papel, con el cromo, porque es
   informacion sobre la aplicacion y no parte del documento. */
/* Nota de la vista previa.
   Sin fondo propio, este texto se pintaba sobre el velo del dialogo
   -rgba(15,23,42,.4) sobre --bg-color- y quedaba a 1,79:1 en tema claro, muy
   por debajo del 4,5:1 que pide 1.4.3 para texto de 12 px. Se le da superficie
   opaca y color a la vez, no solo fondo: asi el contraste deja de depender de
   lo que haya debajo, que es lo que lo rompia.
   El margen inferior negativo se quita a proposito: con fondo transparente solo
   solapaba, pero con superficie opaca taparia el borde superior de los botones
   de .modal-actions y podria interceptar el clic de "Cerrar Vista Previa". */
.modal-nota-papel {
    font-size: 0.75rem;
    color: var(--text-color);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.9rem;
    margin: 0 0 0.6rem;
}
body.dark-mode .modal-nota-papel {
    color: var(--text-color);
    background: var(--panel-bg);
    border-color: var(--border-color);
}

/* La vista previa no es interfaz: es el documento que va a salir por la
   impresora y por el PDF, asi que se queda en papel tambien con el tema oscuro
   puesto. Hasta ahora solo se fijaba el fondo, y eso no basta.

   Medido con el dialogo abierto en oscuro: el texto que usa los testigos del
   tema caia claro sobre ese blanco (1,10:1), y .print-parties pintaba
   var(--bg-color) -el fondo oscuro de la aplicacion, #0f1117- dentro de la
   propia hoja, con la tinta oscura del papel encima (1,29:1). Redefinir los
   testigos dentro del papel arregla las dos direcciones a la vez, y cualquier
   texto o caja que se anada despues nace ya con los colores del documento.

   El cromo que rodea a la hoja -cerrar, imprimir, descargar, enviar- se queda
   fuera y sigue al tema: un boton claro suelto sobre una aplicacion oscura es
   una isla sin explicacion. */
body.dark-mode .printable-invoice {
    --text-color: #1e293b;
    --text-muted: #475569;
    --dark-slate: #0f172a;
    --border-color: #e2e8f0;
    --panel-bg: #ffffff;
    --bg-color: #ffffff;
    --bg-surface: #f8fafc;
    --bg-card: #ffffff;
    --primary-light: #eef2ff;
    background-color: #ffffff;
    color: #1e293b;
}

/* Thin colored top border on A4 page */
.print-accent-border {
    height: 4px;
    background: var(--invoice-accent, #2563eb);
    border-radius: 4px 4px 0 0;
    margin: -4rem -4rem 2rem -4rem;
    width: calc(100% + 8rem);
}

/* FACTURA Nº accent color */
.print-fac-num-accent {
    color: var(--invoice-accent, #2563eb) !important;
}

/* Table header accent */
.printable-invoice .print-items-table th {
    border-bottom-color: var(--invoice-accent, #2563eb);
    color: var(--invoice-accent, #2563eb);
}

/* Grand total accent */
.print-total-accent {
    border-top-color: var(--invoice-accent, #2563eb) !important;
}
.print-total-accent span:last-child {
    color: var(--invoice-accent, #2563eb) !important;
}

/* =====================================================================
   QR POSITION VARIANTS
   ===================================================================== */

/* Default: bottom-right (QR left, text right — original layout) */
.print-verifactu-container.qr-bottom-right {
    order: 99;
    grid-template-columns: auto 1fr;
    direction: ltr;
}

/* bottom-left: QR right side, text left */
.print-verifactu-container.qr-bottom-left {
    order: 99;
    grid-template-columns: 1fr auto;
    direction: ltr;
}
.print-verifactu-container.qr-bottom-left .qr-laser-wrapper {
    order: 2;
}
.print-verifactu-container.qr-bottom-left .print-vf-legal {
    order: 1;
    text-align: left;
}

/* top-right: moves the QR block to the top of the invoice */
.print-verifactu-container.qr-top-right {
    order: -1;
    grid-template-columns: auto 1fr;
    border-top: none;
    border-bottom: 2px dashed var(--border-color);
    padding-top: 0;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}

/* top-left: QR top, text right side */
.print-verifactu-container.qr-top-left {
    order: -1;
    grid-template-columns: 1fr auto;
    border-top: none;
    border-bottom: 2px dashed var(--border-color);
    padding-top: 0;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}
.print-verifactu-container.qr-top-left .qr-laser-wrapper {
    order: 2;
}
.print-verifactu-container.qr-top-left .print-vf-legal {
    order: 1;
    text-align: left;
}

/* Print media for QR positions */
@media print {
    .print-accent-border {
        margin: 0 0 1.5rem 0 !important;
        width: 100% !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-verifactu-container.qr-top-right,
    .print-verifactu-container.qr-top-left {
        order: -1;
        border-bottom: 2px dashed #ccc;
        border-top: none;
    }

    .print-verifactu-container.qr-bottom-right,
    .print-verifactu-container.qr-bottom-left {
        order: 99;
    }

    .print-fac-num-accent,
    .print-total-accent span:last-child {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Color picker styling */
input[type="color"] {
    border: 1px solid var(--border-color);
    background: #fff;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    aside, .metric-card, .menu-item-btn, .chain-node, .chain-arrow,
    .chain-node.invalid, .header-badge-dot, .escudo-fiscal-badge, .empty-state-icon, .chain-particle-line::before {
        animation: none !important;
        transition: none !important;
    }
}

/* === MODULE VISIBILITY === */
.modulo-hidden {
    display: none !important;
}

/* === COBROS BADGES === */
.cobr-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cobr-cobrada { background: #f0fdf4; color: #166534; }
.cobr-parcial { background: #fffbeb; color: #92400e; }
.cobr-pendiente { background: #f8fafc; color: #64748b; }
.cobr-vencida { background: #fef2f2; color: #991b1b; }
.cobr-vencida-parcial { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
/* Una factura anulada por un abono y el abono en si: no son saldo pendiente. */
.cobr-rectificada { background: #eef2ff; color: #3730a3; }
.cobr-abono { background: #f1f5f9; color: #334155; }
.cobr-anulada { background: #fff1f2; color: #9f1239; border: 1px solid #be123c; }
.hist-cancellation-record {
    margin: 0 0.65rem 0.65rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid #be123c;
    border-left-width: 3px;
    border-radius: 7px;
    background: #fff1f2;
    color: #881337;
    font-size: 0.7rem;
}

/* Cobros metrics responsive */
@media (max-width: 800px) {
    #pane-cobr > div:nth-child(2) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    #pane-cobr > div:nth-child(2) { grid-template-columns: 1fr; }
}

/* =====================================================================
   v4.1 UX REDESIGN — Clean, neutral, professional
   ===================================================================== */

/* Override text-accent to use dark slate instead of orange */
.text-accent { color: #1e293b !important; }

/* === HUELLA COLUMN: hidden by default, toggle with JS === */
.col-huella { display: none; }
.col-huella.col-huella-visible { display: table-cell; }

/* === HAMBURGER BUTTON (mobile only) === */
.hamburger-btn {
    display: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--dark-slate);
    line-height: 1;
}

/* === SIDEBAR OVERLAY (mobile) === */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 90;
}
.sidebar-overlay-active {
    display: block;
}

/* === MOBILE RESPONSIVE SIDEBAR === */
@media (max-width: 768px) {
    .hamburger-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    aside {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    aside.sidebar-open {
        transform: translateX(0);
    }

    .workspace {
        padding: 1.25rem 1rem;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .header-user-pill {
        display: none !important;
    }

    .escudo-fiscal-badge {
        display: none !important;
    }

    header {
        padding: 0.5rem 1rem;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .metrics-grid {
        grid-template-columns: 1fr !important;
    }

    .workspace-header h2 {
        font-size: 1.25rem;
    }
}

/* === TYPOGRAPHY CLEANUP (item #10) === */
.workspace-header p {
    font-size: 0.85rem;
}

label {
    letter-spacing: 0.15px;
}

.chart-title {
    letter-spacing: 0.3px;
}

/* =====================================================================
   DARK MODE TOGGLE BUTTON
   ===================================================================== */

.theme-toggle-btn {
    background: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.15s;
}
.theme-toggle-btn:hover {
    background: #f1f5f9;
}

/* =====================================================================
   DARK MODE — Elegant professional theme (Stripe/Linear style)
   ===================================================================== */

body.dark-mode {
    --bg-color: #0f1117;
    --bg-surface: #1a1d27;
    --bg-card: #1e2130;
    --bg-hover: #252838;
    --panel-bg: #1e2130;
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --dark-slate: #f1f5f9;
    --border-color: #2d3348;
    --primary-light: rgba(79,70,229,0.12);
    --success-light: rgba(16,185,129,0.1);
    --error-light: rgba(239,68,68,0.1);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.5);

    background-color: var(--bg-color);
    background-image:
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.06) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.04) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(217, 119, 6, 0.03) 0px, transparent 50%);
    color: var(--text-color);
}

/* Header */
body.dark-mode header {
    background: rgba(26, 29, 39, 0.95);
    border-color: var(--border-color);
}

/* Toggle button in dark */
body.dark-mode .theme-toggle-btn {
    border-color: #2d3348;
}
body.dark-mode .theme-toggle-btn:hover {
    background: #252838;
}

/* Glass panels / cards */
body.dark-mode .glass-panel {
    background: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .glass-panel h3 {
    color: var(--dark-slate);
}

/* Metric cards */
body.dark-mode .metric-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .metric-value {
    color: #f1f5f9;
}

/* Workspace header */
body.dark-mode .workspace-header {
    border-color: var(--border-color);
}

body.dark-mode .workspace-header h2 {
    color: #f1f5f9;
}

/* Workspace scrollbar */
body.dark-mode .workspace::-webkit-scrollbar-thumb {
    background: #6b7194;
}
body.dark-mode .workspace::-webkit-scrollbar-thumb:hover {
    background: #7d84a8;
}

/* Tables */
body.dark-mode .data-table th {
    background: var(--bg-surface);
    color: var(--text-muted);
    border-color: var(--border-color);
}

body.dark-mode .data-table td {
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .data-table tbody tr:nth-child(even) {
    background: var(--bg-surface);
}

body.dark-mode .data-table tbody tr:hover {
    background: var(--bg-hover);
}

body.dark-mode .data-table-container {
    border-color: var(--border-color);
}

/* Items table (invoice form) */
body.dark-mode .items-table th {
    background-color: var(--bg-surface);
    color: var(--text-muted);
    border-color: var(--border-color);
}

body.dark-mode .items-table td {
    border-color: var(--border-color);
}

/* Forms */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

body.dark-mode input[readonly],
body.dark-mode select[readonly] {
    background-color: var(--bg-surface);
    color: var(--text-muted);
}

body.dark-mode input[type="color"] {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

body.dark-mode label {
    color: var(--text-color);
}

body.dark-mode .form-help {
    color: var(--text-muted);
}

/* Buttons */
body.dark-mode .btn-secondary {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .btn-secondary:hover {
    background: var(--bg-hover);
}

/* Search button in header */
body.dark-mode .btn-secondary.no-print {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
body.dark-mode .btn-secondary.no-print kbd {
    background: var(--bg-hover) !important;
    color: var(--text-color) !important;
}

/* Info alerts */
body.dark-mode .info-alert {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-color);
    border-left-color: #3b82f6;
}

body.dark-mode .info-alert a {
    color: #60a5fa;
}

body.dark-mode .info-alert-close {
    /* #4b5563 daba 2,22:1 sobre la superficie oscura: no se veia. */
    color: var(--text-muted);
}
body.dark-mode .info-alert-close:hover {
    color: var(--text-color);
    background: rgba(255,255,255,0.06);
}

body.dark-mode .info-alert.alert-success {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.2);
    border-left-color: var(--success);
    color: #34d399;
}

body.dark-mode .info-alert.alert-danger {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.2);
    border-left-color: var(--error);
    color: #f87171;
}

/* Modals */
body.dark-mode .modal-overlay {
    background-color: rgba(0,0,0,0.7);
}

body.dark-mode .modal-container .glass-panel {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .modal-actions {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Role banners */
body.dark-mode .role-access-banner.admin {
    background: rgba(79,70,229,0.1);
    border-color: rgba(79,70,229,0.2);
    color: #a5b4fc;
}

body.dark-mode .role-access-banner.employee {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.2);
    color: #6ee7b7;
}

body.dark-mode .role-access-banner.auditor {
    background: rgba(217,119,6,0.08);
    border-color: rgba(217,119,6,0.2);
    color: #fbbf24;
}

/* Cobros badges */
body.dark-mode .cobr-badge.cobr-pendiente {
    background: rgba(100,116,139,0.2);
    color: #94a3b8;
}
body.dark-mode .cobr-badge.cobr-cobrada {
    background: rgba(16,185,129,0.15);
    color: #34d399;
}
body.dark-mode .cobr-badge.cobr-parcial {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}
body.dark-mode .cobr-badge.cobr-vencida {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}
body.dark-mode .cobr-badge.cobr-vencida-parcial {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.3);
}

/* Sin estas dos reglas los distintivos nuevos heredaban el fondo claro y
   quedaban como dos pildoras casi blancas en una tabla oscura. */
body.dark-mode .cobr-badge.cobr-rectificada {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
}
body.dark-mode .cobr-badge.cobr-abono {
    background: rgba(148,163,184,0.15);
    color: #cbd5e1;
}
body.dark-mode .cobr-badge.cobr-anulada {
    background: rgba(244,63,94,0.15);
    color: #fda4af;
    border-color: #fb7185;
}
body.dark-mode .hist-cancellation-record {
    background: rgba(244,63,94,0.1);
    color: #fecdd3;
    border-color: #fb7185;
}

/* Hash tags */
body.dark-mode .hash-tag {
    background: var(--bg-surface);
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Empty state */
body.dark-mode .empty-state-box {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

body.dark-mode .empty-state-title {
    color: #f1f5f9;
}

/* Visual chain */
body.dark-mode .visual-chain-wrapper {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

body.dark-mode .chain-node {
    background-color: var(--bg-card);
}

body.dark-mode .chain-node.valid::before {
    background-color: var(--bg-card);
}

body.dark-mode .chain-node.invalid {
    background-color: rgba(239,68,68,0.08);
}

body.dark-mode .chain-node.invalid::before {
    background-color: var(--bg-card);
}

body.dark-mode .chain-node-total {
    color: #f1f5f9;
}

body.dark-mode .chain-node-hash-box {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Chart containers */
body.dark-mode .chart-container {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

body.dark-mode .bar-val {
    color: #f1f5f9;
}

body.dark-mode .bar-wrapper {
    background-color: var(--border-color);
}

/* Panel secondary */
body.dark-mode .panel-secondary {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

/* Notification toast */
body.dark-mode .notification {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: #f1f5f9;
}

/* Escudo Fiscal badge */
body.dark-mode .escudo-fiscal-badge {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.25);
}

body.dark-mode .escudo-fiscal-badge.warning {
    background: rgba(217,119,6,0.1);
    border-color: rgba(217,119,6,0.25);
}

body.dark-mode .escudo-fiscal-badge.danger {
    background: rgba(220,38,38,0.1);
    border-color: rgba(220,38,38,0.25);
}

/* El aviso de limite de plan se centraba con un style en linea que ademas
   machacaba el resto; ahora lo dice una clase. */
.modal-overlay.modal-centrado { align-items: center; }

/* El emoji del escudo es decorativo: fuera del arbol de accesibilidad. */
.escudo-emoji { font-size: 0.95em; line-height: 1; }

/* El bloque roto de la cadena se nombra, no solo se colorea. */
.chain-node-state {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ui-danger);
}

/* Header user pill */
body.dark-mode .header-user-pill {
    background: rgba(79,70,229,0.1) !important;
    border-color: rgba(79,70,229,0.25) !important;
}

body.dark-mode .header-user-pill #header-user-name {
    color: #e2e8f0 !important;
}

body.dark-mode .header-user-pill #header-user-role-badge {
    background: var(--bg-surface) !important;
    color: #a5b4fc !important;
    border-color: rgba(79,70,229,0.3) !important;
}

/* Form total box */
body.dark-mode .form-total-row span:last-child {
    color: #f1f5f9;
}

body.dark-mode .form-total-row.grand {
    border-color: var(--border-color);
}

/* Checklist (#pane-cert) */
body.dark-mode #pane-cert label {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Session info box in sidebar */
body.dark-mode .session-info-box {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

/* Text accent override for dark */
body.dark-mode .text-accent {
    color: #f1f5f9 !important;
}

/* Tipo factura badges (keep readable in dark) */
body.dark-mode .badge-tipo-f1 {
    background: rgba(37,99,235,0.15);
    border-color: rgba(37,99,235,0.3);
}
body.dark-mode .badge-tipo-f2 {
    background: rgba(124,58,237,0.15);
    border-color: rgba(124,58,237,0.3);
}
body.dark-mode .badge-tipo-r1 {
    background: rgba(220,38,38,0.15);
    border-color: rgba(220,38,38,0.3);
}

/* Role badges */
body.dark-mode .badge-admin {
    background: rgba(79,70,229,0.15);
    border-color: rgba(79,70,229,0.25);
}
body.dark-mode .badge-employee {
    background: rgba(37,99,235,0.15);
    border-color: rgba(37,99,235,0.25);
}
body.dark-mode .badge-auditor {
    background: rgba(217,119,6,0.15);
    border-color: rgba(217,119,6,0.25);
}

/* Role disabled in dark */
body.dark-mode .role-disabled {
    background-color: var(--bg-surface) !important;
}

/* Command palette modal */
body.dark-mode #command-palette-overlay {
    background: rgba(0,0,0,0.7);
}

body.dark-mode #cp-search-input {
    color: var(--text-color) !important;
}

/* Hamburger in dark */
body.dark-mode .hamburger-btn {
    color: #e2e8f0;
    border-color: var(--border-color);
}

/* Logo text in dark header */
body.dark-mode .logo-text h1 {
    color: #f1f5f9;
}

/* ===== SUPERADMIN PANEL ===== */
.sadmin-kpi { padding:1rem; }
.sadmin-kpi-label { font-size:0.7rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.sadmin-kpi-value { font-size:1.75rem; font-weight:800; color:var(--dark-slate); line-height:1.2; }
.sadmin-kpi-sub { font-size:0.7rem; color:var(--text-muted); margin-top:0.1rem; }
.sadmin-subtab { border-radius:6px !important; }
.sadmin-subtab.active { background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }

/* ===== LEADS EMAIL SEQUENCE ===== */
.leads-seq-btn.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* ===== LEADS SPLIT PANEL ===== */
.leads-card-item:hover { background: var(--primary-light) !important; }
.leads-card-active { background: var(--primary-light) !important; box-shadow: inset 3px 0 0 var(--primary); }
@media (max-width: 900px) {
    #leads-split { grid-template-columns: 1fr !important; }
    #leads-detail-panel { position: static !important; }
    #leads-card-list { max-height: 300px !important; }
}

/* ===== HISTORIAL SPLIT PANEL ===== */
.hist-card-item {
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s, box-shadow 0.15s;
}
.hist-card-item:first-child { border-radius: 10px 10px 0 0; }
.hist-card-item:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }
.hist-card-item:only-child { border-radius: 10px; }
.hist-card-item:hover { background: var(--primary-light) !important; }
.hist-card-active { background: var(--primary-light) !important; box-shadow: inset 3px 0 0 var(--primary); }
.hist-card-item:focus-visible { outline: 3px solid var(--ui-primary); outline-offset: -3px; }
@media (max-width: 900px) {
    #hist-split { grid-template-columns: 1fr !important; }
    #hist-detail-panel { position: static !important; }
    #hist-card-list { max-height: 300px !important; }
}

/* ===== P1 FIXES: Mobile responsive for invoice items table ===== */
.items-table { width: 100%; }
@media (max-width: 768px) {
    .items-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .items-table thead { font-size: 0.7rem; }
    .items-table td, .items-table th { padding: 0.4rem 0.5rem; font-size: 0.75rem; white-space: nowrap; }
    .items-table input, .items-table select { min-width: 70px; font-size: 0.78rem; }
    .print-parties { flex-direction: column !important; }
    .print-parties > div { width: 100% !important; }
}

/* ===== P2 FIXES: audit trail max-height + scroll ===== */
#audit-trail-container { max-height: 600px; overflow-y: auto; }

/* ===== P2 FIXES: required field asterisks ===== */
.form-group label[for] + input[required]::placeholder,
input[required] { border-left: 3px solid var(--primary); }

/* ===== Mobile: cobros, presupuestos tables and modals ===== */
@media (max-width: 768px) {
    .data-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 600px; }
    /* Nueve columnas no caben en 600. */
    .data-table.gastos-table { min-width: 720px; }
    .modal-container { max-width: 95vw !important; margin: 1rem; }
}

/* ===== Dark mode: Hacker Mode / tamper button ===== */
body.dark-mode .btn-warning-light {
    background-color: #422006 !important;
    border-color: #854d0e !important;
    color: #fbbf24 !important;
}
body.dark-mode .btn-warning-light:hover {
    background-color: #713f12 !important;
}

/* Print override: ALWAYS light mode for printing */
@media print {
    body.dark-mode {
        background: white !important;
        color: black !important;
    }
    body.dark-mode .printable-invoice {
        background: white !important;
        color: #1e293b !important;
    }
}

/* Internal workspace: clear actions, readable data and shared theme surfaces. */
:root {
    /* --ui-*: color de TEXTO sobre una superficie. Los nombres sin prefijo
       (--primary, --success, --error, --accent) son RELLENOS, con texto
       encima. Separarlos hacia falta igualmente: --success y --accent no
       llegaban a 4,5:1 con blanco encima ni siquiera en modo claro. */
    --ui-primary: #4f46e5;
    --ui-danger: #be123c;
    --ui-success: #047857;
    --ui-accent: #b45309;
    --ui-warning: #92400e;
    --ui-warning-bg: #fffbeb;
    --ui-warning-bg-strong: #fef3c7;
    /* Rellenos corregidos: con blanco encima dan 5,48:1 y 5,02:1. */
    --ui-success-fill: #047857;
    --ui-accent-fill: #b45309;
}
body.dark-mode {
    --ui-primary: #a5b4fc;
    --ui-danger: #fda4af;
    --ui-success: #6ee7b7;
    --ui-accent: #fbbf24;
    --ui-warning: #fcd34d;
    --ui-warning-bg: #332a19;
    --ui-warning-bg-strong: #4a3a1a;
    --ui-success-fill: #047857;
    --ui-accent-fill: #b45309;
}
[hidden] { display: none !important; }

/* aria-disabled y no disabled: el boton conserva el foco mientras trabaja.
   Dos significados distintos, dos aspectos distintos. */
/* No disponible todavia: no hay nada que hacer con el. */
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* Trabajando: dura varios segundos, asi que mantiene el contraste intacto y
   lo que cambia es el cursor y un indicador de giro. */
.btn[aria-disabled="true"].is-ocupado { opacity: 1; cursor: progress; }
.btn[aria-disabled="true"].is-ocupado::after {
    content: ""; width: 0.85em; height: 0.85em; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: btn-ocupado-giro 0.7s linear infinite;
}
@keyframes btn-ocupado-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn[aria-disabled="true"].is-ocupado::after { animation: none; }
}
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--ui-primary);
    outline-offset: 3px;
}
aside button:focus-visible, aside a:focus-visible { outline-color: #a5b4fc; }
.workspace { min-width: 0; padding: 1.75rem 2rem; }
aside { width: 244px; padding: 1rem; gap: 0.8rem; }
.header-tools { display: flex; align-items: center; gap: 0.65rem; }
.header-search { min-height: 36px; }
.header-search > span:first-child { font-size: 1.3rem; line-height: 1; }
.menu-list { gap: 0.25rem; }
.menu-item-btn { min-height: 42px; padding: 0.65rem 0.8rem; font-size: 0.86rem; }
.menu-item-btn:hover { transform: none; }
.nav-icon { width: 19px; height: 19px; flex-shrink: 0; }
.nav-create-item { padding: 0.65rem 0; }
.nav-create { color: #c7d2fe; border: 1px solid rgba(165,180,252,0.35); }
.nav-config-group { padding-top: 0.75rem; margin-top: 0.3rem; border-top: 1px solid rgba(255,255,255,0.1); }
.nav-config-toggle .mg-chevron, .nav-group-toggle .mg-chevron { margin-left: auto; }
.nav-group-toggle { font-weight: 650; }
.nav-group-toggle.has-active-view { color: var(--ui-primary); background: var(--primary-light); }
.nav-submenu[hidden] { display: none; }
.nav-submenu { list-style: none; margin: 0.25rem 0 0 1rem; padding-left: 0.5rem; border-left: 1px solid #475569; }
.nav-submenu .menu-item-btn { font-size: 0.78rem; min-height: 40px; }
.sidebar-footer-note { margin-top: auto; color: #94a3b8; font-size: 0.7rem; padding: 0.5rem 0.75rem; }
.workspace-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.workspace-header > div { min-width: 0; }
.workspace-primary-action { flex-shrink: 0; min-height: 42px; }
.workspace-primary-action, .payment-panel .btn:not(.btn-secondary), #invoice-form .btn:not(.btn-secondary) { background-color: var(--primary); color: #fff; }
.workspace-primary-action:hover, .payment-panel .btn:not(.btn-secondary):hover, #invoice-form .btn:not(.btn-secondary):hover { background-color: var(--primary-dark); color: #fff; }
body.dark-mode .btn:not(.btn-secondary):not(.btn-danger):not(.btn-warning-light) { background-color: var(--primary); color: #fff; }
body.dark-mode .btn:not(.btn-secondary):not(.btn-danger):not(.btn-warning-light):hover { background-color: var(--primary-dark); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
.dashboard-primary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-primary-metrics .metric-card { padding: 1.1rem 1.2rem; }
.dashboard-primary-metrics .metric-card:hover { transform: none; }
.dashboard-primary-metrics .metric-title { font-size: 0.8rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.dashboard-primary-metrics .metric-value { font-size: clamp(1.35rem, 2.1vw, 1.9rem); font-variant-numeric: tabular-nums; }
.dashboard-primary-metrics .metric-overdue .metric-value { color: var(--ui-danger); }
.dashboard-primary-metrics .metric-desc { display: block; line-height: 1.5; }
.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dashboard-section-heading h3 { font-size: 1rem; }
.dashboard-section-heading .btn { flex-shrink: 0; font-size: 0.78rem; min-height: 38px; }
.dashboard-tasks .dashboard-section-heading { margin-bottom: 0; }
.dashboard-tasks p { margin-top: 0.35rem; font-size: 0.84rem; line-height: 1.6; }
.dash-hoy-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.dash-hoy-list:empty { display: none; }
.dash-hoy-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.85rem 1rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-color); }
.dash-hoy-list li p { margin: 0; }
.dash-hoy-list li .btn { flex-shrink: 0; font-size: 0.78rem; min-height: 38px; }
.dash-hoy-list li.dash-hoy-urgente { border-left: 3px solid var(--ui-danger); }
@media (max-width: 640px) { .dash-hoy-list li { flex-wrap: wrap; } .dash-hoy-list li .btn { width: 100%; } }
.dashboard-demo-note { font-size: 0.78rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 1rem; }
.text-button { color: var(--ui-primary); border: 0; background: transparent; padding: 0.25rem; cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.dark-mode .text-button { color: #a5b4fc; }
.dashboard-system-alert { padding: 0.8rem 1rem; border-left: 3px solid var(--ui-danger); background: var(--error-light); color: var(--ui-danger); border-radius: 6px; }
.dashboard-details { border: 1px solid var(--border-color); border-radius: 12px; background: var(--panel-bg); margin-bottom: 1rem; }
.dashboard-details > summary { cursor: pointer; padding: 1.1rem 1.25rem; color: var(--dark-slate); font-size: 0.88rem; font-weight: 600; }
.dashboard-details .details-hint { margin-left: 0.7rem; color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
.dashboard-details-content { padding: 0.25rem 1rem 0; }
.dashboard-details-content .glass-panel { box-shadow: none; }
.dashboard-secondary-metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dashboard-secondary-metrics .metric-value { font-size: 1.15rem; }
.dashboard-secondary-metrics .metric-value-status { font-size: 1rem; }
.dashboard-details-content .escudo-fiscal-badge { margin-bottom: 1rem; }
.dashboard-plan-note { padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.8rem; align-items: center; justify-content: space-between; gap: 1rem; }
body.dark-mode .dashboard-plan-note { background: var(--primary-light) !important; border-color: var(--border-color) !important; }
.dashboard-empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); line-height: 1.6; }
.dashboard-empty strong { display: block; color: var(--dark-slate); font-size: 0.95rem; }
.data-table { table-layout: auto; }
.data-table th, .data-table td { padding: 0.8rem 0.65rem; line-height: 1.45; vertical-align: middle; }
.invoice-number { display: block; color: var(--dark-slate); white-space: nowrap; }
.table-secondary { display: block; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.76rem; line-height: 1.45; overflow-wrap: anywhere; }
.data-table .amount-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Desglose del gasto: base, mas IVA, menos retencion, total. Las palabras
   "Mas" y "Menos" van en el texto, no en un signo, porque un menos suelto o
   no se pronuncia o se lee como guion. */
.gast-resumen { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.gast-resumen-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.85rem; }
.gast-resumen-linea dt { color: var(--text-muted); margin: 0; }
.gast-resumen-linea dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.gast-resumen-total { border-top: 1px solid var(--border-color); padding-top: 0.4rem; margin-top: 0.2rem; }
.gast-resumen-total dt { color: var(--text-color); font-weight: 700; }
.gast-resumen-total dd { font-size: 1.1rem; font-weight: 800; color: var(--ui-primary); }

/* El proveedor es la cabecera de su fila: al leer un importe suelto se oye de
   quien es. Hay que anular el estilo de cabecera de columna. */
.data-table tbody th {
    background: transparent; text-transform: none; letter-spacing: 0;
    font-size: 0.82rem; font-weight: 600; color: var(--text-color); text-align: left;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border-color);
}
.data-table .date-cell { white-space: nowrap; }
.table-detail-button { white-space: nowrap; padding: 0.5rem 0.65rem; font-size: 0.75rem; min-height: 36px; }
.dashboard-recent-table td:first-child { min-width: 155px; }
.form-group, .form-row > * { min-width: 0; }
.form-total-row { width: min(300px, 100%); }

/* Collection dialogs share one layout in light and dark themes. */
.payment-overlay { padding: 1.25rem; align-items: flex-start; overscroll-behavior: contain; z-index: 9999; scroll-padding-bottom: 6rem; }
.payment-overlay .payment-dialog { width: 100%; max-width: 800px; margin: 0 auto; min-width: 0; }
.payment-overlay .payment-panel { background: var(--panel-bg); color: var(--text-color); border-color: var(--border-color); margin: 0; padding: 1.5rem; min-width: 0; }
.payment-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-bottom: 1.25rem; }
.payment-header h3 { color: var(--dark-slate); font-size: 1.1rem; }
.payment-header p { color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; margin-top: 0.3rem; }
.payment-header > button { flex-shrink: 0; min-width: 40px; min-height: 40px; }
.payment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.payment-form-grid > * { min-width: 0; }
.payment-form-grid input, .payment-form-grid select, .payment-form-grid textarea { width: 100%; min-width: 0; max-width: 100%; }
.payment-form-grid .form-group.full, .payment-form-grid .payment-full-width { grid-column: 1 / -1; }
.payment-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0 0.75rem; }
.payment-section-heading h4 { font-size: 0.9rem; color: var(--dark-slate); }
.payment-invoices { display: grid; gap: 0.65rem; min-width: 0; margin-bottom: 1rem; }
.payment-invoice-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(125px, 155px); gap: 1rem; align-items: center; padding: 0.9rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-color); }
.payment-invoice-info { display: flex; align-items: flex-start; gap: 0.65rem; min-width: 0; line-height: 1.5; cursor: pointer; }
.payment-invoice-info input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; margin-top: 0.2rem; accent-color: var(--primary); }
.payment-invoice-info strong { display: block; color: var(--dark-slate); overflow-wrap: anywhere; }
.payment-invoice-info small { display: block; color: var(--text-muted); font-size: 0.76rem; font-weight: 400; overflow-wrap: anywhere; }
.payment-allocation { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.payment-allocation input { width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 1rem; border: 1px solid var(--border-color); background: var(--bg-color); border-radius: 10px; margin: 1rem 0; }
.payment-summary-item { min-width: 0; }
.payment-summary-item span { display: block; color: var(--text-muted); font-size: 0.74rem; margin-bottom: 0.25rem; }
.payment-summary-item strong { color: var(--dark-slate); font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payment-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; position: sticky; bottom: -1px; border-top: 1px solid var(--border-color); padding: 1rem 0 0; margin-top: 1.25rem; background: var(--panel-bg); z-index: 3; }
.payment-actions .btn { min-height: 42px; }
/* El scroll-margin va en los controles, no solo el scroll-padding en el
   contenedor: con tabulador real a 320 px el campo de notas seguia quedando
   debajo de la barra pegajosa. */
.payment-panel input, .payment-panel select, .payment-panel textarea, .payment-panel .btn { scroll-margin-bottom: 7rem; }
/* Vacias siguen en el documento: quitarlas con hidden y devolverlas con el
   texto ya dentro es lo que hacia que el aviso no se anunciara. Se quedan sin
   ocupar hasta que tienen algo que decir. */
.payment-feedback:empty { padding: 0; margin: 0; border-width: 0; font-size: 0; }
.payment-feedback { font-size: 0.84rem; line-height: 1.6; padding: 0.9rem 1rem; margin: 1rem 0; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-color); }
.payment-feedback.is-error { background: var(--error-light); color: var(--ui-danger); border-color: currentColor; }
.payment-feedback.is-success { background: var(--success-light); color: var(--ui-success); }
.payment-summary-help { color: var(--text-muted); font-size: 0.78rem; line-height: 1.6; }

/* El bloque de cobro de la ficha de factura. Las cifras en tabulares para que
   los euros queden en columna y se puedan comparar de un vistazo. */
.ficha-cobro {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.ficha-cobro-titulo {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.ficha-cobro-datos {
    display: grid;
    gap: 0.3rem 1.5rem;
    margin: 0;
}

.ficha-cobro-datos > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
}

.ficha-cobro-datos dt {
    color: var(--text-muted);
}

.ficha-cobro-datos dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ficha-cobro-nota {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.payment-empty { color: var(--text-muted); padding: 1rem; text-align: center; font-size: 0.82rem; }
.payment-overdue { color: var(--ui-danger); }
.payment-batch-list { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 1rem 0; }
.payment-batch-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.65rem; padding: 0.85rem; border: 1px solid var(--border-color); border-radius: 8px; }
.payment-batch-row strong { color: var(--dark-slate); }
.payment-batch-row small { display: block; color: var(--text-muted); line-height: 1.5; }
.payment-batch-status { font-size: 0.78rem; color: var(--text-muted); }
.payment-batch-status.is-error { color: var(--ui-danger); }
.payment-batch-status.is-success { color: var(--ui-success); }
.collections-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; margin-bottom: 1rem; }
.collections-filters > label, .collections-filters > .form-group { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 145px; min-width: 0; }
.collections-filters input, .collections-filters select { width: 100%; min-width: 0; }
.collections-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; position: sticky; top: 0; padding: 0.9rem 1rem; margin-bottom: 0.8rem; background: var(--panel-bg); border: 1px solid var(--primary); border-radius: 10px; box-shadow: var(--shadow-sm); z-index: 20; }
.collections-bulk-bar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.collections-bulk-bar .btn { min-height: 40px; font-size: 0.78rem; }
.collections-table td:first-child, .collections-table th:first-child { width: 36px; padding-right: 0.25rem; }
.collections-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.collections-table td strong, .payments-history-table td strong { overflow-wrap: anywhere; }
.collections-table td small, .payments-history-table td small { display: block; color: var(--text-muted); line-height: 1.5; font-size: 0.74rem; }
.collection-client strong { display: block; white-space: nowrap; color: var(--dark-slate); }
.collection-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.collection-amount strong { display: block; }
.collections-table .btn, .payments-history-table .btn { padding: 0.5rem 0.65rem; min-height: 36px; font-size: 0.76rem; white-space: nowrap; }

/* Invoice draft continuity and inline client creation. */
.invoice-draft-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding: 0.7rem 1rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--panel-bg); font-size: 0.8rem; color: var(--text-muted); }
.invoice-draft-bar .btn { min-height: 36px; padding: 0.45rem 0.65rem; font-size: 0.76rem; }
.invoice-steps { display: flex; flex-wrap: wrap; list-style: none; gap: 0.6rem 1.2rem; padding: 0 0 1.25rem; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.invoice-steps > * { display: inline-flex; align-items: center; gap: 0.35rem; }
.invoice-client-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.invoice-client-actions > select, .invoice-client-actions > .form-group { flex: 1 1 220px; min-width: 0; }
.invoice-client-actions .btn { min-height: 42px; font-size: 0.8rem; }
.invoice-client-inline { padding: 1rem; border: 1px solid var(--border-color); background: var(--bg-color); border-radius: 10px; margin-top: 0.8rem; }
.invoice-client-inline summary { cursor: pointer; color: var(--dark-slate); font-size: 0.88rem; font-weight: 600; }
.invoice-client-inline[open] summary { margin-bottom: 1rem; }
.invoice-client-inline .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invoice-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1rem; }
.invoice-form-actions .btn { min-height: 42px; }
.emit-preview-summary { padding: 1rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 10px; margin: 1rem 0; line-height: 1.6; font-size: 0.86rem; }
.emit-preview-summary strong { color: var(--dark-slate); }
.invoice-review-lines { display: grid; gap: 0.4rem; padding: 0.75rem 0; margin: 0.5rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); overflow-wrap: anywhere; }
.invoice-review-total { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.invoice-steps { counter-reset: invoice-step; }
.invoice-steps > li::before { counter-increment: invoice-step; content: counter(invoice-step); display: inline-flex; width: 23px; height: 23px; align-items: center; justify-content: center; border: 1px solid var(--border-color); background: var(--panel-bg); border-radius: 50%; color: var(--dark-slate); font-size: 0.7rem; }

/* Feedback never uses a success symbol or progress timer for errors. */
.notification { max-width: min(540px, calc(100vw - 2rem)); background: var(--panel-bg); color: var(--dark-slate); padding: 1rem; gap: 0.7rem; align-items: flex-start; z-index: 10001; opacity: 0; visibility: hidden; pointer-events: none; }
.notification.show { opacity: 1; visibility: visible; pointer-events: auto; }
.notification.toast-success { border-left-color: var(--ui-success); }
.notification.toast-error { border-left-color: var(--ui-danger); }
.notification.toast-warning { border-left-color: var(--ui-warning); }
.notification.toast-info { border-left-color: var(--primary); }
.toast-icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-weight: 800; background: var(--primary-light); }
.toast-success .toast-icon { background: var(--success-light); color: var(--ui-success); }
.toast-error .toast-icon { background: var(--error-light); color: var(--ui-danger); }
.toast-warning .toast-icon { background: var(--ui-warning-bg); color: var(--ui-warning); }
.toast-message { flex: 1; line-height: 1.55; font-weight: 500; overflow-wrap: anywhere; }
.toast-close { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 1.25rem; cursor: pointer; flex-shrink: 0; margin-top: -0.3rem; }
.toast-close:hover { background: var(--bg-color); color: var(--dark-slate); }
.toast-error .notification-progress { display: none; }
.toast-info .notification-progress { background: var(--primary); }
.toast-warning .notification-progress { background: var(--ui-warning); }

@media (max-width: 1100px) {
    .workspace { padding: 1.5rem; }
    .header-user-pill #header-user-role-badge { display: none; }
    .dashboard-details .details-hint { display: block; margin: 0.35rem 0 0 1rem; }
    .dashboard-primary-metrics .metric-card { padding: 1rem; }
}
@media (max-width: 1000px) {
    .dashboard-recent-table, .collections-table, .payments-history-table { display: block; min-width: 0; }
    .dashboard-recent-table thead, .collections-table thead, .payments-history-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .dashboard-recent-table tbody, .collections-table tbody, .payments-history-table tbody { display: grid; gap: 0.75rem; }
    .dashboard-recent-table tbody tr, .collections-table tbody tr, .payments-history-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; padding: 0.9rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--panel-bg); }
    .dashboard-recent-table td, .collections-table td, .payments-history-table td { display: block; border: 0; padding: 0; min-width: 0; width: auto; white-space: normal; text-align: left; }
    .dashboard-recent-table td:first-child, .collections-table td:nth-child(2), .payments-history-table td:first-child { grid-column: 1 / -1; min-width: 0; }
    .collections-table td:first-child { width: auto; }
    .dashboard-recent-table td[data-label]::before, .collections-table td[data-label]::before, .payments-history-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.68rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.2rem; }
    .dashboard-recent-table td[colspan], .collections-table td[colspan], .payments-history-table td[colspan] { grid-column: 1 / -1; }
    .dashboard-recent-table .amount-cell, .collections-table .amount-cell, .payments-history-table .amount-cell { text-align: left; }
    .collections-table td:first-child[data-label] { display: flex; align-items: center; gap: 0.5rem; grid-column: 1 / -1; }
    .collections-table td:first-child[data-label]::before { order: 2; margin: 0; }
}
@media (max-width: 768px) {
    header { padding: 0.5rem 0.8rem; }
    .header-tools { gap: 0.45rem; }
    .header-search-label, .header-search kbd { display: none; }
    .header-search { padding: 0.3rem 0.6rem !important; }
    .workspace { padding: 1rem; }
    aside { height: calc(100dvh - 60px); width: min(280px, 88vw); }
    .workspace-header { align-items: flex-start; gap: 0.8rem; flex-wrap: wrap; }
    .workspace-header p { max-width: 34ch; line-height: 1.5; }
    .workspace-primary-action { font-size: 0.8rem; padding: 0.6rem 0.8rem; }
    .dashboard-primary-metrics { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
    .dashboard-primary-metrics .metric-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 0.5rem; padding: 0.8rem 1rem; }
    .dashboard-primary-metrics .metric-title { font-size: 0.8rem; }
    .dashboard-primary-metrics .metric-value { font-size: 1.35rem; margin: 0; grid-column: 2; grid-row: 1 / 3; }
    .dashboard-primary-metrics .metric-desc { font-size: 0.69rem; margin: 0; }
    .dashboard-section-heading { flex-wrap: wrap; }
    .dashboard-tasks .dashboard-section-heading { gap: 0.75rem; }
    .dashboard-recent, .dashboard-tasks { padding: 1rem; }
    .dashboard-details-content { padding: 0 0.65rem; }
    .dashboard-details-content .glass-panel { padding: 1rem; }
    .dashboard-details-content .escudo-fiscal-badge { display: inline-flex !important; white-space: normal; }
    .dashboard-details-content .flex-between { flex-wrap: wrap; gap: 0.75rem; }
    .dashboard-plan-note { flex-wrap: wrap; }
    .payment-overlay { padding: 0.65rem; }
    .payment-overlay .payment-dialog { max-width: 100% !important; margin: 0; }
    .payment-overlay .payment-panel { padding: 1rem; border-radius: 12px; }
    .payment-form-grid { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
    .payment-invoice-row { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
    .payment-allocation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 135px); align-items: center; }
    .payment-summary { padding: 0.8rem; gap: 0.5rem; }
    .payment-summary-item span { font-size: 0.68rem; }
    .payment-summary-item strong { font-size: 0.87rem; }
    .payment-actions { margin-left: -1rem; margin-right: -1rem; margin-bottom: -1rem; padding: 0.85rem 1rem; bottom: -0.65rem; border-radius: 0 0 12px 12px; }
    .payment-actions .btn { flex: 1 1 130px; font-size: 0.82rem; }
    .collections-filters { gap: 0.6rem; }
    .collections-filters > label, .collections-filters > .form-group { flex-basis: 100%; }
    .collections-bulk-bar { padding: 0.8rem; }
    .collections-bulk-bar > div { width: 100%; }
    .collections-bulk-bar .btn { flex: 1 1 auto; }
    .invoice-steps { font-size: 0.75rem; gap: 0.5rem 0.8rem; }
    .invoice-client-actions > select, .invoice-client-actions > .form-group { flex-basis: 100%; }
    .invoice-client-inline .form-row { grid-template-columns: minmax(0, 1fr); }
    #invoice-form .grid-span-2 { grid-column: 1 / -1; }
    #invoice-form .items-table { display: block; width: 100%; overflow: visible; margin: 1rem 0; }
    #invoice-form .items-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    #invoice-form .items-table tbody { display: grid; gap: 1rem; }
    #invoice-form .items-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 0.85rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-color); }
    #invoice-form .items-table td { display: block; border: 0; padding: 0; min-width: 0; white-space: normal; text-align: left; }
    #invoice-form .items-table td:first-child { grid-column: 1 / -1; }
    #invoice-form .items-table td[data-label]::before { content: attr(data-label); display: block; color: var(--text-muted); font-size: 0.72rem; margin-bottom: 0.35rem; }
    #invoice-form .items-table input, #invoice-form .items-table select { width: 100%; min-width: 0; font-size: 0.84rem; min-height: 40px; }
    #invoice-form .items-table input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; }
    #invoice-form .items-table td:last-child { display: flex; align-items: flex-end; justify-content: flex-end; }
    #invoice-form .items-table td:last-child button { min-width: 40px; min-height: 40px; }
    #invoice-form .form-total-box { min-width: 0; width: 100%; }
    #invoice-form .form-total-row { gap: 0.75rem; }
    #invoice-form .form-total-row span:last-child { flex-shrink: 0; white-space: nowrap; }
    #invoice-form .form-total-row.grand { font-size: 1rem; }
    .invoice-form-actions { justify-content: stretch; }
    .invoice-form-actions .btn { flex: 1 1 160px; }
    .notification { right: 1rem; left: 1rem; bottom: 1rem; width: auto; max-width: none; font-size: 0.82rem; }
}

/* Enlace de salto al contenido y texto solo para lectores de pantalla */
.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}
.skip-link{position:absolute;top:-60px;left:0;background:#0f172a;color:#fff;padding:0.75rem 1.25rem;font-weight:700;font-size:0.9rem;text-decoration:none;border-radius:0 0 8px 0;z-index:10050;transition:top .15s ease-in-out}
.skip-link:focus{top:0;outline:3px solid #fff;outline-offset:-3px}


/* =====================================================================
   El apartado embebido: una sola barra de desplazamiento
   =====================================================================
   El modulo vive en un iframe y su documento trae barra propia. Si ademas
   .workspace desplaza, el mismo contenido queda repartido en dos contextos de
   scroll: al tabular dentro del marco el navegador desplaza el documento hijo
   pero no .workspace, asi que el control enfocado puede quedar fuera de la
   parte visible (WCAG 2.4.11 Focus Not Obscured).

   Medido con el apartado abierto antes de este cambio: .workspace se pasaba
   32 px a 1280x700 y 285 px a 320x480. El calc de abajo es un numero a ojo que
   ademas se rompe en cuanto el usuario fuerza su propio interlineado (1.4.12).

   Con sitio suficiente el marco ocupa el hueco exacto y la barra es una sola.
   Se descarto la alternativa de que el hijo informara de su altura y el marco
   creciera: medido, .workspace no lo deja desplazar y el contenido de abajo
   queda recortado -fallo directo de 1.4.10 y 1.4.4-, y los dialogos
   position:fixed del hijo se anclan al hueco del marco y aparecen fuera de lo
   que el usuario esta mirando.
   ===================================================================== */
#management-frame {
    display: block;
    width: 100%;
    height: calc(100dvh - 205px);
    min-height: 480px;
    border: 0;
    border-radius: 0;
    background: var(--bg-color);
}
#management-frame[data-loading="true"] { opacity: 0.35; pointer-events: none; }

/* El umbral es de alto de ventana, no de ancho: al ampliar la pagina al 400%
   el viewport baja a 320x256 px CSS y la condicion deja de cumplirse sola. Por
   debajo vuelve el comportamiento anterior -alto minimo y la cabecera se
   desplaza fuera-, que es justo lo que 1.4.10 pide a ese tamano. */
@media (min-height: 620px) {
    body.gestion-abierta .workspace {
        display: flex;
        flex-direction: column;
    }
    body.gestion-abierta #pane-management {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    body.gestion-abierta #management-frame {
        flex: 1;
        height: auto;
        min-height: 0;
    }
    /* El aviso solo ocupa espacio mientras la vista está oculta cargándose. */
    body.gestion-abierta #management-status {
        min-height: 0;
    }
}
#management-status:empty { padding:0!important; margin:0; }

/* A 320 px el documento hijo se evalua con su propio viewport. El relleno
   lateral del area de trabajo le dejaba 286 px, asi que el marco llega a
   borde y el hijo dispone de los 320 px enteros. */
@media (max-width: 480px) {
    #pane-management {
        margin-left: -1rem;
        margin-right: -1rem;
    }
    #management-frame {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}


/* Titulo de tabla y avisos dentro de una celda, para el borrador del 303 y
   cualquier otra tabla con filas que aparecen segun el caso. El aviso va
   dentro de la propia fila y no en un parrafo aparte: asi se lee siempre al
   recorrerla y no depende de aria-describedby sobre una celda, que no todos
   los lectores anuncian. */
.tabla-titulo {
    caption-side: top;
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.aviso-celda {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ui-warning);
}

.m303-resumen {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.m303-resumen:empty {
    display: none;
}


/* La huella se copia con un boton, no con un span: un span con onclick no se
   alcanza con el teclado. Se le quita el aspecto de boton, no el rol. */
button.hash-tag {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* La carga inicial no presenta cifras vacías como si fueran datos reales. */
.app-boot-status{padding:40px 24px;color:var(--text-muted);font-size:1rem;text-align:center}
.app-boot-status[hidden]{display:none}
.app-initializing .tab-pane{display:none!important}
.app-initializing .sidebar-user-card{visibility:hidden}
.sidebar-user-name-text{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.workspace-header h2{overflow-wrap:anywhere}
@media(max-width:600px){.workspace-header{gap:12px;flex-wrap:wrap}.workspace-header h2{font-size:1.3rem}.workspace-header p{font-size:.82rem;line-height:1.5}.workspace-primary-action{min-height:42px}.menu-item-btn{min-height:44px}.app-boot-status{padding:28px 16px}}

/* Asistente de alta: accesos del ultimo paso como botones de verdad */
.ob-check-btn{display:flex;align-items:center;gap:.6rem;width:100%;min-height:44px;padding:.75rem;background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;font:inherit;font-size:.85rem;color:var(--text-color);text-align:left;cursor:pointer;transition:border-color .15s}
.ob-check-btn:hover{border-color:var(--primary)}
.ob-check-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.ob-check-btn:disabled{cursor:default}
.ob-check-arrow{margin-left:auto;font-size:.75rem;color:var(--ui-primary)}
/* El titulo recibe el foco por codigo al cambiar de paso; no es un control, asi que sin anillo */
#onboarding-wizard h3[tabindex="-1"]:focus{outline:none}