/* ===== PERFIL – Variante Split Header (morado sutil, sin tocar HTML) ===== */
:root{
  --vio-050:#faf8ff;
  --vio-100:#f1ecff;
  --vio-200:#e5dcff;
  --vio-500:#6f49b8;   /* acento principal */
  --vio-600:#5f3daa;   /* acento más oscuro */
  --ink-900:#1f1b2a;   /* texto */
  --line:#ebe7f5;      /* borde sutil */
}

/* CONTENEDOR: base blanca con sombra */
.bg-primary-300.rounded.position-relative.text-white.mb-g{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  color:var(--ink-900);
  box-shadow:0 14px 32px rgba(28,12,70,.12);
  position:relative;
  overflow:hidden;
}

/* HEADER CURVO SUAVE (morado sutil) */
.bg-primary-300.rounded.position-relative.text-white.mb-g::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:110px;
  background:linear-gradient(180deg, var(--vio-100) 0%, var(--vio-200) 100%);
  border-bottom-left-radius:60% 30%;
  border-bottom-right-radius:60% 30%;
  box-shadow: inset 0 -1px 0 rgba(111,73,184,.08);
}

/* HIGHLIGHT detrás del avatar (muy suave) */
.bg-primary-300.rounded.position-relative.text-white.mb-g::after{
  content:"";
  position:absolute; left:50%; top:64px; transform:translateX(-50%);
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(111,73,184,.18), transparent 65%);
  filter: blur(6px);
  pointer-events:none;
}

/* AVATAR: aro limpio + sombra (override del width inline) */
.bg-primary-300.rounded.position-relative.text-white.mb-g .img-thumbnail.rounded-circle{
  width: clamp(120px, 26vw, 180px) !important;
  border:0;
  background:#fff;
  box-shadow:
    0 10px 26px rgba(24,10,60,.16),
    0 0 0 6px #fff,
    0 0 0 2px rgba(111,73,184,.28);
  position:relative;
  z-index:1;
}

/* BOTÓN ICONO: compacto, borde sutil y hover elegante */
.bg-primary-300.rounded.position-relative.text-white.mb-g .btn.btn-icon{
  width:52px; height:52px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px;
  border:1px solid var(--vio-200);
  background:#fff;
  color:var(--vio-600)!important;
  box-shadow:0 8px 20px rgba(28,12,70,.10);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  position:relative; z-index:1;
}
.bg-primary-300.rounded.position-relative.text-white.mb-g .btn.btn-icon:hover{
  transform:translateY(-2px);
  background:var(--vio-050);
  border-color:#ddd3ff;
  box-shadow:0 12px 26px rgba(28,12,70,.14);
}
.bg-primary-300.rounded.position-relative.text-white.mb-g .btn.btn-icon i{
  font-size:1.15rem; line-height:1;
  color:inherit;
}

/* CARD DE DATOS (dl): blanco con borde y sombra suave */
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row{
  background:#fff;
  color:var(--ink-900);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 20px;
  margin-top:14px;
  box-shadow:0 12px 24px rgba(26,10,64,.10);
}

/* Separadores y ritmo vertical */
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dt[class*="col-"],
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dd[class*="col-"]{
  padding:10px 0;
  border-top:1px dashed #eee9fb;
  line-height:1.45;
}
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dt[class*="col-"]:first-of-type,
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dt[class*="col-"]:first-of-type + dd[class*="col-"]{
  border-top:0;
}

/* Etiquetas (dt) con bullet y acento */
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dt[class*="col-"]{
  color:var(--vio-600);
  font-weight:700;
  letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dt[class*="col-"]::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--vio-500);
  flex:0 0 6px;
}

/* Valores (dd) */
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dd[class*="col-"]{
  color:#2b2a33;
  font-weight:600;
}

/* Enlaces en dd */
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dd[class*="col-"] a{
  color:var(--vio-600);
  text-decoration:none;
  border-bottom:1px dotted var(--vio-200);
}
.bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dd[class*="col-"] a:hover{
  color:#7e62d6;
}

