/* ───────────────────────────────────────────────────────────────────────────
   GCan — estilo visual FROST (portado de ClasCon: header + navbar + botones).
   GCan es siempre "frost", así que las reglas se aplican directas a las clases.
   Filas IGUAL que ClasCon: principal min-height 64 + navegación height 52. ClasCon/GRP usan
   Tailwind (reset global box-sizing:border-box) → el padding va DENTRO → alto total = 116px.
   GCan replica ese box model SOLO en el header (.tc-platform-header *) para calcar los 116px.
   Los paneles usan --tc-header-h (medida en runtime) para quedar a ras.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --tc-brand-blue: rgb(0 87 184);
  /* Capa de tokens (FASE 1): espejo CSS de src/theme/tokens.js (C.*), para migrar literales del CSS. */
  --tc-brand: #0057b8;
  --tc-brand-08: rgba(0,87,184,0.08);
  --tc-brand-10: rgba(0,87,184,0.10);
  --tc-brand-12: rgba(0,87,184,0.12);
  --tc-brand-border: rgba(0,87,184,0.28);
  --tc-ok: #1f7a37;
  --tc-warn: #a85800;
  --tc-danger: #b3261e;
  --frost-header-blur: 20px;
  --frost-bg-warmth: 1;     /* multiplicador de la calidez del fondo (0 = neutro) */
  --frost-bg-image: none;   /* imagen de fondo opcional (data URL) */
  --frost-bg-blur: 0px;     /* desenfoque de la imagen de fondo */
  --frost-bg-tint: 0;       /* opacidad del velo de color sobre la imagen (0-1) */
  --frost-bg-tint-rgb: 238 242 248; /* color del velo de la imagen */
  --frost-bg-veil: 0.9;     /* opacidad del velo blanco base de body::after (0 cuando hay imagen de fondo) */
  --frost-card-opacity: 0.72; /* opacidad del cristal de tarjetas/tablas/fichas (intensidad, ajustable) */
  --frost-surface-blur: 16px; /* desenfoque del cristal de superficies */
  --frost-modal-blur: 20px;   /* desenfoque del cristal de ventanas/modales/popovers */
  --frost-icon-opacity: 0.92; /* opacidad de los iconos (canónico, compartido) */
  --tc-header-h: 116px;     /* altura REAL del header (se mide en runtime; 116 = main 64 + nav 52 con box-sizing:border-box, IGUAL que ClasCon/GRP que usan Tailwind); paneles y contenido la usan para quedar a ras */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Fondo cálido FROST tras el contenido (capa fija) para que el cristal "lea". */
body { background-color: #eef2f8; }

/* Cristal FROST reutilizable: añadir className "tc-frost-surface" / "tc-frost-modal" a superficies
   con fondo opaco inline (tablas, KPIs, mapas, desplegables, fichas, modales). El !important vence
   al background:"white" inline sin tener que tocarlo en cada componente. */
.tc-frost-surface { background: rgba(255,255,255, var(--frost-card-opacity, 0.72)) !important; backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2); -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2); }
.tc-frost-modal { background: rgba(255,255,255, calc(var(--frost-card-opacity, 0.72) + 0.20)) !important; backdrop-filter: blur(var(--frost-modal-blur, 20px)) saturate(1.2); -webkit-backdrop-filter: blur(var(--frost-modal-blur, 20px)) saturate(1.2); }
/* Chips/botones "fantasma" y tarjetas de estado vacío legibles SOBRE LA IMAGEN DE FONDO: base de cristal blanco
   (respeta la opacidad global) para que el texto/icono de color lea bien; el tinte da el matiz (azul/verde/…). */
.tc-frost-chip { background: rgba(255,255,255, var(--frost-card-opacity, 0.72)) !important; backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); }
.tc-frost-tint-blue  { background: linear-gradient(0deg, rgb(0 87 184 / 0.12), rgb(0 87 184 / 0.12)), rgba(255,255,255, var(--frost-card-opacity, 0.72)) !important; backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); }
.tc-frost-tint-green { background: linear-gradient(0deg, rgb(22 163 74 / 0.12), rgb(22 163 74 / 0.12)), rgba(255,255,255, var(--frost-card-opacity, 0.72)) !important; backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); }
.tc-frost-tint-amber { background: linear-gradient(0deg, rgb(217 119 6 / 0.12), rgb(217 119 6 / 0.12)), rgba(255,255,255, var(--frost-card-opacity, 0.72)) !important; backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.15); }
/* Botón de acción tipo ICONO (subir / ver documento acreditativo): círculo TRANSPARENTE que se resalta a AZUL
   corporativo al pasar el cursor (clon del botón de subir de GCon). El icono hereda el color (currentColor). */
