/* TransBan — estilos de aplicación */

:root {
    --tb-primary:   #0d6efd;
    --tb-success:   #198754;
    --tb-danger:    #dc3545;
    --tb-secondary: #6c757d;
    --tb-light-bg:  #f8f9fa;
    --tb-border:    #dee2e6;
}

body { background-color: var(--tb-light-bg); }

/* Navbar */
.navbar-brand { font-weight: 700; letter-spacing: .5px; }
.btn-admin-menu {
    color: #f8f9fa;
    border-color: rgba(255,255,255,.45);
    background: transparent;
}
.btn-admin-menu:hover,
.btn-admin-menu:focus,
.btn-admin-menu:focus-visible,
.btn-admin-menu:active,
.show > .btn-admin-menu.dropdown-toggle {
    color: #ffffff;
    border-color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.14);
    box-shadow: none;
}

/* Tarjetas de sección */
.section-card {
    background: #fff;
    border: 1px solid var(--tb-border);
    border-radius: .5rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.section-card .section-title {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tb-secondary);
    letter-spacing: .6px;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--tb-border);
}

.analytics-tramo-card {
    display: flex;
    flex-direction: column;
    padding-top: 1rem !important;
    padding-bottom: .85rem !important;
    margin-bottom: 0;
}

.analytics-tramo-card .section-title {
    font-size: .78rem;
    margin-bottom: .35rem !important;
    padding-bottom: .35rem;
}

.analytics-tramo-copy {
    line-height: 1.15;
}

.analytics-tramo-chart-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 240px;
}

.analytics-tramo-chart-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.analytics-tramo-metrics .small {
    line-height: 1.1;
}

.analytics-tramo-metrics .fw-bold {
    font-size: 1rem;
    line-height: 1.1;
}

.analytics-dashboard-card {
    margin-bottom: 0;
    padding-top: 1rem !important;
    padding-bottom: .9rem !important;
}

.analytics-dashboard-card .section-title {
    margin-bottom: .45rem !important;
    padding-bottom: .4rem;
}

.analytics-dashboard-copy {
    line-height: 1.15;
}

.analytics-dashboard-chart-wrap {
    position: relative;
    width: 100%;
}

.analytics-dashboard-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.analytics-dashboard-chart-wide {
    height: 555px;
}

.analytics-dashboard-chart-narrow {
    height: 435px;
}

.analytics-comercial-card {
    margin-bottom: 0;
}

.analytics-comercial-chart-wrap {
    position: relative;
    min-height: 480px;
}

.analytics-comercial-chart-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.selected-client-display {
    background: #eef2f6;
    color: #1f2933;
    font-weight: 500;
}

.selected-package-volume {
    background: #eef2f6;
    color: #1f2933;
    font-weight: 500;
}

.cotizar-brand-panel {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.cotizar-brand-logo {
    width: min(220px, 48vw);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(13, 15, 18, .10));
}

