:root {
    --np-black: #000000;
    --np-red: #C50000;
    --np-white: #FFFFFF;
    --np-font-heading: "Archivo", sans-serif;
    --np-font-body: "Manrope", sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    /* 100vh como fallback para navegadores viejos; 100dvh (dynamic viewport
       height) pisa esa línea en los que sí lo soportan — en mobile (Safari/
       Chrome), la barra de direcciones que aparece/desaparece al hacer scroll
       cambia el alto real disponible, y 100vh clásico no lo sigue, así que el
       footer podía terminar "flotando" antes del borde real de la pantalla en
       vez de pegado abajo del todo. */
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--np-font-body);
    font-weight: 400;
    background-color: #f5f5f5;
    color: var(--np-black);
}

.app-footer {
    margin-top: auto;
    background-color: var(--np-black);
    color: var(--np-white);
    padding: 1rem 0;
}

.app-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.app-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    opacity: 0.85;
}

.app-footer__credit {
    color: var(--np-white);
    opacity: 0.7;
    text-decoration: none;
}

.app-footer__credit:hover {
    color: var(--np-red);
    opacity: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--np-font-heading);
    font-weight: 800;
}

.navbar-np {
    background-color: var(--np-black);
}

.navbar-np .navbar-brand,
.navbar-np .nav-link {
    color: var(--np-white);
}

.navbar-np .nav-link:hover {
    color: var(--np-red);
}

.btn-np-primary {
    background-color: var(--np-red);
    border-color: var(--np-red);
    color: var(--np-white);
}

.btn-np-primary:hover {
    background-color: #a00000;
    border-color: #a00000;
    color: var(--np-white);
}

.auth-card {
    max-width: 380px;
    margin: 10vh auto 0;
}

@media (max-width: 575.98px) {
    .auth-card {
        margin-top: 5vh;
    }
}

/* Uso pensado desde el taller/piso de producción en celular: botones y
   controles de formulario con altura mínima de 44px (tamaño de tap target
   recomendado), no solo el padding por default de Bootstrap. */
.btn,
.form-control,
.form-select {
    min-height: 44px;
}

.status-badge-quote { background-color: #6c757d; }
.status-badge-in-progress { background-color: #0d6efd; }
.status-badge-ready-for-pickup { background-color: #fd7e14; }
.status-badge-payment-due { background-color: #ffc107; color: var(--np-black); }
.status-badge-completed { background-color: #198754; }
.status-badge-cancelled { background-color: var(--np-red); }

/* Firma discreta en el login, enlaza a flowlyt.cloud (a pedido de Vito, 2026-08-11). */
.creator-badge {
    position: fixed;
    bottom: 72px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: var(--np-black);
    color: var(--np-white);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    animation: creator-badge-in 0.6s ease-out 0.5s forwards;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    z-index: 1000;
}

.creator-badge:hover,
.creator-badge:focus-visible {
    opacity: 1;
    background-color: var(--np-red);
    color: var(--np-white);
    transform: translateY(0) scale(1.05);
}

.creator-badge__spark {
    display: inline-block;
    animation: creator-badge-spark 2.4s ease-in-out infinite;
}

@keyframes creator-badge-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 0.6; transform: translateY(0); }
}

@keyframes creator-badge-spark {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-18deg); }
}

@media (max-width: 575.98px) {
    .creator-badge {
        bottom: 66px;
        right: 10px;
        padding: 5px 12px;
        font-size: 11px;
    }
}