:root {
  --navy: #17354b;
  --green: #7fbf55;
  --green2: #b9dc7a;
  --mint: #eef8ea;
  --cream: #fffaf2;
  --coral: #ef8d76;
  --blue: #5578a9;
  --ink: #183041;
  --white: #fff;
  --shadow: 0 18px 50px rgba(22, 53, 75, 0.12);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;
  color: var(--ink);
  background: #fff;
}
a {
  text-decoration: none;
  color: inherit;
}
.container {
  width: min(1400px, 92%);
  margin: auto;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #eaf0e6;
}
.navin {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo {
  font-weight: 900;
  font-size: 24px;
  color: var(--navy);
}
.logo b {
  color: var(--green);
}
.navlinks {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-weight: 700;
  font-size: 14px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  font-weight: 800;
  cursor: pointer;
  background: var(--navy);
  color: #fff;
}
.btn.green {
  background: var(--green);
}
.btn.light {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow);
}
.hero {
  min-height: 660px;
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(247, 251, 239, 0.97) 0 46%, rgba(247, 251, 239, 0.25)),
    url("../img/inspiracion.png") center/cover;
}
.hero:after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: #d9efbd;
  right: -140px;
  top: -120px;
  opacity: 0.5;
}
.hero .content {
  position: relative;
  z-index: 2;
  max-width: 690px;
}
.eyebrow {
  color: #579337;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 13px;
}
.hero h1 {
  font-size: clamp(48px, 6vw, 78px);
  line-height: 0.95;
  margin: 14px 0 22px;
  color: var(--navy);
  letter-spacing: -0.055em;
}
.hero h1 em {
  color: var(--green);
  font-style: normal;
}
.hero p {
  font-size: 19px;
  line-height: 1.7;
  max-width: 620px;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.stats {
  display: flex;
  gap: 35px;
  margin-top: 36px;
}
.stats b {
  font-size: 24px;
  display: block;
  color: var(--navy);
}
section {
  padding: 0px 0;
}
.soft {
  background: var(--mint);
}
.cream {
  background: var(--cream);
}
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.section-head h2 {
  font-size: clamp(34px, 4vw, 54px);
  margin: 8px 0 12px;
  letter-spacing: -0.04em;
  color: var(--navy);
}
.section-head p {
  line-height: 1.7;
  color: #5f6d74;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: #fff;
  border: 1px solid #e5eee1;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 10px 35px rgba(35, 66, 45, 0.06);
}
.icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eaf6db;
  font-size: 25px;
  margin-bottom: 18px;
}
.card h3 {
  margin: 0 0 10px;
  color: var(--navy);
}
.card p {
  color: #66757a;
  line-height: 1.6;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split img {
  width: 25%;
}
.ticker {
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding: 17px 0;
  font-weight: 900;
  white-space: nowrap;
}
.ticker.alt {
  background: var(--green);
  color: #153249;
}
.ticker-track {
  display: inline-block;
  animation: marquee 24s linear infinite;
}
.ticker span {
  margin: 0 28px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.step {
  padding: 25px;
  border-radius: 22px;
  background: #fff;
}
.step .num {
  font-size: 13px;
  font-weight: 900;
  color: var(--green);
}
.logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.logo-chip {
  padding: 22px 12px;
  border: 1px solid #dfe9da;
  border-radius: 16px;
  text-align: center;
  font-weight: 900;
  color: #5c6970;
  background: #fff;
}
.faq {
  max-width: 900px;
  margin: auto;
}
.faq details {
  background: #fff;
  border-bottom: 1px solid #dfe8dc;
  padding: 20px;
}
.faq summary {
  font-weight: 850;
  cursor: pointer;
  color: var(--navy);
}
.faq p {
  line-height: 1.6;
  color: #66757a;
}
.branches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.branch {
  background: #fff;
  border-radius: 24px;
  padding: 26px;
  border: 1px solid #e2eadf;
}
.branch .tag {
  display: inline-block;
  background: #eaf6db;
  color: #4c812f;
  border-radius: 99px;
  padding: 7px 11px;
  font-weight: 800;
  font-size: 12px;
}
.map {
  height: 360px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 25% 40%, #9dcc7a 0 7px, transparent 8px),
    radial-gradient(circle at 52% 58%, #ef8d76 0 7px, transparent 8px),
    radial-gradient(circle at 74% 35%, #5578a9 0 7px, transparent 8px),
    linear-gradient(135deg, #eaf2e6, #dbe9ef);
  position: relative;
  overflow: hidden;
}
.map:after {
  content: "Mapa metropolitano · Apodaca · San Nicolás · Guadalupe";
  position: absolute;
  inset: auto 25px 25px;
  background: #fff;
  padding: 16px 20px;
  border-radius: 14px;
  font-weight: 800;
  box-shadow: var(--shadow);
}
footer {
  background: #102d3d;
  color: #dce7e8;
  padding: 55px 0;
}
.footergrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 35px;
}
.social {
  position: fixed;
  right: 16px;
  top: 45%;
  z-index: 25;
  display: grid;
  gap: 8px;
}
.social a {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.form-shell {
  min-height: 100vh;
  background: linear-gradient(135deg, #f7fbef, #eef5f7);
  padding: 40px 0 80px;
}
.wizard {
  width: min(1000px, 92%);
  margin: auto;
  background: #fff;
  border-radius: 30px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wizard-head {
  padding: 28px 34px;
  background: var(--navy);
  color: #fff;
}
.wizard-body {
  padding: 34px;
}
.progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 28px;
}
.progress i {
  height: 6px;
  border-radius: 99px;
  background: #e3eadf;
}
.progress i.on {
  background: var(--green);
}
.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.choice {
  border: 2px solid #e5ece3;
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
}
.choice:hover,
.choice.selected {
  border-color: var(--green);
  background: #f5faee;
}
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.field {
  display: grid;
  gap: 7px;
}
.field label {
  font-size: 13px;
  font-weight: 800;
}
.field input,
.field select {
  padding: 14px;
  border: 1px solid #dce5dc;
  border-radius: 12px;
  font: inherit;
}
.times {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.time {
  padding: 11px 15px;
  border: 1px solid #dce6d8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.time.selected {
  background: var(--green);
  color: #fff;
}
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.side {
  background: var(--navy);
  color: #fff;
  padding: 28px;
}
.side a {
  display: block;
  padding: 12px;
  border-radius: 10px;
  margin: 5px 0;
}
.side a:hover {
  background: #24495e;
}
.main {
  padding: 35px;
  background: #f6f9f4;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kpi {
  background: #fff;
  padding: 22px;
  border-radius: 20px;
}
.table {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  margin-top: 20px;
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  padding: 14px;
  border-bottom: 1px solid #edf1ec;
}
.pill {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 99px;
  background: #eaf6db;
  color: #4d7f33;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 850px) {
  .navlinks {
    display: none;
  }
  .grid3,
  .branches,
  .steps,
  .logos,
  .choices,
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: 600px;
  }
  .stats {
    gap: 18px;
  }
  .dashboard {
    grid-template-columns: 1fr;
  }
  .side {
    display: none;
  }
}
@media (max-width: 560px) {
  .grid3,
  .branches,
  .steps,
  .logos,
  .choices,
  .fields,
  .kpis,
  .footergrid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 48px;
  }
  .hero {
    background:
      linear-gradient(rgba(247, 251, 239, 0.9), rgba(247, 251, 239, 0.9)),
      url("../img/inspiracion.png") center/cover;
  }
  .social {
    right: 8px;
  }
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
/* NB100 V2 landing */
.topbar {
  background: #17354b;
  color: #dfeaf0;
  font-size: 12px;
  padding: 8px 0;
}
.topbar .container {
  display: flex;
  gap: 10px;
  align-items: center;
}
.topbar a {
  margin-left: auto;
  color: #b9dc7a;
  font-weight: 800;
}
.brand img {
  width: 112px;
  height: 58px;
  object-fit: contain;
}
.navin {
  height: 82px;
}
.navlinks {
  gap: 18px;
}
.hero {
  min-height: 720px;
  background: linear-gradient(115deg, #f9fcf4 0%, #eef8ea 55%, #edf5f8 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 55px;
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(54px, 6.2vw, 86px);
}
.hero-visual {
  position: relative;
}
.hero-visual > img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: left center;
  border-radius: 42% 18% 35% 16%;
  box-shadow: 0 35px 80px rgba(23, 53, 75, 0.16);
}
.float-card {
  position: absolute;
  background: #fff;
  padding: 16px 18px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 4px;
}
.float-card span {
  font-size: 12px;
  color: #718087;
}
.fc1 {
  left: -35px;
  bottom: 55px;
}
.fc2 {
  right: -20px;
  top: 60px;
}
.hero-proof {
  display: flex;
  gap: 32px;
  margin-top: 38px;
}
.hero-proof div {
  display: grid;
}
.hero-proof strong {
  font-size: 27px;
  color: var(--navy);
}
.hero-proof span {
  font-size: 12px;
  color: #728087;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}
.hero-blob.one {
  width: 420px;
  height: 420px;
  background: #dcefc7;
  right: -170px;
  top: -130px;
}
.hero-blob.two {
  width: 220px;
  height: 220px;
  background: #dbe9f5;
  left: 44%;
  bottom: -100px;
}
.about h2,
.process-layout h2,
.corporate h2,
.story h2 {
  font-size: clamp(38px, 4.5vw, 62px);
  line-height: 1.04;
  color: var(--navy);
  letter-spacing: -0.05em;
  margin: 10px 0 22px;
}
.about h2 span,
.section-head h2 span,
.process-layout h2 span,
.corporate h2 span,
.story h2 span {
  color: #78ae4d;
}
.about p,
.process-layout p,
.corporate p,
.story p {
  line-height: 1.8;
  color: #617178;
  font-size: 17px;
}
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 25px 0;
  color: #36505e;
  font-weight: 700;
}
.text-link {
  font-weight: 900;
  color: #5e9638;
}
.about-stack {
  position: relative;
}
.about-stack img {
  height: 520px;
  object-fit: cover;
}
.quote {
  position: absolute;
  left: -35px;
  bottom: 28px;
  background: #17354b;
  color: white;
  padding: 25px;
  width: 280px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.service {
  position: relative;
  background: #fff;
  border-radius: 25px;
  padding: 30px;
  border: 1px solid #e4eddf;
  min-height: 270px;
  transition: 0.25s;
}
.service:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.service.featured {
  background: #17354b;
  color: #fff;
}
.service.featured h3,
.service.featured p {
  color: #fff;
}
.service-no {
  position: absolute;
  right: 25px;
  top: 22px;
  color: #9cb0b7;
  font-size: 12px;
  font-weight: 900;
}
.service h3 {
  font-size: 22px;
  color: var(--navy);
}
.service p {
  color: #66757a;
  line-height: 1.65;
}
.service a {
  font-weight: 900;
  color: #b9dc7a;
}
.consult {
  background: #173f39;
  color: white;
  position: relative;
  overflow: hidden;
}
.consult:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(185, 220, 122, 0.18), transparent 30%);
}
.lighthead h2,
.lighthead p {
  color: white;
}
.consult-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  overflow: hidden;
}
.consult-item {
  padding: 30px;
  background: rgba(17, 55, 50, 0.9);
}
.consult-item b {
  color: #b9dc7a;
}
.consult-item h3 {
  font-size: 20px;
}
.consult-item p {
  color: #c8d9d4;
  line-height: 1.6;
}
.consult-cta {
  margin-top: 28px;
  background: #fff;
  color: #17354b;
  border-radius: 20px;
  padding: 20px 25px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.consult-cta strong {
  font-size: 28px;
}
.consult-cta small {
  font-size: 12px;
}
.consult-cta .btn {
  margin-left: auto;
}
.btn.lime {
  background: #b9dc7a;
  color: #17354b;
}
.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.reason-grid > div {
  padding: 25px;
  text-align: center;
}
.reason-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #eff8e6;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  font-size: 31px;
  color: #17354b;
}
.reason-grid h3 {
  color: #17354b;
}
.reason-grid p {
  color: #6c797e;
  line-height: 1.6;
}
.process-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: center;
}
.process-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.process-steps > div {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  display: grid;
  gap: 7px;
}
.process-steps i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8f5dc;
  color: #548631;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
}
.process-steps b {
  font-size: 18px;
  color: #17354b;
}
.process-steps span {
  font-size: 14px;
  color: #6a787d;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.team-grid article {
  background: #fff;
  border: 1px solid #e4ece0;
  border-radius: 24px;
  padding: 28px;
}
.avatar {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: linear-gradient(135deg, #b9dc7a, #e7f4d7);
  display: grid;
  place-items: center;
  color: #17354b;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 20px;
}
.team-grid article > span {
  font-size: 11px;
  font-weight: 900;
  color: #6da444;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.team-grid h3 {
  color: #17354b;
}
.team-grid p {
  color: #6a787d;
}
.team-grid a {
  font-weight: 900;
  color: #5d9639;
}
.demo-note {
  text-align: center;
  color: #849095;
  font-size: 12px;
  margin-top: 20px;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.benefit-grid > div {
  background: #fff;
  padding: 28px;
  border-radius: 22px;
}
.benefit-grid strong {
  font-size: 12px;
  color: #76ad4c;
}
.benefit-grid h3 {
  color: #17354b;
}
.benefit-grid p {
  color: #69777c;
  line-height: 1.6;
}
.corporate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.corporate img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: 28px;
}
.story {
  background: #fffaf2;
}
.story-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
  align-items: end;
}
.branches article {
  background: #fff;
  border-radius: 25px;
  padding: 28px;
  border: 1px solid #e1eae0;
  display: grid;
  gap: 8px;
}
.branches article > span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #75a94d;
}
.branches article h3 {
  font-size: 26px;
  color: #17354b;
  margin: 6px 0;
}
.branches article p {
  color: #69777c;
  line-height: 1.6;
}
.branches article a {
  color: #5d9639;
  font-weight: 900;
  margin-top: 8px;
}
.map {
  height: 390px;
  margin-top: 24px;
  background:
    radial-gradient(circle at 24% 38%, #7fbf55 0 9px, transparent 10px),
    radial-gradient(circle at 53% 54%, #ef8d76 0 9px, transparent 10px),
    radial-gradient(circle at 75% 31%, #5578a9 0 9px, transparent 10px),
    repeating-linear-gradient(25deg, transparent 0 35px, rgba(23, 53, 75, 0.04) 36px 38px),
    linear-gradient(135deg, #edf5e9, #e5eff3);
}
.map:after {
  display: none;
}
.map-label {
  position: absolute;
  left: 28px;
  bottom: 28px;
  background: #fff;
  padding: 17px 20px;
  border-radius: 15px;
  box-shadow: var(--shadow);
  display: grid;
}
.map-label span {
  font-size: 12px;
  color: #758187;
  margin-top: 4px;
}
.final-cta {
  background: #78ae4d;
  color: #fff;
  padding: 55px 0;
}
.final-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.final-cta span {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.final-cta h2 {
  font-size: 35px;
  max-width: 750px;
  margin: 8px 0;
}
.footergrid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.footergrid > div {
  display: grid;
  align-content: start;
  gap: 10px;
}
.footer-brand img {
  width: 130px;
  background: #fff;
  border-radius: 14px;
  padding: 7px;
}
.footergrid a,
.footergrid span,
.footergrid p {
  color: #b9c9cd;
  font-size: 14px;
}
.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 35px;
  padding-top: 20px;
  font-size: 12px;
  color: #93a8ad;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .hero-grid,
  .process-layout,
  .corporate,
  .story-grid {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    display: none;
  }
  .service-grid,
  .consult-grid,
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  .reason-grid,
  .benefit-grid {
    grid-template-columns: 1fr 1fr;
  }
  .navlinks {
    display: none;
  }
  .quote {
    left: 10px;
  }
  .consult-cta {
    flex-wrap: wrap;
  }
  .footergrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .topbar {
    display: none;
  }
  .brand img {
    width: 90px;
  }
  .hero {
    min-height: 650px;
  }
  .hero-proof {
    gap: 15px;
  }
  .service-grid,
  .consult-grid,
  .team-grid,
  .reason-grid,
  .benefit-grid,
  .process-steps {
    grid-template-columns: 1fr;
  }
  .checks {
    grid-template-columns: 1fr;
  }
  .consult-cta {
    display: grid;
  }
  .consult-cta .btn {
    margin-left: 0;
  }
  .final-cta .container {
    display: grid;
  }
  .footergrid {
    grid-template-columns: 1fr;
  }
  .copyright {
    display: grid;
    gap: 8px;
  }
  .about-stack img {
    height: 400px;
  }
}

.about-stack .about-video {
  width: 100%;
  height: 520px;
  display: block;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 55px rgba(23, 53, 75, 0.12);
}
@media (max-width: 580px) {
  .about-stack .about-video {
    height: 400px;
  }
}

/* Login modal NB100 */
body.modal-open {
  overflow: hidden;
}
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.22s;
}
.login-modal.open {
  opacity: 1;
  visibility: visible;
}
.login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 39, 53, 0.62);
  backdrop-filter: blur(7px);
}
.login-card {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  background: #fff;
  border-radius: 30px;
  padding: 34px;
  box-shadow: 0 35px 90px rgba(9, 35, 48, 0.28);
  transform: translateY(16px) scale(0.98);
  transition: 0.25s;
}
.login-modal.open .login-card {
  transform: none;
}
.login-close {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f0f6ec;
  color: #17354b;
  font-size: 25px;
  cursor: pointer;
}
.login-logo {
  width: 118px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 14px;
}
.login-kicker {
  display: block;
  color: #6ca443;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.login-card h2 {
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #17354b;
  margin: 9px 0 12px;
}
.login-card p {
  color: #6b797f;
  line-height: 1.6;
  margin: 0 0 22px;
}
.login-label {
  display: block;
  font-size: 13px;
  font-weight: 850;
  color: #29495a;
  margin-bottom: 8px;
}
.login-input {
  width: 100%;
  border: 1.5px solid #dce7d8;
  border-radius: 14px;
  padding: 15px 16px;
  font: inherit;
  outline: none;
  transition: 0.2s;
  background: #fbfdf9;
}
.login-input:focus {
  border-color: #7fbf55;
  box-shadow: 0 0 0 4px rgba(127, 191, 85, 0.12);
}
.login-main-btn {
  width: 100%;
  margin-top: 13px;
  font-size: 15px;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #91a099;
  font-size: 12px;
  margin: 22px 0 14px;
}
.login-divider:before,
.login-divider:after {
  content: "";
  height: 1px;
  background: #e4ebe1;
  flex: 1;
}
.login-register {
  display: flex;
  justify-content: center;
  border: 1px solid #dfe8dc;
  border-radius: 14px;
  padding: 13px;
  font-weight: 850;
  color: #17354b;
}
.otp-input {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.35em;
  padding-left: calc(16px + 0.35em);
}
.login-back {
  display: block;
  margin: 17px auto 0;
  border: 0;
  background: none;
  color: #587080;
  font-weight: 750;
  cursor: pointer;
}
.login-demo {
  display: block;
  text-align: center;
  margin-top: 18px;
  color: #84928c;
  background: #f4f8f1;
  border-radius: 11px;
  padding: 10px;
}
.login-demo b {
  color: #5d9639;
}
@media (max-width: 580px) {
  .login-card {
    padding: 28px 22px;
    border-radius: 24px;
  }
  .login-card h2 {
    font-size: 28px;
  }
}

/* NB100 official horizontal logo */
.brand img {
  width: 178px;
  height: 62px;
  object-fit: contain;
}
.footer-brand img {
  width: 210px;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
}
.login-logo {
  width: 210px;
  height: 82px;
  object-fit: contain;
}
.app-brand img {
  width: 220px;
  height: 82px;
  object-fit: contain;
}
.side-brand {
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 14px;
}
.side-brand img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62px;
  object-fit: contain;
}
@media (max-width: 580px) {
  .brand img {
    width: 145px;
    height: 54px;
  }
  .app-brand img {
    width: 180px;
    height: 68px;
  }
  .login-logo {
    width: 180px;
    height: 70px;
  }
}

/* NB100 V5 · Hero video + navbar dinámico */
.nav {
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    backdrop-filter 0.35s ease;
}
.nav.nav-hero {
  background: rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
}
.nav.nav-solid {
  background: #fff;
  border-bottom: 1px solid #eaf0e6;
  box-shadow: 0 8px 28px rgba(23, 53, 75, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero {
  background: #17354b !important;
  isolation: isolate;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -3;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    90deg,
    rgba(247, 251, 239, 0.96) 0%,
    rgba(247, 251, 239, 0.88) 37%,
    rgba(247, 251, 239, 0.38) 62%,
    rgba(23, 53, 75, 0.1) 100%
  );
}
.hero:after,
.hero-blob {
  display: none !important;
}
.hero-grid {
  grid-template-columns: 1.08fr 0.92fr;
}
.hero-video-info {
  height: 520px;
  position: relative;
}
.hero-video-info .float-card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
}
@media (max-width: 850px) {
  .hero-video-overlay {
    background: linear-gradient(90deg, rgba(247, 251, 239, 0.95), rgba(247, 251, 239, 0.72));
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-video-info {
    display: none;
  }
}
@media (max-width: 560px) {
  .hero {
    background: #17354b !important;
  }
  .hero-video-overlay {
    background: rgba(247, 251, 239, 0.84);
  }
}

/* NB100 V5.1 · Navbar realmente transparente sobre el video */
body {
  --nb-nav-alpha: 0;
  --nb-nav-shadow: 0;
}
.nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 32px;
  width: 100%;
  z-index: 30;
  background: rgba(255, 255, 255, var(--nb-nav-alpha)) !important;
  border-bottom-color: rgba(225, 235, 228, var(--nb-nav-alpha)) !important;
  box-shadow: 0 8px 28px rgba(23, 53, 75, calc(var(--nb-nav-shadow) * 0.08)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    top 0.18s ease,
    background 0.08s linear,
    border-color 0.08s linear,
    box-shadow 0.08s linear;
}
.nav.nav-scrolled {
  top: 0;
}
.nav.nav-hero,
.nav.nav-solid {
  background: rgba(255, 255, 255, var(--nb-nav-alpha)) !important;
}
.hero {
  margin-top: 0;
}
@media (max-width: 580px) {
  .nav {
    top: 0;
  }
}

/* NB100 V5.4 · Hero exacto al viewport: la primera tira cierra la pantalla */
:root {
  --nb-topbar-h: 32px;
  --nb-nav-h: 82px;
  --nb-ticker-h: 53px;
}

/* El navbar flota sobre el hero; no consume altura del viewport. */
.hero {
  min-height: calc(100vh - var(--nb-topbar-h) - var(--nb-ticker-h)) !important;
  height: calc(100vh - var(--nb-topbar-h) - var(--nb-ticker-h)) !important;
  min-height: calc(100dvh - var(--nb-topbar-h) - var(--nb-ticker-h)) !important;
  height: calc(100dvh - var(--nb-topbar-h) - var(--nb-ticker-h)) !important;
  padding-top: var(--nb-nav-h);
  padding-bottom: 0;
}

.hero > .container {
  width: min(1400px, 95%);
  height: 100%;
}

.hero-grid {
  height: 100%;
}

/* Altura fija para que el cálculo del hero sea exacto. */
.ticker {
  width: 100%;
  height: var(--nb-ticker-h);
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ticker-track {
  display: flex !important;
  width: max-content;
  min-width: max-content;
  align-items: center;
  animation: marqueeNB100 32s linear infinite !important;
  will-change: transform;
}

.ticker-track span {
  flex: 0 0 auto;
}

@keyframes marqueeNB100 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 580px) {
  :root {
    --nb-topbar-h: 0px;
    --nb-nav-h: 72px;
    --nb-ticker-h: 50px;
  }
  .hero {
    min-height: calc(100dvh - var(--nb-ticker-h)) !important;
    height: calc(100dvh - var(--nb-ticker-h)) !important;
    padding-top: var(--nb-nav-h);
  }
  .ticker-track {
    animation-duration: 24s !important;
  }
}

/* Logo corto sobre la sección Conoce NB100 */
.about-short-logo {
  width: 82px;
  height: 50px;
  object-fit: contain;
  display: block;
  margin: 0 0 14px 0;
}
@media (max-width: 580px) {
  .about-short-logo {
    width: 68px;
    height: 68px;
    margin-bottom: 12px;
  }
}

/* =========================================================
   CONSULTA · INFORMACIÓN COMPLEMENTARIA
   ========================================================= */
.consult-extra {
  margin: 34px 0 28px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(181, 224, 112, 0.12), transparent 35%),
    rgba(255, 255, 255, 0.045);
}

.consult-extra-head {
  max-width: 760px;
  margin-bottom: 26px;
}

.consult-extra-head .eyebrow {
  color: #b9e875;
}

.consult-extra-head h3 {
  margin: 8px 0 10px;
  color: #ffffff;
  font-size: clamp(1.6rem, 2.5vw, 2.35rem);
  line-height: 1.08;
}

.consult-extra-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

.consult-extra-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.consult-extra-card {
  min-height: 210px;
  padding: 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.07);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.consult-extra-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(185, 232, 117, 0.45);
}

.consult-extra-card--accent {
  background: rgba(185, 232, 117, 0.11);
}

.consult-extra-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #b9e875;
  color: #12384a;
  font-size: 1.35rem;
  font-weight: 900;
}

.consult-extra-tag {
  display: inline-block;
  margin-bottom: 8px;
  color: #b9e875;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.consult-extra-tag--optional {
  color: #ffd58a;
}

.consult-extra-card h4 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.25;
}

.consult-extra-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
}

.consult-extra-card small {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

@media (max-width: 1050px) {
  .consult-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .consult-extra {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .consult-extra-grid {
    grid-template-columns: 1fr;
  }

  .consult-extra-card {
    min-height: auto;
  }
}

/* =========================================================
   CONSULTA · ICONOGRAFÍA DE LAS 6 ETAPAS
   ========================================================= */
.consult-item {
  position: relative;
  overflow: hidden;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.consult-item::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(185, 232, 117, 0.055);
  pointer-events: none;
}

.consult-item:hover {
  background: rgba(255, 255, 255, 0.035);
}

.consult-item-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 14px 0 20px;
  border: 1px solid rgba(185, 232, 117, 0.28);
  border-radius: 22px;
  background: rgba(185, 232, 117, 0.1);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.consult-item:hover .consult-item-visual {
  transform: translateY(-4px) rotate(-2deg);
  background: rgba(185, 232, 117, 0.16);
}

.consult-item-visual svg {
  width: 43px;
  height: 43px;
  fill: none;
  stroke: #b9e875;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.consult-item > b,
.consult-item > h3,
.consult-item > p {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .consult-item-visual {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .consult-item-visual svg {
    width: 38px;
    height: 38px;
  }

  .consult-item::after {
    width: 90px;
    height: 90px;
  }
}

/* =========================================================
   CONSULTA · FOTOGRAFÍAS CIRCULARES
   ========================================================= */
.consult-item::after {
  display: none;
}

.consult-item-photo {
  position: absolute;
  z-index: 0;
  top: 20px;
  right: 24px;
  width: 146px;
  height: 146px;
  overflow: hidden;
  border: 5px solid rgba(185, 232, 117, 0.16);
  border-radius: 50%;
  background: rgba(185, 232, 117, 0.08);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.13);
  opacity: 0.78;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    border-color 0.35s ease;
}

.consult-item-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(20, 68, 59, 0.05), rgba(20, 68, 59, 0.22));
  pointer-events: none;
}

.consult-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(0.96);
}

.consult-item:hover .consult-item-photo {
  transform: scale(1.045);
  opacity: 0.96;
  border-color: rgba(185, 232, 117, 0.34);
}

.consult-item > b,
.consult-item > h3,
.consult-item > p,
.consult-item-visual {
  position: relative;
  z-index: 2;
}

/* Leave breathing room for the larger 30% circular image. */
.consult-item {
  padding-right: 190px;
  min-height: 335px;
}

@media (max-width: 1050px) {
  .consult-item {
    padding-right: 165px;
  }

  .consult-item-photo {
    width: 132px;
    height: 132px;
    right: 20px;
  }
}

@media (max-width: 700px) {
  .consult-item {
    padding-right: 28px;
    padding-top: 26px;
  }

  .consult-item-photo {
    position: relative;
    top: auto;
    right: auto;
    width: 150px;
    height: 150px;
    margin: 4px 0 20px;
    opacity: 0.92;
  }
}

/* =========================================================
   CONSULTA · TARJETAS CENTRADAS / LIMPIAS
   ========================================================= */
.consult-item {
  min-height: 300px !important;
  padding: 42px 34px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.consult-item::after,
.consult-item-photo,
.consult-item > b {
  display: none !important;
}

.consult-item-visual {
  width: 82px;
  height: 82px;
  margin: 0 auto 24px !important;
  flex: 0 0 auto;
}

.consult-item-visual svg {
  width: 46px;
  height: 46px;
}

.consult-item > h3 {
  width: 100%;
  margin: 0 0 14px !important;
  text-align: center;
}

.consult-item > p {
  width: 100%;
  max-width: 340px;
  margin: 0 auto !important;
  text-align: center;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .consult-item {
    min-height: 270px !important;
    padding: 34px 24px !important;
  }

  .consult-item-visual {
    width: 74px;
    height: 74px;
    margin-bottom: 20px !important;
  }

  .consult-item-visual svg {
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   CONSULTA · TARJETAS EDITORIALES CON IMAGEN
   ========================================================= */
.consult-grid {
  gap: 0;
}

.consult-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 430px !important;
  padding: 22px 28px 34px !important;
  text-align: left !important;
}

.consult-card-photo {
  width: 100%;
  height: 190px;
  margin: 0 0 28px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.consult-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.consult-item:hover .consult-card-photo img {
  transform: scale(1.045);
}

.consult-item > h3 {
  width: 100%;
  margin: 0 0 16px !important;
  text-align: left !important;
  font-size: clamp(1.22rem, 1.55vw, 1.55rem);
  line-height: 1.16;
}

.consult-item > p {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.65;
}

.consult-item-visual {
  display: none !important;
}

@media (max-width: 1050px) {
  .consult-item {
    min-height: 410px !important;
    padding: 20px 22px 30px !important;
  }
  .consult-card-photo {
    height: 175px;
  }
}

@media (max-width: 700px) {
  .consult-item {
    min-height: auto !important;
    padding: 18px 18px 30px !important;
  }
  .consult-card-photo {
    height: 210px;
    margin-bottom: 22px;
  }
}

/* ===== NB100 upgrade: consulta CTA + cuando acudir ===== */
.consult-extra-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  font-size: 2rem;
  margin-bottom: 22px;
  box-shadow: 0 10px 24px rgba(185, 232, 117, 0.16);
}
.consult-extra-card {
  padding: 26px 24px;
}
.consult-extra-card h4 {
  font-size: 1.18rem;
}
.consult-cta--boost {
  padding: 13px 18px 13px 28px;
  gap: 28px;
  box-shadow: 0 18px 50px rgba(4, 29, 27, 0.22);
}
.consult-price {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.consult-price span {
  font-size: 0.95rem;
}
.consult-price strong {
  font-size: 2rem;
}
.consult-book-copy {
  margin-left: auto;
  display: grid;
  line-height: 1.2;
}
.consult-book-copy b {
  font-size: 1rem;
  color: #17354b;
}
.consult-book-copy span {
  font-size: 0.78rem;
  color: #6a787d;
  margin-top: 4px;
}
.consult-book-btn {
  margin-left: 0 !important;
  min-width: 300px;
  min-height: 58px;
  border-radius: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.02rem;
  box-shadow: 0 12px 28px rgba(185, 220, 122, 0.3);
}
.book-calendar {
  font-size: 1.4rem;
}
.when-section {
  background: #fff;
  padding: 92px 0 105px;
}
.when-head {
  max-width: 900px;
  margin: 0 auto 42px;
  text-align: center;
}
.when-head h2 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  color: #17354b;
  margin: 10px 0 16px;
}
.when-head h2 span {
  color: #78ae4d;
}
.when-head p {
  max-width: 720px;
  margin: 0 auto;
  color: #68777d;
  line-height: 1.7;
  font-size: 16px;
}
.when-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 42px;
  align-items: stretch;
}
.when-photo {
  position: relative;
  min-height: 610px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(23, 53, 75, 0.13);
}
.when-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.when-photo:after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(8, 39, 36, 0.7));
}
.when-photo-badge {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  padding: 18px 20px;
  border-radius: 18px;
  display: grid;
  color: #17354b;
}
.when-photo-badge b {
  font-size: 1.15rem;
}
.when-photo-badge span {
  font-size: 0.83rem;
  color: #66757a;
  margin-top: 4px;
}
.when-content {
  display: flex;
  flex-direction: column;
}
.when-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
}
.when-card {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px;
  background: #fff;
  border: 1px solid #e3ebdf;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(23, 53, 75, 0.08);
  transition: 0.25s;
}
.when-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(23, 53, 75, 0.13);
  border-color: #cde5b6;
}
.when-icon {
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: #edf7e4;
  color: #5d9639;
  display: grid;
  place-items: center;
  font-size: 2.55rem;
  font-weight: 900;
}
.when-card h3 {
  margin: 0 0 7px;
  color: #17354b;
  font-size: 1.15rem;
}
.when-card p {
  margin: 0;
  color: #6c797e;
  line-height: 1.55;
  font-size: 0.91rem;
}
.when-cta {
  margin-top: 16px;
  background: linear-gradient(100deg, #78ae4d, #b9dc7a);
  border-radius: 22px;
  padding: 17px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  box-shadow: 0 15px 35px rgba(120, 174, 77, 0.22);
}
.when-cta-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 15px;
  background: #fff;
  color: #17354b;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
}
.when-cta > div:nth-child(2) {
  display: grid;
}
.when-cta strong {
  font-size: 1.12rem;
}
.when-cta span {
  font-size: 0.76rem;
  margin-top: 3px;
}
.when-cta .btn {
  margin-left: auto;
  white-space: nowrap;
  background: #17354b;
  color: #fff;
  padding: 15px 18px;
  border-radius: 13px;
}
@media (max-width: 1050px) {
  .consult-book-copy {
    display: none;
  }
  .consult-cta--boost {
    gap: 18px;
  }
  .consult-book-btn {
    min-width: 250px;
  }
  .when-layout {
    grid-template-columns: 1fr;
  }
  .when-photo {
    min-height: 520px;
    max-height: 650px;
  }
  .when-photo img {
    object-position: center 35%;
  }
}
@media (max-width: 760px) {
  .consult-cta--boost {
    display: grid;
    padding: 20px;
  }
  .consult-price {
    justify-content: space-between;
  }
  .consult-book-btn {
    width: 100%;
    min-width: 0;
  }
  .when-section {
    padding: 68px 0;
  }
  .when-head {
    text-align: left;
  }
  .when-head h2 {
    font-size: 42px;
  }
  .when-cards {
    grid-template-columns: 1fr;
  }
  .when-photo {
    min-height: 460px;
  }
  .when-card {
    padding: 18px;
  }
  .when-icon {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
    font-size: 2.1rem;
  }
  .when-cta {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .when-cta .btn {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* ===== NB100: video background en Agenda Digital ===== */
#proceso.process-video-bg {
  position: relative;
  overflow: hidden;
  background: #102f2a !important;
  isolation: isolate;
}
#proceso .process-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
#proceso.process-video-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 37, 34, 0.88) 0%,
    rgba(15, 49, 43, 0.72) 44%,
    rgba(15, 49, 43, 0.55) 100%
  );
  z-index: -1;
  pointer-events: none;
}
#proceso.process-video-bg .container {
  position: relative;
  z-index: 1;
}
#proceso.process-video-bg .eyebrow {
  color: #b9dc7a;
}
#proceso.process-video-bg .process-layout h2 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
}
#proceso.process-video-bg .process-layout h2 span {
  color: #b9dc7a;
}
#proceso.process-video-bg .process-layout > div:first-child > p {
  color: rgba(255, 255, 255, 0.9);
}
#proceso.process-video-bg .process-steps > div {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 45px rgba(4, 28, 25, 0.2);
}
#proceso.process-video-bg .btn.green {
  background: #b9dc7a;
  color: #17354b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
@media (max-width: 760px) {
  #proceso.process-video-bg:after {
    background: rgba(8, 37, 34, 0.78);
  }
}
@media (prefers-reduced-motion: reduce) {
  #proceso .process-bg-video {
    display: none;
  }
}