/* Título dentro del h5 */
.bg-primary-300.rounded.position-relative.text-white.mb-g h5.mb-0.fw-700.text-center.mt-3{
  color:#2b2a33; font-weight:700; margin-top:14px;
}

/* Accesibilidad y responsive */
@media (prefers-reduced-motion: reduce){
  .bg-primary-300.rounded.position-relative.text-white.mb-g .btn.btn-icon{
    transition:none;
  }
}
@media (max-width:576px){
  .bg-primary-300.rounded.position-relative.text-white.mb-g dl.row{
    padding:12px 14px; border-radius:14px;
  }
  .bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dt[class*="col-"],
  .bg-primary-300.rounded.position-relative.text-white.mb-g dl.row > dd[class*="col-"]{
    padding:8px 0;
  }
  .bg-primary-300.rounded.position-relative.text-white.mb-g .img-thumbnail.rounded-circle{
    width:140px !important;
  }
}


/* ===== FORM MÉDICO – Card estilo “pro” (morado sutil) ===== */
:root{
  --mauve-050:#faf9ff;
  --mauve-100:#f1ecff;
  --mauve-200:#e7dfff;
  --mauve-500:#7b58c9;
  --mauve-600:#6f49b8;
  --mauve-700:#5a3aa2;
  --ink-900:#1f1b2a;
  --ink-600:#4b4556;
  --line:#ece8f6;
}

/* Card base */
.card.mb-g{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 12px 28px rgba(28,12,70,.12);
  overflow:hidden;
}

/* Título */
.card.mb-g h2.mb-0.fs-xl{
  color:var(--mauve-700);
  font-weight:800;
  letter-spacing:.2px;
  position:relative;
  padding-bottom:6px;
}
.card.mb-g h2.mb-0.fs-xl::after{
  content:"";
  position:absolute; left:0; bottom:0; width:72px; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--mauve-600),#8a6ee0);
}

/* Panel interior */
.card.mb-g .panel-content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  margin:0 16px 16px;
  box-shadow:0 10px 22px rgba(26,10,64,.08);
}
.card.mb-g .modal-body{ padding:16px; }

/* Labels */
.card.mb-g .form-label{
  color:var(--ink-900);
  font-weight:600;
  font-size:.94rem;
  margin-bottom:.35rem;
}

