/* Estética del sistema, tomada del tablero de gestión: fondo suave, paneles con borde fino, radios parejos,
   azul de marca y tablas más limpias. Los colores están como variables --es-* (un bloque por tema): para ajustar
   la paleta se toca solo este archivo. Se carga después de bootstrap y de app.css. */

:root {
    --es-pagina: #f3f7fa;
    --es-panel: #ffffff;
    --es-panel2: #f7fafc;
    --es-borde: #d9e4ec;
    --es-texto: #18364f;
    --es-suave: #63788a;
    --es-marca: #176da8;
    --es-marca-hover: #125a8a;
    --es-marca-suave: #e3eef7;
    --es-radio: 12px;
    --es-hover: rgba(23, 109, 168, .06);
    --es-ok: #1a7f5a; --es-ok-s: #e2f3ec;
    --es-wa: #b54708; --es-wa-s: #fdf0e3;
    --es-rd: #b42318; --es-rd-s: #fdeceb;
    --es-mg: #a3246f;

    --bs-body-color: #18364f;
    --bs-body-color-rgb: 24, 54, 79;
    --bs-secondary-color: #63788a;
    --bs-secondary-color-rgb: 99, 120, 138;
    --bs-border-color: #d9e4ec;
    --bs-tertiary-bg: #f7fafc;
    --bs-secondary-bg: #eef2f5;
    --bs-primary: #176da8;
    --bs-primary-rgb: 23, 109, 168;
    --bs-link-color: #176da8;
    --bs-link-color-rgb: 23, 109, 168;
    --bs-link-hover-color: #125a8a;
    --bs-link-hover-color-rgb: 18, 90, 138;
}

[data-bs-theme="dark"] {
    --es-pagina: #0f1720;
    --es-panel: #16212d;
    --es-panel2: #121b25;
    --es-borde: #243445;
    --es-texto: #e6edf3;
    --es-suave: #8da2b5;
    --es-marca: #4da3e6;
    --es-marca-hover: #7bbcf0;
    --es-marca-suave: #173a57;
    --es-radio: 8px;
    --es-hover: rgba(255, 255, 255, .05);
    --es-ok: #3fb98a; --es-ok-s: #14392e;
    --es-wa: #e8a03c; --es-wa-s: #40300f;
    --es-rd: #f06a62; --es-rd-s: #4a1d1b;
    --es-mg: #e36ab0;

    --bs-body-bg: #16212d;
    --bs-body-bg-rgb: 22, 33, 45;
    --bs-body-color: #e6edf3;
    --bs-body-color-rgb: 230, 237, 243;
    --bs-secondary-color: #8da2b5;
    --bs-secondary-color-rgb: 141, 162, 181;
    --bs-border-color: #243445;
    --bs-tertiary-bg: #1d2b3a;
    --bs-secondary-bg: #243445;
    --bs-primary: #4da3e6;
    --bs-primary-rgb: 77, 163, 230;
    --bs-link-color: #4da3e6;
    --bs-link-color-rgb: 77, 163, 230;
    --bs-link-hover-color: #7bbcf0;
    --bs-link-hover-color-rgb: 123, 188, 240;
}

/* ── Página ── */
html body { background: var(--es-pagina); color: var(--es-texto); }
.content { padding-top: 1.25rem; }
h1, h2, h3, h4, h5 { color: var(--es-texto); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.45rem; }

/* ── Paneles ── */
.card {
    background: var(--es-panel);
    border: 1px solid var(--es-borde);
    border-radius: var(--es-radio);
    box-shadow: none;
}
.modal-content, .modal-panel {
    background: var(--es-panel);
    color: var(--es-texto);
    border: 1px solid var(--es-borde);
    border-radius: var(--es-radio);
}
.dropdown-menu, .list-group-item { background: var(--es-panel); border-color: var(--es-borde); }
.alert { border-radius: calc(var(--es-radio) - 2px); }
.badge { font-weight: 600; }

/* ── Botones ── */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--es-marca); --bs-btn-border-color: var(--es-marca);
    --bs-btn-hover-bg: var(--es-marca-hover); --bs-btn-hover-border-color: var(--es-marca-hover);
    --bs-btn-active-bg: var(--es-marca-hover); --bs-btn-active-border-color: var(--es-marca-hover);
    --bs-btn-disabled-bg: var(--es-marca); --bs-btn-disabled-border-color: var(--es-marca);
    color: #fff; background-color: var(--es-marca); border-color: var(--es-marca);
}
.btn-primary:hover { background-color: var(--es-marca-hover); border-color: var(--es-marca-hover); color: #fff; }
.btn-outline-primary {
    --bs-btn-color: var(--es-marca); --bs-btn-border-color: var(--es-marca);
    --bs-btn-hover-bg: var(--es-marca); --bs-btn-hover-border-color: var(--es-marca); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--es-marca); --bs-btn-active-border-color: var(--es-marca); --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: var(--es-suave); --bs-btn-border-color: var(--es-borde);
    --bs-btn-hover-bg: var(--es-hover); --bs-btn-hover-border-color: var(--es-suave); --bs-btn-hover-color: var(--es-texto);
}

