/* === RESET GENERAL === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #111;
    color: #eee;
  }
  
  /* === LOGIN === */
  .login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
  }
  
  .login-container {
    background-color: #1e1e1e;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    text-align: center;
    width: 100%;
    max-width: 420px;
  }
  
  .login-container h1 {
    margin-bottom: 25px;
    color: #fff;
    font-size: 32px;
    letter-spacing: 2px;
  }
  
  .login-container input {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background-color: #2b2b2b;
    color: #fff;
    font-size: 16px;
  }
  
  .login-container button {
    width: 100%;
    padding: 12px;
    background-color: #00ff99;
    border: none;
    border-radius: 5px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
  }
  
  .error-msg {
    color: #ff4d4d;
    margin-top: 10px;
  }
  
  /* === PANEL PRINCIPAL === */
  .panel-body {
    display: flex;
    height: 100vh;
  }
  
  /* === SIDEBAR === */
  .sidebar {
    width: 250px;
    background-color: #1c1c1c;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .sidebar h2 {
    color: #00ff99;
    margin-bottom: 30px;
    text-align: center;
  }
  
  .sidebar button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  
  .sidebar button:hover {
    background-color: #00ff99;
    color: #000;
  }
  
  /* === CONTENIDO === */
  .contenido {
    flex: 1;
    padding: 30px;
    background-color: #121212;
    overflow-y: auto;
  }
  
  .contenido h1 {
    margin-bottom: 20px;
    color: #00ff99;
  }
  
  /* === SECCIONES === */
  .seccion {
    background-color: #1f1f1f;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  
  .seccion h3, .seccion h4 {
    margin-bottom: 15px;
    color: #00ff99;
  }
  
  /* === INPUTS === */
  input {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 5px;
    border: none;
    background-color: #333;
    color: #fff;
  }
  
  .jugada-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .jugada-inputs input {
    flex: 1;
    text-align: center;
  }
  
  /* === BOTONES === */
  .btn-jugar, .btn-enviar {
    background-color: #00ff99;
    color: #000;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
  }
  
  .btn-jugar:hover, .btn-enviar:hover {
    background-color: #00cc77;
  }
  
  .acciones-ticket {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  
  .acciones-ticket button {
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
  }
  
  .btn-repetir {
    background-color: #666;
    color: white;
  }
  
  .btn-vaciar {
    background-color: #e74c3c;
    color: white;
  }
  
  .btn-enviar {
    background-color: #2ecc71;
    color: white;
  }
  
  /* === TABLA DE JUGADAS === */
  .tabla-jugadas table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    color: #fff;
  }
  
  .tabla-jugadas th, .tabla-jugadas td {
    border: 1px solid #444;
    padding: 10px;
    text-align: center;
  }
  
  /* === GRILLA DE SORTEOS === */
  .grid-sorteos {
    overflow-x: auto;
  }
  
  .tabla-sorteos {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .tabla-sorteos th, .tabla-sorteos td {
    border: 1px solid #444;
    padding: 8px;
  }
  
  .tabla-sorteos button {
    background-color: #333;
    color: #00ff99;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .casilla-sorteo {
    background-color: #222;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    border: 1px solid #333;
  }
  
  .casilla-sorteo:hover {
    background-color: #00cc66;
    color: black;
  }
  
  .casilla-sorteo.activo {
    background-color: #00ff99;
    color: black;
    font-weight: bold;
    border: 2px solid #0f0;
  }
  
  .no-disponible {
    background-color: #444 !important;
    color: #666;
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  /* === BARRA SUPERIOR === */
  .barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #111;
    border-bottom: 1px solid #333;
    color: #00ff99;
    font-size: 14px;
  }
  
  .info-tiempo span {
    margin-right: 20px;
    font-weight: bold;
  }
  
  .atajos-info {
    background-color: #1e1e1e;
    padding: 8px 16px;
    border-radius: 6px;
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #ccc;
    margin-top: 10px;
  }
  
  /* === TICKET PREVIEW === */
  .ticket-preview {
    background-color: #fff;
    color: #000;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
    font-family: monospace;
    border: 2px solid #000;
  }
  
  .ticket-preview h2 {
    margin-bottom: 10px;
    text-align: center;
  }
  
  .ticket-preview p, .ticket-preview h3 {
    text-align: center;
    margin: 8px 0;
  }
  
  .loterias-usadas {
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
  }
  
  .ticket-preview table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    color: #000;
  }
  
  .ticket-preview th, .ticket-preview td {
    border: 1px solid #444;
    padding: 10px;
    text-align: center;
  }
  
  .ticket-preview hr {
    border: 1px dashed #000;
    margin: 10px 0;
  }
  
  #nuevoTicket {
    display: block;
    margin: 20px auto 0;
    background-color: #00ff99;
    color: #000;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
  }.ticket-preview {
    background-color: #fff;
    color: #000;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    font-family: monospace;
    border: 2px solid #000;
    font-size: 15px;
  }
  
  .ticket-preview hr {
    border: 1px dashed #000;
    margin: 10px 0;
  }
  
  .ticket-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
  }
  
  .ticket-preview th,
  .ticket-preview td {
    border: none;
    padding: 4px 0;
    text-align: center;
  }/* TITULO PRINCIPAL */
h1 {
  color: white !important;
  text-transform: uppercase;
  font-size: 26px !important;
}

/* FECHA, HORA, PASADOR */
.info-tiempo span {
  color: white !important;
  font-size: 18px !important;
  font-weight: bold;
}

/* ETIQUETAS JUGADAS Y REDOBLONA */
.seccion h3 {
  color: white !important;
  text-transform: uppercase;
  font-size: 18px !important;
}.casilla-sorteo {
  background-color: #2c2c2c;
  border: 1px solid #666;
  cursor: pointer;
  transition: background 0.2s ease;
}

.casilla-sorteo.activo {
  background-color: #228B22; /* verde oscuro */
}

.no-disponible {
  background: repeating-linear-gradient(
    45deg,
    #222,
    #222 5px,
    #111 5px,
    #111 10px
  );
  opacity: 0.5;
  cursor: not-allowed;
}/* Horarios principales */
.btn-fila[data-hora="10:15"],
.btn-fila[data-hora="12:00"],
.btn-fila[data-hora="15:00"],
.btn-fila[data-hora="18:00"],
.btn-fila[data-hora="21:00"] {
  background-color: #00ff6a;
  color: black;
  font-weight: bold;
}

/* Horarios secundarios */
.btn-fila[data-hora="11:30"],
.btn-fila[data-hora="14:30"],
.btn-fila[data-hora="17:30"],
.btn-fila[data-hora="19:30"] {
  background-color: #007a4d;
  color: white;
}#liquidaciones {
  font-family: Arial, sans-serif;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
}

.barra-superior {
  display: flex;
  justify-content: space-between;
}

.opciones {
  margin-top: 20px;
  text-align: center;
}

.opciones button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  margin: 5px;
  border: none;
  cursor: pointer;
}

.opciones button:hover {
  background-color: #45a049;
}

hr {
  border: 1px solid #444;
  margin-top: 20px;
}

#tablaLiquidacion th, #tablaLiquidacion td {
  padding: 10px;
  text-align: center;
  border: 1px solid #444;
}

.resumen-turnos div,
.totales div {
  margin: 10px 0;
}

.resumen-turnos strong,
.totales strong {
  display: inline-block;
  width: 120px;
}.ticket {
  font-family: monospace;
  width: 500px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
}

.encabezado {
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
}

.pasador {
  font-size: 30px;
  font-weight: bold;
}

.fecha, .banca {
  font-size: 18px;
}

.linea-negra {
  border: 1px solid black;
  margin: 15px 0;
}

