/* =========================================================================
   KAVUREI - estilosweb.css
   Rediseño visual 2026. Solo CSS: se preservan TODOS los selectores
   originales (clases usadas desde code-behind vía CssClass=""), no se
   agrega ni se quita ningún nombre de clase.
   ========================================================================= */

:root {
    --bg-base: #0a0d12;
    --bg-elev-1: #12161d;
    --bg-elev-2: #1a1f28;
    --bg-elev-3: #232a36;
    --bg-elev-4: #2c3543;

    --border-subtle: rgba(255,255,255,.07);
    --border-medium: rgba(255,255,255,.14);

    --text-primary: #f2f4f7;
    --text-secondary: #aab2c0;
    --text-muted: #707888;

    --accent-green: #17c974;
    --accent-green-dark: #0e9c5a;
    --accent-green-soft: rgba(23,201,116,.14);

    --accent-gold: #ffb800;
    --accent-gold-dark: #d99400;
    --accent-gold-soft: rgba(255,184,0,.16);

    --accent-blue: #3aa0ff;
    --accent-blue-dark: #1c7fd9;

    --accent-red: #ff3b5c;
    --accent-orange: #ff7a3d;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 14px rgba(0,0,0,.40);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.45);

    --ease: cubic-bezier(.2,.7,.3,1);
}

/* =========================================================================
   BASE / RESET
   ========================================================================= */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, Tahoma, Helvetica, Arial, sans-serif;
    margin: 0px 0px 0px 0px;
    height: 100%;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-primary);
    background-color: var(--bg-base);
    background-image:
        radial-gradient(ellipse 1200px 600px at 15% -10%, rgba(23,201,116,.10), transparent 60%),
        radial-gradient(ellipse 1000px 500px at 100% 0%, rgba(58,160,255,.08), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 12.5px;
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, Tahoma, Helvetica, Arial, sans-serif;
    transition: color .15s var(--ease), opacity .15s var(--ease);
}
a:hover { opacity: .85; }

.tablaheader a { color: var(--text-primary); }

TR {
    FONT-SIZE: 12.5px;
    FONT-FAMILY: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, Tahoma, Helvetica, Arial, sans-serif;
}

INPUT, SELECT {
    FONT-SIZE: 12.5px;
    FONT-FAMILY: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, Tahoma, Helvetica, Arial, sans-serif;
    background-color: var(--bg-elev-3);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xs);
    padding: 3px 6px;
}
INPUT:focus, SELECT:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px var(--accent-green-soft);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--bg-elev-4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #38424f; }

img {
    border-radius: var(--radius-xs);
}

/* Blindaje: cualquier <font face="..."> suelto en el markup (o generado por VB)
   no debe poder imponer una tipografía distinta a la del sitio */