/* ── Formularios ── */
.form-control, .form-select {
    background-color: var(--es-panel);
    border-color: var(--es-borde);
    color: var(--es-texto);
    border-radius: 8px;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--es-marca);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--es-marca) 22%, transparent);
}
.form-label { color: var(--es-suave); font-weight: 500; }
.form-check-input:checked { background-color: var(--es-marca); border-color: var(--es-marca); }

/* ── Tablas ── */
.table {
    --bs-table-bg: var(--es-panel);
    --bs-table-color: var(--es-texto);
    --bs-table-border-color: var(--es-borde);
    --bs-table-hover-bg: var(--es-hover);
    --bs-table-striped-bg: var(--es-panel2);
    font-size: 13.5px;
}
.table > thead > tr > th, .table > thead > tr > td {
    color: var(--es-suave);
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--es-borde);
    background: var(--es-panel2);
}
.table > :not(caption) > * > * { border-bottom-color: var(--es-borde); }

/* ── Encabezado y menú ── */
main > .top-row { background-color: var(--es-panel) !important; border-bottom: 1px solid var(--es-borde) !important; }
.tema-sel { border-color: var(--es-borde); background: var(--es-panel2); }
.tema-sel button { color: var(--es-suave); }
.tema-sel button:hover { background: var(--es-hover); color: var(--es-texto); }
html[data-tema-pref="claro"] .tema-sel [data-tema="claro"],
html[data-tema-pref="oscuro"] .tema-sel [data-tema="oscuro"],
html[data-tema-pref="sistema"] .tema-sel [data-tema="sistema"] { background: var(--es-marca-suave); color: var(--es-marca); }

/* ── Tarjetas de números (Dashboard y Gestiones): el mismo estilo que los contadores del tablero ──
   Etiqueta chica con ícono arriba, número grande abajo, sin colores de fondo; el color va solo en el número. */
.dashboard-wrapper { background: transparent; }
.soft-panel {
    background: var(--es-panel);
    border: 1px solid var(--es-borde);
    border-radius: var(--es-radio);
    padding: 16px;
    box-shadow: none;
}
.semaforo-card {
    display: flex; flex-direction: column;
    background: var(--es-panel);
    border: 1px solid var(--es-borde);
    border-radius: var(--es-radio);
    padding: 10px 12px;
    text-align: left;
    box-shadow: none;
    transition: border-color .12s;
}
.semaforo-card:hover { border-color: var(--es-suave); transform: none; }
.semaforo-label { order: -1; color: var(--es-suave); font-size: 12px; margin: 0; display: flex; gap: 6px; align-items: center; }
.semaforo-numero { font-size: 1.7rem; font-weight: 600; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--es-texto); }
.semaforo-verde .semaforo-numero, .semaforo-verde-oscuro .semaforo-numero { color: var(--es-ok); }
.semaforo-amarillo .semaforo-numero { color: var(--es-wa); }
.semaforo-rojo .semaforo-numero { color: var(--es-rd); }
.semaforo-magenta .semaforo-numero { color: var(--es-mg); }
.semaforo-celeste .semaforo-numero { color: var(--es-marca); }
.semaforo-gris .semaforo-numero { color: var(--es-suave); }

.dashboard-card {
    background: var(--es-panel);
    border: 1px solid var(--es-borde);
    border-radius: var(--es-radio);
    padding: 10px 12px;
    box-shadow: none;
    color: var(--es-texto);
}
.dashboard-card .mud-typography-caption { color: var(--es-suave); font-size: 12px; }
.dashboard-card .mud-typography-h4 { font-size: clamp(1.3rem, 1.7vw, 1.7rem); white-space: nowrap; font-weight: 600; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.dashboard-card.card-green .mud-typography-h4 { color: var(--es-ok); }
.dashboard-card.card-red .mud-typography-h4 { color: var(--es-rd); }
.dashboard-card.card-warn .mud-typography-h4, .dashboard-card.card-cost .mud-typography-h4 { color: var(--es-wa); }
.dashboard-card.card-blue .mud-typography-h4 { color: var(--es-marca); }

/* ── Warehouse › Recepción: panel de la cámara fijo arriba (se ve el visor, el último resultado y el botón de cerrar) ── */
.camara-panel { display: none; }
.camara-panel.activa {
    display: block; position: sticky; top: 0; z-index: 1030;
    background: var(--es-panel); border: 1px solid var(--es-borde); border-radius: var(--es-radio);
    padding: 8px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
@media (min-width: 641px) { .camara-panel.activa { top: 3.75rem; } }
.camara-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.camara-panel #lector-camara { max-width: 420px; margin: 0 auto; }
.camara-panel #lector-camara video { width: 100%; max-height: 38vh; object-fit: cover; border-radius: 8px; }
.camara-ultimo { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--es-panel2); font-size: 13px; }