/* ============================================================ HJM · listados.css Un único CSS de familia para las 3 páginas de "listados de datos del torneo": parejas · cruces · participantes. Requiere: base.css (reset, variables, navbar base, h1, subtitulo) Casi todo aquí es 100% idéntico entre las 3 páginas (filtro, botones, contador, avisos, tarjetas...). Las pocas cosas que sí difieren de verdad (ancho del contenedor, ancho del marco, tarjetas por sede) están resueltas con un selector "body.pagina-participantes ..." que solo se activa si el de participantes.html lleva esa clase — así un mismo archivo sirve a las 3 sin que ninguna pise los ajustes de otra. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap'); body { font-family: 'Barlow', sans-serif; background: var(--fondo); color: var(--texto); min-height: 100vh; } /* Variables propias de cruces (descansos) y de participantes (rojo badge) */ :root { --desc-bg: #f2f2f2; --desc-color: #7a7a7a; --desc-borde: #c8c8c8; --desc-brown: #856404; --rojo: #dc3545; } /* ── NAVBAR: común a las 3 (sticky + sombra) ── */ .navbar { padding: 8px 18px 8px 14px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(14,75,156,0.4); } .nav-right { gap: 14px; } /* ── CONTENEDOR: por defecto sirve a parejas y cruces; participantes es más ancho ── */ .contenedor { max-width: 960px; margin: 0 auto; padding: 0 12px 50px; } body.pagina-participantes .contenedor { max-width: 1280px; padding: 0 20px 50px; } /* ── FILTRO ── */ .marco { border: 1.5px solid var(--azul); border-radius: 14px; padding: 12px 14px 10px; background: white; max-width: 560px; margin: 0 auto 4px; box-shadow: 0 2px 10px rgba(14,75,156,0.08); } body.pagina-participantes .marco { max-width: 340px; } legend { padding: 0 8px; color: var(--azul); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid-1 { display: grid; grid-template-columns: 1fr; gap: 10px; } label { display: block; margin-bottom: 4px; color: var(--texto); font-weight: 600; font-size: 12px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; } select { width: 100%; padding: 10px 34px 10px 12px; border-radius: 8px; border: 1.5px solid var(--borde); font-size: 15px; font-family: 'Barlow', sans-serif; background: var(--fondo); color: var(--texto); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%230E4b9c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; transition: border-color 0.2s; } select:focus { outline: none; border-color: var(--azul); } /* ── BOTONES ── */ .boton-centro { text-align: center; margin-top: 14px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .btn-registrar, .btn-limpiar { padding: 12px 24px; border-radius: 10px; cursor: pointer; font-size: 15px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; border: none; transition: transform 0.12s, box-shadow 0.12s; -webkit-tap-highlight-color: transparent; min-width: 130px; justify-content: center; touch-action: manipulation; } .btn-registrar { background: var(--verde); color: white; box-shadow: 0 3px 10px rgba(40,167,69,0.3); } .btn-registrar:active { transform: scale(0.96); box-shadow: none; } .btn-limpiar { background: white; color: var(--gris); border: 1.5px solid var(--borde); } .btn-limpiar:active { transform: scale(0.96); } /* ── CONTADOR ── */ .contador { text-align: right; font-size: 12px; color: var(--gris); margin: 12px 2px 2px; font-style: italic; } /* ── FILAS DE TABLA: mismo blanco/gris alterno en las 3 tablas ── */ .fila-par td { background: white; } .fila-impar td { background: #f8faff; } /* ── MENSAJES ── */ .aviso-error, .aviso-vacio { margin-top: 20px; padding: 14px 16px; border-radius: 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; } .aviso-error { background: #ffe5e5; color: #c0392b; border: 1px solid #f5c6cb; } .aviso-vacio { background: #fff3cd; color: #856404; border: 1px solid #ffc107; } /* ── NAVBAR en móvil pequeño ── */ @media (max-width: 480px) { .nav-label { display: none; } h1 { font-size: 19px; padding: 14px 12px 4px; } } /* ── CABECERA DE DIVISIÓN (parejas y cruces) ── */ .bloque-division { margin-top: 18px; } .div-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px 10px 0 0; font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--azul); background: var(--azul-light); border: 1.5px solid var(--borde); border-bottom: none; } .div-header .material-symbols-outlined { font-size: 22px; } /* ── TARJETAS POR SEDE (parejas y participantes): por defecto = parejas ── */ .cards-wrapper { display: flex; flex-direction: column; border: 1.5px solid var(--borde); border-radius: 0 0 10px 10px; overflow: hidden; background: white; box-shadow: 0 3px 10px rgba(14,75,156,0.07); } body.pagina-participantes .cards-wrapper { border-radius: 10px; margin-top: 10px; } .sede-badge-mobile { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: #f0f4ff; border-bottom: 1px solid var(--borde); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul); } body.pagina-participantes .sede-badge-mobile { background: var(--azul-dark); color: white; } .card-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; color: var(--azul); min-width: 22px; text-align: center; opacity: 0.45; } /* Tablas de "sedes" en escritorio — parejas: ≥640px, 2 columnas */ .tablas-sedes { display: none; } @media (min-width: 640px) { .cards-wrapper { display: none !important; } .tablas-sedes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1.5px solid var(--borde); border-top: none; border-radius: 0 0 10px 10px; background: var(--fondo); padding: 10px; box-shadow: 0 3px 10px rgba(14,75,156,0.07); } .tablas-sedes:has(.tabla-sede-wrap:only-child) { grid-template-columns: 1fr; max-width: 560px; } .tabla-sede-wrap { background: white; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--borde); } .sede-subheader { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--azul-dark); color: white; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } } /* Participantes: propio breakpoint (≥540px) y 3 columnas */ @media (min-width: 540px) { body.pagina-participantes .cards-wrapper { display: none !important; } body.pagina-participantes .tablas-sedes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--fondo); padding: 14px; box-shadow: 0 3px 10px rgba(14,75,156,0.07); margin-top: 10px; } body.pagina-participantes .tablas-sedes:has(.tabla-sede-wrap:only-child) { grid-template-columns: 1fr; max-width: 560px; } body.pagina-participantes .tabla-sede-wrap { background: white; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--borde); } body.pagina-participantes .sede-subheader { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--azul-dark); color: white; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } } /* ════════════════════════════════════════════════════════════ PAREJAS — tarjeta y tabla de pareja ════════════════════════════════════════════════════════════ */ .card-pareja-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); transition: background 0.12s; -webkit-tap-highlight-color: transparent; } .card-pareja-item:last-child { border-bottom: none; } .card-pareja-item:active { background: #dce9fc; } .card-pareja-nombre { font-weight: 600; font-size: 14px; color: var(--texto); } @media (min-width: 640px) { .tabla-parejas { width: 100%; border-collapse: collapse; } .tabla-parejas thead tr { background: #dce9fc; } .tabla-parejas thead th { padding: 7px 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--azul); } .fila-pareja td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; font-size: 14px; } .fila-pareja:hover td { background: #dce9fc; transition: background 0.15s; } .fila-pareja:last-child td { border-bottom: none; } .celda-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; color: var(--azul); opacity: 0.4; width: 32px; text-align: center; } .celda-pareja { font-weight: 600; color: var(--texto); } } /* ════════════════════════════════════════════════════════════ CRUCES — tarjeta y tabla de partido (con rowspan por hora) ════════════════════════════════════════════════════════════ */ .card-partido { display: grid; grid-template-columns: 72px 1fr; border-bottom: 1px solid var(--borde); -webkit-tap-highlight-color: transparent; transition: background 0.12s; } .card-partido:last-child { border-bottom: none; } .card-partido:active { background: #dce9fc; } .card-meta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 6px; background: var(--azul); color: white; text-align: center; } .card-hora { font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: 0.02em; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; } .card-hora .material-symbols-outlined { font-size: 20px; opacity: 0.85; } .card-pista { font-size: 19px; font-weight: 700; opacity: 1; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 2px; } .card-pista .material-symbols-outlined { font-size: 12px; } .card-pista-label { display: none; } .card-enfrentamiento { padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; } .card-pareja { font-weight: 600; font-size: 14px; color: #0E4b9c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-vs { display: inline-block; background: transparent; border: 1px solid #d8dde6; color: #9aa3b0; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; width: fit-content; margin: 1px 0; } /* ── DESCANSO — tarjeta móvil ── */ .card-partido.card-descanso { grid-template-columns: 72px 1fr; } .card-partido.card-descanso .card-meta { background: #9a9a9a; } .card-partido.card-descanso:active { background: #e8e8e8; } .desc-badge-hora { display: inline-flex; align-items: center; gap: 3px; background: #fff3cd; color: #856404; border: 1px solid #ffc107; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; padding: 2px 6px 2px 4px; border-radius: 4px; white-space: nowrap; } .desc-badge-hora .material-symbols-outlined { font-size: 13px; line-height: 1; font-variation-settings: 'wght' 400; } .desc-sep { color: #aaa; font-size: 1rem; margin: 0 6px; vertical-align: middle; } .desc-coffee { text-align: center !important; justify-content: center !important; color: #856404 !important; } .desc-coffee .material-symbols-outlined { font-size: 20px; vertical-align: middle; } .card-pareja.desc-pareja { color: var(--desc-brown) !important; font-style: normal !important; font-weight: 400 !important; } .tabla-cruces { display: none; } @media (min-width: 640px) { .cards-wrapper { display: none !important; } .tabla-cruces { display: table; } .tabla-cruces { width: 100%; border-collapse: collapse; border: 1.5px solid var(--borde); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; background: white; box-shadow: 0 3px 10px rgba(14,75,156,0.07); } .tabla-cruces thead tr { background: var(--azul-dark); color: white; } .tabla-cruces thead th { padding: 10px 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; } .fila-partido td { padding: 10px 14px; border-bottom: none; vertical-align: middle; font-size: 15px; } .fila-par td, .fila-impar td { border-top: 1px solid var(--borde); } .fila-partido:hover td { background: #dce9fc; transition: background 0.15s; } td.celda-hora-merged { background: var(--azul-light) !important; text-align: center; vertical-align: middle !important; border-right: 1px solid var(--borde); border-top: 1px solid var(--azul) !important; border-bottom: none; } .fila-partido:hover td.celda-hora-merged { background: var(--azul-light) !important; } .fila-hora-start td { border-top: 1.5px solid var(--azul) !important; } .tabla-cruces tbody tr:first-child td { border-top: none !important; } .fila-hora-end td { border-bottom: none !important; } .fila-descanso td { background: var(--desc-bg) !important; border-top: none !important; border-bottom: none !important; overflow: hidden; } .fila-descanso:hover td { background: #e4e4e4 !important; transition: background 0.15s; } .fila-descanso .celda-hora { color: var(--desc-color); } .fila-descanso .celda-pista { color: var(--desc-color); } .celda-descanso-badge { text-align: center; } .desc-icono { color: var(--desc-color) !important; } .desc-badge { display: inline-flex; align-items: center; gap: 4px; background: white; border: 1.5px solid var(--desc-borde); color: var(--desc-color); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; } .desc-badge .material-symbols-outlined { font-size: 14px; } .pareja-desc { font-weight: 400 !important; color: var(--desc-brown) !important; font-style: normal !important; } .celda-hora { white-space: nowrap; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px !important; color: var(--azul); width: 100px; text-align: center; } .celda-pista { white-space: nowrap; width: 120px; color: var(--azul); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px !important; } .celda-partido { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; } .pareja { font-weight: 600; color: #0E4b9c; } .vs-badge { background: #eef0f3; color: #8a939f; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em; } .icono-mini { font-size: 17px; vertical-align: middle; color: var(--azul); margin-right: 3px; font-variation-settings: 'wght' 700; } } /* ════════════════════════════════════════════════════════════ PARTICIPANTES — tooltip, badges, tarjeta y tabla de inscrito ════════════════════════════════════════════════════════════ */ .contador-wrap { display: inline-flex; align-items: center; gap: 5px; } .info-tooltip { position: relative; display: inline-flex; align-items: center; cursor: default; outline: none; } .info-tooltip .material-symbols-outlined { font-size: 14px; color: var(--azul); opacity: 0.55; vertical-align: middle; transition: opacity 0.2s; } .info-tooltip:hover .material-symbols-outlined, .info-tooltip:focus .material-symbols-outlined { opacity: 1; } .tooltip-text { visibility: hidden; opacity: 0; background: #1a1a2e; color: #fff; font-size: 11px; font-style: normal; padding: 5px 10px; border-radius: 7px; white-space: nowrap; position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); transition: opacity 0.2s; pointer-events: none; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .tooltip-text::before { content: ''; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #1a1a2e; } .info-tooltip:hover .tooltip-text, .info-tooltip:focus .tooltip-text { visibility: visible; opacity: 1; } @media (max-width: 480px) { .tooltip-text { top: auto; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .tooltip-text::before { top: 100%; right: auto; left: 50%; transform: translateX(-50%); border-right-color: transparent; border-top-color: #1a1a2e; } } .badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .badge-no { background: #f8d7da; color: #721c24; } .badge-suplente { background: transparent; border: 1px solid #d8dde6; color: #9aa3b0; text-transform: lowercase; } .pagado-si { color: var(--verde); font-weight: 700; font-size: 13px; } .card-inscrito-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); transition: background 0.12s; -webkit-tap-highlight-color: transparent; } .card-inscrito-item:last-child { border-bottom: none; } .card-inscrito-item:active { background: #dce9fc; } .card-info { display: flex; flex-direction: column; gap: 4px; flex: 1; } .card-nombre { font-weight: 600; font-size: 14px; color: var(--texto); } /* Escopado: .card-meta también la usa la tarjeta de Cruces (con otro propósito: la franja azul de hora/pista), así que aquí necesita su propio prefijo para no pisarla. */ body.pagina-participantes .card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .card-obs { font-size: 12px; color: var(--gris); font-style: italic; } @media (min-width: 540px) { .tabla-inscritos { width: 100%; border-collapse: collapse; } .tabla-inscritos thead tr { background: #dce9fc; } .tabla-inscritos thead th { padding: 7px 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--azul); } .fila-inscrito td { padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; font-size: 13px; } .fila-inscrito:hover td { background: #dce9fc; transition: background 0.15s; } .fila-inscrito:last-child td { border-bottom: none; } /* Nota: escopado a body.pagina-participantes porque .celda-num también la usa la tabla de Parejas (con otro ancho) y, a partir de 640px, los dos @media coinciden a la vez — sin esto, esta regla pisaría la de Parejas por ir más abajo en el archivo. */ body.pagina-participantes .celda-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; color: var(--azul); opacity: 0.4; width: 28px; text-align: center; } .celda-nombre { font-weight: 600; color: var(--texto); } .celda-pagado { white-space: nowrap; } .celda-obs { font-size: 12px; color: var(--gris); font-style: italic; } }