/* ==========================================================================
   BIOTÉCNICA — Design system
   Palette derived from logo_biotec.png and logo_syngenta.png
   --------------------------------------------------------------------------
   Display : Outfit          — geometric sans, echoes the Biotécnica wordmark
   Body    : Source Serif 4  — field-guide readability for technical copy
   Data    : IBM Plex Mono   — spec rows, eyebrows, label-style metadata
   ========================================================================== */

:root {
  /* Brand — sampled from the supplied logo files */
  --navy:        #18145B;
  --navy-800:    #221E6B;
  --navy-900:    #0D0A38;
  --green:       #00A610;
  --green-700:   #00840D;
  --green-100:   #E4F4E2;
  --syn-navy:    #000066;

  /* Neutrals */
  --bone:        #F7F8F3;
  --white:       #FFFFFF;
  --ink:         #1A1A2E;
  --ink-60:      #5C5D78;
  --ink-30:      #9A9BB0;
  --line:        #E2E4DC;
  --line-soft:   #EEF0E9;

  /* Type */
  --display: "Outfit", "Segoe UI", Tahoma, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --band:    clamp(3.5rem, 8vw, 7rem);
  --radius:  6px;

  /* Logo sizing — ONE place to tune.
     These values suit the tightly-cropped logo_biotec.png shipped in images/
     (565x200, aspect 2.82). If you swap in the ORIGINAL file, which carries
     heavy internal padding, roughly double them: 86 / 62 / 78. */
  --logo-h:      48px;
  --logo-h-sm:   38px;
  --logo-h-foot: 44px;

  --shadow:  0 1px 2px rgba(24,20,91,.06), 0 8px 28px rgba(24,20,91,.07);
  --shadow-lift: 0 2px 4px rgba(24,20,91,.08), 0 18px 44px rgba(24,20,91,.13);
}

/* ---------- Reset ---------- */
/* Scoped away from report pages: Crystal Reports emits pixel-exact tables
   with padding, and border-box silently eats the declared column widths. */
