/* =============================================================
   FACTUMAKER ERP – Hoja de estilos principal
   Paleta extraída de MakerWeb: azul oscuro #1B2347, acento #5162D6
   Tipografía: Inter (Google Fonts)
   ============================================================= */

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

/* ── Variables de diseño ─────────────────────────────────────── */
:root {
    --color-primary:        #3D4EC5;
    --color-primary-dark:   #1B2347;
    --color-primary-light:  #5162D6;
    --color-accent:         #5566E8;
    --color-bg:             #EEF0F8;
    --color-bg-alt:         #F7F8FC;
    --color-sidebar:        #1B2347;
    --color-sidebar-hover:  #252F5C;
    --color-sidebar-active: #3D4EC5;
    --color-white:          #FFFFFF;
    --color-text:           #1E2A3A;
    --color-text-muted:     #6B7380;
    --color-text-light:     #9CA3AF;
    --color-border:         #E2E6F3;
    --color-border-strong:  #C9D0E8;

    --color-success:        #10B981;
    --color-success-bg:     #D1FAE5;
    --color-danger:         #EF4444;
    --color-danger-bg:      #FEE2E2;
    --color-warning:        #F59E0B;
    --color-warning-bg:     #FEF3C7;
    --color-info:           #3B82F6;
    --color-info-bg:        #DBEAFE;

    --shadow-sm:    0 1px 3px rgba(27,35,71,.08), 0 1px 2px rgba(27,35,71,.04);
    --shadow-md:    0 4px 12px rgba(27,35,71,.10), 0 2px 6px rgba(27,35,71,.06);
    --shadow-lg:    0 10px 30px rgba(27,35,71,.15);
    --shadow-card:  0 2px 8px rgba(61,78,197,.08);

    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    20px;

    --sidebar-width:         240px;
    --sidebar-width-collapsed: 64px;
    --header-height:         64px;
    --font-family:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition:            0.2s ease;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family:      var(--font-family);
    background-color: var(--color-bg);
    color:            var(--color-text);
    line-height:      1.6;
    min-height:       100vh;
}

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

img { max-width: 100%; display: block; }

/* ── Tipografía ───────────────────────────────────────────────── */
h1 { font-size: 1.875rem; font-weight: 800; line-height: 1.2; }
h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.25rem;  font-weight: 600; line-height: 1.4; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem;     font-weight: 600; }

.text-muted  { color: var(--color-text-muted); }
.text-sm     { font-size: .875rem; }
.text-xs     { font-size: .75rem; }
.text-lg     { font-size: 1.125rem; }
.fw-500      { font-weight: 500; }
.fw-600      { font-weight: 600; }
.fw-700      { font-weight: 700; }

/* ── Layout principal (Sidebar + Main) ──────────────────────────── */
.app-wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
    width:            var(--sidebar-width);
    min-height:       100vh;
    background:       var(--color-sidebar);
    color:            rgba(255,255,255,.85);
    display:          flex;
    flex-direction:   column;
    position:         fixed;
    left:             0; top: 0;
    z-index:          100;
    transition:       width var(--transition);
    box-shadow:       4px 0 20px rgba(0,0,0,.15);
}

.sidebar-logo {
    display:          flex;
    align-items:      center;
    gap:              12px;
    padding:          20px 16px;
    border-bottom:    1px solid rgba(255,255,255,.08);
    min-height:       var(--header-height);
}

.sidebar-logo img  { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; }
.sidebar-logo span {
    font-size:   1rem;
    font-weight: 700;
    color:       #fff;
    white-space: nowrap;
    overflow:    hidden;
}

.sidebar-nav   { flex: 1; padding: 12px 0; overflow-y: auto; }

.nav-section-label {
    font-size:      .65rem;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.35);
    padding:        16px 16px 6px;
}

.nav-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 16px;
    color:         rgba(255,255,255,.7);
    font-size:     .875rem;
    font-weight:   500;
    border-radius: var(--radius-sm);
    margin:        2px 8px;
    cursor:        pointer;
    transition:    background var(--transition), color var(--transition);
    white-space:   nowrap;
    overflow:      hidden;
}

.nav-item:hover {
    background: var(--color-sidebar-hover);
    color:      rgba(255,255,255,.95);
}

.nav-item.active {
    background: var(--color-sidebar-active);
    color:      #fff;
    font-weight: 600;
}

