/*
 * panel.css — shell + identidad visual del panel del dueño (/mi-negocio/).
 *
 * El panel lo pinta el plugin directorio-local (class-business-portal.php),
 * que expone TODO su color y tipografia como tokens --dlo-* sobre #dlo-wrap
 * (panel) y .dlc-wrap (login). Aqui se sobrescriben esos tokens con la
 * identidad de Provoca: un panel, muchas marcas.
 *
 * REGLA: no pelear con el plugin a punta de reglas nuevas. Si algo se ve mal,
 * primero mirar si hay un token que lo controle. Reglas propias solo para el
 * shell (header/main/footer) y para lo que no tenga token.
 *
 * Paleta Provoca: crema #fff2e1 · tomate #f24b38 · berenjena #35113f
 * Tipografia: Baloo 2 (titulares) + Poppins (cuerpo), igual que el landing.
 */

body.provoca-panel {
  margin: 0;
  background: #fdf7ef;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #3a2e3f;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- shell ---------- */

.pp-header {
  background: #fff2e1;
  border-bottom: 1px solid #efe0d5;
  padding: 14px 20px;
}

.pp-header-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pp-header img {
  height: 34px;
  width: auto;
  display: block;
}

.pp-header-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a7b86;
}

.pp-main {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 12px 40px;
  box-sizing: border-box;
}

.pp-footer {
  text-align: center;
  padding: 20px 12px 28px;
  font-size: 12.5px;
  color: #8a7b86;
  border-top: 1px solid #efe0d5;
}

.pp-footer a {
  color: #35113f;
  font-weight: 600;
  text-decoration: none;
}

.pp-footer a:hover {
  text-decoration: underline;
}

/* ---------- identidad del panel (tokens del plugin) ---------- */

body.provoca-panel #dlo-wrap,
body.provoca-panel .dlc-wrap {
  --dlo-brand: #35113f;
  --dlo-brand-2: #52204f;
  --dlo-brand-ink: #fff2e1;
  --dlo-accent: #f24b38;
  --dlo-accent-d: #d63c2a;
  --dlo-accent-ink: #ffffff;
  --dlo-accent-soft: rgba(242, 75, 56, 0.1);
  --dlo-gold: #f0a52e;
  --dlo-gold-ink: #3a2400;
  --dlo-ok: #2f9e6f;
  --dlo-warn: #b45309;
  --dlo-bg: transparent;
  --dlo-surface: #ffffff;
  --dlo-surface-2: #fff8ef;
  --dlo-line: #efe0d5;
  --dlo-ink: #3a2e3f;
  --dlo-muted: #8a7b86;
  --dlo-radius: 20px;
  --dlo-radius-sm: 14px;
  --dlo-shadow: 0 6px 20px rgba(53, 17, 63, 0.05);
  --dlo-shadow-lg: 0 14px 34px rgba(53, 17, 63, 0.12);
  --dlo-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dlo-font-head: "Baloo 2", "Poppins", ui-sans-serif, system-ui, sans-serif;
  --dlo-head-bg: linear-gradient(135deg, #35113f 0%, #52204f 62%, #6b2a52 100%);
}

/* Baloo 2 monta alto: sin este ajuste los titulares se ven despegados de su
   linea base junto a Poppins. */
body.provoca-panel #dlo-wrap .dlo-head h1,
body.provoca-panel #dlo-wrap .dlo-stat .dlo-n,
body.provoca-panel .dlc-card h2 {
  letter-spacing: -0.01em;
}

body.provoca-panel #dlo-wrap {
  padding-top: 24px;
}

@media (max-width: 700px) {
  .pp-header-tag {
    display: none;
  }

  .pp-main {
    padding: 4px 8px 32px;
  }
}