/* Picksin — estilo. Colores tomados del logo: azul escudo #1279BB, azul sombra #0F5989,
   verde flecha #49AD33, verde sombra #2E8F35, gris claro #D9D9D9. Siempre en claro. */
@font-face {
  font-family: "Banderas Picksin";
  src: url("banderas.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  font-display: swap;
}

:root {
  --fondo: #f3f7fb;
  --fondo-2: #e9f1f9;
  --superficie: #ffffff;
  --texto: #0e1a2b;
  --suave: #56677c;
  --tenue: #8796a8;
  --borde: #e0e8f0;
  --borde-fuerte: #cfdbe7;
  --azul: #1279bb;
  --azul-hover: #0f6aa6;
  --azul-oscuro: #0f5989;
  --azul-suave: #e8f2fb;
  --verde: #49ad33;
  --verde-oscuro: #2e8f35;
  --verde-texto: #237a29;
  --verde-suave: #eaf7e6;
  --rojo: #d64545;
  --rojo-texto: #b42318;
  --rojo-suave: #fdeeee;
  --ambar-texto: #8a5a00;
  --ambar-suave: #fff5da;
  --gris-suave: #f2f5f9;
  --radio: 16px;
  --radio-s: 10px;
  --sombra: 0 1px 2px rgba(14, 40, 72, .05), 0 3px 12px rgba(14, 40, 72, .05);
  --sombra-alta: 0 6px 24px rgba(14, 40, 72, .12);
  --nav-movil: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  padding-bottom: calc(var(--nav-movil) + env(safe-area-inset-bottom));
}
html.banderas-fuente .bandera { font-family: "Banderas Picksin", "Segoe UI Emoji", sans-serif; }
a { color: var(--azul); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, h3, h4 { letter-spacing: -.01em; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--azul); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 3px solid rgba(18, 121, 187, .45); outline-offset: 2px; }

/* ------------------------------------------------------------ barra y navegacion */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: #fff; border-bottom: 1px solid var(--borde);   /* sin backdrop-filter: haria relativo el menu fijo */
}
.barra-in { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--texto); font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em; }
.marca img { width: 34px; height: 40px; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--borde);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px rgba(14, 40, 72, .06);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--suave); font-size: .72rem; font-weight: 600;
  padding: 5px 2px; border-radius: 12px; line-height: 1.2; text-align: center;
}
.nav-emoji { font-size: 1.3rem; line-height: 1; filter: grayscale(.35); opacity: .85; }
.nav-largo { display: none; }
.nav a[aria-current="page"] { color: var(--azul-oscuro); background: var(--azul-suave); }
.nav a[aria-current="page"] .nav-emoji { filter: none; opacity: 1; }

@media (min-width: 980px) {
  body { padding-bottom: 0; }
  .nav-largo { display: inline; }
  .nav-corto { display: none; }
  .nav {
    position: static; display: flex; gap: 4px; margin-left: auto; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav a { flex-direction: row; gap: 7px; font-size: .95rem; padding: 8px 14px; border-radius: 999px; }
  .nav a:hover { background: var(--gris-suave); color: var(--texto); }
  .nav-emoji { font-size: 1.05rem; }
}

/* modo editor: un renglon dentro de la barra (quien escoge y si ya se guardo) */
.editor-barra {
  display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px 3px 9px; font-size: .8rem;
  background: var(--verde-suave); border: 1px solid #cfe9c7; border-radius: 999px; color: var(--verde-texto);
}
.editor-barra[hidden] { display: none; }
.editor-barra .etiqueta-editor { font-size: .85rem; }
.editor-barra .estado { font-weight: 800; min-width: 14px; text-align: center; }
.editor-barra .estado-error {
  border: 0; border-radius: 999px; background: var(--rojo); color: #fff; font-weight: 800; font-size: .76rem; padding: 2px 9px; cursor: pointer;
}
@media (min-width: 980px) { .editor-barra { margin-left: 4px; } }
.nav a { position: relative; }
.nav-badge {
  position: absolute; top: 1px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--rojo); color: #fff; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
.nav-badge[hidden] { display: none; }
@media (min-width: 980px) { .nav-badge { position: static; margin-left: -2px; box-shadow: none; } }

/* ------------------------------------------------------------ estructura */
.contenedor { max-width: 1120px; margin: 0 auto; padding: 18px 16px 32px; outline: none; }
.pie { max-width: 1120px; margin: 0 auto; padding: 8px 16px 32px; color: var(--suave); font-size: .84rem; }
.pie p { margin: 0 0 6px; }
.pie a { color: var(--suave); }
.enlace-editor { background: none; border: 0; padding: 4px 0; color: var(--tenue); cursor: pointer; font-size: .84rem; }
.enlace-editor:hover { color: var(--azul); }
.cargando { color: var(--suave); padding: 40px 0; text-align: center; }

h1 { font-size: 1.55rem; line-height: 1.2; margin: 0; font-weight: 800; }
h2 { font-size: 1.14rem; margin: 30px 0 12px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
h2 .cuenta, h3 .cuenta { color: var(--tenue); font-weight: 600; font-size: .85rem; }
h3 { font-size: 1rem; margin: 22px 0 10px; }
.emoji { font-style: normal; }
.sub { color: var(--suave); margin: 4px 0 0; font-size: .92rem; }
.titulo-seccion { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 14px; }
.titulo-seccion .icono {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra);
}
.migas { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; text-decoration: none; margin-bottom: 10px; font-weight: 600; }

/* ------------------------------------------------------------ inicio */
.portada {
  text-align: center; padding: 26px 16px 22px; margin: 0 0 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--azul-suave) 100%);
  border: 1px solid var(--borde); border-radius: 24px; box-shadow: var(--sombra);
}
.portada img { width: auto; height: 150px; display: block; margin: 0 auto 10px; filter: drop-shadow(0 6px 14px rgba(15, 89, 137, .18)); }
.portada h1 { font-size: 1.5rem; }
.portada p { color: var(--suave); margin: 6px auto 0; max-width: 520px; }
.pastilla {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--azul-oscuro);
}
@media (min-width: 820px) { .portada { padding: 34px 24px 28px; } .portada img { height: 190px; } .portada h1 { font-size: 1.9rem; } }

.mosaico { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaico .baldosa:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
@media (min-width: 980px) {
  .mosaico { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mosaico .baldosa:last-child:nth-child(odd) { grid-column: auto; min-height: 168px; }
}
.baldosa {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 168px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.baldosa:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); }
.baldosa .icono { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.35rem; border-radius: 12px; background: var(--azul-suave); }
.baldosa.verde .icono { background: var(--verde-suave); }
.baldosa b { font-size: 1rem; line-height: 1.25; }
.baldosa span { color: var(--suave); font-size: .84rem; line-height: 1.35; }
.baldosa .dato { margin-top: auto; font-weight: 750; color: var(--azul-oscuro); font-size: .88rem; }
.baldosa .dato::after { content: " ›"; }
.baldosa.verde .dato { color: var(--verde-texto); }

/* ------------------------------------------------------------ selector de semana */
.semana-sel { display: flex; align-items: stretch; gap: 8px; margin: 0 0 18px; }
.semana-sel .flecha {
  flex: none; width: 44px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie);
  font-size: 1.3rem; cursor: pointer; color: var(--azul-oscuro); box-shadow: var(--sombra);
}
.semana-sel .flecha:disabled { opacity: .35; cursor: default; }
.semana-caja {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 6px 36px 6px 14px;
  box-shadow: var(--sombra); min-width: 0;
}
.semana-caja small { color: var(--tenue); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.semana-caja b { font-size: .98rem; line-height: 1.35; }
.semana-caja::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.semana-caja select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 16px; }
.etq-semana { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--verde-suave); color: var(--verde-texto); vertical-align: 2px; }

