/* ============================================================
   PLATAFORMA CGI — Componentes (identidad cartográfica)
   ============================================================ */

/* ---- Utilidades base ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.eyebrow {
  font-size: var(--t-hint); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ink-tertiary);
}

/* ============================================================
   Textura de curvas de nivel (máscara → color variable)
   ============================================================ */
.topo {
  position: absolute; inset: 0; pointer-events: none;
  background-color: var(--clay);
  -webkit-mask-image: url('contornos.svg'); mask-image: url('contornos.svg');
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0.06;
}
.topo--brand { background-color: #E9D9C4; opacity: 0.22; } /* sobre panel oscuro */
.topo--soft  { opacity: 0.05; }

/* ============================================================
   Botones
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: var(--t-body); font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid transparent; transition: all 0.18s var(--ease);
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }

.btn--trust { background: var(--trust); color: #fff; box-shadow: var(--sh-trust); }
.btn--trust:hover { background: var(--trust-deep); }

.btn--clay { background: var(--clay); color: #fff; box-shadow: var(--sh-clay); }
.btn--clay:hover { background: var(--clay-deep); }

.btn--outline { background: var(--paper-surface); border-color: var(--paper-line); color: var(--ink-primary); }
.btn--outline:hover { background: var(--paper-dark); border-color: var(--ink-faint); }

.btn--ghost { color: var(--ink-secondary); }
.btn--ghost:hover { background: var(--paper-dark); color: var(--ink-primary); }

.btn--block { width: 100%; }
.btn--lg { min-height: 50px; font-size: 15px; }

/* ============================================================
   Campos de formulario
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-size: var(--t-hint); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-tertiary);
}
.input {
  width: 100%; min-height: 46px; padding: 0 14px;
  background: var(--paper-surface); border: 1px solid var(--paper-line);
  border-radius: var(--r-md); font-size: var(--t-body); color: var(--ink-primary);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: none; border-color: var(--clay); box-shadow: var(--ring); }
.input-wrap { position: relative; }
.input-wrap .toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--ink-tertiary);
}
.input-wrap .toggle:hover { background: var(--paper-dark); color: var(--ink-primary); }

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--paper-raise); border: 1px solid var(--paper-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}

/* ============================================================
   Monograma CGI + corner brackets
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--clay); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.brand__mark .bk { position: absolute; width: 6px; height: 6px; border: 1.5px solid rgba(255,255,255,0.55); }
.brand__mark .bk.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.brand__mark .bk.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.brand__mark .bk.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.brand__mark .bk.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.brand__word { display: flex; flex-direction: column; line-height: 1.1; }
.brand__word b { font-family: var(--font-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-primary); }
.brand__word span { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-tertiary); }

/* Corner brackets para paneles/cards (sello técnico) */
.brackets { position: relative; }
.brackets > .bk { position: absolute; width: 16px; height: 16px; opacity: 0.55; }
.brackets > .bk.tl { top: 14px; left: 14px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.brackets > .bk.tr { top: 14px; right: 14px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.brackets > .bk.bl { bottom: 14px; left: 14px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.brackets > .bk.br { bottom: 14px; right: 14px; border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }

/* ============================================================
   Avatar (iniciales en mono)
   ============================================================ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: #fff;
  letter-spacing: -0.02em;
}

/* ============================================================
   Chip de rol (login demo)
   ============================================================ */
.rolechip {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; text-align: left;
  background: var(--paper-surface); border: 1px solid var(--paper-line);
  border-radius: var(--r-md); transition: all 0.16s var(--ease);
}
.rolechip:hover { border-color: var(--clay-line); background: var(--clay-bg); transform: translateX(2px); }
.rolechip__t { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.rolechip__t b { font-weight: 600; font-size: 13.5px; color: var(--ink-primary); }
.rolechip__t span { font-size: 11.5px; color: var(--ink-tertiary); }
.rolechip .arrow { color: var(--ink-faint); transition: transform 0.16s var(--ease); }
.rolechip:hover .arrow { transform: translateX(3px); color: var(--clay); }

/* ============================================================
   Badge de estado
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--activo { background: var(--ok-bg); color: var(--ok); }
.badge--soon { background: var(--paper-dark); color: var(--ink-tertiary); }
.badge--grupo { background: var(--proximo-bg); color: var(--proximo); }

/* ============================================================
   Topbar (compartida: launcher + módulo)
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 22px;
  background: rgba(251, 250, 247, 0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.topbar__search {
  flex: 1; max-width: 440px; display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 13px; color: var(--ink-tertiary);
  background: var(--paper-base); border: 1px solid var(--paper-line); border-radius: 99px;
  font-size: 13px;
}
.topbar__user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar__user .nm { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.topbar__user .nm b { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.topbar__user .nm span { font-size: 11px; color: var(--ink-tertiary); }

/* ============================================================
   Animación de entrada (rise / fade-up escalonado)
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: rise 0.6s var(--ease) forwards; animation-delay: var(--d, 0ms); }

@keyframes inkdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---- Helpers de página ---- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.divline { height: 1px; background: var(--paper-line); border: 0; }

/* ============================================================
   Responsive (topbar)
   ============================================================ */
@media (max-width: 720px) {
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar__search { display: none; }
}
@media (max-width: 480px) {
  .topbar__user .nm { display: none; }
  .wrap { padding: 0 16px; }
}

/* Logo C&GIL (placa clara: se ve bien en fondos claros y oscuros) */
.brand__logo { height: 42px; width: auto; display: block; background: #FBFAF7; padding: 5px 8px; border-radius: 9px; box-shadow: 0 1px 3px rgba(33,30,26,0.12), inset 0 0 0 1px rgba(33,30,26,0.06); }