.grh-doc-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: none; background: transparent; color: #86868b; cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease; }
.grh-doc-btn:hover { background: rgba(0,87,184,0.12); color: #0057b8; }
.grh-doc-btn:focus-visible { outline: 2px solid rgba(0,87,184,0.45); outline-offset: 1px; }
.grh-doc-btn.is-set { color: #0057b8; }  /* documento ya adjunto: icono azul incluso sin hover */
.grh-doc-btn.is-shadow { opacity: .3; cursor: default; }  /* sin documento: ojo en sombra (inactivo) */
.grh-doc-btn.is-shadow:hover { background: transparent; color: #86868b; }  /* no reacciona al hover */
/* Capa 1 (debajo): imagen de fondo opcional. */
body::before {
  content: ""; position: fixed; inset: -40px; z-index: -2; pointer-events: none;
  /* Velo de color (configurable) sobre la imagen de fondo, para que el cristal lea bien. */
  background-image:
    linear-gradient(0deg, rgb(var(--frost-bg-tint-rgb, 238 242 248) / var(--frost-bg-tint, 0)), rgb(var(--frost-bg-tint-rgb, 238 242 248) / var(--frost-bg-tint, 0))),
    var(--frost-bg-image, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: saturate(1.05) blur(var(--frost-bg-blur, 0px));
}
/* Capa 2 (encima de la imagen, debajo del contenido): gradiente cálido (calidez ajustable). */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgb(0 87 184 / 0.06), transparent 38%),
    radial-gradient(circle at 92% 4%, rgb(6 182 212 / 0.06), transparent 34%),
    linear-gradient(135deg,
      rgb(255 138 101 / calc(0.07 * var(--frost-bg-warmth, 1))) 0%,
      rgb(255 196 140 / calc(0.06 * var(--frost-bg-warmth, 1))) 30%,
      rgb(255 247 235 / calc(0.09 * var(--frost-bg-warmth, 1))) 55%,
      rgb(186 230 253 / calc(0.10 * var(--frost-bg-warmth, 1))) 85%,
      rgb(221 214 254 / calc(0.10 * var(--frost-bg-warmth, 1))) 100%),
    linear-gradient(180deg, rgb(248 250 252 / var(--frost-bg-veil, 0.9)), rgb(238 242 248 / var(--frost-bg-veil, 0.9)));
}

/* ── Header (cristal blanco translúcido) ── */
.tc-platform-header {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  color: #1e293b;
  font-family: var(--font-display);
  /* Sin border-bottom (el filo se da por box-shadow). main 64 + nav 52 con box-sizing:border-box
     = 116px total, IGUAL que ClasCon/GRP (Tailwind border-box); paneles usan --tc-header-h (runtime). */
  background:
    radial-gradient(circle at 12% 18%, rgb(0 87 184 / 0.10), transparent 36%),
    radial-gradient(circle at 90% 8%, rgb(6 182 212 / 0.10), transparent 32%),
    linear-gradient(180deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.50));
  box-shadow: 0 14px 32px rgb(15 23 42 / 0.10), inset 0 -1px 1px rgb(255 255 255 / 0.62);
  backdrop-filter: blur(var(--frost-header-blur)) saturate(1.28);
  -webkit-backdrop-filter: blur(var(--frost-header-blur)) saturate(1.28);
  /* Capa de composición PROPIA: evita que el cristal (backdrop-filter) del header fijo DESAPAREZCA durante el
     autoscroll con botón central del ratón (bug de repintado de Chromium con position:fixed + backdrop-filter). */
  transform: translateZ(0);
  will-change: transform;
}
/* Como ClasCon/GRP (Tailwind preflight): padding DENTRO → header total = 116px (no 142). */
.tc-platform-header, .tc-platform-header * { box-sizing: border-box; }
.tc-platform-header-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px; padding: 0.45rem 1.5rem 0.2rem; overflow: visible;
}
.tc-platform-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.tc-platform-logo { height: 46px; width: auto; object-fit: contain; flex-shrink: 0; margin-right: 0.55rem; }
.tc-platform-titleblock { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.tc-platform-eyebrow { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; color: #64748b; text-transform: uppercase; line-height: 1; margin-bottom: 0.18rem; }
.tc-platform-appname { color: #0f172a; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(9rem, 28vw, 34rem); }

.tc-platform-pill, .tc-platform-status {
  border-radius: 999px; padding: 0.18rem 0.55rem; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  background: rgb(255 255 255 / 0.62); color: #475569; border: 1px solid rgb(255 255 255 / 0.86);
  backdrop-filter: blur(8px);
}
.tc-platform-status { display: inline-flex; align-items: center; gap: 0.38rem; }
.tc-status-dot { width: 0.38rem; height: 0.38rem; border-radius: 999px; background: #94a3b8; flex-shrink: 0; }
.tc-status-ok .tc-status-dot { background: #34d399; }
.tc-status-error .tc-status-dot { background: #fb7185; }
.tc-status-sync .tc-status-dot { background: #facc15; animation: tc-frost-pulse 1.4s infinite; }
@keyframes tc-frost-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.tc-platform-actions { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.tc-header-icon-button {
  width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.56); color: #334155; border: 1px solid rgb(255 255 255 / 0.80);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.62), 0 4px 10px rgb(15 23 42 / 0.06);
  backdrop-filter: blur(12px) saturate(1.18); cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.tc-header-icon-button:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.9); color: #0057b8;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.8), 0 8px 18px rgb(0 87 184 / 0.18); transform: translateY(-1px);
}
.tc-header-icon-button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Opacidad de los iconos (ajuste frost compartido --frost-icon-opacity). */
.tc-platform-header .tc-header-icon-button svg, .tc-platform-header .tc-platform-nav-link svg, .tc-platform-header .tc-header-logout-button svg { opacity: var(--frost-icon-opacity, 1); }
/* Ayuda: igual que ClasCon frost = botón de cristal (NO amarillo) con "?" de texto. */
.tc-header-help-mark { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 900; line-height: 1; }
.tc-header-alert-button {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 2.3rem; padding: 0 0.75rem;
  font-size: 0.72rem; font-weight: 800; background: #ea580c; color: #fff;
  border: 1px solid rgb(255 255 255 / 0.55); border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 12px rgb(234 88 12 / 0.28);
}

.tc-user-chip { display: flex; align-items: center; gap: 0.62rem; height: 2.6rem; background: transparent; border: none; padding: 0; color: #0f172a; }
.tc-user-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #0057b8; flex-shrink: 0;
  background: radial-gradient(circle at 24% 24%, rgb(255 255 255 / 0.78), transparent 56%), rgb(255 255 255 / 0.66);
  border: 1px solid rgb(255 255 255 / 0.82); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.78), 0 4px 10px rgb(15 23 42 / 0.06);
}
.tc-user-copy { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.tc-user-copy strong { color: #0f172a; font-weight: 500; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-user-copy > span { color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; }

/* ── Fila de navegación ── */
.tc-platform-navigation-row { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; padding: 0.35rem 1.5rem 0.6rem; }
.tc-platform-nav { display: flex; align-items: center; max-width: 100%; overflow: visible; }
.tc-platform-nav-pill { display: flex; align-items: center; gap: 0.62rem; }
.tc-platform-nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.4rem; border-radius: 999px; padding: 0 1rem;
  color: #64748b; font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  border: none; background: transparent; cursor: pointer; transition: color 160ms ease, background-color 160ms ease;
}
.tc-platform-nav-link:hover { color: #0284c7; }
.tc-platform-nav-link.is-icons-only { width: 2.4rem; height: 2.4rem; min-height: 2.4rem; padding: 0; justify-content: center; aspect-ratio: 1 / 1; flex: 0 0 auto; }
.tc-platform-nav-link-active, .tc-platform-nav-link-active:hover {
  color: #fff;
  background: radial-gradient(circle at 22% 22%, rgb(255 255 255 / 0.36), transparent 56%), linear-gradient(135deg, #0057b8 0%, #0284c7 56%, #06b6d4 100%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.38);
}

.tc-header-undo-group { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); display: flex; background: rgb(255 255 255 / 0.5); border-radius: 999px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.72); }
.tc-header-undo-group button { padding: 4px 11px; border: none; background: transparent; cursor: pointer; color: #0057b8; font-size: 14px; line-height: 1; }
.tc-header-undo-group button:disabled { color: #cbd5e1; cursor: default; }

@media (max-width: 820px) {
  .tc-platform-pill { display: none; }
  .tc-user-copy { display: none; }
  .tc-platform-nav-link { padding: 0; font-size: 0.72rem; }
  .tc-header-undo-group { display: none; }
}

/* ── Tooltip tematizado (oscuro) para elementos con data-tooltip (nav icon-only, etc.) ── */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
  background: rgb(255 255 255 / 0.92); color: #0f3f79; font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; z-index: 2000; pointer-events: none;
  border: 1px solid rgb(255 255 255 / 0.8);
  backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2);
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.18);
}
[data-tooltip]:hover::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: rgb(255 255 255 / 0.92); z-index: 2000; pointer-events: none;
}

/* ── GridBoard (Fase E): asas de mover/redimensionar ocultas hasta hover o interacción ── */
.tc-grid-handle { opacity: 0; transition: opacity 0.12s ease; }
.tc-grid-tile:hover .tc-grid-handle,
.tc-grid-tile.is-active .tc-grid-handle { opacity: 1; }
.tc-grid-tile.is-active { cursor: grabbing; }
.tc-grid-handle:active { cursor: grabbing; }

/* ── GridBoard (skill tc-grid-board): asas ocultas hasta hover, por encima del contenido ── */
.tc-grid-tile .tc-grid-handle { opacity: 0; transition: opacity .15s ease; }
.tc-grid-tile:hover .tc-grid-handle,
.tc-grid-tile.is-active .tc-grid-handle { opacity: 1; }
.tc-grid-handle { z-index: 800; }
/* Reservar SIEMPRE el hueco de la barra de scroll para que la retícula no se reconfigure al
   aparecer/desaparecer (spec punto 9). Barra fina para que el hueco sea mínimo. */
.grh-scroll { scrollbar-gutter: stable; }
.grh-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.grh-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 8px; }
/* GRH — estilos globales minimos. Barra de scroll discreta del ecosistema (tecnica de GRP/GCon/GCan)
   y base. El resto del estilo frost (cristal, cabecera) lo aporta tc-shared.css del servidor comun. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } }

/* scrollbar-gutter:stable → reserva el hueco de la barra (la ventana es la que scrollea) para que el
   ancho no salte entre pantallas cortas y largas (misma razon que en GRP/GCan). */
html { scrollbar-gutter: stable; }
body { margin: 0; background: transparent; }

/* ─── Premium: tarjetas con hover frost (cambio sutil de tinte + elevacion) ──── */
.grh-card { transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.grh-card:hover { background: rgba(255,255,255,0.93) !important; border-color: rgba(0,87,184,0.28) !important; box-shadow: 0 8px 22px rgba(15,23,42,0.11) !important; transform: translateY(-1px); }
/* Variante "aceptado/completo": blanco OPACO con velo verde suave (legible sobre cualquier fondo) */
.grh-card.ok { background: #eef9f1 !important; border-color: rgba(52,199,89,0.42) !important; }
.grh-card.ok:hover { background: #e4f6ea !important; box-shadow: 0 8px 22px rgba(31,122,55,0.12) !important; }
/* Tintes solidos reutilizables para KPIs/avisos (base blanca + velo de color) */
.tint-ok { background: #eef9f1 !important; border-color: rgba(52,199,89,0.42) !important; }
.tint-bad { background: #fdf1f0 !important; border-color: rgba(255,69,58,0.32) !important; }
.tint-warn { background: #fdf7ec !important; border-color: rgba(255,159,10,0.34) !important; }

/* ─── Premium: tooltip FROST (cristal claro), CSS puro (sin JS) ──────────────── */
.grh-tip-wrap { position: relative; display: inline-flex; }
.grh-tip {
  position: absolute; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .14s ease, transform .14s ease;
  padding: 9px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; line-height: 1.45; color: #1c1c1e; max-width: 250px; width: max-content; white-space: normal;
  background: rgba(255,255,255,0.74); backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.4); -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 12px 34px rgba(15,23,42,0.20);
}
.grh-tip.top { bottom: calc(100% + 9px); }
.grh-tip.bottom { top: calc(100% + 9px); }
.grh-tip.right { right: 0; transform: translateY(4px); }
.grh-tip.left { left: 0; transform: translateY(4px); }
.grh-tip.center { left: 50%; transform: translateX(-50%) translateY(4px); }
.grh-tip-wrap:hover .grh-tip { opacity: 1; transform: translateY(0); }
.grh-tip-wrap:hover .grh-tip.center { transform: translateX(-50%) translateY(0); }
/* Guía de incorporación (rueda de fases) — estilos propios, alcance .obg-root. Coherente con el frost del
   grupo (azul TC, cristal). Portado de la maqueta aprobada. Se importa desde main.jsx. */
.obg-root{
  --tc:#0057b8; --tc-deep:#003d80; --tc-bright:#2f86e6; --tc-soft:#dbe7f6; --tc-tint:#eef4fc;
  --ink:#1c1c1e; --ink2:#48484a; --muted:#8e8e93; --faint:#c7c7cc;
  --ok:#1f7a37; --ok-tint:#e6f3ea; --amber:#a85800; --amber-tint:#fbf0e2;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.9);
  --hair:rgba(0,0,0,.08); --hair-soft:rgba(0,0,0,.05);
  --disp:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sh:0 12px 38px rgba(15,40,90,.11),0 3px 10px rgba(15,40,90,.06);
  position:relative; max-width:1180px; margin:0 auto; padding:28px 4px 40px; /* top = 28px como el resto de secciones */
}
.obg-root *{box-sizing:border-box}
.obg-top{display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap}
.obg-top .obg-h .obg-kick2{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tc); margin-bottom:5px}
.obg-top .obg-h h1.obg-title{font-size:26px; font-weight:700; color:var(--ink); margin:0; letter-spacing:-.02em; line-height:1.12}
.obg-prog{margin-left:auto; display:flex; align-items:center; gap:11px; min-width:230px}
.obg-prog .lab{font-size:12px; color:var(--muted); font-weight:600}
.obg-track{flex:1; height:8px; border-radius:999px; background:rgba(0,87,184,.12); overflow:hidden}
.obg-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--tc),var(--tc-bright)); transition:width .6s cubic-bezier(.2,.7,.2,1)}
.obg-pct{font-family:var(--disp); font-weight:700; font-size:15px; color:var(--tc); font-variant-numeric:tabular-nums; min-width:44px; text-align:right}
.obg-exit{border:1px solid var(--hair); background:var(--glass-strong); color:var(--tc); font-size:12.5px; font-weight:700; border-radius:999px; padding:7px 14px; cursor:pointer}
.obg-exit:hover{background:var(--tc); color:#fff; border-color:var(--tc)}
/* toggle Mi incorporación / Procesos (admin) en la MISMA fila que Progreso + Ir a mi panel */
.obg-inctoggle{display:flex; gap:8px; margin-left:auto}
.obg-inctoggle + .obg-prog{margin-left:16px; min-width:200px}

/* Layout: rail de fases HORIZONTAL arriba + panel a ANCHO COMPLETO debajo */
.obg-stage{display:flex; flex-direction:column; gap:clamp(12px,1.6vw,18px)}

/* wheel — tarjeta frost horizontal (los pasos en fila) */
.obg-wheelcard{background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.66); border-radius:20px; padding:8px 10px; box-shadow:var(--sh); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2)}
.obg-wheel{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:8px 6px 6px}
.obg-spine{position:absolute; left:10%; right:10%; top:37px; height:3px; border-radius:3px; background:rgba(0,87,184,.14); overflow:hidden}
.obg-spine i{position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,var(--tc),var(--tc-bright)); transition:width .7s cubic-bezier(.2,.7,.2,1)}
.obg-node{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 0; min-width:0; background:none; border:0; cursor:pointer; padding:2px 4px; text-align:center; font-family:inherit; color:inherit}
.obg-disc{flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:center}
.obg-dot{width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--glass-strong); border:1.5px solid var(--hair); color:var(--muted); transition:all .45s cubic-bezier(.2,.7,.2,1)}
.obg-dot svg{width:20px; height:20px}
.obg-node .obg-lbl{font-size:13px; font-weight:600; color:var(--ink2); line-height:1.2; transition:color .3s}
.obg-node .obg-lbl small{display:block; font-size:10.5px; font-weight:500; color:var(--muted); margin-top:2px}
.obg-node.done .obg-dot{background:var(--tc); border-color:var(--tc); color:#fff; box-shadow:0 4px 12px rgba(0,87,184,.28)}
.obg-node.done .obg-lbl{color:var(--ink2)} .obg-node.done .obg-lbl small{color:var(--ok)}
.obg-node.active .obg-dot{width:56px; height:56px; background:radial-gradient(120% 120% at 30% 25%,var(--tc-bright),var(--tc) 70%); border-color:transparent; color:#fff; box-shadow:0 0 0 6px rgba(0,87,184,.12),0 12px 26px rgba(0,87,184,.34)}
.obg-node.active .obg-dot svg{width:24px; height:24px}
.obg-node.active .obg-lbl{color:var(--tc); font-weight:800; font-family:var(--disp); font-size:14px}
.obg-node.active .obg-lbl small{color:var(--tc); opacity:.7; font-weight:600}
.obg-node:hover:not(.active) .obg-dot{border-color:var(--tc); color:var(--tc); transform:translateY(-1px)}

/* panel */
.obg-panel{position:relative; background:var(--glass); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3); border:1px solid rgba(255,255,255,.6); border-radius:24px; box-shadow:var(--sh); padding:clamp(20px,2.6vw,36px) clamp(18px,3vw,46px); min-height:520px; display:flex; flex-direction:column; overflow:hidden}
.obg-wm{position:absolute; right:-38px; top:-28px; width:250px; opacity:.05; color:var(--tc); pointer-events:none}
/* flechas SIN círculo contenedor (transparentes) y dentro del panel para que no se vean cortadas */
/* flechas ARRIBA, a la altura del kicker (posición FIJA, no se mueven con la altura del slide) */
.obg-arrow{position:absolute; top:calc(clamp(20px,2.6vw,36px) - 3px); transform:none; width:36px; height:36px; border:0; border-radius:999px; background:transparent; box-shadow:none; color:var(--tc); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:6; transition:color .2s,transform .2s,opacity .2s}
.obg-arrow:hover{color:var(--tc-deep); transform:scale(1.16)}
.obg-arrow:disabled{opacity:.22; cursor:default; color:var(--muted)}
.obg-arrow.prev{left:8px} .obg-arrow.next{right:8px} .obg-arrow svg{width:22px;height:22px}
.obg-slide{flex:1; display:flex; flex-direction:column; animation:obgRise .5s cubic-bezier(.2,.7,.2,1)}
@keyframes obgRise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.obg-kicker{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tc); background:var(--tc-tint); padding:6px 12px; border-radius:999px}
.obg-kicker svg{width:14px;height:14px}
.obg-slide h2{font-family:var(--disp); font-weight:700; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.02em; color:var(--ink); margin:14px 0 8px; text-wrap:balance; line-height:1.1}
.obg-lead{font-size:15px; line-height:1.6; color:var(--ink2); max-width:none; margin:0 0 18px}
.obg-tc{color:var(--tc); font-weight:700} /* marca "Torrescamara" en azul corporativo */
.obg-body{flex:1}

.obg-cards{display:grid; gap:12px}
.obg-cards.two{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.obg-cards.three{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.obg-card{background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:15px; padding:14px 15px; display:flex; gap:12px; align-items:flex-start; transition:transform .18s,box-shadow .18s,border-color .18s}
.obg-card.hov:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,40,90,.1); border-color:var(--tc-soft)}
.obg-card .ic{flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--tc-tint); color:var(--tc); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:14px}
.obg-card .ic svg{width:20px;height:20px}
.obg-card h4{margin:0 0 3px; font-size:14px; font-weight:700; color:var(--ink)}
.obg-card p{margin:0; font-size:12.6px; line-height:1.5; color:var(--muted)}
.obg-card .who{font-size:12.8px; color:var(--ink2); font-weight:600}

