/* =========================================================
   PASE · Gestión de trámites migratorios
   Sistema web de escritorio (1440 / 1280)
   Petróleo #1F5C63 · Ámbar #D9962B · Manrope + Inter
   ========================================================= */

:root{
  --brand:#1F5C63;
  --brand-600:#276B73;
  --brand-700:#174A50;
  --brand-800:#12393E;
  --brand-900:#0E2E32;
  --brand-50:#EAF2F2;
  --brand-100:#D9E8E8;

  --amber:#D9962B;
  --amber-700:#A9711A;
  --amber-50:#FCF3E3;

  --ink:#132323;
  --ink-2:#41514F;
  --muted:#788886;
  --muted-2:#9AA8A6;

  --bg:#F5F7F7;
  --surface:#FFFFFF;
  --surface-2:#FAFCFC;
  --line:#E3EAE9;
  --line-2:#EEF2F1;

  --ok:#2C6B53;
  --ok-50:#E9F3EE;
  --danger:#A33A26;
  --danger-50:#FBEDE9;
  --slate:#41546B;
  --slate-50:#EEF1F5;

  --sidebar:clamp(254px, 16rem, 340px);
  --radius:14px;
  --radius-sm:9px;
  --font-head:"Manrope",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:0.84375rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,h5{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--brand-100);color:var(--brand-900)}

/* ---------- iconos ---------- */
.ph{font-size:1.125rem;line-height:1;vertical-align:-3px}
.ph-sm{font-size:0.9375rem}
.ph-lg{font-size:1.375rem}
.ph-xl{font-size:1.75rem}

