/* ==========================================================================
   El Camino DT — Portal (pantalla de inicio)
   --------------------------------------------------------------------------
   Sólo composición y componentes propios de esta pantalla. Cero tokens
   nuevos: todo sale de tokens.css. El chrome, el panel, el botón, la
   pastilla, la tabla de datos, las barras de forma y el segmentado vienen
   tal cual de app.css.
   ========================================================================== */

/* La pantalla ocupa el alto de la ventana y NO scrollea: lo que scrollea es
   la bandeja y la clasificación, cada una dentro de su columna. Es la misma
   promesa que la ficha — todo a la vista de una vez. */
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* flex-basis 0, no auto: con basis auto el contenido manda y la columna
   crece hasta donde quiera. Con 0, la retícula ocupa exactamente el hueco
   que sobra y son los scrollers internos los que se hacen cargo. */
.home {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(330px, 0.92fr) minmax(440px, 1.3fr) minmax(390px, 1fr);
  gap: 1px;
  background: var(--line-hairline);
  border-bottom: 1px solid var(--line);
}

.col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  min-width: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: var(--bg-panel);
}

.col__tools { display: flex; align-items: center; gap: var(--sp-1); }

.col__more {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.col__more:hover { color: var(--text-primary); }

/* Bloque interior de una columna. Agrupa sin dibujar otra tarjeta: el
   sistema no anida contenedores, separa con aire y una etiqueta. */
.sub { display: grid; align-content: start; gap: var(--sp-4); min-height: 0; }
.sub--grow { flex: 1 1 auto; }
.sub__lead { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.sub__note { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

/* --------------------------------------------------------------------------
   BANDEJA
   --------------------------------------------------------------------------
   Lo único que distingue un mensaje leído de uno sin leer es el peso y el
   color del asunto. Nada de un punto de color: el acento ya tiene tres
   trabajos en el sistema y este no es uno.
   -------------------------------------------------------------------------- */

.inbox {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
  margin-right: calc(var(--sp-4) * -1);
  padding-right: var(--sp-4);
}

/* La fecha se pega arriba mientras el grupo pasa: en una bandeja larga
   perder el día es perder el contexto entero del mensaje. */
.inbox__date {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  background: var(--bg-panel);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.msg {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  width: 100%;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.msg:hover { background: var(--bg-hover); }
.msg[aria-current='true'] { background: var(--bg-selected); }

/* Monograma: no hay fotos de personas en este proyecto, así que la identidad
   la carga la inicial. */
.msg__avatar {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.msg__main { display: grid; gap: 1px; min-width: 0; }

.msg__from {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg__subject {
  font-size: var(--fs-md);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg[data-leido='false'] .msg__subject { color: var(--text-primary); font-weight: 600; }
.msg[data-leido='false'] .msg__from { color: var(--text-secondary); }

.msg__meta { display: flex; align-items: center; gap: var(--sp-3); }
.msg__time { font-size: var(--fs-xs); color: var(--text-muted); }
.msg__tag { color: var(--warn); }

.inbox__empty {
  margin: auto 0;
  padding: var(--sp-8) var(--sp-3);
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   NOTICIA DESTACADA
   -------------------------------------------------------------------------- */

.news {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line-hairline);
}

/* El panel es la retícula; el artículo sólo lo contiene junto a los
   indicadores. Cada indicador controla uno de estos. */
.news__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: var(--sp-4) var(--sp-6);
  align-items: start;
}

.news__text { display: grid; gap: var(--sp-4); min-width: 0; }

/* Registro normal: el ancho comprimido es voz de marcador (cifras, nombres,
   reloj) y esto es un titular de prosa. */
.news__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

.news__body {
  max-width: 62ch;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}
.news__body + .news__body { color: var(--text-muted); }

/* La marca de la competición es ornamento, y el acento no decora nunca: va en
   tono neutro. De cal sería el bloque de acento más grande de la pantalla, y
   no dice absolutamente nada. */
.news__mark { width: 84px; height: 84px; color: var(--ink-700); }

.news__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.news__meta span + span::before {
  content: '';
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--ink-600);
  vertical-align: middle;
}

.news__pager { grid-column: 1 / -1; display: flex; gap: var(--sp-3); }

.news__dot {
  width: 26px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--ink-700);
  transition: background var(--dur-fast) var(--ease);
}
.news__dot:hover { background: var(--ink-600); }
.news__dot[aria-selected='true'] { background: var(--accent); }

/* --------------------------------------------------------------------------
   PRÓXIMO RIVAL Y PARTIDO DE HOY
   -------------------------------------------------------------------------- */

.rival { display: flex; align-items: center; gap: var(--sp-5); }
.rival__id { display: grid; gap: 1px; min-width: 0; }
.rival__name { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.rival__note { font-size: var(--fs-xs); color: var(--text-muted); }

/* Sin borde, sin fondo propio y sin radio: separa con línea y aire como todo
   lo demás. Una tarjeta dentro de un panel dentro de una columna es justo el
   muro de tarjetas que esta pantalla dice rechazar en su primera línea. */
.today {
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--line-hairline);
}
/* El enlace es el que lleva la retícula: así toda la línea es el destino y no
   hay un trozo del partido que no se pueda pulsar. */
.today__link {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-xs);
  transition: background var(--dur-fast) var(--ease);
}
.today__link:hover { background: var(--bg-hover); }
.today__team { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.today__team--right { justify-content: flex-end; }
.today__time { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }

/* --------------------------------------------------------------------------
   CALENDARIO
   --------------------------------------------------------------------------
   La densidad se compra con iconos: a este tamaño "Entrenamiento de
   resistencia" no entra, pero un cono sí, y se reconoce sin leer. El texto
   completo aterriza en la línea de detalle de abajo, que sí es alcanzable.
   -------------------------------------------------------------------------- */

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.cal__head {
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink-900);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Es un <button>, no un <div>: tenía hover y todo su detalle vivía en un
   title, así que con teclado no se llegaba. Ahora abre la línea de detalle. */
.cal__day {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-height: 58px;
  padding: var(--sp-3);
  border: 0;
  background: var(--bg-panel);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.cal__day:hover { background: var(--bg-hover); }
.cal__day:focus-visible { outline-offset: -2px; }
.cal__day[aria-pressed='true'] { background: var(--bg-active); }

/* Hoy es una selección, y la selección es uno de los tres usos del acento. */
.cal__day--hoy { background: var(--bg-selected); }
.cal__day--hoy .cal__num { color: var(--accent-strong); font-weight: 700; }

.cal__num { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }

.cal__marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); color: var(--icon-quiet); }
.cal__marks .i { width: 12px; height: 12px; }
/* El día de partido se marca con BRILLO, no con acento: misma regla que la
   rampa de atributos, y el acento queda libre para sus tres trabajos. */
.cal__mark--partido { color: var(--text-primary); }
.cal__mark--medico { color: var(--warn); }

/* Detalle del día elegido. La retícula no tiene sitio para el texto y un
   title no es alcanzable con teclado: el texto completo aterriza acá. */
.cal__detail {
  min-height: 20px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.cal__detail strong { color: var(--text-primary); font-weight: 600; }
.cal__detail em { font-style: normal; color: var(--text-muted); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.cal-legend li { display: flex; align-items: center; gap: var(--sp-3); }
.cal-legend .i { width: 12px; height: 12px; color: var(--icon-quiet); }

/* --------------------------------------------------------------------------
   PARTIDOS Y CLASIFICACIÓN
   -------------------------------------------------------------------------- */

.fixtures td { padding-block: var(--sp-3); }

/* Cada fila de la programación abre la visualización del partido. El subrayado
   aparece en el nombre del rival —que es el enlace real— aunque el clic entre
   por cualquier punto de la fila. */
.fixtures tr[data-partido] { cursor: pointer; }
.fixtures tr[data-partido]:hover a.team { text-decoration: underline; }

.fixtures .venue { color: var(--text-muted); }
.fixtures .kickoff { color: var(--text-secondary); font-weight: 600; }

.standings td { padding-block: var(--sp-2); }
.standings tbody tr[aria-current='true'] { background: var(--bg-selected); }
.standings tbody tr[aria-current='true'] .team { color: var(--text-primary); font-weight: 600; }

/* La franja de zona es una CELDA, no un borde de color pegado a la fila: es un
   dato de la tabla (a qué compite ese puesto) y lleva su leyenda. La celda en
   sí es el canalón compartido de app.css. */
.zone-chip {
  display: block;
  width: 3px; height: 14px;
  border-radius: var(--r-hair);
  background: transparent;
}
.zone-chip[data-zone='champions'] { background: var(--accent); }
/* Las plazas europeas son una escala ordenada: se codifican por luminancia
   dentro del acento, no por matiz. Así el ámbar queda para lo que de verdad
   es una advertencia y la arcilla para lo que de verdad es negativo. */
.zone-chip[data-zone='europa'] { background: var(--cal-600); }
.zone-chip[data-zone='descenso'] { background: var(--danger); }

/* La flecha de movimiento no lleva color: la dirección ya lo dice todo, y
   teñir de cal una subida de puesto abría un cuarto uso del acento. */
.move { display: inline-flex; width: 11px; color: var(--icon-quiet); }
.move .i { width: 11px; height: 11px; }

.zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.zone-legend__item { display: flex; align-items: center; gap: var(--sp-3); }
.zone-legend .zone-chip { height: 10px; }

/* --------------------------------------------------------------------------
   RESPUESTA A PANTALLA
   Estructural: las columnas se repliegan, la tipografía no se toca.
   -------------------------------------------------------------------------- */

/* Anclar la pantalla al alto de la ventana sólo se sostiene mientras las tres
   columnas caben una al lado de la otra. En cuanto se apilan, el mismo alto
   tiene que repartirse entre más filas y el contenido se recorta. A partir de
   acá manda el documento: la página scrollea y cada columna mide lo que mide,
   con un techo para los dos listados largos. */
@media (max-width: 1400px) {
  body { height: auto; min-height: 100dvh; overflow: visible; }
  /* basis 0 sólo tiene sentido cuando hay un alto que repartir. Con el
     documento suelto, la retícula vuelve a medir lo que mide su contenido:
     si no, se queda corta y las columnas se recortan entre sí. */
  .home { flex: 0 0 auto; grid-template-columns: minmax(300px, 0.9fr) minmax(400px, 1.2fr); }
  .home > .col:last-child { grid-column: 1 / -1; }
  .col { min-height: auto; }
  .inbox { flex: 0 1 auto; max-height: 460px; }
  .table-scroll { flex: 0 1 auto; max-height: 420px; }
}

@media (max-width: 1080px) {
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .home { grid-template-columns: 1fr; }
  .news__panel { grid-template-columns: minmax(0, 1fr); }
  .home > .col:last-child { grid-column: auto; }
  .col { min-height: auto; }
  .inbox { max-height: 420px; }
  .news__mark { display: none; }
  .calendar { grid-template-columns: repeat(7, minmax(38px, 1fr)); }
  .cal__day { min-height: 48px; }
}