/*
 * brand-override.css
 * Cambio de imagen del panel web: paleta navy + ámbar tomada de
 * sistema_transporte_app/lib/theme.dart (AppColors), en vez del rojo
 * original (#A3181C) del template Bootstrap 4.
 *
 * No se modifica main.css (compilado, sin fuente SCSS en el repo) — este
 * archivo se carga DESPUÉS de main.css/style.css y sobreescribe por cascada.
 *
 * Regla de contraste (verificada WCAG): #F6A623 (ámbar) sobre blanco o con
 * texto blanco encima NO pasa 4.5:1 (da 2.02:1). Por eso el ámbar solo se
 * usa relleno + texto navy encima, o como borde/acento decorativo sin
 * texto. Todo lo que antes era rojo con texto blanco (chips, badges de
 * estado activo, barra de progreso, etc.) pasa a navy, que sí tiene
 * contraste de sobra (17.85:1) con texto blanco.
 */

:root {
  --primary: #0F172A;
}

/* ---------- Logo de la pantalla de login ---------- */

.login-head__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* .login-form es position:absolute (top:0/bottom:0) dentro de .login-box,
   así que .login-box NO crece con el contenido — solo con su min-height.
   El logo más alto que el ícono original empujó el botón contra el borde
   inferior de la tarjeta. Se le da más aire en vez de restructurar el
   posicionamiento del template. */
.login-content .login-box {
  min-height: 440px;
}

/* ---------- Logotipo con texto en el header (icono + nombre) ---------- */

.app-header__logo.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
}

.brand-lockup .lgo_principal {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.brand-lockup__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.brand-lockup__name {
  font-size: 15px;
  font-weight: 700;
  color: #FFF;
}

.brand-lockup__sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F6A623;
}

/* ---------- Superficies estructurales (antes rojo/gris oscuro) ---------- */

.app-header {
  background-color: #0F172A;
}

@media (min-width: 768px) {
  .app-header__logo {
    background-color: #0B1220; /* navy un punto más oscuro para separar el panel del logo del resto del header */
  }
}

.app-sidebar {
  background-color: #0F172A;
}

/* ---------- Ámbar: solo CTA principal, con texto navy obligatorio ---------- */

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #F6A623;
  border-color: #F6A623;
  color: #0F172A;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #d98f13;
  border-color: #d98f13;
  color: #0F172A;
}

.btn-outline-primary:hover,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: #F6A623;
  border-color: #F6A623;
  color: #0F172A;
}

.badge-primary {
  background-color: #F6A623;
  color: #0F172A;
}

/* ---------- Ámbar: acentos decorativos sin texto encima ---------- */

.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.sweet-alert input:focus {
  border-color: #F6A623;
}

.app-menu__item.active,
.app-menu__item:hover,
.app-menu__item:focus,
.treeview.is-expanded [data-toggle='treeview'],
.sidebar-mini.sidenav-toggled .treeview:hover .app-menu__item,
.user .user-tabs .nav-link.active {
  border-left-color: #F6A623;
}

.custom-range::-webkit-slider-thumb {
  background-color: #F6A623;
}

.custom-range::-moz-range-thumb {
  background-color: #F6A623;
}

.custom-range::-ms-thumb {
  background-color: #F6A623;
}

.path {
  stroke: #F6A623;
}

/* ---------- Navy: todo lo demás que antes era rojo ---------- */

a {
  color: #0F172A;
}

.btn-link,
.btn-outline-primary,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled,
.page-link {
  color: #0F172A;
}

.btn-outline-primary {
  border-color: #0F172A;
}

.bg-primary {
  background-color: #0F172A !important;
}

.border-primary {
  border-color: #0F172A !important;
}

.text-primary {
  color: #0F172A !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #0F172A;
  background-color: #0F172A;
}

.nav-pills .show > .nav-link {
  background-color: #0F172A;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #0F172A;
}

.page-item.active .page-link {
  background-color: #0F172A;
  border-color: #0F172A;
}

.progress-bar {
  background-color: #0F172A;
}

.list-group-item.active {
  background-color: #0F172A;
  border-color: #0F172A;
}

