/* =====================================================================
   Sistema de Cajas - estilos de la interfaz administrativa
   Sobrio, legible, sin gradientes ni animaciones innecesarias.
   ===================================================================== */
:root {
    --app-bg: #f2f3f5;
    --app-surface: #ffffff;
    --app-border: #dcdfe4;
    --app-text: #1f2328;
    --app-muted: #646b75;
    --app-side-bg: #1d2530;
    --app-side-text: #b8c0cc;
    --app-side-active: #ffffff;
    --app-side-active-bg: #2d3846;
    --app-accent: #1f5f8b;
    --app-accent-dark: #174a6d;
    --app-sidebar-w: 236px;
    --bs-primary: #1f5f8b;
    --bs-primary-rgb: 31, 95, 139;
    --bs-link-color: #1f5f8b;
    --bs-link-color-rgb: 31, 95, 139;
    --bs-link-hover-color: #174a6d;
    --bs-body-font-size: .9375rem;
    --bs-border-color: var(--app-border);
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Botones con el color institucional ---- */
.btn-primary { --bs-btn-bg: var(--app-accent); --bs-btn-border-color: var(--app-accent); --bs-btn-hover-bg: var(--app-accent-dark); --bs-btn-hover-border-color: var(--app-accent-dark); --bs-btn-active-bg: var(--app-accent-dark); --bs-btn-disabled-bg: var(--app-accent); --bs-btn-disabled-border-color: var(--app-accent); }
.btn-outline-primary { --bs-btn-color: var(--app-accent); --bs-btn-border-color: var(--app-accent); --bs-btn-hover-bg: var(--app-accent); --bs-btn-hover-border-color: var(--app-accent); --bs-btn-active-bg: var(--app-accent-dark); }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }

/* ---- Estructura ---- */
.app-wrapper { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--app-sidebar-w);
    --bs-offcanvas-bg: var(--app-side-bg);
    --bs-offcanvas-width: var(--app-sidebar-w);
    background: var(--app-side-bg) !important; /* Bootstrap pone transparente el offcanvas-lg en escritorio */
    color: var(--app-side-text);
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .app-sidebar.offcanvas-lg { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.app-sidebar .offcanvas-header { border-bottom: 1px solid #2c3643; }
.app-brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem 1.1rem; color: #fff; text-decoration: none;
    border-bottom: 1px solid #2c3643; font-weight: 600; letter-spacing: .01em;
}
.app-brand .brand-icon {
    width: 32px; height: 32px; border-radius: 6px; background: var(--app-accent);
    display: grid; place-items: center; font-size: .95rem;
}
.app-brand small { display: block; font-weight: 400; color: var(--app-side-text); font-size: .75rem; }
.side-section { padding: .9rem 1.1rem .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #7d8795; }
.side-nav { list-style: none; margin: 0; padding: 0 .55rem; }
.side-nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .5rem .65rem; border-radius: 5px; color: var(--app-side-text); text-decoration: none; font-size: .9rem;
}
.side-nav a i { width: 18px; text-align: center; opacity: .85; }
.side-nav a:hover { background: #26303c; color: #fff; }
.side-nav a.active { background: var(--app-side-active-bg); color: var(--app-side-active); box-shadow: inset 3px 0 0 #5aa3d6; }
.side-nav .badge { margin-left: auto; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-header {
    background: var(--app-surface); border-bottom: 1px solid var(--app-border);
    height: 58px; display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
    position: sticky; top: 0; z-index: 1020;
}
.app-header h1 { font-size: 1.1rem; margin: 0; font-weight: 600; }
.app-header .header-meta { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: .85rem; color: var(--app-muted); }
.app-content { padding: 1.25rem; flex: 1; }
@media (min-width: 1200px) { .app-content { padding: 1.5rem 1.75rem; } }
.app-footer { padding: .75rem 1.25rem; color: var(--app-muted); font-size: .78rem; border-top: 1px solid var(--app-border); background: var(--app-surface); }

/* ---- Paneles (en lugar de tarjetas decorativas) ---- */
.panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 6px; margin-bottom: 1.25rem; }
.panel-header {
    padding: .7rem 1rem; border-bottom: 1px solid var(--app-border);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.panel-header h2 { font-size: .95rem; font-weight: 600; margin: 0; }
.panel-header .panel-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.panel-body { padding: 1rem; }
.panel > .table-responsive > .table, .panel > .table { margin-bottom: 0; }

.page-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.page-toolbar .ms-auto { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---- Tablas ---- */
.table { --bs-table-striped-bg: #f7f8fa; font-size: .875rem; }
.table > thead th {
    background: #f5f6f8; color: #4b525c; font-weight: 600; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 1px; white-space: nowrap;
}
.table td, .table th { vertical-align: middle; }
.table tfoot td, .table tfoot th { background: #f5f6f8; font-weight: 600; }
.table-actions { white-space: nowrap; text-align: right; }
.table-actions .btn { padding: .2rem .45rem; font-size: .8rem; }
.row-inactive td { color: #8a9099; }

.badge-estado { font-weight: 600; font-size: .72rem; letter-spacing: .03em; padding: .35em .6em; }
.badge-manual { background: #fff3cd; color: #7a5a00; border: 1px solid #ecd48a; font-weight: 600; font-size: .68rem; }

/* ---- Indicadores del dashboard ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--app-border); border: 1px solid var(--app-border); border-radius: 6px; overflow: hidden; margin-bottom: 1.25rem; }
.kpi { background: var(--app-surface); padding: .9rem 1rem; }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .kpi-grid { grid-template-columns: repeat(6, 1fr); } .kpi-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } }
.kpi-label { font-size: .75rem; color: var(--app-muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi-value.money { font-size: 1.15rem; white-space: nowrap; }
.kpi-sub { font-size: .78rem; color: var(--app-muted); }

.quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.quick-links a {
    display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border: 1px solid var(--app-border);
    border-radius: 5px; text-decoration: none; color: var(--app-text); background: #fff; font-size: .875rem;
}
.quick-links a:hover { border-color: var(--app-accent); color: var(--app-accent); }
.quick-links i { color: var(--app-accent); width: 18px; text-align: center; }

/* ---- Formularios ---- */
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .3rem; }
.form-control, .form-select { border-color: #c9ced6; }
.form-control:focus, .form-select:focus { border-color: #5a8fb5; box-shadow: 0 0 0 .2rem rgba(31, 95, 139, .15); }
.form-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); font-weight: 600; margin: 1rem 0 .5rem; }
.required::after { content: " *"; color: #b02a37; }
.filter-bar { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 6px; padding: .75rem 1rem; margin-bottom: 1rem; }
.filter-bar .form-label { font-size: .75rem; color: var(--app-muted); margin-bottom: .15rem; }

/* =====================================================================
   PANTALLA DE CAJA (apertura / cierre) - optimizada para el cajero
   ===================================================================== */
.caja-info { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; padding: .8rem 1rem; }
.caja-info div { font-size: .85rem; }
.caja-info span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); }
.caja-info strong { font-size: 1rem; }

.conteo-table td, .conteo-table th { padding: .35rem .6rem; }
.conteo-table .denom { font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.conteo-table .por { color: var(--app-muted); width: 1%; }
.input-caja {
    font-size: 1.2rem; font-weight: 600; text-align: right; height: 46px;
    font-variant-numeric: tabular-nums; max-width: 170px; margin-left: auto;
}
.input-caja.wide { max-width: 210px; }
.input-caja:not(:placeholder-shown) { background: #f4f9ff; }
.conteo-table td.td-div-qty { min-width: 150px; }
.conteo-table td.td-div-qty .input-caja { min-width: 135px; }
.conteo-table .subtotal { font-size: 1.05rem; font-weight: 600; min-width: 130px; }
.conteo-table tr.has-value .subtotal { color: var(--app-accent-dark); }
.conteo-table tfoot td { font-size: 1.05rem; }

.divisa-row .cot-manual { display: none; }
.divisa-row.manual .cot-manual { display: block; }
.divisa-row.manual .cot-vigente { text-decoration: line-through; color: var(--app-muted); }

.totales-panel { position: sticky; top: 72px; }
.totales-list { list-style: none; margin: 0; padding: 0; }
.totales-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; border-bottom: 1px solid #eceef1; font-variant-numeric: tabular-nums; }
.totales-list li span:last-child { font-weight: 600; white-space: nowrap; }
.totales-list li.total-general { background: #eef4f9; font-size: 1.15rem; border-bottom: 0; }
.totales-list li.total-general span:last-child { color: var(--app-accent-dark); font-weight: 700; }
.totales-list li.sub { font-size: .85rem; color: var(--app-muted); padding-top: .3rem; padding-bottom: .3rem; }
.formula { font-size: .75rem; color: var(--app-muted); padding: .6rem 1rem; }

.comparativo th, .comparativo td { font-size: .85rem; }
.var-pos { color: #196c2e; }
.var-neg { color: #b02a37; }

.confirm-table td { padding: .35rem .5rem; }

/* ---- Detalle de caja ---- */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem 1.25rem; }
.dl-grid dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); font-weight: 600; }
.dl-grid dd { margin: 0; font-size: .92rem; }

/* ---- Login ---- */
.auth-body { background: #e9ecef; min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-box { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--app-border); border-radius: 8px; }
.auth-box .auth-head { padding: 1.4rem 1.5rem 1rem; border-bottom: 1px solid var(--app-border); display: flex; gap: .8rem; align-items: center; }
.auth-box .auth-head .brand-icon { width: 42px; height: 42px; border-radius: 8px; background: var(--app-side-bg); color: #fff; display: grid; place-items: center; font-size: 1.15rem; }
.auth-box .auth-body-inner { padding: 1.5rem; }

/* Logo del comercio en el login */
.auth-logo { display: flex; justify-content: center; padding: 1.75rem 1.5rem .5rem; }
.auth-logo img { width: 100%; max-width: 230px; height: auto; display: block; }

/* ---- Locales del cajero ---- */
.local-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.local-item { border: 1px solid var(--app-border); border-radius: 6px; background: #fff; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.local-item h3 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.local-item .btn { margin-top: auto; }

.alert { border-radius: 5px; }
.empty-state { padding: 2rem 1rem; text-align: center; color: var(--app-muted); }
.empty-state i { font-size: 1.6rem; margin-bottom: .5rem; display: block; color: #aab1bb; }

@media (max-width: 575.98px) {
    .app-content { padding: .9rem; }
    .input-caja { max-width: 120px; font-size: 1.05rem; }
    .kpi-value { font-size: 1.25rem; }
}

@media print {
    .app-sidebar, .app-header, .app-footer, .no-print, .page-toolbar, .filter-bar { display: none !important; }
    .app-content { padding: 0; }
    .panel { border: 0; }
}