/* ── Hero / Portada ── (rediseño 2026-07-18: layout horizontal del
     mockup — logo a la izquierda, texto a la derecha. Antes era
     centrado/apilado; el arte de fondo (.hero-bg-art) y el gradiente
     no cambian.) */
  .hero {
    background: var(--hero-gradient);
    padding: 30px 24px;
    text-align: left;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-soft);
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(200,245,29,0.10) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 40%);
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
  }
  .hero-bg-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .hero-bg-art svg { width: 100%; height: 100%; display: block; }
  /* El hero ahora muestra el sello circular autocontenido
     (getTorneoOficialSeal) — sin el cuadrado lima de antes: el SVG trae
     su propio círculo/anillo. La sombra circular le da relieve. */
  .hero-logo {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  }
  .hero-logo svg { width: 100%; height: 100%; display: block; }
  .hero-text { min-width: 0; }
  .hero h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(26px, 6vw, 44px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
  }
  .hero-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .hero-meta svg { flex-shrink: 0; }
  .hero-meta--date { color: var(--lime); font-size: 14px; font-weight: 600; }
  .hero-meta--loc { color: var(--muted); font-size: 12.5px; }
  /* Si el torneo no tiene fecha cargada (hero-date vacío), no dejar la
     fila con el ícono de calendario suelto — se oculta toda la fila. */
  .hero-meta--date:has(#hero-date:empty) { display: none; }
  .hero-badge {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 14px;
    background: var(--lime-bg);
    border: 1px solid rgba(200,245,29,0.4);
    border-radius: 20px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lime);
  }

  /* ── Stats cards ── */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px 16px 0;
  }
  /* ── Section headings ── */
  .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 10px;
  }
  .section-head h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
  }
  .section-head span {
    font-size: 11px;
    color: var(--muted);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ── Category cards ── */
  .cat-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 16px 16px;
  }
  /* ── Finals spotlight ── */
  .finals-scroll {
    display: flex;
    gap: 10px;
    padding: 0 16px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .finals-scroll::-webkit-scrollbar { display: none; }
  .final-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
    background: linear-gradient(135deg, #141b2c 0%, #1b2310 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 16px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s;
  }
  .final-card:active { transform: scale(0.97); }
  .final-card-trophy { font-size: 24px; margin-bottom: 8px; }
  .final-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text);
  }
  .final-card-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
  }
  .final-card-cta {
    margin-top: 12px;
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--lime);
  }

  /* ── Avisos Oficiales ── */
  .avisos-icon-bg {
    background: linear-gradient(135deg, #0d1320 0%, #1b2310 100%) !important;
    border: 1.5px solid rgba(200,245,29,0.35);
    font-size: 20px !important;
  }
  .avisos-home-card {
    background: linear-gradient(135deg, #0d1320 0%, #141b2c 100%) !important;
    border-color: rgba(200,245,29,0.25) !important;
  }
  .avisos-home-card .cat-card-title { color: var(--text) !important; }
  .avisos-home-card .cat-card-meta  { color: var(--muted) !important; }
  .avisos-home-card .cat-card-day   { background: var(--lime-bg) !important; color: var(--lime) !important; border: 1px solid rgba(200,245,29,0.3); }
  .aviso-item {
    background: var(--card);
    border-radius: var(--radius);
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  .aviso-item.urgente    { border-left-color: var(--red); }
  .aviso-item.importante { border-left-color: var(--orange); }
  .aviso-item.normal     { border-left-color: var(--border); }
  .aviso-item-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
  .aviso-prioridad {
    display:inline-flex; align-items:center; gap:4px;
    font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:0.5px; text-transform:uppercase; padding:2px 7px;
    border-radius:6px; flex-shrink:0;
  }
  .aviso-prioridad.urgente    { background:var(--red-bg); color:var(--red); }
  .aviso-prioridad.importante { background:var(--orange-bg); color:var(--orange); }
  .aviso-prioridad.normal     { background:var(--border-soft); color:var(--muted); }
  .aviso-titulo-text {
    font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700;
    color:var(--text); letter-spacing:0.3px; text-transform:uppercase; flex:1;
  }
  .aviso-delete-btn {
    background:none; border:none; color:var(--red); font-size:15px;
    cursor:pointer; padding:2px 4px; opacity:0.75; margin-left:auto; flex-shrink:0;
  }
  .aviso-delete-btn:hover { opacity:1; }
  .aviso-body { font-size:13px; color:var(--text); line-height:1.55; }
  .aviso-time { margin-top:6px; font-size:10px; color:var(--muted); letter-spacing:0.3px; }
  /* ── fin Avisos ── */
  .credits {
    text-align: center;
    padding: 18px;
    font-size: 11px;
    color: var(--text-faint);
    font-family: 'Barlow', sans-serif;
    letter-spacing: 0.3px;
    border-top: 1px solid var(--border-soft);
    margin-top: 10px;
  }
  .credits span { color: var(--lime); font-weight: 600; }
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    animation: fadeIn 0.2s;
    overflow-y: auto;
  }
  .modal.show { display: flex; align-items: flex-start; justify-content: center; padding-top: 20px; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal-content {
    background: var(--card);
    border: 1px solid var(--border-soft);
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    width: 90%;
    max-width: 500px;
    animation: slideUp 0.3s;
    max-height: 90vh;
    overflow-y: auto;
  }
  @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  /* Modificador reutilizable: encabezado y pie fijos, solo el cuerpo central hace scroll.
     Pensado para modales largos (ej. Gestionar Jugadores) donde el pie con botones
     no debe quedar oculto detrás del contenido en pantallas chicas. Funciona igual
     en escritorio y en móvil; en móvil (ver responsive.css) además ocupa el alto
     visible completo con 100dvh. */
  .modal-content--scroll-frame {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden; /* el scroll vive en .modal-body-scroll, no en modal-content */
  }
  .modal-content--scroll-frame .modal-header-fixed {
    flex: 0 0 auto;
    padding: 24px 24px 0;
  }
  .modal-content--scroll-frame .modal-header-fixed .modal-title {
    margin-bottom: 18px;
  }
  .modal-content--scroll-frame .modal-body-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px 16px;
    min-height: 0; /* imprescindible para que flex-basis auto no ignore el overflow */
  }
  .modal-content--scroll-frame .modal-footer-fixed {
    flex: 0 0 auto;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border-soft);
    background: var(--card);
  }
  .modal-content--scroll-frame .modal-footer-fixed .modal-buttons {
    margin-top: 0;
  }

  .modal-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--lime);
    padding-bottom: 10px;
  }
  .form-group {
    margin-bottom: 16px;
  }
  .form-group label {
    display: block;
    font-size: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
  }
  .form-group input, .form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg-soft);
    outline: none;
    transition: border-color 0.2s;
  }
  .form-group input:focus, .form-group select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(200,245,29,0.12); }
  .modal-buttons { display: flex; gap: 10px; margin-top: 24px; }
  .btn {
    flex: 1;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-primary { background: var(--lime); color: #0a0e16; }
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-secondary { background: var(--border-soft); color: var(--text); }
  .btn-secondary:hover { background: var(--border); }
  .btn-danger { background: var(--red); color: #0a0e16; }
  .btn-danger:hover { filter: brightness(1.1); }
  .btn-success { background: var(--green); color: #0a0e16; }
  .btn-success:hover { filter: brightness(1.1); }
  .btn-warning { background: var(--orange); color: #0a0e16; }
  .btn-warning:hover { filter: brightness(1.1); }
  .btn-small { padding: 6px 10px; font-size: 11px; }
  .admin-panel {
    background: var(--card-soft);
    border: 2px solid var(--lime);
    border-radius: 10px;
    padding: 16px;
    margin: 12px;
  }
  .admin-panel h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--lime);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .admin-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  .admin-buttons .btn { flex: 0 1 auto; padding: 8px 14px; font-size: 12px; }
  .tabs {
    display: flex;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: var(--header-h);
    z-index: 48;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
  }
  .tab {
    flex: 1;
    min-width: 120px;
    padding: 13px 6px;
    text-align: center;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 3px solid transparent;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
  }
  .tab:hover { color: var(--text); }
  .tab.active { color: var(--lime); border-bottom-color: var(--lime); }
  /* .cat-tabs/.cat-tab — mismo lenguaje visual de "tabs con subrayado"
     que .tabs/.tab (arriba, los tabs de día) y .opl-filtro (Open Play)
     en vez de pills sueltas con borde y gap (2026-07-25, pedido
     explícito del usuario: "se ven separados feos", pidiendo dejarlas
     "integradas" como el menú de Open Play). Mismo comportamiento —
     solo cambia el estilo. */
  .cat-tabs { display: flex; flex-wrap: wrap; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); }
  .cat-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    font-size: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .cat-tab:hover { color: var(--lime); }
  .cat-tab.active { color: var(--lime); border-bottom-color: var(--lime); }
  /* ── Cronogramas colapsables (Horario — Grupo y Fase Final) ── */
  .group-head.schedule-toggle-head { cursor: pointer; user-select: none; }
  .group-head.schedule-toggle-head:active { background: var(--border-soft); }
  .schedule-toggle-arrow {
    display: inline-block;
    margin-right: 4px;
    font-size: 12px;
    transition: transform 0.2s ease;
    transform: rotate(0deg);
  }
  .group-head.schedule-toggle-head.collapsed .schedule-toggle-arrow { transform: rotate(-90deg); }
  .schedule-body { overflow: hidden; }
  .schedule-body.collapsed { display: none; }
  .edit-btn, .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 6px;
    transition: all 0.2s;
    border-radius: 4px;
  }
  .edit-btn:hover { background: rgba(200,245,29,0.12); }
  .delete-btn:hover { background: rgba(255,107,122,0.14); }
  table.standings { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.standings th {
    text-align: left;
    padding: 7px 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border-soft);
  }
  table.standings th.num { text-align: right; padding-right: 16px; }
  table.standings td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    color: var(--text);
  }
  table.standings tr:last-child td { border-bottom: none; }
  table.standings td.team { font-weight: 500; }
  .auth-active table.standings td.team { cursor: pointer; transition: all 0.2s; }
  .auth-active table.standings td.num { cursor: pointer; position: relative; }
  .editable-number {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(200,245,29,0.08);
    transition: all 0.15s;
  }
  .auth-active .editable-number:hover {
    background: rgba(200,245,29,0.16);
    box-shadow: 0 0 0 2px rgba(200,245,29,0.25);
  }
  .auth-active table.standings td.team:hover { background: var(--card-soft); color: var(--lime); }
  table.standings td.team .tbd { color: var(--text-faint); font-style: italic; }
  .team-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
  }
  .auth-active table.standings td.team:hover .team-actions { display: flex; }

  /* ── Tabla de clasificación automática (calculada desde resultados bloqueados) ── */
  .standings-calc-wrap { padding: 0 0 4px; }
  .standings-calc-title {
    padding: 10px 12px 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  table.standings-calc { width: 100%; border-collapse: collapse; font-size: 12px; }
  table.standings-calc th {
    text-align: center;
    padding: 6px 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border-soft);
  }
  table.standings-calc th.team-col, table.standings-calc td.team-col { text-align: left; }
  table.standings-calc td {
    padding: 7px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--text);
  }
  table.standings-calc tr:last-child td { border-bottom: none; }
  table.standings-calc td.team-col { font-weight: 500; padding-left: 12px; }
  table.standings-calc tr.qualified { background: var(--green-bg); }
  table.standings-calc tr.qualified td.team-col { color: var(--green); font-weight: 700; }
  .qualified-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
  }
  .standings-calc-empty {
    padding: 10px 12px;
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }
  .col-header {
    display: grid;
    grid-template-columns: 90px 52px 108px 1fr 26px 1fr;
    gap: 8px;
    padding: 5px 14px 3px;
    font-size: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .mrow {
    display: grid;
    grid-template-columns: 90px 52px 108px 1fr 26px 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
  }
  .mrow:last-child { border-bottom: none; }
  .mrow:hover { background: var(--card-soft); }
  .mtime.empty { color: var(--text-faint); font-style: italic; font-weight: 400; font-size: 11px; }
  .schedule-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--card-soft);
  }
  .btn-round-robin { background: var(--orange); color: #0a0e16; }
  .btn-round-robin:hover { filter: brightness(1.1); }
  .btn-round-robin.pending { box-shadow: 0 0 0 2px var(--lime); animation: pulseBtn 1.5s infinite; }
  @keyframes pulseBtn { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
  .match-meta { font-size: 11px; color: var(--muted); }
  .match-sede-tag { font-size: 9px; padding: 2px 6px; }
  .mrow-meta { display: contents; }
  .mrow-sede-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .mrow-team-block { min-width: 0; }
  .mrow-team-label {
    display: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
  }
  .mteam {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .match-block:last-child { border-bottom: none; }
  .mrow { border-bottom: none; }
  .match-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.6;
  }
  .match-edit-btn:hover { opacity: 1; background: rgba(200,245,29,0.12); }
  .match-result {
    padding: 8px 14px 12px;
    background: var(--bg-soft);
    border-top: 1px dashed var(--border-soft);
  }
  .match-result.pending {
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .match-result.official {
    background: var(--lime-bg);
    border-top-color: var(--lime);
  }
  .result-official-badge {
    display: inline-block;
    font-size: 9px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #0a0e16;
    background: var(--lime);
    border: 1px solid var(--lime);
    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: 6px;
  }
  .result-sets { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
  .result-set-line { color: var(--text); }
  .result-set-line span { color: var(--muted); font-size: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; margin-right: 6px; }
  .result-winner {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
  }
  .result-form { display: flex; flex-direction: column; gap: 8px; }
  .result-set-row {
    display: grid;
    grid-template-columns: 52px 1fr 20px 1fr;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }
  .result-set-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .result-team-label {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .result-score-select {
    width: 100%;
    padding: 5px 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--lime);
    background: var(--bg-soft);
    cursor: pointer;
  }
  .result-score-select:disabled { background: var(--border-soft); cursor: not-allowed; }
  .result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }
  .result-actions .btn { flex: 0 1 auto; padding: 6px 10px; font-size: 10px; }
  .btn-lock { background: var(--lime); color: #0a0e16; }
  .btn-lock:hover { filter: brightness(1.08); }
  .btn-unlock { background: var(--border); color: var(--text); }
  .btn-unlock:hover { background: var(--border-soft); }
  .final-row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-soft);
  }
  .final-row:last-child { border-bottom: none; }
  .final-time {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--lime);
  }
  .final-cell {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.35;
    word-break: break-word;
  }
  .final-cell.hydration { color: var(--muted); font-style: italic; }
  .final-cell.final-match { color: var(--text); font-weight: 700; }
  .final-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .final-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
  }
  .final-action-btn:hover { background: rgba(200,245,29,0.12); }
  .final-col-header {
    display: grid;
    grid-template-columns: 90px 1fr 1fr auto;
    gap: 8px;
    font-size: 10.5px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 6px 14px 4px;
    border-bottom: 1px solid var(--border-soft);
  }
  /* ── Resultado embebido en filas de Fase Final ── */
  .final-row-wrap {
    border-bottom: 1px solid var(--border-soft);
  }
  .final-row-wrap:last-child { border-bottom: none; }
  .final-row-wrap .final-row { border-bottom: none; }
  .final-match-result-section {
    padding: 8px 14px 12px;
    background: var(--bg-soft);
    border-top: 1px dashed var(--border-soft);
  }
  .final-match-result-section.official {
    background: var(--lime-bg);
    border-top-color: var(--lime);
  }
  .final-match-result-section .final-match-teams {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .final-match-result-section .final-match-teams span { color: var(--text); font-weight: 500; font-style: italic; }
  .stage-badge {
    display: inline-block;
    font-size: 9px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--card-soft);
    color: var(--lime);
    border: 1px solid rgba(200,245,29,0.25);
    margin-left: 4px;
    vertical-align: middle;
  }
  .final-advances-info {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-faint);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .final-advances-info.active { color: var(--green); }
  /* ── Separador visual en el modal de fila de final ── */
  .modal-section-divider {
    margin: 16px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .mtime {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--lime);
    line-height: 1.2;
  }
  .mteam .tbd { color: var(--text-faint); font-style: italic; font-weight: 400; }
  .mvs {
    text-align: center;
    font-size: 10px;
    color: var(--text-faint);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
  }
  .sede-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
  }
  /* DEAD CODE — Desacoplamiento del Tournament Engine, Etapa 1 (Sedes).
     renderSedeTag() (js/sedes.js) ya no emite estas 3 clases; el color de
     cada sede ahora es un dato (DATA.sedes[id].color) aplicado inline, no
     una clase CSS por nombre fijo. .sede-tag (base) sigue en uso. Se deja
     sin borrar hasta confirmar en producción — sin efecto ni costo. */
  .sede-punto { background: var(--green-bg); color: var(--green); }
  .sede-match { background: var(--red-bg); color: var(--red); }
  .sede-solis { background: var(--sky-bg); color: var(--sky); }

  /* Gestión de catálogos (sedes / canchas / categorías) — Desacoplamiento
     del Tournament Engine. Estilos genéricos reutilizables por las
     próximas Etapas 2 y 3. */
  .manage-entity-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }

  /* Fase 5.2.1 — "Equipos sin asignar", una por categoría. Reutiliza
     .manage-entity-* (arriba) para las filas — solo el contenedor y el
     título son nuevos. */
  .pending-teams-section {
    background: var(--card-soft);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
  }
  .pending-teams-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .manage-entity-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--card-soft); border: 1px solid var(--border-soft); }
  .manage-entity-row.inactive { opacity: 0.5; }
  .manage-entity-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
  .manage-entity-name { flex: 1; font-size: 13px; font-weight: 600; }
  .manage-entity-actions { display: flex; gap: 6px; }
  .manage-entity-actions button { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px; }

  /* Fase 3.4, Capa 3: cascada Sede → Cancha (checkboxes, no <select>,
     porque courtIds es un array — una entidad puede jugarse en más de una
     cancha a la vez, igual que el legacy permitía combinaciones "12"). */
  .court-check-group { display: flex; flex-direction: column; gap: 6px; }
  .court-check-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--card-soft); border: 1px solid var(--border-soft); font-size: 13px; font-weight: 500; text-transform: none; cursor: pointer; }
  .court-check-item input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
  .court-check-item.inactive { opacity: 0.5; }
  .court-check-empty { padding: 8px 10px; color: var(--muted); font-size: 12px; font-style: italic; }

  /* Modal "Gestionar Canchas": las canchas se agrupan visualmente por
     sede, a diferencia de la lista plana de "Gestionar Sedes". */
  .manage-courts-sede-group { margin-bottom: 10px; }
  .manage-courts-sede-group .manage-entity-row { margin-left: 10px; margin-bottom: 6px; }
  .manage-courts-sede-header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 4px 0; }

  .court-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--orange);
    color: #2a1a05;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .auth-badge {
    display: inline-block;
    background: var(--lime);
    color: #0a0e16;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    margin-top: 4px;
  }
  .search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: var(--header-h);
    z-index: 49;
    box-shadow: var(--shadow-sm);
  }
  .search-bar--hero {
    margin: 0 16px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    top: auto;
    position: relative;
    background: var(--card);
  }
  .search-bar input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
    background: var(--bg-soft);
  }
  .search-bar input:focus { border-color: var(--lime); background: var(--card-soft); box-shadow: 0 0 0 3px rgba(200,245,29,0.1); }
  .search-bar input::placeholder { color: var(--text-faint); }
  .search-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
    display: none;
  }
  .search-clear.visible { display: block; }
  #search-bar-wrapper {
    display: flex;
  }
  #search-bar-wrapper.search-hidden {
    display: none;
  }
  #search-results {
    display: none;
    padding: 12px;
  }
  #search-results.visible { display: block; }
  .sr-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .sr-card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .sr-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--card-soft);
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
  }
  .sr-cat {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .sr-group {
    font-size: 11px;
    color: var(--muted);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .sr-team {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
  }
  .sr-team mark {
    background: var(--lime);
    color: #0a0e16;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
  }
  .sr-matches {
    border-top: 1px solid var(--border-soft);
  }
  .sr-match {
    display: grid;
    grid-template-columns: 90px 1fr 26px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
  }
  .sr-match:last-child { border-bottom: none; }
  .sr-match .mtime { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; color: var(--lime); }
  .sr-match .mteam { font-size: 12px; color: var(--text); }
  .sr-match .mteam.highlight { font-weight: 700; color: var(--text); }
  .sr-match .mvs { text-align: center; font-size: 10px; color: var(--text-faint); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }
  .sr-empty {
    text-align: center;
    padding: 30px;
    color: var(--muted);
    font-size: 14px;
  }

  /* ── Iconos PICKCR (rreIcon) — reskin visual de Tournament Engine ──
     Mismo bloque que ya usan round-robin-express.html/dashboard/index.html:
     currentColor, trazo 1.75 constante, grid 24x24. */
  .rre-icon { display: inline-block; vertical-align: -4px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .rre-icon-dot { fill: var(--lime); stroke: none; }
  .rre-icon-solid { fill: currentColor; stroke: none; }
  .rre-input-wrap { position: relative; }
  .rre-input-wrap .rre-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
  .rre-input-wrap input { width: 100%; padding-left: 36px; }

  /* ── Estado de sincronización DUPR (T6b, 2026-07-19) — mismas clases
     y mismos colores que round-robin-express.html (.rre-dupr-*), acá
     compartidas vía css/components.css porque el modal "DUPR" del
     Tournament Engine (js/torneo-dupr-acciones.js) las necesita y esta
     página no tiene un <style> propio. ── */
  .rre-dupr-pendiente, .rre-dupr-enviando { color: var(--text-faint); }
  .rre-dupr-ok { color: var(--lime); }
  .rre-dupr-error { color: var(--orange); }
  .rre-dupr-eliminado { color: var(--text-faint); }