/* ========================================== echazu-tools — CSS Compartido Estilos comunes para las 5 herramientas de la suite. Cada HTML define solo sus variables de color y estilos específicos. ========================================== */ /* Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Phosphor Icons base */ i.ph { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } :root { --surface-subtle: 222, 47%, 10%; --surface-muted: 222, 47%, 13%; } /* Tema Claro — se activa con data-theme="light" en */ :root[data-theme="light"] { --bg-deep: 220, 20%, 97%; --bg-card: 0, 0%, 100%; --bg-card-glass: 0, 0%, 100%, 0.85; --border-glass: 220, 13%, 88%, 0.7; --text-main: 222, 20%, 14%; --text-muted: 220, 10%, 42%; --text-dark: 222, 47%, 3%; --shadow-premium: 0 20px 40px -15px rgba(0, 0, 0, 0.1); --surface-subtle: 220, 14%, 95%; --surface-muted: 0, 0%, 92%; --input-bg: 220, 14%, 93%; } body { background-color: hsl(var(--bg-deep)); color: hsl(var(--text-main)); font-family: var(--font-body); min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; overflow-x: hidden; position: relative; line-height: 1.6; } body::before, body::after { content: ''; position: absolute; width: 40vw; height: 40vw; border-radius: 50%; z-index: 0; pointer-events: none; filter: blur(150px); opacity: 0.12; } [data-theme="light"] body::before, [data-theme="light"] body::after { opacity: 0.06; } body::before { background: hsl(var(--primary)); top: -10%; left: -10%; } body::after { background: hsl(var(--secondary)); bottom: -10%; right: -10%; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; z-index: 1; position: relative; flex-grow: 1; display: flex; flex-direction: column; gap: 2.5rem; } /* Header & Branding */ header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .brand-badge { background: linear-gradient(135deg, hsl(var(--primary-glow)), hsl(var(--secondary-glow))); border: 1px solid hsl(var(--border-glass)); padding: 0.4rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: hsl(var(--primary)); text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 0.5rem; } .brand-badge span { display: inline-block; width: 8px; height: 8px; background-color: hsl(var(--primary)); border-radius: 50%; box-shadow: 0 0 8px hsl(var(--primary)); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0% { transform: scale(0.9); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.6; } } .nav-logo { height: 22px; width: auto; flex-shrink: 0; } [data-theme="dark"] .nav-logo { filter: brightness(0) invert(1); } .studio-footer { margin-top: 2rem; padding: 2.5rem 1rem 0.75rem; border-top: 1px solid hsl(var(--border-glass)); font-size: 0.75rem; color: hsl(var(--text-muted)); display: flex; align-items: center; justify-content: center; } h1 { font-family: var(--font-title); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; } h1 span { background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .subtitle { color: hsl(var(--text-muted)); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 600px; font-weight: 400; } /* Nav Tools */ .nav-tools { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: center; z-index: 10; flex-wrap: wrap; } .nav-tool-btn { background: rgba(255, 255, 255, 0.02); color: hsl(var(--text-muted)); border: 1px solid hsl(var(--border-glass)); padding: 0.5rem 1.2rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: var(--transition-smooth); font-family: var(--font-title); letter-spacing: 0.02em; } [data-theme="light"] .nav-tool-btn { background: rgba(0, 0, 0, 0.03); } .nav-tool-btn:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; border-color: rgba(255, 255, 255, 0.12); transform: translateY(-1px); } [data-theme="light"] .nav-tool-btn:hover { background: rgba(0, 0, 0, 0.06); color: hsl(var(--text-main)); border-color: rgba(0, 0, 0, 0.12); } .nav-tool-btn.active { background: linear-gradient(135deg, hsl(var(--primary-glow)), hsl(var(--secondary-glow))); border-color: hsl(var(--primary)); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } [data-theme="light"] .nav-tool-btn.active { color: hsl(var(--text-dark)); } /* Dropzone */ .dropzone-container { width: 100%; position: relative; } .dropzone { background: hsl(var(--bg-card-glass)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px dashed hsl(var(--border-glass)); border-radius: 24px; padding: 4rem 2rem; text-align: center; cursor: pointer; transition: var(--transition-bounce); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-premium); } .dropzone::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, hsl(var(--primary-glow)) 0%, transparent 70%); opacity: 0; transition: var(--transition-smooth); z-index: 0; pointer-events: none; } .dropzone:hover { border-color: hsl(var(--primary)); transform: translateY(-4px); } .dropzone:hover::before { opacity: 1; } .dropzone.dragover { border-color: hsl(var(--secondary)); background: hsl(var(--bg-card)); transform: scale(0.985) translateY(2px); } [data-theme="light"] .dropzone.dragover { background: hsl(var(--surface-subtle)); } .dropzone.dragover .upload-icon { transform: scale(1.1) translateY(-8px); color: hsl(var(--secondary)); } .upload-icon { width: 80px; height: 80px; border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid hsl(var(--border-glass)); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary)); transition: var(--transition-bounce); z-index: 1; } [data-theme="light"] .upload-icon { background: rgba(0, 0, 0, 0.03); } .upload-icon svg { width: 38px; height: 38px; stroke-width: 1.5; fill: none; stroke: currentColor; } .upload-icon i.ph { font-size: 38px; } .dropzone-text { display: flex; flex-direction: column; gap: 0.5rem; z-index: 1; } .dropzone-text h3 { font-family: var(--font-title); font-size: 1.35rem; font-weight: 600; color: #ffffff; } [data-theme="light"] .dropzone-text h3 { color: hsl(var(--text-main)); } .dropzone-text p { color: hsl(var(--text-muted)); font-size: 0.9rem; } .file-select-btn { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); color: #ffffff; font-weight: 700; padding: 0.8rem 1.8rem; border-radius: 12px; border: none; cursor: pointer; font-size: 0.9rem; font-family: var(--font-title); letter-spacing: -0.01em; transition: var(--transition-smooth); z-index: 1; } .file-select-btn:hover { transform: translateY(-2px); filter: brightness(1.05); } #file-input { display: none; } /* Workspace Grid & Panels */ .workspace-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; } @media (min-width: 900px) { .workspace-grid { grid-template-columns: 4fr 5fr; } } .panel { background: hsl(var(--bg-card-glass)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid hsl(var(--border-glass)); border-radius: 24px; padding: 2rem; box-shadow: var(--shadow-premium); display: flex; flex-direction: column; gap: 1.5rem; transition: var(--transition-smooth); } .panel-header { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid hsl(var(--border-glass)); padding-bottom: 1rem; } .panel-header svg { width: 24px; height: 24px; color: hsl(var(--primary)); stroke-width: 2; fill: none; stroke: currentColor; } .panel-header i.ph { font-size: 24px; color: hsl(var(--primary)); } .panel-header h2 { font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; color: #ffffff; } [data-theme="light"] .panel-header h2 { color: hsl(var(--text-main)); } /* Toggles */ .toggles-list { display: flex; flex-direction: column; gap: 1.1rem; } .toggle-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.03); transition: var(--transition-smooth); } [data-theme="light"] .toggle-item { background: hsl(var(--surface-subtle)); border-color: rgba(0, 0, 0, 0.06); } .toggle-item:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); } [data-theme="light"] .toggle-item:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } .toggle-info { display: flex; flex-direction: column; gap: 0.2rem; padding-right: 1.5rem; } .toggle-label { font-family: var(--font-title); font-weight: 600; font-size: 0.95rem; color: #ffffff; } [data-theme="light"] .toggle-label { color: hsl(var(--text-main)); } .toggle-desc { font-size: 0.8rem; color: hsl(var(--text-muted)); } .switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background-color: rgba(255, 255, 255, 0.1); transition: .4s; border-radius: 34px; border: 1px solid hsl(var(--border-glass)); } [data-theme="light"] .slider { background-color: rgba(0, 0, 0, 0.1); } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } input:checked + .slider { background-color: hsl(var(--primary-glow)); border-color: hsl(var(--primary)); } input:checked + .slider:before { transform: translateX(22px); background-color: hsl(var(--primary)); box-shadow: 0 0 8px hsl(var(--primary)); } /* Stats Empty State */ .stats-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; color: hsl(var(--text-muted)); text-align: center; gap: 1rem; } .stats-empty svg { width: 54px; height: 54px; stroke-width: 1; color: rgba(255, 255, 255, 0.06); fill: none; stroke: currentColor; } [data-theme="light"] .stats-empty svg { color: rgba(0, 0, 0, 0.1); } .stats-empty i.ph { font-size: 54px; color: rgba(255, 255, 255, 0.06); } [data-theme="light"] .stats-empty i.ph { color: rgba(0, 0, 0, 0.1); } /* File Info Row */ .file-info-row { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.02); padding: 0.85rem 1.2rem; border-radius: 16px; border: 1px solid hsl(var(--border-glass)); } [data-theme="light"] .file-info-row { background: hsl(var(--surface-subtle)); } .file-name { font-family: var(--font-title); font-weight: 600; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; } [data-theme="light"] .file-name { color: hsl(var(--text-main)); } /* Metrics Grid */ .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .metric-card { background: rgba(255, 255, 255, 0.02); border: 1px solid hsl(var(--border-glass)); border-radius: 20px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; } [data-theme="light"] .metric-card { background: hsl(var(--surface-subtle)); } .metric-label { font-size: 0.75rem; color: hsl(var(--text-muted)); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .metric-value { font-family: var(--font-title); font-size: 1.75rem; font-weight: 800; color: #ffffff; } [data-theme="light"] .metric-value { color: hsl(var(--text-main)); } /* Toast */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background: hsl(var(--bg-card)); border: 1px solid hsl(var(--primary)); padding: 0.85rem 1.75rem; border-radius: 9999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.9rem; color: #ffffff; z-index: 9999; opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; } [data-theme="light"] .toast { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); color: hsl(var(--text-main)); } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast svg { width: 18px; height: 18px; color: hsl(var(--primary)); fill: none; stroke: currentColor; stroke-width: 2.5; } .toast i.ph { font-size: 18px; color: hsl(var(--primary)); } /* Footer */ footer { text-align: center; padding: 2rem 1.5rem; font-size: 0.8rem; color: hsl(var(--text-muted)); border-top: 1px solid rgba(255, 255, 255, 0.02); z-index: 1; position: relative; } [data-theme="light"] footer { border-top-color: rgba(0, 0, 0, 0.06); } footer a { color: hsl(var(--primary)); text-decoration: none; font-weight: 600; transition: var(--transition-smooth); } footer a:hover { color: hsl(var(--secondary)); } /* Animations */ .fade-in { animation: fadeIn 0.5s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .shake { animation: shakeAnim 0.4s ease-in-out; } @keyframes shakeAnim { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Config Group (usado en image.html, audio.html, descargador.html) */ .config-group { display: flex; flex-direction: column; gap: 0.85rem; background: rgba(255, 255, 255, 0.01); border: 1px solid hsl(var(--border-glass)); padding: 1.25rem; border-radius: 16px; } [data-theme="light"] .config-group { background: hsl(var(--surface-subtle)); } .config-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .config-label { font-family: var(--font-title); font-size: 0.85rem; font-weight: 600; color: hsl(var(--text-muted)); } select, input[type="number"], input[type="text"] { background: hsl(var(--bg-deep)); border: 1px solid hsl(var(--border-glass)); color: #ffffff; padding: 0.5rem 0.75rem; border-radius: 8px; font-family: var(--font-body); font-size: 0.85rem; } [data-theme="light"] select, [data-theme="light"] input[type="number"], [data-theme="light"] input[type="text"] { background: hsl(var(--input-bg)); color: hsl(var(--text-main)); } select:focus, input:focus { outline: none; border-color: hsl(var(--primary)); } input[type="text"] { width: 100%; } /* Progress Bar (usado en descargador.html, audio.html, base64.html) */ .progress-bar-bg { height: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 9999px; overflow: hidden; border: 1px solid hsl(var(--border-glass)); } [data-theme="light"] .progress-bar-bg { background: rgba(0, 0, 0, 0.06); } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary))); width: 0%; transition: width 0.3s ease; } /* Stats Panel Content */ .stats-panel-content { display: flex; flex-direction: column; gap: 1.75rem; } /* Original Badge */ .original-badge { font-size: 0.75rem; color: hsl(var(--text-muted)); background: rgba(255, 255, 255, 0.05); padding: 0.25rem 0.6rem; border-radius: 6px; } [data-theme="light"] .original-badge { background: hsl(var(--surface-muted)); }