/* 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 {
 
  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;
  max-width: -webkit-fill-available;
  max-width: -moz-available;
  max-width: stretch;
}
.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: 12px 24px;
  border-radius: 8px;
  border: 1px solid #444;
  margin-bottom: 25px;
  flex-shrink: 0;
}
.nav-section {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* Botón hamburguesa de .navbar:not(.mobile-nav) (Admin/Vendedor): oculto por
   defecto, solo visible en el media query de abajo. Mismo patrón ya usado
   en operaciones.css/principal.css para páginas que no cargan esas hojas. */
.navbar:not(.mobile-nav) .nav-hamburger {
  display: none;
}
.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;
}
/* Apertura por clic/toque (navbar_toggle.js), para pantallas sin :hover
   confiable -- no reemplaza el hover de escritorio, se suma a él. */
.dropdown-content.show {
  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;
}
/* El input[type=date] trae su propio margin-bottom de la regla genérica de
   formularios, que aquí sobra porque .report-filters ya separa los campos
   con gap -- ese margen extra es lo que lo hace desbordarse del recuadro,
   sobre todo en móviles donde el selector nativo de fecha es más alto. */
.report-filters input[type="date"] {
  margin-bottom: 0;
}
#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;
  flex-wrap: wrap;
  row-gap: 10px;
}
.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;
}

/* ========================================================== */
/* ===  MENÚ HAMBURGUESA (navbar.mobile-nav, Jugador Web) === */
/* ========================================================== */
/* Botón ☰: oculto por defecto, solo visible cuando el media query de abajo
   activa el modo colapsado. Mismo esquema visual (3 barras) que el botón
   ya usado en las vistas de Vendedor (operaciones.css/principal.css), pero
   con selectores propios -- ese CSS vive bajo body:not(.mobile-view) a
   propósito para no tocar estas páginas, así que aquí se define aparte. */
