/*
 * Coyotepec — Ventanilla Digital 2026
 * Capa visual integral. Conserva los flujos existentes y renueva por completo
 * la experiencia con una interfaz cívica, sobria, accesible y responsiva.
 */

:root {
  --wine-950: #3b0918;
  --wine-900: #520c20;
  --wine-800: #6d1029;
  --wine-700: #861b38;
  --wine-100: #f4e6ea;
  --gold-700: #9d7136;
  --gold-500: #c99b55;
  --gold-200: #ead4ad;
  --teal-800: #15524d;
  --teal-600: #1f756d;
  --ink-950: #1d1719;
  --ink-800: #3b3134;
  --ink-600: #6c6063;
  --paper: #fffdf9;
  --canvas: #f5f1eb;
  --line: #ded5cc;
  --white: #ffffff;
  --success: #197044;
  --warning: #9a5d0b;
  --danger: #a12738;
  --shadow-sm: 0 8px 22px rgba(56, 33, 39, .08);
  --shadow-md: 0 20px 55px rgba(56, 21, 32, .13);
  --shadow-lg: 0 34px 90px rgba(48, 10, 24, .22);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --font-sans: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-950);
  background:
    radial-gradient(circle at 92% 2%, rgba(201, 155, 85, .11), transparent 24rem),
    var(--canvas);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .28;
  background-image: radial-gradient(rgba(109, 16, 41, .12) .6px, transparent .6px);
  background-size: 18px 18px;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

::selection { color: var(--white); background: var(--wine-700); }

:focus-visible {
  outline: 3px solid #0a78c2;
  outline-offset: 3px;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  color: var(--white);
  background: var(--ink-950);
  border-radius: var(--radius-sm);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: relative;
  z-index: 20;
  background: rgba(255, 253, 249, .98);
  border-bottom: 1px solid rgba(109, 16, 41, .13);
  box-shadow: 0 4px 18px rgba(59, 9, 24, .06);
}

.top-strip {
  color: rgba(255, 255, 255, .88);
  background: var(--wine-950);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.top-strip-inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-strip-inner::after {
  content: "Portal oficial · Conexión segura";
  color: var(--gold-200);
}

.brand-bar {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.brand-link {
  flex: 0 1 410px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  width: 100%;
  max-width: 410px;
  display: block;
}

.digital-access-menu {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
}

.digital-access-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  color: var(--wine-800);
  background: var(--wine-100);
  border: 1px solid #e8cbd3;
  border-radius: var(--radius-pill);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.digital-access-menu summary::-webkit-details-marker { display: none; }

.digital-access-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.digital-access-menu summary:hover,
.digital-access-menu summary:focus-visible,
.digital-access-menu[open] summary {
  color: var(--paper);
  background: var(--wine-800);
  border-color: var(--wine-800);
  box-shadow: 0 9px 24px rgba(89, 13, 34, .18);
  outline: none;
}

.digital-access-menu[open] summary::after { transform: translateY(2px) rotate(225deg); }

.digital-access-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 28px));
  overflow: hidden;
  padding: 8px;
  background: rgba(255, 253, 249, .99);
  border: 1px solid rgba(109, 16, 41, .16);
  border-radius: 18px;
  box-shadow: 0 24px 58px rgba(52, 8, 21, .2);
}

.digital-access-popover a {
  display: grid;
  gap: 4px;
  padding: 14px 15px;
  color: var(--ink-950);
  border-radius: 12px;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.digital-access-popover a + a { margin-top: 4px; }
.digital-access-popover strong { color: inherit; font-size: .94rem; }
.digital-access-popover small { color: var(--ink-600); font-size: .76rem; }

.digital-access-popover a:hover,
.digital-access-popover a:focus-visible,
.digital-access-popover a[aria-current="page"] {
  color: var(--wine-800);
  background: var(--wine-100);
  outline: none;
  transform: translateX(2px);
}

.main-nav {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.nav-inner {
  min-height: 50px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.nav-inner a {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 14px;
  color: var(--ink-800);
  border-radius: 8px 8px 0 0;
  font-size: .82rem;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}

.nav-inner a:hover,
.nav-inner a[aria-current="page"] {
  color: var(--wine-800);
  background: var(--wine-100);
}

.nav-inner a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  background: var(--wine-700);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform .2s ease;
}

.nav-inner a:hover::after,
.nav-inner a[aria-current="page"]::after { transform: scaleX(1); }

/* Typography */
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink-950); line-height: 1.1; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.038em; }
h3, h4 { font-family: var(--font-heading); font-weight: 730; letter-spacing: -.015em; }
h1 { font-size: clamp(2.5rem, 6.2vw, 5.65rem); }
h2 { font-size: clamp(2rem, 4vw, 3.45rem); }
h3 { font-size: 1.15rem; }

.eyebrow {
  margin-bottom: 12px;
  color: var(--wine-700);
  font-family: var(--font-heading);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lead { color: var(--ink-600); font-size: clamp(1.04rem, 1.5vw, 1.22rem); line-height: 1.65; }
.lead.narrow, .narrow { max-width: 760px; }
.muted, .form-note, .hint, .security-note { color: var(--ink-600); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Home hero */
.search-hero {
  position: relative;
  isolation: isolate;
  padding: 46px 0 30px;
  color: var(--white);
  background: var(--wine-950);
  overflow: hidden;
}

.search-hero::before,
.search-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.search-hero::before {
  width: 620px;
  height: 620px;
  top: -390px;
  right: -80px;
  border: 110px solid rgba(201, 155, 85, .13);
}

.search-hero::after {
  width: 330px;
  height: 330px;
  bottom: -210px;
  left: 8%;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 0 0 46px rgba(255,255,255,.025), 0 0 0 92px rgba(255,255,255,.018);
}

.search-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(34px, 7vw, 94px);
  min-height: 520px;
}

.search-copy { position: relative; max-width: 680px; padding-block: 26px; }
.search-copy .eyebrow { color: var(--gold-200); }
.search-copy h1 { margin-bottom: 22px; color: var(--white); }
.search-copy h1 em { color: var(--gold-200); font-weight: 500; }
.search-copy .lead { max-width: 610px; color: rgba(255,255,255,.77); }

.impact-metrics {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 30px 0;
  max-width: 610px;
  border-block: 1px solid rgba(255, 255, 255, .16);
}

.impact-metrics > span {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 12px 16px;
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.impact-metrics > span:first-child { padding-left: 0; }
.impact-metrics > span:last-child { border-right: 0; }
.impact-metrics strong { color: var(--gold-200); font-family: var(--font-display); font-size: 1.65rem; }
.impact-metrics small { color: rgba(255,255,255,.74); font-weight: 700; }

.big-search-card {
  position: relative;
  padding: clamp(28px, 4vw, 46px);
  color: var(--ink-950);
  background: rgba(255, 253, 249, .98);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.big-search-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 124px;
  height: 9px;
  background: linear-gradient(90deg, var(--gold-500), var(--wine-700));
  border-radius: 0 0 0 12px;
}

.search-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--wine-700);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.search-card-kicker span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--wine-700);
  border-radius: 50%;
  font-size: 1rem;
}

.big-search-card h2 { margin-bottom: 14px; font-size: clamp(2rem, 3vw, 3rem); }
.big-search-card label { display: block; margin-bottom: 20px; color: var(--ink-600); }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-card-note { margin: 18px 0 0; color: var(--ink-600); font-size: .8rem; }

.quick-paths {
  position: relative;
  z-index: 4;
  margin-top: -1px;
  color: var(--white);
  background: var(--wine-900);
  border-top: 1px solid rgba(255,255,255,.12);
}

