@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --bg: #e8edf4;
  --bg2: #f4f7fb;
  --surface: #ffffff;
  --surface2: #f7f9fc;
  --surface3: #eef2f8;
  --text: #0f172a;
  --text2: #334155;
  --text3: #475569;
  --border: #c5d0e0;
  --border2: #9aabc4;
  --navy: #1e3a8a;
  --brand: #1e3a8a;
  --icon: #1d4ed8;
  --blue: #1d4ed8;
  --blue2: #1e40af;
  --green: #047857;
  --amber: #b45309;
  --red: #b91c1c;
  --on-navy: #ffffff;
  --radius: 10px;
  --radius2: 12px;
  --shadow: 0 10px 28px rgba(15, 39, 68, 0.08);
  --focus: 0 0 0 3px rgba(29, 78, 216, 0.22);
  --art-opacity: 0.4;
  --art-filter: none;
}

body.tema-dark {
  --bg: #111118;
  --bg2: #16161f;
  --surface: #1e1e2d;
  --surface2: #26263a;
  --surface3: #30304a;
  --text: #f8f8ff;
  --text2: #c0c0e0;
  --text3: #b8b8d6;
  --border: #35354f;
  --border2: #46467a;
  --navy: #4f8ef7;
  --brand: #6fa3ff;
  --icon: #6fa3ff;
  --blue: #4f8ef7;
  --blue2: #6fa3ff;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --on-navy: #ffffff;
  --ok-fg: #6ee7b7;
  --ok-bg: rgba(52, 211, 153, 0.16);
  --warn-fg: #fde68a;
  --warn-bg: rgba(251, 191, 36, 0.14);
  --bad-fg: #fca5a5;
  --bad-bg: rgba(248, 113, 113, 0.16);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --focus: 0 0 0 3px rgba(79, 142, 247, 0.35);
  --art-opacity: 0.18;
  --art-filter: invert(1) hue-rotate(180deg) brightness(1.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { font-size: 16px; }
body {
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ——— Login (maqueta B1) ——— */
.login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #0b1220;
}
.login-body::before {
  display: none;
}
.login-bgs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-bg {
  position: absolute;
  inset: 0;
  background-color: #0b1220;
  background-position: 28% center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.login-bg.on { opacity: 1; }
.login-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(8, 12, 22, 0.58) 0%, rgba(8, 12, 22, 0.22) 32%, rgba(8, 12, 22, 0.04) 50%, transparent 66%),
    linear-gradient(180deg, rgba(8, 12, 22, 0.22) 0%, transparent 16%, transparent 84%, rgba(8, 12, 22, 0.4) 100%);
}
.login-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px 8px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.login-brand svg { width: 36px; height: 36px; stroke: #fff; }
.login-brand strong {
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #fff;
}
.login-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 16px 12px;
}
.login-con-fondo .login-brand {
  justify-content: flex-start;
  padding: 22px 32px 0 40px;
}
.login-con-fondo .login-wrap {
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 12px 48px 24px 32px;
}
.login-marca {
  width: min(440px, 100%);
  text-align: center;
  margin-bottom: 4px;
}
.login-logo-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px;
  min-height: 72px;
  border-radius: 16px;
  transition: background 0.25s ease, transform 0.35s ease, opacity 0.35s ease;
}
.login-logo-mark.con-logo {
  display: inline-flex;
  padding: 6px 8px;
  min-height: 0;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
}
.login-logo-mark.con-logo.on {
  animation: login-logo-in 0.45s ease;
}
.login-logo-mark.logo-caja-fit,
.brand-logo.logo-caja-fit,
.cfg-emp-logo.logo-caja-fit {
  overflow: hidden;
}
.login-logo-img.logo-ajustado,
.brand-logo img.logo-ajustado,
.cfg-emp-logo img.logo-ajustado {
  will-change: transform;
}
.login-marca-ico {
  width: 40px;
  height: 40px;
  stroke: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.login-marca-ico-img {
  width: 63px;
  height: 52px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.login-logo-img {
  height: 210px;
  width: auto;
  max-width: min(420px, 100%);
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}
.login-marca-nom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.login-marca-microtec {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f8fafc;
}
.login-marca-rpm {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93c5fd;
}
.login-marca-words {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f8fafc;
}
@keyframes login-logo-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.login-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 34px 28px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card:hover {
  border-color: rgba(251, 191, 36, 0.65);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.35),
    0 0 28px rgba(251, 191, 36, 0.18),
    0 18px 48px rgba(0, 0, 0, 0.35);
  animation: none;
}
@keyframes login-card-pulse {
  0%, 100% {
    border-color: var(--border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
  50% {
    border-color: rgba(251, 191, 36, 0.42);
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.18),
      0 0 22px rgba(251, 191, 36, 0.12),
      0 18px 48px rgba(0, 0, 0, 0.35);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .login-card { animation: login-card-pulse 3.2s ease-in-out infinite; }
}
.login-card h1 {
  margin: 0 0 22px;
  text-align: center;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--brand);
}
.login-card label.f { margin-bottom: 14px; }
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
  font-size: 0.8125rem;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
}
.remember-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand, #357ace);
  cursor: pointer;
}
.login-olvido {
  text-align: right;
  margin: -4px 0 14px;
}
.login-olvido a {
  font-size: 0.8125rem;
  color: var(--brand, #357ace);
  text-decoration: none;
}
.login-olvido a:hover { text-decoration: underline; }
.err-box.ok-box,
.ok-box {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #059669;
}
body.tema-dark .err-box.ok-box,
body.tema-dark .ok-box {
  color: #34d399;
}
.login-div {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0 16px;
}
.login-card .input,
.login-card input {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card input:focus {
  border-color: rgba(251, 191, 36, 0.75);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
  outline: none;
}
.lab-ico {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--icon);
}
.login-card .btn-primary {
  margin-top: 8px;
  width: 100%;
  padding: 12px;
  letter-spacing: 0.06em;
  transition: background 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.login-card .btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 0 18px rgba(251, 191, 36, 0.22);
}
.login-card a:hover {
  color: #ca8a04;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}
.login-fondos {
  position: absolute;
  z-index: 3;
  left: 40px;
  bottom: 64px;
  width: auto;
  display: block;
  padding: 0;
  background: none;
  border: 0;
}
.login-fondos-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  background: rgba(8, 12, 22, 0.58);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.login-fondos-btn:hover,
.login-fondos-btn[aria-expanded="true"] {
  background: rgba(8, 12, 22, 0.78);
  border-color: #fff;
}
.login-fondos-btn-foto {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #1e293b center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.login-fondos-btn-ico {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-left: -4px;
}
.login-fondos-btn-ico .ico {
  width: 16px;
  height: 16px;
  stroke: #fff;
}
.login-fondos-btn-txt {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.login-fondos-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(420px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(8, 12, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.login-fondos-panel[hidden] { display: none; }
.login-fondos-lab {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e2e8f0;
}
.login-fondos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.login-fondo-auto {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 32px;
}
.login-fondo-auto.on {
  background: #fff;
  color: #0f172a;
  border-color: #fff;
}
.login-fondo-thumb {
  width: 44px;
  height: 32px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 7px;
  overflow: hidden;
  background: #1e293b;
}
.login-fondo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login-fondo-thumb.on {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.login-fondo-thumb.propio { border-color: #86efac; }
.login-fondo-subir,
.login-fondo-quitar {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 32px;
}
.login-fondo-subir:hover,
.login-fondo-quitar:hover { background: rgba(255, 255, 255, 0.12); }
.login-fondos-nota {
  margin: 0;
  font-size: 0.7rem;
  color: #cbd5e1;
}
.login-foot {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  text-align: center;
  padding: 12px 16px;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 840px) {
  .login-con-fondo .login-bg { background-position: center; }
  .login-con-fondo .login-bg::after {
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.48) 0%, rgba(8, 12, 22, 0.32) 42%, rgba(8, 12, 22, 0.7) 100%);
  }
  .login-con-fondo .login-brand {
    justify-content: center;
    padding: 28px 16px 8px;
  }
  .login-con-fondo .login-wrap {
    align-items: center;
    padding: 16px 16px 12px;
  }
  .login-fondos {
    left: 16px;
    bottom: 60px;
  }
  .login-logo-mark.con-logo { padding: 6px 10px; }
  .login-logo-img { height: 150px; }
}
.err-box {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border));
  color: var(--red);
  font-size: 0.8125rem;
}

/* ——— App shell (maquetas A3 / B3) ——— */
body.app-body { display: flex; min-height: 100vh; }
.side {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 4px 4px 18px;
  color: var(--brand);
}
.brand-logo {
  width: 100%;
  min-height: 92px;
  max-height: 124px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 12px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.brand-logo img {
  display: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  object-position: center;
}
.brand-logo img.brand-logo-platform {
  display: block;
  max-height: 40px;
  width: auto;
}
.brand--has-logo .brand-logo {
  padding: 4px 6px;
  background: var(--logo-fondo, #fff);
  overflow: hidden;
}
.brand-logo svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.brand--has-logo .brand-logo svg,
.brand--has-logo .brand-logo .brand-logo-platform { display: none; }
.brand--has-logo .brand-logo img:not(.brand-logo-platform) { display: block; }
.brand-txt { width: 100%; min-width: 0; }
.brand strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.brand span {
  display: block;
  margin-top: 3px;
  color: var(--text3);
  font-size: 0.72rem;
  font-weight: 500;
}
body.tema-dark .brand-logo {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.22);
}
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav button {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text2);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.side nav button svg {
  width: 22px;
  height: 22px;
  opacity: 1;
  stroke-width: 2.15;
}
.side nav button:hover { background: var(--surface3); color: var(--text); }
.side nav button.nav-on {
  background: var(--surface3);
  color: var(--brand);
  font-weight: 700;
}
.side-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text2);
}
.side-marca { margin: 0; font-size: 0.6875rem; color: var(--text3); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.top {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.top h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}
.modo-vista {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 2px solid var(--navy);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.modo-vista[hidden] { display: none !important; }
.modo-vista.is-off {
  opacity: 0.42;
}
.modo-vista-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--surface);
  color: var(--navy);
  min-height: 36px;
}
.modo-vista-btn + .modo-vista-btn { border-left: 2px solid var(--navy); }
.modo-vista-btn .ico { width: 16px; height: 16px; }
.modo-vista-btn:hover { background: var(--surface3); }
.modo-vista-btn.on {
  background: var(--navy);
  color: #fff;
}
.modo-vista-btn.on:hover { background: var(--navy); filter: brightness(1.08); }
.modo-vista-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.modo-vista-btn:disabled:hover { background: inherit; filter: none; }
body.tema-dark .modo-vista { border-color: var(--blue); }
body.tema-dark .modo-vista-btn { color: var(--blue2); }
body.tema-dark .modo-vista-btn + .modo-vista-btn { border-left-color: var(--blue); }
body.tema-dark .modo-vista-btn.on { background: var(--blue); color: #0b1220; }
.top-cuenta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}
.top-cuenta .modo-vista {
  margin-right: 2px;
}
.top-manual {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 7px 13px;
  border: 2px solid #2563eb;
  border-radius: 10px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #3b82f6 22%, var(--surface)) 0%, var(--surface) 55%);
  color: #1e40af;
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.1;
  text-decoration: none;
  box-shadow:
    0 0 0 0 rgba(59, 130, 246, 0.45),
    0 2px 10px rgba(37, 99, 235, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, color 0.15s ease;
  animation: top-manual-glow 1.35s ease-in-out infinite;
  isolation: isolate;
}
.top-manual::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 13px;
  border: 2px solid rgba(59, 130, 246, 0.55);
  animation: top-manual-anillo 1.35s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.top-manual .ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  animation: top-manual-ico 1.35s ease-in-out infinite;
}
.top-manual:hover {
  background:
    linear-gradient(165deg, color-mix(in srgb, #3b82f6 32%, var(--surface)) 0%, var(--surface2) 60%);
  border-color: #1d4ed8;
  color: #1e3a8a;
  animation: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28), 0 4px 16px rgba(37, 99, 235, 0.28);
}
.top-manual:hover::after,
.top-manual:hover .ico {
  animation: none;
}
.top-manual:active {
  transform: translateY(1px);
}
.top-manual-txt {
  white-space: nowrap;
}
@keyframes top-manual-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(59, 130, 246, 0.35),
      0 2px 8px rgba(37, 99, 235, 0.18);
    border-color: #2563eb;
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(59, 130, 246, 0),
      0 0 18px 4px rgba(59, 130, 246, 0.55);
    border-color: #3b82f6;
  }
}
@keyframes top-manual-anillo {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes top-manual-ico {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.85)); }
}
body.tema-dark .top-manual {
  border-color: var(--blue);
  color: #93c5fd;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--blue) 28%, var(--surface)) 0%, var(--surface) 60%);
  animation: top-manual-glow-dark 1.35s ease-in-out infinite;
}
body.tema-dark .top-manual::after {
  border-color: rgba(96, 165, 250, 0.65);
}
body.tema-dark .top-manual:hover {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--blue) 38%, var(--surface)) 0%, var(--surface2) 60%);
  color: #bfdbfe;
  animation: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3), 0 4px 18px rgba(37, 99, 235, 0.35);
}
@keyframes top-manual-glow-dark {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(96, 165, 250, 0.35),
      0 2px 10px rgba(37, 99, 235, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(96, 165, 250, 0),
      0 0 20px 5px rgba(96, 165, 250, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .top-manual,
  .top-manual::after,
  .top-manual .ico,
  body.tema-dark .top-manual {
    animation: none !important;
  }
}
@media (max-width: 980px) {
  .top-manual-txt { display: none; }
  .top-manual {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}

/* Pista primer uso — Explícame esto */
.rpm-explicame-tip {
  position: fixed;
  z-index: 10070;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 39, 68, 0.18);
  color: #1f2937;
  font-size: 0.86rem;
  line-height: 1.35;
}
.rpm-explicame-tip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--tip-arrow-x, 50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  transform: translateX(-50%) rotate(45deg);
}
.rpm-explicame-tip-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rpm-explicame-tip-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #1e40af;
}
.rpm-explicame-tip-txt {
  margin: 0;
  color: #334155;
}
.rpm-explicame-tip-txt strong {
  color: #0f2744;
  font-weight: 800;
}
.rpm-explicame-tip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.rpm-explicame-tip-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #475569;
  cursor: pointer;
  user-select: none;
}
.rpm-explicame-tip-check input {
  width: 14px;
  height: 14px;
  accent-color: #2563eb;
}
.rpm-explicame-tip-ok {
  border: 0;
  border-radius: 8px;
  padding: 5px 10px;
  background: #0f2744;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.rpm-explicame-tip-ok:hover { filter: brightness(1.08); }
body.tema-dark .rpm-explicame-tip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
body.tema-dark .rpm-explicame-tip::before {
  background: var(--surface);
  border-color: var(--border);
}
body.tema-dark .rpm-explicame-tip-txt { color: var(--text2); }
body.tema-dark .rpm-explicame-tip-txt strong { color: var(--text); }
body.tema-dark .rpm-explicame-tip-foot { border-top-color: var(--border); }
body.tema-dark .rpm-explicame-tip-ok { background: var(--blue); color: #0b1220; }

/* Visor contextual del manual — siempre cabe en la pantalla */
.rpm-manual-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}
.rpm-manual-card {
  box-sizing: border-box;
  width: min(1280px, calc(100vw - 32px));
  height: min(94vh, calc(100vh - 32px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  margin: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15, 39, 68, 0.28);
  overflow: hidden;
  flex-shrink: 0;
}
.rpm-manual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background:
    linear-gradient(180deg, color-mix(in srgb, #3b82f6 10%, var(--surface, #fff)), var(--surface, #fff));
  flex-shrink: 0;
  min-width: 0;
}
.rpm-manual-head-txt {
  min-width: 0;
  flex: 1 1 auto;
}
.rpm-manual-kicker {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue, #2563eb);
}
.rpm-manual-tit {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--navy, #0f2744);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rpm-manual-meta {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text3, #64748b);
}
.rpm-manual-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rpm-manual-x {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--surface2, #f8fafc);
  color: var(--text, #1f2937);
  font-size: 1rem;
  cursor: pointer;
}
.rpm-manual-x:hover { background: var(--surface3, #eef2f7); }
.rpm-manual-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #3c4043;
  min-height: 0;
  height: 100%;
}
.rpm-manual-hint {
  margin: 0;
  padding: 7px 14px 8px;
  font-size: 0.76rem;
  color: var(--text3, #64748b);
  border-top: 1px solid var(--border, #e2e8f0);
  background: var(--surface2, #f8fafc);
  flex-shrink: 0;
}
.rpm-manual-hint b { color: var(--text, #1f2937); }
/* No bloquea el scroll de la app detrás */
body.rpm-manual-open { overflow: auto; }
body.tema-dark .rpm-manual-card { background: var(--surface); }
body.tema-dark .rpm-manual-tit { color: var(--text); }
@media (max-width: 900px) {
  .rpm-manual-modal {
    padding: 10px;
    align-items: stretch;
  }
  .rpm-manual-card {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 12px;
  }
}
@media (max-width: 720px) {
  .rpm-manual-modal { padding: 8px; }
  .rpm-manual-card {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .rpm-manual-head { flex-direction: column; }
  .rpm-manual-actions { width: 100%; justify-content: flex-end; }
}
@supports not (height: 100dvh) {
  .rpm-manual-card {
    max-height: calc(100vh - 24px);
  }
  @media (max-width: 900px) {
    .rpm-manual-card {
      height: calc(100vh - 20px);
      max-height: calc(100vh - 20px);
    }
  }
  @media (max-width: 720px) {
    .rpm-manual-card {
      height: calc(100vh - 16px);
      max-height: calc(100vh - 16px);
    }
  }
}

.top-ico {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.top-ico:hover { background: var(--surface3); }
.top-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}
.top-user { position: relative; }
.pos-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(79, 142, 247, 0.2);
  color: var(--blue2);
  border: 1px solid rgba(79, 142, 247, 0.35);
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  animation: avatar-pulse-blue 2.2s ease-in-out infinite;
}
.pos-user-avatar--foto {
  background: var(--surface2);
  animation: none;
}
.pos-user-avatar--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
@keyframes avatar-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 142, 247, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(79, 142, 247, 0); }
}
.user-menu-popup {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 500;
  overflow: hidden;
}
.user-menu-popup[hidden] { display: none !important; }
.user-menu-header { padding: 12px 14px 10px; }
.user-menu-nombre {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-rol {
  font-size: 0.6875rem;
  color: var(--text2);
  font-family: ui-monospace, Consolas, monospace;
  margin-top: 2px;
}
.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
}
.user-menu-item:hover { background: var(--surface2); }
.user-menu-item--danger { color: var(--red); }
.user-menu-item--danger:hover { background: rgba(248, 113, 113, 0.1); }
.cla-modal {
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
  padding: 16px 18px 14px;
}
.cla-modal h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
}
.cla-modal .f { margin: 0 0 10px; }
.cla-err {
  display: none;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: var(--red);
  font-size: 0.8125rem;
}
.cla-err.on { display: block; }
.cla-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.usr-acc-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.usr-acc-lab {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.usr-acc-val {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue2);
}
.usr-acc-hint { font-size: 0.6875rem; color: var(--text3); margin-top: 2px; }
.usr-acc-fila { margin-bottom: 10px; }
.usr-acc-fila:last-child { margin-bottom: 0; }
.usr-acc-btns { display: flex; gap: 4px; justify-content: flex-end; }
.busca { display: flex; gap: 8px; flex: 1; max-width: 520px; }
.busca input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.cli-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cli-busca {
  flex: 1 1 280px;
  max-width: 520px;
  margin: 0;
}
.app { padding: 18px 22px 28px; width: 100%; }
.app-foot {
  margin-top: auto;
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-foot .ico { color: var(--icon); }

/* ——— Controls ——— */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.btn:hover { background: var(--surface3); }
.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}
.btn-primary:hover { filter: brightness(1.08); background: var(--navy); }
.btn-accent {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn-accent:hover {
  filter: brightness(1.08);
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
body.tema-dark .btn-accent:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn-ghost { background: transparent; }
.btn-listo {
  background: #059669;
  border-color: #047857;
  color: #fff;
  font-weight: 800;
}
.btn-listo:hover { background: #047857; filter: none; }
.btn-listo.is-ok {
  background: #047857;
  border-color: #065f46;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.22);
}
body.tema-dark .btn-listo { background: #059669; color: #ecfdf5; }
body.tema-dark .btn-listo.is-ok { background: #047857; }
.btn-sm { padding: 6px 10px; font-size: 0.8125rem; }
.orden-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 4px;
}
.orden-nav-btn {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--surface);
  border: 1.5px solid var(--border2);
  box-shadow: 0 1px 2px rgba(15, 39, 68, 0.08);
}
.orden-nav-btn:hover {
  background: var(--surface3);
  border-color: var(--navy);
  color: var(--navy);
}
body.tema-dark .orden-nav-btn {
  color: var(--blue2);
  border-color: var(--border2);
  box-shadow: none;
}
body.tema-dark .orden-nav-btn:hover {
  background: var(--surface2);
  border-color: var(--blue);
  color: var(--blue2);
}
.btn-block { width: 100%; }
.btn-warn {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}
body.tema-dark .btn-warn { background: rgba(251, 191, 36, 0.14); color: #fde68a; border-color: rgba(251, 191, 36, 0.28); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 12px 14px;
}
.kpi-ico { color: var(--icon); font-size: 1.15rem; margin-bottom: 4px; }
.kpi b { display: block; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.1; color: var(--brand); }
.kpi span { color: var(--text3); font-size: 0.75rem; font-weight: 600; }

.card, .bloque {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.bloque-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}
.bloque-head .bloque-tit { margin: 0; flex: 1; min-width: 0; }
.bloque-st {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface3);
  color: var(--text3);
  white-space: nowrap;
}
.panel-ok {
  border-color: #059669;
  background: rgba(16, 185, 129, 0.10);
  box-shadow: inset 4px 0 0 0 #10b981;
}
.panel-ok .bloque-tit { color: #047857; }
.panel-ok .bloque-st {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}
body.tema-dark .panel-ok {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.75);
  box-shadow: inset 4px 0 0 0 #34d399;
}
body.tema-dark .panel-ok .bloque-tit,
body.tema-dark .panel-ok .bloque-st { color: #6ee7b7; }
.bloque-tit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bloque-tit svg { width: 18px; height: 18px; }
.bloque-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bloque-ico .ico {
  width: 18px;
  height: 18px;
  vertical-align: 0;
}
.bloque-tit-txt { line-height: 1.25; }
.panel-ok .bloque-ico {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(5, 150, 105, 0.35);
  color: #047857;
}
body.tema-dark .bloque-ico {
  color: var(--blue2);
  background: var(--surface2);
}
body.tema-dark .panel-ok .bloque-ico {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.4);
}
h2 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; }
h3 { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 700; }
.muted { color: var(--text2); font-size: 0.875rem; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

label.f {
  display: block;
  position: relative;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  min-width: 0;
  max-width: 100%;
}
.e-por-fijo { margin: 0; }
.e-por-lab {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.e-por-fijo strong {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
}
.cat-sug {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 240px;
  overflow: auto;
  box-shadow: var(--shadow);
}
.cat-sug button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.cat-sug button:hover { background: var(--surface2); }
.cat-sug b { display: block; font-size: 0.85rem; color: var(--text); }
.cat-sug small { display: block; margin-top: 2px; color: var(--text2); font-size: 0.72rem; font-weight: 500; }
label.f input[type="checkbox"],
label.f input[type="radio"] {
  width: auto;
  margin-top: 0;
  padding: 0;
}
label.f input,
label.f select,
label.f textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
::placeholder { color: var(--text3); opacity: 1; }
body.tema-dark ::placeholder { color: #b8b8d6; }
label.f input:focus,
label.f select:focus,
label.f textarea:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: var(--focus);
}
.req { color: var(--red); }

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th {
  color: var(--text3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.click { cursor: pointer; }
.click:hover { background: var(--surface2); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #dbeafe;
  color: #1e3a8a;
}
.chip.ok { background: #d1fae5; color: #065f46; }
.chip.warn { background: #fef3c7; color: #92400e; }
.chip.bad { background: #fee2e2; color: #991b1b; }
body.tema-dark .chip { background: rgba(79, 142, 247, 0.16); color: var(--blue2); }
body.tema-dark .chip.ok { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
body.tema-dark .chip.warn { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
body.tema-dark .chip.bad { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }

.help {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  color: var(--text2);
  margin: 0 0 14px;
  font-size: 0.8125rem;
}

.toast { display: none; }

.notif-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
  padding: 14px 16px;
  max-width: 380px;
  min-width: 280px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s, transform 0.4s;
}
.notif-toast-in { opacity: 1; transform: translateY(0); }
.notif-toast-out { opacity: 0; transform: translateY(12px); }
.notif-toast-row { display: flex; align-items: flex-start; gap: 12px; }
.notif-toast-bar {
  width: 4px;
  min-height: 44px;
  border-radius: 4px;
  flex-shrink: 0;
}
.notif-toast-body { flex: 1; min-width: 0; }
.notif-toast-tit {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.notif-toast-msg {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.4;
}
.notif-toast-x {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}
.notif-toast-urgente { animation: notif-toast-pulse 1.6s ease-in-out infinite; }
@keyframes notif-toast-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
.notif-toast-countdown {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #ff5c5c, #ffb347);
  animation-name: notif-toast-bar;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  border-radius: 0 0 10px 10px;
}
@keyframes notif-toast-bar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
body.tema-dark .notif-toast { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); }

.kb-vista-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.kb-vista-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}
.kb-vista-badge--tabla {
  background: rgba(79, 142, 247, 0.12);
  color: var(--blue2, #4f8ef7);
}
.kb-vista-badge--kanban {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
body.tema-dark .kb-vista-badge--kanban { color: #a78bfa; }
.kb-vista-toggle {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}
.kb-vista-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.kb-vista-btn.on {
  background: var(--text);
  color: var(--bg, #fff);
  font-weight: 600;
}
body.tema-dark .kb-vista-btn.on {
  background: #e2e8f0;
  color: #0f172a;
}
.kb-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.kb-tab {
  position: relative;
  border: none;
  background: transparent;
  color: var(--text2);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.kb-tab.on {
  background: var(--blue, #2563eb);
  color: #fff;
}
.kb-tab-cnt {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: ui-monospace, 'DM Mono', monospace;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.kb-tab-cnt--blue { background: #378add; }
.kb-tab-cnt--teal { background: #0f766e; }
.kb-tab-cnt--orange { background: #ef9f27; }
.kb-tab-cnt--green { background: #34d399; color: #0a0a0f; }
.kb-tab-cnt--gray { background: #64748b; }
@keyframes kb-tab-parpadeo {
  0%, 100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1);
  }
  50% {
    background: rgba(37, 99, 235, 0.28);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
    transform: scale(1.04);
  }
}
@keyframes kb-tab-parpadeo-on {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    filter: brightness(1.2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
  }
}
.kb-tab.kb-tab--hallazgo {
  animation: kb-tab-parpadeo 0.65s ease-in-out 5;
}
.kb-tab.kb-tab--hallazgo.on {
  animation: kb-tab-parpadeo-on 0.65s ease-in-out 5;
}
@keyframes kb-fila-parpadeo {
  0%, 100% { background: transparent; }
  50% { background: rgba(37, 99, 235, 0.16); }
}
.kb-tabla tbody tr.kb-fila--hallazgo td {
  animation: kb-fila-parpadeo 0.65s ease-in-out 5;
}
body.tema-dark .kb-tab.kb-tab--hallazgo:not(.on) {
  animation-name: kb-tab-parpadeo-dark;
}
@keyframes kb-tab-parpadeo-dark {
  0%, 100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1);
  }
  50% {
    background: rgba(79, 142, 247, 0.32);
    box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.45);
    transform: scale(1.04);
  }
}
body.tema-dark .kb-tabla tbody tr.kb-fila--hallazgo td {
  animation-name: kb-fila-parpadeo-dark;
}
@keyframes kb-fila-parpadeo-dark {
  0%, 100% { background: transparent; }
  50% { background: rgba(79, 142, 247, 0.2); }
}
.kb-tabla-wrap { overflow-x: auto; margin-bottom: 8px; }
.kb-tabla { width: 100%; border-collapse: collapse; }
.kb-tabla th,
.kb-tabla td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  vertical-align: middle;
}
.kb-tabla th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text2);
  font-weight: 600;
}
.kb-tabla tbody tr.click { cursor: pointer; }
.kb-tabla tbody tr.click:hover td { background: var(--surface2); }
.kb-td-placa {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.kb-th-cobro,
.kb-td-cobro {
  text-align: right;
  white-space: nowrap;
  min-width: 7.5rem;
}
.kb-cobro-monto {
  font-family: ui-monospace, 'DM Mono', Consolas, monospace;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
}
.kb-cobro-sin {
  font-weight: 800;
  font-size: 0.82rem;
  color: #059669;
}
.kb-cobro-ok {
  font-weight: 800;
  font-size: 0.82rem;
  color: #059669;
}
.kb-cobro-vacio {
  color: var(--text3);
  font-size: 0.85rem;
}
.kb-cobro-sub {
  font-size: 0.65rem;
  color: var(--text3);
  margin-top: 3px;
  font-weight: 600;
}
.kb-pendiente-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #059669 35%, var(--border));
  background: color-mix(in srgb, #059669 10%, var(--surface));
}
.kb-pendiente-izq {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kb-pendiente-izq strong {
  font-size: 0.9rem;
  color: var(--text);
}
.kb-pendiente-der {
  text-align: right;
}
.kb-pendiente-lab {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text2);
  text-transform: uppercase;
}
.kb-pendiente-total {
  display: block;
  font-family: ui-monospace, 'DM Mono', Consolas, monospace;
  font-size: 1.45rem;
  font-weight: 800;
  color: #059669;
  line-height: 1.15;
}
body.tema-dark .kb-cobro-sin,
body.tema-dark .kb-cobro-ok,
body.tema-dark .kb-pendiente-total { color: #34d399; }
body.tema-dark .kb-pendiente-bar {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.1);
}
.kb-ord-num { font-weight: 700; }
.kb-ayuda { margin: 0 0 10px; }
.kb-filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
@keyframes kb-busca-parpadeo {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--blue, #2563eb);
    border-color: var(--blue, #2563eb);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.55);
    border-color: #60a5fa;
  }
}
.kb-busca--activa input,
input.kb-busca-inp--activa {
  animation: kb-busca-parpadeo 1.1s ease-in-out infinite;
  border-color: var(--blue, #2563eb);
  background: color-mix(in srgb, var(--blue, #2563eb) 10%, var(--surface2, var(--surface)));
}
.kb-busca--activa {
  color: var(--blue, #2563eb);
  font-weight: 700;
}
body.tema-dark .kb-busca--activa input,
body.tema-dark input.kb-busca-inp--activa {
  animation-name: kb-busca-parpadeo-dark;
  background: rgba(79, 142, 247, 0.14);
}
@keyframes kb-busca-parpadeo-dark {
  0%, 100% {
    box-shadow: 0 0 0 1px #4f8ef7;
    border-color: #4f8ef7;
  }
  50% {
    box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.55);
    border-color: #93c5fd;
  }
}
.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(168px, 1fr));
  gap: 10px;
}
.col {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-top-width: 4px;
  border-radius: 12px;
  padding: 10px;
  min-height: 220px;
}
.col-recibido { border-top-color: #2563eb; }
.col-diagnostico { border-top-color: #0f766e; }
.col-en_reparacion { border-top-color: #d97706; }
.col-listo { border-top-color: #059669; }
.col-entregado { border-top-color: #64748b; }
.col.drop-on { outline: 2px dashed var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--surface2)); }
.col h4 {
  margin: 0 0 8px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
}
.oc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 11px;
  margin-bottom: 8px;
  cursor: pointer;
}
.oc:hover { border-color: var(--blue); }
.oc b { display: block; font-size: 0.8rem; margin-bottom: 2px; color: var(--brand); }
.oc-ico { color: var(--icon); margin-right: 6px; }
.oc-kb { cursor: grab; }
.oc-kb.dragging { opacity: 0.45; }
.oc-kb-ok,
.oc-kb-ok:hover {
  border-color: #059669;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.18);
}
.oc-kb-no,
.oc-kb-no:hover {
  border-color: #dc2626;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.16);
}
body.tema-dark .oc-kb-ok,
body.tema-dark .oc-kb-ok:hover { border-color: #34d399; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.22); }
body.tema-dark .oc-kb-no,
body.tema-dark .oc-kb-no:hover { border-color: #f87171; box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.22); }
.oc-kb .chip { margin-top: 6px; }
.oc-kb { overflow: visible; }
.oc-kb .ord-fotos-wrap { margin-top: 6px; }
.oc-kb .ord-fotos-chip {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 0.72rem;
}
.oc-kb-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.oc-kb-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.oc-kb-tipo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oc-kb-tipo .oc-kb-ico {
  width: 18px;
  height: 18px;
  display: block;
}
body.tema-dark .oc-kb-tipo {
  color: var(--blue2);
  background: var(--surface2);
}
.oc-placa { font-size: 0.95rem; letter-spacing: 0.03em; }
.oc-vin { font-size: 0.72rem; letter-spacing: 0.02em; }
.oc-modelo { font-weight: 600; font-size: 0.8125rem; margin: 2px 0 4px; }
.oc-kb-mid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
  min-width: 0;
}
.oc-kb-info {
  flex: 1 1 auto;
  min-width: 0;
}
.oc-kb-info .oc-modelo { margin: 2px 0 2px; }
.oc-kb-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
  margin-top: 2px;
  cursor: zoom-in;
  padding: 0;
}
.oc-kb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.oc-mec { font-size: 0.75rem; }
.kb-time {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 700;
}
.kb-time.ok { background: color-mix(in srgb, #059669 18%, var(--surface)); color: #047857; }
.kb-time.warn { background: color-mix(in srgb, #d97706 18%, var(--surface)); color: #b45309; }
.kb-time.late { background: color-mix(in srgb, #dc2626 16%, var(--surface)); color: #b91c1c; }
body.tema-dark .kb-time.ok { color: #6ee7b7; }
body.tema-dark .kb-time.warn { color: #fbbf24; }
body.tema-dark .kb-time.late { color: #fca5a5; }
.kb-espera { margin-top: 4px; font-size: 0.7rem; font-weight: 700; color: #b45309; }
.kb-falta { margin-top: 6px; font-size: 0.7rem; font-weight: 700; color: #b45309; line-height: 1.3; }
.campo-falta {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
  animation: campo-falta-pulse 0.7s ease 2;
}
.check-term.campo-falta {
  outline: 2px solid #dc2626;
  border-radius: 8px;
  padding: 4px 6px;
}
@keyframes campo-falta-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.32); }
}
.kb-mover { margin-top: 8px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); }
.kb-mover select { margin-top: 4px; font-size: 0.75rem; font-weight: 600; }

.fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.foto-slot {
  aspect-ratio: 1;
  border: 1.5px dashed var(--border2);
  border-radius: 10px;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text3);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 8px;
}
.foto-slot svg { width: 22px; height: 22px; }
.foto-slot { position: relative; overflow: hidden; }
.foto-slot-ok { padding: 0; border-style: solid; }
.foto-slot-ok img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-slot-lbl {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(10, 16, 32, 0.55);
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 6px;
}
.foto-quitar {
  position: absolute;
  top: 4px; right: 4px;
  border: 0;
  background: rgba(255,255,255,0.9);
  color: #1a1a28;
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  z-index: 1;
}
.foto-ph { font-size: 1.4rem; line-height: 1; color: var(--text3); }
.foto-drop {
  border: 1.5px dashed var(--border2);
  border-radius: 12px;
  background: var(--surface2);
  padding: 18px 14px;
  text-align: center;
}
.foto-drop.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface2)); }
.foto-aviso { margin-top: 10px; font-size: 0.84rem; font-weight: 600; color: #c2410c; }
.foto-aviso.ok { color: #047857; }
body.tema-dark .foto-aviso { color: #fdba74; }
body.tema-dark .foto-aviso.ok { color: #6ee7b7; }

.orden-fotos-camera-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 10, 18, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.orden-fotos-camera-card {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.orden-fotos-camera-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.orden-fotos-video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 10px;
  object-fit: cover;
}
.orden-fotos-camera-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}

.tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.tabs button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text2);
}
.tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab-pane[hidden] { display: none !important; }
.prog-ficha[hidden] { display: none !important; }
#paso-detalle { margin-top: 0; }

.ficha-head {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: start;
}
.chat { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.bubble {
  background: var(--surface2);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.bubble small { color: var(--text3); font-size: 0.75rem; }

.pasos {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--text3);
  font-size: 0.75rem;
  font-weight: 600;
}
.paso {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.paso.on { background: var(--navy); border-color: var(--navy); color: #fff; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid5 { grid-template-columns: 1fr 1fr; }
  .ficha-head { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body.app-body { flex-direction: column; }
  .side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
  .brand { padding: 0; min-width: 112px; max-width: 150px; }
  .brand-logo { min-height: 64px; max-height: 80px; padding: 6px 8px; }
  .brand-logo img { max-height: 64px; }
  .side nav { flex-direction: row; flex-wrap: wrap; margin: 0; flex: 1; }
  .side-foot { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: 8px; }
  .side-marca { display: none; }
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-filtros { grid-template-columns: 1fr; }
  .grid2, .fotos { grid-template-columns: 1fr 1fr; }
  .top { flex-wrap: wrap; }
  .app { padding: 14px; }
}
@media (max-width: 520px) {
  .kpis, .grid2, .fotos, .kanban { grid-template-columns: 1fr; }
}

/* ——— Tablet / piso mecánico ——— */
body.vista-tablet .side,
body.vista-tablet .busca,
body.vista-tablet .top > [data-go="nueva"],
body.vista-tablet #top-btn-usuarios,
body.vista-tablet #top-btn-ajustes,
body.vista-tablet .app-foot { display: none !important; }
body.vista-tablet .top h1 { font-size: 0.95rem; }
body.vista-tablet .tb-wrap { max-width: none; }

@media (min-width: 1100px) {
  body.vista-tablet.app-body {
    background: #0c0d12;
    justify-content: center;
  }
  body.vista-tablet .main {
    background: transparent;
    align-items: center;
    padding: 12px 16px 24px;
  }
  body.vista-tablet .top {
    width: min(820px, 92vw);
    background: transparent;
    border: 0;
    padding: 6px 8px 10px;
    justify-content: center;
    gap: 12px;
  }
  body.vista-tablet .top h1 { color: #c0c0e0; }
  body.vista-tablet .app {
    width: min(834px, calc(100vw - 48px));
    height: min(92vh, 1180px);
    margin: 0 auto;
    padding: 18px 16px 22px;
    background: var(--bg);
    border: 14px solid #1c1d26;
    border-radius: 36px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), inset 0 0 0 2px #2d2e3a;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.vista-tablet .app::after {
    content: "";
    display: block;
    width: 96px;
    height: 5px;
    margin: 14px auto 0;
    border-radius: 99px;
    background: #3a3b48;
  }
}

@media (max-width: 1099px) {
  body.vista-tablet.app-body { flex-direction: column; }
  body.vista-tablet .main { min-height: 100vh; }
  body.vista-tablet .top {
    padding: 8px 12px;
    gap: 8px;
  }
  body.vista-tablet .app { padding: 12px 14px 28px; }
}

/* Menús del top: los oculta el JS según permisos (no por cargo). */
body.rol-mecanico #top-btn-chat,
body.vista-tablet #top-btn-chat {
  display: inline-flex !important;
  visibility: visible !important;
}
.tb-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tb-nav-row .tb-back { margin-bottom: 0; }
.tb-chat-btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 14px;
  font-weight: 700;
}
/* Lateral: visibilidad por permisos en JS. Solo tipografía más cómoda en tablet. */
body.rol-mecanico .side nav button {
  min-height: 48px;
  font-size: 1rem;
}

.tb-wrap { max-width: 720px; margin: 0 auto; }
.tb-lead { color: var(--text2); font-size: 1rem; margin: 0 0 14px; line-height: 1.4; }
.tb-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-bottom: 12px;
  min-height: 96px;
  cursor: pointer;
}
.tb-card:hover, .tb-card:focus-visible { border-color: var(--blue); box-shadow: var(--focus); }
.tb-placa {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: var(--brand);
}
.tb-meta { color: var(--text2); font-size: 1.02rem; }
.tb-motivo { color: var(--text3); font-size: 0.95rem; margin: 4px 0 0; }
.tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.tb-asig { font-size: 0.8rem; font-weight: 700; color: var(--green); }
.tb-asig-off { color: var(--text3); }
.tb-vacio, .tb-vacio-sm {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 22px 16px;
  color: var(--text3);
  text-align: center;
}
.tb-vacio-sm { padding: 14px; list-style: none; }
.tb-back {
  background: none;
  border: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 8px 0 12px;
  min-height: 44px;
}
.tb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.tb-mod {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  margin: 14px 0;
}
.tb-mod h3 { margin: 0 0 4px; font-size: 1.2rem; }
.tb-hint { color: var(--text3); font-size: 0.95rem; margin: 0 0 12px; }
.tb-banner {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 1.05rem;
}
body.tema-dark .tb-banner { background: rgba(251, 191, 36, 0.14); color: #fde68a; border-color: rgba(251, 191, 36, 0.28); }
.tb-btn {
  min-height: 60px;
  width: 100%;
  font-size: 1.12rem;
  border-radius: 12px;
  margin-top: 10px;
}
.tb-btn-sec { background: var(--surface2); }
.tb-lab { display: block; font-weight: 700; font-size: 0.95rem; margin: 10px 0 6px; }
.tb-in {
  width: 100%;
  min-height: 56px;
  font-size: 1.15rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}
.tb-in-num { text-align: center; font-weight: 700; }
.tb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tb-step { display: flex; align-items: center; gap: 8px; }
.tb-step .tb-in { flex: 1; }
.tb-step-btn {
  min-width: 56px;
  min-height: 56px;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text);
}
.tb-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.tb-sug {
  border: 1px solid var(--border);
  background: var(--surface3);
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.95rem;
}
.tb-sug small { display: block; color: var(--text3); font-size: 0.75rem; }
.tb-reps { list-style: none; padding: 12px 0 0; margin: 8px 0 0; }
.tb-rep {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 1.02rem;
}
.tb-rep small { display: block; color: var(--text3); font-weight: 500; }
.tb-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.tb-tag {
  min-height: 56px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface2);
  font-weight: 700;
  font-size: 1.02rem;
}
.tb-tag.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.tb-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.tb-foto {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
}
.tb-foto img { width: 100%; height: 140px; object-fit: cover; display: block; }
.tb-foto span { display: block; padding: 8px 10px; font-size: 0.85rem; font-weight: 700; color: var(--text2); }

@media (max-width: 560px) {
  .tb-grid2 { grid-template-columns: 1fr; }
  .tb-placa { font-size: 1.55rem; }
  .app { padding: 12px; }
}

.kb-plazo {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #c2410c;
}
body.tema-dark .kb-plazo { color: #fdba74; }
.plazo-box {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  border-radius: 10px;
}
.plazo-fecha { margin: 0 0 4px; }
.plazo-aviso { margin: 0; font-size: 0.8rem; color: #9a3412; line-height: 1.35; }
.plazo-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; align-items: end; }
.plazo-edit .row { grid-column: 1 / -1; }
@media (max-width: 700px) { .plazo-edit { grid-template-columns: 1fr; } }
body.tema-dark .plazo-box { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); }
body.tema-dark .plazo-aviso { color: #fde68a; }
.cot-plazo { margin: 10px 0; }
.kb-cot {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
}
body.tema-dark .kb-cot { color: var(--blue2); }

.prog-quien {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.cot-espera, .cot-cliente {
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  line-height: 1.4;
}
.cot-espera {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.cot-cliente {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.cot-cliente-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.cot-cliente-no {
  background: #fef2f2;
  border-color: #fecaca;
}
.cot-espera strong, .cot-cliente strong { display: block; margin-bottom: 6px; }
.cot-espera p, .cot-cliente p { margin: 0; color: var(--text2); font-size: 0.92rem; }
.cot-resp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cot-precio-tit {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
body.tema-dark .cot-espera { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); }
body.tema-dark .cot-cliente { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.28); }
body.tema-dark .cot-cliente-ok { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.28); }
body.tema-dark .cot-cliente-no { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.28); }
.cot-lead, .cot-hint { color: var(--text2); font-size: 0.9rem; margin: 0 0 12px; line-height: 1.4; }
.cot-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cot-tab {
  min-height: 40px;
  min-width: 56px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-weight: 700;
}
.cot-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cot-lock {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
}
.cot-lock-note { color: var(--text2); font-size: 0.9rem; }
.cot-nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.cot-nums span { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; }
.cot-nums b { font-size: 1.05rem; color: var(--brand); }
.cot-leer {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
body.tema-dark .cot-leer { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.28); }
.cot-leer strong { display: block; margin-bottom: 6px; }
.cot-leer p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.4; }
.cot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.cot-mod-min .cot-espera, .cot-mod-min .cot-cliente { padding: 8px 10px; margin: 0 0 8px; }
.cot-mod-min .cot-espera strong, .cot-mod-min .cot-cliente strong { margin: 0; }
.cot-mod-min .cot-resp-btns { margin: 0; }
.cot-mod-min .cot-tabs { margin: 0 0 8px; }
.cot-mod-min .cot-tab { min-height: 32px; padding: 4px 10px; }
.cot-plazo { margin: 0 0 8px; }
.cot-sec-min {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
}
.cot-cierre {
  width: min(100%, 360px);
  margin: 14px 0 0;
  padding: 14px 16px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.cot-suma { margin: 0; padding: 0; border: 0; }
.cot-suma > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.84rem;
  padding: 5px 0;
}
.cot-suma span { color: var(--text2); font-weight: 600; }
.cot-suma b { font-variant-numeric: tabular-nums; font-weight: 700; }
.cot-suma-tot {
  margin-top: 6px;
  padding-top: 10px !important;
  border-top: 1px dashed var(--border);
  font-weight: 800;
}
.cot-suma-tot span { color: var(--navy); font-size: 0.86rem; }
.cot-suma-tot b { color: var(--navy); font-size: 1.15rem; }
.cot-cierre #cot-guardar {
  width: auto;
  margin-top: 14px;
}
.cot-pane-pasos > #cot-guardar {
  width: auto;
  margin-top: 4px;
}
.paso-panel .cot-plazo { margin: 0; }
.paso-panel .cot-plazo .f { margin: 0; }
.paso-panel .cot-plazo input { width: 100%; }
.paso-panel .pa-alta-min,
.paso-panel .pa-tabla,
.paso-panel #cot-pa-lista {
  width: 100%;
  min-width: 0;
}
.cot-pane-pasos .cot-leer { width: 100%; margin: 4px 0 0; }
.cot-cierre .cot-mot-lab { margin-top: 10px; }
.tab-pane-pasos.bloque {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.cot-pane-pasos:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.cot-pane-pasos .paso-paneles { width: 100%; flex: 1 1 100%; }
@media (min-width: 860px) {
  .cot-pane-pasos .paso-paneles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
  }
}
.cot-pane-pasos > .btn {
  width: auto;
  align-self: flex-start;
  margin-top: 4px;
}
.cot-mo-lista,
#cot-pa-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cot-linea,
.cot-mo-fila,
.cot-pa-fila {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--border);
}
.cot-mo-fila:last-child,
.cot-pa-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.paso-panel .cot-linea input,
.paso-panel .cot-mo-fila input,
.paso-panel .cot-pa-fila input {
  width: auto;
  min-height: 34px;
  margin: 0;
}
.cot-linea input[data-mo="desc"],
.cot-linea input[data-pa="desc"],
.cot-mo-fila input[data-mo="desc"],
.cot-pa-fila input[data-pa="desc"] {
  flex: 1 1 auto;
  min-width: 0;
}
.cot-linea-cant {
  flex: 0 0 56px;
  width: 56px;
  max-width: 56px;
}
.cot-linea-pre {
  flex: 0 0 84px;
  width: 84px;
  max-width: 84px;
}
.cot-linea .cot-imp,
.cot-mo-fila .cot-imp,
.cot-pa-fila .cot-imp {
  flex: 0 0 4.8rem;
  width: 4.8rem;
  min-width: 4.8rem;
  padding: 0;
  align-self: center;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cot-mo-x,
.cot-pa-x {
  position: static;
  flex-shrink: 0;
  min-height: 32px;
  padding: 4px 8px;
}
.cot-pa-fila .pa-badge { flex-shrink: 0; }
.cot-add-mo,
.cot-add-pa {
  align-self: flex-start;
  margin: 6px 0 0;
}
.cot-tabla-wrap {
  width: 100%;
  overflow-x: auto;
  min-width: 0;
}
.cot-tabla-wrap .cot-mini { margin: 0; }
.paso-panel-tot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
}
.paso-panel-tot span { color: var(--text2); }
.paso-panel-tot b { font-variant-numeric: tabular-nums; }
.cot-total-piso {
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cot-total-piso b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
body.tema-dark .cot-total-piso { color: #fdba74; background: var(--surface3); }
.cot-grupos {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.cot-grupo.bloque {
  margin-bottom: 0;
}
.cot-grupo .cot-plazo { margin: 0; }
.cot-grupo .cot-plazo .f { margin: 0; }
.cot-grupo .cot-plazo input { width: 100%; }
.cot-grupo .cot-cierre {
  width: 100%;
  max-width: none;
  margin-top: 12px;
  background: var(--surface2);
}
.cot-grupo #cot-guardar {
  width: auto;
  margin-top: 14px;
}
body.tema-dark .cot-cierre {
  background: var(--surface3);
  box-shadow: none;
}
body.tema-dark .cot-grupo {
  background: var(--surface2);
  box-shadow: none;
}
body.tema-dark .cot-grupo.panel-ok {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.75);
}
body.tema-dark .cot-grupo-tit { color: #fdba74; }
body.tema-dark .cot-grupo .cot-cierre { background: var(--surface3); }
body.tema-dark .cot-suma-tot span,
body.tema-dark .cot-suma-tot b { color: #fdba74; }
.pa-alta-min {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px 8px;
  min-width: 0;
  max-width: 100%;
}
.pa-alta-min .f { margin: 0; flex: 1 1 110px; min-width: 0; }
.pa-alta-min .pa-desc-wrap { flex: 2 1 160px; min-width: 0; }
.pa-alta-min .pa-inv-res { flex: 1 1 100%; min-width: 0; }
.pa-alta-min .pa-ok { min-height: 34px; }
.pa-stock-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 100%;
}
.pa-lab {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.pa-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px 8px;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}
.cot-count { display: block; margin-top: 6px; font-size: 0.78rem; font-weight: 700; color: var(--text3); }
.cot-count.ok { color: var(--green); }
.cot-meta { margin-top: 8px; }
#cot-guardar { margin-top: 12px; }
.cot-piso .cot-tab { min-height: 52px; font-size: 1.05rem; }
.cot-piso .cot-nums b { font-size: 1.15rem; }
.cot-piso textarea, .cot-piso input { min-height: 52px; font-size: 1.05rem; }

@media (max-width: 560px) {
  .cot-nums, .cot-grid { grid-template-columns: 1fr; }
}

/* ——— Caja / cobro / mostrador ——— */
.caja-lead { color: var(--text2); font-size: 0.92rem; margin: 0 0 14px; line-height: 1.4; }
.caja-desglose {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.caja-desglose > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.caja-desglose > div:first-child { border-top: 0; }
.caja-desglose span { color: var(--text2); font-size: 0.9rem; }
.caja-desglose b { font-size: 1.02rem; }
.caja-desglose .caja-saldo {
  background: var(--surface2);
  font-size: 1.05rem;
}
.caja-desglose .caja-saldo b { color: var(--navy); font-size: 1.2rem; }
body.tema-dark .caja-desglose .caja-saldo b { color: var(--blue2); }
.caja-lab { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); margin: 0 0 8px; }
.caja-mets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.caja-met {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  cursor: pointer;
  font-weight: 600;
}
.caja-met:has(input:checked) { border-color: var(--navy); background: var(--surface3); }
.caja-btn { width: 100%; min-height: 46px; margin-top: 8px; }
.caja-ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--green);
  font-weight: 600;
}
body.tema-dark .caja-ok { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.28); }
.caja-pagos { list-style: none; margin: 16px 0 0; padding: 0; }
.caja-pagos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.caja-pagos li b { margin-left: auto; }
.pos-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
}
.pos-izq, .pos-der {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.pos-der h3 { margin: 0 0 10px; }
.pos-res { display: grid; gap: 8px; margin-top: 10px; max-height: 62vh; overflow: auto; }
.pos-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  cursor: pointer;
}
.pos-item b { grid-column: 1; }
.pos-item span { grid-column: 1; color: var(--text3); font-size: 0.8rem; }
.pos-item strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pos-item:disabled { opacity: 0.45; cursor: not-allowed; }
.pos-linea {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pos-linea small { display: block; color: var(--text3); font-size: 0.78rem; }
.pos-qty { display: flex; align-items: center; gap: 6px; }
.pos-qty button {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface2); font-weight: 700;
}
.pos-x { color: var(--red); }
.pos-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0 4px; font-size: 1.05rem;
}
.pos-foot b { font-size: 1.25rem; color: var(--navy); }
body.tema-dark .pos-foot b { color: var(--blue2); }
@media (max-width: 800px) {
  .pos-wrap { grid-template-columns: 1fr; }
}
.pos-app { display: grid; gap: 12px; }
.pos-alerta {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.88rem;
}
body.tema-dark .pos-alerta { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.28); }
.pos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pos-chips button {
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
}
.pos-chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pos-item--bajo { border-color: #fdba74; }
.pos-libre {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pos-libre h4, .pos-form h4 { margin: 0 0 6px; }
.pos-libre-grid {
  display: grid;
  grid-template-columns: 1fr 72px 100px auto;
  gap: 8px;
  align-items: end;
}
.pos-cli-box { margin-bottom: 10px; }
.pos-cli-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  cursor: pointer;
}
.pos-cli-item span { color: var(--text3); font-size: 0.8rem; }
.pos-cli-ok { margin: 6px 0 0; font-size: 0.9rem; }
.pos-precio {
  width: 88px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.pos-totales { display: grid; gap: 6px; margin-top: 10px; }
.pos-totales > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
}
.pos-inv-bar, .pos-hist-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.pos-form {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.pos-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.pos-span2 { grid-column: 1 / -1; }
.pos-tbl-wrap { overflow: auto; }
.pos-tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pos-tbl th, .pos-tbl td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.pos-tbl th { color: var(--text3); font-weight: 600; font-size: 0.78rem; }
.pos-tbl tr.pos-bajo td:nth-child(4) { color: #c2410c; font-weight: 700; }
.pos-tbl tr.pos-off { opacity: 0.55; }
@media (max-width: 800px) {
  .pos-libre-grid { grid-template-columns: 1fr 1fr; }
  .pos-form-grid { grid-template-columns: 1fr; }
  .pos-span2 { grid-column: auto; }
}

.login-lead { color: var(--text2); font-size: 0.92rem; margin: 0 0 14px; line-height: 1.4; }
.login-card a { color: var(--navy); font-weight: 600; }
body.tema-dark .login-card a { color: var(--blue2); }
.lic-banner {
  margin: 0 22px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
}
.lic-banner.lic-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.lic-banner.lic-off { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
body.tema-dark .lic-banner.lic-warn { background: rgba(251,191,36,0.12); color: #fbbf24; }
body.tema-dark .lic-banner.lic-off { background: rgba(248,113,113,0.12); color: #fca5a5; }
body.lic-bloqueada [data-go="nueva"] { opacity: 0.45; pointer-events: none; }
.cfg-pasos {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--navy) 28%, var(--border));
  background: color-mix(in srgb, var(--navy) 8%, var(--surface));
}
.cfg-pasos-tit {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 4px;
}
.cfg-pasos p { margin: 0 0 8px; font-size: 0.88rem; color: var(--text2); }
.cfg-pasos ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.cfg-pasos li {
  font-size: 0.78rem;
  font-weight: 700;
}
.cfg-pasos li.ok { color: #15803d; }
.cfg-pasos li.falta { color: var(--text2); }
body.tema-dark .cfg-pasos li.ok { color: #86efac; }
.cfg-tabs { margin-bottom: 12px; }
.check-term {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0; font-size: 0.92rem; line-height: 1.4;
}
.check-term input { margin-top: 3px; }
.check-term a { color: var(--navy); font-weight: 600; }
body.tema-dark .check-term a { color: var(--blue2); }
.foto-slot-add { cursor: pointer; width: 100%; border: 1.5px dashed var(--border2); background: var(--surface2); }
.fotos-ingreso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.fig-slot--vacio {
  cursor: default;
  opacity: 0.55;
  min-height: 120px;
}
.fig-slot.rpm-foto {
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  width: 100%;
  border: 2px solid #3b82c4;
  padding: 0;
  text-align: inherit;
}
button.fig-slot.rpm-foto {
  appearance: none;
  -webkit-appearance: none;
}
.fig-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--surface2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 0;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.fig-slot--req { border: 2px solid #3b82c4; }
.fig-slot--opt { border: 2px dashed #94a3b8; }
.fig-slot--add {
  width: 100%;
  cursor: pointer;
  color: var(--navy);
  background: color-mix(in srgb, #3b82c4 6%, var(--surface2));
}
.fig-slot--opt.fig-slot--add { color: var(--text2); background: var(--surface2); }
.fig-slot--add:hover { transform: translateY(-1px); }
.fig-slot--add.on { background: color-mix(in srgb, #3b82c4 14%, var(--surface)); }
.fig-diagrama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 1;
}
.fig-diagrama svg, .fig-diagrama img, .fig-guia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fig-pista {
  position: absolute;
  left: 8px; right: 8px; top: 8px;
  z-index: 1;
  background: rgba(10, 16, 32, 0.78);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.3;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
}
.fig-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: fig-in 0.28s ease;
}
@keyframes fig-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fig-lbl {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(10, 16, 32, 0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.25;
  padding: 6px 7px;
  text-align: center;
}
.fig-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: #1a1a28;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.fig-slot--ok { border-style: solid; }
.fig-guia-btn {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.fig-tomar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 36px;
  z-index: 2;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: #1d4ed8;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}
.fig-tomar:active { transform: scale(0.98); }
.fig-acc {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 36px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.fig-acc .fig-tomar {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 1 1 auto;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}
.fig-qr {
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
}
.fig-qr:active { transform: scale(0.98); }
@media (max-width: 860px) {
  .fotos-ingreso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .fig-lbl { font-size: 0.62rem; padding: 5px 5px; }
}
.prog-ficha.paso-6:not([hidden]),
.prog-ficha.paso-7:not([hidden]) {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  width: 100%;
}
.prog-ficha.paso-6 .paso-paneles,
.prog-ficha.paso-7 .paso-paneles { flex: 1 1 100%; width: 100%; }
.prog-ficha.paso-6 > .btn,
.prog-ficha.paso-6 > .caja-ok,
.prog-ficha.paso-6 > .paso-acciones,
.prog-ficha.paso-7 > .btn,
.prog-ficha.paso-7 > .caja-ok { align-self: flex-start; }
.paso-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.fac-fiscal,
.fac-cli {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.35;
}
.fac-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0 0 8px;
}
.fac-tabla th,
.fac-tabla td {
  padding: 4px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.fac-tabla th:last-child,
.fac-tabla td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 650;
}
.fac-tabla .fac-sec td {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 0;
  padding-top: 8px;
  padding-bottom: 1px;
}
.fac-tabla .fac-det td {
  border-bottom: 1px solid var(--border);
  padding-left: 10px;
  font-weight: 500;
  color: var(--text2);
}
.fac-tabla .fac-det td:last-child { padding-left: 0; font-weight: 650; color: var(--text); }
.fac-totales { margin-bottom: 10px; }
.paso-panel[data-paso-panel="facturacion"] .caja-desglose > div { padding: 6px 10px; }
.paso-panel[data-paso-panel="facturacion"] .caja-mets { margin-bottom: 8px; }
.paso-panel .fotos-ingreso {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.paso-panel .fig-tomar { min-height: 34px; font-size: 0.8rem; }
.paso-panel .fig-qr { min-height: 34px; font-size: 0.78rem; }
.paso-panel .firma-box canvas { width: 100%; height: 110px; }
.paso-panel .firma-box img { max-width: 100%; max-height: 80px; }
.firma-box { border: 1.5px dashed var(--border2); border-radius: 10px; padding: 10px; margin: 12px 0; }
.firma-box canvas { width: 100%; height: 140px; background: #fff; border-radius: 8px; touch-action: none; }
.rep-sub { text-align: right; font-weight: 700; margin: 8px 0 0; }
.cot-mini { width: 100%; font-size: 0.88rem; margin: 8px 0; }
.cot-mini input, .cot-mini select { width: 100%; }
.cot-mini .cot-imp { white-space: nowrap; font-weight: 700; }
.ger-tarifa { width: 120px; max-width: 100%; }
.cot-datos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 10px 0; }
@media (max-width: 800px) { .cot-datos { grid-template-columns: 1fr; } }
.caja-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 10px 0; }
.caja-cards > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.caja-cards span { display: block; color: var(--text2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3px; }
.caja-cards b { display: block; font-size: 1.25rem; margin-top: 6px; }
.ger-kpis small { display: block; color: var(--text2); font-weight: 500; margin-top: 4px; }
.ger-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ger-mid .bloque:last-child { grid-column: span 1; }
@media (max-width: 900px) { .ger-mid { grid-template-columns: 1fr; } }
.ger-flujo { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.ger-flujo div { border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.ger-flujo b { display: block; font-size: 1.2rem; }
.ger-flujo span, .ger-flujo small { display: block; color: var(--text2); font-size: 0.78rem; }
@media (max-width: 800px) { .ger-flujo { grid-template-columns: 1fr 1fr; } }
.ger-gauge { font-size: 2.4rem; font-weight: 800; margin: 0; color: var(--navy); }
body.tema-dark .ger-gauge { color: var(--blue2); }
.ger-alerta { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ger-alerta.roja b { color: #b91c1c; }
.ger-alerta.naranja b { color: #c2410c; }
.ger-toolbar { justify-content: space-between; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.ger-lista { margin: 0 0 12px 18px; padding: 0; }
.ger-lista li { margin-bottom: 6px; }
.ger-bar { position: relative; height: 8px; background: var(--surface2); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.ger-bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.ger-bar i.ok { background: #047857; }
.ger-bar span { display: none; }
.ger-serie { display: flex; align-items: flex-end; gap: 4px; min-height: 140px; padding-top: 8px; overflow-x: auto; }
.ger-serie-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 18px; flex: 1; }
.ger-serie-col i { display: block; width: 100%; max-width: 22px; background: var(--blue); border-radius: 4px 4px 0 0; }
.ger-serie-col small { font-size: 0.65rem; color: var(--text3); margin-top: 4px; }
.ger-fiscal { padding: 10px 12px; border-radius: 8px; margin: 0 0 8px; font-weight: 600; }
.ger-fiscal--vigente { background: #ecfdf5; color: #166534; }
.ger-fiscal--inactivo { background: var(--surface2); color: var(--text2); }
.ger-fiscal--incompleto, .ger-fiscal--vencido { background: #fff7ed; color: #9a3412; }
body.tema-dark .ger-fiscal--vigente { background: rgba(16,185,129,0.12); color: #6ee7b7; }
body.tema-dark .ger-fiscal--incompleto, body.tema-dark .ger-fiscal--vencido { background: rgba(251,191,36,0.12); color: #fdba74; }
.ger-bitacora { max-height: 320px; overflow: auto; }
.ger-bitacora p { margin: 0 0 10px; font-size: 0.86rem; line-height: 1.4; }
.ger-inactivo td { color: var(--text3); }

/* Reportes (Gerencia) */
.rep-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rep-tab {
  padding: 9px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rep-tab.act {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--blue);
}
.rep-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.rep-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rep-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rep-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .rep-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rep-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .rep-kpis, .rep-kpis-2, .rep-kpis-3, .rep-kpis-4 { grid-template-columns: 1fr 1fr; }
}
.rep-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.rep-card-label { font-size: 0.75rem; color: var(--text2); margin-bottom: 4px; }
.rep-card-val { font-size: 1.375rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.rep-card-sub { font-size: 0.6875rem; color: var(--text3); margin-top: 2px; }
.rep-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.rep-box-head { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.rep-box-tit {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.rep-toolbar { width: 100%; }
.rep-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.rep-periodo-lab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
}
.rep-periodo-sel {
  font-size: 0.8125rem;
  padding: 6px 10px;
  min-width: 158px;
  max-width: 220px;
}
.rep-toolbar-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.rep-fechas-panel {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  font-size: 0.75rem;
  width: 100%;
}
.rep-fechas-panel .input { font-size: 0.75rem; width: 132px; }
.rep-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text2);
}
.rep-resumen-csv { margin-left: auto; }
.rep-empty { padding: 28px 16px; text-align: center; font-size: 0.8125rem; }
.rep-table-wrap { overflow: auto; }
.rep-table-tall { max-height: min(70vh, 520px); }
.rep-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.rep-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rep-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text);
}
.rep-table tr:hover td { background: var(--surface2); }
.rep-table th.num, .rep-table td.num { text-align: right; }
.rep-table .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.rep-table .rep-total td { font-weight: 700; font-size: 0.75rem; color: var(--text2); border-bottom: none; }
.rep-link { color: var(--blue2, var(--blue)); font-weight: 600; text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.rep-link:hover { text-decoration: underline; }
.rep-c-ok { color: #10b981 !important; }
.rep-c-warn { color: #f59e0b !important; }
.rep-bar {
  height: 5px;
  background: var(--surface2);
  border-radius: 4px;
  margin-top: 4px;
  overflow: hidden;
  max-width: 140px;
}
.rep-bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.rep-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 5px;
}
.rep-badge--ok { background: #ecfdf5; color: #166534; }
.rep-badge--warn { background: #fff7ed; color: #9a3412; }
.rep-badge--bad { background: #fef2f2; color: #991b1b; }
body.tema-dark .rep-badge--ok { background: rgba(16,185,129,0.15); color: #6ee7b7; }
body.tema-dark .rep-badge--warn { background: rgba(245,158,11,0.15); color: #fcd34d; }
body.tema-dark .rep-badge--bad { background: rgba(239,68,68,0.15); color: #fca5a5; }
.rep-help { font-size: 0.75rem; line-height: 1.45; margin: 0 0 14px; max-width: 720px; }

.dash-fiscal { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; border: 1px solid var(--border); font-size: 0.88rem; }
.dash-fiscal.ok { border-color: #86efac; background: #ecfdf5; color: #166534; }
.dash-fiscal.warn { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.prog {
  margin: 0 0 12px;
  padding: 16px 16px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.prog--ficha {
  padding: 18px 18px 16px;
}
.prog-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.prog-donde { font-size: 0.92rem; color: var(--text); }
.prog-donde b { color: var(--navy); }
.prog-meta {
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: 99px;
  padding: 3px 10px;
}
.prog--n1 .prog-donde b { color: #0f766e; }
.prog--n1 .prog-meta { background: #f0fdfa; color: #115e59; border-color: #99f6e4; }
.prog--n2 .prog-donde b { color: #1d4ed8; }
.prog--n2 .prog-meta { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.prog--n3 .prog-donde b { color: #6d28d9; }
.prog--n3 .prog-meta { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.prog--n4 .prog-donde b { color: #a21caf; }
.prog--n4 .prog-meta { background: #fdf4ff; color: #86198f; border-color: #f5d0fe; }
.prog--n5 .prog-donde b { color: #c2410c; }
.prog--n5 .prog-meta { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.prog--n6 .prog-donde b { color: #b45309; }
.prog--n6 .prog-meta { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.prog--n6 .prog-donde b, .prog--n7 .prog-donde b { color: #047857; }
.prog--n6 .prog-meta, .prog--n7 .prog-meta { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.prog-cuerpo { position: relative; padding: 4px 4px 0; }
.prog-rail {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 18px;
  height: 8px;
  border-radius: 99px;
  background: var(--surface3);
  z-index: 0;
}
.prog--ficha .prog-rail {
  left: 36px;
  right: 36px;
  top: 22px;
  height: 10px;
}
.prog-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #10b981 0%, #14b8a6 28%, #0ea5e9 52%, #f59e0b 78%, #ea580c 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
  transition: width 0.35s ease;
}
.prog--leyenda .prog-fill {
  background: linear-gradient(90deg, #0d9488, #2563eb, #7c3aed, #c026d3, #ea580c, #d97706, #059669, #047857);
  box-shadow: none;
}
.prog-pasos {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.prog-paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.prog-paso-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: default;
}
button.prog-paso-btn.avance-jump {
  cursor: pointer;
  text-decoration: none;
  font-weight: inherit;
  color: inherit;
}
.prog-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  background: #fff;
  color: var(--text3);
  border: 2px solid var(--border2);
  box-shadow: 0 0 0 4px var(--surface2);
}
.prog--ficha .prog-dot {
  width: 42px;
  height: 42px;
  font-size: 0.95rem;
}
.prog-lab {
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.25;
  color: var(--text3);
  max-width: 100%;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.prog-nota {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  font-size: 0.7rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--text2);
}
.prog-hecho { color: #047857; }
.prog-pend { color: #9a3412; }
.prog-meta-paso { color: var(--text3); font-size: 0.65rem; }
.prog-lab-sm { display: none; }
.prog-paso--hecha .prog-dot {
  background: #059669;
  color: #fff;
  border-color: #047857;
}
.prog-paso--hecha .prog-lab { color: #047857; font-weight: 700; }
.prog-paso--ahora .prog-dot {
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
  color: #fff;
  animation: prog-ahora-pulse 1.4s ease-in-out infinite;
}
.prog-paso--ahora .prog-lab { font-weight: 800; }
.prog-paso--ahora.prog-paso--n1 .prog-dot { background: #0d9488; border-color: #0f766e; box-shadow: 0 0 0 4px rgba(13,148,136,0.22), 0 0 0 3px var(--surface2); }
.prog-paso--ahora.prog-paso--n1 .prog-lab { color: #0f766e; }
.prog-paso--ahora.prog-paso--n2 .prog-dot { background: #2563eb; border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(37,99,235,0.22), 0 0 0 3px var(--surface2); }
.prog-paso--ahora.prog-paso--n2 .prog-lab { color: #1d4ed8; }
.prog-paso--ahora.prog-paso--n3 .prog-dot { background: #7c3aed; border-color: #6d28d9; box-shadow: 0 0 0 4px rgba(124,58,237,0.22), 0 0 0 3px var(--surface2); }
.prog-paso--ahora.prog-paso--n3 .prog-lab { color: #6d28d9; }
.prog-paso--ahora.prog-paso--n4 .prog-dot { background: #c026d3; border-color: #a21caf; box-shadow: 0 0 0 4px rgba(192,38,211,0.22), 0 0 0 3px var(--surface2); }
.prog-paso--ahora.prog-paso--n4 .prog-lab { color: #a21caf; }
.prog-paso--ahora.prog-paso--n5 .prog-dot { background: #ea580c; border-color: #c2410c; box-shadow: 0 0 0 4px rgba(234,88,12,0.22), 0 0 0 3px var(--surface2); }
.prog-paso--ahora.prog-paso--n5 .prog-lab { color: #c2410c; }
.prog-paso--ahora.prog-paso--n6 .prog-dot { background: #059669; border-color: #047857; box-shadow: 0 0 0 4px rgba(5,150,105,0.22), 0 0 0 3px var(--surface2); }
.prog-paso--ahora.prog-paso--n6 .prog-lab { color: #047857; }
.prog-paso--ahora.prog-paso--n7 .prog-dot { background: #047857; border-color: #065f46; box-shadow: 0 0 0 4px rgba(4,120,87,0.22), 0 0 0 3px var(--surface2); }
.prog-paso--ahora.prog-paso--n7 .prog-lab { color: #065f46; }
.prog-paso--sigue .prog-dot {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #3b82f6;
  animation: prog-sigue-pulse 1.15s ease-in-out infinite;
}
.prog-paso--sigue .prog-lab { color: #1d4ed8; font-weight: 700; }
.prog-paso--mapa.prog-paso--n1 .prog-dot { background: #0d9488; color: #fff; border-color: #0f766e; }
.prog-paso--mapa.prog-paso--n2 .prog-dot { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.prog-paso--mapa.prog-paso--n3 .prog-dot { background: #7c3aed; color: #fff; border-color: #6d28d9; }
.prog-paso--mapa.prog-paso--n4 .prog-dot { background: #c026d3; color: #fff; border-color: #a21caf; }
.prog-paso--mapa.prog-paso--n5 .prog-dot { background: #ea580c; color: #fff; border-color: #c2410c; }
.prog-paso--mapa.prog-paso--n6 .prog-dot { background: #059669; color: #fff; border-color: #047857; }
.prog-paso--mapa.prog-paso--n7 .prog-dot { background: #047857; color: #fff; border-color: #065f46; }
.prog-paso--mapa .prog-lab { color: var(--text2); font-weight: 600; }
@keyframes prog-ahora-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes prog-sigue-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 0 rgba(37,99,235,0.4); }
  50% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 6px rgba(37,99,235,0); }
}
@keyframes prog-visto-blink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
@keyframes prog-visto-ring {
  0%, 100% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 7px rgba(37, 99, 235, 0.65); }
  50% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 14px rgba(37, 99, 235, 0); }
}
@keyframes prog-visto-ring-ok {
  0%, 100% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 7px rgba(5, 150, 105, 0.6); }
  50% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 14px rgba(5, 150, 105, 0); }
}
@keyframes prog-visto-ring-no {
  0%, 100% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 7px rgba(220, 38, 38, 0.6); }
  50% { box-shadow: 0 0 0 3px var(--surface2), 0 0 0 14px rgba(220, 38, 38, 0); }
}
.avance { margin-top: 12px; }
.avance .prog { margin-top: 0; }
.prog--ops { padding-bottom: 12px; }
.prog--ops .prog-paso { align-items: center; }
.prog-ops-st {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--text2);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prog-paso--hecha .prog-ops-st { color: #047857; font-weight: 600; }
.prog-paso--ahora .prog-ops-st { color: inherit; font-weight: 700; }
.prog-paso--visto .prog-dot {
  animation: prog-visto-blink 0.8s ease-in-out infinite, prog-visto-ring 0.8s ease-in-out infinite;
  outline: 2px solid #2563eb;
}
.prog-paso--hecha.prog-paso--visto .prog-dot {
  animation: prog-visto-blink 0.8s ease-in-out infinite, prog-visto-ring-ok 0.8s ease-in-out infinite;
  outline-color: #059669;
}
.prog-paso--omitido.prog-paso--visto .prog-dot {
  animation: prog-visto-blink 0.8s ease-in-out infinite, prog-visto-ring-no 0.8s ease-in-out infinite;
  outline-color: #dc2626;
}
.prog-paso--ahora.prog-paso--visto .prog-dot {
  animation: prog-visto-blink 0.8s ease-in-out infinite, prog-visto-ring 0.8s ease-in-out infinite;
}
.prog-paso--visto .prog-lab {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prog-paso--visto .prog-ops-st { font-weight: 800; }
.prog-paso-sel { cursor: pointer; }
.prog-fichas { margin: 0; padding: 0; border: 0; }
.prog-ficha:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
  margin-top: 12px;
  padding: 12px 4px 0;
  border-top: 1px solid var(--border);
}
.prog-ficha:empty { display: none !important; border: 0; margin: 0; padding: 0; }
.paso-paneles {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  flex: 1 1 100%;
}
@media (min-width: 860px) {
  .paso-paneles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
  }
}
.paso-paneles-piso { margin: 8px 0 0; }
.paso-panel.bloque {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.paso-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}
.paso-panel .bloque-tit { margin: 0; flex: 1; min-width: 0; }
.paso-panel-st { display: none; }
.paso-panel select,
.paso-panel textarea,
.paso-panel input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.paso-panel textarea { min-height: 88px; flex: 1; resize: vertical; }
.paso-panel-txt {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.paso-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 0;
  width: 100%;
  flex: none;
}
body.tema-dark .paso-sep { border-top-color: var(--border2, var(--border)); }
.paso-panel-motivo {
  font-weight: 500;
  white-space: pre-wrap;
  flex: 1;
  margin-top: 2px;
}
.paso-panel-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 12px;
  margin-top: 10px;
}
.paso-panel-fila .f { margin: 0; flex: 1 1 90px; }
.paso-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  min-height: 38px;
  color: var(--text2);
  text-transform: none;
  letter-spacing: 0;
}
.paso-enviar {
  width: auto;
  min-height: 0;
  margin-top: 4px;
  align-self: flex-start;
  font-weight: 600;
  letter-spacing: 0;
}
.pa-vacio { margin: 4px 0 0; font-size: 0.78rem; }
.diag-trab { margin-top: 10px; }
.paso-panel .pa-lab { margin: 8px 0 4px; }
[data-paso-panel="diag"] textarea { min-height: 64px; }
.diag-trab-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.diag-trab-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.diag-trab-row #diag-trab-lista,
.diag-trab-row #tb-diag-trab-lista {
  flex: 1;
  min-width: 0;
}
.paso-panel .diag-trab-fila input {
  width: 100%;
  flex: 1;
  min-width: 0;
  min-height: 34px;
}
.diag-trab-x { flex-shrink: 0; min-height: 32px; padding: 4px 8px; }
#diag-trab-add, #tb-diag-trab-add {
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0;
  min-height: 34px;
  white-space: nowrap;
}
.diag-trab-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pa-sin-pre .pa-fila {
  flex-wrap: nowrap;
  gap: 8px 14px;
}
.paso-panel .pa-sin-pre .pa-desc-wrap {
  flex: 1.6 1 0;
  min-width: 0;
}
.pa-sin-pre .pa-ori-wrap {
  flex: 0 1 100px;
  min-width: 80px;
}
.pa-sin-pre .pa-prov-wrap {
  flex: 1 1 0;
  min-width: 0;
}
.pa-sin-pre .pa-cant-wrap { flex: 0 0 58px; min-width: 50px; }
.pa-sin-pre .pa-ok { flex: 0 0 auto; min-height: 32px; padding: 4px 12px; }
.pa-sin-pre .pa-fila .f input,
.pa-sin-pre .pa-fila .f select {
  padding: 6px 8px;
}
.pa-inv-cambiar { flex: 0 0 auto; min-height: 32px; }
.pa-alta-de-inv .pa-desc,
.pa-alta-de-inv .pa-ori,
.pa-alta-de-inv .pa-prov-nom,
.pa-alta-de-inv .pa-pre,
.pa-alta-de-inv .pa-inv-q,
.pa-lin-lock,
.pa-linea-inv .pa-lin-ori {
  background: var(--surface2);
  color: var(--text2);
  cursor: default;
}
.pa-lineas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
  max-width: 100%;
}
.pa-linea {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pa-linea:last-child { border-bottom: 0; padding-bottom: 0; }
.pa-linea .pa-chip-x { align-self: end; margin-bottom: 4px; }
.pa-chips {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pa-chips-lista {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.pa-chips-lista .pa-chip {
  width: 100%;
  max-width: 100%;
}
.pa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 6px 3px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
}
.pa-chip span { min-width: 0; overflow-wrap: anywhere; }
.pa-chip b { font-weight: 800; }
.pa-chip-x {
  border: 0;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0 2px;
}
.pa-chip-x:hover { color: #b91c1c; }
.prog-ficha.paso-1:not([hidden]) {
  align-items: flex-start;
  gap: 6px 8px;
  padding-top: 8px;
}
.prog-ficha.paso-1 .paso-paneles { flex: 1 1 100%; }
.prog-ficha.paso-1 > .btn {
  width: auto;
  align-self: flex-start;
}
.paso-panel--espera {
  position: relative;
}
.paso-panel--espera > *:not(.bloque-head):not(.paso-lock-msg):not(.fac-acciones) {
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}
.fac-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.fac-acciones .muted {
  flex: 1 1 100%;
  margin: 0;
}
.paso-lock-msg {
  margin: 8px 0 0;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text2);
  line-height: 1.35;
}
.paso-panel--ahora {
  border-color: var(--blue);
  box-shadow: inset 4px 0 0 0 var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}
.paso-panel--ahora .bloque-st {
  background: #fef3c7;
  color: #92400e;
}
body.tema-dark .paso-panel--ahora .bloque-st {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
}
.ing-paso-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text3);
}
.ing-paso-lock .ico { width: 22px; height: 22px; flex: 0 0 auto; }
.ing-paso-lock strong { display: block; color: var(--text2); font-size: 0.88rem; }
.ing-paso-lock p { margin: 2px 0 0; font-size: 0.8rem; }
.prog-ficha.paso-2:not([hidden]),
.prog-ficha.paso-4:not([hidden]),
.prog-ficha.paso-5:not([hidden]) {
  align-items: flex-start;
  gap: 6px 8px;
  padding-top: 8px;
}
.prog-ficha.paso-5 {
  flex-direction: column;
  width: 100%;
  align-items: stretch;
}
.prog-ficha.paso-5 .rep-ofi { width: 100%; }
.prog-ficha.paso-5 #o-ver-piso { width: auto; margin-top: 8px; }
.prog-ficha.paso-2 .paso-paneles,
.prog-ficha.paso-4 .paso-paneles { flex: 1 1 100%; }
@media (min-width: 860px) {
  .prog-ficha.paso-2 .paso-paneles {
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.16fr) minmax(0, 1.16fr);
  }
}
.prog-ficha.paso-2 [data-paso-panel="mec"] {
  padding: 12px 14px;
}
.prog-ficha.paso-2 [data-paso-panel="mec"] .paso-panel-head {
  margin-bottom: 8px;
}
.prog-ficha.paso-2 [data-paso-panel="mec"] .paso-sep {
  margin: 8px 0;
}
.prog-ficha.paso-2 [data-paso-panel="mec"] .pa-lab {
  margin: 0 0 3px;
}
.prog-ficha.paso-2 > .btn,
.prog-ficha.paso-4 > .btn,
.cot-pane-pasos > .btn {
  width: auto;
  align-self: flex-start;
}
.auth-acciones,
#auth-rechazo-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  flex: 1 1 100%;
  margin-top: 4px;
}
.auth-acciones .btn { width: auto; }
.auth-acciones[hidden],
#auth-rechazo-ops[hidden] { display: none !important; }
#auth-rechazo-ops {
  flex-direction: column;
  align-items: flex-start;
}
#auth-rechazo-ops .f { width: 100%; max-width: 520px; }
.prog-paso.prog-paso--omitido .prog-dot {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
.prog-paso.prog-paso--omitido .prog-lab { color: #b91c1c !important; font-weight: 700; }
.prog-paso.prog-paso--omitido .prog-ops-st { color: #b91c1c; font-weight: 700; }
.auth-ficha {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.auth-resumen-tit { margin: 0; font-weight: 700; font-size: 0.95rem; }
.auth-acciones .btn { min-height: 40px; min-width: 132px; }
#auth-cancel-box {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
#auth-cancel-box[hidden] { display: none !important; }
body.tema-dark .paso-panel.bloque { background: var(--surface); }
body.tema-dark .paso-panel.bloque.panel-ok,
body.tema-dark .bloque.panel-ok {
  background: rgba(52, 211, 153, 0.16);
}
.prog-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 0 100%;
}
.prog-foto {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface3);
  padding: 0;
  cursor: zoom-in;
  display: block;
}
.prog-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-slot.rpm-foto,
button.foto-slot-ok {
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.prog-res-ok, .prog-res-falta {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}
.prog-res-ok { color: #047857; }
.prog-res-falta { color: #9a3412; }
.prog-ficha-tit { display: none; }
.prog-ficha-hint {
  flex: 1 0 100%;
  margin: 0 0 2px;
  font-size: 0.8rem;
  color: var(--text2);
}
.prog-ficha-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text2);
}
.prog-ficha-lab select,
.prog-ficha-lab input {
  min-height: 36px;
  min-width: 140px;
  font-weight: 600;
  font-size: 0.86rem;
}
.prog-ficha-amp { flex: 1 1 220px; }
.prog-ficha-amp input { width: 100%; min-width: 200px; }
.prog-ficha-chk {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: 0.8rem;
  font-weight: 700;
}
.prog-ficha-nota {
  flex: 1 1 180px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text);
  align-self: center;
}
.prog-ops-ok { color: #047857; font-weight: 600; font-size: 0.8rem; align-self: center; }
.prog-ops-err { color: #b91c1c; font-size: 0.75rem; align-self: center; }
.ing-busca-res { margin-top: 10px; }
.ing-busca-tit {
  margin: 10px 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 700;
}
.ing-busca-grid,
.ing-flota {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.ing-card,
.ing-veh,
.ing-veh-nuevo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: inherit;
  cursor: pointer;
}
.ing-card:hover,
.ing-veh:hover,
.ing-veh-nuevo:hover { border-color: var(--blue); }
.ing-card strong,
.ing-veh-nom { font-weight: 700; margin: 0; color: var(--text); }
.ing-card span,
.ing-veh p { margin: 0; font-size: 0.82rem; color: var(--text2); }
.ing-veh.on,
.ing-veh-nuevo.on {
  border-color: #059669;
  box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.22);
  background: rgba(16, 185, 129, 0.08);
}
.ing-veh-acc { margin-top: 6px; font-size: 0.75rem; font-weight: 700; color: var(--blue); }
.ing-veh.on .ing-veh-acc { color: #047857; }
.ing-veh-off,
.ing-card-off {
  cursor: default;
  opacity: 0.92;
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}
.ing-veh-off:hover,
.ing-card-off:hover { border-color: #dc2626; }
.ing-veh-bad {
  margin: 6px 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #b91c1c;
}
.ing-veh-nuevo {
  margin-top: 8px;
  border-style: dashed;
  font-weight: 700;
  color: var(--blue);
}
body.tema-dark .ing-veh.on,
body.tema-dark .ing-veh-nuevo.on {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}
body.tema-dark .ing-veh-off,
body.tema-dark .ing-card-off { background: rgba(248, 113, 113, 0.1); }
body.tema-dark .ing-veh-bad { color: #fca5a5; }
.ficha-head-min { align-items: center; }
.ficha-head.ficha-orden {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.ficha-orden-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ficha-orden-top h2 { margin: 0; }
.ficha-orden-id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.ord-fotos-wrap { position: relative; }
.ord-fotos-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.ord-fotos-chip .ico { width: 15px; height: 15px; }
.ord-fotos-chip[aria-expanded="true"] {
  border-color: var(--blue);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}
.ord-fotos-ficha-bar {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 8px;
}
.ord-fotos-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: min(420px, 92vw);
  z-index: 80;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 39, 68, 0.16);
  box-sizing: border-box;
}
.ord-fotos-panel.ord-fotos-arriba {
  box-shadow: 0 -8px 28px rgba(15, 39, 68, 0.14);
}
.ord-fotos-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.ord-fotos-tab {
  flex: 1;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.ord-fotos-tab b { font-weight: 800; }
.ord-fotos-tab.on {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #93c5fd;
}
.ord-fotos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ord-fotos-thumb {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--surface3);
  cursor: pointer;
}
.ord-fotos-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-fotos-vacio { margin: 8px 2px; font-size: 0.8rem; color: var(--text3); }

/* Visor de fotos (lightbox) — estilo Microtec */
.rpm-galeria {
  position: fixed;
  inset: 0;
  z-index: 10060;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 56px;
}
.rpm-galeria-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10062;
  width: 44px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(30, 41, 59, 0.92);
  color: #e2e8f0;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: background 0.12s, transform 0.12s;
}
.rpm-galeria-nav:hover {
  background: rgba(79, 142, 247, 0.92);
  color: #fff;
  transform: translateY(-50%) scale(1.04);
}
.rpm-galeria-nav--prev { left: max(8px, env(safe-area-inset-left)); }
.rpm-galeria-nav--next { right: max(8px, env(safe-area-inset-right)); }
.rpm-galeria-box {
  position: relative;
  max-width: min(920px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rpm-galeria-ctr {
  font-size: 0.75rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.04em;
}
.rpm-galeria-hint {
  margin: 0;
  font-size: 0.6875rem;
  color: rgba(226, 232, 240, 0.75);
  text-align: center;
}
.rpm-galeria-img {
  max-width: min(920px, 94vw);
  max-height: 72vh;
  object-fit: contain;
  border-radius: 10px;
  background: #0f172a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.rpm-galeria-cap {
  margin: 0;
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  max-width: 85vw;
}
.rpm-galeria-x {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #333;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.rpm-galeria-x:hover { background: #f0f0f0; }
body.tema-dark .rpm-galeria-x {
  background: #1e293b;
  color: #e2e8f0;
}
body.rpm-galeria-open { overflow: hidden; }
@media (max-width: 640px) {
  .rpm-galeria { padding: 16px 12px 72px; }
  .rpm-galeria-nav {
    top: auto;
    bottom: 16px;
    transform: none;
    width: 48px;
    height: 48px;
  }
  .rpm-galeria-nav:hover { transform: scale(1.04); }
  .rpm-galeria-nav--prev { left: calc(50% - 58px); }
  .rpm-galeria-nav--next { right: calc(50% - 58px); left: auto; }
}

.ord-fotos-zoom {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(15, 23, 42, 0.72);
}
.ord-fotos-zoom[hidden] { display: none !important; }
.ord-fotos-zoom img {
  max-width: min(920px, 94vw);
  max-height: 78vh;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.ord-fotos-zoom-cap { margin: 0; color: #e2e8f0; font-size: 0.85rem; }
.ord-fotos-zoom-x {
  position: absolute;
  top: 14px;
  right: 16px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
body.tema-dark .ord-fotos-tab.on {
  background: rgba(79, 142, 247, 0.18);
  color: var(--blue2);
  border-color: rgba(79, 142, 247, 0.4);
}
body.tema-dark .ord-fotos-zoom-x { background: #1e293b; color: #e2e8f0; }
.ficha-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.ficha-dato {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  min-width: 0;
}
.ficha-dato h3 {
  margin: 0 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ficha-dato h3 .ico { width: 14px; height: 14px; }
.ficha-fila {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 2px 10px;
  align-items: baseline;
  font-size: 0.84rem;
  line-height: 1.4;
}
.ficha-fila span { color: var(--text3); font-weight: 600; }
.ficha-fila b { font-weight: 650; color: var(--text); word-break: break-word; }
@media (max-width: 700px) {
  .ficha-datos { grid-template-columns: 1fr; }
}
.avance-ahora { margin: 4px 0 8px; }
.avance-ahora p { margin: 0 0 4px; }
.avance-falta { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.avance-falta h4 { margin: 0 0 8px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.avance-falta ul { margin: 0; padding: 0; list-style: none; }
.avance-falta li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 8px; font-size: 0.88rem; }
.avance-jump { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 700; cursor: pointer; text-align: left; text-decoration: underline; }
.avance-ok { color: #047857; font-weight: 600; }
.avance-foto-ahora { margin: 8px 0; font-size: 0.88rem; }
.avance-foto-ahora span { color: var(--text2); }
.foto-tips { margin: 0 0 8px 16px; padding: 0; font-size: 0.82rem; color: var(--text2); }
.foto-tips li { margin-bottom: 4px; }
.foto-guia { display: grid; gap: 6px; margin: 0 0 12px; }
.foto-guia details { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface2); }
.foto-guia summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; }
@media (max-width: 1180px) {
  .prog--ops .prog-rail { display: none; }
  .prog--ops .prog-pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 8px;
  }
}
@media (max-width: 760px) {
  .prog-lab-lg { display: none; }
  .prog-lab-sm { display: block; }
  .prog-dot { width: 24px; height: 24px; font-size: 0.66rem; }
  .prog-paso--ahora .prog-dot { width: 28px; height: 28px; }
  .prog-rail { top: 11px; left: 16px; right: 16px; }
  .prog-head { flex-wrap: wrap; }
  .prog--ficha .prog-rail { display: none; }
  .prog--ficha .prog-pasos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
  }
  .prog--ficha .prog-paso-btn { align-items: center; text-align: center; flex-direction: column; }
  .prog--ficha .prog-lab, .prog--ficha .prog-nota { text-align: center; }
  .prog--ficha .prog-dot, .prog--ficha .prog-paso--ahora .prog-dot { width: 36px; height: 36px; font-size: 0.85rem; }
  .prog-ficha-lab, .prog-ficha-amp { flex: 1 1 100%; }
  .prog-ficha-amp input, .prog-ficha-lab select { width: 100%; min-width: 0; }
}
body.tema-dark .prog { background: var(--surface2); }
body.tema-dark .prog-donde b { color: #fdba74; }
body.tema-dark .prog-meta { background: rgba(251,191,36,0.14); color: #fde68a; border-color: rgba(251,191,36,0.28); }
body.tema-dark .prog-dot { background: var(--surface3); box-shadow: 0 0 0 3px var(--surface2); }
body.tema-dark .prog-paso.prog-paso--omitido .prog-dot { background: #ef4444 !important; color: #fff !important; border-color: #f87171 !important; }
body.tema-dark .prog-paso.prog-paso--omitido .prog-lab { color: #fca5a5 !important; }
body.tema-dark .prog-paso.prog-paso--omitido .prog-ops-st { color: #fca5a5; }
body.tema-dark .prog-paso--hecha .prog-lab { color: #6ee7b7; }
body.tema-dark .prog-ops-ok { color: #6ee7b7; }
body.tema-dark .prog-hecho { color: #6ee7b7; }
body.tema-dark .prog-pend { color: #fdba74; }
body.tema-dark .prog-meta-paso { color: var(--text2); }
body.tema-dark .prog-paso--sigue .prog-dot { background: rgba(96,165,250,0.18); color: #93c5fd; border-color: #60a5fa; }
body.tema-dark .prog-paso--sigue .prog-lab { color: #93c5fd; }
body.tema-dark .prog-paso--ahora.prog-paso--n1 .prog-lab,
body.tema-dark .prog-paso--ahora.prog-paso--n5 .prog-lab { color: #fdba74; }
body.tema-dark .prog-paso--ahora.prog-paso--n2 .prog-lab { color: #93c5fd; }
body.tema-dark .prog-paso--ahora.prog-paso--n3 .prog-lab,
body.tema-dark .prog-paso--ahora.prog-paso--n4 .prog-lab { color: #e9d5ff; }
body.tema-dark .prog-paso--ahora.prog-paso--n6 .prog-lab,
body.tema-dark .prog-paso--ahora.prog-paso--n7 .prog-lab { color: #6ee7b7; }
.ger-flujo { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.orden-fotos-bridge-overlay{
  position:fixed;inset:0;z-index:10050;
  background:rgba(15,23,42,0.72);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.orden-fotos-bridge-card{
  background:var(--surface,#fff);
  color:var(--text);
  border-radius:14px;max-width:400px;width:100%;
  padding:18px 20px 20px;box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.orden-fotos-bridge-card--wide{ max-width:min(92vw,820px); padding:22px 24px 24px; }
.orden-fotos-bridge-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px; }
.orden-fotos-bridge-head strong{ font-size:1.05rem;line-height:1.35; }
.orden-fotos-bridge-body{ display:grid;grid-template-columns:1fr minmax(220px,280px);gap:20px 24px;align-items:start; }
.orden-fotos-bridge-pasos{ margin:0 0 14px;padding-left:1.25rem;font-size:0.9rem;line-height:1.5; }
.orden-fotos-bridge-pasos li{ margin-bottom:8px; }
.orden-fotos-bridge-pasos-img{ display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--border);margin-bottom:10px; }
.orden-fotos-bridge-col--qr{ display:flex;flex-direction:column;align-items:center;text-align:center; }
.orden-fotos-bridge-qr-label{ margin:0 0 10px;font-size:0.95rem;font-weight:600; }
.orden-fotos-bridge-hint{ font-size:0.82rem;color:var(--text2);margin:0 0 12px;line-height:1.4; }
.orden-fotos-bridge-hint--side{ text-align:left;margin:0;font-size:0.78rem; }
.orden-fotos-bridge-hint--foot{ margin:12px 0 0; }
.orden-fotos-bridge-aviso{
  font-size:0.8rem;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;
  padding:10px 12px;margin:0 0 12px;line-height:1.4;color:#9a3412;
}
.orden-fotos-bridge-url{
  display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px;text-align:left;
}
.orden-fotos-bridge-url input{
  width:100%;font-size:0.72rem;padding:7px 8px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface2);color:var(--text);
}
.orden-fotos-bridge-qr-wrap{ display:flex;justify-content:center;min-height:260px;align-items:center; }
.orden-fotos-bridge-qr{
  display:block;width:260px;height:260px;border-radius:8px;background:#fff;padding:8px;object-fit:contain;
}
@keyframes orden-fotos-flash-green{
  0%,100%{ box-shadow:none; }
  35%{ box-shadow:0 0 0 3px rgba(34,197,94,0.7); }
}
.orden-fotos-panel--flash{ animation:orden-fotos-flash-green 0.95s ease;border-radius:12px; }
@keyframes rpm-item-flash {
  0%, 100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    background: rgba(37, 99, 235, 0.18);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
  }
}
.rpm-item-flash {
  animation: rpm-item-flash 0.55s ease-in-out 4;
  border-radius: 8px;
}
body.tema-dark .rpm-item-flash {
  animation-name: rpm-item-flash-dark;
}
@keyframes rpm-item-flash-dark {
  0%, 100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    background: rgba(79, 142, 247, 0.22);
    box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.45);
  }
}
.pa-chip.rpm-item-flash,
.diag-trab-fila.rpm-item-flash,
.cot-pa-fila.rpm-item-flash,
.cot-mo-fila.rpm-item-flash {
  outline: none;
}
@media (max-width:640px){
  .orden-fotos-bridge-body{ grid-template-columns:1fr; }
  .orden-fotos-bridge-col--qr{ order:-1; }
  .orden-fotos-bridge-hint--side{ text-align:center; }
}
.pos-crd {
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #4f46e5 28%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #4f46e5 7%, var(--surface));
}
.pos-crd-tit {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f46e5;
}
.pos-crd-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.pos-crd-prev { margin: 8px 0 0; font-weight: 700; color: #4f46e5; font-size: 0.88rem; }
.pos-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--surface2);
  overflow: hidden;
  min-width: 72px;
}
.pos-bar i {
  display: block;
  height: 100%;
  background: #4f46e5;
}
@media (max-width: 640px) {
  .pos-crd-grid { grid-template-columns: 1fr; }
}
.pa-hint { margin: 0 0 8px; font-size: 0.82rem; }
.pa-ori { width: 100%; }
.pa-inv-res { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pa-inv-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  color: inherit;
}
.pa-inv-item:hover { border-color: var(--navy, #1e3a5f); }
.pa-inv-item span { font-size: 0.78rem; color: var(--text2); }
.pa-inv-pick {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #0f766e 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #0f766e 7%, var(--surface));
}
.pa-inv-pick-nom { margin: 0 0 8px; font-weight: 700; }
.pa-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 4px;
}
.pa-inv { background: #ecfdf5; color: #047857; }
.pa-prov { background: #eff6ff; color: #1d4ed8; }
.pa-uso { background: #fff7ed; color: #c2410c; }
.pa-man { background: #f4f4f5; color: #3f3f46; }
.pa-vacio { margin: 8px 0; }
.pa-piso .pa-inv-item, .pa-piso .btn, .pa-piso select, .pa-piso input { min-height: 44px; }
.seg-roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
}
.seg-card {
  padding: 10px 12px;
  border-left: 3px solid var(--navy, #1e3a5f);
}
.seg-card:nth-child(2) { border-left-color: #d97706; }
.seg-card:nth-child(3) { border-left-color: #059669; }
.seg-card:nth-child(4) { border-left-color: #2563eb; }
@media (max-width: 900px) {
  .seg-roles { grid-template-columns: 1fr 1fr; }
}
.seg-lbl {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
}
.seg-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.seg-ava {
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--navy, #1e3a5f) 16%, var(--surface));
  color: var(--navy, #1e3a5f);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
}
.seg-who b { display: block; font-size: 0.86rem; line-height: 1.25; }
.seg-who small { display: block; color: var(--text2); font-size: 0.72rem; }
.seg-tl { list-style: none; margin: 12px 0 0; padding: 0; }
.seg-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.seg-item:last-child { border-bottom: 0; }
.seg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy, #1e3a5f); margin-top: 7px; flex-shrink: 0;
}
.seg-act { margin: 0; font-size: 0.88rem; }
.seg-det { margin: 2px 0 0; font-size: 0.82rem; color: var(--text2); }
.seg-mini { display: inline-block; font-size: 0.72rem; color: var(--text2); margin-left: 4px; }
@media (max-width: 720px) {
  .seg-roles { grid-template-columns: 1fr; }
}

.input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-weight: 500;
  color: var(--text);
  box-sizing: border-box;
}
select.input { cursor: pointer; appearance: auto; }
.vin-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
  cursor: pointer;
}
.vin-opt:has(input:checked) {
  border-color: var(--navy);
  background: color-mix(in srgb, var(--navy) 8%, var(--surface));
}
.vin-opt input { margin-top: 3px; }
.vin-opt b { display: block; font-size: 0.95rem; }
.vin-opt small { display: block; margin-top: 4px; color: var(--text2); font-size: 0.8rem; line-height: 1.4; }
.input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: var(--focus);
}
textarea.input { resize: vertical; line-height: 1.45; }
.cfg-shell {
  display: grid;
  grid-template-columns: 190px 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 520px;
}
.cfg-nav {
  border-right: 1px solid var(--border);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface2);
}
.cfg-nav-tit {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 10px;
  margin-bottom: 8px;
}
.cfgbtn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
}
.cfgbtn:hover { background: var(--surface); }
.cfgbtn.on { background: var(--surface); color: var(--text); font-weight: 600; }
.cfgbtn-peligro {
  margin-top: auto;
  color: var(--red);
  font-weight: 700;
  gap: 8px;
}
.cfgbtn-peligro .ico { width: 15px; height: 15px; }
.cfgbtn-peligro:hover { background: rgba(248, 113, 113, 0.1); color: var(--red); }
.cfgbtn-peligro.on {
  background: rgba(248, 113, 113, 0.14);
  color: var(--red);
  font-weight: 800;
}
.zp-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 10px;
}
.zp-card-tit {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 4px;
}
.zp-card-sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.45;
  max-width: 520px;
}
.zp-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff;
  font-weight: 700;
}
.zp-btn:hover { filter: brightness(1.06); background: #991b1b; }
.zp-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.zp-aviso {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: var(--text2);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.zp-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  margin: 8px 0 12px;
  cursor: pointer;
}
.zp-check input { margin-top: 3px; flex-shrink: 0; }
.zp-modal h2 { color: var(--red); }
.cfg-content { padding: 22px 26px 24px; overflow-y: auto; }
.cfg-pane[hidden] { display: none; }

/* Ajustes · Sonidos del menú */
.cfg-snd-switch { margin: 12px 0 14px; }
.cfg-snd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
}
.cfg-snd-toggle input { width: 16px; height: 16px; accent-color: var(--blue, #2563eb); }
.cfg-snd-vol {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text2);
}
.cfg-snd-vol input[type="range"] { flex: 1; max-width: 280px; }
.cfg-snd-block { margin-bottom: 10px; }
.cfg-snd-grupo {
  margin: 10px 0 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.cfg-snd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.cfg-snd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
  min-width: 0;
}
.cfg-snd-row.on {
  border-color: #93c5fd;
  background: color-mix(in srgb, #3b82f6 8%, var(--surface));
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.cfg-snd-row--real {
  border-color: color-mix(in srgb, #f59e0b 45%, var(--border));
  background: color-mix(in srgb, #f59e0b 7%, var(--surface));
}
.cfg-snd-row--real.on {
  border-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 14%, var(--surface));
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.cfg-snd-row input[type="radio"] { flex-shrink: 0; accent-color: var(--blue, #2563eb); margin: 0; }
.cfg-snd-info { flex: 1; min-width: 0; }
.cfg-snd-info strong {
  display: block;
  font-size: 0.74rem;
  line-height: 1.2;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-snd-info em {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-snd-play {
  flex-shrink: 0;
  min-width: 28px;
  padding: 3px 7px !important;
  font-size: 0.72rem !important;
}
body.tema-dark .cfg-snd-toggle { color: var(--text); }
body.tema-dark .cfg-snd-info strong { color: var(--text); }
body.tema-dark .cfg-snd-row.on {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  border-color: var(--blue);
}
@media (max-width: 1100px) {
  .cfg-snd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cfg-snd-grid { grid-template-columns: 1fr; }
}
.cfg-savebar {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cfg-savebar[hidden] { display: none !important; }
.cfg-emp-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.cfg-emp-sub { font-size: 0.75rem; color: var(--text2); margin: 4px 0 18px; line-height: 1.45; }
.cfg-emp-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 26px;
  align-items: start;
}
.cfg-emp-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px 20px;
}
.cfg-emp-lbl {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: block;
}
.cfg-emp-field { margin-bottom: 14px; }
.cfg-emp-hint { font-size: 0.6875rem; color: var(--text3); line-height: 1.4; margin: 0 0 8px; }
.cfg-emp-row { display: flex; gap: 8px; align-items: stretch; }
.cfg-emp-prefix {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--text2);
}
.cfg-emp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfg-emp-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cfg-emp-logo {
  width: min(100%, 210px);
  aspect-ratio: 1;
  height: auto;
  max-height: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--logo-fondo, var(--surface3));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.cfg-emp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.cfg-login-fondo {
  width: min(100%, 320px);
  height: 120px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfg-login-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cfg-logo-ph { font-size: 0.85rem; font-weight: 700; color: var(--text3); opacity: 0.7; }
.cfg-emp-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cfg-pane .cfg-emp-box { margin-bottom: 14px; }
.cfg-pane .cfg-emp-box .cfg-emp-field:last-child { margin-bottom: 0; }
.cfg-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
}
.cfg-switch input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.cfg-emp-box .cfg-switch:last-child,
.cfg-emp-box .cfg-emp-hint:last-child { margin-bottom: 0; }
.cfg-emp-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px 16px;
  background: var(--surface2);
}
.cfg-emp-box-tit {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.cfg-emp-prev { font-size: 0.75rem; color: var(--text2); line-height: 1.55; }
.cfg-emp-prev span { color: var(--text3); font-weight: 600; }
.cfg-reloj { font-size: 0.8rem; color: var(--text); line-height: 1.4; }
.ficha-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.term-ingreso {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
@media (max-width: 960px) {
  .cfg-emp-page-grid { grid-template-columns: 1fr; }
  .cfg-emp-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .cfg-shell { grid-template-columns: 1fr; }
  .cfg-nav { border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; }
}

.post-ingreso-aviso {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.4;
}
.post-ingreso-aviso strong { display: block; margin-bottom: 4px; }
body.tema-dark .post-ingreso-aviso {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.32);
}
.pasos-ingreso {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.paso-ingreso {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.paso-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text2);
}
.paso-cuerpo strong { display: block; margin-bottom: 4px; }
.paso-cuerpo p { margin: 0 0 8px; color: var(--text2); font-size: 0.88rem; }
.paso-hecho { color: #047857 !important; font-weight: 600; }
.paso-ok { border-color: #a7f3d0; }
.paso-ok .paso-num { background: #ecfdf5; color: #047857; }
.paso-falta { border-color: #fed7aa; }
.paso-falta .paso-num { background: #fff7ed; color: #c2410c; }
.paso-espera { border-color: #bfdbfe; }
.paso-espera .paso-num { background: #eff6ff; color: #1d4ed8; }
body.tema-dark .paso-ok { border-color: rgba(16, 185, 129, 0.35); }
body.tema-dark .paso-falta { border-color: rgba(251, 191, 36, 0.35); }
body.tema-dark .paso-espera { border-color: rgba(59, 130, 246, 0.35); }
.paso-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.paso-radios { display: grid; gap: 8px; margin: 8px 0 12px; }
.paso-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.paso-mas { margin: 0 0 12px; }
.paso-mas summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

#cot-doc-host { width: 100%; }
.cotd { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.cotd-barra {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px 14px;
}
.cotd-barra-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cotd-barra-tit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cotd-barra-tit .ico { width: 18px; height: 18px; }
.cotd-pill {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cotd-pill-pend { background: #ffedd5; color: #9a3412; }
.cotd-pill-ok { background: rgba(16, 185, 129, 0.18); color: #047857; }
.cotd-pill-no { background: #fee2e2; color: #b91c1c; }
.cotd-hechos {
  display: grid;
  grid-template-columns: minmax(4rem, auto) 1fr auto;
  gap: 16px 24px;
  align-items: end;
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  .cotd-hechos { grid-template-columns: 1fr; }
}
.cotd-hecho span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 2px;
}
.cotd-hecho b { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.cotd-hecho-tot b {
  font-size: 1.85rem;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.03em;
}
.cotd-hecho-ent {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cotd-hecho-ent > .ico {
  width: 22px;
  height: 22px;
  color: var(--navy);
  flex-shrink: 0;
}
.cotd-acc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cotd-acc .btn,
.cotd-acc .auth-acciones .btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cotd-acc .btn .ico { width: 16px; height: 16px; }
.cotd-acc-sep {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: var(--border);
  margin: 0 4px;
}
.cotd-barra .auth-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
.cotd-barra .auth-acciones[hidden] { display: none !important; }
.cotd-barra #auth-rechazo-ops {
  width: 100%;
  margin-top: 10px;
}
.cotd-cuerpo {
  display: grid;
  gap: 12px;
  width: 100%;
  align-items: start;
}
@media (min-width: 980px) {
  .cotd-cuerpo {
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  }
}
.cotd-lado {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cotd-lado .paso-panel.bloque {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
}
.cotd-dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 8px;
}
.cotd-dato span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text3);
}
.cotd-dato b { font-size: 0.92rem; font-weight: 700; }
.cotd-imp {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.88rem;
  margin: 4px 0;
}
.cotd-imp-tot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}
.cotd-imp-tot b { font-size: 1.35rem; letter-spacing: -0.02em; }
.cotd-vista { width: 100%; min-width: 0; }
.cotd-vista-tit {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
}
.cotd-hoja {
  background: #dbe3ee;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 12px;
  overflow-x: auto;
  overflow-y: visible;
}
.cotd-hoja iframe {
  display: block;
  width: 8.5in;
  max-width: 100%;
  min-height: 11in;
  border: 0;
  background: transparent;
  overflow: hidden;
}
body.tema-dark .cotd-barra { background: var(--surface); }
body.tema-dark .cotd-pill-pend { background: rgba(251, 191, 36, 0.18); color: #fde68a; }
body.tema-dark .cotd-hecho-tot b,
body.tema-dark .cotd-barra-tit,
body.tema-dark .cotd-vista-tit { color: var(--brand); }

.tb-rep-vista { max-width: 1100px; }
.tb-banner-ok {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border-color: #059669;
}
body.tema-dark .tb-banner-ok { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.5); }
.tb-quehacer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 12px;
}
.tb-quehacer span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
}
.tb-quehacer p { margin: 4px 0 0; font-weight: 600; }
.tb-prog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  font-weight: 700;
}
.tb-prog-bar {
  display: block;
  height: 8px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
}
.tb-prog-bar b {
  display: block;
  height: 100%;
  background: #059669;
  border-radius: 99px;
}
.tb-rep-cuerpo {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
@media (min-width: 900px) {
  .tb-rep-cuerpo { grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); align-items: start; }
}
.tb-rep-lado { display: flex; flex-direction: column; gap: 10px; }
.tb-tarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tb-tarea-ahora { box-shadow: inset 4px 0 0 0 var(--blue); }
.tb-tarea-ok {
  border-color: #059669;
  background: rgba(16, 185, 129, 0.10);
  box-shadow: inset 4px 0 0 0 #10b981;
}
.tb-tarea-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tb-tarea-tipo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.tb-tarea-st {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffedd5;
  color: #9a3412;
}
.tb-tarea-ok .tb-tarea-st {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}
.tb-tarea-tit { margin: 0 0 4px; font-weight: 800; font-size: 1.05rem; }
.tb-tarea-sub { margin: 0 0 8px; color: var(--text2); }
.tb-tarea-acc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tb-tarea-acc .btn { width: auto; min-height: 48px; }
.tb-tarea-foto {
  display: inline-block;
  margin-top: 8px;
  max-width: 160px;
  text-decoration: none;
  color: var(--text2);
  font-size: 0.8rem;
}
.tb-tarea-foto img {
  display: block;
  width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.tb-tarea-foto-mini img { width: 72px; height: 48px; }
.tb-hall-abrir {
  width: 100%;
  min-height: 48px;
  border-color: #d97706;
  color: #9a3412;
  background: #fffbeb;
}
.tb-hall {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.tb-hall-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tb-hall-head h3 {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.tb-st-pend { background: #ffedd5; color: #9a3412; }
.tb-hall-foto img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
}
.tb-hall-aviso {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 10px 12px;
}
.tb-hall-aviso p { margin: 4px 0 0; }
.tb-hall-cerrado { margin: 0; color: var(--text2); font-size: 0.88rem; }
.tb-rep-vista #tb-terminar { width: auto; align-self: flex-start; }
.rep-lista { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rep-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.rep-item.panel-ok { border-color: #059669; }
.hall-card { width: 100%; margin-top: 10px; }
.hall-card .tb-tarea-foto img { width: 180px; height: 110px; }

.rep-ofi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.rep-ofi-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.rep-ofi-tit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
.rep-ofi-tit .ico { width: 18px; height: 18px; }
.rep-ofi-mec,
.rep-ofi-prog-lab { font-size: 0.88rem; font-weight: 600; color: var(--text2); }
.rep-ofi .tb-prog { margin: 0; }
.rep-ofi-quehacer {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text2);
}
.rep-ofi-quehacer span {
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  margin-right: 6px;
}
.rep-ofi-grid {
  display: grid;
  gap: 12px;
  align-items: start;
  width: 100%;
}
@media (min-width: 980px) {
  .rep-ofi-grid { grid-template-columns: minmax(0, 1fr) 18.5rem; }
}
.rep-ofi-tabla-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.rep-ofi-tabla { margin: 0; }
.rep-ofi-tabla th,
.rep-ofi-tabla td {
  vertical-align: middle;
  padding: 8px 10px;
}
.rep-ofi-tabla th:nth-child(3),
.rep-ofi-tabla td:nth-child(3) { width: 4.5rem; text-align: center; }
.rep-ofi-tabla th:nth-child(6),
.rep-ofi-tabla td:nth-child(6) { width: 1%; white-space: nowrap; }
.rep-ofi-row-ok { background: rgba(16, 185, 129, 0.08); }
.rep-ofi-tipo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}
.rep-ofi-foto img {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: 1px solid var(--border);
}
.rep-ofi-st-ok,
.rep-ofi-st-pend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.rep-ofi-st-ok { color: #047857; }
.rep-ofi-st-pend { color: #92400e; }
.rep-ofi-st-ok .ico,
.rep-ofi-st-pend .ico { width: 14px; height: 14px; }
.rep-ofi-acc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rep-ofi-acc .btn {
  width: auto;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.78rem;
}
.rep-ofi-acc .btn .ico { width: 14px; height: 14px; }
.rep-ofi-hall {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.rep-ofi-hall-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.rep-ofi-hall-item p { margin: 0; font-weight: 600; }
.rep-ofi-hall-prev img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.rep-ofi-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
}
.rep-ofi-pie .btn { width: auto; min-height: 38px; }
body.tema-dark .rep-ofi-tipo { color: var(--blue2); }
body.tema-dark .rep-ofi-row-ok { background: rgba(52, 211, 153, 0.12); }
body.tema-dark .rep-ofi-st-ok { color: #6ee7b7; }
body.tema-dark .rep-ofi-st-pend { color: #fcd34d; }

.exp-page { max-width: 820px; }
.exp-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.exp-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.exp-head h2 { margin: 0 0 2px; font-size: 1rem; }
.exp-head-nom { margin: 0 0 10px; font-weight: 700; color: var(--brand); font-size: 0.92rem; }
.exp-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px 10px;
}
.exp-kv b { display: block; font-size: 0.84rem; overflow-wrap: anywhere; }
.exp-sum { margin: 10px 0 0; font-size: 0.78rem; color: var(--text2); font-weight: 600; }
.exp-h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  margin: 0 0 6px;
}
.exp-hist { display: flex; flex-direction: column; }
.exp-visita { display: flex; gap: 10px; }
.exp-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  flex-shrink: 0;
}
.exp-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exp-visita-1 .exp-dot { background: #d97706; }
.exp-line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  background: var(--border);
  margin: 3px 0 0;
}
.exp-card {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 8px;
  margin-bottom: 10px;
}
.exp-visita-1 .exp-card { border-color: rgba(217, 119, 6, 0.45); }
.exp-card-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.exp-card-tit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
}
.exp-card-tit .ico { width: 15px; height: 15px; flex-shrink: 0; }
.exp-vis-lab { font-weight: 700; }
.exp-sep { color: var(--text3); }
.exp-pill {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text3);
}
.exp-pill-1 { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.exp-num { font-weight: 800; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.exp-st {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text2);
}
.exp-st-ok { background: rgba(5, 150, 105, 0.12); color: #047857; }
.exp-tot { color: #059669; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.exp-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--surface2);
}
.exp-rol {
  padding: 6px 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.exp-rol + .exp-rol { border-left: 1px solid var(--border); }
.exp-rol-ico { flex-shrink: 0; margin-top: 1px; color: var(--text3); }
.exp-rol-ico .ico { width: 14px; height: 14px; }
.exp-rol-txt { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.exp-rol strong {
  font-size: 0.78rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-rol-fecha { font-size: 0.68rem; color: var(--text3); line-height: 1.2; }
.exp-lab {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  line-height: 1.2;
}
.exp-paso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 8px 10px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.exp-paso-solo { grid-template-columns: 1fr; }
.exp-paso-tit {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text2);
}
.exp-paso-tit .ico { width: 14px; height: 14px; flex-shrink: 0; }
.exp-linea {
  margin: 0 0 2px;
  font-size: 0.8rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.exp-linea .ico { width: 13px; height: 13px; flex-shrink: 0; color: var(--text3); }
.exp-linea-lab { font-weight: 700; color: var(--text2); }
.exp-linea-muted { color: var(--text3); font-size: 0.74rem; }
.exp-sub {
  margin: 0 0 3px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3);
}
.exp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 4px; }
.exp-chip {
  font-size: 0.7rem;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.exp-chip b { font-weight: 700; margin-right: 3px; color: var(--text3); }
.exp-chip em { font-style: normal; font-weight: 700; }
.exp-ok { color: #059669; }
.exp-warn { color: #c2410c; }
.exp-thumbs { min-width: 0; }
.exp-thumbs-lab {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3);
  margin: 0 0 4px;
}
.exp-thumbs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.exp-thumbs-vacio { font-size: 0.7rem; }
.exp-thumb {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface2);
  cursor: zoom-in;
  flex-shrink: 0;
}
.exp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.exp-card-acc { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.exp-veh-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 640px) {
  .exp-roles { grid-template-columns: 1fr; }
  .exp-rol + .exp-rol { border-left: 0; border-top: 1px solid var(--border); }
  .exp-paso { grid-template-columns: 1fr; }
}
@media print {
  .side, .top, .app-foot, .exp-print-hide { display: none !important; }
  .main { background: #fff; }
  .exp-page { max-width: none; }
  .exp-card { break-inside: avoid; }
  .exp-thumb { width: 36px; height: 36px; }
}

.esp-tabla-wrap { overflow-x: auto; margin: 0 0 18px; }
.esp-tabla { min-width: 720px; }
.esp-tabla td { font-size: 0.82rem; vertical-align: top; }
.esp-acc { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.esp-block { margin: 8px 0 0; }
.esp-block[hidden] { display: none !important; }
.esp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.esp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 10px;
  border: 1px solid #d5dbe3;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;
}
.esp-card:hover { border-color: #b8c0cc; }
.esp-card.on {
  border: 2.5px solid var(--navy);
  background: #fff;
  box-shadow: none;
  padding: 6.5px 8.5px 6.5px;
}
.ati-pill input,
.niv-pill input,
.mec-asig-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.esp-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.esp-card input[name="u-esp"] {
  position: static;
  inset: auto;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  flex-shrink: 0;
  opacity: 1;
  cursor: pointer;
  accent-color: var(--navy);
  appearance: auto;
  -webkit-appearance: checkbox;
}
.esp-card-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: var(--navy);
  flex-shrink: 0;
}
.esp-card.on .esp-card-ico { background: #f3f4f6; color: var(--navy); border-color: #d1d5db; }
.esp-card-ico .esp-ico { width: 34px; height: 34px; display: block; }
.esp-card-tit {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
.esp-card-pts {
  margin: 0;
  padding-left: 14px;
  font-size: 0.62rem;
  color: #64748b;
  line-height: 1.3;
}
.esp-card-pts li { margin: 0; }
.esp-sec {
  margin: 12px 0 2px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.esp-hint { margin: 0 0 8px; font-size: 0.72rem; color: #64748b; }
.esp-nota { margin-top: 8px; }
.ati-row, .niv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ati-pill, .niv-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border: 1.6px solid var(--navy);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
}
.ati-pill .esp-ico { width: 26px; height: 26px; color: var(--navy); flex-shrink: 0; }
.ati-pill.on, .niv-pill.on {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.ati-pill.on .esp-ico { color: #fff; }
.niv-pill { min-width: 110px; justify-content: center; }
.usr-guardar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}
.usr-guardar svg { width: 16px; height: 16px; }
.mec-asig {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 0 8px;
}
.mec-asig.campo-falta { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 12px; }
.mec-asig-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  flex: none;
  width: 100%;
  margin: 0;
  padding: 0 14px 0 0;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}
.mec-asig-card:hover { border-color: var(--border2); }
.mec-asig-card.on {
  border-color: var(--navy);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--navy) 22%, transparent);
}
.mec-asig-card.on:not(.rec) .mec-asig-bar { background: var(--navy); }
.mec-asig-flags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.mec-asig-flag.sel { color: var(--navy); }
.mec-asig-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text2);
}
.mec-ley-rec { color: var(--green); display: inline-flex; align-items: center; gap: 4px; }
.mec-ley-rec .ico { width: 13px; height: 13px; }
.mec-ley-sel { color: var(--navy); }
.mec-asig-tit-lista {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.mec-asig-resumen {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.mec-asig-resumen p { margin: 0; font-size: 0.8rem; line-height: 1.4; }
.mec-asig-resumen p + p { margin-top: 3px; }
.mec-asig-resumen .mec-k {
  display: inline-block;
  min-width: 9.2rem;
  color: var(--text2);
  font-weight: 700;
}
.mec-asig-resumen b { color: var(--navy); }
.mec-asig-resumen-sel.on b { color: var(--navy); }
.mec-asig-resumen-ok {
  color: var(--green) !important;
  font-weight: 700;
}
[data-paso-panel="recibo-ing"] .paso-panel-motivo,
[data-paso-panel="recibo-ing"] .muted {
  flex: none;
  margin-bottom: 0;
}
[data-paso-panel="recibo-ing"] #o-print-ingreso,
[data-paso-panel="recibo-ing"] .btn {
  margin-top: 18px;
  align-self: stretch;
}
.mec-asig-bar {
  width: 5px;
  flex-shrink: 0;
  background: #cbd5e1;
  align-self: stretch;
}
.mec-asig-card.rec .mec-asig-bar { background: #22c55e; }
.mec-asig-av {
  width: 40px;
  height: 40px;
  margin: 12px 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mec-asig-av--foto {
  padding: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.mec-asig-av--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.mec-asig-av .ico {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
}
.mec-asig-lect {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 6px;
}
.mec-asig-lect .mec-asig-av { margin: 0; }
.mec-asig-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0 10px;
}
.mec-asig-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mec-asig-card strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
}
.mec-asig-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}
.mec-asig-flag[hidden] { display: none !important; }
.mec-asig-flag .ico { width: 14px; height: 14px; }
.mec-asig-flag.rec { color: var(--green); }
.mec-asig-flag.sel { color: var(--navy); }
.mec-asig-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mec-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.4px solid var(--border2);
  background: var(--surface);
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
}
.mec-asig-card.rec .mec-pill {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.mec-asig-motivo {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 650;
  color: #64748b;
}
.mec-asig-card.rec .mec-asig-motivo { color: var(--green); }
.mec-asig-carga {
  margin: 0;
  font-size: 0.72rem;
  color: #64748b;
}
.mec-asig-carga.alta { color: #b45309; font-weight: 700; }
.mec-asig-hint {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: var(--text2);
}
.mec-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mec-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.68rem;
  font-weight: 700;
}
.mec-chip-niv { background: color-mix(in srgb, var(--blue) 14%, var(--surface2)); color: var(--navy); }
.mec-chip-ati { font-weight: 600; }
.usr-fila { cursor: pointer; }
.usr-fila:hover td { background: var(--surface2); }
.usr-fila.on td { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.usr-tabla th, .usr-tabla td { padding: 7px 8px; }
.usr-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
}
.usr-av-foto {
  overflow: hidden;
  padding: 0;
  background: var(--surface2);
}
.usr-av-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.usr-editor {
  width: min(1120px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  margin: 0;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
  padding: 18px 20px 14px;
  outline: none;
}
.usr-editor-top {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px 22px;
  align-items: start;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.usr-foto-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.usr-foto-lab,
.usr-datos-lab {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.usr-editor-datos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.usr-editor-datos .usr-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.usr-editor-datos .usr-editor-grid .f:nth-child(5) {
  grid-column: 1 / 2;
}
.usr-foto-carnet {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 220px;
  border: 1.5px dashed var(--border2);
  border-radius: 10px;
  background: var(--surface2);
  overflow: hidden;
  position: relative;
}
.usr-foto-carnet.tiene {
  border-style: solid;
  border-color: var(--border);
  background: #0f172a;
}
.usr-foto-carnet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.usr-foto-vacio {
  height: 100%;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text3);
  font-size: 0.72rem;
  font-weight: 600;
}
.usr-foto-silueta {
  width: 56px;
  height: 70px;
  border-radius: 28px 28px 12px 12px;
  background:
    radial-gradient(circle at 50% 28%, var(--border2) 0 14px, transparent 15px),
    linear-gradient(var(--border2), var(--border2));
  background-size: 100% 100%, 36px 34px;
  background-position: center top, center 36px;
  background-repeat: no-repeat;
  opacity: 0.85;
}
.usr-foto-hint {
  margin: 0;
  font-size: 0.68rem;
  color: var(--text3);
  font-weight: 600;
  line-height: 1.25;
}
.usr-foto-acc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.usr-foto-acc .btn {
  padding: 5px 4px;
  font-size: 0.68rem;
  min-height: 30px;
}
.usr-foto-quitar {
  color: #b45309;
}
.usr-foto-quitar.hidden { display: none !important; }
.usr-cam-ov {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(15, 23, 42, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.usr-cam-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.35);
}
.usr-cam-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.usr-cam-view {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 3 / 4;
}
.usr-cam-view video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}
.usr-cam-guia {
  pointer-events: none;
  position: absolute;
  inset: 10% 14% 8%;
  border: 2px dashed rgba(255, 255, 255, 0.75);
  border-radius: 50% 50% 42% 42% / 40% 40% 55% 55%;
  box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.35);
}
.usr-cam-note {
  margin: 8px 0 10px;
  font-size: 0.78rem;
  color: var(--text2);
}
.usr-cam-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
body.tema-dark .usr-cam-card { background: var(--surface); }
body.tema-dark .usr-foto-carnet { background: color-mix(in srgb, var(--surface2) 80%, #000); }
.usr-modal-ov {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  outline: none;
}
.usr-modal-ov[hidden] { display: none !important; }
body.usr-modal-open { overflow: hidden; }
.usr-editor-hd { margin-bottom: 8px; }
.usr-editor-tit { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; }
.usr-editor-sub { margin: 2px 0 0; font-size: 0.72rem; color: var(--text2); }
.usr-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.usr-editor .f { margin: 0; }
.usr-editor .f input,
.usr-editor .f select { min-height: 32px; }
.usr-editor-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.usr-ft-nota { margin: 0; flex: 1 1 260px; }
.usr-ft-acc { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.usr-cla-wrap { display: block; position: relative; }
.usr-cla-wrap input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.usr-cla-ver {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.usr-cla-ver svg { width: 18px; height: 18px; }
.usr-cla-ver:hover { color: var(--navy); }
body.tema-dark .usr-editor { background: var(--surface); }
body.tema-dark .usr-modal-ov { background: rgba(2, 6, 23, 0.72); }
body.tema-dark .usr-av-recepcion, body.tema-dark .usr-rol-recepcion { color: #c4b5fd; }
body.tema-dark .esp-card { background: var(--surface); border-color: var(--border); }
body.tema-dark .esp-card.on { border-color: var(--blue2); background: var(--surface); }
body.tema-dark .esp-card-ico { background: transparent; color: var(--text); border-color: var(--border2); }
body.tema-dark .esp-card.on .esp-card-ico { background: transparent; color: var(--text); }
body.tema-dark .esp-card-tit, body.tema-dark .esp-sec { color: var(--blue2); }
body.tema-dark .ati-pill, body.tema-dark .niv-pill {
  background: var(--surface);
  border-color: var(--blue2);
  color: var(--blue2);
}
body.tema-dark .ati-pill .esp-ico { color: var(--blue2); }
body.tema-dark .ati-pill.on, body.tema-dark .niv-pill.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
body.tema-dark .ati-pill.on .esp-ico { color: #fff; }
@media (max-width: 980px) {
  .esp-grid, .usr-editor-grid { grid-template-columns: 1fr 1fr; }
  .usr-editor-top { grid-template-columns: 148px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .esp-grid, .usr-editor-grid { grid-template-columns: 1fr; }
  .usr-editor-top { grid-template-columns: 1fr; justify-items: center; }
  .usr-foto-block { width: min(180px, 100%); }
  .usr-editor-datos { width: 100%; }
  .usr-editor-datos .usr-editor-grid .f:nth-child(5) { grid-column: auto; }
}
.usr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.usr-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.usr-card-lab {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.usr-tabla-wrap { margin: 0; }
.usr-tabla { min-width: 860px; }
.usr-tabla td { vertical-align: middle; }
.usr-persona { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.usr-av-mecanico { background: rgba(30, 58, 138, 0.12); color: var(--navy); }
.usr-av-recepcion { background: rgba(126, 34, 206, 0.12); color: #7e22ce; }
.usr-av-gerente { background: rgba(180, 83, 9, 0.14); color: #b45309; }
.usr-login { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; color: var(--text2); }
.usr-rol {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text2);
  white-space: nowrap;
}
.usr-rol-mecanico { background: var(--surface2); color: var(--text2); }
.usr-rol-recepcion { background: rgba(126, 34, 206, 0.1); color: #7e22ce; }
.usr-rol-gerente { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.usr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.usr-chip {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface2));
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 700;
}
.usr-vacio { color: var(--text3); }
.usr-estado {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(4, 120, 87, 0.12);
  color: var(--green);
}
.usr-estado.off { background: rgba(185, 28, 28, 0.1); color: var(--red); }

/* —— Modo oscuro: texto y fondos que no se pierdan (paleta Microtec) —— */
body.tema-dark input,
body.tema-dark select,
body.tema-dark textarea {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border2);
}
body.tema-dark option {
  background: var(--surface2);
  color: var(--text);
}
body.tema-dark input:-webkit-autofill,
body.tema-dark textarea:-webkit-autofill,
body.tema-dark select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--surface2) inset;
  transition: background-color 9999s ease-out;
}
body.tema-dark .btn-primary,
body.tema-dark .tabs button.on,
body.tema-dark .paso.on,
body.tema-dark .cot-tab.on,
body.tema-dark .tb-tag.on,
body.tema-dark .pos-chips button.on {
  color: #fff;
}
body.tema-dark .modo-vista-btn.on { color: #111118; }

body.tema-dark .paso-hecho,
body.tema-dark .paso-ok .paso-num,
body.tema-dark .avance-ok,
body.tema-dark .ing-veh.on .ing-veh-acc,
body.tema-dark .cotd-pill-ok,
body.tema-dark .tb-banner-ok,
body.tema-dark .rep-ofi-st-ok,
body.tema-dark .prog-res-ok,
body.tema-dark .prog-ops-ok,
body.tema-dark .prog-hecho,
body.tema-dark .prog-paso--hecha .prog-lab,
body.tema-dark .prog-paso--hecha .prog-ops-st,
body.tema-dark .prog--n6 .prog-donde b,
body.tema-dark .prog--n7 .prog-donde b {
  color: var(--ok-fg) !important;
}
body.tema-dark .paso-ok .paso-num { background: var(--ok-bg); }
body.tema-dark .paso-falta .paso-num {
  background: var(--warn-bg);
  color: var(--warn-fg);
}
body.tema-dark .paso-espera .paso-num {
  background: rgba(79, 142, 247, 0.16);
  color: var(--blue2);
}
body.tema-dark .pa-inv { background: var(--ok-bg); color: var(--ok-fg); }
body.tema-dark .pa-prov { background: rgba(79, 142, 247, 0.16); color: var(--blue2); }
body.tema-dark .pa-uso { background: var(--warn-bg); color: var(--warn-fg); }
body.tema-dark .pa-man { background: var(--surface3); color: var(--text2); }

body.tema-dark .dash-fiscal.ok {
  border-color: rgba(52, 211, 153, 0.4);
  background: var(--ok-bg);
  color: var(--ok-fg);
}
body.tema-dark .dash-fiscal.warn {
  border-color: rgba(251, 191, 36, 0.35);
  background: var(--warn-bg);
  color: var(--warn-fg);
}
body.tema-dark .ger-alerta.roja b { color: var(--bad-fg); }
body.tema-dark .ger-alerta.naranja b { color: var(--warn-fg); }
body.tema-dark .ger-bar i.ok { background: var(--green); }
body.tema-dark .ger-fiscal--vigente { background: var(--ok-bg); color: var(--ok-fg); }

body.tema-dark .prog--n5 .prog-donde b,
body.tema-dark .prog-pend,
body.tema-dark .prog-res-falta,
body.tema-dark .prog-ops-err,
body.tema-dark .ing-veh-bad {
  color: var(--warn-fg);
}
body.tema-dark .prog--n6 .prog-meta,
body.tema-dark .prog--n7 .prog-meta {
  background: var(--ok-bg);
  color: var(--ok-fg);
  border-color: rgba(52, 211, 153, 0.4);
}
body.tema-dark .prog-paso--ahora.prog-paso--n5 .prog-lab,
body.tema-dark .prog-paso--ahora.prog-paso--n1 .prog-lab { color: var(--warn-fg); }
body.tema-dark .prog-paso--ahora.prog-paso--n7 .prog-lab { color: var(--ok-fg); }

body.tema-dark .cotd-pill-pend,
body.tema-dark .tb-st-pend { background: var(--warn-bg); color: var(--warn-fg); }
body.tema-dark .cotd-pill-no { background: var(--bad-bg); color: var(--bad-fg); }
body.tema-dark .pos-tbl tr.pos-bajo td:nth-child(4) { color: var(--warn-fg); }

body.tema-dark .ord-fotos-tab {
  color: var(--text2);
  background: var(--surface2);
}
body.tema-dark .ord-fotos-tab.on {
  color: var(--text);
  background: var(--surface3);
  border-color: var(--blue);
}
body.tema-dark .usr-chip { color: var(--blue2); }
body.tema-dark .usr-av-mecanico { background: rgba(79, 142, 247, 0.18); color: var(--blue2); }
body.tema-dark .usr-av-gerente { background: rgba(251, 191, 36, 0.16); color: var(--amber); }
body.tema-dark .usr-rol-gerente { background: rgba(251, 191, 36, 0.14); color: var(--amber); }
body.tema-dark .usr-rol-recepcion { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; }
body.tema-dark .usr-estado { background: var(--ok-bg); color: var(--ok-fg); }
body.tema-dark .usr-estado.off { background: var(--bad-bg); color: var(--bad-fg); }
body.tema-dark .usr-cla-ver:hover { color: var(--blue2); }

body.tema-dark .cfg-emp-title,
body.tema-dark .cfg-nav-tit,
body.tema-dark .cfg-pasos-tit,
body.tema-dark .cotd-barra-tit,
body.tema-dark .cotd-vista-tit,
body.tema-dark .cotd-hecho-tot b { color: var(--brand); }
body.tema-dark .cfg-emp-sub,
body.tema-dark .muted { color: var(--text2); }

body.tema-dark .card,
body.tema-dark .bloque,
body.tema-dark .kpi,
body.tema-dark .usr-card,
body.tema-dark .cla-modal,
body.tema-dark .user-menu-popup {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
body.tema-dark .top,
body.tema-dark .side,
body.tema-dark .app-foot {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text2);
}
body.tema-dark .side-marca,
body.tema-dark #app-foot-txt { color: var(--text2); }
body.tema-dark .side nav button { color: var(--text2); }
body.tema-dark .side nav button:hover { background: var(--surface2); color: var(--text); }
body.tema-dark .side nav button.nav-on { background: var(--surface3); color: var(--brand); }
body.tema-dark .top h1 { color: var(--text); }
body.tema-dark .kpi b { color: var(--brand); }
body.tema-dark .kpi span { color: var(--text3); }

body.tema-dark .help { background: var(--surface2); color: var(--text2); }
body.tema-dark .notif-toast {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
body.tema-dark .toast { color: var(--text); }

body.tema-dark .zp-card {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.42);
}
body.tema-dark .zp-card-tit { color: #f87171; }
body.tema-dark .zp-card-sub { color: var(--text2); }
body.tema-dark .zp-aviso { color: var(--text2); }

body.tema-dark .lic-banner.lic-off { border-color: rgba(248, 113, 113, 0.35); }
body.tema-dark .lic-banner.lic-warn { border-color: rgba(251, 191, 36, 0.35); }

body.tema-dark .pa-chip-x:hover { color: var(--bad-fg); }
body.tema-dark .campo-falta {
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.45);
}

body.tema-dark .kb-card,
body.tema-dark .kb-col {
  background: var(--surface);
  border-color: var(--border);
}
body.tema-dark .kb-col-tit { color: var(--text); }
body.tema-dark table { color: var(--text); }
body.tema-dark th { color: var(--text2); font-weight: 700; }
body.tema-dark td { color: var(--text); }
body.tema-dark tr:hover td { background: var(--surface2); }

body.tema-dark .btn { color: var(--text); border-color: var(--border); }
body.tema-dark .btn-ghost { color: var(--text2); }
body.tema-dark .btn-ghost:hover { color: var(--text); background: var(--surface2); }
body.tema-dark .btn-accent { color: #fff; }

body.tema-dark a { color: var(--blue2); }
body.tema-dark .busca input {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

/* Etiquetas como Microtec: texto claro, no gris perdido */
body.tema-dark label.f,
body.tema-dark .e-por-lab,
body.tema-dark .cfg-emp-lbl,
body.tema-dark .cfg-emp-box-tit,
body.tema-dark .exp-k,
body.tema-dark .mec-asig-tit-lista {
  color: #d4d4ee;
}
body.tema-dark .cfg-emp-hint,
body.tema-dark .cfg-logo-ph,
body.tema-dark .cfg-emp-prev,
body.tema-dark .cfg-emp-prev span {
  color: var(--text2);
}
body.tema-dark .cfg-nav {
  background: var(--bg2);
}
body.tema-dark .cfgbtn { color: var(--text2); }
body.tema-dark .cfgbtn:hover { background: var(--surface); color: var(--text); }
body.tema-dark .cfgbtn.on { background: var(--surface); color: var(--text); }
body.tema-dark .cfg-emp-card,
body.tema-dark .cfg-emp-box {
  background: var(--surface2);
  border-color: var(--border);
}
body.tema-dark .cfg-emp-title { color: var(--text); }

body.tema-dark .esp-card-pts,
body.tema-dark .esp-hint,
body.tema-dark .mec-asig-flag,
body.tema-dark .mec-pill,
body.tema-dark .mec-asig-motivo,
body.tema-dark .mec-asig-carga {
  color: var(--text2);
}
body.tema-dark .mec-asig-carga.alta { color: var(--amber); }
body.tema-dark .mec-asig-card strong,
body.tema-dark .mec-ley-sel { color: var(--blue2); }
body.tema-dark .mec-asig-bar { background: var(--surface3); }
body.tema-dark .mec-asig-resumen b { color: var(--blue2); }

body.tema-dark .cotd-hoja { background: var(--surface2); }
body.tema-dark .tb-hall-abrir {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-color: rgba(251, 191, 36, 0.42);
}
body.tema-dark .tb-hall-aviso {
  background: var(--warn-bg);
  border-color: rgba(251, 191, 36, 0.42);
  color: var(--warn-fg);
}
body.tema-dark .tb-hall-head h3 { color: var(--brand); }
body.tema-dark .orden-fotos-bridge-aviso {
  background: var(--warn-bg);
  border-color: rgba(251, 191, 36, 0.42);
  color: var(--warn-fg);
}

body.tema-dark .pos-tbl th { color: var(--text2); }
body.tema-dark .pos-item { background: var(--surface); border-color: var(--border); color: var(--text); }
body.tema-dark .pos-item span,
body.tema-dark .pos-linea small,
body.tema-dark .pos-cli-item span { color: var(--text2); }

body.tema-dark .tabs button { color: var(--text2); }
body.tema-dark .tabs button.on { color: #fff; }
body.tema-dark .paso:not(.on) { color: var(--text2); }

body.tema-dark input:disabled,
body.tema-dark select:disabled,
body.tema-dark textarea:disabled {
  color: var(--text2);
  background: var(--surface3);
  opacity: 0.8;
}

body.tema-dark ::selection {
  background: rgba(79, 142, 247, 0.38);
  color: #f8f8ff;
}

body.tema-dark .empty,
body.tema-dark .vacio,
body.tema-dark .usr-vacio,
body.tema-dark .kb-vacio {
  color: var(--text2);
}

body.tema-dark .btn-listo { background: #059669; color: #ecfdf5; border-color: #34d399; }
body.tema-dark .btn-listo.is-ok { background: #047857; color: #ecfdf5; }

body.tema-dark .user-menu-popup { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
body.tema-dark .user-menu-nombre { color: var(--text); }
body.tema-dark .user-menu-rol { color: var(--text2); }
body.tema-dark .user-menu-item { color: var(--text); }
body.tema-dark .cla-modal h2 { color: var(--text); }
body.tema-dark .bloque-st {
  background: var(--surface3);
  color: var(--text2);
}
body.tema-dark .usr-modal-ov .cla-modal {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

body.tema-dark .ger-alerta.roja b { color: var(--bad-fg); }
body.tema-dark .ger-alerta.naranja b { color: var(--warn-fg); }

body.tema-dark hr,
body.tema-dark .sep { border-color: var(--border); }

body.tema-dark small { color: inherit; }

/* Diagnóstico en tablet: 4 pasos, sin paneles de oficina */
.tb-diag-vista { max-width: 720px; padding-bottom: 8px; }
.tb-veh {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin: 0 0 12px;
}
.tb-veh-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.tb-veh-modelo {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: 1.08rem;
}
.tb-veh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.tb-veh-dato span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.tb-veh-dato b {
  display: block;
  margin-top: 2px;
  font-size: 0.95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.tb-veh .tb-diag-reporto { margin: 12px 0 0; padding: 0; border: 0; background: none; }
.tb-veh-fotos { margin-top: 12px; }
.tb-veh-fotos span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
}
.tb-veh-fotos > div { display: flex; gap: 8px; }
.tb-veh-foto img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.tb-diag-faltan {
  margin: 0 0 8px;
  font-weight: 700;
  color: #9a3412;
  font-size: 0.95rem;
}
body.tema-dark .tb-diag-faltan { color: #fde68a; }
.tb-diag-pie .tb-btn.is-ready {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28);
}
body.vista-tablet .tb-diag-pie {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin: 16px -4px 0;
  padding: 10px 4px 8px;
  background: linear-gradient(180deg, transparent, var(--bg) 18%);
}
.tb-diag-reporto {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.tb-diag-reporto span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
}
.tb-diag-reporto p {
  margin: 6px 0 0;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  white-space: pre-wrap;
}
.tb-diag-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tb-paso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 14px 16px;
}
.tb-paso.is-ok {
  border-color: #059669;
  box-shadow: inset 4px 0 0 0 #10b981;
}
.tb-paso-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.tb-paso-head i {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface3);
  color: var(--navy);
  font-style: normal;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-paso.is-ok .tb-paso-head i {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}
.tb-paso-head h3 {
  margin: 0;
  flex: 1;
  font-size: 1.08rem;
}
.tb-paso-st {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.tb-paso.is-ok .tb-paso-st { color: #047857; }
.tb-diag-txt {
  min-height: 88px;
  font-size: 0.98rem;
  line-height: 1.35;
  resize: vertical;
}
.tb-diag-vista .tb-in {
  min-height: 42px;
  font-size: 0.98rem;
  padding: 8px 10px;
}
.tb-diag-vista .tb-btn {
  min-height: 46px;
  font-size: 0.95rem;
  margin-top: 8px;
}
.tb-diag-vista .diag-trab-fila {
  gap: 8px;
  margin-bottom: 8px;
}
.tb-diag-vista .diag-trab-fila input {
  min-height: 42px;
  font-size: 0.98rem;
  padding: 8px 10px;
  border-radius: 10px;
}
.tb-diag-vista .diag-trab-x {
  min-height: 42px;
  min-width: 42px;
  font-size: 1rem;
}
.tb-diag-vista #tb-diag-trab-add {
  width: auto;
  min-height: 42px;
  margin-top: 0;
  padding: 0 14px;
}
.tb-diag-vista .pa-sin-pre .pa-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.tb-diag-vista .pa-sin-pre .pa-desc-wrap { grid-column: 1 / -1; }
.tb-diag-vista .pa-sin-pre .pa-ok {
  grid-column: 1 / -1;
  min-height: 42px;
  width: 100%;
}
.tb-diag-vista .pa-sin-pre .f input,
.tb-diag-vista .pa-sin-pre .f select {
  min-height: 42px;
  font-size: 0.95rem;
  padding: 8px 10px;
}
.tb-diag-vista .pa-chip {
  min-height: 36px;
  align-items: center;
}
.tb-chips-f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 10px;
}
.tb-chip-f {
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
}
.tb-chip-f.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.tb-entrega-lab { margin: 0; }
.tb-diag-vista .tb-in-fecha {
  min-height: 40px;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
}
.tb-entrega-prev {
  margin: 6px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text2);
}
.tb-diag-foto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.tb-foto-mini {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text);
  font-weight: 700;
  font-size: 0.82rem;
}
.tb-diag-vista .tb-fotos {
  display: flex;
  gap: 6px;
  margin: 0;
}
.tb-diag-vista .tb-foto {
  width: 56px;
  border-radius: 8px;
}
.tb-diag-vista .tb-foto img {
  width: 56px;
  height: 42px;
}
.tb-diag-vista .tb-foto span { display: none; }
.tb-toggle {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
}
.tb-toggle.on {
  background: #fff7ed;
  border-color: #d97706;
  color: #9a3412;
}
.tb-diag-pie {
  margin: 16px 0 0;
}
.tb-diag-pie .tb-btn { margin-top: 0; }
.tb-diag-vista .tb-fotos { margin-top: 10px; }
.tb-voz-acc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.tb-voz-acc .tb-btn { margin-top: 0; flex: 1; }
.tb-diag-vista .tb-voz {
  width: auto;
  min-width: 120px;
  min-height: 42px;
  margin-top: 8px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 700;
}
.tb-voz {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid #c2410c;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
  font-size: 1.08rem;
}
.tb-voz.on {
  background: #9a3412;
  border-color: #9a3412;
  color: #fff;
  animation: tb-voz-pulso 0.7s ease-in-out infinite;
}
@keyframes tb-voz-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.tb-dictando {
  outline: 2px solid #c2410c;
  outline-offset: 2px;
  animation: tb-dictando-borde 0.8s ease-in-out infinite;
}
.tb-dictando-flash {
  animation: tb-dictando-flash 0.4s ease;
}
@keyframes tb-dictando-borde {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(194, 65, 12, 0.32); }
}
@keyframes tb-dictando-flash {
  0% { background: #fdba74; color: #7c2d12; }
  100% { background: var(--surface2); color: var(--text); }
}
.tb-voz-vivo {
  margin: 8px 0 0;
  min-height: 28px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px dashed #c2410c;
  color: #9a3412;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
}
.tb-voz-vivo-flash {
  animation: tb-voz-vivo-flash 0.35s ease;
}
@keyframes tb-voz-vivo-flash {
  0% { background: #fdba74; }
  100% { background: #fff7ed; }
}
body.tema-dark .tb-voz {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde68a;
}
body.tema-dark .tb-voz.on {
  background: #b45309;
  border-color: #fbbf24;
  color: #fffbeb;
}
body.tema-dark .tb-dictando {
  outline-color: #fbbf24;
  animation-name: tb-dictando-borde-dark;
}
@keyframes tb-dictando-borde-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.38); }
}
body.tema-dark .tb-dictando-flash {
  animation-name: tb-dictando-flash-dark;
}
@keyframes tb-dictando-flash-dark {
  0% { background: #b45309; color: #fffbeb; }
  100% { background: var(--surface2); color: var(--text); }
}
body.tema-dark .tb-voz-vivo {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde68a;
}
body.tema-dark .tb-voz-vivo-flash {
  animation-name: tb-voz-vivo-flash-dark;
}
@keyframes tb-voz-vivo-flash-dark {
  0% { background: #b45309; }
  100% { background: rgba(251, 191, 36, 0.14); }
}

body.tema-dark .tb-paso.is-ok {
  border-color: #34d399;
  box-shadow: inset 4px 0 0 0 #34d399;
}
body.tema-dark .tb-paso.is-ok .tb-paso-head i {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}
body.tema-dark .tb-paso.is-ok .tb-paso-st { color: #6ee7b7; }
body.tema-dark .tb-chip-f.on {
  background: #4f8ef7;
  border-color: #4f8ef7;
  color: #f8f8ff;
}
body.tema-dark .tb-toggle.on {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fde68a;
}

/* —— Chat flotante (orden) —— */
.top-chat-btn { position: relative; }
.top-chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--surface);
  animation: rpm-chat-badge-pulse 0.9s ease-out infinite;
}
.top-chat-btn--pendiente {
  animation: rpm-chat-blink 0.85s ease-in-out infinite;
  border-color: #dc2626 !important;
  background: #fee2e2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.45), 0 0 14px rgba(220, 38, 38, 0.55);
}
@keyframes rpm-chat-blink {
  0%, 100% {
    background: #fee2e2;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35), 0 0 6px rgba(220, 38, 38, 0.25);
    transform: scale(1);
  }
  50% {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.55), 0 0 22px rgba(239, 68, 68, 0.75);
    transform: scale(1.06);
  }
}
@keyframes rpm-chat-badge-pulse {
  0%, 100% {
    transform: scale(1);
    background: #dc2626;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  50% {
    transform: scale(1.22);
    background: #f87171;
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
}

.rpm-chat-lista {
  position: fixed;
  top: 58px;
  right: 72px;
  width: min(360px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 80px));
  overflow: auto;
  z-index: 1200;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  opacity: 1;
}
.rpm-chat-lista-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #d1d5db;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}
.rpm-chat-lista-x,
.rpm-chat-win-x,
.rpm-chat-adj-head button {
  border: 0;
  background: transparent;
  color: var(--text2);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.rpm-chat-lista-x:hover,
.rpm-chat-win-x:hover,
.rpm-chat-adj-head button:hover {
  background: var(--surface3);
  color: var(--text);
}
.rpm-chat-lista-vacio {
  margin: 0;
  padding: 18px 14px;
  color: var(--text3);
  font-size: 0.9rem;
}
.rpm-chat-lista-ul {
  list-style: none;
  margin: 0;
  padding: 6px;
}
.rpm-chat-lista-item {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rpm-chat-lista-item:hover {
  background: var(--surface2);
  border-color: var(--border);
}
.rpm-chat-lista-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rpm-chat-lista-top em {
  font-style: normal;
  color: var(--text2);
  font-size: 0.82rem;
}
.rpm-chat-lista-n {
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 1.4rem;
  text-align: center;
  border-radius: 999px;
  padding: 1px 6px;
}
.rpm-chat-lista-veh {
  font-size: 0.8rem;
  color: var(--text2);
}
.rpm-chat-lista-prev {
  font-size: 0.78rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpm-chat-win {
  position: fixed;
  z-index: 1100;
  width: min(340px, calc(100vw - 16px));
  height: 420px;
  min-width: 280px;
  min-height: 280px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  overflow: visible;
  pointer-events: auto;
  opacity: 1;
}
.rpm-chat-win[hidden] { display: none !important; }
.rpm-chat-win-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f3f4f6;
  border-bottom: 1px solid #d1d5db;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border-radius: 14px 14px 0 0;
}
.rpm-chat-win-head:active { cursor: grabbing; }
.rpm-chat-win-grip {
  width: 10px;
  height: 18px;
  border-left: 2px dotted var(--text3);
  border-right: 2px dotted var(--text3);
  opacity: 0.7;
  flex-shrink: 0;
}
.rpm-chat-win-tit {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rpm-chat-win-tit strong {
  font-size: 0.88rem;
  line-height: 1.2;
}
.rpm-chat-win-sub {
  font-size: 0.72rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rpm-chat-win-msgs {
  flex: 1;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ece5dd;
}
.rpm-chat-vacio {
  margin: auto;
  text-align: center;
  color: var(--text3);
  font-size: 0.85rem;
  padding: 12px;
}
.rpm-chat-bubble {
  max-width: 92%;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 10px;
}
.rpm-chat-bubble--mio {
  align-self: flex-end;
  background: rgba(79, 142, 247, 0.14);
  border-color: rgba(79, 142, 247, 0.35);
}
.rpm-chat-bubble small {
  display: block;
  color: var(--text3);
  font-size: 0.68rem;
  margin-bottom: 3px;
}
.rpm-chat-txt-msg {
  font-size: 0.9rem;
  line-height: 1.35;
  word-break: break-word;
  color: var(--text);
}
.rpm-chat-foto {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.rpm-chat-foto img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  object-fit: cover;
}
.rpm-chat-audio {
  width: 100%;
  max-width: 240px;
  height: 36px;
}
.rpm-chat-win-bar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #d1d5db;
  background: #ffffff;
  border-radius: 0 0 14px 14px;
  position: relative;
}
.rpm-chat-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.rpm-chat-ico:hover { background: var(--surface3); }
.rpm-chat-ico--rec {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: #dc2626 !important;
  animation: rpm-chat-blink 0.8s ease-in-out infinite;
}
.rpm-chat-txt {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 120px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #111827;
  padding: 8px 12px;
  font: inherit;
  line-height: 1.35;
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}
.rpm-chat-txt:focus {
  outline: none;
  border-color: rgba(79, 142, 247, 0.7);
}
.rpm-chat-send {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: var(--navy, #1e3a5f);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.rpm-chat-send:hover { filter: brightness(1.08); }
.rpm-chat-foto-menu {
  position: absolute;
  left: 8px;
  bottom: 52px;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  overflow: hidden;
}
.rpm-chat-foto-menu[hidden] { display: none !important; }
.rpm-chat-foto-menu button {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}
.rpm-chat-foto-menu button:hover { background: var(--surface2); }
.rpm-chat-adjuntos {
  border-top: 1px solid var(--border);
  background: var(--surface2);
  max-height: 140px;
  overflow: auto;
  padding: 8px;
}
.rpm-chat-adjuntos[hidden] { display: none !important; }
.rpm-chat-borrador {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rpm-chat-borrador-foto {
  display: block;
  max-height: 140px;
  width: auto;
  max-width: 100%;
  border-radius: 10px;
  object-fit: contain;
  background: #000;
  margin: 0 auto;
}
.rpm-chat-borrador-audio {
  width: 100%;
  height: 36px;
}
.rpm-chat-borrador-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text2);
}
.rpm-chat-borrador-meta button {
  border: 0;
  background: transparent;
  color: #b91c1c;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 4px 6px;
}
.rpm-chat-borrador-meta button:hover { text-decoration: underline; }
.rpm-chat-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 3;
  background:
    linear-gradient(135deg, transparent 55%, #9ca3af 56%, #9ca3af 62%, transparent 63%),
    linear-gradient(135deg, transparent 70%, #9ca3af 71%, #9ca3af 77%, transparent 78%);
  border-radius: 0 0 12px 0;
  opacity: 0.85;
}
.rpm-chat-resize:hover { opacity: 1; }
.rpm-chat-adj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.8rem;
}
.rpm-chat-adj-vacio {
  margin: 0;
  color: var(--text3);
  font-size: 0.82rem;
}
.rpm-chat-adj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.rpm-chat-adj-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  aspect-ratio: 1;
}
.rpm-chat-adj-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.tema-dark .top-chat-badge { border-color: #1e1e2d; }
body.tema-dark .top-chat-btn--pendiente {
  background: #7f1d1d !important;
  border-color: #f87171 !important;
  color: #fecaca !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.55), 0 0 18px rgba(248, 113, 113, 0.65);
  animation: rpm-chat-blink-dark 0.85s ease-in-out infinite;
}
@keyframes rpm-chat-blink-dark {
  0%, 100% {
    background: #7f1d1d;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.4), 0 0 8px rgba(248, 113, 113, 0.35);
    transform: scale(1);
  }
  50% {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.55), 0 0 26px rgba(239, 68, 68, 0.8);
    transform: scale(1.08);
  }
}
body.tema-dark .rpm-chat-lista,
body.tema-dark .rpm-chat-win,
body.tema-dark .rpm-chat-foto-menu {
  background: #1e1e2d !important;
  color: #f3f4f6 !important;
  border-color: #3f3f55 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.72);
  opacity: 1;
}
body.tema-dark .rpm-chat-lista-head,
body.tema-dark .rpm-chat-win-head,
body.tema-dark .rpm-chat-win-bar,
body.tema-dark .rpm-chat-adjuntos {
  background: #252538 !important;
  border-color: #3f3f55 !important;
  color: #f3f4f6 !important;
}
body.tema-dark .rpm-chat-bubble--mio {
  background: #1d4ed8;
  border-color: #2563eb;
  color: #fff;
}
body.tema-dark .rpm-chat-send {
  background: #4f8ef7;
  color: #0b1220;
}
body.tema-dark .rpm-chat-txt,
body.tema-dark .rpm-chat-ico {
  background: #2a2a3d !important;
  color: #f3f4f6 !important;
  border-color: #4b4b63 !important;
}
body.tema-dark .rpm-chat-win-msgs { background: #0b141a !important; }
body.tema-dark .rpm-chat-lista-n { background: #f87171; color: #1a0a0a; }

#rpm-chat-camera-overlay,
.orden-fotos-camera-overlay#rpm-chat-camera-overlay {
  z-index: 1400;
}

/* Chat interactivo (estilo WhatsApp / Microtec) */
.rpm-chat-win {
  width: min(380px, calc(100vw - 16px));
  height: min(520px, calc(100vh - 28px));
  min-width: 280px;
  min-height: 280px;
}
body.tema-dark .rpm-chat-resize {
  background:
    linear-gradient(135deg, transparent 55%, #6b7280 56%, #6b7280 62%, transparent 63%),
    linear-gradient(135deg, transparent 70%, #6b7280 71%, #6b7280 77%, transparent 78%);
}
body.tema-dark .rpm-chat-borrador-meta button { color: #f87171; }
.rpm-chat-win-msgs {
  background: #ece5dd !important;
}
body.tema-dark .rpm-chat-win-msgs {
  background: #0b141a !important;
}
.rpm-imsg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rpm-imsg-row {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 8px;
}
.rpm-imsg-row--me { justify-content: flex-end; }
.rpm-imsg-row--them { justify-content: flex-start; }
.rpm-imsg-av,
.rpm-imsg-reader,
.rpm-chat-lista-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.rpm-imsg-av--foto img,
.rpm-imsg-reader--foto img,
.rpm-chat-lista-av--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rpm-imsg-av--gerente,
.rpm-imsg-reader--gerente { background: linear-gradient(145deg, #d97706, #b45309); }
.rpm-imsg-av--mecanico,
.rpm-imsg-reader--mecanico { background: linear-gradient(145deg, #22c55e, #15803d); }
.rpm-imsg-av--recepcion,
.rpm-imsg-reader--recepcion { background: linear-gradient(145deg, #3b82f6, #1d4ed8); }
.rpm-imsg-av--otro,
.rpm-imsg-reader--otro,
.rpm-chat-lista-av { background: linear-gradient(145deg, #71717a, #52525b); }
.rpm-imsg-reader {
  width: 16px;
  height: 16px;
  font-size: 0.42rem;
  border: 1.5px solid var(--surface);
  margin-left: -4px;
}
.rpm-imsg-reader:first-child { margin-left: 0; }
.rpm-imsg-stack {
  display: flex;
  flex-direction: column;
  max-width: min(88%, 280px);
  min-width: 0;
}
.rpm-imsg-row--me .rpm-imsg-stack { align-items: flex-end; }
.rpm-imsg-row--them .rpm-imsg-stack { align-items: flex-start; }
.rpm-imsg-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text2);
  margin: 0 2px 3px;
}
.rpm-imsg-role {
  margin-left: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.rpm-imsg-bubble {
  padding: 8px 12px;
  font-size: 0.9rem;
  line-height: 1.35;
  word-break: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.rpm-imsg-bubble--them {
  background: #ffffff;
  color: #111827;
  border-radius: 16px 16px 16px 5px;
  border: 1px solid #e5e7eb;
}
.rpm-imsg-bubble--me {
  background: #d9fdd3;
  color: #111827;
  border-radius: 16px 16px 5px 16px;
  border: 1px solid #86efac;
}
body.tema-dark .rpm-imsg-bubble--them {
  background: #1f2c34;
  color: #e9edef;
  border-color: #2a3942;
}
body.tema-dark .rpm-imsg-bubble--me {
  background: #005c4b;
  color: #e9edef;
  border-color: #028066;
}
.rpm-imsg-text { white-space: pre-wrap; }
.rpm-imsg-foto {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  margin: -2px;
}
.rpm-imsg-foto img {
  display: block;
  max-width: 220px;
  max-height: 180px;
  object-fit: cover;
}
.rpm-imsg-audio {
  width: min(220px, 100%);
  height: 34px;
}
.rpm-imsg-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  padding: 0 4px;
  font-size: 0.68rem;
  color: var(--text3);
}
.rpm-imsg-row--me .rpm-imsg-footer { justify-content: flex-end; }
.rpm-imsg-tick { font-size: 0.75rem; letter-spacing: -2px; line-height: 1; }
.rpm-imsg-tick--sent { opacity: 0.7; }
.rpm-imsg-tick--read { color: #53bdeb; font-weight: 700; }
.rpm-imsg-readers {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}

.rpm-chat-lista-item {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
}
.rpm-chat-lista-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rpm-chat-lista-av { margin-top: 2px; }

.rpm-chat-orden-badge,
.rpm-chat-row-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  margin-left: 6px;
  animation: rpm-chat-badge-pulse 0.9s ease-out infinite;
}
#o-abrir-chat,
#tb-abrir-chat {
  position: relative;
}
.rpm-chat-orden-btn--pendiente {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.28);
}
.rpm-chat-row--pendiente {
  position: relative;
}
tr.rpm-chat-row--pendiente td:first-child,
.tb-card.rpm-chat-row--pendiente {
  box-shadow: inset 3px 0 0 #dc2626;
}
tr.click { position: relative; }
tr.click .rpm-chat-row-badge {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  margin: 0;
}
.oc-chat-slot {
  margin: 8px 0 2px;
  min-height: 0;
}
.oc-chat-slot[hidden] { display: none !important; }
.oc-chat-slot--on { display: block; }
.oc-chat-aviso {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 0;
  cursor: pointer;
  padding: 9px 11px;
  border-radius: 14px;
  background: #d1fae5;
  color: #065f46;
  box-shadow:
    0 0 0 2px #10b981,
    0 8px 18px rgba(16, 185, 129, 0.35);
  overflow: hidden;
  opacity: 1;
  animation: oc-chat-aviso-pulse 1s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oc-chat-aviso:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px #059669,
    0 12px 24px rgba(16, 185, 129, 0.45);
}
.oc-chat-aviso:active { transform: scale(0.98); }
.oc-chat-aviso-glow {
  display: none;
}
@keyframes oc-chat-aviso-pulse {
  0%, 100% {
    background: #d1fae5;
    box-shadow: 0 0 0 2px #10b981, 0 6px 14px rgba(16, 185, 129, 0.3);
  }
  50% {
    background: #6ee7b7;
    box-shadow: 0 0 0 4px #059669, 0 0 22px rgba(5, 150, 105, 0.65);
  }
}
.oc-chat-aviso-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(6, 95, 70, 0.25);
  z-index: 1;
}
.oc-chat-aviso-av--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.oc-chat-aviso-av--gerente { background: linear-gradient(145deg, #d97706, #b45309); }
.oc-chat-aviso-av--mecanico { background: linear-gradient(145deg, #22c55e, #15803d); }
.oc-chat-aviso-av--recepcion { background: linear-gradient(145deg, #3b82f6, #1d4ed8); }
.oc-chat-aviso-av--otro { background: linear-gradient(145deg, #059669, #047857); }
.oc-chat-aviso-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}
.oc-chat-aviso-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.oc-chat-aviso-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #047857;
}
.oc-chat-aviso-top strong {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #064e3b;
}
.oc-chat-aviso-n {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #047857;
  color: #ecfdf5;
  font-size: 0.72rem;
  font-weight: 800;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: rpm-chat-badge-pulse 0.9s ease-out infinite;
}
.oc-chat-aviso-prev {
  font-size: 0.72rem;
  color: #047857;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}
.oc-chat-slot--tabla {
  margin: 6px 0 0;
  max-width: 280px;
}
.oc-chat-slot--tabla .oc-chat-aviso {
  padding: 7px 9px;
  border-radius: 12px;
}
.oc-chat-slot--tabla .oc-chat-aviso-av { width: 28px; height: 28px; }
.oc-chat-slot--ficha {
  margin: 10px 0 0;
}
.oc-chat-slot--ficha .oc-chat-aviso {
  padding: 12px 14px;
  border-radius: 16px;
}
.oc-kb .oc-chat-slot { margin-top: 8px; margin-bottom: 4px; }
.tb-card .oc-chat-slot {
  width: 100%;
  margin: 6px 0;
}
.tb-card .oc-chat-aviso { pointer-events: auto; }

body.tema-dark .oc-chat-aviso {
  background: #065f46;
  color: #ecfdf5;
  box-shadow:
    0 0 0 2px #34d399,
    0 10px 24px rgba(0, 0, 0, 0.55);
  animation: oc-chat-aviso-pulse-dark 1s ease-in-out infinite;
}
@keyframes oc-chat-aviso-pulse-dark {
  0%, 100% {
    background: #065f46;
    box-shadow: 0 0 0 2px #34d399, 0 8px 16px rgba(0, 0, 0, 0.45);
  }
  50% {
    background: #047857;
    box-shadow: 0 0 0 5px #6ee7b7, 0 0 26px rgba(52, 211, 153, 0.7);
  }
}
body.tema-dark .oc-chat-aviso-top strong { color: #ecfdf5; }
body.tema-dark .oc-chat-aviso-ico { color: #6ee7b7; }
body.tema-dark .oc-chat-aviso-prev { color: #a7f3d0; }
body.tema-dark .oc-chat-aviso-n {
  background: #34d399;
  color: #064e3b;
}


/* Permisos usuarios + bloqueo */
.rpm-perm-bloqueado { opacity: 0.45; cursor: not-allowed !important; }
.rpm-perm-aviso {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
body.tema-dark .rpm-perm-aviso {
  background: #3f1d1d;
  border-color: #7f1d1d;
  color: #fecaca;
}
.usr-perm-modal {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  border-radius: 16px;
}
.usr-perm-modal--c {
  width: min(860px, calc(100vw - 20px));
}
.usr-perm-modal--elegante {
  background: #f7f8fb !important;
  color: #0f172a !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  color-scheme: light;
}
.usr-perm-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #1e3a5f;
  color: #fff;
  flex-shrink: 0;
}
.usr-perm-hd-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.usr-perm-hd h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.usr-perm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.16);
}
.usr-perm-pill--ok {
  background: rgba(45, 212, 191, 0.18);
  border-color: rgba(45, 212, 191, 0.35);
  color: #99f6e4;
}
.usr-perm-pill--ok::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}
.usr-perm-x {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.usr-perm-x:hover { background: rgba(255,255,255,0.18); }
.usr-perm-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 8px;
}
.usr-perm-ico {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}
.usr-perm-facil {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.usr-perm-sec { display: flex; flex-direction: column; gap: 10px; }
.usr-perm-paso {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.usr-perm-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1e3a5f;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.usr-perm-hint-linea {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}
.usr-perm-perfiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.usr-perm-perfil {
  position: relative;
  text-align: left;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 12px;
  cursor: pointer;
  color: #0f172a;
  font: inherit;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.usr-perm-perfil-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #334155;
}
.usr-perm-perfil-ico .usr-perm-ico { width: 20px; height: 20px; }
.usr-perm-perfil-txt strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.usr-perm-perfil-txt em {
  display: block;
  font-style: normal;
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.3;
}
.usr-perm-perfil:hover { border-color: #94a3b8; }
.usr-perm-perfil.on {
  border-color: #0d9488;
  background: #f0fdfa;
  box-shadow: 0 0 0 1px #0d9488, 0 8px 20px rgba(13, 148, 136, 0.12);
}
.usr-perm-perfil.on .usr-perm-perfil-ico {
  background: #ccfbf1;
  color: #0f766e;
}
.usr-perm-perfil-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0d9488;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usr-perm-perfil-check .usr-perm-ico { width: 14px; height: 14px; }
.usr-perm-objs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.usr-perm-obj {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  cursor: pointer;
  color: #334155;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  min-height: 56px;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.usr-perm-obj-lab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.usr-perm-obj-lab strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: inherit;
}
.usr-perm-obj-st {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
}
.usr-perm-obj-st.off { color: #94a3b8; }
.usr-perm-obj-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccfbf1;
  color: #0f766e;
  flex-shrink: 0;
}
.usr-perm-obj-ico .usr-perm-ico { width: 18px; height: 18px; }
.usr-perm-obj-mark {
  width: 26px;
  height: 26px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f8fafc;
  border: 2px solid #cbd5e1;
}
.usr-perm-obj-mark i {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  display: block;
  background: transparent;
}
.usr-perm-obj-mark .usr-perm-ico { width: 14px; height: 14px; }
.usr-perm-obj:hover { border-color: #94a3b8; }
.usr-perm-obj.open {
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.18);
  border-color: #1e3a5f;
}
.usr-perm-obj.on {
  border-color: #0f766e !important;
  background: #0d9488 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28);
}
.usr-perm-obj.on .usr-perm-obj-lab strong { color: #fff !important; }
.usr-perm-obj.on .usr-perm-obj-st { color: #ecfdf5 !important; font-weight: 800; }
.usr-perm-obj.on .usr-perm-obj-ico {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.usr-perm-obj.on .usr-perm-obj-mark {
  background: #fff !important;
  border-color: #fff !important;
  color: #0d9488 !important;
}
.usr-perm-obj.parcial {
  border-color: #d97706 !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.18);
}
.usr-perm-obj.parcial .usr-perm-obj-lab strong { color: #9a3412 !important; }
.usr-perm-obj.parcial .usr-perm-obj-st { color: #c2410c !important; font-weight: 800; }
.usr-perm-obj.parcial .usr-perm-obj-ico {
  background: #ffedd5 !important;
  color: #c2410c !important;
}
.usr-perm-obj.parcial .usr-perm-obj-mark {
  background: #ea580c !important;
  border-color: #ea580c !important;
  color: #fff !important;
}
.usr-perm-obj.on.open {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.35), 0 8px 18px rgba(13, 148, 136, 0.28);
}
.usr-perm-obj-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}
.usr-perm-obj-detalle {
  margin-top: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  color: #0f172a;
}
.usr-perm-obj-detalle.on {
  border-color: #0d9488;
  background: #f0fdfa;
}
.usr-perm-obj-detalle.parcial {
  border-color: #f59e0b;
  background: #fffbeb;
}
.usr-perm-obj-detalle-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.usr-perm-obj-detalle-hd strong {
  display: block;
  font-size: 0.98rem;
  color: #0f172a;
}
.usr-perm-obj-detalle-hd span {
  display: block;
  font-size: 0.78rem;
  color: #475569;
  margin-top: 2px;
  font-weight: 600;
}
.usr-perm-obj-detalle-acc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.usr-perm-obj-det-lab {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.usr-perm-obj-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.usr-perm-obj-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
}
.usr-perm-obj-check:hover { border-color: #0d9488; }
.usr-perm-obj-check input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #0d9488;
}
.usr-perm-obj-check span { min-width: 0; }
@media (max-width: 720px) {
  .usr-perm-obj-checks { grid-template-columns: 1fr; }
}
.usr-perm-pack {
  border: 1px solid #f0c36a !important;
  background: #fff8e8 !important;
  border-radius: 14px;
  padding: 14px 16px;
  color: #1c1917 !important;
}
.usr-perm-pack-hd { margin-bottom: 10px; }
.usr-perm-pack-hd strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #92400e !important;
}
.usr-perm-pack-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.usr-perm-pack-list li { margin: 0; padding: 0; }
.usr-perm-pack-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: #1c1917 !important;
}
.usr-perm-pack-item:hover {
  border-color: #f59e0b;
  background: #fff;
}
.usr-perm-pack-mark {
  color: #d97706 !important;
  font-weight: 800;
  flex-shrink: 0;
}
.usr-perm-pack-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.usr-perm-pack-txt strong {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1c1917 !important;
  line-height: 1.3;
}
.usr-perm-pack-txt em {
  font-style: normal;
  font-size: 0.72rem;
  color: #44403c !important;
  line-height: 1.3;
}
.usr-perm-pack-acc {
  font-size: 0.7rem;
  font-weight: 700;
  color: #b45309 !important;
  flex-shrink: 0;
}
.usr-perm-pack-vacio {
  margin: 0 0 8px;
  font-size: 0.84rem;
  color: #44403c !important;
}
.usr-perm-pack-add-lab {
  margin: 12px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #78350f !important;
}
.usr-perm-pack-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.usr-perm-pack-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed #d97706;
  background: #fff;
  color: #92400e !important;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.usr-perm-pack-add-btn:hover {
  background: #fffbeb;
  border-style: solid;
}
.usr-perm-pack-nota {
  margin: 12px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #44403c !important;
}
.usr-perm-pack-nota .usr-perm-ico {
  width: 14px;
  height: 14px;
  color: #b45309;
  flex-shrink: 0;
  margin-top: 2px;
}
.usr-perm-pack-nota em {
  font-style: normal;
  font-weight: 800;
  color: #1c1917 !important;
}
.usr-perm-avanzado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.usr-perm-ficha--mini { margin-bottom: 4px; }
.usr-perm-modal--c .usr-perm-ft {
  margin: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}
.usr-perm-btn-soft {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 10px !important;
  font-weight: 600;
}
.usr-perm-btn-soft .usr-perm-ico { width: 16px; height: 16px; }
.usr-perm-btn-ok {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #0d9488 !important;
  border-color: #0d9488 !important;
  border-radius: 10px !important;
  min-width: 120px;
  justify-content: center;
}
.usr-perm-btn-ok .usr-perm-ico { width: 16px; height: 16px; }
body.tema-dark .usr-perm-modal--elegante,
body.tema-dark .usr-perm-modal--elegante .usr-perm-main {
  background: #f7f8fb !important;
  color: #0f172a !important;
}
body.tema-dark .usr-perm-modal--elegante .usr-perm-paso { color: #0f172a !important; }
body.tema-dark .usr-perm-modal--elegante .usr-perm-hint-linea { color: #64748b !important; }
body.tema-dark .usr-perm-modal--elegante .usr-perm-perfil,
body.tema-dark .usr-perm-modal--elegante .usr-perm-obj:not(.on):not(.parcial) {
  background: #fff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body.tema-dark .usr-perm-modal--elegante .usr-perm-obj.on {
  background: #0d9488 !important;
  border-color: #0f766e !important;
  color: #fff !important;
}
body.tema-dark .usr-perm-modal--elegante .usr-perm-obj.parcial {
  background: #fff7ed !important;
  border-color: #d97706 !important;
  color: #9a3412 !important;
}
body.tema-dark .usr-perm-modal--elegante .usr-perm-perfil-txt em { color: #64748b !important; }
body.tema-dark .usr-perm-modal--elegante .usr-perm-ft {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}
body.tema-dark .usr-perm-pack,
body.tema-dark .usr-perm-modal--elegante .usr-perm-pack {
  background: #fff8e8 !important;
  border-color: #f0c36a !important;
  color: #1c1917 !important;
}
@media (max-width: 720px) {
  .usr-perm-perfiles { grid-template-columns: 1fr; }
  .usr-perm-pack-list { grid-template-columns: 1fr; }
  .usr-perm-hd-main h2 { width: 100%; }
}
.usr-perm-ficha {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
}
.usr-perm-ficha .usr-av {
  width: 52px;
  height: 52px;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.usr-perm-ficha .usr-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.usr-perm-ficha-datos {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}
.usr-perm-ficha-fila {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.usr-perm-ficha-fila span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3);
  font-weight: 600;
}
.usr-perm-ficha-fila strong {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usr-perm-ficha-esp {
  grid-column: 1 / -1;
}
.usr-perm-ficha-esp .usr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.usr-perm-ficha-esp .usr-chip {
  font-size: 0.7rem;
  padding: 2px 7px;
}
.usr-perm-ficha-estado {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--text3);
}
.usr-perm-hint {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text2, var(--text3));
}
.usr-perm-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.usr-perm-chip {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}
.usr-perm-chip strong { display: block; font-size: 0.88rem; margin-bottom: 2px; }
.usr-perm-chip span { display: block; font-size: 0.72rem; color: var(--text3); line-height: 1.25; }
.usr-perm-chip:hover { border-color: var(--navy, #1e3a5f); }
.usr-perm-chip.on {
  background: var(--navy, #1e3a5f);
  border-color: var(--navy, #1e3a5f);
  color: #fff;
}
.usr-perm-chip.on span { color: rgba(255,255,255,0.78); }
.usr-perm-lab { margin: 0 0 8px; font-size: 0.8rem; color: var(--text3); flex-shrink: 0; }
.usr-perm-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  margin-bottom: 0;
}
.usr-perm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  overflow: auto;
  min-height: 0;
  max-height: 100%;
  padding-right: 2px;
}
.usr-perm-card {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 12px 10px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 76px;
}
.usr-perm-card strong { font-size: 0.9rem; }
.usr-perm-card:hover { border-color: var(--navy, #1e3a5f); }
.usr-perm-card.on {
  border-color: var(--navy, #1e3a5f);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.18);
}
.usr-perm-card.is-off { opacity: 0.78; }
.usr-perm-card-st { font-size: 0.78rem; font-weight: 600; }
.usr-perm-card-st--on { color: #15803d; }
.usr-perm-card-st--off { color: var(--text3); }
.usr-perm-drawer {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
  overflow: auto;
  min-height: 0;
  max-height: 100%;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}
.usr-perm-drawer-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.usr-perm-drawer-hd strong { font-size: 0.95rem; }
.usr-perm-drawer-hd em { font-style: normal; font-size: 0.78rem; color: var(--text3); }
.usr-perm-drawer .usr-perm-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
.usr-perm-scroll { overflow: auto; max-height: min(58vh, 480px); padding-right: 4px; }
.usr-perm-area { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--surface); }
.usr-perm-area summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; cursor: pointer; font-weight: 600; list-style: none;
}
.usr-perm-area summary::-webkit-details-marker { display: none; }
.usr-perm-area summary em { font-style: normal; font-weight: 500; color: var(--text3); font-size: 0.8rem; }
.usr-perm-list { padding: 0; display: flex; flex-direction: column; gap: 4px; }
.usr-perm-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.usr-perm-row:hover { background: var(--surface); }
.usr-perm-row input { margin-top: 3px; flex-shrink: 0; }
.usr-perm-row span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.usr-perm-row strong { font-size: 0.88rem; font-weight: 600; }
.usr-perm-row em { font-style: normal; font-size: 0.75rem; color: var(--text3); }
.usr-perm-modal--c .usr-perm-ft {
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  position: relative;
  z-index: 2;
  justify-content: flex-end;
}
.usr-perm-modal.cla-modal {
  padding: 0;
  overflow: hidden;
}
.usr-perm-ft { flex-wrap: wrap; gap: 8px; }
body.tema-dark .usr-perm-chip.on { color: #0b1220; }
body.tema-dark .usr-perm-chip.on span { color: rgba(11,18,32,0.75); }
body.tema-dark .usr-perm-card-st--on { color: #4ade80; }
@media (max-width: 760px) {
  .usr-perm-chips { grid-template-columns: 1fr; }
  .usr-perm-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .usr-perm-grid,
  .usr-perm-drawer {
    max-height: none;
    overflow: visible;
  }
  .usr-perm-drawer { min-height: 160px; }
}