/* =========================================================
   0) PALETA / THEME
   ---------------------------------------------------------
   - Ajustá --accent para tu color de marca
   - --panel-bg se fuerza para que el chat sea opaco
   ========================================================= */
:root{
  /* Fuerza esquema claro en todos los navegadores */
  color-scheme: light;
  --bg:#ffffff;
  --fg:#111111;
  --muted:#666;
  --accent:#111;          /* color de acento minimal */
  --chip:#000;
  --chipfg:#fff;
  --border:#0002;
  --panel-bg:#fff;        /* fondo opaco del panel de chat */
}
/* Neutralizado: prefer-dark no cambia la paleta */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#ffffff;
    --fg:#111111;
    --muted:#666;
    --accent:#111;
    --chip:#000;
    --chipfg:#fff;
    --border:#0002;
    --panel-bg:#fff;
  }
}

/* Crea un stacking context raíz fiable (ayuda con z-index) */
html, body{
  isolation:isolate;
}

/* =========================================================
   1) BASE / TIPOGRAFÍA
   ========================================================= */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
}

/* =========================================================
   2) LAYOUT DEL DECK
   ========================================================= */
.deck{
  height:100%;
  display:grid;
  grid-template-rows:auto 6px 1fr auto;
}

/* Topbar / Bottombar */
.topbar,.bottombar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.bottombar{ border-top:1px solid var(--border); border-bottom:none; }

.topbar h1{
  margin:0; font-size:18px; font-weight:700; letter-spacing:.2px;
}
.controls{ display:flex; align-items:center; gap:8px; }
.btn{
  border:1px solid var(--border); background:transparent; color:var(--fg);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600;
}
.btn:focus{ outline:2px solid #0005; outline-offset:2px; }
.muted{ color:var(--muted); }

/* Barra de progreso */
.progress{ height:6px; background:#0001; }
.progress > #bar{ height:100%; background:var(--accent); width:0%; transition:width .3s ease; }

/* Escenario (iframe contenedor de las slides) */
.stage{
  position:relative; z-index:1;  /* asegura que el chat pueda apilarse arriba */
  width:100%; height:calc(100vh - 120px);
  display:grid;
}
.stage iframe{
  width:100%; height:100%; border:0; background:var(--bg);
  position:relative; z-index:0;   /* el chat va encima */
}

/* =========================================================
   3) COMPONENTES REUTILIZABLES (chips/KPI en slides)
   ========================================================= */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:var(--chip); color:var(--chipfg);
  font-weight:600; font-size:12px; letter-spacing:.2px;
}
.chip img{ width:16px; height:16px; display:block; }

.psi{
  border:1px solid var(--border); border-radius:16px;
  padding:18px; display:grid; gap:10px;
}
.psi h2,.psi h3{ margin:0; }
.psi .kpi{ font-size:36px; font-weight:800; letter-spacing:.5px; }

/* Modo impresión */
@media print{
  .topbar,.bottombar,.progress{ display:none !important; }
  .stage{ height:auto; }
  .stage iframe{ height:auto; }
}

/* =========================================================
   4) CHAT FLOTANTE
   ---------------------------------------------------------
   - FAB (botón)
   - Panel del chat (opaco, franja de acento a la izquierda)
   - Mensajes y formulario
   - Móvil / accesibilidad
   ========================================================= */

/* FAB (Floating Action Button) */
#chat-fab{
  position: fixed; right: 24px; bottom: 24px;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
    background: #fff !important;        /* círculo blanco */
  background-color: #fff !important;   /* por si hay otro shorthand */
  background-image: none !important;   /* por si venía un gradiente */
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
  z-index: 2147483000; /* muy por encima del contenido */
}
#chat-fab:active{ transform: translateY(1px); }
#chat-fab:hover{
  box-shadow: 0 12px 34px rgba(0,0,0,.32),
              0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Panel del chat (opaco + franja de acento) */
#chat-panel{
  position: fixed; right: 24px; bottom: 96px;
  width: 85%; max-height: 76vh; min-width:480px;
  background: var(--panel-bg) !important;   /* OPACO */
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  display: none; overflow: hidden;
  z-index: 1000000; /* por encima del iframe/SVG */
}
#chat-panel.open{
  display: grid;
  grid-template-rows: auto 1fr auto; /* header / mensajes / form */
}
/* Franja de acento minimal a la izquierda */
#chat-panel::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background: var(--accent);
}

/* Header con tinte sutil del acento */
.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg));
}
#chat-close{
  border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 18px;
}

/* Mensajería */
.chat-messages{
  padding: 12px; overflow:auto; display:grid; gap:10px;
  background: var(--panel-bg);   /* mismo color del panel para opacidad total */
}
.msg{
  display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:start;
}
.msg .avatar{
  width: 28px; height: 28px; border-radius: 50%;
  display:grid; place-items:center; font-size:14px; font-weight:800;
  border:1px solid var(--border);
}
.msg.user .avatar{ background: var(--accent); color: var(--bg); }
.msg.bot  .avatar{ background: transparent; color: var(--fg); }

.bubble{
  border:1px solid var(--border);
  border-radius:16px; padding:12px 14px; line-height:1.45;
  max-width:95%; background: transparent;
}
.msg.user .bubble{
  background: var(--accent); color: var(--bg); border-color: var(--accent);
  justify-self:end; border-radius:16px 16px 4px 16px;
}
.msg.bot .bubble{
  justify-self:start; border-radius:16px 16px 16px 4px;
}

/* Etiqueta “Asistente T.I.” en respuestas */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
  color: color-mix(in srgb, var(--accent) 55%, var(--fg));
  margin-bottom:6px; text-transform:uppercase;
}
.badge svg{ width:12px; height:12px; }

/* Formulario */
.chat-form{
  display:grid; grid-template-columns:1fr auto; gap:8px;
  padding:10px; border-top:1px solid var(--border);
}
#chat-input{
  border:1px solid var(--border); border-radius:999px;
  padding:12px 14px; color:inherit; background:transparent;
}
#chat-send{
  border:1px solid var(--border); background:transparent; color:inherit;
  padding:10px 14px; border-radius:999px; cursor:pointer;
  transition: transform .05s ease, box-shadow .15s ease;
}
#chat-send:hover{ box-shadow:0 4px 12px rgba(0,0,0,.12); }
#chat-send:active{ transform: translateY(1px); }

/* Bloquea la interacción del iframe cuando el chat está abierto */
body.chat-open .stage iframe{ pointer-events:none; }

/* =========================================================
   5) MODALES (slides) — si los usás en slide1
   ========================================================= */
#step-modal{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 2147482000; /* debajo del chat, encima del deck */
}
#step-modal.open{ display: flex; }
#step-modal .modal-card{
  position: relative; z-index: 1;
  width: 92%; max-width: 760px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

/* =========================================================
   6) RESPONSIVE
   ========================================================= */
@media (max-width: 640px){
  #chat-panel{ width: calc(100vw - 24px); right: 12px; }
  #chat-fab{ right: 12px; bottom: 12px; }
}


/* === PARCHE FORZADO: panel de chat totalmente opaco === */
#chat-panel,
#chat-panel::before,
#chat-panel .chat-header,
#chat-panel .chat-messages {
  background: var(--panel-bg) !important;           /* opaco */
  background-color: var(--panel-bg) !important;     /* opaco */
  -webkit-backdrop-filter: none !important;         /* quita blur en Safari/Chromium */
  backdrop-filter: none !important;                  /* quita blur */
  opacity: 1 !important;                             /* sin transparencia */
}

/* aseguro que está arriba de TODO */
#chat-fab, #chat-panel { z-index: 2147483647 !important; }

/* el iframe no debe “recibir” interacciones cuando el chat está abierto */
body.chat-open .stage iframe { pointer-events: none !important; }

/* === GRAFICOS DINAMICOS === */
/* ===== Slide 1: utilidades ===== */
.visually-hidden{
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}

/* Ejes (labels) */
text.axis{
  font-size:12px; fill: currentColor; opacity:.7;
}

/* Tooltip del gráfico */
#chart .tt{
  min-width: 240px; max-width: 360px;
  transition: opacity .18s ease;
}
#chart .tt .tt-card{
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
#chart .tt .tt-title{ font-weight: 800; margin-bottom: 2px; }
#chart .tt .tt-sub{ font-size: 12px; margin-bottom: 6px; }
#chart .tt .tt-body{ font-size: 14px; line-height: 1.45; }


/* === Slide 1: tooltip refinado (mini-div blanco con sombra) === */
#chart .tt{ min-width: 240px; max-width: 320px; transition: opacity .18s ease; }
#chart .tt .tt-card{
  background: #fff; color: #111;
  border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
/* Neutralizado: tooltip no cambia en dark */
@media (prefers-color-scheme: dark){
  #chart .tt .tt-card{ background:#ffffff; color:#111111; }
}
#chart .tt .tt-title{ font-weight: 800; margin-bottom: 2px; }
#chart .tt .tt-sub{ font-size: 12px; margin-bottom: 6px; }
#chart .tt .tt-actions{ display:flex; justify-content:flex-end; }

/* Mini botón dentro del tooltip */
.btn-mini{
  border:1px solid var(--border);
  background: transparent;
  color: inherit;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}

/* === Modal genérico (reusa estética de step-modal, pero con clase) === */
.modal{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 2147482000;
}
.modal.open{ display: flex; }
.modal .modal-card{
  position: relative; z-index: 1;
  width: 92%; max-width: 760px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}


/* === Marca (logo + título) en la topbar === */
.topbar { gap: 16px; }

.brand{
  display: flex;
  align-items: center;        /* >>> vertical align middle */
  gap: 12px;                  /* espacio entre logo y texto */
  min-width: 0;               /* para que el título pueda recortar si hace falta */
  flex: 1;                    /* ocupa el lado izquierdo */
}

.brand-logo{
  height: 36px;               /* ajustá a tu gusto: 32–48px suele ir bien */
  width: auto;
  display: block;
}

.brand-title{
  margin: 0;
  color: #029c44;             /* tu verde */
  font-size: 20px;            /* subí/bajá según necesidad */
  font-weight: 800;
  line-height: 1;             /* centra visualmente con el logo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    /* por si la ventana es angosta */
}

/* En pantallas chicas, reducimos un poco el título */
@media (max-width: 680px){
  .brand-title{ font-size: 16px; }
  .brand-logo{ height: 30px; }
}





/* === Slide 2: pilares === */
.pillars{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
.pillar{
  border:1px solid var(--border); border-radius:12px; padding:12px;
  background: var(--bg);
}
.pillar.ghost{ opacity:.75; }
.pillar-title{ font-weight:800; margin-bottom:4px; }
.pillar-sub{ font-size:13px; color:var(--muted); }

/* Faja de foco */
.focus-ribbon{
  margin:10px 0 12px; border:1px dashed var(--border);
  border-radius:12px; padding:10px 12px; font-weight:600;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

/* Board head */
.board-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0;
}
.board-head .filters label{ margin-right:8px; }
.board-head select{
  border:1px solid var(--border); background:transparent; color:inherit;
  border-radius:999px; padding:6px 10px;
}

/* Grid de proyectos */
.proj-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 1200px){ .proj-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 800px){ .proj-grid{ grid-template-columns: repeat(4, 1fr); } }

