:root {
    /* Azules tomados del isotipo real de South American Rigging */
    --navy: #2e6093;
    --navy-dark: #204468;
    --navy-light: #7b9bc1;
    --bg: #dde3ea;
    --surface: #ffffff;
    --border: #c6cfd8;
    --text: #1e2a32;
    --text-muted: #62727d;
    --danger: #b3261e;
    --danger-bg: #fbe9e7;
    --success: #1e7a34;
    --success-bg: #e6f4ea;
    --warn: #8a6d1a;
    --warn-bg: #fff3cd;
    --series-producto: #2a78d6;
    --series-servicio: #eb6834;
    --sidebar-w: 205px;
    --topbar-h: 30px;
    --radius: 10px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16,24,32,.05);
    --shadow-md: 0 2px 6px rgba(16,24,32,.06), 0 1px 2px rgba(16,24,32,.05);
    --shadow-lg: 0 12px 28px rgba(16,24,32,.12), 0 2px 6px rgba(16,24,32,.06);
    --ease: 150ms cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "cv02","cv03","cv04","cv11";
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--text);
}

a { color: var(--navy); }
.icon { display: inline-block; vertical-align: -3px; }

/* ===================== Barra de cotizaciones (fija arriba de todo) ===================== */
.cot-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    padding: 0 0.9rem;
    background: var(--navy-dark);
    color: #dce7ef;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
}
/* .cot-bar-side izquierdo y derecho son "contrapesos" de igual ancho (flex:1 los dos),
   lo que centra .cot-bar-center exactamente en el medio de la barra sin importar
   cuánto pese el ícono o el botón de cada lado. */
.cot-bar-side { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.cot-bar-left { opacity: 0.8; }
.cot-bar-right { justify-content: flex-end; }
.cot-bar-center {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.cot-bar-center::-webkit-scrollbar { display: none; }
.cot-bar-item { flex-shrink: 0; }
.cot-bar-item strong { color: #fff; font-weight: 600; }
.cot-bar-sep { opacity: 0.35; flex-shrink: 0; }
.cot-bar-updated { opacity: 0.6; flex-shrink: 0; }
.cot-bar .icon-btn { color: #dce7ef; flex-shrink: 0; padding: 0.15rem; }
.cot-bar .icon-btn:hover { background: rgba(255,255,255,0.12); }

/* ===================== Shell / Sidebar ===================== */
.app-shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--navy);
    color: #eaf1f6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
}
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem 1.1rem;
    background: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Achicado a propósito: con el logo a tamaño completo, el menú de la izquierda
   terminaba necesitando scroll en pantallas de 768px de alto (ej. 1366x768) —
   y de nuevo al agregar Reportes como ítem nuevo, por eso bajó otra vez. */
.sidebar-brand img { display: block; max-width: 100%; max-height: 98px; width: auto; height: auto; }
.sidebar-brand .sidebar-close { color: var(--text-muted); }
.sidebar-nav { flex: 1; padding: 0.75rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; }
.sidebar-nav-label { font-size: 0.66rem; color: #8fabc2; text-transform: uppercase; letter-spacing: 0.09em; padding: 0 0.7rem 0.4rem; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    color: #cfe0ea;
    text-decoration: none;
    font-size: 0.83rem;
    transition: background var(--ease), color var(--ease);
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-nav a.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--navy-light);
}

/* ===================== Maestro de columnas ===================== */
.column-toggle-list { display: flex; flex-direction: column; gap: 0.15rem; max-width: 360px; }
.column-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    cursor: pointer;
    transition: background var(--ease);
}
.column-toggle:hover { background: var(--bg); }
.column-toggle input { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; }

/* ===================== Tarjetas de opciones (ej. Configuración) ===================== */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.settings-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--ease);
}
.settings-card:hover { border-color: var(--navy-light); }
.settings-card-icon { color: var(--navy); flex-shrink: 0; }
.settings-card-title { font-weight: 600; margin-bottom: 0.2rem; }
.settings-card-desc { color: var(--text-muted); font-size: 0.85rem; line-height: 1.4; margin: 0; }

