/* ==========================================================================

   Fortuna Bello - Sistema de Banca Nativo (Fidelidad 100% con la VM)

   Paleta oficial de marca.py:

   NAVY = #0a2652, NAVY_END = #071c3b, BLUE = #0d5bb6, ICE = #edf4fc, LINE = #b6cfee

   ========================================================================== */



:root {

  --navy: #0a2652;

  --navy-end: #071c3b;

  --blue: #0d5bb6;

  --blue-hover: #0a4d9e;

  --ink: #12294b;

  --muted: #4d6483;

  --ice: #edf4fc;

  --line: #b6cfee;

  --white: #ffffff;

  --pale-blue: #dcecff;

  --on-dark: #f4f8ff;

  --sec-on-dark: #bdd3f0;

  --green: #22c55e;

  --red: #ef4444;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  user-select: none;

  -webkit-user-select: none;

}



input,

select,

button,

textarea {

  font-variant-numeric: tabular-nums;

}



body {

  background-color: var(--ice);

  color: var(--ink);

  /* Cifras de ancho fijo: montos, horas y números de ticket quedan alineados en columna */

  font-variant-numeric: tabular-nums;

  height: 100vh;

  width: 100vw;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}



/* ================================================= */

/* VISTA 1: LOGIN / ACCESO AL SISTEMA (acceso.py)    */

/* ================================================= */

#view-login {

  display: flex;

  flex-direction: column;

  height: 100vh;

  width: 100vw;

  background: #eef3fa;

  position: relative;

}



.login-topbar {

  background: #ffffff;

  color: #0f172a;

  padding: 12px 24px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid #cbd5e1;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

  position: relative;

  overflow: hidden;

}



.login-topbar::after {

  content: "";

  position: absolute;

  top: 0;

  right: 28%;

  width: 140px;

  height: 100%;

  background: rgba(43, 95, 162, 0.22);

  display: none !important;

  pointer-events: none;

}



.login-topbar-left {

  display: flex;

  align-items: center;

  gap: 12px;

}



.login-brand-title {

  font-size: 22px;

  font-weight: 900;

  letter-spacing: -0.3px;

  color: #1845b8;

  line-height: 1.05;

}



.login-brand-sub {

  font-size: 11px;

  font-weight: 600;

  color: #64748b;

}



.login-topbar-center, .pos-header-center {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.status-beacon-btn {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  padding: 0;

  outline: none;

  box-shadow: none;

}



.status-beacon-btn:hover, .status-beacon-btn:active {

  background: rgba(255, 255, 255, 0.18);

  border-color: rgba(255, 255, 255, 0.35);

  transform: scale(1.08);

}



.status-beacon-dot {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  display: block;

  transition: background-color 0.3s ease, box-shadow 0.3s ease;

}



/* Verde: Autorizado / Conectado */

.status-beacon-dot.status-green {

  background-color: #22c55e;

  box-shadow: none !important;

}



/* Naranja: No autorizado */

.status-beacon-dot.status-orange {

  background-color: #f59e0b;

  box-shadow: none !important;

}



/* Rojo: Sin internet */

.status-beacon-dot.status-red {

  background-color: #ef4444;

  box-shadow: none !important;

}



@keyframes beaconPulse {

  0% { transform: scale(0.92); opacity: 0.85; }

  50% { transform: scale(1.15); opacity: 1; }

  100% { transform: scale(0.92); opacity: 0.85; }

}



.status-beacon-dot.pulse {

  animation: none !important;

}



.status-tooltip-popover {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) translateY(8px);

  background: rgba(7, 28, 59, 0.95);

  color: #ffffff;

  padding: 6px 12px;

  border-radius: 6px;

  font-size: 11px;

  font-weight: 600;

  white-space: nowrap;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);

  border: 1px solid rgba(255, 255, 255, 0.15);

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.2s ease, transform 0.2s ease;

  z-index: 999;

}



.status-tooltip-popover.show {

  opacity: 1;

  transform: translateX(-50%) translateY(10px);

}



.status-dot {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background-color: var(--green);

  box-shadow: none !important;

}



.login-topbar-right {

  text-align: right;

}



.login-clock-time {

  font-size: 18px;

  font-weight: 800;

  color: #0f172a;

}



.login-clock-date {

  font-size: 11px;

  color: #64748b;

}



/* Tarjeta Central de Acceso */

.login-center-wrapper {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

}



.login-card {

  background: #ffffff;

  border: 1.5px solid var(--line);

  border-radius: 6px;

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);

  display: flex;

  width: 780px;

  max-width: 95vw;

  min-height: 390px;

  overflow: hidden;

}



.login-card-left {

  flex: 1;

  padding: 38px 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-right: 1px solid var(--line);

}



.login-monitor-img {

  width: 180px;

  height: auto;

  margin-bottom: 22px;

  filter: drop-shadow(0 8px 16px rgba(13, 91, 182, 0.15));

}



.login-auth-title {

  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 18px;

  font-weight: 800;

  color: var(--navy);

  margin-bottom: 5px;

}



.login-auth-sub {

  font-size: 12px;

  color: var(--muted);

  margin-bottom: 7px;

}



.login-auth-id {

  font-size: 14.5px;

  font-weight: 800;

  letter-spacing: 1.2px;

  color: var(--navy);

  font-family: monospace;

}



.login-card-right {

  flex: 1.1;

  padding: 40px 36px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.login-right-header {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

}



.login-avatar-icon {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background: #edf5ff;

  border: 1.5px solid var(--line);

  display: flex;

  align-items: center;

  justify-content: center;

}



.login-avatar-icon img {

  width: 28px;

  height: 28px;

}



.login-right-title {

  font-size: 21px;

  font-weight: 800;

  color: var(--navy);

}



.form-group {

  margin-bottom: 15px;

}



.form-label {

  display: block;

  font-size: 12px;

  font-weight: 700;

  color: var(--ink);

  margin-bottom: 5px;

}



.form-input-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.form-input-wrap img.input-icon {

  position: absolute;

  left: 11px;

  width: 15px;

  height: 15px;

  opacity: 0.65;

}



.form-input {

  width: 100%;

  padding: 10px 12px 10px 36px;

  font-size: 13.5px;

  font-weight: 600;

  color: var(--ink);

  background-color: #ffffff;

  border: 1px solid var(--line);

  border-radius: 6px;

  outline: none;

  transition: all 0.2s;

}



.form-input:focus {

  border-color: var(--blue);

  box-shadow: 0 0 0 2px rgba(13, 91, 182, 0.18);

}



.form-input-readonly {

  background-color: #f6f9ff;

  color: #475569;

}



.btn-toggle-eye {

  position: absolute;

  right: 10px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 4px;

}



.btn-toggle-eye img {

  width: 16px;

  height: 16px;

  opacity: 0.55;

}



.btn-login-submit {

  width: 100%;

  padding: 12px;

  margin-top: 12px;

  background-color: var(--blue);

  color: #ffffff;

  border: none;

  border-radius: 6px;

  font-size: 13.5px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition: background 0.15s;

}



.btn-login-submit:hover {

  background-color: var(--blue-hover);

}



.login-help-text {

  margin-top: 16px;

  font-size: 11.5px;

  color: var(--muted);

  display: flex;

  align-items: center;

  gap: 6px;

}



.login-help-text img {

  width: 14px;

  height: 14px;

}



/* Footer Barra Login */

.login-footer-bar {

  margin: 0 24px 16px 24px;

  padding: 10px 20px;

  background: #ffffff;

  border: 1.5px solid var(--line);

  border-radius: 6px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.login-footer-left {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 12px;

}



.login-footer-left b {

  color: var(--navy);

}



.login-footer-left span {

  color: var(--muted);

}



.login-footer-actions {

  display: flex;

  gap: 8px;

}



.btn-footer-tool {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 7px 15px;

  border-radius: 6px;

  border: 1px solid var(--line);

  background: #ffffff;

  font-size: 12px;

  font-weight: 600;

  color: var(--ink);

  cursor: pointer;

  transition: background 0.15s;

}



.btn-footer-tool:hover {

  background: #e4effc;

}



.btn-footer-tool img {

  width: 15px;

  height: 15px;

}



/* ================================================= */

/* VISTA 2: POS PRINCIPAL (app.py)                   */

/* ================================================= */

#view-pos {

  display: none;

  flex-direction: column;

  height: 100vh;

  width: 100vw;

  background-color: var(--ice);

}



/* Topbar POS */

.pos-header {

  background: #071c3b;

  color: var(--on-dark);

  padding: 8px 16px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 2px solid var(--navy-end);

  position: relative;

  overflow: hidden;

  height: 52px;

}



.pos-header::after {

  content: "";

  position: absolute;

  top: 0;

  left: 28%;

  width: 180px;

  height: 100%;

  background: rgba(43, 95, 162, 0.22);

  display: none !important;

  pointer-events: none;

}



.pos-header-left h1 {

  font-size: 18px;

  font-weight: 800;

  color: #ffffff;

  letter-spacing: -0.2px;

  line-height: 1.1;

}



.pos-last-ticket-info {

  font-size: 10.5px;

  color: var(--sec-on-dark);

}



.pos-header-right {

  text-align: right;

  flex-shrink: 0;

}



.pos-clock {

  font-size: 12px;

  font-weight: 800;

  color: #ffffff;

}



.pos-operator-badge {

  font-size: 10.5px;

  color: var(--sec-on-dark);

}



/* Cuerpo Principal POS */

.pos-main-body {

  flex: 1;

  display: flex;

  gap: 8px;

  padding: 8px;

  overflow: hidden;

}



/* Barra Lateral Izquierda (106px) */

.pos-sidebar {

  width: 106px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  flex-shrink: 0;

  height: 100%;

}



.pos-nav-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

  flex: 1;

  min-height: 0;

}



.pos-nav-btn {

  flex: 1;

  min-height: 48px;

  max-height: 84px;

  border-radius: 6px;

  border: 1px solid var(--line);

  background: #ffffff;

  color: var(--ink);

  font-size: 11.5px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  padding: 4px 6px;

  white-space: nowrap;

  transition: all 0.15s;

  box-shadow: none;

}



.pos-nav-ico {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  color: #3a5a86;

}



.pos-nav-ico svg {

  width: 22px;

  height: 22px;

}



.pos-nav-btn:hover {

  background: #edf5ff;

  border-color: #a5cdf8;

}



.pos-nav-btn.active {

  background: #b7d6fa;

  border-color: #7bb6f4;

  color: var(--navy);

  box-shadow: inset 0 1px 3px rgba(10, 38, 82, 0.15);

  font-weight: 800;

}



.pos-nav-btn.active .pos-nav-ico {

  color: var(--navy);

}



.pos-sidebar-bottom {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top: 6px;

  flex-shrink: 0;

}



.pos-big-btn {

  height: auto;

  min-height: 52px;

  max-height: 76px;

  border-radius: 6px;

  border: 1px solid var(--line);

  background: #ffffff;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  padding: 6px 4px;

  cursor: pointer;

  box-shadow: none;

  transition: all 0.15s;

}



.pos-big-btn:hover {

  background: #edf5ff;

  border-color: #a5cdf8;

}



.pos-big-btn img {

  width: 24px;

  height: 24px;

  object-fit: contain;

}



.pos-big-btn-danger:hover {

  background: #fef2f2;

  border-color: #fca5a5;

}



.pos-big-btn span {

  font-size: 11px;

  font-weight: 700;

  color: var(--ink);

}



/* Contenido de Pestañas */

.pos-content-container {

  flex: 1;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.tab-page {

  display: none;

  flex: 1;

  flex-direction: column;

  height: 100%;

}



.tab-page.active-tab {

  display: flex;

}



/* Layout Pestaña Venta */

.sale-layout {

  display: flex;

  gap: 8px;

  height: 100%;

}



.sale-center-workspace {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: hidden;

}



/* Encabezado y Cuadrícula de Loterías */

.lotteries-header-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 2px;

}



.section-title {

  font-size: 13px;

  font-weight: 800;

  color: var(--navy);

  transition: all 0.2s ease;

}



.section-title.super-pale-mode-title {

  color: #ffffff;

  background: #1e3a8a;

  padding: 3px 12px;

  border-radius: 6px;

  box-shadow: none;

}



.lottery-toggle-actions {

  display: flex;

  gap: 6px;

}



.btn-small-tool {

  padding: 4px 10px;

  font-size: 11px;

  font-weight: 600;

  color: var(--ink);

  background: #e4effc;

  border: 1px solid var(--line);

  border-radius: 4px;

  cursor: pointer;

}



.btn-small-tool:hover {

  background: #d3e6fc;

}



.lotteries-grid {

  display: grid;

  /* Columnas que se adaptan al ancho: el nombre de la lotería nunca queda cortado */

  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

  grid-auto-rows: 44px;

  align-content: start;

  gap: 6px;

  min-height: 106px;

  max-height: 112px;

  overflow-y: auto;

  padding: 8px;

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 6px;

  flex-shrink: 0;

  transition: all 0.25s ease;

}



