/* * EzzyApps — Sistema de diseño (Fase 2) * -------------------------------------------------------------------------- * Capa de diseño propia sobre Bootstrap 5.3. * - Tokens de color en modo claro y oscuro (data-bs-theme). * - Navbar sticky con glass, botón de tema, botón de idioma. * - Superficies, tarjetas y footer tematizados. * Se carga al FINAL del para poder sobreescribir el CSS inline * de cada página. El tema se aplica en por * /js/site.js (y un snippet inline anti-flash en cada página). */ /* ============ Tokens ============ */ :root, [data-bs-theme="light"] { --ez-bg: #f6f8fb; --ez-surface: #ffffff; --ez-surface-2: #eef2f8; --ez-text: #0f172a; --ez-muted: #55627a; --ez-border: #e3e9f2; --ez-accent: #2563eb; --ez-accent-strong: #1d4ed8; --ez-navbar: rgba(255, 255, 255, 0.85); --ez-logo-mark: #0f172a; --ez-logo-stroke: transparent; --ez-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06); --ez-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.12); } [data-bs-theme="dark"] { --ez-bg: #0b1120; --ez-surface: #131c30; --ez-surface-2: #182339; --ez-text: #e8edf6; --ez-muted: #93a1ba; --ez-border: #223052; --ez-accent: #3b82f6; --ez-accent-strong: #60a5fa; --ez-navbar: rgba(11, 17, 32, 0.85); --ez-logo-mark: #182339; --ez-logo-stroke: #2c3c5f; --ez-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); --ez-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5); } /* ============ Base ============ */ body { background-color: var(--ez-bg); color: var(--ez-text); } /* Superficies que las páginas marcan con utilidades de Bootstrap */ [data-bs-theme] .bg-white, [data-bs-theme] .bg-light { background-color: var(--ez-surface) !important; } [data-bs-theme] .text-muted { color: var(--ez-muted) !important; } [data-bs-theme] .border-bottom, [data-bs-theme] .border-top, [data-bs-theme] hr { border-color: var(--ez-border) !important; } /* ============ Navbar ============ */ .navbar { position: sticky; top: 0; z-index: 1020; background-color: var(--ez-navbar) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ez-border) !important; } /* Logo: cuadro y wordmark siguen el tema (el texto "e" interior queda blanco) */ .navbar-brand svg rect { fill: var(--ez-logo-mark); stroke: var(--ez-logo-stroke); stroke-width: 1; } .navbar-brand svg text:nth-of-type(2) { fill: var(--ez-text); } .ez-nav-controls { display: flex; align-items: center; gap: 8px; } /* Botones de idioma y tema, estilo píldora */ .lang-switch, .theme-switch { cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.9rem; line-height: 1; color: var(--ez-text); background: var(--ez-surface); border: 1px solid var(--ez-border); border-radius: 999px; padding: 9px 16px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color 0.15s ease, color 0.15s ease; text-decoration: none; } .lang-switch:hover, .theme-switch:hover { border-color: var(--ez-accent); color: var(--ez-accent); text-decoration: none; } .theme-switch svg { width: 16px; height: 16px; display: block; } /* ============ Tarjetas y contenedores ============ */ [data-bs-theme] .card { background-color: var(--ez-surface); border-color: var(--ez-border); color: inherit; } .app-card { box-shadow: var(--ez-shadow); } .app-card:hover { box-shadow: var(--ez-shadow-lift); border-color: var(--ez-accent) !important; } /* En oscuro, los botones de tile con colores por herramienta pierden contraste: se unifican al acento (la home se rediseña en Fase 3) */ [data-bs-theme="dark"] .app-card .btn { color: var(--ez-accent-strong) !important; border-color: var(--ez-accent-strong) !important; } /* Cajas de iconos pastel: leve ajuste en oscuro */ [data-bs-theme="dark"] .icon-box { filter: saturate(0.85); } /* ============ Enlaces y footer ============ */ [data-bs-theme="dark"] a:not(.btn):not(.card):not(.app-card) { color: var(--ez-accent-strong); } [data-bs-theme="dark"] footer a { color: var(--ez-muted) !important; } [data-bs-theme="dark"] footer a:hover { color: var(--ez-accent-strong) !important; } /* ============ Accesibilidad ============ */ :focus-visible { outline: 2px solid var(--ez-accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .app-card:hover { transform: none !important; } } /* ============ Artículos del blog en oscuro ============ */ [data-bs-theme="dark"] .article-body { color: var(--ez-text); } [data-bs-theme="dark"] .article-body blockquote, [data-bs-theme="dark"] .post-meta, [data-bs-theme="dark"] .breadcrumb-link { color: var(--ez-muted); } [data-bs-theme="dark"] .article-body a { color: var(--ez-accent-strong); } [data-bs-theme="dark"] .post-tag { background: var(--ez-surface-2); color: var(--ez-accent-strong); } [data-bs-theme="dark"] .article-body table th, [data-bs-theme="dark"] .article-body table td { border-color: var(--ez-border); } [data-bs-theme="dark"] .reco-box { background: var(--ez-surface-2) !important; border-color: var(--ez-border) !important; } /* ============ Banner de instalación PWA ============ */ .ez-install { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 1030; width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; background: var(--ez-text); color: var(--ez-bg); border-radius: 16px; padding: 12px 14px; box-shadow: var(--ez-shadow-lift); } .ez-install-txt { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.35; } .ez-install-txt small { display: block; font-weight: 400; opacity: .75; font-size: 12px; } .ez-install-btn { border: 0; background: var(--ez-accent); color: #fff; font-weight: 700; font-size: 13px; border-radius: 10px; padding: 8px 14px; cursor: pointer; white-space: nowrap; } .ez-install-close { border: 0; background: transparent; color: var(--ez-bg); opacity: .6; cursor: pointer; font-size: 15px; padding: 4px 6px; line-height: 1; } .ez-install-close:hover { opacity: 1; } /* ============ Fase 5: componentes globales ============ */ .btn { border-radius: 10px; font-weight: 600; } .btn-primary { background-color: var(--ez-accent); border-color: var(--ez-accent); } .btn-primary:hover, .btn-primary:focus { background-color: var(--ez-accent-strong); border-color: var(--ez-accent-strong); } .form-control, .form-select { border-radius: 10px; border-color: var(--ez-border); background-color: var(--ez-surface); color: var(--ez-text); } .form-control:focus, .form-select:focus { border-color: var(--ez-accent); background-color: var(--ez-surface); color: var(--ez-text); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ez-accent) 20%, transparent); } .input-group-text { border-color: var(--ez-border); background-color: var(--ez-surface-2); color: var(--ez-muted); } .accordion { --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 13px; } .accordion-item { border-color: var(--ez-border); background-color: var(--ez-surface); } .accordion-button { background-color: var(--ez-surface); color: var(--ez-text); } .accordion-button:not(.collapsed) { color: var(--ez-accent); background-color: var(--ez-surface-2); } .accordion-body { color: var(--ez-muted); } /* Badge de privacidad (compartido por las tools) */ [data-bs-theme="dark"] .privacy-badge { background: #11301f; color: #6ee7a0; } /* La utilidad .text-dark de Bootstrap queda ilegible en oscuro */ [data-bs-theme="dark"] .text-dark { color: var(--ez-text) !important; } /* ============ Tiles de herramientas (home + bloque all-tools) ============ */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .tool { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: inherit; background: var(--ez-surface); border: 1px solid var(--ez-border); border-radius: 18px; padding: 16px; box-shadow: var(--ez-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .tool:hover { transform: translateY(-3px); box-shadow: var(--ez-shadow-lift); border-color: var(--ez-accent); color: inherit; } .appicon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 27%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--ic); background-image: linear-gradient(160deg, color-mix(in srgb, var(--ic) 82%, #fff) 0%, var(--ic) 55%, color-mix(in srgb, var(--ic) 78%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 8px rgba(15, 23, 42, .18); } .appicon svg { width: 24px; height: 24px; } .tool .t-name { color: var(--ez-text); display: block; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; margin: 2px 0 3px; } .tool .t-desc { font-size: 13.5px; color: var(--ez-muted); margin: 0; line-height: 1.4; } /* Vista launcher en pantallas angostas */ @media (max-width: 620px) { .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; } .tool { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 4px; background: transparent; border-color: transparent; box-shadow: none; } .tool:hover { transform: none; box-shadow: none; border-color: transparent; } .appicon { width: 60px; height: 60px; border-radius: 26%; } .appicon svg { width: 27px; height: 27px; } .tool .t-name { font-size: 11.5px; font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: 0; } .tool .t-desc { display: none; } } /* ============ Bloc de notas en oscuro ============ */ [data-bs-theme="dark"] .main-card { box-shadow: var(--ez-shadow); } [data-bs-theme="dark"] .sidebar, [data-bs-theme="dark"] .sidebar-header, [data-bs-theme="dark"] .editor-footer { background: var(--ez-surface-2); border-color: var(--ez-border) !important; } [data-bs-theme="dark"] .note-item { border-color: var(--ez-border); } [data-bs-theme="dark"] .note-item:hover { background: var(--ez-surface); } [data-bs-theme="dark"] .note-item.active { background: #1e2b4d; border-left-color: var(--ez-accent); } [data-bs-theme="dark"] .note-item-title { color: var(--ez-text); } [data-bs-theme="dark"] .note-title-input, [data-bs-theme="dark"] .note-content-textarea { background: var(--ez-surface); color: var(--ez-text); border-color: var(--ez-border); } [data-bs-theme="dark"] .note-title-input:focus, [data-bs-theme="dark"] .note-content-textarea:focus { background: var(--ez-surface-2); } [data-bs-theme="dark"] #privacy-banner { background: #2b2410; border-color: #4a3d14; color: #fbd77e; } [data-bs-theme="dark"] #privacy-banner .btn-close { color: #fbd77e; } /* Los ítems de la lista de notas son enlaces, pero no deben verse como tales */ .note-item, .note-item:hover { text-decoration: none; } [data-bs-theme="dark"] .note-item { color: var(--ez-muted); } [data-bs-theme="dark"] .note-item-meta { color: var(--ez-muted); } /* ============ Toast (confirmación de "enlace copiado") ============ */ .ez-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); z-index: 1040; background: var(--ez-text); color: var(--ez-bg); font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: var(--ez-shadow-lift); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .ez-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============ Auditoría de modo oscuro (fondos claros fijos por tool) ============ */ /* pdf / comprimir-imagenes */ [data-bs-theme="dark"] .upload-area { background: var(--ez-surface-2); } [data-bs-theme="dark"] .upload-area.drag-over { background-color: #1a2947; } [data-bs-theme="dark"] .privacy-info { background: #11301f; color: #6ee7a0; } [data-bs-theme="dark"] .result-row { background: var(--ez-surface-2); border-color: var(--ez-border); } [data-bs-theme="dark"] .result-thumb { background: var(--ez-surface); } /* password */ [data-bs-theme="dark"] .password-display { background: var(--ez-surface-2); color: var(--ez-text); border-color: var(--ez-border) !important; } /* contador-palabras */ [data-bs-theme="dark"] .stat-box { background: var(--ez-surface-2); border-color: var(--ez-border); } /* calculadora-porcentajes */ [data-bs-theme="dark"] .calc-block { background: var(--ez-surface-2); border-color: var(--ez-border); } [data-bs-theme="dark"] .calc-result { background: var(--ez-surface); border-color: var(--ez-border); } [data-bs-theme="dark"] .calc-result strong { color: #a5b4fc; } /* conversor-unidades */ [data-bs-theme="dark"] .btn-swap { background: var(--ez-surface-2); border-color: var(--ez-border); color: var(--ez-muted); } [data-bs-theme="dark"] .btn-swap:hover { background: var(--ez-surface); color: var(--ez-accent-strong); } /* calculadora-imc */ [data-bs-theme="dark"] .unit-toggle { background: var(--ez-surface-2); border-color: var(--ez-border); } [data-bs-theme="dark"] .unit-toggle button { color: var(--ez-muted); } [data-bs-theme="dark"] .unit-toggle button.active { background: var(--ez-accent); color: #fff; } [data-bs-theme="dark"] .result-card { background: var(--ez-surface-2); border-color: var(--ez-border); } [data-bs-theme="dark"] .cat-underweight { background: #0c3350; color: #7dd3fc; } [data-bs-theme="dark"] .cat-normal { background: #103c24; color: #86efac; } [data-bs-theme="dark"] .cat-overweight { background: #3f3010; color: #fde047; } [data-bs-theme="dark"] .cat-obese1 { background: #431e0a; color: #fdba74; } [data-bs-theme="dark"] .cat-obese2 { background: #431418; color: #fca5a5; } [data-bs-theme="dark"] .cat-obese3 { background: #4c1010; color: #f87171; } [data-bs-theme="dark"] .cat-none { background: var(--ez-surface-2); color: var(--ez-muted); } [data-bs-theme="dark"] .disclaimer { background: #2b2410; color: #d6c58a; border-left-color: #a16207; } /* lorem-ipsum */ [data-bs-theme="dark"] #output { background: var(--ez-surface); } /* calculadora-edad */ [data-bs-theme="dark"] .result-box { background: #2b2410; border-left-color: #ca8a04; } /* botones outline-secondary (p.ej. "Copiar al portapapeles") */ [data-bs-theme="dark"] .btn-outline-secondary { color: var(--ez-muted); border-color: var(--ez-border); } [data-bs-theme="dark"] .btn-outline-secondary:hover { color: var(--ez-text); background: var(--ez-surface-2); border-color: var(--ez-muted); } /* calculadora-edad: su tarjeta principal declara fondo blanco con palabra clave */ [data-bs-theme="dark"] .main-card { background: var(--ez-surface); }