body { background: #f1f3f5; }
.navbar-brand { font-weight: 600; }
.navbar .punto { color: #E6532E; }
.tile { border: 0; box-shadow: 0 .125rem .5rem rgba(0,0,0,.08); transition: transform .1s; color: inherit; }
.tile:active { transform: scale(.98); }
.tile-ico { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .6rem; }
.familia { position: sticky; top: 56px; z-index: 2; background: #f1f3f5; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6c757d; padding: .5rem .25rem .25rem; }
.item { border: 1px solid #dee2e6; }
.item.siguiente { border: 2px solid #0d6efd; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.item.hecho { opacity: .75; }
.item.flash { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { background: #d1e7dd; } 100% { background: #fff; } }
.contador { font-size: 1.6rem; line-height: 1; white-space: nowrap; }
.contador b { font-weight: 800; }
.contador span { font-size: 1rem; color: #6c757d; }
.aviso { border-radius: .5rem; padding: .6rem .8rem; font-weight: 600; font-size: 1.05rem; }
.aviso-ok { background: #d1e7dd; color: #0a3622; border: 1.5px solid #a3cfbb; }
.aviso-error { background: #f8d7da; color: #58151c; border: 1.5px solid #f1aeb5; }
.aviso-info { background: #cfe2ff; color: #052c65; border: 1.5px solid #9ec5fe; }
#scan { font-weight: 600; letter-spacing: .03em; }
@media (max-width: 400px) { .contador { font-size: 1.3rem; } }

.banner { border-radius: .5rem; padding: .8rem 1rem; font-weight: 700; font-size: 1.25rem; }
.banner-ok { background: #d1e7dd; color: #0a3622; border: 2px solid #a3cfbb; }
.banner-error { background: #f8d7da; color: #58151c; border: 2px solid #f1aeb5; }
.banner-info { background: #cfe2ff; color: #052c65; border: 2px solid #9ec5fe; }
.caja { border: 1px solid #dee2e6; border-radius: .5rem; padding: .5rem .6rem; margin-bottom: .5rem; background: #fff; }
.caja-abierta { border: 2px solid #0d6efd; }
.caja-cerrada { background: #f8f9fa; }
.caja-vacia { border-style: dashed; }
tr.flash td { animation: flash 1.1s ease-out; }