/* Cotizador DyP — misma identidad que DyPGestion: grafito, grilla arquitectonica, naranjo de acento.
   El amarillo se reserva para los danos marcados en el vehiculo. */
:root {
  --bg: #2A313A;
  --bg-deep: #232931;
  --surface: #333C48;
  --surface-2: #3B4451;
  --input: #232931;
  --line: #4A5565;
  --line-soft: rgba(74, 85, 101, .55);
  --text: #FFFFFF;
  --text-2: #D7DAE0;
  --silver: #B8BCC6;
  --muted: #AAB2BF;   /* (arbitro UI B1) antes #8A93A3: 3,2–4,2:1; ahora >= 4,5:1 en todas las superficies */
  --accent: #F16522;
  --accent-2: #D9541C;
  --accent-soft: rgba(241, 101, 34, .14);
  --damage: #FFC928;
  --damage-ink: #2A2100;
  --ok: #34D399;
  --ok-soft: rgba(52, 211, 153, .14);
  --bad: #F87171;
  --bad-soft: rgba(248, 113, 113, .14);
  --warn: #FBBF24;
  --radius: 16px;
  --radius-sm: 11px;
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(74, 85, 101, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 85, 101, .16) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}
body.sheet-open { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ---------- shell ---------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: rgba(35, 41, 49, .86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.topbar .brand img { height: 34px; width: auto; border-radius: 6px; display: block; }
.topbar .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.topbar .brand-text b { font-family: var(--display); font-size: 19px; letter-spacing: .04em; text-transform: uppercase; }
.topbar .brand-text span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.shop-chip {
  display: flex; align-items: center; gap: 8px; max-width: 46vw;
  padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; color: var(--silver); text-decoration: none;
}
.shop-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #fff; }
.shop-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

main.view {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 18px 16px calc(var(--nav-h) + var(--safe-b) + 112px);
  animation: viewIn .45s var(--ease);
}
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(35, 41, 49, .94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-soft);
}
.tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  transition: color .2s;
}
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.active { color: var(--text); }
.tabbar a.active::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 36px; height: 3px; margin-left: -18px;
  border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: 0 0 14px rgba(241, 101, 34, .8);
}
.tabbar a.active svg { color: var(--accent); }
.tabbar .badge-dot {
  position: absolute; top: 9px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}

@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 248px 1fr; }
  .rail {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
    padding: 22px 16px; background: rgba(51, 60, 72, .7); border-right: 1px solid var(--line);
  }
  .rail .rail-logo img { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 6px; }
  .rail .rail-sub { font-family: var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); font-size: 13px; margin: 0 0 18px 4px; }
  .rail a.nav {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    text-decoration: none; color: var(--silver); font-weight: 600; transition: background .2s, color .2s;
  }
  .rail a.nav svg { width: 21px; height: 21px; }
  .rail a.nav:hover { background: var(--surface-2); color: var(--text); }
  .rail a.nav.active { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px rgba(241, 101, 34, .9); }
  .rail .rail-foot { margin-top: auto; font-size: 12px; color: var(--muted); padding: 0 6px; }
  .tabbar { display: none; }
  .topbar { display: none; }
  main.view { padding: 36px 40px 140px; }
}
@media (max-width: 1023px) { .rail { display: none; } }

/* ---------- tipografia de pagina ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
.eyebrow { font-family: var(--display); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); font-size: 13px; }
.page-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(36px, 10vw, 64px); line-height: .92; letter-spacing: -.005em; margin: 4px 0 0;
}
.page-title .stroke { color: transparent; -webkit-text-stroke: 1.2px var(--silver); }
.page-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* ---------- tarjetas / secciones ---------- */
.card {
  position: relative; background: rgba(51, 60, 72, .92); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 16px; margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -28px rgba(0, 0, 0, .7);
}
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sec-num {
  font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px var(--accent); min-width: 36px;
}
.sec-title { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.sec-hint { color: var(--muted); font-size: 13px; line-height: 1.3; }
.sec-head .grow { flex: 1; min-width: 0; }

/* ---------- campos ---------- */
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: 1fr 1fr; }
.span2 { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .g4 { grid-template-columns: repeat(4, 1fr); }
  .g4 .span2 { grid-column: span 2; }
}
.field { position: relative; display: block; min-width: 0; }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); background: var(--input); color: var(--text);
  border-radius: var(--radius-sm); padding: 22px 13px 8px; font-size: 16px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.4; }
.field label {
  position: absolute; left: 14px; top: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); pointer-events: none; transition: color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #1F242B; }
