/* ==========================================================================
   0. VARIABLES Y CONFIGURACIÓN BASE
   ========================================================================== */
:root {
    --color-primario: #d4a017;   /* Dorado */
    --color-secundario: #1e1e1e; /* Gris oscuro headers/cards */
    --color-fondo: #121212;      /* Fondo principal */
    --color-texto: #ffffff;
    --color-borde: #333;
    --color-rojo-oscuro: #842029; /* Para botones de salir */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================================
   1. ESTILOS BASE (Mundo Cliente: Index, Calendario, Turnos)
   ========================================================================== */
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Padding para el header fijo (excepto en login y admin) */
body:not(.page-login):not(.page-admin) {
    padding-top: 60px;
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { list-style: none; }
main { flex: 1; width: 100%; }

/* --- HEADER CLIENTE --- */
.app-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background-color: var(--color-secundario);
    border-bottom: 2px solid var(--color-primario);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 15px; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.logo-container {
    display: flex; align-items: center; gap: 10px;
    color: var(--color-primario); font-size: 1.1rem; font-weight: 800; letter-spacing: 1px;
}

.login-btn-header {
    font-size: 0.85rem; color: #fff; border: 1px solid #555;
    padding: 6px 12px; border-radius: 4px; transition: 0.3s;
    background: rgba(255,255,255,0.05);
}
.login-btn-header:hover { border-color: var(--color-primario); color: var(--color-primario); }

/* --- HERO SECTION --- */
.hero-section {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    padding: 20px; overflow: hidden;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.85)), url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?q=80');
    background-size: cover; background-position: center;
}

.hero-logo-img {
    width: 50vw; max-width: 300px; height: auto;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
    margin-bottom: 25px; animation: fadeInDown 1s ease-out;
}