.obg-letter{display:grid; grid-template-columns:1.55fr .9fr; gap:26px; align-items:center}
.obg-hi{margin-bottom:6px}
.obg-values{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0}
.obg-vchip{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:650; color:var(--tc-deep); background:linear-gradient(180deg,#fff,#f2f7fd); border:1px solid var(--tc-soft); border-radius:999px; padding:7px 13px}
.obg-vchip svg{width:14px;height:14px; color:var(--tc)}
/* Valores del grupo: badges frost azul corporativo (como los iconos de fase), texto blanco, 2 filas × 3 columnas */
.obg-valgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0}
.obg-valbadge{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:12px; font-size:12.7px; font-weight:650; color:#fff; background:radial-gradient(140% 140% at 25% 20%,var(--tc-bright),var(--tc) 78%); border:1px solid rgba(255,255,255,.28); box-shadow:0 5px 14px rgba(0,87,184,.22)}
.obg-valbadge .vi{flex:0 0 auto; display:flex}
.obg-valbadge .vi svg{width:16px; height:16px; color:#fff}
@media (max-width:560px){.obg-valgrid{grid-template-columns:repeat(2,1fr)}}
.obg-sign{font-size:13px; color:var(--ink2); font-weight:600; margin-top:4px}
.obg-sign span{color:var(--muted); font-weight:500}
.obg-heroart{position:relative; aspect-ratio:1/1; overflow:hidden}
.obg-heroart svg{position:absolute; inset:0; width:100%; height:100%}
.obg-heroart img.obg-herologo{position:absolute; inset:0; margin:auto; max-width:66%; max-height:66%; object-fit:contain; opacity:0; transform:translateX(10%); transition:opacity .3s}

/* map */
.obg-maprow{display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:center}
.obg-mapbox{position:relative; background:linear-gradient(160deg,#eef5fd,#e0ecf9); border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:14px}
.obg-mapa{width:100%; height:auto; display:block}
.obg-mapa .land{fill:url(#obgLg); stroke:#9dbfe6; stroke-width:1.4}
.obg-mapa .grid{stroke:rgba(0,87,184,.08); stroke-width:.7}
.obg-pin{cursor:pointer}
.obg-pin .halo{fill:var(--tc); opacity:.16; transition:all .3s}
.obg-pin .core{fill:var(--tc); stroke:#fff; stroke-width:1.6; transition:all .25s}
.obg-pin .plabel{font:600 9px system-ui; fill:var(--tc-deep); opacity:0; transition:opacity .2s}
.obg-pin.on .core{fill:var(--tc-deep); r:7}
.obg-pin.on .halo{opacity:.28; r:16}
.obg-pin.on .plabel{opacity:1}
.obg-colinset{display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 11px; background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:12px; font-size:11.5px; color:var(--ink2)}
.obg-colinset svg{width:16px;height:16px; color:var(--tc); flex:0 0 auto}
.obg-sedes{display:flex; flex-direction:column; gap:9px}
.obg-sede{display:flex; gap:12px; align-items:center; background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:14px; padding:8px 11px; cursor:pointer; transition:all .22s}
.obg-sede:hover,.obg-sede.on{border-color:var(--tc); box-shadow:0 6px 16px rgba(0,87,184,.12); transform:translateX(2px)}
.obg-sedephoto{flex:0 0 auto; width:74px; height:54px; border-radius:10px; overflow:hidden}
.obg-sedephoto svg{width:100%;height:100%; display:block}
.obg-sede .info b{display:block; font-size:13.5px; color:var(--ink); font-weight:700}
.obg-sede .info b em{font-style:normal; font-size:10px; color:#fff; background:var(--tc); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:middle}
.obg-sede .info span{font-size:11.6px; color:var(--muted); line-height:1.35; display:block}

/* ficha */
.obg-fhead{display:flex; gap:18px; align-items:center; background:linear-gradient(150deg,#fff,#f3f8fd); border:1px solid var(--hair-soft); border-radius:18px; padding:18px 20px; margin-bottom:14px; flex-wrap:wrap}
.obg-fphoto{flex:0 0 auto; width:74px; height:74px; border-radius:18px; background:linear-gradient(150deg,var(--tc),var(--tc-bright)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:25px; box-shadow:0 6px 16px rgba(0,87,184,.3); overflow:hidden}
.obg-fphoto.foto{object-fit:cover; background:none}
.obg-fh{flex:1; min-width:160px}
.obg-fh h3{margin:0; font-family:var(--disp); font-size:20px; color:var(--ink)}
.obg-fh .role{font-size:13.5px; color:var(--tc); font-weight:650; margin-top:2px}
.obg-fh .dept{font-size:12.5px; color:var(--muted); margin-top:2px}
.obg-mr{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.obg-mr .rr{position:relative; width:56px;height:56px}
.obg-mr .rr b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:14px; color:var(--tc)}
.obg-mr .rt{font-size:11.5px; color:var(--muted); font-weight:600; max-width:80px; line-height:1.3}
.obg-fields{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.obg-field{background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:12px; padding:10px 13px}
.obg-field .fl{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; display:flex; align-items:center; gap:6px}
.obg-field .fl svg{width:12px;height:12px}
.obg-field .fv{font-size:14px; color:var(--ink); font-weight:600; margin-top:4px}
.obg-field .fv.empty{color:var(--amber)}
.obg-field .fv.empty::after{content:"· completar"; font-size:11px; margin-left:2px}

.obg-tl{position:relative; padding-left:26px; margin-top:4px}
.obg-tl::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--tc-soft); border-radius:2px}
.obg-tli{position:relative; padding:0 0 14px}
.obg-tli::before{content:""; position:absolute; left:-23px; top:4px; width:12px;height:12px; border-radius:999px; background:#fff; border:3px solid var(--tc)}
.obg-tli b{font-size:14px; color:var(--ink); font-weight:700}
.obg-tli .yr{font-size:11.5px; color:var(--tc); font-weight:700}
.obg-tli p{margin:2px 0 0; font-size:12.5px; color:var(--muted)}
.obg-langs{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.obg-lang{display:flex; align-items:center; gap:10px}
.obg-lang .ln{font-size:13px; font-weight:600; color:var(--ink2); width:80px; flex:0 0 auto}
.obg-lang .lbar{flex:1; height:7px; border-radius:999px; background:rgba(0,87,184,.1); overflow:hidden}
.obg-lang .lbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--tc),var(--tc-bright))}
.obg-lang .lv{font-size:11px; color:var(--muted); font-weight:700; width:38px; text-align:right}

.obg-habs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px}
.obg-hab{background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:14px; padding:14px; text-align:center}
.obg-hab .hi{width:42px;height:42px; border-radius:12px; margin:0 auto 9px; display:flex; align-items:center; justify-content:center; background:var(--tc-tint); color:var(--tc)}
.obg-hab .hi svg{width:22px;height:22px}
.obg-hab b{display:block; font-size:13px; color:var(--ink); font-weight:700}
.obg-hab .st{font-size:11px; font-weight:700; margin-top:5px; display:inline-block; padding:3px 9px; border-radius:999px}
.obg-st-ok{background:var(--ok-tint); color:var(--ok)} .obg-st-proc{background:var(--amber-tint); color:var(--amber)} .obg-st-na{background:#f0f0f2; color:var(--muted)}

/* accept + pasos */
.obg-accept{display:flex; flex-direction:column; gap:9px}
.obg-grid2{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.obg-arow{display:flex; align-items:center; gap:13px; background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:13px; padding:11px 13px; cursor:pointer; transition:border-color .2s,background .2s; text-align:left; width:100%; font-family:inherit}
.obg-arow:hover{border-color:var(--tc)}
.obg-arow .doc{flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--tc-tint); color:var(--tc); display:flex; align-items:center; justify-content:center}
.obg-arow .doc svg{width:18px;height:18px}
.obg-arow .t{flex:1; min-width:0}
.obg-arow .t b{display:block; font-size:13.5px; color:var(--ink); font-weight:650}
.obg-arow .t span{font-size:11.8px; color:var(--muted)}
.obg-chk{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted); border:1.5px solid var(--hair); border-radius:999px; padding:6px 12px; transition:all .25s; white-space:nowrap}
.obg-chk .box{width:16px; height:16px; border-radius:5px; border:1.6px solid var(--faint); display:inline-flex; align-items:center; justify-content:center}
.obg-chk .box svg{width:12px; height:12px; opacity:0; transition:all .25s}
.obg-arow.on{border-color:rgba(31,122,55,.4); background:var(--ok-tint)}
.obg-arow.on .obg-chk{color:var(--ok); border-color:rgba(31,122,55,.35)}
.obg-arow.on .obg-chk .box{background:var(--ok); border-color:var(--ok)}
.obg-arow.on .obg-chk .box svg{opacity:1; color:#fff}

.obg-pill{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap; flex:0 0 auto}
/* fila del kicker + pill (misma línea; badge flanqueado por las flechas, pill a la derecha) */
.obg-kickrow{display:flex; align-items:center; gap:12px; padding:0 38px; margin-bottom:2px}
.obg-kickrow .obg-pill{margin-left:auto}
.obg-pill.cont{background:var(--amber-tint); color:var(--amber)}
.obg-cta{display:inline-flex; align-items:center; gap:9px; background:var(--tc); color:#fff; font-family:inherit; font-size:14px; font-weight:700; border:0; border-radius:12px; padding:11px 19px; cursor:pointer; box-shadow:0 6px 16px rgba(0,87,184,.28); transition:transform .15s,box-shadow .15s}
.obg-cta:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,87,184,.34)}
.obg-cta svg{width:17px;height:17px}
.obg-cta.ghost{background:var(--glass-strong); color:var(--tc); border:1px solid var(--hair); box-shadow:none}
.obg-rowbtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.obg-final{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.obg-fbadge{width:64px; height:64px; border-radius:999px; background:linear-gradient(140deg,var(--ok),#39a35a); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(31,122,55,.32)}
.obg-fbadge svg{width:32px;height:32px}

.obg-foot{display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--hair-soft)}
.obg-dots{display:flex; gap:8px; align-items:center}
.obg-dots button{width:8px; height:8px; border-radius:999px; border:0; background:rgba(0,87,184,.2); cursor:pointer; padding:0; transition:all .3s}
.obg-dots button.on{width:26px; background:var(--tc)}
.obg-step{font-size:12.5px; color:var(--muted); font-weight:600}
.obg-step b{color:var(--ink2)}

@media (prefers-reduced-motion:reduce){.obg-root *{transition:none!important; animation:none!important}}
@media (max-width:760px){
  .obg-wheel{overflow-x:auto; justify-content:flex-start; padding-bottom:10px; gap:4px}
  .obg-spine{display:none}
  .obg-node{flex:0 0 auto; min-width:92px}
  .obg-node .obg-lbl small{display:none}
  .obg-arrow.prev{left:4px} .obg-arrow.next{right:4px}
}
@media (max-width:640px){.obg-letter,.obg-maprow,.obg-fields,.obg-grid2,.obg-fgrid{grid-template-columns:1fr}}

/* === feedback: mapa Leaflet, contactos, modales frost, ficha apaisada === */
.obg-lmap-wrap{position:relative; width:100%; height:300px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.7); box-shadow:0 6px 18px rgba(15,40,90,.10)}
.obg-lmap{position:absolute; inset:0}
.obg-lmap-msg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(240,246,253,.78); color:var(--muted); font-size:13px; text-align:center; padding:16px; z-index:500}
.obg-lmap-msg.err{background:rgba(255,69,58,.06); color:#b91c1c}
.obg-mkr-wrap{background:none!important; border:0!important}
.obg-mkr{display:flex; align-items:center; gap:5px}
.obg-mkr .dot{width:13px; height:13px; border-radius:999px; background:var(--tc); border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,87,184,.5); flex:0 0 auto; transition:transform .2s,background .2s}
.obg-mkr .lab{font:700 11px var(--disp); color:var(--tc-deep); background:rgba(255,255,255,.92); border-radius:6px; padding:1px 6px; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.15); opacity:0; transition:opacity .2s}
.obg-mkr.on .dot,.leaflet-marker-icon:hover .obg-mkr .dot{background:var(--tc-deep); transform:scale(1.3)}
.obg-mkr.on .lab,.leaflet-marker-icon:hover .obg-mkr .lab{opacity:1}

.obg-sedephoto{position:relative}
.obg-sedesvg{position:absolute; inset:0}
.obg-sedesvg svg{width:100%; height:100%; display:block}
.obg-sedeimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s}

.obg-card.contact{align-items:flex-start}
.obg-cact{display:flex; gap:7px; margin-top:9px}
.obg-cbtn{width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--tc-tint); color:var(--tc); border:1px solid var(--tc-soft); text-decoration:none; transition:transform .16s,background .16s,color .16s}
.obg-cbtn:hover{background:var(--tc); color:#fff; border-color:var(--tc); transform:translateY(-1px)}
.obg-cbtn svg{width:16px; height:16px}
.obg-cbtn.wa{background:#e7f7ee; color:#1c8a4e; border-color:#bfe8ce}
.obg-cbtn.wa:hover{background:#1fab5b; color:#fff; border-color:#1fab5b}
/* Departamentos y responsables (Fase 1): gráfico vectorial importado + tarjetas de responsable */
.obg-deptsvg{display:block; width:100%; max-width:940px; height:auto; margin:0 auto 18px; border-radius:14px}
.obg-deptcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:11px}
.obg-deptcard{display:flex; gap:12px; align-items:flex-start; background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:14px; padding:13px 14px}
.obg-depticon{flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--tc-tint); color:var(--tc); display:flex; align-items:center; justify-content:center}
.obg-depticon svg{width:21px; height:21px}
.obg-deptmeta{flex:1; min-width:0}
.obg-deptmeta .dep{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tc)}
.obg-deptmeta .nm{font-size:14px; font-weight:700; color:var(--ink); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.obg-mback{position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.5); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:5vh 20px; animation:obgFade .2s}
@keyframes obgFade{from{opacity:0}to{opacity:1}}
.obg-modal{width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; background:var(--glass-strong); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3); border:1px solid rgba(255,255,255,.6); border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.4); overflow:hidden; animation:obgRise .3s cubic-bezier(.2,.7,.2,1)}
.obg-modal.wide{max-width:860px}
.obg-mhead{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--hair-soft); flex:0 0 auto}
.obg-mhead h3{flex:1; min-width:0; margin:0; font-family:var(--disp); font-size:18px; color:var(--ink)}
.obg-mico{flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--tc-tint); color:var(--tc); display:flex; align-items:center; justify-content:center}
.obg-mico svg{width:20px; height:20px}
.obg-mx{flex:0 0 auto; border:0; background:transparent; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px}
.obg-mx:hover{color:var(--ink)}
.obg-mbody{padding:18px 20px; overflow-y:auto}
.obg-mbody p{margin:0 0 12px; font-size:14.5px; line-height:1.62; color:var(--ink2)}
.obg-mbody p:last-child{margin-bottom:0}
.obg-mbody p b{color:var(--tc); font-weight:700}
.obg-mlinks{display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin:14px 0 2px}
.obg-mlink{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--tc); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.6px; padding:1px 0; transition:color .15s}
.obg-mlink:hover{color:var(--tc-deep)}
.obg-mlink svg{width:15px; height:15px}
.obg-mfoot{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px; border-top:1px solid var(--hair-soft); flex:0 0 auto; flex-wrap:wrap}
.obg-mnote{font-size:12px; color:var(--muted); flex:1; min-width:120px}

.obg-fava{flex:0 0 auto; width:48px; height:48px; border-radius:999px; background:linear-gradient(150deg,rgba(0,87,184,.16),rgba(47,134,230,.10)); border:1px solid rgba(0,87,184,.22); color:var(--tc); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:17px; overflow:hidden}
.obg-fava.foto{padding:0; object-fit:cover; border:1.5px solid rgba(255,255,255,.85); box-shadow:0 2px 8px rgba(0,87,184,.2)}
.obg-frole{font-size:12.5px; color:var(--tc); font-weight:600; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.obg-fgrid{display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:20px; overflow-y:auto}
.obg-fsec{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tc); margin:0 0 8px}
.obg-ffield{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--hair-soft)}
.obg-ffield .l{font-size:12.5px; color:var(--muted); flex:0 0 auto}
.obg-ffield .v{font-size:13.5px; color:var(--ink); font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.obg-ffield.ro .v{color:var(--ink2)}
.obg-finput{flex:1; max-width:62%; text-align:right; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); border:0; border-bottom:1.5px solid var(--tc-soft); background:transparent; padding:3px 2px; outline:none}
.obg-finput:focus{border-color:var(--tc)}
.obg-fgrid .obg-habs{grid-template-columns:1fr 1fr; gap:9px}

