/* ---------------------------------------------------------------------
   IMPORTANTE: el orden de carga de las hojas es significativo.
   Está declarado en src/Support/Assets.php (constante CSS) y no debe
   alterarse: varias reglas de los archivos finales afinan a propósito lo
   que definen los primeros.
   --------------------------------------------------------------------- */

/* =====================================================================
   Base — variables institucionales, reinicio y tipografía
   ---------------------------------------------------------------------
   Los tres colores del Ayuntamiento (guinda, dorado y crema) llegan como
   propiedades personalizadas desde el HTML, porque son configurables
   desde el panel; aquí sólo se declaran sus valores de respaldo.
   ===================================================================== */

:root {
  --guinda: #691c32;
  --guinda-dark: #3f1019;
  --guinda-deep: #26090f;
  --guinda-soft: #fbf2f4;
  --dorado: #bc955c;
  --dorado-dark: #8f6a3a;
  --crema: #ecd798;
  --cream-bg: #fdfaf5;
  --ink: #211b1d;
  --muted: #73696c;
  --line: #e8e2e0;
  --surface: #ffffff;
  --success: #237a57;
  --warning: #a85d12;
  --danger: #b32636;
  --shadow-sm: 0 4px 18px rgba(59, 24, 34, 0.06);
  --shadow-lg: 0 28px 80px rgba(47, 13, 23, 0.16);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream-bg); }
body { margin: 0; background: var(--cream-bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; line-height: 1.5; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(188, 149, 92, .45); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .45; }
img { display: block; max-width: 100%; }
.page-width { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.connection-status { position: fixed; z-index: 100; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(35,122,87,.15); background: rgba(255,255,255,.92); color: var(--success); padding: 7px 11px; border-radius: 999px; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); font-size: 11px; font-weight: 750; }
.connection-status.offline { color: var(--warning); border-color: rgba(168,93,18,.2); }

.button { min-height: 45px; border: 0; border-radius: 12px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--guinda); color: #fff; box-shadow: 0 10px 22px rgba(105,28,50,.18); }
.button-primary:hover { background: #571527; box-shadow: 0 14px 28px rgba(105,28,50,.24); }
.button-ghost { background: #fff; color: var(--guinda); border: 1px solid #ddcfd3; }
.button-ghost:hover { background: var(--guinda-soft); }
.button-soft { background: var(--guinda-soft); color: var(--guinda); border: 1px solid #efdce1; }
.button-large { min-height: 54px; padding-inline: 23px; border-radius: 14px; }
.button-full { width: 100%; }
.text-button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--guinda); font-weight: 750; padding: 8px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--guinda); font-family: Montserrat, Arial, sans-serif; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.eyebrow.light { color: #f1d7a7; }