/* Tabla de recorrido */
.recorrido-table td { padding: .35rem .6rem; font-size: .9rem; }
.recorrido-table .step-origen  td:first-child { color: #0d6efd; font-weight: 600; }
.recorrido-table .step-destino td:first-child { color: #198754; font-weight: 600; }
.recorrido-table .step-hub     td:first-child { color: #6610f2; }
.recorrido-table .step-ruta    td:first-child { color: #fd7e14; font-style: italic; }
.recorrido-table .costo-col    { text-align: right; font-family: monospace; }

/* Variable costs */
.var-cost-row {
    background: #fffde7;
    border-left: 3px solid #ffc107;
    padding: .4rem .75rem;
    margin-top: .3rem;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.var-cost-row label { font-size: .85rem; color: #555; margin: 0; min-width: 200px; }
.var-cost-row .cost-input { width: 110px; font-size: .9rem; }
.var-cost-row .formula-hint { font-size: .8rem; color: #888; }
.var-cost-row .calculated { font-weight: 600; font-size: .9rem; min-width: 90px; }

/* Totales del breakdown */
.totales-box {
    background: #f0f4ff;
    border: 1px solid #c5d5ff;
    border-radius: .4rem;
    padding: .75rem 1rem;
    margin-top: .75rem;
}
.totales-box .total-row { display: flex; justify-content: space-between; padding: .2rem 0; font-size: .9rem; }
.totales-box .total-row.grand { font-weight: 700; font-size: 1rem; border-top: 1px solid #aac; margin-top: .3rem; padding-top: .4rem; }

/* Grilla de líneas */
.lineas-table th { font-size: .8rem; font-weight: 600; color: var(--tb-secondary); }
.lineas-table td { font-size: .88rem; vertical-align: middle; }
.lineas-table .monto { text-align: right; font-family: monospace; }
.total-general-bar {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 1rem; padding: .6rem 1rem;
    background: #e8f5e9; border-top: 2px solid #a5d6a7;
    font-weight: 700;
}

/* Badge estado */
.badge-borrador { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.badge-cerrada  { background: #d1e7dd; color: #0a3622; border: 1px solid #198754; }

/* Spinner HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator  { display: inline-block; }

/* Autocompletado de localidades */
.autocomplete-wrapper { position: relative; }
.autocomplete-results {
    position: absolute; z-index: 1050;   /* por encima de tablas y modals */
    left: 0; top: 100%;
    background: #fff;
    border: 1px solid var(--tb-border);
    border-radius: .375rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    max-height: 220px; overflow-y: auto;
    min-width: 260px;          /* ancho mínimo garantizado */
    width: max-content;        /* se expande según el contenido */
    display: none;
}
.autocomplete-results.show { display: block; }
.autocomplete-item {
    padding: .45rem .75rem;
    font-size: .875rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;        /* evita que el texto se parta */
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.active { background: #f0f4ff; }

/* Ganancia en breakdown */
.ganancia-row { margin-top: .5rem; border-top: 1px dashed #aac; padding-top: .4rem; }
.ganancia-input { width: 80px; text-align: right; }
.precio-venta-row { background: #e8f5e9; border-radius: .25rem; padding: .3rem .5rem; }

/* Barra ganancia general (lineas_grid) */
.ganancia-general-bar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .75rem; padding: .5rem 1rem;
    background: #f0fff4; border-top: 1px dashed #a5d6a7;
}

/* Tabla costos generales (detalle) */
.costos-table td, .costos-table th { font-size: .85rem; padding: .3rem .6rem; }
.costos-table .tipo-header td { background: #f8f9fa; letter-spacing: .3px; }
.costos-table .tipo-spacer td { padding: .15rem 0; border: none; }

/* Gráfico de torta */
.chart-container { max-width: 240px; margin: 0 auto; }
.chart-legend { display: flex; flex-direction: column; gap: .25rem; }
.pie-legend-item { display: flex; align-items: center; gap: .5rem; }
.pie-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* Cabecera colapsable */
.collapse-toggle:hover { background: #f8f9fa; border-radius: .25rem; }
.collapse-toggle .collapse-chevron { transition: transform .2s; }

/* ── Selector de vehículo por ruta ────────────────────────────────── */

/* Fila del collapse — sin borde visible */
.step-ruta-veh td { border: none !important; padding: 0 !important; }

/* Badge del vehículo seleccionado en la fila de ruta */
.veh-badge-selected {
    background: #e8f0fe;
    color: #3b5bdb;
    font-weight: 500;
    font-size: .78rem;
    border: 1px solid #c5d5ff;
    border-radius: .3rem;
    padding: .18rem .5rem;
}

/* Botón de edición de vehículo */
.veh-toggle-btn {
    color: #6c757d;
    font-size: .8rem;
    line-height: 1;
    text-decoration: none;
}
.veh-toggle-btn:hover { color: #3b5bdb; }

/* Panel expandible con las opciones */
.veh-selector-panel {
    background: #f8f9ff;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: .65rem 1rem;
}

/* Grilla de opciones de vehículo */
.veh-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Cada opción de vehículo */
.veh-option {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    border: 1px solid #dee2e6;
    border-radius: .4rem;
    padding: .45rem .75rem;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s, background .15s;
    min-width: 140px;
}
.veh-option input[type="radio"] { display: none; }
.veh-option:hover { border-color: #aab8ff; background: #f0f4ff; }
.veh-option.selected,
.veh-option:has(input:checked) {
    border-color: #3b5bdb;
    background: #eef2ff;
}
.veh-option-name {
    font-size: .85rem;
    font-weight: 600;
    color: #212529;
}
.veh-option-detail {
    font-size: .75rem;
    color: #6c757d;
}

/* ── Dark mode ── */
[data-theme="dark"] .veh-badge-selected {
    background: #1e2540;
    color: #91b4ff;
    border-color: #2d3f6e;
}
[data-theme="dark"] .veh-toggle-btn { color: #7a8492; }
[data-theme="dark"] .veh-toggle-btn:hover { color: #91b4ff; }
[data-theme="dark"] .veh-selector-panel {
    background: #1e2128;
    border-color: var(--tb-border);
}
[data-theme="dark"] .veh-option {
    background: #23272e;
    border-color: #3a3f47;
}
[data-theme="dark"] .veh-option:hover { border-color: #5a7fff; background: #1e2540; }
[data-theme="dark"] .veh-option.selected,
[data-theme="dark"] .veh-option:has(input:checked) {
    border-color: #4d9fff;
    background: #1a2640;
}
[data-theme="dark"] .veh-option-name { color: #e0e4ea; }
[data-theme="dark"] .veh-option-detail { color: #7a8492; }

/* Tabla de costos detallada */
.costos-table td, .costos-table th { font-size: .82rem; padding: .28rem .5rem; }
.costos-table .tipo-header td { background: #f3f4f6; letter-spacing: .3px; border-top: 2px solid #dee2e6; }

/* ══════════════════════════════════════════════════════════════════
   MODO OSCURO — [data-theme="dark"]
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --tb-primary:   #4d9fff;
  --tb-success:   #3ddc84;
  --tb-danger:    #ff6b6b;
  --tb-secondary: #9aa5b1;
  --tb-light-bg:  #1a1d21;
  --tb-border:    #3a3f47;
  --tb-paq-bg:    #2a2e35;
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: var(--tb-light-bg);
  color: #e0e4ea;
}

/* Tarjetas */
[data-theme="dark"] .section-card {
  background: #23272e;
  border-color: var(--tb-border);
  color: #e0e4ea;
}
[data-theme="dark"] .section-card .section-title {
  color: var(--tb-secondary);
  border-bottom-color: var(--tb-border);
}

/* Tablas Bootstrap */
[data-theme="dark"] .table {
  --bs-table-color: #e0e4ea;
  --bs-table-bg: transparent;
  --bs-table-border-color: #3a3f47;
  --bs-table-striped-bg: #2a2e35;
  --bs-table-hover-bg: #2f343c;
}
[data-theme="dark"] .table-light {
  --bs-table-color: #adb5bd;
  --bs-table-bg: #2a2e35;
  --bs-table-border-color: #3a3f47;
}
[data-theme="dark"] .table-secondary {
  --bs-table-color: #e0e4ea;
  --bs-table-bg: #2f343c;
}

/* Recorrido */
[data-theme="dark"] .recorrido-table .step-origen  td:first-child { color: #4d9fff; }
[data-theme="dark"] .recorrido-table .step-destino td:first-child { color: #3ddc84; }
[data-theme="dark"] .recorrido-table .step-hub     td:first-child { color: #a78bfa; }
[data-theme="dark"] .recorrido-table .step-ruta    td:first-child { color: #ffa94d; }

/* Costos variables — sección completa */
[data-theme="dark"] p.text-warning-emphasis {
  color: #f0b429 !important;
}

/* Cada renglón de costo variable */
[data-theme="dark"] .var-cost-row {
  background: #2a2e35;
  border-left-color: #f0b429;
  border-bottom: 1px solid #32373f;
}
[data-theme="dark"] .var-cost-row:hover {
  background: #2f343c;
}

/* Checkbox */
[data-theme="dark"] .var-cost-row .form-check-input {
  background-color: #2a2e35;
  border-color: #f0b429;
}
[data-theme="dark"] .var-cost-row .form-check-input:checked {
  background-color: #f0b429;
  border-color: #f0b429;
}

/* Etiqueta nombre del costo */
[data-theme="dark"] .var-cost-row label {
  color: #d4c68a;
}

/* Input numérico de valor */
[data-theme="dark"] .var-cost-row .cost-input.form-control {
  background-color: #1e2128;
  border-color: #3a3f47;
  color: #e0e4ea;
}
[data-theme="dark"] .var-cost-row .cost-input.form-control:focus {
  background-color: #22262e;
  border-color: #f0b429;
  color: #e0e4ea;
  box-shadow: 0 0 0 .2rem rgba(240,180,41,.2);
}

/* Hint de unidad / fórmula */
[data-theme="dark"] .var-cost-row .formula-hint {
  color: #8a7e50;
}

/* Valor calculado ($X.XX) */
[data-theme="dark"] .var-cost-row .calculated {
  color: #ffd166;
}

/* Renglón deshabilitado (checkbox destildado) */
[data-theme="dark"] .var-cost-row.disabled-row {
  background: #23272e;
  opacity: .5;
}

/* Totales */
[data-theme="dark"] .totales-box {
  background: #1e2540;
  border-color: #2d3f6e;
  color: #e0e4ea;
}
[data-theme="dark"] .totales-box .total-row.grand {
  border-top-color: #3a4f80;
}

/* Barra total general */
[data-theme="dark"] .total-general-bar {
  background: #1e3028;
  border-top-color: #2d5a3d;
  color: #e0e4ea;
}

/* Barra ganancia general */
[data-theme="dark"] .ganancia-general-bar {
  background: #192e22;
  border-top-color: #2d5a3d;
}

/* Color unificado para todos los valores de Precio de venta */
.text-venta { color: #198754 !important; }   /* mismo verde que text-success en modo día */
[data-theme="dark"] .text-venta { color: #ffd166 !important; }

/* Precio de venta row */
[data-theme="dark"] .precio-venta-row {
  background: #1e3028;
}

/* Costos-table tipo-header */
[data-theme="dark"] .costos-table .tipo-header td {
  background: #2a2e35;
  border-top-color: var(--tb-border);
}

/* Autocomplete */
[data-theme="dark"] .autocomplete-results {
  background: #23272e;
  border-color: var(--tb-border);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
[data-theme="dark"] .autocomplete-item {
  color: #e0e4ea;
  border-bottom-color: #2f343c;
}
[data-theme="dark"] .autocomplete-item:hover,
[data-theme="dark"] .autocomplete-item.active { background: #1e2540; }

/* Badges */
[data-theme="dark"] .badge-borrador { background: #3a2e00; color: #ffc107; border-color: #c89b00; }
[data-theme="dark"] .badge-cerrada  { background: #0d3020; color: #3ddc84; border-color: #2d5a3d; }

/* Collapse toggle hover */
[data-theme="dark"] .collapse-toggle:hover { background: #2a2e35; }

/* Formularios Bootstrap */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #2a2e35;
  border-color: #3a3f47;
  color: #e0e4ea;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #2f343c;
  border-color: #4d9fff;
  color: #e0e4ea;
  box-shadow: 0 0 0 .2rem rgba(77,159,255,.25);
}
[data-theme="dark"] .form-control::placeholder { color: #6c757d; }
[data-theme="dark"] .selected-client-display {
  background: #e9edf2;
  border-color: #d6dbe1;
  color: #1f2933;
}
[data-theme="dark"] .selected-package-volume {
  background: #e9edf2;
  border-color: #d6dbe1;
  color: #1f2933;
}
[data-theme="dark"] .cotizar-brand-logo {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35));
}
[data-theme="dark"] .form-check-input {
  background-color: #2a2e35;
  border-color: #3a3f47;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--tb-primary);
  border-color: var(--tb-primary);
}

/* Input groups */
[data-theme="dark"] .input-group-text {
  background-color: #2f343c;
  border-color: #3a3f47;
  color: #adb5bd;
}

/* Alerts */
[data-theme="dark"] .alert-danger {
  background-color: #3b0a0a;
  border-color: #7a2020;
  color: #ff9999;
}
[data-theme="dark"] .alert-success {
  background-color: #0a2e1a;
  border-color: #1a5c30;
  color: #3ddc84;
}
[data-theme="dark"] .alert-warning {
  background-color: #2e2000;
  border-color: #7a5500;
  color: #ffd166;
}

/* Botones outline en modo oscuro */
[data-theme="dark"] .btn-outline-secondary {
  color: #adb5bd;
  border-color: #5a6370;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #3a3f47;
  color: #e0e4ea;
}
[data-theme="dark"] .btn-outline-danger {
  color: #ff6b6b;
  border-color: #993333;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background-color: #3b1515;
}

/* Texto muted */
[data-theme="dark"] .text-muted { color: #7a8492 !important; }
[data-theme="dark"] .text-secondary { color: var(--tb-secondary) !important; }

/* Navbar — ya es dark, solo ajuste menor */
[data-theme="dark"] .navbar.bg-dark { background-color: #0d0f12 !important; }
[data-theme="dark"] .btn-admin-menu {
  color: #f8f9fa;
  border-color: rgba(255,255,255,.4);
  background: transparent;
}
[data-theme="dark"] .btn-admin-menu:hover,
[data-theme="dark"] .btn-admin-menu:focus,
[data-theme="dark"] .btn-admin-menu:focus-visible,
[data-theme="dark"] .btn-admin-menu:active,
[data-theme="dark"] .show > .btn-admin-menu.dropdown-toggle {
  color: #ffffff;
  border-color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.16);
  box-shadow: none;
}

/* ── Admin tables (dark) ────────────────────────────────────── */
[data-theme="dark"] .table-light th {
  background-color: #23272e !important;
  color: #c0c5ce;
  border-color: #32373f;
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: #2a2e35;
}
[data-theme="dark"] code {
  color: #e5a54b;
}
[data-theme="dark"] .btn-outline-warning {
  color: #ffd166;
  border-color: #b38f3a;
}
[data-theme="dark"] .btn-outline-warning:hover {
  background-color: #3b3215;
  color: #ffe09a;
}
[data-theme="dark"] .btn-outline-primary {
  color: #6ea8fe;
  border-color: #3d6db5;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: #1a2d4a;
}