/* ------------------------------------------------------------------
 * Loteria Tradicional PR — application stylesheet
 * ------------------------------------------------------------------
 * Source: assets/css/app.scss
 * Build:  sass assets/css/app.scss public/assets/css/app.css --style=compressed --no-source-map
 *
 * Phase 0 ships a hand-written, dependency-free CSS file that
 * includes the minimum BS5 layout we need (navbar, container, alerts,
 * accordion, form). The build pipeline (npm + sass) is documented in
 * README.md and will be wired in Phase 1.
 * ------------------------------------------------------------------ */

/* --- Brand variables (overridable) --------------------------------- */
:root {
  --ltpr-bg:        #ffffff;
  --ltpr-fg:        #1a1a1a;
  --ltpr-muted:     #6c757d;
  --ltpr-accent:    #0d6efd;
  --ltpr-success:   #198754;
  --ltpr-radius:    0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ltpr-bg:      #0d1117;
    --ltpr-fg:      #e6edf3;
    --ltpr-muted:   #8b949e;
  }
}

/* --- Layout -------------------------------------------------------- */
html, body {
  background-color: var(--ltpr-bg);
  color: var(--ltpr-fg);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji";
  -webkit-text-size-adjust: 100%;
}

/* Visually-hidden helper (BS5 ships one; keep our own as a fallback). */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
  background: #fff;
  color: #000;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ltpr-radius);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* --- Component tweaks --------------------------------------------- */
#banner img {
  display: inline-block;
  max-height: 120px;
  width: auto;
}

#messages:empty {
  display: none;
}

.accordion-button:not(.collapsed) {
  color: #0a3622;
  background-color: #d1e7dd;
}

@media (prefers-color-scheme: dark) {
  .accordion-button:not(.collapsed) {
    color: #75b798;
    background-color: #051b11;
  }
}

footer p {
  line-height: 1.4;
}

/* --- Print --------------------------------------------------------- */
@media print {
  nav, footer, #banner, #scan, #otro-wrap { display: none !important; }
}