/* =========================================================================
   Box Food · App interna
   Base tomada del prototipo aprobado (11c). Poppins en TODO — fechas, folios,
   cifras y etiquetas incluidas. Nunca monospace.
   El resto del estilo va en línea, igual que el prototipo, para que lo que se
   ve sea exactamente lo que se aprobó.
   ========================================================================= */

@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap; src: url(/assets/poppins-500.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/poppins-700.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-style: normal; font-display: swap; src: url(/assets/poppins-800.woff2) format('woff2'); }

* { box-sizing: border-box; }
body { margin: 0; background: #f4f6f4; font-family: Poppins, sans-serif; color: #17221a; -webkit-font-smoothing: antialiased; }
a { color: #2e9c3e; }
a:hover { color: #173a20; }
button, input, textarea, select { font-family: Poppins, sans-serif; }

@keyframes bfPulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes bfUp    { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes bfPop   { from { opacity: 0; transform: scale(.93) translateY(12px) } to { opacity: 1; transform: none } }
@keyframes bfFade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes bfToast { from { opacity: 0; transform: translate(-50%, 16px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes bfMenu  { from { opacity: 0; transform: scale(.94) translateY(-8px) } to { opacity: 1; transform: none } }
@keyframes bfShake { 0%, 100% { transform: none } 20%, 60% { transform: translateX(-7px) } 40%, 80% { transform: translateX(7px) } }

div, span, input, textarea {
  transition: background .18s ease, background-color .18s ease, filter .18s ease,
              box-shadow .22s ease, border-color .18s ease, color .18s ease;
}
[data-ir], [data-accion] { -webkit-tap-highlight-color: transparent; }

input::placeholder, textarea::placeholder { color: #a8b0a8; }
input:focus, textarea:focus, select:focus { border-color: #2e9c3e !important; box-shadow: 0 0 0 3px rgba(57,180,74,.15); outline: none; }

/* La entrada solo se anima al cambiar de pantalla, no en cada repintado. */
.bf-entra { animation: bfUp .4s cubic-bezier(.22,.9,.3,1) both; }

/* filas y tarjetas que responden al toque */
.bf-click { cursor: pointer; }
.bf-click:active { transform: scale(.99); }
.bf-hov:hover { background: #f7faf7; }
.bf-hov-bad:hover { background: #fbecec; }
.bf-lift:hover { filter: brightness(1.06); }
.bf-brd:hover { border-color: #b9cebf !important; }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #d5ddd6; border-radius: 999px; border: 3px solid #f4f6f4; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1199px) { [data-hide-narrow] { display: none !important; } }

/* En celular la app se apila: el impresor y el encargado usan la misma base. */
@media (max-width: 860px) {
  [data-cols] { grid-template-columns: 1fr !important; }
  [data-rail] { display: none !important; }
}