/* ============================================================
   Cloura UI — réplica FIEL del UI real de la app (src/styles/app.css),
   aislada bajo .cl-ui para los mockups de la documentación.
   Solo cambian los datos (ficticios). No editar a mano el look:
   mantener en sync con cloura-ai-app/src/styles/app.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.cl-ui {
  /* superficie y tinta (tomado 1:1 de app.css :root, modo claro) */
  --bg:#FBFAF8; --surface:#FFFFFF; --surface-2:#F6F4F0;
  --ink:#16150F; --ink-1:#16150F; --ink-2:#5C5A52; --ink-3:#8C897F;
  --line:#EAE7E0; --line-2:#DCD8CF;
  --accent:#0F766E; --accent-700:#0C5F58; --accent-soft:rgba(15,118,110,.10); --accent-line:rgba(15,118,110,.28);
  --good:#0F766E; --warn:#B57E12; --warn-soft:rgba(181,126,18,.12);
  --danger:#B23B2E; --danger-soft:rgba(178,59,46,.10);
  --ok:#2e7d6b; --ok-soft:rgba(46,125,107,.12);
  --p-aws:oklch(0.66 0.115 64); --p-azure:oklch(0.60 0.105 248); --p-gcp:oklch(0.60 0.115 24);
  --p-aws-soft:oklch(0.66 0.115 64 / .12); --p-azure-soft:oklch(0.60 0.105 248 / .12); --p-gcp-soft:oklch(0.60 0.115 24 / .12);
  --sev-crit:#B23B2E; --sev-high:#BF6B3A; --sev-med:#B8902E; --sev-low:#5E7E8E;
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --r-xl:18px; --r-lg:14px; --r:11px; --r-sm:8px;
  --shadow-sm:0 1px 2px rgba(20,18,12,.05);
  --shadow:0 1px 2px rgba(20,18,12,.05),0 12px 30px rgba(20,18,12,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* lienzo del mock */
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  padding:24px; font-size:16px; line-height:1.5; text-align:left;
}
.cl-ui, .cl-ui * { box-sizing:border-box; }
.cl-ui h1,.cl-ui h3,.cl-ui h4 { margin:0; }
.cl-ui .ic { width:16px; height:16px; display:inline-block; vertical-align:middle; }
.cl-ui p { margin:0; }

/* Botones */
.cl-ui .btn { --h:38px; appearance:none; border:1px solid transparent; height:var(--h); padding:0 16px; border-radius:var(--r-sm); font-size:13.5px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; font-family:inherit; }
.cl-ui .btn .ic { width:16px; height:16px; }
.cl-ui .btn-primary { background:var(--accent); color:#fff; }
.cl-ui .btn-secondary { background:var(--surface); color:var(--ink); border-color:var(--line); }
.cl-ui .btn-ghost { background:transparent; color:var(--ink-2); }
.cl-ui .btn-sm { --h:32px; font-size:12.5px; padding:0 12px; }

/* Cabecera de vista */
.cl-ui .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:28px; flex-wrap:wrap; }
.cl-ui .page-head h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(21px,2.4vw,26px); }
.cl-ui .page-head .sub { color:var(--ink-2); font-size:13.5px; margin-top:5px; }
.cl-ui .page-head .actions { display:flex; gap:9px; align-items:center; }
.cl-ui .section-title { font-family:var(--font-display); font-weight:600; font-size:14px; margin:32px 0 14px; display:flex; align-items:center; gap:10px; }
.cl-ui .section-title .meta { font-family:var(--font-body); font-weight:400; font-size:12.5px; color:var(--ink-3); }

/* KPIs */
.cl-ui .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cl-ui .kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px 21px; }
.cl-ui .kpi .k-top { display:flex; align-items:center; gap:8px; }
.cl-ui .kpi .k-ico { width:26px; height:26px; border-radius:7px; background:var(--surface-2); display:grid; place-items:center; color:var(--ink-2); }
.cl-ui .kpi .k-ico .ic { width:15px; height:15px; }
.cl-ui .kpi .k-label { font-size:12.5px; color:var(--ink-2); font-weight:500; }
.cl-ui .kpi .k-value { font-family:var(--font-display); font-weight:600; font-size:27px; letter-spacing:-.025em; margin-top:11px; line-height:1.05; font-variant-numeric:tabular-nums; }
.cl-ui .kpi .k-value .u { font-size:14px; color:var(--ink-3); font-weight:500; }
.cl-ui .kpi .k-sub { font-size:12px; color:var(--ink-3); margin-top:7px; }
.cl-ui .kpi.accent .k-value { color:var(--good); }
.cl-ui .kpi.accent .k-ico { background:var(--accent-soft); color:var(--accent); }
.cl-ui .kpi.warn .k-value { color:var(--warn); }
.cl-ui .kpi.warn .k-ico { background:var(--warn-soft); color:var(--warn); }

/* Lista de hallazgos */
.cl-ui .find-list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.cl-ui .find-row { display:grid; grid-template-columns:30px minmax(0,1fr) 130px 110px 120px; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; width:100%; background:none; border-left:0; border-right:0; border-top:0; font-family:inherit; }
.cl-ui .find-list .find-row:last-child { border-bottom:0; }
.cl-ui .find-row .fr-sev { display:grid; place-items:center; }
.cl-ui .sev-bead { width:9px; height:9px; border-radius:3px; }
.cl-ui .sev-critico .sev-bead { background:var(--sev-crit); }
.cl-ui .sev-alto .sev-bead { background:var(--sev-high); }
.cl-ui .sev-medio .sev-bead { background:var(--sev-med); }
.cl-ui .sev-bajo .sev-bead { background:var(--sev-low); }
.cl-ui .find-row .fr-main { min-width:0; }
.cl-ui .find-row .fr-title { font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-ui .find-row .fr-meta { display:flex; align-items:center; gap:9px; margin-top:4px; flex-wrap:wrap; }
.cl-ui .fr-dim { font-size:12px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; }
.cl-ui .fr-dim .dim-dot { width:6px; height:6px; border-radius:50%; }
.cl-ui .dim-dot.costos { background:var(--good); }
.cl-ui .dim-dot.rendimiento { background:var(--ink-3); }
.cl-ui .dim-dot.seguridad { background:var(--warn); }
.cl-ui .find-row .fr-save { text-align:right; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--good); font-variant-numeric:tabular-nums; }
.cl-ui .find-row .fr-save.risk { color:var(--ink-3); font-family:var(--font-body); font-weight:500; font-size:12.5px; }
.cl-ui .find-row .fr-fresh { font-size:12px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; }
.cl-ui .find-row .fr-fresh .ic { width:13px; height:13px; }
.cl-ui .find-row .fr-prov { display:flex; justify-content:flex-end; }
.cl-ui .find-row .fr-prov .pchip { flex-direction:row-reverse; gap:8px; }

/* Badges / chips de proveedor */
.cl-ui .badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.cl-ui .badge-new { color:var(--accent); background:var(--accent-soft); }
.cl-ui .badge-pack { color:var(--ok); background:var(--ok-soft); font-weight:600; }
.cl-ui .pchip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.cl-ui .pmark { width:22px; height:22px; border-radius:6px; flex-shrink:0; display:grid; place-items:center; font-family:var(--font-mono); font-weight:700; font-size:9px; letter-spacing:.02em; text-transform:uppercase; }
.cl-ui .pmark.aws { background:var(--p-aws-soft); color:var(--p-aws); }
.cl-ui .pmark.azure { background:var(--p-azure-soft); color:var(--p-azure); }
.cl-ui .pmark.gcp { background:var(--p-gcp-soft); color:var(--p-gcp); }
.cl-ui .pchip .pname { color:var(--ink-2); }