.lotteries-grid.expanded {

  max-height: 268px;

  min-height: 160px;

}



.btn-expand-lotteries {

  background: #eff6ff !important;

  border: 1px solid #93c5fd !important;

  color: #1d4ed8 !important;

  font-weight: 700 !important;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



.btn-expand-lotteries:hover {

  background: #dbeafe !important;

  border-color: #60a5fa !important;

}



.lotteries-grid.super-pale-mode {

  background: #f0f7ff;

  border: 2px solid #0d5bb6;

  box-shadow: none;

}



.lottery-card {

  height: 44px;

  background: #f8fbff;

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 4px 8px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  cursor: pointer;

  transition: all 0.12s;

}



.lottery-card:hover {

  background: #edf5ff;

}



.lottery-card.selected {

  background: #b8daff;

  border-color: #0d5bb6;

  box-shadow: inset 0 0 0 1.5px #0d5bb6;

}



.lottery-card.sp-selected {

  background: #dbeafe;

  border-color: #1d4ed8;

  box-shadow: inset 0 0 0 1.5px #1d4ed8;

}



.sp-order-badge {

  background: #1d4ed8;

  color: #ffffff;

  font-size: 9px;

  font-weight: 800;

  padding: 1px 5px;

  border-radius: 4px;

  line-height: 1.2;

}



.lottery-card-left {

  display: flex;

  align-items: center;

  gap: 6px;

  overflow: hidden;

}



.lottery-card-logo {

  width: 22px;

  height: 22px;

  object-fit: contain;

  flex-shrink: 0;

}



.lottery-card-name {

  font-size: 10.5px;

  font-weight: 700;

  line-height: 1.12;

  color: var(--ink);

  white-space: pre-line;

}



.lottery-card-time {

  font-size: 10.5px;

  font-weight: 800;

  color: #16a34a;

  text-align: right;

  flex-shrink: 0;

  padding-left: 3px;

}



.lot-time-green {

  color: #16a34a !important;

}



.lot-time-yellow {

  color: #ca8a04 !important;

}



.lot-time-red {

  color: #dc2626 !important;

  animation: pulseRedTime 1.5s infinite;

}



@keyframes pulseRedTime {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.65; }

}





/* Barra de Entradas (Inputs) */

.sale-inputs-bar {

  display: flex;

  align-items: center;

  gap: 8px;

  background: #ffffff;

  padding: 8px 12px;

  margin-top: 4px;

  border: 1px solid var(--line);

  border-radius: 6px;

  flex-shrink: 0;

}



.select-play-type {

  height: 28px;

  padding: 0 8px;

  font-size: 12px;

  font-weight: 700;

  color: var(--ink);

  background: #f6f9ff;

  border: 1px solid var(--line);

  border-radius: 4px;

  outline: none;

}



.input-label-sm {

  font-size: 12px;

  font-weight: 700;

  color: var(--ink);

}



.input-play-number {

  flex: 1;

  max-width: 150px;

  height: 28px;

  padding: 0 8px;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1px;

  border: 1.5px solid #22c55e;

  border-radius: 4px;

  outline: none;

}



.input-play-number:focus {

  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);

}



.detected-play-badge {

  display: inline-flex;

  align-items: center;

  height: 24px;

  padding: 0 8px;

  border-radius: 6px;

  font-size: 10.5px;

  font-weight: 800;

  background: #e0f2fe;

  color: #0369a1;

  border: 1px solid #bae6fd;

  white-space: nowrap;

  flex-shrink: 0;

}



.input-play-amount {

  width: 90px;

  height: 28px;

  padding: 0 8px;

  font-size: 13px;

  font-weight: 700;

  border: 1px solid var(--line);

  border-radius: 4px;

  outline: none;

}



.btn-add-play {

  height: 28px;

  padding: 0 14px;

  background: #e4effc;

  border: 1px solid var(--line);

  border-radius: 4px;

  font-size: 12px;

  font-weight: 700;

  color: var(--ink);

  cursor: pointer;

}



.btn-add-play:hover {

  background: #d3e6fc;

}



/* 3 Columnas de Tablas */

.sale-tables-row {

  flex: 1;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 8px;

  margin-top: 2px;

  min-height: 0;

}



.table-panel {

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 6px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.table-panel-header {

  background: var(--pale-blue);

  color: var(--navy);

  font-size: 11px;

  font-weight: 800;

  padding: 5px 8px;

  border-bottom: 1px solid var(--line);

  display: flex;

  justify-content: space-between;

}



.table-subheaders {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr;

  padding: 4px 8px;

  background: #f8fafc;

  border-bottom: 1px solid #e2e8f0;

  font-size: 10px;

  font-weight: 700;

  color: var(--muted);

}



.table-subheaders span:last-child {

  text-align: right;

}



.table-body-scroll {

  flex: 1;

  overflow-y: auto;

  font-size: 11px;

}



.table-row-item {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr;

  align-items: center;

  min-height: 28px;

  padding: 3px 8px;

  border-bottom: 1px solid #e2e8f0;

  font-variant-numeric: tabular-nums;

  cursor: pointer;

}



.table-row-item:hover {

  background: #f1f8ff;

}



.table-row-item.selected-row {

  background: #0d5bb6;

  color: #ffffff;

}



.table-row-item span:last-child {

  text-align: right;

  font-weight: 700;

}



/* Barra de Estado inferior */

.sale-status-line {

  font-size: 11px;

  color: var(--ink);

  padding: 2px 4px;

}



/* Panel Derecho de Acciones (156px) */

.sale-actions-sidebar {

  width: 156px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  flex-shrink: 0;

}



.total-display-card {

  background: var(--pale-blue);

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 6px 10px;

}



.total-title {

  font-size: 9.5px;

  font-weight: 800;

  color: var(--navy);

  letter-spacing: 0.5px;

}



.total-value {

  font-size: 16px;

  font-weight: 800;

  color: #0055b3;

}



.btn-action-tool {

  height: 28px;

  background: #e4effc;

  border: 1px solid var(--line);

  border-radius: 5px;

  font-size: 11px;

  font-weight: 700;

  color: var(--ink);

  cursor: pointer;

  transition: background 0.1s;

}



.btn-action-tool:hover {

  background: #d3e6fc;

}



.btn-action-tool.active-toggle {

  background: #b7d6fa;

  border-color: #0d5bb6;

}



.super-pale-drawer {

  display: none;

  background: #edf5ff;

  border: 1px solid var(--line);

  border-radius: 5px;

  padding: 6px;

  margin-top: 2px;

}



.super-pale-drawer.open {

  display: block;

}



.drawer-label {

  font-size: 9px;

  font-weight: 700;

  color: var(--navy);

  margin-bottom: 2px;

}



.drawer-select {

  width: 100%;

  font-size: 10px;

  padding: 2px;

  margin-bottom: 4px;

  border: 1px solid var(--line);

  border-radius: 3px;

}



.btn-facturar-primary {

  height: 36px;

  background: var(--blue);

  color: #ffffff;

  border: 1px solid var(--blue-hover);

  border-radius: 6px;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  margin-top: auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 0 10px;

  box-shadow: 0 1px 2px rgba(10, 38, 82, 0.12);

  transition: all 0.15s ease;

  user-select: none;

  -webkit-user-select: none;

  -webkit-appearance: none;

  appearance: none;

}



.btn-facturar-primary:hover {

  background: var(--blue-hover);

}



.btn-facturar-primary:active {

  background: #07346c;

  transform: translateY(1px);

}



.btn-facturar-icon {

  flex-shrink: 0;

  stroke: currentColor;

  opacity: 0.95;

}



.btn-facturar-badge {

  font-size: 9.5px;

  font-weight: 600;

  padding: 1.5px 5px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.2);

  color: #ffffff;

  letter-spacing: 0.2px;

  white-space: nowrap;

}



.last-ticket-panel {

  border-top: 1px solid var(--line);

  padding-top: 5px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.last-ticket-panel h4 {

  font-size: 11px;

  font-weight: 800;

  color: var(--navy);

}



.last-ticket-sub {

  font-size: 10px;

  color: var(--muted);

}



.btn-ticket-sec {

  height: 24px;

  font-size: 10.5px;

  font-weight: 600;

  color: #64748b;

  background: #e2e8f0;

  border: 1px solid #cbd5e1;

  border-radius: 4px;

  cursor: not-allowed;

}



.btn-ticket-sec.enabled {

  background: #e4effc;

  color: var(--ink);

  border-color: var(--line);

  cursor: pointer;

}



/* PESTAÑA 2: CONSULTA */

.consultation-wrap {

  flex: 1;

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 10px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.consultation-filters {

  display: flex;

  align-items: center;

  gap: 8px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--line);

}



.consultation-table-wrap {

  flex: 1;

  border: 1px solid var(--line);

  border-radius: 4px;

  overflow-y: auto;

}



.consult-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 11px;

  font-variant-numeric: tabular-nums;

}



.consult-table th {

  height: 30px;

  background: #dbe6f4;

  color: #0f172a;

  padding: 0 8px;

  font-weight: 700;

  text-align: left;

  white-space: nowrap;

  border-bottom: 1px solid #b6c7de;

}



.consult-table td {

  height: 30px;

  padding: 3px 8px;

  line-height: 1.25;

  border-bottom: 1px solid #e2e8f0;

}



.consult-table tr.selected-consult-row td {

  background: #dbeafe;

}



.consult-actions {

  display: flex;

  gap: 6px;

}



/* PESTAÑA 3: RECARGAS */

/* PESTAÑA 3: RECARGAS (DISEÑO MODERNO APP) */

.recharge-wrap {

  flex: 1;

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 14px;

  max-width: 580px;

  margin: 0 auto;

  box-shadow: none;

}



.recharge-header-box {

  background: #0f172a;

  border-radius: 6px;

  padding: 16px;

  color: #ffffff;

}



.recharge-badge-pill {

  display: inline-block;

  background: rgba(34, 197, 94, 0.2);

  border: 1px solid rgba(34, 197, 94, 0.4);

  color: #4ade80;

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  padding: 3px 8px;

  border-radius: 6px;

  letter-spacing: 0.4px;

  margin-bottom: 6px;

}



.recharge-main-title {

  font-size: 18px;

  font-weight: 800;

  color: #ffffff;

  margin: 0 0 4px 0;

}



.recharge-subtitle {

  font-size: 12px;

  color: #94a3b8;

  margin: 0;

}



.recharge-type-toggle {

  display: flex;

  background: #f1f5f9;

  padding: 4px;

  border-radius: 6px;

  gap: 4px;

}



.recharge-type-btn {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  height: 38px;

  border: none;

  border-radius: 6px;

  background: transparent;

  color: #475569;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.2s ease;

}



.recharge-type-btn.active {

  background: #ffffff;

  color: #0f172a;

  box-shadow: none;

}



.operators-section-title {

  font-size: 11.5px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: #64748b;

  margin-top: 4px;

}



.operators-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}



.operator-card {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 14px 10px;

  background: #ffffff;

  border: 2px solid #e2e8f0;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.2s ease;

  user-select: none;

}



.operator-card:hover {

  background: #f8fafc;

}



.operator-card:active {

  transform: scale(0.96);

}



.operator-card.selected {

  border-color: #0284c7;

  background: #f0f9ff;

  box-shadow: none;

}



.operator-card img {

  width: 44px;

  height: 44px;

  object-fit: contain;

}



.operator-card span {

  font-size: 13px;

  font-weight: 700;

  color: #1e293b;

}



.operator-check-badge {

  position: absolute;

  top: 6px;

  right: 6px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #0284c7;

  color: #ffffff;

  font-size: 11px;

  font-weight: 800;

  display: none;

  align-items: center;

  justify-content: center;

}



.operator-card.selected .operator-check-badge {

  display: flex;

}



.recharge-packages-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 8px;

}



.package-card {

  background: #ffffff;

  border: 1.5px solid #e2e8f0;

  border-radius: 6px;

  padding: 10px;

  cursor: pointer;

  transition: all 0.15s ease;

}



.package-card.selected {

  border-color: #16a34a;

  background: #f0fdf4;

}



.pkg-header {

  font-size: 12.5px;

  font-weight: 800;

  color: #0f172a;

}



.pkg-data {

  font-size: 11px;

  color: #64748b;

  margin: 2px 0 6px 0;

}



.pkg-price {

  font-size: 13.5px;

  font-weight: 800;

  color: #16a34a;

}



.recharge-form {

  display: flex;

  flex-direction: column;

  gap: 12px;

  width: 100%;

}



.phone-input-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.phone-prefix {

  position: absolute;

  left: 12px;

  font-size: 13.5px;

  font-weight: 700;

  color: #475569;

  pointer-events: none;

}



.phone-field {

  padding-left: 64px !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px !important;

  height: 46px !important;

}



.recharge-amount-chips {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 6px;

  margin-bottom: 8px;

}



.amt-chip {

  height: 36px;

  background: #ffffff;

  border: 1.5px solid #cbd5e1;

  border-radius: 6px;

  font-size: 12.5px;

  font-weight: 700;

  color: #334155;

  cursor: pointer;

  transition: all 0.15s ease;

}



.amt-chip:active {

  background: #e2e8f0;

}



.amt-chip.active {

  background: #0284c7;

  border-color: #0284c7;

  color: #ffffff;

}



.btn-recharge-submit {

  height: 48px !important;

  font-size: 15px !important;

  font-weight: 800 !important;

  border-radius: 6px !important;

  background: #15803d !important;

  box-shadow: none !important;

  margin-top: 10px !important;

}



/* COMPONENTES MÓVILES (BASE: OCULTOS EN DESKTOP) */

.pos-mobile-tools {

  display: none;

  align-items: center;

  gap: 6px;

}



.mobile-tool-btn {

  width: 32px;

  height: 32px;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #fff;

  transition: all 0.2s ease;

  padding: 0;

}



.mobile-tool-btn:active {

  transform: scale(0.92);

  background: rgba(255, 255, 255, 0.18);

}



.mobile-tool-btn img {

  width: 16px;

  height: 16px;

  object-fit: contain;

}



.mobile-bottom-nav {

  display: none;

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  width: 100%;

  max-width: 100%;

  margin: 0;

  height: 58px;

  background: #ffffff;

  border-top: 1px solid #cbd5e1;

  border-radius: 0;

  box-shadow: none;

  z-index: 9999;

  justify-content: space-around;

  align-items: stretch;

  padding: 0 4px;

}



.mobile-nav-item {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 3px;

  height: 100%;

  background: transparent;

  border: none;

  border-top: 2px solid transparent;

  color: #64748b;

  padding: 4px 2px;

  border-radius: 0;

  cursor: pointer;

  transition: color 0.15s ease, background-color 0.15s ease;

  user-select: none;

  -webkit-tap-highlight-color: transparent;

}



.mobile-nav-item:active {

  background: #f1f5f9;

}



.mobile-nav-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

}



.mobile-nav-label {

  font-size: 10.5px;

  font-weight: 700;

  letter-spacing: 0.1px;

}



.mobile-nav-item.active {

  color: #1e3a8a;

  background: #f0f6ff;

  border-top: 2px solid #1e3a8a;

  box-shadow: none;

}



.mobile-nav-item.active .mobile-nav-icon {

  transform: none;

  filter: none;

}





.mobile-lottery-bar {

  display: none;

  flex-direction: column;

  gap: 8px;

  background: #ffffff;

  border: 1px solid var(--border-soft);

  border-radius: 6px;

  padding: 10px;

  box-shadow: none;

  margin-bottom: 8px;

}



.mobile-lottery-bar-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

}



.mobile-lottery-select-btn {

  flex: 1;

  display: flex;

  align-items: center;

  gap: 8px;

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 8px 12px;

  font-size: 13px;

  font-weight: 700;

  color: #1e293b;

  cursor: pointer;

  transition: all 0.2s ease;

}



.mobile-lottery-select-btn:active {

  background: #e2e8f0;

  transform: scale(0.98);

}



.mobile-lottery-btn-icon {

  font-size: 16px;

}



.mobile-lottery-btn-text {

  flex: 1;

  text-align: left;

}



.mobile-lottery-btn-chevron {

  font-size: 11px;

  font-weight: 600;

  color: #0284c7;

  background: #e0f2fe;

  padding: 3px 8px;

  border-radius: 6px;

}



.mobile-lottery-quick-actions {

  display: flex;

  gap: 4px;

}



.mobile-btn-pill {

  border: 1px solid #cbd5e1;

  background: #ffffff;

  color: #475569;

  font-size: 11px;

  font-weight: 600;

  padding: 6px 9px;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.15s ease;

}



.mobile-btn-pill:active {

  background: #e2e8f0;

}



.mobile-lottery-chips-scroll {

  display: flex;

  align-items: center;

  gap: 6px;

  overflow-x: auto;

  padding-bottom: 2px;

  scrollbar-width: none;

}



.mobile-lottery-chips-scroll::-webkit-scrollbar {

  display: none;

}



.mobile-lot-chip {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: #f0fdf4;

  border: 1px solid #86efac;

  color: #166534;

  padding: 4px 8px;

  border-radius: 6px;

  font-size: 11.5px;

  font-weight: 600;

  white-space: nowrap;

  flex-shrink: 0;

  box-shadow: none;

}



.mobile-chip-logo {

  width: 16px;

  height: 16px;

  border-radius: 50%;

  object-fit: cover;

}



.mobile-chip-remove {

  background: rgba(22, 101, 52, 0.12);

  border: none;

  color: #166534;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  font-size: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

  line-height: 1;

}



.mobile-chip-empty {

  font-size: 11.5px;

  color: #94a3b8;

  font-style: italic;

  padding: 4px 2px;

}



.mobile-chip-add {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: #eff6ff;

  border: 1px dashed #93c5fd;

  color: #1d4ed8;

  padding: 4px 10px;

  border-radius: 6px;

  font-size: 11.5px;

  font-weight: 600;

  cursor: pointer;

  white-space: nowrap;

  flex-shrink: 0;

}



/* BOTTOM SHEET MODAL (LOTERÍAS) */

.mobile-lottery-sheet-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(15, 23, 42, 0.65);

  z-index: 10050;

  align-items: flex-end;

  justify-content: center;

}



.mobile-lottery-sheet-card {

  width: 100%;

  max-width: 520px;

  max-height: 85vh;

  background: #ffffff;

  border-radius: 8px 8px 0 0;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);

  display: flex;

  flex-direction: column;

  animation: slideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  overflow: hidden;

}



@keyframes slideUpSheet {

  from { transform: translateY(100%); }

  to { transform: translateY(0); }

}



.mobile-sheet-drag-handle {

  width: 36px;

  height: 4px;

  border-radius: 2px;

  background: #cbd5e1;

  margin: 10px auto 4px auto;

}



.mobile-sheet-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 18px 12px 18px;

  border-bottom: 1px solid #e2e8f0;

}



.mobile-sheet-title-col h3 {

  font-size: 17px;

  font-weight: 800;

  color: #0f172a;

  margin: 0;

}



.mobile-sheet-title-col p {

  font-size: 12px;

  color: #64748b;

  margin: 2px 0 0 0;

}



.mobile-sheet-close-btn {

  background: #f1f5f9;

  border: 1px solid #e2e8f0;

  color: #64748b;

  width: 32px;

  height: 32px;

  border-radius: 6px;

  font-size: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  -webkit-appearance: none;

  appearance: none;

}



.mobile-sheet-filters {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 16px;

  overflow-x: auto;

  border-bottom: 1px solid #e2e8f0;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

}



.mobile-sheet-filters::-webkit-scrollbar {

  display: none;

}



.sheet-filter-chip {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 32px;

  min-height: 32px;

  padding: 0 14px;

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  color: #334155;

  font-size: 12px;

  font-weight: 600;

  line-height: 1;

  border-radius: 6px;

  white-space: nowrap;

  cursor: pointer;

  flex-shrink: 0;

  -webkit-appearance: none;

  appearance: none;

  box-sizing: border-box;

  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

  user-select: none;

  -webkit-user-select: none;

}



.sheet-filter-chip:active {

  background: #e2e8f0;

}



.sheet-filter-chip.active {

  background: #0d5bb6;

  color: #ffffff;

  border-color: #0d5bb6;

  font-weight: 700;

}



.mobile-sheet-actions {

  display: flex;

  gap: 8px;

  padding: 8px 16px;

  background: #f8fafc;

  border-bottom: 1px solid #e2e8f0;

}



.btn-sheet-quick {

  flex: 1;

  padding: 6px 10px;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  font-size: 11.5px;

  font-weight: 600;

  color: #334155;

  cursor: pointer;

}



.btn-sheet-quick:active {

  background: #e2e8f0;

}



.mobile-sheet-list {

  flex: 1;

  overflow-y: auto;

  padding: 10px 16px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.modal-lot-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 12px;

  background: #f8fafc;

  border: 1.5px solid #e2e8f0;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.15s ease;

  user-select: none;

}



.modal-lot-item.selected {

  background: #f0fdf4;

  border-color: #22c55e;

}



.modal-lot-left {

  display: flex;

  align-items: center;

  gap: 12px;

}



.modal-lot-logo {

  width: 32px;

  height: 32px;

  border-radius: 6px;

  object-fit: cover;

  background: #fff;

  padding: 2px;

  box-shadow: none;

}



.modal-lot-info h4 {

  font-size: 13.5px;

  font-weight: 700;

  color: #0f172a;

  margin: 0;

}



.modal-lot-info span {

  font-size: 11px;

  color: #64748b;

}



.modal-lot-check {

  width: 22px;

  height: 22px;

  border-radius: 6px;

  border: 2px solid #cbd5e1;

  background: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 13px;

  font-weight: 800;

  color: transparent;

  transition: all 0.15s ease;

}



.modal-lot-item.selected .modal-lot-check {

  background: #22c55e;

  border-color: #22c55e;

  color: #ffffff;

}



.mobile-sheet-footer {

  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;

  border-top: 1px solid #e2e8f0;

  background: #ffffff;

}



.btn-sheet-done {

  width: 100%;

  height: 46px;

  background: #16a34a;

  color: #ffffff;

  border: none;

  border-radius: 6px;

  font-size: 15px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: none;

  transition: all 0.2s ease;

}



.btn-sheet-done:active {

  transform: scale(0.98);

  background: #15803d;

}



/* PESTAÑA 4: CUADRE */

.cuadre-wrap {

  flex: 1;

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.cuadre-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

}



.cuadre-card {

  background: #f8fafc;

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 12px;

}



.cuadre-card h4 {

  font-size: 11px;

  color: var(--muted);

  margin-bottom: 4px;

}



.cuadre-card p {

  font-size: 18px;

  font-weight: 800;

  color: var(--navy);

}



/* PESTAÑA 5: REPORTES */

.reports-wrap {

  flex: 1;

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 16px;

}



/* ================================================= */

/* MODAL FLOTANTE DE CALCULADORA MODERNA FORTUNA BELLO */

/* ================================================= */

#modal-calculator {

  display: none;

  position: fixed;

  top: 12%;

  left: 34%;

  width: 340px;

  background: #0f172a;

  border: 1.5px solid rgba(56, 189, 248, 0.32);

  border-radius: 6px;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);

  z-index: 10060;

  overflow: hidden;

  user-select: none;

}



.calc-titlebar {

  background: #0a2652;

  color: #ffffff;

  padding: 10px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  cursor: move;

}



.calc-titlebar-left {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.2px;

  color: #f8fafc;

}



.calc-brand-dot {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #38bdf8;

  box-shadow: none !important;

}



.calc-titlebar-actions {

  display: flex;

  align-items: center;

  gap: 5px;

}



.calc-top-btn {

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.18);

  color: #e2e8f0;

  font-size: 10.5px;

  font-weight: 700;

  padding: 4px 8px;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.15s ease;

}



.calc-top-btn:hover {

  background: rgba(255, 255, 255, 0.2);

  color: #ffffff;

}



.calc-top-btn-accent {

  background: rgba(22, 163, 74, 0.28);

  border-color: rgba(74, 222, 128, 0.45);

  color: #86efac;

}



.calc-top-btn-accent:hover {

  background: #16a34a;

  color: #ffffff;

}



.calc-close-btn {

  background: rgba(239, 68, 68, 0.18);

  border: 1px solid rgba(239, 68, 68, 0.35);

  border-radius: 6px;

  width: 24px;

  height: 24px;

  font-size: 12px;

  font-weight: 800;

  color: #fca5a5;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.15s ease;

}



.calc-close-btn:hover {

  background: #ef4444;

  color: #ffffff;

}



.calc-screen-box {

  background: #061021;

  border: 1.5px solid rgba(56, 189, 248, 0.22);

  margin: 12px 12px 8px 12px;

  padding: 10px 14px;

  border-radius: 6px;

  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.55);

}



