84 lines
2.1 KiB
CSS
84 lines
2.1 KiB
CSS
: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; }
|
|
}
|