/* =========================================================
   GALITHA · Directorio de proveedores · v0.2 (estilo B+)
   Base "Cercana" (referentes Nu y Wise): una sola familia
   redondeada con mucho contraste de peso, bloques de color
   pleno con el azul del logo, esquinas suaves y acciones
   rápidas tipo app. La cortina entre páginas viene de la
   propuesta "Nocturna": franjas horizontales con brillo.
   El diseño anterior (v0.1) está en backup/v0.1-2026-10-02.
   ========================================================= */

:root {
  --navy: #153588;          /* azul exacto del logotipo */
  --navy-deep: #0B1C4A;
  --blue: #2B4FD0;          /* azul vivo para interacción */
  --lav: #E7EAFB;
  --lav-2: #D5DBF7;
  --sun: #E3B26B;           /* acento del atardecer */
  --sun-bg: #FBEBD0;
  --sun-ink: #7E5210;
  --sun-deep: #5E3C08;

  --bg: #F1F2F8;
  --surface: #FFFFFF;
  --ink: #101530;
  --ink-2: #474D66;
  --muted: #7C819A;
  --stone: #A9AEC2;
  --line: rgba(16, 21, 48, .08);
  --line-2: rgba(16, 21, 48, .14);
  --line-light: rgba(255, 255, 255, .16);

  --ok: #157A52;   --ok-bg: #DDF3E8;
  --warn: #93570A; --warn-bg: #FCEFD8;
  --bad: #B4313A;  --bad-bg: #FBE3E5;

  --f: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --side-w: 264px;
  --gutter: clamp(16px, 3vw, 40px);
  --r-xl: 32px; --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  --ease: cubic-bezier(.77, 0, .18, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 450 15px/1.55 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
body.is-loading, body.menu-open, body.drawer-open, body.modal-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "mono" se conserva como clase de etiquetas y cifras; ya no es monoespaciada */
.mono { font-family: var(--f); font-size: 12px; font-weight: 650; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.ico { width: 20px; height: 20px; flex: none; }
[data-ico] { display: inline-grid; place-items: center; }
p { margin: 0 0 1em; }

/* ---------- Tipografía ---------- */
.title { margin: 0; font: 800 clamp(34px, 4vw, 52px)/1.02 var(--f); letter-spacing: -.035em; color: var(--ink); }
.title--d { font-size: clamp(28px, 3.2vw, 44px); overflow-wrap: anywhere; }
.h2 { margin: 0 0 10px; font: 800 clamp(24px, 2.6vw, 34px)/1.1 var(--f); letter-spacing: -.03em; }
.h3 { margin: 0 0 6px; font: 800 19px/1.2 var(--f); letter-spacing: -.02em; }
.eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 650; color: var(--muted); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 99px; white-space: nowrap;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  font: 700 14px/1 var(--f);
  transition: transform .4s var(--spring), background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.btn:not(:disabled):hover { transform: translateY(-1px); border-color: var(--navy); }
.btn:not(:disabled):active { transform: scale(.97); }
.btn .ico { width: 18px; height: 18px; }
.btn .arr { width: 18px; height: 10px; transition: transform .4s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn--solid { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(21, 53, 136, .26); }
.btn--solid:not(:disabled):hover { background: var(--blue); border-color: var(--blue); }
.btn--danger { color: var(--bad); border-color: rgba(180, 49, 58, .3); }
.btn--danger:not(:disabled):hover { background: var(--bad-bg); border-color: var(--bad); }
.btn--danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn--danger-solid:not(:disabled):hover { background: #8E2229; border-color: #8E2229; }

.link-u { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .3s; }
.link-u:hover { text-decoration-color: currentColor; }
.link-u .ico { width: 15px; height: 15px; }

.tbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px;
  background: var(--surface); color: var(--ink-2); font: 700 13.5px/1 var(--f);
  transition: background .3s, color .3s, transform .4s var(--spring);
}
.tbtn:hover { color: var(--navy); transform: translateY(-1px); }
.tbtn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; background: var(--lav); color: var(--navy); }
.tbtn--sm .ico { width: 16px; height: 16px; }
.tbtn b { font-weight: 800; }
.tbtn.has b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 11px; }

.ibtn {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: var(--ink-2);
  transition: background .3s, color .3s, transform .4s var(--spring);
}
.ibtn:hover { background: var(--lav); color: var(--navy); }
.ibtn .ico { width: 18px; height: 18px; }
.ibtn--line { width: 44px; height: 44px; background: var(--surface); border: 1px solid var(--line-2); }
.ibtn--line:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }

.round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink-2); transition: transform .4s var(--spring), color .3s; }
.round:hover { transform: scale(1.06); color: var(--navy); }

/* Acciones rápidas (WhatsApp, llamar, correo) */
.quick { display: inline-flex; gap: 6px; }
.qbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-width: 38px; height: 38px; border-radius: 99px; color: var(--navy); background: var(--lav);
  transition: background .3s, color .3s, transform .4s var(--spring);
}
.qbtn:hover { background: var(--navy); color: #fff; transform: scale(1.06); }
.qbtn .ico { width: 18px; height: 18px; }
.quick .qbtn:first-child { background: var(--navy); color: #fff; }
.quick .qbtn:first-child:hover { background: var(--blue); }

.fav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--stone); transition: color .3s, transform .4s var(--spring), background .3s; }
.fav:hover { color: var(--sun); transform: scale(1.12); }
.fav.on { color: var(--sun); }
.fav.on .ico { fill: currentColor; }

/* ---------- Estatus, SAT y calificación ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 99px; white-space: nowrap;
  font: 700 12.5px/1 var(--f);
}
.tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--activo { color: var(--ok); background: var(--ok-bg); }
.tag--evaluacion { color: var(--warn); background: var(--warn-bg); }
.tag--no_recomendado { color: var(--bad); background: var(--bad-bg); }
.tag--off { color: var(--muted); background: var(--bg); margin-left: 6px; vertical-align: middle; height: 22px; font-size: 11px; }


.chips-ro { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-ro span, .chip-ro {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px;
  background: var(--lav); color: var(--navy); font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.chip-ro { background: transparent; border: 1px dashed var(--lav-2); height: 28px; }

/* ---------- Animaciones de entrada ---------- */
.rv { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.rv.is-in { opacity: 1; transform: none; }
tr.rv { transform: translateY(8px); }

/* ---------- Preloader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: grid; place-items: center; clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease);
}
#loader.done { clip-path: inset(0 0 100% 0); }
#loader.skip { display: none; }
.loader-mark { width: 84px; color: var(--navy); }
.loader-mark rect, .loader-mark path { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: mod .8s var(--ease) forwards; }
.loader-mark .m2 { transform-origin: right center; }
@keyframes mod { to { transform: scaleX(1); } }
.loader-meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; display: flex; justify-content: space-between; color: var(--navy); }

/* ---------- Cortina: franjas horizontales con brillo + isotipo que se arma ---------- */
#curtain { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; pointer-events: none; }
/* Cada franja se encima 1 px con la siguiente para que no quede una rendija blanca entre ellas (alturas fraccionarias) */
#curtain > i { flex: 1; margin: -1px 0; background: linear-gradient(90deg, var(--navy-deep), var(--navy) 60%, #2443B8); transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease); backface-visibility: hidden; }
#curtain > i:nth-child(2) { transition-delay: .02s; } #curtain > i:nth-child(3) { transition-delay: .04s; }
#curtain > i:nth-child(4) { transition-delay: .06s; } #curtain > i:nth-child(5) { transition-delay: .08s; }
#curtain.in { pointer-events: all; }
#curtain.in > i { transform: scaleX(1); }
#curtain.out > i { transform-origin: right; transform: scaleX(0); }
.curtain-mark { position: absolute; left: 50%; top: 50%; width: 60px; color: #fff; transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 0 18px rgba(124, 147, 255, .9)); transition: opacity .25s; }
.curtain-mark rect, .curtain-mark path { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.curtain-mark .m2 { transform-origin: right center; }
#curtain.in .curtain-mark { opacity: 1; transition-delay: .1s; }
#curtain.in .curtain-mark rect, #curtain.in .curtain-mark path { animation: mod .26s var(--ease) forwards; }
#curtain.in .curtain-mark > svg > :nth-child(1) { animation-delay: 0.10s !important; }
#curtain.in .curtain-mark > svg > :nth-child(2) { animation-delay: 0.12s !important; }
#curtain.in .curtain-mark > svg > :nth-child(3) { animation-delay: 0.14s !important; }
#curtain.in .curtain-mark > svg > :nth-child(4) { animation-delay: 0.16s !important; }
#curtain.in .curtain-mark > svg > :nth-child(5) { animation-delay: 0.18s !important; }
#curtain.in .curtain-mark > svg > :nth-child(6) { animation-delay: 0.20s !important; }
#curtain.in .curtain-mark > svg > :nth-child(7) { animation-delay: 0.22s !important; }
#curtain.in .curtain-mark > svg > :nth-child(8) { animation-delay: 0.24s !important; }
#curtain.in .curtain-mark > svg > :nth-child(9) { animation-delay: 0.26s !important; }
#curtain.out .curtain-mark { opacity: 0; transition-delay: .08s; }

/* =========================================================
   ESTRUCTURA
   ========================================================= */
.shell { position: relative; min-height: 100vh; padding-left: var(--side-w); }

.side {
  position: fixed; top: 14px; bottom: 14px; left: 14px; width: calc(var(--side-w) - 14px); z-index: 40;
  display: flex; flex-direction: column; padding: 28px 16px 16px; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(16, 21, 48, .04);
}
.side-logo { display: block; width: 140px; margin: 2px auto 0; color: var(--navy); }
.side-app { margin: 6px 0 26px; text-align: center; font-size: 12px; font-weight: 650; color: var(--muted); }
.side-nav { display: grid; gap: 4px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 16px;
  font-weight: 650; color: var(--ink-2); transition: background .3s, color .3s;
}
.side-nav a:hover { background: var(--bg); }
.side-nav a.active { background: var(--navy); color: #fff; }
.side-nav a b { margin-left: auto; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 750; background: var(--bg); color: var(--ink-2); }
.side-nav a b:empty { display: none; }
.side-nav a.active b { background: rgba(255,255,255,.18); color: #fff; }
.side-soon { margin-top: 26px; display: grid; gap: 2px; }
.side-soon p { margin: 0 14px 6px; font-size: 12px; font-weight: 750; color: var(--muted); }
.side-soon span { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; color: var(--muted); font-weight: 550; }
.side-soon span .ico { opacity: .55; }
.side-foot { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.side-ver { text-align: center; color: var(--stone); font-size: 11.5px; font-weight: 600; }

.backup { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 22px; background: var(--bg); color: var(--ink); transition: transform .4s var(--spring); }
.backup:hover { transform: translateY(-2px); }
.backup i, .bk-state i { width: 9px; height: 9px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--stone); }
.backup b { display: block; font-weight: 750; font-size: 14px; }
.backup small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 550; opacity: .8; }
.backup--ok { background: var(--ok-bg); color: #0E5A3C; }
.backup--ok i { background: var(--ok); }
.backup--pend { background: var(--sun-bg); color: var(--sun-deep); }
.backup--pend i { background: var(--sun); }
.backup--warn { background: var(--bad-bg); color: #7A1E25; }
.backup--warn i { background: var(--bad); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.topbar, #menu, .tabbar { display: none; }

.deskbar { display: flex; align-items: center; gap: 14px; height: 78px; padding: 0 var(--gutter); max-width: 1360px; }
.fecha { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 99px; background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fecha .ico { width: 18px; height: 18px; color: var(--navy); }
.deskbar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }

#view { position: relative; outline: none; }
.page { padding: 4px var(--gutter) 96px; max-width: 1360px; }

/* ---------- Encabezado de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin: 6px 0 22px; }

/* =========================================================
   LISTADO
   ========================================================= */
/* Encabezado (2026-10-02): tarjeta azul con el título como protagonista
   y dos cuadros a la derecha (Favoritos y Contactos activos) */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-bottom: 30px; }
.hero-main {
  position: relative; overflow: hidden; min-height: 236px; padding: 28px 30px 26px; border-radius: var(--r-xl); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 140% at 100% 0%, #3557D6 0%, var(--navy) 46%, var(--navy-deep) 100%);
}
.hero-main .deco { position: absolute; right: -30px; bottom: -96px; width: 380px; color: rgba(255,255,255,.09); transform: rotate(-8deg); pointer-events: none; }
.h-eyebrow { position: relative; margin: 0 0 10px; font-size: 13px; font-weight: 650; color: rgba(255,255,255,.62); }
.hero-main h1 { position: relative; margin: 0; font-size: clamp(36px, 3.8vw, 52px); line-height: .98; font-weight: 800; letter-spacing: -.045em; }
.h-sum { position: relative; margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.h-sum b { font-weight: 800; }
.h-count { margin-right: 4px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.86); }
.h-count .sun { color: var(--sun); }
.h-sum .pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 99px; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); }

.sqs-h { display: grid; grid-template-columns: repeat(2, 236px); gap: 14px; }
.sq { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 236px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); }
.sq > p { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
.sq strong { font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sq-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.sq-row small { max-width: 130px; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: right; opacity: .85; }
.sq--sun { background: var(--sun-bg); color: var(--sun-ink); }
.sq--sun strong { color: var(--sun-deep); }
.sq-go { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--surface); color: var(--sun-ink); transition: transform .4s var(--spring); }
.sq-go:hover { transform: translateX(2px); }
.sq-go .ico { width: 18px; height: 18px; }
.sq .avs i { width: 32px; height: 32px; font-size: 11px; }
/* Pila de iniciales de contactos */
.avs { display: flex; }
.avs i { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--surface); background: var(--lav); color: var(--navy); font: 800 11.5px var(--f); font-style: normal; }
.avs i:first-child { margin-left: 0; }
.avs i:nth-child(2) { background: var(--sun-bg); color: var(--sun-ink); }
.avs i:nth-child(3) { background: #DDF1E8; color: #176647; }
.avs i:nth-child(4) { background: #DDEBFA; color: #1D5FA8; }
.avs i:nth-child(5) { background: var(--bg); color: var(--ink-2); }

/* Cobertura (ícono de ubicación + texto) */
.c-loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.c-loc .ico { width: 15px; height: 15px; flex: none; }
.c-loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.l-tags .chip-ro { height: 24px; font-size: 11.5px; padding: 0 9px; }
.c-cob { max-width: 200px; font-size: 13px; }

/* ---------- Herramientas ----------
   Renglón 1: título · búsqueda (se estira) · vistas
   Renglón 2: estatus · favoritos | tipo · categoría · cobertura ······ ordenar
   Todas las piezas miden 42-46 px de alto para que lean como una sola barra. */
.tools-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.h-sec { flex: none; margin: 0 6px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px 0 16px; border-radius: 99px; background: var(--surface); color: var(--muted);
  border: 2px solid transparent; transition: border-color .3s;
}
.search:focus-within { border-color: var(--blue); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 14.5px; font-weight: 550; color: var(--ink); }
.search input::placeholder { color: var(--stone); }
.search kbd { padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); font: 700 11px var(--f); }
.views { flex: none; display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--surface); }
.views button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 99px; color: var(--muted); font-size: 13px; font-weight: 650; transition: background .3s, color .3s; }
.views button .ico { width: 18px; height: 18px; }
.views button:hover { color: var(--navy); }
.views button[aria-pressed="true"] { background: var(--lav); color: var(--navy); }

.filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.seg { flex: none; display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--surface); }
.seg button { height: 34px; padding: 0 13px; border-radius: 99px; color: var(--ink-2); font-size: 13px; font-weight: 650; white-space: nowrap; transition: background .3s, color .3s; }
.seg button:hover { color: var(--navy); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.favchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 99px;
  background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 650; white-space: nowrap; transition: background .3s, color .3s;
}
.favchip:hover { color: var(--navy); }
.favchip .ico { width: 16px; height: 16px; }
.favchip[aria-pressed="true"] { background: var(--sun-bg); color: var(--sun-deep); }
.favchip[aria-pressed="true"] .ico { fill: var(--sun); color: var(--sun); }
.fb-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--line-2); }

