/* --- Variables de Color (Para mantener consistencia) --- */
:root {
    --bg-cream: #F9F7F2;      /* Tu fondo crema */
    --primary-green: #2E5948; /* Tu verde oscuro */
    --text-black: #1A1A1A;    /* Negro suave para subtítulos */
}

/* --- Configuración General --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif; /* Requisito del PDF */
    background-color: var(--bg-cream);
    height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
    
    /* Flexbox para centrar todo perfectamente en el medio */
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-container {
    text-align: center; /* Alinea textos e imágenes al centro */
    display: flex;
    flex-direction: column; /* Apila los elementos uno sobre otro */
    align-items: center;
}

/* --- Estilos Específicos --- */

/* 1. Logo */
.logo {
    width: 250px; /* Ajusta este tamaño según tu SVG */
    height: auto;
    margin-bottom: 20px;
}

/* 2. Título "GREEN START" */
.main-title {
    color: var(--primary-green);
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase; /* Fuerza mayúsculas */
    letter-spacing: 3px;       /* Separa las letras como en el diseño */
    margin: 0;                 /* Quita márgenes por defecto */
}

/* 3. Subtítulo */
.subtitle {
    color: var(--text-black);
    font-size: 18px;
    font-style: italic;        /* Requisito de tu diseño */
    margin-top: 10px;
    margin-bottom: 50px;       /* Espacio grande antes del botón */
}

/* 4. Botón Principal "Empezar ahora" */
.btn-primary {
    background-color: var(--primary-green);
    color: white;
    padding: 15px 50px;        /* Relleno: Alto 15px, Ancho 50px */
    border-radius: 50px;       /* Bordes totalmente redondos (Píldora) */
    text-decoration: none;     /* Quita el subrayado del link */
    font-size: 20px;
    font-style: italic;        /* Estilo del diseño */
    
    /* Sombra suave para efecto flotante */
    box-shadow: 0 4px 15px rgba(46, 89, 72, 0.3);
    transition: transform 0.2s ease; /* Animación suave al pasar el mouse */
}

.btn-primary:hover {
    transform: scale(1.05);    /* Crece un poquito al pasar el mouse */
    opacity: 0.9;
}

/* 5. Link Secundario "Iniciar Sesion" */
.btn-secondary {
    color: var(--primary-green);
    margin-top: 25px;
    text-decoration: none;
    font-size: 18px;
    font-style: italic;
}

.btn-secondary:hover {
    text-decoration: underline; /* Subraya solo al pasar el mouse */
}


/* --- ESTILOS DE LA TARJETA (LOGIN / REGISTRO) --- */

.register-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-white {
    background-color: white;
    width: 400px;  /* Ancho fijo para desktop */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Sombra muy suave */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Para posicionar la flecha */
}

