/* ============================================================
   FERVI NATURALS - THEME PREMIUM ULTRA PROFESIONAL
   ============================================================ */

/* ============================================================
   VARIABLES PRINCIPALES
   ============================================================ */
:root {
    --verde-premium: #0EB15E;
    --verde-oscuro: #064E3B;
    --dorado: #D4AF37;
    --rojo-elegante: #C1121F;

    --texto-primario: #111827;
    --texto-secundario: #6b7280;

    --gris-fondo: #F4F6FC;
    --gris-card: #FFFFFF;
    --gris-borde: #E0E4EE;

    --sombra-card: 0 8px 22px rgba(0,0,0,0.12);

    /* MODO OSCURO */
    --dark-bg: #0f172a;
    --dark-sec: #1e293b;
    --dark-card: #273449;
    --dark-text: #E2E8F0;
    --dark-border: #334155;
}

/* RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background-color: var(--gris-fondo);
    color: var(--texto-primario);
    overflow-x: hidden;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-fervi {
    background: linear-gradient(90deg, var(--verde-oscuro), var(--verde-premium)) !important;
    padding: .7rem 1.2rem;
    border-bottom: none;
}

body.dark-mode .navbar-fervi {
    background: #111827 !important;
    border-bottom: 1px solid #1f2937 !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-custom {
    width: 240px;
    background-color: var(--gris-card);
    border-right: 1px solid var(--gris-borde);
    padding: 1rem .8rem;
}

.sidebar-custom .nav-link {
    padding: .65rem 1rem;
    border-radius: 10px;
    display: flex; align-items: center; gap: 8px;
    font-size: .96rem; font-weight: 500;
    color: #374151;
    transition: .25s;
}

.sidebar-custom .nav-link:hover {
    background-color: rgba(14,177,94,0.12);
    color: var(--verde-premium);
    transform: translateX(3px);
}

.sidebar-custom .active {
    background-color: rgba(14,177,94,0.22);
    color: var(--verde-premium) !important;
    font-weight: 700;
}

body.dark-mode .sidebar-custom {
    background-color: var(--dark-sec) !important;
    border-right: 1px solid var(--dark-border) !important;
}

body.dark-mode .sidebar-custom .nav-link {
    color: var(--dark-text) !important;
}

body.dark-mode .sidebar-custom .active {
    background-color: rgba(14,177,94,0.25) !important;
}

/* ============================================================
   CONTENIDO PRINCIPAL
   ============================================================ */
.main-wrapper { display: flex; width: 100%; }
.main-content {
    flex: 1;
    padding: 1.4rem 1.8rem;
    min-height: calc(100vh - 56px);
}

.dashboard-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

/* TARJETAS PREMIUM */
.card,
.stat-card {
    background-color: var(--gris-card);
    border: 1px solid var(--gris-borde);
    border-radius: 15px;
    box-shadow: var(--sombra-card);
}

body.dark-mode .card,
body.dark-mode .stat-card {
    background-color: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* FORM CARDS */
.form-card {
    background: var(--gris-card);
    border: 1px solid var(--gris-borde);
    border-radius: 15px;
    padding: 1.6rem 1.9rem;
    max-width: 900px;
    margin: auto;
    box-shadow: var(--sombra-card);
}

body.dark-mode .form-card {
    background: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
}

/* ============================================================
   MODO OSCURO REAL
   ============================================================ */
body.dark-mode {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode table td,
body.dark-mode table th {
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background:#1e293b !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* ============================================================
   MICRÓFONO PREMIUM ANIMADO — DEFINITIVO
   ============================================================ */
.btn-voice {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #00aaff, #0EB15E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.btn-voice i { font-size: 1.4rem; }

/* Estado escuchando */
.btn-voice.listening {
    animation: pulseRing 1.2s infinite;
    background: linear-gradient(135deg, #00e0ff, #22ff9c);
}

/* Ondas */
.btn-voice.listening::before,
.btn-voice.listening::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130%;
    height: 130%;
    background: rgba(0, 200, 255, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    animation: wavePulse 1.5s infinite ease-out;
}

.btn-voice.listening::after {
    animation-delay: 0.6s;
}

/* Animaciones */
@keyframes pulseRing {
    0% { transform: scale(1);    box-shadow: 0 0 12px #0EB15E; }
    50%{ transform: scale(1.08); box-shadow: 0 0 18px #00c8ff; }
    100%{ transform: scale(1);   box-shadow: 0 0 12px #0EB15E; }
}

@keyframes wavePulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.9; }
    100%{ transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .sidebar-custom { display: none; }
    .main-content { width:100%; padding: 1.2rem; }
}