/* =====================================================================
   CRM Jardineando — sistema de diseño
   Capas: tokens → base → layout → componentes → utilidades
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root {
    /* Paleta verde sobria — identidad JARDINEANDO */
    --green-950: #0d1f14;
    --green-900: #14301f;
    --green-800: #1a4229;
    --green-700: #1f6b42;
    --green-600: #2f7d4f;
    --green-500: #3a9a63;
    --green-400: #5ab87e;
    --green-200: #a8d8bb;
    --green-100: #e4f1ea;
    --green-50:  #f1f8f4;

    /* Neutros de texto */
    --ink:       #1a2520;
    --ink-soft:  #4a5750;
    --muted:     #6b7872;
    --line:      #e2e8e4;
    --line-soft: #edf2ef;

    /* Superficies */
    --bg:        #f4f7f5;
    --surface:   #ffffff;
    --surface-2: #f9fbfa;

    /* Semánticos */
    --danger:    #c0392b;
    --danger-bg: #fdecea;
    --warning:   #b45309;

    /* Ámbar — advertencia (contra reembolso, lista negra candidatos).
       Contraste AA verificado: --warn-text #7c4600 sobre --warn-bg #fff8ed → ratio 5.8:1 */
    --warn:      #d97706;
    --warn-bg:   #fff8ed;
    --warn-text: #7c4600;
    --warn-line: #f5d28a;

    /* Radios */
    --radius:    10px;
    --radius-sm:  7px;
    --radius-xs:  5px;

    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(20,48,31,.05);
    --shadow-sm: 0 1px 3px rgba(20,48,31,.07), 0 1px 2px rgba(20,48,31,.04);
    --shadow:    0 4px 16px rgba(20,48,31,.09), 0 1px 4px rgba(20,48,31,.05);
    --shadow-md: 0 8px 28px rgba(20,48,31,.12), 0 2px 6px rgba(20,48,31,.06);

    /* Espaciado */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* Tipografía */
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs:  11px;
    --font-size-sm:  12px;
    --font-size-base:14px;
    --font-size-md:  15px;
    --font-size-lg:  18px;
    --font-size-xl:  20px;

    /* Transiciones */
    --t-fast:  80ms ease;
    --t-base: 130ms ease;
    --t-slow: 220ms ease;

    /* Tokens de dashboard (referenciados en la sección Dashboard) */
    --dash-gap:    16px;
    --dash-mb:     20px;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: var(--font-size-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--font-size-xl); font-weight: 700; margin: 0; letter-spacing: -.015em; }
h2 { font-size: var(--font-size-md); font-weight: 600; margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
h3 { font-size: var(--font-size-base); font-weight: 600; margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); }

/* Foco visible — borde claro sobre fondo oscuro del sidebar, oscuro sobre fondo claro */
:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* SVG inline heredan color del contexto */
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---------- LAYOUT ---------- */
.layout { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
    width: 224px;
    flex: 0 0 224px;
    background: var(--green-900);
    color: #d8ead0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--green-800);
    transition: width var(--t-slow);
    overflow: hidden;
}

/* Marca */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--green-600);
    border-radius: var(--radius-sm);
    color: #fff;
    flex-shrink: 0;
    transition: background var(--t-base);
}
.brand:hover .brand-logo { background: var(--green-500); }
/* Logo de empresa subido (sustituye al icono de marca en el sidebar). */
.brand-logo-img { max-height: 34px; max-width: 150px; object-fit: contain; flex-shrink: 0; border-radius: var(--radius-xs); background: #fff; }
.brand-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    white-space: nowrap;
}

/* Separador visual debajo de la marca */
.sidebar::after {
    content: '';
    display: none; /* activado si se necesita un divisor explícito */
}

/* Navegación */
.nav {
    display: flex;
    flex-direction: column;
    padding: var(--sp-2) var(--sp-3);
    gap: 2px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Encabezado de sección del menú (Ventas, Directorio, Administración…) */
.nav-group-title {
    padding: var(--sp-3) var(--sp-3) 4px;
    margin-top: var(--sp-2);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7fa78c;
    white-space: nowrap;
    user-select: none;
}
.nav-group-title:first-child { margin-top: 0; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px var(--sp-3);
    border-radius: var(--radius-sm);
    color: #b8d4c0;
    font-size: 13.5px;
    font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
    text-decoration: none;
}
.nav-item:hover {
    background: rgba(255,255,255,.08);
    color: #e8f5ed;
    text-decoration: none;
}
.nav-item.is-active {
    background: var(--green-700);
    color: #fff;
    font-weight: 600;
}
.nav-item.is-active:hover { background: var(--green-600); }

/* El icono dentro del nav-item */
.nav-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: inherit;
}
.nav-label { line-height: 1; }

