/* ../assets/css/pv_perfiles.css — Bootstrap v2 friendly (DEPURADO + CENTRADO + BUSCADOR GRANDE) */
:root{
  --pv-bg:#f6fbff;
  --pv-card:#ffffff;
  --pv-ink:#123247;
  --pv-muted:#5f7b8f;
  --pv-line:#dceaf6;

  --pv-a:#2b77ff;
  --pv-b:#12c2e9;
  --pv-c:#7b2ff7;

  --pv-soft:#e9f7ff;
  --pv-soft2:#eafff7;

  /* ancho máximo del contenido (para centrar todo) */
  --pv-max:980px;
}

#page_content{ padding-top:70px; }

/* Sizing consistente para evitar desbordes */
.pv-wrap, .pv-wrap *{ box-sizing:border-box; }

/* ✅ Contenedor centrado y compacto */
.pv-wrap{
  background:var(--pv-bg);
  border:1px solid var(--pv-line);
  border-radius:12px;
  padding:12px;

  max-width:var(--pv-max);
  margin:0 auto;
}

/* Sección centrada */
.pv-section{
  max-width:var(--pv-max);
  margin:12px auto 16px;
}

.pv-titlebar{
  background:linear-gradient(
    90deg,
    rgba(43,119,255,.12),
    rgba(18,194,233,.10),
    rgba(123,47,247,.10)
  );
  border:1px solid var(--pv-line);
  border-radius:12px;
  padding:10px 12px;
}

/* Header: alineación limpia */
.pv-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pv-head h4{
  margin:0;
  font-size:15px;
  line-height:1.2;
  color:var(--pv-ink);
}

.pv-sub{
  font-size:12px;
  color:var(--pv-muted);
  margin-top:4px;
}

.pv-pill{
  display:inline-block;
  font-size:12px;
  padding:3px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--pv-line);
  color:var(--pv-ink);
  white-space:nowrap;
}

/* ✅ Toolbar centrado + buscador grande */
.pv-tools{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

/* Bootstrap 2 input-append (ancho y estable) */
.pv-tools .input-append{
  margin:0;
  display:inline-flex;           /* mejor que inline-block para alinear */
  align-items:stretch;
  width:min(720px, 100%);
}

/* Input grande */
.pv-tools .input-append input{
  height:36px;
  font-size:14px;
  line-height:18px;
  padding:8px 10px;
  flex:1 1 auto;                 /* ocupa el ancho disponible */
  min-width:0;                   /* evita overflow en flex */
}

/* Botón a la derecha */
.pv-tools .input-append .btn{
  height:36px;
  min-width:44px;
  padding:8px 12px;
  font-size:14px;
  flex:0 0 auto;
}

/* Botones extra */
.pv-tools .btn{ padding:6px 12px; font-size:12px; }
.pv-tools .btn.btn-mini{ padding:4px 10px; font-size:12px; }

/* Cards (compactas y centradas) */
.pv-card{
  background:var(--pv-card);
  border:1px solid var(--pv-line);
  border-radius:12px;
  overflow:hidden;
  margin:8px auto;
  box-shadow:0 6px 18px rgba(12,36,64,.06);
  max-width:var(--pv-max);

  /* fondo al expandir */
  --pv-open:rgba(234,255,247,.85);
}

.pv-card-hd{
  padding:8px 10px;
  background:linear-gradient(180deg, #ffffff, #f7fbff);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* Link ocupa el centro sin forzar text-align global */
.pv-card-hd a{
  text-decoration:none;
  display:block;
  flex:1;
  text-align:center;
}

.pv-chip{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--pv-soft);
  border:1px solid #bfe8ff;
  color:#0b4a6f;
  white-space:nowrap;
}

.pv-card-bd{
  padding:10px 12px;
  font-size:12px;
  background:#ffffff;

  max-width:880px;
  margin:0 auto;
}

.pv-card-bd strong{ color:var(--pv-ink); }

.pv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
}

.pv-row{ margin:0; }
.pv-k{ color:var(--pv-muted); font-weight:600; }
.pv-v{ color:var(--pv-ink); }

/* Resaltado búsqueda */
.pv-mark{
  background:#ffeaa7;
  padding:0 2px;
  border-radius:4px;
}

/* Fade-in suave */
.pv-fade-in{ animation:pvIn .25s ease-out both; }
@keyframes pvIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}

/* ===== Fondo dinámico al expandir ===== */
.pv-card.is-open .pv-card-bd{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--pv-open), #ffffff);
}

.pv-card.is-open .pv-card-bd::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:60px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  border-bottom:1px solid rgba(0,0,0,.04);
}

.pv-card.is-open .pv-card-bd > *{
  position:relative;
  z-index:1;
}

/* Ajustes móviles */
@media (max-width:767px){
  :root{ --pv-max:100%; }

  .pv-wrap{ padding:10px; border-radius:10px; }

  .pv-head{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .pv-head > div{ text-align:center; }
  .pv-pill{ margin-top:6px; }

  .pv-tools{
    flex-direction:column;
    align-items:stretch;
  }
  .pv-tools .input-append{ width:100%; }

  .pv-grid{ grid-template-columns:1fr; }
  .pv-card-bd{ max-width:100%; }
}

/* ====== REDUCIR ESPACIOS EN BLANCO (Bootstrap 2) ====== */

/* 1) Menú fijo: baja el padding-top a lo justo (ajusta 40-55 según tu navbar) */
#page_content{
  padding-top: 50px;     /* antes 70px */
  padding-bottom: 10px;  /* opcional */
}

/* 2) El navbar de BS2 mete margin-bottom: 20px */
.navbar{
  margin-bottom: 0 !important;
}

/* 3) La container y filas suelen dar aire excesivo */
#page_content.container{
  padding-left: 10px;
  padding-right: 10px;
}

#page_content .ui-page-wrap{
  margin-top: 0 !important;
}

/* 4) Banner (global): elimina el “gap” inferior típico de imágenes inline */
.pv-banner{ text-align:center; margin: 0 0 14px; }
.pv-banner img{
  display:block;
  margin: 0 auto 8px;
  max-width:100%;
  height:auto;
}

/* 5) Tu card principal ya es compacta, pero baja el margen superior si sobra */
.pv-wrap{
  margin-top: 6px !important;
  padding-top: 10px;
}