.hero-subtitle {
    color: #e0e0e0; margin-bottom: 40px; font-size: 1.1rem;
    text-shadow: 1px 1px 3px #000; letter-spacing: 0.5px;
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* --- FOOTER --- */
.app-footer {
    background-color: #151515; color: #666; text-align: center;
    padding: 20px; font-size: 0.85rem; border-top: 1px solid #222; margin-top: auto;
}
.mm-brand { color: var(--color-primario); font-weight: bold; }
/* Ejemplo de mejora para el enlace de atribución */
.app-footer {
    text-align: center;
    padding: 15px 0;
    /* ... otros estilos de fondo/color */
    background-color: #121212; /* Fondo del footer, si es necesario */
    color: #888;
    font-size: 0.85rem;
}

.mm-brand-link {
    /* Estilo para que destaque, pero sin ser intrusivo */
    color: #e0ac1d; /* Usando tu color primario */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s;
}

.mm-brand-link:hover {
    color: #fff; /* Blanco al pasar el mouse */
}
/* --- ELEMENTOS UI --- */
.btn {
    display: flex; justify-content: center; align-items: center;
    width: 100%; padding: 16px; border-radius: 8px;
    font-weight: bold; font-size: 1rem; cursor: pointer; border: none;
    margin-bottom: 15px; transition: transform 0.1s, background-color 0.2s;
    text-transform: uppercase; gap: 10px;
}
.btn:active { transform: scale(0.96); }

.btn-primary { background-color: var(--color-primario); color: #121212; box-shadow: 0 4px 15px rgba(224, 172, 29, 0.3); }
.btn-primary:hover { background-color: #d4a017; }

.btn-secondary { background: transparent; border: 2px solid var(--color-primario); color: var(--color-primario); }
.btn-secondary:hover { background: rgba(224, 172, 29, 0.1); }

/* --- CALENDARIO Y GRILLAS --- */
.container { padding: 15px; max-width: 800px; margin: 0 auto; }
.week-navigator {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; background-color: var(--color-secundario);
    border-bottom: 1px solid var(--color-borde);
    position: sticky; top: 60px; z-index: 900;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); margin-bottom: 20px;
}
.week-navigator h3 { font-size: 1rem; color: #fff; margin: 0; }
.nav-arrow { background: #333; color: var(--color-primario); padding: 8px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; }

/* Cards de día */
.day-card {
    background: var(--color-secundario); border-radius: 10px;
    margin-bottom: 20px; padding: 15px; border-left: 5px solid #444;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.day-card.today { border-left-color: var(--color-primario); background: #252525; }
.day-header {
    font-size: 1.1rem; color: #f0f0f0; margin-bottom: 15px;
    font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 8px; text-transform: capitalize;
}

/* Grillas horarios */
.hours-grid, .slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.time-btn, .slot-btn {
    padding: 10px 0; text-align: center; font-size: 0.9rem;
    border-radius: 6px; font-weight: 600; display: block; transition: 0.2s;
    background-color: #2a2a2a; color: #fff; border: 1px solid #444;
}
.time-btn:hover, .slot-btn:hover { background-color: var(--color-primario); color: #121212; border-color: var(--color-primario); }
.time-taken { background-color: #151515; color: #444; text-decoration: line-through; border: 1px solid #222; pointer-events: none; opacity: 0.7; }

/* Service cards */
.service-card {
    background: #222; padding: 20px; border-radius: 12px; margin-bottom: 15px;
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid #333; transition: border-color 0.2s; cursor: pointer;
}
.service-card:hover { border-color: var(--color-primario); }
.service-info h3 { color: var(--color-primario); font-size: 1.1rem; margin-bottom: 5px; }
.service-price { font-size: 1.3rem; font-weight: bold; color: #fff; background: #333; padding: 8px 12px; border-radius: 8px; }

/* Inputs Generales */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"] {
    width: 100%; padding: 15px; background: #333; border: 1px solid #555;
    color: #fff; border-radius: 8px; font-size: 1rem; outline: none; margin-bottom: 15px;
}
input:focus { border-color: var(--color-primario); background: #3a3a3a; }
label { display: block; margin-bottom: 8px; color: #ccc; font-weight: 500; }

/* ==========================================================================
   2. ESTILOS LOGIN Y REGISTRO (.page-login)
   ========================================================================== */
body.page-login {
    background-image: url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?q=80');
    background-size: cover; background-position: center; background-attachment: fixed;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; min-height: 100vh;
}
body.page-login::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)); z-index: 0; pointer-events: none;
}
.login-container { width: 100%; max-width: 400px; position: relative; z-index: 10; margin: auto; }
.card-login {
    background-color: #1a1a1a; color: white; border-radius: 12px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); padding: 2.5rem; text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.logo-login { width: 120px; max-width: 100%; height: auto; margin-bottom: 1rem; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); display: inline-block; }
.page-login .form-control { background: #ffffff; color: #333; border: none; height: 45px; margin-bottom: 15px; }
.page-login .btn-custom {
    background-color: var(--color-primario) !important; color: #fff !important;
    border: none; width: 100%; padding: 12px; font-weight: bold; text-transform: uppercase;
    border-radius: 6px; cursor: pointer; margin-top: 10px; display: block;
}
.page-login .btn-custom:hover { background-color: #fff !important; color: var(--color-primario) !important; }
.page-login .btn-outline-custom {
    background-color: transparent; color: var(--color-primario); border: 2px solid var(--color-primario);
    padding: 8px 20px; text-decoration: none; border-radius: 6px; font-size: 0.9rem; display: inline-block; margin-top: 10px;
}
.page-login .btn-outline-custom:hover { background-color: var(--color-primario); color: #fff; }
.texto-pie { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; margin-top: 15px; }
a.link-volver { color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; display: block; margin-top: 10px; }
a.link-volver:hover { color: var(--color-primario); }

/* ==========================================================================
   3. ESTILOS ADMIN (.page-admin)
   ========================================================================== */
body.page-admin { background-color: #f8f9fa; color: #212529; padding-top: 0; display: block; }
.page-admin .tabla-agenda th { background-color: #343a40; color: white; text-align: center; vertical-align: middle; }
.page-admin .tabla-agenda td { height: 100px; vertical-align: top; padding: 5px; color: #212529; }
.page-admin .card { background-color: #fff; color: #212529; border: 1px solid #ddd; }
.page-admin .form-control { background-color: #fff; color: #212529; border: 1px solid #ced4da; }
.page-admin .nav-link { color: #495057; }
.page-admin .nav-link.active { color: #0d6efd; border-bottom: none; }
.turno-card {
    background-color: #d1e7dd; border-left: 4px solid #198754; color: #0f5132;
    padding: 6px; font-size: 0.85rem; border-radius: 4px; cursor: pointer; margin-bottom: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.turno-card.pendiente { background-color: #fff3cd; border-color: #ffc107; color: #664d03; }

/* ==========================================================================
   4. ESTILOS PERFIL (.page-profile) - CORREGIDO
   ========================================================================== */
body.page-profile {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), 
                url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?q=80');
    background-size: cover; background-attachment: fixed;
    padding-top: 0; display: block;
    color: #ffffff !important; /* Fuerza color blanco global */
}

/* Navbar: Fondo y estilo */
.navbar-profile {
    background-color: rgba(20, 20, 20, 0.95); /* Más oscuro y sólido */
    border-bottom: 1px solid #333;
}

/* Navbar Botones (Mobile First) */
.page-profile .navbar-nav .nav-item {
    margin-bottom: 10px; /* Separación en móvil */
}

.page-profile .navbar-nav .btn {
    width: 100%; /* Botón ancho completo en celular */
    display: block;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px;
}

/* Estilo Botón "Ir al Inicio" */
.page-profile .btn-outline-light {
    border: 1px solid #444;
    color: #ccc;
    background: rgba(255,255,255,0.05);
}
.page-profile .btn-outline-light:hover {
    border-color: var(--color-primario);
    color: var(--color-primario);
    background: transparent;
}

/* Estilo Botón "Cerrar Sesión" */
.page-profile .btn-danger {
    background-color: var(--color-rojo-oscuro);
    border: none;
    color: #ffcccc;
}
.page-profile .btn-danger:hover {
    background-color: #a02834;
    color: #fff;
}

/* Tarjetas de Perfil */
.card-profile {
    background-color: var(--color-secundario);
    border: 1px solid #333;
    color: #ffffff; /* Letras blancas obligatorias */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    overflow: hidden;
}

/* Header de la tarjeta */
.card-header-profile {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    font-weight: 600;
    border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
}

/* Forzar colores de texto específicos que Bootstrap intenta oscurecer */
.page-profile h5, .page-profile h6, .page-profile label {
    color: #eee !important;
}
.page-profile .text-muted {
    color: #aaa !important; /* Gris claro en vez de gris oscuro */
}
.page-profile .text-primary {
    color: var(--color-primario) !important; /* Dorado en vez de azul */
}

/* Inputs en el perfil */
.page-profile .form-control {
    background-color: #252525;
    border: 1px solid #444;
    color: #fff; /* Texto blanco al escribir */
}
.page-profile .form-control:focus {
    background-color: #333;
    border-color: var(--color-primario);
    color: #fff;
    box-shadow: none;
}

/* Avatar */
.avatar-circle {
    width: 90px; height: 90px;
    background: var(--color-primario); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin: 0 auto 15px; border: 4px solid rgba(255,255,255,0.1);
}

/* Botón Guardar Cambios */
.btn-save {
    background-color: var(--color-primario);
    color: #121212;
    border: none;
    font-weight: 700;
    width: 100%;
    padding: 12px;
}
.btn-save:hover { background-color: #fff; color: var(--color-primario); }

/* Tabla oscura personalizada */
.table-dark-custom { color: #ddd; margin-bottom: 0; }
.table-dark-custom th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-primario);
    border-bottom: 1px solid #444;
    border-top: none;
}
.table-dark-custom td {
    border-bottom: 1px solid #333;
    vertical-align: middle;
    color: #fff; /* Asegura que los datos de la tabla sean blancos */
}
.table-hover tbody tr:hover td { background-color: rgba(255, 255, 255, 0.05); }

/* Media Queries para PC (Desktop) */
@media (min-width: 992px) {
    /* En PC, los botones vuelven a ser pequeños y al lado */
    .page-profile .navbar-nav .nav-item {
        margin-bottom: 0;
        margin-left: 10px;
    }
    .page-profile .navbar-nav .btn {
        width: auto; /* Ancho automático */
        display: inline-block;
        font-size: 0.85rem;
        padding: 6px 15px;
    }
    .hero-logo-img { width: 300px; }
    .hours-grid, .slots-grid { grid-template-columns: repeat(6, 1fr); }
}