:root {
    --tinta: #1A1A1A;
    --beige: #DCC3AB;
    --aqua: #8FD9D2;
    --amarillo: #F8E808;
    --naranja: #F59A0C;
    --durazno: #EDAA6B;
    --cafe: #B5855A;
    --crema: #FBF6F0;
    --gris-panel: #F3F1EE;
    --borde: #E3D9CD;
    --radio: 16px;
}

body {
    color: var(--tinta);
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.vista-cliente { background-color: var(--crema); }
body.vista-panel { background-color: var(--gris-panel); }

/*BOTONES*/

.btn { font-weight: 600; border-radius: 10px; }
.btn-pill { border-radius: 50rem; padding: 0.75rem 1.5rem; }

.btn-naranja { background-color: var(--naranja); border: 1px solid var(--naranja); color: var(--tinta); }
.btn-naranja:hover { background-color: var(--durazno); border-color: var(--durazno); color: var(--tinta); }

.btn-tinta { background-color: var(--tinta); border: 1px solid var(--tinta); color: #fff; }
.btn-tinta:hover { background-color: #333; border-color: #333; color: #fff; }

.btn-beige { background-color: var(--beige); border: 1px solid var(--beige); color: var(--tinta); }
.btn-beige:hover { background-color: #cfb49a; border-color: #cfb49a; color: var(--tinta); }

.btn-aqua { background-color: var(--aqua); border: 1px solid var(--aqua); color: var(--tinta); }
.btn-aqua:hover { background-color: #74c9c1; border-color: #74c9c1; color: var(--tinta); }

.btn-contorno { background-color: #fff; border: 1px solid var(--tinta); color: var(--tinta); }
.btn-contorno:hover { background-color: var(--beige); color: var(--tinta); }

/* Boton pildora de categoria: activo = naranja */
.btn-contorno.activo { background-color: var(--naranja); border-color: var(--naranja); }

/* NAVBAR OSCURA */
.navbar-felinos { background-color: var(--tinta); padding: 0.75rem 0; }
.navbar-felinos .navbar-brand { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 0.75rem; }
.navbar-felinos .logo-nav { height: 42px; width: 42px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.35); }
.navbar-felinos .nav-link { color: rgba(255, 255, 255, 0.85); font-weight: 600; letter-spacing: 0.04em; font-size: 0.9rem; }
.navbar-felinos .nav-link:hover, .navbar-felinos .nav-link:focus, .navbar-felinos .nav-link.show { color: #fff; }
.navbar-felinos .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); }
.navbar-felinos .navbar-toggler-icon { filter: invert(1); }
.navbar-felinos .dropdown-menu { border-radius: 12px; border: 1px solid var(--borde); padding: 0.4rem; }
.navbar-felinos .dropdown-item { border-radius: 8px; }
.navbar-felinos .dropdown-item:hover { background-color: var(--aqua); }
.navbar-felinos .icono-nav { color: #fff; font-size: 1.15rem; position: relative; }
.navbar-felinos .insignia-carrito {
    position: absolute; top: -6px; right: -10px; background-color: var(--naranja); color: var(--tinta);
    border-radius: 50rem; font-size: 0.7rem; font-weight: 700; padding: 1px 6px;
}

/* VISTA CLIENTE*/
.titulo-hero { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.1; }
.titulo-hero span { color: var(--naranja); }

/* IMAGEN DEL HERO */
.hero-imagen {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
    background-color: var(--beige);
}

.tarjeta-item {
    background-color: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; height: 100%; display: flex; flex-direction: column;
}
.tarjeta-item .tarjeta-imagen { width: 100%; height: 180px; object-fit: cover; display: block; background-color: var(--beige); }
.tarjeta-item .tarjeta-icono { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; }
.tarjeta-item .tarjeta-cuerpo { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.fondo-durazno { background-color: rgba(237, 170, 107, 0.5); }
.fondo-aqua { background-color: rgba(143, 217, 210, 0.5); }
.fondo-beige { background-color: rgba(220, 195, 171, 0.6); }

.caja-blanca { background-color: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem; }

/* LOGIN*/
/*FONDO DEL LOGIN (PLACEHOLDER)*/
.login-fondo {
    min-height: calc(100vh - 66px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--crema);
    background-image: linear-gradient(rgba(251, 246, 240, 0.82), rgba(251, 246, 240, 0.82)), url('../img/inicio.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.login-card {
    width: 100%; max-width: 430px; background-color: #fff; border: 1px solid var(--borde);
    border-radius: 20px; padding: 2rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/*FORMULARIOS */
.form-control, .form-select { border-radius: 12px; padding: 0.6rem 0.9rem; border-color: #d6c9ba; }
textarea.form-control { padding: 0.75rem 1rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--naranja);
    box-shadow: 0 0 0 0.2rem rgba(245, 154, 12, 0.25);
}
.form-check-input { width: 1.3rem; height: 1.3rem; border-radius: 0.4rem; border: 2px solid var(--cafe); margin-top: 0.1rem; }
.form-check-input:focus { border-color: var(--naranja); box-shadow: 0 0 0 0.2rem rgba(245, 154, 12, 0.25); }
.form-check-input:checked { background-color: var(--naranja); border-color: var(--naranja); }
.invalid-feedback-visible { color: #c0392b; font-size: 0.875rem; margin-top: 0.25rem; }

/*SCROLLAREA CON PROGRESSIVE BLUR*/
.scroll-blur {
    --bg-color: #ffffff;
    position: relative;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--bg-color);
    overflow: hidden;
}
.scroll-blur__area {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem 1rem 3rem 1rem;
}
.scroll-blur::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, var(--bg-color));
    pointer-events: none; /* no bloquea los clics */
    opacity: 0;
}
/* El JS agrega esta clase mientras queda contenido por desplazar */
.scroll-blur.con-difuminado::after { opacity: 1; }

/*ETIQUETAS DE ESTADO */
.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 50rem; font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(26, 26, 26, 0.2); }
.etiqueta-aqua { background-color: rgba(143, 217, 210, 0.7); }
.etiqueta-amarillo { background-color: rgba(248, 232, 8, 0.6); }
.etiqueta-durazno { background-color: rgba(237, 170, 107, 0.7); }
.etiqueta-beige { background-color: var(--beige); }
/* nombres que devuelve el modelo (clase_css) */
.etiqueta-teal { background-color: rgba(143, 217, 210, 0.7); }
.etiqueta-cafe { background-color: var(--beige); }

/*PANEL (dashboard de administrador / empleado)*/
.panel-sidebar { background-color: var(--tinta); color: #fff; }
.panel-sidebar .panel-marca { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; }
.panel-sidebar .panel-marca img { height: 38px; width: 38px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.35); }
.panel-link { display: flex; align-items: center; gap: 0.75rem; color: rgba(255, 255, 255, 0.8); text-decoration: none; padding: 0.55rem 0.8rem; border-radius: 10px; font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.panel-link:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; }
.panel-link.activo { background-color: var(--naranja); color: var(--tinta); }

.tarjeta-dato { background-color: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1rem; display: flex; align-items: center; gap: 0.9rem; }
.tarjeta-dato .icono-dato { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.tarjeta-dato .numero { font-size: 1.7rem; font-weight: 800; line-height: 1; }

.tabla-panel { background-color: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.tabla-panel table { margin-bottom: 0; font-size: 0.92rem; }
.tabla-panel thead th { background-color: var(--aqua); border-bottom: 1px solid var(--tinta); font-weight: 700; white-space: nowrap; }
.tabla-panel td { vertical-align: middle; }