.calc-history-line {

  font-size: 12px;

  font-weight: 600;

  color: #93c5fd;

  text-align: right;

  min-height: 18px;

  opacity: 0.88;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.calc-main-readout {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 8px;

  margin-top: 2px;

}



.calc-currency-tag {

  font-size: 12px;

  font-weight: 800;

  color: #38bdf8;

  opacity: 0.85;

}



.calc-display {

  flex: 1;

  font-size: 30px;

  font-weight: 900;

  text-align: right;

  color: #ffffff;

  min-height: 38px;

  line-height: 1.15;

  word-break: break-all;

  letter-spacing: -0.5px;

}



.calc-quick-row {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 6px;

  padding: 0 12px 8px 12px;

}



.calc-quick-chip {

  height: 28px;

  background: rgba(30, 58, 138, 0.45);

  border: 1px solid rgba(96, 165, 250, 0.28);

  border-radius: 6px;

  color: #bfdbfe;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.15s ease;

}



.calc-quick-chip:hover {

  background: rgba(37, 99, 235, 0.65);

  color: #ffffff;

  border-color: #60a5fa;

}



.calc-quick-chip:active {

  transform: scale(0.95);

}



.calc-keypad {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 7px;

  padding: 0 12px 14px 12px;

}



.calc-btn {

  height: 46px;

  background: #1e293b;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 6px;

  font-size: 17px;

  font-weight: 800;

  color: #f8fafc;

  cursor: pointer;

  box-shadow: none;

  transition: all 0.12s ease;

}



.calc-btn:hover {

  background: #334155;

  border-color: rgba(255, 255, 255, 0.22);

}



.calc-btn:active {

  transform: scale(0.95);

}



.calc-btn-fn {

  background: #172554;

  color: #93c5fd;

  border-color: rgba(147, 197, 253, 0.2);

}



.calc-btn-fn:hover {

  background: #1e3a8a;

  color: #ffffff;

}



.calc-btn-clear {

  background: rgba(220, 38, 38, 0.22);

  color: #fca5a5;

  border-color: rgba(248, 113, 113, 0.35);

}



.calc-btn-clear:hover {

  background: #dc2626;

  color: #ffffff;

}



.calc-btn-op {

  background: #0369a1;

  color: #ffffff;

  border-color: rgba(56, 189, 248, 0.4);

  font-size: 20px;

}



.calc-btn-op:hover {

  background: #0284c7;

}



.calc-btn-equal {

  background: #15803d;

  color: #ffffff;

  border-color: rgba(74, 222, 128, 0.45);

  font-size: 21px;

  box-shadow: none;

}



.calc-btn-equal:hover {

  background: #16a34a;

}



/* ================================================= */

/* MODAL DE DIÁLOGOS (APROBADO, RECHAZADO, APAGAR)   */

/* ================================================= */

.modal-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(10, 38, 82, 0.45);

  z-index: 2000;

  align-items: center;

  justify-content: center;

}



.modal-native-box {

  background: #ffffff;

  border: 1.5px solid var(--line);

  border-radius: 6px;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);

  width: 440px;

  max-width: 90vw;

  overflow: hidden;

  animation: popIn 0.15s ease-out;

}



@keyframes popIn {

  from { transform: scale(0.95); opacity: 0; }

  to { transform: scale(1); opacity: 1; }

}



.modal-native-header {

  padding: 6px 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 11px;

  font-weight: 700;

}



.modal-header-success {

  background: #70c040;

  color: #ffffff;

}



.modal-header-reject {

  background: #ea580c;

  color: #ffffff;

}



.modal-native-body {

  padding: 20px 24px;

}



.modal-title-row {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;

}



.modal-icon-circle {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  font-weight: 900;

  flex-shrink: 0;

}



.icon-blue-i {

  background: #0d5bb6;

  color: #ffffff;

}



.icon-orange-exclamation {

  background: #ea580c;

  color: #ffffff;

}



.modal-title-text h3 {

  font-size: 15px;

  font-weight: 800;

  color: var(--navy);

}



.modal-title-text p {

  font-size: 11px;

  color: var(--muted);

}



.modal-content-card {

  background: #f8fafc;

  border: 1px solid var(--line);

  border-radius: 6px;

  padding: 10px 14px;

  font-size: 11.5px;

  line-height: 1.4;

  color: var(--ink);

  margin-bottom: 14px;

}



.modal-actions-bar {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

}



.btn-modal-primary {

  padding: 7px 18px;

  border-radius: 5px;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  border: none;

}



.btn-modal-green {

  background: #70c040;

  color: #ffffff;

}



.btn-modal-blue {

  background: var(--blue);

  color: #ffffff;

}



/* ================================================= */

/* ADAPTACIÓN MÓVIL Y TABLET (RESPONSIVE)            */

/* ================================================= */

@media (max-width: 820px) {

  body {

    overflow-y: auto;

    height: auto;

    min-height: 100vh;

  }



  /* Login en Móvil */

  #view-login {

    height: auto;

    min-height: 100vh;

  }



  .login-topbar {

    padding: 10px 14px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: nowrap;

    gap: 8px;

    min-height: 54px;

  }



  .login-topbar::after {

    display: none;

  }



  .login-topbar-left {

    display: flex;

    align-items: center;

    gap: 8px;

    flex: 1;

    min-width: 0;

  }



  .login-brand-title {

    font-size: 16px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.2px;

  }



  .login-brand-sub {

    font-size: 10px;

    color: #64748b;

  }



  .login-topbar-center {

    flex-shrink: 0;

  }



  .status-beacon-btn {

    width: 32px;

    height: 32px;

  }



  .status-beacon-dot {

    width: 11px;

    height: 11px;

  }



  .login-topbar-right {

    text-align: right;

    flex-shrink: 0;

  }



  .login-clock-time {

    font-size: 14.5px;

    font-weight: 800;

    line-height: 1.15;

  }



  .login-clock-date {

    font-size: 9.5px;

    color: #64748b;

    line-height: 1.15;

  }



  .login-center-wrapper {

    padding: 12px;

  }



  .login-card {

    flex-direction: column;

    width: 100%;

    max-width: 440px;

    min-height: auto;

  }



  .login-card-left {

    border-right: none;

    border-bottom: 1px solid var(--line);

    padding: 22px 16px;

  }



  .login-monitor-img {

    width: 110px;

    margin-bottom: 12px;

  }



  .login-auth-title {

    font-size: 16px;

  }



  .login-auth-id {

    font-size: 13px;

  }



  .login-card-right {

    padding: 22px 18px;

  }



  .login-footer-bar {

    margin: 8px 12px 16px 12px;

    flex-direction: column;

    gap: 10px;

    padding: 10px 12px;

    text-align: center;

  }



  .login-footer-left {

    justify-content: center;

    flex-wrap: wrap;

    font-size: 11px;

  }



  .login-footer-actions {

    width: 100%;

    justify-content: center;

    gap: 6px;

  }



  .btn-footer-tool {

    flex: 1;

    justify-content: center;

    padding: 6px 8px;

    font-size: 11px;

  }



  /* POS en Móvil */

  #view-pos {

    height: auto;

    min-height: 100vh;

    overflow-y: auto;

  }



  .pos-header {

    height: 38px;

    min-height: 38px;

    padding: 0 8px;

    flex-wrap: nowrap;

    gap: 0;

  }



  .pos-header::after {

    display: none;

  }



  .pos-header-right {

    display: none !important;

  }



  .pos-mobile-tools {

    display: none !important;

  }



  .pos-main-body {

    flex-direction: column;

    padding: 6px;

    overflow: visible;

  }



  /* Ocultar barra lateral en móvil; sustituida por Bottom Navigation Bar */

  .pos-sidebar {

    display: none !important;

  }



  .pos-content-container {

    overflow: visible;

    padding-bottom: 74px !important;

  }



  /* Pestaña Venta Móvil */

  .sale-layout {

    flex-direction: column;

    height: auto;

    gap: 10px;

  }



  .sale-center-workspace {

    overflow: visible;

    gap: 8px;

  }



  /* Ocultar cuadrícula pesada de 21 loterías en móvil y activar el selector compacto */

  .lotteries-header-row {

    display: none !important;

  }



  #lotteries-grid {

    display: none !important;

  }



  .mobile-lottery-bar {

    display: flex !important;

  }



  .mobile-bottom-nav {

    display: flex !important;

  }



  .lottery-card-name {

    font-size: 10px;

  }



  .lottery-card-time {

    font-size: 10px;

  }



  .sale-inputs-bar {

    flex-wrap: wrap;

    gap: 6px;

  }



  .select-play-type {

    width: 100%;

    height: 34px;

  }



  .input-label-sm {

    font-size: 11px;

  }



  .input-play-number {

    max-width: none;

    flex: 1;

    height: 34px;

    font-size: 14px;

  }



  .input-play-amount {

    flex: 1;

    width: auto;

    height: 34px;

    font-size: 14px;

  }



  .btn-add-play {

    width: 100%;

    height: 36px;

    font-size: 13px;

    margin-top: 4px;

  }



  /* Tablas en Móvil: Apiladas verticalmente */

  .sale-tables-row {

    grid-template-columns: 1fr;

    gap: 8px;

    min-height: auto;

  }



  .table-panel {

    max-height: 190px;

  }



  /* Barra de Acciones Móvil */

  .sale-actions-sidebar {

    width: 100%;

    gap: 6px;

  }



  .btn-action-tool {

    height: 32px;

    font-size: 12px;

  }



  .btn-facturar-primary {

    height: 46px;

    font-size: 14px;

    margin: 8px 0;

  }



  /* Calculadora Móvil */

  #modal-calculator {

    top: 5% !important;

    left: 4% !important;

    width: 92% !important;

    max-width: 320px;

  }



  /* Pestaña Consulta Móvil */

  .consultation-filters {

    flex-wrap: wrap;

    gap: 6px;

  }



  .consultation-filters .form-input,

  .consultation-filters .select-play-type {

    width: 100%;

    max-width: none !important;

  }



  /* Cuadre Móvil */

  .cuadre-grid {

    grid-template-columns: 1fr 1fr;

    gap: 8px;

  }



  .recharge-wrap {

    padding: 12px !important;

    max-width: 100% !important;

    margin: 0 !important;

    border: none !important;

    box-shadow: none !important;

  }



  .recharge-amount-chips {

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 8px !important;

  }



  .recharge-packages-grid {

    grid-template-columns: 1fr !important;

  }



  .operators-grid {

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 8px !important;

  }



  .cuadre-wrap, .reports-wrap {

    padding: 10px !important;

  }



  .reports-kpi-row {

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 6px !important;

  }



  .pos-content-container {

    padding-bottom: 86px !important;

  }

}



/* ========================================================

   MODAL TICKET TÉRMICO DIGITAL & VISOR (SIN IMPRESORA)

   ======================================================== */

.modal-thermal-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(15, 23, 42, 0.78);

  z-index: 10000;

  align-items: center;

  justify-content: center;

  padding: 16px;

}



.thermal-modal-dialog,

.thermal-ticket-dialog {

  background: #0f172a;

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 6px;

  max-width: 330px;

  width: 92%;

  max-height: 88vh;

  display: flex;

  flex-direction: column;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);

  overflow: hidden;

}



.thermal-ticket-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  background: #1e293b;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  color: #ffffff;

  font-size: 13px;

  font-weight: 700;

}



.thermal-ticket-close {

  background: transparent;

  border: none;

  color: #94a3b8;

  font-size: 22px;

  cursor: pointer;

  line-height: 1;

}



.thermal-ticket-body {

  padding: 14px;

  overflow-y: auto;

  display: flex;

  justify-content: center;

  background: #0b1120;

}



.thermal-ticket-paper,

.thermal-paper {

  background: #ffffff !important;

  color: #0f172a !important;

  font-family: 'Courier New', Courier, monospace !important;

  font-size: 12px !important;

  line-height: 1.35 !important;

  padding: 20px 16px !important;

  width: 100% !important;

  max-width: 310px !important;

  border-radius: 4px !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;

  overflow-y: auto !important;

  max-height: 70vh !important;

  box-sizing: border-box !important;

}



.thermal-receipt {

  display: flex;

  flex-direction: column;

  gap: 4px;

  color: #0f172a !important;

}



.receipt-brand {

  text-align: center;

  font-size: 18px;

  font-weight: 900;

  letter-spacing: 0.5px;

  color: #0f172a !important;

}



.receipt-sub {

  text-align: center;

  font-size: 11px;

  font-weight: 700;

  color: #334155 !important;

}



.receipt-info {

  text-align: center;

  font-size: 10.5px;

  color: #475569 !important;

}



.receipt-divider {

  text-align: center;

  font-size: 11px;

  letter-spacing: -1px;

  color: #64748b !important;

  margin: 4px 0;

  overflow: hidden;

  white-space: nowrap;

}



.receipt-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 11px;

  margin: 4px 0;

  color: #0f172a !important;

}



.receipt-table th {

  text-align: left;

  border-bottom: 1px dashed #000;

  padding-bottom: 2px;

  font-weight: 700;

  color: #0f172a !important;

}



.receipt-table td {

  padding: 2px 0;

  color: #0f172a !important;

}



.receipt-table-right {

  text-align: right;

}



.receipt-total-row {

  display: flex;

  justify-content: space-between;

  font-size: 13px;

  font-weight: 900;

  padding: 4px 0;

  color: #0f172a !important;

}



