/* =========================================================
   Buzón — CSS compacto (revisado)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --orange:#e67425; --green:#408740; --pink:#df1783; --blue:#0b3b60;
  --bg:#f6f8fb; --surface:#fff; --text:#27323f; --muted:#6b7785;

  --ring: color-mix(in oklab, var(--blue) 38%, transparent);
  --shadow: 0 8px 24px rgba(13,38,76,.10);

  --grad:
    radial-gradient(1200px 400px at 10% -10%, color-mix(in oklab, var(--blue) 18%, #fff) 0%, transparent 60%),
    radial-gradient(900px 380px at 90% 0%, color-mix(in oklab, var(--pink) 10%, #fff) 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%,#f7f9fc 100%);

  --radius:16px; --radius-sm:12px;
  --gutter:16px; --container:100%;

  --bd:#e8eef6; --bd-soft:#e7edf7; --bd-hero:#e9eef5;

  --pad-start:max(var(--gutter), env(safe-area-inset-left));
  --pad-end:max(var(--gutter), env(safe-area-inset-right));
  --pad-bottom:max(0px, env(safe-area-inset-bottom));

  --tb-pad-y: 12px;
}

/* ---------- Reset mínimo ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ font-size:15px }
@media (max-width:480px){ html{ font-size:14.5px } }
@media (min-width:1024px){ html{ font-size:15.5px } }
body{
  margin:0; line-height:1.45;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  -webkit-tap-highlight-color:transparent; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:10px }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

/* ---------- Layout base ---------- */
.wrap{ min-height:100dvh; display:flex; flex-direction:column }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(120%) blur(8px);
  background: color-mix(in oklab, #fff 92%, var(--blue) 4%);
  border-bottom:1px solid var(--bd-hero);
  padding-block: var(--tb-pad-y) var(--tb-pad-y);
}
.topbar__inner{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:8px; max-width:var(--container); margin:0 auto;
  padding-inline: var(--pad-start) var(--pad-end);
}
.topbar__brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:1rem; min-width:0 }
.topbar__dot{ width:8px; height:8px; border-radius:999px }

.topbar__links{
  justify-self:end; display:flex; align-items:center; gap:12px;
  min-width:0; overflow-x:auto; white-space:nowrap; padding-inline:4px;
}
:is(.topbar__links, .chips)::-webkit-scrollbar{ display:none }

.tb-link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:8px 12px; min-height:40px; font-size:.9rem; font-weight:500;
  border-radius:999px; border:1px solid var(--bd-soft); background:#fff;
  transition:border-color .15s, transform .06s; flex:0 0 auto;
}
.tb-link:active{ transform:translateY(1px) }
.tb-link[data-variant="primary"]{ background:var(--blue); color:#fff; border-color:transparent }
.tb-link[data-variant="primary"]:hover{ filter:brightness(.96) }

/* Hamburguesa (mobile) */
.topbar__toggle{ display:none }
@media (max-width: 639.98px){
  .topbar__links{ display:none !important }
  .topbar__toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:999px;
    border:1px solid var(--bd-soft); background:#fff; box-shadow:var(--shadow);
    justify-self:end;
  }
  .topbar__toggle .icon-burger .line{
    stroke:currentColor; stroke-width:2.2; stroke-linecap:round; transform-origin:12px 12px;
    transition:transform .22s ease, opacity .18s ease;
  }
  .topbar__toggle[aria-expanded="true"] .line.middle{ opacity:0 }
  .topbar__toggle[aria-expanded="true"] .line.top{ transform:translateY(5px) rotate(45deg) }
  .topbar__toggle[aria-expanded="true"] .line.bottom{ transform:translateY(-5px) rotate(-45deg) }
}

/* Drawer + scrim */
.topbar__scrim{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); z-index:98 }
.topbar__drawer{
  position:fixed; inset-block:0; right:0; width:min(88vw,360px);
  background:#fff; box-shadow:-16px 0 40px rgba(13,38,76,.18);
  transform:translateX(100%); transition:transform .22s ease; z-index:99;
  padding-block:max(16px, env(safe-area-inset-top)) 20px;
  padding-inline: var(--pad-start) var(--pad-end);
  display:grid; grid-template-rows:auto 1fr;
}
.topbar__drawer.open{ transform:translateX(0) }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.drawer__close{ width:40px; height:40px; border-radius:999px; border:1px solid var(--bd-soft); background:#fff; cursor:pointer }
.drawer__nav{ margin-top:12px; display:flex; flex-direction:column; gap:10px; overflow:auto }
.drawer__nav .tb-link{ width:100%; justify-content:flex-start; border-radius:12px; border-color:var(--bd); box-shadow:var(--shadow) }

/* ---------- Hero + burbujas ---------- */
header.hero{
  padding-block: clamp(20px,4vw,40px) 16px;
  padding-inline: var(--pad-start) var(--pad-end);
  background:var(--grad); border-bottom:1px solid var(--bd-hero);
  position:relative; overflow:hidden;
}
.hero__inner{ max-width:var(--container); margin:0 auto; display:grid; gap:14px; position:relative; z-index:1 }
.brand{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.2px }
.brand__dot{ width:8px; height:8px; border-radius:50%; background:var(--blue) }
.subtitle{ color:var(--muted); font-size:.85rem; font-weight:500 }
h1{ margin:6px 0 0; font-size:clamp(22px,5vw,34px); line-height:1.15; font-weight:600 }

/* burbujas */
.hero::before,.hero::after{ content:""; position:absolute; inset:auto; border-radius:50%; pointer-events:none; filter:blur(6px); opacity:.55 }
.hero::before{ width:38vmin; height:38vmin; left:6%; top:6%; background:radial-gradient(circle, rgba(11,59,96,.10) 0 60%, transparent 62%); animation:bubbleA 3s ease-in-out infinite alternate }
.hero::after { width:32vmin; height:32vmin; right:8%; top:10%; background:radial-gradient(circle, rgba(248,84,113,.10) 0 60%, transparent 62%); animation:bubbleB 6s ease-in-out infinite alternate }
.hero__inner::before{ content:""; position:absolute; width:26vmin; height:26vmin; left:48%; bottom:-4%; transform:translateX(-50%); border-radius:50%; filter:blur(6px); background:radial-gradient(circle, rgba(14,160,132,.10) 0 60%, transparent 62%); animation:bubbleC 7s ease-in-out infinite alternate }
@keyframes bubbleA{ to{ transform:translate(12vmin,7vmin) scale(1.05) } }
@keyframes bubbleB{ to{ transform:translate(-10vmin,9vmin) scale(1.04) } }
@keyframes bubbleC{ to{ transform:translate(6vmin,-10vmin) scale(1.06) } }
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after, .hero__inner::before{ animation:none!important }
}

