/*
 * Tema "Vidro & Azul" (claro) -- mesma técnica de vidro fosco sobre
 * gradiente mesh, mas sem roxo/rosa. Azul índigo como única cor de
 * destaque, ciano e âmbar só como variação discreta nos KPIs.
 *
 * Este arquivo só sobrescreve/complementa o style.css -- carregado DEPOIS
 * dele.
 */

:root {
    --primary: #f3f5f8;
    --primary-dark: #f3f5f8;
    --secondary: rgba(255, 255, 255, 0.55);

    --text-light: #1a2233;
    --text-gray: #5c6779;

    /* Azul índigo -- a única cor de destaque do tema (sem roxo/rosa) */
    --accent: #2563eb;
    --accent-light: #4f7df0;

    --gold: #d97706;
    --gold-dark: #b45f04;

    --bg-dark: #f3f5f8;
    --bg-card: rgba(255, 205, 200, 0.55);
    --border-color: rgba(220, 38, 38, 0.30);

    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0891b2;

    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1741a6 100%);
    --gradient-gold: linear-gradient(135deg, #2563eb 0%, #1741a6 100%);
    --gradient-dark: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.35) 100%);

    --stripe: linear-gradient(90deg, #2563eb, #0891b2, #d97706, #2563eb);
}

body {
    background:
        radial-gradient(at 15% 20%, rgba(37, 99, 235, 0.16) 0px, transparent 50%),
        radial-gradient(at 85% 15%, rgba(8, 145, 178, 0.14) 0px, transparent 50%),
        radial-gradient(at 50% 95%, rgba(217, 119, 6, 0.10) 0px, transparent 55%),
        #f7f8fa;
    background-attachment: fixed;
}

/* Vidro fosco branco */
.header,
.card,
.stat-card,
.agendamento-item {
    background: rgba(255, 205, 200, 0.55) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    border-radius: 16px;
    border-top: 1px solid rgba(220, 38, 38, 0.30) !important;
    border-left: none !important;
    box-shadow: 0 8px 24px rgba(20, 30, 50, 0.10);
}

.card:hover,
.stat-card:hover,
.agendamento-item:hover {
    box-shadow: 0 12px 32px rgba(20, 30, 50, 0.12);
}

.header::before {
    height: 4px;
}

.header h1 {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--accent);
}

.header p {
    color: var(--text-gray);
}

.stat-number {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--accent);
}

/* Cada KPI com uma cor de destaque diferente (sem rosa/roxo) */
.stat-card:nth-child(1) { border-top: 3px solid var(--accent) !important; }
.stat-card:nth-child(1) .stat-number { color: var(--accent); }

.stat-card:nth-child(2) { border-top: 3px solid var(--info) !important; }
.stat-card:nth-child(2) .stat-number { color: var(--info); }

.stat-card:nth-child(3) { border-top: 3px solid var(--success) !important; }
.stat-card:nth-child(3) .stat-number { color: var(--success); }

.stat-card:nth-child(4) { border-top: 3px solid var(--gold) !important; }
.stat-card:nth-child(4) .stat-number { color: var(--gold-dark); }

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(220, 38, 38, 0.30);
    border-radius: 10px;
    color: var(--text-light);
}

.btn {
    border-radius: 10px;
}

.btn-primary,
.btn-gold {
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
}

.btn-primary:hover,
.btn-gold:hover {
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.38);
}

.status-confirmado {
    color: #ffffff;
}