/* Onboarding / wizard */
.cl-ui .onb { max-width:1000px; margin:0 auto; }
.cl-ui .onb-stepper { display:flex; align-items:center; gap:0; margin-bottom:30px; flex-wrap:wrap; }
.cl-ui .onb-step { display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-3); }
.cl-ui .onb-step .n { width:22px; height:22px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:11.5px; font-weight:600; background:var(--surface); }
.cl-ui .onb-step.done { color:var(--ink); }
.cl-ui .onb-step.done .n { background:var(--ink); border-color:var(--ink); color:var(--surface); }
.cl-ui .onb-step.active { color:var(--ink); font-weight:600; }
.cl-ui .onb-step.active .n { background:var(--accent); border-color:var(--accent); color:#fff; }
.cl-ui .onb-sep { width:26px; height:1px; background:var(--line); margin:0 12px; }
.cl-ui .onb-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px; align-items:start; }
.cl-ui .onb-grid.single { grid-template-columns:minmax(0,1fr); }
.cl-ui .onb-grid .lead { color:var(--ink-2); font-size:14.5px; margin:8px 0 24px; max-width:56ch; }
.cl-ui .onb-grid h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.6vw,28px); }
.cl-ui .onb-summary { display:inline-flex; align-items:center; gap:9px; margin:0 0 16px; padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); }
.cl-ui .onb-summary .pmark { width:24px; height:24px; border-radius:7px; font-size:9px; }
.cl-ui .onb-summary .onb-sum-txt { font-size:12.5px; font-weight:600; color:var(--ink-1); }
.cl-ui .prov-switch { display:inline-flex; gap:6px; margin-bottom:22px; }
.cl-ui .prov-switch button { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:500; color:var(--ink-2); cursor:pointer; font-family:inherit; }
.cl-ui .prov-switch button[aria-pressed="true"] { border-color:var(--accent-line); background:var(--accent-soft); color:var(--ink); }
.cl-ui .onb-method { display:flex; flex-direction:column; gap:10px; margin:2px 0 4px; }
.cl-ui .onb-method-opt { display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; font-family:inherit; }
.cl-ui .onb-method-opt.is-active { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.cl-ui .onb-method-opt .omo-ico { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-1); }
.cl-ui .onb-method-opt.is-active .omo-ico { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.cl-ui .onb-method-opt .omo-ico .ic { width:19px; height:19px; }
.cl-ui .onb-method-opt .omo-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cl-ui .onb-method-opt .omo-t { font-weight:600; font-size:14px; color:var(--ink-1); }
.cl-ui .onb-method-opt .omo-sub { font-size:12px; color:var(--ink-3); }
.cl-ui .onb-method-opt .omo-go { width:18px; height:18px; margin-left:auto; color:var(--ink-3); transform:rotate(-90deg); flex:none; }
.cl-ui .kv { display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 11px 11px 15px; margin-bottom:22px; }
.cl-ui .kv .kv-k { font-size:11.5px; font-weight:600; color:var(--ink-3); letter-spacing:.04em; }
.cl-ui .kv .kv-v { font-family:var(--font-mono); font-size:12.5px; color:var(--ink); overflow-x:auto; white-space:nowrap; flex:1; }
.cl-ui .copybtn { appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12.5px; font-weight:500; height:32px; padding:0 11px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; font-family:inherit; }
.cl-ui .copybtn .ic { width:14px; height:14px; }
.cl-ui .field { margin-bottom:14px; }
.cl-ui .field label { display:block; font-size:12.5px; font-weight:500; margin-bottom:7px; }
.cl-ui .input { width:100%; height:44px; padding:0 13px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px; font-family:inherit; color:var(--ink); background:var(--surface); }
.cl-ui .arn-block { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.cl-ui .conn-state { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; padding:9px 14px; border-radius:var(--r-sm); }
.cl-ui .conn-state .ic { width:16px; height:16px; }
.cl-ui .conn-state.idle { color:var(--ink-3); background:var(--surface-2); }
.cl-ui .conn-state.connected { color:var(--good); background:var(--accent-soft); }
.cl-ui .secure { padding:20px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); }
.cl-ui .secure h4 { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.cl-ui .secure ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.cl-ui .secure li { display:flex; gap:12px; align-items:flex-start; }
.cl-ui .secure .s-ico { flex-shrink:0; width:30px; height:30px; border-radius:8px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); }
.cl-ui .secure .s-ico .ic { width:16px; height:16px; }
.cl-ui .secure li > span:last-child { display:flex; flex-direction:column; }
.cl-ui .secure .s-title { display:block; font-size:13px; font-weight:600; }
.cl-ui .secure .s-sub { font-size:12px; color:var(--ink-3); line-height:1.45; margin-top:2px; }

/* Fix-as-Code: tarjeta "Corrección como código" + panel de Ajustes GitHub */
.cl-ui .pr-card { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:0; background:var(--surface); }
.cl-ui .pr-head { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.cl-ui .pr-head .ic { width:16px; height:16px; color:var(--ink-2); }
.cl-ui .pr-head .pr-title { font-size:13px; font-weight:600; }
.cl-ui .pr-head .ent { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--accent); background:var(--accent-soft); padding:2px 8px; border-radius:999px; }
.cl-ui .pr-body { padding:14px; }
.cl-ui .pr-desc { font-size:12.5px; color:var(--ink-2); line-height:1.55; margin-bottom:14px; }
.cl-ui .pr-state { display:flex; align-items:center; gap:10px; font-size:13px; padding:11px 13px; border-radius:var(--r-sm); background:var(--surface-2); margin:12px 0 0; }
.cl-ui .pr-state .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.cl-ui .pr-state.merged .dot { background:var(--good); }
.cl-ui .pr-state.review .dot { background:var(--p-azure); }
.cl-ui .pr-state .pr-link { margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--accent); font-weight:600; }
.cl-ui .btn-block { width:100%; }
.cl-ui .set-desc { font-size:12.5px; color:var(--ink-2); margin:0 0 4px; line-height:1.5; }
.cl-ui .fselect { height:38px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; font-family:inherit; color:var(--ink); background:var(--surface); }

@media (max-width:720px) {
  .cl-ui .kpis { grid-template-columns:repeat(2,1fr); }
  .cl-ui .onb-grid { grid-template-columns:minmax(0,1fr); }
  .cl-ui .find-row { grid-template-columns:24px minmax(0,1fr) auto; }
  .cl-ui .find-row .fr-fresh, .cl-ui .find-row .fr-prov { display:none; }
}