body:not(.report), body:not(.report) *, body:not(.report) *::before, body:not(.report) *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body:not(.report) img { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.65rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
p  { margin: 0 0 1.1em; }

/* ---------- Layout ---------- */
.wrap { width: min(1180px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--band); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--bone { background: var(--bone); }
.section--white { background: var(--white); }
.section--navy { background: var(--navy); color: #D9DAEA; }
.section--navy h2, .section--navy h3 { color: var(--white); }

/* Eyebrow — mono, used to label every band */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--green);
  flex: none;
}
.section--navy .eyebrow { color: #7FD98A; }
.section--navy .eyebrow::before { background: #7FD98A; }

.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-60); }
.section--navy .lede { color: #B9BAD4; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em;
  padding: .82rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-decoration: none !important;
}
.btn:hover { transform: translateY(-2px); }
.btn--green  { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-700); }
.btn--navy   { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-800); }
.btn--ghost  { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--navy); }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar {
  background: var(--navy);
  color: #C7C8DE;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .02em;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  align-items: center; justify-content: space-between;
  padding-block: .6rem;
}
.topbar-info { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.topbar-info li { display: flex; align-items: center; gap: .5rem; }
.topbar-info i { color: var(--green); font-size: .85em; }
.topbar-right { display: flex; align-items: center; gap: 1.1rem; }
.topbar-right a { color: #C7C8DE; }
.topbar-right a:hover { color: #fff; text-decoration: none; }

/* Language flags */
.lang { display: flex; align-items: center; gap: .4rem; }
.lang button {
  background: none; border: 1.5px solid transparent; padding: 2px;
  border-radius: 3px; cursor: pointer; line-height: 0;
  opacity: .5; transition: opacity .18s ease, border-color .18s ease;
}
.lang button:hover { opacity: .9; }
.lang button.is-active { opacity: 1; border-color: var(--green); }
.lang svg { width: 26px; height: 18px; display: block; border-radius: 2px; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
/* Logo height lives in one place — see --logo-h / --logo-h-foot in :root.
   Raise it if your logo file has built-in padding; lower it if tightly cropped. */
.nav-logo img { height: var(--logo-h); width: auto; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  font-family: var(--display); font-weight: 500; font-size: .95rem;
  color: var(--navy); position: relative; padding-block: .35rem;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--green); transition: right .25s ease;
}
.nav-links a:hover { text-decoration: none; }
.nav-links a:hover::after, .nav-links a.is-current::after { right: 0; }
.nav-cta { display: flex; align-items: center; gap: .75rem; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem .7rem; cursor: pointer;
  color: var(--navy); font-size: 1.1rem;
}

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gutter) 1rem;
    display: none; box-shadow: var(--shadow);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav-links a::after { display: none; }
  .nav-cta .btn { padding: .6rem 1rem; font-size: .85rem; }
}
@media (max-width: 620px) {
  .nav-logo img { height: var(--logo-h-sm); }
  .topbar-info li:nth-child(2) { display: none; }
  .nav-cta .btn span { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; background: var(--navy-900); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Solid navy behind the copy on the left, clearing to reveal the photograph
   on the right. Two layers: a horizontal wash for legibility, plus a soft
   vertical lift so the pillars strip keeps its contrast. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* Horizontal wash only. The old build also had a full-width vertical layer
     (.35 top / .55 bottom) which dimmed the right-hand side as well — the
     pillars strip carries its own scrim, so that layer is not needed. */
  background:
    linear-gradient(90deg,
      rgba(13,10,56,.96)  0%,
      rgba(13,10,56,.93) 30%,
      rgba(13,10,56,.82) 46%,
      rgba(13,10,56,.52) 62%,
      rgba(13,10,56,.22) 76%,
      rgba(13,10,56,.04) 90%,
      rgba(13,10,56,0)  100%);
}
@media (max-width: 900px) {
  /* Not enough width to fade sideways — darken the whole frame instead */
  .hero-media::after {
    background: linear-gradient(180deg, rgba(13,10,56,.92) 0%, rgba(13,10,56,.86) 55%, rgba(13,10,56,.93) 100%);
  }
}
.hero-body { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); max-width: 780px; }
.hero-body h1 { color: #fff; text-wrap: balance; }
.hero-body p { color: #C3C4DE; font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* Syngenta endorsement chip in the hero */
.hero-chip {
  display: inline-flex; align-items: center; gap: .8rem;
  background: rgba(255,255,255,.94);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.hero-chip img { height: 22px; width: auto; }
.hero-chip span {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--syn-navy);
  border-left: 1px solid #D5D6E2; padding-left: .8rem;
}

/* Pillars strip riding the bottom of the hero */
.pillars {
  position: relative;
  background: rgba(13,10,56,.62);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.pillar { padding: 1.5rem 1.4rem 1.7rem; border-right: 1px solid rgba(255,255,255,.16); }
.pillar:last-child { border-right: 0; }
.pillar i { color: var(--green); font-size: 1.15rem; display: block; margin-bottom: .6rem; }
.pillar h3 { color: #fff; font-size: 1rem; margin-bottom: .25rem; }
.pillar p { color: #A3A4C4; font-size: .87rem; margin: 0; line-height: 1.5; }
@media (max-width: 860px) { .pillars { grid-template-columns: repeat(2, 1fr); } .pillar:nth-child(2n) { border-right: 0; } }
@media (max-width: 480px) { .pillars { grid-template-columns: 1fr; } .pillar { border-right: 0; border-top: 1px solid rgba(255,255,255,.16); } }

/* ==========================================================================
   SPLIT (two-column text + media)
   ========================================================================== */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--flip .split-media { order: -1; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split-media { order: 0; }
}

/* Syngenta block */
.syn-mark { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.syn-mark img { height: 34px; width: auto; }
.syn-stats { display: flex; gap: 2.5rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.syn-stat strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 2.1rem; color: var(--navy); line-height: 1;
}
.syn-stat span {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-30);
}

/* ==========================================================================
   SIGNATURE — product cards built like agrochemical spec sheets
   ========================================================================== */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .prod-grid { grid-template-columns: 1fr; } }

.prod {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.prod:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }

/* Category band — the colour encodes product class, as on a real label */
.prod-band {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; padding: .5rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center;
}
.prod-band--insect { background: #B4451F; }   /* insecticida */
.prod-band--fungi  { background: #1F6F8B; }   /* fungicida  */
.prod-band--herb   { background: #6B7F1F; }   /* herbicida  */
.prod-band em { font-style: normal; opacity: .75; }

.prod-head { padding: 1.5rem 1.25rem .9rem; }
.prod-head h3 { font-size: 1.32rem; margin-bottom: .2rem; }
.prod-head .prod-sub {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  color: var(--ink-30); text-transform: uppercase; margin: 0;
}
.prod-desc { padding: 0 1.25rem; color: var(--ink-60); font-size: .95rem; flex: 1; }

/* Mono spec table — the "data sheet" heart of the card */
.prod-specs { margin: 1.1rem 0 0; padding: 0 1.25rem 1.4rem; border-top: 1px solid var(--line-soft); }
.prod-specs dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 1rem 0 0; }
.prod-specs dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-30); padding-top: .15rem;
}
.prod-specs dd { margin: 0; font-family: var(--display); font-size: .9rem; font-weight: 500; color: var(--navy); }

/* Full catalogue list */
.cat-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
@media (max-width: 640px) { .cat-list { columns: 1; } }
.cat-list li {
  break-inside: avoid;
  display: flex; align-items: baseline; gap: .9rem;
  padding: .78rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 500; color: var(--navy); font-size: .97rem;
}
.cat-list .cat-tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; padding: .18rem .45rem;
  border-radius: 3px; flex: none;
}
.cat-tag--insect { background: #B4451F; }
.cat-tag--fungi  { background: #1F6F8B; }

/* ==========================================================================
   VALUE / WHY US
   ========================================================================== */
.val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px) { .val-grid { grid-template-columns: 1fr; } }
.val {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.9rem 1.6rem;
}
.val i {
  color: var(--green); font-size: 1.35rem;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--green-100); margin-bottom: 1.1rem;
}
.val h3 { font-size: 1.1rem; }
.val p { margin: 0; color: var(--ink-60); font-size: .95rem; }

/* ==========================================================================
   CONTACT BAND + FOOTER
   ========================================================================== */
.cta-band { background: var(--green); color: #fff; }
.cta-band .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.cta-band h2 { color: #fff; margin: 0 0 .3rem; }
.cta-band p { margin: 0; color: rgba(255,255,255,.88); }
.cta-band .btn { background: #fff; color: var(--green-700); }
.cta-band .btn:hover { background: var(--navy); color: #fff; }

.site-footer { background: var(--navy-900); color: #9A9BC4; padding-block: clamp(3rem, 6vw, 4.5rem) 0; font-size: .93rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  margin: 0 0 1.1rem;
}
.site-footer a { color: #9A9BC4; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.foot-logo { height: var(--logo-h-foot); width: auto; margin-bottom: 1.1rem; filter: brightness(0) invert(1); opacity: .92; }
.foot-map { border: 0; width: 100%; height: 175px; border-radius: var(--radius); filter: grayscale(1) contrast(.9) opacity(.8); }
.foot-hours { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.foot-hours span:last-child { color: #fff; font-family: var(--mono); font-size: .8rem; }
.foot-hours--closed span:last-child { color: #6C6D96; }
.foot-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.foot-social a {
  width: 36px; height: 36px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; color: #fff;
}
.foot-social a:hover { background: var(--green); border-color: var(--green); }
.foot-base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: #6C6D96;
}

/* ==========================================================================
   INTERIOR PAGES — page header + panels + forms
   ========================================================================== */
.page-head { background: var(--navy); color: #fff; padding-block: clamp(1.4rem, 2.6vw, 2.1rem); position: relative; overflow: hidden; }
.page-head::after {
  content: ""; position: absolute; right: -70px; top: -110px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,166,16,.22), transparent 68%);
}
.page-head h1 { color: #fff; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; position: relative; }
.page-head p { color: #B9BAD4; margin: .4rem 0 0; max-width: 68ch; font-size: .95rem; line-height: 1.5; position: relative; }
.crumbs {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: #8788B4; margin: 0 0 .5rem; position: relative;
}
.crumbs a { color: #8788B4; }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 .5rem; opacity: .5; }

/* Panel — the white card interior forms live in */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.panel--narrow { width: min(470px, 100%); margin-inline: auto; }
.panel--mid { width: min(620px, 100%); margin-inline: auto; }
.panel-head { text-align: center; margin-bottom: 1.8rem; }
.panel-head .panel-icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; font-size: 1.25rem;
  margin: 0 auto 1.1rem;
}
.panel-head h2 { font-size: 1.55rem; margin-bottom: .35rem; }
.panel-head p { color: var(--ink-60); font-size: .95rem; margin: 0; }

/* Form primitives — ASP.NET controls get these via CssClass */
.field { margin-bottom: 1.15rem; }
.field label, .field-label {
  display: block;
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: .45rem;
}
.field-hint { font-size: .85rem; color: var(--ink-30); margin: .4rem 0 0; line-height: 1.45; }

.form-input, .form-textarea,
input[type="text"].form-input, input[type="password"].form-input, input[type="email"].form-input {
  width: 100%;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--bone);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: .78rem .95rem;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.form-input:focus, .form-textarea:focus {
  outline: none; background: var(--white);
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,166,16,.14);
}
.form-textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-30); }

.form-submit, input[type="submit"].form-submit {
  width: 100%;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  background: var(--green); color: #fff;
  border: 0; border-radius: var(--radius);
  padding: .88rem 1.5rem; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.form-submit:hover { background: var(--green-700); transform: translateY(-1px); }
.form-submit:disabled { background: var(--ink-30); cursor: not-allowed; transform: none; }

.form-secondary, input[type="submit"].form-secondary {
  width: 100%;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1.5rem; cursor: pointer; margin-top: .7rem;
  transition: border-color .18s ease;
}
.form-secondary:hover { border-color: var(--navy); }

/* Messages */
.form-error {
  display: block; color: #B4241F; font-size: .9rem; font-weight: 600;
  background: #FCEDEC; border: 1px solid #F3CFCC; border-left: 3px solid #B4241F;
  border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: 1rem;
}
.form-error:empty { display: none; }
.form-note {
  display: block; color: var(--green-700); font-size: .9rem; font-weight: 600;
  background: var(--green-100); border: 1px solid #BFE3BC; border-left: 3px solid var(--green);
  border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: 1rem;
}
.form-note:empty { display: none; }
.form-success-state { text-align: center; padding: 1rem 0; }
.form-success-state i { font-size: 2.6rem; color: var(--green); margin-bottom: .9rem; display: block; }

/* Radio row (Cliente / Proveedor) */
.radio-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.radio-row input[type="radio"] { accent-color: var(--green); width: 17px; height: 17px; margin-right: .45rem; vertical-align: -3px; }
.radio-row label { font-family: var(--display); font-size: .95rem; color: var(--navy); cursor: pointer; }

/* Checkbox (Versión Móvil) */
.check-row { margin-bottom: 1rem; }
.check-row input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; margin-right: .5rem; vertical-align: -2px; }
.check-row label { font-family: var(--display); font-size: .92rem; color: var(--navy); cursor: pointer; }

/* Validator text from ASP.NET */
.field span[style*="visible"], .val-msg { font-family: var(--display); font-size: .82rem; color: #B4241F; display: block; margin-top: .35rem; }

/* Links under a form */
.panel-links { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); text-align: center; }
.panel-links a { font-family: var(--display); font-weight: 500; font-size: .93rem; color: var(--navy); }
.panel-links a:hover { color: var(--green-700); }
.panel-links .sep { display: block; height: .55rem; }
.panel-links small { display: block; color: var(--ink-30); font-size: .8rem; margin-top: .2rem; }

/* Aside used on the contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.info-list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.info-list li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.info-list i {
  color: var(--green-700); background: var(--green-100);
  width: 40px; height: 40px; border-radius: var(--radius);
  display: grid; place-items: center; flex: none; font-size: .95rem;
}
.info-list strong { display: block; font-family: var(--display); color: var(--navy); font-size: .95rem; margin-bottom: .1rem; }
.info-list span { color: var(--ink-60); font-size: .93rem; }
.contact-photo { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-height: 340px; object-fit: cover; }

/* Utility */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ==========================================================================
   MESSAGE CARD — loginval.aspx unread-message acknowledgement state
   ========================================================================== */
.msg-meta {
  display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-30);
  padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.msg-meta .msg-from { color: var(--navy); letter-spacing: .06em; }
.msg-title {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  color: var(--navy); line-height: 1.25; margin: 0 0 1rem;
}
.msg-title:empty { display: none; }
.msg-body {
  display: block;
  background: var(--bone);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  min-height: 150px; max-height: 320px; overflow-y: auto;
  font-size: .97rem; line-height: 1.6; color: var(--ink);
  text-align: left;
}
.msg-ack {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.msg-ack input[type="checkbox"] { accent-color: var(--green); width: 17px; height: 17px; margin-right: .55rem; vertical-align: -3px; }
.msg-ack label { font-family: var(--display); font-size: .95rem; color: var(--navy); cursor: pointer; }

/* Slim header for authentication steps — no nav, no distractions */
.auth-bar {
  background: var(--white); border-bottom: 1px solid var(--line);
  padding-block: 1rem;
}
.auth-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-bar img { height: var(--logo-h); width: auto; }
@media (max-width: 620px) { .auth-bar img { height: var(--logo-h-sm); } }

/* ==========================================================================
   PORTAL — authenticated area (MasterPageClientes.master + content pages)
   ========================================================================== */
body.portal { background: var(--bone); }

.portal-bar { background: var(--white); border-bottom: 1px solid var(--line); padding-block: .9rem; position: sticky; top: 0; z-index: 60; }
.portal-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-brand img { height: var(--logo-h); width: auto; display: block; }
.portal-actions { display: flex; align-items: center; gap: 1rem; }
.portal-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-30); padding-right: 1rem; border-right: 1px solid var(--line);
}
.portal-tag i { color: var(--green); font-size: .95rem; }
a.portal-exit, .portal-exit {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  color: var(--navy); background: transparent;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .55rem 1.1rem; text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.portal-exit:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.portal-main { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.portal-footer { padding-block: 1rem 0; }
@media (max-width: 620px) {
  .portal-brand img { height: var(--logo-h-sm); }
  .portal-tag { display: none; }
}

/* ---------- Cards ---------- */
.pageWrap { width: 100%; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 980px) { .grid2 { grid-template-columns: 360px 1fr; align-items: start; } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cardHead {
  background: var(--navy); color: #fff;
  padding: .8rem 1.15rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sectionTitle {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.cardBody { padding: 1.25rem 1.15rem; }

/* Supplier identity block */
.kv { display: flex; flex-direction: column; gap: .35rem; }
.kv .code a, .kv .code { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--green-700); }
.kv .sup-name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--navy); }
.kv .sup-meta { font-size: .9rem; color: var(--ink-60); }

/* ---------- Report link list ---------- */
.linkList { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 1.75rem; }
.linkItem { border-bottom: 1px solid var(--line-soft); }
.linkItem a {
  display: flex; align-items: center; gap: .7rem;
  padding: .78rem .2rem;
  font-family: var(--display); font-weight: 500; font-size: .94rem;
  color: var(--navy); text-decoration: none !important;
  transition: color .16s ease, padding-left .16s ease;
}
.linkItem a::before {
  content: "\f0f6"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .8rem; color: var(--ink-30); flex: none; transition: color .16s ease;
}
.linkItem a:hover { color: var(--green-700); padding-left: .4rem; }
.linkItem a:hover::before { color: var(--green); }

/* ---------- GridView ---------- */
.gvModern { width: 100%; border-collapse: collapse; font-size: .9rem; }
.gvModern th {
  background: var(--bone); color: var(--navy);
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  text-align: left; padding: .7rem .6rem; border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.gvModern th a { color: var(--navy); text-decoration: none; }
.gvModern td { padding: .7rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.gvModern tr:hover td { background: var(--green-100); }
.gvModern td a {
  font-family: var(--display); font-weight: 500; font-size: .85rem;
  color: var(--green-700); text-decoration: none; margin-right: .5rem;
}
.gvModern td a:hover { text-decoration: underline; }
.gv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Buttons used inside the portal ---------- */
.btnPrimary, input[type="submit"].btnPrimary {
  font-family: var(--display); font-weight: 600; font-size: .93rem;
  background: var(--green); color: #fff; border: 1.5px solid var(--green);
  border-radius: var(--radius); padding: .6rem 1.3rem; cursor: pointer;
  transition: background .18s ease;
}
.btnPrimary:hover { background: var(--green-700); border-color: var(--green-700); }
.btnGhost, input[type="submit"].btnGhost {
  font-family: var(--display); font-weight: 600; font-size: .88rem;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.45); border-radius: var(--radius);
  padding: .45rem 1rem; cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.btnGhost:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.cardBody .btnGhost { color: var(--navy); border-color: var(--line); }
.cardBody .btnGhost:hover { background: transparent; border-color: var(--navy); }

/* ---------- Modal popups (AjaxControlToolkit ModalPopupExtender) ---------- */
.modalBackground { background-color: #0D0A38; opacity: .55; filter: alpha(opacity=55); }
.modalPopup {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(13,10,56,.35);
  padding: 1.6rem;
  max-width: min(640px, 94vw);
  max-height: 88vh; overflow-y: auto;
}
.modalPopup h3, .modal-title {
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  color: var(--navy); margin: 0 0 1.1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft);
}
.modalPopup table { width: 100%; border-collapse: collapse; }
.modalPopup table td { padding: .32rem .4rem; vertical-align: middle; }
.modalPopup table td:first-child {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-60); white-space: nowrap; width: 1%;
}
.modalPopup input[type="text"], .modalPopup input[type="password"], .modalPopup textarea, .modalPopup select {
  width: 100%; font-family: var(--body); font-size: .95rem; color: var(--ink);
  background: var(--bone); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .5rem .7rem;
}
.modalPopup input:focus, .modalPopup textarea:focus {
  outline: none; background: var(--white); border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,166,16,.14);
}
.modalPopup textarea { min-height: 80px; resize: vertical; }
.modal-actions {
  display: flex; gap: .7rem; justify-content: flex-end;
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
}

/* Portal page heading (content pages inside the master) */
.portal-head { margin-bottom: 1.5rem; }
.portal-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; }
.portal-head .eyebrow { margin-bottom: .6rem; }

/* Secondary portal link (Menú) — sits beside the Salir button */
a.portal-link, .portal-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 500; font-size: .92rem;
  color: var(--navy); text-decoration: none !important;
  padding: .55rem .4rem;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.portal-link i { color: var(--green); font-size: .9rem; }
.portal-link:hover { color: var(--green-700); border-bottom-color: var(--green); }
@media (max-width: 480px) { .portal-link span, .portal-exit span { display: none; } }

/* ==========================================================================
   CRYSTAL REPORTS VIEWER — opt out of the global reset
   --------------------------------------------------------------------------
   The viewer emits pixel-positioned tables, spacer images and fixed-width
   divs. Three of this stylesheet's global rules break that layout:

     *  { box-sizing: border-box }  -> padding eats the declared width,
                                       so the rightmost columns get clipped
     img{ max-width: 100%;          -> rescales spacer/graphic images
          display: block }             and forces them onto their own line
     .card { overflow: hidden }     -> crops anything wider than the card

   These rules restore browser defaults inside the viewer only. Everything
   else on the page keeps the site styling.
   ========================================================================== */
[id*="CrystalReportViewer"], [id*="CrystalReportViewer"] *,
[id*="crystalreportviewer"], [id*="crystalreportviewer"] *,
[id*="CrystalReportPartsViewer"], [id*="CrystalReportPartsViewer"] *,
.crystal-host, .crystal-host * {
  box-sizing: content-box;
}
[id*="CrystalReportViewer"] img,
[id*="crystalreportviewer"] img,
.crystal-host img {
  max-width: none; height: auto; display: inline; vertical-align: baseline;
}
[id*="CrystalReportViewer"] table,
[id*="crystalreportviewer"] table,
.crystal-host table {
  width: auto; table-layout: auto; border-collapse: separate; border-spacing: 0;
}
[id*="CrystalReportViewer"] td, [id*="crystalreportviewer"] td, .crystal-host td { padding: 0; border: 0; }

/* The viewer is usually wider than the 1180px content column. Let any
   container holding one expand, and scroll horizontally instead of clipping. */
.crystal-host { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.portal-main .wrap:has([id*="CrystalReportViewer"]),
.portal-main .wrap:has(.crystal-host) {
  width: calc(100% - (var(--gutter) * 2));
  max-width: none;
}
.card:has([id*="CrystalReportViewer"]), .card:has(.crystal-host) { overflow: visible; }

/* Explicit full-width escape hatch for report pages that need it:
   add class="wrap wrap--full" or wrap the viewer in .crystal-host */
.wrap--full { width: calc(100% - (var(--gutter) * 2)) !important; max-width: none !important; }

/* ==========================================================================
   REPORT PAGES — parameter bar + viewer shell
   ========================================================================== */
.report-filters { margin-bottom: 1.25rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; gap: .35rem; }
.filter-field--grow { flex: 1 1 260px; min-width: 220px; }
.filter-field--check, .filter-field--action { padding-bottom: .1rem; }
.filter-field .field-label { margin-bottom: 0; }
.form-input--date { width: 140px; }

.form-select {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--bone);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .72rem .9rem; width: 100%; min-width: 220px;
}
.form-select:focus {
  outline: none; background: var(--white); border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,166,16,.14);
}

.filter-field--check .check-row { margin-bottom: 0; white-space: nowrap; }
a.btnPrimary { text-decoration: none !important; display: inline-flex; align-items: center; }

/* Viewer shell — white paper on a neutral field, full available width */
.report-shell {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .75rem;
  overflow: visible;
}
@media (max-width: 620px) {
  .form-input--date { width: 100%; }
  .filter-field, .filter-field--grow { flex: 1 1 100%; }
}

/* ==========================================================================
   REPORT PAGES — body.report
   --------------------------------------------------------------------------
   The master adds class="report" automatically for any page whose filename
   starts with "Report". On those pages the global box-sizing and img resets
   above are switched off entirely, and browser-default text metrics are
   restored, so Crystal Reports renders exactly as it does under the old
   master. The header and footer keep the site styling because each of those
   components declares its own font explicitly.
   ========================================================================== */
body.report {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  line-height: normal;
}
/* Chrome keeps the site's type on report pages */
body.report .portal-bar, body.report .site-footer, body.report .portal-head { font-family: var(--body); }
body.report .portal-head h1 { font-family: var(--display); }

/* Reports are wider than the 1180px content column — give them the viewport */
body.report .portal-main > .wrap { width: calc(100% - (var(--gutter) * 2)); max-width: none; }
body.report .portal-main { overflow-x: auto; }

/* Interior pages: the section directly under the banner doesn't need the full
   band of top padding — it pushed the form too far down the fold.
   Adjacent-sibling selector, so no page markup changes. */
.page-head + .section { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ==========================================================================
   LOGO SIZING — keyed to the image, not to its wrapper
   --------------------------------------------------------------------------
   Earlier this depended on .nav-logo / .auth-bar being present on the parent.
   Removing one class made the logo render at its full natural width. This
   attribute selector sizes it wherever it appears, in any page, so the
   markup around it can change freely.  Tune --logo-h in :root.
   ========================================================================== */
img[src*="logo_biotec.png"] { height: var(--logo-h); width: auto; max-width: none; display: block; }
img.foot-logo[src*="logo_biotec.png"] { height: var(--logo-h-foot); }
@media (max-width: 620px) {
  img[src*="logo_biotec.png"] { height: var(--logo-h-sm); }
  img.foot-logo[src*="logo_biotec.png"] { height: var(--logo-h-foot); }
}

/* Two fields side by side inside a panel (phone 1 / phone 2) */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }