:root { --color-primario: #F5F5F5; --color-hover: #1E3A5F; --color-fondo: #0D0D0D; --color-texto: #E5E5E5; --color-acento: #5FAEDB; --color-borde: rgba(95, 174, 219, 0.3); --color-tarjeta: rgba(20,20,20,0.85); } body { margin: 0; font-family: 'Nunito', sans-serif; background: radial-gradient(circle at top, #111827, #0D0D0D); color: var(--color-texto); padding: 15px; } /* INTERFAZ PANTALLA */ .no-print { max-width: 600px; margin: auto; } .toolbar { text-align: center; margin-bottom: 20px; } .day-nav { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 15px; } button { padding: 10px 15px; border-radius: 12px; border: 1px solid var(--color-borde); background: var(--color-tarjeta); color: white; cursor: pointer; transition: 0.3s; } button:hover { background: var(--color-hover); } .card { background: var(--color-tarjeta); padding: 20px; border-radius: 15px; border: 1px solid var(--color-borde); backdrop-filter: blur(10px); } textarea { width: 100%; height: 150px; margin-top: 10px; background: #111; color: white; border: 1px solid #333; border-radius: 8px; padding: 10px; } /* LÓGICA DE IMPRESIÓN */ .only-print { display: none; } @media print { .no-print { display: none !important; } .only-print { display: block !important; } body { background: white; color: black; } .page-a5 { width: 148mm; height: 210mm; padding: 15mm; page-break-after: always; border-bottom: 1px dashed #ccc; position: relative; color: black; } .dots-bg { background-image: radial-gradient(#ddd 1px, transparent 1px); background-size: 5mm 5mm; height: 120mm; border: 1px solid #eee; } .planner-a4 { width: 210mm; height: 297mm; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: black; } .planner-day { background: white; height: 40mm; padding: 5px; font-size: 10px; } }