/* ================================================== STARFIELD - Fondo de estrellas con parallax Solo se activa cuando tiene la clase .starfield-active (horario nocturno 18:00-09:00 y preferencia habilitada). ================================================== */ #starfield-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.7s ease; } /* Fondo oscuro del documento mientras el canvas pinta (evita flash blanco) */ html.starfield-active { background-color: #00141f; } html.starfield-active body { background-color: transparent; background-image: none; } html.starfield-active #starfield-canvas { opacity: 1; } /* --- Botón de toggle del fondo de estrellas --- */ .btn-starfield { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: 0.2s; margin-top: 6px; width: fit-content; border: 1px solid var(--primary); background: var(--primary-light); color: var(--primary-dark); } .btn-starfield.on { background: var(--primary); color: #ffffff; border-color: var(--primary); } .btn-starfield:hover { transform: translateY(-2px); filter: brightness(1.08); } /* --- SweetAlert del selector de fondo de estrellas --- */ .sf-swal { border-radius: 22px !important; font-family: 'Inter', sans-serif; padding: 1.4em 1.6em 1.2em !important; } .sf-swal .swal2-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: #0f6a5e; padding-top: 0.3em; } .sf-swal .swal2-html-container { margin: 0.4em 0 0.6em; overflow: visible; } .sf-opciones { display: flex; flex-direction: column; gap: 10px; } .sf-opcion { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid #dce7e5; border-radius: 14px; cursor: pointer; transition: 0.2s; text-align: left; background: #fff; } .sf-opcion:hover { border-color: var(--primary, #138275); background: #f4faf9; } .sf-opcion.sel { border-color: var(--primary, #138275); background: var(--primary-light, #e6f4f2); box-shadow: 0 0 0 3px rgba(19, 130, 117, 0.15); } .sf-opcion input[type="radio"] { display: none; } .sf-ico { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 15px; color: var(--primary, #138275); background: var(--primary-light, #e6f4f2); transition: 0.2s; } .sf-opcion.sel .sf-ico { color: #fff; background: linear-gradient(135deg, var(--primary, #138275), var(--primary-dark, #0f6a5e)); } .sf-txt { flex: 1; display: flex; flex-direction: column; } .sf-txt b { font-size: 13px; font-weight: 700; color: #123; letter-spacing: -0.2px; } .sf-txt small { font-size: 11px; color: #5b7a74; margin-top: 2px; } .sf-check { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #c3d6d2; color: transparent; font-size: 11px; transition: 0.2s; } .sf-opcion.sel .sf-check { color: #fff; border-color: var(--primary, #138275); background: var(--primary, #138275); } .sf-btn-confirm { font-weight: 700 !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--primary, #138275), var(--primary-dark, #0f6a5e)) !important; padding: 0.7em 1.8em !important; box-shadow: 0 6px 16px -6px rgba(19, 130, 117, 0.55) !important; letter-spacing: -0.2px; } .sf-btn-cancel { border-radius: 12px !important; font-weight: 600 !important; color: #3b5a54 !important; background: #eef4f2 !important; } .sf-toast { border-radius: 14px !important; font-family: 'Inter', sans-serif; } .sf-toast .swal2-title { font-size: 13px; font-weight: 700; }