/* Inputs / Selects / Textareas */
.card.mb-g .form-control,
.card.mb-g select.form-control{
  border:1px solid #dcd7ef;
  border-radius:10px;
  padding:.55rem .75rem;
  font-size:.95rem;
  color:#2b2a33;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.card.mb-g .form-control:focus,
.card.mb-g select.form-control:focus{
  border-color:var(--mauve-600);
  box-shadow:0 0 0 3px rgba(111,73,184,.16);
  background:#fff;
  outline:0;
}
.card.mb-g textarea.form-control{
  resize:vertical;
}

/* Input-group adornos */
.card.mb-g .input-group .input-group-text{
  background:#f2edff;
  border:1px solid #dcd7ef;
  color:var(--mauve-700);
  border-radius:10px 0 0 10px;
}

/* Filas / separación */
.card.mb-g .form-row,
.card.mb-g .row{ margin-bottom:10px; }
.card.mb-g .form-group{ margin-bottom:12px; }

/* Custom checkbox (Bootstrap) */
.card.mb-g .custom-control-label{
  color:var(--ink-600);
  cursor:pointer;
}
.card.mb-g .custom-control-label::before{
  background:#fff;
  border:1px solid #cfc7ea;
  border-radius:.25rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.card.mb-g .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow:0 0 0 .2rem rgba(111,73,184,.15);
  border-color:var(--mauve-600);
}
.card.mb-g .custom-control-input:checked ~ .custom-control-label::before{
  background:var(--mauve-600);
  border-color:var(--mauve-600);
}
.card.mb-g .custom-control-input:checked ~ .custom-control-label::after{
  filter:brightness(0) invert(1);
}

/* Footer y botón principal */
.card.mb-g .modal-footer{
  border-top:1px solid var(--line);
  background:#fff;
  padding:14px 16px;
}
.card.mb-g .btn.btn-primary{
  background:linear-gradient(180deg, var(--mauve-600), #653fb0);
  border:none;
  color:#fff;
  border-radius:10px;
  padding:.55rem 1.1rem;
  font-weight:700;
  box-shadow:0 8px 20px rgba(111,73,184,.22);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.card.mb-g .btn.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(111,73,184,.26);
}
.card.mb-g .btn.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(111,73,184,.18);
}

/* Estados de validación (opcional) */
.card.mb-g .form-control.is-invalid,
.card.mb-g .was-validated .form-control:invalid{
  border-color:#e24a4a;
  box-shadow:0 0 0 3px rgba(226,74,74,.12);
}
.card.mb-g .form-control.is-valid,
.card.mb-g .was-validated .form-control:valid{
  border-color:#3bb273;
  box-shadow:0 0 0 3px rgba(59,178,115,.12);
}

/* Responsive fino */
@media (max-width:576px){
  .card.mb-g{ border-radius:14px; }
  .card.mb-g .panel-content{ margin:0 10px 12px; border-radius:12px; }
  .card.mb-g .modal-body{ padding:12px; }
}

/* ===== Tipografía más compacta en la card del formulario ===== */
.card.mb-g{
  font-size: .92rem;             /* base un poco más pequeña */
}

.card.mb-g h2.mb-0.fs-xl{
  font-size: 1rem;               /* título más compacto */
}

.card.mb-g .form-label{
  font-size: .85rem;             /* etiquetas */
}

.card.mb-g .form-control,
.card.mb-g select.form-control,
.card.mb-g textarea.form-control{
  font-size: .88rem;             /* texto de inputs/selects/textarea */
  padding: .45rem .65rem;        /* ajusta altura acorde al tamaño */
}

.card.mb-g .input-group .input-group-text{
  font-size: .85rem;             /* prefijo/sufijo de input-group */
}

.card.mb-g .custom-control-label{
  font-size: .86rem;             /* checkboxes */
}

.card.mb-g .btn.btn-primary{
  font-size: .88rem;             /* botón */
  padding: .45rem .9rem;
}

/* ===== Overrides tipografía compacta (forzados) ===== */

/* Título */
.card.mb-g .fs-xl,
.card.mb-g h1,
.card.mb-g h2,
.card.mb-g h3{
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

/* Labels */
.card.mb-g .form-label{
  font-size: .82rem !important;
  letter-spacing: .02em !important;
}

/* Inputs / Selects / Textareas */
.card.mb-g .form-control,
.card.mb-g select.form-control,
.card.mb-g textarea.form-control{
  font-size: .85rem !important;
  padding: .40rem .60rem !important;
  height: auto !important;           /* evita alturas fijas */
}

/* Input group addons */
.card.mb-g .input-group-text{
  font-size: .80rem !important;
  padding: .40rem .60rem !important;
}

/* Checkbox / radios */
.card.mb-g .custom-control-label{
  font-size: .85rem !important;
}

/* Texto en MAYÚSCULAS muy denso → ajusta tracking */
.card.mb-g .text-uppercase{
  letter-spacing: .02em !important;
}

/* Espaciado un poco más compacto */
.card.mb-g .form-group{ margin-bottom: .6rem !important; }
.card.mb-g .form-row,
.card.mb-g .row{ margin-bottom: .5rem !important; }


/* ===== PANEL HISTORIAL MÉDICO – morado sutil, limpio ===== */
:root{
  --vio-50:#faf8ff;
  --vio-100:#f1ecff;
  --vio-200:#e5dcff;
  --vio-500:#6f49b8;   /* acento */
  --vio-600:#5e3daa;   /* acento oscuro */
  --ink-900:#1f1b2a;
  --ink-600:#4b4556;
  --line:#ebe7f5;
}

/* Panel card */
#panel-1.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 14px 32px rgba(28,12,70,.12);
  overflow:hidden;
}

/* Header */
#panel-1 .panel-hdr{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 16px;
}
#panel-1 .panel-hdr h2{
  color:var(--vio-600);
  font-weight:800;
  font-size:1rem;               /* compacto */
  letter-spacing:.2px;
  position:relative;
  padding-bottom:6px;
  margin:0;
}
#panel-1 .panel-hdr h2::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:80px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--vio-500),#8666d6);
}

