/* ==========================================================================
   SBS Admin — estilos
   Colores tomados del sistema original (sbs400.css):
     cabecera  degradado #284ba0 -> #333333
     primario  #337ab7 (borde #2e6da4, hover #286090)
     línea del menú #003eb7, pie #696969 (dimgrey), pestaña inactiva #d5d5d5
   ========================================================================== */
:root {
    --sbs-head-start: #284ba0;
    --sbs-head-end: #333333;
    --sbs-primary: #337ab7;
    --sbs-primary-border: #2e6da4;
    --sbs-primary-dark: #286090;
    --sbs-primary-darker: #204d74;
    --sbs-nav-bg: #f8f8f8;
    --sbs-nav-border: #e7e7e7;
    --sbs-nav-line: #003eb7;
    --sbs-footer: #696969;
    --sbs-tab-off: #d5d5d5;
    --sbs-alert: #ff0000;

    /* Bootstrap: se reemplaza el azul por el del sistema */
    --bs-primary: var(--sbs-primary);
    --bs-primary-rgb: 51, 122, 183;
    --bs-link-color: var(--sbs-primary);
    --bs-link-hover-color: var(--sbs-primary-dark);
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn-primary {
    --bs-btn-bg: var(--sbs-primary);
    --bs-btn-border-color: var(--sbs-primary-border);
    --bs-btn-hover-bg: var(--sbs-primary-dark);
    --bs-btn-hover-border-color: var(--sbs-primary-darker);
    --bs-btn-active-bg: var(--sbs-primary-darker);
    --bs-btn-active-border-color: #122b40;
    --bs-btn-disabled-bg: var(--sbs-primary);
    --bs-btn-disabled-border-color: var(--sbs-primary-border);
}

.form-control:focus, .form-select:focus {
    border-color: var(--sbs-primary);
    box-shadow: 0 0 0 .2rem rgba(51, 122, 183, .25);
}

/* ---------- Estructura ---------- */
.sbs-body {
    min-height: 100vh;
    background: #fafafa url("../img/grey.png");
    display: flex;
    flex-direction: column;
}
.sbs-body.has-footer { padding-bottom: 52px; }

.sbs-head {
    background: linear-gradient(to right, var(--sbs-head-start), var(--sbs-head-end));
    color: #fff;
}
.sbs-head-inner {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    padding-bottom: 6px;
}
.sbs-logo { max-height: 54px; max-width: 150px; width: auto; display: block; }
.sbs-logo-link { display: inline-block; line-height: 0; }

.sbs-nav {
    background: var(--sbs-nav-bg);
    border-bottom: 3px solid var(--sbs-nav-line);
    border-top: 1px solid var(--sbs-nav-border);
}
.sbs-nav .nav-link { color: #555; }
.sbs-nav .nav-link:hover,
.sbs-nav .nav-link:focus,
.sbs-nav .show > .nav-link { color: #000; }
.sbs-nav .dropdown-item:active { background: var(--sbs-primary); }
.sbs-nav .btn-link.nav-link { text-decoration: none; }

.sbs-main { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 2rem; }

.sbs-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: var(--sbs-footer);
    color: #fff;
    padding: 7px 0;
    font-size: .95rem;
}
.sbs-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; }

/* ---------- Login ---------- */
.sbs-login-wrap {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}
/* Tarjeta del login (y pantalla de error): ancho limitado y centrada */
.sbs-card { width: 100%; max-width: 520px; border-color: #ddd; }

/* Paneles de las pantallas de administración (Mensajes, Puntos, Operadores, Perfil): ocupan todo el ancho */
.sbs-panel { width: 100%; max-width: none; border-color: #ddd; }
.sbs-card-head {
    background: #f5f5f5;
    color: #333;
    border-bottom-color: #ddd;
}

/* ---------- Home: pestañas de módulos ---------- */
.sbs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 1rem;
}
.sbs-tab {
    flex: 1 1 110px;
    height: 50px;
    border: 1px solid var(--sbs-primary-border);
    border-radius: 4px;
    background: var(--sbs-tab-off);
    color: #000;
    cursor: pointer;
    user-select: none;
}
.sbs-tab:hover { background: #c4c4c4; }
.sbs-tab.active { background: var(--sbs-primary); color: #fff; }

/* ---------- Home: botones con icono ---------- */
.sbs-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    justify-items: center;
}
.sbs-tile {
    width: 100%;
    max-width: 130px;
    min-height: 104px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: .8rem;
    line-height: 1.2;
    color: #333;
    text-decoration: none;
    background: #fff;
    border: 2px solid #fff;
    outline: 1px solid var(--sbs-primary-border);
    border-radius: 4px;
    transition: opacity .15s, box-shadow .15s, transform .15s;
}
.sbs-tile img { width: 52px; height: 52px; object-fit: contain; }
.sbs-tile:hover, .sbs-tile:focus-visible {
    opacity: .92;
    color: #000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}
.sbs-tile[hidden] { display: none; }

@media (max-width: 575.98px) {
    .sbs-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .sbs-tile { min-height: 96px; font-size: .75rem; }
    .sbs-body.has-footer { padding-bottom: 46px; }
}

/* ---------- Mi perfil ---------- */
.sbs-panel-full { height: 100%; }
.perfil-avatar {
    width: 140px; height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    outline: 1px solid var(--sbs-primary-border);
    background: #fff;
}
.perfil-detalle { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.perfil-detalle dt { font-weight: 700; color: #555; font-size: .85rem; }
.perfil-detalle dd { margin: 0; word-break: break-word; }
#perfilApp .btn-link { text-decoration: none; }

/* ---------- Impresión (reportes y tickets) ---------- */
@media print {
    .sbs-head, .sbs-nav, .sbs-footer, .no-print, .modal-backdrop { display: none !important; }
    .sbs-body { background: #fff !important; padding-bottom: 0 !important; }
    .sbs-main { padding: 0 !important; }
    .card, .sbs-panel { border: 0 !important; }
    .table-responsive { overflow: visible !important; }
    /* Al imprimir un ticket solo se muestra el recibo */
    body.imprime-ticket .sbs-main > * { display: none !important; }
    body.imprime-ticket #recRepApp, body.imprime-ticket #recCliApp { display: block !important; }
    body.imprime-ticket #recRepApp > :not(#modalTicket), body.imprime-ticket #recCliApp > :not(#modalRecibo) { display: none !important; }
    body.imprime-ticket #modalTicket, body.imprime-ticket #modalRecibo { position: static !important; display: block !important; opacity: 1 !important; }
    body.imprime-ticket .modal-dialog { margin: 0 !important; max-width: none !important; }
    body.imprime-ticket .modal-content { border: 0 !important; }
}

/* ---------- Tablas: encabezados en gris ---------- */
.table > thead { --bs-table-bg: #d9dde1; --bs-table-color: #212529; }
.table > thead > tr > th,
.table > thead > tr > td {
    background-color: #d9dde1;
    color: #212529;
    border-color: #c3c8cd;
}
.table > thead > tr > th.sbs-th-grupo { background-color: #e9ecef; }   /* fila superior de encabezados agrupados */
.table > tfoot > tr > td,
.table > tfoot > tr > th { background-color: #e9ecef; font-weight: 700; border-color: #c3c8cd; }

@media print {
    .table > thead > tr > th, .table > thead > tr > td, .table > tfoot > tr > td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---------- Tablas: indicador de orden ---------- */
th.sbs-ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sbs-ordenable::after {                 /* columna ordenable, sin orden aplicado */
    content: "\2195";                    /* ↕ */
    margin-left: .4rem;
    font-size: .8em;
    opacity: .35;
}
th.sbs-ordenable:hover::after { opacity: .7; }
th.sbs-ordenable:focus-visible { outline: 2px solid var(--sbs-primary); outline-offset: -2px; }
th.sbs-orden-asc,
th.sbs-orden-desc { background-color: #c5ccd3 !important; }   /* columna activa un poco más oscura */
th.sbs-orden-asc::after  { content: "\25B2"; opacity: 1; color: var(--sbs-primary-dark); }   /* ▲ ascendente */
th.sbs-orden-desc::after { content: "\25BC"; opacity: 1; color: var(--sbs-primary-dark); }   /* ▼ descendente */

@media print {
    th.sbs-ordenable::after { content: none !important; }   /* no se imprimen los iconos */
}

/* Los elementos con el atributo hidden siempre se ocultan (Bootstrap d-flex lo anulaba) */
[hidden] { display: none !important; }

/* ---------- Virtual (colores del sistema anterior: crepcss.css) ---------- */
.res_R { color: #ff0000; font-size: 1.15rem; font-weight: bold; }    /* resultado rojo */
.res_N { color: #000000; font-size: 1.15rem; font-weight: bold; }    /* resultado negro */
.res_V { color: green; font-size: 1.15rem; font-weight: bold; }      /* resultado verde */
.tk_fondo, .table > thead > tr.tk_fondo > th { background-color: #1b5fa8 !important; color: #fff !important; }
.tk_estado0 > td { background-color: #ffffff; }                       /* jugada pendiente */
.tk_estado1 > td { background-color: #7fff00; }                       /* jugada ganadora */
.tk_estado-1 > td { background-color: #ff3333; }                      /* jugada perdedora */
.tk_estado2 > td { background-color: #ffff33; color: #990000; }       /* jugada empatada */
.tk_estado3 > td { background-color: #bbddff; color: #0000ff; }       /* jugada suspendida */
.tk_estado4 > td { background-color: #e0e0e0; color: #666666; }       /* jugada nula */
.tk_fondo_pago { background-color: #e5f2fa; }                          /* montos del ticket (tk_pago_fondo) */
td.rw_estado1 { background-color: #7fff00 !important; }               /* ticket ganador */
td.rw_estado-1 { background-color: #ff3333 !important; }              /* ticket perdedor */
.sbs-chip { font-variant-numeric: tabular-nums; }
.sbs-leyenda { background: #d9dde1; border-radius: 3px; padding: 2px 4px; font-size: .8rem; }

@media print {
    body.imprime-ticket #virApp { display: block !important; }
    body.imprime-ticket #virApp[data-pagina="reporte"] > :not(#modalTicket) { display: none !important; }
    body.imprime-ticket #virApp[data-pagina="anulacion"] * { visibility: hidden; }
    body.imprime-ticket #virApp[data-pagina="anulacion"] #areaTicket,
    body.imprime-ticket #virApp[data-pagina="anulacion"] #areaTicket * { visibility: visible; }
    body.imprime-ticket #virApp[data-pagina="anulacion"] #areaTicket { position: absolute; left: 0; top: 0; }
    /* Recargas : Anulación: solo el ticket */
    body.imprime-ticket #recAnuApp { display: block !important; }
    body.imprime-ticket #recAnuApp * { visibility: hidden; }
    body.imprime-ticket #recAnuApp #areaTicket, body.imprime-ticket #recAnuApp #areaTicket * { visibility: visible; }
    body.imprime-ticket #recAnuApp #areaTicket { position: absolute; left: 0; top: 0; }
    /* Deportiva : Anulación: solo el ticket */
    body.imprime-ticket #depAnuApp { display: block !important; }
    body.imprime-ticket #depAnuApp * { visibility: hidden; }
    body.imprime-ticket #depAnuApp #areaTicket, body.imprime-ticket #depAnuApp #areaTicket * { visibility: visible; }
    body.imprime-ticket #depAnuApp #areaTicket { position: absolute; left: 0; top: 0; }
}

/* ---------- Online: impresión de tickets y recibos ---------- */
@media print {
    body.imprime-ticket #olnApp { display: block !important; }
    body.imprime-ticket #olnApp[data-pagina="reportes"] > :not(#modalTicket),
    body.imprime-ticket #olnApp[data-pagina="tkspagos"] > :not(#modalTicket) { display: none !important; }
    body.imprime-ticket #olnApp[data-pagina="deposito"] * { visibility: hidden; }
    body.imprime-ticket #olnApp[data-pagina="deposito"] #areaTicket,
    body.imprime-ticket #olnApp[data-pagina="deposito"] #areaTicket * { visibility: visible; }
    body.imprime-ticket #olnApp[data-pagina="deposito"] #areaTicket { position: absolute; left: 0; top: 0; }
}

/* ---------- Lotería: color de la fila según el estado (tks_estado de SBS04) e impresión de tickets ---------- */
.lt_estado1 > td, .lt_leyenda.lt_estado1 { background-color: #7fff00; }                 /* ganador */
.lt_estado-1 > td, .lt_leyenda.lt_estado-1 { background-color: #ff3333; }               /* perdedor */
.lt_estado2 > td, .lt_leyenda.lt_estado2 { background-color: #0000ff; color: #fff; }    /* money back */
.lt_estado-2 > td, .lt_leyenda.lt_estado-2 { background-color: #e0e0e0; }               /* nulo */
.lt_leyenda { border-radius: 3px; padding: 1px 6px; }
@media print {
    body.imprime-ticket #lotApp { display: block !important; }
    body.imprime-ticket #lotApp[data-pagina="reportes"] > :not(#modalTicket) { display: none !important; }
    body.imprime-ticket #lotApp[data-pagina="anulacion"] * { visibility: hidden; }
    body.imprime-ticket #lotApp[data-pagina="anulacion"] #areaTicket,
    body.imprime-ticket #lotApp[data-pagina="anulacion"] #areaTicket * { visibility: visible; }
    body.imprime-ticket #lotApp[data-pagina="anulacion"] #areaTicket { position: absolute; left: 0; top: 0; }
}
.lt-hora { min-width: 3.7rem; padding-left: .4rem; padding-right: 1.5rem; background-position: right .3rem center; }

/* Deportiva : Deportes — grados de la oferta: sin canasta se muestran en línea */
#tablaGrados.dep-solo thead { display: none; }
#tablaGrados.dep-solo, #tablaGrados.dep-solo tbody { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; border: 0; }
#tablaGrados.dep-solo tr, #tablaGrados.dep-solo td { display: block; border: 0; padding: 0; }

/* ---------- Deportiva : Empadrona ---------- */
.sbs-empadrona th, .sbs-empadrona td { white-space: nowrap; font-size: .8rem; }
.sbs-empadrona tr.emp-fin > td { border-bottom: 2px solid #6c757d; }
.sbs-empadrona tr.emp-sep > td { padding: 2px; background: transparent; }

/* ---------- Deportiva : Reportes (cdepreportes.asp) ---------- */
.sbs-drp .drp-clic { cursor: pointer; }
.sbs-drp .drp-clic:hover > td { background-color: rgba(13, 110, 253, .08); }
.sbs-drp td.drp-rojo { background-color: #f8d7da; color: #842029; }
.sbs-drp td.drp-amarillo { background-color: #fff3cd; }
.sbs-drp td.drp-verde { background-color: #d1e7dd; }

/* Deportiva : Juegos (cjuegos.asp) */
.jgo-lista .jgo-fila.smforo1 > td { background: #fff8d6; }      /* línea cambiada, falta validar */
.jgo-lista .jgo-fila.smforo0 > td { background: #fde2e2; }      /* juego detenido */
.jgo-lista .jgo-fila.cssedit > td { background: #dff3e4; }      /* H2 en juego */
.jgo-lista .jgo-fila.cssequipo > td { background: #ececec; color: #666; }   /* H2 ya pasó */
.jgo-vis { color: #1f4e9c; font-weight: 600; }
.jgo-home { color: #8a1c1c; font-weight: 600; }
.jgo-oferta { color: brown; }
.jgo-det > td { background: #fff; }
/* width 0 + min-width 100%: la línea no ensancha la tabla de juegos; sus tablas se desplazan dentro (celular) */
.jgo-view, .jgo-edicion { border-left: 3px solid var(--sbs-primary); padding: .25rem; width: 0; min-width: 100%; }
.jgo-edicion { border-left-color: #f0ad4e; background: #fffdf6; }
.jgo-tabla { font-size: .78rem; width: auto; min-width: 100%; }
.jgo-tabla th { background: #e9eef7; text-align: center; white-space: nowrap; padding: .15rem .3rem; }
.jgo-tabla td { text-align: center; white-space: nowrap; padding: .15rem .25rem; }
.jgo-col0 { width: 1%; }
.jgo-in { width: 3.6rem; display: inline-block; padding: .05rem .2rem; font-size: .8rem; border: 1px solid #bbb; border-radius: .2rem; text-align: center; }
.jgo-in.jgo-sel { background: #fff7b3; border-color: #e0a800; }
.jgo-tip { font-size: .78rem; padding: 0 .1rem; border: 1px solid #bbb; border-radius: .2rem; }
.jgo-edit-head .form-select-sm { padding-top: .1rem; padding-bottom: .1rem; }
.jgo-edit-head .jgo-in { width: 3.2rem; }
.jgo-auto { min-width: 4.5rem; font-weight: 600; }
.jgo-mback { background: #eef6ff; }
.jgo-alerta { position: sticky; top: 0; z-index: 5; background: #fff; border: 1px solid #f5c2c7; border-radius: .25rem; padding: .25rem; }
.jgo-calc { max-width: 280px; }
.jgo-calc-lineas { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .5rem; }
.jgo-calc-n { width: 1.2rem; text-align: right; }
.jgo-per-op { white-space: nowrap; }

/* Deportiva : Propuesta (cpropu.asp) */
.prp-cab { background: #e9eef7; }
.prp-tabla { font-size: .85rem; }
.prp-tabla td { border: 0; padding: .1rem .3rem; vertical-align: middle; }
.prp-prop + .prp-prop { border-top: 1px solid #e5e5e5; }
.prp-c1 { width: 2.5rem; } .prp-c2 { width: 2rem; } .prp-c3 { width: 22%; } .prp-c5 { width: 18%; } .prp-c6 { width: 2rem; }
.prp-stoppro td { background: #f6f6f6; }
.prp-form { background: #fffdf6; }
.prp-edit { font-size: .85rem; width: auto; }
.prp-edit th { background: #e9eef7; }
.prp-opcion { min-width: 10rem; }
.prp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .25rem .75rem; font-size: .85rem; }
.prp-op { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Deportiva : Resultados (cresultado.asp / cresul_edit.asp) */
.res-jgo { background: #fff; min-height: 3.2rem; }
.res-jgo:hover { background: #f2f6fc; }
.res-jgo.res-stnull { background: #fff6e5; }
.res-form { border-left: 3px solid #f0ad4e; background: #fffdf6; padding: .25rem; }
.res-cab { background: #e9eef7; border-radius: .25rem; }
.res-status { width: 7rem; }
.res-tabla { font-size: .8rem; width: auto; min-width: 100%; border-collapse: collapse; margin: .25rem 0; }
.res-tabla td { text-align: center; white-space: nowrap; padding: .1rem .2rem; vertical-align: middle; }
.res-tabla .res-hd td, .res-hd { background: #e9eef7; font-weight: 600; }
.res-in { width: 2.6rem; display: inline-block; padding: .05rem .15rem; font-size: .8rem; border: 1px solid #bbb; border-radius: .2rem; text-align: center; }
.res-in:disabled { background: #f3f3f3; }
.res-fmcr { margin: 0 auto; font-size: .7rem; }
.res-fmcr td { padding: 0 .15rem; text-align: center; }
.res-w { width: 1.4rem; text-align: center; }
.res-ot .res-in { margin-top: .1rem; }
.res-props { border: 1px solid #e5e5e5; border-radius: .25rem; }
.res-tabla-prop { font-size: .85rem; }
.res-tabla-prop td { padding: .1rem .4rem; }
.res-pp { min-width: 12rem; }
.res-balance { max-width: 36rem; margin: 0 auto; }

/* Anulación (Lotería, Recargas, Deportiva y Virtual): búsqueda a la izquierda y el ticket a la derecha.
   En celular y tableta (menos de 992px) el ticket va debajo, a todo lo ancho hasta 460px. */
.anu-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: .25rem; }
.anu-ticket { width: 100%; max-width: 460px; margin: 0 auto; }
@media (min-width: 992px) {
    .anu-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); align-items: start; }
    .anu-busqueda { max-width: 640px; }
    .anu-ticket { margin: 0; }
}
@media print {
    .anu-layout { display: block; }
}

/* Puntos : BANCAS, pestaña Deportiva compacta */
.bn-compacto .form-control-sm, .bn-compacto .form-select-sm { padding-top: .15rem; padding-bottom: .15rem; }
.bn-columnas { columns: 10rem auto; column-gap: 1rem; }