/* Íconos, carga y efectos suaves, compartidos por gestión, la caja de venta y el anotador.
   Cada página lo enlaza antes de su propio <style>, así lo particular de cada una manda. */
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Mientras carga: bloques grises con brillo en vez de "Cargando…" */
.esqueleto{display:grid;gap:12px;padding:16px;width:100%}
.esqueleto i{display:block;height:16px;border-radius:6px;background:linear-gradient(90deg,var(--line) 25%,var(--surface) 50%,var(--line) 75%);background-size:200% 100%;animation:brillo 1.2s ease-in-out infinite}
.esqueleto i:nth-child(1){width:45%;height:22px}.esqueleto i:nth-child(3){width:85%}.esqueleto i:nth-child(4){width:65%}
@keyframes brillo{from{background-position:100% 0}to{background-position:-100% 0}}

/* Botones que responden al tocar */
button,.btn{transition:transform .12s ease,background-color .15s,border-color .2s,opacity .15s}
button:active:not(:disabled),.btn:active{transform:scale(.96)}

/* Pantallas, avisos y ventanas que entran suave */
#vista.entrar{animation:entrar .25s ease-out}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast:not([hidden]){animation:aviso .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes aviso{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
.msg{animation:aparecer .2s ease-out}
.modal{animation:aparecer .18s ease-out}
.modal .caja{animation:pop .24s cubic-bezier(.2,.9,.3,1.2)}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Filas alternadas: una fila sí y otra no con un gris suave, en todas las tablas (dinero o productos), para seguir
   bien cada fila con la vista. Se mezcla con el fondo de la tarjeta, así sirve en modo claro y oscuro.
   La fila de totales no se pinta; la fila que se puede tocar sigue resaltando al pasar el mouse. */
:root{--fila-par:#E4DED6}
@media (prefers-color-scheme: dark){:root{--fila-par:#3A2A27}}
tbody tr:nth-child(even):not(.total) > td{background:var(--fila-par)}
table.planilla tbody tr:nth-child(even):not(.total) > td:first-child{background:var(--fila-par)}
tbody tr.click:hover:not(.total) > td{background:var(--surface2)}