/* ============================================================
   Estilos por pagina (tablero, promotoria, promotor). Cargado por
   base.html despues de app.css. Lo generico vive en app.css.
   ============================================================ */

/* ---------- Tablero ---------- */
.tablero .tb-sub { margin: 4px 0 0; font-size: 12.5px; max-width: 70ch; }
.tb-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tb-kpis { margin-top: 6px; }
.tb-marca { font-weight: 600; }
.tb-tabla thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.tb-tabla thead tr:nth-child(2) th { top: var(--th1, 0px); }
.tb-tabla td.tb-sep, .tb-tabla th.tb-sep { border-left: 1px solid var(--line); }
.tb-tabla th.tb-grupo, .xtab th.tb-grupo { text-align: center; border-bottom: 1px solid var(--line); }
.xtab th.th-abajo { vertical-align: bottom; }
.tb-tabla tr.tb-total td { border-top: 2px solid var(--line); background: var(--surface-2); }
.tb-tabla tr.tb-sin td { opacity: .45; }
.tb-tabla tr.tb-sem-act td, .tb-tabla tr.tb-mes-act-row td { background: var(--brand-tint); }
.tb-tabla th.tb-mes-act { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; }
/* columnas fijas a la izquierda (1, 2 o 3) */
.tb-fix1 td:nth-child(1), .tb-fix1 th:nth-child(1),
.tb-fix2 td:nth-child(-n+2), .tb-fix2 th:nth-child(-n+2),
.tb-fix3 td:nth-child(-n+3), .tb-fix3 th:nth-child(-n+3) { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tb-fix2 td:nth-child(2), .tb-fix2 th:nth-child(2) { left: var(--c1, 0); box-shadow: 1px 0 0 var(--line); }
.tb-fix3 td:nth-child(2), .tb-fix3 th:nth-child(2) { left: var(--c1, 0); }
.tb-fix3 td:nth-child(3), .tb-fix3 th:nth-child(3) { left: var(--c2, 0); box-shadow: 1px 0 0 var(--line); }
.tb-fix1 td:nth-child(1), .tb-fix1 th:nth-child(1) { box-shadow: 1px 0 0 var(--line); }
.tb-tabla thead th:nth-child(-n+3) { z-index: 3; }
.tb-tabla tr.tb-total td:nth-child(-n+3), .tb-tabla tr:hover td:nth-child(-n+3) { background: var(--surface-2); }
.tb-tabla tr.tb-sem-act td:nth-child(-n+3), .tb-tabla tr.tb-mes-act-row td:nth-child(-n+3) { background: var(--brand-tint); }
.tb-cmp-bar { min-width: 180px; }
@media (max-width: 639.98px) {
  .tb-cmp-bar { min-width: 110px; }
  .tb-tabla thead th:nth-child(-n+3), .tb-tabla thead th:nth-child(-n+2) { position: sticky; }
  /* en telefono solo la primera columna fija: dos o tres se comen el ancho */
  .tb-fix2 td:nth-child(2), .tb-fix2 th:nth-child(2),
  .tb-fix3 td:nth-child(2), .tb-fix3 th:nth-child(2), .tb-fix3 td:nth-child(3), .tb-fix3 th:nth-child(3) { position: static; box-shadow: none; }
  .tb-fix2 td:nth-child(1), .tb-fix2 th:nth-child(1), .tb-fix3 td:nth-child(1), .tb-fix3 th:nth-child(1) { box-shadow: 1px 0 0 var(--line); }
}
@media print {
  .tabs, .tb-filtros, .btn, .nav-toggle { display: none !important; }
  .tabla-scroll, .tb-scroll { border: 0; overflow: visible; background-image: none; }
  .tb-tabla td, .tb-tabla th, .fi-tabla td, .fi-tabla th { position: static !important; }
}

/* ---------- Ficha por modelo (inicio) ---------- */
.ficha .fi-sub { margin: 4px 0 0; font-size: 12.5px; }
.fi-cab { display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: 112px repeat(auto-fit, minmax(140px, 1fr)); }
.fi-kpi-nombre { grid-column: span 2; }
.fi-nombre { font-size: 18px; line-height: 1.2; white-space: normal; }
.fi-buscar { min-width: 20ch; max-width: 100%; }
.fi-foto { display: grid; place-items: center; min-height: 96px; border: 1px dashed var(--line-hard);
  border-radius: 12px; color: var(--text-3); font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; }
.fi-h2 { margin: 28px 0 0; font-size: 14px; display: flex; align-items: baseline; gap: 10px; }
.fi-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em; }
.fi-tabla thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.fi-tabla thead tr:nth-child(2) th { top: var(--th1, 0px); }
.fi-tabla thead th:first-child { z-index: 3; }
.fi-tabla td.fi-sep, .fi-tabla th.fi-sep { border-left: 1px solid var(--line); }
.fi-tabla th.fi-mes-act { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; }
.fi-tabla tr.tb-total td { border-top: 2px solid var(--line); background: var(--surface-2); }
.fi-tabla tr.fi-despl td { color: var(--text-2); font-style: italic; }
.fi-vacio { color: var(--text-3); }
.fi-nota { font-size: 12px; color: var(--text-3); margin: 6px 0 0; max-width: 90ch; }
.fi-ok { color: var(--ok); }
.fi-amarillo { background: var(--warn-bg); color: var(--warn); }
.fi-rojo { background: var(--danger-bg); color: var(--danger-ink); font-weight: 600; }
.fi-leyenda { padding: 1px 6px; border-radius: 4px; }
.fi-parcial { outline: 1px dashed var(--warn-fill); outline-offset: -2px; color: var(--text-2); }
@media (max-width: 639.98px) { .fi-cab { grid-template-columns: repeat(2, 1fr); } .fi-foto { display: none; } }

