/* FULLMAQUI — sistema visual del cliente (Claude Design "Fullmaqui.dc").
   Helvetica + acentos monoespaciados; blanco; bordes #ececec; radio 12/8;
   estados = punto de color + texto; botones negros. */

:root {
  --ink: #16161a;
  --text-2: #52525b;
  --muted: #71717a;
  --faint: #a1a1aa;
  --ghost: #c4c4c8;
  --line: #ececec;
  --line-soft: #f6f6f6;
  --surface: #fafafa;
  --hover: #f4f4f5;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 12px;
  --radius-s: 8px;
  /* Claude Design v2 (Perfil de empleado.dc): acento azul + fondo cálido */
  --accent: oklch(0.62 0.11 240);
  --accent-soft: oklch(0.96 0.02 240);
  --accent-deep: oklch(0.4 0.1 240);
  --warm-bg: oklch(0.97 0.005 85);
}

.anton { font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: 0.01em; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: #fff; }

.hidden { display: none !important; }
.muted { color: var(--faint); font-size: 12.5px; }
.mono { font-family: var(--mono); }

/* ---------- Login v2 ("Login.dc") ----------
   Tarjeta centrada en una columna sobre el fondo cálido del diseño, en vez de
   la pantalla dividida con la ilustración. Funciona igual en escritorio y en
   celular: la misma columna, solo cambian los tamaños. */

#login-view {
  min-height: 100vh;
  min-height: 100dvh; /* en el celular descuenta la barra del navegador */
  display: flex;
  flex-direction: column;
  background: oklch(0.97 0.005 85);
}

.lg-header { padding: 30px 40px; display: flex; align-items: center; gap: 11px; }
.lg-logo {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: oklch(0.2 0.01 70);
  display: flex; align-items: center; justify-content: center;
}
.lg-logo span { width: 11px; height: 11px; background: oklch(0.62 0.11 240); border-radius: 3px; }
.lg-header .anton {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: 22px; text-transform: uppercase; color: oklch(0.2 0.01 70);
}

.lg-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 24px 60px; }
.lg-card { width: 100%; max-width: 410px; display: flex; flex-direction: column; gap: 26px; }

.lg-intro { display: flex; flex-direction: column; gap: 9px; }
.lg-kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.5 0.1 240);
}
.lg-title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: 52px; line-height: 0.9; text-transform: uppercase; color: oklch(0.2 0.01 70);
}
.lg-sub { font-size: 15px; color: oklch(0.45 0.01 70); line-height: 1.5; }

#login-view form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
#login-view form label { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.lg-lbl { font-size: 13px; color: oklch(0.4 0.01 70); font-weight: 600; }
#login-view form input {
  width: 100%; height: auto;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 15px;
  color: oklch(0.24 0.01 70); background: #fff;
  border: 1px solid oklch(0.88 0.006 85); border-radius: 13px;
  padding: 14px 16px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#login-view form input:focus {
  border-color: oklch(0.62 0.11 240);
  box-shadow: 0 0 0 3px oklch(0.62 0.11 240 / 0.15);
}
#login-view form input::placeholder { color: oklch(0.7 0.01 70); }

.lg-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; height: auto; margin-top: 4px;
  background: oklch(0.2 0.01 70); border: none; border-radius: 30px;
  padding: 15px; color: #fff; cursor: pointer;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
}
.lg-btn span {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: oklch(0.62 0.11 240); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lg-btn:disabled { opacity: 0.6; cursor: default; }

.lg-link { align-self: center; font-size: 14px; color: oklch(0.4 0.1 240); text-decoration: none; }
.lg-link:hover { color: oklch(0.5 0.13 240); }

.lg-nota { font-size: 13.5px; color: oklch(0.45 0.01 70); line-height: 1.5; margin: 0; }
.lg-nota.lg-centro { text-align: center; font-size: 13px; color: oklch(0.55 0.01 70); }

.lg-o { display: flex; align-items: center; gap: 14px; }
.lg-o span:first-child, .lg-o span:last-child { flex: 1; height: 1px; background: oklch(0.9 0.006 85); }
.lg-o .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: oklch(0.6 0.01 70); }

#ms-login { display: flex; flex-direction: column; gap: 12px; }
#ms-login.hidden { display: none; }
.lg-ms {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: auto;
  background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 30px;
  padding: 13px; cursor: pointer;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 14px; color: oklch(0.3 0.01 70);
}
.lg-ms:hover { border-color: oklch(0.78 0.01 85); }

.lg-footer {
  padding: 22px 40px; display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; color: oklch(0.6 0.01 70);
}

/* El link de recuperación que devuelve el servidor en desarrollo. */
#login-view .devlink { font-size: 12px; overflow-wrap: anywhere; }

/* ---- Celular ---- */
@media (max-width: 560px) {
  .lg-header { padding: 22px 22px 10px; }
  .lg-header .anton { font-size: 19px; }
  .lg-logo { width: 28px; height: 28px; }
  .lg-main { padding: 10px 22px 40px; align-items: flex-start; }
  .lg-card { gap: 22px; }
  .lg-title { font-size: 40px; }
  .lg-sub { font-size: 14px; }
  .lg-kicker { font-size: 11px; letter-spacing: 0.16em; }
  /* 16px evita que iOS haga zoom al enfocar el campo. */
  #login-view form input { font-size: 16px; padding: 13px 15px; }
  .lg-footer { padding: 18px 22px; font-size: 10px; }
}

.devlink {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--info);
  border-radius: var(--radius-s);
  font-size: 12px;
  word-break: break-all;
}
.devlink a { color: var(--info); }

/* ---------- Shell: barra superior píldora (Claude Design v2) + topbar ---------- */

/* El fondo cálido del diseño va en TODA la app: la barra superior flota sobre
   él como en los mockups, y no se ve la franja blanca detrás de la píldora. */
#shell { display: flex; flex-direction: column; height: 100vh; background: var(--warm-bg); }

#topnav {
  flex-shrink: 0;
  margin: 14px 20px 4px;
  display: flex; align-items: center; gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 44px;
  padding: 9px 12px 9px 22px;
  box-shadow: 0 12px 30px -22px rgba(60, 55, 45, 0.5);
  position: relative;
  z-index: 20;
}
.tn-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.tn-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.tn-logo span { width: 9px; height: 9px; background: #fff; border-radius: 2px; }
.tn-brand .anton { font-size: 19px; text-transform: uppercase; color: var(--ink); }

#main-nav {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 3px; flex-wrap: wrap;
}
#main-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border-radius: 22px;
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
#main-nav a:hover { background: var(--hover); color: var(--ink); }
#main-nav a.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
#main-nav a.active::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* Grupo "Taller": Órdenes de trabajo, Actividades y Registro de horas. */
.tn-group { position: relative; }
.tn-group-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; height: auto;
  border: none; background: none; border-radius: 22px;
  font-family: inherit; font-size: 13.5px; color: var(--text-2);
  white-space: nowrap; cursor: pointer;
}
.tn-group-btn:hover { background: var(--hover); color: var(--ink); }
.tn-group-btn.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.tn-group-btn.active::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.tn-group-btn svg { transition: transform .15s; }
.tn-group.abierto .tn-group-btn svg { transform: rotate(180deg); }
.tn-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 220px; z-index: 45;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 7px; flex-direction: column; gap: 2px;
  box-shadow: 0 20px 44px -18px rgba(22, 22, 26, 0.35);
}
/* La clase va en el GRUPO, no en el body. Cuando existia un solo desplegable
   (Taller) daba lo mismo; con dos, una clase global abria los dos a la vez y
   solo el boton de Taller la encendia -- por eso Bodega no respondia. */
.tn-group.abierto .tn-menu { display: flex; }
#main-nav .tn-menu a { padding: 10px 14px; border-radius: 11px; }

.tn-user {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.tn-user-info { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; }
#user-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.15;
  max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#user-role {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
#user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}
#btn-logout {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
#btn-logout:hover { background: var(--hover); color: var(--ink); }

#topbar {
  height: 60px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  position: sticky; top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.topbar-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
#btn-menu {
  display: none; /* visible solo en móvil (media query al final) */
  width: 34px; height: 34px;
  padding: 0;
  align-items: center; justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
  align-self: center;
}
#nav-backdrop { display: none; }
#page-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
#page-meta { font-size: 12.5px; color: var(--faint); font-family: var(--mono); }
#env-badge {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
}

main { flex: 1; overflow: auto; padding: 24px; background: var(--warm-bg); }
/* Todas las vistas comparten el mismo ancho y quedan centradas, como las
   pantallas del estilo v2 (que ya lo hacían con .np). Antes las vistas viejas
   —Personas, Vehículos, Bodega— se estiraban hasta el borde de la ventana. */
main > section { max-width: 1560px; margin-left: auto; margin-right: auto; }

/* ---------- Tipografía de secciones ---------- */

h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }

.section-kicker {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px 2px;
}
.section-kicker::before {
  content: "";
  width: 13px; height: 13px;
  border-left: 1px solid #d4d4d8;
  border-bottom: 1px solid #d4d4d8;
  border-bottom-left-radius: 3px;
  align-self: flex-end;
  margin-bottom: 7px;
}
.section-kicker span {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-family: var(--mono);
}

/* ---------- Controles ---------- */

input, select, textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); }

button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-2);
  border-radius: var(--radius-s);
  cursor: pointer;
}
button:hover { border-color: #d4d4d8; color: var(--ink); }
button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
button.primary:hover { background: #000; }
button.danger { color: var(--danger); }
button.danger:hover { border-color: var(--danger); }

/* ---------- Home ---------- */

#view-home h2 { font-size: 24px; margin-bottom: 4px; }
#home-cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.mod-row {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  min-height: 108px;
}
a.mod-row:hover { border-color: #d4d4d8; background: var(--surface); }
.mod-row h3 { margin: 0 0 4px; font-size: 15px; }
.mod-row p { margin: 0; font-size: 12.5px; color: var(--muted); }
.mod-row .arrow { color: var(--faint); font-size: 15px; align-self: flex-end; }
a.mod-row:hover .arrow { color: var(--ink); }
.mod-row.disabled h3, .mod-row.disabled p { color: var(--ghost); }
.mod-row .tag {
  align-self: flex-end;
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ---------- Toolbars ---------- */

/* Barra de búsqueda y filtros: todo a la misma altura, mismo redondeo y mismo
   borde que la caja de búsqueda, para que se lea como UNA barra y no como
   controles sueltos (reporte de Francisco con captura, 2026-08-05). */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.toolbar input[type="search"] { flex: 1; min-width: 200px; height: 40px; }
.toolbar select,
.toolbar input[type="date"],
.toolbar input[type="number"] {
  height: 40px; border-radius: 12px;
  border: 1px solid oklch(0.9 0.006 85); background: #fff;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 14px;
  color: oklch(0.3 0.01 70); padding: 0 12px;
}
.toolbar select:focus, .toolbar input[type="date"]:focus, .toolbar input[type="number"]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.62 0.11 240 / 0.15); outline: none;
}
/* El "incluir dados de baja" pasa a ser una píldora, no una casilla suelta. */
.toolbar .chk {
  display: flex; gap: 8px; align-items: center; height: 40px;
  padding: 0 14px; border: 1px solid oklch(0.9 0.006 85); border-radius: 12px;
  background: #fff; font-size: 13px; color: oklch(0.42 0.01 70);
  white-space: nowrap; cursor: pointer;
}
.toolbar .chk:hover { border-color: oklch(0.8 0.01 85); }
.toolbar .chk input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.toolbar button { height: 40px; border-radius: 12px; padding: 0 16px; font-size: 13.5px; }

/* ---------- Tablas (tarjeta con grid de filas) ---------- */

/* Contenedor con scroll horizontal: en desktop es neutro; en móvil permite
   deslizar la tabla hacia el lado sin romper el layout de la página.
   El radio del recorte debe calzar con el de la tabla envuelta (12 normal,
   10 en .sub) para no cercenar los bordes de las esquinas. */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); }
.tbl-wrap:has(> table.sub) { border-radius: 10px; }
.content > .tbl-wrap { flex: 1; min-width: 0; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff; /* el fondo de la app es cálido: las tablas son tarjetas blancas */
}
th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface); }
tbody tr.selected { background: var(--surface); box-shadow: inset 2px 0 0 var(--ink); }
tr.inactive td { color: var(--faint); }
td strong { font-family: var(--mono); font-size: 12px; font-weight: 500; }

table.sub { border-radius: 10px; }
table.sub th { font-size: 10.5px; padding: 9px 12px; }
table.sub td { font-size: 12.5px; padding: 10px 12px; }

/* Estados: punto de color + texto (sin pills) */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pill.on { color: var(--ok); }
.pill.on::before { background: var(--ok); }
.pill.off { color: var(--danger); }
.pill.off::before { background: var(--danger); }

.tag {
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ---------- Vehículos: menú agrupado por tipo ---------- */

#v-groups, #e-groups { display: flex; flex-direction: column; gap: 8px; }
.content > #e-groups { flex: 1; min-width: 0; }
/* En escritorio los grupos van a 2 columnas (84 tipos = mucho scroll en una);
   el grupo abierto ocupa el ancho completo para que su tabla respire.
   `stretch` empareja el alto de las dos tarjetas de cada fila: si una trae
   resumen de estados y la otra no, igual quedan alineadas. */
@media (min-width: 900px) {
  #v-groups {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch; gap: 8px 14px;
  }
  #v-groups .vg-card:has(.tbl-wrap) { grid-column: 1 / -1; }
  #v-groups > p.muted { grid-column: 1 / -1; }
}
.vg-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.vg-card:hover { border-color: oklch(0.86 0.01 85); }
.vg-head {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 16px; cursor: pointer;
}
.vg-head:hover { background: var(--surface); }
.vg-head h3 {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vg-count {
  font-size: 11.5px; color: var(--muted); flex: none;
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px;
}
.vg-meta {
  margin-left: auto; display: flex; gap: 14px; flex: none;
  white-space: nowrap; font-size: 12px;
}
.vg-chev { color: var(--faint); transition: transform 0.15s; flex-shrink: 0; }
.vg-chev.open { transform: rotate(90deg); }
.vg-card .tbl-wrap { border-top: 1px solid var(--line); border-radius: 0; }
.vg-card table { border: none; border-radius: 0; }

/* ---------- Paginación ---------- */

.pager { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager span { font-family: var(--mono); font-size: 12px; }

/* ---------- Ficha de empleado (panel lateral) ---------- */

.content { display: flex; gap: 24px; align-items: flex-start; }

aside#detail {
  width: 380px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.detail-head h2 { font-size: 17px; margin: 0 0 14px; }
.detail-head button { border: none; padding: 2px 6px; font-size: 14px; color: var(--faint); background: none; }
.detail-head button:hover { color: var(--ink); }

aside dl, #v-detail dl, #w-detail dl, #b-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: 13px;
  margin: 0 0 16px;
}
aside dt, #v-detail dt, #w-detail dt, #b-detail dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  align-self: center;
}
aside dd, #v-detail dd, #w-detail dd, #b-detail dd { margin: 0; }

.detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.detail-actions button { padding: 6px 11px; font-size: 12px; }

aside h3, #v-detail h3, #w-detail h3, #b-detail h3, .perfil-card h3 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 10px;
}

/* ---------- Detalle expandido bajo la fila ---------- */

#v-detail-host, #w-detail-host, #b-detail-host { display: none; }

tr.detail-row { cursor: default; }
tr.detail-row:hover { background: #fff; }
tr.detail-row > td { padding: 22px 18px 26px; background: var(--surface); border-bottom: 1px solid var(--line); }

#v-detail, #w-detail, #b-detail {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr;
  gap: 34px;
  align-items: start;
}
@media (max-width: 1100px) { #v-detail, #w-detail, #b-detail { grid-template-columns: 1fr; gap: 22px; } }
#b-detail { grid-template-columns: 0.8fr 2fr; }

.v-col-full { grid-column: 1 / -1; }
/* Los hijos de grid no encogen bajo su min-content salvo min-width: 0 explícito
   (sin esto, una sub-tabla ancha estira la columna y desborda el detalle). */
.v-col { min-width: 0; }

#v-detail .detail-head h2, #w-detail .detail-head h2, #b-detail .detail-head h2 { font-size: 16px; }
#v-detail .detail-head button, #w-detail .detail-head button, #b-detail .detail-head button {
  border: none; background: none; padding: 2px 6px; font-size: 14px; color: var(--faint);
}

.status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 12.5px;
}
.chip button { border: none; background: none; padding: 0 2px; font-size: 11px; color: var(--faint); }
.chip button:hover { color: var(--danger); }

/* ---------- Documentos ---------- */

.doc-upload { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.doc-upload input[type="file"] { flex: 1; min-width: 140px; font-size: 12px; border: none; padding: 5px 0; }
.doc-upload select, .doc-upload input, .doc-upload button { font-size: 12px; padding: 6px 9px; }

.doc-list { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.doc-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.doc-list li:last-child { border-bottom: none; }
.doc-list button { padding: 3px 9px; font-size: 11.5px; }

/* ---------- Mi perfil ---------- */

.perfil-card {
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.perfil-card dl {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 22px;
  font-size: 13.5px; margin: 0;
}
.perfil-card dt {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); align-self: center;
}
.perfil-card dd { margin: 0; }

/* ---------- Usuarios ---------- */

#view-usuarios table { max-width: 1000px; }
#view-usuarios select { font-size: 12.5px; padding: 6px 8px; }
#view-usuarios button { padding: 6px 10px; font-size: 12px; }

/* ---------- Diálogos ---------- */

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(22, 22, 26, 0.12);
  padding: 24px;
  width: 430px;
  max-width: 92vw;
}
dialog::backdrop { background: rgba(22, 22, 26, 0.3); }
dialog h2 { font-size: 16px; margin-bottom: 18px; }
dialog form { display: flex; flex-direction: column; gap: 11px; }
dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 10px 0 0; padding: 0; }
.form-row { display: flex; gap: 10px; }
.form-row label { flex: 1; }
#dlg-vehicle { width: 520px; }

/* ---------- Registro de actividades ---------- */

.reg-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) 400px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1000px) { .reg-grid { grid-template-columns: 1fr; gap: 28px; } }

.reg-form {
  display: flex; flex-direction: column; gap: 13px;
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.reg-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.reg-form .form-row { display: flex; gap: 12px; }
.reg-form .form-row label { flex: 1; }
.reg-submit { margin-top: 4px; padding: 12px; font-size: 13.5px; }
/* Guardar / Cancelar cuando el formulario está editando una actividad. */
.reg-acciones { display: flex; gap: 10px; align-items: center; }
.reg-acciones .reg-submit { flex: 1; }
.reg-acciones #reg-cancelar { text-decoration: none; white-space: nowrap; }
.reg-acciones #reg-cancelar.hidden { display: none; }

/* Aviso de turno que pasa la medianoche (la fecha de término se movió sola). */
#reg-cruce {
  margin: 10px 0 0; padding: 8px 12px; border-radius: 10px;
  background: oklch(0.95 0.03 260); color: oklch(0.42 0.09 260);
  font-size: 12px; font-weight: 500;
}

.time-block { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px; background: var(--surface); }
.time-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.time-row { display: flex; gap: 24px; flex-wrap: wrap; }
.time-group { display: flex; align-items: center; gap: 6px; }
.time-group > span { font-size: 11.5px; color: var(--muted); margin-right: 4px; }
.time-group select {
  font-family: var(--mono);
  font-size: 16px; font-weight: 500;
  padding: 9px 8px; min-width: 62px; text-align: center;
  background: #fff;
}
.time-group b { font-size: 16px; font-family: var(--mono); }
.presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.presets button { padding: 5px 10px; font-size: 11.5px; }
/* En permisos el atajo no solo rellena dos campos: ES lo que se esta pidiendo.
   Sin marca visible no hay forma de saber si se pidio la manana o el dia entero. */
.presets button.on {
  border-color: var(--accent); color: var(--accent-deep);
  background: oklch(0.96 0.025 240); font-weight: 600;
}

/* Ruedas táctiles de hora (solo móvil): deslizar con el dedo, snap al centro */
.time-wheels { display: none; flex-direction: column; gap: 10px; }
.tw-group { display: flex; align-items: center; gap: 6px; }
.tw-group > span { font-size: 11.5px; color: var(--muted); width: 52px; flex-shrink: 0; }
.tw-group > b { font-family: var(--mono); font-size: 16px; }
.wheel-box { position: relative; }
.wheel-box::before {
  content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 36px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  opacity: 0.25; pointer-events: none;
}
.wheel-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 8px;
  background: linear-gradient(#fff 2%, transparent 34%, transparent 66%, #fff 98%);
}
.wheel {
  height: 108px; width: 54px;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  scrollbar-width: none;
}
.wheel::-webkit-scrollbar { display: none; }
.wheel-pad { height: 36px; }
.wheel-item {
  height: 36px; display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
  font-family: var(--mono); font-size: 17px; color: var(--faint);
  cursor: pointer;
}
.wheel-item.sel { color: var(--ink); font-weight: 600; }

.reg-timeline h3 { margin-bottom: 4px; }
.reg-timeline > .muted { margin: 0 0 12px; font-size: 12px; }
#tl-scroll {
  height: 560px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
#tl-scroll::-webkit-scrollbar { width: 8px; }
#tl-scroll::-webkit-scrollbar-thumb { background: #e2e2e2; border-radius: 8px; }
/* El alto lo fija renderTimeline() según la escala (48px/hora en desktop,
   30px en el celular, donde la franja va al costado del formulario). */
#tl-canvas { position: relative; height: 1152px; }
.tl-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); height: 48px; }
.tl-hour span {
  position: absolute; top: 3px; left: 8px;
  font-family: var(--mono);
  font-size: 10px; color: var(--ghost);
}
.tl-block {
  position: absolute; left: 56px; right: 10px;
  background: var(--hover);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tl-block b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; margin-right: 5px; }
.tl-block.merma { background: #fdf3f3; border-left-color: var(--danger); }
.tl-block.preview { background: #eef3ff; border-color: #d7e2fd; border-left-color: var(--info); color: var(--info); }
.tl-block.preview.overlap { background: #fdeeee; border-color: #f6d5d5; border-left-color: var(--danger); color: var(--danger); }
#tl-notime-wrap { margin-top: 14px; }
#tl-notime-wrap h3 {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Panel Horas (puntos de cumplimiento) ---------- */

.toolbar .tabs { margin-bottom: 0; border-bottom: none; }
#h-tbl th, #h-tbl td { text-align: center; padding: 7px 5px; }
#h-tbl th:first-child, #h-tbl td:first-child { text-align: left; padding-left: 14px; white-space: nowrap; }
#h-thead small { display: block; font-size: 8.5px; color: var(--ghost); letter-spacing: 0; }
#h-tbl .h-off { background: var(--surface); }
.hdot {
  width: 15px; height: 15px; border-radius: 50%;
  border: none; padding: 0; display: inline-block; vertical-align: middle;
  cursor: pointer;
}
.hdot.ok { background: var(--ok); }
.hdot.bad { background: var(--danger); }
/* Amarillo: cargó HO pero no completó la jornada. Separarlo del rojo distingue
   "trabajó menos de lo exigido" de "no cargó nada", que se corrigen distinto. */
.hdot.parcial { background: oklch(0.8 0.16 85); }
/* Más horas ordinarias que la jornada: imposible sin superposición, o sea
   actividades duplicadas. Violeta para que no se confunda con verde ni rojo. */
.hdot.dup { background: oklch(0.55 0.2 300); }
.hdot.off { background: #e4e4e7; cursor: default; }
.hdot.extra { background: #fff; border: 2px solid var(--ok); }
.hdot.sel { outline: 2px solid var(--ink); outline-offset: 2px; }
.hdot.leyenda { width: 11px; height: 11px; cursor: default; }
#h-detail { margin-top: 22px; }
#h-detail-title { margin-bottom: 8px; }
#h-date { height: 34px; }

@media (max-width: 820px) {
  /* La primera columna (nombre) queda fija mientras los días se deslizan */
  #h-tbl th:first-child, #h-tbl td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
}

/* ---------- Bodega: pestañas ---------- */

.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tab {
  border: none; background: none;
  padding: 9px 14px 11px;
  font-size: 13.5px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); border-color: transparent; }
.tab.active { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }

#b-d-items select { font-size: 12px; padding: 4px 6px; }
#b-d-items button { padding: 4px 8px; font-size: 11px; }

.reading-latest { display: flex; gap: 36px; margin-bottom: 14px; }
.reading-box { display: flex; flex-direction: column; gap: 2px; }
.reading-label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
}
.reading-value { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.reading-value small { font-size: 12px; color: var(--muted); font-weight: 400; }
.reading-date { font-family: var(--mono); font-size: 11px; color: var(--faint); }

#frm-reading input[name="value"] { width: 130px; font-family: var(--mono); }
#frm-reading input[name="notes"] { flex: 1; min-width: 140px; }

/* ---------- Páginas de perfil (vehículo / empleado) ---------- */

.breadcrumb {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb > span { color: #d4d4d8; }
.breadcrumb .mono { color: var(--ink); font-size: 12px; }

.profile-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 30px;
}
.profile-head h2 { font-size: 22px; margin: 0; }
.profile-sub { font-size: 12px; color: var(--faint); margin-top: 4px; }
.profile-sub-plain { font-size: 13px; color: var(--muted); margin-top: 3px; }
.profile-id { display: flex; align-items: center; gap: 16px; }
.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 600;
  flex-shrink: 0;
}
.profile-statuses { display: flex; gap: 14px; flex-wrap: wrap; }
.dot-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.dot-status > span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 1100px) { .profile-grid { grid-template-columns: 1fr; } }
/* Las columnas del perfil deben poder encoger (min-width:0) y los valores
   largos sin espacios (correos, notas) deben cortarse, no desbordar. */
.profile-grid > * { min-width: 0; }
.spec-v, .ot-extra, .act-info, .act-meta { overflow-wrap: anywhere; }

.prof-h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink); text-transform: none; }

.spec-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.photo-ph {
  height: 140px;
  background-color: var(--surface);
  background-image: radial-gradient(#e4e4e4 1px, transparent 1px);
  background-size: 18px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.photo-ph span {
  position: absolute; bottom: 8px; left: 12px;
  font-family: var(--mono); font-size: 11px; color: #b4b4b8;
}
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; }
.spec-cell { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.spec-cell:nth-child(2n) { border-right: none; }
.spec-k {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.spec-v { font-size: 13.5px; }

.ot-cards { display: flex; flex-direction: column; gap: 8px; }
.ot-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ot-card-head {
  display: grid; grid-template-columns: 92px 1fr auto auto; gap: 12px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
}
.ot-card-head:hover { background: var(--surface); }
.ot-id { font-size: 12px; font-weight: 500; }
.ot-task { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-badge {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.ot-chev { color: var(--faint); transition: transform 0.15s; }
.ot-chev.open { transform: rotate(180deg); }
.ot-card-body { padding: 4px 16px 14px; border-top: 1px solid var(--line-soft); }
.ot-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 12px 0; }
.ot-meta .spec-cell { padding: 0; border: none; }
.ot-extra { font-size: 13px; line-height: 1.5; color: var(--text-2); border-top: 1px solid var(--line-soft); padding-top: 11px; }

.doc-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--surface); }
.doc-ic {
  width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 11.5px; color: var(--faint); }

.act-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 4px 0; }
.act-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.act-row:last-child { border-bottom: none; }
.act-time { font-size: 11.5px; color: var(--muted); padding-top: 2px; }
.act-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-top: 6px; flex-shrink: 0; }
.act-info { font-size: 13px; min-width: 0; }
.act-meta { font-size: 11.5px; color: var(--faint); margin-top: 1px; }

/* ---------- Perfil de empleado (Claude Design v2 editorial) ---------- */

/* (el fondo cálido ya es global; np-bg se mantiene por si alguna vista lo pide) */
body.np-bg main { background: var(--warm-bg); }
/* `.np a { color: inherit }` ganaba por especificidad y dejaba el botón negro
   con texto negro: los botones del hero fijan su color. */
.np a.np-btn-solid, .np button.np-btn-solid { color: #fff; }
.np a.np-btn-ghost { color: oklch(0.4 0.01 70); }
.np a.np-btn-ghost:hover { color: oklch(0.2 0.01 70); }
.np {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: oklch(0.24 0.01 70);
  max-width: 1560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
  padding: 6px 4px 44px;
}
.np .mono, .np-k { font-family: 'JetBrains Mono', monospace; }
.np a { text-decoration: none; color: inherit; }
.np-k { font-size: 11px; letter-spacing: 0.14em; color: oklch(0.55 0.01 70); text-transform: uppercase; }
.np-v { font-size: 18px; font-weight: 600; margin-top: 5px; color: oklch(0.24 0.01 70); overflow-wrap: anywhere; }
.np-v.vacio { color: oklch(0.7 0.01 70); font-weight: 500; }
.np-title { font-family: 'Anton', sans-serif; font-size: 22px; text-transform: uppercase; color: oklch(0.2 0.01 70); letter-spacing: 0.01em; }
.np-sect { display: flex; align-items: center; gap: 14px; }
.np-sect .np-hr { flex: 1; height: 1px; background: oklch(0.9 0.006 85); }
.np-pill { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: oklch(0.55 0.01 70); border: 1px solid oklch(0.9 0.006 85); border-radius: 20px; padding: 3px 11px; }
.np-hero-name { font-family: 'Anton', sans-serif; font-size: 54px; line-height: 0.9; text-transform: uppercase; color: oklch(0.2 0.01 70); overflow-wrap: anywhere; }
.np-ficha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 48px; }
.np-two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
.np-card { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; overflow: hidden; }
.np-act-grid {
  display: grid; grid-template-columns: 74px 1fr 210px 80px; gap: 18px;
  padding: 14px 24px; align-items: center;
  border-bottom: 1px solid oklch(0.95 0.006 85);
}
.np-act-grid:last-child { border-bottom: none; }
.np-act-head { background: oklch(0.98 0.004 85); border-bottom: 1px solid oklch(0.93 0.006 85); padding: 11px 24px; }
.np-doc {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 14px;
  padding: 13px 16px; cursor: pointer;
}
.np-doc:hover { border-color: oklch(0.84 0.03 240); }
.np-upload {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed oklch(0.85 0.006 85); border-radius: 14px;
  padding: 22px; color: oklch(0.6 0.01 70); cursor: pointer;
}
.np-upload:hover { border-color: var(--accent); color: var(--accent-deep); }
.np-edit-btn {
  flex: none; display: inline-flex; align-items: center; gap: 11px;
  border: 1.5px solid oklch(0.2 0.01 70); border-radius: 32px;
  background: none; cursor: pointer;
  padding: 13px 21px;
  color: oklch(0.2 0.01 70); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.np-edit-btn:hover { background: oklch(0.2 0.01 70); color: #fff; }
/* ---- Crear OT + vista general de OTs (Claude Design v2, fase 3) ---- */

.np-narrow { max-width: 1040px; }
.np-ots { gap: 26px; padding-bottom: 26px; }
.np-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.np-form-grid label { display: flex; flex-direction: column; gap: 8px; }
.np-fld {
  width: 100%; font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 15px;
  color: oklch(0.24 0.01 70); background: #fff;
  border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; padding: 13px 16px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.np-fld:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.62 0.11 240 / 0.15); }
.np-fld::placeholder { color: oklch(0.68 0.01 70); }
.np-prio { display: flex; gap: 10px; }
.np-prio button {
  flex: 1; cursor: pointer; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 500; color: oklch(0.45 0.01 70);
  background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; padding: 12px;
}
.np-prio button[data-prio="Alta"].on { color: oklch(0.48 0.18 25); background: oklch(0.93 0.05 25); border: 1.5px solid oklch(0.58 0.2 25); }
.np-prio button[data-prio="Media"].on { color: oklch(0.5 0.13 65); background: oklch(0.94 0.06 65); border: 1.5px solid oklch(0.62 0.15 65); }
.np-prio button[data-prio="Baja"].on { color: oklch(0.45 0.1 240); background: oklch(0.94 0.02 240); border: 1.5px solid var(--accent); }
.np-actionbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  border-top: 1px solid oklch(0.9 0.006 85); padding-top: 26px;
}
.np-btn-ghost {
  display: inline-flex; align-items: center; border: 1.5px solid oklch(0.8 0.006 85);
  border-radius: 32px; padding: 14px 24px; color: oklch(0.4 0.01 70);
  font-weight: 600; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
.np-btn-ghost:hover { border-color: oklch(0.5 0.01 70); }
.np-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.np-tiles-4 { grid-template-columns: repeat(4, 1fr); }
.np-tiles-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .np-tiles-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .np-tiles-4 { grid-template-columns: repeat(2, 1fr); } }
/* Inicio del mecánico: son solo 3 tarjetas, así que en vez de estirarlas a lo
   ancho de la pantalla las dejamos de ancho parejo y centradas. */
.np-tiles-3c { grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; }
.np-tile { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; padding: 22px 24px; }
.np-tile .anton { font-family: 'Anton', sans-serif; }
/* Registrar actividad v2 ("Registrar actividad.dc"): el formulario pasa a
   tarjeta blanca y el timeline del día queda pegado al costado. La lógica y
   las ruedas táctiles del móvil no se tocan: esto es solo piel. */
.np-reg .reg-grid { grid-template-columns: 1fr 0.82fr; gap: 32px; }
.np-reg .reg-form {
  max-width: none; gap: 20px;
  background: #fff; border: 1px solid oklch(0.92 0.006 85);
  border-radius: 20px; padding: 30px 32px;
}
.np-reg .reg-form label { font-size: 13px; color: oklch(0.4 0.01 70); font-weight: 500; gap: 8px; }
.np-reg .reg-form .form-row { gap: 20px; }
.np-reg .reg-form input:not([type="checkbox"]),
.np-reg .reg-form select,
.np-reg .reg-form textarea {
  width: 100%; font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 15px;
  font-weight: 400; color: oklch(0.24 0.01 70); background: #fff;
  border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; padding: 12px 15px;
  transition: border-color .15s, box-shadow .15s;
}
.np-reg .reg-form input:not([type="checkbox"]):focus,
.np-reg .reg-form select:focus,
.np-reg .reg-form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.62 0.11 240 / 0.15); outline: none;
}
.np-reg .reg-form textarea { line-height: 1.55; resize: vertical; }
.np-reg .time-block {
  background: oklch(0.985 0.004 85); border: 1px solid oklch(0.92 0.006 85);
  border-radius: 14px; padding: 20px 22px;
}
.np-reg .time-label { font-size: 11px; letter-spacing: 0.16em; color: var(--accent-deep); margin-bottom: 16px; }
.np-reg .time-group > span { font-size: 13px; color: oklch(0.4 0.01 70); font-weight: 500; }
.np-reg .time-block select {
  width: auto; font-family: 'JetBrains Mono', monospace; font-size: 14px;
  border-radius: 10px; padding: 9px 8px; min-width: 58px; text-align: center; cursor: pointer;
}
.np-reg .presets { gap: 10px; margin-top: 14px; }
.np-reg .presets button {
  font-size: 12.5px; color: oklch(0.4 0.01 70); background: #fff;
  border: 1px solid oklch(0.88 0.006 85); border-radius: 20px; padding: 7px 14px;
}
.np-reg .presets button:hover { border-color: var(--accent); color: var(--accent-deep); }
.np-reg .reg-form .chk { font-size: 14px; color: oklch(0.35 0.01 70); }
.np-reg .reg-submit {
  margin-top: 4px; padding: 16px; border: none; border-radius: 32px;
  background: oklch(0.2 0.01 70); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 12px 26px -12px oklch(0.2 0.01 70 / 0.6);
}
.np-reg .reg-submit:hover { background: oklch(0.3 0.01 70); }
.np-reg .reg-timeline { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 14px; }
.np-reg .reg-timeline h3 {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0;
}
.np-reg .reg-timeline > .muted { font-size: 14px; line-height: 1.5; color: oklch(0.5 0.01 70); margin: 0; }
.np-reg #tl-scroll { height: 620px; border-color: oklch(0.92 0.006 85); border-radius: 20px; }
.np-reg .tl-block { border-radius: 10px; }
.np-reg .tl-leyenda { display: none; }

