/* dark-theme.css - TEMA OSCURO UNIFICADO PARA TODA LA APLICACIÓN */

/* ========================================================== */
/* ===                   ESTILOS GLOBALES                 === */
/* ========================================================== */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background-color: #121212;
  color: #e0e0e0;
}
#page-wrapper {
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.container {
  background: #1f1f1f;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #444;
}
.container.active {
  display: block;
}
.container:not(.active) {
  display: none;
}
h1,
h2,
h3,
h4,
p {
  color: #ffffff;
  margin-top: 0;
}
hr {
  border: 1px solid #444;
  margin: 25px 0;
}
.table-container {
  overflow-x: auto;
}

/* ========================================================== */
/* ===              ELEMENTOS DE FORMULARIO               === */
/* ========================================================== */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #555;
  background-color: #333;
  color: white;
  font-size: 16px;
  box-sizing: border-box;
}
input::placeholder {
  color: #888;
}
select {
  text-align-last: center;
}

button {
  background-color: #007bff;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  width: 100%;
}
button:hover {
  background-color: #0056b3;
}
button:disabled {
  background-color: #555;
  opacity: 0.5;
  cursor: not-allowed;
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  min-height: 20px;
  text-align: center;
}
.success-message {
  color: #28a745;
  font-size: 14px;
  min-height: 20px;
  text-align: center;
}
.info-message {
  color: #17a2b8;
  font-size: 14px;
  min-height: 20px;
  text-align: center;
}

/* ========================================================== */
/* ===             BARRA DE NAVEGACIÓN (NAVBAR)           === */
/* ========================================================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1f1f1f;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #444;
  margin-bottom: 25px;
  flex-shrink: 0;
}
.nav-section {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-item {
  color: #f0f0f0;
  text-decoration: none;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.2s;
  cursor: pointer;
}
.nav-item:hover {
  background-color: #333;
}
.nav-logout-btn {
  background-color: #dc3545;
  font-weight: bold;
}
.nav-logout-btn:hover {
  background-color: #c82333;
}

.nav-item.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  z-index: 10;
  border-radius: 5px;
  margin-top: 5px;
  overflow: hidden;
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #555;
}
.dropdown:hover .dropdown-content {
  display: block;
}

/* ========================================================== */
/* ===                     TABLAS GENERALES                 === */
/* ========================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: #e0e0e0;
}
th,
td {
  padding: 12px;
  border: 1px solid #333;
  text-align: left;
  white-space: nowrap;
}
th {
  background-color: #2a2a2a;
}
.action-buttons-cell {
  white-space: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}
tbody tr:nth-child(even) {
  background-color: #2a2a2a;
}

/* ========================================================== */
/* ===                 REPORTES Y CUADRE DE CAJA          === */
/* ========================================================== */
.report-header {
  text-align: center;
  margin-bottom: 30px;
}
.report-header h1 {
  font-size: 2.5em;
  margin-bottom: 5px;
}
.report-header p {
  font-size: 1.1em;
  color: #aaa;
}
.report-filters {
    display: flex;
    justify-content: center;
   align-items: center;
    
    /* Esto alinea los items en la parte inferior de la línea */
    gap: 15px;
    background-color: #2a2a2a;
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #444;
}
.report-filters > div {
    display: flex;
    flex-direction: column;
}
.report-filters label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #f0f0f0;
}
#generate-report-btn {
   width: 100%;
}
.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.summary-card {
  background: #1f1f1f;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid #444;
}
.summary-card h4 {
  margin: 0 0 10px 0;
  color: #aaa;
  font-size: 1em;
}
.summary-card p {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
}
.report-details h3 {
  text-align: center;
  margin-bottom: 20px;
}
.cash-box-container {
  max-width: 550px;
  margin: auto;
}
.cash-box-header {
  background-color: #009688;
  color: white;
  padding: 12px;
  text-align: center;
  font-size: 1.1em;
  border-radius: 8px;
}
.cash-box-body {
  padding: 20px;
}
.cash-box-section {
  margin-bottom: 15px;
  border-bottom: 1px dashed #555;
  padding-bottom: 15px;
}
.cash-box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 1em;
}
.cash-box-total {
  font-weight: bold;
  font-size: 1.1em;
}
.cash-box-final-balance {
  background-color: #2a2a2a;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 15px;
}
.cash-box-final-balance h3 {
  margin: 0 0 8px 0;
  color: #ccc;
  font-size: 1.1em;
  font-weight: normal;
}
.cash-box-final-balance strong {
  font-size: 1.8em;
}
#print-btn {
  margin-top: 15px;
}

