/* Sitio público: solo lo que el diseño del lienzo no cubría porque allá lo
   resolvía el runtime de prototipado. Ningún color ni tipografía nueva. */

/* El menú de celular es <details>/<summary>: abre y cierra sin JavaScript.
   Ojo: el cajón (.cab-cajon) se posiciona contra .cab-util, que ya es
   position: relative. Si <details> creara un contexto propio, el cajón quedaría
   del ancho del botón y sus enlaces bajarían de 44 px de ancho. */
.cab-menu { position: static; }
/* Chrome envuelve el contenido de <details> en ::details-content con
   content-visibility, y eso impone contención de disposición: el cajón
   absoluto se posicionaba contra ese envoltorio (38 px de ancho) en vez de
   contra .cab-util, y sus enlaces quedaban por debajo de 44 px. Al abrirse se
   quita la contención. Los navegadores sin ::details-content no la aplican. */
.cab-menu[open]::details-content { content-visibility: visible; contain: none; }
/* Cerrado, el cajón no existe para nadie: así tampoco lo cuentan como objetivo
   táctil de 38 px las herramientas que miden la página. */
.cab-menu:not([open]) .cab-cajon { display: none; }
.cab-menu > summary { list-style: none; cursor: pointer; }
.cab-menu > summary::-webkit-details-marker { display: none; }
.cab-menu > summary::marker { content: ""; }
.cab-menu .cab-menu-cerrar { display: none; }
.cab-menu[open] .cab-menu-abrir { display: none; }
.cab-menu[open] .cab-menu-cerrar { display: inline-flex; }
.cab-menu[open] .cab-menu-texto::after { content: ""; }
.cab-menu > summary:focus-visible { outline: 2px solid var(--clarete); outline-offset: 2px; }

/* "Lo esencial de la semana" */
.esencial-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.esencial-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 0; border-top: 1px solid var(--regla);
}
.esencial-item:first-child { border-top: 0; padding-top: 0; }

/* Índice de una nota o guía */
.indice-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: indice; }
.indice-lista a {
  display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 6px 0;
  font-family: var(--fuente-interfaz); font-size: 14.5px; line-height: 1.4;
  color: var(--tinta); text-decoration: none; border-bottom: 1px solid transparent;
}
.indice-lista a:hover { border-bottom-color: var(--tinta); }
.indice-numero { font-family: var(--fuente-titulos); font-size: 13px; color: var(--laton, #9A7B3F); font-weight: 600; flex-shrink: 0; }

/* Cuerpo de una tarjeta de nota */
.nota-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 12px; }
.nota-tarjeta-medio { margin-bottom: 0; }

/* Título de página (secciones, guías, descargables, proveedores) */
.titulo-pagina {
  font-family: var(--fuente-titulos); font-size: clamp(32px, 5vw, 52px);
  line-height: 1.06; font-weight: 600; letter-spacing: -0.015em; color: var(--tinta); margin: 0;
}

/* Grilla de resultados y de sección */
.grilla-notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1024px) { .grilla-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grilla-notas { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Formulario de búsqueda */
.buscador { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.buscador .campo { flex: 1 1 260px; min-width: 0; }

/* Estado vacío honesto */
.estado-vacio { padding: 40px 24px; border: 1px dashed var(--borde-control, #C9BFA8); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Muro premium: el cuerpo no está en la página, y se dice con todas las letras. */
.muro-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* Páginas legales (ronda R3, continuidad): el texto del diario anterior con la tipografía de lectura */
.texto-legal { display: flex; flex-direction: column; gap: 14px; padding: 32px 0 64px; font-family: var(--fuente-editorial); font-size: 18px; line-height: 1.6; color: var(--cuerpo); }
.texto-legal h1 { font-family: var(--fuente-titulos); font-size: clamp(32px, 5vw, 52px); line-height: 1.06; font-weight: 600; letter-spacing: -0.015em; color: var(--tinta); margin: 0 0 6px; }
.texto-legal h2 { font-family: var(--fuente-editorial); font-size: 24px; line-height: 1.2; font-weight: 500; color: var(--tinta); margin: 18px 0 0; }
.texto-legal h3 { font-family: var(--fuente-editorial); font-size: 20px; line-height: 1.25; font-weight: 500; color: var(--tinta); margin: 10px 0 0; }
.texto-legal p, .texto-legal ul, .texto-legal ol { margin: 0; }
.texto-legal ul, .texto-legal ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.texto-legal a { color: var(--clarete); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }