/* --- Variables de tema (claro por defecto) --- */ :root{ /* colores suaves y contraste moderado */ --bg: #f6f7fb; --card: #ffffff; --text: #0f172a; --muted: #6b7280; --accent: #6c8cff; --accent-2: #7dd3fc; --shadow-strong: rgba(16,24,40,0.08); --shadow-soft: rgba(16,24,40,0.04); --glass-bg: rgba(255,255,255,0.6); /* color de marca: rojo suave y oscuro */ --brand-red: #8B1C20; /* rojo suave y oscuro para el logo */ } /* Modo oscuro: cuando tiene .dark */ body.dark{ --bg: #0b1020; --card: #0f1724; --text: #e6eef8; --muted: #9ca3af; --accent: #5b8cff; --accent-2: #0ea5a4; --shadow-strong: rgba(0,0,0,0.6); --shadow-soft: rgba(0,0,0,0.35); --glass-bg: rgba(20,24,30,0.45); } /* aplicar variables generales */ body{ margin:0; padding:1.5rem; background: var(--bg); color: var(--text); /* Tipografía base moderna */ font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height:1.45; font-size:16px; } .container{ max-width:800px; margin:0 auto; background: var(--card); padding:1.75rem; border-radius:8px; box-shadow: 0 12px 30px var(--shadow-soft); } h1{ margin:0 0 1rem 0; font-size:1.25rem; } label{ display:block; margin-top:1rem; font-size:0.9rem; } input[type="text"], select{ width:100%; padding:0.75rem; margin-top:0.25rem; box-sizing:border-box; border:1px solid #d7dbe7; border-radius:10px; } /* estilos para el selector de forma */ #shape{ width:100%; padding:0.5rem; margin-top:0.25rem; box-sizing:border-box; border:1px solid #d7dbe7; border-radius:6px; } .colors{ display:flex; gap:1.25rem; margin-top:0.75rem; flex-wrap:wrap; } .color-field{ display:flex; align-items:center; gap:0.75rem; flex-direction:column; } /* swatches de vista previa */ .swatch{ width:28px; height:28px; border-radius:6px; border:1px solid #e6e9f0; box-shadow:0 1px 2px rgba(0,0,0,0.04); } /* gradient controls compact */ .gradient-controls .colors .color-field{ width:90px; } /* background options */ .bg-options{ display:flex; gap:0.75rem; margin-top:0.25rem; } /* frame decorativo alrededor del canvas */ .qr-frame{ display:inline-block; padding:12px; border-radius:14px; /* usar variables para soportar tema oscuro/claro */ background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); background-color: var(--glass-bg); box-shadow: 0 6px 18px var(--shadow-soft); border: 1px solid rgba(0,0,0,0.04); } /* texto del marco: respetar color de tema */ .frame-text{ display:block; text-align:center; font-weight:600; margin-top:8px; font-size:0.95rem; color: var(--text); } /* glassmorphism para el contenedor principal si se activa */ .container.glass{ background: rgba(255,255,255,0.35); backdrop-filter: blur(8px) saturate(120%); box-shadow: 0 8px 30px rgba(16,24,40,0.12); border: 1px solid rgba(255,255,255,0.15); } .buttons{ margin-top:1.25rem; gap:0.75rem; display:flex; align-items:center; } button, .btn{ padding:0.5rem 0.75rem; border-radius:10px; border:0; background:#2563eb; color:#fff; cursor:pointer; text-decoration:none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } button:hover, .btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(16,24,40,0.08); } .btn.disabled{ opacity:0.6; pointer-events:none; background:#94a3b8; } #preview{ margin-top:1.25rem; } .qr-container{ padding:1.25rem; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border:1px dashed #e6e9f0; display:inline-block; border-radius:12px; box-shadow: 0 14px 30px var(--shadow-soft); transition: box-shadow 280ms ease, transform 280ms ease, opacity 280ms ease; } .qr-container canvas{ display:block; max-width:100%; height:auto; border-radius:8px; animation: qrEnter 360ms cubic-bezier(.2,.9,.3,1); } /* Animación suave al mostrar el canvas del QR */ @keyframes qrEnter { from { opacity: 0; transform: translateY(10px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } } footer.note{ margin-top:1rem; color:#6b7280; font-size:0.85rem; } /* nueva regla: copyright discreto */ footer.note .copyright{ display:block; margin-top:0.4rem; font-size:0.8rem; color:var(--muted); opacity:0.95; } @media (max-width:760px){ /* contenedor más compactado en móviles */ .container{ padding:1rem; } /* top row: apilar marca y controles */ .top-row{ flex-direction:column; align-items:flex-start; gap:0.6rem; } /* marca más compacta */ .brand-name{ font-size:1rem; } /* grupos de colores y controles en columna para lectura vertical */ .colors{ flex-direction:column; gap:0.75rem; } /* mostrar color-field en fila interna para ahorrar altura */ .color-field{ flex-direction:row; align-items:center; justify-content:flex-start; gap:0.75rem; } /* inputs más grandes y legibles táctilmente */ input[type="text"], select, input[type="color"], input[type="range"]{ font-size:16px; padding:0.75rem; } /* botones apilados y ancho completo para dedo */ .buttons{ flex-direction:column; width:100%; gap:0.6rem; } button, .btn{ width:100%; padding:0.85rem 0.9rem; min-height:48px; font-size:16px; touch-action:manipulation; } /* preview y canvas ocupan 100% del ancho disponible */ .qr-container{ width:100%; box-sizing:border-box; padding:1rem; } /* versiones pequeñas (before/after) reducen su altura pero mantienen legibilidad */ .qr-container.small{ padding:0.5rem; } /* logo más pequeño para móviles */ .brand-logo{ width:100px; height:100px; } /* espaciado en footer / notas */ footer.note{ font-size:0.9rem; line-height:1.4; } } /* --- Extra small screens: aumentar touch targets aún más --- */ @media (max-width:420px){ /* Aumentar mínimos para botones y campos */ button, .btn, input[type="text"], select{ min-height:52px; font-size:17px; padding:0.9rem; } /* Compactar gaps para encajar */ .colors{ gap:0.5rem; } .color-field{ gap:0.5rem; } } /* Encabezados decorativos: línea/gradiente */ .main-title{ font-family: 'Poppins', system-ui, sans-serif; font-weight:700; font-size:1.25rem; margin:0; padding-bottom:0.5rem; position:relative; } .main-title::after{ content:''; position:absolute; left:0; bottom:0; height:4px; width:72px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:3px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); opacity:0.95; } /* sección títulos (h2) con línea más sutil */ .section-title{ font-weight:600; font-size:1rem; margin:0 0 0.75rem 0; position:relative; padding-bottom:0.5rem; } .section-title::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:56px; background: linear-gradient(90deg, var(--accent), transparent 80%); border-radius:3px; opacity:0.95; } /* pequeños ajustes visuales para theme-toggle (opcional) */ .theme-toggle input[type="checkbox"]{ width:40px; height:20px; /* apariencia nativa mínima; JS aplica clase .dark */ } #jpgQualityWrap{ display:flex; gap:0.5rem; align-items:center; } #jpgQuality{ width:160px; } #jpgQualityLabel{ min-width:36px; text-align:center; font-size:0.9rem; color:var(--muted); } /* Top row / brand */ .top-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; } .brand{ display:flex; align-items:center; gap:0.75rem; } .brand-logo{ flex:0 0 auto; width:100px; height:100px; /* si el SVG usa fill en CSS: fill: var(--brand-red); */ } .brand-name{ font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:0.2px; color:var(--text); } /* pequeño ajuste: asegurar buen contraste del SVG si necesita fill por CSS */ .brand-logo [fill="var(--brand-red)"], .brand-logo rect { fill: var(--brand-red); }