/* Botón “Agregar” */
#panel-1 .panel-toolbar .btn.btn-primary{
  background:linear-gradient(180deg,var(--vio-500),#5b38a8);
  border:none;
  color:#fff!important;
  border-radius:10px;
  padding:.45rem .9rem;
  font-weight:700;
  box-shadow:0 8px 20px rgba(111,73,184,.22);
  transition:transform .08s ease, box-shadow .2s ease;
}
#panel-1 .panel-toolbar .btn.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(111,73,184,.26);
}

/* Contenedores internos */
#panel-1 .panel-container{ padding:12px 16px; }
#panel-1 .panel-content{ background:#fff; border-radius:14px; }

/* Labels + campos */
#panel-1 .form-label{
  color:var(--ink-900);
  font-weight:700;
  font-size:.84rem;             /* más pequeño */
  letter-spacing:.02em;
  margin-bottom:.35rem;
}
#panel-1 .form-control,
#panel-1 select.form-control{
  border:1px solid #dcd7ef;
  border-radius:10px;
  background:#fff;
  color:#2b2a33;
  font-size:.88rem;             /* compacto */
  padding:.44rem .65rem;
  transition:border-color .15s, box-shadow .15s;
}
#panel-1 .form-control:focus,
#panel-1 select.form-control:focus{
  border-color:var(--vio-500);
  box-shadow:0 0 0 3px rgba(111,73,184,.16);
  outline:0;
}
#panel-1 .input-group-text{
  background:#f2edff;
  border:1px solid #dcd7ef;
  color:var(--vio-600);
  border-radius:10px 0 0 10px;
  font-size:.82rem;
  padding:.44rem .6rem;
}

/* Tabla */
#panel-1 table.table{
  border-collapse:separate;
  border-spacing:0;
  font-size:.9rem;
}
#panel-1 thead th{
  background:#6f49b8 !important;   /* encabezado morado */
  color:#fff;
  border:0;
  padding:.65rem .8rem;
  vertical-align:middle;
}
#panel-1 thead tr#busqueda th:first-child{
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}
#panel-1 thead tr#busqueda th:last-child{
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}
#panel-1 tbody tr{
  border-top:1px solid #f0eaff;
}
#panel-1 tbody tr:nth-child(even){
  background:#faf9ff;
}
#panel-1 tbody tr:hover{
  background:#f4f0ff;
}
#panel-1 tbody td{
  vertical-align:middle;
  padding:.6rem .75rem;
}

/* Botón eliminar redondo */
#panel-1 .btn.btn-danger.btn-icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:none;
  box-shadow:0 8px 18px rgba(226,74,74,.22);
  transition:transform .08s ease, box-shadow .2s ease;
}
#panel-1 .btn.btn-danger.btn-icon:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(226,74,74,.26);
}

/* Espaciado entre filas de formulario */
#panel-1 .row, #panel-1 .form-row{ margin-bottom:.65rem; }
#panel-1 .form-group{ margin-bottom:.7rem; }

/* Responsive fino */
@media (max-width:576px){
  #panel-1 .panel-container{ padding:10px 12px; }
  #panel-1 thead th{ font-size:.86rem; }
}
/* ===== Input group “pill” continuo con icono (panel-1) ===== */
#panel-1 .input-group{
  align-items: stretch;
  border-radius: 12px;
  /* sombra alrededor del conjunto */
  box-shadow: 0 10px 20px rgba(28,12,70,.10);
}

#panel-1 .input-group-prepend{ margin-right: 0 !important; }

