/* Chupis 2.0: HTML semántico, sin marcos, CSS moderno (variables, grid, anidamiento, view transitions). */

/* Al cambiar de página, la cabecera y el menú se quedan quietos y solo cambia el contenido. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0.15s; }

:root {
  --morado-oscuro: #52395f;
  --morado-medio: #6d4f87;
  --morado-menu: #846a9f;
  --morado-barra: #8a6aa6;
  --aviso: #ffffcc;
  --menu-fondo: #ecf1f6;
  --menu-enlace: #666699;
  --linea: #8a8a8a;
  --foco: #f0b040;
  --fuente: "Times New Roman", Times, "Liberation Serif", serif;
  --ancho-menu: 13.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-block-size: 100dvh;
  display: flex; flex-direction: column;
  background: #000;
  color: #fff;
  font: 1rem/1.3 var(--fuente);
}

:focus-visible { outline: 2px dashed var(--foco); outline-offset: 2px; }

.saltar {
  position: absolute; inset-inline-start: 0.5rem; inset-block-start: -4rem;
  background: var(--foco); color: #000; padding: 0.5rem 0.75rem; z-index: 10;
  &:focus { inset-block-start: 0.5rem; }
}
.solo-lectores {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Cabecera (estilo de los grupos de MSN) ---------- */
.cabecera {
  view-transition-name: cabecera;
  --claro: #74578e;
  color: #fff;
  a { color: inherit; text-decoration: none; }
  a:hover { text-decoration: underline; }
}
.banda { background: var(--morado-oscuro); block-size: 3.6rem; }
.marca {
  /* Barra clara con una curva a la izquierda, detrás del logotipo */
  background:
    linear-gradient(var(--claro), var(--claro)) no-repeat 17rem 0 / calc(100% - 17rem) 100%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40C25 38 40 4 100 0V40Z' fill='%2374578e'/%3E%3C/svg%3E") no-repeat 11rem 0 / 6.05rem 100%,
    var(--morado-oscuro);
  min-block-size: 2.7rem;
  padding-inline: 1.25rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
}
.logo {
  display: flex; align-items: center; gap: 0.7rem;
  margin-block-start: -1.1rem; /* el logotipo sobresale de la barra, sobre la banda oscura */
  font-size: 1.9rem; line-height: 1;
  .gente { inline-size: 2.6rem; block-size: auto; }
}
.superior {
  display: flex; flex-wrap: wrap; align-items: center; font-size: 1.05rem;
  a { padding-inline: 0.55rem; }
  a + a { border-inline-start: 1px solid #f0b86a; }
}
.barra-grupo {
  background: var(--morado-barra, #8a6aa6);
  border-block-end: 2px solid #fff;
  display: grid; grid-template-columns: var(--ancho-menu) minmax(0, 1fr); align-items: center;
  min-block-size: 1.75rem; font-size: 1.05rem;
  strong { padding-inline: 1.25rem 0.5rem; font-size: 1.2rem; }
  span { padding-inline: 0.75rem; overflow-wrap: anywhere; }
}

/* ---------- Estructura: menú + contenido ---------- */
.estructura {
  flex: 1;
  display: grid;
  grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
}

.menu {
  view-transition-name: menu;
  background: var(--menu-fondo);
  position: sticky; inset-block-start: 0; align-self: start;
  max-block-size: 100dvh; overflow-y: auto;
  scrollbar-width: none; /* sin barra: el menú se desplaza con la rueda o el dedo */
  &::-webkit-scrollbar { display: none; }
  padding-block-end: 1rem;
  > details > summary { display: none; } /* solo se muestra en móvil, donde el menú se pliega */
  ul { list-style: none; margin: 0; padding: 0.6rem 0.5rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
  li { line-height: 1.15; }
  a { color: var(--menu-enlace); overflow-wrap: anywhere; }
  a:hover { color: #2f2f78; }
  a[aria-current="page"] { font-weight: bold; color: #1f1f5c; }
  .submenu { padding-inline-start: 0; }
  .submenu summary {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
    cursor: pointer; color: var(--menu-enlace); font-weight: bold; overflow-wrap: anywhere;
    list-style: none;
    &::-webkit-details-marker { display: none; }
    &::after { content: "+"; flex: 0 0 auto; font: bold 1.1rem/1 Arial, sans-serif; }
  }
  .submenu[open] > summary::after { content: "−"; }
  .submenu > ul { padding: 0.35rem 0 0 0.65rem; border-inline-start: 1px solid #c5c8d2; }
}
.novedades {
  position: relative;
  background: var(--aviso, #ffffcc);
  border-block-end: 1px solid #e0dc9c;
  padding: 0.45rem 2.5rem 0.55rem 0.5rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  .estrella { position: absolute; inset-block-start: 0.3rem; inset-inline-end: 0.35rem; inline-size: 1.7rem; block-size: auto; }
}

/* ---------- Contenido (cada sección puede definir --fondo, --tinta y --enlace) ---------- */
main {
  background: var(--fondo, #000);
  color: var(--tinta, #fff);
  padding: 1rem clamp(1rem, 3vw, 2rem) 4rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
  a { color: var(--enlace, #9aa6ff); }
  p { margin-block: 0 1em; }
  img { max-inline-size: 100%; block-size: auto; }
  img.izq { float: left; margin-inline-end: 1rem; }
  img.medio { vertical-align: middle; }
  img.centrada { display: block; margin-inline: auto; }
}
.centro { max-inline-size: none; margin-inline: auto; text-align: center; }
.derecha { text-align: end; }

/* Tamaños que antes se escribían con <font size="..."> */
.t1 { font-size: 0.65rem; }
.t2 { font-size: 0.8rem; }
.t4 { font-size: 1.15rem; }
.t5 { font-size: 1.5rem; }
.t6 { font-size: clamp(1.4rem, 4vw, 2rem); }
.t7 { font-size: clamp(1.6rem, 6vw, 3rem); }
.t6, .t7 { line-height: 1.1; }

/* Secciones nuevas (creadas con el editor visual) */
main .titulo { text-align: center; font: 400 clamp(1.6rem, 6vw, 3rem)/1.1 var(--fuente); margin: 0 auto 1rem; }
main :where(h2, h3) { line-height: 1.15; margin-block: 1.2em 0.5em; }
main :where(h2) { font-size: 1.6rem; }
main :where(h3) { font-size: 1.3rem; }
main :where(ul, ol) { margin-block: 0 1em; padding-inline-start: 1.5rem; }
main blockquote { margin: 0 0 1em; padding-inline: 1rem; border-inline-start: 3px solid currentColor; }
main :where(p, ul, ol, blockquote, h2, h3) { max-inline-size: 60rem; margin-inline: auto; }

/* Tablas de noticias */
.desplazable { overflow-x: auto; margin-block-end: 1em; }
.tabla {
  margin-inline: auto;
  border-collapse: separate; border-spacing: 1px;
  border: 1px solid var(--borde, currentColor);
  td { border: 1px solid var(--borde, currentColor); padding: 0.5rem; }
}

/* Portada y 404 */
main.portada {
  text-align: center;
  h2 { font-size: 2rem; margin-block: 1rem; }
}
.logo-gif {
  margin: 1rem 0 1.5rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.35rem;
}
.boton {
  display: inline-block; padding: 0.6rem 1.25rem;
  border: 1px solid currentColor; border-radius: 4px;
  color: #fff; text-decoration: none; font: 1.1rem Arial, Helvetica, sans-serif;
  transition: background-color 0.2s, color 0.2s;
  &:hover { background: #fff; color: #000; }
}
main a.boton { color: #fff; &:hover { color: #000; } }
.libro {
  max-inline-size: 50rem; margin: 2rem auto 0;
  iframe { display: block; inline-size: 100%; block-size: 600px; border: 1px solid #e0e0e0; border-radius: 8px; }
}


.ai-disclaimer {
  margin-top: 3rem;
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: #888;
  line-height: 1.4;
  border-top: 1px solid #444;
}

.ai-disclaimer-titulo {
  font-size: 0.65rem;        /* Más pequeño que el cuerpo */
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  color: #aaa;
  text-align: center;        /* Fuerza el centrado */
}

.ai-disclaimer p {
  margin: 0 auto;
  max-width: 600px;
  text-align: center;        /* Asegura el centrado del párrafo */
}

/* ---------- Móvil: el menú pasa arriba y se pliega ---------- */
@media (max-width: 40rem) {
  .banda { block-size: 1.5rem; }
  .marca { background: var(--morado-medio, #6d4f87); padding-block: 0.4rem; }
  .logo { margin-block-start: 0; font-size: 1.5rem; .gente { inline-size: 2rem; } }
  .superior { font-size: 0.95rem; a { padding-inline: 0.4rem; } }
  .barra-grupo { grid-template-columns: auto minmax(0, 1fr); strong { padding-inline-start: 1rem; } }
  .estructura { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: static; max-block-size: none;
    .novedades { flex-direction: row; gap: 1.25rem; padding-inline: 1rem 3rem; }
    > details > summary {
      display: flex; justify-content: space-between; align-items: baseline; cursor: pointer;
      background: var(--morado-menu); color: #fff; font-weight: bold; font-size: 1.2rem; padding: 0.3rem 1rem;
      list-style: none; &::-webkit-details-marker { display: none; }
      &::after { content: "▾"; }
    }
    > details[open] > summary::after { content: "▴"; }
    > details > ul { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.6rem 1rem 0; }
    .submenu { min-inline-size: 10rem; padding-inline-start: 0; }
    .submenu > ul { flex-direction: column; gap: 0.3rem; padding: 0.35rem 0 0 0.5rem; }
  }
  img.izq { float: none; display: block; margin: 0 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}