.receipt-barcode {

  text-align: center;

  font-family: 'Courier New', monospace;

  letter-spacing: 5px;

  font-size: 16px;

  font-weight: 900;

  margin: 10px 0 4px 0;

  color: #0f172a !important;

}



.receipt-barcode-sub {

  text-align: center;

  font-size: 9.5px;

  color: #475569 !important;

}



.receipt-footer {

  text-align: center;

  font-size: 10px;

  margin-top: 8px;

  color: #334155 !important;

}



.thermal-modal-actions,

.thermal-ticket-actions {

  display: flex;

  gap: 8px;

  padding: 12px 16px;

  background: #1e293b;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.btn-thermal-action,

.btn-ticket-copy,

.btn-ticket-done {

  flex: 1;

  height: 40px;

  border-radius: 6px;

  font-size: 12.5px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  border: none;

}



.btn-thermal-close,

.btn-ticket-copy {

  background: #334155;

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #ffffff;

}



.btn-thermal-copy,

.btn-ticket-done {

  background: #0284c7;

  color: #ffffff;

}



/* Botón de ojo para inspeccionar tickets */

.btn-ticket-eye {

  background: #e0f2fe;

  color: #0369a1;

  border: 1px solid #bae6fd;

  border-radius: 6px;

  padding: 4px 8px;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: all 0.15s ease;

}



.btn-ticket-eye:hover {

  background: #0284c7;

  color: #ffffff;

  border-color: #0284c7;

}



.ticket-status-badge {

  display: inline-block;

  padding: 2px 6px;

  border-radius: 4px;

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

}



.status-activo, .badge-active {

  background: #dcfce7;

  color: #15803d;

}



.status-anulado, .badge-cancelled {

  background: #fee2e2;

  color: #b91c1c;

}



.status-ganador {

  background: #fef3c7;

  color: #b45309;

}



.status-pagado {

  background: #e0e7ff;

  color: #3730a3;

}



/* ========================================================

   CUADRE DASHBOARD MODERNO

   ======================================================== */

.cuadre-wrap {

  flex: 1;

  background: #f8fafc;

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 14px;

  max-width: 680px;

  margin: 0 auto;

  width: 100%;

}



.cuadre-header-banner {

  background: #0f172a;

  border-radius: 6px;

  padding: 16px 18px;

  color: #ffffff;

}



.cuadre-header-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 8px;

}



.cuadre-badge-active {

  background: rgba(34, 197, 94, 0.2);

  border: 1px solid rgba(34, 197, 94, 0.4);

  color: #4ade80;

  font-size: 10.5px;

  font-weight: 700;

  padding: 3px 8px;

  border-radius: 6px;

}



.cuadre-header-date {

  font-size: 11.5px;

  color: #94a3b8;

  font-weight: 600;

}



.cuadre-banner-title {

  font-size: 18px;

  font-weight: 800;

  margin: 0 0 4px 0;

  color: #ffffff;

}



.cuadre-operator-info {

  font-size: 12px;

  color: #cbd5e1;

}



.cuadre-hero-card {

  background: #1e3a8a;

  border-radius: 6px;

  padding: 20px 18px;

  color: #ffffff;

  box-shadow: none;

  text-align: center;

}



.cuadre-hero-label {

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: #bae6fd;

}



.cuadre-hero-amount {

  font-size: 32px;

  font-weight: 900;

  letter-spacing: -0.5px;

  margin: 6px 0;

  color: #ffffff;

}



.cuadre-hero-sub {

  font-size: 11.5px;

  color: #e0f2fe;

}



.cuadre-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  padding: 14px 12px;

  display: flex;

  align-items: center;

  gap: 12px;

  box-shadow: none;

}



.cuadre-card-icon {

  font-size: 24px;

}



.cuadre-card-content h4 {

  font-size: 11px;

  font-weight: 600;

  color: #64748b;

  margin: 0 0 3px 0;

  text-transform: uppercase;

}



.cuadre-card-content p {

  font-size: 16px;

  font-weight: 800;

  color: #0f172a;

  margin: 0;

}



.cuadre-details-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  padding: 14px 16px;

  box-shadow: none;

}



.cuadre-details-header {

  font-size: 12px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: #475569;

  margin-bottom: 10px;

  padding-bottom: 6px;

  border-bottom: 1px solid #f1f5f9;

}



.cuadre-detail-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 6px 0;

  font-size: 12.5px;

  color: #334155;

  border-bottom: 1px solid #f8fafc;

}



.cuadre-detail-row:last-child {

  border-bottom: none;

}



.detail-badge-green {

  background: #dcfce7;

  color: #16a34a;

  font-size: 10.5px;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 6px;

}



.cuadre-actions-row {

  margin-top: 4px;

}



.btn-cuadre-primary {

  width: 100%;

  height: 48px;

  background: #0f172a;

  color: #ffffff;

  border: none;

  border-radius: 6px;

  font-size: 13.5px;

  font-weight: 800;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  box-shadow: none;

  transition: transform 0.15s ease;

}



.btn-cuadre-primary:active {

  transform: scale(0.98);

}



/* ========================================================

   REPORTES DASHBOARD MODERNO

   ======================================================== */

.reports-wrap {

  flex: 1;

  background: #f8fafc;

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 14px;

  max-width: 680px;

  margin: 0 auto;

  width: 100%;

}



.reports-header-box,

.reports-header-banner {

  background: #0f172a;

  border-radius: 6px;

  padding: 16px 18px;

  color: #ffffff;

}



.reports-badge-pill,

.reports-badge {

  display: inline-block;

  background: rgba(56, 189, 248, 0.2);

  border: 1px solid rgba(56, 189, 248, 0.4);

  color: #38bdf8;

  font-size: 10.5px;

  font-weight: 700;

  padding: 3px 8px;

  border-radius: 6px;

  margin-bottom: 6px;

}



.reports-main-title,

.reports-title {

  font-size: 18px;

  font-weight: 800;

  margin: 0 0 4px 0;

  color: #ffffff;

}



.reports-subtitle {

  font-size: 12px;

  color: #cbd5e1;

  margin: 0;

}



.reports-kpi-row,

.reports-kpi-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}



.reports-kpi-card,

.kpi-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  padding: 12px 8px;

  text-align: center;

  box-shadow: none;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

}



.kpi-icon {

  font-size: 20px;

}



.reports-kpi-title,

.kpi-label {

  font-size: 10.5px;

  font-weight: 700;

  text-transform: uppercase;

  color: #64748b;

  margin-top: 2px;

}



.reports-kpi-value,

.kpi-val {

  font-size: 18px;

  font-weight: 900;

  color: #0f172a;

}



.lucky-ball {

  background: #fef08a;

  color: #854d0e !important;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 14px !important;

}



.reports-section-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  padding: 14px 16px;

  box-shadow: none;

}



.reports-card-header,

.reports-card-title {

  font-size: 12.5px;

  font-weight: 800;

  color: #1e293b;

  margin: 0 0 12px 0;

  text-transform: uppercase;

  letter-spacing: 0.4px;

}



.reports-bar-item {

  display: flex;

  flex-direction: column;

  gap: 5px;

  margin-bottom: 12px;

}



.reports-bar-item:last-child {

  margin-bottom: 0;

}



.bar-labels {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 2px 8px;

  font-size: 12px;

  font-weight: 700;

  color: #334155;

}



.bar-track {

  width: 100%;

  height: 8px;

  background: #f1f5f9;

  border-radius: 4px;

  overflow: hidden;

}



.bar-fill {

  height: 100%;

  border-radius: 4px;

}



.top-lottery-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 10px;

  background: #f8fafc;

  border-radius: 6px;

  margin-bottom: 8px;

}



.top-lottery-row:last-child {

  margin-bottom: 0;

}



.top-lot-info {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12.5px;

  font-weight: 700;

  color: #1e293b;

}



.top-lot-logo {

  width: 24px;

  height: 24px;

  border-radius: 4px;

  object-fit: cover;

}



.top-lot-badge {

  font-size: 10px;

  font-weight: 700;

  color: #0284c7;

  background: #e0f2fe;

  padding: 2px 6px;

  border-radius: 4px;

}



/* ========================================================= */

/* CINTILLO NOTICIERO DE PREMIOS (HEADER) & BARRA INFERIOR   */

/* ========================================================= */

.pos-header {

  padding: 0 12px 0 0 !important;

  gap: 0;

  height: 44px !important;

  background: #071c3b !important;

  border-bottom: 1px solid #1e3a8a !important;

  padding: 0 10px 0 12px !important;

}



.pos-results-ticker {

  flex: 1;

  min-width: 0;

  overflow: hidden;

  height: 100%;

  display: flex;

  align-items: center;

  position: relative;

  z-index: 2;

}



.pos-results-ticker-track {

  display: inline-flex;

  align-items: center;

  gap: 20px;

  white-space: nowrap;

  padding: 0 4px;

}



.pos-results-ticker-track.is-scrolling {

  animation: newsTickerScroll 42s linear infinite;

}



.pos-results-ticker:hover .pos-results-ticker-track.is-scrolling {

  animation-play-state: paused;

}



@keyframes newsTickerScroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



.ticker-item {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.14);

  padding: 3px 8px 3px 6px;

  border-radius: 6px;

  box-shadow: none;

}



.ticker-lot-logo {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  object-fit: cover;

  background: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.4);

  flex-shrink: 0;

}



.ticker-lot-name {

  font-size: 12px;

  font-weight: 700;

  color: #f8fafc;

  letter-spacing: 0.1px;

}



.ticker-lot-time {

  font-size: 10px;

  font-weight: 700;

  color: #93c5fd;

  background: rgba(30, 58, 138, 0.55);

  padding: 1px 6px;

  border-radius: 4px;

}



.ticker-prizes {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  margin-left: 2px;

}



.ticker-ball {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 27px;

  height: 23px;

  padding: 0 5px;

  border-radius: 4px;

  background: #ffffff;

  color: #0d5bb6;

  border: 1px solid #bfdbfe;

  font-size: 12.5px;

  font-weight: 900;

  font-variant-numeric: tabular-nums;

  letter-spacing: 0.2px;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

}



/* Barra de Estado Inferior del POS - Estilo Industrial Sobrio */

.pos-bottom-status-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  background: #ffffff;

  color: #0f172a;

  padding: 6px 14px;

  border-radius: 6px;

  border: 1px solid #cbd5e1;

  box-shadow: none;

  min-height: 38px;

  flex-shrink: 0;

}



.bottom-bar-left {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}



.bottom-consortium-name {

  font-size: 13px;

  font-weight: 800;

  color: #0f172a;

  letter-spacing: -0.2px;

  white-space: nowrap;

}



.status-beacon-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 3px 8px;

  border-radius: 4px;

  border: 1px solid #bbf7d0;

  background: #f0fdf4;

  color: #166534;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: none !important;

  transition: background-color 0.15s ease, border-color 0.15s ease;

}



.status-beacon-btn:hover {

  background: #dcfce7;

  border-color: #86efac;

}



.status-beacon-btn.is-offline {

  background: #fef2f2;

  border-color: #fecaca;

  color: #991b1b;

}



.status-beacon-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  display: inline-block;

  background-color: #16a34a;

  box-shadow: none !important;

  animation: none !important;

}



.status-beacon-dot.status-green {

  background-color: #16a34a;

}



.status-beacon-dot.status-orange {

  background-color: #d97706;

}



.status-beacon-dot.status-red {

  background-color: #dc2626;

}



.status-text-badge {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.1px;

}



.sale-status-inline {

  font-size: 12px;

  font-weight: 600;

  color: #334155;

  padding-left: 10px;

  border-left: 1px solid #cbd5e1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.bottom-bar-right {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

  font-size: 12px;

}



.bottom-bar-date {

  font-weight: 500;

  color: #64748b;

  font-variant-numeric: tabular-nums;

}



.bottom-bar-time {

  font-weight: 700;

  color: #0f172a;

  background: transparent;

  padding: 0;

  border: none;

  font-variant-numeric: tabular-nums;

  letter-spacing: 0.2px;

}



.bottom-bar-last-ticket {

  font-weight: 600;

  color: #1e293b;

  background: #f8fafc;

  padding: 2px 8px;

  border-radius: 4px;

  border: 1px solid #cbd5e1;

  white-space: nowrap;

  font-variant-numeric: tabular-nums;

  font-size: 11.5px;

  cursor: pointer;

  transition: all 0.15s ease;

}



.bottom-bar-last-ticket:hover {

  background: #f1f5f9;

  border-color: #94a3b8;

}



/* ========================================================= */

/* MODAL DE CONFIRMACIÓN DE COBRO E IMPRESIÓN (* + Enter)    */

/* ========================================================= */

