/* Estantería de producto: una sola hoja de estilos, pensada primero para móvil.
   Cada regla se escribe una vez; las consultas solo añaden lo que cambia.
   Puntos de corte (los mismos que js/nucleo/medidas.js; test/css.test.mjs vigila que no haya otros):
   600 tablet · 1024 escritorio · 1280 ancho · 1440 extra · 480 fichas (container query). */

@layer tokens, base, disposicion, componentes, utilidades;

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    --fondo: #F3F4F1;
    --superficie: #FFFFFF;
    --tinta: #1B2420;
    --tinta-suave: #5C6A63;
    --linea: #D8DDD7;
    --borde-control: #8A968F;
    --acento: #2F5D50;
    --acento-suave: #E1EBE6;
    --acento-tinta: #FFFFFF;
    --gratis: #2F5D50;
    --gratis-fondo: #E1EBE6;
    --pago: #6B4A12;
    --pago-fondo: #F3E9D7;
    --estrella: #A86A00;
    --foco: #1F6FEB;
    --peligro: #B42318;
    --velo: rgb(15 20 18 / 0.45);

    --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
    --texto: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
    --margen: var(--e-4);
    --control: 44px;
    --chip: 40px;
    --t-0: 13px; --t-1: 15px; --t-2: 17px; --t-3: 20px; --t-4: 24px;
    --radio: 8px;
    --radio-chip: 999px;
    --alto-titulo: 52px;     /* fila del título: se pliega al bajar */
    --ancho-lista: 760px;    /* móvil y tablet: una columna de lectura */
    --ancho-max: 1312px;     /* escritorio: filtros + lista (+ detalle) */
    --col-filtros: 256px;
    --col-detalle: 400px;
    --alto-cabecera: 160px;  /* la mide estanteria.js; valor de partida */
  }
  /* Con ratón y pantalla ancha, controles más compactos. */
  @media (min-width: 1024px) and (pointer: fine) { :root { --control: 36px; --chip: 32px; } }
  @media (min-width: 1440px) { :root { --col-detalle: 440px; } }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fondo: #121815; --superficie: #1A221E; --tinta: #E6ECE8; --tinta-suave: #9BA9A2; --linea: #2C3833;
      --borde-control: #5E6E66; --acento: #7CC2AC; --acento-suave: #1F3029; --acento-tinta: #0E1411;
      --gratis: #8FD3BD; --gratis-fondo: #1F3029; --pago: #E8C285; --pago-fondo: #33291A; --estrella: #F0C060;
      --foco: #6EA8FF; --peligro: #FF8A7A; --velo: rgb(0 0 0 / 0.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --fondo: #121815; --superficie: #1A221E; --tinta: #E6ECE8; --tinta-suave: #9BA9A2; --linea: #2C3833;
    --borde-control: #5E6E66; --acento: #7CC2AC; --acento-suave: #1F3029; --acento-tinta: #0E1411;
    --gratis: #8FD3BD; --gratis-fondo: #1F3029; --pago: #E8C285; --pago-fondo: #33291A; --estrella: #F0C060;
    --foco: #6EA8FF; --peligro: #FF8A7A; --velo: rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
  @media (min-width: 600px) { :root { --margen: var(--e-5); } }
}

/* ---------- base ---------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + var(--e-2)); }
  body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: var(--t-2);
    line-height: 1.5;
  }
  a { color: var(--acento); text-underline-offset: 2px; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
  h1, h2, h3 { font-family: var(--display); line-height: 1.2; }
  .icono { flex: none; }
  .icono-peq { width: 16px; height: 16px; }
}

/* ---------- disposición ---------- */
@layer disposicion {
  /* La cabecera (marca y acciones) se va con el scroll; lo que se queda fijo es la barra de la lista
     (buscador, tipos y filtros activos), justo encima de lo que filtra. */
  .cabecera {
    position: relative;
    z-index: 10;
    background: var(--fondo);
    padding: 0 var(--relleno);
  }
  .barra-lista {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--fondo);
    margin: 0 calc(-1 * var(--relleno));
    padding: 0 var(--relleno) var(--e-2);
    border-bottom: 1px solid var(--linea);
  }
  .cabecera-titulo {
    height: var(--alto-titulo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
  }
  /* Columna centrada con un relleno lateral calculado: no depende de los márgenes de cada pieza. */
  .cabecera, .principal, .pagina { --relleno: max(var(--margen), (100% - var(--ancho-lista)) / 2); }
  .principal { padding: 0 var(--relleno) var(--e-7); }
}