.datepicker table tr td.active.highlighted.focus,
.datepicker table tr td.active.highlighted:hover,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted,
.datepicker table tr td span.active.disabled:hover.focus,
.datepicker table tr td span.active.disabled:hover:hover,
.open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
  background-color: #0F172A;
}

.sweet-alert button {
  background-color: #0F172A !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #0F172A;
}

.fc-state-active,
.fc-event {
  background-color: #0F172A;
  border-color: #0F172A;
}

.animated-checkbox input[type="checkbox"]:checked + .label-text:before,
.animated-radio-button input[type="radio"]:checked + .label-text:before,
.toggle input[type="checkbox"]:checked + .button-indecator:before {
  color: #0F172A;
}

.toggle-flip input[type="checkbox"] + .flip-indecator:after {
  background-color: #0F172A;
}

.material-half-bg .cover {
  background-color: #0F172A;
}

.widget-small.primary,
.widget-small.primary.coloured-icon .icon {
  background-color: #0F172A;
}

.messanger .messages .message.me .info {
  background-color: #0F172A;
}

.messanger .messages .message.me .info:after {
  border-color: transparent #0F172A transparent transparent;
}

.messanger .sender input[type="text"] {
  border: 1px solid #0F172A;
}

.feature-icon-backdrop {
  background-color: #0F172A;
}

/* ---------- Segunda pasada: tonos derivados del rojo que faltaron
   (#760F12/#AC4447/#96000E — variantes de hover/focus/active de las
   reglas de arriba, cada una es un literal CSS distinto, no heredan
   del cambio de #A3181C) ---------- */

/* barra de toggle del sidebar: pedido explícito, no debe quedar roja */
.app-sidebar__toggle:focus,
.app-sidebar__toggle:hover {
  background-color: #F6A623;
  color: #0F172A;
}

a:hover {
  color: #0B1220;
}

::selection,
::-moz-selection {
  background-color: #0F172A;
  color: #FFF;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0B1220 !important;
}

a.badge-primary:hover,
a.badge-primary:focus {
  background-color: #d98f13;
  color: #0F172A;
}

.sweet-alert button:active {
  background-color: #0B1220 !important;
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.open > .dropdown-toggle.datepicker table tr td.active,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.open > .dropdown-toggle.datepicker table tr td span.active,
.open > .dropdown-toggle.datepicker table tr td span.active:hover,
.open > .dropdown-toggle.datepicker table tr td span.active.disabled,
.open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
  border-color: #0F172A;
}

.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus,
.datepicker table tr td span.active.disabled:hover.active.focus,
.open > .dropdown-toggle.datepicker table tr td span.active.focus,
.open > .dropdown-toggle.datepicker table tr td span.active:hover.focus,
.open > .dropdown-toggle.datepicker table tr td span.active.disabled.focus,
.open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover.focus {
  background-color: #0F172A;
}

/* pace.js: barra delgada de carga en la parte superior — acento decorativo, sin texto */
.pace .pace-progress {
  background: #F6A623;
}

.pace .pace-progress-inner {
  box-shadow: 0 0 10px #F6A623, 0 0 5px #F6A623;
}

/* ---------- Encabezados de modal/tabla: quedaron en gris plano (style.css
   .headerRegister/.header-primary) al hacer el rebrand navy+ámbar. Se
   corrige aquí en vez de tocar style.css, siguiendo el mismo patrón de
   este archivo (cascada por encima de main.css/style.css). Afecta a
   todos los modales del panel, no solo Planilla. ---------- */
.headerRegister,
.header-primary {
  background: #0F172A;
  color: #FFF;
}

/* .headerUpdate (style.css: #007bff) queda como estado "editando", pero en
   un tono de la misma familia navy en vez del azul Bootstrap suelto que
   desentonaba con el resto del rebrand. */
.headerUpdate {
  background: #334155;
  color: #FFF;
}

/* ---------- Modales: elevación real en vez del cuadro plano por defecto.
   Sin overflow:hidden en .modal-content: recortaría el dropdown de los
   selects con data-live-search (bootstrap-select) que viven dentro del
   modal-body. Las esquinas se redondean en header/footer, no por corte. ---------- */
