/* Definimos las variables de color por defecto en la raíz del documento */
:root {
    --bg-color: #f4f7f6;        
    --primary-color: #ff8fb3;   
    --text-color: #333333;      
    --card-bg: #ffffff;         
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ENFOQUE MOBILE-FIRST: Centrar y limitar el ancho en escritorio */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0 auto; 
    padding: 1.25rem; /* ~20px */
    max-width: 37.5rem; /* ~600px */
    transition: background-color 0.3s ease;
}

/* NUEVO: Contenedor del Login usando el estilo que tenías en el HTML */
.login-container {
    width: 100%;
    max-width: 25rem; /* ~400px */
    margin: 5vh auto; /* 5% del alto de la pantalla, perfecto para móviles */
    text-align: center;
}

body, .app-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
}



/* HEADER - Flexbox para alinear título y botón en la misma línea */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem; /* ~25px */
}

header h1 {
    margin: 0;
    font-size: 1.6rem;
}

header button {
    width: auto; 
    padding: 0.5rem 1rem; /* ~8px 16px */
    margin: 0;
    font-size: 0.9rem;
}

/* Inputs modernos */
input:not([type="color"]) {
    width: 100%;
    padding: 0.75rem 1rem; /* ~12px 15px */
    margin: 0.5rem 0 1.25rem 0; /* ~8px 0 20px 0 */
    display: inline-block;
    border: 0.0625rem solid #ccc; /* ~1px */
    border-radius: 0.5rem; /* ~8px */
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s;
    font-size: 1rem; /* Asegura que el input no haga zoom automático en iOS */
}

input:not([type="color"]):focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0.3rem rgba(0,0,0,0.1); /* ~5px */
}

/* Botones Generales */
button {
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem 1.25rem; /* ~12px 20px */
    margin: 0.5rem 0; /* ~8px */
    border: none;
    border-radius: 1.25rem;  /* ~20px */
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    font-size: 1rem;
    transition: opacity 0.3s, transform 0.1s;
}

button:hover {
    opacity: 0.9;
}

button:active {
    transform: scale(0.98);
}

/* Tarjetas modernas (para panel de configuración y citas) */
.card {
    background-color: var(--card-bg);
    padding: 1.25rem; /* ~20px */
    border-radius: 1rem; /* ~16px */
    box-shadow: 0 0.25rem 0.6rem rgba(0,0,0,0.05); /* ~4px 10px */
    margin-bottom: 1.25rem; /* ~20px */
}

/* Formularios de Autenticación */
.hidden {
    display: none !important;
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 0.125rem solid var(--primary-color); /* ~2px */
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

.toggle-section {
    margin-top: 1.5rem; /* ~25px */
}

.toggle-section hr {
    border: none;
    border-top: 0.0625rem solid #eee; /* ~1px */
    margin-bottom: 1rem; /* ~15px */
}

.toggle-section p {
    font-size: 0.9em;
    color: #666;
}