/* ---------- componentes ---------- */
@layer componentes {
  .marca {
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--tinta);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .acciones { display: flex; align-items: center; gap: 0; flex: none; margin-right: calc(-1 * var(--e-2)); }
  .acciones .boton-texto { padding: 0 var(--e-2); }

  .boton-texto, .boton-icono {
    min-height: var(--control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-1);
    border: 0;
    background: none;
    color: var(--tinta);
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-1);
    text-decoration: none;
    border-radius: var(--radio-chip);
    padding: 0 var(--e-3);
  }
  .boton-icono { min-width: var(--control); padding: 0; position: relative; }
  .boton-texto:hover, .boton-icono:hover { background: var(--acento-suave); }
  .boton-texto:disabled { color: var(--tinta-suave); opacity: 0.6; cursor: default; background: none; }
  .insignia {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1;
    min-width: 18px;
    padding: 3px 5px;
    border-radius: var(--radio-chip);
    background: var(--acento);
    color: var(--acento-tinta);
    text-align: center;
  }
  .boton-icono .insignia { position: absolute; top: 4px; right: 2px; }

  .boton {
    min-height: var(--control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 0 var(--e-5);
    border-radius: var(--radio-chip);
    border: 1px solid var(--acento);
    background: var(--acento);
    color: var(--acento-tinta);
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-2);
    text-decoration: none;
  }
  .boton[aria-disabled="true"] { background: var(--linea); border-color: var(--linea); color: var(--tinta-suave); cursor: default; }
  .boton-ancho { width: 100%; }
  .boton-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-control); }
  .boton-secundario[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
  .boton-secundario[aria-pressed="true"] svg { fill: currentColor; }

  /* Buscador y botón de filtros */
  .buscador { display: flex; gap: var(--e-2); padding-top: var(--e-1); }
  .buscador input {
    flex: 1;
    min-width: 0;
    min-height: var(--control);
    padding: 0 var(--e-3);
    font-size: max(16px, var(--t-2)); /* 16 px o más: iOS no hace zoom */
    border: 1px solid var(--borde-control);
    border-radius: var(--radio);
    background: var(--superficie);
  }
  .buscador input::placeholder { color: var(--tinta-suave); opacity: 1; }
  .boton-filtros {
    flex: none;
    min-height: var(--control);
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0 var(--e-4);
    border: 1px solid var(--borde-control);
    border-radius: var(--radio);
    background: var(--superficie);
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-1);
  }

  /* Chips: tipos, filtros activos y opciones de la hoja */
  .tipos, .chips-activos, .chips-opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
  .tipos { padding-top: var(--e-2); }
  .chips-activos { list-style: none; margin: 0; padding: var(--e-2) 0 0; align-items: center; }
  .chip {
    min-height: var(--chip);
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 0 var(--e-3);
    border: 1px solid var(--borde-control);
    border-radius: var(--radio-chip);
    background: var(--superficie);
    color: var(--tinta);
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--t-1);
    white-space: nowrap;
  }
  /* El elegido se distingue por ✓, peso y borde, no solo por el color. */
  .chip[aria-pressed="true"], .chip-opcion:has(input:checked) {
    background: var(--acento-suave);
    border: 2px solid var(--acento);
    color: var(--acento);
    font-weight: 600;
    padding: 0 calc(var(--e-3) - 1px);
  }
  .chip[aria-pressed="true"]::before, .chip-opcion:has(input:checked) span::before { content: "✓"; margin-right: 4px; }
  .chip-activo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
  .chip-activo .icono { width: 16px; height: 16px; }
  .chip-mas { border-style: dashed; }
  .chip-opcion { position: relative; cursor: pointer; white-space: normal; text-align: left; line-height: 1.25; padding-block: var(--e-2); }
  .chip-opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .chip-opcion:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }

  /* Lista */
  .cabecera-estante { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding-top: var(--e-4); }
  .cabecera-estante h2 { margin: 0; font-size: var(--t-3); }
  .recuento { margin: 0; padding: var(--e-2) 0 var(--e-1); font-family: var(--mono); font-size: var(--t-0); color: var(--tinta-suave); }
  .recuento:focus { outline: none; }
  .filas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
  .filas li { border-bottom: 1px solid var(--linea); }
  .fila {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas: "icono titulo marcas" "icono temas marcas";
    column-gap: var(--e-3);
    row-gap: 2px;
    align-items: start;
    min-height: 72px;
    padding: var(--e-3) var(--e-1);
    color: inherit;
    text-decoration: none;
  }
  .fila:hover { background: var(--superficie); }
  .fila[aria-current] { background: var(--acento-suave); }
  .fila-icono { grid-area: icono; color: var(--tinta-suave); padding-top: 2px; }
  .fila-titulo {
    grid-area: titulo;
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-2);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .fila-temas {
    grid-area: temas;
    font-size: var(--t-0);
    color: var(--tinta-suave);
    font-family: var(--display);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .fila-marcas { grid-area: marcas; display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); }
  .etiqueta {
    font-family: var(--display);
    font-weight: 600;
    font-size: 12px;
    padding: 2px var(--e-2);
    border-radius: var(--radio-chip);
    white-space: nowrap;
  }
  .etiqueta-gratis { background: var(--gratis-fondo); color: var(--gratis); }
  .etiqueta-pago { background: var(--pago-fondo); color: var(--pago); }
  .marca-estrella { color: var(--estrella); display: inline-flex; }
  .marca-lista { color: var(--acento); display: inline-flex; }

  .vacio { padding: var(--e-4) 0; }
  .vacio-titulo { font-family: var(--display); font-weight: 600; font-size: var(--t-2); margin: 0 0 var(--e-3); }
  .vacio-opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
  .cta-sugerir { margin: var(--e-5) 0 0; color: var(--tinta-suave); }
  .pie { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--linea); font-size: var(--t-1); color: var(--tinta-suave); }

  /* Hojas: inferior en móvil; laterales desde 600 (izquierda los filtros, derecha el detalle). */
  .hoja {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
    inset: auto 0 0 0;
    border-radius: 16px 16px 0 0;
    background: var(--superficie);
    color: var(--tinta);
    box-shadow: 0 -8px 32px rgb(0 0 0 / 0.18);
  }
  .hoja[open] { display: flex; flex-direction: column; }
  .hoja::backdrop { background: var(--velo); }
  .hoja-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  .hoja-cabecera {
    display: grid;
    grid-template-columns: var(--control) 1fr auto;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border-bottom: 1px solid var(--linea);
  }
  .hoja-cabecera h2 { margin: 0; font-size: var(--t-3); text-align: center; }
  .hoja-cabecera h2:focus { outline: none; }
  .hoja-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: var(--e-4); flex: 1; min-height: 0; }
  .hoja-pie { padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
  .pista { margin: 0 0 var(--e-2); font-size: var(--t-1); color: var(--tinta-suave); text-align: center; }

  .grupo { border: 0; margin: 0 0 var(--e-5); padding: 0; min-width: 0; }
  .grupo legend { padding: 0; margin-bottom: var(--e-2); font-family: var(--display); font-weight: 600; font-size: var(--t-1); }

  /* Selector segmentado (Idioma, Precio): radios nativos ocultos tras una etiqueta. */
  .segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--borde-control); border-radius: var(--radio); overflow: hidden; }
  .segmentado label { position: relative; }
  .segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .segmentado span {
    min-height: var(--control);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: var(--t-1);
    border-left: 1px solid var(--linea);
    padding: 0 var(--e-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .segmentado label:first-child span { border-left: 0; }
  .segmentado input:checked + span { background: var(--acento); color: var(--acento-tinta); font-weight: 700; }
  .segmentado input:checked + span::before { content: "✓"; margin-right: 4px; }
  .segmentado input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: -4px; }

  /* Detalle */
  .detalle h2 { margin: var(--e-2) 0 var(--e-2); font-size: var(--t-4); }
  .detalle h2:focus { outline: none; }
  .detalle-meta { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-family: var(--mono); font-size: var(--t-0); color: var(--tinta-suave); }
  .detalle-autor { margin: 0 0 var(--e-2); color: var(--tinta-suave); }
  .detalle-nota { margin: 0 0 var(--e-2); font-size: var(--t-1); }
  .detalle-temas { margin: 0 0 var(--e-3); font-family: var(--display); font-size: var(--t-1); color: var(--tinta-suave); }
  .detalle-recomendado { margin: 0 0 var(--e-2); font-size: var(--t-1); }
  .rotulo { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
  .detalle-acciones { display: grid; gap: var(--e-2); }
  .detalle-secundarias { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }

  .aviso {
    position: fixed;
    left: 50%;
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    max-width: calc(100% - 2 * var(--margen));
    margin: 0;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--radio);
    background: var(--tinta);
    color: var(--fondo);
    font-family: var(--display);
    font-size: var(--t-1);
    z-index: 30;
  }
  .aviso:empty { display: none; }

  .saltar { position: absolute; left: var(--e-2); top: -100px; z-index: 40; background: var(--superficie); padding: var(--e-2) var(--e-3); border-radius: var(--radio); }
  .saltar:focus { top: var(--e-2); }

  @media (min-width: 600px) {
    .hoja { inset: 0 auto 0 0; width: 360px; max-height: 100dvh; height: 100dvh; border-radius: 0 16px 16px 0; }
    .hoja-detalle { inset: 0 0 0 auto; width: 440px; border-radius: 16px 0 0 16px; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hoja[open] { animation: subir 0.2s ease-out; }
    @keyframes subir { from { transform: translateY(24px); opacity: 0.6; } }
  }
}

/* ---------- utilidades ---------- */
@layer utilidades {
  .solo-lectores {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

/* ---------- tableta y escritorio (fase 2) ---------- */
@layer disposicion {
  .columna { min-width: 0; }
  .presentacion, .leyenda, .saltar-filtros { display: none; }
  .linea-recuento { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }

  /* Escritorio: cabecera de una fila (marca | buscador | acciones) que ya no se pliega, y rejilla de página con
     la columna de filtros fija. Las filas de tipos y filtros activos se alinean con la lista. */
  @media (min-width: 1024px) {
    .cabecera, .principal, .pagina { --relleno: max(var(--margen), (100% - var(--ancho-max)) / 2); }
    .cabecera { border-bottom: 1px solid var(--linea); }
    /* En escritorio la barra va encima de la lista, en su columna: sin sangrado lateral. */
    .barra-lista { margin: 0; padding: var(--e-4) 0 var(--e-3); }
    .buscador input { max-width: 640px; }

    .pagina {
      display: grid;
      grid-template-columns: var(--col-filtros) minmax(0, 1fr);
      column-gap: var(--e-6);
      padding: 0 var(--relleno);
    }
    .principal { padding: 0 0 var(--e-7); }
    .presentacion { display: block; margin: var(--e-4) 0 0; font-family: var(--display); font-size: var(--t-1); color: var(--tinta-suave); }
    .leyenda { display: block; margin: 0; font-family: var(--display); font-size: var(--t-0); color: var(--tinta-suave); }
    .saltar-filtros { display: block; }

    /* La columna fija vive bajo la cabecera y tiene su propio scroll. */
    .columna {
      position: sticky;
      top: var(--e-4);
      align-self: start;
      max-height: calc(100dvh - 2 * var(--e-4));
      overflow-y: auto;
      overflow-x: hidden;
      /* En Windows la barra de desplazamiento ocupa sitio (no flota como en Mac): se reserva para que el
         contenido no se desborde a lo ancho. */
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      overscroll-behavior: contain;
    }
    .columna:focus { outline: none; }
    /* Los filtros se desplazan con la página: sin scroll propio. */
    .columna-filtros { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; }
  }

  /* Desde 1280 el detalle es una tercera columna, no modal, junto a la lista. */
  @media (min-width: 1280px) {
    .pagina:has(.columna-detalle:not([hidden])) {
      grid-template-columns: var(--col-filtros) minmax(0, 1fr) var(--col-detalle);
    }
    .columna-detalle {
      border-left: 1px solid var(--linea);
      background: var(--superficie);
      margin-top: var(--e-4);
      border-radius: var(--radio);
    }
  }
}

@layer componentes {
  /* La lista es un contenedor: la fila cambia de densidad según su ancho, no según la pantalla. */
  .principal { container: lista / inline-size; }
  .fila-autor, .fila-idioma { display: none; }
  /* Ficha de catálogo (container query): en cuanto la lista mide 480 px (tableta, escritorio, también con el
     detalle abierto), cada recurso es una ficha con su etiqueta de tipo, autor, signaturas de sus estantes y
     «Recomendado por». Una ficha por fila. En el móvil la lista es más estrecha y siguen las filas. */
  @container lista (min-width: 480px) {
    .filas { display: grid; gap: var(--e-3); border-top: 0; }
    .filas li { border-bottom: 0; display: grid; }
    .fila {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "tipo marcas" "titulo titulo" "autor autor" "temas temas";
      align-content: start;
      row-gap: var(--e-2);
      min-height: 0;
      padding: var(--e-4) 18px;
      background: var(--superficie);
      border: 1px solid var(--linea);
      border-radius: 4px;
    }
    .fila:hover { border-color: var(--tinta-suave); background: var(--superficie); }
    .fila[aria-current] { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); background: var(--superficie); }
    .fila-icono { display: none; }
    .fila .fila-tipo { display: inline-block; justify-self: start; }
    .fila-titulo { font-size: 19px; line-height: 1.25; -webkit-line-clamp: 3; }
    .fila .fila-autor { display: block; grid-area: autor; font-size: var(--t-1); color: var(--tinta-suave); }
    /* Idioma y «Recomendado por» sin área fija: solo ocupan fila si existen (sin huecos vacíos). */
    .fila .fila-idioma { display: block; grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; color: var(--tinta-suave); }
    .fila-temas { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); -webkit-line-clamp: none; }
    .fila .fila-tema + .fila-tema::before { content: none; }
    .fila .signatura { display: inline; }
    .fila .fila-recomendado { display: block; grid-column: 1 / -1; font-size: var(--t-1); line-height: 1.4; }
    .fila-recomendado .rotulo { display: inline; margin-right: var(--e-1); }
    .fila-marcas { flex-direction: row; align-items: center; }
  }

  /* Filtros en la columna: sin ✕ ni pie (los cambios ya se aplican al momento); habilidades en lista con
     su recuento. En la hoja siguen siendo chips sin recuento. */
  .recuento-tema { display: none; }
  .columna-filtros .hoja-cabecera { grid-template-columns: 1fr auto; padding: var(--e-4) 0 var(--e-2); border-bottom: 0; }
  .columna-filtros .hoja-cabecera [data-cerrar], .columna-filtros .hoja-pie { display: none; }
  .columna-filtros .hoja-cabecera h2 { text-align: left; font-size: var(--t-2); }
  .columna-filtros .hoja-cuerpo { padding: 0 0 var(--e-5); overflow: visible; }
  .columna-filtros .grupo { margin-bottom: var(--e-4); }
  .columna-filtros .chips-opciones { flex-direction: column; gap: 0; }
  .columna-filtros .chip-opcion {
    width: 100%;
    min-height: var(--control);
    border: 0;
    border-radius: 6px;
    background: none;
    padding: var(--e-1) var(--e-2);
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: var(--e-2);
    font-weight: 500;
  }
  .columna-filtros .chip-opcion:hover { background: var(--acento-suave); }
  .columna-filtros .chip-opcion input { position: static; opacity: 1; width: 16px; height: 16px; accent-color: var(--acento); }
  .columna-filtros .chip-opcion:has(input:checked) { border: 0; padding: var(--e-1) var(--e-2); background: var(--acento-suave); }
  .columna-filtros .chip-opcion:has(input:checked) span::before { content: none; }
  .columna-filtros .recuento-tema { display: block; font-family: var(--mono); font-size: var(--t-0); color: var(--tinta-suave); }

  /* En escritorio los filtros están siempre a la vista en su columna: sobra el botón. */
  @media (min-width: 1024px) { .boton-filtros { display: none; } }

  /* Detalle en columna: ‹ › para pasar de recurso. */
  .detalle-navegacion { display: none; }
  .columna-detalle .hoja-cabecera { grid-template-columns: var(--control) 1fr; }
  .columna-detalle .detalle-navegacion { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-1); }
  .detalle-posicion { font-family: var(--mono); font-size: var(--t-0); color: var(--tinta-suave); }
  .boton-icono:disabled { opacity: 0.4; cursor: default; background: none; }
  .columna-detalle .hoja-pie { border-top: 1px solid var(--linea); }

  /* Ayuda de atajos */
  .ayuda { max-width: min(440px, calc(100% - 2 * var(--margen))); border: 0; border-radius: var(--radio); padding: var(--e-5); background: var(--superficie); color: var(--tinta); }
  .ayuda::backdrop { background: var(--velo); }
  .ayuda h2 { margin: 0 0 var(--e-4); font-size: var(--t-3); }
  .ayuda h2:focus { outline: none; }
  .ayuda dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4); font-size: var(--t-1); }
  .ayuda dd { margin: 0; }
  .ayuda form { margin-top: var(--e-4); }
  .interruptor { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-1); }
  .interruptor input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--acento); flex: none; }
  kbd { font-family: var(--mono); font-size: 0.85em; padding: 1px 6px; border: 1px solid var(--borde-control); border-radius: 4px; background: var(--fondo); }
  .enlace-boton { border: 0; background: none; padding: 0; color: var(--acento); text-decoration: underline; text-underline-offset: 2px; font: inherit; }
}

/* ---------- páginas de formulario: entrar, verificar (fase 3) ---------- */
@layer disposicion {
  .cabecera-simple { position: sticky; top: 0; border-bottom: 1px solid var(--linea); }
  @media (min-width: 1024px) {
    .cabecera-simple { display: block; }
    .cabecera-simple .cabecera-titulo { display: flex; }
  }
  .pagina-formulario { max-width: calc(480px + 2 * var(--margen)); margin: 0 auto; padding: var(--e-5) var(--margen) var(--e-7); }
  .pagina-formulario h1 { margin: var(--e-2) 0 var(--e-3); font-size: 32px; }
}

@layer componentes {
  .formulario { display: grid; gap: var(--e-4); }
  .intro { margin: 0; }
  .intro:focus { outline: none; }
  .motivo { margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--radio); background: var(--acento-suave); color: var(--tinta); font-size: var(--t-1); }
  .nota { margin: 0; font-size: var(--t-1); color: var(--tinta-suave); }
  .campo { display: grid; gap: var(--e-1); min-width: 0; }
  .campo label { font-family: var(--display); font-weight: 600; font-size: var(--t-1); }
  .campo input {
    width: 100%;
    min-width: 0; /* sin esto, un campo de texto no baja de su ancho por defecto y se sale de la pantalla */
    min-height: var(--control);
    padding: 0 var(--e-3);
    font-size: max(16px, var(--t-2));
    border: 1px solid var(--borde-control);
    border-radius: var(--radio);
    background: var(--superficie);
  }
  .campo input[aria-invalid] { border: 2px solid var(--peligro); }
  .entrada-codigo { font-family: var(--mono); font-size: 28px !important; letter-spacing: 0.3em; text-align: center; min-height: 56px !important; }
  .error-campo { margin: 0; color: var(--peligro); font-size: var(--t-1); }
  .acciones-secundarias { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); }
  .resaltado { outline: 3px solid var(--foco); outline-offset: 2px; }
}

