/* ==========================================================================
   Perspecta — tema "Clean White" sobre Bootstrap 5.3
   Cargar DESPUÉS de bootstrap.min.css.
   Paleta: azul #25408F (acciones), naranja #EE6542 (solo acento: botón Soporte,
   etiqueta "Continuar", detalles de marca), verde #10B981 / ámbar #F59E0B (estados).
   ========================================================================== */

:root {
  --pv-primary: #25408F;
  --pv-primary-hover: #1E3474;
  --pv-primary-soft: #EEF2FA;
  --pv-accent: #EE6542;
  --pv-accent-hover: #D95634;
  --pv-success: #10B981;
  --pv-success-soft: #DCFCE7;
  --pv-success-text: #166534;
  --pv-warning: #F59E0B;
  --pv-warning-soft: #FEF3C7;
  --pv-warning-text: #92400E;
  --pv-bg: #F8FAFC;
  --pv-surface: #FFFFFF;
  --pv-border: #E2E8F0;
  --pv-active: #F1F5F9;
  --pv-text-900: #0F172A;
  --pv-text-700: #334155;
  --pv-text-500: #64748B;
  --pv-radius: 16px;
  --pv-radius-sm: 12px;
  --pv-shadow: 0 4px 20px rgba(0, 0, 0, .03);

  /* Bootstrap overrides */
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-bg: var(--pv-bg);
  --bs-body-color: var(--pv-text-700);
  --bs-heading-color: var(--pv-text-900);
  --bs-primary: var(--pv-primary);
  --bs-primary-rgb: 37, 64, 143;
  --bs-link-color: var(--pv-primary);
  --bs-link-color-rgb: 37, 64, 143;
  --bs-link-hover-color: var(--pv-primary-hover);
  --bs-link-hover-color-rgb: 30, 52, 116;
  --bs-border-color: var(--pv-border);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: var(--pv-radius-sm);
  --bs-border-radius-xl: var(--pv-radius);
}

