/* Hoja única compartida por la portada y todas las utilidades. */ *{box-sizing:border-box} :root{--bg:#17191a;--panel:#202324;--muted:#a8adac;--paper:#f3f0e6;--yellow:#ffdf57;--line:#3a3e3d;color-scheme:dark;font-family:'Courier New',Courier,monospace;color:var(--paper);background:var(--bg)}body.home-page *{box-sizing:border-box}body.home-page{scroll-behavior:smooth}body.home-page{margin:0}body.home-page a{color:inherit;text-decoration:none}body.home-page button,body.home-page input{font:inherit}body.home-page button{cursor:pointer;color:inherit}body.home-page button,body.home-page a{touch-action:manipulation}body.home-page button:focus-visible,body.home-page a:focus-visible,body.home-page input:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}body.home-page [hidden]{display:none!important}body.home-page .wrap{max-width:1320px;margin:auto;padding-inline:44px}body.home-page .topbar{min-height:106px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}body.home-page .brand{display:flex;align-items:center;gap:17px;font-size:15px;font-weight:bold;letter-spacing:1.5px}body.home-page .brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.5px;margin-top:7px;font-weight:normal}body.home-page .rainbow{display:flex;transform:skew(-24deg);height:33px;gap:3px;width:47px;flex-shrink:0}body.home-page .rainbow i{width:9px;background:#ff555c}body.home-page .rainbow i:nth-child(2){background:#ffdf57}body.home-page .rainbow i:nth-child(3){background:#71d68e}body.home-page .rainbow i:nth-child(4){background:#78dce3}body.home-page .rainbow.small{width:26px;height:18px;gap:2px}body.home-page .rainbow.small i{width:5px}body.home-page nav{display:flex;align-items:center;gap:30px;font-size:12px}body.home-page nav a span{color:var(--yellow)}body.home-page #theme-toggle{background:none;border:1px solid var(--line);padding:10px 12px;font-size:11px;min-height:40px}body.home-page .hero{display:grid;grid-template-columns:1.36fr 1fr;gap:22px;align-items:center;padding-block:62px 54px}body.home-page .eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:bold;margin:0 0 25px;color:var(--muted)}body.home-page .signal{display:inline-block;width:7px;height:7px;background:#87dda4;margin-right:8px}body.home-page h1{font-size:clamp(32px,4.1vw,55px);line-height:1.13;letter-spacing:-2.7px;margin:0}body.home-page h1>span,body.home-page .dot{color:var(--yellow)}body.home-page .cursor{animation:blink 1.5s steps(1) infinite}body.home-page .intro{color:var(--muted);font-size:14px;line-height:1.9;margin-block:24px}body.home-page .hero-link{display:inline-flex;align-items:center;gap:35px;font-size:12px;font-weight:bold;border-bottom:1px solid #777c75;padding-block:7px}body.home-page .hero-link span{color:var(--yellow);font-size:19px}body.home-page .hero-art{position:relative;min-height:300px;background-image:radial-gradient(#838d7e45 1px,transparent 1px);background-size:23px 23px}body.home-page .hero-art svg{width:100%;height:310px}body.home-page .coordinate,body.home-page .art-caption{position:absolute;font-size:8px;letter-spacing:1.4px;color:var(--muted);left:15%;bottom:0}body.home-page .coordinate{top:0;bottom:auto}body.home-page .transmission{border-block:1px solid var(--line);background:var(--panel)}body.home-page .transmission>.wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;font-size:10px;color:var(--muted)}body.home-page .transmission b{color:var(--yellow);margin-right:8px}body.home-page .transmission span:first-child{font-size:9px;color:var(--paper);letter-spacing:1.5px}body.home-page .tape{color:var(--yellow);letter-spacing:3px}body.home-page .board{padding-block:46px 54px;scroll-margin-top:25px}body.home-page .section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}body.home-page .section-heading .eyebrow{font-size:9px;margin-bottom:12px}body.home-page h2{font-size:27px;letter-spacing:-1.2px;margin:0}body.home-page .board-note{font-size:10px;color:var(--muted)}body.home-page .toolbar{margin:28px 0 25px;display:flex;justify-content:space-between;align-items:center;gap:18px}body.home-page .filters{display:flex;gap:3px;flex-wrap:wrap}body.home-page .filters button{background:none;border:1px solid transparent;padding:10px 12px;font-size:11px;color:var(--muted);min-height:40px}body.home-page .filters button.active{background:#ffdf57;color:#17191a;font-weight:bold}body.home-page .filters button:hover{border-color:var(--line)}body.home-page .search{display:flex;align-items:center;gap:8px;border:1px solid #686d65;background:var(--panel);padding-inline:11px}body.home-page .search span{font-size:22px}body.home-page .search input{color:var(--paper);background:none;border:0;min-height:40px;font-size:11px;width:165px;min-width:0}body.home-page .search input::placeholder{color:var(--muted)}body.home-page .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}body.home-page .card{color:#1c2426;background:#f3f0e6;display:flex;flex-direction:column;border:1px solid #090b0c;box-shadow:4px 4px 0 #060808;transition:transform .18s,box-shadow .18s;min-width:0}body.home-page .card:hover{transform:translateY(-4px);box-shadow:4px 8px 0 #060808}body.home-page .cover{height:165px;position:relative;overflow:hidden;border-bottom:1px solid #202729;display:flex;align-items:center;justify-content:center}body.home-page .cover.yellow{background:#eed572}body.home-page .cover.cyan{background:#83cfd0}body.home-page .cover.pink{background:#dda0bc}body.home-page .cover svg{height:114px;width:150px;shape-rendering:crispEdges}body.home-page .cover-label{position:absolute;top:14px;left:14px;font-size:8px;letter-spacing:1px;border:1px solid #26373866;background:#ffffff35;padding:5px 7px;text-transform:uppercase}body.home-page .card-number{position:absolute;bottom:13px;right:14px;font-size:9px}body.home-page .card-body{padding:23px;flex:1}body.home-page .card h3{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.8px}body.home-page .card p{font-size:12px;line-height:1.85;color:#525b59;margin:12px 0 0}body.home-page .card-foot{border-top:1px solid #c6c9bd;margin-inline:23px;padding-block:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px}body.home-page .status{font-size:9px;color:#5f665c}body.home-page .status::before{content:'';display:inline-block;width:6px;height:6px;background:#26734c;margin-right:7px}body.home-page .status.limited::before{background:#a76a12}body.home-page .project-link{font-size:11px;font-weight:bold;text-decoration:underline;text-underline-offset:4px}body.home-page .project-link::after{content:' ↗'}body.home-page .project-link:focus-visible{outline-color:#1b5961}body.home-page .empty{text-align:center;border:1px dashed var(--line);padding:50px 20px}body.home-page .empty>span{font-size:35px;color:var(--yellow)}body.home-page .empty p{font-size:12px;color:var(--muted)}body.home-page .empty button{background:#ffdf57;color:#17191a;border:0;padding:12px 20px;margin-top:10px}body.home-page .next{display:flex;align-items:center;gap:20px;margin-top:32px;padding:23px;border:1px dashed #586054}body.home-page .next>span:first-child{color:var(--yellow);font-size:27px}body.home-page .next h3{font-size:13px;margin:0}body.home-page .next p{font-size:11px;line-height:1.6;color:var(--muted);margin:7px 0 0}body.home-page .next-code{margin-left:auto;font-size:10px;line-height:1.8;color:var(--muted);white-space:nowrap}body.home-page footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:90px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}body.home-page footer .brand{font-size:10px;letter-spacing:0;color:var(--paper)}body.home-page .skip{position:fixed;left:20px;top:-100px;background:#ffdf57;color:black;padding:12px;z-index:10}body.home-page .skip:focus{top:10px}body.home-page a:hover{color:var(--yellow)}body.home-page .card a:hover{color:#125c71}@keyframes blink{50%{opacity:0}}:root[data-theme=light]{--bg:#f4f1e7;--panel:#e9e7db;--muted:#576158;--paper:#202923;--yellow:#765500;--line:#c8cbbb;color-scheme:light}[data-theme=light] body.home-page .card{background:#fffdf4;box-shadow:4px 4px 0 #c3c9b6;border-color:#687661}[data-theme=light] body.home-page .signal{background:#277348}@media(max-width:1100px){body.home-page .toolbar{flex-wrap:wrap}body.home-page .search{margin-left:auto}body.home-page .wrap{padding-inline:28px}body.home-page .grid{gap:20px}body.home-page h1{font-size:44px}}@media(max-width:800px){body.home-page .grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.home-page .hero{grid-template-columns:1.3fr 1fr}body.home-page h1{font-size:36px}body.home-page .eyebrow{font-size:8px}body.home-page .intro{font-size:12px}body.home-page .art-caption,body.home-page .coordinate{font-size:7px;left:5%}body.home-page .hero-art svg{height:270px}body.home-page .hero-art{min-height:270px}}@media(max-width:600px){body.home-page .wrap{padding-inline:21px}body.home-page .topbar{min-height:84px}body.home-page .brand{font-size:11px;gap:11px;letter-spacing:1px}body.home-page .brand small{font-size:7px;letter-spacing:.5px}body.home-page .rainbow{width:34px;height:26px;gap:2px}body.home-page .rainbow i{width:7px}body.home-page nav{gap:12px;font-size:10px}body.home-page nav>a{display:none}body.home-page #theme-toggle{font-size:10px}body.home-page .hero{grid-template-columns:1fr;padding-block:38px 26px;gap:28px}body.home-page h1{font-size:clamp(32px,7.5vw,46px);letter-spacing:-1.8px}body.home-page .hero-art{max-width:370px;width:100%;margin:auto;min-height:245px}body.home-page .hero-art svg{height:245px}body.home-page .coordinate,body.home-page .art-caption{left:10%;font-size:7px}body.home-page .transmission span:nth-child(2),body.home-page .tape,body.home-page .board-note{display:none}body.home-page .transmission>.wrap{justify-content:center}body.home-page .board{padding-block:32px}body.home-page h2{font-size:25px}body.home-page .toolbar{gap:16px}body.home-page .filters{gap:2px}body.home-page .filters button{padding-inline:11px}body.home-page .search{width:100%}body.home-page .search input{width:100%}body.home-page .grid{grid-template-columns:1fr}body.home-page .cover{height:175px}body.home-page .cover svg{height:125px}body.home-page .next{padding:20px 16px;align-items:start}body.home-page .next-code{display:none}body.home-page .next p{font-size:10px}body.home-page footer{padding-block:23px;flex-wrap:wrap;gap:18px}body.home-page footer>span{order:3;width:100%}}@media(prefers-reduced-motion:reduce){body.home-page{scroll-behavior:auto}body.home-page *,body.home-page *::before,body.home-page *::after{animation:none!important;transition:none!important}} /body.utility-page *{ margin: 0; padding: 0; box-sizing: border-box; } /* Configuración general: fondo blanco y fuente tipo máquina de escribir */ body.utility-page,body.utility-page{ width: 100%; height: 100vh; background-color: #ffffff; color: #000000; font-family: 'Courier New', Courier, monospace; display: flex; flex-direction: column; overflow-x: hidden; } /* --- CABECERA (100%) --- */ body.utility-page header{ width: 100%; border-bottom: 1px solid #000000; padding: 15px; display: flex; align-items: center; } body.utility-page header h1{ font-size: 1.5rem; font-weight: normal; margin-left: 20px; } /* Estilo simple para los botones */ body.utility-page button{ font-family: 'Courier New', Courier, monospace; background-color: #ffffff; color: #000000; border: 1px solid #000000; padding: 10px 15px; cursor: pointer; font-weight: bold; } body.utility-page button:hover{ background-color: #e0e0e0; } /* --- CONTENEDOR PRINCIPAL --- */ body.utility-page .contenedor{ display: flex; width: 100%; flex-grow: 1; /* Ocupa el resto del alto disponible */ } /* --- MENÚ LATERAL (15%) --- */ body.utility-page .menu{ flex: 0 0 15%; /* No crece, no se encoge, tamaño base 15% */ border-right: 1px solid #000000; padding: 20px; /* Efecto de deslizamiento */ transition: margin-left 0.4s ease; } /* Clase para ocultar deslizando hacia la izquierda */ body.utility-page .menu.oculto{ margin-left: -15%; } body.utility-page .menu ul{ list-style-type: none; } body.utility-page .menu li{ margin-bottom: 15px; } body.utility-page .menu a{ color: #000000; text-decoration: none; } body.utility-page .menu a:hover{ text-decoration: underline; } /* --- CUERPO DE LA WEB (65%) --- */ body.utility-page .cuerpo{ flex: 1 1 90%; /* Ocupa el 65%, pero crecerá suavemente si el menú se oculta */ padding: 20px; display: flex; flex-direction: column; } body.utility-page .cuerpo p{ margin-bottom: 10px; } body.utility-page textarea{ font-family: 'Courier New', Courier, monospace; font-size: 1rem; width: 100%; flex-grow: 1; /* El área de texto se expande para llenar el espacio */ padding: 15px; margin-bottom: 15px; border: 1px solid #000000; resize: none; /* Evita que el usuario rompa el layout redimensionando manualmente */ } body.utility-page textarea:focus{ outline: 2px solid #000000; } body.utility-page .controles{ display: flex; gap: 15px; } /* --- ESPACIO ADSENSE (20%) --- */ body.utility-page .adsense{ /* flex: 0 0 15%; Fijo al 20% */ border-left: 1px solid #000000; padding: 20px; display: flex; justify-content: center; align-items: center; text-align: center; } body.utility-page .ads-placeholder{ border: 1px dashed #000000; padding: 20px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* ========================================= NUEVOS ESTILOS: GESTOR DE PORTAPAPELES ========================================= */ body.utility-page .campos-wrapper{ display: flex; flex-direction: column; gap: 15px; width: 100%; } body.utility-page .campo-fila{ display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; } /* Flex-grow 1 acorta o alarga el input automáticamente para que quepan los botones */ body.utility-page .campo-texto{ font-family: 'Courier New', Courier, monospace; font-size: 1rem; flex-grow: 1; height: 45px; padding: 10px; border: 1px solid #000000; } body.utility-page .campo-texto:focus{ outline: 2px solid #000000; } body.utility-page .campo-fila button{ height: 45px; white-space: nowrap; /* Evita que el texto del botón se parta en dos líneas */ } /* ========================================= /* --- NUEVOS ESTILOS: GESTIÓN DE PDFS --- */ /* =========================================*/ body.utility-page .archivo-input{ font-family: 'Courier New', Courier, monospace; margin-bottom: 15px; } body.utility-page #lista-pdfs{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; flex-grow: 1; } body.utility-page .pdf-item{ border: 1px solid #000000; padding: 10px; display: flex; align-items: center; gap: 10px; background-color: #fafafa; } body.utility-page .pdf-nombre{ flex-grow: 1; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.utility-page .pdf-paginas{ font-family: 'Courier New', Courier, monospace; padding: 5px; border: 1px solid #000000; width: 200px; } body.utility-page .pdf-paginas:focus{ outline: 2px solid #000000; } body.utility-page .btn-pequeno{ padding: 5px 10px; font-size: 0.9rem; } /* --- ESPACIO ADSENSE (20%) --- */ body.utility-page .adsense{ flex: 0 0 20%; border-left: 1px solid #000000; padding: 20px; display: flex; justify-content: center; align-items: center; text-align: center; } body.utility-page .ads-placeholder{ border: 1px dashed #000000; padding: 20px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* ========================================= /* --- NUEVOS ESTILOS: IMAGENES --- */ /* =========================================*/ /* --- ELEMENTOS DE FORMULARIO Y HERRAMIENTAS --- */ body.utility-page .input-estilo{ font-family: 'Courier New', Courier, monospace; font-size: 1rem; background-color: #ffffff; color: #000000; border: 1px solid #000000; padding: 5px; outline: none; } body.utility-page .input-estilo:focus{ outline: 2px solid #000000; } body.utility-page .input-archivo{ margin-bottom: 15px; } body.utility-page .bloque-opciones{ margin-top: 15px; margin-bottom: 15px; } body.utility-page .opciones-inline{ margin-top: 5px; } body.utility-page .input-corto{ width: 90px; } body.utility-page .margen-izquierdo{ margin-left: 10px; } body.utility-page .oculto-por-defecto{ display: none; } /* --- ESTILOS PARA LA PREVISUALIZACIÓN --- */ body.utility-page .contenedor-previsualizacion{ margin-bottom: 20px; border: 1px dashed #000000; padding: 10px; text-align: center; } body.utility-page .imagen-previsualizacion{ max-width: 100%; max-height: 300px; /* Limita la altura para no romper el diseño */ border: 1px solid #000000; } /* --- ESTILOS PARA LA BARRA DE PROGRESO --- */ body.utility-page .contenedor-progreso{ width: 100%; height: 30px; border: 1px solid #000000; margin-top: 15px; background-color: #ffffff; position: relative; } body.utility-page .relleno-progreso{ height: 100%; background-color: #000000; width: 0%; /* Inicia vacío */ transition: width 0.1s linear; } body.utility-page .texto-progreso{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ffffff; mix-blend-mode: difference; /* Invierte el color del texto automáticamente */ font-weight: bold; font-size: 1.1rem; } body.utility-page .btn-deshabilitado{ opacity: 0.5; cursor: not-allowed !important; } /* ========================================= /* --- NUEVOS ESTILOS: VIDEOS YOUTUBE --- */ /* =========================================*/ body.utility-page input[type="text"],body.utility-page select{ font-family: 'Courier New', Courier, monospace; font-size: 1rem; color: #000000; background-color: #ffffff; width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #000000; border-radius: 0; /* Quita el redondeado por defecto de algunos navegadores */ appearance: none; /* Limpieza para personalización del select */ } body.utility-page select{ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; cursor: pointer; } body.utility-page input[type="text"]:focus,body.utility-page select:focus{ outline: 2px solid #000000; } body.utility-page .grupo-opciones{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } body.utility-page .consola-log{ margin-top: 20px; border: 1px dashed #000000; padding: 15px; flex-grow: 1; font-size: 0.9rem; background-color: #fafafa; overflow-y: auto; max-height: 150px; } /* --- NUEVOS ESTILOS: PREVISUALIZACIÓN Y PROGRESO --- */ body.utility-page .previsualizacion{ width: 100%; max-width: 480px; height: 270px; /* Proporción 16:9 */ border: 1px dashed #000000; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background-color: #fafafa; text-align: center; overflow: hidden; } body.utility-page .previsualizacion img{ width: 100%; height: 100%; object-fit: cover; } body.utility-page .contenedor-progreso{ width: 100%; border: 1px solid #000000; height: 30px; margin-bottom: 20px; background-color: #ffffff; position: relative; display: none; /* Oculto hasta que inicie la descarga */ } body.utility-page .barra-progreso{ height: 100%; background-color: #000000; width: 0%; /* Inicia vacío */ transition: width 0.1s linear; } body.utility-page .texto-progreso{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; /* Blanco para que resalte si la barra negra pasa por encima */ mix-blend-mode: difference; /* Hace que el texto sea negro sobre fondo blanco y blanco sobre fondo negro */ font-weight: bold; font-family: 'Courier New', Courier, monospace; } /* --- ESTILOS PARA SELECCIÓN DE DIRECTORIO --- */ body.utility-page .fila-directorio{ display: flex; gap: 15px; margin-bottom: 20px; } body.utility-page .fila-directorio input[type="text"]{ margin-bottom: 0; /* Anula el margen inferior para que cuadre con el botón */ } /* ========================================= NUEVOS ESTILOS: RELOJ Y CUENTA ATRÁS ========================================= */ body.utility-page .seccion-reloj{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 40px; margin-bottom: 40px; } body.utility-page .reloj-grande{ font-size: 5rem; font-weight: bold; letter-spacing: 2px; } body.utility-page .fecha-pequena{ font-size: 1.2rem; font-weight: normal; margin-top: 5px; } body.utility-page .seccion-contador{ display: flex; flex-direction: column; } /*NUEVOS ESTILOS: CRONÓMETRO*/ body.utility-page .crono-seccion{ display: flex; flex-direction: column; margin-top: 20px; } body.utility-page .crono-display{ font-size: 3rem; font-weight: bold; letter-spacing: 2px; margin-top: 15px; margin-bottom: 20px; text-align: center; /* font-variant-numeric evita que los números tiemblen al cambiar (ej. del 1 al 8) */ font-variant-numeric: tabular-nums; } /* ========================================= NUEVOS ESTILOS: CALENDARIO PERPETUO ========================================= */ body.utility-page .controles-calendario{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; width: 100%; } body.utility-page .selectores-calendario{ display: flex; gap: 10px; flex-grow: 1; } body.utility-page .selectores-calendario select,body.utility-page .selectores-calendario input{ margin-bottom: 0; height: 40px; } body.utility-page .cuadricula-calendario{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; border: 1px solid #000000; padding: 10px; background-color: #ffffff; font-family: 'Courier New', Courier, monospace; } body.utility-page .dia-semana{ font-weight: bold; text-align: center; padding: 10px 0; border-bottom: 1px dashed #000000; } body.utility-page .dia-calendario{ text-align: center; padding: 15px 5px; border: 1px solid transparent; cursor: default; } body.utility-page .dia-calendario:hover{ border: 1px dashed #000000; background-color: #e0e0e0; } body.utility-page .dia-vacio{ background-color: transparent; } body.utility-page .dia-hoy{ background-color: #000000; color: #ffffff; font-weight: bold; } body.utility-page .dia-hoy:hover{ background-color: #333333; border: 1px solid #000000; } /* Ocultar el título de impresión en la pantalla normal del navegador */ body.utility-page .titulo-impresion{ display: none; } /* ========================================= ESTILOS EXCLUSIVOS PARA IMPRESIÓN / PDF ========================================= */ @media print { /* 1. Ocultar componentes web innecesarios en la hoja */ body.utility-page header,body.utility-page #menu-lateral,body.utility-page .adsense,body.utility-page .controles-calendario,body.utility-page .controles,body.utility-page #btn-menu,body.utility-page .cuerpo > p{ display: none !important; } /* 2. Expandir el cuerpo a pantalla completa en el lienzo del PDF */ body.utility-page,body.utility-page .contenedor,body.utility-page .cuerpo{ width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; color: #000000 !important; box-shadow: none !important; } /* 3. Mostrar el título elegante arriba, centrado y con tipografía monospace */ body.utility-page .titulo-impresion{ display: block !important; text-align: center; font-family: 'Courier New', Courier, monospace; font-size: 22pt; font-weight: bold; margin-top: 5mm; margin-bottom: 10mm; border-bottom: 2px solid #000000; padding-bottom: 10px; } /* 4. Optimizar rejilla gráfica para que use el espacio del folio (A4) */ body.utility-page .cuadricula-calendario{ width: 100% !important; border: 2px solid #000000 !important; background-color: #ffffff !important; padding: 5px !important; gap: 2px !important; /* Forzar que los navegadores impriman los fondos negros/grises */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.utility-page .dia-semana{ font-size: 12pt; padding: 8px 0 !important; border-bottom: 2px dashed #000000 !important; } body.utility-page .dia-calendario{ font-size: 14pt; padding: 22px 5px !important; /* Celdas ligeramente más altas en papel */ border: 1px solid #dddddd !important; } /* Forzar el resalte del día actual en el documento exportado */ body.utility-page .dia-hoy{ background-color: #000000 !important; color: #ffffff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ======================================================= ACTUALIZACIÓN CONTINUA: TEXTO SELECCIONABLE Y 5 COLORES ======================================================= */ body.utility-page .cuadricula-calendario{ grid-template-rows: auto repeat(6, minmax(120px, 1fr)); } body.utility-page .dia-calendario{ position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 28px 8px 8px 8px !important; background-color: #ffffff; min-height: 120px; transition: background-color 0.15s; } body.utility-page .numero-dia{ position: absolute; top: 6px; right: 8px; font-size: 0.95rem; font-weight: bold; pointer-events: none; } body.utility-page .nota-dia{ width: 100%; height: 100%; border: none; outline: none; background: transparent; font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; line-height: 1.3; word-break: break-word; white-space: pre-wrap; overflow-y: auto; text-align: left; } body.utility-page .nota-dia:empty::before{ content: attr(placeholder); color: #cccccc; } /* Modificadores de tamaño nativos del navegador mediante execCommand */ body.utility-page .nota-dia font[size="3"]{ font-size: 0.75rem; } body.utility-page .nota-dia font[size="4"]{ font-size: 0.95rem; } body.utility-page .nota-dia font[size="5"]{ font-size: 1.35rem; } /* Inversión monocromática de cuadrícula */ body.utility-page .dia-calendario.fondo-invertido{ background-color: #000000 !important; border-color: #ffffff !important; } body.utility-page .dia-calendario.fondo-invertido .numero-dia{ color: #ffffff !important; } body.utility-page .dia-calendario.fondo-invertido .nota-dia{ color: #ffffff; } /* Forzar que el texto en negro por defecto cambie a blanco si se invierte el fondo */ body.utility-page .dia-calendario.fondo-invertido .nota-dia font[color="#000000"]{ color: #ffffff !important; } body.utility-page .dia-calendario.fondo-invertido .nota-dia:empty::before{ color: #555555; } /* Interfaz flotante industrial */ body.utility-page .barra-formato-dia{ position: absolute; display: none; background-color: #ffffff; border: 1px solid #000000; padding: 4px; gap: 6px; z-index: 999; box-shadow: 2px 2px 0px #000000; } body.utility-page .barra-formato-dia button,body.utility-page .barra-formato-dia select{ font-size: 0.8rem !important; padding: 2px 6px !important; height: 26px !important; font-family: 'Courier New', Courier, monospace; background-color: #ffffff; border: 1px solid #000000; cursor: pointer; } body.utility-page .barra-formato-dia button.activo{ background-color: #000000; color: #ffffff; } body.utility-page .barra-formato-dia button:hover,body.utility-page .barra-formato-dia select:hover{ background-color: #e0e0e0; } /* Reglas estrictas de impresión */ @media print { body.utility-page .barra-formato-dia,body.utility-page #btn-deshacer,body.utility-page #btn-rehacer,body.utility-page #input-archivo-json{ display: none !important; } body.utility-page .dia-calendario{ padding: 25px 6px 6px 6px !important; border: 1px solid #000000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.utility-page .dia-calendario.fondo-invertido{ background-color: #000000 !important; } body.utility-page .nota-dia:empty::before{ content: "" !important; } } /* ======================================================= ACTUALIZACIÓN CONTINUA: BARRA DE FORMATO CON BOTONES LARGOS ======================================================= */ body.utility-page .cuadricula-calendario{ grid-template-rows: auto repeat(6, minmax(120px, 1fr)); } body.utility-page .dia-calendario{ position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 28px 8px 8px 8px !important; background-color: #ffffff; min-height: 120px; transition: background-color 0.15s; } body.utility-page .numero-dia{ position: absolute; top: 6px; right: 8px; font-size: 0.95rem; font-weight: bold; pointer-events: none; } body.utility-page .nota-dia{ width: 100%; height: 100%; border: none; outline: none; background: transparent; font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; line-height: 1.3; word-break: break-word; white-space: pre-wrap; overflow-y: auto; text-align: left; } body.utility-page .nota-dia:empty::before{ content: attr(placeholder); color: #cccccc; } /* Escalas tipográficas nativas internas */ body.utility-page .nota-dia font[size="3"]{ font-size: 0.75rem; } body.utility-page .nota-dia font[size="4"]{ font-size: 0.95rem; } body.utility-page .nota-dia font[size="5"]{ font-size: 1.35rem; } /* Inversión de color de la celda */ body.utility-page .dia-calendario.fondo-invertido{ background-color: #000000 !important; border-color: #ffffff !important; } body.utility-page .dia-calendario.fondo-invertido .numero-dia{ color: #ffffff !important; } body.utility-page .dia-calendario.fondo-invertido .nota-dia{ color: #ffffff; } body.utility-page .dia-calendario.fondo-invertido .nota-dia font[color="#000000"]{ color: #ffffff !important; } body.utility-page .dia-calendario.fondo-invertido .nota-dia:empty::before{ color: #555555; } /* Nueva interfaz flotante: Botones y desplegables alargados */ body.utility-page .barra-formato-dia{ position: absolute; display: none; background-color: #ffffff; border: 1px solid #000000; padding: 6px; gap: 8px; z-index: 999; box-shadow: 3px 3px 0px #000000; width: max-content; /* Se expande automáticamente según el contenido */ max-width: 650px; } /* Modificación de tamaño y padding para alojar las etiquetas completas */ body.utility-page .barra-formato-dia button,body.utility-page .barra-formato-dia select{ font-size: 0.8rem !important; padding: 4px 12px !important; /* Más holgura horizontal */ height: 30px !important; /* Ligeramente más altos */ font-family: 'Courier New', Courier, monospace; background-color: #ffffff; border: 1px solid #000000; cursor: pointer; font-weight: bold; } /* Ajuste específico de ancho de los desplegables para evitar cortes */ body.utility-page .barra-formato-dia select{ padding-right: 20px !important; min-width: 125px; } body.utility-page .barra-formato-dia button.activo{ background-color: #000000; color: #ffffff; } body.utility-page .barra-formato-dia button:hover,body.utility-page .barra-formato-dia select:hover{ background-color: #e0e0e0; } /* CSS especial para impresión física / Guardado PDF */ @media print { body.utility-page .barra-formato-dia,body.utility-page #btn-deshacer,body.utility-page #btn-rehacer,body.utility-page #input-archivo-json{ display: none !important; } body.utility-page .dia-calendario{ padding: 25px 6px 6px 6px !important; border: 1px solid #000000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.utility-page .dia-calendario.fondo-invertido{ background-color: #000000 !important; } body.utility-page .nota-dia:empty::before{ content: "" !important; } } /* ======================================================= ESTILOS CONTROLADOS: COMPACTACIÓN TOTAL Y PALETA DE FONDOS ======================================================= */ body.utility-page .cuadricula-calendario{ display: grid !important; grid-template-columns: repeat(7, 1fr) !important; grid-template-rows: auto repeat(6, minmax(120px, 1fr)) !important; border: 1px solid #000000 !important; gap: 0px !important; background-color: #ffffff !important; /* Estructura de rejilla negra */ } body.utility-page .dia-semana{ background-color: #fafafa; border-bottom: 1px solid #000000; padding: 10px 0; text-align: center; font-weight: bold; } body.utility-page .dia-vacio{ background-color: #ffffff !important; } body.utility-page .dia-calendario{ position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 28px 8px 8px 8px !important; border: 1px solid #000000 !important; min-height: 120px; box-sizing: border-box; } body.utility-page .numero-dia{ position: absolute; top: 6px; right: 8px; font-size: 0.95rem; font-weight: bold; pointer-events: none; color: #000000; } body.utility-page .nota-dia{ width: 100%; height: 100%; border: none; outline: none; background: transparent; font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; line-height: 1.3; word-break: break-word; white-space: pre-wrap; overflow-y: auto; text-align: left; color: #000000; } body.utility-page .nota-dia:empty::before{ content: attr(placeholder); color: #cccccc; } /* Escalas tipográficas nativas de execCommand */ body.utility-page .nota-dia font[size="3"]{ font-size: 0.75rem; } body.utility-page .nota-dia font[size="4"]{ font-size: 0.95rem; } body.utility-page .nota-dia font[size="5"]{ font-size: 1.35rem; } /* Interfaz flotante ultra-compacta y estrictamente unilineal */ body.utility-page .barra-formato-dia{ position: absolute; display: none; background-color: #ffffff; border: 1px solid #000000; padding: 4px; gap: 6px; z-index: 999; box-shadow: 2px 2px 0px #000000; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; width: max-content !important; } /* El tamaño de los botones es estrictamente el que exige el texto que contienen */ body.utility-page .barra-formato-dia button,body.utility-page .barra-formato-dia select{ display: inline-block !important; font-size: 0.75rem !important; padding: 2px 4px !important; /* Reducido al mínimo para ceñirse al texto */ height: 24px !important; font-family: 'Courier New', Courier, monospace; background-color: #ffffff; border: 1px solid #000000; cursor: pointer; font-weight: bold; white-space: nowrap !important; flex-shrink: 0 !important; width: auto !important; /* Evita anchos mínimos forzados */ } body.utility-page .barra-formato-dia select{ appearance: none; /* Quita flechas nativas molestas para maximizar espacio */ padding-right: 4px !important; text-align: center; } body.utility-page .barra-formato-dia button:hover,body.utility-page .barra-formato-dia select:hover{ background-color: #e0e0e0; } /* Parámetros estables de impresión en PDF/Papel */ @media print { body.utility-page .barra-formato-dia,body.utility-page #btn-deshacer,body.utility-page #btn-rehacer,body.utility-page #input-archivo-json{ display: none !important; } body.utility-page .cuadricula-calendario{ background-color: #ffffff !important; border: 2px solid #000000 !important; } body.utility-page .dia-calendario{ padding: 25px 6px 6px 6px !important; border: 1px solid #000000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.utility-page .nota-dia:empty::before{ content: "" !important; } } /* ========================================= /* --- NUEVOS ESTILOS: POMODORO --- */ /* =========================================*/ /* Animación y diseño del texto de Enhorabuena */ body.utility-page .texto-enhorabuena{ font-size: 3rem; font-weight: bold; text-align: center; margin-top: 50px; color: #000000; font-family: 'Courier New', Courier, monospace; /* Animación de crecer */ animation: crecerTexto 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; } @keyframes crecerTexto { 0% { transform: scale(0.1); opacity: 0; } 100% { transform: scale(1.5); /* Crece hasta el 150% de su tamaño */ opacity: 1; } } /*NUEVOS ESTILOS: POMODORO MÚLTIPLE*( /* Fila que contiene el trabajo y el descanso de un Pomodoro */ body.utility-page .fila-pomo{ display: flex; gap: 15px; margin-bottom: 10px; width: 100%; } /* Contenedor individual de una barra (trabajo o descanso). NOTA: La propiedad "flex" (ancho) se inyecta dinámicamente desde HTML. */ body.utility-page .barra-pomo{ height: 35px; border: 1px solid #000000; position: relative; background-color: #ffffff; overflow: hidden; /* Para asegurar que el relleno no salga de los bordes */ } /* El relleno negro que avanza dentro de la barra */ body.utility-page .relleno-pomo{ height: 100%; width: 0%; /* Inicia en 0% siempre */ background-color: #000000; transition: width 1s linear; /* Animación fluida cada segundo */ } /* El texto dentro de la barra (Ej: "TRABAJO" o "DESCANSO") */ body.utility-page .texto-barra-pomo{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; color: #ffffff; /* Esto hace que el texto se vuelva negro sobre blanco y blanco sobre negro automáticamente */ mix-blend-mode: difference; pointer-events: none; white-space: nowrap; /* Evita que el texto salte de línea en pantallas pequeñas */ } /* Animación del mensaje final (¡ENHORABUENA!) */ body.utility-page .texto-enhorabuena{ font-size: 3rem; font-weight: bold; text-align: center; margin-top: 40px; color: #000000; font-family: 'Courier New', Courier, monospace; animation: crecerTexto 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; } @keyframes crecerTexto { 0% { transform: scale(0.1); opacity: 0; } 100% { transform: scale(1.2); opacity: 1; } } /* ========================================= NUEVOS ESTILOS: LISTA DE TAREAS ========================================= */ body.utility-page .tareas-wrapper{ display: flex; flex-direction: column; gap: 15px; width: 100%; margin-bottom: 25px; } body.utility-page .tarea-fila{ display: flex; flex-direction: row; align-items: center; gap: 15px; width: 100%; } body.utility-page .chk-tarea{ width: 25px; height: 25px; cursor: pointer; accent-color: #000000; /* Aplica color negro en la casilla marcada (Navegadores modernos) */ border: 1px solid #000000; } body.utility-page .input-tarea{ font-family: 'Courier New', Courier, monospace; font-size: 1rem; flex-grow: 1; height: 45px; padding: 10px; border: 1px solid #000000; color: #000000; background-color: #ffffff; transition: color 0.3s, text-decoration 0.3s, background-color 0.3s; } body.utility-page .input-tarea:focus{ outline: 2px solid #000000; } /* Clase dinámica que se añade mediante JS al marcar la tarea como lista */ body.utility-page .tarea-completada{ text-decoration: line-through; color: #888888; background-color: #f5f5f5; } /* ========================================= NUEVOS ESTILOS: GENERADOR DE ESQUEMAS ========================================= */ body.utility-page .manual-uso{ border: 1px dashed #000000; padding: 15px; margin-bottom: 20px; background-color: #fafafa; font-size: 0.9rem; } body.utility-page .manual-uso ul{ margin-left: 20px; margin-top: 5px; margin-bottom: 10px; } body.utility-page #contenedor-canvas{ width: 100%; min-height: 400px; border: 1px solid #000000; background-color: #ffffff; overflow: auto; /* Permite scroll si el esquema es muy grande */ margin-top: 20px; padding: 20px; } body.utility-page canvas{ display: block; } /* ======================================================= NUEVOS ESTILOS GLOBALIZADOS: MODULO DE JUEGO (ARCADE) ======================================================= */ body.utility-page .contenedor-juego{ position: relative; width: 100%; flex-grow: 1; /* Se estira dinámicamente ocupando el alto disponible del cuerpo */ background-color: #fafafa; border: 1px solid #000000; margin-bottom: 20px; overflow: hidden; display: flex; justify-content: center; align-items: center; aspect-ratio: 4 / 3; /* Bloquea la proporción clásica de monitor arcade */ max-height: 65vh; /* Evita desbordamientos verticales indeseados */ } body.utility-page #lienzo-juego{ display: block; width: 100%; height: 100%; object-fit: contain; /* Ajusta el juego al contenedor fluidamente sin deformar coordenadas */ background-color: #fafafa; } body.utility-page .pantalla-estado{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); display: none; /* Oculto de forma estricta por defecto */ flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 3px dashed #000000; z-index: 10; } /* Activación limpia eliminando colisiones de especificidad */ body.utility-page .pantalla-estado.visible{ display: flex; } body.utility-page .pantalla-estado h2{ font-size: 2.5rem; font-weight: normal; margin-bottom: 15px; letter-spacing: 4px; } body.utility-page .pantalla-estado p{ font-size: 1.2rem; } body.utility-page .marcador{ font-family: 'Courier New', Courier, monospace; font-size: 1.1rem; margin-top: 5px; border-top: 1px dashed #000000; padding-top: 12px; display: flex; justify-content: space-between; width: 100%; } /* ========================================= NUEVOS ESTILOS: JUEGO ARKANOID RETRO ========================================= */ body.utility-page .zona-juego{ display: flex; flex-direction: column; gap: 15px; width: 100%; } body.utility-page .panel-marcador{ display: flex; gap: 30px; font-size: 1.2rem; font-weight: bold; border: 1px solid #000000; padding: 10px 15px; background-color: #fafafa; } body.utility-page .canvas-contenedor{ width: 100%; position: relative; border: 2px solid #000000; } body.utility-page #arkanoidCanvas{ display: block; width: 100%; /* Ocupa el 100% del contenedor asignado */ height: auto; background-color: #ffffff; } /* ========================================================================= NUEVOS ESTILOS: MÓDULO DE REPRODUCCIÓN RETRO ASTEROIDS ========================================================================= */ body.utility-page #zona-juego{ display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 10px; margin-bottom: 20px; flex-grow: 1; } body.utility-page #canvas-asteroids{ border: 1px solid #000000; background-color: #ffffff; max-width: 100%; height: auto; display: block; } /* ========================================= NUEVOS ESTILOS: DIAGRAMAS DE FLUJO ========================================= */ body.utility-page .toolbar-diagrama{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; background-color: #fafafa; padding: 15px; border: 1px solid #000000; align-items: center; } body.utility-page .toolbar-diagrama input[type="color"]{ height: 38px; width: 50px; cursor: pointer; border: 1px solid #000000; padding: 2px; background: #ffffff; } body.utility-page .btn-modo.activo{ background-color: #000000; color: #ffffff; } body.utility-page .canvas-wrapper{ flex-grow: 1; overflow: auto; border: 1px solid #000000; position: relative; background-color: #e0e0e0; cursor: grab; } body.utility-page .canvas-wrapper:active{ cursor: grabbing; } body.utility-page .diagram-canvas{ width: 5000px; height: 5000px; position: absolute; top: 0; left: 0; background-color: #ffffff; background-image: radial-gradient(#000000 1px, transparent 1px); background-size: 30px 30px; transform-origin: top left; } body.utility-page #capa-lineas{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* --- FORMAS ACTUALIZADAS: SIN SOMBRAS --- */ body.utility-page .diagram-shape{ position: absolute; border: 2px solid #000000; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 130px; min-height: 70px; padding: 15px; cursor: move; box-shadow: none !important; /* Eliminadas las sombras por completo */ z-index: 10; font-family: 'Courier New', Courier, monospace; font-size: 1rem; font-weight: bold; text-align: center; outline: none; } body.utility-page .diagram-shape:focus-within{ border-style: dashed; } body.utility-page .diagram-shape.seleccionada{ border-color: #ff0000 !important; } body.utility-page .shape-text-area{ width: 100%; outline: none; word-break: break-word; } /* Contenedor o distintivo del enlace dentro de la forma */ body.utility-page .shape-link-badge{ margin-top: 8px; font-size: 0.8rem; background-color: #000000; color: #ffffff; padding: 2px 6px; text-decoration: none; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } body.utility-page .shape-link-badge:hover{ background-color: #555555; text-decoration: underline; } /* Variaciones geométricas */ body.utility-page .shape-rectangulo{ border-radius: 0; } body.utility-page .shape-circulo{ border-radius: 50%; } body.utility-page .shape-rombo{ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); padding: 35px; background-color: #000000; } body.utility-page .shape-rombo-inner{ width: 100%; height: 100%; background-color: #ffffff; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; outline: none; } /* --- CONECTORES RECTILÍNEOS --- */ body.utility-page .conexion-path{ cursor: pointer; pointer-events: auto !important; transition: stroke 0.2s; } body.utility-page .conexion-path:hover{ stroke: #555555 !important; stroke-width: 5px !important; } body.utility-page .conexion-path.seleccionada{ stroke: #ff0000 !important; stroke-dasharray: 6 4; stroke-width: 4px !important; } /* --- NUEVO VENTANAL FLOTANTE (MODAL GESTOR DE ENLACES) --- */ body.utility-page .modal-retro{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; border: 2px solid #000000; padding: 20px; z-index: 2000; font-family: 'Courier New', Courier, monospace; width: 350px; display: none; flex-direction: column; gap: 15px; box-shadow: none !important; } body.utility-page .modal-retro h3{ font-size: 1.1rem; margin: 0; border-bottom: 1px solid #000000; padding-bottom: 5px; } body.utility-page .modal-retro label{ font-weight: bold; font-size: 0.9rem; } body.utility-page .modal-retro input[type="text"],body.utility-page .modal-retro input[type="file"]{ font-family: 'Courier New', Courier, monospace; padding: 5px; border: 1px solid #000000; width: 100%; } body.utility-page .modal-retro .opciones-tipo{ display: flex; gap: 15px; } body.utility-page .modal-retro .botones-modal{ display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; } body.utility-page .modal-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); z-index: 1999; display: none; } /* --- NUEVO VENTANAL FLOTANTE (MODAL GESTOR DE ENLACES) --- */ body.utility-page .modal-retro{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; border: 2px solid #000000; padding: 20px; z-index: 2000; font-family: 'Courier New', Courier, monospace; width: auto; min-width: 480px; /* Ensanchado para que quepan los botones */ display: none; flex-direction: column; gap: 15px; box-shadow: none !important; } body.utility-page .modal-retro h3{ font-size: 1.1rem; margin: 0; border-bottom: 1px solid #000000; padding-bottom: 5px; } body.utility-page .modal-retro label{ font-weight: bold; font-size: 0.9rem; } body.utility-page .modal-retro input[type="text"],body.utility-page .modal-retro input[type="file"]{ font-family: 'Courier New', Courier, monospace; padding: 5px; border: 1px solid #000000; width: 100%; } body.utility-page .modal-retro .opciones-tipo{ display: flex; gap: 15px; } body.utility-page .modal-retro .botones-modal{ display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; } /* Forzar que los botones se mantengan en una sola línea */ body.utility-page .modal-retro .botones-modal button{ white-space: nowrap; flex: 1; padding: 10px; } body.utility-page .modal-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); z-index: 1999; display: none; } /* Preparar el lienzo para el Zoom */ body.utility-page .diagram-canvas{ width: 5000px; height: 5000px; position: absolute; top: 0; left: 0; background-color: #ffffff; background-image: radial-gradient(#000000 1px, transparent 1px); background-size: 30px 30px; transform-origin: 0 0; /* Punto de anclaje para escalar (Zoom) */ transition: transform 0.1s ease-out; /* Suaviza el giro de la rueda */ } /* ======================================================= NUEVAS FUNCIONES: CANVAS 10K, TEXTO Y PALETA DE COLORES ======================================================= */ /* Redefinir el tamaño del lienzo al doble (10,000 x 10,000 px) */ body.utility-page .diagram-canvas{ width: 100000px !important; height: 100000px !important; } /* Establecer el tamaño de letra por defecto */ body.utility-page .diagram-shape{ font-size: 10pt; } /* Evitar los márgenes nativos por defecto en el select */ body.utility-page #size-forma{ margin-bottom: 0; padding: 5px; } /* Contenedores para las paletas de colores guardados */ body.utility-page .bloque-color{ display: flex; align-items: center; gap: 5px; margin-right: 15px; background: #ffffff; padding: 5px 10px; border: 1px solid #000000; } body.utility-page .palette-container{ display: inline-flex; gap: 3px; margin-left: 5px; } body.utility-page .swatch{ width: 25px; height: 25px; border: 1px solid #000000; cursor: pointer; background-color: #ffffff; transition: transform 0.1s; } body.utility-page .swatch:hover{ transform: scale(1.1); } /* Estilo para los huecos de color vacíos */ body.utility-page .swatch.vacio{ background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); background-size: 8px 8px; background-position: 0 0, 4px 4px; background-color: #ffffff; cursor: default; } body.utility-page .btn-pequeno{ padding: 5px 10px; font-size: 1rem; font-weight: bold; } /* ======================================================= NUEVAS FUNCIONES: CANVAS 10K, ZOOM MANUAL Y ENLACES EN TEXTO ======================================================= */ body.utility-page .diagram-canvas{ width: 10000px !important; height: 10000px !important; position: absolute; top: 0; left: 0; background-color: #ffffff; background-image: radial-gradient(#000000 1px, transparent 1px); background-size: 30px 30px; transform-origin: 0 0; transition: transform 0.1s ease-out; } /* Forzar estilo rojo y subrayado en los hipervínculos dentro del diagrama */ body.utility-page .diagram-shape a{ color: #ff0000 !important; text-decoration: underline !important; cursor: pointer; } body.utility-page .diagram-shape{ font-size: 10pt; } body.utility-page #size-forma{ margin-bottom: 0; padding: 5px; } /* Paletas de color */ body.utility-page .bloque-color{ display: flex; align-items: center; gap: 5px; margin-right: 15px; background: #ffffff; padding: 5px 10px; border: 1px solid #000000; } body.utility-page .palette-container{ display: inline-flex; gap: 3px; margin-left: 5px; } body.utility-page .swatch{ width: 25px; height: 25px; border: 1px solid #000000; cursor: pointer; background-color: #ffffff; transition: transform 0.1s; } body.utility-page .swatch:hover{ transform: scale(1.1); } body.utility-page .swatch.vacio{ background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); background-size: 8px 8px; background-position: 0 0, 4px 4px; background-color: #ffffff; cursor: default; } body.utility-page .btn-pequeno{ padding: 5px 10px; font-size: 1rem; font-weight: bold; } /* ======================================================= ACTUALIZACIÓN: REDIMENSIÓN DE FORMAS Y TEXTO ESCALABLE ======================================================= */ body.utility-page .diagram-shape{ position: absolute; border: 2px solid #000000; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 130px; min-height: 70px; padding: 15px; cursor: move; box-shadow: none !important; z-index: 10; font-family: 'Courier New', Courier, monospace; font-size: 10pt; font-weight: bold; text-align: center; outline: none; } body.utility-page .diagram-shape:focus-within{ border-style: dashed; } body.utility-page .diagram-shape.seleccionada{ border-color: #ff0000 !important; } body.utility-page .shape-text-area{ width: 100%; outline: none; word-break: break-word; z-index: 3; position: relative; } /* Forzar estilo rojo y subrayado en los hipervínculos dentro del diagrama */ body.utility-page .diagram-shape a{ color: #ff0000 !important; text-decoration: underline !important; cursor: pointer; } /* --- MANEJADOR DE REDIMENSIÓN (CUADRADITO EN LA ESQUINA) --- */ body.utility-page .resize-handle{ position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background-color: #ffffff; border: 2px solid #000000; cursor: nwse-resize; z-index: 20; display: none; /* Solo se muestra cuando la forma está seleccionada */ } body.utility-page .diagram-shape.seleccionada .resize-handle{ display: block; } body.utility-page .resize-handle:hover{ background-color: #000000; } /* --- VARIACIONES GEOMÉTRICAS REESTRUCTURADAS --- */ body.utility-page .shape-rectangulo{ border-radius: 0; } body.utility-page .shape-circulo{ border-radius: 50%; } /* El rombo se reestructura para que el cuadro de selección y el manejador no se recorten */ body.utility-page .shape-rombo{ background-color: transparent !important; border: 2px solid transparent; /* Marco invisible para selección */ padding: 25px; } body.utility-page .shape-rombo-outer{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color: #000000; /* Borde negro simulado */ z-index: 1; } body.utility-page .shape-rombo-inner{ position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color: #ffffff; z-index: 2; } /* --- CURSOR DE TEXTO --- */ /* Cambia el cursor a modo texto solo si la forma ya está seleccionada */ body.utility-page .diagram-shape.seleccionada .shape-text-area{ cursor: text; } /* ======================================================= ACTUALIZACIÓN: FORMATOS DE TEXTO SELECCIONADO Y DESHACER ======================================================= */ /* Permite que los elementos nativos como o actúen correctamente dentro del bloque */ body.utility-page .shape-text-area b,body.utility-page .shape-text-area strong{ font-weight: 900 !important; } body.utility-page .shape-text-area font{ line-height: 1.2; } /* Espaciadores para la nueva barra de herramientas */ body.utility-page .separador-barra{ width: 2px; height: 30px; background-color: #000000; margin: 0 10px; } /* ======================================================= ACTUALIZACIÓN: BOTONES COMPACTOS EN UNA SOLA LÍNEA ======================================================= */ /* Evita que los botones y textos de la barra de diagramas salten de línea */ body.utility-page .toolbar-diagrama button,body.utility-page .toolbar-diagrama strong,body.utility-page .toolbar-diagrama select,body.utility-page .toolbar-diagrama input{ white-space: nowrap !important; } /* Reducir ligeramente el tamaño general de la barra para que todo quepa en pantallas pequeñas */ body.utility-page .toolbar-diagrama{ font-size: 0.9rem; } body.utility-page .toolbar-diagrama button{ font-size: 0.85rem; padding: 6px 10px; /* Reducimos el padding para ahorrar espacio */ } body.utility-page .btn-pequeno{ font-size: 0.85rem !important; padding: 6px 10px !important; } /* ======================================================= ACTUALIZACIÓN: DESPLEGABLES REDUCIDOS AL MÍNIMO ======================================================= */ body.utility-page .input-minimo{ font-family: 'Courier New', Courier, monospace; font-size: 0.8rem !important; padding: 0px 2px !important; height: 24px !important; border: 1px solid #000000; width: auto; background-color: #ffffff; cursor: pointer; } /* Ajuste fino para la alineación vertical de las barras */ body.utility-page .toolbar-diagrama{ align-items: center; padding: 10px 15px; /* Ligeramente más compacta */ } /* Identidad compartida con MyLandingPage. Los lienzos mantienen sus colores. */ @media screen{ :root{--s-bg:#17191a;--s-panel:#202324;--s-ink:#f3f0e6;--s-muted:#a8adac;--s-line:#3a3e3d;--s-accent:#ffdf57;color-scheme:dark} :root[data-theme=light]{--s-bg:#f4f1e7;--s-panel:#e9e7db;--s-ink:#202923;--s-muted:#576158;--s-line:#b9c0b0;--s-accent:#765500;color-scheme:light} body.utility-page,body.utility-page{background:var(--s-bg);color:var(--s-ink);font-family:'Courier New',monospace;height:auto;min-height:100vh;overflow-x:clip}body.utility-page{display:flex;flex-direction:column} body.utility-page header{min-height:90px;padding:20px 30px;gap:22px;border-color:var(--s-line);background:var(--s-bg);flex-wrap:wrap}body.utility-page header h1{font-size:20px;font-weight:bold;letter-spacing:-.8px;margin:0;flex:1}body.utility-page header a{color:var(--s-ink);text-decoration:none;font-size:12px}body.utility-page .mini-brand{display:flex;align-items:center;gap:13px;font-size:12px!important;font-weight:bold}body.utility-page .s-rainbow{display:inline-flex;gap:2px;transform:skew(-24deg);height:24px;width:33px}body.utility-page .s-rainbow i{width:7px;background:#ff555c}body.utility-page .s-rainbow i:nth-child(2){background:#ffdf57}body.utility-page .s-rainbow i:nth-child(3){background:#71d68e}body.utility-page .s-rainbow i:nth-child(4){background:#78dce3}body.utility-page button{background:var(--s-panel);border:1px solid var(--s-line);color:var(--s-ink);font: bold 12px 'Courier New',monospace;min-height:42px;transition:background .15s}body.utility-page button:hover{background:#ffdf57;color:#17191a}body.utility-page button:disabled{opacity:.45;cursor:default}body.utility-page #btn-menu{font-size:11px}body.utility-page .contenedor{flex:1;width:100%;min-height:calc(100vh - 90px);align-items:stretch}body.utility-page .menu{flex:0 0 235px;width:235px;border-color:var(--s-line);padding:28px 20px;background:var(--s-panel);font-size:11px}body.utility-page .menu.oculto{margin-left:-235px}body.utility-page .menu ul{list-style:none}body.utility-page .menu li{margin:0}body.utility-page .menu a{display:block;padding:11px 10px;color:var(--s-muted);text-decoration:none;border-left:2px solid transparent;line-height:1.4}body.utility-page .menu a:hover,body.utility-page .menu a[aria-current=page]{border-left-color:var(--s-accent);background:var(--s-bg);color:var(--s-accent)}body.utility-page .menu .menu-label{font-size:8px;letter-spacing:1.6px;color:var(--s-muted);padding:22px 10px 7px}body.utility-page .menu .menu-home{color:var(--s-ink);font-weight:bold;margin-bottom:12px;border-bottom:1px solid var(--s-line);padding-bottom:18px}body.utility-page .cuerpo{flex:1;min-width:0;padding:35px;max-width:1500px;font-size:13px;line-height:1.7}body.utility-page .cuerpo>p:first-child{color:var(--s-muted);margin-bottom:25px}body.utility-page .cuerpo textarea{background:var(--s-panel);color:var(--s-ink);border:1px solid var(--s-line);min-height:300px;line-height:1.8;padding:22px}body.utility-page .cuerpo input:not([type=checkbox]):not([type=range]):not([type=color]),body.utility-page .cuerpo select{background-color:var(--s-panel);color:var(--s-ink);border-color:#737b70;font-family:inherit;max-width:100%;min-height:40px}body.utility-page .cuerpo input::placeholder,body.utility-page .cuerpo textarea::placeholder{color:var(--s-muted)}body.utility-page .cuerpo input[type=checkbox],body.utility-page .cuerpo input[type=range]{accent-color:#d5b93e}body.utility-page .controles{flex-wrap:wrap;gap:10px}body.utility-page .controles button:first-child{background:#ffdf57;color:#17191a;border-color:#ffdf57;box-shadow:3px 3px 0 #080a0a}body.utility-page .adsense{display:none}body.utility-page .reloj-grande,body.utility-page .crono-display,body.utility-page .pomodoro-display{color:var(--s-accent);font-variant-numeric:tabular-nums}body.utility-page .consola-log,body.utility-page .pdf-item{background:var(--s-panel);color:var(--s-ink);border-color:var(--s-line)}body.utility-page .cuadricula-calendario{background:var(--s-panel);border-color:var(--s-line)}body.utility-page .dia-hoy{background:#ffdf57;color:#17191a}body.utility-page .dia-calendario:hover{background:#384339}body.utility-page .fecha-pequena{color:var(--s-muted)}body.utility-page .cuerpo h2{font-size:20px}body.utility-page .cuerpo a{color:var(--s-accent)}body.utility-page :focus-visible{outline:3px solid var(--s-accent)!important;outline-offset:3px}body.utility-page .mini-theme{font-size:11px;white-space:nowrap}body.utility-page .s-note{padding:16px 20px;border-left:3px solid var(--s-accent);background:var(--s-panel);font-size:12px;color:var(--s-muted);margin-bottom:24px}body.utility-page .cuerpo canvas{max-width:100%;touch-action:none}body.utility-page .campo-fila{flex-wrap:wrap}body.utility-page .campo-fila input{min-width:120px}body.utility-page .dia-semana{font-size:11px} @media(max-width:900px){body.utility-page header{padding:18px 21px;gap:14px}body.utility-page .mini-brand{width:100%}body.utility-page header h1{font-size:18px}body.utility-page .menu{flex-basis:205px;width:205px;padding:22px 12px}body.utility-page .menu.oculto{margin-left:-205px}body.utility-page .cuerpo{padding:24px}body.utility-page .reloj-grande{font-size:3.3rem}body.utility-page .crono-display{font-size:2.2rem}} @media(max-width:600px){body.utility-page header{min-height:130px}body.utility-page header h1{font-size:16px;order:4;width:100%;flex:auto}body.utility-page .mini-brand{width:auto;flex:1}body.utility-page .mini-brand .brand-text{font-size:10px}body.utility-page .mini-theme{padding:8px;font-size:10px}body.utility-page .contenedor{position:relative}body.utility-page .menu{position:absolute;z-index:20;top:0;bottom:0;min-height:calc(100vh - 130px);width:235px;max-width:88vw;box-shadow:10px 0 30px #0005;transition:none}body.utility-page .menu.oculto{display:none;margin:0}body.utility-page .cuerpo{padding:22px 16px}body.utility-page .grupo-opciones{grid-template-columns:1fr;gap:10px}body.utility-page .controles-calendario{flex-wrap:wrap}body.utility-page .selectores-calendario{flex-wrap:wrap}body.utility-page .cuadricula-calendario{gap:1px;padding:5px}body.utility-page .dia-calendario{padding:12px 1px}body.utility-page .dia-semana{font-size:9px}body.utility-page .crono-display{font-size:1.9rem}body.utility-page .reloj-grande{font-size:2.8rem}body.utility-page .bloque-opciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}body.utility-page .bloque-opciones br{display:none}body.utility-page .controles button{font-size:10px;padding:10px}body.utility-page .fila-directorio{flex-wrap:wrap}body.utility-page .cuerpo textarea{min-height:45vh}} @media(prefers-reduced-motion:reduce){body.utility-page *{transition:none!important}} } body.immersive-page,body.immersive-page{ margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; overflow: hidden; color: white; background-color: transparent; } body.immersive-page #bg-video{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 0; filter: brightness(0.6); } /* ======================================================== ESTADO INICIAL: Tarjeta de Configuración ======================================================== */ body.immersive-page .pomodoro-container{ position: fixed; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.45); padding: 25px; border-radius: 20px; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: 320px; box-sizing: border-box; display: flex; flex-direction: column; gap: 15px; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } body.immersive-page .top-bar-header{ display: flex; justify-content: space-between; align-items: center; width: 100%; } body.immersive-page h1{ margin: 0; font-size: 22px; letter-spacing: 1px; font-weight: 600; } body.immersive-page #timer-display{ font-size: 56px; font-weight: bold; margin: 0; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,0.3); transition: font-size 0.5s ease; } body.immersive-page #status-display{ font-size: 16px; color: #4CAF50; min-height: 24px; font-weight: 600; } body.immersive-page #setup-panel{ display: flex; flex-direction: column; gap: 12px; } body.immersive-page .input-group{ text-align: left; display: flex; justify-content: space-between; align-items: center; } body.immersive-page label{ margin-bottom: 0; font-size: 14px; color: rgba(255, 255, 255, 0.9); font-weight: 500; } body.immersive-page input{ width: 80px; padding: 10px; background-color: rgba(255, 255, 255, 0.15); color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; font-size: 14px; text-align: center; outline: none; transition: background 0.3s; } body.immersive-page input:focus{ background-color: rgba(255, 255, 255, 0.25); } body.immersive-page input:disabled{ background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.1); } body.immersive-page .controls{ display: flex; flex-direction: column; gap: 10px; } body.immersive-page .btn-row{ display: flex; gap: 10px; width: 100%; } body.immersive-page button{ padding: 14px; font-size: 15px; font-weight: bold; border-radius: 12px; border: none; color: white; cursor: pointer; width: 100%; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.5px; } body.immersive-page button:disabled{ background-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.3) !important; cursor: not-allowed; } body.immersive-page #start-btn{ background-color: rgba(76, 175, 80, 0.7); } body.immersive-page #start-btn:hover:not(:disabled){ background-color: rgba(76, 175, 80, 0.9); } body.immersive-page #pause-btn{ background-color: rgba(255, 152, 0, 0.7); } body.immersive-page #pause-btn:hover:not(:disabled){ background-color: rgba(255, 152, 0, 0.9); } body.immersive-page #reset-btn{ background-color: rgba(244, 67, 54, 0.7); } body.immersive-page #reset-btn:hover:not(:disabled){ background-color: rgba(244, 67, 54, 0.9); } /* Botón de sonido flotante (Siempre Redondo) */ body.immersive-page #mute-btn{ background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; width: 44px; height: 44px; font-size: 18px; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; /* Evita que el botón se deforme */ } body.immersive-page #mute-btn:hover{ background: rgba(255, 255, 255, 0.3); } body.immersive-page .divider{ display: none; width: 1px; height: 35px; background-color: rgba(255, 255, 255, 0.2); } /* ======================================================== ESTADO EN REPRODUCCIÓN: Barra en el Bottom ======================================================== */ body.immersive-page.playing .pomodoro-container{ top: auto; right: auto; bottom: 30px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 95vw; flex-direction: row; align-items: center; padding: 10px 25px; border-radius: 50px; gap: 15px; } body.immersive-page.playing h1{ display: none; } body.immersive-page.playing .divider{ display: block; } body.immersive-page.playing #start-btn{ display: none; } body.immersive-page.playing #timer-display{ font-size: 32px; margin: 0; } body.immersive-page.playing #status-display{ font-size: 14px; min-height: auto; white-space: nowrap; margin-bottom: 0; } body.immersive-page.playing #setup-panel{ flex-direction: row; gap: 10px; } body.immersive-page.playing .input-group{ gap: 5px; } body.immersive-page.playing label{ font-size: 12px; white-space: nowrap; } body.immersive-page.playing input{ width: 50px; padding: 6px; } body.immersive-page.playing .controls{ flex-direction: row; align-items: center; gap: 8px; } body.immersive-page.playing .btn-row{ width: auto; gap: 8px; } body.immersive-page.playing button{ width: auto; padding: 10px 20px; font-size: 13px; border-radius: 25px; } /* Ajuste ligero del tamaño en la barra, manteniéndose redondo */ body.immersive-page.playing #mute-btn{ width: 40px; height: 40px; } /* ======================================================== RESPONSIVE DESIGN (Móviles y Tablets) ======================================================== */ @media (max-width: 850px) { body.immersive-page .pomodoro-container{ top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 360px; } body.immersive-page.playing .pomodoro-container{ bottom: 20px; top: auto; left: 50%; transform: translateX(-50%); flex-direction: column; border-radius: 25px; width: 90%; padding: 20px; gap: 15px; } body.immersive-page.playing .divider{ display: none; } body.immersive-page.playing #setup-panel{ flex-direction: row; justify-content: space-between; width: 100%; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 10px 0; } body.immersive-page.playing .input-group{ flex-direction: column; gap: 4px; } body.immersive-page.playing .controls{ width: 100%; justify-content: space-between; } body.immersive-page.playing .btn-row{ flex-grow: 1; } body.immersive-page.playing button{ padding: 12px; flex-grow: 1; text-align: center; } body.immersive-page.playing #timer-display{ font-size: 42px; } body.immersive-page.playing #status-display{ font-size: 16px; } /* En móvil reproduciendo se asegura que recupere el tamaño estándar de botón redondo circular */ body.immersive-page.playing #mute-btn{ width: 44px; height: 44px; margin-left: auto; margin-right: auto; } } body[data-tool="hello_world"]{ font-family: 'Inter', sans-serif; background-color: #ffffff; overflow: hidden; margin: 0; } @keyframes zoomIn { 0% { transform: scale(0.1) translateZ(-1000px); opacity: 0; filter: blur(20px); } 100% { transform: scale(1) translateZ(0); opacity: 1; filter: blur(0); } } body[data-tool="hello_world"] .animate-zoom-in{ animation: zoomIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } body[data-tool="hello_world"] .delay-text{ animation-delay: 0.1s; opacity: 0; } body[data-tool="hello_world"] .delay-image{ animation-delay: 0.6s; opacity: 0; } body[data-tool="hello_world"] .heart-mask-wrapper{ width: 100vw; height: 100vw; max-width: 600px; max-height: 600px; position: relative; display: flex; justify-content: center; align-items: center; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.1)); } body[data-tool="hello_world"] .heart-mask{ width: 100%; height: 100%; background-color: #f3f4f6; display: flex; justify-content: center; align-items: center; overflow: hidden; /* Máscara maximalista para ver casi toda la foto */ -webkit-mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 98%; mask-image: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center; mask-size: 98%; } body[data-tool="hello_world"] canvas{ position: absolute; top: 0; left: 0; pointer-events: none; /* Permite clicks a través de los corazones */ z-index: 999; /* El confeti ahora está por encima de todo */ } body[data-tool="hello_world"] .content-layer{ position: relative; z-index: 10; /* Texto e imagen en nivel inferior al canvas */ } /* Ajustes compartidos que no alteran los lienzos de las utilidades. */ body.utility-page .site-header{position:relative;z-index:30} body.utility-page .cuerpo{min-height:calc(100vh - 90px);align-self:flex-start;width:100%} body.utility-page .cuerpo textarea{flex:0 0 auto;min-height:50vh} body.utility-page .menu{align-self:stretch} body.utility-page .menu.oculto{visibility:hidden;pointer-events:none} body.utility-page .menu a{overflow-wrap:anywhere} body.utility-page .task-label{font-size:11px} body.utility-page .library-error{background:#f3f0e6;color:#7c2037;padding:16px;border:2px solid #ee8cbd} body.immersive-page .immersive-back{position:fixed;top:18px;left:18px;z-index:50;background:#17191a;color:#ffdf57;border:1px solid #ffdf57;padding:12px;font:12px monospace;text-decoration:none} body[data-tool="hello_world"]{overflow:auto} body[data-tool="hello_world"] .hello-stage{position:relative;overflow:hidden;min-height:calc(100vh - 90px);background:var(--s-bg);display:flex;align-items:center;justify-content:center} body[data-tool="hello_world"] .content-layer{text-align:center;display:flex;flex-direction:column;align-items:center;width:100%;padding:20px} body[data-tool="hello_world"] .content-layer h1{font-family:'Courier New',monospace;color:var(--s-accent);font-weight:900;letter-spacing:-3px;font-size:clamp(32px,6vw,80px);margin:0 0 30px} body[data-tool="hello_world"] .heart-mask-wrapper{width:min(60vw,420px);height:min(60vw,420px)} body[data-tool="hello_world"] .heart-mask img{width:100%!important;height:100%!important;object-fit:cover} body[data-tool="hello_world"] canvas{width:100%;height:100%} @media(max-width:600px){body.utility-page .cuerpo{min-height:calc(100vh - 130px)}body.utility-page .menu{overflow:auto;max-height:calc(100vh - 130px)}body.utility-page .menu.oculto{display:none}body[data-tool="hello_world"] .heart-mask-wrapper{width:70vw;height:70vw}body.utility-page .site-header{min-height:130px}} @media screen{ body.utility-page .toolbar-diagrama,body.utility-page .manual-uso,body.utility-page .bloque-color{background:var(--s-panel);color:var(--s-ink);border-color:var(--s-line)} body.utility-page .toolbar-diagrama strong{color:var(--s-ink)} body.utility-page .modal-retro{background:var(--s-panel);color:var(--s-ink);border-color:var(--s-line)} body.utility-page .diagram-canvas{color:#17191a} body[data-tool="hello_world"]{font-family:'Courier New',monospace;background:var(--s-bg)} }