/* Reset mínimo + estilos base (ver DESIGN_SYSTEM.md). */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font: var(--font-body-md);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--color-text);
}

p {
  margin: 0;
}

/* 02 § 3.2 asigna #235BC2 (--color-primary-500) a "accion primaria,
   enlaces, foco, estado activo". El -600 es el escalon de activo/pressed y
   06 § 2.1 lo marca ademas como no ratificado: no es color de enlace. */
a {
  color: var(--color-primary-500);
}

/*
  El glow en hover de enlaces se retiró (DDL-045, 07 § 5). Su función
  declarada era énfasis, pero aparecía en cada enlace de cada pantalla: un
  énfasis que se repite en todas partes se anula por repetición y pasa a ser
  decoración. Con él desaparecen las dos excepciones que existían solo para
  apagarlo (.nav-item, .buscador-item) y su regla de reduced-motion.
*/

button {
  font-family: inherit;
}

:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-primary-100);
}

.contenedor-pagina {
  padding: var(--space-8);
  max-width: 1400px;
}

.titulo-pagina {
  font: var(--font-heading-xl);
  margin-bottom: var(--space-6);
}

.detalle-tecnico {
  text-align: center;
  color: var(--color-text-muted);
  font: var(--font-body-sm);
  margin-top: var(--space-4);
}

/*
  Ripple de .boton-primario (ver wwwroot/js/microinteracciones.js), acotado
  a las acciones primarias por DDL-045 / 07 § 5. Va aquí, global
  y sin aislar, a propósito: el <span class="boton-ondulacion"> lo crea
  document.createElement en JS puro, y una regla dentro de Boton.razor.css
  quedaría reescrita por Blazor a ".boton-ondulacion[b-xxxxxxxx]" — un
  elemento creado fuera del árbol de Razor nunca tiene ese atributo de
  scope, así que nunca la alcanzaría (bug real: sin position:absolute el
  span queda en flujo normal con el ancho/alto que le pone el JS, inflando
  el botón en cada clic sin límite, y como la animación nunca llega a
  aplicarse tampoco, animationend nunca dispara y el span nunca se quita).
*/
.boton-ondulacion {
  position: absolute;
  border-radius: var(--radius-full);
  background-color: currentColor;
  opacity: 0.22;
  pointer-events: none;
  transform: scale(0);
  animation: expandir-ondulacion var(--motion-slow) var(--ease-standard) forwards;
}

@keyframes expandir-ondulacion {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boton-ondulacion {
    display: none;
  }
}

/*
  Oculta visualmente el <input type="file"> nativo de ZonaSoltarArchivo.razor,
  accesible por foco/teclado/lectores de pantalla — el <label for> de la zona
  ya cubre "clic en cualquier parte abre el selector", así que el input no
  necesita ser el elemento clicado directamente. Va aquí, global y sin
  aislar: <InputFile> es un componente integrado de Blazor y no propaga el
  atributo de scope de CSS isolation a su <input> renderizado, así que una
  regla dentro de ZonaSoltarArchivo.razor.css nunca lo alcanzaría (bug real:
  el selector nativo "Elegir archivos / Ningún archivo seleccionado" quedaba
  visible debajo de la zona de arrastrar en todos los formularios de subida
  de documento — mismo motivo que el ripple de arriba).
*/
.zona-soltar-archivo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}