/* Reading theme for Tránsito and Respuesta sacral, matching Carta and Calendario. */
@media screen {
  :root {
    color-scheme: light;
    --bg: #f7f4ee; --bg2: #efede5; --panel: #fffdf8;
    --tinta: #252820; --tinta2: #575d51; --accent: #884820;
    --sage: #425638; --line: #d1d1c4;
    --serif: 'Cormorant Garamond', Georgia, serif;
  }
  html { scroll-padding-top: 24px; }
  body { font: 16px/1.75 Arial, sans-serif; }
  a { text-underline-offset: 4px; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 4px;
  }
  .skip-link { position: absolute; top: -100px; left: 20px; z-index: 210; padding: 12px; background: var(--tinta); color: var(--bg); }
  .skip-link:focus { top: 12px; }
  .site-header { max-width: 1440px; margin: auto; padding: 24px 40px; display: flex; align-items: center; gap: 36px; border-bottom: 1px solid var(--line); }
  .site-header .brand { display: flex; margin-right: auto; flex-shrink: 0; }
  .site-header .brand img { filter: brightness(0); }
  .site-header nav { position: static; padding: 0; display: flex; gap: 28px; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font: 14px/1.4 Arial, sans-serif; letter-spacing: 0; text-transform: none; padding: 8px 0; border: 0; color: var(--tinta2); text-decoration: none; }
  .site-header nav a:hover, .site-header nav a[aria-current] { color: var(--accent); }
  .site-header .languages { gap: 16px; border-left: 1px solid var(--line); padding-left: 28px; }
  main { padding: 64px 40px; }
  .label { font-size: 12px; letter-spacing: .12em; margin-bottom: 18px; }
  .section-h, .sec-h2, .lunas-titulo, .level-head h3 { font-family: var(--serif); font-weight: 400; }
  main > .section-h { font-size: clamp(48px, 6vw, 76px); line-height: 1.05; letter-spacing: -1px; }
  .section-h em { color: var(--sage); font-style: italic; font-weight: 400; }
  .seo-sub { max-width: 720px; font-size: 17px; line-height: 1.85; color: var(--tinta2); letter-spacing: 0; }
  button, input, select { font-family: Arial, sans-serif; }
  footer { padding: 40px 24px; background: var(--bg); border-top: 1px solid var(--line); }
  .footer-intro { font: 400 28px/1.3 var(--serif); }
  footer a, .footer-firma { font-size: 15px; letter-spacing: 0; text-transform: none; }

  /* Date controls, charts and lunar events. */
  .tool-transit main { max-width: 1440px; }
  .tool-transit .seo-sub { margin: 24px 0 32px; }
  .controles { padding: 24px; border: 1px solid var(--line); background: var(--panel); border-radius: 5px; gap: 16px; margin-bottom: 24px; }
  .date-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .date-field label { font-size: 15px; }
  .controles input[type="datetime-local"], .lunas-nav select, .lunas-nav input {
    font: 16px/1.5 Arial, sans-serif; min-height: 48px; height: auto; max-width: 100%;
    padding: 11px 12px; color: var(--tinta); letter-spacing: 0;
    background-color: var(--panel); border: 1px solid #929889; border-radius: 4px; color-scheme: light;
  }
  .controles input[type="datetime-local"]:focus, .lunas-nav select:focus, .lunas-nav input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
  .controles button, .lunas-hoy, .lunas-ir { min-height: 48px; font: 16px/1.5 Arial, sans-serif; letter-spacing: 0; text-transform: none; padding: 11px 16px; border: 1px solid var(--accent); border-radius: 4px; }
  .controles button { align-self: flex-end; color: var(--panel); background: var(--accent); }
  .modo-ahora { align-self: flex-end; padding: 12px 0; font-size: 14px; color: var(--tinta2); letter-spacing: 0; text-transform: none; }
  .chart-shortcut { font-size: 15px; color: var(--accent); margin-left: auto; align-self: flex-end; padding: 12px 0; }
  .explorador-dia { top: 12px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 5px; padding: 20px; box-shadow: 0 4px 16px #2528200c; }
  .explorador-titulo { font: 400 26px/1.15 var(--serif); }
  .explorador-kicker, .explorador-dia-actual { font-size: 13px; letter-spacing: .04em; line-height: 1.5; }
  .explorador-hora-actual { font: 26px/1.2 Arial, sans-serif; font-variant-numeric: tabular-nums; }
  .explorador-controles { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .explorador-paso, .lunas-paso { width: 48px; height: 48px; font: 24px/1 Arial, sans-serif; border-color: #929889; }
  #hora-cursor { height: 44px; }
  .explorador-escala { font-size: 13px; line-height: 1.4; gap: 5px; }
  .explorador-estado { flex-wrap: wrap; overflow: visible; font-size: 15px; line-height: 1.6; padding-top: 12px; }
  #explorador-resumen { white-space: normal; max-width: 100%; flex: 0 1 auto; }
  .explorador-cambio { font-size: 14px; padding: 5px 10px; }
  .explorador-teclas { font-size: 13px; white-space: normal; }
  .evento-lunar, .evento-lunar.luna-llena { background: var(--bg2); color: var(--tinta); border-color: var(--line); }
  .evento-lunar-simbolo, .luna-llena .evento-lunar-simbolo { color: var(--accent); }
  .evento-lunar-titulo { font-size: 14px; letter-spacing: .04em; }
  .evento-lunar-detalle { color: var(--tinta2); font-size: 15px; line-height: 1.6; }
  .fila { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; }
  .fila .nombre { font-size: 15px; letter-spacing: 0; text-transform: none; }
  .fila .signo { grid-column: 2; font-size: 13px; color: var(--tinta2); letter-spacing: .02em; }
  .fila .puerta { grid-column: 3; grid-row: 1 / 3; font-size: 22px; min-width: 0; }
  .fila .nombre .rx { font-size: 12px; }
  .fila .puerta .sub { font-size: 16px; }
  #lista { scroll-margin-top: 220px; }
  .canales-titulo { font-size: 13px; letter-spacing: .05em; }
  .canal-nombre, .canales-vacio, .nota { font-size: 16px; color: var(--tinta2); font-style: normal; line-height: 1.75; }
  .nota { max-width: 780px; text-align: left; }
  .lunas { max-width: 1100px; padding: 48px 40px; }
  .lunas-titulo { font-size: 38px; }
  .lunas-nav select { padding-right: 30px; }
  .lunas-fila { padding-top: 20px; padding-bottom: 20px; gap: 12px 20px; }
  .lunas-nombre { font-size: 19px; }
  .lunas-detalle, .lunas-pos, .lunas-vacio, .lunas-nota { font-size: 16px; line-height: 1.75; color: var(--tinta2); font-style: normal; }
  .lunas-fecha, .lunas-utc { font-size: 14px; letter-spacing: 0; }

  /* Sacral reading and full-screen practice. */
  .tool-sacral main { max-width: 940px; }
  .tool-sacral main > .section-h { font-size: clamp(44px, 5.5vw, 64px); }
  .tool-sacral .section-h em { display: inline-block; margin-top: 12px; font-size: .68em; letter-spacing: 0; }
  .tool-sacral .signal { height: 48px; margin-bottom: 24px; }
  .tool-sacral main > .seo-sub:last-of-type { margin-bottom: 40px; }
  .sec-h2 { font-size: clamp(32px, 4vw, 40px); }
  .lead, .read p, .rules li, .auth p, .level-note, .bad, .good, .cta-box p { font-size: 17px; line-height: 1.85; font-style: normal; }
  .reads { background: none; gap: 16px; }
  .read, .cta-box { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
  .read h3, .rules h3 { font-size: 14px; letter-spacing: .05em; color: var(--accent); }
  .auth h3 { font-size: 18px; color: var(--sage); }
  .level-head h3 { font-size: 30px; color: var(--sage); }
  .level-num, .q-n { font-size: 14px; letter-spacing: .03em; }
  .q-t { font-size: 17px; line-height: 1.75; }
  .btn-primario, .btn-ghost, .p-close { min-height: 48px; padding: 12px 20px; font: 16px/1.5 Arial, sans-serif; letter-spacing: 0; text-transform: none; border-radius: 4px; }
  .btn-ghost { border-color: var(--accent); }
  .practice { padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
  .p-top, .p-bottom { flex-shrink: 0; }
  .p-meta, .p-level { font-size: 14px; letter-spacing: .04em; }
  .p-close { border: 1px solid var(--line); padding: 10px 16px; color: var(--tinta); }
  .p-stage { flex: 1 0 auto; min-height: 220px; padding: 32px 0; }
  .p-q { font: 400 clamp(27px, 5vw, 40px)/1.5 Arial, sans-serif; max-width: 28ch; }
  .p-dots { gap: 8px; }
  .dot { width: 7px; height: 7px; }
}
@media screen and (min-width: 1180px) {
  .tool-transit .contenido { grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr) minmax(300px, .85fr); gap: 30px; align-items: start; }
}
@media screen and (max-width: 900px) {
  .explorador-dia { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .explorador-hora-actual { grid-column: 2; grid-row: 1; }
  .explorador-controles { grid-column: 1 / -1; grid-row: 2; }
  .explorador-estado { grid-row: 3; }
  #explorador-resumen { flex-basis: 100%; }
  .evento-lunar { grid-row: 4; }
}
@media screen and (max-width: 700px) {
  .site-header { padding: 18px 22px; gap: 8px 18px; flex-wrap: wrap; }
  .site-header .brand img { width: 38px; height: 34px; }
  .site-header > nav:not(.languages) { order: 3; width: 100%; justify-content: space-between; gap: 12px; }
  .site-header .languages { border: 0; padding: 0; margin-left: auto; }
  main { padding: 40px 22px; }
  .seo-sub, .lead, .read p, .rules li, .auth p, .level-note, .bad, .good, .cta-box p { font-size: 16px; }
  .controles { padding: 20px; }
  .date-field { width: 100%; }
  .chart-shortcut { margin-left: 0; }
  .explorador-dia { position: static; margin: 0 0 24px; padding: 16px; }
  #lista { scroll-margin-top: 24px; }
  .explorador-titulo { font-size: 24px; }
  .explorador-teclas { display: none; }
  .lunas { padding: 36px 22px; }
  .lunas-nav { width: 100%; gap: 8px; }
  .lunas-hoy { margin-left: 0; }
  .lunas-fila { grid-template-columns: 24px minmax(0, 1fr); gap: 10px 12px; padding-left: 8px; }
  .lunas-fila > :not(:first-child) { grid-column: 2; }
  .rules { grid-template-columns: 1fr; gap: 24px; }
  .swap-row { grid-template-columns: 1fr; gap: 10px; }
  .practice { padding: 20px; }
  .p-bottom { flex-wrap: nowrap; gap: 12px; }
  .p-bottom button { width: auto; flex: 1; padding: 12px 8px; }
}
@media screen and (max-width: 380px) {
  main { padding: 36px 16px; }
  .controles { padding: 16px; }
  .explorador-dia { padding: 12px; gap: 12px 8px; }
  .explorador-titulo { font-size: 22px; }
  .explorador-dia-actual { font-size: 12px; }
  .explorador-controles { gap: 8px; }
  .explorador-escala { font-size: 12px; }
  .tool-sacral main > .section-h { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-header, .skip-link { display: none !important; } }
/* Printed readings use the same hierarchy and ink colours as the screen. */
@media print {
  @page { size: A4; margin: 15mm; }
  :root { --bg: #fff; --bg2: #f7f4ee; --tinta: #252820; --tinta2: #575d51; --accent: #884820; --navy: #425638; }
  body { background: white; color: #252820; font: 11pt/1.65 Arial,sans-serif; }
  main, .lunas { max-width: none; padding: 0; margin: 0; }
  .label { font: 9pt/1.5 Arial,sans-serif; letter-spacing: .05em; margin-bottom: 4mm; }
  .section-h, .sec-h2, .lunas-titulo { font-family: 'Cormorant Garamond',Georgia,serif; font-weight: 400; }
  .section-h { font-size: 30pt; line-height: 1.15; }
  .section-h em { color: #425638; }
  .sec-h2, .lunas-titulo { font-size: 23pt; }
  .seo-sub, .lead, .read p, .rules li, .auth p, .level-note,
  .q-t, .bad, .good, .cta-box p, .nota, .canal-nombre, .canales-vacio,
  .lunas-nota, .lunas-detalle, .lunas-pos { font: 11pt/1.65 Arial,sans-serif; color: #575d51; }
  .read h3, .rules h3, .auth h3, .level-head h3 { font: 12pt/1.5 Arial,sans-serif; color: #884820; }
  .q-n, .level-num, .canales-titulo { font: 9pt/1.5 Arial,sans-serif; color: #884820; }
  .read, .cta-box { background: #f7f4ee; border: 1px solid #d1d1c4; }
  .read, .auth, .swap-row, ol.qs li { break-inside: avoid; }
  .sec-head, .level-head, .bloque-t { break-after: avoid; }
  button, .practice, .signal, .chart-shortcut, .explorador-dia, .modo-ahora, .lunas-nav, .lunas-ir { display: none !important; }
  .controles { margin-bottom: 7mm; }
  .date-field label { display: block; font-size: 10pt; }
  .controles input[type="datetime-local"] { font: 11pt/1.5 Arial,sans-serif; border: 0; padding: 0; color: #252820; }
  .contenido { display: flex; flex-direction: column; }
  .rueda-wrap { order: 1; width: 160mm; max-width: 100%; margin: 0 auto 8mm; break-inside: avoid; }
  .lista { order: 2; width: 100%; max-width: none; break-before: page; }
  .izquierda { order: 3; break-before: page; }
  .rave-wrap { max-width: 75mm; }
  .fila { grid-template-columns: 10mm minmax(0,1fr) auto auto; gap: 4mm; padding: 2mm 0; break-inside: avoid; }
  .fila .nombre, .fila .signo { font: 10pt/1.5 Arial,sans-serif; color: #575d51; letter-spacing: 0; }
  .fila .puerta { font: 13pt/1.5 Arial,sans-serif; }
  .fila .puerta .sub { font-size: 10pt; }
  .lunas { break-before: page; }
  .lunas-fila { break-inside: avoid; }
  .lunas-fecha, .lunas-utc { font: 10pt/1.5 Arial,sans-serif; }
  .lunas-nombre { font: 12pt/1.5 Arial,sans-serif; }
  footer { padding: 6mm 0; background: white; font: 9pt/1.5 Arial,sans-serif; }
}