/* Caja del icono */
#panel-1 .input-group-text{
  height: 40px;
  min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #f2edff;                 /* morado muy suave */
  color: #6f49b8;
  border: 1px solid #dcd7ef;
  border-right: 0;                      /* une con el input */
  border-radius: 12px 0 0 12px !important;
  padding: 0 .75rem;
  line-height: 1;
}
#panel-1 .input-group-text i{ font-size: 1rem; }

/* Campo */
#panel-1 .input-group .form-control{
  height: 40px;
  border: 1px solid #dcd7ef;
  border-left: 0;                       /* une con el icono */
  border-radius: 0 12px 12px 0 !important;
  font-size: .9rem;
  padding: .45rem .65rem;
  background: #fff;
  box-shadow: none;
}

/* Focus coherente en ambos lados */
#panel-1 .input-group:focus-within .form-control{
  border-color: #6f49b8;
  box-shadow: 0 0 0 3px rgba(111,73,184,.16);
}
#panel-1 .input-group:focus-within .input-group-text{
  border-color: #6f49b8;
  background: #efe8ff;
  color: #5a3aa2;
}

/* Versión compacta (opcional) */
#panel-1 .form-group .form-control,
#panel-1 .form-group .input-group-text{
  /* por si algún control tiene otra altura por el tema */
  height: 38px;
}



/* ===== PERFIL CARD (apunta EXACTO al div .p-3.rounded.overflow-hidden.position-relative.text-black.mb-g) ===== */

.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g{
  background: linear-gradient(180deg, #faf8ff 0%, #ffffff 70%) !important;
  border: 1px solid #ebe7f5 !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 32px rgba(28,12,70,.12) !important;
  color: #1f1b2a !important;
  overflow: hidden !important;
}

/* Card interna */
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g > .card.mb-g.rounded-top{
  background: #fff !important;
  border: 1px solid #ebe7f5 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 26px rgba(26,10,64,.10) !important;
}

/* Avatar (anula el width inline del IMG) */
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g img.img-thumbnail.rounded-circle{
  width: clamp(120px, 26vw, 180px) !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow:
    0 10px 26px rgba(24,10,60,.16),
    0 0 0 6px #fff,
    0 0 0 2px rgba(111,73,184,.28) !important;
}

/* Botones (Ficha Médica / Editar) */
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g a.btn.btn-success.btn-sm{
  background: linear-gradient(180deg, #6f49b8, #5b38a8) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: .45rem .85rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(111,73,184,.22) !important;
  transition: transform .08s ease, box-shadow .2s ease !important;
}
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g a.btn.btn-success.btn-sm:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(111,73,184,.26) !important;
}

/* Nombre + documento */
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g h5.mb-0.fw-700.text-center.mt-3{
  font-weight: 800 !important;
  color: #1f1b2a !important;
}
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g h5 .text-muted{
  display: block !important;
  margin-top: 6px !important;
  color: #6a6680 !important;     /* sobreescribe .text-muted del tema */
  font-weight: 600 !important;
}

/* “Stats” (6 columnas inferiores) como tarjetitas */
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g .row-grid > [class^="col-"] .text-center{
  background: #fff !important;
  border: 1px solid #ebe7f5 !important;
  border-radius: 14px !important;
  margin: 8px !important;
  box-shadow: 0 10px 20px rgba(26,10,64,.08) !important;
  padding: 14px 8px !important;
}
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g .row-grid > [class^="col-"] h5.mb-0.fw-700{
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #2b2a33 !important;
}
.p-3.rounded.overflow-hidden.position-relative.text-black.mb-g .row-grid > [class^="col-"] h5 small{
  display: block !important;
  margin-top: 6px !important;
  color: #7a7690 !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

/* Responsive */
@media (max-width:576px){
  .p-3.rounded.overflow-hidden.position-relative.text-black.mb-g{ border-radius:14px !important; }
  .p-3.rounded.overflow-hidden.position-relative.text-black.mb-g img.img-thumbnail.rounded-circle{
    width:140px !important;
  }
  .p-3.rounded.overflow-hidden.position-relative.text-black.mb-g .row-grid > [class^="col-"] .text-center{
    margin:6px 4px !important; padding:12px 8px !important;
  }
}