.quick-paths-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.quick-paths a {
  display: grid;
  grid-template-columns: 45px 1fr;
  grid-template-rows: auto auto;
  column-gap: 13px;
  padding: 22px 20px;
  border-right: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.quick-paths a:first-child { border-left: 1px solid rgba(255,255,255,.12); }
.quick-paths a:hover { background: rgba(255,255,255,.08); transform: translateY(-3px); }
.quick-paths a > span {
  grid-row: 1 / 3;
  align-self: center;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--wine-950);
  background: var(--gold-200);
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.quick-paths strong { font-size: .9rem; }
.quick-paths small { color: rgba(255,255,255,.6); font-size: .73rem; }

/* Buttons and fields */
.solid-btn,
.outline-btn,
.ghost-btn,
.mini-btn,
.service-start {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.solid-btn { color: var(--white); background: var(--wine-700); box-shadow: 0 8px 18px rgba(109,16,41,.18); }
.solid-btn:hover { background: var(--wine-800); box-shadow: 0 12px 24px rgba(109,16,41,.25); transform: translateY(-2px); }
.outline-btn { color: var(--wine-800); background: transparent; border-color: rgba(109,16,41,.35); }
.outline-btn:hover { color: var(--white); background: var(--wine-800); border-color: var(--wine-800); transform: translateY(-2px); }
.ghost-btn, .mini-btn { color: var(--ink-800); background: var(--paper); border-color: var(--line); }
.ghost-btn:hover, .mini-btn:hover { color: var(--wine-800); border-color: var(--wine-700); }
button:disabled, .solid-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.search-copy .outline-btn { color: var(--white); border-color: rgba(255,255,255,.5); }
.search-copy .outline-btn:hover { color: var(--wine-950); background: var(--gold-200); border-color: var(--gold-200); }
.search-copy .solid-btn { color: var(--wine-950); background: var(--gold-200); box-shadow: none; }
.search-copy .solid-btn:hover { background: var(--white); }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--ink-950);
  background: var(--white);
  border: 1px solid #cfc4bb;
  border-radius: var(--radius-sm);
  outline: 0;
  transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #95888b; }
input:focus, select:focus, textarea:focus {
  border-color: var(--wine-700);
  box-shadow: 0 0 0 4px rgba(109, 16, 41, .1);
}

input[type="checkbox"], input[type="radio"] { width: 1.1rem; min-height: 1.1rem; accent-color: var(--wine-700); }
.uppercase-input { text-transform: uppercase; }
label { color: var(--ink-800); font-size: .88rem; font-weight: 720; }
label + input, label + select, label + textarea { margin-top: 7px; }

/* General sections */
.section { padding: clamp(64px, 8vw, 108px) 0; }
.section + .section { border-top: 1px solid rgba(109,16,41,.07); }
.section-heading { margin-bottom: 36px; text-align: center; }
.section-heading.align-left { text-align: left; }
.section-heading h2 { max-width: 720px; margin-bottom: 0; }
.center-actions { display: flex; justify-content: center; margin-top: 34px; }
.hero-actions, .inline-actions, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-actions > *, .form-actions > * { min-width: 150px; }
.compact-actions { gap: 8px; }

.refined-directory-section { background: var(--paper); }
.directory-stack { display: grid; gap: 22px; }
.directory-card,
.puam-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: center;
  gap: clamp(26px, 6vw, 80px);
  padding: clamp(34px, 6vw, 74px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.directory-card::before {
  content: "DIRECTORIO";
  position: absolute;
  right: 24px;
  bottom: -12px;
  color: rgba(109,16,41,.045);
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.06em;
}

.feature-directory-copy { position: relative; z-index: 1; }
.feature-directory-copy > p:not(.eyebrow) { max-width: 620px; color: var(--ink-600); font-size: 1.05rem; }
.feature-directory-graphic { position: relative; z-index: 1; display: grid; place-items: center; }
.feature-directory-graphic img { max-height: 300px; filter: saturate(.76) contrast(1.02); }

.link-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.link-list a {
  padding: 10px 16px;
  color: var(--wine-800);
  background: var(--wine-100);
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 780;
  text-decoration: none;
}
.link-list a:hover { color: var(--white); background: var(--wine-800); }

.puam-style-section { background: var(--wine-950); }
.puam-card { color: var(--white); background: transparent; border-color: rgba(255,255,255,.15); box-shadow: none; }
.puam-card h2 { color: var(--white); }
.puam-card p:not(.eyebrow) { max-width: 650px; color: rgba(255,255,255,.72); }
.puam-card .eyebrow { color: var(--gold-200); }
.puam-card img { max-height: 320px; filter: grayscale(.15) brightness(1.15); }
.puam-card .solid-btn { color: var(--wine-950); background: var(--gold-200); box-shadow: none; }
.puam-card .outline-btn { color: var(--white); border-color: rgba(255,255,255,.42); }

.areas-section { background: var(--canvas); }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.area-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 17px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(50,30,35,.045);
  overflow: hidden;
  transition: transform .2s ease, border .2s ease, box-shadow .2s ease;
}
.area-card, .directory-card, .card-form, .tracking-box, .dashboard-shell { width: 100%; }
.area-card { height: 100%; }
.area-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--wine-700), var(--gold-500)); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.area-card:hover { border-color: #c9b6bb; box-shadow: var(--shadow-md); transform: translateY(-5px); }
.area-card:hover::after { transform: scaleX(1); }
.area-card .icon-wrap { width: 72px; height: 72px; display: grid; place-items: center; background: #f2ece4; border-radius: 17px; overflow: hidden; }
.area-card .icon-wrap img { width: 100%; height: 100%; object-fit: cover; }
.area-card .content { min-width: 0; }
.area-card h3 { margin: 6px 0 10px; overflow-wrap: anywhere; }
.area-mini-count { color: var(--wine-700); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.module-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.module-dots span, .type-badge { padding: 4px 8px; color: var(--teal-800); background: #e6f1ef; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 760; }
.area-card .actions { display: flex; }
.area-card .solid-btn { min-height: 36px; padding: 7px 13px; font-size: .76rem; }

/* Interior pages */
.page-title {
  position: relative;
  padding: clamp(50px, 6vw, 78px) 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.98), rgba(248,239,233,.94)),
    var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-title::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -110px;
  top: -210px;
  border: 56px solid rgba(109,16,41,.065);
  border-radius: 50%;
}
.page-title > .container { position: relative; z-index: 1; }
.page-title h1 { max-width: 940px; margin-bottom: 18px; font-size: clamp(2.65rem, 4.5vw, 4.3rem); }
.page-title .lead { margin-bottom: 0; }
.page-title + .section { padding-top: clamp(48px, 5vw, 68px); }
.title-visual-grid { display: grid; grid-template-columns: 1fr minmax(250px, .45fr); align-items: center; gap: 40px; }
.title-illustration, .payroll-symbol { position: relative; z-index: 1; display: grid; place-items: center; }
.title-illustration img { max-height: 230px; }
.payroll-symbol { min-height: 155px; color: rgba(109,16,41,.13); border: 1px solid rgba(109,16,41,.16); border-radius: var(--radius-lg); font-family: var(--font-display); font-size: clamp(2rem,5vw,4.4rem); font-weight: 700; letter-spacing: -.06em; transform: rotate(-2deg); }

.card-form,
.tracking-box,
.dashboard-shell,
.prose,
.area-summary-card,
.service-card,
.request-item,
.result-card,
.mail-item,
.employee-admin-card,
.payroll-upload-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.card-form { padding: clamp(24px, 4vw, 38px); }
.card-form h2 { margin-bottom: 24px; font-size: clamp(1.8rem,3vw,2.6rem); }
.card-form > label, .card-form form > label { display: block; margin-top: 17px; }
.card-form > button, .card-form form > button { margin-top: 22px; }
.elevated { box-shadow: var(--shadow-md); }

.grid-two, .two-col-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.three-col-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.field-block.full { grid-column: 1 / -1; }
.terms-row, .check-line { display: flex !important; align-items: flex-start; gap: 10px; }
.terms-row input, .check-line input { margin-top: 4px; flex: 0 0 auto; }
.form-actions { margin-top: 26px; }

.catalog-toolbar-minimal { max-width: 740px; margin: 0 auto 34px; }
.catalog-toolbar-minimal input { min-height: 58px; padding-inline: 20px; background: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.catalog-card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

.area-breakdown { display: grid; gap: 24px; }
.area-breakdown-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: clamp(24px,4vw,38px);
  color: var(--white);
  background: var(--wine-950);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.area-breakdown-brand { display: flex; align-items: center; gap: 20px; }
.area-breakdown-brand img { width: 94px; height: 94px; object-fit: cover; background: var(--white); border: 5px solid rgba(255,255,255,.16); border-radius: 24px; }
.area-breakdown-brand h2 { margin-bottom: 7px; color: var(--white); font-size: clamp(2rem,3vw,3rem); }
.area-breakdown-brand p { margin-bottom: 0; color: rgba(255,255,255,.7); }
.area-breakdown-brand .eyebrow { color: var(--gold-200); }
.area-breakdown-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.area-breakdown-actions .outline-btn { color: var(--white); border-color: rgba(255,255,255,.45); }
.area-breakdown-actions .solid-btn { color: var(--wine-950); background: var(--gold-200); }
.module-breakdown-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.module-tile { display: grid; gap: 3px; padding: 18px; color: var(--ink-800); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; }
.module-tile.active, .module-tile:hover { color: var(--wine-800); border-color: var(--wine-700); box-shadow: var(--shadow-sm); }
.module-no { color: var(--gold-700); font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.module-breakdown-card { padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.module-breakdown-head { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.module-breakdown-head h3, .module-breakdown-head p { margin-bottom: 2px; }
.module-breakdown-head p { color: var(--ink-600); font-size: .8rem; }
.module-orb { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; color: var(--white); background: var(--wine-700); border-radius: 15px; font-weight: 850; }
.breakdown-services { display: grid; gap: 10px; }
.breakdown-service { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; background: #faf7f3; border: 1px solid #e7ded6; border-radius: 13px; }
.breakdown-service h4 { margin-bottom: 5px; font-size: .95rem; line-height: 1.35; }
.breakdown-service span { color: var(--ink-600); font-size: .74rem; }
.service-start { min-height: 36px; padding: 7px 12px; color: var(--wine-800); background: var(--wine-100); font-size: .76rem; }
.service-start:hover { color: var(--white); background: var(--wine-800); }
.subcategory-banner { margin: -4px 0 15px; padding: 11px 14px; color: var(--wine-800); background: var(--wine-100); border-radius: var(--radius-sm); font-size: .8rem; font-weight: 750; }
.subcategory-services-banner { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--ink-600); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

.two-col-service { display: grid; grid-template-columns: minmax(260px,.62fr) minmax(0,1.38fr); align-items: start; gap: 28px; }
.service-sidebar { position: sticky; top: 20px; display: grid; gap: 14px; }
.area-summary-card { display: flex; align-items: center; gap: 15px; padding: 20px; }
.area-summary-card img { width: 58px; height: 58px; object-fit: cover; border-radius: 13px; }
.area-summary-card h2 { margin-bottom: 0; font-family: var(--font-sans); font-size: 1.1rem; letter-spacing: 0; }
.service-list { display: grid; gap: 10px; }
.service-card { padding: 20px; cursor: pointer; transition: border .18s ease, transform .18s ease, box-shadow .18s ease; }
.service-card:hover, .service-card.active { border-color: var(--wine-700); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card.active { background: linear-gradient(135deg, var(--white), var(--wine-100)); }
.service-card h3 { margin-bottom: 10px; line-height: 1.35; }
.service-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 14px; color: var(--ink-600); font-size: .78rem; }
.requirements-box { margin: 0 0 22px; padding: 18px; background: #f5f1eb; border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.requirements-box ul { margin: 10px 0; padding-left: 20px; }
.requirements-box li { margin: 6px 0; }
.requirement-group { color: var(--wine-800); font-weight: 800; }
.requirement-note { color: var(--ink-600); font-style: italic; }
.location-picker {
  display: grid;
  gap: 16px;
  margin-top: 8px;
  padding: 22px;
  background: linear-gradient(145deg, #fbf7f1, #fff);
  border: 1px solid #dfd2c8;
  border-radius: var(--radius-md);
}
.location-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.location-picker-head .eyebrow { margin-bottom: 6px; }
.location-picker-head h3 { margin-bottom: 0; font-size: 1.25rem; }
.location-picker > p { margin-bottom: 0; color: var(--ink-600); }
.location-required { padding: 6px 10px; color: var(--wine-800); background: var(--wine-100); border-radius: var(--radius-pill); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.request-map { min-height: 340px; overflow: hidden; background: #ece5dc; border: 1px solid #d7c9bf; border-radius: 16px; }
.location-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.location-actions .outline-btn,
.location-actions .ghost-btn { min-height: 40px; padding: 9px 13px; font-size: .76rem; }
.location-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.location-fields small { display: block; margin-top: 6px; color: var(--ink-600); font-size: .72rem; line-height: 1.45; }
.location-status { padding: 11px 13px; background: #f3eee8; border-radius: 10px; font-size: .82rem; }
.location-status.is-ready { color: #165f43; background: #e6f4ed; font-weight: 760; }
.request-location { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0; padding: 13px; background: #f7f0e8; border: 1px solid #e4d5c7; border-radius: 12px; }
.request-location div { display: grid; gap: 3px; }
.request-location span { color: var(--ink-600); font-size: .75rem; }
.request-location .outline-btn { min-height: 36px; padding: 7px 11px; font-size: .72rem; white-space: nowrap; }
.folio-result { margin-top: 20px; padding: 26px; background: #e9f5ef; border: 1px solid #b9ddca; border-radius: var(--radius-md); }
.folio-big { margin: 8px 0 16px; color: var(--success); font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.5rem); font-weight: 700; overflow-wrap: anywhere; }

.action-layout, .split-layout { display: grid; gap: 28px; }
.split-layout { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.institutional-auth-stack { display: grid; gap: 18px; min-width: 0; }
.institutional-auth-stack .recovery-box { margin-top: 0; }
.split-layout > .dashboard-shell { grid-column: 1 / -1; }
.action-top-grid { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr); align-items: start; gap: 24px; }
.action-top-grid.reverse { grid-template-columns: minmax(0,1fr) minmax(320px,.72fr); }
.tracking-box, .dashboard-shell { min-height: 210px; padding: clamp(24px,4vw,38px); }
.dashboard-shell.empty { display: grid; place-items: center; color: var(--ink-600); text-align: center; }
.tracking-box { border-top: 5px solid var(--gold-500); }
.result-card { padding: 24px; box-shadow: none; }
.support-graphic { display: flex; justify-content: center; margin-top: 26px; }
.support-graphic img { max-height: 250px; }
.compact-support-graphic { opacity: .92; }

.status-pill, .mail-status, .status-badge { display: inline-flex; padding: 5px 9px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 800; }
.status-recibido, .mail-status-queued { color: #79510c; background: #fff1cd; }
.status-revision, .mail-status-processing { color: #155a78; background: #dff2fa; }
.status-requerido, .mail-status-failed { color: #932438; background: #fae3e7; }
.status-resuelto, .mail-status-sent { color: #17623d; background: #ddf2e6; }

.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dash-head > .inline-actions { flex: 0 1 650px; justify-content: flex-end; }
.dash-head > .inline-actions > * { min-width: 156px; }
.login-context-note { display: grid; gap: 4px; margin: -8px 0 18px; padding: 14px 15px; color: #4f3540; background: #f7f1ec; border-left: 4px solid var(--gold-500); border-radius: 4px 12px 12px 4px; }
.login-context-note strong { color: var(--wine-800); font-size: .85rem; }
.login-context-note span { font-size: .78rem; line-height: 1.45; }
.login-notice { margin: 0 0 18px; padding: 13px 15px; color: #7b3218; background: #fff2df; border: 1px solid #efcc9c; border-radius: 12px; font-size: .86rem; font-weight: 700; }
.login-notice.is-working { color: #174e66; background: #e7f4f8; border-color: #b6dae5; }
.login-notice.is-success { color: #145b39; background: #e3f4e9; border-color: #b7ddc4; }
.login-notice.is-error { color: #8a1e32; background: #fae8ec; border-color: #e8bcc5; }
.field-hint { margin: 7px 0 0; color: var(--ink-600); font-size: .75rem; line-height: 1.4; }
.field-hint strong { color: var(--wine-700); }
.area-panel-page { background: #f4f0eb; }
.area-panel-hero { padding: clamp(34px,5vw,62px) 0 24px; background: linear-gradient(145deg, var(--wine-950), #32101d); }
.area-panel-identity-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; color: var(--white); }
.area-panel-identity-card img { width: 88px; height: 88px; object-fit: cover; background: var(--white); border: 5px solid rgba(255,255,255,.17); border-radius: 24px; }
.area-panel-identity-card h1 { margin-bottom: 7px; color: var(--white); font-size: clamp(2rem,4vw,3.6rem); }
.area-panel-identity-card p { max-width: 760px; margin-bottom: 0; color: rgba(255,255,255,.74); }
.area-panel-identity-card .eyebrow { margin-bottom: 7px; color: var(--gold-200); }
.area-panel-access { padding: 8px 12px; color: var(--wine-950); background: var(--gold-200); border-radius: var(--radius-pill); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.area-panel-content { padding-top: 28px; }
.area-panel-content .dashboard-shell { border-top: 5px solid var(--gold-500); box-shadow: var(--shadow-md); }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.stat-box { padding: 18px; background: #f7f3ee; border: 1px solid #e4dbd3; border-radius: 14px; }
.stat-box strong { display: block; color: var(--wine-800); font-family: var(--font-display); font-size: 2rem; }
.stat-box span { color: var(--ink-600); font-size: .76rem; font-weight: 720; }
.dashboard-tabs { display: flex; gap: 5px; margin: 24px 0 16px; padding-bottom: 7px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.dashboard-tabs button { padding: 8px 14px; color: var(--ink-600); background: transparent; border: 0; border-radius: var(--radius-pill); font-weight: 760; cursor: pointer; white-space: nowrap; }
.dashboard-tabs button.active { color: var(--white); background: var(--wine-800); }
.request-list, .mail-list, .employee-admin-list, .receipt-month-list { display: grid; gap: 12px; }
.request-item, .mail-item, .employee-admin-card, .payroll-upload-panel { padding: 20px; box-shadow: none; }
.admin-auth-card { max-width: 820px; margin-inline: auto; }
.request-item small, .mail-item small, .employee-admin-card small { display: block; color: var(--ink-600); }
.mail-item-head, .employee-admin-head { display: flex; justify-content: space-between; gap: 16px; }
.mail-error { color: var(--danger); }
.area-password-form, .password-change-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.area-password-form .inline-actions, .password-change-form .inline-actions { grid-column: 1 / -1; }

.payroll-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 24px; }
.payroll-card form { display: grid; gap: 5px; }
.recovery-box { margin-top: 24px; padding: 20px; background: #f6f1eb; border-radius: var(--radius-md); }
.payroll-account-section { padding-top: 0; }
.receipt-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; background: #faf7f3; border: 1px solid var(--line); border-radius: 14px; }
.receipt-card small { display: block; color: var(--ink-600); }
.receipt-mini-list { display: grid; gap: 7px; margin-top: 14px; }
.receipt-mini-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; background: #f7f3ee; border-radius: 9px; }
.receipt-upload-panel { display: grid; gap: 14px; }
.payroll-upload-panel { margin: 18px 0; background: #faf7f3; }

.segmented-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.toggle-option { display: inline-flex !important; align-items: center; gap: 8px; padding: 10px 13px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.conditional-fields { grid-column: 1 / -1; display: grid; gap: 14px; }
.oic-contact-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.mail-delivery { margin-top: 16px; padding: 14px; background: rgba(255,255,255,.64); border-radius: var(--radius-sm); }
.mail-delivery-list { display: grid; gap: 7px; margin-top: 8px; }
.ok, .fail, .pending, .neutral { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 780; }
.ok { color: var(--success); }
.fail { color: var(--danger); }
.pending { color: var(--warning); }
.neutral { color: var(--ink-600); }
.prose { max-width: 900px; padding: clamp(26px,5vw,54px); }
.prose p, .prose li { color: var(--ink-800); }
.prose li { margin: 9px 0; }
.setup-grid { display: grid; grid-template-columns: minmax(320px,.7fr) minmax(0,1.3fr); align-items: start; gap: 24px; }
.setup-card { max-width: 560px; }
.credentials-output { max-height: 540px; overflow: auto; padding: 18px; color: #effff5; background: var(--ink-950); border-radius: var(--radius-sm); font: .8rem/1.55 Consolas, monospace; white-space: pre-wrap; }
.setup-warning { color: var(--danger); font-weight: 780; }

/* Gobierno Digital: control seguro de disponibilidad */
.portal-control-card {
  display: grid;
  gap: 14px;
  margin: 26px 0 24px;
  padding: clamp(22px, 3.5vw, 32px);
  background: linear-gradient(135deg, #fffdf9, #f6eee7);
  border: 1px solid #d8c8bd;
  border-left: 6px solid var(--gold-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.portal-control-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-control-heading h3 { margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.15rem); }
.portal-control-card > p { max-width: 820px; margin: 0; color: var(--ink-600); }
.portal-control-card > small { color: var(--ink-600); }
.portal-mode-badge { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 850; white-space: nowrap; }
.portal-mode-public { color: #145b39; background: #dff3e8; }
.portal-mode-maintenance { color: #7a4b00; background: #fff0c8; }
.portal-mode-private { color: #174e66; background: #dff1f8; }
.portal-mode-unknown { color: var(--ink-600); background: #ebe6e1; }
.portal-countdown { display: inline-flex; width: fit-content; padding: 8px 12px; color: var(--wine-800); background: var(--wine-100); border-radius: var(--radius-pill); font-size: .78rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.portal-control-error { padding: 11px 13px; color: var(--danger) !important; background: #fae6e9; border-radius: var(--radius-sm); font-weight: 700; }
.portal-action-notice { display: grid; gap: 2px; padding: 13px 15px; border: 1px solid transparent; border-radius: 13px; }
.portal-action-notice strong { font-size: .82rem; }
.portal-action-notice span { font-size: .75rem; line-height: 1.4; }
.portal-action-notice.is-info { color: #4f3540; background: #f7f1ec; border-color: #e0d2c7; }
.portal-action-notice.is-working { color: #174e66; background: #e7f4f8; border-color: #b6dae5; }
.portal-action-notice.is-success { color: #145b39; background: #e3f4e9; border-color: #b7ddc4; }
.portal-action-notice.is-error { color: #8a1e32; background: #fae8ec; border-color: #e8bcc5; }
.portal-control-actions { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 12px; margin-top: 4px; }
.portal-action-option { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 12px; background: rgba(255,255,255,.72); border: 1px solid #e0d5cc; border-radius: 16px; }
.portal-action-option small { color: var(--ink-600); font-size: .7rem; line-height: 1.4; }
.portal-action-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 15px; border: 1px solid transparent; border-radius: 13px; font: inherit; font-size: .82rem; font-weight: 800; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.portal-action-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); filter: brightness(.98); }
.portal-action-btn:disabled { opacity: .68; cursor: not-allowed; transform: none; box-shadow: none; }
.portal-action-namecheap { color: var(--white); background: var(--ink-950); }
.portal-action-maintenance { color: #6c4100; background: #ffedbd; border-color: #e9c875; }
.portal-action-private { color: #124b63; background: #dff2f8; border-color: #a9d4e1; }
.portal-action-public { color: #155d3a; background: #dff3e8; border-color: #a9d8bd; }
.portal-action-logout { color: var(--wine-800); background: var(--white); border-color: #ddb9c4; }

/* Pantalla institucional de mantenimiento o revisión privada */
.portal-status-page { min-height: 100vh; background: linear-gradient(145deg, var(--wine-950), #241018 62%, #151112); }
.portal-status-page::before { z-index: 0; opacity: .16; background-image: radial-gradient(rgba(234,212,173,.6) .7px, transparent .7px); }
.portal-status-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: clamp(24px, 6vw, 72px) 18px; }
.portal-status-card { width: min(760px, 100%); overflow: hidden; background: var(--paper); border: 1px solid rgba(234,212,173,.42); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.portal-status-brand { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px clamp(24px, 5vw, 44px); background: var(--white); border-top: 8px solid var(--gold-500); }
.portal-status-brand img:first-child { width: min(330px, 65%); }
.portal-status-brand img:last-child { width: 78px; border-radius: 14px; }
.portal-status-content { padding: clamp(34px, 6vw, 58px); background: linear-gradient(120deg, #fffdf9, #f7eee8); }
.portal-status-content h1 { max-width: 650px; margin-bottom: 20px; font-size: clamp(2.55rem, 6vw, 4.8rem); }
.portal-status-content .lead { max-width: 650px; }
.portal-status-note { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.portal-status-note span { color: var(--wine-700); font-family: var(--font-display); font-style: italic; font-weight: 700; }
.portal-staff-link { min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 12px 20px; color: rgba(255,255,255,.76); background: var(--ink-950); font-size: .78rem; font-weight: 750; text-decoration: none; }
.portal-staff-link:hover { color: var(--gold-200); }

/* Footer */
.site-footer { position: relative; color: rgba(255,255,255,.72); background: var(--ink-950); }
.footer-pattern { height: 8px; background: linear-gradient(90deg, var(--wine-700) 0 56%, var(--gold-500) 56% 72%, var(--teal-600) 72%); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; padding-block: 58px; }
.site-footer h3, .site-footer h4 { color: var(--white); }
.site-footer h3 { font-family: var(--font-display); font-size: 1.7rem; }
.site-footer h4 { margin-bottom: 14px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 8px 0; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--gold-200); text-decoration: underline; }
.legal-bar { border-top: 1px solid rgba(255,255,255,.12); }
.legal-bar-inner { min-height: 58px; display: flex; align-items: center; justify-content: space-between; }
.legal-bar-inner::after { content: "Unidos para transformar"; color: var(--gold-200); font-family: var(--font-display); font-style: italic; }

.accessibility-float { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; justify-items: end; gap: 8px; }
.access-main { min-height: 46px; padding: 9px 16px; color: var(--white); background: var(--teal-800); border: 0; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); font-size: .8rem; font-weight: 800; cursor: pointer; }
.access-menu { display: none; gap: 6px; padding: 7px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }
.accessibility-float:hover .access-menu, .accessibility-float:focus-within .access-menu { display: flex; }
.accessibility-float.is-open .access-menu { display: flex; }
.access-menu .mini-btn { min-height: 36px; padding: 7px 10px; font-size: .72rem; }

/* Accessibility modes */
body.high-contrast { color: #fff; background: #000; }
body.high-contrast::before { display: none; }
body.high-contrast .site-header,
body.high-contrast .main-nav,
body.high-contrast .page-title,
body.high-contrast .section,
body.high-contrast .refined-directory-section,
body.high-contrast .areas-section { color: #fff; background: #000; }
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast p,
body.high-contrast a,
body.high-contrast label { color: #fff; }
body.high-contrast .card-form,
body.high-contrast .tracking-box,
body.high-contrast .dashboard-shell,
body.high-contrast .area-card,
body.high-contrast .directory-card,
body.high-contrast .module-breakdown-card,
body.high-contrast .service-card,
body.high-contrast .prose { color: #fff; background: #000; border: 2px solid #fff; }
body.high-contrast .solid-btn { color: #000; background: #ff0; }
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea { color: #000; background: #fff; border: 2px solid #ff0; }
body.high-contrast .digital-access-menu summary { color: #000; background: #ff0; border-color: #ff0; }
body.high-contrast .digital-access-popover { background: #000; border: 2px solid #fff; }
body.high-contrast .digital-access-popover a,
body.high-contrast .digital-access-popover small { color: #fff; }
body.high-contrast .location-picker,
body.high-contrast .request-location,
body.high-contrast .location-status { color: #fff; background: #000; border: 2px solid #fff; }
body.high-contrast .portal-control-card { color: #fff; background: #000; border: 2px solid #fff; }
body.high-contrast .portal-control-card p, body.high-contrast .portal-control-card h3 { color: #fff; }
body.high-contrast .login-context-note, body.high-contrast .portal-action-notice, body.high-contrast .portal-action-option { color: #fff; background: #000; border: 2px solid #fff; }
body.high-contrast .login-context-note strong, body.high-contrast .portal-action-option small, body.high-contrast .field-hint { color: #fff; }

@media (max-width: 980px) {
  .search-hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .search-copy { max-width: 780px; }
  .big-search-card { max-width: 760px; }
  .quick-paths-grid { grid-template-columns: repeat(2,1fr); }
  .quick-paths a:nth-child(2) { border-right: 0; }
  .area-grid, .catalog-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .directory-card, .puam-card { grid-template-columns: 1fr minmax(220px,.45fr); }
  .two-col-service { grid-template-columns: 1fr; }
  .service-sidebar { position: static; grid-template-columns: .7fr 1.3fr; }
  .module-breakdown-grid { grid-template-columns: 1fr; }
  .payroll-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1180px); }
  .top-strip-inner { min-height: 30px; }
  .top-strip-inner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-strip-inner::after { display: none; }
  .top-strip { font-size: .62rem; letter-spacing: .05em; }
  .brand-bar { min-height: 76px; gap: 10px; padding-block: 10px; }
  .brand-link { flex-basis: 250px; }
  .brand-logo { width: 100%; max-width: 330px; }
  .digital-access-menu summary { gap: 7px; padding: 9px 10px; font-size: .62rem; letter-spacing: .065em; }
  .digital-access-popover { top: calc(100% + 10px); }
  .nav-inner { width: 100%; padding-inline: 14px; scrollbar-width: none; }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav-inner a { padding-inline: 11px; font-size: .76rem; }
  .search-hero { padding-top: 22px; }
  .search-hero-grid { gap: 18px; }
  .search-copy { padding-block: 20px; }
  .impact-metrics { align-items: stretch; }
  .impact-metrics > span { grid-template-columns: 1fr; gap: 0; padding: 9px; text-align: center; }
  .impact-metrics > span:first-child { padding-left: 9px; }
  .impact-metrics strong { font-size: 1.3rem; }
  .impact-metrics small { font-size: .64rem; }
  .search-row { grid-template-columns: 1fr; }
  .search-row .solid-btn { width: 100%; }
  .quick-paths-grid { grid-template-columns: 1fr; }
  .quick-paths a, .quick-paths a:first-child { border: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .section { padding-block: 58px; }
  .directory-card, .puam-card { grid-template-columns: 1fr; }
  .feature-directory-graphic, .puam-card > img { max-height: 190px; }
  .area-grid, .catalog-card-grid { grid-template-columns: 1fr; }
  .area-card { grid-template-columns: 65px 1fr; padding: 18px; }
  .area-card .icon-wrap { width: 62px; height: 62px; }
  .title-visual-grid { grid-template-columns: 1fr; }
  .title-illustration, .payroll-symbol { display: none; }
  .grid-two, .two-col-fields, .three-col-fields { grid-template-columns: 1fr; }
  .location-fields { grid-template-columns: 1fr; }
  .location-picker { padding: 17px; }
  .request-map { min-height: 280px; }
  .location-actions { display: grid; grid-template-columns: 1fr; }
  .location-actions > * { width: 100%; }
  .request-location { align-items: flex-start; flex-direction: column; }
  .oic-contact-grid { grid-template-columns: 1fr; }
  .split-layout, .action-top-grid, .action-top-grid.reverse { grid-template-columns: 1fr; }
  .setup-grid { grid-template-columns: 1fr; }
  .service-sidebar { grid-template-columns: 1fr; }
  .area-breakdown-hero { align-items: flex-start; flex-direction: column; }
  .area-breakdown-brand { align-items: flex-start; }
  .area-breakdown-brand img { width: 72px; height: 72px; }
  .breakdown-service { align-items: flex-start; flex-direction: column; }
  .breakdown-service .service-start { align-self: stretch; }
  .dash-head { flex-direction: column; }
  .dash-head > .inline-actions { width: 100%; justify-content: flex-start; }
  .portal-control-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-control-heading { flex-direction: column; }
  .area-panel-identity-card { grid-template-columns: auto 1fr; }
  .area-panel-access { grid-column: 1 / -1; justify-self: start; }
  .area-password-form, .password-change-form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 44px; }
  .legal-bar-inner::after { display: none; }
  .accessibility-float { right: 10px; bottom: 10px; }
  .access-main { width: 46px; padding: 0; font-size: 0; }
  .access-main::before { content: "Aa"; font-size: .82rem; letter-spacing: -.04em; }
}

@media (max-width: 430px) {
  h1 { font-size: 2.55rem; }
  .big-search-card, .card-form, .tracking-box, .dashboard-shell { border-radius: 20px; }
  .hero-actions > *, .form-actions > *, .inline-actions > * { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .area-panel-identity-card { grid-template-columns: 1fr; text-align: center; }
  .area-panel-identity-card img, .area-panel-access { justify-self: center; }
  .area-breakdown-brand { flex-direction: column; }
  .portal-control-actions { grid-template-columns: 1fr; }
  .portal-action-btn { width: 100%; }
  .portal-status-brand { min-height: 94px; padding: 18px 20px; }
  .portal-status-brand img:first-child { width: min(260px, 72%); }
  .portal-status-brand img:last-child { width: 58px; }
  .portal-status-note { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .top-strip, .main-nav, .accessibility-float, .site-footer, .quick-paths { display: none !important; }
  body { background: #fff; }
  .page-title, .section { padding: 20px 0; }
  .card-form, .tracking-box, .dashboard-shell { box-shadow: none; }
}

/* V13 — catálogo ciudadano con lectura vertical por dependencia */
body[data-page="catalogo"] .catalog-hero {
  padding: clamp(54px, 7vw, 92px) 0 clamp(42px, 5vw, 66px);
  background:
    radial-gradient(circle at 88% 12%, rgba(201, 155, 85, .2), transparent 19rem),
    linear-gradient(118deg, #fffdf9 0%, #f8eee9 62%, #f3e3e8 100%);
}

body[data-page="catalogo"] .catalog-hero::after {
  width: 430px;
  height: 430px;
  top: -250px;
  right: -105px;
  border-width: 64px;
  border-color: rgba(109, 16, 41, .075);
}

body[data-page="catalogo"] .catalog-main-title {
  max-width: 870px;
  margin-bottom: 18px;
  color: var(--wine-950);
  font-size: clamp(2.8rem, 5.4vw, 5.2rem);
  line-height: .98;
  text-wrap: balance;
}

body[data-page="catalogo"] .catalog-hero .lead { max-width: 780px; }

body[data-page="catalogo"] .catalog-section {
  padding-top: clamp(34px, 4vw, 52px);
  background: linear-gradient(180deg, var(--paper), var(--canvas));
}

body[data-page="catalogo"] .catalog-toolbar-minimal {
  max-width: none;
  margin: 0 0 clamp(28px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(340px, 1.28fr);
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  padding: clamp(20px, 3vw, 30px);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(109, 16, 41, .13);
  border-left: 6px solid var(--gold-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body[data-page="catalogo"] .catalog-search-intro { display: grid; gap: 5px; }
body[data-page="catalogo"] .catalog-search-intro label {
  color: var(--wine-900);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 820;
  line-height: 1.25;
}
body[data-page="catalogo"] .catalog-search-intro span { color: var(--ink-600); font-size: .82rem; }
body[data-page="catalogo"] .catalog-search-control { display: grid; gap: 9px; }

body[data-page="catalogo"] .catalog-toolbar-minimal input {
  min-height: 58px;
  padding: 14px 20px;
  color: var(--ink-950);
  background: #fff;
  border: 1px solid #cdbfc0;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(59,9,24,.06);
}

body[data-page="catalogo"] .catalog-toolbar-minimal input::placeholder { color: #817477; }
body[data-page="catalogo"] .catalog-summary {
  min-height: 1.35em;
  margin: 0 12px;
  color: var(--ink-600);
  font-size: .74rem;
  line-height: 1.35;
}

body[data-page="catalogo"] .catalog-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

body[data-page="catalogo"] .catalog-ref-card {
  min-height: 445px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: linear-gradient(180deg, #fff 0%, #fff 58%, #fbf5f0 100%);
  border-color: rgba(109, 16, 41, .14);
  border-radius: 24px;
  box-shadow: 0 14px 38px rgba(59, 9, 24, .08);
  overflow: hidden;
}

body[data-page="catalogo"] .catalog-ref-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 6px;
  background: linear-gradient(90deg, var(--wine-700), var(--gold-500), var(--teal-600));
}

body[data-page="catalogo"] .catalog-ref-card::after { display: none; }

body[data-page="catalogo"] .catalog-ref-card:hover {
  border-color: rgba(109, 16, 41, .28);
  box-shadow: 0 24px 54px rgba(59, 9, 24, .14);
  transform: translateY(-6px);
}

body[data-page="catalogo"] .catalog-ref-card .icon-wrap {
  position: relative;
  width: 100%;
  height: 218px;
  display: grid;
  place-items: center;
  padding: 28px 24px 20px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.96), rgba(255,255,255,.35) 54%, transparent 55%),
    linear-gradient(180deg, #fffdf9, #f4ece3);
  border-radius: 0;
}

body[data-page="catalogo"] .catalog-ref-card .icon-wrap img {
  width: 170px;
  height: 170px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(109, 16, 41, .1);
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(59, 9, 24, .12);
}

body[data-page="catalogo"] .catalog-ref-card .icon-wrap.has-nameplate img { padding-bottom: 24px; }

body[data-page="catalogo"] .catalog-icon-nameplate {
  position: absolute;
  left: 50%;
  bottom: 31px;
  width: 136px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 5px 8px 8px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent calc(100% - 5px), #d8b46d calc(100% - 5px), #8e652b 100%),
    linear-gradient(135deg, #7e122f, #a51c43 56%, #650b24);
  border: 1px solid rgba(88, 8, 31, .35);
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0 6px 12px rgba(59, 9, 24, .2);
  font-family: var(--font-heading);
  font-size: .6rem;
  font-weight: 820;
  line-height: 1.05;
  text-align: center;
  text-transform: none;
  transform: translateX(-50%);
}

body[data-page="catalogo"] .catalog-ref-card .content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}

body[data-page="catalogo"] .catalog-ref-card .area-mini-count {
  width: max-content;
  max-width: 100%;
  padding: 5px 10px;
  color: var(--wine-800);
  background: var(--wine-100);
  border: 1px solid #e5c5ce;
  border-radius: var(--radius-pill);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-page="catalogo"] .catalog-ref-card h3 {
  min-height: 2.35em;
  margin: 0;
  color: var(--wine-950);
  font-size: clamp(1.08rem, 1.25vw, 1.32rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body[data-page="catalogo"] .catalog-ref-card .module-dots {
  min-height: 54px;
  align-content: flex-start;
  gap: 6px;
  margin: 0;
}

body[data-page="catalogo"] .catalog-ref-card .module-dots span {
  padding: 5px 9px;
  color: var(--teal-800);
  background: #edf6f4;
  border: 1px solid #cce1dd;
  font-size: .67rem;
  font-weight: 790;
}

body[data-page="catalogo"] .catalog-ref-card .actions {
  display: block;
  margin-top: auto;
}

body[data-page="catalogo"] .catalog-ref-card .solid-btn {
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  font-size: .82rem;
  letter-spacing: .025em;
}

body[data-page="catalogo"] .catalog-empty-state {
  grid-column: 1 / -1;
  min-height: 230px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 34px;
  color: var(--ink-600);
  text-align: center;
  background: rgba(255,255,255,.8);
  border: 1px dashed #cdbfc0;
  border-radius: var(--radius-lg);
}

body[data-page="catalogo"] .catalog-empty-state strong {
  color: var(--wine-900);
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

body[data-page="catalogo"] .catalog-empty-state p { margin: 0; }

body[data-page="catalogo"].catalog-area-view .catalog-hero,
body[data-page="catalogo"].catalog-area-view .catalog-toolbar-minimal { display: none; }
body[data-page="catalogo"].catalog-area-view .catalog-section { padding-top: clamp(28px, 4vw, 48px); }

body.high-contrast[data-page="catalogo"] .catalog-toolbar-minimal,
body.high-contrast[data-page="catalogo"] .catalog-ref-card,
body.high-contrast[data-page="catalogo"] .catalog-empty-state { color: #fff; background: #000; border: 2px solid #fff; }
body.high-contrast[data-page="catalogo"] .catalog-search-intro span,
body.high-contrast[data-page="catalogo"] .catalog-summary { color: #fff; }

@media (max-width: 1080px) {
  body[data-page="catalogo"] .catalog-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  body[data-page="catalogo"] .catalog-toolbar-minimal { grid-template-columns: 1fr; gap: 15px; }
  body[data-page="catalogo"] .catalog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="catalogo"] .catalog-ref-card { min-height: 420px; }
  body[data-page="catalogo"] .catalog-ref-card .icon-wrap { height: 196px; }
  body[data-page="catalogo"] .catalog-ref-card .icon-wrap img { width: 148px; height: 148px; }
  body[data-page="catalogo"] .catalog-icon-nameplate { bottom: 27px; width: 120px; font-size: .55rem; }
}

@media (max-width: 540px) {
  body[data-page="catalogo"] .catalog-main-title { font-size: clamp(2.5rem, 13vw, 3.65rem); }
  body[data-page="catalogo"] .catalog-card-grid { grid-template-columns: 1fr; }
  body[data-page="catalogo"] .catalog-ref-card { min-height: 0; }
  body[data-page="catalogo"] .catalog-ref-card h3,
  body[data-page="catalogo"] .catalog-ref-card .module-dots { min-height: 0; }
}

/* Portal interno de solicitudes entre dependencias */
.dashboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.dashboard-summary-grid > section {
  min-width: 0;
  padding: 18px;
  background: #fffaf5;
  border: 1px solid #e7dbd0;
  border-radius: var(--radius-md);
}
.dashboard-summary-grid .stats { margin: 12px 0 0; }
.internal-entry-btn { background: linear-gradient(135deg, var(--wine-800), #4d0c20); }
.tab-count,
.notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  color: var(--wine-950);
  background: var(--gold-200);
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 850;
}
.dashboard-tabs button.active .tab-count { color: var(--wine-950); background: var(--white); }
.internal-portal,
.internal-notifications { display: grid; gap: 20px; }
.internal-portal-heading,
.internal-list-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}
.internal-portal-heading h2,
.internal-list-heading h2,
.internal-list-heading h3 { margin-bottom: 6px; }
.internal-portal-heading p,
.internal-list-heading p { margin-bottom: 0; color: var(--ink-600); }
.internal-security-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: #145b39;
  background: #e6f5eb;
  border: 1px solid #b8dec5;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 800;
}
.internal-create-card {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 28px;
  padding: clamp(22px, 4vw, 34px);
  color: var(--ink-950);
  background:
    linear-gradient(125deg, rgba(234,212,173,.32), transparent 42%),
    var(--paper);
  border: 1px solid #d9c8b8;
  border-left: 6px solid var(--wine-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.internal-request-form {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: end;
  gap: 14px;
}
.internal-request-form label,
.internal-update-box label { display: grid; gap: 7px; font-weight: 760; }
.internal-request-form .span-2 { grid-column: 1 / -1; }
.internal-request-form small { color: var(--ink-600); font-weight: 500; }
.internal-form-notice,
.internal-alert {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 13px 15px;
  border-radius: 12px;
  font-size: .85rem;
}
.internal-form-notice.is-working { color: #174e66; background: #e7f4f8; }
.internal-form-notice.is-success { color: #145b39; background: #e3f4e9; }
.internal-form-notice.is-error,
.internal-alert.is-error { color: #8a1e32; background: #fae8ec; border: 1px solid #e8bcc5; }
.internal-request-list,
.internal-notification-list { display: grid; gap: 14px; }
.internal-request-card {
  padding: clamp(20px,3vw,28px);
  background: var(--white);
  border: 1px solid #e2d8d0;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(56,33,39,.07);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.internal-request-card.is-highlighted {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(201,155,85,.18), var(--shadow-sm);
  transform: translateY(-2px);
}
.internal-request-head,
.internal-route,
.internal-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.internal-request-head h3 { margin: 4px 0 0; color: var(--wine-900); }
.internal-folio { color: var(--wine-700); font-size: .78rem; font-weight: 900; letter-spacing: .04em; }
.internal-route {
  margin: 18px 0 10px;
  padding: 12px 14px;
  background: #f7f3ee;
  border-radius: 12px;
}
.internal-meta {
  justify-content: flex-start;
  color: var(--ink-600);
  font-size: .8rem;
}
.internal-meta span {
  padding: 5px 9px;
  background: #f5f0ea;
  border-radius: var(--radius-pill);
}
.internal-meta .priority-urgente { color: #8a1e32; background: #fae8ec; font-weight: 850; }
.internal-message { margin: 18px 0; white-space: pre-wrap; }
.internal-files { margin: 16px 0; padding: 14px; background: #f7f3ee; border-radius: 12px; }
.internal-files ul { margin: 7px 0 0; }
.internal-history { margin: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.internal-history summary { padding: 12px 0; color: var(--wine-800); font-weight: 800; cursor: pointer; }
.internal-history ol { display: grid; gap: 10px; margin: 0 0 16px; padding-left: 22px; }
.internal-history li > div { display: flex; justify-content: space-between; gap: 14px; }
.internal-history li p { margin: 3px 0; color: var(--ink-800); }
.internal-history li span,
.internal-history li small { color: var(--ink-600); font-size: .78rem; }
.internal-update-box {
  display: grid;
  grid-template-columns: minmax(180px,.45fr) minmax(0,1fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.internal-update-box textarea { min-height: 92px; }
.internal-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  background: var(--white);
  border: 1px solid #e2d8d0;
  border-radius: 15px;
}
.internal-notification.is-unread { background: #fffaf0; border-color: #d9b778; }
.internal-notification > div:first-child { display: flex; gap: 12px; }
.internal-notification p { margin: 4px 0; }
.internal-notification small { color: var(--ink-600); }
.notification-dot { width: 10px; height: 10px; margin-top: 7px; background: transparent; border-radius: 50%; }
.internal-notification.is-unread .notification-dot { background: var(--wine-700); box-shadow: 0 0 0 4px var(--wine-100); }
.internal-empty {
  padding: 32px;
  color: var(--ink-600);
  text-align: center;
  background: #faf7f3;
  border: 1px dashed #cdbfc0;
  border-radius: var(--radius-md);
}
.status-cancelado { color: #6f2735; background: #f3dfe4; }

body.high-contrast .internal-create-card,
body.high-contrast .internal-request-card,
body.high-contrast .internal-notification,
body.high-contrast .dashboard-summary-grid > section,
body.high-contrast .internal-empty { color: #fff; background: #000; border: 2px solid #fff; }

@media (max-width: 980px) {
  .dashboard-summary-grid,
  .internal-create-card { grid-template-columns: 1fr; }
  .internal-update-box { grid-template-columns: 1fr 1fr; }
  .internal-update-box .solid-btn { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .dashboard-summary-grid { grid-template-columns: 1fr; }
  .internal-request-form,
  .internal-update-box { grid-template-columns: 1fr; }
  .internal-request-form .span-2,
  .internal-update-box .solid-btn { grid-column: auto; }
  .internal-portal-heading,
  .internal-list-heading,
  .internal-notification { align-items: stretch; flex-direction: column; }
  .internal-security-badge { align-self: flex-start; }
  .internal-notification .inline-actions { width: 100%; }
  .internal-notification .inline-actions > * { flex: 1 1 auto; }
}

/* V16 — Gobierno Digital: centro de control y bandeja ciudadana */
.dashboard-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: clamp(22px, 4vw, 34px);
  color: var(--white);
  background:
    radial-gradient(circle at 92% 14%, rgba(234, 212, 173, .26), transparent 16rem),
    linear-gradient(135deg, var(--wine-950), #5b1027 62%, #43101f);
  border-radius: 22px;
  box-shadow: 0 20px 46px rgba(66, 12, 29, .2);
}
.dashboard-command-copy { min-width: 0; }
.dashboard-command-copy .eyebrow { margin-bottom: 8px; color: var(--gold-200); }
.dashboard-command-copy h2 { max-width: 760px; margin-bottom: 8px; color: var(--white); font-size: clamp(1.8rem, 3vw, 2.8rem); }
.dashboard-command-copy > p:not(.eyebrow) { max-width: 720px; margin: 0; color: rgba(255,255,255,.78); }
.dashboard-session-line { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 18px; color: rgba(255,255,255,.74); font-size: .76rem; }
.dashboard-session-line span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-pill); background: rgba(0,0,0,.14); }
.dashboard-command-copy .muted { margin: 12px 0 0; color: var(--gold-200); font-size: .78rem; }
.dashboard-account-actions { display: grid; grid-template-columns: minmax(150px, 1fr); gap: 9px; min-width: 172px; }
.dashboard-account-actions .outline-btn,
.dashboard-account-actions .ghost-btn { min-height: 44px; justify-content: center; font-size: .76rem; }
.dashboard-account-actions .outline-btn { color: var(--white); border-color: rgba(255,255,255,.5); }
.dashboard-account-actions .outline-btn:hover { color: var(--wine-950); background: var(--gold-200); border-color: var(--gold-200); }
.dashboard-account-actions .ghost-btn { color: var(--wine-950); background: var(--white); }

.dashboard-primary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.dashboard-primary-action {
  min-width: 0;
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: var(--ink-950);
  background: #fffdfa;
  border: 1px solid #e2d6cc;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(56,33,39,.07);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-primary-action:hover,
.dashboard-primary-action:focus-visible { border-color: var(--gold-500); box-shadow: var(--shadow-sm); transform: translateY(-3px); outline: none; }
.dashboard-primary-action strong,
.dashboard-primary-action small { display: block; }
.dashboard-primary-action strong { color: var(--wine-900); font-size: .96rem; }
.dashboard-primary-action small { margin-top: 3px; color: var(--ink-600); font-size: .74rem; line-height: 1.42; }
.dashboard-action-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--wine-950); background: var(--gold-200); border-radius: 13px; font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
.dashboard-primary-action.internal-entry-btn { color: var(--white); background: linear-gradient(135deg, var(--wine-800), #4c0c20); border-color: var(--wine-800); }
.dashboard-primary-action.internal-entry-btn strong { color: var(--white); }
.dashboard-primary-action.internal-entry-btn small { color: rgba(255,255,255,.72); }
.dashboard-primary-action.internal-entry-btn .dashboard-action-icon { color: var(--wine-950); background: var(--gold-200); }
.dashboard-payroll-action { background: linear-gradient(135deg, #e7f1ef, #fdfbf7); }
.dashboard-payroll-action .dashboard-action-icon { color: var(--white); background: var(--teal-800); }
.dashboard-technical-tools { margin: 0 0 22px; overflow: hidden; border: 1px solid #dfd3ca; border-radius: 16px; background: #faf7f3; }
.dashboard-technical-tools summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 12px 18px; color: var(--wine-800); font-size: .8rem; font-weight: 820; cursor: pointer; }
.dashboard-technical-tools summary::after { content: "Ver opciones"; color: var(--ink-600); font-size: .72rem; font-weight: 700; }
.dashboard-technical-tools[open] summary { border-bottom: 1px solid #e4d9d1; background: var(--white); }
.dashboard-technical-tools[open] summary::after { content: "Ocultar"; }
.dashboard-technical-tools > div { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 18px 18px; }
.dashboard-technical-tools .outline-btn { min-height: 42px; padding: 8px 12px; font-size: .74rem; }
.dashboard-summary-grid { gap: 14px; margin: 22px 0; }
.dashboard-summary-grid > section { padding: 20px; border-radius: 18px; }
.dashboard-summary-grid .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.dashboard-summary-grid .stat-box { min-height: 104px; display: grid; align-content: center; padding: 14px; background: rgba(255,255,255,.74); }
.dashboard-summary-grid .stat-box strong { font-size: clamp(1.45rem, 2.2vw, 2rem); }
.dashboard-summary-grid .stat-box span { line-height: 1.3; }
.citizen-workspace-preview { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 176px; padding: clamp(24px, 4vw, 38px); color: var(--white); background: linear-gradient(120deg, var(--teal-800), #1f756d); border-radius: 20px; }
.citizen-workspace-preview > div:first-child { max-width: 660px; }
.citizen-workspace-preview h3 { margin: 0 0 7px; color: var(--white); font-size: clamp(1.45rem, 2.4vw, 2rem); }
.citizen-workspace-preview p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.78); }
.citizen-workspace-preview .eyebrow { margin-bottom: 7px; color: var(--gold-200); }
.citizen-workspace-preview-actions { display: grid; gap: 7px; flex: 0 0 min(280px, 100%); }
.citizen-workspace-preview-actions .solid-btn { min-height: 50px; justify-content: center; color: var(--wine-950); background: var(--gold-200); text-align: center; }
.citizen-workspace-preview-actions small { color: rgba(255,255,255,.7); font-size: .72rem; text-align: center; }

.citizen-requests-page .main-nav a[aria-current="page"] { color: var(--white); background: var(--wine-800); }
.citizen-workspace-hero { padding-bottom: 34px; }
.citizen-workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.citizen-workspace-brand { display: flex; align-items: center; gap: 20px; min-width: 0; color: var(--white); }
.citizen-workspace-brand img { flex: 0 0 auto; width: 84px; height: 84px; object-fit: cover; border: 5px solid rgba(255,255,255,.18); border-radius: 22px; background: var(--white); }
.citizen-workspace-brand .eyebrow { margin-bottom: 6px; color: var(--gold-200); }
.citizen-workspace-brand h1 { margin-bottom: 6px; color: var(--white); font-size: clamp(2rem, 4vw, 3.4rem); }
.citizen-workspace-brand p:not(.eyebrow) { max-width: 720px; margin: 0; color: rgba(255,255,255,.76); }
.citizen-back-link { min-height: 44px; flex: 0 0 auto; justify-content: center; color: var(--white); border-color: rgba(255,255,255,.52); font-size: .78rem; white-space: nowrap; }
.citizen-back-link:hover { color: var(--wine-950); background: var(--gold-200); border-color: var(--gold-200); }
.citizen-workspace-section { padding-top: 28px; }
.citizen-workspace-shell { display: grid; gap: 20px; }
.citizen-workspace-shell.is-loading,
.citizen-workspace-shell.is-error { min-height: 260px; place-items: center; padding: 34px; color: var(--ink-600); background: var(--white); border: 1px solid var(--line); border-radius: 22px; text-align: center; }
.citizen-workspace-shell.is-error { color: var(--danger); }
.citizen-workspace-top { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.citizen-workspace-top h2 { margin-bottom: 5px; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.citizen-workspace-top p:not(.eyebrow) { max-width: 680px; margin: 0; color: var(--ink-600); }
.citizen-workspace-top .outline-btn { min-height: 44px; flex: 0 0 auto; font-size: .78rem; }
.citizen-workspace-notice { display: grid; gap: 3px; padding: 14px 17px; color: #145b39; background: #e4f4ea; border: 1px solid #b8ddc4; border-radius: 14px; font-size: .82rem; }
.citizen-workspace-notice span { color: #286647; }
.citizen-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.citizen-metric-grid article { min-height: 112px; display: grid; align-content: center; gap: 3px; padding: 18px; background: var(--white); border: 1px solid #e0d5cc; border-radius: 16px; box-shadow: 0 8px 22px rgba(56,33,39,.05); }
.citizen-metric-grid article:nth-child(1) { border-top: 4px solid var(--wine-700); }
.citizen-metric-grid article:nth-child(2) { border-top: 4px solid var(--teal-600); }
.citizen-metric-grid article:nth-child(3) { border-top: 4px solid var(--gold-500); }
.citizen-metric-grid article:nth-child(4) { border-top: 4px solid #7962a8; }
.citizen-metric-grid strong { color: var(--wine-800); font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1; }
.citizen-metric-grid span { color: var(--ink-600); font-size: .75rem; font-weight: 760; }
.citizen-workspace-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .36fr); gap: 20px; align-items: start; }
.citizen-request-board,
.citizen-notifications-panel,
.citizen-internal-summary { min-width: 0; padding: clamp(20px, 3vw, 28px); background: var(--white); border: 1px solid #e1d7cf; border-radius: 20px; box-shadow: 0 10px 28px rgba(56,33,39,.06); }
.citizen-board-heading,
.citizen-side-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.citizen-board-heading h2,
.citizen-side-heading h2 { margin-bottom: 3px; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.citizen-side-heading p:not(.eyebrow) { margin: 0; color: var(--ink-600); font-size: .78rem; }
.citizen-search-label { width: min(280px, 100%); display: grid; gap: 5px; color: var(--ink-600); font-size: .7rem; font-weight: 800; }
.citizen-search-label input { min-height: 42px; padding-inline: 12px; font-size: .8rem; }
.citizen-filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 10px; }
.citizen-filter-row button { min-height: 36px; padding: 7px 11px; color: var(--ink-600); background: #f6f1eb; border: 1px solid #e5d9d1; border-radius: var(--radius-pill); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.citizen-filter-row button:hover,
.citizen-filter-row button.active { color: var(--white); background: var(--wine-800); border-color: var(--wine-800); }
.citizen-filter-row span { margin-left: 3px; color: inherit; }
.citizen-filter-result { margin: 0 0 14px; color: var(--ink-600); font-size: .76rem; }
.citizen-request-list { display: grid; gap: 14px; }
.citizen-request-card { overflow: hidden; padding: clamp(20px, 3vw, 28px); background: #fffefd; border: 1px solid #e2d7ce; border-radius: 17px; box-shadow: 0 8px 22px rgba(56,33,39,.05); }
.citizen-request-card[hidden] { display: none; }
.citizen-request-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.citizen-folio { margin: 0 0 4px; color: var(--wine-700); font-size: .76rem; font-weight: 900; letter-spacing: .05em; }
.citizen-request-card h3 { margin: 0 0 4px; color: var(--wine-900); font-size: 1.12rem; }
.citizen-request-card-head p:not(.citizen-folio) { margin: 0; color: var(--ink-600); font-size: .77rem; }
.citizen-request-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; padding: 13px; background: #f7f3ee; border-radius: 13px; }
.citizen-request-meta div { min-width: 0; }
.citizen-request-meta dt { margin-bottom: 3px; color: var(--ink-600); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.citizen-request-meta dd { margin: 0; overflow-wrap: anywhere; color: var(--ink-950); font-size: .78rem; font-weight: 720; }
.citizen-request-address { display: grid; gap: 3px; margin: 12px 0; padding: 12px 13px; background: #f8f1e8; border-left: 3px solid var(--gold-500); border-radius: 4px 11px 11px 4px; font-size: .8rem; }
.citizen-request-address span { color: var(--ink-600); }
.citizen-request-message { margin: 16px 0; color: var(--ink-800); white-space: pre-wrap; }
.citizen-request-history { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.citizen-request-history summary { padding: 11px 0; color: var(--wine-800); font-size: .8rem; font-weight: 820; cursor: pointer; }
.citizen-request-history ol { display: grid; gap: 10px; margin: 0 0 14px; padding-left: 22px; }
.citizen-request-history li > div { display: flex; justify-content: space-between; gap: 12px; }
.citizen-request-history li p { margin: 3px 0 0; color: var(--ink-600); font-size: .78rem; }
.citizen-request-history li small { color: var(--ink-600); font-size: .72rem; }
.citizen-request-update { display: grid; grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.citizen-request-update label { display: grid; gap: 6px; color: var(--ink-800); font-size: .75rem; font-weight: 800; }
.citizen-request-update select { min-height: 44px; }
.citizen-request-update textarea { min-height: 94px; }
.citizen-request-update .solid-btn { min-height: 44px; justify-content: center; padding-inline: 14px; font-size: .76rem; white-space: nowrap; }
.citizen-workspace-sidebar { display: grid; gap: 16px; position: sticky; top: 18px; }
.citizen-internal-summary { color: var(--white); background: linear-gradient(135deg, var(--wine-800), #4a0c20); border-color: var(--wine-800); }
.citizen-internal-summary .eyebrow { color: var(--gold-200); }
.citizen-internal-summary h2 { margin: 4px 0; color: var(--white); font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; }
.citizen-internal-summary p:not(.eyebrow) { margin: 0 0 18px; color: rgba(255,255,255,.76); font-size: .8rem; }
.citizen-internal-summary .outline-btn { min-height: 42px; justify-content: center; color: var(--white); border-color: rgba(255,255,255,.5); font-size: .76rem; }
.citizen-internal-summary .outline-btn:hover { color: var(--wine-950); background: var(--gold-200); border-color: var(--gold-200); }
.citizen-notifications-panel { padding: 20px; }
.citizen-side-heading { align-items: start; }
.citizen-side-heading > .outline-btn { min-height: 36px; padding: 7px 10px; font-size: .7rem; }
.citizen-notification-list { display: grid; gap: 10px; margin-top: 16px; }
.citizen-notification { display: grid; gap: 12px; padding: 13px; background: #fbf8f4; border: 1px solid #e6ddd5; border-radius: 13px; }
.citizen-notification.is-unread { background: #fff9ec; border-color: #dfbf80; }
.citizen-notification > div:first-child { display: flex; gap: 10px; }
.citizen-notification strong { display: block; color: var(--wine-900); font-size: .78rem; }
.citizen-notification p { margin: 3px 0; color: var(--ink-800); font-size: .75rem; line-height: 1.4; }
.citizen-notification small { color: var(--ink-600); font-size: .68rem; }
.citizen-notification-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.citizen-notification-actions .outline-btn,
.citizen-notification-actions .ghost-btn { min-height: 34px; padding: 6px 9px; font-size: .68rem; }
.citizen-internal-link { display: flex; align-items: center; justify-content: space-between; min-height: 42px; margin-top: 14px; padding: 10px 0 0; color: var(--wine-800); border-top: 1px solid var(--line); font-size: .76rem; font-weight: 820; text-decoration: none; }
.citizen-internal-link:hover { color: var(--teal-800); }
.citizen-internal-link span { font-size: 1.1rem; }

body.high-contrast .dashboard-command-center,
body.high-contrast .citizen-workspace-preview,
body.high-contrast .citizen-internal-summary,
body.high-contrast .citizen-request-board,
body.high-contrast .citizen-notifications-panel,
body.high-contrast .citizen-request-card,
body.high-contrast .citizen-metric-grid article { color: #fff; background: #000; border: 2px solid #fff; }
body.high-contrast .dashboard-command-copy h2,
body.high-contrast .dashboard-command-copy > p,
body.high-contrast .citizen-workspace-brand h1,
body.high-contrast .citizen-workspace-brand p,
body.high-contrast .citizen-request-card h3,
body.high-contrast .citizen-notification strong { color: #fff; }

@media (max-width: 980px) {
  .dashboard-primary-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-primary-action:last-child { grid-column: 1 / -1; }
  .citizen-workspace-layout { grid-template-columns: 1fr; }
  .citizen-workspace-sidebar { position: static; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); }
  .citizen-request-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dashboard-command-center,
  .citizen-workspace-heading,
  .citizen-workspace-top,
  .citizen-board-heading { align-items: stretch; flex-direction: column; grid-template-columns: 1fr; }
  .dashboard-command-center { display: grid; }
  .dashboard-account-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
  .dashboard-primary-grid { grid-template-columns: 1fr; }
  .dashboard-primary-action:last-child { grid-column: auto; }
  .citizen-workspace-preview { align-items: stretch; flex-direction: column; }
  .citizen-workspace-preview-actions { flex-basis: auto; }
  .citizen-search-label { width: 100%; }
  .citizen-metric-grid { grid-template-columns: 1fr 1fr; }
  .citizen-workspace-sidebar { grid-template-columns: 1fr; }
  .citizen-request-update { grid-template-columns: 1fr; }
  .citizen-request-update .solid-btn { width: 100%; }
}
@media (max-width: 480px) {
  .dashboard-account-actions,
  .citizen-metric-grid,
  .citizen-request-meta { grid-template-columns: 1fr; }
  .dashboard-primary-action { min-height: 102px; }
  .citizen-workspace-brand { align-items: flex-start; flex-direction: column; }
  .citizen-workspace-brand img { width: 72px; height: 72px; }
  .citizen-request-card-head { flex-direction: column; }
  .citizen-request-card-head .status-pill { align-self: flex-start; }
  .citizen-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .citizen-filter-row button { flex: 0 0 auto; }
}