.nav-item .nav-icon {
    width:       20px;
    height:      20px;
    flex-shrink: 0;
    opacity:     .8;
}
.nav-item.active .nav-icon { opacity: 1; }

/* ── Grupos de navegación (acordeón) ─────────────────────────────── */
.nav-group-toggle {
    -webkit-appearance: none;
    appearance:    none;
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 16px;
    color:         rgba(255,255,255,.7);
    font-size:     .875rem;
    font-weight:   500;
    border-radius: var(--radius-sm);
    margin:        2px 8px;
    cursor:        pointer;
    transition:    background var(--transition), color var(--transition);
    white-space:   nowrap;
    overflow:      hidden;
    background:    none;
    border:        none;
    font-family:   inherit;
    text-align:    left;
    width:         calc(100% - 16px);
}

.nav-group-toggle:hover,
.nav-group-toggle.active {
    background: var(--color-sidebar-hover);
    color:      rgba(255,255,255,.95);
}

.nav-group-toggle .nav-icon {
    width:       20px;
    height:      20px;
    flex-shrink: 0;
    opacity:     .8;
}

.nav-group-toggle .nav-chevron {
    width:       14px;
    height:      14px;
    flex-shrink: 0;
    margin-left: auto;
    opacity:     .6;
    transition:  transform var(--transition);
}

.nav-group.open .nav-group-toggle .nav-chevron { transform: rotate(180deg); }

.nav-submenu {
    max-height: 0;
    overflow:   hidden;
    transition: max-height var(--transition);
}

.nav-group.open .nav-submenu { max-height: 400px; }

.nav-submenu .nav-item {
    padding-left: 40px;
    font-size:    .825rem;
}

.sidebar-footer {
    padding:       12px 8px;
    border-top:    1px solid rgba(255,255,255,.08);
}

/* ── Main content ─────────────────────────────────────────────── */
.main-content {
    margin-left:    var(--sidebar-width);
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    transition:     margin-left var(--transition);
}

/* ── Top header ───────────────────────────────────────────────── */
.top-header {
    height:          var(--header-height);
    background:      var(--color-white);
    border-bottom:   1px solid var(--color-border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 24px;
    position:        sticky; top: 0; z-index: 50;
    box-shadow:      var(--shadow-sm);
}

.header-title {
    font-size:   1.125rem;
    font-weight: 700;
    color:       var(--color-primary-dark);
}

.header-actions { display: flex; align-items: center; gap: 12px; }

.header-user {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       6px 10px;
    border-radius: var(--radius-md);
    cursor:        pointer;
    transition:    background var(--transition);
}
.header-user:hover { background: var(--color-bg); }

.avatar {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           white;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       .8rem;
    font-weight:     700;
}

/* ── Page content ─────────────────────────────────────────────── */
.page-content  { padding: 28px 28px; flex: 1; }

.page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
    flex-wrap:       wrap;
    gap:             12px;
}

.page-header h1 {
    font-size:   1.5rem;
    font-weight: 800;
    color:       var(--color-primary-dark);
}

.breadcrumb {
    display:   flex;
    gap:       6px;
    font-size: .8rem;
    color:     var(--color-text-muted);
    margin-top: 4px;
}
.breadcrumb span { color: var(--color-text-light); }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow-card);
    overflow:      hidden;
}

.card-header {
    padding:        18px 24px;
    border-bottom:  1px solid var(--color-border);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            12px;
}

.card-header h3 {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--color-primary-dark);
}

.card-body    { padding: 24px; }
.card-footer  { padding: 16px 24px; border-top: 1px solid var(--color-border); background: var(--color-bg-alt); }

/* ── Stats cards (dashboard) ─────────────────────────────────── */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   20px;
    margin-bottom:         28px;
}

.stat-card {
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-border);
    padding:       22px;
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    box-shadow:    var(--shadow-card);
    transition:    transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-icon {
    width:           48px;
    height:          48px;
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.stat-icon.blue   { background: #EEF2FF; color: var(--color-primary); }
.stat-icon.green  { background: var(--color-success-bg); color: var(--color-success); }
.stat-icon.amber  { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-icon.red    { background: var(--color-danger-bg);  color: var(--color-danger);  }

.stat-body  { flex: 1; min-width: 0; }

.stat-label {
    font-size:   .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:       var(--color-text-muted);
    margin-bottom: 4px;
}

.stat-value {
    font-size:   1.6rem;
    font-weight: 800;
    color:       var(--color-primary-dark);
    line-height: 1.1;
}

.stat-delta {
    font-size:  .8rem;
    margin-top: 4px;
    font-weight: 500;
}
.stat-delta.up   { color: var(--color-success); }
.stat-delta.down { color: var(--color-danger);  }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         9px 18px;
    border-radius:   var(--radius-md);
    font-family:     var(--font-family);
    font-size:       .875rem;
    font-weight:     600;
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      background var(--transition), border-color var(--transition),
                     color var(--transition), transform var(--transition),
                     box-shadow var(--transition);
    white-space:     nowrap;
    text-decoration: none;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background:   var(--color-primary);
    color:        #fff;
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background:   var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color:        #fff;
    box-shadow:   0 4px 12px rgba(61,78,197,.35);
}

.btn-secondary {
    background:   var(--color-white);
    color:        var(--color-primary-dark);
    border-color: var(--color-border-strong);
}
.btn-secondary:hover {
    background:   var(--color-bg);
    border-color: var(--color-primary);
    color:        var(--color-primary);
}

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

.btn-success {
    background:   var(--color-success);
    color:        #fff;
    border-color: var(--color-success);
}

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

.btn-sm   { padding: 6px 12px; font-size: .8rem; border-radius: var(--radius-sm); }
.btn-lg   { padding: 12px 28px; font-size: 1rem; }
.btn-icon { padding: 8px; width: 36px; height: 36px; border-radius: var(--radius-sm); }

/* ── Badges / Estado ─────────────────────────────────────────── */
.badge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 10px;
    border-radius:  100px;
    font-size:      .72rem;
    font-weight:    600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space:    nowrap;
}

.badge-primary   { background: #EEF2FF; color: var(--color-primary); }
.badge-success   { background: var(--color-success-bg); color: #065F46; }
.badge-danger    { background: var(--color-danger-bg);  color: #991B1B; }
.badge-warning   { background: var(--color-warning-bg); color: #92400E; }
.badge-info      { background: var(--color-info-bg);    color: #1E40AF; }
.badge-neutral   { background: #F3F4F6; color: #374151; }

/* ── Formularios ─────────────────────────────────────────────── */
.form-group    { margin-bottom: 18px; }
.form-row      { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }

.form-label {
    display:       block;
    font-size:     .825rem;
    font-weight:   600;
    color:         var(--color-text);
    margin-bottom: 6px;
}
.form-label.required::after { content: ' *'; color: var(--color-danger); }

.form-control {
    width:         100%;
    padding:       9px 13px;
    border:        1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family:   var(--font-family);
    font-size:     .875rem;
    color:         var(--color-text);
    background:    var(--color-white);
    transition:    border-color var(--transition), box-shadow var(--transition);
    appearance:    none;
    outline:       none;
}
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(61,78,197,.12);
}
.form-control.is-invalid { border-color: var(--color-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

.form-control:disabled,
.form-control[readonly] {
    background: var(--color-bg-alt);
    color:      var(--color-text-muted);
    cursor:     not-allowed;
}

select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7380' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }

textarea.form-control { resize: vertical; min-height: 90px; }

.form-hint      { font-size: .78rem; color: var(--color-text-muted); margin-top: 4px; }
.form-error     { font-size: .78rem; color: var(--color-danger);     margin-top: 4px; }

.input-group    { display: flex; }
.input-group .form-control { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: none; }
.input-group .input-addon   {
    padding:       0 12px;
    background:    var(--color-bg);
    border:        1.5px solid var(--color-border-strong);
    border-left:   none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    display:       flex;
    align-items:   center;
    font-size:     .875rem;
    color:         var(--color-text-muted);
    white-space:   nowrap;
}

/* ── Tablas ───────────────────────────────────────────────────── */
.table-wrapper {
    overflow-x:    auto;
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow-card);
}

table.data-table {
    width:           100%;
    border-collapse: collapse;
    background:      var(--color-white);
    font-size:       .875rem;
}

.data-table thead th {
    padding:        11px 16px;
    background:     var(--color-bg-alt);
    font-size:      .75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--color-text-muted);
    border-bottom:  2px solid var(--color-border);
    white-space:    nowrap;
}

.data-table tbody td {
    padding:       12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color:         var(--color-text);
}

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

.data-table tbody tr:hover { background: var(--color-bg-alt); }

.data-table tfoot td {
    padding:     12px 16px;
    background:  var(--color-bg-alt);
    font-weight: 700;
    border-top:  2px solid var(--color-border);
}

.th-actions { text-align: right !important; }
.td-actions { text-align: right; white-space: nowrap; }
.td-amount  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.td-number  { font-variant-numeric: tabular-nums; }

/* ── Tabla de líneas de documento (presupuesto/factura) ──────── */
.doc-lines-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
}
.doc-lines-table th {
    background:  var(--color-bg);
    padding:     8px 10px;
    text-align:  left;
    font-size:   .75rem;
    font-weight: 700;
    color:       var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--color-border);
}
.doc-lines-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.doc-lines-table td .form-control { padding: 6px 9px; font-size: .82rem; }

/* ── Alertas / Flash ─────────────────────────────────────────── */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       14px 18px;
    border-radius: var(--radius-md);
    font-size:     .875rem;
    margin-bottom: 20px;
    border:        1px solid transparent;
}
.alert-text { flex: 1; min-width: 0; }

/* Botón de cierre: los avisos no se van solos, los cierra quien los lee */
.alert-close {
    flex-shrink:  0;
    margin:       -4px -6px 0 auto;
    padding:      0 6px;
    background:   none;
    border:       0;
    color:        inherit;
    font-size:    1.4rem;
    line-height:  1;
    opacity:      .5;
    cursor:       pointer;
    border-radius: var(--radius-sm);
}
.alert-close:hover  { opacity: 1; }
.alert-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }

.alert-success { background: var(--color-success-bg); color: #065F46; border-color: #A7F3D0; }
.alert-danger  { background: var(--color-danger-bg);  color: #991B1B; border-color: #FECACA; }
.alert-warning { background: var(--color-warning-bg); color: #92400E; border-color: #FDE68A; }
.alert-info    { background: var(--color-info-bg);    color: #1E40AF; border-color: #BFDBFE; }

/* ── Login / Auth ────────────────────────────────────────────── */
.auth-page {
    min-height:      100vh;
    background:      var(--color-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
}

.auth-card {
    width:         100%;
    max-width:     440px;
    background:    var(--color-white);
    border-radius: var(--radius-xl);
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow-lg);
    overflow:      hidden;
}

.auth-header {
    background:   linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    padding:      36px 40px 28px;
    text-align:   center;
}

.auth-header img   { width: 56px; margin: 0 auto 12px; border-radius: var(--radius-md); }
.auth-header h1    { color: #fff; font-size: 1.5rem; font-weight: 800; }
.auth-header p     { color: rgba(255,255,255,.65); font-size: .9rem; margin-top: 4px; }

.auth-body { padding: 32px 40px; }

/* ── Paginación ───────────────────────────────────────────────── */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 20px;
    border-top:      1px solid var(--color-border);
    font-size:       .85rem;
    color:           var(--color-text-muted);
    flex-wrap:       wrap;
    gap:             10px;
}

.pagination-links { display: flex; gap: 4px; }

.page-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    border-radius:   var(--radius-sm);
    border:          1.5px solid var(--color-border-strong);
    color:           var(--color-text);
    font-size:       .85rem;
    font-weight:     500;
    transition:      all var(--transition);
    background:      var(--color-white);
}
.page-link:hover       { border-color: var(--color-primary); color: var(--color-primary); background: #EEF2FF; }
.page-link.active      { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-link.disabled    { opacity: .4; pointer-events: none; }

/* ── Totales de documento ─────────────────────────────────────── */
.totales-box {
    background:    var(--color-bg-alt);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       20px;
    max-width:     360px;
    margin-left:   auto;
}

.totales-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         6px 0;
    font-size:       .9rem;
    color:           var(--color-text-muted);
}
.totales-row.total {
    border-top: 2px solid var(--color-border-strong);
    margin-top: 8px;
    padding-top: 12px;
    font-size:  1.1rem;
    font-weight: 800;
    color:       var(--color-primary-dark);
}
.totales-row .amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color:       var(--color-text);
}
.totales-row.total .amount { color: var(--color-primary-dark); font-size: 1.2rem; }

/* ── Dropdown ────────────────────────────────────────────────── */
.dropdown        { position: relative; display: inline-block; }
.dropdown-menu   {
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    min-width:     180px;
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-md);
    z-index:       200;
    overflow:      hidden;
    display:       none;
}
.dropdown:hover .dropdown-menu,
.dropdown.open  .dropdown-menu { display: block; }

.dropdown-item {
    display:    flex;
    align-items: center;
    gap:        8px;
    padding:    9px 14px;
    font-size:  .875rem;
    color:      var(--color-text);
    cursor:     pointer;
    transition: background var(--transition);
}
.dropdown-item:hover    { background: var(--color-bg-alt); }
.dropdown-item.danger   { color: var(--color-danger); }
.dropdown-divider       { border-top: 1px solid var(--color-border); margin: 4px 0; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
    position:    fixed;
    inset:       0;
    background:  rgba(27,35,71,.45);
    z-index:     300;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     20px;
    opacity:     0;
    visibility:  hidden;
    transition:  opacity var(--transition), visibility var(--transition);
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
    background:    var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-lg);
    width:         100%;
    max-width:     580px;
    max-height:    90vh;
    overflow-y:    auto;
    transform:     translateY(16px);
    transition:    transform var(--transition);
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 24px;
    border-bottom:   1px solid var(--color-border);
}
.modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--color-primary-dark); }
.modal-body      { padding: 24px; }
.modal-footer    { padding: 16px 24px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 10px; background: var(--color-bg-alt); }

/* ── Calendario de agenda ────────────────────────────────────── */
.calendar-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day-name {
    padding:        8px;
    text-align:     center;
    font-size:      .75rem;
    font-weight:    600;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    border-bottom:  1px solid var(--color-border);
}

.calendar-day {
    min-height:    96px;
    padding:       6px;
    border-right:  1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    overflow:      hidden;
}

.calendar-day-otro-mes { background: var(--color-bg-alt); color: var(--color-text-muted); }
.calendar-day-hoy      { background: #eef1ff; }

.calendar-day-num {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    font-size:       .8rem;
    font-weight:     600;
    margin-bottom:   4px;
}

.calendar-add-btn {
    border:        none;
    background:    none;
    color:         var(--color-text-muted);
    cursor:        pointer;
    font-size:     .9rem;
    line-height:   1;
    visibility:    hidden;
}
.calendar-day:hover .calendar-add-btn { visibility: visible; }

.calendar-task {
    font-size:     .7rem;
    padding:       2px 5px;
    border-radius: 4px;
    margin-bottom:  2px;
    cursor:        pointer;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    background:    var(--color-warning-light, #fff3cd);
    color:         #7a5c00;
}
.calendar-task-completada {
    background:    var(--color-bg-alt);
    color:         var(--color-text-muted);
    text-decoration: line-through;
}

/* ── Búsqueda y filtros ──────────────────────────────────────── */
.filter-bar {
    display:    flex;
    gap:        12px;
    flex-wrap:  wrap;
    align-items: center;
    margin-bottom: 20px;
}

.search-input {
    position: relative;
    flex:      1;
    min-width: 200px;
}
.search-input .form-control { padding-left: 36px; }
.search-input::before {
    content:     '';
    position:    absolute;
    left:        11px; top: 50%;
    transform:   translateY(-50%);
    width:       16px; height: 16px;
    background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7380' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center;
    pointer-events: none;
}

/* ── Dashboard grid ──────────────────────────────────────────── */
.dashboard-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   24px;
    margin-top:            24px;
}
@media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* En el móvil la barra se queda en una tira de iconos para dejar sitio
       al contenido, con el nombre de cada apartado en pequeño debajo. */
    :root { --sidebar-width: 72px; --sidebar-width-collapsed: 72px; }
    .sidebar-logo span,
    .nav-section-label,
    .nav-group-toggle .nav-chevron { display: none; }
    .sidebar-logo { justify-content: center; padding: 12px 6px; }

    .nav-item,
    .nav-group-toggle {
        position:        relative;
        flex-direction:  column;
        justify-content: center;
        gap:             3px;
        padding:         8px 2px;
        margin:          2px 4px;
        white-space:     normal;
        text-align:      center;
    }
    .nav-group-toggle { width: calc(100% - 8px); }
    .nav-item, .nav-group-toggle { padding-left: 0; padding-right: 0; }
    .sidebar-footer { padding: 8px 0; }
    .nav-item span,
    .nav-group-toggle span {
        display:     block;
        font-size:   .52rem;
        line-height: 1.1;
        font-weight: 500;
        letter-spacing: -.01em;
        word-break:  normal;
        overflow-wrap: normal;
    }
    .nav-item .nav-icon,
    .nav-group-toggle .nav-icon { width: 20px; height: 20px; }

    /* Submenús abiertos: se distinguen por el fondo, sin sangría */
    .nav-submenu { background: rgba(0,0,0,.18); border-radius: var(--radius-sm); margin: 0 4px; }
    .nav-submenu .nav-item { padding-left: 2px; margin: 2px 0; }

    /* El contador (p. ej. equipos en el SAT) pasa a la esquina del icono */
    .nav-item .badge {
        position:  absolute;
        top:       2px;
        right:     4px;
        margin:    0 !important;
        font-size: .55rem !important;
        padding:   1px 4px;
    }

    .main-content { margin-left: var(--sidebar-width-collapsed); }
    .page-content  { padding: 16px; }
    .form-row .form-group { min-width: 100%; }
}

/* ── Utilidades ───────────────────────────────────────────────── */
.d-flex    { display: flex; }
.d-none    { display: none; }
.flex-wrap { flex-wrap: wrap; }
.gap-2     { gap: 8px; }
.gap-3     { gap: 12px; }
.gap-4     { gap: 16px; }
.mt-2      { margin-top: 8px; }
.mt-3      { margin-top: 12px; }
.mt-4      { margin-top: 16px; }
.mb-3      { margin-bottom: 12px; }
.mb-4      { margin-bottom: 16px; }
.mb-6      { margin-bottom: 24px; }
.ml-auto   { margin-left: auto; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.w-100     { width: 100%; }
.p-0       { padding: 0; }

/* ── Documentos (facturas, presupuestos, albaranes) ───────────── */
.form-section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    margin-bottom: .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--color-border);
}
.doc-layout { display: flex; flex-direction: column; gap: 0; }

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--color-border);
}
.total-row:last-child { border-bottom: none; }
.total-row-grand {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: .25rem;
    padding-top: .5rem;
    border-top: 2px solid var(--color-primary);
}

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