/* ---------- Mi lista y cuenta (fase 4) ---------- */
@layer componentes {
  .cabecera-pagina { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
  .titulo-pagina { margin: var(--e-4) 0 0; font-size: 28px; }
  [data-vista="lista"] .presentacion, [data-vista="lista"] .leyenda { display: none; }
  .linea-recuento .boton-texto { margin-left: auto; }

  /* Con menos de 8 guardados, en móvil sobran los filtros y los tipos (en escritorio, siempre a la vista). */
  .pocos .boton-filtros, .pocos .tipos, .pocos .chips-activos { display: none; }
  @media (min-width: 1024px) { .pocos .tipos { display: flex; } .pocos .chips-activos { display: flex; } }

  .barra-reordenar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    margin: 0 0 var(--e-2); padding: var(--e-3) var(--e-4);
    border-radius: var(--radio); background: var(--acento-suave);
  }
  .barra-reordenar p { margin: 0; font-size: var(--t-1); }
  .fila-reordenar { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "icono titulo mover"; align-items: center; }
  .fila-reordenar:hover { background: none; }
  .mover { grid-area: mover; display: flex; gap: var(--e-1); }
  .mover .boton-icono { border: 1px solid var(--borde-control); background: var(--superficie); }
  .mover .boton-icono:disabled { visibility: hidden; }
  [inert] { opacity: 0.5; }

  /* Hoja de ordenar: inferior en móvil y, desde 600, un cuadro pequeño centrado. */
  .opciones-orden { display: grid; gap: 0; margin-bottom: var(--e-4); }
  .opcion-orden { display: flex; align-items: center; gap: var(--e-3); min-height: var(--control); padding: 0 var(--e-2); border-radius: 6px; font-family: var(--display); cursor: pointer; }
  .opcion-orden:hover { background: var(--acento-suave); }
  .opcion-orden input { width: 18px; height: 18px; accent-color: var(--acento); margin: 0; }
  @media (min-width: 600px) {
    .hoja-ordenar { inset: 0; margin: auto; width: 360px; height: fit-content; max-height: 80dvh; border-radius: 16px; }
  }

  /* Cuenta */
  .seccion-cuenta { display: grid; gap: var(--e-4); padding: var(--e-5) 0; border-top: 1px solid var(--linea); }
  .seccion-cuenta h2 { margin: 0; font-size: var(--t-3); }
  .acciones-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
  .boton-peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
  .enlace-peligro { color: var(--peligro); }
  .ok { margin: 0; color: var(--acento); font-family: var(--display); font-size: var(--t-1); }
}

