/* --- PALETA DE COLORES "SHARIN BEAUTY" --- */
:root {
    /* Color Principal (Botones, T¨ªtulos): Rosa Viejo / Rose Gold */
    --primary: #d66d75; 
    --primary-hover: #c45d65;
    
    /* Fondos */
    --bg-body: #fdfbf7; /* Crema muy suave */
    --bg-card: #ffffff; /* Blanco puro */
    --bg-input: #f4f4f4; /* Gris muy claro para inputs */
    
    /* Textos */
    --text-main: #4a4a4a; /* Gris oscuro elegante (no negro total) */
    --text-light: #888888;
    
    /* Bordes y Sombras */
    --border: #e0e0e0;
    --shadow: 0 10px 30px rgba(214, 109, 117, 0.15); /* Sombra rosada suave */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Roboto', sans-serif; /* Puedes cambiar a 'Lato' o 'Montserrat' */
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
}

/* --- CONTENEDORES --- */
.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- HEADER --- */
.header {
    text-align: center;
    margin-bottom: 30px;
}

.brand-title, .header h1 {
    font-family: 'Oswald', sans-serif;
    color: var(--text-main);
    letter-spacing: 3px;
    font-weight: 300; /* Letra m¨¢s fina y elegante */
    text-transform: uppercase;
}

.header p { color: var(--text-light); font-style: italic; }

/* LOGO */
.site-logo { max-width: 150px; height: auto; display: block; margin: 0 auto 10px; }

/* --- TARJETAS (CARD) --- */
.booking-card {
    background-color: var(--bg-card);
    padding: 30px;
    border-radius: 20px; /* Bordes m¨¢s redondeados */
    box-shadow: var(--shadow);
    border: 1px solid white; /* Borde sutil */
    border-top: 5px solid var(--primary); /* Detalle de color arriba */
}

h2, h3 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--primary);
    font-weight: 400;
}

/* --- FORMULARIOS --- */
.form-group { margin-bottom: 20px; }
.form-row { display: flex; gap: 15px; }
.form-row .form-group { flex: 1; }

label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

input, select, textarea {
    width: 100%;
    padding: 15px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px; /* Inputs redondeados */
    color: var(--text-main);
    font-size: 1rem;
    transition: all 0.3s;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(214, 109, 117, 0.1);
}

/* --- BOTONES --- */
.btn-submit {
    width: 100%;
    padding: 16px;
    background-color: var(--primary);
    color: white;
    border: none;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 50px; /* Bot¨®n p¨ªldora (muy moderno) */
    cursor: pointer;
    transition: transform 0.2s, background 0.3s;
    margin-top: 10px;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(214, 109, 117, 0.4);
}

.btn-submit:hover { 
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-submit:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- ALERTAS --- */
.alert {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.9rem;
}
.alert.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.alert.error { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }

/* --- HORARIOS (GRID) --- */
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.time-slot {
    background: white;
    padding: 12px 5px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    color: var(--text-main);
    transition: all 0.2s;
}

.time-slot:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff5f6;
}

.time-slot.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 5px 10px rgba(214, 109, 117, 0.3);
}

.time-slot.disabled {
    background: #f0f0f0;
    color: #ccc;
    cursor: not-allowed;
    border-color: transparent;
    text-decoration: line-through;
}

/* --- TABLAS (ADMIN) --- */
.table-responsive { overflow-x: auto; }
.citas-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px; /* Separaci¨®n entre filas */
    font-size: 0.9rem;
}

.citas-table th {
    text-align: left;
    padding: 15px;
    color: var(--text-light);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.citas-table td {
    background: white;
    padding: 15px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.citas-table tr td:first-child { border-left: 1px solid var(--border); border-radius: 10px 0 0 10px; }
.citas-table tr td:last-child { border-right: 1px solid var(--border); border-radius: 0 10px 10px 0; }

/* --- ADMIN DASHBOARD --- */
.admin-container { max-width: 1000px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.admin-header h1 { color: var(--primary); font-size: 1.5rem; margin: 0; }
.btn-logout { 
    background: var(--text-main); color: white; padding: 10px 20px; 
    border-radius: 30px; text-decoration: none; font-size: 0.85rem; 
}

/* KPIs */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.kpi-card {
    background: white; padding: 25px; border-radius: 20px;
    box-shadow: var(--shadow); border-left: 5px solid var(--primary);
    display: flex; align-items: center; text-decoration: none; color: var(--text-main);
    transition: transform 0.3s;
}
.kpi-card:hover { transform: translateY(-5px); }
.kpi-card .icon { font-size: 2rem; margin-right: 20px; color: var(--primary); opacity: 0.8; }
.kpi-card.money { border-left-color: #81c784; } .kpi-card.money .icon { color: #81c784; }
.kpi-card h3 { color: var(--text-main); text-align: left; margin: 0; font-size: 1.8rem; }
.kpi-card p { margin: 0; color: var(--text-light); font-size: 0.9rem; }

/* Badge de Estado */
.badge { padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }
.badge.pendiente { background: #fff3e0; color: #ef6c00; }
.badge.confirmada { background: #e8f5e9; color: #2e7d32; }
.badge.cancelada { background: #ffebee; color: #c62828; }
.badge.completada { background: #e3f2fd; color: #1565c0; }

/* Bot¨®n C¨¢mara */
.camera-btn {
    background-color: #fff0f5; /* Fondo rosita claro */
    border: 2px dashed var(--primary);
    color: var(--primary);
}
.camera-btn:hover { background-color: #ffe0eb; }

/* Footer */
footer { text-align: center; margin-top: auto; padding-top: 30px; font-size: 0.8rem; color: var(--text-light); }