.stat-mini {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .6rem .9rem;
}

.form-control-sm {
    padding: .3rem .5rem;
    font-size: .82rem;
}

.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }

@media (max-width: 640px) {
    .detail-grid { grid-template-columns: 1fr 1fr; }
    /* En el móvil, de la cabecera solo el avatar: el nombre y el rol
       ensanchaban toda la página más que la pantalla */
    .header-user > .avatar + div { display: none; }
    .app-footer { flex-wrap: wrap; gap: .35rem 1rem; padding: .65rem 1rem; }
    .top-header { padding: 0 12px; gap: .5rem; }
    .top-header > div:first-child { min-width: 0; }
    .breadcrumb { flex-wrap: wrap; }
}

/* ── Footer ──────────────────────────────────────────────────────── */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: .75rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    flex-shrink: 0;
}
.footer-links { display: flex; gap: 1.25rem; }
.footer-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color .15s;
}
.footer-links a:hover { color: var(--color-primary); }

/* ── Páginas legales ─────────────────────────────────────────────── */
.legal-page { max-width: 760px; margin: 0 auto; }
.legal-page h2 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .4rem; color: var(--color-text); }
.legal-page p  { margin: .5rem 0; line-height: 1.7; color: var(--color-text); }
.legal-page ul { padding-left: 1.4rem; margin: .5rem 0; }
.legal-page ul li { margin-bottom: .4rem; line-height: 1.7; }
.legal-page strong { color: var(--color-text); }

/* ── Precio de compra distinto al de la compra anterior ───────── */
.precio-cambio {
    display: inline-block; margin-top: .2rem; padding: .05rem .4rem;
    border-radius: 999px; font-size: .7rem; font-weight: 600; white-space: nowrap; cursor: help;
}
.precio-cambio--baja { background: var(--color-success-bg); color: #047857; }
.precio-cambio--sube { background: var(--color-warning-bg); color: #B45309; }
input.precio-baja { border-color: var(--color-success) !important; background: #F0FDF4; }
input.precio-sube { border-color: var(--color-warning) !important; background: #FFFBEB; }

/* Stock en negativo en el almacén */
.stock-negativo { color: var(--color-danger); font-weight: 700; }

/* Botón desactivado: que se note que no se puede pulsar */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }