/* ══════════════════════════════════════════════════════════════════════ biblioteca.css — Workspace (home de trabajo · DFAS) Layout estilo Arc Essentials: menú lateral + KPI-tiles + contenido. Paleta de la landing de equipo: papel cálido, tinta, teal petróleo. ══════════════════════════════════════════════════════════════════════ */ :root { --font:var(--ui-font-body,'Inter',system-ui,-apple-system,sans-serif); --tight:var(--ui-font-label,'Inter Tight','Inter',sans-serif); --brand:var(--ui-font-display,'Bricolage Grotesque','Inter Tight',sans-serif); --accent:var(--ui-font-action,'Barlow','Inter',sans-serif); --font-display:var(--tight); --font-brand:var(--brand); --ink:var(--ui-ink,#23282b); --ink-soft:var(--ui-ink-soft,#4d575b); --ink-faint:var(--ui-ink-faint,#7c878b); --paper:var(--ui-paper,#f1efe8); --paper-2:var(--ui-paper-soft,#eae7dd); --white:var(--ui-surface,#ffffff); --teal:var(--ui-teal,#0e8a9a); --teal-deep:var(--ui-petrol-800,#0a6b78); --teal-ink:#0b5560; --teal-bright:var(--ui-teal-bright,#66b8c0); --teal-wash:#dfeef0; --teal-soft:rgba(14,138,154,.10); --lime:#b4c96f; --lime-deep:#8caf36; --gold:#c9a96e; --terra:#c4624f; /* Verde de firma para el ícono de sector (identidad, no riesgo). El terracota queda reservado para señalar riesgo real, no para decorar. */ --sector:var(--ui-sector,#5c8f52); /* "Glass" de las subcards: sobre el lienzo BLANCO del panel, un tinte papel translúcido + desenfoque + brillo interior superior, para diferenciarse del blanco con sutileza (no una caja gris, un panel de vidrio tenue). */ --glass:rgba(240,237,229,.55); --glass-edge:rgba(35,40,43,.09); --glass-blur:blur(9px) saturate(112%); --glass-shadow:0 1px 3px rgba(20,40,44,.05), inset 0 1px 0 rgba(255,255,255,.6); --navy:#0a1f26; --line:rgba(35,40,43,.12); --line-soft:rgba(35,40,43,.07); --r-sm:9px; --r-md:13px; --r-lg:18px; --pill:999px; --shadow-s:0 2px 14px rgba(20,40,44,.06); --shadow-m:0 18px 48px -20px rgba(12,52,60,.30); --ease:cubic-bezier(.33,1,.68,1); --sig-bajo:#8caf36; --sig-medio:#c9a96e; --sig-alto:#c4624f; --topbar-h:46px; --side-w:210px; } * { box-sizing:border-box; margin:0; padding:0; } /* min-height (no height:100%): con `height:100%` la caja del queda clavada a 100vh y el bloque contenedor de la topbar sticky termina ahí; al crecer el contenido (p.ej. al abrir las cards de actividad) la barra se salía de su contenedor y "desaparecía de golpe" al hacer scroll. Con min-height el body crece con el contenido y la barra queda anclada arriba de forma estable. */ html,body { min-height:100%; } body { font-family:var(--font); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.55; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } /* ── Topbar (idéntica a la landing/plataforma) ─────────────────────────── */ .aosenuma-topbar { position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:12px; height:var(--topbar-h); padding:0 18px; background:linear-gradient(180deg,rgba(10,31,38,.94) 0%,rgba(10,31,38,.82) 100%); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border-bottom:1px solid rgba(242,244,237,.08); } .aosenuma-topbar__line { position:absolute; bottom:-1px; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--teal) 0%,var(--lime) 48%,#1098b5 100%); opacity:.42; } .aosenuma-topbar__title-block { display:flex; flex-direction:column; gap:1px; min-width:0; } .aosenuma-topbar__title-text { display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(242,244,237,.78); min-width:0; } .aosenuma-topbar__title-strong { font-weight:600; color:#f2f4ed; white-space:nowrap; } .aosenuma-topbar__tail { display:inline-flex; align-items:center; gap:8px; color:rgba(242,244,237,.62); font-size:11.5px; } .aosenuma-topbar__divider { width:1px; height:16px; background:rgba(242,244,237,.18); } .aosenuma-topbar__scope { color:#f2f4ed; font-weight:600; letter-spacing:.02em; } .aosenuma-topbar__powered { opacity:.7; } .aosenuma-topbar__home { display:inline-flex; align-items:center; gap:5px; color:rgba(242,244,237,.85); } .aosenuma-topbar__home:hover .aosenuma-topbar__brand { color:var(--teal-bright); } .aosenuma-topbar__home img { filter:brightness(0) invert(1); opacity:.9; } .aosenuma-topbar__brand { font-family:var(--brand); font-weight:600; color:#f2f4ed; font-size:13.5px; } .aosenuma-topbar__component { font-size:9.5px; color:rgba(242,244,237,.5); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .aosenuma-topbar__right { display:flex; align-items:center; gap:14px; } .aosenuma-topbar__live { display:inline-flex; align-items:center; font-family:var(--tight); font-size:10.5px; font-weight:600; color:rgba(242,244,237,.78); letter-spacing:.08em; text-transform:uppercase; } /* ── Shell: la barra maestra (masterbar.css) es fija; el contenido se desplaza con var(--mb-total) — así el hover-reveal y el panel de nivel 2 EMPUJAN el layout en vez de taparlo. ───────────────────────────────────── */ .shell { display:block; } .shell > .main { margin-left:var(--mb-total, 56px); transition:margin-left .26s cubic-bezier(.33,1,.68,1); } /* NOTA: la barra lateral v1 (.side*) fue sustituida por la barra maestra compartida (masterbar.css/js). Se conserva .side-new porque el estado vacío la reutiliza como CTA; el resto de reglas .side-* quedan sin DOM que las use y pueden podarse en una limpieza posterior. */ .side { position:sticky; top:var(--topbar-h); align-self:start; height:calc(100vh - var(--topbar-h)); display:flex; flex-direction:column; padding:16px 12px; background:var(--white); border-right:1px solid var(--line); } .side-id { display:flex; align-items:center; gap:10px; padding:6px 8px 14px; } .side-ava { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-family:var(--tight); font-weight:700; font-size:13px; color:#fff; background:var(--teal-deep); flex:none; } .side-id-tx { min-width:0; line-height:1.25; } .side-id-tx b { display:block; font-family:var(--tight); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .side-id-tx span { font-size:10.5px; color:var(--ink-faint); } .side-nav { display:flex; flex-direction:column; gap:2px; margin-top:4px; } .side-item { display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border:none; background:transparent; border-radius:var(--r-md); cursor:pointer; text-align:left; font-family:var(--accent); font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:background .14s, color .14s; } .side-item svg { width:18px; height:18px; stroke:var(--ink-faint); fill:none; stroke-width:1.7; flex:none; transition:stroke .14s; } .side-item:hover { background:var(--paper); color:var(--ink); } .side-item.on { background:var(--teal-soft); color:var(--teal-ink); font-weight:600; } .side-item.on svg { stroke:var(--teal); } .side-count { margin-left:auto; font-family:var(--tight); font-size:11px; font-weight:600; color:var(--ink-faint); background:var(--paper-2); border-radius:var(--pill); padding:1px 8px; } .side-item.on .side-count { background:rgba(14,138,154,.16); color:var(--teal-ink); } .side-div { height:1px; background:var(--line); margin:14px 6px; } .side-new { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; font-family:var(--accent); font-weight:700; font-size:13.5px; color:#fff; background:var(--teal); border-radius:var(--r-md); transition:background .14s; } .side-new:hover { background:var(--teal-deep); } .side-new svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.4; } .side-foot { margin-top:auto; padding-top:14px; } .side-plat { display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--tight); font-size:11.5px; font-weight:600; color:var(--ink-faint); padding:9px; border:1px solid var(--line); border-radius:var(--r-md); transition:border-color .14s,color .14s; } .side-plat:hover { color:var(--teal-ink); border-color:rgba(14,138,154,.3); } .side-plat svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; } /* ── Barra maestra estilo Supabase: identidad + logout ─────────────────── */ .side-id { position:relative; } .side-logout { margin-left:auto; flex:none; display:grid; place-items:center; width:28px; height:28px; border:none; background:transparent; border-radius:8px; cursor:pointer; color:var(--ink-faint); transition:background .14s,color .14s; } .side-logout svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; } .side-logout:hover { background:var(--paper); color:var(--terra); } /* CTA principal */ .side-new { margin:2px 0 6px; } .side-new span { white-space:nowrap; } /* ── Grupos desplegables ───────────────────────────────────────────────── */ .side-group { margin-top:6px; } .side-group-h { display:flex; align-items:center; gap:6px; width:100%; padding:6px 11px 5px; border:none; background:transparent; cursor:pointer; font-family:var(--tight); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); transition:color .14s; } .side-group-h:hover { color:var(--ink-soft); } .side-group-h .chev { width:13px; height:13px; margin-left:auto; stroke:currentColor; fill:none; stroke-width:2; transition:transform .18s var(--ease); } .side-group.collapsed .chev { transform:rotate(-90deg); } .side-group-items { display:grid; grid-template-rows:1fr; overflow:hidden; transition:grid-template-rows .2s var(--ease); } .side-group-items > * { min-height:0; } .side-group.collapsed .side-group-items { grid-template-rows:0fr; } .side-item[href] { text-decoration:none; } /* ── Toggle de colapso global ──────────────────────────────────────────── */ .side-toggle { display:flex; align-items:center; gap:9px; width:100%; margin-top:8px; padding:8px 11px; border:none; background:transparent; border-radius:var(--r-md); cursor:pointer; color:var(--ink-faint); font-family:var(--accent); font-size:12px; font-weight:500; transition:background .14s,color .14s; } .side-toggle svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex:none; transition:transform .2s var(--ease); } .side-toggle:hover { background:var(--paper); color:var(--ink); } /* ── Estado colapsado (solo iconos) ────────────────────────────────────── */ .side-collapsed { --side-w:64px; } .side-collapsed .side { padding:16px 10px; align-items:center; } .side-collapsed .side-id-tx, .side-collapsed .side-logout, .side-collapsed .side-item > span:not(.side-count), .side-collapsed .side-new span, .side-collapsed .side-group-h span, .side-collapsed .side-plat span, .side-collapsed .side-toggle span { display:none; } .side-collapsed .side-id { justify-content:center; padding:6px 0 12px; } .side-collapsed .side-item, .side-collapsed .side-new, .side-collapsed .side-plat { justify-content:center; padding-left:0; padding-right:0; gap:0; } .side-collapsed .side-group-h { justify-content:center; padding:6px 0; } .side-collapsed .side-group-h .chev { display:none; } .side-collapsed .side-count { position:absolute; } .side-collapsed .side-toggle { justify-content:center; } .side-collapsed .side-toggle svg { transform:rotate(180deg); } /* tooltip al hacer hover en modo colapsado */ .side-collapsed [data-tip]{ position:relative; } .side-collapsed [data-tip]:hover::after{ content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); background:var(--navy); color:#f2f4ed; font-family:var(--accent); font-size:12px; font-weight:500; padding:6px 10px; border-radius:8px; white-space:nowrap; z-index:80; box-shadow:var(--shadow-m); pointer-events:none; } /* ── Contenido ─────────────────────────────────────────────────────────── */ .main { padding:26px 34px 56px; min-width:0; } .page-head { margin-bottom:20px; } /* go() lo oculta en Resumen (ahí el saludo es el encabezado). Explícita a propósito: un [hidden] que no oculta ya nos costó los skeletons fantasma. */ .page-head[hidden] { display:none; } .page-head h1 { font-family:var(--brand); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.02em; } .page-head__copy > span { display:block; font-size:13px; color:var(--ink-faint); margin-top:3px; } /* Empresas: una vista de primer nivel construida con el mismo portafolio ya filtrado que alimenta Resumen y Proyectos. */ .company-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; } .company-card { min-width:0; display:flex; flex-direction:column; gap:18px; padding:20px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); } .company-card__head { display:flex; align-items:center; gap:12px; min-width:0; } .company-mark { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--teal-wash); color:var(--teal-ink); font-family:var(--tight); font-size:12px; font-weight:700; letter-spacing:.05em; } .company-card__head div { min-width:0; } .company-card__head h2 { font-family:var(--brand); font-size:18px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .company-card__head p { margin-top:3px; font-size:11px; color:var(--ink-faint); text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .company-stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; } .company-stats div { min-width:0; padding:11px 9px; border-right:1px solid var(--line-soft); } .company-stats div:last-child { border-right:0; } .company-stats b { display:block; font-family:var(--tight); font-size:18px; color:var(--teal-ink); } .company-stats span { display:block; margin-top:2px; font-family:var(--tight); font-size:8.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; } .company-open { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line); border-radius:var(--pill); background:var(--white); color:var(--teal-ink); font:600 11.5px var(--tight); cursor:pointer; transition:background .14s,border-color .14s; } .company-open:hover { background:var(--teal-wash); border-color:var(--teal-bright); } .company-open:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } /* Biblioteca STAC: inventario técnico, no un segundo visor. */ .layer-catalog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; padding:16px 18px; background:linear-gradient(135deg,var(--teal-wash),var(--white)); border:1px solid var(--line); border-radius:var(--r-lg); } .layer-kicker { display:block; font:700 10px var(--tight); color:var(--teal-ink); text-transform:uppercase; letter-spacing:.08em; } .layer-catalog-head p { margin-top:5px; max-width:680px; font-size:12px; color:var(--ink-soft); line-height:1.45; } .layer-total { flex:none; padding:5px 10px; border:1px solid rgba(14,138,154,.25); border-radius:var(--pill); background:rgba(255,255,255,.72); font:600 10.5px var(--tight); color:var(--teal-ink); white-space:nowrap; } .layer-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; } .layer-search { flex:1 1 320px; } .layer-results { margin-left:auto; font:600 10.5px var(--tight); color:var(--ink-faint); } .layer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; } .layer-grid > .empty { grid-column:1/-1; } .layer-card { min-width:0; display:flex; flex-direction:column; padding:17px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); } .layer-card__top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; } .layer-format { padding:3px 7px; border-radius:5px; background:var(--teal-wash); color:var(--teal-ink); font:700 9px var(--tight); letter-spacing:.04em; text-transform:uppercase; } .layer-collection { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 9.5px var(--tight); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; } .layer-card h2 { font-family:var(--brand); font-size:15px; line-height:1.3; color:var(--ink); } .layer-card code { display:block; margin-top:5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-faint); } .layer-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:16px; overflow:hidden; border:1px solid var(--line-soft); border-radius:10px; background:var(--line-soft); } .layer-meta div { min-width:0; padding:9px 10px; background:var(--paper); } .layer-meta--wide { grid-column:1/-1; } .layer-meta dt { font:600 8.5px var(--tight); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; } .layer-meta dd { margin-top:2px; font:600 11px var(--tight); color:var(--ink-soft); } .layer-pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; } .layer-pagination[hidden] { display:none; } .layer-pagination button { min-height:34px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--pill); background:var(--white); color:var(--teal-ink); font:600 11px var(--tight); cursor:pointer; } .layer-pagination button:disabled { opacity:.4; cursor:not-allowed; } .layer-pagination span { font:600 10.5px var(--tight); color:var(--ink-faint); } .layer-note { margin-top:16px; font-size:10.5px; color:var(--ink-faint); line-height:1.45; } /* Aviso "en construcción" del catálogo mientras se limpian los nombres. */ .layer-wip { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:56px 24px; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--glass, var(--paper)); } .layer-wip__ico { width:44px; height:44px; color:var(--teal); opacity:.9; } .layer-wip h2 { font-family:var(--brand, var(--tight)); font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink); } .layer-wip p { max-width:46ch; font-size:13px; line-height:1.55; color:var(--ink-soft); } .layer-wip__foot { font-size:11.5px; color:var(--ink-faint); } .layer-loading { grid-column:1/-1; min-height:180px; display:grid; place-items:center; align-content:center; gap:10px; color:var(--ink-faint); font:500 11px var(--tight); } .layer-loading span { width:24px; height:24px; border:2px solid var(--line); border-top-color:var(--teal); border-radius:50%; animation:layer-spin .8s linear infinite; } @keyframes layer-spin { to { transform:rotate(360deg); } } /* KPI tiles (fila estilo Arc: una tarjeta blanca con celdas divididas) */ .tiles { display:grid; grid-template-columns:repeat(6,1fr); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); margin-bottom:22px; overflow:hidden; } .tile { padding:16px 18px; border-right:1px solid var(--line-soft); display:flex; flex-direction:column; gap:3px; } .tile:last-child { border-right:none; } .tile-l { font-family:var(--tight); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; } .tile-v { font-family:var(--brand); font-size:27px; font-weight:700; color:var(--ink); letter-spacing:-.015em; line-height:1.05; } .tile:nth-child(1) .tile-v, .tile:nth-child(3) .tile-v { color:var(--teal); } .tile-u { font-family:var(--tight); font-size:10.5px; color:var(--ink-faint); } /* Resumen: mapa + empresas */ .resumen-grid { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; } .resumen-grid.no-map { grid-template-columns:1fr; } .map-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); overflow:hidden; } .map-head { display:flex; align-items:baseline; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line-soft); } .map-head span:first-child { font-family:var(--tight); font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; } .map-hint { font-size:11px; color:var(--ink-faint); } #pf-map { height:460px; background:linear-gradient(180deg,#e8f0ea 0%,#dce8e4 100%); } #pf-map .mapboxgl-ctrl-group { border:1px solid rgba(10,31,38,.12); border-radius:10px; overflow:hidden; box-shadow:0 8px 22px -14px rgba(12,52,60,.45); } #pf-map .mapboxgl-ctrl-group button { width:32px; height:32px; } /* Popup de proyecto */ .mapboxgl-popup.mp-pop { z-index:5; } .mapboxgl-popup.mp-pop .mapboxgl-popup-content { font-family:var(--font); padding:0; border-radius:14px; overflow:hidden; background:var(--white); border:1px solid rgba(35,40,43,.10); box-shadow:0 22px 48px -20px rgba(12,52,60,.42), 0 2px 10px rgba(20,40,44,.06); } .mapboxgl-popup.mp-pop .mapboxgl-popup-tip { border-top-color:#fff; } .mapboxgl-popup.mp-pop .mapboxgl-popup-close-button { width:28px; height:28px; top:8px; right:8px; font-size:18px; line-height:26px; color:var(--ink-faint); border-radius:8px; background:transparent; } .mapboxgl-popup.mp-pop .mapboxgl-popup-close-button:hover { color:var(--ink); background:rgba(35,40,43,.06); } .mp { display:flex; flex-direction:column; gap:0; min-width:220px; max-width:268px; } .mp-top { display:flex; align-items:center; gap:6px; padding:12px 14px 0; } .mp-risk { display:inline-flex; align-items:center; gap:5px; font-family:var(--tight); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--r, var(--sig-bajo)); background:color-mix(in srgb, var(--r, var(--sig-bajo)) 12%, #fff); border:1px solid color-mix(in srgb, var(--r, var(--sig-bajo)) 28%, transparent); border-radius:999px; padding:3px 8px 3px 6px; } .mp-risk i { width:7px; height:7px; border-radius:50%; background:var(--r, var(--sig-bajo)); box-shadow:0 0 0 3px color-mix(in srgb, var(--r, var(--sig-bajo)) 22%, transparent); } .mp-cpli { font-family:var(--tight); font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--teal-ink); border:1px solid rgba(14,138,154,.42); border-radius:5px; padding:2px 5px; } .mp-name { display:block; margin:9px 14px 0; font-family:var(--brand); font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.25; } .mp-emp { display:block; margin:3px 14px 0; font-size:12px; font-weight:500; color:var(--ink-soft); } .mp-meta { display:block; margin:2px 14px 0; font-size:11px; color:var(--ink-faint); text-transform:capitalize; } .mp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:8px; margin:12px 14px 0; padding:10px 11px; border-radius:11px; background:var(--paper); border:1px solid var(--line-soft); } .mp-kpis div { min-width:0; display:flex; flex-direction:column; gap:1px; } .mp-kpis em { font-style:normal; font-family:var(--tight); font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mp-kpis small { font-size:9.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; } .mp-cta { display:flex; align-items:center; justify-content:center; gap:7px; margin:13px 14px 14px; height:34px; border-radius:10px; background:var(--teal); color:#fff; font-family:var(--accent); font-size:12.5px; font-weight:600; letter-spacing:.01em; transition:background .14s var(--ease), transform .14s var(--ease); } .mp-cta svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .mp-cta:hover { background:var(--teal-deep); transform:translateY(-1px); } .mp-cta--disabled { background:rgba(35,40,43,.06); color:var(--ink-faint); cursor:default; pointer-events:none; } .emp-col .col-head, .col-head { display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 10px; font-family:var(--tight); font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.1em; } /* Buscador de la columna. Discreto: sin caja hasta que se usa, alineado con la cornisa y sin robarle peso al rótulo ni al contador. La lupa es decorativa; la etiqueta accesible va en el `aria-label` del input. */ .emp-col .col-head { align-items:center; gap:10px; } .emp-q { display:flex; align-items:center; gap:5px; flex:1 1 auto; min-width:0; max-width:190px; margin-inline-start:auto; padding:3px 7px; border:1px solid transparent; border-radius:7px; background:transparent; transition:background .14s ease, border-color .14s ease; } .emp-q:hover { background:rgba(35,40,43,.05); } .emp-q:focus-within { background:var(--surface, #fff); border-color:rgba(14,138,154,.45); box-shadow:0 0 0 3px rgba(14,138,154,.12); } .emp-q svg { width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; opacity:.55; } .emp-q input { flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none; font:inherit; font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--ink); } .emp-q input::placeholder { color:var(--ink-faint); opacity:.75; } /* La X nativa de `type=search` en WebKit desentona con la cornisa; Esc y el boton del estado vacio ya cubren el limpiar. */ .emp-q input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; } .emp-empty .emp-q-clear { display:inline-block; margin-top:8px; padding:4px 10px; border-radius:7px; border:1px solid rgba(35,40,43,.16); background:transparent; font:inherit; font-size:12px; color:var(--ink); cursor:pointer; } .emp-empty .emp-q-clear:hover { background:rgba(35,40,43,.06); } @media (max-width:720px){ .emp-q { max-width:none; } } /* La columna de proyectos NUNCA debe pasar del alto del mapa: por muchos proyectos que haya, el bloque conserva la altura del mapa y la lista scrollea por dentro. `--emp-h` la fija el JS midiendo la .map-card (con ResizeObserver); el fallback cubre el caso sin JS. */ .emp-col { display:flex; flex-direction:column; max-height:var(--emp-h, 508px); min-height:0; } .emp-cards { display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; /* que la rueda no se "escape" al mapa/página al llegar al tope */ overscroll-behavior:contain; padding:2px 2px 2px; margin:0 -2px; scrollbar-width:thin; } .emp-cards::-webkit-scrollbar { width:6px; } .emp-cards::-webkit-scrollbar-thumb { background:rgba(10,31,38,.18); border-radius:99px; } .emp-cards::-webkit-scrollbar-thumb:hover { background:rgba(10,31,38,.3); } /* «Efecto aladino» — carrusel 3D: las tarjetas no se desvanecen en los bordes, giran hacia atrás y se meten DETRÁS de las de enfrente, como un rolodex, en los dos sentidos. La perspectiva vive en el contenedor; el giro de cada tarjeta lo calcula el JS por frame según cuánto la tapa el borde (ver `aladino()` en biblioteca.html). Por qué JS y no `animation-timeline: view()`: con timeline la primera y la última tarjeta nunca alcanzan la fase «plana» —el scroll se acaba antes—, así que quedarían giradas en reposo. Midiendo lo oculto tras el borde, en reposo siempre están planas y solo giran las que realmente se están metiendo. */ /* position:relative para ser el offsetParent de las tarjetas: el JS mide con offsetTop (posición de LAYOUT, inmune a los transforms). Medir con getBoundingClientRect daría la caja ya girada y el cálculo se realimentaría hasta mandar la tarjeta fuera de la lista. */ .emp-cards { position:relative; perspective:900px; perspective-origin:50% 50%; } /* position:relative para que el z-index de la tarjeta que gira SÍ se aplique y quede por detrás de las que siguen planas. El pivote lo fija el JS en el borde por el que se está metiendo (arriba o abajo), no en el centro: así la tarjeta gira anclada al límite y se hunde tras él, en vez de desplazarse y montarse sobre la vecina. */ .emp-cards .emp-wrap { position:relative; backface-visibility:hidden; } .emp-cards .emp-wrap.tuck { will-change:transform, opacity; } .emp-wrap { display:flex; flex-direction:column; border-radius:var(--r-md); transition:box-shadow .2s var(--ease); } .emp-wrap:has(.emp-card.is-open) { box-shadow:var(--shadow-s); } .emp-card { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; width:100%; padding:12px 13px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; text-align:left; font-family:inherit; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s, border-radius .15s; } .emp-card:hover { border-color:rgba(14,138,154,.32); box-shadow:var(--shadow-s); transform:translateY(-1px); } .emp-card.is-open { border-color:rgba(14,138,154,.4); border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none; transform:none; background:linear-gradient(180deg, #fff 0%, var(--paper) 100%); } .emp-dot { width:8px; height:8px; border-radius:50%; flex:none; } /* Ícono de sector (sustituye el puntito). Tinte = color de riesgo, sin ruido. */ .emp-sec { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; opacity:.88; } .emp-sec .sec-ico { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; } .emp-tx { min-width:0; line-height:1.3; } .emp-tx b { display:block; font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .emp-tx span { font-size:10.5px; color:var(--ink-faint); } /* CPLI: petróleo de la firma (--teal-ink), no terracota. El terracota significa riesgo; CPLI es una condición del proyecto, no una alarma. */ .emp-flag { font-family:var(--tight); font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--teal-ink); border:1px solid rgba(14,138,154,.42); border-radius:5px; padding:2px 4px; flex:none; } .emp-chev { font-size:11px; color:var(--ink-faint); line-height:1; transition:transform .2s var(--ease); } .emp-card.is-open .emp-chev { transform:rotate(180deg); color:var(--teal); } .emp-detail { display:flex; flex-direction:column; gap:8px; padding:10px 10px 12px; background:var(--paper); border:1px solid rgba(14,138,154,.35); border-top:none; border-radius:0 0 var(--r-md) var(--r-md); animation:emp-detail-in .22s cubic-bezier(.2,.9,.3,1); } .emp-detail[hidden] { display:none; } @keyframes emp-detail-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } .emp-empty { font-size:11.5px; color:var(--ink-faint); padding:8px 4px; } .emp-prj { display:flex; flex-direction:column; gap:8px; padding:11px 12px; background:var(--white); border:1px solid var(--line); border-radius:10px; transition:border-color .16s, box-shadow .16s, background .25s; } .emp-prj.is-active { border-color:var(--teal); box-shadow:0 0 0 2px rgba(14,138,154,.18); animation:emp-flash .55s ease; } @keyframes emp-flash { 0% { background:rgba(14,138,154,.14); } 100% { background:var(--white); } } .emp-prj-h { display:flex; align-items:flex-start; gap:8px; } .emp-prj-tx { min-width:0; flex:1; line-height:1.3; } .emp-prj-tx b { display:block; font-size:13px; font-weight:650; color:var(--ink); } .emp-prj-tx span { font-size:10.5px; color:var(--ink-faint); } .emp-prj-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; } .emp-prj-kpis div { display:flex; flex-direction:column; gap:1px; padding:6px 7px; background:var(--paper-2, var(--paper)); border-radius:7px; } .emp-prj-kpis em { font-style:normal; font-family:var(--tight); font-size:12.5px; font-weight:650; color:var(--ink); } .emp-prj-kpis small { font-family:var(--tight); font-size:8.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; } .emp-prj-kpis .red em { color:var(--terra); } .emp-prj-kpis .ok em { color:#1d6d75; } /* Contexto DENUE/USV dentro de la ficha de empresa. Se reusa prjCtxBlock() de la pestaña Proyectos, pero allá es una BANDA de la tarjeta ancha (padding y fondo propios, etiqueta de 76px). Aquí la columna es angosta y la ficha ya tiene su padding, así que se integra como una fila más: sin banda, con separador y etiqueta corta. */ .emp-prj .prj-ctx { padding:8px 0 0; background:transparent; gap:5px; border-top:1px solid var(--line-soft); } .emp-prj .prj-ctx-row { grid-template-columns:58px 1fr; gap:6px; } .emp-prj .prj-ctx-k { font-size:8.5px; letter-spacing:.04em; } /* Envuelve en 2 líneas en vez de recortar: prjCtxBlock ya acorta el texto a 42 caracteres (medida de la tarjeta ancha de Proyectos), así que el nowrap de allá lo truncaba OTRA vez aquí y se comía el conteo — "…en tiendas de… · 31…". El dato que importa es cuántas unidades, y va al final. */ .emp-prj .prj-ctx-v { font-size:11.5px; font-weight:600; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .emp-prj-open { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; border-radius:8px; background:var(--teal); color:#fff; font-family:var(--accent); font-size:12px; font-weight:600; text-decoration:none; transition:background .14s, transform .14s; } .emp-prj-open svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .emp-prj-open:hover { background:var(--teal-deep, #0a6f7c); transform:translateY(-1px); } .emp-prj-open--off { background:rgba(35,40,43,.06); color:var(--ink-faint); pointer-events:none; } .emp-goto { align-self:stretch; margin-top:2px; height:30px; border-radius:8px; border:1px solid var(--line); background:transparent; font-family:var(--accent); font-size:11.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:border-color .14s, color .14s, background .14s; } .emp-goto:hover { border-color:var(--teal); color:var(--teal-ink, var(--teal)); background:var(--teal-soft); } /* ── Vista Proyectos ───────────────────────────────────────────────────── */ .filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; align-items:center; } /* Chip del término activo: la búsqueda vive en el panel de la barra maestra; aquí solo se refleja y se puede limpiar (evita el segundo buscador duplicado). */ .wb-qchip { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; font-family:var(--font); font-size:12.5px; color:var(--teal-ink); background:var(--teal-soft); border:1px solid rgba(14,138,154,.28); border-radius:var(--pill); cursor:pointer; transition:background .14s, border-color .14s; } .wb-qchip[hidden] { display:none; } .wb-qchip b { font-weight:600; } .wb-qchip span { opacity:.65; font-size:11px; } .wb-qchip:hover { background:rgba(14,138,154,.16); border-color:rgba(14,138,154,.45); } .wb-qchip:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } .wb-qchip--cpli { color:var(--teal-ink); background:var(--teal-soft); border-color:rgba(14,138,154,.35); } .wb-qchip--cpli:hover { background:rgba(14,138,154,.16); border-color:rgba(14,138,154,.5); } .wb-search { position:relative; display:flex; align-items:center; min-width:260px; flex:1 1 260px; max-width:420px; } .wb-search svg { position:absolute; left:12px; width:15px; height:15px; stroke:var(--ink-faint); fill:none; stroke-width:2; pointer-events:none; } .wb-search input { width:100%; height:38px; padding:0 12px 0 35px; font-family:var(--font); font-size:13px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:var(--pill); outline:none; transition:border-color .15s; } .wb-search input::placeholder { color:var(--ink-faint); } .wb-search input:focus { border-color:var(--teal); } .wb-filter { height:38px; padding:0 32px 0 13px; font-family:var(--font); font-size:12.5px; color:var(--ink-soft); background:var(--white) url("data:image/svg+xml;utf8,") no-repeat right 11px center; border:1px solid var(--line); border-radius:var(--pill); outline:none; appearance:none; cursor:pointer; } .wb-filter:focus { border-color:var(--teal); } /* Agrupación por portafolio/cliente */ .prj-groups { display:flex; flex-direction:column; gap:30px; } .prj-groups[hidden] { display:none; } .prj-group-h { display:flex; align-items:center; gap:10px; padding:0 2px 12px; margin-bottom:2px; border-bottom:1px solid var(--line); } .pgh-dot { width:9px; height:9px; border-radius:50%; flex:none; } .pgh-name { font-family:var(--brand); font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em; } .pgh-meta { margin-left:auto; font-family:var(--tight); font-size:11.5px; color:var(--ink-faint); } .prj-group-h .emp-flag { position:relative; top:0; } .prj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; } .prj { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .prj:hover { border-color:rgba(14,138,154,.32); box-shadow:0 16px 40px -22px rgba(12,52,60,.24); transform:translateY(-3px); } .prj-head { padding:15px 16px 13px; border-bottom:1px solid var(--line-soft); } .prj-top { display:flex; align-items:center; gap:8px; margin-bottom:9px; } .chip { font-family:var(--accent); font-size:10px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:var(--pill); background:var(--teal-soft); color:var(--teal-ink); border:1px solid rgba(14,138,154,.16); } .chip-geo { background:var(--paper-2); color:var(--ink-faint); border-color:var(--line); text-transform:none; letter-spacing:0; } .prj-top .grow { flex:1; } .risk-dot { width:9px; height:9px; border-radius:50%; flex:none; } .prj-name { font-family:var(--brand); font-size:16.5px; font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--ink); } .prj-sub { font-family:var(--tight); font-size:11px; color:var(--ink-faint); margin-top:4px; } .prj-kpis { display:grid; grid-template-columns:repeat(5,1fr); } .dk { display:flex; flex-direction:column; gap:2px; padding:12px 10px; border-right:1px solid var(--line-soft); min-width:0; } .dk:last-child { border-right:none; } .dk b { font-family:var(--tight); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dk span { font-family:var(--tight); font-size:9px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; } .dk.red b { color:var(--terra); } .dk.ok b { color:#1d6d75; } @media (max-width:720px){ .prj-kpis { grid-template-columns:repeat(3,1fr); } .dk:nth-child(3n){ border-right:none; } .dk{ border-bottom:1px solid var(--line-soft); } } .prj-ctx { display:flex; flex-direction:column; gap:6px; padding:11px 14px 12px; border-top:1px solid var(--line-soft); background:var(--paper); } .prj-ctx-row { display:grid; grid-template-columns:76px 1fr; gap:8px; align-items:baseline; min-width:0; } .prj-ctx-k { font-family:var(--tight); font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .prj-ctx-v { font-size:12px; font-weight:500; color:var(--ink); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .prj-foot { display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--paper); border-top:1px solid var(--line-soft); } .prj-foot .meta { flex:1; font-family:var(--tight); font-size:11px; color:var(--ink-faint); } .prj-foot .meta b { color:var(--ink-soft); font-weight:600; } .btn-ghost, .btn-open { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px; font-family:var(--accent); font-weight:600; font-size:12px; border-radius:var(--pill); cursor:pointer; transition:background .15s, border-color .15s, color .15s; } .btn-ghost { background:transparent; color:var(--ink-soft); border:1px solid var(--line); } .btn-ghost:hover { background:var(--white); border-color:var(--ink-faint); color:var(--ink); } .btn-open { background:var(--teal); color:#fff; border:1px solid var(--teal); } .btn-open:hover { background:var(--teal-deep); border-color:var(--teal-deep); } .btn-open svg, .btn-ghost svg { width:13px; height:13px; stroke:currentColor; stroke-width:2.2; fill:none; } .prj-runs { border-top:1px solid var(--line-soft); background:var(--paper); } .prj-runs[hidden] { display:none; } .run { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; padding:9px 15px; border-bottom:1px solid var(--line-soft); font-size:12px; } .run:last-child { border-bottom:none; } .run .rd { width:7px; height:7px; border-radius:50%; flex:none; } .run-tx { min-width:0; line-height:1.35; } .run-tx b { font-family:var(--tight); font-weight:600; color:var(--ink); } .run-tx span { color:var(--ink-faint); font-size:10.5px; } .run-pob { font-family:var(--tight); font-size:12px; color:var(--ink-soft); text-align:right; } .run a { color:var(--teal); font-weight:600; font-size:11.5px; white-space:nowrap; } .run a:hover { color:var(--teal-deep); text-decoration:underline; } /* ── Análisis recientes (tabla) ────────────────────────────────────────── */ .run-table { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); overflow:hidden; } /* 6 columnas desde que el historial dice QUIÉN elaboró cada corrida ("Elaboró" entre Población y Fecha): saber de quién es un análisis es tan operativo como saber cuándo se corrió. */ .rt-head, .rt-row { display:grid; grid-template-columns:1.4fr 1.4fr .7fr 1fr .8fr auto; gap:16px; align-items:center; padding:12px 18px; } .rt-head { font-family:var(--tight); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); border-bottom:1px solid var(--line); background:var(--paper); } .rt-row { border-bottom:1px solid var(--line-soft); color:var(--ink); transition:background .12s; } .rt-row:last-child { border-bottom:none; } .rt-row:hover { background:var(--paper); } .rt-name { font-family:var(--tight); font-weight:600; font-size:13.5px; } .rt-emp { font-size:12px; color:var(--ink-soft); } .rt-pob { font-family:var(--tight); font-size:13px; } .rt-date { font-family:var(--tight); font-size:12px; color:var(--ink-faint); } .rt-autor { font-family:var(--tight); font-size:12.5px; min-width:0; display:flex; flex-direction:column; gap:1px; } .rt-autor small { font-size:10.5px; color:var(--ink-faint); letter-spacing:.01em; } .rt-autor.is-yo { color:var(--teal-ink); font-weight:600; } /* «Sin declarar» se ve como lo que es: un dato que falta, no un nombre. En cursiva y atenuado nadie lo confunde con una persona llamada así. */ .rt-autor.is-sindecl, .pt-sindecl, .pt-area.is-sindecl { color:var(--ink-faint); font-style:italic; } .pt-sindecl { font-family:var(--tight); } .pt-sindecl-btn { background:none; border:none; padding:0; cursor:pointer; text-align:left; text-decoration:underline dotted; text-underline-offset:2px; font-size:inherit; } .pt-sindecl-btn:hover { color:var(--teal-ink); } .pt-area { display:block; font-family:var(--tight); font-size:10.5px; color:var(--ink-faint); letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pt-corriostack { display:flex; flex-direction:column; gap:1px; min-width:0; } .rt-go { font-family:var(--accent); font-weight:600; font-size:12px; color:var(--teal); white-space:nowrap; } /* ── Estados vacíos / skeleton ─────────────────────────────────────────── */ .empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:11px; padding:60px 24px; text-align:center; border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--ink-faint); background:var(--white); } .empty svg { width:34px; height:34px; stroke:var(--ink-faint); stroke-width:1.4; fill:none; } .empty b { font-family:var(--brand); font-size:16px; color:var(--ink-soft); font-weight:600; } .empty p { font-size:12.5px; max-width:340px; line-height:1.5; } .empty .side-new { width:auto; padding:9px 16px; } .skeleton { border-radius:var(--r-lg); background:linear-gradient(100deg,var(--paper-2) 30%,#f4f2ec 50%,var(--paper-2) 70%); background-size:200% 100%; animation:sk 1.2s linear infinite; height:158px; border:1px solid var(--line-soft); } @keyframes sk { to { background-position:-200% 0; } } /* ── Señales de carga del arranque ────────────────────────────────────────── Placeholders indeterminados: ocupan el hueco exacto que va a ocupar el dato, para que nada salte cuando llega, y NO fingen ningún porcentaje ni número. Los KPIs sí son seis fijos (el bloque siempre trae seis), así que reservar seis celdas no promete nada que no vaya a cumplirse; la lista de proyectos usa tres barras genéricas porque su cantidad aún se desconoce. */ .sk-bar { border-radius:6px; background:linear-gradient(100deg,var(--paper-2) 30%,#f4f2ec 50%,var(--paper-2) 70%); background-size:200% 100%; animation:sk 1.2s linear infinite; } .tile--sk { gap:8px; justify-content:center; } .tile--sk .sk-bar:nth-child(1) { height:9px; width:62%; } .tile--sk .sk-bar:nth-child(2) { height:20px; width:78%; } .emp-card--sk { display:flex; align-items:center; gap:10px; padding:11px 12px; } .emp-card--sk .sk-bar:nth-child(1) { height:22px; width:22px; border-radius:6px; flex:none; } .emp-card--sk .sk-bar:nth-child(2) { height:11px; flex:1; } /* Con movimiento reducido no hay brillo viajando: el hueco se marca y ya. */ @media (prefers-reduced-motion: reduce){ .sk-bar, .skeleton { animation:none; } } @media (max-width:1080px){ .resumen-grid { grid-template-columns:1fr; } #pf-map { height:340px; } .tiles { grid-template-columns:repeat(3,1fr); } .tile:nth-child(3n){border-right:none;} } @media (max-width:760px){ /* la barra maestra se vuelve drawer (masterbar.css); el contenido ocupa todo */ .shell > .main { margin-left:0; } .main { padding:20px; } .tiles { grid-template-columns:repeat(2,1fr); } .tile:nth-child(2n){border-right:none;} } /* ══════════════════════════════════════════════════════════════════════ BIBLIOTECA v16 — vistas propias de Proyectos: conmutador (tabla/tarjetas/ mapa), agrupación, tabla densa, mapa+lista, ficha-drawer y comparador. La navegación del análisis (Diagnóstico/MISSE/…) vive AHORA en la ficha, no en la barra global: el Workspace solo navega la biblioteca. ══════════════════════════════════════════════════════════════════════ */ /* ── Conmutadores en la barra de filtros (vista + agrupar) ─────────────── */ .wb-seg { display:inline-flex; align-items:center; height:38px; padding:3px; gap:2px; background:var(--white); border:1px solid var(--line); border-radius:var(--pill); } .wb-seg--group { margin-left:auto; } .wb-seg-lb { font-family:var(--tight); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); padding:0 8px 0 6px; } .wb-seg button { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:none; background:transparent; border-radius:var(--pill); cursor:pointer; font-family:var(--accent); font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:background .14s, color .14s; } .wb-seg button svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; } .wb-seg button:hover { color:var(--ink); } .wb-seg button.on { background:var(--teal-soft); color:var(--teal-ink); } .wb-seg--group.is-off { opacity:.45; } .wb-seg button:disabled { cursor:default; } .wb-seg button:focus-visible { outline:2px solid var(--teal); outline-offset:1px; } @media (max-width:720px){ .wb-seg button span { display:none; } .wb-seg--group .wb-seg-lb { display:none; } } /* ── Chips del panel de la barra maestra (agrupar por) ─────────────────── */ .mb-list--wrap { flex-direction:row; flex-wrap:wrap; gap:6px; } .mb-chip { border:1px solid var(--line); background:transparent; border-radius:var(--pill); font-family:var(--accent); font-size:12px; font-weight:600; color:var(--ink-soft); padding:6px 12px; cursor:pointer; transition:background .14s, border-color .14s, color .14s; } .mb-chip:hover { border-color:rgba(14,138,154,.4); color:var(--ink); } .mb-chip.on { background:var(--teal-soft); border-color:rgba(14,138,154,.4); color:var(--teal-ink); } .mb-chip:disabled { opacity:.4; cursor:default; } .mb-row[disabled] { opacity:.4; pointer-events:none; } html.mb-dark .mb-chip { color:rgba(242,244,237,.8); border-color:rgba(242,244,237,.16); } html.mb-dark .mb-chip.on { background:rgba(74,156,165,.22); border-color:rgba(102,184,192,.4); color:#86d6e0; } /* ── Vista TABLA (densa, ordenable, agrupable) ─────────────────────────── */ .ptable { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); overflow:hidden; } .ptable[hidden] { display:none; } .pt-gh { display:flex; align-items:center; gap:9px; padding:12px 18px 10px; background:var(--paper); border-bottom:1px solid var(--line); } .pt-gh:not(:first-child) { border-top:1px solid var(--line); } .pt-gh .pgh-dot { width:8px; height:8px; border-radius:50%; flex:none; } .pt-gh b { font-family:var(--brand); font-size:14px; font-weight:600; color:var(--ink); } .pt-gh small { margin-left:auto; font-family:var(--tight); font-size:11px; color:var(--ink-faint); } .pt-head, .pt-row { display:grid; grid-template-columns:24px minmax(0,1.7fr) minmax(0,1.05fr) minmax(0,.85fr) .72fr .64fr .52fr .5fr .8fr .64fr minmax(0,.8fr) 86px; gap:12px; align-items:center; padding:9px 18px; } .pt-head { background:var(--white); border-bottom:1px solid var(--line); user-select:none; } .pt-head span { display:flex; align-items:center; min-width:0; } .pt-head .pt-num { justify-content:flex-end; } .pt-sort { border:none; background:transparent; cursor:pointer; padding:0; font-family:var(--tight); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); display:inline-flex; align-items:center; gap:3px; transition:color .14s; } .pt-sort:hover { color:var(--ink); } .pt-sort.sorted { color:var(--teal-ink); } .pt-sort.sorted::after { content:'▾'; font-size:8px; } .pt-sort.sorted.asc::after { content:'▴'; } .pt-sort:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } .pt-row { border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background .12s; font-size:12.5px; } .pt-row:last-child { border-bottom:none; } .pt-row:hover { background:var(--paper); } .pt-chk { display:flex; align-items:center; justify-content:center; } .pt-chk input { width:16px; height:16px; accent-color:var(--teal); cursor:pointer; } .pt-name { min-width:0; } .pt-name b { display:flex; align-items:center; gap:7px; font-family:var(--tight); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pt-name b .risk-dot { width:8px; height:8px; } .pt-name small { display:block; font-family:var(--tight); font-size:10.5px; color:var(--ink-faint); margin-top:1px; } .pt-txt { font-size:12px; color:var(--ink-soft); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pt-cap { text-transform:capitalize; } .pt-faint { color:var(--ink-faint); font-family:var(--tight); } .pt-num { font-family:var(--tight); font-size:12.5px; color:var(--ink); text-align:right; justify-self:end; white-space:nowrap; } .pt-num i { font-style:normal; color:var(--ink-faint); font-size:10px; } .pt-num.red { color:var(--terra); font-weight:600; } .pt-txt.red { color:var(--terra); font-weight:600; } .pt-txt.ok { color:#1d6d75; } .pt-mid { display:flex; justify-content:center; } .pt-open { justify-self:end; } .pt-openbtn { display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:var(--pill); background:var(--teal); color:#fff; font-family:var(--accent); font-size:11px; font-weight:600; transition:background .14s; } .pt-openbtn:hover { background:var(--teal-deep); } .pt-noan { font-family:var(--tight); font-size:10.5px; color:var(--ink-faint); } @media (max-width:1080px){ .pt-head .pt-txt:nth-child(4), .pt-row .pt-txt.pt-cap { display:none; } /* oculta Sector */ } @media (max-width:900px){ .pt-head, .pt-row { grid-template-columns:24px minmax(0,1.6fr) minmax(0,1fr) .7fr .5fr .8fr 86px; } .pt-head span:nth-child(6), .pt-head span:nth-child(7), .pt-head span:nth-child(10), .pt-row > *:nth-child(6), .pt-row > *:nth-child(7), .pt-row > *:nth-child(10) { display:none; } /* área, %ind, últ. */ } /* ── Tarjeta clicable (abre la ficha) ──────────────────────────────────── */ .prj.is-clickable { cursor:pointer; } /* ── Vista MAPA + lista (pin ↔ ficha; misma regla lngLat del Resumen) ──── */ .mv-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; } .mv-grid[hidden] { display:none; } .mv-map-card { position:sticky; top:calc(var(--topbar-h) + 14px); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); overflow:hidden; } #pv-map { height:calc(100vh - 230px); min-height:420px; background:linear-gradient(180deg,#e8f0ea 0%,#dce8e4 100%); } #pv-map .mapboxgl-ctrl-group { border:1px solid rgba(10,31,38,.12); border-radius:10px; overflow:hidden; box-shadow:0 8px 22px -14px rgba(12,52,60,.45); } #pv-map .mapboxgl-ctrl-group button { width:32px; height:32px; } .mv-nomap { display:grid; place-items:center; height:100%; padding:30px; text-align:center; font-size:12.5px; color:var(--ink-faint); } .mv-side { display:flex; flex-direction:column; } .mv-list { display:flex; flex-direction:column; gap:9px; max-height:calc(100vh - 200px); overflow:auto; padding:2px; } .mv-item { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:11px 13px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; } .mv-item:hover { border-color:rgba(14,138,154,.32); box-shadow:var(--shadow-s); transform:translateY(-1px); } .mv-item.on { border-color:var(--teal); box-shadow:0 0 0 2px rgba(14,138,154,.18); } .mv-item:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } .mv-item.is-off { opacity:.78; } .mv-item .emp-dot { width:9px; height:9px; border-radius:50%; flex:none; } .mv-item .emp-sec { width:18px; height:18px; } .mv-item .tx { min-width:0; line-height:1.3; } .mv-item .tx b { display:block; font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mv-item .tx span { font-size:10.5px; color:var(--ink-faint); } .mv-kv { font-family:var(--tight); font-size:11.5px; color:var(--ink-soft); text-align:right; white-space:nowrap; line-height:1.3; } .mv-offmap { margin-top:14px; } .mv-offmap h3 { font-family:var(--tight); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); padding:4px 2px 9px; } .mv-offmap .mv-item { margin-bottom:9px; } @media (max-width:1080px){ .mv-grid { grid-template-columns:1fr; } .mv-map-card { position:static; } #pv-map { height:360px; } .mv-list { max-height:none; } } /* ── Ficha de proyecto (drawer lateral) ────────────────────────────────── */ .dw-scrim { position:fixed; inset:0; background:rgba(10,31,38,.35); z-index:80; opacity:0; transition:opacity .2s; } .dw-scrim.open { opacity:1; } .dw-scrim[hidden] { display:none; } .dw { position:fixed; top:0; right:0; bottom:0; width:min(480px,94vw); z-index:81; background:var(--paper); border-left:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(12,52,60,.4); transform:translateX(102%); transition:transform .26s var(--ease); display:flex; flex-direction:column; } .dw.open { transform:none; } .dw[hidden] { display:none; } .dw-head { display:flex; align-items:flex-start; gap:10px; padding:18px 20px 14px; background:var(--white); border-bottom:1px solid var(--line); } .dw-head .risk-dot { width:10px; height:10px; border-radius:50%; margin-top:6px; flex:none; } .dw-head-tx { flex:1; min-width:0; } .dw-head-tx h2 { font-family:var(--brand); font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--ink); } .dw-head-tx p { font-size:12px; color:var(--ink-faint); margin-top:3px; text-transform:capitalize; } .dw-head-tx .dw-sub2 { text-transform:none; font-family:var(--tight); } .dw-cpli { color:var(--teal-ink); font-weight:700; } .dw-x { border:none; background:transparent; cursor:pointer; color:var(--ink-faint); font-size:16px; width:30px; height:30px; border-radius:8px; flex:none; } .dw-x:hover { background:var(--paper); color:var(--ink); } .dw-body { flex:1; overflow:auto; padding:16px 20px 26px; display:flex; flex-direction:column; gap:16px; } .dw-sec-h { font-family:var(--tight); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:8px; } .dw-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .dw-kpis > div { background:var(--white); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:1px; min-width:0; } .dw-kpis em { font-style:normal; font-family:var(--tight); font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dw-kpis small { font-family:var(--tight); font-size:9px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; } .dw-kpis .red em { color:var(--terra); } .dw-kpis .ok em { color:#1d6d75; } /* Contexto: contenedor ANCHO, se deja envolver (no truncar). prjCtxBlock ya acorta el texto server-side; aquí no re-truncamos ni comemos el conteo. */ .dw-ctx { background:var(--white); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:9px; } .dw-ctx-row { display:grid; grid-template-columns:76px 1fr; gap:10px; align-items:baseline; } .dw-ctx-row .k { font-family:var(--tight); font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .dw-ctx-row .v { font-size:12.5px; font-weight:500; color:var(--ink); line-height:1.4; white-space:normal; } .dw-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .dw-act { display:flex; align-items:center; gap:9px; padding:11px 12px; background:var(--white); border:1px solid var(--line); border-radius:10px; font-family:var(--accent); font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:border-color .14s, color .14s; } .dw-act svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none; opacity:.8; } .dw-act:hover { border-color:var(--teal); color:var(--teal-ink); } .dw-act.primary { grid-column:1/-1; background:var(--teal); border-color:var(--teal); color:#fff; justify-content:center; } .dw-act.primary:hover { background:var(--teal-deep); } .dw-empty { grid-column:1/-1; font-size:12.5px; color:var(--ink-faint); line-height:1.5; } .dw-runs { display:flex; flex-direction:column; } .dw-run { display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; padding:9px 2px; border-bottom:1px solid var(--line-soft); font-size:12px; } .dw-run:last-child { border-bottom:none; } .dw-run .rd { width:7px; height:7px; border-radius:50%; flex:none; } .dw-run-tx { min-width:0; line-height:1.3; } .dw-run-tx b { font-family:var(--tight); font-weight:600; color:var(--ink); } .dw-run-tx small { display:block; font-size:10px; color:var(--ink-faint); } .dw-run-pob { font-family:var(--tight); font-size:11.5px; color:var(--ink-soft); white-space:nowrap; } .dw-run a { color:var(--teal); font-weight:600; font-size:11.5px; white-space:nowrap; } .dw-run a:hover { color:var(--teal-deep); } .dw-cmp-toggle { margin-top:2px; height:38px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--white); font-family:var(--accent); font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:border-color .14s, color .14s, background .14s; } .dw-cmp-toggle:hover { border-color:var(--teal); color:var(--teal-ink); } .dw-cmp-toggle.on { background:var(--teal-soft); border-color:rgba(14,138,154,.4); color:var(--teal-ink); } /* ── Comparador: bandeja + modal ───────────────────────────────────────── */ .cmp-tray { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:75; display:flex; align-items:center; gap:12px; padding:10px 12px 10px 18px; background:var(--navy); color:#f2f4ed; border-radius:var(--pill); box-shadow:var(--shadow-m); } .cmp-tray[hidden] { display:none; } .cmp-tray-n { font-family:var(--tight); font-size:12.5px; font-weight:600; } .cmp-tray button { border:none; border-radius:var(--pill); font-family:var(--accent); font-weight:700; font-size:12.5px; padding:8px 16px; cursor:pointer; transition:background .14s, opacity .14s; } .cmp-go { background:var(--teal); color:#fff; } .cmp-go:hover { background:var(--teal-bright); } .cmp-go:disabled { opacity:.4; cursor:default; } .cmp-clear { background:rgba(242,244,237,.14); color:#f2f4ed; } .cmp-clear:hover { background:rgba(242,244,237,.24); } .cmp-modal { position:fixed; inset:0; z-index:82; display:grid; place-items:center; padding:26px; background:rgba(10,31,38,.4); opacity:0; transition:opacity .2s; } .cmp-modal.open { opacity:1; } .cmp-modal[hidden] { display:none; } .cmp-modal-card { width:min(960px,96vw); max-height:88vh; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-m); overflow:hidden; transform:translateY(8px); transition:transform .2s var(--ease); } .cmp-modal.open .cmp-modal-card { transform:none; } .cmp-modal-h { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--line); } .cmp-modal-h b { font-family:var(--brand); font-size:16px; font-weight:600; color:var(--ink); } .cmp-scroll { overflow:auto; } .cmp-grid { display:grid; min-width:560px; } .cmp-grid > div { padding:11px 16px; border-bottom:1px solid var(--line-soft); font-size:12.5px; display:flex; align-items:center; color:var(--ink); } .cmp-grid .cmp-h { background:var(--paper); align-items:flex-start; flex-direction:column; gap:2px; position:sticky; top:0; } .cmp-grid .cmp-rowlab { font-family:var(--tight); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); background:var(--paper); } .cmp-grid .cmp-ph b { font-family:var(--brand); font-size:14px; font-weight:600; } .cmp-grid .cmp-ph small { color:var(--ink-faint); font-size:10.5px; text-transform:capitalize; } .cmp-open { color:var(--teal); font-weight:600; font-size:11px; margin-top:2px; } .cmp-open:hover { color:var(--teal-deep); } .cmp-grid .best { color:var(--teal-ink); font-weight:700; } .cmp-grid .worst { color:var(--terra); font-weight:700; } .cmp-risk { display:inline-flex; align-items:center; gap:6px; } .cmp-risk i { width:8px; height:8px; border-radius:50%; } /* ══ Saludo + vistas de actividad ══════════════════════════════════════════ Paleta: rampa del teal petróleo de la casa (--teal-wash → --teal-ink) sobre papel cálido. Nada de verde GitHub: la rejilla es un dato del portafolio, no una cita de otra herramienta. Las analíticas viven en vistas propias del rail y se cargan al entrar. */ /* Héroe centrado: es lo primero que ve el consultor al entrar, y en esta vista hace de encabezado (go() oculta .page-head). De ahí el tamaño: compite con un h1 porque ES el h1. */ .saludo-bar { display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; margin:6px 0 20px; } .saludo { font-family:var(--brand); font-size:29px; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1.15; } .saludo-btn { font-family:var(--tight); font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--teal-ink); background:var(--white); border:1px solid var(--line); border-radius:var(--pill); padding:5px 13px; cursor:pointer; transition:background .14s, border-color .14s; } .saludo-btn:hover { background:var(--teal-wash); border-color:var(--teal-bright); } .saludo-btn:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } .saludo-btn[aria-expanded="true"] { background:var(--teal-wash); border-color:var(--teal-bright); } .saludo-btn::after { content:'▾'; font-size:8px; margin-left:5px; display:inline-block; transition:transform .16s var(--ease); } .saludo-btn[aria-expanded="true"]::after { transform:rotate(180deg); } /* Ancho de la columna de contenido (no max-width 860 centrado): cuelga del flujo del resumen, no del saludo. Hairline superior = sección personal. */ /* El panel es el LIENZO del dashboard: base BLANCA. Las subcards no son más blancas que el lienzo (antes flotaban en blanco sobre papel); ahora son "glass" —translúcidas, apenas más tintadas que el blanco— para diferenciarse con sutileza (ver .act-card). */ .act-panel { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); padding:22px 24px; margin:28px 0 8px; border-top:2px solid var(--teal-wash); } .act-panel[hidden] { display:none; } .act-panel--view { margin:0; } /* KPIs como fila de stat-cards, no números sueltos. auto-fit para que 3 (admin, bitácora) o 4 (tu actividad) llenen su fila y en móvil se apilen. */ .act-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px; } .act-stat { display:flex; flex-direction:column; gap:3px; min-width:0; background:var(--glass); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); border-radius:var(--r-md); box-shadow:var(--glass-shadow); padding:12px 14px; } .act-stat-n { font-family:var(--tight); font-size:22px; font-weight:600; color:var(--teal-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; } .act-stat-l { font-family:var(--tight); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); } .act-box { min-width:0; } .act-box h3, .act-card h3, .act-head h3 { font-family:var(--tight); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:9px; } .act-empty { font-size:12px; color:var(--ink-faint); font-family:var(--tight); } /* ══ Subcards del dashboard de actividad ═══════════════════════════════════ Cada analítica es su propia tarjeta —borde, sombra y aire de la firma— sobre el lienzo del panel. FLEX, no grid auto-fit: con las tarjetas a fila entera (--wide) el grid instanciaba todas las columnas que cabían y las normales se quedaban en 260px dejando columnas vacías a la derecha. Con flex-wrap + flex-grow, las tarjetas de una fila CRECEN hasta llenar el ancho; las anchas toman la fila entera. En móvil una por fila. Su scroll horizontal vive dentro de la tarjeta: la página nunca scrollea en horizontal. */ .act-cards { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; } .act-card { flex:1 1 260px; min-width:0; background:var(--glass); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); border-radius:var(--r-lg); box-shadow:var(--glass-shadow); padding:15px 17px; } .act-card--wide { flex-basis:100%; } /* Actividad personal + firma: una retícula editorial explícita reemplaza el flex-wrap de las vistas heredadas. El calendario tiene jerarquía, los módulos pares comparten altura y ningún hueco depende de cuánto texto tenga una card. */ .act-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:2px 2px 20px; } .act-intro > div { min-width:0; } .act-intro > div > span { display:block; margin-bottom:7px; font-family:var(--tight); font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--teal); } .act-intro h2 { margin:0; font-family:var(--brand); font-size:clamp(24px,2.3vw,32px); font-weight:600; letter-spacing:-.035em; line-height:1.05; color:var(--ink); } .act-intro p { max-width:65ch; margin:8px 0 0; color:var(--ink-soft); font-size:12.5px; line-height:1.55; } /* Lado derecho de la cabecera admin: periodo + botón de re-consulta. */ .act-intro-side { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; } .act-intro-side > strong { padding:7px 11px; border:1px solid var(--line-soft); border-radius:var(--pill); background:var(--paper); color:var(--ink-faint); font-family:var(--tight); font-size:10px; font-weight:600; white-space:nowrap; } .act-refresh { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border:1px solid var(--line-soft); border-radius:var(--pill); background:var(--white); color:var(--teal-ink); font-family:var(--tight); font-size:10.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .14s, background .14s, color .14s; } .act-refresh svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .act-refresh:hover { border-color:var(--teal); background:var(--teal-wash); } .act-refresh:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } .act-refresh.is-loading { opacity:.7; cursor:default; } .act-refresh.is-loading svg { animation:layer-spin .8s linear infinite; } @media (prefers-reduced-motion: reduce){ .act-refresh.is-loading svg { animation:none; } } .act-dashboard { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:stretch; } .act-dashboard .act-card { display:flex; flex-direction:column; min-width:0; height:100%; padding:19px 20px; background:rgba(250,249,244,.72); border-color:var(--line-soft); box-shadow:0 12px 32px -28px rgba(10,31,38,.45); backdrop-filter:none; } .act-dashboard .act-card--calendar { grid-column:1 / -1; min-height:220px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,248,.72)); } .act-dashboard--personal .act-card--signals, .act-dashboard--personal .act-card--sectors, .act-dashboard--personal .act-card--size { grid-column:span 4; } .act-dashboard--admin .act-card--radar { grid-column:span 7; } .act-dashboard--admin .act-card--size { grid-column:span 5; } .act-dashboard--admin .act-card--composition, .act-dashboard--admin .act-card--consultants { grid-column:1 / -1; } .act-card-head { display:flex; align-items:flex-start; gap:11px; margin-bottom:18px; } .act-card-icon { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; color:var(--teal-ink); background:var(--teal-soft); } .act-card-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .act-card-head h3 { margin:1px 0 0; color:var(--ink); font-family:var(--tight); font-size:12.5px; font-weight:700; letter-spacing:0; line-height:1.25; text-transform:none; } .act-card-head p { max-width:62ch; margin:4px 0 0; color:var(--ink-faint); font-size:10.5px; line-height:1.45; } /* Nuevo gráfico de señales. Todas las barras comparten denominador (proyectos atendidos), por lo que la comparación visual sí es legítima. */ .act-signal-chart { display:flex; flex-direction:column; justify-content:center; gap:17px; flex:1; } .act-signal-row { display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:8px 10px; align-items:end; } .act-signal-row > span { display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .act-signal-row > span b { color:var(--ink-soft); font-family:var(--tight); font-size:11px; font-weight:600; } .act-signal-row > span em { color:var(--ink-faint); font-family:var(--tight); font-size:9.5px; font-style:normal; } .act-signal-row > i { height:8px; overflow:hidden; border-radius:var(--pill); background:var(--paper-2); } .act-signal-row > i > em { display:block; height:100%; min-width:0; border-radius:inherit; background:var(--teal); } .act-signal-row > strong { grid-column:2; grid-row:1 / span 2; align-self:center; text-align:right; color:var(--teal-ink); font-family:var(--tight); font-size:12px; font-variant-numeric:tabular-nums; } .act-signal-row--risk > i > em { background:var(--terra); } .act-signal-row--cpli > i > em { background:var(--teal-ink); } .act-signal-row--water > i > em { background:#4f91a0; } /* Mezcla sectorial con etiquetas directas: no exige saltar entre leyenda y dato. */ .act-sector-chart { display:flex; flex-direction:column; justify-content:center; gap:10px; flex:1; } .act-sector-row { display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:4px 9px; align-items:center; } .act-sector-row > span { overflow:hidden; color:var(--ink-soft); font-family:var(--tight); font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; } .act-sector-row > b { color:var(--teal-ink); font-family:var(--tight); font-size:10.5px; text-align:right; } .act-sector-row > i { grid-column:1 / -1; height:5px; overflow:hidden; border-radius:var(--pill); background:var(--paper-2); } .act-sector-row > i > em { display:block; height:100%; border-radius:inherit; background:var(--teal-bright); } .act-composition-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; flex:1; } .act-composition-grid > div { min-width:0; padding:2px 26px 2px 0; } .act-composition-grid > div + div { padding-left:26px; border-left:1px solid var(--line-soft); } .act-composition-grid h4 { margin:0 0 12px; color:var(--ink-soft); font-family:var(--tight); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .act-method { margin-top:16px; border-top:1px solid var(--line-soft); color:var(--ink-faint); } .act-method summary { width:max-content; max-width:100%; padding:13px 2px 3px; cursor:pointer; font-family:var(--tight); font-size:10.5px; font-weight:600; color:var(--teal-ink); } .act-method summary:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } .act-method > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:10px 2px 2px; } .act-method p { margin:0; font-family:var(--tight); font-size:10px; line-height:1.5; } /* Cabecera del panel (título + finalidad honesta), fuera de la retícula. */ .act-head { margin-bottom:16px; } .act-head h3 { margin-bottom:6px; } .act-note--foot { margin-top:16px; } /* Tabla ancha dentro de su tarjeta: el scroll horizontal se confina aquí. */ .adm-scroll { overflow-x:auto; max-width:100%; } .act-secs { list-style:none; display:flex; flex-direction:column; gap:5px; } .act-secs li { display:flex; align-items:baseline; gap:8px; font-size:12.5px; color:var(--ink-soft); } .act-sec-n { font-family:var(--tight); font-weight:600; color:var(--teal-ink); min-width:18px; text-align:right; font-variant-numeric:tabular-nums; } .act-sec-l { text-transform:capitalize; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* El scroll horizontal vive AQUÍ dentro. La página nunca scrollea en horizontal: por eso min-width:0 en el track del grid (un hijo de grid no encoge por defecto y reventaría el ancho de la página). */ /* Calendario estilo GitHub: meses arriba, días (lun/mié/vie) a la izquierda. El scroll horizontal vive en .act-cal para que la página nunca scrollee. */ /* Envuelve rejilla + pie. Bloque a todo el ancho de la tarjeta: así montarRejilla puede medir el contenedor (clientWidth) y pintar tantas semanas como quepan —el calendario llena la tarjeta en vez de quedarse chico a la izquierda. El pie con space-between ("N análisis…" ↔ "menos…más") se apoya en los extremos de esa rejilla ya ancha, como en GitHub. */ .act-calwrap { display:block; max-width:100%; min-width:0; } .act-calwrap .act-foot { min-width:0; } .act-cal-slot { display:block; min-width:0; } .act-cal { display:inline-block; max-width:100%; overflow-x:auto; padding-bottom:5px; } .act-cal-top { display:flex; } /* Hueco que alinea la fila de meses con la rejilla (ancho de .act-wdays + gap). */ .act-wsp { flex:0 0 auto; width:34px; } .act-months { display:flex; gap:3px; } /* Cada slot mide lo mismo que una semana (11px + 3px de gap); el nombre desborda a la derecha sobre los slots vacíos hasta el siguiente mes, como en GitHub. */ .act-mlbl { flex:0 0 auto; width:11px; font-family:var(--tight); font-size:9.5px; color:var(--ink-faint); white-space:nowrap; overflow:visible; line-height:1.6; } .act-cal-body { display:flex; gap:6px; } .act-wdays { display:flex; flex-direction:column; gap:3px; flex:0 0 auto; width:28px; } .act-wdays span { height:11px; display:flex; align-items:center; font-family:var(--tight); font-size:9px; color:var(--ink-faint); line-height:1; } .act-grid { display:flex; gap:3px; flex:0 0 auto; } .act-week { display:flex; flex-direction:column; gap:3px; flex:0 0 auto; } .act-day { width:11px; height:11px; border-radius:2px; background:var(--paper-2); display:block; } .act-day.n0 { background:var(--paper-2); } /* Anterior al primer registro: hueco, no cuadrito. Un cuadrito vacío diría "no hiciste nada"; la verdad es que ahí todavía no se registraba. */ .act-day.pre { background:none; box-shadow:inset 0 0 0 1px var(--line-soft); } .act-day.n1 { background:var(--teal-wash); } .act-day.n2 { background:var(--teal-bright); } .act-day.n3 { background:var(--teal); } .act-day.n4 { background:var(--teal-ink); } .act-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:9px; font-family:var(--tight); font-size:11px; color:var(--ink-faint); } .act-scale { display:inline-flex; align-items:center; gap:3px; } .act-scale i { width:9px; height:9px; border-radius:2px; display:inline-block; } .act-note { margin-top:7px; font-family:var(--tight); font-size:10.5px; color:var(--ink-faint); line-height:1.45; max-width:52ch; } /* El perfil se abre desde la identidad de la barra, así que no pertenece a ninguna sección: