/* Tokens compartidos por la app y el panel */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fuentes/bricolage.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fuentes/literata.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fuentes/literata-italica.woff2) format("woff2"); }

:root {
  /* Marca La Casa de mi Padre: gris carbón, naranja y blanco */
  --tinta: #232226;
  --tinta-2: #5E5C63;
  --tinta-3: #8E8C93;
  --papel: #F6F6F4;
  --hoja: #FFFFFF;
  --linea: #E5E4E0;
  --linea-2: #D2D0CB;
  --marca: var(--color-iglesia, #3C3B40);   /* botones y acentos */
  --marca-suave: #EFEEEB;
  --sobre-marca: var(--sobre-iglesia, #FFFFFF);
  --luz: #F5A92D;            /* naranja del logo */
  --luz-suave: #FDF0DA;
  --luz-texto: #9A5A00;      /* naranja legible sobre blanco */
  --bien: #2F7A55;
  --bien-suave: #E2F2E9;
  --alerta: #A85513;
  --alerta-suave: #FBEBDC;
  --peligro: #B42335;
  --peligro-suave: #FBE4E7;

  --letra: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lectura: "Literata", Georgia, "Times New Roman", serif;

  --r-chico: 10px;
  --r: 16px;
  --r-grande: 24px;
  --sombra: 0 1px 2px rgba(35, 34, 38, .06), 0 8px 24px rgba(35, 34, 38, .07);
  --enfoque: 0 0 0 3px color-mix(in srgb, var(--luz) 55%, transparent);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #EDECEA;
    --tinta-2: #B3B1AD;
    --tinta-3: #7F7D79;
    --papel: #161618;
    --hoja: #1F1F22;
    --linea: #2E2E32;
    --linea-2: #3C3C41;
    --marca: #F5A92D;
    --sobre-marca: #1F1A12;
    --marca-suave: #2A2A2E;
    --luz-suave: #3A2E1A;
    --luz-texto: #F5B44D;
    --bien-suave: #17322A;
    --alerta-suave: #3A2516;
    --peligro-suave: #3A1A22;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --tinta: #EDECEA;
  --tinta-2: #B3B1AD;
  --tinta-3: #7F7D79;
  --papel: #161618;
  --hoja: #1F1F22;
  --linea: #2E2E32;
  --linea-2: #3C3C41;
  --marca: #F5A92D;
  --sobre-marca: #1F1A12;
  --marca-suave: #2A2A2E;
  --luz-suave: #3A2E1A;
  --luz-texto: #F5B44D;
  --bien-suave: #17322A;
  --alerta-suave: #3A2516;
  --peligro-suave: #3A1A22;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--letra); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--enfoque); border-radius: 8px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--linea-2);
  background: var(--hoja); color: var(--tinta); font-weight: 600; font-size: 16px; text-decoration: none;
  transition: transform .12s ease, background-color .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-marca { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.btn-chico { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-ancho { width: 100%; }
.btn-texto { border-color: transparent; background: transparent; padding: 0 10px; }
.btn-peligro { color: var(--peligro); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}