/* ==========================================================================
   EL PORTAL DEL CLUB ES EL DESPACHO DEL MODO (`portal-despacho.js`)
   --------------------------------------------------------------------------
   Las piezas son las de `seleccion.css` —la tableta, los widgets, el correo,
   los pasos, el dock—. Acá va sólo lo del club: la vista general muestra la
   tableta y nada más, la grilla suma la tabla, y lo que esa hoja cambiaba en
   las otras vistas del Portal vuelve a como estaba.
   ========================================================================== */

/* Todas las vistas del Portal son la tableta: la general con sus widgets y
   Mensajes, Calendario y Programación como apps a pantalla completa
   (`portal-despacho.js`). Las columnas viejas quedan en la página, escondidas:
   son las que guardan el estado y las acciones. */
html.portal-ipad main.home { display: block; padding: 0; margin: 0; gap: 0; }
html.portal-ipad main.home > :not(.portal-despa) { display: none !important; }
html:not(.portal-ipad) .portal-despa { display: none; }
/* Sin franja, como el Despacho: manda la barra de la tableta. */
html.portal-ipad body:has(> main.home) > .franja-club { display: none; }
/* El chrome del club mide lo mismo que el del modo. */
.portal-despa { --alto-pantalla-sel: calc(100vh / var(--escala-sitio, 1) - 9.8rem - 18px); }

/* LA GRILLA DEL DESPACHO CON LA TABLA: tercera columna, debajo del partido. */
@media (min-width: 1101px) {
  .portal-despa .ipad__escritorio {
    grid-template-rows: auto minmax(0, 0.7fr) auto minmax(11rem, 1.3fr);
    grid-template-areas: 'perfil correo prensa' 'pasos correo prensa' 'pasos correo partido' 'pasos correo tabla';
  }
  .portal-despa .ipad__escritorio.pd--sin-tabla { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'perfil correo prensa' 'pasos correo prensa' 'pasos correo partido'; }
  /* El perfil y el partido miden lo suyo: no los aprieta la conferencia. */
  .portal-despa :is(.wid--perfil, .wid--partido) { min-height: min-content; }
}
@media (max-width: 1100px) {
  .portal-despa .ipad__escritorio { grid-template-areas: 'perfil' 'correo' 'pasos' 'prensa' 'partido' 'tabla'; }
}
.portal-despa .wid--tabla { grid-area: tabla; }
.portal-despa .wid__app--tabla { background: linear-gradient(180deg, #ffd166, #e0a21b); color: #111; }
.pd__amigos { all: unset; box-sizing: border-box; cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; color: rgb(255 255 255 / 0.8); background: rgb(255 255 255 / 0.08); }
.pd__amigos .i { width: 13px; height: 13px; }
@media (hover: hover) { .pd__amigos:hover { color: #fff; background: rgb(255 255 255 / 0.16); } }
.pd__amigos:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* El acceso a la vista Mensajes, en la cabecera del correo. */
.pd__abrir-app { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; color: rgb(255 255 255 / 0.75); background: rgb(255 255 255 / 0.07); }
@media (hover: hover) { .pd__abrir-app:hover { color: #fff; background: rgb(255 255 255 / 0.16); } }
.pd__abrir-app:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* La carta: firma, acciones y gestión, en la tinta del correo del modo. */
.portal-despa .mail__texto > p:first-child { margin-top: 0; }
.portal-despa .mail__texto .sub__note { color: rgb(255 255 255 / 0.6); font-size: var(--fs-sm); }
.portal-despa .mail__texto strong { color: #fff; }
.portal-despa .mail__texto .cfed strong { color: inherit; }
.pd__firma { margin: 4px 0 12px; font-size: var(--fs-sm); color: rgb(255 255 255 / 0.6); line-height: 1.5; }
.pd__firma b { color: rgb(255 255 255 / 0.9); }
.pd__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pd__gestion { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.08); }
.pd__gestion .mail__filtro { display: inline-flex; align-items: center; gap: 5px; background: rgb(255 255 255 / 0.07); }
.pd__gestion .mail__filtro .i { width: 13px; height: 13px; }
.portal-despa .mail__ops { margin: 12px 0; }
.portal-despa .lector__respondido { margin: 12px 0; padding: 12px 14px; border-radius: 14px; border: 0; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; }
.portal-despa .mail__leer > .mail__vacio { margin: auto; }
.portal-despa .mail__cuerpo .cfed { font-size: 15px; }

/* Los pendientes del club traen el porqué: en un renglón. */
.portal-despa .wid--pasos .despa__paso-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-despa .wid--pasos .despa__paso--sigue .despa__paso-txt small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* La prensa después de hablar: la sala y los titulares. */
.pd__prensa { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; }
.pd__sala { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; margin: 0 12px 10px; padding: 10px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, rgb(255 255 255 / 0.04)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.pd__sala .label { grid-column: 1 / -1; color: var(--accent); }
.pd__sala b { min-width: 0; color: #fff; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd__notas { list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 6px; }
.pd__notas li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.06); }
.pd__notas .label { color: rgb(255 255 255 / 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd__notas b { color: #fff; font-size: var(--fs-sm); line-height: 1.35; }
.portal-despa .wid--prensa .despa__ir { padding: 10px 12px 14px; }

/* La próxima fecha: escudos en vez de banderas, y tres botones que entran. */
.pd__escudo { object-fit: contain; flex: none; }
.portal-despa .despa__cruces li { grid-template-columns: 3.6rem auto minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.portal-despa .despa__cruces b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: var(--fs-sm); }
.portal-despa .despa__cruce--jugado { opacity: 0.7; }
.portal-despa .despa__cruce--jugado em { color: #fff; font-weight: 800; }
.portal-despa .despa__ir { flex-wrap: wrap; }

/* LA TABLA, como un widget: la grilla corta del modo, con escudos. */
.pd__tabla { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; margin: 0 12px; border-radius: 14px; background: rgb(255 255 255 / 0.04); }
.pd__tabla table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pd__tabla th { position: sticky; top: 0; z-index: 1; padding: 6px 8px; text-align: left; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); background: rgb(32 35 42); }
.pd__tabla td { padding: 5px 8px; color: rgb(255 255 255 / 0.85); border-top: 1px solid rgb(255 255 255 / 0.05); }
.pd__tabla .u-num { text-align: right; width: 1%; white-space: nowrap; }
.pd__tabla td:first-child { color: rgb(255 255 255 / 0.5); }
.pd__tabla b { color: #fff; }
.pd__club { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd__club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; }
.pd__pasa td:first-child { box-shadow: inset 3px 0 0 var(--good, #3eda7f); }
.pd__mia td { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #fff; font-weight: 700; }
.pd__corte { display: flex; align-items: center; gap: 6px; margin: 6px 16px 12px; font-size: var(--fs-xs); color: rgb(255 255 255 / 0.55); }
.pd__corte i { width: 3px; height: 12px; border-radius: 1px; background: var(--good, #3eda7f); }
.portal-despa .wid--tabla .pd__tabla:last-child { margin-bottom: 12px; }

@media (max-width: 1100px) {
  .pd__tabla { max-height: 22rem; }
  .portal-despa .pd__prensa { overflow: visible; }
}

/* LO QUE `seleccion.css` LE CAMBIABA A LAS OTRAS VISTAS DEL PORTAL. */
/* El día elegido del calendario es la grilla de `inicio.css`, no la columna
   del día de partido del modo. */
main.home .dia { display: grid; flex-direction: row; min-height: 76px; max-height: none; }
/* Las columnas que sólo agrupan tarjetas no llevan vidrio propio. */
@media (min-width: 761px) {
  html[data-fondo] main.home > section.col:not(.tarjeta) { background-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ==========================================================================
   LAS APPS DE LA TABLETA (Mensajes, Calendario, Programación)
   ========================================================================== */
.pd-ipad--app .ipad__pantalla { grid-template-columns: minmax(0, 1fr); }
.pd-app { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 18px; }
.pd-app__barra { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pd-app__inicio { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px 6px 10px; border-radius: 999px; flex: none;
  font-size: var(--fs-sm); font-weight: 700; color: #fff; text-decoration: none; background: rgb(18 21 27 / 0.6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.pd-app__tabs { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; min-width: 0; overflow-x: auto; scrollbar-width: none;
  background: rgb(18 21 27 / 0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.pd-app__tab { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 4px 14px 4px 5px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700; color: rgb(255 255 255 / 0.75); text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.pd-app__tab .wid__app { width: 24px; height: 24px; border-radius: 7px; }
.pd-app__tab .wid__app .i { width: 14px; height: 14px; }
.pd-app__tab[aria-current] { background: rgb(255 255 255 / 0.16); color: #fff; }
.pd-app__tab .wid__badge { margin: 0; min-width: 18px; height: 18px; font-size: 11px; font-style: normal; }
@media (hover: hover) { .pd-app__tab:not([aria-current]):hover, .pd-app__inicio:hover { color: #fff; background: rgb(255 255 255 / 0.12); } }
.pd-app__tab:focus-visible, .pd-app__inicio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-app__cuerpo { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pd-app__cuerpo > .wid { flex: 1; }
.wid__app--cal { background: linear-gradient(180deg, #ff7b72, #e0352b); }
.pd-boton { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  color: rgb(255 255 255 / 0.8); background: rgb(255 255 255 / 0.07); }
.pd-boton:disabled { cursor: default; opacity: 0.35; }
@media (hover: hover) { .pd-boton:not(:disabled):hover { color: #fff; background: rgb(255 255 255 / 0.16); } }
.pd-boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pd-esc { object-fit: contain; flex: none; width: 22px; height: 22px; }
.portal-despa .marca { display: inline-grid; place-items: center; min-width: 3rem; height: 1.6rem; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 5px;
  font-size: var(--fs-md); font-weight: 800; font-style: normal; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.portal-despa .marca--g { border-color: var(--verde-400); color: var(--verde-300); }
.portal-despa .marca--p { border-color: var(--danger); color: var(--clay-300); }
.portal-despa .marca--pend { border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent-texto); font-size: var(--fs-2xs); }

/* EL CORREO A PANTALLA COMPLETA: la bandeja ancha y la carta al lado. */
.pd-mail__cab { flex-wrap: wrap; row-gap: 8px; }
.pd-mail__cab .wid__badge { margin-left: 0; }
.pd-mail .mail__filtro { flex: none; white-space: nowrap; }
.pd-mail__cab .mail__filtros { margin-left: auto; }
.pd-mail__herr { display: inline-flex; gap: 4px; }
.pd-mail__buscar { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding: 0 12px; height: 36px; border-radius: 999px; background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.6); }
.pd-mail__buscar input { all: unset; flex: 1; min-width: 0; font-size: var(--fs-sm); color: #fff; }
.pd-mail__buscar:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.pd-mail .mail { grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.3fr); }
.pd-mail__dia { padding: 10px 10px 4px; color: rgb(255 255 255 / 0.5); list-style: none; }
.pd-mail__dia:first-child { padding-top: 4px; }
.pd-mail .mail__linea b { font-weight: 600; color: rgb(255 255 255 / 0.75); }
.pd-mail .mail__item--nuevo .mail__linea b { color: #fff; }
.pd-mail__estrella { flex: none; width: 13px; height: 13px; color: #ffd166; }
.pd-mail .mail__cuerpo { max-width: 50rem; }
.pd-mail__volver { display: none; }
@media (max-width: 1100px) {
  .pd-mail .mail { grid-template-columns: minmax(0, 1fr); }
  .pd-mail .mail__lista { max-height: none; }
  .pd-mail--leyendo .mail__lista { display: none; }
  .pd-mail:not(.pd-mail--leyendo) .mail__leer { display: none; }
  .pd-mail__volver { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin: 10px 14px 0; padding: 5px 12px 5px 8px;
    border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: #fff; background: rgb(255 255 255 / 0.1); align-self: start; }
  .pd-mail__cab .mail__filtros { margin-left: 0; order: 3; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pd-mail__herr { margin-left: auto; }
}

/* LAS APPS DEL FIXTURE: las columnas son vidrio de widget, no tarjetas. */
.pd-parsel { max-height: none; flex: 1; min-height: 0; gap: 0; }
.pd-parsel .parsel__grilla { gap: 14px; }
.pd-parsel .parsel__grilla > .wid { padding: 12px 16px; animation-delay: calc(var(--i, 0) * 60ms); }
.pd-parsel .parsel__grilla > .fx2__lado { padding: 0; }
.pd-parsel .panel__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-parsel .panel__title { margin: 0; }
.pd-parsel .parsel__ciclo { gap: 4px 14px; flex-wrap: wrap; }
.pd-cal__flechas { display: inline-flex; gap: 6px; margin-left: auto; }

/* La vía del año del club: un nodo por partido, el mercado debajo de la
   línea y, sombreado, el tramo de meses que se ve abajo. */
.pd-via { padding: 22px 6px 0 !important; }
.pd-via .via__mes { text-transform: uppercase; }
.pd-via__mes-c { display: none; }
@media (max-width: 720px) { .pd-via__mes-l { display: none; } .pd-via__mes-c { display: inline; } }
.pd-via__mes--visto { color: var(--text-primary) !important; }
.pd-via__ojo { position: absolute; top: -6px; bottom: -18px; border-radius: 8px; background: rgb(255 255 255 / 0.06); }
.pd-via__mercado { position: absolute; bottom: -12px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--warn) 45%, transparent); }
.pd-via__mercado--abierto { background: var(--warn); }
.pd-nodo { width: 9px; height: 9px; margin-left: -4.5px; bottom: -4px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px rgb(12 14 18 / 0.85); }
.pd-nodo--copa { background: var(--verde-400); }
.pd-nodo--amistoso { background: rgb(255 255 255 / 0.55); }
.pd-via .via__hilos { margin-top: 10px; }
/* La vía y los datos quedan a la vista: lo que rueda son los meses. */
.pd-cal__anio { display: flex; flex-direction: column; }
.pd-cal__anio .parsel__via { flex: 1; min-height: 0; display: flex; }
.pd-via { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pd-via .via__riel, .pd-via .via__hilos { flex: none; }
.pd-via .via__bloques { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; align-items: start; padding-bottom: 4px; }
.pd-cal__pie { flex: none; }
.pd-via .via__bloques { gap: 14px; }
.pd-via .via__que { color: var(--vio-300); }
.pd-cruce { cursor: pointer; }
.pd-cruce:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-cruce--proximo { border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important; }
.pd-cruce--elegido { box-shadow: 0 0 0 2px var(--accent) !important; }
.pd-cruce .fx__pie { min-width: 0; }
.pd-cruce__que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-muted); text-align: right; }
.pd-cruce__fin { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pd-cruce__fin .via__lectura { flex: none; }
.pd-cruce .fx__dia { white-space: nowrap; }
.pd-cal__nota, .pd-cal__hito { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--line-strong); border-radius: 7px;
  font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; list-style: none; }
.pd-cal__nota b { color: var(--text-secondary); }
.pd-cal__nota span { margin-left: auto; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); }
.pd-cal__hito { border-style: solid; border-color: var(--line-hairline); }
.pd-cal__hito .i { color: var(--warn); flex: none; }
.pd-cal__hito span { display: grid; min-width: 0; }
.pd-cal__hito b { color: var(--text-secondary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cal__hito small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El pie del año: la campaña y los datos de la temporada. */
.pd-cal__pie { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; margin-bottom: 0; }
.pd-cal__pie .parsel__casilla { cursor: pointer; }
.pd-cal__pie .parsel__casilla .marca { min-width: 2.4rem; height: 1.4rem; font-size: var(--fs-sm); }
.pd-cal__datos { align-self: stretch; align-content: end; }
.pd-cal__datos b { font-size: var(--fs-md); white-space: normal; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pd-cal__datos b small { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.pd-cal__datos .action { margin-left: 2px; }

/* El costado del calendario: el mes chico, el día y los compromisos. */
.pd-lado .fx2__lado-head { padding: 12px 16px 8px; }
.pd-mes { margin-bottom: 12px; }
.pd-mes__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pd-mes__nav b { flex: 1; text-align: center; color: #fff; font-size: var(--fs-md); }
.pd-mes__grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.pd-mes__cab { text-align: center; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding-bottom: 2px; }
.pd-mes__d { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; place-items: center; align-content: center; gap: 1px; min-height: 2.6rem; padding: 3px 0;
  border-radius: 8px; background: rgb(255 255 255 / 0.04); font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pd-mes__d .pd-esc { width: 16px; height: 16px; }
.pd-mes__d--fuera { opacity: 0.35; }
.pd-mes__d--mercado { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--warn) 70%, transparent); }
.pd-mes__d--partido, .pd-mes__d--amistoso { background: rgb(255 255 255 / 0.1); color: #fff; }
.pd-mes__d--good { background: color-mix(in srgb, var(--verde-400) 22%, transparent); }
.pd-mes__d--bad { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.pd-mes__d--hoy { box-shadow: inset 0 0 0 1.5px #fff; }
.pd-mes__d--elegido { background: var(--accent); color: var(--text-on-accent); }
@media (hover: hover) { .pd-mes__d:not(.pd-mes__d--elegido):hover { background: rgb(255 255 255 / 0.14); } }
.pd-mes__d:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pd-dia { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.06); }
.pd-dia p { margin: 0; }
.pd-dia .dia__titulo { font-size: var(--fs-md); font-weight: 700; color: #fff; }
.pd-dia .dia__linea { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.8); }
.pd-dia .dia__linea strong { color: #fff; }
.pd-dia .dia__nota { font-size: var(--fs-xs); color: rgb(255 255 255 / 0.6); }
.pd-dia .dia__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pd-ag__filtros { margin-bottom: 6px; }
.pd-ag__eco { margin: 0 0 4px; }
.pd-ag__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pd-ag__lista .pd-mail__dia { padding-left: 4px; }
.pd-ag { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 4.6rem 22px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 10px; font-size: var(--fs-sm); }
.pd-ag__dia { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.pd-ag__marca { display: grid; place-items: center; color: var(--warn); }
.pd-ag__que { display: grid; min-width: 0; }
.pd-ag__que b { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ag__que small { color: var(--text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ag__hora { font-size: var(--fs-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pd-ag--hito .pd-ag__que b { color: var(--text-secondary); }
.pd-ag--hoy { box-shadow: inset 3px 0 0 var(--accent); }
.pd-ag--elegido { background: color-mix(in srgb, var(--accent) 16%, transparent); }
@media (hover: hover) { .pd-ag:not(.pd-ag--elegido):hover { background: rgb(255 255 255 / 0.07); } }
.pd-ag:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* LA PROGRAMACIÓN: los partidos en cruces del Fixture, mes por mes. */
.pd-prog { overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.pd-prog__head { justify-content: space-between; }
.pd-prog__head .parsel__numeros { flex: 1 1 28rem; max-width: 40rem; }
.pd-prog__head .parsel__numeros b { font-size: var(--fs-lg); }
.pd-prog__filtros { align-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: none; }
.pd-prog__lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
.pd-prog__mes { margin-bottom: 16px; }
.pd-prog__mes .via__cuando { margin-bottom: 8px; }
.pd-prog__grilla { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 8px !important; }
.pd-prog__lado { display: flex; flex-direction: column; }
.pd-prog__tabla { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 12px 14px 0; }
.pd-prog__ir { padding: 10px 14px 14px; }
/* La tarjeta de los torneos de `inicio.js`, mudada al costado: sin caja
   propia, con la tinta del vidrio. */
.pd-prog__tabla .tarjeta--tabla { display: flex !important; flex-direction: column; gap: 8px; background: none !important; border: 0; box-shadow: none; padding: 0; margin: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 0; }
.pd-prog__tabla .tarjeta--tabla { flex: none; overflow: visible; animation: none; border-radius: 0; }
.pd-prog__tabla .tarjeta--tabla > .panel__head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0; }
.pd-prog__tabla .tarjeta--tabla > .panel__head .label { margin-left: auto; white-space: nowrap; }
.pd-prog__tabla .table-scroll { flex: none; max-height: none; overflow: visible; }
.pd-prog__tabla .standings { background: none; }
.pd-prog__tabla .standings th { background: none; }
.pd-prog__tabla .standings tr.es-tuyo td { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #fff; }
.pd-prog__tabla .standings tr.es-tuyo .team__nombre { color: var(--accent-texto); }

@media (max-width: 1100px) {
  .pd-ipad--app .ipad__pantalla { grid-template-rows: auto auto; }
  .pd-app { padding: 4px 8px 10px; }
  .pd-app__tabs { margin: 0; }
  .pd-app__tab:not([aria-current]) > span:not(.wid__app) { display: none; }
  .pd-app__tab:not([aria-current]) { padding-right: 5px; }
  .pd-app__inicio { padding: 6px 10px 6px 6px; }
  .pd-cal__anio, .pd-prog { overflow: visible; }
  .pd-via .via__bloques { overflow: visible; }
  .pd-prog__lista { overflow: visible; }
  .pd-cal__pie { grid-template-columns: minmax(0, 1fr); }
  .pd-cal__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .pd-cal__datos li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pd-prog__head .parsel__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; flex-basis: 100%; }
  .pd-prog__head .parsel__numeros li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .pd-prog__tabla { overflow: visible; }
  .pd-via .via__bloques { grid-template-columns: minmax(0, 1fr); }
  .pd-cal__flechas { margin-left: 0; }
}

/* Un repintado de la misma vista (elegir un día, abrir un correo) no repite
   la entrada de las piezas: sólo cambia lo que cambió. */
/* Salvo el bloque de respuesta de un planteo, que respira A PROPÓSITO mientras
   la decisión está pendiente: no es una entrada, es un llamado. */
.portal-despa.pd-quieto :not(.mail__decide, .mail__op-ir), .portal-despa.pd-quieto *::before, .portal-despa.pd-quieto *::after { animation: none !important; }
.portal-despa.pd-quieto .via__hilos path { stroke-dashoffset: 0; }

/* LAS RESPUESTAS LLAMAN (8/10/2026): cuando el botón grande trae al planteo,
   las opciones laten con el acento un momento para que se vea dónde se
   contesta. */
.mail__ops--llama { border-radius: var(--r-lg); animation: ops-llama 1.6s var(--ease-entrada) both; }
@keyframes ops-llama {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  30% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}
@media (prefers-reduced-motion: reduce) { .mail__ops--llama { animation: none; outline: 2px solid var(--accent); outline-offset: 4px; } }

/* TE TOCA DECIDIR (8/10/2026). Las respuestas de un planteo se leían como un
   párrafo más del correo y el DT no entendía que tenía que elegir. Ahora son
   una decisión: el aviso de arriba dice la acción, el bloque lleva el borde y
   el rótulo del acento, y cada respuesta es un botón numerado con «Elegir». */
.mail__aviso--decide { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.portal-despa .mail__decide,
.mail__decide {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-tarjeta);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent);
}
.mail__decide-cab { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--sp-1); }
.mail__decide-cab b { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.mail__decide-cab span { font-size: var(--fs-xs); color: var(--text-muted); }
.mail__decide .mail__op {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.mail__op-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.mail__op-txt { display: grid; gap: 3px; min-width: 0; }
.mail__op-ir {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}
@media (hover: hover) {
  .mail__decide .mail__op:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
}
@media (max-width: 480px) {
  .mail__decide .mail__op { grid-template-columns: auto minmax(0, 1fr); }
  .mail__op-ir { grid-column: 2; justify-self: start; }
}

/* Y SE MUEVE (8/10/2026, «sería bueno que además haga alguna animación el
   espacio donde debemos emitir respuesta»). El borde respira con el acento
   mientras la decisión está pendiente, y las píldoras «Elegir» se encienden
   de a una, en ola, cada pocos segundos: llama la vista sin gritar. Al pasar
   el cursor por una respuesta, la ola se queda quieta en esa. */
@media (prefers-reduced-motion: no-preference) {
  .mail__decide { animation: decide-respira 2.8s ease-in-out infinite; }
  .mail__decide .mail__op-ir { animation: decide-ola 4.2s ease-in-out infinite; }
  .mail__decide .mail__op:nth-of-type(2) .mail__op-ir { animation-delay: 0.25s; }
  .mail__decide .mail__op:nth-of-type(3) .mail__op-ir { animation-delay: 0.5s; }
  .mail__decide .mail__op:nth-of-type(4) .mail__op-ir { animation-delay: 0.75s; }
  .mail__decide:hover .mail__op-ir { animation-play-state: paused; }
  @keyframes decide-respira {
    0%, 100% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
    50% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 26px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
  }
  @keyframes decide-ola {
    0%, 70%, 100% { transform: none; box-shadow: none; }
    78% { transform: scale(1.08); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--accent) 80%, transparent); }
    86% { transform: none; box-shadow: none; }
  }
}

/* Las subsecciones del Portal en la barra de estado de la tableta. */
.ipad__vistas { display: flex; justify-content: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ipad__vistas::-webkit-scrollbar { display: none; }
.ipad__vista {
  flex: none;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ipad__vista:not([aria-current]):hover { background: rgb(255 255 255 / 0.1); color: var(--text-primary); }
.ipad__vista[aria-current='page'] { background: var(--accent); color: var(--text-on-accent); }
@media (max-width: 560px) {
  .ipad__barra:has(.ipad__vistas) > span:first-child { display: none; }
  .ipad__vistas { justify-content: flex-start; }
}

/* QUE SE LEAN (8/10/2026, «esto no se ve»): las pestañas iban sueltas sobre
   la foto, en gris chico, y contra el follaje desaparecían. Van en la misma
   cápsula oscura de la barra de las apps, con texto blanco y más grande. */
.ipad__vistas {
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgb(10 12 16 / 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 6px 18px rgb(0 0 0 / 0.35);
}
.ipad__vista { padding: 5px 14px; color: rgb(255 255 255 / 0.86); font-size: var(--fs-sm); text-shadow: none; }
.ipad__vista:not([aria-current]):hover { color: #fff; background: rgb(255 255 255 / 0.14); }
.ipad__vista[aria-current='page'] { color: var(--text-on-accent); }
@media (max-width: 560px) {
  .ipad__barra:has(.ipad__vistas) { display: flex; }
  .ipad__barra:has(.ipad__vistas) .ipad__iconos { display: none; }
  .ipad__barra .ipad__vistas { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .ipad__vista { padding: 4px 10px; font-size: var(--fs-xs); }
}

/* La barra única: ícono de app + rótulo, como la de las apps que reemplaza. */
.ipad__vista { display: inline-flex; align-items: center; gap: 7px; padding-left: 5px; }
.ipad__vista .wid__app { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.ipad__vista .wid__app .i { width: 13px; height: 13px; }
.wid__app--general { background: rgb(255 255 255 / 0.16); color: #fff; }
.ipad__vista[aria-current='page'] .wid__app--general { background: rgb(0 0 0 / 0.18); color: var(--text-on-accent); }
.ipad__vista .wid__badge { position: static; margin-left: 2px; }
.portal-despacho .pd-app__barra { display: none; }
@media (max-width: 560px) {
  .ipad__vista:not([aria-current]) > span:not(.wid__app) { display: none; }
  .ipad__vista:not([aria-current]) { padding-right: 5px; }
}

/* ==========================================================================
   EL PORTAL ES UN iPAD (8/10/2026, «la vista del portal tiene que verse como
   si fuese un iPad, optimicemos eso»). La tableta iba de borde a borde de la
   ventana y el marco casi no se veía: se leía como un panel más. Ahora es el
   aparato: proporción de iPad apaisado, centrado y con aire a los costados,
   marco negro parejo con el canto de aluminio, la cámara en el lado de
   arriba y la sombra de algo que está apoyado. Si la ventana es angosta usa
   el ancho que haga falta para que los widgets entren.
   ========================================================================== */
.portal-despa .ipad,
.prs .ipad {
  --marco: 12px;
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding: var(--marco);
  border-radius: 46px;
  background: #050506;
  box-shadow:
    0 0 0 1.5px #5d6168,
    0 0 0 3px #1c1e22,
    0 0 0 4px rgb(255 255 255 / 0.08),
    0 40px 80px -20px rgb(0 0 0 / 0.75),
    0 18px 36px -18px rgb(0 0 0 / 0.6),
    inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
/* La cámara, en el centro del lado largo de arriba, como en el iPad apaisado. */
.portal-despa .ipad::before,
.prs .ipad::before {
  content: '';
  position: absolute;
  top: calc(var(--marco) / 2 - 3px);
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4a63, #0a0d14 60%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}
.portal-despa .ipad__pantalla,
.prs .ipad__pantalla { border-radius: 30px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.9); }
@media (max-width: 760px) {
  .portal-despa .ipad, .prs .ipad { --marco: 8px; width: 100%; border-radius: 30px; }
  .portal-despa .ipad__pantalla, .prs .ipad__pantalla { border-radius: 22px; }
}

/* EL PASO ACTIVO, CON LOS BOTONES DEBAJO (8/10/2026): en la columna del
   Portal los dos botones le comían el ancho al texto, que se partía palabra
   por palabra. Van en su renglón, debajo de lo que dice el paso. */
.portal-despa .wid--pasos .despa__paso--sigue { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
.portal-despa .wid--pasos .despa__paso--sigue .despa__paso-acc { grid-column: 2; justify-self: start; }

/* MARCAR TODO COMO LEÍDO (9/10/2026): una píldora con palabras, en la cabecera
   del correo de las dos vistas. */
.pd-leertodo { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; flex: none; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; color: rgb(255 255 255 / 0.85); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: background 160ms ease, color 160ms ease; }
.pd-leertodo:disabled { cursor: default; opacity: 0.4; }
@media (hover: hover) { .pd-leertodo:not(:disabled):hover { color: #fff; background: rgb(255 255 255 / 0.16); } }
.pd-leertodo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wid--correo > .wid__cab .pd-leertodo { margin-left: 8px; }
@media (max-width: 600px) { .pd-leertodo span { display: none; } .pd-leertodo { width: 30px; padding: 0; justify-content: center; } }