/* ───────────────────────────────────────────────────────────────────────── NetfiberPal — Main stylesheet Brand: Netfiber S.L. (netfiber.es) ───────────────────────────────────────────────────────────────────────── */ .hidden { display: none !important; } :root { /* Netfiber corporate palette */ --nf-navy: #0d3c6e; --nf-navy-dark: #082a52; --nf-navy-light: #1a5598; --nf-orange: #f07a1f; --nf-orange-dark: #d96710; --nf-orange-soft: #fde2cc; /* Corporate lilac (used to differentiate import flows) */ --nf-lilac: #6e3c9c; --nf-lilac-dark: #4e2879; --nf-lilac-light: #9166bf; --nf-lilac-soft: #ece3f7; /* Neutral */ --bg: #f4f6fa; --surface: #ffffff; --border: #e3e8ef; --text: #1a2231; --text-soft: #5a6478; --text-mute: #8a93a6; --ok: #21a36b; --warn: #d99800; --err: #d23a3a; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(13, 60, 110, 0.06), 0 4px 12px rgba(13, 60, 110, 0.06); --shadow-lg: 0 8px 24px rgba(13, 60, 110, 0.12); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* JA: Inter no cubre CJK — pila de sistema japonesa (i18n.js pone ). */ html[lang="ja"] { --font: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--nf-navy); text-decoration: none; } a:hover { color: var(--nf-navy-light); } /* ── Header ───────────────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 100; background: linear-gradient(135deg, var(--nf-navy) 0%, var(--nf-navy-dark) 100%); color: #fff; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 18px rgba(8, 25, 50, 0.22); border-bottom: 1px solid rgba(255,255,255,0.04); -webkit-backdrop-filter: saturate(140%); backdrop-filter: saturate(140%); } .header-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; } /* White rounded pill containing the corporate Netfiber wordmark */ .header-logo-mark { background: #fff; border-radius: 12px; padding: 6px 14px; height: 48px; display: flex; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.6) inset; transition: transform 0.15s ease, box-shadow 0.15s ease; } .header-brand:hover .header-logo-mark { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .header-logo-mark img { height: 30px; width: auto; display: block; } /* Version badge — small subtle chip next to .brand-pal */ .brand-version { display: inline-flex; align-items: center; font-weight: 600; font-size: 11px; letter-spacing: .3px; color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); padding: 3px 8px; border-radius: 999px; margin-left: 6px; font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } /* On the login page, brand sits on a white card; adapt colors */ .login-card .brand-version { color: var(--text-mute); background: var(--bg); border-color: var(--border); } /* Internal-tool accent: ".Pal" suffix as orange chip */ .brand-pal { display: inline-flex; align-items: center; font-weight: 800; font-size: 13px; letter-spacing: 1px; background: linear-gradient(135deg, var(--nf-orange) 0%, var(--nf-orange-dark) 100%); color: #fff; padding: 6px 12px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(217, 103, 16, 0.35); text-shadow: 0 1px 0 rgba(0,0,0,0.08); } /* Legacy classes kept for any tool-specific includes that still use them */ .header-logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; font-weight: 800; color: var(--nf-navy); font-size: 18px; letter-spacing: -0.5px; } .header-brand-text { display: flex; flex-direction: column; gap: 2px; } .brand-name { font-weight: 700; font-size: 20px; letter-spacing: -0.3px; } .brand-name .brand-suffix { color: var(--nf-orange); font-weight: 800; } .brand-subtitle { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500; } .header-nav { display: flex; gap: 6px; align-items: center; } .header-user { display: flex; align-items: center; gap: 10px; margin-left: 12px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.15); } .header-user-name { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-logout { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.15); padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background .15s; } .header-logout:hover { background: rgba(255,255,255,.2); } .header-nav a { color: rgba(255,255,255,0.85); padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; } .header-nav a:hover, .header-nav a.active { background: rgba(255,255,255,0.12); color: #fff; } /* Botón hamburguesa: lo inyecta auth-ui.js y SOLO se ve en móvil (≤720px), donde abre el nav como desplegable. En escritorio no existe visualmente. */ .header-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color: #fff; border-radius: 10px; cursor: pointer; transition: background .15s; } .header-burger:hover, .header-burger[aria-expanded="true"] { background: rgba(255,255,255,.24); } .header-burger svg { width: 20px; height: 20px; } /* ── Avatar de usuario + menú ─────────────────────────────────────────── */ .header-user { position: relative; } .header-avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: linear-gradient(135deg, var(--nf-orange) 0%, var(--nf-orange-dark) 100%); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .5px; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .12s ease, box-shadow .12s ease; } .header-avatar:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.25); } /* Foto de perfil dentro del botón (si no hay, se muestran las iniciales). */ .header-avatar { overflow: hidden; } .header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .header-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 300; } .header-menu .hm-info { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .hm-name { font-weight: 700; color: var(--nf-navy); } .hm-email { font-size: 12px; color: var(--text-mute); word-break: break-all; } .header-menu .hm-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; border: none; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-decoration: none; } .header-menu .hm-item:hover { background: var(--bg); } .header-menu .hm-logout { color: var(--err); } /* ── Layout ───────────────────────────────────────────────────────────── */ main { max-width: 1200px; margin: 0 auto; padding: 32px; } .section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-mute); margin: 0 0 16px; } /* ── Hero / dashboard greeting ────────────────────────────────────────── */ .hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow); } .hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: var(--nf-navy); } .hero p { margin: 0; color: var(--text-soft); font-size: 15px; } .hero-badge { background: var(--nf-orange-soft); color: var(--nf-orange-dark); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } /* ── Metric cards ─────────────────────────────────────────────────────── */ .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; } @media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .metrics { grid-template-columns: 1fr; } } .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .metric::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--nf-navy); } .metric.accent::before { background: var(--nf-orange); } .metric .metric-label { font-size: 12px; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .metric .metric-value { font-size: 28px; font-weight: 700; color: var(--nf-navy); margin: 6px 0 2px; letter-spacing: -0.5px; } .metric .metric-sub { font-size: 12px; color: var(--text-soft); } /* ── Tool grid ────────────────────────────────────────────────────────── */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; text-decoration: none; color: inherit; } .tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--nf-navy-light); } .tool-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--nf-navy) 0%, var(--nf-navy-light) 100%); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: 4px; } .tool-card h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--nf-navy); } .tool-card p { margin: 0; font-size: 14px; color: var(--text-soft); flex: 1; } .tool-card .tool-category { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--nf-orange-dark); background: var(--nf-orange-soft); padding: 3px 8px; border-radius: 999px; width: fit-content; } /* ── Activity table ──────────────────────────────────────────────────── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); margin-top: 32px; } .panel h2 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--nf-navy); } .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .panel-header h2 { margin: 0; } .panel-link { font-size: 13px; font-weight: 600; color: var(--nf-navy-light); } .panel-link:hover { color: var(--nf-orange-dark); } .muted-count { color: var(--text-mute); font-weight: 500; font-size: 13px; margin-left: 4px; } /* ── Filters (activity page) ─────────────────────────────────────────── */ .filters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: end; } .filters-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.4px; } .filters-grid label > span { padding-left: 2px; } .filters-grid input, .filters-grid select { font: inherit; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .filters-grid input:focus, .filters-grid select:focus { outline: none; border-color: var(--nf-navy-light); box-shadow: 0 0 0 3px rgba(26, 85, 152, 0.15); } .filters-search { grid-column: span 2; } .filters-actions { display: flex; gap: 8px; grid-column: span 2; justify-content: flex-end; } @media (max-width: 800px) { .filters-grid { grid-template-columns: repeat(2, 1fr); } .filters-search, .filters-actions { grid-column: span 2; } } @media (max-width: 480px) { .filters-grid { grid-template-columns: 1fr; } .filters-search, .filters-actions { grid-column: span 1; } .filters-actions { justify-content: stretch; } .filters-actions .btn { flex: 1; justify-content: center; } } /* ── Pagination ──────────────────────────────────────────────────────── */ .page-size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); } .page-size select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } .pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-soft); } .page-controls { display: flex; align-items: center; gap: 10px; } .page-controls .btn { padding: 6px 12px; font-size: 13px; } .page-controls .btn[disabled] { opacity: 0.4; cursor: not-allowed; } .page-current { font-weight: 600; color: var(--text); } table.activity { width: 100%; border-collapse: collapse; font-size: 14px; } table.activity th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); padding: 8px 10px; border-bottom: 1px solid var(--border); } table.activity td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text); } table.activity tr:last-child td { border-bottom: none; } .status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-ok { background: #e3f6ec; color: var(--ok); } .status-error { background: #fde6e6; color: var(--err); } .status-warning { background: #fcefd6; color: var(--warn); } .status-info { background: #e7eefa; color: var(--nf-navy); } .empty { text-align: center; color: var(--text-mute); padding: 24px; font-size: 14px; } /* ── Footer ──────────────────────────────────────────────────────────── */ footer { text-align: center; padding: 24px; color: var(--text-mute); font-size: 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; } footer .footer-legal { font-size: 11px; opacity: .85; } footer .footer-legal a { color: inherit; text-decoration: underline; } footer .footer-legal a:hover { color: var(--nf-navy, #0d3c6e); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; border: none; transition: background 0.15s ease; } .btn-primary { background: var(--nf-navy); color: #fff; } .btn-primary:hover { background: var(--nf-navy-light); } .btn-accent { background: var(--nf-orange); color: #fff; } .btn-accent:hover { background: var(--nf-orange-dark); } .btn-ghost { background: transparent; color: var(--nf-navy); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg); } /* ── Tool page common ────────────────────────────────────────────────── */ .tool-page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .tool-page-header .tool-icon { width: 56px; height: 56px; font-size: 28px; } .tool-page-header h1 { margin: 0; font-size: 24px; color: var(--nf-navy); } .tool-page-header .breadcrumb { font-size: 13px; color: var(--text-mute); } .tool-page-header .breadcrumb a { color: var(--text-mute); } /* ═══════════════════════════════════════════════════════════════════════ Responsive (global) — tablet · móvil · plegables. Ordenado de MAYOR a MENOR ancho para que el breakpoint más pequeño tenga prioridad. ═══════════════════════════════════════════════════════════════════════ */ /* ── Tablet y plegables desplegados (≤1024px) ── */ @media (max-width: 1024px) { main { padding: 22px; } /* Tablas anchas: scroll horizontal propio para no desbordar la página */ table.activity { display: block; width: max-content; max-width: 100%; overflow-x: auto; } } /* ── Móvil (≤720px) ── */ @media (max-width: 720px) { /* ── Cabecera: marca arriba, navegación que envuelve debajo ── */ .header { padding: 10px 14px; flex-wrap: wrap; gap: 8px 10px; } .header-logo-mark { height: 38px; padding: 5px 10px; } .header-logo-mark img { height: 24px; } /* Sin botón (páginas públicas que no cargan auth-ui, p. ej. html/legal.html): la barra sigue envolviendo como antes — son 1-2 enlaces y caben. */ .header-nav { flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; margin-left: auto; } .header-nav a { padding: 6px 10px; font-size: 13px; } .header-user { margin-left: 6px; padding-left: 8px; gap: 8px; } .header-user-name { max-width: 110px; font-size: 12px; } .header-logout { padding: 5px 10px; font-size: 12px; } /* ── Con botón hamburguesa (auth-ui lo inyecta y marca .has-burger en las páginas con sesión): el nav no cabe en un móvil —Inicio, Actividad, Conectores, Admin, Tareas, idioma y avatar envolvían en 2-3 filas— y pasa a ser un desplegable. El panel es navy como el header: sus hijos ya están pensados blanco-sobre-navy y no hay que recolorear nada. ── */ /* Sin tocar el position: el header es sticky y «sticky» ya ancla a los hijos absolutos (ponerle relative lo desclavaba y el panel se iba con el scroll). */ .header.has-burger { flex-wrap: nowrap; } .header.has-burger .header-burger { display: inline-flex; } .header.has-burger .header-nav { display: none; position: absolute; top: calc(100% + 6px); left: 8px; right: 8px; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; background: linear-gradient(135deg, var(--nf-navy) 0%, var(--nf-navy-dark) 100%); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 8px; box-shadow: 0 18px 46px rgba(4, 18, 42, .5); /* Por encima del botón flotante del chat (1300), que si no tapa el avatar del final del panel; por debajo del banner de cookies (1400). */ z-index: 1350; } .header.has-burger .header-nav.open { display: flex; } .header.has-burger .header-nav a { padding: 11px 12px; font-size: 14px; border-radius: 9px; } /* Widgets del header (conectores, idioma) a lo ancho del panel */ .header.has-burger .header-nav .conn-menu, .header.has-burger .header-nav .hp-lang { width: 100%; margin: 0; } .header.has-burger .header-nav .conn-btn, .header.has-burger .header-nav .hpl-btn { width: 100%; justify-content: flex-start; padding: 11px 12px; border-radius: 9px; } /* Usuario: fila propia separada por una línea, ya no un divisor lateral */ .header.has-burger .header-user { width: 100%; margin: 4px 0 0; padding: 8px 4px 0; border-left: none; border-top: 1px solid rgba(255,255,255,.14); } /* Submenús (conectores, idioma, avatar): en línea dentro del panel, no flotando fuera — así no tapan el propio menú ni se salen de la pantalla. */ .header.has-burger .header-nav.open .conn-panel, .header.has-burger .header-nav.open .hpl-panel, .header.has-burger .header-nav.open .header-menu { position: static; width: auto; min-width: 0; max-height: none; margin: 4px 0 2px; box-shadow: none; animation: none; } /* ── Contenedor principal ── */ main { padding: 16px; } /* ── Hero / cabecera de herramienta ── */ .hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; } .hero h1 { font-size: 21px; } .hero p { font-size: 14px; } .tool-page-header { gap: 12px; margin-bottom: 18px; } .tool-page-header .tool-icon { width: 44px; height: 44px; font-size: 22px; } .tool-page-header h1 { font-size: 19px; } /* ── Paneles ── */ .panel { padding: 16px; margin-top: 18px; } .panel-header { flex-wrap: wrap; gap: 8px; } .panel-header h2 { font-size: 15px; } /* ── Paginación apilada ── */ .pagination { flex-direction: column; align-items: stretch; gap: 10px; } .page-controls { justify-content: space-between; } /* ── Inicio · menú de herramientas: rejilla compacta tipo lanzador ── */ .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tool-card { padding: 16px 12px; gap: 6px; align-items: center; text-align: center; } .tool-card .tool-icon { width: 44px; height: 44px; font-size: 22px; margin: 0 auto 2px; } .tool-card h3 { font-size: 14px; line-height: 1.25; } .tool-card p { display: none; } /* en móvil basta icono + nombre */ .tool-card .tool-category { display: none; } } /* ── Móvil estrecho (≤480px) ── */ @media (max-width: 480px) { main { padding: 12px; } .hero h1 { font-size: 19px; } } /* ── Móviles plegables plegados (~280–360px) ── */ @media (max-width: 360px) { main { padding: 10px; } .header { padding: 8px 10px; gap: 6px; } .header-logo-mark { height: 32px; padding: 4px 8px; } .header-logo-mark img { height: 20px; } .header-nav a { padding: 5px 8px; font-size: 12px; } .header-user-name { max-width: 72px; } .header-logout { padding: 4px 8px; } .hero { padding: 14px; } .hero h1 { font-size: 18px; } .tool-page-header .tool-icon { width: 38px; height: 38px; font-size: 19px; } .tool-page-header h1 { font-size: 17px; } .panel { padding: 13px; } .metric .metric-value { font-size: 22px; } .btn { padding: 9px 14px; font-size: 13px; } } /* ── Banner de consentimiento de cookies (js/cookies-banner.js: login + inicio) ── */ .ck-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; padding: 16px; animation: ck-in .35s cubic-bezier(.2,.9,.3,1.1) both; } @keyframes ck-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .ck-inner { max-width: 860px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 50px rgba(5, 26, 54, .35); padding: 20px 24px; } .ck-text strong { font-size: 15px; color: var(--nf-navy); } .ck-text p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-soft); } .ck-text a { color: var(--nf-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .ck-config { margin: 14px 0 2px; display: flex; flex-direction: column; gap: 10px; } .ck-config[hidden] { display: none; } .ck-cat { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-soft); cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; } .ck-cat input { margin-top: 2px; accent-color: var(--nf-navy); } .ck-cat strong { color: var(--text); } .ck-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .ck-actions button { font: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 9px; cursor: pointer; transition: filter .15s ease, border-color .15s ease, color .15s ease; } .ck-btn-primary { border: none; background: linear-gradient(135deg, var(--nf-navy), var(--nf-navy-light)); color: #fff; } .ck-btn-primary:hover { filter: brightness(1.12); } .ck-btn-ghost { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); } .ck-btn-ghost:hover { border-color: var(--nf-navy-light); color: var(--nf-navy); } @media (max-width: 560px) { .ck-actions button { flex: 1; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .ck-banner { animation: none; } } /* ── Menú «Conectores» del header (v2.0.2, antes solo en el index v1.2.350) ── El botón imita los enlaces de .header-nav; el punto resume la salud de la BD (verde con pulso / rojo) y el panel muestra las tarjetas de los conectores. En el index lo pinta app.js; en el resto de páginas lo inyecta auth-ui.js. */ .conn-menu { position: relative; } .conn-btn { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; font: inherit; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); padding: 8px 14px; border-radius: 8px; cursor: pointer; } .conn-btn:hover, .conn-btn[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; } .conn-btn svg { width: 13px; height: 13px; opacity: .7; transition: transform .18s; } .conn-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .conn-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: conn-pulse 2.2s infinite; } .conn-btn .dot.unk { background: #94a3b8; animation: none; box-shadow: none; } .conn-btn .dot.err { background: #e0382f; animation: none; box-shadow: 0 0 8px rgba(224,56,47,.8); } @keyframes conn-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .conn-panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 130; width: 344px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: 0 6px 18px rgba(13,60,110,.12), 0 18px 46px rgba(13,60,110,.18); animation: conn-pop .25s cubic-bezier(.16,1,.3,1) both; } .conn-panel[hidden] { display: none; } .conn-eyebrow { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--text-mute); padding: 0 2px 10px; } .conn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .conn-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; background: #fff; min-width: 0; } .conn-card.db { grid-column: 1 / -1; background: #f2f6fc; border-color: #d7e4f7; } .conn-card .ic { width: 26px; height: 26px; border-radius: 7px; flex: none; overflow: hidden; display: grid; place-items: center; font-size: 16px; } .conn-card .ic img, .conn-card .ic svg { width: 100%; height: 100%; display: block; } .conn-card .tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .conn-card .n { font-size: 12.5px; font-weight: 800; color: var(--text); letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conn-card .s { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-mute); white-space: nowrap; overflow: hidden; } .conn-card .s .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; flex: none; } .conn-card .s .dot.slow { background: #f4b12a; } .conn-card .s .dot.off { background: #94a3b8; } .conn-card .s .dot.err { background: #e0382f; } /* Tarjeta clicable (v2.0.193): la de cada conector es un que entra directo a su página. Prefijado con .conn-panel por lo mismo que .conn-hub: dentro del nav, `.header-nav a` pisaría el color, el padding y el fondo del hover. */ .conn-panel a.conn-card { padding: 9px 11px; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .conn-panel a.conn-card:hover { background: #fff; border-color: var(--nf-navy-light); box-shadow: 0 4px 14px rgba(13,60,110,.14); transform: translateY(-1px); } .conn-panel a.conn-card:focus-visible { outline: 2px solid var(--nf-navy); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .conn-panel a.conn-card { transition: none; } .conn-panel a.conn-card:hover { transform: none; } } /* Prefijado con .conn-panel: dentro del nav, .header-nav a (main.css) pisaría el color/padding de una sola clase. */ .conn-panel .conn-hub { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 9px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: var(--nf-navy); background: #eef4ff; border: 1px solid #d7e4f7; } .conn-panel .conn-hub:hover { background: #e2edff; color: var(--nf-navy); } .conn-panel .conn-hub[hidden] { display: none; } @keyframes conn-pop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } } /* ── Selector de idioma del header (v2, desplegable — escala a N idiomas) ── Lo inyecta auth-ui.js en todos los headers si config.langs trae más de un idioma. Sustituye a las píldoras ES/EN del index: con 5+ idiomas no caben. El order flex lo deja siempre al final del nav, delante del avatar. */ .header-nav .hp-lang { position: relative; order: 8; margin-left: 8px; } .header-nav .header-user { order: 9; } .hpl-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: rgba(255,255,255,.85); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .3px; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: background .18s, color .18s; } .hpl-btn:hover, .hpl-btn[aria-expanded="true"] { background: rgba(255,255,255,.22); color: #fff; } .hpl-btn .car { width: 11px; height: 11px; flex: none; opacity: .7; transition: transform .18s; } /* Bandera SVG (resources/images/flags/): en trigger y opciones */ .hpl-flag { width: 18px; height: 12px; border-radius: 2.5px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } .hpl-btn[aria-expanded="true"] .car { transform: rotate(180deg); } .hpl-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 140; min-width: 118px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 6px; box-shadow: 0 6px 18px rgba(13,60,110,.12), 0 18px 46px rgba(13,60,110,.18); animation: conn-pop .25s cubic-bezier(.16,1,.3,1) both; } .hpl-panel[hidden] { display: none; } .hpl-panel button { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .4px; color: var(--text); text-align: left; padding: 8px 11px; border-radius: 9px; cursor: pointer; } .hpl-panel button:hover { background: #f2f6fc; } .hpl-panel button.on { color: var(--nf-navy); font-weight: 800; background: #eef4ff; }