/* ===== Servicios · versión de alto impacto ===== */
.services-impact {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f3faee 0%, #eef8ea 100%);
  padding: 110px 0;
}
.services-impact:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(185, 220, 122, 0.22);
  filter: blur(10px);
  right: -220px;
  top: -220px;
  pointer-events: none;
}
.services-impact-head {
  max-width: 960px;
  margin: 0 auto 58px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.services-impact-head h2 {
  font-size: clamp(46px, 5.5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--navy);
  margin: 12px 0 22px;
}
.services-impact-head h2 span {
  color: #78ae4d;
}
.services-impact-head p {
  max-width: 800px;
  margin: 0 auto;
  color: #5f7077;
  font-size: 18px;
  line-height: 1.75;
}
.services-impact-layout {
  display: grid;
  grid-template-columns: 0.88fr 1.35fr;
  gap: 24px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.services-showcase {
  position: relative;
  min-height: 690px;
  border-radius: 34px;
  overflow: hidden;
  background: #17354b;
  box-shadow: 0 25px 65px rgba(23, 53, 75, 0.18);
}
.services-showcase > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.services-showcase-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 43, 52, 0.03) 20%,
    rgba(12, 43, 51, 0.3) 52%,
    rgba(13, 48, 55, 0.94) 100%
  );
}
.services-showcase-content {
  position: absolute;
  z-index: 2;
  left: 36px;
  right: 36px;
  bottom: 38px;
  color: #fff;
}
.services-showcase-content > span {
  display: inline-flex;
  background: #b9dc7a;
  color: #17354b;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
}
.services-showcase-content h3 {
  font-size: clamp(32px, 3vw, 47px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 16px 0 14px;
}
.services-showcase-content p {
  font-size: 15px;
  line-height: 1.65;
  color: #e3ece9;
  max-width: 470px;
  margin: 0 0 22px;
}
.services-showcase-content .btn {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}
.services-showcase-badge {
  position: absolute;
  z-index: 3;
  right: 22px;
  top: 22px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 12px 30px rgba(23, 53, 75, 0.15);
  color: var(--navy);
}
.services-showcase-badge strong {
  font-size: 27px;
  line-height: 1;
}
.services-showcase-badge span {
  font-size: 11px;
  font-weight: 800;
  margin-top: 5px;
}
.service-grid-impact {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.service-impact {
  min-height: 0;
  padding: 28px 27px;
  border-radius: 27px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 10px 30px rgba(23, 53, 75, 0.055);
}
.service-impact .icon {
  width: 68px;
  height: 68px;
  border-radius: 21px;
  font-size: 31px;
  margin-bottom: 26px;
  background: #eaf6db;
  color: #17354b;
  transition: 0.25s;
}
.service-impact h3 {
  font-size: 22px;
  margin: 0 0 10px;
  line-height: 1.15;
}
.service-impact p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.service-impact .service-no {
  font-size: 13px;
  top: 28px;
  right: 28px;
}
.service-impact:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px rgba(23, 53, 75, 0.13);
}
.service-impact:hover .icon {
  transform: scale(1.08) rotate(-3deg);
  background: #b9dc7a;
}
.service-impact.featured {
  background: linear-gradient(145deg, #17354b, #204b5d);
}
.service-impact.featured .icon {
  background: #b9dc7a;
  color: #17354b;
}
.service-impact.featured .service-no {
  color: #c5d8dc;
}
.service-impact.featured p {
  color: #d9e4e6;
}
.service-impact.featured a {
  margin-top: auto;
  padding-top: 18px;
}
@media (max-width: 980px) {
  .services-impact-layout {
    grid-template-columns: 1fr;
  }
  .services-showcase {
    min-height: 540px;
  }
  .service-grid-impact {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .services-impact {
    padding: 78px 0;
  }
  .services-impact-head {
    margin-bottom: 34px;
  }
  .services-impact-head h2 {
    font-size: 43px;
  }
  .services-impact-head p {
    font-size: 16px;
  }
  .services-showcase {
    min-height: 520px;
    border-radius: 26px;
  }
  .services-showcase-content {
    left: 24px;
    right: 24px;
    bottom: 26px;
  }
  .services-showcase-badge {
    width: 92px;
    height: 92px;
  }
  .service-grid-impact {
    grid-template-columns: 1fr;
  }
  .service-impact {
    padding: 25px;
  }
  .service-impact .icon {
    width: 62px;
    height: 62px;
  }
}

/* =========================================================
   NB100 · POR QUÉ NB100 / BENEFITS IMPACT
   ========================================================= */
.benefits-impact {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(circle at 92% 5%, rgba(185, 220, 122, 0.34), transparent 24%),
    linear-gradient(135deg, #f5faef 0%, #edf7e8 52%, #f9fcf5 100%);
}
.benefits-impact:before {
  content: "NB100";
  position: absolute;
  right: -35px;
  top: 5px;
  font-size: clamp(130px, 18vw, 280px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.08em;
  color: rgba(23, 53, 75, 0.025);
  pointer-events: none;
}
.benefits-impact-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.9fr 0.9fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 48px;
}
.benefits-impact-head h2 {
  margin: 9px 0 0;
  max-width: 780px;
  color: var(--navy);
  font-size: clamp(46px, 5.4vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}
.benefits-impact-head h2 span {
  color: #78ae4d;
}
.benefits-impact-head > p {
  margin: 0 0 5px;
  max-width: 520px;
  color: #607078;
  font-size: 17px;
  line-height: 1.8;
}
.benefits-impact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  grid-template-rows: repeat(2, minmax(235px, auto));
  gap: 18px;
}
.benefit-impact {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 235px;
  padding: 28px;
  border: 1px solid rgba(23, 53, 75, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 40px rgba(23, 53, 75, 0.055);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}
.benefit-impact:hover {
  transform: translateY(-7px);
  border-color: rgba(127, 191, 85, 0.38);
  box-shadow: 0 24px 55px rgba(23, 53, 75, 0.12);
}
.benefit-impact-main {
  grid-row: 1/3;
  min-height: 488px;
  padding: 38px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(185, 220, 122, 0.25), transparent 30%),
    linear-gradient(145deg, #17354b, #173f39);
  border-color: transparent;
}
.benefit-impact-online {
  grid-column: 2/4;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  min-height: 235px;
  background: #fffaf2;
}
.benefit-impact-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}
.benefit-number {
  color: #76ad4c;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.benefit-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #e8f5dc;
  color: #17354b;
  font-size: 30px;
  font-weight: 900;
  transition: transform 0.28s ease;
}
.benefit-impact:hover .benefit-icon {
  transform: rotate(-6deg) scale(1.06);
}
.benefit-impact-main .benefit-icon {
  width: 76px;
  height: 76px;
  border-radius: 23px;
  background: #b9dc7a;
  font-size: 36px;
}
.benefit-kicker {
  display: block;
  margin: 0 0 9px;
  color: #6fa548;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.14em;
}
.benefit-impact h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.benefit-impact p {
  margin: 0;
  color: #65757b;
  line-height: 1.7;
}
.benefit-impact-main .benefit-number,
.benefit-impact-main .benefit-kicker {
  color: #b9dc7a;
}
.benefit-impact-main h3 {
  max-width: 420px;
  color: #fff;
  font-size: clamp(35px, 3.4vw, 49px);
}
.benefit-impact-main p {
  max-width: 430px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
}
.benefit-pill {
  width: max-content;
  max-width: 100%;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #dce9df;
  font-size: 12px;
  font-weight: 800;
}
.benefit-link {
  white-space: nowrap;
  padding: 14px 18px;
  border-radius: 14px;
  background: #17354b;
  color: #fff;
  font-weight: 900;
}
.benefit-link b {
  color: #b9dc7a;
}
.benefits-impact-cta {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 24px 28px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: #7fbf55;
  color: #17354b;
}
.benefits-impact-cta > div {
  display: grid;
  gap: 4px;
}
.benefits-impact-cta span {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.benefits-impact-cta strong {
  font-size: 21px;
  letter-spacing: -0.02em;
}
.benefits-impact-cta .btn {
  background: #17354b;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 950px) {
  .benefits-impact-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .benefits-impact-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .benefit-impact-main {
    grid-column: 1/3;
    grid-row: auto;
    min-height: 420px;
  }
  .benefit-impact-online {
    grid-column: 1/3;
  }
}
@media (max-width: 620px) {
  .benefits-impact {
    padding: 78px 0;
  }
  .benefits-impact-head h2 {
    font-size: 45px;
  }
  .benefits-impact-grid {
    grid-template-columns: 1fr;
  }
  .benefit-impact-main,
  .benefit-impact-online {
    grid-column: auto;
    grid-row: auto;
  }
  .benefit-impact-main {
    min-height: 430px;
    padding: 30px;
  }
  .benefit-impact-online {
    display: flex;
    align-items: stretch;
    gap: 20px;
  }
  .benefit-link {
    width: 100%;
    text-align: center;
  }
  .benefits-impact-cta {
    display: grid;
  }
  .benefits-impact-cta .btn {
    width: 100%;
  }
}

/* Agenda: calendario de disponibilidad y matriz de horarios */
.booking-service {
  max-width: 360px;
  margin-bottom: 18px;
}
.availability-picker {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  gap: 18px;
  align-items: start;
}
.availability-calendar,
.available-times {
  border: 1px solid #dfe9e2;
  border-radius: 18px;
  background: #f9fcf7;
  padding: 18px;
  min-width: 0;
}
.available-times {
  background: #fff;
}
.calendar-picker-head {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.calendar-picker-head strong {
  text-align: center;
  text-transform: capitalize;
  color: #0a4cad;
  font-size: 17px;
}
.calendar-picker-head button {
  width: 38px;
  height: 38px;
  border: 1px solid #dce6df;
  border-radius: 11px;
  background: #fff;
  color: #0a4cad;
  font-size: 24px;
  cursor: pointer;
}
.calendar-picker-head button:hover:not(:disabled) {
  background: #0a4cad;
  color: #fff;
}
.calendar-picker-head button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.calendar-weekdays,
.calendar-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.calendar-weekdays {
  margin-bottom: 6px;
}
.calendar-weekdays span {
  text-align: center;
  color: #7b8b91;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.calendar-date {
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-radius: 11px;
  background: #eef2ef;
  color: #9aa6aa;
  padding: 6px 2px;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
  font: inherit;
  cursor: not-allowed;
}
.calendar-date b {
  font-size: 14px;
}
.calendar-date small {
  min-height: 10px;
  font-size: 8px;
  white-space: nowrap;
}
.calendar-date.blank {
  visibility: hidden;
}
.calendar-date.available {
  background: #edf8dc;
  color: #416f22;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #d9edbd;
}
.calendar-date.available:hover {
  background: #dff2bd;
  transform: translateY(-1px);
}
.calendar-date.selected {
  background: #0a4cad;
  color: #fff;
  box-shadow: 0 8px 20px rgba(10, 76, 173, 0.22);
}
.calendar-legend {
  display: flex;
  gap: 15px;
  margin-top: 12px;
  color: #71828a;
  font-size: 10px;
}
.calendar-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #edf8dc;
  border: 1px solid #d9edbd;
}
.calendar-legend i.selected {
  background: #0a4cad;
  border-color: #0a4cad;
}
.calendar-empty,
.calendar-loading {
  grid-column: 1/-1;
  margin: 0;
  text-align: center;
  padding: 35px 8px;
}
.available-times-head {
  margin-bottom: 16px;
}
.available-times-head h3 {
  margin: 5px 0;
  color: #153b68;
  font-size: 21px;
}
.available-times-head p {
  margin: 0;
  color: #75868e;
  font-size: 12px;
}
.booking-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.booking-slot-grid .time-slot {
  width: 100%;
  min-width: 0;
  padding: 11px 5px;
  text-align: center;
  font-size: 12px;
}
.booking-slot-grid .empty,
.booking-slot-grid .skeleton {
  grid-column: 1/-1;
}

@media (max-width: 1050px) {
  .availability-picker {
    grid-template-columns: 1fr;
  }
  .booking-service {
    max-width: none;
  }
}
@media (max-width: 620px) {
  .availability-calendar,
  .available-times {
    padding: 14px 11px;
    border-radius: 15px;
  }
  .calendar-picker-head {
    grid-template-columns: 34px 1fr 34px;
  }
  .calendar-picker-head button {
    width: 34px;
    height: 34px;
  }
  .calendar-picker-head strong {
    font-size: 15px;
  }
  .calendar-weekdays,
  .calendar-picker-grid {
    gap: 3px;
  }
  .calendar-date {
    min-height: 47px;
    border-radius: 9px;
    padding: 4px 1px;
  }
  .calendar-date b {
    font-size: 13px;
  }
  .calendar-date small {
    font-size: 7px;
  }
  .booking-slot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .booking-slot-grid .time-slot {
    padding: 10px 2px;
    font-size: 10px;
    border-radius: 9px;
  }
}

\n\n/* NB100 EMPRESAS · Corporate lead section */\n.business-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: linear-gradient(135deg, #f8fbf5 0%, #fff 52%, #f1f8ec 100%);
}
\n.business-section:before {
  content: "EMPRESAS";
  position: absolute;
  right: -30px;
  top: 20px;
  font-size: clamp(110px, 16vw, 240px);
  font-weight: 950;
  letter-spacing: -0.08em;
  color: rgba(23, 53, 75, 0.025);
  pointer-events: none;
}
\n.business-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 45px;
}
.business-head h2 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.business-head h2 span {
  color: #78ae4d;
}
.business-head > p {
  margin: 0 0 4px;
  color: #63737a;
  font-size: 17px;
  line-height: 1.8;
  max-width: 540px;
}
\n.business-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 22px;
  align-items: stretch;
}
.business-info {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 22px;
}
.business-panel {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  background: linear-gradient(145deg, #17354b, #173f39);
  color: #fff;
  box-shadow: 0 25px 60px rgba(23, 53, 75, 0.15);
}
.business-panel:after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  right: -80px;
  top: -100px;
  background: rgba(185, 220, 122, 0.18);
}
.business-mini {
  position: relative;
  z-index: 1;
  display: block;
  color: #9bd06d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
}
.business-panel h3 {
  position: relative;
  z-index: 1;
  margin: 10px 0 12px;
  max-width: 540px;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.business-panel p {
  position: relative;
  z-index: 1;
  max-width: 570px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
}
.business-points {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 24px 0;
  color: #e6f0e7;
  font-size: 14px;
  font-weight: 750;
}
.business-points span::first-letter {
  color: #b9dc7a;
}
.business-whatsapp {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #b9dc7a;
  color: #17354b;
  font-weight: 950;
}
.business-panel > small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.55);
}
\n.business-logos-wrap {
  padding: 27px;
  border: 1px solid #e3ece0;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(23, 53, 75, 0.06);
}
.business-logos-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.business-logos-title span {
  color: #17354b;
  font-size: 19px;
  font-weight: 900;
}
.business-logos-title small {
  color: #7b888d;
}
.business-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.company-logo {
  height: 88px;
  padding: 12px;
  border: 1px solid #edf1eb;
  border-radius: 17px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: 0.25s;
}
.company-logo:hover {
  transform: translateY(-4px);
  border-color: #cfe4bd;
  box-shadow: 0 12px 26px rgba(23, 53, 75, 0.09);
}
.company-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.92);
  transition: 0.25s;
}
.company-logo:hover img {
  filter: saturate(1.08);
}
.business-legal {
  margin: 14px 0 0;
  color: #9aa4a7;
  font-size: 10px;
  text-align: center;
}
\n.business-form-card {
  padding: 34px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid #e1eadf;
  box-shadow: 0 25px 65px rgba(23, 53, 75, 0.11);
}
.business-form-card h3 {
  margin: 8px 0 8px;
  color: #17354b;
  font-size: 36px;
  letter-spacing: -0.04em;
}
.business-form-card > p {
  margin: 0 0 22px;
  color: #6c797e;
  line-height: 1.65;
}
.business-form {
  display: grid;
  gap: 14px;
}
.business-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 3px;
}
.business-type label {
  cursor: pointer;
}
.business-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.business-type span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px;
  border: 1.5px solid #dfe8dc;
  border-radius: 13px;
  color: #587080;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  transition: 0.2s;
}
.business-type input:checked + span {
  border-color: #7fbf55;
  background: #eef8e8;
  color: #416d2c;
}
.business-fields.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.business-form label {
  display: grid;
  gap: 7px;
}
.business-form label > span {
  color: #29495a;
  font-size: 12px;
  font-weight: 850;
}
.business-form input,
.business-form select,
.business-form textarea {
  width: 100%;
  border: 1.5px solid #dce7d8;
  border-radius: 13px;
  padding: 13px 14px;
  background: #fbfdf9;
  color: #183041;
  font: inherit;
  outline: none;
  resize: vertical;
}
.business-form input:focus,
.business-form select:focus,
.business-form textarea:focus {
  border-color: #7fbf55;
  box-shadow: 0 0 0 4px rgba(127, 191, 85, 0.11);
}
.business-submit {
  width: 100%;
  margin-top: 4px;
  font-size: 15px;
}
.business-form-note {
  text-align: center;
  color: #8c9894;
  font-size: 10px;
}
\n@media(max-width:980px) {
  .business-head,
  .business-layout {
    grid-template-columns: 1fr;
  }
  .business-head {
    gap: 18px;
  }
  .business-logos {
    grid-template-columns: repeat(4, 1fr);
  }
}
\n@media(max-width:620px) {
  .business-section {
    padding: 78px 0;
  }
  .business-head h2 {
    font-size: 44px;
  }
  .business-panel,
  .business-form-card,
  .business-logos-wrap {
    padding: 24px;
    border-radius: 24px;
  }
  .business-points,
  .business-fields.two,
  .business-type {
    grid-template-columns: 1fr;
  }
  .business-logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .company-logo {
    height: 82px;
  }
  .business-logos-title {
    display: grid;
    gap: 5px;
  }
}
\n
/* EMPRESAS CORREGIDO */
.corporate-section {
  padding: 110px 0;
  background: #fff;
}
.corporate-pro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 75px;
  align-items: center;
}
.corp-copy-pro h2 {
  font-size: clamp(46px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #17354b;
  margin: 10px 0 24px;
}
.corp-copy-pro h2 span {
  color: #78ae4d;
}
.corp-lead {
  font-size: 17px;
  line-height: 1.8;
  color: #65757b;
}
.corp-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin: 28px 0;
}
.corp-benefits > div {
  display: flex;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid #e4ece0;
}
.corp-benefits i {
  font-style: normal;
  color: #6fa548;
  font-weight: 950;
}
.corp-benefits span {
  display: grid;
}
.corp-benefits b {
  color: #17354b;
  font-size: 14px;
}
.corp-benefits small {
  color: #7b898d;
  margin-top: 3px;
}
.corp-text-link {
  font-weight: 900;
  color: #17354b;
  border-bottom: 2px solid #b9dc7a;
  padding-bottom: 5px;
}
.corp-logos-side {
  background: #f4f9f0;
  border-radius: 30px;
  padding: 30px;
  border: 1px solid #e0eadb;
}
.corp-logos-head span {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 950;
  color: #6fa548;
}
.corp-logos-head h3 {
  font-size: 25px;
  color: #17354b;
  margin: 6px 0 22px;
}
.corp-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.corp-logo-card {
  height: 100px;
  background: #fff;
  border: 1px solid #e0e8dc;
  border-radius: 17px;
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.corp-logo-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 140px !important;
  max-height: 65px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.enterprise-contact {
  padding: 90px 0;
  background: #173f39;
  color: #fff;
}
.enterprise-contact-shell {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.enterprise-contact-copy .eyebrow {
  color: #b9dc7a;
}
.enterprise-contact-copy h2 {
  font-size: clamp(46px, 5vw, 70px);
  line-height: 0.97;
  letter-spacing: -0.055em;
  margin: 10px 0 20px;
}
.enterprise-contact-copy h2 span {
  color: #b9dc7a;
}
.enterprise-contact-copy p {
  color: #d0ded9;
  line-height: 1.7;
}
.enterprise-contact-points {
  display: grid;
  gap: 9px;
  margin: 24px 0;
  font-weight: 750;
}
.enterprise-form {
  background: #fff;
  color: #17354b;
  border-radius: 28px;
  padding: 32px;
}
.enterprise-form-head span {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 950;
  color: #6fa548;
}
.enterprise-form-head h3 {
  font-size: 29px;
  margin: 6px 0 24px;
}
.enterprise-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.enterprise-fields label {
  display: grid;
  gap: 7px;
}
.enterprise-fields label span {
  font-size: 12px;
  font-weight: 850;
}
.enterprise-fields input,
.enterprise-fields select,
.enterprise-fields textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid #dce7d8;
  border-radius: 12px;
  font: inherit;
  background: #fbfdf9;
}
.enterprise-field-full {
  grid-column: 1/3;
}
.enterprise-submit {
  margin-top: 18px;
}
@media (max-width: 900px) {
  .corporate-pro,
  .enterprise-contact-shell {
    grid-template-columns: 1fr;
  }
  .corp-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 580px) {
  .corp-benefits,
  .enterprise-fields {
    grid-template-columns: 1fr;
  }
  .corp-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .enterprise-field-full {
    grid-column: 1;
  }
  .corp-logos-side {
    padding: 20px;
  }
}

/* Tu cita en menos de 2 minutos · capa crema MUY transparente */
.appointment-video-overlay {
  background: rgba(248, 241, 226, 0.2) !important;
}

/* Compatibilidad con versiones anteriores del bloque */
.appointment-section::after,
.appointment-section:after {
  background: rgba(248, 241, 226, 0.2) !important;
}

/* ===== NB100: video background Agenda Digital ===== */

#proceso.process-video-bg {
  position: relative;
  overflow: hidden;
  background: #fffaf2 !important;
  isolation: isolate;
}

#proceso .process-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

#proceso.process-video-bg:after {
  content: "";
  position: absolute;
  inset: 0;

  /* CAPA CREMA TRANSPARENTE */
  background: rgba(255, 250, 242, 0.52);

  z-index: -1;
  pointer-events: none;
}

#proceso.process-video-bg .container {
  position: relative;
  z-index: 1;
}

/* Texto oscuro porque ahora el fondo será claro */
#proceso.process-video-bg .eyebrow {
  color: #6f9f43;
}

#proceso.process-video-bg .process-layout h2 {
  color: #17354b;
  text-shadow: none;
}

#proceso.process-video-bg .process-layout h2 span {
  color: #9dca58;
}

#proceso.process-video-bg .process-layout > div:first-child > p {
  color: #53676f;
}

#proceso.process-video-bg .process-steps > div {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 45px rgba(23, 53, 75, 0.1);
}

#proceso.process-video-bg .btn.green {
  background: #b9dc7a;
  color: #17354b;
  box-shadow: 0 12px 28px rgba(23, 53, 75, 0.12);
}

@media (max-width: 760px) {
  #proceso.process-video-bg:after {
    background: rgba(255, 250, 242, 0.62);
  }
}

/* NB100 · Sucursales con mapa individual */
.branches-with-maps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.branches-with-maps .branch-map-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dfe9da;
  border-radius: 25px;
  min-width: 0;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.branches-with-maps .branch-map-card:hover {
  transform: translateY(-5px);
  border-color: #c8dfb8;
  box-shadow: 0 22px 55px rgba(23, 53, 75, 0.1);
}
.branch-info {
  padding: 30px 30px 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.branch-info > span {
  color: #70a845;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.branch-info h3 {
  margin: 20px 0 25px;
  color: #17354b;
  font-size: 27px;
  line-height: 1.05;
}
.branch-info p {
  margin: 0 0 25px;
  color: #64757c;
  font-size: 16px;
  line-height: 1.7;
}
.branch-info b {
  display: block;
  margin-bottom: 18px;
  color: #17354b;
  font-size: 16px;
}
.branch-info a {
  margin-top: auto;
  color: #639d38;
  font-weight: 900;
}
.branch-map {
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
  background: #eef4ea;
  border-top: 1px solid #e4ece0;
}
.branch-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .branches-with-maps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .branches-with-maps {
    grid-template-columns: 1fr;
  }
  .branch-map {
    height: 280px;
  }
}

/* =========================================================
   NB100 · PALETA WEB ALINEADA AL LOGO OFICIAL
   Conserva el look suave, incorporando azul NB100 y rojo como acento.
   ========================================================= */
:root {
  --navy: #0a4cad;
  --green: #8fd200;
  --green2: #b9dc7a;
  --mint: #f1f8e7;
  --cream: #fffaf2;
  --coral: #ef4b45;
  --blue: #0063cf;
  --ink: #153b68;
  --white: #fff;
  --shadow: 0 18px 50px rgba(10, 76, 173, 0.12);
  --nb-blue: #0063cf;
  --nb-blue-dark: #0a4cad;
  --nb-green: #8fd200;
  --nb-red: #ef0000;
}

/* Azul oficial como estructura, suavizado con fondos claros */
.topbar,
footer {
  background: #0a4cad;
}
.ticker {
  background: #0a4cad;
}
.ticker.alt {
  background: #8fd200;
  color: #0a356f;
}
.btn {
  background: #0a4cad;
}
.btn.green,
.btn.lime {
  background: #8fd200;
  color: #0a356f;
}
.eyebrow,
.text-link,
.branches article a,
.corp-text-link {
  color: #6fa900;
}
.section-head h2,
.about h2,
.process-layout h2,
.story h2,
.service h3,
.reason-grid h3,
.team-grid h3,
.benefit-grid h3,
.branches article h3,
.corp-copy-pro h2,
.enterprise-form-head h3 {
  color: #0a4cad;
}
.about h2 span,
.section-head h2 span,
.process-layout h2 span,
.story h2 span,
.corp-copy-pro h2 span {
  color: #79b900;
}
.soft {
  background: #f3f9ea;
}
.cream,
.story {
  background: #fffaf2;
}

/* Rojo del logo sólo como micro-acento para no perder el carácter premium */
.hero-proof div:nth-child(3) strong,
.consult-extra-tag--optional {
  color: #e93838;
}

/* Agenda: video + crema, con tipografía azul NB100 */
#proceso.process-video-bg {
  background: #fffaf2 !important;
}
#proceso.process-video-bg:after {
  background: rgba(255, 250, 242, 0.52) !important;
}
#proceso.process-video-bg .process-layout h2 {
  color: #0a4cad;
}
#proceso.process-video-bg .process-layout h2 span {
  color: #79b900;
}
#proceso.process-video-bg .eyebrow {
  color: #6fa900;
}
#proceso.process-video-bg .btn.green {
  background: #8fd200;
  color: #0a356f;
}

/* Empresas: conserva contraste pero ahora parte del azul de marca */
.corporate-section {
  background: #fff;
}
.corp-logos-side {
  background: #f3f8ee;
}
.enterprise-contact {
  background: linear-gradient(135deg, #073b83 0%, #0a4cad 58%, #0d5abb 100%);
}
.enterprise-contact-copy .eyebrow,
.enterprise-contact-copy h2 span {
  color: #b9e875;
}

/* Estados y bordes con matiz azul/verde de marca */
.card,
.service,
.team-grid article,
.branches article,
.corp-logo-card,
.enterprise-form {
  border-color: #e2ebdf;
}

@media (max-width: 760px) {
  #proceso.process-video-bg:after {
    background: rgba(255, 250, 242, 0.62) !important;
  }
}

/* NB100 · Consulta en azul corporativo */
#consulta.consult {
  background: #214a62 !important;
}
#consulta.consult:before {
  background: radial-gradient(
    circle at 90% 10%,
    rgba(185, 220, 122, 0.16),
    transparent 32%
  ) !important;
}
#consulta .consult-grid {
  background: rgba(255, 255, 255, 0.13) !important;
}
#consulta .consult-item {
  background: rgba(23, 53, 75, 0.76) !important;
}
#consulta .lighthead h2,
#consulta .lighthead p {
  color: #fff !important;
}
#consulta .consult-item p {
  color: #dce7ed !important;
}

/* =========================================================
   NB100 · CONSULTA LIMPIA / SIN PANELES · 2026-08-22
   ========================================================= */
#consulta.consult {
  background: #102f43 !important;
  color: #fff;
}
#consulta.consult:before {
  display: none !important;
}
#consulta .lighthead h2,
#consulta .lighthead p {
  color: #fff !important;
}
#consulta .lighthead .eyebrow {
  color: #8fd200 !important;
}

/* Contenido directo sobre el fondo: sin caja exterior ni tarjetas */
#consulta .consult-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 44px 48px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
#consulta .consult-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-align: left !important;
}
#consulta .consult-item:before,
#consulta .consult-item:after {
  display: none !important;
}
#consulta .consult-card-photo {
  width: 100% !important;
  height: 210px !important;
  margin: 0 0 22px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}
#consulta .consult-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#consulta .consult-item h3 {
  color: #fff !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}
#consulta .consult-item p {
  color: #dce8ee !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Bloque complementario también limpio, sin paneles */
#consulta .consult-extra {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#consulta .consult-extra-head h3 {
  color: #fff !important;
}
#consulta .consult-extra-head p {
  color: #dce8ee !important;
}
#consulta .consult-extra-grid {
  gap: 30px !important;
  background: transparent !important;
}
#consulta .consult-extra-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#consulta .consult-extra-card h4 {
  color: #fff !important;
}
#consulta .consult-extra-card p,
#consulta .consult-extra-card small {
  color: #dce8ee !important;
}
#consulta .consult-extra-icon {
  box-shadow: none !important;
}

@media (max-width: 900px) {
  #consulta .consult-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 38px 28px !important;
  }
}
@media (max-width: 580px) {
  #consulta .consult-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  #consulta .consult-card-photo {
    height: 230px !important;
  }
}

/* NB100 · Footer azul oscuro unificado con sección Consulta */
footer {
  background: #102f43 !important;
  color: #dce8ee !important;
}
footer .footergrid a,
footer .footergrid span,
footer .footergrid p {
  color: #dce8ee !important;
}
footer .copyright {
  color: #b8cbd4 !important;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
}

