/* ============================================================
   ESTILOS GENERALES
   ============================================================ */
body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* -------------------- LOGIN -------------------- */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3b532 0%, #e52924 100%);
	
}
.login-wrapper { width: 100%; max-width: 420px; padding: 20px; }
.login-card { border-radius: 18px; }

/* -------------------- MENU ADMIN -------------------- */
.menu-card {
    border-radius: 18px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.menu-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.15) !important;
}

/* -------------------- BADGES DE ESTATUS (tabla admin) -------------------- */
.estatus-badge { font-size: .8rem; padding: .5em .8em; border-radius: 50px; }
.estatus-1 { background-color: #ffb84d; color: #402800; }
.estatus-2 { background-color: #ff9800; color: #fff; }
.estatus-3 { background-color: #2ecc71; color: #fff; }
.estatus-4 { background-color: #6c757d; color: #fff; }

/* ============================================================
   PANTALLA PÚBLICA (elegante / profesional)
   ============================================================ */
.pantalla-body {
    min-height: 100vh;
    background: radial-gradient(circle at top, #1c1c1c 0%, #0a0a0a 100%);
    color: #fff;
}

.pantalla-header {
    background: linear-gradient(90deg, #fff, #fff);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0,0,0,.4);
}
.pantalla-header h1 {
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pantalla-header .subtitulo {
    font-weight: 500;
    opacity: .8;
}

.tarjeta-pedido {
    border-radius: 16px;
    padding: 1px 24px;
    height: 100%;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: transform .25s ease;
    border: 2px solid transparent;
}

.numero-pedido {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .5px;
}
.nombre-cliente {
    font-size: 2.8rem;
    font-weight: 500;
    opacity: .9;
}
.estatus-texto {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Estatus 1 y 2: recién ingresado / en preparación -> NARANJA */
.tarjeta-preparacion {
    background: linear-gradient(135deg, #ff9800, #e65100);
    color: #fff;
}

/* Estatus 3: LISTO -> VERDE, resaltado, arriba de la lista */
.tarjeta-listo {
    background: linear-gradient(135deg, #2ecc71, #1b7a3e);
    color: #fff;
    border-color: #ffffff;
}

/* Efecto llamativo para pedidos listos */
.efecto-llamativo {
    animation: pulso-glow 1.1s infinite ease-in-out;
}
@keyframes pulso-glow {
    0%   { box-shadow: 0 0 0px rgba(46,204,113,.6); transform: scale(1); }
    50%  { box-shadow: 0 0 35px rgba(46,204,113,.95); transform: scale(1.03); }
    100% { box-shadow: 0 0 0px rgba(46,204,113,.6); transform: scale(1); }
}

.tarjeta-listo .estatus-texto {
    animation: parpadeo-texto 1s infinite alternate;
}
@keyframes parpadeo-texto {
    from { opacity: 1; text-shadow: 0 0 6px #fff; }
    to   { opacity: .75; text-shadow: 0 0 18px #fff; }
}

.campana {
    animation: campanazo 0.6s infinite;
}
@keyframes campanazo {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}