/* ======================================
   SUPERCLICK
   TEMA PETRÓLEO + VERDE AGUA
====================================== */

:root {
    --color-primary: #0f766e;
    --color-primary-dark: #115e59;
    --color-primary-light: #ccfbf1;

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-error: #dc2626;
    --color-info: #0891b2;

    --color-background: #f2f8f7;
    --color-surface: #ffffff;

    --color-text: #17302d;
    --color-text-secondary: #60736f;

    --color-border: #d5ebe7;

    --shadow-small:
        0 5px 16px
        rgba(15, 118, 110, 0.08);

    --shadow-medium:
        0 14px 36px
        rgba(15, 118, 110, 0.14);

    --shadow-large:
        0 28px 75px
        rgba(17, 94, 89, 0.18);
}


/* Fondo */

body {
    background:
        radial-gradient(
            circle at top left,
            #ccfbf1 0,
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f8fffd,
            #edf8f5
        ) !important;
}


/* Cabeceras principales */

.cliente-bienvenida,
.gerente-bienvenida {
    background:
        linear-gradient(
            135deg,
            #115e59,
            #0f766e,
            #14b8a6
        ) !important;
}


/* Botones principales */

.login-card button:not(.alternar-password):not(.boton-google):not(.boton-facebook):not(.boton-login-principal):not(.boton-social),
.boton-cesta,
.boton-confirmar,
.boton-confirmar-pedido,
.boton-anadir-producto,
.boton-agregar-favoritos,
.boton-guardar-producto,
.boton-guardar-empleado,
.boton-guardar-horario {
    background:
        linear-gradient(
            135deg,
            #0f766e,
            #14b8a6
        ) !important;

    color: white !important;
}


/* Elementos destacados */

.marca-icono {
    background:
        linear-gradient(
            135deg,
            #115e59,
            #14b8a6
        ) !important;
}

.categoria-activa {
    border-color:
        #0f766e !important;

    background:
        #0f766e !important;

    color: white !important;
}

.producto-precio,
.gerente-metrica strong,
.gerente-accesos strong {
    color:
        #115e59 !important;
}

.producto-categoria,
.estado-pedido,
.estado-horario.activo,
.producto-estado-gerente.disponible,
.empleado-estado.activo {
    background:
        #ccfbf1 !important;

    color:
        #0f766e !important;
}