/* Esto limpia los márgenes raros que los navegadores ponen por defecto */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 1. EL FONDO DE LA PANTALLA */
.pantalla-fondo {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* Centra el cuaderno horizontalmente */
    align-items: center;     /* Centra el cuaderno verticalmente */
    
    /* Color rosa pastel de fondo */
    background-color: #ffdee6; 
    
    /* Truco de CSS para hacer los círculos blancos (polka dots) sin usar imágenes */
    background-image: radial-gradient(circle, #ffffff 20%, transparent 20%),
                      radial-gradient(circle, #ffffff 20%, transparent 20%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

/* 2. LA BASE DEL CUADERNO (El cuero rosa) */
.cuaderno-base {
    width: 850px;       /* Ancho del cuaderno */
    height: 600px;      /* Alto del cuaderno */
    background-color: #f3a0b5; /* El color rosa más oscuro del borde */
    
    /* Bordes redondeados como la agenda real */
    border-radius: 30px; 
    
    /* Una sombra suave abajo para que parezca que flota sobre la mesa */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); 
    
    /* Una línea sutil alrededor para darle textura de costura o relieve */
    border: 4px solid #ee8fa7; 
}