@media (max-width: 1000px) {
  .np-reg .reg-grid { grid-template-columns: 1fr; gap: 26px; }
  .np-reg .reg-timeline { position: static; }
  .np-reg .reg-form { padding: 20px; }
  .np-reg .reg-form .form-row { gap: 14px; }
}

/* ---- Celular: el día va como franja FIJA a la derecha del formulario ----
   Pedido de Francisco (2026-08-04): el técnico ve dónde cae su bloque
   mientras llena el formulario, sin bajar y volver a subir. Los bloques van
   sin texto (no cabe) y la leyenda de abajo dice qué es cada color. */
@media (max-width: 820px) {
  .np-reg .reg-grid { grid-template-columns: minmax(0, 1fr) 94px; gap: 12px; align-items: start; }
  .np-reg .reg-form { padding: 15px; gap: 13px; border-radius: 16px; }
  /* En una columna angosta, dos campos por fila se cortan: van apilados. */
  .np-reg .reg-form .form-row { flex-direction: column; gap: 13px; }
  .np-reg .reg-form label { font-size: 12px; }
  .np-reg .time-block { padding: 14px; }

  .np-reg .reg-timeline {
    position: sticky; top: 6px; align-self: start;
    gap: 7px; min-width: 0;
  }
  .np-reg .reg-timeline h3 { font-size: 9px; letter-spacing: 0.14em; }
  .np-reg .reg-timeline > .muted { display: none; } /* lo explica la leyenda */
  .np-reg #tl-scroll { height: 360px; border-radius: 12px; }
  .np-reg .tl-hour span { font-size: 8px; left: 4px; }
  .np-reg .tl-block {
    left: 34px; right: 4px; border-radius: 5px;
    font-size: 0; padding: 0; /* solo la barra de color: el texto no cabe */
  }
  .np-reg .tl-leyenda {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 9.5px; color: oklch(0.5 0.01 70);
  }
  .np-reg .tl-leyenda span { display: flex; align-items: center; gap: 6px; }
  .np-reg .tl-leyenda i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
  .tl-l-ocupado { background: var(--hover); border: 1px solid var(--line); border-left: 3px solid var(--ink); }
  .tl-l-nueva { background: #eef3ff; border: 1px solid #d7e2fd; border-left: 3px solid var(--info); }
  .tl-l-merma { background: #fdf3f3; border: 1px solid var(--line); border-left: 3px solid var(--danger); }
  .np-reg #tl-notime-wrap { display: none; } /* el detalle sin hora, en desktop */
}

/* Horas trabajadas v2 ("Horas trabajadas.dc"): controles como píldoras y la
   matriz como tarjeta blanca. Los puntos y su lógica siguen siendo los mismos. */
.np-horas .toolbar { margin-bottom: 0; gap: 14px; align-items: center; }
.np-horas .tabs {
  display: flex; gap: 2px; margin: 0; border: 1px solid oklch(0.9 0.006 85);
  border-radius: 26px; background: #fff; padding: 4px;
}
.np-horas .tabs .tab {
  height: auto; border: none; background: none; border-radius: 22px;
  padding: 8px 18px; font-size: 14px; color: oklch(0.45 0.01 70);
}
.np-horas .tabs .tab.active { background: oklch(0.2 0.01 70); color: #fff; font-weight: 600; }
.np-horas #h-prev, .np-horas #h-next {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid oklch(0.9 0.006 85);
  font-size: 17px; color: oklch(0.4 0.01 70);
}
.np-horas #h-date {
  height: auto; padding: 9px 15px; border-radius: 12px;
  border: 1px solid oklch(0.9 0.006 85); background: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; color: oklch(0.28 0.01 70);
}
.np-horas #h-today {
  height: auto; padding: 9px 18px; border-radius: 22px;
  background: #fff; border: 1px solid oklch(0.9 0.006 85);
  font-size: 14px; font-weight: 600; color: oklch(0.3 0.01 70);
}
.np-horas #h-range { font-size: 13px; letter-spacing: 0.04em; color: oklch(0.55 0.01 70); }
.np-horas .h-legend {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 13px; color: oklch(0.45 0.01 70);
}
.np-horas .h-legend > div { display: flex; align-items: center; gap: 8px; }
.np-horas .h-legend .leyenda { width: 13px; height: 13px; margin: 0; }
.np-horas .tbl-wrap {
  background: #fff; border: 1px solid oklch(0.92 0.006 85);
  border-radius: 20px; overflow: hidden; overflow-x: auto;
}
.np-horas #h-tbl { border: none; border-radius: 0; }
.np-horas #h-tbl thead th {
  background: oklch(0.985 0.004 85); border-bottom: 1px solid oklch(0.9 0.006 85);
  font-size: 12px; font-weight: 500; color: oklch(0.35 0.01 70); padding: 11px 5px;
}
.np-horas #h-tbl thead th:first-child {
  font-size: 10px; letter-spacing: 0.16em; color: oklch(0.55 0.01 70); padding-left: 22px;
}
.np-horas #h-tbl thead small { color: oklch(0.6 0.01 70); font-size: 9px; letter-spacing: 0.05em; }
.np-horas #h-tbl td { border-bottom: 1px solid oklch(0.95 0.006 85); padding: 11px 5px; }
.np-horas #h-tbl td:first-child {
  font-size: 14px; font-weight: 500; color: oklch(0.28 0.01 70);
  font-family: 'Instrument Sans', system-ui, sans-serif; padding-left: 22px; min-width: 180px;
}
.np-horas #h-tbl .h-off { background: oklch(0.975 0.004 85); }
.np-horas #h-detail { margin-top: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Navegación inferior del móvil ("Vistas Movil.dc") ----------
   Barra fija con los destinos del menú y un botón central de acción. En
   desktop no existe: ahí manda la píldora de arriba. */
#bottom-nav { display: none; }
#sheet, #sheet-backdrop { display: none; }

@media (max-width: 820px) {
  #bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    /* Las columnas se arman con los botones que QUEDAN visibles, no con los 5
       fijos: el Mecánico no ve Personas ni Vehículos y con un repeat(5,1fr) sus
       tres botones se apretaban contra la izquierda. */
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
    gap: 2px; padding: 12px 6px calc(14px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid oklch(0.92 0.006 85);
    box-shadow: 0 -8px 24px -18px oklch(0.3 0.02 70 / 0.6);
  }
  #bottom-nav a, #bottom-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    height: auto; min-height: 52px; padding: 4px 2px;
    border: none; background: none; border-radius: 12px;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 10.5px; line-height: 1; color: oklch(0.5 0.01 70); text-decoration: none;
  }
  #bottom-nav a svg, #bottom-nav button svg { width: 22px; height: 22px; }
  #bottom-nav a.on, #bottom-nav button.on { color: var(--accent-deep); font-weight: 600; }
  /* Botón central: sobresale de la barra, como en el mockup. */
  #bn-accion {
    width: 56px; height: 56px; min-height: 0; margin: 0 auto; align-self: center;
    padding: 0; justify-content: center; border-radius: 50% !important;
    background: oklch(0.2 0.01 70) !important; color: #fff !important;
    /* Aro blanco alrededor (como el mockup): lo separa de la barra sin ocupar
       más espacio, porque es sombra y no borde. */
    box-shadow: 0 0 0 5px #fff, 0 10px 22px -8px oklch(0.2 0.01 70 / 0.75);
    transform: translateY(-8px);
  }
  #bn-accion svg { width: 25px; height: 25px; }
  #bn-accion.hidden { display: none; }
  /* El contenido no debe quedar tapado por la barra. */
  main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

  /* Hoja emergente (acción rápida y grupo Taller) */
  #sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 61;
    background: rgba(22, 22, 26, 0.4);
  }
  #sheet-backdrop.hidden, #sheet.hidden { display: none; }
  #sheet {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; left: 10px; right: 10px; z-index: 62;
    bottom: calc(112px + env(safe-area-inset-bottom));
    background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 20px;
    padding: 10px; box-shadow: 0 26px 60px -22px rgba(22, 22, 26, 0.5);
  }
  #sheet a, #sheet button {
    display: flex; align-items: center; gap: 12px;
    width: 100%; height: auto; padding: 15px 16px;
    border: none; border-radius: 14px; background: none; text-align: left;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 15px; font-weight: 600; color: oklch(0.26 0.01 70); text-decoration: none;
  }
  #sheet a:active, #sheet button:active { background: oklch(0.96 0.02 240); }
  #sheet .sheet-k {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: oklch(0.55 0.01 70); padding: 8px 16px 4px;
  }
}

/* Buscador con sugerencias (Personas y Vehículos): caja con lupa + panel que
   aparece mientras se escribe. Al elegir una fila salta a su ficha. */
.np-search {
  position: relative;
  flex: 1; min-width: 260px; min-height: 40px; /* misma altura que los filtros */
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid oklch(0.9 0.006 85);
  border-radius: 12px; padding: 0 14px;
  color: oklch(0.6 0.01 70);
}
.np-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.62 0.11 240 / 0.15); }
.np-search svg { flex: none; }
.np-search input[type="search"] {
  flex: 1; min-width: 0; height: 38px;
  border: none; background: none; outline: none; box-shadow: none;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 14px;
  color: oklch(0.24 0.01 70); padding: 0;
}
.np-search input[type="search"]::placeholder { color: oklch(0.65 0.01 70); }
.np-sugg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid oklch(0.9 0.006 85); border-radius: 14px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 24px 50px -20px oklch(0.3 0.02 70 / 0.45);
  max-height: 340px; overflow-y: auto;
}
.np-sugg-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; height: auto; text-align: left;
  padding: 9px 12px; border: none; border-radius: 10px;
  background: none; cursor: pointer;
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.np-sugg-item:hover, .np-sugg-item.on { background: oklch(0.96 0.02 240); }
.np-sugg-1 { font-size: 14px; font-weight: 600; color: oklch(0.26 0.01 70); }
.np-sugg-2 { font-size: 11px; color: oklch(0.6 0.01 70); }
.np-sugg-vacio { padding: 12px; font-size: 13px; color: oklch(0.6 0.01 70); }

/* Vehículos v2 ("Vehiculos.dc"): chips de estado y carrusel de mantención. */
.np-veh { gap: 24px; padding-bottom: 8px; }
.np-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 22px; cursor: pointer;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 14px;
  color: oklch(0.42 0.01 70); background: #fff; border: 1px solid oklch(0.9 0.006 85);
  height: auto;
}
.np-chip:hover { border-color: var(--accent); }
.np-chip.on { background: oklch(0.2 0.01 70); border-color: oklch(0.2 0.01 70); color: #fff; font-weight: 600; }
.np-round {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid oklch(0.9 0.006 85);
  font-size: 16px; color: oklch(0.4 0.01 70); cursor: pointer;
}
.np-round:hover { border-color: var(--accent); color: var(--accent-deep); }
/* Carrusel horizontal: siempre hay varias máquinas en mantención. */
.np-carousel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: thin;
}
.np-carousel::-webkit-scrollbar { height: 8px; }
.np-carousel::-webkit-scrollbar-thumb { background: oklch(0.88 0.006 85); border-radius: 8px; }
.np-vcard {
  flex: 0 0 300px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid oklch(0.92 0.006 85);
  border-radius: 18px; overflow: hidden; text-decoration: none;
}
.np-vcard:hover { border-color: oklch(0.84 0.03 240); }
.np-vcard-img {
  height: 112px; flex: none; position: relative;
  background: oklch(0.95 0.008 65); border-bottom: 1px solid oklch(0.93 0.006 85);
  display: flex; align-items: center; justify-content: center;
}
.np-vcard-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  background: oklch(0.95 0.05 65); border: 1px solid oklch(0.85 0.06 65);
  padding: 4px 11px; border-radius: 20px;
}
.np-vcard-code {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; color: oklch(0.5 0.01 70);
  background: #fff; border: 1px solid oklch(0.9 0.006 85);
  border-radius: 8px; padding: 3px 9px;
}

/* ✕ para eliminar una actividad desde la ficha de la OT */
.np-act-del {
  width: 26px; height: 26px; padding: 0; border-radius: 8px;
  border: 1px solid transparent; background: none;
  color: oklch(0.7 0.01 70); font-size: 12px; line-height: 1; cursor: pointer;
}
.np-act-del:hover:not(:disabled) { border-color: oklch(0.85 0.06 25); color: var(--danger); background: oklch(0.97 0.02 25); }
.np-act-del:disabled { opacity: 0.25; cursor: not-allowed; }

/* Campo que el sistema completa y bloquea (hoy: el vehículo que manda la OT). */
select:disabled, input:disabled {
  background: var(--surface); color: var(--muted);
  cursor: not-allowed; opacity: 1; /* Safari no lo aclare de más */
}
.np-reg select:disabled { background: oklch(0.96 0.004 85); color: oklch(0.5 0.01 70); }

/* Bloque de lectura del medidor dentro del formulario de actividad. */
.lectura-block {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; background: var(--surface);
}
.lectura-title {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-deep);
}
.lectura-hint { margin: 0; font-size: 11.5px; }
.np-reg .lectura-block { background: oklch(0.985 0.004 85); border-color: oklch(0.92 0.006 85); }

/* Tabla chica de la semana en el Inicio: un punto por técnico y día, con la
   misma regla y los mismos colores del panel Horas. */
.sem-card { overflow: hidden; }
.sem-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center; gap: 12px;
  padding: 9px 18px; border-bottom: 1px solid oklch(0.95 0.006 85);
}
.sem-fila:last-child { border-bottom: none; }
.sem-head { background: oklch(0.98 0.004 85); border-bottom: 1px solid oklch(0.93 0.006 85); }
.sem-nombre {
  font-size: 13.5px; color: oklch(0.28 0.01 70);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sem-dias { display: grid; grid-template-columns: repeat(7, 20px); gap: 5px; justify-items: center; align-items: center; }
.sem-dia {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.1;
  color: oklch(0.45 0.01 70); text-align: center;
}
.sem-dia small { display: block; font-size: 8px; color: oklch(0.62 0.01 70); }
.sem-dia.hoy { color: var(--accent-deep); font-weight: 600; }
.sem-dia.hoy small { color: var(--accent-deep); }
.sem-fila .hdot { width: 13px; height: 13px; cursor: default; }
.sem-ratio { font-size: 11.5px; color: oklch(0.45 0.01 70); text-align: right; }
.sem-leyenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 11.5px; color: oklch(0.5 0.01 70);
}
.sem-leyenda span { display: flex; align-items: center; gap: 6px; }
.sem-leyenda .hdot { width: 11px; height: 11px; cursor: default; }
/* Navegación entre semanas */
.sem-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.sem-nav button {
  height: 30px; min-width: 30px; padding: 0 10px;
  border: 1px solid oklch(0.9 0.006 85); border-radius: 20px; background: #fff;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 12.5px;
  color: oklch(0.4 0.01 70);
}
.sem-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-deep); }
.sem-nav button:disabled { opacity: 0.4; cursor: default; }
.sem-rango { font-size: 11.5px; color: oklch(0.55 0.01 70); letter-spacing: 0.04em; margin-bottom: 8px; }
@media (max-width: 820px) {
  .sem-fila { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 12px; gap: 8px; }
  .sem-ratio { display: none; }
  .sem-dias { grid-template-columns: repeat(7, 17px); gap: 3px; }
  .sem-fila .hdot { width: 11px; height: 11px; }
}

.np-ot-row {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 16px;
  padding: 18px 22px; text-decoration: none;
}
.np-ot-row:hover { border-color: oklch(0.84 0.03 240); }

/* Botón principal sólido del hero (mockup de la OT: "Cerrar OT"). */
.np-btn-solid {
  flex: none; display: inline-flex; align-items: center; gap: 11px;
  background: oklch(0.2 0.01 70); border: 1.5px solid oklch(0.2 0.01 70);
  border-radius: 32px; padding: 14px 24px; cursor: pointer;
  color: #fff; font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  box-shadow: 0 12px 26px -12px oklch(0.2 0.01 70 / 0.6);
}
.np-btn-solid:hover { background: oklch(0.3 0.01 70); }
.np select { border-radius: 10px; }
@media (max-width: 1100px) {
  .np-two { gap: 28px !important; grid-template-columns: 1fr !important; }
  .np-ficha { grid-template-columns: repeat(2, 1fr); }
  .np-two { grid-template-columns: 1fr; }
  .np-hero-name { font-size: 40px; }
}
@media (max-width: 820px) {
  .np { gap: 24px; }
  .np-form-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Cifras en dos columnas y más compactas, como el mockup móvil. */
  .np-tiles, .np-tiles-4, .np-tiles-5, .np-tiles-3c { grid-template-columns: 1fr 1fr; gap: 11px; }
  /* Las 3 del mecánico: dos arriba y la tercera ocupando el ancho, sin huecos. */
  .np-tiles-3c > :last-child { grid-column: span 2; }
  .np-tile { padding: 15px 16px; border-radius: 16px; }
  .np-tile .anton { font-size: 34px !important; }
  .np-tile .np-k { font-size: 9px; letter-spacing: 0.12em; }
  /* Tarjeta de OT: el número arriba y los chips al lado, sin desbordar. */
  .np-ot-row { gap: 10px 12px; padding: 14px 16px; flex-wrap: wrap; border-radius: 15px; }
  .np-ot-row .anton { width: auto !important; font-size: 20px !important; }
  .np-ot-row > span:last-child { display: none; } /* la flecha ›: sobra al tocar */
  .np-title { font-size: 18px; }
  .np-sect { gap: 10px; }
  .np-actionbar { flex-wrap: wrap; }
  .np-actionbar .np-btn-ghost, .np-actionbar .np-btn-solid { flex: 1; justify-content: center; }
  .np-btn-solid, .np-btn-ghost { padding: 13px 18px; font-size: 12.5px; }
  .np-carousel { margin: 0 -4px; padding: 0 4px 8px; }
  .np-vcard { flex-basis: 84%; }
  .np-search { min-width: 0; }
  .np-ficha { gap: 18px 20px; }
  .np-hero-name { font-size: 30px; }
  .np-act-grid { grid-template-columns: 56px 1fr 66px !important; gap: 10px; padding: 12px 14px; }
  .np-act-ot, .np-act-cost { display: none; }
}

/* ---------- Toast ---------- */

#toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--radius-s);
  font-size: 13px;
  max-width: 80vw;
  box-shadow: 0 8px 30px rgba(22, 22, 26, 0.25);
  z-index: 50;
}
#toast.error { background: var(--danger); }

/* Datos monoespaciados en celdas típicas */
td:first-child { font-variant-numeric: tabular-nums; }

/* Los títulos por vista viven en el topbar: ocultar duplicados */
#view-registro > h2, #view-perfil > h2, #view-usuarios > h2 { display: none; }
#view-usuarios > .muted { margin-top: 0; }

/* ==================== MÓVIL ==================== */

/* Fix: #b-detail declaraba sus columnas DESPUÉS de la media query de 1100px y
   nunca colapsaba a una columna. Redeclarado aquí (al final) para que gane. */
@media (max-width: 1100px) {
  #v-detail, #w-detail, #b-detail { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 820px) {
  /* ---- Nav superior colapsado: la hamburguesa despliega el menú ---- */
  #topnav { margin: 10px 10px 2px; padding: 8px 10px 8px 16px; gap: 10px; }
  #topnav #btn-menu { margin-left: auto; }
  #main-nav { display: none; }
  body.nav-open #main-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; top: 72px; left: 12px; right: 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 10px; z-index: 40;
    box-shadow: 0 24px 60px -20px rgba(22, 22, 26, 0.35);
  }
  body.nav-open #main-nav a { padding: 12px 16px; border-radius: 12px; }
  /* En el drawer, "Taller" y sus tres vistas van en vertical, sin desplegable. */
  body.nav-open .tn-group { position: static; }
  body.nav-open .tn-group-btn { width: 100%; justify-content: flex-start; padding: 12px 16px; }
  body.nav-open .tn-group-btn svg { display: none; }
  body.nav-open .tn-menu {
    display: flex; position: static; transform: none; min-width: 0;
    border: none; box-shadow: none; padding: 0 0 0 14px; background: none;
  }
  body.nav-open #nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 39;
    background: rgba(22, 22, 26, 0.35);
  }
  /* La hamburguesa ya no hace falta: navegar es la barra inferior y el avatar
     lleva a "Mi perfil". Arriba queda solo el logo, como en el mockup móvil. */
  #btn-menu { display: none; }
  .tn-user-info { display: none; }
  /* Sin el menú central, nada empujaba al usuario al borde: queda a la derecha
     igual que en desktop, no pegado al logo. */
  .tn-user { margin-left: auto; }

  /* ---- Topbar compacto ---- */
  #topbar { padding: 0 14px; }
  .topbar-left { gap: 10px; align-items: center; }
  #page-title { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-meta, #env-badge { display: none; }

  main { padding: 16px 14px 32px; }
  h2 { font-size: 18px; }

  /* ---- Inputs a 16px: iOS no hace zoom automático al enfocar ---- */
  input, select, textarea { font-size: 16px; }
  /* Reglas más específicas del desktop que hay que re-ganar aquí: */
  .doc-upload select, .doc-upload input,
  .doc-upload input[type="file"],
  #view-usuarios select, #b-d-items select { font-size: 16px; }
  .toolbar input[type="search"], .toolbar select,
  .toolbar input[type="date"], .toolbar input[type="number"], .toolbar button { height: 38px; }
  .toolbar input[type="search"] { min-width: 100%; }

  /* ---- Tablas: ancho mínimo real + deslizar; celdas más compactas ---- */
  .tbl-wrap > table { min-width: 640px; }
  .tbl-wrap > table.sub { min-width: 460px; }
  #b-detail .tbl-wrap > table.sub { min-width: 700px; }
  th { padding: 9px 10px; }
  td { padding: 10px; }

  /* El detalle expandido bajo la fila queda fijo al viewport aunque la tabla
     de atrás se deslice: el ancho se limita a la pantalla y app.js compensa el
     scroll con translateX (sticky no funciona dentro de celdas de tabla). */
  tr.detail-row > td { padding: 16px 12px 20px; }
  #v-detail, #w-detail, #b-detail {
    max-width: calc(100vw - 54px); /* 28 main + 24 td + 2 bordes */
  }

  /* ---- Empleados: tabla y ficha apiladas ---- */
  .content { flex-direction: column; align-items: stretch; gap: 16px; }
  aside#detail { width: 100%; }

  /* ---- Formularios y diálogos en una columna ---- */
  .form-row { flex-direction: column; gap: 11px; }
  .reg-form .form-row { flex-direction: column; gap: 13px; }
  dialog { width: min(430px, 94vw); padding: 18px; }
  #dlg-vehicle { width: min(520px, 94vw); }

  /* ---- Registro de actividades: formulario + día SIEMPRE a la vista ----
     El timeline va como columna angosta al costado (no abajo): la gracia es
     ver los bloques ya ocupados MIENTRAS se elige el horario. */
  .reg-grid { grid-template-columns: minmax(0, 1fr) 116px; gap: 10px; }
  .reg-form { padding: 12px; gap: 11px; }
  .time-block { padding: 10px; }
  .time-row { display: none; }   /* en el dedo mandan las ruedas */
  .time-wheels { display: flex; }
  .reg-timeline { position: sticky; top: 8px; }
  #tl-hint { display: none; }
  #tl-title { font-size: 11.5px; }
  #tl-scroll { height: min(62vh, 500px); }
  .tl-hour span { font-size: 8.5px; left: 2px; }
  .tl-block {
    left: 26px; right: 3px;
    font-size: 9px; line-height: 1.25; padding: 1px 4px;
    border-radius: 4px; border-left-width: 2px;
    white-space: normal;
  }
  .tl-block b { display: block; font-size: 8.5px; margin-right: 0; }
  /* Crear OT es de escritorio: en móvil se apila normal (sin columna angosta) */
  #view-crear-ot .reg-grid { grid-template-columns: 1fr; }


  /* ---- Perfiles dedicados y detalles ---- */
  .profile-head { flex-wrap: wrap; margin-bottom: 20px; }
  .profile-grid { gap: 22px; }
  .ot-card-head { grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 11px 12px; }
  .reading-latest { flex-wrap: wrap; gap: 16px 28px; }
  /* (.tabs NO lleva overflow-x: auto — recorta el margin-bottom:-1px del tab
     activo y genera un scrollbar fantasma; las 2 pestañas caben en 375px) */
  #home-cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Specs de perfiles en una sola columna en pantallas muy angostas */
  .spec-grid { grid-template-columns: 1fr; }
  .spec-cell { border-right: none; }
  .ot-meta { grid-template-columns: 1fr; }
}

/* ---------- Actividades v2 ("Mis actividades.dc") ----------
   La tabla se reemplaza por una línea de tiempo agrupada por día: riel de fecha
   a la izquierda (pegajoso al hacer scroll) y una tarjeta por actividad a la
   derecha. Mismos datos, mismos filtros y misma paginación que antes.
   Prefijo ac2- porque act- ya lo ocupa la lista de actividades de la ficha de
   vehículo. */
.np-crumb { font-size: 12px; letter-spacing: 0.12em; color: oklch(0.52 0.01 70); }
.np-crumb a { color: oklch(0.52 0.01 70); }

.ac2-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ac2-sub { font-size: 17px; color: oklch(0.45 0.01 70); }

.ac2-nueva {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  background: oklch(0.2 0.01 70); border: none; border-radius: 32px;
  padding: 10px 10px 10px 22px; color: #fff; cursor: pointer;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  box-shadow: 0 12px 26px -12px oklch(0.2 0.01 70 / 0.6);
}
.ac2-nueva span {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: oklch(0.62 0.11 240); display: flex; align-items: center; justify-content: center;
}
.ac2-nueva.hidden { display: none; }

.ac2-controles { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ac2-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ac2-chips button {
  padding: 9px 17px; border-radius: 22px; font-size: 14px; cursor: pointer;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: oklch(0.42 0.01 70); background: #fff; border: 1px solid oklch(0.9 0.006 85);
}
.ac2-chips button.on { color: #fff; background: oklch(0.2 0.01 70); border-color: oklch(0.2 0.01 70); font-weight: 600; }
.ac2-fechas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac2-fechas input, .ac2-fechas select {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: oklch(0.24 0.01 70);
  background: #fff; border: 1px solid oklch(0.9 0.006 85); border-radius: 11px; padding: 9px 12px;
}
.ac2-fechas select.hidden { display: none; }

#a-timeline { display: flex; flex-direction: column; gap: 26px; }
.ac2-dia { display: flex; gap: 24px; align-items: flex-start; }
.ac2-riel { width: 150px; flex: none; position: sticky; top: 22px; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.ac2-riel .dow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.55 0.01 70); }
.ac2-riel .num { display: flex; align-items: baseline; gap: 8px; }
.ac2-riel .num b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 44px; line-height: 0.85; color: oklch(0.2 0.01 70); }
.ac2-riel .num i { font-family: 'Anton', sans-serif; font-style: normal; font-size: 18px; line-height: 1; text-transform: uppercase; color: oklch(0.55 0.01 70); }
.ac2-riel .tot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: oklch(0.3 0.01 70); }
.ac2-riel .cnt { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: oklch(0.6 0.01 70); }