.checkout-confirm-dialog {

  width: 440px;

  max-width: 94vw;

  background: #ffffff;

  border-radius: 6px;

  border: 2px solid #0d5bb6;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);

  padding: 20px 22px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.checkout-confirm-header {

  display: flex;

  align-items: center;

  gap: 12px;

  border-bottom: 1px solid #e2e8f0;

  padding-bottom: 12px;

}



.checkout-confirm-icon {

  width: 44px;

  height: 44px;

  border-radius: 6px;

  background: #eff6ff;

  border: 1px solid #bfdbfe;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  flex-shrink: 0;

}



.checkout-confirm-title {

  font-size: 17px;

  font-weight: 900;

  color: #071c3b;

  margin: 0;

}



.checkout-confirm-subtitle {

  font-size: 12px;

  color: #64748b;

  margin: 2px 0 0 0;

  font-weight: 600;

}



.checkout-total-banner {

  background: #0a2652;

  border-radius: 6px;

  padding: 14px 16px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  color: #ffffff;

}



.checkout-total-label {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.8px;

  color: #93c5fd;

}



.checkout-total-value {

  font-size: 30px;

  font-weight: 900;

  color: #4ade80;

  font-variant-numeric: tabular-nums;

  letter-spacing: -0.5px;

}



.checkout-cash-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.checkout-cash-group label {

  font-size: 12.5px;

  font-weight: 800;

  color: #1e293b;

}



.checkout-optional-tag {

  font-weight: 600;

  color: #64748b;

  font-size: 11px;

}



.checkout-cash-input {

  width: 100%;

  height: 44px;

  border-radius: 6px;

  border: 2px solid #93c5fd;

  background: #f8fafc;

  padding: 0 14px;

  font-size: 18px;

  font-weight: 800;

  color: #0f172a;

  outline: none;

  transition: all 0.15s;

}



.checkout-cash-input:focus {

  border-color: #0d5bb6;

  background: #ffffff;

  box-shadow: 0 0 0 3px rgba(13, 91, 182, 0.18);

}



.checkout-change-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: #f0fdf4;

  border: 1.5px solid #86efac;

  border-radius: 6px;

  padding: 10px 14px;

}



.checkout-change-label {

  font-size: 12px;

  font-weight: 800;

  color: #166534;

}



.checkout-change-value {

  font-size: 20px;

  font-weight: 900;

  color: #15803d;

  font-variant-numeric: tabular-nums;

}



.checkout-shortcut-hint {

  font-size: 11.5px;

  color: #475569;

  background: #f1f5f9;

  border-radius: 6px;

  padding: 8px 10px;

  text-align: center;

  line-height: 1.4;

}



.checkout-confirm-actions {

  display: flex;

  gap: 10px;

  margin-top: 4px;

}



.btn-checkout-cancel {

  flex: 1;

  height: 44px;

  border-radius: 6px;

  border: 1.5px solid #cbd5e1;

  background: #f8fafc;

  color: #334155;

  font-size: 12.5px;

  font-weight: 800;

  cursor: pointer;

  transition: all 0.15s;

}



.btn-checkout-cancel:hover {

  background: #e2e8f0;

  color: #0f172a;

}



.btn-checkout-print {

  flex: 1.3;

  height: 44px;

  border-radius: 6px;

  border: none;

  background: #15803d;

  color: #ffffff;

  font-size: 13px;

  font-weight: 900;

  cursor: pointer;

  box-shadow: none;

  transition: all 0.15s;

}



.btn-checkout-print:hover {

  background: #16a34a;

  transform: translateY(-1px);

}



/* ===================================================================== */

/* REDISEÑO EJECUTIVO FULL-WORKSPACE: RECARGAS, CUADRE Y REPORTES        */

/* ===================================================================== */



/* --- 1. RECARGAS FULL-WORKSPACE --- */

#tab-recargas .recharge-wrap {

  max-width: 100% !important;

  width: 100% !important;

  height: 100%;

  margin: 0 !important;

  padding: 12px 14px !important;

  background: #f1f6fd !important;

  border: 1px solid var(--line);

  border-radius: 6px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  overflow-y: auto;

}



#tab-recargas .recharge-header-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 12px 16px;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-left: 4px solid #1e3a8a;

  border-radius: 6px;

  box-shadow: none;

  flex-shrink: 0;

}



#tab-recargas .recharge-badge-pill,

#tab-cuadre .cuadre-badge-active,

#tab-reportes .reports-badge {

  display: inline-block;

  background: #eff6ff;

  border: 1px solid #bfdbfe;

  color: #1e3a8a;

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  padding: 2px 7px;

  border-radius: 4px;

  letter-spacing: 0.4px;

  margin-bottom: 4px;

}



#tab-cuadre .cuadre-badge-active {

  background: #f0fdf4;

  border-color: #bbf7d0;

  color: #15803d;

  margin-bottom: 0;

}



#tab-recargas .recharge-main-title,

#tab-cuadre .cuadre-banner-title,

#tab-reportes .reports-title {

  font-size: 16px;

  font-weight: 800;

  color: #0f172a;

  margin: 0 0 2px 0;

}



#tab-recargas .recharge-subtitle,

#tab-cuadre .cuadre-operator-info,

#tab-reportes .reports-subtitle,

#tab-cuadre .cuadre-header-date {

  font-size: 11.5px;

  color: #475569;

  margin: 0;

}



.recharge-header-kpis {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



.recharge-mini-kpi {

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 6px 12px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  min-width: 118px;

}



.rkpi-label {

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.3px;

  color: #64748b;

}



.rkpi-val {

  font-size: 16px;

  font-weight: 800;

  color: #0f172a;

  font-variant-numeric: tabular-nums;

}



.rkpi-green {

  color: #15803d !important;

}



.rkpi-blue {

  color: #1e40af !important;

}



.recharge-workspace-grid {

  display: grid;

  grid-template-columns: 1.05fr 1fr;

  gap: 12px;

  flex: 1;

  min-height: 0;

}



.recharge-panel-left,

.recharge-panel-right {

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 14px 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  box-shadow: none;

}



.recharge-panel-right {

  overflow: hidden;

}



.operator-logo-box {

  width: 96px;

  height: 44px;

  border-radius: 6px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 6px 10px;

}



.operator-card img {

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

}



.operator-name {

  font-size: 13.5px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

}



.operator-tag {

  font-size: 10.5px;

  font-weight: 600;

  color: #64748b;

  margin-top: -4px;

}



.recharge-inputs-row {

  display: flex;

  gap: 12px;

  align-items: flex-end;

}



.recharge-amount-input {

  height: 42px;

  font-size: 17px !important;

  font-weight: 900 !important;

  color: #1e3a8a !important;

  background: #f8fafc !important;

  text-align: right;

  padding-right: 14px !important;

}



#tab-recargas .recharge-amount-chips {

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  gap: 6px;

}



.recharge-submit-bar {

  display: flex;

  gap: 10px;

  margin-top: 4px;

}



.btn-recharge-clear {

  height: 42px;

  padding: 0 16px;

  border-radius: 6px;

  border: 1px solid #cbd5e1;

  background: #f8fafc;

  color: #334155;

  font-size: 12.5px;

  font-weight: 700;

  cursor: pointer;

}



.btn-recharge-clear:hover {

  background: #e2e8f0;

}



.btn-recharge-submit {

  flex: 1;

  height: 42px !important;

  font-size: 13.5px !important;

  font-weight: 800 !important;

  border-radius: 6px !important;

  background: #15803d !important;

  box-shadow: none !important;

}



.recharge-history-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding-bottom: 8px;

  border-bottom: 1px solid #e2e8f0;

}



.rhist-title {

  font-size: 13.5px;

  font-weight: 800;

  color: #0f172a;

  margin: 0;

}



.rhist-sub {

  font-size: 11px;

  color: #64748b;

  margin: 2px 0 0 0;

}



.recharge-op-summary-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}



.rop-pill {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 7px 10px;

  border-radius: 6px;

  font-size: 12px;

  font-weight: 700;

  border: 1px solid #cbd5e1;

  background: #f8fafc;

}



.rop-claro {

  border-left: 3px solid #dc2626;

}



.rop-altice {

  border-left: 3px solid #0284c7;

}



.rop-viva {

  border-left: 3px solid #16a34a;

}



.recharge-history-table-wrap {

  flex: 1;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  overflow-y: auto;

  min-height: 220px;

}



/* --- 2. CUADRE DE CAJA FULL-WORKSPACE --- */

#tab-cuadre .cuadre-wrap {

  max-width: 100% !important;

  width: 100% !important;

  height: 100%;

  margin: 0 !important;

  padding: 12px 14px !important;

  background: #eef3f9 !important;

  border: 1px solid var(--line);

  border-radius: 6px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow-y: auto;

}



#tab-cuadre .cuadre-header-banner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 12px 16px;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-left: 4px solid #1e3a8a;

  border-radius: 6px;

  flex-shrink: 0;

}



.cuadre-header-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



.cuadre-period-pills,

.reports-filter-pills {

  display: flex;

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  padding: 2px;

  border-radius: 6px;

  gap: 2px;

}



.cperiod-btn,

.rfilter-btn {

  background: transparent;

  border: none;

  color: #475569;

  font-size: 11.5px;

  font-weight: 700;

  padding: 5px 11px;

  border-radius: 4px;

  cursor: pointer;

  transition: all 0.15s;

}



.cperiod-btn.active,

.rfilter-btn.active {

  background: #1e3a8a;

  color: #ffffff;

  box-shadow: none;

}



.btn-cuadre-print-top {

  height: 32px;

  padding: 0 12px;

  border-radius: 6px;

  border: 1px solid #15803d;

  background: #16a34a;

  color: #ffffff;

  font-size: 11.5px;

  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

}



.cuadre-kpi-strip {

  display: grid;

  grid-template-columns: repeat(4, 1fr) 1.35fr;

  gap: 10px;

  flex-shrink: 0;

}



.cuadre-kpi-strip .cuadre-card {

  padding: 10px 14px;

  border-radius: 6px;

  border: 1px solid #cbd5e1;

  background: #ffffff;

  box-shadow: none;

}



.cuadre-card-content small {

  display: block;

  font-size: 10.5px;

  color: #64748b;

  margin-top: 2px;

  font-weight: 600;

}



.cuadre-kpi-strip .cuadre-hero-card {

  padding: 10px 16px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-end;

  text-align: right;

  background: #1e3a8a;

  border: 1px solid #1e40af;

  border-radius: 6px;

}



.cuadre-kpi-strip .cuadre-hero-amount {

  font-size: 22px;

  margin: 2px 0;

}



.cuadre-workspace-grid {

  display: grid;

  grid-template-columns: 1.45fr 1fr;

  gap: 12px;

  flex: 1;

  min-height: 0;

}



.cuadre-panel-left {

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 12px 14px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: hidden;

}



.cuadre-panel-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 8px;

  border-bottom: 1px solid #e2e8f0;

}



.cuadre-panel-header h3 {

  font-size: 13px;

  font-weight: 800;

  color: #0f172a;

  margin: 0;

}



.cuadre-panel-tag {

  font-size: 10px;

  font-weight: 700;

  color: #1e3a8a;

  background: #eff6ff;

  border: 1px solid #bfdbfe;

  padding: 2px 7px;

  border-radius: 4px;

}



.cuadre-table-wrap {

  flex: 1;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  overflow-y: auto;

  min-height: 210px;

}



.cuadre-panel-right {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.cuadre-arqueo-desc {

  font-size: 11.5px;

  color: #475569;

  margin: 0 0 8px 0;

  line-height: 1.4;

}



.cuadre-arqueo-input-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 8px;

}



.cuadre-arqueo-input-row label {

  font-size: 12px;

  font-weight: 700;

  color: #1e293b;

}



.cuadre-arqueo-input {

  width: 160px !important;

  padding: 6px 10px !important;

  text-align: right;

  font-size: 14px !important;

  font-weight: 800 !important;

}



.cuadre-arqueo-result {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 10px;

  border-radius: 6px;

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  font-size: 12px;

}



/* --- 3. REPORTES Y ANALÍTICA FULL-WORKSPACE --- */

#tab-reportes .reports-wrap {

  max-width: 100% !important;

  width: 100% !important;

  height: 100%;

  margin: 0 !important;

  padding: 12px 14px !important;

  background: #eef3f9 !important;

  border: 1px solid var(--line);

  border-radius: 6px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow-y: auto;

}



#tab-reportes .reports-header-banner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 12px 16px;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-left: 4px solid #1e3a8a;

  border-radius: 6px;

  flex-shrink: 0;

}



.reports-header-controls {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



#tab-reportes .reports-kpi-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  flex-shrink: 0;

}



#tab-reportes .kpi-card {

  align-items: flex-start;

  text-align: left;

  padding: 10px 14px;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  gap: 3px;

  box-shadow: none;

}