/* ---------- sugerir (fase 5) ---------- */
@layer componentes {
  .pagina-sugerir { max-width: calc(680px + 2 * var(--margen)); }
  .seccion-sugerir { display: grid; gap: var(--e-4); padding: var(--e-5) 0; border-top: 1px solid var(--linea); }
  .seccion-sugerir h2 { margin: 0; font-size: var(--t-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); }
  .seccion-sugerir .grupo { margin: 0; }
  .contador { font-family: var(--mono); font-size: var(--t-0); font-weight: 400; color: var(--tinta-suave); }
  .opcional { font-weight: 400; color: var(--tinta-suave); }
  .campo textarea, .campo select {
    width: 100%; min-width: 0; padding: var(--e-2) var(--e-3);
    font-size: max(16px, var(--t-2)); border: 1px solid var(--borde-control); border-radius: var(--radio); background: var(--superficie);
  }
  .campo select { min-height: var(--control); }
  .campo textarea { resize: vertical; }
  .campo-doble { display: grid; gap: var(--e-3); }
  @container formulario (min-width: 600px) { .campo-doble { grid-template-columns: 1fr 1fr; } }
  .formulario { container: formulario / inline-size; }
  .precio { display: grid; gap: var(--e-3); }
  .aviso-duplicado { margin: 0; background: var(--pago-fondo); }
  .aviso-duplicado p { margin: 0 0 var(--e-1); }
  .hecho { background: var(--acento-suave); }
  .chip-opcion:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
  .trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .interruptor a { color: var(--acento); }
}

/* ---------- páginas de texto y moderación (fase 6) ---------- */
@layer componentes {
  .pagina-texto p { margin: 0 0 var(--e-4); }
  .pagina-moderacion { max-width: calc(760px + 2 * var(--margen)); }
  .pendientes { display: grid; gap: var(--e-4); }
  .tarjeta-moderacion { display: grid; gap: var(--e-2); padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
  .tarjeta-moderacion h2 { margin: 0; font-size: var(--t-3); }
  .tarjeta-moderacion p { margin: 0; }
  .tarjeta-moderacion .grupo { margin: 0 0 var(--e-2); }
}

/* ---------- escritorio editorial: portada, índice de estantes y fichas ---------- */
@layer componentes {
  /* Piezas que solo existen en la ficha y en el índice de escritorio. */
  .fila-tipo, .fila-autor, .fila-recomendado, .signatura, .portada { display: none; }
  .fila-tema + .fila-tema::before { content: " · "; }
  .fila-tipo {
    grid-area: tipo;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 3px;
  }
  .fila-tipo.tipo-curso { background: var(--acento-suave); color: var(--acento); }
  .fila-tipo.tipo-libro, .fila-tipo.tipo-articulo, .fila-tipo.tipo-video { background: var(--pago-fondo); color: var(--pago); }
  .signatura { font-family: var(--mono); font-size: 0.8em; color: var(--acento); margin-right: 4px; }

  @media (min-width: 1024px) {
    /* Portada: el título grande y la entradilla del diseño original, más tres claves de cómo funciona. */
    .portada {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: var(--e-7);
      align-items: end;
      padding: var(--e-7) max(var(--margen), (100% - var(--ancho-max)) / 2) var(--e-6);
      border-bottom: 1px solid var(--linea);
    }
    .portada[hidden] { display: none; }
    /* Con la portada a la vista, el título grande ya dice qué es: la marca de la cabecera sobra (en Mi lista se queda). */
    .cabecera:has(+ .portada:not([hidden])) .marca { visibility: hidden; }
    .portada-texto { display: grid; gap: var(--e-4); }
    .rotulo-portada { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
    .titulo-portada { margin: 0; font-size: clamp(44px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
    .entradilla { margin: 0; max-width: 60ch; font-size: 19px; line-height: 1.5; }
    .entradilla em { color: var(--tinta-suave); }
    .portada-acciones { display: flex; align-items: center; gap: var(--e-4); margin: var(--e-2) 0 0; }
    .portada-acciones .boton { flex: none; white-space: nowrap; }
    .portada-cifras { font-family: var(--mono); font-size: var(--t-0); color: var(--tinta-suave); }
    .portada-claves { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); font-size: var(--t-1); line-height: 1.5; color: var(--tinta-suave); }
    .portada-claves li { padding-left: var(--e-4); border-left: 2px solid var(--linea); }
    .portada-claves strong { display: block; color: var(--tinta); font-family: var(--display); font-size: var(--t-2); margin-bottom: 2px; }
    [data-vista="estanteria"] .presentacion { display: none; }


    /* Índice de estantes (columna de filtros): signatura · nombre · recuento, como el catálogo original. */
    .columna-filtros .grupo legend { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
    .columna-filtros .chip-opcion { grid-template-columns: 30px 1fr auto; font-family: var(--display); font-size: var(--t-1); }
    .columna-filtros .chip-opcion input { position: absolute; opacity: 0; inset: 0; width: auto; height: auto; }
    .columna-filtros .chip-opcion > span:first-of-type { display: contents; }
    .columna-filtros .signatura { display: inline; font-size: 12px; }
    .columna-filtros .chip-opcion:has(input:checked) { background: var(--acento); color: var(--acento-tinta); }
    .columna-filtros .chip-opcion:has(input:checked) .signatura,
    .columna-filtros .chip-opcion:has(input:checked) .recuento-tema { color: var(--acento-tinta); }
    .columna-filtros .chip-opcion:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 1px; }
    /* Idioma y precio, ligeros: la opción elegida se marca sin bloque de color pesado. */
    .columna-filtros .segmentado { border-color: var(--linea); }
    .columna-filtros .segmentado input:checked + span { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

    /* Detalle en su columna: una ficha alta, como las de la lista. */
    .columna-detalle { border: 1px solid var(--linea); border-radius: 4px; }
  }
}

/* ---------- páginas de formulario en escritorio: columna lateral que explica ---------- */
@layer componentes {
  .lateral { display: none; }
  @media (min-width: 1024px) {
    .pagina-formulario:has(.lateral) {
      max-width: calc(1040px + 2 * var(--margen));
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      column-gap: var(--e-7);
      align-content: start;
    }
    .pagina-formulario:has(.lateral) > * { grid-column: 1; }
    .pagina-formulario:has(.lateral) > .lateral {
      display: grid; gap: var(--e-4); grid-column: 2; grid-row: 1 / span 10; align-self: start;
      position: sticky; top: var(--e-5); margin-top: var(--e-5);
      padding: var(--e-5); border: 1px solid var(--linea); border-radius: 4px; background: var(--superficie);
    }
    .pagina-formulario h1 { font-size: 44px; letter-spacing: -0.02em; }
  }
}