/* NB100 · CONTACTO GENERAL / PACIENTE O EMPRESA */
.enterprise-contact.contact-general {
  background: #102f43 !important;
}
.contact-general .enterprise-contact-copy p {
  color: #dce8ee;
}
.contact-general .enterprise-contact-copy .eyebrow,
.contact-general .enterprise-contact-copy h2 span {
  color: #8fd200 !important;
}
.contact-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 20px;
}
.contact-type-selector label {
  cursor: pointer;
  position: relative;
}
.contact-type-selector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-type-selector span {
  min-height: 86px;
  padding: 15px;
  border: 1.5px solid #dce7d8;
  border-radius: 16px;
  background: #fbfdf9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: 0.2s;
}
.contact-type-selector b {
  color: #17354b;
  font-size: 15px;
}
.contact-type-selector small {
  color: #75858b;
  line-height: 1.35;
}
.contact-type-selector input:checked + span {
  border-color: #8fd200;
  background: #f2fae8;
  box-shadow: 0 0 0 4px rgba(143, 210, 0, 0.1);
}
.company-only[hidden] {
  display: none !important;
}
@media (max-width: 580px) {
  .contact-type-selector {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   NB100 · PLATAFORMA PACIENTE Y ADMINISTRACIÓN
   ========================================================= */
[hidden] {
  display: none !important;
}
.full {
  width: 100%;
}
.full-row {
  grid-column: 1/-1;
}
.link-button {
  border: 0;
  background: none;
  color: #0a4cad;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 4px;
}
.link-button:hover {
  text-decoration: underline;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 17px;
}
.field > span,
.filter-bar label > span {
  color: #415d6d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.field input,
.field select,
.field textarea,
.filter-bar input,
.filter-bar select,
.inline-search input,
.calendar-filter select {
  width: 100%;
  border: 1px solid #d9e5e4;
  border-radius: 11px;
  background: #fff;
  color: #153b68;
  padding: 12px 13px;
  font: inherit;
  outline: 0;
  transition: 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.inline-search input:focus {
  border-color: #8fd200;
  box-shadow: 0 0 0 4px rgba(143, 210, 0, 0.12);
}
.field small {
  color: #73858d;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.check-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #526b78;
  font-size: 13px;
  margin: 8px 0 20px;
}
.check-line input {
  accent-color: #8fd200;
}
.nb-toast {
  position: fixed;
  z-index: 9999;
  right: 22px;
  bottom: 22px;
  max-width: 380px;
  padding: 15px 19px;
  border-radius: 12px;
  background: #102f43;
  color: #fff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
  transform: translateY(30px);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
}
.nb-toast.show {
  transform: none;
  opacity: 1;
}
.nb-toast[data-type="error"] {
  background: #9e2d2d;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.portal-auth {
  min-height: 100vh;
  background: radial-gradient(circle at 15% 5%, #f3f9ea 0, transparent 40%), #fffaf2;
}
.auth-layout {
  width: min(100% - 32px, 560px);
  margin: auto;
  padding: 38px 0 70px;
}
.auth-layout.wide {
  width: min(100% - 32px, 810px);
}
.auth-layout > .app-brand {
  display: block;
  width: max-content;
  margin: 0 auto 30px;
}
.auth-layout > .app-brand img {
  width: 165px;
  height: auto;
}
.auth-card {
  background: #fff;
  border: 1px solid #e2ebdf;
  border-radius: 25px;
  padding: 38px;
  box-shadow: 0 22px 70px rgba(10, 76, 173, 0.11);
}
.auth-card h1 {
  color: #0a4cad;
  font-size: 34px;
  margin: 9px 0;
}
.auth-card > p {
  color: #64757c;
  margin: 0 0 26px;
  line-height: 1.6;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid #e4ece8;
  margin-bottom: 23px;
}
.auth-tabs button {
  flex: 1;
  border: 0;
  background: none;
  color: #74858c;
  padding: 13px;
  font: inherit;
  font-weight: 800;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.auth-tabs button.active {
  color: #0a4cad;
  border-color: #8fd200;
}
.auth-foot {
  text-align: center !important;
  margin: 22px 0 0 !important;
}
.auth-foot a,
.admin-access {
  color: #659d38;
  font-weight: 800;
}
.admin-access {
  display: block;
  text-align: center;
  font-size: 12px;
  margin-top: 18px;
  color: #72838b;
}
.admin-auth {
  background: radial-gradient(circle at 80% 0, rgba(143, 210, 0, 0.12), transparent 40%), #102f43;
}
.admin-auth .auth-card {
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}

.portal-page {
  background: #f6f9f5;
  min-height: 100vh;
}
.portal-top {
  height: 82px;
  background: #fff;
  border-bottom: 1px solid #e6ece7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100% - 1180px) / 2));
}
.portal-top .app-brand img {
  width: 145px;
}
.portal-top nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.portal-top nav a {
  font-weight: 800;
  color: #153b68;
}
.booking-wrap {
  width: min(100% - 32px, 1180px);
  margin: 45px auto 80px;
}
.page-heading h1 {
  font-size: 40px;
  color: #0a4cad;
  margin: 7px 0;
}
.page-heading p {
  color: #64757c;
}
.stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 30px 0 18px;
}
.stepper span {
  padding: 10px;
  border-bottom: 3px solid #dbe4df;
  color: #7d8b91;
  font-size: 12px;
  font-weight: 800;
}
.stepper .active {
  border-color: #8fd200;
  color: #0a4cad;
}
.booking-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
}
.booking-step {
  grid-column: 1;
  background: #fff;
  border: 1px solid #e2ebe3;
  border-radius: 20px;
  padding: 27px;
}
.booking-step h2 {
  font-size: 20px;
  color: #153b68;
  margin: 0 0 20px;
}
.select-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.select-card {
  min-height: 125px;
  border: 1.5px solid #dfe9e2;
  border-radius: 15px;
  background: #fff;
  padding: 17px;
  text-align: left;
  color: #153b68;
  cursor: pointer;
  transition: 0.2s;
}
.select-card:hover,
.select-card.selected {
  border-color: #8fd200;
  background: #f5fbe9;
  box-shadow: 0 6px 24px rgba(10, 76, 173, 0.08);
}
.select-card b,
.select-card span,
.select-card i {
  display: block;
}
.select-card span {
  font-size: 13px;
  color: #64757c;
  line-height: 1.45;
  margin: 6px 0 12px;
}
.select-card i {
  font-size: 11px;
  color: #6fa900;
  font-style: normal;
  font-weight: 800;
}
.booking-date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.time-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.time-slot {
  border: 1.5px solid #dfe9e2;
  border-radius: 10px;
  background: #fff;
  color: #153b68;
  padding: 11px 15px;
  font-weight: 800;
  cursor: pointer;
}
.time-slot:hover,
.time-slot.selected {
  background: #0a4cad;
  border-color: #0a4cad;
  color: #fff;
}
.booking-summary {
  grid-column: 2;
  grid-row: 1/4;
  align-self: start;
  position: sticky;
  top: 20px;
  background: #102f43;
  color: #fff;
  border-radius: 20px;
  padding: 25px;
}
.booking-summary h3 {
  margin: 0 0 18px;
}
.booking-summary dl {
  margin: 0 0 20px;
}
.booking-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 0;
}
.booking-summary dt {
  color: #b8cbd4;
  font-size: 12px;
}
.booking-summary dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
}
.booking-summary small {
  display: block;
  color: #b8cbd4;
  line-height: 1.5;
  margin-top: 14px;
}
.skeleton,
.empty {
  color: #75868e;
  font-size: 13px;
  padding: 18px 0;
}
.empty-card {
  background: #fff;
  border: 1px dashed #d4e1da;
  padding: 35px;
  text-align: center;
  border-radius: 16px;
  color: #74858c;
}

.app-body {
  margin: 0;
  background: #f4f7f3;
  color: #153b68;
}
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px 1fr;
}
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  box-sizing: border-box;
  padding: 26px 18px;
  background: #102f43;
  color: #dce8ee;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
}
.app-sidebar .side-brand {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 24px;
}
.app-sidebar .side-brand img {
  display: block;
  width: 130px;
  margin: auto;
}
.app-sidebar > small {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #8fd200;
  margin: 0 12px 12px;
}
.app-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-sidebar nav button,
.app-sidebar nav a,
.side-bottom a,
.side-bottom button {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: none;
  color: #dce8ee;
  padding: 11px 12px;
  border-radius: 9px;
  text-align: left;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.app-sidebar nav button:hover,
.app-sidebar nav a:hover,
.app-sidebar nav .active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.app-sidebar nav .active {
  box-shadow: inset 3px 0 #8fd200;
}
.app-sidebar nav > span {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #88a0ac;
  margin: 18px 12px 5px;
}
.side-bottom {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
}
.side-bottom button {
  color: #ffb2ae;
}
.app-main {
  grid-column: 2;
  min-width: 0;
  padding: 30px 34px 70px;
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.app-header h1 {
  margin: 5px 0 0;
  color: #0a4cad;
  font-size: 30px;
}
.menu-toggle {
  display: none;
  border: 0;
  background: #fff;
  border-radius: 9px;
  padding: 10px;
  font-size: 19px;
}
.app-view {
  display: none;
}
.app-view.active {
  display: block;
}
.next-card {
  background: linear-gradient(125deg, #0a4cad, #0063cf);
  color: #fff;
  border-radius: 22px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 18px 50px rgba(10, 76, 173, 0.18);
}
.next-card h2 {
  font-size: 29px;
  margin: 8px 0;
}
.next-card p {
  color: #dfeaff;
}
.next-card .eyebrow {
  color: #b9e875;
}
.btn.light {
  background: #fff;
  color: #0a4cad;
}
.mini-kpis,
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}
.mini-kpis article,
.admin-kpis article {
  background: #fff;
  border: 1px solid #e2eae3;
  border-radius: 15px;
  padding: 20px;
}
.mini-kpis span,
.admin-kpis span {
  display: block;
  color: #71828a;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.mini-kpis strong,
.admin-kpis strong {
  display: block;
  color: #0a4cad;
  font-size: 29px;
  margin-top: 7px;
}
.data-card {
  background: #fff;
  border: 1px solid #e2eae3;
  border-radius: 18px;
  padding: 22px;
}
.card-heading,
.view-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.card-heading h2,
.view-heading h2 {
  margin: 0;
  color: #153b68;
}
.view-heading h2 {
  font-size: 27px;
}
.table-scroll {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #74858c;
  padding: 11px;
  border-bottom: 1px solid #e5ebe7;
}
td {
  padding: 13px 11px;
  border-bottom: 1px solid #edf1ee;
  font-size: 13px;
  vertical-align: middle;
}
td small {
  display: block;
  color: #7b8a91;
  margin-top: 4px;
}
.status {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.status-confirmed {
  background: #e8f6d4;
  color: #4f791e;
}
.status-pending {
  background: #fff2c7;
  color: #8a6500;
}
.status-in_progress {
  background: #e4f2ff;
  color: #1769aa;
  border: 1px solid #c5e2fb;
}
.status-attended {
  background: #dceefc;
  color: #17649b;
}
.status-cancelled {
  background: #fde1df;
  color: #a03631;
}
.status-rescheduled {
  background: #eae4fb;
  color: #6547a6;
}
.status-no_show {
  background: #eceff0;
  color: #58666d;
}
.view-heading {
  margin-bottom: 22px;
}
.appointment-list {
  display: grid;
  gap: 13px;
}
.appointment-card {
  background: #fff;
  border: 1px solid #e1eae3;
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 18px;
}
.date-block {
  width: 58px;
  height: 62px;
  background: #f1f8e7;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.date-block strong {
  font-size: 24px;
  color: #0a4cad;
}
.date-block span {
  text-transform: uppercase;
  font-size: 10px;
  color: #6e9d3c;
  font-weight: 900;
}
.appointment-info h3 {
  font-size: 17px;
  margin: 8px 0;
}
.appointment-info p {
  font-size: 13px;
  color: #667982;
  margin: 3px 0;
}
.appointment-info small {
  color: #7a8a91;
  margin-left: 8px;
}
.appointment-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.small-btn {
  border: 1px solid #d8e3dd;
  background: #fff;
  color: #0a4cad;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.small-btn:hover {
  background: #f3f8ee;
}
.small-btn.danger {
  color: #a03631;
}
.small-btn:disabled {
  opacity: 0.4;
}
.filter-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 17px;
}
.filter-chips button,
.segmented button,
.calendar-controls > button {
  border: 1px solid #dbe5df;
  background: #fff;
  color: #637881;
  border-radius: 9px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}
.filter-chips .active,
.segmented .active {
  background: #0a4cad;
  color: #fff;
  border-color: #0a4cad;
}
.profile-form {
  max-width: 760px;
}

.admin-main {
  padding-top: 24px;
}
.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.admin-user i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #8fd200;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  flex: 0 0 36px;
}
.admin-kpis {
  grid-template-columns: repeat(4, 1fr);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}
.bar-chart {
  height: 205px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  padding-top: 20px;
}
.bar-chart > div {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.bar-chart i {
  width: min(35px, 70%);
  background: linear-gradient(#8fd200, #b9dc7a);
  border-radius: 8px 8px 3px 3px;
  position: relative;
  min-height: 8px;
}
.bar-chart i b {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #486070;
}
.bar-chart span {
  font-size: 10px;
  color: #77878e;
}
.filter-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr)) 1.6fr auto;
  align-items: end;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2eae3;
  padding: 16px;
  border-radius: 15px;
  margin-bottom: 15px;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.filter-bar input,
.filter-bar select {
  padding: 9px;
}
.dense {
  min-width: 1200px;
}
.calendar-controls,
.calendar-filter,
.segmented {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-filter {
  margin-bottom: 13px;
}
.calendar-filter select {
  width: auto;
}
.calendar-filter strong {
  margin-left: auto;
  text-transform: capitalize;
}
.calendar-board {
  background: #fff;
  border: 1px solid #e0e9e2;
  border-radius: 16px;
  overflow: hidden;
}
.month-head,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.month-head span {
  text-align: center;
  padding: 10px;
  background: #102f43;
  color: #dce8ee;
  font-size: 10px;
  font-weight: 800;
}
.calendar-day {
  min-height: 125px;
  border-right: 1px solid #e8ede9;
  border-bottom: 1px solid #e8ede9;
  padding: 8px;
  overflow: hidden;
}
.calendar-day > strong {
  font-size: 12px;
  color: #6e7f87;
}
.calendar-day.muted {
  background: #f8faf8;
}
.cal-event {
  display: block;
  width: 100%;
  border: 0;
  border-left: 3px solid #8fd200;
  background: #f1f8e7;
  color: #153b68;
  border-radius: 5px;
  padding: 5px 6px;
  margin-top: 5px;
  text-align: left;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #62757e;
  margin-top: 2px;
}
.cal-event.status-cancelled {
  opacity: 0.55;
  border-color: #ef4b45;
}
.cal-event.status-pending {
  border-color: #e6b82e;
}
.agenda-calendar {
  padding: 18px;
  display: grid;
  gap: 15px;
}
.agenda-calendar section {
  border-bottom: 1px solid #e7ede8;
  padding-bottom: 12px;
}
.agenda-calendar h3 {
  font-size: 14px;
}
.agenda-calendar .cal-event {
  padding: 10px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.catalog-card {
  background: #fff;
  border: 1px solid #e1eae3;
  border-radius: 17px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}
.catalog-card h3 {
  margin: 10px 0 7px;
  color: #0a4cad;
}
.catalog-card p,
.catalog-card small {
  color: #64757c;
  line-height: 1.5;
}
.catalog-card.person {
  justify-content: flex-start;
}
.catalog-card.person > button {
  margin-left: auto;
}
.avatar {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf5dc;
  color: #5f9135;
  font-size: 21px;
  font-weight: 900;
}
.availability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.availability-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e7ede8;
}
.availability-row b,
.availability-row span,
.availability-row small {
  display: block;
}
.availability-row span {
  color: #415d6d;
  margin: 5px 0;
  font-size: 13px;
}
.availability-row small {
  color: #78888f;
}
.report-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.report-cards article {
  background: #fff;
  border: 1px solid #e1eae3;
  border-radius: 18px;
  padding: 24px;
}
.report-cards p,
.settings-info p {
  color: #64757c;
  line-height: 1.6;
}
.settings-info {
  max-width: 800px;
}
.settings-info code {
  background: #eef3ee;
  padding: 3px 6px;
  border-radius: 5px;
}
.inline-search input {
  min-width: 280px;
}
/* NB100 native <dialog> components only.
   IMPORTANT: do not target Bootstrap's .modal-dialog divs used by tareas.html. */
dialog.modal-dialog {
  width: min(90vw, 720px);
  max-height: 88vh;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  padding: 25px;
  color: #153b68;
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.3);
}
dialog.modal-dialog::backdrop {
  background: rgba(10, 31, 44, 0.65);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dialog-head h2 {
  margin: 0;
  color: #0a4cad;
}
.dialog-head button {
  border: 0;
  background: none;
  font-size: 28px;
  color: #64757c;
  cursor: pointer;
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.check-grid label {
  font-size: 13px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.detail-grid > div {
  background: #f5f8f4;
  padding: 13px;
  border-radius: 10px;
}
.detail-grid span,
.detail-grid b,
.detail-grid small {
  display: block;
}
.detail-grid span {
  font-size: 10px;
  color: #76868d;
  text-transform: uppercase;
  font-weight: 800;
}
.detail-grid b {
  margin-top: 5px;
}
.detail-grid small {
  color: #6f8088;
  margin-top: 4px;
}
.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border-top: 1px solid #e2eae3;
  padding-top: 18px;
}

@media (max-width: 1100px) {
  .select-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .filter-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .filter-bar .search-field {
    grid-column: span 2;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 850px) {
  .app-shell {
    display: block;
  }
  .app-sidebar {
    transform: translateX(-105%);
    transition: 0.25s;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.2);
  }
  .app-sidebar.open {
    transform: none;
  }
  .app-main {
    padding: 20px 18px 60px;
  }
  .menu-toggle {
    display: block;
  }
  .app-header {
    justify-content: flex-start;
  }
  .app-header .btn,
  .admin-user {
    margin-left: auto;
  }
  .booking-card {
    display: block;
  }
  .booking-summary {
    position: static;
    margin-top: 20px;
  }
  .booking-step {
    margin-bottom: 13px;
  }
  .availability-grid {
    grid-template-columns: 1fr;
  }
  .calendar-day {
    min-height: 95px;
  }
  .cal-event small {
    display: none;
  }
}
@media (max-width: 620px) {
  .auth-card {
    padding: 26px 20px;
  }
  .auth-card h1 {
    font-size: 28px;
  }
  .form-grid,
  .booking-date {
    grid-template-columns: 1fr;
  }
  .select-cards {
    grid-template-columns: 1fr;
  }
  .portal-top {
    padding: 0 16px;
  }
  .portal-top nav a {
    display: none;
  }
  .booking-wrap {
    margin-top: 30px;
  }
  .page-heading h1 {
    font-size: 32px;
  }
  .stepper span {
    font-size: 0;
  }
  .stepper span:before {
    content: "Paso";
    font-size: 10px;
  }
  .booking-step {
    padding: 20px 16px;
  }
  .app-header h1 {
    font-size: 23px;
  }
  .app-header .eyebrow {
    font-size: 9px;
  }
  .app-header > .btn {
    font-size: 11px;
    padding: 10px;
  }
  .next-card,
  .view-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .mini-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .appointment-card {
    grid-template-columns: 52px 1fr;
  }
  .appointment-actions {
    grid-column: 1/-1;
  }
  .admin-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .admin-kpis article {
    padding: 14px;
  }
  .filter-bar {
    grid-template-columns: 1fr 1fr;
  }
  .filter-bar .search-field {
    grid-column: 1/-1;
  }
  .catalog-grid,
  .report-cards {
    grid-template-columns: 1fr;
  }
  .calendar-filter {
    flex-wrap: wrap;
  }
  .calendar-filter select {
    width: 100%;
  }
  .calendar-filter strong {
    margin: 5px 0;
  }
  .month-head span {
    font-size: 8px;
  }
  .calendar-day {
    min-height: 72px;
    padding: 3px;
  }
  .cal-event {
    font-size: 0;
    padding: 3px;
    height: 8px;
  }
  .cal-event b {
    font-size: 0;
  }
  .detail-grid,
  .check-grid {
    grid-template-columns: 1fr;
  }
  .inline-search input {
    min-width: 0;
    width: 100%;
  }
  .view-heading .inline-search {
    width: 100%;
  }
}
.dashboard-grid > * {
  min-width: 0;
}
.data-card {
  box-sizing: border-box;
  max-width: 100%;
}
@media (max-width: 620px) {
  .card-heading {
    flex-wrap: wrap;
  }
  .dashboard-grid {
    min-width: 0;
    width: 100%;
  }
  .dashboard-grid .data-card {
    padding: 16px;
  }
}

/* Portal del paciente: interfaz compacta y navegación visual */
.app-sidebar {
  padding: 22px 14px;
  background: linear-gradient(180deg, #102f43 0%, #0b2637 100%);
  box-shadow: 8px 0 30px rgba(5, 35, 52, 0.08);
}
.app-sidebar .side-brand {
  margin: 0 2px 20px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.app-sidebar > small {
  margin: 0 12px 10px;
  color: #a8ec32;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.app-sidebar nav {
  gap: 7px;
}
.app-sidebar nav button,
.app-sidebar nav a,
.side-bottom a,
.side-bottom button {
  padding: 8px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  transition:
    background 0.18s,
    color 0.18s,
    transform 0.18s;
}
.app-sidebar nav button:hover,
.app-sidebar nav a:hover,
.app-sidebar nav .active,
.side-bottom a:hover,
.side-bottom button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateX(2px);
}
.app-sidebar nav .active {
  background: linear-gradient(90deg, rgba(143, 210, 0, 0.24), rgba(255, 255, 255, 0.1));
  box-shadow: inset 3px 0 #8fd200;
}
.nav-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(143, 210, 0, 0.14);
  color: #b9ef60;
  font-size: 17px;
}
.app-sidebar nav .active .nav-icon {
  background: #8fd200;
  color: #10314a;
  box-shadow: 0 5px 14px rgba(143, 210, 0, 0.24);
}
.side-bottom {
  padding-top: 10px;
  display: grid;
  gap: 4px;
}
.side-bottom button .nav-icon {
  background: rgba(255, 120, 112, 0.12);
  color: #ffb2ae;
}
.app-main {
  padding-top: 24px;
  padding-bottom: 60px;
}
.app-header {
  margin-bottom: 16px;
}
.app-header h1 {
  margin-top: 4px;
}
.app-header > .btn {
  gap: 7px;
}
.app-view {
  padding: 0;
}

@media (max-width: 850px) {
  .app-main {
    padding-top: 16px;
  }
  .app-header {
    margin-bottom: 14px;
  }
}

/* Barra flotante de contacto */
.social {
  gap: 9px;
  right: 18px;
  transform: translateY(-50%);
}
.social a {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(10, 76, 173, 0.08);
  border-radius: 15px;
  color: #0a4cad;
  font-size: 21px;
  box-shadow: 0 10px 28px rgba(16, 47, 67, 0.16);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.social a:hover {
  transform: translateX(-4px);
  color: #fff;
  box-shadow: 0 14px 32px rgba(16, 47, 67, 0.24);
}
.social a::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(5px);
  padding: 7px 10px;
  border-radius: 8px;
  background: #102f43;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.18s ease;
}
.social a:hover::before,
.social a:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.social-whatsapp {
  color: #159447 !important;
}
.social-whatsapp:hover {
  background: #25d366 !important;
  color: #fff !important;
}
.social-facebook {
  color: #1877f2 !important;
}
.social-facebook:hover {
  background: #1877f2 !important;
  color: #fff !important;
}
.social-phone {
  color: #0a4cad !important;
}
.social-phone:hover {
  background: #0a4cad !important;
  color: #fff !important;
}
.social-mail {
  color: #e85d57 !important;
}
.social-mail:hover {
  background: #e85d57 !important;
  color: #fff !important;
}
.social-home {
  color: #5e9638 !important;
}
.social-home:hover {
  background: #8fd200 !important;
  color: #10314a !important;
}
.social-location {
  display: none !important;
  color: #7545b5 !important;
}
.social-location {
  grid-template-rows: 16px 9px;
  align-content: center;
  gap: 0 !important;
}
.social-location > i {
  font-size: 14px;
  line-height: 1;
}
.social-location > span {
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
  background: none;
  color: #7545b5;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
}
.social-location:hover > span {
  color: #fff;
}
.social-location:hover {
  background: #7545b5 !important;
  color: #fff !important;
}
.mobile-nav-toggle {
  display: none;
}
@media (max-width: 560px) {
  .social {
    right: 8px;
  }
  .social a {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .social a::before {
    display: none;
  }
}

/* Landing móvil: navegación compacta y tarjetas de dos columnas */
@media (max-width: 620px) {
  #mainNav .navin {
    height: 68px;
    width: calc(100% - 28px);
    gap: 10px;
  }
  #mainNav .brand {
    flex: 0 1 auto;
    min-width: 0;
  }
  #mainNav .brand img {
    width: 118px;
    height: 52px;
    object-fit: contain;
  }
  #mainNav .navlinks {
    display: none;
  }
  #mainNav .mobile-nav-toggle {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(10, 76, 173, 0.13);
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.9);
    color: #0a4cad;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(16, 47, 67, 0.1);
  }
  #mainNav.mobile-open .mobile-nav-toggle {
    background: #0a4cad;
    color: #fff;
  }
  #mainNav.mobile-open .navlinks {
    position: absolute;
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    z-index: 5;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(10, 76, 173, 0.11);
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 45px rgba(16, 47, 67, 0.2);
    backdrop-filter: blur(14px);
  }
  #mainNav.mobile-open .navlinks a {
    padding: 11px 12px;
    border-radius: 10px;
    color: #17354b;
    font-size: 13px;
    font-weight: 800;
  }
  #mainNav.mobile-open .navlinks a:hover {
    background: #eff8e6;
    color: #0a4cad;
  }
  #mainNav .navin > .btn {
    margin-left: 0;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .services-impact {
    padding: 64px 0;
  }
  .services-impact-head h2 {
    font-size: 36px;
  }
  .services-impact-head p {
    font-size: 14px;
    line-height: 1.6;
  }
  .services-showcase {
    min-height: 440px;
  }
  .service-grid-impact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .service-impact {
    padding: 15px 13px !important;
    border-radius: 18px !important;
    min-width: 0;
  }
  .service-impact .icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 21px !important;
    margin-bottom: 14px !important;
  }
  .service-impact .service-no {
    top: 15px !important;
    right: 14px !important;
    font-size: 10px !important;
  }
  .service-impact h3 {
    font-size: 15px !important;
    line-height: 1.18;
    margin-bottom: 7px !important;
  }
  .service-impact p {
    font-size: 12px !important;
    line-height: 1.45;
  }
  .service-impact.featured a {
    font-size: 11px;
    padding-top: 10px !important;
    line-height: 1.3;
  }

  #consulta .consult-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 12px !important;
  }
  #consulta .consult-card-photo {
    height: 122px !important;
    margin-bottom: 13px !important;
    border-radius: 13px !important;
  }
  #consulta .consult-item h3 {
    font-size: 15px !important;
    line-height: 1.2;
    margin-bottom: 7px !important;
  }
  #consulta .consult-item p {
    font-size: 12px !important;
    line-height: 1.48;
  }
  #consulta .consult-extra {
    padding-top: 34px !important;
  }
  #consulta .consult-extra-head h3 {
    font-size: 25px !important;
  }
  #consulta .consult-extra-head p {
    font-size: 14px;
    line-height: 1.55;
  }
  #consulta .consult-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 25px 14px !important;
  }
  #consulta .consult-extra-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 13px;
    font-size: 19px;
  }
  #consulta .consult-extra-tag {
    font-size: 9px;
    margin-bottom: 6px;
  }
  #consulta .consult-extra-card h4 {
    font-size: 14px !important;
    line-height: 1.25;
    margin-bottom: 7px !important;
  }
  #consulta .consult-extra-card p {
    font-size: 11.5px !important;
    line-height: 1.48;
  }
  #consulta .consult-extra-card small {
    font-size: 10px;
    margin-top: 7px;
  }

  #proceso .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #proceso.process-video-bg .process-steps > div {
    padding: 15px !important;
    border-radius: 15px !important;
    min-width: 0;
  }
  #proceso .process-steps i {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  #proceso .process-steps b {
    font-size: 14px;
    line-height: 1.2;
  }
  #proceso .process-steps span {
    font-size: 11px;
    line-height: 1.4;
  }

  .social {
    top: 50%;
    right: 6px;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 42px;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .social a {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(10, 76, 173, 0.08);
    border-radius: 13px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 7px 20px rgba(16, 47, 67, 0.17);
  }
  .social .social-location {
    display: grid !important;
  }
  .social .social-location > i {
    font-size: 16px;
  }
  .social .social-location > span {
    font-size: 9px;
  }
  .social a:hover {
    transform: translateX(-3px);
  }
}

/* Alta de nutriólogos: formulario compacto y acción siempre visible */
#nutritionistDialog {
  padding-bottom: 16px;
  overflow: hidden;
}
#nutritionistForm {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  max-height: calc(88vh - 41px);
}
#nutritionistDialog .dialog-head {
  margin: 0 0 14px;
  padding: 0 0 12px;
  background: #fff;
  border-bottom: 1px solid #e6ece8;
}
#nutritionistForm > .form-grid {
  min-height: 0;
  overflow-y: auto;
  padding-right: 7px;
}
.nutritionist-branches-field {
  margin: 2px 0 10px;
  padding: 14px;
  border: 1px solid #dce7e1;
  border-radius: 13px;
  background: #f8fbf7;
}
.nutritionist-branches-field legend {
  padding: 0 6px;
  color: #153b68;
  font-size: 14px;
  font-weight: 800;
}
.nutritionist-branches-field legend b {
  color: #9e2d2d;
  font-size: 10px;
  text-transform: uppercase;
}
.nutritionist-branches-field > p {
  margin: 0 0 10px;
  color: #6d7f87;
  font-size: 11px;
}
.nutritionist-branches-field label {
  padding: 9px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e3ebe5;
}
#nutritionistForm > .nutritionist-save {
  position: relative;
  z-index: 4;
  margin-top: 4px;
  box-shadow:
    0 -10px 24px rgba(255, 255, 255, 0.94),
    0 10px 25px rgba(10, 76, 173, 0.18);
}
@media (max-width: 620px) {
  #nutritionistDialog {
    width: calc(100vw - 20px);
    max-height: 94vh;
    padding: 18px 16px 14px;
  }
  #nutritionistForm {
    max-height: calc(94vh - 32px);
  }
  #nutritionistDialog .dialog-head {
    margin: 0 0 12px;
    padding: 0 0 10px;
  }
  #nutritionistForm .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
  }
  #nutritionistForm .field {
    margin-bottom: 11px;
  }
  #nutritionistForm .field input,
  #nutritionistForm .field textarea {
    padding: 10px 11px;
  }
  #nutritionistForm .full-row {
    grid-column: 1/-1;
  }
  #nutritionistBranches {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .nutritionist-branches-field label {
    padding: 8px 6px;
    font-size: 11px;
  }
}

/* Los modales administrativos son elementos <dialog> nativos. Bootstrap usa
   el mismo nombre de clase y aplica pointer-events:none a .modal-dialog. */
dialog.modal-dialog,
dialog.modal-dialog * {
  pointer-events: auto !important;
}

/* Navegación administrativa por módulos */
.admin-side nav {
  gap: 8px;
}

.admin-side .admin-dashboard-link,
.admin-side .admin-module-toggle {
  min-height: 46px;
}

.admin-side .admin-dashboard-link {
  margin-bottom: 3px;
  text-decoration: none;
}

.admin-module-list {
  display: grid;
  gap: 4px;
}

.admin-nav-module {
  min-width: 0;
}

.admin-side nav .admin-module-toggle {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  color: #dce8ee;
}

.admin-side nav .admin-module-toggle:hover,
.admin-side nav .admin-module-toggle:focus-visible,
.admin-nav-module.open > .admin-module-toggle,
.admin-nav-module.has-current > .admin-module-toggle {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: none;
}

.admin-side nav .admin-module-toggle:focus-visible,
.admin-side nav .admin-dashboard-link:focus-visible,
.admin-side nav .admin-submenu-link:focus-visible {
  outline: 3px solid #8fd200;
  outline-offset: 2px;
}

.admin-module-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(143, 210, 0, 0.14);
  color: #b9ef60;
  font-size: 15px;
  line-height: 1;
}

.admin-module-label {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-module-chevron {
  color: #b9cbd3;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  transform: rotate(0deg);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-nav-module.open .admin-module-chevron {
  transform: rotate(90deg);
}

.admin-submenu-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-nav-module.open .admin-submenu-shell {
  grid-template-rows: 1fr;
}

.admin-submenu {
  min-height: 0;
  overflow: hidden;
}

.admin-side nav .admin-submenu-link {
  text-decoration: none;
  min-height: 40px;
  margin: 3px 0 1px 18px;
  width: calc(100% - 18px);
  padding: 7px 9px;
  border-radius: 10px;
  color: #c8d7de;
  font-size: 13px;
  font-weight: 650;
}

.admin-side nav .admin-submenu-link:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}

.admin-side nav .admin-submenu-link.active {
  background: #8fd200;
  box-shadow: none;
  color: #102f43;
  transform: none;
}

.admin-submenu-icon {
  width: 22px;
  flex: 0 0 22px;
  color: #b9ef60;
  text-align: center;
}

.admin-submenu-link.active .admin-submenu-icon {
  color: #102f43;
}

.admin-submenu-empty {
  display: block;
  margin: 3px 8px 4px 48px;
  padding: 7px 9px;
  color: #91a7b2;
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .admin-module-chevron,
  .admin-submenu-shell {
    transition: none;
  }
}

/* Sucursales públicas: sugerencia cercana y selector multicanal */
.branch-suggestion {
  min-height: 100%;
  display: flex !important;
  align-items: center;
  gap: 9px;
}
.branch-suggestion-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #8fd200;
  color: #102f43;
  flex: 0 0 auto;
}
.branch-suggestion-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.branch-suggestion-copy small {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  color: #b9ef60;
  white-space: nowrap;
}
.branch-suggestion-copy strong {
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.branch-suggestion button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #d9f99d;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  padding: 5px 0;
}
.branch-suggestion button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.social button {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(10, 76, 173, 0.08);
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #fff;
  font: inherit;
  font-size: 21px;
  box-shadow: 0 10px 28px rgba(16, 47, 67, 0.16);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.social button:hover {
  transform: translateX(-4px);
  color: #fff;
  box-shadow: 0 14px 32px rgba(16, 47, 67, 0.24);
}
.social button::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(5px);
  padding: 7px 10px;
  border-radius: 8px;
  background: #102f43;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.18s ease;
}
.social button:hover::before,
.social button:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%);
}
.social .social-location {
  display: grid !important;
  color: #7545b5 !important;
}
.branch-info > button {
  align-self: start;
  border: 0;
  background: none;
  color: #5d9639;
  font: inherit;
  font-weight: 900;
  padding: 8px 0 0;
  cursor: pointer;
  text-align: left;
}
.branch-info > button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.branches-with-maps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.branch-contact-dialog {
  width: min(calc(100vw - 32px), 680px);
  max-height: min(90dvh, 860px);
  padding: 0;
  border: 0;
  border-radius: 25px;
  background: #fff;
  color: #17354b;
  box-shadow: 0 35px 90px rgba(9, 35, 48, 0.3);
  overflow: auto;
  scrollbar-gutter: stable;
}
.branch-contact-dialog::backdrop {
  background: rgba(13, 39, 53, 0.68);
  backdrop-filter: blur(7px);
}
.branch-contact-dialog[open] {
  animation: branch-dialog-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.branch-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px 12px;
  background: #fff;
}
.branch-dialog-head img {
  width: 124px;
  height: 58px;
  object-fit: contain;
}
.branch-dialog-head button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #f0f6ec;
  color: #17354b;
  font-size: 20px;
  cursor: pointer;
}
.branch-dialog-head button:hover {
  background: #e6f1df;
}
.branch-dialog-intro {
  padding: 2px 26px 20px;
}
.branch-dialog-intro > span {
  color: #68a03f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.branch-dialog-intro h2 {
  margin: 7px 0 8px;
  color: #17354b;
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.branch-dialog-intro p {
  margin: 0;
  color: #687a83;
  line-height: 1.55;
}
.nearest-branch {
  margin: 0 26px;
  padding: 18px;
  border-radius: 19px;
  background: #102f43;
  color: #fff;
  box-shadow: inset 4px 0 #8fd200;
}
.nearest-branch-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #b9ef60;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.branch-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: start;
}
.branch-contact-card h3 {
  margin: 0 0 5px;
  font-size: 24px;
  color: inherit;
}
.branch-contact-card address {
  margin: 0;
  color: inherit;
  font-style: normal;
  line-height: 1.45;
  opacity: 0.8;
}
.branch-contact-card .branch-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: inherit;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.branch-contact-card .branch-action {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 154px;
  min-height: 46px;
  padding: 11px 15px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #8fd200;
  color: #102f43;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
}
.branch-contact-card .branch-action:hover {
  background: #a1e62c;
  transform: translateY(-2px);
}
.branch-dialog-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 26px 14px;
  color: #85938d;
  font-size: 11px;
}
.branch-dialog-divider::before,
.branch-dialog-divider::after {
  content: "";
  height: 1px;
  background: #dfe8dc;
  flex: 1;
}
.other-branches {
  display: grid;
  gap: 0;
  padding: 0 26px 8px;
}
.other-branches .branch-contact-card {
  padding: 15px 0;
  border-bottom: 1px solid #e5ebe3;
}
.other-branches .branch-contact-card:last-child {
  border-bottom: 0;
}
.other-branches .branch-contact-card h3 {
  font-size: 18px;
}
.other-branches .branch-contact-card address {
  color: #6c7d85;
  font-size: 13px;
}
.other-branches .branch-contact-card .branch-phone {
  color: #17354b;
  font-size: 13px;
}
.other-branches .branch-contact-card .branch-action {
  min-width: 126px;
  min-height: 42px;
  border: 1px solid #d9e5d4;
  background: #fff;
  color: #0a4cad;
  font-size: 13px;
}
.other-branches .branch-contact-card .branch-action:hover {
  border-color: #8fd200;
  background: #f5faee;
}
.branch-privacy {
  display: flex;
  gap: 8px;
  margin: 8px 26px 24px;
  padding-top: 16px;
  border-top: 1px solid #eef2ed;
  color: #7b8b84;
  font-size: 11px;
  line-height: 1.45;
}
.contact-choice-form textarea {
  resize: none;
}
@keyframes branch-dialog-in {
  from {
    opacity: 0.001;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 620px) {
  .topbar {
    position: relative;
    z-index: 31;
    display: flex;
    min-height: 48px;
    padding: 5px 0;
  }
  #mainNav:not(.nav-scrolled) {
    top: 48px;
  }
  .branch-suggestion {
    width: calc(100% - 28px) !important;
    gap: 7px;
  }
  .branch-suggestion-copy {
    display: grid;
    gap: 0;
    line-height: 1.1;
  }
  .branch-suggestion-copy small {
    font-size: 8px;
  }
  .branch-suggestion-copy strong {
    max-width: 155px;
    font-size: 11px;
  }
  .branch-suggestion button {
    font-size: 10px;
    white-space: nowrap;
  }
  .social button {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 7px 20px rgba(16, 47, 67, 0.17);
  }
  .social button::before {
    display: none;
  }
  .branch-contact-dialog {
    width: calc(100vw - 18px);
    max-height: 94dvh;
    border-radius: 20px;
  }
  .branch-dialog-head {
    padding: 14px 18px 8px;
  }
  .branch-dialog-head img {
    width: 105px;
    height: 50px;
  }
  .branch-dialog-intro {
    padding: 2px 18px 16px;
  }
  .nearest-branch {
    margin: 0 18px;
    padding: 16px;
  }
  .branch-contact-card {
    grid-template-columns: 1fr;
  }
  .branch-contact-card .branch-action {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    margin-top: 3px;
  }
  .branch-dialog-divider {
    margin: 21px 18px 10px;
  }
  .other-branches {
    padding: 0 18px 6px;
  }
  .other-branches .branch-contact-card {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 13px 0;
  }
  .other-branches .branch-contact-card .branch-action {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 0;
  }
  .other-branches .branch-contact-card .branch-action i {
    font-size: 17px;
  }
  .branch-privacy {
    margin: 7px 18px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .branch-contact-dialog[open] {
    animation: none;
  }
  .branch-contact-card .branch-action:hover {
    transform: none;
  }
}

/* =========================================================
   QUIENES SOMOS · IDENTIDAD INSTITUCIONAL
   ========================================================= */
#consulta .consult-item-tag {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 9px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(239, 57, 69, 0.16);
  color: #ffd7da;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about-institutional {
  margin-top: 24px;
  padding-top: 0;
}

.identity-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #5f9639;
  font-size: 14px;
  font-weight: 900;
}

.identity-label::before {
  content: "";
  width: 38px;
  height: 3px;
  background: #7fbf55;
}

.identity-purpose {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 16px;
  background: #17354b;
  color: #fff;
}

.identity-purpose-intro {
  min-height: 360px;
  padding: clamp(30px, 3vw, 44px);
  align-content: start;
}

.identity-purpose-intro .identity-label {
  margin-bottom: 24px;
  color: #b9dc7a;
}

.identity-purpose-intro h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.identity-purpose-intro p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.58;
}

.identity-purpose article {
  position: relative;
  display: block;
  min-height: 360px;
  padding: clamp(30px, 3vw, 44px);
}