/* ---------- Promotoria (lista + hoja del promotor) ---------- */
.pr-filtros { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pr-kpis { margin-top: 6px; }
.pr-h3 { margin: 10px 0 4px; font-size: 13px; }
.pr-sub { margin: 4px 0 0; font-size: 12px; }
.pr-tabla { margin-top: 0; }
.pr-tabla td.pr-sep, .pr-tabla th.pr-sep { border-left: 1px solid var(--line); }
.pr-tabla tr.pr-total td { border-top: 1px solid var(--line); background: var(--surface-2); }
.pr-tabla tr.pr-inactivo td { opacity: .55; }
.pr-tabla tr.pr-inactivo td:first-child a::after { content: " · baja"; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.pr-detalle { white-space: normal; max-width: 40ch; }
.pr-alta { margin-top: 12px; }
.pr-in { width: 100%; }
.pr-in-meta { width: 12ch; text-align: right; font-family: var(--font-mono); }
.pr-in-eval { width: 9ch; text-align: right; font-family: var(--font-mono); }
.pr-meta-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.kpi-card .pr-meta-form { display: flex; margin: 6px 0; }
.pr-inline { display: inline-flex; margin: 0; }
.pr-btn-mini { padding: 3px 9px; font-size: 10px; }
.pr-wide { flex: 1 1 260px; }
.pr-acc-cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.pr-acc-form { margin-top: 8px; }
/* dias (acordeon, uno por dia) */
.pr-dias { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pr-dia { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.pr-dia.pr-dom { opacity: .7; }
.pr-dia.pr-fut { opacity: .5; }
.pr-dia.pr-hoy { border-color: var(--brand-hi); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.pr-dia-head {
  display: grid; grid-template-columns: 28px 36px 1fr auto auto; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px 8px 14px; min-height: var(--tap); cursor: pointer; user-select: none;
  background: none; border: 0; text-align: left; font: inherit; color: inherit;
}
.pr-dia-head:hover { background: var(--surface-2); }
.pr-dia-head .ico { color: var(--text-3); transition: transform .15s; }
.pr-dia.abierto .pr-dia-head .ico { transform: rotate(180deg); }
.pr-letra { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; }
.pr-fecha { font-weight: 700; font-size: 16px; }
.pr-res { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-avance { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.pr-dia.pr-cap .pr-fecha::after { content: ' ●'; color: var(--ok); font-size: 9px; vertical-align: middle; }
.pr-dia-body { display: none; padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.pr-dia.abierto .pr-dia-body { display: block; }
.pr-grp { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.pr-grp:last-child { border-bottom: 0; }
.pr-grp label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-2); flex: 1 1 120px; min-width: 0; }
.pr-lbl { flex: 0 0 100%; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pr-calc { flex: 1 1 100%; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pr-foto input { min-height: var(--tap); }
.pr-thumb img { height: 52px; width: 52px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.pr-nota-grp .btn { flex: 0 0 auto; min-height: var(--tap); }
.pr-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 12px; color: var(--text-2); }
.pr-leyenda b { color: var(--text); font-weight: 600; }
@media (max-width: 639.98px) {
  .pr-grp label { flex-basis: 45%; }
  .pr-nota-grp .btn { flex-basis: 100%; justify-content: center; }
  .pr-res { font-size: 12px; }
}

/* ---------- Promotoria · captura del dia (celular) ----------
   Movil primero: aqui el ancho por defecto ES el telefono, y el @media de
   arriba solo acomoda la pantalla grande. Es al reves que el resto del
   portal porque esta pagina se usa de pie en el piso de venta. */
.ph { max-width: 560px; }
.ph-head h1 { font-size: 22px; margin: 2px 0 0; }
.ph-fecha { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ph-fecha-txt { font-size: 15px; color: var(--text-2); }
.ph-fecha-txt strong { font-size: 17px; color: var(--text); }
.ph-btn-off { opacity: .3; pointer-events: none; }
.ph-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; }
.ph-chip-hoy { background: var(--brand); color: var(--on-brand); }
.ph-aviso { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-md); }
.ph-aviso .ico { flex: 0 0 auto; margin-top: 2px; }
.ph-aviso-info { background: var(--surface-2); color: var(--text-2); }
/* Faltaban las dos variantes que ya usaban Ventas y Teams: sin ellas el
   aviso salia con el fondo de la pagina y no se distinguia de un parrafo. */
.ph-aviso-warn { background: var(--warn-bg); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.ph-aviso-warn .ico { color: var(--warn); }
.ph-aviso-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.ph-aviso-ok .ico { color: var(--ok); }

.ph-titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 22px 0 8px; font-weight: 600; }
.ph-titulo .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

.ph-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin: 0 0 10px; }
.ph-checadas { display: flex; flex-direction: column; }
.ph-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ph-card-nombre { font-weight: 600; font-size: 15px; }
.ph-hora { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.ph-hora .ico { width: 15px; height: 15px; color: var(--text-3); }
.ph-hora-vacia { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--text-3); }
.ph-hora-tarde { color: var(--danger); }
.ph-checada.ph-lista { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }

.ph-guardado { display: flex; gap: 10px; margin-top: 10px; }
.ph-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); display: block; }
.ph-meta { min-width: 0; font-size: 12.5px; }
.ph-meta p { margin: 0 0 2px; display: flex; align-items: center; gap: 4px; }
.ph-meta .ico { width: 14px; height: 14px; flex: 0 0 auto; }
.ph-ok { color: var(--ok); }
.ph-falta { color: var(--warn); }
.ph-mini { font-size: 11px; }
.ph-mapa { font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.ph-mapa .ico { width: 12px; height: 12px; }

/* Boton de camara: el <input file> va escondido dentro del <label>, que es lo
   que se ve y lo que se toca. */
.ph-btn-foto {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; margin-top: 10px; cursor: pointer;
  border: 1px dashed var(--platinum-lo); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 500;
}
.ph-btn-foto:active { background: var(--brand-tint); }
.ph-btn-foto input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ph-btn-foto .ico { width: 20px; height: 20px; }
.ph-estado { font-size: 12.5px; margin: 8px 0 0; }
.ph-estado--espera { color: var(--text-2); }
.ph-estado--ok { color: var(--ok); }
.ph-estado--falta { color: var(--warn); }
/* Camara dentro de la pagina: en Android con poca RAM, abrir la app de camara
   manda Chrome a segundo plano, el sistema lo cierra y la foto se pierde
   ("Memoria insuficiente para completar la operacion anterior"). */
.ph-cam { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; flex-direction: column; }
.ph-cam video { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.ph-cam-espejo video { transform: scaleX(-1); }
.ph-cam-msg { color: #fff; text-align: center; font-size: 14px; margin: 0; padding: 10px 16px 0; }
.ph-cam-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
.ph-cam-barra button { min-height: var(--tap); background: none; border: 0; color: #fff; font-size: 15px; cursor: pointer; flex: 1 1 0; }
.ph-cam-barra .ph-cam-disparo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, .25); }
.ph-cam-barra .ph-cam-disparo:disabled { opacity: .4; }
.ph-btn-guardar { width: 100%; min-height: var(--tap); justify-content: center; margin-top: 10px; }
.ph-link-retomar { background: none; border: 0; padding: 8px 0 0; color: var(--text-3); font-size: 12.5px; text-decoration: underline; cursor: pointer; }

.ph-campos { display: flex; gap: 10px; }
.ph-campos label, .ph-nota { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); flex: 1 1 0; min-width: 0; }
.ph-campos input, .ph-campos select, .ph-nota input { min-height: var(--tap); font-size: 16px; }  /* 16px: menos de eso, iOS hace zoom al enfocar */
.ph-nota { margin-top: 10px; }
.ph-mas { margin-top: 12px; }
.ph-mas summary { font-size: 13px; color: var(--text-2); cursor: pointer; padding: 4px 0; }
.ph-mas .ph-campos { margin-top: 8px; }
.ph-mes { font-size: 12.5px; margin: 10px 0 0; text-align: center; }

.ph-acc-lista { list-style: none; padding: 0; margin: 0 0 10px; }
.ph-acc-lista li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 6px; background: var(--surface); font-size: 13px; }
.ph-acc-tipo { font-weight: 600; }
.ph-acc-det { flex: 1 1 100%; color: var(--text-2); }
.ph-acc-sec { font-size: 11px; }
.ph-pie { margin: 24px 0 0; text-align: center; font-size: 13px; }
.ph-pie .ico { width: 14px; height: 14px; vertical-align: -2px; }

@media (max-width: 400px) {
  .ph-campos { flex-direction: column; gap: 8px; }
}

/* Evidencia de la checada dentro de la hoja del mes (vista de supervision). */
.pr-evid { flex: 1 1 100%; font-size: 11.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pr-evid .ico { width: 13px; height: 13px; }
.pr-evid-ok { color: var(--ok); display: inline-flex; align-items: center; gap: 3px; }
.pr-evid-falta { color: var(--warn); display: inline-flex; align-items: center; gap: 3px; }


/* --- Tablero: panel de filtros y resumen del cursor -----
   Los filtros viven en el panel lateral (.filtros-side, en app.css). De los
   chips solo queda el aviso de la lista de productos recortada. */
.tb-nota-filtro { margin: 2px 0 0; }
/* Calendario del panel, debajo de los atajos del mismo slicer. Una fecha por
   renglón: en 15.5rem, dos campos de fecha lado a lado se cortan a la mitad. */
.tb-fechas {
  display: grid; gap: 5px; padding: 7px 9px 9px;
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.tb-fechas label {
  display: grid; grid-template-columns: 2.1rem 1fr; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.tb-fechas input[type="date"] {
  font-family: var(--font-mono); font-size: 12.5px; padding: 6px 7px;
  min-width: 0; width: 100%; min-height: 32px;
  color: var(--text); background: var(--canvas);
  border: 1px solid var(--line); border-radius: 6px;
}
.tb-fechas input[type="date"]:focus {
  outline: none; border-color: var(--platinum);
}
/* El icono del calendario viene negro: sobre el tema oscuro hay que
   invertirlo, sobre papel no (quedaria blanco sobre blanco). */
.tb-fechas input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer;
}
:root[data-tema="oscuro"] .tb-fechas input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.tb-fechas input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.tb-chips { margin: 0 0 10px; }
.tb-tabla tr.tb-resto td { font-style: italic; color: var(--text-3); }

.tb-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 300px;
  padding: 10px 12px; border: 1px solid var(--line-hard); border-radius: 8px;
  background: var(--surface); box-shadow: 0 10px 28px rgba(17, 19, 24, .18);
  font-size: 12.5px; line-height: 1.35; }
.tb-tip[hidden] { display: none; }
.tb-tip.fijo { border-color: var(--brand-hi); }
.tb-tip-cab { font-weight: 600; }
.tb-tip-sub { color: var(--text-3); font-size: 11.5px; margin-top: 1px; }
.tb-tip-val { font-size: 19px; font-weight: 650; margin: 6px 0 5px;
  font-variant-numeric: tabular-nums; }
.tb-tip-fila { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.tb-tip-fila > span { color: var(--text-3); }
.tb-tip-fila > b { font-variant-numeric: tabular-nums; font-weight: 600; }
.tb-tip-fila.up > b { color: var(--ok); }
.tb-tip-fila.down > b { color: var(--danger-ink); }
.tb-tabla td[data-c]:hover { outline: 1.5px solid var(--brand-hi); outline-offset: -1px; cursor: help; }
@media print { .tb-tip, .tb-chips { display: none !important; } }

/* --- Tablero: filtrar desde el encabezado y las etiquetas de las tablas ---- */
.tb-lbl { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-hard); }
.tb-lbl:hover { color: var(--brand-hi); border-bottom-color: var(--brand-hi); }

.tb-menu { display: inline-block; }
.tb-menu > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 4px; white-space: nowrap; }
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-menu > summary .ico { width: 11px; height: 11px; opacity: .35; flex: none; }
.tb-menu > summary:hover { color: var(--brand-hi); }
.tb-menu > summary:hover .ico, .tb-menu[open] > summary .ico { opacity: 1; }
.tb-menu.on > summary { color: var(--brand-hi); }
.tb-menu.on > summary .ico { opacity: 1; }

/* Posicion fija: el popup vive dentro de una tabla con overflow-x y en flujo
   normal quedaria recortado. El <script> del final le pone left/top. */
.tb-menu-pop { position: fixed; z-index: 70; min-width: 170px; max-width: 320px;
  max-height: 320px; overflow-y: auto; padding: 4px;
  border: 1px solid var(--line-hard); border-radius: 8px; background: var(--surface);
  box-shadow: 0 10px 28px rgba(17, 19, 24, .18); }
.tb-menu-pop a { display: block; padding: 4px 9px; border-radius: 5px;
  font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text); text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tb-menu-pop a:hover { background: var(--surface-2); color: var(--brand-hi); }
.tb-menu-pop a.act { color: var(--brand-hi); font-weight: 600; }

.tb-menu-pop hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--line); }
.tb-menu-pop .tb-ord { display: block; width: 100%; padding: 4px 9px; border: 0;
  border-radius: 5px; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 12.5px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--text-2); white-space: nowrap; }
.tb-menu-pop .tb-ord:hover { background: var(--surface-2); color: var(--brand-hi); }

/* --- Tablero: ordenar por columna ----------------------------------------- */
.tb-ord-th { cursor: pointer; user-select: none; }
.tb-ord-th:hover { color: var(--brand-hi); }
.tb-tabla th[data-orden] { color: var(--brand-hi); }
.tb-tabla th[data-orden]::after { font-size: 9px; margin-left: 3px; }
.tb-tabla th[data-orden="desc"]::after { content: "▼"; }
.tb-tabla th[data-orden="asc"]::after { content: "▲"; }

@media print {
  .tb-menu > summary .ico { display: none; }
  .tb-menu-pop { display: none !important; }
  .tb-lbl { border-bottom: 0; }
}

/* ---------- Promotoria v2 (pv-) ----------
   Pantallas del mockup del cliente: supervisor (mis promotores -> contacto /
   metas / asistencias) y promotor (% de meta, checar, exhibicion). Movil
   primero, como .ph: se usan de pie en la tienda. En escritorio (jefe y
   supervisores en la oficina) el tope es el ancho "lg": a 720px la lista de
   promotores se cortaba con barra horizontal. */
.pv { max-width: 1200px; }
.pv-admin { max-width: none; }
.pv-lista { max-width: none; }
.pv-dest { max-width: none; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pv h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-miga { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.pv-miga a { color: var(--text-2); text-decoration: none; }
.pv-miga a:hover { color: var(--brand-hi); }
.pv-miga [aria-current] { color: var(--text); font-weight: 600; }
.pv-miga-sep .ico { width: 12px; height: 12px; }
.pv-vacio { display: flex; gap: 6px; align-items: flex-start; padding: 12px 14px; margin: 12px 0; border: 1px dashed var(--line-hard); border-radius: var(--r-lg); font-size: 13.5px; color: var(--text-2); }
.pv-vacio .ico { flex: 0 0 auto; margin-top: 2px; }

/* menu del promotor: tres tarjetas grandes */
.pv-tarjetas { display: grid; gap: 10px; margin-top: 16px; }
.pv-tarjeta { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 16px; min-height: var(--tap); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--text); }
.pv-tarjeta:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.pv-tarjeta-titulo { font-weight: 700; font-size: 16px; }
.pv-tarjeta .muted { font-size: 12.5px; }
.pv-tarjeta .ico { grid-column: 2; grid-row: 1 / span 2; color: var(--text-3); }

/* formularios */
.pv-form { display: grid; gap: 10px; }
.pv-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.pv-form .btn { justify-self: start; }
.pv-form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pv-form-inline label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); flex: 1 1 140px; }
.pv-in-hora { width: 8ch; font-family: var(--font-mono); }
.pv-in-usuario { min-width: 11ch; }
.pv-datos { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: 13.5px; }
.pv-datos dt { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono); align-self: center; }
.pv-datos dd { margin: 0; overflow-wrap: anywhere; }