.kpi-card-top {

  display: flex;

  align-items: center;

  gap: 6px;

}



.kpi-sub {

  font-size: 11px;

  color: #64748b;

  font-weight: 600;

}



.reports-workspace-grid {

  display: grid;

  grid-template-columns: 1.45fr 1fr;

  gap: 14px;

  flex: 1;

  min-height: 0;

}



.reports-col-left,

.reports-col-right {

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-height: 0;

}



.reports-card-title-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px;

}



.reports-card-title-row .reports-card-title {

  margin: 0;

}



.reports-live-pill {

  font-size: 10px;

  font-weight: 800;

  color: #15803d;

  background: #dcfce7;

  padding: 2px 8px;

  border-radius: 6px;

}



.reports-sub-badge {

  font-size: 10px;

  font-weight: 800;

  color: #0369a1;

  background: #e0f2fe;

  padding: 2px 8px;

  border-radius: 6px;

}



.reports-bars-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

}



.reports-bars-grid .reports-bar-item {

  margin-bottom: 0;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  padding: 8px 10px;

  border-radius: 6px;

}



.reports-table-card {

  flex: 1;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.reports-lotteries-table-wrap {

  flex: 1;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  overflow-y: auto;

  min-height: 180px;

}



.hot-numbers-list,

.official-results-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

  overflow-y: auto;

  max-height: 210px;

}



.hot-num-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 7px 10px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

}



.hot-num-ball {

  min-width: 28px;

  height: 28px;

  padding: 0 6px;

  white-space: nowrap;

  border-radius: 14px;

  background: #eab308;

  color: #0f172a;

  font-weight: 900;

  font-size: 13px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.hot-num-bar-wrap {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 3px;

}



.hot-num-bar-top {

  display: flex;

  justify-content: space-between;

  font-size: 11px;

  font-weight: 700;

  color: #334155;

}



.official-res-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 6px 10px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

}



.official-res-left {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  font-weight: 800;

  color: #0f172a;

}



.official-res-left img {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  object-fit: cover;

}



/* Adaptación Responsiva Móvil (< 900px) */

@media (max-width: 900px) {

  .recharge-workspace-grid,

  .cuadre-workspace-grid,

  .reports-workspace-grid {

    grid-template-columns: 1fr !important;

  }

  .cuadre-kpi-strip {

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .cuadre-kpi-strip .cuadre-hero-card {

    grid-column: 1 / -1;

    align-items: center;

    text-align: center;

  }

  #tab-reportes .reports-kpi-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .reports-bars-grid {

    grid-template-columns: 1fr !important;

  }

  #tab-recargas .recharge-header-box,

  #tab-cuadre .cuadre-header-banner,

  #tab-reportes .reports-header-banner {

    flex-direction: column;

    align-items: flex-start;

  }

  .recharge-header-kpis,

  .cuadre-header-actions,

  .reports-header-controls {

    width: 100%;

    flex-wrap: wrap;

  }

  #tab-recargas .recharge-amount-chips {

    grid-template-columns: repeat(4, 1fr) !important;

  }

  .pos-bottom-status-bar {

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    padding: 8px 10px;

  }

  .bottom-bar-left,

  .bottom-bar-right {

    width: 100%;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 6px;

    font-size: 11px;

  }

}













/* =========================================================

   Jerarquía de cajero móvil

   El total y "Imprimir ticket" van primero; las acciones

   secundarias quedan en dos columnas para no obligar a

   desplazarse hasta el final para cobrar.

   ========================================================= */

@media (max-width: 820px) {

  .sale-inputs-bar {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    align-items: center;

    gap: 8px;

  }

  .sale-inputs-bar .input-play-number,

  .sale-inputs-bar .input-play-amount {

    width: 100%;

    min-width: 0;

  }

  .sale-inputs-bar .detected-play-badge,

  .sale-inputs-bar .btn-add-play {

    grid-column: 1 / -1;

  }

  .sale-inputs-bar .detected-play-badge {

    justify-self: start;

  }

  .sale-inputs-bar .btn-add-play {

    min-height: 44px;

  }



  .sale-actions-sidebar {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;

  }

  .sale-actions-sidebar .total-display-card {

    grid-column: 1 / -1;

    order: -2;

  }

  .sale-actions-sidebar .btn-facturar-primary {

    grid-column: 1 / -1;

    order: -1;

    height: 40px;

    min-height: 40px;

    margin: 2px 0 6px 0;

    font-size: 13px;

    gap: 8px;

  }

  .sale-actions-sidebar .super-pale-drawer {

    grid-column: 1 / -1;

  }

  .sale-actions-sidebar .btn-action-tool {

    min-height: 44px;

    margin: 0;

  }

}



/* =========================================================

   Menú lateral en pantallas bajas (escritorio pequeño):

   los botones de Calculadora y Apagar pasan a fila compacta

   para que el menú completo quepa sin cortarse.

   ========================================================= */

@media (min-width: 821px) and (max-height: 720px) {

  .pos-sidebar {

    overflow-y: auto;

  }

  .pos-nav-btn {

    height: 32px;

  }

  .pos-big-btn {

    height: 40px;

    flex-direction: row;

    justify-content: flex-start;

    gap: 7px;

    padding: 0 9px;

  }

  .pos-big-btn img {

    width: 18px;

    height: 18px;

  }

}





/* ============================================================== */

/* ESTILOS DE TECLADO NUMÉRICO TÁCTIL (TOUCH POS)                 */

/* ============================================================== */



.btn-toggle-numpad {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  width: 100%;

  height: 32px;

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  color: #1e293b;

  font-size: 11.5px;

  font-weight: 700;

  cursor: pointer;

  margin-top: 6px;

  margin-bottom: 4px;

  transition: all 0.15s ease;

}

.btn-toggle-numpad:hover {

  background: #e2e8f0;

  border-color: #94a3b8;

}

.btn-toggle-numpad.active {

  background: #0284c7;

  color: #ffffff;

  border-color: #0369a1;

}



.pos-touch-numpad {

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 8px;

  margin-top: 6px;

  margin-bottom: 6px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.06);

}

.touch-numpad-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 6px;

  margin-bottom: 6px;

  border-bottom: 1px solid #e2e8f0;

  font-size: 11px;

  font-weight: 700;

  color: #475569;

  text-transform: uppercase;

}

.touch-numpad-close {

  background: none;

  border: none;

  font-size: 13px;

  font-weight: 700;

  color: #64748b;

  cursor: pointer;

  padding: 0 4px;

}

.touch-numpad-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 6px;

}

.touch-key {

  height: 42px;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  font-size: 16px;

  font-weight: 700;

  color: #0f172a;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  user-select: none;

  touch-action: manipulation;

  font-variant-numeric: tabular-nums;

  box-shadow: 0 1px 2px rgba(0,0,0,0.04);

  transition: background-color 0.1s, transform 0.05s;

}

.touch-key:active {

  background: #e2e8f0;

  transform: scale(0.97);

}

.touch-key-fn {

  background: #f1f5f9;

  color: #334155;

  font-size: 13px;

  border-color: #94a3b8;

}

.touch-key-star {

  background: #fef3c7;

  color: #92400e;

  border-color: #fde68a;

  font-size: 18px;

}

.touch-key-enter {

  background: #0284c7;

  color: #ffffff;

  border-color: #0369a1;

  font-size: 13px;

  font-weight: 800;

}

.touch-key-enter:active {

  background: #0369a1;

}



/* Fechas en Cuadre y Reportes */

.cuadre-date-input, .reports-date-input {

  height: 28px;

  padding: 0 8px;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  font-size: 12px;

  font-family: inherit;

  font-variant-numeric: tabular-nums;

  background: #ffffff;

  color: #0f172a;

}

.cuadre-date-input:focus, .reports-date-input:focus {

  outline: none;

  border-color: #0284c7;

  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);

}



.reports-date-picker-wrap {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-right: 6px;

}

.reports-date-label {

  font-size: 11.5px;

  font-weight: 700;

  color: #475569;

}



/* Tabla de Arqueo por Denominaciones */

.cuadre-deno-table-wrap {

  margin-top: 10px;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  overflow: hidden;

  background: #ffffff;

}

.cuadre-deno-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 11.5px;

  font-variant-numeric: tabular-nums;

}

.cuadre-deno-table th {

  background: #f1f5f9;

  color: #334155;

  font-weight: 700;

  padding: 6px 8px;

  border-bottom: 1px solid #cbd5e1;

  text-align: left;

}

.cuadre-deno-table td {

  padding: 5px 8px;

  border-bottom: 1px solid #f1f5f9;

  vertical-align: middle;

}

.cuadre-deno-table tr:last-child td {

  border-bottom: none;

}

.cuadre-deno-table tr:hover {

  background: #f8fafc;

}

.deno-badge {

  display: inline-block;

  padding: 2px 6px;

  border-radius: 4px;

  font-size: 10.5px;

  font-weight: 700;

  font-variant-numeric: tabular-nums;

}

.deno-billete {

  background: #e0f2fe;

  color: #0369a1;

  border: 1px solid #bae6fd;

}

.deno-moneda {

  background: #fef3c7;

  color: #92400e;

  border: 1px solid #fde68a;

}

.cuadre-deno-qty {

  width: 70px;

  height: 24px;

  padding: 0 6px;

  border: 1px solid #cbd5e1;

  border-radius: 4px;

  font-size: 12px;

  font-weight: 700;

  text-align: right;

  font-variant-numeric: tabular-nums;

  font-family: inherit;

}

.cuadre-deno-qty:focus {

  outline: none;

  border-color: #0284c7;

  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);

}

.cuadre-deno-sub {

  font-weight: 700;

  color: #0f172a;

}

.btn-save-arqueo {

  width: 100%;

  margin-top: 8px;

  padding: 8px 12px;

  background: #0284c7;

  color: #ffffff;

  border: 1px solid #0369a1;

  border-radius: 6px;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}

.btn-save-arqueo:hover {

  background: #0369a1;

}



/* Serial en recibo térmico */

.receipt-serial-badge {

  font-size: 10.5px;

  font-weight: 800;

  font-family: monospace;

  background: #f1f5f9;

  border: 1px dashed #64748b;

  padding: 2px 6px;

  margin: 2px 0 4px 0;

  display: inline-block;

  letter-spacing: 0.5px;

  color: #0f172a;

}

.receipt-lottery-status-tag {

  font-size: 9.5px;

  font-weight: 800;

  padding: 1px 4px;

  border-radius: 3px;

  margin-left: 4px;

  text-transform: uppercase;

}

.tag-anulada {

  background: #fee2e2;

  color: #b91c1c;

  border: 1px solid #fca5a5;

}

.tag-pagada {

  background: #dcfce7;

  color: #15803d;

  border: 1px solid #86efac;

}



/* Modal de Anulación de Ticket */

.cancel-ticket-dialog {

  max-width: 520px !important;

  width: 95% !important;

}

.cancel-ticket-header {

  background: #dc2626 !important;

  color: #ffffff !important;

}

.cancel-opt-box {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  padding: 10px 12px;

  margin-bottom: 12px;

}

.cancel-radio-label {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  font-weight: 600;

  color: #1e293b;

  cursor: pointer;

  margin-bottom: 6px;

}

.cancel-radio-label:last-child {

  margin-bottom: 0;

}

.cancel-warning-box {

  background: #fef2f2;

  border: 1px solid #fecaca;

  border-radius: 6px;

  padding: 10px;

  font-size: 12px;

  color: #991b1b;

  line-height: 1.4;

  margin-bottom: 12px;

  display: none;

}

.cancel-warning-box.active {

  display: block;

}

.cancel-lottery-select {

  width: 100%;

  height: 32px;

  padding: 0 8px;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  font-size: 12px;

  font-weight: 600;

  color: #0f172a;

  background: #ffffff;

  margin-top: 4px;

}

.cancel-input-text {

  width: 100%;

  height: 34px;

  padding: 0 10px;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  font-size: 12.5px;

  font-family: inherit;

  color: #0f172a;

  background: #ffffff;

}

.cancel-input-text:focus {

  outline: none;

  border-color: #dc2626;

  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);

}

.btn-cancel-execute {

  background: #dc2626;

  color: #ffffff;

  border: 1px solid #b91c1c;

  border-radius: 6px;

  padding: 8px 16px;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

}

.btn-cancel-execute:disabled {

  background: #94a3b8;

  border-color: #64748b;

  cursor: not-allowed;

}

.btn-cancel-execute:hover:not(:disabled) {

  background: #b91c1c;

}





/* ============================================================== */

/* ESTILOS DE MODAL Y TARJETA DE ARQUEO DETALLADO                */

/* ============================================================== */



.arqueo-modal-dialog {

  max-width: 640px !important;

  width: 95% !important;

}

.arqueo-modal-header {

  background: #0f172a !important;

  color: #ffffff !important;

}