/* ========================================================== */
/* ===           PÁGINA DE GESTIÓN (management.html)      === */
/* ========================================================== */
.management-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.management-column {
  background-color: #2a2a2a;
  border: 1px solid #444;
  padding: 20px;
  border-radius: 8px;
}
.management-column h3 {
  text-align: left;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.list-item {
  padding: 12px 15px;
  margin-bottom: 8px;
  border: 1px solid #444;
  transition: background-color 0.2s, border-color 0.2s;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.list-item:hover {
  background-color: #383838;
}
.list-item.selected {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
}
.list-item-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  cursor: pointer;
  gap: 4px;
}
.list-item-content small {
  font-size: 0.8em;
  color: #aaa;
}
.list-item.selected .list-item-content small {
  color: #d0e7ff;
}
.status.active {
  color: #28a745;
  font-weight: bold;
}
.status.inactive {
  color: #dc3545;
  font-weight: bold;
}
.action-button {
  background-color: #28a745;
  margin-top: 10px;
}
.delete-btn {
  background-color: #dc3545;
  width: auto;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
}
.withdraw-btn {
  background-color: #6c757d;
  width: auto;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
}
.withdraw-btn:hover,
.delete-btn:hover {
  opacity: 0.8;
}
#delete-all-races-btn {
  background-color: #c82333;
  margin-top: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #6c757d;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #28a745;
}
input:checked + .slider:before {
  transform: translateX(26px);
}

/* ========================================================== */
/* ===         ESTILOS ESPECÍFICOS PARA MÓVILES           === */
/* ========================================================== */
.navbar.mobile-nav {
  justify-content: space-between;

  
  
}
.mobile-nav .nav-item {
  font-size: 1em;
  padding: 10px;
}
.mobile-nav .nav-item.active {
  border-bottom: 2px solid #007bff;
  color: #fff;
  font-weight: bold;
}
.mobile-nav .nav-section-right {
  display: flex;
  align-items: center;
}

.saldo-display {
  text-align: center;
  background-color: #2a2a2a;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  flex-shrink: 0;
}
.saldo-display h3 {
  margin: 0 0 5px 0;
  color: #aaa;
  font-size: 1em;
  font-weight: normal;
}
.saldo-display p {
  font-size: 2.2em;
  color: #28a745;
  font-weight: bold;
  margin: 0;
}
.historial-apuestas {
  margin-top: 30px;
  background-color: #1f1f1f;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #444;
}

.status-pending {
  color: #ffc107;
  font-weight: bold;
}
.status-completed {
  color: #6c757d;
}
.player-type-móvil {
  background-color: #28a745;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
}
.player-type-terminal {
  background-color: #17a2b8;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
}

/* ========================================================== */
/* ===         MEDIA QUERIES PARA OPTIMIZACIÓN MÓVIL      === */
/* ========================================================== */
@media (max-width: 800px) {
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #page-wrapper {
    padding: 5px;
    height: auto;
  }
  .container {
    padding: 10px;
  }
  .navbar {
    margin: 0 -5px 10px -5px;
  }
  .padre {
    flex-direction: column;
  }
  .pagos,
  .generarApuesta {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
  }
  .generarApuesta {
    padding: 10px;
  }
  .miniNav {
    flex-direction: column;
    gap: 15px;
  }
  .miniNav > div {
    width: 100%;
  }
  .costos {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .costos-izquierda,
  .costos-derecha {
    width: 100%;
    justify-content: space-between;
  }
  .monto-input {
    width: 100px;
  }
}

/* ========================================================== */
/* ===         ESTILOS PARA IMPRESIÓN                     === */
/* ========================================================== */
@media print {
  body > * {
    display: none !important;
  }
  .print-area,
  .print-area * {
    display: block !important;
    visibility: visible !important;
  }
  .print-area {
    position: absolute;
    top: 10mm;
    left: 10mm;
    width: calc(100% - 20mm);
    font-family: "Courier New", Courier, monospace;
    color: #000;
    background: #fff;
  }
  .print-header {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
  }
  .print-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #000;
  }
  .print-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 5px;
  }
  .print-item span:first-child {
    text-align: left;
  }
  .print-item span:last-child {
    text-align: right;
    font-weight: bold;
  }
  .print-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    font-size: 14px;
  }
  .print-total-card {
    text-align: center;
    padding: 10px;
    border: 1px solid #000;
  }
  .print-total-card .total-label {
    margin: 0;
    font-weight: bold;
  }
  .print-total-card .total-amount {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0 0 0;
    color: #000 !important;
  }
  .print-section-title {
    text-align: center;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 10px;
  }
}

/* ========================================================== */
/* ===         ESTILOS PERSONALIZADOS PARA INPUTS DE SWAL   === */
/* ========================================================== */
.swal-input-dark {
  background-color: #333 !important;
  border: 1px solid #555 !important;
  color: white !important;
  display: block !important;
  width: 60% !important;
  margin: 1em auto 0 auto !important;
  padding: 12px !important;
  font-size: 1.2em !important;
  text-align: center;
}