/* Pie del sidebar */
.sidebar-foot {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.user { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; min-width: 0; text-decoration: none; border-radius: var(--radius-sm); padding: 4px 6px; margin: -4px -6px; transition: background var(--t-fast); }
a.user:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.user-name { color: #e8f5ed; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user .rol { font-size: var(--font-size-xs); color: var(--green-200); text-transform: capitalize; margin-top: 1px; }

/* Botón de logout en el sidebar */
.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: #b8d4c0;
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}
.btn-logout:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
}
.btn-logout:focus-visible {
    outline: 2px solid var(--green-400);
    outline-offset: 2px;
}

/* ---- Área principal ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-4) var(--sp-5);
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    min-height: 60px;
    box-shadow: var(--shadow-xs);
}

.content {
    padding: var(--sp-5);
    flex: 1;
}

/* ---------- BOTONES ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.25;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
}
.btn:hover {
    background: var(--green-50);
    border-color: var(--green-200);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--green-600);
    border-color: var(--green-600);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(47,125,79,.25);
}
.btn-primary:hover {
    background: var(--green-700);
    border-color: var(--green-700);
    box-shadow: 0 2px 6px rgba(47,125,79,.3);
    color: #fff;
}
.btn-primary:active { box-shadow: none; }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ink-soft);
}
.btn-ghost:hover {
    background: var(--green-50);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: none;
}

.btn-danger {
    background: var(--surface);
    border-color: #f0c8c2;
    color: var(--danger);
    padding: 6px 10px;
}
.btn-danger:hover {
    background: var(--danger-bg);
    border-color: #e9b0a8;
    color: var(--danger);
}

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- TABLAS ---------- */
.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}
.table thead th {
    background: var(--surface-2);
    text-align: left;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 10px var(--sp-3);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.table thead th:first-child { padding-left: var(--sp-4); }
.table thead th:last-child { padding-right: var(--sp-4); }
.table thead th a { color: inherit; }
.table thead th a:hover { color: var(--green-700); text-decoration: none; }

.table tbody td {
    padding: 9px var(--sp-3);
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 13.5px;
}
.table tbody td:first-child { padding-left: var(--sp-4); }
.table tbody td:last-child { padding-right: var(--sp-4); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:nth-child(even) { background: #fafcfb; }
.table tbody tr:hover { background: var(--green-50); transition: background var(--t-fast); }

.table .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green-700); }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.col-acc { white-space: nowrap; text-align: right; }

/*
 * .td-articulo — columna Artículo de la tabla de pedidos.
 * Limita el ancho para evitar que texto libre largísimo desborde; el atributo
 * title en el markup muestra el texto completo en tooltip nativo.
 */
.td-articulo {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-soft);
}

/*
 * .td-muted-sm — columnas de peso visual bajo (Mensajería, Ciudad, Cód. envío).
 * Reduce el tamaño de fuente y usa color apagado para no competir con los datos
 * principales (cliente, estado). El contenido sigue siendo legible, solo jerarquizado.
 */
.td-muted-sm {
    font-size: var(--font-size-sm);
    color: var(--muted);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty { text-align: center; color: var(--muted); padding: var(--sp-7) var(--sp-5) !important; font-size: 13.5px; }
.inline { display: inline; }

/*
 * Tabla de pedidos — padding cómodo sin desperdiciar espacio vertical.
 * 10px top/bottom da ritmo legible con ~50 filas; line-height 1.45 separa
 * las líneas sin que cada fila se vuelva bloques enormes.
 */
.table-pedidos tbody td {
    padding: 10px var(--sp-3);
    line-height: 1.45;
    font-size: 13px;
}
.table-pedidos tbody td:first-child { padding-left: var(--sp-4); }
.table-pedidos tbody td:last-child  { padding-right: var(--sp-4); }

/* Zebra sutil: diferencia perceptible pero sin contraste duro */
.table-pedidos tbody tr:nth-child(even) { background: #f7faf8; }
.table-pedidos tbody tr:hover { background: var(--green-50); }

/*
 * .btn-icon — botón cuadrado de 30×30 solo con icono SVG.
 * Úsalo en la celda de acciones de tablas: <button class="btn-icon" title="Editar" aria-label="Editar">.
 * El tooltip accesible lo da el atributo title + aria-label en el markup.
 */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
    text-decoration: none;
    vertical-align: middle;
}
.btn-icon:hover {
    background: var(--green-50);
    border-color: var(--green-200);
    color: var(--green-700);
    text-decoration: none;
}
.btn-icon:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
}
/* Variante peligrosa: Eliminar */
.btn-icon-danger {
    color: var(--danger);
    border-color: #f0c8c2;
}
.btn-icon-danger:hover {
    background: var(--danger-bg);
    border-color: #e9b0a8;
    color: var(--danger);
}

