/* =====================================================
   CALLIPOS — Estilos base
   Variables CSS para soporte claro/oscuro via data-tema
   ===================================================== */

:root {
    --bg:         #f4f4f5;
    --surface:    #ffffff;
    --border:     #e4e4e7;
    --text:       #18181b;
    --text-muted: #71717a;
    --primary:    #7c3aed;
    --primary-fg: #ffffff;
    --danger:     #dc2626;
    --warning:    #d97706;
    --success:    #16a34a;
    --info:       #0284c7;
    --sidebar-bg: #1e1b4b;
    --sidebar-fg: #e0e7ff;
    --sidebar-active: #4f46e5;
    --sidebar-title: #ffffff;
    --sidebar-border: rgba(255,255,255,.1);
    --sidebar-alerta: #fde68a;
    --sidebar-logout: #fca5a5;
    --input-bg:   #eeeef2;
    --input-border: #c4c4cc;

    /* Colores semánticos con opacidad — funcionan en claro y oscuro */
    --danger-bg:  rgba(220, 38, 38, .10);
    --danger-border: rgba(220, 38, 38, .35);
    --danger-text: #f87171;

    --warning-bg:  rgba(217, 119, 6, .12);
    --warning-border: rgba(217, 119, 6, .35);
    --warning-text: #fbbf24;

    --success-bg:  rgba(22, 163, 74, .12);
    --success-border: rgba(22, 163, 74, .35);
    --success-text: #4ade80;

    --info-bg:  rgba(2, 132, 199, .12);
    --info-border: rgba(2, 132, 199, .35);
    --info-text: #38bdf8;

    --primary-bg: rgba(124, 58, 237, .12);
    --primary-border: rgba(124, 58, 237, .35);
    --primary-text: #a78bfa;

    /* Fila de alerta en tabla */
    --row-danger-bg: rgba(220, 38, 38, .07);
}

/* Tema oscuro: ajusta solo las variables que cambian */
[data-tema="oscuro"] {
    --bg:         #09090b;
    --surface:    #18181b;
    --border:     #27272a;
    --text:       #fafafa;
    --text-muted: #a1a1aa;
    --input-bg:   #2c2c35;
    --input-border: #4a4a5a;

    /* En claro los colores semánticos son más saturados */
    --danger-text:  #f87171;
    --warning-text: #fbbf24;
    --success-text: #4ade80;
    --info-text:    #38bdf8;
    --primary-text: #a78bfa;
}

/* Tema claro: colores más oscuros para legibilidad sobre fondo blanco */
[data-tema="claro"],
:root {
    --danger-text:  #b91c1c;
    --warning-text: #b45309;
    --success-text: #15803d;
    --info-text:    #0369a1;
    --primary-text: #6d28d9;
}

/* Sidebar adapta sus colores al tema claro */
[data-tema="claro"] {
    --sidebar-bg:     #ffffff;
    --sidebar-fg:     #3f3f46;
    --sidebar-active: #ede9fe;
    --sidebar-title:  #18181b;
    --sidebar-border: rgba(0,0,0,.08);
    --sidebar-alerta: #b45309;
    --sidebar-logout: #b91c1c;
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { font-family: system-ui, sans-serif; font-size: 14px; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; overflow-x: hidden; }

/* ---- Sidebar ---- */
.sidebar {
    width: 220px; min-height: 100vh; background: var(--sidebar-bg);
    color: var(--sidebar-fg); display: flex; flex-direction: column;
    flex-shrink: 0;
}
.sidebar-header  { padding: 20px 16px; border-bottom: 1px solid var(--sidebar-border); }
.sidebar-logo    { display: block; font-size: 18px; font-weight: 700; color: var(--sidebar-title); }
.sidebar-user    { display: block; font-size: 13px; font-weight: 600; color: var(--sidebar-title); }

/* Bloque de perfil clickeable con avatar */
.sidebar-perfil {
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
    text-decoration: none; padding: 6px; border-radius: 8px; transition: background .15s;
}
.sidebar-perfil:hover { background: var(--sidebar-active); }
.sidebar-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-weight: 800; font-size: 18px;
    border: 2px solid var(--sidebar-border);
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-perfil-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sidebar-nav     { list-style: none; flex: 1; padding: 8px 0; }
.sidebar-nav li a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; color: var(--sidebar-fg); text-decoration: none;
    border-radius: 6px; margin: 2px 8px; transition: background .15s;
}
.sidebar-nav li.active a,
.sidebar-nav li a:hover { background: var(--sidebar-active); }
.sidebar-alertas { padding: 8px 16px; }
.sidebar-alertas a { color: var(--sidebar-alerta); font-size: 12px; text-decoration: none; }
.sidebar-footer  { padding: 16px; border-top: 1px solid var(--sidebar-border); }

/* ---- Reportes (componentes compartidos) ---- */
.rep-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.rep-tab  { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.rep-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.rep-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-bottom: 14px; }
.rep-filtros label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 4px; }
.rep-filtros input, .rep-filtros select { width: 100%; padding: 8px 10px; border-radius: 7px; box-sizing: border-box; }
.rep-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rep-mini  { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; }
.rep-mini .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.rep-mini .v { font-size: 22px; font-weight: 800; }

/* ---- Impresión / PDF ---- */
.only-print { display: none; }
@media print {
    .sidebar, .menu-toggle, .sidebar-overlay, #toast-container, .no-print { display: none !important; }
    .main-content { padding: 0 !important; overflow: visible !important; }
    body { background: #fff !important; }
    .only-print { display: block !important; }
    .section { border: none !important; padding: 0 !important; }
    .rep-membrete, .rep-membrete * { color: #000 !important; }
    table { font-size: 11px; }
}

/* ---- Menú móvil (sidebar colapsable) ---- */
.menu-toggle    { display: none; }
.sidebar-overlay { display: none; }
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 10px; left: 10px; z-index: 1200;
        width: 44px; height: 44px; border: none; border-radius: 9px;
        background: var(--sidebar-bg); color: #fff; font-size: 22px; cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 1300;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.35);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.5); z-index: 1250;
    }
    .main-content { padding-top: 64px; }
}
.btn-logout      { color: var(--sidebar-logout); font-size: 12px; text-decoration: none; }