/* ========================================================== */
/* ===        ¡NUEVO! ESTILOS MEJORADOS PARA MODALES        === */
/* ========================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; /* Cambiado de 'flex' a 'none' por defecto */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

/* Usaremos JS para añadir/quitar la clase 'active' para controlar la visibilidad */
.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: #2a2a2a;
  color: #e0e0e0;
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #555;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  max-height: 90vh; /* Altura máxima para evitar que se salga de la pantalla */
}

.modal-content h2 {
  font-size: 1.6em;
  font-weight: 300;
  margin: 0 0 15px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #444;
  text-align: left;
  flex-shrink: 0;
}

.modal-content h2 strong {
  color: #00aaff;
}

/* El formulario o el contenido principal del modal que tendrá scroll */
.modal-content form,
.modal-content > div:not(.modal-actions) {
  overflow-y: auto;
  padding-right: 15px;
  margin-right: -15px;
}

.config-section {
  background: #1f1f1f;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #444;
}

.config-section h3 {
  margin: 0 0 15px 0;
  font-size: 1.1em;
  color: #ccc;
  text-align: left;
}

.config-section label {
  display: block;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 8px;
  margin-top: 15px;
}
.config-section p {
  text-align: center;
  color: #aaa;
  font-size: 0.9em;
}

.modal-content input[type="number"] {
  background-color: #333;
  border: 1px solid #555;
  color: #e0e0e0;
  padding: 10px;
  font-size: 1em;
}

.modal-actions {
  display: flex;
  gap: 15px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #444;
  flex-shrink: 0;
}

.modal-cancel-btn {
  background-color: #6c757d;
}
.modal-cancel-btn:hover {
  background-color: #5a6268;
}

.switch-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #333;
}
.switch-container:last-child {
  border-bottom: none;
}
.switch-container label {
  margin: 0;
}
/* EN: dark-theme.css */
/* REEMPLAZA ÚNICAMENTE LA SECCIÓN DE MODALES CON ESTE CÓDIGO CORREGIDO */

/* ========================================================== */
/* ===     ¡NUEVO Y CORREGIDO! ESTILOS PARA MODALES         === */
/* ========================================================== */

/* El fondo oscuro semitransparente que cubre toda la pantalla */
body .modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  display: flex !important; /* Usamos flex para centrar */
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  padding: 20px !important;
  box-sizing: border-box !important;

  /* Control de visibilidad */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* Cuando el modal está activo (tiene la clase .active) */
body .modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

/* El contenedor del formulario (la caja principal) */
body #config-modal .modal-content {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
  padding: 25px !important;
  border-radius: 8px !important;
  border: 1px solid #555 !important;
  width: 100% !important;
  max-width: 500px !important; /* Un poco más ancho */
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5) !important;

  /* --- ¡LA SOLUCIÓN AL SCROLL! --- */
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important; /* Altura máxima para evitar que se salga de la pantalla */
}

body #config-modal h2 {
  font-size: 1.6em !important;
  font-weight: 300 !important;
  margin: 0 0 15px 0 !important;
  padding-bottom: 15px !important;
  border-bottom: 1px solid #444 !important;
  text-align: left !important;
  flex-shrink: 0 !important; /* Evita que el título se encoja */
}

body #config-modal h2 strong {
  color: #00aaff !important;
}

/* El formulario ahora es el elemento que tendrá el scroll si es necesario */
body #config-modal #config-form {
  overflow-y: auto !important; /* Muestra el scrollbar vertical SOLO si el contenido es muy alto */
  padding-right: 15px !important; /* Espacio para el scrollbar */
  margin-right: -15px !important; /* Compensa el padding */
}

body #config-modal .config-section {
  background: #1f1f1f !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-top: 20px !important;
  border: 1px solid #444 !important;
}

body #config-modal .config-section h3 {
  margin: 0 0 15px 0 !important;
  font-size: 1.1em !important;
  color: #ccc !important;
  text-align: left !important;
}

/* --- MEJORA DE LETRAS Y ESPACIADO --- */

body #config-modal .config-section label {
  display: block !important;
  font-size: 14px !important;
  color: #ccc !important;
  margin-bottom: 8px !important;
  margin-top: 15px !important;
}
body #config-modal .config-section p {
  text-align: center !important;
  color: #aaa !important;
  font-size: 0.9em !important;
}

body #config-modal input[type="number"] {
  background-color: #333 !important;
  border: 1px solid #555 !important;
  color: #e0e0e0 !important;
  padding: 10px !important;
  font-size: 1em !important;
}

/* Contenedor de los botones de acción */
body #config-modal .modal-actions {
  display: flex !important;
  gap: 15px !important;
  margin-top: 25px !important;
  padding-top: 20px !important;
  border-top: 1px solid #444 !important;
  flex-shrink: 0 !important;
}

/* Hacemos que el botón de cancelar sea gris */
body #config-modal .modal-cancel-btn {
  background-color: #6c757d !important;
}
body #config-modal .modal-cancel-btn:hover {
  background-color: #5a6268 !important;
}