.modal-content {
  border: none;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, .25);
}

.modal-header {
  padding: 1rem 1.5rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.modal-footer {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.modal-header .modal-title {
  font-weight: 700;
  letter-spacing: .2px;
}

.modal-header .close {
  color: #FFF;
  opacity: .85;
  text-shadow: none;
}

.modal-header .close:hover {
  opacity: 1;
}

/* ---------- Tablas dentro de modales: bordes suaves, aire y hover legible
   (antes: bordes grises duros de Bootstrap por defecto, sin feedback de fila) ---------- */
.modal-body .table-bordered,
.modal-body .table-bordered th,
.modal-body .table-bordered td {
  border-color: #E2E8F0;
}

.modal-body table.dataTable thead th {
  vertical-align: middle;
  padding-right: 26px; /* espacio para el ícono de orden, antes pegado al texto */
}

.modal-body table.dataTable tbody td {
  vertical-align: middle;
  padding: .65rem .75rem;
}

.modal-body .table-hover tbody tr:hover {
  background-color: #FFF7E8; /* ámbar muy claro, coherente con el acento de marca */
}

.modal-body table.dataTable tbody td.dataTables_empty {
  padding: 2rem 1rem;
  color: #64748B;
  font-style: normal;
}

/* ---------- Total tipo "caja registradora" (Planilla: #total_detalle).
   .img-polaroid no tiene ninguna definición en main.css/style.css — quedó
   como texto plano sin fondo. Se reconstruye como pantalla LCD: fondo casi
   negro, dígitos ámbar con resplandor, tipografía monoespaciada. ---------- */
#total_detalle.img-polaroid {
  background: #0B1220;
  border: 1px solid #1E293B;
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .65);
  padding: 10px 16px;
}

#total_detalle.img-polaroid p {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
}

#total_detalle.img-polaroid span {
  color: #F6A623;
  text-shadow: 0 0 6px rgba(246, 166, 35, .6);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
}

/* ---------- Carga por Póliza (Views/Viajes/carga_masiva.php) ---------- */

.cm-table td, .cm-table th {
  vertical-align: middle;
  padding: 4px 6px;
}

.cm-fila-guardada {
  background-color: #F0FDF4 !important;
}

.cm-fila-guardada td {
  background-color: #F0FDF4 !important;
}

.cm-fila-error .cm-contenedor {
  border-color: #DC2626;
  background-color: #FEF2F2;
}

/* ---------- Libreta de Viajes (Views/Viajes/libreta.php) ----------
   Vista de solo lectura pensada como reemplazo digital del cuaderno de
   papel: bloques color crema por póliza, encabezado navy, filas rayadas. */

.libreta-bloque {
  background: #FBF8F1;
  border: 1px solid #E5DFC9;
  border-left: 4px solid var(--primary);
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
}

.libreta-encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
}

.libreta-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .7;
}

.libreta-valor {
  display: block;
  font-weight: 600;
}

.libreta-tabla {
  margin-bottom: 0;
  background: transparent;
}

.libreta-tabla th {
  border-top: none;
  border-bottom: 2px solid #E5DFC9;
  color: var(--primary);
  font-size: 12px;
  text-transform: uppercase;
}

.libreta-tabla td, .libreta-tabla th {
  padding: 6px 16px;
}

.libreta-tabla tbody tr {
  border-bottom: 1px dashed #E5DFC9;
}

/* Estado por contenedor: 3 píldoras independientes (botado / pagado al
   piloto / facturado) en vez de pintar la fila completa — el color solo
   ya no alcanzaba para leer 2 estados combinados. */
.libreta-estado {
  white-space: nowrap;
}

.libreta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-right: 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #94A3B8;
  background: #F1F5F9;
}

.libreta-pill:last-child {
  margin-right: 0;
}

.libreta-pill-botado.is-active {
  color: #CA8A04;
  background: #FEF3C7;
}

.libreta-pill-pagado.is-active {
  color: #2563EB;
  background: #DBEAFE;
}

.libreta-pill-facturado.is-active {
  color: #16A34A;
  background: #DCFCE7;
}