/*
 * .acc-group — contenedor de botones-icono en la celda Acciones.
 * Agrupa los .btn-icon con separación consistente y alineación central.
 */
.acc-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- BADGES DE ESTADO ---------- */
/*
 * Colores semánticos consistentes en toda la app.
 * Forma + texto (no solo color) para accesibilidad.
 * Misma clase = mismo color en tabla, formulario, histórico.
 */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: .01em;
    line-height: 1.4;
}
.badge-pendiente   { background: #f1f3f4; color: #4a5560;  border-color: #dce0e4; }
.badge-confirmado  { background: #e7f0fe; color: #1a57c0;  border-color: #cdddf9; }
.badge-enviado     { background: #e0f4f2; color: #0d7068;  border-color: #bce6e2; }
.badge-entregado   { background: #e4f3e8; color: #1a6e35;  border-color: #c2e5ce; }
.badge-aplazado    { background: #fef3da; color: #7a5200;  border-color: #f5e0a8; }
.badge-devuelto    { background: #ffe9d8; color: #8a3e08;  border-color: #f9d0af; }
.badge-anulado     { background: #eceff1; color: #525d65;  border-color: #d8dde0; text-decoration: line-through; }
.badge-incidencia  { background: #fde7e4; color: #a82c1c;  border-color: #f4c4bd; }

/* select de estado inline — hereda colores del badge correspondiente */
.estado-select {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7872'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
    transition: border-color var(--t-fast);
}
.estado-select.badge-pendiente  { background-color: #f1f3f4; color: #4a5560; border-color: #dce0e4; }
.estado-select.badge-confirmado { background-color: #e7f0fe; color: #1a57c0; border-color: #cdddf9; }
.estado-select.badge-enviado    { background-color: #e0f4f2; color: #0d7068; border-color: #bce6e2; }
.estado-select.badge-entregado  { background-color: #e4f3e8; color: #1a6e35; border-color: #c2e5ce; }
.estado-select.badge-aplazado   { background-color: #fef3da; color: #7a5200; border-color: #f5e0a8; }
.estado-select.badge-devuelto   { background-color: #ffe9d8; color: #8a3e08; border-color: #f9d0af; }
.estado-select.badge-anulado    { background-color: #eceff1; color: #525d65; border-color: #d8dde0; }
.estado-select.badge-incidencia { background-color: #fde7e4; color: #a82c1c; border-color: #f4c4bd; }

/* ---------- FORMULARIOS ---------- */
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: var(--sp-3);
}
input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=number],
input[type=search],
input[type=tel],
select,
textarea {
    width: 100%;
    margin-top: 5px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    background: var(--surface);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--green-500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(58,154,99,.15);
}
input::placeholder { color: var(--muted); }
textarea { resize: vertical; }

.check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check input { width: auto; margin: 0; accent-color: var(--green-600); }
.stack > * { margin-bottom: var(--sp-3); }
.row { display: flex; gap: var(--sp-3); }
.row > label { flex: 1; min-width: 0; }
.form-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-4);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.form-grid fieldset.full, .form-grid .form-actions { grid-column: 1 / -1; }
legend {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--green-700);
    padding: 0 6px;
}

/* ---------- PANELES / SPLIT ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}
.split { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-4); align-items: start; }
.form-side { position: sticky; top: 76px; }
.list-side .filtros { margin-bottom: var(--sp-3); }

/* ---------- TOOLBAR / FILTROS ---------- */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.filtros { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.filtros input, .filtros select { width: auto; margin-top: 0; min-width: 130px; }
/* Checkbox de filtro rápido en línea (no ocupa todo el ancho como un label normal). */
.filtros .check-inline { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.filtros .check-inline input { width: auto; min-width: 0; margin: 0; }

/* ---------- DASHBOARD ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    text-decoration: none;
    display: block;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--green-200);
    text-decoration: none;
}
.card-n {
    font-size: 32px;
    font-weight: 700;
    color: var(--green-700);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.card-l { color: var(--muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.estado-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.estado-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: filter var(--t-fast), transform var(--t-fast);
    text-decoration: none;
}
.estado-chip:hover { text-decoration: none; filter: brightness(.96); transform: translateY(-1px); }
.estado-n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.estado-t { font-size: var(--font-size-sm); font-weight: 600; }

/* Chips heredan colores badge */
.estado-chip.badge-pendiente   { background: #f1f3f4; color: #4a5560; border-color: #dce0e4; }
.estado-chip.badge-confirmado  { background: #e7f0fe; color: #1a57c0; border-color: #cdddf9; }
.estado-chip.badge-enviado     { background: #e0f4f2; color: #0d7068; border-color: #bce6e2; }
.estado-chip.badge-entregado   { background: #e4f3e8; color: #1a6e35; border-color: #c2e5ce; }
.estado-chip.badge-aplazado    { background: #fef3da; color: #7a5200; border-color: #f5e0a8; }
.estado-chip.badge-devuelto    { background: #ffe9d8; color: #8a3e08; border-color: #f9d0af; }
.estado-chip.badge-anulado     { background: #eceff1; color: #525d65; border-color: #d8dde0; }
.estado-chip.badge-incidencia  { background: #fde7e4; color: #a82c1c; border-color: #f4c4bd; }

/* ---------- PAGINADOR ---------- */
.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.paginador-info { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.btn.disabled { opacity: .4; pointer-events: none; }

/* ---------- LISTA / HISTÓRICO ---------- */
.histo { list-style: none; padding: 0; margin: 0; }
.histo li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.histo li:last-child { border-bottom: none; }

/* ---------- ALERTAS ---------- */
.alert {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
}
.alert-ok  { background: var(--green-100); color: var(--green-700); border-color: #c2e5ce; }
.alert-err { background: var(--danger-bg); color: var(--danger);    border-color: #f4c4bd; }

/* Mensajes flash: se desvanecen al auto-ocultarse (ver app.js). */
.alert-flash { transition: opacity .4s ease, transform .4s ease; }
.alert-flash.is-hiding { opacity: 0; transform: translateY(-6px); }

/*
 * .alert-warn — aviso ámbar de baja urgencia (contra reembolso sin lista negra).
 * Menos crítico que .alert-err; usa paleta --warn para coherencia con badge-cr
 * y el fieldset de lista negra candidata.
 */
.alert-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
    border-color: var(--warn-line);
}

/* ---------- LOGIN ---------- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--green-950) 0%, var(--green-800) 60%, var(--green-700) 100%);
}
.login-card {
    background: var(--surface);
    padding: var(--sp-6);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    width: 360px;
    max-width: calc(100vw - var(--sp-5) * 2);
    border: 1px solid var(--line);
}
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--green-700);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: -.02em;
}
.login-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--green-600);
    border-radius: var(--radius-sm);
    color: #fff;
    flex-shrink: 0;
}
.login-brand-name { color: var(--green-700); }
/* Logo de empresa en la pantalla de acceso. */
.login-brand-logo-img { max-height: 56px; max-width: 220px; object-fit: contain; }
.login-sub { text-align: center; color: var(--muted); margin: 4px 0 var(--sp-5); font-size: 13px; }
.login-card label { margin-bottom: var(--sp-4); }

/* ---------- DETAILS (emitir factura) ---------- */
.emisor-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.emisor-form summary {
    cursor: pointer;
    padding: 4px;
    color: var(--green-700);
    font-weight: 600;
    user-select: none;
    list-style: none;
}
.emisor-form summary::-webkit-details-marker { display: none; }
.emisor-form[open] summary { margin-bottom: var(--sp-4); }
.table-lineas input { margin-top: 0; }

/* ---------- UTILIDADES ---------- */
.muted   { color: var(--muted); }
.small   { font-size: var(--font-size-sm); }
.mt      { margin-top: var(--sp-4); }
.text-right { text-align: right; }
.flex    { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2   { gap: var(--sp-2); }
.gap-3   { gap: var(--sp-3); }
.font-tabular { font-variant-numeric: tabular-nums; }

/* ---------- DASHBOARD ---------- */
/*
 * Barra de filtro de fechas del dashboard.
 * .dash-filtro: formulario con inputs de fecha y botones de acción.
 * .kpi-periodo: etiqueta de texto que describe el rango activo (itálica, muted).
 */
.dash-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--dash-gap);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px var(--sp-4);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--dash-mb);
}
.dash-filtro label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dash-filtro input[type="date"] {
    width: auto;
    margin-top: 0;
    min-width: 150px;
    font-size: 13px;
    padding: 6px 10px;
}

/*
 * .kpi-periodo — texto de apoyo que muestra el rango de fechas activo.
 */
.kpi-periodo {
    font-size: var(--font-size-sm);
    color: var(--muted);
    font-style: italic;
    align-self: center;
}

/*
 * .dash-accesos — barra de accesos rápidos de periodo (Este mes / Este año / …).
 * Los enlaces usan borde y color de la paleta verde; .is-active marca el periodo seleccionado.
 */
.dash-accesos {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--muted);
    margin-bottom: var(--dash-mb);
}
.dash-accesos strong {
    color: var(--ink-soft);
    font-weight: 600;
}
.dash-accesos a {
    color: var(--green-700);
    font-weight: 500;
    padding: 3px var(--sp-2);
    border-radius: var(--radius-xs);
    border: 1px solid var(--green-200);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.dash-accesos a:hover {
    background: var(--green-100);
    text-decoration: none;
}
.dash-accesos a.is-active {
    background: var(--green-100);
    font-weight: 700;
    border-color: var(--green-400);
    color: var(--green-800);
}

/*
 * .charts-grid — cuadrícula de tarjetas de gráficas.
 * 2 columnas en escritorio; .chart-card--wide ocupa el ancho completo (gráfica por mes).
 * 1 columna en móvil (ver @media abajo).
 */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dash-gap);
    margin-bottom: var(--dash-mb);
}
.charts-grid .chart-card--wide {
    grid-column: 1 / -1;
}

/*
 * .chart-card — tarjeta individual de gráfica.
 * h2 dentro de la tarjeta sigue el sistema de tipografía base.
 */
.chart-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.chart-card h2 {
    margin-bottom: var(--sp-3);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--ink);
}

/*
 * .chart-wrap — contenedor del canvas Chart.js.
 * max-height contiene las gráficas dentro de 320px; height base de 260px.
 * position: relative es requerido por Chart.js para escalar el canvas.
 */
.chart-wrap {
    position: relative;
    height: 260px;
    max-height: 320px;
}

/*
 * .dash-no-data — mensaje de ausencia de datos dentro de una .chart-card.
 */
.dash-no-data {
    padding: var(--sp-6) 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* ---------- LISTA NEGRA ---------- */

/*
 * .panel-danger — variante de .panel para secciones de alto riesgo (clientes vetados).
 * Borde izquierdo de acento y cabecera con un toque de peligro; no grita, solo avisa.
 * Úsalo como modificador adicional: <section class="panel panel-danger">.
 */
.panel-danger {
    border-left: 4px solid #f4c4bd;
}
.panel-danger h2 {
    color: var(--danger);
}

/*
 * .panel-neutral — variante de .panel para secciones informativas (candidatos).
 * Borde izquierdo en tono ámbar sutil; semántica de "atención" sin alarmar.
 */
.panel-neutral {
    border-left: 4px solid var(--warn-line);
}
.panel-neutral h2 {
    color: var(--warn-text);
}

/*
 * .panel + h2 con iconos SVG — alinea el icono con el texto de cabecera.
 */
.panel h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.panel h2 svg { flex-shrink: 0; }

/*
 * .inline-form-row — formulario de una sola fila (input motivo + botón Vetar).
 * Usado en la tabla de candidatos para que el input y el botón queden compactos
 * y alineados sin romper la densidad de la tabla.
 */
.inline-form-row {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.inline-form-row .input-sm {
    flex: 1 1 0;
}

/*
 * .input-sm — input compacto de una línea para uso dentro de tablas.
 * Reduce padding y tamaño de fuente para integrarse en filas de ~36px.
 */
.input-sm {
    display: inline-block;
    width: auto;
    margin-top: 0;
    padding: 5px 9px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.4;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    vertical-align: middle;
}
.input-sm:focus {
    border-color: var(--green-500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(58,154,99,.15);
}
.input-sm::placeholder { color: var(--muted); }

/* ---------- INDICADORES DE AVISO EN TABLA ---------- */

/*
 * .icon-danger — icono SVG inline de alerta (lista negra en tabla de clientes y pedidos).
 * Color danger, tamaño y alineación vertical coherentes con el texto de la celda.
 */
.icon-danger {
    color: var(--danger);
    vertical-align: middle;
    margin-left: var(--sp-1);
    flex-shrink: 0;
}

/*
 * .row-danger — fila de tabla con cliente en lista negra.
 * Fondo muy sutil (no rojo puro) para no romper el zebra ni el contraste AA
 * del texto. Solo un tinte que llama la atención en el escaneo visual.
 */
.row-danger { background: #fff5f5 !important; }
.row-danger:hover { background: #ffe8e8 !important; }

/*
 * .badge-cr — badge compacto "Contra Reembolso" en columna Mensajería.
 * Ámbar/naranja suave; tamaño reducido para no romper la densidad de la tabla.
 * Texto "CR" es descriptivo por sí mismo (no solo color).
 * Contraste AA: #7c4600 sobre #fff0cc → ratio 5.5:1.
 */
.badge-cr {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    background: #fff0cc;
    color: #7c4600;
    border: 1px solid #f5d28a;
    vertical-align: middle;
    margin-left: var(--sp-1);
    white-space: nowrap;
}

/* ---------- FIELDSET LISTA NEGRA (formulario de cliente) ---------- */

/*
 * .fieldset-danger — fieldset con acento peligro para el bloque "Lista negra"
 * en el formulario de edición de clientes. Diferenciado visualmente del resto
 * de fieldsets del form-grid sin ser estridente.
 */
.fieldset-danger {
    border-color: #f4c4bd !important;
    background: #fffafa !important;
}
.fieldset-danger legend {
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/*
 * .check-danger — variante de .check para el checkbox de lista negra.
 * Mantiene la alineación y añade accent-color en rojo.
 */
.check-danger {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--sp-3);
}
.check-danger input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--danger);
}

/*
 * .badge-lista-negra-fecha — badge de fecha "desde X" en el fieldset lista negra.
 * Variante más tenue que badge-anulado para encajar en contexto de formulario.
 */
.badge-lista-negra-fecha {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #f4c4bd;
    margin-left: var(--sp-2);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * .ficha-meta — datos de contacto en la cabecera de la ficha de cliente.
 * Lista de definición en rejilla de 2 columnas (etiqueta tenue + valor).
 * ------------------------------------------------------------------- */
.ficha-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-4);
    margin: var(--sp-3) 0 0;
}
.ficha-meta > div { display: flex; flex-direction: column; gap: 2px; }
.ficha-meta .ficha-meta-full { grid-column: 1 / -1; }
.ficha-meta dt {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--muted);
}
.ficha-meta dd { margin: 0; }

/* ---------------------------------------------------------------------
 * Empresa / datos fiscales — subida y vista previa de logo.
 * ------------------------------------------------------------------- */
.empresa-form .panel { margin-bottom: var(--sp-4); }
.logo-fila { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.logo-preview {
    width: 200px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border, #d6e2da);
    border-radius: 8px;
    background: #fafcfb;
    padding: var(--sp-3);
}
.logo-preview img { max-width: 100%; max-height: 80px; }
.file-label { display: inline-block; cursor: pointer; }
.file-label .file-input { display: none; }

/* Fila de tabla atenuada (p. ej. usuario inactivo). */
.row-muted { opacity: .55; }

/* Grupo de acciones a la derecha de una toolbar (exportar + acción primaria). */
.toolbar-actions { display: flex; gap: var(--sp-2); align-items: center; }

/* Fecha de vencimiento vencida (factura pendiente y pasada de fecha). */
.td-vencida { color: var(--danger); font-weight: 600; }
/* Botón-icono para marcar cobrada (acento verde). */
.btn-icon-cobro { color: var(--green-600); }
.btn-icon-cobro:hover { background: var(--green-100); color: var(--green-700); }

/* Badge "+N" de líneas adicionales en el listado de pedidos. */
.badge-lineas { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: var(--font-size-xs); font-weight: 700; background: var(--green-100); color: var(--green-700); border: 1px solid #c2e5ce; }

/* ---------- REPORTE DE PRODUCTOS ---------- */

/*
 * .kpi-cards-reporte — variante del grid de cards para informes.
 * 4 columnas como .cards del dashboard pero sin hover animado (no son links).
 * Dentro usa las clases estándar .card-n / .card-l.
 */
.kpi-cards-reporte {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.kpi-cards-reporte .card {
    cursor: default;
}
.kpi-cards-reporte .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--line);
}

/*
 * .table-reporte — variante de .table para el informe de productos.
 * Añade mayor peso visual a la columna de base facturada (columna clave).
 */
.table-reporte .col-base {
    background: var(--green-50);
    font-weight: 600;
    color: var(--green-800);
    font-variant-numeric: tabular-nums;
}
.table-reporte tfoot tr td,
.table-reporte tfoot tr th {
    background: var(--green-100);
    border-top: 2px solid var(--green-200);
    border-bottom: none;
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--green-900);
    padding: 11px var(--sp-3);
}
.table-reporte tfoot tr td:first-child,
.table-reporte tfoot tr th:first-child { padding-left: var(--sp-4); }
.table-reporte tfoot tr td:last-child,
.table-reporte tfoot tr th:last-child  { padding-right: var(--sp-4); }

/*
 * .td-libre — artículo de texto libre (sin catálogo) en el informe.
 * Cursiva y color apagado para diferenciar de artículos del catálogo;
 * el indicador visual no depende solo del color (también es cursiva).
 */
.td-libre {
    font-style: italic;
    color: var(--muted);
}

/*
 * .prop-bar-wrap / .prop-bar — barra de proporción del % del total.
 * Contenedor gris claro + relleno verde escalado con width inline calculado en PHP.
 * El % en texto está fuera de la barra para que siempre sea legible.
 */
.prop-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.prop-bar-track {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    min-width: 40px;
}
.prop-bar-fill {
    height: 100%;
    background: var(--green-500);
    border-radius: 999px;
    transition: width .3s ease;
    min-width: 2px;
}
.prop-bar-pct {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}

/* ---------- TABLA DE FACTURAS (listado) ---------- */

/*
 * .table-facturas — extensión de .table para la página facturas.php.
 * La columna Nº factura destaca (num + bold); Base/IVA/Total tabulados.
 */
.table-facturas .col-num-fac {
    font-weight: 700;
    font-size: var(--font-size-md);
    font-variant-numeric: tabular-nums;
    color: var(--green-800);
    white-space: nowrap;
}
.table-facturas .col-total-fac {
    font-weight: 700;
    font-size: var(--font-size-md);
    font-variant-numeric: tabular-nums;
    color: var(--green-800);
}
.table-facturas .col-receptor {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*
 * tfoot de facturas: suma de Base/IVA/Total de la página actual.
 * Fondo verde muy sutil para diferenciarlo del tbody sin estridencia.
 */
.table-facturas tfoot td {
    background: var(--surface-2);
    border-top: 2px solid var(--line);
    border-bottom: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    padding: 10px var(--sp-3);
}
.table-facturas tfoot td:first-child { padding-left: var(--sp-4); }
.table-facturas tfoot td:last-child  { padding-right: var(--sp-4); }
.table-facturas tfoot .col-total-fac { color: var(--green-800); }

/* ---------- TABLA DE ALBARANES (listado) ---------- */

/*
 * .table-albaranes — extensión de .table para la página albaranes.php.
 * Mismo lenguaje visual que .table-facturas: número destacado, fecha y
 * referencia de pedido en tono secundario, acciones como .btn-icon.
 * Sin columnas monetarias (los albaranes no llevan importes).
 */
.table-albaranes .col-num-alb {
    font-weight: 700;
    font-size: var(--font-size-md);
    font-variant-numeric: tabular-nums;
    color: var(--green-800);
    white-space: nowrap;
}

/*
 * .col-cliente-alb — nombre del cliente: truncado con ellipsis si es muy largo.
 * El atributo title en el markup muestra el texto completo en tooltip nativo.
 */
.table-albaranes .col-cliente-alb {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * .col-pedido-alb — referencia al pedido origen; tono secundario + tabular nums
 * para alineación visual limpia con los números de albarán.
 */
.table-albaranes .col-pedido-alb {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * .ref-pedido — el número de pedido como "#N" dentro de la columna Pedido.
 * Verde oscuro sutil para distinguirlo de texto muted sin crear ruido visual.
 */
.ref-pedido {
    font-weight: 600;
    color: var(--green-700);
    font-variant-numeric: tabular-nums;
}

/*
 * .toolbar-help — texto de ayuda en el lado izquierdo del toolbar de albaranes.
 * Se integra en el flex del .toolbar sin margen extra (p tiene margin-bottom por defecto).
 */
.toolbar-help {
    margin: 0;
}

/* ---------- BADGES DE ESTADO ACTIVO/INACTIVO ---------- */

/*
 * .badge-activo / .badge-inactivo — estado de artículos y comerciales.
 * Reutilizan la estructura base de .badge; colores del sistema:
 *   activo → verde semántico (misma familia que badge-entregado, menos saturado)
 *   inactivo → gris neutro (misma familia que badge-anulado)
 * Tamaño ligeramente reducido (font-size-xs) para no competir con el nombre.
 */
.badge-activo {
    background: #e6f4ec;
    color: #1a6e35;
    border-color: #b8dfc7;
    font-size: var(--font-size-xs);
}
.badge-inactivo {
    background: #eceff1;
    color: #525d65;
    border-color: #d0d6da;
    font-size: var(--font-size-xs);
}

/* ---------- TABLA DE CLIENTES (listado) ---------- */

/*
 * .table-clientes — extensión de .table para clientes.php.
 * Columna Nombre con ancho flexible; Pedidos como número tabular alineado a la derecha.
 * La clase .col-acc ya maneja la columna de acciones.
 */
.table-clientes .col-nombre-cli {
    font-weight: 500;
}

/*
 * .col-pedidos-cli — columna Pedidos: tabular-nums y tono apagado si es cero.
 * El cero no desaparece pero tiene menos peso visual que el nombre del cliente.
 */
.table-clientes .col-pedidos-cli {
    font-variant-numeric: tabular-nums;
    min-width: 52px;
}

/*
 * .list-count — contador de registros encima del table-wrap en páginas split.
 * Margen inferior reducido para que no haya un hueco excesivo entre el contador
 * y el borde superior del panel de la tabla.
 */
.list-count {
    margin-bottom: var(--sp-2);
}

/* ---------- TABLA DE ARTÍCULOS (listado) ---------- */

/*
 * .table-articulos — extensión de .table para articulos.php.
 * Precio orientativo: tabular-nums alineado a la derecha, peso normal (es orientativo).
 * La columna Activo muestra .badge-activo / .badge-inactivo.
 */
.table-articulos .col-nombre-art {
    font-weight: 500;
}

.table-articulos .col-precio-art {
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    color: var(--ink);
}

/* ---------- TABLA DE COMERCIALES (listado) ---------- */

/*
 * .table-comerciales — extensión de .table para comerciales.php.
 * Email con truncado por ellipsis para no desbordarse en pantallas medianas.
 * Zona y Teléfono ya usan .td-muted-sm (secundario).
 */
.table-comerciales .col-nombre-com {
    font-weight: 500;
}

.table-comerciales .col-email-com {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: var(--font-size-sm);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .kpi-cards-reporte { grid-template-columns: 1fr 1fr; }
    .form-grid, .cards, .estado-grid { grid-template-columns: 1fr 1fr; }
    .split { grid-template-columns: 1fr; }
    .form-side { position: static; }

    /* Dashboard responsive */
    .charts-grid { grid-template-columns: 1fr; }
    .charts-grid .chart-card--wide { grid-column: auto; }

    /* Sidebar colapsado */
    .sidebar {
        width: 60px;
        flex-basis: 60px;
    }
    .brand-name,
    .nav-label,
    .user { display: none; }
    /* Encabezados de sección como divisor fino cuando el sidebar está colapsado. */
    .nav-group-title {
        height: 0;
        padding: 0;
        margin: 8px 12px;
        overflow: hidden;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .nav-group-title:first-child { display: none; }
    .brand {
        justify-content: center;
        padding: var(--sp-4) 0;
    }
    .brand-logo { width: 36px; height: 36px; }
    .nav { padding: var(--sp-2) var(--sp-1); align-items: center; }
    .nav-item {
        justify-content: center;
        padding: 10px;
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }
    .nav-ico { width: 20px; height: 20px; }
    .sidebar-foot {
        flex-direction: column;
        padding: var(--sp-3) var(--sp-2);
        gap: var(--sp-2);
    }
    .btn-logout {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 640px) {
    .kpi-cards-reporte { grid-template-columns: 1fr 1fr; }
    .form-grid, .cards, .estado-grid, .ficha-meta { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .filtros { flex-direction: column; }
    .filtros input, .filtros select { min-width: 0; width: 100%; }
    /* En móvil la columna % del total ocupa demasiado espacio: se oculta */
    .table-reporte .col-pct-header,
    .table-reporte .col-pct-cell { display: none; }
}