.navbar.mobile-nav .nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  order: -1;
}
.navbar.mobile-nav .nav-hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .navbar.mobile-nav {
    flex-wrap: nowrap;
  }
  .navbar.mobile-nav .nav-hamburger {
    display: flex;
  }
  /* Todo lo navegable (enlaces + usuario/salir) se oculta y pasa a panel
     vertical solo cuando el navbar tiene la clase .nav-open (navbar_toggle.js) */
  .navbar.mobile-nav > .nav-item,
  .navbar.mobile-nav .nav-section-right {
    display: none;
  }
  .navbar.mobile-nav.nav-open {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar.mobile-nav.nav-open > .nav-item,
  .navbar.mobile-nav.nav-open .nav-section-right {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .navbar.mobile-nav.nav-open .nav-section-right {
    flex-direction: column;
    align-items: stretch;
  }
  /* Todo el contenido del panel alineado a la izquierda, sin centrar nada. */
  .navbar.mobile-nav.nav-open .nav-item,
  .navbar.mobile-nav.nav-open .nav-section-right .nav-item {
    text-align: left;
    justify-content: flex-start;
  }
  /* El dropdown "Consultas" (movil.html) queda dentro del panel como una
     sublista indentada en el mismo flujo vertical, no como un popup flotante
     (que es como se ve fuera de este modo). Su apertura/cierre (clase .show)
     la sigue controlando movil_app.js, sin relación con .nav-open. */
  .navbar.mobile-nav.nav-open .dropdown-mobile {
    display: block;
    justify-content: flex-start;
  }
  .navbar.mobile-nav.nav-open .dropdown-content-mobile {
    position: static;
    transform: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    margin: 0;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .navbar.mobile-nav.nav-open .dropdown-content-mobile a {
    justify-content: flex-start;
    padding: 12px 10px;
  }
  .navbar.mobile-nav.nav-open .dropdown-content-mobile::after {
    display: none;
  }
}

.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 {
    /* column-reverse (no solo column) para que coincida con la regla
       equivalente de operaciones.css (max-width:1000px): pone el panel de
       apuestas (.generarApuesta) arriba y el de pagos/anular/imprimir
       (.pagos) abajo. Sin esto, esta regla pisaba la de operaciones.css en
       páginas que cargan ambas hojas (ej. nacionales.html) y el orden
       quedaba invertido respecto a vendedor.html. */
    flex-direction: column-reverse;
  }
  .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 {
  position: relative;
  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-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
}
.modal-close-btn:hover {
  color: #e0e0e0;
}

.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: 0;
      padding: 15px;
      height: auto; /* Permitir que crezca según el contenido */
  }

  /* Botón hamburguesa, mismo esquema visual (3 barras) que el ya usado en
     operaciones.css/principal.css. Vive aquí en dark-theme.css para que lo
     hereden también las páginas que no cargan esas dos hojas (transacciones,
     clientes, resultados, caja, reportes). */
  .navbar:not(.mobile-nav) .nav-hamburger {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-self: flex-end;
      width: 28px;
      height: 20px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
  }
  .navbar:not(.mobile-nav) .nav-hamburger span {
      display: block;
      width: 100%;
      height: 3px;
      background-color: #fff;
      border-radius: 2px;
  }

  /* Esta navbar puede traer DOS .nav-section hermanos (enlaces + saldo/tema/
     usuario/salir). Se ocultan ambos por defecto y se muestran juntos, sin
     gap entre ellos, para que se vean como un único panel continuo en vez
     de dos cajas separadas al abrir el menú -- solo la primera sección se
     separa del botón hamburguesa con margin-top. */
  .navbar:not(.mobile-nav) .nav-section {
      display: none;
      flex-direction: column;
      align-items: stretch; /* Sin esto, hereda align-items:center de la regla base y centra cada nav-item como bloque */
      width: 100%;
      gap: 10px;
  }
  .navbar:not(.mobile-nav).nav-open .nav-section {
      display: flex;
  }
  .navbar:not(.mobile-nav).nav-open .nav-section:first-of-type {
      margin-top: 15px;
  }

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

  /* Ajuste para Dropdowns en Admin/Vendedor -- integrados como sublista en
     el flujo del panel (no popup/cajón con fondo propio), mismo criterio ya
     validado en el menú del Jugador Web. Su apertura al toque la maneja
     navbar_toggle.js via clase .show, sin afectar el :hover de escritorio. */
  .navbar:not(.mobile-nav) .dropdown-content {
      position: static;
      width: 100%;
      box-shadow: none;
      border: none;
      background-color: transparent;
      border-radius: 0;
      min-width: 0;
      margin: 0;
      padding-left: 20px;
      box-sizing: border-box;
  }
  .navbar:not(.mobile-nav) .dropdown-content a {
      justify-content: flex-start;
  }
  
  /* --- 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;
     }
}

/* ========================================================== */
/* ===   RESULTADOS: TARJETAS DE HIPÓDROMO / CARRERA        === */
/* ========================================================== */
#results-container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.racetrack-group {
  background: #1f1f1f;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease;
  /* 4 columnas por fila (25% menos el gap); si no caben 4, bajan a la fila siguiente en vez de generar scroll */
  flex: 1 1 calc(25% - 15px);
  min-width: 260px;
}
.racetrack-group:hover {
  border-color: #00aaff;
}

.racetrack-group h3 {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #333;
  font-size: 1.05em;
  font-weight: 600;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.racetrack-group h3 i {
  color: #00aaff;
  font-size: 0.9em;
}

.race-result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.race-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.race-result-item:hover {
  background: #00aaff;
  border-color: #00aaff;
  transform: translateX(2px);
}
.race-result-item:hover .race-view i {
  color: #fff;
}

.race-result-item .race-number {
  font-weight: 700;
  font-size: 0.95em;
  color: #e0e0e0;
}

.race-result-item .race-view i {
  color: #777;
  font-size: 0.85em;
  transition: color 0.15s ease;
}