/* Cabecera interna */
.card-header {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra el logo */
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.back-link {
    position: absolute; /* Saca la flecha del flujo para ponerla a la izquierda */
    left: 0;
    text-decoration: none;
    font-size: 24px;
    color: var(--primary-green);
    font-weight: bold;
}

.mini-logo {
    width: 110px; /* Logo más pequeño que en el home */
}

.form-title {
    color: var(--primary-green);
    font-size: 24px;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* Inputs del Formulario */
.input-field {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #E0E0E0;
    background-color: #F5F5F5; /* Gris muy clarito */
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
    font-family: 'Arial', sans-serif;
    font-style: italic; /* Como en tu diseño */
}

.input-field:focus {
    outline: none;
    border-color: var(--primary-green);
    background-color: white;
}

/* Texto "Seleccionar nivel" */
.label-text {
    align-self: flex-start; /* Lo alinea a la izquierda */
    color: var(--primary-green);
    font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
    font-size: 14px;
    width: 100%;
}

/* El contenedor que pone los 3 cuadros en fila */
.level-selector {
    display: flex;           /* ¡La clave! Hace que se pongan lado a lado */
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
    gap: 10px;               /* Espacio entre cuadros */
}

/* La forma base de la tarjeta (antes de ser seleccionada) */
.level-card {
    flex: 1;                 /* Hace que los 3 midan exactamente lo mismo */
    border: 1px solid #DDD;  /* El borde gris suave inicial */
    border-radius: 10px;
    padding: 15px 5px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    background-color: white;
    
    /* Centrar contenido interno */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.level-svg {
    width: 60px; /* Ajusta este tamaño según tus iconos */
    height: auto;
    margin-bottom: 8px;
    transition: all 0.2s ease; /* Transición suave para el cambio de color */
}

.level-name {
    font-size: 12px;
    color: var(--primary-green); /* Aseguramos que el texto base sea verde */
    font-style: italic;
    font-weight: bold;
}

/* Efecto Hover */
.level-card:hover {
    border-color: var(--primary-green);
    background-color: #f0f7f4; /* Un verde muy clarito al pasar el mouse */
}

/* --- ESTADO ACTIVO (SELECCIONADO) --- */

.level-card.active {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

/* El texto se vuelve blanco */
.level-card.active .level-name {
    color: white;
}

/* EL TRUCO DE MAGIA: El SVG se vuelve blanco usando filtros */
.level-card.active .level-svg {
    /* Esto fuerza a la imagen a volverse blanca pura */
    filter: brightness(0) invert(1);
}

/* Ajuste al botón para que ocupe todo el ancho */
.btn-full {
    width: 100%;
    cursor: pointer;
    border: none;
}


/* --- ESTILOS ESPECÍFICOS DEL LOGIN --- */

/* Contenedor para alinear el link a la derecha */
.forgot-pass-container {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Lo empuja a la derecha */
    margin-bottom: 20px;       /* Espacio antes del botón */
}

/* El link gris pequeño */
.forgot-link {
    color: #888;
    font-size: 12px;
    text-decoration: none;
    font-style: italic;
}

.forgot-link:hover {
    color: var(--primary-green);
    text-decoration: underline;
}

/* Texto del pie "¿Aún no tienes cuenta?" */
.bottom-text {
    margin-top: 25px;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* El estilo especial para "Regístrate aquí" (Tu requisito anterior) */
.link-bold {
    color: var(--primary-green);
    font-weight: bold;
    text-decoration: underline; /* Subrayado para que parezca hipervínculo */
    cursor: pointer;
}

.link-bold:hover {
    color: #1e3b30; /* Un verde aún más oscuro al pasar el mouse */
}


.top-header {
    position: absolute; /* Flota sobre todo */
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 50px;
    box-sizing: border-box; /* Para que el padding no rompa el ancho */

    /* --- LA CLAVE DEL ALINEADO --- */
    display: grid;
    /* Creamos 3 carriles: Izquierda (flexible), Centro (ajustado), Derecha (flexible) */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
}
.brand-center {
    grid-column: 2; /* Fuerza a este bloque a ir al CENTRO exacto */
    display: flex;  /* Pone el logo al lado del texto (fila) */
    align-items: center;
    gap: 15px;      /* Espacio entre la hojita y el texto */
    justify-content: center;
}
/* Bloque Central: Logo y Título */
.brand-title {
    color: var(--primary-green);
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
}

.brand-logo {
    width: 40px; /* Tamaño según imagen */
    height: auto;
}

.brand-title {
    color: var(--primary-green);
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
}

/* Bloque Derecho: Perfil */
.user-profile {
    grid-column: 3; /* Se obliga a estar en la columna 3 (Derecha) */
    justify-self: end; /* Se empuja hacia el borde derecho */
    
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-green);
}
.user-icon {
    width: 32px;
    height: 32px;
    /* Si es SVG img, no lleva stroke aquí, sino en el archivo */
}

.user-name {
    font-size: 20px;
    font-weight: bold;
}

/* 2. CONTENEDOR DEL CALENDARIO */
.calendar-container {
    width: 900px; /* Ancho fijo para que se vea igual a la imagen */
    max-width: 90%;
    margin-top: 80px; /* Espacio para no chocar con el header */
}

/* Fila de Nombres de días (Lunes, Martes...) */
.week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columnas iguales */
    gap: 20px;
    margin-bottom: 20px;
    text-align: center; /* En tu imagen parecen centrados */
}

.week-header span {
    color: var(--primary-green);
    font-weight: bold;
    font-size: 18px;
    text-transform: capitalize; /* Primera letra mayúscula */
}

/* La Grilla de Tarjetas */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 Columnas */
    gap: 20px; /* Espacio entre tarjetas */
}

/* TARJETA DE DÍA INDIVIDUAL */
.day-card {
    background-color: white;
    border-radius: 18px; /* Bordes bien redondeados como la imagen */
    
    /* Truco para mantenerlas cuadradas (Aspect Ratio) */
    aspect-ratio: 1 / 1; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
    font-size: 20px;
    font-weight: bold;
    color: black;
    position: relative; /* Para poder posicionar el check luego */
    cursor: pointer;
    transition: transform 0.2s;
}

.day-card:hover {
    transform: scale(1.05);
    border: 1px solid var(--primary-green);
}

/* --- ESTILOS DINÁMICOS (Que usará JS) --- */

/* Cuando un día está vacio (Padding) */
.day-card.empty {
    background-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

/* El círculo del Check (Para días completados) */
.check-circle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--primary-green);
}

/* =========================================
   ESTILOS DEL MODAL (POP-UP)
   ========================================= */

/* El fondo oscuro que cubre toda la pantalla */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Sombra semitransparente */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que esté encima de todo */
    backdrop-filter: blur(2px); /* Efecto difuminado sutil de fondo */
}

/* La caja blanca del modal */
.modal-content {
    background-color: #F9F7F2; /* Crema suave igual al fondo de la web */
    width: 900px;
    max-width: 95%;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: relative;
    animation: slideUp 0.3s ease-out; /* Animación de entrada */
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- CABECERA DEL MODAL --- */
.modal-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Izquierda, Centro, Derecha */
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

.close-btn {
    font-size: 30px;
    color: var(--primary-green);
    cursor: pointer;
    justify-self: start;
    line-height: 1;
}

.modal-title {
    color: var(--primary-green);
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    grid-column: 2; /* Centro */
}

.done-btn {
    grid-column: 3; /* Derecha */
    justify-self: end;
    font-size: 14px;
    padding: 8px 20px;
}

/* --- CUERPO (3 COLUMNAS) --- */
.modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columnas iguales */
    gap: 20px;
}

.meal-column {
    display: flex;
    flex-direction: column;
}

.meal-type-title {
    color: var(--primary-green);
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* La tarjeta interna de cada comida */
.meal-card-internal {
    background-color: white;
    border: 1px solid #DDD;
    border-radius: 15px;
    padding: 20px;
    flex: 1; /* Hace que las 3 tarjetas tengan la misma altura */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.meal-name {
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    color: black;
}

.meal-text {
    font-size: 13px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 15px;
}