/* ========================================================================== Escape UI — el sistema visual compartido de todas las herramientas. Es el mismo lenguaje de gymark.com.co: sus mismos colores, su misma tipografía (Bebas Neue para títulos, Barlow para texto) y sus mismos botones y tarjetas. Los valores no están inventados: salen tal cual de css/styles.css y tailwind.config.js del frontend de GYMARK. Este archivo es la copia maestra, en Escape Utils/_comun/. Cada herramienta lleva la suya porque cada una se sube a un subdominio distinto y no pueden compartir un archivo por red. Si tocas algo aquí, vuelve a repartirlo con reparte.sh para que no se separen unas de otras. El tema por defecto es el OSCURO. Lo aplica escape-theme.js desde el , antes de pintar nada, para que no haya un fogonazo blanco al entrar. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fichas de color La familia clara sale del :root de GYMARK; la oscura, de su html.dark. La escala de grises se INVIERTE en oscuro (gray-50 pasa a ser casi negro), igual que en GYMARK: así una misma regla sirve para los dos temas. -------------------------------------------------------------------------- */ :root { color-scheme: light; --primary: #070709; /* el casi-negro de la marca */ --primary-dark: #000000; --secondary: #2c2c2e; --accent: #636366; --white: #fefefe; --gray-50: #f5f5f5; --gray-100: #ebebeb; --gray-200: #d5d5d5; --gray-300: #b8b8b8; --gray-400: #8e8e93; --gray-500: #636366; --gray-600: #48484a; --gray-700: #3a3a3c; --gray-800: #2c2c2e; --gray-900: #070709; --bg: #fefefe; --bg-alt: #f2f2f2; --surface: #ffffff; --surface-alt: #f8f9fa; --text: #070709; --text-muted: #636366; --text-soft: #767676; /* el más claro que aún pasa WCAG AA */ --text-inverse: #fefefe; --line: #e5e7eb; --line-soft: #f3f4f6; --line-strong: #d1d5db; --success: #047857; --success-soft: #ecfdf5; --warning: #d97706; --warning-soft: #fffbeb; --error: #dc2626; --error-soft: #fef2f2; --info: #1d4ed8; --info-soft: #eff6ff; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --fast: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --base: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --fuente: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fuente-titulo: "Bebas Neue", "Barlow Condensed", var(--fuente); --fuente-corta: "Barlow Condensed", var(--fuente); --fuente-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } html.dark { color-scheme: dark; --primary: #fefefe; /* en oscuro la marca se invierte */ --primary-dark: #e0e0e0; --secondary: #d5d5d5; --accent: #a1a1a6; --white: #111113; --gray-50: #18181a; --gray-100: #1e1e20; --gray-200: #2a2a2c; --gray-300: #3a3a3c; --gray-400: #636366; --gray-500: #8e8e93; --gray-600: #b8b8b8; --gray-700: #d5d5d5; --gray-800: #ebebeb; --gray-900: #fefefe; --bg: #111113; --bg-alt: #18181a; --surface: #1a1a1c; --surface-alt: #1e1e20; --text: #fefefe; --text-muted: #a1a1a6; --text-soft: #8e8e93; --text-inverse: #111113; --line: #2a2a2c; --line-soft: #1e1e20; --line-strong: #3a3a3c; --success: #34d399; --success-soft: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --error: #f87171; --error-soft: rgba(248, 113, 113, 0.12); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.12); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.3); } /* -------------------------------------------------------------------------- 2. Base y tipografía Bebas Neue es una fuente de caja alta: en GYMARK se usa siempre en mayúsculas y con las letras separadas. Barlow lleva un pelín de separación (.015em), que es lo que le da el aire deportivo de la marca. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; tab-size: 4; } body { margin: 0; min-height: 100vh; font-family: var(--fuente); font-size: 1rem; line-height: 1.5; letter-spacing: 0.015em; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; } /* El cambio de tema se anima solo mientras dura: si estuviera siempre puesto, cada hover de cada elemento arrastraría medio segundo de transición. */ html.theme-transitioning, html.theme-transitioning * { transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.05; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); } h1 { font-size: 2.75rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.05rem; } h6 { font-size: 0.95rem; letter-spacing: 0.12em; } p { margin: 0 0 1rem; } a { color: var(--text); text-decoration: none; transition: opacity var(--fast); } a:hover { opacity: 0.72; } code, kbd, pre, samp { font-family: var(--fuente-mono); font-size: 0.9em; } hr { height: 0; border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; } ::selection { background: var(--primary); color: var(--text-inverse); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Etiquetas cortas en mayúsculas: el recurso que más se repite en GYMARK. */ .etiqueta, .eyebrow { font-family: var(--fuente-corta); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .mono { font-family: var(--fuente-mono); } .apagado { color: var(--text-muted); } /* -------------------------------------------------------------------------- 3. Estructura -------------------------------------------------------------------------- */ .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px 56px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm); transition: border-color var(--fast), box-shadow var(--fast); } .card:hover { box-shadow: var(--shadow); } .card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; font-family: var(--fuente-titulo); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 4. Cabecera -------------------------------------------------------------------------- */ .escape-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } @supports not (backdrop-filter: blur(1px)) { .escape-header { background: var(--bg); } } .header-container { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .marca { display: flex; align-items: center; gap: 12px; min-width: 0; } .marca-icono { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--primary); color: var(--text-inverse); } .marca-icono .ico { width: 22px; height: 22px; } .marca-texto { min-width: 0; } .marca-titulo { margin: 0; font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; } .marca-sub { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.3; } .nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: background var(--fast), color var(--fast); } .nav a:hover { background: var(--gray-100); color: var(--text); opacity: 1; } .nav a.activo { background: var(--primary); color: var(--text-inverse); } .nav a .ico { width: 17px; height: 17px; } /* -------------------------------------------------------------------------- 5. Botones Calcados de GYMARK: borde de 2px, esquinas de 12px y el salto de -2px al pasar por encima. En oscuro el primario se invierte (fondo blanco, letra negra), que es lo que hace su html.dark. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.75rem 1.5rem; border: 2px solid var(--primary); border-radius: var(--radius-md); background: transparent; color: var(--primary); font-family: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0.015em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); opacity: 1; } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn .ico { width: 18px; height: 18px; flex: 0 0 auto; } .btn-primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .btn-secondary { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-secondary:hover { background: var(--primary); color: var(--text-inverse); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--text); } .btn-peligro { background: var(--error); color: #fff; border-color: var(--error); } .btn-peligro:hover { filter: brightness(1.08); } html.dark .btn-peligro { color: #111113; } .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; border-radius: var(--radius); } .btn-sm .ico { width: 15px; height: 15px; } .btn-lg { padding: 0.95rem 2rem; font-size: 1.1rem; } .btn:disabled, .btn[disabled], .btn.cargando { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-iconico { padding: 0.55rem; min-width: 0; border-radius: var(--radius); border-color: var(--line); color: var(--text-muted); } .btn-iconico:hover { background: var(--gray-100); color: var(--text); } /* -------------------------------------------------------------------------- 6. Formularios -------------------------------------------------------------------------- */ .campo { margin-bottom: 16px; } .campo label, label.campo-label { display: block; margin-bottom: 7px; font-family: var(--fuente-corta); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { width: 100%; padding: 0.7rem 0.9rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font-family: inherit; font-size: 1rem; letter-spacing: inherit; transition: border-color var(--fast), box-shadow var(--fast); } textarea { min-height: 110px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); } input::placeholder, textarea::placeholder { color: var(--text-soft); } select { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 16px; cursor: pointer; } /* -------------------------------------------------------------------------- 7. Avisos, insignias y fichas -------------------------------------------------------------------------- */ .aviso { display: block; padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--line); border-left: 3px solid var(--text-muted); border-radius: var(--radius); background: var(--surface-alt); font-size: 0.92rem; line-height: 1.55; } .aviso strong { display: block; margin-bottom: 3px; font-weight: 600; } .aviso.ok { border-left-color: var(--success); background: var(--success-soft); } .aviso.warn { border-left-color: var(--warning); background: var(--warning-soft); } .aviso.error { border-left-color: var(--error); background: var(--error-soft); } .aviso.info { border-left-color: var(--info); background: var(--info-soft); } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--gray-100); color: var(--text-muted); font-family: var(--fuente-corta); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .badge .ico { width: 12px; height: 12px; } .badge.ok { border-color: var(--success); color: var(--success); background: var(--success-soft); } .badge.warn { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); } .badge.error { border-color: var(--error); color: var(--error); background: var(--error-soft); } .badge.solida { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border: 2px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--fast); } .chip:hover { border-color: var(--gray-400); color: var(--text); } .chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); } .codigo { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); color: var(--text); font-family: var(--fuente-mono); font-size: 0.84rem; line-height: 1.6; word-break: break-all; } kbd { padding: 2px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface-alt); font-family: var(--fuente-mono); font-size: 0.75rem; color: var(--text-muted); } /* -------------------------------------------------------------------------- 8. Estadísticas y tablas -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; } .stat { padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); } .stat.ok { border-left-color: var(--success); } .stat.warn { border-left-color: var(--warning); } .stat.error{ border-left-color: var(--error); } .stat-label { font-family: var(--fuente-corta); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .stat-value { font-family: var(--fuente-titulo); font-size: 2rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.1; margin-top: 2px; } .stat-extra { font-size: 0.78rem; color: var(--text-soft); margin-top: 2px; } .tabla-envoltura { overflow-x: auto; } table.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; } table.tabla th { padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--line); font-family: var(--fuente-corta); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } table.tabla td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); } table.tabla tbody tr:hover { background: var(--surface-alt); } table.tabla tbody tr:last-child td { border-bottom: 0; } /* -------------------------------------------------------------------------- 9. Ventanas y avisos flotantes -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 7, 9, 0.55); backdrop-filter: blur(3px); } .modal.abierto { display: flex; animation: escape-aparece 200ms ease-out; } .modal-caja { width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xl); animation: escape-sube 300ms ease-out; } .modal-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; } .toast { position: fixed; left: 50%; bottom: 26px; z-index: 200; transform: translate(-50%, 20px); max-width: min(92vw, 460px); padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xl); color: var(--text); font-size: 0.92rem; opacity: 0; pointer-events: none; transition: opacity var(--fast), transform var(--fast); } .toast.visible { opacity: 1; transform: translate(-50%, 0); } .toast.ok { border-color: var(--success); } .toast.error { border-color: var(--error); } @keyframes escape-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes escape-sube { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* -------------------------------------------------------------------------- 10. Iconos y botón de tema Los SVG los reparte escape-icons.js. Heredan el color del texto, así que valen igual en claro y en oscuro sin tocar nada. -------------------------------------------------------------------------- */ .ico { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: -0.18em; fill: none; stroke: currentColor; /* Trazo grueso a propósito: al lado de Bebas Neue, que es ancha y con mucho cuerpo, un icono fino se ve canijo. Las formas ademas van rellenas por dentro al 13% desde el propio SVG (duotono), y ese relleno gana a este fill:none porque va como atributo en cada figura. */ stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .ico-sm { width: 15px; height: 15px; } .ico-lg { width: 28px; height: 28px; } .ico-xl { width: 40px; height: 40px; } /* Los iconos de relleno (los de las herramientas) no llevan trazo. */ .ico.relleno { fill: currentColor; stroke: none; } .theme-toggle-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--fast); } .theme-toggle-btn:hover { border-color: var(--gray-400); color: var(--text); transform: translateY(-1px); } .theme-toggle-btn svg, .theme-toggle-btn .ico { width: 19px; height: 19px; } /* -------------------------------------------------------------------------- 11. Pantallas estrechas -------------------------------------------------------------------------- */ @media (max-width: 720px) { .container { padding: 0 14px 40px; } h1 { font-size: 2.1rem; } h2 { font-size: 1.6rem; } .card { padding: 16px; border-radius: var(--radius-md); } .header-container { padding: 12px 14px; } .marca-sub { display: none; } .btn { padding: 0.65rem 1.1rem; font-size: 0.95rem; } .stat-value { font-size: 1.65rem; } .modal-caja { padding: 18px; } .modal-botones .btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .btn:hover { transform: none; } }