/* Estilo para los interruptores (switches) */
body #config-modal .switch-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #333 !important;
}
body #config-modal .switch-container:last-child {
  border-bottom: none !important;
}
body #config-modal .switch-container label {
  margin: 0 !important;
}
/* EN: dark-theme.css (AÑADIR AL FINAL) */
/* ========================================================== */
/* ===      NUEVOS ESTILOS PARA EL MODAL DE RESULTADOS    === */
/* ========================================================== */

/* Contenido principal del modal */
#results-modal .modal-content {
  background-color: #2a2a2a;
  color: #e0e0e0;
  max-width: 550px;
}
#results-modal h2,
#results-modal h4 {
  color: #ffffff;
  text-align: left;
}
#results-modal .modal-header {
  border-bottom: 1px solid #444;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
#results-modal .modal-header h2 {
  margin: 0;
}
#results-modal .modal-header p {
  color: #aaa;
  margin: 5px 0 0 0;
}

/* Contenedor del Podio */
.podium-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

/* Estilo para cada "cajón" del podio (1ro, 2do, 3ro) */
.podium-place {
  display: grid;
  grid-template-columns: 100px 1fr;
  background-color: #333;
  border-radius: 8px;
  padding: 15px;
  align-items: center;
  border-left: 8px solid; /* Borde de color distintivo */
}

/* Colores del podio */
.place-first {
  border-color: #ffd700;
  background-color: #3a362a;
} /* Oro */
.place-second {
  border-color: #c0c0c0;
} /* Plata */
.place-third {
  border-color: #cd7f32;
} /* Bronce */

.podium-place .position {
  text-align: center;
}
.podium-place .position i {
  font-size: 1.5em;
}
.podium-place .position h3 {
  font-size: 2em;
  margin: 5px 0;
  color: #fff;
}

.podium-place .payouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.podium-place .payout-info {
  text-align: center;
  background-color: #2a2a2a;
  padding: 10px;
  border-radius: 5px;
}
.payout-info .payout-label {
  font-size: 0.8em;
  color: #aaa;
  display: block;
}
.payout-info .payout-value {
  font-size: 1.4em;
  font-weight: bold;
  color: #fff;
}
.place-first .payouts .payout-value {
  color: #ffd700;
} /* Resaltar pago del ganador */

/* Sección de Apuestas Exóticas */
.exotics-section h4 {
  border-top: 1px solid #444;
  padding-top: 20px;
}

.exotic-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 12px 15px;
  border-radius: 5px;
  margin-bottom: 8px;
}
.exotic-result .exotic-name {
  font-weight: bold;
}
.exotic-result .exotic-horses {
  color: #ccc;
}
.exotic-result .exotic-payout {
  font-size: 1.2em;
  font-weight: bold;
  color: #28a745;
}
.exotic-result > div {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el nombre, la base y los caballos */
  flex-wrap: wrap;
}
.exotic-base {
  font-size: 0.8em;
  color: #aaa;
  background-color: #444;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
/* ========================================================== */
/* ===      OCULTAR ÁREAS DE IMPRESIÓN EN PANTALLA        === */
/* ========================================================== */

@media screen {
  .print-area {
    display: none;
  }
}

/* En dark-theme.css, al final del archivo */

/* ========================================================== */
/* ===      ESTILOS PARA EL MODAL DE DETALLES DE APUESTA    === */
/* ========================================================== */

#bet-details-modal .modal-content {
    max-width: 450px; /* Ancho ideal para móviles */
}

#bet-details-modal .modal-header {
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

#bet-details-modal .modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 300;
}

#bet-details-modal .modal-header p {
    margin: 5px 0 0 0;
    color: #aaa;
}

#bet-details-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1.1em;
}

.modal-detail-item span {
    color: #ccc;
}

.modal-detail-item strong {
    color: #fff;
}

.modal-selections-box {
    background-color: #1f1f1f;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px;
}

.modal-selections-box h4 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #ccc;
}

#modal-selections {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1em;
    line-height: 1.6;
    color: #e0e0e0;
}

/* ========================================================== */
/* ===         ESTILO PARA ENLACE DE TICKET EN TABLA      === */
/* ========================================================== */

/* Estilo base para el enlace del ticket */
.ticket-link {
    color: #e0e0e0; /* Color de texto principal (blanco en tema oscuro) */
    text-decoration: none; /* Elimina la línea de abajo */
    font-weight: bold; /* Opcional: hacerlo negrita para que destaque */
    transition: color 0.2s; /* Transición suave para el efecto hover */
}

/* Efecto al pasar el ratón por encima para indicar que es clickeable */
.ticket-link:hover {
    color: #00aaff; /* Cambia a un color azul claro, típico de enlaces */
    text-decoration: underline; /* Opcional: Muestra la línea solo al pasar el ratón */
}

