/* ABES · plataforma de apartados, contratos y cobranza */
:root {
  --fondo: #F5F3EF; --papel: #FFFFFF; --tinta: #26262B; --gris: #6E6C68; --gris2: #9A9791; --linea: #E6E2DA; --suave: #FAF8F4;
  --ambar: #E39B36; --ocre: #C2762E;
  --acento: #B8924A; --acento-osc: #3B3632; --acento-suave: #F4ECDD;            /* La Leona: dorado */
  --D: #2E9E6B; --A: #E3A33A; --V: #5D6170; --N: #C9C6BF; --rojo: #C2452D;
  --r: 14px; --sombra: 0 1px 2px rgba(38,38,43,.05), 0 6px 20px rgba(38,38,43,.06);
  font-size: 15px;
}
body[data-d="el-jilotal"] { --acento: #2F7A3A; --acento-osc: #1E3B22; --acento-suave: #E6F1E3; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 15px/1.45 "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }

/* ---------- inicio ---------- */
.inicio { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 16px 40px;
  background: radial-gradient(ellipse 60% 45% at 18% 0%, #F7E7CC 0%, transparent 70%), radial-gradient(ellipse 55% 45% at 85% 4%, #E3EEDD 0%, transparent 70%), var(--fondo); }
.inicio__top { width: min(1080px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.inicio__marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; }
.inicio__marca img { width: 42px; height: auto; }
.inicio__marca small { display: block; font-weight: 500; letter-spacing: 0; font-size: 12px; color: var(--gris); }
.inicio__fecha { color: var(--gris); font-size: 13.5px; }
.inicio__caja { width: min(1080px, 100%); margin: auto; padding-top: 12px; }
.inicio__saludo { margin: 0; color: var(--ocre); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.inicio h1 { margin-top: 6px; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; text-wrap: balance; }
.inicio__sub { margin: 8px 0 0; color: var(--gris); }
.inicio__tip { margin: 22px 0 0; color: var(--gris2); font-size: 13px; text-align: center; }
.inicio__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 28px; }

.opcion { --c: #B8924A; --c-osc: #3B3632; --c-suave: #F4ECDD; --c-fondo: #EFE4CF;
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 22px; background: var(--papel); box-shadow: var(--sombra);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; animation: opcionEntra .5s cubic-bezier(.2,.7,.3,1) both; }
.opcion[data-d="el-jilotal"] { --c: #2F7A3A; --c-osc: #1E3B22; --c-suave: #E6F1E3; --c-fondo: #D9EAD3; animation-delay: .08s; }
.opcion:hover, .opcion:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(38,38,43,.13); border-color: var(--c); outline: none; }
.opcion:focus-visible { box-shadow: 0 0 0 3px var(--c-fondo), 0 18px 48px rgba(38,38,43,.13); }
@keyframes opcionEntra { from { opacity: 0; transform: translateY(14px); } }

.opcion__plano { position: relative; height: 230px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, var(--c-suave) 0%, var(--c-fondo) 100%); }
.opcion__plano::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 22px 22px; }
.opcion__plano > svg { position: absolute; inset: 20px 16px 16px; width: calc(100% - 32px); height: calc(100% - 36px); filter: drop-shadow(0 6px 10px rgba(38,38,43,.14)); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.opcion:hover .opcion__plano > svg { transform: scale(1.04) rotate(-1deg); }
.opcion__plano .base { fill: #FFFDF8; }
.opcion__plano .libre { fill: #BFD9AE; }
.opcion__plano .lt { stroke: #FFFDF8; stroke-width: .9; vector-effect: non-scaling-stroke; animation: ltEntra .5s ease-out both; }
.opcion__plano .lt.D { fill: var(--D); } .opcion__plano .lt.A { fill: var(--A); } .opcion__plano .lt.V { fill: var(--V); } .opcion__plano .lt.N { fill: var(--N); }
@keyframes ltEntra { from { opacity: 0; } }
.opcion__chip { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px;
  background: rgba(255,255,255,.9); color: var(--c-osc); font-size: 12px; font-weight: 600; box-shadow: 0 1px 3px rgba(38,38,43,.1); }
.opcion__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.opcion__norte { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px 4px 5px; border-radius: 99px;
  background: rgba(255,255,255,.9); color: var(--c-osc); font-size: 12px; font-weight: 700; box-shadow: 0 1px 3px rgba(38,38,43,.1); }
.opcion__norte svg { width: 18px; height: 18px; fill: var(--c); } .opcion__norte .sur { fill: #CFC9BE; }

.opcion__cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; flex: 1; }
.opcion__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opcion__logo { height: 50px; max-width: 62%; object-fit: contain; object-position: left center; }
.opcion__total { text-align: right; color: var(--gris); font-size: 13px; line-height: 1.25; }
.opcion__total b { display: block; color: var(--tinta); font-size: 22px; letter-spacing: -.02em; }
.opcion__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opcion__nums div { padding: 10px 12px; border-radius: 12px; background: var(--suave); border: 1px solid var(--linea); }
.opcion__nums b { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.opcion__nums span { display: flex; align-items: center; gap: 6px; color: var(--gris); font-size: 12.5px; }
.opcion__nums i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.opcion__avance { display: grid; gap: 7px; }
.opcion__avance .apilada { height: 8px; }
.opcion__avance small { display: flex; justify-content: space-between; gap: 10px; color: var(--gris); font-size: 12.5px; }
.opcion__ir { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px;
  background: var(--c-osc); color: #fff; font-weight: 600; transition: background .2s; }
.opcion__ir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.opcion:hover .opcion__ir { background: var(--c); }
.opcion:hover .opcion__ir svg { transform: translateX(3px); }
.opcion__ir kbd { margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.16); font: inherit; font-size: 11.5px; opacity: .8; }
@media (hover: none) { .opcion__ir kbd { display: none; } }
@media (max-width: 640px) {
  .inicio__top { padding: 14px 0; } .inicio__fecha { display: none; }
  .inicio__caja { margin-top: 4px; padding-top: 0; }
  .inicio__opciones { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .opcion__plano { height: 190px; }
  .opcion__cuerpo { padding: 18px; gap: 14px; }
  .opcion__logo { height: 42px; }
  .opcion__nums { gap: 6px; } .opcion__nums div { padding: 9px; } .opcion__nums span { font-size: 11.5px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .opcion, .opcion__plano .lt { animation: none; } .opcion, .opcion__plano > svg { transition: none; } }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: var(--papel); border-right: 1px solid var(--linea); }
.side__logo { display: block; width: 100%; padding: 12px 10px 10px; border: 1px solid var(--linea); border-radius: 14px; background: var(--suave); cursor: pointer; text-align: center; }
.side__logo img { display: block; max-width: 100%; height: 46px; margin: 0 auto; object-fit: contain; }
.side__logo small { display: block; margin-top: 8px; color: var(--gris); font-size: 11.5px; }
.side__logo:hover { border-color: var(--acento); }
#menu { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
#menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--gris); font-weight: 500; }
#menu a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#menu a:hover { background: var(--suave); color: var(--tinta); }
#menu a.on { background: var(--acento-suave); color: var(--acento-osc); font-weight: 600; }
#menu a .cuenta { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--rojo); color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }
.side__abes { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--linea); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.side__abes small { display: block; font-weight: 400; color: var(--gris); letter-spacing: 0; font-size: 11px; }
.main { min-width: 0; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: rgba(245,243,239,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.top__t { min-width: 0; }
.top h1 { font-size: 21px; }
.sub { color: var(--gris); font-size: 13px; }
.burger { display: none; border: 0; background: none; font-size: 22px; cursor: pointer; }
.buscar { position: relative; margin-left: auto; width: min(340px, 34vw); }
.buscar svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--gris2); stroke-width: 2; }
.buscar input { width: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--linea); border-radius: 11px; background: var(--papel); }
.buscar input:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
.buscar__res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 360px; overflow: auto; padding: 6px; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); box-shadow: 0 16px 40px rgba(38,38,43,.14); }
.buscar__res button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.buscar__res button:hover, .buscar__res button.sel { background: var(--suave); }
.buscar__res small { color: var(--gris); margin-left: auto; font-size: 12px; }
.top__acc { display: flex; gap: 8px; }
.vista { padding: 24px 28px 60px; max-width: 1360px; }

/* ---------- piezas ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border: 1px solid var(--acento-osc); border-radius: 10px; background: var(--acento-osc); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); }
.btn--borde { background: var(--papel); color: var(--tinta); border-color: var(--linea); }
.btn--borde:hover { border-color: var(--acento); filter: none; }
.btn--ambar { background: var(--ambar); border-color: var(--ambar); color: #241606; }
.btn--rojo { background: var(--papel); border-color: #EBC3B8; color: var(--rojo); }
.btn--sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.card { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra); }
.card__cab { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.card__cab h3 { font-size: 15.5px; }
.card__cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card__body { padding: 4px 18px 18px; }
.rejilla { display: grid; gap: 16px; }
.r2 { grid-template-columns: 1.4fr 1fr; } .r3 { grid-template-columns: repeat(3, 1fr); } .r2i { grid-template-columns: 1fr 1fr; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { padding: 16px 18px; }
.kpi span { display: flex; align-items: center; gap: 7px; color: var(--gris); font-size: 12.5px; font-weight: 500; }
.kpi b { display: block; margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.kpi small { display: block; margin-top: 2px; color: var(--gris); font-size: 12.5px; }
.kpi.alerta b { color: var(--rojo); }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--gris2); flex: none; }
.e-D { background: var(--D); } .e-A { background: var(--A); } .e-V { background: var(--V); } .e-N { background: var(--N); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.D, .pill.al-corriente, .pill.liquidado { background: #E2F3EA; color: #1E6E48; }
.pill.A, .pill.apartado { background: #FCEFD7; color: #8A5A0E; }
.pill.V { background: #E8E9EE; color: #3E4250; }
.pill.N, .pill.cancelado, .pill.vencido { background: #EEEDEA; color: #6E6C68; }
.pill.atrasado { background: #F9E1DA; color: #A8361F; }
.vacio { padding: 26px 10px; text-align: center; color: var(--gris); }
.muted { color: var(--gris); } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 12px; border: 1px solid var(--linea); border-radius: 99px; background: var(--papel); cursor: pointer; font-size: 13px; font-weight: 500; }
.chip.on { background: var(--acento-osc); border-color: var(--acento-osc); color: #fff; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 14px; }
.filtros label { color: var(--gris); font-size: 12.5px; font-weight: 600; }
.barra-prog { height: 7px; border-radius: 9px; background: #EEE9E1; overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--ambar); border-radius: 9px; }
.apilada { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #EEE9E1; }
.apilada i { display: block; height: 100%; }

/* tablas */
.tabla-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { padding: 9px 12px; text-align: left; color: var(--gris); font-weight: 600; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--linea); white-space: nowrap; background: var(--suave); }
.t td { padding: 11px 12px; border-bottom: 1px solid #F0ECE5; vertical-align: middle; }
.t tr.clic { cursor: pointer; } .t tr.clic:hover td { background: #FCFAF6; }
.t td .sub2 { display: block; color: var(--gris); font-size: 12px; }
.t tr.anulado td { color: var(--gris2); text-decoration: line-through; }
.t tr.venc td { color: var(--rojo); }
.lista-mini { display: flex; flex-direction: column; }
.lista-mini > div, .lista-mini > button { display: flex; align-items: center; gap: 10px; padding: 10px 0; border: 0; border-bottom: 1px solid #F0ECE5; background: none; text-align: left; width: 100%; cursor: pointer; }
.lista-mini > :last-child { border-bottom: 0; }
.lista-mini .der { margin-left: auto; text-align: right; }
.lista-mini small { display: block; color: var(--gris); font-size: 12px; }

/* mapa de manzanas */
.manzanas { display: grid; gap: 14px; }
.mz { padding: 14px 16px 16px; }
.mz__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mz__cab h3 { font-size: 15px; }
.mz__cab .der { margin-left: auto; display: flex; gap: 12px; font-size: 12.5px; color: var(--gris); }
.lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.lote { position: relative; padding: 8px 4px 7px; border: 0; border-radius: 9px; color: #fff; cursor: pointer; text-align: center; line-height: 1.1; transition: transform .1s, box-shadow .1s; }
.lote b { display: block; font-size: 15px; }
.lote small { display: block; font-size: 10.5px; opacity: .85; margin-top: 2px; }
.lote.N { color: #5d5a54; }
.lote:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(38,38,43,.18); }
.lote.atenuado { opacity: .22; }
.lote .aviso-l { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--rojo); }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; color: var(--gris); font-size: 12.5px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }

/* maqueta 3D */
.maq { position: relative; height: 460px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #FFFFFF, #ECE6DB 80%); touch-action: none; }
.maq__lienzo { display: block; width: 100%; height: 100%; cursor: grab; }
.maq__espera { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gris); font-size: 14px; }
.maq__ctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.maq__ctl button { width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 9px; background: rgba(255,255,255,.92); font-size: 18px; cursor: pointer; }
.maq__ley { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.88); font-size: 12px; color: var(--gris); }
.maq__ley span { display: inline-flex; align-items: center; gap: 5px; } .maq__ley i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.maq__nota { color: var(--gris2); }
.maq__norte { position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--linea); display: grid; place-items: center; }
.maq__norte i { font-style: normal; font-weight: 700; font-size: 12px; color: var(--rojo); }
.maq__norte::before { content: ""; position: absolute; top: 3px; left: 50%; width: 0; height: 0; margin-left: -4px; border: 4px solid transparent; border-bottom: 6px solid var(--rojo); border-top: 0; }
.maq__tip { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(38,38,43,.18); font-size: 12.5px; pointer-events: none; max-width: 240px; }
.maq__tip b { font-size: 13.5px; } .maq__tip .pill { align-self: flex-start; }
@media (max-width: 820px) { .maq { height: 380px; } .maq__nota { display: none; } }

/* drawer */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(28,26,22,.35); opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(620px, 100%); overflow-y: auto; background: var(--fondo); box-shadow: -20px 0 50px rgba(28,26,22,.18); transform: translateX(105%); transition: transform .25s ease; }
.drawer.on { transform: none; }
.dr__cab { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: flex-start; padding: 18px 22px 14px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.dr__cab h2 { font-size: 20px; }
.dr__cab .x { margin-left: auto; border: 0; background: var(--suave); width: 34px; height: 34px; border-radius: 10px; font-size: 18px; cursor: pointer; flex: none; }
.dr__body { padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.datos div { padding: 9px 0; border-bottom: 1px solid #F0ECE5; }
.datos dt, .datos span { display: block; color: var(--gris); font-size: 12px; }
.datos b { font-weight: 600; }
.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-kpis div { padding: 11px 12px; border-radius: 11px; background: var(--papel); border: 1px solid var(--linea); }
.mini-kpis span { display: block; color: var(--gris); font-size: 11.5px; }
.mini-kpis b { display: block; margin-top: 3px; font-size: 16px; }
.mini-kpis .mal b { color: var(--rojo); }
.nota { padding: 11px 14px; border-radius: 11px; background: #FFF6E3; color: #6B4B00; font-size: 13px; }
.nota.roja { background: #FBE7E1; color: #8E2E1A; }
.nota.verde { background: #E3F3E8; color: #1D5A35; }

/* modal / formularios */
.modal { width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 18px; background: var(--fondo); box-shadow: 0 30px 80px rgba(28,26,22,.3); }
.modal::backdrop { background: rgba(28,26,22,.45); }
.modal form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.mo__cab { display: flex; align-items: center; gap: 12px; padding: 18px 22px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.mo__cab h2 { font-size: 19px; }
.mo__cab .x { margin-left: auto; border: 0; background: var(--suave); width: 34px; height: 34px; border-radius: 10px; font-size: 18px; cursor: pointer; }
.mo__body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.mo__pie { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 14px 22px; background: var(--papel); border-top: 1px solid var(--linea); }
.mo__pie .muted { margin-right: auto; font-size: 13px; }
fieldset { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--linea); border-radius: 13px; background: var(--papel); }
legend { padding: 0 6px; font-weight: 700; font-size: 13.5px; }
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.campos .ancho { grid-column: 1 / -1; }
.c3 { grid-template-columns: repeat(3, 1fr); }
.campo label { display: block; margin-bottom: 4px; color: var(--gris); font-size: 12.5px; font-weight: 600; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--linea); border-radius: 9px; background: #fff; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
.campo textarea { min-height: 70px; resize: vertical; }
.campo .ayuda { margin-top: 4px; color: var(--gris); font-size: 12px; }
.resumen-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.resumen-plan div { padding: 10px 12px; border-radius: 10px; background: var(--suave); }
.resumen-plan span { display: block; font-size: 11.5px; color: var(--gris); }
.resumen-plan b { font-size: 15px; }
.resumen-plan .mal { background: #FBE7E1; } .resumen-plan .mal b { color: var(--rojo); }
.resumen-plan .bien { background: #E3F3E8; }
.sel-lotes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sel-lotes .chip button { border: 0; background: none; margin-left: 4px; cursor: pointer; color: inherit; }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; gap: 12px; align-items: center; max-width: 420px; padding: 12px 14px; border-radius: 12px; background: var(--tinta); color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.25); font-size: 14px; animation: sube .2s ease; }
.toast.error { background: var(--rojo); }
.toast .btn { padding: 5px 10px; font-size: 12.5px; background: #fff; color: var(--tinta); border-color: #fff; }
@keyframes sube { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr); } .r2, .r3 { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; z-index: 45; width: 250px; transform: translateX(-105%); transition: transform .2s; }
  .side.on { transform: none; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  .burger { display: block; }
  .top { flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .buscar { order: 3; width: 100%; }
  .top__acc { margin-left: auto; } .top__acc .btn--borde { display: none; }
  .top__t { flex: 1; }
  .lista-mini [data-ir-mz] { flex-wrap: wrap; } .lista-mini [data-ir-mz] .apilada { order: 3; flex: 1 1 100% !important; } .lista-mini [data-ir-mz] .der { width: auto !important; }
  .vista { padding: 16px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .r2i, .campos, .c3, .resumen-plan, .mini-kpis, .datos { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Tema vidrio (referencia: "HR Management Dashboard", Paperpillar en Dribbble)
   Fondo cálido difuminado con los colores de cada desarrollo, la aplicación como una ventana de
   vidrio esmerilado, tarjetas translúcidas con borde blanco, indicadores con ícono
   de color como el panel de Solina y gráficas sencillas con el monto escrito.
   ========================================================= */
:root {
  --D: #7FA466; --A: #E0A050; --V: #5B524C; --N: #D6CFC3;
  --b1: #F2C7A2; --b2: #E2D3C4; --b3: #E9B68C; --b4: #F6E2CF; --g1: #EDA562; --g2: #B97C78;
  --vidrio: rgba(255,255,255,.46); --vidrio-2: rgba(255,255,255,.72); --vidrio-borde: rgba(255,255,255,.8);
  --sombra-v: 0 1px 1px rgba(80,55,35,.04), 0 10px 30px rgba(80,55,35,.08);
  --r: 22px;
}
body[data-d="el-jilotal"] { --b1: #C8DAB0; --b2: #DCDCC8; --b3: #A9C796; --b4: #EAE6C9; --g1: #9CC274; --g2: #4E7D5A; }
html { background: #E6DED6; }
body { background: transparent; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none;
  background: radial-gradient(38% 46% at 6% 10%, var(--b1), transparent 72%), radial-gradient(42% 50% at 96% 6%, var(--b2), transparent 70%),
    radial-gradient(46% 52% at 78% 100%, var(--b3), transparent 72%), radial-gradient(40% 50% at 10% 96%, var(--b4), transparent 70%), linear-gradient(140deg, #EEE6DD, #DAD3CC);
  filter: blur(24px); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M-40 760C260 520 420 140 760 40S1260 60 1480-60' opacity='.7'/%3E%3Cpath d='M-60 820C300 600 520 260 860 150s520-40 640-150' opacity='.45'/%3E%3Cpath d='M300 980c180-210 420-330 760-360s360-60 440-120' opacity='.35'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
h1, h2, h3 { letter-spacing: -.025em; }

/* pantalla de inicio */
.inicio { background: transparent; }
.opcion { background: var(--vidrio); border-color: var(--vidrio-borde); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: var(--sombra-v); border-radius: 26px; }
.opcion__plano { margin: 10px 10px 0; border-radius: 18px; }
.opcion__nums div { background: var(--vidrio-2); border-color: var(--vidrio-borde); }

/* la ventana */
.app { position: relative; margin: 16px; min-height: calc(100vh - 32px); border-radius: 30px; grid-template-columns: 244px 1fr;
  background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 40px 90px rgba(70,50,35,.16), inset 0 1px 0 rgba(255,255,255,.6); }
.side { top: 16px; height: calc(100vh - 32px); background: transparent; border-right: 1px solid rgba(255,255,255,.55); padding: 22px 16px; border-radius: 30px 0 0 30px; }
.side__logo { background: var(--vidrio-2); border-color: var(--vidrio-borde); border-radius: 18px; box-shadow: var(--sombra-v); }
.menu__secc { display: block; margin: 16px 12px 6px; color: var(--gris2); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
#menu { margin-top: 2px; }
#menu a { padding: 11px 14px; border: 1px solid transparent; border-radius: 14px; color: #77736C; }
#menu a:hover { background: rgba(255,255,255,.45); }
#menu a.on { background: var(--vidrio-2); border-color: var(--vidrio-borde); color: var(--tinta); box-shadow: var(--sombra-v); }
#menu a.on svg { color: var(--acento); }
.side__abes { border-top-color: rgba(255,255,255,.55); }
.top { position: relative; top: auto; padding: 26px 32px 14px; background: transparent; border-bottom: 0; backdrop-filter: none; border-radius: 0 30px 0 0; }
.top h1 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.035em; }
.sub { margin-top: 2px; }
.demo-chip { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 99px; background: rgba(224,160,80,.18); color: #94601D; font-size: 11.5px; font-weight: 600; vertical-align: 1px; cursor: help; }
.buscar input { height: 44px; border-radius: 14px; background: var(--vidrio-2); border-color: var(--vidrio-borde); box-shadow: var(--sombra-v); }
.buscar__res { background: rgba(255,255,255,.94); border-radius: 16px; }
.btn { border-radius: 13px; padding: 10px 16px; }
.btn--borde { background: var(--vidrio-2); border-color: var(--vidrio-borde); box-shadow: var(--sombra-v); }
.chip { background: var(--vidrio-2); border-color: var(--vidrio-borde); }
.vista { padding: 10px 32px 48px; }

/* tarjetas de vidrio */
.card { background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--r); box-shadow: var(--sombra-v);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.card__cab { padding: 20px 22px 12px; }
.card__cab h3 { font-size: 18px; font-weight: 600; }
.cab__nota { font-size: 12.5px; }
.card__body { padding: 4px 22px 22px; }
.t th { background: rgba(255,255,255,.4); border-bottom-color: rgba(255,255,255,.7); }
.t td { border-bottom-color: rgba(120,100,80,.09); }
.t tr.clic:hover td { background: rgba(255,255,255,.45); }
.lista-mini > div, .lista-mini > button { border-bottom-color: rgba(120,100,80,.1); }
.pill.D, .pill.al-corriente, .pill.liquidado { background: rgba(127,164,102,.18); color: #44663A; }
.pill.A, .pill.apartado { background: rgba(224,160,80,.2); color: #8A5713; }
.pill.V { background: rgba(91,82,76,.14); color: #4A423C; }
.apilada, .barra-prog { background: rgba(255,255,255,.6); }
.mini-kpis div, fieldset, .resumen-plan div { background: var(--vidrio-2); border-color: var(--vidrio-borde); }

/* filas del tablero */
.rejilla { gap: 18px; }

/* avance por manzana (como "Working Format") */
.formato { display: flex; flex-direction: column; gap: 10px; }
.formato button { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.formato button small { display: block; color: var(--gris); font-size: 12px; }
.formato button b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.formato__barra { position: relative; height: 54px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.5); border: 1px solid var(--vidrio-borde); }
.formato__barra i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--g1) 20%, transparent), color-mix(in srgb, var(--g1) 55%, transparent)); border-radius: 13px; }
.formato__barra em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 19px; font-weight: 500; color: color-mix(in srgb, var(--g2) 80%, #000); }
.formato button:hover .formato__barra { border-color: var(--acento); }
.formato .leyenda { margin-top: 4px; font-size: 12px; }

/* maqueta dentro del vidrio */
.maq { height: 470px; border-radius: 18px; background: radial-gradient(ellipse 80% 70% at 50% 35%, rgba(255,255,255,.75), rgba(255,255,255,.12) 75%); }
.maq__ctl button, .maq__norte, .maq__ley, .maq__tip { background: rgba(255,255,255,.92); border: 1px solid var(--vidrio-borde); }
.maq__ctl button { border-radius: 11px; box-shadow: var(--sombra-v); }
.maq__ley { border-radius: 12px; }
.maq__tip { border-radius: 14px; background: rgba(255,255,255,.9); }

/* cajón, modal y lotes por manzana */
.drawer { background: #F6F2ED; border-left: 1px solid var(--vidrio-borde); }
.dr__cab, .mo__cab, .mo__pie { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.8); }
.modal { background: rgba(246,242,237,.94); border-radius: 24px; }
.velo { background: rgba(40,30,22,.3); }
.lote { border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

@media (max-width: 820px) {
  .app { margin: 0; border-radius: 0; border: 0; min-height: 100vh; grid-template-columns: minmax(0, 1fr); }
  .side { top: 0; height: 100vh; border-radius: 0 24px 24px 0; background: #FAF6F1; }
  .top { position: sticky; top: 0; padding: 14px 16px; border-radius: 0; background: rgba(246,241,235,.96); }
  .top h1 { font-size: 24px; }
  .vista { padding: 14px 14px 40px; }
  .maq { height: 360px; }
  .card__cab { padding: 16px 16px 10px; } .card__body { padding: 4px 16px 16px; }
  .cab__nota { display: none; }
}

/* indicadores del tablero (como el panel de Solina): ícono cuadrado de color, etiqueta, número y nota */
.kpis--t { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
.kpis--t .kpi { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 14px; padding: 16px 18px; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.kpis--t .kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(80,55,35,.14); }
.kpi__ic { grid-row: span 3; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
.kpi__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi__ic.verde { background: rgba(127,164,102,.18); color: #4F7A3C; }
.kpi__ic.ambar { background: rgba(224,160,80,.2); color: #A86A18; }
.kpi__ic.piedra { background: rgba(91,82,76,.12); color: #5B524C; }
.kpi__ic.rojo { background: rgba(194,69,45,.12); color: var(--rojo); }
.kpis--t .kpi span { font-size: 12.5px; }
.kpis--t .kpi b { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.15; }
.kpis--t .kpi small { margin: 0; font-size: 12px; }
.kpis--t .kpi:last-child b { color: var(--rojo); }
@media (min-width: 1500px) { .kpis--t .kpi { grid-template-columns: 1fr; } .kpis--t .kpi__ic { grid-row: auto; margin-bottom: 10px; width: 40px; height: 40px; } }
@media (max-width: 1250px) and (min-width: 821px) { .kpis--t { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* títulos de tarjeta con una línea que explica */
.card__cab h3 small { display: block; margin-top: 3px; color: var(--gris); font-size: 12.5px; font-weight: 400; letter-spacing: 0; }
.mas { display: block; padding-top: 10px; color: var(--acento); font-size: 13px; font-weight: 600; text-decoration: none; }
.lista-mini b.rojo { color: var(--rojo); }

/* cobranza sencilla: este mes contra lo esperado y una barra por mes con su monto */
.este-mes { display: flex; justify-content: space-between; gap: 12px; }
.este-mes span { display: block; color: var(--gris); font-size: 12.5px; }
.este-mes b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.este-mes .der { text-align: right; } .este-mes .der b { color: var(--gris); font-weight: 600; }
.barra-prog.grande { height: 10px; margin: 10px 0 6px; }
.barra-prog.grande i { background: linear-gradient(90deg, var(--g2), var(--g1)); }
.barras-s { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 190px; margin-top: 18px; }
.barras-s div { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; min-width: 0; }
.barras-s p { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-height: 0; }
.barras-s em { font-style: normal; font-size: 12px; font-weight: 600; color: #4A4744; white-space: nowrap; }
.barras-s i { min-height: 4px; width: min(100%, 46px); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--g1), var(--g2)); }
.barras-s i.actual { opacity: .55; }
.barras-s span { color: var(--gris); font-size: 12px; text-align: center; text-transform: capitalize; line-height: 1.2; }
.barras-s span small { display: block; font-size: 10.5px; text-transform: none; color: var(--gris2); }
@media (max-width: 820px) {
  .barras-s { gap: 6px; } .barras-s em { font-size: 10.5px; }
  .kpis--t { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpis--t .kpi { grid-template-columns: 1fr; padding: 14px; } .kpis--t .kpi__ic { grid-row: auto; width: 34px; height: 34px; margin-bottom: 6px; } .kpis--t .kpi b { font-size: 20px; }
  .kpis--t .kpi:last-child { grid-column: 1 / -1; }
}

/* ---------- gráficas con volumen (graficas.js, mismas que Rancho La Laguna) ---------- */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.chart .eje { font: 500 10.5px "Plus Jakarta Sans", system-ui, sans-serif; fill: #9A9187; }
.chart .rej { stroke: rgba(47,45,42,.07); stroke-width: 1; }
.chart .base { stroke: rgba(47,45,42,.14); stroke-width: 1; }
.chart .val { font: 700 11px "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--tinta); }
.chart .meta { stroke: var(--g1); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .metaL { font: 600 10px "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--g2); }
.chart .hit { fill: transparent; }
.chart .piso { fill: color-mix(in srgb, var(--g1) 8%, transparent); stroke: color-mix(in srgb, var(--g1) 18%, transparent); stroke-width: 1; }
.chart .gcol { transition: filter .25s; transform-box: fill-box; transform-origin: 50% 100%; }
.chart .gcol.is-hover { filter: brightness(1.1) saturate(1.1); }
.chart .gcol.entra { animation: gCrecer 1.1s cubic-bezier(.2, .9, .2, 1.05) var(--d, 0s) both; }
@keyframes gCrecer { from { transform: scaleY(0); } }
.ctip { position: absolute; z-index: 5; pointer-events: none; background: rgba(42,39,36,.9); color: #fff; border-radius: 12px; padding: 7px 10px; font-size: 12px; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ctip b { display: block; font-weight: 600; }
.chart--dona { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
.chart--dona svg { max-width: 300px; justify-self: center; }
.dona__sombra { fill: rgba(47,45,42,.14); filter: blur(6px); }
.dona__hueco { fill: rgba(246,238,226,.9); }
.dona .tapa { stroke: rgba(255,255,255,.55); stroke-width: 1; transition: filter .25s; }
.dona .tapa.is-hover { filter: brightness(1.12); }
.dona.entra { animation: gDona 1.2s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes gDona { from { opacity: 0; transform: rotate(-60deg) scale(.7); } }
.dona__n { font: 700 30px "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--tinta); }
.dona__t { font: 600 9px "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; fill: var(--gris); }
.dona__ley { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 13px; }
.dona__ley li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; }
.dona__ley i { width: 12px; height: 12px; border-radius: 4px; }
.dona__ley em { font-style: normal; color: var(--gris); font-size: 12px; min-width: 38px; text-align: right; }
.g-ley { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; margin: -4px 0 6px; }
.g-ley span { display: inline-flex; align-items: center; gap: 6px; }
.g-ley i { width: 11px; height: 11px; border-radius: 4px; }
.g-cob { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .chart .gcol.entra, .dona.entra { animation: none; } }
@media (max-width: 820px) { body[data-ruta="tablero"] .r2i { grid-template-columns: minmax(0, 1fr); } }
.dona__vacio { margin: 0; text-align: center; color: var(--gris); font-size: 13px; }

/* ---------- contrato modelo (Ajustes) ---------- */
.modelo { margin-top: 18px; }
.modelo .card__cab .der { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.modelo__estado { font-size: 12.5px; font-weight: 600; color: var(--ocre); }
.modelo__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start; }
.modelo__hoja { border: 1px solid var(--linea); border-radius: 16px; background: #fff; overflow: hidden; }
.modelo__barra { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 10px; background: var(--suave); border-bottom: 1px solid var(--linea); }
.modelo__barra button { border: 1px solid var(--linea); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.modelo__barra button:hover { border-color: var(--g1); }
.modelo__barra span { flex: 1; }
.modelo__barra.off button:not(.modelo__orig) { opacity: .4; pointer-events: none; }
.modelo-doc { max-height: 72vh; overflow-y: auto; padding: 34px 44px; font: 14px/1.6 "Calibri", "Carlito", "Segoe UI", Arial, sans-serif; color: #111; text-align: justify; outline: none; }
.modelo-doc h1 { text-align: center; font-size: 17px; margin: 0 0 14px; }
.modelo-doc h2 { text-align: center; font-size: 15px; margin: 16px 0 10px; letter-spacing: .1em; }
.modelo-doc p, .modelo-doc .cl { margin: 0 0 10px; }
.modelo-doc .up { text-transform: uppercase; }
.modelo-doc ul { margin: 6px 0 4px 18px; padding: 0; }
.modelo-doc .colind { margin: 8px 0 0 24px; font-size: 13px; }
.modelo-doc table.lados { margin: 0 0 8px 24px; border-collapse: collapse; } .modelo-doc table.lados td { padding: 1px 12px 1px 0; }
.modelo-doc .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 50px; margin-top: 36px; text-align: center; font-weight: 600; }
.modelo-doc .firmas small { display: block; margin-bottom: 36px; }
.modelo-doc .firmas span:not(.campo-v) { display: block; border-top: 1px solid #111; margin-bottom: 6px; }
.modelo-doc mark.falta { background: #FFE58A; color: #6B4B00; padding: 0 3px; border-radius: 3px; }
.modelo__aviso { margin: -10px -20px 18px !important; padding: 9px 12px; border-radius: 10px; background: #E3F3E8; color: #1D5A35; font: 13px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; text-align: left; }
.campo-v { display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 6px; background: color-mix(in srgb, var(--g1) 22%, #fff); color: #4A3A22; border: 1px solid color-mix(in srgb, var(--g1) 45%, #fff); font: 600 12px/1.6 "Plus Jakarta Sans", system-ui, sans-serif; text-transform: none; white-space: nowrap; vertical-align: baseline; user-select: all; }
.modelo__campos { position: sticky; top: 12px; max-height: 78vh; overflow-y: auto; font-size: 13px; }
.modelo__campos p { margin: 0 0 8px; color: var(--gris); }
.modelo__campos h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris2); }
.modelo__campos div { display: flex; flex-wrap: wrap; gap: 6px; }
.modelo__campos .campo-v { cursor: pointer; white-space: normal; text-align: left; }
.modelo__campos .campo-v:hover { filter: brightness(.96); }
@media (max-width: 1100px) { .modelo__cuerpo { grid-template-columns: minmax(0, 1fr); } .modelo__campos { position: static; max-height: none; } }
@media (max-width: 820px) { .modelo-doc { padding: 20px 16px; } }