/* ============================================================
   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); }

.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); }
.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-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)); }

@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; }
}

/* ---------- 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 ---------- */
.pv-seg { max-width: none; }
.pv-kpis { margin-top: 10px; }
.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; }