/* Lo que estaba en el <style> de base.html (la Content-Security-Policy no deja
   estilos en linea). Se carga ANTES de app.css, donde estaba el <style>: la
   cascada contra Tailwind queda igual. */

/* ---- transicion de entrada para contenido que htmx reemplaza (busquedas
   en vivo de Venta, Recepcion, Conteo, Transferir): sin esto el
   reemplazo es instantaneo y se siente "de golpe". htmx agrega y saca
   estas clases el solo durante el swap, no hace falta JS. ---- */
.htmx-added {
  opacity: 0;
  transform: translateY(-4px);
}
.htmx-settling {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

/* ---- barra de progreso de navegacion ----
   Brainstock son paginas de verdad: cada click en un link o en "Aplicar"
   pide una pagina nueva al servidor, y hasta que llega no pasa nada en
   pantalla. Con un filtro de tres meses eso puede ser un segundo largo en
   el que parece que el click no se registro. La barra no sabe cuanto falta
   (no hay forma de saberlo en una navegacion normal): solo deja claro que
   algo esta pasando. ---- */
#barra-navegacion {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #0a655d, #14b8a6);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: width 400ms ease-out, opacity 200ms ease;
}
#barra-navegacion.activa { opacity: 1; }

/* Los saltos dentro de la misma pagina (ir a una seccion, volver arriba
   despues de guardar) se ven recorrer el camino en vez de teletransportar,
   asi no se pierde de vista donde se estaba. */
html {
  scroll-behavior: smooth;
}

/* ---- pantallas tactiles: los botones chicos crecen ----
   Botones como "Ver stock" o "Posponer 7 dias" miden 28px de alto, que en
   una pantalla se lee bien con un mouse pero con el dedo se falla. En un
   dispositivo tactil pasan a 40px, sin cambiar la densidad en escritorio
   (pointer: coarse solo aplica donde se apunta con el dedo). ---- */
@media (pointer: coarse) {
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .chip, .periodo-boton, .nav-link {
    min-height: 40px;
  }
  /* Un badge que ademas es un link se toca, asi que tambien tiene que ser
     tocable. Los badges que solo informan se quedan como estan. El
     inline-flex hace falta: min-height no aplica sobre un inline. */
  a[class*="badge-"], button[class*="badge-"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  /* Las casillas tambien: 18px se ve bien pero con el dedo se falla.
     Va con "body" adelante a proposito: Tailwind inyecta su CSS DESPUES de
     este bloque y ahi tambien define el tamaño, asi que con la misma
     especificidad ganaria el suyo. Con un selector mas especifico no. */
  body input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
  /* Un link en medio de una oracion ("se configura en Mi perfil") media 19px
     de alto. Con padding y el mismo margen en negativo se toca en 39px sin
     agrandar el renglon. */
  .enlace-en-texto {
    display: inline-block;
    padding-block: 10px;
    margin-block: -10px;
  }
}

/* ---- tres puntitos del asistente mientras piensa ---- */
.asistente-punto {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 1px;
  border-radius: 9999px;
  background: #94a3b8;
  animation: puntoLatido 1.2s infinite ease-in-out;
}
.asistente-punto:nth-child(2) { animation-delay: .15s; }
.asistente-punto:nth-child(3) { animation-delay: .3s; }
@keyframes puntoLatido {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

@keyframes toastEntra {
  from { opacity: 0; transform: translateX(24px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---- entrada de pagina: Brainstock son paginas de verdad, una por pantalla,
   no una sola que cambia por dentro. Sin esto cada navegacion es un corte
   seco. Es corto y arranca casi visible a proposito: un fade desde cero
   deja un parpadeo en blanco antes de que aparezca nada. ---- */
@keyframes entradaPagina {
  from { opacity: 0.4; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- menu flotante (boton "Descargar" y companía): entra desde arriba
   y con una escala apenas menor, anclado a su esquina, para que se lea
   que sale del boton y no que aparece de la nada. ---- */

/* ---- respeta "reducir movimiento" del sistema operativo: cualquier
   animacion o transicion de las de arriba (y de cualquier utilidad de
   Tailwind) se reduce a casi nada en vez de desactivar la app entera. ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- htmx: sus indicadores de carga. htmx los inyectaba en un <style>
   propio, que la CSP no deja: van aca (htmx-config: includeIndicatorStyles
   false, en base.html). ---- */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

/* el <svg> con el filtro de la refraccion: no ocupa lugar (antes style=) */
.svg-filtros { position: absolute; width: 0; height: 0; }