/* Complementos del design system de ADOM que no cubre Tailwind Play CDN. */

:root {
  --adom-primary: #32347B;
  --adom-focus-ring: rgba(50, 52, 123, 0.4);
}

/* Campo de texto: foco con borde primary + halo suave. */
.campo {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo:focus {
  outline: none;
  border-color: var(--adom-primary);
  box-shadow: 0 0 0 3px rgba(50, 52, 123, .18);
}

/* Anillo de foco de doble trazo (accesibilidad, seccion "Focus Rings"). */
.foco-anillo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--adom-focus-ring);
}

/* El autofill de Chrome pinta el input de amarillo; lo neutralizamos. */
.campo:-webkit-autofill,
.campo:-webkit-autofill:focus {
  -webkit-text-fill-color: #1F2A2E;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
}

/* El atributo [hidden] debe ganarle a las utilidades de display de Tailwind
   (.flex, .grid, .block). Sin esto, un overlay con `hidden` sigue ocupando la
   pantalla e intercepta todos los clics. */
[hidden] {
  display: none !important;
}