/* Estilo de projectmu.online: Material You (Android 13) solo con CSS.
   La version va en el NOMBRE del fichero (site.v1.css) porque Caddy lo sirve
   con cache de un año: al cambiarlo, se renombra a v2 y se cambia en las
   paginas; con el mismo nombre, los visitantes verian el viejo durante meses.
   Sin JavaScript y sin fuente web: system-ui ya es Roboto en Android y Segoe UI
   en Windows, y una fuente descargada retrasa el primer pintado (LCP). */

@layer base, layout, components;

/* Tokens de color M3 a partir de un rojo carmesi (el del hero) con terciario
   azul. light-dark() elige segun color-scheme: el sitio sigue al sistema. */
:root {
  color-scheme: dark light;
  --primary: light-dark(#a4161a, #ffb3ad);
  --on-primary: light-dark(#fff, #5f0f0e);
  --primary-container: light-dark(#ffdad6, #8a1c1b);
  --on-primary-container: light-dark(#410003, #ffdad6);
  --tertiary: light-dark(#3a5ba9, #b1c5ff);
  --tertiary-container: light-dark(#dae2ff, #23427f);
  --on-tertiary-container: light-dark(#001946, #dae2ff);
  --surface: light-dark(#fff8f7, #17110f);
  --surface-low: light-dark(#fcf0ee, #201a18);
  --surface-container: light-dark(#f6e6e3, #251e1c);
  --surface-high: light-dark(#f0e0dd, #302826);
  --on-surface: light-dark(#231918, #ede0dd);
  --on-surface-variant: light-dark(#534341, #d8c2bf);
  --outline: light-dark(#857371, #a08c8a);
  --outline-variant: light-dark(#d8c2bf, #534341);

  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 28px;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1120px;
  --ease: cubic-bezier(.2, 0, 0, 1); /* "emphasized" de M3 */
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
  body {
    margin: 0;
    font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--surface);
    color: var(--on-surface);
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--primary); text-underline-offset: 3px; }
  h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; }
  h1 { font-size: clamp(2rem, 1.2rem + 4vw, 3.6rem); font-weight: 700; letter-spacing: -.02em; }
  h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 600; }
  h3, .h3 { font-size: 1.15rem; font-weight: 600; }
  p, li { text-wrap: pretty; }
  :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    * { transition: none !important; }
  }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
  main > section { padding-block: clamp(48px, 8vw, 96px); }
  main > section:nth-of-type(even) { background: var(--surface-low); }
  .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .lead { font-size: 1.15rem; color: var(--on-surface-variant); max-width: 65ch; }
  .page-head { padding-block: clamp(32px, 6vw, 64px) 0; }
  .prose { max-width: 75ch; }
  .prose h2 { margin-top: 2em; }
}

@layer components {
  /* Barra superior. El menu de movil es un popover NATIVO: sin JS. En
     escritorio se fuerza display:flex sobre el display:none del navegador. */
  .topbar {
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in oklab, var(--surface) 82%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--outline-variant);
  }
  .topbar .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--on-surface); text-decoration: none; margin-right: auto; }
  .brand img { width: 32px; height: 32px; }
  /* OJO: el navegador da a [popover] position:fixed, inset:0, margin:auto y
     borde; sin anularlos, en escritorio el menu flota centrado en la pantalla. */
  .nav { display: flex; gap: 4px; align-items: center; position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
  .nav a:not(.btn) { color: var(--on-surface); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; }
  .nav a:not(.btn):hover { background: var(--surface-high); }
  .nav a[aria-current="page"] { background: var(--primary-container); color: var(--on-primary-container); }
  /* .topbar delante: .btn va despues en el fichero y le ganaria el display. */
  .topbar .menu-btn { display: none; }
  @media (max-width: 860px) {
    .topbar .menu-btn { display: inline-flex; }
    .nav:not(:popover-open) { display: none; }
    .nav:popover-open {
      position: fixed; overflow: auto;
      flex-direction: column; align-items: stretch; gap: 4px;
      inset: 72px 12px auto auto; margin: 0; min-width: 240px;
      padding: 12px; border: 0; border-radius: var(--radius-l);
      background: var(--surface-high); color: var(--on-surface);
      box-shadow: 0 8px 24px rgb(0 0 0 / .35);
    }
  }

  /* Botones de pildora: filled, tonal y de texto. */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: filter .2s var(--ease), transform .2s var(--ease);
  }
  .btn:hover { filter: brightness(1.08); }
  .btn:active { transform: scale(.97); }
  .btn-filled { background: var(--primary); color: var(--on-primary); }
  .btn-tonal { background: var(--surface-high); color: var(--on-surface); }
  .btn-icon { min-height: 40px; padding: 0 16px; background: var(--surface-high); color: var(--on-surface); }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; }

  /* Hero: la imagen escala con object-fit y el degradado garantiza el
     contraste del texto sea cual sea el recorte. */
  .hero { position: relative; min-height: min(86svh, 760px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
  .hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, var(--surface) 4%, color-mix(in oklab, var(--surface) 55%, transparent) 45%, transparent 75%);
  }
  .hero .wrap { padding-block: 48px; }
  .hero h1 { max-width: 16ch; }
  .hero p { font-size: 1.2rem; max-width: 50ch; color: var(--on-surface); }
  .chip { display: inline-block; padding: 6px 14px; border-radius: 8px; background: var(--tertiary-container); color: var(--on-tertiary-container); font-size: .85rem; font-weight: 600; margin-bottom: 16px; }

  .card {
    background: var(--surface-container); border-radius: var(--radius-l);
    padding: 24px; transition: background .2s var(--ease);
  }
  .card p { margin: 0; color: var(--on-surface-variant); }
  a.card { display: block; text-decoration: none; color: inherit; }
  a.card:hover { background: var(--surface-high); }
  .card .tag { color: var(--primary); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
  .card ol { margin: .5em 0 0; padding-left: 1.2em; color: var(--on-surface-variant); }

  .steps { counter-reset: step; }
  .steps .card::before {
    counter-increment: step; content: counter(step);
    display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px;
    border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container); font-weight: 700;
  }

  /* Tabla comparativa: en movil cada fila pasa a tarjeta (sin scroll lateral). */
  .compare { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
  .compare th { text-align: left; color: var(--on-surface-variant); font-weight: 600; padding: 0 16px; }
  .compare td { background: var(--surface-container); padding: 16px; vertical-align: top; }
  .compare td:first-child { border-radius: var(--radius-m) 0 0 var(--radius-m); color: var(--on-surface-variant); }
  .compare td:last-child { border-radius: 0 var(--radius-m) var(--radius-m) 0; }
  @media (max-width: 640px) {
    .compare thead { display: none; }
    .compare tr { display: block; margin-bottom: 12px; }
    .compare td { display: block; border-radius: 0 !important; }
    .compare td:first-child { border-radius: var(--radius-m) var(--radius-m) 0 0 !important; }
    .compare td:last-child { border-radius: 0 0 var(--radius-m) var(--radius-m) !important; }
    .compare td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: var(--primary); }
  }

  details { background: var(--surface-container); border-radius: var(--radius-m); margin-bottom: 8px; }
  details summary { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style-position: inside; }
  details > :not(summary) { padding: 0 20px 16px; margin: 0; color: var(--on-surface-variant); }

  .note { background: var(--tertiary-container); color: var(--on-tertiary-container); border-radius: var(--radius-m); padding: 16px 20px; }

  .crumbs { font-size: .9rem; color: var(--on-surface-variant); margin-bottom: 12px; }
  .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
  .crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--outline); }

  /* Wiki: teclas, tablas de datos y el paso a la pagina anterior/siguiente. */
  kbd {
    display: inline-block; min-width: 1.8em; padding: 1px 7px; text-align: center;
    border-radius: 8px; background: var(--surface-high); border: 1px solid var(--outline-variant);
    font: 600 .85em/1.5 inherit; font-family: inherit;
  }
  .table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
  .table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
  .table th { color: var(--on-surface-variant); font-weight: 600; }
  .table-wrap { overflow-x: auto; }
  .pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 48px; }
  .pager a { flex: 1 1 220px; }
  .pager .next { text-align: right; }
  .pager small { display: block; color: var(--on-surface-variant); }
  .prose li { margin-bottom: .35em; }

  .footer { background: var(--surface-container); padding-block: 48px 24px; margin-top: 0; font-size: .95rem; }
  .footer .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .footer h2 { font-size: 1rem; }
  .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
  .footer a { color: var(--on-surface-variant); text-decoration: none; }
  .footer a:hover { color: var(--primary); }
  .footer .legal { border-top: 1px solid var(--outline-variant); margin-top: 32px; padding-top: 16px; color: var(--on-surface-variant); font-size: .85rem; }
}