los genera el componente Prose → ::deep para alcanzarlos. */ .layout-five[b-p5yf1e29eq] .cf5-desc { font-size: 1rem; line-height: 1.6; text-align: justify; } @media (max-width: 768px) { .cf5-nav[b-p5yf1e29eq] { width: 34px; height: 34px; font-size: 1.2rem; } } /* /Components/Helpers/LayoutFour.razor.rz.scp.css */ .layout-four[b-lco6gmkxeb] { max-width: 900px; margin: 0 auto; } .layout-four .cf4-cover[b-lco6gmkxeb] { width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); display: block; margin: 0 auto 1.25rem; } .layout-four .club-title[b-lco6gmkxeb] { text-align: center; font-size: 1.8rem; margin-bottom: 1.25rem; color: #333; } /* Los
los genera el componente Prose → ::deep para alcanzarlos. */ .layout-four[b-lco6gmkxeb] .cf4-desc { font-size: 1rem; line-height: 1.6; text-align: justify; } .layout-four .cf4-photo[b-lco6gmkxeb] { width: 100%; max-width: 640px; height: auto; display: block; margin: 1rem auto 0; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); } /* /Components/Helpers/LayoutOne.razor.rz.scp.css */ .club-title[b-1kxkxf4ed9] { text-align: center; font-size: 1.8rem; margin-bottom: 2rem; color: #333; } /* Estilo base para todos los párrafos (los
los genera el componente Prose,
por eso ::deep para que el CSS aislado alcance el contenido del hijo). */
.layout-one[b-1kxkxf4ed9] p {
font-size: 1rem;
line-height: 1.6;
text-align: justify;
}
/* Estilo solo para pantallas grandes (desktop) */
@media (min-width: 1024px) {
.layout-one[b-1kxkxf4ed9] p {
font-size: 1.15rem; /* Puedes ajustar a 1.2rem o más si lo deseas */
}
.club-title[b-1kxkxf4ed9] {
font-size: 2rem;
}
}
.layout-one img[b-1kxkxf4ed9] {
display: block;
max-width: 100%;
height: auto;
margin: 10px auto;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Estilo específico para la foto principal */
.layout-one .main-photo[b-1kxkxf4ed9] {
height: 100%;
max-width: 800px;
object-fit: cover;
margin-bottom: 12px;
}
/* Estilo para fotos intermedias */
.layout-one .inline-photo[b-1kxkxf4ed9] {
width: 100%;
max-width: 600px;
height: auto;
margin: 10px auto;
}
/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
.layout-one .main-photo[b-1kxkxf4ed9] {
max-width: 400px;
max-height: 100%;
object-fit: contain;
}
.layout-one .inline-photo[b-1kxkxf4ed9] {
max-width: 100%;
max-height: 250px;
object-fit: contain;
}
}
/* /Components/Helpers/LayoutTwo.razor.rz.scp.css */
.layout-two[b-llfhrgvgwl] {
max-width: 900px;
margin: 0 auto;
padding: 1rem;
}
.layout-two .main-photo[b-llfhrgvgwl] {
width: 100%;
max-height: 400px;
object-fit: cover;
margin-bottom: 1rem;
border-radius: 8px;
}
/* Estilo base para todos los párrafos (generados por el componente Prose → ::deep) */
.layout-two[b-llfhrgvgwl] p {
font-size: 1rem;
line-height: 1.6;
text-align: justify;
}
/* Estilo solo para pantallas grandes (desktop) */
@media (min-width: 1024px) {
.layout-two[b-llfhrgvgwl] p {
font-size: 1.15rem; /* Puedes ajustar a 1.2rem o más si lo deseas */
}
.club-title[b-llfhrgvgwl] {
font-size: 2rem;
}
}
.club-title[b-llfhrgvgwl] {
text-align: center;
font-size: 1.8rem;
margin-bottom: 2rem;
color: #333;
}
.text-photo-block[b-llfhrgvgwl] {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.text-photo-block.right[b-llfhrgvgwl] {
flex-direction: row;
}
.text-photo-block[b-llfhrgvgwl] p {
flex: 1;
text-align: justify;
}
.side-photo[b-llfhrgvgwl] {
width: 40%;
max-width: 300px;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.centered-photo[b-llfhrgvgwl] {
text-align: center;
margin: 2rem 0;
}
.center-photo[b-llfhrgvgwl] {
max-width: 100%;
max-height: 300px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.text-block[b-llfhrgvgwl] p {
text-align: justify;
margin-bottom: 2rem;
}
/* Responsivo para móvil */
@media (max-width: 768px) {
.text-photo-block[b-llfhrgvgwl] {
flex-direction: column;
align-items: center;
}
.side-photo[b-llfhrgvgwl] {
width: 100%;
max-width: 200px;
}
.text-photo-block[b-llfhrgvgwl] p {
text-align: justify;
}
.center-photo[b-llfhrgvgwl] {
max-width: 400px;
}
}
/* /Components/Layout/ClubLayout.razor.rz.scp.css */
/* ── Portal de club — tema claro "ledger de entrenador" ────────────────────────
El portal de liga es oscuro; este es claro a propósito, para que el dueño
sepa que está en SU club y no en la administración de la liga.
Los tokens y el kit .u-* se definen UNA vez aquí y aplican (vía ::deep) a
todas las páginas que usan ClubLayout. */
.cl-root[b-217q79ozdv] {
--ground: #f7f6f3;
--surface: #ffffff;
--ink: #1c2024;
--ink-soft: #5b6169;
--court: #1d4e63;
--court-ink: #ffffff;
--chalk: #e8503a;
--line: #d9d6cf;
--paid: #2e7d5b;
--due: #c2410c;
--sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--cond: "Barlow Condensed", var(--sans);
display: flex;
height: 100vh;
height: 100dvh;
/* ÚNICO contenedor de scroll del portal (X e Y). Al medir exactamente la ventana:
· su scrollbar horizontal queda pegado al fondo VISIBLE (no al final del contenido);
· su scrollbar vertical es el único de la página — menú y contenido se desplazan
juntos, como una sola unidad;
· html/body nunca desbordan, así que el fondo global #111 (pensado para el portal
oscuro de liga) no puede asomarse por debajo en este portal claro. */
overflow: auto;
overscroll-behavior: none;
background: var(--ground);
color: var(--ink);
font-family: var(--sans);
}
.cl-main[b-217q79ozdv] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
/* Sin overflow propio a propósito: si esta caja scrolleara por su cuenta habría DOS
scrollbars verticales (el suyo + el de .cl-root). El scroll vive solo en .cl-root. */
}
/* ── Header ──────────────────────────────────────────────────────────────── */
.cl-header[b-217q79ozdv] {
display: flex;
align-items: center;
gap: .85rem;
height: 56px;
padding: 0 1.1rem;
background: var(--surface);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 30;
}
.cl-hamburger[b-217q79ozdv] {
display: none;
background: none;
border: none;
font-size: 1.35rem;
color: var(--ink);
cursor: pointer;
padding: .2rem;
}
.cl-context[b-217q79ozdv] {
display: inline-flex;
align-items: center;
gap: .5rem;
min-width: 0;
}
.cl-context-logo[b-217q79ozdv] {
width: 26px;
height: 26px;
border-radius: 6px;
object-fit: cover;
border: 1px solid var(--line);
background: var(--surface);
flex: none;
}
.cl-context-logo-empty[b-217q79ozdv] {
display: flex;
align-items: center;
justify-content: center;
font: 600 .8rem var(--cond);
color: var(--ink-soft);
background: var(--ground);
}
.cl-context-club[b-217q79ozdv] {
font-family: var(--cond);
font-weight: 600;
font-size: 1.15rem;
letter-spacing: .01em;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cl-spacer[b-217q79ozdv] { flex: 1; }
.cl-user[b-217q79ozdv] {
color: var(--ink-soft);
font-size: .88rem;
}
.cl-headerlink[b-217q79ozdv] {
color: var(--court);
text-decoration: none;
font-size: .86rem;
font-weight: 500;
padding: .3rem .55rem;
border-radius: 6px;
}
.cl-headerlink:hover[b-217q79ozdv] { background: rgba(29, 78, 99, .08); }
.cl-body[b-217q79ozdv] {
flex: 1;
padding: 1.6rem clamp(1rem, 4vw, 2.4rem);
max-width: 1180px;
width: 100%;
}
@media (max-width: 860px) {
.cl-hamburger[b-217q79ozdv] { display: inline-flex; }
.cl-user[b-217q79ozdv] { display: none; }
}
/* ═══ Kit compartido .u-* — vía ::deep aplica a todas las páginas del portal ═══ */
[b-217q79ozdv] .u-page-head {
margin-bottom: 1.5rem;
}
[b-217q79ozdv] .u-page-head h1 {
font-family: var(--cond);
font-weight: 600;
font-size: 1.7rem;
letter-spacing: .01em;
margin: 0 0 .2rem;
color: var(--ink);
}
[b-217q79ozdv] .u-page-head p {
margin: 0;
color: var(--ink-soft);
font-size: .93rem;
}
[b-217q79ozdv] .u-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 1.25rem 1.35rem;
}
[b-217q79ozdv] .u-muted { color: var(--ink-soft); font-size: .9rem; }
[b-217q79ozdv] .u-alert {
padding: .7rem 1rem;
border-radius: 9px;
font-size: .9rem;
margin-bottom: 1rem;
border: 1px solid transparent;
}
[b-217q79ozdv] .u-alert-info { background: rgba(29,78,99,.08); border-color: var(--court); color: #163b4b; }
[b-217q79ozdv] .u-alert-success { background: rgba(46,125,91,.1); border-color: var(--paid); color: #1f5a41; }
[b-217q79ozdv] .u-alert-error { background: rgba(194,65,12,.1); border-color: var(--due); color: #8a2f0c; }
[b-217q79ozdv] .u-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: .5rem 1.05rem;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
font: 500 .9rem/1 var(--sans);
cursor: pointer;
text-decoration: none;
transition: border-color .15s, background .15s;
}
[b-217q79ozdv] .u-btn:hover:not(:disabled) { border-color: var(--court); }
[b-217q79ozdv] .u-btn:disabled { opacity: .45; cursor: not-allowed; }
[b-217q79ozdv] .u-btn-primary {
background: var(--court);
border-color: var(--court);
color: var(--court-ink);
}
[b-217q79ozdv] .u-btn-primary:hover:not(:disabled) { background: #17404f; border-color: #17404f; }
[b-217q79ozdv] .u-btn-sm { padding: .3rem .7rem; font-size: .82rem; }
[b-217q79ozdv] .u-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
[b-217q79ozdv] .u-field label { font-size: .82rem; color: var(--ink-soft); font-weight: 500; }
[b-217q79ozdv] .u-field input,
[b-217q79ozdv] .u-field select,
[b-217q79ozdv] .u-field textarea {
border: 1px solid var(--line);
border-radius: 8px;
padding: .5rem .7rem;
font: 400 .93rem var(--sans);
color: var(--ink);
background: var(--surface);
outline: none;
}
[b-217q79ozdv] .u-field input:focus,
[b-217q79ozdv] .u-field select:focus,
[b-217q79ozdv] .u-field textarea:focus { border-color: var(--court); }
[b-217q79ozdv] .u-table-wrap { overflow-x: auto; }
[b-217q79ozdv] .u-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
[b-217q79ozdv] .u-table th {
text-align: left;
font: 600 .74rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-soft);
padding: .55rem .8rem;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
[b-217q79ozdv] .u-table td {
padding: .7rem .8rem;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
[b-217q79ozdv] .u-table tr:last-child td { border-bottom: none; }
[b-217q79ozdv] .u-num { font-family: var(--cond); font-weight: 600; font-variant-numeric: tabular-nums; }
[b-217q79ozdv] .u-chip {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .15rem .5rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 500;
border: 1px solid var(--line);
}
[b-217q79ozdv] .u-chip-paid { background: rgba(46,125,91,.12); border-color: var(--paid); color: #1f5a41; }
[b-217q79ozdv] .u-chip-due { background: rgba(194,65,12,.12); border-color: var(--due); color: #8a2f0c; }
/* /Components/Layout/ClubSidebar.razor.rz.scp.css */
.cs-sidebar[b-tid8c482vg] {
box-sizing: border-box;
width: 186px;
flex-shrink: 0;
background: var(--surface, #fff);
border-right: 1px solid var(--line, #d9d6cf);
display: flex;
flex-direction: column;
gap: .35rem;
padding: 1rem .75rem;
/* Sticky SOLO en el eje horizontal (left, sin top): el menú se queda pegado a la
izquierda al scrollear una tabla ancha, pero baja junto con el contenido en el
scroll vertical — ese scroll es el de .cl-root, el único de la página.
Nada de height fija aquí: el estiramiento del flex le da la altura de la fila,
así que el menú largo NUNCA se sale de .cl-root (antes desbordaba al documento
y dejaba ver el fondo negro global). z-index por encima de .cl-header (30). */
position: sticky;
left: 0;
z-index: 40;
/* Sin stretch: la caja crece con el menú (si no, el panel blanco terminaría a la
altura de la ventana y los últimos enlaces quedarían sobre el fondo de la página).
min-height la mantiene de alto completo cuando el menú es corto. */
align-self: flex-start;
min-height: 100%;
}
.cs-brand[b-tid8c482vg] {
display: flex;
align-items: center;
gap: .5rem;
padding: .1rem .35rem .75rem;
border-bottom: 1px solid var(--line, #d9d6cf);
margin-bottom: .5rem;
overflow: hidden;
}
.cs-logo[b-tid8c482vg] {
height: 32px;
width: 32px;
object-fit: contain;
flex-shrink: 0;
}
.cs-brand-text[b-tid8c482vg] {
font-family: "Barlow Condensed", system-ui, sans-serif;
font-weight: 600;
font-size: 1.15rem;
letter-spacing: .02em;
color: var(--ink, #1c2024);
}
.cs-club-switch[b-tid8c482vg] {
display: flex;
flex-direction: column;
gap: .2rem;
padding: .35rem .35rem .6rem;
}
.cs-club-switch label[b-tid8c482vg] {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-soft, #5b6169);
}
.cs-club-switch select[b-tid8c482vg] {
border: 1px solid var(--line, #d9d6cf);
border-radius: 7px;
padding: .35rem .5rem;
font: 500 .86rem "Barlow", system-ui, sans-serif;
color: var(--ink, #1c2024);
background: var(--surface, #fff);
outline: none;
}
.cs-club-switch select:focus[b-tid8c482vg] { border-color: var(--court, #1d4e63); }
.cs-nav[b-tid8c482vg] {
display: flex;
flex-direction: column;
gap: .15rem;
}
.cs-link[b-tid8c482vg] {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .6rem;
border-radius: 8px;
text-decoration: none;
color: var(--ink, #1c2024);
font-size: .9rem;
font-weight: 500;
transition: background .12s;
}
.cs-link:hover[b-tid8c482vg] { background: rgba(29, 78, 99, .07); }
.cs-active[b-tid8c482vg] {
background: rgba(29, 78, 99, .12);
color: var(--court, #1d4e63);
font-weight: 600;
}
.cs-ico[b-tid8c482vg] { font-size: 1rem; width: 1.2rem; text-align: center; }
.cs-sub[b-tid8c482vg] {
margin-left: .9rem;
font-size: .86rem;
color: var(--ink-soft, #5b6169);
}
.cs-sub.cs-active[b-tid8c482vg] { color: var(--court, #1d4e63); }
.cs-overlay[b-tid8c482vg] { display: none; }
@media (max-width: 860px) {
.cs-sidebar[b-tid8c482vg] {
position: fixed;
left: 0;
top: 0;
z-index: 50;
/* Cajón móvil: aquí sí necesita altura de ventana y scroll propio (no está en el
flujo de .cl-root, así que no puede heredar la altura de la fila). */
height: 100vh;
height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(-100%);
transition: transform .2s ease;
box-shadow: 0 0 40px rgba(0, 0, 0, .25);
}
.cs-sidebar.cs-open[b-tid8c482vg] { transform: translateX(0); }
.cs-overlay[b-tid8c482vg] {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .35);
z-index: 40;
}
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* blazor-error-ui styles are defined globally in wwwroot/app.css */
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* Botón hamburguesa */
.menu-btn[b-4tl6l91y1l] {
position: fixed;
top: 15px;
left: 15px;
font-size: 1.8rem;
background: #222;
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
z-index: 1100;
border-radius: 4px;
}
/* Sidebar lateral */
.sidebar[b-4tl6l91y1l] {
background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
box-shadow: inset -4px 0 10px rgba(0,0,0,0.6);
position: fixed;
top: 0;
left: -210px; /* oculto por defecto */
width: 210px;
height: 100%;
color: white;
transition: left 0.3s ease;
z-index: 1200;
padding-top: 60px;
overflow-y: auto;
/* Layout en columna: el footer fluye tras el último botón
y solo se "ancla" abajo cuando sobra espacio (margin-top:auto). */
display: flex;
flex-direction: column;
}
.sidebar.open[b-4tl6l91y1l] {
left: 0;
}
.sidebar .close-btn[b-4tl6l91y1l] {
position: absolute;
top: 15px;
right: 15px;
font-size: 1.2rem;
background: transparent;
border: none;
color: white;
cursor: pointer;
}
.sidebar nav[b-4tl6l91y1l] {
flex: 0 0 auto; /* altura natural segun cantidad de botones */
padding-bottom: 1rem;
}
.sidebar .nav-pill[b-4tl6l91y1l] {
padding-top: 0.56rem; /* 20% menos que 0.70rem */
padding-bottom: 0.56rem;
}
.sidebar nav ul[b-4tl6l91y1l] {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar nav ul li[b-4tl6l91y1l] {
margin: 20px 0;
}
.sidebar nav ul li a[b-4tl6l91y1l] {
color: white;
text-decoration: none;
font-size: 1.2rem;
transition: color 0.2s;
}
.sidebar nav ul li a.active[b-4tl6l91y1l],
.sidebar nav ul li a:hover[b-4tl6l91y1l] {
color: #ff9800;
}
.sidebar-footer[b-4tl6l91y1l] {
flex: 0 0 auto;
/* Empuja el footer hacia abajo cuando sobra espacio, pero si los
botones llenan el sidebar simplemente fluye debajo del ultimo
(sin solaparlo) y el sidebar hace scroll. */
margin-top: auto;
padding-top: 24px;
margin-bottom: 60px;
width: 100%;
text-align: center;
}
.sidebar-footer img[b-4tl6l91y1l] {
max-width: 120px;
opacity: 0.8;
transition: transform 0.3s ease;
}
.sidebar-footer img:hover[b-4tl6l91y1l] {
transform: scale(1.05) rotate(-2deg);
}
.sidebar-header[b-4tl6l91y1l] {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
}
.sidebar-header img[b-4tl6l91y1l] {
max-height: 50px;
max-width: 80%;
opacity: 0.9;
transition: transform 0.3s ease;
}
.sidebar-header img:hover[b-4tl6l91y1l] {
transform: scale(1.05) rotate(1deg);
}
/* 🔸 Línea divisoria adaptada al tema oscuro */
.header-divider[b-4tl6l91y1l] {
width: 80%;
height: 1px;
background: linear-gradient(to right, #444, #666, #444);
margin-top: 8px;
margin-bottom: 4px;
opacity: 0.6;
}
.nav-buttons[b-4tl6l91y1l] {
display: flex;
gap: 1rem;
margin-top: 1rem;
flex-wrap: wrap;
justify-content: center;
}
/* 🔑 Reforzamos que los NavLink se vean como botones */
.nav-pill[b-4tl6l91y1l],
.nav-pill:link[b-4tl6l91y1l],
.nav-pill:visited[b-4tl6l91y1l] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 80%; /* más anchos dentro del sidebar */
max-width: 200px; /* límite superior */
text-align: center;
margin: 1rem auto;
background-color: #fff;
color: #000;
border: 2px solid #000;
border-radius: 999px;
padding: 0.70rem 2rem; /* 🔑 más alto y ancho */
font-size: 1.1rem; /* 🔑 texto más grande */
font-weight: 520; /* un poco más grueso */
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.nav-pill:hover[b-4tl6l91y1l] {
border-color: #28a745;
color: #28a745;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
.nav-pill:active[b-4tl6l91y1l] {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.nav-pill.active[b-4tl6l91y1l] {
border-color: #28a745;
color: #28a745;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
/* Cintillo delgado y centrado */
.topnav[b-4tl6l91y1l] {
display: flex;
align-items: center; /* 🔑 centra verticalmente */
justify-content: center; /* 🔑 centra horizontalmente */
background-color: #151515;
border-bottom: 2px solid #eee;
height: 70px; /* 🔑 altura fija del cintillo */
padding: 0; /* sin padding vertical extra */
}
/* Contenedor de botones */
.topnav .nav-buttons[b-4tl6l91y1l] {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 0.5rem;
}
/* Botones pill compactos */
.topnav .nav-pill[b-4tl6l91y1l],
.topnav .nav-pill:link[b-4tl6l91y1l],
.topnav .nav-pill:visited[b-4tl6l91y1l] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 10px;
line-height: 1;
font-size: 0.85rem;
font-weight: 500;
background-color: #fff;
border: 2px solid #000;
border-radius: 999px;
box-shadow: 0 2px 4px rgba(0,0,0,0.12);
transition: border-color 0.2s, color 0.2s, transform 0.1s;
width: auto;
}
/* Hover/active sin inflar la altura */
.topnav .nav-pill:hover[b-4tl6l91y1l] {
border-color: #28a745;
color: #28a745;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
.topnav .nav-pill:active[b-4tl6l91y1l] {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.topnav .nav-pill.active[b-4tl6l91y1l] {
border-color: #28a745;
color: #28a745;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
/* Responsive rules */
/* --- Base: móvil --- */
.menu-btn[b-4tl6l91y1l] {
display: block;
}
.sidebar[b-4tl6l91y1l] {
display: block;
}
.topnav[b-4tl6l91y1l] {
display: none; /* 🔑 oculto en móvil */
}
/* --- Desktop --- */
@media (min-width: 768px) {
.menu-btn[b-4tl6l91y1l],
.sidebar[b-4tl6l91y1l] {
display: none; /* 🔑 ocultos en desktop */
}
.topnav[b-4tl6l91y1l] {
display: flex; /* 🔑 visible en desktop */
height: 70px; /* o el valor que quieras */
}
.topnav .nav-pill[b-4tl6l91y1l] {
height: 30px;
padding: 0 10px;
font-size: 0.85rem;
}
}
/* Fondo semitransparente detrás del sidebar */
.overlay[b-4tl6l91y1l] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* 🔑 sombra negra semitransparente */
z-index: 1100; /* debajo del sidebar (1200) pero encima del contenido */
transition: opacity 0.3s ease;
opacity: 1;
}
.overlay.hidden[b-4tl6l91y1l] {
opacity: 0;
pointer-events: none; /* no bloquea clics cuando está oculto */
}
/* Botón de login — estilo diferenciado */
.nav-pill.nav-pill-login[b-4tl6l91y1l],
.nav-pill.nav-pill-login:link[b-4tl6l91y1l],
.nav-pill.nav-pill-login:visited[b-4tl6l91y1l] {
background-color: #000;
color: #fff;
border-color: #28a745;
}
.nav-pill.nav-pill-login:hover[b-4tl6l91y1l] {
background-color: #28a745;
color: #fff;
border-color: #28a745;
}
.topnav .nav-pill.nav-pill-login[b-4tl6l91y1l],
.topnav .nav-pill.nav-pill-login:link[b-4tl6l91y1l],
.topnav .nav-pill.nav-pill-login:visited[b-4tl6l91y1l] {
background-color: #000;
color: #fff;
border-color: #28a745;
}
.topnav .nav-pill.nav-pill-login:hover[b-4tl6l91y1l] {
background-color: #28a745;
color: #fff;
border-color: #28a745;
}
/* Botón de logout — TODO: remover en producción */
.nav-pill.nav-pill-logout[b-4tl6l91y1l],
.nav-pill.nav-pill-logout:link[b-4tl6l91y1l],
.nav-pill.nav-pill-logout:visited[b-4tl6l91y1l] {
background-color: #000;
color: #e07b00;
border-color: #e07b00;
width: 80%;
max-width: 200px;
box-sizing: border-box;
}
.nav-pill.nav-pill-logout:hover[b-4tl6l91y1l] {
background-color: #e07b00;
color: #fff;
border-color: #e07b00;
}
.topnav .nav-pill.nav-pill-logout[b-4tl6l91y1l],
.topnav .nav-pill.nav-pill-logout:link[b-4tl6l91y1l],
.topnav .nav-pill.nav-pill-logout:visited[b-4tl6l91y1l] {
background-color: #000;
color: #e07b00;
border-color: #e07b00;
}
.topnav .nav-pill.nav-pill-logout:hover[b-4tl6l91y1l] {
background-color: #e07b00;
color: #fff;
border-color: #e07b00;
}
/* /Components/Pages/Admin/AuditMonitor.razor.rz.scp.css */
/* ── Utilidades compartidas (mismo set que LeagueSetup/RefereeManager) ──── */
.u-page-header[b-dzhlxl3yrf] {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.u-page-header h2[b-dzhlxl3yrf] { color: #fff; font-size: 1.4rem; margin: 0; }
.u-muted[b-dzhlxl3yrf] { color: #888; font-size: 0.9rem; }
.u-alert[b-dzhlxl3yrf] { padding: 0.65rem 1rem; border-radius: 8px; margin: 0.5rem 0 1rem; font-size: 0.9rem; }
.u-alert-error[b-dzhlxl3yrf] { background: rgba(229,0,0,0.12); border: 1px solid #e50000; color: #ff6b6b; }
.u-alert-success[b-dzhlxl3yrf] { background: rgba(40,167,69,0.12); border: 1px solid #28a745; color: #5fdc80; }
.u-alert-warn[b-dzhlxl3yrf] { background: rgba(245,158,11,0.12); border: 1px solid #f59e0b; color: #fbbf24; }
.u-field[b-dzhlxl3yrf] { display: flex; flex-direction: column; gap: 0.3rem; }
.u-field label[b-dzhlxl3yrf] { color: #999; font-size: 0.8rem; }
.u-field input[type="text"][b-dzhlxl3yrf],
.u-field input[type="date"][b-dzhlxl3yrf],
.u-field input[type="number"][b-dzhlxl3yrf],
.u-field select[b-dzhlxl3yrf] {
background: #111;
border: 1px solid #3a3a3a;
border-radius: 7px;
padding: 0.45rem 0.65rem;
color: #eee;
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
color-scheme: dark;
}
.u-field input:focus[b-dzhlxl3yrf], .u-field select:focus[b-dzhlxl3yrf] { border-color: #28a745; }
.u-btn[b-dzhlxl3yrf] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1.1rem;
border-radius: 8px;
border: 1px solid #555;
background: transparent;
color: #ccc;
font-size: 0.9rem;
cursor: pointer;
transition: border-color .2s, color .2s;
white-space: nowrap;
text-decoration: none;
}
.u-btn:hover[b-dzhlxl3yrf] { border-color: #888; color: #fff; }
.u-btn:disabled[b-dzhlxl3yrf] { opacity: 0.4; cursor: not-allowed; }
.u-btn-sm[b-dzhlxl3yrf] { padding: 0.28rem 0.75rem; font-size: 0.82rem; }
.u-btn-primary[b-dzhlxl3yrf] { border-color: #28a745; color: #28a745; }
.u-btn-primary:hover[b-dzhlxl3yrf] { border-color: #5fdc80; color: #5fdc80; }
.u-table-wrap[b-dzhlxl3yrf] { overflow-x: auto; border-radius: 10px; border: 1px solid #2e2e2e; }
.u-table[b-dzhlxl3yrf] { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.u-table th[b-dzhlxl3yrf] {
background: #1e1e1e;
color: #888;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.55rem 0.8rem;
text-align: left;
border-bottom: 1px solid #2e2e2e;
position: sticky;
top: 0;
}
.u-table td[b-dzhlxl3yrf] {
padding: 0.5rem 0.8rem;
border-bottom: 1px solid #1e1e1e;
color: #ddd;
vertical-align: top;
}
.u-table tbody tr:last-child td[b-dzhlxl3yrf] { border-bottom: none; }
/* ── Filtros ────────────────────────────────────────────────────────────── */
.am-filters[b-dzhlxl3yrf] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0.8rem;
align-items: end;
background: linear-gradient(145deg, #242424, #1a1a1a);
border: 1px solid #2e2e2e;
border-radius: 12px;
padding: 1rem;
margin-bottom: 1.25rem;
}
.am-search[b-dzhlxl3yrf] { grid-column: span 2; min-width: 220px; }
.am-filter-actions[b-dzhlxl3yrf] { display: flex; gap: 0.5rem; }
/* ── Tabs ───────────────────────────────────────────────────────────────── */
.am-tabs[b-dzhlxl3yrf] { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.am-tab[b-dzhlxl3yrf] {
padding: 0.55rem 1.1rem;
background: #1e1e1e;
border: 1px solid #3a3a3a;
border-radius: 10px 10px 0 0;
color: #bbb;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
}
.am-tab:hover[b-dzhlxl3yrf] { border-color: #555; color: #fff; }
.am-tab.active[b-dzhlxl3yrf] { border-color: #28a745; color: #5fdc80; background: rgba(40,167,69,0.08); }
/* ── Toolbar del log ────────────────────────────────────────────────────── */
.am-toolbar[b-dzhlxl3yrf] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.am-spacer[b-dzhlxl3yrf] { flex: 1; }
/* ── Tabla del log ─────────────────────────────────────────────────────── */
.am-table tbody tr.am-row[b-dzhlxl3yrf] { cursor: pointer; }
.am-table tbody tr.am-row:hover td[b-dzhlxl3yrf] { background: rgba(255,255,255,0.03); }
.am-row-open td[b-dzhlxl3yrf] { background: rgba(40,167,69,0.06) !important; }
.am-pill[b-dzhlxl3yrf] {
display: inline-block;
padding: 0.1rem 0.5rem;
background: #2a2a2a;
border: 1px solid #3a3a3a;
border-radius: 6px;
font-size: 0.78rem;
color: #cbd5e1;
}
.am-ent[b-dzhlxl3yrf] { color: #e2e8f0; }
.am-entid[b-dzhlxl3yrf] { color: #777; font-size: 0.8rem; margin-left: 0.4rem; }
.am-pill-off[b-dzhlxl3yrf] { color: #d18a8a; border-color: #5b3a3a; }
.am-umail[b-dzhlxl3yrf] { display: block; color: #777; font-size: 0.78rem; margin-top: 0.15rem; }
.am-desc[b-dzhlxl3yrf] {
color: #cbd5e1;
max-width: 460px;
white-space: normal;
word-break: break-word;
}
.am-caret[b-dzhlxl3yrf] { color: #666; text-align: center; }
.am-detail-row td[b-dzhlxl3yrf] {
background: #131313;
padding: 0.9rem 1rem;
}
.am-detail-grid[b-dzhlxl3yrf] {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 0.6rem;
font-size: 0.82rem;
color: #aaa;
}
.am-dk[b-dzhlxl3yrf] {
display: inline-block;
color: #777;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 0.4rem;
}
.am-json-block[b-dzhlxl3yrf] { margin-top: 0.5rem; }
.am-json-block pre[b-dzhlxl3yrf] {
margin: 0.25rem 0 0;
padding: 0.7rem 0.9rem;
background: #0d0d0d;
border: 1px solid #262626;
border-radius: 8px;
color: #b7c4b7;
font-size: 0.78rem;
line-height: 1.5;
max-height: 320px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* ── Paginador ─────────────────────────────────────────────────────────── */
.am-pager[b-dzhlxl3yrf] {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
/* ── KPIs ──────────────────────────────────────────────────────────────── */
.am-kpis[b-dzhlxl3yrf] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
.am-kpi[b-dzhlxl3yrf] {
background: linear-gradient(145deg, #242424, #1a1a1a);
border: 1px solid #2e2e2e;
border-radius: 12px;
padding: 1rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.am-kpi-val[b-dzhlxl3yrf] { color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.am-kpi-lbl[b-dzhlxl3yrf] { color: #888; font-size: 0.8rem; }
/* ── Tarjetas de estadística ───────────────────────────────────────────── */
.am-stat-cols[b-dzhlxl3yrf] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.am-stat-card[b-dzhlxl3yrf] {
background: linear-gradient(145deg, #242424, #1a1a1a);
border: 1px solid #2e2e2e;
border-radius: 12px;
padding: 1.1rem 1.25rem;
}
.am-stat-card h3[b-dzhlxl3yrf] {
margin: 0 0 0.9rem;
color: #ddd;
font-size: 0.95rem;
font-weight: 600;
}
.am-bar[b-dzhlxl3yrf] { margin-bottom: 0.7rem; }
.am-bar-head[b-dzhlxl3yrf] {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.82rem;
margin-bottom: 0.2rem;
}
.am-bar-lbl[b-dzhlxl3yrf] {
color: #cbd5e1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.am-bar-val[b-dzhlxl3yrf] { color: #8b8b8b; flex-shrink: 0; }
.am-bar-track[b-dzhlxl3yrf] {
height: 8px;
background: #262626;
border-radius: 5px;
overflow: hidden;
}
.am-bar-fill[b-dzhlxl3yrf] {
height: 100%;
background: linear-gradient(90deg, #1f6f3f, #34c46a);
border-radius: 5px;
}
.am-bar-sub[b-dzhlxl3yrf] { color: #6b7280; font-size: 0.72rem; }
/* ── Línea de tiempo diaria ────────────────────────────────────────────── */
.am-timeline[b-dzhlxl3yrf] {
display: flex;
align-items: flex-end;
gap: 3px;
height: 160px;
overflow-x: auto;
padding-top: 0.5rem;
}
.am-tl-col[b-dzhlxl3yrf] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-width: 26px;
height: 100%;
flex: 1 0 auto;
}
.am-tl-bar[b-dzhlxl3yrf] {
width: 60%;
min-height: 2px;
background: linear-gradient(180deg, #34c46a, #1f6f3f);
border-radius: 3px 3px 0 0;
}
.am-tl-lbl[b-dzhlxl3yrf] { color: #777; font-size: 0.62rem; margin-top: 0.25rem; transform: rotate(-45deg); white-space: nowrap; }
.am-tl-cnt[b-dzhlxl3yrf] { color: #9aa; font-size: 0.62rem; }
@media (max-width: 720px) {
.am-search[b-dzhlxl3yrf] { grid-column: span 1; }
.am-desc[b-dzhlxl3yrf] { max-width: 220px; }
}
/* /Components/Pages/Admin/LeagueImport.razor.rz.scp.css */
.li-page[b-7hc6bn9rw2] {
max-width: 860px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
}
.li-subtitle[b-7hc6bn9rw2] {
color: var(--color-muted, #6b7280);
margin-top: 0.25rem;
}
/* ── Stepper ─────────────────────────────────────────────────────────────── */
.li-steps[b-7hc6bn9rw2] {
display: flex;
align-items: center;
gap: 0;
margin: 1.5rem 0 2rem;
flex-wrap: wrap;
row-gap: 0.5rem;
}
.li-step[b-7hc6bn9rw2] {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #9ca3af;
}
.li-step--active[b-7hc6bn9rw2] {
color: #1d4ed8;
font-weight: 600;
}
.li-step--done[b-7hc6bn9rw2] {
color: #16a34a;
}
.li-step-num[b-7hc6bn9rw2] {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
border: 2px solid currentColor;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
.li-step--active .li-step-num[b-7hc6bn9rw2] {
background: #1d4ed8;
color: #fff;
border-color: #1d4ed8;
}
.li-step--done .li-step-num[b-7hc6bn9rw2] {
background: #16a34a;
color: #fff;
border-color: #16a34a;
}
.li-step-label[b-7hc6bn9rw2] {
display: none;
}
@media (min-width: 480px) {
.li-step-label[b-7hc6bn9rw2] { display: inline; }
}
.li-step-line[b-7hc6bn9rw2] {
flex: 1;
min-width: 1.5rem;
height: 2px;
background: #e5e7eb;
margin: 0 0.5rem;
}
.li-step-line--done[b-7hc6bn9rw2] {
background: #16a34a;
}
/* ── Card ────────────────────────────────────────────────────────────────── */
.li-card[b-7hc6bn9rw2] {
background: var(--color-surface, #fff);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.li-card h3[b-7hc6bn9rw2] {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
}
.li-card h4[b-7hc6bn9rw2] {
margin: 0.25rem 0 0;
font-size: 0.95rem;
font-weight: 600;
}
/* ── Download button ─────────────────────────────────────────────────────── */
.li-download-btn[b-7hc6bn9rw2] {
align-self: flex-start;
text-decoration: none;
padding: 0.6rem 1.25rem;
border-radius: 0.5rem;
background: #1d4ed8;
color: #fff;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.li-download-btn:hover[b-7hc6bn9rw2] { background: #1e40af; color: #fff; text-decoration: none; }
/* ── Instructions ────────────────────────────────────────────────────────── */
.li-instructions[b-7hc6bn9rw2] {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.li-instructions ul[b-7hc6bn9rw2] {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.li-note[b-7hc6bn9rw2] {
margin: 0.75rem 0 0;
color: #b45309;
font-size: 0.82rem;
}
/* ── File input ──────────────────────────────────────────────────────────── */
.li-file-input[b-7hc6bn9rw2] {
display: block;
width: 100%;
padding: 0.75rem;
border: 2px dashed #d1d5db;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
background: #f9fafb;
}
.li-file-name[b-7hc6bn9rw2] {
margin: 0;
font-size: 0.875rem;
color: #374151;
}
/* ── Alerts ──────────────────────────────────────────────────────────────── */
.li-alert[b-7hc6bn9rw2] {
border-radius: 0.5rem;
padding: 0.75rem 1rem;
font-size: 0.9rem;
font-weight: 500;
}
.li-alert--success[b-7hc6bn9rw2] {
background: #dcfce7;
color: #15803d;
border: 1px solid #bbf7d0;
}
.li-alert--error[b-7hc6bn9rw2] {
background: #fee2e2;
color: #b91c1c;
border: 1px solid #fecaca;
}
/* ── Stats grid ──────────────────────────────────────────────────────────── */
.li-stats-grid[b-7hc6bn9rw2] {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.li-stat[b-7hc6bn9rw2] {
background: #f1f5f9;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
min-width: 5rem;
flex: 1;
}
.li-stat-num[b-7hc6bn9rw2] {
font-size: 1.5rem;
font-weight: 800;
color: #1d4ed8;
line-height: 1;
}
.li-stat-lbl[b-7hc6bn9rw2] {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.25rem;
}
/* ── Errors list ─────────────────────────────────────────────────────────── */
.li-errors-title[b-7hc6bn9rw2] {
margin: 0.5rem 0 0.25rem !important;
}
.li-errors-list[b-7hc6bn9rw2] {
display: flex;
flex-direction: column;
gap: 0.25rem;
max-height: 16rem;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 0.5rem;
}
.li-error-row[b-7hc6bn9rw2] {
display: flex;
gap: 0.5rem;
font-size: 0.82rem;
padding: 0.3rem 0.5rem;
border-radius: 0.25rem;
}
.li-error-row--critical[b-7hc6bn9rw2] {
background: #fef2f2;
color: #991b1b;
}
.li-error-row--warning[b-7hc6bn9rw2] {
background: #fffbeb;
color: #92400e;
}
.li-error-sheet[b-7hc6bn9rw2] {
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
/* ── Actions ─────────────────────────────────────────────────────────────── */
.li-actions[b-7hc6bn9rw2] {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: flex-end;
margin-top: 0.5rem;
}
.li-spinner[b-7hc6bn9rw2] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
/* /Components/Pages/Admin/LeagueSetup.razor.rz.scp.css */
/* ── Layout general ──────────────────────────────────────────────────── */
.u-page-header[b-z45ftyew49] {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.u-page-header h2[b-z45ftyew49] { color: #fff; font-size: 1.4rem; margin: 0; }
.u-alert[b-z45ftyew49] { padding: 0.65rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.u-alert-error[b-z45ftyew49] { background: rgba(229,0,0,0.12); border: 1px solid #e50000; color: #ff6b6b; }
.u-alert-success[b-z45ftyew49] { background: rgba(40,167,69,0.12); border: 1px solid #28a745; color: #5fdc80; }
.u-muted[b-z45ftyew49] { color: #888; font-size: 0.9rem; }
.u-section[b-z45ftyew49] {
background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.u-field-row-2[b-z45ftyew49] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.u-field[b-z45ftyew49] {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.u-field label[b-z45ftyew49] { color: #999; font-size: 0.84rem; }
.u-field-inline[b-z45ftyew49] {
flex-direction: row;
align-items: center;
gap: 0.6rem;
}
.u-field-inline label[b-z45ftyew49] { color: #ccc; font-size: 0.9rem; }
.u-field input[type="text"][b-z45ftyew49],
.u-field input[type="number"][b-z45ftyew49],
.u-field select[b-z45ftyew49],
.u-field textarea[b-z45ftyew49] {
background: #111;
border: 1px solid #3a3a3a;
border-radius: 7px;
padding: 0.5rem 0.75rem;
color: #eee;
font-size: 0.93rem;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
.u-field input:focus[b-z45ftyew49],
.u-field select:focus[b-z45ftyew49],
.u-field textarea:focus[b-z45ftyew49] { border-color: #28a745; }
.u-field input[type="checkbox"][b-z45ftyew49] {
accent-color: #28a745;
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
}
.u-actions[b-z45ftyew49] { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.u-btn[b-z45ftyew49] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1.1rem;
border-radius: 8px;
border: 1px solid #555;
background: transparent;
color: #ccc;
font-size: 0.9rem;
cursor: pointer;
transition: border-color .2s, color .2s;
white-space: nowrap;
}
.u-btn:hover[b-z45ftyew49] { border-color: #888; color: #fff; }
.u-btn:disabled[b-z45ftyew49] { opacity: 0.4; cursor: not-allowed; }
.u-btn-sm[b-z45ftyew49] { padding: 0.25rem 0.75rem; font-size: 0.82rem; }
.u-btn-primary[b-z45ftyew49] { border-color: #28a745; color: #28a745; }
.u-btn-primary:hover[b-z45ftyew49] { border-color: #5fdc80; color: #5fdc80; }
.u-btn-danger[b-z45ftyew49] { border-color: #e50000; color: #ff6b6b; }
.u-btn-danger:hover[b-z45ftyew49] { border-color: #ff6b6b; color: #fff; }
/* ── Tabla ───────────────────────────────────────────────────────────── */
.u-table-wrap[b-z45ftyew49] {
overflow-x: auto;
border-radius: 10px;
border: 1px solid #2e2e2e;
}
.u-table[b-z45ftyew49] {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.u-table th[b-z45ftyew49] {
background: #1e1e1e;
color: #888;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.6rem 0.85rem;
text-align: left;
border-bottom: 1px solid #2e2e2e;
}
.u-table td[b-z45ftyew49] {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid #1e1e1e;
color: #ddd;
vertical-align: middle;
}
.u-table tbody tr:last-child td[b-z45ftyew49] { border-bottom: none; }
.u-table tbody tr:hover td[b-z45ftyew49] { background: rgba(255,255,255,0.03); }
.row-editing td[b-z45ftyew49] { background: rgba(40,167,69,0.06); }
.row-actions[b-z45ftyew49] {
display: flex;
gap: 0.4rem;
justify-content: flex-end;
}
/* ── Tabs de setup ───────────────────────────────────────────────────── */
.setup-tabs[b-z45ftyew49] {
display: flex;
gap: 0.6rem;
margin-bottom: 1.25rem;
}
.setup-tab[b-z45ftyew49] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.1rem;
background: #1e1e1e;
border: 1px solid #3a3a3a;
border-radius: 10px;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.setup-tab:hover[b-z45ftyew49] { border-color: #555; background: #242424; }
.setup-tab.active[b-z45ftyew49] {
border-color: #28a745;
background: rgba(40,167,69,0.08);
}
.setup-tab-label[b-z45ftyew49] {
color: #ddd;
font-size: 0.9rem;
font-weight: 600;
}
.setup-tab.active .setup-tab-label[b-z45ftyew49] { color: #5fdc80; }
.setup-tab-badge[b-z45ftyew49] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: #2e2e2e;
border-radius: 10px;
font-size: 0.75rem;
color: #888;
font-weight: 700;
}
.setup-tab.active .setup-tab-badge[b-z45ftyew49] {
background: rgba(40,167,69,0.2);
color: #5fdc80;
}
/* ── Sección título ──────────────────────────────────────────────────── */
.section-title[b-z45ftyew49] {
color: #ccc;
font-size: 1rem;
font-weight: 600;
margin: 0;
}
/* ── Color picker ────────────────────────────────────────────────────── */
.color-wrap[b-z45ftyew49] {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* ── Logo ────────────────────────────────────────────────────────────── */
.file-input[b-z45ftyew49] {
font-size: 0.88rem;
color: #aaa;
margin-top: 0.25rem;
}
.logo-preview-wrap[b-z45ftyew49] {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.logo-preview[b-z45ftyew49] {
width: 96px;
height: 96px;
object-fit: contain;
border-radius: 8px;
background: #1a1a1a;
border: 1px solid #3a3a3a;
padding: 4px;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.u-field-row-2[b-z45ftyew49] { grid-template-columns: 1fr; }
.setup-tabs[b-z45ftyew49] { flex-direction: column; }
}
/* /Components/Pages/Admin/RefereeManager.razor.rz.scp.css */
/* ── Layout general ──────────────────────────────────────────────────── */
.u-page-header[b-tg8rcvj5eh] {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.u-page-header h2[b-tg8rcvj5eh] { color: #fff; font-size: 1.4rem; margin: 0; }
.u-alert[b-tg8rcvj5eh] { padding: 0.65rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.u-alert-error[b-tg8rcvj5eh] { background: rgba(229,0,0,0.12); border: 1px solid #e50000; color: #ff6b6b; }
.u-alert-success[b-tg8rcvj5eh] { background: rgba(40,167,69,0.12); border: 1px solid #28a745; color: #5fdc80; }
.u-alert-warn[b-tg8rcvj5eh] { background: rgba(255,165,0,0.10); border: 1px solid #d4870f; color: #ffa940; }
.u-muted[b-tg8rcvj5eh] { color: #888; font-size: 0.9rem; }
.u-section[b-tg8rcvj5eh] {
background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-bottom: 1.25rem;
}
.u-field-row-2[b-tg8rcvj5eh] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.u-field[b-tg8rcvj5eh] {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.u-field label[b-tg8rcvj5eh] { color: #999; font-size: 0.84rem; }
.u-field-inline[b-tg8rcvj5eh] {
flex-direction: row;
align-items: center;
gap: 0.6rem;
}
.u-field-inline label[b-tg8rcvj5eh] { color: #ccc; font-size: 0.9rem; }
.u-field input[type="text"][b-tg8rcvj5eh],
.u-field input[type="number"][b-tg8rcvj5eh],
.u-field select[b-tg8rcvj5eh],
.u-field textarea[b-tg8rcvj5eh] {
background: #111;
border: 1px solid #3a3a3a;
border-radius: 7px;
padding: 0.5rem 0.75rem;
color: #eee;
font-size: 0.93rem;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
.u-field input:focus[b-tg8rcvj5eh],
.u-field select:focus[b-tg8rcvj5eh],
.u-field textarea:focus[b-tg8rcvj5eh] { border-color: #28a745; }
.u-field input[type="checkbox"][b-tg8rcvj5eh] {
accent-color: #28a745;
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
}
.u-actions[b-tg8rcvj5eh] { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.u-btn[b-tg8rcvj5eh] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1.1rem;
border-radius: 8px;
border: 1px solid #555;
background: transparent;
color: #ccc;
font-size: 0.9rem;
cursor: pointer;
transition: border-color .2s, color .2s;
white-space: nowrap;
}
.u-btn:hover[b-tg8rcvj5eh] { border-color: #888; color: #fff; }
.u-btn:disabled[b-tg8rcvj5eh] { opacity: 0.4; cursor: not-allowed; }
.u-btn-sm[b-tg8rcvj5eh] { padding: 0.25rem 0.75rem; font-size: 0.82rem; }
.u-btn-primary[b-tg8rcvj5eh] { border-color: #28a745; color: #28a745; }
.u-btn-primary:hover[b-tg8rcvj5eh] { border-color: #5fdc80; color: #5fdc80; }
.u-btn-danger[b-tg8rcvj5eh] { border-color: #e50000; color: #ff6b6b; }
.u-btn-danger:hover[b-tg8rcvj5eh] { border-color: #ff6b6b; color: #fff; }
/* ── Tabla ───────────────────────────────────────────────────────────── */
.u-table-wrap[b-tg8rcvj5eh] {
overflow-x: auto;
border-radius: 10px;
border: 1px solid #2e2e2e;
}
.u-table[b-tg8rcvj5eh] {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.u-table th[b-tg8rcvj5eh] {
background: #1e1e1e;
color: #888;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.6rem 0.85rem;
text-align: left;
border-bottom: 1px solid #2e2e2e;
}
.u-table td[b-tg8rcvj5eh] {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid #1e1e1e;
color: #ddd;
vertical-align: middle;
}
.u-table tbody tr:last-child td[b-tg8rcvj5eh] { border-bottom: none; }
.u-table tbody tr:hover td[b-tg8rcvj5eh] { background: rgba(255,255,255,0.03); }
.row-actions[b-tg8rcvj5eh] {
display: flex;
gap: 0.4rem;
justify-content: flex-end;
}
/* ── Sección título ──────────────────────────────────────────────────── */
.section-title[b-tg8rcvj5eh] {
color: #ccc;
font-size: 1rem;
font-weight: 600;
margin: 0;
}
/* ── Árbitro: avatar ─────────────────────────────────────────────────── */
.ref-avatar[b-tg8rcvj5eh] {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #3a3a3a;
display: flex;
align-items: center;
justify-content: center;
background: #1e1e1e;
flex-shrink: 0;
}
.ref-avatar-ph[b-tg8rcvj5eh] {
font-size: 1.1rem;
color: #666;
}
/* ── Árbitro: certificación badge ────────────────────────────────────── */
.cert-badge[b-tg8rcvj5eh] {
display: inline-block;
padding: 0.18rem 0.6rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
background: rgba(100, 149, 237, 0.15);
border: 1px solid rgba(100, 149, 237, 0.35);
color: #7eb0f5;
}
/* ── Árbitro: estado badge ───────────────────────────────────────────── */
.status-badge[b-tg8rcvj5eh] {
display: inline-block;
padding: 0.18rem 0.6rem;
border-radius: 20px;
font-size: 0.78rem;
font-weight: 600;
}
.status-active[b-tg8rcvj5eh] {
background: rgba(40, 167, 69, 0.15);
border: 1px solid rgba(40, 167, 69, 0.4);
color: #5fdc80;
}
.status-inactive[b-tg8rcvj5eh] {
background: rgba(136, 136, 136, 0.12);
border: 1px solid #444;
color: #888;
}
/* ── Árbitro: días disponibles (chips) ───────────────────────────────── */
.days-grid[b-tg8rcvj5eh] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.day-chip[b-tg8rcvj5eh] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 600;
border: 1px solid #3a3a3a;
background: #1e1e1e;
color: #777;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
user-select: none;
}
.day-chip:hover[b-tg8rcvj5eh] { border-color: #555; color: #aaa; }
.day-chip-on[b-tg8rcvj5eh] {
background: rgba(40, 167, 69, 0.18);
border-color: #28a745;
color: #5fdc80;
}
/* ── Árbitro: preview de disponibilidad ──────────────────────────────── */
.avail-preview[b-tg8rcvj5eh] {
background: rgba(40, 167, 69, 0.06);
border: 1px solid rgba(40, 167, 69, 0.2);
border-radius: 8px;
padding: 0.55rem 0.85rem;
font-size: 0.87rem;
color: #bbb;
}
.avail-preview strong[b-tg8rcvj5eh] { color: #5fdc80; }
/* ── Foto ────────────────────────────────────────────────────────────── */
.file-input[b-tg8rcvj5eh] {
font-size: 0.88rem;
color: #aaa;
margin-top: 0.25rem;
}
.photo-preview-wrap[b-tg8rcvj5eh] {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.photo-preview[b-tg8rcvj5eh] {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid #3a3a3a;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.u-field-row-2[b-tg8rcvj5eh] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/SeasonList.razor.rz.scp.css */
/* ── Layout de página ────────────────────────────────────────────────────── */
.u-page-header[b-pp8ijmazl4] {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.u-page-header h2[b-pp8ijmazl4] {
color: #fff;
font-size: 1.4rem;
margin: 0;
}
/* ── Selector de liga (modo global, ruta /seasons sin LeagueId) ─────────── */
.sa-league-selector[b-pp8ijmazl4] {
margin-bottom: 1.5rem;
}
.sa-league-selector select[b-pp8ijmazl4] {
background: #1a1a2e;
border: 1px solid #3a3a5c;
border-radius: 8px;
color: #f0f0f0;
font-size: 0.95rem;
padding: 0.5rem 0.85rem;
min-width: 280px;
cursor: pointer;
outline: none;
transition: border-color 0.2s;
}
.sa-league-selector select:focus[b-pp8ijmazl4] {
border-color: #6366f1;
}
/* ── Estado vacío ────────────────────────────────────────────────────────── */
.empty-state[b-pp8ijmazl4] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
}
.empty-icon[b-pp8ijmazl4] {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.empty-title[b-pp8ijmazl4] {
color: #ccc;
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 0.35rem;
}
/* ── Grid de cards ───────────────────────────────────────────────────────── */
.season-list[b-pp8ijmazl4] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
gap: 1rem;
}
/* ── Card ────────────────────────────────────────────────────────────────── */
.season-card[b-pp8ijmazl4] {
background: #1a1a2e;
border: 1px solid #2a2a42;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s, box-shadow 0.2s;
border-top: 3px solid #2a2a42; /* override por accent class */
}
.season-card:hover[b-pp8ijmazl4] {
border-color: #3a3a5c;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* Acentos de color en el borde superior por estado */
.accent-gray[b-pp8ijmazl4] { border-top-color: #555; }
.accent-yellow[b-pp8ijmazl4] { border-top-color: #f59e0b; }
.accent-blue[b-pp8ijmazl4] { border-top-color: #3b82f6; }
.accent-green[b-pp8ijmazl4] { border-top-color: #00ff88; }
/* ── Cuerpo de la card (dos columnas) ───────────────────────────────────── */
.sc-body[b-pp8ijmazl4] {
display: flex;
gap: 1.5rem;
padding: 1.25rem 1.25rem 1rem;
flex: 1;
}
/* ── Columna izquierda ───────────────────────────────────────────────────── */
.sc-left[b-pp8ijmazl4] {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.sc-name[b-pp8ijmazl4] {
color: #f0f0f0;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
word-break: break-word;
}
.sc-dates[b-pp8ijmazl4] {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.sc-date-item[b-pp8ijmazl4] {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sc-date-label[b-pp8ijmazl4] {
color: #666;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sc-date-val[b-pp8ijmazl4] {
color: #ccc;
font-size: 0.88rem;
font-weight: 500;
}
.sc-date-sep[b-pp8ijmazl4] {
color: #444;
font-size: 1rem;
padding-top: 0.8rem;
}
.sc-days[b-pp8ijmazl4] {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.sc-day-badge[b-pp8ijmazl4] {
display: inline-block;
padding: 0.15em 0.55em;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #aaa;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.03em;
}
/* ── Columna derecha ─────────────────────────────────────────────────────── */
.sc-right[b-pp8ijmazl4] {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
flex-shrink: 0;
min-width: 90px;
}
.sc-metric[b-pp8ijmazl4] {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.sc-metric-num[b-pp8ijmazl4] {
color: #fff;
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
}
.sc-metric-label[b-pp8ijmazl4] {
color: #666;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.1rem;
}
/* ── Badges de estado ────────────────────────────────────────────────────── */
.status-badge[b-pp8ijmazl4] {
display: inline-block;
padding: 0.25em 0.8em;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.03em;
white-space: nowrap;
}
.badge-gray[b-pp8ijmazl4] {
background: rgba(120, 120, 140, 0.15);
color: #888;
border: 1px solid rgba(120, 120, 140, 0.3);
}
.badge-yellow[b-pp8ijmazl4] {
background: rgba(245, 158, 11, 0.12);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-blue[b-pp8ijmazl4] {
background: rgba(59, 130, 246, 0.12);
color: #60a5fa;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-green[b-pp8ijmazl4] {
background: rgba(0, 255, 136, 0.1);
color: #00ff88;
border: 1px solid rgba(0, 255, 136, 0.25);
}
/* ── Barra de acciones ───────────────────────────────────────────────────── */
.sc-actions[b-pp8ijmazl4] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-top: 1px solid #232338;
background: rgba(0, 0, 0, 0.15);
flex-wrap: wrap;
}
.confirm-text[b-pp8ijmazl4] {
color: #ff6b6b;
font-size: 0.85rem;
margin-right: 0.25rem;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
.season-list[b-pp8ijmazl4] {
grid-template-columns: 1fr;
}
.sc-body[b-pp8ijmazl4] {
flex-direction: column;
gap: 1rem;
}
.sc-right[b-pp8ijmazl4] {
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 0;
}
.sc-metric[b-pp8ijmazl4] {
flex-direction: row;
align-items: baseline;
gap: 0.4rem;
}
.sc-metric-num[b-pp8ijmazl4] {
font-size: 1.4rem;
}
.sa-league-selector select[b-pp8ijmazl4] {
min-width: 0;
width: 100%;
}
}
/* /Components/Pages/Admin/SeasonWorkbench.razor.rz.scp.css */
/* ── Layout general ──────────────────────────────────────────────────── */
.u-page-header[b-p6nxymv539] {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.u-page-header h2[b-p6nxymv539] { color: #fff; font-size: 1.4rem; margin: 0; }
.u-alert[b-p6nxymv539] { padding: 0.65rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.u-alert-error[b-p6nxymv539] { background: rgba(229,0,0,0.12); border: 1px solid #e50000; color: #ff6b6b; }
.u-alert-success[b-p6nxymv539] { background: rgba(40,167,69,0.12); border: 1px solid #28a745; color: #5fdc80; }
.u-muted[b-p6nxymv539] { color: #888; font-size: 0.9rem; }
.u-section[b-p6nxymv539] {
background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.u-field-row-2[b-p6nxymv539] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.u-field[b-p6nxymv539] {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.u-field label[b-p6nxymv539] { color: #999; font-size: 0.84rem; }
.u-field-inline[b-p6nxymv539] {
flex-direction: row;
align-items: center;
gap: 0.6rem;
}
.u-field-inline label[b-p6nxymv539] { color: #ccc; font-size: 0.9rem; }
.u-field input[type="text"][b-p6nxymv539],
.u-field input[type="number"][b-p6nxymv539],
.u-field input[type="date"][b-p6nxymv539],
.u-field input[type="time"][b-p6nxymv539],
.u-field select[b-p6nxymv539] {
background: #111;
border: 1px solid #3a3a3a;
border-radius: 7px;
padding: 0.5rem 0.75rem;
color: #eee;
font-size: 0.93rem;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
/* El input[type=date] hereda color-scheme:light por defecto, lo que pinta el
ícono nativo del calendario en gris oscuro — invisible sobre el fondo #111.
color-scheme:dark hace que el navegador dibuje ícono y popup del calendario
en paleta clara, visibles y usables sobre el fondo oscuro del formulario. */
.u-field input[type="date"][b-p6nxymv539] {
color-scheme: dark;
cursor: pointer;
}
.u-field input[type="date"][b-p6nxymv539]::-webkit-calendar-picker-indicator {
cursor: pointer;
padding: 0.2rem;
border-radius: 4px;
transition: background-color .15s;
}
.u-field input[type="date"][b-p6nxymv539]::-webkit-calendar-picker-indicator:hover {
background-color: rgba(40,167,69,0.18);
}
.u-field input:focus[b-p6nxymv539],
.u-field select:focus[b-p6nxymv539] { border-color: #28a745; }
.u-field input:disabled[b-p6nxymv539],
.u-field select:disabled[b-p6nxymv539] {
opacity: 0.5;
cursor: not-allowed;
}
.u-field input[type="checkbox"][b-p6nxymv539] {
accent-color: #28a745;
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
}
.u-actions[b-p6nxymv539] { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.u-btn[b-p6nxymv539] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1.1rem;
border-radius: 8px;
border: 1px solid #555;
background: transparent;
color: #ccc;
font-size: 0.9rem;
cursor: pointer;
transition: border-color .2s, color .2s;
white-space: nowrap;
}
.u-btn:hover[b-p6nxymv539] { border-color: #888; color: #fff; }
.u-btn:disabled[b-p6nxymv539] { opacity: 0.4; cursor: not-allowed; }
.u-btn-sm[b-p6nxymv539] { padding: 0.25rem 0.75rem; font-size: 0.82rem; }
.u-btn-primary[b-p6nxymv539] { border-color: #28a745; color: #28a745; }
.u-btn-primary:hover[b-p6nxymv539] { border-color: #5fdc80; color: #5fdc80; }
.u-btn-lg[b-p6nxymv539] { padding: 0.65rem 1.8rem; font-size: 1rem; }
/* ── Desglose Modo C ─────────────────────────────────────────────────── */
.mode-c-breakdown[b-p6nxymv539] {
background: rgba(40,167,69,0.06);
border: 1px solid rgba(40,167,69,0.25);
border-radius: 10px;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.breakdown-row[b-p6nxymv539] {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.88rem;
color: #aaa;
}
.breakdown-row strong[b-p6nxymv539] { color: #5fdc80; font-size: 1rem; }
.breakdown-row .breakdown-value-warn[b-p6nxymv539] { color: #ff6b6b; }
.breakdown-section-title[b-p6nxymv539] {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #666;
font-weight: 700;
margin: 0;
}
/* ── Tabla por categoría ─────────────────────────────────────────────── */
.cat-table[b-p6nxymv539] {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 0.25rem;
}
.cat-row[b-p6nxymv539] {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 0.5rem;
align-items: center;
padding: 0.35rem 0.5rem;
border-radius: 6px;
font-size: 0.84rem;
color: #aaa;
}
.cat-row-header[b-p6nxymv539] {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #555;
padding-bottom: 0.15rem;
}
.cat-row.cat-dominant[b-p6nxymv539] {
background: rgba(40,167,69,0.08);
color: #ccc;
}
.cat-name[b-p6nxymv539] {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.dominant-badge[b-p6nxymv539] {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.1rem 0.4rem;
border-radius: 4px;
background: rgba(40,167,69,0.25);
color: #5fdc80;
border: 1px solid rgba(40,167,69,0.4);
}
/* ── Límite manual ───────────────────────────────────────────────────── */
.manual-limit-wrap[b-p6nxymv539] {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0.85rem 1rem;
background: rgba(255,255,255,0.03);
border: 1px solid #3a3a3a;
border-radius: 8px;
}
/* ── Cobertura de round-robin ────────────────────────────────────────── */
.coverage-pct[b-p6nxymv539] {
font-weight: 700;
font-size: 0.9rem;
}
.coverage-full[b-p6nxymv539] { color: #5fdc80; }
.coverage-partial[b-p6nxymv539] { color: #f0a030; }
/* ── Warning soft (amarillo, no bloquea) ─────────────────────────────── */
.mode-c-warning-soft[b-p6nxymv539] {
background: rgba(240,160,48,0.10);
border: 1px solid rgba(240,160,48,0.40);
border-radius: 8px;
padding: 0.65rem 0.9rem;
font-size: 0.86rem;
color: #f0c060;
line-height: 1.5;
}
/* ── Warning capacidad Modo C ────────────────────────────────────────── */
.mode-c-warning[b-p6nxymv539] {
background: rgba(229,0,0,0.10);
border: 1px solid rgba(229,0,0,0.45);
border-radius: 10px;
padding: 0.85rem 1.1rem;
margin-bottom: 1.25rem;
font-size: 0.88rem;
color: #ff8080;
line-height: 1.5;
}
/* ── Sección título ──────────────────────────────────────────────────── */
.section-title[b-p6nxymv539] {
color: #ccc;
font-size: 1rem;
font-weight: 600;
margin: 0;
}
/* ── Badge de campo calculado ────────────────────────────────────────── */
.field-note[b-p6nxymv539] {
display: inline-block;
margin-left: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.1rem 0.45rem;
border-radius: 4px;
background: rgba(255,255,255,0.07);
color: #888;
vertical-align: middle;
}
.field-note-calc[b-p6nxymv539] {
background: rgba(40,167,69,0.15);
color: #5fdc80;
}
/* ── Resultado calculado inline ──────────────────────────────────────── */
.calc-badge[b-p6nxymv539] {
display: flex;
flex-direction: column;
gap: 0.15rem;
background: rgba(40,167,69,0.08);
border: 1px solid rgba(40,167,69,0.3);
border-radius: 8px;
padding: 0.6rem 0.9rem;
align-self: flex-end;
min-width: 170px;
}
.calc-badge-label[b-p6nxymv539] { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }
.calc-badge-value[b-p6nxymv539] { font-size: 1.05rem; font-weight: 700; color: #5fdc80; }
/* ── Grid de días ────────────────────────────────────────────────────── */
.days-grid[b-p6nxymv539] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.2rem;
}
.day-check[b-p6nxymv539] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.8rem;
background: #1e1e1e;
border: 1px solid #3a3a3a;
border-radius: 6px;
cursor: pointer;
font-size: 0.88rem;
color: #999;
transition: border-color .15s, color .15s, background .15s;
user-select: none;
}
.day-check:hover[b-p6nxymv539] { border-color: #555; color: #ccc; }
.day-check-active[b-p6nxymv539] {
border-color: #28a745;
background: rgba(40,167,69,0.1);
color: #5fdc80;
}
/* ── Slider de saturación ────────────────────────────────────────────── */
.slider-wrap[b-p6nxymv539] {
display: flex;
align-items: center;
gap: 1rem;
}
.slider-wrap input[type="range"][b-p6nxymv539] {
flex: 1;
max-width: 280px;
accent-color: #28a745;
height: 4px;
cursor: pointer;
}
.slider-value[b-p6nxymv539] {
font-size: 1rem;
font-weight: 700;
color: #5fdc80;
min-width: 3rem;
}
/* ── Resumen post-guardado ───────────────────────────────────────────── */
.summary-card[b-p6nxymv539] {
background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
border-radius: 14px;
padding: 2rem;
max-width: 700px;
}
.summary-grid[b-p6nxymv539] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
.summary-item[b-p6nxymv539] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.summary-label[b-p6nxymv539] {
font-size: 0.78rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.summary-value[b-p6nxymv539] {
font-size: 1rem;
color: #ddd;
}
.summary-highlight[b-p6nxymv539] {
font-size: 1.6rem;
font-weight: 700;
color: #5fdc80;
}
.summary-actions[b-p6nxymv539] { display: flex; gap: 1rem; }
/* ── Configuración de Pagos ─────────────────────────────────────────── */
.payment-settings-header[b-p6nxymv539] {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
padding: 0.6rem 0.75rem;
background: linear-gradient(145deg, #2c2c2c, #222);
border-radius: 6px;
border: 1px solid #383838;
transition: border-color .15s;
}
.payment-settings-header:hover[b-p6nxymv539] {
border-color: #555;
}
.payment-toggle-icon[b-p6nxymv539] {
font-size: 1rem;
color: #888;
}
.payment-toggle-title[b-p6nxymv539] {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #ccc;
}
.payment-status-badge[b-p6nxymv539] {
font-size: 0.8rem;
font-weight: 500;
margin-left: auto;
}
.payment-status-none[b-p6nxymv539] { color: #666; }
.payment-status-ok[b-p6nxymv539] { color: #5fdc80; }
.payment-settings-body[b-p6nxymv539] {
padding: 1rem 0.75rem;
border: 1px solid #383838;
border-top: none;
border-radius: 0 0 6px 6px;
background: #1a1a1a;
margin-bottom: 0.5rem;
}
.payment-subsection-title[b-p6nxymv539] {
font-weight: 600;
font-size: 0.88rem;
margin: 1rem 0 0.4rem;
color: #aaa;
}
.payment-enforce-box[b-p6nxymv539] {
margin-top: 1rem;
padding: 0.75rem;
background: rgba(255,255,255,0.04);
border-radius: 6px;
border: 1px solid #383838;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 680px) {
.u-field-row-2[b-p6nxymv539] { grid-template-columns: 1fr; }
.summary-grid[b-p6nxymv539] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* 🔷 Panel de filtros */
.filter-panel[b-w9ftz8hs8s] {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 1.5rem;
}
/* 🔹 Contenedor de filtros */
.filters[b-w9ftz8hs8s] {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
/* 🔸 Grupo individual de filtro */
.filter-group[b-w9ftz8hs8s] {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* 🔸 Etiqueta alineada a la izquierda */
.filter-group label[b-w9ftz8hs8s] {
width: 110px;
font-weight: bold;
color: #333;
}
/* 🔸 Campos de entrada y select */
.filter-group input[b-w9ftz8hs8s],
.filter-group select[b-w9ftz8hs8s] {
width: 185px;
padding: 0.25rem 0.5rem;
font-size: 0.9rem;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
/* 🔸 Botones dentro de filtros */
.filters button[b-w9ftz8hs8s] {
padding: 0.3rem 0.8rem;
font-size: 0.9rem;
cursor: pointer;
border-radius: 4px;
border: 1px solid #ccc;
background-color: #eee;
transition: background-color 0.2s ease;
}
.filters button:hover[b-w9ftz8hs8s] {
background-color: #ddd;
}
/* 🔷 Selector de ligas */
.league-selector[b-w9ftz8hs8s] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1rem;
}
.league-pill[b-w9ftz8hs8s] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
border-radius: 999px;
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.league-pill img[b-w9ftz8hs8s] {
width: 24px;
height: 24px;
border-radius: 50%;
}
.league-pill.selected[b-w9ftz8hs8s] {
background-color: #000;
color: #fff;
border-color: #000;
}
/* 🔷 Encabezado de liga */
.league-header[b-w9ftz8hs8s] {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding: 0.5rem 0;
border-bottom: 2px solid #ccc;
}
.league-header img[b-w9ftz8hs8s] {
width: 48px;
height: 48px;
border-radius: 50%;
transition: transform 0.3s ease;
}
.league-header img:hover[b-w9ftz8hs8s] {
transform: rotate(-5deg) scale(1.05);
}
.league-info h2[b-w9ftz8hs8s] {
margin: 0;
font-size: 1.2rem;
font-weight: bold;
color: #222;
}
.league-info p[b-w9ftz8hs8s] {
margin: 0.2rem 0 0 0;
font-size: 0.9rem;
color: #555;
}
/* 🔷 Contenedor principal */
.calendar-container[b-w9ftz8hs8s] {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 360px;
margin: auto;
}
.calendar-container h2[b-w9ftz8hs8s] {
margin-top: 0;
}
/* 🔷 Lista de partidos */
.match-list[b-w9ftz8hs8s] {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.match-day h3[b-w9ftz8hs8s] {
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: bold;
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 0.25rem;
}
.match-list p[b-w9ftz8hs8s] {
text-align: center;
font-style: italic;
color: #666;
}
/* 🔷 Mensaje de temporada vacía */
.no-season-message[b-w9ftz8hs8s] {
text-align: center;
font-size: 1rem;
color: #a00;
font-weight: bold;
margin-top: 1rem;
}
/* /Components/Pages/Clubs.razor.rz.scp.css */
/* ============================================================
Clubes — directorio público
Hereda la identidad deportiva del sitio: display condensado
Teko, verde de cancha (#28a745), tinta #16181b, papel blanco.
============================================================ */
.clubs-page[b-72ig71mfoc] {
--ink: #16181b;
--court: #28a745;
--court-dark: #1e7e34;
--paper: #ffffff;
--line: #e2e2e2;
--muted: #6b7280;
--display: 'Teko', 'Barlow Condensed', system-ui, sans-serif;
max-width: 1040px;
margin: 0 auto;
padding: 3.25rem clamp(1rem, 4vw, 2rem) 4rem;
color: var(--ink);
}
/* ── Encabezado ─────────────────────────────────────────────── */
.clubs-hero[b-72ig71mfoc] {
text-align: center;
margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}
.clubs-hero h1[b-72ig71mfoc] {
display: inline-flex;
align-items: center;
gap: 0.16em;
font-family: var(--display);
font-weight: 600;
font-size: clamp(2.9rem, 9vw, 4.75rem);
line-height: 0.85;
letter-spacing: 0.01em;
margin: 0;
color: var(--ink);
}
/* Balón de voleibol tras el título — hereda el color tinta vía currentColor */
.clubs-hero__ball[b-72ig71mfoc] {
flex: none;
font-size: 0.72em;
line-height: 1;
}
/* Banda de red de voleibol bajo el título: cinta superior/inferior
sólida y malla vertical entre ellas. */
.clubs-hero__net[b-72ig71mfoc] {
width: 104px;
height: 12px;
margin: 0.85rem auto 0;
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
background: repeating-linear-gradient(
90deg,
var(--ink) 0 2px,
transparent 2px 8px
);
}
.clubs-hero__count[b-72ig71mfoc] {
margin: 0.9rem 0 0;
font-size: 0.95rem;
color: var(--muted);
}
/* ── Grilla ─────────────────────────────────────────────────── */
.clubs-grid[b-72ig71mfoc] {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: clamp(14px, 2.4vw, 22px);
}
.clubs-grid > li[b-72ig71mfoc] {
display: flex;
}
/* ── Tarjeta ────────────────────────────────────────────────── */
.club-card[b-72ig71mfoc] {
display: flex;
flex-direction: column;
width: 100%;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.club-card:hover[b-72ig71mfoc],
.club-card:focus-visible[b-72ig71mfoc] {
border-color: var(--court);
box-shadow: 0 8px 22px rgba(22, 24, 27, 0.13);
}
.club-card:focus-visible[b-72ig71mfoc] {
outline: 2px solid var(--court);
outline-offset: 2px;
}
.club-card__media[b-72ig71mfoc] {
display: block;
aspect-ratio: 4 / 3;
background: #e9e9ea;
}
.club-card__media img[b-72ig71mfoc] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.club-card__placeholder[b-72ig71mfoc] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: var(--display);
font-weight: 600;
font-size: 3.4rem;
color: #fff;
background: linear-gradient(135deg, var(--court), var(--court-dark));
}
/* Filo verde de cancha entre la foto y el nombre */
.club-card__body[b-72ig71mfoc] {
display: flex;
align-items: center;
justify-content: center;
padding: 11px 14px 13px;
border-top: 3px solid var(--court);
}
.club-card__name[b-72ig71mfoc] {
font-family: var(--display);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.05;
letter-spacing: 0.01em;
color: var(--ink);
text-align: center;
}
/* ── Vacío ──────────────────────────────────────────────────── */
.clubs-empty[b-72ig71mfoc] {
text-align: center;
color: var(--muted);
padding: 3rem 1.5rem;
border: 1px dashed var(--line);
border-radius: 14px;
}
/* ── Esqueleto de carga ─────────────────────────────────────── */
.club-skeleton[b-72ig71mfoc] {
width: 100%;
aspect-ratio: 4 / 3.55;
border-radius: 14px;
border: 1px solid var(--line);
background: #ededee;
}
/* ── Ajustes por viewport ───────────────────────────────────── */
@media (min-width: 768px) {
.clubs-page[b-72ig71mfoc] {
padding-top: 2.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.club-card[b-72ig71mfoc] {
transition: none;
}
}
/* /Components/Pages/Conocenos.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
Tokens — ancla visual en la propia identidad "CyberArena" del
marcador real (cian/magenta) + el acento cálido de la cancha
real (ámbar), como puente entre lo humano y lo digital.
Tipografía: reutiliza fuentes YA cargadas en App.razor — cero
requests nuevos. Bricolage Grotesque = voz principal, Orbitron
= eco puntual del propio marcador, JetBrains Mono = utilitaria.
══════════════════════════════════════════════════════════════ */
.conocenos-page[b-cg204bc2ha] {
--ink: #060812;
--panel: #0e1220;
--panel-border: rgba(148, 178, 224, .14);
--cyan: #2fd8ea;
--magenta: #ec1fa3;
--amber: #f5a623;
--paper: #f3f6fc;
--paper-dim: #93a0be;
--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--font-echo: 'Orbitron', sans-serif;
background: var(--ink);
color: var(--paper);
font-family: var(--font-display);
overflow-x: hidden;
}
.conocenos-page *[b-cg204bc2ha] { box-sizing: border-box; }
.conocenos-page img[b-cg204bc2ha] {
max-width: 100%;
display: block;
}
/* ── Scroll reveal ── */
.conocenos-page .reveal[b-cg204bc2ha] {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.conocenos-page .reveal.in-view[b-cg204bc2ha] {
opacity: 1;
transform: none;
}
.conocenos-page .showcase-grid .reveal:nth-child(2)[b-cg204bc2ha] { transition-delay: .08s; }
.conocenos-page .showcase-grid .reveal:nth-child(3)[b-cg204bc2ha] { transition-delay: .16s; }
.conocenos-page .chip-grid .chip:nth-child(2)[b-cg204bc2ha] { transition-delay: .06s; }
.conocenos-page .chip-grid .chip:nth-child(3)[b-cg204bc2ha] { transition-delay: .12s; }
.conocenos-page .chip-grid .chip:nth-child(4)[b-cg204bc2ha] { transition-delay: .18s; }
.conocenos-page .chip-grid .chip:nth-child(5)[b-cg204bc2ha] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
.conocenos-page .reveal[b-cg204bc2ha] {
opacity: 1;
transform: none;
transition: none;
}
}
/* ── Botones ── */
.conocenos-page .btn[b-cg204bc2ha] {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: .95rem;
text-decoration: none;
border-radius: 999px;
padding: .9rem 1.6rem;
white-space: nowrap;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.conocenos-page .btn-primary[b-cg204bc2ha] {
background: linear-gradient(135deg, var(--cyan), #1aa9c4);
color: #041014;
box-shadow: 0 0 0 1px rgba(47,216,234,.4), 0 8px 30px -8px rgba(47,216,234,.7);
}
.conocenos-page .btn-primary:hover[b-cg204bc2ha] { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(47,216,234,.6), 0 12px 34px -6px rgba(47,216,234,.85); }
.conocenos-page .btn-ghost[b-cg204bc2ha] {
background: rgba(255,255,255,.04);
color: var(--paper);
border: 1.5px solid var(--panel-border);
}
.conocenos-page .btn-ghost:hover[b-cg204bc2ha] { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.conocenos-page .btn-lg[b-cg204bc2ha] { padding: 1.05rem 2rem; font-size: 1.05rem; }
.conocenos-page button.btn[b-cg204bc2ha] {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
margin: 0;
}
/* ── Eyebrows / labels ── */
.conocenos-page .eyebrow[b-cg204bc2ha] {
font-family: var(--font-mono);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cyan);
}
.conocenos-page .eyebrow-cyan[b-cg204bc2ha] { color: var(--cyan); }
.conocenos-page .set-eyebrow[b-cg204bc2ha] {
font-family: var(--font-echo);
font-weight: 800;
font-size: .82rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cyan);
display: inline-block;
margin-bottom: .6rem;
}
.conocenos-page .set-eyebrow-amber[b-cg204bc2ha] { color: var(--amber); }
/* ══════════════════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════════════════ */
.conocenos-page .hero[b-cg204bc2ha] {
position: relative;
padding: 4.5rem 1.25rem 3rem;
overflow: hidden;
}
.conocenos-page .hero-bg[b-cg204bc2ha] {
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 15% 10%, rgba(47,216,234,.16), transparent 60%),
radial-gradient(50% 45% at 90% 30%, rgba(236,31,163,.14), transparent 60%),
repeating-linear-gradient(0deg, rgba(148,178,224,.05) 0 1px, transparent 1px 42px),
repeating-linear-gradient(90deg, rgba(148,178,224,.05) 0 1px, transparent 1px 42px);
mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.conocenos-page .hero-inner[b-cg204bc2ha] {
position: relative;
max-width: 1180px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.conocenos-page .hero-title[b-cg204bc2ha] {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.3rem, 8vw, 4.4rem);
line-height: 1.03;
letter-spacing: -.01em;
margin: .7rem 0 1.1rem;
}
.conocenos-page .hero-sub[b-cg204bc2ha] {
font-size: clamp(1rem, 2.3vw, 1.2rem);
color: var(--paper-dim);
max-width: 42rem;
line-height: 1.55;
}
.conocenos-page .hero-ctas[b-cg204bc2ha] {
display: flex;
flex-wrap: wrap;
gap: .9rem;
margin-top: 1.6rem;
}
.conocenos-page .hero-shot[b-cg204bc2ha] {
position: relative;
max-width: 640px;
margin: 0 auto;
width: 100%;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--panel-border);
box-shadow: 0 30px 80px -20px rgba(47,216,234,.35), 0 0 0 1px rgba(255,255,255,.03);
transform: rotate(-1.2deg);
}
.conocenos-page .hero-shot img[b-cg204bc2ha] { width: 100%; }
.conocenos-page .hero-shot-tag[b-cg204bc2ha] {
position: absolute;
bottom: .8rem;
left: .8rem;
font-family: var(--font-mono);
font-size: .72rem;
letter-spacing: .06em;
background: rgba(6,8,18,.75);
backdrop-filter: blur(4px);
border: 1px solid var(--panel-border);
padding: .35rem .7rem;
border-radius: 999px;
color: var(--paper);
}
.conocenos-page .hero-scroll-cue[b-cg204bc2ha] {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.conocenos-page .hero-scroll-cue span[b-cg204bc2ha] {
width: 1.5px;
height: 46px;
background: linear-gradient(to bottom, var(--cyan), transparent);
display: block;
animation: cue-pulse-b-cg204bc2ha 2s ease-in-out infinite;
}
@keyframes cue-pulse-b-cg204bc2ha { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@media (min-width: 920px) {
.conocenos-page .hero[b-cg204bc2ha] { padding: 6rem 2.5rem 4rem; }
.conocenos-page .hero-inner[b-cg204bc2ha] { flex-direction: row; align-items: center; gap: 3.5rem; }
.conocenos-page .hero-copy[b-cg204bc2ha] { flex: 1.05; }
.conocenos-page .hero-shot[b-cg204bc2ha] { flex: 1; margin: 0; }
}
/* ══════════════════════════════════════════════════════════════
FREE TICKER — ribbon LED de marcador, en bucle
══════════════════════════════════════════════════════════════ */
.conocenos-page .free-ticker[b-cg204bc2ha] {
background: linear-gradient(90deg, rgba(245,166,35,.16), rgba(47,216,234,.1));
border-top: 1px solid var(--panel-border);
border-bottom: 1px solid var(--panel-border);
overflow: hidden;
padding: .65rem 0;
}
.conocenos-page .free-ticker-track[b-cg204bc2ha] {
display: flex;
width: max-content;
animation: ticker-scroll-b-cg204bc2ha 26s linear infinite;
}
.conocenos-page .free-ticker-group[b-cg204bc2ha] {
display: flex;
flex: none;
align-items: center;
}
.conocenos-page .free-ticker-item[b-cg204bc2ha] {
font-family: var(--font-mono);
font-weight: 700;
font-size: .8rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--amber);
white-space: nowrap;
padding: 0 1.6rem;
}
.conocenos-page .free-ticker-item strong[b-cg204bc2ha] { color: var(--cyan); }
.conocenos-page .free-ticker-sep[b-cg204bc2ha] { color: var(--panel-border); }
@keyframes ticker-scroll-b-cg204bc2ha {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.conocenos-page .free-ticker-track[b-cg204bc2ha] { animation: none; overflow-x: auto; }
}
/* ══════════════════════════════════════════════════════════════
PAIN STRIP
══════════════════════════════════════════════════════════════ */
.conocenos-page .pain[b-cg204bc2ha] {
max-width: 780px;
margin: 0 auto;
padding: 3rem 1.25rem;
text-align: center;
}
.conocenos-page .pain-line[b-cg204bc2ha] {
font-family: var(--font-mono);
font-size: clamp(.95rem, 2.6vw, 1.15rem);
color: var(--paper-dim);
margin: 0 0 .9rem;
}
.conocenos-page .pain-close[b-cg204bc2ha] {
color: var(--amber);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.2rem, 3.4vw, 1.6rem);
margin-top: 1.4rem;
}
/* ══════════════════════════════════════════════════════════════
SETS (secciones temáticas)
══════════════════════════════════════════════════════════════ */
.conocenos-page .set[b-cg204bc2ha] {
padding: 3.5rem 1.25rem;
max-width: 1180px;
margin: 0 auto;
}
.conocenos-page .set-alt[b-cg204bc2ha] {
background: linear-gradient(180deg, transparent, rgba(245,166,35,.045) 20%, rgba(245,166,35,.045) 80%, transparent);
}
.conocenos-page .set-header[b-cg204bc2ha] {
max-width: 46rem;
margin-bottom: 2.2rem;
}
.conocenos-page .set-title[b-cg204bc2ha] {
font-size: clamp(1.7rem, 4.4vw, 2.6rem);
font-weight: 800;
line-height: 1.08;
margin: 0 0 .6rem;
}
.conocenos-page .set-sub[b-cg204bc2ha] {
color: var(--paper-dim);
font-size: clamp(.95rem, 2vw, 1.08rem);
line-height: 1.5;
margin: 0;
}
/* ── Showcase (screenshots reales) ── */
.conocenos-page .showcase-grid[b-cg204bc2ha] {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.conocenos-page .showcase-grid.two-up[b-cg204bc2ha] { grid-template-columns: 1fr; }
@media (min-width: 720px) {
.conocenos-page .showcase-grid[b-cg204bc2ha] { grid-template-columns: repeat(3, 1fr); }
.conocenos-page .showcase-grid.two-up[b-cg204bc2ha] { grid-template-columns: repeat(2, 1fr); }
}
.conocenos-page .showcase[b-cg204bc2ha] {
margin: 0;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
overflow: hidden;
transition: transform .25s ease, border-color .25s ease;
}
.conocenos-page .showcase:hover[b-cg204bc2ha] { transform: translateY(-4px); border-color: rgba(47,216,234,.4); }
.conocenos-page .showcase img[b-cg204bc2ha] { aspect-ratio: 1329 / 925; object-fit: cover; object-position: top; }
.conocenos-page .showcase figcaption[b-cg204bc2ha] { padding: 1.1rem 1.2rem 1.3rem; }
.conocenos-page .showcase figcaption strong[b-cg204bc2ha] { display: block; font-size: 1.05rem; margin-bottom: .35rem; }
.conocenos-page .showcase figcaption span[b-cg204bc2ha] { color: var(--paper-dim); font-size: .92rem; line-height: 1.45; }
/* ── Chips (feature cards compactos, con icono como "imagen") ── */
.conocenos-page .chip-grid[b-cg204bc2ha] {
display: grid;
grid-template-columns: 1fr;
gap: 1.1rem;
margin-top: 2.2rem;
}
@media (min-width: 640px) {
.conocenos-page .chip-grid[b-cg204bc2ha] { grid-template-columns: repeat(2, 1fr); }
.conocenos-page .chip-grid.three-up[b-cg204bc2ha] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
.conocenos-page .chip-grid.five-up[b-cg204bc2ha] { grid-template-columns: repeat(3, 1fr); }
}
.conocenos-page .chip[b-cg204bc2ha] {
display: flex;
gap: 1rem;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 14px;
padding: 1.2rem;
}
.conocenos-page .chip-free[b-cg204bc2ha] {
border-color: rgba(245,166,35,.4);
background: linear-gradient(160deg, rgba(245,166,35,.08), var(--panel));
}
.conocenos-page .chip-free .chip-icon[b-cg204bc2ha] {
background: radial-gradient(circle at 30% 20%, rgba(245,166,35,.35), rgba(236,31,163,.15));
}
.conocenos-page .chip-icon[b-cg204bc2ha] {
flex: none;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border-radius: 12px;
background: radial-gradient(circle at 30% 20%, rgba(47,216,234,.28), rgba(236,31,163,.18));
border: 1px solid var(--panel-border);
}
.conocenos-page .chip strong[b-cg204bc2ha] { display: block; margin-bottom: .3rem; font-size: 1rem; }
.conocenos-page .chip p[b-cg204bc2ha] { margin: 0; color: var(--paper-dim); font-size: .9rem; line-height: 1.5; }
.conocenos-page .chip .spark[b-cg204bc2ha] { width: 100%; height: 32px; margin-top: .6rem; }
.conocenos-page .chip .spark polyline[b-cg204bc2ha] { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ── Set 3: historial y estadísticas, con más presencia (split real) ── */
.conocenos-page .showcase-lg[b-cg204bc2ha] {
box-shadow: 0 26px 64px -20px rgba(47,216,234,.4);
}
.conocenos-page .set-stats-secondary[b-cg204bc2ha] {
margin-top: 1.8rem;
}
.conocenos-page .chip-grid.stacked[b-cg204bc2ha] {
display: flex;
flex-direction: column;
margin-top: 0;
height: 100%;
}
.conocenos-page .chip-grid.stacked .chip:last-child[b-cg204bc2ha] {
flex: 1;
}
/* ── Split (diagrama ilustrativo + lista de features) ── */
.conocenos-page .split[b-cg204bc2ha] {
display: grid;
grid-template-columns: 1fr;
gap: 2.2rem;
align-items: center;
}
@media (min-width: 900px) {
.conocenos-page .split[b-cg204bc2ha] { grid-template-columns: 1fr 1fr; gap: 3rem; }
.conocenos-page .split-reverse .split-art[b-cg204bc2ha] { order: 2; }
.conocenos-page .split-reverse .split-copy[b-cg204bc2ha] { order: 1; }
}
.conocenos-page .split-copy[b-cg204bc2ha] {
display: flex;
flex-direction: column;
gap: 1.3rem;
}
.conocenos-page .feature-line strong[b-cg204bc2ha] { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.conocenos-page .feature-line p[b-cg204bc2ha] { margin: 0; color: var(--paper-dim); font-size: .93rem; line-height: 1.5; }
.conocenos-page .diagram-card[b-cg204bc2ha] {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
padding: 1.3rem;
}
.conocenos-page .diagram-title[b-cg204bc2ha] {
font-family: var(--font-mono);
font-size: .68rem;
letter-spacing: .1em;
color: var(--paper-dim);
margin-bottom: 1rem;
}
/* Diagrama SET 2: grilla de jornada */
.conocenos-page .sched-grid[b-cg204bc2ha] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .6rem;
}
.conocenos-page .sched-cell[b-cg204bc2ha] {
border-radius: 10px;
padding: .7rem .6rem;
font-size: .78rem;
font-family: var(--font-mono);
min-height: 3.2rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: .15rem;
border: 1px dashed var(--panel-border);
}
.conocenos-page .sched-cell.empty[b-cg204bc2ha] { color: var(--paper-dim); opacity: .5; align-items: center; }
.conocenos-page .sched-cell.dragging[b-cg204bc2ha] {
color: var(--amber);
border-style: dashed;
border-color: var(--amber);
align-items: center;
animation: drag-pulse-b-cg204bc2ha 1.6s ease-in-out infinite;
}
@keyframes drag-pulse-b-cg204bc2ha { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.conocenos-page .sched-cell span[b-cg204bc2ha] { color: var(--paper-dim); font-size: .68rem; }
.conocenos-page .sched-cell.filled[b-cg204bc2ha] { border-style: solid; }
.conocenos-page .sched-cell.filled.cyan[b-cg204bc2ha] { background: rgba(47,216,234,.12); border-color: rgba(47,216,234,.4); color: var(--cyan); }
.conocenos-page .sched-cell.filled.magenta[b-cg204bc2ha] { background: rgba(236,31,163,.12); border-color: rgba(236,31,163,.4); color: var(--magenta); }
.conocenos-page .sched-cell.filled.amber[b-cg204bc2ha] { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.4); color: var(--amber); }
/* Diagrama SET 4: barras de cumplimiento */
.conocenos-page .kpi-bars[b-cg204bc2ha] { display: flex; flex-direction: column; gap: .9rem; }
.conocenos-page .kpi-row[b-cg204bc2ha] {
display: grid;
grid-template-columns: 5.5rem 1fr 3rem;
align-items: center;
gap: .7rem;
font-size: .8rem;
font-family: var(--font-mono);
}
.conocenos-page .kpi-track[b-cg204bc2ha] {
height: .5rem;
background: rgba(255,255,255,.06);
border-radius: 999px;
overflow: hidden;
}
.conocenos-page .kpi-fill[b-cg204bc2ha] { height: 100%; border-radius: 999px; }
.conocenos-page .kpi-fill.green[b-cg204bc2ha] { background: #2fd88a; }
.conocenos-page .kpi-fill.amber[b-cg204bc2ha] { background: var(--amber); }
.conocenos-page .kpi-fill.red[b-cg204bc2ha] { background: #ec4f4f; }
.conocenos-page .kpi-pct[b-cg204bc2ha] { text-align: right; }
.conocenos-page .kpi-pct.green[b-cg204bc2ha] { color: #2fd88a; }
.conocenos-page .kpi-pct.amber[b-cg204bc2ha] { color: var(--amber); }
.conocenos-page .kpi-pct.red[b-cg204bc2ha] { color: #ec4f4f; }
/* Segundo panel diagrama SET 4: pago por jugador */
.conocenos-page .pay-roster-card[b-cg204bc2ha] { margin-top: 1.1rem; }
.conocenos-page .pay-roster[b-cg204bc2ha] { display: flex; flex-direction: column; gap: .55rem; }
.conocenos-page .pay-row[b-cg204bc2ha] {
display: grid;
grid-template-columns: 2.1rem 1fr auto;
align-items: center;
gap: .7rem;
font-family: var(--font-mono);
font-size: .8rem;
padding: .5rem .6rem;
border-radius: 9px;
background: rgba(255,255,255,.03);
border: 1px solid var(--panel-border);
}
.conocenos-page .pay-jersey[b-cg204bc2ha] { color: var(--paper-dim); }
.conocenos-page .pay-name[b-cg204bc2ha] { color: var(--paper); }
.conocenos-page .pay-badge[b-cg204bc2ha] {
justify-self: end;
font-size: .7rem;
letter-spacing: .03em;
padding: .25rem .6rem;
border-radius: 999px;
white-space: nowrap;
border: 1px solid transparent;
}
.conocenos-page .pay-badge.paid[b-cg204bc2ha] { color: #2fd88a; background: rgba(47,216,138,.12); border-color: rgba(47,216,138,.35); }
.conocenos-page .pay-badge.partial[b-cg204bc2ha] { color: var(--amber); background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.35); }
.conocenos-page .pay-badge.pending[b-cg204bc2ha] { color: #ec4f4f; background: rgba(236,79,79,.12); border-color: rgba(236,79,79,.35); }
/* ══════════════════════════════════════════════════════════════
MATCH POINT — cierre estilo pantalla de campeón
══════════════════════════════════════════════════════════════ */
.conocenos-page .matchpoint[b-cg204bc2ha] {
position: relative;
padding: 5rem 1.25rem;
text-align: center;
background:
radial-gradient(60% 60% at 50% 0%, rgba(47,216,234,.18), transparent 65%),
radial-gradient(50% 50% at 50% 100%, rgba(236,31,163,.14), transparent 65%),
#050710;
border-top: 1px solid var(--panel-border);
border-bottom: 1px solid var(--panel-border);
}
.conocenos-page .matchpoint-inner[b-cg204bc2ha] { max-width: 620px; margin: 0 auto; }
.conocenos-page .mp-eyebrow[b-cg204bc2ha] {
font-family: var(--font-mono);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--amber);
}
.conocenos-page .mp-crown[b-cg204bc2ha] {
font-size: 2.4rem;
color: var(--cyan);
text-shadow: 0 0 22px rgba(47,216,234,.8);
margin: 1rem 0 .3rem;
}
.conocenos-page .mp-label[b-cg204bc2ha] {
display: inline-block;
font-family: var(--font-echo);
font-size: .78rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--paper-dim);
background: rgba(47,216,234,.08);
border: 1px solid rgba(47,216,234,.3);
padding: .3rem .9rem;
border-radius: 999px;
margin-bottom: 1.1rem;
}
.conocenos-page .mp-title[b-cg204bc2ha] {
font-size: clamp(1.9rem, 5.4vw, 3.1rem);
font-weight: 800;
line-height: 1.08;
margin: 0 0 1rem;
text-shadow: 0 0 40px rgba(47,216,234,.35);
}
.conocenos-page .mp-sub[b-cg204bc2ha] {
color: var(--paper-dim);
font-size: 1.02rem;
line-height: 1.55;
margin: 0 auto 2rem;
max-width: 34rem;
}
.conocenos-page .mp-ctas[b-cg204bc2ha] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .9rem;
}
/* ══════════════════════════════════════════════════════════════
COMPARTE
══════════════════════════════════════════════════════════════ */
.conocenos-page .share[b-cg204bc2ha] {
padding: 3.5rem 1.25rem;
text-align: center;
}
.conocenos-page .share-inner[b-cg204bc2ha] { max-width: 640px; margin: 0 auto; }
.conocenos-page .share-eyebrow[b-cg204bc2ha] {
font-family: var(--font-mono);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--magenta);
}
.conocenos-page .share-title[b-cg204bc2ha] {
font-size: clamp(1.5rem, 3.6vw, 2.1rem);
font-weight: 800;
line-height: 1.12;
margin: .7rem 0 .8rem;
}
.conocenos-page .share-sub[b-cg204bc2ha] {
color: var(--paper-dim);
font-size: 1rem;
line-height: 1.55;
margin: 0 auto 1.8rem;
max-width: 34rem;
}
.conocenos-page .share-ctas[b-cg204bc2ha] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .9rem;
}
/* ══════════════════════════════════════════════════════════════
CONTACTO
══════════════════════════════════════════════════════════════ */
.conocenos-page .contact[b-cg204bc2ha] {
padding: 3.5rem 1.25rem 4rem;
text-align: center;
border-top: 1px solid var(--panel-border);
}
.conocenos-page .contact-inner[b-cg204bc2ha] { max-width: 560px; margin: 0 auto; }
.conocenos-page .contact-eyebrow[b-cg204bc2ha] {
font-family: var(--font-mono);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cyan);
}
.conocenos-page .contact-title[b-cg204bc2ha] {
font-size: clamp(1.4rem, 3.2vw, 1.9rem);
font-weight: 800;
line-height: 1.12;
margin: .7rem 0 .8rem;
}
.conocenos-page .contact-sub[b-cg204bc2ha] {
color: var(--paper-dim);
font-size: .96rem;
line-height: 1.55;
margin: 0 auto 1.6rem;
max-width: 32rem;
}
.conocenos-page .contact-email[b-cg204bc2ha] {
display: inline-block;
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(1.1rem, 3vw, 1.4rem);
letter-spacing: .01em;
color: var(--cyan);
text-decoration: none;
padding: .8rem 1.6rem;
border: 1.5px solid rgba(47,216,234,.4);
border-radius: 999px;
background: rgba(47,216,234,.06);
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.conocenos-page .contact-email:hover[b-cg204bc2ha] {
transform: translateY(-2px);
border-color: var(--cyan);
background: rgba(47,216,234,.12);
}
.conocenos-page .contact-alt[b-cg204bc2ha] {
display: block;
margin-top: 1rem;
font-family: var(--font-mono);
font-size: .85rem;
color: var(--paper-dim);
text-decoration: none;
}
.conocenos-page .contact-alt:hover[b-cg204bc2ha] { color: var(--amber); }
/* ══════════════════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════════════════ */
.conocenos-page .conocenos-footer[b-cg204bc2ha] {
display: flex;
flex-direction: column;
align-items: center;
gap: .8rem;
padding: 2.6rem 1.25rem 3.2rem;
text-align: center;
}
.conocenos-page .footer-logo[b-cg204bc2ha] { max-width: 150px; opacity: .85; }
.conocenos-page .conocenos-footer a[b-cg204bc2ha] {
font-family: var(--font-mono);
font-size: .85rem;
color: var(--paper-dim);
text-decoration: none;
}
.conocenos-page .conocenos-footer a:hover[b-cg204bc2ha] { color: var(--cyan); }
/* ── Accesibilidad: foco visible ── */
.conocenos-page a:focus-visible[b-cg204bc2ha],
.conocenos-page .btn:focus-visible[b-cg204bc2ha] {
outline: 2px solid var(--cyan);
outline-offset: 3px;
}
/* /Components/Pages/CreateTeam.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────── */
.ct-page[b-2oragfzaoj] {
max-width: 820px;
margin: 2rem auto;
padding: 0 1.25rem;
}
.ct-header[b-2oragfzaoj] {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.ct-header h2[b-2oragfzaoj] {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
.ct-back[b-2oragfzaoj] {
background: none;
border: none;
color: #28a745;
font-size: 0.95rem;
cursor: pointer;
padding: 0;
white-space: nowrap;
}
.ct-back:hover[b-2oragfzaoj] { text-decoration: underline; }
/* ── Toast ───────────────────────────────────────────────────── */
.ct-toast[b-2oragfzaoj] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
border-radius: 8px;
margin-bottom: 1rem;
font-size: 0.92rem;
animation: ct-slide-in-b-2oragfzaoj 0.2s ease;
}
.ct-toast--ok[b-2oragfzaoj] { background: #d4edda; border-left: 4px solid #28a745; color: #155724; }
.ct-toast--err[b-2oragfzaoj] { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; }
.ct-toast__close[b-2oragfzaoj] {
background: none;
border: none;
cursor: pointer;
font-size: 0.95rem;
opacity: 0.55;
padding: 0;
line-height: 1;
flex-shrink: 0;
}
.ct-toast__close:hover[b-2oragfzaoj] { opacity: 1; }
@keyframes ct-slide-in-b-2oragfzaoj {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Card ────────────────────────────────────────────────────── */
.ct-card[b-2oragfzaoj] {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
/* ── Two-column body ─────────────────────────────────────────── */
.ct-body[b-2oragfzaoj] {
display: grid;
grid-template-columns: 190px 1fr;
}
/* ── Logo column ─────────────────────────────────────────────── */
.ct-logo-col[b-2oragfzaoj] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 2rem 1.25rem;
background: #f5f5f5;
border-right: 1px solid #e8e8e8;
}
.ct-logo-box[b-2oragfzaoj] {
display: flex;
align-items: center;
justify-content: center;
width: 140px;
height: 140px;
border-radius: 12px;
border: 2px dashed #bbb;
background: #ececec;
cursor: pointer;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ct-logo-box:hover[b-2oragfzaoj] {
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}
.ct-logo-img[b-2oragfzaoj] {
width: 100%;
height: 100%;
object-fit: cover;
}
.ct-logo-empty[b-2oragfzaoj] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
color: #aaa;
text-align: center;
padding: 0.5rem;
}
.ct-logo-icon[b-2oragfzaoj] { font-size: 2.4rem; }
.ct-logo-hint[b-2oragfzaoj] { font-size: 0.72rem; line-height: 1.35; }
.ct-logo-sub[b-2oragfzaoj] {
margin: 0;
font-size: 0.72rem;
color: #aaa;
text-align: center;
}
.ct-btn-danger-sm[b-2oragfzaoj] {
background: none;
border: 1.5px solid #dc3545;
color: #dc3545;
border-radius: 20px;
padding: 0.28rem 0.8rem;
font-size: 0.78rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.ct-btn-danger-sm:hover[b-2oragfzaoj] { background: #dc3545; color: #fff; }
/* ── Fields column ───────────────────────────────────────────── */
.ct-fields[b-2oragfzaoj] {
padding: 1.75rem 1.75rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
/* ── Single field ────────────────────────────────────────────── */
.ct-field[b-2oragfzaoj] {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.ct-field label[b-2oragfzaoj] {
font-size: 0.83rem;
font-weight: 600;
color: #444;
}
.ct-req[b-2oragfzaoj] { color: #dc3545; }
.ct-opt[b-2oragfzaoj] { font-weight: 400; color: #aaa; font-size: 0.78rem; }
.ct-input[b-2oragfzaoj] {
width: 100%;
padding: 0.52rem 0.7rem;
border: 1.5px solid #d0d0d0;
border-radius: 8px;
font-size: 0.92rem;
background: #fafafa;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
color: #222;
}
.ct-input:focus[b-2oragfzaoj] {
outline: none;
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.12);
background: #fff;
}
/* Error state */
.ct-field--err .ct-input[b-2oragfzaoj] { border-color: #dc3545; }
.ct-field--err .ct-input:focus[b-2oragfzaoj] { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); }
.ct-err-msg[b-2oragfzaoj] {
font-size: 0.76rem;
color: #dc3545;
}
/* ── Two-field row ───────────────────────────────────────────── */
.ct-row[b-2oragfzaoj] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
}
/* ── Pill group (days / time) ────────────────────────────────── */
.ct-pills[b-2oragfzaoj] {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.ct-pill[b-2oragfzaoj] {
padding: 0.32rem 0.8rem;
border-radius: 20px;
border: 1.5px solid #ccc;
background: #f5f5f5;
color: #555;
font-size: 0.82rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
white-space: nowrap;
}
.ct-pill:hover[b-2oragfzaoj] { border-color: #28a745; color: #28a745; }
.ct-pill.ct-pill--on[b-2oragfzaoj] { background: #28a745; border-color: #28a745; color: #fff; font-weight: 600; }
/* ── Actions bar ─────────────────────────────────────────────── */
.ct-actions[b-2oragfzaoj] {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.75rem;
padding: 1.1rem 1.75rem;
border-top: 1px solid #efefef;
background: #fafafa;
}
.ct-btn-primary[b-2oragfzaoj] {
padding: 0.58rem 1.5rem;
background: #28a745;
color: #fff;
border: none;
border-radius: 8px;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.ct-btn-primary:hover:not(:disabled)[b-2oragfzaoj] { background: #218838; transform: translateY(-1px); }
.ct-btn-primary:disabled[b-2oragfzaoj] { opacity: 0.6; cursor: not-allowed; }
.ct-btn-secondary[b-2oragfzaoj] {
padding: 0.58rem 1.2rem;
background: #fff;
color: #555;
border: 1.5px solid #ccc;
border-radius: 8px;
font-size: 0.92rem;
cursor: pointer;
transition: background 0.15s;
}
.ct-btn-secondary:hover[b-2oragfzaoj] { background: #f0f0f0; }
/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 620px) {
.ct-page[b-2oragfzaoj] { margin: 1rem auto; padding: 0 0.75rem; }
/* Stack logo on top of fields */
.ct-body[b-2oragfzaoj] {
grid-template-columns: 1fr;
}
/* Logo row: horizontal on mobile (compact) */
.ct-logo-col[b-2oragfzaoj] {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 1rem;
border-right: none;
border-bottom: 1px solid #e8e8e8;
padding: 1.25rem;
}
.ct-logo-box[b-2oragfzaoj] { width: 80px; height: 80px; flex-shrink: 0; }
.ct-logo-icon[b-2oragfzaoj] { font-size: 1.8rem; }
.ct-logo-hint[b-2oragfzaoj] { font-size: 0.68rem; }
.ct-fields[b-2oragfzaoj] { padding: 1.25rem; }
/* Stack season + category */
.ct-row[b-2oragfzaoj] { grid-template-columns: 1fr; }
/* Full-width stacked buttons */
.ct-actions[b-2oragfzaoj] {
flex-direction: column-reverse;
padding: 1rem 1.25rem;
}
.ct-btn-primary[b-2oragfzaoj],
.ct-btn-secondary[b-2oragfzaoj] { width: 100%; justify-content: center; text-align: center; }
}
/* /Components/Pages/GeneralRanking.razor.rz.scp.css */
/* ── Tokens de marca — heredan por cascada real de DOM a StandingsTable ── */
.ranking-page[b-56j74mq81u] {
--rk-ink: #16181b;
--rk-green: #28a745;
--rk-green-dark: #1e7e34;
--rk-green-soft: #eaf7ef;
--rk-gold: #d9a520;
--rk-gold-soft: #fbf1d9;
--rk-line: #e2e2e2;
--rk-muted: #6b7280;
--rk-display: 'Teko', system-ui, sans-serif;
--rk-mono: 'JetBrains Mono', ui-monospace, monospace;
max-width: 900px;
margin: 0 auto;
padding: 0 0.25rem;
}
/* Eyebrow / kicker — condensado, mayúsculas espaciadas */
.rk-kicker[b-56j74mq81u] {
display: block;
font-family: var(--rk-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rk-muted);
}
/* ── Barra superior: marca + selector de liga ────────────────────────── */
.rk-topbar[b-56j74mq81u] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0 0.5rem;
}
.league-selector select[b-56j74mq81u] {
padding: 0.45rem 1rem;
border-radius: 999px;
border: 2px solid var(--rk-ink);
background: #fff;
font-weight: 600;
font-size: 0.95rem;
color: var(--rk-ink);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
transition: border-color 0.2s ease, color 0.2s ease;
}
.league-selector select:hover[b-56j74mq81u],
.league-selector select:focus-visible[b-56j74mq81u] {
border-color: var(--rk-green);
color: var(--rk-green-dark);
outline: none;
}
/* ── Tabs de categorías activas — scroll horizontal en móvil ─────────── */
.rk-tabs[b-56j74mq81u] {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.25rem 0 0.75rem;
border-bottom: 1px solid var(--rk-line);
margin-bottom: 1rem;
}
.rk-tabs[b-56j74mq81u]::-webkit-scrollbar {
display: none;
}
.rk-tab[b-56j74mq81u] {
flex: 0 0 auto;
font-family: var(--rk-display);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.02em;
background: #fff;
color: var(--rk-ink);
border: 2px solid var(--rk-ink);
border-radius: 999px;
padding: 0.3rem 1.1rem;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.rk-tab:hover[b-56j74mq81u] {
border-color: var(--rk-green);
color: var(--rk-green-dark);
}
.rk-tab.active[b-56j74mq81u] {
background: var(--rk-green);
border-color: var(--rk-green);
color: #fff;
}
/* ── Título + botón de info ──────────────────────────────────────────── */
.ranking-title[b-56j74mq81u] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
margin: 0 0 1rem;
flex-wrap: wrap;
}
.ranking-title h3[b-56j74mq81u] {
margin: 0;
font-family: var(--rk-display);
font-size: 2.1rem;
line-height: 1;
font-weight: 700;
color: var(--rk-ink);
}
.rk-info-btn[b-56j74mq81u] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.9rem;
border-radius: 999px;
border: 2px solid var(--rk-ink);
background: #fff;
color: var(--rk-ink);
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.15s ease;
}
.rk-info-btn:hover[b-56j74mq81u] {
border-color: var(--rk-green);
color: var(--rk-green-dark);
}
/* ── Spinner y mensajes de estado ─────────────────────────────────────── */
.standings-loading[b-56j74mq81u] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1.5rem 0;
color: var(--rk-muted, #555);
font-size: 0.95rem;
}
.standings-spinner[b-56j74mq81u] {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
border: 3px solid #ddd;
border-top-color: #28a745;
border-radius: 50%;
animation: spin-b-56j74mq81u 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes spin-b-56j74mq81u {
to { transform: rotate(360deg); }
}
.standings-msg[b-56j74mq81u] {
padding: 1rem 0;
color: #666;
font-style: italic;
}
/* ── Desktop: barra superior más compacta, tabs no forzados a scroll ── */
@media (min-width: 640px) {
.ranking-page[b-56j74mq81u] {
padding: 0 1rem;
}
.rk-topbar[b-56j74mq81u] {
padding-top: 1.25rem;
}
.ranking-title h3[b-56j74mq81u] {
font-size: 2.6rem;
}
}
/* /Components/Pages/LeagueBanner.razor.rz.scp.css */
.banner-carousel[b-6dhdmz37m4] {
position: relative;
width: 100%;
overflow: hidden;
height: auto;
}
.banner-track[b-6dhdmz37m4] {
display: flex;
transition: transform 0.6s ease;
width: 100%;
}
.banner-slide[b-6dhdmz37m4] {
position: relative;
min-width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-size: cover;
background-position: center;
}
.banner-overlay[b-6dhdmz37m4] {
position: absolute;
inset: 0;
backdrop-filter: blur(6px) brightness(1.0);
background-color: rgba(0,0,0,0.1); /* leve velo oscuro */
z-index: 0;
}
.banner-image[b-6dhdmz37m4] {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 60vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
.banner-image[b-6dhdmz37m4] {
max-height: 40vh;
}
}
.banner-arrow[b-6dhdmz37m4] {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.4);
color: white;
border: none;
font-size: 2rem;
padding: 0.5rem;
cursor: pointer;
z-index: 10;
}
.banner-arrow.left[b-6dhdmz37m4] {
left: 10px;
}
.banner-arrow.right[b-6dhdmz37m4] {
right: 10px;
}
.banner-indicators[b-6dhdmz37m4] {
position: absolute;
bottom: 10px;
width: 100%;
display: flex;
justify-content: center;
gap: 8px;
}
.indicator-dot[b-6dhdmz37m4] {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
transition: background-color 0.3s ease;
}
.indicator-dot.active[b-6dhdmz37m4] {
background-color: white;
}
/* /Components/Pages/MatchCard.razor.rz.scp.css */
/* Estructura general */
.match-card[b-w84vk1bz5k] {
display: flex;
flex-direction: column;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
font-family: 'Segoe UI', sans-serif;
position: relative;
max-width: 360px;
width: 100%;
margin-inline: auto;
}
.match-card.live[b-w84vk1bz5k] {
animation: pulse-b-w84vk1bz5k 1.5s infinite;
box-shadow: 0 0 12px rgba(0, 150, 255, 0.5);
}
@keyframes pulse-b-w84vk1bz5k {
0%, 100% {
box-shadow: 0 0 12px rgba(0, 150, 255, 0.5);
}
50% {
box-shadow: 0 0 18px rgba(0, 150, 255, 0.8);
}
}
/* Matriz y filas */
.matriz[b-w84vk1bz5k] {
display: flex;
flex-direction: column;
gap: 0;
}
.fila[b-w84vk1bz5k] {
width: 100%;
flex-wrap: nowrap;
display: flex;
align-items: center;
margin: 0;
padding: 0;
min-height: 40px;
background-color: #e0e0e0;
}
/* Celdas */
.celda[b-w84vk1bz5k] {
flex: 1;
min-width: 0; /* evita que el contenido fuerce el ancho */
display: flex;
align-items: center;
padding: 0.25rem 0.5rem;
font-size: 0.9rem;
line-height: 1.2;
box-shadow: none;
border-radius: 0;
flex-shrink: 0;
background-color: transparent;
}
/* Celda A1 con título */
.celda-titulo[b-w84vk1bz5k] {
justify-content: flex-start;
flex: 0 0 58%;
overflow: hidden;
padding: 0; /* ← quitar cualquier padding heredado de .celda */
}
.titulo-texto[b-w84vk1bz5k] {
background-color: #000;
color: #fff;
padding: 0.3rem 0.75rem; /* ← solo padding horizontal; la altura la dicta align-self */
border-radius: 0; /* ← sin redondeo propio */
font-size: 0.95rem; /* ← ligeramente más grande */
font-weight: bold;
display: flex;
align-items: center;
align-self: stretch; /* ← se estira hasta la altura del flex-row padre */
width: 100%; /* ← ocupa todo el ancho de .celda-titulo */
min-width: 0;
box-shadow: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Celda A2+A3: cancha */
.celda-cancha[b-w84vk1bz5k] {
font-size: 0.95rem; /* ← mismo tamaño que categoría */
font-weight: 500;
background-color: #d0d0ff;
font-style: italic;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.6rem; /* ← padding simétrico horizontal */
flex: 0 0 42%; /* ← ocupa solo lo que necesita (no más, no menos) */
white-space: nowrap;
}
.match-time[b-w84vk1bz5k] {
font-style: normal; /* la hora no en cursiva */
font-weight: bold;
font-size: 0.8rem;
color: #333;
}
.court-name[b-w84vk1bz5k] {
font-style: italic; /* solo la cancha en cursiva */
}
/* Celda B1 y C1: equipo + logo */
.celda-izquierda[b-w84vk1bz5k] {
flex: 2.5 /* antes 2 */;
display: flex;
align-items: center;
gap: 0.5rem;
text-align: left;
padding-left: 1rem;
}
/* Celda B2 y C2: sets ganados */
.celda-destacada[b-w84vk1bz5k] {
flex: 1;
min-width: 0;
font-size: 1.1rem;
font-weight: bold;
text-align: left;
padding-left: 0.5rem;
}
/* Celda B3 y C3: resultados */
.set-details[b-w84vk1bz5k] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Logo */
.logo[b-w84vk1bz5k] {
width: 28px;
height: 28px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
}
.logo-wrap[b-w84vk1bz5k] {
display: inline-flex;
flex-shrink: 0;
}
/* Cuando /api/team/{id}/logo responde 404 (equipo sin logo subido), el onerror del
lo oculta y revela este span -- mismo tamaño/radio que .logo para que el layout no salte. */
.logo-fallback[b-w84vk1bz5k] {
display: none;
width: 28px;
height: 28px;
border-radius: 4px;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
flex-shrink: 0;
}
/* Hora del partido */
.time[b-w84vk1bz5k] {
position: absolute;
bottom: 12px;
right: 12px;
font-size: 14px;
font-weight: bold;
color: #444;
}
.celda-resultados[b-w84vk1bz5k] {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 2;
}
.sets[b-w84vk1bz5k] {
font-weight: bold;
font-size: 1.3rem;
color: #222;
margin-right: 0.5rem; /* separa visualmente del set-details */
}
.set-details[b-w84vk1bz5k] {
font-size: 0.85rem;
color: #444;
}
/* Asegura que el padding no rompa el layout */
*[b-w84vk1bz5k] {
box-sizing: border-box;
}
.hora-inicio[b-w84vk1bz5k] {
font-size: 1.2em;
font-weight: bold;
color: #555;
display: block;
margin-left: 30px;
}
/* /Components/Pages/MatchHistoryTable.razor.rz.scp.css */
.match-history[b-kque4n6626] {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
font-size: 0.95rem;
border-radius: 8px;
overflow: hidden;
}
.match-history th[b-kque4n6626],
.match-history td[b-kque4n6626] {
border-bottom: 1px solid #ddd;
padding: 0.6rem;
text-align: center;
}
.match-history th[b-kque4n6626] {
background-color: #f5f5f5;
font-weight: 600;
color: #333;
}
.match-history tbody tr:nth-child(even)[b-kque4n6626] {
background-color: #fafafa;
}
.match-history tbody tr:hover[b-kque4n6626] {
background-color: #f0f9f4; /* verde muy suave */
transition: background 0.2s ease;
}
/* Resultado con colores */
.result-win[b-kque4n6626] {
color: #28a745;
font-weight: bold;
}
.result-loss[b-kque4n6626] {
color: #dc3545;
font-weight: bold;
}
.result-draw[b-kque4n6626] {
color: #6c757d;
font-weight: bold;
}
/* Badges para sets y puntos */
.badge[b-kque4n6626] {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: #fff;
}
.badge-sets[b-kque4n6626] {
background-color: #007bff;
}
/* Base estilo para puntos */
.points-up[b-kque4n6626], .points-down[b-kque4n6626], .points-neutral[b-kque4n6626] {
position: relative;
font-weight: 600;
padding-left: 1.2rem; /* espacio para el triángulo */
}
/* Triángulo verde hacia arriba */
.points-up[b-kque4n6626]::before {
content: "";
position: absolute;
left: 0.2rem;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #28a745; /* verde */
}
/* Triángulo rojo hacia abajo */
.points-down[b-kque4n6626]::before {
content: "";
position: absolute;
left: 0.2rem;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #dc3545; /* rojo */
}
/* Neutral (sin triángulo) */
.points-neutral[b-kque4n6626]::before {
content: "";
}
/* /Components/Pages/Playoffs.razor.rz.scp.css */
/* ── Tokens — mismo sistema que /general-ranking (GeneralRanking.razor.css),
prefijo pf- propio. Base editorial-deportiva; 3 préstamos puntuales del
vocabulario "Cyber Arena" del scoreboard: JetBrains Mono en los marcadores,
glow dorado estático en el camino del campeón, Teko en cabeceras de ronda. */
.pf-page[b-85gg0pvfik] {
--pf-ink: #16181b;
--pf-green: #28a745;
--pf-green-dark: #1e7e34;
--pf-gold: #d9a520;
--pf-gold-soft: #fbf1d9;
--pf-line: #d8d8dc;
--pf-muted: #6b7280;
--pf-display: 'Teko', system-ui, sans-serif;
--pf-mono: 'JetBrains Mono', ui-monospace, monospace;
--pf-gap: 2.25rem;
--pf-node-h: 4.75rem;
max-width: 1100px;
margin: 0 auto;
padding: 0 0.25rem 3rem;
}
.pf-kicker[b-85gg0pvfik] {
display: block;
font-family: var(--pf-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pf-muted);
}
/* ── Barra superior + selector de liga (calco de .rk-topbar) ──────────── */
.pf-topbar[b-85gg0pvfik] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0 0.5rem;
}
.pf-league-selector select[b-85gg0pvfik] {
padding: 0.45rem 1rem;
border-radius: 999px;
border: 2px solid var(--pf-ink);
background: #fff;
font-weight: 600;
font-size: 0.95rem;
color: var(--pf-ink);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
/* ── Tabs de categoría (calco de .rk-tabs) ─────────────────────────────── */
.pf-tabs[b-85gg0pvfik] {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.25rem 0 0.75rem;
border-bottom: 1px solid var(--pf-line);
margin-bottom: 1rem;
}
.pf-tabs[b-85gg0pvfik]::-webkit-scrollbar { display: none; }
.pf-tab[b-85gg0pvfik] {
flex: 0 0 auto;
font-family: var(--pf-display);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.02em;
background: #fff;
color: var(--pf-ink);
border: 2px solid var(--pf-ink);
border-radius: 999px;
padding: 0.3rem 1.1rem;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.pf-tab:hover[b-85gg0pvfik] { border-color: var(--pf-gold); color: #a67c10; }
.pf-tab.active[b-85gg0pvfik] { background: var(--pf-ink); border-color: var(--pf-ink); color: #fff; }
.pf-title[b-85gg0pvfik] { margin: 0 0 1.25rem; }
.pf-season[b-85gg0pvfik] { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--pf-muted); }
.pf-title h3[b-85gg0pvfik] {
margin: 0;
font-family: var(--pf-display);
font-size: 2.3rem;
line-height: 1;
font-weight: 700;
color: var(--pf-ink);
}
/* ── Estados: loading / vacío / mensaje ────────────────────────────────── */
.pf-loading[b-85gg0pvfik] {
display: flex; align-items: center; gap: 0.6rem;
padding: 1.5rem 0; color: var(--pf-muted); font-size: 0.95rem;
}
.pf-spinner[b-85gg0pvfik] {
display: inline-block; width: 1.2rem; height: 1.2rem;
border: 3px solid #ddd; border-top-color: var(--pf-gold);
border-radius: 50%; animation: pf-spin-b-85gg0pvfik 0.7s linear infinite; flex-shrink: 0;
}
@keyframes pf-spin-b-85gg0pvfik { to { transform: rotate(360deg); } }
.pf-msg[b-85gg0pvfik] { padding: 1rem 0; color: #666; font-style: italic; }
.pf-empty[b-85gg0pvfik] {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 3.5rem 1.5rem; color: var(--pf-muted);
}
.pf-empty-icon[b-85gg0pvfik] { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6; }
.pf-empty p[b-85gg0pvfik] { margin: 0.15rem 0; }
.pf-empty-sub[b-85gg0pvfik] { font-size: 0.88rem; color: #999; }
/* ── Sub-pestañas (Clasificación / Agenda de finales / Cuadro) ─────────── */
.pf-subtabs[b-85gg0pvfik] {
display: flex; gap: 0.25rem; margin: 0 0 1.25rem;
border-bottom: 2px solid var(--pf-line);
overflow-x: auto; scrollbar-width: none;
}
.pf-subtabs[b-85gg0pvfik]::-webkit-scrollbar { display: none; }
.pf-subtab[b-85gg0pvfik] {
flex: 0 0 auto; background: none; border: 0; cursor: pointer;
font-family: var(--pf-display); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.03em;
color: var(--pf-muted); padding: 0.35rem 1rem 0.5rem; margin-bottom: -2px;
border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.pf-subtab:hover[b-85gg0pvfik] { color: var(--pf-ink); }
.pf-subtab.active[b-85gg0pvfik] { color: var(--pf-ink); border-bottom-color: var(--pf-gold); }
.pf-qual-note[b-85gg0pvfik] { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--pf-muted); }
.pf-qual-dot[b-85gg0pvfik] { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--pf-green); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
.pf-spinner[b-85gg0pvfik] { animation: none; }
}
/* /Components/Pages/Public/ScorecardFreePlay.razor.rz.scp.css */
/* ── Wrapper fullscreen del board ── */
.fp-board-wrap[b-tam8augoy2] {
width: 100vw;
height: 100vh;
background: #000;
}
/* ── Banner de reanudación (localStorage) ── */
.fp-resume-banner[b-tam8augoy2] {
display: flex;
flex-direction: column;
gap: 0.6rem;
background: oklch(0.2 0.06 248);
border: 2px solid oklch(0.55 0.2 248);
border-radius: 12px;
padding: 0.9rem 1rem;
}
.fp-resume-text[b-tam8augoy2] {
display: flex;
flex-direction: column;
gap: 0.2rem;
color: #fff;
font-size: 0.85rem;
}
.fp-resume-text span[b-tam8augoy2] {
font-size: 0.78rem;
color: rgba(255,255,255,0.7);
}
.fp-resume-actions[b-tam8augoy2] {
display: flex;
gap: 0.5rem;
}
.fp-resume-btn[b-tam8augoy2] {
flex: 1;
background: oklch(0.55 0.22 248);
border: none;
border-radius: 8px;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
padding: 0.55rem;
cursor: pointer;
}
.fp-resume-btn:hover[b-tam8augoy2] { opacity: 0.9; }
.fp-resume-dismiss[b-tam8augoy2] {
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 8px;
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
padding: 0.55rem 0.9rem;
cursor: pointer;
}
.fp-resume-dismiss:hover[b-tam8augoy2] { border-color: rgba(255,255,255,0.5); color: #fff; }
/* ── Setup screen ──
height + overflow-y propios: bajo TvLayout, html/body/.tv-root quedan
con overflow:hidden fijo (ver TvLayout.razor). A diferencia de
.lsu-screen (interactive.css), esta pantalla NO se reestructura en
portrait — necesita poder scrollear siempre, así que no se le agrega
ningún override que le quite overflow-y:auto en ninguna media query. */
.fp-setup-wrap[b-tam8augoy2] {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 80vh;
height: 100vh; /* fallback si el navegador no soporta dvh */
height: 100dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 2rem 1rem;
background: #000;
}
.fp-setup-card[b-tam8augoy2] {
width: 100%;
max-width: 420px;
background: oklch(0.13 0.02 260);
border: 2px solid oklch(0.3 0.04 260);
border-radius: 18px;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.fp-setup-header[b-tam8augoy2] {
text-align: center;
margin-bottom: 0.5rem;
}
.fp-logo[b-tam8augoy2] {
width: clamp(160px, 40vw, 280px);
height: auto;
object-fit: contain;
display: block;
margin: 0 auto 1rem;
}
.fp-title[b-tam8augoy2] {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 1.6rem;
color: #fff;
margin: 0 0 0.25rem;
}
.fp-sub[b-tam8augoy2] {
font-size: 0.85rem;
color: oklch(0.6 0.02 260);
margin: 0;
}
.install-btn[b-tam8augoy2] {
display: block;
margin: 0.75rem auto 0;
padding: 0.4rem 1rem;
font-size: 12px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
background: transparent;
color: rgba(255,255,255,0.5);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.install-btn:hover[b-tam8augoy2] {
border-color: rgba(255,255,255,0.5);
color: #fff;
}
.fp-label[b-tam8augoy2] {
display: block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(0.65 0.04 260);
margin-bottom: 0.4rem;
}
.fp-input[b-tam8augoy2] {
width: 100%;
background: oklch(0.18 0.02 260);
border: 2px solid oklch(0.35 0.04 260);
border-radius: 10px;
color: #fff;
font-size: 1rem;
padding: 0.6rem 0.85rem;
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
}
.fp-input:focus[b-tam8augoy2] {
border-color: oklch(0.65 0.18 248);
}
.fp-options[b-tam8augoy2] {
display: flex;
gap: 0.5rem;
}
.fp-opt[b-tam8augoy2] {
flex: 1;
background: oklch(0.18 0.02 260);
border: 2px solid oklch(0.35 0.04 260);
border-radius: 10px;
color: oklch(0.7 0.02 260);
font-size: 0.9rem;
font-weight: 600;
padding: 0.55rem 0;
cursor: pointer;
transition: all 0.15s;
}
.fp-opt:hover[b-tam8augoy2] {
border-color: oklch(0.55 0.15 248);
color: #fff;
}
.fp-opt-on[b-tam8augoy2] {
background: oklch(0.55 0.2 248);
border-color: oklch(0.55 0.2 248);
color: #fff;
}
.fp-field-row[b-tam8augoy2] {
display: flex;
align-items: center;
justify-content: space-between;
}
.fp-check[b-tam8augoy2] {
width: 22px;
height: 22px;
accent-color: oklch(0.55 0.2 248);
cursor: pointer;
}
.fp-start-btn[b-tam8augoy2] {
width: 100%;
background: oklch(0.55 0.22 248);
border: none;
border-radius: 12px;
color: #fff;
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 1.1rem;
padding: 0.85rem;
cursor: pointer;
box-shadow: 0 4px 0 oklch(0.35 0.18 248);
transition: opacity 0.15s, transform 0.1s;
margin-top: 0.5rem;
}
.fp-start-btn:hover[b-tam8augoy2] { opacity: 0.9; }
.fp-start-btn:active[b-tam8augoy2] { transform: translateY(2px); box-shadow: 0 2px 0 oklch(0.35 0.18 248); }
.fp-start-btn:disabled[b-tam8augoy2] { opacity: 0.4; cursor: not-allowed; transform: none; }
.fp-home-btn[b-tam8augoy2] {
width: 100%;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 12px;
color: rgba(255,255,255,0.7);
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 0.95rem;
padding: 0.75rem;
cursor: pointer;
margin-top: 0.6rem;
transition: border-color 0.15s, color 0.15s;
}
.fp-home-btn:hover[b-tam8augoy2] { border-color: rgba(255,255,255,0.5); color: #fff; }
/* ── Roster opcional (jugadores por equipo) ── */
.fp-roster-toggle[b-tam8augoy2] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: oklch(0.16 0.02 260);
border: 2px solid oklch(0.32 0.04 260);
border-radius: 10px;
color: oklch(0.7 0.02 260);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.55rem 0.85rem;
cursor: pointer;
text-align: left;
}
.fp-roster-toggle:hover[b-tam8augoy2] { border-color: oklch(0.5 0.1 248); color: #fff; }
.fp-roster-body[b-tam8augoy2] {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 0.6rem;
}
.fp-roster-list[b-tam8augoy2] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.fp-roster-chip[b-tam8augoy2] {
display: flex;
align-items: center;
gap: 0.35rem;
background: oklch(0.2 0.03 260);
border: 1px solid oklch(0.38 0.05 260);
border-radius: 20px;
padding: 0.3rem 0.5rem 0.3rem 0.7rem;
font-size: 0.78rem;
color: #fff;
}
.fp-roster-chip-jersey[b-tam8augoy2] { font-weight: 700; color: oklch(0.65 0.18 248); }
.fp-roster-chip-name[b-tam8augoy2] { color: rgba(255,255,255,0.75); }
.fp-roster-chip-remove[b-tam8augoy2] {
background: transparent;
border: none;
color: rgba(255,255,255,0.45);
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
padding: 0.1rem 0.2rem;
}
.fp-roster-chip-remove:hover[b-tam8augoy2] { color: #ef4444; }
.fp-roster-add-row[b-tam8augoy2] {
display: grid;
grid-template-columns: 3.2rem 1fr 3.6rem auto;
gap: 0.4rem;
}
.fp-roster-input-jersey[b-tam8augoy2],
.fp-roster-input-name[b-tam8augoy2],
.fp-roster-input-abbr[b-tam8augoy2] {
padding: 0.5rem 0.5rem;
font-size: 0.85rem;
}
.fp-roster-add-btn[b-tam8augoy2] {
width: 2.4rem;
background: oklch(0.55 0.2 248);
border: none;
border-radius: 10px;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
}
.fp-roster-add-btn:disabled[b-tam8augoy2] { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 380px) {
.fp-roster-add-row[b-tam8augoy2] { grid-template-columns: 2.6rem 1fr 3rem auto; }
}
/* ── Install modal ── */
.install-backdrop[b-tam8augoy2] {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.install-modal[b-tam8augoy2] {
background: #1a1c24;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 16px;
padding: 1.75rem 1.5rem;
max-width: 360px; width: 100%;
text-align: center;
color: #f0eee8;
}
.im-icon[b-tam8augoy2] { font-size: 2.5rem; margin-bottom: .5rem; }
.im-title[b-tam8augoy2] { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.im-text[b-tam8augoy2] { font-size: .875rem; line-height: 1.6;
color: rgba(255,255,255,0.7); margin-bottom: 1.25rem; }
.im-steps[b-tam8augoy2] { text-align: left; font-size: .875rem; line-height: 1.8;
color: rgba(255,255,255,0.85); padding-left: 1.25rem;
margin-bottom: 1rem; }
.im-steps li[b-tam8augoy2] { margin-bottom: .25rem; }
.im-note[b-tam8augoy2] { font-size: .75rem; color: rgba(255,255,255,0.45);
margin-bottom: 1rem; }
.im-share-icon[b-tam8augoy2] { font-style: normal; font-weight: 700; }
.im-btn-primary[b-tam8augoy2] {
display: block; width: 100%; padding: .75rem;
background: #3d8bff; color: #fff; font-weight: 700;
border: none; border-radius: 10px; font-size: 1rem;
cursor: pointer; margin-bottom: .75rem;
}
.im-btn-primary:active[b-tam8augoy2] { transform: translateY(1px); }
.im-btn-close[b-tam8augoy2] {
background: transparent; border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.5); border-radius: 8px;
padding: .4rem 1.25rem; font-size: .8rem; cursor: pointer;
}
.im-btn-close:hover[b-tam8augoy2] { border-color: rgba(255,255,255,0.5); color: #fff; }
/* /Components/Pages/Public/TorneosLanding.razor.rz.scp.css */
/* ── Tokens — mismo sistema que TournamentStandings.razor.css (Teko + JetBrains
Mono, verde/gris), prefijo tl- propio. Escrito mobile first: sin @media hasta
el final, sólo para dar más aire en pantallas anchas. */
.tl-page[b-vq2dv7opnm] {
--tl-ink: #16181b;
--tl-green: #28a745;
--tl-muted: #6b7280;
--tl-line: #e2e2e2;
--tl-display: 'Teko', system-ui, sans-serif;
--tl-mono: 'JetBrains Mono', ui-monospace, monospace;
max-width: 640px;
margin: 0 auto;
padding: 1.5rem 0.9rem 3rem;
background: #fff;
min-height: 100vh;
font-family: system-ui, sans-serif;
color: var(--tl-ink);
}
.tl-msg[b-vq2dv7opnm] { color: var(--tl-muted); font-size: 0.95rem; }
.tl-kicker[b-vq2dv7opnm] {
display: block;
font-family: var(--tl-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tl-muted);
}
.tl-title[b-vq2dv7opnm] {
margin: 0 0 0.3rem;
font-family: var(--tl-display);
font-size: 2rem;
line-height: 1.05;
font-weight: 700;
}
.tl-subtitle[b-vq2dv7opnm] {
margin: 0 0 1.25rem;
font-size: 0.9rem;
color: var(--tl-muted);
}
/* ── Estado vacío: educativo, sin venta -- alguien curioso debe entender qué es
un torneo relámpago y que ahora mismo no hay ninguno. ── */
.tl-empty-state[b-vq2dv7opnm] {
text-align: center;
padding: 3.5rem 1.25rem;
}
.tl-empty-icon[b-vq2dv7opnm] { font-size: 2.5rem; margin-bottom: 0.75rem; }
.tl-empty-title[b-vq2dv7opnm] { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 600; color: var(--tl-ink); }
.tl-empty-sub[b-vq2dv7opnm] { margin: 0; font-size: 0.88rem; color: var(--tl-muted); line-height: 1.5; max-width: 32rem; margin-inline: auto; }
/* ── Lista de torneos (2+) ────────────────────────────────────────────────── */
.tl-list[b-vq2dv7opnm] { display: flex; flex-direction: column; gap: 0.75rem; }
.tl-card[b-vq2dv7opnm] {
display: block;
width: 100%;
text-align: left;
background: #fff;
border: 1px solid var(--tl-line);
border-radius: 10px;
padding: 0.9rem 1rem;
cursor: pointer;
font: inherit;
color: inherit;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tl-card:hover[b-vq2dv7opnm] { border-color: var(--tl-green); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.tl-card-league[b-vq2dv7opnm] {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tl-muted);
}
.tl-card-name[b-vq2dv7opnm] {
font-family: var(--tl-display);
font-size: 1.35rem;
font-weight: 600;
line-height: 1.1;
margin: 0.1rem 0 0.25rem;
}
.tl-card-dates[b-vq2dv7opnm] {
font-family: var(--tl-mono);
font-size: 0.82rem;
color: var(--tl-muted);
}
@media (min-width: 640px) {
.tl-page[b-vq2dv7opnm] { padding: 2.5rem 1.5rem 3rem; }
.tl-title[b-vq2dv7opnm] { font-size: 2.4rem; }
}
/* /Components/Pages/Public/TournamentAgenda.razor.rz.scp.css */
/* ── Tokens — mismo sistema que TournamentStandings.razor.css, prefijo ta- propio. */
.ta-page[b-469i7ig6lt] {
--ta-ink: #16181b;
--ta-green: #28a745;
--ta-green-dark: #1e7e34;
--ta-gold: #d9a520;
--ta-line: #e2e2e2;
--ta-muted: #6b7280;
--ta-display: 'Teko', system-ui, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 1.25rem 0.9rem 3rem;
background: #fff;
min-height: 100vh;
font-family: system-ui, sans-serif;
color: var(--ta-ink);
}
.ta-msg[b-469i7ig6lt] { color: var(--ta-muted); font-size: 0.95rem; }
/* ── Header (calco de TournamentStandings.razor.css) ─────────────────────── */
.ta-back-link[b-469i7ig6lt] {
display: inline-block;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--ta-muted);
text-decoration: none;
}
.ta-back-link:hover[b-469i7ig6lt] { color: var(--ta-green-dark); text-decoration: underline; }
.ta-header[b-469i7ig6lt] { margin-bottom: 1rem; }
.ta-league-row[b-469i7ig6lt] {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.35rem;
}
.ta-league-logo[b-469i7ig6lt] {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 4px;
flex-shrink: 0;
}
.ta-kicker[b-469i7ig6lt] {
display: block;
font-family: var(--ta-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ta-muted);
}
.ta-title[b-469i7ig6lt] {
margin: 0;
font-family: var(--ta-display);
font-size: 1.9rem;
line-height: 1.05;
font-weight: 700;
color: var(--ta-ink);
}
/* ── Tabs de sección (Agenda / Calendario / Fase de Clasificación) ─────────── */
.ta-tabs[b-469i7ig6lt] {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.25rem 0 0.85rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--ta-line);
}
.ta-tabs[b-469i7ig6lt]::-webkit-scrollbar { display: none; }
.ta-tab[b-469i7ig6lt] {
flex: 0 0 auto;
font-family: var(--ta-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.02em;
background: #fff;
color: var(--ta-ink);
border: 2px solid var(--ta-ink);
border-radius: 999px;
padding: 0.28rem 1rem;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.ta-tab:hover[b-469i7ig6lt] { border-color: var(--ta-gold); color: #a67c10; }
.ta-tab.active[b-469i7ig6lt] { background: var(--ta-ink); border-color: var(--ta-ink); color: #fff; }
/* ── Filtros de la agenda: categoría + nombre de equipo ────────────────────── */
.ta-filters[b-469i7ig6lt] {
display: flex; flex-wrap: wrap; gap: 0.6rem;
margin: 0.25rem 0 1.25rem;
}
.ta-cat-select[b-469i7ig6lt], .ta-team-filter[b-469i7ig6lt] {
font-family: inherit;
font-size: 0.9rem;
color: var(--ta-ink);
background: #fff;
border: 1px solid var(--ta-line);
border-radius: 8px;
padding: 0.45rem 0.8rem;
}
.ta-cat-select:focus[b-469i7ig6lt], .ta-team-filter:focus[b-469i7ig6lt] {
outline: none;
border-color: var(--ta-green);
}
.ta-team-filter[b-469i7ig6lt] { flex: 1 1 14rem; min-width: 0; }
.ta-team-filter[b-469i7ig6lt]::placeholder { color: var(--ta-muted); }
/* ── Estado vacío ─────────────────────────────────────────────────────────── */
.ta-empty-state[b-469i7ig6lt] {
text-align: center;
padding: 3.5rem 1.5rem;
color: var(--ta-muted);
}
.ta-empty-icon[b-469i7ig6lt] { font-size: 2.5rem; margin-bottom: 0.5rem; }
.ta-empty-state p[b-469i7ig6lt] { margin: 0 0 1rem; font-size: 1rem; }
/* ── Agenda de partidos — mismas tarjetas que Home (
es un grid de 5 columnas [rank | equipo(1fr) | jugados | ganados | puntos];
"perdidos" (.ts-desktop-only) queda fuera del grid en móvil porque display:none lo
saca por completo del algoritmo, sin dejar un hueco. Esto reemplaza el diseño previo
de td en bloque apilado (bug real: ".ts-table td{display:block}" con especificidad
(0,1,1) le ganaba a ".ts-stat-cell{display:inline-flex}" (0,1,0) pase lo que pase en
el orden de las reglas -- por eso cada estadística terminaba en su propio renglón). */
.ts-table-wrap[b-d1lahw2fa6] { width: 100%; overflow-x: auto; }
.ts-table[b-d1lahw2fa6] { width: 100%; border-collapse: collapse; }
.ts-table thead[b-d1lahw2fa6] { display: none; }
.ts-table[b-d1lahw2fa6], .ts-table tbody[b-d1lahw2fa6] { display: block; width: 100%; }
.ts-table tr[b-d1lahw2fa6] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto auto;
align-items: center;
column-gap: 0.6rem;
border: 1px solid var(--ts-line);
border-radius: 10px;
padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ts-table tr.ts-row-inactive[b-d1lahw2fa6] { background: #fafafa; }
.ts-table tr.ts-row-qualify[b-d1lahw2fa6] { border-color: var(--ts-green); }
.ts-table tr.ts-row-qualify-last[b-d1lahw2fa6] { border-bottom-width: 3px; }
.ts-table td[b-d1lahw2fa6] { border: none; padding: 0; text-align: left; }
.ts-rank-cell[b-d1lahw2fa6] { min-width: 0; }
.ts-rank-badge[b-d1lahw2fa6] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.9rem;
height: 1.9rem;
padding: 0 0.3rem;
border-radius: 999px;
border: 2px solid var(--ts-ink);
background: #fff;
color: var(--ts-ink);
font-family: var(--ts-display);
font-size: 1.1rem;
font-weight: 600;
line-height: 1;
}
.ts-rank-badge.qualify[b-d1lahw2fa6] {
background: var(--ts-green);
border-color: var(--ts-green);
color: #fff;
}
.ts-team-cell[b-d1lahw2fa6] { min-width: 0; font-size: 0.95rem; }
.ts-team-inner[b-d1lahw2fa6] {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.ts-team-logo[b-d1lahw2fa6] {
width: 24px;
height: 24px;
object-fit: contain;
border-radius: 4px;
flex-shrink: 0;
}
.ts-team-name[b-d1lahw2fa6] {
font-weight: 600;
color: #222;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ts-team-name.dim[b-d1lahw2fa6] { color: var(--ts-muted); }
/* Badge "Retirado" — plena opacidad siempre; la distinción de estado nunca
depende sólo del color (mismo principio ya usado en StandingsTable.razor). */
.ts-badge-retired[b-d1lahw2fa6] {
display: inline-block;
flex-shrink: 0;
font-size: 0.64rem;
font-weight: 600;
padding: 0.1em 0.45em;
border-radius: 3px;
background: #e9ecef;
color: #495057;
white-space: nowrap;
letter-spacing: 0.02em;
}
/* Celda de estadística — patrón único para PJ/PG/PP/Puntos: etiqueta chica arriba,
valor abajo, apiladas DENTRO de una sola celda angosta (no un renglón completo). */
.ts-stat-cell[b-d1lahw2fa6] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.05rem;
line-height: 1;
}
.ts-stat-label[b-d1lahw2fa6] {
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ts-muted);
}
.ts-stat-value[b-d1lahw2fa6] {
font-family: var(--ts-mono);
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 0.95rem;
color: var(--ts-ink);
}
.ts-stat-cell.dim .ts-stat-value[b-d1lahw2fa6] { color: var(--ts-muted); }
/* Puntos — el número dominante de la fila, mismo patrón que los demás pero más grande. */
.ts-stat-points .ts-stat-value[b-d1lahw2fa6] { font-size: 1.3rem; }
/* PP (perdidos): solo en escritorio -- en móvil el renglón se limita a rank/equipo/
jugados/ganados/puntos (display:none lo saca del grid, no deja columna vacía). */
.ts-table td.ts-desktop-only[b-d1lahw2fa6] { display: none; }
/* ── ≥640px: tabla real de escritorio, todo visible en columnas ─────────── */
@media (min-width: 640px) {
.ts-page[b-d1lahw2fa6] { padding: 2rem 1.5rem 3rem; }
.ts-title[b-d1lahw2fa6] { font-size: 2.3rem; }
.ts-table thead[b-d1lahw2fa6] { display: table-header-group; }
.ts-table[b-d1lahw2fa6], .ts-table tbody[b-d1lahw2fa6], .ts-table tr[b-d1lahw2fa6], .ts-table td[b-d1lahw2fa6] {
display: revert;
width: revert;
}
.ts-table[b-d1lahw2fa6] { font-size: 0.92rem; }
.ts-table th[b-d1lahw2fa6], .ts-table td[b-d1lahw2fa6] {
border-bottom: 1px solid var(--ts-line);
padding: 0.55rem 0.6rem;
text-align: center;
}
.ts-table th[b-d1lahw2fa6] {
background: #f7f7f7;
font-weight: 600;
font-size: 0.76rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ts-muted);
border-top: 2px solid var(--ts-ink);
}
.ts-table tr[b-d1lahw2fa6] {
border: none;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
}
.ts-table tr.ts-row-inactive[b-d1lahw2fa6] { background: #fafafa; }
.ts-table tr:hover[b-d1lahw2fa6] { background: var(--ts-green-soft); }
.ts-table tr.ts-row-qualify-last td[b-d1lahw2fa6] { border-bottom: 3px solid var(--ts-green); }
.ts-team-cell[b-d1lahw2fa6] {
text-align: left;
font-size: 0.92rem;
}
.ts-team-name[b-d1lahw2fa6] { white-space: nowrap; overflow: visible; text-overflow: clip; }
.ts-team-logo[b-d1lahw2fa6] { width: 22px; height: 22px; }
.ts-table td.ts-stat-cell[b-d1lahw2fa6] { display: table-cell; }
.ts-stat-label[b-d1lahw2fa6] { display: none; } /* la cabecera de la columna ya dice qué es */
.ts-stat-value[b-d1lahw2fa6] { font-size: inherit; font-weight: 600; }
.ts-stat-points .ts-stat-value[b-d1lahw2fa6] { font-size: 1.05rem; font-weight: 700; }
.ts-table td.ts-desktop-only[b-d1lahw2fa6] { display: table-cell; }
}
/* /Components/Pages/RankingSummary.razor.rz.scp.css */
.team-header-card[b-bvduw2eevo] {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
border-radius: 10px;
padding: 1rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.team-logo img[b-bvduw2eevo] {
width: 64px;
height: 64px;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
background-color: #fff;
}
.team-info h4[b-bvduw2eevo] {
margin: 0;
font-size: 1.4rem;
font-weight: 600;
color: #333;
}
.team-info p[b-bvduw2eevo] {
margin: 4px 0;
font-size: 1rem;
color: #555;
}
/* /Components/Pages/Referee/GameTvRefereePanel.razor.rz.scp.css */
/* GameTvRefereePanel — Panel árbitro GameTV · Scoreboard v6 */
/* ── Estado de carga ────────────────────────────────────────────────── */
.gtv-panel-loading[b-srps3ev76u] {
display: flex; flex-direction: row; flex-wrap: wrap;
align-items: center; justify-content: center;
gap: 1rem; min-height: 60vh;
font-family: 'JetBrains Mono', monospace;
color: rgba(255,255,255,.6);
background: #04060a;
}
.gtv-loading-dot[b-srps3ev76u] {
width: 12px; height: 12px; border-radius: 50%;
background: #00e5ff; box-shadow: 0 0 14px #00e5ff;
animation: gtv-bounce-b-srps3ev76u 1.2s ease-in-out infinite;
}
.gtv-loading-dot:nth-child(2)[b-srps3ev76u] { animation-delay: .18s; background: #fff; box-shadow: 0 0 14px #fff; }
.gtv-loading-dot:nth-child(3)[b-srps3ev76u] { animation-delay: .36s; background: #ff2bd6; box-shadow: 0 0 14px #ff2bd6; }
@keyframes gtv-bounce-b-srps3ev76u {
0%, 100% { transform: translateY(0); opacity: .5; }
50% { transform: translateY(-8px); opacity: 1; }
}
/* ── Página de error ─────────────────────────────────────────────────── */
.gtv-panel-error[b-srps3ev76u] {
display: flex; flex-direction: column; align-items: center;
justify-content: center; min-height: 60vh; gap: 1rem; padding: 2rem;
font-family: 'JetBrains Mono', monospace;
color: rgba(255,255,255,.6); background: #04060a; text-align: center;
}
/* ── Toast de error de página (SaveAndClose / ConfirmCancelAsync) ────────
Regla duplicada intencionalmente de GameTvBoard.razor.css: el CSS scoped
sigue al archivo donde el markup está ESCRITO. El tablero tiene su propia
instancia de .gtv-panel-toast (errores de punto/undo/sustitución) y esta
página tiene la suya (errores de guardado/cancelación de BD). */
.gtv-panel-toast[b-srps3ev76u] {
position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
background: rgba(239,68,68,.9); color: #fff; padding: .75rem 1.5rem;
border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: .8rem;
cursor: pointer; z-index: 500; max-width: 90vw;
animation: gtv-slide-up-b-srps3ev76u .3s ease;
}
@keyframes gtv-slide-up-b-srps3ev76u {
from { transform: translateX(-50%) translateY(1rem); opacity: 0; }
to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
/* ── Botón cancelar partido (en lsu-footer, escrito vía LineupFooterSlot) ── */
.gtv-cancel-btn[b-srps3ev76u] {
display: block; width: 100%;
padding: .55rem 1rem;
background: transparent;
border: 1px solid rgba(239,68,68,.38);
color: rgba(239,68,68,.7);
font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .08em;
border-radius: 6px; cursor: pointer;
transition: border-color .2s, color .2s, background .2s;
margin-top: 8px;
}
.gtv-cancel-btn:hover[b-srps3ev76u] {
border-color: rgba(239,68,68,.75);
color: #ef4444;
background: rgba(239,68,68,.07);
}
/* Reentrada al pase de lista — mismo esqueleto que el botón de cancelar, en azul
(no es una acción destructiva). */
.gtv-attendance-btn[b-srps3ev76u] {
display: block; width: 100%;
padding: .55rem 1rem;
background: transparent;
border: 1px solid rgba(56,139,253,.38);
color: rgba(139,180,248,.85);
font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .08em;
border-radius: 6px; cursor: pointer;
transition: border-color .2s, color .2s, background .2s;
margin-top: 8px;
}
.gtv-attendance-btn:hover[b-srps3ev76u] {
border-color: rgba(56,139,253,.75);
color: #8ab4f8;
background: rgba(56,139,253,.08);
}
/* ── Modal de confirmación de cancelación ────────────────────────────── */
.gtv-cancel-overlay[b-srps3ev76u] {
position: fixed; inset: 0; z-index: 600;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.75);
backdrop-filter: blur(4px);
}
.gtv-cancel-modal[b-srps3ev76u] {
background: #0d1117;
border: 1px solid rgba(239,68,68,.45);
border-radius: 12px;
padding: 1.75rem 2rem;
max-width: 420px; width: 90vw;
box-shadow: 0 0 40px rgba(239,68,68,.18);
}
.gtv-cancel-modal-title[b-srps3ev76u] {
font-family: 'Orbitron', sans-serif; font-weight: 900;
font-size: 1.1rem; color: #ef4444; margin-bottom: .75rem;
}
.gtv-cancel-modal-body[b-srps3ev76u] {
font-family: 'JetBrains Mono', monospace;
font-size: .8rem; color: rgba(255,255,255,.6);
line-height: 1.6; margin-bottom: 1.25rem;
}
/* ── Selector de equipo ausente (no-show) ────────────────────────────── */
.gtv-noshow-teams[b-srps3ev76u] {
display: flex; flex-direction: column; gap: .5rem;
margin-bottom: 1.25rem;
}
.gtv-noshow-team-btn[b-srps3ev76u] {
display: flex; align-items: center; gap: .6rem;
width: 100%; text-align: left;
padding: .65rem .8rem;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.15);
border-radius: 8px; cursor: pointer;
color: rgba(255,255,255,.75);
font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: .92rem;
transition: border-color .15s, background .15s, color .15s;
}
.gtv-noshow-team-btn:hover[b-srps3ev76u] {
border-color: rgba(239,68,68,.4);
background: rgba(239,68,68,.06);
}
.gtv-noshow-team-btn.selected[b-srps3ev76u] {
border-color: #ef4444;
background: rgba(239,68,68,.12);
color: #fff;
}
.gtv-noshow-radio[b-srps3ev76u] {
flex-shrink: 0;
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.3);
box-sizing: border-box;
}
.gtv-noshow-team-btn.selected .gtv-noshow-radio[b-srps3ev76u] {
border-color: #ef4444;
background: radial-gradient(#ef4444 0%, #ef4444 40%, transparent 44%);
}
.gtv-cancel-modal-actions[b-srps3ev76u] {
display: flex; flex-direction: column; gap: .6rem;
}
.gtv-cancel-confirm-btn[b-srps3ev76u] {
padding: .7rem 1.25rem;
background: rgba(239,68,68,.12);
border: 1px solid rgba(239,68,68,.6);
color: #ef4444;
font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .08em;
border-radius: 6px; cursor: pointer;
transition: background .2s, border-color .2s;
}
.gtv-cancel-confirm-btn:hover:not(:disabled)[b-srps3ev76u] {
background: rgba(239,68,68,.22);
border-color: #ef4444;
}
.gtv-cancel-confirm-btn:disabled[b-srps3ev76u] { opacity: .45; cursor: not-allowed; }
.gtv-cancel-dismiss-btn[b-srps3ev76u] {
padding: .6rem 1.25rem;
background: transparent;
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.55);
font-family: 'JetBrains Mono', monospace; font-size: .8rem;
border-radius: 6px; cursor: pointer;
transition: border-color .2s, color .2s;
}
.gtv-cancel-dismiss-btn:hover[b-srps3ev76u] { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.8); }
/* /Components/Pages/Referee/MatchResult.razor.rz.scp.css */
.mr-loading[b-89y95pszbf], .mr-error[b-89y95pszbf] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
min-height: 50vh;
color: oklch(0.6 0.02 260);
text-align: center;
padding: 2rem;
}
.mr-wrap[b-89y95pszbf] {
display: flex;
justify-content: center;
padding: 2rem 1rem;
}
.mr-card[b-89y95pszbf] {
width: 100%;
max-width: 420px;
background: oklch(0.13 0.02 260);
border: 2px solid oklch(0.3 0.04 260);
border-radius: 18px;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.mr-badge[b-89y95pszbf] {
background: oklch(0.35 0.12 145);
border: 1.5px solid oklch(0.5 0.15 145);
border-radius: 8px;
color: #fff;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.4rem 0.75rem;
text-align: center;
}
.mr-title[b-89y95pszbf] {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 1.5rem;
color: #fff;
margin: 0;
text-align: center;
}
.mr-matchup[b-89y95pszbf] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.mr-team[b-89y95pszbf] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.mr-team-name[b-89y95pszbf] {
font-size: 0.82rem;
font-weight: 700;
color: oklch(0.7 0.04 260);
text-align: center;
}
.mr-sets-big[b-89y95pszbf] {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 3rem;
color: oklch(0.65 0.04 260);
line-height: 1;
}
.mr-team-winner .mr-sets-big[b-89y95pszbf] {
color: #fff;
}
.mr-pts-tag[b-89y95pszbf] {
font-size: 0.75rem;
font-weight: 700;
color: oklch(0.65 0.18 90);
background: oklch(0.25 0.06 90);
border-radius: 6px;
padding: 0.2rem 0.5rem;
}
.mr-dash[b-89y95pszbf] {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 2rem;
color: oklch(0.35 0.02 260);
align-self: flex-start;
padding-top: 0.5rem;
}
.mr-sets-detail[b-89y95pszbf] {
background: oklch(0.17 0.02 260);
border-radius: 10px;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mr-sets-header[b-89y95pszbf] {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.5 0.04 260);
margin-bottom: 0.25rem;
}
.mr-set-row[b-89y95pszbf] {
display: flex;
justify-content: space-between;
align-items: center;
}
.mr-set-num[b-89y95pszbf] {
font-size: 0.85rem;
color: oklch(0.6 0.04 260);
}
.mr-set-score[b-89y95pszbf] {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
}
.mr-footer[b-89y95pszbf] {
display: flex;
justify-content: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.mr-btn[b-89y95pszbf] {
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
padding: 0.65rem 1.25rem;
cursor: pointer;
transition: opacity 0.15s;
}
.mr-btn-outline[b-89y95pszbf] {
background: transparent;
border: 2px solid oklch(0.35 0.04 260);
color: oklch(0.7 0.04 260);
}
.mr-btn-outline:hover[b-89y95pszbf] { opacity: 0.8; }
/* /Components/Pages/StandingsTable.razor.rz.scp.css */
/* ── Celda de equipo (logo + nombre + badge) ─────────────────────────── */
.team-cell[b-zv0w1nn2x7] {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.6rem;
text-align: left;
}
.team-logo[b-zv0w1nn2x7] {
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
flex-shrink: 0;
}
.team-name[b-zv0w1nn2x7] {
font-weight: 600;
color: #222;
}
.details-btn[b-zv0w1nn2x7] {
padding: 0.35rem 0.9rem;
border: 2px solid var(--rk-ink, #16181b);
border-radius: 999px;
background: #fff;
color: var(--rk-ink, #16181b);
cursor: pointer;
transition: all 0.15s ease;
font-size: 0.8rem;
font-weight: 600;
}
.details-btn:hover[b-zv0w1nn2x7] {
border-color: var(--rk-green, #28a745);
color: var(--rk-green-dark, #1e7e34);
}
/* ── Wrapper ──────────────────────────────────────────────────────────── */
.standings-wrapper[b-zv0w1nn2x7] {
margin-top: 0.25rem;
}
/* ── Insignia de posición — firma visual: chip con borde grueso ─────── */
.rank-badge[b-zv0w1nn2x7] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.1rem;
height: 2.1rem;
padding: 0 0.35rem;
border-radius: 999px;
border: 2px solid var(--rk-ink, #16181b);
background: #fff;
color: var(--rk-ink, #16181b);
font-family: var(--rk-display, 'Teko', system-ui, sans-serif);
font-size: 1.3rem;
font-weight: 600;
line-height: 1;
}
.rank-badge.rank-green[b-zv0w1nn2x7] {
background: var(--rk-green, #28a745);
border-color: var(--rk-green, #28a745);
color: #fff;
}
.rank-badge.rank-gold[b-zv0w1nn2x7] {
background: var(--rk-gold, #d9a520);
border-color: var(--rk-gold, #d9a520);
color: #16181b;
}
/* ── Toggle FIVB / Liga / Ambos ──────────────────────────────────────── */
.standings-toggle[b-zv0w1nn2x7] {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.toggle-btn[b-zv0w1nn2x7] {
padding: 0.35rem 1rem;
border: 2px solid var(--rk-ink, #16181b);
border-radius: 999px;
background: #fff;
color: var(--rk-ink, #16181b);
cursor: pointer;
font-family: var(--rk-display, 'Teko', system-ui, sans-serif);
font-size: 1.05rem;
letter-spacing: 0.02em;
transition: all 0.15s ease;
}
.toggle-btn:hover[b-zv0w1nn2x7] {
border-color: var(--rk-green, #28a745);
color: var(--rk-green-dark, #1e7e34);
}
.toggle-btn.active[b-zv0w1nn2x7] {
background: var(--rk-green, #28a745);
border-color: var(--rk-green, #28a745);
color: #fff;
}
/* ── Tabla — vista desktop ───────────────────────────────────────────── */
.ranking-table[b-zv0w1nn2x7] {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.ranking-table th[b-zv0w1nn2x7],
.ranking-table td[b-zv0w1nn2x7] {
border-bottom: 1px solid var(--rk-line, #e2e2e2);
padding: 0.6rem 0.5rem;
text-align: center;
}
.ranking-table th[b-zv0w1nn2x7] {
background-color: #f7f7f7;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rk-muted, #6b7280);
border-top: 2px solid var(--rk-ink, #16181b);
}
.stat-cell[b-zv0w1nn2x7] {
font-family: var(--rk-mono, 'JetBrains Mono', ui-monospace, monospace);
font-variant-numeric: tabular-nums;
}
/* Hover effect en filas */
.ranking-table tbody tr:hover[b-zv0w1nn2x7] {
background-color: var(--rk-green-soft, #eaf7ef);
transition: background 0.2s ease;
}
/* ── Headers de tabla ordenables ─────────────────────────────────────── */
.standings-table th.sortable[b-zv0w1nn2x7] {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.standings-table th.sortable:hover[b-zv0w1nn2x7] {
background-color: var(--rk-green-soft, #eaf7ef);
color: var(--rk-green-dark, #1e7e34);
}
.standings-table th.sort-active[b-zv0w1nn2x7] {
background-color: var(--rk-green-soft, #eaf7ef);
color: var(--rk-green-dark, #1e7e34);
}
/* ── Columna FIVB: header con botón de info inline ──────────────────── */
.fivb-header-content[b-zv0w1nn2x7] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
position: relative;
}
.fivb-info-btn[b-zv0w1nn2x7] {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 0.9rem;
color: #9aa0a6;
line-height: 1;
border-radius: 50%;
transition: color 0.15s ease;
}
.fivb-info-btn:hover[b-zv0w1nn2x7],
.fivb-info-btn:focus[b-zv0w1nn2x7] {
color: var(--rk-green, #28a745);
outline: none;
}
/* Tooltip tappable — aparece bajo el header al hacer tap/click (M-D) */
.fivb-tooltip[b-zv0w1nn2x7] {
position: absolute;
top: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
background: var(--rk-ink, #16181b);
color: #fff;
font-size: 0.78rem;
padding: 0.4rem 0.7rem;
border-radius: 6px;
white-space: nowrap;
z-index: 10;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* Triángulo apuntador */
.fivb-tooltip[b-zv0w1nn2x7]::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: var(--rk-ink, #16181b);
}
/* ── Filas inactivas (M-C: color en celdas, NO opacity en ) ─────── */
.row-inactive[b-zv0w1nn2x7] {
background-color: #fafafa;
}
/* Atenuar solo el TEXTO de datos, no el badge */
.row-inactive td.dim[b-zv0w1nn2x7],
.row-inactive span.dim[b-zv0w1nn2x7] {
color: #9ca3af;
}
/* Badge "Retirado" — plena opacidad, obligatorio para accesibilidad (M-C) */
.badge-retired[b-zv0w1nn2x7] {
display: inline-block;
font-size: 0.68rem;
font-weight: 600;
padding: 0.1em 0.5em;
border-radius: 3px;
background: #e9ecef;
color: #495057;
margin-left: 0.4rem;
white-space: nowrap;
letter-spacing: 0.02em;
}
/* ── Hover en filas inactivas — más sutil que activas ───────────────── */
.standings-table tbody tr.row-inactive:hover[b-zv0w1nn2x7] {
background-color: #f0f0f0;
}
/* ── Móvil: tabla se transforma en tarjetas apiladas ─────────────────── */
@media (max-width: 639px) {
.standings-table thead[b-zv0w1nn2x7] {
display: none;
}
.standings-table[b-zv0w1nn2x7],
.standings-table tbody[b-zv0w1nn2x7],
.standings-table tr[b-zv0w1nn2x7],
.standings-table td[b-zv0w1nn2x7] {
display: block;
width: 100%;
}
.standings-table tr[b-zv0w1nn2x7] {
position: relative;
border: 1px solid var(--rk-line, #e2e2e2);
border-radius: 10px;
padding: 0.75rem 0.85rem 0.75rem 3.6rem;
margin-bottom: 0.65rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.standings-table td[b-zv0w1nn2x7] {
border-bottom: none;
padding: 0.15rem 0;
text-align: left;
}
/* Rank badge flota a la izquierda de la tarjeta */
.standings-table td[data-label="#"][b-zv0w1nn2x7] {
position: absolute;
left: 0.75rem;
top: 0.75rem;
padding: 0;
}
.standings-table td.team-cell[b-zv0w1nn2x7] {
padding-bottom: 0.4rem;
font-size: 1.02rem;
}
/* Estadísticas en fila tipo "etiqueta: valor" */
.standings-table td.stat-cell[b-zv0w1nn2x7] {
display: inline-flex;
width: auto;
align-items: baseline;
gap: 0.3rem;
margin-right: 0.9rem;
}
.standings-table td.stat-cell[b-zv0w1nn2x7]::before {
content: attr(data-label);
font-family: system-ui, sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rk-muted, #6b7280);
}
.standings-table td:last-child[b-zv0w1nn2x7] {
margin-top: 0.5rem;
}
.standings-wrapper[b-zv0w1nn2x7] {
overflow-x: visible;
}
.standings-toggle[b-zv0w1nn2x7] {
justify-content: center;
}
.fivb-tooltip[b-zv0w1nn2x7] {
white-space: normal;
min-width: 180px;
text-align: center;
}
}
/* Equipos clasificados a playoffs */
.badge-qualified[b-zv0w1nn2x7] {
display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
background: #e6f6ea; color: #1e7e34; border: 1px solid #b7e2c1;
}
.standings-table tbody tr.row-qualified td:first-child[b-zv0w1nn2x7] { box-shadow: inset 4px 0 0 #28a745; }
/* /Components/Pages/TeamSeasonHistoryTable.razor.rz.scp.css */
/* Mismo lenguaje visual que MatchHistoryTable.razor.css — misma página, misma tabla de al lado,
no un componente aparte con su propia paleta. */
.history-hint[b-kype02efrr] {
text-align: center;
font-style: italic;
color: #666;
margin: 1rem 0;
}
h4[b-kype02efrr] {
margin: 1.5rem 0 0.5rem;
color: #333;
}
.season-history[b-kype02efrr] {
width: 100%;
border-collapse: collapse;
margin-top: 0.5rem;
margin-bottom: 1rem;
font-size: 0.95rem;
border-radius: 8px;
overflow: hidden;
}
.season-history th[b-kype02efrr],
.season-history td[b-kype02efrr] {
border-bottom: 1px solid #ddd;
padding: 0.6rem;
text-align: center;
}
.season-history th[b-kype02efrr] {
background-color: #f5f5f5;
font-weight: 600;
color: #333;
}
.season-history tbody tr:nth-child(even)[b-kype02efrr] {
background-color: #fafafa;
}
.season-history tbody tr:hover[b-kype02efrr] {
background-color: #f0f9f4;
transition: background 0.2s ease;
}
.season-name[b-kype02efrr] {
text-align: left;
font-weight: 600;
color: #333;
}
.season-year[b-kype02efrr] {
display: inline-block;
margin-left: 0.4rem;
font-weight: 400;
font-size: 0.82rem;
color: #888;
}
.elo-range[b-kype02efrr] {
color: #555;
white-space: nowrap;
}
/* Resultado con colores — mismos tonos que MatchHistoryTable */
.result-win[b-kype02efrr] { color: #28a745; font-weight: bold; }
.result-loss[b-kype02efrr] { color: #dc3545; font-weight: bold; }
/* Delta de ELO con triángulo, igual criterio que .points-up/.points-down de MatchHistoryTable */
.points-up[b-kype02efrr], .points-down[b-kype02efrr], .points-neutral[b-kype02efrr] {
position: relative;
font-weight: 600;
padding-left: 1.2rem;
white-space: nowrap;
}
.points-up[b-kype02efrr]::before {
content: "";
position: absolute;
left: 0.2rem;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #28a745;
}
.points-down[b-kype02efrr]::before {
content: "";
position: absolute;
left: 0.2rem;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #dc3545;
}
@media (max-width: 768px) {
.season-history[b-kype02efrr] { font-size: 0.85rem; }
.season-history th[b-kype02efrr], .season-history td[b-kype02efrr] { padding: 0.4rem; }
.elo-range[b-kype02efrr] { white-space: normal; }
}
/* /Components/Pages/TeamStats.razor.rz.scp.css */
.breadcrumb-bar[b-vpf11c2rpe] {
margin-bottom: 1rem;
}
.back-btn[b-vpf11c2rpe] {
background: none;
border: none;
color: #28a745;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
padding: 0.25rem 0;
text-decoration: underline;
text-underline-offset: 3px;
}
.back-btn:hover[b-vpf11c2rpe] {
color: #1e7e34;
}
.stats-title[b-vpf11c2rpe] {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
text-align: center;
color: #333;
}
.filter-panel[b-vpf11c2rpe] {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
}
.filter-group[b-vpf11c2rpe] {
display: flex;
flex-direction: column;
min-width: 180px;
}
.filter-group label[b-vpf11c2rpe] {
font-weight: 500;
margin-bottom: 0.5rem;
color: #444;
}
.filter-group select[b-vpf11c2rpe] {
padding: 0.5rem 0.75rem;
border-radius: 999px;
border: 1px solid #ccc;
font-size: 1rem;
background-color: #fff;
transition: border-color 0.2s ease;
}
.filter-group select:hover[b-vpf11c2rpe] {
border-color: #28a745;
}
@media (max-width: 768px) {
.filter-group[b-vpf11c2rpe] {
align-items: center;
text-align: center;
}
.filter-group label[b-vpf11c2rpe] {
text-align: center;
width: 100%;
}
}
.stats-section[b-vpf11c2rpe] {
padding: 1rem;
border-top: 2px dashed #ccc;
}
.stats-hint[b-vpf11c2rpe] {
text-align: center;
font-style: italic;
color: #666;
margin-top: 1rem;
}
.summary-card[b-vpf11c2rpe] {
background: #f5f5f5;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.match-history[b-vpf11c2rpe] {
width: 100%;
border-collapse: collapse;
margin-bottom: 2rem;
font-size: 0.95rem;
}
.match-history th[b-vpf11c2rpe], .match-history td[b-vpf11c2rpe] {
border: 1px solid #ddd;
padding: 0.5rem;
text-align: center;
}
.match-history th[b-vpf11c2rpe] {
background-color: #eee;
font-weight: 600;
}
/* /Components/Pages/TopHeader.razor.rz.scp.css */
.top-bar[b-vn956iunbr] {
display: flex;
flex-direction: column; /* Logo arriba, botones abajo */
align-items: center;
padding: 1rem;
background-color: #f9f9f9;
border-bottom: 2px solid #eee;
}
.logo-container img[b-vn956iunbr] {
height: 150px; /* logo grande */
max-width: 100%;
}
.nav-buttons[b-vn956iunbr] {
display: flex;
gap: 1rem;
margin-top: 1rem;
flex-wrap: wrap;
justify-content: center;
}
/* 🔑 Reforzamos que los NavLink se vean como botones */
.nav-pill[b-vn956iunbr],
.nav-pill:link[b-vn956iunbr],
.nav-pill:visited[b-vn956iunbr] {
display: inline-block;
background-color: #fff;
color: #000;
border: 2px solid #000;
border-radius: 999px; /* forma de cápsula */
padding: 0.5rem 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none !important; /* quitar subrayado */
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-pill:hover[b-vn956iunbr] {
border-color: #28a745;
color: #28a745;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
.nav-pill:active[b-vn956iunbr] {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.nav-pill.active[b-vn956iunbr] {
border-color: #28a745;
color: #28a745;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
/* /Components/Shared/ClubStatCard.razor.rz.scp.css */
.csc[b-n4p1ocso8b] {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: .95rem 1.05rem;
display: flex;
flex-direction: column;
gap: .12rem;
min-width: 0; /* deja que la tarjeta ceda ante el ancho del track del grid */
}
.csc-accent-court[b-n4p1ocso8b] { border-left: 3px solid var(--court); }
.csc-accent-chalk[b-n4p1ocso8b] { border-left: 3px solid var(--chalk); }
.csc-accent-paid[b-n4p1ocso8b] { border-left: 3px solid var(--paid); }
.csc-accent-due[b-n4p1ocso8b] { border-left: 3px solid var(--due); }
.csc-top[b-n4p1ocso8b] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .5rem;
min-width: 0;
}
.csc-value[b-n4p1ocso8b] {
font-family: var(--cond);
font-weight: 600;
font-size: 1.55rem;
line-height: 1.1;
color: var(--ink);
min-width: 0;
overflow-wrap: anywhere; /* un importe muy largo se parte antes de forzar overflow horizontal */
}
.csc-label[b-n4p1ocso8b] { font-size: .82rem; color: var(--ink); margin-top: .2rem; }
.csc-sub[b-n4p1ocso8b] { font-size: .73rem; color: var(--ink-soft); }
.csc-chip[b-n4p1ocso8b] {
flex: none;
font-family: var(--cond);
font-weight: 600;
font-size: .78rem;
letter-spacing: .01em;
padding: .06rem .4rem;
border-radius: 999px;
white-space: nowrap;
}
.csc-chip-good[b-n4p1ocso8b] { background: rgba(46,125,91,.14); color: #1f5a41; }
.csc-chip-bad[b-n4p1ocso8b] { background: rgba(194,65,12,.14); color: #8a2f0c; }
.csc-chip-neutral[b-n4p1ocso8b] { background: var(--ground); color: var(--ink-soft); border: 1px solid var(--line); }
.csc-chip-partial[b-n4p1ocso8b] { opacity: .55; }
/* /Components/Shared/PlayoffAgendaBody.razor.rz.scp.css */
.pab-root[b-0o1feo2cio] { display: flex; flex-direction: column; gap: 1.5rem; }
.pab-day-title[b-0o1feo2cio] {
margin: 0 0 0.6rem; font-family: var(--pf-display, 'Teko', system-ui, sans-serif);
font-size: 1.5rem; font-weight: 600; letter-spacing: 0.02em; color: var(--pf-ink, #16181b);
}
.pab-game[b-0o1feo2cio] {
display: flex; gap: 1rem; align-items: stretch;
background: #fff; border: 1px solid var(--pf-line, #d8d8dc); border-radius: 12px;
padding: 0.65rem 0.9rem; margin-bottom: 0.5rem;
}
.pab-game.pab-live[b-0o1feo2cio] { border-color: var(--pf-green, #28a745); box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15); }
.pab-game.pab-done[b-0o1feo2cio] { background: #fafafa; }
.pab-time[b-0o1feo2cio] {
flex: 0 0 4.2rem; display: flex; align-items: center; justify-content: center;
font-family: var(--pf-mono, ui-monospace, monospace); font-size: 1.05rem; font-weight: 700;
color: var(--pf-ink, #16181b);
}
.pab-body[b-0o1feo2cio] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pab-round[b-0o1feo2cio] {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: #a67c10;
}
.pab-teams[b-0o1feo2cio] { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; font-weight: 600; color: var(--pf-ink, #16181b); }
.pab-vs[b-0o1feo2cio] { font-weight: 400; color: var(--pf-muted, #6b7280); font-size: 0.85rem; }
.pab-won[b-0o1feo2cio] { color: var(--pf-green-dark, #1e7e34); }
.pab-meta[b-0o1feo2cio] { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.82rem; color: var(--pf-muted, #6b7280); }
.pab-score[b-0o1feo2cio] { font-family: var(--pf-mono, ui-monospace, monospace); font-weight: 700; color: var(--pf-ink, #16181b); }
.pab-badge[b-0o1feo2cio] {
display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
background: var(--pf-gold-soft, #fbf1d9); color: #8a6a10;
}
.pab-badge-live[b-0o1feo2cio] { background: #e6f6ea; color: #1e7e34; }
.pab-empty[b-0o1feo2cio] { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem; color: var(--pf-muted, #6b7280); }
.pab-empty span[b-0o1feo2cio] { font-size: 2.2rem; opacity: 0.6; }
@media (max-width: 480px) {
.pab-game[b-0o1feo2cio] { gap: 0.6rem; padding: 0.55rem 0.65rem; }
.pab-time[b-0o1feo2cio] { flex-basis: 3.3rem; font-size: 0.95rem; }
}
/* /Components/Shared/TournamentBracketBody.razor.rz.scp.css */
/*
Paleta clara por default -- mismo tratamiento que el resto de la agenda pública y de
/playoffs (Components/Pages/Playoffs.razor.css: oro #d9a520, verde de "ganó" #28a745, azul de
"en vivo" #1a7fd1). [data-theme="dark"] es el "modo arena" opcional (Dark=true, sólo lo usa el
calendario admin con su selector de tema) -- mismo criterio que TournamentCalendarBody/
TournamentStandingsBody: variables claras en :root, override completo bajo [data-theme="dark"].
Tipografía Barlow Condensed (displays/rondas/podio) + Barlow (nombres de equipo) + JetBrains
Mono (marcadores) -- mismo trío que ya usa el resto del módulo de torneo, ya cargado
globalmente en Components/App.razor.
*/
.tbb-root[b-rbzt4e66eg] {
--tbb-bg: #ffffff;
--tbb-panel: #ffffff;
--tbb-panel2: #f6f6f5;
--tbb-border: #d8d8dc;
--tbb-ink: #16181b;
--tbb-muted: #6b7280;
--tbb-gold: #d9a520;
--tbb-gold-soft:#fbf1d9;
--tbb-gold-ink: #16181b;
--tbb-silver: #8a94a6;
--tbb-silver-soft:#eef0f3;
--tbb-silver-ink: #16181b;
--tbb-bronze: #b0703a;
--tbb-bronze-soft:#f7ebe0;
--tbb-bronze-ink: #16181b;
--tbb-won: #1e7e34;
--tbb-live: #1a7fd1;
--tbb-schedule-bg: #eceafc;
--tbb-schedule-ink: #524ab0;
--tbb-display: 'Barlow Condensed', system-ui, sans-serif;
--tbb-body: 'Barlow', system-ui, sans-serif;
--tbb-mono: 'JetBrains Mono', ui-monospace, monospace;
--tbb-gap: 2.25rem;
--tbb-node-h: 4.75rem;
background: var(--tbb-bg);
color: var(--tbb-ink);
font-family: var(--tbb-body);
border: 1px solid var(--tbb-border);
border-radius: 16px;
padding: 1.4rem 1.1rem 1.75rem;
}
/* ── "Modo arena" -- oscuro, opt-in vía Dark="true" (hoy sólo el calendario admin) ────── */
.tbb-root[data-theme="dark"][b-rbzt4e66eg] {
--tbb-bg: #0b0f14;
--tbb-panel: #131a22;
--tbb-panel2: #182029;
--tbb-border: #26313d;
--tbb-ink: #f3f1ec;
--tbb-muted: #8b96a5;
--tbb-gold: #f0b429;
--tbb-gold-soft:#171008;
--tbb-gold-ink: #1a1408;
--tbb-silver: #c7d2e0;
--tbb-silver-soft:#10141a;
--tbb-silver-ink: #10151c;
--tbb-bronze: #d98a4a;
--tbb-bronze-soft:#171208;
--tbb-bronze-ink: #1a1006;
--tbb-won: #35d0c4;
--tbb-live: #35d0c4;
--tbb-schedule-bg: #23253f;
--tbb-schedule-ink: #b7b3ec;
}
.tbb-muted[b-rbzt4e66eg] { color: var(--tbb-muted); padding: 1rem 0; }
.tbb-empty[b-rbzt4e66eg] {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 3rem 1.5rem; color: var(--tbb-muted);
}
.tbb-empty-icon[b-rbzt4e66eg] { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.7; }
.tbb-empty p[b-rbzt4e66eg] { margin: 0.15rem 0; }
.tbb-empty-sub[b-rbzt4e66eg] { font-size: 0.88rem; opacity: 0.8; }
/* ── Riel de progreso -- dónde va el torneo, de un vistazo ─────────────── */
.tbb-rail[b-rbzt4e66eg] {
display: flex; align-items: center; gap: 0; margin-bottom: 1.5rem;
overflow-x: auto; scrollbar-width: none; padding-bottom: 0.2rem;
}
.tbb-rail[b-rbzt4e66eg]::-webkit-scrollbar { display: none; }
.tbb-rail-step[b-rbzt4e66eg] {
display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto;
font-family: var(--tbb-display); font-weight: 600; font-size: 0.95rem;
letter-spacing: 0.02em; white-space: nowrap; position: relative; padding-right: 1.6rem;
}
.tbb-rail-step:not(:last-child)[b-rbzt4e66eg]::after {
content: ""; position: absolute; right: 0.35rem; top: 50%; width: 1rem; height: 2px;
background: var(--tbb-border); transform: translateY(-50%);
}
.tbb-rail-step.tbb-rail-done:not(:last-child)[b-rbzt4e66eg]::after { background: var(--tbb-gold); opacity: 0.6; }
.tbb-rail-dot[b-rbzt4e66eg] {
display: inline-flex; align-items: center; justify-content: center;
width: 1.35rem; height: 1.35rem; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--tbb-border); font-size: 0.7rem; color: var(--tbb-gold-ink);
}
.tbb-rail-done .tbb-rail-dot[b-rbzt4e66eg] { background: var(--tbb-gold); border-color: var(--tbb-gold); }
.tbb-rail-done .tbb-rail-label[b-rbzt4e66eg] { color: var(--tbb-muted); }
.tbb-rail-current .tbb-rail-dot[b-rbzt4e66eg] { border-color: var(--tbb-live); box-shadow: 0 0 0 3px rgba(26,127,209,.16); animation: tbb-rail-pulse-b-rbzt4e66eg 1.8s ease-in-out infinite; }
.tbb-root[data-theme="dark"] .tbb-rail-current .tbb-rail-dot[b-rbzt4e66eg] { box-shadow: 0 0 0 3px rgba(53,208,196,.18); }
.tbb-rail-current .tbb-rail-label[b-rbzt4e66eg] { color: var(--tbb-ink); }
.tbb-rail-upcoming .tbb-rail-dot[b-rbzt4e66eg] { opacity: 0.5; }
.tbb-rail-upcoming .tbb-rail-label[b-rbzt4e66eg] { color: var(--tbb-muted); opacity: 0.75; }
@keyframes tbb-rail-pulse-b-rbzt4e66eg {
0%, 100% { box-shadow: 0 0 0 3px rgba(26,127,209,.16); }
50% { box-shadow: 0 0 0 6px rgba(26,127,209,.05); }
}
.tbb-root[data-theme="dark"] .tbb-rail-current .tbb-rail-dot[b-rbzt4e66eg] { animation-name: tbb-rail-pulse-dark-b-rbzt4e66eg; }
@keyframes tbb-rail-pulse-dark-b-rbzt4e66eg {
0%, 100% { box-shadow: 0 0 0 3px rgba(53,208,196,.18); }
50% { box-shadow: 0 0 0 6px rgba(53,208,196,.06); }
}
/* ── Podio -- alturas reales, no 3 tarjetas idénticas ───────────────────
Orden físico plata·oro·bronce (izq→der), como un podio de premiación real. */
.tbb-podium[b-rbzt4e66eg] {
display: flex; align-items: flex-end; justify-content: center; gap: 0.9rem;
margin: 0.5rem 0 2rem;
}
.tbb-podium-col[b-rbzt4e66eg] { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 6.5rem; }
.tbb-podium-col-gold[b-rbzt4e66eg] { width: 7.5rem; }
.tbb-podium-crown[b-rbzt4e66eg] { font-size: 1.5rem; line-height: 1; }
.tbb-podium-name[b-rbzt4e66eg] {
font-family: var(--tbb-display); font-weight: 600; font-size: 1rem; text-align: center;
color: var(--tbb-ink); line-height: 1.15;
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tbb-podium-step[b-rbzt4e66eg] {
width: 100%; border-radius: 8px 8px 0 0;
display: flex; align-items: flex-start; justify-content: center; padding-top: 0.3rem;
}
.tbb-podium-num[b-rbzt4e66eg] { font-family: var(--tbb-display); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.tbb-step-gold[b-rbzt4e66eg] { height: 4.5rem; background: linear-gradient(180deg, var(--tbb-gold) 0%, #b8860b 100%); color: var(--tbb-gold-ink); box-shadow: 0 6px 20px rgba(217,165,32,.28); }
.tbb-step-silver[b-rbzt4e66eg] { height: 3.1rem; background: linear-gradient(180deg, var(--tbb-silver) 0%, #6b7484 100%); color: #fff; }
.tbb-step-bronze[b-rbzt4e66eg] { height: 2.2rem; background: linear-gradient(180deg, var(--tbb-bronze) 0%, #8a5527 100%); color: #fff; }
.tbb-root[data-theme="dark"] .tbb-step-silver[b-rbzt4e66eg] { color: var(--tbb-silver-ink); }
.tbb-root[data-theme="dark"] .tbb-step-bronze[b-rbzt4e66eg] { color: var(--tbb-bronze-ink); }
/* ── Árbol — CSS Grid, sin JS ni SVG ──────────────────────────────────── */
.tbb-tree-scroll[b-rbzt4e66eg] { display: none; overflow-x: auto; padding-bottom: 0.5rem; }
.tbb-round-headers[b-rbzt4e66eg] {
display: grid;
grid-template-columns: repeat(var(--tbb-rounds), minmax(190px, 1fr));
column-gap: var(--tbb-gap);
margin-bottom: 0.75rem;
min-width: max-content;
}
.tbb-round-header[b-rbzt4e66eg] {
font-family: var(--tbb-display); font-size: 1.1rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em; color: #fff;
text-align: center; background: #000; border-radius: 6px; padding: 0.35rem 0.5rem;
}
.tbb-tree[b-rbzt4e66eg] {
display: grid;
grid-template-columns: repeat(var(--tbb-rounds), minmax(190px, 1fr));
grid-template-rows: repeat(var(--tbb-leaves), var(--tbb-node-h));
column-gap: var(--tbb-gap);
row-gap: calc(var(--tbb-node-h) / 2);
min-width: max-content;
}
.tbb-node-wrap[b-rbzt4e66eg] { position: relative; display: flex; align-items: center; }
.tbb-connector[b-rbzt4e66eg] {
position: absolute; left: 100%; width: var(--tbb-gap);
border: 0 solid var(--tbb-border); border-left-width: 2px; pointer-events: none;
}
.tbb-connector-top[b-rbzt4e66eg] { top: 50%; height: 50%; border-bottom-width: 2px; border-bottom-left-radius: 8px; }
.tbb-connector-bottom[b-rbzt4e66eg] { bottom: 50%; height: 50%; border-top-width: 2px; border-top-left-radius: 8px; }
.tbb-connector-lit[b-rbzt4e66eg] { border-color: var(--tbb-gold); opacity: 0.7; }
/* ── Tarjeta de nodo ────────────────────────────────────────────────────── */
.tbb-card[b-rbzt4e66eg] {
width: 100%; background: var(--tbb-panel); border: 1.5px solid var(--tbb-border);
border-radius: 10px; padding: 0.5rem 0.7rem; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.tbb-root[data-theme="dark"] .tbb-card[b-rbzt4e66eg] { box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.tbb-card-slot[b-rbzt4e66eg] {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem; padding: 0.22rem 0.4rem; font-size: 1.01rem; color: var(--tbb-ink);
background: color-mix(in srgb, var(--tbb-panel2) 87%, black 13%);
}
.tbb-card-slot:first-of-type[b-rbzt4e66eg] { border-radius: 6px 6px 0 0; }
.tbb-card-slot:last-of-type[b-rbzt4e66eg] { border-radius: 0 0 6px 6px; }
/* En modo arena panel2 ya es oscuro -- mezclar con negro lo funde con el fondo. Se aclara
con blanco en vez de oscurecer, para que la franja se distinga del panel de la tarjeta. */
.tbb-root[data-theme="dark"] .tbb-card-slot[b-rbzt4e66eg] { background: color-mix(in srgb, var(--tbb-panel2) 82%, white 18%); }
.tbb-slot-team[b-rbzt4e66eg] { display: flex; align-items: center; gap: 0.35rem; min-width: 0; flex: 1 1 auto; }
.tbb-slot-name[b-rbzt4e66eg] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Logo del equipo -- cuadrado redondeado; si /api/team/{id}/logo da 404, el onerror del
revela .tbb-slot-logo-fallback (mismo mecanismo que MatchCard.razor). */
.tbb-slot-logo-wrap[b-rbzt4e66eg] { display: inline-flex; flex-shrink: 0; }
.tbb-slot-logo[b-rbzt4e66eg] {
width: 21px; height: 21px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
}
.tbb-slot-logo-fallback[b-rbzt4e66eg] {
display: none; width: 21px; height: 21px; border-radius: 4px;
align-items: center; justify-content: center; color: #fff;
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
flex-shrink: 0;
}
.tbb-card-final .tbb-slot-logo[b-rbzt4e66eg], .tbb-card-final .tbb-slot-logo-fallback[b-rbzt4e66eg] { width: 28px; height: 28px; font-size: 0.71rem; }
.tbb-badge-retired[b-rbzt4e66eg] {
font-size: 0.71rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
color: #b91c1c; background: #fee2e2; border-radius: 4px; padding: 0.05rem 0.35rem; flex-shrink: 0;
}
.tbb-root[data-theme="dark"] .tbb-badge-retired[b-rbzt4e66eg] { color: #ffb4b4; background: rgba(240,82,110,.16); }
.tbb-slot-score[b-rbzt4e66eg] {
font-family: var(--tbb-mono); font-weight: 700; flex-shrink: 0;
font-size: 1.61rem; line-height: 1; min-width: 1.1ch; text-align: right; color: var(--tbb-muted);
}
.tbb-card-slot.tbb-won[b-rbzt4e66eg] { color: var(--tbb-won); font-weight: 700; }
.tbb-card-slot.tbb-won .tbb-slot-score[b-rbzt4e66eg] { color: var(--tbb-won); }
.tbb-root[data-theme="dark"] .tbb-card-slot.tbb-won[b-rbzt4e66eg] { color: #fff; }
.tbb-card-sets[b-rbzt4e66eg] {
font-family: var(--tbb-mono); font-size: 0.83rem; color: var(--tbb-muted);
margin-top: 0.2rem; padding-top: 0.2rem; border-top: 1px dashed var(--tbb-border);
}
.tbb-card-meta[b-rbzt4e66eg] {
margin-top: 0.15rem; font-size: 0.83rem; color: var(--tbb-muted);
display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
}
.tbb-card-schedule[b-rbzt4e66eg] {
color: var(--tbb-schedule-ink); font-weight: 600;
background: var(--tbb-schedule-bg); border-radius: 6px; padding: 0.15rem 0.45rem;
}
.tbb-reserved-tag[b-rbzt4e66eg] { display: block; width: 100%; font-style: italic; font-weight: 400; color: var(--tbb-muted); margin-top: 0.1rem; }
/* Camino de cada lugar del podio -- glow estático, sin animación. El orden de las reglas no
importa: PathClassFor nunca devuelve más de una clase para el mismo nodo. */
.tbb-path-champion[b-rbzt4e66eg] {
border-color: var(--tbb-gold); border-left-width: 4px;
box-shadow: 0 0 0 1px var(--tbb-gold), 0 6px 18px rgba(217,165,32,.3);
}
.tbb-path-runnerup[b-rbzt4e66eg] {
border-color: var(--tbb-silver); border-left-width: 4px;
box-shadow: 0 0 0 1px var(--tbb-silver), 0 4px 14px rgba(138,148,166,.22);
}
.tbb-path-third[b-rbzt4e66eg] {
border-color: var(--tbb-bronze); border-left-width: 4px;
box-shadow: 0 0 0 1px var(--tbb-bronze), 0 4px 14px rgba(176,112,58,.22);
}
.tbb-root[data-theme="dark"] .tbb-path-champion[b-rbzt4e66eg] { background: var(--tbb-gold-soft); box-shadow: 0 0 0 1px var(--tbb-gold), 0 6px 20px rgba(240,180,41,.22); }
.tbb-root[data-theme="dark"] .tbb-path-runnerup[b-rbzt4e66eg] { background: var(--tbb-silver-soft); box-shadow: 0 0 0 1px var(--tbb-silver), 0 4px 14px rgba(199,210,224,.16); }
.tbb-root[data-theme="dark"] .tbb-path-third[b-rbzt4e66eg] { background: var(--tbb-bronze-soft); box-shadow: 0 0 0 1px var(--tbb-bronze), 0 4px 14px rgba(217,138,74,.16); }
/* La Final es el nodo más grande del árbol -- el ojo debe caer ahí. Sin transform:scale a
propósito: escalar el contenido sin ensanchar la celda del grid lo desborda y recorta texto
(ver tbb-card-meta) -- el énfasis viene de borde más grueso + tipografía más grande, dentro
del mismo ancho de columna que el resto del árbol. */
.tbb-card-final[b-rbzt4e66eg] {
padding: 0.7rem 0.85rem; border-width: 2px;
}
.tbb-card-final .tbb-slot-name[b-rbzt4e66eg] { font-family: var(--tbb-display); font-size: 1.21rem; font-weight: 600; }
.tbb-card-final .tbb-slot-score[b-rbzt4e66eg] { font-size: 1.96rem; }
.tbb-card-final .tbb-card-meta[b-rbzt4e66eg] { font-size: 0.87rem; }
/* Reservado: cancha/fecha apartadas pero rival todavía sin definir -- contorno punteado en vez
de sólido, para distinguirlo a simple vista de un partido de verdad agendado. */
.tbb-card-reserved[b-rbzt4e66eg] {
border-style: dashed;
background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(0,0,0,0.025) 10px 11px);
}
.tbb-root[data-theme="dark"] .tbb-card-reserved[b-rbzt4e66eg] {
background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255,255,255,0.02) 10px 11px);
}
/* Único elemento con movimiento continuo: pulso en el partido en curso. */
.tbb-live-badge[b-rbzt4e66eg] { color: var(--tbb-live); font-weight: 600; }
.tbb-live-dot[b-rbzt4e66eg] {
display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
background: var(--tbb-live); animation: tbb-live-pulse-b-rbzt4e66eg 1.4s ease-in-out infinite;
}
@keyframes tbb-live-pulse-b-rbzt4e66eg {
0%, 100% { box-shadow: 0 0 0 0 rgba(26,127,209,.5); }
50% { box-shadow: 0 0 0 5px rgba(26,127,209,0); }
}
.tbb-root[data-theme="dark"] .tbb-live-dot[b-rbzt4e66eg] { animation-name: tbb-live-pulse-dark-b-rbzt4e66eg; }
@keyframes tbb-live-pulse-dark-b-rbzt4e66eg {
0%, 100% { box-shadow: 0 0 0 0 rgba(53,208,196,.5); }
50% { box-shadow: 0 0 0 5px rgba(53,208,196,0); }
}
/* ── Partido por el 3er lugar — aparte del árbol ───────────────────────── */
.tbb-third-place[b-rbzt4e66eg] { display: none; max-width: 320px; margin: 1.5rem 0 0; }
.tbb-round-header-inline[b-rbzt4e66eg] { text-align: left; display: inline-block; }
/* ── Acordeón móvil — se abandona el árbol bajo 640px ──────────────────── */
.tbb-accordion[b-rbzt4e66eg] { display: flex; flex-direction: column; gap: 0.75rem; }
.tbb-round-pills[b-rbzt4e66eg] { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; }
.tbb-round-pills[b-rbzt4e66eg]::-webkit-scrollbar { display: none; }
.tbb-round-pill[b-rbzt4e66eg] {
flex: 0 0 auto; font-family: var(--tbb-display); font-size: 0.95rem; font-weight: 600;
background: var(--tbb-panel2); color: var(--tbb-ink); border: 2px solid var(--tbb-border);
border-radius: 999px; padding: 0.3rem 0.9rem; cursor: pointer; white-space: nowrap;
}
.tbb-round-pill.active[b-rbzt4e66eg] { background: var(--tbb-gold); border-color: var(--tbb-gold); color: var(--tbb-gold-ink); }
.tbb-accordion-nodes[b-rbzt4e66eg] { display: flex; flex-direction: column; gap: 0.6rem; }
/* ── Breakpoint: ≥640px muestra el árbol, oculta el acordeón ───────────── */
@media (min-width: 640px) {
.tbb-tree-scroll[b-rbzt4e66eg] { display: block; }
.tbb-third-place[b-rbzt4e66eg] { display: block; }
.tbb-accordion[b-rbzt4e66eg] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tbb-live-dot[b-rbzt4e66eg], .tbb-rail-current .tbb-rail-dot[b-rbzt4e66eg] { animation: none; }
}
/* /Components/Shared/TournamentCalendarBody.razor.rz.scp.css */
/*
Tokens propios (prefijo tcb-), con variante clara (default) y oscura ([data-theme="dark"]) --
el mismo componente se usa en el calendario admin (con selector de tema) y embebido de sólo
lectura en la agenda pública (siempre claro). CSS-isolated: estas reglas nunca se filtran a
otras páginas ni las otras páginas pisan estas.
*/
.tcb-root[b-la0ai6s2va] {
--tcb-ink: #111827;
--tcb-body: #374151;
--tcb-muted: #6b7280;
--tcb-border: #e5e7eb;
--tcb-border-soft: #f1f0ee;
--tcb-amber: #f59e0b;
--tcb-amber-strong: #d97706;
--tcb-th-bg: #fafaf9;
--tcb-free-stripe: #f7f6f4;
--tcb-danger: #dc2626;
--tcb-danger-bg: #fef2f2;
--tcb-danger-border: #fecaca;
--tcb-success: #16a34a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--tcb-body);
}
.tcb-root[data-theme="dark"][b-la0ai6s2va] {
--tcb-ink: #e9e5e0;
--tcb-body: #b7b2ac;
--tcb-muted: #8c8680;
--tcb-border: #322e37;
--tcb-border-soft: #2a2731;
--tcb-amber: #f0a020;
--tcb-amber-strong: #f0a020;
--tcb-th-bg: rgba(255,255,255,0.03);
--tcb-free-stripe: rgba(255,255,255,0.03);
--tcb-danger: #f0526e;
--tcb-danger-bg: rgba(240,82,110,0.12);
--tcb-danger-border: rgba(240,82,110,0.4);
--tcb-success: #33c98a;
}
.tcb-muted[b-la0ai6s2va] { color: var(--tcb-muted); }
.tcb-empty[b-la0ai6s2va] { border: 1px dashed var(--tcb-border); border-radius: 10px; padding: 1.2rem; color: var(--tcb-muted); font-size: 0.9rem; }
.tcb-alert[b-la0ai6s2va] { border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.86rem; margin: 0 0 1rem; }
.tcb-alert-error[b-la0ai6s2va] { background: var(--tcb-danger-bg); border: 1px solid var(--tcb-danger-border); color: var(--tcb-danger); }
/* ── Leyenda de categorías ── */
.tcb-legend[b-la0ai6s2va] { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.78rem; color: var(--tcb-muted); margin: 0 0 1rem; }
.tcb-legend > span[b-la0ai6s2va] { display: inline-flex; align-items: center; gap: 0.4rem; }
.tcb-key[b-la0ai6s2va] { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: none; }
/* ── Grid ── */
.tcb-day-heading[b-la0ai6s2va] {
display: flex; align-items: baseline; gap: 0.6rem; margin: 1.6rem 0 0.5rem;
font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.15rem;
color: var(--tcb-ink); text-transform: capitalize;
}
.tcb-day-heading:first-of-type[b-la0ai6s2va] { margin-top: 0.2rem; }
.tcb-day-count[b-la0ai6s2va] { font-family: inherit; font-weight: 400; font-size: 0.8rem; color: var(--tcb-muted); }
.tcb-grid-wrap[b-la0ai6s2va] { overflow-x: auto; border: 1px solid var(--tcb-border); border-radius: 10px; margin: 0 0 0.6rem; }
.tcb-grid[b-la0ai6s2va] { border-collapse: collapse; width: 100%; min-width: 44rem; }
.tcb-grid th[b-la0ai6s2va] {
background: var(--tcb-th-bg); font: 600 0.76rem "Barlow Condensed", sans-serif; letter-spacing: 0.02em;
color: var(--tcb-amber-strong); padding: 0.5rem 0.7rem; border-bottom: 2px solid var(--tcb-border); text-align: left;
}
.tcb-grid td[b-la0ai6s2va] { border-bottom: 1px solid var(--tcb-border-soft); border-left: 1px solid var(--tcb-border-soft); vertical-align: top; padding: 0.2rem; }
.tcb-time-h[b-la0ai6s2va] { width: 3.5rem; }
.tcb-time[b-la0ai6s2va] { font: 500 0.72rem ui-monospace, monospace; color: var(--tcb-muted); padding: 0.35rem 0.6rem; border-left: none !important; white-space: nowrap; }
.tcb-free[b-la0ai6s2va] { background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--tcb-free-stripe) 8px 9px); }
.tcb-dragover[b-la0ai6s2va] { outline: 2px dashed var(--tcb-amber); outline-offset: -2px; }
.tcb-drop[b-la0ai6s2va] { min-height: 2.7rem; padding: 0.2rem; }
.tcb-block[b-la0ai6s2va] {
display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.4rem 0.55rem;
border-radius: 6px; font-size: 0.79rem; font-weight: 600; color: #111827;
margin-bottom: 0.25rem; line-height: 1.25;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.is-editable .tcb-block[b-la0ai6s2va] { cursor: grab; }
.tcb-grid.is-dragging .tcb-block[b-la0ai6s2va] { pointer-events: none; }
.tcb-vs[b-la0ai6s2va] { font-weight: 400; opacity: 0.65; font-size: 0.72rem; margin: 0 0.2rem; }
.tcb-b-referee[b-la0ai6s2va] { font-size: 0.68rem; font-weight: 500; opacity: 0.78; white-space: nowrap; }
/* ── Ya jugado: gris, sin color de categoría -- se ve de un vistazo qué ya pasó ── */
.tcb-block-played[b-la0ai6s2va] {
background: var(--tcb-border-soft) !important;
color: var(--tcb-muted); box-shadow: none; opacity: 0.75;
}
.is-editable .tcb-block-played[b-la0ai6s2va] { cursor: default; }
/* ── Reservado (Final/3er Lugar sin rivales definidos todavía): sólo contorno de color de
categoría, relleno vacío, borde punteado -- distingue a simple vista de un partido ya agendado
de verdad. Nunca arrastrable (ver draggable="false" en el markup). ── */
.tcb-block-reserved[b-la0ai6s2va] {
background: transparent !important; border: 1.5px dashed currentColor;
color: var(--tcb-ink); box-shadow: none;
}
.tcb-block-reserved .tcb-b-match[b-la0ai6s2va] { opacity: 0.7; font-style: italic; }
/* ── Ronda del playoff (Octavos/Cuartos/Semis/Final/3er Lugar) ── */
.tcb-b-round[b-la0ai6s2va] {
font: 700 0.62rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
opacity: 0.75;
}
.tcb-conflict[b-la0ai6s2va] { outline: 2px solid var(--tcb-danger); outline-offset: -2px; background: var(--tcb-danger-bg); }
.tcb-conflict-badge[b-la0ai6s2va] {
font: 700 0.62rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
color: var(--tcb-danger); margin-bottom: 0.2rem;
}
/* ── Toast ── */
.tcb-toast[b-la0ai6s2va] {
position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
display: flex; align-items: center; gap: 0.8rem; max-width: min(90vw, 34rem);
padding: 0.75rem 1.1rem; border-radius: 10px; z-index: 2000;
box-shadow: 0 10px 28px rgba(0,0,0,0.22); font-size: 0.86rem; font-weight: 600;
animation: tcb-toast-in-b-la0ai6s2va 0.18s ease-out;
color: #fff;
}
.tcb-toast.is-error[b-la0ai6s2va] { background: var(--tcb-danger); }
.tcb-toast.is-success[b-la0ai6s2va] { background: var(--tcb-success); }
.tcb-toast-x[b-la0ai6s2va] {
border: none; background: rgba(255,255,255,0.2); color: #fff; border-radius: 6px;
width: 1.6rem; height: 1.6rem; flex: none; cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.tcb-toast-x:hover[b-la0ai6s2va] { background: rgba(255,255,255,0.32); }
@keyframes tcb-toast-in-b-la0ai6s2va {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* /Components/Shared/TournamentStandingsBody.razor.rz.scp.css */
.tsb-root[b-fkro53d6s1] {
--tsb-ink: #111827;
--tsb-body: #374151;
--tsb-muted: #6b7280;
--tsb-border: #e5e7eb;
--tsb-border-soft: #f1f0ee;
--tsb-amber: #f59e0b;
--tsb-group-bg: #fffbeb;
--tsb-group-ink: #92400e;
--tsb-group-border: #fde68a;
--tsb-hover-bg: #fffaf0;
--tsb-win: #15803d;
--tsb-loss: #b91c1c;
--tsb-modal-bg: #ffffff;
--tsb-overlay: rgba(23, 20, 15, 0.5);
--tsb-modal-shadow: 0 24px 60px rgba(17, 24, 39, 0.2);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--tsb-body);
}
.tsb-root[data-theme="dark"][b-fkro53d6s1] {
--tsb-ink: #e9e5e0;
--tsb-body: #b7b2ac;
--tsb-muted: #8c8680;
--tsb-border: #322e37;
--tsb-border-soft: #2a2731;
--tsb-amber: #f0a020;
--tsb-group-bg: rgba(240,160,32,0.1);
--tsb-group-ink: #f0a020;
--tsb-group-border: rgba(240,160,32,0.35);
--tsb-hover-bg: rgba(240,160,32,0.08);
--tsb-win: #33c98a;
--tsb-loss: #f0526e;
--tsb-modal-bg: #201d24;
--tsb-overlay: rgba(0, 0, 0, 0.7);
--tsb-modal-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.tsb-muted[b-fkro53d6s1] { color: var(--tsb-muted); }
.tsb-empty[b-fkro53d6s1] { border: 1px dashed var(--tsb-border); border-radius: 10px; padding: 1.2rem; color: var(--tsb-muted); font-size: 0.9rem; }
.tsb-cat-heading[b-fkro53d6s1] {
font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.3rem;
color: var(--tsb-ink); margin: 1.6rem 0 0.7rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--tsb-amber);
}
.tsb-cat-heading:first-of-type[b-fkro53d6s1] { margin-top: 0.4rem; }
.tsb-row[b-fkro53d6s1] { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 0.6rem; }
.tsb-wrap[b-fkro53d6s1] { border: 1px solid var(--tsb-border); border-radius: 10px; overflow: hidden; flex: 1 1 20rem; }
.tsb-table[b-fkro53d6s1] { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.tsb-group[b-fkro53d6s1] {
background: var(--tsb-group-bg); color: var(--tsb-group-ink); text-align: left; padding: 0.5rem 0.7rem;
font: 700 0.82rem "Barlow Condensed", sans-serif; letter-spacing: 0.01em; border-bottom: 1px solid var(--tsb-group-border);
}
.tsb-table th[b-fkro53d6s1] { color: var(--tsb-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--tsb-border); }
.tsb-table td[b-fkro53d6s1] { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--tsb-border-soft); color: var(--tsb-body); }
.tsb-table tbody tr:last-child td[b-fkro53d6s1] { border-bottom: none; }
.tsb-num[b-fkro53d6s1] { text-align: center; }
.tsb-pts[b-fkro53d6s1] { font-weight: 700; color: var(--tsb-ink); }
/* ── Renglón de equipo: abre el resumen de partidos ──────────────────────────
El "hot tracking" sólo aplica donde un mouse real puede pasar por encima --
(hover: hover) evita que un tap en móvil deje el color pegado hasta el
siguiente toque en otro lado. */
.tsb-row-click[b-fkro53d6s1] { cursor: pointer; box-shadow: inset 3px 0 0 0 transparent; }
.tsb-row-click:focus-visible[b-fkro53d6s1] { outline: 2px solid var(--tsb-amber); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
.tsb-row-click td[b-fkro53d6s1] { transition: background-color 0.12s ease; }
.tsb-row-click:hover[b-fkro53d6s1] { box-shadow: inset 3px 0 0 0 var(--tsb-amber); }
.tsb-row-click:hover td[b-fkro53d6s1] { background: var(--tsb-hover-bg); }
}
@media (max-width: 640px) {
.tsb-row[b-fkro53d6s1] { flex-direction: column; }
}
/* ── Modal: resumen de partidos de un equipo ─────────────────────────────────
Lista vertical de "boletos" de partido -- cada uno lleva el marcador set por
set como el dato con más peso visual (es lo único que un árbitro/organizador
necesita leer de un vistazo), con el resto de metadatos deliberadamente quieto. */
.tsb-overlay[b-fkro53d6s1] {
position: fixed; inset: 0; background: var(--tsb-overlay);
display: flex; align-items: center; justify-content: center;
padding: 1.25rem; z-index: 1300;
}
.tsb-modal[b-fkro53d6s1] {
background: var(--tsb-modal-bg); border-radius: 12px; box-shadow: var(--tsb-modal-shadow);
width: 100%; max-width: 26rem; max-height: min(32rem, 85vh);
display: flex; flex-direction: column; overflow: hidden;
}
.tsb-modal-head[b-fkro53d6s1] {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: 1.1rem 1.25rem 0.9rem; border-bottom: 1px solid var(--tsb-border);
}
.tsb-modal-kicker[b-fkro53d6s1] {
display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
color: var(--tsb-muted); margin-bottom: 0.15rem;
}
.tsb-modal-title[b-fkro53d6s1] {
margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.5rem;
color: var(--tsb-ink); line-height: 1.1;
}
.tsb-modal-close[b-fkro53d6s1] {
flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 7px; border: none;
background: transparent; color: var(--tsb-muted); font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.tsb-modal-close:hover[b-fkro53d6s1] { background: var(--tsb-hover-bg); color: var(--tsb-ink); }
.tsb-modal-body[b-fkro53d6s1] { padding: 0.4rem 1.25rem 1.1rem; overflow-y: auto; }
.tsb-match-list[b-fkro53d6s1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tsb-match[b-fkro53d6s1] { padding: 0.75rem 0; border-bottom: 1px solid var(--tsb-border-soft); }
.tsb-match:last-child[b-fkro53d6s1] { border-bottom: none; }
.tsb-match-top[b-fkro53d6s1] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.tsb-match-opp[b-fkro53d6s1] { font-weight: 600; color: var(--tsb-ink); font-size: 0.94rem; }
.tsb-match-meta[b-fkro53d6s1] { font-size: 0.76rem; color: var(--tsb-muted); white-space: nowrap; text-transform: capitalize; }
.tsb-match-bottom[b-fkro53d6s1] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.tsb-sets[b-fkro53d6s1] { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tsb-set-chip[b-fkro53d6s1] {
font: 700 0.82rem ui-monospace, "SF Mono", Consolas, monospace;
padding: 0.18rem 0.5rem; border-radius: 5px; letter-spacing: 0.01em;
background: var(--tsb-border-soft); color: var(--tsb-muted);
}
.tsb-set-chip.is-won[b-fkro53d6s1] { background: color-mix(in srgb, var(--tsb-win) 16%, transparent); color: var(--tsb-win); }
.tsb-set-chip.is-lost[b-fkro53d6s1] { background: color-mix(in srgb, var(--tsb-loss) 12%, transparent); color: var(--tsb-loss); }
.tsb-noshow[b-fkro53d6s1] { font-size: 0.82rem; color: var(--tsb-muted); font-style: italic; }
.tsb-match-pts[b-fkro53d6s1] {
font: 700 0.8rem "Barlow Condensed", sans-serif; letter-spacing: 0.02em;
color: var(--tsb-muted); white-space: nowrap;
}
.tsb-match-pts.is-earned[b-fkro53d6s1] { color: var(--tsb-win); }