/* mes */
.pv-mes { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; font-size: 15px; }

/* anillo de meta */
.pv-anillo { position: relative; width: 96px; height: 96px; }
.pv-anillo-xl { width: 150px; height: 150px; }
.pv-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv-anillo circle { fill: none; stroke-width: 9; }
.pv-anillo-fondo { stroke: var(--surface-2); }
.pv-anillo-valor { stroke: var(--brand); stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.pv-anillo-valor.pv-anillo-ok { stroke: var(--ok); }
.pv-anillo-txt { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 20px; }
.pv-anillo-xl .pv-anillo-txt { font-size: 30px; }
.pv-meta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pv-meta-anillo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-meta-rot { margin: 0; text-align: center; font-size: 12px; color: var(--text-2); line-height: 1.3; }
.pv-meta-cifras { display: grid; gap: 12px; flex: 1 1 200px; }
.pv-meta-cifras-fila { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.pv-cifra { display: block; font-family: var(--font-mono); font-size: 24px; font-weight: 600; line-height: 1.1; }
.pv-cifra-rot { display: block; font-size: 12px; color: var(--text-2); }

/* chips del semaforo */
.pv-chip { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); vertical-align: middle; }
.pv-chip-a_tiempo { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pv-chip-retardo { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.pv-chip-falto { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.pv-chip-pendiente { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-hi); }
.pv-chip-aprobado { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pv-chip-rechazado { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.pv-chip-contratado { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }

/* insignia de iniciales, celda de nombre en tablas de personas */
.pv-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; vertical-align: middle;
  margin-right: 6px; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: .02em; color: var(--brand-hi);
  background: var(--text-3);
}
.pv-tabla tbody tr:nth-child(6n+1) .pv-avatar { background: var(--ok); }
.pv-tabla tbody tr:nth-child(6n+2) .pv-avatar { background: var(--brand); color: var(--surface); }
.pv-tabla tbody tr:nth-child(6n+3) .pv-avatar { background: var(--warn); }
.pv-tabla tbody tr:nth-child(6n+4) .pv-avatar { background: var(--danger); }
.pv-tabla tbody tr:nth-child(6n+5) .pv-avatar { background: var(--gold); }
.pv-tabla tbody tr:nth-child(6n+6) .pv-avatar { background: var(--text-3); }
.pv-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pv-skills li { padding: 6px 10px; background: var(--surface-2); border-radius: var(--r-lg); font-size: 13.5px; }
.pv-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 13px; }
.pv-leyenda span { display: inline-flex; align-items: center; gap: 4px; }

/* semanas y dias */
.pv-semanas { display: grid; gap: 10px; }
.pv-semana-titulo { margin: 0 0 8px; font-weight: 700; }
.pv-dias { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-dia { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 66px; padding: 8px 6px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--text); background: var(--surface); }
.pv-dia:hover { border-color: var(--brand); }
.pv-dia-num { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.pv-dia-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.pv-dia-est { font-size: 10.5px; color: var(--text-2); }
.pv-dia-a_tiempo { border-left-color: var(--ok); }
.pv-dia-retardo { border-left-color: var(--warn); }
.pv-dia-falto { border-left-color: var(--danger); }
.pv-dia-pendiente { border-left-color: var(--brand); }
.pv-dia-hoy { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.pv-jornada { margin-top: 16px; }
.pv-jornada summary { cursor: pointer; }
.pv-jornada form { margin-top: 10px; }

/* dia */
.pv-eventos, .pv-exhib { display: grid; gap: 10px; }
.pv-corrige { margin-top: 8px; }
.pv-checar { width: 100%; min-height: var(--tap); font-size: 14px; margin-top: 10px; }

/* inicio del promotor */
.pv-yo { text-align: center; max-width: 480px; }
.pv-yo-titulo { justify-content: center; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin-bottom: 8px; }
.pv-yo-anillo { display: inline-block; text-decoration: none; }
.pv-yo-sub { margin: 6px 0 20px; }
.pv-yo-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 64px; font-size: 16px; }
.pv-yo-btn-sub { font-size: 11.5px; font-weight: 400; opacity: .85; text-transform: none; letter-spacing: 0; }
.pv-yo-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 0; text-align: left; }
.pv-yo-datos div { padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.pv-yo-datos dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pv-yo-datos dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.pv-yo-links { display: flex; justify-content: center; gap: 18px; margin-top: 18px; font-size: 13px; }
.pv-yo-links a { display: inline-flex; align-items: center; gap: 2px; }

/* tablas */
.pv-tabla td { padding: 14px 16px; }
.pv-tabla-chica { width: auto; }
.pv-tabla-form td { vertical-align: middle; }
.pv-tabla-form .pr-in, .pv-tabla-form .select-ctrl { min-width: 9ch; }
.pv-sel-tienda { max-width: 260px; }
.pv-fila-alta td { background: var(--surface-2); }
.pv-importar { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Un <select> mide, en Chromium, lo que mida su opcion mas larga, y como
   item de grid su min-width es auto: el de "Tienda" (todas las sucursales de
   todas las cadenas) ensanchaba el formulario y con el la pagina entera.
   minmax(0,1fr) deja que la columna se encoja y el select recorte. */
.pv-form { grid-template-columns: minmax(0, 1fr); }
.pv-form > *, .pv-form label { min-width: 0; }
/* max-width y no width: hay controles que se quieren angostos a proposito
   (.pv-in-hora son 8ch, .pv-tabla-form pone min-width 9ch en las celdas) y
   un width:100% aqui se los comeria. */
.pv-form select, .pv-form input, .pv-form textarea { max-width: 100%; box-sizing: border-box; }
.pv-form select { width: 100%; }
.pv-tabla-form select, .pv-form-inline select { width: auto; }   /* en celda y en linea manda el ancho del contenido */

/* Colchon: una tabla ancha SIN el wrapper .tabla-scroll (las de supervision)
   ensancharia la PAGINA entera, y a ancho de telefono el encabezado, las
   tarjetas y los formularios quedan cortados a la derecha. Con esto la tabla
   se desplaza sola y la pagina no. Dentro de .tabla-scroll manda su propia
   regla (`min-width: max-content`). */
@media (max-width: 639.98px) {
  :not(.tabla-scroll):not(.tb-scroll) > table.pv-tabla {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
}

/* Dos tablas de supervision caben enteras si se les quita una columna que es
   ayuda y no dato, y eso es mejor que dejarlas desplazarse: en el celular lo
   que queda fuera de cuadro es justo lo que el supervisor va a leer o a
   capturar.
     evaluacion  Rubro · Criterio · Peso · Cumplimiento · Puntos -> fuera el
                 criterio ("Minimo 80%"), que ademas ya esta en el manual.
     visitas     ...Duracion · Promotores · ACC -> fuera los dos conteos, que
                 se ven completos al abrir la visita. */
@media (max-width: 639.98px) {
  :not(.tabla-scroll):not(.tb-scroll) > table.pv-tabla-eval,
  :not(.tabla-scroll):not(.tb-scroll) > table.pv-tabla-visitas { display: table; overflow-x: visible; }
  /* thead/tbody y no `th:nth-child(2)` a secas: en el pie la segunda celda
     es el TOTAL (la primera es el <th colspan> con la palabra "Total"), y
     la regla suelta lo escondia justo a el. */
  .pv-tabla-eval thead th:nth-child(2), .pv-tabla-eval tbody td:nth-child(2) { display: none; }
  .pv-tabla-visitas th:nth-last-child(-n+2), .pv-tabla-visitas td:nth-last-child(-n+2) { display: none; }
  .pv-tabla-eval th, .pv-tabla-eval td,
  .pv-tabla-visitas th, .pv-tabla-visitas td { padding-left: 8px; padding-right: 8px; }
  .pv-tabla-eval tfoot th[colspan] { text-align: right; }
}

@media (max-width: 480px) {
  .pv-yo-datos { grid-template-columns: 1fr; }
  .pv-meta { flex-direction: column; align-items: stretch; }
  .pv-meta-anillo { align-self: center; }
  /* En columna el flex-basis de 200px se vuelve alto y estira las cifras. */
  .pv-meta-cifras { flex-basis: auto; }
}

/* ---------- Promotoria v2 · hoja tipo Excel del admin ---------- */
.pv-hojas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 14px 0 0; border-bottom: 1px solid var(--line-hard); }
.pv-hoja { border: 1px solid transparent; border-bottom: 0; background: none; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: -1px; }
.pv-hoja:hover { color: var(--text); background: var(--surface-2); }
.pv-hoja.activo { color: var(--brand-hi); background: var(--surface); border-color: var(--line-hard); border-bottom: 1px solid var(--surface); }
.pv-n { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.pv-buscar { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; margin-left: auto; padding: 4px 0; }
.pv-buscar .ico { color: var(--text-3); flex: 0 0 auto; }
.pv-buscar input { width: 100%; max-width: 420px; padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line-hard); border-radius: var(--r-md); background: var(--surface); }
.pv-importar-det summary { list-style: none; display: inline-flex; gap: 6px; }
.pv-importar-det summary::-webkit-details-marker { display: none; }
.pv-importar-det[open] .pv-importar { margin-top: 10px; }

.pv-grid { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--line-hard); border-top: 0; background: var(--surface); }
.pv-excel { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12.5px; }
.pv-excel th, .pv-excel td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; white-space: nowrap; vertical-align: middle; background: var(--surface); }
.pv-excel thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 8px 8px; }
.pv-excel .pv-fijo { position: sticky; left: 0; z-index: 2; box-shadow: 2px 0 0 var(--line); }
.pv-excel thead .pv-fijo { z-index: 4; }
.pv-excel td.pv-fijo { display: flex; align-items: center; gap: 4px; min-width: 220px; }
.pv-excel td.pv-fijo input { font-weight: 600; }
.pv-excel input:not([type=checkbox]), .pv-excel select { width: 100%; min-width: 8ch; border: 0; background: transparent; padding: 7px 8px; font: inherit; font-size: 12.5px; color: var(--text); outline: 0; }
.pv-excel input.mono, .pv-excel td.mono { font-family: var(--font-mono); font-size: 12px; }
.pv-excel input:focus, .pv-excel select:focus { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow: inset 0 0 0 2px var(--brand); }
.pv-excel select { max-width: 260px; text-overflow: ellipsis; }
.pv-excel td.pv-solo { padding: 7px 8px; color: var(--text-2); }
.pv-excel td.pv-c { text-align: center; padding: 0 10px; }
.pv-excel td.num { text-align: right; font-family: var(--font-mono); }
.pv-excel .pv-acc { padding: 3px 6px; position: sticky; right: 0; z-index: 2; box-shadow: -2px 0 0 var(--line); }
.pv-excel thead .pv-acc { z-index: 4; }
.pv-guardar { opacity: .45; }
.pv-fila:hover td { background: var(--surface-2); }
.pv-fila.pv-sucio td { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.pv-fila.pv-sucio .pv-guardar { opacity: 1; background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.pv-fila.pv-resalta td { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.pv-fila.pv-baja td { opacity: .55; }
.pv-fila.pv-alta td { background: var(--surface-2); }
.pv-fila.pv-alta input::placeholder { color: var(--text-3); font-style: italic; }
.pv-pend { color: var(--warn) !important; font-style: italic; }
.pv-ir { color: var(--text-3); padding: 0 6px; display: inline-flex; }
.pv-ir:hover { color: var(--brand-hi); }
.pv-ir .ico { width: 14px; height: 14px; }

/* ---------- Promotoria v2 · seguimiento del equipo ---------- */
/* Rotulo de bloque: el dia, la semana, el mes (2026-09-21). La pantalla
   hablaba de un dia en el titulo y luego mezclaba mes y semana sin avisar --
   la tarjeta de meta del mes junto a las del dia, el ranking del mes entre
   dos secciones del dia. Cada bloque lleva ahora su periodo escrito, con
   una linea que lo separa de verdad: un <h2> mas no alcanzaba, porque ya
   habia seis h2 en la pagina y todos se veian igual. */
.pv-bloque {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 34px 0 14px; padding-top: 13px; border-top: 2px solid var(--line-hard);
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-3);
}
.pv-bloque b { font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text-1); }
.pv-bloque .muted { letter-spacing: 0; text-transform: none; font-size: 12px; }
.pv-bloque:first-of-type { margin-top: 18px; }

.pv-seg { max-width: none; }
.pv-kpis { margin-top: 10px; }
/* Padding en vez de margen: no se colapsa con el margen del section-title
   de abajo, asi que la fila de graficas del dia siempre queda con aire
   real antes del siguiente titulo, sin importar el layout (una o dos
   columnas). */
.pv-seg-charts { padding-bottom: 20px; }
/* Tarjetas "spotlight" de /promotoria/destacados: mas aire y texto mas
   grande que un kpi-card normal, porque cada una cuenta una persona, no
   solo un numero. */
.pv-destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 14px 0 4px; }
.pv-destacado .kpi-label { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pv-destacado-persona { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 2px; }
.pv-destacado-dato { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--brand-hi); margin: 8px 0 0; }
/* Caja de canvas separada del <h3> del chart-wrap: si el alto fijo se le
   pone al chart-wrap completo (titulo + canvas), el canvas se desborda
   por abajo (el titulo ya se comio parte de esos pixeles) y el borde
   redondeado se ve "cortado". Aislando el canvas en su propia caja con
   su propio alto, el chart-wrap crece lo que haga falta y nunca se
   desborda. */
.pv-chart-box { position: relative; height: 220px; }
.pv-seg-tabla td { vertical-align: middle; padding: 8px 12px; }
.pv-seg-tabla tr.pv-seg-falto td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.pv-seg-tabla tr.pv-seg-retardo td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.pv-seg-tabla tr.pv-seg-a_tiempo td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.pv-seg-fotos { display: flex; gap: 4px; }
.pv-mini-foto { position: relative; display: block; }
.pv-mini-foto img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.pv-geo-ok { position: absolute; right: -3px; bottom: -3px; background: var(--ok); color: var(--on-brand); border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; }
.pv-geo-ok .ico { width: 10px; height: 10px; }
.pv-galeria { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 8px; }
.pv-foto { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pv-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pv-foto figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 12px; }
.pv-foto figcaption a { display: inline-flex; align-items: center; gap: 3px; }
.pv-foto figcaption .ico { width: 13px; height: 13px; }

/* ============================================================
   Control Tower de importaciones (/importaciones/control)

   La reja es Tabulator, ya tematizada en app.css; aqui solo van el
   semaforo de dias y el avance del checklist documental. El color NO se
   decide en el CSS: la clase se la pone el formateador de la columna
   leyendo `sem_*`, que calcula app/importaciones_control.py. Un solo
   lugar define que es verde.
   ============================================================ */
.sem-verde    { color: var(--ok); font-variant-numeric: tabular-nums; }
.sem-amarillo { color: var(--warn); font-variant-numeric: tabular-nums; }
.sem-rojo     { color: var(--danger-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
/* Etapa todavia corriendo: el numero sigue subiendo, se marca con punto. */
.sem-curso::after { content: " ·"; opacity: .6; }

/* Avance documental: 7 casillas resumidas a "5/7" con barrita. */
.ct-docs { display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.ct-docs-barra { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; min-width: 34px; }
.ct-docs-barra span { display: block; height: 100%; background: var(--platinum); }
.ct-docs.completo .ct-docs-barra span { background: var(--ok); }

/* Badge de retraso dentro de la reja: sutil, no un grito rojo. */
.ct-retraso {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 100px; white-space: nowrap;
  color: var(--warn);
  background: var(--warn-bg);
}

/* ============================================================
   Usuarios del portal (/usuarios)

   Dos bloques: el formulario de alta (una rejilla que se apila sola en
   celular) y el aviso de entrega, que es la UNICA vez que una contrasena
   en claro aparece en pantalla — por eso se ve distinto a todo lo demas:
   quien la ve tiene que darse cuenta de que hay que copiarla ahora.
   ============================================================ */
.usr-alta {
  display: grid; gap: 12px 16px; align-items: end; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.usr-alta label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
/* El campo de ejecutivo solo aparece con perfil=cobranza, y lo esconde el
   atributo `hidden`. Sin esta linea no se esconderia: `.usr-alta label` le
   gana en especificidad a la regla [hidden] del navegador. */
.usr-alta label[hidden] { display: none; }
.usr-alta .btn { justify-self: start; }
/* La ayuda del perfil ocupa su propio renglon completo, debajo de todo. */
.usr-ayuda { grid-column: 1 / -1; margin: 0; min-height: 1.2em; }

.usr-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.usr-acciones form { margin: 0; }
.usr-nota { max-width: 74ch; margin-top: 18px; }
/* Una cuenta dada de baja sigue en la lista (para reactivarla) pero no
   compite visualmente con las que si pueden entrar. */
.fila-baja { opacity: .55; }

.ent-caja { border-color: var(--ok); margin: 14px 0 4px; }
.ent-tit { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 600; }
.ent-tit .ico { width: 15px; height: 15px; color: var(--ok); }
.ent-datos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 8px; }
.ent-datos div { display: flex; flex-direction: column; gap: 2px; }
.ent-datos span { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.ent-datos b { font-size: 17px; }

/* ============================================================
   Landing pública de reclutamiento (/promotoria/reclutamiento/unete)
   Sin nav: la pagina es su propio marco. Mobile-first: el link llega por
   WhatsApp y se abre en un celular de 390 px. Solo tokens, para que el
   tema claro se vea igual de bien.
   ============================================================ */
.un { flex: 1; min-width: 0; max-width: 760px; width: 100%; margin: 0 auto; padding: 28px var(--gutter) 40px; }
.un-hero { padding: 24px 0 32px; border-bottom: 1px solid var(--line); animation: fade-up .6s both; }
.un-marca { display: block; width: 36px; height: 36px; color: var(--platinum); margin: 0 0 18px; }
.un-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--platinum-lo); margin: 0 0 10px;
}
.un-hero h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(28px, 6vw, 44px); line-height: 1.08; margin: 0 0 14px; color: var(--text);
}
.un-lead { font-size: 15.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 22px; max-width: 54ch; }
.un-cta { min-height: 44px; }
.un-seccion { padding: 30px 0 6px; }
.un-h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(20px, 3.4vw, 26px); margin: 0 0 16px; color: var(--text);
}
.un-nota { margin: -8px 0 14px; font-size: 13.5px; }

/* tarjetas "que hacemos": una columna en celular, tres en escritorio */
.un-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.un-card { margin: 0; padding: 16px; }
.un-card-ico { display: inline-flex; color: var(--platinum); margin-bottom: 10px; }
.un-card-ico .ico { width: 22px; height: 22px; }
.un-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.un-card p { margin: 0; font-size: 13.5px; line-height: 1.5; }

/* chips de cadenas */
.un-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.un-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 13px; color: var(--text); white-space: nowrap;
}
.un-chip .ico { width: 14px; height: 14px; color: var(--text-3); }

/* pasos numerados */
.un-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.un-paso { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 16px; }
.un-paso strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--text); }
.un-paso p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.un-paso-num {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--void); background: var(--platinum); border-radius: 50%;
}

/* formulario: hereda .ph-card/.pv-form; aqui solo lo que cambia en publico */
.un-form { padding: 18px 16px; scroll-margin-top: 16px; }
.un-form .pr-in { min-height: 44px; font-size: 16px; }  /* 16px: iOS no hace zoom al enfocar */
.un-privacidad { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; margin: 6px 0 0; }
.un-privacidad .ico { flex: 0 0 auto; margin-top: 2px; }
.un-enviar { min-height: 44px; }
@media (max-width: 639.98px) {
  .un-form .btn { justify-self: stretch; justify-content: center; }
  .un-cta { width: 100%; justify-content: center; }
}

/* confirmacion */
.un-listo { display: flex; gap: 14px; align-items: flex-start; padding: 20px 18px; border-color: var(--ok); }
.un-listo-ico { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.un-listo-titulo { font-size: 17px; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.un-listo p { margin: 0; }

/* pie */
.un-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.un-pie a { color: var(--text-3); text-decoration: none; }
.un-pie a:hover { color: var(--text); }

/* Aviso de datos de ejemplo del Control Tower. Deliberadamente distinto al
   resto de la pagina: tiene que interrumpir la lectura, porque confundir un
   embarque inventado con uno real es comprometerle una fecha a un cliente. */
.ct-demo {
  border: 1px solid var(--warn); border-left-width: 4px; border-radius: var(--r-lg);
  background: var(--warn-bg); padding: 12px 16px; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px; max-width: 92ch;
}
.ct-demo p { margin: 0; font-size: 13.5px; line-height: 1.5; }
/* El texto va dentro de un <span>: si no, cada trozo (la negrita, la coma)
   se vuelve una pieza del flex y le salen huecos de 7px alrededor. */
.ct-demo-tit { display: flex; align-items: baseline; gap: 7px; font-weight: 600; font-size: 14.5px; }
.ct-demo-tit span { font-weight: 600; }
.ct-demo-tit .ico { width: 16px; height: 16px; color: var(--warn); flex: none; }
.ct-demo form { margin: 4px 0 0; }
/* La invitacion a cargarlos no es una advertencia: no grita. */
.ct-demo-vacio { border-color: var(--line); border-left-color: var(--platinum); background: var(--surface); }
.ct-demo-vacio .ct-demo-tit .ico { color: var(--text-3); }

/* Alta de embarque desde la propia sabana. */
.ct-nuevo {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px 16px; margin: 0 0 14px;
}
.ct-nuevo label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ct-nuevo .ct-nuevo-ayuda { flex-basis: 100%; margin: 0; }
/* El renglon recien creado: se le va el color solo, sin dejar nada pegado. */
.ct-fila-nueva { animation: ct-destello 2.4s ease-out 1; }
@keyframes ct-destello {
  0%, 55% { background: var(--warn-bg); }
  100%    { background: transparent; }
}

/* ============================================================
   Ventas: seguimiento de clientes (/ventas)

   La barra no es adorno: el cliente pidio explicitamente poder decir "este
   va en 30, este en 80" de un vistazo, sin leer numeros. Por eso la barra
   manda y el porcentaje va al lado, no al reves.
   ============================================================ */
.ven-barra { display: inline-flex; align-items: center; gap: 9px; min-width: 150px; }
.ven-barra-fondo {
  flex: 1; height: 7px; border-radius: 100px; background: var(--surface-3);
  overflow: hidden; min-width: 72px;
}
.ven-barra-fondo > span { display: block; height: 100%; background: var(--platinum); transition: width .3s; }
.ven-barra b { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
/* El color dice en que banda va, no si esta bien o mal: nadie decide nada
   con esto, es para leer la tabla rapido. */
.ven-bajo     .ven-barra-fondo > span { background: var(--text-3); }
.ven-medio    .ven-barra-fondo > span { background: var(--warn); }
.ven-alto     .ven-barra-fondo > span { background: var(--brand); }
.ven-completo .ven-barra-fondo > span { background: var(--ok); }
.ven-col-barra { min-width: 132px; }
/* Dentro de la tabla la barra se encoge: ahi el dato es el porcentaje que
   va escrito al lado, la barra solo lo hace comparable de un vistazo. */
.lista .ven-barra { min-width: 92px; gap: 6px; }

/* La tabla de clientes cabe en una pantalla (2026-09-21). Antes habia que
   irse de lado para ver el avance, que es lo que se viene a ver: la columna
   congelada tapaba las de en medio al desplazar y el renglon se leia partido.
   Se aprieta lo que no es dato -- separaciones y anchos de mas -- en vez de
   esconder columnas detras de un boton. */
.ven-pasos-chico {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  margin-left: 7px; font-variant-numeric: tabular-nums;
}
.ven-fecha { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.lista.tabla-orden td, .lista.tabla-orden th { padding-left: 10px; padding-right: 10px; }
.ven-td-vend { min-width: 140px; }
.ven-td-vend .ven-asignar { max-width: 150px; }

.ven-tarjetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); margin-bottom: 6px; }
.ven-tarjeta { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.ven-tarjeta-nom { margin: 0; font-weight: 600; }
.ven-tarjeta .ven-barra { margin-top: 4px; }
.ven-sin { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }

.ven-alta {
  display: grid; gap: 12px 16px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}
.ven-alta label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ven-alta .btn { justify-self: start; }

.ven-resumen { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 4px 0 8px; }
.ven-resumen-num {
  font-family: var(--font-display); font-size: clamp(38px, 7vw, 56px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1;
}
.ven-resumen-barra { flex: 1; min-width: 220px; }
.ven-resumen-barra .ven-barra { width: 100%; }
.ven-resumen-barra .ven-barra-fondo { height: 10px; }
.ven-bajo.ven-resumen-num     { color: var(--text-3); }
.ven-medio.ven-resumen-num    { color: var(--warn); }
.ven-alto.ven-resumen-num     { color: var(--brand); }
.ven-completo.ven-resumen-num { color: var(--ok); }

/* El checklist. Casilla grande: se pica desde el celular, en la calle. */
.ven-pasos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ven-paso {
  display: flex; align-items: center; gap: 13px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.ven-paso + .ven-paso { margin-top: 4px; }
.ven-paso form { margin: 0; }
.ven-check {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--surface-2); cursor: pointer; display: grid; place-items: center;
  color: var(--on-brand); padding: 0; flex: none;
}
.ven-check:hover { border-color: var(--platinum); }
.ven-check .ico { width: 17px; height: 17px; }
.ven-paso.hecho .ven-check { background: var(--ok); border-color: var(--ok); }
.ven-paso.hecho .ven-paso-nom { color: var(--text-2); }
.ven-paso-txt { flex: 1; min-width: 0; }
.ven-paso-nom { margin: 0; font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
.ven-paso-num {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; flex: none;
}
.ven-paso-pct { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); flex: none; }
.ven-paso.hecho .ven-paso-pct { color: var(--ok); }

/* Observaciones por paso (2026-09-21). El renglon del checklist se estira
   cuando se abre una: la casilla y el porcentaje se van ARRIBA en vez de
   quedarse al centro de un bloque alto, que los dejaba flotando a media
   altura sin relacion visible con el nombre del paso. */
.ven-paso:has(.ven-nota[open]) { align-items: flex-start; }
.ven-paso:has(.ven-nota[open]) .ven-paso-pct { margin-top: 7px; }
.ven-nota { margin-top: 6px; }
.ven-nota summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12.5px; color: var(--text-3); list-style: none; width: fit-content;
}
.ven-nota summary::-webkit-details-marker { display: none; }
.ven-nota summary:hover { color: var(--text-2); }
.ven-nota summary .ico { width: 13px; height: 13px; flex: none; }
.ven-nota[open] summary { margin-bottom: 6px; }
.ven-nota textarea { width: 100%; resize: vertical; font-size: 13.5px; line-height: 1.5; }
.ven-nota-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* Datos del cliente, plegados arriba de los pasos. */
.ven-datos { margin: 4px 0 14px; }
.ven-datos summary { display: inline-flex; cursor: pointer; list-style: none; }
.ven-datos summary::-webkit-details-marker { display: none; }
.ven-datos .ven-alta { margin-top: 10px; }

/* ---------------------------------------------------------------- seguimiento
   El tablero marca x cadena. Es una cuadricula ancha a proposito: es la
   forma en que esta gente ya lee su trabajo en Excel, y cambiarsela por una
   lista vertical seria pedirles que aprendan a leer su propio tablero. La
   primera columna va congelada (tabla-scroll--fija1) para que el nombre de
   la actividad no se pierda al recorrer las cadenas. */
.seg-barra { align-items: center; }
.seg-mes { font-size: 15px; min-width: 130px; text-align: center; }
.seg-tablero { font-size: 13px; }
.seg-tablero th, .seg-tablero td { padding: 7px 10px; vertical-align: middle; }
.seg-col { min-width: 116px; }
.seg-col a { font-weight: 600; }
.seg-sub { display: block; font-weight: 400; font-size: 10.5px; color: var(--text-3);
  text-transform: none; letter-spacing: 0; }
.seg-act { white-space: normal; }
.seg-num {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; margin-right: 6px;
}
.seg-peso { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-left: 6px; }
.seg-celda { text-align: center; }
.seg-celda form { margin: 0; display: inline-flex; }
/* Renglones que NO son del checklist: se distinguen para que la cuadricula
   no se lea como veinte palomitas seguidas. */
.seg-cabeza td { background: var(--surface-2); font-size: 12px; color: var(--text-2); }
.seg-total td { border-top: 1px solid var(--line-hard); font-weight: 600; }
.seg-semana td { font-size: 12px; color: var(--text-2); vertical-align: top; }
.seg-nota { white-space: normal; max-width: 220px; }
.seg-check {
  width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--line);
  background: var(--surface-2); cursor: pointer; display: inline-grid; place-items: center;
  color: var(--on-brand); padding: 0;
}
.seg-check:hover { border-color: var(--platinum); }
.seg-check.hecho { background: var(--ok); border-color: var(--ok); }
.seg-check .ico { width: 15px; height: 15px; }
.seg-solo-lectura { cursor: default; }
.seg-peso-in { width: 72px; text-align: right; }
.seg-mes-form { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.seg-semanas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 10px; }
.seg-semana-card textarea { width: 100%; resize: vertical; font-size: 13px; margin-top: 6px; }

/* Telefono con WhatsApp y temperatura del prospecto (2026-09-22). */
.ven-td-tel { white-space: nowrap; }
.ven-wa { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 12.5px; text-decoration: none; color: var(--ok); }
.ven-wa:hover { text-decoration: underline; }
.ven-wa .ico { width: 14px; height: 14px; flex: none; }
.ven-temp {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
}
.ven-temp-caliente { background: color-mix(in srgb, var(--danger-ink) 14%, transparent); color: var(--danger-ink); }
.ven-temp-tibio    { background: var(--warn-bg); color: var(--warn); }
.ven-temp-frio     { background: var(--surface-3); color: var(--text-3); }
.ven-temp-dias { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px;
  font-family: var(--font-mono); }

/* Tarjeta de KPI que se puede picar (cobranza, 2026-09-23). Es un <button>
   y no un <div> con onclick: asi se alcanza con el teclado y el lector de
   pantalla la anuncia como lo que es. */
.kpi-picable {
  cursor: pointer; text-align: left; width: 100%; font: inherit;
  border: 1px solid var(--line); transition: border-color .14s, transform .14s;
}
.kpi-picable:hover { border-color: var(--platinum); transform: translateY(-1px); }
.kpi-picable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kpi-modal-tabla { max-height: 46vh; margin: 8px 0; }
/* La ventana de facturas: el ultimo nivel, cuando ya se dejo de comparar. */
#fac-modal { padding: 18px 20px 20px; width: min(720px, calc(100vw - 32px)); }
#fac-modal .lista { margin-top: 0; font-size: 13px; }
#fac-modal .lista td, #fac-modal .lista th { padding: 5px 10px; }
#fac-modal .tm-modal-pie { margin-top: 10px; }

/* Las tarjetas y, al picar una, su desglose AL LADO: las tarjetas se
   recorren a la izquierda y la que se pico se sigue viendo junto a lo que
   la explica. Un popup tapaba justamente eso. */
.kpi-zona { display: grid; gap: 14px; grid-template-columns: 1fr; }
.kpi-zona.con-panel { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
@media (max-width: 1023.98px) { .kpi-zona.con-panel { grid-template-columns: 1fr; } }
.kpi-card.kpi-abierta { border-color: var(--platinum); box-shadow: var(--shadow-sm); }
.kpi-panel { background: var(--surface); background-image: var(--facet);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; min-width: 0; animation: fade-up .3s both; }
.kpi-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-panel-tit { margin: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.kpi-panel-sub { margin: 2px 0 8px; font-size: 12.5px; color: var(--text-2); }
.kpi-panel-lista { display: flex; flex-direction: column; overflow-y: auto; max-height: 340px; }
.kpi-panel-pie { margin: 8px 0 0; font-size: 11.5px; color: var(--text-3); }
/* Cada cliente del desglose se pica y abre sus facturas. */
.kpi-cli { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer;
  padding: 6px 4px; text-align: left; font: inherit; color: inherit; border-radius: 6px; }
.kpi-cli:hover { background: var(--surface-2); }
.kpi-cli:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.kpi-cli-n { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-cli-m { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kpi-cli-p { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.kpi-cli-a { color: var(--text-3); opacity: .8; }
.tb-mal { color: var(--danger-ink); }

/* ----------------------------------------------------------------- transporte
   Una tarjeta por destino en vez de una tabla gigante: la pregunta siempre
   es de UN destino ("¿quien me lleva a Monterrey?"), y una cuadricula de 151
   renglones por doce columnas es justo lo que hoy obliga a leer a ojo. */
.tr-destino { margin: 10px 0; padding: 12px 14px; }
.tr-destino-top { display: flex; align-items: baseline; gap: 10px; }
.tr-destino-top h2 { margin: 0; font-size: 16px; }
.tr-tabla { margin-top: 6px; font-size: 13px; }
.tr-tabla td, .tr-tabla th { padding: 5px 10px; }
.tr-disp {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-3);
}
.tr-alta { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.tr-nuevo { background: var(--warn-bg); color: var(--warn); }
.tr-baja { background: var(--surface-3); color: var(--text-3); }

/* Informe de la importacion de clientes. */
.ven-informe { border-color: var(--ok); margin: 12px 0; }
.ven-informe-tit { display: flex; align-items: baseline; gap: 7px; margin: 0 0 8px; font-weight: 600; }
.ven-informe-tit .ico { width: 15px; height: 15px; color: var(--ok); flex: none; }
.ven-informe-lista { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.ven-importar { margin: 0 0 14px; }
.ven-importar summary { display: inline-flex; cursor: pointer; list-style: none; }
.ven-importar summary::-webkit-details-marker { display: none; }
.ven-importar .ven-alta { margin-top: 10px; }
.ven-calif { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Reparto de cartera desde la tabla. El selector se ve como texto hasta que
   se le acerca el cursor: una columna de 99 cajas grises tapaba los nombres,
   que es lo que se viene a leer. */
.ven-td-vend { min-width: 172px; }
.ven-asignar {
  width: 100%; max-width: 190px; padding: 4px 6px; font: inherit; font-size: 13px;
  color: var(--text); background: transparent; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer; appearance: none;
}
.ven-asignar:hover, .ven-asignar:focus { border-color: var(--line); background: var(--surface-2); }
.ven-asignar:disabled { opacity: .5; cursor: progress; }
/* Sin dueño se sigue viendo como la etiqueta ambar de antes: es lo que el
   gerente busca con la vista cuando entra a repartir. */
.ven-asignar.sin-dueno {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.ven-guardado { animation: ven-destello 1.6s ease-out 1; }
@keyframes ven-destello {
  0%, 40% { background: color-mix(in srgb, var(--ok) 16%, transparent); }
  100%    { background: transparent; }
}
.ven-aviso {
  position: sticky; top: 8px; z-index: 5; margin: 0 0 10px; padding: 8px 14px;
  border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; width: fit-content;
}
.ven-aviso.malo { color: var(--danger-ink); border-color: var(--danger-ink); }

/* ============================================================
   Teams: pendientes del equipo (/teams)

   Lista y no tabla: un pendiente es una frase con gente y una fecha, no
   ocho columnas. La frase se lee de corrido; una tabla obligaria a cruzar
   la vista entre celdas para entender una sola tarea.
   ============================================================ */
.tm-lista { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.tm-item-txt { flex: 1; min-width: 0; }
.tm-item-tit { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; }
.tm-item-tit a { color: inherit; text-decoration: none; }
.tm-item-tit a:hover { text-decoration: underline; }
.tm-item p.muted { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tm-item form { margin: 0; }
/* Lo cerrado sigue en la lista pero no compite con lo que falta por hacer. */
.tm-cerrado { opacity: .5; }
.tm-cerrado .tm-item-tit { text-decoration: line-through; }
.tm-vencido { border-color: color-mix(in srgb, var(--danger-ink) 45%, transparent); }

/* La prioridad es una barrita al borde, no otra etiqueta mas que leer. */
.tm-prio { width: 4px; align-self: stretch; border-radius: 3px; flex: none; background: var(--line); }
.tm-prio-alta  { background: var(--danger-ink); }
.tm-prio-media { background: var(--warn); }
.tm-prio-baja  { background: var(--line); }

.tm-estado {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--text-3); white-space: nowrap;
}
.tm-abierto   { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.tm-en_curso  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.tm-hecho     { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.tm-cancelado { color: var(--text-3); }
.tm-tarde { color: var(--danger-ink); }
.tm-hoy { color: var(--warn); }

/* Barra de arriba: el boton, el resumen y los filtros en un solo renglon.
   El titulo y la bajada se fueron -- el menu ya dice donde estas, y ocupaban
   el primer tercio de la pantalla para repetirlo. */
.tm-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.tm-barra-sep { flex: 1; }
.tm-resumen { margin: 0; font-size: 13px; color: var(--text-2); }
.tm-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.tm-filtros select { font-size: 12.5px; padding: 4px 8px; }

/* Ventana emergente del alta. Nativa: fondo, foco y Escape sin libreria. */
.tm-modal {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  color: var(--text); padding: 0; width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px); overflow: auto;
}
.tm-modal::backdrop { background: rgba(0, 0, 0, .55); }
.tm-modal .tm-form { padding: 18px 20px 20px; margin: 0; }
.tm-modal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tm-modal-top h2 { margin: 0; font-size: 17px; }
.tm-modal-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.tm-cerrar { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--text-3); display: inline-flex; }
.tm-cerrar:hover { color: var(--text); }
.tm-cerrar .ico { width: 18px; height: 18px; }
.tm-form {
  display: grid; gap: 12px 16px; align-items: end; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tm-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.tm-form .tm-ancho { grid-column: 1 / -1; }
.tm-form textarea { resize: vertical; font: inherit; }
.tm-form .btn { justify-self: start; }
.tm-check { flex-direction: row !important; align-items: center; gap: 8px !important; }

.tm-avisos { border-color: var(--brand); margin: 12px 0; }
.tm-avisos-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tm-avisos-tit { display: flex; align-items: baseline; gap: 7px; margin: 0; font-weight: 600; }
.tm-avisos-tit .ico { width: 15px; height: 15px; color: var(--brand); flex: none; }
.tm-avisos-lista { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.8; }
.tm-avisos-top form { margin: 0; }

.tm-detalle { white-space: pre-wrap; margin: 4px 0 14px; max-width: 78ch; line-height: 1.6; }
.tm-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tm-acciones form { margin: 0; }

.tm-gente { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tm-persona {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 100px; font-size: 13px;
}
.tm-persona .ico { width: 14px; height: 14px; color: var(--text-3); }
.tm-persona em { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); font-style: normal; }
.tm-resp { border-color: var(--platinum); }
.tm-persona form { margin: 0; display: inline-flex; }
.tm-quitar { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-3); display: inline-flex; }
.tm-quitar .ico { width: 12px; height: 12px; }
.tm-quitar:hover { color: var(--danger-ink); }
.tm-invitar { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

.tm-coments { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tm-coments li { border-left: 2px solid var(--line); padding: 2px 0 2px 12px; }
.tm-coment-quien { margin: 0; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.tm-coment-txt { margin: 2px 0 0; white-space: pre-wrap; line-height: 1.55; max-width: 78ch; }
.tm-comentar { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.tm-comentar textarea { flex: 1; min-width: 240px; resize: vertical; font: inherit; }

.tm-editar { margin-top: 18px; }
.tm-editar summary { display: inline-flex; cursor: pointer; list-style: none; }
.tm-editar summary::-webkit-details-marker { display: none; }
.tm-historial { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.9; }
.tm-historial .muted { font-family: var(--font-mono); font-size: 11.5px; margin-right: 8px; }
.tm-ayuda { margin: 12px 0; }
.tm-ayuda ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; font-size: 13.5px; max-width: 80ch; }
.tm-nota { max-width: 80ch; margin-top: 16px; }
/* El correo se captura en el propio renglon de la lista de usuarios. */
.usr-campo[type="email"] { min-width: 170px; max-width: 220px; }
.usr-perfil { margin: 0; }
.usr-perfil select { font-size: 12.5px; padding: 3px 6px; min-width: 120px; }

/* ============================================================
   Organigrama (/usuarios/organigrama)

   Arbol vertical con sangria, no cajas conectadas con lineas: con 21
   cuentas y cuatro niveles, el diagrama clasico se sale de la pantalla y
   obliga a hacer zoom para leer un nombre. La sangria se lee de corrido y
   funciona igual en celular.
   ============================================================ */
.usr-vistas { margin: 0 0 4px; }
.og-scroll { overflow-x: auto; padding: 4px 2px 8px; }
.og-arbol, .og-hijos { list-style: none; margin: 0; padding: 0; }
.og-hijos { margin-left: 26px; padding-left: 18px; border-left: 1px solid var(--line); }
.og-nodo { position: relative; margin: 6px 0; }
/* La rayita que une cada caja con la linea vertical de su nivel. */
.og-hijos > .og-nodo::before {
  content: ""; position: absolute; left: -18px; top: 20px;
  width: 14px; height: 1px; background: var(--line);
}
.og-caja {
  display: inline-block; min-width: 190px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.og-nombre { margin: 0; font-weight: 600; font-size: 14px; }
.og-puesto { margin: 1px 0 0; font-size: 12.5px; color: var(--text-2); }
.og-meta { margin: 5px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.og-perfil {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 100px; padding: 1px 7px;
}
.og-equipo { font-size: 11.5px; color: var(--text-3); }
.og-ciclo > .og-caja { border-color: var(--danger-ink); }
.og-alerta { margin: 6px 0 0; font-size: 12px; color: var(--danger-ink); display: flex; gap: 5px; align-items: center; }
.og-alerta .ico { width: 13px; height: 13px; flex: none; }
/* Puesto y jefe, cada uno en su celda. Anchos acotados: sin esto, un
   desplegable con veintiun nombres estira la columna hasta empujar las de
   al lado fuera de la pantalla. */
.usr-org { max-width: 190px; }
.usr-org input, .usr-org select {
  width: 100%; max-width: 180px; font-size: 12.5px; padding: 4px 8px;
}
.usr-org select { text-overflow: ellipsis; }

/* Cuadrante DACA: etiqueta corta al borde del renglon. El color agrupa de un
   vistazo sin obligar a leer "estratégico y urgente" en cada fila. */
.tm-prio {
  width: auto; align-self: flex-start; flex: none; padding: 2px 7px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--line); color: var(--text-3); background: transparent;
}
.tm-q-Q1 > .tm-prio, .tm-prio.tm-q-Q1 { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger-ink) 50%, transparent); }
.tm-q-Q2 > .tm-prio, .tm-prio.tm-q-Q2 { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.tm-q-Q3 > .tm-prio, .tm-prio.tm-q-Q3 { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.tm-q-Q4 > .tm-prio, .tm-prio.tm-q-Q4 { color: var(--text-3); }

/* Avatares con iniciales: tres colaboradores escritos largo se comen el
   titulo, que es lo unico que hay que leer de un vistazo. */
.tm-avatares { display: inline-flex; gap: 3px; }
.tm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--surface-3); color: var(--text-2);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0;
}
.tm-fecha-chip {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 7px;
  border-radius: 100px; background: var(--surface-2);
}
.tm-fecha-chip.tm-tarde { color: var(--danger-ink); background: var(--danger-bg, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-ink) 40%, transparent); }
.tm-fecha-chip.tm-hoy { color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }

.tm-item-acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.tm-item-acciones form { margin: 0; }
.tm-estado-sel { font-size: 11.5px; padding: 3px 6px; border-radius: 6px; max-width: 120px; }
.tm-mover { display: inline-flex; gap: 3px; }
.tm-mover-b {
  font-family: var(--font-mono); font-size: 10.5px; padding: 3px 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--text-3);
}
.tm-mover-b:hover { border-color: var(--platinum); color: var(--text); }
.tm-mover-b:disabled { opacity: .4; cursor: progress; }
.tm-borrar { background: none; border: 0; padding: 3px; cursor: pointer; color: var(--text-3); display: inline-flex; }
.tm-borrar:hover { color: var(--danger-ink); }
.tm-borrar .ico { width: 14px; height: 14px; }
.tm-chevron { background: none; border: 0; padding: 0 2px 0 0; cursor: pointer; color: var(--text-3); display: inline-flex; }
.tm-chevron .ico { width: 14px; height: 14px; transition: transform .15s; }
.tm-chevron.abierto .ico { transform: rotate(180deg); }
.tm-detalle-inline { margin-top: 8px; padding: 9px 12px; border-left: 2px solid var(--line); }
.tm-detalle-inline p { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.55; }

/* Colaboradores como casillas: se ve a todo el equipo de un golpe, sin
   scroll y sin ctrl+clic, que nadie sabe que hay que hacer. */
.tm-colabs { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px; margin: 0; }
.tm-colabs summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  cursor: pointer; font-size: 13px; list-style: none;
}
.tm-colabs summary::-webkit-details-marker { display: none; }
.tm-colabs summary::after { content: "▾"; color: var(--text-3); font-size: 11px; }
.tm-colabs[open] summary::after { content: "▴"; }
.tm-colabs-cuenta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 100px; padding: 2px 9px; margin-left: auto;
}
.tm-colabs-buscar { display: block; margin: 10px 0 8px; }
.tm-colabs-buscar input { width: 100%; font-size: 13px; }
.tm-colabs-rejilla {
  display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  max-height: 210px; overflow-y: auto;
}
.tm-colab { display: flex; flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 13px; cursor: pointer; }

.tm-fechas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.tm-fechas button {
  font-size: 11px; padding: 3px 9px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
}
.tm-fechas button:hover, .tm-fechas button.puesto { border-color: var(--platinum); color: var(--text); }

.tm-checklist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tm-checklist li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.tm-checklist li form { margin: 0; }
.tm-checklist li > span { flex: 1; font-size: 13.5px; }
.tm-checklist li.hecho > span { color: var(--text-3); text-decoration: line-through; }
/* Pista junto al campo de producto: sin ella nadie sabe que ese cuadro busca. */
.fi-pista { font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.ven-ancho { grid-column: 1 / -1; }
.tm-modal .ven-alta { padding: 18px 20px 20px; margin: 0; }
.ct-ancho { grid-column: 1 / -1; }
.tm-modal .ct-nuevo { display: grid; gap: 12px 16px; align-items: end; padding: 18px 20px 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; background: none; border: 0; }
.tm-barra .ctrl-label { font-size: 11px; }
.tm-barra select { font-size: 12.5px; padding: 4px 8px; }
.tm-barra #ct-estado { margin: 0; }

/* Resumen del equipo (/teams/equipo): el organigrama con lo que trae cada
   quien, y al lado lo ultimo que se movio en la empresa. */
.te-columnas { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 899.98px) { .te-columnas { grid-template-columns: 1fr; } }
.te-caja { min-width: 260px; }
.te-cifras { margin: 4px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.te-cifras a { color: inherit; text-decoration: none; }
.te-cifras a:hover { text-decoration: underline; }
.te-q1 { color: var(--danger-ink); }
.te-ok { color: var(--ok); }
.te-rojo { border-color: color-mix(in srgb, var(--danger-ink) 45%, transparent); }
.te-reciente { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.te-reciente li { display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.te-cuando { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); flex: none; }
.te-quien { font-weight: 600; }
/* Ligar "quién escaneó" con la cuenta del vendedor. */
.ven-ligar { border-color: var(--warn); margin: 12px 0; }
.ven-ligar-auto { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; }
.ven-ligar-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ven-ligar-lista li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.ven-ligar-lista form { display: flex; gap: 6px; align-items: center; margin: 0 0 0 auto; }
.ven-ligar-lista select { font-size: 12.5px; padding: 4px 8px; min-width: 150px; }
.ven-ligar-nom { font-weight: 600; font-size: 13.5px; }
/* La tarjeta de cada persona es un boton: abre sus pendientes a la derecha. */
.te-caja { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.te-caja:hover { border-color: var(--platinum); }
.te-caja.activa { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.te-derecha { position: sticky; top: 12px; align-self: start; }
.te-pend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.te-pend-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; }
.te-pend-item a { color: inherit; text-decoration: none; flex: 1; min-width: 140px; }
.te-pend-item a:hover { text-decoration: underline; }
.te-derecha .section-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ============================================================
   Portada (/inicio)

   Una tarjeta por modulo, cada una con UNA cifra grande y el detalle
   debajo. La cifra grande es la que contesta "como vamos" desde la puerta;
   si todas las tarjetas pesaran igual, la portada seria una lista de datos
   en vez de un tablero.
   ============================================================ */
.in-rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.in-card { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.in-ancha { grid-column: span 2; }
@media (max-width: 719.98px) { .in-ancha { grid-column: span 1; } }
.in-tit { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 13px;
  font-weight: 600; letter-spacing: .02em; }
.in-tit .ico { width: 15px; height: 15px; color: var(--text-3); }
.in-tit a { color: var(--text-2); text-decoration: none; }
.in-tit a:hover { color: var(--text); text-decoration: underline; }
.in-cifra {
  margin: 0; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.in-cifra span { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.in-sube { color: var(--ok); font-size: 14px !important; }
.in-baja { color: var(--danger-ink); font-size: 14px !important; }
.in-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.in-etiqueta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-top: 10px; }
.in-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.in-lista li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
  padding: 3px 0; border-bottom: 1px solid var(--line); }
.in-lista li:last-child { border-bottom: 0; }
.in-lista li span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-lista li b { font-variant-numeric: tabular-nums; flex: none; }
.in-reciente { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.in-reciente li { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.in-reciente a { color: var(--text-2); }
.in-dos { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 719.98px) { .in-dos { grid-template-columns: 1fr; } }
/* Una tarjeta con algo que atender se nota sin leerla. */
.in-alerta { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.in-vacio { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }

/* Una cifra que se explica sola: se pica y sale de quien es. Es un
   <details>, no un tooltip: el clic abre Y cierra, el teclado lo alcanza y
   en tableta funciona igual (donde no hay "pasar el cursor"). Sin JS: el
   desglose es texto que ya viaja en la pagina. */
.in-pop { position: relative; display: inline-block; }
.in-cifra .in-pop, .in-cifra .in-pop-ancla { font: inherit; color: inherit; letter-spacing: inherit; }
.in-pop-ancla { display: inline; cursor: pointer; list-style: none;
  text-decoration: underline dotted; text-underline-offset: 5px;
  text-decoration-color: var(--line); font-variant-numeric: tabular-nums; }
.in-pop-ancla::-webkit-details-marker { display: none; }
.in-pop-ancla:hover, .in-pop[open] .in-pop-ancla { text-decoration-color: var(--text-3); }
.in-pop-caja { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: max-content; max-width: min(340px, 78vw); display: flex; flex-direction: column;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); text-align: left; cursor: default; }
.in-cifra .in-pop-caja, .in-cifra .in-pop-caja span, .in-cifra .in-pop-caja b,
.in-sub .in-pop-caja, .in-sub .in-pop-caja span, .in-sub .in-pop-caja b {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 400;
  letter-spacing: 0; color: var(--text); line-height: 1.5; }
.in-pop-caja .in-pop-tit { font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.in-pop-fila { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
.in-pop-fila > span { color: var(--text-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.in-pop-fila b { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.in-pop-otros > span { color: var(--text-3); }
.in-pop-suma { margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line); }
/* El desglose dice de QUIEN es el saldo; la tabla dice CUALES facturas son. */
.in-pop-mas { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  font-size: 12px; color: var(--text-2); text-decoration: none; }
.in-pop-mas:hover { color: var(--text); text-decoration: underline; }
.in-pop-mas .ico { width: 13px; height: 13px; }
/* Los dolares no se suman con los pesos: se ven, separados. */
.in-aparte { color: var(--text-3); }
.in-pie { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.in-pie a { color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.in-pie a:hover { color: var(--text); }
.in-pie .ico { width: 14px; height: 14px; }
/* La tarjeta de cada vendedor abre su cartera. */
button.ven-tarjeta { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
button.ven-tarjeta:hover:not(:disabled) { border-color: var(--platinum); }
button.ven-tarjeta:disabled { cursor: default; }
.ven-vend { padding: 18px 20px 20px; }
.ven-vend-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60dvh; overflow-y: auto; }
.ven-vend-lista li { display: grid; gap: 4px 12px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 170px 44px; }
@media (max-width: 719.98px) { .ven-vend-lista li { grid-template-columns: 1fr; } }
.ven-vend-lista a { color: inherit; text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ven-vend-lista a:hover { text-decoration: underline; }
.ven-vend-pasos { font-family: var(--font-mono); font-size: 11.5px; text-align: right; }

/* ---------------------------------------------------------------------------
   "Mi día" del promotor: un paso a la vez (pr_hoy.html). La tarjeta grande es
   lo que toca AHORA y es lo unico que se puede tocar; abajo va el dia
   completo en una lista de solo lectura.
   --------------------------------------------------------------------------- */
.ph-avance { margin: 18px 0 22px; }
.ph-avance-barra { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ph-avance-barra span { display: block; height: 100%; border-radius: 99px; background: var(--ok, #2F6B46);
                        transition: width .4s ease; }
.ph-avance-txt { margin: 8px 0 0; font: 500 14px/1.3 inherit; color: var(--text-2); }

.ph-paso { border: 2px solid var(--ok, #2F6B46); border-radius: 22px; padding: 22px 20px 24px;
           background: var(--surface-1); box-shadow: 0 10px 28px rgba(16, 16, 18, .07); }
.ph-paso-etq { margin: 0 0 6px; font: 700 13px/1 "JetBrains Mono", monospace; letter-spacing: .1em;
               text-transform: uppercase; color: var(--ok, #2F6B46); display: flex; align-items: center; gap: 6px; }
.ph-paso-tit { margin: 0 0 8px; font-size: 26px; line-height: 1.15; }
.ph-paso-sub { margin: 0 0 14px; color: var(--text-2); }
.ph-paso-hora { margin: 0 0 14px; font: 500 15px/1.3 inherit; display: flex; align-items: center; gap: 8px; }
.ph-paso-form { display: grid; gap: 12px; }
.ph-paso-form .ph-btn-guardar { width: 100%; justify-content: center; font-size: 17px; padding: 16px; }
.ph-paso-listo { border-color: var(--line); }
.ph-venta-campo { display: grid; gap: 6px; font-weight: 600; }

.ph-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ph-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; }
.ph-fila-num { flex: 0 0 28px; height: 28px; border-radius: 99px; display: grid; place-items: center;
               font: 700 14px "JetBrains Mono", monospace; background: var(--surface-2); color: var(--text-2); }
.ph-fila-txt { flex: 1; display: grid; gap: 2px; font-weight: 600; }
.ph-fila-dato { font: 500 13px "JetBrains Mono", monospace; color: var(--text-2); }
.ph-fila-thumb { flex: 0 0 44px; }
.ph-fila-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; display: block; }
.ph-fila--hecho .ph-fila-num { background: var(--ok, #2F6B46); color: #fff; }
.ph-fila--hecho .ph-fila-num svg { width: 16px; height: 16px; }
.ph-fila--ahora { background: var(--surface-2); }
.ph-fila--ahora .ph-fila-num { background: var(--ok, #2F6B46); color: #fff; }
.ph-fila--ahora .ph-fila-dato { color: var(--ok, #2F6B46); font-weight: 700; }
.ph-fila--despues { opacity: .55; }

/* Guardado en tanda de la lista de usuarios. */
.usr-guardar-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 4; padding: 8px 0;
  background: var(--canvas); border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.usr-guardar-barra .section-title { margin: 0; }
.usr-guardar-barra .btn:disabled { opacity: .45; cursor: default; }
/* Un campo tocado se marca: con veintiun renglones, saber cual movimos es la
   diferencia entre guardar con confianza y guardar a ciegas. */
.usr-tocado { border-color: var(--warn) !important; background: var(--warn-bg); }
.usr-campo { font-size: 12.5px; padding: 4px 8px; }
td .usr-campo + .usr-campo { margin-left: 6px; }

/* Resumen de que alcanza cada perfil. */
.usr-matriz { margin: 10px 0 14px; }
.usr-matriz summary { display: inline-flex; cursor: pointer; list-style: none; }
.usr-matriz summary::-webkit-details-marker { display: none; }
.usr-matriz-tabla { margin-top: 10px; font-size: 12.5px; }
/* Diez columnas tienen que caber sin irse de lado: el encabezado va mas
   chico y con menos espaciado entre letras, y las celdas aprietan los
   costados. Lo que se recorta es el aire, no el dato. */
.usr-matriz-tabla th {
  white-space: nowrap; font-size: 9.5px; letter-spacing: .08em;
  padding-left: 7px; padding-right: 7px;
}
.usr-matriz-tabla td { padding-left: 7px; padding-right: 7px; }
.usr-matriz-tabla tbody td:first-child { padding-left: 12px; }
.usr-donde { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; }
/* Sin palomita: la palabra ya dice si ve o si edita, y el icono costaba
   14px en cada una de las cien celdas de la tabla. */
.usr-si { color: var(--ok); font-size: 11.5px; }
.usr-ve { color: var(--text-2); font-size: 11.5px; }
.usr-no { color: var(--line); }

/* Directorio de tiendas. */
.dir-sin td:first-child { border-left: 2px solid var(--warn); }
.dir-contactos { list-style: none; margin: 10px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dir-contactos li { display: flex; align-items: center; gap: 8px; }
.dir-fila { display: grid; gap: 6px; flex: 1; margin: 0;
  grid-template-columns: 150px minmax(0, 1.2fr) 130px minmax(0, 1.3fr) auto; }
@media (max-width: 899.98px) { .dir-fila { grid-template-columns: 1fr 1fr; } }
.dir-fila input { font-size: 12.5px; padding: 4px 8px; }
.dir-solo-lectura { align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.dir-puesto { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); }
.dir-promotores { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; line-height: 1.9; }

/* Pantalla de error de formulario. */
.err-caja { max-width: 60ch; margin: 40px auto; padding: 22px 26px;
  border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
  border-radius: var(--r-lg); background: var(--surface); }
.err-tit { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px;
  font-weight: 600; font-size: 17px; }
.err-tit .ico { width: 17px; height: 17px; color: var(--warn); flex: none; }
.err-msg { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; }
.err-acciones { display: flex; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.usr-ejecutivo { display: block; margin-top: 3px; font-size: 11px; color: var(--text-3);
  font-family: var(--font-mono); letter-spacing: .02em; }

/* Guardado en tanda de la hoja de promotoría. */
.pv-sep-flex { flex: 1; }
.pv-guardar-todo:disabled { opacity: .45; cursor: default; }
.pv-tocada > td { background: var(--warn-bg); }
.pv-error > td { background: color-mix(in srgb, var(--danger-ink) 10%, transparent); }
.pv-aviso-malo { color: var(--danger-ink); }

/* ============================================================
   Capacitaciones (/capacitaciones)

   El tablero es el Excel que ya conocen -- tiendas por dias -- pero
   generado. Las celdas llevan la HORA, no una palomita: es el dato que la
   gente buscaba dentro de la celda en la hoja original.
   ============================================================ */
.cap-mes { font-size: 15px; min-width: 160px; text-align: center; }
.cap-cifra { margin: 4px 0 0; font-family: var(--font-display); font-size: 26px;
  font-weight: 600; line-height: 1; }
.cap-cifra span { font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.cap-rejilla th.cap-dia { min-width: 34px; text-align: center; font-size: 10.5px; padding: 4px 2px; }
.cap-rejilla .cap-hoy { color: var(--brand); border-bottom: 2px solid var(--brand); }
.cap-celda { text-align: center; padding: 2px; }
.cap-marca {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  padding: 2px 4px; border-radius: 4px; white-space: nowrap;
}
.cap-realizada { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.cap-programada { background: var(--surface-3); color: var(--text-2); }
.cap-cancelada { background: color-mix(in srgb, var(--danger-ink) 14%, transparent);
  color: var(--danger-ink); text-decoration: line-through; }
.cap-reprogramada { background: var(--warn-bg); color: var(--warn); }
.cap-pendiente { background: var(--surface-3); color: var(--text-3); }

/* El calendario de pared (2026-09-21). El tablero tienda x dia contesta
   "que tienda lleva un mes sin nada"; este contesta "que toca esta semana",
   que es la pregunta que se hace todos los lunes. */
.cap-vista-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cap-vistas { display: flex; gap: 6px; margin-left: auto; }
.cap-vistas .activo { background: var(--surface-3); color: var(--text-1); }
.cap-cal { margin-top: 10px; }
.cap-cal-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cap-cal-sem + .cap-cal-sem { margin-top: 4px; }
.cap-cal-nom > div {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-3); padding: 0 0 6px 4px;
}
.cap-cal-dia {
  min-height: 86px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 5px 6px 7px;
}
/* Los dias de los meses vecinos se pintan apagados y NO se dejan en blanco:
   una primera semana vacia se lee como si el mes empezara en martes. */
.cap-fuera { background: transparent; border-style: dashed; opacity: .5; }
.cap-cal-hoy { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cap-cal-num {
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-3); margin-bottom: 4px;
}
.cap-cal-hoy .cap-cal-num { color: var(--brand); font-weight: 600; }
.cap-ev {
  display: block; position: relative; font-size: 11.5px; line-height: 1.35;
  padding: 3px 5px; border-radius: 5px; margin-bottom: 3px; text-decoration: none;
}
/* El recorte va en el texto y NO en el enlace: con overflow:hidden arriba,
   la ficha que sale al pasar el cursor se cortaba en el borde de la casilla. */
.cap-ev-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-ev b { font-family: var(--font-mono); font-size: 10.5px; }
.cap-ev-marca { opacity: .75; font-size: 10.5px; }

/* La ficha al pasar el cursor. Reemplaza al `title` del navegador: ahi solo
   cabe una linea, tarda un segundo en aparecer y el teclado no la alcanza.
   Esta tambien sale al tabular (:focus-visible). */
.cap-tip {
  position: absolute; left: 0; top: calc(100% + 5px); z-index: 40;
  display: none; width: max-content; max-width: 260px;
  background: var(--surface); color: var(--text-1);
  border: 1px solid var(--line-hard); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgb(0 0 0 / .18); padding: 9px 11px;
  font-size: 12px; line-height: 1.5; white-space: normal; text-align: left;
}
.cap-ev:hover .cap-tip, .cap-ev:focus-visible .cap-tip { display: block; }
.cap-ev:hover, .cap-ev:focus-visible { z-index: 41; }
.cap-tip-tit { display: block; font-size: 13px; }
.cap-tip-sub { display: block; color: var(--text-3); font-size: 11.5px; margin-bottom: 5px; }
.cap-tip-dato { display: block; }
.cap-tip-dato i {
  display: inline-block; min-width: 86px; font-style: normal;
  color: var(--text-3); font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em;
}
.cap-tip-nota {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 11.5px;
}
/* En las dos ultimas columnas la ficha se sale de la pantalla por la
   derecha: se ancla al borde contrario. */
.cap-cal-sem > .cap-cal-dia:nth-child(n+6) .cap-tip { left: auto; right: 0; }
/* Y en los ultimos renglones se abre hacia arriba, para no empujar la pagina. */
.cap-cal-sem:nth-last-child(-n+2) .cap-tip { top: auto; bottom: calc(100% + 5px); }
@media (max-width: 720px) {
  /* En telefono siete columnas dejan celdas de 40px: se apila por dia. */
  .cap-cal-sem { grid-template-columns: 1fr; }
  .cap-cal-nom { display: none; }
  .cap-cal-dia { min-height: 0; }
  .cap-fuera:not(:has(.cap-ev)) { display: none; }
}

/* Detalle del mes: cada control en SU columna, debajo del encabezado que lo
   nombra. Los campos dejan de estirarse al ancho de la celda -- un
   desplegable de 900px para escribir "Realizada" era lo que hacia que cada
   renglon midiera tres pisos. */
.cap-detalle td { vertical-align: middle; }
.cap-detalle .pr-in { width: auto; min-width: 0; font-size: 13px; padding: 5px 8px; }
.cap-detalle select.pr-in { max-width: 168px; }
.cap-detalle .cap-asist { width: 62px; text-align: right; }
.cap-cuando b { font-family: var(--font-mono); font-size: 13px; }
.cap-cuando .muted { display: block; font-family: var(--font-mono); font-size: 10.5px; }

.cap-fila { display: flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.cap-fila select, .cap-fila input { font-size: 12.5px; padding: 4px 8px; }
.cap-fila input[type="number"] { width: 70px; }