/* ==========================================
   VARIABLES Y RESET BASE
   ========================================== */
:root {
  --odoo-primary: #0D70AD;
  --odoo-primary-dark: #1F3C8D;
  --odoo-secondary: #0D70AD;
  --odoo-light: #f5f3f7;
  --navbar-height: 56px;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f3f4f6;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-size: 0.92rem;
}

/* ==========================================
   NAVBAR Y ESTILOS ESPECÍFICOS
   ========================================== */

.navbar-odoo {
  background: #0D70AD;
  color: #fff;
}

.navbar-odoo .navbar-brand {
  color: #fff;
  font-weight: 600;
}

/* ==========================================
   LAYOUT PRINCIPAL - FIX NAVBAR
   ========================================== */

/* Navbar fijo en la parte superior */
.navbar.fixed-top {
  height: var(--navbar-height);
  z-index: 1030;
}

/* Contenedor principal con padding-top para compensar navbar fijo */
.odoo-main {
  padding-top: calc(var(--navbar-height) + 0.5rem) !important;
  padding-bottom: 2rem !important;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
  min-height: calc(100vh - var(--navbar-height));
}

/* Footer no debe interferir con el contenido */
.odoo-footer {
  position: relative;
  margin-top: 2rem;
}

.odoo-footer.fixed-bottom {
  position: relative !important;
}

/* ==========================================
   CONTENEDORES Y CARDS
   ========================================== */