/* ---- Main content ---- */
.main-content { flex: 1; min-width: 0; padding: 24px; overflow-y: auto; overflow-x: hidden; }
.page-header  { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.page-header h2 { font-size: 20px; font-weight: 700; }

/* ---- Login ---- */
.login-page     { justify-content: center; align-items: center; background: var(--bg); }
.login-card     { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 40px; width: 380px; }
.login-logo     { font-size: 24px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.login-subtitle { color: var(--text-muted); margin-bottom: 24px; }

/* ---- Forms ---- */
.form-group    { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; padding: 8px 12px;
    border: 1.5px solid var(--input-border);
    border-radius: 6px; background: var(--input-bg); color: var(--text); font-size: 14px;
    transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--primary); }

/* Inputs globales — aplica a TODOS incluyendo los con inline style */
input, select, textarea {
    background: var(--input-bg) !important;
    color: var(--text) !important;
    border-color: var(--input-border) !important;
    border-width: 1.5px !important;
    border-style: solid !important;
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

/* ---- Buttons ---- */
.btn        { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: opacity .15s; color: var(--text); }
.btn:hover  { opacity: .85; }
.btn-sm     { padding: 4px 10px; font-size: 12px; }
.btn-primary { background: var(--primary); color: #fff !important; }
.btn-danger  { background: var(--danger);  color: #fff !important; }
.btn-block   { width: 100%; justify-content: center; }

/* ---- Alerts — usan variables semánticas, visibles en ambos temas ---- */
.alert         { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.alert-danger  { background: var(--danger-bg);  color: var(--danger-text);  border: 1px solid var(--danger-border); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.alert-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.alert-info    { background: var(--info-bg);    color: var(--info-text);    border: 1px solid var(--info-border); }

/* ---- Badges — usan variables semánticas ---- */
.badge           { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge-warning   { background: var(--warning-bg);  color: var(--warning-text);  border: 1px solid var(--warning-border); }
.badge-info      { background: var(--info-bg);     color: var(--info-text);     border: 1px solid var(--info-border); }
.badge-primary   { background: var(--primary-bg);  color: var(--primary-text);  border: 1px solid var(--primary-border); }
.badge-success   { background: var(--success-bg);  color: var(--success-text);  border: 1px solid var(--success-border); }
.badge-danger    { background: var(--danger-bg);   color: var(--danger-text);   border: 1px solid var(--danger-border); }
.badge-secondary { background: var(--border);      color: var(--text-muted); }

/* ---- Metrics grid ---- */
.metrics-grid       { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }
.metric-card        { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px 16px; }
.metric-card--alert { border-color: var(--danger-border); background: var(--danger-bg); }
.metric-label       { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.metric-value       { font-size: 28px; font-weight: 700; }

/* ---- Table ---- */
.section    { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.section h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.table      { width: 100%; border-collapse: collapse; }
.table th   { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.table td   { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); background: var(--surface); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td  { background: var(--bg); }

/* Fila de alerta (insumo bajo mínimo) — usa variable semántica */
.table tr.row-alert td { background: var(--danger-bg) !important; }

/* Hint box informativo */
.hint-box {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px; margin-bottom: 16px; font-size: 12px; color: var(--text-muted);
}

/* ---- Deliveries ---- */
.deliveries-list { display: grid; gap: 16px; }
.delivery-card   { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.delivery-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
.delivery-monto  { margin-top: 8px; font-size: 15px; }

/* ---- Utilities ---- */
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger-text); }
.text-success { color: var(--success-text); }

/* ---- Toast notifications ---- */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

@keyframes input-blink {
    0%, 100% { border-color: var(--input-border) !important; }
    25%, 75%  { border-color: var(--warning) !important; box-shadow: 0 0 0 3px rgba(217,119,6,.25) !important; }
}
.input-blink { animation: input-blink .6s ease 3; }

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 280px;
    max-width: 380px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    pointer-events: all;
    animation: toast-in .25s ease;
    transition: opacity .3s ease, transform .3s ease;
}

.toast.toast-hiding {
    opacity: 0;
    transform: translateX(20px);
}

.toast-icon  { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.toast-body  { flex: 1; }
.toast-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.toast-msg   { font-size: 13px; color: var(--text-muted); }
.toast-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 16px; line-height: 1;
    flex-shrink: 0; padding: 0 2px;
}
.toast-close:hover { color: var(--text); }

.toast-success { border-color: var(--success-border); }
.toast-success .toast-title { color: var(--success-text); }

.toast-error   { border-color: var(--danger-border); }
.toast-error .toast-title { color: var(--danger-text); }

.toast-warning { border-color: var(--warning-border); }
.toast-warning .toast-title { color: var(--warning-text); }

.toast-info    { border-color: var(--info-border); }
.toast-info .toast-title { color: var(--info-text); }

/* Barra de progreso de auto-cierre */
.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    border-radius: 0 0 10px 10px;
    animation: toast-progress linear forwards;
}
.toast { position: relative; overflow: hidden; }
.toast-success .toast-progress { background: var(--success-text); }
.toast-error   .toast-progress { background: var(--danger-text); }
.toast-warning .toast-progress { background: var(--warning-text); }
.toast-info    .toast-progress { background: var(--info-text); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}