font {
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, Tahoma, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   HEADER SUPERIOR — MasterPage.master (Inicio + botones + cuenta)
   ========================================================================= */
.celdainicio { padding-right: 10px; }
.btninicio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 12px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-medium);
    background: rgba(255,255,255,.03);
    transition: background-color .12s var(--ease), color .12s var(--ease);
}
.btninicio::before {
    content: '';
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h6v-6h2v6h6v-8h3z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h6v-6h2v6h6v-8h3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btninicio:hover {
    color: white;
    background: rgba(255,255,255,.08);
}

.celdalogueado {
    display: block;
    width: auto !important;
    float: right;
}
.celdalogueado tr {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    height: auto !important;
}
.celdalogueado td {
    display: block;
    width: auto !important;
}
.celdacuenta {
    margin-left: 6px;
}
.celdacuentaiconos {
    padding-right: 4px;
}
.celdacuentaiconos .cuentapill {
    display: inline-flex;
    margin-left: auto;
}

.cuentapill {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 300px;
    max-width: 300px;
    box-sizing: border-box;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-medium);
    border-radius: 24px;
    padding: 5px 14px 5px 5px;
}
.cuentapill-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
    flex: 0 0 auto;
    position: relative;
}
.cuentapill-avatar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%);
    background: white;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cuentapill-datos {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
    min-width: 0;
    overflow: hidden;
}
.cuentapill-nombre {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cuentapill-saldos {
    font-size: 9.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cuentapill-saldos span:not(.cuentapill-etiqueta):not(.cuentapill-sep) {
    color: var(--accent-gold);
    font-weight: 700;
}
.cuentapill-etiqueta {
    color: var(--text-muted);
    font-weight: 500;
}
.cuentapill-sep {
    color: var(--border-medium);
    margin: 0 2px;
}

/* =========================================================================
   MODERNIZACIÓN DE BARRAS Y PANELES SIN TOCAR MARCADO
   (se apunta por atributo bgcolor / style ya presentes en MasterPage.master,
   detalledeporte.aspx, destacados.ascx y menuvivo.ascx)
   ========================================================================= */
table[bgcolor="#4a4a4a"] {
    background: linear-gradient(180deg, #171c24, #10141a) !important;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

table[bgcolor="#333333"] {
    background: var(--bg-elev-1) !important;
    border-radius: var(--radius-md);
}

td[bgcolor="#5E5E5E"] {
    background: linear-gradient(90deg, transparent, var(--border-medium), transparent) !important;
}

table[style*="border-radius:7px"] {
    background: var(--bg-elev-1) !important;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.celdaiconomenu {
    height: 78px;
    padding-top: 6px;
}
.celdaiconomenu b font {
    display: inline-block;
    max-width: 62px;
    line-height: 12px;
    margin-top: 4px;
}

/* =========================================================================
   BADGE DE EQUIPO (gral.equipobadge) — imagen real si existe en /imagescat/,
   si no, iniciales con color determinístico por nombre
   ========================================================================= */
.teambadge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    color: white;
    vertical-align: middle;
    margin: 0 3px;
    letter-spacing: .2px;
    box-sizing: border-box;
}
.teambadge-img {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin: 0 3px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-subtle);
    box-sizing: border-box;
}
.teambadge-c0 { background: linear-gradient(135deg, #17c974, #0e9c5a); }
.teambadge-c1 { background: linear-gradient(135deg, #ffb800, #d99400); }
.teambadge-c2 { background: linear-gradient(135deg, #3aa0ff, #1c7fd9); }
.teambadge-c3 { background: linear-gradient(135deg, #ff7a3d, #d9581c); }
.teambadge-c4 { background: linear-gradient(135deg, #ff5c78, #c3153a); }
.teambadge-c5 { background: linear-gradient(135deg, #a06bff, #6f3fd9); }

.teambadge-lg {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 13px;
}

.vsdestacado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 185px;
    height: 145px;
    background:
        radial-gradient(ellipse 160px 100px at 20% 15%, rgba(23,201,116,.25), transparent 60%),
        radial-gradient(ellipse 160px 100px at 85% 90%, rgba(255,184,0,.18), transparent 60%),
        linear-gradient(135deg, #171c24, #0d1016);
}
.vsdestacado-equipo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 82%;
    padding-right: 26px;
    box-sizing: border-box;
}
.vsdestacado-nombre {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.vsdestacado-divisor {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* =========================================================================
   ÍCONOS DE DEPORTE / MENÚ (icoprincipal.jpg, icomenuvivo.jpg, icomenuN.jpg)
   Los archivos ahora vienen en mayor resolución (168x168) para verse
   nítidos; se fija el tamaño de despliegue por CSS para no romper el
   layout de las celdas fijas que ya trae el marcado.
   ========================================================================= */
img[src*="icoprincipal."],
img[src*="icomenuvivo."],
img[src*="icomenu1."],
img[src*="icomenu2."],
img[src*="icomenu3."],
img[src*="icomenu5."],
img[src*="icomenu8."],
img[src*="icomenu9."],
img[src*="icomenu10."],
img[src*="icomenu11."],
img[src*="icomenu12."],
img[src*="icomenu16."],
img[src*="icomenu17."] {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 50%;
    transition: transform .15s var(--ease), filter .15s var(--ease);
}
a:hover > img[src*="icoprincipal."],
a:hover > img[src*="icomenuvivo."],
a:hover > img[src*="icomenu1."],
a:hover > img[src*="icomenu2."],
a:hover > img[src*="icomenu3."],
a:hover > img[src*="icomenu5."],
a:hover > img[src*="icomenu8."],
a:hover > img[src*="icomenu9."],
a:hover > img[src*="icomenu10."],
a:hover > img[src*="icomenu11."],
a:hover > img[src*="icomenu12."],
a:hover > img[src*="icomenu16."],
a:hover > img[src*="icomenu17."] {
    transform: translateY(-2px) scale(1.06);
    filter: brightness(1.08);
}

/* =========================================================================
   BOTONES
   ========================================================================= */
.boton1 {
    FONT-WEIGHT: 600;
    FONT-SIZE: 11px;
    BACKGROUND-COLOR: var(--bg-elev-3);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    transition: background-color .15s var(--ease), transform .1s var(--ease);
}
.boton1:hover { background-color: var(--bg-elev-4); }
.boton1:active { transform: translateY(1px); }

.botoncambio {
    FONT-WEIGHT: 600;
    FONT-SIZE: 11px;
    color: #241a00;
    background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-dark));
    border: none;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
}

.botonnar {
    FONT-WEIGHT: 600;
    FONT-SIZE: 11px;
    color: white;
    background: linear-gradient(180deg, var(--accent-orange), #d9581c);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 4px 10px;
}

.btnhomesel { color: var(--text-primary); font-weight: 700; }
.btnhomeNOsel { color: var(--text-muted); }

.botonverde {
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .2px;
    color: #04150c;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #22e58b, var(--accent-green-dark));
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    margin: 0 3px;
    white-space: nowrap;
    transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s var(--ease);
}
.botonverde:hover { filter: brightness(1.08); box-shadow: var(--shadow-md); }
.botonverde:active { transform: translateY(1px); }

.botonyellow {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    border-radius: var(--radius-sm);
    color: #241a00;
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: filter .12s var(--ease);
}
.botonyellow:hover { filter: brightness(1.06); }

.botonceleste {
    padding: 4px 10px;
    font-size: 11px;
    line-height: normal;
    border-radius: var(--radius-sm);
    color: white;
    background: linear-gradient(180deg, #58b4ff, var(--accent-blue-dark));
    border: none;
    cursor: pointer;
}

.botonazul {
    padding: 5px 12px;
    font-size: 11px;
    line-height: normal;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--bg-elev-3);
    border: 1px solid var(--accent-red);
    cursor: pointer;
    position: relative;
    padding-left: 20px;
    transition: background-color .15s var(--ease);
}
.botonazul:hover { background: var(--bg-elev-4); }
.botonazul::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--accent-red);
    box-shadow: 0 0 0 0 rgba(255,59,92,.6);
    animation: livepulse 1.6s infinite;
}

.btngris {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 18px;
    color: var(--text-primary);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    margin-left: .3em;
    box-shadow: var(--shadow-sm);
}

.btnamarillo {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 18px;
    color: #241a00;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
    border: none;
    border-radius: var(--radius-sm);
    margin-left: .3em;
    box-shadow: var(--shadow-sm);
}

.botonmenuizq {
    FONT-WEIGHT: 700;
    FONT-SIZE: 11px;
    WIDTH: 165px;
    COLOR: var(--text-primary);
    BACKGROUND-COLOR: var(--bg-elev-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.botonmini1 {
    FONT-SIZE: 10px;
    BACKGROUND-COLOR: var(--accent-gold);
    color: #241a00;
    font-weight: 700;
    border-radius: var(--radius-xs);
    cursor: pointer;
}

.boton2 {
    FONT-WEIGHT: 700;
    FONT-SIZE: 11px;
    BACKGROUND-COLOR: var(--accent-red);
    color: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.botongris {
    FONT-WEIGHT: 600;
    FONT-SIZE: 11px;
    BACKGROUND-COLOR: var(--bg-elev-3);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.botongrisosc {
    FONT-WEIGHT: 700;
    FONT-SIZE: 11px;
    color: var(--text-primary);
    BACKGROUND-COLOR: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    cursor: pointer;
}

.botonred {
    FONT-SIZE: 11px;
    BACKGROUND-COLOR: var(--accent-red);
    color: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.botoningresar {
    border: 1px solid var(--accent-green);
    COLOR: var(--accent-green);
    BACKGROUND-COLOR: var(--bg-elev-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.botonlog, .botonapostar {
    border: 1px solid var(--border-medium);
    COLOR: white;
    BACKGROUND-COLOR: var(--bg-elev-3);
    border-radius: var(--radius-sm);
}

.botonbuscultres {
    border: 1px solid var(--border-medium);
    FONT-SIZE: 11px;
    COLOR: white;
    BACKGROUND-COLOR: var(--accent-red);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.botonmobile {
    color: #241a00;
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    border: none;
}

/* =========================================================================
   PAGINADOR
   ========================================================================= */
.PagerNormal {
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xs);
    padding: 2px 6px;
    text-decoration: none;
}
.PagerCurrent {
    color: #241a00;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background-color: var(--accent-gold);
    font-weight: 700;
}

/* =========================================================================
   PANELES / DEGRADÉS
   ========================================================================= */
.degrayellow {
    padding: 2px 6px;
    font-size: 11px;
    line-height: normal;
    color: #241a00;
    border-radius: var(--radius-xs);
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
}

.detallegrupo {
    background: var(--bg-elev-2);
    height: 22px;
    width: 50%;
    border-radius: var(--radius-xs);
}
.detallegrupo_alt {
    background: var(--bg-elev-3);
    height: 22px;
    width: 50%;
    border-radius: var(--radius-xs);
}

.fondolinkdeporteheader {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: var(--radius-xs);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.fondolinkdeporteheader:hover {
    border-radius: var(--radius-xs);
    color: white;
    background-color: var(--accent-green-dark);
    padding: 4px 6px;
}

.degragris {
    background: linear-gradient(180deg, #14181f, #0a0d12);
}

.degragrisDIAG1 { background-color: var(--bg-elev-3); }
.degragrisDIAG2 { background-color: var(--bg-elev-2); }
.degragrisDIAG3 {
    background: linear-gradient(90deg, var(--bg-elev-3), var(--bg-elev-2));
}
.degragrisDIAG4 {
    background: linear-gradient(90deg, var(--bg-elev-2), var(--bg-elev-1));
}

.degraVerdeAnegroHOME {
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
}
.degraverdeDIAG1 {
    background: linear-gradient(90deg, var(--accent-green), var(--accent-green-dark));
}

.degranegro {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    color: white;
    border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
}

.degraorange {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    color: #2a1400;
    border-radius: var(--radius-xs);
    background: linear-gradient(180deg, #ffb066, var(--accent-orange));
}

.tablatipolinea {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    color: #241a00;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
}

.degrabordo {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    color: white;
    border-radius: var(--radius-xs);
    background: linear-gradient(180deg, #ff6a3d, #c3271a);
}

.degraceleste {
    padding: 2px 10px;
    font-size: 11px;
    line-height: normal;
    border-radius: var(--radius-sm);
    color: white;
    background: linear-gradient(180deg, #58b4ff, var(--accent-blue-dark));
}

.degraazul {
    padding: 2px 10px;
    font-size: 11px;
    line-height: normal;
    border-radius: var(--radius-sm);
    color: white;
    background: linear-gradient(180deg, var(--bg-elev-3), var(--accent-blue-dark));
}

.iconfecha {
    margin-left: 3px;
    margin-right: 3px;
    padding: 2px 4px;
    display: inline-block;
    font-size: 11px;
    width: auto;
    min-width: 46px;
    white-space: nowrap;
    text-align: center;
    line-height: normal;
    color: var(--text-primary);
    background: var(--bg-elev-2);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
}
.iconhora {
    margin-left: 3px;
    margin-right: 3px;
    padding: 2px 4px;
    display: inline-block;
    font-size: 11px;
    width: auto;
    min-width: 36px;
    white-space: nowrap;
    text-align: center;
    line-height: normal;
    color: var(--text-primary);
    background: var(--bg-elev-2);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
}

/* =========================================================================
   TIPOGRAFÍA / TÍTULOS / LINKS DE MENÚ
   ========================================================================= */
.linkmenuizq {
    FONT-WEIGHT: 700;
    FONT-SIZE: 3.5mm;
    TEXT-DECORATION: none;
    color: var(--text-primary);
}
.menudeportes {
    FONT-WEIGHT: 700;
    FONT-SIZE: 2.7mm;
    TEXT-DECORATION: none;
    color: var(--text-primary);
}
.linktabmicuenta {
    FONT-WEIGHT: 700;
    FONT-SIZE: 2.7mm;
    TEXT-DECORATION: none;
    color: var(--text-primary);
}
.linkmenubarra {
    FONT-WEIGHT: 700;
    FONT-SIZE: 3mm;
    TEXT-DECORATION: none;
    color: var(--text-primary);
}
.linkmenubarrafooter {
    FONT-SIZE: 3mm;
    COLOR: var(--text-muted);
    TEXT-DECORATION: none;
}
.titu1 {
    FONT-WEIGHT: 800;
    FONT-SIZE: 4.2mm;
    COLOR: var(--accent-gold);
    letter-spacing: .2px;
}
.titu2 {
    FONT-WEIGHT: 700;
    FONT-SIZE: 3.5mm;
    COLOR: var(--text-primary);
}
.mini {
    FONT-SIZE: 8pt;
    COLOR: var(--text-muted);
}
.mini2 {
    FONT-SIZE: 8pt;
    COLOR: var(--accent-blue);
}
.linknone {
    FONT-WEIGHT: 700;
    FONT-SIZE: 11px;
    TEXT-DECORATION: none;
    color: var(--text-primary);
}
.inputmini {
    FONT-SIZE: 9px;
    COLOR: var(--text-primary);
    background-color: var(--bg-elev-3);
}
.linkeventos {
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 500;
}
.eventosarbol {
    FONT-SIZE: 11px;
    COLOR: var(--text-primary);
}
.ultresult {
    FONT-SIZE: 11px;
    color: var(--text-primary);
}
.inputloginheader {
    FONT-SIZE: 11px;
    COLOR: var(--text-primary);
    background-color: var(--bg-elev-3);
}
.linkheader {
    FONT-SIZE: 11px;
    TEXT-DECORATION: none;
    color: var(--text-primary);
}
.comboultresult {
    FONT-SIZE: 11px;
}
.tituhome {
    FONT-SIZE: 11px;
    COLOR: var(--text-secondary);
}
.linktv {
    FONT-SIZE: 11px;
    COLOR: var(--accent-blue);
    TEXT-DECORATION: none;
}
.statuspanel {
    FONT-SIZE: 11px;
    BACKGROUND-COLOR: transparent;
}
.dettitulocategoria {
    COLOR: white;
    BACKGROUND-COLOR: var(--bg-elev-1);
    border-radius: var(--radius-xs);
}
.detvalores {
    FONT-SIZE: 9pt;
    COLOR: #241a00;
    BACKGROUND-COLOR: var(--accent-gold);
    border-radius: var(--radius-xs);
}
.destacadoslineas {
    vertical-align: top;
}

/* =========================================================================
   ETIQUETAS DE RESULTADO (gana / pierde / cta cte)
   ========================================================================= */
.label {
    border: 1px solid var(--border-medium);
    FONT-WEIGHT: 700;
    FONT-SIZE: 11px;
    COLOR: var(--text-primary);
    background-color: var(--bg-elev-2);
    border-radius: var(--radius-xs);
    TEXT-ALIGN: right;
    padding: 2px 6px;
}
.labelperdio {
    border: 1px solid rgba(255,59,92,.4);
    FONT-WEIGHT: 700;
    FONT-SIZE: 11px;
    COLOR: white;
    BACKGROUND-COLOR: rgba(255,59,92,.18);
    border-radius: var(--radius-xs);
    TEXT-ALIGN: right;
    padding: 2px 6px;
}
.labelgano {
    border: 1px solid rgba(23,201,116,.5);
    FONT-WEIGHT: 700;
    FONT-SIZE: 10pt;
    COLOR: white;
    BACKGROUND-COLOR: rgba(23,201,116,.20);
    border-radius: var(--radius-xs);
    TEXT-ALIGN: right;
    padding: 2px 6px;
}
.labelctacte {
    border: 1px solid var(--border-medium);
    FONT-SIZE: 11px;
    COLOR: var(--accent-blue);
    border-radius: var(--radius-xs);
    TEXT-ALIGN: right;
    padding: 2px 6px;
}
.label2 {
    border: none;
    COLOR: #12151a;
    BACKGROUND-COLOR: #f2f4f7;
    border-radius: var(--radius-xs);
}
.importecarrito {
    background-color: var(--bg-elev-3);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-medium);
    color: white;
    font-weight: 700;
    padding: 2px 6px;
}

/* =========================================================================
   GRILLA DE LÍNEAS / CUOTAS (lo más visible del sitio)
   ========================================================================= */
.lineacatpadre {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    color: white;
    width: 100%;
    height: 32px;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    background: linear-gradient(180deg, var(--accent-green), var(--accent-green-dark));
}

.celdalineas { text-align: right; }

.valorlinea {
    border-style: none;
    cursor: pointer;
    color: white;
    font-weight: 700;
    width: 54px;
    display: inline-block;
    text-align: center;
    padding: 5px 6px;
    margin: 2px;
    border-radius: var(--radius-xs);
    background: var(--bg-elev-3);
    transition: background-color .12s var(--ease), transform .1s var(--ease);
}
.valorlinea:hover {
    cursor: pointer;
    background-color: var(--accent-green-dark);
    color: white;
    transform: translateY(-1px);
}

.gridlineas {
    background-color: var(--bg-elev-1);
    border: none;
    color: var(--text-primary);
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.gridlineas td {
    border: none;
    padding: 4px 4px;
}
.gridlineas tr {
    color: var(--text-primary);
    height: 27px;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
}
.gridlineas tr:hover {
    background: var(--bg-elev-2);
}
.gridlineas th {
    padding: 6px 4px;
    color: var(--text-secondary);
    background-color: var(--bg-elev-2);
    border-bottom: 1px solid var(--border-medium);
    font-size: .9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.gridlineas .alt { background-color: var(--bg-elev-2); }

.gridlineas .pgr { background-color: var(--bg-elev-2); }
.gridlineas .pgr table { margin: 3px 0; }
.gridlineas .pgr td { border-width: 0; padding: 0 6px; font-weight: 700; color: white; line-height: 14px; }
.gridlineas .pgr a { color: var(--text-muted); text-decoration: none; }
.gridlineas .pgr a:hover { color: white; text-decoration: none; }

.filaevento {
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.tituloapfinpartido {
    background-color: var(--bg-elev-2);
    color: white;
    height: 34px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    border: 1px solid var(--border-subtle);
    transition: background-color .12s var(--ease), border-color .12s var(--ease);
}
.tituloapfinpartido:hover {
    background-color: var(--bg-elev-3);
    border-color: var(--border-medium);
}
.tdequiposevento {
    color: var(--text-primary);
    font-size: 12.5px;
    letter-spacing: .1px;
}
.tdequiposevento b {
    color: var(--text-primary);
}
.tdequiposevento i {
    color: var(--text-muted);
    font-style: normal;
    font-size: 10px;
    margin: 0 2px;
    text-transform: uppercase;
}
.badgevivo {
    display: inline-block;
    background: linear-gradient(180deg, #ff5c78, var(--accent-red));
    color: white;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    padding: 2px 8px 2px 16px;
    border-radius: 20px;
    position: relative;
    vertical-align: middle;
}
.badgevivo::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: white;
    animation: livepulse 1.6s infinite;
}

.titulolinea {
    font-size: 11px;
    font-weight: 700;
    line-height: 27px;
    color: white;
    cursor: pointer;
    background: linear-gradient(180deg, var(--accent-green), var(--accent-green-dark));
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    padding-left: 4px;
}
.titulolineavivo {
    font-size: 11px;
    font-weight: 700;
    line-height: 27px;
    color: #241a00;
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
    cursor: pointer;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    padding-left: 20px;
    position: relative;
}
.titulolineavivo::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--accent-red);
    animation: livepulse 1.6s infinite;
}

.tdequipos {
    color: white;
    font-weight: 700;
}
.tablalineas {
    background-color: var(--bg-elev-1);
    border-radius: var(--radius-md);
}
.trlineas {
    color: white;
    height: 27px;
    background-color: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color .12s var(--ease);
}
.trlineas:hover { background-color: var(--bg-elev-2); }
.tdlineas:hover { background-color: var(--bg-elev-2); }

.celdacuadrito {
    width: 30px;
    text-align: center;
    color: white;
    font-weight: 700;
    background-color: var(--bg-elev-3);
    border-radius: var(--radius-xs);
}

.tituloeventodetalle {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    border-radius: var(--radius-sm);
    color: #241a00;
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
}

/* =========================================================================
   CHECKBOXES REDONDOS
   ========================================================================= */
.roundedOne, .roundedTwo {
    background: linear-gradient(180deg, #2a313d, #1a1f28);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.5);
    border-radius: 50px;
    position: relative;
    margin: 10px auto;
}
.roundedOne { width: 18px; height: 18px; }
.roundedTwo { width: 23px; height: 23px; }

.roundedOne label, .roundedTwo label {
    cursor: pointer;
    position: absolute;
    border-radius: 50px;
    left: 4px;
    top: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.08);
    background: linear-gradient(180deg, #3a4250, #232935);
}
.roundedOne label { width: 10px; height: 10px; }
.roundedTwo label { width: 15px; height: 15px; }

.roundedOne label:after {
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50px;
    top: 2px;
    left: 2px;
    transition: opacity .12s var(--ease);
}
.roundedOne label:hover::after { opacity: .5; }

.roundedTwo label:after {
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 7px;
    height: 4px;
    background: transparent;
    top: 3px;
    left: 3px;
    border: 2px solid var(--accent-green);
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: opacity .12s var(--ease);
}
.roundedTwo label:hover::after { opacity: .7; }

/* =========================================================================
   ACORDEÓN
   ========================================================================= */
.accordion { width: 202px; }

.accordionHeader {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-subtle);
    color: #241a00;
    line-height: 24px;
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-indent: 10px;
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
    cursor: pointer;
    border-radius: var(--radius-xs);
}
.accordionHeaderSelected {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-subtle);
    color: #241a00;
    line-height: 24px;
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-indent: 10px;
    background: linear-gradient(180deg, #ffd447, var(--accent-gold));
    cursor: pointer;
    border-radius: var(--radius-xs);
}
.accordionContent {
    width: 100%;
    color: var(--text-primary);
    margin: 0px;
    padding: 6px;
    background-color: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-top: none;
    text-decoration: none;
}

/* =========================================================================
   TABS (AjaxControlToolkit)
   ========================================================================= */
.ajax__tab_orange-theme .ajax__tab_header .ajax__tab_outer {
    padding: 2px 2px;
    font-size: 11px;
    line-height: normal;
    color: white;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-bottom-width: 0px;
    margin: 0px .2em 0px 0px;
    padding: 1px 0px 1px 0px;
    vertical-align: bottom;
}
.ajax__tab_orange-theme .ajax__tab_header .ajax__tab_tab {
    padding: .4em .9em;
    margin-right: .01em;
    color: var(--text-secondary);
    font-weight: 600;
}
.ajax__tab_orange-theme .ajax__tab_active .ajax__tab_tab {
    color: var(--accent-green);
}
.ajax__tab_orange-theme .ajax__tab_active .ajax__tab_outer {
    background: var(--bg-elev-3);
}

/* =========================================================================
   PANEL "EN VIVO"
   ========================================================================= */
.estilominutosvivo {
    border: none;
    background-color: var(--bg-elev-2);
    height: 22px;
    font-size: 10px;
    border-radius: var(--radius-xs);
    color: var(--accent-gold);
    font-weight: 700;
}
.estilocatparentvivo {
    font-size: 9px;
    background-color: var(--bg-elev-3);
    height: 22px;
    color: var(--text-secondary);
    font-weight: 600;
}
.estiloequiposvivo {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-primary);
    vertical-align: top;
}
.estilotablavivo {
    width: 100%;
    background-color: var(--bg-elev-1);
    padding: 0 0 0 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.estiloscorevivo {
    color: var(--accent-gold);
    font-size: 10px;
    font-weight: 800;
}
.estilotitulovivo {
    font-size: 11px;
    font-weight: 700;
    line-height: 27px;
    color: white;
    background: linear-gradient(180deg, #14345a, #0b2a49);
    cursor: pointer;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    padding-left: 20px;
    position: relative;
}
.estilotitulovivo::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--accent-red);
    animation: livepulse 1.6s infinite;
}
.nombreequipocanchavivo {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
}

@keyframes livepulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,59,92,.65); }
    70%  { box-shadow: 0 0 0 6px rgba(255,59,92,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); }
}

/* =========================================================================
   POPUP
   ========================================================================= */
.PopUpPanel {
    position: fixed;
    background-color: var(--bg-elev-1);
    color: var(--text-primary);
    top: 80px;
    left: 20%;
    z-index: 2001;
    padding: 10px;
    width: 600px;
    max-height: 80%;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-medium);
}

/* =========================================================================
   MOBILE (comparte esta hoja con MobileVersion/login.aspx y clases usadas
   por el resto de las páginas mobile)
   ========================================================================= */
.menumobile {
    color: white;
    height: 32px;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
    padding: 2px 2px 2px 2px;
    font-size: 13px;
}

.lineasmenumobile {
    color: white;
    height: 32px;
    background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev-1));
    border-bottom: 1px solid var(--border-subtle);
    padding: 2px 2px 2px 2px;
    font-size: 13px;
    transition: background-color .12s var(--ease);
}
.lineasmenumobile:hover {
    background: var(--bg-elev-3);
}

.tabshomemobile {
    color: white;
    height: 32px;
    background-color: var(--bg-elev-2);
    border-bottom: 3px solid var(--bg-base);
    padding: 2px 2px 2px 2px;
    font-size: 13px;
}
.tabshomemobile:hover {
    background-color: var(--bg-elev-3);
}

.tituloapfinpartidomobile {
    background-color: var(--bg-elev-2);
    color: white;
    height: 26px;
    border-radius: var(--radius-xs);
}

/* =========================================================================
   OVERLAY / LOADER (definidos también inline en MasterPage.master;
   se conservan tal cual, solo se homogeneiza el color del overlay)
   ========================================================================= */
.overlay {
    background-color: #000000;
}

/* =========================================================================
   HOME (Default.aspx)
   ========================================================================= */
.herohome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 32px 28px;
    margin-bottom: 10px;
    background:
        radial-gradient(ellipse 500px 260px at 12% 20%, rgba(23,201,116,.35), transparent 60%),
        radial-gradient(ellipse 420px 260px at 88% 100%, rgba(255,184,0,.22), transparent 60%),
        linear-gradient(135deg, #12161d, #0a0d12);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    text-align: left;
}
.herohome-content { position: relative; flex: 1 1 auto; min-width: 0; }
.herohome-title {
    margin: 0 0 8px 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: .2px;
}
.herohome-accent {
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.herohome-sub {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.herohome-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.herohome-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 6px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    transition: background-color .12s var(--ease), border-color .12s var(--ease);
}
.herohome-chip:hover {
    background: rgba(255,255,255,.09);
    border-color: var(--border-medium);
    opacity: 1;
}
.herohome-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.herohome-art {
    flex: 0 0 auto;
    width: 220px;
    max-width: 34%;
    opacity: .9;
}
.herohome-art svg {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 640px) {
    .herohome { flex-direction: column; text-align: center; }
    .herohome-chips { justify-content: center; }
    .herohome-art { display: none; }
}
.tabsdeportehome {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 10px 0;
}
.tabdeportehome {
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, Tahoma, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.tabdeportehome:hover {
    background: var(--bg-elev-3);
    color: var(--text-primary);
}
.tabdeportehome.active {
    background: linear-gradient(180deg, var(--accent-green), var(--accent-green-dark));
    color: white;
    border-color: transparent;
}
.panelhome {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}
.tabhomeliga {
    color: var(--text-secondary);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    transition: background-color .12s var(--ease), color .12s var(--ease);
}
.tabhomeliga:hover {
    background: var(--bg-elev-3);
    color: white;
}
.tarjetahomeitem {
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.filacabhomeitem {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}
.filacontenidohomeitem {
    background: var(--bg-elev-1);
    transition: background-color .12s var(--ease);
}
.filahomeitem .filacontenidohomeitem,
.filahomeitemalt .filacontenidohomeitem {
    background: var(--bg-elev-1);
}
.filacontenidohomeitem:hover {
    background: var(--bg-elev-2);
}
.celdahorahomeitem {
    background: var(--bg-elev-3);
    border-radius: var(--radius-xs);
    white-space: nowrap;
    padding: 3px 4px !important;
}

/* =========================================================================
   CANCHA VIVO (canchavivo.ascx)
   ========================================================================= */
.cabcanchavivo {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}

/* =========================================================================
   DETALLE DE PARTIDO (detallepartido.aspx)
   ========================================================================= */
.paneldetallepartido {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cabdetallepartido {
    background: var(--bg-elev-2);
}

/* =========================================================================
   LISTA DE EVENTOS DEL DÍA (listaeventos.aspx)
   ========================================================================= */
.panellistaeventos {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cablistaeventos {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}
.filalistaeventos, .filalistaeventosalt {
    background: var(--bg-elev-1);
}
.filalistaeventosalt {
    background: var(--bg-elev-2);
}

/* =========================================================================
   CATEGORÍAS POR DEPORTE (detalledeporte.aspx)
   ========================================================================= */
.panelcategoriasdeporte {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cabcategoriasdeporte {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}
.panelcategoriascamp {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cabcategoriascamp {
    background: linear-gradient(90deg, var(--accent-gold-dark), var(--accent-gold));
}
.detallebusqueda {
    background: var(--bg-elev-1);
}
.detallebusqueda:hover {
    background: var(--bg-elev-2);
}

/* =========================================================================
   MENÚ VIVO (menuvivo.ascx)
   ========================================================================= */
.filamenudeportesmovil {
    background: var(--bg-elev-1);
}
.filaminutosvivocab {
    background: var(--bg-elev-2);
}
.celdavariantesvivo {
    background: var(--bg-elev-3);
}
.contdetallepartidovivo {
    background: var(--bg-elev-1);
}
.tablalineavivo {
    background: var(--bg-elev-1);
}
.filalineavivo, .filalineavivosec {
    background: var(--bg-elev-2);
    transition: background-color .12s var(--ease);
}
.filalineavivo:hover, .filalineavivosec:hover {
    background: var(--bg-elev-3);
}
.celdaoddvivo, .celdaoddvivosec {
    background: var(--bg-elev-3);
    border-radius: var(--radius-xs);
}

/* =========================================================================
   CARRITO (carrito.ascx)
   ========================================================================= */
.cabcarrito {
    background: linear-gradient(90deg, var(--bg-elev-2), var(--bg-elev-1));
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-left: 3px solid var(--accent-green);
}
.divisorcarrito {
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}
.cajaerrorcarrito {
    background: rgba(255,59,92,.12);
    border: 1px solid rgba(255,59,92,.4);
    border-radius: var(--radius-xs);
}
.panelcombinada {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
}
.filacombinada {
    background: var(--bg-elev-2);
}
.cabdetallecombinada {
    background: var(--bg-elev-3);
}
.paneljugadosesion {
    background: var(--bg-elev-1);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
.filajugadosesion {
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border-subtle);
}

/* =========================================================================
   MENÚ DERECHO (menuderecho.ascx)
   ========================================================================= */
.cabdestacadosmenuder {
    background: var(--bg-elev-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-gold);
}
.filalomasimportantecab {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
    border-radius: var(--radius-xs);
}

/* =========================================================================
   TARJETA DE DESTACADO (destacados.ascx)
   ========================================================================= */
.tarjetadestacadoindiv {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0 6px 10px 0;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.celdaimgdestacado {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.badgedeportedestacado {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    object-fit: cover;
    border: 0.5px solid rgba(10,13,18,.6);
    box-shadow: var(--shadow-sm);
    z-index: 2;
}
.tarjetadestacadoindiv:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.imgdestacadoindiv {
    display: block;
    border-radius: 0;
}
.cabdestacadoindiv {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}
.contdestacadoindiv {
    background: var(--bg-elev-1);
}
.lineadestacadoindiv, .lineadestacadoindivalt {
    background: var(--bg-elev-1);
    transition: background-color .12s var(--ease);
}
.lineadestacadoindivalt {
    background: var(--bg-elev-2);
}
.lineadestacadoindiv:hover, .lineadestacadoindivalt:hover {
    background: var(--bg-elev-3);
}

/* =========================================================================
   DESTACADOS / PRINCIPALES (DetalleGrupoCat.aspx)
   ========================================================================= */
.filacabdestacados {
    background: linear-gradient(90deg, var(--bg-elev-2), var(--bg-elev-1));
    border-left: 3px solid var(--accent-green);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.filaiconosdestacados {
    background: var(--bg-elev-1);
}
.tarjetadestacado {
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.filabrevedestacado {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}
.filadestacado {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.filadestacadofila {
    background: var(--bg-elev-1);
    transition: background-color .12s var(--ease);
}
.filadestacadofila:hover {
    background: var(--bg-elev-2);
}
.celdafechadestacado {
    background: var(--bg-elev-3);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 10px;
}

/* =========================================================================
   MOBILE — MasterPage.master (MobileVersion)
   ========================================================================= */
.headermobile {
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
}
.barracreditomobile {
    background: var(--bg-elev-2);
}
.panelinfomobile {
    background: var(--bg-elev-1);
}
.cajamensajemobile {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-medium);
    border-left: 3px solid var(--accent-green);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.cajamensajemobilecontenido {
    background: var(--bg-elev-1);
    border-radius: var(--radius-md);
}
.celdaoddmobile {
    background: var(--bg-elev-3);
    border-radius: var(--radius-xs);
}
.divisormobile {
    background: var(--border-subtle);
}
.cabeventosdeldiamobile {
    background: var(--bg-elev-2);
    border-radius: var(--radius-sm);
}
.cabsportdeldiamobile {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}
.celdahoradeldiamobile {
    background: var(--bg-elev-3);
}
.cabmercadomobile {
    background: var(--bg-elev-2);
}
.cabpartidomobile {
    background: var(--bg-elev-3);
}
.celdastatresultadomobile {
    background: #f2f4f7;
    border-radius: var(--radius-xs);
}
.paneljugadomobile {
    background: var(--bg-elev-1);
    border-radius: var(--radius-sm);
}
.filaoscuramobile {
    background: var(--bg-elev-1);
}
.cabverdemobile {
    background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green));
}
.cabgrismobile {
    background: var(--bg-elev-2);
}
.panelgrismobile {
    background: var(--bg-elev-1);
    border-radius: var(--radius-sm);
}
.celdaiconodeportemobile {
    background: var(--bg-elev-2);
}
.iconodeportemobile {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 50%;
    vertical-align: middle;
}
/* divisores generados por MasterPage.master.vb (menú desplegable mobile) */
td[bgcolor="#565759"] {
    background: var(--border-subtle) !important;
}

/* =========================================================================
   LOGIN (login.aspx / MobileVersion/login.aspx)
   ========================================================================= */
body.loginpage {
    min-height: 100vh;
    background-color: var(--bg-base);
}
.loginbox {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}
.loginbox font[color="white"] {
    font-weight: 600;
}