/* Menús en verde, como el dibujo de la portada del dueño (portada.jpg). El registro irá en azul (estadisticas.jpg). */
:root {
  --verde: #0f5c46;
  --verde-osc: #0b3f31;
  --verde-claro: #e3efe9;
  --verde-tarjeta: #dcebe4;
  --texto: #14241e;
  --texto-suave: #4f635b;
  --fondo: #f3f6f4;
  --blanco: #ffffff;
  --rojo: #d23b3b;
  --azul: #1f63c6;
  --naranja: #e88a2a;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08);
  --radio: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo); color: var(--texto);
  display: flex; flex-direction: column;
}
#vista { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 84px; }
button { font: inherit; cursor: pointer; }
.oculto { display: none !important; }

/* ---------- cabecera de la portada: playa al atardecer, red y pelota ---------- */
.cabecera {
  position: relative; color: #fff; padding: 22px 18px 20px; overflow: hidden; min-height: 190px;
  background:
    linear-gradient(180deg, rgba(6, 30, 26, .55), rgba(6, 30, 26, .15) 60%, rgba(0, 0, 0, 0)),
    linear-gradient(180deg, #1d3d4f 0%, #4f6f7f 38%, #e2a46a 52%, #2f5d70 56%, #2a5165 66%, #c9a57a 70%, #b48d63 100%);
}
.cabecera::before { /* la red */
  content: ""; position: absolute; right: -10px; top: 8px; width: 62%; height: 46%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 14px);
  border-top: 4px solid rgba(255, 255, 255, .85); transform: skewY(-8deg); opacity: .8;
}
.cabecera .pelota {
  position: absolute; right: 26px; bottom: 10px; width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}
.cabecera .fila { position: relative; display: flex; align-items: center; gap: 14px; }
.cabecera .logo { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.cabecera h1 { margin: 0; font-size: 1.55rem; line-height: 1.15; }
.cabecera .sub { font-size: 1.05rem; opacity: .95; }
.cabecera .lema { position: relative; margin-top: 14px; font-size: .95rem; opacity: .95; }
.cabecera .ajustes { position: absolute; right: 14px; top: 14px; background: none; border: 0; color: #fff; padding: 6px; }

/* ---------- tarjetas del menú ---------- */
.menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.tarjeta-menu {
  position: relative; text-align: left; border: 0; border-radius: var(--radio); padding: 14px 30px 14px 14px;
  background: var(--verde-tarjeta); color: var(--texto); min-height: 132px; box-shadow: var(--sombra);
}
.tarjeta-menu.principal { background: var(--verde); color: #fff; }
.tarjeta-menu svg { width: 34px; height: 34px; color: var(--verde); }
.tarjeta-menu.principal svg { color: #fff; }
.tarjeta-menu b { display: block; font-size: 1.05rem; margin: 6px 0 4px; }
.tarjeta-menu span { display: block; font-size: .82rem; line-height: 1.3; color: var(--texto-suave); }
.tarjeta-menu.principal span { color: #e2f1ea; }
.tarjeta-menu::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; opacity: .7; }

.titulo-seccion { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px 0; }
.titulo-seccion h2 { margin: 0; font-size: 1.25rem; }
.vacio { margin: 10px 14px; padding: 18px; text-align: center; color: var(--texto-suave); background: var(--blanco); border-radius: var(--radio); }

/* ---------- barra de abajo ---------- */
.barra-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; height: 72px; display: flex; background: var(--verde-osc);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-abajo a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #c9dcd4; text-decoration: none; font-size: .8rem; }
.barra-abajo a svg { width: 24px; height: 24px; }
.barra-abajo a.activa { color: #fff; font-weight: 600; }

/* ---------- pantallas interiores ---------- */
.barra-titulo { display: flex; align-items: center; gap: 8px; background: var(--verde); color: #fff; padding: 14px 12px; position: sticky; top: 0; z-index: 2; }
.barra-titulo h1 { font-size: 1.2rem; margin: 0; flex: 1; }
.barra-titulo button { background: none; border: 0; color: #fff; font-size: 1.5rem; padding: 2px 8px; }
.lista { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.fila-jugador { display: flex; align-items: center; gap: 12px; background: var(--blanco); border-radius: var(--radio); padding: 10px 12px; box-shadow: var(--sombra); border: 0; text-align: left; width: 100%; }
.fila-jugador b { flex: 1; font-size: 1.05rem; }
.foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--verde-claro); flex: none; display: grid; place-items: center; color: var(--verde); font-weight: 700; font-size: 1.2rem; }
.foto.grande { width: 132px; height: 132px; font-size: 2.6rem; }
.pareja-fotos { display: flex; }
.pareja-fotos .foto + .foto { margin-left: -14px; border: 2px solid #fff; }

.formulario { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.formulario label { font-weight: 600; font-size: .95rem; }
.formulario input[type=text], .formulario select {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; }
.centro { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.boton { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 600; background: var(--verde-claro); color: var(--verde); }
.boton.lleno { background: var(--verde); color: #fff; }
.boton.peligro { background: #fbe4e4; color: #a42a2a; }
.boton.ancho { width: 100%; padding: 15px; font-size: 1.05rem; }
.flotante { position: fixed; right: 18px; bottom: 88px; width: 58px; height: 58px; border-radius: 50%; border: 0;
  background: var(--verde); color: #fff; font-size: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.aviso { font-size: .9rem; color: var(--texto-suave); text-align: center; }

/* ventana de confirmación propia (sin las ventanas del navegador) */
.capa { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; z-index: 10; padding: 20px; }
.dialogo { background: #fff; border-radius: 16px; padding: 20px; max-width: 360px; width: 100%; }
.dialogo p { margin: 0 0 16px; font-size: 1.05rem; }
.dialogo .botones { justify-content: flex-end; }

/* ---------- torneos (fase 2) ---------- */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formulario input[type=date], .formulario input[type=number] { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; }
.opciones-formato { display: flex; flex-direction: column; gap: 8px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 10px 12px; border: 1px solid #d5e2dc; font-weight: 400 !important; }
.opcion input { margin-top: 4px; transform: scale(1.25); }
.opcion b { display: block; }
.opcion small { color: var(--texto-suave); }
.opcion.simple { background: none; border: 0; padding: 0; }
.elegible input { transform: scale(1.3); }
.elegible .orden { min-width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff; font-size: .8rem; display: grid; place-items: center; }
.elegible .orden:empty { background: none; }
.reglas { background: #fff; border-radius: 12px; padding: 10px 12px; border: 1px solid #d5e2dc; }
.reglas summary { font-weight: 600; cursor: pointer; }
.reglas > * + * { margin-top: 10px; }
.desempate { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.desempate li span { display: inline-block; min-width: 190px; }
.desempate button { border: 1px solid #c8d6d0; background: #fff; border-radius: 8px; padding: 2px 9px; margin-left: 4px; }
.desempate button:disabled { opacity: .3; }
.error { color: #a42a2a; background: #fbe4e4; padding: 10px 12px; border-radius: 10px; margin: 0; }
.etiqueta { font-size: .75rem; padding: 3px 8px; border-radius: 20px; background: var(--verde-claro); color: var(--verde); white-space: nowrap; }
.etiqueta.terminado { background: #fff3d6; color: #8a5a00; }
.pestanas { display: flex; background: #fff; border-bottom: 1px solid #dce6e1; position: sticky; top: 52px; z-index: 1; }
.pestanas button { flex: 1; border: 0; background: none; padding: 13px 6px; font-weight: 600; color: var(--texto-suave); border-bottom: 3px solid transparent; }
.pestanas button.activa { color: var(--verde); border-bottom-color: var(--verde); }
.campeon { margin: 12px; padding: 12px 14px; border-radius: 12px; background: #fff3d6; color: #6b4700; font-size: 1.05rem; }
.fase { margin: 16px 14px 0; font-size: 1rem; color: var(--verde); }
.partido { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: #fff; border: 0; border-radius: 12px; padding: 12px; box-shadow: var(--sombra); text-align: center; width: 100%; color: var(--texto); }
.partido .lado { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.partido .lado.rojo { text-align: left; border-left: 4px solid var(--rojo); padding-left: 8px; }
.partido .lado.azul { text-align: right; border-right: 4px solid var(--azul); padding-right: 8px; }
.partido .lado.gana { color: var(--verde); }
.partido .lado.gana::after { content: " ✓"; }
.partido .vs { color: var(--texto-suave); font-size: .85rem; }
.partido .resultado b { display: block; font-size: 1.15rem; }
.partido .resultado small { color: var(--texto-suave); font-size: .72rem; }
.partido.bye { opacity: .6; }
.tabla-envoltura { overflow-x: auto; margin: 8px 12px; background: #fff; border-radius: 12px; box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { padding: 9px 6px; text-align: center; border-bottom: 1px solid #edf2ef; }
.tabla th { color: var(--texto-suave); font-weight: 600; font-size: .8rem; }
.tabla .izq { text-align: left; }
.enfrentamiento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.equipo { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); text-align: center; padding-bottom: 10px; }
.equipo .franja { height: 8px; }
.equipo.rojo .franja { background: var(--rojo); }
.equipo.azul .franja { background: var(--azul); }
.equipo > b { display: block; padding: 8px 6px 4px; }
.equipo .jugadores { display: flex; justify-content: center; gap: 10px; }
.equipo .jugadores div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; max-width: 72px; }
.sets { display: flex; flex-direction: column; gap: 8px; }
.set { display: grid; grid-template-columns: 1fr 70px auto 70px; align-items: center; gap: 8px; }
.set input { width: 70px; text-align: center; font-size: 1.2rem; padding: 10px 4px; border-radius: 10px; border: 2px solid #c8d6d0; }
.set input.rojo { border-color: var(--rojo); }
.set input.azul { border-color: var(--azul); }

/* ---------- registro del partido (fase 3): en azul y en horizontal, como el dibujo estadisticas.jpg ---------- */
body.modo-registro .barra-abajo { display: none; }
body.modo-registro #vista { padding-bottom: 0; overflow: hidden; }
.registro { --az: #0f3d73; --az2: #1f63c6; --gris: #eef3f9; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 6px; background: #f5f8fc; padding: 0 8px 6px; }
.reg-cabecera { display: flex; align-items: center; gap: 10px; background: var(--az); color: #fff; margin: 0 -8px; padding: 6px 10px; }
.reg-cabecera img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.reg-cabecera div { flex: 1; min-width: 0; }
.reg-cabecera b { display: block; font-size: 1.05rem; }
.reg-cabecera small { display: block; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.reg-cabecera button { background: none; border: 0; color: #fff; font-size: 1.5rem; padding: 2px 8px; }
.reg-jugadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.reg-jugador { position: relative; display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #dbe4ef; border-radius: 12px; padding: 8px 8px 6px; overflow: hidden; min-width: 0; color: var(--texto); }
.reg-jugador .franja { position: absolute; left: 0; right: 0; top: 0; height: 5px; }
.reg-jugador.rojo .franja { background: var(--rojo); }
.reg-jugador.azul .franja { background: var(--azul); }
.reg-jugador .foto { width: 36px; height: 36px; font-size: .9rem; }
.reg-jugador b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.reg-jugador.activo { border-color: var(--az2); background: #e6f0ff; box-shadow: 0 0 0 2px rgba(31, 99, 198, .25); }
.reg-fundamentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.reg-fundamentos button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dbe4ef; background: var(--gris); color: #556; border-radius: 10px; padding: 8px 4px; font-weight: 700; font-size: .95rem; }
.reg-fundamentos button svg { width: 22px; height: 22px; }
.reg-fundamentos button.activo { background: var(--az2); color: #fff; border-color: var(--az2); }
.reg-titulo { display: flex; align-items: baseline; gap: 10px; color: var(--az); position: relative; }
.reg-titulo small { color: #6b7a8c; }
.reg-titulo span { margin-left: auto; font-size: .85rem; color: #6b4700; background: #fff3d6; padding: 2px 8px; border-radius: 8px; opacity: 0; }
.reg-titulo span.ver { animation: avisoReg 2.6s; }
@keyframes avisoReg { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.reg-botones { flex: 1; display: grid; gap: 8px; min-height: 0; }
.reg-res { border: 0; border-radius: 14px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; min-height: 0; transition: transform .08s; }
.reg-res svg { width: 34px; height: 34px; }
.reg-res b { font-size: 1.35rem; }
.reg-res small { opacity: .9; font-size: .8rem; }
.reg-res.verde { background: #1d8a4e; } .reg-res.rojo { background: #c8352f; } .reg-res.naranja { background: #c27416; } .reg-res.azul { background: #1f63c6; }
.reg-res:active, .reg-res.pulsado { transform: scale(.96); filter: brightness(1.15); }
.reg-pie { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #dbe4ef; border-radius: 12px; padding: 6px 8px; }
.reg-sel { display: flex; align-items: center; gap: 8px; min-width: 120px; max-width: 30%; }
.reg-sel .foto { width: 36px; height: 36px; font-size: .9rem; }
.reg-sel b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-cifras { flex: 1; display: flex; justify-content: space-around; text-align: center; border-left: 1px solid #e3eaf2; }
.reg-cifras small { display: block; color: #6b7a8c; font-size: .75rem; }
.reg-cifras b { font-size: 1.05rem; color: var(--az); }
.reg-cifras .ef b { color: var(--az2); }
.reg-deshacer { border: 0; background: #fff3d6; color: #6b4700; font-weight: 700; border-radius: 10px; padding: 10px 14px; }
.reg-deshacer:disabled { opacity: .4; }
.girar { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .registro .girar:not(.oculto) { display: grid; place-items: center; position: fixed; inset: 0; background: rgba(15, 61, 115, .96); color: #fff; z-index: 5; text-align: center; font-size: 3rem; }
  .registro .girar p { font-size: 1.1rem; margin: 10px 20px 18px; }
  .reg-jugadores { grid-template-columns: repeat(2, 1fr); }
}
.hoja { background: #fff; border-radius: 16px; padding: 16px; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.hoja h3 { margin: 0; }
.hoja .tabla th small, .hoja .tabla td small { display: block; color: var(--texto-suave); font-weight: 400; font-size: .72rem; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.punto.rojo { background: var(--rojo); } .punto.azul { background: var(--azul); }
.acciones { display: flex; flex-direction: column; gap: 6px; }
.acciones button { display: grid; grid-template-columns: 34px 1fr 1.4fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid #e3eaf2; background: #fff; border-radius: 10px; padding: 9px 10px; }
.acciones button span:first-child { color: var(--texto-suave); font-size: .8rem; }
.resumen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 10px 12px; }
.resumen .boton { padding: 8px 12px; }
.equipo.gana { box-shadow: 0 0 0 3px #f2c94c; }

.hoja .pestanas { position: static; }
.hoja .tabla-envoltura { margin: 0; flex: none; }

/* ---------- estadísticas (fase 4) ---------- */
.filtros { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.filtros select { width: 100%; font: inherit; padding: 11px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; }
.ranking .pos { width: 26px; text-align: center; font-weight: 700; color: var(--texto-suave); }
.ranking .cifra { text-align: right; }
.ranking .cifra b { display: block; font-size: 1.1rem; color: var(--verde); }
.ranking .cifra small { color: var(--texto-suave); font-size: .78rem; }
.reconocimientos { margin: 12px; background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--sombra); }
.reconocimientos h3 { margin: 0 0 8px; font-size: 1rem; color: var(--verde); }
.mvp { display: flex; align-items: center; gap: 12px; background: #fff3d6; border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.mvp small { display: block; color: #6b4700; }
.mvp b { display: block; font-size: 1.15rem; }
.mvp span { font-size: .9rem; }
.premios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.premios div { background: var(--verde-claro); border-radius: 10px; padding: 8px; font-size: .82rem; display: flex; flex-direction: column; gap: 3px; }
.premios i { font-style: normal; font-weight: 700; }
.tabla th small, .tabla td small { display: block; color: var(--texto-suave); font-weight: 400; font-size: .72rem; }
.comparar td { width: 40%; }
.comparar td .foto { margin: 0 auto 4px; }
.comparar td.mejor { color: var(--verde); font-weight: 700; background: #eef7f2; }
.comparar tr.sep th { background: var(--verde-claro); color: var(--verde); text-align: left; padding-left: 10px; }
.ver-todos { color: var(--verde); text-decoration: none; font-weight: 600; }
.detalle { text-align: right; margin: -4px 4px 4px; display: block; }

/* ---------- compartir (fase 5) ---------- */
.tarjeta-compartir { background: #fff; border-radius: 14px; padding: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.tarjeta-compartir small { color: var(--texto-suave); }
.vista-previa img { width: 100%; border-radius: 10px; border: 1px solid #dce6e1; margin-top: 6px; }
.vista-previa .botones { margin-top: 8px; }
a.boton { text-decoration: none; display: inline-block; }

/* ---------- copias de seguridad (fase 6) ---------- */
.clave { font-family: ui-monospace, Consolas, monospace; font-size: clamp(.9rem, 4.2vw, 1.25rem); letter-spacing: .02em; white-space: nowrap; text-align: center; background: #fff3d6; color: #4a3200; border-radius: 10px; padding: 12px 8px; margin: 8px 0; user-select: all; word-break: break-all; }
.resumen small { display: block; }

/* =====================================================================================================
   10-nov-2026: misma apariencia, más viva (pedido del dueño). Banner con foto real como su dibujo, tarjetas con
   relieve y respuesta al tocar, entradas animadas y registro siempre en horizontal.
   ===================================================================================================== */
.cabecera {
  min-height: 210px; padding: 26px 18px 22px;
  background:
    linear-gradient(90deg, rgba(6, 34, 28, .82) 0%, rgba(6, 34, 28, .55) 45%, rgba(6, 34, 28, 0) 75%),
    linear-gradient(0deg, rgba(6, 34, 28, .55) 0%, rgba(0, 0, 0, 0) 45%),
    url(img/banner.jpg) right center / cover no-repeat, #0b3f31;
}
.cabecera::before { content: none; }
.cabecera .logo { width: 70px; height: 70px; border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); animation: logoEntra .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.cabecera h1 { font-size: 1.7rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.cabecera .sub, .cabecera .lema { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.cabecera .lema { margin-top: 26px; letter-spacing: .02em; }
.cabecera .ajustes { transition: transform .4s; }
.cabecera .ajustes:active { transform: rotate(90deg); }
@keyframes logoEntra { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }

/* tarjetas del menú: relieve, icono en su círculo y respuesta al dedo */
.menu { gap: 14px; margin-top: -14px; position: relative; }
.tarjeta-menu {
  border-radius: 18px; background: linear-gradient(160deg, #e6f2ec 0%, #d7e9e0 100%);
  border: 1px solid rgba(15, 92, 70, .08); box-shadow: 0 2px 6px rgba(11, 63, 49, .08), 0 8px 20px rgba(11, 63, 49, .06);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s; animation: subir .45s ease-out both;
}
.tarjeta-menu.principal { background: linear-gradient(150deg, #13704f 0%, #0b3f31 100%); box-shadow: 0 8px 22px rgba(11, 63, 49, .35); }
.tarjeta-menu:active { transform: scale(.96); box-shadow: 0 1px 3px rgba(11, 63, 49, .12); }
.tarjeta-menu .icono { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: #fff; box-shadow: 0 2px 6px rgba(11, 63, 49, .12); margin-bottom: 4px; }
.tarjeta-menu.principal .icono { background: rgba(255, 255, 255, .16); box-shadow: none; }
.tarjeta-menu .icono svg { width: 28px; height: 28px; }
.tarjeta-menu.principal .icono svg { animation: latido 2.4s ease-in-out infinite; }
.tarjeta-menu::after { transition: transform .18s; }
.tarjeta-menu:active::after { transform: translate(4px, -50%); }
.menu .tarjeta-menu:nth-child(2) { animation-delay: .05s; } .menu .tarjeta-menu:nth-child(3) { animation-delay: .1s; }
.menu .tarjeta-menu:nth-child(4) { animation-delay: .15s; } .menu .tarjeta-menu:nth-child(5) { animation-delay: .2s; }
.menu .tarjeta-menu:nth-child(6) { animation-delay: .25s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* cada pantalla entra suave */
#vista.entra > * { animation: aparecer .3s ease-out both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
.lista > * { animation: subir .35s ease-out both; }
.lista > *:nth-child(2) { animation-delay: .03s; } .lista > *:nth-child(3) { animation-delay: .06s; }
.lista > *:nth-child(4) { animation-delay: .09s; } .lista > *:nth-child(5) { animation-delay: .12s; }
.lista > *:nth-child(n+6) { animation-delay: .15s; }

/* botones, filas y partidos: respuesta al tocar */
.boton, .fila-jugador, .partido, .pestanas button, .reg-fundamentos button, .reg-jugador, .reg-deshacer, .opcion {
  transition: transform .15s cubic-bezier(.2, .8, .3, 1), box-shadow .15s, background-color .2s, color .2s, border-color .2s;
}
.boton:active, .fila-jugador:active, .partido:active, .reg-jugador:active, .reg-deshacer:active { transform: scale(.97); }
.boton.lleno { background: linear-gradient(150deg, #13704f, #0b3f31); box-shadow: 0 4px 12px rgba(11, 63, 49, .28); }
.boton.lleno:active { box-shadow: 0 1px 4px rgba(11, 63, 49, .3); }
.fila-jugador, .partido { border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 6px 16px rgba(11, 63, 49, .05); }
.barra-titulo { background: linear-gradient(120deg, #13704f, #0b3f31); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.pestanas button.activa { animation: subrayar .25s ease-out; }
@keyframes subrayar { from { border-bottom-color: transparent; } }
.campeon { animation: subir .5s ease-out both; box-shadow: 0 4px 14px rgba(201, 154, 6, .25); }

/* barra de abajo: el activo en su píldora */
.barra-abajo { background: linear-gradient(180deg, #0f4d3c, #0b3f31); box-shadow: 0 -4px 14px rgba(0, 0, 0, .18); }
.barra-abajo a { position: relative; transition: color .2s; }
.barra-abajo a svg { transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.barra-abajo a.activa svg { transform: translateY(-2px) scale(1.12); }
.barra-abajo a.activa::before { content: ""; position: absolute; top: 9px; width: 56px; height: 34px; border-radius: 17px; background: rgba(255, 255, 255, .14); }
.barra-abajo a:active svg { transform: scale(.85); }

/* registro: botones con relieve, «+1» que sube y cuántas veces lleva cada resultado */
.reg-res { position: relative; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .2); }
.reg-res.verde { background: linear-gradient(160deg, #24a35e, #1a7d47); } .reg-res.rojo { background: linear-gradient(160deg, #de4a43, #b12c27); }
.reg-res.naranja { background: linear-gradient(160deg, #e08a24, #b56a12); } .reg-res.azul { background: linear-gradient(160deg, #2f7ae0, #1b56ad); }
.reg-res.pulsado { animation: pulso .3s ease-out; }
@keyframes pulso { 40% { transform: scale(.94); filter: brightness(1.2); } }
.reg-res .cuenta { position: absolute; top: 8px; right: 10px; font-style: normal; font-weight: 800; font-size: .95rem; background: rgba(255, 255, 255, .22); border-radius: 12px; padding: 1px 9px; }
.reg-res .cuenta:empty { display: none; }
.reg-res .cuenta.salta { animation: salta .35s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes salta { 50% { transform: scale(1.5); } }
.mas-uno { position: absolute; left: 50%; top: 30%; font-weight: 800; font-size: 1.6rem; color: #fff; pointer-events: none; animation: masUno .7s ease-out forwards; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
@keyframes masUno { from { opacity: 1; transform: translate(-50%, 0) scale(.8); } to { opacity: 0; transform: translate(-50%, -46px) scale(1.25); } }
.reg-jugador.activo { transform: translateY(-2px); }
.reg-fundamentos button.activo { box-shadow: 0 4px 12px rgba(31, 99, 198, .35); }
.reg-cabecera { background: linear-gradient(120deg, #1a4f8f, #0f3d73); }

/* registro SIEMPRE en horizontal: si el teléfono está en vertical (y no ha dejado bloquear el giro), la app gira el
   dibujo 90° y se usa con el teléfono de lado */
@media (orientation: portrait) and (pointer: coarse) {
  body.modo-registro .registro {
    position: fixed; top: 0; left: 100vw; width: 100vh; width: 100dvh; height: 100vw;
    transform-origin: top left; transform: rotate(90deg);
  }
  body.modo-registro .reg-jugadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.modo-registro .capa .hoja { transform: rotate(90deg); max-width: 92vh; max-height: 92vw; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* pelota del banner: bota sobre la arena y cambia girando entre las fotos del dueño */
.cabecera .pelota-bota { position: absolute; right: 9%; bottom: 14px; width: 74px; height: 74px; animation: bote 1.6s cubic-bezier(.45, 0, .55, 1) infinite; z-index: 1; }
.cabecera .pelota-bota::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(3px); animation: sombra 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.cabecera .pelota { position: static; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); animation: rueda 6s linear infinite; }
.cabecera .pelota.cambia { animation: cambio .65s ease-in-out; }
@keyframes bote { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 12% { transform: translateY(-4px) scale(1); } 50% { transform: translateY(-22px); } 88% { transform: translateY(-4px) scale(1); } }
@keyframes sombra { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.55); opacity: .35; } }
@keyframes rueda { to { transform: rotate(360deg); } }
@keyframes cambio { 0% { transform: rotateY(0) scale(1); } 46% { transform: rotateY(90deg) scale(.85); } 54% { transform: rotateY(90deg) scale(.85); } 100% { transform: rotateY(0) scale(1); } }

/* engranaje de ajustes: botón de verdad (el dueño lo veía como un dibujo) */
.cabecera .ajustes {
  right: 14px; top: 14px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; z-index: 2;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), background-color .2s;
}
.cabecera .ajustes svg { width: 24px; height: 24px; }
.cabecera .ajustes:active { transform: scale(.88) rotate(60deg); background: rgba(255, 255, 255, .3); }

/* la pelota ya no gira de lado (se veía plana, como una moneda): rueda sobre sí misma y lleva luz y sombra de esfera */
.cabecera .pelota-bota::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 22%, rgba(255, 255, 255, 0) 40%),
              radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%);
}
.cabecera .pelota.cambia { animation: cambio .65s cubic-bezier(.4, 0, .2, 1); }
@keyframes cambio { 0% { transform: rotate(0) scale(1); filter: blur(0); } 50% { transform: rotate(300deg) scale(.86); filter: blur(1.5px); } 100% { transform: rotate(540deg) scale(1); filter: blur(0); } }

/* banner de la cancha: menos oscuro abajo para que se vean las cintas azules del campo */
.cabecera {
  background:
    linear-gradient(90deg, rgba(6, 34, 28, .78) 0%, rgba(6, 34, 28, .45) 42%, rgba(6, 34, 28, 0) 70%),
    linear-gradient(0deg, rgba(6, 34, 28, .3) 0%, rgba(0, 0, 0, 0) 35%),
    url(img/banner.jpg) center 60% / cover no-repeat, #0b3f31;
}
.cabecera .ajustes svg { width: 26px; height: 26px; }

/* 10-nov (dueño): las tarjetas ya no se montan sobre el banner; solo la tocada se pone verde; iconos sin recuadro,
   como en su dibujo */
.menu { margin-top: 0; padding-top: 16px; }
.tarjeta-menu, .tarjeta-menu.principal { background: linear-gradient(160deg, #e6f2ec 0%, #d7e9e0 100%); color: var(--texto); box-shadow: 0 2px 6px rgba(11, 63, 49, .08), 0 8px 20px rgba(11, 63, 49, .06); }
.tarjeta-menu span, .tarjeta-menu.principal span { color: var(--texto-suave); }
.tarjeta-menu .icono, .tarjeta-menu.principal .icono { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; display: block; margin-bottom: 2px; }
.tarjeta-menu .icono svg, .tarjeta-menu.principal .icono svg { width: 38px; height: 38px; color: var(--verde); animation: none; }
.tarjeta-menu:active, .tarjeta-menu.elegida {
  background: linear-gradient(150deg, #13704f 0%, #0b3f31 100%); color: #fff; box-shadow: 0 8px 22px rgba(11, 63, 49, .35);
}
.tarjeta-menu:active span, .tarjeta-menu.elegida span { color: #e2f1ea; }
.tarjeta-menu:active .icono svg, .tarjeta-menu.elegida .icono svg { color: #fff; }

/* engranaje como en el dibujo del dueño: solo el contorno blanco, sin círculo ni borde alrededor */
.cabecera .ajustes { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cabecera .ajustes svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.cabecera .ajustes:active { background: rgba(255, 255, 255, .15); }

/* ---------- consultar estadísticas con el estilo del registro (decisión del dueño, 10-nov) ---------- */
.consulta .reg-cabecera .volver { font-size: 1.8rem; padding: 0 6px 0 0; }
.consulta .reg-cabecera select { max-width: 34%; font: inherit; font-size: .85rem; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 6px 8px; }
.consulta .reg-cabecera select option { color: #14241e; }
.reg-jugadores.desliza { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.reg-jugadores.desliza .reg-jugador { flex: 0 0 calc(25% - 5px); scroll-snap-align: start; }
.reg-jugador.gris .franja { background: #8fa3b8; }
.reg-jugador .puesto { position: absolute; top: 6px; right: 7px; font-style: normal; font-size: .72rem; font-weight: 800; color: #6b7a8c; }
.cuadro { cursor: default; }
.cuadro .numero { font-size: 2.4rem; line-height: 1; }
.cuadro span { font-weight: 700; font-size: 1.05rem; }
.cuadro .numero.salta { animation: salta .35s cubic-bezier(.2, .9, .3, 1.6); }
.cuadro svg { width: 26px; height: 26px; opacity: .9; }

.reg-jugadores.desliza { scrollbar-width: none; }
.reg-jugadores.desliza::-webkit-scrollbar { display: none; }

/* banner con profundidad (foto a ras de arena) y el degradado verde de la portada del dueño, que entra desde la izquierda */
.cabecera {
  background:
    linear-gradient(90deg, rgba(8, 48, 39, .97) 0%, rgba(8, 48, 39, .9) 28%, rgba(8, 48, 39, .55) 52%, rgba(8, 48, 39, .12) 72%, rgba(8, 48, 39, 0) 85%),
    linear-gradient(180deg, rgba(4, 28, 22, .45) 0%, rgba(4, 28, 22, 0) 38%, rgba(4, 28, 22, 0) 70%, rgba(4, 28, 22, .35) 100%),
    url(img/banner.jpg) 70% 55% / cover no-repeat, #0b3f31;
}

/* ---------- cuentas (segunda etapa) ---------- */
body.sin-barra .barra-abajo { display: none; }
.cabecera.acceso { min-height: 160px; }
.tarjeta-acceso { background: #fff; margin: -18px 14px 20px; border-radius: 18px; box-shadow: 0 8px 26px rgba(11, 63, 49, .12); position: relative; }
.tarjeta-acceso h2 { margin: 0; color: var(--verde); }
.tarjeta-acceso input { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 10px; border: 1px solid #c8d6d0; }
.tarjeta-acceso a { color: var(--verde); font-weight: 600; }
.cuenta-caja { display: flex; align-items: center; gap: 12px; margin: 14px 12px 0; background: linear-gradient(150deg, #13704f, #0b3f31); color: #fff; border-radius: 16px; padding: 14px; }
.cuenta-caja .foto { background: rgba(255, 255, 255, .18); color: #fff; }
.cuenta-caja small { display: block; opacity: .85; }
.usuario select { font: inherit; padding: 8px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; transition: background-color .3s; }
.usuario select.guardado { background: #d9f2e3; }

.fila-jugador .foto svg { width: 26px; height: 26px; }

/* ---------- fichas de jugador (segunda etapa, fase B) ---------- */
.nivel { display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.nivel.novato { background: #e3f4ea; color: #1d7a45; } .nivel.amateur { background: #e3edfb; color: #1f5fb8; } .nivel.profesional { background: #fff1cf; color: #8a5a00; }
.foto.mediana { width: 76px; height: 76px; font-size: 1.6rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tarjeta-ficha { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 0; border-radius: 16px; padding: 14px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 6px 16px rgba(11,63,49,.06); transition: transform .15s; color: var(--texto); }
.tarjeta-ficha:active { transform: scale(.96); }
.tarjeta-ficha b { font-size: 1rem; text-align: center; overflow-wrap: anywhere; }
.tarjeta-ficha small { color: var(--verde); font-weight: 700; }
.ficha-cabecera { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px 10px; background: linear-gradient(180deg, #e3efe9, transparent); }
.ficha-cabecera h2 { margin: 0; }
.ficha-cabecera .foto.grande { box-shadow: 0 6px 20px rgba(11, 63, 49, .25); border: 4px solid #fff; }
.privado { border-color: #f0d9a8; background: #fffaf0; }
.privado p { margin: 6px 0 0; }
.privado a { color: var(--verde); font-weight: 600; }
.formulario input[type=email], .formulario input[type=tel], .formulario input[type=search], .filtros input[type=search] { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid #c8d6d0; background: #fff; border-radius: 20px; padding: 7px 14px; font-weight: 600; color: var(--texto-suave); }
.chips button.activa { background: var(--verde); color: #fff; border-color: var(--verde); }
.aviso-ficha { display: block; width: calc(100% - 24px); margin: 12px 12px 0; text-align: left; border: 0; border-radius: 16px; padding: 14px; background: linear-gradient(150deg, #fff3d6, #ffe7ad); color: #5a3d00; box-shadow: 0 4px 14px rgba(201,154,6,.2); animation: subir .45s ease-out both; }
.aviso-ficha small { display: block; margin-top: 2px; }

/* logo: solo el jugador amarillo, sin el fondo negro y más grande (dueño, 10-nov) */
.cabecera .logo { width: 92px; height: 92px; border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); margin: -8px -4px -8px -10px; }
/* estadísticas: la barra de arriba en el verde de la app (en el registro sigue azul) */
.consulta .reg-cabecera { background: linear-gradient(120deg, #13704f, #0b3f31); }

/* el lema, al pie del banner (dueño, 10-nov) */
.cabecera .lema { position: absolute; left: 20px; bottom: 16px; margin: 0; }

/* banner alejado (cancha a media distancia, como la portada del dueño) */
.cabecera { background-position: 0 0, 0 0, 75% 62%, 0 0; }

/* ---------- segunda etapa, fase C (10-nov): avisos en la barra de abajo, convocatoria, inscripciones, avisos breves ---------- */
.barra-abajo a.campana .num { position: absolute; top: 4px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e5392f; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #0f4d3c; }
.campana .num[hidden] { display: none; }
.boton:disabled { opacity: .45; filter: grayscale(.4); box-shadow: none; cursor: default; }
.hoja input[type=text], .hoja input[type=search], .hoja input[type=tel], .hoja select {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; }
.hoja label { font-weight: 600; font-size: .9rem; margin-bottom: -4px; }
.etiqueta.inscripcion { background: #e3f1ff; color: #0b5cad; }
.convocatoria { margin: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.convocatoria p { margin: 8px 0 0; }
.descripcion { white-space: pre-line; }
.mi-inscripcion { padding: 12px 14px; border-radius: 12px; background: var(--verde-claro); color: #164a2c; line-height: 1.4; }
.mi-rol { margin: 10px 14px 0; padding: 10px 14px; border-radius: 12px; background: #fff3d6; color: #6b4600; font-size: .9rem; }
.boton.grande { font-size: 1.15rem; padding: 16px; }
.fila-jugador.inscrito .boton { padding: 8px 12px; }
.fila-jugador.elegida { box-shadow: inset 0 0 0 2px var(--verde); background: var(--verde-claro); }
.elegir-companero { max-height: 34vh; overflow-y: auto; }
.hoja details summary { cursor: pointer; color: var(--verde); font-weight: 600; padding: 6px 0; }
.hoja textarea, .formulario textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #cfd8d3; border-radius: 10px; resize: vertical; }

.avisos { gap: 8px; }
.aviso-item { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 6px rgba(0, 0, 0, .07); border-left: 4px solid transparent; }
.aviso-item.nuevo { border-left-color: var(--verde); }
.aviso-item[data-torneo] { cursor: pointer; }
.aviso-item p { margin: 4px 0; line-height: 1.4; }
.aviso-item small { color: #6b7a72; }

.tostada { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 50; max-width: min(92vw, 520px);
  background: #1f2a24; color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  animation: tostadaEntra .25s ease-out; transition: opacity .5s; }
.tostada.fuera { opacity: 0; }
@keyframes tostadaEntra { from { opacity: 0; transform: translate(-50%, 12px); } }
.formulario input[type=time], .formulario input[type=tel] { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; }

/* ---------- fase E (10-nov): estadísticas de por vida y ranking general ---------- */
.carrera { display: flex; flex-direction: column; gap: 10px; }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cifras div { background: var(--verde-claro); border-radius: 12px; padding: 10px 4px; text-align: center; }
.cifras b { display: block; font-size: 1.45rem; color: var(--verde); line-height: 1.1; }
.cifras small { color: #4d5f56; font-size: .75rem; }
.puesto-ranking { display: block; padding: 10px 12px; border-radius: 12px; background: #fff3d6; color: #6b4600; font-weight: 600; text-decoration: none; }
.carrera .tabla small { display: block; font-size: .68rem; color: #6b7a72; }
.logros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.logros li { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.logros li span { font-size: 1.25rem; }
.fila-ranking .puesto { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: #e6ece9; color: #33463d; font-size: .9rem; }
.fila-ranking .puesto.p1 { background: #f5c518; color: #4a3600; }
.fila-ranking .puesto.p2 { background: #cfd6dc; color: #2f3a42; }
.fila-ranking .puesto.p3 { background: #dfa36b; color: #4a2a0c; }
.fila-ranking .nota { text-align: right; line-height: 1.05; }
.fila-ranking .nota b { display: block; font-size: 1.3rem; color: var(--verde); }
.fila-ranking .nota small { color: #6b7a72; font-size: .7rem; }
.fila-ranking.yo { box-shadow: inset 0 0 0 2px var(--verde); }

/* exportar / importar torneos y salvas automáticas (10-nov) */
.botones-titulo { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.salvas .reglas p.bien, .salvas .reglas p.mal { text-align: left; margin: 6px 0; }
.salvas .reglas p.mal { color: #a8551b; }
.salvas .reglas input { width: 100%; box-sizing: border-box; font: inherit; padding: 12px; border-radius: 10px; border: 1px solid #c8d6d0; background: #fff; color: #17302a; }

/* Estadísticas (rankings y Comparar) SIEMPRE en horizontal, como la consulta azul: si el teléfono está en vertical y no
   deja bloquear el giro, la app gira la pantalla 90° (10-nov, dueño: «todo lo que se vea en estadísticas…») */
body.modo-horizontal .barra-abajo { display: none; }
body.modo-horizontal #vista { padding-bottom: 16px; }
body.modo-horizontal .tabla.comparar { width: 100%; }
@media (orientation: portrait) and (pointer: coarse) {
  body.modo-horizontal #vista {
    position: fixed; top: 0; left: 100vw; width: 100vh; width: 100dvh; height: 100vw;
    transform-origin: top left; transform: rotate(90deg); overflow-y: auto;
  }
  body.modo-horizontal .capa .hoja { transform: rotate(90deg); max-width: 92vh; max-height: 92vw; }
}

/* fila de jugadores con más de 4: asoma el siguiente y hay flechas con el total (el dueño solo veía 4 y no sabía que había más) */
.fila-desliza { position: relative; }
.reg-jugadores.desliza .reg-jugador { flex: 0 0 calc(22.5% - 5px); }
.flecha-fila { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: #1a4f8f; color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1; box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  display: grid; place-items: center; cursor: pointer; }
.flecha-fila[hidden] { display: none; }
.flecha-fila.izq { left: 2px; }
.flecha-fila.der { right: 2px; }
.flecha-fila small { position: absolute; top: -7px; right: -5px; background: #f2b632; color: #14241e; font-size: .66rem; border-radius: 10px; padding: 1px 5px; }

/* consulta en TABLA (dueño, 10-nov): todos los jugadores en filas, se desliza hacia abajo; las tarjetas se esconden */
.consulta .c-modo { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; border-radius: 10px; padding: 6px 10px; white-space: nowrap; }
.consulta .solo-tabla, .consulta .c-tabla { display: none; }
.consulta.en-tabla .solo-tabla { display: flex; }
.consulta.en-tabla .c-tabla { display: block; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(15, 61, 115, .08); }
.consulta.en-tabla .fila-desliza, .consulta.en-tabla .reg-titulo, .consulta.en-tabla #c-cuadros, .consulta.en-tabla .reg-pie { display: none; }
.consulta.en-tabla .reg-fundamentos { grid-template-columns: repeat(5, 1fr); }
.tabla-consulta { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-consulta th { position: sticky; top: 0; z-index: 1; background: #0f3d73; color: #fff; font-weight: 700; padding: 8px 6px; text-align: center; cursor: pointer; white-space: nowrap; }
.tabla-consulta th.ordenada { background: #1f63c6; }
.tabla-consulta td { padding: 6px; text-align: center; border-bottom: 1px solid #e7eef6; white-space: nowrap; }
.tabla-consulta .izq { text-align: left; }
.tabla-consulta td.ordenada { font-weight: 800; color: #1f63c6; background: #f1f6fd; }
.tabla-consulta td.pos { color: #6b7a8c; font-weight: 800; width: 28px; }
.tabla-consulta tr[data-j] { cursor: pointer; }
.tabla-consulta tr.elegida td { background: #fff8e1; }
.tabla-consulta tr.rojo td.pos { box-shadow: inset 4px 0 0 var(--rojo); }
.tabla-consulta tr.azul td.pos { box-shadow: inset 4px 0 0 var(--azul); }
.tabla-consulta .quien { display: inline-flex; align-items: center; gap: 8px; }
.tabla-consulta .quien .foto { width: 30px; height: 30px; font-size: .75rem; }
.c-tabla .pista { margin: 8px 10px 10px; font-size: .8rem; color: #6b7a8c; }

/* la tabla con los MISMOS colores de las tarjetas (dueño, 10-nov: «la tabla está bien, pero sin cambiar el estilo») */
.consulta.en-tabla .c-tabla { background: transparent; box-shadow: none; }
.tabla-consulta { border-collapse: separate; border-spacing: 0 6px; }
.tabla-consulta th { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.tabla-consulta th.c-verde { background: linear-gradient(160deg, #24a35e, #1a7d47); }
.tabla-consulta th.c-rojo { background: linear-gradient(160deg, #de4a43, #b12c27); }
.tabla-consulta th.c-naranja { background: linear-gradient(160deg, #e08a24, #b56a12); }
.tabla-consulta th.c-azul { background: linear-gradient(160deg, #2f7ae0, #1b56ad); }
.tabla-consulta th.c-gris { background: linear-gradient(160deg, #6f8296, #55677a); }
.tabla-consulta th.c-marino, .tabla-consulta th:not([class*="c-"]) { background: linear-gradient(120deg, #1a4f8f, #0f3d73); }
.tabla-consulta th.ordenada { box-shadow: inset 0 -3px 0 #f2b632; }
.tabla-consulta td { background: #fff; border-bottom: 0; font-weight: 700; font-size: .98rem; }
.tabla-consulta tr td:first-child { border-radius: 12px 0 0 12px; }
.tabla-consulta tr td:last-child { border-radius: 0 12px 12px 0; }
.tabla-consulta tbody tr { filter: drop-shadow(0 2px 4px rgba(15, 61, 115, .1)); }
.tabla-consulta td.t-verde { color: #1a7d47; background: #eaf7ef; }
.tabla-consulta td.t-rojo { color: #b12c27; background: #fdecea; }
.tabla-consulta td.t-naranja { color: #b56a12; background: #fdf2e3; }
.tabla-consulta td.t-azul { color: #1b56ad; background: #e9f1fd; }
.tabla-consulta td.t-gris { color: #3f4f60; background: #f1f4f7; }
.tabla-consulta td.t-marino { color: #0f3d73; background: #e3ecf8; }
.tabla-consulta td.ordenada { font-weight: 900; font-size: 1.05rem; box-shadow: inset 0 0 0 2px rgba(242, 182, 50, .55); }
.tabla-consulta tr.elegida td { background: #fff3cd; }
.tabla-consulta .quien { position: relative; padding-left: 8px; }
.tabla-consulta .quien .franja { position: absolute; left: -6px; top: -6px; bottom: -6px; width: 5px; border-radius: 3px; background: #8fa3b8; }
.tabla-consulta tr.rojo .quien .franja { background: var(--rojo); }
.tabla-consulta tr.azul .quien .franja { background: var(--azul); }
.tabla-consulta tr.rojo td.pos, .tabla-consulta tr.azul td.pos { box-shadow: none; }

/* =====================================================================================================================
   10-nov (dueño, por partes): pantalla azul con los 4 primeros arriba y la lista de TODOS debajo (se desliza);
   en el PC sin estirarse; y rankings y Comparar con la misma estética azul y los colores de las tarjetas.
   ===================================================================================================================== */
.consulta { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.consulta .c-arriba { height: 100%; display: flex; flex-direction: column; gap: 6px; }
.c-lista { margin: 12px 0 10px; }
.c-lista-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 2px 4px; }
.c-lista-cab b { color: #0f3d73; font-size: 1.05rem; }
.c-chips { display: flex; gap: 6px; }
.c-chips button { display: flex; align-items: center; gap: 6px; border: 1px solid #dbe4ef; background: #eef3f9; color: #556; border-radius: 10px; padding: 7px 12px; font: inherit; font-weight: 700; font-size: .9rem; }
.c-chips button svg { width: 18px; height: 18px; }
.c-chips button.activo { background: #1f63c6; color: #fff; border-color: #1f63c6; }
.c-tabla-envoltura { overflow-x: auto; }
.consulta .tabla-consulta th { position: static; }
#c-tabla .pista { margin: 4px 4px 0; font-size: .8rem; color: #6b7a8c; }

/* en el PC (pantalla ancha y alta) no se estira: ancho máximo y tarjetas de un tamaño razonable */
@media (min-width: 1000px) {
  .consulta .c-arriba { max-height: 540px; }
}

/* rankings (📋) y Comparar con la estética de la pantalla azul */
body.modo-horizontal #vista { background: #f5f8fc; }
body.modo-horizontal .barra-titulo { background: linear-gradient(120deg, #1a4f8f, #0f3d73); }
body.modo-horizontal .filtros select { border: 1px solid #dbe4ef; background: #fff; color: #0f3d73; font-weight: 600; }
body.modo-horizontal .boton-comparar { background: #fff3d6; color: #6b4700; border: 0; font-weight: 800; }
body.modo-horizontal .pestanas { background: #f5f8fc; border: 0; gap: 6px; padding: 0 12px; top: 0; }
body.modo-horizontal .pestanas button { background: #eef3f9; border: 1px solid #dbe4ef; border-radius: 10px; color: #556; font-weight: 700; }
body.modo-horizontal .pestanas button.activa { background: #1f63c6; color: #fff; border-color: #1f63c6; animation: none; }
body.modo-horizontal .reconocimientos { background: #fff; box-shadow: 0 2px 10px rgba(15, 61, 115, .08); }
body.modo-horizontal .reconocimientos h3 { color: #0f3d73; }
body.modo-horizontal .mvp { background: linear-gradient(135deg, #ffe08a, #f2b632); color: #3d2a00; box-shadow: 0 4px 12px rgba(242, 182, 50, .35); }
body.modo-horizontal .mvp small { color: #5c4100; }
body.modo-horizontal .premios div { color: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); font-size: .86rem; }
body.modo-horizontal .premios div b { font-size: 1rem; }
body.modo-horizontal .premios .f-ataque { background: linear-gradient(160deg, #24a35e, #1a7d47); }
body.modo-horizontal .premios .f-saque { background: linear-gradient(160deg, #e08a24, #b56a12); }
body.modo-horizontal .premios .f-bloqueo { background: linear-gradient(160deg, #de4a43, #b12c27); }
body.modo-horizontal .premios .f-defensa { background: linear-gradient(160deg, #2f7ae0, #1b56ad); }
body.modo-horizontal .ranking { border-left: 5px solid #8fa3b8; }
body.modo-horizontal .ranking .pos { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #e3ecf8; color: #0f3d73; }
body.modo-horizontal .ranking .pos.p1 { background: #f5c518; color: #4a3600; }
body.modo-horizontal .ranking .pos.p2 { background: #cfd6dc; color: #2f3a42; }
body.modo-horizontal .ranking .pos.p3 { background: #dfa36b; color: #4a2a0c; }
body.modo-horizontal .ranking .cifra b { color: #1f63c6; font-size: 1.2rem; }
body.modo-horizontal .tabla-envoltura { box-shadow: 0 2px 10px rgba(15, 61, 115, .08); }
body.modo-horizontal .tabla th { background: linear-gradient(120deg, #1a4f8f, #0f3d73); color: #fff; }
body.modo-horizontal .tabla th small { color: rgba(255, 255, 255, .8); }
body.modo-horizontal .tabla td { border-bottom-color: #e7eef6; font-weight: 600; }
/* Comparar: un jugador en rojo y el otro en azul, cada fundamento con su color, y el que gana en verde */
body.modo-horizontal .comparar tr.cab td { padding: 12px 6px; color: #fff; font-size: 1.05rem; }
body.modo-horizontal .comparar tr.cab td.ja { background: linear-gradient(160deg, #de4a43, #b12c27); border-radius: 12px 0 0 0; }
body.modo-horizontal .comparar tr.cab td.jb { background: linear-gradient(160deg, #2f7ae0, #1b56ad); border-radius: 0 12px 0 0; }
body.modo-horizontal .comparar tr.cab th { background: #0f3d73; font-size: 1.1rem; font-weight: 900; }
body.modo-horizontal .comparar tr.cab .foto { border: 2px solid rgba(255, 255, 255, .8); }
body.modo-horizontal .comparar th { background: #f1f4f7; color: #3f4f60; font-weight: 700; }
body.modo-horizontal .comparar tr.sep th { color: #fff; text-align: left; padding: 8px 12px; font-size: .95rem; }
body.modo-horizontal .comparar tr.sep th svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
body.modo-horizontal .comparar tr.sep.f-ataque th { background: linear-gradient(120deg, #24a35e, #1a7d47); }
body.modo-horizontal .comparar tr.sep.f-saque th { background: linear-gradient(120deg, #e08a24, #b56a12); }
body.modo-horizontal .comparar tr.sep.f-bloqueo th { background: linear-gradient(120deg, #de4a43, #b12c27); }
body.modo-horizontal .comparar tr.sep.f-defensa th { background: linear-gradient(120deg, #2f7ae0, #1b56ad); }
body.modo-horizontal .comparar td.mejor { color: #1a7d47; background: #dff3e7; font-weight: 900; font-size: 1.02rem; }
body.modo-horizontal .comparar tr.cab th { color: #fff; letter-spacing: 1px; }

/* botón de rankings y comparar: un podio (antes 📋, que parecía una libreta) */
.consulta .reg-cabecera .c-rank { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); }
.c-rank svg { width: 38px; height: 30px; display: block; }
.c-rank small { font-size: .62rem; font-weight: 700; letter-spacing: .3px; opacity: .95; }

/* =====================================================================================================================
   10-nov (dueño): tarjetas IDÉNTICAS a su dibujo estadisticas.jpg (registro y estadísticas). Se quedan lo nuevo (cifras,
   lista de todos, podio) y la barra de arriba verde.
   ===================================================================================================================== */
.registro { background: #f3f6fa; }
/* jugadores: tarjeta blanca, silueta con camiseta y número, nombre y debajo su nivel; el elegido en azul claro */
.reg-jugador { background: #f7f9fc; border: 1.5px solid #d9e2ec; border-radius: 12px; padding: clamp(6px, calc(1.8 * var(--alto)), 12px) 12px; gap: 12px; box-shadow: none; }
.reg-jugador .franja, .reg-jugador .puesto { display: none; }
.reg-jugador.activo { background: #e3effc; border-color: #2f7ae0; box-shadow: none; transform: none; }
.reg-jugador .nombre { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.15; }
.reg-jugador .nombre b { font-size: 1.05rem; color: #14263d; }
.reg-jugador .nombre small { font-size: .8rem; color: #5d6f84; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; width: clamp(34px, calc(9 * var(--alto)), 46px); height: clamp(34px, calc(9 * var(--alto)), 46px); border-radius: 50%; }
.avatar.camiseta { display: grid; place-items: center; background: #e4ecf5; overflow: hidden; }
.avatar.camiseta svg { width: 88%; height: 88%; margin-top: 12%; }
img.avatar { object-fit: cover; }
/* pestañas de fundamento: icono grande azul acero; la elegida, azul lleno */
.reg-fundamentos button { background: #eef3f8; border: 1.5px solid #d6e0ea; color: #4a5a6c; border-radius: 12px; padding: clamp(5px, calc(1.9 * var(--alto)), 14px) 6px; font-size: 1.05rem; gap: 10px; box-shadow: none; }
.reg-fundamentos button svg { width: clamp(20px, calc(6 * var(--alto)), 30px); height: clamp(20px, calc(6 * var(--alto)), 30px); color: #4f6f95; }
.reg-fundamentos button.activo { background: #1a73e8; border-color: #1a73e8; color: #fff; box-shadow: none; }
.reg-fundamentos button.activo svg { color: #fff; }
.reg-titulo b { font-size: 1.15rem; color: #14263d; }
.reg-titulo small { font-size: .9rem; color: #5d6f84; }
/* tarjetas de resultado: colores planos del dibujo, icono grande arriba, título y explicación */
.reg-res { background-image: none !important; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); gap: clamp(1px, calc(.8 * var(--alto)), 6px); }
.reg-res.verde { background-color: #1e8b4f; } .reg-res.rojo { background-color: #c83732; }
.reg-res.naranja { background-color: #b9691d; } .reg-res.azul { background-color: #1565c4; }
.reg-res svg, .cuadro svg { width: clamp(30px, calc(10 * var(--alto)), 54px); height: clamp(30px, calc(10 * var(--alto)), 54px); opacity: 1; }
.reg-res b { font-size: clamp(1.1rem, calc(4.2 * var(--alto)), 1.6rem); font-weight: 800; }
.reg-res small { font-size: clamp(.75rem, calc(2.6 * var(--alto)), .98rem); opacity: .92; }
.cuadro .numero { font-size: clamp(1.8rem, calc(9 * var(--alto)), 3rem); }
.cuadro span { font-size: clamp(1.05rem, calc(4 * var(--alto)), 1.5rem); font-weight: 800; }
/* pie: fondo azul muy claro, avatar grande, cifras separadas por rayas y botón blanco con flecha */
.reg-pie { background: #edf2f8; border: 0; border-radius: 12px; padding: clamp(6px, calc(1.6 * var(--alto)), 12px) 14px; }
.reg-sel { gap: 12px; }
.reg-sel .avatar { width: clamp(38px, calc(11 * var(--alto)), 58px); height: clamp(38px, calc(11 * var(--alto)), 58px); }
.reg-sel .nombre { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.reg-sel .nombre b { font-size: 1.05rem; color: #14263d; }
.reg-sel .nombre small { font-size: .8rem; color: #5d6f84; }
.reg-cifras { border-left: 0; justify-content: stretch; }
.reg-cifras > div { flex: 1; border-left: 1.5px solid #d3dce7; padding: 0 6px; }
.reg-cifras small { font-size: .78rem; color: #4a5a6c; }
.reg-cifras b { font-size: 1.25rem; color: #14263d; }
.reg-cifras .ef b { color: #1a73e8; }
.boton-pie { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #d3dce7; border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 700; color: #14263d; white-space: nowrap; border-left: 1.5px solid #d3dce7; margin-left: 6px; }
.boton-pie i { font-style: normal; font-size: 1.3rem; line-height: 1; color: #4a5a6c; }

/* la barra de arriba, SIEMPRE verde (dueño, 10-nov): registro, estadísticas, rankings y comparar */
.reg-cabecera, .consulta .reg-cabecera { background: linear-gradient(120deg, #13704f, #0b3f31); }
body.modo-horizontal .barra-titulo { background: linear-gradient(120deg, #13704f, #0b3f31); }

/* 10-nov (dueño: «los números quedan muy pegados al borde»): con la pantalla girada por la app el alto disponible es el
   ANCHO del teléfono, así que los tamaños se miden con él; y en Estadísticas, que se desliza, las tarjetas tienen un
   alto mínimo para que el icono, la cifra y el texto quepan con aire. */
:root { --alto: 1vh; }
@media (orientation: portrait) and (pointer: coarse) { body.modo-registro, body.modo-horizontal { --alto: 1vw; } }
.consulta .reg-botones { min-height: 150px; }
.consulta .cuadro { padding: 10px 6px; }

/* Jugadores | Equipos | Duplas (dueño, 10-nov) */
.c-tipos { display: flex; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 2px; gap: 2px; flex: none; }
.c-tipos button { border: 0; background: none; color: #fff; font: inherit; font-size: .85rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.c-tipos button.activo { background: #fff; color: #0b3f31; }
.avatar-doble { display: inline-flex; flex: none; }
.avatar-doble .avatar { border: 2px solid #fff; }
.avatar-doble .avatar + .avatar { margin-left: -14px; }
.tabla-consulta .avatar-doble .avatar { width: 30px; height: 30px; }
.tabla-consulta .quien > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.sub-grupo { font-size: .72rem; color: #6b7a8c; font-weight: 500; }
.c-nota { color: #6b7a8c; font-size: .8rem; }
@media (max-width: 760px), (orientation: portrait) and (pointer: coarse) {
  .consulta .reg-cabecera img { display: none; }
  .c-tipos button { padding: 5px 7px; font-size: .78rem; }
}