/* =============================================================================
   pem-tokens.css
   Tokens de diseño y componentes base del sistema PEM.
   Importar en public/css/pem-tokens.css (o referenciar vía Vite).
   ============================================================================= */

:root {
  /* Paleta oficial PEM */
  --navy:      #0B2540;
  --arena:     #C8904A;
  --palma:     #2D8A4E;
  --sol:       #F5A820;
  --turquesa:  #05C2D8;
  --coral:     #E8756A;
  --caribe:    #0891B2;

  /* Variantes suaves para badges, estados, fondos */
  --sol-l:     #FCE9BC;
  --palma-l:   #C5E6CF;
  --caribe-l:  #BDE7EE;
  --tur-l:     #BDE7EE;
  --coral-l:   #F8D2CC;
  --lila:      #8B6CB8;
  --lila-l:    #E3DCEF;
  --arena-l:   #F5E8D4;

  /* Tonos oscuros para texto / hover */
  --caribe-d:  #064F61;
  --sol-d:     #B57509;
  --palma-d:   #1F6938;

  /* Neutros */
  --texto:     #29384C;
  --gris:      #6B7785;
  --gris-l:    #C5CBD3;
  --border:    #E5E7EB;
  --border-2:  #D5D9DF;
  --bg:        #FAF6EE;

  /* Sombras y bordes */
  --shadow:   0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(20,30,50,.04), 0 8px 24px -12px rgba(20,30,50,.12);
  --shadow-m: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(20,30,50,.06), 0 18px 40px -18px rgba(20,30,50,.18);
}

/* =============================================================================
   COMPONENTES BASE
   ============================================================================= */

/* ── Card ─────────────────────────────────────────────────────────────────── */
.pem-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.pem-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 800 14px Nunito, system-ui, sans-serif;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.pem-btn:hover    { transform: translateY(-1px); box-shadow: var(--shadow-m); }
.pem-btn-sm       { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.pem-btn-lg       { height: 48px; padding: 0 24px; font-size: 16px; border-radius: 12px; }

.pem-btn-caribe   { background: var(--caribe);  color: #fff; }
.pem-btn-caribe:hover { background: var(--caribe-d); }
.pem-btn-palma    { background: var(--palma);   color: #fff; }
.pem-btn-palma:hover  { background: var(--palma-d); }
.pem-btn-sol      { background: var(--sol);     color: var(--navy); }
.pem-btn-sol:hover    { background: var(--sol-d); color: #fff; }
.pem-btn-coral    { background: var(--coral);   color: #fff; }
.pem-btn-ghost    { background: transparent; border-color: var(--border); color: var(--navy); box-shadow: none; }
.pem-btn-ghost:hover  { background: var(--arena-l); }

/* ── Tags ────────────────────────────────────────────────────────────────── */
.pem-tag {
  display: inline-block;
  font: 700 10.5px "Nunito Sans", system-ui, sans-serif;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--arena-l);
  border: 1px solid var(--border);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pem-tag-caribe { background: var(--tur-l);   color: var(--caribe-d); border-color: var(--caribe); }
.pem-tag-sol    { background: var(--sol-l);   color: var(--sol-d);    border-color: var(--sol-d); }
.pem-tag-palma  { background: var(--palma-l); color: var(--palma-d);  border-color: var(--palma); }
.pem-tag-lila   { background: var(--lila-l);  color: var(--lila);     border-color: var(--lila); }

/* ── Line tags (las 4 líneas estratégicas) ───────────────────────────────── */
.pem-line-tag-caribe { background: var(--tur-l);   color: var(--caribe-d); }
.pem-line-tag-sol    { background: var(--sol-l);   color: var(--sol-d); }
.pem-line-tag-palma  { background: var(--palma-l); color: var(--palma-d); }
.pem-line-tag-lila   { background: var(--lila-l);  color: var(--lila); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.pem-progress {
  height: 6px;
  background: var(--arena-l);
  border-radius: 999px;
  overflow: hidden;
}
.pem-progress > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--caribe);
  transition: width .6s cubic-bezier(.2,.6,.2,1);
}

/* ── Placeholder de imagen ───────────────────────────────────────────────── */
.pem-placeholder {
  background:
    repeating-linear-gradient(45deg, color-mix(in oklch, var(--gris-l) 60%, transparent) 0 12px, transparent 12px 24px),
    var(--arena-l);
  border: 1px dashed var(--border-2);
  color: var(--gris);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Side title (sidebar h4) ─────────────────────────────────────────────── */
.pem-side-title {
  font-family: Nunito, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris);
  margin: 0 0 12px;
}