body { background: var(--pv-bg); -webkit-font-smoothing: antialiased; }
.pv-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--pv-primary); font-size: 2rem; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .15s; }
.pv-play:hover { transform: scale(1.06); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--pv-text-900); font-weight: 700; letter-spacing: -.01em; }
.text-muted, .text-secondary { color: var(--pv-text-500) !important; }
.text-pv-primary { color: var(--pv-primary) !important; }
a { text-decoration: none; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; border-radius: 10px; }
.btn-primary {
  --bs-btn-bg: var(--pv-primary); --bs-btn-border-color: var(--pv-primary);
  --bs-btn-hover-bg: var(--pv-primary-hover); --bs-btn-hover-border-color: var(--pv-primary-hover);
  --bs-btn-active-bg: var(--pv-primary-hover); --bs-btn-active-border-color: var(--pv-primary-hover);
  --bs-btn-disabled-bg: var(--pv-primary); --bs-btn-disabled-border-color: var(--pv-primary);
  --bs-btn-focus-shadow-rgb: 37, 64, 143;
}
.btn-outline-primary {
  --bs-btn-color: var(--pv-primary); --bs-btn-border-color: var(--pv-primary);
  --bs-btn-hover-bg: var(--pv-primary); --bs-btn-hover-border-color: var(--pv-primary);
  --bs-btn-active-bg: var(--pv-primary); --bs-btn-active-border-color: var(--pv-primary);
}
.btn-outline-pv {
  --bs-btn-color: var(--pv-text-700); --bs-btn-bg: #fff; --bs-btn-border-color: #CBD5E1;
  --bs-btn-hover-color: var(--pv-text-900); --bs-btn-hover-bg: var(--pv-bg); --bs-btn-hover-border-color: #CBD5E1;
  --bs-btn-active-bg: var(--pv-active); --bs-btn-active-color: var(--pv-text-900);
}
.btn-success-outline {
  --bs-btn-color: var(--pv-success-text); --bs-btn-border-color: var(--pv-success);
  --bs-btn-hover-bg: var(--pv-success-soft); --bs-btn-hover-color: var(--pv-success-text);
}
.btn-lg-touch { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.pv-logo { height: 22px; width: auto; display: block; }
.pv-logo-lg { height: 30px; }
.btn-whatsapp { --bs-btn-color: #fff; --bs-btn-bg: #25D366; --bs-btn-border-color: #25D366;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1EBE5A; --bs-btn-hover-border-color: #1EBE5A;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #19A94F; --bs-btn-active-border-color: #19A94F;
  --bs-btn-focus-shadow-rgb: 37, 211, 102; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.btn-whatsapp-outline { --bs-btn-color: #128C4A; --bs-btn-bg: #fff; --bs-btn-border-color: #25D366;
  --bs-btn-hover-color: #0B6B37; --bs-btn-hover-bg: #ECFDF3; --bs-btn-hover-border-color: #25D366;
  --bs-btn-active-color: #0B6B37; --bs-btn-active-bg: #D1FAE0; --bs-btn-active-border-color: #25D366;
  --bs-btn-focus-shadow-rgb: 37, 211, 102; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }


/* ---------- Tarjetas ---------- */
.pv-card {
  background: var(--pv-surface); border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius); box-shadow: var(--pv-shadow);
}
.pv-card-body { padding: 1.5rem; }
@media (max-width: 575.98px) { .pv-card-body { padding: 1rem; } }


/* ---------- Badges / pills ---------- */
.pv-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600;
  padding: .3rem .75rem; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.pv-badge-active { background: var(--pv-success-soft); color: var(--pv-success-text); border: 1px solid #A7F3D0; }
.pv-badge-active::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pv-success); }
.pv-badge-pending { background: var(--pv-warning-soft); color: var(--pv-warning-text); border: 1px solid #FDE68A; }
.pv-badge-pending::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pv-warning); }
.pv-badge-done { background: #fff; color: var(--pv-success-text); border: 1px solid #A7F3D0; }
.pv-pill { display: inline-block; background: #EFF6FF; color: var(--pv-primary); font-size: .75rem; font-weight: 600;
  padding: .3rem .75rem; border-radius: 999px; }
.pv-tag-continue { background: var(--pv-accent); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: .3rem .65rem; border-radius: 6px; }
.pv-tag-cat { position: absolute; top: 12px; left: 12px; background: rgba(15, 23, 42, .78); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 6px; z-index: 2; }
.pv-tag-done { position: absolute; top: 12px; right: 12px; z-index: 2; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); }


/* ---------- Progreso ---------- */
.progress { height: 8px; background: var(--pv-border); border-radius: 999px; }
.progress-bar { background: var(--pv-primary); border-radius: 999px; }
.progress-bar.is-done { background: var(--pv-success); }


/* ---------- Formularios ---------- */
.form-control { border-color: #CBD5E1; border-radius: 10px; min-height: 46px; }
.form-control:focus { border-color: var(--pv-primary); box-shadow: 0 0 0 .2rem rgba(37, 64, 143, .15); }
.form-label { font-weight: 600; font-size: .875rem; color: var(--pv-text-900); }
.pv-input-icon { position: relative; }
.pv-input-icon > .bi:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pv-text-500); pointer-events: none; }
.pv-input-icon .form-control { padding-left: 2.6rem; }
.pv-input-icon .pv-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--pv-text-500); padding: .5rem .75rem; }


/* ---------- Varios ---------- */
.pv-page { max-width: 1280px; }
.pv-breadcrumb { font-size: .875rem; }
.pv-breadcrumb a { color: var(--pv-text-500); }
.pv-breadcrumb a:hover { color: var(--pv-primary); }
.pv-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-text-500); }
.pv-hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--pv-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ---------- Avatar con iniciales y portada sin imagen (plugin) ---------- */
.pv-avatar-initials { display: inline-grid; place-items: center; background: var(--pv-primary-soft); color: var(--pv-primary);
  font-weight: 700; font-size: .85rem; border: 1px solid var(--pv-border); border-radius: 50%; width: 40px; height: 40px; flex: 0 0 auto; }
.pv-cover-ph { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255,255,255,.85); font-size: 2.5rem;
  background: linear-gradient(135deg, var(--pv-primary), #3B5BB5); }
.pv-video-empty { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem; color: #fff; background: rgba(15,23,42,.75); font-size: .85rem; text-align: center; }