/* ---------- Buscador ---------- */
.search{ margin-top:8px }
.searchbar{
  display:flex; align-items:center; gap:8px;
  padding:6px; border:1px solid #e1e8f0; border-radius:999px;
  background:#fff; box-shadow:var(--shadow);
  transition: box-shadow .2s, border-color .2s;
}
.searchbar:focus-within{ border-color:var(--ring); box-shadow:0 0 0 4px color-mix(in oklab, var(--blue)10%, transparent) }
.search__box{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:10px 10px 10px 12px; font-size:.95rem }
.search__btn{
  height:38px; padding:0 14px; border-radius:999px; border:0; cursor:pointer;
  background:var(--blue); color:#fff; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 6px 14px color-mix(in oklab, var(--blue) 28%, transparent);
  transition: transform .06s;
}
.search__btn:active{ transform:scale(.98) }
@media (max-width: 480px){
  .searchbar{ position:relative }
  .search__box{ width:100%; padding:10px 48px 10px 12px }
  .search__btn{ position:absolute; inset-inline-end:6px; inset-block-start:50%; transform:translateY(-50%); height:36px; padding:0 12px; font-size:0 }
  .search__btn svg{ width:18px; height:18px }
}

/* ---------- Chips ---------- */
.chips{ display:flex; gap:8px; overflow-x:auto; white-space:nowrap; padding-top:10px }
.chip{
  --c:var(--blue);
  padding:7px 10px; min-height:36px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--c) 28%, var(--bd-soft));
  background:color-mix(in oklab, var(--c) 10%, #fff);
  color:color-mix(in oklab, var(--c) 65%, #000);
  font-size:.85rem; user-select:none; cursor:pointer;
  transition:background .15s, border-color .15s; flex-shrink:0;
}
.chip:is(:hover,.active){ background:color-mix(in oklab, var(--c) 15%, #fff); border-color:color-mix(in oklab, var(--c) 35%, var(--bd-soft)) }
.chip[data-c="orange"]{ --c:var(--orange) }
.chip[data-c="green"]{  --c:var(--green)  }
.chip[data-c="pink"]{   --c:var(--pink)   }

/* ---------- Cards ---------- */
.grid{ display:grid; grid-template-columns:1fr; gap:12px }
.card{
  background:var(--surface); border:1px solid var(--bd); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  transition: transform .12s, box-shadow .12s, border-color .12s; cursor:pointer;
}
.card:hover{ transform:translateY(-2px); border-color:color-mix(in oklab, var(--blue) 18%, var(--bd)); box-shadow:0 14px 36px rgba(13,38,76,.14) }
.card__media{
  aspect-ratio:16/9;
  background:linear-gradient(45deg, color-mix(in oklab, var(--blue) 12%, #fff), #fff);
  display:flex; align-items:center; justify-content:center; font-weight:600; color:color-mix(in oklab, var(--blue) 65%, #111);
}
.card__body{ padding:14px }
.card__kicker{ font-size:.72rem; font-weight:600; letter-spacing:.2px; color:var(--muted); text-transform:uppercase }
.card__title{ margin:6px 0; font-size:1rem; font-weight:600; line-height:1.25 }
.card__desc{ color:var(--muted); font-size:.92rem }
.card__meta{ display:flex; gap:8px; align-items:center; padding:12px 14px 16px; margin-top:auto; color:var(--blue); font-weight:600 }
.pill{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
  background:color-mix(in oklab,var(--blue)9%,#fff); border:1px solid color-mix(in oklab,var(--blue)22%,var(--bd-soft)); font-size:.85rem;
}

/* ---------- Card ancho (Consejos) ---------- */
.card--wide{
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.2rem 1.6rem; min-height:120px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--blue) 8%, #fff), #fff);
  border:1px solid color-mix(in oklab, var(--blue) 20%, var(--bd-soft));
  border-radius:var(--radius); box-shadow:0 4px 16px rgba(13,38,76,.06); transition:all .18s ease;
}
.card--wide:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(13,38,76,.10) }
.card--wide .card__media{ font-weight:700; color:var(--blue); font-size:1.1rem; min-width:160px }
.card--wide .card__desc{ margin:0; font-size:.95rem; color:#445 }

/* ---------- LAYOUT: izq (cards) + der (sidebar) ---------- */
.layout{
  max-width: var(--container); margin: 20px auto 60px;
  padding-inline: var(--pad-start) var(--pad-end);
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
.sidebar{ display:grid; gap:16px; align-content:start }
.side-card{ background:var(--surface); border:1px solid var(--bd); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px }
.side-title{ margin:0 0 8px; font-size:1rem }

/* ---------- Agenda ---------- */
.dates-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.date-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  border:1px solid var(--bd); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer;
}
.date-badge{
  width:54px; height:54px; border-radius:12px; display:grid; place-items:center; line-height:1.05;
  border:1px solid var(--bd);
  background: radial-gradient(70% 70% at 30% 20%, color-mix(in oklab, var(--blue) 12%, #fff), #fff);
  font-weight:700;
}
.date-badge small{ display:block; font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.2px }
.date-title{ font-weight:600 }
.date-meta{ color: var(--muted); font-size:.92rem }
.date-cta{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid color-mix(in oklab,var(--blue)22%,var(--bd-soft));
  background:color-mix(in oklab,var(--blue)9%,#fff);
  color:var(--blue); font-weight:600; font-size:.85rem; white-space:nowrap; cursor:pointer;
}
.side-link{ display:inline-block; margin-top:10px; color:var(--blue); font-weight:700 }

/* ---------- Weather widget ---------- */
#weatherCard .wx{ display:grid; gap:12px }
.wx__header{ display:flex; align-items:center; gap:12px }
.wx__icon{
  width:54px; height:54px; border-radius:12px; display:grid; place-items:center; font-size:26px;
  border:1px solid var(--bd); background: radial-gradient(70% 70% at 30% 20%, color-mix(in oklab, var(--blue) 10%, #fff), #fff);
  box-shadow: var(--shadow);
}
.wx__now{ display:grid; gap:2px }
.wx__temp{ font-size:1.6rem; font-weight:700; line-height:1 }
.wx__cond{ font-size:.92rem; color:var(--muted); font-weight:600 }
.wx__feel{ font-size:.85rem; color:var(--muted) }
.wx__gauge{ display:grid; gap:6px }
.wx__scale{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-weight:600; color:var(--muted); font-size:.9rem }
.wx__bar{
  position:relative; height:8px; border-radius:999px; overflow:hidden;
  background:linear-gradient(90deg,#4f97ff 0%, #7ac7ff 20%, #a8e3ff 35%, #ffd27a 50%, #ffb36b 70%, #ff8a6b 100%);
  box-shadow: inset 0 0 0 1px var(--bd);
}
.wx__thumb{
  position:absolute; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:999px; background:#fff;
  border:2px solid color-mix(in oklab, var(--blue) 45%, transparent); box-shadow: 0 2px 6px rgba(13,38,76,.18);
}
.wx__hint{ color:var(--muted); font-size:.8rem }
.wx__meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:.9rem; color:var(--text) }
.wx__meta > div{ display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--bd); border-radius:10px; background:#fff }
.wx__loc{ font-size:.82rem; color:var(--muted) }
@media (max-width:480px){ .wx__icon{ width:48px; height:48px; font-size:22px } .wx__temp{ font-size:1.4rem } }

/* ---------- CTA Buzón line ---------- */
.cta-buzon-line{ padding:0; border:1px solid var(--bd); border-radius: var(--radius); background:#fff; overflow:hidden }
.cta-buzon-line__link{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  padding:14px 16px; min-height:64px; border-radius:inherit; position:relative;
  transition: background-color .18s ease, border-color .18s ease;
}
.cta-buzon-line__title{ font-weight:700; font-size:1.05rem; line-height:1.2; color:var(--text); position:relative }
.cta-buzon-line__title::after{ content:""; position:absolute; left:0; bottom:-3px; width:0%; height:2px; background:var(--blue); transition: width .25s ease; border-radius:2px }
/* --- OVERRIDE para permitir varias líneas y que funcione la expansión --- */
.cta-buzon-line__meta{
  white-space: normal !important;   /* permitir salto de línea */
  text-overflow: clip !important;   /* quitar los puntos suspensivos */
  word-break: break-word;           /* por si hay palabras largas */
}

.cta-buzon-line__arrow{ width:32px; height:32px; border-radius:999px; display:grid; place-items:center; color:var(--blue); border:1px solid var(--bd); background:#fff; transition: transform .22s, background-color .18s, border-color .18s }
.cta-buzon-line__link:hover{ background:#fafcff; border-color: color-mix(in oklab, var(--blue) 14%, var(--bd)) }
.cta-buzon-line__link:hover .cta-buzon-line__title::after{ width:100% }
.cta-buzon-line__link:hover .cta-buzon-line__arrow{ transform: translateX(3px); background: color-mix(in oklab, var(--blue) 8%, #fff); border-color: color-mix(in oklab, var(--blue) 22%, var(--bd)) }

/* ---------- Accesibilidad (panel + toggles) ---------- */
.a11y-panel{
  position: fixed; inset: 16px 16px auto auto; width: min(420px, 92vw);
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr auto;
  gap: 10px; padding: 12px; z-index: 101; transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; box-sizing:border-box; overflow-x:hidden;
}
.a11y-panel[aria-hidden="false"]{ transform: translateY(0); opacity: 1; pointer-events: auto }
.a11y-scrim{ position: fixed; inset: 0; background: rgba(2,6,23,.45); backdrop-filter: blur(2px); z-index: 100 }
.a11y-head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.a11y-title{ margin:0; font-size:1.02rem }
.a11y-close{ width:36px; height:36px; border-radius:999px; border:1px solid var(--bd); background:#fff; cursor:pointer }
.a11y-grid{ display:grid; gap:12px }
.a11y-sec__title{ margin:0 0 6px; font-size:.92rem; color:var(--muted) }
.a11y-controls{ display:flex; gap:8px; flex-wrap:wrap }
.a11y-chip{ padding:8px 12px; border:1px solid var(--bd); border-radius:999px; background:#fff; cursor:pointer; font-weight:600 }
.a11y-chip[aria-pressed="true"]{ color:#fff; background:var(--blue); border-color:transparent }
.a11y-switches{ display:grid; gap:10px }
.a11y-switch{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
  padding:8px 12px; border:1px solid #e8eef6; border-radius:12px; background:#fff; font-size:.95rem;
}
.a11y-switch select, .a11y-switch input[type="range"]{ width:100%; min-width:0 }
.a11y-switch > span{ white-space:nowrap }
#a11y-panel select#tts-voice{
  min-height:36px; padding:8px 36px 8px 12px; border-radius:999px; border:1px solid #e8eef6; background:#fff; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2327323f' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center;
}
#a11y-panel input[type="range"]{ height:28px; background:transparent }
#a11y-panel input[type="range"]::-webkit-slider-runnable-track{ height:8px; border-radius:999px; background:#e8eef6 }
#a11y-panel input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; margin-top:-5px; border-radius:50%; background:#fff; border:2px solid #c7d9e8;
}
.tb-link[data-a11y-toggle]{ display:inline-flex; align-items:center; gap:.5rem }
.icon-a11y{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2 }
.tb-link[data-variant="primary"] .icon-a11y{ opacity:.9 }

html[data-a11y-fsz="sm"]{ font-size:14px!important }
html[data-a11y-fsz="md"]{ font-size:15px!important }
html[data-a11y-fsz="lg"]{ font-size:17px!important }
html.theme-contrast{
  --bg:#0a0e14; --surface:#0c1117; --text:#e6e7e9; --muted:#a9b2bd;
  --bd:#1f2937; --bd-soft:#243041; --bd-hero:#1f2937; --grad: linear-gradient(180deg,#0c1117 0%, #0a0e14 100%);
}
html.theme-contrast body{ background:var(--bg); color:var(--text) }
html.theme-contrast .side-card, html.theme-contrast .card, html.theme-contrast .date-item{ background:var(--surface); border-color:var(--bd) }
html.a11y-underline a{ text-decoration: underline; text-underline-offset:.15em }
html.a11y-reduce-motion *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }

/* ---------- Modal reutilizable ---------- */
.nice-scrim{ position:fixed; inset:0; background:rgba(10,22,40,.40); backdrop-filter:blur(6px) saturate(110%); z-index:1000; opacity:0; transition:opacity .25s }
html.has-modal .nice-scrim{ opacity:1 }
.nice-modal{ position:fixed; inset:0; display:grid; place-items:center; padding:24px; z-index:1001; pointer-events:none; opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s }
.nice-modal[aria-hidden="false"]{ opacity:1; transform:translateY(0); pointer-events:auto }
.nice-card{
  position:relative; width:min(560px,92vw); background:var(--surface); border-radius:20px;
  box-shadow:0 24px 60px rgba(13,38,76,.26), 0 6px 18px rgba(13,38,76,.12);
  padding:22px 24px 18px; display:grid; gap:12px; transform:translateY(8px) scale(.985); opacity:.98; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s
}
.nice-modal[aria-hidden="false"] .nice-card{ transform:translateY(0) scale(1); opacity:1 }
.nice-close{ position:absolute; right:12px; top:8px; width:36px; height:36px; border-radius:999px; border:0; background:#fff; color:#27323f; box-shadow:0 6px 20px rgba(13,38,76,.15); font-size:20px; cursor:pointer }
.nice-close:hover{ transform:scale(1.06) }
.nice-badge{ position:absolute; left:-14px; top:-14px; background:#fff; border-radius:14px; padding:8px 10px; text-align:center; box-shadow:0 12px 30px rgba(13,38,76,.18); min-width:58px }
.nice-header{ background:none; border-radius:0; box-shadow:none; padding:0 }
html.has-modal .wrap{ filter:blur(6px) brightness(.98) saturate(105%); transition:filter .25s; pointer-events:none; user-select:none }
@media (prefers-reduced-motion: reduce){
  .nice-scrim, .nice-modal, .nice-card, html.has-modal .wrap{ transition:none!important }
}

/* ---------- Modo detalle (router) ---------- */
html.route-detail header.hero{ display:block!important; padding-block: clamp(16px,3.6vw,32px) 12px }
html.route-detail .hero .search{ display:none!important }
html.route-detail .layout .grid, html.route-detail .layout .sidebar { display:none!important }
html.route-detail .layout { grid-template-columns:1fr!important; margin-top:16px }

/* Botón Volver */
#dvBack{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:999px; border:1px solid var(--bd-soft);
  background: color-mix(in oklab, var(--blue) 6%, #fff); color:var(--blue);
  font-weight:600; font-size:.92rem; cursor:pointer;
  box-shadow:0 6px 16px rgba(13,38,76,.06); transition:all .18s ease;
}
#dvBack:hover{ background: color-mix(in oklab, var(--blue) 10%, #fff); border-color: color-mix(in oklab, var(--blue) 25%, var(--bd)); box-shadow:0 8px 24px rgba(13,38,76,.10); transform:translateY(-1px) }
#dvBack:active{ transform:translateY(1px); box-shadow:none }
#dvBack svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2 }

/* CTA detalle */
.dv-actions{ margin-top:10px }
.dv-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--blue); color:#fff; font-weight:600; text-decoration:none;
  padding:12px 22px; border-radius:999px; box-shadow:0 12px 26px rgba(11,59,96,.22);
  transition:all .2s ease; font-size:1rem;
}
.dv-cta:hover{ background: color-mix(in oklab, var(--blue) 85%, #fff); box-shadow:0 8px 18px rgba(0,118,170,.35); transform:translateY(-1px) }
.dv-cta:active{ transform:translateY(1px); box-shadow:none }
.dv-cta:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
.dv-cta::after{ content:"→"; font-weight:700; margin-left:6px; transition: transform .2s }
.dv-cta:hover::after{ transform: translateX(3px) }

/* ===== Detalle – jerarquía (kicker, meta, requisitos) ===== */
.dv-hero{ display:grid; gap:.4rem; padding:8px 0 6px }
.dv-kicker{
  display:inline-flex; align-items:center; gap:.5ch;
  font: 600 .78rem/1 var(--font,inherit);
  color: color-mix(in oklab, var(--blue) 55%, #000);
  background: color-mix(in oklab, var(--blue) 10%, #fff);
  border: 1px solid color-mix(in oklab, var(--blue) 22%, var(--bd));
  padding: 6px 10px; border-radius: 999px; letter-spacing:.2px; text-transform: uppercase;
}
.dv-title{ margin:6px 0 2px; font-weight:700; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing:-.2px }
.dv-desc{ margin:0; color: color-mix(in oklab, var(--text) 82%, #000); font-size: clamp(.98rem, 1.2vw, 1.05rem); line-height:1.6 }

.dv-meta{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin:10px 0 4px }
.dv-meta-item{
  display:grid; gap:4px; padding:10px 12px; background:#fff; border:1px solid var(--bd);
  border-radius:12px; box-shadow:0 4px 12px rgba(13,38,76,.06)
}
.dv-meta-item>b{ font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.25px; text-transform:uppercase }
.dv-meta-item>span{ font-weight:600; color:var(--text) }

.dv-reqs{ margin-top:8px }
.dv-reqs h3{ margin:0 0 6px; font-size:1.02rem; font-weight:700 }
#dvReqs{ margin:0; padding-left:1.1rem; display:grid; gap:6px }
#dvReqs li{ line-height:1.55 }
#dvReqs li::marker{ color:var(--blue) }

@media (min-width:1024px){
  .layout{ grid-template-columns: minmax(0,1fr) 340px; align-items:start }
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px }
  h1{ font-size: clamp(32px, 3.2vw, 42px) }
  .dv-meta{ grid-template-columns: repeat(4, minmax(0,1fr)) }
}
@media (min-width:640px){
  :root{ --container:1100px; --gutter:20px }
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px }
  .topbar{ padding-block:12px 12px }
}
/* === 3 columnas antes (desde 900px) === */
@media (min-width: 900px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Mantén 2 columnas entre 640px y 899px */
@media (min-width:640px) and (max-width:899.98px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* === Card ancho (Consejos) más "chirris" === */
.card--wide{
  min-height: 88px;          /* antes 120px */
  padding: 1rem 1.25rem;     /* un poco menos de padding */
  box-shadow: 0 2px 10px rgba(13,38,76,.06);
}

.card--wide .card__media{
  font-size: 1rem;           /* bajamos el tamaño */
  min-width: 140px;
}

.card--wide .card__desc{
  font-size: .9rem;
}
/* ====== Media card ancha (Consejos) ====== */
.card--wide .card__media{
  position: relative;
  aspect-ratio: 16 / 6;      /* ancho y bajita para banner */
  border-radius: 14px;
  overflow: hidden;
  background: #eef3f9;
}

/* imagen “cover” */
.card__media .card-media-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.05);
}

/* overlay para dar contraste al texto */
.card--wide .card__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,20,40,0.06) 0%,
    rgba(10,20,40,0.12) 40%,
    rgba(10,20,40,0.08) 100%
  );
  pointer-events: none;
}

/* badge (la leyenda) arriba a la izquierda */
.card-media-badge{
  position: absolute; top: 18px; left: 18px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(255,255,255,.92);
  border: 1px solid color-mix(in oklab, var(--blue) 18%, #e8eef6);
  box-shadow: 0 3px 14px rgba(10,20,40,.10);
}
/* === Card ancho (Consejos) más pequeño SIN cambiar la imagen === */
.card--wide{
  padding: .75rem 1rem;        /* menos padding */
  gap: 12px;                   /* menos separación interna */
  min-height: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(13,38,76,.06);
}

/* no tocamos .card__media: la imagen queda igual */

/* compactar el bloque de texto */
.card--wide .card__body{ padding: 6px 0 0 }
.card--wide .card__kicker{ font-size: .68rem; letter-spacing:.2px }
.card--wide .card__title{ font-size: .95rem; margin: 2px 0 4px; line-height:1.2 }
.card--wide .card__desc{ font-size: .88rem; margin: 0 }
.card--wide .card__meta{ padding: 6px 0 0 }

/* chips/pills más chiquitos */
.card--wide .pill{ padding: 5px 8px; font-size: .8rem }

/* opcional: recortar un poco el radio del badge sobre la imagen */
.card-media-badge{
  padding: 7px 10px;
  border-radius: 10px;
  font-size: .9rem;
  top: 12px; left: 12px;
}
/* Error más visible */
.field.invalid .dropzone{
  border-color:#b00020!important;
  box-shadow:0 0 0 4px rgba(176,0,32,.12)!important;
  background: #fff7f8;
}
.err-msg{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:8px; padding:10px 12px; border-left:4px solid #b00020;
  background:#fff1f3; color:#b00020; font-weight:600; border-radius:8px;
}
.err-msg::before{
  content:"⚠️"; flex:0 0 auto; line-height:1;
}

/* animación de atención */
@keyframes shakeX{
  10%, 90%{ transform: translateX(-1px) }
  20%, 80%{ transform: translateX(2px) }
  30%, 50%, 70%{ transform: translateX(-4px) }
  40%, 60%{ transform: translateX(4px) }
}
.dropzone.shake{ animation:shakeX .45s ease both }

/* Toast global */
.toast{
  position:fixed; inset-inline:50% auto; left:50%; transform:translateX(-50%);
  top:16px; z-index:1100;
  background:#0b3b60; color:#fff; padding:12px 14px; border-radius:12px;
  box-shadow:0 12px 30px rgba(13,38,76,.24);
  font-weight:700; min-width:260px; text-align:center;
}
.toast[data-variant="danger"]{ background:#b00020 }
.toast-close{
  position:absolute; right:8px; top:6px; width:28px; height:28px;
  border-radius:999px; border:0; background:rgba(255,255,255,.15);
  color:#fff; cursor:pointer;
}
/* ===== Expansión del card "Entrar al Buzón" ===== */
.cta-buzon-line{ overflow: hidden; }

.cta-buzon-line__meta{
  line-height: 1.5;
  max-height: none;
  overflow: visible;
  position: static;   /* ya no necesitamos posicionar el pseudo-elemento */
}

/* difuminado al final cuando está colapsado */
.cta-buzon-line__meta::after{
  content:"";
  position:absolute; inset-inline:0; bottom:0; height:1.6em;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 70%);
}

/* expandido con hover/focus (desktop) */
@media (min-width:641px){
  .cta-buzon-line__link:hover .cta-buzon-line__meta,
  .cta-buzon-line__link:focus-within .cta-buzon-line__meta{
    max-height: none; /* sin expansion */
  }
  .cta-buzon-line__link:hover .cta-buzon-line__meta::after,
  .cta-buzon-line__link:focus-within .cta-buzon-line__meta::after{
    display:none;
  }
}

/* estado abierto por clase (para mobile via JS) */
.cta-buzon-line.is-open .cta-buzon-line__meta{
  max-height:none;
}
.cta-buzon-line.is-open .cta-buzon-line__meta::after{ display:none !important; content:none; }

/* animita en la flecha a la derecha */
.cta-buzon-line__arrow{ transition: transform .22s ease; }
.cta-buzon-line.is-open .cta-buzon-line__arrow{ transform: none }
/* Azul tenue al abrir/hover del card del Buzón */
.cta-buzon-line__link{
  background:#fff;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cta-buzon-line__link:hover,
.cta-buzon-line__link:focus-within,
.cta-buzon-line.is-open .cta-buzon-line__link{
  background: color-mix(in oklab, var(--blue) 6%, #fff); /* azulito MUY suave */
  border-color: color-mix(in oklab, var(--blue) 22%, var(--bd));
  box-shadow: 0 6px 16px rgba(11,59,96,.08);
}

/* opcional: un brillo sutil en el título al abrir */
.cta-buzon-line.is-open .cta-buzon-line__title::after{
  width:100%;
}
/* ===== Carousel Proceso Registro — versión compacta ===== */
#proceso-registro.carousel{
  grid-column:1/-1;
  border:1px solid var(--bd);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
  margin:0;
}

/* Viewport + track */
#proceso-registro .carousel__viewport{ position:relative; overflow:hidden }
#proceso-registro .carousel__track{
  display:flex; width:100%;
  transition:transform .35s ease; will-change:transform;
}

/* Slides */
#proceso-registro .carousel__slide{
  flex:0 0 100%;
  padding:24px 28px;
  min-height:220px;
  display:grid; align-content:center; gap:8px;
  background:radial-gradient(70% 80% at 10% 20%, rgba(206,29,129,.05), transparent 60%);
}
#proceso-registro .step-badge{
  width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; font-weight:700; color:#fff;
  background:#ce1d81; box-shadow:0 6px 16px rgba(206,29,129,.35);
}
#proceso-registro .slide__title{ margin:0; font:600 1.1rem 'Poppins',system-ui,sans-serif; color:#0b3b60 }
#proceso-registro .slide__desc{ margin:0; color:#3a5164; font-size:.95rem }

/* Flechas */
#proceso-registro .carousel__nav{
  position:absolute; inset-block-start:50%; transform:translateY(-50%);
  z-index:5; width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.9); color:#0b3b60; box-shadow:0 4px 10px rgba(0,0,0,.15);
  font-size:1.5rem; cursor:pointer; transition:transform .2s ease, background .2s ease;
}
#proceso-registro .carousel__nav:hover{ background:#fff; transform:translateY(-50%) scale(1.1) }
#proceso-registro .carousel__nav.prev{ left:12px }
#proceso-registro .carousel__nav.next{ right:12px }

/* Dots */
#proceso-registro .carousel__dots{
  display:flex; justify-content:center; gap:8px; padding:12px;
  background:#fafbfc; border-top:1px solid rgba(0,0,0,.05);
}
#proceso-registro .carousel__dots button{
  width:8px; height:8px; border:0; border-radius:999px;
  background:rgba(11,59,96,.25); cursor:pointer; transition:all .2s ease;
}
#proceso-registro .carousel__dots button[aria-selected="true"]{
  width:22px; background:#ce1d81;
}

/* Responsive pequeño */
@media (max-width:640px){
  #proceso-registro .carousel__nav.prev{ left:6px }
  #proceso-registro .carousel__nav.next{ right:6px }
}
@media (min-width:992px){
  #proceso-registro .carousel__slide{ min-height:240px; padding:32px 40px }
}
/* Asegura que las flechas sean visibles y centradas */
#proceso-registro .carousel__nav{
  display:grid; place-items:center;
  z-index:20;               /* más alto que el track o PDFs cercanos */
  line-height:1;            /* que el glifo ‹ › quede centrado */
}
/* Contenido visual del slide (icono + texto) */
#proceso-registro .step{
  display:grid; justify-items:center; text-align:center; gap:12px;
  padding:14px 10px;
  max-width: 520px; margin-inline:auto;
}
#proceso-registro .step__icon{
  --ic: var(--blue);
  width:78px; height:78px; border-radius:50%;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--ic) 92%, #fff);
  box-shadow: 0 10px 28px color-mix(in oklab, var(--ic) 28%, transparent),
              0 0 0 1px color-mix(in oklab, var(--ic) 22%, #e7edf7) inset;
}
#proceso-registro .step__icon svg{ width:34px; height:34px; color:#fff }
#proceso-registro .step__title{ margin:0; font: 700 1.15rem/1.2 'Poppins', system-ui }
#proceso-registro .step__desc{ margin:0; color:#3a5164; font-size:.98rem; max-width:36ch }
/* Flechas del carrusel SIEMPRE encima y clicables */
#proceso-registro .carousel__viewport { position: relative; }
#proceso-registro .carousel__nav{
  z-index: 999 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
/* ===== VISTA DE DETALLE: Layout de 2 columnas ===== */
/* Solo mostrar el detalle cuando NO esté hidden */
#cardDetailView:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* En desktop: 2 columnas (contenido principal | requisitos) */
@media (min-width: 768px) {
  #cardDetailView {
    grid-template-columns: 1fr 340px;
    gap: 24px;
  }
}

/* El botón "Volver" ocupa todo el ancho */
#dvBack {
  grid-column: 1 / -1;
}

/* Hero del detalle */
.dv-hero {
  display: grid;
  gap: 0.4rem;
  padding: 8px 0 6px;
}

/* Meta (Dependencia, Costo, etc.) */
.dv-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 4px;
}

@media (min-width: 640px) {
  .dv-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* TOP BAR CON ELNACE */
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}

.topbar__brand:hover {
  opacity: .9;
}

.topbar__brand-text {
  font-weight: 600;
}

/* Aseguramos que la topbar siempre quede arriba */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Sidebar fija solo en pantallas grandes */
@media (min-width: 960px) {
  .sidebar {
    position: sticky !important;
    top: 120px;           /* ajusta: 100–140px según veas */
    align-self: flex-start;
    height: fit-content;
    z-index: 5;           /* MÁS BAJO que la topbar */
  }
}


/* ===== FOOTER ===== */

.gd-footer {
  background: #f8fafc;
  padding: 3rem 1.5rem 1rem;
  margin-top: 4rem;
  border-top: 1px solid #e5e9f0;
  font-family: 'Poppins', sans-serif;
}

/* Contenedor interno */
.gd-footer__inner {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
}

/* Branding columna */
.gd-footer__brand {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.gd-footer__logo {
  width: 130px;
  height: auto;
}

/* Títulos */
.gd-footer__col h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .75rem;
  color: #0b3b60;
}

/* Listas */
.gd-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gd-footer__col ul li {
  margin-bottom: .5rem;
}

.gd-footer__col a {
  color: #415064;
  text-decoration: none;
  opacity: .95;
  transition: .2s ease;
}

.gd-footer__col a:hover {
  color: #0076aa;
  text-decoration: underline;
}

/* AVISO FINAL */
.gd-footer__bottom {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: .85rem;
  color: #6b7280;
  border-top: 1px solid #e5e9f0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .gd-footer__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}
/* Icono de paloma en el botón de accesibilidad */
.tb-link--a11y {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tb-link--a11y .a11y-bird {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* Opción hover suave */
.tb-link--a11y:hover .a11y-bird {
  transform: scale(1.07);
  transition: transform .2s ease;
}
/* Aseguramos niveles de capa coherentes */
.topbar {
  z-index: 1000;
  position: sticky;
}

/* Scrim del panel de accesibilidad (fondo oscuro) */
.a11y-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1190;          /* debajo del panel, encima de todo lo demás */
}

/* Panel de accesibilidad flotante, siempre sobre la topbar */
.a11y-panel {
  position: fixed !important;
  top: 72px !important;   /* ajusta si tu topbar es más alta o más baja */
  right: 1.5rem;
  max-width: 420px;
  width: calc(100% - 3rem);
  z-index: 1300 !important;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;          /* espacio entre puntos y logo */
  text-decoration: none;
}

/* El logo en la topbar */
.topbar__brand-logo {
  height: 70px;         /* puedes subir/bajar el tamaño */
  width: auto;
  display: block;
}

/* Opcional: en pantallas muy pequeñas, ocultar los puntitos para que no se vea saturado */
@media (max-width: 480px) {
  .topbar__dot,
  .topbar__brand .brand__dot {
    display: none;
  }

  .topbar__brand-logo {
    height: 28px;
  }
}

/* ============================
   ESTILO MEJORADO DEL MODAL
   ============================ */

.nice-modal__inner {
  background: #ffffff !important;
  color: #0f172a;
  padding: 32px 38px;
  border-radius: 28px;
  width: min(520px, 92vw);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.10);
  animation: modalPop .25s ease;
}

/* Animación suave */
@keyframes modalPop {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Botón cerrar */
.nice-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all .15s ease;
}

.nice-modal__close:hover {
  background: #f1f5f9;
  transform: scale(1.08);
}

/* Badge de fecha */
.nice-date-badge {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  width: 64px;
  padding: 10px 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #0b3b60 0%, #14527f 100%);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 6px 14px rgba(13, 38, 76, 0.25);
}

.nice-date-badge .d-day {
  font-size: 1.6rem;
  line-height: 1;
}

.nice-date-badge .d-mon {
  font-size: .85rem;
  opacity: .9;
}

/* Header */
.nice-modal__header {
  display: grid;
  gap: 10px;
}

.nice-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 2px 0 4px;
  color: #0b3b60;
}

.nice-kicker {
  color: #64748b;
  font-size: .84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.nice-where {
  font-size: 1rem;
  color: #334155;
  font-weight: 600;
}

.nice-when {
  font-size: .95rem;
  color: #475569;
}

.nice-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0b3b60;
  margin-top: 24px;
}

/* Descripción */
.nice-body {
  font-size: 1rem;
  line-height: 1.55;
  color: #1f2937;
  margin-top: 6px;
}

/* Footer - CTA */
.nice-modal__footer {
  margin-top: 26px;
}

.nice-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: #0b3b60;
  color: white !important;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 8px 20px rgba(11, 59, 96, .25);
  transition: background .18s, transform .18s;
}

.nice-cta-btn:hover {
  background: #0c4673;
  transform: translateY(-1px);
}

.nice-cta-btn:active {
  transform: translateY(1px);
  background: #083555;
}

/* Separadores suaves */
.nice-modal__body {
  border-top: 1px solid #e2e8f0;
  padding-top: 20px;
}

/* ============================
   Ajustes finos del modal
   ============================ */

.nice-modal__inner {
  position: relative;          /* para posicionar la X dentro */
  padding: 40px 42px 30px;     /* un poco más de aire arriba para no chocar con la X */
}

/* Botón cerrar arriba a la derecha */
.nice-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  margin: 0;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: all .15s ease;
}

.nice-modal__close:hover {
  background: #e2e8f0;
  transform: translateY(-1px) scale(1.05);
}

.nice-modal__close:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

/* Un pelín de espacio extra del header respecto al borde superior */
.nice-modal__header {
  margin-top: 6px;
}

/* Nuevo footer sin botón */
.nice-modal__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.nice-footer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: #4b5563;
}

.nice-footer-icon {
  font-size: 1.2rem;
  background: #f1f5f9;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.a11y-fab {
  position: fixed;
  top: 50%;             /* A la mitad vertical */
  right: 0;             /* Pegado al borde derecho */
  transform: translateY(-50%); /* Ajuste matemático para centrarlo exacto */
  z-index: 9999;
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  background-color: var(--pink, #e91e63); 
  color: #ffffff;
  
  border: none;
  /* Redondeamos solo las esquinas de la izquierda */
  border-radius: 30px 0 0 30px; 
  padding: 12px 16px 12px 20px; /* Un poco más de espacio a la izq */
  
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem; /* Un pelín más chico para que no sea enorme */
  
  box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.2); /* Sombra hacia la izquierda */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Efecto Hover: Que salga un poquito más */
.a11y-fab:hover {
  padding-right: 25px; /* Se estira hacia la izquierda visualmente */
  filter: brightness(1.1);
}

.a11y-fab__icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* IMPORTANTE: En celular, el texto estorba mucho a media pantalla.
   Lo mejor es dejar solo el ícono. */
@media (max-width: 768px) {
  .a11y-fab__label {
    display: none;
  }
  .a11y-fab {
    padding: 12px 10px 12px 14px; /* Ajuste para que sea casi cuadrado */
  }
}
/* Cuando el atributo aria-expanded sea "true" (panel abierto), ocultamos el botón */
.a11y-fab[aria-expanded="true"] {
  opacity: 0;              /* Se vuelve transparente */
  visibility: hidden;      /* No se puede ver ni hacer clic */
  transform: scale(0.8);   /* Se hace chiquito al desaparecer */
  pointer-events: none;    /* Asegura que no estorbe a los clics */
}
/* Contenedor del pie del panel (para darle aire) */
.a11y-foot {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #eee; /* Una línea sutil para separar */
  display: flex;
  justify-content: center;
}

/* Diseño del botón Restablecer */
.a11y-reset {
  width: 100%;             /* Que ocupe todo el ancho disponible */
  background-color: transparent;
  border: 2px solid var(--pink, #e91e63); /* Borde rosa */
  color: var(--pink, #e91e63);            /* Letras rosas */
  
  padding: 10px 20px;
  border-radius: 8px;      /* Bordes redondeados pero no circular */
  
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase; /* Opcional: letras en mayúscula */
  letter-spacing: 0.5px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto al pasar el mouse (se pone rosa sólido) */
.a11y-reset:hover {
  background-color: var(--pink, #e91e63);
  color: #ffffff;          /* Letras blancas */
  box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
}

/* Efecto al hacer clic (se hunde un poco) */
.a11y-reset:active {
  transform: scale(0.98);
}
/* 1. CONTENEDOR (Alineación y Espacio) */
.topbar__links {
  display: flex;
  align-items: center;
  gap: 15px; /* Espacio cómodo entre cada opción */
}

/* 2. ENLACES SECUNDARIOS (Sin borde, fondo transparente) */
.tb-link {
  color: #333;             /* Gris oscuro elegante */
  text-decoration: none;
  font-weight: 500;        /* Grosor medio (semi-bold) */
  font-size: 14px;         /* Tamaño legible */
  text-align: center;
  
  background-color: transparent; /* ¡Aquí quitamos el fondo! */
  border: none;                  /* ¡Aquí quitamos el borde! */
  
  padding: 8px 16px;       /* Mantenemos el área de clic amplia */
  border-radius: 8px;      /* Bordes redondeados para el efecto hover */
  transition: background-color 0.2s ease, color 0.2s ease;
  
  white-space: nowrap;     /* Obligamos a que queden en una sola línea */
}

/* 3. EFECTO HOVER (Al pasar el mouse por los enlaces limpios) */
.tb-link:hover {
  /* Cambio 1: Fondo más visible (un azul muy bajito en vez de gris pálido) */
  background-color: rgba(15, 60, 95, 0.15); 
  
  /* Cambio 2: El texto se pone del color exacto de tu marca */
  color: #0f3c5f; 
  
  /* Cambio 3 (Opcional): Un borde sutil simulado para dar fuerza */
  box-shadow: 0 0 0 1px rgba(15, 60, 95, 0.1); 
  
  cursor: pointer;
}

/* 4. BOTÓN PRINCIPAL (El Azul - Este SÍ mantiene su forma de botón) */
.tb-link[data-variant="primary"] {
  background-color: #0f3c5f; /* Azul fuerte */
  color: #ffffff;            /* Texto blanco */
  font-weight: 600;
  
  /* Forma de cápsula */
  border-radius: 50px;       
  padding: 10px 24px;        /* Un poco más grande para destacar */
  
  /* Reset del hover para este botón específico */
  box-shadow: 0 4px 6px rgba(15, 60, 95, 0.2); /* Sombra suave */
  white-space: normal;       /* Permitimos 2 líneas si es necesario */
  max-width: 220px;          
  line-height: 1.2;
}

/* Hover específico para el botón azul */
.tb-link[data-variant="primary"]:hover {
  background-color: #092a45; /* Se oscurece un poco al pasar el mouse */
  color: #fff;
  transform: translateY(-1px); /* Efecto sutil de elevación */
}
/* --- ESTILOS CORREGIDOS PARA DROPDOWNS --- */

/* Aseguramos que la barra de navegación no corte el contenido */
.topbar__links {
  overflow: visible !important; /* CRUCIAL: Permite que el menú salga del contenedor */
  z-index: 1000;                /* Asegura que la barra esté sobre el contenido */
  position: relative;           
}

/* 1. Contenedor del menú */
.tb-dropdown {
  position: relative; 
  display: inline-block;
}

/* 2. El cuadro del menú (Ahora con z-index alto) */
.tb-dropdown-content {
  display: none;
  position: absolute;
  top: 100%; 
  left: 0;
  
  /* ESTÉTICA */
  background-color: #ffffff;
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra más fuerte para que destaque del fondo */
  border-radius: 8px;
  padding: 8px 0;
  margin-top: 8px; 
  border: 1px solid rgba(0,0,0,0.05); /* Borde sutil */
  
  /* SOLUCIÓN AL PROBLEMA DE "ATRÁS DE LA PANTALLA" */
  z-index: 99999 !important; /* Fuerza a que esté encima de TODO */
}

/* 3. Mostrar menú al pasar el mouse */
.tb-dropdown:hover .tb-dropdown-content {
  display: block;
}

/* 4. Estilo de los enlaces DENTRO del menú */
.tb-dropdown-content a {
  color: #333;
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* Hover interno del menú */
.tb-dropdown-content a:hover {
  background-color: rgba(15, 60, 95, 0.08);
  color: #0f3c5f;
  padding-left: 25px; /* Pequeño desplazamiento a la derecha elegante */
}

/* EXTRA: Mantener el botón principal "activado" mientras se ve el menú */
.tb-dropdown:hover .tb-link {
  background-color: rgba(15, 60, 95, 0.15); 
  color: #0f3c5f;
}
/* --- ESTILOS PARA EL SUB-MENÚ (Nivel 2) --- */

/* 1. Contenedor de la opción que tiene hijos (Documentos) */
.tb-submenu {
  position: relative; /* Para que el hijo se posicione respecto a esto */
}

/* 2. El cuadro oculto del segundo nivel */
.tb-submenu-content {
  display: none;       /* Oculto por defecto */
  position: absolute;
  left: 100%;          /* Lo empuja a la derecha del menú padre */
  top: 0;              /* Lo alinea con la parte superior */
  
  /* Mismo estilo que el menú principal para coherencia */
  background-color: #ffffff;
  min-width: 200px;
  box-shadow: 4px 4px 15px rgba(0,0,0,0.15); 
  border-radius: 8px;
  padding: 8px 0;
  border: 1px solid rgba(0,0,0,0.05);
  margin-left: 5px;    /* Un pequeño espacio de separación */
  z-index: 100000;
}

/* 3. Mostrar el submenú al pasar el mouse sobre "Documentos" */
.tb-submenu:hover .tb-submenu-content {
  display: block;
}

/* 4. Estilo de los enlaces del submenú (hereda estilos, pero por seguridad) */
.tb-submenu-content a {
  padding: 10px 20px;
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

/* Hover específico para el submenú */
.tb-submenu-content a:hover {
  background-color: rgba(15, 60, 95, 0.08);
  color: #0f3c5f;
}
/* === ESTILO BUZÓN REFERENCIA (Dark Button) === */

.buzon-container-ref {
  /* 1. Posicionamiento en tu Grid (IMPORTANTE) */
  grid-column: 1 / -1; /* Ocupa todo el ancho */
  width: 100%;
  box-sizing: border-box;

  /* 2. Caja Blanca / Tarjeta */
  background: #ffffff;
  border: 1px solid #e2e8f0; /* Borde gris muy suave */
  border-radius: 16px; /* Bordes redondeados modernos */
  
  /* 3. Espaciado y Alineación */
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  
  display: flex;
  align-items: center;
  gap: 1.5rem; /* Espacio entre elementos */
  
  /* Sombra muy sutil */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- ICONO IZQUIERDO (Cajita Gris) --- */
.bcr-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  
  /* Color de fondo gris claro (como la imagen) */
  background-color: #f1f5f9; 
  border-radius: 12px;
  flex-shrink: 0; /* Que no se aplaste */
}

.bcr-icon-box svg {
  width: 24px;
  height: 24px;
  stroke: #1e293b; /* Color flecha oscuro */
}

/* --- TEXTOS --- */
.bcr-content {
  flex: 1; /* Ocupa el espacio disponible en medio */
}

.bcr-content h3 {
  margin: 0 0 0.25rem 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #0f172a; /* Color casi negro (Slate 900) */
}

.bcr-content p {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b; /* Gris texto secundario (Slate 500) */
  line-height: 1.5;
}

/* --- BOTÓN DERECHO (Oscuro) --- */
.bcr-btn {
  /* Fondo Oscuro (Dark Navy / Slate) */
  background-color: #1e293b; 
  color: #ffffff;
  
  /* Forma y tamaño */
  padding: 12px 24px;
  border-radius: 8px;
  
  /* Tipografía */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* Evita que el texto se rompa */
  
  transition: all 0.2s ease;
}

.bcr-btn:hover {
  background-color: #0f172a; /* Más oscuro (casi negro) al hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* AJUSTE PARA MÓVIL (Celular) */
@media (max-width: 768px) {
  .buzon-container-ref {
    flex-direction: column; /* Uno debajo del otro */
    text-align: center;
    padding: 1.5rem;
  }
  
  .bcr-icon-box {
    margin-bottom: 0.5rem;
  }
  
  .bcr-btn {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
  }
}

/* === WIDGET: ACCESOS RÁPIDOS (ESTILO LIMPIO & ROSA) === */

.quick-access-widget {
  /* 1. FONDO BLANCO EXACTO (Igual que las otras tarjetas) */
  background-color: #ffffff; 
  
  /* Sombra y bordes idénticos a tu sitio */
  border-radius: 12px; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid #f0f2f5; 
  
  padding: 24px; 
  margin-bottom: 24px;
  font-family: 'Poppins', sans-serif;
}

/* Título */
.qa-title {
  color: #0B3B60; /* Tu Azul Corporativo */
  margin: 0 0 20px 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.qa-grid {
  display: flex;
  flex-wrap: wrap; 
  gap: 10px;
}

/* === BOTONES (CHIPS) === */
.qa-chip {
  flex: 1 1 auto; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  /* Fondo gris MUY pálido para diferenciarlo del fondo blanco */
  background-color: #f1f5f9; 
  color: #334155; /* Texto gris oscuro */
  border: 1px solid transparent; /* Reserva espacio para el borde */
  
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  
  padding: 10px 16px;
  border-radius: 50px; /* Estilo Píldora */
  transition: all 0.2s ease;
}

.qa-chip svg {
  width: 16px;
  height: 16px;
  color: #0B3B60; /* Iconos Azules siempre */
}

/* HOVER: Se vuelve de tu AZUL CORPORATIVO */
.qa-chip:hover {
  background-color: #0B3B60;
  color: #ffffff; /* Texto blanco */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(11, 59, 96, 0.2);
}

.qa-chip:hover svg {
  color: #ffffff; /* Icono blanco al hover */
}

/* === BOTÓN DESTACADO (REPORTES) -> AHORA EN ROSA === */
.qa-chip.qa-accent {
  /* El ROSA que usas en el botón flotante */
  background-color: #ec4899; 
  /* O puedes probar este tono más oscuro si prefieres: #be185d */
  
  color: #ffffff;
  font-weight: 700;
  width: 100%; /* Ocupa toda la línea final */
}

.qa-chip.qa-accent svg {
  color: #ffffff;
}

.qa-chip.qa-accent:hover {
  background-color: #db2777; /* Rosa más intenso al hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
#derechos-participar { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }
.searchbar { position: relative; }

.search__clear{
  display: grid;
  place-items: center;
  position: absolute;
  right: 118px; /* ajusta según el ancho del botón Buscar */
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.35);
  color: rgba(255,255,255,.85);
  cursor: pointer;
}

.search__clear:hover{ background: rgba(10,12,18,.55); }
/* 🔥 Oculta la X nativa del input type="search" */

/* Chrome, Safari, Edge */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Firefox (por si acaso) */
input[type="search"]::-moz-search-cancel-button {
  display: none;
}

/* IE/Edge legacy */
input[type="search"]::-ms-clear {
  display: none;
}
/* 🔥 Oculta el botón X cuando el input está vacío */
#btnClear {
  position: absolute;
  z-index: 2147483649 !important;
  pointer-events: auto !important;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Oculta cuando el input está vacío */
#q:placeholder-shown ~ #btnClear {
  opacity: 0;
  pointer-events: none;
}
#btnClear{ position:absolute; z-index:50; pointer-events:auto; }
/* CONTENEDOR DEL BUSCADOR */
.searchbar,
.search {
  position: relative;
  z-index: 20; /* crea stacking context */
}

/* INPUT */
.searchbar input,
.search input {
  position: relative;
  z-index: 21;
}

/* BOTÓN BUSCAR */
#btnBuscar {
  position: relative;
  z-index: 30; /* MÁS ALTO */
  pointer-events: auto;
}

/* BOTÓN CLEAR (X) */
#btnClear {
  position: absolute;
  z-index: 31; /* el MÁS alto */
  pointer-events: auto;
}

/* DROPDOWN PREDICTIVO */
.predictive {
  z-index: 15 !important; /* ABAJO de los botones */
}

/* BACKDROP DEL PREDICTIVO */
.predictive-backdrop {
  z-index: 10 !important;
}
.searchbar{ position: relative; z-index: 50; }
#btnBuscar{ position: relative; z-index: 60; }
#btnClear{ position: absolute; z-index: 70; pointer-events:auto; }
.predictive{ z-index: 15 !important; }
.predictive-backdrop{ z-index: 10 !important; }

/* Widget Buzón: Clean & Bold */
.buzon-clean-bold {
    background: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 0 !important; /* El padding va en el inner */
    position: relative;
    overflow: hidden;
    /* Sombra suave tipo "Glow" */
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.08) !important;
    display: flex;
}

/* Acento lateral rosa para dar identidad */
.bcb-accent {
    width: 6px;
    background: #df1783; /* Tu rosa institucional */
    flex-shrink: 0;
}

.bcb-inner {
    padding: 25px;
    width: 100%;
}

.bcb-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.bcb-icon {
    color: #003366;
    background: #f4f7fa;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bcb-titles h3 {
    margin: 0 !important;
    font-size: 1.2rem !important;
    color: #003366 !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.bcb-titles span {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #778899;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bcb-inner p {
    font-size: 0.9rem !important;
    color: #556677 !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
}

/* Botón Sólido - Se ve mucho más pro que el de borde finito */
.bcb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #df1783 !important; /* Rosa sólido */
    color: white !important;
    text-decoration: none !important;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(223, 23, 131, 0.2);
}

.bcb-button:hover {
    background: #c01570 !important; /* Un rosa un poco más oscuro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(223, 23, 131, 0.3);
}

.bcb-button svg {
    transition: transform 0.3s ease;
}

.bcb-button:hover svg {
    transform: translateX(5px);
}
/* --- ESTADOS DEL DRAWER --- */
.topbar__drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: #fff;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  /* Oculto por defecto a la derecha */
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}

.topbar__drawer.is-active {
  transform: translateX(0);
}

/* El fondo oscuro atrás del menú */
.topbar__scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1999;
}

/* --- ESTILOS DEL CONTENIDO DENTRO DEL DRAWER --- */
.drawer__nav {
  padding: 20px;
  overflow-y: auto;
}

/* Ajuste para los dropdowns clonados en móvil */
.drawer__nav .tb-dropdown-content {
  display: none; /* Oculto por defecto */
  padding-left: 15px;
  background: #f9f9f9;
  border-left: 2px solid var(--info-blue);
}

.drawer__nav .tb-dropdown.is-open .tb-dropdown-content {
  display: block; /* Se muestra al hacer click */
}

.drawer__nav .tb-link {
  display: block;
  padding: 12px 0;
  color: var(--info-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}