/* En dark-theme.css, al final del archivo */

/* ========================================================== */
/* ===         ESTILOS PARA TOTAL EN CUADRE DE CAJA       === */
/* ========================================================== */

/* Contenedor que centra el cuadro principal */
.cash-box-main-total-container {
    margin: 20px 0;
    padding: 0;
}

/* El cuadro principal de Total */
.cash-box-main-total-container .cash-box-total {
    max-width: 350px; /* Ancho máximo para que no se estire demasiado */
    margin: 0 auto; /* Centrar horizontalmente */
    background-color: #2a2a2a;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.cash-box-main-total-container h3 {
    margin: 0 0 10px 0;
    color: #ccc;
    font-size: 1.2em;
    font-weight: normal;
}

.cash-box-main-total-container strong {
    font-size: 2.5em; /* Un poco más grande para darle más importancia */
}

/* ========================================================== */
/* ===        RESPONSIVIDAD GLOBAL (MÓVILES/TABLETS)      === */
/* ========================================================== */

@media (max-width: 900px) {

  /* --- 1. Ajustes Generales de Espaciado --- */
  body {
      padding: 10px;
  }
  
  .container {
      padding: 15px; /* Menos padding en pantallas pequeñas */
      width: 100% !important;
      box-sizing: border-box;
  }

  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.3em; }

  /* --- 2. Barra de Navegación (Navbar) --- */
  /* PROTECCIÓN: :not(.mobile-nav) asegura que NO afecte a tu 'movil.html' */
  
  .navbar:not(.mobile-nav) {
      flex-direction: column; /* Apilar elementos verticalmente solo para Admin/Vendedor */
      align-items: stretch;
      gap: 15px;
      padding: 15px;
      height: auto; /* Permitir que crezca según el contenido */
  }

  .navbar:not(.mobile-nav) .nav-section {
      flex-direction: column;
      width: 100%;
      gap: 10px;
  }

  .navbar:not(.mobile-nav) .nav-item {
      width: 100%;
      text-align: center;
      padding: 12px;
      box-sizing: border-box;
      background-color: #2a2a2a; /* Fondo botón */
      margin: 0;
      border-radius: 5px;
  }

  /* Ajuste para Dropdowns en Admin/Vendedor */
  .navbar:not(.mobile-nav) .dropdown-content {
      position: static; /* Ya no flotan, se integran en el bloque */
      width: 100%;
      box-shadow: none;
      border: 1px solid #444;
      margin-top: 0;
  }
  
  /* --- 3. Gestión de Carreras (Management) --- */
  .management-container {
      /* Pasa de 3 columnas a 1 sola para que se lea bien */
      grid-template-columns: 1fr !important; 
  }

  /* --- 4. Filtros de Reportes y Formularios Generales --- */
  .report-filters, 
  form {
      display: flex;
      flex-direction: column; /* Inputs uno debajo del otro */
      align-items: stretch !important; /* Ancho completo */
      gap: 15px;
  }

  .report-filters > div,
  .filter-item {
      width: 100%;
  }

  /* --- 5. Tarjetas de Resumen ($$$) --- */
  .report-summary {
      grid-template-columns: 1fr 1fr; /* 2 columnas en móviles medianos */
  }

  /* --- 6. Tablas con Scroll Horizontal --- */
  /* Imprescindible para que las tablas de reportes no rompan el sitio */
  .table-container {
      width: 100%;
      overflow-x: auto; /* Permite deslizar el dedo si la tabla es ancha */
      -webkit-overflow-scrolling: touch; 
      display: block;
      border: 1px solid #444;
      border-radius: 5px;
  }

  table {
      min-width: 600px; /* Fuerza ancho mínimo para legibilidad interna */
  }

  /* --- 7. Modales --- */
  .modal-content {
      width: 95% !important;
      max-width: none !important;
      max-height: 85vh;
      padding: 15px !important;
      overflow-y: auto;
  }
  
  /* --- 8. Ajustes Específicos (Ticket Browser, Videos) --- */
  .ticket-browser-filters,
  .ticket-details-grid,
  #add-video-form {
      grid-template-columns: 1fr !important; /* Todo en 1 columna */
  }
}

@media (max-width: 480px) {
  /* Ajustes extra para celulares pequeños */
  .report-summary {
      grid-template-columns: 1fr; /* Tarjetas de saldo en 1 sola columna */
  }
  
  /* Acomodar mejor los items del cuadre de caja */
  .cash-box-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
      border-bottom: 1px dotted #333;
      padding-bottom: 5px;
  }
  
  .cash-box-item span:last-child {
      align-self: flex-end;
      font-size: 1.2em;
      font-weight: bold;
  }
}

/* =============================================================== */
/* ===   ESTILOS PARA EL VISOR DE REVISTAS (CARDS / GALERÍA)   === */
/* =============================================================== */

