/* ── FUENTE LOCAL (v1.26) ──────────────────────────────────────── */ /* Outfit variable (pesos 100-900, subset latino, licencia OFL en fonts/OFL-outfit.txt). Es la letra de los temas cozy Mocha/Latte: la pila Segoe UI era la última seña genérica que les quedaba. Naturaleza conserva su Georgia (su identidad es serif) y Hacker su Courier. Local a propósito (fonts/, sin CDN): el panel sigue funcionando offline. Si el navegador no la carga, cae a la pila de sistema del fallback — nada se rompe. */ @font-face { font-family: "Outfit"; src: url("../fonts/outfit-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --bg-dark: #050b14; --bg-card: rgba(0, 240, 255, 0.03); --text-light: #d4e8f9; --neon-cyan: #00f0ff; --neon-glow: rgba(0, 240, 255, 0.6); --border-dim: rgba(0, 240, 255, 0.1); --text-white: #ffffff; --border-section: #1a1a1a; --input-border: #222; /* --font-mono varía por tema (nombre de variable heredado de cuando los 5 eran monospace — ya no es literal desde v1.13: Naturaleza es serif, Plano/Ártico son sans). Courier New es la de Hacker, la original. */ --font-mono: "Courier New", Courier, monospace; /* estructura de caja: esquinas, resplandor y grosor de la barra de acento. El color de un recuadro cambia con el tema desde v1.10, pero la FORMA del recuadro (esquinas rectas + barra + resplandor neón) es lo que realmente lee como "terminal hacker" pase lo que pase con el color — así que esto también varía por tema, no solo --neon-cyan. */ --radius: 0px; --accent-width: 3px; /* colores semánticos y de interacción (v1.25): antes estaban hardcodeados por todo el CSS con los valores de Hacker, y en los temas claros el amarillo/rojo de fondo oscuro no daba contraste. Cada tema define los suyos. --btn-text es el texto sobre fondos de acento o semánticos (negro en Hacker, blanco/oscuro según tema); --btn-hover-bg el fondo del botón primario al hover; --hover-tint el tinte de hover de filas/tarjetas clicables. */ --danger: #ff3b5c; --warn: #ffcc00; --ok: #34d399; --btn-text: #000; --btn-hover-bg: #fff; --hover-tint: rgba(0, 240, 255, 0.08); /* elevación (v1.26): en Hacker la jerarquía la pone el resplandor, no la sombra — tarjetas planas (none), popover con la sombra dura de siempre y modal con glow. Los temas cozy definen sombras suaves tintadas con su propio gris: sin ellas, al no tener resplandor, buscador y ajustes flotaban sin ninguna profundidad. */ --shadow-card: none; --shadow-pop: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-modal: 0 0 30px var(--neon-glow); } /* ── NATURALEZA ────────────────────────────────────────────────── */ /* tema claro editorial: fondo crudo/marfil, verde bosque para texto y acentos, serif Georgia — pensado para leer como una revista/web botánica, no como una terminal invertida. Desde v1.22 es un tema COZY (applyTheme le añade la clase, ver COZY_THEMES en shared.js): sin decoración de terminal, igual que los Catppuccin. */ /* v1.20: los bloques de tema usan .clase a secas (no body.clase) porque applyTheme() pone la clase en Y en . Motivo: el scrollbar de la página pertenece a , y con la clase solo en body sus variables resolvían siempre contra :root — scrollbar cian de Hacker en todos los temas (bug de v1.10 a v1.19, visible pero nunca cazado). */ .nature { --bg-dark: #f6f2e6; --bg-card: rgba(45, 90, 62, 0.05); --text-light: #3a4a3a; --neon-cyan: #3f7d4f; /* sin resplandor: el brillo neón es lo más "ciberpunk" del set de variables — una web de naturaleza no debería tener bloom de fósforo */ --neon-glow: rgba(63, 125, 79, 0); --border-dim: rgba(63, 125, 79, 0.16); --text-white: #1f2e1f; --border-section: #ddd5bd; --input-border: #c9c0a0; /* serif elegante, no monospace — pedido explícito de Fritz: quería que Naturaleza "se sintiera" distinto, no solo de otro color. Georgia es la serif de pantalla más fiable en Mac y Windows sin depender de fuentes web externas (la web es 100% local/offline). */ --font-mono: Georgia, "Palatino Linotype", "Book Antiqua", serif; /* esquinas suaves + sin barra de acento lateral: menos "ventana de terminal", más tarjeta tranquila */ --radius: 10px; --accent-width: 0px; /* semánticos en tierra: rojo teja y ocre oscurecido — los neón de Hacker sobre marfil no daban contraste AA como texto */ --danger: #b13c2e; --warn: #8a6100; --ok: #2f7a3f; --btn-text: #fff; --btn-hover-bg: #346a42; --hover-tint: rgba(63, 125, 79, 0.08); /* sombras tintadas con el verde-gris del texto, no negro puro */ --shadow-card: 0 1px 3px rgba(58, 74, 58, 0.09), 0 4px 14px rgba(58, 74, 58, 0.07); --shadow-pop: 0 8px 28px rgba(58, 74, 58, 0.2); --shadow-modal: 0 12px 40px rgba(58, 74, 58, 0.25); } /* ── CATPPUCCIN MOCHA ──────────────────────────────────────────── */ /* paleta oficial Catppuccin (sabor Mocha): base #1e1e2e, texto #cdd6f4, acento malva. Pedido por Fritz (2026-07-12): el neón de Hacker le abrumaba — esto es lo contrario, pastel suave sobre oscuro calmado. Sin resplandor (el pastel no brilla) y esquinas redondeadas. */ .mocha { --bg-dark: #1e1e2e; --bg-card: rgba(203, 166, 247, 0.05); --text-light: #cdd6f4; --neon-cyan: #cba6f7; --neon-glow: rgba(203, 166, 247, 0); --border-dim: rgba(203, 166, 247, 0.16); --text-white: #f5e0dc; --border-section: #313244; --input-border: #45475a; /* v1.21: sans cómoda, no monospace — los Catppuccin son los temas "cozy" (clase .cozy, ver bloque más abajo) y la letra de terminal era lo que más los delataba. v1.26: Outfit local (ver @font-face arriba) — la pila de sistema era la última seña genérica que les quedaba. Misma familia en ambos sabores: dos caras del mismo sistema. */ --font-mono: "Outfit", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --radius: 8px; --accent-width: 0px; /* semánticos de la paleta oficial Mocha (red/yellow/green pastel); sobre esos pasteles claros el texto va oscuro (base), no negro puro */ --danger: #f38ba8; --warn: #f9e2af; --ok: #a6e3a1; --btn-text: #1e1e2e; --btn-hover-bg: #f5e0dc; --hover-tint: rgba(203, 166, 247, 0.08); /* sombras sobre fondo oscuro: tintadas con el crust (#11111b) de la propia paleta, más marcadas que en los temas claros */ --shadow-card: 0 1px 3px rgba(17, 17, 27, 0.3), 0 4px 14px rgba(17, 17, 27, 0.22); --shadow-pop: 0 8px 28px rgba(17, 17, 27, 0.5); --shadow-modal: 0 12px 40px rgba(17, 17, 27, 0.55); } /* ── CATPPUCCIN LATTE ──────────────────────────────────────────── */ /* el sabor claro de la misma familia: base #eff1f5, texto #4c4f69, mismo acento malva en su variante para fondo claro. */ .latte { --bg-dark: #eff1f5; --bg-card: rgba(136, 57, 239, 0.04); --text-light: #4c4f69; --neon-cyan: #8839ef; --neon-glow: rgba(136, 57, 239, 0); --border-dim: rgba(136, 57, 239, 0.14); --text-white: #1e1e2e; --border-section: #dce0e8; --input-border: #bcc0cc; --font-mono: "Outfit", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --radius: 8px; --accent-width: 0px; /* red de Latte para peligro; el amarillo oficial (#df8e1d) no llega a AA como texto sobre fondo claro — se usa un ocre oscurecido. Verde también oscurecido para aguantar texto blanco encima. Botón primario: texto blanco (negro sobre el malva #8839ef se quedaba en ~3:1) y hover a malva más oscuro, no a blanco (un botón blanco sobre fondo claro desaparecía). */ --danger: #d20f39; --warn: #8a6100; --ok: #2d7320; --btn-text: #fff; --btn-hover-bg: #7326d3; --hover-tint: rgba(136, 57, 239, 0.08); /* sombras tintadas con el gris-lavanda del texto Latte (#4c4f69) */ --shadow-card: 0 1px 3px rgba(76, 79, 105, 0.09), 0 4px 14px rgba(76, 79, 105, 0.07); --shadow-pop: 0 8px 28px rgba(76, 79, 105, 0.2); --shadow-modal: 0 12px 40px rgba(76, 79, 105, 0.25); } /* ── BASE ──────────────────────────────────────────────────────── */ * { box-sizing: border-box; } /* esquinas de todo lo bordeado, gobernadas por --radius (recta en hacker/ Hacker, redondeada en los temas cozy) — universal a propósito: así cualquier caja nueva hereda el criterio del tema sin tener que acordarse de añadirlo */ *, *::before, *::after { border-radius: var(--radius); } body { margin: 0; background-color: var(--bg-dark); color: var(--text-light); font-family: var(--font-mono); line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease, font-family 0s; } /* scrollbar temático — mismo truco que ::selection: variables, se re-tematiza solo */ * { scrollbar-color: var(--neon-cyan) var(--bg-dark); scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: var(--border-dim); border: 1px solid var(--neon-cyan); } ::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); } /* ── AJUSTES (engranaje + panel de tema) ───────────────────────── */ .settings-widget { position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; gap: 8px; } #search-toggle, #settings-toggle { background: transparent; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); font-family: inherit; font-size: 1.1rem; line-height: 1; width: 38px; height: 38px; cursor: pointer; transition: all 0.2s ease; /* v1.27: dentro va un SVG (antes emoji) — flex lo centra exacto */ display: inline-flex; align-items: center; justify-content: center; } #search-toggle:hover, #settings-toggle:hover { background: var(--neon-cyan); color: var(--bg-dark); box-shadow: 0 0 12px var(--neon-glow); } .settings-panel { position: absolute; top: 46px; right: 0; background: var(--bg-dark); border: 1px solid var(--border-dim); border-left: var(--accent-width) solid var(--neon-cyan); padding: 14px 16px; min-width: 200px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-pop); } /* el atributo hidden pierde contra un display:flex de igual especificidad puesto por nuestro propio CSS de autor (gana siempre al UA stylesheet, sin importar el orden) — por eso el panel se veía todo el rato */ .settings-panel[hidden] { display: none; } .settings-panel label { font-size: 0.75rem; opacity: 0.8; } .settings-panel select { width: 100%; } /* ── SYNC (v1.19, opcional — solo visible con js/sync-config.js) ── */ .sync-block { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--border-dim); padding-top: 10px; margin-top: 4px; } .sync-block[hidden] { display: none; } .sync-form { display: flex; flex-direction: column; gap: 6px; } .sync-form[hidden] { display: none; } .sync-block input { width: 100%; box-sizing: border-box; } .sync-btns { display: flex; gap: 6px; flex-wrap: wrap; } .sync-user { font-size: 0.75rem; color: var(--neon-cyan); word-break: break-all; margin: 0; } .sync-status { font-size: 0.7rem; opacity: 0.6; min-height: 1em; margin: 0; } /* v1.32: enlace "¿olvidaste tu contraseña?" en el login del panel */ .sync-forgot-link { background: none; border: none; color: var(--text-light); font-family: inherit; font-size: 0.7rem; opacity: 0.55; cursor: pointer; text-decoration: underline; padding: 2px 0; align-self: flex-start; } .sync-forgot-link:hover { opacity: 1; } /* v1.30: bloque de datos de ejemplo / vaciar en ⚙ */ .settings-data { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--border-dim); padding-top: 10px; margin-top: 4px; } .settings-data-btns { display: flex; gap: 6px; flex-wrap: wrap; } /* ── LAYOUT ────────────────────────────────────────────────────── */ .section-container { max-width: 1440px; width: 92%; margin: 0 auto; padding: 80px 20px; border-bottom: 1px dashed var(--border-section); } /* v1.21: el HTML lleva los textos en tipo frase ("Panel de Control", "01 Tracker", "Iniciar") y son los temas terminal los que los GRITAN vía text-transform — cozy lo desactiva. Mismo criterio que el "// " de los hints desde v1.12: la estética la pone el CSS, no el texto. */ h1 { font-size: 3rem; margin: 0 0 20px 0; text-transform: uppercase; } /* v1.26: sin viudas en títulos ni párrafos — balance reparte las líneas del título, pretty evita la palabra suelta al final. Los navegadores sin soporte lo ignoran sin más. */ h1, h2, h3 { text-wrap: balance; } p, .hint { text-wrap: pretty; } /* símbolo de marca inline en el h1: currentColor + var() → cambia con el tema */ .logo-symbol { width: 0.88em; height: 0.88em; color: var(--neon-cyan); vertical-align: -0.08em; margin-right: 12px; } h2 { font-size: 1.8rem; color: var(--neon-cyan); margin-bottom: 40px; } h3 { font-size: 1.2rem; margin: 0 0 15px 0; } p { font-size: 1.1rem; opacity: 0.8; max-width: 70ch; } .subtitle { font-size: 1.3rem; color: var(--neon-cyan); opacity: 1; margin-bottom: 30px; } .subtitle::before { content: "// "; } /* ── CURSOR ────────────────────────────────────────────────────── */ .cursor { color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-glow); animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* v1.27: eliminados los bloques PROJECTS / ARSENAL / EXPERIENCE del portfolio original (~95 líneas) — ninguna de sus clases aparecía ya en el HTML ni en el JS de este repo. */ /* ── FORM ──────────────────────────────────────────────────────── */ .terminal-form { margin-top: 30px; } .form-group { margin-bottom: 25px; } .form-group label { display: block; color: var(--neon-cyan); margin-bottom: 8px; font-size: 0.9rem; } .terminal-form input, .terminal-form textarea { width: 100%; background: transparent; border: 1px solid var(--input-border); border-left: var(--accent-width) solid var(--neon-cyan); color: var(--text-white); padding: 12px; font-family: inherit; outline: none; transition: all 0.2s; } .terminal-form input:focus, .terminal-form textarea:focus { background: var(--bg-card); border-color: var(--neon-cyan); } .terminal-form textarea { height: 120px; resize: none; } /* ── BUTTONS ───────────────────────────────────────────────────── */ .terminal-btn { background: var(--neon-cyan); color: var(--btn-text); border: none; padding: 15px 30px; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: 0.2s; font-family: inherit; } .terminal-btn:hover { background: var(--btn-hover-bg); box-shadow: 0 0 20px var(--neon-glow); } .terminal-btn-link { color: var(--neon-cyan); text-decoration: none; font-size: 0.8rem; font-weight: bold; } .terminal-btn-link:hover { text-shadow: 0 0 8px var(--neon-glow); } /* ── FOOTER ────────────────────────────────────────────────────── */ .footer-container { padding: 60px 20px; display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.8rem; opacity: 0.6; flex-wrap: wrap; gap: 20px; max-width: 1440px; margin: 0 auto; border-top: 1px dashed var(--border-section); } .footer-status::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--neon-cyan); margin-right: 10px; } /* ═══════════════════════════════════════════════════════════════ PANEL DE CONTROL — COMPONENTES (v1.2) El styles.css original solo traía las clases del portfolio. Nada de lo que usa el panel (nav, selects nativos, tablas, tracker, proyectos, enlaces, todos) tenía estilo: por eso se veía con los widgets nativos del navegador (normalmente en claro, aunque el body estuviera en modo oscuro). Bloque añadido para cubrir eso. ═══════════════════════════════════════════════════════════════ */ /* fuerza a los controles nativos (select, date, scrollbar, etc.) a seguir la paleta del tema en vez del tema del SO */ html { color-scheme: dark; } /* naturaleza y latte son los temas claros. Clase a secas (v1.20): también en , ver bloques de tema. */ .nature, .latte { color-scheme: light; } ::selection { background: var(--neon-cyan); color: var(--btn-text); } /* todo control de texto/número/fecha lleva el mismo tratamiento, esté o no dentro de .terminal-form — antes solo .terminal-form input/textarea lo tenía, así que la nota de sesión y otros campos sueltos (enlaces, todos) se quedaban con el input nativo del navegador, sin relación visual con el resto de la web. */ select, input[type="date"], input[type="number"], input[type="text"], input[type="url"], input[type="search"], textarea { font-family: inherit; color: var(--text-white); background: var(--bg-dark); border: 1px solid var(--input-border); border-left: var(--accent-width) solid var(--neon-cyan); padding: 10px 12px; outline: none; transition: all 0.2s; } select:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus { border-color: var(--neon-cyan); background: var(--bg-card); } select option { background: var(--bg-dark); color: var(--text-white); } input[type="range"] { padding: 0; border-left: none; border: none; accent-color: var(--neon-cyan); } /* patrón label + campo a una columna (fuera de .terminal-form, p.ej. la nota de sesión del tracker): que ocupe todo el ancho como su hermano select */ .form-group select, .form-group input, .form-group textarea { width: 100%; } /* ── HEADER / DATA ACTIONS ────────────────────────────────────────── */ .panel-header { padding-top: 60px; padding-bottom: 40px; } .data-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .data-status { font-size: 0.8rem; color: var(--neon-cyan); opacity: 0.85; min-height: 1em; } /* ── NAV ───────────────────────────────────────────────────────────── */ .panel-nav { position: sticky; top: 0; z-index: 900; background: var(--bg-dark); border-bottom: 1px solid var(--border-dim); } /* mismo ancho/centrado que .section-container — antes el nav usaba padding en % de viewport y en pantallas anchas los tabs quedaban muy a la izquierda del resto del contenido, descuadrados */ .panel-nav-inner { max-width: 1440px; width: 92%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2px; padding: 10px 20px; } .nav-tab { background: transparent; border: 1px solid transparent; color: var(--text-light); font-family: inherit; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 14px; cursor: pointer; opacity: 0.6; transition: 0.2s; } .nav-tab:hover { opacity: 1; color: var(--neon-cyan); } .nav-tab.active { opacity: 1; color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-glow) inset; } .nav-tab.pending { opacity: 0.35; } .panel-section { padding: 30px 20px 60px; } .pending-msg { opacity: 0.5; margin-top: 20px; } /* ── 01 TRACKER ────────────────────────────────────────────────────── */ .tracker-layout { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; margin-top: 30px; } .tracker-timer-box, .tracker-history-box { background: var(--bg-card); border: 1px solid var(--border-dim); padding: 25px; } .tracker-modes { display: flex; gap: 20px; font-size: 0.9rem; } .tracker-modes label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .timer-display { text-align: center; padding: 25px 0; border-top: 1px dashed var(--border-section); border-bottom: 1px dashed var(--border-section); margin: 20px 0; } .timer-phase { color: var(--neon-cyan); font-size: 0.9rem; margin-bottom: 8px; min-height: 1.2em; } .timer-clock { font-size: 2.6rem; font-weight: bold; color: var(--text-white); letter-spacing: 2px; } .timer-clock.break { color: var(--neon-cyan); } .timer-clock.paused { opacity: 0.5; } .timer-clock.awaiting { animation: blink 1s step-end infinite; color: var(--neon-cyan); } .timer-money { font-size: 1.2rem; color: var(--neon-cyan); margin-top: 8px; min-height: 1.4em; } .timer-sub { font-size: 0.75rem; opacity: 0.6; margin-top: 6px; min-height: 1.2em; } .timer-controls { display: flex; gap: 10px; margin-bottom: 20px; } .timer-controls .terminal-btn { flex: 1; } .terminal-btn-sm { background: transparent; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); font-family: inherit; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; padding: 8px 12px; cursor: pointer; transition: 0.2s; } .terminal-btn-sm:hover { background: var(--neon-cyan); color: var(--btn-text); box-shadow: 0 0 10px var(--neon-glow); } /* icono SVG dentro de un botón pequeño (toggle lista/mes) */ .terminal-btn-sm svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px; } .terminal-btn.ghost { background: transparent; color: var(--neon-cyan); border: 1px solid var(--neon-cyan); } .terminal-btn.ghost:hover { background: var(--neon-cyan); color: var(--btn-text); } .terminal-btn.danger { background: var(--danger); color: var(--btn-text); } /* hover del botón de peligro: se aclara el propio rojo del tema en vez de saltar a blanco (en temas claros un botón blanco desaparecía). color-mix para el resplandor; si el navegador no lo soporta, la sombra simplemente no sale. */ .terminal-btn.danger:hover { filter: brightness(1.12); box-shadow: 0 0 15px color-mix(in srgb, var(--danger) 60%, transparent); } .danger-link { border-color: var(--danger) !important; color: var(--danger) !important; } .danger-link:hover { background: var(--danger) !important; color: var(--btn-text) !important; } .sound-box { margin-bottom: 20px; } .sound-box label { display: block; color: var(--neon-cyan); margin-bottom: 8px; font-size: 0.9rem; } .sound-controls { display: flex; gap: 10px; align-items: center; } .sound-controls select { flex: 1; } #sound-type.sound-on { border-color: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-glow); } .settings-details { margin-bottom: 20px; border: 1px solid var(--border-dim); padding: 12px 15px; } .settings-details summary { cursor: pointer; color: var(--neon-cyan); font-size: 0.85rem; } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 15px; font-size: 0.8rem; } .settings-grid label { display: flex; flex-direction: column; gap: 6px; } .settings-grid input[type="number"] { width: 100%; } .cfg-check { flex-direction: row !important; align-items: center; gap: 8px !important; } .hint { font-size: 0.75rem; opacity: 0.5; margin: 10px 0 20px; } /* el prefijo "// " es una firma visual de terminal — solo tiene sentido en Hacker (tema por defecto, sin clase en body). En el resto de temas el hint es una nota al pie normal, sin simular un comentario de código. */ .hint::before { content: "// "; } /* v1.22: todos los temas no-hacker son cozy, así que la lista de excepciones tema a tema se sustituye por la clase cozy */ .cozy .hint::before { content: ""; } /* ── DECORACIÓN TERMINAL (v1.21) ─────────────────────────────────── Los adornos de terminal ya no son texto literal en HTML/JS: los pone el CSS, para que cada tema decida si los quiere. term-prompt es el "> " de labels/summaries; empty-hint es el "// sin X" de listas y tablas vacías; sec-num/sec-slash parten el "01 // Título" de las cabeceras. El modo cozy (mocha/latte) los apaga todos más abajo. */ .term-prompt::before { content: "> "; } .empty-hint { opacity: 0.5; list-style: none; } .empty-hint::before { content: "// "; } /* ── ESTADO VACÍO RICO (v1.30) ───────────────────────────────────── Icono + frase + empujón para las listas/tablas de sección vacías. Solo variables de tema; en tabla lo aloja una celda .empty-cell que anula el nowrap/ellipsis heredado de .panel-table td. */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 20px; white-space: normal; list-style: none; grid-column: 1 / -1; /* si el contenedor es grid (p.ej. .links-grid), ocupa todo el ancho */ } .empty-state-icon { color: var(--neon-cyan); opacity: 0.85; line-height: 0; } .empty-state-title { margin: 0; font-weight: 600; font-size: 0.95rem; color: var(--text-light); } .empty-state-cta { margin: 0; font-size: 0.82rem; opacity: 0.6; max-width: 360px; line-height: 1.5; } .empty-cell { white-space: normal; overflow: visible; text-overflow: clip; } .empty-state-li { list-style: none; padding: 0; } .schedule-empty::before { content: "// "; } /* ── COZY (todos los temas menos Hacker) ─────────────────────────── applyTheme() añade la clase "cozy" a los temas de COZY_THEMES (naturaleza, mocha y latte desde v1.22). Aquí vive lo que separa un tema "cozy" de uno "terminal": sin "// " ni "> ", sin MAYÚSCULAS gritadas, sin cursor parpadeante, número de sección como etiqueta redondeada y botones en píldora. Hacker, el único tema terminal que queda, no se ve afectado: estas reglas solo aplican bajo .cozy. */ .cozy .term-prompt::before, .cozy .empty-hint::before, .cozy .schedule-empty::before, .cozy .subtitle::before { content: ""; } .cozy h1, .cozy .nav-tab, .cozy .terminal-btn, .cozy .terminal-btn-sm { text-transform: none; } .cozy .nav-tab { letter-spacing: 0; } .cozy .cursor { display: none; } .cozy .sec-slash { display: none; } .cozy .sec-num { display: inline-block; background: var(--bg-card); border: 1px solid var(--border-dim); color: var(--neon-cyan); font-size: 0.5em; font-weight: 600; padding: 3px 12px; border-radius: 999px; vertical-align: 5px; margin-right: 12px; letter-spacing: 1px; } .cozy .terminal-btn, .cozy .terminal-btn-sm { border-radius: 999px; } /* el reloj del timer conserva dígitos monoespaciados aunque el resto del tema sea sans — un reloj proporcional "baila" al avanzar */ .cozy .timer-clock { font-family: "Cascadia Mono", Consolas, Menlo, monospace; } /* ── JERARQUÍA TIPOGRÁFICA COZY (v1.26) ──────────────────────────── Con Outfit variable hay pesos intermedios de verdad: los títulos y botones bajan de bold (700) a semibold (600) con tracking negativo en los grandes — menos grito, más editorial. En Naturaleza (Georgia, solo regular/bold) el 600 redondea a bold: se ve como siempre. */ .cozy h1 { font-weight: 600; letter-spacing: -0.02em; } .cozy h2 { font-weight: 600; letter-spacing: -0.01em; } .cozy h3 { font-weight: 600; } .cozy .terminal-btn, .cozy .terminal-btn-sm, .cozy .nav-tab { font-weight: 600; } .cozy .form-group label, .cozy .settings-panel label, .cozy .sound-box label { font-weight: 500; } /* ── ELEVACIÓN DE TARJETAS (v1.26) ───────────────────────────────── Gobernada por --shadow-card: none en Hacker (allí la jerarquía la ponen borde y resplandor), sombra suave tintada en los cozy — sin resplandor, era lo único que podía separar la tarjeta del fondo. */ .tracker-timer-box, .tracker-history-box, .checklist-card, .finance-chart-box, .tier-card, .idea-item, .link-card, .schedule-day { box-shadow: var(--shadow-card); } /* ── ONBOARDING (v1.24) ────────────────────────────────────────── */ /* fondo opaco a propósito: la primera impresión es esta pantalla, no un panel a medio renderizar detrás */ .onboard-modal { position: fixed; inset: 0; z-index: 1100; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } .onboard-modal[hidden] { display: none; } .onboard-card { max-width: 500px; width: 100%; background: var(--bg-card); border: 1px solid var(--border-dim); border-left: var(--accent-width) solid var(--neon-cyan); padding: 34px; box-shadow: var(--shadow-pop); } .onboard-step { display: flex; flex-direction: column; gap: 12px; } .onboard-step[hidden] { display: none; } .onboard-title { margin: 0; color: var(--neon-cyan); font-size: 1.6rem; } .onboard-sub { margin: 0 0 10px; opacity: 0.75; font-size: 0.9rem; } .onboard-q { font-size: 0.8rem; opacity: 0.8; margin-top: 6px; } .onboard-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .onboard-kind { background: transparent; border: 1px solid var(--border-dim); color: var(--text-light); font-family: inherit; font-size: 0.85rem; padding: 12px 10px; cursor: pointer; transition: 0.2s; } .onboard-kind:hover { border-color: var(--neon-cyan); } .onboard-kind.selected { border-color: var(--neon-cyan); color: var(--neon-cyan); background: var(--bg-card); box-shadow: 0 0 8px var(--neon-glow); } .onboard-btns { display: flex; gap: 10px; margin-top: 8px; } .onboard-btns .terminal-btn { flex: 1; } .onboard-btns .terminal-btn:disabled { opacity: 0.4; cursor: not-allowed; } .onboard-status { margin: 0; font-size: 0.75rem; opacity: 0.7; min-height: 1em; } .onboard-link { background: none; border: none; color: var(--text-light); font-family: inherit; font-size: 0.75rem; opacity: 0.55; cursor: pointer; text-decoration: underline; padding: 4px 0; align-self: flex-start; } .onboard-link:hover { opacity: 1; } /* v1.30: paso final del onboarding — elegir demo o panel en blanco */ .onboard-start-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .onboard-start-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; background: transparent; border: 1px solid var(--border-dim); color: var(--text-light); font-family: inherit; padding: 14px 16px; cursor: pointer; transition: 0.2s; } .onboard-start-opt:hover { border-color: var(--neon-cyan); background: var(--bg-card); box-shadow: 0 0 8px var(--neon-glow); } .onboard-start-title { font-weight: 600; font-size: 0.95rem; color: var(--neon-cyan); } .onboard-start-desc { font-size: 0.8rem; opacity: 0.7; } #ob-goal-row { display: flex; flex-direction: column; gap: 12px; } #ob-goal-row[hidden] { display: none; } .income-goal-box { margin-bottom: 15px; } .income-goal-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .income-goal-text { font-size: 0.9rem; font-weight: bold; } .income-goal-edit { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; opacity: 0.6; } .income-goal-edit input { width: 70px; padding: 4px 6px !important; } .income-goal-bar { height: 8px; background: var(--bg-card); border: 1px solid var(--border-dim); overflow: hidden; } .income-goal-fill { height: 100%; background: var(--neon-cyan); transition: width 0.3s; } .income-goal-fill.goal-met { background: var(--ok); } .quick-totals { font-size: 0.9rem; color: var(--neon-cyan); margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-section); } .history-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } .history-filters select, .history-filters input { flex: 1; min-width: 130px; } .history-totals { font-size: 0.85rem; color: var(--neon-cyan); margin-bottom: 15px; } .manual-grid { display: grid; grid-template-columns: 1.3fr 1fr 60px 60px 1fr 1.4fr auto; gap: 10px; margin-top: 15px; align-items: center; } .manual-grid input, .manual-grid select { width: 100%; } /* la última celda "auto" del grid aloja Añadir + Cancelar (edición) */ .manual-actions { display: flex; gap: 6px; align-items: center; } .table-wrap { overflow-x: auto; } /* v1.26: cifras tabulares en todo lo que lista dinero o duraciones — en monospace (Hacker) no cambia nada; en las sans/serif de los cozy evita que los importes "bailen" de ancho entre filas */ .panel-table td, .quick-totals, .history-totals, .timer-money, .finance-summary-line, .deadline-days, .checklist-progress { font-variant-numeric: tabular-nums; } .panel-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.85rem; margin-top: 10px; } .panel-table th { text-align: left; color: var(--neon-cyan); border-bottom: 1px solid var(--border-dim); padding: 8px 10px; font-size: 0.75rem; text-transform: uppercase; } .panel-table td { padding: 8px 10px; border-bottom: 1px dashed var(--border-section); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-table tr:hover td { background: var(--bg-card); } /* anchos fijos: un nombre de proyecto o cliente largo ya no puede descuadrar el resto de columnas (duración/importe/nota). Ojo: son específicos de #history-table (7 columnas), no de .panel-table en general, porque #breakdown-table reusa la misma clase con 4 columnas. */ #history-table th:nth-child(1), #history-table td:nth-child(1) { width: 13%; } /* fecha */ #history-table th:nth-child(2), #history-table td:nth-child(2) { width: 15%; } /* cliente */ #history-table th:nth-child(3), #history-table td:nth-child(3) { width: 17%; } /* proyecto */ #history-table th:nth-child(4), #history-table td:nth-child(4) { width: 11%; } /* duración */ #history-table th:nth-child(5), #history-table td:nth-child(5) { width: 11%; } /* importe */ #history-table th:nth-child(6), #history-table td:nth-child(6) { width: auto; white-space: normal; } /* nota: puede ocupar varias líneas */ #history-table th:nth-child(7), #history-table td:nth-child(7) { width: 36px; overflow: visible; text-overflow: clip; } #breakdown-table th:nth-child(1), #breakdown-table td:nth-child(1) { width: 30%; } /* cliente */ #breakdown-table th:nth-child(2), #breakdown-table td:nth-child(2) { width: 35%; } /* proyecto */ #breakdown-table th:nth-child(3), #breakdown-table td:nth-child(3) { width: 17%; } /* duración */ #breakdown-table th:nth-child(4), #breakdown-table td:nth-child(4) { width: 18%; } /* importe */ .del-btn { background: transparent; border: 1px solid var(--danger); color: var(--danger); cursor: pointer; padding: 2px 8px; font-size: 0.8rem; font-family: inherit; } .del-btn:hover { background: var(--danger); color: var(--btn-text); } /* ── 02 PROYECTOS ─────────────────────────────────────────────────── */ .proj-toolbar { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .proj-toolbar select { flex: 1; min-width: 200px; } .proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 25px; } .proj-footer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; } .proj-time { font-size: 0.8rem; opacity: 0.7; } /* ── 05 ENLACES ───────────────────────────────────────────────────── */ .links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 25px; } .link-card { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border-dim); background: var(--bg-card); padding: 12px 15px; } .link-card a { color: var(--text-white); text-decoration: none; font-size: 0.9rem; } .link-card a:hover { color: var(--neon-cyan); } .links-add { display: flex; gap: 10px; flex-wrap: wrap; } .links-add input { flex: 1; min-width: 160px; } /* ── 07 TODOS ─────────────────────────────────────────────────────── */ .todo-add { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; } .todo-add input { flex: 2; min-width: 200px; } .todo-add select { flex: 1; min-width: 100px; } .todo-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; } .todo-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-left: 3px solid var(--border-dim); background: var(--bg-card); } .todo-item.prio-alta { border-left-color: var(--danger); } .todo-item.prio-media { border-left-color: var(--neon-cyan); } .todo-item.prio-baja { border-left-color: var(--border-section); } .todo-item.done { opacity: 0.45; } .todo-item.done .todo-text { text-decoration: line-through; } .todo-text { flex: 1; } .todo-prio { font-size: 0.7rem; text-transform: uppercase; opacity: 0.6; } .todo-project-tag { font-size: 0.7rem; opacity: 0.7; padding: 2px 8px; border: 1px solid var(--border-dim); white-space: nowrap; } /* ── 03 PIPELINE ──────────────────────────────────────────────────── */ .lead-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 140px auto auto; gap: 10px; align-items: center; margin-bottom: 10px; } .lead-grid input, .lead-grid select { width: 100%; } .lead-notes { width: 100%; margin-bottom: 15px; } .lead-badge { font-size: 0.75rem; padding: 3px 8px; border: 1px solid; white-space: nowrap; } .lead-contactar { color: var(--text-light); border-color: var(--border-dim); } .lead-auditado { color: var(--neon-cyan); border-color: var(--neon-cyan); } .lead-propuesta { color: var(--warn); border-color: var(--warn); } .lead-frio { color: #6a7a8a; border-color: #6a7a8a; opacity: 0.7; } #leads-table th:nth-child(1), #leads-table td:nth-child(1) { width: 20%; } #leads-table th:nth-child(2), #leads-table td:nth-child(2) { width: 15%; } #leads-table th:nth-child(3), #leads-table td:nth-child(3) { width: 15%; } #leads-table th:nth-child(4), #leads-table td:nth-child(4) { width: 13%; } #leads-table th:nth-child(5), #leads-table td:nth-child(5) { width: auto; white-space: normal; } #leads-table th:nth-child(6), #leads-table td:nth-child(6) { width: 90px; overflow: visible; text-overflow: clip; } .edit-btn { background: transparent; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); cursor: pointer; padding: 2px 8px; font-size: 0.8rem; font-family: inherit; margin-right: 4px; } .edit-btn:hover { background: var(--neon-cyan); color: var(--btn-text); } .convert-btn { background: transparent; border: 1px solid var(--ok); color: var(--ok); cursor: pointer; padding: 2px 8px; font-size: 0.7rem; font-family: inherit; font-weight: bold; margin-right: 4px; } .convert-btn:hover { background: var(--ok); color: var(--btn-text); } /* ── 04 VENCIMIENTOS ──────────────────────────────────────────────── */ .deadline-grid { display: grid; grid-template-columns: 1.6fr 1fr 160px auto; gap: 10px; align-items: center; margin-bottom: 10px; } .deadline-grid input, .deadline-grid select { width: 100%; } .deadlines-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 6px; } .deadline-item { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-left: 3px solid var(--border-dim); background: var(--bg-card); font-size: 0.9rem; } .deadline-item[data-jump] { cursor: pointer; } .deadline-item[data-jump]:hover { background: var(--hover-tint); } .deadline-date { opacity: 0.7; font-size: 0.8rem; min-width: 65px; } .deadline-label { flex: 1; } .deadline-type { font-size: 0.7rem; text-transform: uppercase; opacity: 0.6; } .deadline-days { font-size: 0.8rem; font-weight: bold; min-width: 60px; text-align: right; } .deadline-goto { color: var(--neon-cyan); opacity: 0.6; } /* urgencia — compartido entre vencimientos (li) y dominios (td) */ .due-critical { border-left-color: var(--danger); color: var(--danger); } .due-critical .deadline-days { color: var(--danger); } .due-soon { border-left-color: var(--warn); } .due-soon .deadline-days { color: var(--warn); } .due-past { border-left-color: var(--danger); opacity: 0.75; } .due-past .deadline-days { color: var(--danger); } .due-future { border-left-color: var(--border-dim); } td.due-critical { color: var(--danger); font-weight: bold; } td.due-soon { color: var(--warn); } /* ── 10 DOMINIOS ──────────────────────────────────────────────────── */ .domain-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 150px 1.3fr auto auto; gap: 10px; align-items: center; margin-bottom: 10px; } .domain-grid input { width: 100%; } /* col 6 pasa de 60px a 130px: ahora son 3 botones (renovado/editar/borrar), no 2 — mismo criterio que leads-table (90px para 3 botones, aquí un poco más porque "✓ RENOVADO" es más ancho que "→ CLIENTE") */ #domains-table th:nth-child(1), #domains-table td:nth-child(1) { width: 20%; } #domains-table th:nth-child(2), #domains-table td:nth-child(2) { width: 15%; } #domains-table th:nth-child(3), #domains-table td:nth-child(3) { width: 15%; } #domains-table th:nth-child(4), #domains-table td:nth-child(4) { width: 13%; } #domains-table th:nth-child(5), #domains-table td:nth-child(5) { width: 11%; } #domains-table th:nth-child(6), #domains-table td:nth-child(6) { width: 130px; overflow: visible; text-overflow: clip; } /* ── 06 ESTRATEGIA ────────────────────────────────────────────────── */ .strategy-ref { margin-top: 10px; } .strategy-ref p { font-size: 0.9rem; } #strategy-plan-table th:nth-child(1), #strategy-plan-table td:nth-child(1) { width: 25%; } .strategy-pending-title { margin-top: 40px; color: var(--neon-cyan); font-size: 1rem; } .tier-card { background: var(--bg-card); border: 1px solid var(--border-dim); border-left: var(--accent-width) solid var(--neon-cyan); padding: 20px 25px; margin-bottom: 25px; } .tier-title { color: var(--text-white); } /* título editable (v1.18): input disfrazado de título — el borde solo aparece al pasar el ratón o al enfocar, en reposo se lee como un h3 */ .tier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .tier-title-input { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; color: var(--text-white); font-family: inherit; font-size: 1.1rem; font-weight: bold; padding: 4px 8px; margin-left: -8px; } .tier-title-input:hover, .tier-title-input:focus { border-color: var(--border-dim); } #tier-new { margin-bottom: 25px; } .tier-veredicto { width: 100%; background: transparent; border: 1px dashed var(--border-section); border-left: var(--accent-width) solid var(--neon-cyan); color: var(--neon-cyan); opacity: 0.9; font-size: 0.85rem; font-family: inherit; padding: 10px 12px; resize: vertical; margin-bottom: 15px; } .tier-veredicto:focus { opacity: 1; border-color: var(--neon-cyan); } .tier-items { list-style: none; padding: 0; margin: 0 0 15px; display: flex; flex-direction: column; gap: 6px; } .tier-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-left: 3px solid var(--border-dim); background: rgba(0,0,0,0.15); } /* temas claros (naturaleza, ártico): la superposición oscura por defecto de .tier-item quedaría como una mancha gris sobre fondo claro */ body.nature .tier-item, body.latte .tier-item { background: rgba(255,255,255,0.5); } .tier-item-active { border-left-color: var(--neon-cyan); } .tier-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tier-item-note { font-size: 0.75rem; opacity: 0.6; } .tier-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .tier-active-toggle { background: transparent; border: 1px solid var(--border-dim); color: var(--text-light); opacity: 0.6; font-family: inherit; font-size: 0.7rem; padding: 4px 10px; cursor: pointer; text-transform: uppercase; } .tier-active-toggle.is-active { border-color: var(--neon-cyan); color: var(--neon-cyan); opacity: 1; box-shadow: 0 0 8px var(--neon-glow) inset; } .tier-active-toggle:hover { opacity: 1; } .tier-add { display: flex; gap: 10px; flex-wrap: wrap; } .tier-add input { flex: 1; min-width: 160px; } /* ── 08 IDEAS ─────────────────────────────────────────────────────── */ .ideas-review-box { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; } .ideas-review-text { font-size: 0.85rem; } .ideas-review-text.review-stale { color: var(--danger); font-weight: bold; } /* .stale-text: mismo mecanismo de aviso "hace X días" reusado fuera de Ideas — backup atrasado (footer) y revisión de Estrategia (sección 06) */ .stale-text { font-size: 0.85rem; } .stale-text.review-stale { color: var(--danger); font-weight: bold; } .idea-add-box { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 25px; align-items: flex-start; } .idea-add-box textarea { flex: 1; min-width: 240px; font-family: inherit; resize: vertical; } .ideas-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .idea-item { background: var(--bg-card); border: 1px solid var(--border-dim); border-left: var(--accent-width) solid var(--neon-cyan); padding: 14px 16px; } .idea-text { margin-bottom: 10px; } .idea-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.75rem; } .idea-date { opacity: 0.6; min-width: 120px; } .idea-tier-select { flex: 1; min-width: 160px; } /* ── 09 CHECKLISTS ────────────────────────────────────────────────── */ .checklist-project-box { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; } .checklist-project-box label { white-space: nowrap; } .checklist-project-box select { min-width: 260px; } .checklist-template-group { margin-bottom: 35px; } .checklist-template-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; border-bottom: 1px dashed var(--border-section); padding-bottom: 10px; } .checklist-template-header h3 { margin: 0; flex: 1; color: var(--neon-cyan); } .checklist-instances { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } .checklist-card { background: var(--bg-card); border: 1px solid var(--border-dim); padding: 20px; } .checklist-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; } .checklist-project-move { flex: 1; min-width: 140px; font-weight: bold; } .checklist-progress { font-size: 0.8rem; color: var(--neon-cyan); white-space: nowrap; } .checklist-items { list-style: none; padding: 0; margin: 0 0 15px; display: flex; flex-direction: column; gap: 6px; } .checklist-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border-section); } .checklist-item label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; } .checklist-item.checklist-done label span { text-decoration: line-through; opacity: 0.5; } .checklist-add { display: flex; gap: 10px; } .checklist-add input { flex: 1; } /* ── 11 FINANZAS ──────────────────────────────────────────────────── */ .finance-subheading { margin-top: 40px; } .finance-chart-box { background: var(--bg-card); border: 1px solid var(--border-dim); padding: 20px 25px; margin-bottom: 30px; } .finance-chart-row { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; margin-top: 15px; } .money-chart { width: 180px; height: 180px; flex-shrink: 0; } .money-chart-side { flex: 1; min-width: 220px; } .money-chart-total { font-size: 1.1rem; color: var(--neon-cyan); margin-bottom: 12px; font-weight: bold; } .money-chart-legend { display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; } .legend-item { display: flex; align-items: center; gap: 10px; } .legend-swatch, .table-swatch { width: 12px; height: 12px; display: inline-block; flex-shrink: 0; border: 1px solid var(--border-dim); } .networth-chart { width: 100%; height: 160px; display: block; } .networth-chart-info { font-size: 0.85rem; color: var(--neon-cyan); margin-top: 10px; } /* input[type=color] nativo es pequeño y feo por defecto: lo igualamos al resto de campos */ input[type="color"] { width: 100%; height: 42px; padding: 3px; background: var(--bg-dark); border: 1px solid var(--input-border); border-left: var(--accent-width) solid var(--neon-cyan); cursor: pointer; } .account-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 90px 70px auto auto; gap: 10px; align-items: center; margin-bottom: 10px; } .account-grid input, .account-grid select { width: 100%; } /* las 6 columnas suman 100% exacto (mismo motivo que en referrals-table más abajo: mezclar % con px fijo puede pasarse del ancho del contenedor y disparar scroll horizontal) */ #accounts-table th:nth-child(1), #accounts-table td:nth-child(1) { width: 34%; } #accounts-table th:nth-child(2), #accounts-table td:nth-child(2) { width: 20%; } #accounts-table th:nth-child(3), #accounts-table td:nth-child(3) { width: 16%; } #accounts-table th:nth-child(4), #accounts-table td:nth-child(4) { width: 16%; } #accounts-table th:nth-child(5), #accounts-table td:nth-child(5) { width: 6%; } #accounts-table th:nth-child(6), #accounts-table td:nth-child(6) { width: 8%; overflow: visible; text-overflow: clip; } .holding-grid { display: grid; grid-template-columns: 0.9fr 1.2fr 0.8fr 0.9fr 0.9fr 90px 70px auto auto; gap: 10px; align-items: center; margin-bottom: 10px; } .holding-grid input, .holding-grid select { width: 100%; } /* las 9 columnas suman 100% exacto — mismo motivo que accounts/referrals */ #holdings-table th:nth-child(1), #holdings-table td:nth-child(1) { width: 8%; } #holdings-table th:nth-child(2), #holdings-table td:nth-child(2) { width: 22%; } #holdings-table th:nth-child(3), #holdings-table td:nth-child(3) { width: 11%; } #holdings-table th:nth-child(4), #holdings-table td:nth-child(4) { width: 10%; } #holdings-table th:nth-child(5), #holdings-table td:nth-child(5) { width: 10%; } #holdings-table th:nth-child(6), #holdings-table td:nth-child(6) { width: 12%; } #holdings-table th:nth-child(7), #holdings-table td:nth-child(7) { width: 15%; } #holdings-table th:nth-child(8), #holdings-table td:nth-child(8) { width: 4%; } #holdings-table th:nth-child(9), #holdings-table td:nth-child(9) { width: 8%; overflow: visible; text-overflow: clip; } .gain-positive { color: var(--neon-cyan); } .gain-negative { color: var(--danger); } .finance-summary-line { font-size: 0.9rem; margin: 12px 0 25px; font-weight: bold; } .referral-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr 120px 130px 150px auto auto; gap: 10px; align-items: center; margin-bottom: 10px; } .referral-grid input, .referral-grid select { width: 100%; } .referral-notes { width: 100%; margin-bottom: 15px; } /* las 8 columnas suman 100% exacto — antes la última (acciones) era un px fijo compitiendo con una columna "auto", y la combinación se salía del ancho del contenedor y disparaba el scroll horizontal de .table-wrap */ #referrals-table th:nth-child(1), #referrals-table td:nth-child(1) { width: 13%; } #referrals-table th:nth-child(2), #referrals-table td:nth-child(2) { width: 15%; } #referrals-table th:nth-child(3), #referrals-table td:nth-child(3) { width: 11%; } #referrals-table th:nth-child(4), #referrals-table td:nth-child(4) { width: 10%; } #referrals-table th:nth-child(5), #referrals-table td:nth-child(5) { width: 10%; } #referrals-table th:nth-child(6), #referrals-table td:nth-child(6) { width: 9%; } #referrals-table th:nth-child(7), #referrals-table td:nth-child(7) { width: 24%; white-space: normal; } #referrals-table th:nth-child(8), #referrals-table td:nth-child(8) { width: 8%; overflow: visible; text-overflow: clip; } .expense-grid { display: grid; grid-template-columns: 1.4fr 100px 90px 120px 140px auto auto; gap: 10px; align-items: center; margin-bottom: 10px; } .expense-grid input, .expense-grid select { width: 100%; } .expense-notes { width: 100%; margin-bottom: 15px; } /* 6 columnas sumando 100% exacto — mismo criterio que accounts/holdings/referrals, acciones a 8% para que el botón quede alineado con las otras tres tablas */ #expenses-table th:nth-child(1), #expenses-table td:nth-child(1) { width: 26%; } #expenses-table th:nth-child(2), #expenses-table td:nth-child(2) { width: 14%; } #expenses-table th:nth-child(3), #expenses-table td:nth-child(3) { width: 14%; } #expenses-table th:nth-child(4), #expenses-table td:nth-child(4) { width: 14%; } #expenses-table th:nth-child(5), #expenses-table td:nth-child(5) { width: 24%; white-space: normal; } #expenses-table th:nth-child(6), #expenses-table td:nth-child(6) { width: 8%; overflow: visible; text-overflow: clip; } /* ── BUSCADOR (Ctrl+K) ───────────────────────────────────────────── */ .search-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .search-modal[hidden] { display: none; } .search-box { width: 92%; max-width: 640px; background: var(--bg-dark); border: 1px solid var(--neon-cyan); box-shadow: var(--shadow-modal); padding: 4px; } .search-box input { width: 100%; font-size: 1rem; padding: 14px 16px; border: none; border-bottom: 1px solid var(--border-dim); background: transparent; } .search-box input:focus { background: transparent; } .search-results { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; } .search-result { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; border-bottom: 1px dashed var(--border-section); } .search-result:hover { background: var(--bg-card); } .search-result-tag { font-size: 0.7rem; color: var(--neon-cyan); opacity: 0.8; min-width: 24px; } .search-result-text { flex: 1; } /* ── DIÁLOGO PROPIO (v1.28) ──────────────────────────────────────── */ /* Sustituye alert/confirm/prompt nativos. Solo variables de tema: sale igual de cozy o de terminal sin CSS por tema. */ .app-dialog { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; } .app-dialog[hidden] { display: none; } .app-dialog-box { width: 92%; max-width: 440px; /* --bg-dark es OPACO (no como --bg-card, que en los cozy es un tinte al 4%): la caja va sobre un overlay translúcido, igual que el buscador */ background: var(--bg-dark); border: 1px solid var(--border-dim); border-left: var(--accent-width) solid var(--neon-cyan); box-shadow: var(--shadow-modal); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; } .app-dialog-title { margin: 0; color: var(--neon-cyan); font-size: 1.15rem; } .app-dialog-title[hidden] { display: none; } .app-dialog-msg { margin: 0; font-size: 0.92rem; line-height: 1.5; white-space: pre-line; } .app-dialog-input { width: 100%; } .app-dialog-input[hidden] { display: none; } .app-dialog-btns { display: flex; gap: 10px; margin-top: 4px; } .app-dialog-btns .terminal-btn { flex: 1; padding: 12px 20px; } .app-dialog-btns .terminal-btn[hidden] { display: none; } /* ── 04 VENCIMIENTOS: VISTA MENSUAL ──────────────────────────────── */ .deadlines-view-toggle { display: flex; gap: 8px; margin: 20px 0 10px; } .deadlines-view-toggle .view-active { background: var(--neon-cyan); color: var(--bg-dark); } .deadlines-month { margin-top: 15px; } .month-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 15px; } .month-label { color: var(--neon-cyan); font-weight: bold; text-transform: capitalize; min-width: 160px; text-align: center; } .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .month-dow { text-align: center; font-size: 0.7rem; opacity: 0.6; padding-bottom: 6px; } .month-cell { aspect-ratio: 1 / 1; border: 1px solid var(--border-dim); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .month-cell-empty { border-color: transparent; } .month-cell-today { border-color: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-glow) inset; } .month-cell-day { font-size: 0.8rem; opacity: 0.7; } .month-dots { display: flex; gap: 3px; flex-wrap: wrap; } .month-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--border-dim); } .month-dot.due-critical { background: var(--danger); } .month-dot.due-soon { background: var(--warn); } .month-dot.due-past { background: var(--danger); opacity: 0.6; } .month-dot.due-future { background: var(--neon-cyan); opacity: 0.7; } /* ── 12 HORARIO ───────────────────────────────────────────────────── */ .schedule-grid-form { display: grid; grid-template-columns: 130px 110px 110px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; } .schedule-grid-form input, .schedule-grid-form select { width: 100%; } .schedule-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 20px; } .schedule-day { background: var(--bg-card); border: 1px solid var(--border-dim); padding: 12px; min-height: 120px; } .schedule-day-title { font-size: 0.8rem; color: var(--neon-cyan); margin: 0 0 10px; text-align: center; } .schedule-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .schedule-block { border-left: 3px solid var(--neon-cyan); padding: 6px 8px; font-size: 0.8rem; background: rgba(0,0,0,0.15); } body.nature .schedule-block, body.latte .schedule-block { background: rgba(255,255,255,0.5); } .schedule-block-time { display: block; font-size: 0.7rem; opacity: 0.7; } .schedule-block-label { display: block; margin: 2px 0 6px; } .schedule-block .del-btn { padding: 1px 6px; font-size: 0.7rem; } .schedule-empty { list-style: none; opacity: 0.4; font-size: 0.8rem; text-align: center; padding: 10px 0; } /* ── 14 COMIDAS ───────────────────────────────────────────────────── */ .meal-table th:first-child, .meal-table td:first-child { width: 10%; white-space: normal; } .meal-table td { vertical-align: top; } .meal-table td input { width: 100%; padding: 6px 8px; font-size: 0.8rem; } .meal-cell { display: flex; flex-direction: column; gap: 6px; min-width: 200px; } .meal-desc { font-weight: bold; } .meal-macros { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .meal-macro-field { display: flex; flex-direction: column; gap: 2px; font-size: 0.65rem; opacity: 0.75; } .meal-macro-field input { font-size: 0.75rem; padding: 4px 6px; } .shopping-list { margin-top: 15px; max-width: 640px; } .shopping-count { opacity: 0.6; font-size: 0.75rem; } /* ── ACCESIBILIDAD (v1.25) ─────────────────────────────────────── */ /* anillo de foco visible SOLO al navegar con teclado (:focus-visible): los inputs señalan el foco con el borde desde siempre, pero botones, tabs, selects y summaries no daban ninguna señal con Tab. Va al final del archivo a propósito: gana por orden a los outline:none de misma especificidad de más arriba. */ button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; } /* v1.27: si el SO pide menos movimiento, se respeta — el cursor de Hacker y el parpadeo del timer en espera dejan de animar, y las transiciones quedan a efectos prácticos instantáneas */ @media (prefers-reduced-motion: reduce) { .cursor, .timer-clock.awaiting { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ── RESPONSIVE ────────────────────────────────────────────────── */ @media (max-width: 900px) { .tracker-layout { grid-template-columns: 1fr; } .manual-grid { grid-template-columns: 1fr 1fr; } .lead-grid, .domain-grid { grid-template-columns: 1fr 1fr; } .deadline-grid { grid-template-columns: 1fr 1fr; } .tier-add { flex-direction: column; } .tier-item { flex-wrap: wrap; } .tier-item-actions { width: 100%; justify-content: flex-end; } .account-grid, .holding-grid, .referral-grid, .expense-grid { grid-template-columns: 1fr 1fr; } .finance-chart-row { flex-direction: column; align-items: flex-start; } .schedule-week, .month-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .schedule-grid-form { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { h1 { font-size: 2rem; } .settings-widget { top: 12px; right: 12px; } #search-toggle, #settings-toggle { font-size: 0.9rem; width: 32px; height: 32px; } .footer-container { flex-direction: column; align-items: flex-start; gap: 20px; } .timer-clock { font-size: 2rem; } }