/* ==========================================================================
   Base compartida entre el sitio público y el panel admin.
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--et-fuente-texto);
  font-size: var(--et-txt-base);
  line-height: 1.6;
  color: var(--et-texto);
  background: var(--et-fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--et-fuente-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--et-3);
  letter-spacing: -0.015em;
}
h1 { font-size: var(--et-txt-3xl); }
h2 { font-size: var(--et-txt-2xl); }
h3 { font-size: var(--et-txt-xl); }
p  { margin: 0 0 var(--et-3); }

a { color: var(--et-turquesa-oscuro); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--et-marino); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--et-turquesa-oscuro);
  outline-offset: 2px;
  border-radius: var(--et-radio-sm);
}

[hidden] { display: none !important; }

.et-contenedor {
  width: 100%;
  max-width: var(--et-ancho-max);
  margin-inline: auto;
  padding-inline: var(--et-4);
}

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

/* --- Botones -------------------------------------------------------------- */
.et-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--et-2);
  padding: 0.7rem 1.25rem;
  min-height: 44px;                       /* área táctil cómoda en móvil */
  border: 2px solid transparent;
  border-radius: var(--et-radio-full);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--et-transicion), box-shadow var(--et-transicion),
              background-color var(--et-transicion), border-color var(--et-transicion);
}
.et-btn:hover:not(:disabled) { transform: translateY(-1px); }
.et-btn:active:not(:disabled) { transform: translateY(0); }
.et-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.et-btn[data-cargando] { color: transparent; position: relative; }
.et-btn[data-cargando]::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: et-girar 0.7s linear infinite;
  color: var(--et-marino);
}
@keyframes et-girar { to { transform: rotate(360deg); } }

.et-btn--sol {
  background: var(--et-amarillo);
  color: var(--et-marino);
  box-shadow: var(--et-sombra-sm);
}
.et-btn--sol:hover:not(:disabled) {
  background: var(--et-amarillo-oscuro);
  box-shadow: var(--et-sombra);
}

.et-btn--mar {
  background: var(--et-turquesa-oscuro);
  color: var(--et-blanco);
}
.et-btn--mar:hover:not(:disabled) { background: var(--et-marino); }
.et-btn--mar[data-cargando]::after { color: var(--et-blanco); }

.et-btn--contorno {
  background: transparent;
  border-color: var(--et-borde);
  color: var(--et-texto);
}
.et-btn--contorno:hover:not(:disabled) {
  border-color: var(--et-turquesa-oscuro);
  color: var(--et-turquesa-oscuro);
}

.et-btn--peligro {
  background: transparent;
  border-color: color-mix(in srgb, var(--et-error) 35%, white);
  color: var(--et-error);
}
.et-btn--peligro:hover:not(:disabled) {
  background: var(--et-error-suave);
  border-color: var(--et-error);
}