.cuerpo {
  font-size: 16px;
  margin-top: 10px;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

.turnos, .totales, .arrastre {
  margin-top: 10px;
  font-size: 18px;
}

.turnos div, .totales div, .arrastre div {
  margin-bottom: 8px;
}.liquidacion-ticket {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.encabezado {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.encabezado .pasador {
  font-size: 20px;
  font-weight: bold;
}

.encabezado .fecha, .encabezado .banca {
  font-size: 16px;
}

.linea-negra {
  border-top: 1px solid black;
  margin: 20px 0;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

.turnos {
  margin-bottom: 20px;
}

.turnos div {
  font-size: 14px;
  margin-bottom: 5px;
}

.totales {
  margin-bottom: 20px;
}

.totales div {
  font-size: 16px;
  font-weight: bold;
}

.arrastre {
  font-size: 14px;
}.liquidacion-ticket {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Agregar sombra para mayor contraste */
}

.encabezado {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background-color: #222; /* Fondo más oscuro para mayor contraste */
  color: white; /* Texto en blanco */
  padding: 10px;
  border-radius: 5px;
}

.encabezado .pasador {
  font-size: 20px;
  font-weight: bold;
}

.encabezado .fecha, .encabezado .banca {
  font-size: 16px;
}

.linea-negra {
  border-top: 2px solid black;
  margin: 20px 0;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
  background-color: #f9f9f9; /* Fondo más claro para las celdas */
}

.tabla th {
  background-color: #333; /* Fondo oscuro para encabezados de la tabla */
  color: white;
}

.turnos {
  margin-bottom: 20px;
}

.turnos div {
  font-size: 14px;
  margin-bottom: 5px;
  color: #444; /* Color de texto más oscuro */
}

.totales {
  margin-bottom: 20px;
}

.totales div {
  font-size: 16px;
  font-weight: bold;
  color: #333; /* Más contraste para los totales */
}

.arrastre {
  font-size: 14px;
  color: #444;
}

.arrastre div {
  margin-top: 10px;
}/* Contenedor principal del ticket */
.liquidacion-contenido {
  padding: 20px;
  background-color: #1f1f1f;
  color: white;
}

/* Estilo del ticket */
.liquidacion-ticket {
  background: white;
  color: black;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  width: 70%;
  margin: 0 auto;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra del ticket */
}

/* Encabezado */
.encabezado {
  display: flex;
  justify-content: space-between;
  background-color: #333; /* Fondo oscuro */
  color: white; /* Texto en blanco */
  padding: 10px;
  border-radius: 5px;
}

.encabezado .pasador {
  font-size: 20px;
  font-weight: bold;
}

.encabezado .fecha, .encabezado .banca {
  font-size: 16px;
}

/* Línea Negra */
.linea-negra {
  border-top: 2px solid black;
  margin: 20px 0;
}

/* Tabla de los resultados */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
  background-color: #f9f9f9; /* Fondo más claro para las celdas */
}

.tabla th {
  background-color: #333; /* Fondo oscuro para encabezados de la tabla */
  color: white;
}

/* Turnos y totales */
.turnos, .totales {
  margin-bottom: 20px;
}

.turnos div, .totales div {
  font-size: 16px;
  font-weight: bold;
  color: #333; /* Más contraste para los totales */
}

/* Estilo para el arrastre */
.arrastre {
  font-size: 14px;
  color: #444;
}

.arrastre div {
  margin-top: 10px;
}

/* Botones fuera del ticket */
.barra-superior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.barra-superior button {
  font-size: 18px;
  padding: 8px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
}

.barra-superior button:hover {
  background-color: #218838;
}/* Estilos generales para el ticket de liquidación */
.liquidacion-ticket {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%; /* Ticket más angosto */
  margin: 20px auto;
  font-size: 16px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.encabezado {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  text-transform: uppercase;
}

.encabezado .pasador,
.encabezado .fecha,
.encabezado .banca {
  font-size: 18px;
}

.linea-negra {
  border-top: 2px solid black;
  margin: 20px 0;
}

/* Estilos para la tabla */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

.turnos div,
.totales div,
.arrastre div {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* Botones de Imprimir, Guardar, Compartir */
.botones {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.boton {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  margin: 5px;
  cursor: pointer;
}

.boton:hover {
  background-color: #45a049;
}

/* Separación para la sección de fecha y buscar */
.fecha-buscar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fecha-buscar input {
  padding: 10px;
  font-size: 14px;
}

.fecha-buscar button {
  font-size: 18px;
  padding: 8px 20px;
  margin: 6px;
}/* Ajustar el tamaño del ticket */
.liquidacion-ticket {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 60%; /* Hacer el ticket más angosto */
  margin: 20px auto;
  font-size: 16px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  text-transform: uppercase; /* Todo en mayúsculas */
}

/* Negrita para el arrastre */
.arrastre div {
  font-weight: bold; /* Poner en negrita el arrastre */
}

/* Encabezado del ticket */
.encabezado {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 18px;
}

.encabezado .pasador,
.encabezado .fecha,
.encabezado .banca {
  font-size: 18px;
}

/* Líneas negras entre secciones */
.linea-negra {
  border-top: 2px solid black;
  margin: 20px 0;
}

/* Ajustar la tabla */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

/* Asegurarse de que las líneas sean visibles y centradas */
.turnos div,
.totales div,
.arrastre div {
  font-size: 14px;
  margin-bottom: 5px;
  text-align: left; /* Alinear el texto de los turnos, totales y arrastre */
}

/* Botones de Imprimir, Guardar, Compartir */
.botones {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.boton {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  margin: 5px;
  cursor: pointer;
}

.boton:hover {
  background-color: #45a049;
}

/* Separación para la sección de fecha y buscar */
.fecha-buscar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fecha-buscar input {
  padding: 10px;
  font-size: 14px;
}

.fecha-buscar button {
  font-size: 18px;
  padding: 8px 20px;
  margin: 6px;
}/* Ajustar el tamaño del ticket a la mitad */
.liquidacion-ticket {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 50%; /* Hacer el ticket más angosto al 50% */
  margin: 20px auto;
  font-size: 16px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  text-transform: uppercase; /* Todo en mayúsculas */
}

/* Negrita para el arrastre */
.arrastre div {
  font-weight: bold; /* Poner en negrita el arrastre */
}

/* Encabezado del ticket */
.encabezado {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 18px;
}

.encabezado .pasador,
.encabezado .fecha,
.encabezado .banca {
  font-size: 18px;
}

/* Líneas negras entre secciones */
.linea-negra {
  border-top: 2px solid black;
  margin: 20px 0;
}

/* Ajustar la tabla */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

/* Asegurarse de que las líneas sean visibles y centradas */
.turnos div,
.totales div,
.arrastre div {
  font-size: 14px;
  margin-bottom: 5px;
  text-align: left; /* Alinear el texto de los turnos, totales y arrastre */
}

/* Botones de Imprimir, Guardar, Compartir */
.botones {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.boton {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  margin: 5px;
  cursor: pointer;
}

.boton:hover {
  background-color: #45a049;
}

/* Separación para la sección de fecha y buscar */
.fecha-buscar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fecha-buscar input {
  padding: 10px;
  font-size: 14px;
}

.fecha-buscar button {
  font-size: 18px;
  padding: 8px 20px;
  margin: 6px;
}/* Hacer el ticket más angosto a la mitad de lo que está ahora */
.liquidacion-ticket {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 25%; /* Reducido a la mitad de lo que estaba antes */
  margin: 20px auto;
  font-size: 16px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  text-transform: uppercase; /* Todo en mayúsculas */
}

/* Negrita para el arrastre */
.arrastre div {
  font-weight: bold; /* Poner en negrita el arrastre */
}

/* Ajuste de la tabla */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

/* Asegurarse de que las líneas sean visibles y centradas */
.turnos div,
.totales div,
.arrastre div {
  font-size: 14px;
  margin-bottom: 5px;
  text-align: left; /* Alinear el texto de los turnos, totales y arrastre */
}

/* Separación para la sección de fecha y buscar */
.fecha-buscar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fecha-buscar input {
  padding: 10px;
  font-size: 14px;
}

.fecha-buscar button {
  font-size: 18px;
  padding: 8px 20px;
  margin: 6px;
}/* Alineación de los importes a la derecha */
.tabla td {
  text-align: right;
}/* Estilo para el contenedor de la liquidación */
.liquidacion-ticket {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 70%; /* Puedes ajustar esto según el tamaño que necesites */
  margin: 20px auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Encabezado de la liquidación */
.encabezado {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}

.encabezado .pasador,
.encabezado .fecha,
.encabezado .banca {
  font-size: 18px;
}

/* Línea negra para separar secciones */
.linea-negra {
  border-top: 2px solid black;
  margin: 20px 0;
}

/* Tabla de los resultados */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

.tabla th {
  background-color: #333;
  color: white;
}

/* Estilo de los totales y arrastre */
.turnos div,
.totales div,
.arrastre div {
  font-size: 14px;
  margin-bottom: 5px;
  text-align: right; /* Alineación a la derecha para los montos */
}

/* Estilo de los botones */
.boton {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  margin: 5px;
  cursor: pointer;
}

.boton:hover {
  background-color: #45a049;
}

/* Asegura que las secciones de fecha y búsqueda se mantengan alineadas */
.fecha-buscar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fecha-buscar input {
  padding: 10px;
  font-size: 14px;
}

.fecha-buscar button {
  font-size: 18px;
  padding: 8px 20px;
  margin: 6px;
}/* Estilo para la liquidación */
.liquidacion-ticket {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 60%; /* Ajustado a la mitad del tamaño */
  margin: 20px auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Encabezado del ticket */
.encabezado {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}

.encabezado .pasador,
.encabezado .banca {
  font-size: 18px;
}

/* Línea negra entre secciones */
.linea-negra {
  border-top: 2px solid black;
  margin: 20px 0;
}

/* Ajustar la tabla */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tabla th, .tabla td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

/* Ajuste de la alineación de los importes a la derecha */
.importe {
  text-align: right;
  display: inline-block;
  width: 120px; /* Controlando el espacio de los importes */
}

/* Estilo de los totales y arrastre */
.turnos div,
.totales div,
.arrastre div {
  font-size: 14px;
  margin-bottom: 5px;
  text-align: left; /* Todo a la izquierda, menos los importes */
}

.totales div,
.arrastre div {
  font-weight: bold;
}

/* Botones de Imprimir, Guardar, Compartir */
.boton {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  margin: 5px;
  cursor: pointer;
}

.boton:hover {
  background-color: #45a049;
}

/* Separación para la sección de fecha y buscar */
.fecha-buscar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fecha-buscar input {
  padding: 10px;
  font-size: 14px;
}

.fecha-buscar button {
  font-size: 18px;
  padding: 8px 20px;
  margin: 6px;
}@media print {
  body * {
    visibility: hidden;
  }
  .ticket-preview, .ticket-preview * {
    visibility: visible;
  }
  .ticket-preview {
    position: absolute;
    left: 0;
    top: 0;
  }
}.casilla-sorteo.bloqueado {
  background: repeating-linear-gradient(
    45deg,
    #111,
    #111 5px,
    #222 5px,
    #222 10px
  );
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.cuadro-abreviaciones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background-color: #2c2c2c;
  color: #ddd;
  padding: 12px;
  border-radius: 6px;
  margin: 8px 0 20px;
  font-size: 14px;
}
.cuadro-abreviaciones div {
  padding: 2px 4px;
}
.cuadro-abreviaciones strong {
  color: #0f0;
}
#tablaAciertos, #tablaAciertos th, #tablaAciertos td {
  border: 1px solid #444;
  border-collapse: collapse;
  padding: 6px 10px; /* ⬅️ esto agrega espacio interno */
}
/* ===== Escala fluida para cualquier pantalla ===== */
:root{
  --ui-scale: 1;
  --content-max: 1200px;        /* ancho cómodo desktop */
  --fs-base: clamp(14px, 1vw + 12px, 18px);
}
html,body{ font-size: var(--fs-base); }

@media (min-width:1366px){ :root{ --ui-scale:.95 } }
@media (min-width:1536px){ :root{ --ui-scale:.90 } }
@media (min-width:1920px){ :root{ --ui-scale:.85 } }
@media (min-width:2400px){ :root{ --ui-scale:.80 } }

/* Se aplica a tu contenedor principal (ver PASO 2) */
#content, .content{
  transform: scale(var(--ui-scale));
  transform-origin: top left;
  width: calc(100% / var(--ui-scale));
  min-height: calc(100vh / var(--ui-scale));
  box-sizing: border-box;
  padding: 16px;
  margin: 0 auto;
  max-width: calc(var(--content-max) / var(--ui-scale));
}

/* Tablas: no rompen en pantallas chicas */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; }
/* Cabecera pegajosa SOLO para tablas de la app (no para tickets) */
.app-table thead th,
.tabla thead th,
.admin-table thead th{
  position: sticky;
  top: 0;
  background: #161616;
  z-index: 1;
}
td,th{ padding:8px 10px; white-space:nowrap; }
@media (max-width:900px){ table{ min-width:720px } }


/* ===== Sidebar-aware: no limites el ancho cuando hay sidebar ===== */
:root { --sidebar-w: 220px; }     /* si tu sidebar mide distinto, ajustalo */

.has-sidebar {
  display: flex;                  /* body en fila: sidebar + content */
}

.has-sidebar .sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
}

/* Anula el max-width para que no “corte” el lienzo */
.has-sidebar #content,
.has-sidebar .content {
  max-width: none !important;
  margin: 0;                      /* sin centrado, ocupa todo el ancho libre */
}

/* (opcional) asegura que el content ocupe lo que queda */
.has-sidebar #content,
.has-sidebar .content {
  width: calc(100% / var(--ui-scale));
}

/* Evitar clipping horizontal en escritorio */
@media (min-width: 901px) {
  html, body { overflow-x: visible; }
}
/* ===== Ticket / Liquidación: mantener look claro, sin heredar estilos oscuros ===== */
.ticket-preview,
.liq-preview{
  background: #fff;      /* fondo blanco del papel */
  color: #000;           /* texto negro */
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
}

/* Bordes y textos nítidos tipo “comprobante” */
.ticket-preview table,
.ticket-preview th,
.ticket-preview td,
.liq-preview table,
.liq-preview th,
.liq-preview td{
  border-color: #000 !important;
  color: #000 !important;
}

/* La cabecera del ticket NO se oscurece ni se vuelve sticky */
.ticket-preview thead th,
.liq-preview thead th{
  background: #fff !important;
  color: #000 !important;
  position: static !important;
}

/* Asegurar que nada raro del escalado le pegue al papel */
.ticket-preview, .ticket-preview *{
  transform: none !important;
  box-shadow: none !important;
}
/* ===== CARGA DE JUGADAS – responsive sin achicar con zoom ===== */

/* contenedor de toda la vista de carga (admin y vendedor) */
.jugadas-panel, 
#carga-jugadas,
.carga-jugadas {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* grilla de sorteos: permitir scroll horizontal si hace falta */
.grid-sorteos,
#gridSorteos,
.matriz-sorteos,
.seleccion-sorteos,
.tabla-sorteos-admin {
  display: block;
  overflow-x: auto;                 /* ✅ en pantallas angostas no se corta */
  -webkit-overflow-scrolling: touch;
}

/* celdas de sorteos más cómodas y fluidas */
.casilla-sorteo {
  min-width: 36px;
  min-height: 28px;
  padding: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* inputs de "Número / Posición / Importe" como grid fluido */
.jugada-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;  /* num / pos / importe / botón */
  gap: 8px;
  align-items: center;
}
.jugada-inputs input,
.jugada-inputs select {
  width: 100%;
  min-width: 0;
}

/* el botón de agregar no se deforma */
.jugada-inputs .btn,
.jugada-inputs button {
  white-space: nowrap;
}


/* ===== Look de liquidación “ticket” compacto ===== */
.liq-preview,
.liquidacion-ticket{
  --liq-font: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  --liq-fs: 12px;           /* tamaño base */
  --liq-leading: 1.25;      /* interlínea compacta */
  --liq-ink: #000;          /* tinta negra */
  --liq-border: #000;
  font-family: var(--liq-font);
  color: var(--liq-ink);
  background:#fff;
  padding: 16px 18px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

.liq-preview h1,
.liq-preview h2,
.liq-preview h3,
.liquidacion-ticket h1,
.liquidacion-ticket h2,
.liquidacion-ticket h3{
  font-size: 18px;
  margin: 0 0 6px;
  letter-spacing: .5px;
}

.liq-preview .encabezado,
.liquidacion-ticket .encabezado{
  display:flex; justify-content:space-between; align-items:flex-end;
  font-weight:700;
  letter-spacing:.4px;
  margin-bottom: 10px;
}

.liq-preview .linea-negra,
.liquidacion-ticket .linea-negra{
  border-top: 2px solid var(--liq-ink);
  margin: 8px 0 6px;
}

.liq-preview table,
.liquidacion-ticket table{
  width:100%;
  border-collapse:collapse;
  font-size: var(--liq-fs);
  line-height: var(--liq-leading);
  color: var(--liq-ink);
}

/* Línea solo en la cabecera */
.liq-preview thead th,
.liquidacion-ticket thead th {
  font-weight:800;
  text-align:left;
  padding: 6px 6px 4px;
  border-bottom: 2px solid var(--liq-border); /* ✅ solo acá */
}

/* Filas sin bordes */
.liq-preview td,
.liquidacion-ticket td {
  border-bottom: none !important; /* ❌ sin líneas en aciertos */
  padding: 3px 6px;
  white-space: nowrap;
}

.liq-preview td:nth-child(1),
.liquidacion-ticket td:nth-child(1){ /* LOT */
  width: 52px;
}

.liq-preview td:nth-child(2),
.liquidacion-ticket td:nth-child(2){ /* NUM */
  width: 58px;
  text-align:center;
  letter-spacing: .6px;
}

.liq-preview td:nth-child(3),
.liquidacion-ticket td:nth-child(3){ /* UBI */
  width: 32px;
  text-align:center;
}

.liq-preview td:nth-child(4),
.liquidacion-ticket td:nth-child(4){ /* APO */
  width: 64px;
  text-align:right;
}

.liq-preview td:nth-child(5),
.liquidacion-ticket td:nth-child(5){ /* GANÓ */
  width: 90px;
  text-align:right;
  font-weight: 700;
}

/* bloques de totales compactos, negro fuerte */
.liq-preview .turnos div,
.liq-preview .totales div,
.liq-preview .arrastre div,
.liquidacion-ticket .turnos div,
.liquidacion-ticket .totales div,
.liquidacion-ticket .arrastre div{
  font-size: var(--liq-fs);
  line-height: var(--liq-leading);
  color: var(--liq-ink);
  margin: 2px 0;
}

.liq-preview .totales div strong,
.liquidacion-ticket .totales div strong{
  font-weight:800;
}

/* ===== Tabla de Resultados (Admin) ===== */
@media (max-width: 900px) {
  #tablaResultadosAdmin, 
  .tabla-resultados-admin {
    display: block;
    width: 100%;
    overflow-x: auto;        /* ✅ scroll horizontal si no entra */
    -webkit-overflow-scrolling: touch;
    font-size: 13px;         /* ✅ texto un poco más chico */
  }

  #tablaResultadosAdmin table,
  .tabla-resultados-admin table {
    width: 100%;
    min-width: 600px;        /* ✅ mínimo razonable para que no se deforme */
    border-collapse: collapse;
  }

  #tablaResultadosAdmin th,
  #tablaResultadosAdmin td,
  .tabla-resultados-admin th,
  .tabla-resultados-admin td {
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;     /* ✅ evita que corte palabras */
  }
}

/* Pequeño seguro: en mobile no escales el lienzo global */
@media (max-width: 900px){
  :root{ --ui-scale: 1 !important; }
  #content, .content { padding: 12px; }
}

/* === MOBILE SIDEBAR (vendedor) === */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 80%;
    max-width: 300px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  .mobi-tabs-btn {
    position: fixed;
    top: 12px; left: 12px;
    width: 38px; height: 38px;
    background: #333;
    border: 0; border-radius: 8px;
    z-index: 1100;
  }
  .mobi-tabs-btn span { display:block; width:22px; height:2px; background:#fff; position:relative; margin:0 auto; }
  .mobi-tabs-btn span::before,
  .mobi-tabs-btn span::after { content:''; position:absolute; left:0; width:22px; height:2px; background:#fff; top:-6px; }
  .mobi-tabs-btn span::after { top:6px; }

  .sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 900; display: none;
  }
  body.sidebar-open .sidebar-overlay { display: block; }
}
.switch-oficina {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  color: #e0e0e0;
}

.switch-oficina input {
  display: none;
}

.switch-oficina .slider {
  width: 46px;
  height: 26px;
  background: #333;
  border-radius: 20px;
  position: relative;
  transition: background 0.25s ease;
}

.switch-oficina .slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #bbb;
  border-radius: 50%;
  transition: transform 0.25s ease, background 0.25s ease;
}

.switch-oficina input:checked + .slider {
  background: linear-gradient(135deg, #00ff88, #00cc66);
}

.switch-oficina input:checked + .slider::before {
  transform: translateX(20px);
  background: #fff;
}

.switch-oficina .label-text {
  font-weight: 600;
  letter-spacing: 0.3px;
}
.resumen-tickets {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.resumen-tickets .tickets-enviadas {
  color: #ffffff;
  font-size: 22px;
}
.resumen-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 12px;
}

/* ── Modo claro (filter invert) ── */
html.modo-claro {
  filter: invert(1) hue-rotate(180deg);
}
html.modo-claro .ticket-preview,
html.modo-claro .liquidacion-ticket,
html.modo-claro .ticket-paper,
html.modo-claro #liqTicketBody,
html.modo-claro #cierreLiqTicket > div:first-child,
html.modo-claro img,
html.modo-claro video,
html.modo-claro canvas {
  filter: invert(1) hue-rotate(180deg);
}

/* Spinner de botones */
.spn {
  width: 14px;
  height: 14px;
  border: 2px solid #555;
  border-top: 2px solid #2ecc71;
  border-radius: 50%;
  animation: _spn 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes _spn {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}