.field:focus-within label { color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: #5E6878; }
.field .req { color: var(--accent); }
.field.invalid input, .field.invalid textarea { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.field .msg { display: block; font-size: 12.5px; color: var(--bad); margin-top: 5px; }
.field .hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field.plate input { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; padding-top: 18px; padding-bottom: 6px; }
.field .prefix { position: absolute; left: 13px; top: 29px; color: var(--muted); font-weight: 600; }
.field.money input { padding-left: 28px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 18px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s, opacity .2s;
  user-select: none; -webkit-user-select: none; white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:active { transform: scale(.97); }
.btn:hover { border-color: #5E6A7C; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 26px -12px rgba(241, 101, 34, .95); }
.btn.primary:hover { background: var(--accent-2); }
.btn.ok { background: #10B981; border-color: #10B981; color: #04241A; box-shadow: 0 10px 26px -12px rgba(16, 185, 129, .9); }
.btn.danger { color: var(--bad); border-color: rgba(248, 113, 113, .45); background: transparent; }
.btn.ghost { background: transparent; }
.btn.wa { background: #1FAF5A; border-color: #1FAF5A; color: #fff; }
.btn.block { width: 100%; }
.btn.lg { min-height: 54px; font-size: 16.5px; border-radius: 14px; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn.icon { width: 44px; padding: 0; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after {
  content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; color: var(--silver); font-size: 13.5px; font-weight: 600; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.linkbtn:hover { color: var(--text); }

/* ---------- vehiculo ---------- */
/* Tipo de vehiculo: tarjetas con la foto lateral. */
.vtypes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); gap: 8px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -16px 4px; padding: 2px 16px 10px;
}
.vtypes::-webkit-scrollbar { display: none; }
.vtype {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 10px 10px 9px; border-radius: 14px; border: 1px solid var(--line); text-align: left;
  background: linear-gradient(180deg, #2B323C, var(--bg-deep)); color: var(--silver);
  transition: border-color .25s, background .25s, color .25s, transform .2s var(--ease), box-shadow .3s;
}
.vtype:active { transform: scale(.97); }
@media (hover: hover) { .vtype:hover { border-color: #5E6A7C; color: var(--text); } }
.vtype .vt-img { height: 46px; display: flex; align-items: flex-end; justify-content: center; }
.vtype .vt-img img {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block;
  filter: grayscale(1) brightness(.78) drop-shadow(0 6px 5px rgba(0, 0, 0, .45));
  transition: filter .35s, transform .45s var(--ease);
}
.vtype .vt-name { font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.vtype .vt-name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; transition: all .25s; }
.vtype[aria-checked="true"] {
  border-color: var(--accent); color: var(--text);
  background: radial-gradient(120% 90% at 50% 0%, rgba(241, 101, 34, .22), transparent 70%), linear-gradient(180deg, #343D49, #262D36);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 14px 30px -18px rgba(241, 101, 34, .9);
}
.vtype[aria-checked="true"] .vt-img img { filter: grayscale(0) brightness(1.04) drop-shadow(0 8px 6px rgba(0, 0, 0, .5)); transform: translateX(3px) scale(1.06); }
.vtype[aria-checked="true"] .vt-name::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(241, 101, 34, .9); }
@media (min-width: 720px) { .vtypes { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0 0 4px; padding: 2px 0 10px; } .vtype .vt-img { height: 58px; } }

/* Aviso antes de elegir el tipo. */
.stage-empty {
  display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-radius: 14px; margin-top: 4px;
  border: 1.5px dashed #5E6A7C; color: var(--silver); font-size: 14.5px; line-height: 1.35;
}
.stage-empty svg { width: 28px; height: 28px; flex: none; color: var(--accent); }
.need-type .vtype { animation: nudge .6s var(--ease); }
@keyframes nudge { 30% { transform: translateY(-4px); } 60% { transform: translateY(1px); } }

.views-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 8px -2px 0; scrollbar-width: none;
}
.views-tabs::-webkit-scrollbar { display: none; }
.views-tabs button {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  background: var(--bg-deep); border: 1px solid var(--line); color: var(--silver); font-size: 13.5px; font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.views-tabs button.active { background: var(--text); color: var(--bg-deep); border-color: var(--text); }
.views-tabs .cnt {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; font-size: 11.5px; line-height: 19px; text-align: center;
  background: var(--damage); color: var(--damage-ink); font-weight: 700;
}
.views-tabs .cnt:empty { display: none; }

/* Escenario tipo estudio fotografico: foco de luz arriba, piso y sombra bajo el auto. */
.stage {
  position: relative; border-radius: 16px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(214, 222, 235, .13), transparent 72%),
    linear-gradient(180deg, #2C333D 0%, #232930 58%, #1B2026 100%);
  border: 1px solid var(--line);
}
.stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(122, 134, 152, .09) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(122, 134, 152, .09) 1px, transparent 1px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
}
.views-track {
  display: flex; align-items: flex-start; transition: height .35s var(--ease); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.views-track::-webkit-scrollbar { display: none; }
.view-panel {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 38px 10px 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; position: relative;
}
.view-panel .vlabel { position: absolute; display: none; }
.view-panel .car-svg {
  width: 100%; max-width: 640px; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .5)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  animation: carIn .6s var(--ease) both;
}
.view-panel[data-view="front"] .car-svg, .view-panel[data-view="rear"] .car-svg { max-width: 300px; }
.view-panel[data-view="top"] .car-svg { width: auto; height: min(60vh, 460px); max-width: 100%; }
@keyframes carIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.view-panel[data-view="left"] .car-svg { animation-name: carInL; }
.view-panel[data-view="right"] .car-svg { animation-name: carInR; }
@keyframes carInL { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes carInR { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.stage-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.stage-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s var(--ease), background .3s; }
.stage-dots i.on { width: 20px; background: var(--accent); }
.stage-hint { position: absolute; top: 12px; left: 14px; right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; pointer-events: none; z-index: 1; }
.stage-type { position: absolute; top: 9px; right: 12px; z-index: 1; pointer-events: none; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .22); }

/* Zonas sobre la foto: se recortan con la silueta (mascara) y se tinen en modo "color",
   que conserva las luces y sombras de la carroceria. */
.car-zones { mix-blend-mode: color; }
.car-zone { fill: rgba(255, 201, 40, 0); cursor: pointer; transition: fill .3s var(--ease); -webkit-tap-highlight-color: transparent; outline: none; }
@media (hover: hover) { .car-zone:not(.on):hover { fill: rgba(255, 201, 40, .38); } }
.car-zone.on { fill: rgba(255, 201, 40, 1); }
.car-zone.passive { pointer-events: none; cursor: default; }
.car-zone:focus-visible { fill: rgba(241, 101, 34, .55); }
.car-zone.on:focus-visible { fill: #FF9A2E; }
.car-zone.pop { animation: zonePop .55s var(--ease); }
@keyframes zonePop { 0% { fill: rgba(255, 255, 255, .9); } 100% { } }
.readonly .car-zone { cursor: default; pointer-events: none; }
.car-sheet { width: 100%; height: auto; display: block; }
.car-sheet .sheet-label { font: 700 16px var(--display); letter-spacing: .2em; fill: var(--muted); }

@media (min-width: 1024px) {
  .views-tabs, .stage-dots, .stage-hint { display: none; }
  .views-track { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "left left top" "right right top" "front rear top"; overflow: visible; gap: 0; }
  .view-panel { padding: 34px 18px 22px; min-height: 0; border-right: 1px dashed var(--line-soft); border-bottom: 1px dashed var(--line-soft); }
  .view-panel[data-view="left"] { grid-area: left; } .view-panel[data-view="right"] { grid-area: right; }
  .view-panel[data-view="front"] { grid-area: front; border-bottom: 0; } .view-panel[data-view="rear"] { grid-area: rear; border-bottom: 0; }
  .view-panel[data-view="top"] { grid-area: top; border-right: 0; border-bottom: 0; }
  .view-panel .vlabel { display: block; top: 11px; left: 15px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .view-panel[data-view="top"] .car-svg { width: 100%; height: auto; max-width: 250px; }
  .view-panel[data-view="front"] .car-svg, .view-panel[data-view="rear"] .car-svg { max-width: 250px; }
}

/* Listado plegable de zonas, agrupado por lado del vehiculo. */
.zacc { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-deep); overflow: hidden; }
.zacc-head {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px;
  padding: 12px 14px; min-height: 60px; border: 0; background: transparent; text-align: left; color: var(--text);
}
.zacc-num {
  grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 22px; background: #2B323C; color: var(--muted); border: 1px solid var(--line);
  transition: background .3s, color .3s, border-color .3s;
}
.zacc.has .zacc-num { background: var(--damage); color: var(--damage-ink); border-color: var(--damage); box-shadow: 0 0 18px -4px rgba(255, 201, 40, .8); }
.zacc-title { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.zacc-sum { grid-column: 2; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zacc.has .zacc-sum { color: #F3E3B5; }
.zacc-chev { grid-row: 1 / span 2; grid-column: 3; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--silver); transition: transform .35s var(--ease), background .2s; }
.zacc-chev svg { width: 20px; height: 20px; }
.zacc.open .zacc-chev { transform: rotate(180deg); background: #2B323C; }
.zacc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.zacc.open .zacc-body { grid-template-rows: 1fr; }
.zacc-inner { min-height: 0; overflow: hidden; }
.zacc-content { padding: 2px 14px 14px; border-top: 1px solid var(--line-soft); }
.zgroup { padding-top: 12px; }
.zgroup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.zgroup-title { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.zgroup-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zgroup-n b { color: var(--damage); }
.chips.zchips { display: grid; grid-template-columns: 1fr 1fr; }
.zchips .chip { justify-content: flex-start; min-width: 0; border-radius: 14px; text-align: left; line-height: 1.2; }
.zacc-foot { display: flex; justify-content: flex-end; padding-top: 6px; }
.zacc.open .zgroup { animation: groupIn .45s var(--ease) both; }
.zacc.open .zgroup:nth-child(2) { animation-delay: .04s; } .zacc.open .zgroup:nth-child(3) { animation-delay: .08s; }
.zacc.open .zgroup:nth-child(4) { animation-delay: .12s; } .zacc.open .zgroup:nth-child(5) { animation-delay: .16s; }
@keyframes groupIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #2B323C; color: var(--silver);
  font-size: 13.5px; font-weight: 600; line-height: 1.15; transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.chip:active { transform: scale(.96); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; transition: all .2s; }
.chip.on { background: rgba(255, 201, 40, .14); border-color: rgba(255, 201, 40, .7); color: #FFE39A; }
.chip.on .dot { background: var(--damage); border-color: var(--damage); box-shadow: 0 0 10px rgba(255, 201, 40, .9); }
.chip.static { cursor: default; }

/* Marca: sugerencias propias (reemplaza al datalist nativo, que no deja agregar). */
.combo { position: relative; }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25; max-height: 264px; overflow-y: auto;
  background: #2B323C; border: 1px solid #5E6A7C; border-radius: 12px; padding: 5px;
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .8); animation: viewIn .18s var(--ease);
}
.combo-list[hidden] { display: none; }
.combo-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-2); text-align: left; font-size: 15px;
}
.combo-opt mark { background: none; color: var(--accent); font-weight: 700; }
.combo-opt.active, .combo-opt:hover { background: #3B4451; color: #fff; }
.combo-opt .tag { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.combo-opt.add { color: var(--accent); font-weight: 600; border-top: 1px solid var(--line-soft); border-radius: 0 0 9px 9px; margin-top: 3px; }
.combo-opt.add:first-child { border-top: 0; margin-top: 0; border-radius: 9px; }
.combo-opt.add svg { width: 18px; height: 18px; flex: none; }
.combo-empty { padding: 10px 11px; color: var(--muted); font-size: 13.5px; }

/* ---------- lineas de descripcion ---------- */
.lines { display: flex; flex-direction: column; gap: 8px; counter-reset: ln; }
.line-row { display: flex; align-items: flex-start; gap: 8px; animation: rowIn .3s var(--ease); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.line-row.out { animation: rowOut .22s var(--ease) forwards; }
@keyframes rowOut { to { opacity: 0; transform: translateX(30px); } }
.line-n {
  flex: none; width: 30px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--accent);
}
.line-row textarea {
  flex: 1; min-width: 0; min-height: 46px; max-height: 220px; resize: none; overflow: hidden;
  border: 1px solid var(--line); background: var(--input); border-radius: var(--radius-sm); padding: 12px 13px;
  font-size: 16px; line-height: 1.35; outline: none; transition: border-color .2s, box-shadow .2s;
}
.line-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.line-del { flex: none; width: 44px; height: 46px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.line-del:hover { color: var(--bad); border-color: rgba(248, 113, 113, .4); }
.line-del svg { width: 19px; height: 19px; }
.add-line {
  width: 100%; margin-top: 10px; min-height: 50px; border-radius: 12px; border: 1.5px dashed #5E6A7C;
  background: transparent; color: var(--silver); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .2s, color .2s, background .2s;
}
.add-line:hover, .add-line:active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.add-line svg { width: 20px; height: 20px; }
.suggest {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 201, 40, .07); border: 1px solid rgba(255, 201, 40, .25); font-size: 13.5px; color: #F3E3B5;
}
.suggest .grow { flex: 1; }

/* ---------- montos ---------- */
.money-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .money-grid { grid-template-columns: 1fr 1fr; } .money-grid .span2 { grid-column: 1 / -1; } }
.ledger { margin-top: 16px; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--line); overflow: hidden; }
.ledger .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px dashed var(--line-soft); font-size: 15px; color: var(--silver); }
.ledger .row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger .row.total { border-bottom: 0; background: linear-gradient(90deg, rgba(241, 101, 34, .2), rgba(241, 101, 34, .04)); color: var(--text); padding: 15px 16px; }
.ledger .row.total span { font-family: var(--display); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.ledger .row.total b { font-family: var(--display); font-size: 32px; font-weight: 700; }
.ledger .row.minus b { color: var(--ok); }
.ledger .row.balance { border-top: 1px solid var(--line); border-bottom: 0; color: var(--text); }
.ledger .row.balance span { font-weight: 700; }
.ledger .row.balance b { font-size: 21px; font-weight: 700; color: #FFD8C5; }
.ledger .err { padding: 10px 16px; color: var(--bad); font-size: 13.5px; background: var(--bad-soft); }

/* ---------- barra de accion fija ---------- */
.actionbar {
  position: fixed; left: 0; right: 0; z-index: 35;
  bottom: calc(var(--nav-h) + var(--safe-b));
  padding: 10px 12px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(42, 49, 58, 0), rgba(35, 41, 49, .96) 26%);
}
.actionbar .sum { flex: 1; min-width: 0; padding-left: 4px; }
.actionbar .sum small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.actionbar .sum b { display: block; font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actionbar .btn { flex: none; }
@media (min-width: 1024px) {
  .actionbar { left: 248px; bottom: 0; padding: 14px 40px 18px; }
  .actionbar-inner { max-width: 1100px; }
}

/* ---------- listado ---------- */
.searchbox { position: relative; margin-bottom: 12px; }
.searchbox input {
  width: 100%; height: 52px; padding: 0 44px 0 46px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--input); font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.searchbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.searchbox > svg { position: absolute; left: 15px; top: 15px; width: 22px; height: 22px; color: var(--muted); }
.searchbox .clear { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: 10px; }
.filters { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 14px; }
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--silver); font-weight: 600; font-size: 14px;
}
.filters button em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.filters button.active { background: var(--text); color: var(--bg-deep); border-color: var(--text); }
.filters button.active em { color: #4A5565; }

.qlist { display: flex; flex-direction: column; gap: 10px; }
.qrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; text-align: left; width: 100%;
  padding: 14px 14px 14px 12px; border-radius: 15px; border: 1px solid var(--line); background: rgba(51, 60, 72, .92);
  position: relative; overflow: hidden; transition: transform .15s var(--ease), border-color .2s, background .2s;
  animation: rowIn .35s var(--ease) both;
}
.qrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warn); }
.qrow.aceptada::before { background: var(--ok); }
.qrow.rechazada::before { background: var(--bad); }
.qrow:hover { border-color: #5E6A7C; background: rgba(59, 68, 81, .95); }
.qrow:active { transform: scale(.985); }
.qrow .qnum { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; min-width: 52px; padding-left: 4px; }
.qrow .qnum small { font-size: 10.5px; letter-spacing: .18em; color: var(--muted); font-weight: 700; }
.qrow .qnum b { font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.qrow .qmain { min-width: 0; }
.qrow .qname { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .qveh { display: flex; align-items: center; gap: 8px; color: var(--silver); font-size: 13.5px; margin-top: 3px; min-width: 0; }
.qrow .qveh span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .qside { grid-row: 1 / 3; grid-column: 3; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.qrow .qtotal { font-family: var(--display); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qrow .qdate { font-size: 12px; color: var(--muted); grid-column: 2; }

.plate-tag {
  flex: none; display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px; background: #F4F5F7; color: #111;
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .1em; border: 1.5px solid #111; box-shadow: 0 0 0 1px #F4F5F7;
}
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.pendiente { background: rgba(251, 191, 36, .14); color: #FCD34D; }
.pill.aceptada { background: var(--ok-soft); color: #6EE7B7; }
.pill.rechazada { background: var(--bad-soft); color: #FCA5A5; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty svg { width: 64px; height: 64px; color: var(--line); margin-bottom: 8px; }
.empty b { display: block; color: var(--text-2); font-size: 18px; margin-bottom: 4px; }

.skeleton { height: 76px; border-radius: 15px; background: linear-gradient(90deg, #333C48 0%, #3B4451 50%, #333C48 100%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- hoja (modal inferior) ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(10, 13, 17, .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s;
}
.sheet-backdrop.in { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column; background: #2E3640; border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .38s var(--ease);
  box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .6);
}
.sheet.in { transform: none; }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 9px auto 0; flex: none; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px 12px; border-bottom: 1px solid var(--line-soft); flex: none; }
.sheet-head .grow { flex: 1; min-width: 0; }
.sheet-close { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--silver); display: flex; align-items: center; justify-content: center; flex: none; }
.sheet-close svg { width: 20px; height: 20px; }
.sheet-body { overflow-y: auto; padding: 16px 18px 18px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheet-foot { flex: none; padding: 12px 18px calc(12px + var(--safe-b)); border-top: 1px solid var(--line-soft); background: #2A313A; }
@media (min-width: 760px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(760px, 94vw); max-height: 90vh; border-radius: 22px; border: 1px solid var(--line); transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .32s var(--ease), opacity .25s; }
  .sheet.in { transform: translate(-50%, -50%); opacity: 1; }
  .sheet .grab { display: none; }
  .sheet-foot { border-radius: 0 0 22px 22px; }
  .sheet.narrow { width: min(460px, 94vw); }
}

.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.dl div { min-width: 0; }
.dl dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.dl dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.dl .full { grid-column: 1 / -1; }
.blk { margin-top: 18px; }
.blk > h4 { margin: 0 0 9px; font-family: var(--display); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.olist { margin: 0; padding: 0; list-style: none; counter-reset: o; }
.olist li { counter-increment: o; position: relative; padding: 7px 0 7px 32px; border-bottom: 1px dashed var(--line-soft); overflow-wrap: anywhere; }
.olist li:last-child { border-bottom: 0; }
.olist li::before { content: counter(o); position: absolute; left: 0; top: 6px; font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 17px; width: 22px; text-align: right; }
.timeline { margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--silver); }
.timeline li { display: flex; gap: 10px; padding: 4px 0; }
.timeline li time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; min-width: 112px; }
.status-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin-bottom: 14px; font-weight: 600; }
.status-banner svg { width: 26px; height: 26px; flex: none; }
.status-banner.aceptada { background: var(--ok-soft); color: #A7F3D0; border: 1px solid rgba(52, 211, 153, .35); }
.status-banner.rechazada { background: var(--bad-soft); color: #FECACA; border: 1px solid rgba(248, 113, 113, .35); }
.foot-actions { display: grid; gap: 8px; }
.foot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.foot-row .btn { padding: 0 8px; font-size: 14px; }
.sheet .foot-row .btn { min-height: 44px; }
.menu-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------- confirmacion ---------- */
.confirm-body { padding: 22px 20px 6px; text-align: center; }
.confirm-body h3 { margin: 0 0 6px; font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.confirm-body p { margin: 0; color: var(--silver); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px calc(18px + var(--safe-b)); }

/* ---------- exito ---------- */
.done { text-align: center; padding: 26px 20px 8px; }
.done .check { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: var(--ok-soft); display: flex; align-items: center; justify-content: center; }
.done .check svg { width: 46px; height: 46px; color: var(--ok); }
.done .check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .15s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done h3 { margin: 0; font-family: var(--display); font-size: 30px; text-transform: uppercase; }
.done p { margin: 6px 0 0; color: var(--silver); }

/* ---------- toasts ---------- */
#toasts { position: fixed; left: 0; right: 0; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast {
  pointer-events: auto; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: #F4F5F7; color: #1C2127; font-weight: 600; font-size: 14.5px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
  animation: toastIn .35s var(--ease);
}
.toast.err { background: #FEE2E2; color: #7F1D1D; }
.toast svg { width: 20px; height: 20px; flex: none; }
.toast.out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- login ---------- */
.login {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 32px 20px calc(32px + var(--safe-b));
  background: radial-gradient(80% 60% at 50% 0%, rgba(241, 101, 34, .16), transparent 70%);
}
.login-card { width: 100%; max-width: 400px; animation: viewIn .6s var(--ease); }
.login-card .logo { width: 210px; max-width: 70%; height: auto; aspect-ratio: 420 / 211; object-fit: contain; display: block; margin: 0 auto 6px; border-radius: 14px; }
.login-card .kicker { text-align: center; font-family: var(--display); letter-spacing: .4em; text-transform: uppercase; color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.login-card h1 { font-family: var(--display); font-size: 44px; line-height: .95; text-transform: uppercase; margin: 0 0 6px; text-align: center; }
.login-card .shopline { text-align: center; color: var(--silver); margin-bottom: 22px; font-size: 15px; }
.pw-wrap { position: relative; }
.pw-wrap .eye { position: absolute; right: 6px; top: 7px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); border-radius: 10px; }
.pw-wrap .eye svg { width: 21px; height: 21px; }

/* ---------- ajustes ---------- */
.logo-tile { display: flex; align-items: center; gap: 16px; }
.logo-box {
  width: 112px; height: 112px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none;
  overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .8);
}
.logo-box img { max-width: 92%; max-height: 92%; object-fit: contain; }
.logo-box.empty { background: repeating-linear-gradient(45deg, #2E3640 0 10px, #333C48 10px 20px); color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }
.logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vars button { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--silver); font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }
.vars button:hover { border-color: var(--accent); color: var(--text); }
.savebar { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + 10px); z-index: 20; display: flex; justify-content: flex-end; margin-top: 10px; pointer-events: none; }
.savebar .btn { pointer-events: auto; }
@media (min-width: 1024px) { .savebar { bottom: 20px; } }
.settings-grid { display: grid; gap: 14px; }
@media (min-width: 1024px) { .settings-grid { grid-template-columns: 1fr 1fr; align-items: start; } .settings-grid .card { margin-bottom: 0; } }

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

.only-desk { display: none; }
@media (min-width: 1024px) { .only-mob { display: none; } .only-desk { display: block; width: 100%; } }
@media (min-width: 1024px) { .only-mob-inline { display: none; } }

/* Objetivos tactiles de al menos 44 px (auditoria) */
.chip, .views-tabs button, .filters button { min-height: 44px; }
.chip { padding: 9px 13px; }
.linkbtn { min-height: 44px; padding: 10px 6px; display: inline-flex; align-items: center; }
.shop-chip { min-height: 40px; }
.vars button { min-height: 40px; padding: 6px 11px; }
.suggest .btn.sm { min-height: 44px; }

/* ---------- tipo de vehiculo en la ficha y marcas propias ---------- */
.vt-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; vertical-align: 1px;
  font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent-soft); color: #FFB08A; border: 1px solid rgba(241, 101, 34, .4);
}
/* Color a pintar (2026-11-03): en la ficha de la cotizacion y en la cabecera de la hoja de Etapas. */
.paint-color { display: flex; align-items: center; gap: 8px; }
.paint-color svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.paint-color span { min-width: 0; overflow-wrap: anywhere; }
.paint-tag { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid rgba(241, 101, 34, .4); color: #FFB08A; font-size: 14px; }
.paint-tag svg { width: 16px; height: 16px; flex: none; }
.paint-tag .paint-l { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.paint-tag b { min-width: 0; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-car {
  border-radius: 14px; border: 1px solid var(--line); padding: 10px 8px 6px;
  background: radial-gradient(70% 60% at 50% 30%, rgba(214, 222, 235, .1), transparent 70%), linear-gradient(180deg, #2C333D, #1D2228);
}
.mini-car .car-sheet { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); }
.brand-add { display: flex; gap: 8px; align-items: stretch; }
.brand-add .grow { flex: 1; min-width: 0; }
.brand-add .btn { min-height: 54px; }
.brand-chips { margin-top: 12px; }
.chip.own { padding: 4px 4px 4px 14px; gap: 4px; background: #2B323C; color: var(--text-2); }
.chip-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.chip-x:hover { color: var(--bad); background: var(--bad-soft); }
.chip-x svg { width: 16px; height: 16px; }

/* =================================================================
   Recepcion del vehiculo + Informes
   ================================================================= */
@media (min-width: 760px) { .sheet.wide { width: min(880px, 94vw); } }
.tabbar a span { white-space: nowrap; font-size: 11.5px; }
.rc-title { display: flex; align-items: center; gap: 10px; margin-top: 2px; min-width: 0; }
.rc-title .sec-title { font-size: 23px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-title .plate-tag { flex: none; }
.rc { display: flex; flex-direction: column; gap: 26px; padding-bottom: 6px; }
.rc-sec { animation: viewIn .5s var(--ease) both; }
.rc-sec:nth-child(2) { animation-delay: .05s; } .rc-sec:nth-child(3) { animation-delay: .1s; }
.rc-sec:nth-child(4) { animation-delay: .15s; } .rc-sec:nth-child(5) { animation-delay: .2s; }
.rc-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rc-h .grow { flex: 1; min-width: 0; }
.rc-count { font-family: var(--display); font-size: 15px; color: var(--muted); letter-spacing: .06em; white-space: nowrap; }
.rc-count b { color: var(--text); font-size: 22px; }

/* checklist: tarjetas que se encienden */
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 760px) { .kit { grid-template-columns: repeat(6, 1fr); } }
.kit-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 104px; padding: 14px 6px 12px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #333C48, #2A313A); color: var(--silver); text-align: center;
  transition: border-color .25s, background .3s, color .25s, box-shadow .3s, transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
button.kit-item:active { transform: scale(.96); }
.kit-ico svg { width: 36px; height: 36px; transition: transform .45s var(--ease), color .25s; }
.kit-l { font-size: 13.5px; font-weight: 600; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
.kit-item { justify-content: flex-start; }
.kit-ck {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); color: transparent;
  transition: all .3s var(--ease);
}
.kit-ck svg { width: 13px; height: 13px; stroke-width: 3; }
.kit-item.on {
  border-color: var(--accent); color: var(--text);
  background: radial-gradient(120% 90% at 50% 0%, rgba(241, 101, 34, .22), transparent 70%), linear-gradient(180deg, #3A3F45, #2C3036);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 14px 28px -18px rgba(241, 101, 34, .9);
}
.kit-item.on .kit-ico svg { color: var(--accent); transform: translateY(-2px) scale(1.06); }
.kit-item.on .kit-ck { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(241, 101, 34, .8); }
.kit-item.pop .kit-ck { animation: ckPop .45s var(--ease); }
@keyframes ckPop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.kit-ro .kit-item { min-height: 92px; }
.kit-ro .kit-item.off { opacity: .55; }
.kit-ro .kit-item.off .kit-ck { color: var(--muted); }
.kit-ro .kit-item.off .kit-ico svg { color: var(--muted); }

/* kilometraje + medidor de combustible */
.rc-km-fuel { display: grid; gap: 14px; }
@media (min-width: 760px) { .rc-km-fuel { gap: 10px; } }
/* kilometraje como panel, del mismo alto que el del combustible en PC */
.odo { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
@media (min-width: 760px) {
  .odo { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; }
  .odo .field.km { flex: none; width: 260px; }
  .odo .km-hint { max-width: 340px; }
}
.km-hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.km-hint b { color: var(--silver); font-weight: 700; }
.field.km input { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: .04em; padding-right: 48px; font-variant-numeric: tabular-nums; }
.field.km .suffix { position: absolute; right: 14px; top: 27px; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.fuel { border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px 12px; background: radial-gradient(80% 90% at 50% 100%, rgba(241, 101, 34, .08), transparent 70%), var(--bg-deep); transition: border-color .3s; }
.fuel.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.fuel-dial { position: relative; max-width: 228px; margin: 0 auto; }
@media (min-width: 760px) { .fuel-dial { max-width: 250px; } }
.gauge { width: 100%; height: auto; display: block; overflow: visible; }
.gauge .g-track { fill: none; stroke: #20262D; stroke-width: 22; stroke-linecap: round; }
.gauge .g-seg { fill: none; stroke: #3B4451; stroke-width: 16; stroke-linecap: butt; cursor: pointer; transition: stroke .35s var(--ease), filter .35s; }
.gauge .g-seg:hover { stroke: #4A5565; }
.gauge .g-seg.on { stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(241, 101, 34, .55)); }
.fuel.low .gauge .g-seg.on { stroke: var(--bad); filter: drop-shadow(0 0 6px rgba(248, 113, 113, .6)); }
.gauge .g-tick { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.gauge .g-lbl { fill: var(--muted); font: 700 14px var(--display); letter-spacing: .06em; }
.gauge .g-needle { transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.gauge .g-needle path { fill: #F4F5F7; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.gauge .g-needle.idle { opacity: 0; }
.gauge .g-hub { fill: #2A313A; stroke: #F4F5F7; stroke-width: 3; }
.fuel-read { text-align: center; pointer-events: none; margin-top: 0; min-height: 40px; }
.fuel-read small { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fuel-read b { font-family: var(--display); font-size: 18px; color: var(--muted); letter-spacing: .04em; transition: color .3s; }
.fuel.set .fuel-read b { color: var(--text); font-size: 24px; }
.fuel-btns { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.fuel-btns button {
  min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #2B323C; color: var(--silver);
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .03em; transition: all .2s;
}
.fuel-btns button.on { background: var(--text); color: var(--bg-deep); border-color: var(--text); }
.fuel .msg { display: block; text-align: center; margin-top: 8px; font-size: 12.5px; color: var(--bad); }

/* fotos */
.ph-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ph-add {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: linear-gradient(180deg, #333C48, #2A313A); color: var(--text);
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.ph-add:hover, .ph-add:active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.ph-add:active { transform: scale(.98); }
.ph-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ph-add svg { width: 22px; height: 22px; flex: none; color: var(--accent); box-sizing: content-box; padding: 9px; border-radius: 12px; background: rgba(241, 101, 34, .14); }
.ph-add span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ph-add b { font-size: 15px; }
.ph-add small { font-size: 12px; color: var(--muted); }
.ph-add.cam svg { background: var(--accent); color: #fff; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin-top: 12px; }
@media (min-width: 760px) { .ph-grid { grid-template-columns: repeat(5, 1fr); } }
.ph-grid:empty { display: none; }
.ph { position: relative; margin: 0; min-width: 0; animation: phIn .35s var(--ease) both; }
@keyframes phIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.ph.out { animation: phOut .18s var(--ease) forwards; }
@keyframes phOut { to { opacity: 0; transform: scale(.85); } }
.ph-img { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #20262D; }
.ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
@media (hover: hover) { .ph-img:hover img { transform: scale(1.05); } }
.ph-skel { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #2B323C 0%, #3B4451 50%, #2B323C 100%); background-size: 200% 100%; animation: sk 1.1s infinite; }
/* numero de la foto: discreto, en la esquina inferior izquierda del cuadro (la foto es
   cuadrada; margin-top en % se mide sobre el ancho, que es igual al alto del cuadro) */
.ph-n { position: absolute; left: 5px; top: 0; margin-top: calc(100% - 22px); padding: 0 5px; border-radius: 5px; background: rgba(15, 18, 22, .6); color: rgba(255, 255, 255, .92); font-family: var(--display); font-weight: 700; font-size: 11px; line-height: 17px; pointer-events: none; }
.ph-del { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(15, 18, 22, .72); color: #fff; display: flex; align-items: center; justify-content: center; }
.ph-del svg { width: 16px; height: 16px; }
.ph-del:hover { background: var(--bad); }
.ph-cap { width: 100%; margin-top: 3px; min-height: 34px; padding: 5px 6px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--silver); font-size: 13.5px; outline: none; text-overflow: ellipsis; transition: border-color .2s, background .2s; }
.ph-cap::placeholder { color: #6B7686; }
.ph-cap:hover { border-color: var(--line-soft); }
.ph-cap:focus { border-color: var(--accent); background: var(--input); color: var(--text); }
.ph-up { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 12px; background: rgba(15, 18, 22, .55); display: flex; align-items: center; justify-content: center; }
.ph-up i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .7s linear infinite; }
.ph-flag { position: absolute; left: 4px; right: 4px; top: 38%; display: flex; align-items: center; gap: 4px; justify-content: center; padding: 3px 4px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 700; }
.ph-flag svg { width: 13px; height: 13px; }
.ph.failed .ph-img { border-color: var(--bad); }
.ph-grid.ro figcaption { font-size: 12.5px; color: var(--silver); margin-top: 4px; line-height: 1.25; overflow-wrap: anywhere; }

/* firma: hoja de papel */
.sig { position: relative; height: 190px; border-radius: 16px; overflow: hidden; touch-action: none;
  background: linear-gradient(180deg, #FBF8F1, #F1ECE1); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -24px rgba(0, 0, 0, .8); }
.sig canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 2; }
.sig-hint { position: absolute; left: 0; right: 0; top: 38%; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #B4AC9C; font-family: var(--display); font-size: 22px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; transition: opacity .3s; z-index: 1; }
.sig-hint svg { width: 26px; height: 26px; }
.sig.inked .sig-hint { opacity: 0; }
.sig-base { position: absolute; left: 22px; right: 22px; bottom: 42px; border-bottom: 1.5px solid #C9C1B0; pointer-events: none; z-index: 1; }
.sig-base span { position: absolute; left: -2px; bottom: 2px; color: #A89F8C; font-size: 22px; font-weight: 300; }
.sig-img { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); max-width: 82%; max-height: 140px; z-index: 2; }
.sig.ro { height: 150px; }
.sig.ro .sig-img { max-height: 104px; }
.sig-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.sig-who { font-weight: 600; color: var(--text-2); }
.sig-when { font-size: 12.5px; color: var(--muted); }
.sig-acts { display: flex; gap: 6px; }

.rc-foot { display: grid; gap: 8px; }
.rc-foot.two { grid-template-columns: 1fr 2fr; }
/* progreso de subida */
.rc-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; color: var(--silver); }
.rc-progress .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rc-progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .3s var(--ease); }

/* tarjeta de recepcion en la ficha */
.rc-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin-bottom: 8px; }
.rc-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.rc-card b { font-size: 15px; }
.rc-card span span { font-size: 13px; color: var(--silver); line-height: 1.35; }
.rc-card-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.rc-card-ico svg { width: 24px; height: 24px; }
.rc-card.done { background: var(--ok-soft); border: 1px solid rgba(52, 211, 153, .35); }
.rc-card.done .rc-card-ico { background: rgba(52, 211, 153, .18); color: #6EE7B7; }
.rc-card.pending { border: 1.5px dashed rgba(241, 101, 34, .6); background: var(--accent-soft); }
.rc-card.pending .rc-card-ico { background: rgba(241, 101, 34, .2); color: var(--accent); }
.rc-card-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rc-card-acts .btn { padding: 0 8px; font-size: 14px; }

/* visor de fotos */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(8, 10, 13, .94); display: flex; flex-direction: column; opacity: 0; transition: opacity .25s; }
.viewer.open { opacity: 1; }
.viewer-top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 8px; color: #fff; }
.viewer-n { font-family: var(--display); font-size: 18px; letter-spacing: .1em; }
.viewer-x { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; display: flex; align-items: center; justify-content: center; }
.viewer-x svg { width: 22px; height: 22px; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; opacity: 0; transform: scale(.97); transition: opacity .25s, transform .35s var(--ease); }
.viewer-stage img.in { opacity: 1; transform: none; }
.viewer-cap { min-height: 48px; padding: 10px 18px calc(14px + var(--safe-b)); color: #E8EAED; text-align: center; font-size: 15px; }
.viewer-nav { position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(15, 18, 22, .6); color: #fff; display: flex; align-items: center; justify-content: center; }
.viewer-nav svg { width: 26px; height: 26px; }
.viewer-nav.prev { left: 10px; } .viewer-nav.next { right: 10px; }

/* informes: listado */
.rlist { display: flex; flex-direction: column; gap: 8px; }
.rsep { display: flex; align-items: center; gap: 10px; margin: 10px 2px 2px; font-family: var(--display); font-size: 13px; letter-spacing: .24em; color: var(--muted); }
.rsep::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.rsep:first-child { margin-top: 0; }
.rrow {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px 12px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(51, 60, 72, .9); color: var(--text);
  overflow: hidden; animation: rowIn .4s var(--ease) both; transition: border-color .2s, background .2s, transform .15s;
}
.rrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), #F59E0B); }
.rrow:hover { border-color: #5E6A7C; background: rgba(59, 68, 81, .95); }
.rrow:active { transform: scale(.985); }
.rdate { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 4px 12px 4px 6px; border-right: 1px dashed var(--line); line-height: 1; }
.rdate b { font-family: var(--display); font-size: 30px; font-weight: 700; }
.rdate small { font-family: var(--display); font-size: 13px; letter-spacing: .2em; color: var(--accent); font-weight: 700; margin-top: 2px; }
.rdate em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.rmain { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rname { font-weight: 700; font-size: 16px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.rveh { display: flex; align-items: center; gap: 8px; color: var(--silver); font-size: 13.5px; min-width: 0; }
.rveh span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmeta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rstats { display: flex; gap: 9px; color: var(--silver); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rstats span { display: inline-flex; align-items: center; gap: 3px; }
.rstats svg { width: 15px; height: 15px; color: var(--muted); }
.fbars { display: inline-flex; gap: 2px; align-items: flex-end; }
.fbars i { width: 6px; height: 12px; border-radius: 2px; background: #4A5565; }
.fbars i:nth-child(1) { height: 7px; } .fbars i:nth-child(2) { height: 9px; } .fbars i:nth-child(3) { height: 11px; } .fbars i:nth-child(4) { height: 13px; } .fbars i:nth-child(5) { height: 15px; }
.fbars i.on { background: var(--accent); }
.fbars i.on.low { background: var(--bad); }
@media (max-width: 380px) { .rstats span:nth-child(3) { display: none; } .rdate { min-width: 46px; } }

/* informes: ficha */
.rx-hero { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.rx-hero > div { padding: 10px 12px; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rx-hero small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rx-hero b { font-family: var(--display); font-size: 18px; letter-spacing: .02em; }
.rx-hero em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.rx-fuel .fbars { margin-top: 2px; }
.rx-com { white-space: pre-wrap; margin: 0; line-height: 1.5; color: var(--text-2); }
@media (max-width: 420px) { .rx-hero { grid-template-columns: 1fr 1fr; } .rx-when { grid-column: 1 / -1; } }

/* accesibilidad de hojas y visor */
.sheet:focus, .sheet:focus-visible { outline: none; }
.sig-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.rc-card-note { display: block; margin-top: 3px; font-size: 12.5px; color: #FCD34D !important; }

/* informes: fila (celular) */
.rveh { flex-wrap: wrap; row-gap: 3px; }
.rveh-t { white-space: normal !important; overflow: visible !important; }
.rmeta { display: block; }
.rby:not(:empty)::before { content: ' · '; white-space: pre; }
.rtag { display: inline-block; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: rgba(252, 211, 77, .14); color: #FCD34D; }
.rtag.rechazada { background: var(--bad-soft); color: var(--bad); }
.rfuel { display: inline-flex; align-items: center; gap: 6px; }
.rfuel small { display: none; font-size: 12.5px; color: var(--silver); font-weight: 600; }
.rsig.off { display: none; }
.rhead { display: none; }
.rmore { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 4px; }
.rmore small { font-size: 12.5px; color: var(--muted); }

/* informes: tabla en PC */
@media (min-width: 1024px) {
  .rlist { --rcols: 96px minmax(0, 1.25fr) minmax(0, 1.9fr) 84px minmax(0, .8fr) 92px 104px; gap: 6px; }
  .rhead { display: grid; grid-template-columns: var(--rcols); gap: 0 16px; padding: 0 16px 4px 18px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .rhead span:last-child { text-align: right; }
  .rrow { grid-template-columns: var(--rcols); gap: 0 16px; padding: 10px 16px 10px 18px; border-radius: 12px; }
  .rby-l { display: none; }
  .rstats { gap: 8px; }
  .rmain, .rmeta, .rside { display: contents; }
  .rdate { flex-direction: row; align-items: baseline; gap: 6px; border-right: 0; padding: 0; min-width: 0; }
  .rdate b { font-size: 22px; }
  .rdate small { margin-top: 0; font-size: 12px; }
  .rdate em { margin-top: 0; }
  .rname { -webkit-line-clamp: 2; font-size: 15px; }
  .rveh { flex-wrap: nowrap; }
  .rveh-t { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis; min-width: 0; }
  .rno { font-size: 13px; color: var(--silver); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-variant-numeric: tabular-nums; }
  .rby { font-size: 13.5px; color: var(--silver); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rby::before { content: none !important; }
  .rfuel small { display: inline; }
  .rstats { justify-content: flex-end; }
  .rsig.off { display: inline-flex; opacity: .3; }
  .rsep { margin: 14px 2px 2px; }
}

/* =================================================================
   Etapas: linea del taller, hoja de trabajo y editor de checklists
   ================================================================= */
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tabbar a span { font-size: 11px; letter-spacing: 0; }
@media (max-width: 359px) { .tabbar a span { font-size: 10px; } }

/* linea de estaciones */
.line { display: flex; gap: 8px; align-items: stretch; margin: 2px -16px 16px; padding: 4px 16px 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.line::-webkit-scrollbar { display: none; }
.line .stations { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; position: relative; }
.line .stations::before { content: ''; position: absolute; left: 20px; right: 20px; top: 21px; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); z-index: 0; }
.line li { display: flex; }
.st-all, .station {
  position: relative; z-index: 1; flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px;
  min-width: 104px; min-height: 76px; padding: 10px 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--silver); text-align: left;
  transition: background .25s, border-color .25s, color .25s, transform .15s var(--ease), box-shadow .3s;
}
.st-all { min-width: 76px; }
.st-all b { font-family: var(--display); font-size: 28px; line-height: 1; color: var(--text); }
.st-all span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.station:active, .st-all:active { transform: scale(.97); }
.st-no { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--muted); }
.st-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
.st-n { position: absolute; top: 9px; right: 10px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 24px; text-align: center; background: #2B323C; color: var(--muted); border: 1px solid var(--line); }
.station.has { border-color: #5E6A7C; color: var(--text); background: linear-gradient(180deg, #313945, #262D36); }
.station.has .st-no { -webkit-text-stroke-color: var(--accent); }
.station.has .st-n { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 14px -2px rgba(241, 101, 34, .8); }
.station.active, .st-all.active { background: var(--text); border-color: var(--text); color: var(--bg-deep); box-shadow: 0 14px 30px -18px rgba(255, 255, 255, .5); }
.station.active .st-no { -webkit-text-stroke-color: var(--bg-deep); }
.st-all.active b, .st-all.active span { color: var(--bg-deep); }
@media (hover: hover) { .station:not(.active):hover, .st-all:not(.active):hover { border-color: #7A8698; } }
@media (min-width: 1024px) {
  .line { margin: 2px 0 20px; padding: 4px 0 8px; overflow: visible; }
  .line .stations { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .station { min-width: 0; width: 100%; }
  .st-name { white-space: normal; }
}

/* tablero */
.eboard { display: flex; flex-direction: column; gap: 18px; }
.sgroup.empty { display: none; }
.eboard.one .sgroup.empty { display: block; }
.sg-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; font-weight: 400; }
.sg-no { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; color: transparent; -webkit-text-stroke: 1.1px var(--accent); }
.sg-name { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.sg-n { margin-left: auto; font-family: var(--display); font-size: 15px; color: var(--muted); letter-spacing: .06em; }
.sg-cards { display: grid; gap: 10px; }
@media (min-width: 640px) { .sg-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.sg-empty { padding: 16px 12px; border-radius: 14px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 13.5px; text-align: center; }
@media (min-width: 1024px) {
  .eboard:not(.one):not(.done-list) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .eboard:not(.one) .sgroup, .eboard:not(.one) .sgroup.empty { display: flex; flex-direction: column; min-height: 180px; padding: 12px; border-radius: 18px; border: 1px solid var(--line-soft); background: rgba(35, 41, 49, .55); }
  .eboard:not(.one) .sg-cards { grid-template-columns: 1fr; }
  .eboard:not(.one) .sg-name { font-size: 17px; }
  .eboard:not(.one) .sg-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
}
.done-list { display: grid; gap: 10px; }
@media (min-width: 640px) { .done-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }

/* tarjeta de vehiculo */
.wcard {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; text-align: left;
  padding: 13px 14px 12px 16px; border-radius: 16px; border: 1px solid var(--line); color: var(--text);
  background: linear-gradient(180deg, rgba(55, 64, 77, .96), rgba(46, 54, 64, .96)); overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 16px 30px -24px rgba(0, 0, 0, .9);
  animation: rowIn .4s var(--ease) both; transition: border-color .2s, transform .15s var(--ease), box-shadow .3s;
}
.wcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), #F59E0B); }
.wcard.delivered::before { background: linear-gradient(180deg, var(--ok), #10B981); }
.wcard:hover { border-color: #6B778A; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 22px 36px -24px rgba(0, 0, 0, .95); }
.wcard:active { transform: scale(.985); }
.wc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wc-no { font-size: 12px; color: var(--muted); letter-spacing: .08em; font-weight: 700; }
.wc-veh { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; margin-top: 2px; overflow-wrap: anywhere; }
.wc-client { font-size: 13.5px; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
.smeter { display: flex; gap: 3px; margin-top: 4px; }
.smeter i { flex: 1; height: 5px; border-radius: 3px; background: #48525F; transition: background .3s; }
.smeter i.completada { background: var(--accent); }
.smeter i.en_proceso { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .55); animation: meterPulse 2.2s ease-in-out infinite; }
.smeter i.en_espera { background: rgba(251, 191, 36, .55); }
.smeter i.omitida { background: transparent; border: 1px dashed #48525F; }
.delivered .smeter i.completada { background: var(--ok); }
@keyframes meterPulse { 50% { opacity: .45; } }
.wc-stage { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.wc-stage b { font-size: 15px; }
.wc-stage .num { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--accent); }
.wc-stage small { margin-left: auto; font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }
.wc-bar { height: 3px; border-radius: 2px; background: #3B4451; overflow: hidden; }
.wc-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .5s var(--ease); }
.wc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; }
.wc-tech { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); font-weight: 600; }
.wc-tech span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-tech.none { color: #FCD34D; }
.wc-tech.none svg { width: 16px; height: 16px; }
.av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .04em; background: rgba(241, 101, 34, .18); color: #FFB08A; border: 1px solid rgba(241, 101, 34, .45); }
.wc-since { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.wc-ok { display: inline-flex; align-items: center; gap: 6px; color: #6EE7B7; font-weight: 600; }
.wc-ok svg { width: 16px; height: 16px; }
.rtag.aceptada { display: none; }
.rtag.pendiente { background: rgba(252, 211, 77, .14); color: #FCD34D; }
.rtag.ok { background: var(--ok-soft); color: #6EE7B7; }
.rtag.wk { background: var(--accent-soft); color: #FFB08A; }

/* hoja de trabajo */
.wk { display: flex; flex-direction: column; gap: 14px; }
.wk.static *, .wk.static *::before, .wk.static *::after { animation-name: none !important; }
.wk.static .wk-steps li.now i, .wk.static .smeter i.en_proceso { animation-name: stepPulse !important; }
.wk-qnote { margin: -4px 0 0; }
.wk-hero {
  position: relative; display: grid; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(90% 120% at 0% 0%, rgba(241, 101, 34, .16), transparent 60%), linear-gradient(180deg, #2C333D, #232930);
  animation: viewIn .5s var(--ease) both;
}
.wk-hero.delivered { background: radial-gradient(90% 120% at 0% 0%, rgba(52, 211, 153, .16), transparent 60%), linear-gradient(180deg, #2C333D, #232930); }
.wk-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-now small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.wk-hero.delivered .wk-now small { color: #6EE7B7; }
.wk-now b { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 8vw, 42px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.wk-now em { font-style: normal; color: var(--silver); font-size: 14px; margin-top: 4px; }
.wk-flag { display: inline-flex; align-items: center; gap: 10px; color: #A7F3D0; }
.wk-flag svg { width: 30px; height: 30px; }
.wk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wk-stats span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: rgba(20, 24, 29, .45); border: 1px solid var(--line-soft); }
.wk-stats b { font-family: var(--display); font-size: 24px; line-height: 1; }
.wk-stats small { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.wk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.wk-steps li { position: relative; display: flex; justify-content: center; }
.wk-steps li + li::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.wk-steps li.completada + li::before { background: var(--accent); }
.wk-steps button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); min-width: 0; width: 100%; min-height: 44px; }
.wk-steps i { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #262D36; border: 2px solid var(--line); transition: all .3s; }
.wk-steps i svg { width: 16px; height: 16px; stroke-width: 3; }
.wk-steps li.completada i { background: var(--accent); border-color: var(--accent); color: #fff; }
.wk-steps li.now i { border-color: #fff; background: #3B4451; box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 0 18px rgba(255, 255, 255, .35); animation: stepPulse 2.4s ease-in-out infinite; }
.wk-steps li.en_espera i { border-color: var(--warn); border-style: dashed; }
.wk-steps span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-steps li.now span { color: var(--text); }
.wk-steps li.completada span { color: var(--silver); }
.wk-hero.delivered .wk-steps li.completada i { background: var(--ok); border-color: var(--ok); color: #04241A; }
.wk-hero.delivered .wk-steps li.completada + li::before { background: var(--ok); }
@keyframes stepPulse { 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .03), 0 0 10px rgba(255, 255, 255, .2); } }
@media (min-width: 640px) { .wk-steps span { display: block; } }
.wk-in { font-size: 12.5px; color: var(--muted); }
@media (min-width: 760px) {
  .wk-hero { grid-template-columns: 1fr auto; align-items: end; padding: 20px; }
  .wk-stats { min-width: 300px; }
  .wk-steps, .wk-in { grid-column: 1 / -1; }
}

/* etapas en acordeon */
.stgs { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); background: rgba(35, 41, 49, .65); overflow: hidden; }
.stg { border-top: 1px solid var(--line-soft); animation: viewIn .45s var(--ease) both; }
.stg:first-child { border-top: 0; }
.stg:nth-child(2) { animation-delay: .03s; } .stg:nth-child(3) { animation-delay: .06s; } .stg:nth-child(4) { animation-delay: .09s; }
.stg:nth-child(5) { animation-delay: .12s; } .stg:nth-child(6) { animation-delay: .15s; } .stg:nth-child(7) { animation-delay: .18s; } .stg:nth-child(8) { animation-delay: .21s; }
.stg-head { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 13px 14px; min-height: 64px; border: 0; background: transparent; color: var(--text); text-align: left; scroll-margin-top: 8px; }
.stg-head:hover { background: rgba(255, 255, 255, .025); }
.stg-badge { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 18px; background: #262D36; border: 1px solid var(--line); color: var(--muted); transition: all .3s; }
.stg-badge svg { width: 18px; height: 18px; }
.stg.completada .stg-badge { background: var(--ok-soft); border-color: rgba(52, 211, 153, .5); color: #6EE7B7; }
.stg.completada .stg-badge svg { stroke-width: 3; }
.stg.en_proceso .stg-badge { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 18px -4px rgba(241, 101, 34, .9); }
.stg.en_espera .stg-badge { border-color: var(--warn); border-style: dashed; color: #FCD34D; }
.stg-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stg-name { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.stg-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg.en_proceso .stg-st { color: #FFB08A; font-weight: 700; }
.stg.completada .stg-st { color: #6EE7B7; font-weight: 700; }
.stg.en_espera .stg-st { color: #FCD34D; font-weight: 700; }
.stg-count { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; width: 58px; font-family: var(--display); font-size: 14px; color: var(--muted); }
.stg-count b { font-size: 20px; color: var(--text); }
.stg-bar { flex-basis: 100%; height: 3px; border-radius: 2px; background: #3B4451; overflow: hidden; margin-top: 4px; }
.stg-bar i { display: block; height: 100%; background: var(--accent); transition: width .5s var(--ease); }
.stg.completada .stg-bar i { background: var(--ok); }
.stg-chev { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--silver); transition: transform .35s var(--ease); }
.stg-chev svg { width: 20px; height: 20px; }
.stg.open .stg-chev { transform: rotate(180deg); }
.stg-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.stg.open .stg-body { grid-template-rows: 1fr; }
.stg-inner { min-height: 0; overflow: hidden; }
.stg:not(.open) .stg-inner { visibility: hidden; }
.stg-content { padding: 2px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.stg.now { background: linear-gradient(90deg, rgba(241, 101, 34, .07), transparent 60%); }
.stg.flash { animation: stgFlash 1.1s var(--ease) !important; }
@keyframes stgFlash { 0% { background: rgba(52, 211, 153, .28); } 100% { background: transparent; } }
.wk-lock, .wk-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; }
.wk-lock { background: rgba(20, 24, 29, .5); border: 1px dashed var(--line); color: var(--silver); }
.wk-lock svg, .wk-note svg { width: 20px; height: 20px; flex: none; }
.wk-lock b { color: var(--text); }
.wk-note { background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .3); color: #F3E3B5; }
.wk-note a { color: #FFD08A; font-weight: 700; }
.wk-tech select { padding-right: 44px; cursor: pointer; }
.wk-tech select:disabled { opacity: .75; cursor: default; }
.wk-sel-chev { position: absolute; right: 12px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: var(--silver); pointer-events: none; }
.wk-sel-chev svg { width: 20px; height: 20px; }
.wk-tech option { background: #2B323C; color: var(--text); }
.wk-tech.shake select { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, .2); }

/* checklist */
.chk-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.chk {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; min-height: 52px; border-radius: 13px;
  border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .35); color: var(--text-2); text-align: left; font-size: 15px; line-height: 1.35;
  transition: border-color .2s, background .25s, color .2s, opacity .2s, transform .12s var(--ease);
}
.chk:active { transform: scale(.99); }
@media (hover: hover) { .chk:not(.dis):hover { border-color: #5E6A7C; } }
.chk-box { flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 8px; border: 2px solid #5E6A7C; display: flex; align-items: center; justify-content: center; color: transparent; transition: all .25s var(--ease); }
.chk-box svg { width: 16px; height: 16px; stroke-width: 3.2; }
.chk.on { border-color: rgba(241, 101, 34, .35); background: linear-gradient(90deg, rgba(241, 101, 34, .1), rgba(241, 101, 34, .02)); color: var(--text); }
.chk.on .chk-box { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 12px -2px rgba(241, 101, 34, .9); }
.chk.pop .chk-box { animation: ckPop .45s var(--ease) !important; }
.chk.dis { opacity: .5; }
.chk.dis .chk-box { border-style: dashed; }
.chk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.chk-who, .chk-photo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.chk-who svg, .chk-photo svg { width: 14px; height: 14px; flex: none; }
.chk.on .chk-who { color: #FFC4A6; }
.chk-photo.need { color: #FCD34D; }

/* fotos de la etapa */
.wk-photos { padding-top: 4px; }
.wk-sub { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.wk-sub .num { font-family: var(--display); font-size: 16px; letter-spacing: .04em; color: var(--text-2); }
.wk-photos .ph-actions { margin-top: 8px; }
.wk-photos .ph-grid { margin-top: 10px; }
.wk-photos figcaption { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.wk-none { color: var(--muted); font-size: 13.5px; margin: 0; }
.wk-done.celebrate svg { animation: flagWave 1s var(--ease) 2 !important; transform-origin: 20% 90%; }
@keyframes flagWave { 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(6deg); } }

/* tarjeta de avance en la ficha y en Informes */
.wk-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin: 0 0 14px; text-decoration: none; color: var(--text);
  background: linear-gradient(90deg, rgba(241, 101, 34, .14), rgba(241, 101, 34, .04)); border: 1px solid rgba(241, 101, 34, .45); transition: border-color .2s, transform .15s; }
.wk-card:active { transform: scale(.99); }
.wk-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-card b { font-size: 15px; }
.wk-card .grow > span:not(.wk-card-bar) { font-size: 13px; color: var(--silver); }
.wk-card .rc-card-ico { background: rgba(241, 101, 34, .2); color: var(--accent); }
.wk-card-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 5px; }
.wk-card-bar i { display: block; height: 100%; background: var(--accent); }
.wk-card-go { color: var(--silver); display: flex; }
.wk-card-go svg { width: 20px; height: 20px; }
.wk-card.delivered { background: var(--ok-soft); border-color: rgba(52, 211, 153, .4); }
.wk-card.delivered .rc-card-ico { background: rgba(52, 211, 153, .18); color: #6EE7B7; }
.wk-card.delivered .wk-card-bar i { background: var(--ok); }
.blk .wk-card { margin-bottom: 0; }
.foot-row.inf-main { grid-template-columns: 1.4fr 1fr; }
.sheet .foot-row.inf-main .btn { min-height: 54px; font-size: 15.5px; }

/* Configuracion: tecnicos y resumen de etapas */
.chip.tech { padding: 3px; }
.tech-name { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 8px 0 4px; border: 0; background: transparent; color: var(--text-2); font-weight: 600; font-size: 14px; border-radius: 999px; }
.tech-name:hover { color: var(--text); }
.stg-sum { margin: 0 0 12px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stg-sum li { display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; border-radius: 11px; background: var(--bg-deep); border: 1px solid var(--line-soft); min-width: 0; }
.stg-sum li .num { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 15px; }
.stg-sum li b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.stg-sum li small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.stg-sum li.off { opacity: .5; }
.stg-sum li.off b { text-decoration: line-through; text-decoration-color: var(--muted); }

/* editor de etapas */
.se-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid rgba(241, 101, 34, .35); color: #FFD8C5; font-size: 13.5px; line-height: 1.4; }
.se-note svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.se-list { display: flex; flex-direction: column; gap: 8px; }
.se { border-radius: 16px; border: 1px solid var(--line); background: var(--bg-deep); overflow: hidden; transition: opacity .25s, border-color .25s; }
.se.open { border-color: #5E6A7C; }
.se.off { opacity: .62; }
.se-head { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "num name switch moves" "tog tog tog tog"; align-items: center; gap: 6px 10px; padding: 10px 10px 8px 12px; }
.se-num { grid-area: num; font-family: var(--display); font-weight: 700; font-size: 22px; color: transparent; -webkit-text-stroke: 1.1px var(--accent); min-width: 28px; }
.se-name { grid-area: name; min-width: 0; width: 100%; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text);
  font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; outline: none; transition: border-color .2s, background .2s; }
.se-name:hover { border-color: var(--line); }
.se-name:focus { border-color: var(--accent); background: var(--input); box-shadow: 0 0 0 3px var(--accent-soft); }
.se-moves { grid-area: moves; display: flex; gap: 2px; }
.switch { grid-area: switch; position: relative; display: inline-flex; width: 50px; height: 30px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 15px; background: #3B4451; border: 1px solid var(--line); transition: background .25s, border-color .25s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #C7CCD5; transition: transform .3s var(--ease), background .25s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .6; }
.se-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--silver); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.se-btn svg { width: 19px; height: 19px; }
.se-btn:hover:not([disabled]) { border-color: var(--line); color: var(--text); background: #2B323C; }
.se-btn[disabled] { opacity: .3; cursor: default; }
.se-btn.del:hover { color: var(--bad); border-color: rgba(248, 113, 113, .4); }
.se-toggle { grid-area: tog; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 40px; border: 0; background: none; color: var(--silver); font-size: 13.5px; font-weight: 600; border-radius: 10px; }
.se-toggle .num { font-family: var(--display); font-size: 17px; color: var(--text); }
.se-toggle svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.se.open .se-toggle svg { transform: rotate(180deg); }
.se-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.se.open .se-body { grid-template-rows: 1fr; }
.se-inner { min-height: 0; overflow: hidden; }
.se:not(.open) .se-inner { visibility: hidden; }
.se-items { margin: 0; padding: 4px 10px 0 12px; list-style: none; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line-soft); }
.se-items li { position: relative; display: grid; grid-template-columns: 24px 1fr auto; grid-template-areas: "n t ph" ". tools tools"; align-items: start; gap: 0 6px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.se-i { grid-area: n; font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 15px; padding-top: 11px; text-align: right; }
.se-text { grid-area: t; width: 100%; min-height: 42px; resize: none; overflow: hidden; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-2); font-size: 14.5px; line-height: 1.4; outline: none; transition: border-color .2s, background .2s; }
.se-text:hover { border-color: var(--line); }
.se-text:focus { border-color: var(--accent); background: var(--input); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); }
.se-ph { grid-area: ph; padding-top: 11px; color: #FCD34D; display: flex; }
.se-ph svg { width: 17px; height: 17px; }
.se-tools { grid-area: tools; display: none; justify-content: flex-end; gap: 2px; padding-top: 2px; }
.se-items li:focus-within .se-tools { display: flex; }
@media (hover: hover) and (min-width: 760px) {
  .se-items li { grid-template-areas: "n t ph tools"; grid-template-columns: 24px 1fr auto auto; }
  .se-tools { display: flex; opacity: 0; padding-top: 1px; transition: opacity .2s; }
  .se-items li:hover .se-tools, .se-items li:focus-within .se-tools { opacity: 1; }
}
.se-add { display: flex; gap: 8px; align-items: stretch; padding: 12px 10px 4px 12px; }
.se-add .grow { flex: 1; min-width: 0; }
.se-add .btn { min-height: 54px; }
.se-hint { margin: 6px 12px 12px; font-size: 12.5px; color: var(--muted); }
@media (min-width: 640px) {
  .se-head { grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "num name tog switch moves"; }
  .se-toggle { padding-left: 10px; }
}
.wc-stage small { white-space: nowrap; }
.wc-stage b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eta-limit { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ajustes tras el arbitro: palabras largas, columnas largas en PC, movimiento reducido, editor en iPhone */
.sg-head { min-width: 0; }
.sg-name, .st-name, .wc-veh, .stg-name, .se-name { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .eboard:not(.one) .sg-cards { max-height: 72vh; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; } }
.se-items li.edit .se-tools { display: flex; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .smeter i.en_proceso, .wk-steps li.now i, .wk.static .wk-steps li.now i { animation: none !important; } }
@media (max-width: 1023px) { .st-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; } }

/* El logo actualiza la aplicacion: es un boton con un disco de refresco que gira mientras recarga. */
.topbar .brand, .rail .rail-logo, .login-card .logo-btn {
  position: relative; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
/* Area tactil comoda sin alterar el alto de la barra. */
.topbar .brand::after { content: ''; position: absolute; inset: -6px -6px; }
.rail .rail-logo { display: block; width: 100%; }
.login-card .logo-btn { display: block; width: 210px; max-width: 70%; margin: 0 auto 6px; }
.login-card .logo-btn .logo { width: 100%; max-width: none; margin: 0; }
.rfx { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--muted); transition: color .2s, opacity .25s; }
.rfx svg { width: 100%; height: 100%; display: block; }
.topbar .brand .rfx { width: 15px; height: 15px; margin-left: 1px; }
.rail .rail-logo .rfx {
  position: absolute; right: 4px; bottom: 10px; width: 28px; height: 28px; padding: 5px; border-radius: 50%;
  background: rgba(35, 41, 49, .92); border: 1px solid var(--line); opacity: 0;
}
.rail .rail-logo:hover .rfx, .rail .rail-logo:focus-visible .rfx, .rail .rail-logo.loading .rfx { opacity: 1; }
.login-card .logo-btn .rfx {
  position: absolute; right: -4px; bottom: 4px; width: 28px; height: 28px; padding: 5px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
}
[data-refresh]:active { transform: scale(.97); }
[data-refresh]:hover .rfx, [data-refresh]:focus-visible .rfx { color: var(--accent); }
[data-refresh].loading { pointer-events: none; }
[data-refresh].loading img { opacity: .55; }
[data-refresh].loading .rfx { color: var(--accent); animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { [data-refresh].loading .rfx { animation: none !important; } }

/* =================================================================
   Avisos de WhatsApp al cliente al pasar de etapa
   ================================================================= */
.wc-wa {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: rgba(31, 175, 90, .16); color: #6EE7A8; border: 1px solid rgba(31, 175, 90, .45);
}
.wc-wa svg { width: 13px; height: 13px; }
.wcard .wc-wa { animation: waPulse 2.4s ease-in-out infinite; }
@keyframes waPulse { 50% { box-shadow: 0 0 0 4px rgba(31, 175, 90, .12); } }

.nt-band {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(31, 175, 90, .16), rgba(31, 175, 90, .05));
  border: 1px solid rgba(31, 175, 90, .45); animation: viewIn .4s var(--ease) both;
}
.nt-band .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nt-band b { font-size: 15px; }
.nt-band .grow span { font-size: 13px; color: var(--silver); overflow-wrap: anywhere; }
.nt-band .btn { flex: none; }
.nt-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgba(31, 175, 90, .2); color: #6EE7A8;
}
.nt-ico svg { width: 22px; height: 22px; }

.nt-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; font-size: 13.5px;
  color: var(--silver); background: rgba(20, 24, 29, .4); border: 1px solid var(--line-soft);
}
.nt-row svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.nt-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nt-row .btn { flex: none; }
.nt-row.pend { background: rgba(31, 175, 90, .1); border-color: rgba(31, 175, 90, .4); color: var(--text); }
.nt-row.pend svg { color: #6EE7A8; }
.nt-row.ok svg { color: var(--ok); }
.nt-row.off { opacity: .72; }

.nt { display: flex; flex-direction: column; gap: 14px; }
.nt-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg-deep); border: 1px solid var(--line); }
.nt-step .grow { display: flex; flex-direction: column; min-width: 0; }
.nt-step small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.nt-step b { font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; overflow-wrap: anywhere; }
.nt-step em { font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.nt-to { margin: 0; font-size: 13.5px; color: var(--silver); line-height: 1.4; }
.nt-to b { color: var(--text); }
.nt-hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.nt .field textarea { min-height: 118px; }

.se-wa { padding: 12px 12px 2px; border-top: 1px solid var(--line-soft); }
.se-wa-head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.se-wa-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.se-wa-head b { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; }
.se-wa-head b svg { width: 17px; height: 17px; flex: none; color: #6EE7A8; }
.se-wa-head small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.se-wa .field { margin-top: 10px; }
.se-wa .field textarea { min-height: 74px; font-size: 14px; resize: none; overflow: hidden; }
.se-wa .switch input:checked + span { background: #1FAF5A; border-color: #1FAF5A; }
.btn.sending { pointer-events: none; opacity: .6; }
.nt .vars { margin-top: -6px; }

/* ======================================================================
   Ampliacion (2026-11): navegacion por grupos, "Mas" en celular, modo administrador
   ====================================================================== */
.tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tabbar > button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0; transition: color .2s;
}
.tabbar > button svg { width: 24px; height: 24px; }
.tabbar > button.active { color: var(--text); }
.tabbar > button.active svg { color: var(--accent); }
.tabbar > button.active::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 36px; height: 3px; margin-left: -18px;
  border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: 0 0 14px rgba(241, 101, 34, .8);
}
.tabbar > button.has-badge::after {
  content: ''; position: absolute; top: 11px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 0 2px var(--bg-deep);
}
.badge-dot.alert { background: var(--bad) !important; color: #fff; }

@media (min-width: 1024px) {
  .rail { overflow-y: auto; scrollbar-width: thin; }
  .rail-nav { display: flex; flex-direction: column; gap: 2px; }
  .rail .rail-sub { margin-bottom: 8px; }
  .rail-group {
    font-family: var(--display); font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--muted); opacity: .8; margin: 14px 0 4px 14px;
  }
  .rail-group:first-child { margin-top: 4px; }
  .rail a.nav { position: relative; padding: 10px 14px; }
  .rail a.nav .badge-dot {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--accent); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center;
  }
  .rail a.nav.active .badge-dot { background: rgba(255, 255, 255, .22); }
  .rail .rail-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
  .rail-adm {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 11px;
    border: 1px dashed var(--line); background: transparent; color: var(--silver); font-size: 13px; font-weight: 600; text-align: left;
    transition: border-color .2s, color .2s, background .2s;
  }
  .rail-adm svg { width: 18px; height: 18px; flex: none; }
  .rail-adm:hover { border-color: var(--silver); color: var(--text); }
  .rail-adm.on { border-style: solid; border-color: rgba(52, 211, 153, .5); background: var(--ok-soft); color: var(--ok); }
  .rail-shop { padding: 0 6px; }
}

/* Chip "Admin" en la barra superior del celular */
.adm-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin-right: 8px;
  border-radius: 999px; border: 1px solid rgba(52, 211, 153, .45); background: var(--ok-soft); color: var(--ok);
  font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.adm-chip svg { width: 17px; height: 17px; }

/* Hoja "Mas" */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.more-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 14px 8px; border-radius: var(--radius-sm); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-2); font-weight: 600; font-size: 14px;
  animation: viewIn .38s var(--ease) both; animation-delay: calc(var(--i) * 35ms);
  transition: border-color .2s, transform .15s;
}
.more-tile svg { width: 26px; height: 26px; color: var(--silver); }
.more-tile:active { transform: scale(.97); }
.more-tile.active { border-color: var(--accent); color: var(--text); }
.more-tile.active svg { color: var(--accent); }
.more-tile .badge-dot {
  position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center;
}
.more-adm {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 14px; padding: 14px 16px; text-align: left;
  border-radius: var(--radius-sm); border: 1px dashed var(--line); background: transparent; color: var(--text-2);
}
.more-adm svg { width: 24px; height: 24px; flex: none; color: var(--silver); }
.more-adm b { display: block; }
.more-adm small { color: var(--muted); font-size: 13px; }
.more-adm.on { border-style: solid; border-color: rgba(52, 211, 153, .5); background: var(--ok-soft); }
.more-adm.on svg, .more-adm.on b { color: var(--ok); }

/* Desbloqueo y candado del modo administrador */
.adm-gate { text-align: center; padding: 6px 4px 2px; }
.adm-gate h3 { font-family: var(--display); font-size: 28px; letter-spacing: .02em; margin: 10px 0 4px; }
.adm-gate p { color: var(--silver); margin: 0 0 16px; }
.adm-gate .field { text-align: left; }
.adm-gate .adm-err { min-height: 22px; color: var(--bad); font-size: 14px; margin: 4px 0 10px; }
.adm-gate .confirm-actions { padding: 0; }
.adm-gate .adm-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.adm-gate.shake { animation: shake .4s; }
.adm-seal {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(241, 101, 34, .35), rgba(241, 101, 34, .08) 70%);
  border: 1px solid rgba(241, 101, 34, .45); color: var(--accent); box-shadow: 0 14px 34px -16px rgba(241, 101, 34, .9);
}
.adm-seal svg { width: 30px; height: 30px; }
.adm-locked { text-align: center; padding: 38px 22px 30px; max-width: 520px; margin: 0 auto 18px; }
.adm-locked h2 { font-family: var(--display); font-size: 30px; margin: 14px 0 6px; letter-spacing: .02em; }
.adm-locked p { color: var(--silver); margin: 0 auto 20px; max-width: 380px; }
.adm-session { max-width: 520px; margin: 0 auto; }
.adm-row { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-row .btn { flex: 1 1 auto; }

/* ======================================================================
   Ampliacion (2026-11) M1: Clientes y vehiculos
   ====================================================================== */
/* Autocompletar del Cotizador */
.sug-list { max-height: 300px; }
.combo-opt.sug { gap: 11px; min-height: 54px; padding: 7px 10px; }
.combo-opt.sug .plate-tag { margin-left: auto; font-size: 13px; }
.combo-opt.sug > .plate-tag:first-child { margin-left: 0; }
.combo-opt[disabled] { opacity: .5; cursor: default; }
.sug-av, .c-av {
  flex: none; display: grid; place-items: center; border-radius: 50%; font-family: var(--display); font-weight: 700; letter-spacing: .04em;
  background: radial-gradient(circle at 30% 25%, rgba(241, 101, 34, .32), rgba(241, 101, 34, .08) 72%); color: #FFB08A;
  border: 1px solid rgba(241, 101, 34, .45);
}
.sug-av { width: 36px; height: 36px; font-size: 15px; }
.c-av.emp, .sug-av.emp { border-radius: 11px; background: linear-gradient(160deg, #3B4451, #2B323C); color: var(--text-2); border-color: var(--line); }
.sug-main { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.sug-t { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sug-right { left: auto; min-width: min(300px, calc(100vw - 32px)); }
.field.filled input { animation: fillFlash 1s var(--ease); }
@keyframes fillFlash { 0% { background: rgba(241, 101, 34, .22); border-color: var(--accent); } 100% { } }

.known { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; animation: rowIn .35s var(--ease); }
.known-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px 9px 11px; border-radius: 13px;
  background: linear-gradient(90deg, rgba(241, 101, 34, .12), rgba(241, 101, 34, .02)); border: 1px solid rgba(241, 101, 34, .32);
}
.known-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.known-row .grow b { font-size: 14px; }
.known-row .grow span { font-size: 12.5px; color: var(--silver); }
.known-row .grow em { font-style: normal; font-size: 12.5px; color: #FCD34D; margin-top: 2px; }
.known-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(241, 101, 34, .18); color: var(--accent); }
.known-ico svg { width: 19px; height: 19px; }
.known-go { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 6px 0 10px; border-radius: 10px; color: var(--text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.known-go svg { width: 17px; height: 17px; }
.known-go:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.known-veh { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-left: 2px; }
.known-veh small, .cx-past small { width: 100%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.known-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 6px 12px 6px 7px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--silver); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .2s, transform .15s var(--ease);
}
.known-chip span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.known-chip:hover { border-color: var(--accent); color: var(--text); }
.known-chip:active { transform: scale(.97); }

/* Listado */
.clist { display: flex; flex-direction: column; gap: 9px; }
.crow {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 13px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(51, 60, 72, .92); color: var(--text);
  overflow: hidden; animation: rowIn .38s var(--ease) both; transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.crow:hover { border-color: #5E6A7C; background: rgba(59, 68, 81, .95); }
.crow:active { transform: scale(.985); }
.crow.arch { opacity: .78; }
.crow .c-av { width: 46px; height: 46px; font-size: 18px; }
.c-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.c-name { font-weight: 700; font-size: 16px; line-height: 1.2; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.c-kind { flex: none; font-family: var(--display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.c-sub { font-size: 13.5px; color: var(--silver); display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-sub i { font-style: normal; color: var(--muted); }
.c-sub svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.c-plates, .c-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; align-items: center; }
.c-plates .plate-tag { font-size: 12.5px; padding: 0 6px; }
.c-plates em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; }
.c-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.05; }
.c-side b { font-family: var(--display); font-size: 28px; font-weight: 700; }
.c-side small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.c-side em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 6px; white-space: nowrap; }
.crow.veh .c-plate { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 84px; padding-right: 12px; border-right: 1px dashed var(--line); }
.crow.veh .c-plate .plate-tag { font-size: 16px; padding: 2px 8px; }
.crow.veh .c-plate small { font-family: var(--display); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rtag.ins { background: rgba(147, 197, 253, .12); color: #BFDBFE; }
@media (max-width: 380px) { .crow { gap: 10px; padding: 12px 11px; } .crow .c-av { width: 40px; height: 40px; } .crow.veh .c-plate { min-width: 72px; padding-right: 9px; } .c-side b { font-size: 24px; } }
@media (min-width: 1024px) { .clist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .clist > .rmore, .clist > .empty { grid-column: 1 / -1; } }

.cli-empty { max-width: 460px; margin: 0 auto; line-height: 1.5; }
.cli-empty-art {
  width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 26px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(241, 101, 34, .3), rgba(241, 101, 34, .05) 70%); border: 1px dashed rgba(241, 101, 34, .55);
  animation: viewIn .6s var(--ease) both;
}
.cli-empty .cli-empty-art svg { width: 40px; height: 40px; margin: 0; color: var(--accent); }
.cli-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }

/* Fichas */
.cx-title { display: flex; align-items: center; gap: 12px; margin-top: 4px; min-width: 0; }
.cx-title .c-av { width: 42px; height: 42px; font-size: 17px; }
.cx-title .sec-title { font-size: 24px; min-width: 0; overflow-wrap: anywhere; }
.cx-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.cx-contact:empty { display: none; }
.cx-contact .btn { padding: 0 10px; }
.cx-hint {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 12px; text-align: left;
  border: 1.5px dashed rgba(241, 101, 34, .55); background: var(--accent-soft); color: var(--text-2); font-size: 14px;
}
.cx-hint svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.cx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cx-stats > div {
  position: relative; min-width: 0; padding: 11px 12px 10px; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; overflow: hidden; animation: viewIn .45s var(--ease) both;
}
.cx-stats > div:nth-child(2) { animation-delay: .05s; } .cx-stats > div:nth-child(3) { animation-delay: .1s; }
.cx-stats > div::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--warn); opacity: .8; }
.cx-stats > .acc::before { background: var(--accent); }
.cx-stats > .del::before { background: var(--ok); }
.cx-stats small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cx-stats b { font-family: var(--display); font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stats em { font-style: normal; font-size: 12px; color: var(--silver); }
@media (max-width: 420px) { .cx-stats { grid-template-columns: 1fr 1fr; } .cx-stats > div:first-child { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .cx-stats > div:first-child b { font-size: 24px; } }
.blk-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.blk-h h4 { margin: 0; font-family: var(--display); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.blk-h .linkbtn { gap: 5px; text-decoration: none; }
.blk-h .linkbtn svg { width: 16px; height: 16px; }
.cx-notes { white-space: pre-wrap; font-weight: 500 !important; color: var(--text-2); }
.cx-mono { font-family: ui-monospace, Consolas, monospace; font-size: 14px; letter-spacing: .02em; }
.cx-none { margin: 0; color: var(--muted); font-size: 14px; }
.cx-vehs { display: flex; flex-direction: column; gap: 8px; }
.cx-veh {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-deep);
  text-decoration: none; color: var(--text); transition: border-color .2s, transform .15s var(--ease);
}
.cx-veh:hover { border-color: #5E6A7C; }
.cx-veh:active { transform: scale(.99); }
.cx-veh .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cx-veh .grow b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-veh .grow span { font-size: 12.5px; color: var(--silver); }
.cx-past { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cx-owner-wrap { display: flex; gap: 8px; align-items: stretch; margin-bottom: 14px; }
.cx-owner-wrap .btn.icon { width: 56px; min-height: auto; border-radius: 14px; }
.cx-owner {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; text-decoration: none; color: var(--text);
  background: linear-gradient(90deg, rgba(241, 101, 34, .12), rgba(241, 101, 34, .02)); border: 1px solid rgba(241, 101, 34, .35);
}
.cx-owner .c-av { width: 42px; height: 42px; font-size: 16px; }
.cx-owner .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cx-owner small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cx-owner b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-owner .grow > span { font-size: 12.5px; color: var(--silver); }
.cx-noowner {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 14px; border-radius: 14px; text-align: left;
  border: 1.5px dashed #5E6A7C; background: transparent; color: var(--text-2);
}
.cx-noowner > svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.cx-noowner span span { display: block; font-size: 13px; color: var(--muted); }
.owners { list-style: none; margin: 6px 0 0; padding: 0 0 0 18px; position: relative; }
.owners::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 1px; }
.owners li { position: relative; padding: 6px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.owners li::before { content: ''; position: absolute; left: -18px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.owners li.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(241, 101, 34, .8); }
.owners li a { color: var(--text); text-decoration: none; }
.owners li a:hover { text-decoration: underline; }
.owners li span { font-size: 13px; color: var(--silver); }
.owners li em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }

.hx-list { display: flex; flex-direction: column; gap: 7px; }
.hx {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 14px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--bg-deep); text-decoration: none; color: var(--text); overflow: hidden;
  animation: rowIn .35s var(--ease) both; transition: border-color .2s, transform .15s var(--ease);
}
.hx::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.hx.aceptada::before { background: var(--ok); } .hx.rechazada::before { background: var(--bad); }
.hx:hover { border-color: #5E6A7C; }
.hx:active { transform: scale(.99); }
.hx-n { display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 46px; }
.hx-n small { font-size: 9.5px; letter-spacing: .18em; color: var(--muted); font-weight: 700; }
.hx-n b { font-family: var(--display); font-size: 20px; font-weight: 700; }
.hx-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hx-veh { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; min-width: 0; }
.hx-veh .plate-tag { font-size: 12px; padding: 0 5px; }
.hx-veh span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; }
.hx-tags .pill { font-size: 10.5px; padding: 2px 8px; }
.hx-tags time { font-size: 12px; color: var(--muted); }
.hx-total { font-family: var(--display); font-size: 18px; font-weight: 700; white-space: nowrap; }
.status-banner.arch { background: rgba(138, 147, 163, .12); color: var(--text-2); border: 1px solid var(--line); }

/* Formularios de ficha */
.cx-form .field textarea { min-height: 84px; }
.cx-form .field.mono input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; border-radius: 13px; background: var(--bg-deep); border: 1px solid var(--line); }
.seg button {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 8px; border-radius: 10px; border: 0;
  background: transparent; color: var(--silver); font-weight: 600; font-size: 14px; transition: background .2s, color .2s;
}
.seg button svg { width: 18px; height: 18px; }
.seg button[aria-checked="true"] { background: var(--text); color: var(--bg-deep); }
.seg.vt { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seg.vt button { font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; font-size: 14px; padding: 0 2px; }
@media (max-width: 520px) { .seg.vt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seg.vt button[aria-checked="true"] { background: var(--accent); color: #fff; }
.op-list { display: flex; flex-direction: column; gap: 4px; min-height: 60px; }
.op-list .combo-opt { background: var(--bg-deep); }
.to-file { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.to-file svg { width: 15px; height: 15px; }
.to-file:hover { text-decoration: underline; }

/* ======================================================================
   Ampliacion (2026-11) M2: trabajo, horas por etapa, fase de foto, bitacora y alertas
   ====================================================================== */
/* estados de la bitacora y las alertas: notificado (rojo) -> gestionado (amarillo) -> solucionado (verde) */
.lg-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }
.lg-dot.gestionado { background: var(--warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, .16); }
.lg-dot.solucionado { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .14); }
.lg-st, .lg-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px 0 11px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid rgba(248, 113, 113, .45); background: var(--bad-soft); color: #FCA5A5;
}
.lg-st { min-height: 36px; transition: transform .15s var(--ease), border-color .2s; }
.lg-st:active { transform: scale(.97); }
.lg-st svg { width: 14px; height: 14px; }
.lg-st.gestionado, .lg-pill.gestionado { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .12); color: #FCD34D; }
.lg-st.solucionado, .lg-pill.solucionado { border-color: rgba(52, 211, 153, .4); background: var(--ok-soft); color: #6EE7B7; }

/* tablero: tarjeta con boton de bitacora, entrega estimada, demora y cancelados */
.wcard-w { position: relative; display: flex; min-width: 0; animation: rowIn .4s var(--ease) both; }
.wcard-w > .wcard { animation: none; }
.wcard-w .wc-top { padding-right: 52px; }
.wcard-w:has(.wc-log.has) .wc-top { padding-right: 76px; }
.wcard-w .wc-no { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-log {
  position: absolute; top: 8px; right: 8px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 42px; height: 36px; padding: 0 9px; border-radius: 11px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .45); color: var(--muted);
  transition: border-color .2s, color .2s, transform .15s var(--ease);
}
.wc-log svg { width: 17px; height: 17px; }
.wc-log b { font-family: var(--display); font-size: 16px; line-height: 1; color: var(--text); }
.wc-log.has { color: var(--text-2); border-color: var(--line); }
.wc-log:hover { border-color: #7A8698; color: var(--text); }
.wc-log:active { transform: scale(.95); }
.wcard.late::before { background: linear-gradient(180deg, var(--bad), #F59E0B); }
.wc-since.late { display: inline-flex; align-items: center; gap: 4px; color: #FCA5A5; font-weight: 700; }
.wc-since svg { width: 14px; height: 14px; }
.wc-due { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-2); border: 1px solid var(--line); background: rgba(20, 24, 29, .35); white-space: nowrap; }
.wc-due svg { width: 13px; height: 13px; }
.wc-due.late { color: #FCA5A5; border-color: rgba(248, 113, 113, .5); background: var(--bad-soft); }
.wc-due.today { color: #FCD34D; border-color: rgba(251, 191, 36, .45); }
.wcard.cancelled::before { background: repeating-linear-gradient(180deg, var(--bad) 0 6px, transparent 6px 10px); }
.wcard.cancelled .wc-veh, .wcard.cancelled .wc-client { opacity: .75; }
.wcard.cancelled .smeter { opacity: .55; }
.wc-cx { display: inline-flex; align-items: center; gap: 6px; color: #FCA5A5; font-weight: 600; }
.wc-cx svg { width: 15px; height: 15px; }
.wc-reason { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* filtros por tecnico y aseguradora */
.eta-filt { display: flex; gap: 8px; margin: -2px 0 14px; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none; }
.eta-filt::-webkit-scrollbar { display: none; }
.eta-filt > * { flex: none; }
@media (max-width: 559px) { .fsel-l { display: none; } }
@media (min-width: 1024px) { .eta-filt { margin: -2px 0 16px; padding: 0; overflow: visible; flex-wrap: wrap; } }
.fsel {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 40px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--silver); font-size: 13.5px; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.fsel > svg { width: 16px; height: 16px; flex: none; }
.fsel > svg:last-child { width: 15px; height: 15px; margin-left: -2px; pointer-events: none; }
.fsel-l { color: var(--muted); }
.fsel select { min-width: 0; max-width: 170px; padding: 0 2px; border: 0; background: transparent; color: var(--text); font-weight: 700; font-size: 13.5px; -webkit-appearance: none; appearance: none; outline: none; text-overflow: ellipsis; cursor: pointer; }
.fsel select option { background: #2B323C; color: var(--text); }
.fsel:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fsel.on { background: var(--text); border-color: var(--text); color: var(--bg-deep); }
.fsel.on .fsel-l, .fsel.on select { color: var(--bg-deep); }
.fsel-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--silver); display: inline-flex; align-items: center; justify-content: center; }
.fsel-x svg { width: 17px; height: 17px; }

/* hoja del trabajo */
.wk-main { display: flex; flex-direction: column; gap: 14px; }
.wk-main > .status-banner { margin-bottom: 0; }
.wk-cx .grow { flex: 1; min-width: 0; }
.wk-cx .btn { flex: none; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: rgba(20, 24, 29, .45); color: var(--text-2); font-size: 13px; font-weight: 600; transition: border-color .2s, transform .15s var(--ease);
}
.wk-chip svg { width: 16px; height: 16px; flex: none; color: var(--silver); }
.wk-chip b { color: var(--text); }
.wk-chip:active { transform: scale(.97); }
.wk-chip:hover { border-color: #7A8698; }
.wk-chip.late { border-color: rgba(248, 113, 113, .5); background: var(--bad-soft); color: #FECACA; }
.wk-chip.late svg { color: var(--bad); }
.wk-chip.today { border-color: rgba(251, 191, 36, .5); color: #FDE68A; }
.wk-chip.log.notificado { border-color: rgba(248, 113, 113, .45); }
.wk-chip.log.gestionado { border-color: rgba(251, 191, 36, .4); }
@media (min-width: 760px) { .wk-chips { grid-column: 1 / -1; } }
.wk-sec { border-radius: 18px; border: 1px solid var(--line); background: rgba(35, 41, 49, .65); padding: 14px; scroll-margin-top: 8px; animation: viewIn .45s var(--ease) both; }
.wk-sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.wk-sec-h .sec-num { width: 34px; height: 34px; min-width: 0; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); -webkit-text-stroke: 0; }
.wk-sec-h .sec-num svg { width: 18px; height: 18px; }
.wk-sec-h h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.wk-sec-hint { margin-left: auto; font-size: 12.5px; color: var(--muted); text-align: right; min-width: 0; }
@media (max-width: 459px) { .wk-sec-hint { display: none; } }
.wk-job { display: grid; gap: 12px; }
@media (min-width: 760px) { .wk-job { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .wk-ins, .wk-cancel { grid-column: 1 / -1; } }
.wk-due input { min-height: 54px; color-scheme: dark; }
.wk-due.late input { border-color: rgba(248, 113, 113, .6); }
.wk-due .hint b { color: #FDE68A; }
.wk-due .hint b.late { color: #FCA5A5; }
.wk-notes textarea { min-height: 64px; resize: none; overflow: hidden; }
.wk-ins { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(20, 24, 29, .4); border: 1px solid var(--line-soft); font-size: 13.5px; }
.wk-ins > svg { width: 20px; height: 20px; flex: none; color: var(--silver); }
.wk-ins .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wk-ins .grow span { color: var(--silver); font-size: 12.5px; overflow-wrap: anywhere; }
.wk-cancel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.wk-cancel span { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 160px; }

/* horas por etapa */
.stg-time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; padding: 10px 12px; border-radius: 12px; background: rgba(20, 24, 29, .4); border: 1px solid var(--line-soft); }
@media (min-width: 640px) { .stg-time { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stg-time > span, .stg-est { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stg-time small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stg-time b { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-time .hrs b { color: var(--text); font-weight: 700; }
.stg-time .hrs.over b { color: #FCA5A5; }
.stg-time em { display: block; font-style: normal; font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.stg-est span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.stg-est input { width: 58px; height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--text); font-family: var(--display); font-size: 16px; font-weight: 600; text-align: center; outline: none; }
.stg-est input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stg-est input:disabled { opacity: .6; }

/* fase de la foto */
.ph-phase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ph-phase small { grid-column: 1 / -1; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
@media (min-width: 640px) { .ph-phase { grid-template-columns: auto repeat(3, minmax(90px, auto)); justify-content: start; align-items: center; } .ph-phase small { grid-column: auto; margin-right: 4px; } }
.ph-phase button { min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--silver); font-size: 13px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.ph-phase button.on { background: var(--text); border-color: var(--text); color: var(--bg-deep); }
.ph-phase button.on.durante { background: var(--accent); border-color: var(--accent); color: #fff; }
.ph-phase button.on.despues { background: #10B981; border-color: #10B981; color: #04241A; }
.ph-ph { position: absolute; left: 4px; top: 4px; z-index: 1; min-height: 24px; padding: 0 7px; border: 0; border-radius: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 24px; background: rgba(71, 85, 105, .92); color: #fff; }
.ph-ph.durante { background: rgba(217, 84, 28, .94); }
.ph-ph.despues { background: rgba(16, 185, 129, .94); color: #04241A; }
button.ph-ph:active { transform: scale(.95); }

/* bitacora */
.lg-form { display: flex; flex-direction: column; gap: 8px; }
.lg-form .field textarea { min-height: 70px; resize: none; overflow: hidden; padding-bottom: 22px; }
.lg-count { position: absolute; right: 12px; bottom: 7px; font-size: 11.5px; color: var(--muted); pointer-events: none; }
.lg-send { display: flex; gap: 8px; align-items: stretch; }
.lg-send .field { flex: 1; min-width: 0; }
.lg-send .btn { min-height: 54px; flex: none; }
.lg-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 8px; font-size: 12.5px; color: var(--silver); }
.lg-sum span { display: inline-flex; align-items: center; gap: 7px; }
.lg-sum .zero { opacity: .45; }
.lg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Tarjeta de comentario de la bitacora: clase propia ".lg-item" (antes ".lg", que chocaba con el tamano grande de .btn). */
.lg-item { position: relative; padding: 11px 12px 10px 16px; border-radius: 13px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .42); overflow: hidden; animation: rowIn .35s var(--ease) both; }
.lg-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bad); }
.lg-item.gestionado::before { background: var(--warn); }
.lg-item.solucionado::before { background: var(--ok); }
.lg-item.solucionado .lg-text { color: var(--silver); }
.lg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.lg-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lg-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-top time { flex: none; font-size: 12px; color: var(--muted); }
.av.off { background: rgba(255, 255, 255, .07); color: var(--silver); border-color: var(--line); }
.av.off svg { width: 13px; height: 13px; }
.lg-text { margin: 7px 0 9px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.lg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-stage { font-size: 12px; color: var(--muted); }
.lg-hbtn { margin-left: auto; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--silver); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.lg-h { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: 7px; }
.lg-h li { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: var(--silver); }
.lg-h .lg-dot { width: 8px; height: 8px; box-shadow: none; }
.lg-h .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lg-h b { color: var(--text-2); }
.lg-h em { display: block; font-style: normal; color: var(--muted); }
.lg-h time { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-empty { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.lg-empty svg { width: 22px; height: 22px; flex: none; color: var(--line); }
.lg-delay { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); border: 1px solid rgba(248, 113, 113, .45); }
.lg-delay.gestionado { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .4); }
.lg-delay > svg { width: 20px; height: 20px; flex: none; color: var(--bad); }
.lg-delay.gestionado > svg { color: var(--warn); }
.lg-delay .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lg-delay b { font-size: 14px; }
.lg-delay .grow span { font-size: 12.5px; color: var(--silver); }
.lg-delay .btn { flex: none; }
.lg-host .skeleton { border-radius: 13px; }

/* hoja "Cambiar estado" */
.ast { display: flex; flex-direction: column; gap: 12px; }
.ast-text { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-deep); border: 1px solid var(--line-soft); font-size: 14.5px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: auto; }
.ast-opts { display: flex; flex-direction: column; gap: 6px; }
.ast-opt { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--text); text-align: left; transition: border-color .2s, background .2s, transform .15s var(--ease); }
.ast-opt:active { transform: scale(.99); }
.ast-opt .lg-dot { width: 12px; height: 12px; }
.ast-opt .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ast-opt b { font-size: 15px; }
.ast-opt small { font-size: 12.5px; color: var(--muted); }
.ast-opt em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ast-opt[aria-checked="true"] { border-color: rgba(248, 113, 113, .7); background: var(--bad-soft); box-shadow: 0 0 0 1px rgba(248, 113, 113, .4) inset; }
.ast-opt.gestionado[aria-checked="true"] { border-color: rgba(251, 191, 36, .7); background: rgba(251, 191, 36, .1); box-shadow: 0 0 0 1px rgba(251, 191, 36, .35) inset; }
.ast-opt.solucionado[aria-checked="true"] { border-color: rgba(52, 211, 153, .7); background: var(--ok-soft); box-shadow: 0 0 0 1px rgba(52, 211, 153, .35) inset; }

/* seccion Alertas */
.al-kinds { display: flex; gap: 6px; margin: -4px 0 14px; overflow-x: auto; scrollbar-width: none; }
.al-kinds::-webkit-scrollbar { display: none; }
.al-kinds button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-soft); background: transparent; color: var(--silver); font-size: 13.5px; font-weight: 600; }
.al-kinds button svg { width: 15px; height: 15px; }
.al-kinds button em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.al-kinds button.active { background: var(--surface-2); border-color: var(--line); color: var(--text); }
#al-filters .lg-dot { width: 8px; height: 8px; box-shadow: none; }
.al-list { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) { .al-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .al-list .empty, .al-list .eta-limit { grid-column: 1 / -1; } }
.al-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start; width: 100%; text-align: left; color: var(--text);
  padding: 13px 14px 12px 16px; border-radius: 15px; border: 1px solid var(--line); background: rgba(51, 60, 72, .92); overflow: hidden;
  animation: rowIn .35s var(--ease) both; transition: transform .15s var(--ease), border-color .2s, background .2s;
}
.al-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bad); }
.al-row.gestionado::before { background: var(--warn); }
.al-row.solucionado::before { background: var(--ok); }
.al-row:hover { border-color: #5E6A7C; background: rgba(59, 68, 81, .95); }
.al-row:active { transform: scale(.985); }
.al-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(20, 24, 29, .45); border: 1px solid var(--line-soft); color: var(--silver); }
.al-ico svg { width: 19px; height: 19px; }
.al-row.demora .al-ico { color: var(--accent); }
.al-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-veh { min-width: 0; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-no { margin-left: auto; flex: none; font-size: 11.5px; color: var(--muted); letter-spacing: .06em; font-weight: 700; }
.al-text { font-size: 14.5px; line-height: 1.38; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.al-row.solucionado .al-text { color: var(--silver); }
.al-meta { font-size: 12.5px; color: var(--muted); }
.al-meta .rtag { margin-left: 4px; }
.al-side { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.al-side time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.al-detail { display: flex; flex-direction: column; gap: 10px; }
.al-big { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(248, 113, 113, .45); background: var(--bad-soft); }
.al-big.gestionado { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .1); }
.al-big.solucionado { border-color: rgba(52, 211, 153, .4); background: var(--ok-soft); }
.al-big .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.al-big b { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.al-big .grow span { font-size: 12.5px; color: var(--silver); }
.al-cli { font-size: 13.5px; color: var(--silver); }
.al-detail .lg-h { margin-top: 0; border-top: 0; padding-top: 0; }
.foot-actions .btn .lg-dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

/* Cotizador: bloque plegable "Seguro" */
.ins-acc { margin-top: 14px; border-radius: 14px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .35); transition: border-color .25s, background .25s; }
.ins-acc.has { border-color: rgba(241, 101, 34, .4); }
.ins-acc.filled { animation: insFlash 1s var(--ease); }
@keyframes insFlash { 0% { background: rgba(241, 101, 34, .22); } 100% { background: rgba(20, 24, 29, .35); } }
.ins-head { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 10px 9px 12px; border: 0; background: none; color: var(--text); text-align: left; border-radius: 14px; }
.ins-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.ins-ico svg { width: 19px; height: 19px; }
.ins-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ins-head b { font-size: 15px; }
.ins-head small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-acc.has .ins-head small { color: var(--text-2); }
.ins-head .zacc-chev { flex: none; }
.ins-acc.open .zacc-chev { transform: rotate(180deg); background: #2B323C; }
.ins-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.ins-acc.open .ins-body { grid-template-rows: 1fr; }
.ins-inner { min-height: 0; overflow: hidden; }
.ins-acc:not(.open) .ins-inner { visibility: hidden; }
.ins-grid { padding: 2px 12px 0; }
.ins-note { margin: 10px 12px 12px; font-size: 12.5px; color: var(--muted); }

/* ficha de la cotizacion: entrega estimada, notas y cancelado */
.wk-card-due { display: inline-flex !important; align-items: center; gap: 6px; font-size: 12.5px !important; color: var(--text-2) !important; margin-top: 2px; }
.wk-card-due svg { width: 14px; height: 14px; }
.wk-card-due.late { color: #FCA5A5 !important; font-weight: 700; }
.wk-card.cancelled { background: var(--bad-soft); border-color: rgba(248, 113, 113, .4); }
.wk-card.cancelled .rc-card-ico { background: rgba(248, 113, 113, .18); color: #FCA5A5; }
.wk-card.cancelled .wk-card-bar i { background: #7A8698; }
.wk-card-notes { margin: -6px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(20, 24, 29, .4); border: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.wk-card-notes small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; }

/* Configuracion: horas estimadas y alerta de demora por etapa */
.se-time { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 0; padding: 12px 10px 0 12px; border-top: 1px solid var(--line-soft); }
.se-time .se-hint { grid-column: 1 / -1; margin: 0 0 12px; }
.se-unit { position: absolute; right: 13px; bottom: 10px; font-size: 13.5px; color: var(--muted); pointer-events: none; }

/* =====================================================================
   Ampliacion (2026-11) M3: presupuesto valorizado, plantillas de mano de
   obra, descuento, suplementos, enviado / quien aprueba y correo
   ===================================================================== */

/* Cotizador: linea con boton "$" y, si tiene precio, su resumen debajo */
.line-body { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 6px; }
.line-body textarea { flex: none; width: 100%; }
.line-row { gap: 6px; flex-wrap: wrap; }
.line-row > .line-item { flex: 1 0 calc(100% - 34px); margin-left: 34px; max-width: calc(100% - 34px); }
@media (min-width: 720px) { .line-row > .line-item { flex-basis: calc(100% - 34px - 88px); max-width: calc(100% - 34px - 88px); } }
.line-n { width: 28px; }
.line-price {
  flex: none; width: 38px; height: 46px; border-radius: 11px; border: 1.5px dashed #5E6A7C; background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 20px;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.line-price:hover, .line-price:focus-visible { border-color: var(--accent); color: var(--accent); }
.line-price:active { transform: scale(.94); }
.line-price.on { border: 1px solid rgba(241, 101, 34, .55); background: var(--accent-soft); color: var(--accent); }
.line-price svg { width: 19px; height: 19px; }
.hint-cash { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; border: 1px dashed #6B7688; font-family: var(--display); font-size: 13px; color: var(--silver); vertical-align: 1px; }
.line-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind kind" "calc amt"; align-items: baseline; gap: 2px 10px;
  width: 100%; padding: 7px 11px 8px; border-radius: 10px; border: 1px solid rgba(241, 101, 34, .3);
  background: linear-gradient(90deg, rgba(241, 101, 34, .12), rgba(241, 101, 34, .03)); color: var(--text); text-align: left;
  animation: rowIn .28s var(--ease);
}
.line-item:hover { border-color: rgba(241, 101, 34, .6); }
.line-item .im-kind { grid-area: kind; }
.line-item .im-calc { grid-area: calc; font-size: 13px; color: var(--silver); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-item .im-amt { grid-area: amt; font-family: var(--display); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.im-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFB48A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.im-kind.k-repuesto, .im-kind.k-insumo { color: #9CC8FF; }
.line-row.lit .line-body textarea, .line-row.lit .line-item { animation: lineLit 1s var(--ease); }
@keyframes lineLit { 0% { box-shadow: 0 0 0 3px rgba(241, 101, 34, .55); } 100% { box-shadow: 0 0 0 0 rgba(241, 101, 34, 0); } }
@media (min-width: 720px) {
  .line-item { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "kind calc amt"; padding: 6px 12px; }
}

/* Sugerencias de plantillas bajo la linea */
.tpl-list { top: calc(100% + 4px); left: -34px; right: -88px; }
.tpl-head { display: flex; align-items: center; gap: 7px; padding: 6px 10px 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tpl-head svg { width: 14px; height: 14px; }
.tpl-opt { align-items: center; }
.tpl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tpl-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; }
.tpl-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-sub .im-kind { font-size: 10px; }
.tpl-price { flex: none; font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text); }

/* Montos: calculados de las lineas, descuento % */
.auto-note { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; color: var(--text-2);
  background: rgba(241, 101, 34, .08); border: 1px solid rgba(241, 101, 34, .3); animation: rowIn .3s var(--ease); }
.auto-note svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.field.auto input { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 6px, transparent 6px 12px), var(--bg-deep); color: var(--text-2); border-style: dashed; cursor: default; }
.field.auto input:focus { box-shadow: none; border-color: var(--line); }
.field.auto label::after { content: ' · calculado'; color: var(--accent); letter-spacing: .04em; }
.field.pct input { padding-right: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 18px; }
.field.pct .suffix { position: absolute; right: 14px; top: 29px; color: var(--muted); font-weight: 600; pointer-events: none; }
.ledger .row.disc b { color: var(--ok); }

/* Suplemento en el Cotizador: cliente y vehiculo de la principal */
.sup-card .sec-head { margin-bottom: 12px; }
.sup-who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(20, 24, 29, .4); border: 1px solid var(--line-soft); }
.sup-who .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sup-who .grow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-who .grow span { font-size: 13px; color: var(--silver); overflow-wrap: anywhere; }
.sup-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C4B5FD; background: rgba(167, 139, 250, .14); }
.sup-badge svg { width: 14px; height: 14px; }
@media (max-width: 420px) { .sup-badge { display: none; } }
.done-sup { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #C4B5FD !important; }
.done-sup svg { width: 16px; height: 16px; flex: none; }

/* Hoja del item (mini-editor) */
.it-text { margin-top: 4px; font-size: 14px; color: var(--silver); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.it-form { display: grid; gap: 14px; }
.it-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 520px) { .it-kinds { grid-template-columns: repeat(4, 1fr); } }
.it-kind {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico name" "ico sub"; align-items: center; gap: 0 9px; min-height: 56px; padding: 8px 10px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--text-2); text-align: left; transition: border-color .2s, background .2s, transform .15s;
}
.it-kind:active { transform: scale(.97); }
.it-kind svg { grid-area: ico; width: 22px; height: 22px; color: var(--muted); transition: color .2s; }
.it-kind span { grid-area: name; font-weight: 700; font-size: 14.5px; line-height: 1.15; }
.it-kind small { grid-area: sub; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.it-kind[aria-checked="true"] { border-color: var(--accent); background: linear-gradient(135deg, rgba(241, 101, 34, .22), rgba(241, 101, 34, .06)); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.it-kind[aria-checked="true"] svg { color: var(--accent); }
.it-nums { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; }
.it-step { display: flex; align-items: stretch; }
.it-step input { text-align: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; border-radius: 0; padding-left: 4px; padding-right: 4px; min-width: 0; }
.it-stepb { flex: none; width: 38px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 20px; font-weight: 600; }
.it-stepb:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; }
.it-stepb:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.it-stepb:active { background: var(--accent-soft); }
.it-qty label { left: 38px; right: 38px; text-align: center; }
.it-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 13px; background: var(--bg-deep); border: 1px solid var(--line); }
.it-sum span { color: var(--silver); font-size: 14px; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-sum b { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; }
.it-refs select { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 27px, calc(100% - 12px) 27px; background-size: 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.it-pay .hint { display: flex; gap: 5px; align-items: flex-start; }
.it-tpl { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--muted); }
.it-tpl svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* Aceptar: quien aprueba */
.ap-who { padding: 6px 20px 4px; display: grid; gap: 10px; }
.ap-who .opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ap-chips .chip.on { background: var(--ok-soft); border-color: rgba(52, 211, 153, .6); color: #A7F3D0; }

/* Listado: etiquetas de suplemento y enviada */
.qtags { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; vertical-align: 1px; }
.qtag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.qtag svg { width: 11px; height: 11px; }
.qtag.sent { background: rgba(96, 165, 250, .14); color: #A5CDFE; }
.qtag.sup { background: rgba(167, 139, 250, .14); color: #C4B5FD; }
.pill.sent { background: rgba(96, 165, 250, .14); color: #A5CDFE; }
.pill.supl { background: rgba(167, 139, 250, .14); color: #C4B5FD; }

/* Ficha: enviada, suplemento, lineas con precio, presupuesto del trabajo */
.sent-row { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; color: #CFE3FF; background: rgba(96, 165, 250, .08); border: 1px solid rgba(96, 165, 250, .3); }
.sent-row svg { width: 18px; height: 18px; flex: none; }
.sent-row small { color: var(--muted); margin-left: 4px; }
.sup-parent { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin: 0 0 14px; text-decoration: none; color: var(--text);
  background: linear-gradient(90deg, rgba(167, 139, 250, .16), rgba(167, 139, 250, .04)); border: 1px solid rgba(167, 139, 250, .45); transition: border-color .2s, transform .15s; }
.sup-parent:active { transform: scale(.99); }
.sup-parent .rc-card-ico { background: rgba(167, 139, 250, .2); color: #C4B5FD; }
.sup-parent .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sup-parent .grow > span { font-size: 13px; color: var(--silver); }
.sup-parent .sup-parent-note { color: #DDD6FE !important; font-size: 12.5px !important; }
.olist li.priced { display: flex; flex-direction: column; gap: 3px; }
.ol-item { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--silver); }
.ol-item .im-kind { flex: 1; }
.ol-item .im-calc { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-item .im-amt { font-family: var(--display); font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h4-note { margin-left: 8px; font-family: var(--body); font-size: 11.5px; letter-spacing: .02em; text-transform: none; color: var(--muted); font-weight: 600; }
.wb { margin: 0 0 14px; display: grid; gap: 10px; }
.wb-list { display: grid; gap: 6px; }
.wb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .35); color: var(--text); text-decoration: none; position: relative; overflow: hidden; }
.wb-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.wb-row.aceptada::before { background: var(--ok); }
.wb-row.rechazada::before { background: var(--bad); }
.wb-row.rechazada .wb-amt { text-decoration: line-through; color: var(--muted); }
a.wb-row:hover { border-color: #5E6A7C; }
.wb-row.self { background: rgba(255, 255, 255, .04); }
.wb-n { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 46px; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; }
.wb-n small { font-size: 9.5px; letter-spacing: .16em; color: var(--muted); font-family: var(--body); }
.wb-row .grow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-row .grow b { font-size: 14px; }
.wb-amt { font-family: var(--display); font-size: 19px; font-weight: 700; white-space: nowrap; }
.wb-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 13px;
  background: linear-gradient(90deg, rgba(241, 101, 34, .2), rgba(241, 101, 34, .04)); border: 1px solid rgba(241, 101, 34, .4); }
.wb-total span { font-family: var(--display); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; display: flex; flex-direction: column; }
.wb-total small { font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--silver); }
.wb-total b { font-family: var(--display); font-size: 27px; font-weight: 700; white-space: nowrap; }
.wb-add { border-style: dashed; }
.wb-hint { margin: -2px 2px 0; font-size: 12.5px; color: var(--muted); }

/* Pie de la ficha con Correo: 2 x 2 en celular, 4 en fila con espacio */
.foot-row.q4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .foot-row.q4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Hoja "Enviar por correo" */
.ml { display: grid; gap: 12px; }
.ml-save { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); min-height: 40px; cursor: pointer; }
.ml-save input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.ml-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--silver); }
.ml-note svg { width: 17px; height: 17px; flex: none; color: var(--accent); margin-top: 1px; }
.ml-preview { padding: 12px 14px; border-radius: 13px; background: var(--bg-deep); border: 1px solid var(--line); display: grid; gap: 3px; max-height: 240px; overflow-y: auto; }
.ml-preview small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 6px; }
.ml-preview small:first-child { margin-top: 0; }
.ml-preview b { font-size: 14.5px; overflow-wrap: anywhere; }
.ml-preview pre { margin: 0; font-family: var(--body); font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Configuracion: plantillas de mano de obra */
.lt-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.lt-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 13px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .35); animation: rowIn .3s var(--ease); }
.lt-row.off { opacity: .55; }
.lt-ord { display: flex; flex-direction: column; gap: 2px; flex: none; }
.lt-ord .btn.icon.sm { width: 34px; min-height: 30px; padding: 0; border-color: transparent; background: transparent; color: var(--silver); }
.lt-ord .btn.icon.sm svg { width: 17px; height: 17px; }
.lt-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "meta money"; gap: 3px 10px; align-items: center;
  padding: 6px 4px; border: 0; background: none; color: var(--text); text-align: left; border-radius: 10px; }
@media (min-width: 720px) { .lt-main { grid-template-areas: "name money" "meta money"; align-items: center; } }
.lt-main:hover .lt-name { color: var(--accent); }
.lt-name { grid-area: name; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.lt-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.lt-meta .im-kind { font-size: 10.5px; }
.lt-money { grid-area: money; display: flex; flex-direction: column; align-items: flex-end; }
.lt-money b { font-family: var(--display); font-size: 19px; font-variant-numeric: tabular-nums; }
.lt-money small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 12px; border-radius: 14px; border: 1.5px dashed var(--line); color: var(--silver); font-size: 13.5px; }
.lt-empty svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 4px; }
.lt-empty b { color: var(--text); font-size: 15px; }
.lt-form { gap: 12px; }

/* Hoja del trabajo (Etapas): presupuesto del trabajo */
.wk-budget { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.wk-budget-h { display: flex; align-items: center; gap: 10px; }
.wk-budget-h > svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.wk-budget-h .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wk-budget-h .grow span { font-size: 12.5px; color: var(--silver); }
.wk-budget-h > b { font-family: var(--display); font-size: 24px; font-weight: 700; white-space: nowrap; }
.wk-budget .wb { margin: 0; }

/* ======================================================================
   Ampliacion (2026-11) M4: inventario, compras, proveedores, materiales
   ====================================================================== */
.inv-head-acts { display: flex; gap: 8px; align-items: center; flex: none; }
/* Sub-secciones: tres pestanas grandes con icono */
.inv-secs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: -6px 0 14px; border-radius: 15px;
  background: var(--bg-deep); border: 1px solid var(--line);
}
.inv-secs a {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 6px; border-radius: 11px; text-decoration: none;
  color: var(--silver); font-family: var(--display); font-size: 15.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.inv-secs a svg { width: 18px; height: 18px; flex: none; }
.inv-secs a:hover { color: var(--text); }
.inv-secs a.active { background: var(--surface); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent), 0 6px 18px -12px rgba(0, 0, 0, .8); }
.inv-secs a.active svg { color: var(--accent); }
@media (max-width: 380px) { .inv-secs a { font-size: 13.5px; gap: 5px; letter-spacing: .04em; } .inv-secs a svg { width: 16px; height: 16px; } }

/* Indicadores */
.inv-kpis { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; margin-bottom: 14px; }
.inv-kpis.two { grid-template-columns: 1fr 1.35fr; }
.inv-kpis .k {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 10px; border-radius: 14px; text-align: left;
  background: var(--bg-deep); border: 1px solid var(--line); color: var(--text); overflow: hidden; animation: viewIn .45s var(--ease) both;
}
.inv-kpis .k:nth-child(2) { animation-delay: .05s; } .inv-kpis .k:nth-child(3) { animation-delay: .1s; }
.inv-kpis .k::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--line); }
.inv-kpis .k.low::before { background: var(--ok); }
.inv-kpis .k.low.on::before { background: var(--bad); }
.inv-kpis .k.low.on b { color: #FCA5A5; }
.inv-kpis .k.val::before { background: var(--accent); }
.inv-kpis button.k { cursor: pointer; transition: border-color .2s, transform .15s var(--ease); }
.inv-kpis button.k:hover { border-color: #5E6A7C; }
.inv-kpis button.k:active { transform: scale(.98); }
.inv-kpis small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-kpis b { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-kpis em { font-style: normal; font-size: 12px; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 459px) { .inv-kpis { grid-template-columns: 1fr 1fr; } .inv-kpis .k.val { grid-column: 1 / -1; } .inv-kpis.two { grid-template-columns: 1fr 1fr; } .inv-kpis.two .k.val { grid-column: auto; } }
.inv-lock {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 36px; margin-top: 2px; padding: 0 11px; border-radius: 10px;
  border: 1px dashed rgba(241, 101, 34, .55); background: var(--accent-soft); color: #FFB08A; font-size: 13px; font-weight: 600; cursor: pointer;
}
.inv-lock svg { width: 15px; height: 15px; flex: none; }
.inv-lock:hover { border-style: solid; color: #fff; }
.filters button.warn em { color: #FCA5A5; font-weight: 700; }
.inv-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -6px 0 12px; padding-bottom: 2px; }
.inv-cats::-webkit-scrollbar { display: none; }
.inv-cats .chip { flex: none; gap: 6px; background: transparent; }
.inv-cats .chip svg { width: 15px; height: 15px; }
.inv-cats .chip.on { background: var(--accent-soft); border-color: rgba(241, 101, 34, .7); color: #FFD0B5; }

/* Icono por categoria */
.inv-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(160deg, #3B4451, #2B323C); color: #9CC8FF; }
.inv-ic svg { width: 21px; height: 21px; }
.inv-ic.k-insumo { color: #A7F3D0; }
.inv-ic.k-pintura { color: #FFB48A; background: radial-gradient(circle at 30% 25%, rgba(241, 101, 34, .26), rgba(241, 101, 34, .05) 72%); border-color: rgba(241, 101, 34, .4); }
.inv-ic.sm { width: 34px; height: 34px; border-radius: 10px; }
.inv-ic.sm svg { width: 17px; height: 17px; }
.cx-title .inv-ic { width: 42px; height: 42px; }

/* Filas de productos */
.inv-row.low { border-color: rgba(251, 191, 36, .45); }
.inv-row.low::before, .inv-row.neg::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.inv-row.neg { border-color: rgba(248, 113, 113, .5); }
.inv-row.neg::before { background: var(--bad); }
.inv-sku { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--text-2); background: var(--bg-deep); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; margin-right: 2px; }
.rtag.inv-low { background: rgba(251, 191, 36, .14); color: #FCD34D; }
.inv-stock { min-width: 58px; }
.inv-stock b { font-size: 28px; font-variant-numeric: tabular-nums; }
.inv-row.low .inv-stock b { color: #FCD34D; }
.inv-row.neg .inv-stock b { color: #FCA5A5; }

/* Filas de compras */
.inv-date { flex: none; width: 50px; height: 54px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: var(--bg-deep); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.inv-date b { font-family: var(--display); font-size: 24px; font-weight: 700; }
.inv-date small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 2px; }
.inv-items { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.c-side b.inv-amt { font-size: 21px; }
.crow.void { opacity: .62; }
.crow.void .c-name, .crow.void .inv-amt { text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, .7); }
.inv-hx.void { opacity: .6; }
.inv-hx::before { background: var(--accent); }
.inv-hx.void::before { background: var(--bad); }

/* Estado vacio: tres pasos */
.inv-start { max-width: 520px; }
.inv-steps { list-style: none; margin: 16px auto 0; padding: 0; display: grid; gap: 8px; text-align: left; max-width: 420px; }
.inv-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; background: var(--bg-deep); border: 1px solid var(--line); animation: rowIn .4s var(--ease) both; }
.inv-steps li:nth-child(2) { animation-delay: .08s; } .inv-steps li:nth-child(3) { animation-delay: .16s; }
.inv-steps li > span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 17px; background: var(--accent); color: #fff; }
.inv-steps b { display: block; color: var(--text); font-size: 15px; margin: 0; }
.inv-steps small { display: block; font-size: 13px; color: var(--silver); line-height: 1.35; }

/* Ficha del producto */
.inv-stats { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 8px; }
.inv-stats .st { position: relative; min-width: 0; padding: 11px 12px 10px; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; overflow: hidden; animation: viewIn .45s var(--ease) both; }
.inv-stats .st::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ok); }
.inv-stats .st.low::before { background: var(--warn); }
.inv-stats .st.pr::before { background: #9CC8FF; } .inv-stats .st.co::before { background: var(--accent); }
.inv-stats .st:nth-child(2) { animation-delay: .05s; } .inv-stats .st:nth-child(3) { animation-delay: .1s; }
.inv-stats small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.inv-stats b { font-family: var(--display); font-size: 24px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-stats b i { font-style: normal; font-size: 14px; color: var(--silver); margin-left: 4px; letter-spacing: .04em; }
.inv-stats .st.low b { color: #FCD34D; }
.inv-stats em { font-style: normal; font-size: 12px; color: var(--silver); }
@media (max-width: 420px) { .inv-stats { grid-template-columns: 1fr 1fr; } .inv-stats .st:first-child { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .inv-stats .st:first-child b { font-size: 28px; } }
.inv-margin { display: flex; align-items: center; gap: 9px; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .3); color: var(--text-2); font-size: 13.5px; }
.inv-margin svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.mv-list { display: flex; flex-direction: column; gap: 6px; }
.mv {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 9px 11px; border-radius: 12px; background: var(--bg-deep);
  border: 1px solid var(--line); text-decoration: none; color: var(--text); animation: rowIn .32s var(--ease) both; transition: border-color .2s;
}
a.mv:hover { border-color: #5E6A7C; }
.mv-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--silver); }
.mv-ic svg { width: 16px; height: 16px; }
.mv.in .mv-ic { background: var(--ok-soft); color: var(--ok); }
.mv.out .mv-ic { background: var(--bad-soft); color: var(--bad); }
.mv-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.mv-main b { font-size: 14px; }
.mv-main span { font-size: 12.5px; color: var(--silver); overflow-wrap: anywhere; }
.mv-main time { font-size: 11.5px; color: var(--muted); }
.mv-qty { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.mv-qty b { font-family: var(--display); font-size: 20px; font-weight: 700; white-space: nowrap; }
.mv.in .mv-qty b { color: #6EE7B7; } .mv.out .mv-qty b { color: #FCA5A5; }
.mv-qty small { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Formularios */
.inv-initial { padding: 12px; border-radius: 14px; border: 1px dashed var(--line); background: rgba(35, 41, 49, .6); display: grid; gap: 10px; }
.inv-initial-h { display: flex; gap: 10px; align-items: flex-start; }
.inv-initial-h > svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.inv-initial-h b { display: block; font-size: 14.5px; }
.inv-initial-h small { display: block; font-size: 12.5px; color: var(--silver); }
.inv-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.inv-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent); }
.inv-initial .inv-note { margin: 0; }
.adj { display: grid; gap: 12px; }
.adj-help { margin: 0; font-size: 13px; color: var(--silver); line-height: 1.4; min-height: 36px; }
.adj-res { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 13px; background: var(--bg-deep); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.adj-res span { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.adj-res b { font-family: var(--display); font-size: 24px; font-weight: 700; white-space: nowrap; }
.adj-res.warn { border-color: rgba(248, 113, 113, .55); background: var(--bad-soft); }
.adj-res.warn span { color: #FCA5A5; }
.neg { color: #FCA5A5 !important; }

/* Hoja "Registrar compra" */
.pf { display: grid; gap: 12px; }
.pf-top { display: grid; grid-template-columns: 1fr 170px; gap: 10px; }
.pf-doc { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 10px; align-items: center; }
.pf-doc .seg button { font-size: 13.5px; padding: 0 4px; }
@media (max-width: 640px) { .pf-top, .pf-doc { grid-template-columns: 1fr; } }
.pf-sup .combo-list { top: 100%; left: 0; right: 0; }
.pf-chosen {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 20px 6px 6px 13px; border-radius: var(--radius-sm);
  border: 1px solid rgba(241, 101, 34, .45); background: linear-gradient(90deg, rgba(241, 101, 34, .12), rgba(241, 101, 34, .02)); animation: rowIn .3s var(--ease);
}
.pf-chosen > svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.pf-chosen .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pf-chosen .grow b { font-size: 15px; overflow-wrap: anywhere; }
.pf-chosen .grow small { font-size: 12px; color: var(--silver); }
.pf-chosen.sm { min-height: 50px; padding: 6px 6px 6px 11px; }
#mts-chosen { padding-top: 6px; }
.pf-lines-h { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.pf-lines-h h4 { margin: 0; font-family: var(--display); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.pf-lines-h span { font-size: 12.5px; color: var(--muted); }
.pf-lines { display: flex; flex-direction: column; gap: 9px; }
.pf-line {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 118px 150px 96px 40px; gap: 8px; align-items: center; padding: 9px; border-radius: 14px;
  background: rgba(35, 41, 49, .7); border: 1px solid var(--line); animation: rowIn .3s var(--ease) both;
}
.pf-n { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--muted); text-align: center; }
.pf-prod { min-width: 0; position: relative; }
.pf-pin { width: 100%; border: 1px solid var(--line); background: var(--input); color: var(--text); border-radius: var(--radius-sm); padding: 14px 12px; font-size: 16px; outline: none; }
.pf-pin:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-pin::placeholder { color: #5E6878; }
.pf-prod .combo-list { top: calc(100% + 4px); left: 0; right: 0; min-width: min(320px, calc(100vw - 48px)); }
.pf-prod.invalid .pf-pin { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.pf-newp { display: flex; gap: 6px; margin-top: 6px; }
.pf-newp select { flex: 1; min-width: 0; min-height: 40px; border-radius: 9px; border: 1px solid var(--line); background: var(--input); color: var(--text); padding: 0 8px; font-size: 14px; }
.pf-sub { font-family: var(--display); font-size: 18px; font-weight: 700; text-align: right; white-space: nowrap; }
.pf-del { width: 40px; height: 40px; }
.pf-del[disabled] { opacity: .3; }
.pf-add { border-style: dashed; }
.pf-foot { display: flex; align-items: center; gap: 12px; }
.pf-total { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.pf-total small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pf-total b { font-family: var(--display); font-size: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-foot .btn { flex: none; }
@media (max-width: 760px) {
  .pf-line { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 40px; grid-template-areas: "n prod prod del" "n q c c" "n sub sub sub"; row-gap: 8px; }
  .pf-n { grid-area: n; align-self: start; padding-top: 14px; }
  .pf-prod { grid-area: prod; } .pf-q { grid-area: q; } .pf-c { grid-area: c; } .pf-del { grid-area: del; align-self: start; margin-top: 5px; }
  .pf-sub { grid-area: sub; font-size: 16px; color: var(--silver); }
  .pf-sub::before { content: "Subtotal  "; font-family: var(--body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
}

/* Ficha de la compra */
.inv-doc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inv-doc > div { min-width: 0; padding: 11px 12px; border-radius: 13px; background: var(--bg-deep); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.inv-doc small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.inv-doc b { font-size: 15px; overflow-wrap: anywhere; }
.inv-doc a { color: var(--text); text-decoration-color: var(--line); text-underline-offset: 3px; }
.inv-doc span { font-size: 12.5px; color: var(--silver); }
.inv-lines { display: flex; flex-direction: column; gap: 6px; }
.inv-line { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 12px; background: var(--bg-deep); border: 1px solid var(--line); color: var(--text); text-decoration: none; animation: rowIn .3s var(--ease) both; }
.inv-line:hover { border-color: #5E6A7C; }
.inv-line .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.inv-line .grow b { font-size: 14.5px; overflow-wrap: anywhere; }
.inv-line .grow span { font-size: 12.5px; color: var(--silver); }
.inv-line > b { font-family: var(--display); font-size: 18px; white-space: nowrap; }
.inv-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 13px; border: 1px solid rgba(241, 101, 34, .45); background: var(--accent-soft); }
.inv-total span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #FFD0B5; font-weight: 700; }
.inv-total b { font-family: var(--display); font-size: 26px; font-weight: 700; }

/* Materiales usados (hoja del trabajo) */
.mt-body { display: grid; gap: 10px; }
.mt-budget { padding: 12px; border-radius: 14px; border: 1px solid rgba(241, 101, 34, .45); background: linear-gradient(160deg, rgba(241, 101, 34, .12), rgba(241, 101, 34, .02)); display: grid; gap: 10px; animation: viewIn .4s var(--ease) both; }
.mt-budget-h { display: flex; align-items: center; gap: 10px; }
.mt-budget-h > svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.mt-budget-h .grow { display: flex; flex-direction: column; line-height: 1.25; }
.mt-budget-h small { font-size: 12.5px; color: var(--silver); }
.mt-budget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-budget li { display: flex; align-items: center; gap: 10px; }
.mt-budget li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mt-budget li .grow b { font-size: 14px; overflow-wrap: anywhere; }
.mt-budget li .grow small { font-size: 12px; color: var(--silver); }
.mt-budget li em { font-style: normal; }
.mt-budget li > b { font-family: var(--display); font-size: 18px; white-space: nowrap; }
.mt-list { display: flex; flex-direction: column; gap: 6px; }
.mt-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 10px; border-radius: 12px; background: var(--bg-deep); border: 1px solid var(--line); animation: rowIn .3s var(--ease) both; }
.mt-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mt-row .grow b { font-size: 14px; overflow-wrap: anywhere; }
.mt-row .grow small { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.mt-stage, .mt-src { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; border-radius: 5px; background: var(--accent-soft); color: #FFB08A; }
.mt-src { background: rgba(156, 200, 255, .12); color: #BFDBFE; }
.mt-qty { font-family: var(--display); font-size: 18px; white-space: nowrap; }
.mt-row .btn.icon.sm { width: 40px; min-height: 40px; color: var(--muted); }
.mt-row .btn.icon.sm:hover { color: var(--bad); }
.mt-empty { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; border-radius: 12px; border: 1px dashed var(--line); color: var(--silver); font-size: 13.5px; line-height: 1.45; }
.mt-empty svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 1px; }
.mt-empty a { color: var(--text); }
.mt-add { border-style: dashed; }
.mts { display: grid; gap: 12px; }
.mts-list { display: flex; flex-direction: column; gap: 4px; max-height: min(52vh, 420px); overflow-y: auto; }
.mts-list .combo-opt { border-radius: 11px; }
.mts-stock { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; margin-left: auto; }
.mts-stock b { font-family: var(--display); font-size: 19px; }
.mts-stock small { font-size: 11px; color: var(--muted); }
.mts-stock.low b { color: #FCD34D; } .mts-stock.neg b { color: #FCA5A5; }

/* Item del presupuesto ligado a un producto */
.it-inv-btn { border-style: dashed; }
.it-inv-on { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border-radius: 13px; border: 1px solid rgba(156, 200, 255, .4); background: rgba(156, 200, 255, .07); animation: rowIn .3s var(--ease); }
.it-inv-on > svg { width: 19px; height: 19px; color: #9CC8FF; flex: none; }
.it-inv-on .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.it-inv-on .grow b { font-size: 14px; overflow-wrap: anywhere; }
.it-inv-on .grow small { font-size: 12px; color: var(--silver); }
.tpl-opt.prod .tpl-sub .neg { color: #FCA5A5; }

/* ======================================================================
   Descuento en % o en pesos (2026-11-02): selector dentro del campo
   ====================================================================== */
.field.pct.disc input { padding-right: 92px; }
.field.pct.disc .disc-prefix { display: none; }
.field.pct.disc.amt .disc-prefix { display: block; }
.field.pct.disc.amt input { padding-left: 30px; }
.disc-mode {
  position: absolute; right: 9px; top: 9px; display: inline-flex; padding: 3px; gap: 2px;
  border-radius: 10px; background: var(--bg-deep); border: 1px solid var(--line-soft);
}
.disc-mode button {
  min-width: 36px; height: 32px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font-weight: 800; font-size: 15px; transition: background .2s var(--ease), color .2s;
}
.disc-mode button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(241, 101, 34, .9); }
.disc-mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ======================================================================
   Ampliacion (2026-11) M5: Agenda (dia en celular, semana en PC), citas,
   boxes, recordatorios y avisos por hito
   ====================================================================== */
:root { --ag-cot: #7DD3FC; --ag-cot-soft: rgba(125, 211, 252, .13); --ag-rep: var(--accent); --ag-rep-soft: rgba(241, 101, 34, .15); }

/* Barra: anterior / hoy / siguiente, fecha y vista */
.ag-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.ag-nav { display: inline-flex; gap: 6px; }
.ag-nav .btn.icon { width: 46px; }
.ag-nav .btn svg { width: 20px; height: 20px; }
.ag-today { padding: 0 16px; font-family: var(--display); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
.ag-today.on { border-color: var(--accent); color: var(--accent); }
.ag-title {
  position: relative; flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px;
  border-radius: 12px; border: 1px dashed var(--line); cursor: pointer; color: var(--text);
}
.ag-title span { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ag-title > svg { width: 18px; height: 18px; color: var(--muted); flex: none; margin-left: auto; }
.ag-title:hover { border-color: var(--accent); }
.ag-title:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ag-title input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; font-size: 16px; }
.ag-mode { flex: none; width: 196px; }
.ag-mode button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--silver); font-weight: 700; }
@media (max-width: 520px) { .ag-title { order: 3; flex-basis: 100%; } .ag-nav { flex: 1; } .ag-nav .ag-today { flex: 1; } }

/* Franja de la semana (vista dia) */
.ag-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
.ag-sd {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 64px; padding: 7px 0 6px; border-radius: 13px;
  border: 1px solid var(--line-soft); background: var(--bg-deep); color: var(--silver); transition: background .2s, border-color .2s, transform .15s var(--ease);
}
.ag-sd small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ag-sd b { font-family: var(--display); font-size: 22px; line-height: 1.05; color: var(--text); }
.ag-sd i { display: flex; gap: 3px; height: 6px; }
.ag-sd i span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ag-sd.today { border-color: rgba(241, 101, 34, .6); }
.ag-sd.today small { color: var(--accent); }
.ag-sd.sel { background: var(--text); border-color: var(--text); }
.ag-sd.sel small, .ag-sd.sel b { color: var(--bg-deep); }
.ag-sd.sel i span { background: var(--accent-2); }
.ag-sd:active { transform: scale(.95); }

/* Leyenda */
.ag-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ag-lg { display: inline-flex; align-items: center; gap: 6px; }
.ag-lg i { width: 12px; height: 12px; border-radius: 4px; }
.ag-lg.k-cotizar i { background: var(--ag-cot-soft); border: 2px solid var(--ag-cot); }
.ag-lg.k-reparar i { background: var(--ag-rep-soft); border: 2px solid var(--ag-rep); }
.ag-lg svg { width: 14px; height: 14px; }
.ag-lg.st svg { color: var(--ok); }
.ag-lg.wa svg { color: #6EE7A8; }
.ag-lg-btn { margin-left: auto; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--silver); font-size: 12.5px; font-weight: 700; }
.ag-lg-btn[aria-pressed="true"] { background: var(--text); color: var(--bg-deep); border-color: var(--text); }
@media (max-width: 1023px) { .ag-lg.st, .ag-lg.wa { display: none; } }

/* Tablero */
.ag-board { position: relative; animation: viewIn .35s var(--ease) both; }
.ag-board.slide-l { animation: agSlideL .32s var(--ease); }
.ag-board.slide-r { animation: agSlideR .32s var(--ease); }
@keyframes agSlideL { from { opacity: .2; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes agSlideR { from { opacity: .2; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.ag-day { display: grid; grid-template-columns: 50px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(35, 41, 49, .72); padding: 12px 8px 12px 0; overflow: hidden; }
.ag-axis { position: relative; }
.ag-axis span { position: absolute; right: 9px; transform: translateY(-50%); font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-col {
  position: relative; cursor: copy;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(rgba(74, 85, 101, .22) 1px, transparent 1px);
  background-size: 100% var(--hh), 100% calc(var(--hh) / 2);
}
.ag-col.past { background-color: rgba(10, 13, 17, .14); }
.ag-col.today { background-color: rgba(241, 101, 34, .035); }

/* Cita (bloque) */
.ag-appt {
  position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; overflow: hidden; text-align: left;
  padding: 6px 30px 6px 11px; border-radius: 11px; border: 1px solid; color: var(--text); font-size: 13px; line-height: 1.2;
  margin-left: 2px; z-index: 2; cursor: pointer; animation: rowIn .35s var(--ease) both;
  transition: transform .15s var(--ease), box-shadow .2s, filter .2s;
}
.ag-appt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.ag-appt:hover { filter: brightness(1.12); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9); z-index: 3; }
.ag-appt:active { transform: scale(.985); }
.ag-appt.k-cotizar { background: linear-gradient(100deg, rgba(125, 211, 252, .2), rgba(125, 211, 252, .07)); border-color: rgba(125, 211, 252, .42); }
.ag-appt.k-cotizar::before { background: var(--ag-cot); }
.ag-appt.k-reparar { background: linear-gradient(100deg, rgba(241, 101, 34, .26), rgba(241, 101, 34, .08)); border-color: rgba(241, 101, 34, .5); }
.ag-appt.k-reparar::before { background: var(--ag-rep); }
.ag-appt.s-agendada { border-style: dashed; }
.ag-appt.s-llego { background: linear-gradient(100deg, rgba(52, 211, 153, .18), rgba(52, 211, 153, .05)); border-color: rgba(52, 211, 153, .45); color: var(--text-2); }
.ag-appt.s-llego::before { background: var(--ok); }
.ag-appt.s-no_llego { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .4); border-style: dashed; opacity: .78; }
.ag-appt.s-no_llego::before { background: var(--bad); }
.ag-appt.s-cancelada { background: rgba(138, 147, 163, .08); border-color: var(--line); opacity: .6; }
.ag-appt.s-cancelada::before { background: var(--muted); }
.ag-appt.s-cancelada .ag-a-who, .ag-appt.s-no_llego .ag-a-who { text-decoration: line-through; text-decoration-color: var(--muted); }
.ag-appt.late { border-color: rgba(251, 191, 36, .7); border-style: solid; box-shadow: 0 0 0 1px rgba(251, 191, 36, .25) inset; }
.ag-a-time { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .03em; line-height: 1; }
.ag-a-time small { font-size: 13px; color: var(--silver); font-weight: 600; margin-left: 1px; }
.ag-a-who { font-weight: 700; font-size: 14.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-a-meta { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--silver); font-size: 12px; font-weight: 600; }
.ag-a-meta .plate-tag { font-size: 12px; padding: 0 5px; letter-spacing: .08em; }
.ag-a-kind { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 800; }
.k-cotizar .ag-a-kind { color: var(--ag-cot); }
.k-reparar .ag-a-kind { color: #FFB08A; }
.ag-a-box { overflow: hidden; text-overflow: ellipsis; }
.ag-a-box::before { content: '\00B7'; margin-right: 6px; color: var(--muted); }
.ag-a-flags { position: absolute; top: 5px; right: 5px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ag-a-flags i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-style: normal; }
.ag-a-flags svg { width: 13px; height: 13px; }
.ag-a-flags .f-ok, .ag-a-flags .f-in { background: var(--ok-soft); color: var(--ok); }
.ag-a-flags .f-wa { background: rgba(31, 175, 90, .2); color: #6EE7A8; }
.ag-a-flags .f-late { width: auto; padding: 0 6px; background: rgba(251, 191, 36, .18); color: #FCD34D; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
/* Bloques bajos: una sola linea */
.ag-appt.short { flex-direction: row; align-items: center; gap: 7px; padding-top: 3px; padding-bottom: 3px; }
.ag-appt.short .ag-a-time small { display: none; }
.ag-appt.short .ag-a-time { font-size: 15px; }
.ag-appt.short .ag-a-who { font-size: 13.5px; min-width: 0; }
.ag-appt.short .ag-a-meta { flex: none; max-width: 45%; }
.ag-appt.short .ag-a-meta .ag-a-kind, .ag-appt.short .ag-a-meta .ag-a-box { display: none; }
.ag-appt.short .ag-a-flags { flex-direction: row; top: 50%; transform: translateY(-50%); }
.ag-appt.tiny .ag-a-meta { display: none; }

/* Linea de "ahora" y hueco bajo el puntero */
.ag-now { position: absolute; left: -6px; right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 4; pointer-events: none; box-shadow: 0 0 12px rgba(241, 101, 34, .8); }
.ag-now i { position: absolute; left: -1px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(241, 101, 34, .25); animation: agPulse 2s ease-in-out infinite; }
.ag-now span { position: absolute; right: 4px; top: -20px; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--accent); background: var(--bg-deep); padding: 0 5px; border-radius: 5px; }
@keyframes agPulse { 50% { box-shadow: 0 0 0 8px rgba(241, 101, 34, .08); } }
.ag-ghost {
  position: absolute; left: 2px; right: 2px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px; z-index: 1;
  border: 1.5px dashed rgba(241, 101, 34, .7); background: rgba(241, 101, 34, .1); color: #FFB08A; font-family: var(--display); font-weight: 700; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .15s, top .08s;
}
.ag-ghost.on { opacity: 1; }
.ag-ghost svg { width: 15px; height: 15px; }

/* Dia sin citas */
.ag-empty {
  position: absolute; left: 10px; right: 10px; top: 54px; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 22px 16px; border-radius: 18px; background: rgba(35, 41, 49, .9); border: 1px dashed var(--line); color: var(--muted); font-size: 14px; cursor: default;
}
.ag-empty .cli-empty-art { margin-bottom: 8px; width: 72px; height: 72px; }
.ag-empty .cli-empty-art svg { width: 34px; height: 34px; color: var(--accent); }
.ag-empty b { color: var(--text-2); font-size: 18px; font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; }
.ag-empty .linkbtn { margin-top: 6px; }

/* Semana (PC) */
.ag-week { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(35, 41, 49, .72); overflow: hidden; }
.ag-wk-head, .ag-wk-body { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.ag-wk-head { background: #2B323C; border-bottom: 1px solid var(--line); }
.ag-wk-body { padding: 12px 0; }
.ag-wk-body .ag-col { border-left: 1px solid var(--line-soft); }
.ag-dh {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 9px 4px 8px; border: 0; border-left: 1px solid var(--line-soft);
  background: transparent; color: var(--silver); transition: background .2s;
}
.ag-dh:hover { background: rgba(255, 255, 255, .04); }
.ag-dh small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ag-dh b { font-family: var(--display); font-size: 26px; line-height: 1.05; color: var(--text); }
.ag-dh em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ag-dh.today small, .ag-dh.today em { color: var(--accent); }
.ag-dh.today b { color: #fff; background: var(--accent); border-radius: 10px; padding: 0 8px; box-shadow: 0 8px 20px -10px rgba(241, 101, 34, .9); }
.ag-week .ag-appt { padding: 4px 24px 4px 9px; border-radius: 9px; }
.ag-week .ag-a-time { font-size: 15px; }
.ag-week .ag-a-who { font-size: 13px; }
.ag-week .ag-a-flags i { width: 17px; height: 17px; }
.ag-week .ag-a-flags .f-late { display: none; }
.ag-week-empty { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line); color: var(--silver); font-size: 14px; }
.ag-week-empty svg { width: 22px; height: 22px; color: var(--accent); flex: none; }

/* Ficha de la cita */
.ag-sh-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.ag-sh-time { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: .02em; }
.ag-sh-time small { font-size: 22px; color: var(--silver); font-weight: 600; }
.ag-sh-date { margin-top: 4px; font-size: 14px; color: var(--silver); }
.ag-sh-date::first-letter { text-transform: uppercase; }
.pill.ag-st.s-agendada { background: rgba(125, 211, 252, .12); color: #BAE6FD; }
.pill.ag-st.s-confirmada { background: var(--ok-soft); color: #6EE7B7; }
.pill.ag-st.s-llego { background: rgba(52, 211, 153, .22); color: #A7F3D0; }
.pill.ag-st.s-no_llego { background: var(--bad-soft); color: #FCA5A5; }
.pill.ag-st.s-cancelada { background: rgba(138, 147, 163, .16); color: var(--silver); }
.ag-who { margin-bottom: 10px; }
.ag-veh { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; margin-bottom: 10px; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--bg-deep); font-weight: 600; }
.ag-veh .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-veh .plate-tag { font-size: 16px; }
.ag-quote { margin-bottom: 10px; }
.ag-quote .rc-card-ico { background: rgba(241, 101, 34, .2); color: var(--accent); }
.ag-dl { margin-top: 14px; }
.ag-rem { display: inline-flex; align-items: center; gap: 5px; color: #6EE7A8; }
.ag-rem svg { width: 15px; height: 15px; }
.ag-conf-note b { color: #FDE68A; }
.wk-note.ag-conf-note { margin-bottom: 10px; }

/* Formulario */
.ag-form { display: flex; flex-direction: column; gap: 14px; }
.ag-kind button { min-height: 50px; gap: 7px; font-weight: 700; border: 0; border-radius: 10px; background: transparent; color: var(--silver); display: flex; align-items: center; justify-content: center; }
.ag-kind button[aria-checked="true"] { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(241, 101, 34, .9); }
.ag-kind button svg { width: 18px; height: 18px; }
@media (max-width: 380px) { .ag-kind button { font-size: 14px; gap: 5px; padding: 0 4px; } .ag-kind button svg { display: none; } }
.ag-known { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ag-known:empty { display: none; }
.ag-known .btn.ghost.sm { width: 40px; padding: 0; border: 0; }
.ag-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--silver); padding: 8px 11px; border-radius: 11px; border: 1px dashed var(--line); }
.ag-hint svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.ag-newveh { margin-top: 10px; }
.ag-group { display: flex; flex-direction: column; gap: 7px; }
.ag-glbl { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ag-glbl small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-chips [role="radio"] {
  min-height: 44px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--silver);
  font-weight: 600; font-size: 14.5px; transition: background .2s, border-color .2s, color .2s, transform .12s var(--ease);
}
.ag-chips [role="radio"]:active { transform: scale(.96); }
.ag-chips [role="radio"][aria-checked="true"] { background: var(--text); border-color: var(--text); color: var(--bg-deep); }
.ag-dur-other { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 4px; border-radius: 11px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.ag-dur-other input { width: 46px; height: 36px; border: 0; background: transparent; color: var(--text); text-align: right; font-size: 16px; font-weight: 700; outline: none; }
.ag-dur-other:focus-within { border-color: var(--accent); }
.ag-qpick { border-radius: 14px; }
.ag-qpick.invalid { box-shadow: 0 0 0 2px var(--bad); }
.ag-qpick .searchbox { margin-bottom: 8px; }
.ag-qlist { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; padding: 2px; }
.ag-qopt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--text); transition: border-color .2s, background .2s;
}
.ag-qopt.on { border-color: var(--accent); background: rgba(241, 101, 34, .1); box-shadow: 0 0 0 1px var(--accent) inset; }
.ag-qn { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.ag-qn small { font-size: 10px; letter-spacing: .16em; color: var(--muted); font-weight: 700; }
.ag-qn b { font-family: var(--display); font-size: 21px; line-height: 1; }
.ag-qopt .grow { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-qopt .grow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-qopt .grow > span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--silver); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-qopt em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #FCD34D; }
.ag-qopt em svg { width: 13px; height: 13px; }
.ag-qt { font-family: var(--display); font-weight: 700; font-size: 17px; white-space: nowrap; }
.ag-qempty { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 13px; border: 1px dashed var(--line); color: var(--silver); font-size: 14px; }
.ag-qempty svg { width: 24px; height: 24px; color: var(--muted); flex: none; }
@media (max-width: 400px) { .ag-qt { display: none; } .ag-qopt { grid-template-columns: auto minmax(0, 1fr); } }

/* Aviso de topes */
.ag-conf { padding: 22px 20px 4px; text-align: center; }
.ag-conf-seal { background: radial-gradient(circle at 30% 25%, rgba(251, 191, 36, .35), rgba(251, 191, 36, .08) 70%); border-color: rgba(251, 191, 36, .55); color: var(--warn); box-shadow: none; }
.ag-conf h3 { margin: 12px 0 4px; font-family: var(--display); font-size: 25px; text-transform: uppercase; letter-spacing: .03em; }
.ag-conf p { margin: 0 0 12px; color: var(--silver); font-size: 14px; }
.ag-conf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.ag-conf-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 9px 12px; border-radius: 12px; background: rgba(251, 191, 36, .07); border: 1px solid rgba(251, 191, 36, .3); }
.ag-conf-list b { font-family: var(--display); font-size: 17px; grid-row: 1 / 3; align-self: center; }
.ag-conf-list span { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-conf-list em { font-style: normal; font-size: 12.5px; color: #FCD34D; }

/* Proximas citas en las fichas (M1) y en la cotizacion */
.ag-up-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.ag-up-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 13px; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--bg-deep); animation: rowIn .35s var(--ease) both; position: relative; overflow: hidden;
}
.ag-up-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ag-cot); }
.ag-up-row.k-reparar::before { background: var(--ag-rep); }
.ag-up-when { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.ag-up-when b { font-family: var(--display); font-size: 21px; line-height: 1; }
.ag-up-when small { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.ag-up-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-up-row .grow b { font-size: 14px; }
.ag-up-row .grow > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--silver); white-space: nowrap; overflow: hidden; }
.ag-up-row em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; color: var(--ok); }
.ag-up-row em svg { width: 13px; height: 13px; }
.ag-qbtn { margin: -2px 0 14px; border-style: dashed; }
.ag-qbtn svg { color: var(--accent); }
.ag-qcard {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin: -2px 0 14px; text-decoration: none; color: var(--text);
  background: linear-gradient(90deg, rgba(125, 211, 252, .13), rgba(125, 211, 252, .03)); border: 1px solid rgba(125, 211, 252, .4);
}
.ag-qcard .rc-card-ico { background: rgba(125, 211, 252, .18); color: var(--ag-cot); }
.ag-qcard .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ag-qcard small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ag-cot); font-weight: 700; }
.ag-qcard b { font-size: 16px; }
.ag-qcard .grow > span { font-size: 12.5px; color: var(--silver); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ag-qcard .grow > span svg { width: 13px; height: 13px; color: #6EE7A8; }

/* Configuracion: boxes y avisos por hito */
.ag-box-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-box-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--bg-deep); border: 1px solid var(--line-soft); animation: rowIn .3s var(--ease) both; }
.ag-box-row .num { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 15px; min-width: 20px; }
.ag-box-name { flex: 1; min-width: 0; min-height: 44px; text-align: left; border: 0; background: transparent; color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 9px; padding: 0 6px; }
.ag-box-name:hover { background: rgba(255, 255, 255, .04); }
/* Descripcion Cotizacion: los servicios son mas largos que un box; hasta dos renglones. */
.qsvc-list .ag-box-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.3; max-height: calc(2 * 1.3em); min-height: 0; margin: 8px 0; }
.ag-ms { margin-top: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .35); }
.ag-ms-head { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 10px; }
.ag-ms-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-ms-head b { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; }
.ag-ms-head b svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.ag-ms-head small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.ag-ms .switch input:checked + span { background: #1FAF5A; border-color: #1FAF5A; }
.ag-ms .field textarea { min-height: 78px; font-size: 14px; }

/* Ajustes tras revisar las capturas */
.ag-title span { display: block; text-transform: none; }
.ag-title span::first-letter { text-transform: uppercase; }
.ag-a-time { white-space: nowrap; }
.ag-appt.narrow { padding-right: 8px; }
.ag-appt.narrow .ag-a-time small, .ag-appt.narrow .ag-a-kind, .ag-appt.narrow .ag-a-box, .ag-appt.narrow .f-late { display: none; }
.ag-appt.narrow .ag-a-flags { flex-direction: row; gap: 2px; }
.ag-appt.narrow .ag-a-flags i { width: 16px; height: 16px; }
.ag-appt.narrow .ag-a-flags svg { width: 11px; height: 11px; }
.ag-appt.narrow:not(.short) .ag-a-who { margin-top: 2px; }
.ag-week .ag-appt .ag-a-time small { display: none; }
.ag-week .ag-appt .ag-a-box { display: none; }
.ag-appt.flash { animation: agFlash 1.4s var(--ease); }
@keyframes agFlash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent), 0 0 26px rgba(241, 101, 34, .7); } 100% { box-shadow: none; } }
.foot-row.ag-row { display: flex; }
.foot-row.ag-row .btn { flex: 1 1 0; min-width: 0; gap: 6px; }
.foot-row.ag-row .btn.icon { flex: 0 0 48px; }
.foot-row.ag-row .btn svg { flex: none; }
.wk-note.ag-late-note { margin-bottom: 10px; }
.foot-row.ag-row { min-width: 0; overflow: hidden; }
.foot-row.ag-row .btn { overflow: hidden; white-space: nowrap; padding: 0 6px; }
@media (max-width: 400px) { .foot-row.ag-row .btn:not(.wa):not(.icon) svg { display: none; } }

/* ======================================================================
   Ampliacion (2026-11) M6: Panel, Reportes y Pago a tecnicos
   ====================================================================== */
/* ---------- Panel ---------- */
.pn-head .eyebrow { text-transform: uppercase; }
.pn-head-acts, .rp-head-acts { display: flex; gap: 8px; align-items: center; flex: none; }
@media (max-width: 459px) { .pn-head-acts .btn span, .rp-head-acts .btn span { display: none; } .pn-head-acts .btn:not(.icon), .rp-head-acts .btn:not(.icon) { width: 46px; padding: 0; } }
.pn-skel { display: grid; gap: 10px; }
.pn-skel .skeleton:first-child { height: 220px; }

.pn-hero { display: grid; gap: 18px; padding: 20px 18px; overflow: hidden; animation: viewIn .5s var(--ease) both; }
.pn-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 0% 0%, rgba(241, 101, 34, .16), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%);
}
.pn-hero > * { position: relative; min-width: 0; }
.pn-k-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.pn-k-label svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.pn-tag { font-family: var(--body); font-size: 10.5px; letter-spacing: .08em; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.pn-big { display: inline-block; margin: 6px 0 2px; text-decoration: none; color: var(--text); font-family: var(--display); font-weight: 700; line-height: .9;
  font-size: clamp(46px, 13.5vw, 88px); letter-spacing: -.01em; transition: color .2s; overflow-wrap: anywhere; }
.pn-big:hover { color: #FFD9C6; }
.pn-big-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--text-2); }
.pn-big-sub > span:not(.pn-delta):not(.pn-vs):not(:first-child)::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--line); margin-right: 8px; vertical-align: middle; }
.pn-vs { font-size: 12.5px; color: var(--muted); }
.pn-delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 4px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-delta svg { width: 14px; height: 14px; stroke-width: 2.6; }
.pn-delta.up { background: var(--ok-soft); color: #6EE7B7; }
.pn-delta.down { background: var(--bad-soft); color: #FCA5A5; }
.pn-delta.flat { background: rgba(184, 188, 198, .12); color: var(--silver); padding-left: 7px; }
.pn-chart { margin-top: 14px; }
.pn-bars { display: block; width: 100%; height: 84px; overflow: visible; }
.pn-bars rect { fill: #56627A; transform-box: fill-box; transform-origin: bottom; animation: pnGrow .6s var(--ease) both; animation-delay: var(--d, 0ms); }
.pn-bars rect.on { fill: #8A93A3; }
.pn-bars rect.zero { fill: #4A5565; }
.pn-bars rect.fut { fill: rgba(74, 85, 101, .45); }
.pn-bars rect.now { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(241, 101, 34, .7)); }
.pn-bars rect:hover { fill: #D7DAE0; }
@keyframes pnGrow { from { transform: scaleY(0); } to { transform: none; } }
.pn-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pn-axis.six span { flex: 1; text-align: center; text-transform: uppercase; }
.pn-hero-side { display: grid; gap: 14px; align-content: start; }
.pn-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pn-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 11px 12px 10px 14px; border-radius: 14px; text-decoration: none; color: var(--text);
  background: rgba(35, 41, 49, .72); border: 1px solid var(--line); overflow: hidden; animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 120ms);
  transition: border-color .2s, transform .15s var(--ease), background .2s;
}
.pn-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.pn-tile.t-today::before { background: var(--accent); } .pn-tile.t-acc::before { background: #60A5FA; } .pn-tile.t-mgn::before { background: var(--ok); }
.pn-tile.t-tkt::before { background: #A78BFA; } .pn-tile.t-debt::before { background: var(--warn); }
.pn-tile:hover { border-color: #6B7789; background: rgba(43, 50, 60, .9); }
.pn-tile:active { transform: scale(.98); }
.pn-tile small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-tile b { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-tile em { font-style: normal; font-size: 12px; color: var(--silver); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; line-height: 1.3; }
.pn-tile.t-debt { grid-column: 1 / -1; }
.pn-warn { color: #FCD34D; font-weight: 600; }
.pn-red { color: #FCA5A5; }
.pn-months { padding: 12px 12px 8px; border-radius: 14px; border: 1px dashed var(--line); }
.pn-mini-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pn-mini-h small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pn-mini-h b { font-family: var(--display); font-size: 18px; }
.pn-months .pn-bars { height: 54px; }
.pn-lockmoney { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 15px; border: 1px dashed rgba(241, 101, 34, .5); background: var(--accent-soft); }
.pn-lockmoney .adm-seal { width: 44px; height: 44px; margin: 0 0 4px; }
.pn-lockmoney b { font-family: var(--display); font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.pn-lockmoney span { font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.pn-lockmoney .btn { margin-top: 6px; }
@media (min-width: 1024px) {
  .pn-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 26px 26px 22px; }
  .pn-hero.ops { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.pn-welcome { padding: 24px 20px; animation: viewIn .5s var(--ease) both; overflow: hidden; }
.pn-welcome::after { content: 'P'; position: absolute; right: -10px; bottom: -60px; font-family: var(--display); font-weight: 700; font-size: 260px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(241, 101, 34, .22); pointer-events: none; }
.pn-welcome h2 { font-family: var(--display); font-size: clamp(30px, 8vw, 46px); text-transform: uppercase; line-height: .95; margin: 6px 0 8px; }
.pn-welcome p { color: var(--text-2); max-width: 560px; margin: 0 0 16px; position: relative; z-index: 1; }
.pn-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; position: relative; z-index: 1; }
.pn-steps li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(35, 41, 49, .85); border: 1px solid var(--line); animation: rowIn .4s var(--ease) both; }
.pn-steps li:nth-child(2) { animation-delay: .06s; } .pn-steps li:nth-child(3) { animation-delay: .12s; }
.pn-steps span { grid-row: 1 / 3; font-family: var(--display); font-size: 30px; font-weight: 700; color: transparent; -webkit-text-stroke: 1.2px var(--accent); line-height: 1.1; }
.pn-steps b { font-family: var(--display); font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.pn-steps em { font-style: normal; font-size: 13px; color: var(--muted); }
.pn-welcome-acts { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
@media (min-width: 760px) { .pn-steps { grid-template-columns: repeat(3, 1fr); } }

.pn-grid { display: grid; gap: 12px; margin-top: 12px; }
.pn-grid > .card { margin: 0; }
@media (min-width: 760px) { .pn-grid { grid-template-columns: 1fr 1fr; } .pn-board { grid-row: span 2; } }
@media (min-width: 1180px) { .pn-grid { grid-template-columns: repeat(3, 1fr); } .pn-perf { grid-column: span 2; } }
.pn-card { display: flex; flex-direction: column; min-width: 0; animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 80ms); }
.pn-card.hot { border-color: rgba(248, 113, 113, .55); box-shadow: 0 0 0 1px rgba(248, 113, 113, .12) inset, 0 18px 40px -28px rgba(0, 0, 0, .7); }
.pn-card.warm { border-color: rgba(251, 191, 36, .45); }
.pn-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.pn-ch .sec-num { font-size: 26px; min-width: 30px; }
.pn-ch .grow { flex: 1; min-width: 0; }
.pn-ch .sec-title { font-size: 19px; }
.pn-ch .sec-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-go { display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 36px; padding: 0 6px 0 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--silver); text-decoration: none; border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.pn-go svg { width: 16px; height: 16px; }
.pn-go:hover { color: var(--text); border-color: var(--accent); }
.pn-quiet { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 13px; background: rgba(35, 41, 49, .55); border: 1px dashed var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.pn-quiet > svg { width: 26px; height: 26px; flex: none; color: var(--ok); margin-top: 1px; }
.pn-quiet b { display: block; color: var(--text-2); font-size: 14.5px; }
.pn-quiet a { color: var(--accent); }

.pn-track { display: flex; gap: 3px; height: 10px; margin: -2px 0 12px; border-radius: 6px; overflow: hidden; }
.pn-track i { display: block; min-width: 6px; background: hsl(calc(20 + var(--k) * 26) 82% calc(58% - var(--k) * 3%)); animation: pnGrowX .7s var(--ease) both; transform-origin: left; }
@keyframes pnGrowX { from { transform: scaleX(0); } to { transform: none; } }
.pn-stations { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pn-stations a { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--text);
  border: 1px solid transparent; transition: background .2s, border-color .2s; animation: rowIn .38s var(--ease) both; animation-delay: calc(var(--i) * 30ms + 120ms); }
.pn-stations a:hover { background: rgba(35, 41, 49, .7); border-color: var(--line); }
.pn-stations a:not(.has) .pn-st-main b { color: var(--muted); font-weight: 500; }
.pn-st-n { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; text-align: center; color: #6B7789; }
.pn-stations a.has .pn-st-n { color: var(--text); }
.pn-st-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pn-st-main b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-st-bar { display: block; height: 5px; border-radius: 3px; background: rgba(74, 85, 101, .5); overflow: hidden; }
.pn-st-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); animation: pnGrowX .7s var(--ease) both; transform-origin: left; }
.pn-plates { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pn-plates .plate-tag { font-size: 11.5px; padding: 0 5px; }
.pn-plates em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; }

.pn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pn-list a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: rgba(35, 41, 49, .55); border: 1px solid var(--line-soft); transition: border-color .2s, background .2s, transform .15s var(--ease); }
.pn-list a:hover { border-color: #6B7789; background: rgba(43, 50, 60, .85); }
.pn-list a:active { transform: scale(.985); }
.pn-list .plate-tag { flex: none; font-size: 13px; padding: 1px 6px; }
.pn-l-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pn-l-main b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-l-main span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-l-main span.clamp { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.pn-pill { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.pn-pill.bad { background: var(--bad-soft); color: #FCA5A5; }
.pn-pill.warn { background: rgba(251, 191, 36, .14); color: #FCD34D; }
.pn-pill.acc { background: var(--accent-soft); color: #FFB08A; }
.pn-pill.info { background: rgba(96, 165, 250, .14); color: #BFDBFE; }
.pn-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(251, 191, 36, .14); color: #FCD34D; }
.pn-ic.notificado { background: var(--bad-soft); color: #FCA5A5; }
.pn-ic svg { width: 18px; height: 18px; }
.pn-time { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 3px 0; border-radius: 9px; border: 1px solid var(--line); }
.pn-time b { font-family: var(--display); font-size: 17px; }
.pn-time small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.pn-time.today { border-color: var(--accent); }
.pn-time.today small { color: #FFB08A; }
.pn-stat { display: flex; align-items: center; gap: 12px; margin: -2px 0 10px; text-decoration: none; color: var(--text-2); font-size: 13.5px; line-height: 1.3; }
.pn-stat b { font-family: var(--display); font-size: 42px; line-height: .9; color: var(--text); }
.pn-card.warm .pn-stat b { color: #FCD34D; }
.pn-stock { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.pn-stock b { font-family: var(--display); font-size: 22px; color: #FCD34D; }
.pn-stock.neg b { color: #FCA5A5; }
.pn-stock small { font-size: 11px; color: var(--muted); }
.pn-more { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }

.pn-perf-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .pn-perf-grid { grid-template-columns: 1fr 1fr; } }
.pn-perf-k { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--text); background: rgba(35, 41, 49, .55); border: 1px solid var(--line-soft); transition: border-color .2s; min-width: 0; }
.pn-perf-k:hover { border-color: #6B7789; }
.pn-perf-k > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-perf-k > span:last-child > b { font-family: var(--display); font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.pn-perf-k em { font-style: normal; font-size: 12.5px; color: var(--silver); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pn-perf-k em.pn-prev { color: var(--muted); }
.pn-ring { width: 84px; height: 84px; flex: none; }
.pn-ring .trk { fill: none; stroke: rgba(74, 85, 101, .6); stroke-width: 8; }
.pn-ring .val { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--o); animation: pnRing 1s var(--ease) both; }
@keyframes pnRing { from { stroke-dashoffset: var(--c); } }
.pn-ring text { font-family: var(--display); font-weight: 700; font-size: 20px; fill: var(--text); }
.pn-days { width: 84px; height: 84px; flex: none; border-radius: 50%; border: 8px solid rgba(74, 85, 101, .6); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .95; }
.pn-days b { font-family: var(--display); font-size: 26px; }
.pn-days small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.pn-foot { margin: 16px 2px 0; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pn-adm { display: inline-flex; align-items: center; gap: 4px; color: #6EE7B7; }
.pn-adm svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .pn-bars rect, .pn-track i, .pn-st-bar i, .pn-ring .val { animation: none !important; } }

/* ---------- Reportes ---------- */
.rp-head .page-sub { display: flex; align-items: center; gap: 6px; }
.rp-head .page-sub svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.rp-secs { display: flex; gap: 4px; padding: 4px; margin: -6px 0 12px; border-radius: 15px; background: var(--bg-deep); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.rp-secs::-webkit-scrollbar { display: none; }
.rp-secs a { position: relative; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 12px; border-radius: 11px; text-decoration: none; scroll-snap-align: center;
  color: var(--silver); font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s; }
.rp-secs a svg { width: 17px; height: 17px; flex: none; }
.rp-secs a:hover { color: var(--text); }
.rp-secs a.active { background: var(--surface); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent), 0 6px 18px -12px rgba(0, 0, 0, .8); }
.rp-secs a.active > svg { color: var(--accent); }
.rp-lock { display: inline-flex; color: #FFB08A; margin-left: -2px; }
.rp-lock svg { width: 13px !important; height: 13px !important; }
.rp-range { margin-bottom: 12px; }
.rp-presets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rp-presets::-webkit-scrollbar { display: none; }
.rp-presets .chip { flex: none; }
.rp-presets .chip.on { background: var(--accent-soft); border-color: var(--accent); color: #FFD9C6; }
.rp-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; animation: rowIn .3s var(--ease); }
.rp-dates input { min-height: 54px; }
.rp-who { margin-bottom: 12px; }
#rp-body { transition: opacity .2s; }
#rp-body.loading { opacity: .5; pointer-events: none; }
.rp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px; color: var(--muted); animation: viewIn .4s var(--ease) both; }
.rp-empty > svg { width: 54px; height: 54px; color: var(--line); margin-bottom: 4px; }
.rp-empty b { color: var(--text-2); font-size: 18px; }
.rp-empty span { max-width: 460px; font-size: 14px; line-height: 1.45; }
.rp-tip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px !important; color: var(--silver); }
.rp-tip svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.rp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (min-width: 760px) { .rp-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.rp-k { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--line); overflow: hidden;
  animation: rowIn .4s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.rp-k::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--line); }
.rp-k.acc::before { background: var(--accent); } .rp-k.ok::before { background: var(--ok); } .rp-k.bad::before { background: var(--bad); } .rp-k.warn::before { background: var(--warn); }
.rp-k.bad b { color: #FCA5A5; } .rp-k.ok b { color: #6EE7B7; }
.rp-k small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-k b { font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-k em { font-style: normal; font-size: 12px; color: var(--silver); line-height: 1.3; }
.rp-kpis > .rp-k:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) { .rp-kpis > .rp-k:last-child:nth-child(odd) { grid-column: auto; } }

.rp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.rp-seg button { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; text-align: left; padding: 9px 12px; min-height: 54px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--silver); font-weight: 600; font-size: 14px; line-height: 1.2; }
.rp-seg button svg { grid-row: 1 / 3; width: 20px; height: 20px; }
.rp-seg button small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.rp-seg button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.rp-seg button[aria-checked="true"] svg { color: var(--accent); }

.rp-sums, .rp-cols { display: grid; gap: 12px; margin-bottom: 12px; }
.rp-sums > .card, .rp-cols > .card { margin: 0; }
@media (min-width: 760px) { .rp-sums, .rp-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.rp-sum h3, .rp-prod h3, .rp-payouts h3 { font-family: var(--display); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; color: var(--text-2); }
.rp-sum ul, .rp-prod ul, .rp-payouts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rp-sum li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; animation: rowIn .35s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.rp-sum-l { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rp-sum-l b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-sum-l small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rp-sum-v { grid-row: 1; grid-column: 2; font-weight: 700; font-size: 14px; text-align: right; }
.rp-sum-bar { grid-row: 2; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(74, 85, 101, .5); overflow: hidden; }
.rp-sum-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); animation: pnGrowX .6s var(--ease) both; transform-origin: left; }
.rp-none { margin: 4px 0; color: var(--muted); font-size: 13.5px; }

.rp-tcard { padding: 6px 6px 4px; overflow: hidden; }
.rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.rp-table th { text-align: left; padding: 10px 10px 8px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rp-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.rp-table .r { text-align: right; }
.rp-table tbody tr { cursor: pointer; transition: background .15s; animation: rowIn .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
.rp-table tbody tr:hover, .rp-table tbody tr:focus-visible { background: rgba(35, 41, 49, .7); }
.rp-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rp-table tfoot td { border-bottom: 0; border-top: 2px solid var(--line); font-weight: 700; color: var(--text-2); padding-top: 11px; }
.rp-table tfoot b { font-family: var(--display); font-size: 20px; color: var(--text); }
.rp-main { min-width: 0; }
.rp-main b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.rp-main span { display: block; font-size: 12.5px; color: var(--muted); }
.rp-main i { font-style: normal; }
.rp-badge { font-style: normal; font-size: 11px; font-weight: 700; color: #DDD6FE; background: rgba(167, 139, 250, .16); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.rp-amt { white-space: nowrap; }
.rp-amt b { font-family: var(--display); font-size: 19px; }
.rp-amt small { display: block; font-size: 11.5px; color: var(--muted); font-family: var(--body); }
.rp-amt .rp-pill { display: inline-block; margin-left: 6px; }
.rp-date { display: inline-flex; flex-direction: column; align-items: center; width: 40px; line-height: 1; padding: 4px 0; border-radius: 9px; background: var(--bg-deep); border: 1px solid var(--line); }
.rp-date b { font-family: var(--display); font-size: 19px; }
.rp-date small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.m-only { display: none; }
@media (max-width: 759px) {
  .rp-table .m-hide { display: none; }
  .m-only { display: inline; }
  .rp-table th, .rp-table td { padding-left: 6px; padding-right: 6px; }
  .rp-table td:first-child { width: 46px; }
  .rp-amt .rp-pill { display: block; margin: 3px 0 0 auto; width: max-content; }
}
.rp-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: rgba(184, 188, 198, .12); color: var(--silver); font-family: var(--body); }
.rp-pill.ok { background: var(--ok-soft); color: #6EE7B7; } .rp-pill.bad { background: var(--bad-soft); color: #FCA5A5; } .rp-pill.warn { background: rgba(251, 191, 36, .14); color: #FCD34D; }
.rp-st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: rgba(252, 211, 77, .14); color: #FCD34D; }
.rp-st.st-aceptada, .rp-st.st-taller { background: var(--accent-soft); color: #FFB08A; } .rp-st.st-entregado { background: var(--ok-soft); color: #6EE7B7; }
.rp-st.st-rechazada, .rp-st.st-cancelado { background: var(--bad-soft); color: #FCA5A5; }
.rp-st-d { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.rp-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.rp-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--silver); }
.soft { color: var(--muted); }

.rp-prod li { padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); animation: rowIn .35s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.rp-prod li:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-p-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 6px; }
.rp-p-h b { font-size: 15px; }
.rp-p-h span { font-size: 12.5px; color: var(--muted); }
.rp-vs { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 5px 8px; font-size: 12.5px; }
.rp-vs .lbl { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.rp-vs .num { text-align: right; font-weight: 600; min-width: 54px; }
.rp-vs .bar { height: 8px; border-radius: 4px; background: rgba(74, 85, 101, .45); overflow: hidden; }
.rp-vs .bar i { display: block; height: 100%; border-radius: 4px; animation: pnGrowX .6s var(--ease) both; transform-origin: left; }
.rp-vs .bar.est i { background: #8A93A3; }
.rp-vs .bar.real i { background: var(--ok); }
.rp-vs .bar.real.over i { background: var(--bad); }
.rp-p-f { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 7px; font-size: 12.5px; color: var(--silver); }

.rp-stack { padding: 14px 16px; }
.rp-stackbar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; gap: 2px; background: rgba(74, 85, 101, .4); }
.rp-stackbar i { display: block; min-width: 0; animation: pnGrowX .7s var(--ease) both; transform-origin: left; }
.rp-stackbar .mat, .rp-legend i.mat { background: #F59E0B; } .rp-stackbar .pay, .rp-legend i.pay { background: #60A5FA; } .rp-stackbar .mgn, .rp-legend i.mgn { background: var(--ok); }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; font-size: 12.5px; color: var(--silver); }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.rp-unassigned { border-color: rgba(248, 113, 113, .5); }
.rp-un-h { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.rp-un-h svg { width: 22px; height: 22px; color: var(--bad); flex: none; }
.rp-un-h b { display: block; }
.rp-un-h span { font-size: 13px; color: var(--muted); }
.rp-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rp-items li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: rgba(35, 41, 49, .55); border: 1px solid var(--line-soft); animation: rowIn .3s var(--ease) both; }
.rp-it-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-it-main b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.rp-it-main > span { font-size: 12px; color: var(--muted); }
.rp-via { font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--silver) !important; font-weight: 700; }
.rp-it-amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.rp-it-amt b { font-family: var(--display); font-size: 18px; }
.rp-it-amt small { font-size: 11.5px; color: var(--muted); }
.rp-it-amt .btn { margin-top: 4px; }

.rp-techs { display: grid; gap: 12px; margin-bottom: 12px; }
.rp-techs > .card { margin: 0; }
@media (min-width: 760px) { .rp-techs { grid-template-columns: 1fr 1fr; align-items: start; } }
.rp-tech { animation: rowIn .4s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.rp-tech.owes { border-color: rgba(251, 191, 36, .45); }
.rp-tech-h { display: flex; align-items: center; gap: 12px; }
.rp-tech-h .c-av { width: 46px; height: 46px; font-size: 18px; flex: none; }
.rp-tech-h .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-tech-h .grow b { font-size: 17px; overflow-wrap: anywhere; }
.rp-tech-h .grow span { font-size: 12.5px; color: var(--muted); }
.rp-bal { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.rp-bal small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rp-bal b { font-family: var(--display); font-size: 28px; margin-top: 3px; }
.rp-bal b.pos { color: #FCD34D; } .rp-bal b.neg { color: #93C5FD; }
.rp-tech-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.rp-tech-dl div { padding: 8px 10px; border-radius: 11px; background: var(--bg-deep); border: 1px solid var(--line-soft); min-width: 0; }
.rp-tech-dl dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rp-tech-dl dd { margin: 2px 0 0; font-weight: 700; }
.rp-tech-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-tech-acts .btn { flex: 1 1 140px; }

.rp-payouts { margin-bottom: 0; }
.rp-po-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rp-payouts li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); animation: rowIn .3s var(--ease) both; }
.rp-payouts li:last-child { border-bottom: 0; }
.rp-payouts li.void { opacity: .6; }
.rp-payouts li.void .rp-po-amt b { text-decoration: line-through; }
.rp-po-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.rp-po-main b { font-size: 14.5px; }
.rp-po-main > span:not(.rp-pill) { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.rp-po-amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rp-po-amt b { font-family: var(--display); font-size: 19px; }
.rp-po-acts { display: flex; gap: 6px; }
.rp-po-acts .btn.sm.icon { width: 38px; min-height: 38px; }

.rp-who-card { display: flex; align-items: center; gap: 12px; padding: 14px; animation: viewIn .4s var(--ease) both; }
.rp-who-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-who-card .grow b { font-size: 17px; overflow-wrap: anywhere; }
.rp-who-card .grow span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.rp-who-card .c-av { width: 46px; height: 46px; font-size: 18px; flex: none; }
.plate-tag.big { font-size: 18px; padding: 3px 9px; flex: none; }

.rp-payform .grid { margin-top: 12px; }
.rp-pay-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rp-pay-bal span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 13px; background: var(--bg-deep); border: 1px solid var(--line); }
.rp-pay-bal small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rp-pay-bal b { font-family: var(--display); font-size: 24px; }
.rp-pay-bal b.neg { color: #93C5FD; }
.rp-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 12px 2px 0; line-height: 1.4; }
.rp-hint svg { width: 16px; height: 16px; flex: none; color: var(--silver); }

/* ===================================================================================
   Arbitro adversarial de la ampliacion — interfaz (2026-11)
   =================================================================================== */
/* A3/A4: grillas de una columna que crecian con el texto largo (nowrap) y empujaban la pagina
   mas alla de 360/390 px. Una pista "1fr" es minmax(auto, 1fr): sin min-width: 0 en los hijos
   el contenido manda. Se fija minmax(0, 1fr) y min-width: 0 en las tarjetas. */
.pn-grid, .pn-list, .pn-stations, .pn-steps, .pn-perf-grid, .pn-hero-side, .settings-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 560px) { .pn-perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pn-grid > *, .pn-list > li, .pn-stations > li, .settings-grid > *, .pn-hero-side > *, .rp-kpis > *, .rp-sums > *, .rp-cols > *, .rp-techs > *, .clist > *, .sg-cards > *, .done-list > * { min-width: 0; }
.pn-list > li > a { max-width: 100%; }
.settings-grid .card { overflow-wrap: anywhere; }

/* M1: barra superior a 360/390 con el chip Admin: el chip queda solo con el escudo y la marca
   se recorta con "…" en vez de aplastarse. */
.topbar .brand { flex: 0 1 auto; }
.topbar .brand-text { overflow: hidden; }
.topbar .brand-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .adm-chip, .topbar .shop-chip { flex: none; }
@media (max-width: 420px) {
  .adm-chip { padding: 0; width: 38px; justify-content: center; margin-right: 2px; }
  .adm-chip span { display: none; }
  .topbar { gap: 8px; }
  .topbar .shop-chip { max-width: 28vw; flex: 0 1 auto; min-width: 0; }
}

/* M2: el nombre largo del cliente se corta con "…" (era un span en linea y pisaba el monto). */
.qrow { grid-template-columns: auto minmax(0, 1fr) auto; }
.qrow .qname { display: block; }

/* M4: el N° de cotizacion del tablero de Etapas no se corta ("N…"): cede la patente si falta espacio. */
.wcard-w .wc-no, .wc-no { flex: none; overflow: visible; text-overflow: clip; }

/* B1: contraste >= 4,5:1. Numero sobre naranjo/rojo en texto oscuro; rotulos del riel sin
   opacidad; ceros del tablero del Panel en --muted (antes #6B7789, 2,9:1). */
.badge-dot, .tabbar .badge-dot, .rail a.nav .badge-dot, .more-tile .badge-dot { color: #14181D; font-weight: 800; }
.badge-dot.alert { color: #14181D; }
.rail a.nav.active .badge-dot { color: #fff; }
@media (min-width: 1024px) { .rail-group { opacity: 1; } }
.pn-st-n { color: var(--muted); }

/* M3: agenda semanal legible con citas que se cruzan. El tipo va como color (barra y borde,
   ver leyenda) y no como texto cortado ("REPARA…"); en carriles angostos el bloque muestra la
   hora completa y la patente (el nombre queda en el titulo/aria). Lo que no cabe va en "+N". */
.ag-week .ag-a-kind { display: none; }
.ag-week .ag-appt.lane { padding: 4px 4px 4px 8px; gap: 3px; }
.ag-week .ag-appt.lane .ag-a-time small { display: none; }
.ag-week .ag-appt.lane .ag-a-who { display: none; }
.ag-week .ag-appt.lane .ag-a-meta { overflow: visible; }
.ag-week .ag-appt.lane .ag-a-meta .ag-a-box { display: none; }
.ag-week .ag-appt.lane .ag-a-meta .plate-tag { font-size: 11px; padding: 0 3px; letter-spacing: .04em; }
.ag-week .ag-appt.lane .ag-a-flags { position: static; flex-direction: row; transform: none; }
.ag-week .ag-appt.lane.short { flex-direction: column; align-items: flex-start; }
.ag-more {
  position: absolute; z-index: 5; right: 4px; height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 8px;
  border-radius: 999px; border: 1px solid var(--silver); background: #1E242C; color: var(--text);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .9); transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.ag-more b { font-family: var(--display); font-size: 16px; line-height: 1; }
.ag-more small { font-size: 11px; color: var(--silver); font-weight: 600; white-space: nowrap; }
.ag-more:active { transform: scale(.96); }
.ag-more:hover { border-color: var(--accent); background: rgba(43, 50, 60, .95); }

/* M8: aviso de cita en el pasado */
.ag-past { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: -2px 0 0; padding: 8px 11px; border-radius: 11px; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .4); color: #FCD34D; font-size: 13px; font-weight: 600; animation: rowIn .25s var(--ease); }
.ag-past[hidden] { display: none; }
.ag-past svg { width: 16px; height: 16px; flex: none; }

/* =====================================================================================
   Rebajar producto (2026-11-04): Inventario > Rebajar producto, alerta "Rebaje de productos
   pendiente" en Alertas, Etapas (tarjeta y hoja) y Materiales usados.
   ===================================================================================== */
:root { --rb: #FB923C; --rb-soft: rgba(251, 146, 60, .14); --rb-line: rgba(251, 146, 60, .5); }

/* Cuatro pestanas en Inventario: 2x2 en el celular, una fila desde 640 px. */
.inv-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .inv-secs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.inv-secs a { position: relative; text-align: center; line-height: 1.05; }
.inv-secs a span { min-width: 0; }
.inv-secs a span { white-space: normal; overflow-wrap: anywhere; }
.inv-secs a em {
  position: static; flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-style: normal; font-family: var(--body); font-size: 11.5px; font-weight: 800; letter-spacing: 0; background: var(--rb); color: #2A1400;
  box-shadow: 0 0 0 3px var(--bg-deep); animation: rbPulse 2.4s ease-in-out infinite;
}
.inv-secs a em[hidden] { display: none; }
.inv-secs a.rb-sec.active { box-shadow: inset 0 -2px 0 var(--rb), 0 6px 18px -12px rgba(0, 0, 0, .8); }
.inv-secs a.rb-sec.active svg { color: var(--rb); }
@keyframes rbPulse { 50% { box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 7px rgba(251, 146, 60, .22); } }

.rb-sub-warn { display: inline-flex; align-items: center; gap: 6px; color: #FED7AA; font-weight: 600; }
.rb-sub-warn svg { width: 15px; height: 15px; color: var(--rb); }

/* Punto que late: pendiente sin atender */
.rb-pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rb); flex: none; }
.rb-pulse::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--rb); opacity: 0; animation: rbRing 1.8s var(--ease) infinite; }
@keyframes rbRing { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rb-pulse::after, .inv-secs a em, .wc-rb { animation: none !important; } }

/* Franja de pendientes (arriba de los pasos) */
.rb-pend { margin: -2px 0 14px; padding: 12px 0 4px; border-radius: 16px; background: linear-gradient(180deg, rgba(251, 146, 60, .12), rgba(251, 146, 60, .03)); border: 1px solid var(--rb-line); }
.rb-pend-h { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
.rb-pend-h b { font-family: var(--display); font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: #FED7AA; }
.rb-pend-h em { margin-left: auto; font-style: normal; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--rb); }
.rb-pend-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; padding: 0 14px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.rb-pend-row::-webkit-scrollbar { display: none; }
.rb-pcard {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 12px 13px; border-radius: 14px; color: var(--text);
  border: 1px solid var(--rb-line); background: linear-gradient(160deg, #3A3530, #2B2E33); animation: rowIn .35s var(--ease) both;
  transition: transform .15s var(--ease), border-color .2s, box-shadow .25s;
}
.rb-pcard:hover { border-color: var(--rb); box-shadow: 0 14px 30px -18px rgba(251, 146, 60, .8); }
.rb-pcard:active { transform: scale(.98); }
.rb-pcard-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rb-pcard-veh { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-pcard-meta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--silver); }
.rb-pcard-meta svg { width: 13px; height: 13px; }
.rb-pcard-go { margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rb); }
.rb-pcard-go svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.rb-pcard:hover .rb-pcard-go svg { transform: translateX(3px); }

/* Pasos */
.rb-flow { display: flex; flex-direction: column; gap: 14px; padding-bottom: 96px; }
.rb-step .sec-num { transition: color .3s, transform .3s var(--ease); }
.rb-step.is-done .sec-num { color: var(--ok); -webkit-text-stroke-color: var(--ok); }
.rb-step .opt { font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.rb-step.pop { animation: rbPop .45s var(--ease); }
@keyframes rbPop { 40% { box-shadow: 0 0 0 2px var(--accent), 0 18px 40px -22px rgba(241, 101, 34, .9); } }
@media (min-width: 1024px) {
  /* Vehiculo y tecnico a la izquierda, productos a la derecha (sin hueco bajo el 01). */
  .rb-flow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "v p" "t p"; align-items: start; }
  .rb-flow #rb-s1 { grid-area: v; } .rb-flow #rb-s2 { grid-area: p; } .rb-flow #rb-s3 { grid-area: t; }
}
/* Sin vehiculos en el taller: un solo estado vacio (sin pasos 02/03 ni barra). */
.rb-none #rb-s2, .rb-none #rb-s3, .rb-none .rb-bar { display: none; }

/* 01 Vehiculo: lista */
.rb-vq { margin-bottom: 10px; }
.rb-vlist { display: flex; flex-direction: column; gap: 6px; max-height: 430px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.rb-v {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 9px 11px;
  border-radius: 13px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .3); color: var(--text); text-align: left;
  animation: rowIn .3s var(--ease) both; transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.rb-v:hover { border-color: #5E6A7C; background: rgba(59, 68, 81, .6); }
.rb-v:active { transform: scale(.985); }
.rb-v.pend { border-color: var(--rb-line); background: linear-gradient(90deg, rgba(251, 146, 60, .1), rgba(20, 24, 29, .3) 60%); }
.rb-v-noplate { display: grid; place-items: center; width: 34px; height: 26px; color: var(--muted); }
.rb-v-noplate svg { width: 20px; height: 20px; }
.rb-v-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rb-v-main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-v-main small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-v-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rb-v-stage { font-size: 11.5px; color: var(--silver); white-space: nowrap; }
.rb-v-n { font-size: 11.5px; color: var(--ok); white-space: nowrap; }
.rtag.rb-tag-pend { background: var(--rb-soft); color: #FED7AA; border-color: var(--rb-line); white-space: nowrap; }
.rb-back { display: inline-flex; align-items: center; gap: 4px; margin: -2px 0 10px; }
.rb-back svg { width: 16px; height: 16px; }
.rb-empty { margin: 0; }

/* 01 Vehiculo: elegido */
.rb-sel {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 15px; overflow: hidden;
  border: 1px solid rgba(241, 101, 34, .45); background: radial-gradient(120% 90% at 0% 0%, rgba(241, 101, 34, .16), transparent 60%), linear-gradient(180deg, #343D49, #2A313A);
  animation: viewIn .35s var(--ease) both;
}
.rb-sel.pend { border-color: var(--rb-line); }
.rb-sel-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rb-sel-top .grow { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rb-sel-top b { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: .02em; line-height: 1.05; overflow-wrap: anywhere; }
.rb-change { flex: none; align-self: flex-start; }
.rb-sel-top small { font-size: 13px; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-tag.lg { font-size: 18px; padding: 3px 9px; }
.rb-sel-stage { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--silver); }
.rb-sel-stage > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.rb-sel-stage svg { width: 15px; height: 15px; color: var(--accent); }
.rb-meter { display: block; height: 5px; border-radius: 99px; background: rgba(20, 24, 29, .55); overflow: hidden; }
.rb-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .6s var(--ease); }
.rb-paint { margin-top: 0; align-self: flex-start; }
.rb-sel-alert, .rb-sel-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 11px; border-radius: 11px; font-size: 13px; line-height: 1.35; }
.rb-sel-alert { background: var(--rb-soft); border: 1px solid var(--rb-line); color: #FED7AA; }
.rb-sel-note { background: rgba(20, 24, 29, .4); border: 1px solid var(--line-soft); color: var(--silver); }
.rb-sel-alert svg, .rb-sel-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.rb-used { border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(20, 24, 29, .35); }
.rb-used summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; }
.rb-used summary::-webkit-details-marker { display: none; }
.rb-used summary svg { width: 16px; height: 16px; flex: none; color: var(--ok); }
.rb-used summary svg:last-child { color: var(--muted); transition: transform .25s var(--ease); }
.rb-used[open] summary svg:last-child { transform: rotate(180deg); }
.rb-used summary em { font-style: normal; color: var(--muted); }
.rb-used ul { list-style: none; margin: 0; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.rb-used li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rb-used li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-used li small { color: var(--muted); font-size: 12px; }

/* 02 Productos */
.rb-find { position: relative; }
.rb-find .searchbox { margin-bottom: 0; }
.rb-res {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 5px; border-radius: 13px;
  background: #2B323C; border: 1px solid #5E6A7C; box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .8); animation: viewIn .18s var(--ease);
}
.rb-res[hidden] { display: none; }
.rb-incart { color: var(--ok); font-weight: 700; }
.rb-budget { margin-top: 12px; padding: 11px; border-radius: 13px; border: 1px dashed rgba(156, 200, 255, .35); background: rgba(156, 200, 255, .05); }
.rb-budget-h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.rb-budget-h > svg { width: 17px; height: 17px; color: #BFDBFE; flex: none; }
.rb-budget-h .grow { min-width: 0; display: flex; flex-direction: column; }
.rb-budget-h b { font-size: 14px; }
.rb-budget-h small { font-size: 12px; color: var(--muted); }
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 46px; padding: 5px 10px 5px 6px; border-radius: 12px; text-align: left; color: var(--text);
  border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, transform .15s var(--ease);
}
.rb-chip:hover { border-color: #9CC8FF; }
.rb-chip:active { transform: scale(.97); }
.rb-chip .grow { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rb-chip b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-chip small { font-size: 12px; color: var(--muted); }
.rb-chip > svg { width: 16px; height: 16px; flex: none; color: #BFDBFE; }
.rb-cart { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rb-cart-empty { display: flex; align-items: center; gap: 10px; padding: 16px 14px; border-radius: 13px; border: 1px dashed var(--line); color: var(--muted); font-size: 13.5px; }
.rb-cart-empty svg { width: 22px; height: 22px; flex: none; opacity: .7; }
.rb-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "ic main qty unit x"; align-items: center; gap: 8px 10px;
  padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(20, 24, 29, .32); animation: rowIn .3s var(--ease) both;
}
.rb-line > .inv-ic { grid-area: ic; }
.rb-line-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-line-main b { font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.rb-line-main small { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; font-size: 12.5px; color: var(--muted); }
.rb-line-main small svg { width: 12px; height: 12px; opacity: .7; }
.rb-line-main small em { font-style: normal; color: var(--bad); font-weight: 600; }
.rb-after { color: var(--text-2); font-weight: 600; }
.rb-after.neg { color: var(--bad); }
.rb-step-q { grid-area: qty; width: 132px; }
.rb-step-q input { width: 100%; height: 42px; min-width: 0; border: 1px solid var(--line); background: var(--input); color: var(--text); font-family: var(--body); outline: none; transition: border-color .2s, box-shadow .2s; }
.rb-step-q input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rb-step-q .it-stepb { width: 38px; }
.rb-unit { grid-area: unit; font-size: 12.5px; color: var(--muted); min-width: 22px; }
.rb-x { grid-area: x; }
.rb-line.bad { border-color: rgba(248, 113, 113, .6); }
.rb-line.bad .rb-step-q input { border-color: var(--bad); }
.rb-line.gone { opacity: .7; border-style: dashed; }
.rb-line.lit { animation: rbLit .9s var(--ease); }
@keyframes rbLit { 0% { box-shadow: 0 0 0 2px var(--accent); background: rgba(241, 101, 34, .14); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 520px) {
  .rb-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic main x" "qty qty unit"; }
  .rb-step-q { width: auto; }
  .rb-unit { text-align: left; }
}

/* 03 Tecnico */
.rb-techs { display: flex; flex-wrap: wrap; gap: 7px; }
.rb-tech {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 5px 13px 5px 6px; border-radius: 999px; color: var(--text-2);
  border: 1px solid var(--line); background: var(--surface); font-weight: 600; transition: border-color .2s, background .2s, color .2s, transform .15s var(--ease);
}
.rb-tech:active { transform: scale(.97); }
.rb-tech .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .04em; background: var(--surface-2); color: var(--silver); }
.rb-tech .av.none svg { width: 16px; height: 16px; }
.rb-tech.on { border-color: var(--accent); color: var(--text); background: radial-gradient(120% 120% at 0% 50%, rgba(241, 101, 34, .2), transparent 70%), var(--surface); }
.rb-tech.on .av { background: var(--accent); color: #fff; }

/* Barra inferior */
.rb-bar .sum b { font-size: 24px; }
.rb-bar .sum small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-bar .btn[disabled] { opacity: 1; background: var(--surface-2); border-color: var(--line); color: var(--muted); box-shadow: none; }
.rb-bar .btn[disabled] svg { color: var(--muted); }

/* Hoja "Productos rebajados" */
.rb-ok-seal { width: 64px; height: 64px; margin: 2px auto 10px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 30%, #4ADE80, #16A34A); box-shadow: 0 0 0 6px rgba(52, 211, 153, .14), 0 18px 34px -16px rgba(52, 211, 153, .8); animation: rbSeal .6s var(--ease) both; }
.rb-ok-seal svg { width: 32px; height: 32px; stroke-width: 2.6; stroke-dasharray: 40; stroke-dashoffset: 40; animation: rbDraw .5s .25s var(--ease) forwards; }
@keyframes rbSeal { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rbDraw { to { stroke-dashoffset: 0; } }
.rb-ok { display: flex; flex-direction: column; gap: 12px; }
.rb-ok-veh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(20, 24, 29, .4); border: 1px solid var(--line-soft); }
.rb-ok-veh .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-ok-veh small { color: var(--muted); font-size: 12.5px; }
.rb-ok-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rb-ok-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); animation: rowIn .35s var(--ease) both; }
.rb-ok-list li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-ok-list li small { color: var(--muted); font-size: 12.5px; }
.rb-ok-list li > b { color: #FED7AA; }
.rb-ok-alert { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); border: 1px solid rgba(52, 211, 153, .4); font-size: 13.5px; }
.rb-ok-alert svg { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 2px; }
.inv-note.warn { color: #FECACA; }
.inv-note.warn svg { color: var(--bad); }

/* Alertas: bloque de rebajes */
.al-rb { margin: 0 0 16px; padding: 13px 13px 12px; border-radius: 16px; border: 1px solid var(--rb-line); background: linear-gradient(180deg, rgba(251, 146, 60, .12), rgba(251, 146, 60, .02)); }
.al-rb-h { display: flex; align-items: center; gap: 10px; }
.al-rb-h b { font-family: var(--display); font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: #FED7AA; }
.al-rb-h em { margin-left: auto; font-style: normal; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--rb); }
.al-rb-hint { margin: 6px 0 10px; font-size: 13px; color: var(--silver); }
.al-rb-list { display: flex; flex-direction: column; gap: 8px; }
a.al-row { text-decoration: none; }
.al-row.al-rb-row::before { background: var(--rb); }
.al-rb-row .al-ico { color: var(--rb); border-color: var(--rb-line); background: var(--rb-soft); }
.al-rb-go { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rb); }
.al-rb-go svg { width: 15px; height: 15px; }

/* Etapas: marca en la tarjeta y banda en la hoja */
.wc-rb { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--rb-soft); color: #FED7AA; border: 1px solid var(--rb-line); animation: rbChip 2.4s ease-in-out infinite; }
.wc-rb svg { width: 13px; height: 13px; }
@keyframes rbChip { 50% { box-shadow: 0 0 0 4px rgba(251, 146, 60, .12); } }
.rb-band { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(251, 146, 60, .18), rgba(251, 146, 60, .05)); border: 1px solid var(--rb-line); animation: viewIn .4s var(--ease) both; }
.rb-band-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--rb-soft); color: var(--rb); border: 1px solid var(--rb-line); }
.rb-band-ico svg { width: 20px; height: 20px; }
.rb-band .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-band b { font-size: 15px; }
.rb-band .grow span { font-size: 13px; color: var(--silver); overflow-wrap: anywhere; }
.rb-band .btn { flex: none; }
@media (max-width: 420px) { .rb-band { flex-wrap: wrap; } .rb-band .btn { width: 100%; justify-content: center; } }

/* Materiales usados: origen y tecnico */
.mt-src.rb { background: var(--rb-soft); color: #FED7AA; }
.mt-tech { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 0 6px; border-radius: 5px; background: rgba(52, 211, 153, .12); color: #A7F3D0; }
.al-rb-none { display: flex; align-items: center; gap: 8px; margin: 4px 2px; font-size: 13.5px; color: var(--muted); }
.al-rb-none svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
/* Celular angosto: la patente arriba y el nombre debajo, con todo el ancho. */
@media (max-width: 359px) {
  .rb-sel-top { flex-wrap: wrap; }
  .rb-sel-top .grow { order: 3; flex: 1 1 100%; }
  .rb-change { margin-left: auto; }
}