.identity-purpose article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.identity-purpose-intro + article {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.purpose-mark {
  position: absolute;
  top: clamp(30px, 3vw, 44px);
  left: clamp(24px, 2.4vw, 34px);
  width: 42px;
  height: 42px;
  border: 7px solid #fff;
  transform: rotate(-45deg);
}

.purpose-mark-mission {
  border-radius: 50% 50% 50% 13px;
  background: #7fbf55;
}

.purpose-mark-vision {
  border-radius: 50%;
  background: #ef3945;
}

.purpose-mark-values {
  border-radius: 50% 50% 14px 50%;
  background: #5578a9;
}

.identity-purpose h3 {
  margin: 0 0 14px;
  padding-left: 58px;
  color: #fff;
  font-size: clamp(30px, 3vw, 42px);
  letter-spacing: -0.035em;
}

.identity-purpose p {
  max-width: 38ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.68;
}

@media (max-width: 900px) {
  .identity-purpose article {
    min-height: 350px;
    padding: 30px 22px;
  }

  .purpose-mark {
    top: 30px;
    left: 22px;
    width: 34px;
    height: 34px;
    border-width: 6px;
  }
}

@media (max-width: 680px) {
  .social {
    display: none !important;
  }

  .identity-purpose {
    grid-template-columns: 1fr;
  }

  .identity-purpose-intro {
    min-height: 0;
    padding: 32px 24px;
  }

  .identity-purpose-intro + article {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
  }

  .identity-purpose article {
    min-height: 0;
    padding: 32px 24px;
  }

  .identity-purpose article + article {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
  }

  .purpose-mark {
    top: 32px;
    left: 24px;
    width: 34px;
    height: 34px;
    border-width: 6px;
  }
}

/* Control de enfermedades - NB100 */
.condition-control {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}
.condition-control-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.condition-control-head h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
}
.condition-control-head p {
  margin: 0;
  color: #c8d9d4;
  font-size: 13px;
}
.condition-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}
.condition-card {
  min-height: 92px;
  padding: 13px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  line-height: 1.25;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.condition-card strong {
  font-size: 13px;
  font-weight: 800;
}
.condition-card strong:before {
  content: "✓";
  color: #b9dc7a;
  font-weight: 900;
  margin-right: 5px;
}
.condition-card span {
  display: block;
  margin-top: 6px;
  color: #d7e4e0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}
@media (max-width: 1050px) {
  .condition-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .condition-control-head {
    display: block;
  }
  .condition-control-head p {
    margin-top: 5px;
  }
  .condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .condition-card {
    font-size: 12px;
  }
}

/* Convenios con laboratorios - bloque compacto */
.lab-partners {
  padding: 0 0 54px;
  background: #f5faef;
}
.lab-partners-box {
  display: grid;
  grid-template-columns: 0.8fr 1.7fr;
  gap: 28px;
  align-items: center;
  padding: 24px 28px;
  border: 1px solid rgba(21, 77, 61, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 35px rgba(21, 77, 61, 0.06);
}
.lab-partners-copy .eyebrow {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.lab-partners-copy h3 {
  margin: 0 0 7px;
  color: #0c4faf;
  font-size: 24px;
  line-height: 1.12;
}
.lab-partners-copy p {
  margin: 0;
  color: #65757b;
  font-size: 14px;
  line-height: 1.55;
  max-width: 430px;
}
.lab-partner-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lab-partner-card {
  position: relative;
  display: grid;
  grid-template-columns: 175px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 132px;
  padding: 16px 18px;
  border: 1px solid #e2eadc;
  border-radius: 20px;
  background: #fff;
}
.lab-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 2px;
}
.lab-logo-wrap img {
  display: block;
  max-width: 100%;
  max-height: 92px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lab-partner-card strong {
  display: block;
  margin-bottom: 5px;
  color: #12384d;
  font-size: 16px;
}
.lab-partner-card span {
  display: block;
  color: #687a80;
  font-size: 12.5px;
  line-height: 1.45;
}
.lab-partner-featured {
  padding-right: 124px;
}
.lab-discount {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #8bd900;
  color: #073d73;
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 1050px) {
  .lab-partners-box {
    grid-template-columns: 1fr;
  }
  .lab-partner-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .lab-partners {
    padding-bottom: 38px;
  }
  .lab-partners-box {
    padding: 20px;
    border-radius: 22px;
  }
  .lab-partner-cards {
    grid-template-columns: 1fr;
  }
  .lab-partner-card {
    grid-template-columns: 135px 1fr;
  }
  .lab-logo-wrap {
    height: 82px;
  }
  .lab-logo-wrap img {
    max-height: 78px;
  }
  .lab-partner-featured {
    padding-right: 18px;
    padding-top: 52px;
  }
  .lab-discount {
    left: 18px;
    right: auto;
    top: 14px;
  }
  .lab-partners-copy h3 {
    font-size: 21px;
  }
}

/* ===== Estándar de monitores NB100 ===== */
.view-heading-actions-only { justify-content: flex-end; margin-bottom: 18px; min-height: 0; }
.view-heading-actions-only:empty { display:none; }
.monitor-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 18px; }
.monitor-kpi { background:#fff; border:1px solid #e1e9e3; border-radius:16px; padding:16px 18px; box-shadow:0 8px 24px rgba(13,54,71,.04); }
.monitor-kpi span { display:block; color:#728187; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.monitor-kpi strong { display:block; color:#0c4faf; font-size:27px; line-height:1; }
.monitor-table { width:100%!important; }
.data-card .dt-container { padding:0; }
.dt-container .dt-layout-row:first-child { padding:14px 18px 8px; margin:0; }
.dt-container .dt-layout-row:last-child { padding:10px 18px 16px; margin:0; }
.dt-container .dt-search input, .dt-container .dt-length select { border:1px solid #d9e3df!important; border-radius:9px!important; padding:7px 9px!important; background:#fff!important; }
.dt-container .dt-button { border:1px solid #d9e3df!important; border-radius:9px!important; background:#fff!important; color:#0c4faf!important; font-weight:800!important; }
.dt-container .dt-paging .dt-paging-button.current { background:#8bd900!important; border-color:#8bd900!important; color:#073d73!important; border-radius:8px; }
@media(max-width:900px){.monitor-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.monitor-kpis{grid-template-columns:1fr;}}

/* Pacientes: ficha con información general + historial */
#patientDialog { width: min(94vw, 920px); padding: 0; overflow: hidden; }
#patientDialog .dialog-head { padding: 24px 28px 16px; margin: 0; }
#patientDetail { max-height: calc(88vh - 72px); overflow: auto; padding: 0 28px 28px; }
.patient-tabs { display: flex; gap: 6px; border-bottom: 1px solid #e2e9ee; margin-bottom: 22px; position: sticky; top: 0; background: #fff; z-index: 2; padding-top: 2px; }
.patient-tab { border: 0; background: transparent; color: #71828d; padding: 12px 16px; font: inherit; font-weight: 800; cursor: pointer; border-bottom: 3px solid transparent; }
.patient-tab.active { color: #0a4cad; border-bottom-color: #8fd200; }
.patient-tab span { display: inline-flex; min-width: 21px; height: 21px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 20px; background: #edf4e3; color: #507714; font-size: 11px; margin-left: 5px; }
.patient-tab-panel { display: none; }
.patient-tab-panel.active { display: block; }
.patient-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.patient-section-title h3 { margin: 0; color: #153b68; font-size: 17px; }
.patient-section-title small { color: #7a8a93; font-weight: 700; }
.patient-form-grid { gap: 0 16px; }
.patient-form-grid .patient-wide { grid-column: 1 / -1; }
.patient-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #e4eaee; margin-top: 8px; padding-top: 18px; }
.patient-form-footer .check-line { margin: 0; align-items: center; }
.patient-save-btn { min-width: 190px; }
.patient-history table { width: 100%; }
@media (max-width: 680px) {
  #patientDialog { width: 96vw; }
  #patientDialog .dialog-head { padding: 20px 18px 12px; }
  #patientDetail { padding: 0 18px 20px; }
  .patient-tabs { overflow-x: auto; }
  .patient-tab { white-space: nowrap; padding-inline: 10px; }
  .patient-form-grid { grid-template-columns: 1fr; }
  .patient-form-grid .patient-wide { grid-column: auto; }
  .patient-form-footer { align-items: stretch; flex-direction: column; }
  .patient-save-btn { width: 100%; }
}

/* Detalle de cita - kardex con campos de solo lectura */
.appointment-kardex{padding:4px 0 0}.appointment-kardex-head{align-items:flex-start}.appointment-kardex-title{display:flex;flex-direction:column;gap:3px}.appointment-kardex-title>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.appointment-kardex-title h2{margin:0}.appointment-kardex-label{font-size:13px;color:#60758a}.kardex-section{padding:14px 0}.kardex-section h3{margin:0 0 14px;color:#123f72}.kardex-divider{border:0;border-top:1px solid #dce4e8;margin:2px 0}.kardex-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 16px}.kardex-input-grid .wide{grid-column:1/-1}.kardex-readonly{display:flex;flex-direction:column;gap:6px}.kardex-readonly span{font-size:11px;font-weight:800;text-transform:uppercase;color:#667b87;letter-spacing:.02em}.kardex-readonly input{width:100%;box-sizing:border-box;border:1px solid #d9e3e7;border-radius:10px;background:#f7f9f8;color:#123f72;font-weight:700;padding:11px 12px;min-height:42px;opacity:1;-webkit-text-fill-color:#123f72}.kardex-readonly input:disabled{opacity:1;cursor:default}.status-actions{border-top:1px solid #dce4e8;padding-top:14px;margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}@media(max-width:650px){.kardex-input-grid{grid-template-columns:1fr}.kardex-input-grid .wide{grid-column:auto}}
/* Registro de pacientes y usuarios administrativos */
.compact-form-dialog{width:min(94vw,720px);padding:0;overflow:hidden}.compact-form-dialog .dialog-head{padding:24px 28px 16px;margin:0}.dialog-form{padding:0 28px 26px}.dialog-form .field small{display:block;margin-top:5px;color:#7a8a93;font-size:11px;line-height:1.4}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;border-top:1px solid #e4eaee;margin-top:18px;padding-top:18px}.role-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#eaf3dc;color:#507714;font-size:11px;font-weight:800;text-transform:uppercase}@media(max-width:680px){.compact-form-dialog .dialog-head{padding:20px 18px 12px}.dialog-form{padding:0 18px 20px}.dialog-actions{align-items:stretch;flex-direction:column-reverse}.dialog-actions button{width:100%}}

/* Usuarios admin - switch de estado */
.user-status-field{margin-top:8px}.user-status-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 16px;border:1px solid #dbe4e8;border-radius:12px;background:#f8faf9}.user-status-row>div{min-width:0}.user-status-row strong{display:block;color:#173f68;font-size:13px;font-weight:800;margin-bottom:2px}.user-status-row small{margin:0!important;max-width:480px}.ios-switch{position:relative;display:inline-flex;flex:0 0 auto;width:48px;height:28px;cursor:pointer}.ios-switch input{position:absolute;opacity:0;width:0;height:0}.ios-slider{position:absolute;inset:0;border-radius:999px;background:#cbd5da;transition:.2s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.ios-slider:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s ease}.ios-switch input:checked+.ios-slider{background:#7bd500}.ios-switch input:checked+.ios-slider:before{transform:translateX(20px)}.ios-switch input:focus-visible+.ios-slider{outline:3px solid rgba(20,89,190,.2);outline-offset:2px}@media(max-width:520px){.user-status-row{gap:14px}.user-status-row small{font-size:10px}}

/* Recursos Humanos - Empleados */
.employee-dialog{width:min(96vw,1040px);padding:0;overflow:hidden}.employee-dialog .dialog-head{padding:22px 28px 15px;margin:0}.employee-dialog .dialog-head>div small{color:#75858c}.employee-dialog .dialog-form{max-height:calc(90vh - 82px);overflow:auto}.employee-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}.employee-span-2{grid-column:span 2}.employee-status-field{grid-column:auto}.employee-summary{margin-top:18px;border:1px solid #dfe8e4;border-radius:13px;background:#f8faf9;overflow:hidden}.employee-summary>strong{display:block;padding:12px 15px;color:#173f68}.employee-summary>div{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #dfe8e4}.employee-summary span{padding:12px 15px;text-align:center;color:#728187;font-size:11px;text-transform:uppercase;font-weight:800;border-right:1px solid #dfe8e4}.employee-summary span:last-child{border:0}.employee-summary b{display:block;color:#153b68;font-size:15px;margin-top:5px;text-transform:none}.users-readonly-note{color:#71828d;font-weight:700;background:#f5f8f7;border:1px solid #e0e8e4;border-radius:10px;padding:9px 12px}.users-linked{font-size:11px;color:#71828d;font-weight:800}@media(max-width:780px){.employee-form-grid{grid-template-columns:1fr 1fr}.employee-span-2{grid-column:span 1}.employee-summary>div{grid-template-columns:1fr 1fr}}@media(max-width:540px){.employee-form-grid{grid-template-columns:1fr}.employee-summary>div{grid-template-columns:1fr}.employee-summary span{border-right:0;border-bottom:1px solid #dfe8e4}}

/* NB100 Empleados — modal XL de escritorio
   Se usa mayor especificidad que dialog.modal-dialog para que el ancho
   general de 720px no limite este formulario. */
dialog.modal-dialog.employee-dialog {
  width: min(94vw, 1320px);
  max-width: 1320px;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
}

dialog.modal-dialog.employee-dialog .dialog-head {
  padding: 24px 32px 16px;
}

dialog.modal-dialog.employee-dialog .dialog-form {
  padding: 0 32px 24px;
  max-height: calc(92vh - 86px);
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 1180px) {
  dialog.modal-dialog.employee-dialog .employee-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 18px;
  }
}

@media (max-width: 1179px) {
  dialog.modal-dialog.employee-dialog {
    width: min(94vw, 1040px);
    max-width: 1040px;
  }
}

@media (max-width: 780px) {
  dialog.modal-dialog.employee-dialog {
    width: 94vw;
    max-width: 94vw;
    max-height: 94vh;
  }
  dialog.modal-dialog.employee-dialog .dialog-head {
    padding: 20px 18px 12px;
  }
  dialog.modal-dialog.employee-dialog .dialog-form {
    padding: 0 18px 20px;
    max-height: calc(94vh - 76px);
  }
}

/* Empleados: orden visual por secciones */
.employee-form-section-title{grid-column:1/-1;margin:8px 0 14px;padding:0 0 9px;border-bottom:1px solid #e3ebe8;color:#174d86;font-size:13px;font-weight:800;letter-spacing:.01em}
.employee-form-section-title:first-child{margin-top:0}
@media(max-width:780px){.employee-form-section-title{margin-top:12px}.employee-dialog .employee-span-2{grid-column:1/-1}}

/* Empleados: secciones claramente separadas */
.employee-form-sections{display:block}
.employee-form-section{display:block}
.employee-form-section-title{margin:0 0 14px!important;padding:0!important;border:0!important;color:#174d86;font-size:15px;font-weight:800;letter-spacing:.01em}
.employee-section-divider{border:0;border-top:1px solid #dce6e3;margin:20px 0}
.employee-dialog .employee-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px}
.employee-dialog .employee-personal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.employee-dialog .employee-access-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.employee-dialog .employee-form-grid .field{margin:0;min-width:0}
.employee-dialog .employee-form-grid .field input,.employee-dialog .employee-form-grid .field select{width:100%}
.employee-dialog .employee-status-field .user-status-row{min-height:47px}
@media(max-width:1179px){.employee-dialog .employee-form-grid,.employee-dialog .employee-personal-grid,.employee-dialog .employee-access-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.employee-dialog .employee-form-grid,.employee-dialog .employee-personal-grid,.employee-dialog .employee-access-grid{grid-template-columns:1fr}.employee-section-divider{margin:16px 0}}
/* RH: catálogos, sucursales y origen de nutriólogos */
.employee-branches-field{grid-column:span 2;border:1px solid #d6e1e5;border-radius:12px;padding:12px 14px;margin:0}.employee-branches-field legend{font-weight:800;color:#365164;padding:0 5px}.employee-branches-field>small{display:block;color:#72848d;margin-bottom:9px}.employee-branches-field .check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.employee-branches-field .check-grid label{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:9px 10px;border:1px solid #dce6e9;border-radius:9px;background:#fbfdfd;font-weight:700;color:#173e64}.employee-branches-field .check-grid label small{grid-column:2;color:#71818a;font-weight:500}.hr-catalog-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:18px}.catalog-card-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.catalog-card-head h2{margin:0;color:#123e6c}.catalog-card-head small{color:#72848d}.catalog-dialog{width:min(560px,calc(100vw - 30px))!important}.nutritionists-source-note{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:18px;border:1px solid #cfe0ea;border-radius:14px;background:#f4f9fc;color:#173e64}.nutritionists-source-note>i{font-size:24px;color:#145bb5}.nutritionists-source-note>div{display:flex;flex-direction:column;gap:3px;flex:1}.nutritionists-source-note span{font-size:13px;color:#637985}.source-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9f7ee;color:#21733f;font-size:11px;font-weight:800}.source-badge.legacy{background:#f3f4f5;color:#66747c}@media(max-width:900px){.hr-catalog-layout{grid-template-columns:1fr}.employee-branches-field{grid-column:1/-1}.nutritionists-source-note{align-items:flex-start;flex-wrap:wrap}}@media(max-width:600px){.employee-branches-field .check-grid{grid-template-columns:1fr}}
/* ===== Consulta clínica NB100 ===== */
.consultation-page .consultation-workspace{max-width:1500px}.consultation-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;margin-bottom:14px;border-left:5px solid #8fd200}.consultation-hero h2{margin:4px 0;color:#123f72;font-size:26px}.consultation-hero p{margin:0;color:#70818b;font-weight:700}.consult-type{font-size:11px;font-weight:900;letter-spacing:.08em;color:#5d7e1e;background:#edf7da;border-radius:99px;padding:6px 10px}.consult-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.consult-status{font-weight:900;color:#0a4cad;background:#edf4ff;padding:8px 12px;border-radius:99px}.consult-progress{height:5px;background:#e7edef;border-radius:99px;overflow:hidden;margin-bottom:16px}.consult-progress>div{height:100%;width:10%;background:#8fd200;transition:.25s}.consult-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}.consult-nav{padding:10px;position:sticky;top:18px}.consult-nav button{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 10px;border-radius:10px;color:#657985;font-weight:800;cursor:pointer}.consult-nav button b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#eef2f3;color:#7c8d94;font-size:11px}.consult-nav button.active{background:#eef6ff;color:#0a4cad}.consult-nav button.active b{background:#0a4cad;color:#fff}.consult-content{min-width:0}.consult-step{display:none;background:#fff;border:1px solid #e0e7e9;border-radius:16px;padding:26px;box-shadow:0 8px 25px rgba(17,52,75,.05);min-height:560px}.consult-step.active{display:block}.section-heading{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #e8edef;padding-bottom:18px;margin-bottom:22px}.section-heading span{font-size:11px;font-weight:900;color:#7aaa20;letter-spacing:.08em}.section-heading h3{margin:3px 0 0;color:#123f72;font-size:23px}.section-heading p{margin:5px 0 0;max-width:430px;text-align:right;color:#7a898f}.consult-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.consult-summary-grid article,.evolution-kpis article{padding:16px;border:1px solid #e0e7e9;border-radius:12px;background:#f9fbfa}.consult-summary-grid span,.evolution-kpis span{display:block;font-size:10px;text-transform:uppercase;font-weight:900;color:#7b8b91}.consult-summary-grid strong,.evolution-kpis strong{display:block;margin-top:5px;color:#173f68;font-size:16px}.clinical-card{border:1px solid #e0e7e9;border-radius:14px;padding:18px;background:#fff}.clinical-card h4{font-size:15px;color:#173f68;margin:0 0 12px}.clinical-field{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:900;color:#536c78}.clinical-field input,.clinical-field textarea{width:100%;border:1px solid #d9e3e7;border-radius:10px;padding:11px 12px;font:inherit;font-weight:600;color:#183f67;background:#fff;resize:vertical}.clinical-field input:focus,.clinical-field textarea:focus,.measurement-grid input:focus{outline:3px solid rgba(10,76,173,.10);border-color:#7ca6df}.measurement-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.measurement-grid>label{border:1px solid #e0e7e9;border-radius:13px;padding:14px;background:#fbfcfc}.measurement-grid>label>span{display:block;font-size:11px;font-weight:900;color:#617985;margin-bottom:8px}.measurement-grid>label>div{display:flex;align-items:center;gap:6px}.measurement-grid input{min-width:0;width:100%;border:0;background:transparent;color:#123f72;font-size:21px;font-weight:900;outline:0}.measurement-grid small{font-weight:800;color:#8a999f}.measurement-grid .calculated{background:#f2f8e8;border-color:#dbe9c2}.scanner-check{padding:15px;border:1px solid #dce9c7;background:#f5faed;border-radius:12px;margin-bottom:12px;font-weight:900;color:#476f18}.scanner-safety{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}.scanner-safety span{padding:10px;border-radius:10px;background:#f5f7f7;color:#61747c;font-size:11px;font-weight:800}.evolution-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.evolution-kpis small{display:block;margin-top:5px;color:#7a8a91}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.chart-grid .clinical-card{height:300px}.chart-grid canvas{width:100%!important;height:235px!important}.complete-box{margin-top:20px;border:1px solid #dce9c7;background:#f7fbf0;border-radius:14px;padding:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.complete-box strong{color:#365e12}.complete-box p{margin:0;flex:1;color:#71827a;min-width:240px}.consult-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 4px}.consult-footer>div{display:flex;gap:8px}.consult-footer>span{font-size:11px;font-weight:800;color:#7c8c92}.consultation-launch{text-decoration:none!important;padding:8px 13px!important;font-size:12px!important}.muted{color:#73858d}.patient-history .small-btn{text-decoration:none;display:inline-block}
@media(max-width:1100px){.consult-layout{grid-template-columns:1fr}.consult-nav{position:static;display:flex;overflow:auto}.consult-nav button{min-width:145px}.consult-summary-grid{grid-template-columns:repeat(2,1fr)}.measurement-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.consultation-hero,.section-heading{flex-direction:column;align-items:flex-start}.section-heading p{text-align:left}.consult-summary-grid,.measurement-grid,.evolution-kpis,.chart-grid{grid-template-columns:1fr 1fr}.scanner-safety{grid-template-columns:1fr 1fr}.consult-step{padding:18px}.consult-footer{flex-wrap:wrap}.consult-footer>span{order:3;width:100%;text-align:center}}
@media(max-width:480px){.consult-summary-grid,.measurement-grid,.evolution-kpis,.chart-grid{grid-template-columns:1fr}.chart-grid .clinical-card{height:280px}.consult-hero-actions{align-items:flex-start}.consult-footer>div{width:100%}.consult-footer .btn{flex:1}}

/* ===== Citas: kardex modal UX/UI v2 ===== */
dialog.modal-dialog.appointment-dialog{width:min(94vw,820px);max-width:820px;padding:0;overflow:hidden;border-radius:22px;box-shadow:0 28px 80px rgba(9,35,55,.28)}
.appointment-dialog .appointment-kardex-head{margin:0;padding:22px 26px 18px;background:linear-gradient(180deg,#f9fbfc 0%,#fff 100%);border-bottom:1px solid #e7edef;align-items:center}
.appointment-dialog .appointment-kardex-title{gap:4px}
.appointment-dialog .appointment-kardex-label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#7c8e98}
.appointment-dialog .appointment-kardex-title>div{gap:10px}
.appointment-dialog .appointment-kardex-title h2{font-size:22px;letter-spacing:.01em;color:#0b4aa2}
.appointment-dialog .dialog-head>button[data-close]{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#f0f4f5;color:#637985;font-size:25px;line-height:1;transition:.2s}
.appointment-dialog .dialog-head>button[data-close]:hover{background:#e5ecee;color:#163f68;transform:rotate(5deg)}
.appointment-kardex-v2{padding:0}
.appointment-patient-card{display:flex;align-items:center;gap:15px;padding:22px 26px;background:#fff;border-bottom:1px solid #e7edef}
.patient-avatar{width:54px;height:54px;flex:0 0 54px;border-radius:16px;display:grid;place-items:center;background:#edf7d9;color:#4d7615;font-size:18px;font-weight:900;letter-spacing:.03em}
.patient-main-data{min-width:0;flex:1}.patient-main-data>span{display:block;margin-bottom:2px;color:#82929a;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.patient-main-data h3{margin:0;color:#123f72;font-size:19px}.patient-contact-copy{display:flex;gap:15px;flex-wrap:wrap;margin-top:7px}.patient-contact-copy span{display:flex;align-items:center;gap:6px;color:#667c87;font-size:12px;font-weight:700}.patient-contact-copy i{color:#91a0a7;font-size:11px}.patient-contact-actions{display:flex;gap:7px}.patient-contact-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid #dce6e9;border-radius:11px;background:#fff;color:#174d86;text-decoration:none;transition:.18s}.patient-contact-btn:hover{border-color:#b9d3e5;background:#f1f7fb;transform:translateY(-1px)}
.appointment-detail-section{padding:21px 26px 23px}.appointment-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.appointment-section-title span{display:block;color:#173f68;font-size:15px;font-weight:900}.appointment-section-title small{display:block;margin-top:2px;color:#87969d;font-size:11px}
.appointment-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.appointment-info-item{display:flex;align-items:center;gap:11px;min-width:0;padding:12px 13px;border:1px solid #e2e9eb;border-radius:12px;background:#fafcfc}.appointment-info-item.wide{grid-column:1/-1}.appointment-info-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:9px;background:#eef4f8;color:#17589a}.appointment-info-item>div{min-width:0}.appointment-info-item small{display:block;margin-bottom:3px;color:#819198;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.appointment-info-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#173f68;font-size:13px}
.appointment-action-zone{padding:18px 26px 24px;background:#f7f9f9;border-top:1px solid #e5ebed}.appointment-main-actions{display:flex;gap:9px;margin-bottom:18px}.appointment-primary-action{min-height:46px;flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 17px;border-radius:12px;background:#8fd200;color:#123500!important;font-size:13px;font-weight:900;text-decoration:none!important;box-shadow:0 7px 18px rgba(111,166,0,.18);transition:.18s}.appointment-primary-action i:last-child{margin-left:auto}.appointment-primary-action:hover{transform:translateY(-1px);filter:brightness(.97);box-shadow:0 10px 22px rgba(111,166,0,.24)}.appointment-secondary-action{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid #ccd9de;border-radius:12px;background:#fff;color:#174d86;font-weight:850;cursor:pointer}.appointment-secondary-action:hover{background:#f0f5f7;border-color:#b7cbd3}
.appointment-status-block{padding-top:16px;border-top:1px solid #dfe7e9}.appointment-status-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}.appointment-status-heading>span{color:#5d727c;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.appointment-status-heading small{color:#829198;font-size:10px}.appointment-status-heading b{color:#173f68}.appointment-status-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.appointment-status-btn{position:relative;min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 7px;border:1px solid #dce5e8;border-radius:10px;background:#fff;color:#607580;font-size:10px;font-weight:850;cursor:pointer;transition:.18s}.appointment-status-btn>i:first-child{font-size:12px}.appointment-status-btn:hover:not(:disabled){border-color:#b8cbd2;background:#f9fbfb;transform:translateY(-1px)}.appointment-status-btn.active{background:#edf6df;border-color:#d7e9b9;color:#4e7518;cursor:default}.appointment-status-btn.status-cancelled:not(.active){color:#a64a43}.appointment-status-btn.status-no_show:not(.active){color:#4c6170}.status-current-check{position:absolute;right:6px;top:6px;font-size:7px;color:#68a300}
@media(max-width:680px){dialog.modal-dialog.appointment-dialog{width:94vw;max-height:94vh}.appointment-dialog .appointment-kardex-head,.appointment-patient-card,.appointment-detail-section,.appointment-action-zone{padding-left:18px;padding-right:18px}.appointment-patient-card{align-items:flex-start;flex-wrap:wrap}.patient-main-data{min-width:calc(100% - 72px)}.patient-contact-actions{margin-left:69px}.patient-contact-copy{flex-direction:column;gap:4px}.appointment-info-grid{grid-template-columns:1fr}.appointment-info-item.wide{grid-column:auto}.appointment-main-actions{flex-direction:column}.appointment-status-options{grid-template-columns:repeat(2,1fr)}.appointment-status-heading{align-items:flex-start;flex-direction:column;gap:3px}}

/* NB100 · Dashboard personal + Ventas / Finanzas */
.dashboard-main-layout .admin-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-main-layout .dashboard-grid{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}.dashboard-tasks-card{height:100%;min-height:540px}.dashboard-task-list{display:flex;flex-direction:column;gap:10px}.dashboard-task-item{display:block;text-decoration:none;color:#153b68;background:#f8faf7;border:1px solid #e0e8dc;border-left:4px solid #8fd200;border-radius:14px;padding:14px;transition:.18s ease}.dashboard-task-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,47,67,.08);background:#fff}.dashboard-task-item>strong{display:block;font-size:14px;line-height:1.35;margin:6px 0}.dashboard-task-item small{color:#71818a}.dashboard-task-top{display:flex;justify-content:space-between;gap:10px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#6a7a82}.dashboard-task-top b{background:#eaf6d8;color:#527b20;padding:3px 7px;border-radius:999px}.dashboard-task-item.priority-alta{border-left-color:#dc3545}.dashboard-task-item.priority-urgente{border-left-color:#b02a37}.dashboard-task-item.priority-baja{border-left-color:#5ba7d8}.dashboard-task-empty{padding:30px 10px;text-align:center;color:#7a8b92}
.pos-search-card,.pos-cart-card,.chart-card{border-radius:18px}.pos-appointment-list{display:flex;flex-direction:column;gap:9px;max-height:440px;overflow:auto}.pos-appointment{width:100%;border:1px solid #dfe8dc;background:#fff;border-radius:14px;padding:13px 15px;display:grid;grid-template-columns:1.3fr 1fr auto;gap:15px;text-align:left;align-items:center;color:#153b68}.pos-appointment:hover{border-color:#8fd200;background:#fbfff6}.pos-appointment>div{display:flex;flex-direction:column}.pos-appointment span,.pos-appointment small{font-size:12px;color:#74858c}.pos-appointment.is-paid{opacity:.68}.pos-empty{padding:38px 16px;text-align:center;color:#75868d;background:#f8faf7;border:1px dashed #cad8c5;border-radius:14px}.pos-patient{display:flex;flex-direction:column;background:#f3f8ee;border-radius:14px;padding:15px;margin-bottom:15px}.pos-patient strong{font-size:19px;color:#0a4cad}.pos-patient span{font-size:12px;color:#6d7d84}.pos-item{display:grid;grid-template-columns:1fr 65px 125px 42px;gap:7px;margin-bottom:8px}.pos-total{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #dfe7dd;margin:18px 0;padding-top:16px}.pos-total span{font-size:13px;color:#74858c}.pos-total strong{font-size:28px;color:#0a4cad}.sale-link{border:0;background:none;color:#0a4cad;font-weight:800;padding:0}.sale-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.sale-paid{background:#e5f5d2;color:#47751d}.sale-pending{background:#fff3cd;color:#8a6700}.sale-cancelled{background:#f8d7da;color:#842029}.sale-detail-head{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sale-detail-head>div,.payment-summary{display:flex;flex-direction:column;background:#f5f8f3;border-radius:14px;padding:15px}.sale-detail-head span,.sale-detail-head small,.payment-summary span{font-size:12px;color:#73838a}.sale-detail-items{margin:18px 0}.sale-detail-items>div{display:flex;justify-content:space-between;padding:10px 4px;border-bottom:1px solid #e7ece4}.sale-detail-total{display:flex;justify-content:space-between;align-items:center;background:#102f43;color:#fff;padding:16px;border-radius:14px}.sale-detail-total strong{font-size:25px}.payment-summary{margin-top:14px;background:#edf8df}.payment-controls{width:100%;display:grid;grid-template-columns:180px 1fr auto;gap:8px}.finance-filters label{display:block;font-size:11px;font-weight:800;color:#60737c;margin-bottom:5px;text-transform:uppercase}.finance-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:20px}.finance-kpis article{background:#fff;border:1px solid #dfe7dd;border-radius:16px;padding:17px}.finance-kpis span,.finance-kpis small{display:block;color:#72838a;font-size:11px}.finance-kpis strong{display:block;color:#0a4cad;font-size:24px;margin:6px 0}.chart-card canvas{max-height:280px}
@media(max-width:1200px){.dashboard-main-layout .admin-kpis{grid-template-columns:repeat(2,1fr)}.finance-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.pos-appointment{grid-template-columns:1fr}.pos-item{grid-template-columns:1fr 60px 110px 40px}.sale-detail-head{grid-template-columns:1fr}.payment-controls{grid-template-columns:1fr}.finance-kpis{grid-template-columns:1fr 1fr}}

/* NB100 POS + Almacén */
.nb-pos-shell{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start}.nb-pos-ticket{background:#fff;border:1px solid #dce5dc;border-radius:22px;min-height:680px;position:sticky;top:18px;overflow:hidden}.ticket-head{padding:22px;border-bottom:1px solid #e7ece7;display:flex;justify-content:space-between;align-items:flex-start}.ticket-head h2{margin:3px 0}.nb-pos-ticket #posCart{padding:18px 22px}.ticket-items{max-height:330px;overflow:auto}.ticket-summary{border-top:1px solid #dfe6df;margin-top:16px;padding-top:14px}.ticket-summary>div{display:flex;justify-content:space-between;padding:5px 0}.ticket-total{font-size:1.35rem;color:#064e9e}.pos-appointment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.branch-lock{padding:10px 14px;border-radius:12px;background:#eef5e7;color:#335e18;font-weight:800}.warehouse-toolbar{display:flex;align-items:center;justify-content:space-between}.treatment-products{border:1px solid #dbe4df;border-radius:16px;padding:18px;background:#fbfcfb}.treatment-products .table th{font-size:.76rem;text-transform:uppercase;color:#65756c}.warehouse-toolbar .form-select{min-width:220px}@media(max-width:1199px){.nb-pos-shell{grid-template-columns:1fr}.nb-pos-ticket{position:static;min-height:auto}.pos-appointment-grid{grid-template-columns:1fr}}

/* Agenda administrativa desde Pacientes */
.patient-row-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}.patient-appointment-btn{background:#0b56b3!important;color:#fff!important;border-color:#0b56b3!important;text-decoration:none!important}.appointment-selected-patient{margin:4px 0 18px;padding:14px 16px;border:1px solid #dfe8e4;border-radius:14px;background:#f7faf8;display:grid;gap:3px}.appointment-selected-patient span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#708078;text-transform:uppercase}.appointment-selected-patient strong{font-size:18px;color:#0b3565}.appointment-selected-patient small{color:#66756e}

.password-wrap{position:relative}.password-wrap input{padding-right:48px!important;width:100%}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#0b4eae;font-size:1.2rem;padding:8px;cursor:pointer}
/* Consulta kardex continuo */
.consultation-page .consult-step{display:block!important;margin-bottom:22px;scroll-margin-top:24px}.consultation-page .consult-nav{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow:auto}.consultation-page .consult-footer #prevStep,.consultation-page .consult-footer #nextStep{display:none}.lab-catalog{display:grid;gap:14px}.lab-group{border:1px solid #dce6e3;border-radius:14px;overflow:hidden;background:#fff}.lab-group h4{margin:0;padding:12px 14px;background:#f2f7f5;font-size:15px}.lab-row{display:grid;grid-template-columns:minmax(210px,2fr) 1fr 1fr 1.2fr;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid #edf1f0}.lab-row input{width:100%;border:1px solid #d6e0dd;border-radius:8px;padding:8px}.lab-row .ref{font-size:12px;color:#60716d}.lab-row.in-range input.result{background:#effbea;border-color:#8bd64d}.lab-row.out-range input.result{background:#fff0f0;border-color:#e46b6b}.menu-grid{display:grid;grid-template-columns:150px repeat(5,minmax(180px,1fr));gap:8px;overflow:auto}.menu-grid textarea{min-height:125px}.menu-grid .meal{font-weight:800;padding:10px}.password-wrap{position:relative}@media(max-width:900px){.consultation-page .consult-nav{position:relative;top:auto}.lab-row{grid-template-columns:1fr 1fr}.menu-grid{grid-template-columns:120px repeat(5,220px)}}

/* Consulta NB100: datos de paciente, guardado por paso y archivos de laboratorio */
.patient-extra-meta{margin-top:8px;font-size:.9rem;color:#64748b;font-weight:600}
.step-save-bar{margin-top:22px;padding-top:16px;border-top:1px solid #e5edf1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.step-save-state{font-size:.82rem;color:#64748b;font-weight:600}
.lab-files-list{display:grid;gap:10px}.lab-file-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #dce6ea;border-radius:12px;background:#fff}.lab-file-main{display:flex;align-items:center;gap:12px;min-width:0}.lab-file-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#f1f5f9;font-size:1.25rem}.lab-file-name{font-weight:800;color:#0b3f78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lab-file-meta{font-size:.78rem;color:#718096}.lab-file-actions{display:flex;gap:8px;flex-shrink:0}

/* Consulta NB100: datos de paciente, guardado por paso y archivos de laboratorio */
.patient-extra-meta{margin-top:8px;font-size:.9rem;color:#64748b;font-weight:600}
.step-save-bar{margin-top:22px;padding-top:16px;border-top:1px solid #e5edf1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.step-save-state{font-size:.82rem;color:#64748b;font-weight:600}
.lab-files-list{display:grid;gap:10px}.lab-file-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #dce6ea;border-radius:12px;background:#fff}.lab-file-main{display:flex;align-items:center;gap:12px;min-width:0}.lab-file-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#f1f5f9;font-size:1.25rem}.lab-file-name{font-weight:800;color:#0b3f78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lab-file-meta{font-size:.78rem;color:#718096}.lab-file-actions{display:flex;gap:8px;flex-shrink:0}

/* Product catalog modal */
.nb-product-modal{border-radius:22px!important;overflow:hidden!important;box-shadow:0 24px 70px rgba(8,37,61,.24)!important;background:#fff!important}
.nb-product-html{margin:0!important;padding:0!important;text-align:left!important}
.nb-product-modal .swal2-title{display:none!important}
.product-modal-head{display:flex;gap:16px;align-items:center;padding:25px 30px 22px;background:linear-gradient(135deg,#073651,#0b4c6e);color:#fff}
.product-modal-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:rgba(137,216,0,.16);border:1px solid rgba(160,230,45,.28);color:#9ee000;font-size:25px;font-weight:800;flex:0 0 52px}
.product-modal-kicker{display:block;color:#a6df36;font-size:11px;font-weight:800;letter-spacing:1.5px;margin-bottom:4px}
.product-modal-head h2{margin:0;font-size:25px;font-weight:800;letter-spacing:-.3px}.product-modal-head p{margin:4px 0 0;color:rgba(255,255,255,.72);font-size:13px}
.product-modal-body{padding:24px 30px 6px}.product-section{padding-bottom:22px;margin-bottom:20px;border-bottom:1px solid #e9eef1}.product-section-last{border-bottom:0;margin-bottom:0}
.product-section-title{display:flex;align-items:center;gap:11px;margin-bottom:15px}.product-section-title>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#eff8df;color:#5c9200;font-size:11px;font-weight:900}.product-section-title b{display:block;color:#0b3650;font-size:15px}.product-section-title small{display:block;color:#89969d;font-size:11px;margin-top:1px}
.product-label{display:block;margin:0 0 6px;color:#40525c;font-size:12px;font-weight:750}.product-control{height:44px!important;border:1px solid #dce4e8!important;border-radius:10px!important;background:#fbfcfc!important;font-size:14px!important;color:#20343f!important;box-shadow:none!important}.product-control:focus{background:#fff!important;border-color:#79b900!important;box-shadow:0 0 0 3px rgba(121,185,0,.11)!important}textarea.product-control{height:auto!important;min-height:100px!important;resize:vertical}.product-help{font-size:10px;color:#98a3a9;margin-top:5px}
.product-money{position:relative}.product-money>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;color:#689800;font-weight:800}.product-money input{padding-left:31px!important;font-weight:700}
.nb-product-actions{margin:0!important;padding:18px 30px 24px!important;border-top:1px solid #edf1f3!important;justify-content:flex-end!important;gap:10px!important}.nb-product-save,.nb-product-cancel{border:0;border-radius:10px;padding:11px 20px;font-size:13px;font-weight:800}.nb-product-save{background:#0756a8;color:#fff;box-shadow:0 6px 16px rgba(7,86,168,.18)}.nb-product-save:hover{background:#06498f}.nb-product-cancel{background:#edf1f3;color:#5d6b73}.nb-product-cancel:hover{background:#e1e7ea}
@media(max-width:767px){.product-modal-head{padding:20px}.product-modal-body{padding:20px 18px 4px}.nb-product-actions{padding:16px 18px 20px!important}.product-modal-icon{display:none}}


/* Almacén: botones principales y modal de requisición */
.primary-btn{border:0!important;border-radius:13px!important;background:#0756b3!important;color:#fff!important;font-weight:800!important;font-size:13px!important;padding:13px 20px!important;box-shadow:0 8px 20px rgba(7,86,179,.16)!important;transition:.18s ease!important}.primary-btn:hover{background:#064b9d!important;transform:translateY(-1px)}
.nb-req-modal{border-radius:22px!important;overflow:hidden!important;box-shadow:0 26px 75px rgba(8,37,61,.25)!important;background:#fff!important}.nb-req-html{margin:0!important;padding:0!important;text-align:left!important}.nb-req-modal .swal2-title{display:none!important}
.req-modal-head{display:flex;align-items:center;gap:16px;padding:25px 30px 22px;background:linear-gradient(135deg,#073651,#0b4c6e);color:#fff}.req-modal-icon{width:52px;height:52px;display:grid;place-items:center;flex:0 0 52px;border-radius:15px;background:rgba(151,220,24,.15);border:1px solid rgba(168,229,52,.25);color:#9ee000;font-size:25px;font-weight:900}.req-modal-head span{display:block;color:#a6df36;font-size:11px;font-weight:900;letter-spacing:1.4px;margin-bottom:4px}.req-modal-head h2{margin:0;font-size:25px;font-weight:850}.req-modal-head p{margin:4px 0 0;color:rgba(255,255,255,.72);font-size:13px}
.req-modal-body{padding:24px 30px 5px}.req-section{padding-bottom:21px;margin-bottom:20px;border-bottom:1px solid #e9eef1}.req-section-last{border-bottom:0;margin-bottom:0}.req-section-title{display:flex;gap:11px;align-items:center;margin-bottom:14px}.req-section-title>b{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#eff8df;color:#5d9300;font-size:11px;font-weight:900}.req-section-title strong{display:block;color:#0b3650;font-size:15px}.req-section-title small{display:block;color:#89969d;font-size:11px;margin-top:1px}
.req-control{min-height:44px!important;border:1px solid #dce4e8!important;border-radius:10px!important;background:#fbfcfc!important;box-shadow:none!important;color:#20343f!important;font-size:14px!important}.req-control:focus{background:#fff!important;border-color:#79b900!important;box-shadow:0 0 0 3px rgba(121,185,0,.11)!important}.req-control:disabled{background:#eef2f4!important;color:#66757d!important;opacity:1!important}.req-help{margin-top:6px;color:#849198;font-size:11px}
.req-line{padding:14px;border:1px solid #e3eaed;border-radius:13px;background:#fbfcfc;margin-bottom:10px}.req-line-main{display:grid;grid-template-columns:minmax(0,1fr) 155px 42px;gap:12px;align-items:end}.req-field label{display:block;margin:0 0 6px;color:#40525c;font-size:12px;font-weight:800}.req-field small{display:block;margin-top:5px;color:#98a3a9;font-size:10px}.req-qty-field input{text-align:center;font-weight:800}.req-remove{width:42px;height:44px;border:1px solid #ffd8d8;border-radius:10px;background:#fff3f3;color:#d43b3b;font-size:21px;line-height:1;font-weight:700}.req-remove:hover{background:#ffe6e6}.req-add-line{border:1px dashed #8bbbdc;background:#f5fbff;color:#0756a8;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:800}.req-add-line:hover{background:#edf8ff}.req-notes{resize:vertical;min-height:88px!important}
.nb-req-actions{margin:0!important;padding:18px 30px 24px!important;border-top:1px solid #edf1f3!important;justify-content:flex-end!important;gap:10px!important}.nb-req-save,.nb-req-cancel{border:0;border-radius:10px;padding:11px 20px;font-size:13px;font-weight:800}.nb-req-save{background:#0756a8;color:#fff;box-shadow:0 6px 16px rgba(7,86,168,.18)}.nb-req-save:hover{background:#06498f}.nb-req-cancel{background:#edf1f3;color:#5d6b73}.nb-req-cancel:hover{background:#e1e7ea}
@media(max-width:700px){.req-modal-head{padding:20px}.req-modal-body{padding:20px 18px 4px}.req-line-main{grid-template-columns:1fr 100px 42px}.nb-req-actions{padding:16px 18px 20px!important}.req-modal-icon{display:none}}

/* Requisiciones: alineación uniforme Producto / Cantidad */
.req-line-main{align-items:start!important}
.req-product-field,.req-qty-field{display:flex;flex-direction:column;min-width:0}
.req-product-field label,.req-qty-field label{height:18px;line-height:18px;margin:0 0 7px!important}
.req-product-field .req-control,.req-qty-field .req-control{height:44px!important;min-height:44px!important;margin:0!important}
.req-qty-field small{height:15px;line-height:15px;margin:6px 0 0!important}
.req-remove{margin-top:25px}
@media(max-width:700px){.req-remove{margin-top:25px}}

/* Catálogo de productos: thumbnails y carga de imagen */
.product-thumb{width:54px;height:54px;border:1px solid #dce5e7;border-radius:12px;background:#f7faf9;display:flex;align-items:center;justify-content:center;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:contain;background:#fff}.product-thumb span{font-size:20px;color:#9aabb1}.product-image-editor{display:flex;gap:22px;align-items:center;padding:16px;border:1px solid #dce5e7;border-radius:16px;background:#f8fbfa}.product-image-preview{width:132px;height:132px;flex:0 0 132px;border:1px dashed #a9bdc4;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}.product-image-preview img{width:100%;height:100%;object-fit:contain}.product-image-preview div{display:flex;flex-direction:column;gap:4px;color:#71838a}.product-image-preview small{font-size:11px}.product-image-copy{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.product-image-copy p{margin:0;color:#6e7d83;font-size:13px}.product-image-copy>small{color:#87969c}.product-image-button{display:inline-flex;align-items:center;justify-content:center;background:#0b57b7;color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}.product-image-button:hover{background:#084994}@media(max-width:700px){.product-image-editor{align-items:flex-start}.product-image-preview{width:100px;height:100px;flex-basis:100px}}

/* Productos - estatus activo/inactivo */
.product-status-cell{display:flex;align-items:center;gap:9px;min-width:112px}.product-status-cell small{font-weight:800;color:#55707d}.product-inactive{opacity:.58;background:#f8fafb}.product-inactive .product-thumb{filter:grayscale(1)}.product-status-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 16px;border:1px solid #dbe4e8;border-radius:12px;background:#f8faf9}.product-status-row strong{display:block;color:#173f68;font-size:14px;font-weight:800;margin-bottom:3px}.product-status-row small{display:block;color:#73838b;max-width:620px}.product-status-section{margin-bottom:0}
/* ===== Monitor de Recetas ===== */
.recipe-status{display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em}.rs-nueva{background:#eaf2ff;color:#0b55b5}.rs-parcial{background:#fff3d6;color:#9a6500}.rs-surtida{background:#e8f7dd;color:#4c7b12}.rs-cancelada{background:#fde9e7;color:#a33d35}.recipe-progress{width:110px;height:7px;background:#e8eef0;border-radius:999px;overflow:hidden;margin-bottom:4px}.recipe-progress span{display:block;height:100%;background:#8bd900;border-radius:999px}.recipe-view{padding:7px 12px!important;border-radius:9px!important;background:#0c55b5!important;color:#fff!important}.recipe-dialog{width:min(96vw,1080px)!important;max-width:1080px!important;padding:0!important;overflow:hidden;border-radius:22px!important}.recipe-head{margin:0!important;padding:22px 26px!important;background:#0d4c6d;color:#fff}.recipe-head h2{color:#fff;margin:3px 0}.recipe-head .eyebrow{color:#9be000}.recipe-head small{color:#dceaf0}.recipe-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 24px;background:#f6f9f8;border-bottom:1px solid #e2e9e7}.recipe-summary>div{padding:12px;border:1px solid #e0e8e5;border-radius:12px;background:#fff}.recipe-summary span,.recipe-item span{display:block;font-size:9px;font-weight:900;text-transform:uppercase;color:#7b8b91;margin-bottom:4px}.recipe-summary b{color:#123f72}.recipe-items{padding:18px 24px;max-height:55vh;overflow:auto}.recipe-item{display:grid;grid-template-columns:minmax(260px,2fr) .55fr .55fr .7fr 1fr;gap:14px;align-items:center;padding:14px 15px;margin-bottom:9px;border:1px solid #dfe8e5;border-radius:14px;background:#fff}.recipe-item.no-stock{background:#fffafa}.recipe-product b{display:block;color:#123f72}.recipe-product small{display:block;margin-top:4px;color:#71828a}.recipe-item label input{width:100%;box-sizing:border-box;min-height:40px;border:1px solid #d7e2df;border-radius:9px;padding:7px 10px}.recipe-item label small{display:block;margin-top:4px;color:#819097;font-size:9px}.stock-ok{color:#5d9700}.stock-no{color:#c3433b}.recipe-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid #e3e9e7;background:#fafcfc}.recipe-cancel{background:#fff!important;color:#a33d35!important;border:1px solid #e8c5c1!important}.recipe-actions button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:800px){.recipe-summary{grid-template-columns:1fr 1fr}.recipe-item{grid-template-columns:1fr 1fr}.recipe-product{grid-column:1/-1}}@media(max-width:520px){.recipe-summary,.recipe-item{grid-template-columns:1fr}}


/* Contexto global de usuario y sucursal */
.admin-user-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.15;
}
.admin-user-role {
  display: block;
  margin-top: 3px;
  color: #748391;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.admin-branch-context {
  margin: 2px 8px 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.admin-branch-context span {
  display: block;
  margin-bottom: 3px;
  color: #8fd200;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.admin-branch-context strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Administrador · Ver como sucursal */
.admin-branch-context.is-switchable { cursor:pointer; transition:.18s ease; }
.admin-branch-context.is-switchable:hover { background:rgba(143,210,0,.13); border-color:rgba(143,210,0,.34); transform:translateY(-1px); }
.admin-branch-context em { display:block; margin-top:5px; color:#aebbc5; font-size:9px; font-style:normal; font-weight:700; }
.branch-view-dialog { width:min(560px,calc(100vw - 32px)); padding:0; border:0; border-radius:20px; overflow:hidden; box-shadow:0 28px 80px rgba(5,31,45,.28); }
.branch-view-dialog::backdrop { background:rgba(7,27,39,.58); backdrop-filter:blur(2px); }
.branch-view-head { padding:25px 28px 22px; background:#0d4d6c; color:#fff; }
.branch-view-head span { color:#8fd200; font-size:10px; font-weight:900; letter-spacing:.12em; }
.branch-view-head h2 { margin:5px 0 4px; font-size:25px; }
.branch-view-head p { margin:0; color:#d7e5ec; font-size:13px; line-height:1.45; }
.branch-view-body { padding:24px 28px 20px; }
.branch-view-body label { display:block; margin-bottom:7px; color:#123b51; font-size:12px; font-weight:800; }
.branch-view-body select { width:100%; min-height:46px; padding:0 13px; border:1px solid #d5e0e5; border-radius:11px; background:#fff; font:inherit; }
.branch-view-warning { margin-top:16px; padding:13px 14px; border-radius:11px; background:#f4f8ef; border:1px solid #dfeccd; color:#49606b; font-size:12px; line-height:1.5; }
.branch-view-actions { display:flex; justify-content:flex-end; gap:9px; padding:16px 28px 22px; border-top:1px solid #edf1f2; }
body[data-branch-view="1"] .admin-branch-context { box-shadow:inset 3px 0 0 #8fd200; }

/* Acciones rápidas del monitor de citas */
.appointment-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.appointment-row-actions .small-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.appointment-row-actions .consultation-row-btn {
  border-color: #8fd200;
  background: #8fd200;
  color: #123500;
}
.appointment-row-actions .consultation-row-btn:hover {
  background: #7fc000;
  border-color: #7fc000;
}
.appointment-row-actions .consultation-row-btn.disabled {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}
/* ===== NB100 · Nutrición / Ingredientes ===== */
.ingredient-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}.ingredient-categories{background:#fff;border:1px solid #dfe8e4;border-radius:16px;padding:14px;position:sticky;top:18px}.ingredient-cat-title{display:flex;align-items:end;justify-content:space-between;padding:5px 5px 12px;border-bottom:1px solid #edf2ef;margin-bottom:8px}.ingredient-cat-title strong{color:#083d66;font-size:16px}.ingredient-cat-title span{font-size:11px;color:#7a8a92}.ingredient-cat{width:100%;border:0;background:transparent;border-radius:10px;padding:10px 9px;display:flex;align-items:center;justify-content:space-between;color:#51636e;cursor:pointer;font:inherit;margin:2px 0;text-align:left}.ingredient-cat span{display:flex;gap:9px;align-items:center}.ingredient-cat i{width:17px;text-align:center;color:#78a22f}.ingredient-cat b{font-size:11px;background:#eef3f0;border-radius:20px;min-width:27px;padding:3px 7px;text-align:center}.ingredient-cat:hover{background:#f5f9f6}.ingredient-cat.active{background:#eaf3ff;color:#0754a6;font-weight:700}.ingredient-cat.active i{color:#0754a6}.ingredient-cat.active b{background:#fff;color:#0754a6}.ingredient-source{margin-top:14px;padding:12px;background:#f6f8f7;border-radius:11px;display:flex;gap:9px;color:#5c6e77}.ingredient-source i{color:#78a22f;margin-top:2px}.ingredient-source b,.ingredient-source span{display:block}.ingredient-source b{font-size:11px;color:#264653;margin-bottom:3px}.ingredient-source span{font-size:10px;line-height:1.35}.ingredient-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.ingredient-toolbar h2{margin:0;color:#063f73;font-size:23px}.ingredient-toolbar p{margin:5px 0 0;color:#74838c;font-size:13px}.ingredient-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.ingredient-kpis .monitor-kpi{border-top:3px solid #78a22f}.ingredient-kpis .monitor-kpi strong{color:#063f73}.ingredient-table-card{overflow:hidden}.ingredient-name{display:flex;align-items:center;gap:9px;min-width:190px}.ingredient-name b,.ingredient-name small{display:block}.ingredient-name small{color:#94a0a7;font-size:10px;margin-top:2px}.ingredient-icon{width:31px;height:31px;border-radius:9px;background:#eef7e8;color:#6d9b27;display:grid;place-items:center}.ingredient-category-badge{display:inline-block;padding:5px 9px;border-radius:20px;background:#eef7e8;color:#557c20;font-size:11px;font-weight:700;white-space:nowrap}.ingredient-detail-btn{white-space:nowrap}.ingredient-dialog{width:min(900px,94vw)}.ingredient-detail{padding:0 22px 22px}.ingredient-detail-hero{display:flex;align-items:center;justify-content:space-between;background:#f7faf8;border:1px solid #e4ece7;border-radius:14px;padding:17px;margin-bottom:16px}.ingredient-detail-hero p{font-size:12px;color:#718087;margin:8px 0 0}.macro-ring{width:76px;height:76px;border-radius:50%;border:7px solid #dbeccf;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#315d16}.macro-ring strong{font-size:22px;line-height:1}.macro-ring span{font-size:10px;margin-top:3px}.nutrient-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.nutrient-cell{border:1px solid #e2e9e5;border-radius:10px;padding:10px 11px;min-height:60px}.nutrient-cell span,.nutrient-cell strong{display:block}.nutrient-cell span{font-size:10px;color:#7b8a91;margin-bottom:6px}.nutrient-cell strong{font-size:14px;color:#173f57}.ingredient-note{margin-top:14px;font-size:11px;color:#74838c;background:#f7f9fa;border-radius:9px;padding:10px}.ingredient-note i{color:#0754a6;margin-right:5px}@media(max-width:1050px){.ingredient-layout{grid-template-columns:1fr}.ingredient-categories{position:static}.ingredient-categories #categoryButtons{display:flex;gap:6px;flex-wrap:wrap}.ingredient-cat{width:auto}.ingredient-cat-title,.ingredient-source{display:none}.nutrient-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.ingredient-kpis{grid-template-columns:repeat(2,1fr)}.nutrient-grid{grid-template-columns:repeat(2,1fr)}.ingredient-toolbar{align-items:flex-start;gap:12px}.ingredient-toolbar-actions{display:none}}
/* ===== NB100 · Nutrición / Recetas de alimentos ===== */
.recipe-food-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.recipe-food-head h2{margin:0;color:#063f73;font-size:23px}.recipe-food-head p{margin:5px 0 0;color:#74838c;font-size:13px}.recipe-food-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.recipe-food-kpis .monitor-kpi{border-top:3px solid #78a22f}.table-sub{display:block;color:#89979e;font-size:10px;margin-top:4px}.recipe-editor-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.recipe-editor-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,1fr);gap:18px;align-items:start}.recipe-editor-main,.nutrition-panel{background:#fff;border:1px solid #dfe8e4;border-radius:16px}.recipe-editor-main{padding:20px}.nutrition-panel{padding:20px;position:sticky;top:18px}.recipe-title-field span,.section-label{display:block;font-size:11px;font-weight:800;color:#536873;margin-bottom:7px}.recipe-title-field input,.recipe-section>input,.picker-body>input{width:100%;box-sizing:border-box;border:1px solid #d6e0e4;border-radius:9px;min-height:42px;padding:0 12px;font:inherit}.recipe-summary{display:grid;grid-template-columns:150px 1fr 100px;gap:18px;align-items:center;padding:20px 0}.recipe-photo{text-align:center;color:#718087;font-size:11px}.recipe-photo-placeholder{height:72px;border-radius:13px;background:#f4f7f6;display:grid;place-items:center;font-size:25px;margin-bottom:6px}.macro-summary{display:flex;gap:20px;flex-wrap:wrap}.macro-summary div{display:grid;grid-template-columns:24px auto;column-gap:7px;align-items:center}.macro-summary b{grid-row:1/3;width:24px;height:24px;border-radius:7px;background:#eef7e8;color:#557c20;display:grid;place-items:center}.macro-summary span{font-size:11px;font-weight:700}.macro-summary strong{font-size:11px;color:#718087}.kcal-donut{width:80px;height:80px;border-radius:50%;border:8px solid #78a22f;display:flex;flex-direction:column;justify-content:center;align-items:center}.kcal-donut strong{font-size:22px;color:#173f57}.kcal-donut span{font-size:9px;color:#7b8a91}.recipe-section{padding:17px 0;border-top:1px dashed #d9e1de}.recipe-section h3,.nutrition-panel h3{font-size:14px;color:#153f56;margin:0 0 12px}.meal-checks{display:flex;gap:18px;flex-wrap:wrap}.meal-checks label{font-size:12px}.soft-btn{border:0;border-radius:22px;background:#edf4ff;color:#174f8e;padding:9px 14px;font-weight:700;cursor:pointer}.selected-ingredients{margin-bottom:12px}.recipe-empty{padding:16px;border-radius:10px;background:#f7f9f8;color:#87949a;font-size:12px}.recipe-ingredient-row{display:grid;grid-template-columns:70px 1fr 32px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1ef}.recipe-ingredient-row input{width:70px;box-sizing:border-box;border:1px solid #d7e0e3;border-radius:8px;padding:8px}.recipe-ingredient-row span,.recipe-ingredient-row b,.recipe-ingredient-row small{display:block}.recipe-ingredient-row span{font-size:10px;color:#6e9b30}.recipe-ingredient-row b{font-size:13px;color:#173f57;margin:2px 0}.recipe-ingredient-row small{font-size:10px;color:#829097}.icon-delete{border:0;background:transparent;font-size:20px;color:#87949a;cursor:pointer}.recipe-text-row{display:grid;grid-template-columns:22px 1fr 32px;gap:8px;align-items:center;margin-bottom:9px}.recipe-text-row>span{color:#a3afb4}.recipe-text-row input{border:1px solid #d7e0e3;border-radius:8px;padding:9px 11px}.section-row{display:flex;justify-content:space-between;align-items:center}.section-row span{font-size:10px;color:#87949a}.nutrition-panel h2{font-size:18px;margin:0 0 12px;color:#103b54}.nutrition-kcal,.nutrition-panel #macroPanel div,.nutrition-panel #microPanel div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:11px}.nutrition-kcal{padding-bottom:12px;border-bottom:1px solid #e5ebE8;margin-bottom:14px}.nutrition-panel #macroPanel{padding-bottom:12px;border-bottom:1px solid #e5ebe8;margin-bottom:14px}.nutrition-panel b{font-weight:600;color:#63757e}.nutrition-note{margin-top:14px;background:#edf5ff;color:#4e6675;border-radius:9px;padding:10px;font-size:10px;line-height:1.45}.ingredient-picker{width:min(720px,94vw)}.picker-body{padding:0 20px 20px}.picker-body>input{margin-bottom:12px}.picker-item{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid #edf1ef;background:#fff;padding:11px 8px;text-align:left;cursor:pointer}.picker-item:hover{background:#f6f9f7}.picker-item span,.picker-item b,.picker-item small{display:block}.picker-item span{font-size:9px;color:#6e9b30}.picker-item b{font-size:12px;color:#173f57;margin:2px 0}.picker-item small{font-size:10px;color:#829097}.picker-item strong{font-size:20px;color:#0754a6}@media(max-width:1000px){.recipe-editor-grid{grid-template-columns:1fr}.nutrition-panel{position:static}.recipe-summary{grid-template-columns:120px 1fr}.kcal-donut{display:none}}@media(max-width:700px){.recipe-food-kpis{grid-template-columns:repeat(2,1fr)}.recipe-summary{grid-template-columns:1fr}.macro-summary{gap:10px}.recipe-food-head{align-items:flex-start;gap:10px}}

/* Recetas alimentos V1 final */
.recipe-photo-upload{cursor:pointer;overflow:hidden;position:relative}
.recipe-photo-upload img{width:100%;height:92px;object-fit:cover;border-radius:12px;display:block}
.recipe-photo-upload small{display:block;font-size:10px;color:#7b8794;margin-top:3px}
.meal-switches{display:flex;gap:22px;flex-wrap:wrap}
.meal-switches label{display:flex;align-items:center;gap:8px;cursor:pointer}
.meal-switches input{position:absolute;opacity:0;pointer-events:none}
.meal-switches .ios-switch{width:38px;height:22px;border-radius:999px;background:#cbd5df;position:relative;transition:.2s;display:inline-block}
.meal-switches .ios-switch:after{content:"";width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;left:2px;top:2px;box-shadow:0 1px 4px #0003;transition:.2s}
.meal-switches input:checked+.ios-switch{background:#86d500}
.meal-switches input:checked+.ios-switch:after{transform:translateX(16px)}
.meal-switches b{font-weight:600}
.recipe-bottom-save{display:flex;justify-content:flex-end;padding:22px 0 5px;border-top:1px solid #e4e9e6;margin-top:18px}
.recipe-table-thumb{width:58px;height:44px;border-radius:9px;object-fit:cover;border:1px solid #e0e7e3;display:block}
.recipe-table-thumb.empty{display:flex;align-items:center;justify-content:center;background:#f4f7f5;color:#9aa5a0}


/* Planes nutricionales V1 */
.plan-kpis{grid-template-columns:repeat(4,1fr)}
.table-sub{display:block;color:#84919a;font-size:10px;margin-top:4px}.plan-type{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800}.plan-type.assigned{background:#eaf2ff;color:#1454a6}.plan-type.template{background:#eef8df;color:#4c7b0a}.meal-badges{display:flex;gap:4px;flex-wrap:wrap}.meal-badges span{background:#f0f4f2;border:1px solid #dfe7e2;border-radius:999px;padding:3px 7px;font-size:10px}
.plan-builder{padding-bottom:95px}.plan-builder-top{display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:end;gap:18px;margin-bottom:18px}.plan-name-wrap label,.plan-panel label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#66747d}.plan-name-wrap input,.plan-panel input,.plan-panel select{height:44px;border:1px solid #d8e0dc;border-radius:10px;padding:0 12px;background:#fff;color:#0a3457}.plan-stepper{display:flex;justify-content:center;gap:0;margin:0 auto 20px}.plan-stepper button{border:1px solid #dce4e0;background:#fff;padding:11px 20px;color:#53616a}.plan-stepper button:first-child{border-radius:24px 0 0 24px}.plan-stepper button:last-child{border-radius:0 24px 24px 0}.plan-stepper button.active{color:#0755bd;border-bottom:3px solid #0755bd}.plan-stepper b{margin-right:5px}.plan-step{display:none}.plan-step.active{display:block}.plan-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.plan-panel{background:#fff;border:1px solid #dce4e0;border-radius:20px;padding:28px}.plan-panel h2{font-size:20px;margin:0 0 5px}.plan-panel>p,.panel-title-row p{color:#7c8992;margin:0 0 24px}.form-grid{display:grid;gap:10px;margin:14px 0}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid.three{grid-template-columns:repeat(3,1fr)}.energy-strip{border-top:1px solid #e5ebe7;margin-top:20px;padding-top:18px;display:flex;gap:22px;flex-wrap:wrap}.energy-strip b{color:#063b70}.panel-title-row{display:flex;justify-content:space-between;gap:20px;align-items:start}.kcal-target{min-width:170px}.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.macro-grid>div{display:grid;gap:8px}.macro-grid output{height:42px;background:#f8faf9;border:1px solid #e2e7e4;border-radius:10px;padding:12px;color:#87939a}.suffix{position:relative}.suffix input{width:100%;padding-right:30px}.suffix span{position:absolute;right:12px;top:14px;color:#87939a}.macro-note{margin-top:18px;background:#eef7e5;padding:12px;border-radius:10px;color:#4d750f}.macro-note.bad{background:#fff1e8;color:#a54c13}
.portions-layout{grid-template-columns:1.15fr .85fr}.portion-table-wrap{max-height:540px;overflow:auto}.portion-table{width:100%;border-collapse:collapse}.portion-table th,.portion-table td{padding:10px;border-bottom:1px solid #edf0ee;text-align:right}.portion-table th:first-child,.portion-table td:first-child{text-align:left}.portion-input{width:90px!important;text-align:center}.sticky-panel{position:sticky;top:20px;height:max-content}.real-macros{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.real-macros>div{background:#f7f9f8;padding:16px;border-radius:12px}.real-macros span,.real-macros small{display:block;color:#7c8992}.real-macros b{display:block;font-size:20px;margin:6px 0}
.distribution-wrap{overflow:auto;max-height:580px}.distribution-table{border-collapse:collapse;min-width:900px;width:100%}.distribution-table th,.distribution-table td{border-right:1px solid #e1e6e3;border-bottom:1px solid #e8ecea;padding:12px;text-align:center;min-width:170px}.distribution-table th:first-child{text-align:left;min-width:230px}.distribution-table th span{float:right;background:#fff0d8;padding:4px 8px;border-radius:999px}.dist-input{width:76px!important;text-align:center}.recipe-select{display:block;width:100%;margin-top:12px;border:0;border-radius:20px;padding:8px;background:#e7efff;color:#0d59c7;font-weight:700}.meal-remove{float:right;border:0;background:none;color:#98a3aa}.plan-type-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.plan-type-cards label{display:flex!important;align-items:flex-start;gap:10px;border:1px solid #dfe6e2;border-radius:14px;padding:18px;cursor:pointer}.plan-type-cards input{height:auto}.plan-type-cards small{display:block;color:#7b8992;margin-top:5px}.plan-summary dl{margin:0}.plan-summary dl div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #edf0ee}.plan-summary dt{color:#7b8992}.plan-summary dd{font-weight:800}.plan-builder-nav{position:fixed;bottom:0;left:222px;right:0;background:#fff;border-top:1px solid #dfe5e2;padding:14px 28px;display:flex;justify-content:space-between;z-index:20}.recipe-picker{width:min(720px,92vw)}.recipe-picker-list{max-height:55vh;overflow:auto;padding:15px}.recipe-pick{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:12px;padding:13px;border-bottom:1px solid #edf0ee}.recipe-pick input{height:auto}.recipe-pick small{display:block;color:#7c8992;margin-top:4px}
@media(max-width:1100px){.plan-grid-2,.portions-layout{grid-template-columns:1fr}.plan-kpis{grid-template-columns:repeat(2,1fr)}.plan-builder-nav{left:0}.macro-grid{grid-template-columns:1fr}.plan-builder-top{grid-template-columns:1fr}.form-grid.three{grid-template-columns:1fr 1fr}}

/* Plan nutricional · paso 2 equivalentes */
.p2-targets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 22px}.p2-targets label{font-size:12px;color:#7c8992;position:relative}.p2-targets input{width:100%;margin-top:7px;border:1px solid #dce3df;border-radius:10px;padding:12px 30px 12px 11px;color:#002f67;background:#fff}.p2-targets label span{position:absolute;right:10px;bottom:12px;color:#7c8992}.distribution-label{font-weight:700;border-top:1px solid #edf0ee;padding-top:18px;margin-bottom:10px}.real-macros.avena{grid-template-columns:repeat(4,1fr);gap:8px}.real-macros.avena>div{background:transparent;padding:8px 4px}.real-macros.avena span strong{float:right;color:#002f67}.real-macros.avena b{color:#e17b00;font-size:17px}.real-macros.avena small{color:#e17b00}.real-macros.avena small.over{color:#d93025}.equiv-note{font-size:11px;color:#7c8992;border-top:1px solid #edf0ee;padding-top:14px;margin-top:12px}@media(max-width:1200px){.p2-targets,.real-macros.avena{grid-template-columns:repeat(2,1fr)}}

/* Administrador de permisos */
.permissions-layout{display:grid;grid-template-columns:minmax(240px,290px) minmax(0,1fr);gap:18px;align-items:start}.permission-side,.permission-content{padding:22px}.permission-side h3{margin:0 0 8px}.permission-side p,.permission-heading p{color:#697586;font-size:13px}.permission-tabs{display:flex;gap:8px;margin:18px 0}.permission-tabs button,.permission-subject{cursor:pointer;border:1px solid #dce2e8;border-radius:8px;background:#fff;padding:10px}.permission-tabs button.active,.permission-subject.active{background:#e8f4ef;border-color:#14846a;color:#08755d}.permission-search{width:100%;padding:11px;border:1px solid #dce2e8;border-radius:8px;margin-bottom:12px}.permission-subject{display:block;width:100%;text-align:left;margin:5px 0}.permission-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid #e8edf2;padding-bottom:18px}.permission-heading h2{margin:0}.permission-save{background:#16845e;color:white;border:0;border-radius:8px;padding:11px 18px;cursor:pointer}.permission-save:disabled{opacity:.45}.permission-actions{display:flex;justify-content:space-between;gap:12px;padding:20px 0}.permission-pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.permission-page{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid #e1e7ec;border-radius:10px;cursor:pointer}.permission-page span{display:grid;gap:4px}.permission-page small{color:#77818c}.permission-page input{accent-color:#16845e;width:17px;height:17px}@media(max-width:850px){.permissions-layout{grid-template-columns:1fr}.permission-heading{flex-wrap:wrap}}

/* NB100 etiquetas inteligentes */
.nb-tags{position:relative;margin-top:5px;border:1px solid #d7e3e4;border-radius:12px;padding:10px;background:#fff}.nb-tag-list{display:flex;flex-wrap:wrap;gap:6px}.nb-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:7px;background:#eaf6d8;color:#164478;font-size:13px}.nb-tag-remove{border:0;background:transparent;color:#164478;cursor:pointer;font-weight:bold;font-size:18px}.nb-tag-input{border:0!important;outline:0!important;box-shadow:none!important;width:100%;padding:9px 3px;background:transparent}.nb-tag-suggestions{position:absolute;z-index:40;left:0;right:0;top:100%;background:white;border:1px solid #d7e3e4;box-shadow:0 8px 20px #1232;border-radius:9px;max-height:190px;overflow:auto}.nb-tag-suggestion{display:block;width:100%;text-align:left;border:0;background:white;padding:9px 12px;color:#164478}.nb-tag-suggestion:hover{background:#eef8e4}