/* Contenedor de la cuadrícula (Grid) */
#magazines-list-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Tarjetas adaptables */
    gap: 15px;
    padding: 10px 5px;
    width: 100%;
    box-sizing: border-box;
}

/* Diseño de la Tarjeta Individual */
.magazine-card {
    display: flex;
    flex-direction: column;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 8px;
    text-decoration: none; /* Quitar subrayado */
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    height: 200px;
}

.magazine-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    border-color: #00aaff; /* Borde azul al pasar el mouse */
}

/* Etiqueta de "NUEVO" */
.mag-badge-new {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #ffc107; /* Amarillo */
    color: #000;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Parte Superior (Icono) */
.mag-cover-art {
    flex-grow: 1;
    background: linear-gradient(135deg, #3a3a3a 0%, #222 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e0e0e0;
}

.mag-cover-art i {
    font-size: 3rem;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5));
}

/* Parte Inferior (Texto) */
.mag-content {
    padding: 10px;
    background-color: #252525;
    border-top: 1px solid #333;
}

.mag-title {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Puntos suspensivos si es muy largo */
}

.mag-date {
    font-size: 0.75rem;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Botón de descarga simulado */
.mag-action {
    background-color: #007bff;
    color: white;
    text-align: center;
    font-size: 0.8rem;
    padding: 6px;
    font-weight: bold;
    text-transform: uppercase;
}

.magazine-card:hover .mag-action {
    background-color: #0056b3;
}
/* ========================================================== */
/* ===      ESTILOS MEJORADOS PARA INPUT DE ARCHIVO       === */
/* ========================================================== */

/* El contenedor del input completo */
input[type="file"] {
    background-color: #2a2a2a; /* Fondo oscuro */
    color: #e0e0e0;            /* Color del texto del nombre del archivo */
    border: 1px dashed #555;   /* Borde punteado estilo "drop zone" */
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    font-size: 14px;
}

/* Efecto al pasar el mouse por encima de la caja */
input[type="file"]:hover {
    background-color: #333;
    border-color: #007bff; /* Borde azul al hacer hover */
}

/* El botón interno "Seleccionar archivo" */
input[type="file"]::file-selector-button {
    background-color: #007bff; /* Azul corporativo */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    margin-right: 15px; /* Espacio entre el botón y el texto */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Efecto al pasar el mouse por encima del botón */
input[type="file"]::file-selector-button:hover {
    background-color: #0056b3; /* Azul más oscuro */
}

/* ========================================================== */
/* ===      CORRECCIÓN SCROLL MODAL REVISTAS              === */
/* ========================================================== */

/* 1. Evita que el encabezado (título y descripción) tenga scroll */
.modal-content .modal-header {
    overflow: visible !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0; /* Evita que el encabezado se aplaste */
}

/* 2. Asegura que el contenedor principal del modal no tenga scroll doble */
#magazines-modal .modal-content {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Asegura que SOLO la lista de revistas tenga el scroll */
#magazines-list-container {
    flex-grow: 1;        /* Ocupa todo el espacio restante */
    overflow-y: auto;    /* Activa el scroll vertical solo aquí */
    min-height: 0;       /* Necesario para que el scroll funcione bien en Flexbox */
    margin-top: 15px;
}

/* --- 1. ELIMINAR SPINNERS (Flechas de números) --- */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- 2. ESTILOS DE FILAS (WPS Y EXÓTICAS) --- */

.wps-row {
  display: grid;
  /* 
     EXPLICACIÓN DE LAS COLUMNAS:
     1. (40px) Texto (WIN/PLC): Espacio justo para las letras.
     2. (60px) Caballo (#): ANGOSTO, solo cabe 1 o 2 dígitos.
     3. (1fr)  Monto ($): ELÁSTICO, toma todo el espacio sobrante (se agranda).
     4. (35px) Botón (X): Espacio justo para el ícono.
  */
  grid-template-columns: 45px 60px 1fr 35px !important;
  
  gap: 8px; /* Espacio entre casillas */
  align-items: center;
  margin-bottom: 8px;
  padding: 5px;
  background-color: #2a2a2a;
  border-radius: 6px;
  border: 1px solid #444;
}

.wps-row input {
  width: 80%; 
  min-width: 0; /* Importante para que funcione el grid responsive */
  font-size: 16px;
}

/* Contenedor de la fila Exóticas */
.exotic-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

/* --- 3. ESTILOS DE INPUTS EN FILAS --- */
.wps-row input, 
.exotic-input-row input {
    margin-bottom: 0 !important; /* Quitar margen por defecto de los inputs */
    padding: 8px !important;
    font-weight: bold;
    text-align: center;
    height: 38px; /* Altura uniforme */
}

/* Estilos específicos para inputs de Exóticas para que ocupen espacio proporcional */
.ex-horses { flex: 2; text-transform: uppercase; } /* Combinación (más ancho) */
.ex-value { flex: 2; }  /* Pago */
.ex-base { flex: 1; }   /* Base (más angosto) */

/* --- 4. BOTONES DE CONTROL (+ y x) --- */

/* Botón de eliminar (X) */
.remove-row-btn {
    background-color: transparent !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    font-size: 18px !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 28px !important;
    border-radius: 4px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.remove-row-btn:hover {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Botones de Agregar (+ Ganador, etc) */
.btn-group-add {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    border-top: 1px dashed #444;
    padding-top: 10px;
}

.add-mini-btn {
    background-color: #444 !important;
    border: 1px solid #555 !important;
    color: #ccc !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    height: auto !important;
}
.add-mini-btn:hover {
    background-color: #555 !important;
    color: #fff !important;
    border-color: #777 !important;
}

.inputs-container {
  padding: 10px;
  background-color: #2b2b2b;
  border-radius: 5px;
  margin-top: 10px;
  border-top: 1px solid #444;
  transition: opacity 0.3s ease-in-out; /* Suaviza la aparición */
}

/* ESTILOS PARA LA TABLA DE RANGOS TIPO FORMULARIO CLÁSICO */
.range-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre elementos */
    margin-bottom: 10px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo sutil por fila */
    border-radius: 4px;
}

.range-row .lbl-text {
    font-size: 0.9em;
    color: #ccc;
    font-weight: bold;
    white-space: nowrap; /* Evita que el texto salte de línea */
}

.range-row input[type="number"] {
    margin-bottom: 0; /* Quita el margen inferior predeterminado */
    padding: 8px 5px;
    width: 80px;      /* Ancho fijo o flexible */
    flex-grow: 1;     /* Ocupa el espacio disponible */
}

/* El símbolo "+" */
.range-row .lbl-plus {
    font-size: 1.2em;
    color: #ffc107;
    font-weight: bold;
}

/* El Checkbox Fijo */
.range-row .check-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
    color: #fff;
    cursor: pointer;
    margin-left: 5px;
}

/* Botón pequeño para eliminar fila (X roja) */
.del-row-btn {
    background-color: transparent !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    width: 25px !important;
    height: 25px !important;
    padding: 0 !important;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.del-row-btn:hover {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Botón pequeño para añadir fila (+ Verde) */
.add-range-btn {
    background-color: #28a745 !important;
    width: auto !important;
    font-size: 0.8em !important;
    padding: 5px 15px !important;
    margin-top: 5px;
    display: inline-block;
}

/* Notificaciones en Navbar */
.nav-notification-container {
    position: relative;
    cursor: pointer;
    padding: 5px 10px;
}

.nav-notification-icon {
    font-size: 1.2em;
    color: #f0f0f0;
}

.nav-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #dc3545;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 50%;
    border: 2px solid #1f1f1f;
    display: none; /* Oculto si es 0 */
}

/* Modal/Dropdown de mensajes */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.notif-item {
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #555; /* Leído */
    transition: background 0.2s;
}

.notif-item.unread {
    border-left: 4px solid #00aaff; /* Sin leer */
    background-color: #3a3a3a;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.notif-title {
    font-weight: bold;
    color: #fff;
}

.notif-time {
    font-size: 0.8em;
    color: #aaa;
}

.notif-body {
    font-size: 0.95em;
    color: #ccc;
    line-height: 1.4;
    white-space: pre-wrap; /* Mantiene saltos de línea */
}

.swal2-select {
  background-color: #333 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
  border-radius: 5px !important;
  height: 45px !important;
  font-size: 1rem !important;
  margin: 10px auto !important;
  width: 90% !important;
}

.swal2-input {
  background-color: #333 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
  box-shadow: none !important;
  margin: 10px auto !important;
  width: 90% !important;
}

/* Evitar el scroll innecesario y mejorar el espaciado de las etiquetas */
.swal-label-custom {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #aaa;
  text-align: left;
  padding-left: 5%;
}

.swal2-html-container {
  overflow: hidden !important; /* Quita el scroll de la ventana */
}

.badge-revision { background-color: #9b59b6; } /* Púrpura */
.status-badge.badge-revision {
    background-color: #8e44ad;
    box-shadow: 0 0 5px rgba(142, 68, 173, 0.5);
}
/* management.html o dark-theme.css */

.management-column .list-item-favorite {
    /* Fondo dorado/amarillo sutil */
    background-color: #4a4130 !important; 
    border: 1px solid #ffc107;
}

.management-column .list-item-favorite .list-item-content span {
    color: #ffc107;
}

/* Contenedor del desplegable */
.dropdown-mobile {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El menú oculto */
.dropdown-content-mobile {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Justo debajo de la barra */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2a2a2a;
    min-width: 150px;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    z-index: 1000;
    margin-top: 10px;
}

/* Las opciones dentro del menú */
.dropdown-content-mobile a {
    color: white;
    padding: 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #333;
    font-size: 0.9em;
}

.dropdown-content-mobile a:last-child {
    border-bottom: none;
}

/* Mostrar cuando tiene la clase active */
.dropdown-content-mobile.show {
    display: block;
}

/* Triángulo decorativo hacia arriba */
.dropdown-content-mobile::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #2a2a2a transparent;
}
/* EN dark-theme.css O style.css (El que contenga tus estilos) */

/* === MEJORA GLOBAL: EVITAR SCROLL DOBLE Y CENTRAR VERTICALMENTE === */


/* === MODALES (RE-FORZAMOS ALINEACIÓN DE LOS CAMPOS) === */
.modal-content label {
    display: block;
    font-weight: bold;
    color: #ccc;
    margin-bottom: 5px;
    margin-top: 15px; /* Más espacio para separar */
}
.modal-content input, 
.modal-content textarea {
    padding: 10px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: white;
    font-size: 1em;
    width: 100%; /* Forzamos ancho completo en el modal */
    box-sizing: border-box;
}

/* === MODIFICACIONES DE COLOR Y FONDO EN BOTONES DEL MODAL === */
#send-global-modal .modal-actions button[type="submit"] {
    background-color: #1410f2 !important; /* Azul más fuerte para envío */
    transition: background-color 0.2s;
}
#send-global-modal .modal-actions button[type="submit"]:hover {
    background-color: #0d0ab0 !important;
}

/* === ESTILOS PARA LA GESTIÓN DE NOTIFICACIONES (LA TABLA) === */
#global-messages-section .table-container {
    max-height: 60vh; /* Alto máximo de la tabla */
    overflow-y: auto; /* Scroll vertical para la tabla, NO para el body */
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #2a2a2a; /* Color de fondo sutil para la tabla */
}
#global-messages-section table {
    width: 100%;
    /* Muy importante: elimina el espacio entre celdas */
    border-collapse: collapse; 
    border: none;
}
#global-messages-section table th, 
#global-messages-section table td {
    padding: 15px 12px; /* Más padding para que sea legible */
    border: none; /* Eliminar bordes de celdas por defecto */
    border-bottom: 1px solid #3a3a3a; /* Solo borde inferior delgado */
    font-size: 0.9em;
}
#global-messages-section table th {
    background-color: #1f1f1f; /* Header ligeramente más oscuro que las celdas */
    position: sticky;
    top: 0;
    z-index: 2; /* Fija la cabecera al hacer scroll */
    text-align: left;
    color: #ccc;
    font-size: 1em;
    text-transform: uppercase;
}