.et-btn--wa { background: #25D366; color: #05321A; }
.et-btn--wa:hover:not(:disabled) { background: #1EB756; }

.et-btn--bloque { width: 100%; }
.et-btn--sm { padding: 0.4rem 0.85rem; min-height: 36px; font-size: var(--et-txt-sm); }

/* --- Etiquetas de estado -------------------------------------------------- */
.et-chip {
  display: inline-flex; align-items: center; gap: var(--et-1);
  padding: 0.2rem 0.7rem;
  border-radius: var(--et-radio-full);
  font-size: var(--et-txt-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.et-chip--ok      { background: var(--et-exito-suave);  color: var(--et-exito); }
.et-chip--espera  { background: var(--et-alerta-suave); color: var(--et-alerta); }
.et-chip--error   { background: var(--et-error-suave);  color: var(--et-error); }
.et-chip--neutro  { background: var(--et-gris-100);     color: var(--et-gris-800); }
.et-chip--mar     { background: var(--et-turquesa-suave); color: var(--et-turquesa-oscuro); }
.et-chip--sol     { background: var(--et-amarillo-suave); color: #7A5200; }

/* --- Formularios ---------------------------------------------------------- */
.et-campo { margin-bottom: var(--et-4); }
.et-campo label {
  display: block;
  font-size: var(--et-txt-sm);
  font-weight: 650;
  margin-bottom: var(--et-1);
}
.et-campo .et-ayuda {
  display: block;
  font-size: var(--et-txt-xs);
  color: var(--et-texto-suave);
  margin-top: var(--et-1);
}
.et-campo .et-error-campo {
  display: block;
  font-size: var(--et-txt-xs);
  color: var(--et-error);
  font-weight: 600;
  margin-top: var(--et-1);
}

.et-input, .et-select, .et-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  min-height: 44px;
  font: inherit;
  color: var(--et-texto);
  background: var(--et-blanco);
  border: 1.5px solid var(--et-borde);
  border-radius: var(--et-radio-sm);
  transition: border-color var(--et-transicion), box-shadow var(--et-transicion);
}
.et-textarea { min-height: 96px; resize: vertical; }
.et-input:focus, .et-select:focus, .et-textarea:focus {
  outline: none;
  border-color: var(--et-turquesa-oscuro);
  box-shadow: 0 0 0 3px var(--et-turquesa-suave);
}
.et-input[aria-invalid='true'] { border-color: var(--et-error); }
.et-fila { display: grid; gap: var(--et-3); }
@media (min-width: 620px) { .et-fila--2 { grid-template-columns: 1fr 1fr; } }

/* --- Tarjetas y avisos ---------------------------------------------------- */
.et-tarjeta {
  background: var(--et-superficie);
  border-radius: var(--et-radio);
  box-shadow: var(--et-sombra-sm);
  padding: var(--et-5);
}

.et-aviso {
  display: flex; gap: var(--et-3);
  padding: var(--et-3) var(--et-4);
  border-radius: var(--et-radio-sm);
  border-left: 4px solid;
  font-size: var(--et-txt-sm);
}
.et-aviso--info  { background: var(--et-turquesa-suave); border-color: var(--et-turquesa-oscuro); }
.et-aviso--ok    { background: var(--et-exito-suave);  border-color: var(--et-exito); }
.et-aviso--alerta{ background: var(--et-alerta-suave); border-color: var(--et-alerta); }
.et-aviso--error { background: var(--et-error-suave);  border-color: var(--et-error); }

/* --- Estados de carga / vacío --------------------------------------------- */
.et-cargando, .et-vacio {
  text-align: center;
  padding: var(--et-7) var(--et-4);
  color: var(--et-texto-suave);
}
.et-vacio__icono {
  display: inline-flex;
  padding: var(--et-3);
  border-radius: 50%;
  background: var(--et-gris-100);
  color: var(--et-gris-600);
  margin-bottom: var(--et-3);
}

.et-esqueleto {
  background: linear-gradient(90deg, var(--et-gris-100) 25%, var(--et-gris-50) 50%, var(--et-gris-100) 75%);
  background-size: 200% 100%;
  animation: et-brillo 1.4s ease-in-out infinite;
  border-radius: var(--et-radio-sm);
}
@keyframes et-brillo { to { background-position: -200% 0; } }

/* --- Toast ---------------------------------------------------------------- */
.et-toast {
  position: fixed;
  left: 50%; bottom: var(--et-5);
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(90vw, 460px);
  padding: var(--et-3) var(--et-5);
  border-radius: var(--et-radio-full);
  font-size: var(--et-txt-sm);
  font-weight: 600;
  color: var(--et-blanco);
  background: var(--et-marino);
  box-shadow: var(--et-sombra-lg);
  animation: et-subir 220ms ease-out;
}
.et-toast--ok    { background: var(--et-exito); }
.et-toast--error { background: var(--et-error); }
@keyframes et-subir {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Movimiento
   Todo lo de aquí queda desactivado automáticamente para quien tenga activada
   la preferencia "reducir movimiento" (ver el bloque al final de tokens.css).
   ========================================================================== */

@keyframes et-entrar {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes et-fundir {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes et-emerger {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes et-deslizar-der {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Cristal --------------------------------------------------------------- */
.et-vidrio {
  background: var(--et-vidrio);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  border: 1px solid var(--et-vidrio-borde);
  box-shadow: var(--et-vidrio-sombra);
}
.et-vidrio--oscuro {
  background: var(--et-vidrio-oscuro);
  border-color: var(--et-vidrio-borde-oscuro);
  color: var(--et-blanco);
}

/* --- Aparición al hacer scroll -------------------------------------------
   El JS (revelarAlEntrar) añade .et-visible cuando el elemento entra en
   pantalla. Si el navegador no soporta IntersectionObserver, se añade de
   inmediato y no se pierde nada. */
.et-revela {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--et-salida), transform 700ms var(--et-salida);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.et-revela.et-visible { opacity: 1; transform: none; }

/* Entrada escalonada: basta con poner style="--i:3" en cada elemento. */
.et-entra {
  animation: et-entrar var(--et-t-lenta) var(--et-salida) backwards;
  animation-delay: calc(var(--i, 0) * var(--et-escalon));
}
.et-fundido { animation: et-fundir var(--et-t-media) var(--et-suave) backwards; }

/* --- Iconos --------------------------------------------------------------- */
.et-icono {
  flex: none;
  vertical-align: -0.18em;
  transition: transform var(--et-transicion);
}
.et-btn .et-icono { vertical-align: 0; }

/* --- Marca de éxito animada ----------------------------------------------- */
.et-exito { color: var(--et-exito); }
.et-exito__circulo {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: et-trazar 620ms var(--et-salida) forwards;
}
.et-exito__trazo {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: et-trazar 380ms var(--et-salida) 460ms forwards;
}
@keyframes et-trazar { to { stroke-dashoffset: 0; } }

/* --- Botones: microinteracción -------------------------------------------- */
/* El velo de pulsación va en ::before porque ::after ya lo ocupa el spinner. */
.et-btn { position: relative; overflow: hidden; }
.et-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--et-transicion);
}
.et-btn:active:not(:disabled)::before { opacity: 0.1; }

/* Solo se desplazan los iconos marcados como direccionales. */
.et-btn:hover:not(:disabled) .et-icono--desliza { transform: translateX(3px); }
.et-btn:hover:not(:disabled) .et-icono--desliza-izq { transform: translateX(-3px); }

/* --- Campos: foco progresivo ---------------------------------------------- */
.et-input, .et-select, .et-textarea {
  transition: border-color var(--et-transicion),
              box-shadow var(--et-t-media) var(--et-suave),
              background-color var(--et-transicion);
}

/* --- Avisos que aparecen --------------------------------------------------- */
.et-aviso:not([hidden]) { animation: et-emerger var(--et-t-media) var(--et-salida) backwards; }
.et-error-campo:not([hidden]) { animation: et-deslizar-der var(--et-t-rapida) var(--et-suave) backwards; }