.proj-card{
  grid-column: span 4; /* 3 por fila en desktop */
  border:1px solid var(--border); border-radius:12px; padding:12px;
  background: var(--bg);
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.pc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1px; }
.state{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.state.hecho{ background: #e9f7ef; color:#0a6f3c; }
.state.en-curso{ background: #000000; color:#7a4a00; }
.state.pendiente{ background: #f7e9e9; color:#8a1a1a; }
.impact{ font-size:12px; opacity:.7; }
.pc-title{ margin:4px 0; font-size:16px; }
.pc-sub{ margin:0 0 8px; }
.pc-tags .chip{ font-size:11px; padding:4px 8px; }
.pc-actions{ display:flex; justify-content:flex-end; }
.btn-mini{ border:1px solid var(--border); background:transparent; color:inherit; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; }


/* === Slide 2 tweaks === */
.proj-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 1200px){ .proj-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 800px){ .proj-grid{ grid-template-columns: repeat(4, 1fr); } }

.proj-card{
  grid-column: span 4;
  border:1px solid var(--border); border-radius:12px; padding:12px;
  background: var(--bg);
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.pc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.stars{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; letter-spacing:.5px; color:#22c55e;}
.pc-title{ margin:4px 0; font-size:16px; }
.pc-sub{ margin:0 0 8px; }

.pc-row{
  display:grid; grid-template-columns:auto 1fr 1fr; gap:10px; align-items:center;
  margin-bottom:-10px;
}

/* logos de instituciones */
.inst-logos img{
  height:18px; width:auto; display:inline-block; vertical-align:middle; margin-right:6px;
  filter: grayscale(0%);
}

/* fila de iconos (aporte/palanca) */
.icons-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; border:1px solid var(--border);
  background: var(--bg);
}
.ic{ width:16px; height:16px; fill: currentColor; }

/* estados */
.state{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.state.hecho{ background: #e9f7ef; color:#0a6f3c; }
.state.en-curso{ background: #000000; color:#7a4a00; }
.state.proyectado{ background: #eef2ff; color:#253b8a; }

.pc-actions{ display:flex; justify-content:flex-end; }
.btn-mini{ border:1px solid var(--border); background:transparent; color:inherit; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; }

/* modal meta */
.modal .inst-logos img{ height:20px; margin-right:8px; }
.modal .icons-row .ico{ width:28px; height:28px; }

/* === Slide 2: filtros extendidos, etiquetas e indicadores === */
.board-head .filters label{ margin-right:8px; }
.board-head select{
  border:1px solid var(--border); background:transparent; color:inherit;
  border-radius:999px; padding:6px 10px;
}

.mini-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  color: var(--muted); margin-bottom:4px; font-weight:700;
}

/* grid de tarjetas */
.proj-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 1200px){ .proj-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 800px){ .proj-grid{ grid-template-columns: repeat(4, 1fr); } }

.proj-card{
  grid-column: span 4;
  border:1px solid var(--border); border-radius:12px; padding:12px;
  background: var(--bg);
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.pc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.stars{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; letter-spacing:.5px; }
.pc-title{ margin:4px 0; font-size:16px; }
.pc-sub{ margin:0 0 8px; }

.pc-row{
  display:grid; grid-template-columns:auto 1fr 1fr; gap:12px; align-items:start;
  margin-bottom:-8px;
}

/* logos de instituciones (Mutual primero por JS) */
.inst-logos img{
  height:28px; width:auto; display:inline-block; vertical-align:middle; margin-right:6px;
  filter: grayscale(0%);
}

/* fila de iconos */
.icons-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; border:1px solid var(--border);
  background: var(--bg);
}
.ic{ width:16px; height:16px; fill: currentColor; }
.ico .txt{ font-weight:800; font-size:12px; line-height:1; }

/* barra de avance en tarjeta */
.progress-mini{
  height:8px; border-radius:999px; background: #00000014; border:1px solid var(--border);
  overflow:hidden; margin:4px 0 10px;
}
.progress-mini > span{
  display:block; height:100%;
  background: linear-gradient(90deg, #19c37d, #0a9159);
}

/* estados */
.state{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.state.hecho{ background: #e9f7ef; color:#333333; }
.state.en-curso{ background: #000000; color:#ffcc00; }
.state.proyectado{ background: #eef2ff; color:#029c44ff; }

/* modal tweaks */
.modal .inst-logos img{ height:20px; margin-right:8px; }
.modal .icons-row .ico{ width:28px; height:28px; }

/* ==== Tarjetas: alturas consistentes y labels más chicas ==== */

/* top (estado + estrellas) */
.pc-top{ min-height:28px; }

/* título: hasta 2 líneas y misma altura en todas las cards */
.pc-title{
  margin:4px 0 2px;
  font-size:16px;
  display:-webkit-box;
  -webkit-line-clamp:2;        /* máx 2 líneas */
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.35em * 2); /* altura equivalente a 2 líneas */
}

/* subtítulo: una línea */
.pc-sub{
  margin:0 0 8px;
  min-height: 1.2em;
}

/* fila con logos + iconos; evitá que una card “estire” más que otra */
.pc-row{
  display:grid; grid-template-columns:auto 1fr 1fr; gap:12px; align-items:start;
  margin-bottom:8px;
  min-height: 64px;             /* altura mínima común */
}

/* labels más discretos */
.mini-label{
  font-size:10px;               /* antes: 11px */
  letter-spacing:.25px;
  margin-bottom:4px;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

/* barra de avance con % visible */
.progress-mini{
  position:relative;
  height:8px; border-radius:999px; background:#00000014; border:1px solid var(--border);
  overflow:hidden; margin:4px 0 10px;
}
.progress-mini > span{
  display:block; height:100%;
  background: linear-gradient(90deg, #19c37d, #0a9159);
}
.progress-mini .pct{
  position:absolute; right:8px; top:-18px;
  font-size:11px; color:var(--muted);
}
/* Si querés forzar que TODAS tengan exactamente dos líneas, sin desbordar */
.pc-title{ max-height: calc(1.35em * 2); }
/* Si querés forzar que TODAS tengan exactamente dos líneas, sin desbordar */
.pc-title{ max-height: calc(1.35em * 2); }



/* Grid responsive: auto-fill columnas de mínimo 320px */
.proj-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Tarjetas: ocupan toda la altura del grid-cell */
.proj-card{ height: 100%; }

/* (opcional) botones y barra de avance si no están en tu CSS global */
.pc-progress .bar{
  height: 8px; background: #f1f5f9; border: 1px solid #e5e7eb;
  border-radius: 999px; position: relative; overflow: hidden;
}
.pc-progress .bar > span{
  position:absolute; inset:0 auto 0 0; width:0;
  background: green; border-radius:999px; transition: width .3s;
}

.pc-progress .bar > span{
  background: #22c55e !important;
}

.pc-actions .btn-secondary{
  appearance:none; border:1px solid var(--border,#e5e7eb);
  background:#fff; color:#111827; border-radius:8px; padding:6px 10px;
  font:600 12px/1 system-ui; cursor:pointer;
}
.pc-actions .btn-secondary:hover{ box-shadow:0 2px 8px rgba(0,0,0,.06); }
/* === Contenedor responsive de tarjetas === */
.proj-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
  align-items: stretch;
}
.proj-card{ height:100%; }

/* === Fila interna: Institución / Aporte / Palanca en la MISMA línea === */
.pc-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:flex-start;
}
@media (max-width: 1100px){
  .pc-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .pc-row{ grid-template-columns: 1fr; }
}

/* Iconitos alineados prolijos */
.icons-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Barra de avance (por si se perdió el estilo) */
.pc-progress{ display:flex; align-items:center; gap:8px; }
.pc-progress .bar{
  flex:1; height:8px; background:#f1f5f9;
  border:1px solid #e5e7eb; border-radius:999px;
  position:relative; overflow:hidden;
}
.pc-progress .bar>span{
  position:absolute; inset:0 auto 0 0;
  width:0; background:var(--accent, #2563eb);
  border-radius:999px; transition:width .3s ease;
}
.pc-progress .bar-meta{ min-width:44px; text-align:right; font:600 12px/1 system-ui; }

.kpis{
  display:flex;
  gap:12px;
  flex-wrap:nowrap;                 
  overflow-x:auto;                  /* scroll si no entran */
  -webkit-overflow-scrolling:touch; /* scroll suave en móvil */
  padding:10px 0 6px;
}


.kpi{ flex:0 0 calc(25% - 9px); border:1px solid red; }  /* 4 iguales en una fila (gap de 12px) */



/* --- KPIs arriba: estilo correcto y tamaño normal --- */
/*.kpis{ display:flex; gap:12px; flex-wrap:wrap; }
.kpi{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-width:180px; }*/
.kpi .k{ font:600 12px/1.2 system-ui,Segoe UI,Roboto,Arial; }
.kpi .v{ font:700 22px/1.1 system-ui; margin-top:2px; }
.kpi .bars{ display:flex; gap:4px; margin-top:6px; height:6px; }
.kpi .bars span{ flex:1; border-radius:3px; background:var(--accent,#2563eb); opacity:.25; }
.kpi .bars span.on{ opacity:.9; }

/* Anula el tamaño excesivo heredado de .psi .kpi si está definido arriba */
.psi .kpi{ font-size:inherit; font-weight:inherit; }

/* --- GRID responsive de tarjetas: multi-columna de verdad --- */
.proj-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap:16px !important;
  align-items:stretch;
}
@media (max-width: 700px){
  .proj-grid{ grid-template-columns: 1fr !important; }
}
.proj-card{ height:100%; } /* que cada card estire a la celda */

/* Elimina el layout “12 columnas + span 4” que había arriba */
.proj-card{ grid-column: auto !important; }

/* --- Fila interna: Institución | Aporte | Palanca en la misma línea --- */
.pc-row{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:start;
}
@media (max-width:1100px){
  .pc-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:700px){
  .pc-row{ grid-template-columns: 1fr !important; }
}

/* --- Barra de avance (por si quedó sin estilo) + leyenda “Avance” --- */
.pc-progress{ display:flex; align-items:center; gap:8px; }
.pc-progress .bar{
  flex:1; height:8px; background:#f1f5f9; border:1px solid #e5e7eb;
  border-radius:999px; position:relative; overflow:hidden;
}
.pc-progress .bar>span{
  position:absolute; inset:0 auto 0 0;
  width:0; background:var(--accent,#2563eb);
  border-radius:999px; transition:width .3s ease;
}
.pc-progress .bar-meta{ min-width:44px; text-align:right; font:600 12px/1 system-ui; }

/* mini-labels discretos (evita que “IMPACTO” y “AVANCE” griten) */
.mini-label{
  font:600 11px/1 system-ui;
  color:#6b7280;
}

/* ===== Modal centrado y backdrop correcto ===== */
.modal{
  position: fixed;
  inset: 0;
  padding: 24px;                 /* margen con el viewport */
  background: rgba(0,0,0,.35);   /* backdrop */
  z-index: 2147482000;
  display: none;                 /* cerrado por defecto */
  overflow: auto;                /* si la tarjeta es muy alta, que scrollee el overlay, no el body */
}

/* al abrir, centrado exacto */
.modal.open{
  display: grid;
  place-items: center;           /* centra la .modal-card */
}

/* tarjeta del modal */
.modal .modal-card{
  width: min(920px, calc(100vw - 48px));
  max-height: min(90vh, 100%);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: auto;                /* scroll interno de contenido largo */
}

/* header pegajoso dentro del modal */
.modal .modal-card > :first-child{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
  padding-top: 8px;
  border-bottom: 1px solid #e5e7eb;
}

/* bloquea el scroll del documento cuando el modal está abierto */
.no-scroll{
  overflow: hidden;
}


/*SLIDE 3*/
/* ==== Slide 3: dashboard integrado ==== */
.s3-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(12, 1fr);
}
.s3-row1 .s3-col{ grid-column: span 4; }
.s3-row2 .s3-col2{ grid-column: span 6; }

.card{
  border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--bg);
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.card-title{ margin:0 0 8px; font-size:16px; }

.s3-kpis{ display:grid; grid-template-columns: 1fr; gap:10px; }
.s3-kpi-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.s3-kpi-name{ font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.25px; }
.s3-kpi-val{ font-weight:800; }

/* mini barras */
.progress-bars{ height:8px; background:#00000014; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.mini-bar{ height:100%; }
.bg-warn{ background: linear-gradient(90deg, #faca15, #d4a015); }
.progress-mini{ height:8px; border-radius:999px; background:#00000014; border:1px solid var(--border); overflow:hidden; }
.progress-mini>span{ display:block; height:100%; background: linear-gradient(90deg, #19c37d, #0a9159); }

.kpi-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; border:1px solid var(--border); vertical-align:middle; }
.kpi-dot.ok{ background:#19c37d; }
.kpi-dot.warn{ background:#faca15; }

/* mapa infraestructura (placas) */
.s3-map{ display:flex; flex-wrap:wrap; gap:8px; }
.map-node{
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:12px;
  background:#0000000a;
}
.map-node.ok{ background:#e7f7ef; }
.map-node.up{ background:#e9f1ff; }
.map-node.warn{ background:#fff5d6; }

/* barras usuarios/delegaciones */
.s3-bars{ display:grid; gap:8px; }
.s3-bar{ display:grid; grid-template-columns: 140px 1fr 40px; align-items:center; gap:8px; }
.s3-bar>span{ font-size:12px; color:var(--muted); }
.s3-bar>i{ display:block; height:10px; border-radius:999px; background:linear-gradient(90deg, #1112, #1113); }
.s3-bar>em{ font-style:normal; font-weight:700; text-align:right; }

/* chips toggle */
.chip-toggle{ cursor:pointer; }
.chip--active{ outline:2px solid #0005; outline-offset:2px; }



/*INDEX GENERAL COACH MARK*/
/* === Coachmark del chat (flecha + globito) === */
/* === Coachmark del chat (flecha + globito) — versión prolija === */
#chat-coachmark{
  position: fixed;
  right: 96px;               /* ajustá si tu FAB no está a 20px del borde */
  bottom: 118px;             /* ajustá si tu FAB cambió de altura */
  z-index: 100001;
  display: none;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
#chat-coachmark.show{ display: grid; gap:8px; }

/* cabecera + brillo sutil en el ícono */
#chat-coachmark .coach-head{
  display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px;
}
#chat-coachmark .coach-head .spark{ animation: twinkle 1.2s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{ transform: scale(1); opacity:.95 } 50%{ transform:scale(1.2); opacity:1 } }

/* colita tipo bocadillo (triángulo suave con sombra) */
#chat-coachmark::after{
  content:"";
  position:absolute; right:22px; bottom:-10px;   /* dónde sale la colita */
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid var(--bg);               /* color de fondo del globito */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));/* sombrita sutil */
}

#chat-coachmark .coach-body{ font-size: 13px; line-height:1.35; }
#chat-coachmark .coach-actions{ display:flex; gap:8px; }
#chat-coachmark .coach-actions .btn{ padding:6px 10px; font-size:12px; }

/* pulso alrededor del FAB para llamar la atención */
#chat-fab.pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid #19c37d; opacity:.6; animation: chatpulse 1.6s ease-out infinite;
}
@keyframes chatpulse{ 0%{ transform:scale(.9); opacity:.8 } 100%{ transform:scale(1.25); opacity:0 } }

/*SLIDE 2 ICONOS*/
/* tamaño de iconos en tarjetas y modal */
.icons-row { gap: 10px; align-items: center; }
.icons-row .ico img { width: 22px; height: 22px; display: block; }  /* antes 16px */
.inst-logos img { width: 22px; height: 22px; display: inline-block; }
/* --- KPIs arriba --- */


/* --- Board head: filtros a la izq / KPIs + leyenda a la der --- */
.board-head{
  display: grid;
  grid-template-columns: 1fr minmax(480px, 560px);
  align-items: start;
  gap: 16px;
  margin: 8px 0;
}
.board-head .filters{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.board-head select{
  border:1px solid var(--border); background:transparent; color:inherit;
  border-radius:999px; padding:6px 10px;
}

/* --- Leyenda compacta --- */
.legend-inline{
  display: grid; gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: var(--bg);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.legend-strip{
  display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 8px;
}
.legend-title{
  font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
}
.legend-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip-icon{
  display:inline-flex; align-items:center; gap:8px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; background: var(--bg);
}
.chip-icon img{ width:18px; height:18px; display:block; }
.chip-icon b{ font-weight:800; margin-left:2px; }

/* Responsive board-head */
@media (max-width: 980px){
  .board-head{ grid-template-columns: 1fr; }
  .kpis{ grid-template-columns: 1fr; }
}

/* --- GRID de tarjetas --- */
.proj-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
  align-items:stretch;
}
.proj-card{
  height:100%;
  border:1px solid var(--border); border-radius:12px; padding:12px;
  background: var(--bg);
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.pc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.stars{ color:#22c55e; }

/* Título 2 líneas máximo (altura uniforme) */
.pc-title{
  margin:4px 0 2px;
  font-size:16px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.35em * 2);
}
.pc-sub{ margin:0 0 8px; min-height: 1.2em; }

/* Fila interna: Institución | Aporte | Palanca en una línea */
.pc-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:start;
  margin-bottom:8px;
  min-height:64px;
}
@media (max-width:1100px){
  .pc-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:700px){
  .pc-row{ grid-template-columns: 1fr; }
}

/* Iconos en tarjeta y modal */
.icons-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.icons-row .ico img{ width:22px; height:22px; display:block; }

/* Logos institución (Mutual primero por JS) */
.inst-logos img{ width:22px; height:22px; display:inline-block; }

/* Barra de avance con % visible */
.progress-mini{
  position:relative;
  height:8px; border-radius:999px; background:#00000014; border:1px solid var(--border);
  overflow:hidden; margin:4px 0 10px;
}
.progress-mini > span{
  display:block; height:100%;
  background: linear-gradient(90deg, #19c37d, #0a9159);
}
.progress-mini .pct{
  position:absolute; right:8px; top:-18px;
  font-size:11px; color:var(--muted);
}
/* ===== Slide 2: Desarrollo de sistemas (scope) ===== */
section.slide[data-title="Desarrollo de sistemas"] .board-head{
  display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:start;
  margin: 10px 0 12px;
}

/* KPIs + leyenda en una sola franja */
section.slide[data-title="Desarrollo de sistemas"] .kpis-and-legend{
  display:grid; gap:12px;
}
section.slide[data-title="Desarrollo de sistemas"] .kpis{
  display:grid; grid-template-columns: repeat(3, minmax(180px,1fr)); gap:10px;
}
section.slide[data-title="Desarrollo de sistemas"] .kpi{
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  display:grid; gap:6px; background: color-mix(in srgb, var(--bg) 92%, transparent);
}
section.slide[data-title="Desarrollo de sistemas"] .kpi .k{ font-weight:700; font-size:13px; }
section.slide[data-title="Desarrollo de sistemas"] .kpi .v{ font-size:22px; font-weight:800; }
section.slide[data-title="Desarrollo de sistemas"] .kpi .bars{ display:flex; gap:8px; }
section.slide[data-title="Desarrollo de sistemas"] .kpi .bars span{
  flex:1; height:6px; border-radius:999px; background:#0001;
}
section.slide[data-title="Desarrollo de sistemas"] .kpi .bars span.on{ background: var(--accent); }

/* Leyenda con chips + contadores */
section.slide[data-title="Desarrollo de sistemas"] .legend-inline{
  display:flex; gap:18px; flex-wrap: wrap; align-items:center;
}
section.slide[data-title="Desarrollo de sistemas"] .legend-strip{ display:flex; gap:10px; align-items:center; }
section.slide[data-title="Desarrollo de sistemas"] .legend-title{ font-weight:800; font-size:12px; letter-spacing:.2px; }
section.slide[data-title="Desarrollo de sistemas"] .legend-chips{ display:flex; gap:8px; flex-wrap:wrap; }
section.slide[data-title="Desarrollo de sistemas"] .chip-icon{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--bg); border:1px solid var(--border); border-radius:999px;
  padding:6px 10px; font-size:12px;
}
section.slide[data-title="Desarrollo de sistemas"] .chip-icon img{
  width:18px; height:18px; display:block;
}
section.slide[data-title="Desarrollo de sistemas"] .chip-icon b{
  margin-left:4px; font-weight:800; font-size:11px; opacity:.75;
}

/* Filtros */
section.slide[data-title="Desarrollo de sistemas"] .filters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
section.slide[data-title="Desarrollo de sistemas"] .filters label{
  display:flex; align-items:center; gap:6px; font-size:13px;
}
section.slide[data-title="Desarrollo de sistemas"] .filters select{
  border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:transparent; color:inherit;
}

/* Grid y tarjetas */
section.slide[data-title="Desarrollo de sistemas"] .proj-grid{
  display:grid; gap:14px; grid-template-columns: repeat(3, minmax(260px,1fr));
}
@media (max-width: 1200px){
  section.slide[data-title="Desarrollo de sistemas"] .proj-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
}
@media (max-width: 720px){
  section.slide[data-title="Desarrollo de sistemas"] .proj-grid{ grid-template-columns: 1fr; }
}

section.slide[data-title="Desarrollo de sistemas"] .proj-card{
  border:1px solid var(--border); border-radius:12px; padding:12px; display:grid; gap:10px;
  background: var(--bg);
}
section.slide[data-title="Desarrollo de sistemas"] .pc-top{
  display:flex; align-items:center; justify-content:space-between;
}
section.slide[data-title="Desarrollo de sistemas"] .pc-title{
  margin:0; font-size:16px; font-weight:800; line-height:1.25; min-height: 42px; /* evita saltos */
}
section.slide[data-title="Desarrollo de sistemas"] .pc-sub{ margin:0; }
section.slide[data-title="Desarrollo de sistemas"] .pc-row{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
section.slide[data-title="Desarrollo de sistemas"] .icons-row{ display:flex; gap:6px; flex-wrap:wrap; }
section.slide[data-title="Desarrollo de sistemas"] .inst-logos img{ width:22px; height:22px; }

section.slide[data-title="Desarrollo de sistemas"] .mini-label{
  font-size:11px; opacity:.7; margin-bottom:4px; text-transform:uppercase; letter-spacing:.2px;
}

section.slide[data-title="Desarrollo de sistemas"] .progress-mini{
  position:relative; height:8px; background:#0001; border-radius:999px; overflow:hidden; min-width:120px;
}
section.slide[data-title="Desarrollo de sistemas"] .progress-mini span{
  position:absolute; left:0; top:0; bottom:0; background:var(--accent);
}
section.slide[data-title="Desarrollo de sistemas"] .progress-mini .pct{
  position:absolute; right:6px; top:-18px; font-size:11px; opacity:.8;
}
section.slide[data-title="Desarrollo de sistemas"] .pc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}

/* Estados + estrellas */
section.slide[data-title="Desarrollo de sistemas"] .state{
  display:inline-block; padding:4px 8px; border-radius:999px; font-weight:800; font-size:11px;
  border:1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent);
}
section.slide[data-title="Desarrollo de sistemas"] .state.hecho{ }
section.slide[data-title="Desarrollo de sistemas"] .state.en-curso{ }
section.slide[data-title="Desarrollo de sistemas"] .state.proyectado{ }
section.slide[data-title="Desarrollo de sistemas"] .stars{ letter-spacing:.5px; }

/* Modal */
section.slide[data-title="Desarrollo de sistemas"] .modal{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:100000;
}
section.slide[data-title="Desarrollo de sistemas"] .modal.open{ display:block; }
section.slide[data-title="Desarrollo de sistemas"] .modal-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(820px, 92vw); background:var(--bg); color:var(--fg);
  border:1px solid var(--border); border-radius:14px; box-shadow:0 20px 70px rgba(0,0,0,.5);
  padding:12px;
}
section.slide[data-title="Desarrollo de sistemas"] .modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px;
}
section.slide[data-title="Desarrollo de sistemas"] .modal-head h3{ margin:0 0 6px; }
section.slide[data-title="Desarrollo de sistemas"] .modal-meta{ display:flex; gap:10px; align-items:center; }
section.slide[data-title="Desarrollo de sistemas"] .modal-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-bottom:10px;
}
section.slide[data-title="Desarrollo de sistemas"] .psi{ border:1px solid var(--border); border-radius:12px; padding:12px; }
section.slide[data-title="Desarrollo de sistemas"] .small{ font-size:12px; }

/* Utilidades */
section.slide[data-title="Desarrollo de sistemas"] .btn{ border:1px solid var(--border); background:transparent; color:inherit; padding:6px 10px; border-radius:999px; cursor:pointer; }
section.slide[data-title="Desarrollo de sistemas"] .btn-mini{ padding:4px 8px; }
section.slide[data-title="Desarrollo de sistemas"] .btn.btn-xs{ padding:5px 10px; }
section.slide[data-title="Desarrollo de sistemas"] .visually-hidden{ position:absolute !important; left:-9999px !important; }
/* ===== Slide 2 (scoped) ===== */
/* Cabecera del slide 2 en una fila (KPIs + Leyenda) y filtros debajo */


/* Responsivo: a < 1100px, apilá KPIs sobre leyenda */
@media (max-width: 1100px){
  #s2 .row-1{ grid-template-columns: 1fr; }
}

/* Chat Action Modal */
#chat-action-modal{ inset: 0; display:none; z-index: 100000001;position: absolute; }
#chat-action-modal.open{ display:block; }
#chat-action-modal .cam-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
#chat-action-modal .cam-card{
  position:absolute; right:20px; bottom: 90px; width: 520px; max-width: calc(100vw - 40px);
  background: var(--bg, #fff); color: var(--fg, #111); border:1px solid var(--border, #0002);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.32);
}
#chat-action-modal .cam-head{ display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--border, #0002); }
#chat-action-modal .cam-body{ padding:12px; max-height: 60vh; overflow:auto; }
#chat-action-modal .cam-close{ border:0; background:transparent; color:inherit; font-size:18px; cursor:pointer; padding:8px; }

/* Posicionamiento del modal de acciones */
#chat-action-modal .cam-card{
  position: absolute;
  background: var(--bg, #fff);
  color: var(--fg, #111);
  border:1px solid var(--border, #0002);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
  max-width: min(520px, calc(100vw - 40px));
}

/* default: abajo-derecha (por compatibilidad) */
#chat-action-modal .cam-card.pos-bottomright{
  right: 20px;
  bottom: 90px;
}

/* arriba-izquierda (para “ayuda”) */
#chat-action-modal .cam-card.pos-topleft{
  left: 20px;
  top: 20px;
}

/* ===== Modal: variantes de tamaño y contenedor iframe ===== */
#chat-action-modal .cam-card.size-wide{
  max-width: min(860px, calc(100vw - 40px));
  width: 860px;
}

#chat-action-modal .cam-card .cam-body .iframe-wrap{
  width: 100%;
  height: 70vh;               /* alto cómodo; ajustá si querés */
  border: 1px solid var(--border, #0002);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;           /* asegura contraste con el form */
}

#chat-action-modal .cam-card .cam-body .iframe-wrap iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  
}

/* Posiciones (ya las tenías; incluyo por claridad) */
#chat-action-modal .cam-card.pos-topleft{
  position: absolute;
  left: 20px;
  top: 20px;
}

#chat-action-modal .cam-card.pos-bottomright{
  position: absolute;
  right: 20px;
  bottom: 90px;
}

/* =========================================================
   FINAL GUARD: Forzar esquema claro, independientemente del SO/navegador
   - Aplica al index y a los slides dentro del iframe
   - Si algún estilo de slide redefine --bg, este bloque vuelve a blanco
   ========================================================= */
:root{
  color-scheme: light;
  --bg:#ffffff; --fg:#111111; --muted:#666; --accent:#111;
  --chip:#000; --chipfg:#fff; --border:#0002; --panel-bg:#fff;
}
html, body, .slide{ background:#fff !important; color:#111 !important; }
iframe{ background:#fff !important; }


/* === FIX filtros: alinear a la izquierda cuando hay wrap === */
.board-head .filters{
  display: flex;            /* por si otra regla lo dejó en grid */
  flex-wrap: wrap;
  justify-content: flex-start !important;  /* <- clave */
  gap: 10px 14px;
}

/* por si algún item empuja con auto */
.board-head .filters > *{
  margin-left: 0 !important;
}
/* === FIX KPIs: una sola línea en slide 2 === */
section.slide[data-title="Desarrollo de sistemas"] #kpis{
  display:flex !important;
  flex-wrap:nowrap !important;     /* no salta de línea */
  gap:12px;
  align-items:stretch;
}
section.slide[data-title="Desarrollo de sistemas"] #kpis .kpi{
  flex:1 1 0 !important;           /* 4 columnas fluidas */
  min-width:0;                     /* evita que el contenido empuje */
  border:1px solid var(--border);  /* quita el borde rojo de debug */
  border-radius:12px;
  background:#fff;
}

/* Evita que media queries viejas vuelvan a grid/stack */
@media (max-width: 12000px){
  section.slide[data-title="Desarrollo de sistemas"] #kpis{
    display:flex !important; flex-wrap:nowrap !important;
  }
}



/*SLIDE 2 KPI*/
/* Solo aplica a esta tarjeta */
/* SOLO para la tarjeta de Adopción */
.adopcion-kpi{
  /* ocupa todo el alto de la card y centra su contenido */
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr; /* icono | textos */
  align-items: center;             /* centra verticalmente icono y textos */
  justify-content: center;         /* centra el bloque dentro de la card */
  column-gap: 12px;
  padding: 10px 14px;              /* respeta padding de la card */
  border-radius: 14px;
}

/* icono alineado al centro vertical del bloque de textos */
.adopcion-kpi__icon{
  display: flex;
  align-items: center;  /* centra vertical */
  justify-content: center;
  width: 64px;
  height: 64px;         /* fija un alto visual consistente */
}

.adopcion-kpi__icon img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* textos centrados y apilados */
.adopcion-kpi__body{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra horizontal */
  justify-content: center; /* centra vertical */
  text-align: center;
  min-height: 64px;      /* asegura alineación con el icono */
}

/* SOLO afectan a esta tarjeta */
.adopcion-kpi .k{
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  white-space: nowrap;
  margin: 0;            /* evita empujes hacia abajo */
}

.adopcion-kpi .v{
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: #2e7d32;
  margin-top: 6px;
}

/* responsive fino */
@media (max-width: 520px){
  .adopcion-kpi__icon{ width:52px; height:52px; }
  .adopcion-kpi .k{ font-size:18px; }
  .adopcion-kpi .v{ font-size:36px; }
}

/* === Slide 2: TARJETAS ULTRA-COMPACTAS (override seguro y acotado) === */
section.slide[data-title="Desarrollo de sistemas"] .proj-card{
  padding:10px;           /* antes 12px */
}

section.slide[data-title="Desarrollo de sistemas"] .pc-top{
  margin-bottom:2px;      /* antes 6px */
}
section.slide[data-title="Desarrollo de sistemas"] .state{
  padding:1px 6px;
  font-size:11px;
}

section.slide[data-title="Desarrollo de sistemas"] .stars{
  letter-spacing:.3px;    /* más cerradas */
  font-size:12px;
}

/* Título: máximo 2 líneas con menor interlínea */
section.slide[data-title="Desarrollo de sistemas"] .pc-title{
  margin:-4px 0;
  font-size:14px;         /* 1px menos */
  line-height:1;        /* antes ~1.35 */
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  display:-webkit-box;
  overflow:hidden;
  min-height: calc(1.2em * 2);
  max-height: calc(1.2em * 2);
}

/* Subtítulo: una línea, más cerrado */
section.slide[data-title="Desarrollo de sistemas"] .pc-sub{
  margin:0 0 -4px;         /* antes 8px */

  font-size:13px;         /* 1px menos */
  line-height:1;        /* antes ~1.35 */
}

/* Etiquetas mini: menos “aire” y tamaño */
section.slide[data-title="Desarrollo de sistemas"] .mini-label{
  font-size:10px;         /* antes 11px */
  letter-spacing:.25px;
  margin-bottom:2px;      /* antes 4px */
}

/* Fila interna: mínimo espacio posible */
section.slide[data-title="Desarrollo de sistemas"] .pc-row{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;                /* antes 12px */
  align-items:center;     /* alineado centrado para compactar */
  margin-bottom:4px;      /* antes 8px */
  min-height:auto;        /* quita alturas forzadas (64px) */
}

/* Iconos e isologos más chicos y pegados */
section.slide[data-title="Desarrollo de sistemas"] .icons-row{
  gap:6px;                /* antes 10px */
}
section.slide[data-title="Desarrollo de sistemas"] .icons-row .ico img{
  width:20px; height:20px;    /* antes 22px */
}
section.slide[data-title="Desarrollo de sistemas"] .inst-logos img{
  width:18px; height:18px;    /* antes 22/28px en algunas reglas */
  margin-right:4px;           /* antes 6px */
}

/* Barra de avance más baja y con % más discreto */
section.slide[data-title="Desarrollo de sistemas"] .progress-mini{
  height:6px;             /* antes 8px */
  margin:2px 0 6px;       /* menos aire */
}
section.slide[data-title="Desarrollo de sistemas"] .progress-mini .pct{
  top:-14px;              /* subir el % acorde al nuevo alto */
  font-size:10px;         /* antes 11px */
}

/* Grid responsivo: sin cambios de estructura, solo aseguramos consistencia */
section.slide[data-title="Desarrollo de sistemas"] .proj-grid{
  gap:12px;               /* 16px -> 12px para compactar filas */
}