.ac2-he {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  border-radius: 6px; padding: 2px 7px; white-space: nowrap;
  color: oklch(0.5 0.01 70); background: oklch(0.95 0.004 85);
}
.ac2-he.extra { color: oklch(0.5 0.13 65); background: oklch(0.95 0.05 65); }

.ac2-cards { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac2-card { display: flex; align-items: stretch; background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 16px; overflow: hidden; }
.ac2-acento { width: 5px; flex: none; background: oklch(0.62 0.11 240); }
.ac2-acento.extra { background: oklch(0.62 0.15 65); }
.ac2-acento.vacio { background: oklch(0.85 0.006 85); }
.ac2-cuerpo { flex: 1; display: grid; grid-template-columns: 132px 88px 1fr 118px; gap: 20px; align-items: center; padding: 16px 20px; min-width: 0; }
.ac2-cuerpo.con-tecnico { grid-template-columns: 128px 84px 1fr 130px 112px; }
.ac2-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac2-campo .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: oklch(0.6 0.01 70); text-transform: uppercase; }
.ac2-campo .v { font-size: 15px; font-weight: 600; color: oklch(0.24 0.01 70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac2-campo .v.ot { color: oklch(0.4 0.1 240); }
.ac2-campo .v.desc { font-weight: 400; color: oklch(0.32 0.01 70); }
.ac2-horas { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ac2-horas b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 26px; line-height: 0.8; color: oklch(0.2 0.01 70); }
.ac2-horas .costo { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: oklch(0.45 0.01 70); }
.ac2-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.5 0.01 70); background: oklch(0.95 0.004 85); border-radius: 5px; padding: 2px 6px; }

.ac2-acciones { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 12px; border-left: 1px solid oklch(0.95 0.006 85); flex: none; min-width: 118px; }
/* Sin acciones: se guarda el espacio para no descuadrar las tarjetas, pero sin
   raya ni texto — no está pasando nada malo, simplemente no se puede editar. */
.ac2-acciones.sin-acciones { border-left-color: transparent; }
.ac2-acciones button {
  width: 44px; height: 44px; border: none; background: none; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: oklch(0.45 0.01 70);
}
.ac2-acciones button:hover { background: oklch(0.96 0.02 240); color: oklch(0.4 0.1 240); }
.ac2-acciones button.borrar { color: oklch(0.55 0.14 25); }
.ac2-acciones button.borrar:hover { background: oklch(0.95 0.04 25); color: oklch(0.5 0.15 25); }

.ac2-vacio { padding: 30px 0; color: oklch(0.55 0.01 70); }

.ac2-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.ac2-pager button {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.5 0.01 70); border: 1px solid oklch(0.9 0.006 85); border-radius: 22px;
  padding: 8px 16px; background: #fff; cursor: pointer;
}
.ac2-pager button:disabled { color: oklch(0.75 0.01 70); background: oklch(0.98 0.004 85); cursor: default; }
.ac2-pager span { font-size: 12px; letter-spacing: 0.1em; color: oklch(0.6 0.01 70); }

/* Celular: el riel de fecha pasa arriba en horizontal y la tarjeta se apila. */
@media (max-width: 820px) {
  .ac2-hero { align-items: flex-start; }
  .ac2-sub { font-size: 14px; }
  .ac2-nueva { padding: 8px 8px 8px 16px; font-size: 12.5px; }
  .ac2-nueva span { width: 28px; height: 28px; }
  .ac2-controles { flex-direction: column; align-items: stretch; gap: 12px; }
  .ac2-chips button { flex: 1; padding: 8px 10px; font-size: 12.5px; text-align: center; }
  .ac2-fechas input, .ac2-fechas select { flex: 1; min-width: 0; }

  #a-timeline { gap: 18px; }
  .ac2-dia { flex-direction: column; gap: 10px; }
  .ac2-riel { position: static; width: auto; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 2px; }
  .ac2-riel .num b { font-size: 30px; }
  .ac2-riel .tot { margin-top: 0; }
  .ac2-cuerpo, .ac2-cuerpo.con-tecnico { grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 14px 16px 14px 14px; }
  .ac2-campo .v { white-space: normal; overflow-wrap: anywhere; }
  .ac2-horas { align-items: flex-start; }
  .ac2-acciones { border-left: none; border-top: 1px solid oklch(0.95 0.006 85); padding: 4px 0; flex-direction: column; justify-content: center; min-width: 58px; }
  .ac2-horas { align-items: flex-start; text-align: left; }
}

/* ---------- Campo de fecha dd-mm-aaaa ----------
   El <input type="date"> nativo se pinta con el formato del IDIOMA DEL
   NAVEGADOR (mm/dd/yyyy en uno en inglés) y no hay forma de cambiarlo desde la
   página. Acá el campo visible es nuestro y el nativo queda escondido detrás
   del botón del calendario, que sigue abriendo el selector de siempre. */
.fcl { position: relative; display: inline-flex; align-items: center; width: 100%; }
.fcl-txt { width: 100%; padding-right: 34px !important; }
.fcl-cal {
  position: absolute; right: 6px; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 7px; cursor: pointer;
  color: var(--muted, oklch(0.5 0.01 70));
}
.fcl-cal:hover { background: oklch(0.95 0.01 240); color: oklch(0.45 0.11 240); }
/* El nativo sigue en el DOM (es la fuente de verdad) pero no se ve: se deja del
   tamaño del botón para que el calendario se ancle donde corresponde. */
.fcl input[type="date"] {
  position: absolute; right: 6px; width: 26px; height: 26px;
  opacity: 0; pointer-events: none; border: none; padding: 0; margin: 0;
}

/* ---------- Cuentas v2 ("Cuentas.dc") ----------
   Agrupa por rol en vez de una tabla plana: con 20 cuentas la pregunta real no
   es "quién está en la fila 12" sino "quiénes son admin". El panel oscuro de
   arriba levanta las cuentas sin empleado vinculado, que es el error que deja
   horas sin dueño. */
.cu { display: flex; flex-direction: column; gap: 24px; }

.cu-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cu-hero-txt { display: flex; flex-direction: column; gap: 8px; }
.cu-titulo { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 52px; line-height: 0.9; text-transform: uppercase; color: oklch(0.2 0.01 70); margin: 0; }
.cu-bajada { font-size: 17px; color: oklch(0.45 0.01 70); max-width: 640px; margin: 0; text-wrap: pretty; }
.cu-cta {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  background: oklch(0.2 0.01 70); border-radius: 32px; padding: 10px 10px 10px 22px;
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  box-shadow: 0 12px 26px -12px oklch(0.2 0.01 70 / 0.6); text-decoration: none;
}
.cu-cta:hover { color: #fff; }
.cu-cta span { width: 34px; height: 34px; border-radius: 50%; background: oklch(0.62 0.11 240); display: flex; align-items: center; justify-content: center; }
.cu-regla { height: 2px; background: oklch(0.2 0.01 70); }

.cu-panel { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
.cu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cu-stat { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 5px; }
.cu-stat .et { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; color: oklch(0.55 0.01 70); text-transform: uppercase; }
.cu-stat .num { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 44px; line-height: 1; }
.cu-stat .sub { font-family: var(--mono); font-size: 11px; color: oklch(0.6 0.01 70); }

.cu-sinvincular { background: oklch(0.2 0.01 70); border-radius: 20px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.cu-sinvincular.hidden { display: none; }
.cu-sv-head { display: flex; align-items: center; justify-content: space-between; }
.cu-sv-head .anton { font-size: 19px; text-transform: uppercase; }
.cu-sv-head .mono { font-size: 12px; color: oklch(0.2 0.01 70); background: oklch(0.75 0.16 65); border-radius: 20px; padding: 3px 11px; }
.cu-sinvincular p { font-size: 13.5px; color: oklch(0.78 0.01 70); line-height: 1.5; margin: 0; }
.cu-sv-lista { display: flex; flex-direction: column; gap: 8px; }
.cu-sv-lista a { display: flex; align-items: center; gap: 11px; background: oklch(0.26 0.01 70); border-radius: 11px; padding: 10px 13px; text-decoration: none; }
.cu-sv-lista a:hover { background: oklch(0.3 0.01 70); }
.cu-sv-lista .em { font-family: var(--mono); flex: 1; font-size: 12.5px; color: oklch(0.92 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-sv-lista .rol { font-family: var(--mono); font-size: 10px; padding: 3px 9px; border-radius: 14px; flex: none; background: oklch(0.32 0.01 70); color: oklch(0.88 0.01 70); }
.cu-sv-lista .fl { color: oklch(0.75 0.16 65); font-size: 15px; }

.cu-controles { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cu-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.cu-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 22px;
  font-size: 13px; color: oklch(0.42 0.01 70); background: #fff; border: 1px solid oklch(0.9 0.006 85);
  cursor: pointer; white-space: nowrap;
}
.cu-chip .p { width: 8px; height: 8px; border-radius: 50%; }
.cu-chip .n { font-family: var(--mono); font-size: 12px; color: oklch(0.6 0.01 70); }
.cu-chip.on { background: oklch(0.2 0.01 70); border-color: oklch(0.2 0.01 70); color: #fff; font-weight: 600; }
.cu-chip.on .n { color: oklch(0.85 0.01 70); }
.cu-chip.alerta { border-color: oklch(0.8 0.09 65); color: oklch(0.48 0.13 65); background: oklch(0.97 0.03 65); }
.cu-chip.alerta.on { background: oklch(0.48 0.13 65); border-color: oklch(0.48 0.13 65); color: #fff; }
.cu-buscar { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid oklch(0.9 0.006 85); border-radius: 12px; padding: 4px 15px; min-width: 290px; color: oklch(0.6 0.01 70); }
.cu-buscar input { border: none; outline: none; padding: 8px 0; font-size: 14px; font-family: inherit; color: oklch(0.24 0.01 70); background: transparent; width: 100%; height: auto; }

.cu-grupo { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.cu-grupo-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cu-grupo-head .punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cu-grupo-head .rol { font-family: 'Anton', sans-serif; font-size: 23px; text-transform: uppercase; color: oklch(0.2 0.01 70); }
.cu-grupo-head .cuenta { font-family: var(--mono); font-size: 12px; color: oklch(0.55 0.01 70); border: 1px solid oklch(0.9 0.006 85); border-radius: 20px; padding: 3px 11px; background: #fff; }
.cu-grupo-head .desc { font-size: 13.5px; color: oklch(0.55 0.01 70); }
.cu-grupo-head .linea { flex: 1; height: 1px; background: oklch(0.9 0.006 85); min-width: 20px; }

.cu-tabla { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; overflow: hidden; }
.cu-fila { display: grid; grid-template-columns: 1.35fr 190px 1.15fr 150px; gap: 20px; padding: 13px 24px; align-items: center; }
.cu-cabecera { padding: 12px 24px; background: oklch(0.985 0.004 85); border-bottom: 1px solid oklch(0.93 0.006 85); }
.cu-cabecera span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: oklch(0.6 0.01 70); text-transform: uppercase; }
.cu-cabecera span:last-child { text-align: right; }
.cu-fila + .cu-fila { border-top: 1px solid oklch(0.95 0.006 85); }
.cu-fila.suelta { background: oklch(0.99 0.012 65); }
.cu-cuenta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cu-ini { font-family: 'Anton', sans-serif; width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cu-datos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cu-datos .em { font-family: var(--mono); font-size: 13px; color: oklch(0.26 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-datos .nota { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: oklch(0.55 0.13 30); text-transform: uppercase; }
.cu-fila select {
  font-family: inherit; font-size: 13.5px; color: oklch(0.24 0.01 70); background: #fff;
  border: 1px solid oklch(0.9 0.006 85); border-radius: 10px; padding: 9px 12px; width: 100%; height: auto; cursor: pointer;
}
.cu-fila select:disabled { background: oklch(0.97 0.004 85); color: oklch(0.5 0.01 70); cursor: default; }
.cu-fila select.suelto { border-color: oklch(0.82 0.09 65); background: oklch(0.98 0.025 65); color: oklch(0.48 0.13 65); }
.cu-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.cu-acciones button[data-save] { font-size: 12.5px; font-weight: 600; color: #fff; background: oklch(0.2 0.01 70); border: none; border-radius: 9px; padding: 8px 15px; cursor: pointer; }
.cu-acciones .ghost { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: oklch(0.48 0.01 70); border: 1px solid oklch(0.92 0.006 85); background: #fff; cursor: pointer; padding: 0; }
.cu-acciones .ghost:hover { color: oklch(0.4 0.1 240); border-color: oklch(0.8 0.04 240); }
.cu-vacio { font-size: 14px; color: oklch(0.55 0.01 70); padding: 18px 24px; }

@media (max-width: 1100px) {
  .cu-panel { grid-template-columns: 1fr; }
  .cu-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cu-titulo { font-size: 38px; }
  .cu-bajada { font-size: 15px; }
  .cu-buscar { min-width: 0; width: 100%; }
  .cu-fila, .cu-cabecera { grid-template-columns: 1fr; gap: 10px; }
  .cu-cabecera { display: none; }
  .cu-fila + .cu-fila { border-top: 8px solid oklch(0.97 0.005 85); }
  .cu-acciones { justify-content: flex-start; }
}

/* Aviso de listado filtrado desde una tarjeta del Inicio ("faltan 5" -> "estos 5"). */
.e-filtro {
  display: inline-flex; align-items: center; gap: 10px;
  background: oklch(0.96 0.04 27); border: 1px solid oklch(0.82 0.1 27); border-radius: 22px;
  padding: 6px 8px 6px 15px; font-size: 13px; color: oklch(0.45 0.18 27);
}
.e-filtro.hidden { display: none; }
.e-filtro button {
  width: 24px; height: 24px; flex: none; padding: 0; border: none; border-radius: 50%;
  background: oklch(0.52 0.21 27); color: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}

/* La tarjeta de actividad abre su ficha: el cuerpo es el area clicable, los
   botones de editar y eliminar quedan fuera para no dispararla sin querer. */
.ac2-cuerpo[data-actperfil] { cursor: pointer; }
.ac2-card:has(.ac2-cuerpo[data-actperfil]:hover) { background: oklch(0.985 0.004 85); }

/* Adjuntar fotos en el registro de actividad. Botón grande a propósito: se usa
   con guantes y a pleno sol. */
/* Los dos botones se reparten la fila en partes iguales y no envuelven: uno
   encima del otro, con anchos distintos, era lo que se veia desparejo. Sin
   iconos: un clip y una camara no agregaban nada que el texto no dijera. */
.reg-fotos { display: flex; align-items: stretch; gap: 10px; }
.reg-fotos-btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; text-align: center;
  background: #fff; border: 1px dashed oklch(0.78 0.01 85); border-radius: 14px;
  padding: 14px 18px; font-size: 13px; color: oklch(0.35 0.01 70);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.reg-fotos-btn:active { background: oklch(0.98 0.008 240); }
.reg-fotos-btn:hover { border-color: oklch(0.62 0.11 240); color: oklch(0.4 0.1 240); }

/* El boton de camara solo donde hay una a mano. En el computador `capture` se
   ignora y abriria el mismo explorador que el boton de al lado: dos botones
   distintos haciendo exactamente lo mismo. Se mira el PUNTERO y no el ancho de
   la pantalla, porque la pregunta es si el aparato se toca con el dedo, no si
   la ventana esta angosta. */
/* Va con `.reg-fotos` delante y no suelto: `.reg-form label` ya define un display
   y le gana a una sola clase por especificidad. Con la clase sola, el boton de
   camara aparecia igual en el computador. */
.reg-fotos .reg-solo-celular { display: none; }
@media (pointer: coarse) { .reg-fotos .reg-solo-celular { display: inline-flex; } }
.reg-fotos-btn input { display: none; }
.reg-fotos-btn .mono { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Miniaturas de lo que se va a subir: se ve QUÉ se adjuntó y se puede sacar de a
   una antes de guardar. Tamaño generoso porque se revisa en el celular. */
.reg-fotos-lista { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.reg-fotos-lista:empty { margin-top: 0; }
.reg-foto {
  position: relative; width: 96px; border-radius: 12px; overflow: hidden;
  border: 1px solid oklch(0.9 0.006 85); background: #fff;
}
.reg-foto img { display: block; width: 96px; height: 96px; object-fit: cover; }
.reg-foto-doc {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; font-size: 12px; color: oklch(0.5 0.1 240);
  background: oklch(0.96 0.015 240);
}
.reg-foto-nom {
  display: block; font-size: 9.5px; color: oklch(0.5 0.01 70);
  padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid oklch(0.94 0.006 85);
}
.reg-foto button {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1;
  background: oklch(0.25 0.01 70 / 0.78); color: #fff;
}
.reg-foto button:hover { background: oklch(0.52 0.21 27); }

/* Las tarjetas del encabezado de OTs filtran la tabla de abajo. */
.np-tile-filtro {
  position: relative; text-align: left; width: 100%; cursor: pointer;
  font-family: inherit; border: 1px solid var(--line); background: #fff;
}
.np-tile-filtro:hover { border-color: oklch(0.72 0.06 240); }
.np-tile-filtro.activo { border-color: oklch(0.2 0.01 70); box-shadow: 0 0 0 2px oklch(0.2 0.01 70); }
.np-tile-marca {
  position: absolute; top: 12px; right: 14px; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.5 0.11 240);
}

/* OTs: la tabla manda y "Requieren tu atención" va al costado, angosto. Antes el
   panel ocupaba todo el ancho para cinco filas y empujaba el listado fuera de
   la pantalla — había que bajar para ver la primera OT. */
.w-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.w-cols-main { min-width: 0; }
.w-cols-lado:empty { display: none; }
.w-atencion-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.w-atencion-head .np-title { font-size: 15px; }
.w-atencion-head .mono { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.w-atencion-row {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px; margin-bottom: 10px;
}
.w-atencion-row:hover { border-color: oklch(0.72 0.06 240); }
.w-atencion-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.w-atencion-top .anton { font-family: 'Anton', sans-serif; font-size: 19px; color: oklch(0.2 0.01 70); }
.w-atencion-det {
  font-size: 13px; color: oklch(0.3 0.01 70); margin-top: 6px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.w-atencion-pie { font-size: 10.5px; color: var(--faint); margin-top: 7px; }

@media (max-width: 1100px) {
  /* En pantallas chicas la tabla necesita todo el ancho: el panel pasa abajo. */
  .w-cols { grid-template-columns: 1fr; }
}

/* ---------- Campana de avisos ---------- */
.nt-wrap { position: relative; }
#nt-btn {
  position: relative; width: 36px; height: 36px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: oklch(0.4 0.01 70);
}
#nt-btn:hover { color: oklch(0.4 0.1 240); border-color: oklch(0.78 0.05 240); }
#nt-badge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 10px; background: oklch(0.2 0.01 70); color: #fff; border: 2px solid #fff;
  font-family: var(--mono); font-size: 10px; line-height: 15px; text-align: center;
}
#nt-badge.hidden { display: none; }
/* Panel (2026-10-08): diseño "Notificaciones - Opciones" 1A, con los iconos de
   la 1C como pestañas por tipo. */
#nt-panel {
  position: absolute; top: 50px; right: 0; width: 470px; max-width: calc(100vw - 24px); z-index: 60;
  background: #fff; border: 1px solid oklch(0.9 0.006 85); border-radius: 20px;
  box-shadow: 0 30px 60px -28px oklch(0.2 0.01 70 / 0.45); overflow: hidden;
  display: flex; flex-direction: column; max-height: min(720px, calc(100vh - 110px));
}
#nt-panel.hidden { display: none; }
.nt-head { flex: none; display: flex; justify-content: flex-end; padding: 8px 22px; border-bottom: 1px solid oklch(0.94 0.004 85); }
.nt-head button {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.45 0.11 240);
}
.nt-tabs { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 14px 14px 10px; border-bottom: 1px solid oklch(0.94 0.004 85); }
.nt-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 9px;
  border: none; border-radius: 14px; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 10.5px; font-weight: 600; color: oklch(0.5 0.01 70);
}
.nt-tab:hover { background: oklch(0.97 0.004 85); }
.nt-tab.on { background: oklch(0.2 0.01 70); color: #fff; }
.nt-tab-n {
  position: absolute; top: 4px; right: 50%; margin-right: -26px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; font-size: 10px; color: #fff; display: flex; align-items: center; justify-content: center;
}
#nt-lista { flex: 1; overflow-y: auto; max-height: none; }
.nt-item { display: flex; gap: 14px; padding: 16px 22px; cursor: pointer; border-bottom: 1px solid oklch(0.95 0.004 85); background: oklch(0.985 0.003 85); text-align: left; }
.nt-item:not(.no-leida) .nt-txt, .nt-item:not(.no-leida) .nt-ico { opacity: 0.78; }
.nt-item.no-leida { background: #fff; }
.nt-item:hover { background: oklch(0.975 0.006 240); }
.nt-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.nt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.nt-tipo { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.nt-fec { font-size: 10.5px; color: oklch(0.6 0.01 70); white-space: nowrap; }
.nt-tit { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: oklch(0.24 0.01 70); }
.nt-cod { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 15.5px; margin-right: 8px; color: oklch(0.2 0.01 70); }
.nt-det { font-size: 13px; color: oklch(0.5 0.01 70); line-height: 1.4; }
.nt-acc { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.nt-btn-acc {
  white-space: nowrap; cursor: pointer; border-radius: 18px; font-weight: 600; font-size: 12.5px; padding: 7px 14px;
  font-family: inherit; background: #fff; color: oklch(0.4 0.01 70); border: 1px solid oklch(0.88 0.006 85);
}
.nt-btn-acc.principal { background: oklch(0.2 0.01 70); color: #fff; border-color: oklch(0.2 0.01 70); }
.nt-btn-acc:disabled { opacity: 0.5; cursor: wait; }
.nt-punto { width: 9px; height: 9px; flex: none; border-radius: 50%; margin-top: 6px; background: transparent; }
.nt-item.no-leida .nt-punto { background: oklch(0.62 0.11 240); }
.nt-vacio { padding: 40px 22px; text-align: center; font-size: 14px; color: oklch(0.55 0.01 70); }
@media (max-width: 820px) {
  #nt-panel { position: fixed; top: 74px; left: 10px; right: 10px; width: auto; max-width: none; max-height: calc(100vh - 170px); }
  .nt-item { padding: 14px 16px; gap: 12px; }
}

/* Filtros rápidos por familia en Vehículos. Botones grandes: es lo primero que
   se toca al entrar y se usa también desde el celular. */
.v-familias { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; }
.v-familias:empty { display: none; }
.v-familia {
  font-family: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  padding: 9px 17px; border-radius: 22px;
  border: 1px solid var(--line); background: #fff; color: oklch(0.4 0.01 70);
}
.v-familia:hover { border-color: oklch(0.72 0.06 240); color: oklch(0.4 0.1 240); }
.v-familia.activa {
  background: oklch(0.2 0.01 70); border-color: oklch(0.2 0.01 70);
  color: #fff; font-weight: 600;
}

/* ---------- Visor de documentos ---------- */

#dlg-doc { width: min(1080px, 95vw); padding: 0; overflow: hidden; }
/* En columna para que el cuerpo tome lo que sobre: el encabezado cambia de
   alto segun lo largo que sea el nombre del archivo. */
#dlg-doc[open] { display: flex; flex-direction: column; }
.dv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.dv-title { min-width: 0; }
.dv-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-meta { font-size: 11px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.dv-x { padding: 6px 10px; }

/* El fondo gris hace que se note el borde de una hoja blanca o de una foto. */
.dv-body {
  height: min(76vh, 820px); background: oklch(0.95 0.004 85);
  display: flex; align-items: center; justify-content: center; overflow: auto;
}
.dv-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.dv-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dv-nope { text-align: center; padding: 44px 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.dv-nope b { color: var(--text); }

/* En el teléfono el visor toma la pantalla completa: media hoja no sirve. */
@media (max-width: 720px) {
  #dlg-doc { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .dv-body { flex: 1; height: auto; min-height: 0; }
  .dv-actions button { padding: 6px 9px; font-size: 12px; }
  .dv-name { font-size: 13px; }
}

/* ---------- Vehículos: papeles de la flota + En mantención ---------- */

/* Las dos bandas van lado a lado. Antes "En mantención" era un carrusel de
   tarjetas grandes a todo el ancho: se veían tres máquinas de veinte y la lista
   de vehículos quedaba fuera de la pantalla. Mismo problema que teníamos en OTs
   y misma solución. */
.v-bandas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; align-items: start;
}
.v-bandas > *:empty { display: none; }

/* Con veinte máquinas en mantención la lista crecería sin fin y volveríamos al
   problema del carrusel; se corta con scroll propio. */
.v-mant {
  display: flex; flex-direction: column;
  max-height: 320px; overflow-y: auto; overflow-x: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 4px 16px;
}
.v-mant-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; text-decoration: none;
  border-bottom: 1px solid oklch(0.96 0.006 85);
}
.v-mant-row:last-child { border-bottom: 0; }
.v-mant-ic {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: oklch(0.96 0.03 65); display: flex; align-items: center; justify-content: center;
}
.v-mant-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v-mant-code {
  font-size: 13.5px; font-weight: 600; color: oklch(0.28 0.01 70);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v-mant-nom { font-weight: 400; color: oklch(0.5 0.01 70); }
.v-mant-pie {
  font-size: 10.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 1100px) {
  .v-bandas { grid-template-columns: 1fr; }
}

/* ---------- Crear solicitud de insumos ---------- */

/* Los cinco pasos del proceso, arriba del formulario: el mecanico tiene que ver
   que pedir no es recibir, y donde queda su pedido despues de confirmar. */
.sol-pasos { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sol-paso {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 7px 15px 7px 8px; font-size: 12.5px; color: oklch(0.55 0.01 70);
}
.sol-paso-n {
  width: 21px; height: 21px; flex: none; border-radius: 50%;
  background: oklch(0.94 0.004 85); color: oklch(0.5 0.01 70);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
}
.sol-paso.on { border-color: oklch(0.2 0.01 70); color: oklch(0.2 0.01 70); font-weight: 600; }
.sol-paso.on .sol-paso-n { background: oklch(0.2 0.01 70); color: #fff; }

.sol-tabla { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 18px 14px; }
.sol-cab, .sol-fila {
  display: grid; grid-template-columns: minmax(0, 2.4fr) 90px 120px minmax(0, 1.6fr) 38px;
  gap: 10px; align-items: center;
}
.sol-cab {
  padding: 12px 0 10px; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.sol-fila { padding: 11px 0; border-bottom: 1px solid oklch(0.96 0.006 85); }
.sol-fila:last-child { border-bottom: 0; }
.sol-fila .np-fld { padding: 8px 11px; font-size: 13px; }
.sol-quitar { padding: 7px 9px; }

@media (max-width: 820px) {
  /* En el telefono la grilla no cabe: cada linea se apila y el boton de quitar
     queda a lo ancho, que en tactil es mas facil de acertar. */
  .sol-cab { display: none; }
  .sol-fila {
    grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .sol-fila > *:first-child, .sol-fila > *:nth-child(4) { grid-column: 1 / -1; }
  .sol-quitar { grid-column: 1 / -1; }
}

/* ---------- Buscador de insumos de la solicitud ---------- */

.sol-busca { position: relative; min-width: 0; }
.sol-sugg {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 5px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 18px 40px -16px rgba(22, 22, 26, 0.35);
}
.sol-sugg button {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  width: 100%; text-align: left; padding: 9px 11px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; font-size: 13px; color: oklch(0.28 0.01 70);
}
.sol-sugg button:hover { background: var(--hover); }
.sol-sugg button .mono { font-size: 10px; color: var(--faint); }
.sol-sugg-nada { padding: 12px 13px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* Una linea escrita a mano que no calzo con el catalogo se marca en ambar: es
   valida -- bodega la identifica al revisar -- pero tiene que verse distinta de
   una que si quedo apuntando a un insumo. */
.sol-busca.sin-resolver .sol-insumo {
  border-color: oklch(0.78 0.11 75);
  background: oklch(0.98 0.02 85);
}

/* ---------- Ficha de la solicitud de insumos ---------- */

.sp-items { display: flex; flex-direction: column; gap: 10px; }
.sp-item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px;
}
/* Una linea que quien pidio escribio a mano y no calzo con el catalogo. Es
   valida, pero bodega tiene que resolverla antes de poder cotizarla o
   entregarla, asi que se ve distinta desde el primer vistazo. */
.sp-item.sin-identificar { border-color: oklch(0.8 0.09 75); background: oklch(0.99 0.015 85); }
.sp-item-n {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: oklch(0.95 0.006 85); color: oklch(0.45 0.01 70);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.sp-item-nom { font-size: 14.5px; font-weight: 600; color: oklch(0.26 0.01 70); overflow-wrap: anywhere; }
.sp-item-pie { font-size: 11px; color: var(--faint); margin-top: 4px; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .sp-item { align-items: flex-start; flex-wrap: wrap; }
}

/* ---------- Ficha de solicitud: modo revision de bodega ---------- */

.sp-item-rev { flex-direction: column; align-items: stretch; gap: 14px; }
.sp-item-pills { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: none; }
.sp-rev-ident { display: flex; flex-direction: column; gap: 7px; }
.sp-rev-grid {
  display: grid; grid-template-columns: 130px 110px minmax(0, 1fr) auto;
  gap: 14px; align-items: end;
}
.sp-rev-grid label { display: flex; flex-direction: column; gap: 6px; }
.sp-rev-grid .np-fld { padding: 8px 11px; font-size: 13px; }
.sp-rev-chk { align-self: center; white-space: nowrap; }
.sp-acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.sp-cot {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px;
}

@media (max-width: 820px) {
  .sp-rev-grid { grid-template-columns: 1fr 1fr; }
  .sp-rev-grid > *:nth-child(3) { grid-column: 1 / -1; }
  .sp-item-pills { flex-direction: row; align-items: center; }
}

/* ---------- Documentos de bodega: cotizaciones y ordenes de compra ---------- */

.doc-tabla { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px 10px; }
.doc-cab, .doc-fila {
  display: grid;
  grid-template-columns: 130px 110px minmax(0, 1.4fr) 90px 100px 130px 110px 60px;
  gap: 12px; align-items: center;
}
.doc-cab {
  padding: 13px 0 11px; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.doc-fila {
  padding: 13px 0; border-bottom: 1px solid oklch(0.96 0.006 85);
  font-size: 13px; color: oklch(0.3 0.01 70); cursor: default;
}
.doc-fila[data-cot], .doc-fila[data-oc] { cursor: pointer; }
.doc-fila[data-cot]:hover, .doc-fila[data-oc]:hover { background: oklch(0.985 0.004 85); }
.doc-fila:last-child { border-bottom: 0; }
.doc-cod { font-family: 'Anton', sans-serif; font-size: 16px; color: oklch(0.2 0.01 70); }
.doc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La ficha de la cotizacion y la de la orden usan seis columnas, no ocho. */
.cot-cab, .cot-fila { grid-template-columns: 40px minmax(0, 1fr) 110px 140px 120px 90px; }
.cot-fila .np-fld { padding: 7px 10px; font-size: 13px; }
.cot-total-fila { border-top: 2px solid oklch(0.2 0.01 70); border-bottom: 0; font-size: 14px; }

/* El listado de ordenes: seis columnas propias. */
.oc-cab { grid-template-columns: 140px 110px minmax(0, 1fr) 120px 80px 130px; }

@media (max-width: 1000px) {
  /* En pantallas chicas la grilla no cabe: la tabla se desplaza en su caja en
     vez de romper el ancho de la pagina. */
  .doc-tabla { overflow-x: auto; }
  .doc-cab, .doc-fila { min-width: 780px; }
}

/* ---------- Permisos y vacaciones ---------- */

/* El formulario se arma con <label>texto <control></label>. Sin esto el control
   queda pegado al costado del texto: en el celular el textarea del motivo se
   salia de la tarjeta y la etiqueta quedaba a su izquierda, distinto de los
   demas campos. */
#pm-form label, #pm-form .pm-lbl {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
#pm-form label input, #pm-form label select, #pm-form label textarea { width: 100%; }

/* Todos los controles a la misma altura. El <select> y la caja de fecha se
   llevaban un pixel de diferencia y con tres campos en fila eso se nota. */
#pm-form select, #pm-form .fcl { min-height: 36px; }

/* El motivo es el campo donde de verdad se escribe; con dos lineas quedaba una
   franja ancha y chata al lado de campos mas altos que el. */
#pm-form textarea { resize: vertical; line-height: 1.55; min-height: 96px; }

.pm-form { padding: 24px; display: flex; flex-direction: column; gap: 20px; }

/* Tres campos en fila mientras quepan; debajo de 190px cada uno, se apilan. */
.pm-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.pm-bloque { display: flex; flex-direction: column; gap: 6px; }
#pm-form .presets { margin-top: 2px; }

/* Las horas sueltas van una al lado de la otra: son dos campos chicos y
   apilarlos gastaria media pantalla. */
#pm-horas { display: flex; gap: 16px; align-items: flex-end; margin-top: 12px; }
#pm-horas label { width: auto; }
#pm-horas input { width: auto; }

/* Una linea separa el pie del formulario: sin ella el boton flotaba pegado al
   motivo y la cuenta de dias parecia parte del campo. */
.pm-pie {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid oklch(0.93 0.004 85); padding-top: 18px;
}
.pm-pie p { margin: 0; font-size: 12.5px; }
.pm-pie button { padding: 11px 26px; }

@media (max-width: 620px) {
  .pm-form { padding: 18px; gap: 18px; }
  /* En el telefono el boton ocupa el ancho: es la accion de la pantalla y
     apuntarle a un boton chico en una esquina es peor con el pulgar. */
  .pm-pie { flex-direction: column; align-items: stretch; text-align: center; }
  .pm-pie button { width: 100%; }
  #pm-horas label { flex: 1; }
  #pm-horas input { width: 100%; }
}

/* Las listas son grillas de 4 y 5 columnas. En un telefono eso deja columnas de
   70px donde no cabe ni una fecha, asi que cada fila pasa a ser un bloque y cada
   celda dice de que es (data-k). El encabezado sobra: ya no hay columnas. */
.pm-mias { grid-template-columns: 0.8fr 1.5fr 0.8fr 1.5fr !important; }
.pm-res { grid-template-columns: 1.2fr 0.8fr 1.4fr 0.7fr 1.2fr !important; }

@media (max-width: 620px) {
  .pm-mias, .pm-res { grid-template-columns: 1fr !important; gap: 6px; }
  .pm-mias.np-act-head, .pm-res.np-act-head { display: none; }
  .pm-mias > *::before, .pm-res > *::before {
    content: attr(data-k) "  ";
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: oklch(0.62 0.01 70);
    display: block; margin-bottom: 2px;
    /* La celda de "Respuesta" es un flex (trae la nota y el boton Retirar). Sin
       esto su etiqueta se mete como un item mas y queda al lado en vez de arriba,
       distinta de las otras tres. */
    flex-basis: 100%;
  }
}

/* ---------- Inicio gerencial ---------- */

#ger-body { display: flex; flex-direction: column; gap: 22px; }

.ger-fila1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ger-fila2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }

.ger-card {
  background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 22px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0;
}
.ger-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ger-card-title {
  font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: 0.01em;
  font-size: 19px; text-transform: uppercase; color: oklch(0.2 0.01 70);
}
.ger-card-note { font-size: 12px; color: oklch(0.55 0.01 70); }
.ger-pill {
  font-size: 11px; color: oklch(0.48 0.18 25); background: oklch(0.94 0.04 25);
  border-radius: 14px; padding: 3px 10px; white-space: nowrap;
}
.ger-k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.55 0.01 70); }
.ger-link {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(0.5 0.11 240); margin-top: auto;
}
.ger-dias { font-size: 12px; color: oklch(0.5 0.14 25); white-space: nowrap; }


/* --- equipo y distribucion --- */
.ger-puestos { display: flex; flex-direction: column; }
.ger-puestos-head, .ger-puesto {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 46px; align-items: center; gap: 6px;
}
.ger-puestos-head { padding-bottom: 8px; border-bottom: 1px solid oklch(0.9 0.006 85); }
.ger-puestos-head span { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.6 0.01 70); text-align: center; }
.ger-puesto { padding: 9px 0; border-bottom: 1px solid oklch(0.96 0.006 85); }
.ger-puesto-n { font-size: 14px; color: oklch(0.3 0.01 70); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ger-num { font-size: 15px; font-weight: 500; text-align: center; }
.ger-num.ok { color: oklch(0.38 0.12 150); }
.ger-num.desc { color: oklch(0.52 0.14 65); }
.ger-num.cero { color: oklch(0.72 0.01 70); }
/* ventanita con los nombres (2026-10-03): hover en escritorio, toque en celular */
.ger-cel { position: relative; display: flex; justify-content: center; cursor: default; outline: none; }
.ger-cel .ger-num { border-radius: 8px; padding: 2px 8px; }
.ger-cel:hover .ger-num, .ger-cel.abierto .ger-num { background: oklch(0.96 0.006 85); }
.ger-pop {
  display: none; position: absolute; top: calc(100% + 6px); right: -8px; z-index: 30;
  width: max-content; min-width: 190px; max-width: 280px; max-height: 320px; overflow-y: auto;
  flex-direction: column; gap: 9px; padding: 12px 14px; text-align: left;
  background: oklch(0.2 0.01 70); color: #fff; border-radius: 12px;
  box-shadow: 0 14px 30px -12px oklch(0.2 0.01 70 / 0.55);
}
.ger-cel:hover .ger-pop, .ger-cel:focus-visible .ger-pop, .ger-cel.abierto .ger-pop { display: flex; }
.ger-pop-k { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.72 0.01 70); }
.ger-pop-p { display: flex; flex-direction: column; gap: 2px; }
.ger-pop-n { font-size: 13px; font-weight: 600; }
.ger-pop-m { font-size: 12px; color: oklch(0.85 0.09 75); }
.ger-pop-r { font-size: 11.5px; font-style: italic; color: oklch(0.78 0.01 70); white-space: normal; }

/* --- detalle OTs --- */
.ger-ot { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid oklch(0.95 0.006 85); }
.ger-ot-cod { font-family: 'Anton', sans-serif; font-size: 21px; line-height: 1; color: oklch(0.2 0.01 70); }
.ger-ot-sub { font-size: 13.5px; color: oklch(0.42 0.01 70); }

/* --- horas por tipo de OT --- */
.ger-tipo { padding: 13px 0; border-top: 1px solid oklch(0.95 0.006 85); }
.ger-tipo-n { font-size: 15px; font-weight: 500; color: oklch(0.25 0.01 70); }
.ger-tipo-h { font-size: 12.5px; color: oklch(0.3 0.01 70); white-space: nowrap; }
.ger-tipo-act { font-size: 11px; color: oklch(0.58 0.01 70); white-space: nowrap; }
.ger-tipo-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid oklch(0.2 0.01 70); padding-top: 12px; margin-top: auto;
}

/* --- prioridades --- */
.ger-prio { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid oklch(0.95 0.006 85); }
.ger-prio-ot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; flex: none; }
.ger-veh { font-size: 11px; color: oklch(0.4 0.01 70); background: oklch(0.95 0.004 85); border-radius: 6px; padding: 2px 8px; }
.ger-prio-tit { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ger-prio-sub { display: block; font-size: 11px; color: oklch(0.58 0.01 70); margin-top: 2px; }
.ger-quitar {
  flex: none; width: 26px; height: 26px; border-radius: 50%; padding: 0;
  border: 1px solid oklch(0.9 0.006 85); background: #fff;
  color: oklch(0.6 0.01 70); font-size: 12px; line-height: 1; cursor: pointer;
}
.ger-quitar:hover { border-color: oklch(0.6 0.2 25); color: oklch(0.52 0.19 25); }

/* --- buscador de OTs --- */
.ger-buscar { position: relative; margin-top: auto; }
.ger-buscar input { width: 100%; }
.ger-add {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 11px 16px; cursor: pointer;
  background: #fff; border: 1px dashed oklch(0.78 0.01 85); border-radius: 14px;
  color: oklch(0.4 0.01 70);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ger-add:hover { border-color: oklch(0.62 0.11 240); color: oklch(0.4 0.1 240); }
.ger-add:active { background: oklch(0.98 0.008 240); }
.ger-add .mono { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ger-caja { margin-top: 10px; }

/* El estado vacio explica para que sirve la tarjeta: es lo primero que se ve
   cuando todavia no hay nada marcado. */
.ger-vacio { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 6px; font-size: 14px; }
.ger-vacio .muted { font-size: 12.5px; line-height: 1.5; }
.ger-res {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 14px;
  box-shadow: 0 18px 40px -24px oklch(0.3 0.02 70 / 0.5); overflow: hidden;
}
.ger-res-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px;
  border: none; border-bottom: 1px solid oklch(0.96 0.006 85); background: #fff;
  cursor: pointer; font-size: 13px; text-align: left;
}
.ger-res-item:last-child { border-bottom: none; }
.ger-res-item:hover { background: oklch(0.97 0.012 240); }
.ger-res-vacio { padding: 12px 14px; font-size: 12.5px; color: oklch(0.55 0.01 70); }

/* --- historial --- */
.ger-feed { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid oklch(0.95 0.006 85); font-size: 14.5px; }
.ger-feed-h { font-size: 12px; color: oklch(0.55 0.01 70); width: 74px; flex: none; }
.ger-feed-ot { font-size: 12px; color: oklch(0.45 0.1 240); flex: none; }
.ger-feed-hs { font-size: 12px; color: oklch(0.4 0.01 70); width: 52px; text-align: right; flex: none; }

/* --- resumen mensual --- */
.ger-tabla { display: flex; flex-direction: column; }
.ger-tr {
  display: grid; grid-template-columns: 1.5fr 0.9fr 1.2fr 0.9fr 1fr;
  column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px;
}
.ger-tr > span { font-size: 12.5px; }
.ger-tr + .ger-tr { border-top: 1px solid oklch(0.96 0.006 85); }
.ger-th { padding-bottom: 9px; border-bottom: 1px solid oklch(0.9 0.006 85); }
.ger-th span { font-size: 9px !important; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.58 0.01 70); white-space: nowrap; }
.ger-th span:not(:first-child) { text-align: center; }
.ger-th span:last-child { text-align: right; }
.ger-tr > span:not(:first-child) { text-align: center; }
.ger-tr > span:last-child { text-align: right; }
.ger-tr-hoy { background: oklch(0.97 0.012 240); }
.ger-tr-total { border-top: 2px solid oklch(0.2 0.01 70) !important; margin-top: 4px; padding-top: 13px; }
.ger-mes { display: flex; align-items: center; gap: 8px; font-size: 14px !important; font-weight: 500; color: oklch(0.32 0.01 70); }
.ger-tag {
  font-size: 9px; letter-spacing: 0.06em; color: oklch(0.44 0.1 240);
  background: oklch(0.94 0.02 240); border-radius: 10px; padding: 2px 7px; white-space: nowrap;
}

/* --- celular: una columna y tabla mas apretada --- */
@media (max-width: 900px) {
  .ger-fila1, .ger-fila2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ger-card { padding: 20px; gap: 16px; }
  .ger-tr { grid-template-columns: 1.3fr 0.8fr 1fr 1fr; column-gap: 8px; padding: 9px 6px; }
  /* El cierre promedio es lo primero que sobra cuando no cabe: el costo y las
     horas son las dos cifras por las que se abre esta tabla. */
  .ger-tr > span:nth-child(4), .ger-th span:nth-child(4) { display: none; }
  .ger-tr > span { font-size: 11.5px; }
  .ger-feed-h { width: 60px; }
  .ger-feed-ot { display: none; }
}

/* ---------- Ir a la ficha ---------- */
/* Discreto a proposito: hereda el color del texto donde vive y solo se delata al
   pasar por encima. Si cada dato navegable se pintara de azul, media pantalla
   quedaria azul y el ojo dejaria de distinguir que es importante. */
.ir-a { color: inherit; text-decoration: none; border-bottom: 1px dotted oklch(0.78 0.01 85); }
.ir-a:hover { color: oklch(0.45 0.13 240); border-bottom-color: currentColor; }

/* ---------- Checklists de vehiculos (2026-09-25) ----------
   Diseño "Checklist Camioneta.dc". Pensado primero para el celular: casi
   todos los checklists se hacen con el telefono delante del equipo. Todo
   prefijado ck- y al final del archivo, porque varias reglas genericas de la
   app definen display y grillas sobre clases comunes y ganan por orden. */

.ck-h1 { font-family: 'Anton', sans-serif; font-size: 52px; line-height: 0.9; text-transform: uppercase; letter-spacing: 0.01em; color: oklch(0.2 0.01 70); overflow-wrap: anywhere; }
.ck-h1 a.ir-a { border-bottom: none; }
.ck-h2 { font-family: 'Anton', sans-serif; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: oklch(0.2 0.01 70); }
.ck-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.5 0.1 240); }
.ck-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.52 0.01 70); }
.ck-ayuda { font-size: 14px; line-height: 1.5; color: oklch(0.5 0.01 70); }
.ck-nota { font-size: 11.5px; color: oklch(0.55 0.01 70); }
.ck-migas { font-size: 12px; letter-spacing: 0.12em; color: oklch(0.52 0.01 70); }
.ck-migas a { color: oklch(0.52 0.01 70); }
.ck-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ck-btn-dot { width: 32px; height: 32px; border-radius: 50%; background: oklch(0.62 0.11 240); display: inline-flex; align-items: center; justify-content: center; flex: none; margin: -7px -14px -7px 0; }
.ck-link-rojo { background: none; border: none; padding: 0; font: inherit; color: oklch(0.52 0.18 25); text-decoration: underline; cursor: pointer; }

.ck-card { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 22px; min-width: 0; }
.ck-card-pad { padding: 30px 32px; display: flex; flex-direction: column; gap: 22px; }
.ck-card-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.ck-fld {
  width: 100%; font-family: 'Instrument Sans', sans-serif; font-size: 15px; color: oklch(0.24 0.01 70);
  background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; padding: 12px 14px; outline: none;
}
.ck-fld.mono { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.ck-fld:focus { border-color: oklch(0.62 0.11 240); box-shadow: 0 0 0 3px oklch(0.62 0.11 240 / 0.14); }
.ck-fld:disabled { background: oklch(0.975 0.004 85); color: oklch(0.45 0.01 70); }
textarea.ck-fld { resize: vertical; line-height: 1.5; }
.ck-campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ck-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* --- progreso y guardado --- */
.ck-progreso { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ck-progreso-txt { display: flex; align-items: center; gap: 12px; font-size: 11px; color: oklch(0.5 0.01 70); }
.ck-barra { width: 240px; height: 6px; border-radius: 4px; background: oklch(0.92 0.004 85); overflow: hidden; }
.ck-barra > div { height: 100%; background: oklch(0.62 0.15 150); border-radius: 4px; transition: width 0.25s; }
.ck-pill { font-family: 'JetBrains Mono', monospace; font-size: 11px; border-radius: 20px; padding: 4px 11px; background: #fff; border: 1px solid oklch(0.9 0.006 85); color: oklch(0.55 0.01 70); white-space: nowrap; }
.ck-pill-guardando { color: oklch(0.5 0.1 240); border-color: oklch(0.85 0.04 240); }
.ck-pill-error { color: oklch(0.5 0.16 25); border-color: oklch(0.85 0.07 25); background: oklch(0.98 0.015 25); }

/* --- pasos --- */
.ck-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ck-paso {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid oklch(0.9 0.006 85); color: oklch(0.5 0.01 70); font-family: inherit; min-width: 0;
}
.ck-paso.cur { background: #fff; border-color: oklch(0.2 0.01 70); color: oklch(0.2 0.01 70); box-shadow: 0 10px 24px -18px oklch(0.2 0.01 70 / 0.6); }
.ck-paso.hecho { color: oklch(0.2 0.01 70); }
.ck-paso:disabled { cursor: not-allowed; opacity: 0.55; }
.ck-paso-num {
  font-family: 'Anton', sans-serif; font-size: 16px; width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; background: oklch(0.95 0.004 85); color: oklch(0.55 0.01 70);
}
.ck-paso.cur .ck-paso-num { background: oklch(0.2 0.01 70); color: #fff; }
.ck-paso.hecho .ck-paso-num { background: oklch(0.93 0.06 150); color: oklch(0.42 0.11 150); }
.ck-paso-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-paso-nombre { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-paso-sub { font-size: 11px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- paso 1 --- */
.ck-dos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ck-dos-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ck-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ck-ficha { display: grid; grid-template-columns: repeat(3, 1fr); background: oklch(0.975 0.004 85); border-radius: 14px; }
.ck-ficha > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ck-ficha > div + div { border-left: 1px solid oklch(0.92 0.006 85); }
.ck-ficha-v { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ck-lectura { display: flex; gap: 8px; }
.ck-lectura .ck-fld { flex: 1; min-width: 0; }
.ck-seg { display: flex; border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; overflow: hidden; flex: none; }
.ck-seg button { border: none; background: #fff; padding: 0 14px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: oklch(0.5 0.01 70); cursor: pointer; }
.ck-seg button.on { background: oklch(0.2 0.01 70); color: #fff; }
.ck-movs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ck-mov {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 18px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1.5px solid oklch(0.88 0.006 85); color: oklch(0.2 0.01 70); font-family: inherit; text-align: left;
}
.ck-mov.on { background: oklch(0.97 0.015 240); border-color: oklch(0.62 0.11 240); }
.ck-mov-n { font-size: 15px; font-weight: 600; }
.ck-mov-s { font-size: 11px; color: oklch(0.55 0.01 70); }
.ck-como { background: oklch(0.2 0.01 70); border: none; padding: 28px 30px; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.ck-como-k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.72 0.06 240); }
.ck-como-fila { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: oklch(0.86 0.01 70); }
.ck-como-n { font-family: 'Anton', sans-serif; font-size: 18px; color: oklch(0.62 0.11 240); width: 24px; flex: none; }
.ck-como-pie { font-size: 12px; color: oklch(0.7 0.01 70); border-top: 1px solid oklch(0.32 0.01 70); padding-top: 12px; }
a.ck-ultimo { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; color: oklch(0.24 0.01 70); }
a.ck-ultimo:hover { border-color: oklch(0.8 0.04 240); }
.ck-ultimo-tally { font-size: 11px; color: oklch(0.44 0.11 150); background: oklch(0.93 0.06 150); border-radius: 14px; padding: 3px 10px; white-space: nowrap; }
.ck-ultimo-tally.con-fallas { color: oklch(0.48 0.16 25); background: oklch(0.95 0.04 25); }

/* --- paso 2: el riel de grupos y la tabla --- */
.ck-insp { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.ck-rail { position: sticky; top: 22px; padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.ck-rail-k { padding: 4px 10px 10px; }
.ck-rail-lista { display: flex; flex-direction: column; gap: 4px; }
.ck-rail-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; border: none; cursor: pointer;
  background: transparent; color: oklch(0.3 0.01 70); font-family: inherit; font-size: 14px; text-align: left;
}
.ck-rail-item.on { background: oklch(0.96 0.02 240); color: oklch(0.35 0.1 240); font-weight: 600; }
.ck-rail-nom { flex: 1; min-width: 0; }
.ck-rail-n { font-size: 11px; color: oklch(0.58 0.01 70); }
.ck-rail-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2px solid oklch(0.85 0.006 85); }
.ck-rail-item[data-estado="parcial"] .ck-rail-dot { border-color: oklch(0.62 0.15 150); }
.ck-rail-item[data-estado="completo"] .ck-rail-dot { background: oklch(0.62 0.15 150); border-color: oklch(0.62 0.15 150); }
.ck-rail-item[data-estado="completo"] .ck-rail-n { color: oklch(0.45 0.12 150); }
.ck-rail-item[data-estado="malo"] .ck-rail-dot { background: oklch(0.58 0.2 25); border-color: oklch(0.58 0.2 25); }
.ck-leyenda { border-top: 1px solid oklch(0.94 0.006 85); margin-top: 10px; padding: 14px 10px 4px; display: flex; flex-direction: column; gap: 8px; }
.ck-leyenda > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12px; color: oklch(0.45 0.01 70); }
.c-b { color: oklch(0.45 0.12 150); }
.c-m { color: oklch(0.52 0.19 25); }
.c-na { color: oklch(0.45 0.01 70); }
.c-t { color: oklch(0.45 0.1 240); }

.ck-grupo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ck-grupo-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.ck-grupo-nom { font-size: 34px; line-height: 0.95; }
.ck-tabla { overflow: hidden; }
.ck-tabla-head, .ck-item-fila { display: grid; grid-template-columns: 56px minmax(0, 1fr) 232px; gap: 16px; align-items: center; padding: 12px 24px; }
.ck-tabla-head { background: oklch(0.985 0.004 85); border-bottom: 1px solid oklch(0.93 0.006 85); }
.ck-item-wrap + .ck-item-wrap { border-top: 1px solid oklch(0.95 0.006 85); }
.ck-item.malo { background: oklch(0.985 0.012 25); }
.ck-item-n { font-size: 13px; color: oklch(0.55 0.01 70); }
.ck-item-nom { font-size: 15px; }
.ck-opts { display: flex; gap: 6px; justify-content: center; }
.ck-opt {
  width: 52px; height: 38px; border-radius: 10px; cursor: pointer; flex: none;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500;
  background: #fff; border: 1px solid oklch(0.9 0.006 85);
}
.ck-opt-b { color: oklch(0.45 0.12 150); }
.ck-opt-m { color: oklch(0.52 0.18 25); }
.ck-opt-na { color: oklch(0.5 0.01 70); }
.ck-opt-t { color: oklch(0.45 0.1 240); }
.ck-opt.apagado { color: oklch(0.72 0.01 70); }
.ck-opt-b.on { background: oklch(0.62 0.15 150); border-color: oklch(0.62 0.15 150); color: #fff; }
.ck-opt-m.on { background: oklch(0.58 0.2 25); border-color: oklch(0.58 0.2 25); color: #fff; }
.ck-opt-na.on { background: oklch(0.55 0.01 70); border-color: oklch(0.55 0.01 70); color: #fff; }
.ck-opt-t.on { background: oklch(0.55 0.12 240); border-color: oklch(0.55 0.12 240); color: #fff; }
.ck-falla { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 16px; padding: 0 24px 16px 96px; }
.ck-falla textarea { border-color: oklch(0.85 0.06 25); font-size: 14px; }
.ck-fotos { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ck-foto { position: relative; display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid oklch(0.9 0.006 85); flex: none; }
.ck-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-foto-doc { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; background: oklch(0.97 0.02 25); color: oklch(0.45 0.13 25); text-decoration: none; }
.ck-foto-doc b { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.ck-foto-doc span { font-size: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: oklch(0.45 0.01 70); }
.ck-foto-x {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; padding: 0;
  background: oklch(0.2 0.01 70 / 0.75); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.ck-foto-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-width: 140px; min-height: 64px;
  border: 1px dashed oklch(0.8 0.06 25); border-radius: 12px; color: oklch(0.5 0.14 25); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* --- paso 3 --- */
.ck-pregunta { display: flex; align-items: center; gap: 16px; padding: 18px 0; }
.ck-pregunta + .ck-pregunta { border-top: 1px solid oklch(0.95 0.006 85); }
.ck-pregunta-n { font-family: 'Anton', sans-serif; font-size: 18px; color: oklch(0.55 0.01 70); width: 26px; flex: none; }
.ck-pregunta-t { flex: 1; font-size: 16px; line-height: 1.45; min-width: 0; }
.ck-sino { display: flex; gap: 8px; flex: none; }
.ck-sino button {
  width: 64px; height: 42px; border-radius: 11px; cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit;
  background: #fff; color: oklch(0.4 0.01 70); border: 1px solid oklch(0.88 0.006 85);
}
.ck-sino .si.on { background: oklch(0.62 0.15 150); border-color: oklch(0.62 0.15 150); color: #fff; }
.ck-sino .no.on { background: oklch(0.58 0.2 25); border-color: oklch(0.58 0.2 25); color: #fff; }
.ck-sino-v { font-weight: 600; font-size: 14px; padding: 6px 14px; border-radius: 10px; flex: none; }
.ck-sino-v.si { color: oklch(0.42 0.11 150); background: oklch(0.95 0.04 150); }
.ck-sino-v.no { color: oklch(0.5 0.18 25); background: oklch(0.96 0.03 25); }
.ck-alerta {
  display: flex; gap: 12px; align-items: flex-start; background: oklch(0.97 0.025 25); border: 1px solid oklch(0.87 0.06 25);
  border-radius: 14px; padding: 14px 18px; font-size: 14px; line-height: 1.5; color: oklch(0.42 0.12 25);
}
.ck-alerta-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.58 0.2 25); margin-top: 7px; flex: none; }

/* --- paso 4 --- */
.ck-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ck-tally-c { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; border-radius: 18px; }
.ck-tally-n { font-family: 'Anton', sans-serif; font-size: 44px; line-height: 1; }
.ck-pendiente {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; background: oklch(0.97 0.03 65);
  border: 1px solid oklch(0.87 0.07 65); border-radius: 14px; padding: 14px 20px; font-size: 14px; color: oklch(0.45 0.11 65);
}
.ck-pendiente button { background: transparent; border: none; cursor: pointer; font-weight: 600; font-size: 14px; color: oklch(0.45 0.11 65); flex: none; font-family: inherit; }
.ck-falla-fila { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.ck-falla-fila + .ck-falla-fila { border-top: 1px solid oklch(0.95 0.006 85); }
.ck-falla-fila .ck-item-n { width: 28px; flex: none; padding-top: 1px; }
.ck-firma {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: 14px; cursor: pointer; text-align: left;
  background: #fff; border: 1.5px dashed oklch(0.8 0.006 85); font-family: inherit; width: 100%;
}
.ck-firma.on { background: oklch(0.97 0.02 150); border: 1.5px solid oklch(0.8 0.08 150); }
.ck-firma-nom { font-size: 15px; font-weight: 600; color: oklch(0.45 0.1 240); }
.ck-firma.on .ck-firma-nom { font-size: 22px; font-style: italic; color: oklch(0.3 0.05 150); }
.ck-firma-pend { border: 1px solid oklch(0.92 0.006 85); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; background: oklch(0.985 0.004 85); }
.ck-enviar {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  border-radius: 30px; padding: 10px 10px 10px 26px; border: none; cursor: pointer; font-family: inherit;
  font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  background: oklch(0.2 0.01 70); color: #fff; box-shadow: 0 12px 26px -12px oklch(0.2 0.01 70 / 0.6);
}
.ck-enviar .ck-btn-dot { margin: 0; width: 34px; height: 34px; }
.ck-enviar.off, .ck-enviar:disabled { background: oklch(0.9 0.004 85); color: oklch(0.6 0.01 70); box-shadow: none; cursor: not-allowed; }
.ck-revisar { display: flex; flex-direction: column; gap: 10px; }

.ck-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid oklch(0.9 0.006 85); padding-top: 22px; }
.ck-atras { background: transparent; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: oklch(0.45 0.01 70); font-family: inherit; padding: 10px 0; text-align: left; }
.ck-sig { max-width: 100%; }

.ck-enviado { padding: 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ck-enviado-ico { width: 64px; height: 64px; border-radius: 50%; background: oklch(0.93 0.06 150); display: flex; align-items: center; justify-content: center; }
.ck-enviado-acc { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* --- ficha de un checklist firmado --- */
.ck-estado { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; border-radius: 14px; padding: 4px 11px; white-space: nowrap; }
.ck-estado-borrador { color: oklch(0.5 0.01 70); background: oklch(0.95 0.004 85); }
.ck-estado-firmado { color: oklch(0.48 0.12 65); background: oklch(0.95 0.05 75); }
.ck-estado-revisado { color: oklch(0.42 0.11 150); background: oklch(0.94 0.05 150); }
.ck-kvs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.ck-kv { display: flex; flex-direction: column; gap: 6px; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.ck-todo summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 24px 32px; cursor: pointer; }
.ck-todo summary::-webkit-details-marker { display: none; }
.ck-todo[open] summary { border-bottom: 1px solid oklch(0.94 0.006 85); }
.ck-todo-g { display: flex; flex-direction: column; padding: 16px 32px 8px; }
.ck-todo-g > .ck-lbl { padding-bottom: 6px; }
.ck-todo-i { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; border-top: 1px solid oklch(0.965 0.004 85); }
.ck-todo-i .ck-item-n { width: 26px; flex: none; }
.ck-todo-v { width: 44px; text-align: center; font-size: 12px; border-radius: 8px; padding: 3px 0; flex: none; }
.ck-v-b { color: oklch(0.42 0.11 150); background: oklch(0.95 0.04 150); }
.ck-v-m { color: oklch(0.5 0.18 25); background: oklch(0.96 0.03 25); }
.ck-v-na { color: oklch(0.5 0.01 70); background: oklch(0.955 0.004 85); }
.ck-v-t { color: oklch(0.45 0.1 240); background: oklch(0.955 0.02 240); }

/* --- lista --- */
.ck-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-filtro {
  font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 22px; padding: 9px 16px; cursor: pointer;
  background: #fff; border: 1px solid oklch(0.88 0.006 85); color: oklch(0.42 0.01 70);
}
.ck-filtro.on { background: oklch(0.2 0.01 70); border-color: oklch(0.2 0.01 70); color: #fff; }
.ck-lista { overflow: hidden; }
a.ck-row {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; gap: 18px; align-items: center;
  padding: 16px 24px; color: oklch(0.24 0.01 70);
}
a.ck-row + a.ck-row { border-top: 1px solid oklch(0.95 0.006 85); }
a.ck-row:hover { background: oklch(0.985 0.008 240); }
.ck-row-veh { font-family: 'Anton', sans-serif; font-size: 21px; line-height: 1; color: oklch(0.2 0.01 70); }
.ck-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ck-row-tit { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-row-sub { font-size: 11.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-row-tally { display: flex; gap: 10px; font-size: 11.5px; }
.ck-row-tally .b { color: oklch(0.45 0.12 150); }
.ck-row-tally .m { color: oklch(0.52 0.19 25); font-weight: 600; }
.ck-row-tally .na { color: oklch(0.55 0.01 70); }
.ck-row-tally .t { color: oklch(0.45 0.1 240); }
.ck-row-fin { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ck-punto { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.58 0.2 25); flex: none; }
.ck-vacio { padding: 32px 24px; font-size: 14px; color: oklch(0.55 0.01 70); }
.ck-borradores { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; border-color: oklch(0.87 0.07 65); background: oklch(0.99 0.012 75); }
.ck-borradores > .ck-lbl { padding-bottom: 6px; color: oklch(0.5 0.1 65); }
a.ck-borrador { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: oklch(0.24 0.01 70); font-size: 14.5px; }
a.ck-borrador + a.ck-borrador { border-top: 1px solid oklch(0.93 0.02 75); }
.ck-continuar { font-weight: 600; font-size: 13px; color: oklch(0.45 0.11 65); flex: none; }

/* ============ CELULAR ============ */
@media (max-width: 1100px) {
  .ck-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-insp { grid-template-columns: 240px minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .ck-h1 { font-size: 36px; }
  .ck-h2 { font-size: 20px; }
  .ck-card { border-radius: 18px; }
  .ck-card-pad { padding: 20px 18px; gap: 18px; }
  .ck-head { align-items: flex-start; gap: 14px; }
  .ck-progreso { align-items: stretch; width: 100%; }
  .ck-progreso-txt { justify-content: space-between; }
  .ck-barra { width: 100%; }
  .ck-solo-escritorio { display: none; }

  /* Pasos: solo el numero, y el nombre del paso actual debajo. */
  .ck-pasos { gap: 6px; }
  .ck-paso { flex-direction: column; justify-content: center; gap: 5px; padding: 9px 4px; border-radius: 14px; }
  .ck-paso-txt { align-items: center; }
  .ck-paso-nombre { font-size: 11px; }
  .ck-paso-sub { display: none; }
  .ck-paso-num { width: 30px; height: 30px; font-size: 14px; }

  .ck-dos, .ck-dos-3 { grid-template-columns: 1fr; }
  .ck-grid2 { grid-template-columns: 1fr; gap: 16px; }
  .ck-ficha { grid-template-columns: 1fr 1fr; }
  .ck-ficha > div:nth-child(3) { grid-column: 1 / -1; border-left: none; border-top: 1px solid oklch(0.92 0.006 85); }
  .ck-movs { grid-template-columns: 1fr; }
  .ck-mov { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 14px 16px; }
  .ck-como { padding: 22px; }

  /* Paso 2: el riel se vuelve una tira horizontal de grupos, pegada arriba
     mientras se baja por la lista. */
  .ck-insp { grid-template-columns: 1fr; gap: 16px; }
  .ck-rail {
    position: sticky; top: 0; z-index: 5; padding: 8px; border-radius: 0 0 16px 16px;
    margin: 0 -4px; box-shadow: 0 12px 20px -18px oklch(0.3 0.02 70 / 0.5);
  }
  .ck-rail-k, .ck-leyenda { display: none; }
  .ck-rail-lista { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .ck-rail-lista::-webkit-scrollbar { display: none; }
  .ck-rail-item { flex: none; padding: 9px 12px; gap: 8px; font-size: 13px; background: oklch(0.975 0.004 85); white-space: nowrap; }
  .ck-rail-nom { flex: none; }
  .ck-grupo-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .ck-grupo-nom { font-size: 28px; }

  /* Cada elemento: el nombre arriba y las cuatro opciones a lo ancho, con
     botones grandes para el dedo (guantes, sol, apuro). */
  .ck-tabla-head { display: none; }
  .ck-item-fila { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 10px; padding: 14px 14px 12px; }
  .ck-opts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ck-opt { width: auto; height: 46px; font-size: 14px; }
  .ck-falla { grid-template-columns: 1fr; gap: 10px; padding: 0 14px 14px; }
  .ck-foto-btn { min-height: 52px; }

  .ck-pregunta { flex-wrap: wrap; gap: 10px 12px; }
  .ck-pregunta-t { flex-basis: calc(100% - 40px); }
  .ck-sino { width: 100%; padding-left: 38px; }
  .ck-sino button { flex: 1; height: 46px; }

  .ck-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ck-tally-c { padding: 14px 16px; }
  .ck-tally-n { font-size: 34px; }
  .ck-pendiente { flex-direction: column; align-items: flex-start; gap: 8px; }

  .ck-pie { padding-top: 16px; }
  .ck-sig { padding: 12px 12px 12px 18px; font-size: 12px; min-width: 0; }
  .ck-sig .ck-btn-dot { margin: -4px -6px -4px 4px; }

  .ck-enviado { padding: 36px 20px; }
  .ck-kvs { gap: 14px 16px; }
  .ck-todo summary { padding: 18px 18px; }
  .ck-todo-g { padding: 12px 18px 6px; }

  a.ck-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; }
  .ck-row-veh { font-size: 18px; grid-row: span 2; }
  .ck-row-tally { grid-column: 2; grid-row: 2; }
  .ck-row-fin { grid-column: 3; grid-row: 1 / span 2; }
  .ck-borradores { padding: 14px 16px; }
}

/* ---------- Cobro de la OT (2026-09-28) ----------
   Un check grande: es lo unico que hay que hacer en esta seccion. */
.ot-cobro {
  position: relative; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; cursor: pointer;
  padding: 10px 16px 10px 12px; border-radius: 14px; border: 1.5px solid oklch(0.85 0.006 85);
  background: #fff; font-size: 15px; font-weight: 600; color: oklch(0.35 0.01 70);
}
.ot-cobro input { position: absolute; opacity: 0; pointer-events: none; }
.ot-cobro-caja {
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid oklch(0.78 0.01 70);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; flex: none;
}
.ot-cobro.on { border-color: oklch(0.8 0.08 150); background: oklch(0.97 0.02 150); color: oklch(0.32 0.08 150); }
.ot-cobro.on .ot-cobro-caja { background: oklch(0.6 0.14 150); border-color: oklch(0.6 0.14 150); }
.ot-cobro:has(input:focus-visible) { outline: 2px solid oklch(0.62 0.11 240); outline-offset: 2px; }
.w-porcobrar {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap;
  color: oklch(0.45 0.13 50); background: oklch(0.95 0.05 60); border-radius: 10px; padding: 2px 8px;
}
.w-porcobrar.w-cobrada { color: oklch(0.4 0.11 150); background: oklch(0.94 0.06 150); }

/* ---------- Selector de checklist (2026-10-01) ----------
   Diseño "Checklists - Selector de tipo": el mismo componente en celular y
   escritorio. Botones altos (minimo 68px) para el dedo. */
.cks { gap: 20px; max-width: 1000px; }
.cks-head { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.cks-head-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cks-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.5 0.1 240); }
.cks-titulo { font-family: 'Anton', sans-serif; font-size: 30px; line-height: 0.95; text-transform: uppercase; color: oklch(0.2 0.01 70); }
.cks-atras { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid oklch(0.88 0.006 85); background: #fff; cursor: pointer; font-size: 20px; color: oklch(0.3 0.01 70); }
.cks-migas { display: flex; flex-wrap: wrap; gap: 6px; }
.cks-migas span { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 5px 11px; border-radius: 14px; background: #fff; border: 1px solid oklch(0.9 0.006 85); color: oklch(0.4 0.01 70); }
.cks-inicio { display: flex; flex-direction: column; gap: 18px; }
.cks-campo { display: flex; flex-direction: column; gap: 8px; }
.cks-lbl { font-size: 14px; font-weight: 600; color: oklch(0.35 0.01 70); }
.cks-buscar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid oklch(0.2 0.01 70); border-radius: 16px; padding: 0 8px 0 16px; height: 58px; box-shadow: 0 10px 24px -18px oklch(0.2 0.01 70 / 0.6); }
.cks-buscar svg { flex: none; }
.cks-buscar input, .cks-filtro input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Instrument Sans', sans-serif; font-size: 16px; color: oklch(0.24 0.01 70); padding: 0; box-shadow: none; }
.cks-limpiar { width: 42px; height: 42px; flex: none; border-radius: 12px; border: none; background: oklch(0.96 0.004 85); cursor: pointer; color: oklch(0.45 0.01 70); font-size: 14px; }
.cks-filtro { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 14px; padding: 0 14px; height: 50px; }
.cks-filtro svg { flex: none; }
.cks-lista-wrap { display: flex; flex-direction: column; gap: 10px; }
.cks-cuenta { font-size: 11px; color: oklch(0.55 0.01 70); }
.cks-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cks-item, .cks-opcion, .cks-general { min-width: 0; }
.cks input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.cks-item {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; font-family: inherit;
  background: #fff; border: 1px solid oklch(0.9 0.006 85); border-radius: 16px; padding: 14px 16px; min-height: 68px; color: oklch(0.24 0.01 70);
}
.cks-item:hover { border-color: oklch(0.8 0.04 240); }
.cks-cod { font-family: 'Anton', sans-serif; font-size: 24px; line-height: 1; width: 76px; flex: none; color: oklch(0.2 0.01 70); overflow-wrap: anywhere; }
.cks-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cks-item-nom { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cks-meta { font-size: 11px; color: oklch(0.55 0.01 70); }
.cks-flecha { color: oklch(0.5 0.11 240); font-size: 18px; flex: none; }
.cks-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cks-pill { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 12px; }
.cks-pill-sin { background: oklch(0.955 0.004 85); color: oklch(0.5 0.01 70); }
.cks-vacio { background: #fff; border: 1px dashed oklch(0.85 0.006 85); border-radius: 16px; padding: 22px; text-align: center; font-size: 14px; color: oklch(0.5 0.01 70); }
.cks-aviso { background: oklch(0.97 0.03 75); border: 1px solid oklch(0.88 0.06 75); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: oklch(0.45 0.1 65); }
.cks-o { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cks-o span { flex: 1; height: 1px; background: oklch(0.88 0.006 85); }
.cks-o b { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.55 0.01 70); }
.cks-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cks-cat {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; text-align: left; cursor: pointer;
  font-family: inherit; background: #fff; border: 1px solid oklch(0.9 0.006 85); border-radius: 20px; padding: 18px 18px 16px; min-height: 168px; overflow: hidden;
}
.cks-cat-barra { position: absolute; left: 0; top: 0; right: 0; height: 5px; }
.cks-cat-sigla { align-self: flex-start; font-family: 'Anton', sans-serif; font-size: 20px; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.cks-cat-txt { display: flex; flex-direction: column; gap: 6px; }
.cks-cat-nom { font-family: 'Anton', sans-serif; font-size: 23px; line-height: 1; text-transform: uppercase; color: oklch(0.2 0.01 70); }
.cks-cat-meta { font-size: 11px; color: oklch(0.52 0.01 70); }
.cks-general {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: oklch(0.2 0.01 70); border: none; border-radius: 20px; padding: 18px 18px 18px 22px; color: #fff; min-height: 84px;
}
.cks-general-txt { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cks-general-dot { margin: 0; width: 42px; height: 42px; }
.cks-confirmar { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.cks-equipo { position: relative; background: oklch(0.2 0.01 70); color: #fff; border-radius: 20px; padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.cks-equipo-esq { position: absolute; top: 10px; right: 10px; width: 13px; height: 13px; border-top: 2px solid oklch(0.62 0.11 240); border-right: 2px solid oklch(0.62 0.11 240); }
.cks-equipo-k { font-size: 10px; letter-spacing: 0.18em; color: oklch(0.72 0.08 240); }
.cks-equipo-cod { font-family: 'Anton', sans-serif; font-size: 60px; line-height: 0.88; }
.cks-equipo-nom { font-size: 16px; font-weight: 600; }
.cks-equipo-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: oklch(0.72 0.01 70); }
.cks-opcion {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; font-family: inherit; color: oklch(0.24 0.01 70);
  border-radius: 16px; padding: 16px 18px; min-height: 68px; background: #fff; border: 1.5px solid oklch(0.9 0.006 85);
}
.cks-opcion.on { background: oklch(0.97 0.015 240); border-color: oklch(0.62 0.11 240); }
.cks-radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid oklch(0.82 0.006 85); background: #fff; }
.cks-opcion.on .cks-radio { border-color: oklch(0.62 0.11 240); background: oklch(0.62 0.11 240); box-shadow: inset 0 0 0 4px oklch(0.97 0.015 240); }
.cks-comenzar { min-height: 60px; font-size: 15px; justify-content: space-between; }
.ck-link-azul { background: none; border: none; padding: 0; font: inherit; color: oklch(0.45 0.11 240); font-weight: 600; cursor: pointer; }

@media (max-width: 820px) {
  .cks { gap: 16px; }
  .cks-grilla { grid-template-columns: minmax(0, 1fr); }
  .cks-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cks-cat { min-height: 150px; gap: 16px; }
  .cks-cat-nom { font-size: 20px; }
  .cks-equipo-cod { font-size: 48px; }
}

/* ---------- Inicio gerencial: cuadro de OTs (diseño "Inicio - Cuadro OTs" 4A, 2026-10-03) ----------
   Paleta de produccion: tinta cafe, naranjo para lo abierto y lo pendiente,
   fondos crema. Medidas tomadas del diseño. */
/* Fondo y borde de las demas tarjetas (pedido de Francisco): el color del diseño
   queda solo en los acentos. Mas chico que el diseño para no alargar la fila. */
.ger-cuadro { gap: 12px; color: oklch(0.2 0.02 60); transition: opacity .15s; }
.gc-head { display: flex; flex-direction: column; gap: 8px; }
.gc-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gc-titulo { font-size: 22px; text-transform: uppercase; white-space: nowrap; }
.gc-tabs { display: flex; background: var(--warm-bg); border-radius: 18px; padding: 3px; }
.gc-tabs button {
  border: none; cursor: pointer; padding: 4px 9px; border-radius: 15px; font-family: inherit;
  font-size: 11px; font-weight: 600; background: transparent; color: oklch(0.45 0.03 60);
}
.gc-tabs button.on { background: oklch(0.2 0.02 60); color: oklch(0.97 0.03 90); }
.gc-nav { border-bottom: 1px solid oklch(0.92 0.006 85); padding-bottom: 8px; }
.gc-flecha {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid oklch(0.88 0.006 85);
  background: #fff; cursor: pointer; color: oklch(0.35 0.03 60); font-size: 14px; padding: 0;
}
.gc-flecha:disabled { cursor: default; opacity: 0.35; }
.gc-label { font-size: 12px; font-weight: 500; color: oklch(0.25 0.02 60); }
.gc-range { font-size: 11px; color: oklch(0.52 0.03 65); text-align: right; }
.gc-k { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.gc-cifras { display: flex; align-items: stretch; gap: 14px; }
.gc-pct {
  flex: 1; min-width: 0; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 4px; background-color: var(--warm-bg);
  background-image: linear-gradient(oklch(0.5 0.01 70 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.5 0.01 70 / 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.gc-pct .gc-k { color: oklch(0.5 0.04 60); }
.gc-pct-n { font-size: 46px; line-height: 1; color: oklch(0.2 0.02 60); }
.gc-pct-n span { font-size: 21px; color: oklch(0.62 0.16 58); }
.gc-sub { font-size: 11px; color: oklch(0.48 0.04 60); }
.gc-conteos { width: 140px; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.gc-c { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid oklch(0.92 0.006 85); padding-bottom: 4px; }
.gc-c-total { border-bottom: 2px solid oklch(0.2 0.02 60); }
.gc-c-total .gc-k { letter-spacing: 0.14em; color: oklch(0.48 0.03 60); }
.gc-c-fin { border-bottom: none; padding-bottom: 0; }
.gc-c-l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: oklch(0.38 0.03 60); }
.gc-dot { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }

.gc-barra { display: flex; height: 7px; border-radius: 5px; overflow: hidden; gap: 3px; background: oklch(0.93 0.006 85); }
.gc-escala { font-size: 10px; color: oklch(0.55 0.03 65); }

.gc-pend {
  display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; text-decoration: none;
  border: 1px solid oklch(0.92 0.006 85); background: var(--warm-bg); color: inherit;
}
.gc-pend:hover { border-color: oklch(0.8 0.08 60); }
.gc-pend-franja { width: 20px; flex: none; background: repeating-linear-gradient(-45deg, oklch(0.7 0.15 60) 0 5px, var(--warm-bg) 5px 10px); }
.gc-pend-cuerpo { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 12px; }
.gc-pend-t { font-size: 13px; font-weight: 600; color: oklch(0.42 0.11 55); }
.gc-pend-s { font-size: 11px; color: oklch(0.5 0.07 58); }
.gc-pend-n { font-size: 20px; line-height: 1; color: oklch(0.55 0.15 55); }
.gc-pend-ver { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.5 0.12 55); white-space: nowrap; }

.gc-tabla { display: grid; grid-template-columns: minmax(0, 1.3fr) 66px 66px 78px; gap: 10px; align-items: center; }
.gc-tabla-head { padding: 0 0 5px; border-bottom: 1px solid oklch(0.9 0.006 85); }
.gc-tabla-head span { font-size: 9.5px; letter-spacing: 0.12em; color: oklch(0.55 0.03 65); }
.gc-tabla-fila { padding: 4px 0; border-bottom: 1px solid oklch(0.95 0.006 85); }
.gc-tabla-total { align-items: baseline; padding: 6px 0 0; border-top: 2px solid oklch(0.2 0.02 60); margin-top: -1px; }
.gc-n-total { font-size: 21px; line-height: 1; }
.gc-n { font-size: 17px; line-height: 1; }
.gc-n-costo { font-size: 16px; line-height: 1; text-align: center; }
.gc-mini { display: flex; height: 3px; border-radius: 2px; background: oklch(0.93 0.006 85); overflow: hidden; }

/* Escritorio angosto: la fila 1 pasa a dos columnas y el cuadro toma el ancho entero. */
@media (max-width: 1280px) {
  .ger-fila1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ger-fila1 .ger-cuadro { grid-column: 1 / -1; grid-row: 1; }
}
/* Celular: el porcentaje arriba y los conteos debajo; la tabla se angosta. */
@media (max-width: 820px) {
  .ger-fila1 { grid-template-columns: 1fr; }
  .gc-fila { flex-wrap: wrap; }
  .gc-cifras { flex-direction: column; gap: 14px; }
  .gc-conteos { width: auto; }
  .gc-pct-n { font-size: 46px; }
  .gc-pend-cuerpo { padding: 10px 14px; }
  .gc-tabla { grid-template-columns: minmax(0, 1fr) 54px 54px 70px; gap: 6px; }
}

/* Eliminar un checklist (solo Admin, 2026-10-04): discreto, abajo de las firmas. */
.ck-eliminar {
  align-self: flex-start; background: none; border: 1px solid oklch(0.88 0.04 25); border-radius: 20px;
  padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 600; color: oklch(0.5 0.17 25); cursor: pointer;
}
.ck-eliminar:hover { background: oklch(0.97 0.02 25); }

/* Descargar el checklist en su Excel original (2026-10-06). */
.ck-excel {
  background: #fff; border: 1px solid oklch(0.85 0.006 85); border-radius: 20px; padding: 8px 16px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: oklch(0.3 0.01 70); cursor: pointer;
}
.ck-excel:hover { border-color: oklch(0.7 0.05 150); color: oklch(0.38 0.11 150); }
.ck-excel:disabled { opacity: 0.6; cursor: default; }

/* Nota y foto opcionales en B, N/A y T (2026-10-07): mismo recuadro que la M,
   sin el rojo de falla. */
.ck-nota-opc textarea { border-color: oklch(0.88 0.006 85); }
.ck-nota-opc .ck-foto-btn { border-color: oklch(0.82 0.006 85); color: oklch(0.42 0.01 70); }
.ck-nota-abrir { padding: 0 24px 12px 96px; }
.ck-nota-abrir .ck-link-azul { font-size: 13px; }
@media (max-width: 820px) {
  .ck-nota-abrir { padding: 0 14px 12px; }
}

/* ---------- Perfil del vehiculo (Claude Design "Perfil de vehiculo", 2026-10-07) ---------- */
.vp2 { display: flex; flex-direction: column; gap: 20px; max-width: 1480px; margin: 0 auto; }
.vp2-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.vp2-migas { font-size: 12px; letter-spacing: 0.12em; color: oklch(0.52 0.01 70); }
.vp2-migas a { color: oklch(0.52 0.01 70); text-decoration: none; }
.vp2-circ { width: 28px; height: 28px; border-radius: 50%; background: oklch(0.62 0.11 240); display: flex; align-items: center; justify-content: center; flex: none; }
.vp2-exportar {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid oklch(0.2 0.01 70); border-radius: 30px;
  padding: 6px 6px 6px 18px; color: oklch(0.2 0.01 70); font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.vp2-exportar:disabled { opacity: 0.6; cursor: default; }
.vp2-cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }

/* Ficha (izquierda) */
.vp2-ficha { flex: 1 1 340px; max-width: 100%; min-width: 0; background: oklch(0.985 0.012 85); border: 1px solid oklch(0.91 0.02 85); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.vp2-ficha-head { background: oklch(0.95 0.03 240); padding: 24px 26px 20px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid oklch(0.89 0.04 240); }
.vp2-ficha-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vp2-ficha-eyebrow .mono { font-size: 10px; letter-spacing: 0.2em; color: oklch(0.45 0.1 240); }
.vp2-editar { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.35 0.1 240); border: 1px solid oklch(0.8 0.06 240); border-radius: 20px; padding: 6px 13px; background: #fff; cursor: pointer; }
.vp2-codigo { font-size: 76px; line-height: 0.85; color: oklch(0.22 0.04 245); overflow-wrap: anywhere; }
.vp2-modelo { font-size: 17px; font-weight: 600; }
.vp2-sub { font-size: 12px; color: oklch(0.45 0.05 240); }
.vp2-ficha-body { padding: 20px 26px 24px; display: flex; flex-direction: column; gap: 20px; }
.vp2-estados { display: flex; flex-direction: column; gap: 8px; }
.vp2-estado { display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; border: 1px solid oklch(0.9 0.006 85); background: #fff; }
.vp2-estado-franja { width: 24px; flex: none; background: oklch(0.85 0.006 85); }
.vp2-estado-nom { flex: 1; padding: 8px 13px; font-size: 14px; font-weight: 600; color: oklch(0.4 0.01 70); }
.vp2-estado-x { border: none; background: none; padding: 8px 12px; font-size: 12px; cursor: pointer; color: inherit; opacity: 0.7; }
.vp2-estado-malo { border-color: oklch(0.87 0.06 25); }
.vp2-estado-malo .vp2-estado-franja { background: repeating-linear-gradient(-45deg, oklch(0.58 0.2 25) 0 5px, #fff 5px 10px); }
.vp2-estado-malo .vp2-estado-nom, .vp2-estado-malo .vp2-estado-x { color: oklch(0.48 0.18 25); }
.vp2-estado-alerta { border-color: oklch(0.87 0.07 70); }
.vp2-estado-alerta .vp2-estado-franja { background: oklch(0.76 0.15 70); }
.vp2-estado-alerta .vp2-estado-nom, .vp2-estado-alerta .vp2-estado-x { color: oklch(0.46 0.11 60); }
.vp2-estado-ok { border-color: oklch(0.87 0.06 150); }
.vp2-estado-ok .vp2-estado-franja { background: oklch(0.62 0.15 150); }
.vp2-estado-ok .vp2-estado-nom, .vp2-estado-ok .vp2-estado-x { color: oklch(0.4 0.11 150); }
.vp2-agregar { text-align: left; font-family: inherit; font-size: 13px; padding: 8px 13px; border-radius: 12px; background: transparent; border: 1px dashed oklch(0.82 0.02 85); color: oklch(0.5 0.01 70); cursor: pointer; }
.vp2-estado-form { display: flex; flex-wrap: wrap; gap: 8px; }
.vp2-estado-form select, .vp2-estado-form input { flex: 1 1 140px; min-width: 0; }
.vp2-campos { display: flex; flex-direction: column; border-top: 1px solid oklch(0.9 0.02 85); }
.vp2-campo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid oklch(0.94 0.004 85); }
.vp2-campo:last-child { border-bottom: none; }
.vp2-campo .mono { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.55 0.01 70); flex: none; }
.vp2-campo span:last-child { font-size: 13px; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Columna derecha */
.vp2-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vp2-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.vp2-card { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 20px; padding: 22px 26px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vp2-k { font-size: 10px; letter-spacing: 0.16em; color: oklch(0.55 0.01 70); }
.vp2-medidor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vp2-medidor-n { font-size: 30px; line-height: 1; }
.vp2-medidor-f { font-size: 11px; color: oklch(0.55 0.01 70); }
.vp2-medidor-otra { font-size: 11px; color: oklch(0.5 0.01 70); margin-top: -6px; }
.vp2-regla { position: relative; height: 40px; margin: 6px 14px 0; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, oklch(0.96 0.004 85) 0 4px, transparent 4px 8px); }
.vp2-tick { position: absolute; top: 12px; width: 1px; height: 9px; background: oklch(0.85 0.006 85); transform: translateX(-50%); }
.vp2-tick.mayor { width: 2px; height: 18px; top: 6px; background: oklch(0.75 0.006 85); }
.vp2-regla-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vp2-regla-pie .mono { font-size: 10px; color: oklch(0.6 0.01 70); }
.vp2-pronto { background: oklch(0.96 0.004 85); border-radius: 10px; padding: 2px 9px; color: oklch(0.5 0.01 70) !important; }

.vp2-registrar { gap: 12px; padding: 22px 24px; }
.vp2-registrar-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp2-unidades { display: flex; background: oklch(0.95 0.004 85); border-radius: 20px; padding: 3px; }
.vp2-unidades button { border: none; cursor: pointer; padding: 5px 12px; border-radius: 16px; font-family: inherit; font-size: 12px; font-weight: 600; background: transparent; color: oklch(0.52 0.01 70); }
.vp2-unidades button.on { background: #fff; color: oklch(0.2 0.01 70); box-shadow: 0 1px 4px -1px oklch(0.2 0.01 70 / 0.25); }
.vp2-input { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid oklch(0.9 0.006 85); padding: 2px 2px 4px; transition: border-color .15s; }
.vp2-input[data-tono="ok"] { border-color: oklch(0.62 0.11 240); }
.vp2-input[data-tono="alerta"] { border-color: oklch(0.7 0.14 65); }
.vp2-input[data-tono="malo"] { border-color: oklch(0.62 0.18 25); }
.vp2-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; box-shadow: none; padding: 0;
  font-family: 'Anton', sans-serif; font-size: 40px; line-height: 1.1; color: oklch(0.2 0.01 70); -moz-appearance: textfield; }
.vp2-input input::-webkit-outer-spin-button, .vp2-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp2-input input::placeholder { color: oklch(0.86 0.004 85); }
.vp2-input .anton { font-size: 20px; color: oklch(0.6 0.01 70); }
.vp2-mas { display: flex; flex-wrap: wrap; gap: 8px; }
.vp2-mas label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: oklch(0.5 0.01 70); }
.vp2-mas input[name="notes"] { flex: 1 1 160px; min-width: 0; }
.vp2-registrar-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
#vp-lect-prev { font-size: 12px; color: oklch(0.55 0.01 70); }
#vp-lect-prev[data-tono="ok"] { color: oklch(0.45 0.11 240); }
#vp-lect-prev[data-tono="alerta"] { color: oklch(0.52 0.13 65); }
#vp-lect-prev[data-tono="malo"] { color: oklch(0.52 0.19 25); }
.vp2-btn-registrar { flex: none; display: inline-flex; align-items: center; gap: 10px; border: none; border-radius: 24px; padding: 6px 6px 6px 16px;
  font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; background: oklch(0.2 0.01 70); color: #fff; }
.vp2-btn-registrar .vp2-circ { width: 26px; height: 26px; }
.vp2-link-mas { align-self: flex-start; background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; color: oklch(0.45 0.11 240); cursor: pointer; }

/* Modulos */
.vp2-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.vp2-mod { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 20px; padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vp2-mod-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid oklch(0.93 0.006 85); flex-wrap: wrap; }
.vp2-mod-num { font-size: 11px; color: oklch(0.5 0.11 240); }
.vp2-mod-t { font-family: 'Anton', sans-serif; font-size: 19px; text-transform: uppercase; }
.vp2-mod-c { font-size: 11px; color: oklch(0.55 0.01 70); }
.vp2-mod-ver { background: none; border: none; padding: 0; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.45 0.11 240); cursor: pointer; text-decoration: none; white-space: nowrap; }
.vp2-mod-corto .vp2-extra { display: none; }
.vp2-fila { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid oklch(0.95 0.004 85); min-width: 0; }
.vp2-fila:last-child { border-bottom: none; }
.vp2-fila[data-vp-ir] { cursor: pointer; }
.vp2-fila[data-vp-ir]:hover .vp2-fila-b { color: oklch(0.45 0.11 240); }
.vp2-fila-a { font-size: 12px; width: 96px; flex: none; color: oklch(0.4 0.01 70); }
.vp2-fila-b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp2-fila-c { flex: none; display: flex; align-items: center; gap: 8px; }
.vp2-doc { cursor: pointer; display: flex; flex-direction: column; white-space: normal; }
.vp2-doc-tipo { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.5 0.11 240); margin-bottom: 2px; }
.vp2-doc:hover { color: oklch(0.45 0.11 240); }
.vp2-doc-meta { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp2-vence-b { align-self: flex-start; margin-top: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500;
  padding: 2px 9px; border-radius: 10px; background: oklch(0.955 0.004 85); color: oklch(0.45 0.01 70); white-space: normal; }
.vp2-vence-b.alerta { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.vp2-vence-b.malo { background: oklch(0.94 0.05 25); color: oklch(0.5 0.19 25); }
.vp2-doc-bajar { color: oklch(0.55 0.01 70); cursor: pointer; padding: 0 4px; }
.vp2-x { border: none; background: none; color: oklch(0.6 0.12 25); cursor: pointer; font-size: 12px; padding: 0 2px; }
.vp2-quien { font-size: 11px; color: oklch(0.55 0.01 70); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp2-pill { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; padding: 3px 11px; border-radius: 14px; white-space: nowrap; }
.vp2-pill-abierta { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.vp2-pill-ok { background: oklch(0.94 0.05 150); color: oklch(0.42 0.11 150); }
.vp2-pill-malo { background: oklch(0.94 0.05 25); color: oklch(0.5 0.19 25); }
.vp2-pill-gris { background: oklch(0.95 0.004 85); color: oklch(0.5 0.01 70); }
.vp2-vacio { font-size: 13px; color: oklch(0.55 0.01 70); padding: 12px 0 4px; margin: 0; }
.vp2-subir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0 4px; }
.vp2-vence { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.5 0.01 70); }
.vp2-vence input { width: auto; }

/* Lecturas: el modulo ocupa el ancho entero y sus filas son una tabla. */
.vp2-mod-ancho { grid-column: 1 / -1; }
.vp2-lect { display: grid; grid-template-columns: 150px 120px 110px minmax(0, 1fr) minmax(0, 200px); gap: 16px; }
.vp2-lect > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp2-lect-head { padding: 10px 0 6px; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.55 0.01 70); }
.vp2-lect-f { font-size: 12px; color: oklch(0.4 0.01 70); }
.vp2-lect-v { font-family: 'Anton', sans-serif; font-size: 18px; line-height: 1; }
.vp2-lect-m { font-size: 11px; color: oklch(0.55 0.01 70); }
.vp2-lect-o { font-size: 13px; color: oklch(0.4 0.01 70); }
.vp2-lect-o a { color: oklch(0.45 0.11 240); text-decoration: none; }
.vp2-lect-q { font-size: 13px; color: oklch(0.4 0.01 70); text-align: right; }

@media (max-width: 820px) {
  .vp2-cols { gap: 18px; }
  .vp2-codigo { font-size: 60px; }
  .vp2-ficha-head, .vp2-ficha-body { padding-left: 18px; padding-right: 18px; }
  .vp2-card, .vp2-registrar, .vp2-mod { padding: 18px 16px 14px; }
  .vp2-fila-a { width: 82px; font-size: 11px; }
  .vp2-regla-pie .vp2-pronto { display: none; }
  /* Lecturas en el celular: fecha y quien arriba; valor, medidor y origen abajo. */
  .vp2-lect-head { display: none; }
  .vp2-lect { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "f f q" "v m m" "o o o"; gap: 4px 10px; }
  .vp2-lect-f { grid-area: f; } .vp2-lect-q { grid-area: q; } .vp2-lect-v { grid-area: v; }
  .vp2-lect-m { grid-area: m; align-self: center; } .vp2-lect-o { grid-area: o; white-space: normal; }
}

/* ---------- Lugares de trabajo (2026-10-08) ----------
   Diseño "Lugar de trabajo - Crear.dc": asistente de 4 pasos con el mismo
   lenguaje de los checklists (reusa sus ck-*). Todo lo propio va prefijado lt-. */

.lt { gap: 28px; }
.lt .vacio { color: oklch(0.65 0.01 70); }
.lt-gris { color: oklch(0.55 0.01 70); }
.lt-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; align-items: start; }
.lt-dos-suelto { gap: 28px 40px; }
.lt-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lt-card-h { display: flex; flex-direction: column; gap: 6px; }
.lt-sep { height: 1px; background: oklch(0.93 0.006 85); }
.lt-nombre { font-size: 17px; font-weight: 600; }
.lt-borrador { display: flex; align-items: center; gap: 12px; }
.lt-descartar { font-size: 12px; }
.lt .np-btn-solid:disabled { background: oklch(0.9 0.004 85); border-color: oklch(0.9 0.004 85); color: oklch(0.6 0.01 70); box-shadow: none; cursor: not-allowed; }
.lt .np-btn-solid:disabled .ck-btn-dot { background: oklch(0.8 0.006 85); }
.lt-pie-der { display: flex; align-items: center; gap: 16px; min-width: 0; }

/* Tipo: cuatro tarjetas */
.lt-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lt-tipo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  text-align: left; background: #fff; border: 1.5px solid oklch(0.88 0.006 85); font-family: inherit; color: inherit; min-width: 0;
}
.lt-tipo.on { background: oklch(0.97 0.015 240); border-color: oklch(0.62 0.11 240); }
.lt-tipo-n { font-size: 14px; font-weight: 600; }
.lt-tipo-s { font-size: 10.5px; color: oklch(0.55 0.01 70); }

/* "Sin fecha de termino" */
.lt-check { display: flex; align-items: center; gap: 11px; border: none; background: transparent; cursor: pointer; padding: 0; text-align: left; font-family: inherit; font-size: 14px; color: oklch(0.35 0.01 70); }
.lt-check-box { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; border: 1.5px solid oklch(0.8 0.006 85); background: #fff; }
.lt-check-box svg { visibility: hidden; }
.lt-check.on .lt-check-box, .lt-asig-fila.on .lt-check-box { background: oklch(0.62 0.11 240); border-color: oklch(0.62 0.11 240); }
.lt-check.on .lt-check-box svg, .lt-asig-fila.on .lt-check-box svg { visibility: visible; }
.lt-fono { background: oklch(0.975 0.004 85); color: oklch(0.3 0.01 70); }
.lt-fono.vacio { color: oklch(0.6 0.01 70); font-family: 'Instrument Sans', sans-serif; font-size: 14px; }

.lt-info { display: flex; gap: 12px; align-items: flex-start; background: oklch(0.975 0.012 240); border: 1px solid oklch(0.9 0.03 240); border-radius: 14px; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; color: oklch(0.38 0.07 240); }
.lt-info-i { width: 20px; height: 20px; border-radius: 50%; background: oklch(0.62 0.11 240); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }

/* Paso 3: flota + panel pegado */
.lt-veh { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.lt-veh-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lt-veh-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.lt-cat { display: inline-flex; align-items: center; gap: 8px; }
.lt-cat-n { font-size: 11px; color: oklch(0.6 0.01 70); }
.lt-cat.on .lt-cat-n { color: oklch(0.8 0.01 70); }
.lt-buscar { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; padding: 0 14px; min-width: 240px; }
.lt-buscar input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; padding: 11px 0; font-family: inherit; }
.lt-leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: oklch(0.45 0.01 70); }
.lt-leyenda span { display: flex; align-items: center; gap: 7px; }
.lt-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lt-dot-disponible { background: oklch(0.62 0.15 150); }
.lt-dot-mantencion { background: oklch(0.76 0.15 70); }
.lt-dot-ocupado { background: oklch(0.8 0.006 85); }
.lt-flota { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.lt-vcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 16px 14px; border-radius: 16px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid oklch(0.9 0.006 85); margin: 1px; font-family: inherit; color: inherit; min-width: 0;
}
.lt-vcard.on { background: oklch(0.97 0.015 240); border: 2px solid oklch(0.62 0.11 240); margin: 0; }
.lt-vcard.ocupado { background: oklch(0.975 0.003 85); opacity: 0.6; cursor: not-allowed; }
.lt-vcard-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.lt-vcard-code { font-size: 24px; line-height: 1; }
.lt-vcard-chk { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid oklch(0.85 0.006 85); flex: none; }
.lt-vcard-chk svg { visibility: hidden; }
.lt-vcard.on .lt-vcard-chk { background: oklch(0.62 0.11 240); border-color: oklch(0.62 0.11 240); }
.lt-vcard.on .lt-vcard-chk svg { visibility: visible; }
.lt-vcard.ocupado .lt-vcard-chk { display: none; }
.lt-vcard-mod { font-size: 13.5px; color: oklch(0.35 0.01 70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lt-vcard-pie { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; margin-top: 4px; }
.lt-vcard-cat { font-size: 10px; letter-spacing: 0.08em; color: oklch(0.55 0.01 70); white-space: nowrap; }
.lt-st { font-size: 10.5px; padding: 2px 9px; border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.lt-st-disponible { background: oklch(0.94 0.05 150); color: oklch(0.42 0.11 150); }
.lt-st-mantencion { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.lt-st-ocupado { background: oklch(0.94 0.004 85); color: oklch(0.5 0.01 70); }
.lt-vacio { font-size: 14px; color: oklch(0.55 0.01 70); padding: 8px 0; }

.lt-panel { flex: 1 1 320px; position: sticky; top: 22px; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.lt-panel-h { display: flex; justify-content: space-between; align-items: baseline; }
.lt-panel-k { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.5 0.1 240); }
.lt-quitar-todos { border: none; background: transparent; cursor: pointer; font-size: 12px; color: oklch(0.5 0.01 70); font-family: inherit; }
.lt-panel-n { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: oklch(0.45 0.01 70); }
.lt-panel-n .anton { font-size: 56px; line-height: 1; color: oklch(0.2 0.01 70); }
.lt-panel-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid oklch(0.93 0.006 85); border-bottom: 1px solid oklch(0.93 0.006 85); }
.lt-panel-cats > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 0 10px 10px; border-left: 1px solid oklch(0.93 0.006 85); min-width: 0; }
.lt-panel-cats > div:nth-child(3n+1) { border-left: none; padding-left: 0; }
.lt-panel-cats .anton { font-size: 20px; line-height: 1; }
.lt-panel-cats .mono { font-size: 9.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-panel-lista { display: flex; flex-direction: column; max-height: 360px; overflow: auto; }
.lt-panel-fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.lt-panel-fila:last-child { border-bottom: none; }
.lt-panel-cod { font-size: 13px; font-weight: 500; width: 58px; flex: none; }
.lt-panel-mod { flex: 1; min-width: 0; font-size: 13.5px; color: oklch(0.4 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-panel-x { border: none; background: transparent; cursor: pointer; color: oklch(0.6 0.01 70); font-size: 13px; padding: 4px; }
.lt-panel-vacio { font-size: 14px; color: oklch(0.55 0.01 70); line-height: 1.5; padding: 8px 0; }
.lt-panel-per { font-size: 11px; color: oklch(0.55 0.01 70); }
.lt-warn { width: 18px; height: 18px; border-radius: 50%; background: oklch(0.76 0.15 70); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle; }
.lt-aviso { display: flex; gap: 10px; background: oklch(0.97 0.03 75); border: 1px solid oklch(0.88 0.07 70); border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.45; color: oklch(0.45 0.1 60); }
.lt-aviso-suave { font-size: 14px; padding: 12px 16px; }

/* Paso 4: revision */
.lt-rev { padding: 26px 30px; display: flex; flex-direction: column; gap: 16px; }
.lt-rev-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lt-rev-t { font-size: 20px; text-transform: uppercase; }
.lt-rev-editar { border: none; background: transparent; cursor: pointer; font-size: 11px; letter-spacing: 0.1em; color: oklch(0.45 0.11 240); }
.lt-rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.lt-rev-kv, .lt-kv { display: flex; flex-direction: column; gap: 3px; font-size: 15px; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.lt-rev-grupo { display: flex; flex-direction: column; gap: 8px; }
.lt-rev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 12px; border-radius: 10px; background: oklch(0.975 0.004 85); border: 1px solid oklch(0.92 0.006 85); }
.lt-chip .mono { font-weight: 500; }
.lt-chip span + span { color: oklch(0.5 0.01 70); }
.lt-chip.mant { background: oklch(0.97 0.03 75); border-color: oklch(0.88 0.07 70); }
.lt-crear { justify-content: center; padding: 10px 10px 10px 28px; font-size: 15px; border-radius: 32px; }
.lt-crear .ck-btn-dot { width: 36px; height: 36px; margin: 0; }
.lt-crear-hint { font-size: 11px; color: oklch(0.58 0.01 70); text-align: center; }

/* Creado */
.lt-creado { padding: 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lt-creado-ico { width: 64px; height: 64px; border-radius: 50%; background: oklch(0.93 0.06 150); display: flex; align-items: center; justify-content: center; }
.lt-creado-t { font-size: 38px; text-transform: uppercase; }
.lt-creado-txt { font-size: 16px; color: oklch(0.45 0.01 70); max-width: 560px; line-height: 1.5; }
.lt-creado-acc { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* Lista */
.lt-resumen { display: flex; gap: 36px; flex-wrap: wrap; }
.lt-resumen > div { display: flex; flex-direction: column; gap: 6px; }
.lt-resumen .anton { font-size: 44px; line-height: 1; }
.lt-resumen .mono { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.55 0.01 70); }
.lt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.lt-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s; }
.lt-card:hover { border-color: oklch(0.8 0.04 240); }
.lt-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lt-card-eyebrow { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.5 0.1 240); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-card-nom { font-size: 26px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.lt-card-sub { font-size: 11.5px; color: oklch(0.52 0.01 70); }
.lt-card-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid oklch(0.94 0.006 85); }
.lt-card-enc { font-size: 13.5px; color: oklch(0.35 0.01 70); }
.lt-card-veh { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lt-card-veh .anton { font-size: 24px; line-height: 1; }
.lt-card-veh .mono { font-size: 10px; color: oklch(0.55 0.01 70); }
.lt-card-prox { color: oklch(0.5 0.1 240) !important; }
.lt-estado { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.lt-estado-activo { background: oklch(0.94 0.05 150); color: oklch(0.42 0.11 150); }
.lt-estado-planificado { background: oklch(0.96 0.02 240); color: oklch(0.45 0.1 240); }
.lt-estado-terminado { background: oklch(0.94 0.004 85); color: oklch(0.5 0.01 70); }

/* Ficha */
.lt-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lt-acciones button.np-btn-ghost { font-family: inherit; cursor: pointer; background: #fff; }
.lt-terminar-form { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.lt-inline { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lt-inline .ck-campo { min-width: 170px; }
.lt-perfil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 22px; align-items: start; }
.lt-datos { gap: 16px; }
.lt-vbloque { display: flex; flex-direction: column; gap: 4px; }
.lt-vfila { border-bottom: 1px solid oklch(0.95 0.004 85); }
.lt-vfila:last-child { border-bottom: none; }
.lt-vfila-main { display: grid; grid-template-columns: 70px minmax(0, 1fr) 90px minmax(0, 190px) auto; align-items: center; gap: 12px; padding: 11px 0; }
.lt-vfila-cod { font-family: 'Anton', sans-serif; font-size: 18px; }
.lt-vfila-mod { font-size: 13.5px; color: oklch(0.38 0.01 70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-vfila-cat { font-size: 10px; letter-spacing: 0.08em; color: oklch(0.55 0.01 70); }
.lt-vfila-per { font-size: 11px; color: oklch(0.5 0.01 70); }
.lt-vfila-acc { display: flex; gap: 6px; justify-content: flex-end; }
.lt-vfila-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
.lt-mini { border: 1px solid oklch(0.88 0.006 85); background: #fff; border-radius: 16px; padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit; color: oklch(0.35 0.01 70); }
.lt-mini:hover { border-color: oklch(0.62 0.11 240); color: oklch(0.4 0.1 240); }
.lt-mini-rojo:hover { border-color: oklch(0.7 0.12 25); color: oklch(0.5 0.16 25); }
.lt-asignar-btn { padding: 10px 18px; font-size: 12px; }
.lt-asignar { display: flex; flex-direction: column; gap: 12px; background: oklch(0.985 0.004 85); border: 1px solid oklch(0.92 0.006 85); border-radius: 16px; padding: 18px; }
.lt-asig-lista { display: flex; flex-direction: column; max-height: 320px; overflow: auto; background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 12px; }
.lt-asig-fila { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: none; border-bottom: 1px solid oklch(0.95 0.004 85); background: transparent; cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.lt-asig-fila:disabled { opacity: 0.55; cursor: not-allowed; }
.lt-asig-fila:disabled .lt-check-box { visibility: hidden; }
.lt-historial summary { cursor: pointer; padding: 10px 0 4px; }
.vp2-lugar-prox { display: block; font-size: 11px; color: oklch(0.5 0.1 240); margin-top: 3px; text-transform: none; letter-spacing: 0; }

@media (max-width: 1100px) {
  .lt-perfil { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .lt-tipos { grid-template-columns: 1fr 1fr; }
  .lt-rev-grid { grid-template-columns: 1fr; }
  .lt-rev { padding: 20px 18px; }
  .lt-panel { position: static; padding: 20px 18px; }
  .lt-buscar { min-width: 0; width: 100%; }
  .lt-flota { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lt-vcard { padding: 12px; }
  .lt-vcard-code { font-size: 20px; }
  .lt-st { max-width: 100%; }
  .lt-vcard-pie { flex-direction: column; align-items: flex-start; gap: 4px; }
  .lt-pie-hint { display: none; }
  .lt-creado { padding: 36px 20px; }
  .lt-creado-t { font-size: 28px; }
  .lt-resumen { gap: 22px; }
  .lt-resumen .anton { font-size: 34px; }
  .lt-cards { grid-template-columns: 1fr; }
  .lt-vfila-main { grid-template-columns: 60px minmax(0, 1fr); gap: 4px 10px; }
  .lt-vfila-cat { display: none; }
  .lt-vfila-per, .lt-vfila-acc { grid-column: 2; justify-content: flex-start; }
  .lt-borrador { width: 100%; justify-content: space-between; }
}

/* ---------- Operadores y reportes (2026-10-09) ----------
   Diseño "Proyecto - Crear.dc": paso de operadores con reparto de vehiculos,
   y la pantalla del operador para subir reportes desde el celular. */
.ck-paso.lt-pend .ck-paso-num { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.lt-saltar { font-family: inherit; cursor: pointer; background: #fff; text-transform: uppercase; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; }
.lt-ops { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.lt-ops-pool { flex: 1 1 340px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.lt-ops-rep { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lt-op-filtros { display: flex; flex-direction: column; gap: 10px; }
.lt-op-filtros .lt-buscar { min-width: 0; }
.lt-op-lista { display: flex; flex-direction: column; }
.lt-op { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: none; border-radius: 12px; text-align: left; cursor: pointer; background: transparent; font-family: inherit; color: inherit; }
.lt-op:hover { background: oklch(0.975 0.004 85); }
.lt-op.on { background: oklch(0.97 0.015 240); }
.lt-op:disabled { opacity: 0.55; cursor: not-allowed; }
.lt-op-av { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 14px; background: oklch(0.95 0.004 85); color: oklch(0.45 0.01 70); }
.lt-op-av.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; background: oklch(0.95 0.02 240); color: oklch(0.4 0.1 240); }
.lt-op.on .lt-op-av { background: oklch(0.62 0.11 240); color: #fff; }
.lt-op-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-op-n { font-size: 14.5px; font-weight: 600; }
.lt-op-m { font-size: 10.5px; color: oklch(0.55 0.01 70); }
.lt-op-chk { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid oklch(0.85 0.006 85); }
.lt-op-chk svg { visibility: hidden; }
.lt-op.on .lt-op-chk { background: oklch(0.62 0.11 240); border-color: oklch(0.62 0.11 240); }
.lt-op.on .lt-op-chk svg { visibility: visible; }
.lt-op:disabled .lt-op-chk { display: none; }
.lt-op-cuenta { display: flex; justify-content: center; border: 1.5px dashed oklch(0.84 0.006 85); border-radius: 14px; padding: 12px; font-size: 13.5px; font-weight: 600; color: oklch(0.45 0.01 70); }
.lt-rep-n { font-size: 12px; color: oklch(0.5 0.01 70); }
.lt-rep-n.ok { color: oklch(0.42 0.11 150); }
.lt-op-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lt-op-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-radius: 16px; }
.lt-op-card-h { display: flex; align-items: center; gap: 10px; }
.lt-op-card-n { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-op-card-c { font-size: 20px; }
.lt-op-card-v { font-size: 11px; color: oklch(0.5 0.01 70); }
.lt-info-acc { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.lt-info-acc .np-btn-ghost { font-family: inherit; cursor: pointer; background: #fff; }
.lt-op-vacio { border: 1.5px dashed oklch(0.85 0.006 85); border-radius: 16px; padding: 22px; font-size: 14px; color: oklch(0.5 0.01 70); text-align: center; }
.lt-asg { border-radius: 18px; overflow: hidden; }
.lt-asg-fila { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid oklch(0.95 0.004 85); }
.lt-asg-fila:last-child { border-bottom: none; }
.lt-asg-fila.sin { box-shadow: inset 3px 0 0 oklch(0.76 0.15 70); }
.lt-asg-v { display: flex; flex-direction: column; gap: 2px; width: 170px; flex: none; min-width: 0; }
.lt-asg-v .anton { font-size: 19px; line-height: 1; }
.lt-asg-v span + span { font-size: 12px; color: oklch(0.45 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-asg-ops { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.lt-asg-op { white-space: nowrap; padding: 8px 14px; border-radius: 20px; cursor: pointer; font-size: 13px; background: #fff; color: oklch(0.4 0.01 70); border: 1px solid oklch(0.88 0.006 85); font-family: inherit; }
.lt-asg-op.on { background: oklch(0.2 0.01 70); color: #fff; border-color: oklch(0.2 0.01 70); font-weight: 600; }
.lt-asg-sin { flex: none; visibility: hidden; }
.lt-asg-fila.sin .lt-asg-sin { visibility: visible; }
.lt-rev-op { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.lt-rev-op span:first-child { font-size: 14px; font-weight: 600; width: 150px; flex: none; }
.lt-rev-op .mono { flex: 1; font-size: 12px; color: oklch(0.45 0.01 70); }
/* ficha */
.lt-vfila-main { grid-template-columns: 70px minmax(0, 1fr) 90px minmax(0, 190px) minmax(0, 150px) auto; }
.lt-vfila-op { font-family: inherit; font-size: 12.5px; border: 1px solid oklch(0.88 0.006 85); border-radius: 10px; padding: 5px 8px; background: #fff; min-width: 0; }
.lt-vfila-op.sin { border-color: oklch(0.85 0.08 70); background: oklch(0.98 0.02 75); }
.lt-vfila-opn { font-size: 11px; color: oklch(0.5 0.01 70); }
.lt-opf { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.lt-opf:last-child { border-bottom: none; }
.lt-opf-n { font-size: 11px; color: oklch(0.5 0.01 70); white-space: nowrap; }
.lt-rep-hoy { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid oklch(0.95 0.004 85); flex-wrap: wrap; }
.lt-rep-hoy .anton { font-size: 17px; width: 64px; }
.lt-rep-hoy .lt-gris { flex: 1; font-size: 13px; min-width: 100px; }
.lt-turnos { display: flex; gap: 6px; flex-wrap: wrap; }
.lt-turno { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.lt-turno-hecho { background: oklch(0.94 0.05 150); color: oklch(0.42 0.11 150); }
.lt-turno-pendiente { background: oklch(0.95 0.004 85); color: oklch(0.55 0.01 70); }
.lt-turno-atrasado { background: oklch(0.95 0.04 25); color: oklch(0.5 0.17 25); }
.rp-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.rp-item:last-child { border-bottom: none; }
.rp-item-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rp-item-h .anton { font-size: 17px; }
.rp-item-h .mono { font-size: 11px; color: oklch(0.55 0.01 70); }
.rp-item-t { font-size: 14px; font-weight: 600; }
.rp-item-n { font-size: 13.5px; color: oklch(0.4 0.01 70); white-space: pre-line; }
.rp-item-a { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.rp-item-a a { color: oklch(0.45 0.11 240); text-decoration: underline; }
/* pantalla del operador */
.rp-vehs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.rp-veh { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.rp-veh-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-veh-c { font-size: 30px; line-height: 1; }
.rp-veh-m { font-size: 14px; color: oklch(0.35 0.01 70); }
.rp-abrir { margin-top: 8px; justify-content: center; }
.rp-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-top: 14px; border-top: 1px solid oklch(0.94 0.004 85); }
.rp-foto { display: flex; align-items: center; justify-content: center; border: 1.5px dashed oklch(0.84 0.006 85); border-radius: 12px; padding: 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: oklch(0.45 0.01 70); }
.rp-archivos { font-size: 12px; color: oklch(0.5 0.01 70); }
@media (max-width: 820px) {
  .lt-asg-fila { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
  .lt-asg-v { width: 100%; }
  .lt-vfila-main { grid-template-columns: 60px minmax(0, 1fr); }
  .lt-vfila-op, .lt-vfila-opn { grid-column: 2; }
  .rp-vehs { grid-template-columns: 1fr; }
  .rp-veh-c { font-size: 26px; }
}

/* ---------- Personas (2026-10-09) ----------
   Diseño "Personas - Menu.dc": tarjetas por area, chips por cargo y personas
   agrupadas area -> cargo. Cada area tiene su color (peTono en app.js). */
#view-empleados .pe-viejo { display: none !important; }
.pe { gap: 26px; }
.pe-aviso { justify-content: space-between; align-items: center; }
.pe-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pe-area {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; border-radius: 18px; cursor: pointer;
  text-align: left; background: #fff; border: 1px solid oklch(0.92 0.006 85); margin: 1px; font-family: inherit; color: inherit; min-width: 0;
}
.pe-area.on { border-width: 2px; margin: 0; }
.pe-area-top, .pe-area-mid, .pe-area-pie { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
.pe-area-mid { align-items: flex-end; }
.pe-area-k { display: flex; align-items: center; gap: 8px; }
.pe-area-k .mono { font-size: 10px; letter-spacing: 0.18em; color: oklch(0.45 0.01 70); }
.pe-area-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pe-area-dot.lg { width: 12px; height: 12px; align-self: center; }
.pe-area-ver { font-size: 9.5px; letter-spacing: 0.14em; visibility: hidden; }
.pe-area.on .pe-area-ver { visibility: visible; }
.pe-area-n { font-size: 26px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.pe-area-c { font-size: 40px; line-height: 0.9; }
.pe-area-pie { border-top: 1px solid oklch(0.93 0.006 85); padding-top: 10px; }
.pe-area-lider { font-size: 12.5px; color: oklch(0.45 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pe-pilas { display: flex; flex: none; }
.pe-pila { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; border: 2px solid #fff; }
.pe-herr { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.pe-herr-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-buscar { min-width: 280px; }
.pe-switch { display: flex; align-items: center; gap: 9px; border: none; background: transparent; cursor: pointer; font-size: 13.5px; color: oklch(0.4 0.01 70); white-space: nowrap; font-family: inherit; }
.pe-switch-t { width: 34px; height: 20px; border-radius: 10px; position: relative; flex: none; background: oklch(0.86 0.006 85); transition: background 0.15s; }
.pe-switch-t span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; box-shadow: 0 1px 3px oklch(0.2 0.01 70 / 0.3); }
.pe-switch.on .pe-switch-t { background: oklch(0.62 0.11 240); }
.pe-switch.on .pe-switch-t span { left: 16px; }
.pe-secciones { display: flex; flex-direction: column; gap: 34px; }
.pe-seccion { display: flex; flex-direction: column; gap: 20px; }
.pe-seccion-h { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid; }
.pe-seccion-t { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pe-seccion-t .anton { font-size: 30px; line-height: 1; text-transform: uppercase; }
.pe-seccion-t .mono { font-size: 12px; }
.pe-barra { display: flex; gap: 2px; height: 8px; width: 280px; max-width: 40%; border-radius: 4px; overflow: hidden; }
.pe-grupo { display: flex; flex-direction: column; gap: 10px; }
.pe-grupo-h { display: flex; align-items: center; gap: 12px; }
.pe-grupo-n { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pe-grupo-c { font-size: 11px; color: oklch(0.55 0.01 70); border: 1px solid oklch(0.9 0.006 85); border-radius: 12px; padding: 1px 9px; background: #fff; }
.pe-linea { flex: 1; height: 1px; background: oklch(0.9 0.006 85); }
.pe-gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.np a.pe-persona, .pe-persona { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid oklch(0.92 0.006 85); color: inherit; transition: border-color 0.15s; }
.pe-persona:hover { border-color: oklch(0.8 0.04 240); }
.pe-persona.baja { opacity: 0.65; }
.pe-av { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 15px; background: oklch(0.94 0.004 85); color: oklch(0.6 0.01 70); }
.pe-persona-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pe-persona-n { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-persona-m { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pe-persona-m .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-persona-m .pe-tag { flex: none; font-size: 9.5px; padding: 1px 7px; border-radius: 9px; background: oklch(0.94 0.004 85); color: oklch(0.5 0.01 70); }
.pe-flecha { color: oklch(0.7 0.01 70); }
.pe-vacio { border: 1.5px dashed oklch(0.85 0.006 85); border-radius: 16px; padding: 18px 22px; font-size: 14px; color: oklch(0.5 0.01 70); }
.pe-sin { padding: 40px; text-align: center; font-size: 15px; color: oklch(0.5 0.01 70); }
@media (max-width: 820px) {
  .pe-area-n { font-size: 22px; }
  .pe-area-c { font-size: 32px; }
  .pe-buscar { min-width: 0; width: 100%; }
  .pe-herr-der { width: 100%; }
  .pe-barra { width: 100%; max-width: none; }
  .pe-gente { grid-template-columns: 1fr; }
  .pe-seccion-t .anton { font-size: 24px; }
}

/* ---------- Vehiculos (2026-10-11) ----------
   Diseño "Vehiculos - Menu.dc": chips por categoria, paneles de papeles y de
   equipos en taller, y la flota por categoria -> tipo. Reusa las piezas de
   Personas (pe-*) para la lista. */
#view-vehiculos .vm-viejo { display: none !important; }
.vm-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.vm-pill {
  display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 10px 12px 10px 20px; border-radius: 28px; cursor: pointer;
  font-size: 14.5px; font-weight: 500; background: #fff; color: oklch(0.3 0.01 70); border: 1px solid oklch(0.88 0.006 85); font-family: inherit;
}
.vm-pill .anton { font-size: 18px; line-height: 1; padding: 4px 10px; border-radius: 16px; background: oklch(0.95 0.004 85); color: oklch(0.3 0.01 70); }
.vm-pill.on { font-weight: 700; background: oklch(0.2 0.01 70); color: #fff; border-color: oklch(0.2 0.01 70); }
.vm-pill.on .anton { background: oklch(0.32 0.01 70); color: #fff; }
.vm-alertas { display: flex; flex-direction: column; gap: 16px; }
.vm-alertas-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.vm-alertas-h .anton { font-size: 26px; line-height: 1; text-transform: uppercase; }
.vm-alertas-h .mono { font-size: 12px; }
.vm-paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; align-items: stretch; }
.vm-panel { padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; border-radius: 20px; }
.vm-panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vm-panel-h .anton { font-size: 19px; text-transform: uppercase; }
.vm-panel-h .mono { font-size: 11px; }
.vm-docs-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 28px; align-items: center; }
.vm-taller-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.vm-big { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px 8px 0; border: none; background: transparent; cursor: pointer; border-bottom: 3px solid transparent; font-family: inherit; }
div.vm-big { cursor: default; }
.vm-big .anton { font-size: 52px; line-height: 1.15; }
.vm-big .mono { font-size: 10px; letter-spacing: 0.14em; }
.vm-big.on.venc { border-bottom-color: oklch(0.6 0.19 25); }
.vm-big.on.porv { border-bottom-color: oklch(0.74 0.15 70); }
.vm-docbarras { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.vm-docbarra { display: grid; grid-template-columns: 150px minmax(0, 1fr) 28px; gap: 10px; align-items: center; }
.vm-docbarra > span:first-child { font-size: 12.5px; color: oklch(0.4 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-docbarra > div { height: 6px; border-radius: 3px; background: oklch(0.95 0.004 85); overflow: hidden; }
.vm-docbarra > div > div { height: 100%; border-radius: 3px; background: oklch(0.6 0.19 25); }
.vm-docbarra .mono { font-size: 12px; text-align: right; }
.vm-prios { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vm-prio-barra { display: flex; gap: 3px; height: 12px; }
.vm-prio-barra span { border-radius: 3px; }
.vm-prio-ley { display: flex; gap: 18px; flex-wrap: wrap; }
.vm-prio-ley span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: oklch(0.4 0.01 70); }
.vm-prio-ley strong { font-size: 12.5px; }
.vm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.vm-lista { display: flex; flex-direction: column; border-top: 1px solid oklch(0.93 0.006 85); }
.np a.vm-fila, .vm-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(0.95 0.004 85); color: inherit; }
.vm-fila:last-child { border-bottom: none; }
.vm-fila:hover .vm-fila-t { color: oklch(0.45 0.11 240); }
.vm-tile { flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; letter-spacing: 0.02em; background: oklch(0.95 0.004 85); color: oklch(0.32 0.01 70); }
.vm-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-fila-t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-fila-s { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-fila-der { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vm-cuando { font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.vm-cuando.venc { color: oklch(0.52 0.19 25); }
.vm-cuando.porv { color: oklch(0.52 0.13 65); }
.vm-fecha { font-size: 10.5px; color: oklch(0.58 0.01 70); }
.vm-dias { font-size: 11px; color: oklch(0.5 0.01 70); width: 46px; text-align: right; flex: none; }
.vm-prio { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 12px; min-width: 56px; text-align: center; flex: none; }
.vm-ver { margin-top: auto; align-self: flex-start; border: none; background: none; padding: 0; cursor: pointer; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.45 0.11 240); }
.vm-herr { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid oklch(0.9 0.006 85); padding-top: 22px; scroll-margin-top: 16px; }
.np a.vm-veh, .vm-veh { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; background: #fff; border: 1px solid oklch(0.92 0.006 85); color: inherit; transition: border-color 0.15s; }
.vm-veh:hover { border-color: oklch(0.8 0.04 240); }
.vm-veh.baja { opacity: 0.6; }
.vm-flag { width: 20px; height: 20px; flex: none; border-radius: 50%; background: oklch(0.95 0.04 25); color: oklch(0.52 0.19 25); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vm-mas { display: flex; align-items: center; justify-content: center; border: 1.5px dashed oklch(0.84 0.006 85); border-radius: 14px; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; color: oklch(0.42 0.01 70); min-height: 66px; font-family: inherit; }
.vm-sin { border: 1.5px dashed oklch(0.85 0.006 85); border-radius: 16px; }
@media (max-width: 820px) {
  .vm-panel { padding: 18px 16px; }
  .vm-docs-top { grid-template-columns: auto auto; gap: 18px; }
  .vm-docbarras { grid-column: 1 / -1; }
  .vm-docbarra { grid-template-columns: 120px minmax(0, 1fr) 24px; }
  .vm-taller-top { grid-template-columns: 1fr; gap: 12px; }
  .vm-big .anton { font-size: 42px; }
  .vm-pill { padding: 8px 10px 8px 14px; font-size: 13px; }
}

/* ---------- Documentos del vehiculo (2026-10-11) ----------
   Los tres que vencen como tarjetas con su estado y "Renovar"; el historial de
   cada uno debajo. */
.vpd-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
.vpd-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid oklch(0.92 0.006 85); background: #fff; box-shadow: inset 4px 0 0 var(--vpd-c, oklch(0.85 0.006 85)); min-width: 0; }
.vpd-ok { --vpd-c: oklch(0.62 0.15 150); }
.vpd-alerta { --vpd-c: oklch(0.74 0.15 70); }
.vpd-malo { --vpd-c: oklch(0.6 0.19 25); }
.vpd-falta { --vpd-c: oklch(0.8 0.006 85); }
.vpd-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vpd-nom { font-family: 'Anton', sans-serif; font-size: 17px; text-transform: uppercase; }
.vpd-estado { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; background: oklch(0.95 0.004 85); color: oklch(0.5 0.01 70); }
.vpd-ok .vpd-estado { background: oklch(0.94 0.05 150); color: oklch(0.42 0.11 150); }
.vpd-alerta .vpd-estado { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.vpd-malo .vpd-estado { background: oklch(0.95 0.04 25); color: oklch(0.5 0.18 25); }
.vpd-vence { font-size: 11.5px; color: oklch(0.45 0.01 70); }
.vpd-malo .vpd-vence { color: oklch(0.5 0.18 25); }
.vpd-archivo { font-size: 13px; color: oklch(0.3 0.01 70); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpd-archivo:hover { color: oklch(0.45 0.11 240); text-decoration: underline; }
.vpd-archivo .mono { font-size: 10.5px; color: oklch(0.58 0.01 70); }
.vpd-acc, .vpd-form-acc { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.vpd-form-acc { justify-content: flex-end; }
.vpd-btn { border: none; border-radius: 18px; padding: 7px 16px; background: oklch(0.2 0.01 70); color: #fff; font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.vpd-btn:disabled { opacity: 0.5; cursor: wait; }
.vpd-link { border: none; background: none; padding: 0; cursor: pointer; font-size: 12.5px; color: oklch(0.45 0.11 240); text-decoration: underline; font-family: inherit; }
.vpd-form { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid oklch(0.94 0.004 85); }
.vpd-file { display: flex; align-items: center; justify-content: center; border: 1.5px dashed oklch(0.82 0.006 85); border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 600; color: oklch(0.42 0.01 70); cursor: pointer; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.vpd-hist summary { cursor: pointer; font-size: 11px; color: oklch(0.5 0.01 70); }
.vpd-hist-f { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid oklch(0.95 0.004 85); flex-wrap: wrap; }
.vpd-hist-f .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); }
.vpd-otros-t { display: block; margin: 4px 0 6px; }
@media (max-width: 900px) {
  .vpd-ops { grid-template-columns: 1fr; }
}
.vpd-actual { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vpd-actual .vpd-archivo { flex: 1; min-width: 0; }
/* Documentos compactos (2026-10-12): filas como las OTs. */
.vpd-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vpd-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vpd-meta .vp2-vence-b { margin-top: 0; }
.vp2-vence-b.vpd-falta { background: oklch(0.95 0.004 85); color: oklch(0.55 0.01 70); }
.vpd-mini { border: none; border-radius: 14px; padding: 5px 12px; background: oklch(0.2 0.01 70); color: #fff; font-weight: 600; font-size: 11.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.vpd-mini:disabled { opacity: 0.5; cursor: wait; }
.vpd-meta .vpd-link { font-size: 10.5px; }
.vpd-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0 12px; border-bottom: 1px solid oklch(0.95 0.004 85); border-top: none; }
.vpd-form .vpd-file { flex: 1; min-width: 150px; padding: 7px 10px; font-size: 12.5px; }
.vpd-vence-campo { display: flex; align-items: center; gap: 8px; }
.vpd-vence-campo .mono { font-size: 10.5px; color: oklch(0.5 0.01 70); white-space: nowrap; }
.vpd-vence-campo .fcl { width: 150px; }
.vpd-vence-campo .ck-fld { padding: 7px 10px; font-size: 13px; }
.vpd-hist-f { padding: 8px 0; background: oklch(0.985 0.003 85); }
.vpd-hist-f .vp2-fila-a { color: oklch(0.6 0.01 70); }
.vpd-hist-m { font-size: 10.5px; color: oklch(0.58 0.01 70); }
/* Reporte de operador, diseno "Operador - Reporte" (2026-10-13). Pensado para celular. */
.rp-est { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 10px; }
.rp-est-ojo { background: oklch(0.96 0.05 80); color: oklch(0.48 0.12 65); }
.rp-est-mal { background: oklch(0.95 0.045 25); color: oklch(0.5 0.19 25); }
.rp2 { max-width: 560px; margin: 0 auto; gap: 18px; }
.rp2-cab { display: flex; flex-direction: column; gap: 4px; }
.rp2-eyebrow { font-size: 11px; letter-spacing: 0.12em; color: oklch(0.5 0.1 240); }
.rp2-nombre { font-size: 34px; line-height: 0.95; text-transform: uppercase; }
.rp2-hero { display: flex; flex-direction: column; gap: 6px; border-radius: 20px; padding: 18px 20px; background: #fff; border: 2px solid oklch(0.2 0.01 70); }
.rp2-hero.ok { background: oklch(0.97 0.03 150); border: 1px solid oklch(0.85 0.07 150); }
.rp2-hero.mal { background: oklch(0.97 0.025 25); border: 1px solid oklch(0.87 0.06 25); }
.rp2-hero-k { font-size: 10.5px; letter-spacing: 0.14em; color: oklch(0.45 0.11 240); }
.rp2-hero.ok .rp2-hero-k { color: oklch(0.4 0.11 150); }
.rp2-hero.mal .rp2-hero-k, .rp2-hero.mal .rp2-hero-d { color: oklch(0.5 0.19 25); }
.rp2-hero-t { font-size: 30px; line-height: 1; }
.rp2-hero-d { font-size: 13.5px; line-height: 1.45; color: oklch(0.45 0.01 70); }
.rp2-cta, .rp2-sig { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; border: none; border-radius: 30px; padding: 8px 8px 8px 22px; background: oklch(0.2 0.01 70); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; font-family: inherit; }
.rp2-cta { margin-top: 8px; }
.rp2-sig:disabled { background: oklch(0.9 0.004 85); color: oklch(0.6 0.01 70); cursor: not-allowed; }
.rp2-cta-o { width: 36px; height: 36px; border-radius: 50%; background: oklch(0.62 0.11 240); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.rp2-turno { display: flex; flex-direction: column; gap: 8px; }
.rp2-turno-h { display: flex; justify-content: space-between; align-items: baseline; }
.rp2-turno-h .mono { font-size: 10.5px; letter-spacing: 0.14em; color: oklch(0.45 0.01 70); }
.rp2-turno-h .mono.ok { color: oklch(0.4 0.11 150); }
.rp2-turno-h .mono.mal { color: oklch(0.5 0.19 25); }
.rp2-lista { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 16px; overflow: hidden; }
.rp2-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 14px; border: none; background: transparent; border-bottom: 1px solid oklch(0.95 0.004 85); font-family: inherit; color: inherit; text-align: left; }
.rp2-fila:last-child { border-bottom: none; }
button.rp2-fila { cursor: pointer; }
button.rp2-fila:hover { background: oklch(0.985 0.003 85); }
.rp2-cod { font-size: 20px; min-width: 56px; white-space: nowrap; }
.rp2-mod { flex: 1; min-width: 0; font-size: 13px; color: oklch(0.45 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp2-pill { font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: 14px; white-space: nowrap; background: oklch(0.96 0.004 85); color: oklch(0.45 0.01 70); }
.rp2-pill.ok { background: oklch(0.94 0.06 150); color: oklch(0.4 0.11 150); }
.rp2-pill.mal { background: oklch(0.95 0.045 25); color: oklch(0.5 0.19 25); }
.rp2-pill.neg { background: oklch(0.2 0.01 70); color: #fff; }
.rp2-wiz, .rp2-listo { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; background: oklch(0.97 0.005 85); border: 1px solid oklch(0.92 0.006 85); border-radius: 22px; overflow: hidden; min-height: calc(100vh - 140px); }
.rp2-wiz-h { padding: 6px 20px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid oklch(0.92 0.006 85); }
.rp2-wiz-top { display: flex; justify-content: space-between; align-items: center; }
.rp2-wiz-top .mono { font-size: 11px; letter-spacing: 0.1em; color: oklch(0.5 0.01 70); text-align: center; }
.rp2-ico { width: 44px; height: 44px; margin-left: -10px; border: none; background: transparent; cursor: pointer; font-size: 24px; color: inherit; }
.rp2-ico.x { margin: 0 -10px 0 0; font-size: 15px; color: oklch(0.5 0.01 70); }
.rp2-prog { display: flex; gap: 4px; }
.rp2-prog span { flex: 1; height: 4px; border-radius: 2px; background: oklch(0.9 0.004 85); }
.rp2-prog span.on { background: oklch(0.2 0.01 70); }
.rp2-veh { display: flex; align-items: baseline; gap: 10px; }
.rp2-veh .anton { font-size: 30px; line-height: 1; white-space: nowrap; }
.rp2-veh span:last-child { font-size: 14px; color: oklch(0.45 0.01 70); }
.rp2-wiz-b { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.rp2-wiz-f { padding: 12px 20px 22px; border-top: 1px solid oklch(0.92 0.006 85); background: #fff; }
.rp2-paso-t { font-size: 24px; text-transform: uppercase; }
.rp2-seg { align-self: flex-start; }
.rp2-in { display: flex; align-items: baseline; gap: 8px; border-bottom: 3px solid oklch(0.88 0.006 85); padding: 2px 2px 6px; }
.rp2-in.ok { border-color: oklch(0.62 0.11 240); }
.rp2-in.mal { border-color: oklch(0.62 0.18 25); }
.rp2-in input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Anton', sans-serif; font-size: 48px; line-height: 1.1; color: inherit; }
.rp2-in .anton { font-size: 24px; color: oklch(0.6 0.01 70); }
.rp2-hint { font-size: 12.5px; color: oklch(0.55 0.01 70); }
.rp2-hint.ok { color: oklch(0.45 0.11 240); }
.rp2-hint.ojo { color: oklch(0.5 0.13 65); }
.rp2-hint.mal { color: oklch(0.5 0.19 25); }
.rp2-ult { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 14px; padding: 14px 16px; }
.rp2-ult .mono { font-size: 10px; letter-spacing: 0.12em; color: oklch(0.52 0.01 70); }
.rp2-ult .mono:last-child { font-size: 11px; letter-spacing: 0; }
.rp2-ult-v { font-size: 16px; font-weight: 600; }
.rp2-ests { display: flex; flex-direction: column; gap: 8px; }
.rp2-est { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border-radius: 16px; cursor: pointer; text-align: left; background: oklch(0.985 0.003 85); border: 1px solid oklch(0.9 0.006 85); margin: 1px; font-family: inherit; color: inherit; }
.rp2-est.on { background: #fff; border: 2px solid var(--c); margin: 0; }
.rp2-est-o { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid oklch(0.82 0.006 85); }
.rp2-est.on .rp2-est-o { background: var(--c); border-color: var(--c); box-shadow: inset 0 0 0 4px #fff; }
.rp2-est-x { display: flex; flex-direction: column; gap: 1px; }
.rp2-est-x b { font-size: 16px; font-weight: 600; }
.rp2-est-x span { font-size: 12.5px; color: oklch(0.5 0.01 70); }
.rp2-bloque { display: flex; flex-direction: column; gap: 8px; }
.rp2-k { font-size: 10px; letter-spacing: 0.12em; color: oklch(0.52 0.01 70); }
.rp2-sub { font-size: 13.5px; color: oklch(0.5 0.01 70); }
.rp2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp2-chip { min-height: 40px; padding: 8px 14px; border-radius: 20px; cursor: pointer; font-size: 13.5px; background: #fff; color: oklch(0.4 0.01 70); border: 1px solid oklch(0.88 0.006 85); font-family: inherit; }
.rp2-chip.on { background: oklch(0.2 0.01 70); color: #fff; border-color: oklch(0.2 0.01 70); font-weight: 600; }
.rp2-obs { width: 100%; font-family: inherit; font-size: 15px; line-height: 1.5; border: 1px solid oklch(0.88 0.006 85); border-radius: 14px; padding: 12px 14px; outline: none; resize: none; background: #fff; color: inherit; }
.rp2-alerta { display: flex; gap: 10px; background: oklch(0.97 0.025 25); border: 1px solid oklch(0.87 0.06 25); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: oklch(0.45 0.13 25); }
.rp2-adj { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp2-adj-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 104px; border-radius: 16px; border: 1.5px dashed oklch(0.82 0.006 85); background: #fff; cursor: pointer; color: oklch(0.4 0.01 70); font-size: 14px; font-weight: 600; }
.rp2-adj-b.foto { border-color: oklch(0.8 0.04 240); background: oklch(0.985 0.008 240); color: oklch(0.4 0.1 240); }
.rp2-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp2-foto { position: relative; aspect-ratio: 1; border-radius: 12px; background: oklch(0.92 0.004 85) center / cover no-repeat; }
.rp2-foto button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: none; background: oklch(0.2 0.01 70 / 0.7); color: #fff; font-size: 11px; cursor: pointer; }
.rp2-doc { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.rp2-doc span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-doc-i { width: 28px; height: 34px; border-radius: 5px; background: oklch(0.96 0.015 240); border: 1px solid oklch(0.88 0.03 240); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; font-size: 7.5px; color: oklch(0.5 0.1 240); flex: none; }
.rp2-doc button { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: oklch(0.55 0.01 70); }
.rp2-rev { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 16px; padding: 4px 16px; }
.rp2-rev-f { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.rp2-rev-f:last-child { border-bottom: none; }
.rp2-rev-f > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rp2-rev-v { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rp2-rev-f button { border: none; background: transparent; cursor: pointer; font-size: 13px; color: oklch(0.45 0.11 240); padding: 10px 0 10px 10px; font-family: inherit; }
.rp2-listo-b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px; text-align: center; }
.rp2-check { width: 76px; height: 76px; border-radius: 50%; background: oklch(0.93 0.06 150); display: flex; align-items: center; justify-content: center; }
.rp2-listo-t { font-size: 32px; line-height: 1; text-transform: uppercase; }
.rp2-listo-d { font-size: 15px; color: oklch(0.45 0.01 70); line-height: 1.5; }
.rp2-listo-f { padding: 12px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.rp2-volver { min-height: 52px; border: 1.5px solid oklch(0.85 0.006 85); background: #fff; border-radius: 30px; font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; font-family: inherit; color: inherit; }
/* Inicio del Supervisor Taller (2026-10-13). */
.st { gap: 24px; }
.st-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.st-fecha { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.5 0.1 240); }
.st-reg { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; background: oklch(0.2 0.01 70); border-radius: 32px; padding: 8px 8px 8px 22px; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; box-shadow: 0 12px 26px -12px oklch(0.2 0.01 70 / 0.6); }
.st .st-reg, .st .st-reg:hover { color: #fff; }
.st-reg-o { width: 32px; height: 32px; border-radius: 50%; background: oklch(0.62 0.11 240); display: flex; align-items: center; justify-content: center; }
.st-banda { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 22px; display: flex; flex-wrap: wrap; overflow: hidden; }
.st-ots { flex: 1 1 340px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; text-decoration: none; color: inherit; }
.st-ots-h { display: flex; justify-content: space-between; align-items: baseline; }
.st-k2 { font-size: 10px; letter-spacing: 0.18em; color: oklch(0.5 0.01 70); }
.st-ver { font-size: 11px; color: oklch(0.45 0.11 240); text-decoration: none; }
.st-ots-n { display: flex; align-items: flex-end; gap: 16px; }
.st-ots-n > .anton { font-size: 64px; line-height: 1.05; }
.st-ots-n > div { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; min-width: 0; }
.st-ots-v { font-size: 14px; font-weight: 600; }
.st-ots-n .mono { font-size: 11px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-barra { display: flex; gap: 3px; height: 10px; }
.st-barra span { border-radius: 3px; }
.st-ley { display: flex; gap: 16px; flex-wrap: wrap; }
.st-ley span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: oklch(0.4 0.01 70); }
.st-ley i { width: 9px; height: 9px; border-radius: 50%; }
.st-ley strong { font-size: 12.5px; color: oklch(0.24 0.01 70); }
.st-hoy { flex: 1 1 360px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid oklch(0.93 0.006 85); border-top: 1px solid oklch(0.93 0.006 85); margin: -1px 0 0 -1px; }
.st-hoy > div { padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.st-hoy > div + div { border-left: 1px solid oklch(0.93 0.006 85); }
.st-hoy-n { font-size: 34px; line-height: 1.1; }
.st-hoy-n small { font-size: 15px; color: oklch(0.55 0.01 70); margin-left: 3px; }
.st-hoy-s { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hoy-s.he { color: oklch(0.52 0.12 65); }
.st-fila { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.st-card { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 22px; padding: 20px 22px 8px; display: flex; flex-direction: column; min-width: 0; }
.st-prios { flex: 999 1 560px; }
.st-papeles { flex: 1 1 320px; gap: 14px; padding-bottom: 20px; }
.st-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid oklch(0.2 0.01 70); }
.st-card-h2 { align-items: baseline; }
.st-h { font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.st-sub { font-size: 11px; color: oklch(0.55 0.01 70); }
.st-solo { flex: none; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: oklch(0.5 0.01 70); background: oklch(0.96 0.004 85); border-radius: 14px; padding: 4px 11px; }
.st-prio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 0; border-bottom: 1px solid oklch(0.95 0.004 85); text-decoration: none; color: inherit; }
.st-prio:hover .st-prio-t span:first-child { color: oklch(0.45 0.11 240); }
.st-prio-a { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 14px; }
.st-rank { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; background: oklch(0.95 0.004 85); color: oklch(0.45 0.01 70); }
.st-rank.uno { background: oklch(0.2 0.01 70); color: #fff; }
.st-prio-ot { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; width: 58px; }
.st-prio-ot .anton { font-size: 21px; line-height: 1.1; }
.st-prio-ot .mono { font-size: 10px; background: oklch(0.95 0.004 85); border-radius: 4px; padding: 1px 6px; color: oklch(0.4 0.01 70); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.st-prio-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-prio-t span:first-child { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prio-t .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prio-b { flex: 1 1 300px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
/* Las tres columnas centradas (pedido de Francisco: HO · HE no se veia centrado). */
.st-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.st-k { font-size: 9px; letter-spacing: 0.1em; color: oklch(0.55 0.01 70); white-space: nowrap; }
.st-desde { font-size: 20px; line-height: 1.1; }
.st-desde.cero { color: oklch(0.55 0.19 25); }
.st-hohe { font-size: 13px; white-space: nowrap; }
.st-hohe .he { color: oklch(0.52 0.12 65); }
.st-hohe .he0 { color: oklch(0.7 0.006 85); }
.st-ult { font-size: 10.5px; font-weight: 500; padding: 3px 9px; border-radius: 12px; white-space: nowrap; background: oklch(0.96 0.004 85); color: oklch(0.45 0.01 70); }
.st-ult.ok { background: oklch(0.94 0.05 150); color: oklch(0.42 0.11 150); }
.st-ult.mal { background: oklch(0.95 0.04 25); color: oklch(0.5 0.18 25); }
.st-ult-q { font-size: 9.5px; color: oklch(0.55 0.01 70); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prio-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 6px; font-size: 12px; }
.st-quietas { font-size: 11px; color: oklch(0.52 0.19 25); }
.st-pap-n { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-pap-n > div { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.st-pap-n .anton { font-size: 36px; line-height: 1.1; }
.st-pap-n .mono { font-size: 9.5px; letter-spacing: 0.12em; }
.st-pap-n .mal { background: oklch(0.975 0.015 25); color: oklch(0.52 0.19 25); }
.st-pap-n .ojo { background: oklch(0.975 0.025 80); color: oklch(0.52 0.12 65); }
.st-doc, .st-old, .st-act { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(0.95 0.004 85); text-decoration: none; color: inherit; }
.st-doc:last-child, .st-old:last-child, .st-act:last-child { border-bottom: none; }
.st-doc-c { width: 44px; height: 38px; flex: none; border-radius: 10px; background: oklch(0.95 0.004 85); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.st-doc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-doc-t > span:first-child { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-doc-t .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-doc-w { font-size: 11px; font-weight: 500; white-space: nowrap; }
.st-doc-w.mal { color: oklch(0.52 0.19 25); }
.st-doc-w.ojo { color: oklch(0.52 0.12 65); }
.st-bloque { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.st-sect { display: flex; align-items: center; gap: 12px; }
.st-sect .anton { font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.st-hr { flex: 1; height: 1px; background: oklch(0.88 0.006 85); }
.st-lista { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; overflow: hidden; }
.st-old { padding: 14px 18px; }
.st-old > .anton { font-size: 20px; width: 72px; flex: none; }
.st-old .st-doc-t > span:first-child { font-size: 14px; }
.st-pill { flex: none; font-size: 11px; font-weight: 500; padding: 3px 11px; border-radius: 12px; }
.st-feed { padding: 4px 18px; }
.st-act { align-items: flex-start; padding: 12px 0; }
.st-act .st-doc-t > span:first-child { font-weight: 400; white-space: normal; line-height: 1.35; }
.st-ini { width: 32px; height: 32px; flex: none; border-radius: 9px; background: oklch(0.95 0.02 240); color: oklch(0.4 0.1 240); display: flex; align-items: center; justify-content: center; font-size: 12px; }
@media (max-width: 760px) {
  .st { gap: 18px; }
  .st-reg-ancho { display: none; }
  .st-hoy > div { padding: 14px 12px; }
  .st-hoy-n { font-size: 28px; }
  .st-prio { gap: 10px 14px; }
}
/* Checklists - Centro de control (2026-10-14). */
.ckc { gap: 24px; }
.ckc-gris { font-size: 11px; color: oklch(0.55 0.01 70); }
.ckc-azul { color: oklch(0.45 0.11 240); }
.ckc-banda { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 22px; display: flex; flex-wrap: wrap; overflow: hidden; }
.ckc-pend { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border: none; cursor: pointer; text-align: left; background: #fff; font-family: inherit; color: inherit; }
.ckc-pend.on, .ckc-pend:hover { background: oklch(0.98 0.02 80); }
.ckc-pend-h { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.ckc-pend-h .mono:first-child { font-size: 10px; letter-spacing: 0.18em; color: oklch(0.48 0.12 65); }
.ckc-pend-h .mono:last-child { font-size: 11px; }
.ckc-pend-n { display: flex; align-items: flex-end; gap: 16px; }
.ckc-pend-n .anton { font-size: 64px; line-height: 1.05; color: oklch(0.5 0.12 65); }
.ckc-pend-n div { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; }
.ckc-pend-n div span:first-child { font-size: 14px; font-weight: 600; }
.ckc-pend-n div .mono { font-size: 11px; color: oklch(0.55 0.01 70); }
.ckc-kpis { flex: 2 1 420px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid oklch(0.93 0.006 85); border-top: 1px solid oklch(0.93 0.006 85); margin: -1px 0 0 -1px; }
.ckc-kpis > div { padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.ckc-kpis > div + div { border-left: 1px solid oklch(0.93 0.006 85); }
.ckc-kpis .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckc-kpis .mono:first-child { font-size: 9.5px; letter-spacing: 0.14em; color: oklch(0.5 0.01 70); }
.ckc-kpis .anton { font-size: 36px; line-height: 1.1; }
.ckc-kpis .anton.rojo { color: oklch(0.52 0.19 25); }
.ckc-sec { display: flex; flex-direction: column; gap: 12px; }
.ckc-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ckc-sec-h > .anton, .ckc-lista-t .anton { font-size: 22px; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.ckc-hr { flex: 1; height: 1px; background: oklch(0.88 0.006 85); align-self: center; min-width: 40px; }
.ckc-ley { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: oklch(0.5 0.01 70); }
.ckc-ley i { width: 7px; height: 7px; border-radius: 50%; }
.ckc-cats { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); overflow: hidden; }
.ckc-col { display: flex; flex-direction: column; padding: 6px 8px 10px; border-left: 1px solid oklch(0.94 0.004 85); margin-left: -1px; }
.ckc-col-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; padding: 10px 10px 9px; margin-bottom: 4px; border: none; border-bottom: 2px solid oklch(0.9 0.006 85); background: transparent; cursor: pointer; font-family: inherit; color: inherit; }
.ckc-col-h.on { border-bottom-color: oklch(0.2 0.01 70); }
.ckc-col-h span:first-child { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckc-col-h .anton { font-size: 18px; line-height: 1; }
.ckc-tipo { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 10px; border: none; border-radius: 9px; cursor: pointer; background: transparent; font-family: inherit; color: inherit; }
.ckc-tipo:hover { background: oklch(0.97 0.004 85); }
.ckc-tipo.on { background: oklch(0.2 0.01 70); color: #fff; }
.ckc-tipo-n { flex: 1; min-width: 0; font-size: 13px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckc-tipo-c { font-size: 12px; font-weight: 500; width: 24px; text-align: right; }
.ckc-b { font-size: 10px; font-weight: 500; min-width: 20px; text-align: center; padding: 1px 5px; border-radius: 8px; }
.ckc-b.nada { visibility: hidden; }
.ckc-b.pend { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.ckc-b.mal { background: oklch(0.95 0.04 25); color: oklch(0.5 0.18 25); }
.ckc-tipo.on .ckc-b.pend { background: oklch(0.74 0.15 70); color: oklch(0.2 0.04 60); }
.ckc-tipo.on .ckc-b.mal { background: oklch(0.6 0.19 25); color: #fff; }
.ckc-vacio { font-size: 11px; color: oklch(0.65 0.01 70); padding: 7px 10px; }
.ckc-dos { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.ckc-izq { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ckc-der { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ckc-lista-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ckc-lista-t { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ckc-quitar { border: none; background: oklch(0.95 0.004 85); border-radius: 12px; padding: 3px 9px; font-size: 10.5px; cursor: pointer; color: inherit; }
.ckc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ckc-chip { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 500; background: #fff; color: oklch(0.42 0.01 70); border: 1px solid oklch(0.9 0.006 85); font-family: inherit; white-space: nowrap; }
.ckc-chip .mono { font-size: 10.5px; color: oklch(0.6 0.01 70); }
.ckc-chip.on { background: oklch(0.2 0.01 70); color: #fff; border-color: oklch(0.2 0.01 70); font-weight: 600; }
.ckc-chip.on .mono { color: oklch(0.8 0.01 70); }
.ckc-buscar { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; padding: 0 14px; }
.ckc-buscar input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; padding: 11px 0; font-family: inherit; color: inherit; }
.ckc-lista { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; overflow: hidden; }
.ckc-dia { display: flex; align-items: center; gap: 10px; padding: 9px 20px; background: oklch(0.985 0.004 85); border-bottom: 1px solid oklch(0.94 0.004 85); }
.ckc-dia .mono:first-child { font-size: 10.5px; letter-spacing: 0.14em; font-weight: 500; }
.ckc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 20px; border-bottom: 1px solid oklch(0.95 0.004 85); text-decoration: none; color: inherit; }
.ckc-fila:hover { background: oklch(0.985 0.003 85); }
.ckc-fila.pend { box-shadow: inset 3px 0 0 oklch(0.74 0.15 70); }
.ckc-cod { width: 58px; flex: none; font-size: 20px; line-height: 1.1; }
.ckc-fila-t { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ckc-fila-t span:first-child { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckc-fila-t em { font-style: normal; font-weight: 500; color: oklch(0.45 0.01 70); }
.ckc-fila-t .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; }
.ckc-cuenta { flex: none; display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.ckc-cuenta .b { color: oklch(0.45 0.12 150); min-width: 38px; text-align: right; }
.ckc-cuenta .m { color: oklch(0.75 0.006 85); min-width: 34px; text-align: right; }
.ckc-cuenta .m.si { color: oklch(0.52 0.19 25); font-weight: 700; }
.ckc-cuenta .na { color: oklch(0.55 0.01 70); min-width: 50px; text-align: right; }
.ckc-cuenta .t { color: oklch(0.45 0.1 240); }
.ckc-cuenta .no { color: #fff; background: oklch(0.6 0.19 25); border-radius: 8px; padding: 1px 6px; font-size: 10px; }
.ckc-fila .ck-estado { flex: none; min-width: 92px; text-align: center; }
.ckc-nada { padding: 34px; text-align: center; font-size: 14px; color: oklch(0.5 0.01 70); }
.ckc-link { border: none; background: transparent; padding: 0; cursor: pointer; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.45 0.11 240); align-self: flex-start; }
.ckc-panel { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ckc-panel-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid oklch(0.2 0.01 70); }
.ckc-panel-h .anton { font-size: 19px; line-height: 1.1; text-transform: uppercase; }
.ckc-panel-h { gap: 10px; }
.ckc-panel-h .ckc-gris { white-space: nowrap; flex: none; }
.ckc-falla { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; }
.ckc-falla > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ckc-falla > div:first-child span:first-child { font-size: 13.5px; font-weight: 600; }
.ckc-falla > div:first-child .mono { font-size: 12px; color: oklch(0.52 0.19 25); }
.ckc-barra { height: 5px; border-radius: 3px; background: oklch(0.95 0.004 85); overflow: hidden; }
.ckc-barra i { display: block; height: 100%; border-radius: 3px; background: oklch(0.6 0.19 25); }
.ckc-sin { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid oklch(0.95 0.004 85); text-decoration: none; color: inherit; }
.ckc-sin:last-of-type { border-bottom: none; }
.ckc-sin > .anton { width: 48px; height: 36px; flex: none; border-radius: 10px; background: oklch(0.95 0.004 85); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ckc-sin > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ckc-sin > div span:first-child { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckc-sin > div .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); }
.ckc-dias { flex: none; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 12px; background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.ckc-dias.mal { background: oklch(0.95 0.04 25); color: oklch(0.5 0.18 25); }
@media (max-width: 760px) {
  .ckc-kpis > div { padding: 14px 12px; }
  .ckc-kpis .anton { font-size: 28px; }
  .ckc-fila { padding: 12px 14px; }
  .ckc-cuenta { gap: 8px; }
}
.ckc-periodo { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ckc-periodo-nav { display: flex; align-items: center; gap: 8px; }
.ckc-periodo-nav .gc-range { margin-left: 8px; }
/* Reporte del operador: revision de niveles en Bueno/Malo (2026-10-14). */
.rp2-items { display: flex; flex-direction: column; background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 16px; overflow: hidden; }
.rp2-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid oklch(0.95 0.004 85); }
.rp2-item:last-child { border-bottom: none; }
.rp2-item.malo { background: oklch(0.985 0.012 25); }
.rp2-item-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp2-item-n { font-size: 15px; font-weight: 600; }
.rp2-item-foto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp2-item-foto .mono { flex: 1; min-width: 0; font-size: 11px; color: oklch(0.5 0.01 70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-item-cam { padding: 6px 12px; font-size: 12.5px; border-color: oklch(0.86 0.006 85); color: oklch(0.45 0.01 70); background: oklch(0.985 0.003 85); }
.rp2-item.malo .rp2-item-cam { border-color: oklch(0.85 0.06 25); color: oklch(0.5 0.15 25); }
.rp2-item-f .ck-opts { flex: none; }
.rp2-item-mini { width: 44px; height: 44px; flex: none; border-radius: 10px; background: oklch(0.92 0.004 85) center / cover no-repeat; }
.rp2-item-x { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: oklch(0.55 0.01 70); }
.rp-items { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-it { font-size: 10.5px; padding: 2px 8px; border-radius: 10px; }
.rp-it.ok { background: oklch(0.94 0.05 150); color: oklch(0.4 0.11 150); }
.rp-it.mal { background: oklch(0.95 0.045 25); color: oklch(0.5 0.19 25); font-weight: 600; }
.rp-it a { text-decoration: none; }
/* Actividades - Matriz (2026-10-14). */
.am { gap: 22px; }
.am-k { font-size: 10.5px; letter-spacing: 0.12em; color: oklch(0.5 0.01 70); }
.am-k2 { font-size: 12px; color: oklch(0.5 0.01 70); }
.am-azul { font-size: 10.5px; letter-spacing: 0.14em; color: oklch(0.5 0.1 240); }
.am-rango { font-size: 12px; letter-spacing: 0.2em; color: oklch(0.5 0.1 240); }
.am-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.am-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-circ { width: 40px; height: 40px; border-radius: 50%; border: 1px solid oklch(0.88 0.006 85); background: #fff; font-size: 16px; cursor: pointer; color: inherit; font-family: inherit; }
.am-circ.chico { width: 34px; height: 34px; font-size: 14px; }
.am-circ:disabled, .am-hoy:disabled { opacity: 0.35; cursor: default; }
.am-hoy { white-space: nowrap; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid oklch(0.88 0.006 85); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; color: inherit; }
.am .am-nueva { margin-left: 8px; color: #fff; }
.am-filtros { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.am-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.am-chip { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 10px 8px 16px; border-radius: 26px; cursor: pointer; font-size: 14px; font-weight: 500; background: #fff; color: oklch(0.3 0.01 70); border: 1px solid oklch(0.88 0.006 85); font-family: inherit; }
.am-chip .anton { font-size: 15px; line-height: 1; padding: 3px 8px; border-radius: 12px; background: oklch(0.95 0.004 85); }
.am-chip.on { background: oklch(0.2 0.01 70); color: #fff; border-color: oklch(0.2 0.01 70); font-weight: 700; }
.am-chip.on .anton { background: oklch(0.32 0.01 70); color: #fff; }
.am-filtros-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.am-buscar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 12px; padding: 0 12px; width: 220px; }
.am-buscar input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; padding: 9px 0; font-family: inherit; color: inherit; }
.am-switch { display: flex; align-items: center; gap: 9px; border: none; background: transparent; cursor: pointer; font-size: 13px; color: oklch(0.4 0.01 70); white-space: nowrap; font-family: inherit; }
.am-switch > span { width: 34px; height: 20px; border-radius: 10px; position: relative; flex: none; background: oklch(0.86 0.006 85); }
.am-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px oklch(0.2 0.01 70 / 0.3); transition: left 0.15s; }
.am-switch.on > span { background: oklch(0.62 0.11 240); }
.am-switch.on i { left: 16px; }
.am-matriz { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 20px; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.am-ley { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 0 8px; flex-wrap: wrap; }
.am-ley-d { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.am-ley-d > span:not(.mono) { display: flex; align-items: center; gap: 7px; font-size: 12px; color: oklch(0.45 0.01 70); white-space: nowrap; }
.am-ley-d .hdot { width: 9px; height: 9px; cursor: default; }
.am-scroll { overflow-x: auto; }
.am-grid-wrap { min-width: 760px; display: flex; flex-direction: column; gap: 3px; }
.am-grid { display: grid; grid-template-columns: 200px repeat(7, minmax(0, 1fr)) 120px; gap: 3px; align-items: stretch; }
.am-head > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; color: oklch(0.35 0.01 70); }
.am-head > div .mono { font-size: 9.5px; letter-spacing: 0.1em; }
.am-head > div .anton { font-size: 16px; line-height: 1.1; }
.am-head > div.sel { color: oklch(0.4 0.1 240); }
.am-head > div.fut { color: oklch(0.75 0.006 85); }
.am-cuerpo { display: flex; flex-direction: column; gap: 3px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.am-nom { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-nom.sel { font-weight: 700; color: oklch(0.4 0.1 240); }
.am-celda { position: relative; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; background: oklch(0.98 0.003 85); border: 1px solid oklch(0.94 0.004 85); font-family: inherit; color: inherit; }
.am-celda:hover { border-color: oklch(0.8 0.006 85); }
.am-celda .hdot { width: 8px; height: 8px; flex: none; cursor: inherit; }
.am-celda .mono { font-size: 11px; font-weight: 500; }
.am-celda .am-he { font-size: 9.5px; color: oklch(0.5 0.01 70); font-weight: 400; }
.am-celda.fut { background: transparent; border: 1px dashed oklch(0.9 0.006 85); cursor: default; }
.am-celda.fut .hdot { opacity: 0.6; }
.am-celda.on { background: #fff; border: 2px solid oklch(0.2 0.01 70); box-shadow: 0 0 0 3px oklch(0.2 0.01 70 / 0.1); }
.am-tot { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.am-tot i { color: oklch(0.8 0.006 85); font-style: normal; }
.am-tot .he { color: oklch(0.52 0.12 65); font-weight: 500; }
.am-tot > span:not(.he) { color: oklch(0.72 0.006 85); }
.am-tot b { font-weight: 500; }
.am-pie { border-top: 2px solid oklch(0.2 0.01 70); padding-top: 8px; margin-top: 4px; }
.am-pie > .mono { font-size: 11.5px; text-align: center; align-self: center; color: oklch(0.4 0.01 70); }
.am-pie > .am-k { text-align: left; font-size: 10px; }
.am-pie .am-tot .anton { font-size: 17px; color: inherit; }
.am-pie .am-tot .anton.he { color: oklch(0.52 0.12 65); }
.am-n { padding-top: 2px; }
.am-nada { padding: 24px; text-align: center; font-size: 13.5px; color: oklch(0.5 0.01 70); }
.am-dia-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 6px; margin-bottom: 16px; }
.am-nombre { font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.am-dia-k { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.am-dia-k i { font-style: normal; color: oklch(0.55 0.01 70); }
.am-dia-k b.he { color: oklch(0.52 0.12 65); }
.am-dia-g { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.am-card { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.am-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.am-card-h .anton, .am-sub { font-size: 18px; line-height: 1.1; text-transform: uppercase; }
.am-cal-card { flex: 0 1 320px; min-width: 280px; padding: 16px; }
.am-cal { position: relative; }
.am-cal-l { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid oklch(0.94 0.004 85); }
.am-cal-l .mono { font-size: 9.5px; color: oklch(0.58 0.01 70); background: #fff; padding-right: 4px; position: relative; top: -7px; }
.am-cal-ord { position: absolute; left: 44px; right: 0; background: oklch(0.985 0.003 85); border-top: 1px dashed oklch(0.8 0.006 85); border-bottom: 1px dashed oklch(0.8 0.006 85); }
.am-bloque { position: absolute; left: 46px; right: 4px; border-radius: 8px; cursor: pointer; text-align: left; padding: 4px 9px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; background: oklch(0.975 0.004 85); border: 1px solid oklch(0.9 0.006 85); border-left: 3px solid oklch(0.2 0.01 70); font-family: inherit; color: inherit; }
.am-bloque.he { border-left-color: oklch(0.58 0.17 300); }
.am-bloque.merma { border-left-color: oklch(0.8 0.006 85); background: oklch(0.965 0.003 85); }
.am-bloque.dim { opacity: 0.55; }
.am-bloque.sel { background: oklch(0.2 0.01 70); color: #fff; border-color: oklch(0.2 0.01 70); border-left-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px oklch(0.2 0.01 70); z-index: 2; }
.am-bloque-h { display: flex; justify-content: space-between; gap: 6px; width: 100%; }
.am-bloque-h .mono { font-size: 10px; font-weight: 500; white-space: nowrap; }
.am-bloque-n { font-size: 12px; font-weight: 600; line-height: 1.25; overflow: hidden; }
.am-det { flex: 1 1 340px; min-width: 300px; }
.am-det-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.am-quitar { border: none; background: oklch(0.95 0.004 85); border-radius: 12px; padding: 3px 10px; font-size: 10.5px; cursor: pointer; color: inherit; }
.am-det-t { font-size: 24px; line-height: 1.1; text-transform: uppercase; }
.am-pill { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 12px; background: oklch(0.95 0.004 85); color: oklch(0.5 0.01 70); }
.am-pill.he { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.am-det-g { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid oklch(0.93 0.006 85); }
.am-det-g > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-bottom: 1px solid oklch(0.95 0.004 85); min-width: 0; }
.am-det-g > div > span:last-child { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.am-det-g small { font-weight: 400; font-size: 10.5px; color: oklch(0.55 0.01 70); }
.am-det-d { display: flex; flex-direction: column; gap: 5px; }
.am-det-d > span:last-child { font-size: 14px; line-height: 1.55; color: oklch(0.35 0.01 70); white-space: pre-line; }
.am-det-b { display: flex; gap: 8px; }
.am .am-abrir { flex: 1; text-align: center; background: oklch(0.2 0.01 70); color: #fff; border-radius: 24px; padding: 11px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; }
.am .am-editar { flex: none; border: 1.5px solid oklch(0.85 0.006 85); border-radius: 24px; padding: 11px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; color: inherit; }
.am-lista { display: flex; flex-direction: column; border-top: 1px solid oklch(0.93 0.006 85); }
.am-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid oklch(0.95 0.004 85); background: transparent; cursor: pointer; font-family: inherit; color: inherit; text-align: left; }
.am-li:hover { background: oklch(0.985 0.003 85); }
.am-li-h { font-size: 11.5px; width: 92px; flex: none; }
.am-li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-li-t span:first-child { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-li-t .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-vacio { font-size: 14px; color: oklch(0.5 0.01 70); padding: 10px 0; }
.am-adj { flex: 1.3 1 380px; min-width: 300px; }
.am-alcance { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: oklch(0.975 0.004 85); font-size: 13px; }
.am-alcance i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: oklch(0.75 0.006 85); }
.am-alcance > span { flex: 1; min-width: 0; }
.am-alcance.act { background: oklch(0.2 0.01 70); color: #fff; }
.am-alcance.act i { background: oklch(0.62 0.11 240); }
.am-alcance button { border: none; background: transparent; cursor: pointer; font-size: 11px; color: oklch(0.75 0.08 240); }
.am-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.am-foto { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; color: inherit; }
.am-foto-img { aspect-ratio: 4 / 3; border-radius: 10px; background: oklch(0.94 0.004 85) center / cover no-repeat; border: 1px solid oklch(0.9 0.006 85); }
.am-tag { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 2px 7px; border-radius: 9px; background: oklch(0.95 0.004 85); color: oklch(0.4 0.01 70); align-self: flex-start; }
.am-tag.he { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.am-docs { display: flex; flex-direction: column; border-top: 1px solid oklch(0.93 0.006 85); }
.am-doc { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid oklch(0.95 0.004 85); text-decoration: none; color: inherit; }
.am-doc:last-child { border-bottom: none; }
.am-doc-i { width: 34px; height: 40px; flex: none; border-radius: 6px; background: oklch(0.96 0.015 240); border: 1px solid oklch(0.88 0.03 240); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 8px; color: oklch(0.5 0.1 240); }
.am-doc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.am-doc-t > span:first-child { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-sinadj { padding: 28px; text-align: center; border: 1.5px dashed oklch(0.86 0.006 85); border-radius: 14px; font-size: 13.5px; color: oklch(0.5 0.01 70); }
@media (max-width: 760px) {
  .am-buscar { width: 100%; }
  .am .am-nueva { margin-left: 0; }
  .am-grid { grid-template-columns: 130px repeat(7, minmax(0, 1fr)) 90px; }
  .am-grid-wrap { min-width: 640px; }
}
/* Inicio del Administrador de Proyecto (2026-10-15). */
.ap { gap: 22px; }
.ap .st-banda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-k { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-k + .ap-k { border-left: 1px solid oklch(0.93 0.006 85); }
.ap-k .anton { font-size: 40px; line-height: 1.05; }
.ap-k .anton small { font-size: 18px; color: oklch(0.55 0.01 70); }
.ap-k > .mono:last-child { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-k.mal .anton { color: oklch(0.52 0.19 25); }
.ap-k.ojo .anton { color: oklch(0.52 0.12 65); }
.ap-proy { padding-bottom: 14px; gap: 0; }
.ap-veh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.ap-cod { font-size: 22px; width: 70px; flex: none; }
.ap-veh-t { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-veh-t span:first-child { font-size: 14px; font-weight: 600; }
.ap-veh-t .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); }
.ap-veh-n { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-pill { flex: none; font-size: 10.5px; font-weight: 500; padding: 3px 10px; border-radius: 12px; background: oklch(0.96 0.004 85); color: oklch(0.45 0.01 70); white-space: nowrap; }
.ap-pill.ok { background: oklch(0.94 0.05 150); color: oklch(0.4 0.11 150); }
.ap-pill.ojo { background: oklch(0.96 0.05 80); color: oklch(0.48 0.12 65); }
.ap-pill.mal { background: oklch(0.95 0.045 25); color: oklch(0.5 0.19 25); }
.ap-rec { display: flex; flex-direction: column; padding-top: 14px; }
@media (max-width: 760px) {
  .ap .st-banda { grid-template-columns: 1fr 1fr; }
  .ap-k:nth-child(3) { border-left: none; }
  .ap-k { padding: 14px; }
  .ap-k .anton { font-size: 30px; }
}
/* Visor en la misma pagina: flechas, contador y video (2026-10-15). */
.dv-pos { font-size: 11px; color: oklch(0.55 0.01 70); white-space: nowrap; }
.dv-flecha { width: 36px; height: 36px; border-radius: 50%; border: 1px solid oklch(0.88 0.006 85); background: #fff; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.dv-body video { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 8px; background: #000; }
/* Inicio del Administrador de Proyecto, diseño "Admin Proyecto - Inicio" (2026-10-15). */
.ap2 { gap: 26px; }
.ap2-gris { color: oklch(0.52 0.01 70); font-size: 11px; }
.ap2-k { font-size: 10px; letter-spacing: 0.16em; color: oklch(0.52 0.01 70); }
.ap2-k.azul { color: oklch(0.5 0.1 240); }
.ap2-k.ocre { color: oklch(0.48 0.12 65); }
.ap2-h { font-size: 22px; line-height: 1; text-transform: uppercase; }
.ap2 i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; font-style: normal; }
.ap2 i.ok { background: oklch(0.62 0.15 150); }
.ap2 i.mal, .ap2 i.vencido { background: oklch(0.6 0.2 25); }
.ap2 i.pend { border: 1.5px dashed oklch(0.7 0.01 70); }
.ap2 i.off, .ap2 i.falta { border: 1.5px dashed oklch(0.75 0.006 85); }
.ap2 i.ojo, .ap2 i.por { background: oklch(0.76 0.15 70); }
.ap2-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ap2-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.ap2-stats > div { display: flex; flex-direction: column; gap: 2px; }
.ap2-stats .mono { font-size: 10px; letter-spacing: 0.14em; color: oklch(0.52 0.01 70); }
.ap2-stats > div > span:last-child { font-size: 15px; font-weight: 600; }
.ap2-stats .mal { color: oklch(0.5 0.19 25); font-weight: 700; }
.ap2-fila { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.ap2-rep { flex: 999 1 760px; min-width: 0; background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 22px; display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; min-height: 420px; }
.ap2-rail { border-right: 1px solid oklch(0.93 0.006 85); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 12px; background: oklch(0.985 0.004 85); }
.ap2-rail-h { display: flex; flex-direction: column; gap: 3px; padding: 0 10px; }
.ap2-rail-h .anton { font-size: 20px; text-transform: uppercase; line-height: 1; }
.ap2-rail-h .mono { font-size: 11px; color: oklch(0.52 0.01 70); }
.ap2-ops { display: flex; flex-direction: column; gap: 2px; }
.ap2-op { display: flex; align-items: center; gap: 10px; width: 100%; border: none; cursor: pointer; padding: 10px; border-radius: 10px; background: transparent; font-family: inherit; color: inherit; text-align: left; }
.ap2-op > span:nth-child(2) { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap2-op > .mono { font-size: 11px; color: oklch(0.5 0.01 70); }
.ap2-op > .mono.ok { color: oklch(0.4 0.11 150); }
.ap2-op > .mono.mal { color: oklch(0.5 0.19 25); }
.ap2-op.on { background: #fff; font-weight: 600; box-shadow: 0 1px 0 oklch(0.92 0.006 85), inset 3px 0 0 oklch(0.2 0.01 70); }
.ap2-ley { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 0; border-top: 1px solid oklch(0.93 0.006 85); }
.ap2-ley span, .ap2-l { display: flex; align-items: center; gap: 8px; font-size: 12px; color: oklch(0.45 0.01 70); white-space: nowrap; }
.ap2-rep-b { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ap2-rep-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.ap2-op-n { font-size: 28px; line-height: 1; text-transform: uppercase; }
.ap2-badge { font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: 14px; white-space: nowrap; background: oklch(0.96 0.004 85); color: oklch(0.5 0.01 70); }
.ap2-badge.ok { background: oklch(0.94 0.06 150); color: oklch(0.4 0.11 150); }
.ap2-badge.mal { background: oklch(0.95 0.045 25); color: oklch(0.5 0.19 25); }
.ap2-turnos-h { display: grid; gap: 10px; border-bottom: 1px solid oklch(0.93 0.006 85); padding-bottom: 8px; }
.ap2-turnos-h .mono { font-size: 9.5px; letter-spacing: 0.12em; color: oklch(0.52 0.01 70); }
.ap2-turnos { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ap2-turnos-f { display: grid; gap: 10px; align-items: stretch; }
.ap2-veh { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ap2-veh .anton { font-size: 22px; line-height: 1; }
.ap2-veh span:last-child { font-size: 12px; color: oklch(0.45 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap2-blq { text-align: left; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; background: #fff; border: 1px dashed oklch(0.86 0.006 85); font-family: inherit; color: inherit; }
.ap2-blq.ok, .ap2-blq.mal { border: 1px solid oklch(0.92 0.006 85); }
.ap2-blq.ok { border-left: 3px solid oklch(0.55 0.13 150); cursor: pointer; }
.ap2-blq.ok:hover { background: oklch(0.985 0.01 150); }
.ap2-blq.mal { border-left: 3px solid oklch(0.57 0.2 25); }
.ap2-blq-l { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ap2-blq-l i { width: 7px; height: 7px; }
.ap2-blq.ok .ap2-blq-l i { background: oklch(0.55 0.13 150); }
.ap2-blq.mal .ap2-blq-l { color: oklch(0.5 0.19 25); }
.ap2-blq.mal .ap2-blq-l i { background: oklch(0.57 0.2 25); }
.ap2-blq.pend .ap2-blq-l, .ap2-blq.off .ap2-blq-l { color: oklch(0.5 0.01 70); }
.ap2-blq.pend .ap2-blq-l i, .ap2-blq.off .ap2-blq-l i { border: 1.5px solid oklch(0.75 0.006 85); }
.ap2-blq .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap2-pie { border-top: 1px solid oklch(0.93 0.006 85); padding-top: 12px; }
.ap2-lado { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ap2-card { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ap2-card-h { display: flex; justify-content: space-between; align-items: baseline; }
.ap2-docn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap2-docn > div { display: flex; flex-direction: column; gap: 3px; }
.ap2-docn > div + div { padding-left: 14px; border-left: 1px solid oklch(0.93 0.006 85); }
.ap2-docn .anton { font-size: 32px; line-height: 1; }
.ap2-docn .anton.mal { color: oklch(0.5 0.19 25); }
.ap2-docn .anton.ojo { color: oklch(0.48 0.12 65); }
.ap2-docn .anton.gris { color: oklch(0.55 0.01 70); }
.ap2-docn .anton.cero { color: oklch(0.8 0.006 85); }
.ap2-docn .mono { font-size: 10px; color: oklch(0.5 0.01 70); }
.ap2-docl { display: flex; flex-direction: column; border-top: 1px solid oklch(0.94 0.004 85); }
.ap2-docl > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.ap2-docl > div:last-of-type { border-bottom: none; }
.ap2-docl i { width: 8px; height: 8px; }
.ap2-dc { font-size: 12.5px; font-weight: 500; width: 50px; flex: none; }
.ap2-dt { flex: 1; font-size: 13px; color: oklch(0.38 0.01 70); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap2-dw { font-size: 11px; font-weight: 500; white-space: nowrap; }
.ap2-dw.vencido { color: oklch(0.5 0.19 25); }
.ap2-dw.por { color: oklch(0.48 0.12 65); }
.ap2-dw.falta { color: oklch(0.55 0.01 70); }
.ap2-at { display: flex; align-items: center; gap: 12px; padding: 9px 0; border: none; border-bottom: 1px solid oklch(0.95 0.004 85); background: transparent; cursor: pointer; text-align: left; font-family: inherit; color: inherit; width: 100%; }
.ap2-at:last-child { border-bottom: none; }
.ap2-at > .anton { font-size: 20px; width: 62px; flex: none; }
.ap2-at > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap2-at > div > span:first-child { font-size: 13px; font-weight: 600; }
.ap2-at .mal { color: oklch(0.5 0.19 25); }
.ap2-at .ojo { color: oklch(0.48 0.12 65); }
.ap2-at .mono { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap2-cump { padding: 22px 26px; gap: 16px; }
.ap2-cump-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap2-cump-d { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ap2-sem { display: flex; align-items: center; gap: 2px; border: 1px solid oklch(0.9 0.006 85); border-radius: 20px; padding: 3px; }
.ap2-sem .mono { font-size: 12px; padding: 0 10px; white-space: nowrap; }
.ap2-sem button { width: 28px; height: 28px; border-radius: 50%; border: none; font-size: 15px; cursor: pointer; background: oklch(0.96 0.004 85); color: inherit; font-family: inherit; }
.ap2-sem button:disabled { background: transparent; color: oklch(0.8 0.006 85); cursor: default; }
.ap2-mx { min-width: 640px; display: flex; flex-direction: column; gap: 6px; }
.ap2-mx-f { display: grid; grid-template-columns: 170px repeat(7, minmax(0, 1fr)) 84px; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 10px; }
.ap2-mx-f.on { background: oklch(0.975 0.004 85); box-shadow: inset 3px 0 0 oklch(0.2 0.01 70); }
.ap2-mx-h { padding: 0 8px 4px; border-bottom: 1px solid oklch(0.93 0.006 85); }
.ap2-mx-h .mono { font-size: 10px; letter-spacing: 0.1em; color: oklch(0.52 0.01 70); text-align: center; padding: 3px 0; border-radius: 6px; }
.ap2-mx-h .mono:first-child { text-align: left; }
.ap2-mx-h .mono.hoy { background: oklch(0.2 0.01 70); color: #fff; }
.ap2-mx-n { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: none; background: transparent; cursor: pointer; padding: 0; text-align: left; min-width: 0; font-family: inherit; color: inherit; }
.ap2-mx-n span:first-child { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ap2-mx-f.on .ap2-mx-n span:first-child { font-weight: 700; }
.ap2-mx-n .mono { font-size: 10px; color: oklch(0.55 0.01 70); }
.ap2-mx-c { height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; background: oklch(0.98 0.003 85); border: 1px solid oklch(0.94 0.004 85); }
.ap2-mx-c.hoy { border-color: oklch(0.82 0.006 85); }
.ap2-mx-c.fut { background: transparent; border: 1px dashed oklch(0.92 0.006 85); }
.ap2-mx-c i { width: 8px; height: 8px; }
.ap2-mx-c.ok i { background: oklch(0.62 0.15 150); }
.ap2-mx-c.mal i { background: oklch(0.6 0.2 25); }
.ap2-mx-c.pend i { background: oklch(0.8 0.15 85); border: none; }
.ap2-mx-c.off i { background: oklch(0.88 0.004 85); border: none; }
.ap2-mx-c .mono { font-size: 11px; font-weight: 500; }
.ap2-mx-c.off .mono { color: oklch(0.72 0.006 85); }
.ap2-mx-t { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ap2-mx-t .mono:first-child { font-size: 13px; font-weight: 500; }
.ap2-mx-t .mono:last-child { font-size: 10px; color: oklch(0.55 0.01 70); }
.ap2-vs { display: flex; flex-direction: column; gap: 14px; }
.ap2-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ap2-vc { background: #fff; border: 1px solid oklch(0.92 0.006 85); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.ap2-vc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ap2-vc-h > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap2-vc-h .anton { font-size: 26px; line-height: 1; }
.ap2-vc-h > div > span:last-child { font-size: 13px; color: oklch(0.42 0.01 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap2-vc-st { display: flex; align-items: center; gap: 6px; flex: none; }
.ap2-vc-st i { width: 7px; height: 7px; }
.ap2-vc-st .mono { font-size: 10.5px; color: oklch(0.45 0.01 70); }
.ap2-vc-l { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: oklch(0.98 0.003 85); border-radius: 10px; padding: 10px 12px; }
.ap2-vc-l .mono:first-child { font-size: 18px; font-weight: 500; }
.ap2-vc-l .mono:last-child { font-size: 10.5px; color: oklch(0.55 0.01 70); white-space: nowrap; }
.ap2-vc-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid oklch(0.95 0.004 85); }
.ap2-vc-r.ult { border-bottom: none; padding-bottom: 0; }
.ap2-vc-r > .mono:first-child { font-size: 10px; letter-spacing: 0.12em; color: oklch(0.55 0.01 70); }
.ap2-vc-r > span:last-child:not(.mono) { font-size: 13px; }
.ap2-docp { font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 12px; white-space: nowrap; }
.ap2-docp.ok { background: oklch(0.94 0.06 150); color: oklch(0.4 0.11 150); }
.ap2-docp.vencido { background: oklch(0.95 0.045 25); color: oklch(0.5 0.19 25); }
.ap2-docp.por { background: oklch(0.95 0.07 80); color: oklch(0.48 0.12 65); }
.ap2-docp.falta { background: oklch(0.96 0.004 85); color: oklch(0.55 0.01 70); border: 1px dashed oklch(0.85 0.006 85); }
.ap2-dlg { border: none; border-radius: 20px; padding: 18px 22px 22px; width: min(560px, 92vw); max-height: 86vh; overflow: auto; }
.ap2-dlg::backdrop { background: oklch(0.2 0.01 70 / 0.45); }
.ap2-dlg-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ap2-dlg-h .anton { font-size: 20px; text-transform: uppercase; }
@media (max-width: 900px) {
  .ap2-rep { grid-template-columns: 1fr; }
  .ap2-rail { border-right: none; border-bottom: 1px solid oklch(0.93 0.006 85); }
  .ap2-ley { display: none; }
  .ap2-rep-b { padding: 18px; }
}
@media (max-width: 600px) {
  .ap2-turnos-f, .ap2-turnos-h { grid-template-columns: 64px repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
  .ap2-veh .anton { font-size: 18px; }
  .ap2-veh span:last-child { display: none; }
  .ap2-blq { padding: 8px 10px; }
  .ap2-blq-l { font-size: 12.5px; }
  .ap2-blq .mono { font-size: 9.5px; }
  .ap2-op-n { font-size: 22px; }
}
/* Ver un reporte completo, con el diseño del formulario del operador (2026-10-15). */
.rpv-dlg { border: none; border-radius: 22px; padding: 0; width: min(560px, 94vw); max-height: 90vh; overflow: auto; background: oklch(0.97 0.005 85); }
.rpv-dlg::backdrop { background: oklch(0.2 0.01 70 / 0.45); }
.rpv-h { position: sticky; top: 0; z-index: 2; background: oklch(0.97 0.005 85); padding: 6px 20px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid oklch(0.92 0.006 85); }
.rpv-h .rp2-wiz-top .mono { text-align: left; }
.rpv-quien { font-size: 11.5px; color: oklch(0.5 0.01 70); }
.rpv-b { gap: 20px; padding-bottom: 24px; }
.rpv-in { border-bottom-width: 3px; }
.rpv-in .rpv-num { font-size: 44px; line-height: 1.1; flex: 1; color: oklch(0.2 0.01 70); }
.rpv-off { opacity: 0.45; }
.rp2-est.rpv-off, .rp2-chip.rpv-off { cursor: default; }
div.rp2-est { cursor: default; }
span.rp2-chip { display: inline-flex; align-items: center; cursor: default; }
span.ck-opt { display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.rpv-texto { background: #fff; border: 1px solid oklch(0.88 0.006 85); border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.rpv-item-fotos { display: flex; align-items: center; gap: 8px; }
.rpv-item-foto { text-decoration: none; color: inherit; }
.rpv-mini { display: block; width: 52px; height: 52px; border-radius: 10px; background: oklch(0.92 0.004 85) center / cover no-repeat; border: 1px solid oklch(0.9 0.006 85); }
.rpv-foto { display: block; text-decoration: none; }
.rpv-doc { text-decoration: none; color: inherit; }
.rpv-doc .rpv-gris { flex: none; color: oklch(0.45 0.11 240); }
.rpv-gris { font-size: 12px; color: oklch(0.55 0.01 70); }
.rp-item-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rp-ver { border: none; background: oklch(0.95 0.02 240); color: oklch(0.42 0.1 240); border-radius: 12px; padding: 3px 10px; font-size: 10.5px; cursor: pointer; white-space: nowrap; }
.rp-ver:hover { background: oklch(0.92 0.04 240); }
/* Elegir un dia en el cumplimiento semanal (2026-10-15). */
button.ap2-mx-c { cursor: pointer; font-family: inherit; color: inherit; }
button.ap2-mx-c:hover { border-color: oklch(0.7 0.01 70); }
.ap2-mx-c.sel { border: 2px solid oklch(0.2 0.01 70); background: #fff; box-shadow: 0 0 0 3px oklch(0.2 0.01 70 / 0.1); }
.ap2-mx-h button { border: none; background: transparent; cursor: pointer; font-size: 10px; letter-spacing: 0.1em; color: oklch(0.52 0.01 70); text-align: center; padding: 3px 0; border-radius: 6px; font-family: 'JetBrains Mono', monospace; }
.ap2-mx-h button:hover { background: oklch(0.95 0.004 85); }
.ap2-mx-h button.hoy { background: oklch(0.2 0.01 70); color: #fff; }
.ap2-mx-h button.sel:not(.hoy) { background: oklch(0.92 0.03 240); color: oklch(0.4 0.1 240); }
.ap2-hoy { align-self: flex-start; border: none; background: oklch(0.95 0.02 240); color: oklch(0.42 0.1 240); border-radius: 12px; padding: 3px 10px; font-size: 10.5px; cursor: pointer; margin-top: 6px; }
/* Cumplimiento de reportes con el estilo simple de la semana del Inicio (2026-10-16). */
.ap2-semana { display: flex; flex-direction: column; gap: 14px; }
.ap2-semana button.hdot { border: none; padding: 0; cursor: pointer; }
.ap2-semana button.hdot:hover { transform: scale(1.25); }
.ap2-semana .sem-fila .hdot { width: 13px; height: 13px; }
.ap2-semana .hdot.sel { outline: 2px solid oklch(0.2 0.01 70); outline-offset: 2px; }
.ap2-semana button.sem-dia { border: none; background: transparent; cursor: pointer; font-family: inherit; color: inherit; padding: 2px 0; border-radius: 6px; }
.ap2-semana button.sem-dia:disabled { cursor: default; opacity: 0.55; }
.ap2-semana .sem-dia.ap2-diasel { background: oklch(0.92 0.03 240); }
.ap2-nom { border: none; background: transparent; cursor: pointer; padding: 0; text-align: left; font-family: inherit; color: inherit; }
.ap2-opsel { background: oklch(0.985 0.004 85); }
.ap2-opsel .ap2-nom { font-weight: 700; }