/* Alternancia de color de fondo en filas */
#global-messages-table-body tr:nth-child(even) {
    background-color: #333333; /* Fila par un poco más oscura */
}
#global-messages-table-body tr:hover {
    background-color: #404040; /* Resalta al pasar el mouse */
}

--- START OF BLOCK dark-theme.css Advanced Tab Styles ---

/* ========================================================== */
/* ===      ESTILOS PARA PESTAÑAS DENTRO DEL MODAL (ADV)  === */
/* ========================================================== */

/* Estilos de las Pestañas (los botones que las activan) */
.tabs-advanced {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #444; /* Línea base */
    flex-wrap: wrap;
    flex-shrink: 0;
}

.tab-adv-btn {
    background: none;
    border: none;
    padding: 10px 15px;
    color: #aaa;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    width: auto;
    border-radius: 0;
    margin: 0;
    transition: color 0.2s, border-bottom-color 0.2s;
    flex-grow: 1; /* Para que ocupen todo el ancho si se necesita */
}

.tab-adv-btn:hover {
    color: #ccc;
    background: none;
}

/* Estado Activo de la Pestaña */
.tab-adv-btn.active {
    border-bottom: 3px solid #007bff; /* Resalta el tab activo */
    color: #ffffff;
    font-weight: bold;
}


/* --- Bloques específicos dentro del Tab: Límites por Tipo --- */
.specific-limits-card {
    margin-bottom: 25px;
}

.specific-limits-row {
    display: grid;
    /* Divide la fila en 4 columnas, una por cada campo */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; /* Espacio entre los 4 inputs */
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #444;
}
.specific-limits-row > div {
    /* Fuerza que cada input-label ocupe toda la columna */
    display: flex;
    flex-direction: column;
}

.specific-limits-card h4 {
    margin-top: 0;
    margin-bottom: 15px;
}

.specific-limits-row label {
    font-size: 0.85em; /* Reducimos el tamaño de la letra de la etiqueta */
    margin-bottom: 5px;
    color: #bbb;
}

/* En móvil, los 4 campos específicos bajan a 2 columnas para que quepan */
@media (max-width: 600px) {
     .specific-limits-row {
         grid-template-columns: 1fr 1fr;
         gap: 10px;
     }
}