/* =====================================================================
   base.css: lo que comparten TODAS las páginas, incluida la demo de la app.
   Aquí no hay colores de tema (claro/oscuro): esos están en web.css.
   ===================================================================== */

/* ---------- Constantes de marca y movimiento ---------- */
:root{
  --ambar:#E8A13A;          /* ámbar de la marca (barra alta del logo) */
  --ambar-claro:#F0B457;    /* ámbar para fondos oscuros */
  --naranja:#FF9500;        /* naranja de sistema: palabras destacadas */

  --curva:cubic-bezier(.32,.72,0,1);          /* salida estilo iOS: la de casi todo */
  --curva-salida:cubic-bezier(.22,1,.36,1);   /* salida suave (ease-out-quint) */
  --curva-expo:cubic-bezier(.16,1,.3,1);      /* salida muy marcada (ease-out-expo) */

  --anillo-foco:0 0 0 3px rgba(232,161,58,.55);
}

/* ---------- Ajustes generales ---------- */
button,input,select,textarea{font-family:inherit}
::selection{background:rgba(232,161,58,.28)}

/* Foco visible y coherente cuando se navega con teclado. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--anillo-foco)!important}
:where(input,textarea,select){caret-color:var(--ambar)}

/* Campo sin borde dentro de una lista o caja: el foco tiñe la caja entera. */
.campo-integrado :focus-visible{box-shadow:none!important}
.campo-integrado:focus-within{box-shadow:inset 0 0 0 2px rgba(232,161,58,.55)}

/* Efecto de pulsación: botones y enlaces se hunden un poco al pulsarlos
   (nunca al pasar el ratón). */
:where(button,a){transition:transform 380ms var(--curva),background-color 260ms var(--curva),color 260ms var(--curva),
  box-shadow 380ms var(--curva),border-color 260ms var(--curva),filter 260ms var(--curva)}
:where(button):active:not(:disabled){transform:scale(.97);transition-duration:90ms}

/* ---------- Animaciones reutilizables ---------- */
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes hoja-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes entrar-desde-derecha{from{transform:translateX(100%)}to{transform:none}}
@keyframes aviso-entra{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

.anim-subir{animation:subir 560ms var(--curva) both}
.anim-aparecer{animation:aparecer 320ms var(--curva) both}
.anim-hoja{animation:hoja-sube 520ms var(--curva) both}
.anim-entrar-lateral{animation:entrar-desde-derecha 480ms var(--curva) both}
.anim-aviso{animation:aviso-entra 420ms var(--curva-salida) both}

/* Cascada: los hijos entran uno detrás de otro (50 ms de diferencia). */
.anim-cascada>*{animation:subir 560ms var(--curva) both}
.anim-cascada>*:nth-child(2){animation-delay:50ms}
.anim-cascada>*:nth-child(3){animation-delay:100ms}
.anim-cascada>*:nth-child(4){animation-delay:150ms}
.anim-cascada>*:nth-child(5){animation-delay:200ms}
.anim-cascada>*:nth-child(6){animation-delay:250ms}
.anim-cascada>*:nth-child(n+7){animation-delay:300ms}

/* ---------- Olas ámbar ----------
   Tres capas SVG del doble de ancho que se deslizan medio ancho en bucle.
   La forma se repite cada 1440 unidades, así que el corte no se nota. */
.olas{position:absolute;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}
.olas svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block;animation:ola-desliza var(--duracion,16s) linear infinite}
.olas svg:nth-child(2){--duracion:11s;animation-direction:reverse}
.olas svg:nth-child(3){--duracion:22s}
@keyframes ola-desliza{to{transform:translateX(-50%)}}

/* ---------- Movimiento reducido ----------
   Si la persona lo pide en su sistema, todo salta a su estado final. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .olas svg{animation:none!important}
}