/* ------------------------------------------------------------ ligas */
.pais { margin: 22px 0 10px; font-size: 1rem; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.pais .bandera { font-size: 1.35rem; line-height: 1; }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.liga {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.liga:hover { border-color: var(--azul); box-shadow: var(--sombra-alta); }
.liga-txt { flex: 1; min-width: 0; }
.liga-nombre { font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.liga-linea { color: var(--suave); font-size: .86rem; margin-top: 3px; }
.liga-linea b { color: var(--texto); font-weight: 650; }
.liga .flecha-der { color: var(--tenue); font-size: 1.3rem; }
.liga-apagada { display: flex; flex-wrap: wrap; gap: 8px; }
.liga-apagada span { background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 12px; font-size: .86rem; color: var(--suave); }
.barra-acierto { height: 6px; border-radius: 99px; background: var(--rojo-suave); overflow: hidden; margin-top: 8px; }
.barra-acierto i { display: block; height: 100%; background: var(--verde); border-radius: 99px; }

/* ------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; line-height: 1.6; padding: 1px 9px;
  border-radius: 999px; background: var(--azul-suave); color: var(--azul-oscuro); white-space: nowrap; font-weight: 600;
}
.chip.alta { background: var(--verde-suave); color: var(--verde-texto); }
.chip.media { background: var(--ambar-suave); color: var(--ambar-texto); }
.chip.baja { background: var(--rojo-suave); color: var(--rojo-texto); }
.chip.neutro { background: var(--gris-suave); color: var(--suave); }
.chip.verde { background: var(--verde-suave); color: var(--verde-texto); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------ cabecera de liga */
.cab-liga { display: flex; gap: 14px; align-items: center; margin: 2px 0 10px; }
.cab-liga .bandera-grande { font-size: 2.4rem; line-height: 1; }
.cab-liga h1 { font-size: 1.45rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.indice {
  position: sticky; top: 57px; z-index: 10; margin: 14px -16px 0; padding: 8px 16px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(var(--fondo) 80%, rgba(243, 247, 251, 0));
}
.indice::-webkit-scrollbar { display: none; }
.indice a {
  flex: none; text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 12px;
}
.indice a:hover { border-color: var(--azul); color: var(--azul-oscuro); }
section[id], details[id] { scroll-margin-top: 118px; }

/* ------------------------------------------------------------ picks */
.grid-picks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pick {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; box-shadow: var(--sombra); transition: border-color .15s, box-shadow .15s;
}
.pick-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.pick-dia { font-size: .78rem; font-weight: 700; color: var(--azul-oscuro); }
.pick-liga { font-size: .8rem; font-weight: 700; color: var(--texto); display: flex; gap: 6px; align-items: center; }
.pick-liga a { color: inherit; text-decoration: none; }
.pick-liga a:hover { color: var(--azul); }
.pick-cuerpo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pick-cuerpo .mercado { font-weight: 750; font-size: 1.02rem; line-height: 1.3; margin: 0; }
.pick-cuerpo .partido { color: var(--suave); font-size: .9rem; margin: 3px 0 0; }
.precio {
  flex: none; text-align: center; background: var(--azul-suave); color: var(--azul-oscuro);
  border-radius: 12px; padding: 6px 10px 5px; min-width: 78px;
}
.precio b { display: block; font-size: 1.22rem; line-height: 1.1; font-variant-numeric: tabular-nums; font-weight: 800; }
.precio small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.origen { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.persona { display: flex; align-items: center; gap: 8px; font-weight: 750; }
.persona .emoji { font-size: 1.2rem; }
.criterio { color: var(--suave); font-size: .84rem; margin: 0; }
.nota-pick { color: var(--suave); font-size: .82rem; margin: 0; background: var(--gris-suave); border-radius: 8px; padding: 6px 10px; }

.sello {
  display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800;
  color: var(--verde-texto); background: var(--verde-suave); border-radius: 999px; padding: 2px 9px;
}
.pick.es-escogido { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra); }
.pick .sello { display: none; }
.pick.es-escogido .sello { display: inline-flex; }

.btn-escoger {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  border: 1.5px solid var(--verde); background: var(--superficie); color: var(--verde-texto);
  border-radius: 12px; padding: 9px 12px; font-weight: 750; cursor: pointer; transition: background .15s, color .15s;
}
.btn-escoger:hover { background: var(--verde-suave); }
.btn-escoger.mio { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-escoger.mio:hover { background: var(--verde-oscuro); }
.btn-escoger:disabled, .btn-mini:disabled { border-color: var(--borde); color: var(--tenue); background: var(--gris-suave); cursor: not-allowed; }

/* resultado auditado */
.pick.r-acierto { border-left: 5px solid var(--verde); }
.pick.r-fallo { border-left: 5px solid var(--rojo); }
.pick.r-anulado, .pick.r-no_comprobable { border-left: 5px solid var(--borde-fuerte); }
.pick.r-pendiente { border-left: 5px solid var(--azul); }
.pick.es-escogido.r-fallo { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo), var(--sombra); }
.pick.es-escogido.r-anulado, .pick.es-escogido.r-no_comprobable { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.pick.es-escogido.r-pendiente { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul), var(--sombra); }
.resultado { display: flex; gap: 8px; align-items: baseline; font-size: .86rem; border-radius: 10px; padding: 7px 10px; }
.resultado b { white-space: nowrap; }
.resultado.acierto { background: var(--verde-suave); color: var(--verde-texto); }
.resultado.fallo { background: var(--rojo-suave); color: var(--rojo-texto); }
.resultado.anulado, .resultado.no_comprobable { background: var(--gris-suave); color: var(--suave); }
.resultado.pendiente { background: var(--azul-suave); color: var(--azul-oscuro); }
.resultado span { color: var(--suave); }

/* ------------------------------------------------------------ desplegables y listas */
details.caja {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  margin-bottom: 10px; box-shadow: var(--sombra);
}
details.caja > summary {
  cursor: pointer; padding: 13px 16px; font-weight: 700; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
details.caja > summary::-webkit-details-marker { display: none; }
details.caja > summary::after { content: "+"; color: var(--suave); font-weight: 400; font-size: 1.3rem; line-height: 1; margin-left: 4px; }
details.caja[open] > summary::after { content: "−"; }
details.caja > summary .emoji { font-size: 1.15rem; }
details.caja > summary .cuenta { color: var(--tenue); font-weight: 600; font-size: .84rem; margin-left: auto; white-space: nowrap; }
.cuerpo { padding: 0 16px 14px; }

.lista { list-style: none; margin: 0; padding: 0; }
.fila {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--borde);
}
.fila .m { font-weight: 650; }
.fila .pp { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--azul-oscuro); text-align: right; }
.fila .pt { grid-column: 1 / -1; color: var(--suave); font-size: .84rem; }
.fila-fin { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fila .sello { display: none; }
.fila.es-escogido .sello { display: inline-flex; }
.fila.es-escogido .m { color: var(--verde-texto); }
.btn-mini {
  width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--verde); background: var(--superficie);
  color: var(--verde-texto); font-weight: 800; font-size: 1.05rem; cursor: pointer; line-height: 1;
}
.btn-mini.mio { background: var(--verde); color: #fff; }
.fila.r-acierto .m::before { content: "✅ "; }
.fila.r-fallo .m::before { content: "❌ "; }
.fila.r-anulado .m::before, .fila.r-no_comprobable .m::before { content: "➖ "; }
.fila .det { grid-column: 1 / -1; font-size: .8rem; color: var(--suave); }
.fila.r-fallo .det { color: var(--rojo-texto); }

/* ------------------------------------------------------------ dias */
.dia-cab {
  display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-weight: 750; font-size: 1rem;
}
.dia-cab .etq { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: var(--azul); color: #fff; }
.dia-cab .cuenta { color: var(--tenue); font-weight: 600; font-size: .85rem; margin-left: auto; }

.conmutador { display: inline-flex; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 3px; gap: 2px; box-shadow: var(--sombra); }
.conmutador a { text-decoration: none; color: var(--suave); font-weight: 650; font-size: .88rem; padding: 6px 12px; border-radius: 9px; }
.conmutador a[aria-current="true"] { background: var(--azul); color: #fff; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; margin: 12px 0 0; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros a {
  flex: none; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-size: .85rem; font-weight: 600;
  color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 5px 12px;
}
.filtros a[aria-current="true"] { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; }
.herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

/* ------------------------------------------------------------ marcadores */
.marcador {
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 8px;
}
@media (min-width: 720px) { .marcador { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dato-caja {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px; box-shadow: var(--sombra);
}
.dato-caja small { display: block; color: var(--suave); font-size: .78rem; font-weight: 650; }
.dato-caja b { display: block; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; font-weight: 800; }
.dato-caja.verde b { color: var(--verde-texto); }
.dato-caja.rojo b { color: var(--rojo-texto); }
.dato-caja.azul b { color: var(--azul-oscuro); }
.tira { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--gris-suave); margin: 4px 0 6px; }
.tira i { display: block; height: 100%; }
.tira .t-ok { background: var(--verde); }
.tira .t-ko { background: var(--rojo); }
.tira .t-nulo { background: var(--borde-fuerte); }
.tira .t-pend { background: #9cc6e6; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--suave); font-size: .82rem; }

/* ------------------------------------------------------------ fichas */
.x12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.x12 div { background: var(--gris-suave); border-radius: 10px; padding: 8px 6px; text-align: center; font-size: .8rem; color: var(--suave); }
.x12 b { display: block; font-size: 1.05rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 16px; margin-bottom: 12px; font-size: .9rem; }
.datos span { color: var(--suave); }
.datos b { font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px; border-top: 1px solid var(--borde); white-space: nowrap; }
th { color: var(--suave); font-weight: 650; font-size: .8rem; }
td.num, th.num { text-align: right; }
tr.total th, tr.total td { font-weight: 800; color: var(--texto); border-top: 2px solid var(--borde-fuerte); }
.tabla-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px 12px; box-shadow: var(--sombra); }
.tabla-caja tr:first-child th { border-top: 0; }

/* ------------------------------------------------------------ avisos, estados, botones */
.nota { color: var(--suave); font-size: .88rem; background: var(--azul-suave); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.nota.verde { background: var(--verde-suave); color: var(--verde-texto); }
.vacio {
  background: var(--superficie); border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio);
  padding: 22px 18px; color: var(--suave); text-align: center;
}
.vacio .emoji { display: block; font-size: 1.8rem; margin-bottom: 4px; }
.boton {
  display: inline-flex; align-items: center; gap: 8px; background: var(--azul); color: #fff; padding: 10px 16px;
  border: 0; border-radius: 12px; text-decoration: none; font-weight: 700; cursor: pointer;
}
.boton:hover { background: var(--azul-hover); }
.boton.secundario { background: var(--superficie); color: var(--azul-oscuro); border: 1px solid var(--borde-fuerte); }
.boton.secundario:hover { background: var(--azul-suave); }
.boton.verde { background: var(--verde-oscuro); }
.error { color: var(--rojo-texto); }

.aviso {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
  bottom: calc(var(--nav-movil) + 14px + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px;
  background: var(--texto); color: #fff; border-radius: 14px; padding: 11px 14px; box-shadow: var(--sombra-alta);
  font-size: .9rem; font-weight: 600;
}
.aviso[hidden] { display: none; }
.aviso a { color: #a8e59a; font-weight: 800; white-space: nowrap; }
@media (min-width: 980px) { .aviso { bottom: 24px; } }

.dialogo {
  border: 0; border-radius: 20px; padding: 0; width: min(480px, calc(100% - 32px)); box-shadow: var(--sombra-alta);
  color: var(--texto);
}
.dialogo::backdrop { background: rgba(14, 26, 43, .45); }
.dialogo form { padding: 20px; }
.dialogo h2 { margin: 0 0 8px; }
.dialogo p { color: var(--suave); font-size: .92rem; margin: 0 0 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 650; font-size: .9rem; }
.campo input { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--borde-fuerte); border-radius: 12px; }
.ayuda { margin: 12px 0; font-size: .88rem; color: var(--suave); }
.ayuda summary { cursor: pointer; color: var(--azul); font-weight: 650; }
.ayuda ol { padding-left: 20px; margin: 8px 0 0; }
.ayuda li { margin-bottom: 4px; }
.dlg-error { color: var(--rojo-texto) !important; font-weight: 600; }
.dlg-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ------------------------------------------------------------ copia de prueba */
.franja-prueba {
  background: var(--ambar-suave); color: var(--ambar-texto); border-bottom: 1px solid #f1dfa6;
  text-align: center; font-size: .84rem; padding: 7px 16px; line-height: 1.4;
}
.franja-prueba a { color: inherit; font-weight: 700; }

/* ------------------------------------------------------------ seleccionadores */
.por {
  display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; line-height: 1.5;
  color: var(--c); background: #fff; border: 1px solid var(--c); border-radius: 999px; padding: 0 7px; margin-left: 3px;
  white-space: nowrap; letter-spacing: .01em;
}
.por::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.sello .por { margin-left: 2px; }
.fila .sello { font-size: .7rem; }
.editor-barra .por { font-size: .78rem; }
.filtros a .por { margin-left: 0; }
.dlg-nota { font-size: .84rem !important; }

.podio { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta-sel {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-top: 4px solid var(--c);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.sel-cab { display: flex; align-items: center; gap: 8px; }
.sel-cab .medalla { font-size: 1.6rem; line-height: 1; }
.sel-cab .por { font-size: .95rem; padding: 1px 10px; margin-left: 0; }
.sel-record { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sel-record span {
  display: flex; flex-direction: column; align-items: center; background: var(--gris-suave); border-radius: 12px;
  padding: 8px 4px; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.sel-record small { font-size: .7rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.sel-record .buenas { color: var(--verde-texto); background: var(--verde-suave); }
.sel-record .malas { color: var(--rojo-texto); background: var(--rojo-suave); }
.sel-record .balance { color: var(--azul-oscuro); background: var(--azul-suave); }
.sel-datos { margin: 0; color: var(--suave); font-size: .86rem; }
.sel-datos b { color: var(--texto); }
.tarjeta-sel .migas { margin: 4px 0 0; }
th .por { margin-left: 0; }

/* ------------------------------------------------------------ seleccion del dia (Green Zone) */
.editor-barra .gz-enlace {
  text-decoration: none; font-weight: 750; color: var(--verde-texto); background: var(--verde-suave);
  border: 1px solid #cfe9c7; border-radius: 999px; padding: 2px 11px;
}
.editor-barra .gz-enlace:hover { background: #dcf1d5; }
.gz-titulo .gz-avatar { flex: none; width: 46px; height: auto; filter: drop-shadow(0 4px 8px rgba(14, 40, 72, .18)); }
.gz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 22px; }
@media (min-width: 980px) { .gz { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; } }
.gz-col > h2:first-child { margin-top: 8px; }
.gz-panel {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 2px 16px 18px;
  box-shadow: var(--sombra); scroll-margin-top: 110px;
}
.gz-panel h2:first-child { margin-top: 16px; }
.gz-panel h3 { margin: 18px 0 8px; font-size: .92rem; color: var(--suave); }

.filtros button {
  flex: none; display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; font-weight: 600; cursor: pointer;
  color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 5px 12px;
}
.filtros button[aria-current="true"] { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; }
.gz-dias { margin: 0 0 10px; }

.gz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 700px) and (max-width: 979px) { .gz-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gz-item {
  width: 100%; height: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--sombra); transition: border-color .15s, box-shadow .15s, background .15s;
}
.gz-item:hover { border-color: var(--borde-fuerte); }
.gz-item[aria-pressed="true"] { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra); background: #fbfef9; }
.gz-check {
  flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; border: 2px solid var(--borde-fuerte);
  display: grid; place-items: center; color: transparent; font-weight: 900; font-size: .85rem; transition: background .15s;
}
.gz-item[aria-pressed="true"] .gz-check { background: var(--verde); border-color: var(--verde); color: #fff; }
.gz-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gz-item-txt b { font-weight: 750; line-height: 1.3; }
.gz-item-txt small { color: var(--suave); font-size: .82rem; line-height: 1.4; }
.gz-item-por { margin-top: 3px; }
.gz-item-por .por:first-child { margin-left: 0; }

.conmutador button {
  border: 0; background: none; cursor: pointer; color: var(--suave); font-weight: 650; font-size: .9rem; padding: 7px 14px; border-radius: 9px;
}
.conmutador button[aria-pressed="true"] { background: var(--azul); color: #fff; }
.gz-tipo { display: flex; margin: 0 0 6px; }
.gz-tipo button { flex: 1; }

.gz-patas { list-style: none; margin: 0; padding: 0; }
.gz-pata { border-top: 1px solid var(--borde); padding: 12px 0; }
.gz-pata:first-child { border-top: 0; }
.gz-pata-cab { display: flex; gap: 10px; align-items: flex-start; }
.gz-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--verde-suave); color: var(--verde-texto);
  font-weight: 800; font-size: .82rem; display: grid; place-items: center;
}
.gz-pata-txt { flex: 1; min-width: 0; }
.gz-pata-txt b { display: block; line-height: 1.3; }
.gz-pata-txt small { color: var(--suave); font-size: .8rem; }
.gz-quitar {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--gris-suave); color: var(--suave);
  cursor: pointer; font-size: .9rem;
}
.gz-quitar:hover { background: var(--rojo-suave); color: var(--rojo-texto); }
.gz-pata-datos { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; }
.gz-campo { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--suave); }
.gz-caja {
  display: inline-flex; align-items: stretch; border: 1px solid var(--borde-fuerte); border-radius: 12px; overflow: hidden; background: #fff;
}
.gz-caja:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18, 121, 187, .16); }
.gz-caja input {
  width: 96px; border: 0; outline: none; font: inherit; font-size: 16px; font-weight: 750; color: var(--texto);
  padding: 8px 10px; font-variant-numeric: tabular-nums; background: transparent;
}
.gz-caja input::placeholder { color: #b3bfcc; font-weight: 500; }
.gz-caja i { font-style: normal; display: grid; place-items: center; padding-left: 12px; color: var(--suave); font-weight: 750; }
.gz-signo {
  width: 40px; border: 0; border-right: 1px solid var(--borde); background: var(--azul-suave); color: var(--azul-oscuro);
  font-weight: 900; font-size: 1.15rem; cursor: pointer;
}
.gz-justo { color: var(--tenue); font-size: .78rem; }
.gz-justo.valor { color: var(--verde-texto); font-weight: 700; }
.gz-pata-gana { font-size: .84rem; font-weight: 750; color: var(--verde-texto); }
.gz-aviso { margin: 8px 0 0; font-size: .8rem; color: var(--ambar-texto); background: var(--ambar-suave); border-radius: 8px; padding: 5px 9px; }

.gz-totales { display: grid; gap: 10px; background: var(--fondo); border-radius: 16px; padding: 12px 14px; margin-top: 6px; }
.gz-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.gz-fila > span:first-child { font-weight: 700; }
.gz-fin { display: inline-flex; align-items: center; gap: 8px; }
.gz-fin > b { font-size: 1.25rem; font-weight: 850; color: var(--azul-oscuro); font-variant-numeric: tabular-nums; }
.gz-nota { color: var(--tenue); font-size: .78rem; margin-top: -6px; }
.gz-gana {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0 10px;
  border-top: 1px dashed var(--borde-fuerte); padding-top: 10px;
}
.gz-gana > span { font-weight: 700; }
.gz-gana > span small { color: var(--tenue); font-weight: 600; }
.gz-gana b { font-size: 1.7rem; font-weight: 900; color: var(--verde-texto); font-variant-numeric: tabular-nums; line-height: 1.2; }
.gz-gana > small { flex-basis: 100%; text-align: right; color: var(--suave); font-size: .8rem; }
.enlace-btn { background: none; border: 0; padding: 4px 2px; color: var(--azul); font-weight: 700; cursor: pointer; font-size: .86rem; }

.gz-niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gz-niveles button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; cursor: pointer;
  border: 1.5px solid var(--borde-fuerte); background: #fff; border-radius: 14px; font-weight: 800; font-size: .84rem; color: var(--suave);
}
.gz-niveles .e { font-size: 1.45rem; line-height: 1.2; }
.gz-niveles button[aria-pressed="true"] { border-color: transparent; color: #fff; box-shadow: var(--sombra-alta); }
.gz-niveles .n-fuerte[aria-pressed="true"] { background: var(--verde); }
.gz-niveles .n-superfuerte[aria-pressed="true"] { background: var(--verde-oscuro); }
.gz-niveles .n-ultrafuerte[aria-pressed="true"] { background: linear-gradient(90deg, var(--azul-oscuro), var(--verde)); }

.gz-vista { display: grid; place-items: center; background: var(--fondo-2); border-radius: 16px; padding: 12px; min-height: 120px; }
.gz-vista img { display: block; width: 100%; max-width: 380px; border-radius: 12px; box-shadow: var(--sombra-alta); transition: opacity .2s; }
.gz-vista img:not([src]) { display: none; }
.gz-vista.preparando img { opacity: .55; }
.gz-compartir { width: 100%; justify-content: center; margin-top: 12px; padding: 14px 18px; font-size: 1.05rem; background: var(--verde-oscuro); }
.gz-compartir:hover { background: #267a2c; }
.gz-mas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gz-mas .boton { flex: 1 1 auto; justify-content: center; padding: 9px 12px; font-size: .86rem; }

.gz-flotante {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 25;
  bottom: calc(var(--nav-movil) + 12px + env(safe-area-inset-bottom));
  border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; white-space: nowrap;
  background: var(--verde-oscuro); color: #fff; font-weight: 750; font-size: .9rem; box-shadow: var(--sombra-alta);
}
.gz-flotante[hidden], .gz-flotante.oculto { display: none; }
@media (min-width: 980px) { .gz-flotante { display: none; } }

/* seleccion propia (fuera del analisis) */
.gz-propia-btn { width: 100%; justify-content: center; }
.gz-propia-nota { margin: 6px 2px 4px; }
.gz-col h3 { margin: 18px 0 8px; font-size: .95rem; }
.gz-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 10px; }
.gz-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .76rem; font-weight: 700; color: var(--suave); }
.gz-form .ancho { grid-column: 1 / -1; }
.gz-form input, .gz-form select, .gz-extra textarea {
  width: 100%; min-width: 0; font: inherit; font-size: 16px; color: var(--texto); background: #fff;
  border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 8px 10px;
}
.gz-form input:focus, .gz-form select:focus, .gz-extra textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18, 121, 187, .16); }
html.banderas-fuente .gz-form select { font-family: "Banderas Picksin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Segoe UI Emoji"; }
.gz-extra { margin-top: 10px; font-size: .84rem; }
.gz-extra summary { cursor: pointer; color: var(--azul); font-weight: 700; padding: 2px 0; }
.gz-extra textarea { display: block; margin: 8px 0; min-height: 76px; resize: vertical; line-height: 1.4; }
.gz-extra .gz-caja input { width: 72px; }
.gz-caja .gz-pct { padding: 0 12px 0 0; }

/* pestanas de Green Zone, historial y reporte */
.gz-tabs { display: flex; gap: 6px; margin: 0 0 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 4px; box-shadow: var(--sombra); }
.gz-tabs a { flex: 1; text-align: center; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--suave); padding: 8px 6px; border-radius: 10px; }
.gz-tabs a[aria-current="page"] { background: var(--verde-oscuro); color: #fff; }

.hs-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hs {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--superficie);
  border: 1px solid var(--borde); border-left: 5px solid var(--azul); border-radius: var(--radio); box-shadow: var(--sombra);
}
.hs.r-ganada { border-left-color: var(--verde); }
.hs.r-perdida { border-left-color: var(--rojo); }
.hs.r-nula { border-left-color: var(--borde-fuerte); }
.hs-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hs-cab b { font-size: .92rem; margin-right: 2px; }
.hs-cab .por { margin-left: 0; }
.chip.n-fuerte { background: var(--verde-suave); color: var(--verde-texto); }
.chip.n-superfuerte { background: #d9f0d3; color: #1d6b22; }
.chip.n-ultrafuerte { background: linear-gradient(90deg, var(--azul-oscuro), var(--verde)); color: #fff; }
.hs-res { font-weight: 850; font-size: 1.05rem; }
.hs.r-ganada .hs-res { color: var(--verde-texto); }
.hs.r-perdida .hs-res { color: var(--rojo-texto); }
.hs.r-pendiente .hs-res { color: var(--azul-oscuro); }
.hs-res small { font-weight: 600; font-size: .75rem; color: var(--suave); }
.hs-patas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hs-patas li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
.hs-m { font-weight: 700; line-height: 1.3; }
.hs-momio { font-weight: 800; color: var(--azul-oscuro); font-variant-numeric: tabular-nums; }
.hs-patas small { grid-column: 1 / -1; color: var(--suave); font-size: .8rem; }
.hs-tot { font-size: .86rem; color: var(--suave); }
.hs-tot b { color: var(--texto); }
.hs-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.hs-acciones button {
  border: 1.5px solid var(--borde-fuerte); background: #fff; border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: .82rem; cursor: pointer;
}
.hs-acciones button.r-ganada[aria-pressed="true"] { background: var(--verde-suave); border-color: var(--verde); color: var(--verde-texto); }
.hs-acciones button.r-perdida[aria-pressed="true"] { background: var(--rojo-suave); border-color: var(--rojo); color: var(--rojo-texto); }
.hs-acciones button.r-nula[aria-pressed="true"] { background: var(--gris-suave); border-color: var(--suave); }
.hs-acciones .hs-borrar { margin-left: auto; }
.hs-acciones button:disabled { opacity: .5; cursor: wait; }
.rep-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 6px; }
.rep-form input { font: inherit; font-size: 16px; border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 7px 10px; background: #fff; color: var(--texto); }
.rep-atajos { margin: 6px 0 14px; }
.rep-vista img { max-width: 520px; }
.rep-modos { display: flex; margin: 0 0 14px; }
.rep-modos a { flex: 1; text-align: center; }

/* historial en lista desplegable */
.hs-mes { margin-top: 24px; }
.hs-lista { display: grid; gap: 8px; }
.hs-item { background: var(--superficie); border: 1px solid var(--borde); border-left: 6px solid var(--azul); border-radius: 14px; box-shadow: var(--sombra); }
.hs-item.r-ganada { border-left-color: var(--verde); }
.hs-item.r-perdida { border-left-color: var(--rojo); }
.hs-item.r-nula { border-left-color: #9aa5b1; }
.hs-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 750;
}
.hs-item > summary::-webkit-details-marker { display: none; }
.hs-item > summary::after { content: "▾"; color: var(--tenue); }
.hs-item[open] > summary::after { content: "▴"; }
.hs-fecha small { color: var(--suave); font-weight: 600; }
.hs-chip { margin-left: auto; font-size: .82rem; font-weight: 800; border-radius: 999px; padding: 3px 12px; background: var(--azul-suave); color: var(--azul-oscuro); }
.hs-item.r-ganada .hs-chip { background: var(--verde-suave); color: var(--verde-texto); }
.hs-item.r-perdida .hs-chip { background: var(--rojo-suave); color: var(--rojo-texto); }
.hs-item.r-nula .hs-chip { background: var(--gris-suave); color: var(--suave); }
.hs-item .hs { border: 0; border-top: 1px solid var(--borde); border-radius: 0 0 14px 14px; box-shadow: none; }
.hs-item .hs-res { display: none; }

/* tablas del reporte */
.rep-tabla td { vertical-align: top; }
.rep-jugada { white-space: normal !important; min-width: 200px; }
.rep-tabla tr.r-ganada td.rep-dia { box-shadow: inset 4px 0 0 var(--verde); }
.rep-tabla tr.r-perdida td.rep-dia { box-shadow: inset 4px 0 0 var(--rojo); }
.rep-tabla tr.r-nula td.rep-dia { box-shadow: inset 4px 0 0 #9aa5b1; }
.rep-tabla tr.r-pendiente td.rep-dia { box-shadow: inset 4px 0 0 var(--azul); }
.rep-jugada b, .rep-jugada span { display: block; line-height: 1.35; }
.rep-jugada span { font-size: .84rem; }
.rep-res { font-weight: 800; }
tr.r-ganada .rep-res { color: var(--verde-texto); }
tr.r-perdida .rep-res { color: var(--rojo-texto); }
tr.r-nula .rep-res { color: var(--suave); }
tr.r-pendiente .rep-res { color: var(--azul-oscuro); }
td.neto { font-weight: 800; }
td.neto.mas { color: var(--verde-texto); }
td.neto.menos { color: var(--rojo-texto); }
.rep-crear { width: 100%; justify-content: center; }


/* ------------------------------------------------------------ rediseno por dia (01/10/2026) */
/* renglon compacto de un pick */
.lista.tabla-caja .fila:first-child { border-top: 0; }
.renglon .pt .chip { margin: 3px 4px 0 0; vertical-align: 1px; }
.renglon .pt .por { margin-left: 2px; }
.renglon .cuando { font-weight: 750; color: var(--azul-oscuro); }
.fila.sin-sello .sello { display: none !important; }
.fila.r-pendiente .m::before { content: "⏳ "; }
.fila.r-por_auditar .m::before { content: "🕓 "; }
.mas-abajo { margin-top: 20px; }
.linea-editor { margin: 10px 0 0; }

/* hoy */
.hoy-cab h1 { font-size: 1.4rem; }
.dias-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.dias-tabs a {
  display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--texto); line-height: 1.25;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 8px 4px; box-shadow: var(--sombra);
}
.dias-tabs a b { font-size: .98rem; }
.dias-tabs a span { font-size: .78rem; color: var(--suave); }
.dias-tabs a small { font-size: .72rem; color: var(--azul-oscuro); font-weight: 700; margin-top: 2px; }
.dias-tabs a[aria-current="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.dias-tabs a[aria-current="true"] span, .dias-tabs a[aria-current="true"] small { color: #e3f0fa; }
.pendientes {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 2px 14px 12px;
  margin: 14px 0 0; box-shadow: var(--sombra);
}
.pendientes h2 { margin: 10px 0 6px; }
.pendientes.con-alerta { border-color: #f1b4b4; box-shadow: 0 0 0 1px #f1b4b4, var(--sombra); }
.badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--rojo); color: #fff; font-size: .78rem; font-weight: 800;
}
.pend {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-top: 8px;
  border-radius: 12px; background: var(--gris-suave); color: var(--texto); text-decoration: none; font-size: .9rem;
}
.pend .ir { color: var(--azul); white-space: nowrap; font-size: .86rem; }
.pend.ok { background: var(--verde-suave); }
.pend.alerta { display: block; background: var(--rojo-suave); color: var(--rojo-texto); }
.pend.alerta > p { margin: 0 0 6px; }
.hs.pm { border-left-color: var(--rojo); padding: 10px 12px; margin-top: 8px; color: var(--texto); gap: 8px; }
.pm-txt b { display: block; line-height: 1.35; }
.pm-txt small { display: block; color: var(--suave); font-size: .8rem; margin-top: 2px; }
.hs.pm .hs-acciones button { flex: 1; padding: 9px 8px; font-size: .86rem; }
.hs-item.r-marcar { border-left-color: var(--rojo); }
.hs-item.r-marcar .hs-chip { background: var(--rojo); color: #fff; }
.hoy-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.hoy-filtros .filtros { margin: 0; flex: 1 1 260px; }
/* top de tops (07/10/2026): el lugar de cada pick y el conmutador de tres botones en celular */
.chip.top-lugar { background: var(--verde); color: #fff; }
/* top de tops con momios de Playdoit (regla R5, 09/10/2026): solo en modo editor */
.chip.momio { background: var(--azul-suave); color: var(--azul-oscuro); font-weight: 700; }
.chip.oportunidad { background: var(--ambar-suave); color: var(--ambar-texto); font-weight: 700; }
/* arbitro y avisos del partido (12/10/2026) */
.chip.alerta { background: var(--rojo-suave); color: var(--rojo-texto); font-weight: 700; }
.aviso-partido { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 6px; font-size: .8rem; color: var(--suave); }
.top-explica { margin: 0 0 10px; }
@media (max-width: 520px) {
  .hoy-filtros .conmutador { display: flex; width: 100%; }
  .hoy-filtros .conmutador a { flex: 1 1 0; text-align: center; padding: 6px 4px; font-size: .8rem; line-height: 1.25; }
}
.partidos-hoy { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
@media (max-width: 400px) { .partidos-hoy { grid-template-columns: minmax(0, 1fr); } }
.partido-hoy {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px 4px; box-shadow: var(--sombra);
}
.partido-hoy.empezado { background: #fafbfd; }
.partido-hoy.empezado .ph-partido { color: var(--suave); }
.ph-cab { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: .8rem; }
.ph-hora { font-weight: 800; color: var(--azul-oscuro); }
.ph-liga { color: var(--suave); text-decoration: none; font-weight: 650; }
.ph-liga:hover { color: var(--azul); }
.ph-cab .sello { margin-left: auto; }
.ph-cab .sello + .chip { margin-left: 0; }
.ph-cab > .chip:last-child:not(.sello + .chip) { margin-left: auto; }
.ph-partido { margin: 4px 0 0; font-size: 1rem; line-height: 1.3; }
.ph-mas > summary { cursor: pointer; color: var(--azul); font-weight: 650; font-size: .85rem; padding: 8px 0; list-style: none; }
.ph-mas > summary::-webkit-details-marker { display: none; }
details.caja.ph-mas { margin-top: 10px; }
details.caja.ph-mas > summary { padding: 12px 16px; }

/* analisis: deporte y analisis / auditoria */
.analisis-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.deportes { display: flex; gap: 6px; flex-wrap: wrap; }
.deportes a, .deportes .pronto {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; font-size: .88rem; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
.deportes a[aria-current="true"] { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; }
.deportes .pronto { color: var(--suave); border-style: dashed; }
.deportes .pronto[aria-current="true"] { background: var(--gris-suave); border-color: var(--suave); color: var(--texto); }
.proximamente b { display: block; font-size: 1.15rem; color: var(--texto); }
.proximamente p { margin: 6px auto 0; max-width: 460px; }

/* seleccion del dia: primero guardar, luego compartir */
.gz-pasos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: paso; }
.gz-pasos li { display: flex; align-items: center; gap: 10px; counter-increment: paso; }
.gz-pasos li::before {
  content: counter(paso); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; background: var(--azul-suave); color: var(--azul-oscuro);
}
.gz-pasos .boton { flex: 1; justify-content: center; margin: 0; padding: 13px 16px; font-size: 1.02rem; }
.gz-guardar { background: var(--azul); }
.gz-guardar.hecho { background: var(--verde-suave); color: var(--verde-texto); cursor: default; }
.gz-compartir:disabled, .gz-tras:disabled {
  background: var(--gris-suave) !important; color: var(--tenue) !important; border-color: var(--borde) !important; cursor: not-allowed;
}
.gz-candado { font-size: .84rem; color: var(--ambar-texto); background: var(--ambar-suave); border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; }
.gz-candado.listo { color: var(--verde-texto); background: var(--verde-suave); }
.gz-otro { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; font-size: .88rem; color: var(--suave); }
.gz-otro input { font: inherit; font-size: 16px; border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 6px 10px; margin-left: 6px; background: #fff; }
.gz-otro .boton { padding: 7px 12px; }
.renglon .pt .sello { margin: 2px 6px 0 0; vertical-align: 1px; }
.herramientas { flex-wrap: nowrap; }
.herramientas .sub { margin: 0; min-width: 0; }
.herramientas .conmutador { flex: none; }
.herramientas .conmutador a { padding: 6px 10px; }

/* ------------------------------------------------------------ inicio: lema, trabajo y entrada (01/10/2026) */
.res-tabs a { position: relative; }
.tab-badge { position: static; display: inline-block; margin-left: 5px; box-shadow: none; vertical-align: 1px; }
.lema-agua {
  position: absolute; inset: -40% -30%; transform: rotate(-16deg); display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; user-select: none; overflow: hidden;
}
.lema-agua div { white-space: nowrap; font-weight: 900; font-size: 34px; letter-spacing: .02em; color: rgba(15, 89, 137, .075); line-height: 1.15; }
.lema-agua div:nth-child(even) { margin-left: -180px; }
.lema-agua b { color: rgba(46, 143, 53, .15); }
@media (prefers-reduced-motion: no-preference) {
  .lema-agua div { animation: agua 38s linear infinite; }
  .lema-agua div:nth-child(even) { animation-direction: reverse; }
}
@keyframes agua { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-lema {
  position: relative; overflow: hidden; text-align: center; padding: 26px 16px 22px; margin: 0 0 6px;
  background: linear-gradient(180deg, #ffffff 0%, var(--azul-suave) 100%); border: 1px solid var(--borde); border-radius: 24px; box-shadow: var(--sombra);
}
.hero-figuras { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.hero-logo { height: 150px; width: auto; filter: drop-shadow(0 6px 14px rgba(15, 89, 137, .2)); }
.hero-avatar { height: 128px; width: auto; image-rendering: pixelated; margin-bottom: 4px; filter: drop-shadow(0 4px 8px rgba(14, 40, 72, .25)); }
.hero-lema-txt { position: relative; margin: 14px 0 0; font-weight: 900; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.01em; color: var(--azul-oscuro); }
.hero-lema-txt b { display: block; color: var(--verde-oscuro); font-size: 2.6rem; }
.hero-frase { position: relative; margin: 10px auto 14px; max-width: 420px; color: var(--suave); font-style: italic; font-size: 1.02rem; }
.hero-btn { position: relative; }
.trabajo { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .trabajo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trabajo-dato {
  display: flex; flex-direction: column; gap: 2px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px; box-shadow: var(--sombra);
}
.trabajo-dato .emoji { font-size: 1.2rem; }
.trabajo-dato b { font-size: 1.55rem; font-weight: 850; line-height: 1.15; color: var(--azul-oscuro); font-variant-numeric: tabular-nums; }
.trabajo-dato small { color: var(--suave); font-size: .8rem; line-height: 1.3; }

/* la entrada de cada dia */
body.con-intro { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #eef5fb 60%, #e2eef8 100%); cursor: pointer; text-align: center; padding: 24px;
}
.intro.saliendo { animation: fuera .38s ease forwards; }
@keyframes fuera { to { opacity: 0; transform: scale(1.04); } }
.intro-agua { inset: -40% -60%; justify-content: center; }
.trabajo-dato:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) { .trabajo-dato:last-child:nth-child(odd) { grid-column: auto; } }
.intro-centro { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 420px; }
.intro-logo { height: 132px; width: auto; filter: drop-shadow(0 8px 18px rgba(15, 89, 137, .25)); }
.intro-avatar { position: relative; height: 118px; width: 90px; margin-top: 6px; }
.intro-avatar .pose { position: absolute; bottom: 0; left: 50%; height: 118px; width: auto; transform: translateX(-50%); image-rendering: pixelated; opacity: 0; }
.intro-lema { margin: 16px 0 0; font-weight: 900; line-height: 1.02; color: var(--azul-oscuro); }
.intro-lema .l1 { display: block; font-size: 2rem; letter-spacing: .01em; }
.intro-lema .l2 { display: block; font-size: 2.9rem; color: var(--verde-oscuro); }
.intro-frase { margin: 12px 0 0; color: var(--suave); font-style: italic; }
.intro-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; width: 100%; }
.intro-datos div { background: rgba(255, 255, 255, .85); border: 1px solid var(--borde); border-radius: 14px; padding: 8px 4px; }
.intro-datos b { display: block; font-size: 1.15rem; font-weight: 850; color: var(--azul-oscuro); font-variant-numeric: tabular-nums; }
.intro-datos small { display: block; font-size: .68rem; color: var(--suave); line-height: 1.2; }
.intro-dia { margin: 12px 0 0; font-size: .82rem; font-weight: 700; color: var(--verde-texto); }
.intro-entrar {
  position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  border: 0; border-radius: 999px; background: var(--verde-oscuro); color: #fff; font-weight: 800; font-size: 1.05rem; padding: 12px 34px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(46, 143, 53, .35);
}
@media (prefers-reduced-motion: no-preference) {     /* 5 s de animacion; luego queda quieta 5 s */
  .intro-logo { animation: logo .8s cubic-bezier(.2, 1.4, .4, 1) both .1s; }
  .intro-avatar { animation: subir .5s ease-out both .7s; }
  .intro-avatar .p1 { animation: pose 0s linear .7s forwards, quitar 0s linear 1.7s forwards; }
  .intro-avatar .p2 { animation: pose 0s linear 1.7s forwards, quitar 0s linear 2.6s forwards; }
  .intro-avatar .p3 { animation: pose 0s linear 2.6s forwards, salto .8s ease-out 2.6s both; }
  .intro-lema .l1 { animation: escribir .9s steps(13) both 1.3s; }
  .intro-lema .l2 { animation: sello .45s cubic-bezier(.3, 1.6, .5, 1) both 2.35s; }
  .intro-frase { animation: aparecer .6s ease both 3s; }
  .intro-datos { animation: aparecer .6s ease both 3.3s; }
  .intro-dia { animation: aparecer .5s ease both 4.2s; }
  .intro-entrar { animation: aparecer .4s ease both .3s; }
  .intro-agua div { animation-duration: 22s; }
}
@media (prefers-reduced-motion: reduce) { .intro-avatar .p3 { opacity: 1; } }
@keyframes logo { from { opacity: 0; transform: scale(.4) translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pose { to { opacity: 1; } }
@keyframes quitar { to { opacity: 0; } }
@keyframes salto { 0% { transform: translateX(-50%) translateY(0); } 35% { transform: translateX(-50%) translateY(-22px); } 65% { transform: translateX(-50%) translateY(0); } 80% { transform: translateX(-50%) translateY(-6px); } 100% { transform: translateX(-50%) translateY(0); } }
@keyframes escribir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sello { from { opacity: 0; transform: scale(2.3) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(-2deg); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ ajustes del 10/10/2026 */
/* analisis: desplegables con una linea de que traen adentro; rankings agrupados */
details.caja > summary .sum-txt { display: flex; flex-direction: column; min-width: 0; }
details.caja > summary .sum-txt small { font-weight: 500; font-size: .78rem; color: var(--suave); line-height: 1.3; margin-top: 2px; }
details.caja .grid-picks { margin-top: 2px; }
.sub-rk + .sub-rk { margin-top: 14px; }
.sub-rk h3 {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: .92rem; color: var(--azul-oscuro);
  padding-bottom: 6px; border-bottom: 2px solid var(--borde);
}
.sub-rk h3 .cuenta { margin-left: auto; color: var(--tenue); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.sub-rk .lista .fila:first-child { border-top: 0; }
/* resultados: cada pestana con su emoji y su nombre en un solo renglon, tambien en telefonos angostos */
.res-tabs { gap: 3px; padding: 3px; }
.res-tabs a { flex: 1 1 auto; white-space: nowrap; padding: 8px 4px; }
.res-tabs .tab-badge { position: absolute; top: -6px; right: -3px; margin: 0; }
@media (max-width: 440px) { .res-tabs a { font-size: .8rem; padding: 8px 2px; letter-spacing: -.01em; } }
@media (max-width: 370px) { .res-tabs a { font-size: .74rem; } }
/* hoy: "Por partido · Probabilidad · Top de tops" en un solo renglon */
@media (max-width: 520px) { .hoy-filtros .conmutador a { white-space: nowrap; flex: 1 1 auto; padding: 7px 3px; } }
@media (max-width: 370px) { .hoy-filtros .conmutador a { font-size: .74rem; } }
/* ------------------------------------------------------------ narrativa corta en cada partido (11/10/2026) */
.explica { margin: 2px 0 12px; line-height: 1.5; font-size: .92rem; }
.tendencia { background: var(--azul-suave); border-radius: 12px; padding: 8px 12px 6px; margin: 0 0 12px; }
.tendencia-cab { display: flex; align-items: center; gap: 8px; font-weight: 750; color: var(--azul-oscuro); font-size: .9rem; }
.tendencia .lista .fila:first-child { border-top: 0; }
.tendencia .criterio { margin: 2px 0 4px; font-size: .82rem; }
.consolidada table { font-size: .8rem; }
.consolidada th, .consolidada td { white-space: nowrap; vertical-align: top; text-align: center; }
.consolidada td b, .consolidada td small { display: block; }
.consolidada td small { color: var(--suave); font-size: .72rem; }
.consolidada .cons-partido { text-align: left; position: sticky; left: 0; background: var(--superficie); z-index: 1; box-shadow: 1px 0 0 var(--borde); }
.consolidada th:first-child { text-align: left; position: sticky; left: 0; background: var(--superficie); z-index: 2; }
.explica p { margin: 0 0 7px; }
.explica p:last-child { margin-bottom: 0; }
div.explica { margin: 2px 0 12px; }
/* el partido y su tendencia, cada uno en un renglon (11/10/2026) */
details.caja > summary .sum-txt { flex: 1 1 auto; }
.sum-uno { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .pt .chip.momio, .fila .pt .chip.oportunidad { margin-left: 2px; }
.sum-fila { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sum-fila .sum-uno { flex: 1 1 auto; min-width: 0; }
.sum-hora { flex: none; color: var(--tenue); font-weight: 600; font-size: .84rem; white-space: nowrap; }