/* =========================
   VARIABLES DE TEMA
   ========================= */

:root {
    /* Fondo general */
    --color-bg: #0f1a14;
    --color-text: #eef7ef;

    /* Tipografía */
    --title-color: #f4fbf4;

    /* Botones generales */
    --button-bg: linear-gradient(180deg, #1d3527 0%, #1a2f22 100%);
    --button-bg-hover: linear-gradient(180deg, #254530 0%, #213c2a 100%);
    --button-border: rgba(132, 193, 150, 0.22);

    /* Botón destacado (Instalar APP) */
    --accent-color: #9fe3b6;
    --accent-bg: linear-gradient(180deg, #3d8059 0%, #2f6948 100%);
    --accent-bg-hover: linear-gradient(180deg, #4a9467 0%, #397d56 100%);
    --accent-border: rgba(180, 236, 196, 0.34);

    /* Tarjetas / bloques */
    --card-bg: rgba(210, 240, 220, 0.06);
    --card-border: rgba(180, 236, 196, 0.14);

    /* Botones secundarios */
    --secondary-bg: rgba(210, 240, 220, 0.05);
    --secondary-border: rgba(180, 236, 196, 0.12);

    /* Footer */
    --footer-opacity: 0.8;

    /* Modal */
    --modal-bg: #142119;
    --modal-button-bg: #3d8059;
    --modal-button-border: rgba(180, 236, 196, 0.28);
}


/* =========================
   BASE VISUAL
   ========================= */

body {
    background:
        radial-gradient(circle at top, rgba(110, 168, 126, 0.10) 0%, rgba(110, 168, 126, 0) 32%),
        linear-gradient(180deg, #122016 0%, #0f1a14 100%);
    color: var(--color-text);
}


/* =========================
   CABECERA / MARCA
   ========================= */

.business-name {
    color: var(--title-color);
}


/* =========================
   BOTONES
   ========================= */

.menu-button {
    background: var(--button-bg);
    color: var(--color-text);
    border: 1px solid var(--button-border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.menu-button:hover {
    background: var(--button-bg-hover);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.menu-button:active {
    transform: scale(0.98);
}


/* =========================
   BOTÓN INSTALAR (DESTACADO)
   ========================= */

.install-button {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: #f8fff9;
}

.install-button:hover {
    background: var(--accent-bg-hover);
}


/* =========================
   FOOTER / MARCA CONVOY
   ========================= */

.footer-brand {
    opacity: var(--footer-opacity);
}


/* =========================
   PANTALLAS INTERNAS
   ========================= */

.back-button {
    background: var(--secondary-bg);
    border: 1px solid var(--secondary-border);
    color: var(--color-text);
}

.screen-title {
    color: var(--title-color);
}

.content-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--color-text);
}

.card-title {
    color: var(--title-color);
}

.schedule-row {
    border-bottom: 1px solid rgba(180, 236, 196, 0.10);
}


/* =========================
   MODAL INSTALACIÓN
   ========================= */

.install-content {
    background: var(--modal-bg);
    color: var(--color-text);
    border: 1px solid rgba(180, 236, 196, 0.16);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.install-content button {
    background: var(--modal-button-bg);
    color: #f8fff9;
    border: 1px solid var(--modal-button-border);
}


/* =========================
   AUTH
   ========================= */

.auth-register-button {
    background: var(--secondary-bg);
    border: 1px solid var(--secondary-border);
    color: var(--color-text);
}

.auth-separator,
.remember-me {
    color: var(--color-text);
}


/* =========================
   HOME PRIVADA
   ========================= */

.module-card {
    color: var(--color-text);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.secondary-action-button {
    color: var(--color-text);
    background: var(--secondary-bg);
    border: 1px solid var(--secondary-border);
}
.install-button {
    width: 88%;
    margin: 0 auto;
}