/* ---------- utilidades ---------- */
.muted{color:var(--muted)}
.text-brand{color:var(--brand)}
.text-amber{color:var(--amber-700)}
.ink-2{color:var(--ink-2)}
.tiny{font-size:0.71875rem}
.small{font-size:0.78125rem}
.strong{font-weight:600}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.right{text-align:right}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stack-8>*+*{margin-top:8px}
.stack-12>*+*{margin-top:12px}
.stack-16>*+*{margin-top:16px}
.sep{height:1px;background:var(--line-2);margin:14px 0}
.hairline{border-top:1px solid var(--line-2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.f-15{width:15%}.f-20{width:20%}.f-25{width:25%}.f-30{width:30%}.f-35{width:35%}
.f-40{width:40%}.f-45{width:45%}.f-50{width:50%}.f-55{width:55%}.f-60{width:60%}
.f-65{width:65%}.f-70{width:70%}.f-75{width:75%}.f-80{width:80%}.f-90{width:90%}

/* =========================================================
   BARRA LATERAL
   ========================================================= */
.sidebar{
  position:fixed;inset:0 auto 0 0;
  width:var(--sidebar);
  background:var(--brand-900);
  color:rgba(255,255,255,.66);
  display:flex;flex-direction:column;
  z-index:1040;
  border-right:1px solid rgba(0,0,0,.18);
}
.brand{
  display:flex;align-items:center;gap:11px;
  padding:20px 20px 18px;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:var(--amber);
  color:#231803;
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:1rem;
  letter-spacing:-.03em;
  flex:none;
}
.brand-name{
  font-family:var(--font-head);font-weight:700;font-size:0.96875rem;
  color:#fff;letter-spacing:-.015em;line-height:1.15;
}
.brand-sub{font-size:0.65625rem;color:rgba(255,255,255,.46);letter-spacing:.02em;margin-top:1px}

.side-scroll{flex:1;overflow-y:auto;padding:4px 12px 8px}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}

.nav-label{
  font-size:0.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
  padding:16px 10px 7px;
}
.nav-link{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:var(--radius-sm);
  font-size:0.84375rem;font-weight:500;color:rgba(255,255,255,.72);
  position:relative;transition:background .12s ease,color .12s ease;
}
.nav-link+.nav-link{margin-top:1px}
.nav-link .ph{font-size:1.125rem;color:rgba(255,255,255,.52);flex:none}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-link:hover .ph{color:rgba(255,255,255,.8)}
.nav-link.active{background:rgba(255,255,255,.10);color:#fff;font-weight:600}
.nav-link.active .ph{color:#fff}
.nav-link.active:before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--amber);
}
.nav-count{
  margin-left:auto;font-size:0.6875rem;font-weight:600;
  background:rgba(255,255,255,.12);color:#fff;
  padding:1px 7px;border-radius:99px;font-variant-numeric:tabular-nums;
}
.nav-count.warn{background:var(--amber);color:#2A1D04}
.nav-sub{padding-left:39px;font-size:0.78125rem;color:rgba(255,255,255,.5)}
.nav-sub .nav-link{padding:6px 10px}

.side-foot{
  padding:12px;border-top:1px solid rgba(255,255,255,.08);
}
.side-user{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);
}
.side-user:hover{background:rgba(255,255,255,.06)}
.side-user .avatar{width:32px;height:32px;font-size:0.71875rem;background:#27585E;color:#fff}
.side-user-name{font-size:0.78125rem;font-weight:600;color:#fff;line-height:1.2}
.side-user-role{font-size:0.65625rem;color:rgba(255,255,255,.45)}

/* =========================================================
   ESTRUCTURA
   ========================================================= */
.app{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:1030;
  height:62px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:18px;
  padding:0 26px;
}
.search-global{
  display:flex;align-items:center;gap:9px;
  background:#F1F4F4;
  border:1px solid transparent;
  border-radius:9px;
  height:36px;padding:0 11px;
  width:400px;max-width:42vw;
  color:var(--muted);
}
.search-global:focus-within{background:var(--surface);border-color:var(--brand-100);box-shadow:0 0 0 3px rgba(31,92,99,.07)}
.search-global .ph{font-size:1rem;color:var(--muted-2)}
.search-global input{
  border:0;background:none;outline:none;flex:1;min-width:0;
  font-size:0.8125rem;color:var(--ink);
}
.search-global input::placeholder{color:var(--muted-2)}
.search-global kbd{
  font-family:var(--font-body);font-size:0.65625rem;color:var(--muted);
  border:1px solid var(--line);background:var(--surface);border-radius:5px;
  padding:1px 5px;line-height:1.5;
}
.topbar-spacer{flex:1}
.icon-btn{
  position:relative;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;color:var(--ink-2);background:none;border:0;cursor:pointer;
}
.icon-btn:hover{background:#F1F4F4;color:var(--ink)}
.icon-btn .ph{font-size:1.1875rem}
.icon-dot:after{
  content:"";position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 2px var(--surface);
}
.topbar-sep{width:1px;height:26px;background:var(--line)}
.user-chip{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 4px;border-radius:9px;border:0;background:none;cursor:pointer;white-space:nowrap}
.user-chip:hover{background:#F1F4F4}
.user-chip .avatar{width:30px;height:30px;font-size:0.6875rem}
.user-chip-name{font-size:0.78125rem;font-weight:600;line-height:1.15;text-align:left}
.user-chip-role{font-size:0.65625rem;color:var(--muted);line-height:1.2;text-align:left}
.user-chip .ph{font-size:0.8125rem;color:var(--muted)}

.page{padding:22px 14px 46px;flex:1}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.crumb{font-size:0.71875rem;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.crumb a:hover{color:var(--brand)}
.crumb .ph{font-size:0.6875rem;color:var(--muted-2)}
.page-title{
  font-family:var(--font-head);font-size:1.5625rem;font-weight:700;
  letter-spacing:-.025em;line-height:1.15;color:var(--ink);
}
.page-sub{font-size:0.8125rem;color:var(--muted);margin-top:4px;max-width:720px}
.page-actions{display:flex;align-items:center;gap:8px;flex:none;padding-top:6px}

/* =========================================================
   BOTONES
   ========================================================= */
.btn-p,.btn-g,.btn-a,.btn-d,.btn-q{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 13px;border-radius:8px;
  font-size:0.8125rem;font-weight:600;letter-spacing:-.005em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.btn-p{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-p:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.btn-g{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.btn-g:hover{background:var(--surface-2);border-color:#D3DDDC;color:var(--ink)}
.btn-a{background:var(--amber);color:#2A1D04;border-color:var(--amber)}
.btn-a:hover{background:#C9881F;border-color:#C9881F;color:#2A1D04}
.btn-d{background:var(--surface);color:var(--danger);border-color:#F0D6CF}
.btn-d:hover{background:var(--danger-50)}
.btn-q{background:transparent;color:var(--brand);padding:0 6px;height:28px}
.btn-q:hover{background:var(--brand-50)}
.btn-sm{height:29px;font-size:0.75rem;padding:0 10px;gap:5px}
.btn-sm .ph{font-size:0.875rem}
.btn-block{width:100%;justify-content:center}
.btn-p .ph,.btn-g .ph,.btn-a .ph,.btn-d .ph,.btn-q .ph{font-size:0.9375rem}
.link-more{font-size:0.78125rem;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:4px}
.link-more:hover{color:var(--brand-700)}
.link-more .ph{font-size:0.75rem}

/* =========================================================
   PANELES
   ========================================================= */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.panel+.panel{margin-top:16px}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--line-2);
  min-height:52px;
}
.panel-head.plain{border-bottom:0;padding-bottom:0}
.panel-title{
  font-family:var(--font-head);font-size:0.90625rem;font-weight:700;letter-spacing:-.012em;
  display:flex;align-items:center;gap:8px;
}
.panel-title .ph{font-size:1rem;color:var(--muted-2)}
.panel-sub{font-size:0.75rem;color:var(--muted);margin-top:2px}
.panel-body{padding:16px 18px}
.panel-body.tight{padding:10px 0}
.panel-foot{padding:11px 18px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.62fr) minmax(320px,.92fr)}
.g-dash{grid-template-columns:minmax(0,1fr) 352px}
.g-side{grid-template-columns:minmax(0,1fr) 340px}
.g-side-l{grid-template-columns:300px minmax(0,1fr)}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* =========================================================
   KPI
   ========================================================= */
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px 14px;position:relative;min-height:112px;
  display:flex;flex-direction:column;
}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi-label{font-size:0.78125rem;color:var(--muted);font-weight:500}
.kpi-ic{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand);flex:none;
}
.kpi-ic .ph{font-size:1rem}
.kpi-ic.amber{background:var(--amber-50);color:var(--amber-700)}
.kpi-ic.ok{background:var(--ok-50);color:var(--ok)}
.kpi-ic.slate{background:var(--slate-50);color:var(--slate)}
.kpi-value{
  font-family:var(--font-head);font-size:1.8125rem;font-weight:700;letter-spacing:-.035em;
  line-height:1.05;margin-top:auto;padding-top:10px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kpi-value small{font-size:0.875rem;font-weight:600;letter-spacing:-.01em;color:var(--muted);margin-left:4px}
.kpi-meta{font-size:0.71875rem;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:5px}
.kpi-meta .ph{font-size:0.75rem}
.kpi-meta.up{color:var(--ok)}
.kpi-meta.warn{color:var(--amber-700)}
.kpi.warn-card{background:#FFFCF6;border-color:#EEE1C8}
.kpi.brand-card{background:var(--surface-2);border-color:#DDE8E7}

/* =========================================================
   TABLAS
   ========================================================= */
/* anchos de columna para tablas */
.colw-6{width:6%}.colw-8{width:8%}.colw-10{width:10%}.colw-12{width:12%}.colw-13{width:13%}
.colw-14{width:14%}.colw-15{width:15%}.colw-16{width:16%}.colw-18{width:18%}.colw-20{width:20%}
.colw-22{width:22%}.colw-23{width:23%}.colw-25{width:25%}.colw-26{width:26%}.colw-27{width:27%}
.colw-28{width:28%}.colw-30{width:30%}.colw-33{width:33%}.colw-35{width:35%}.colw-40{width:40%}
.table-wrap{width:100%;overflow-x:auto}
table.app-table{width:100%;border-collapse:separate;border-spacing:0;font-size:0.8125rem}
.app-table thead th{
  text-align:left;font-size:0.71875rem;font-weight:600;color:var(--muted);
  padding:8px 12px;background:#FBFCFC;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.app-table thead th:first-child{padding-left:18px}
.app-table thead th:last-child{padding-right:18px}
.app-table tbody td{
  padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink-2);
}
.app-table tbody td:first-child{padding-left:18px}
.app-table tbody td:last-child{padding-right:18px}
.app-table tbody tr:last-child td{border-bottom:0}
.app-table tbody tr:hover td{background:var(--surface-2)}
.app-table .cell-strong{color:var(--ink);font-weight:600}
.app-table .cell-strong a:hover{color:var(--brand)}
.app-table td.num,.app-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.app-table tr.is-selected td{background:var(--brand-50)}
.app-table tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.app-table .row-sub{font-size:0.71875rem;color:var(--muted);margin-top:1px}
.app-table .cell-actions{width:44px;text-align:right}

.cell-user{display:flex;align-items:center;gap:10px;min-width:0}
.cell-user .avatar{flex:none}
.cell-user-name{font-size:0.8125rem;font-weight:600;color:var(--ink);line-height:1.25;display:flex;align-items:center;gap:6px}
.cell-user-meta{font-size:0.71875rem;color:var(--muted);line-height:1.3}

.avatar{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:0.71875rem;
  letter-spacing:.01em;color:#fff;flex:none;
}
.av-1{background:#3E6F76}
.av-2{background:#6E7A4B}
.av-3{background:#8A5F4A}
.av-4{background:#4C5F84}
.av-5{background:#7A5A74}
.av-6{background:#5C6E6C}
.avatar-lg{width:56px;height:56px;font-size:1.1875rem;border-radius:16px}
.avatar-sm{width:26px;height:26px;font-size:0.625rem}

.flag{font-size:0.875rem;line-height:1;filter:saturate(.92)}
.flag-sm{font-size:0.75rem}
.flag-img{
  width:16px;height:12px;border-radius:2px;object-fit:cover;flex:none;
  box-shadow:inset 0 0 0 1px rgba(10,30,30,.14), 0 0 0 1px rgba(10,30,30,.05);
}

/* ---------- estados ---------- */
.est{
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 8px;border-radius:99px;
  font-size:0.71875rem;font-weight:600;white-space:nowrap;letter-spacing:-.005em;
}
.est:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.est-vencido{background:var(--danger-50);color:var(--danger)}
.est-porvencer{background:var(--amber-50);color:var(--amber-700)}
.est-proceso{background:var(--brand-50);color:var(--brand-700)}
.est-cita{background:var(--slate-50);color:var(--slate)}
.est-listo{background:var(--ok-50);color:var(--ok)}
.est-entregado{background:#F0F3F3;color:#5E6E6C}
.est-borrador{background:#F3F4F4;color:#7A8887}
.est-pagado{background:var(--ok-50);color:var(--ok)}
.est-nopago{background:var(--danger-50);color:var(--danger)}
.est-parcial{background:var(--amber-50);color:var(--amber-700)}
.est-observado{background:#FDF6E8;color:#8A5B12;box-shadow:inset 0 0 0 1px #EFDCB8}

.tag{
  display:inline-flex;align-items:center;gap:4px;
  height:21px;padding:0 7px;border-radius:6px;
  font-size:0.6875rem;font-weight:500;
  background:#F1F4F4;color:var(--ink-2);white-space:nowrap;
}
.tag-brand{background:var(--brand-50);color:var(--brand-700)}
.tag-amber{background:var(--amber-50);color:var(--amber-700)}
.tag-line{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.tag .ph{font-size:0.75rem}

/* =========================================================
   HERRAMIENTAS / FILTROS
   ========================================================= */
.toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line-2);background:var(--surface);
}
.toolbar .spacer{flex:1}
.toolbar .input-icon{width:250px;flex:none}
.toolbar .select{max-width:186px}
.input,.select{
  height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  font-family:var(--font-body);font-size:0.8125rem;color:var(--ink);
  padding:0 10px;outline:none;min-width:0;
}
.input:focus,.select:focus{border-color:var(--brand-100);box-shadow:0 0 0 3px rgba(31,92,99,.08)}
.input::placeholder{color:var(--muted-2)}
.input-icon{position:relative;display:flex;align-items:center}
.input-icon .ph{position:absolute;left:10px;font-size:0.9375rem;color:var(--muted-2);pointer-events:none}
.input-icon .input{padding-left:31px;width:100%}
.select{
  appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23788886' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.field-label{
  display:block;font-size:0.75rem;font-weight:600;color:var(--ink-2);margin-bottom:5px;
}
.field-label .req{color:var(--danger);margin-left:2px}
.field-hint{font-size:0.71875rem;color:var(--muted);margin-top:5px}
.input-lg{height:40px;font-size:0.84375rem}
textarea.input{height:auto;padding:9px 11px;resize:vertical;line-height:1.5}
.segmented{
  display:inline-flex;background:#F1F4F4;border-radius:9px;padding:2px;gap:2px;
}
.segmented button,.segmented a{
  border:0;background:none;height:28px;padding:0 11px;border-radius:7px;
  font-size:0.78125rem;font-weight:500;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.segmented button.on,.segmented a.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,48,48,.08)}
.segmented .ph{font-size:0.875rem}

.check-pill{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  border:1px solid var(--line);border-radius:7px;font-size:0.78125rem;color:var(--ink-2);background:var(--surface);
}
.check-pill .ph{font-size:0.8125rem;color:var(--muted-2)}
.check-pill.on{border-color:var(--brand-100);background:var(--brand-50);color:var(--brand-700);font-weight:600}
.check-pill.on .ph{color:var(--brand)}

/* ---------- paginación ---------- */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 18px;border-top:1px solid var(--line-2);font-size:0.75rem;color:var(--muted);
}
.pager-btns{display:flex;align-items:center;gap:3px}
.pg{
  min-width:28px;height:28px;padding:0 7px;border-radius:7px;border:1px solid transparent;
  display:inline-grid;place-items:center;font-size:0.75rem;font-weight:500;color:var(--ink-2);background:none;cursor:pointer;
}
.pg:hover{background:#F1F4F4}
.pg.on{background:var(--brand);color:#fff;font-weight:600}
.pg.dis{color:var(--muted-2);cursor:default}
.pg.dis:hover{background:none}

/* =========================================================
   VARIOS
   ========================================================= */
.bar{height:6px;border-radius:99px;background:#EDF1F0;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:var(--brand)}
.bar-fill.amber{background:var(--amber)}
.bar-fill.ok{background:var(--ok)}
.bar-fill.danger{background:var(--danger)}
.bar-sm{height:4px}

.callout{
  display:flex;gap:10px;padding:11px 13px;border-radius:10px;
  background:var(--amber-50);border:1px solid #F2E3C6;color:#6B4B12;font-size:0.78125rem;
}
.callout .ph{font-size:1rem;flex:none;margin-top:1px;color:var(--amber-700)}
.callout.info{background:var(--brand-50);border-color:#D6E5E5;color:var(--brand-800)}
.callout.info .ph{color:var(--brand)}
.callout.danger{background:var(--danger-50);border-color:#F1DAD3;color:#7C2C1B}
.callout.danger .ph{color:var(--danger)}
.callout b{font-weight:600}
.example-tag{
  display:inline-flex;align-items:center;gap:3px;
  font-size:0.625rem;font-weight:600;letter-spacing:0;
  color:var(--amber-700);background:var(--amber-50);border:1px dashed #E7CD9E;
  border-radius:5px;padding:1px 5px;vertical-align:1px;
}

.list-line{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid var(--line-2)}
.list-line:last-child{border-bottom:0}
.list-line:hover{background:var(--surface-2)}
.list-line .ph-lead{font-size:1.0625rem;color:var(--muted-2);flex:none}
.list-line-main{min-width:0;flex:1}
.list-line-title{font-size:0.8rem;font-weight:600;color:var(--ink);line-height:1.3}
.list-line-sub{font-size:0.71875rem;color:var(--muted);line-height:1.35;margin-top:1px}
.list-line-side{flex:none;text-align:right}

.today{
  display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-2);
}
.today:last-child{border-bottom:0;padding-bottom:0}
.today:first-child{padding-top:0}
.today-time{
  font-family:var(--font-head);font-size:0.75rem;font-weight:700;color:var(--brand);
  width:50px;flex:none;padding-top:1px;font-variant-numeric:tabular-nums;line-height:1.3;
}
.today-body{min-width:0;flex:1}
.today-title{font-size:0.8rem;font-weight:600;line-height:1.3}
.today-sub{font-size:0.71875rem;color:var(--muted);margin-top:1px}

/* ---------- pasos ---------- */
.stepper{display:flex;align-items:flex-start;gap:0;padding:4px 0}
.step{flex:1;position:relative;padding-right:12px}
.step-line{position:absolute;top:11px;left:26px;right:0;height:2px;background:var(--line)}
.step.done .step-line{background:var(--brand)}
.step:last-child .step-line{display:none}
.step-dot{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);background:var(--surface);color:var(--muted-2);
  font-size:0.65625rem;font-weight:700;position:relative;z-index:1;
}
.step-dot .ph{font-size:0.75rem}
.step.done .step-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.step.current .step-dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px rgba(31,92,99,.12)}
.step.current .step-dot:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.step-name{font-size:0.71875rem;font-weight:600;color:var(--muted);margin-top:7px;line-height:1.25}
.step.current .step-name{color:var(--brand-700)}
.step.done .step-name{color:var(--ink-2)}
.step-date{font-size:0.65625rem;color:var(--muted-2);margin-top:1px;font-variant-numeric:tabular-nums}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:22px}
.timeline:before{content:"";position:absolute;left:6px;top:6px;bottom:8px;width:1px;background:var(--line)}
.tl-item{position:relative;padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-22px;top:3px;width:13px;height:13px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center;
}
.tl-dot:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted-2)}
.tl-item.done .tl-dot{border-color:var(--brand);background:var(--brand)}
.tl-item.done .tl-dot:after{background:var(--surface)}
.tl-item.warn .tl-dot{border-color:var(--amber);background:var(--amber-50)}
.tl-item.warn .tl-dot:after{background:var(--amber)}
.tl-item.now .tl-dot{border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,92,99,.10)}
.tl-date{font-size:0.6875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-title{font-size:0.8rem;font-weight:600;line-height:1.35;margin-top:1px}
.tl-sub{font-size:0.7375rem;color:var(--muted);margin-top:1px;line-height:1.45}

/* ---------- documentos ---------- */
.doc-tile{
  display:flex;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
}
.doc-tile:hover{border-color:#D3DDDC;background:var(--surface-2)}
.doc-ico{
  width:34px;height:40px;border-radius:6px;flex:none;
  display:grid;place-items:center;background:var(--brand-50);color:var(--brand);
  position:relative;border:1px solid #DCE9E8;
}
.doc-ico .ph{font-size:1.0625rem}
.doc-ico.pdf{background:var(--danger-50);color:var(--danger);border-color:#F1DAD3}
.doc-ico.img{background:var(--slate-50);color:var(--slate);border-color:#DFE5ED}
.doc-name{font-size:0.78125rem;font-weight:600;line-height:1.3;color:var(--ink)}
.doc-meta{font-size:0.6875rem;color:var(--muted);margin-top:2px}
.doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}


.bar-120{width:120px}
/* ---------- tarjetas de documento ---------- */
.doc-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface)}
.doc-card:hover{border-color:#D3DDDC;box-shadow:0 8px 20px -18px rgba(16,48,48,.35)}
.doc-thumb{
  height:88px;display:grid;place-items:center;position:relative;
  background:#F5F8F8;border-bottom:1px solid var(--line-2);color:var(--brand);
}
.doc-thumb .ph{font-size:1.75rem}
.doc-thumb.pdf{background:#FCF6F4;color:#B4472F}
.doc-thumb.img{background:#F4F6FA;color:#41546B}
.doc-type{
  position:absolute;top:8px;left:8px;font-size:0.59375rem;font-weight:700;letter-spacing:.04em;
  background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
}
.doc-card-body{padding:10px 11px 11px}
.doc-card-name{font-size:0.76875rem;font-weight:600;line-height:1.3;color:var(--ink)}
.doc-card-sub{font-size:0.6875rem;color:var(--muted);margin-top:2px}
.doc-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}

/* ---------- checklist ---------- */
.check-list{display:flex;flex-direction:column;gap:1px}
.check-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.check-item:last-child{border-bottom:0}
.check-box{
  width:17px;height:17px;border-radius:5px;border:1.5px solid #CBD6D5;background:var(--surface);
  flex:none;margin-top:1px;display:grid;place-items:center;color:#fff;
}
.check-box .ph{font-size:0.6875rem}
.check-item.on .check-box{background:var(--brand);border-color:var(--brand)}
.check-item.miss .check-box{border-color:var(--amber);background:var(--amber-50)}
.check-item.miss .check-box .ph{color:var(--amber-700)}
.check-text{font-size:0.8rem;line-height:1.4;color:var(--ink-2)}
.check-item.on .check-text{color:var(--muted)}
.check-item.on .check-text s{text-decoration-color:#C8D3D2}
.check-note{font-size:0.6875rem;color:var(--muted);margin-top:1px}

/* ---------- pestañas ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 18px}
.tab{
  padding:10px 12px;font-size:0.8rem;font-weight:500;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand);font-weight:600;border-bottom-color:var(--brand)}
.tab .count{font-size:0.65625rem;background:#F1F4F4;color:var(--muted);border-radius:99px;padding:0 5px;font-weight:600}
.tab.on .count{background:var(--brand-50);color:var(--brand-700)}

/* ---------- calendario ---------- */
.cal{margin:0}
.cal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line-2)}
.cal-head div{
  padding:8px 10px;font-size:0.6875rem;font-weight:600;color:var(--muted);text-align:left;
}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-cell{
  min-height:112px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:7px 8px;position:relative;background:var(--surface);min-width:0;overflow:hidden;
}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell.out{background:#FBFCFC}
.cal-cell.out .cal-num{color:var(--muted-2)}
.cal-num{font-size:0.71875rem;font-weight:600;color:var(--ink-2);display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:6px}
.cal-cell.cal-today .cal-num{background:var(--brand);color:#fff}
.cal-evt{
  display:block;margin-top:4px;font-size:0.65625rem;line-height:1.3;
  padding:2px 5px;border-radius:4px;background:var(--brand-50);color:var(--brand-800);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-evt.amber{background:var(--amber-50);color:#6B4B12}
.cal-evt.red{background:var(--danger-50);color:#7C2C1B}
.cal-evt.slate{background:var(--slate-50);color:var(--slate)}
.cal-evt.more{background:none;color:var(--muted);padding-left:0}

/* ---------- ficha cliente ---------- */
.profile{display:flex;gap:16px;align-items:flex-start}
.profile-name{font-family:var(--font-head);font-size:1.25rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.profile-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:7px;font-size:0.78125rem;color:var(--ink-2)}
.profile-meta span{display:inline-flex;align-items:center;gap:5px}
.profile-meta .ph{font-size:0.875rem;color:var(--muted-2)}
.stat-inline{display:flex;gap:22px;margin-top:14px}
.stat-inline>div{min-width:0}
.stat-inline .v{font-family:var(--font-head);font-size:1rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-inline .l{font-size:0.6875rem;color:var(--muted);margin-top:1px}

.chip-doc{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:var(--surface);font-size:0.7375rem;
}
.chip-doc .ph{font-size:0.875rem;color:var(--muted-2)}
.chip-doc .d{font-weight:600;color:var(--ink)}
.chip-doc.warn{border-color:#F0DEBE;background:#FFFCF5}
.chip-doc.warn .ph{color:var(--amber-700)}

/* ---------- catálogo ---------- */
.cat-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:9px;
  border:1px solid transparent;
}
.cat-item:hover{background:#F8FAFA}
.cat-item.on{background:var(--brand-50);border-color:#D6E5E5}
.cat-item-t{font-size:12.6px;font-weight:600;line-height:1.3;color:var(--ink)}
.cat-item-s{font-size:11px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.cat-ico{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:#F1F4F4;color:var(--ink-2);
}
.cat-ico .ph{font-size:14px}
.cat-item.on .cat-ico{background:var(--surface);color:var(--brand)}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.price-row:last-child{border-bottom:0}
.price-row .k{font-size:0.76875rem;color:var(--muted)}
.price-row .v{font-family:var(--font-head);font-size:0.875rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}


.sticky-col{position:sticky;top:82px}
.border-custom{border:1px solid var(--line);background:#FBFCFC}
.min-w-0{min-width:0}
.input-group .input{border-radius:0 8px 8px 0}
.input-group-text{
  display:flex;align-items:center;padding:0 10px;font-size:0.78125rem;color:var(--muted);
  background:#F5F7F7;border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;
}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr)}
.login-aside{
  background:var(--brand-900);color:#fff;position:relative;overflow:hidden;
  padding:40px 44px;display:flex;flex-direction:column;
}
.login-aside:before{
  content:"";position:absolute;inset:auto -180px -320px auto;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(217,150,43,.07), rgba(217,150,43,0) 60%);
}
.login-brand{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.login-brand .brand-mark{background:var(--amber)}
.login-body{position:relative;z-index:1;margin-top:auto;margin-bottom:auto;max-width:452px;padding:36px 0}
.login-h{
  font-family:var(--font-head);font-size:2.625rem;font-weight:700;letter-spacing:-.04em;line-height:1.1;
}
.login-h em{font-style:normal;color:#8FB4B6}
.login-p{font-size:0.84375rem;color:rgba(255,255,255,.62);margin-top:16px;line-height:1.6;max-width:360px}
.login-mini{
  margin-top:30px;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:rgba(255,255,255,.04);padding:13px 15px;display:flex;gap:26px;
}
.login-mini .v{font-family:var(--font-head);font-size:1.125rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.login-mini .l{font-size:0.65625rem;color:rgba(255,255,255,.5);margin-top:1px}
.login-foot{position:relative;z-index:1;font-size:0.6875rem;color:rgba(255,255,255,.36);line-height:1.6}
.login-main{display:grid;place-items:center;padding:40px 32px;background:var(--surface)}
.login-card{width:100%;max-width:372px}
.login-title{font-family:var(--font-head);font-size:1.4375rem;font-weight:700;letter-spacing:-.028em}
.login-sub{font-size:0.8125rem;color:var(--muted);margin-top:6px;margin-bottom:26px}
.login .field-label{margin-bottom:6px}
.login .input{height:42px}
.login .btn-p{height:42px;justify-content:center;font-size:0.84375rem}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 20px;font-size:0.78125rem}
.login-row a{color:var(--brand);font-weight:600}
.login-check{display:flex;align-items:center;gap:7px;color:var(--ink-2)}
.login-check input{width:15px;height:15px;accent-color:var(--brand)}
.login-alt{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:0.75rem;color:var(--muted);text-align:center;
}

/* =========================================================
   OFF CANVAS
   ========================================================= */
.offcanvas{
  --bs-offcanvas-width:432px;
  border-left:1px solid var(--line)!important;
  box-shadow:-24px 0 48px -32px rgba(16,48,48,.34);
}
.offcanvas-header{
  padding:16px 20px;border-bottom:1px solid var(--line-2);align-items:flex-start;
}
.offcanvas-title{font-family:var(--font-head);font-size:0.96875rem;font-weight:700;letter-spacing:-.015em}
.offcanvas-body{padding:0}
.off-body-pad{padding:16px 20px}
.oc-close{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--muted);flex:none}
.oc-close:hover{background:#F1F4F4;color:var(--ink)}
.oc-close .ph{font-size:0.9375rem}
.oc-block{padding:14px 20px;border-bottom:1px solid var(--line-2)}
.oc-block:last-child{border-bottom:0}
.oc-label{font-size:0.6875rem;font-weight:600;color:var(--muted);margin-bottom:7px}
.oc-footer{
  padding:12px 20px;border-top:1px solid var(--line);background:var(--surface-2);
  display:flex;gap:8px;margin-top:auto;
}
.oc-kv{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:0.78125rem}
.oc-kv .k{color:var(--muted)}
.oc-kv .v{font-weight:500;text-align:right}

/* =========================================================
   PASAJES
   ========================================================= */
.flight-form{display:grid;grid-template-columns:1.1fr 1.1fr .9fr 1.2fr auto;gap:10px;align-items:end}
.flight-form.wide{grid-template-columns:1fr 1fr .85fr .85fr .8fr 1.1fr}
.route{
  display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;letter-spacing:-.01em;
}
.route .iata{font-size:0.9375rem}
.route .arrow{color:var(--muted-2);position:relative;flex:1;height:1px;background:var(--line);min-width:36px}
.route .arrow .ph{position:absolute;right:-3px;top:-8px;font-size:0.8125rem;background:var(--surface);color:var(--muted)}
.browser{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
}
.browser-bar{
  display:flex;align-items:center;gap:8px;padding:8px 12px;background:#F5F7F7;border-bottom:1px solid var(--line);
}
.browser-dots{display:flex;gap:4px}
.browser-dots i{width:7px;height:7px;border-radius:50%;background:#D6DEDD;display:block}
.browser-url{
  flex:1;height:24px;border-radius:6px;background:var(--surface);border:1px solid var(--line);
  font-size:0.6875rem;color:var(--muted);display:flex;align-items:center;padding:0 9px;gap:5px;
}
.browser-url .ph{font-size:0.6875rem}
.site-tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line);background:var(--surface);overflow-x:auto}
.site-tab{
  display:flex;align-items:center;gap:6px;padding:7px 10px;font-size:0.75rem;font-weight:500;color:var(--muted);
  border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;white-space:nowrap;
}
.site-tab.on{background:#F5F7F7;border-color:var(--line);color:var(--ink);font-weight:600;margin-bottom:-1px}
.site-tab .dot-price{font-size:0.6875rem;color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}
.fare{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line-2);
}
.fare:last-child{border-bottom:0}
.fare:hover{background:var(--surface-2)}
.fare-air{width:96px;flex:none;display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:600}
.input-price{width:96px;text-align:right}
.panel-head .input-icon{width:224px}
.bg-av{background:#C8102E}
.bg-la{background:#1B0088}
.bg-cm{background:#003DA5}
.bg-h2{background:#157F55}
.fare-logo{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  font-size:0.5625rem;font-weight:800;color:#fff;font-family:var(--font-head);
}
.fare-times{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums}
.fare-time{font-family:var(--font-head);font-size:0.875rem;font-weight:700;letter-spacing:-.01em}
.fare-place{font-size:0.65625rem;color:var(--muted);text-align:center}
.fare-dur{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:0.65625rem;min-width:74px}
.fare-dur .ln{width:100%;height:1px;background:var(--line);position:relative}
.fare-dur .ln:after{content:"";position:absolute;right:-1px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--muted-2)}
.fare-price{margin-left:auto;text-align:right}
.fare>.tag{min-width:86px;justify-content:center}
.fare-price .p{font-family:var(--font-head);font-size:1rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fare-price .s{font-size:0.65625rem;color:var(--muted)}


/* ---------- panel de detalle lateral fijo ---------- */
.detail-pane{
  position:fixed;top:0;right:0;bottom:0;width:432px;background:var(--surface);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 48px -32px rgba(16,48,48,.34);
  z-index:1045;display:flex;flex-direction:column;overflow-y:auto;
}
body.pane-open .app{margin-right:432px}
body.pane-open .search-global{width:266px}
.pane-head{
  position:sticky;top:0;z-index:2;background:var(--surface);
  padding:16px 20px 14px;border-bottom:1px solid var(--line-2);
}
.pane-kicker{font-size:0.6875rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:3px}
.pane-title{font-family:var(--font-head);font-size:0.96875rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.pane-actions{padding:12px 20px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;gap:8px;margin-top:auto;position:sticky;bottom:0}

/* ---------- catálogo a tres columnas ---------- */
.g-cat{grid-template-columns:232px minmax(0,1fr) 372px}
.cat-nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:12.6px;color:var(--ink-2)}
.cat-nav-item:hover{background:#F8FAFA}
.cat-nav-item.on{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.cat-nav-item .ph{font-size:15px;color:var(--muted-2)}
.cat-nav-item.on .ph{color:var(--brand)}
.cat-nav-item .n{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.cat-nav-item.on .n{color:var(--brand-700)}

/* ---------- switch ---------- */
.switch{width:34px;height:20px;border-radius:99px;background:#D8E0DF;position:relative;flex:none;display:inline-block}
.switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.18);transition:left .15s ease}
.switch.on{background:var(--brand)}
.switch.on:after{left:16px}

/* ---------- dropzone ---------- */
.dropzone{
  border:1.5px dashed #CBD8D7;border-radius:10px;background:var(--surface-2);
  padding:18px 16px;text-align:center;color:var(--muted);font-size:0.75rem;
}
.dropzone .ph{font-size:1.375rem;color:var(--brand);display:block;margin:0 auto 6px}
.dropzone b{color:var(--ink);font-weight:600}

/* ---------- fila de aviso ---------- */
.notice{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.notice:last-child{border-bottom:0}
.notice.unread{background:var(--surface-2)}
.notice-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--brand-50);color:var(--brand)}
.notice-ic .ph{font-size:1rem}
.notice-ic.amber{background:var(--amber-50);color:var(--amber-700)}
.notice-ic.red{background:var(--danger-50);color:var(--danger)}
.notice-ic.slate{background:var(--slate-50);color:var(--slate)}
.notice-ic.ok{background:var(--ok-50);color:var(--ok)}
.notice-main{flex:1;min-width:0}
.notice-t{font-size:0.8rem;font-weight:600;line-height:1.35;color:var(--ink);display:flex;align-items:center;gap:7px}
.notice-s{font-size:0.7375rem;color:var(--muted);margin-top:2px;line-height:1.45}
.notice-side{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.notice-day{font-size:0.71875rem;font-weight:600;color:var(--ink-2);padding:12px 18px 6px;background:#FBFCFC;border-bottom:1px solid var(--line-2)}
.unread-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}


@media (max-width:1500px){
  .flight-form.wide{grid-template-columns:1fr 1fr 1fr}
  .site-tab{padding:7px 8px;font-size:0.71875rem}
}
@media (max-width:1300px){
  .g-cat{grid-template-columns:210px minmax(0,1fr) 340px}
  .detail-pane{width:400px}
  body.pane-open .app{margin-right:400px}
}

/* =========================================================
   RESPONSIVE (no romper a 1280)
   ========================================================= */
@media (max-width:1439px){
  .page{padding:20px 10px 40px}
  .topbar{padding:0 22px}
  .sidebar{width:var(--sidebar)}
  :root{--sidebar:clamp(242px, 15.2rem, 330px)}
}
@media (max-width:1300px){
  .kpi-row{gap:12px}
  .kpi-value{font-size:1.625rem}
  .search-global{width:330px}
  .g-main{grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr)}
  .app-table{font-size:0.78125rem}
  .app-table thead th,.app-table tbody td{padding-left:11px;padding-right:11px}
}
@media (max-width:1180px){
  :root{--sidebar:76px}
  .sidebar{width:76px}
  .brand{padding:18px 0;justify-content:center}
  .brand-text,.nav-link span,.nav-label,.nav-count,.side-user-text{display:none}
  .nav-link{justify-content:center;padding:11px 0}
  .nav-link.active:before{left:-12px}
  .side-scroll{padding:6px 12px}
  .side-user{justify-content:center}
  .search-global{width:260px}
  .page-head{flex-wrap:wrap}
}
@media (max-width:1024px){
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-main,.g-side,.g-side-l{grid-template-columns:minmax(0,1fr)}
  .doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flight-form{grid-template-columns:1fr 1fr}
}

/* =========================================================
   AGENDA · AVISOS · CATÁLOGO · PASAJES (Lupa)
   ========================================================= */
.lista-notas{list-style:disc;padding-left:18px}
.lista-notas li{line-height:1.45}

/* autocompletado de aeropuertos */
.autocomplete{position:relative;min-width:0}
.ac-list{
  display:none;position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 16px 32px -20px rgba(16,48,48,.4);
  max-height:250px;overflow-y:auto;
}
.ac-list.abierta{display:block}
.ac-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--line-2);background:var(--surface);
  padding:8px 11px;font-size:0.78125rem;color:var(--ink-2);cursor:pointer;
}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item:focus{background:var(--brand-50);color:var(--brand-800);outline:none}

/* chips de sitios de vuelo con checkbox nativo oculto */
.check-pill{position:relative;cursor:pointer;user-select:none}
.check-pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* el calendario y los formularios no deben desbordar en pantallas angostas */
@media (max-width:1024px){
  .g-cat{grid-template-columns:minmax(0,1fr)}
  .sticky-col{position:static}
}
@media (max-width:768px){
  .sidebar{display:none}
  .app{margin-left:0}
  .topbar{padding:0 14px;gap:10px;height:56px}
  .search-global{display:none}
  .topbar > .btn-g,.topbar > .btn-p,.topbar-sep{display:none}
  .user-chip > div:not(.avatar){display:none}
  .page{padding:16px 10px 40px}
  .page-head{flex-direction:column;gap:10px;margin-bottom:16px}
  .page-title{font-size:1.3125rem}
  .page-actions{flex-wrap:wrap;padding-top:0}
  .g-cat,.g-side,.g-side-l,.g-main,.g-dash{grid-template-columns:minmax(0,1fr)}
  .panel-head{flex-wrap:wrap;padding:12px 14px}
  .panel-body{padding:14px}
  .cal-head div{padding:6px 4px;font-size:0.625rem}
  .cal-cell{min-height:84px;padding:5px 3px}
  .cal-num{font-size:0.65625rem;min-width:18px;height:18px}
  .cal-evt{font-size:0.59375rem;padding:2px 3px}
  .flight-form,.flight-form.wide{grid-template-columns:minmax(0,1fr)}
  .notice{flex-wrap:wrap;padding:12px 14px}
  .notice-side{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding-left:42px}
  .fare{flex-wrap:wrap}
  .fare-air{width:auto}
  .fare-price{margin-left:0;text-align:left}
  .today{flex-wrap:wrap}
  .pager{flex-wrap:wrap}
  .sticky-col{position:static}
}

/* formulario de vuelo: 7 campos, dos filas equilibradas */
.flight-form.viaje{grid-template-columns:repeat(4,minmax(0,1fr))}
.flight-form.viaje .campo-cliente{grid-column:span 2}
@media (max-width:1024px){
  .flight-form.viaje{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .flight-form.viaje{grid-template-columns:minmax(0,1fr)}
  .flight-form.viaje .campo-cliente{grid-column:auto}
}

/* costo en la lista del catálogo: una línea, el detalle completo va en la ficha */
.cat-item .text-end{flex:none;max-width:132px}
.cat-item .text-end .strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* subtítulo del trámite en la lista: una sola línea, sin desbordar la tarjeta */
.cat-item .cat-item-s{flex-wrap:nowrap;overflow:hidden;align-items:center}
.cat-item .cat-item-s > span{min-width:0}
.cat-item .cat-item-s > span:first-child{flex:1 1 auto}
.cat-item .cat-item-s > span:nth-child(3){flex:0 1 46%}
.cat-item .cat-item-s .tag{flex:none}

/* canales largos (URLs) dentro de la ficha del catálogo */
.tag-canal{white-space:normal;word-break:break-word;height:auto;padding:4px 7px;line-height:1.35;max-width:100%;text-align:left}

/* Progreso discreto para datos de cartera */
.f-0{width:0%}.f-5{width:5%}.f-10{width:10%}.f-15{width:15%}.f-20{width:20%}.f-25{width:25%}.f-30{width:30%}.f-35{width:35%}.f-40{width:40%}.f-45{width:45%}.f-50{width:50%}.f-55{width:55%}.f-60{width:60%}.f-65{width:65%}.f-70{width:70%}.f-75{width:75%}.f-80{width:80%}.f-85{width:85%}.f-90{width:90%}.f-95{width:95%}.f-100{width:100%}

/* Formularios y modales ocupan el ancho disponible. */
.login-card{max-width:none;width:100%}.modal-content{width:100%}
.fecha,.fecha-valor,.fecha-relativa,.app-table td.num,.app-table th.num,.money{white-space:nowrap}
.fecha-valor,.fecha-relativa{display:block}
.kpi-value{white-space:nowrap}

/* Ronda 4: visor y resultados de búsqueda */
.visor-area{height:70vh;background:#edf1f3;overflow:auto}.visor-pdf{width:100%;height:100%;border:0}.visor-imagen-area{height:100%;overflow:auto;text-align:center}.visor-imagen{display:block;margin:auto;max-width:none}.visor-imagen.zoom-100{width:100%;height:auto}.visor-imagen.zoom-150{width:150%;height:auto}.visor-imagen.zoom-200{width:200%;height:auto}.resultados-tramite{max-height:220px;overflow:auto;border:1px solid #dce4e5;border-radius:8px}.resultado-tramite{display:block;width:100%;padding:10px 12px;text-align:left;background:white;border:0;border-bottom:1px solid #edf1f3;color:#203c3a}.resultado-tramite:hover,.resultado-tramite:focus{background:#e8f4f0}.vuelo-card{height:100%;border:1px solid #dce4e5;border-radius:10px;padding:16px;background:var(--surface)}.vuelo-card .btn-p{margin-top:12px}.ayuda-campo{display:block;font-size:0.75rem;color:#637775;margin-top:5px}

/* Identidad PASE y navegación */
.sidebar{height:100vh;min-height:100vh;overflow:hidden}.side-scroll{min-height:0}.pase-logo{width:10rem;height:auto}.pase-login-logo{width:12rem;height:auto}.pase-isotipo{display:none;width:2.2rem}.aviso-badge{position:absolute;top:-.3rem;right:-.4rem;font-size:.65rem}.aviso-dropdown{width:min(25rem,90vw);max-height:80vh;overflow:auto}.aviso-item{display:flex;gap:.7rem;white-space:normal;padding:.6rem 1rem}.aviso-item small{display:block;color:#627271}.aviso-item .ph{flex:none}.modal-dialog{width:auto}.table-wrap{overflow-x:auto}@media(max-width:1180px){.pase-isotipo{display:block}}

html.letra-115{font-size:115%}html.letra-130{font-size:130%}html.letra-150{font-size:150%}
.input,.btn-p,.btn-g,.btn-q{height:auto;min-height:2.5rem}.topbar{min-height:4rem;height:auto;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}.app-table{min-width:44rem}.modal-body{overflow-y:auto}.letra-opciones label{cursor:pointer}

.ts-wrapper{width:100%}.ts-control{min-height:2.5rem;border-color:var(--line);font-size:inherit}.ts-dropdown{font-size:inherit;z-index:1060}.ts-dropdown .active{background:var(--brand-50);color:var(--brand-900)}

/* Iconos de ayuda (ⓘ): explican para que sirve cada cosa */
.ayuda { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; margin-left: .3rem; border: 0;
  border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: .8rem; line-height: 1; vertical-align: middle;
  cursor: help; transition: background .15s, color .15s; }
.ayuda:hover, .ayuda:focus-visible { background: var(--brand); color: #fff; outline: 0; }
.ayuda .ph { font-size: .85rem; }
.ayuda-pop { --bs-popover-max-width: 19rem; --bs-popover-border-color: var(--line); --bs-popover-header-bg: var(--brand-50);
  --bs-popover-header-color: var(--brand-800); --bs-popover-body-color: var(--ink-2); --bs-popover-font-size: .85rem;
  box-shadow: 0 12px 30px -12px rgba(14, 46, 50, .35); }
.ayuda-pop .popover-body { line-height: 1.5; }

/* Marca PASE en la barra lateral (logo real) */
.brand.brand-pase { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-decoration: none; }
.brand-pase .brand-logo { height: 2.4rem; width: auto; display: block; }
.brand-pase .brand-sub { font-size: .7rem; line-height: 1.3; color: rgba(247, 241, 226, .62); letter-spacing: .01em; }

/* Visor de documentos (Nova 2026-10-27) */
.visor-contenido { border: 0; border-radius: 1rem; overflow: hidden; }
.visor-cab { gap: .8rem; padding: .9rem 1.1rem; background: var(--surface); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.visor-ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .65rem; display: grid; place-items: center; font-size: 1.3rem;
  background: var(--brand-50); color: var(--brand-700); }
.visor-ic.pdf { background: #FDECEA; color: #B4372B; }
.visor-cab-txt { flex: 1; min-width: 10rem; }
.visor-cab-txt .modal-title { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--ink); }
.visor-cab-txt small { font-size: .78rem; color: var(--muted); }
.visor-cab-acc { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.visor-zoom { display: inline-flex; align-items: center; gap: .35rem; margin-right: .3rem; font-size: .82rem; color: var(--ink-2); }
.visor-cuerpo { padding: 0; }
.visor-area { height: 78vh; background: #E9EEF0; }


/* =========================================================
   MODO OSCURO (Nova 2026-10-27): misma estructura, otra paleta.
   Se activa con <html data-tema="oscuro" data-bs-theme="dark">.
   ========================================================= */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #0E1617;
  --surface: #152022;
  --surface-2: #1A2729;
  --ink: #E6EEED;
  --ink-2: #B7C5C3;
  --muted: #8B9C9A;
  --muted-2: #66797A;
  --line: #263638;
  --line-2: #1E2C2E;
  --brand: #3E8E96;
  --brand-600: #4A9AA2;
  --brand-700: #7CC3C9;
  --brand-800: #A5D8DC;
  --brand-50: #17363A;
  --brand-100: #21474B;
  --amber: #E0A63A;
  --amber-700: #F0BC5C;
  --amber-50: #3A2D15;
  --ok: #5CC08F;
  --ok-50: #173326;
  --danger: #F08A76;
  --danger-50: #3A1E19;
  --slate: #A9B9CC;
  --slate-50: #1E2733;
}
html[data-tema="oscuro"] body { background: var(--bg); color: var(--ink); }
html[data-tema="oscuro"] .topbar { background: rgba(21, 32, 34, .92); border-color: var(--line); }
html[data-tema="oscuro"] .search-global { background: var(--surface-2); border-color: var(--line); }
html[data-tema="oscuro"] .search-global input { color: var(--ink); }
html[data-tema="oscuro"] .form-control, html[data-tema="oscuro"] .form-select, html[data-tema="oscuro"] .input,
html[data-tema="oscuro"] .select, html[data-tema="oscuro"] .input-group-text { background-color: var(--surface-2); border-color: var(--line); color: var(--ink); }
html[data-tema="oscuro"] .modal-content, html[data-tema="oscuro"] .dropdown-menu, html[data-tema="oscuro"] .offcanvas,
html[data-tema="oscuro"] .popover { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-tema="oscuro"] .table, html[data-tema="oscuro"] .app-table { --bs-table-bg: transparent; color: var(--ink); }
html[data-tema="oscuro"] .app-table th { background: var(--surface-2); color: var(--muted); }
html[data-tema="oscuro"] .app-table td { border-color: var(--line-2); }
html[data-tema="oscuro"] .kpi.warn-card, html[data-tema="oscuro"] .ini-cifra.aviso { background: #2A2416; border-color: #4A3C1E; }
html[data-tema="oscuro"] .ini-cifra.alerta { background: #2E1C1A; border-color: #5A2E28; }
html[data-tema="oscuro"] .fi-nota { background: #2A2416; border-color: #4A3C1E; }
html[data-tema="oscuro"] .txt-rojo, html[data-tema="oscuro"] .ini-plazo.vencido b, html[data-tema="oscuro"] .ini-plazo.vencido small,
html[data-tema="oscuro"] .cli-vence.vencido .v, html[data-tema="oscuro"] .cli-vence.vencido .s { color: #F08A76 !important; }
html[data-tema="oscuro"] .fi-est-observado, html[data-tema="oscuro"] .fi-doc-ic.pdf, html[data-tema="oscuro"] .visor-ic.pdf { background: #3A1E19; color: #F08A76; }
html[data-tema="oscuro"] .fi-est-listo, html[data-tema="oscuro"] .cli-btn.wa:hover { background: #173326; color: #5CC08F; }
html[data-tema="oscuro"] .fi-est-recibido { background: #1E2640; color: #9DB0F0; }
html[data-tema="oscuro"] .cat-fila-ico, html[data-tema="oscuro"] .ini-acceso .ic { background: var(--brand-50); color: var(--brand-700); }
html[data-tema="oscuro"] .visor-area { background: #0B1213; }
html[data-tema="oscuro"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-tema="oscuro"] .cf-cerrar { background-color: var(--surface-2); }
html[data-tema="oscuro"] img.brand-logo { filter: none; }
html[data-tema="oscuro"] .cf-cerrar { background-color: #E6EEED; }
html[data-tema="oscuro"] .check-box { background: var(--surface-2); border-color: var(--muted-2); }
html[data-tema="oscuro"] [data-check]:not(.on) .check-box .ph, html[data-tema="oscuro"] .check-item:not(.on) .check-box .ph { opacity: 0; }
html[data-tema="oscuro"] [data-check].on .check-box { background: var(--brand); border-color: var(--brand); }

/* Pantalla de carga de PASE (Nova 2026-10-27).
   Forma que gira y se vuelve circulo con resplandor: basada en Uiverse.io, gharsh11032000 (slimy-donkey-39), MIT.
   Puntos dorados que laten: basados en Uiverse.io, JaydipPrajapati1910 (heavy-crab-98), MIT. */
.pase-carga { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(245, 247, 247, .82);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
html[data-tema="oscuro"] .pase-carga { background: rgba(8, 18, 20, .82); }
.pase-carga.on { opacity: 1; }
.pase-carga[hidden] { display: none; }
.pc-caja { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
.pc-logo { position: relative; width: 7rem; height: 7rem; display: grid; place-items: center; }
.pc-forma, .pc-halo { position: absolute; inset: .6rem; border-radius: 1.4rem; background: linear-gradient(-45deg, #0E2E32 0%, #1F5C63 45%, #E0A526 100%);
  animation: pcGira 3s ease-in-out infinite; }
.pc-halo { filter: blur(22px); opacity: .55; transform: scale(.95); }
.pc-logo img { position: relative; width: 3.1rem; height: auto; animation: pcRespira 1.5s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.pc-puntos { display: flex; gap: .55rem; height: 1rem; align-items: center; }
.pc-puntos i { width: .55rem; height: .55rem; border-radius: 50%; background: #F6E3B4; box-shadow: 0 0 .6rem rgba(224, 165, 38, .8); transform: scale(1.6);
  animation: pcPunto 1s linear infinite; }
.pc-puntos i:nth-child(2) { animation-delay: .2s; }
.pc-puntos i:nth-child(3) { animation-delay: .3s; }
.pc-puntos i:nth-child(4) { animation-delay: .4s; }
.pc-puntos i:nth-child(5) { animation-delay: .5s; }
.pc-texto { margin: 0; font-weight: 700; font-size: 1rem; color: var(--ink); letter-spacing: -.01em; text-align: center; max-width: 20rem; }
@keyframes pcGira { 0% { transform: rotate(-45deg); } 50% { transform: rotate(-360deg); border-radius: 50%; } 100% { transform: rotate(-45deg); } }
@keyframes pcRespira { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
@keyframes pcPunto { 50% { background: #E0A526; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pc-forma, .pc-halo, .pc-logo img, .pc-puntos i { animation-duration: 4s; } }

/* Barra lateral: ordenar arrastrando (Nova 2026-10-27, version sobria) */
.nav-link > span:not(.nav-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { flex: none; }
.nav-asa { display: none; margin-left: auto; flex: none; color: rgba(255, 255, 255, .4); font-size: 1.05rem; }
.sidebar.editando .nav-asa { display: inline-block; }
.sidebar.editando .side-scroll .nav-count { display: none; }
.sidebar.editando .side-scroll .nav-link { cursor: grab; user-select: none; }
.sidebar.editando .side-scroll .nav-link:hover { background: rgba(255, 255, 255, .06); }
.sidebar.editando .side-scroll .nav-link:hover .nav-asa { color: #fff; }
.sidebar.editando .side-scroll .nav-link.active::before { display: none; }
.sidebar .nav-fantasma { opacity: .4; background: rgba(224, 165, 38, .18) !important; }
.sidebar .nav-elegido { background: rgba(255, 255, 255, .12) !important; cursor: grabbing; }
.menu-edicion { display: flex; align-items: center; gap: .5rem; margin: 0 12px 6px; padding: .4rem .45rem .4rem .7rem; border-radius: .6rem;
  background: rgba(255, 255, 255, .06); }
.menu-edicion[hidden], .menu-ordenar[hidden] { display: none; }
.menu-ed-t { flex: 1; min-width: 0; font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-ed-link { border: 0; background: none; padding: 0 .2rem; font-size: .72rem; color: rgba(255, 255, 255, .5); text-decoration: underline; text-underline-offset: 2px; }
.menu-ed-link:hover { color: #fff; }
.menu-ed-listo { border: 0; border-radius: .45rem; padding: .25rem .65rem; font-size: .75rem; font-weight: 700; background: var(--amber); color: #2A1D04; }
.menu-ordenar { display: flex; align-items: center; gap: .45rem; margin: 0 12px 6px; padding: .35rem .6rem; border: 0; border-radius: .5rem; background: transparent;
  color: rgba(255, 255, 255, .42); font-size: .75rem; font-weight: 500; }
.menu-ordenar:hover { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .05); }

/* Barra superior: no se parte en dos lineas con letra grande (Nova 2026-10-27) */
.topbar { flex-wrap: nowrap; }
.topbar .search-global { flex: 0 1 22rem; min-width: 8rem; width: auto; }
.topbar .btn-g, .topbar .btn-p { white-space: nowrap; flex: none; }
@media (max-width: 1599.98px) { html.letra-130 .topbar .user-chip > div:last-child, html.letra-150 .topbar .user-chip > div:last-child { display: none; } }
@media (max-width: 1299.98px) { html.letra-150 .topbar .btn-g, html.letra-130 .topbar .btn-g { display: none; } }
.menu-ed-t { display: inline-flex; align-items: center; gap: .3rem; }

/* Guia del menu: punto de toque que agarra y baja un item (Nova 2026-10-27) */
.menu-guia-fantasma { position: fixed; z-index: 2100; margin: 0 !important; pointer-events: none; background: #2D5F64 !important; color: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4); border-radius: var(--radius-sm); animation: menuGuiaMueve 2.6s ease-in-out infinite; }
.menu-guia-fantasma .nav-asa { display: inline-block; color: #fff; }
.menu-guia-fantasma .nav-count { display: none; }
.menu-guia-mano { position: fixed; z-index: 2101; width: 30px; height: 30px; pointer-events: none; animation: menuGuiaMueve 2.6s ease-in-out infinite; }
.menu-guia-toque { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 6px rgba(224, 165, 38, .55), 0 4px 12px rgba(0, 0, 0, .45); animation: menuGuiaPresiona 2.6s ease-in-out infinite; }
.menu-guia-flecha { position: absolute; left: 50%; top: 38px; transform: translateX(-50%); color: var(--amber); font-size: 1.2rem; animation: menuGuiaSuelta 2.6s ease-in-out infinite; }
.menu-guia-globo { position: fixed; z-index: 2102; width: 16rem; background: var(--surface); color: var(--ink); border-radius: .9rem; padding: .85rem .95rem;
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.menu-guia-globo::before { content: ""; position: absolute; left: -7px; top: 1.3rem; width: 14px; height: 14px; background: var(--surface); transform: rotate(45deg); border-radius: 2px; }
.menu-guia-globo > b { font-size: .95rem; }
.menu-guia-globo span { color: var(--ink-2); line-height: 1.45; }
.menu-guia-globo button { align-self: flex-end; margin-top: .2rem; border: 0; border-radius: .5rem; padding: .35rem .8rem; font-weight: 700; font-size: .8rem; background: var(--brand); color: #fff; }
@keyframes menuGuiaMueve { 0%, 18% { transform: translateY(0); } 55%, 75% { transform: translateY(var(--paso)); } 100% { transform: translateY(0); } }
@keyframes menuGuiaPresiona { 0%, 12% { transform: scale(1); } 18%, 75% { transform: scale(.72); } 82%, 100% { transform: scale(1); } }
@keyframes menuGuiaSuelta { 0%, 12% { opacity: 1; } 18%, 75% { opacity: 0; } 82%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu-guia-fantasma, .menu-guia-mano, .menu-guia-toque { animation-duration: 5s; } }

/* Modales PASE (Nova 2026-10-27): toda la app */
.modal-backdrop { background: #071a1c; }
.modal-backdrop.show { opacity: .5; }
.modal.show { backdrop-filter: blur(3px); }
.modal.fade .modal-dialog { transform: translateY(16px) scale(.985); transition: transform .24s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.modal.show .modal-dialog { transform: none; }
.modal-content { border: 0; border-radius: 1.25rem; overflow: hidden; background: var(--surface); box-shadow: 0 40px 80px -32px rgba(5, 22, 25, .6), 0 0 0 1px rgba(14, 46, 50, .06); }
.modal-header, .offcanvas-header { position: relative; display: flex; align-items: center; gap: .85rem; padding: 1.3rem 1.5rem 1.05rem; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 100%); }
.modal-header::before, .offcanvas-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--brand) 0%, #2C7A82 55%, var(--amber) 100%); }
.modal-header > div, .offcanvas-header > div { flex: 1; min-width: 0; }
.modal-title, .offcanvas-title { font-size: 1.2rem !important; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 0; flex: 1; }
.modal-header .small, .modal-header p { margin: .15rem 0 0; }
.mh-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 1.3rem;
  box-shadow: 0 8px 18px -10px rgba(14, 46, 50, .8); }
.modal-header .btn-close, .offcanvas-header .btn-close { flex: none; width: 2.3rem; height: 2.3rem; padding: 0; margin: 0 0 0 auto; border-radius: 50%; background-size: .75rem;
  background-color: var(--surface-2); opacity: .75; transition: opacity .15s, background-color .15s; }
.modal-header .btn-close:hover, .offcanvas-header .btn-close:hover { opacity: 1; background-color: var(--line-2); }
.modal-body { padding: 1.3rem 1.5rem 1.4rem; }
.modal-footer { padding: .9rem 1.5rem; gap: .6rem; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.modal-footer > * { margin: 0; }
.modal-body .field-label, .offcanvas-body .field-label, .modal-body .form-label { font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-bottom: .35rem; }
.modal-body .form-control, .modal-body .form-select, .offcanvas-body .form-control, .offcanvas-body .form-select {
  min-height: 2.75rem; border-radius: .75rem; border: 1.5px solid var(--line); background-color: var(--surface-2); font-size: .95rem; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.modal-body textarea.form-control, .offcanvas-body textarea.form-control { min-height: 5.5rem; }
.modal-body .form-control:focus, .modal-body .form-select:focus, .offcanvas-body .form-control:focus, .offcanvas-body .form-select:focus {
  border-color: var(--brand); background-color: var(--surface); box-shadow: 0 0 0 .22rem rgba(31, 92, 99, .12); }
.modal-body .form-select:disabled, .modal-body .form-control:disabled { background-color: var(--line-2); opacity: .8; }
.modal-body .ts-wrapper .ts-control { min-height: 2.75rem; border-radius: .75rem; border: 1.5px solid var(--line); background: var(--surface-2); padding: .55rem .8rem; }
.modal-body .ts-wrapper.focus .ts-control { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 .22rem rgba(31, 92, 99, .12); }
.modal-footer .btn-p, .modal-footer .btn-g { min-height: 2.6rem; padding-inline: 1.15rem; border-radius: .75rem; }
.offcanvas { border: 0 !important; box-shadow: -30px 0 60px -30px rgba(5, 22, 25, .55); }
.offcanvas-body { padding: 1.3rem 1.5rem; }
html[data-tema="oscuro"] .modal-content { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-tema="oscuro"] .modal-header .btn-close, html[data-tema="oscuro"] .offcanvas-header .btn-close { filter: invert(1); background-color: rgba(0, 0, 0, .25); }
@media (max-width: 575.98px) { .modal-content { border-radius: 0; } .modal-header, .modal-body, .modal-footer { padding-left: 1.1rem; padding-right: 1.1rem; } }

/* Barra lateral colapsable (Nova 2026-10-27) */
.brand-iso { display: none; }
.barra-toggle { position: fixed; z-index: 1035; top: 5.2rem; left: calc(var(--sidebar) - .8rem); width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: .8rem;
  box-shadow: 0 4px 12px -4px rgba(14, 46, 50, .45); transition: left .2s ease, transform .2s ease, background .15s; }
.barra-toggle:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.sidebar, .app { transition: width .2s ease, margin-left .2s ease; }
html.barra-mini { --sidebar: 76px !important; }
html.barra-mini .sidebar { width: 76px; }
html.barra-mini .barra-toggle { transform: rotate(180deg); }
html.barra-mini .brand { padding: 18px 0; justify-content: center; }
html.barra-mini .brand-logo, html.barra-mini .brand-sub { display: none; }
html.barra-mini .brand-iso { display: block; width: 34px; height: 34px; margin: 0 auto; }
html.barra-mini .nav-link > span, html.barra-mini .nav-label, html.barra-mini .side-user-text, html.barra-mini .nav-asa { display: none !important; }
html.barra-mini .nav-link { justify-content: center; padding: 11px 0; position: relative; }
html.barra-mini .nav-link > .nav-count { display: grid !important; position: absolute; top: 3px; right: 9px; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
  place-items: center; font-size: .6rem; }
html.barra-mini .side-scroll { padding: 6px 12px; }
html.barra-mini .side-user { justify-content: center; }
html.barra-mini .menu-ordenar span { display: none; }
html.barra-mini .menu-ordenar { justify-content: center; }
html.barra-mini .menu-ordenar, html.barra-mini .menu-edicion { margin-inline: 10px; }
@media (max-width: 1180px) { .barra-toggle { display: none; } }

/* Controles de telefono: ocultos salvo en movil.css */
.tb-movil, .mv-nav, .mv-nuevo, .mv-fondo { display: none; }

/* Campos numericos sin flechitas (Robert 2026-10-27): se escribe el numero directo */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Login: logo grande */
.login-logo-grande { display: block; width: min(20rem, 80%); height: auto; }
.login-logo-sub { color: rgba(255,255,255,.62); font-size: .875rem; margin: .85rem 0 2.6rem; letter-spacing: .01em; }

/* Login en telefono */
@media (max-width: 767.98px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-aside { padding: calc(26px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 22px max(20px, env(safe-area-inset-left)); min-height: 0; }
  .login-aside .login-foot, .login-aside .login-h, .login-aside .login-p, .login-aside .login-mini { display: none; }
  .login-body { padding: 0; margin: 0; }
  .login-logo-grande { width: 11rem; }
  .login-logo-sub { margin: .5rem 0 0; font-size: .8rem; }
  .login-main { padding: 28px 20px; align-items: flex-start; }
}