/* cluster del mapa (varios puntos solapados → uno con contador) */
.obg-clu{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background:var(--tc); color:#fff; font:800 13px var(--disp); border:2.5px solid #fff; box-shadow:0 3px 10px rgba(0,87,184,.45); cursor:pointer}
.obg-clu:hover{background:var(--tc-deep)}
/* badge "Internacional" en la tarjeta de sede (Colombia) */
.obg-sede .info b em.intl{background:#5b5bd6}

/* idiomas en la ficha apaisada */
.obg-fchips{display:flex; flex-wrap:wrap; gap:7px}
.obg-fchip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink2); background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:999px; padding:5px 11px}
.obg-fchip em{font-style:normal; font-size:10.5px; font-weight:700; color:var(--tc); background:var(--tc-tint); border-radius:999px; padding:1px 7px}
.obg-fmuted{font-size:13px; color:var(--muted)}

/* QR / descargas / logo del Welcome Pack en el modal */
.obg-mlogo{max-height:34px; width:auto; display:block; margin:0 0 14px}
.obg-mnota{font-size:12.5px; color:var(--muted); margin:10px 0 0}
.obg-qrrow{margin:16px 0 4px}
.obg-qrhead{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 9px; text-align:center}
.obg-qrs{display:flex; flex-wrap:wrap; gap:16px; justify-content:center}
.obg-qr{margin:0; width:112px; text-align:center}
.obg-qr img{width:112px; height:112px; object-fit:contain; border-radius:12px; border:1px solid var(--hair); background:#fff; padding:6px; box-shadow:0 3px 10px rgba(15,40,90,.08)}
.obg-qr figcaption{font-size:12px; color:var(--ink2); font-weight:600; margin-top:6px; line-height:1.25}

/* sub-secciones del modal Welcome Pack (p.ej. SATCONTROL: fichaje/vacaciones/formación/reserva) */
.obg-msec{margin-top:18px; padding-top:16px; border-top:1px solid var(--hair-soft)}
.obg-msec h4{margin:0 0 7px; font-size:15.5px; font-weight:700; color:var(--ink); font-family:var(--disp)}
.obg-msec p{margin:0 0 8px}

/* idiomas en TARJETAS (ficha apaisada): bandera arriba, idioma + nivel debajo */
.obg-langcards{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.obg-langcard{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; padding:10px 6px; background:var(--glass-strong); border:1px solid var(--hair-soft); border-radius:12px}
.obg-flag{width:30px; height:20px; border-radius:4px; box-shadow:0 0 0 1px rgba(0,0,0,.10); display:block}

/* campos EDITABLES de la ficha: resaltados en azul (los de solo lectura quedan planos) */
.obg-ffield.ed{background:rgba(0,87,184,.05); border:1px solid rgba(0,87,184,.18); border-radius:9px; padding:7px 11px; margin:3px 0}
.obg-edinput{display:flex; align-items:center; gap:8px; flex:1; min-width:0; justify-content:flex-end}
.obg-ffield.ed .obg-finput{max-width:none; flex:1; border-bottom-color:rgba(0,87,184,.4)}
.obg-edpencil{flex:0 0 auto; color:var(--tc); display:flex; opacity:.75}
.obg-edpencil svg{width:14px; height:14px}

/* email de la delegación en la tarjeta de sede */
.obg-sedemail{display:block; font-size:11.5px; color:var(--tc); font-weight:600; text-decoration:none; margin-top:1px; overflow:hidden; text-overflow:ellipsis}
.obg-sedemail:hover{text-decoration:underline}
.obg-langcard .nm{font-size:12.5px; font-weight:700; color:var(--ink)}
.obg-langcard .lv{font-size:10.5px; font-weight:700; color:var(--tc); background:var(--tc-tint); border-radius:999px; padding:1px 8px; margin-top:1px}

/* mapa a ANCHO COMPLETO con 3 tarjetas arriba y 3 debajo (layout antiguo, conservado por compat) */
.obg-mapfull{display:flex; flex-direction:column; gap:14px}
.obg-sederow{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.obg-mapfull .obg-lmap-wrap{height:340px}
/* «Dónde estamos» (rail horizontal): pila de delegaciones a la izquierda + mapa a la derecha, MISMO alto */
.obg-maptwo{display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:16px; align-items:stretch}
.obg-sedecol{display:flex; flex-direction:column; gap:9px}
.obg-maptwo .obg-mapbox{height:100%; padding:12px}
.obg-maptwo .obg-mapbox,.obg-maptwo .obg-lmap-wrap{min-height:100%}
.obg-maptwo .obg-lmap-wrap{height:100%}
@media (max-width:720px){.obg-maptwo{grid-template-columns:1fr} .obg-maptwo .obg-lmap-wrap{height:320px}}

/* legibilidad: subir algunos tamaños pequeños */
.obg-card p{font-size:13px}
.obg-arow .t span{font-size:12.5px}
.obg-sede .info span{font-size:12px}
.obg-lead{text-wrap:pretty}
@media (max-width:720px){.obg-sederow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.obg-langcards{grid-template-columns:repeat(2,1fr)}}