/*
 * Estilos propios de jmfapp. Se cargan después de sistema-diseno.css, el sistema de diseño común
 * con josemariafernandez.es (tokens, base y componentes; se copia con scripts/sincronizar-diseno.sh
 * y no se edita aquí). Este fichero solo contiene lo que usa la aplicación.
 */

/* ---------- Base de la aplicación ---------- */
@layer base {
  /* El reset común deja los márgenes a cero (la web los da por componente): en las vistas de la
     aplicación el texto fluye con un espaciado fijo. */
  :where(main, .dialog) :where(p, ul, ol, dl, pre, table) { margin: 0 0 var(--space-4); }
  :where(main, .dialog) :where(h1, h2, h3, h4) { margin: 0 0 var(--space-4); }
  :where(main, .dialog) :where(ul, ol) { padding-left: var(--space-5); }
  :where(main, .dialog) fieldset { margin-bottom: var(--space-5); }

  /* Escala de títulos más contenida que la de la web: pantallas de trabajo, no artículos. */
  main h1 { font-size: var(--text-2xl); }
  main h2 { font-size: var(--text-xl); }
  main h3 { font-size: var(--text-lg); }
}

/* ---------- Estructura ---------- */
@layer layout {
  .page { display: flex; flex-direction: column; min-height: 100vh; }
  .page > main { flex: 1; }
  main.container { padding-block: var(--space-6); }
  .site-footer p { margin: 0; }

  /* Menú de cuenta (icono de persona, nombre y flecha). En pantallas estrechas se despliega con el
     botón «Menú», debajo del menú principal, igual que la búsqueda en la web. */
  .account-nav { display: flex; align-items: center; }
  @media (max-width: 71.99em) {
    .account-nav { order: 2; flex-basis: 100%; padding-block: var(--space-3); border-top: 1px solid var(--line); }
    .js .account-nav:not([data-open='true']) { display: none; }
  }

  .view-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
  .view-header h1 { margin: 0; }
  .section-divided + .section-divided { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
}

/* ---------- Componentes de la aplicación ---------- */
@layer components {
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
  .panel-stack { display: flex; flex-direction: column; }
  .panel-stack > .button:last-child { margin-top: auto; }
  .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .pager > * { margin: 0; }
  .check { margin-bottom: var(--space-2); }
  .caret { transition: transform .15s; }
  [aria-expanded='true'] > .caret { transform: rotate(180deg); }
}