.arqueo-modal-instruction {

  font-size: 12px;

  color: #475569;

  margin: 0 0 12px 0;

  line-height: 1.4;

}

.arqueo-grid-columns {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 12px;

}

@media (max-width: 580px) {

  .arqueo-grid-columns {

    grid-template-columns: 1fr;

  }

}

.arqueo-col-panel {

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  background: #ffffff;

  overflow: hidden;

}

.arqueo-col-title {

  background: #f1f5f9;

  padding: 6px 10px;

  font-size: 11.5px;

  font-weight: 800;

  color: #1e293b;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  border-bottom: 1px solid #cbd5e1;

}

.arqueo-live-comparison-bar {

  display: grid;

  grid-template-columns: 1fr 1fr 1.2fr;

  gap: 8px;

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 10px 12px;

  margin-top: 10px;

  align-items: center;

}

@media (max-width: 580px) {

  .arqueo-live-comparison-bar {

    grid-template-columns: 1fr;

    gap: 6px;

  }

}

.arqueo-comp-item {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.arqueo-comp-lbl {

  font-size: 10px;

  font-weight: 800;

  color: #64748b;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.arqueo-comp-val {

  font-size: 14px;

  font-weight: 800;

  color: #0f172a;

  font-variant-numeric: tabular-nums;

}

.arqueo-comp-diff-item {

  padding: 4px 8px;

  border-radius: 4px;

  border: 1px solid #cbd5e1;

  background: #ffffff;

}

.btn-open-arqueo-modal {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  width: 100%;

  padding: 8px 12px;

  background: #0284c7;

  color: #ffffff;

  border: 1px solid #0369a1;

  border-radius: 6px;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  margin-top: 8px;

  transition: background-color 0.15s ease;

}

.btn-open-arqueo-modal:hover {

  background: #0369a1;

}

.btn-save-arqueo-main {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 8px 18px;

  background: #15803d;

  color: #ffffff;

  border: 1px solid #166534;

  border-radius: 6px;

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;

}

.btn-save-arqueo-main:hover {

  background: #166534;

}

.cuadre-arqueo-summary-strip {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  padding: 8px 10px;

  margin-top: 6px;

}





/* ============================================================== */

/* ESTILOS DE ENTREGA DE CUADRE ANTERIOR                          */

/* ============================================================== */



.btn-cuadre-entregar-top {

  height: 32px;

  padding: 0 12px;

  background: #0284c7;

  color: #ffffff;

  border: 1px solid #0369a1;

  border-radius: 6px;

  font-size: 11.5px;

  font-weight: 700;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: background-color 0.15s ease;

}

.btn-cuadre-entregar-top:hover {

  background: #0369a1;

}



.entrega-modal-dialog {

  max-width: 540px !important;

  width: 95% !important;

}

.entrega-modal-header {

  background: #0284c7 !important;

  color: #ffffff !important;

}

.entrega-summary-card {

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 10px 12px;

  margin-top: 8px;

}





/* PARCHE v19: teclado, arqueo, reportes */



/* Teclado numerico tactil: teclas grandes, sin sombras */

.pos-touch-numpad { box-shadow: none; padding: 10px; flex-shrink: 0; }

.touch-numpad-grid { gap: 8px; }

.touch-key { height: 54px; font-size: 22px; box-shadow: none; }

.touch-key-fn { font-size: 15px; }

.touch-key-star { font-size: 26px; }

.touch-key-enter { font-size: 16px; letter-spacing: 0.5px; }

.touch-key.is-armed { background: #f59e0b; color: #ffffff; border-color: #b45309; }

@media (max-width: 820px) {

  .touch-key { height: 50px; font-size: 20px; }

}



/* Arqueo: modal grande con botones de cantidad */

.arqueo-modal-dialog { max-width: 880px !important; width: 96% !important; }

.arqueo-modal-instruction { font-size: 13.5px; }

.arqueo-col-title { font-size: 14px; padding: 10px 12px; }

.arqueo-col-panel .cuadre-deno-table { font-size: 14px; }

.arqueo-col-panel .cuadre-deno-table th { padding: 8px 10px; font-size: 12px; }

.arqueo-col-panel .cuadre-deno-table td { padding: 8px 10px; }

.arqueo-col-panel .deno-badge { font-size: 16px; padding: 7px 12px; border-radius: 6px; }

.arqueo-col-panel .cuadre-deno-sub { font-size: 16px; }

.deno-stepper { display: inline-flex; align-items: center; gap: 6px; }

.deno-step-btn {

  width: 44px; height: 44px; border: 1px solid #94a3b8; border-radius: 6px;

  background: #f1f5f9; color: #0f172a; font-size: 24px; font-weight: 800; line-height: 1;

  cursor: pointer; touch-action: manipulation; user-select: none; padding: 0;

}

.deno-step-btn:active { background: #cbd5e1; }

.deno-step-btn.plus { background: #0284c7; border-color: #0369a1; color: #ffffff; }

.deno-step-btn.plus:active { background: #0369a1; }

.arqueo-col-panel .cuadre-deno-qty {

  width: 70px; height: 44px; font-size: 20px; text-align: center; border-radius: 6px;

  -moz-appearance: textfield; appearance: textfield;

}

.arqueo-col-panel .cuadre-deno-qty::-webkit-outer-spin-button,

.arqueo-col-panel .cuadre-deno-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.arqueo-comp-lbl { font-size: 11px; }

.arqueo-comp-val { font-size: 19px; }

.btn-save-arqueo-main { padding: 12px 22px; font-size: 14px; }

@media (max-width: 640px) {

  .deno-step-btn { width: 40px; height: 40px; }

  .arqueo-col-panel .cuadre-deno-qty { width: 56px; }

  .arqueo-col-panel .cuadre-deno-table th:nth-child(3),

  .arqueo-col-panel .cuadre-deno-table td:nth-child(3) { display: none; }

}



/* Reportes: vistas, listas y premios en columnas */

.reports-view-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.rview-btn {

  height: 36px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 6px;

  background: #ffffff; color: #334155; font-size: 12.5px; font-weight: 700; cursor: pointer;

}

.rview-btn.active { background: #1e3a8a; border-color: #1e3a8a; color: #ffffff; }

.reports-list-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; }

.reports-list-summary { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #334155; margin: 4px 0 10px 0; font-variant-numeric: tabular-nums; }

.reports-list-summary b { color: #0f172a; }

.reports-empty { padding: 18px 10px; text-align: center; color: #64748b; font-size: 13px; }

.reports-prizes-card { align-self: stretch; }

.official-results-list { max-height: none !important; overflow: visible !important; display: block !important; }

.prizes-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }

.prizes-table th {

  background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 800; padding: 8px 4px;

  border-bottom: 1px solid #cbd5e1; text-align: center; width: 62px;

}

.prizes-table th:first-child { text-align: left; width: auto; padding-left: 10px; }

.prizes-table td { padding: 6px 4px; border-bottom: 1px solid #f1f5f9; text-align: center; vertical-align: middle; }

.prizes-table td.pz-name { text-align: left; padding-left: 10px; }

.pz-lot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: #0f172a; line-height: 1.2; }

.pz-lot img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.prizes-table .ticker-ball { display: inline-flex; }

.reports-list-card .consultation-table-wrap { overflow-x: auto; }





/* PARCHE v19b: ajustes de tamano */

.pos-touch-numpad { max-width: 540px; width: 100%; margin-left: auto; margin-right: auto; }

.touch-key { height: 46px; font-size: 20px; }

@media (min-height: 900px) { .touch-key { height: 54px; font-size: 22px; } }

@media (max-width: 820px) { .pos-touch-numpad { max-width: none; } .touch-key { height: 50px; } }

.arqueo-col-panel .deno-badge, .arqueo-col-panel .cuadre-deno-sub { white-space: nowrap; }

.arqueo-col-panel .deno-badge { font-size: 15px; padding: 6px 10px; }

.cuadre-panel-left { align-self: start; }

.reports-workspace-grid > * { min-width: 0; }

.bar-labels { flex-wrap: wrap; gap: 2px 8px; }

.reports-lotteries-table-wrap { overflow-x: auto; }





/* PARCHE v19c: detalles */

.touch-key-fn { font-size: 13px; line-height: 1.1; padding: 0 4px; }

.touch-key-fn[title^="Borrar"], .touch-key-fn[title^="Limpiar"] { font-size: 18px; }

.arqueo-col-panel .cuadre-deno-sub { font-size: 14px; }

.arqueo-col-panel .cuadre-deno-table td:last-child, .arqueo-col-panel .cuadre-deno-table th:last-child { padding-right: 14px; }

.arqueo-col-panel .cuadre-deno-qty { width: 64px; }



/* ========================================================= */

/* IMPRESIÓN TÉRMICA MONOCROMÁTICA EPSON TM-T20III (PURO B/N)*/

/* ========================================================= */

.receipt-logo {

  display: block;

  margin: 0 auto 6px auto;

  max-width: 140px;

  max-height: 48px;

  object-fit: contain;

  filter: grayscale(100%) contrast(200%);

}



.thermal-receipt,

.thermal-receipt * {

  color: #000000 !important;

  font-family: 'Courier New', Courier, monospace, system-ui !important;

  box-shadow: none !important;

  text-shadow: none !important;

}



.thermal-receipt {

  background: #ffffff !important;

  border: 1px solid #000000 !important;

  padding: 14px 12px;

}



.thermal-receipt .receipt-lottery-status-tag {

  font-size: 10px;

  font-weight: 800;

  border: 1px solid #000000 !important;

  color: #000000 !important;

  background: #ffffff !important;

  padding: 0 4px;

  border-radius: 2px;

  margin-left: 4px;

}



.thermal-receipt .receipt-barcode {

  color: #000000 !important;

}



.thermal-receipt .receipt-barcode .bar {

  background-color: #000000 !important;

}



@media print {

  body * {

    visibility: hidden !important;

  }

  #thermal-ticket-paper,

  #thermal-ticket-paper * {

    visibility: visible !important;

    color: #000000 !important;

    background: #ffffff !important;

    -webkit-print-color-adjust: exact !important;

    print-color-adjust: exact !important;

  }

  #thermal-ticket-paper {

    position: absolute !important;

    left: 0 !important;

    top: 0 !important;

    width: 100% !important;

    max-width: 80mm !important;

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

  }

  .thermal-ticket-actions,

  .thermal-modal-actions {

    display: none !important;

  }

}


/* ========================================================= */
/* BADGE DE ESTADO EN UNA SOLA FILA (SIN ENVOLVER / WRAP)    */
/* ========================================================= */
.pos-bottom-status-bar .bottom-bar-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.pos-bottom-status-bar .status-beacon-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  border: 1px solid #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 22px !important;
  box-shadow: none !important;
}

.pos-bottom-status-bar .status-beacon-btn:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
}

.pos-bottom-status-bar .status-beacon-btn .status-beacon-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  background-color: #16a34a !important;
  margin: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

.pos-bottom-status-bar .status-beacon-btn .status-text-badge {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  white-space: nowrap !important;
  display: inline !important;
  line-height: 1 !important;
}

.pos-bottom-status-bar .status-beacon-btn.is-offline {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
}

.pos-bottom-status-bar .status-beacon-btn.is-offline .status-beacon-dot {
  background-color: #dc2626 !important;
}

.pos-bottom-status-bar .status-beacon-btn.is-offline .status-text-badge {
  color: #991b1b !important;
}

/* ========================================================= */
/* TECLADO TÁCTIL INTEGRADO EN COLUMNA TRIPLETAS             */
/* ========================================================= */
.table-panel-tripletas-col {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.table-panel-tripletas-col #table-tripletas {
  flex: 1 1 auto !important;
  min-height: 60px !important;
  overflow-y: auto !important;
}

.table-panel-tripletas-col #pos-touch-numpad {
  flex-shrink: 0 !important;
  margin: 6px 0 0 0 !important;
  padding: 8px !important;
  background: #f8fafc !important;
  border-top: 1px solid #cbd5e1 !important;
  border-radius: 0 0 6px 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.table-panel-tripletas-col .touch-numpad-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 4px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
}

.table-panel-tripletas-col .touch-numpad-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
}

.table-panel-tripletas-col .touch-key {
  height: 38px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.1s ease, border-color 0.1s ease !important;
}

.table-panel-tripletas-col .touch-key:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

.table-panel-tripletas-col .touch-key:active {
  background: #e2e8f0 !important;
  transform: translateY(1px) !important;
}

.table-panel-tripletas-col .touch-key-enter {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0369a1 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.table-panel-tripletas-col .touch-key-enter:hover {
  background: #0369a1 !important;
}

.table-panel-tripletas-col .touch-key-star {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.table-panel-tripletas-col .touch-key-star.is-armed {
  background: #f59e0b !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
}

.table-panel-tripletas-col .touch-key-fn {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  padding: 0 2px !important;
}