@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* Brand colors from kunna.org */
  --primary: #FD9800;
  --primary-dark: #E08500;
  --bg-deep: #0A0A0A;
  --bg-surface: #111111;
  --neutral-grey: #444444;
  --text-light: #F5F5F5;
  --white: #FFFFFF;
  --border: rgba(255,255,255,0.05);

  /* Mapping old variables for full compatibility */
  --navy: var(--bg-deep);
  --navy2: #161616;
  --teal: var(--primary);
  --amber: var(--primary);
  --ink: var(--text-light);
  --muted: rgba(255,255,255,0.5);
  --line: var(--border);
  --card: var(--bg-surface);

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-light);
  min-height: 100vh;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  height: 38px;
  display: flex;
  align-items: center;
}

.logo-icon img {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.logo-sublabel {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 4px;
}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:36px 32px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.login-card .brand{font-size:1.4rem;margin-bottom:18px}
.login-card h1{font-size:1.25rem;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 20px;font-size:.92rem}
label{display:block;font-size:.8rem;color:var(--muted);margin:14px 0 6px}
input{
  width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--line);
  background:#0e1a30;color:var(--ink);font-size:.95rem
}
input:focus{outline:none;border-color:var(--teal)}
button{
  width:100%;margin-top:22px;padding:12px;border:0;border-radius:9px;cursor:pointer;
  background:var(--amber);color:#1b2a4a;font-weight:800;font-size:.98rem
}
button:hover{filter:brightness(1.05)}
.error{background:#3a1d22;border:1px solid #7d3340;color:#ffb3bd;padding:10px;border-radius:8px;font-size:.86rem;margin-bottom:8px}

/* PORTAL */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 28px;border-bottom:1px solid var(--line);background:rgba(15,27,51,.6)
}
.user{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:.9rem}
.logout{color:var(--amber);text-decoration:none;font-weight:700}
.portal{max-width:1080px;margin:0 auto;padding:36px 28px}
.portal h1{margin:0 0 4px;font-size:1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:24px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;
  display:flex;flex-direction:column;gap:8px;transition:.2s
}
.card:hover{border-color:var(--teal);transform:translateY(-3px)}
.icono{font-size:1.8rem}
.card h3{margin:2px 0 0;font-size:1.1rem}
.card p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.45;flex:1}
.badge{align-self:flex-start;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.badge-admin{background:#3a2a12;color:var(--amber);border:1px solid #6b4a1e}
.badge-use{background:#13302f;color:#5fd0c8;border:1px solid #2E8B8B}
.badge-read{background:#1a2740;color:#8fb0d8;border:1px solid #34507d}
.abrir{margin-top:6px;align-self:flex-start;color:var(--teal);font-weight:700;text-decoration:none}
.proximamente{margin-top:6px;color:var(--muted);font-size:.8rem;font-style:italic}
.adminnote{margin-top:28px;color:var(--muted);font-size:.84rem;border-top:1px solid var(--line);padding-top:16px}
code{background:#0e1a30;padding:2px 6px;border-radius:5px;color:#cfe0f2}

/* CARD COMO ENLACE */
.cardlink{text-decoration:none;color:inherit}
.cardtop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cardfoot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.vermas{color:var(--teal);font-weight:700;font-size:.84rem}

/* BADGE DE ESTADO */
.estado{font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.estado-live{background:#13302f;color:#5fd0c8;border:1px solid #2E8B8B}
.estado-api{background:#1a2740;color:#8fb0d8;border:1px solid #34507d}
.estado-interno{background:#2a2336;color:#c3a6e0;border:1px solid #5a4677}
.estado-bloqueado{background:#3a1d22;color:#ffb3bd;border:1px solid #7d3340}

/* DETALLE DE MÓDULO */
.volver{display:inline-block;color:var(--muted);text-decoration:none;font-size:.86rem;margin-bottom:18px}
.volver:hover{color:var(--ink)}
.mod-head{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.mod-icono{font-size:2.6rem}
.mod-head h1{margin:0 0 8px}
.mod-tags{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mod-block{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-top:18px}
.mod-block h2{margin:0 0 8px;font-size:1rem;color:var(--ink)}
.mod-block p{margin:0;color:var(--muted);line-height:1.6;font-size:.92rem}
.abrir-btn{display:inline-block;margin-top:14px;background:var(--amber);color:#1b2a4a;font-weight:800;text-decoration:none;padding:10px 18px;border-radius:9px}
.abrir-btn:hover{filter:brightness(1.05)}
.nota-interno{margin-top:12px!important;font-style:italic;font-size:.86rem!important}

/* DEMO EMBEBIDA */
.demo{border-color:#2E8B8B}
.demo-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.demo-tag{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:#3a2a12;color:var(--amber);border:1px solid #6b4a1e;padding:3px 8px;border-radius:20px}
.demo-intro{margin-top:10px!important}
.demo-empresa{margin:14px 0 4px;padding:12px 14px;background:#0e1a30;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:4px}
.demo-empresa strong{color:var(--ink)}
.demo-empresa span{color:var(--muted);font-size:.86rem}
.hallazgos{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.hallazgo{background:#0e1a30;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.hallazgo-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.hallazgo-top h3{margin:0;font-size:.98rem;color:var(--ink)}
.hallazgo p{margin:3px 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.hallazgo p b{color:#bcd0e8}
.hallazgo .accion{color:#9fe3db}
.prio{font-size:.64rem;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:20px;white-space:nowrap}
.prio-alta{background:#3a1d22;color:#ffb3bd;border:1px solid #7d3340}
.prio-media{background:#2a2336;color:#c3a6e0;border:1px solid #5a4677}

/* TABLA DE PERFIL (PAPI) */
.perfil-tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:.86rem}
.perfil-tabla th{text-align:left;background:#0e1a30;color:#bcd0e8;padding:8px 10px;border-bottom:1px solid var(--line);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em}
.perfil-tabla td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.perfil-tabla td.num{text-align:center;color:var(--ink);font-weight:700;width:48px}
.vcod{display:inline-block;min-width:20px;text-align:center;background:#16243f;border:1px solid var(--line);border-radius:5px;color:#9fe3db;font-weight:800;font-size:.74rem;padding:1px 5px;margin-right:4px}
.estado-perfil{display:inline-block;font-size:.64rem;font-weight:800;text-transform:uppercase;padding:1px 7px;border-radius:20px;margin-right:6px}
.ep-cumple{background:#1a2740;color:#8fb0d8;border:1px solid #34507d}
.ep-supera{background:#13302f;color:#5fd0c8;border:1px solid #2E8B8B}
.ep-brecha{background:#3a1d22;color:#ffb3bd;border:1px solid #7d3340}
.demo-cierre{margin-top:14px!important;padding:12px 14px;background:#0e1a30;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:8px;color:var(--muted)!important;font-size:.9rem!important}

/* TABLA CAMPO/VALOR (OCR) */
.kv-tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:.9rem}
.kv-tabla td{padding:8px 12px;border-bottom:1px solid var(--line)}
.kv-campo{color:var(--muted);width:42%}
.kv-valor{color:var(--ink);font-weight:600}

/* ITEMS (señales / puntos clave) */
.items{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.item{background:#0e1a30;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.item-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.item-top h3{margin:0;font-size:.98rem;color:var(--ink)}
.item p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}
.item-tag{font-size:.64rem;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:20px;white-space:nowrap}
.tag-oportunidad{background:#13302f;color:#5fd0c8;border:1px solid #2E8B8B}
.tag-tendencia{background:#1a2740;color:#8fb0d8;border:1px solid #34507d}
.tag-riesgo{background:#3a1d22;color:#ffb3bd;border:1px solid #7d3340}
.tag-hallazgo{background:#2a2336;color:#c3a6e0;border:1px solid #5a4677}

/* TRANSCRIPCIÓN (VoxGraph) */
.transcript{margin-top:14px;padding:12px 16px;background:#0e1a30;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px}
.transcript p{margin:6px 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.hablante{color:#9fe3db;font-weight:700}

/* PYRAMID LAYOUT */
.pyramid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 36px;
}

.pyramid-level {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.pyramid-level.level-3 {
  border-color: rgba(253, 152, 0, 0.25);
  box-shadow: 0 4px 20px rgba(253, 152, 0, 0.05);
}

.level-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.level-badge {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  background: var(--primary);
  color: #000;
  padding: 4px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.level-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-light);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pyramid-level.level-3 .level-badge {
  background: var(--primary);
  color: #000;
}

.pyramid-level.level-2 .level-badge {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.pyramid-level.level-1 .level-badge {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--neutral-grey);
}

.pyramid-level.level-3 .grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 720px;
  margin: 0 auto;
}

.pyramid-level.level-2 .grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 720px;
  margin: 0 auto;
}

.pyramid-level.level-1 .grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1080px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pyramid-level.level-3 .grid,
  .pyramid-level.level-2 .grid,
  .pyramid-level.level-1 .grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}