/* Hacer que los containers usen todo el ancho disponible */
.container-fluid {
  max-width: 100%;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* Espaciado específico para vistas de boletos */
#idboleto-editar.container-fluid,
.container-fluid.py-4 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Cards más compactas en vistas de boletos */
body:has(#idboleto-editar) .card,
body:has(#cont-boleto-table) .card {
  margin-bottom: 0.5rem;
}

/* Asegurar que el contenido dentro de container-fluid no tenga padding extra */
.container-fluid>.card {
  margin-left: 0;
  margin-right: 0;
}

/* Para el bloque-content cuando se carga dinámicamente */
#bloque-content>.container-fluid {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Cards optimizadas para ocupar más espacio */
.card {
  margin-bottom: 0.75rem;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 0;
}

.card-odoo {
  border: 0;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
}

.card-header {
  padding: 0.5rem 0.75rem;
  border-radius: 1rem 1rem 0 0 !important;
  background: #0D70AD;
  color: #fff;
  border: 0;
}

.card-odoo .card-header {
  background: #0D70AD;
  color: #fff;
  border-radius: 1rem 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 0;
}

.card-body {
  padding: 0.75rem;
}

/* Reducir espaciado innecesario */
.py-4 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.px-4 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.px-3 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Eliminar padding extra en divs anidados */
.container-fluid .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================
   COLORES ODOO
   ========================================== */

.bg-odoo {
  background-color: #0D70AD;
  color: #fff;
}

.bg-odoo-light {
  background-color: var(--odoo-light);
  color: #333;
}

thead.bg-odoo th {
  background-color: #0D70AD;
  color: #fff;
}

.text-odoo {
  color: #0D70AD;
}

.btn-odoo {
  background-color: #0D70AD;
  color: #fff;
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.btn-odoo:hover {
  background-color: #1F3C8D;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   TABLAS RESPONSIVAS OPTIMIZADAS
   ========================================== */

/* Tablas que aprovechan altura disponible */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive-fixed {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 0.6rem;
}

.table-container {
  max-height: calc(100vh - 300px);
  min-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 0.6rem;
}

/* Headers sticky en tablas */
.sticky-header thead th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  color: #333;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos de tabla mejorados */
.table {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.table th {
  background-color: #0D70AD;
  color: white;
  font-weight: 500;
  text-align: left;
  padding: 0.75rem;
  font-size: 0.875rem;
}

.table td {
  text-align: left;
  vertical-align: middle;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.table-sm th,
.table-sm td {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
}

.table-hover tbody tr:hover {
  background-color: rgba(13, 112, 173, 0.05);
}

/* ==========================================
   FORMULARIOS OPTIMIZADOS
   ========================================== */

/* Reducir espaciado en rows de formularios */
.row.g-2 {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.5rem;
}

.row.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0.75rem;
}

/* Form controls más compactos */
.form-control-sm,
.form-select-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.form-label {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Labels más pequeños */
label.small {
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

/* ==========================================
   SECTION TITLES
   ========================================== */

.section-title {
  font-weight: 600;
  color: #0D70AD;
  border-bottom: 2px solid #0D70AD;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
}

/* ==========================================
   MODALES
   ========================================== */

.modal-content {
  border-radius: 0.75rem;
  border: none;
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.modal-body {
  padding: 1.5rem;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.modal-footer {
  padding: 1rem 1.5rem;
}

/* Z-index para modales */
.modal {
  z-index: 1055;
}

.modal-backdrop {
  z-index: 1050;
}

/* ==========================================
   SELECT2 OPTIMIZADO
   ========================================== */

.select2-container--default .select2-selection--single {
  min-height: calc(1.5em + 0.5rem + 2px) !important;
  height: calc(1.5em + 0.5rem + 2px) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #ced4da !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 0.5rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.5rem) !important;
  top: 1px !important;
  right: 1px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.select2-dropdown {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.select2-container--default .select2-results__option {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.86rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #0D70AD !important;
  color: #fff !important;
}

/* Select2 en modales */
.modal .select2-container {
  z-index: 1070 !important;
}

.modal .select2-dropdown {
  z-index: 1080 !important;
}

.select2-container {
  width: 100% !important;
}

/* ==========================================
   BADGES Y PILLS
   ========================================== */

.badge {
  font-size: 0.75rem;
  padding: 0.35em 0.65em;
}

.utilidad-badge {
  font-size: 0.75rem;
  font-weight: 500;
}

.summary-pill {
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}

/* ==========================================
   ALERTS
   ========================================== */

.alert-premium {
  border-left: 4px solid #c0392b;
  background: #fdecea;
  color: #a30505;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
}

.alert-success-premium {
  border-left: 4px solid #1e8449;
  background: #e8f8f5;
  color: #0a5c36;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
}

/* ==========================================
   LOG BOX
   ========================================== */

.log-box {
  max-height: 160px;
  overflow-y: auto;
  font-size: 0.78rem;
  background: #111827;
  color: #e5e7eb;
  border-radius: 0.6rem;
  padding: 0.5rem;
}

.log-box small {
  color: #9ca3af;
}

/* ==========================================
   UTILIDADES
   ========================================== */

.small {
  font-size: 0.78rem;
}

/* Ocultar elementos */
tbody tr.hidden {
  display: none !important;
}

/* Iconos */
.icon-check {
  color: #28a745;
  font-weight: bold;
}

.icon-x {
  color: #dc3545;
  font-weight: bold;
}

/* Oculta los spinners (flechas) para la mayoría de los navegadores */
/* Chrome, Edge, Safari */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.no-spinner[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Filas interactivas */
.pasajero-row:hover {
  background-color: #e7f3ff !important;
  cursor: pointer;
}

.pasajero-row.table-primary {
  background-color: #cfe2ff !important;
}

.servicio-row {
  transition: all 0.2s ease;
}

/* ==========================================
   PANEL LATERAL OPTIMIZADO (FILTROS)
   ========================================== */

.col-md-2 .card {
  position: sticky;
  top: calc(var(--navbar-height) + 1rem);
  max-height: calc(100vh - var(--navbar-height) - 2rem);
  overflow-y: auto;
}

/* ==========================================
   RESPONSIVE - MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .odoo-main {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    padding-top: calc(var(--navbar-height) + 0.25rem) !important;
  }

  .container-fluid {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .card-body {
    padding: 0.5rem;
  }

  .card-header {
    padding: 0.4rem 0.5rem;
  }

  .table-responsive-fixed {
    max-height: 50vh;
  }

  .col-md-2 .card {
    position: relative;
    top: auto;
    max-height: none;
  }
}

/* Optimización para pantallas grandes */
@media (min-width: 1400px) {
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .odoo-main {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ==========================================
   ESTILOS PARA CONTENIDO DINÁMICO (HTMX)
   ========================================== */

/* Cuando boleto_editar se carga dentro de #bloque-content */
#bloque-content #idboleto-editar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Asegurar márgenes consistentes en carga dinámica */
#bloque-content .container-fluid {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

#bloque-content>* {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================
   SCROLLBAR PERSONALIZADO
   ========================================== */

.table-responsive-fixed::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.log-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-responsive-fixed::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.log-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-responsive-fixed::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.log-box::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.table-responsive-fixed::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover,
.log-box::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ==========================================
   AVATAR EN NAVBAR
   ========================================== */

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--odoo-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

/* ==========================================
   ANIMACIONES SUTILES
   ========================================== */

.btn {
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.card {
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ==========================================
   ESTADOS DE CARGA
   ========================================== */

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request.htmx-indicator {
  display: inline;
}

/* ==========================================
   TOOLTIPS
   ========================================== */

.tooltip {
  font-size: 0.8rem;
}

/* ==========================================
   MEJORAS DE ACCESIBILIDAD
   ========================================== */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--odoo-primary);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

input[readonly] {
  background-color: #e9ecef !important;
  cursor: not-allowed;
}

/* Estilos para submenú multinivel */
/* Estilos para submenú multinivel */
.dropdown-menu .dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-submenu>a::after {
  content: "\f285";
  font-family: "bootstrap-icons";
  flex-shrink: 0;
  margin-left: auto;
}

/* Efecto hover mejorado */
.dropdown-submenu>.dropdown-item:hover {
  background-color: #e9ecef;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .dropdown-submenu>.dropdown-menu {
    position: static;
    left: 0;
    margin-left: 1rem;
    border-left: 2px solid #dee2e6;
  }
}