/* Pasto Claro — estilos compartidos */
:root {
  --cielo: #eef3f1;      /* fondo */
  --hoja: #ffffff;       /* superficies */
  --tinta: #17241c;      /* texto */
  --gris: #5d6b62;       /* texto secundario */
  --linea: #d3ddd7;
  --pasto: #3e7c2f;      /* acción principal */
  --pasto-osc: #2c5d20;
  --rocio: #dcebd3;      /* tinte verde */
  --sol: #e8b44a;        /* resalte */
  --seco: #c9793a;       /* índice bajo / alerta suave */
  --error: #b3261e;
  --radio: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cielo: #101814; --hoja: #17211b; --tinta: #e7eee9; --gris: #9fb0a5; --linea: #2b3830;
    --pasto: #7cc164; --pasto-osc: #9bd785; --rocio: #1f3220; --sol: #f0c35f; --seco: #e09a5e; --error: #f08a82;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cielo: #101814; --hoja: #17211b; --tinta: #e7eee9; --gris: #9fb0a5; --linea: #2b3830;
  --pasto: #7cc164; --pasto-osc: #9bd785; --rocio: #1f3220; --sol: #f0c35f; --seco: #e09a5e; --error: #f08a82;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cielo); color: var(--tinta); font: 17px/1.55 "Atkinson Hyperlegible", system-ui, sans-serif; }
h1, h2, h3 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0; }
a { color: var(--pasto-osc); }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

.marco { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font: 700 1.2rem "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.marca svg { width: 30px; height: 30px; flex: none; }

/* Botones y formularios */
button, .boton { font: 700 1rem "Atkinson Hyperlegible", sans-serif; border: 0; border-radius: 999px; padding: 12px 22px; min-height: 46px; cursor: pointer;
  background: var(--pasto); color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
:root[data-theme="dark"] button, :root[data-theme="dark"] .boton { color: #0f1a12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button, :root:not([data-theme="light"]) .boton { color: #0f1a12; } }
button:hover, .boton:hover { background: var(--pasto-osc); }
button.sec, .boton.sec { background: transparent; color: var(--pasto-osc); box-shadow: inset 0 0 0 2px var(--pasto); }
button.sec:hover, .boton.sec:hover { background: var(--rocio); }
button.chico { min-height: 36px; padding: 6px 14px; font-size: .9rem; }
button:disabled { opacity: .55; cursor: wait; }

label { display: block; font-weight: 700; font-size: .92rem; margin: 12px 0 4px; }
input, select, textarea { font: inherit; color: inherit; width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--linea); background: var(--hoja); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pasto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pasto) 25%, transparent); }
.ayuda { color: var(--gris); font-size: .88rem; margin: 4px 0 0; }
.error-txt { color: var(--error); font-weight: 700; font-size: .92rem; min-height: 1.2em; margin: 10px 0 0; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: .25s;
  background: var(--tinta); color: var(--cielo); padding: 12px 18px; border-radius: 12px; max-width: calc(100% - 32px); z-index: 50; font-weight: 700; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: var(--error); color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }