/* Doña Alicia — base compartida: colores, tipografía, botones, formularios */
:root {
  --azul-950: #0b173f;
  --azul-900: #0f1f52;
  --azul-700: #1b3a8c;
  --azul-500: #2f58d0;
  --azul-200: #c9d6f7;
  --azul-100: #e6ecfc;
  --azul-50: #f2f5fe;
  --azafran: #f4b223;
  --azafran-600: #d9970b;
  --azafran-100: #fff3d1;
  --papel: #f7f8fc;
  --blanco: #ffffff;
  --tinta: #14204a;
  --tinta-2: #4b5782;
  --linea: #d8def0;
  --rojo: #c62a4f;
  --rojo-100: #fde7ec;
  --verde: #17795a;
  --verde-100: #ddf3ea;

  --f-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --f-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --sombra: 0 1px 2px rgba(15, 31, 82, 0.08), 0 14px 30px -14px rgba(15, 31, 82, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.1;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--azul-700);
}

:focus-visible {
  outline: 3px solid var(--azafran);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--azul-900);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ——— Botones ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.65rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primario {
  background: var(--azul-700);
  color: #fff;
}
.btn-primario:hover:not([disabled]) {
  background: var(--azul-900);
}

.btn-azafran {
  background: var(--azafran);
  color: var(--azul-950);
}
.btn-azafran:hover:not([disabled]) {
  background: #ffc13d;
}

.btn-suave {
  background: var(--azul-100);
  color: var(--azul-900);
}
.btn-suave:hover:not([disabled]) {
  background: var(--azul-200);
}

.btn-borde {
  background: transparent;
  border-color: var(--azul-200);
  color: var(--azul-900);
}
.btn-borde:hover:not([disabled]) {
  border-color: var(--azul-700);
}

.btn-peligro {
  background: var(--rojo-100);
  color: var(--rojo);
}
.btn-peligro:hover:not([disabled]) {
  background: #fbd0da;
}

.btn-grande {
  min-height: 3.5rem;
  font-size: 1.125rem;
  border-radius: 14px;
}

.btn-chico {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.9375rem;
  border-radius: 10px;
}

/* ——— Formularios ——— */
.campo {
  display: grid;
  gap: 0.35rem;
}

.campo > span,
.campo > label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.campo small {
  color: var(--tinta-2);
  font-size: 0.875rem;
}

.input,
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s;
}

.campo textarea {
  min-height: 5rem;
  resize: vertical;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover,
.input:hover {
  border-color: var(--azul-200);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.input:focus {
  border-color: var(--azul-500);
  outline: none;
  box-shadow: 0 0 0 4px rgba(47, 88, 208, 0.18);
}

.campo .invalido {
  border-color: var(--rojo);
}

.error-texto {
  color: var(--rojo);
  font-weight: 600;
  font-size: 0.9375rem;
}

.aviso {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  background: var(--azafran-100);
  color: #5b3f00;
}
.aviso.error {
  background: var(--rojo-100);
  color: #7d1730;
}
.aviso.ok {
  background: var(--verde-100);
  color: #0d4a37;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}