/* Pastilla con desplegable: "Tipo ▾" o, con filtro, "Tipo: Materiales ▾" en azul */
.psel {
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 0 0 16px; border-radius: 99px;
  background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s;
}
.psel:hover { color: var(--navy); }
.psel:has(select:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.psel > .ico { width: 16px; height: 16px; color: var(--muted); }
.psel-k { display: none; }
.psel.on { background: var(--navy); color: #fff; }
.psel select {
  appearance: none; -webkit-appearance: none; field-sizing: content; min-width: 0; max-width: 220px; height: 100%;
  padding: 0 34px 0 0; border: 0; outline: none; color: inherit; font: inherit; cursor: pointer; text-overflow: ellipsis;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23153588' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 15px center / 10px;
}
.psel.on select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
.psel option { color: var(--ink); background: var(--surface); }

/* Desplegables de los formularios */
select.in {
  appearance: none; -webkit-appearance: none; height: 46px; padding: 0 36px 0 14px; cursor: pointer; text-overflow: ellipsis;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23153588' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 15px center / 10px;
}

.count { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 12px 4px; color: var(--muted); font-size: 12.5px; }
.count b { color: var(--ink); font-weight: 800; }
.count .clear-f { margin-left: 6px; font-size: 12.5px; }

/* Casillas y pastillas (filtros y formularios) */
.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk--pill span {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--surface); font-size: 13.5px; font-weight: 650; color: var(--ink-2);
  transition: background .3s, color .3s, border-color .3s;
}
.chk--pill span .ico { width: 16px; height: 16px; }
.chk--pill:hover span { border-color: var(--navy); }
.chk--pill input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chk--pill input:checked + span .ico { fill: var(--sun); color: var(--sun); }
.chk--pill input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.chk--radio.chk--activo input:checked + span { background: var(--ok); border-color: var(--ok); }
.chk--radio.chk--evaluacion input:checked + span { background: var(--warn); border-color: var(--warn); }
.chk--radio.chk--no_recomendado input:checked + span { background: var(--bad); border-color: var(--bad); }
.chk--wa span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chk--wa span .ico { width: 17px; height: 17px; }
.chk--wa span::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--surface); }
.chk--wa input:checked + span { color: var(--ok); }
.chk--wa input:checked + span::before { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--ok); }
.chk--wa input:focus-visible + span::before { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Tarjetas (base) ---------- */
.cards { display: grid; gap: 16px; }
.cards--compactas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.cards--amplias { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.cards--ancho { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; min-width: 0;
  border-radius: var(--r-lg); background: var(--surface); cursor: pointer;
  transition: transform .5s var(--spring), box-shadow .5s var(--ease-out), opacity .6s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -14px rgba(21, 53, 136, .24); }
.card > .fav { position: absolute; top: 14px; right: 14px; }
.c-top { display: flex; align-items: flex-start; gap: 14px; padding-right: 26px; }
.c-id { flex: 1; min-width: 0; }
.pname { display: block; font-weight: 750; font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); transition: color .3s; }
.pname:hover { color: var(--navy); }
.sub { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 550; line-height: 1.4; }
.av { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.t0 { background: var(--lav); color: var(--navy); }
.t1 { background: var(--sun-bg); color: var(--sun-ink); }
.t2 { background: #DDF1E8; color: #176647; }
.t3 { background: #DDEBFA; color: #1D5FA8; }
.t4 { background: #F6E2EE; color: #93356B; }
.c-mid { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.c-bot { display: flex; align-items: center; gap: 12px; padding: 12px; margin: auto -8px -8px; border-radius: var(--r-md); background: var(--bg); }
.p-av { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 800; }
.c-who { flex: 1; min-width: 0; }
.c-who b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-who small { display: block; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-who.is-off { opacity: .55; }
.c-bot .qbtn { background: var(--surface); }
.c-bot .quick .qbtn:first-child { background: var(--navy); }

/* ---------- Tarjetas amplias ---------- */
.wcard { gap: 18px; padding: 26px; }
.wcard .c-top { align-items: center; }
.wcard .av { width: 60px; height: 60px; border-radius: 20px; font-size: 20px; }
.wcard .pname { font-size: 19px; }
.c-top > .tag { flex: none; }
.w-serv { margin: 0; color: var(--ink-2); font-size: 14.5px; font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stats4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats4 > div { min-width: 0; padding: 12px 14px; border-radius: 18px; background: var(--bg); }
.stats4 small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.stats4 b { display: block; font-size: 14px; font-weight: 750; line-height: 1.3; overflow-wrap: break-word; }
.people { display: grid; gap: 8px; }
.people .c-bot { margin: 0; }

/* ---------- Tarjetas a lo ancho ---------- */
.lcard { display: grid; grid-template-columns: minmax(210px, .9fr) minmax(0, 2fr) minmax(250px, 1fr); gap: 0; padding: 20px 22px; }
.lcard:hover { transform: translateY(-2px); }
.lcard > div { min-width: 0; padding: 0 22px; border-left: 1px solid var(--line); }
.lcard > div:first-of-type { padding-left: 0; border-left: 0; }
.lcard > div:last-child { padding-right: 0; }
.l-id { display: flex; gap: 14px; align-items: flex-start; }
.l-id .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.l-id .fav { width: 30px; height: 30px; margin-left: -4px; }
.l-mid { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.l-mid .w-serv { -webkit-line-clamp: 2; font-size: 14px; }
.l-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.l-facts > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.l-facts small { color: var(--muted); font-weight: 650; font-size: 12px; }
.l-facts .tag { height: 24px; padding: 0 10px; font-size: 12px; }
.l-con { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.l-person { display: flex; align-items: center; gap: 12px; }
.l-person .p-av { background: var(--bg); }
.l-con .quick { flex-wrap: wrap; }
.l-con .quick .qbtn { height: 34px; padding: 0 12px; font-size: 12.5px; font-weight: 700; }
.l-con .quick .qbtn .ico { width: 16px; height: 16px; }
.l-more { margin: 0 0 0 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* ---------- Tabla ---------- */
.tablewrap { background: var(--surface); border-radius: var(--r-lg); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 800px; }
.tbl th { text-align: left; padding: 16px 14px 12px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .pname { font-size: 15px; }
.row { cursor: pointer; transition: background .25s; }
.row:hover { background: #F7F8FC; }
.c-fav { width: 50px; padding-right: 0 !important; padding-left: 14px !important; }
.c-act { width: 1%; text-align: right; }
.c-tel { white-space: nowrap; font-size: 13px; }
.c-cat { max-width: 220px; }
.more { color: var(--muted); font-size: 11.5px; margin-left: 4px; }

/* ---------- Vacíos ---------- */
.empty { max-width: 620px; margin: 6vh auto; padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; border-radius: var(--r-xl); background: var(--surface); }
.empty--sm { margin: 10px auto 40px; }
.empty-mark { width: 60px; color: var(--navy); margin-bottom: 22px; }
.empty-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 10px; }
.empty-acts .link-u { margin-left: 6px; }

/* =========================================================
   FICHA DEL PROVEEDOR
   ========================================================= */
.back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; margin-bottom: 16px; border-radius: 99px; background: var(--surface); font-weight: 700; font-size: 14px; transition: transform .4s var(--spring); }
.back:hover { transform: translateX(-3px); }
.back .ico { width: 18px; height: 18px; }

.d-hero { padding: 28px 30px; margin-bottom: 16px; border-radius: var(--r-xl); background: var(--surface); }
.d-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.av--xl { width: 84px; height: 84px; border-radius: 28px; font-size: 30px; }
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.d-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; color: var(--muted); font-size: 14px; font-weight: 550; }
.d-sub .mono { color: var(--ink-2); font-size: 13px; }
.d-actions { display: flex; align-items: center; gap: 8px; }
.d-actions .fav { width: 44px; height: 44px; background: var(--surface); border: 1px solid var(--line-2); }
.d-actions .fav .ico { width: 20px; height: 20px; }

.quickbar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.quickbar:empty { display: none; }
.quickbar .qbtn { display: grid; justify-items: center; gap: 8px; height: auto; min-width: 64px; padding: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.quickbar .qbtn:hover { background: none; color: var(--navy); transform: none; }
.quickbar .qbtn .ico { width: 56px; height: 56px; padding: 18px; border-radius: 50%; background: var(--bg); color: var(--navy); transition: transform .4s var(--spring), background .3s, color .3s; }
.quickbar .qbtn:first-child .ico { background: var(--navy); color: #fff; }
.quickbar .qbtn:hover .ico { transform: translateY(-3px) scale(1.05); background: var(--lav); }
.quickbar .qbtn:first-child:hover .ico { background: var(--blue); }

.d-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.d-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-main, .d-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel { position: relative; border-radius: var(--r-lg); background: var(--surface); }
.panel-h { display: flex; align-items: center; gap: 12px; padding: 22px 24px 0; }
.panel-h > .mono { display: none; }
.panel-h h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.panel-h h2 .n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 99px; background: var(--bg); color: var(--ink-2); font-size: 12px; vertical-align: 2px; }
.panel-b { padding: 16px 24px 24px; }
.panel-b > *:last-child { margin-bottom: 0; }
.none { margin: 0; font-size: 14px; }
.lead-s { margin-bottom: 16px; font-size: 18px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.notes { margin: 0; white-space: pre-wrap; padding: 16px 18px; border-radius: var(--r-md); background: var(--sun-bg); color: var(--sun-deep); font-weight: 550; }
.panel-b .chips-ro { margin-bottom: 16px; }

.dl { margin: 0; display: flex; flex-direction: column; }
.dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dl > div:first-child { border-top: 0; padding-top: 0; }
.dl dt { color: var(--muted); font-size: 12.5px; padding-top: 2px; }
.dl dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tlist + .dl { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tline { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--bg); }
.tline { flex-wrap: wrap; }
.tnum { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tmail { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.tlab { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.tacts { margin-left: auto; display: flex; gap: 4px; }
.tacts .qbtn { min-width: 34px; height: 34px; background: var(--surface); }
.tacts .qbtn .ico { width: 17px; height: 17px; }
.tacts .qbtn:hover { background: var(--navy); }

.contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.contact { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); }
.contact .tline { background: var(--bg); }
.contact.is-off { opacity: .6; }
.ct-top { display: flex; gap: 12px; align-items: flex-start; }
.ct-av { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; }
.contact.is-off .ct-av { background: var(--stone); }
.ct-id { flex: 1; min-width: 0; }
.ct-id h3 { margin: 0; font-size: 15.5px; font-weight: 750; line-height: 1.3; }
.ct-id .sub { margin: 0; }
.ct-btns { display: flex; margin: -4px -6px 0 0; }
.ct-btns .ibtn { width: 34px; height: 34px; }
.ct-btns .ibtn .ico { width: 17px; height: 17px; }
.ct-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ct-meta span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct-meta em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 650; width: 64px; }
.medio { font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--lav); color: var(--navy); }
.medio--whatsapp { color: var(--ok); background: var(--ok-bg); }
.ct-notes { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); white-space: pre-wrap; }

.obras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.obras li { padding: 12px 16px; border-radius: 16px; background: var(--bg); font-size: 14px; font-weight: 600; }



.warn { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; padding: 10px 14px; border-radius: 14px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600; }
.warn .ico { width: 17px; height: 17px; margin-top: 1px; }
.warn a { color: var(--navy); }

/* ---------- Respaldo ---------- */
.note { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; margin-bottom: 16px; border-radius: var(--r-lg); background: var(--sun-bg); color: var(--sun-deep); }
.note .ico { color: var(--sun-ink); margin-top: 2px; }
.note p { margin: 0; font-size: 14px; font-weight: 550; }
.bk-state { display: flex; gap: 12px; padding: 16px; margin-bottom: 18px; border-radius: var(--r-md); background: var(--bg); }
.bk-state div { display: flex; flex-direction: column; gap: 2px; }
.bk-state b { font-weight: 750; }
.bk-state .mono { color: var(--muted); }
.bk-state.backup--ok { background: var(--ok-bg); }
.bk-state.backup--ok i { background: var(--ok); }
.bk-state.backup--pend { background: var(--sun-bg); }
.bk-state.backup--pend i { background: var(--sun); }
.bk-state.backup--warn { background: var(--bad-bg); }
.bk-state.backup--warn i { background: var(--bad); }
.acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.acts .link-u { margin-left: 4px; font-size: 13.5px; }
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--lav-2); border-radius: var(--r-md); background: var(--bg); color: var(--navy); transition: background .3s, border-color .3s;
}
.drop .ico { width: 28px; height: 28px; margin-bottom: 8px; }
.drop .muted { font-size: 13px; }
.drop:hover, .drop.over { background: var(--lav); border-color: var(--navy); }
.imp { margin-top: 18px; }
.imp-f { color: var(--muted); overflow-wrap: anywhere; }
.imp-n { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.imp-n li { padding: 14px; border-radius: 18px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.imp-n b { font: 800 28px/1 var(--f); letter-spacing: -.03em; color: var(--navy); }
.imp-n span { font-size: 12px; color: var(--muted); line-height: 1.3; font-weight: 600; }
.imp .muted.small { margin-top: 14px; }

/* =========================================================
   PANEL LATERAL (formularios)
   ========================================================= */
#drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.dr-scrim { position: absolute; inset: 0; background: rgba(11, 28, 74, .42); opacity: 0; transition: opacity .5s var(--ease); }
.dr-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-xl) 0 0 var(--r-xl);
  clip-path: inset(0 0 0 100% round var(--r-xl) 0 0 var(--r-xl)); transition: clip-path .7s var(--ease);
}
body.drawer-open #drawer { pointer-events: all; }
body.drawer-open .dr-scrim { opacity: 1; }
body.drawer-open .dr-panel { clip-path: inset(0 0 0 0 round var(--r-xl) 0 0 var(--r-xl)); }
.dr-form { min-height: 100%; display: flex; flex-direction: column; }
.dr-h { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 26px 30px 18px; background: rgba(241, 242, 248, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dr-h p { margin: 0 0 4px; color: var(--muted); }
.dr-h h2 { margin: 0; font: 800 clamp(26px, 3vw, 34px)/1.05 var(--f); letter-spacing: -.03em; }
.dr-h .ibtn { background: var(--surface); width: 42px; height: 42px; }
.dr-b { flex: 1; padding: 4px 30px 30px; display: flex; flex-direction: column; gap: 12px; }
.dr-f { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 16px 30px; background: rgba(241, 242, 248, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.dr-err { flex: 1 1 200px; margin: 0; color: var(--bad); font-size: 13.5px; font-weight: 650; }
.dr-err:empty { visibility: hidden; }

.fs { margin: 0; padding: 20px 22px 22px; border: 0; border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.fs legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 16px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.fs legend .mono { display: grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 99px; background: var(--lav); color: var(--navy); font-size: 11.5px; }
.fs legend .opt { font-size: 12px; font-weight: 600; color: var(--muted); }
.fs-b { clear: both; display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.grid2 .fld--wide, .grid3 .fld--wide { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld-l { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.fld-l em { color: var(--bad); font-style: normal; }
.fld-h { color: var(--muted); font-size: 12px; line-height: 1.4; }
.in {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--bg);
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); transition: border-color .3s, background .3s;
}
textarea.in { resize: vertical; min-height: 76px; }
select.in { max-width: none; height: 46px; border-radius: var(--r-sm); border: 2px solid transparent; background-color: var(--bg); }
.in:hover { border-color: var(--lav-2); }
.in:focus { outline: none; border-color: var(--blue); background-color: var(--surface); }
.in::placeholder { color: var(--stone); }
.in.invalid { border-color: var(--bad); background-color: var(--bad-bg); }
input[name="rfc"] { text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggles .chk--pill span { height: 38px; font-size: 13px; }

.rep { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.rep-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto 36px; gap: 8px; align-items: center; }
.rep-row .ibtn { color: var(--muted); }
.rep-row .ibtn:hover { color: var(--bad); background: var(--bad-bg); }
.rep + .tbtn { align-self: flex-start; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 46px; padding: 6px 8px; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--bg); cursor: text; transition: border-color .3s, background .3s; }
.chips:focus-within { border-color: var(--blue); background: var(--surface); }
.chip { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 12px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 650; }
.chip button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; line-height: 1; opacity: .75; }
.chip button:hover { opacity: 1; background: rgba(255,255,255,.18); }
.chip-in { flex: 1; min-width: 150px; border: 0; outline: none; background: none; font-size: 14.5px; font-weight: 500; padding: 4px; }
.chip-in::placeholder { color: var(--stone); }

.dupes:empty { display: none; }

/* ---------- Campos con lista editable ---------- */
.fld-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lnk-lista { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; color: var(--navy); font-size: 12px; font-weight: 700; transition: background .3s; }
.lnk-lista:hover { background: var(--lav); }
.lnk-lista .ico { width: 15px; height: 15px; }

/* Selección múltiple con menú */
.chips { position: relative; }
.chip-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; max-height: 260px; overflow-y: auto; padding: 6px;
  border-radius: 18px; background: var(--surface); box-shadow: 0 18px 40px -12px rgba(16, 21, 48, .3), 0 0 0 1px var(--line);
}
.cm-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 12px; border-radius: 12px; text-align: left; font-size: 14px; font-weight: 550; color: var(--ink); }
.cm-opt:hover, .cm-opt.act { background: var(--bg); }
.cm-opt > i { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--surface) no-repeat center / 12px; }
.cm-opt[aria-selected="true"] { color: var(--navy); font-weight: 700; }
.cm-opt[aria-selected="true"] > i { border-color: var(--navy); background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.cm-new { color: var(--navy); font-weight: 700; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 4px; }
.cm-new:first-child { border-top: 0; margin-top: 0; border-radius: 12px; }
.cm-new .ico { width: 18px; height: 18px; }
.cm-empty { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 13px; }

/* Selección única con "agregar opción" */
.sel-lista { display: flex; flex-direction: column; gap: 8px; }
.sel-add { display: flex; gap: 8px; align-items: center; }
.sel-add .in { flex: 1; min-width: 0; }
.sel-add .btn { min-height: 46px; }

/* Editor de listas (página "Listas y opciones" y ventana desde el formulario) */
.le-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.le-help { margin: 0 0 12px; }
.le-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.le-row { display: flex; align-items: center; gap: 6px; padding: 2px 2px 2px 4px; border-radius: 14px; transition: background .2s; }
.le-row:hover { background: var(--bg); }
.le-in { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 2px solid transparent; border-radius: 10px; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .2s, background .2s; }
.le-in:hover { background: var(--surface); }
.le-in:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.le-n { flex: none; display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 99px; background: var(--lav); color: var(--navy); font-size: 12px; font-weight: 800; }
.le-n.cero { background: var(--bg); color: var(--stone); }
.le-del { color: var(--muted); }
.le-del:hover { color: var(--bad); background: var(--bad-bg); }
.le-row.is-confirm { flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--bad-bg); }
.le-row.is-confirm .btn { min-height: 36px; padding: 0 14px; font-size: 13px; }
.le-warn { flex: 1 1 200px; display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--bad); font-size: 13px; font-weight: 650; }
.le-warn .ico { width: 17px; height: 17px; margin-top: 1px; }
.le-empty { padding: 12px 4px; color: var(--muted); font-size: 13.5px; }
.le-add { display: flex; gap: 8px; margin-top: 12px; }
.le-add .in { flex: 1; min-width: 0; }
.le-add .btn { min-height: 46px; }
.le-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 550; }
.le-foot .link-u { font-size: 12.5px; }
.note--info { background: var(--lav); color: var(--navy-deep); }
.note--info .ico { color: var(--navy); }

/* Cobertura en la ficha */
.d-cob { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
.d-cob > .ico { width: 17px; height: 17px; }
.d-cob > .mono { margin-right: 4px; }

/* ---------- Diálogo ---------- */
#modal { position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.md-scrim { position: absolute; inset: 0; background: rgba(11, 28, 74, .5); opacity: 0; transition: opacity .35s; }
.md-box {
  position: relative; width: min(480px, 100%); padding: 30px; border-radius: var(--r-xl); background: var(--surface);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .35s, transform .5s var(--spring);
}
body.modal-open #modal { pointer-events: all; }
body.modal-open .md-scrim { opacity: 1; }
body.modal-open .md-box { opacity: 1; transform: none; }
.md-k { margin: 0 0 6px; color: var(--muted); }
.md-box h2 { margin: 0 0 10px; font: 800 26px/1.1 var(--f); letter-spacing: -.03em; }
.md-t { font-size: 14.5px; color: var(--ink-2); }
.md-box .fld { margin-bottom: 18px; }
.md-a { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
/* Ventana del editor de listas */
.md-box--lista { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 26px 22px; }
.md-lh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.md-lh .ibtn { background: var(--bg); width: 40px; height: 40px; }
.md-box--lista .md-t { font-size: 13.5px; margin-bottom: 14px; }
.md-box--lista .le-list { max-height: 44vh; }
.md-box--lista .md-a { margin-top: 18px; }

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 290; max-width: calc(100% - 32px);
  padding: 13px 22px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(16, 21, 48, .3);
  transform: translate(-50%, 160%); opacity: 0; transition: transform .6s var(--spring), opacity .4s; pointer-events: none;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1440px) {
  .tbl .c-cat { display: none; }
}
@media (max-width: 1340px) {
  .tbl .c-tel { display: none; }
}
@media (max-width: 1280px) {
  .views button span { display: none; }
  .favchip span { display: none; }
  .favchip { padding: 0 13px; }
  /* Rellenos más ajustados para que la barra de filtros siga en un solo renglón */
  .filterbar { gap: 6px; }
  .seg button { padding: 0 9px; }
  .fb-sep { margin: 0 2px; }
  .psel { padding-left: 13px; }
  .psel select { padding-right: 30px; background-position: right 12px center; }
  .views button { padding: 0 12px; }
  .lcard { grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); row-gap: 16px; }
  .lcard > .l-mid { grid-column: 1 / -1; grid-row: 2; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .lcard > .l-con { grid-row: 1; grid-column: 2; padding-right: 0; }
}
@media (max-width: 1500px) {
  .h-sum .pill--cats { display: none; } /* así el resumen de la tarjeta azul cabe en un renglón */
}
@media (max-width: 1180px) {
  /* Pantallas angostas: los cuadros pasan debajo de la tarjeta azul */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .sqs-h { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sq { min-height: 150px !important; }
  .h-sum .pill--cats { display: inline-flex; }
}
@media (max-width: 1360px) {
  /* Cuadros un poco más chicos para que la tarjeta azul conserve espacio */
  .sqs-h { grid-template-columns: repeat(2, 200px); }
  .sq { min-height: 200px; padding: 18px; }
  .sq strong { font-size: 40px; }
}
@media (max-width: 1240px) {
  .d-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); }
}
@media (max-width: 1080px) {
  .d-grid, .d-grid--even { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .sqs-h { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sq { min-height: 170px; }
}

/* iPhone/iPad: con letra menor a 16 px, iOS acerca la pantalla al tocar un campo (la regla solo la lee Safari de iOS) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: max(16px, 1em); }
  .in:not(.lg-code), .search input, .chip-in, .le-in, .prow input[type="date"].in { font-size: 16px !important; }
}

@media (max-width: 900px) {
  :root { --side-w: 0px; }
  .side, .deskbar { display: none; }

  .topbar {
    position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 14px; height: calc(62px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    background: rgba(241, 242, 248, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--navy);
    transition: color .5s, background .5s;
  }
  .top-logo { width: 108px; }
  .top-title { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
  .nav-burger { position: relative; width: 44px; height: 44px; margin-right: -6px; border-radius: 50%; background: var(--surface); }
  .nav-burger i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
  .nav-burger i:first-child { top: 17px; } .nav-burger i:last-child { top: 25px; }
  body.menu-open .nav-burger { background: rgba(255,255,255,.12); }
  body.menu-open .nav-burger i:first-child { top: 21px; transform: rotate(45deg); }
  body.menu-open .nav-burger i:last-child { top: 21px; transform: rotate(-45deg); }
  body.menu-open .topbar { color: #fff; background: transparent; backdrop-filter: none; z-index: 120; }
  body.menu-open .top-title { color: rgba(255,255,255,.6); }

  #menu {
    position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter);
    background: radial-gradient(120% 90% at 100% 0%, #3557D6 0%, var(--navy) 45%, var(--navy-deep) 100%); color: #fff;
    clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease);
  }
  body.menu-open #menu { clip-path: inset(0 0 0 0); }
  #menu nav { display: flex; flex-direction: column; }
  #menu nav a {
    display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-light);
    font: 800 clamp(36px, 10vw, 56px)/1.05 var(--f); letter-spacing: -.035em;
    opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .7s var(--ease-out);
  }
  #menu nav a small { color: var(--sun); font-size: 13px; font-weight: 700; letter-spacing: 0; }
  #menu nav a.active { color: var(--sun); }
  body.menu-open #menu nav a { opacity: 1; transform: none; }
  body.menu-open #menu nav a:nth-child(1) { transition-delay: .25s; }
  body.menu-open #menu nav a:nth-child(2) { transition-delay: .3s; }
  body.menu-open #menu nav a:nth-child(3) { transition-delay: .35s; }
  .menu-foot { position: absolute; bottom: calc(100px + env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter); display: flex; flex-direction: column; gap: 6px; opacity: .7; font-size: 12.5px; font-weight: 600; }

  .tabbar {
    position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 85; display: flex; justify-content: space-around; align-items: center;
    height: 64px; border-radius: 24px; background: var(--surface); box-shadow: 0 10px 30px rgba(16, 21, 48, .14);
    transition: transform .5s var(--ease-out);
  }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; width: 92px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
  .tabbar a.active { color: var(--navy); }
  .tab-add { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -30px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(21, 53, 136, .38); transition: transform .4s var(--spring); }
  .tab-add:active { transform: scale(.92); }
  .tab-add .ico { width: 24px; height: 24px; }
  body.menu-open .tabbar, body.drawer-open .tabbar { transform: translateY(140%); }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }

  .page { padding-top: 10px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .hero-main { min-height: 0; padding: 26px 24px; border-radius: var(--r-lg); }
  .hero-main h1 { font-size: 36px; }
  .sq { min-height: 150px; padding: 18px; }
  .sq strong { font-size: 38px; }

  .tools-top { flex-wrap: wrap; gap: 10px; }
  .h-sec { flex: 1; font-size: 19px; white-space: nowrap; }
  .views .v-tabla { display: none; }
  .search kbd { display: none; }
  .search { order: 3; flex: 1 1 100%; }
  /* En celular los filtros van en una sola tira que se desliza de lado */
  .filterbar { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 12px; padding: 2px var(--gutter); scrollbar-width: none; }
  .filterbar::-webkit-scrollbar { display: none; }

  .cards--compactas, .cards--amplias { grid-template-columns: minmax(0, 1fr); }
  .lcard { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .lcard > div { padding: 0; border-left: 0; }
  .lcard > .l-mid { grid-row: auto; padding-top: 14px; }
  .lcard > .l-con { grid-row: auto; grid-column: auto; padding-top: 14px; border-top: 1px solid var(--line); }

  .d-hero { padding: 22px; border-radius: var(--r-lg); }
  .d-top { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
  .d-actions { grid-column: 1 / -1; }
  .d-actions .btn { flex: 1; }
  .av--xl { width: 64px; height: 64px; border-radius: 22px; font-size: 24px; }
  .quickbar { justify-content: space-between; gap: 8px 10px; }
  .quickbar .qbtn { min-width: 56px; }
  .panel-h { padding: 20px 18px 0; }
  .panel-b { padding: 14px 18px 20px; }
  .dl > div { grid-template-columns: 110px 1fr; }

  .dr-panel { border-radius: 0; clip-path: inset(0 0 0 100%); }
  body.drawer-open .dr-panel { clip-path: inset(0 0 0 0); }
  .dr-h { padding: calc(20px + env(safe-area-inset-top)) 18px 14px; }
  .dr-b { padding: 4px 12px 24px; }
  .fs { padding: 18px 16px; }
  .dr-f { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .dr-f .btn { flex: 1; }
  .dr-err { flex-basis: 100%; }
}

@media (max-width: 600px) {
  .sqs-h { gap: 10px; }
  .sq { border-radius: 22px; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .rep-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .rep-row [name="t-num"] { grid-column: 1; }
  .rep-row [name="t-et"] { grid-column: 1; grid-row: 2; }
  .rep-row .chk--wa { grid-column: 1; grid-row: 3; }
  .rep-row .ibtn { grid-column: 2; grid-row: 1; }
  .wcard { padding: 20px; }
  .wcard .c-top { flex-wrap: wrap; }
  .imp-n { grid-template-columns: repeat(2, 1fr); }
  .acts .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rv { opacity: 1; transform: none; }
}

/* =========================================================
   REQUISICIONES DE OBRA, COMPRAS Y OBRAS (v0.3)
   Estados de cada material, tarjetas por obra y semana,
   documentos de la compra, gráfica de erogaciones y el
   formato de impresión (réplica del formato en papel).
   ========================================================= */

/* Estados de cada material: color + ícono + texto (nunca solo color) */
:root {
  --st-req: #5B6178;   --st-req-bg: #ECEDF3;
  --st-aut: #153588;   --st-aut-bg: #E7EAFB;
  --st-cot: #8A5A0E;   --st-cot-bg: #FBEBD0;
  --st-fac: #1D5FA8;   --st-fac-bg: #DDEBFA;
  --st-pag: #157A52;   --st-pag-bg: #DDF3E8;
  --st-rec: #FFFFFF;   --st-rec-bg: #0B1C4A;
}
.st { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border-radius: 99px; white-space: nowrap; font: 700 12.5px/1 var(--f); }
.st .ico { width: 15px; height: 15px; }
.st--sm { height: 24px; font-size: 11.5px; padding: 0 9px 0 6px; }
.st--requisitado { color: var(--st-req); background: var(--st-req-bg); }
.st--autorizado { color: var(--st-aut); background: var(--st-aut-bg); }
.st--cotizado { color: var(--st-cot); background: var(--st-cot-bg); }
.st--facturado { color: var(--st-fac); background: var(--st-fac-bg); }
.st--pagado { color: var(--st-pag); background: var(--st-pag-bg); }
.st--recibido { color: var(--st-rec); background: var(--st-rec-bg); }

/* Barra apilada de avance (2 px de separación entre tramos) */
.sbar { display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; background: var(--bg); }
.sbar i { display: block; height: 100%; min-width: 4px; }
.sbar .b-requisitado { background: #B9BDCC; }
.sbar .b-autorizado { background: #8C9EE6; }
.sbar .b-cotizado { background: var(--sun); }
.sbar .b-facturado { background: #4C8BD6; }
.sbar .b-pagado { background: #2FA374; }
.sbar .b-recibido { background: var(--navy-deep); }
.slegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.slegend span { display: inline-flex; align-items: center; gap: 6px; }
.slegend i { width: 8px; height: 8px; border-radius: 3px; }

/* Interruptor de rol (solo en el mockup) */
.rol { background: var(--surface); }
.rol button { display: inline-flex; align-items: center; gap: 6px; }
.rol button .ico { width: 16px; height: 16px; }


/* Encabezado: cuadro verde de "pagados" */
.sq--ok { background: var(--ok-bg); color: #0E5A3C; }
.sq--ok strong { color: var(--ok); }
.sq--ok .sq-go { color: var(--ok); }
.sq small.big { font-size: 13px; }
.h-money { font-variant-numeric: tabular-nums; }

/* Navegador de semanas */
.wk { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 46px; padding: 4px; border-radius: 99px; background: var(--surface); }
.wk button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink-2); transition: background .3s, color .3s; }
.wk button:hover:not(:disabled) { background: var(--lav); color: var(--navy); }
.wk button .ico { width: 18px; height: 18px; }
.wk .wk-l { min-width: 172px; padding: 0 8px; text-align: center; line-height: 1.15; }
.wk .wk-l b { display: block; font-size: 14px; font-weight: 800; }
.wk .wk-l small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.wk .wk-hoy { width: auto; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--lav); }

/* Grupo por obra */
.ogroup { margin-bottom: 30px; }
.ogroup-h { display: flex; align-items: center; gap: 12px; margin: 0 4px 12px; }
.ogroup-h h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ogroup-h .sub { margin: 0; }
.ogroup-h .p-av { background: var(--surface); }
.ogroup-h > .link-u { margin-left: auto; font-size: 13px; }

.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.rcard { gap: 14px; }
.rcard .c-top { padding-right: 0; align-items: center; }
.r-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--lav); color: var(--navy); }
.r-ic .ico { width: 24px; height: 24px; }
.r-ic--ext { background: var(--sun-bg); color: var(--sun-ink); }
.r-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.r-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.r-nums > div { padding: 10px 12px; border-radius: 16px; background: var(--bg); min-width: 0; }
.r-nums small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.r-nums b { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.tagx { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 12px/1 var(--f); background: var(--bg); color: var(--ink-2); white-space: nowrap; }
.tagx--ext { background: var(--sun-bg); color: var(--sun-deep); }
.tagx--ok { background: var(--ok-bg); color: var(--ok); }
.tagx--wait { background: var(--warn-bg); color: var(--warn); }
.tagx--demo { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }
.tagx .ico { width: 14px; height: 14px; }

/* Historial por semana */
.hist .tbl { min-width: 680px; }
.hist .sbar { width: 160px; }
.pct { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Tira de estados (detalle de requisición) */
.pipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.pipe > div { position: relative; padding: 14px 14px 12px; border-radius: 20px; background: var(--surface); min-width: 0; }
.pipe b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 10px; }
.pipe .st { max-width: 100%; }
.pipe > div.zero { opacity: .5; }
.pipe > div:not(:last-child)::after { content: ''; position: absolute; right: -7px; top: 50%; width: 6px; height: 2px; background: var(--line-2); }

/* Tabla de materiales */
.rtbl { min-width: 980px; }
.rtbl td { font-size: 13.5px; }
.rtbl .c-n { width: 40px; color: var(--muted); font-weight: 700; text-align: center; padding-left: 18px; }
.rtbl .c-q { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.rtbl .ins b { display: block; font-weight: 750; }
.rtbl .ins small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.rtbl .c-dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rtbl .c-dt em { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--sun-bg); color: var(--sun-deep); font: 700 10.5px/1.4 var(--f); font-style: normal; }
.rtbl .c-prov a { font-weight: 700; color: var(--navy); }
.rtbl .c-prov a:hover { text-decoration: underline; }
.rtbl .c-ck { width: 44px; padding-right: 0; }
.ck { width: 18px; height: 18px; accent-color: var(--navy); cursor: pointer; }
.selbar { position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 12px 12px 22px; border-radius: 99px; background: var(--ink); color: #fff; box-shadow: 0 16px 36px rgba(16, 21, 48, .3); }
.selbar b { font-weight: 800; }
.selbar .btn { margin-left: auto; min-height: 40px; }
.selbar .btn--solid { background: #fff; color: var(--navy); border-color: #fff; box-shadow: none; }

/* Línea de tiempo de un material */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.tl li:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line-2); }
.tl li.done:not(:last-child)::before { background: var(--ok); }
.tl .dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--stone); }
.tl .dot .ico { width: 18px; height: 18px; }
.tl li.done .dot { background: var(--ok); color: #fff; }
.tl li.now .dot { background: var(--sun); color: #fff; box-shadow: 0 0 0 5px var(--sun-bg); }
.tl h4 { margin: 8px 0 2px; font-size: 15px; font-weight: 800; }
.tl li:not(.done):not(.now) h4 { color: var(--muted); }
.tl p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.tl p small { color: var(--muted); }

/* Documentos de la compra */
.docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.doc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.doc-h { display: flex; align-items: center; gap: 10px; }
.doc-n { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 800; }
.doc.ok .doc-n { background: var(--ok); color: #fff; }
.doc.next .doc-n { background: var(--sun); color: #fff; }
.doc-h h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.2; }
.doc-h small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.doc .files { display: flex; flex-direction: column; gap: 6px; }
.fchip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-size: 12.5px; font-weight: 650; color: var(--ink); }
.fchip .ico { width: 16px; height: 16px; flex: none; color: var(--navy); }
.fchip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchip em { margin-left: auto; flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--lav); color: var(--navy); }
a.fchip:hover { background: var(--lav); }
.fchip.none { color: var(--muted); font-weight: 550; border: 1px dashed var(--line-2); background: transparent; }
.doc .dmeta { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.doc .dmeta b { color: var(--ink); font-weight: 750; }
.drop-mini { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 10px; border: 2px dashed var(--lav-2); border-radius: 16px; background: var(--bg); color: var(--navy); font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; transition: background .3s, border-color .3s; }
.drop-mini:hover, .drop-mini.over { background: var(--lav); border-color: var(--navy); }
.drop-mini .ico { width: 20px; height: 20px; }
.doc .lock { color: var(--muted); font-size: 12px; font-weight: 600; }
.doc-act { margin-top: auto; }

.big-money { font-size: clamp(30px, 3vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.d-money { text-align: right; }
.d-money small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; font-weight: 650; }

/* Validaciones del XML */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; font-weight: 600; }
.checks li .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.checks .ok { background: var(--ok-bg); color: #0E5A3C; }
.checks .no { background: var(--bad-bg); color: #7A1E25; }
.checks .meh { background: var(--warn-bg); color: var(--warn); }

.ctbl { min-width: 560px; }
.ctbl td, .ctbl th { font-size: 13px; }
.ctbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ctbl tfoot td { font-weight: 800; border-bottom: 0; }
.ctbl tfoot tr:first-child td { border-top: 1px solid var(--line-2); }

/* Aviso al residente */
.msg { position: relative; max-width: 380px; padding: 12px 14px 22px; border-radius: 16px 16px 16px 4px; background: #E8F7DF; color: #14301B; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.msg time { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: #5D7A63; }
.msg-wrap { padding: 18px; border-radius: 20px; background: #EFE9E1; }
.msg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.msg-h .p-av { background: var(--ok); color: #fff; }
.msg-h b { display: block; font-size: 14px; }
.msg-h small { color: var(--muted); font-size: 12px; }
.auto { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--lav); color: var(--navy-deep); font-size: 13px; font-weight: 600; }
.auto .ico { width: 18px; height: 18px; flex: none; color: var(--navy); }
.auto--ok { background: var(--ok-bg); color: #0E5A3C; }
.auto--ok .ico { color: var(--ok); }
.auto--warn { background: var(--sun-bg); color: var(--sun-deep); }
.auto--warn .ico { color: var(--sun-deep); }

/* Lista de compras */
.ccard { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr) minmax(170px, auto); }
.ccard .l-mid { gap: 10px; }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--bg); color: var(--stone); }
.dchip .ico { width: 14px; height: 14px; }
.dchip.ok { background: var(--ok-bg); color: var(--ok); }
.c-total { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; text-align: right; }
.c-total b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.c-total small { color: var(--muted); font-size: 12px; font-weight: 600; }

/* Gráfica de erogaciones por semana (una serie) */
.chart-wrap { position: relative; }
.chart-wrap { min-width: 0; }
.chart { display: block; width: 100%; height: 220px; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .ax text { fill: var(--muted); font: 600 11px var(--f); }
.chart .bar { fill: #9AAAE6; transition: fill .2s; }
.chart .bar.cur { fill: var(--navy); }
.chart .hit { fill: transparent; cursor: default; }
.chart g.col:hover .bar { fill: var(--blue); }
.chart .lbl { fill: var(--ink); font: 800 11.5px var(--f); }
.ctip { position: absolute; z-index: 5; pointer-events: none; min-width: 170px; padding: 10px 12px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.4; box-shadow: 0 12px 30px rgba(16, 21, 48, .3); transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .15s; }
.ctip.on { opacity: 1; }
.ctip b { display: block; font-size: 15px; font-weight: 800; }
.ctip small { color: rgba(255,255,255,.7); }
.chart-side { display: flex; flex-direction: column; gap: 10px; }
.chart-side .stats4 { grid-template-columns: minmax(0, 1fr); }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: start; }

/* Obras */
.ocard .c-top { padding-right: 0; }
.ocard .av { background: var(--navy); color: #fff; font-size: 14px; letter-spacing: 0; }

/* Formulario de requisición: renglones de materiales */
.prow-h, .prow { display: grid; grid-template-columns: 26px minmax(0, 2.2fr) 96px 84px minmax(0, 1.4fr) minmax(0, 1.4fr) 32px; gap: 6px; align-items: center; }
.prow-h { padding: 0 2px 4px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.prows { display: flex; flex-direction: column; gap: 6px; }
.prow > i { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.prow .in { min-height: 40px; padding: 8px 10px; font-size: 13.5px; border-radius: 12px; }
.prow select.in { height: 40px; padding-right: 28px; background-position: right 10px center; }
.prow input[type="date"].in { padding: 6px 8px; font-size: 12.5px; }
.prow .ibtn { width: 32px; height: 32px; color: var(--muted); }
.prow .ibtn:hover { color: var(--bad); background: var(--bad-bg); }
.dr-panel.wide { width: min(1120px, 100%); }


@media (max-width: 600px) {
  .chart-side .stats4 { grid-template-columns: minmax(0, 1fr); }
  .r-nums b { font-size: 14px; }
}


/* ---------- Integración con la app (v0.3) ---------- */
/* "Ver como" solo en requisiciones, compras y obras */
.deskbar .rol, .menu-foot .rol { display: none; }
body[data-page="requisiciones"] .deskbar .rol, body[data-page="compras"] .deskbar .rol, body[data-page="obras"] .deskbar .rol { display: flex; }
body[data-page="requisiciones"] .menu-foot .rol, body[data-page="compras"] .menu-foot .rol, body[data-page="obras"] .menu-foot .rol { display: flex; align-self: flex-start; margin-top: 10px; background: rgba(255,255,255,.12); }
.menu-foot .rol button { color: #fff; }
.menu-foot .rol button[aria-pressed="true"] { background: #fff; color: var(--navy); }

.panel-b--flush { padding: 8px 0 6px; }
.panel-b--flush .tablewrap { border-radius: 0 0 var(--r-lg) var(--r-lg); }  /* la tabla no se sale de las esquinas redondeadas de la tarjeta */
.tbl th.num, .tbl td.num { text-align: right; }
.tbl .pl { padding-left: 24px; }
.tbl .pr { padding-right: 24px; }
.hist td.pr { font-weight: 700; font-variant-numeric: tabular-nums; }
.hist { margin-top: 4px; }
.r-fb { margin: 0; }
.r-empty { margin: 0; max-width: none; border: 2px dashed var(--lav-2); background: transparent; }
.sq-de { font-size: 22px; opacity: .6; }
.sq-money { font-size: 28px !important; }
.psel--sm { height: 38px; }
.chart-panel { margin-bottom: 26px; }
.chart-nota { margin: 10px 0 0; }
.chart .ax text.cur { fill: var(--ink); font-weight: 800; }
.r-meta-bar { gap: 8px 28px; font-size: 13.5px; }
.m-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.m-head .lead-s { margin: 0; }
.rtbl--c { min-width: 640px; }
.in--date { min-height: 36px; width: 150px; padding: 4px 8px; font-size: 13px; }
.d-igual { display: block; font-size: 11px; }
.dl--fac { margin: 16px 0; }
.tablewrap--bg { background: var(--bg); }
.c-mats { font-size: 13.5px; }
.o-provs { display: flex; flex-direction: column; gap: 6px; }
.o-provs .chip-ro { height: 26px; font-size: 12px; }
a.chip-ro:hover { border-color: var(--navy); color: var(--navy); }
.d-side .lead-s { margin: 0; }
.r-datos { margin-top: 16px; }
.r-datos .imp-n { margin: 0 0 16px; }
.tline .tacts .st { margin-left: 6px; }

/* Menú móvil con seis secciones */
@media (max-width: 900px) {
  body.menu-open #menu nav a:nth-child(4) { transition-delay: .4s; }
  body.menu-open #menu nav a:nth-child(5) { transition-delay: .45s; }
  body.menu-open #menu nav a:nth-child(6) { transition-delay: .5s; }
  #menu nav a { font-size: clamp(30px, 8.5vw, 48px); padding: 9px 0; }
  /* 2026-10-09: con 11 secciones el menú ya no cabía y el bloque del usuario tapaba Bitácora y Respaldo.
     Ahora todo va en columna (sin posiciones absolutas) y, si no cabe, el menú se desplaza. */
  #menu { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-top: calc(84px + env(safe-area-inset-top)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  #menu nav a { font-size: clamp(24px, 6.6vw, 38px); padding: 8px 0; }
  body.menu-open #menu nav a:nth-child(n+7) { transition-delay: .55s; }
  .menu-foot { position: static; margin-top: auto; padding-top: 26px; opacity: 1; }   /* pie: al fondo de la pantalla; si no cabe, debajo de la lista */
  .menu-foot > span { opacity: .7; text-align: center; line-height: 1.25; }
  .menu-foot > span + span { margin-top: -4px; }
  .menu-foot > span.solo-jefes { justify-content: center; }
  .tabbar { justify-content: space-between; padding: 0 6px; }
  .tabbar a { width: auto; flex: 1; min-width: 0; font-size: 11px; white-space: nowrap; }
  .tab-add { flex: none; margin-left: 4px; margin-right: 4px; }
  .in--date { width: 100%; }
}

/* ---------- Formato de impresión (PDF) ---------- */
#print { display: none; }
@media print {
  @page { size: letter portrait; margin: 10mm; }
  body.printing { background: #fff !important; }
  body.printing > *:not(#print) { display: none !important; }
  body.printing #print { display: block !important; color: #000; font-family: Calibri, Arial, sans-serif; }
}
.pf { width: 100%; color: #000; font-family: Calibri, Arial, sans-serif; }
.pf-h { display: grid; grid-template-columns: 200px 1fr; align-items: end; gap: 10px; margin-bottom: 8px; }
.pf-logo { width: 190px; color: #1d1d1b; }
.pf-t { text-align: center; }
.pf-t h1 { margin: 0 0 6px; font-size: 13pt; font-weight: 700; }
.pf-t p { margin: 0; display: flex; justify-content: center; gap: 70px; font-size: 8pt; font-weight: 700; }
.pf table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pf th, .pf td { border: 1px solid #000; padding: 1px 4px; font-size: 7.5pt; text-align: center; vertical-align: middle; height: 13px; overflow: hidden; }
.pf th { background: #D0CECE; font-weight: 700; height: auto; padding: 4px; }
.pf td.l { text-align: left; }
.pf .pf-firmas { display: flex; justify-content: space-around; margin: 46px 0 26px; }
.pf thead { display: table-header-group; }   /* encabezado repetido en cada hoja */
.pf tr, .pf .pf-firmas { break-inside: avoid; }
.pf .pf-firmas div { width: 38%; border-top: 1px solid #000; padding-top: 3px; text-align: center; font-size: 7.5pt; font-weight: 700; }
.pf h2 { margin: 0 0 6px 18px; font-size: 8pt; font-weight: 700; }
.pf ol { margin: 0; padding-left: 34px; font-size: 7pt; line-height: 1.3; }
.pf ol li { margin-bottom: 2px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1360px) {
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipe > div::after { display: none; }
  .ccard { grid-template-columns: minmax(0, 1fr) auto; }
  .ccard > .l-mid { grid-column: 1 / -1; grid-row: 2; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .ccard > .c-total { grid-row: 1; grid-column: 2; }
  .rol button span { display: none; }
}
@media (max-width: 1080px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-side .stats4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .wk { flex: 1 1 100%; justify-content: space-between; }
  .ccard { grid-template-columns: minmax(0, 1fr); }
  .ccard > .c-total { grid-row: auto; grid-column: auto; align-items: flex-start; text-align: left; padding-top: 14px; border-top: 1px solid var(--line); }
  .ccard > .l-mid { grid-row: auto; }
  .d-money { grid-column: 1 / -1; text-align: left; }
  .prow-h { display: none; }
  .prow { grid-template-columns: 1fr 1fr 32px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
  .prow > i { display: none; }
  .prow [name="insumo"], .prow [name="obs"], .prow [name="destino"] { grid-column: 1 / -1; }
  .prow .ibtn { grid-column: 3; grid-row: 2; }
  .selbar { border-radius: 24px; }
  .r-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   v0.4 · Sesión: pantalla de acceso y usuario en la barra
   ========================================================= */
#login {
  position: fixed; inset: 0; z-index: 280; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--bg); clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease);
}
#login.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
body.login-open { overflow: hidden; }
.lg-brand {
  position: relative; overflow: hidden; margin: 16px 0 16px 16px; padding: clamp(28px, 5vw, 64px); border-radius: var(--r-xl);
  display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #3557D6 0%, var(--navy) 45%, var(--navy-deep) 100%);
}
.lg-mark { width: 56px; color: #fff; }
.lg-deco { position: absolute; right: -60px; bottom: -70px; width: 420px; color: rgba(255,255,255,.07); pointer-events: none; }
.lg-eyebrow { margin: 0 0 14px; color: var(--sun); font-weight: 700; font-size: 14px; }
.lg-brand h1 { margin: 0; font: 800 clamp(34px, 4.4vw, 60px)/1.02 var(--f); letter-spacing: -.035em; }
.lg-side { display: grid; place-items: center; padding: 24px var(--gutter); }
.lg-card {
  width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 4vw, 40px);
  background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(16, 21, 48, .08);
}
.lg-card h2 { margin: 0; font: 800 28px/1.1 var(--f); letter-spacing: -.02em; }
.lg-sub { margin: 0; color: var(--ink-2); }
.lg-code { font-size: 24px; font-weight: 750; letter-spacing: .35em; text-align: center; }
.lg-err { margin: 0; min-height: 1.2em; color: var(--bad); font-size: 13.5px; font-weight: 600; }
.lg-err:empty { min-height: 0; }
.lg-go { width: 100%; min-height: 50px; }
.lg-links { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.lg-note { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--lav); color: var(--ink-2); font-size: 13px; line-height: 1.45; }
@media (max-width: 900px) {
  #login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .lg-brand { margin: 12px 12px 0; min-height: 0; gap: 28px; padding: 24px; }
  .lg-brand h1 { font-size: 32px; }
  .lg-mark { width: 40px; }
  .lg-deco { width: 260px; }
  .lg-side { place-items: start center; padding: 16px; }
}

/* Usuario en sesión */
.me { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 20px; background: var(--bg); }
.me:empty { display: none; }
.me-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 750; font-size: 13px; }
.me-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.me-id b { font-size: 13.5px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-id small { color: var(--muted); font-size: 12px; font-weight: 600; }
.me-out { flex: none; }
.me--menu { background: rgba(255,255,255,.12); color: #fff; margin-bottom: 8px; opacity: 1; }
.me--menu .me-av { background: var(--sun); color: var(--navy-deep); }
.me--menu .me-id small { color: rgba(255,255,255,.7); }
.me--menu .me-out { color: #fff; }
.fav.is-ro { cursor: default; }
.fav.is-ro:hover { transform: none; }

/* =========================================================
   v0.5 · Requisiciones en el servidor: estados, revisión, usuarios
   ========================================================= */
/* Material fuera del flujo */
.st--borrador { color: var(--muted); background: transparent; border: 1px dashed var(--line-2); }
.st--rechazado { color: var(--bad); background: var(--bad-bg); }
.sbar .b-borrador { background: repeating-linear-gradient(45deg, var(--lav-2) 0 4px, var(--bg) 4px 8px); }
.sbar .b-rechazado { background: #E7A2A8; }
.slegend .b-borrador { background: var(--lav-2); }
.slegend .b-rechazado { background: #E7A2A8; }
.tagx--draft { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }
.tagx--bad { background: var(--bad-bg); color: var(--bad); }
tr.row.is-off td { opacity: .55; }
tr.row.is-off td:last-child { opacity: 1; }
.rtbl .ins small.rej { color: var(--bad); }
.prow.is-off { opacity: .6; }

/* Revisión material por material (coordinador) */
.rev { display: inline-flex; gap: 6px; }
.rev-b {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 8px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--surface); font: 700 12px/1 var(--f); color: var(--ink-2);
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--spring);
}
.rev-b .ico { width: 15px; height: 15px; }
.rev-b:not(:disabled):hover { transform: translateY(-1px); }
.rev-ok:hover, .rev-ok[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); }
.rev-ok[aria-pressed="true"] { background: var(--ok-bg); }
.rev-no:hover, .rev-no[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); }
.rev-no[aria-pressed="true"] { background: var(--bad-bg); }

/* Documentos: archivos privados (se abren con liga temporal) y quitar */
button.fchip { width: 100%; text-align: left; cursor: pointer; border: 0; }
button.fchip:hover { background: var(--lav); }
.doc-x { margin-left: auto; width: 32px; height: 32px; color: var(--muted); }
.doc-x:hover { color: var(--bad); background: var(--bad-bg); }

/* Obras: suplentes */
.ocard.is-mine { box-shadow: inset 0 0 0 2px var(--sun); }
.o-sup { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--sun-bg); color: var(--sun-deep); font-size: 12.5px; font-weight: 600; }
.o-sup .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sup-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sup-list li { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 14px; background: var(--bg); font-size: 13.5px; }
.sup-list li > span { flex: 1; min-width: 0; }
.sup-list li small { display: block; color: var(--muted); font-size: 12px; }
.sup-list li.is-off { opacity: .55; }
.sup-add { margin-bottom: 10px; }

/* Usuarios */
.solo-jefes { display: none !important; }
body[data-rol="direccion"] .solo-jefes, body[data-rol="admin"] .solo-jefes { display: flex !important; }
.u-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.u-stats > div { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); }
.u-stats small { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.u-stats b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.u-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.u-who b { display: block; font-weight: 750; }
.u-who small { display: block; color: var(--muted); font-size: 12px; }
.u-pend { background: var(--lav); color: var(--navy); }
.u-pend .ico { width: 16px; height: 16px; }
.tagx--rol.r-direccion, .tagx--rol.r-admin { background: var(--navy); color: #fff; }
.tagx--rol.r-compras { background: var(--st-fac-bg); color: var(--st-fac); }
.tagx--rol.r-coordinador { background: var(--sun-bg); color: var(--sun-deep); }
.tagx--rol.r-residente { background: var(--lav); color: var(--navy); }
.u-rolsel { display: flex; flex-direction: column; gap: 8px; }
.u-rol { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--bg); background: var(--bg); cursor: pointer; transition: border-color .25s, background .25s; }
.u-rol:has(input:checked) { border-color: var(--blue); background: var(--surface); }
.u-rol input { margin-top: 3px; accent-color: var(--navy); }
.u-rol b { display: block; font-size: 14px; }
.u-rol small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.u-roles > div { grid-template-columns: 180px 1fr; }
@media (max-width: 900px) {
  .u-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rev-b span { display: none; }
  .rev-b { padding: 0 8px; }
}

/* =========================================================
   v0.6 · Barra lateral reordenada, Inicio y bienvenida
   ========================================================= */
/* Barra lateral: más compacta para que quepan los 5 módulos de "Muy pronto" a 800 px de alto */
.side-app { margin-bottom: 16px; }
.side-nav a { height: 34px; white-space: nowrap; }   /* v0.9: 34 px para que quepan Bitácora y Caja chica a 1280×800 */
.side-nav a > span:first-child, .side-soon i { flex: none; display: grid; }
.side-sep { display: block; height: 1px; margin: 6px 14px; background: var(--line); }
.side-soon { margin-top: 12px; gap: 0; }
.side-soon p { margin-bottom: 2px; }
.side-soon span { height: 21px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-soon span .ico { width: 18px; height: 18px; }
.side-foot { padding-top: 14px; gap: 8px; }
.side .backup { padding: 10px 14px; }
.side { scrollbar-width: thin; }

/* ---------- Bienvenida: estructura común (página Inicio y pantalla completa) ---------- */
.we { display: grid; grid-template-columns: minmax(360px, 34%) 1fr; gap: 14px; }
.we-card { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 40px 40px 30px; border-radius: var(--r-xl); background: var(--surface); overflow: hidden; container-type: inline-size; }
.we-logo { width: 190px; color: var(--navy); }
.we-logo rect, .we-logo path { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.we-logo .m2 { transform-origin: right center; }
.we.go .we-logo rect, .we.go .we-logo path { animation: mod .7s var(--ease) forwards; }
.we-app { margin: 10px 0 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.we-mid { margin: auto 0; padding: 28px 0; }
.we-hola { margin: 0 0 10px; font-size: 15px; font-weight: 650; color: var(--muted); }
/* El título se ajusta al ancho de la tarjeta ("construimos" debe caber en un renglón) */
.we-h { margin: 0; font: 800 clamp(32px, 16cqi, 64px)/1 var(--f); letter-spacing: -.045em; color: var(--ink); }
.we-h span { display: block; overflow: hidden; padding-bottom: .08em; }
.we-h span > i { display: block; font-style: normal; transform: translateY(105%); }
.we.go .we-h span > i { transform: none; transition: transform 1s var(--ease-out); }
.we-h em { font-style: normal; color: var(--navy); }
.we-p { max-width: 34ch; margin: 18px 0 0; font-size: 15.5px; color: var(--ink-2); }
.we-cta { margin-top: 28px; }
.we-cta .btn { height: 54px; padding: 0 26px; font-size: 15px; }
.we-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; }
.we-stats div { padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.we-stats b { display: block; font: 800 26px/1 var(--f); letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.we-stats small { display: block; margin-top: 6px; font-size: 12px; font-weight: 650; color: var(--muted); }
.we-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 650; color: var(--stone); }
.we-ghost { position: absolute; right: -46px; top: -46px; width: 190px; color: var(--lav); opacity: .7; pointer-events: none; }
.we-fx { opacity: 0; transform: translateY(16px); }
.we.go .we-fx { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d) * 1ms); }

/* Renders: cada uno entra en 5 franjas, como la cortina, con un acercamiento lento */
.we-stage { position: relative; min-height: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--navy-deep); isolation: isolate; container-type: inline-size; }
.we-slide { position: absolute; inset: 0; }
.we-slide > i { position: absolute; inset: 0; overflow: hidden; clip-path: inset(var(--t) 100% var(--b) 0); transition: clip-path 1s var(--ease); transition-delay: calc(var(--k) * 70ms); }
.we-slide.show > i { clip-path: inset(var(--t) 0 var(--b) 0); }
.we-slide.lleno > i { clip-path: none; transition: none; }   /* ya entró: sin cortes entre franjas */
.we-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 9s linear; }
.we-slide.show img { transform: scale(1.02); }
.we-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(11,28,74,.35) 0%, transparent 28%, transparent 55%, rgba(11,28,74,.78) 100%); }
.we-top { position: absolute; z-index: 3; top: 24px; left: 28px; right: 28px; display: flex; justify-content: flex-end; align-items: center; color: #fff; }
.we-nav { display: flex; gap: 8px; }
.we-nav button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; transition: background .3s, transform .4s var(--spring); }
.we-nav button:hover { background: rgba(255,255,255,.28); transform: scale(1.06); }
.we-nav .ico { width: 20px; height: 20px; }
.we-cap { position: absolute; z-index: 3; left: 32px; right: 32px; bottom: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; color: #fff; }
.we-num { font: 800 14px/1 var(--f); letter-spacing: .04em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.we-num b { color: #fff; }
.we-name { margin: 10px 0 0; font: 800 clamp(26px, 6cqi, 54px)/1.02 var(--f); letter-spacing: -.04em; }
.we-col { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); }
.we-name, .we-col { overflow: hidden; }
.we-name > span, .we-col > span { display: block; transition: transform .7s var(--ease-out), opacity .5s; }
.we-cap.swap .we-name > span, .we-cap.swap .we-col > span { transform: translateY(100%); opacity: 0; transition: transform .35s var(--ease), opacity .3s; }
.we-thumbs { display: flex; gap: 6px; flex: none; }
.we-thumbs button { position: relative; width: 54px; height: 38px; padding: 0; border-radius: 10px; overflow: hidden; opacity: .55; background: var(--navy-deep); transition: opacity .3s, width .5s var(--ease-out); }
.we-thumbs button:hover { opacity: .85; }
.we-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.we-thumbs button.on { opacity: 1; width: 84px; }
.we-thumbs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--sun); }
.we-thumbs button.on::after { width: 100%; transition: width var(--dur) linear; }

/* Página Inicio: ocupa el alto de la ventana bajo la barra superior */
.page--inicio { padding-bottom: 14px; }
.we--page { height: calc(100vh - 96px); min-height: 600px; max-height: 980px; }
.en-inicio .deskbar-r { visibility: hidden; }

/* Pantalla completa: una vez por sesión, después de entrar */
#welcome { position: fixed; inset: 0; z-index: 270; background: var(--bg); clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease); }
#welcome.bye { clip-path: inset(0 0 100% 0); pointer-events: none; }
body.welcome-open { overflow: hidden; }
.we--full { position: absolute; inset: 0; padding: 14px; }
.we--full.leave .we-card { transform: translateX(-30px); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.we--full.leave .we-stage { transform: scale(.96); opacity: 0; transition: transform .8s var(--ease), opacity .6s .1s; }
.we-open { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; pointer-events: none; }
.we-open > i { flex: 1; margin: -1px 0; background: linear-gradient(90deg, var(--navy-deep), var(--navy) 60%, #2443B8); transform-origin: left; transition: transform .7s var(--ease); backface-visibility: hidden; }
.we-open > i:nth-child(2) { transition-delay: .05s; } .we-open > i:nth-child(3) { transition-delay: .1s; }
.we-open > i:nth-child(4) { transition-delay: .15s; } .we-open > i:nth-child(5) { transition-delay: .2s; }
.we-open.out > i { transform-origin: right; transform: scaleX(0); }
.we-open.entra > i { animation: weEntra .38s var(--ease) both; }  /* al abrir desde "Inicio" */
@keyframes weEntra { from { transform: scaleX(0); } }
#welcome.entrando { background: transparent; }
#welcome.entrando .we--full { visibility: hidden; }
.we-open .curtain-mark { opacity: 1; }
.we-open .curtain-mark rect, .we-open .curtain-mark path { animation: mod .45s var(--ease) forwards; }
.we-open.out .curtain-mark { opacity: 0; transition: opacity .25s; }

@media (max-width: 1440px) { .we--page .we-thumbs { display: none; } }
@media (max-width: 1180px) {
  .we { grid-template-columns: minmax(320px, 40%) 1fr; }
  .we-card { padding: 32px 30px 26px; }
  .we-thumbs { display: none; }
}
@media (max-width: 900px) {
  .we { grid-template-columns: 1fr; }
  .we-stage { order: -1; height: 46vh; min-height: 300px; }
  .we-card { padding: 28px 24px 24px; }
  .we-mid { padding: 22px 0; }
  .we-ghost { display: none; }
  .we-top { top: 16px; left: 16px; right: 16px; }
  .we-cap { left: 22px; right: 22px; bottom: 22px; }
  .we--page { height: auto; min-height: 0; max-height: none; }
  .page--inicio { padding-bottom: 110px; }
  /* Las filas toman el alto de su contenido (sin esto la tarjeta se encogía al alto de la pantalla y el botón quedaba oculto) */
  .we { grid-auto-rows: max-content; }
  .we-card { overflow: visible; }
  .we--full { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); }
  .we--full .we-stage { height: 34vh; height: 34svh; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .we-slide > i, .we-slide img { transition: none; }
  .we-fx, .we-h span > i { opacity: 1; transform: none; }
}

/* =========================================================
   v0.7 · Diferencias en compras (factura, cotización y pago no cuadran al centavo)
   ========================================================= */
.note--bad { background: var(--bad-bg); color: #7A1E25; box-shadow: inset 0 0 0 1.5px rgba(180, 49, 58, .35); }
.note--bad .ico { color: var(--bad); width: 22px; height: 22px; }
.note--bad b { color: var(--bad); }
.doc.dif { outline: 2px solid var(--bad); outline-offset: -2px; }
.doc.dif .doc-n { background: var(--bad); color: #fff; }
.doc-dif { color: var(--bad); font-weight: 750; }
.dchip.bad { background: var(--bad); color: #fff; }
.ccard--dif { outline: 2px solid var(--bad); outline-offset: -2px; }
.dif-l { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--bad); font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.dif-l .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.tagx--dif .ico { width: 14px; height: 14px; }
.dif-f { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 99px; background: var(--bad-bg); color: var(--bad); font-size: 13px; font-weight: 750; white-space: nowrap; transition: background .3s, color .3s; }
.dif-f .ico { width: 16px; height: 16px; }
.dif-f:hover { background: #F7D2D6; }
.dif-f[aria-pressed="true"] { background: var(--bad); color: #fff; }

/* v0.7 · Cambio de residente con historial y avisos de requisición */
.ocard .c-bot { flex-wrap: wrap; }
.o-cambiar { margin-left: auto; }
.res-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-now > div { flex: 1; min-width: 140px; }
.res-now b { display: block; font-weight: 750; }
.res-now small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.res-hist { margin-top: 14px; }
.res-hist ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.res-hist li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-size: 13px; }
.res-hist li span { color: var(--muted); font-weight: 600; }
.r-aviso { display: inline-flex; align-items: center; gap: 6px; }
.r-aviso .ico { width: 15px; height: 15px; color: var(--ok); }

/* v0.8 · Sin IVA, suministro (sustituto / no suministrado), acciones del admin en compras */
.st--nosum { color: var(--bad); background: var(--bad-bg); }
.sbar .b-nosum, .slegend .b-nosum { background: #C9727A; }
.rtbl .ins small.sust { color: var(--warn); }
.sum-nota { margin: 0; font-size: 13px; }
.sum-nota small { display: block; font-weight: 650; }
.sum-nota .sust { color: var(--warn); }
.sum-nota .rej { color: var(--bad); }
.sum-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tagx--siniva { background: var(--sun-bg); color: var(--sun-deep); }
.doc--siniva { background: transparent; border: 1.5px dashed var(--line-2); }
.c-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.c-borrar { color: var(--bad); }
.c-borrar:hover { background: var(--bad-bg); }
/* Bitácora */
.bit-cambios { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.bit-cambios span { color: var(--muted); }
.bit-cambios b { color: var(--ink); font-weight: 700; }
.bit-acc { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 750; background: var(--bg); color: var(--ink-2); }
.bit-acc.insert { background: var(--ok-bg); color: var(--ok); }
.bit-acc.delete { background: var(--bad-bg); color: var(--bad); }
.bit-acc.update { background: var(--lav); color: var(--navy); }

/* v0.8 · Usuarios: separación entre las tarjetas (lista de usuarios y "Qué puede hacer cada rol") */
.u-panel + .u-panel { margin-top: 18px; }
.tagx--vacia { background: var(--bad-bg); color: var(--bad); }

/* v0.9 · Caja chica */
.st--caja { color: var(--sun-deep); background: var(--sun-bg); }
.sbar .b-caja, .slegend .b-caja { background: var(--sun); }
.klist { display: flex; flex-direction: column; gap: 10px; }
.kitem { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); }
.k-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.k-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.k-top b { font-weight: 750; font-size: 15px; }
.k-sub { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.k-rej { display: flex; gap: 6px; margin: 0; color: var(--bad); font-size: 12.5px; font-weight: 700; }
.k-rej .ico { width: 15px; height: 15px; flex: none; }
.k-files { display: flex; flex-wrap: wrap; gap: 6px; }
.k-files .fchip { max-width: 220px; }
.k-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.k-monto { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.k-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.kb-x { width: 36px; padding: 0; justify-content: center; color: var(--muted); }
.ogroup-h .btn--sm { margin-left: auto; }
.panel-h .rev-todos { margin-left: auto; color: var(--ok, #1a7f4b); }
@media (max-width: 900px) {
  .kitem { flex-direction: column; }
  .k-side { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* v0.10: "Guardar y volver" en el detalle de la compra */
.c-guardar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; margin: 4px 0 22px; }
.c-guardar .muted { display: inline-flex; align-items: center; gap: 6px; }
.c-guardar .muted svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .c-guardar { justify-content: stretch; } .c-guardar .btn { flex: 1; justify-content: center; } }

/* v0.10 · Datos fiscales y fotos de la remisión */
.solo-compras { display: none !important; }
body[data-rol="consulta"] .no-consulta { display: none !important; }
body[data-rol="direccion"] .solo-compras, body[data-rol="admin"] .solo-compras, body[data-rol="compras"] .solo-compras { display: flex !important; }
.psel--fa { height: 38px; gap: 8px; }
.psel--fa .fa-l { font-size: 11.5px; font-weight: 700; opacity: .75; }
.psel--fa select { max-width: 300px; }
.f-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.f-row .fchip { flex: 1; }
.ibtn--xs { width: 30px; height: 30px; flex: none; }
.ibtn--xs .ico { width: 14px; height: 14px; }
.lbtn { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; cursor: pointer; }
.fcard { display: flex; flex-direction: column; gap: 14px; }
.fcard .c-top { padding-right: 0; }
.fcard .tagx { margin-left: auto; flex: none; }
.dl--fis > div { grid-template-columns: 140px 1fr; padding: 8px 0; }
.fcard .files { display: flex; flex-wrap: wrap; gap: 6px; }
.fcard .c-bot { flex-wrap: wrap; justify-content: space-between; }
.f-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.f-acts .tbtn { background: var(--surface); }
@media (max-width: 900px) {
  .psel--fa { max-width: 100%; }
  .psel--fa select { max-width: 200px; }
  .dl--fis > div { grid-template-columns: 110px 1fr; }
}

/* v0.10 · Caja chica parte 2: gráfica apilada, avisos y reporte semanal */
.chart .bar--k { fill: var(--sun); }
.chart .bar--k.cur { fill: var(--sun-deep); }
.chart g.col:hover .bar--k { fill: var(--sun-ink, var(--sun-deep)); }
.c-ley { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 0; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.c-ley span { display: inline-flex; align-items: center; gap: 6px; }
.ley { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #9AAAE6; }
.ley--k { background: var(--sun); }
.k-aviso { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.k-aviso .ico { width: 14px; height: 14px; flex: none; color: var(--ok); }
.k-rep { display: flex; gap: 6px; margin-left: auto; }
.ogroup-h .k-rep + .btn--sm { margin-left: 0; }
.pf td.r { text-align: right; }
.pf tfoot td { border: 0; font-weight: 600; height: auto; padding: 2px 4px; }
.pf tfoot tr.tt td { font-weight: 800; padding-top: 5px; }
.pf .pf-n { margin: 6px 0 0; font-size: 7.5pt; }
@media (max-width: 900px) { .ogroup-h:has(.k-rep) { flex-wrap: wrap; } .k-rep { margin-left: 0; } }

/* v0.10 · "Muy pronto" plegable (cerrado por defecto) */
.soon-t { display: flex; align-items: center; gap: 8px; width: 100%; height: 26px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 750 12px/1 var(--f); cursor: pointer; transition: color .2s, background .2s; }
.soon-t:hover { color: var(--navy); background: var(--bg); }
.soon-t b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bg); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.soon-t i { margin-left: auto; display: grid; }
.soon-t i .ico { width: 14px; height: 14px; transition: transform .25s; }
.side-soon.open .soon-t i .ico { transform: rotate(180deg); }
.soon-list { display: none; }
.side-soon.open .soon-list { display: grid; }

/* Programación de colados (2026-10-07) */
.col-list { display: flex; flex-direction: column; gap: 10px; }
.colcard { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; cursor: pointer; }
.col-dia { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 18px; background: var(--lav); color: var(--navy); }
.col-dia b { font-size: 24px; font-weight: 800; line-height: 1; }
.col-dia small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.col-dia em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.col-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.col-main .sub { color: var(--muted); font-size: 13px; }
.col-conc { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.col-conc span { padding: 4px 10px; border-radius: 99px; background: var(--bg); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.col-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.col-side > b { font-size: 18px; font-weight: 800; white-space: nowrap; }
.col-prox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--ok-bg); }
.col-prox > b { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ok); }
.col-prox > b .ico { width: 16px; height: 16px; }
.col-prox a { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 14px; background: var(--surface); font-size: 12.5px; }
.col-prox a span { font-weight: 800; color: var(--ink); }
.col-prox a em { font-style: normal; color: var(--muted); font-weight: 600; }
.col-av { display: grid; place-items: center; background: var(--lav); color: var(--navy); }
.col-av .ico { width: 30px; height: 30px; }
.d-blk { display: block; }
.col-k { padding: 14px; margin-bottom: 12px; border-radius: 18px; background: var(--bg); }
.col-ev > [data-concretos] { margin-top: 16px; }   /* separa el bloque del concreto de los campos del evento */
.col-k > .fld { margin-top: 12px; }   /* "Aditivos y especiales" no queda pegado al campo de arriba */
.col-k-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.col-k-h b { font-size: 13.5px; }
.col-k .in { background: var(--surface); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fld--wide2 { grid-column: span 2; }
.col-check { display: flex; flex-direction: column; gap: 2px; }
.pf .pf-kv { margin: 8px 0; }
.pf .pf-kv th { width: 24%; text-align: left; background: #EDEDED; }
.pf .pf-kv td { text-align: left; height: auto; padding: 3px 6px; }
.pf .pf-marca { margin-bottom: 6px; padding: 4px; border: 1.5px solid #B4313A; color: #B4313A; text-align: center; font-weight: 800; font-size: 10pt; letter-spacing: .1em; }
.pf--col .pf-n { margin-top: 10px; }
.pf--col .pf-ev { margin: 10px 0 4px; font-size: 8.5pt; break-after: avoid; }
@media (max-width: 900px) {
  .colcard { grid-template-columns: 60px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .col-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .fld--wide2 { grid-column: auto; }
}
.col-kl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.col-kl li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.col-kv { flex: none; min-width: 64px; font-size: 18px; font-weight: 800; color: var(--navy); }
.col-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.col-chips span { padding: 4px 10px; border-radius: 99px; background: var(--surface); font-size: 12.5px; font-weight: 650; }
.col-kl small { display: block; margin-top: 6px; }
.col-tot { margin: 10px 4px 0; text-align: right; color: var(--muted); font-weight: 650; }
/* v0.12: separación de lo que va arriba de la cuadrícula del detalle (aviso, cotizaciones) y eventos */
.col-sec { margin-bottom: 16px; }
p.k-aviso.col-sec { margin: 0 0 12px; }
/* v0.14: tipo de solicitud de colado (concreto y bombeo · solo concreto · solo bombeo) */
.tagx--tipo { background: var(--lav); color: var(--blue); }
.dr-form[data-tipo="bombeo"] .col-solo-k { display: none !important; }
.dr-form:not([data-tipo="bombeo"]) .col-solo-b { display: none !important; }
.dr-form[data-tipo="concreto"] [data-fs-bomba] { display: none; }
.col-tipos { margin-bottom: 4px; }
.col-ev { padding: 14px; margin-bottom: 14px; border: 1.5px solid var(--lav); border-radius: 22px; }
.col-ev-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.col-ev-h b { font-size: 15px; color: var(--navy); }
.col-ev-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; }
.col-ev-t b { font-size: 14px; }
.col-ev-t span { color: var(--muted); font-size: 13px; font-weight: 600; }
.col-kl + .col-ev-t { margin-top: 16px; }
.col-sol { margin: 12px 0 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.col-sol span { display: flex; align-items: center; gap: 6px; }
.col-sol .ico { flex: none; width: 14px; height: 14px; }
.col-tot b { color: var(--ink); font-size: 16px; }
/* Programación de colados · cotizaciones, compra, plazos y cierre (v0.11) */
.col-hb { display: flex; flex-wrap: wrap; gap: 8px; }
.col-cmp td, .col-cmp th { vertical-align: top; }
.col-cmp tr.col-win td { background: var(--ok-bg); }
.col-cmp tr.col-off td { opacity: .55; }
.col-cmp tr.col-cond td { padding-top: 0; border-top: 0; }
.col-acc { white-space: nowrap; text-align: right; }
.col-acc .tbtn, .col-acc .ibtn { margin-left: 4px; }
.col-elegir { background: var(--navy) !important; color: #fff !important; }
.col-min { color: var(--ok); font-weight: 750; }
.col-arch { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.col-arch .fchip { padding: 4px 8px; font-size: 11.5px; }
.col-compras { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.col-compras > b { font-size: 13px; }
.col-compras .tline { text-decoration: none; color: inherit; }
.col-compras .tacts { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.col-aviso { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--sun-bg); color: var(--sun-deep); font-size: 13px; font-weight: 600; }
.col-aviso .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.col-neg { color: var(--bad); }
.col-lin { display: grid; grid-template-columns: minmax(0, 1fr) 90px 140px; gap: 10px; align-items: end; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--bg); }
.col-lin .in { background: var(--surface); }
.col-lin-c { align-self: center; font-size: 13px; font-weight: 650; }
.col-sum { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--lav); color: var(--navy-deep); font-size: 13px; }
.col-res { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--bg); }
.col-res h3 { margin: 0 0 10px; font-size: 15px; }
.col-r { padding: 10px 0; border-top: 1px solid var(--line); }
.col-r:first-of-type { border-top: 0; }
.col-r p { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 13px; }
.col-r p .ico { width: 16px; height: 16px; flex: none; }
.col-r p.ok { color: var(--ok); } .col-r p.no { color: var(--bad); }
.col-r .btn.is-sent { background: var(--ok-bg); color: var(--ok); }
.col-pp legend .chk, .col-pv legend { font-weight: 750; }
.col-add { margin-bottom: 14px; }
@media (max-width: 900px) {
  .col-lin { grid-template-columns: 1fr 1fr; }
  .col-lin-c { grid-column: 1 / -1; }
  .col-acc { white-space: normal; }
}

/* Personas de contacto en el formulario del proveedor (2026-10-09) */
.pc-ayuda { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--lav); color: var(--navy); font-size: 12.5px; }
.pc-ayuda .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.pc-ya { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.pc-ya li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pc-ya .ico { width: 16px; height: 16px; color: var(--blue); }
.pc { margin: 10px 0; padding: 12px 14px 8px; border: 1.5px solid var(--line); border-radius: 18px; }
.pc + .pc { margin-top: 12px; }
.pc-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: var(--navy); }
.pc-h .ibtn { width: 30px; height: 30px; }

/* Recuadros de explicación: en celular, detrás de un botón "i" (2026-10-09) */
.ayuda-fila { display: none; }
@media (max-width: 900px) {
  .note--ayuda { display: none; }
  .note--ayuda.abierta { display: flex; animation: ayudaEntra .28s var(--ease-out, ease-out); }
  .ayuda-fila { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
  .ayuda-b { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 5px 0 14px; border: 0; border-radius: 999px;
    background: var(--lav); color: var(--navy); font: 700 12.5px/1 var(--f); cursor: pointer; }
  .ayuda-b i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff;
    font: italic 800 13px/1 Georgia, serif; }
  .ayuda-b[aria-expanded="true"] i { font: 700 16px/1 var(--f); }
  .ayuda-b:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
}
@keyframes ayudaEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Barra inferior simétrica: 2 botones · + al centro, un poco arriba · 2 botones (2026-10-09).
   El cuarto botón depende del rol: Dirección/admin y coordinador → Colados; compras → Proveedores;
   residente → Pase de lista (v0.13; antes Caja chica); consulta (sin Compras ni +) → Colados y Proveedores. */
.tab-x { display: none !important; }
@media (max-width: 900px) {
  .tabbar { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; overflow: visible; }
  .tabbar a { flex: 1 1 0; width: auto; min-width: 0; font-size: 10.5px; letter-spacing: -.01em; white-space: nowrap; }
  .tab-add { flex: none; order: 0; width: 56px; height: 56px; margin: -34px 8px 0; box-shadow: 0 0 0 6px var(--bg), 0 10px 22px rgba(21, 53, 136, .38); }
  .tabbar .tab-add[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
  body[data-rol="direccion"] .tab-x--colados, body[data-rol="admin"] .tab-x--colados, body[data-rol="coordinador"] .tab-x--colados,
  body[data-rol="compras"] .tab-x--prov, body[data-rol="residente"] .tab-x--ft,
  body[data-rol="consulta"] .tab-x--colados, body[data-rol="consulta"] .tab-x--prov { display: grid !important; }
}

/* =========================================================
   Fuerza de trabajo (v0.13, 2026-10-09): pase de lista, cámara, trabajadores y registro
   ========================================================= */
body[data-rol="compras"] .no-compras { display: none !important; }
.ft-bar { align-items: center; }
.ft-obra { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); font-size: 14px; }
.ft-obra .ico { width: 18px; height: 18px; color: var(--navy); }
.ft .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 11px; font-size: 12px; font-weight: 700; }
.ft .pill .ico { width: 14px; height: 14px; }
.ft .pill--w { background: rgba(255, 255, 255, .15); color: #fff; }
.ft .pill--sun { background: var(--sun-bg); color: var(--sun-deep); }
.ft .pill--bad { background: var(--bad-bg); color: var(--bad); }
.ft-hero { max-width: 760px; margin-bottom: 16px; padding: 20px 24px; border-radius: var(--r-lg); color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-deep)); }
.ft-hero small { display: block; opacity: .78; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ft-hero b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 10px; }
.ft-pills { display: flex; flex-wrap: wrap; gap: 8px; }
[data-ft-pase], .ft-lista, .ft-th, .ft-chg, .ft-lock, .ft-kv, .ft-fotos, .ft-fotobox, .ft-acc, .ft-count, .ft-bajas, .ft .note { max-width: 760px; }
.ft-count { display: flex; gap: 10px; margin-bottom: 10px; }
.ft-count div { flex: 1; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface); }
.ft-count b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ft-count span { font-size: 12px; font-weight: 650; color: var(--muted); }
.ft-todos { max-width: 760px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 0 4px 6px; font-size: 13px; }
.ft-grp { display: flex; justify-content: space-between; gap: 10px; margin: 16px 6px 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ft-w { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin-bottom: 7px; border-radius: var(--r-md); background: var(--surface); text-align: left; }
.ft-w--btn { transition: box-shadow .25s, transform .25s; }
.ft-w--btn:hover { box-shadow: 0 6px 20px rgba(16, 21, 48, .08); }
.ft-w--btn > .arr { width: 20px; height: 10px; color: var(--stone); flex: none; transition: transform .25s, color .25s; }
.ft-w--btn:hover > .arr { transform: translateX(3px); color: var(--navy); }
.ft-w.is-off { opacity: .62; }
.ft-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lav); color: var(--navy); font-weight: 800; font-size: 13px; }
.ft-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ft-n b { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-n > span { font-size: 12.5px; color: var(--muted); }
.ft-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--sun-bg); color: var(--sun-deep); font-size: 11px; font-weight: 700; font-style: normal; vertical-align: 1px; }
.ft-mk { flex: none; display: flex; gap: 6px; }
.ft-mk button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 17px; font-weight: 800; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.ft-mk button:active { transform: scale(.92); }
.ft-mk button.o { font-size: 14px; }
.ft-mk button.a.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.ft-mk button.f.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.ft-mk button.o.on { background: var(--sun); border-color: var(--sun); color: var(--sun-deep); }
.ft-foot { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.ft-sig { width: 100%; justify-content: center; min-height: 52px; font-size: 15px; }
.ft-nl { font-size: 13.5px; }
.ft-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ft-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ft-opt span { display: block; padding: 14px 10px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); text-align: center; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s; }
.ft-opt input:checked + span { border-color: var(--sun); background: var(--sun-bg); color: var(--sun-deep); }
.ft-opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ft-fotobox { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); margin-bottom: 10px; }
.ft-fh { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.ft-cam-btn { width: 100%; justify-content: center; min-height: 50px; }
.ft-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.ft-ph { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md); background: var(--surface); text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.ft-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--lav); display: block; }
.ft-ph .ibtn { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .92); }
.ft-ph.is-bad { box-shadow: inset 0 0 0 2px var(--bad); }
.ft-ph.is-old { opacity: .6; }
.ft-pi { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 11px; font-size: 12px; color: var(--muted); }
.ft-pi b { font-size: 13.5px; color: var(--ink); }
.ft-bad { color: var(--bad); font-weight: 700; }
.ft-warn { color: var(--warn); font-weight: 700; }
.ft-lock { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--ok-bg); color: #10583B; font-size: 13px; }
.ft-lock .ico { flex: none; width: 24px; height: 24px; color: var(--ok); }
.ft-lock b { display: block; font-size: 15px; color: var(--ok); }
.ft-lock.is-late { background: var(--warn-bg); color: #6B3F06; }
.ft-lock.is-late .ico, .ft-lock.is-late b { color: var(--warn); }
.ft-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 4px 4px 12px; font-size: 13.5px; }
.ft-kv dt { color: var(--muted); }
.ft-kv dd { margin: 0; font-weight: 700; }
.ft-corr { margin: -4px 4px 12px; }
.ft-acc { margin-top: 6px; }
.ft-chg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 18px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--sun-bg); color: var(--sun-deep); font-size: 13px; }
.ft-chg > div { flex: 1 1 280px; }
.ft-chg b { display: block; font-size: 15px; }
.ft-th { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ft-th p { margin: 0; color: var(--ink-2); font-size: 14px; }
.ft-bajas { margin-top: 18px; }
.ft-bajas summary { cursor: pointer; margin: 0 6px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ft-accs { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-hist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ft-hist li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.ft-hist small { display: block; color: var(--muted); }
.ft-ubi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft-ubi .in { flex: 1 1 220px; }
/* Registro */
.ft-rango { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 8px; }
.ft-rango .fld { width: 170px; margin: 0; }
.ft-rapidos { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.ft-res { margin: 6px 4px 12px; font-size: 13px; color: var(--muted); }
.ft-res .ok { color: var(--ok); } .ft-res .late { color: var(--warn); } .ft-res .no { color: var(--bad); }
.ft-tw { overflow-x: auto; border-radius: var(--r-md); background: var(--surface); }
.ft-tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.ft-tabla th, .ft-tabla td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.ft-tabla th { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ft-tabla .l { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.ft-tabla td.l b { display: block; font-weight: 700; }
.ft-tabla td.l span { font-size: 11.5px; color: var(--muted); }
.ft-dh { padding: 4px 8px; border-radius: 99px; font: inherit; color: var(--navy); text-transform: uppercase; }
.ft-dh:not(:disabled):hover { background: var(--lav); }
.ft-dh:disabled { color: var(--muted); }
.ft-ev td { background: var(--bg); font-size: 11.5px; font-weight: 700; }
.ft-ev td.l { background: var(--bg); }
.ft-ev .ok { color: var(--ok); } .ft-ev .late { color: var(--warn); } .ft-ev .no { color: var(--bad); } .ft-ev .nl { color: var(--ink-2); } .ft-ev .fut { color: var(--stone); }
.ft-c { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 12px; vertical-align: middle; }
.ft-c--a { background: var(--ok-bg); color: var(--ok); }
.ft-c--f { background: var(--bad-bg); color: var(--bad); }
.ft-c--o { background: var(--sun-bg); color: var(--sun-deep); }
.ft-c--x { color: var(--stone); }
.ft-ley { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 4px; }
.ft-dl { list-style: none; margin: 0; padding: 0; }
.ft-dl li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ft-dl li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ft-dl small { color: var(--muted); font-size: 12px; }
.in--sm { width: auto; min-width: 150px; height: 38px; padding: 0 12px; font-size: 13px; }
/* Cámara a pantalla completa */
#ft-cam { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #05091A; color: #fff; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
body.ft-cam-on { overflow: hidden; }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; }
.fc-top small { opacity: .7; font-weight: 600; }
.fc-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.fc-x .ico { width: 20px; height: 20px; }
.fc-vid { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.fc-vid video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.fc-gps { position: absolute; top: 12px; left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: rgba(0, 0, 0, .55); }
.fc-gps.is-ok { background: rgba(21, 122, 82, .9); }
.fc-gps.is-bad { background: rgba(180, 49, 58, .92); }
.fc-gps.is-wait { background: rgba(147, 87, 10, .92); }
.fc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#ft-cam.flash .fc-flash { animation: fcFlash .45s ease-out; }
@keyframes fcFlash { from { opacity: .85; } to { opacity: 0; } }
.fc-bar { padding: 12px 16px 18px; }
.fc-sel { display: block; margin: 0 auto 12px; max-width: 420px; }
.fc-sel span { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin: 0 0 4px 4px; text-transform: uppercase; letter-spacing: .05em; }
.fc-sel select { width: 100%; height: 46px; padding: 0 14px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font: 700 16px var(--f); }
.fc-sel option { color: #000; }
.fc-ctl { display: flex; align-items: center; justify-content: space-between; max-width: 420px; margin: 0 auto; }
.fc-flip, .fc-ok { min-width: 76px; height: 44px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 14px var(--f); }
.fc-flip { font-size: 20px; min-width: 44px; width: 44px; }
.fc-ok { padding: 0 16px; background: #fff; color: var(--navy); }
.fc-shot { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; background: transparent; }
.fc-shot i { display: block; width: 58px; height: 58px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fc-shot:active i { transform: scale(.88); }
.fc-shot:disabled { opacity: .35; }
@media (max-width: 900px) {
  .ft-hero { padding: 16px 18px; }
  .ft-hero b { font-size: 19px; }
  .ft-w { padding: 9px 10px; gap: 10px; }
  .ft-mk { gap: 5px; }
  .ft-mk button { width: 40px; height: 40px; }
  .ft-fotos { grid-template-columns: 1fr 1fr; }
  .ft-foot { position: sticky; bottom: calc(98px + env(safe-area-inset-bottom)); margin-top: 10px; padding: 0; z-index: 2; }
  .ft-foot .ft-sig { box-shadow: 0 8px 22px rgba(21, 53, 136, .28); }
  .ft-foot .ft-sig:disabled { box-shadow: none; background: #B9C2E4; border-color: #B9C2E4; opacity: 1; }
  .ft-obra { display: none; }
  .filterbar.ft-bar { flex-wrap: wrap; overflow: visible; gap: 10px; }
  .ft-bar .fb-sep { display: none; }
  .ft-bar .psel { max-width: 100%; }
  .ft-tabla .l { min-width: 128px; max-width: 140px; white-space: normal; box-shadow: 1px 0 0 var(--line); }
  .ft-tabla td.l b { font-size: 12.5px; line-height: 1.25; }
  .ft-tabla td.l span { display: block; font-size: 10.5px; line-height: 1.3; }
  .ft-tabla th, .ft-tabla td { padding: 8px 5px; }
  .ft-lista .ft-n b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  [data-ft-pase] { padding-bottom: 8px; }
  .ft-rango .fld { width: calc(50% - 7px); }
  .ft-chg .btn { width: 100%; justify-content: center; }
}
/* Fuerza de trabajo, partes 2 y 3: reportes y envío al gestor */
.ft-rep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; }
.ft-gk { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }

/* =========================================================
   Fuerza de trabajo v0.13 (diseño aprobado en propuestas/j-fuerza-v2.html):
   submenú en la barra lateral, tarjeta azul + cuadros de color y contenido a todo lo ancho
   ========================================================= */
/* Barra lateral: "Fuerza de trabajo" se despliega en Altas y bajas · Pase de lista · Registro */
.side-grp > a { cursor: pointer; }
.side-grp > a .chev { margin-left: auto; display: grid; transition: transform .3s; }
.side-grp > a .chev .ico { width: 16px; height: 16px; }
.side-grp > a b + .chev { margin-left: 6px; }
.side-grp.open > a .chev { transform: rotate(180deg); }
.side-grp.en > a { background: var(--lav); color: var(--navy); }
.side-sub { display: none; gap: 2px; margin: 2px 0 4px 26px; padding-left: 12px; border-left: 2px solid var(--lav-2); }
.side-grp.open .side-sub { display: grid; }
.side-nav .side-sub a { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 12px; }
.side-nav .side-sub a b { height: 20px; min-width: 22px; font-size: 11px; }

/* Selector de obra (con varias obras) */
.fz-obras { display: flex; gap: 10px; margin: 0 0 16px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.fz-ob { flex: 0 0 auto; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 16px; border-radius: 20px; background: var(--surface); text-align: left; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s; }
.fz-ob b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.fz-ob small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--muted); }
.fz-ob.on { background: var(--navy); } .fz-ob.on b { color: #fff; } .fz-ob.on small { color: rgba(255,255,255,.75); }
.fz-ob:not(.on):hover { box-shadow: inset 0 0 0 1.5px var(--lav-2); }
.e-ok, .e-sun, .e-bad, .e-gris { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.e-ok { background: var(--ok); } .e-sun { background: var(--sun); } .e-bad { background: var(--bad); } .e-gris { background: var(--stone); }

/* Cuadros de color adicionales y detalles de la tarjeta azul */
.sq--bad { background: var(--bad-bg); color: #7A1E25; } .sq--bad strong { color: var(--bad); }
.sq--lav { background: var(--lav); color: var(--navy); } .sq--lav strong { color: var(--navy); }
.sq .sq-txt, .sq .sq-fecha { display: block; font-size: 30px; line-height: 1.05; }
.sq .sq-fecha { font-size: 24px; }
.h-sum .fz-pill-sun { background: var(--sun); color: var(--sun-deep); }
.h-sum .fz-pill-bad { background: #F7C9CD; color: #7A1E25; }
.h-sum .pill .ico { width: 14px; height: 14px; }

/* Secciones, columnas y panel lateral */
.fz-sec { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 30px 0 14px; }
.fz-sec h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.fz-sec .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; }
.fz-sec small { color: var(--muted); font-weight: 600; font-size: 13px; }
.fz-sec .r { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fz-pl, .fz-ab { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.fz-cols { columns: 2 300px; column-gap: 16px; }
.fz-g, .fz-gcard { break-inside: avoid; }
.fz-g { margin-bottom: 8px; }
.fz-g .ft-grp { margin-top: 6px; }
.fz-g .ft-grp span:first-child { display: inline-flex; align-items: center; }
.fz-pt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: currentColor; flex: none; }
.t-0 { color: #3557C7; } .t-1 { color: #C9902F; } .t-2 { color: #1F9D63; } .t-3 { color: #8E44B8; } .t-4 { color: #D2603A; } .t-5 { color: #1792A8; } .t-6 { color: #7C819A; }
.fz-side { position: sticky; top: 16px; display: grid; gap: 14px; }
.fz-side h2 { font-size: 18px; }
.fz-card { padding: 18px; border-radius: var(--r-lg); background: var(--surface); }
.fz-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.fz-card h3 small { font-size: 13px; color: var(--muted); }
.fz-help { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* Pase de lista: fotos por cuadrilla y tarjeta de envío */
.fz-frs { display: grid; gap: 8px; }
.fz-fr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 16px; background: var(--bg); text-align: left; color: inherit; }
.fz-fr > div { flex: 1; min-width: 0; }
.fz-fr b { display: block; font-size: 13.5px; } .fz-fr small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.fz-fr .ibtn { flex: none; }
.fz-fr.is-bad { box-shadow: inset 0 0 0 2px var(--bad); } .fz-fr.is-old { opacity: .6; }
.fz-th { flex: none; display: grid; place-items: center; width: 56px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--lav); }
.fz-fr--falta { background: transparent; border: 2px dashed var(--lav-2); }
.fz-fr--falta .fz-th { background: var(--navy); color: #fff; } .fz-fr--falta .fz-th .ico { width: 22px; height: 22px; } .fz-fr--falta small { color: var(--blue); }
.fz-envio { display: grid; gap: 10px; background: var(--navy-deep); color: #fff; }
.fz-envio .btn { justify-content: center; min-height: 48px; background: #fff; color: var(--navy); border-color: #fff; }
.fz-envio .btn:disabled { opacity: .55; }
.fz-envio small { font-size: 11.5px; opacity: .75; text-align: center; }
.fz-envio--ok { background: var(--ok-bg); color: #0E5A3C; } .fz-envio--ok b { font-size: 16px; } .fz-envio--ok small { text-align: left; opacity: .85; }
.fz-prog { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 13px; font-weight: 650; }
.fz-prog i { grid-column: 1 / -1; height: 8px; border-radius: 9px; background: rgba(255,255,255,.15); overflow: hidden; }
.fz-prog em { display: block; height: 100%; background: var(--sun); border-radius: 9px; transition: width .3s; }
.fz-lect .ft-mk button { pointer-events: none; }
.fz-lect .ft-mk button:not(.on) { opacity: .3; }

/* Altas y bajas */
.fz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.fz-seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.fz-seg button { white-space: nowrap; }
.fz-buscar { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 99px; background: var(--surface); color: var(--muted); }
.fz-buscar .ico { width: 18px; height: 18px; }
.fz-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; font: 600 14px var(--f); background: none; color: var(--ink); }
.fz-gcard { display: block; padding: 14px; border-radius: var(--r-lg); background: var(--surface); margin-bottom: 16px; }
.fz-gh { display: flex; align-items: center; gap: 4px; padding: 2px 4px 10px; }
.fz-gh b { display: block; font-size: 14.5px; } .fz-gh small { font-size: 12px; color: var(--muted); font-weight: 600; }
.fz-gh > span { margin-left: auto; display: grid; place-items: center; min-width: 30px; height: 26px; border-radius: 99px; background: var(--bg); font-size: 12.5px; font-weight: 800; }
.fz-gcard .ft-w, .fz-side .ft-w { background: var(--bg); }
.fz-gcard .ft-w:last-child { margin-bottom: 0; }
.fz-mov { list-style: none; margin: 0; padding: 0; }
.fz-mov li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.fz-mov li:first-child { border-top: 0; }
.fz-mov .dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; font-size: 15px; font-weight: 800; }
.fz-mov b { font-size: 13.5px; } .fz-mov small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.fz-mov .c0 { background: #DCE4FB; color: #1B3A9C; } .fz-mov .c1 { background: var(--sun-bg); color: var(--sun-ink); } .fz-mov .c2 { background: var(--ok-bg); color: var(--ok); }
.fz-mov .c4 { background: var(--bad-bg); color: var(--bad); } .fz-mov .c6 { background: var(--bg); color: var(--muted); }
.fz-pub { background: var(--sun); border-color: var(--sun); color: var(--sun-deep); }
.fz-pub:not(:disabled):hover { background: #D9A458; border-color: #D9A458; }
.fz-pub b { display: grid; place-items: center; min-width: 22px; height: 22px; margin-left: 2px; border-radius: 99px; background: rgba(255,255,255,.7); font-size: 12px; }
.fz-solo-cel { display: none; }

/* Registro */
.fz-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.fz-tools .tbtn.on { background: var(--navy); color: #fff; }
.fz-esp { flex: 1; }
.fz-fechas { display: inline-flex; gap: 6px; }
.fz-fechas[hidden] { display: none; }
.fz-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fz-k { padding: 16px 18px; border-radius: 22px; background: var(--surface); }
.fz-k p { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fz-k strong { display: block; margin-top: 6px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.fz-k strong.b { color: var(--bad); } .fz-k strong.w { color: var(--sun-deep); }
.fz-k small { font-size: 12px; font-weight: 600; color: var(--muted); }
.fz-cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fz-cal .dh { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-left: 4px; }
.fz-d { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 100px; padding: 12px; border-radius: 20px; text-align: left; color: inherit; transition: transform .25s var(--spring); }
.fz-d:not(:disabled):hover { transform: translateY(-2px); }
.fz-d:disabled { cursor: default; }
.fz-d .t { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 750; }
.fz-d strong { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; min-height: 24px; }
.fz-d small { font-size: 11.5px; font-weight: 700; opacity: .85; }
.d-ok { background: var(--ok-bg); color: #0E5A3C; } .d-late { background: var(--sun-bg); color: var(--sun-deep); } .d-no { background: var(--bad-bg); color: #7A1E25; }
.d-nl { background: #E6E8F0; color: var(--ink-2); } .d-fut { background: transparent; box-shadow: inset 0 0 0 2px var(--lav-2); color: var(--stone); }
.d-hoy { box-shadow: inset 0 0 0 2px var(--navy); }
.fz-leg { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 4px 0; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.fz-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
/* Todas las obras */
.fz-cmp { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fz-ocard { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); text-align: left; color: var(--ink); transition: transform .3s var(--spring), box-shadow .3s; }
.fz-ocard:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -20px rgba(11,28,74,.35); }
.fz-oh { display: flex; align-items: flex-start; gap: 10px; } .fz-oh b { display: block; font-size: 16px; font-weight: 800; } .fz-oh small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.fz-oh .arr { margin-left: auto; width: 22px; height: 10px; color: var(--stone); margin-top: 6px; flex: none; }
.fz-onum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fz-onum > span { padding: 10px 8px; border-radius: 14px; background: var(--bg); }
.fz-onum strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ok); } .fz-onum strong span { font-size: 13px; opacity: .6; }
.fz-onum strong.w { color: var(--sun-deep); } .fz-onum strong.b { color: var(--bad); }
.fz-onum small { font-size: 11px; font-weight: 700; color: var(--muted); }
.fz-hoy, .fz-est { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 700; }
.fz-est { justify-content: center; }
.fz-mini { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.fz-mini i { aspect-ratio: 1; border-radius: 5px; }
.fz-gst { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); } .fz-gst b { color: var(--sun-deep); }

@media (max-width: 1100px) { .fz-pl, .fz-ab { grid-template-columns: minmax(0, 1fr); } .fz-side { position: static; } }
@media (max-width: 900px) {
  .fz-obras { margin: 0 calc(var(--gutter) * -1) 14px; padding: 0 var(--gutter) 2px; }
  .fz-ob { min-width: 180px; }
  .fz-cols { columns: 1; }
  .fz-solo-cel { display: flex; width: 100%; justify-content: center; min-height: 48px; margin: -14px 0 18px; }
  .fz-pl .fz-envio { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 14px 30px -14px rgba(11,28,74,.55); }
  .fz-bar .fz-seg { order: 3; width: 100%; }
  .fz-sec .r { margin-left: 0; width: 100%; }
  .fz-sec .r .tbtn { white-space: normal; text-align: left; }
  .fz-g .ft-n b { white-space: normal; }
  .fz-kpis { grid-template-columns: 1fr 1fr; }
  .fz-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fz-cal .dh, .fz-cal .fz-hueco { display: none; }
  .fz-d { min-height: 84px; padding: 10px; }
  .fz-tools .fz-seg { width: 100%; }
  .fz-esp { display: none; }
  .sq .sq-txt { font-size: 24px; }
  /* Barra inferior del residente: Requisiciones · Compras · + · Altas y bajas · Pase de lista */
  body[data-rol="residente"] .tabbar a[data-route="obras"] { display: none; }
  body[data-rol="residente"] .tabbar a[data-route="requisiciones"] { order: 1; }
  body[data-rol="residente"] .tabbar a[data-route="compras"] { order: 2; }
  body[data-rol="residente"] .tabbar .tab-add { order: 3; }
  body[data-rol="residente"] .tab-x--ftaltas { order: 4; }
  body[data-rol="residente"] .tab-x--ft { order: 5; }
  body[data-rol="residente"] .tab-x--ftaltas { display: grid !important; }
}
/* Unidades editables en el formulario de la requisición (v0.13) */
.un-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.un-ed { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg); }
.un-ed[hidden] { display: none; }
.un-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.un-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: 99px; background: var(--surface); font-size: 13px; font-weight: 700; }
.un-chip button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: 16px; line-height: 1; }
.un-chip button:hover { background: var(--bad-bg); color: var(--bad); }
.un-add { display: flex; gap: 8px; }
.un-add .in { flex: 1; max-width: 260px; text-transform: uppercase; }

/* =========================================================
   Pago por notas (v0.15): notas del proveedor que se pagan juntas
   ========================================================= */
.sq-row--col { flex-direction: column; align-items: flex-start; gap: 4px; }
.sq-row--col small { max-width: none; text-align: left; }
.sq .pn-monto { font-size: clamp(20px, 1.7vw, 28px); line-height: 1.05; white-space: nowrap; }   /* cabe aunque el monto sea grande */
.pn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pn-grid--lista { grid-template-columns: minmax(0, 1fr); }   /* materiales: un renglón cada uno (nombre y botón no se aprietan) */
.pn-nota { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); }
.pn-nota.sel { box-shadow: inset 0 0 0 2px var(--navy); }
.pn-top { display: flex; gap: 12px; align-items: flex-start; padding-right: 30px; min-width: 0; }
.pn-top > div { min-width: 0; }
.pn-top b { display: block; font-size: 14.5px; }
.pn-top small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.pn-img { flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, #f5f1e6, #d9d2bf); }
.pn-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pn-chk { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  border: 2px solid var(--lav-2); background: #fff; color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; }
.pn-nota.sel .pn-chk { background: var(--navy); border-color: var(--navy); }
.pn-imp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pn-imp > small { color: var(--muted); font-weight: 650; font-size: 12px; }
.pn-imp strong { margin-left: auto; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pn-imp .in { flex: 1; min-width: 0; height: 40px; text-align: right; font-weight: 700; }
.pn-imp .btn { height: 40px; }
.pn-wait { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); }
.pn-wait > div { flex: 1; min-width: 0; }
.pn-wait b { display: block; font-size: 14px; }
.pn-wait small { color: var(--muted); font-size: 12px; font-weight: 600; }
.pn-dot { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--bg); color: var(--muted); }
.pn-dot .ico { width: 18px; height: 18px; }
.pn-ptit { font-size: 15px; }
.pn-sum { display: grid; gap: 8px; }
.pn-sum div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 650; }
.pn-sum .tot { padding-top: 10px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 800; }
.pn-hist li { grid-template-columns: 40px 1fr auto !important; cursor: pointer; }
.pn-hist .m { font-weight: 800; font-size: 13.5px; }
.pn-rojo { color: var(--bad); font-weight: 700; }
.pn-mats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pn-mats li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-size: 13.5px; font-weight: 650; }
.pn-mats li span { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.pn-mats li .ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pn-total { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: var(--bg); font-weight: 800; }
.pn-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pn-foto label { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 18px; border: 2px dashed var(--lav-2);
  font-weight: 700; font-size: 13.5px; color: var(--navy); cursor: pointer; text-align: center; }
.pn-foto label:hover { background: var(--lav); }
.pn-foto .ico { width: 26px; height: 26px; }
.pn-prev { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; border-radius: 16px; background: var(--bg); }
.pn-prev > div { flex: 1; min-width: 0; }
.pn-prev b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.pn-prev small { color: var(--muted); font-weight: 600; font-size: 12px; }
.pn-prev .pn-img { width: 64px; height: 64px; cursor: default; }
.pn-dif { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--bad-bg); color: var(--bad); font-size: 13.5px; font-weight: 650; }
.pn-dif .ico { flex: none; width: 18px; height: 18px; }
.pn-in-bad { box-shadow: inset 0 0 0 2px var(--bad) !important; }
.pn-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pn-foto-g { padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--bg); aspect-ratio: 3 / 4; cursor: zoom-in; }
.pn-foto-g img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pn-subir { margin-top: 6px; }
.st--notas { color: var(--navy); background: var(--lav); }
.chart .bar--n { fill: #3A9E8F; }
.chart .bar--n.cur { fill: #237565; }
.ley--n { background: #3A9E8F; }
@media (max-width: 900px) {
  .pn-grid { grid-template-columns: minmax(0, 1fr); }
  .sq .pn-monto { font-size: clamp(15px, 5.2vw, 26px); }
}
@media (max-width: 480px) {
  .pn-wait { flex-wrap: wrap; }
  .pn-wait > div { flex: 1 1 160px; }
  .pn-wait > .btn { margin-left: 48px; }
}

/* =========================================================
   v0.21 · Revisión completa, parte 7 (revision/parte-7-css-celular.md)
   ========================================================= */
/* M1 · iPhone/iPad: todos los campos a 16 px (salvo el código de acceso) para que Safari no acerque la pantalla
   al tocar un filtro o un buscador. La regla solo la lee Safari de iOS: en Android y en la computadora no cambia nada. */
@supports (-webkit-touch-callout: none) {
  input:not(.lg-code), select, textarea { font-size: 16px !important; }
}
/* B2 · En celular, más área para tocar sin cambiar cómo se ven */
@media (max-width: 900px) {
  .ck { width: 24px; height: 24px; }
  .pn-chk::after, .chip button::after { content: ''; position: absolute; inset: -10px; }
  .chip button { position: relative; }
  .tbl .link-u, .le-foot .link-u { padding: 8px 6px; margin: -8px -6px; }
}
/* B3 · Pantallas bajas (1280×800): con "Compras" o "Fuerza de trabajo" abierto, renglones un poco más bajos
   para que el bloque del usuario siga a la vista sin desplazar la barra lateral */
@media (min-width: 901px) and (max-height: 820px) {
  .side:has(.side-grp.open) .side-nav a, .side:has(.side-grp.open) .side-nav .side-sub a { height: 30px; }
}