/* css/style.css - MediTurnos Theme */
:root {
    --primary: #0ea5e9;      /* Azul Cielo (Sky 500) */
    --primary-dark: #0284c7;
    --dark: #0f172a;         /* Azul Noche */
    --light: #f8fafc;        /* Blanco Hueso */
    --white: #ffffff;
    --green: #10b981;        /* Atendido */
    --yellow: #f59e0b;       /* En Espera */
    --red: #ef4444;          /* Cancelado */
    --sidebar-width: 260px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: var(--light); color: #334155; display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: var(--sidebar-width); background: var(--dark); color: white; position: fixed; height: 100vh; left: 0; top: 0; z-index: 1000; display: flex; flex-direction: column; border-right: 1px solid #1e293b; }
.brand { padding: 20px; font-size: 1.3rem; font-weight: 800; border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: 10px; }
.brand i { color: var(--primary); }
.nav-menu { list-style: none; padding: 20px 0; flex-grow: 1; }
.nav-item a { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #94a3b8; text-decoration: none; transition: 0.2s; border-left: 4px solid transparent; }
.nav-item a:hover, .nav-item a.active { background: #1e293b; color: var(--primary); border-left-color: var(--primary); }

/* Main */
.main-content { margin-left: var(--sidebar-width); flex-grow: 1; width: calc(100% - var(--sidebar-width)); }
/* --- HERO SECTION (Con tu imagen de Canva) --- */
.dashboard-hero {
    /* Tamaño y Espaciado */
    min-height: 200px; /* Altura mínima para que se luzca la foto */
    padding: 40px;
    
    /* Alineación de Texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    
    /* IMAGEN DE FONDO + FILTRO OSCURO */
    /* El linear-gradient oscurece la foto para que el texto blanco se lea perfecto */
    /* La ruta ../../ sube 2 niveles: sale de 'css', sale de 'gym' y entra a 'img' */
    background-image: 
        linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4)), 
        url('../../img/hero-turnos.jpg');
    
    /* Ajustes de la Imagen */
    background-size: cover;           /* Cubre todo el ancho */
    background-position: center;      /* Se centra automáticamente */
    background-repeat: no-repeat;
    
    /* Detalles Estéticos */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra al texto para lectura */
}

/* Ajuste para el título dentro del Hero */
.dashboard-hero h2 {
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: var(--primary); /* Color cian para destacar */
}

.dashboard-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
}

/* Responsive para móvil */
@media (max-width: 768px) {
    .dashboard-hero {
        padding: 20px;
        min-height: 150px;
        text-align: center;
        align-items: center;
    }
}
.container { max-width: 1200px; margin: -40px auto 40px auto; padding: 0 20px; position: relative; z-index: 10; }

/* Tarjetas de Turnos (Timeline) */
.timeline { display: flex; flex-direction: column; gap: 15px; }
.turno-card { 
    background: white; border-radius: 12px; padding: 20px; 
    box-shadow: var(--shadow); border-left: 6px solid #ccc;
    display: flex; align-items: center; justify-content: space-between;
    transition: 0.2s;
}
.turno-card:hover { transform: translateX(5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

.turno-time { font-size: 1.5rem; font-weight: 800; color: var(--dark); min-width: 100px; text-align: center; border-right: 1px solid #eee; padding-right: 20px; margin-right: 20px; }
.turno-info h3 { margin: 0; font-size: 1.1rem; }
.turno-info p { margin: 5px 0 0 0; color: #64748b; font-size: 0.9rem; }
.doctor-badge { font-size: 0.75rem; background: #e0f2fe; color: #0369a1; padding: 2px 8px; border-radius: 20px; font-weight: bold; }

/* Estados Colores */
.status-pendiente { border-left-color: #94a3b8; }
.status-espera { border-left-color: var(--yellow); background: #fffbeb; }
.status-atendido { border-left-color: var(--green); opacity: 0.7; }
.status-cancelado { border-left-color: var(--red); opacity: 0.5; text-decoration: line-through; }

/* Botones Acción */
.actions { display: flex; gap: 10px; }
.btn-icon { width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: 0.2s; color: white; text-decoration: none;}
.btn-check { background: var(--green); }
.btn-wait { background: var(--yellow); }
.btn-cancel { background: var(--red); }
.btn-wa { background: #25D366; }

/* Formulario */
.form-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: var(--shadow); max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 15px; }
.form-control { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; }
.btn-save { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }

/* Mobile */
.menu-toggle { display: none; position: fixed; top: 15px; right: 15px; z-index: 2000; background: var(--primary); border:none; color:white; padding:10px; border-radius:5px; }
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); transition: 0.3s; }
    .sidebar.active { transform: translateX(0); }
    .main-content { margin-left: 0; width: 100%; }
    .menu-toggle { display: block; }
    .turno-card { flex-direction: column; align-items: flex-start; gap: 15px; }
    .turno-time { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-right: 0; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; }
    .actions { width: 100%; justify-content: flex-end; }
}