.sidebar-user {
    padding: 0.9rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
}
.sidebar-user .name { font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.sidebar-user .logout-link { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; color: #cfe0ea; text-decoration: none; font-size: 0.85rem; transition: color var(--ease); }
.sidebar-user .logout-link:hover { color: #fff; }
.sidebar-version { margin-top: 0.6rem; font-size: 0.68rem; color: #6d87a0; letter-spacing: 0.02em; }

.sidebar-close { display: none; }

/* Mobile top bar (solo visible en pantallas chicas) */
.mobile-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    color: #fff;
    padding: 0.7rem 1rem;
    position: sticky;
    top: var(--topbar-h);
    z-index: 20;
}
.mobile-topbar button { background: none; border: none; color: #fff; padding: 0.3rem; cursor: pointer; }
.sidebar-backdrop { display: none; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { max-width: 1150px; width: 100%; margin: 0 auto; padding: 1.5rem; flex: 1; }

@media (max-width: 880px) {
    .sidebar {
        position: fixed;
        inset: var(--topbar-h) auto 0 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; margin-left: auto; background: none; border: none; color: #cfe0ea; cursor: pointer; }
    .mobile-topbar { display: flex; }
    .sidebar-backdrop.open { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(0,0,0,0.4); z-index: 30; }
}

/* ===================== Breadcrumbs ===================== */
.breadcrumbs { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.9rem; flex-wrap: wrap; }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color var(--ease); }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumbs .sep { display: inline-flex; opacity: 0.6; }
.breadcrumbs .current { color: var(--text); font-weight: 600; }

/* ===================== Toasts ===================== */
#toast-container { position: fixed; top: calc(var(--topbar-h) + 1rem); right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; max-width: 340px; }
.toast {
    background: var(--surface);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    animation: toast-in 0.2s var(--ease);
}
.toast.error { border-left-color: var(--danger); }
.toast.leaving { animation: toast-out 0.2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* Flash server-side clásico (fallback para páginas sin JS) */
.flash { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.95rem; }
.flash-success { background: var(--success-bg); color: var(--success); }
.flash-error { background: var(--danger-bg); color: var(--danger); }

/* ===================== Cards / tipografía ===================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; }
h2 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 0.75rem; }

/* ===================== Tablas ===================== */
/* .table-scroll: envolver <table> en este div cuando la cantidad de columnas puede crecer (ver
   Productos). Dentro de este contenedor las celdas NUNCA saltan de línea (white-space:nowrap) —
   así todas las filas quedan de la misma altura sin importar cuánto texto tenga cada columna — y
   la tabla usa su ancho natural (no el 100% del contenedor) para que, si no entra, sea el propio
   contenedor el que se desborde con scroll horizontal en vez de forzar el salto de línea. */
.table-scroll { overflow-x: auto; font-size: 0.8rem; }
.table-scroll table { width: auto; min-width: 100%; }
.table-scroll td { white-space: nowrap; }
/* Tope de ancho para columnas de texto libre (ej. Artículo) — la más ancha de la tabla, sobre
   todo con nombres largos de producto. Sin esto es la que más empuja a necesitar scroll
   horizontal. El texto que no entra se corta con "…"; el atributo title (agregado en el <td>)
   permite ver el valor completo al pasar el mouse. */
.table-scroll td.td-clip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
/* Misma idea que .td-clip pero para cuando la celda no es de una sola columna fija (switch de
   columnas configurables, ver inventario.php) — un <span> inline-block adentro del <td> en vez
   de la clase en el <td> mismo. */
.table-scroll .td-clip-inline { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Los encabezados sí pueden saltar de línea — todos comparten una sola fila (thead), así que un
   título largo no genera el problema de alineación de los datos (eso pasa entre filas de tbody
   con distinto contenido). Dejar que un título como "Costos de importación" ocupe 2 líneas evita
   que fuerce el ancho de toda la columna, y ayuda a que tablas con muchas columnas entren sin
   scroll horizontal. */
.table-scroll th { white-space: normal; }
/* .actions es flex (para separar Editar/Eliminar/etc. con gap), así que white-space:nowrap de
   arriba no alcanza para evitar que sus botones salten de línea — flex-wrap es una propiedad
   aparte. Sin esto, en tablas muy anchas (muchas columnas) la columna de Acciones se achica y
   los botones caen en dos líneas, inflando la altura de esa fila por encima de las demás. */
.table-scroll .actions { flex-wrap: nowrap; }
/* Padding más ajustado que el de las tablas normales, para ganar el máximo ancho posible por
   columna — el objetivo es que tablas con muchas columnas (ABM de Productos) entren sin scroll
   en vez de depender de él. */
.table-scroll th, .table-scroll td { padding: 0.4rem 0.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.55rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
th:last-child, td:last-child { border-right: none; }
th { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
tr:hover td { background: #fafcfd; }
td { transition: background var(--ease); }

.sort-link { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--navy); }
.sort-idle { opacity: 0.35; display: inline-flex; }

.actions { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.actions a, .actions button.link-action { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; transition: opacity var(--ease); }
.actions a { color: var(--navy); }
.actions button.link-action { color: var(--danger); }
.actions a:hover, .actions button.link-action:hover { text-decoration: underline; }

/* ===================== Botones ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.87rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ease), border-color var(--ease);
}
.btn:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-secondary { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); color: var(--text); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--border); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger-solid:hover { background: #8f1e17; border-color: #8f1e17; }

/* ===================== Badges / estados ===================== */
.badge { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-activo { background: var(--success-bg); color: var(--success); }
.badge-inactivo { background: #eee; color: var(--text-muted); }
.badge-Borrador { background: #eee; color: var(--text-muted); }
.badge-Enviado { background: var(--warn-bg); color: var(--warn); }
.badge-Aprobado, .badge-Entregado { background: var(--success-bg); color: var(--success); }
.badge-Rechazado, .badge-Vencido, .badge-Cancelado { background: var(--danger-bg); color: var(--danger); }
.badge-Pendiente { background: #eee; color: var(--text-muted); }
.badge-EnCurso { background: var(--warn-bg); color: var(--warn); }
.badge-admin { background: var(--navy); color: #fff; }
.badge-super_usuario { background: #e5edf4; color: var(--navy); }
.badge-usuario { background: #eee; color: var(--text-muted); }

/* ===================== Formularios ===================== */
form.inline { display: inline; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 0.83rem; color: var(--text-muted); margin-bottom: 0.35rem; font-weight: 500; }
.form-grid input, .form-grid select, .form-grid textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-grid input:hover, .form-grid select:hover, .form-grid textarea:hover { border-color: #c7d0d8; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(46,96,147,0.14);
}
.form-actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; }

/* Selects sueltos en toolbars (filtros rápidos) e inputs/selects dentro de la
   tabla de ítems de Presupuestos — mismo look que .form-grid pero sin el grid. */
.toolbar select,
.items-editor input, .items-editor select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.toolbar select:hover, .items-editor input:hover, .items-editor select:hover { border-color: #c7d0d8; }
.toolbar select:focus, .items-editor input:focus, .items-editor select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(46,96,147,0.14);
}
.items-editor input, .items-editor select { width: 100%; }
.items-editor .item-subtotal { white-space: nowrap; font-weight: 500; }

/* ===================== Login ===================== */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--navy); /* fallback — login.php arma el degradé + foto completo inline */
}
.login-card { width: 100%; max-width: 360px; box-shadow: var(--shadow-lg); }
.login-brand { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.login-brand img { max-width: 220px; height: auto; }

/* ===================== Toolbar / búsqueda ===================== */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.search-box { position: relative; }
.search-box .icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-box input[type="search"] {
    padding: 0.5rem 0.7rem 0.5rem 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 240px;
    font-family: inherit;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.search-box input[type="search"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(46,96,147,0.14); }

.muted { color: var(--text-muted); font-size: 0.88rem; }
.text-success { color: var(--success); font-weight: 600; }
.text-danger { color: var(--danger); font-weight: 600; }

/* ===================== Tarjetas de estadística (Dashboard) ===================== */
/* min-width 280px: a 1366px de ancho de pantalla (con el sidebar de 230px descontado)
   entran 3 tarjetas por fila -> 6 tarjetas quedan en 2 filas, que es el objetivo. */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 700px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .stat-grid { grid-template-columns: 1fr; }
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color var(--ease), background var(--ease);
}
.stat-card:hover { border-color: var(--navy-light); background: #fbfcfd; }
.stat-card-head { display: flex; align-items: center; gap: 0.4rem; color: var(--navy); font-size: 0.82rem; font-weight: 600; }
.stat-card-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.3rem 0 0.1rem; }
/* Semáforo: rojo = esperando algo, amarillo = en curso, verde = resuelto/terminado */
.stat-card-value-danger { color: var(--danger); }
.stat-card-value-warn { color: var(--warn); }
.stat-card-value-success { color: var(--success); }
.stat-card-sub { color: var(--text-muted); font-size: 0.78rem; margin: 0; }

.tareas-list { display: flex; flex-direction: column; gap: 0.15rem; }
.tarea-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: background var(--ease), color var(--ease); }
.tarea-item:hover { background: var(--bg); }
.tarea-icon { flex-shrink: 0; display: inline-flex; }
.tarea-icon-alta { color: var(--danger); }
.tarea-icon-media { color: var(--warn); }
.tarea-mensaje { font-size: 0.86rem; line-height: 1.35; }

/* Barra lateral derecha (hoy: "Tareas pendientes" en dashboard.php) — mismo
   ancho, color y posición sticky que .sidebar de la izquierda, como una
   verdadera tercera columna del app-shell, no una tarjeta metida en .content. */
.sidebar-right {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--navy);
    color: #eaf1f6;
    padding: 0.75rem 0.6rem;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
}
.sidebar-right h2 { color: #fff; font-size: 0.9rem; margin: 0 0 0.6rem; padding: 0 0.1rem; }
.sidebar-right .tarea-item { color: #cfe0ea; }
.sidebar-right .tarea-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-right .tarea-icon-alta { color: #ff9d90; }
.sidebar-right .tarea-icon-media { color: #ffd873; }
.sidebar-right .tarea-mensaje { font-size: 0.82rem; }
.sidebar-right .empty-state-icon { color: rgba(255,255,255,0.4); }
.sidebar-right .empty-state-title { color: #fff; }
.sidebar-right .empty-state-subtitle { color: #a9c1d0; }
@media (max-width: 880px) {
    .sidebar-right { display: none; }
}

/* ===================== Estado vacío ===================== */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty-state-icon { color: var(--border); margin-bottom: 0.75rem; }
.empty-state-title { font-weight: 600; color: var(--text); margin: 0 0 0.25rem; }
.empty-state-subtitle { margin: 0 0 1.1rem; font-size: 0.9rem; }

/* ===================== Paginación ===================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.pagination a, .pagination .disabled { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--navy); text-decoration: none; transition: background var(--ease), border-color var(--ease); }
.pagination a:hover { background: var(--bg); border-color: var(--navy-light); }
.pagination .disabled { opacity: 0.35; }
.pagination .prev svg { transform: rotate(180deg); }
.pagination-status { font-size: 0.85rem; color: var(--text-muted); }

/* ===================== Modal de confirmación ===================== */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,20,28,0.5); backdrop-filter: blur(1px); z-index: 200; align-items: center; justify-content: center; }
.modal-backdrop.open { display: flex; }
.modal-box { background: var(--surface); border-radius: 14px; padding: 1.4rem; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); }
.modal-box h3 { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.modal-box p { margin: 0 0 1.3rem; color: var(--text-muted); font-size: 0.92rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

.icon-btn { background: none; border: none; color: var(--navy); cursor: pointer; padding: 0.25rem; display: inline-flex; border-radius: var(--radius-sm); transition: background var(--ease); }
.icon-btn:hover { background: var(--bg); }
.icon-btn.spinning svg { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Reportes — gráfico de ganancias (SVG server-side) ===================== */
.rchart-legend { display: flex; gap: 1.2rem; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--text-muted); }
.rchart-legend-item { display: inline-flex; align-items: center; }
.rchart-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.rchart-swatch-producto { background: var(--series-producto); }
.rchart-swatch-servicio { background: var(--series-servicio); }
.rchart-donuts { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.rdonut-item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 84px; cursor: pointer; outline: none; border-radius: var(--radius-sm); }
.rdonut-item svg { display: block; font-family: inherit; }
.rdonut-caption { font-size: 0.72rem; color: var(--text-muted); text-align: center; line-height: 1.2; max-width: 84px; }
.rdonut-total { fill: var(--text); font-size: 11px; font-weight: 600; }
.rdonut-seg { transition: filter 0.12s; }
.rdonut-seg-producto { stroke: var(--series-producto); }
.rdonut-seg-servicio { stroke: var(--series-servicio); }
.rdonut-item:hover .rdonut-seg, .rdonut-item:focus-visible .rdonut-seg { filter: brightness(1.1); }
.rdonut-item:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.rchart-tooltip { position: fixed; z-index: 300; pointer-events: none; background: var(--text); color: #fff; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.8rem; max-width: 260px; box-shadow: var(--shadow-lg); }
.rchart-tooltip-title { font-weight: 600; margin-bottom: 1px; }
.rchart-tooltip-sub { opacity: 0.75; font-size: 0.75rem; margin-bottom: 6px; }
.rchart-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 1px 0; }
.rchart-tooltip-row strong { font-variant-numeric: tabular-nums; }
.rchart-tooltip-row-total { border-top: 1px solid rgba(255,255,255,0.22); margin-top: 4px; padding-top: 5px; }
.rchart-tooltip-row-total .rchart-tooltip-label { margin-left: 16px; }
.rchart-tooltip-key { width: 10px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.rchart-tooltip-key-producto { background: var(--series-producto); }
.rchart-tooltip-key-servicio { background: var(--series-servicio); }
.rchart-tooltip-label { opacity: 0.8; }

/* ===================== Reportes — tabs Financiero/Estadístico ===================== */
.report-tabs { display: flex; gap: 0.5rem; }

/* ===================== Reportes — ranking de barras horizontales (estadístico) ===================== */
.rbar-chart { display: flex; flex-direction: column; gap: 2px; }
.rbar-row { display: grid; grid-template-columns: minmax(0, 170px) 1fr auto; align-items: center; gap: 0.7rem; padding: 4px 0.4rem; border-radius: var(--radius-sm); cursor: pointer; outline: none; }
.rbar-row:hover, .rbar-row:focus-visible { background: #f3f6f9; }
.rbar-row:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.rbar-label { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbar-track { background: var(--border); border-radius: 4px; height: 12px; overflow: hidden; }
.rbar-fill { height: 100%; background: var(--series-producto); border-radius: 0 4px 4px 0; transition: filter 0.12s; }
.rbar-row:hover .rbar-fill, .rbar-row:focus-visible .rbar-fill { filter: brightness(1.1); }
.rbar-value { font-size: 0.82rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; min-width: 60px; }

@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
    .rbar-row { grid-template-columns: minmax(0, 90px) 1fr auto; }
}