/* ==========================================================================
   SALUDAMI DESIGN SYSTEM
   Sistema visual global basado en diseñoUI.html
   ========================================================================== */

:root{
  --sd-dark-bg:#020512;
  --sd-dark-panel:#091326;
  --sd-dark-card:rgba(255,255,255,.035);
  --sd-dark-text:#f7fbff;
  --sd-dark-muted:#9fb3d9;
  --sd-dark-card-title:#cbd5e1;
  --sd-dark-border:rgba(120,140,200,.30);

  --sd-light-bg:#f7fbff;
  --sd-light-panel:#e8f1ff;
  --sd-light-card:#ffffff;
  --sd-light-text:#172033;
  --sd-light-muted:#5c6f91;
  --sd-light-card-title:#4b5563;
  --sd-light-border:rgba(23,32,51,.14);

  --sd-primary:#0077cc;
  --sd-success:#00a878;

  --sd-radius-lg:22px;
  --sd-radius-md:16px;
  --sd-radius-sm:10px;

  --sd-title-size:30px;
  --sd-subtitle-size:16px;
  --sd-card-title-size:18px;
  --sd-card-text-size:14px;
}

html[data-theme="dark"],
body.dark,
body.dark-mode,
body.theme-dark{
  --sd-bg:var(--sd-dark-bg);
  --sd-panel:var(--sd-dark-panel);
  --sd-card:var(--sd-dark-card);
  --sd-text:var(--sd-dark-text);
  --sd-muted:var(--sd-dark-muted);
  --sd-card-title:var(--sd-dark-card-title);
  --sd-border:var(--sd-dark-border);
}

html[data-theme="light"],
body.light,
body.light-mode,
body.theme-light{
  --sd-bg:var(--sd-light-bg);
  --sd-panel:var(--sd-light-panel);
  --sd-card:var(--sd-light-card);
  --sd-text:var(--sd-light-text);
  --sd-muted:var(--sd-light-muted);
  --sd-card-title:var(--sd-light-card-title);
  --sd-border:var(--sd-light-border);
}

html:not([data-theme]){
  --sd-bg:var(--sd-dark-bg);
  --sd-panel:var(--sd-dark-panel);
  --sd-card:var(--sd-dark-card);
  --sd-text:var(--sd-dark-text);
  --sd-muted:var(--sd-dark-muted);
  --sd-card-title:var(--sd-dark-card-title);
  --sd-border:var(--sd-dark-border);
}

body{ font-family:Arial,Helvetica,sans-serif; }

.main-title,.page-title,.screen-title,.module-main-title,.titulo-pilares,.hero-title,.dashboard-title,.section-main-title,.form-main-title,.lab-title,.medical-title,main h1,.app-main h1,.page h1,.content h1{
  font-size:var(--sd-title-size)!important;
  font-weight:500!important;
  color:var(--sd-success)!important;
  line-height:1.18!important;
  letter-spacing:-.02em!important;
}

.subtitle,.page-subtitle,.section-subtitle,.hero-subtitle,.module-subtitle,main h2,.app-main h2,.page h2,.content h2{
  font-size:var(--sd-subtitle-size)!important;
  font-weight:500!important;
  color:var(--sd-text)!important;
  line-height:1.5!important;
}

.card h3,.pilar-card h3,.module-card h3,.section-card h3,.panel-title,.card-title,.form-section-title,.lab-section-title,fieldset legend,main h3,.app-main h3,.page h3,.content h3{
  font-size:var(--sd-card-title-size)!important;
  font-weight:400!important;
  color:var(--sd-card-title)!important;
}

.card p,.pilar-card p,.module-card p,.section-card p,.card-text,.description,.help-text,.hint,.lab-muted,.form-help,small{
  font-size:var(--sd-card-text-size)!important;
  font-weight:400!important;
  line-height:1.45!important;
  color:var(--sd-muted)!important;
}

.panel,.page-panel,.module-panel,.section-panel,.lab-shell,.medical-shell,.form-shell{
  border-radius:var(--sd-radius-lg)!important;
  border:1px solid var(--sd-border)!important;
}

.card,.pilar-card,.module-card,.section-card,.form-card{
  border-radius:var(--sd-radius-md)!important;
  border:1px solid var(--sd-border)!important;
}

.btn,button{ border-radius:var(--sd-radius-sm)!important; }

.btn-primary,.primary-btn{
  background:var(--sd-primary)!important;
  color:#fff!important;
}

.btn-secondary,.secondary-btn{
  background:transparent!important;
  color:var(--sd-success)!important;
  border:1px solid var(--sd-success)!important;
}


/* ==========================================================================
   PERFIL · DATOS DE IDENTIFICACIÓN
   Ajuste visual solamente: conserva IDs, formulario, botones y JavaScript.
   ========================================================================== */

.profile-identification-page .page {
  width: min(94vw, 900px);
}

.profile-identification-page .profile-card.page-card {
  background: var(--card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg) !important;
  box-shadow: 0 10px 40px var(--shadow);
}

.profile-identification-page .profile-card > .profile-screen-title {
  margin: 4px 0 18px !important;
  text-align: center !important;
  font-size: var(--sd-title-size) !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  color: var(--sd-success) !important;
}

.profile-identification-page .field label {
  color: var(--sd-card-title) !important;
  font-size: var(--sd-card-text-size) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.profile-identification-page input,
.profile-identification-page textarea,
.profile-identification-page select {
  border-radius: var(--sd-radius-sm) !important;
  border-color: var(--sd-border) !important;
}

.profile-identification-page .profile-actions .action {
  background: var(--sd-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.profile-identification-page .error {
  color: var(--sd-success) !important;
  font-size: var(--sd-card-text-size) !important;
  font-weight: 400 !important;
}

@media (max-width: 767px) {
  .profile-identification-page .profile-card > .profile-screen-title {
    font-size: 26px !important;
  }
}