/* ============================================================================
   Panel iTaxi — Design System v2 (reskin Opción A)
   CSS plano, additivo. Se carga DESPUÉS del bundle y solo aplica dentro de
   `.pv2-shell` / clases `.pv2-*`, así que NO afecta las páginas actuales.
   Retunear la marca = cambiar los tokens en :root.
   ========================================================================== */

:root {
  /* Marca (morado iTaxi) — los hex del MANUAL DE IDENTIDAD, 18-sep-2026.
     Antes iba #6d34d6, que no estaba en ningun manual: el panel y las dos
     apps mostraban tres morados distintos. El -600 no es un oscurecido
     inventado, es el PURPURA del propio manual (#4e2f8e); los dos claros son
     ese mismo lila mezclado con blanco.
     Medido: lila sobre el 050 da 5.92 y sobre el 100, 5.36 (pide 4.5). */
  --pv2-primary:        #6e4c9f;
  --pv2-primary-600:    #4e2f8e;
  --pv2-primary-050:    #f5f2f8;
  --pv2-primary-100:    #ebe6f2;

  /* Superficies y texto */
  --pv2-bg:             #f5f6fb;
  --pv2-surface:        #ffffff;
  --pv2-surface-2:      #fbfbfe;
  --pv2-ink:            #1f2430;
  --pv2-ink-2:          #4b5163;
  --pv2-muted:          #8a90a2;
  --pv2-border:         #e9eaf2;
  --pv2-border-2:       #f0f1f7;

  /* Semánticos */
  --pv2-success:        #16a34a;  --pv2-success-bg: #e7f6ec;
  --pv2-warning:        #b7791f;  --pv2-warning-bg: #fdf3e2;
  --pv2-danger:         #dc2626;  --pv2-danger-bg:  #fdeaea;
  --pv2-info:           #2563eb;  --pv2-info-bg:    #e8f0fe;

  /* Escala / forma */
  --pv2-radius:         14px;
  --pv2-radius-sm:      10px;
  --pv2-radius-pill:    999px;
  --pv2-shadow:         0 1px 2px rgba(20,23,40,.04), 0 6px 20px rgba(20,23,40,.06);
  --pv2-shadow-sm:      0 1px 2px rgba(20,23,40,.06);
  --pv2-sidebar-w:      256px;
  --pv2-space:          20px;
  --pv2-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----- Shell (sidebar + main) ----------------------------------------- */
.pv2-shell {
  font-family: var(--pv2-font);
  color: var(--pv2-ink);
  background: var(--pv2-bg);
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--pv2-sidebar-w) 1fr;
  -webkit-font-smoothing: antialiased;
}
.pv2-shell *, .pv2-shell *::before, .pv2-shell *::after { box-sizing: border-box; }

/* ----- Sidebar --------------------------------------------------------- */
.pv2-sidebar {
  background: var(--pv2-surface);
  border-right: 1px solid var(--pv2-border);
  padding: 18px 14px 40px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.pv2-sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 18px;
  font-weight: 800; font-size: 18px; letter-spacing: -.02em;
  color: var(--pv2-ink);
}
.pv2-sidebar__brand .dot {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--pv2-primary), #9a6bff);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
}
.pv2-nav__group { margin-top: 16px; }
.pv2-nav__label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pv2-muted); padding: 4px 10px 8px;
  /* Acordeón: la etiqueta ahora es un botón que colapsa el grupo. */
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: color .12s ease;
}
.pv2-nav__label:hover { color: var(--pv2-ink-2); }
.pv2-nav__chevron {
  font-size: 10px; color: var(--pv2-muted);
  transition: transform .18s ease; margin-left: 8px;
}
.pv2-nav__group.is-collapsed .pv2-nav__chevron { transform: rotate(-90deg); }
.pv2-nav__items { overflow: hidden; }
.pv2-nav__group.is-collapsed .pv2-nav__items { display: none; }
.pv2-nav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: var(--pv2-radius-sm);
  color: var(--pv2-ink-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.pv2-nav__item i { width: 18px; text-align: center; font-size: 15px; color: var(--pv2-muted); }
.pv2-nav__item:hover { background: var(--pv2-border-2); color: var(--pv2-ink); text-decoration: none; }
.pv2-nav__item.is-active { background: var(--pv2-primary-050); color: var(--pv2-primary-600); font-weight: 600; }
.pv2-nav__item.is-active i { color: var(--pv2-primary); }
.pv2-nav__badge {
  margin-left: auto; background: var(--pv2-danger); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: var(--pv2-radius-pill);
  padding: 1px 7px; min-width: 20px; text-align: center;
}

/* ----- Main / topbar --------------------------------------------------- */
.pv2-main { min-width: 0; display: flex; flex-direction: column; }
.pv2-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; background: var(--pv2-surface);
  border-bottom: 1px solid var(--pv2-border);
  position: sticky; top: 0; z-index: 5;
}
.pv2-topbar__spacer { flex: 1; }
.pv2-topbar__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--pv2-border);
  border-radius: var(--pv2-radius-pill); font-size: 13px; color: var(--pv2-ink-2);
}
.pv2-burger { display: none; background: none; border: 0; font-size: 20px; color: var(--pv2-ink); cursor: pointer; }
.pv2-content { --pv2-pad-x: 26px; padding: var(--pv2-pad-x); }

/* ── Las filas de Bootstrap no pueden tirar mas fuera que el margen ──────
   Una `.row` lleva `margin: 0 -15px` de serie: cuenta con vivir dentro de un
   contenedor que tenga 15px de lado. `.pv2-content` da 26px en escritorio
   (sobra), pero 14px por debajo de 900 y 11px por debajo de 480. Ahi la fila
   se salia 1px y 4px, y la pagina entera se movia de lado en el movil.

   Cuatro pixeles no se ven, pero el gesto si: al deslizar hacia arriba la
   pagina se va de lado, y eso se siente como una app rota aunque nadie sepa
   decir por que.

   Se ata al MISMO valor del padding en vez de escribir -11px a mano: si
   alguien cambia el margen del contenido, el de la fila le sigue. Escritorio
   no se toca —ahi 26px ya sobra para los -15px— para no mover lo que lleva
   años bien. */
@media (max-width: 900px) {
    .pv2-content .row {
        margin-left: calc(var(--pv2-pad-x) * -1);
        margin-right: calc(var(--pv2-pad-x) * -1);
    }
}

/* ----- Page header ----------------------------------------------------- */
.pv2-page-header { margin-bottom: 22px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pv2-page-header__titles { flex: 1; min-width: 240px; }
.pv2-page-header h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--pv2-ink); }
.pv2-page-header p { margin: 5px 0 0; color: var(--pv2-muted); font-size: 14px; }
.pv2-page-header__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ----- KPI cards ------------------------------------------------------- */
.pv2-kpi-grid {
  display: grid; gap: 16px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.pv2-kpi {
  background: var(--pv2-surface); border: 1px solid var(--pv2-border);
  border-radius: var(--pv2-radius); padding: 18px; box-shadow: var(--pv2-shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.pv2-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.pv2-kpi__label { font-size: 13px; color: var(--pv2-muted); font-weight: 600; }
.pv2-kpi__icon {
  width: 38px; height: 38px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 17px;
  background: var(--pv2-primary-050); color: var(--pv2-primary);
}
.pv2-kpi__value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pv2-kpi__foot { font-size: 12.5px; color: var(--pv2-muted); display: flex; align-items: center; gap: 6px; }
.pv2-kpi__delta { font-weight: 700; }
.pv2-kpi__delta.up { color: var(--pv2-success); }
.pv2-kpi__delta.down { color: var(--pv2-danger); }
.pv2-kpi--accent { background: linear-gradient(135deg, var(--pv2-primary), #8a54ff); border: 0; color: #fff; }
.pv2-kpi--accent .pv2-kpi__label,
.pv2-kpi--accent .pv2-kpi__foot { color: rgba(255,255,255,.85); }
.pv2-kpi--accent .pv2-kpi__icon { background: rgba(255,255,255,.18); color: #fff; }

/* ----- Card ------------------------------------------------------------ */
.pv2-card {
  background: var(--pv2-surface); border: 1px solid var(--pv2-border);
  border-radius: var(--pv2-radius); box-shadow: var(--pv2-shadow-sm); margin-bottom: 22px;
}
.pv2-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--pv2-border-2);
}
.pv2-card__head h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--pv2-ink); }
.pv2-card__head .sub { font-size: 12.5px; color: var(--pv2-muted); }
.pv2-card__actions { margin-left: auto; display: flex; gap: 8px; }
.pv2-card__body { padding: 20px; }
.pv2-card__body--flush { padding: 0; }

/* ----- Table ----------------------------------------------------------- */
.pv2-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pv2-table th {
  text-align: left; font-weight: 600; color: var(--pv2-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 12px 20px; border-bottom: 1px solid var(--pv2-border);
  background: var(--pv2-surface-2);
}
.pv2-table td { padding: 13px 20px; border-bottom: 1px solid var(--pv2-border-2); color: var(--pv2-ink-2); }
.pv2-table tbody tr:last-child td { border-bottom: 0; }
.pv2-table tbody tr:hover { background: var(--pv2-surface-2); }
.pv2-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pv2-empty { padding: 44px 20px; text-align: center; color: var(--pv2-muted); }
.pv2-empty i { font-size: 30px; display: block; margin-bottom: 10px; opacity: .5; }

/* ----- Badge ----------------------------------------------------------- */
.pv2-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--pv2-radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.5;
  background: var(--pv2-border-2); color: var(--pv2-ink-2);
}
.pv2-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pv2-badge--success { background: var(--pv2-success-bg); color: var(--pv2-success); }
.pv2-badge--warning { background: var(--pv2-warning-bg); color: var(--pv2-warning); }
.pv2-badge--danger  { background: var(--pv2-danger-bg);  color: var(--pv2-danger); }
.pv2-badge--info    { background: var(--pv2-info-bg);    color: var(--pv2-info); }
.pv2-badge--neutral { background: var(--pv2-border-2);   color: var(--pv2-ink-2); }

/* ----- Buttons --------------------------------------------------------- */
.pv2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--pv2-radius-sm);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--pv2-border); background: var(--pv2-surface); color: var(--pv2-ink-2);
  text-decoration: none; transition: all .12s ease;
}
.pv2-btn:hover { background: var(--pv2-border-2); text-decoration: none; color: var(--pv2-ink); }
.pv2-btn--primary { background: var(--pv2-primary); border-color: var(--pv2-primary); color: #fff; }
.pv2-btn--primary:hover { background: var(--pv2-primary-600); color: #fff; }
.pv2-btn--sm { padding: 5px 10px; font-size: 12.5px; gap: 5px; }
.pv2-btn--success { background: var(--pv2-success); border-color: var(--pv2-success); color: #fff; }
.pv2-btn--success:hover { filter: brightness(.94); color: #fff; }
.pv2-btn--danger { background: var(--pv2-danger); border-color: var(--pv2-danger); color: #fff; }
.pv2-btn--danger:hover { filter: brightness(.94); color: #fff; }
.pv2-wd-actions { display: inline-flex; gap: 6px; align-items: center; }
.pv2-wd-actions form { margin: 0; }
.pv2-export { display: inline-flex; gap: 6px; }

/* Centro de alertas */
.pv2-alert-list { display: flex; flex-direction: column; gap: 12px; }
.pv2-alert {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: var(--pv2-surface); border: 1px solid var(--pv2-border);
    border-left: 4px solid var(--pv2-border); border-radius: var(--pv2-radius);
    text-decoration: none; color: var(--pv2-ink); transition: box-shadow .12s ease;
}
.pv2-alert:hover { box-shadow: var(--pv2-shadow); text-decoration: none; color: var(--pv2-ink); }
.pv2-alert__icon { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 17px; }
.pv2-alert__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pv2-alert__title { font-weight: 700; font-size: 14.5px; }
.pv2-alert__detail { color: var(--pv2-muted); font-size: 13px; }
.pv2-alert__value { font-size: 20px; font-weight: 800; }
.pv2-alert--danger { border-left-color: var(--pv2-danger); }
.pv2-alert--danger .pv2-alert__icon { background: var(--pv2-danger-bg); color: var(--pv2-danger); }
.pv2-alert--danger .pv2-alert__value { color: var(--pv2-danger); }
.pv2-alert--warning { border-left-color: #b7791f; }
.pv2-alert--warning .pv2-alert__icon { background: #fdf3e2; color: #b7791f; }
.pv2-alert--warning .pv2-alert__value { color: #b7791f; }

/* Input v2 (formularios propios del panel v2, p. ej. config de alertas) */
.pv2-input { padding: 8px 11px; border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-sm);
    background: var(--pv2-surface); color: var(--pv2-ink); font-size: 13.5px; }
.pv2-input:focus { outline: none; border-color: var(--pv2-primary); box-shadow: 0 0 0 3px var(--pv2-primary-050, rgba(110,76,159,.15)); }
.pv2-input--sm { width: 96px; text-align: right; }

/* Command palette (Cmd/Ctrl+K) */
.pv2-cmdk { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; margin-left: 6px;
    background: var(--pv2-surface-2); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-sm);
    color: var(--pv2-ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.pv2-cmdk:hover { color: var(--pv2-ink); border-color: var(--pv2-primary); }
.pv2-cmdk kbd { background: var(--pv2-surface); border: 1px solid var(--pv2-border); border-radius: 5px;
    padding: 1px 6px; font-size: 11px; color: var(--pv2-muted); }
.pv2-cmdk span { }
@media (max-width: 720px) { .pv2-cmdk span, .pv2-cmdk kbd { display: none; } }

.pv2-palette { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; }
.pv2-palette[hidden] { display: none; }
.pv2-palette__backdrop { position: absolute; inset: 0; background: rgba(15,17,26,.5); backdrop-filter: blur(2px); }
.pv2-palette__box { position: relative; margin-top: 12vh; width: min(600px, 92vw); background: var(--pv2-surface);
    border: 1px solid var(--pv2-border); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; }
.pv2-palette__search { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--pv2-border); }
.pv2-palette__search i { color: var(--pv2-muted); }
.pv2-palette__search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--pv2-ink); font-size: 16px; }
.pv2-palette__search kbd { background: var(--pv2-surface-2); border: 1px solid var(--pv2-border); border-radius: 5px; padding: 2px 7px; font-size: 11px; color: var(--pv2-muted); }
.pv2-palette__list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.pv2-palette__item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 9px; cursor: pointer; color: var(--pv2-ink); font-size: 14px; }
.pv2-palette__item i { width: 18px; text-align: center; color: var(--pv2-ink-2); }
.pv2-palette__item.is-active { background: var(--pv2-primary); color: #fff; }
.pv2-palette__item.is-active i { color: #fff; }
.pv2-palette__item--search { color: var(--pv2-ink-2); }
.pv2-palette__empty { padding: 22px; text-align: center; color: var(--pv2-muted); font-size: 14px; }

/* Campana de alertas en el topbar */
.pv2-bell { position: relative; }
.pv2-bell__badge {
    position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--pv2-danger); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ----- Grid utils ------------------------------------------------------ */
/* ⛔ `minmax(0, 1fr)` y NO `1fr` a secas.
 *
 * En CSS Grid `1fr` es `minmax(auto, 1fr)`, y ese `auto` significa "al menos
 * lo que mida su contenido". Basta una grafica o una tabla que no sepa
 * encoger para que la columna crezca y se lleve la rejilla entera por
 * delante.
 *
 * Medido el 19-sep-2026 a 360x640: las tarjetas del tablero salian de 408px
 * dentro de una pantalla de 360 y arrastraban la pagina 57px de lado. La
 * regla de una sola columna de abajo ya estaba puesta y aun asi pasaba,
 * porque el problema no era cuantas columnas sino que la columna no podia
 * encoger.
 *
 * Con `minmax(0, ...)` la columna puede bajar de lo que mide su contenido, y
 * es el contenido el que se desliza dentro de su propio carril. */
.pv2-grid-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 992px) { .pv2-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ----- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .pv2-shell { grid-template-columns: 1fr; }
  .pv2-sidebar {
    position: fixed; z-index: 40; left: 0; top: 0; width: var(--pv2-sidebar-w);
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .pv2-shell.is-open .pv2-sidebar { transform: translateX(0); }
  .pv2-burger { display: inline-flex; }
  /* Backdrop: oscurece el fondo cuando el menú está abierto en móvil. */
  .pv2-backdrop {
    position: fixed; inset: 0; z-index: 39;
    background: rgba(15, 18, 28, .45);
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
  }
  .pv2-shell.is-open .pv2-backdrop { opacity: 1; visibility: visible; }
}
/* En escritorio el backdrop nunca se muestra. */
.pv2-backdrop { display: none; }
@media (max-width: 900px) { .pv2-backdrop { display: block; } }

/* ============================================================================
   Migración: páginas VIEJAS (x-master-layout / _body) dentro del shell v2.
   Neutraliza el posicionamiento del theme viejo para que fluya en .pv2-main.
   ========================================================================== */
.pv2-main .mm-top-navbar {
  position: static !important; width: auto !important; left: auto !important;
  right: auto !important; top: auto !important; margin: 0 !important;
  background: var(--pv2-surface); border-bottom: 1px solid var(--pv2-border);
  box-shadow: none !important; padding: 6px 20px !important;
}
.pv2-main .mm-navbar-logo { display: none !important; } /* logo redundante: ya está en el sidebar v2 */
.pv2-main .content-page,
.pv2-main .iq-footer { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: auto !important; }
.pv2-content .content-page { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
/* Cards del theme viejo: suavizar para que peguen con el look v2 */
.pv2-content .iq-card, .pv2-content .card { border-radius: var(--pv2-radius); border: 1px solid var(--pv2-border); box-shadow: var(--pv2-shadow-sm); }

/* ============================================================================
   Reskin del CONTENIDO viejo (BS4 / theme) dentro de .pv2-content.
   Hace que TODAS las páginas viejas se vean como el diseño v2 sin tocarlas.
   ========================================================================== */
.pv2-content { color: var(--pv2-ink); }
.pv2-content a { color: var(--pv2-primary-600); }
.pv2-content h1,.pv2-content h2,.pv2-content h3,.pv2-content h4,.pv2-content h5 {
  color: var(--pv2-ink); font-weight: 700; letter-spacing: -.01em;
}
.pv2-content .text-primary { color: var(--pv2-primary-600) !important; }

/* Cards del theme viejo */
.pv2-content .card, .pv2-content .iq-card {
  background: var(--pv2-surface); border: 1px solid var(--pv2-border) !important;
  border-radius: var(--pv2-radius) !important; box-shadow: var(--pv2-shadow-sm) !important;
}
.pv2-content .card-header, .pv2-content .iq-card-header {
  background: transparent; border-bottom: 1px solid var(--pv2-border-2);
  padding: 16px 20px; font-weight: 700;
}
.pv2-content .card-body { padding: 20px; }

/* Botones */
.pv2-content .btn { border-radius: var(--pv2-radius-sm); font-weight: 600; padding: 8px 15px; }
.pv2-content .btn-primary, .pv2-content .btn.bg-primary {
  background-color: var(--pv2-primary) !important; border-color: var(--pv2-primary) !important; color: #fff !important;
}
.pv2-content .btn-primary:hover { background-color: var(--pv2-primary-600) !important; border-color: var(--pv2-primary-600) !important; }

/* Los demás botones de Bootstrap. Sin esto, en las pantallas viejas seguían
   saliendo el amarillo y el verde de Bootstrap junto a los morados del panel:
   "Filtrar" amarillo canario y "Descargar CSV" verde manzana en ~30 listas.
   Se llevan a los tonos semánticos del sistema, que ya son los que usan los
   badges, para que un botón de peligro y una etiqueta de peligro sean del
   mismo rojo. */
.pv2-content .btn-warning, .pv2-content .btn-success,
.pv2-content .btn-danger,  .pv2-content .btn-info,
.pv2-content .btn-secondary {
  border-radius: var(--pv2-radius-sm) !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.pv2-content .btn-warning   { background-color: var(--pv2-warning) !important; color: #fff !important; }
.pv2-content .btn-success   { background-color: var(--pv2-success) !important; color: #fff !important; }
.pv2-content .btn-danger    { background-color: var(--pv2-danger)  !important; color: #fff !important; }
.pv2-content .btn-info      { background-color: var(--pv2-info)    !important; color: #fff !important; }
.pv2-content .btn-secondary { background-color: var(--pv2-surface-2) !important; color: var(--pv2-ink) !important;
                              border-color: var(--pv2-border) !important; }
.pv2-content .btn-warning:hover, .pv2-content .btn-success:hover,
.pv2-content .btn-danger:hover,  .pv2-content .btn-info:hover { filter: brightness(.92); }

/* Badges de las tablas viejas (los DataTables los emiten a mano). */
.pv2-content .badge-light-success { background: var(--pv2-success-bg) !important; color: var(--pv2-success) !important; }
.pv2-content .badge-light-warning { background: var(--pv2-warning-bg) !important; color: var(--pv2-warning) !important; }
.pv2-content .badge-light-danger  { background: var(--pv2-danger-bg)  !important; color: var(--pv2-danger)  !important; }
.pv2-content .badge-light-info    { background: var(--pv2-info-bg)    !important; color: var(--pv2-info)    !important; }
.pv2-content .badge-light-primary { background: var(--pv2-primary-050) !important; color: var(--pv2-primary) !important; }

/* Indicador "en vivo" del mapa operativo. No tenía estilo: era texto suelto
   alineado junto a los botones del encabezado. */
.pv2-map-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--pv2-muted); font-weight: 600; white-space: nowrap; }
.pv2-map-live.is-falla { color: var(--pv2-danger); }
.pv2-content .btn-outline-primary { color: var(--pv2-primary) !important; border-color: var(--pv2-primary) !important; }
.pv2-content .btn-outline-primary:hover { background: var(--pv2-primary) !important; color: #fff !important; }

/* Inputs / selects */
.pv2-content .form-control, .pv2-content .form-select, .pv2-content select,
.pv2-content .select2-selection, .pv2-content .select2-container--default .select2-selection--single {
  border-radius: var(--pv2-radius-sm) !important; border: 1px solid var(--pv2-border) !important;
  color: var(--pv2-ink); min-height: 40px;
}
.pv2-content .form-control:focus { border-color: var(--pv2-primary) !important; box-shadow: 0 0 0 3px var(--pv2-primary-050) !important; }
.pv2-content label { color: var(--pv2-ink-2); font-weight: 600; font-size: 13px; }

/* Tablas + DataTables */
.pv2-content .table thead th, .pv2-content table.dataTable thead th {
  background: var(--pv2-surface-2); color: var(--pv2-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  border-bottom: 1px solid var(--pv2-border) !important; border-top: 0 !important; padding: 12px 16px;
}
.pv2-content .table td, .pv2-content table.dataTable td {
  border-top: 0 !important; border-bottom: 1px solid var(--pv2-border-2) !important;
  padding: 12px 16px; color: var(--pv2-ink-2); vertical-align: middle;
}
.pv2-content .table tbody tr:hover, .pv2-content table.dataTable tbody tr:hover { background: var(--pv2-surface-2); }

/* ── Que una tabla ANCHA se pueda leer ─────────────────────────────────────
 *
 * La de viajes lleva 13 columnas y no caben: hay que deslizar de lado. El
 * problema no es el deslizamiento, es perder el renglon por el camino — miras
 * el importe de la derecha y ya no sabes de que viaje era.
 *
 * Esto gobierna las 41 tablas del panel, asi que son reglas de lectura, no
 * adornos.
 * ────────────────────────────────────────────────────────────────────────── */

/* 1. LA PRIMERA COLUMNA SE QUEDA. Es la identidad del renglon —el # del
 *    viaje, el nombre— y tiene que seguir a la vista mientras el resto se
 *    desliza por debajo. Sin fondo propio, el contenido se le encima. */
.pv2-content .table-responsive { position: relative; }
.pv2-content .table-responsive > table.dataTable > thead > tr > th:first-child,
.pv2-content .table-responsive > table.dataTable > tbody > tr > td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--pv2-surface);
    box-shadow: 1px 0 0 var(--pv2-border);
}
.pv2-content .table-responsive > table.dataTable > thead > tr > th:first-child {
    background: var(--pv2-surface-2); z-index: 3;
}
.pv2-content .table-responsive > table.dataTable > tbody > tr:hover > td:first-child {
    background: var(--pv2-surface-2);
}

/* 2. UNA CELDA VACIA NO DICE NADA. Con 13 columnas, un hueco se confunde con
 *    «no cargo» o «hay un fallo». Una raya dice «aqui no hay dato», que es
 *    distinto. */
.pv2-content table.dataTable td:empty::after {
    content: '—'; color: var(--pv2-muted);
}

/* 3. EL DINERO SE LEE EN COLUMNA. Alineado a la derecha y con cifras de ancho
 *    fijo, los importes se comparan de un vistazo; alineados a la izquierda
 *    hay que leer cada uno. */
.pv2-content table.dataTable td.pv2-num,
.pv2-content table.dataTable th.pv2-num {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 4. EL RENGLON BAJO EL CURSOR SE MARCA DE VERDAD. Con el fondo solo, al
 *    deslizar de lado se pierde; con un filo a la izquierda se sigue. */
.pv2-content table.dataTable tbody tr { box-shadow: inset 3px 0 0 transparent; }
.pv2-content table.dataTable tbody tr:hover { box-shadow: inset 3px 0 0 var(--pv2-primary); }

/* 7. UN NOMBRE NO SE PARTE. En columna estrecha salia «Perf / Rider350» en
 *    dos renglones, que se lee como dos personas distintas. Que la tabla se
 *    deslice un poco mas y el nombre se lea entero. */
.pv2-content table.dataTable td.pv2-nombre { white-space: nowrap; }

/* 6. EL NUMERO DE VIAJE, SOBRIO. Iba como boton morado relleno y era lo mas
 *    llamativo del renglon, cuando es lo MENOS informativo: se mira para
 *    identificar, no para decidir. El color se reserva para los estados. */
.pv2-id-viaje {
    display: inline-block; font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--pv2-primary); text-decoration: none;
    padding: 4px 8px; border-radius: 7px; border: 1px solid var(--pv2-border);
    background: var(--pv2-surface-2);
}
.pv2-id-viaje:hover {
    color: #fff; background: var(--pv2-primary); border-color: var(--pv2-primary);
    text-decoration: none;
}

/* 5. LA FECHA, EN UN RENGLON (App\Support\Fecha). «6 oct 23:48»: el dia
 *    manda y la hora acompaña en gris, sin partir la fila. «6 de octubre de
 *    2026 23:48» ocupaba dos o tres renglones por fila. La fecha completa va
 *    en el title (y en <time datetime>). */
.pv2-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv2-fecha[title] { cursor: help; text-decoration: none; }
.pv2-fecha small { color: var(--pv2-muted); font-size: .9em; margin-left: 2px; }
/* Una fecha que además avisa (cupón vencido, compra caducada): color + texto,
 * nunca solo un icono. */
.pv2-fecha-estado { white-space: nowrap; }
.pv2-fecha-estado small { font-size: .82em; font-weight: 600; }
.pv2-fecha-estado--danger small { color: var(--pv2-danger); }
.pv2-fecha-estado--warning small { color: var(--pv2-warning); }
.pv2-content .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--pv2-primary) !important; border: 1px solid var(--pv2-primary) !important; color: #fff !important; border-radius: 8px;
}
.pv2-content .dataTables_wrapper .dataTables_filter input,
.pv2-content .dataTables_wrapper .dataTables_length select {
  border-radius: var(--pv2-radius-sm); border: 1px solid var(--pv2-border); padding: 6px 10px;
}

/* Badges / pills */
.pv2-content .badge { border-radius: var(--pv2-radius-pill); font-weight: 600; padding: 4px 10px; }
.pv2-content .badge-primary, .pv2-content .badge.bg-primary { background: var(--pv2-primary) !important; color: #fff; }
.pv2-content .badge-success, .pv2-content .badge.bg-success { background: var(--pv2-success-bg) !important; color: var(--pv2-success) !important; }
.pv2-content .badge-danger, .pv2-content .badge.bg-danger { background: var(--pv2-danger-bg) !important; color: var(--pv2-danger) !important; }
.pv2-content .badge-warning, .pv2-content .badge.bg-warning { background: var(--pv2-warning-bg) !important; color: var(--pv2-warning) !important; }

/* Nav tabs / pills */
.pv2-content .nav-tabs .nav-link.active { color: var(--pv2-primary-600); border-bottom: 2px solid var(--pv2-primary); background: transparent; }
.pv2-content .nav-pills .nav-link.active { background: var(--pv2-primary) !important; border-radius: var(--pv2-radius-sm); }

/* Alerts */
.pv2-content .alert { border-radius: var(--pv2-radius-sm); border: 1px solid var(--pv2-border); }

/* ============================================================================
   Login / Auth (layouts.guest → .login-content). Reskin al look v2.
   ========================================================================== */
.login-content, .login-content * { font-family: var(--pv2-font) !important; }
.login-content { background: var(--pv2-bg); }
.login-content h1, .login-content h2, .login-content h3 { color: var(--pv2-ink); font-weight: 800; letter-spacing: -.02em; }
.login-content a { color: var(--pv2-primary-600) !important; }
.login-content .btn-primary, .login-content button[type="submit"], .login-content .btn.bg-primary {
  background-color: var(--pv2-primary) !important; border-color: var(--pv2-primary) !important; color: #fff !important;
  border-radius: var(--pv2-radius-sm) !important; font-weight: 700; padding: 11px 18px;
}
.login-content .btn-primary:hover, .login-content button[type="submit"]:hover { background-color: var(--pv2-primary-600) !important; }
.login-content .form-control {
  border-radius: var(--pv2-radius-sm) !important; border: 1px solid var(--pv2-border) !important; min-height: 46px; color: var(--pv2-ink);
}
.login-content .form-control:focus { border-color: var(--pv2-primary) !important; box-shadow: 0 0 0 3px var(--pv2-primary-050) !important; }
.login-content .card, .login-content .sign-in-detail, .login-content .sign-in-from {
  border-radius: var(--pv2-radius) !important; box-shadow: var(--pv2-shadow) !important; border: 1px solid var(--pv2-border) !important;
}
.login-content .checkbox label, .login-content label { color: var(--pv2-ink-2); }

/* ============================================================================
   Header viejo (mm-top-navbar) dentro del shell v2 — look v2.
   ========================================================================== */
.pv2-main .mm-navbar-logo { display: flex !important; align-items: center; } /* override: mostrar hamburguesa */
.pv2-main .mm-navbar-logo .header-logo { display: none !important; }         /* logo redundante (ya está en sidebar) */
.pv2-main .mm-top-navbar .wrapper-menu { display: inline-flex !important; color: var(--pv2-ink-2); font-size: 18px; cursor: pointer; padding: 6px 10px; }
.pv2-main .mm-top-navbar .navbar-list .svg-icon,
.pv2-main .mm-top-navbar .navbar-list .text-primary { color: var(--pv2-ink-2) !important; }
.pv2-main .mm-top-navbar .navbar-list > li > a:hover .svg-icon { color: var(--pv2-primary) !important; }
.pv2-main .mm-top-navbar .avatar-rounded { border: 2px solid var(--pv2-border); width: 34px; height: 34px; }
.pv2-main .mm-top-navbar .dropdown-menu {
  border-radius: var(--pv2-radius) !important; border: 1px solid var(--pv2-border) !important; box-shadow: var(--pv2-shadow) !important; padding: 6px;
}
.pv2-main .mm-top-navbar .dropdown-item { border-radius: var(--pv2-radius-sm); }
.pv2-main .mm-top-navbar .dropdown-item a { color: var(--pv2-ink-2); }
.pv2-main .mm-top-navbar .dropdown-item:hover { background: var(--pv2-border-2); }

/* ============================================================================
   Modales (BS4) al look v2 (renderizan fuera de .pv2-content).
   ========================================================================== */
.modal-content {
  border-radius: var(--pv2-radius) !important; border: 1px solid var(--pv2-border) !important;
  box-shadow: 0 20px 60px rgba(20,23,40,.22) !important; font-family: var(--pv2-font);
}
.modal-header { border-bottom: 1px solid var(--pv2-border-2) !important; padding: 16px 20px !important; }
.modal-title { font-weight: 700 !important; color: var(--pv2-ink) !important; font-size: 16px !important; }
.modal-body { padding: 20px !important; }
.modal-footer { border-top: 1px solid var(--pv2-border-2) !important; padding: 14px 20px !important; }
.modal-content .btn { border-radius: var(--pv2-radius-sm) !important; font-weight: 600; }
.modal-content .btn-primary, .modal-content .btn.bg-primary {
  background-color: var(--pv2-primary) !important; border-color: var(--pv2-primary) !important; color: #fff !important;
}
.modal-content .form-control, .modal-content select, .modal-content .form-select {
  border-radius: var(--pv2-radius-sm) !important; border: 1px solid var(--pv2-border) !important; min-height: 40px;
}
.modal-content .form-control:focus { border-color: var(--pv2-primary) !important; box-shadow: 0 0 0 3px var(--pv2-primary-050) !important; }
.modal-content .close { color: var(--pv2-muted); opacity: 1; text-shadow: none; }

/* ============================================================================
   Dark mode — engancha el toggle del header (theme viejo togglea .dark en body).
   Redefinir los tokens re-tematiza TODO el shell v2 + páginas + reskin.
   ========================================================================== */
body.dark, body.dark-mode, html.dark {
  --pv2-bg:         #0f1117;
  --pv2-surface:    #191c26;
  --pv2-surface-2:  #20232f;
  --pv2-ink:        #e9eaf2;
  --pv2-ink-2:      #b7bbc9;
  --pv2-muted:      #7f8598;
  --pv2-border:     #2a2e3d;
  --pv2-border-2:   #23262f;
  --pv2-primary-050:#251c40;
  --pv2-shadow:     0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --pv2-shadow-sm:  0 1px 2px rgba(0,0,0,.35);

  /* Fondos semánticos en oscuro. Faltaban: los badges y avatares se quedaban
     con el pastel del tema claro (verde menta, lavanda) sobre superficie
     oscura — manchas luminosas que además dejaban el texto sin contraste.
     Aquí son tintes oscuros del mismo color, y el texto va en el tono vivo. */
  --pv2-success-bg: #14301f;
  --pv2-warning-bg: #33280f;
  --pv2-danger-bg:  #3a1a1c;
  --pv2-info-bg:    #14243f;
  --pv2-primary-100:#2d2250;
  /* Los tonos de texto se aclaran para que resalten sobre esos fondos. */
  --pv2-success:    #4ade80;
  --pv2-warning:    #fbbf24;
  --pv2-danger:     #f87171;
  --pv2-info:       #60a5fa;
}
/* Ajustes finos en dark */
body.dark .pv2-sidebar, body.dark-mode .pv2-sidebar { border-right-color: var(--pv2-border); }
body.dark .pv2-topbar,  body.dark-mode .pv2-topbar  { border-bottom-color: var(--pv2-border); }
body.dark .pv2-table th, body.dark-mode .pv2-table th { background: var(--pv2-surface-2); }
body.dark .pv2-content .card, body.dark-mode .pv2-content .card { background: var(--pv2-surface); }

/* ============================================================================
   Páginas de error (guest layout, .wrapper/.mm-error) al look v2.
   ========================================================================== */
.wrapper { font-family: var(--pv2-font); }
.wrapper, .mm-error { background: var(--pv2-bg); }
.mm-error h1, .mm-error h2, .mm-error h3 { color: var(--pv2-ink); font-weight: 800; letter-spacing: -.02em; }
.mm-error p { color: var(--pv2-muted); }
.wrapper .btn-primary, .mm-error .btn-primary {
  background-color: var(--pv2-primary) !important; border-color: var(--pv2-primary) !important; color: #fff !important;
  border-radius: var(--pv2-radius-sm) !important; font-weight: 600;
}

/* ============================================================================
   ARMONÍA 100% — widgets de plugins JS (select2, datepickers, dropdowns) + dark.
   Estos se renderizan a nivel <body> (portaled), así que van SIN scope .pv2-content.
   Solo aparecen en el panel, así que es seguro global.
   ========================================================================== */

/* ----- A1 · select2 (dropdowns de formularios, 61 vistas) ----- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 40px !important; border: 1px solid var(--pv2-border) !important;
  border-radius: var(--pv2-radius-sm) !important; background: var(--pv2-surface) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--pv2-ink) !important; line-height: 38px !important; padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pv2-primary) !important; box-shadow: 0 0 0 3px var(--pv2-primary-050) !important;
}
.select2-dropdown {
  border: 1px solid var(--pv2-border) !important; border-radius: var(--pv2-radius-sm) !important;
  box-shadow: var(--pv2-shadow) !important; background: var(--pv2-surface) !important; overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: var(--pv2-radius-sm); border: 1px solid var(--pv2-border) !important; padding: 7px 10px;
}
.select2-container--default .select2-results__option { color: var(--pv2-ink-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--pv2-primary) !important; color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--pv2-primary-050) !important; color: var(--pv2-primary-600) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--pv2-primary-050) !important; border: 1px solid var(--pv2-primary-100) !important;
  color: var(--pv2-primary-600) !important; border-radius: var(--pv2-radius-sm) !important;
}

/* ----- A2 · datepickers ----- */
.flatpickr-calendar {
  border-radius: var(--pv2-radius) !important; border: 1px solid var(--pv2-border) !important;
  box-shadow: var(--pv2-shadow) !important; background: var(--pv2-surface) !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--pv2-primary) !important; border-color: var(--pv2-primary) !important; }
.flatpickr-day.today { border-color: var(--pv2-primary) !important; }
.flatpickr-day:hover { background: var(--pv2-border-2) !important; }
.datepicker {
  border-radius: var(--pv2-radius-sm) !important; border: 1px solid var(--pv2-border) !important;
  box-shadow: var(--pv2-shadow) !important; background: var(--pv2-surface) !important;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .datepicker table tr td.active.active:hover {
  background: var(--pv2-primary) !important; border-color: var(--pv2-primary) !important; background-image: none !important;
}
.datepicker table tr td.today { background: var(--pv2-primary-050) !important; color: var(--pv2-primary-600) !important; }

/* ----- A3 · dropdowns / menús contextuales del theme ----- */
.dropdown-menu {
  border-radius: var(--pv2-radius) !important; border: 1px solid var(--pv2-border) !important;
  box-shadow: var(--pv2-shadow) !important; padding: 6px !important;
}
.dropdown-item { border-radius: var(--pv2-radius-sm); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--pv2-border-2) !important; color: var(--pv2-ink) !important; }
.dropdown-divider { border-top-color: var(--pv2-border-2) !important; }

/* ----- A4 · reconciliar DARK en contenido viejo + widgets portaled ----- */
body.dark .select2-dropdown,
body.dark .select2-container--default .select2-selection--single,
body.dark .select2-container--default .select2-selection--multiple,
body.dark .flatpickr-calendar, body.dark .datepicker, body.dark .dropdown-menu {
  background: var(--pv2-surface) !important; color: var(--pv2-ink) !important; border-color: var(--pv2-border) !important;
}
body.dark .select2-container--default .select2-selection__rendered,
body.dark .flatpickr-day, body.dark .datepicker td, body.dark .dropdown-item { color: var(--pv2-ink-2) !important; }
body.dark .pv2-content .card, body.dark .pv2-content .iq-card { background: var(--pv2-surface) !important; }
/* El :not() salva a los badges. Este bloque existe para rescatar el texto de
   las pantallas viejas en modo oscuro, pero pintaba TODOS los <span> del color
   de tinta —incluidos los .pv2-badge, que son <span>— con !important. En
   oscuro quedaban en tinta clara sobre su fondo pastel claro: contraste ~1:1,
   o sea todos los estados del panel (viaje, pago, documento, queja) ilegibles.
   Se excluyen también los textos que a propósito van atenuados. */
body.dark .pv2-content, body.dark .pv2-content p,
body.dark .pv2-content td:not(.pv2-table td),
body.dark .pv2-content span:not(.pv2-badge):not([class*="__soft"]):not([class*="__label"]),
body.dark .pv2-content label, body.dark .pv2-content h1,
body.dark .pv2-content h2, body.dark .pv2-content h3, body.dark .pv2-content h4 { color: var(--pv2-ink) !important; }
body.dark .pv2-content .text-dark, body.dark .pv2-content .text-muted { color: var(--pv2-ink-2) !important; }
body.dark .pv2-content .table td { border-color: var(--pv2-border-2) !important; }
body.dark .pv2-content .form-control, body.dark .modal-content .form-control,
body.dark .pv2-content select, body.dark .modal-content {
  background: var(--pv2-surface-2) !important; color: var(--pv2-ink) !important; border-color: var(--pv2-border) !important;
}

/* ============================================================================
   FIX contraste: los .pv2-btn son <a> dentro de .pv2-content, y `.pv2-content a`
   (morado) les ganaba en especificidad → texto morado sobre botón morado.
   ========================================================================== */
.pv2-content a.pv2-btn, .pv2-content a.pv2-btn:hover { color: var(--pv2-ink-2); text-decoration: none; }
.pv2-content a.pv2-btn--primary, .pv2-content a.pv2-btn--primary:hover,
.pv2-btn--primary, .pv2-btn--primary i, .pv2-btn--primary:hover { color: #fff !important; }
.pv2-content a.pv2-btn i { color: inherit; }

/* ============================================================================
   Botón de ícono del topbar (dark toggle) + estado de carga de DataTables.
   ========================================================================== */
.pv2-iconbtn {
  width: 38px; height: 38px; border-radius: var(--pv2-radius-sm); border: 1px solid var(--pv2-border);
  background: var(--pv2-surface); color: var(--pv2-ink-2); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; transition: all .12s;
}
.pv2-iconbtn:hover { background: var(--pv2-border-2); color: var(--pv2-primary); }

/* Estado de carga de DataTables: que NO se vea vacío mientras llega el AJAX. */
.dataTables_wrapper { position: relative; }
.dataTables_processing {
  position: absolute !important; top: 120px; left: 50% !important; transform: translateX(-50%);
  z-index: 20; background: var(--pv2-surface) !important; border: 1px solid var(--pv2-border) !important;
  border-radius: var(--pv2-radius) !important; box-shadow: var(--pv2-shadow) !important;
  padding: 12px 20px !important; color: var(--pv2-ink-2) !important; font-weight: 600; font-size: 13px; width: auto !important;
}
.dataTables_processing::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -3px;
  border: 2px solid var(--pv2-border); border-top-color: var(--pv2-primary); border-radius: 50%;
  animation: pv2spin .7s linear infinite;
}
@keyframes pv2spin { to { transform: rotate(360deg); } }

/* Buscador del topbar (búsqueda global) */
.pv2-topsearch { display: flex; align-items: center; gap: 8px; background: var(--pv2-surface-2);
  border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-pill); padding: 0 14px; flex: 0 1 340px; max-width: 360px; }
.pv2-topsearch i { color: var(--pv2-muted); font-size: 13px; }
.pv2-topsearch input { border: 0; background: transparent; outline: none; padding: 9px 0; font-size: 14px; color: var(--pv2-ink); width: 100%; }
.pv2-topsearch input::placeholder { color: var(--pv2-muted); }
@media (max-width: 760px) { .pv2-topsearch { display: none; } }

/* Filtros de fecha (preset pills) */
.pv2-filters { display: inline-flex; gap: 3px; background: var(--pv2-surface-2); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-pill); padding: 3px; }
.pv2-filter { padding: 6px 12px; border-radius: var(--pv2-radius-pill); font-size: 13px; font-weight: 600; color: var(--pv2-ink-2); text-decoration: none; white-space: nowrap; }
.pv2-filter:hover { color: var(--pv2-ink); text-decoration: none; }
.pv2-filter.is-active { background: var(--pv2-primary); color: #fff !important; }

/* Rango personalizado (from/to) — popover nativo con <details>, sin JS. */
.pv2-filter-range { position: relative; display: inline-flex; }
.pv2-filter-range > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.pv2-filter-range > summary::-webkit-details-marker { display: none; }
.pv2-filter-range > summary::marker { content: ''; }
.pv2-filter-range__pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 10px; min-width: 220px;
    background: var(--pv2-surface); border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius); box-shadow: var(--pv2-shadow); padding: 14px;
}
.pv2-filter-range__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--pv2-ink-2); }
.pv2-filter-range__field input[type="date"] {
    padding: 7px 10px; border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-sm);
    background: var(--pv2-surface); color: var(--pv2-ink); font-size: 13px; font-weight: 500;
}
.pv2-filter-range__field input[type="date"]:focus { outline: none; border-color: var(--pv2-primary); box-shadow: 0 0 0 3px var(--pv2-primary-050, rgba(109,52,214,.15)); }
.pv2-filter-range__apply { justify-content: center; margin-top: 2px; }

/* ── La barra de fechas en un telefono ─────────────────────────────────────
 *
 * Medido el 19-sep-2026 con tools/medir-movil.mjs a 360x640: esta barra
 * arrastraba la pagina entera **109px de lado** en las SIETE pantallas de
 * operacion —tablero, viajes, pagos, cancelaciones, surge, choferes y
 * pasajeros—, porque son seis pastillas `nowrap` dentro de un `inline-flex`
 * que no envuelve. Nunca habia salido porque el medidor solo miraba
 * formularios viejos.
 *
 * Y cada pastilla medía 28px de alto, con 44 de minimo para un dedo.
 *
 * Se arregla solo en pantalla estrecha: en escritorio la barra se queda
 * exactamente como estaba. */
@media (max-width: 720px) {
    .pv2-filters {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* Alto de dedo. `inline-flex` + `align-items` para que el texto siga
       centrado ahora que la pastilla es mas alta que su linea. */
    .pv2-filter {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* El desplegable del rango: pegado al borde derecho se salia de la
       pantalla al abrirse. Se ancla a la izquierda y se deja que crezca
       hasta donde haya sitio, no mas. */
    .pv2-filter-range__pop {
        right: auto;
        left: 0;
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 48px);
    }

    /* La cabecera de una tarjeta lleva titulo, subtitulo y a veces acciones
       en un flex que no envuelve: en el tablero se salia 56px. Que baje lo
       que no quepa. */
    .pv2-card__head {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Y las acciones dejan de empujar: con `margin-left:auto` en una sola
       linea se comen el ancho del titulo. */
    .pv2-card__actions { margin-left: 0; }

    /* ── Lo que quedaba suelto en las pantallas VIEJAS ──────────────────
     *
     * Medido el 21-sep-2026 volcando las 117 pantallas del panel (no solo las
     * 29 de la lista fija). Tres se salian, cada una por su motivo, y las
     * tres estan aqui con el suyo escrito.
     *
     * ⚠️ En la primera pasada «fallaban» ocho. Cuatro eran FALSOS POSITIVOS
     * del propio arnes: contenido de modales que el panel inyecta en una
     * pagina ya abierta, medidos sueltos y por tanto sin hoja de estilos. El
     * volcador ya los descarta. */

    /* Los formularios viejos traen un `textarea` con `cols`, que manda mas
     * que el ancho de su caja. */
    textarea, input[type="text"], input[type="email"], input[type="number"], select {
        max-width: 100%;
    }

    /* PERMISOS — «titulo + botones» en un flex que no envuelve: 409px dentro
     * de una pantalla de 360. No se toca la utilidad `.d-flex` a secas, que
     * la usa medio panel; solo este patron, que es el que rompe. */
    .card-body > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pv2-btn { max-width: 100%; white-space: normal; }

    /* VERIFICAR CHOFERES — el par «Con pendientes / Todos» es otra fila de
     * pastillas que no envolvia: 37px. Y median 42, con 44 de minimo. */
    .rev-toggle { display: flex; flex-wrap: wrap; }
    .rev-toggle__btn { min-height: 44px; display: inline-flex; align-items: center; }

    /* REFERIDOS — el aviso cita un identificador tecnico,
     * `usage_limit_per_rider`, que no tiene un solo espacio donde partir. Una
     * palabra que no parte empuja la pagina entera. */
    .alert em, .alert code, .pv2-empty code { overflow-wrap: anywhere; }

    /* Y su tabla de escalones no tiene carril propio: que se deslice ella. */
    #tabla-escalones { display: block; overflow-x: auto; max-width: 100%; }

    /* ASISTENTE — la columna de trabajo se pasaba 6px. `min-width: 0` es lo
     * que de verdad hace falta: sin el, un hijo flex nunca baja de su
     * contenido por mucho `max-width` que se le ponga al padre. */
    .ai-page, .ai-shell, .ai-workspace, .ai-side { max-width: 100%; min-width: 0; }
}

/* ============================================================================
   #3 Impresión / Exportar a PDF (window.print): oculta chrome, deja el contenido limpio.
   ========================================================================== */
@media print {
  .pv2-sidebar, .pv2-topbar, .pv2-burger, .pv2-page-header__actions, .pv2-filters,
  .mm-sidebar, .mm-top-navbar, .dataTables_length, .dataTables_filter, .dataTables_paginate,
  .dataTables_info, #loading { display: none !important; }
  .pv2-shell { display: block !important; }
  .pv2-main { display: block !important; }
  .pv2-content, .content-page { padding: 0 !important; margin: 0 !important; }
  .pv2-card, .pv2-kpi, .iq-card, .card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
  .pv2-kpi-grid, .pv2-grid-2 { display: grid !important; }
  body, body.dark { background: #fff !important; }
}
/* cursor pointer en gráficas con drill-down */
.apexcharts-bar-series .apexcharts-bar-area, .apexcharts-pie-series path { cursor: pointer; }

/* KPI clicable: la tarjeta entera lleva al detalle. */
.pv2-kpi--link { cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.pv2-kpi--link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.pv2-kpi--link:hover .pv2-kpi__label { text-decoration: underline; }


/* Menú de la cuenta en la barra superior. Va aquí y no en un @push('styles')
   del partial: la pila de estilos se imprime en el <head> y el partial se
   renderiza en el <body>, así que ese push nunca llegaría. */
.pv2-user { position: relative; }
    .pv2-user__menu {
        display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200;
        min-width: 190px; background: var(--pv2-surface); border: 1px solid var(--pv2-border);
        border-radius: var(--pv2-radius-sm); box-shadow: var(--pv2-shadow); padding: 5px; overflow: hidden;
    }
    .pv2-user.is-open .pv2-user__menu { display: block; }
    .pv2-user__menu a, .pv2-user__menu button {
        display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
        padding: 8px 11px; font-size: 13.5px; color: var(--pv2-ink); text-decoration: none;
        background: none; border: 0; cursor: pointer; border-radius: 7px; font-family: inherit;
    }
    .pv2-user__menu a:hover, .pv2-user__menu button:hover { background: var(--pv2-surface-2); }
    .pv2-user__menu form { margin: 0; border-top: 1px solid var(--pv2-border); margin-top: 4px; padding-top: 4px; }
    .pv2-user__menu button { color: var(--pv2-danger); }

/* Selector de plantilla de correo: 13 tipos, uno activo. */
.mt-mails { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-mail {
  padding: 7px 13px; border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-pill);
  font-size: 13px; color: var(--pv2-ink-2); text-decoration: none; background: var(--pv2-surface);
  transition: all .12s ease;
}
.mt-mail:hover { border-color: var(--pv2-primary); color: var(--pv2-primary); text-decoration: none; }
.mt-mail.is-on { background: var(--pv2-primary); border-color: var(--pv2-primary); color: #fff; font-weight: 600; }

/* Pestañas de Ajustes (13) y demás nav-tabs legacy: se dejan como <ul> porque
   el JS de carga por AJAX depende de su estructura, pero se visten como el
   resto del panel — antes eran las pestañas grises de Bootstrap. */
.pv2-content .nav-tabs {
  border-bottom: 1px solid var(--pv2-border); gap: 2px; flex-wrap: wrap; margin-bottom: 18px;
}
.pv2-content .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--pv2-radius-sm) var(--pv2-radius-sm) 0 0;
  color: var(--pv2-ink-2); font-size: 13.5px; font-weight: 600; padding: 9px 14px; transition: all .12s ease;
}
.pv2-content .nav-tabs .nav-link:hover { background: var(--pv2-surface-2); color: var(--pv2-ink); border-bottom-color: var(--pv2-border-2); }

/* ============================================================================
   FORMULARIOS VIEJOS (los ~70 *form*.blade.php en Bootstrap).
   Se visten desde aquí en vez de editarlos uno por uno: todos renderizan
   dentro de .pv2-content y repiten las mismas clases —form-control-label,
   form-group col-md-*, card border-radius-20, btn border-radius-10— así que
   una hoja de estilos los alcanza a todos sin tocar su JS ni sus validaciones.
   ========================================================================== */

/* La etiqueta de cada campo: era texto plano del theme. */
.pv2-content .form-control-label,
.pv2-content label:not(.form-check-label):not(.custom-control-label) {
  font-size: 12px; font-weight: 600; color: var(--pv2-ink-2);
  margin-bottom: 5px; display: block;
}
/* El asterisco de obligatorio, en el rojo del sistema. */
.pv2-content .form-control-label .text-danger,
.pv2-content label .text-danger { color: var(--pv2-danger) !important; font-weight: 700; }

/* Aire entre campos: venían pegados. */
.pv2-content .form-group { margin-bottom: 16px; }

/* El radio de 20px del theme es más redondo que el resto del panel. */
.pv2-content .card.border-radius-20,
.pv2-content .border-radius-20 { border-radius: var(--pv2-radius) !important; }

/* Cabecera de las cards de formulario. */
.pv2-content .card-header {
  background: transparent; border-bottom: 1px solid var(--pv2-border-2);
  padding: 15px 20px; border-radius: var(--pv2-radius) var(--pv2-radius) 0 0;
}
.pv2-content .card-header .card-title,
.pv2-content .card-header h4, .pv2-content .card-header h5 {
  font-size: 15.5px; font-weight: 700; color: var(--pv2-ink); margin: 0;
}

/* Botón de guardar: el theme lo manda con float-right y radio propio. */
.pv2-content .btn.border-radius-10 { border-radius: var(--pv2-radius-sm) !important; }
.pv2-content .btn { font-weight: 600; }

/* Campos: altura y foco coherentes con .pv2-input. */
.pv2-content .form-control, .pv2-content .custom-select,
.pv2-content .select2-container--default .select2-selection--single {
  border-radius: var(--pv2-radius-sm); border-color: var(--pv2-border);
  font-size: 13.5px; color: var(--pv2-ink); background: var(--pv2-surface);
}
.pv2-content .form-control:focus, .pv2-content .custom-select:focus {
  border-color: var(--pv2-primary); box-shadow: 0 0 0 3px var(--pv2-primary-050);
}
.pv2-content .form-control::placeholder { color: var(--pv2-muted); }
/* Un campo con error se ve como error, no solo con el mensaje debajo. */
.pv2-content .form-control.is-invalid, .pv2-content .is-invalid .form-control { border-color: var(--pv2-danger); }
.pv2-content .invalid-feedback, .pv2-content .text-danger small { color: var(--pv2-danger); font-size: 12px; }

/* ----- Ajustes: menú lateral agrupado ---------------------------------- */
/* Eran 14 pestañas en una fila horizontal que se partía en varios renglones.
   En columna y por tema se escanean de un vistazo. Se mantiene el markup
   nav-tabs/nav-item porque el JS de carga AJAX depende de él. */
.pv2-set { display: grid; grid-template-columns: 232px 1fr; gap: 22px; align-items: start; }
.pv2-set__nav {
  display: block; border: 0; margin: 0; padding: 0; list-style: none;
  border-right: 1px solid var(--pv2-border); padding-right: 14px; min-height: 320px;
}
.pv2-set__grp {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--pv2-muted); padding: 14px 10px 5px; list-style: none;
}
.pv2-set__grp:first-child { padding-top: 2px; }
.pv2-set__nav .nav-item { display: block; }
.pv2-set__nav .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; margin-bottom: 1px; border: 0 !important;
  border-radius: var(--pv2-radius-sm); font-size: 13.5px; font-weight: 500;
  color: var(--pv2-ink-2); transition: background .12s ease, color .12s ease;
}
.pv2-set__nav .nav-link i { width: 17px; text-align: center; font-size: 14px; color: var(--pv2-muted); }
.pv2-set__nav .nav-link:hover { background: var(--pv2-surface-2); color: var(--pv2-ink); }
.pv2-set__nav .nav-link.active {
  background: var(--pv2-primary-050); color: var(--pv2-primary-600) !important;
  font-weight: 600; border: 0 !important;
}
.pv2-set__nav .nav-link.active i { color: var(--pv2-primary); }
.pv2-set__panel { min-width: 0; }

/* En pantalla chica el menú vuelve arriba, en horizontal con scroll. */
@media (max-width: 900px) {
  .pv2-set { grid-template-columns: 1fr; gap: 14px; }
  .pv2-set__nav {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px;
    border-right: 0; border-bottom: 1px solid var(--pv2-border);
    padding: 0 0 8px; min-height: 0;
  }
  .pv2-set__grp { display: none; }
  .pv2-set__nav .nav-link { white-space: nowrap; }
}

/* ==========================================================================
   Bitácora — la tabla de auditoría.

   El detalle de cada acción es un volcado de campos del formulario. Pintado
   como una línea corrida de `campo=valor · campo=valor`, un alta grande
   ocupaba media pantalla y no se distinguía el dato del separador. Aquí se
   trata como lo que es —una lista de pares— y se recorta a los primeros,
   con el resto detrás de un <details>.
   ========================================================================== */

.pv2-audit__filtros {
    display: flex;
    flex-wrap: wrap;          /* con 4 filtros + 2 botones ya no cabe en una línea */
    gap: 8px;
    align-items: center;
}

.pv2-audit__filtros .pv2-input { min-width: 0; }
.pv2-audit__filtros input[type="date"] { max-width: 150px; }

.pv2-audit__aviso {
    margin: 0 0 var(--pv2-space, 16px);
    padding: 10px 14px;
    border: 1px solid var(--pv2-border);
    border-left: 3px solid var(--pv2-info);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-info-bg);
    color: var(--pv2-ink-2);
    font-size: 13px;
}

/* La columna que se desbordaba. Con un techo, las filas dejan de tener
   alturas dispares y la tabla vuelve a escanearse de un vistazo. */
.pv2-audit__detalle {
    /* RG-051 (QA 14-20 oct): sin ancho mínimo la tabla la encogía a una
       letra y cada palabra salía en vertical. */
    min-width: 260px;
    max-width: 420px;
    font-size: 12px;
    color: var(--pv2-ink-2);
}

.pv2-audit__campos {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}

.pv2-audit__campos li {
    display: flex;
    gap: 6px;
    align-items: baseline;
    /* Un valor largo (una URL, un JSON recortado) no debe ensanchar la tabla,
       pero tampoco partir palabras normales: break-word solo corta lo que no
       cabe, sin bajar el ancho mínimo de la celda a un carácter (RG-051). */
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 0;
}

/* El nombre del campo es la etiqueta, no el dato: se distingue por color y
   por la tipografía monoespaciada, sin gritar. */
.pv2-audit__campo {
    flex: 0 0 auto;
    color: var(--pv2-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.pv2-audit__mas > summary {
    cursor: pointer;
    margin-top: 4px;
    color: var(--pv2-primary);
    font-size: 12px;
    user-select: none;
}

.pv2-audit__mas > summary:hover { text-decoration: underline; }
.pv2-audit__mas[open] > summary { margin-bottom: 4px; }
.pv2-audit__mas > .pv2-audit__campos { padding-left: 2px; }

/* Las filas de la bitácora son de altura muy distinta segun el detalle;
   alinear arriba evita que la fecha quede flotando a media fila. */
.pv2-audit tbody td { vertical-align: top; }

/* El morado de marca sobre superficie oscura da 2.5:1 — por debajo de AA. No
   se redefine `--pv2-primary` entero porque también hace de FONDO en botones,
   donde aclararlo rompería el contraste del texto blanco encima. Aquí solo se
   aclara donde es texto, con el mismo morado que usan las apps en oscuro. */
body.dark .pv2-audit__mas > summary,
body.dark-mode .pv2-audit__mas > summary,
html.dark .pv2-audit__mas > summary { color: #b69de0; }

/* Aviso flotante de trabajo nuevo en una cola (documentos, quejas, SOS,
   cancelaciones, tablero). Va anclado abajo al centro para que no tape la lista
   ni las acciones de cada tarjeta, y solo aparece cuando de verdad entró algo. */
.cola-nuevos {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--pv2-radius-pill, 999px);
    background: var(--pv2-primary);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--pv2-shadow);
    cursor: pointer;
    animation: cola-nuevos-entra .25s ease-out;
}

.cola-nuevos:hover { background: var(--pv2-primary-600, var(--pv2-primary)); }
.cola-nuevos:focus-visible { outline: 2px solid var(--pv2-ink); outline-offset: 2px; }

@keyframes cola-nuevos-entra {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Quien pidió menos movimiento no ve el rebote, solo el aviso. */
@media (prefers-reduced-motion: reduce) {
    .cola-nuevos { animation: none; }
}

/* ==========================================================================
   Tablero de Operación — tareas internas.

   Todo cuelga de los tokens del panel para que el modo oscuro salga solo. Los
   estilos van aquí y no en @push('styles') porque desde el cuerpo nunca llegan
   al <head>: ya nos pasó dos veces.
   ========================================================================== */

/* Las clases .tab-mio__* y .tab-card de la primera versión del índice se
   retiraron con el rediseño: la lista plana pasó a agenda agrupada (.ag__*) y
   las tarjetas de tablero a lista compacta (.tb). Se quitan en vez de dejarlas
   por si acaso — CSS que nadie usa es CSS que nadie se atreve a borrar después. */

/* --- Filtros y tabla --- */
.tab-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}
.tab-filtros .pv2-input { min-width: 0; }

.tab-tabla__desc { color: var(--pv2-muted); font-size: .84rem; margin-top: 3px; }
.tab-tabla__acts { width: 150px; }
.pv2-input--sm { padding: 4px 8px; font-size: .85rem; }

/* Una tarea cerrada sigue visible pero deja de competir por la atención. */
.tab-fila--lista td { opacity: .55; }
.tab-fila--lista strong { text-decoration: line-through; }

/* El estado toma el color que el operador le puso en el tablero. */
.tab-estado {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--pv2-radius-pill, 999px);
    font-size: .78rem;
    font-weight: 600;
    color: var(--c, var(--pv2-muted));
    border: 1px solid currentColor;
    white-space: nowrap;
}

.tab-origen {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    color: var(--pv2-ink-2);
}

.tab-pag { margin-top: 16px; }

/* --- Diálogo de alta --- */
.tab-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(15, 12, 25, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tab-modal[hidden] { display: none; }

.tab-modal__box {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius, 12px);
    box-shadow: var(--pv2-shadow);
    padding: 26px 28px;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tab-modal__box h3 { margin: 0 0 4px; }
.tab-modal__hint { margin: 0 0 10px; color: var(--pv2-muted); font-size: .87rem; }
.tab-modal__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tab-modal__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.tab-lbl {
    display: block;
    margin: 10px 0 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--pv2-ink-2);
}
.tab-lbl span { font-weight: 400; color: var(--pv2-muted); }

/* --- Ficha de una tarea --- */
.tab-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .tab-ficha { grid-template-columns: 1fr; }
}
.tab-ficha__main, .tab-ficha__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tab-ficha__h { margin: 0 0 12px; font-size: .95rem; }
.tab-ficha__desc { margin: 0; white-space: pre-line; }

.tab-ficha__origen {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pv2-border);
    color: var(--pv2-ink-2);
    font-size: .9rem;
}
.tab-ficha__origen i { color: var(--pv2-muted); margin-right: 6px; }

.tab-ficha__form { display: contents; }

.tab-ficha__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--pv2-border);
    color: var(--pv2-muted);
    font-size: .82rem;
}
.tab-ficha__cerrada { color: var(--pv2-success); font-weight: 600; }

.tab-tabla__link { color: var(--pv2-ink); text-decoration: none; }
.tab-tabla__link:hover { color: var(--pv2-primary); text-decoration: underline; }

/* --- Conversación --- */
.tab-com { padding: 12px 0; border-top: 1px solid var(--pv2-border); }
.tab-com:first-of-type { border-top: 0; padding-top: 0; }
.tab-com__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.tab-com__head span { color: var(--pv2-muted); font-size: .8rem; }
.tab-com__body { margin: 0; white-space: pre-line; color: var(--pv2-ink-2); }
.tab-com__form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pv2-border); }

.tab-seg { padding: 5px 0; color: var(--pv2-ink-2); font-size: .9rem; }

/* --- Historial --- */
.tab-hist {
    padding: 8px 0;
    border-top: 1px solid var(--pv2-border);
    font-size: .85rem;
    color: var(--pv2-ink-2);
    line-height: 1.5;
}
.tab-hist:first-of-type { border-top: 0; }
.tab-hist__q { font-weight: 600; color: var(--pv2-ink); }
.tab-hist em { font-style: normal; color: var(--pv2-ink); }
.tab-hist__c { display: block; color: var(--pv2-muted); font-size: .78rem; }

/* --- Kanban --- */
.kb {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 12px;
}

.kb__col {
    flex: 0 0 288px;
    background: var(--pv2-surface-2);
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius, 12px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 260px);
}

.kb__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pv2-border);
}
.kb__head h3 { margin: 0; font-size: .9rem; flex: 1; }
.kb__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--pv2-muted)); }
.kb__n {
    font-size: .78rem;
    color: var(--pv2-muted);
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-pill, 999px);
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}

.kb__zona {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 90px;
    border-radius: 0 0 var(--pv2-radius, 12px) var(--pv2-radius, 12px);
}
/* La columna donde va a caer se marca: sin eso no se sabe si soltar ahí vale. */
.kb__zona--activa { background: var(--pv2-primary-050); outline: 2px dashed var(--pv2-primary); outline-offset: -6px; }

.kb__card {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 4px 1fr;
    gap: 10px;
    align-items: start;
    cursor: grab;
    box-shadow: var(--pv2-shadow-sm);
}
.kb__card:active { cursor: grabbing; }
.kb__card--viajando { opacity: .4; }

.kb__title {
    grid-column: 2;
    color: var(--pv2-ink);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.kb__title:hover { color: var(--pv2-primary); }

.kb__meta {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.kb__quien { font-size: .78rem; color: var(--pv2-ink-2); }
.kb__quien--libre { color: var(--pv2-muted); font-style: italic; }

.kb__vacia { margin: 6px 0; color: var(--pv2-muted); font-size: .84rem; text-align: center; }

/* Quien pidió menos movimiento no ve la tarjeta desvanecerse. */
@media (prefers-reduced-motion: reduce) {
    .kb__card--viajando { opacity: 1; }
}

/* --- Calendario --- */
.cal { min-height: 480px; }

/* FullCalendar trae su propio tema claro. Se le pasan los tokens del panel
   para que el modo oscuro no lo deje con una rejilla blanca sobre fondo negro. */
.cal .fc-view-container,
.cal .fc-head-container,
.cal .fc-body { background: var(--pv2-surface); }
.cal .fc-day-header,
.cal .fc-day-top { color: var(--pv2-ink-2); }
.cal .fc-toolbar h2 { font-size: 1.1rem; color: var(--pv2-ink); }
.cal .fc-widget-header,
.cal .fc-widget-content { border-color: var(--pv2-border) !important; }
.cal .fc-day-number { color: var(--pv2-ink-2); }
.cal .fc-today { background: var(--pv2-primary-050) !important; }
.cal .fc-event { border: 0; padding: 1px 5px; font-size: .78rem; cursor: pointer; }
.cal .fc-list-item td { background: var(--pv2-surface); color: var(--pv2-ink); border-color: var(--pv2-border); }
.cal .fc-list-heading td { background: var(--pv2-surface-2); color: var(--pv2-ink-2); }
.cal .fc-button {
    background: var(--pv2-surface);
    border-color: var(--pv2-border);
    color: var(--pv2-ink-2);
    text-transform: none;
    box-shadow: none;
}
.cal .fc-button:hover { background: var(--pv2-surface-2); }
.cal .fc-button-active,
.cal .fc-button:focus { background: var(--pv2-primary); border-color: var(--pv2-primary); color: #fff; }

.cal-leyenda { display: flex; gap: 14px; align-items: center; margin-left: auto; font-size: .82rem; color: var(--pv2-muted); }
.cal-leyenda span { display: flex; align-items: center; gap: 6px; }
.cal-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ==========================================================================
   Tablero de Operación — rediseño de interfaz.

   Tres problemas concretos que se arreglan aquí:
   1. El índice mezclaba "mis tareas" y "los tableros" sin jerarquía.
   2. La tabla tenía 7 columnas, dos de ellas casi siempre vacías, y un
      desplegable por fila: 50 controles compitiendo en pantalla.
   3. La ficha apilaba cuatro cajas en la barra lateral.
   ========================================================================== */

/* --- Agenda: mis tareas agrupadas por urgencia --- */
.ag { display: flex; flex-direction: column; gap: 22px; margin-bottom: 34px; }

.ag__titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pv2-muted);
}
.ag__n {
    font-size: .74rem;
    background: var(--pv2-surface-2);
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-pill, 999px);
    padding: 0 8px;
    letter-spacing: 0;
}
/* El grupo urgente se distingue por el color del rótulo, no por un fondo de
   alarma: teñir el bloque entero grita y cansa. */
.ag__bloque--danger  .ag__titulo { color: var(--pv2-danger); }
.ag__bloque--danger  .ag__n { border-color: var(--pv2-danger); color: var(--pv2-danger); }
.ag__bloque--warning .ag__titulo { color: var(--pv2-warning); }
.ag__bloque--warning .ag__n { border-color: var(--pv2-warning); color: var(--pv2-warning); }

.ag__lista {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius, 12px);
    overflow: hidden;
}

.ag__fila {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 11px 16px;
    border-top: 1px solid var(--pv2-border);
    color: var(--pv2-ink);
    text-decoration: none;
}
.ag__fila:first-child { border-top: 0; }
.ag__fila:hover { background: var(--pv2-surface-2); }

.ag__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag__tit { font-weight: 500; overflow-wrap: anywhere; }
.ag__ctx { font-size: .8rem; color: var(--pv2-muted); }
.ag__fecha { font-size: .84rem; color: var(--pv2-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La prioridad como franja. Nunca va sola: lleva su nombre en el title. */
.ag__pri { display: block; width: 4px; height: 26px; border-radius: 2px; background: var(--pv2-border-2); }
.ag__pri--baja    { background: var(--pv2-border-2); }
.ag__pri--media   { background: var(--pv2-info); }
.ag__pri--alta    { background: var(--pv2-warning); }
.ag__pri--critica { background: var(--pv2-danger); }

/* --- Tableros: una lista compacta, no tarjetas grandes --- */
.tab-sep { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.tab-sec { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pv2-muted); }
.pv2-btn--sm { padding: 4px 10px; font-size: .82rem; }

.tb {
    display: grid;
    grid-template-columns: 4px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-bottom: 0;
    color: var(--pv2-ink);
    text-decoration: none;
}
.tb:first-of-type { border-radius: var(--pv2-radius, 12px) var(--pv2-radius, 12px) 0 0; }
.tb:last-of-type  { border-radius: 0 0 var(--pv2-radius, 12px) var(--pv2-radius, 12px); border-bottom: 1px solid var(--pv2-border); }
.tb:hover { background: var(--pv2-surface-2); }
.tb__bar { height: 26px; border-radius: 2px; }
.tb__nombre { font-weight: 500; }
.tb__equipo { font-size: .8rem; color: var(--pv2-muted); }
.tb__cifras { display: flex; gap: 10px; align-items: center; font-size: .8rem; }
.tb__ab { color: var(--pv2-muted); }
.tb__venc { color: var(--pv2-danger); font-weight: 600; }

/* --- Cambio de vista: navegación, no filtro --- */
.vistas { display: inline-flex; gap: 2px; background: var(--pv2-surface-2);
          border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-sm, 8px);
          padding: 3px; margin-bottom: 14px; }
.vistas__op {
    padding: 5px 13px;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--pv2-ink-2);
    text-decoration: none;
}
.vistas__op:hover { background: var(--pv2-surface); }
.vistas__op--on { background: var(--pv2-surface); color: var(--pv2-ink); font-weight: 600; box-shadow: var(--pv2-shadow-sm); }
.vistas__op i { margin-right: 5px; font-size: .8em; }

/* --- Filtros: el buscador manda, el resto acompaña --- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filtros__buscar { position: relative; flex: 1 1 240px; min-width: 200px; }
.filtros__buscar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pv2-muted); font-size: .85rem; }
.filtros__buscar input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
    color: var(--pv2-ink);
    font: inherit;
    font-size: .9rem;
}
.filtros__buscar input:focus { outline: 2px solid var(--pv2-primary); outline-offset: -1px; }
.filtros__limpiar { font-size: .84rem; color: var(--pv2-muted); }

/* --- Tabla de tareas: cuatro columnas --- */
.tar__link { display: grid; grid-template-columns: 4px 1fr; gap: 11px; align-items: start; color: var(--pv2-ink); text-decoration: none; }
.tar__link:hover .tar__tit { color: var(--pv2-primary); }
.tar__tit { display: block; font-weight: 500; }
.tar__origen { display: block; margin-top: 3px; font-size: .76rem; color: var(--pv2-muted);
               font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tar__origen i { margin-right: 4px; }
.tar__nada { color: var(--pv2-muted); font-size: .86rem; }
.tar__vence { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tar__tarde { color: var(--pv2-danger); font-weight: 600; }
.tar__hace { display: block; font-size: .75rem; color: var(--pv2-danger); }
.tar--lista td { opacity: .5; }
.tar--lista .tar__tit { text-decoration: line-through; }

/* --- Pestañas de la ficha --- */
.pest { display: flex; gap: 4px; border-bottom: 1px solid var(--pv2-border); margin-bottom: 16px; }
.pest__op {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 7px 12px;
    font: inherit;
    font-size: .9rem;
    color: var(--pv2-muted);
    cursor: pointer;
    margin-bottom: -1px;
}
.pest__op--on { color: var(--pv2-ink); border-bottom-color: var(--pv2-primary); font-weight: 600; }
.pest__n { font-size: .75rem; color: var(--pv2-muted); margin-left: 3px; }

/* --- Pie de la barra lateral --- */
.side__pie { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pv2-border); display: flex; flex-direction: column; gap: 7px; }
.side__linea { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; }
.side__linea span { color: var(--pv2-muted); }
.side__linea strong { font-weight: 500; text-align: right; }

/* --- Miga de pan --- */
.miga { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .84rem; color: var(--pv2-muted); }
.miga a { color: var(--pv2-muted); text-decoration: none; }
.miga a:hover { color: var(--pv2-primary); }
.miga i { font-size: .65em; }

/* --- Barra de mando del tablero --- */
.mando {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mando__izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mando__der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mando__titulo { margin: 0; font-size: 1.35rem; font-weight: 650; letter-spacing: -.015em; }
.mando__sel {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--pv2-ink);
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 3px 6px;
    max-width: 320px;
    cursor: pointer;
}
.mando__sel:hover { background: var(--pv2-surface-2); }
.mando__equipo { font-size: .82rem; color: var(--pv2-muted); }

.mando__buscar { position: relative; }
.mando__buscar i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--pv2-muted); font-size: .82rem; }
.mando__buscar input {
    width: 190px;
    padding: 7px 11px 7px 32px;
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
    color: var(--pv2-ink);
    font: inherit;
    font-size: .88rem;
}
.mando__buscar input:focus { outline: 2px solid var(--pv2-primary); outline-offset: -1px; }

.mando__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
    color: var(--pv2-ink-2);
    font-size: .87rem;
    text-decoration: none;
}
.mando__toggle:hover { background: var(--pv2-surface-2); }
.mando__toggle--on {
    background: var(--pv2-primary-050);
    border-color: var(--pv2-primary);
    color: var(--pv2-primary);
    font-weight: 600;
}
.mando__n {
    font-size: .74rem;
    background: var(--pv2-surface);
    border: 1px solid currentColor;
    border-radius: var(--pv2-radius-pill, 999px);
    padding: 0 6px;
}

.mando__ic {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
    color: var(--pv2-ink-2);
    text-decoration: none;
    cursor: pointer;
    font-size: .88rem;
}
.mando__ic:hover { background: var(--pv2-surface-2); color: var(--pv2-primary); }

/* --- Kanban vivo --- */
.kb__col { max-height: calc(100vh - 210px); }
.kb__card--lista { opacity: .5; }
.kb__card--lista .kb__title { text-decoration: line-through; }

/* La tarjeta recién creada se señala un momento: sin eso, en una columna
   larga no se sabe dónde cayó lo que acabas de escribir. */
@keyframes kb-nueva {
    from { background: var(--pv2-primary-050); border-color: var(--pv2-primary); }
    to   { background: var(--pv2-surface); border-color: var(--pv2-border); }
}
.kb__card--nueva { animation: kb-nueva 1.6s ease-out; }

.kb__der { display: flex; align-items: center; gap: 7px; }
.kb__lig { color: var(--pv2-muted); font-size: .72rem; }
.kb__fecha { font-size: .74rem; color: var(--pv2-muted); font-variant-numeric: tabular-nums; }
.kb__fecha--tarde { color: var(--pv2-danger); font-weight: 600; }

/* Alta rápida dentro de la columna */
.kb__mas {
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-top: 1px solid var(--pv2-border);
    color: var(--pv2-muted);
    font: inherit;
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
}
.kb__mas:hover { color: var(--pv2-primary); background: var(--pv2-surface); }

.kb__alta { padding: 9px; border-top: 1px solid var(--pv2-border); }
.kb__alta textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--pv2-primary);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
    color: var(--pv2-ink);
    font: inherit;
    font-size: .86rem;
    resize: vertical;
}
.kb__alta textarea:focus { outline: 2px solid var(--pv2-primary); outline-offset: -1px; }
.kb__alta__pie { display: flex; gap: 6px; margin-top: 7px; }

/* Aviso flotante de lo que acaba de pasar */
.kb__pie {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 60;
    margin: 0;
    padding: 9px 18px;
    border-radius: var(--pv2-radius-pill, 999px);
    background: var(--pv2-ink);
    color: var(--pv2-bg);
    font-size: .86rem;
    box-shadow: var(--pv2-shadow);
}
.kb__pie--mal { background: var(--pv2-danger); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .kb__card--nueva { animation: none; }
}

/* --- Ficha de tarea: cabecera que se lee, no que se rellena --- */
.fic__cab { margin-bottom: 20px; }
.fic__titulo {
    margin: 0 0 10px;
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -.018em;
    line-height: 1.2;
    color: var(--pv2-ink);
}

/* Estado, prioridad, fecha y responsable en una tira: lo que antes solo se
   podía saber abriendo los desplegables de la derecha. */
.fic__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.fic__pri {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: var(--pv2-radius-pill, 999px);
    font-size: .78rem;
    font-weight: 600;
    background: var(--pv2-surface-2);
    color: var(--pv2-ink-2);
}
/* El punto de color va ANTES del texto, y el texto dice la prioridad: el color
   solo acompaña, nunca informa por su cuenta. */
.fic__pri::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fic__pri--baja    { color: var(--pv2-muted); }
.fic__pri--media   { color: var(--pv2-info); }
.fic__pri--alta    { color: var(--pv2-warning); }
.fic__pri--critica { color: var(--pv2-danger); }

.fic__fecha, .fic__quien, .fic__cerrada {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--pv2-ink-2);
}
.fic__fecha i, .fic__quien i, .fic__cerrada i { color: var(--pv2-muted); font-size: .8em; }
.fic__fecha--tarde { color: var(--pv2-danger); font-weight: 600; }
.fic__fecha--tarde i { color: var(--pv2-danger); }
.fic__quien--libre { color: var(--pv2-muted); font-style: italic; }
.fic__cerrada { color: var(--pv2-success); font-weight: 600; }
.fic__cerrada i { color: var(--pv2-success); }

/* El desplegable de responsable se salía de la tarjeta: los select heredan un
   ancho intrínseco del texto más largo de sus opciones y no encogen solos. */
.tab-ficha__side select,
.tab-ficha__side input { width: 100%; max-width: 100%; box-sizing: border-box; }
.tab-ficha__side { min-width: 0; }
.tab-ficha__side .pv2-input { text-overflow: ellipsis; }

/* --- Selector de vista: los tres modos en la misma pantalla --- */
.segm {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--pv2-surface-2);
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
}
.segm__op {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--pv2-ink-2);
    font: inherit;
    font-size: .87rem;
    cursor: pointer;
}
.segm__op:hover { background: var(--pv2-surface); }
.segm__op--on {
    background: var(--pv2-surface);
    color: var(--pv2-primary);
    font-weight: 600;
    box-shadow: var(--pv2-shadow-sm);
}
.segm__op i { font-size: .85em; }
.segm__op:focus-visible { outline: 2px solid var(--pv2-primary); outline-offset: 1px; }

.vista[hidden] { display: none; }

/* --- Aviso de resultado (compartido) --- */
.pv2-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--pv2-border);
    border-left: 3px solid var(--pv2-muted);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
    font-size: .92rem;
    color: var(--pv2-ink);
}
.pv2-aviso i { flex: none; }
.pv2-aviso--ok   { border-left-color: var(--pv2-success); }
.pv2-aviso--ok i { color: var(--pv2-success); }
.pv2-aviso--mal   { border-left-color: var(--pv2-danger); }
.pv2-aviso--mal i { color: var(--pv2-danger); }
.pv2-aviso--info i { color: var(--pv2-primary); }
/* Ambar: algo esta configurado pero no esta haciendo efecto. No es un error
   —nada se rompio— pero quien mira la pantalla cree que si funciona. */
.pv2-aviso--alerta   { border-left-color: var(--pv2-warning); background: var(--pv2-warning-bg); }
.pv2-aviso--alerta i { color: var(--pv2-warning); }

/* --- Reglas del tablero --- */
.rgl { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.rgl__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rgl__nom { margin: 0 0 6px; font-size: 1rem; color: var(--pv2-ink); }

/* La frase se lee de corrido; las conjunciones van en gris para que las piezas
   que el usuario eligió sean las que resaltan. */
.rgl__frase { margin: 0; font-size: .93rem; line-height: 1.75; color: var(--pv2-ink); }
.rgl__frase strong { color: var(--pv2-primary); font-weight: 600; }
.rgl__pieza {
    display: inline-block;
    padding: 1px 7px;
    margin-right: 2px;
    border-radius: 4px;
    background: var(--pv2-surface-2);
    color: var(--pv2-ink-2);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rgl__pieza--cuando { color: var(--pv2-primary); }
.rgl__datos { margin: 8px 0 0; font-size: .82rem; color: var(--pv2-muted); }

.rgl__mando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rgl__mando form { margin: 0; }
.rgl__estado { padding: 3px 9px; border-radius: 20px; font-size: .76rem; font-weight: 600; }
.rgl__estado--on  { background: var(--pv2-success-bg, #e6f6ee); color: var(--pv2-success); }
.rgl__estado--off { background: var(--pv2-surface-2); color: var(--pv2-muted); }

.rgl__bit { margin-top: 14px; border-top: 1px solid var(--pv2-border); padding-top: 10px; }
.rgl__bit summary { cursor: pointer; font-size: .84rem; color: var(--pv2-ink-2); }
.rgl__tabla { margin-top: 8px; font-size: .82rem; }
.rgl__tabla td { padding: 5px 8px; }
.rgl__cuando { white-space: nowrap; color: var(--pv2-muted); font-variant-numeric: tabular-nums; }
.rgl__detalle { color: var(--pv2-muted); }
.rgl__nada { color: var(--pv2-muted); font-style: italic; }
.rgl__res { padding: 1px 7px; border-radius: 4px; font-size: .74rem; font-weight: 600; }
.rgl__res--ok      { background: var(--pv2-success-bg, #e6f6ee); color: var(--pv2-success); }
.rgl__res--skipped { background: var(--pv2-surface-2); color: var(--pv2-muted); }
.rgl__res--error   { background: var(--pv2-danger-bg, #fdeaec); color: var(--pv2-danger); }

.rgl__titulo { margin: 0 0 14px; font-size: 1rem; }
.rgl__campo { margin-bottom: 16px; }
.rgl__campo label { display: block; margin-bottom: 5px; font-size: .84rem; color: var(--pv2-ink-2); }
.rgl__check { display: flex; align-items: center; gap: 8px; margin: 16px 0; font-size: .89rem; }
.rgl__pie { display: flex; gap: 8px; }

/* --- El constructor: la regla se arma leyéndose --- */
.arm {
    padding: 14px;
    border: 1px solid var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface-2);
}
.arm__linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.arm__pieza {
    flex: none;
    min-width: 62px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pv2-ink-2);
}
.arm__pieza--cuando { color: var(--pv2-primary); font-weight: 600; }
.arm__sel { max-width: 260px; }
.arm__val { max-width: 220px; }
.arm__val--texto { max-width: 320px; }
/* Un control que no aplica se esconde Y se deshabilita: escondido pero
   habilitado se enviaría igual. El !important gana al display de .pv2-input. */
.arm [hidden] { display: none !important; }
.arm__quitar {
    border: 0; background: none; cursor: pointer;
    color: var(--pv2-muted); padding: 4px 6px; border-radius: 4px;
}
.arm__quitar:hover { background: var(--pv2-danger-bg, #fdeaec); color: var(--pv2-danger); }
.arm__mas {
    border: 0; background: none; cursor: pointer;
    color: var(--pv2-primary); font: inherit; font-size: .85rem;
    padding: 4px 0; margin-bottom: 8px;
}
.arm__mas:hover { text-decoration: underline; }
.arm__hint { color: var(--pv2-muted); }

@media (max-width: 640px) {
    .arm__linea { align-items: stretch; flex-direction: column; }
    .arm__sel, .arm__val, .arm__val--texto { max-width: none; }
}

/* Punto sobre el icono de reglas: el tablero se mueve solo y hay que decirlo. */
.mando__ic { position: relative; }
.mando__pt {
    position: absolute; top: 5px; right: 5px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--pv2-success);
}

/* --- Tareas abiertas sobre una ficha ---
   Estilo propio: el bloque vive en fichas viejas de Bootstrap y en fichas v2,
   así que no puede heredar de ninguno de los dos. */
.tor {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
}
.tor__cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 13px 16px;
    border-bottom: 1px solid var(--pv2-border);
}
.tor__titulo { margin: 0; font-size: .95rem; font-weight: 600; color: var(--pv2-ink); }
.tor__titulo i { color: var(--pv2-primary); margin-right: 4px; }
.tor__n {
    display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
    border-radius: 20px; background: var(--pv2-primary); color: #fff;
    font-size: .74rem; text-align: center;
}
.tor__hechas { font-size: .8rem; color: var(--pv2-muted); }
.tor__cuerpo { padding: 14px 16px; }
.tor__vacio { margin: 0; font-size: .88rem; color: var(--pv2-muted); }

.tor__lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tor__it {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px;
    font-size: .88rem;
}
.tor__it:hover { background: var(--pv2-surface-2); }
/* Lo atrasado se marca con una barra, no solo con color: el rojo sobre rojo del
   modo oscuro se pierde. */
.tor__it--tarde { box-shadow: inset 3px 0 0 var(--pv2-danger); }
.tor__tit { flex: 1; min-width: 180px; color: var(--pv2-ink); font-weight: 500; }
.tor__tit:hover { color: var(--pv2-primary); text-decoration: underline; }
.tor__quien { font-size: .82rem; color: var(--pv2-ink-2); }
.tor__quien em { color: var(--pv2-muted); }
.tor__fecha { font-size: .82rem; color: var(--pv2-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tor__fecha strong { color: var(--pv2-danger); font-weight: 600; }
.tor__donde { font-size: .76rem; color: var(--pv2-muted); }

/* ⛔ El formulario va en COLUMNA, no en fila.
 *
 * Esta regla venia de cuando solo pedia el titulo y era una sola linea:
 * `display: flex` en fila. Al partirlo en dos —titulo+boton arriba, y area,
 * persona, prioridad y vencimiento abajo— los dos bloques se pusieron UNO AL
 * LADO DEL OTRO, porque son los dos hijos del flex.
 *
 * Efecto visto en la ficha del viaje: el campo y el boton a la izquierda, los
 * cuatro selectores apilados en una columna estrecha en medio —su rejilla
 * `auto-fit` colapsaba a una sola columna por falta de ancho— y media pantalla
 * vacia a la derecha. El `align-items: center` remataba dejando el campo
 * flotando a media altura.
 *
 * Y el `min-width: 200px` de abajo se lo comia tambien cada selector, que es
 * lo que impedia que los cuatro entraran en una fila. */
.tor__nueva { display: flex; flex-direction: column; gap: 10px; }

.tor__aviso { font-size: .82rem; color: var(--pv2-danger); }

@media (max-width: 640px) {
    .tor__it { align-items: flex-start; }
    .tor__tit { min-width: 100%; }
}

/* --- FullCalendar con la ropa del panel ---
   La librería trae botones azules de Bootstrap: en una pantalla morada era lo
   primero que se veía, y lo único que no parecía de aquí. Se reviste su marcado
   en vez de tocar su CSS, que es vendorizado y se pisaría al actualizar. */
.cal .fc-toolbar { margin-bottom: 16px; }
.cal .fc-toolbar h2 { font-size: 1.05rem; font-weight: 600; color: var(--pv2-ink); text-transform: capitalize; }

.cal .fc-button {
    background: var(--pv2-surface) !important;
    border: 1px solid var(--pv2-border) !important;
    color: var(--pv2-ink-2) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-size: .85rem;
    font-weight: 500;
    padding: 5px 12px;
    height: auto;
    text-transform: none;
}
.cal .fc-button:hover:not(:disabled) { background: var(--pv2-surface-2) !important; color: var(--pv2-ink) !important; }
.cal .fc-button:focus { box-shadow: 0 0 0 2px var(--pv2-primary-bg, rgba(109,52,214,.2)) !important; }
.cal .fc-button-primary:not(:disabled).fc-button-active,
.cal .fc-button-primary:not(:disabled):active {
    background: var(--pv2-primary) !important;
    border-color: var(--pv2-primary) !important;
    color: #fff !important;
}
.cal .fc-button:disabled { opacity: .45; }
.cal .fc-button-group > .fc-button:not(:first-child) { margin-left: -1px; }

/* Hoy: la celda apenas se distinguía. */
.cal .fc-today { background: var(--pv2-primary-bg, rgba(109,52,214,.06)) !important; }
.cal .fc-day-header { padding: 8px 0; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Los eventos: píldoras compactas, sin el borde extra de la librería. */
.cal .fc-event {
    border: 0;
    border-radius: 5px;
    padding: 2px 6px;
    margin: 1px 2px;
    font-size: .78rem;
    line-height: 1.35;
}
.cal .fc-event:hover { filter: brightness(.92); }
.cal .fc-day-grid-event .fc-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .fc-more { font-size: .74rem; color: var(--pv2-primary); font-weight: 600; }

.cal-leyenda__nota { color: var(--pv2-muted); font-style: italic; }

/* --- Ficha de tarea: la acción primaria y lo atrasado --- */
.fic__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fic__cab__txt { min-width: 0; flex: 1; }
.fic__accion { margin: 0; flex: none; }

/* Lo atrasado como aviso, no como más texto en la fila de datos. */
.fic__tarde {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--pv2-danger-bg, #fdeaec);
    color: var(--pv2-danger);
    font-size: .78rem;
    font-weight: 600;
}

/* El redactor ocupaba un cuarto del ancho de la caja y el botón se iba solo al
   otro extremo: parecía roto. */
.tab-com__caja { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; }
.tab-com__pie { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.tab-com__tip { font-size: .78rem; color: var(--pv2-muted); }
@media (max-width: 640px) { .tab-com__tip { display: none; } }

/* --- Lista de tareas: más renglones a la vista --- */
/* Cada fila medía 97px de alto: en una pantalla de portátil entraban diez
   tareas y hay cuarenta. Se aprieta sin perder el área de clic. */
.tar td { padding: 9px 20px; }
.tar__tit { line-height: 1.4; }
/* El origen dejaba ver el nombre de una clase de PHP en monospace. Ya dice
   "Viaje #14575"; en tipografía normal deja de parecer un error del sistema. */
.tar__origen { font-family: inherit; letter-spacing: .01em; }

/* Lo terminado se apaga entero, también su barra de prioridad: la prioridad de
   algo ya resuelto no informa de nada y competía por la atención. */
.tar--lista .ag__pri,
.kb__card--lista .ag__pri { opacity: .35; }
.tar--lista .tar__tit,
.kb__card--lista .kb__title { color: var(--pv2-muted); }

/* ==========================================================================
   TABLERO — capa visual y movimiento
   ==========================================================================
   Lo que hacía que el tablero se viera plano no era una cosa sino tres:

   1. TODO el texto era morado. Los títulos de tarjeta y de fila usaban el
      color de acento, así que nada destacaba porque todo destacaba. El acento
      vuelve a ser lo que es —lo que se puede tocar— y el título es tinta.
   2. Las columnas eran cajas blancas sobre fondo blanco: no había tablero,
      había una lista de listas.
   3. Nada se movía. Un tablero que se arrastra y se suelta sin una sola
      transición se siente roto aunque funcione.

   Toda animación se apaga con prefers-reduced-motion, al final del bloque.
   ========================================================================== */

/* --- Avatares de iniciales --- */
.av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--s, 24px);
    height: var(--s, 24px);
    border-radius: 50%;
    background: hsl(var(--h, 260) 62% 92%);
    color: hsl(var(--h, 260) 55% 32%);
    font-size: calc(var(--s, 24px) * .4);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
    box-shadow: inset 0 0 0 1px hsl(var(--h, 260) 45% 82%);
}
/* Foto de perfil (<x-pv2.foto>): redonda como las iniciales que la
   sustituyen cuando no hay foto o no carga. */
:where(img).pv2-foto {
    width: var(--s, 40px); height: var(--s, 40px); flex: none;
    border-radius: 50%; object-fit: cover;
    background: var(--pv2-surface-2);
    box-shadow: inset 0 0 0 1px var(--pv2-border);
}
.pv2-foto[hidden] { display: none !important; }

.av--nadie {
    background: var(--pv2-surface-2);
    color: var(--pv2-muted);
    box-shadow: inset 0 0 0 1px var(--pv2-border);
    font-weight: 500;
}
body.dark .av, html.dark .av {
    background: hsl(var(--h, 260) 40% 24%);
    color: hsl(var(--h, 260) 70% 82%);
    box-shadow: inset 0 0 0 1px hsl(var(--h, 260) 35% 34%);
}

/* --- El título deja de ser un enlace morado ---
   Va prefijado con .pv2-content a propósito. El shell v2 pinta TODOS los
   enlaces del área de contenido con el acento (`.pv2-content a`, más arriba en
   este mismo archivo), y esa regla gana por especificidad a un `.kb__title`
   suelto: por eso el primer intento no cambió nada y las tarjetas siguieron
   moradas en claro y en oscuro. Es el mismo apaño que ya existía para que los
   .pv2-btn no salieran morados. */
.pv2-content .kb__title,
.pv2-content .tar__link,
.pv2-content .tar__tit,
.pv2-content .tor__tit {
    color: var(--pv2-ink);
    font-weight: 600;
    letter-spacing: -.005em;
    transition: color .15s ease;
}
.pv2-content .kb__title:hover,
.pv2-content .tar__link:hover .tar__tit,
.pv2-content .tor__tit:hover { color: var(--pv2-primary); }

/* Lo cerrado se apaga: tiene que ganar al color de tinta de arriba. */
.pv2-content .tar--lista .tar__tit,
.pv2-content .kb__card--lista .kb__title { color: var(--pv2-muted); }

/* --- La columna, por fin una columna --- */
.kb__col {
    background: var(--pv2-surface-2);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 0 0 8px;
    overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease;
}
/* El color del estado, en una franja arriba: identifica la columna de un
   vistazo sin gastar un rótulo de color en cada tarjeta. */
.kb__col::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--c, var(--pv2-primary));
}
.kb__head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 14px 10px;
    background: var(--pv2-surface-2);
    backdrop-filter: blur(4px);
}
.kb__head h3 { font-size: .92rem; font-weight: 650; letter-spacing: -.01em; }
.kb__n {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    color: var(--pv2-ink-2);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
/* Cuando el número cambia solo (arrastre, alta rápida) da un salto: si no,
   nadie se entera de que el tablero se movió. */
.kb__n--cambia { animation: kb-cuenta .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes kb-cuenta {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); background: var(--pv2-primary); color: #fff; border-color: var(--pv2-primary); }
    100% { transform: scale(1); }
}
.kb__zona { padding: 0 10px; min-height: 60px; }

/* --- La tarjeta --- */
.kb__card {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: 10px;
    padding: 11px 12px 10px 15px;
    box-shadow: 0 1px 2px rgba(16, 12, 32, .04);
    transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, border-color .16s ease;
    will-change: transform;
}
.kb__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -6px rgba(16, 12, 32, .18);
    border-color: var(--pv2-primary);
}
.kb__card:active { transform: translateY(0) scale(.995); }
/* Arrastrando: se inclina y se aparta, para que se vea que va en la mano. */
.kb__card--viajando {
    opacity: .5;
    transform: rotate(1.5deg) scale(1.02);
    box-shadow: 0 14px 30px -10px rgba(16, 12, 32, .35);
}
.kb__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.kb__quien { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--pv2-ink-2); }
.kb__quien--libre { font-style: italic; color: var(--pv2-muted); }
.kb__fecha { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--pv2-muted); }
.kb__fecha--tarde {
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--pv2-danger-bg, #fdeaec);
    color: var(--pv2-danger);
    font-weight: 700;
}

/* La zona de soltar tiene que ANUNCIARSE, o soltar es adivinar. */
.kb__zona--activa {
    background: color-mix(in srgb, var(--pv2-primary) 7%, transparent);
    outline: 2px dashed var(--pv2-primary);
    outline-offset: -4px;
    border-radius: 10px;
}
.kb__col--sobre { box-shadow: 0 0 0 2px var(--pv2-primary); border-color: var(--pv2-primary); }

/* --- Entrada escalonada: el tablero se arma, no aparece de golpe --- */
.kb__card { animation: tb-entra .34s cubic-bezier(.2,.8,.3,1) backwards; }
.kb__zona .kb__card:nth-child(1) { animation-delay: .02s }
.kb__zona .kb__card:nth-child(2) { animation-delay: .05s }
.kb__zona .kb__card:nth-child(3) { animation-delay: .08s }
.kb__zona .kb__card:nth-child(4) { animation-delay: .11s }
.kb__zona .kb__card:nth-child(5) { animation-delay: .14s }
.kb__zona .kb__card:nth-child(n+6) { animation-delay: .17s }
@keyframes tb-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Botones con tacto --- */
.pv2-btn {
    transition: transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease,
                background .16s ease, border-color .16s ease, color .16s ease;
}
.pv2-btn:hover { transform: translateY(-1px); }
.pv2-btn:active { transform: translateY(0) scale(.98); }
.pv2-btn--primary {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pv2-primary) 92%, white) 0%,
        var(--pv2-primary) 100%);
    box-shadow: 0 1px 2px rgba(16, 12, 32, .12);
}
.pv2-btn--primary:hover { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--pv2-primary) 70%, transparent); }
.pv2-btn:focus-visible { outline: 2px solid var(--pv2-primary); outline-offset: 2px; }

/* --- El selector de vista, con la pastilla deslizándose --- */
.segm { position: relative; }
.segm__op { position: relative; z-index: 1; transition: color .2s ease; }
.segm__op--on { box-shadow: none; background: none; }
.segm__pastilla {
    position: absolute;
    top: 3px; bottom: 3px;
    border-radius: 6px;
    background: var(--pv2-surface);
    box-shadow: 0 1px 3px rgba(16, 12, 32, .12);
    transition: transform .28s cubic-bezier(.34,1.2,.64,1), width .28s cubic-bezier(.34,1.2,.64,1);
    pointer-events: none;
}

/* --- Cambio de vista: se cruza, no se corta --- */
.vista { animation: tb-vista .26s ease-out; }
@keyframes tb-vista {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Filas de la lista --- */
.tar tbody tr { transition: background .14s ease; }
.tar tbody tr:hover { background: var(--pv2-surface-2); }
.tar__quien { display: inline-flex; align-items: center; gap: 8px; }

/* --- Píldoras de estado: rellenas y legibles, no contorno flotante ---
   Va entero dentro de @supports porque la regla quita el borde: si el navegador
   no entiende color-mix se cae el fondo pero el `border: 0` se aplicaría igual,
   y la píldora quedaría sin borde Y sin fondo, o sea invisible. Así o cambia
   completa o se queda la de contorno, que funciona. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .tab-estado {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border: 0;
        border-radius: 20px;
        background: color-mix(in srgb, var(--c, #6e4c9f) 14%, transparent);
        color: color-mix(in srgb, var(--c, #6e4c9f) 78%, black);
        font-size: .76rem;
        font-weight: 650;
        letter-spacing: .01em;
        white-space: nowrap;
    }
    .tab-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #6e4c9f); }
    body.dark .tab-estado, html.dark .tab-estado {
        background: color-mix(in srgb, var(--c, #6e4c9f) 26%, transparent);
        color: color-mix(in srgb, var(--c, #6e4c9f) 45%, white);
    }
}

/* --- Quien pidió menos movimiento se queda con el diseño y sin el vaivén --- */
@media (prefers-reduced-motion: reduce) {
    .kb__card, .vista, .kb__n--cambia { animation: none !important; }
    .kb__card, .pv2-btn, .segm__pastilla, .tar tbody tr { transition: none !important; }
    .kb__card:hover, .pv2-btn:hover { transform: none; }
}

/* --- Calendario: la pastilla de cada tarea ---
   FullCalendar pinta un rectángulo de color sólido con el título encima. A
   tamaño de celda de mes eso es una mancha: el texto blanco sobre color
   saturado se lee mal, el color se come la atención y el título acaba cortado.
   Aquí el color se queda donde sirve —una barra a la izquierda— y el fondo es
   un teñido claro, así el título va en tinta y se lee. */
.cal .fc-event.ev {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px 3px 5px;
    border: 0 !important;
    border-left: 3px solid var(--c) !important;
    border-radius: 5px;
    background: color-mix(in srgb, var(--c) 13%, var(--pv2-surface)) !important;
    color: var(--pv2-ink) !important;
    font-size: .76rem;
    font-weight: 550;
    line-height: 1.4;
    cursor: pointer;
    transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s ease, background .14s ease;
}
.cal .fc-event.ev:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--c) 60%, transparent);
    background: color-mix(in srgb, var(--c) 22%, var(--pv2-surface)) !important;
    filter: none;
}
.ev__av { flex: none; font-size: 8px; }
.ev__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lo vencido pide atención: el icono lo dice sin depender del color, que es lo
   que hay que hacer cuando el color ya está diciendo otra cosa. */
.ev--tarde { font-weight: 700; }
.ev__alerta { flex: none; font-size: .72rem; color: var(--pv2-danger); }

/* Lo cerrado se aparta pero no desaparece: saber que ese día YA se hizo algo
   es la mitad de para qué se mira un calendario hacia atrás. */
.ev--lista { opacity: .6; }
.ev--lista .ev__t { text-decoration: line-through; }

/* Las celdas del mes respiran y "hoy" se ve sin buscarlo. */
.cal .fc-day-grid-container { min-height: 520px; }
.cal .fc-row .fc-content-skeleton td { padding-top: 1px; }
.cal .fc-day-number { padding: 6px 8px 2px; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal .fc-today .fc-day-number {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; margin: 4px 6px 0;
    padding: 0; border-radius: 50%;
    background: var(--pv2-primary); color: #fff;
}
.cal .fc-other-month .fc-day-number { opacity: .35; }
.cal td.fc-other-month { background: color-mix(in srgb, var(--pv2-surface-2) 55%, transparent); }

/* Entrada suave al cambiar de mes: si no, el calendario da un tirón. */
.cal .fc-event.ev { animation: tb-entra .22s ease-out backwards; }

@media (prefers-reduced-motion: reduce) {
    .cal .fc-event.ev { animation: none; transition: none; }
    .cal .fc-event.ev:hover { transform: none; }
}

/* --- Centro de alertas: la señal de que está vivo ---
   Sin esto, una pantalla que se repinta sola es indistinguible de una
   congelada: si no hay alertas y no cambia nada durante media hora, nadie sabe
   si es que todo va bien o si la página se quedó pegada. */
.al-vivo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    margin-right: 8px;
    border: 1px solid var(--pv2-border);
    border-radius: 20px;
    color: var(--pv2-muted);
    font-size: .8rem;
}
.al-vivo__punto {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--pv2-success);
    animation: al-latido 2.4s ease-in-out infinite;
}
@keyframes al-latido {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}
/* Y un latido fuerte cuando de verdad acaba de traer algo distinto. */
.al-vivo--late { animation: al-trajo .6s ease-out; }
@keyframes al-trajo {
    0%   { background: var(--pv2-success); color: #fff; border-color: var(--pv2-success); }
    100% { background: none; }
}
.al-cambio { animation: tb-entra .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .al-vivo__punto, .al-vivo--late, .al-cambio { animation: none; }
}

/* --- Imágenes en los comentarios --- */
.adj { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adj__it {
    display: block;
    width: 116px; height: 84px;
    border: 1px solid var(--pv2-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--pv2-surface-2);
    transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, border-color .16s ease;
}
.adj__it:hover {
    transform: translateY(-2px);
    border-color: var(--pv2-primary);
    box-shadow: 0 6px 18px -6px rgba(16,12,32,.25);
}
.adj__it img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tab-com__clip {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: auto;
    padding: 5px 11px;
    border: 1px solid var(--pv2-border);
    border-radius: 20px;
    color: var(--pv2-ink-2);
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.tab-com__clip:hover { border-color: var(--pv2-primary); color: var(--pv2-primary); }
.tab-com__clip--con {
    border-color: var(--pv2-primary);
    background: var(--pv2-primary-050, rgba(109,52,214,.08));
    color: var(--pv2-primary);
    font-weight: 600;
}

/* La lupa: una captura a tamaño de miniatura no se distingue. */
.lupa {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    padding: 40px;
    background: rgba(12, 9, 22, .82);
    animation: tb-vista .18s ease-out;
}
.lupa[hidden] { display: none; }
.lupa img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 24px 70px -20px rgba(0,0,0,.7); }
.lupa__x {
    position: absolute; top: 20px; right: 24px;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff;
    font-size: 17px; cursor: pointer;
    transition: background .16s ease;
}
.lupa__x:hover { background: rgba(255,255,255,.26); }

/* --- Histórico --- */
.hist__cifras { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 20px; }
.hist__cifra { display: flex; flex-direction: column; }
.hist__n { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pv2-ink); }
.hist__r { font-size: .78rem; color: var(--pv2-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.hist__cifra--nota {
    flex-direction: row; align-items: center; gap: 9px;
    max-width: 46ch; padding: 10px 14px;
    border-left: 3px solid var(--pv2-success);
    background: var(--pv2-surface);
    border-radius: 0 8px 8px 0;
    font-size: .84rem; color: var(--pv2-ink-2);
}
.hist__cifra--nota i { color: var(--pv2-success); flex: none; }

.hist__filtros { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.hist__fecha { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--pv2-muted); }
.hist__borrada td { opacity: .62; }
.hist__sello { padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 650; }
.hist__sello--borrada { background: var(--pv2-surface-2); color: var(--pv2-muted); }
.hist__rastro { display: flex; gap: 12px; font-size: .82rem; color: var(--pv2-muted); font-variant-numeric: tabular-nums; }
.hist__rastro i { margin-right: 3px; opacity: .7; }
.hist__hace { display: block; font-size: .74rem; color: var(--pv2-muted); }
.hist__paginas { margin-top: 18px; }

/* --- Columna vacía: dibuja dónde se suelta --- */
.kb__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 26px 16px;
    margin: 4px 0 10px;
    border: 1.5px dashed var(--pv2-border);
    border-radius: 10px;
    color: var(--pv2-muted);
    text-align: center;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.kb__vacio i { font-size: 1.2rem; opacity: .5; margin-bottom: 3px; }
.kb__vacio span { font-size: .85rem; font-weight: 600; }
.kb__vacio small { font-size: .74rem; opacity: .8; line-height: 1.35; }
.kb__zona--activa .kb__vacio {
    border-color: var(--pv2-primary);
    color: var(--pv2-primary);
    background: color-mix(in srgb, var(--pv2-primary) 8%, transparent);
}

/* --- El selector de tablero, la única pieza que quedaba sin diseñar --- */
.mando__selcaja { position: relative; display: inline-flex; align-items: center; }
.mando__selcaja .mando__sel {
    appearance: none; -webkit-appearance: none;
    padding-right: 32px;
    border: 1px solid var(--pv2-border);
    border-radius: 9px;
    background: var(--pv2-surface);
    color: var(--pv2-ink);
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -.02em;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.mando__selcaja .mando__sel:hover { border-color: var(--pv2-primary); }
.mando__selcaja .mando__sel:focus-visible { outline: 2px solid var(--pv2-primary); outline-offset: 1px; }
.mando__selflecha {
    position: absolute; right: 11px;
    pointer-events: none;
    font-size: .7rem;
    color: var(--pv2-muted);
}

/* --- El calendario mientras pide sus eventos --- */
.cal--cargando { position: relative; min-height: 420px; }
.cal--cargando::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        transparent 30%,
        color-mix(in srgb, var(--pv2-primary) 9%, transparent) 50%,
        transparent 70%);
    background-size: 200% 100%;
    animation: cal-brilla 1.1s ease-in-out infinite;
    border-radius: 10px;
    pointer-events: none;
}
@keyframes cal-brilla {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cal--cargando::after { animation: none; opacity: .5; }
}

/* --- 360 px: el kanban en un teléfono ---
   Las columnas medían 300px fijos: en una pantalla de 360 la segunda asomaba
   media y el arrastre horizontal peleaba con el scroll de la página. */
@media (max-width: 560px) {
    .kb { gap: 10px; }
    /* flex-basis y no min-width: la columna declara `flex: 0 0 288px` y un
       min-width no gana a una base fija. */
    .kb__col { flex: 0 0 84vw; }
    .mando { gap: 10px; }
    .mando__izq, .mando__der { width: 100%; }
    .mando__der { flex-wrap: wrap; }
    .mando__selcaja { width: 100%; }
    .mando__selcaja .mando__sel { width: 100%; font-size: 1.05rem; }
    .segm { width: 100%; }
    .segm__op { flex: 1; justify-content: center; padding: 7px 4px; font-size: .8rem; }
    /* Se va el icono, no la palabra: a tres botones en 320px hay que quitarles
       algo, y el rótulo dice qué vista es — el icono solo lo recuerda. */
    .segm__op i { display: none; }
    .hist__filtros > * { width: 100%; }
    .adj__it { width: calc(50% - 4px); height: 96px; }
    .lupa { padding: 16px; }
}

/* --- El menú de "más" del tablero ---
   Cuatro iconos sueltos en la barra ya eran demasiados, y aun así el reporte y
   el calendario general se quedaban sin puerta: solo se llegaba escribiendo la
   URL, que es lo mismo que no existir. */
.mas { position: relative; display: inline-flex; }
.mas__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 250px;
    padding: 6px;
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: 12px;
    box-shadow: 0 12px 34px -12px rgba(16, 12, 32, .3);
    animation: mas-abre .16s cubic-bezier(.2,.8,.3,1);
}
.mas__menu[hidden] { display: none; }
@keyframes mas-abre {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mas__menu a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--pv2-ink);
    text-decoration: none;
    font-size: .89rem;
    transition: background .14s ease;
}
.mas__menu a:hover { background: var(--pv2-surface-2); }
.mas__menu a > i { width: 16px; margin-top: 3px; color: var(--pv2-primary); flex: none; text-align: center; }
.mas__menu span { display: flex; flex-direction: column; line-height: 1.35; }
.mas__menu em {
    font-style: normal;
    font-size: .77rem;
    color: var(--pv2-muted);
    margin-top: 1px;
}

/* "Atrasadas" encendido va en rojo: es lo que arde, no un filtro más. */
.mando__toggle--rojo {
    border-color: var(--pv2-danger) !important;
    background: var(--pv2-danger-bg, #fdeaec) !important;
    color: var(--pv2-danger) !important;
}

@media (prefers-reduced-motion: reduce) { .mas__menu { animation: none; } }

/* Crear un TABLERO se hace tres veces al año; crear una tarea, cien al día.
   Por eso este botón lleva su palabra y no compite en peso con el resto. */
.mando__nuevo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--pv2-border);
    border-radius: 9px;
    background: var(--pv2-surface);
    color: var(--pv2-ink-2);
    font: inherit;
    font-size: .87rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s ease, color .16s ease, transform .12s cubic-bezier(.2,.8,.3,1);
}
.mando__nuevo:hover { border-color: var(--pv2-primary); color: var(--pv2-primary); transform: translateY(-1px); }
.mando__nuevo:active { transform: translateY(0) scale(.98); }
.mando__nuevo:focus-visible { outline: 2px solid var(--pv2-primary); outline-offset: 2px; }
@media (max-width: 560px) { .mando__nuevo span { display: none; } }

/* La acción primaria del tablero, visible en las tres vistas. */
.mando__tarea { white-space: nowrap; }
@media (max-width: 560px) { .mando__tarea { flex: 1; justify-content: center; } }

/* ==========================================================================
   BARRA DE MANDO — dos filas, cada una con un trabajo
   ==========================================================================
   Era una sola con nueve controles y se rompía sola: el título saltaba a su
   propio renglón y el resto quedaba apretado contra el borde. Arriba QUÉ
   tablero y la acción; abajo QUÉ se filtra y CÓMO se ve. */
.mando {
    display: block;
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--pv2-border);
}
.mando__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mando__fila--alta { margin-bottom: 14px; }
.mando__izq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.mando__acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.mando__filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.mando__titulo { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.mando__selcaja .mando__sel { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; padding: 4px 34px 4px 12px; }
.mando__selflecha { right: 13px; }

.mando__equipo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--pv2-surface-2);
    color: var(--pv2-ink-2);
    font-size: .8rem;
}
.mando__equipo i { font-size: .78em; color: var(--pv2-muted); }

/* Cuántas hay abiertas, dicho una vez y en el sitio donde se pregunta. */
.mando__cuenta { font-size: .82rem; color: var(--pv2-muted); font-variant-numeric: tabular-nums; }
.mando__cuenta b { color: var(--pv2-danger); font-weight: 650; }

.mando__buscar input { width: 210px; }
.mando__limpia { font-size: .82rem; color: var(--pv2-muted); text-decoration: underline; }
.mando__limpia:hover { color: var(--pv2-primary); }

/* Lo ocasional vive en el menú, no compitiendo con la acción del día. */
.mas__raya { height: 1px; background: var(--pv2-border); margin: 5px 8px; }
.mas__menu button {
    display: flex; align-items: flex-start; gap: 11px;
    width: 100%; padding: 9px 11px;
    border: 0; border-radius: 8px;
    background: none; color: var(--pv2-ink);
    font: inherit; font-size: .89rem; text-align: left;
    cursor: pointer;
    transition: background .14s ease;
}
.mas__menu button:hover { background: var(--pv2-surface-2); }
.mas__menu button > i { width: 16px; margin-top: 3px; color: var(--pv2-primary); flex: none; text-align: center; }

/* ==========================================================================
   DIÁLOGOS — cabecera, cuerpo y pie
   ========================================================================== */
.tab-modal__box {
    padding: 0;
    overflow: hidden;
    max-width: 620px;
    width: 100%;
    animation: modal-entra .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes modal-entra {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tab-modal__cab {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--pv2-border);
}
.tab-modal__icono {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--pv2-primary-050, rgba(109,52,214,.1));
    color: var(--pv2-primary);
}
.tab-modal__cab h3 { margin: 0; font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; }
.tab-modal__cab p { margin: 2px 0 0; font-size: .85rem; color: var(--pv2-muted); }
.tab-modal__cab > div { flex: 1; min-width: 0; }
.tab-modal__x {
    width: 30px; height: 30px; flex: none;
    border: 0; border-radius: 8px;
    background: none; color: var(--pv2-muted);
    cursor: pointer; font-size: 15px;
    transition: background .14s ease, color .14s ease;
}
.tab-modal__x:hover { background: var(--pv2-surface-2); color: var(--pv2-ink); }

.tab-modal__cuerpo { padding: 18px 22px; display: flex; flex-direction: column; gap: 15px; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo .pv2-input { width: 100%; box-sizing: border-box; }
.campo .tab-lbl { margin: 0; }
.campo .tab-lbl span { color: var(--pv2-muted); font-weight: 400; font-size: .92em; }

/* Rejilla FIJA de dos columnas. Con `auto-fit` la fila de cuatro se partía en
   3+1, y un nombre largo empujaba su select por encima del de al lado: se
   veían dos flechas juntas y parecía roto. */
.tab-modal__rej { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .tab-modal__rej { grid-template-columns: 1fr; } }

/* Los <select> con UNA flecha, la nuestra: la nativa cambia de forma en cada
   sistema y no se puede alinear con el resto. */
.campo__sel { position: relative; display: block; min-width: 0; }
.campo__sel select {
    appearance: none; -webkit-appearance: none;
    width: 100%;
    padding-right: 32px;
    text-overflow: ellipsis;
    cursor: pointer;
}
.campo__sel > i {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: .68rem;
    color: var(--pv2-muted);
}

.tab-modal__aviso {
    display: flex; gap: 10px;
    padding: 12px 14px;
    border-left: 3px solid var(--pv2-primary);
    background: var(--pv2-surface-2);
    border-radius: 0 8px 8px 0;
    font-size: .85rem;
    color: var(--pv2-ink-2);
    line-height: 1.5;
}
.tab-modal__aviso i { color: var(--pv2-primary); flex: none; margin-top: 2px; }

.tab-modal__pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 15px 22px;
    border-top: 1px solid var(--pv2-border);
    background: var(--pv2-surface-2);
}
.tab-modal__nota { font-size: .8rem; color: var(--pv2-muted); }
.tab-modal__acts { margin: 0; }

@media (max-width: 700px) {
    .mando__fila { align-items: stretch; }
    .mando__acciones { width: 100%; }
    .mando__tarea { flex: 1; justify-content: center; }
    .mando__buscar input { width: 100%; }
    .mando__buscar { flex: 1; min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .tab-modal__box { animation: none; } }

/* La tarjeta entera abre la tarea, así que tiene que verse pulsable entera. */
.kb__card[data-abrir] { cursor: pointer; }
.kb__card[data-abrir]:hover .kb__title { color: var(--pv2-primary); }

/* La pastilla no existe hasta que se sabe dónde va. Un fotograma suyo mal
   colocado ya se vio una vez, a 700px de su barra. */
.segm__pastilla[hidden] { display: none; }

/* --- Archivos y enlaces de la tarea --- */
.arc__n {
    display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
    border-radius: 20px; background: var(--pv2-surface-2);
    color: var(--pv2-ink-2); font-size: .74rem; font-weight: 650;
}
.arc { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.arc__it {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 9px;
    transition: background .14s ease;
}
.arc__it:hover { background: var(--pv2-surface-2); }
.arc__ic {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--pv2-surface-2);
    color: var(--pv2-ink-2);
    font-size: .92rem;
}
.arc__it:hover .arc__ic { background: var(--pv2-surface); }
.arc__ic--link { color: var(--pv2-primary); }
.arc__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arc__nom {
    color: var(--pv2-ink); font-weight: 550; font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arc__nom:hover { color: var(--pv2-primary); }
.arc__nom i { font-size: .68em; opacity: .6; margin-left: 3px; }
/* Se dice si se abre o se descarga ANTES de pulsar: descubrirlo con una
   descarga inesperada es de las cosas que más molestan de una intranet. */
.arc__dat { font-size: .76rem; color: var(--pv2-muted); }
.arc__quien { font-size: .78rem; color: var(--pv2-muted); flex: none; }
.arc__quitar { margin: 0; flex: none; }
.arc__quitar button {
    border: 0; background: none; cursor: pointer;
    color: var(--pv2-muted); padding: 4px 6px; border-radius: 6px;
    opacity: 0; transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.arc__it:hover .arc__quitar button { opacity: 1; }
.arc__quitar button:focus-visible { opacity: 1; }
.arc__quitar button:hover { background: var(--pv2-danger-bg, #fdeaec); color: var(--pv2-danger); }

.arc__nuevo {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 13px; border-top: 1px solid var(--pv2-border);
}
.arc__boton {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--pv2-border); border-radius: 8px;
    color: var(--pv2-ink-2); font-size: .85rem; cursor: pointer;
    transition: border-color .14s ease, color .14s ease;
}
.arc__boton:hover { border-color: var(--pv2-primary); color: var(--pv2-primary); }
.arc__o { color: var(--pv2-muted); font-size: .82rem; }
.arc__url { flex: 1; min-width: 190px; }
.arc__titulo { width: 150px; }
.arc__topes { margin: 9px 0 0; font-size: .76rem; color: var(--pv2-muted); }

@media (max-width: 640px) {
    .arc__nuevo > * { width: 100%; }
    .arc__o { display: none; }
    .arc__titulo { width: 100%; }
}

/* La lupa también muestra PDF. */
.lupa iframe {
    width: min(900px, 100%); height: min(85vh, 100%);
    border: 0; border-radius: 10px; background: #fff;
    box-shadow: 0 24px 70px -20px rgba(0,0,0,.7);
}
.lupa iframe[hidden], .lupa img[hidden] { display: none; }

/* Adjuntar al crear la tarea. */
.arc__boton--alta { align-self: flex-start; }
.arc__boton--con {
    border-color: var(--pv2-primary);
    background: var(--pv2-primary-050, rgba(109,52,214,.08));
    color: var(--pv2-primary);
    font-weight: 600;
}

/* --- El área de una tarea ---
   Una tarea sin dueño pero CON área no está huérfana: está abierta para ese
   equipo. Se distingue de «sin asignar», que sí es trabajo de nadie. */
.kb__area, .tar__area, .fic__area {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--pv2-surface-2);
    color: var(--pv2-ink-2);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
.kb__area i, .tar__area i, .fic__area i { font-size: .82em; color: var(--pv2-muted); }
.tar__area { margin-left: 6px; font-size: .72rem; }
.tar__area--sola { margin-left: 0; font-size: .76rem; }
.fic__area { font-size: .78rem; padding: 3px 10px; }

.side__guardar { width: 100%; justify-content: center; margin-top: 12px; }

/* ==========================================================================
   FICHA DEL CHOFER — el dinero, agrupado por la pregunta que contesta
   ==========================================================================
   Eran siete cuadros del mismo tamaño y sin orden, así que ninguno destacaba y
   había que sumar de cabeza para saber cuánto cobró en total. */
.din { display: flex; flex-direction: column; gap: 20px; }
.din__grupo {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 16px 18px 18px;
}
.din__t {
    display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
    margin: 0 0 14px;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--pv2-ink-2);
}
.din__t small {
    font-size: .78rem; font-weight: 400;
    letter-spacing: 0; text-transform: none;
    color: var(--pv2-muted);
}
.din__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--pv2-border-2); border-radius: 10px; overflow: hidden; }
.din__c { background: var(--pv2-surface); padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; }
.din__r { font-size: .78rem; color: var(--pv2-muted); }
.din__n {
    font-size: 1.28rem; font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pv2-ink);
}
.din__d { font-size: .72rem; color: var(--pv2-muted); line-height: 1.35; }
.din__d--alerta { color: var(--pv2-danger); font-weight: 600; }

/* El total va primero y pesa más: es la cifra que se busca al entrar. */
.din__c--fuerte { background: var(--pv2-surface-2); }
.din__c--fuerte .din__n { font-size: 1.55rem; }
.din__c--verde .din__n { color: var(--pv2-success); }
.din__c--rojo  .din__n { color: var(--pv2-danger); }
.din__c--ambar .din__n { color: var(--pv2-warning, #b7791f); }

.din__accion { margin: 0; }

body.dark .din__grupo, html.dark .din__grupo { background: var(--pv2-surface); }

/* ==========================================================================
   FICHA DEL CHOFER — el envoltorio
   ==========================================================================
   El marcado de dentro es el heredado y no se toca: son seiscientas líneas de
   tablas que funcionan. Lo que se arregla es lo que hacía que la pantalla se
   viera descosida — cada sección con su propio estilo, y una cabecera y unas
   pestañas metidas en dos tarjetas blancas apiladas.

   Todo cuelga de `.fc`, así que se normalizan de una vez en lugar de editar
   cada tarjeta. */
.fc { padding: 0; }

/* ---- Cabecera ---- */
.fc__cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 4px;
}
.fc__quien { display: flex; align-items: center; gap: 16px; min-width: 0; }
.fc__foto {
    width: 58px; height: 58px; flex: none;
    border-radius: 14px; object-fit: cover;
    border: 1px solid var(--pv2-border);
    background: var(--pv2-surface-2);
}
/* La imagen del servicio en «Vehículo y servicio», o su respaldo legible
   cuando no hay imagen o no carga (antes, el «?» de imagen rota). */
.fc__vehiculo {
    width: 60px; height: 60px; flex: none;
    border-radius: var(--pv2-radius-sm); object-fit: contain;
    border: 1px solid var(--pv2-border);
    background: var(--pv2-surface-2);
}
.fc__vehiculo--sin {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--pv2-muted); font-size: 20px;
}
.fc__vehiculo--sin small { font-size: 10.5px; font-weight: 600; line-height: 1.1; text-align: center; }
.fc__vehiculo[hidden] { display: none !important; }
.fc__nombre { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; color: var(--pv2-ink); }
.fc__estados { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fc__e {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 20px;
    font-size: .78rem; font-weight: 600;
    background: var(--pv2-surface-2); color: var(--pv2-ink-2);
}
.fc__pt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fc__e--on   { background: var(--pv2-success-bg, #e6f6ee); color: var(--pv2-success); }
.fc__e--off  { color: var(--pv2-muted); }
.fc__e--serv { background: var(--pv2-primary-050, rgba(109,52,214,.1)); color: var(--pv2-primary); }
.fc__e--bad  { background: var(--pv2-danger-bg, #fdeaec); color: var(--pv2-danger); }
.fc__e--nota { background: var(--pv2-ambar-bg, #fdf3e0); color: #8a6410; }
.fc__e--nota i { font-size: .8em; }
.fc__id { font-size: .78rem; color: var(--pv2-muted); font-variant-numeric: tabular-nums; }
.fc__acciones { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.fc__acciones form { margin: 0; }

/* ---- Pestañas, sin tarjeta alrededor ---- */
.fc__pest { display: flex; gap: 2px; border-bottom: 1px solid var(--pv2-border); margin-bottom: 22px; overflow-x: auto; }
.fc__pest a {
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    color: var(--pv2-ink-2);
    font-size: .9rem; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: color .14s ease, border-color .14s ease;
}
.fc__pest a:hover { color: var(--pv2-ink); }
.fc__pest a.on { color: var(--pv2-primary); border-bottom-color: var(--pv2-primary); font-weight: 650; }

/* ---- Columna lateral ---- */
.fc__lado {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    padding: 18px 20px 20px;
    position: sticky; top: 18px;
}
.fc__lt {
    margin: 0 0 14px; font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--pv2-muted);
}
.fc__datos { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fc__datos li { display: flex; align-items: center; gap: 11px; font-size: .89rem; color: var(--pv2-ink); min-width: 0; }
.fc__datos i { width: 30px; height: 30px; flex: none; display: grid; place-items: center;
               border-radius: 8px; background: var(--pv2-surface-2); color: var(--pv2-muted); font-size: .82rem; }
.fc__datos span { overflow: hidden; text-overflow: ellipsis; }
.fc__lacc { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--pv2-border); }
.fc__lacc .pv2-btn, .fc__lacc form { width: 100%; }
.fc__lacc .pv2-btn { justify-content: center; }
.fc__lacc form { margin: 0; }
.fc__lacc form .pv2-btn { width: 100%; }
/* Destructiva pero no la principal: contorno rojo, no relleno (guía UX). */
.pv2-btn--borrar { background: transparent; border-color: var(--pv2-danger); color: var(--pv2-danger); }
.pv2-btn--borrar:hover:not(:disabled) { background: var(--pv2-danger-bg); color: var(--pv2-danger); }
.pv2-btn--borrar:disabled { opacity: .55; cursor: not-allowed; }
.fc__porque { display: block; font-size: .78rem; color: var(--pv2-muted); line-height: 1.35; }

/* ==========================================================================
   LAS 67 PANTALLAS HEREDADAS, con el aspecto del panel
   ==========================================================================
   Las pantallas viejas usan <x-master-layout>, pero se pintan DENTRO de
   `.pv2-content` igual que las nuevas. Ese es el gancho: normalizarlas desde
   aquí las arregla todas de una vez, en lugar de reescribir sesenta y siete
   ficheros que además funcionan.

   No se toca su estructura, solo su ropa: fondo, borde, radio, tipografía de
   cabecera y tabla. Lo que ya trae su propio color —`.bg-primary` y
   compañía— se deja en paz, porque ahí el color significa algo. */
.pv2-content .card:not([class*="bg-"]):not(.pv2-card) {
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border);
    border-radius: 14px;
    box-shadow: none;
    margin-bottom: 20px;
}
.pv2-content .card-header:not([class*="bg-"]) {
    background: none;
    border-bottom: 1px solid var(--pv2-border);
    padding: 15px 20px;
}
.pv2-content .card-title,
.pv2-content .card-header h4,
.pv2-content .card-header h5 {
    margin: 0; font-size: 1rem; font-weight: 650;
    letter-spacing: -.01em; color: var(--pv2-ink);
}
.pv2-content .card-body { padding: 18px 20px; }

.pv2-content .table { color: var(--pv2-ink); }
.pv2-content .table thead th {
    background: var(--pv2-surface-2);
    border: 0;
    border-bottom: 1px solid var(--pv2-border);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--pv2-muted); white-space: nowrap;
}
.pv2-content .table td { border-color: var(--pv2-border-2); vertical-align: middle; font-size: .89rem; }
.pv2-content .table-hover tbody tr:hover { background: var(--pv2-surface-2); }

/* Los formularios viejos, con los mismos campos que el resto del panel. */
.pv2-content .form-control:not(.pv2-input),
.pv2-content .custom-select {
    border-color: var(--pv2-border);
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
    color: var(--pv2-ink);
}
.pv2-content .form-control:focus {
    border-color: var(--pv2-primary);
    box-shadow: 0 0 0 3px var(--pv2-primary-050, rgba(109,52,214,.15));
}
.pv2-content label:not(.tab-lbl):not(.arc__boton) { color: var(--pv2-ink-2); font-weight: 500; font-size: .86rem; }

@media (max-width: 900px) {
    .fc__lado { position: static; margin-bottom: 20px; }
    .fc__cab { align-items: flex-start; }
    .fc__acciones { width: 100%; }
}

/* Cabecera de grupo en la tabla de umbrales: dieciocho reglas en una lista
   plana no se leen, y agruparlas por lo que protegen es lo que las ordena. */
.al-grupo td {
    background: var(--pv2-surface-2);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pv2-muted);
    padding: 9px 20px !important;
}

/* ==========================================================================
   RESUMEN DE SECCION — el patron
   ==========================================================================
   Una pantalla que solo es una tabla obliga a contar filas a ojo para saber si
   algo va bien. El resumen contesta esa pregunta arriba, y la tabla queda para
   cuando ya sabes qué buscas. */
.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
       background: var(--pv2-border); border: 1px solid var(--pv2-border);
       border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.res__c { background: var(--pv2-surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.res__c--fuerte { background: var(--pv2-surface-2); }
.res__r { font-size: .78rem; color: var(--pv2-muted); }
.res__n { font-size: 1.7rem; font-weight: 700; letter-spacing: -.025em;
          font-variant-numeric: tabular-nums; color: var(--pv2-ink); line-height: 1.1; }
.res__c--fuerte .res__n { font-size: 2rem; }
.res__d { font-size: .74rem; color: var(--pv2-muted); line-height: 1.35; }
.res__t { margin: 0 0 14px; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }

/* El embudo: además de contar, navega. */
.emb { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.emb__p {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 16px; min-width: 96px;
    border: 1px solid var(--pv2-border); border-radius: 10px;
    background: var(--pv2-surface); text-decoration: none;
    transition: border-color .14s ease, transform .12s cubic-bezier(.2,.8,.3,1);
}
.emb__p:hover { border-color: var(--pv2-primary); transform: translateY(-1px); }
.emb__p--on { border-color: var(--pv2-primary); box-shadow: inset 0 0 0 1px var(--pv2-primary); }
.emb__n { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pv2-ink); line-height: 1; }
.emb__r { font-size: .76rem; color: var(--pv2-muted); }
.emb__p--awarded  .emb__n { color: var(--pv2-success); }
.emb__p--rejected .emb__n,
.emb__p--expired  .emb__n { color: var(--pv2-danger); }
.emb__todo { align-self: center; font-size: .82rem; color: var(--pv2-muted); text-decoration: underline; }

/* Las reglas, como frases y con lo que han producido. */
.rgl2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rgl2__it { display: flex; align-items: center; gap: 14px; padding: 12px 10px;
            border-radius: 10px; transition: background .14s ease; flex-wrap: wrap; }
.rgl2__it:hover { background: var(--pv2-surface-2); }
.rgl2__it--off { opacity: .6; }
.rgl2__estado { flex: none; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 650; }
.rgl2__estado--on  { background: var(--pv2-success-bg, #e6f6ee); color: var(--pv2-success); }
.rgl2__estado--off { background: var(--pv2-surface-2); color: var(--pv2-muted); }
.rgl2__txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.rgl2__nom { font-weight: 600; font-size: .92rem; color: var(--pv2-ink); }
.rgl2__frase { font-size: .82rem; color: var(--pv2-ink-2); line-height: 1.45; }
.rgl2__cifras { display: flex; gap: 16px; font-size: .8rem; color: var(--pv2-muted); flex: none; }
.rgl2__cifras b { color: var(--pv2-ink); font-variant-numeric: tabular-nums; }
.rgl2__editar { flex: none; padding: 6px 9px; border-radius: 8px; color: var(--pv2-muted); }
.rgl2__editar:hover { background: var(--pv2-surface); color: var(--pv2-primary); }

@media (max-width: 640px) {
    .rgl2__cifras { width: 100%; }
    .emb__p { flex: 1; min-width: 84px; }
}

/* Tonos del resumen: el color solo cuando la cifra significa algo bueno o malo,
   no como decoración. */
.res__c--ok    .res__n { color: var(--pv2-success); }
.res__c--mal   .res__n { color: var(--pv2-danger); }
.res__c--aviso .res__n { color: var(--pv2-warning, #b7791f); }
a.res__c { text-decoration: none; transition: background .14s ease; }
a.res__c:hover { background: var(--pv2-surface-2); }
a.res__c:hover .res__r { color: var(--pv2-primary); }

/* ── Paquetes prepago: catálogo y promociones como fichas legibles ────────
   Dos paquetes y una promoción no justifican dos tablas en dos pantallas.
   Dichos como frase se entienden sin recomponer cinco columnas. */
.pq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .pq-cols { grid-template-columns: 1fr; } }

.pq { padding: 14px 0; border-bottom: 1px solid var(--pv2-border); }
.pq:last-child { border-bottom: 0; padding-bottom: 0; }
.pq:first-child { padding-top: 0; }
.pq--off { opacity: .58; }

.pq__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pq__nom { font-weight: 650; color: var(--pv2-ink); }

.pq__estado {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pq__estado--on  { background: var(--pv2-success-soft, #e7f6ee); color: var(--pv2-success); }
.pq__estado--off { background: var(--pv2-surface-2); color: var(--pv2-ink-3); }

.pq__frase { margin: 0 0 8px; color: var(--pv2-ink-2); line-height: 1.5; }
.pq__frase b { color: var(--pv2-ink); font-weight: 650; }

.pq__pie {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--pv2-ink-3);
}
.pq__pie b { color: var(--pv2-ink-2); }
.pq__editar { margin-left: auto; color: var(--pv2-ink-3); text-decoration: none; }
.pq__editar:hover { color: var(--pv2-primary); }


/* ═══════════════════════════════════════════════════════════════════════
   CAPA DE DISEÑO v3
   ═══════════════════════════════════════════════════════════════════════

   El panel se veia plano, y no era cuestion de gusto: eran tres cosas
   concretas.

   1. La tipografia no existia. El CSS declaraba Inter desde el principio
      pero NADIE la cargaba nunca: no habia @font-face ni enlace a Google.
      El panel entero caia al sistema, asi que se veia distinto en cada
      maquina y no se parecia a un producto en ninguna.

   2. Los grises eran grises puros. Un neutro sin nada de tinte lee como
      "sin decidir". Aqui van sesgados hacia el morado de marca: la misma
      luminosidad, pero el conjunto se siente de una pieza.

   3. Todo pesaba lo mismo. Mismo borde, misma sombra, misma jerarquia
      para una cifra clave y para una fila de tabla. Sin diferencia de
      peso no hay adonde mirar primero.

   Va al final a proposito: redefine los tokens que ya usan las 67
   pantallas, asi que sube el nivel de todas sin tocar ninguna.
   ═════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ── Neutros con tinte ────────────────────────────────────────────────
     Mismo valor de luminosidad que antes; lo que cambia es que llevan algo
     del morado dentro. Un #f5f6fb neutro al lado de un morado saturado se
     ve sucio; este no. */
  --pv2-bg:          #f5f4fa;
  --pv2-surface:     #ffffff;
  --pv2-surface-2:   #faf9fd;
  --pv2-surface-3:   #f3f1fa;
  --pv2-ink:         #191627;
  --pv2-ink-2:       #4b4663;
  --pv2-ink-3:       #6f6a88;
  --pv2-muted:       #8d88a6;
  --pv2-border:      #e7e4f1;
  --pv2-border-2:    #f1eff8;

  /* Los hex del MANUAL (18-sep-2026). El 700 es el purpura del manual un
     poco mas hundido; el 600 es el purpura tal cual. */
  --pv2-primary:     #6e4c9f;
  --pv2-primary-700: #3f2672;
  --pv2-primary-600: #4e2f8e;
  --pv2-primary-050: #f5f2f8;
  --pv2-primary-100: #ebe6f2;

  /* ── Profundidad ──────────────────────────────────────────────────────
     Sombras en el morado de marca, no en negro: un negro puro sobre fondo
     con tinte se ve como suciedad. Y en capas —una linea de contacto y una
     difusa— que es como cae la luz de verdad. */
  --pv2-shadow-sm:   0 1px 2px rgba(28,20,59,.05);
  --pv2-shadow:      0 1px 2px rgba(28,20,59,.05), 0 8px 24px -10px rgba(28,20,59,.12);
  --pv2-shadow-lg:   0 2px 4px rgba(28,20,59,.05), 0 18px 44px -16px rgba(28,20,59,.20);
  --pv2-ring:        0 0 0 3px rgba(109,52,214,.16);

  /* ── Tipografia ───────────────────────────────────────────────────────
     Dos voces con trabajos distintos: Archivo tiene presencia y aguanta
     bien en grande, asi que se queda con titulos y cifras; Inter esta
     hecha para texto denso de interfaz y se queda con todo lo demas. */
  --pv2-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pv2-font-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pv2-t-fast: 140ms cubic-bezier(.2,.8,.3,1);
  --pv2-t-med:  240ms cubic-bezier(.2,.8,.3,1);
}

body.dark, body.dark-mode, html.dark {
  --pv2-bg:          #100e18;
  --pv2-surface:     #191627;
  --pv2-surface-2:   #201d31;
  --pv2-surface-3:   #272338;
  --pv2-ink:         #ece9f7;
  --pv2-ink-2:       #b9b3cd;
  --pv2-ink-3:       #918bab;
  --pv2-muted:       #837d9c;
  --pv2-border:      #2d2842;
  --pv2-border-2:    #252036;
  --pv2-primary:     #9d6cff;
  --pv2-primary-600: #8b55f5;
  --pv2-primary-700: #7a43e8;
  --pv2-primary-050: #241a3d;
  --pv2-primary-100: #2f2350;

  --pv2-shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --pv2-shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.6);
  --pv2-shadow-lg:   0 2px 6px rgba(0,0,0,.45), 0 20px 48px -18px rgba(0,0,0,.7);
  --pv2-ring:        0 0 0 3px rgba(157,108,255,.24);
}

body { font-family: var(--pv2-font); -webkit-font-smoothing: antialiased; }

/* Las cifras se leen en columna: sin ancho fijo, los digitos bailan al
   actualizarse y cuesta comparar dos filas. */
.pv2-content { font-feature-settings: "cv05" 1; }

/* ── Titulos ───────────────────────────────────────────────────────────── */
.pv2-page-header h1 {
  font-family: var(--pv2-font-display);
  font-size: 27px; font-weight: 700; letter-spacing: -.028em; line-height: 1.15;
  text-wrap: balance;
}
.pv2-page-header p { color: var(--pv2-ink-3); font-size: 14.5px; max-width: 68ch; line-height: 1.5; }
.pv2-page-header { align-items: flex-start; margin-bottom: 24px; }

.pv2-card__head h3 {
  font-family: var(--pv2-font-display);
  font-size: 15px; font-weight: 650; letter-spacing: -.012em;
}

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.pv2-card {
  border-radius: 16px;
  border-color: var(--pv2-border);
  box-shadow: var(--pv2-shadow-sm);
  transition: box-shadow var(--pv2-t-med), border-color var(--pv2-t-med);
}
.pv2-card:hover { box-shadow: var(--pv2-shadow); }
.pv2-card__head { padding: 15px 20px; border-bottom-color: var(--pv2-border-2); }

/* ── El resumen: es lo primero que se mira, y ahora lo parece ──────────── */
.res {
  border: 0; background: none; gap: 14px; border-radius: 0; overflow: visible;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  margin-bottom: 22px;
}
.res__c {
  position: relative; overflow: hidden;
  background: var(--pv2-surface);
  border: 1px solid var(--pv2-border); border-radius: 15px;
  padding: 17px 19px 18px; gap: 5px;
  box-shadow: var(--pv2-shadow-sm);
  transition: transform var(--pv2-t-fast), box-shadow var(--pv2-t-med), border-color var(--pv2-t-med);
}
/* La cifra que manda lleva un filo de color arriba. Es la unica pista de
   color de la banda, asi que no compite con nada. */
.res__c--fuerte::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--pv2-primary), var(--pv2-primary-600));
}
.res__c--fuerte { background: var(--pv2-surface); }
.res__c--ok::before,
.res__c--aviso::before,
.res__c--mal::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.res__c--ok::before    { background: var(--pv2-success); }
.res__c--aviso::before { background: var(--pv2-warning); }
.res__c--mal::before   { background: var(--pv2-danger); }

.res__r {
  font-size: .745rem; font-weight: 600; letter-spacing: .045em;
  text-transform: uppercase; color: var(--pv2-muted);
}
.res__n {
  font-family: var(--pv2-font-display);
  font-size: 2rem; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--pv2-ink); line-height: 1.05;
}
.res__c--fuerte .res__n { font-size: 2.3rem; }
.res__d { font-size: .775rem; color: var(--pv2-ink-3); line-height: 1.4; }

a.res__c:hover { transform: translateY(-2px); box-shadow: var(--pv2-shadow); border-color: var(--pv2-primary-100); }
a.res__c:hover .res__r { color: var(--pv2-primary); }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.pv2-content .table thead th, .pv2-content table.dataTable thead th {
  background: var(--pv2-surface-2); color: var(--pv2-muted);
  font-size: 11.5px; letter-spacing: .055em; font-weight: 650;
  padding: 11px 16px;
}
.pv2-content .table td, .pv2-content table.dataTable td {
  padding: 13px 16px; font-size: 13.5px;
  border-bottom-color: var(--pv2-border-2) !important;
}
/* La fila bajo el cursor se marca con un filo a la izquierda ademas del
   fondo: en una tabla ancha el cambio de fondo solo no se ve donde estas
   mirando. */
.pv2-content .table tbody tr, .pv2-content table.dataTable tbody tr {
  box-shadow: inset 3px 0 0 transparent;
  transition: background var(--pv2-t-fast), box-shadow var(--pv2-t-fast);
}
.pv2-content .table tbody tr:hover, .pv2-content table.dataTable tbody tr:hover {
  background: var(--pv2-surface-2);
  box-shadow: inset 3px 0 0 var(--pv2-primary);
}
.pv2-content .table tbody td:first-child,
.pv2-content table.dataTable tbody td:first-child { color: var(--pv2-ink); font-weight: 550; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.pv2-btn {
  border-radius: 11px; font-weight: 600; font-size: 13.5px;
  transition: transform var(--pv2-t-fast), box-shadow var(--pv2-t-med),
              background var(--pv2-t-fast), border-color var(--pv2-t-fast);
}
.pv2-btn:active { transform: translateY(1px); }
.pv2-btn--primary {
  background: linear-gradient(180deg, var(--pv2-primary), var(--pv2-primary-600));
  border-color: var(--pv2-primary-600);
  box-shadow: 0 1px 2px rgba(28,20,59,.16), inset 0 1px 0 rgba(255,255,255,.18);
}
.pv2-btn--primary:hover {
  background: linear-gradient(180deg, var(--pv2-primary-600), var(--pv2-primary-700));
  box-shadow: 0 4px 14px -4px rgba(109,52,214,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.pv2-btn:focus-visible,
.pv2-content .form-control:focus,
.pv2-nav__item:focus-visible { outline: none; box-shadow: var(--pv2-ring) !important; }

/* ── Menu lateral ──────────────────────────────────────────────────────── */
.pv2-nav__item {
  border-radius: 10px; font-size: 13.5px;
  position: relative; transition: background var(--pv2-t-fast), color var(--pv2-t-fast);
}
.pv2-nav__item.is-active {
  background: var(--pv2-primary-050); color: var(--pv2-primary); font-weight: 600;
}
/* Marca vertical en el borde: dice en que seccion estas sin depender de
   distinguir dos tonos de fondo parecidos.

   Va como sombra interior y no como ::before posicionado porque
   .pv2-nav__items tiene overflow:hidden y recortaria el pseudo-elemento;
   ademas asi sigue el redondeo del propio boton sin calcular nada. */
.pv2-nav__item.is-active { box-shadow: inset 3px 0 0 var(--pv2-primary); }
.pv2-nav__label { letter-spacing: .05em; font-size: 11px; font-weight: 650; }

/* ── Insignias de estado ───────────────────────────────────────────────── */
.pv2-content .badge {
  border-radius: 999px; font-weight: 600; font-size: 11.5px;
  padding: 4px 10px; letter-spacing: .01em;
}

/* ── Entrada ───────────────────────────────────────────────────────────────
   Las tarjetas del resumen aparecen escalonadas al cargar. Es corto a
   proposito: da sensacion de que la pantalla se arma, sin hacer esperar. */
@keyframes pv2-entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.res__c { animation: pv2-entra 320ms cubic-bezier(.2,.8,.3,1) backwards; }
.res__c:nth-child(1) { animation-delay: 0ms; }
.res__c:nth-child(2) { animation-delay: 45ms; }
.res__c:nth-child(3) { animation-delay: 90ms; }
.res__c:nth-child(4) { animation-delay: 135ms; }
.res__c:nth-child(5) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .res__c { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ── Segunda pasada: lo que la capa compartida no toca ─────────────────── */

/* Barra superior. Era una franja blanca sin peso: al hacer scroll la tabla
   pasaba por debajo y no se distinguia donde acababa una y empezaba la otra. */
.pv2-topbar {
  /* El opaco va primero: si el navegador no entiende color-mix descarta esa
     linea y se queda con este, en vez de dejar la barra transparente. */
  background: var(--pv2-surface);
  background: color-mix(in srgb, var(--pv2-surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom-color: var(--pv2-border-2);
  box-shadow: 0 1px 0 rgba(28,20,59,.03);
}
/* Sin soporte de color-mix el fondo tiene que ser opaco: translucido sin
   blur deja la tabla leyendose a traves de la barra. */
@supports not (backdrop-filter: blur(4px)) {
  .pv2-topbar { background: var(--pv2-surface); }
}
.pv2-topbar__chip { border-radius: 999px; font-size: 12.5px; background: var(--pv2-surface-2); }

/* KPIs: mismo tratamiento que el resumen, para que las dos familias de
   cifras del panel se lean igual. */
.pv2-kpi {
  border-radius: 15px; box-shadow: var(--pv2-shadow-sm);
  transition: transform var(--pv2-t-fast), box-shadow var(--pv2-t-med);
}
.pv2-kpi:hover { transform: translateY(-2px); box-shadow: var(--pv2-shadow); }
.pv2-kpi__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pv2-muted); }
.pv2-kpi__value {
  font-family: var(--pv2-font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.pv2-kpi__icon { border-radius: 12px; }
.pv2-kpi--accent {
  background: linear-gradient(145deg, var(--pv2-primary-600), var(--pv2-primary) 55%, #8f5bff);
  box-shadow: 0 6px 22px -8px rgba(109,52,214,.55);
}
.pv2-kpi--accent:hover { box-shadow: 0 12px 32px -10px rgba(109,52,214,.6); }

/* Estado vacio: era un gris centrado sin forma. Un contorno punteado dice
   "aqui va a haber algo" en vez de parecer que la pantalla no cargo. */
.pv2-empty {
  border: 1px dashed var(--pv2-border); border-radius: 14px;
  background: var(--pv2-surface-2); color: var(--pv2-ink-3);
  padding: 38px 20px; font-size: 14px;
}
.pv2-empty i { opacity: .38; color: var(--pv2-primary); }

/* Campos: el foco tiene que verse, y el reposo no. */
.pv2-content .form-control,
.pv2-content .form-select,
.pv2-content input[type="text"], .pv2-content input[type="number"],
.pv2-content input[type="email"], .pv2-content input[type="date"] {
  border-radius: 11px !important;
  border-color: var(--pv2-border) !important;
  background: var(--pv2-surface) !important;
  color: var(--pv2-ink) !important;
  font-size: 13.5px;
  transition: border-color var(--pv2-t-fast), box-shadow var(--pv2-t-fast);
}
.pv2-content .form-control::placeholder { color: var(--pv2-muted); }
.pv2-content .form-control:hover { border-color: var(--pv2-ink-3) !important; }

/* Avisos: el filo de color a la izquierda ahora dice de que tipo es. */
.pv2-alert { border-radius: 14px; box-shadow: var(--pv2-shadow-sm); }
.pv2-alert--warning { border-left-color: var(--pv2-warning); background: var(--pv2-warning-bg); }
.pv2-alert--danger  { border-left-color: var(--pv2-danger);  background: var(--pv2-danger-bg); }
.pv2-alert--success { border-left-color: var(--pv2-success); background: var(--pv2-success-bg); }
.pv2-alert--info    { border-left-color: var(--pv2-info);    background: var(--pv2-info-bg); }

/* Los bloques propios de cada seccion, al mismo idioma. */
.pq__nom, .rgl2__nom { font-family: var(--pv2-font-display); letter-spacing: -.012em; }
.emb__n { font-family: var(--pv2-font-display); font-size: 1.45rem; letter-spacing: -.03em; }
.emb__p { border-radius: 12px; box-shadow: var(--pv2-shadow-sm); }
.emb__p:hover { box-shadow: var(--pv2-shadow); }
.pq__estado, .rgl2__estado { letter-spacing: .015em; }

/* Las tarjetas del cuerpo entran igual que el resumen, un pelo despues:
   primero las cifras, luego el detalle. */
.pv2-content > .pv2-card,
.pv2-content > .pq-cols > .pv2-card {
  animation: pv2-entra 340ms cubic-bezier(.2,.8,.3,1) 120ms backwards;
}
@media (prefers-reduced-motion: reduce) {
  .pv2-content > .pv2-card,
  .pv2-content > .pq-cols > .pv2-card { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CAPA MOVIL
   ═══════════════════════════════════════════════════════════════════════

   El panel ya tenia el menu deslizable, pero eso es la parte facil. En un
   telefono lo que rompe es la TABLA: 8 o 10 columnas no caben en 360 px de
   ancho, asi que la pagina entera se iba de lado y para leer una fila
   habia que arrastrar horizontalmente perdiendo de vista la primera
   columna, que es la que dice de quien es la fila.

   Aqui cada fila se convierte en una ficha y cada celda lleva delante el
   nombre de su columna. Se aplica a las 25+ pantallas que usan DataTables
   de una vez.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .pv2-content { --pv2-pad-x: 14px; padding: 16px var(--pv2-pad-x) 28px; }
  .pv2-topbar  { padding: 11px 14px; }

  /* Area tactil de verdad. 20px de icono no son un boton. */
  .pv2-burger {
    width: 42px; height: 42px; margin-left: -9px;
    align-items: center; justify-content: center; border-radius: 11px;
  }
  .pv2-burger:active { background: var(--pv2-surface-2); }

  .pv2-page-header h1 { font-size: 22px; }
  .pv2-page-header p  { font-size: 13.5px; }

  /* Las acciones bajan y se reparten el ancho: en una fila con el titulo
     quedaban apretadas contra el borde y a menos de 44 px de alto. */
  .pv2-page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .pv2-page-header__actions { width: 100%; }
  .pv2-page-header__actions > * { flex: 1; justify-content: center; min-height: 42px; }

  .pv2-card { border-radius: 14px; margin-bottom: 16px; }
  .pv2-card__body { padding: 16px; }
  .pv2-card__head { padding: 14px 16px; }

  .res { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .res__c { padding: 14px 15px; }
  .res__n { font-size: 1.7rem; }
  .res__c--fuerte .res__n { font-size: 1.95rem; }
}

/* ── El bloqueo de scroll del fondo ────────────────────────────────────────
   Con el menu abierto, arrastrar sobre el fondo movia la pagina de detras
   y al cerrar habias perdido el sitio. */
body.pv2-sin-scroll { overflow: hidden; }

@media (max-width: 760px) {

  /* ── Tablas como fichas ───────────────────────────────────────────────
     `display:block` en las celdas anula la rejilla de la tabla, que es
     justo lo que estorba: cada fila pasa a ser una tarjeta apilada. El
     nombre de la columna lo pone panel-movil.js en data-col, porque los
     encabezados de estas tablas los genera yajra y no se pueden escribir
     a mano en el CSS. */
  .pv2-content table.dataTable,
  .pv2-content .table.pv2-fichas {
    border: 0; display: block; width: 100% !important;
  }
  .pv2-content table.dataTable thead,
  .pv2-content .table.pv2-fichas thead { display: none; }

  .pv2-content table.dataTable tbody,
  .pv2-content .table.pv2-fichas tbody { display: block; }

  .pv2-content table.dataTable tbody tr,
  .pv2-content .table.pv2-fichas tbody tr {
    display: block; margin: 0 0 10px;
    background: var(--pv2-surface);
    border: 1px solid var(--pv2-border); border-radius: 13px;
    padding: 4px 2px; box-shadow: var(--pv2-shadow-sm);
  }
  /* El filo del hover no aplica en tactil y en vertical sale como una
     barra suelta arriba de la ficha. */
  .pv2-content table.dataTable tbody tr:hover,
  .pv2-content .table.pv2-fichas tbody tr:hover { box-shadow: var(--pv2-shadow-sm); background: var(--pv2-surface); }

  .pv2-content table.dataTable tbody td,
  .pv2-content .table.pv2-fichas tbody td {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 9px 14px !important;
    border: 0 !important; border-bottom: 1px solid var(--pv2-border-2) !important;
    text-align: left !important; white-space: normal !important;
    font-size: 13.5px; min-height: 0;
  }
  .pv2-content table.dataTable tbody td:last-child,
  .pv2-content .table.pv2-fichas tbody td:last-child { border-bottom: 0 !important; }

  /* El nombre de la columna, delante del dato. Sin esto una ficha es una
     lista de valores sueltos sin decir de que son. */
  .pv2-content table.dataTable tbody td[data-col]::before,
  .pv2-content .table.pv2-fichas tbody td[data-col]::before {
    content: attr(data-col);
    flex: 0 0 40%; max-width: 40%;
    font-size: 11px; font-weight: 650; letter-spacing: .04em;
    text-transform: uppercase; color: var(--pv2-muted);
    padding-top: 2px;
  }
  /* Una celda sin nombre de columna (checkbox, acciones) ocupa la ficha
     entera en vez de dejar un hueco a la izquierda. */
  .pv2-content table.dataTable tbody td:not([data-col]),
  .pv2-content .table.pv2-fichas tbody td:not([data-col]) { justify-content: flex-end; }

  /* La primera celda hace de titulo de la ficha. */
  .pv2-content table.dataTable tbody td.pv2-ficha__cab,
  .pv2-content .table.pv2-fichas tbody td.pv2-ficha__cab {
    font-family: var(--pv2-font-display);
    font-size: 15px; font-weight: 650; color: var(--pv2-ink);
    background: var(--pv2-surface-2);
    border-radius: 11px 11px 0 0; padding: 11px 14px !important;
  }
  .pv2-content table.dataTable tbody td.pv2-ficha__cab::before,
  .pv2-content .table.pv2-fichas tbody td.pv2-ficha__cab::before { display: none; }

  /* Los botones de accion, tocables y en fila. */
  .pv2-content table.dataTable tbody td .btn,
  .pv2-content table.dataTable tbody td .dropdown { min-height: 38px; }

  /* ── Los mandos de DataTables ─────────────────────────────────────────
     "Mostrar N registros", el buscador y la paginacion iban en una fila
     de tres que en movil se pisaban entre si. */
  .pv2-content .dataTables_wrapper .row > div { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .pv2-content .dataTables_wrapper .dataTables_filter { text-align: left; margin-bottom: 10px; }
  .pv2-content .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
  .pv2-content .dataTables_wrapper .dataTables_filter label { width: 100%; }
  .pv2-content .dataTables_wrapper .dataTables_length { margin-bottom: 10px; }
  .pv2-content .dataTables_wrapper .dataTables_info { font-size: 12.5px; }
  .pv2-content .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; padding-top: 10px; }
  .pv2-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 38px; min-height: 38px; line-height: 24px;
  }

  /* ── Formularios ──────────────────────────────────────────────────────
     16px no es capricho: por debajo de eso iOS hace zoom al enfocar el
     campo y deja la pagina descuadrada, con el usuario teniendo que
     pellizcar para volver. */
  .pv2-content .form-control,
  .pv2-content .form-select,
  .pv2-content input, .pv2-content select, .pv2-content textarea {
    font-size: 16px !important; min-height: 44px;
  }
  .pv2-content textarea { min-height: 88px; }
  .pv2-content .col-md-6, .pv2-content .col-md-4, .pv2-content .col-md-3,
  .pv2-content .col-lg-6, .pv2-content .col-lg-4, .pv2-content .col-lg-3 {
    width: 100%; max-width: 100%; flex: 0 0 100%;
  }
  .pv2-content .form-group { margin-bottom: 16px; }

  /* Botones del formulario: ancho completo y en columna. Dos botones a
     medias en 360 px acaban con el texto partido. */
  .pv2-content .card-footer .btn,
  .pv2-content .form-actions .btn { width: 100%; margin: 0 0 8px; min-height: 46px; }

  /* ── Modales como hoja ────────────────────────────────────────────────
     Un modal centrado con margen se queda en una ventanita en la que no
     cabe nada. Aqui sube desde abajo y ocupa lo que necesite. */
  .pv2-content .modal-dialog, .modal-dialog {
    margin: 0; max-width: 100%; min-height: 100%;
    display: flex; align-items: flex-end;
  }
  .modal-content { border-radius: 18px 18px 0 0; width: 100%; }
  .modal-body { max-height: 72vh; overflow-y: auto; }

  /* Nada debe empujar la pagina de lado. */
  .pv2-content img, .pv2-content iframe, .pv2-content pre { max-width: 100%; }
  .pv2-content .card, .pv2-content .pv2-card { max-width: 100%; }
}

@media (max-width: 480px) {
  .pv2-content { --pv2-pad-x: 11px; padding: 13px var(--pv2-pad-x) 26px; }
  .res { grid-template-columns: 1fr 1fr; }
  .res__c--fuerte { grid-column: 1 / -1; }
  .pv2-page-header h1 { font-size: 20px; }
  .pv2-topbar__chip span { display: none; }
  .pv2-kpi-grid { grid-template-columns: 1fr; }
  /* En pantalla estrecha el nombre de la columna encima del dato, no al
     lado: a 40% de 320 px no cabe ni una palabra. */
  .pv2-content table.dataTable tbody td[data-col],
  .pv2-content .table.pv2-fichas tbody td[data-col] { flex-direction: column; gap: 3px; }
  .pv2-content table.dataTable tbody td[data-col]::before,
  .pv2-content .table.pv2-fichas tbody td[data-col]::before { flex: none; max-width: none; }
}

/* ── Progreso de promociones ───────────────────────────────────────────────
   Era una tabla con una fila por INTENTO. Un chofer sale en varias, asi que
   para saber como le va a alguien habia que localizar sus filas sueltas y
   compararlas a ojo — y con "3 / 5 (60%)" repetido en cada una, nadie iba a
   hacerlo. Aqui una ficha por persona y una barra por intento. */
.prg__mando {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}

.segm2 {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--pv2-surface-2); border: 1px solid var(--pv2-border);
  border-radius: 12px;
}
.segm2__b {
  border: 0; background: none; cursor: pointer;
  padding: 7px 14px; border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--pv2-ink-3);
  transition: background var(--pv2-t-fast), color var(--pv2-t-fast);
}
.segm2__b:hover { color: var(--pv2-ink); }
.segm2__b.is-on {
  background: var(--pv2-surface); color: var(--pv2-primary);
  box-shadow: var(--pv2-shadow-sm);
}

.prg__buscar {
  flex: 1; min-width: 200px; max-width: 340px;
  padding: 9px 13px; font-size: 13.5px;
  border: 1px solid var(--pv2-border); border-radius: 11px;
  background: var(--pv2-surface); color: var(--pv2-ink);
}
.prg__buscar:focus { outline: none; border-color: var(--pv2-primary); box-shadow: var(--pv2-ring); }

.prg {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.prg__c {
  background: var(--pv2-surface); border: 1px solid var(--pv2-border);
  border-radius: 15px; padding: 15px 16px 13px;
  box-shadow: var(--pv2-shadow-sm);
  transition: transform var(--pv2-t-fast), box-shadow var(--pv2-t-med);
}
.prg__c:hover { transform: translateY(-2px); box-shadow: var(--pv2-shadow); }

.prg__cab { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
/* El avatar lo dibuja el componente compartido (.av); aqui solo que no se
   encoja cuando el nombre es largo. */
.prg__av { flex: none; border-radius: 11px; }
.prg__quien { display: flex; flex-direction: column; min-width: 0; }
.prg__nom {
  font-family: var(--pv2-font-display); font-weight: 650; font-size: 14.5px;
  color: var(--pv2-ink); text-decoration: none; letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prg__nom:hover { color: var(--pv2-primary); text-decoration: none; }
.prg__id { font-size: 11.5px; color: var(--pv2-muted); font-variant-numeric: tabular-nums; }

.prg__sello {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: 650; letter-spacing: .015em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--pv2-surface-2); color: var(--pv2-ink-3);
}
.prg__sello--ok    { background: var(--pv2-success-bg); color: var(--pv2-success); }
.prg__sello--vivo  { background: var(--pv2-info-bg);    color: var(--pv2-info); }
.prg__sello--cerca { background: var(--pv2-warning-bg); color: var(--pv2-warning); }

.prg__intentos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.prg__ilinea { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.prg__ipromo {
  font-size: 12.5px; color: var(--pv2-ink-2); font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prg__icifra {
  margin-left: auto; flex: none;
  font-family: var(--pv2-font-display); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--pv2-ink); letter-spacing: -.02em;
}

.prg__barra {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--pv2-surface-3);
}
.prg__barra > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--pv2-ink-3);
  /* Crece al entrar: en una pantalla de progreso, verlo llenarse dice mas
     que el numero. Se anula con prefers-reduced-motion. */
  animation: prg-crece 620ms cubic-bezier(.2,.8,.3,1) backwards;
}
.prg__i--ok   .prg__barra > span { background: linear-gradient(90deg, var(--pv2-success), #34d399); }
.prg__i--vivo .prg__barra > span { background: linear-gradient(90deg, var(--pv2-primary), #9d6cff); }
.prg__i--fin  .prg__barra > span { background: var(--pv2-border); }
.prg__i--fin  .prg__icifra { color: var(--pv2-ink-3); }

@keyframes prg-crece { from { width: 0 !important; } }

.prg__ipie { margin-top: 5px; }
.prg__et { font-size: 11.5px; color: var(--pv2-muted); }
.prg__et--ok   { color: var(--pv2-success); font-weight: 600; }
.prg__et--vivo { color: var(--pv2-primary); font-weight: 600; }

.prg__vacio { margin: 22px 0; text-align: center; color: var(--pv2-muted); }

@media (max-width: 640px) {
  .prg { grid-template-columns: 1fr; }
  .prg__mando { flex-direction: column; align-items: stretch; }
  .segm2 { overflow-x: auto; }
  .segm2__b { white-space: nowrap; min-height: 40px; }
  .prg__buscar { max-width: none; min-height: 44px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .prg__barra > span { animation: none; }
  .prg__c:hover { transform: none; }
}

/* ── Surge: la regla dicha, con el recargo delante ─────────────────────── */
.sg {
  display: flex; align-items: center; gap: 15px;
  padding: 13px 0; border-bottom: 1px solid var(--pv2-border-2);
}
.sg:last-child { border-bottom: 0; padding-bottom: 0; }
.sg:first-child { padding-top: 0; }

/* El recargo es el dato: va primero y en grande, no perdido en una columna. */
.sg__valor {
  flex: none; min-width: 64px; text-align: center;
  font-family: var(--pv2-font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--pv2-warning); background: var(--pv2-warning-bg);
  padding: 7px 11px; border-radius: 11px;
}
.sg__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg__frase { color: var(--pv2-ink); font-size: 13.5px; line-height: 1.45; }
.sg__meta { font-size: 11.5px; color: var(--pv2-muted); }

.sg__acc { display: flex; align-items: center; gap: 4px; flex: none; }
.sg__form { margin: 0; }
.sg__editar, .sg__borrar {
  border: 0; background: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pv2-ink-3); font-size: 13px;
  transition: background var(--pv2-t-fast), color var(--pv2-t-fast);
}
.sg__editar:hover { background: var(--pv2-surface-2); color: var(--pv2-primary); }
.sg__borrar:hover { background: var(--pv2-danger-bg); color: var(--pv2-danger); }

@media (max-width: 560px) {
  .sg { flex-wrap: wrap; gap: 10px; }
  .sg__txt { flex-basis: 100%; order: 3; }
  .sg__acc { margin-left: auto; }
  .sg__editar, .sg__borrar { width: 40px; height: 40px; }
}

/* ── La tarjeta de Ingresos era ilegible ───────────────────────────────────
   La cifra salia morado OSCURO sobre el degradado morado: el dato mas
   importante del panel, y no se leia.

   No era el degradado: la tarjeta es un enlace (lleva a Pagos) y
   `.pv2-content a` —una clase mas un elemento, 0,1,1— le ganaba en
   especificidad al `color:#fff` de `.pv2-kpi--accent`, que es solo una clase.
   Asi que heredaba el color de enlace y lo repartia a todo lo de dentro.

   Aqui se gana la especificidad de verdad en vez de tapar con !important,
   para que siga siendo posible cambiarlo mas adelante. */
.pv2-content a.pv2-kpi--accent,
.pv2-content a.pv2-kpi--accent:hover,
.pv2-kpi--accent { color: #fff; }

.pv2-content a.pv2-kpi--accent .pv2-kpi__value,
.pv2-kpi--accent .pv2-kpi__value {
  color: #fff;
  /* Sombra corta hacia abajo: sobre un degradado, el blanco puro pierde
     borde por arriba y la cifra se ve blanda. */
  text-shadow: 0 1px 2px rgba(40,16,90,.22);
}

.pv2-content a.pv2-kpi--accent .pv2-kpi__label,
.pv2-kpi--accent .pv2-kpi__label { color: rgba(255,255,255,.82); }

.pv2-content a.pv2-kpi--accent .pv2-kpi__foot,
.pv2-kpi--accent .pv2-kpi__foot { color: rgba(255,255,255,.78); }

/* El delta iba en rojo y verde de marca, pensados para fondo claro: sobre
   morado el rojo casi desaparece. Aqui van tintes claros del mismo
   significado, que si contrastan contra el degradado. */
.pv2-kpi--accent .pv2-kpi__delta.down { color: #ffc9c9; }
.pv2-kpi--accent .pv2-kpi__delta.up   { color: #b7f7cf; }

.pv2-content a.pv2-kpi--accent .pv2-kpi__icon,
.pv2-kpi--accent .pv2-kpi__icon { background: rgba(255,255,255,.2); color: #fff; }

/* Y el dinero, en todas las tarjetas: cifras alineadas en columna. Sin ancho
   fijo los digitos bailan al actualizarse y dos tarjetas no se comparan. */
.pv2-kpi__value { font-variant-numeric: tabular-nums; }

/* ── Contenido de la app: galería, no tabla ───────────────────────────────
   Splash y Banners eran dos tablas de texto para administrar IMAGENES. Para
   saber que hay puesto en la app habia que abrir fila por fila. Aqui se ve
   lo que se ve en la app. */
.gal {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.gal__c {
  position: relative; overflow: hidden;
  border: 1px solid var(--pv2-border); border-radius: 14px;
  background: var(--pv2-surface);
  transition: box-shadow var(--pv2-t-med), border-color var(--pv2-t-med);
}
.gal__c:hover { box-shadow: var(--pv2-shadow); border-color: var(--pv2-primary-100); }

.gal__marco {
  margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
  /* Tablero de ajedrez: una imagen con transparencia sobre blanco parece
     recortada; asi se ve donde acaba de verdad. */
  background:
    linear-gradient(45deg, var(--pv2-surface-3) 25%, transparent 25%, transparent 75%, var(--pv2-surface-3) 75%) 0 0 / 16px 16px,
    linear-gradient(45deg, var(--pv2-surface-3) 25%, transparent 25%, transparent 75%, var(--pv2-surface-3) 75%) 8px 8px / 16px 16px,
    var(--pv2-surface-2);
}
.gal__marco img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* El splash es vertical: encajarlo en 16/9 lo deja diminuto. */
.gal__marco--movil { aspect-ratio: 9 / 16; max-width: 150px; border-radius: 12px; border: 1px solid var(--pv2-border); }

.gal__pie { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
.gal__nom {
  font-family: var(--pv2-font-display); font-weight: 650; font-size: 13.5px;
  color: var(--pv2-ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gal__cat { font-size: 11.5px; color: var(--pv2-muted); }
.gal__link { font-size: 11.5px; color: var(--pv2-primary); text-decoration: none; }
.gal__link:hover { text-decoration: underline; }
.gal__link--no { color: var(--pv2-muted); }

/* Las acciones aparecen sobre la imagen al pasar por encima: en reposo la
   tarjeta es la imagen, que es lo que se viene a mirar. */
.gal__hover {
  position: absolute; inset: 0 0 auto 0; padding: 10px;
  display: flex; gap: 6px; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(20,12,45,.55), transparent);
  opacity: 0; transition: opacity var(--pv2-t-fast);
}
.gal__c:hover .gal__hover,
.gal__c:focus-within .gal__hover { opacity: 1; }
.gal__hover form { margin: 0; }

/* En tactil no hay hover: las acciones se quedan visibles siempre. */
@media (hover: none) {
  .gal__hover { opacity: 1; position: static; background: none; padding: 0 13px 13px; justify-content: flex-start; }
}

/* El splash va en fila: imagen a la izquierda, estado y acciones al lado. */
.gal__it {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--pv2-border-2);
}
.gal__it:last-child { border-bottom: 0; padding-bottom: 0; }
.gal__it:first-child { padding-top: 0; }
.gal__it--on .gal__marco--movil { border-color: var(--pv2-success); box-shadow: 0 0 0 3px var(--pv2-success-bg); }

.gal__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gal__estado {
  align-self: flex-start;
  font-size: 11px; font-weight: 650; letter-spacing: .015em;
  padding: 4px 10px; border-radius: 999px;
}
.gal__estado--on  { background: var(--pv2-success-bg); color: var(--pv2-success); }
.gal__estado--off { background: var(--pv2-surface-2); color: var(--pv2-ink-3); }
.gal__meta { font-size: 11.5px; color: var(--pv2-muted); }
.gal__acc { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.gal__acc form { margin: 0; }

@media (max-width: 560px) {
  .gal { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gal__it { flex-direction: column; }
  .gal__marco--movil { max-width: 120px; }
}

/* El cierre manual, dentro de la pantalla de auto-logout: son lo mismo, uno
   por horario y otro ahora mismo. */
.al-pagehead-accion { margin-left: auto; align-self: center; white-space: nowrap; }
@media (max-width: 640px) { .al-pagehead-accion { margin: 10px 0 0; width: 100%; justify-content: center; } }

/* Medido el 21-sep-2026 con la letra del sistema en 1.3x: el boton se salia
 * 13px. Lleva `white-space: nowrap` arriba y con la letra crecida el texto ya
 * no cabe en su 100%, asi que empuja la pagina.
 *
 * ⛔ Va AQUI y no en el bloque de arreglos de mas arriba: aquella regla venia
 * ANTES en el archivo y, con la misma especificidad, ganaba el `nowrap` de la
 * linea de al lado. En la cascada el orden manda.
 *
 * El alto minimo es para el boton de guardar, que se quedaba en 43px. */
@media (max-width: 720px) {
    .al-pagehead-accion { white-space: normal; max-width: 100%; }
    .al-btn {
        min-height: 44px; display: inline-flex;
        align-items: center; justify-content: center;
    }
}

/* ── Alertas KYC dentro de la cola de documentos ──────────────────────────
   Eran su propia entrada de menu. Son la misma pregunta que la pantalla de
   documentos —si se puede confiar en este chofer— pero raras y urgentes,
   mientras los documentos son cientos y rutina. En una pantalla aparte no
   las veia nadie; aqui estan donde ya estas mirando choferes. */
.kycav {
  border: 1px solid var(--pv2-warning); border-left-width: 4px;
  background: var(--pv2-warning-bg); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 18px;
  box-shadow: var(--pv2-shadow-sm);
}
.kycav__cab {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-family: var(--pv2-font-display); font-weight: 650; font-size: 14px;
  color: var(--pv2-warning); letter-spacing: -.01em;
}

.kycav__it {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid rgba(183,121,31,.18);
}
/* La severidad alta se marca: no todas las alertas pesan igual. */
.kycav__it--high { box-shadow: inset 3px 0 0 var(--pv2-danger); padding-left: 11px; }

.kycav__txt { flex: 1; min-width: 190px; display: flex; flex-direction: column; }
.kycav__nom { font-weight: 650; font-size: 13.5px; color: var(--pv2-ink); }
.kycav__mot { font-size: 12px; color: var(--pv2-ink-2); line-height: 1.4; }

.kycav__acc { display: flex; gap: 7px; flex-wrap: wrap; }
.kycav__acc form { margin: 0; }

.kycav__todas {
  display: inline-block; margin-top: 10px;
  font-size: 12.5px; color: var(--pv2-warning); text-decoration: underline;
}

@media (max-width: 560px) {
  .kycav__acc { width: 100%; }
  .kycav__acc form, .kycav__acc .pv2-btn { flex: 1; justify-content: center; }
}

/* ── El asistente, flotante ────────────────────────────────────────────────
   Estaba solo como pantalla completa: para preguntarle algo habia que dejar
   lo que mirabas, ir al menu y volver. Y las preguntas que se le hacen
   ("¿cuantos viajes van hoy?") salen JUSTO mientras miras otra pantalla.

   Va encima de Ayuda porque son la misma clase de cosa. Comparten esquina, asi
   que abrir uno cierra el otro: dos cajones abiertos se tapan y no se sabe
   cual escucha. */
.cbw__fab {
  position: fixed; right: 22px; bottom: 80px; z-index: 1054;
  display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 12px 18px; font: inherit; font-weight: 650; font-size: 14px;
  background: linear-gradient(180deg, var(--pv2-primary), var(--pv2-primary-600));
  color: #fff;
  box-shadow: 0 10px 30px rgba(109,52,214,.34), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform var(--pv2-t-fast), box-shadow var(--pv2-t-med), opacity var(--pv2-t-fast);
}
.cbw__fab:hover  { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(109,52,214,.42); }
.cbw__fab:active { transform: translateY(0); }
.cbw__fab i { font-size: 17px; }

/* Con Ayuda abierta, este boton queda debajo del cajon: estorba y no se puede
   pulsar. Se aparta en vez de quedarse tapado a medias. */
.cbw--tapado .cbw__fab { opacity: 0; pointer-events: none; }

.cbw__panel {
  position: fixed; right: 18px; bottom: 138px; z-index: 1069;
  width: min(400px, calc(100vw - 28px));
  height: min(540px, calc(100vh - 200px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pv2-surface);
  border: 1px solid var(--pv2-border); border-radius: 20px;
  box-shadow: var(--pv2-shadow-lg);
  transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform var(--pv2-t-med), opacity var(--pv2-t-med);
}
.cbw.is-open .cbw__panel { transform: none; opacity: 1; pointer-events: auto; }

.cbw__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 17px; color: #fff;
  background: linear-gradient(135deg, var(--pv2-primary-600), var(--pv2-primary) 60%, #8f5bff);
}
.cbw__cab small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.cbw__cab h2 {
  margin: 2px 0 0; font-family: var(--pv2-font-display);
  font-size: 16px; font-weight: 650; color: #fff; letter-spacing: -.015em;
}
.cbw__cabacc { display: flex; align-items: center; gap: 4px; }
.cbw__icono {
  border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 9px; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background var(--pv2-t-fast);
}
.cbw__icono:hover { background: rgba(255,255,255,.3); color: #fff; }

.cbw__hilo {
  flex: 1; overflow-y: auto; padding: 15px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--pv2-surface-2);
}

.cbw__bienvenida p { margin: 0 0 11px; font-size: 13px; color: var(--pv2-ink-2); line-height: 1.5; }
.cbw__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cbw__chip {
  border: 1px solid var(--pv2-border); background: var(--pv2-surface);
  color: var(--pv2-ink-2); cursor: pointer;
  padding: 6px 11px; border-radius: 999px; font: inherit; font-size: 12px;
  transition: border-color var(--pv2-t-fast), color var(--pv2-t-fast);
}
.cbw__chip:hover { border-color: var(--pv2-primary); color: var(--pv2-primary); }

.cbw__msg {
  max-width: 88%; padding: 10px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.cbw__msg--user {
  align-self: flex-end; border-bottom-right-radius: 5px;
  background: var(--pv2-primary); color: #fff;
}
.cbw__msg--assistant {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: var(--pv2-surface); color: var(--pv2-ink);
  border: 1px solid var(--pv2-border);
}
.cbw__msg--mal { border-color: var(--pv2-danger); color: var(--pv2-danger); }

.cbw__abrir { align-self: flex-start; font-size: 12.5px; color: var(--pv2-primary); text-decoration: underline; }

/* Los tres puntos mientras piensa. Sin esto la respuesta tarda y parece que
   no se envio nada. */
.cbw__pensando { display: flex; gap: 4px; align-items: center; padding: 13px; }
.cbw__pensando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pv2-muted);
  animation: cbw-late 1.2s ease-in-out infinite;
}
.cbw__pensando span:nth-child(2) { animation-delay: .18s; }
.cbw__pensando span:nth-child(3) { animation-delay: .36s; }
@keyframes cbw-late { 0%,60%,100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.cbw__pie {
  display: flex; align-items: flex-end; gap: 8px; padding: 11px 13px;
  border-top: 1px solid var(--pv2-border); background: var(--pv2-surface);
}
.cbw__pie textarea {
  flex: 1; resize: none; border: 1px solid var(--pv2-border); border-radius: 12px;
  padding: 9px 12px; font: inherit; font-size: 13.5px; line-height: 1.45;
  background: var(--pv2-surface); color: var(--pv2-ink); max-height: 110px;
}
.cbw__pie textarea:focus { outline: none; border-color: var(--pv2-primary); box-shadow: var(--pv2-ring); }
.cbw__enviar {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--pv2-primary); color: #fff; font-size: 14px;
  transition: background var(--pv2-t-fast);
}
.cbw__enviar:hover:not(:disabled) { background: var(--pv2-primary-600); }
.cbw__enviar:disabled { opacity: .5; cursor: not-allowed; }

/* En el telefono ocupa la pantalla: un cajon de 400px en 360px no cabe. */
@media (max-width: 640px) {
  .cbw__fab { right: 14px; bottom: 76px; padding: 12px; }
  .cbw__fab span { display: none; }
  .cbw__panel {
    right: 8px; left: 8px; bottom: 8px; width: auto;
    height: min(74vh, calc(100vh - 90px));
  }
  .cbw__pie textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cbw__panel { transition: none; }
  .cbw__pensando span { animation: none; }
  .cbw__fab:hover { transform: none; }
}

/* ── Ajustes: grupos con sentido, no dos columnas ciegas ──────────────────
   Eran catorce campos repartidos en dos columnas sin ningun criterio: el logo
   junto al telefono, la zona horaria junto a Facebook. Para cambiar una cosa
   habia que leerse las catorce etiquetas. */
.set { display: flex; flex-direction: column; gap: 22px; max-width: 1000px; }

.set__g {
  background: var(--pv2-surface);
  border: 1px solid var(--pv2-border); border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: var(--pv2-shadow-sm);
}

.set__cab { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--pv2-border-2); }
.set__cab h3 {
  margin: 0; font-family: var(--pv2-font-display);
  font-size: 15.5px; font-weight: 650; color: var(--pv2-ink); letter-spacing: -.015em;
}
/* Cada grupo dice para que sirve: sin eso, "Texto de copyright" no explica
   donde sale ese texto. */
.set__cab p { margin: 4px 0 0; font-size: 13px; color: var(--pv2-ink-3); line-height: 1.5; }

.set__campos {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.set__c { margin: 0; }
/* Lo que necesita sitio —descripcion, URLs, zona horaria— ocupa toda la fila
   en vez de quedarse a medio ancho. */
.set__c--ancho { grid-column: 1 / -1; }

.set__label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--pv2-ink-2);
}
.set__pista { display: block; margin-top: 5px; font-size: 11.5px; color: var(--pv2-muted); line-height: 1.45; }

/* Las imagenes: previsualizacion al lado del boton, no en una fila de rejilla
   de Bootstrap que las dejaba desalineadas. */
.set__img { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.set__i { display: flex; flex-direction: column; gap: 8px; }
.set__ilabel { font-size: 13px; font-weight: 600; color: var(--pv2-ink-2); }

.set__iprev {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--pv2-border);
  /* Tablero: un logo con transparencia sobre blanco parece recortado. */
  background:
    linear-gradient(45deg, var(--pv2-surface-3) 25%, transparent 25%, transparent 75%, var(--pv2-surface-3) 75%) 0 0 / 14px 14px,
    linear-gradient(45deg, var(--pv2-surface-3) 25%, transparent 25%, transparent 75%, var(--pv2-surface-3) 75%) 7px 7px / 14px 14px,
    var(--pv2-surface-2);
}
.set__iprev img { max-width: 100%; object-fit: contain; }
.set__iquitar {
  position: absolute; top: 5px; right: 5px;
  color: var(--pv2-danger); font-size: 17px; line-height: 1;
  background: var(--pv2-surface); border-radius: 50%;
}

/* URL de red social con su icono delante: se reconoce sin leer la etiqueta. */
.set__conicono { position: relative; }
.set__conicono i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--pv2-muted); font-size: 14px; pointer-events: none;
}
.set__conicono .form-control { padding-left: 34px !important; }

.set__guardar { display: flex; justify-content: flex-end; }
.set__guardar input[type="submit"] { min-width: 150px; }

@media (max-width: 640px) {
  .set__g { padding: 16px; border-radius: 14px; }
  .set__campos, .set__img { grid-template-columns: 1fr; }
  .set__guardar input[type="submit"] { width: 100%; }
}

/* ── Restricción de cuenta, en la ficha del chofer ────────────────────────
   Si un chofer no puede trabajar, es lo primero que hay que saber: va arriba
   del todo y en rojo, antes que cualquier documento. */
.rev-chofer__acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.rev-restr {
  margin: 12px 0 4px; padding: 13px 15px;
  border: 1px solid var(--pv2-danger); border-left-width: 4px;
  border-radius: 12px; background: var(--pv2-danger-bg);
}
.rev-restr__cab {
  display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
  font-family: var(--pv2-font-display); font-weight: 650; font-size: 14px;
  color: var(--pv2-danger); letter-spacing: -.01em;
}
/* El motivo entre comillas porque es literalmente lo que lee el chofer. */
.rev-restr__motivo { margin: 0 0 5px; font-size: 13.5px; color: var(--pv2-ink); line-height: 1.5; }
.rev-restr__meta { margin: 0; font-size: 11.5px; color: var(--pv2-ink-3); }
.rev-restr__nota { margin: 7px 0 0; font-size: 12px; color: var(--pv2-ink-2); }

.rev-prueba {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 12px 0 4px; padding: 12px 15px;
  border: 1px solid var(--pv2-warning); border-left-width: 4px;
  border-radius: 12px; background: var(--pv2-warning-bg);
}
.rev-prueba__txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.rev-prueba__txt b { font-size: 13.5px; color: var(--pv2-ink); }
.rev-prueba__txt span { font-size: 12px; color: var(--pv2-ink-2); }
.rev-prueba__acc { display: flex; gap: 7px; }
.rev-prueba__acc form { margin: 0; }

.rev-form {
  margin: 12px 0 4px; padding: 15px;
  border: 1px solid var(--pv2-border); border-radius: 12px;
  background: var(--pv2-surface-2);
  display: flex; flex-direction: column; gap: 8px;
}
.rev-form__l { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--pv2-ink-2); }
.rev-form__chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pv2-ink-2); margin: 4px 0 0; }
.rev-form__acc { display: flex; gap: 8px; margin-top: 6px; }
/* Restringir deja a alguien sin trabajar: el boton lo dice. */
.rev-form__peligro { background: var(--pv2-danger) !important; border-color: var(--pv2-danger) !important; color: #fff !important; }
.rev-form__peligro:hover { filter: brightness(.93); }

@media (max-width: 560px) {
  .rev-chofer__acc { width: 100%; margin-left: 0; }
  .rev-chofer__acc > * { flex: 1; justify-content: center; }
  .rev-prueba__acc { width: 100%; }
  .rev-prueba__acc form, .rev-prueba__acc .pv2-btn { flex: 1; }
  .rev-form__acc > * { flex: 1; justify-content: center; }
}

/* ── Los dos botones flotantes, recogidos ─────────────────────────────────
   Asistente y Ayuda tapaban lo que hay debajo en la esquina — en la pantalla
   del chat llegaban a cubrir el boton de enviar. Ahora en reposo son solo el
   icono, y el texto sale al pasar el cursor.

   Crecen hacia la IZQUIERDA porque estan anclados por `right`: al ensanchar,
   el borde derecho no se mueve y el texto aparece saliendo de ahi.

   `max-width` y no `display:none` en el texto: display no se puede animar, y
   un boton que salta de golpe se siente roto. Y sigue existiendo para los
   lectores de pantalla.

   La especificidad con `body` es necesaria: help-center.css se carga DESPUES
   de esta hoja, asi que a igualdad de peso ganaria la suya. */
body .ih-floating-button,
body .cbw__fab {
  padding: 0 14px; height: 48px;
  overflow: hidden; white-space: nowrap;
  transition: padding var(--pv2-t-med), box-shadow var(--pv2-t-med), transform var(--pv2-t-fast);
}

body .ih-floating-button > span,
body .cbw__fab > span {
  display: inline-block;
  max-width: 0; opacity: 0;
  margin-left: 0;
  transition: max-width var(--pv2-t-med), opacity 120ms ease, margin-left var(--pv2-t-med);
}

/* Al pasar por encima o al llegar con el teclado. El focus-visible importa:
   quien navega con tabulador tiene que poder leer que boton es. */
body .ih-floating-button:hover > span,
body .ih-floating-button:focus-visible > span,
body .cbw__fab:hover > span,
body .cbw__fab:focus-visible > span {
  max-width: 160px; opacity: 1; margin-left: 9px;
}

body .ih-floating-button:hover,
body .ih-floating-button:focus-visible,
body .cbw__fab:hover,
body .cbw__fab:focus-visible { padding: 0 20px 0 16px; }

/* Con el panel del asistente abierto el texto se queda puesto: ahi el boton
   ya no estorba, y recogerse mientras lo usas despista. */
body .cbw.is-open .cbw__fab > span { max-width: 160px; opacity: 1; margin-left: 9px; }
body .cbw.is-open .cbw__fab { padding: 0 20px 0 16px; }

/* El icono manda el tamaño cuando esta recogido. */
body .ih-floating-button i, body .cbw__fab i { font-size: 19px; flex: none; }

/* En tactil no hay cursor que pasar por encima: se quedan como iconos y ya.
   Es lo que help-center.css hacia por su cuenta en movil. */
@media (hover: none) {
  body .ih-floating-button > span, body .cbw__fab > span { max-width: 0; opacity: 0; margin-left: 0; }
  body .cbw.is-open .cbw__fab > span { max-width: 0; opacity: 0; margin-left: 0; }
  body .ih-floating-button, body .cbw__fab { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  body .ih-floating-button, body .cbw__fab,
  body .ih-floating-button > span, body .cbw__fab > span { transition: none; }
}

/* ── Hueco al final de la página para los dos botones flotantes ─────────────
   Ayuda (a 22 px del borde) y el Asistente (a 80 px; 76 px en el telefono,
   y con su cara mide 66 px) ocupan los ultimos ~146 px de la esquina
   inferior derecha (medido en el navegador). Al
   bajar hasta el fondo, el «Guardar» de Editar chofer —y el de todos los
   formularios que lo ponen abajo a la derecha— quedaba debajo del Asistente
   (QA R4, 11-oct). Con este hueco, al final de la pagina lo ultimo siempre
   queda por encima de los dos botones.

   Solo donde estan los botones (`:has`), y con especificidad de mas para
   ganarle al `padding` de `.pv2-content` en los cortes de 900 y 480 px. */
body:has(.cbw__fab) .pv2-content,
body:has(.ih-floating-button) .pv2-content { padding-bottom: 148px; }

/* «Guardar borrador» del editor de guías va pegado abajo a la derecha
   (sticky a 15 px) y se quedaba SIEMPRE debajo de Ayuda, no solo al final:
   se corre a la izquierda de los botones (48 px + 22 px de margen + aire). */
body .ih-editor-save { padding-right: 84px; }

/* ── Enlace de seguimiento en vivo, en la ficha del viaje ─────────────────
   Lo genera el pasajero desde su app. Existia y solo lo veia quien lo
   recibio: cuando llamaban preguntando "¿donde va mi hija?", desde el panel
   no habia forma de abrir lo mismo que esa persona esta viendo. */
.env { display: flex; flex-direction: column; gap: 11px; }
.env--off { opacity: .72; }

.env__estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .015em;
  padding: 4px 10px; border-radius: 999px;
}
.env__pill--on  { background: var(--pv2-success-bg); color: var(--pv2-success); }
.env__pill--on i { font-size: 7px; animation: env-late 2s ease-in-out infinite; }
.env__pill--off { background: var(--pv2-surface-2); color: var(--pv2-ink-3); }
@keyframes env-late { 50% { opacity: .35; } }
.env__meta { font-size: 12px; color: var(--pv2-muted); }

.env__url { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.env__campo {
  flex: 1; min-width: 240px;
  border: 1px solid var(--pv2-border); border-radius: 10px;
  background: var(--pv2-surface-2); color: var(--pv2-ink-2);
  padding: 9px 12px; font-size: 12.5px;
  /* El token es largo y no se lee: importa poder copiarlo, no leerlo. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
}
.env__campo:focus { outline: none; border-color: var(--pv2-primary); box-shadow: var(--pv2-ring); }

.env__uso { margin: 0; font-size: 12.5px; color: var(--pv2-ink-3); }
.env__uso b { color: var(--pv2-ink); }

@media (max-width: 560px) {
  .env__url > .pv2-btn { flex: 1; justify-content: center; }
  .env__campo { min-width: 100%; }
}

/* ── Medidas del armazon, como tokens ─────────────────────────────────────
   Una pantalla que quiere ocupar exactamente lo que queda de viewport
   necesita saber cuanto miden la barra superior y el relleno del contenido.
   Antes se copiaba el numero a mano en cada sitio y se desfasaba: la del
   chatbot pedia `100vh - 110px` cuando la suma real era otra, y lo ultimo
   —el compositor— quedaba fuera de la pantalla.

   Van AQUI, pegados a las reglas que fijan esas medidas, para que cambiar
   una sin la otra sea evidente. */
:root {
  /* .pv2-topbar: 14px arriba + 14px abajo + ~38px de contenido */
  --pv2-topbar-alto: 66px;
  /* .pv2-content: padding 26px */
  --pv2-content-pad: 26px;
}

@media (max-width: 900px) {
  :root {
    /* .pv2-topbar en movil: 11px + 11px + 38px */
    --pv2-topbar-alto: 60px;
    --pv2-content-pad: 14px;
  }
}

/* ── El menú se pliega ────────────────────────────────────────────────────
   Son 42 entradas y 256 px fijos. En las pantallas donde manda el contenido
   —el mapa, el chat, una tabla ancha— esos 256 px le faltan a lo que estás
   mirando. Plegado deja solo los iconos y el nombre sale al pasar el cursor,
   igual que los botones flotantes. */
.pv2-sidebar__brand { display: flex; align-items: center; gap: 10px; }
.pv2-sidebar__nombre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }

.pv2-sidebar__plegar {
  flex: none; border: 0; background: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pv2-muted); font-size: 13px;
  transition: background var(--pv2-t-fast), color var(--pv2-t-fast), transform var(--pv2-t-med);
}
.pv2-sidebar__plegar:hover { background: var(--pv2-surface-2); color: var(--pv2-ink); }

/* El ancho vive en la variable, asi que basta cambiarla: el shell entero
   —que la usa para su rejilla— se reacomoda solo. */
.pv2-shell.is-plegado { --pv2-sidebar-w: 66px; }
.pv2-shell.is-plegado .pv2-sidebar { padding-left: 10px; padding-right: 10px; }
.pv2-shell.is-plegado .pv2-sidebar__nombre { display: none; }
.pv2-shell.is-plegado .pv2-sidebar__plegar { transform: rotate(180deg); margin: 0 auto; }

/* Las etiquetas de grupo no caben; el separador se queda para que los
   bloques se sigan distinguiendo. */
.pv2-shell.is-plegado .pv2-nav__label { display: none; }
.pv2-shell.is-plegado .pv2-nav__group { border-top: 1px solid var(--pv2-border-2); padding-top: 8px; margin-top: 8px; }
.pv2-shell.is-plegado .pv2-nav__group:first-of-type { border-top: 0; margin-top: 0; }
/* Plegado, un grupo cerrado esconderia sus iconos y no habria como abrirlo:
   la etiqueta que lo despliega no se ve. */
.pv2-shell.is-plegado .pv2-nav__group.is-collapsed .pv2-nav__items { display: block; }

.pv2-shell.is-plegado .pv2-nav__item {
  justify-content: center; padding: 10px 0; position: relative;
  /* `gap: 0` es lo que faltaba para que el icono quede CENTRADO de verdad.
     El item es un flex con `gap: 11px` entre el icono y el texto. Plegado el
     texto va a font-size 0, pero sigue siendo un elemento flex: el hueco de
     11 px se mantiene y empuja el icono ~5 px a la izquierda. A simple vista
     parece que los iconos estan descuadrados respecto a la columna. */
  gap: 0;
}
/* El icono NO cambia de tamano entre estados. Antes era 16px plegado y 15px
   desplegado, asi que a mitad de la animacion se encogia: el "tiron" que se
   veia no era la anchura, eran los iconos reescribiendose. Un icono que mide
   lo mismo siempre no tiene nada que animar. */
.pv2-shell.is-plegado .pv2-nav__item > i { width: 18px; }
/* El texto se oculta con position/clip y no con display:none — asi lo sigue
   leyendo un lector de pantalla, que si no anunciaria botones sin nombre. */
.pv2-shell.is-plegado .pv2-nav__item {
  font-size: 0; letter-spacing: 0;
}
.pv2-shell.is-plegado .pv2-nav__badge {
  position: absolute; top: 4px; right: 8px; font-size: 9px; padding: 0 4px; min-width: 15px;
}

/* El nombre, al pasar el cursor. Va como ::after leyendo un data- que pone
   el JS: el texto del enlace ya esta a font-size 0. */
.pv2-shell.is-plegado .pv2-nav__item::after {
  content: attr(data-nombre);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: var(--pv2-ink); color: var(--pv2-surface);
  font-size: 12px; font-weight: 600; letter-spacing: normal;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 60;
  box-shadow: var(--pv2-shadow);
  transition: opacity var(--pv2-t-fast);
}
.pv2-shell.is-plegado .pv2-nav__item:hover::after,
.pv2-shell.is-plegado .pv2-nav__item:focus-visible::after { opacity: 1; }

/* En movil el menu ya es un cajon deslizable: plegarlo ademas no tiene
   sentido y el boton solo estorba. */
@media (max-width: 900px) {
  .pv2-sidebar__plegar { display: none; }
  .pv2-shell.is-plegado { --pv2-sidebar-w: 256px; }
  .pv2-shell.is-plegado .pv2-sidebar__nombre { display: block; }
  .pv2-shell.is-plegado .pv2-nav__label { display: flex; }
  .pv2-shell.is-plegado .pv2-nav__item { justify-content: flex-start; padding: 9px 11px; font-size: 13.5px; }
  .pv2-shell.is-plegado .pv2-nav__item::after { content: none; }
}

/* ── El alta rápida de tarea, con dueño y fecha ──────────────────────────
   Antes solo pedia el titulo: la tarea nacia "sin dueno" y habia que entrar a
   ella para ponerlo. Quien la abre desde la ficha tiene el contexto justo en
   ese momento; pedirselo despues es pedirselo a nadie. */
.tor__fila1 { display: flex; gap: 8px; align-items: center; }
.tor__fila1 .pv2-input { flex: 1; min-width: 200px; }

.tor__fila2 {
  /* Sin `margin-top`: el padre ya separa con su `gap`, y sumaban los dos. */
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tor__c { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.tor__c > span { font-size: 11px; font-weight: 600; color: var(--pv2-muted); letter-spacing: .02em; }
.tor__c .pv2-input { width: 100%; font-size: 13px; padding: 7px 10px; }

@media (max-width: 560px) {
  .tor__fila1 { flex-direction: column; align-items: stretch; }

  /* ⛔ `minmax(0, 1fr)` y no `1fr`: con `1fr` la columna no baja de su
   * contenido, asi que «Cualquiera del área» se comia el ancho y al lado
   * quedaba «Tod…» y «Me…» recortados. Es la misma trampa de Grid que ya
   * habia en `.pv2-grid-2`. */
  .tor__fila2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── El menú plegado, bien ────────────────────────────────────────────────
   Plegado se veía mal por tres cosas concretas: el logo se DEFORMABA (era un
   flex item sin `flex:none`, así que la columna estrecha lo aplastaba a un
   óvalo), el botón de plegar seguía a su lado peleando por 66 px, y el
   marcador de la sección activa asomaba fuera del icono.

   Plegado, la columna es una sola pila centrada: logo arriba, botón debajo,
   iconos a ritmo constante. */
.pv2-sidebar__brand .dot { flex: none; }

.pv2-shell.is-plegado .pv2-sidebar__brand {
  flex-direction: column; gap: 10px; padding: 6px 0 14px;
  border-bottom: 1px solid var(--pv2-border-2); margin-bottom: 10px;
}
/* Y el logo igual: era 26px normal y 34px plegado, o sea otra cosa
   cambiando de tamano en la misma animacion. Se queda como esta siempre. */
.pv2-shell.is-plegado .pv2-sidebar__plegar { margin: 0; width: 26px; height: 26px; font-size: 11px; }

/* Los iconos, cuadrados y con el mismo aire arriba y abajo. */
.pv2-shell.is-plegado .pv2-nav__item {
  width: 42px; height: 42px; margin: 0 auto 3px;
  padding: 0; border-radius: 11px;
}
/* El filo del activo asomaba por fuera del icono. Plegado, el activo se
   marca con el fondo y el color, que ya se distinguen de sobra. */
.pv2-shell.is-plegado .pv2-nav__item.is-active { box-shadow: none; }
.pv2-shell.is-plegado .pv2-nav__item.is-active i { color: var(--pv2-primary); }

/* Separadores más suaves: con 42 iconos, una línea marcada por grupo parte
   la columna en trozos y se ve más ruidosa que ordenada. */
.pv2-shell.is-plegado .pv2-nav__group {
  border-top: 0; margin-top: 12px; padding-top: 12px; position: relative;
}
.pv2-shell.is-plegado .pv2-nav__group::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 1px; background: var(--pv2-border);
}
.pv2-shell.is-plegado .pv2-nav__group:first-of-type { margin-top: 0; padding-top: 0; }
.pv2-shell.is-plegado .pv2-nav__group:first-of-type::before { content: none; }

/* La insignia, dentro del icono y no colgando de una esquina. */
.pv2-shell.is-plegado .pv2-nav__badge {
  top: 2px; right: 2px; font-size: 9px; line-height: 15px;
  height: 15px; min-width: 15px; padding: 0 3px; border: 2px solid var(--pv2-surface);
}

/* La barra de scroll, discreta: con la columna a 66 px una barra normal se
   come el sitio del icono. */
.pv2-shell.is-plegado .pv2-sidebar { scrollbar-width: thin; }
.pv2-shell.is-plegado .pv2-sidebar::-webkit-scrollbar { width: 4px; }
.pv2-shell.is-plegado .pv2-sidebar::-webkit-scrollbar-thumb {
  background: var(--pv2-border); border-radius: 4px;
}


/* ── Por que `:not(.sin-hover)` en todas ──────────────────────────────────
   Al pulsar el boton de plegar, el cursor SIGUE encima del menu y el boton
   se queda con el foco. Las dos cosas lo mantenian abierto —`:hover` hasta
   que movieras el raton, y `:focus-within` para siempre— asi que plegabas y
   no se plegaba nunca mas.

   La clase `sin-hover` la pone el JS al plegar y la quita el propio menu
   cuando el raton SALE de verdad. Va en el selector de todas las reglas de
   apertura y no como un bloque de excepciones aparte: si no, la de al lado
   se olvida y quedan las etiquetas asomando en una columna de 66 px.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Plegado, se abre al pasar el cursor ──────────────────────────────────
   Plegado se gana sitio pero se pierde saber qué es cada icono. Al pasar por
   encima vuelve entero, y al salir se recoge solo.

   Se abre FLOTANDO sobre el contenido, no empujándolo: la columna de la
   rejilla sigue midiendo 66 px, así que la pantalla que estás mirando no se
   mueve ni un píxel. Un menú que reacomoda la página cada vez que el ratón
   la roza es peor que no tenerlo.

   El retardo al abrir es a propósito: sin él, cruzar la pantalla en diagonal
   despliega el menú de paso. Al cerrar no hay retardo — cuando te vas, te
   vas. */
.pv2-shell.is-plegado .pv2-sidebar {
  width: var(--pv2-sidebar-w);
  transition: width .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
  transition-delay: 0s;
  z-index: 30;
}
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within {
  width: 256px;
  padding-left: 14px; padding-right: 14px;
  box-shadow: 18px 0 40px -22px rgba(28,20,59,.35);
  transition-delay: .18s;
  z-index: 40;
}

/* Con el cursor encima, el menú se comporta como si no estuviera plegado.
   Se consigue apagando las reglas del plegado en :hover, en vez de escribir
   otra vez las del desplegado: así no hay dos definiciones que mantener. */
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-sidebar__nombre,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-sidebar__nombre { display: block; }

.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-sidebar__brand,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-sidebar__brand {
  flex-direction: row; gap: 10px; padding: 6px 8px 18px;
  border-bottom: 0; margin-bottom: 0;
}
/* Nada que restaurar: el logo ya mide lo mismo en los dos estados. */
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-sidebar__plegar,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-sidebar__plegar { margin: 0; width: 28px; height: 28px; font-size: 13px; }

.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__label,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-nav__label { display: flex; }

.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__group,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-nav__group { margin-top: 16px; padding-top: 0; }
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__group::before,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-nav__group::before { content: none; }

.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__item,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-nav__item {
  width: auto; height: auto; margin: 0 0 2px;
  padding: 9px 11px; border-radius: var(--pv2-radius-sm);
  justify-content: flex-start; font-size: 13.5px; letter-spacing: normal;
  /* Abierto vuelve el hueco entre el icono y el nombre. */
  gap: 11px;
}
/* Nada que restaurar: el icono ya mide lo mismo en los dos estados. */

/* El globito con el nombre sobra cuando el nombre ya se lee. */
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__item::after,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-nav__item::after { content: none; }

.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__item.is-active,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-nav__item.is-active { box-shadow: inset 3px 0 0 var(--pv2-primary); }

.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__badge,
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):focus-within .pv2-nav__badge {
  position: static; border: 0; height: auto; line-height: normal;
  font-size: 11px; padding: 1px 7px; min-width: 20px; margin-left: auto;
}

/* En táctil no hay cursor que pasar: quedaría un menú que solo se abre con
   el botón, que es justo lo que se quiere ahí. */
@media (hover: none) {
  .pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover { width: var(--pv2-sidebar-w); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pv2-shell.is-plegado .pv2-sidebar { transition: none; }
}

/* ── El salto al abrirse ──────────────────────────────────────────────────
   El ancho se anima en 180 ms, pero las reglas de dentro —el texto, la
   dirección de la marca, el relleno— cambiaban de golpe en el primer
   fotograma. Durante esa fracción, los nombres del menú aparecen a tamaño
   completo dentro de una columna que todavía mide 66 px: se parten en dos
   renglones, empujan el icono y el menú entero da un tirón.

   Lo que hay que hacer no es animar cada propiedad, es impedir que el texto
   se acomode mientras no cabe: en una sola línea y recortado. Cuando la
   columna termina de abrirse ya cabe entero, y nunca se ve reflowing. */
.pv2-sidebar .pv2-nav__item {
  white-space: nowrap;
  overflow: hidden;
}

/* El icono no puede encogerse mientras el texto pelea por el sitio: sin
   esto se aplasta a un óvalo durante la animación, igual que le pasaba al
   logo cuando estaba plegado. */
.pv2-sidebar .pv2-nav__item > i { flex: none; }

/* La marca cambiaba de columna a fila en el primer fotograma. Se acompaña
   el mismo tiempo que el ancho para que vaya con él y no por delante. */
.pv2-shell.is-plegado .pv2-sidebar__brand {
  transition: padding .18s cubic-bezier(.2,.8,.3,1), gap .18s cubic-bezier(.2,.8,.3,1);
}
/* La transicion del logo sobra: ya no cambia de tamano. Animar algo que no
   se mueve solo retrasa lo demas. */

/* Mientras se abre, nada puede asomar por el lado: el recorte va en el
   propio menú, no en el contenido. */
.pv2-shell.is-plegado .pv2-sidebar { overflow-x: hidden; }

/* El globito con el nombre no debe salir durante la apertura: para cuando
   se leería, el nombre de verdad ya está a la vista. */
.pv2-shell.is-plegado .pv2-sidebar:not(.sin-hover):hover .pv2-nav__item::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pv2-shell.is-plegado .pv2-sidebar__brand { transition: none; }
}

/* ── En móvil, el menú plegado NO existe ──────────────────────────────────
   Plegar es de escritorio: en el teléfono el menú ya es un cajón que se abre
   y se cierra entero. Pero la elección se guarda en el navegador, así que
   quien pliega en el escritorio llegaba al teléfono con `is-plegado` puesto
   y se llevaba consigo las reglas de escritorio. Dos consecuencias, las dos
   feas:

     · `z-index: 30` le ganaba al 40 del cajón, y el fondo oscuro va en 39:
       tocabas la hamburguesa y veías la pantalla en negro con el menú
       DETRÁS. Parece que la app se rompió.
     · `transition: width` sustituía a `transition: transform`, así que el
       cajón dejaba de deslizarse y aparecía de golpe.

   Aquí se deshacen todas: en móvil manda el cajón. Va al final del fichero
   a propósito, después de todo lo del plegado, para que gane sin depender
   de contar especificidades. */
@media (max-width: 900px) {
  .pv2-shell.is-plegado .pv2-sidebar,
  .pv2-shell.is-plegado .pv2-sidebar:hover,
  .pv2-shell.is-plegado .pv2-sidebar:focus-within {
    width: var(--pv2-sidebar-w);
    padding: 18px 14px 40px;
    z-index: 40;
    transition: transform .2s ease;
    box-shadow: none;
    overflow-x: visible;
  }

  /* Y el menú vuelve a ser el de siempre: nombres, etiquetas de grupo y
     entradas normales. */
  .pv2-shell.is-plegado .pv2-sidebar__brand {
    flex-direction: row; gap: 10px; padding: 6px 8px 18px;
    border-bottom: 0; margin-bottom: 0;
  }
  .pv2-shell.is-plegado .pv2-sidebar__nombre { display: block; }
  .pv2-shell.is-plegado .pv2-nav__label { display: flex; }
  .pv2-shell.is-plegado .pv2-nav__group { margin-top: 16px; padding-top: 0; }
  .pv2-shell.is-plegado .pv2-nav__group::before { content: none; }

  .pv2-shell.is-plegado .pv2-nav__item {
    width: auto; height: auto; margin: 0 0 2px;
    padding: 9px 11px; border-radius: var(--pv2-radius-sm);
    justify-content: flex-start; font-size: 13.5px; letter-spacing: normal;
    gap: 11px;
  }
  .pv2-shell.is-plegado .pv2-nav__item::after { content: none; }
  .pv2-shell.is-plegado .pv2-nav__item.is-active { box-shadow: inset 3px 0 0 var(--pv2-primary); }
  .pv2-shell.is-plegado .pv2-nav__badge {
    position: static; border: 0; height: auto; line-height: normal;
    font-size: 11px; padding: 1px 7px; min-width: 20px; margin-left: auto;
  }
}

/* ── El icono del asistente ───────────────────────────────────────────────
   Era un robot generico de FontAwesome. Ahora es la marca del asistente, que
   es una imagen: hay que darle tamaño explicito y que no se deforme. */
.cbw__icono-marca {
  width: 24px; height: 24px; flex: none; display: block;
  /* La imagen no es exactamente cuadrada aunque el lienzo si: `contain`
     evita que se estire para rellenar. */
  object-fit: contain;
}
.cbw__cab-icono {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  object-fit: contain; background: rgba(255,255,255,.16); padding: 3px;
}
.wel__icono-img {
  width: 72px; height: 72px; display: block; margin: 0 auto 16px;
  object-fit: contain;
  /* Sombra tenue en el morado de la marca: sin ella el dibujo queda flotando
     sobre el fondo sin peso. */
  filter: drop-shadow(0 8px 18px rgba(109,52,214,.28));
}
/* En el menu ocupa el mismo hueco que los iconos de fuente, para que la
   columna no se descuadre justo en esa entrada. */
.pv2-nav__icono-img {
  width: 18px; height: 18px; flex: none; object-fit: contain;
}
.pv2-shell.is-plegado .pv2-nav__icono-img { width: 20px; height: 20px; }

/* ── El asistente: la cara, sin caja ──────────────────────────────────────
   Era una pastilla morada con el icono y la palabra "Asistente", y crecía al
   pasar el cursor. Dos problemas: el morado competía con el botón de Ayuda
   que tiene justo debajo, y al crecer tapaba lo que hubiera en esa esquina.

   Ahora es la cara y nada más. Sin fondo, sin texto, sin crecer. Lo que la
   hace visible es el destello de detrás, que respira despacio: llama la
   atención sin moverse de sitio ni ocupar más. */
body .cbw__fab {
  background: none !important;
  border: 0; padding: 0;
  width: 66px; height: 66px;
  box-shadow: none;
  display: grid; place-items: center;
  overflow: visible;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}

/* El destello. Va detrás con `z-index: -1` para no comerse los clics de la
   cara, y late despacio —4 s— porque un parpadeo rápido en una esquina que
   se mira todo el día cansa. */
body .cbw__fab::before {
  /* ⛔ `inset: 0` NO sobra. Sin él, un pseudo-elemento absoluto dentro de un
     padre `display: grid; place-items: center` se coloca en su posición
     ESTÁTICA —el origen de la celda centrada—, no cubriendo el botón. El
     resultado era un halo morado desplazado hacia abajo y a la derecha de la
     cara, como una sombra mal puesta. `width/height: 100%` no lo arregla
     porque el tamaño estaba bien; lo que fallaba era el origen. */
  content: ""; position: absolute; z-index: -1; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(157,108,255,.55) 0%, rgba(109,52,214,.28) 45%, transparent 70%);
  filter: blur(9px);
  animation: cbw-destello 4s ease-in-out infinite;
}
@keyframes cbw-destello {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.22); opacity: 1; }
}

.cbw__cara {
  width: 58px; height: 58px; display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(28,20,59,.28));
  /* Flota despacio. Es un movimiento pequeño a propósito: lo justo para que
     el ojo lo encuentre, no tanto como para distraer mientras trabajas. */
  animation: cbw-flota 3.4s ease-in-out infinite;
}
@keyframes cbw-flota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Al pasar el cursor NO crece: solo se aviva el destello. */
body .cbw__fab:hover { transform: none; }
body .cbw__fab:hover::before { animation-duration: 1.8s; }
body .cbw__fab:active .cbw__cara { transform: scale(.93); }

/* Y se apagan las reglas de "botón que se despliega": este ya no lleva texto
   que mostrar. */
body .cbw__fab > span.pv2-solo-lectores { max-width: none; opacity: 1; margin: 0; }
body .cbw__fab:hover, body .cbw__fab:focus-visible { padding: 0; }

/* El nombre existe para quien usa lector de pantalla, pero no se ve.
   `clip` y no `display:none`: display lo saca también del lector. */
.pv2-solo-lectores {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cbw__fab:focus-visible { outline: 3px solid var(--pv2-primary); outline-offset: 4px; }

@media (max-width: 640px) {
  body .cbw__fab { width: 60px; height: 60px; right: 12px; bottom: 74px; }
  .cbw__cara { width: 52px; height: 52px; }
}

/* Quien pidió menos movimiento no ve nada latiendo: la cara sigue ahí y el
   destello se queda fijo. */
@media (prefers-reduced-motion: reduce) {
  .cbw__cara, body .cbw__fab::before { animation: none; }
  body .cbw__fab::before { opacity: .8; }
}

/* ── Ayuda: una gota pegada al borde ──────────────────────────────────────
   Era una pastilla flotando con margen a la derecha, igual de forma que el
   asistente que tiene justo encima: dos cápsulas iguales en la misma esquina
   se leen como un solo bloque y ninguna de las dos se distingue.

   Ahora va PEGADA al borde y redondeada solo por el lado que se ve, como
   una pestaña que asoma. Además de diferenciarse, ocupa menos: la mitad de
   la forma queda fuera de la pantalla. */
body .ih-floating-button {
  right: 0;
  border-radius: 999px 0 0 999px;
  padding: 0 16px 0 18px;
  height: 52px;
  /* La sombra solo hacia la izquierda y arriba: hacia la derecha no hay
     nada que sombrear, y si se deja se ve un cerco raro contra el borde. */
  box-shadow: -6px 4px 22px -6px rgba(19,87,196,.45);
}

/* Al pasar el cursor asoma un poco más y sale el nombre. Se mueve hacia
   dentro, que es a donde hay sitio. */
body .ih-floating-button:hover,
body .ih-floating-button:focus-visible {
  padding: 0 16px 0 22px;
  box-shadow: -8px 6px 28px -6px rgba(19,87,196,.55);
}

/* En el teléfono se recoge más: ahí cada píxel de la esquina estorba. */
@media (max-width: 640px) {
  body .ih-floating-button { height: 48px; padding: 0 12px 0 15px; }
}

/* ── Quién cancela ────────────────────────────────────────────────────────
   Con un 36% de cancelacion, el dato util no es cuantas se cancelaron sino
   quien las cancela: cada uno se arregla en un sitio distinto. */
.qc { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.qc__it { display: flex; flex-direction: column; gap: 6px; }

.qc__cab { display: flex; align-items: center; gap: 8px; }
.qc__cab i { width: 16px; text-align: center; color: var(--pv2-muted); font-size: 13px; }
.qc__nom { font-size: 13.5px; font-weight: 600; color: var(--pv2-ink); }
.qc__pct {
  margin-left: auto; font-family: var(--pv2-font-display);
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--pv2-ink);
}

.qc__barra { height: 6px; border-radius: 999px; background: var(--pv2-surface-3); overflow: hidden; }
.qc__barra > span { display: block; height: 100%; border-radius: 999px; background: var(--pv2-ink-3); }
/* El chofer en rojo: es el unico que la empresa puede corregir directamente. */
.qc__it--mal    .qc__barra > span { background: var(--pv2-danger); }
.qc__it--aviso  .qc__barra > span { background: var(--pv2-warning); }
.qc__it--neutro .qc__barra > span { background: var(--pv2-ink-3); }

.qc__n { font-size: 11.5px; color: var(--pv2-muted); font-variant-numeric: tabular-nums; }
.qc__aviso { font-size: 11.5px; color: var(--pv2-danger); }

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

/* ── Banners: se ven como los ve la app ───────────────────────────────────
   El hueco de la app del pasajero es 16:6 y recorta al centro. Enseñar aqui
   la imagen entera era engañoso: los seis que habia eran casi cuadrados y la
   app les cortaba dos tercios, sin que desde el panel se pudiera ver. */
.gal__marco--banner { aspect-ratio: 16 / 6; }
.gal__marco--banner img { object-fit: cover; }

/* Un banner apagado o fuera de fecha sigue en la lista: hay que verlo, pero
   distinguirlo de los que si se estan mostrando. */
.gal__c--off .gal__marco { filter: grayscale(.85); opacity: .55; }
.gal__estado-flot {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: var(--pv2-ink); color: var(--pv2-surface);
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 7px;
  box-shadow: var(--pv2-shadow-sm);
}

/* ── El formulario del banner ─────────────────────────────────────────── */
.ban { display: flex; flex-direction: column; gap: 22px; max-width: 1000px; }
.ban__img { display: grid; gap: 20px; grid-template-columns: minmax(260px, 380px) 1fr; align-items: start; }

.ban__prev { display: flex; flex-direction: column; gap: 7px; }
.ban__marco {
  aspect-ratio: 16 / 6; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--pv2-border);
  background:
    linear-gradient(45deg, var(--pv2-surface-3) 25%, transparent 25%, transparent 75%, var(--pv2-surface-3) 75%) 0 0 / 14px 14px,
    linear-gradient(45deg, var(--pv2-surface-3) 25%, transparent 25%, transparent 75%, var(--pv2-surface-3) 75%) 7px 7px / 14px 14px,
    var(--pv2-surface-2);
}
.ban__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ban__pie { font-size: 11.5px; color: var(--pv2-muted); text-align: center; }

.ban__campos { display: flex; flex-direction: column; gap: 12px; }
.ban__reqs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ban__reqs li { font-size: 12.5px; color: var(--pv2-ink-3); line-height: 1.5; }
.ban__reqs b { color: var(--pv2-ink-2); }

.ban__aviso {
  margin: 0; padding: 10px 13px; border-radius: 10px;
  background: var(--pv2-warning-bg); color: var(--pv2-warning);
  font-size: 12.5px; line-height: 1.5;
  border-left: 3px solid var(--pv2-warning);
}

.ban__switch { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--pv2-ink-2); cursor: pointer; }
.ban__switch input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pv2-primary); }

@media (max-width: 760px) { .ban__img { grid-template-columns: 1fr; } }

/* ── Con el chat abierto, la cara se queda quieta ─────────────────────────
   El flotado y el destello existen para que el ojo ENCUENTRE el botón. Una
   vez abierto el chat ya lo encontraste: seguir moviéndose al lado del panel
   que estás leyendo es ruido, y encima el botón queda pegado al borde del
   cajón, donde el movimiento se nota el doble.

   No se apaga del todo el destello —el botón seguiría siendo el que cierra—
   pero se queda fijo y más tenue. */
.cbw.is-open .cbw__cara {
  animation: none;
  transform: none;
}
.cbw.is-open .cbw__fab::before {
  animation: none;
  transform: scale(1);
  opacity: .5;
}
/* Y al pasar por encima tampoco se acelera: con el panel abierto el botón ya
   no llama, solo cierra. */
.cbw.is-open .cbw__fab:hover::before { animation: none; opacity: .7; }

/* ⛔ Y CON EL PANEL ABIERTO, LA CARA SE VA.
   El panel se abre justo encima del botón y le tapaba media cabeza: se veía
   medio robot asomando por detrás del borde, que no se lee como un botón sino
   como algo mal colocado. Y no hace falta que esté: el panel ya trae su propia
   X arriba a la derecha, y la tecla Escape también lo cierra.

   `visibility` además de `opacity` para que no se pueda pulsar por accidente
   lo que no se ve. */
.cbw.is-open .cbw__fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   TARIFAS — el esquema, el simulador y sus enlaces.

   Lo que decide el precio de un viaje vivia en seis pantallas de tres
   menus distintos, y nada decia en que orden se aplican. Estos estilos
   son para la pantalla que por fin lo cuenta.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Los pasos --- */
.tf-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: none; }
.tf-paso  { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--pv2-border); }
.tf-paso:first-child { border-top: 0; padding-top: 4px; }

.tf-paso__n {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pv2-primary-soft, rgba(109,52,214,.1));
    color: var(--pv2-primary);
    font-size: .8rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* El ultimo paso no es tarifa: es lo que va ENCIMA. Se marca distinto
   porque esa distincion es justo la que se perdia y costaba casetas. */
.tf-paso--encima .tf-paso__n { background: var(--pv2-warning-bg); color: var(--pv2-warning); }

.tf-paso__txt { min-width: 0; }
.tf-paso__txt strong { display: block; font-size: .95rem; color: var(--pv2-ink); margin-bottom: 3px; }
.tf-paso__txt p { margin: 0 0 6px; font-size: .88rem; line-height: 1.55; color: var(--pv2-muted); }
.tf-paso__txt u  { text-decoration: none; font-weight: 600; color: var(--pv2-ink); }
.tf-paso__txt a  { font-size: .85rem; }

.tf-marca { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.tf-marca--off { background: var(--pv2-warning-bg); color: var(--pv2-warning); }
.tf-marca--on  { background: var(--pv2-success-bg, rgba(34,140,86,.12)); color: var(--pv2-success); }

/* --- El simulador --- */
.tf-sim { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.tf-sim__campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 190px; min-width: 0; }
.tf-sim__campo--corto { flex: 0 1 120px; }
.tf-sim__campo label { margin: 0; font-size: .82rem; font-weight: 600; color: var(--pv2-muted); }
.tf-sim__campo label small { font-weight: 400; }
/* Un servicio sin zonas: el selector se queda, pero se ve que no hay nada
   que elegir en vez de ofrecer una lista vacia sin explicacion. */
.tf-sim__campo--vacio { opacity: .55; }

.tf-res { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pv2-border); }
.tf-res__cargando, .tf-res__mal { font-size: .9rem; color: var(--pv2-muted); display: flex; align-items: center; gap: 8px; }
.tf-res__mal { color: var(--pv2-danger); }

.tf-res__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tf-res__total { display: flex; align-items: baseline; gap: 10px; }
.tf-res__total span { font-size: .85rem; color: var(--pv2-muted); }
.tf-res__total strong { font-size: 1.9rem; font-weight: 700; color: var(--pv2-ink); font-variant-numeric: tabular-nums; }
.tf-res__ctx { font-size: .85rem; color: var(--pv2-muted); }

.tf-res__desglose { display: flex; flex-direction: column; max-width: 460px; }
.tf-res__fila { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; font-size: .9rem; border-bottom: 1px dashed var(--pv2-border); }
.tf-res__fila span:last-child { font-variant-numeric: tabular-nums; }
.tf-res__fila--total { border-bottom: 0; border-top: 2px solid var(--pv2-ink); margin-top: 4px; font-weight: 700; }

.tf-res__notas { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; color: var(--pv2-muted); }
.tf-res__notas strong { color: var(--pv2-ink); }
.tf-res__sello { margin-top: 6px; font-size: .8rem; font-style: italic; opacity: .8; }

/* --- La tabla de "donde se configura" --- */
/* ── Una tabla ancha se desliza SOLA, no arrastra la pagina ─────────────
   Esta clase se escribio en las plantillas y NUNCA se definio aqui, asi que
   no hacia nada. En el movil la tabla de Servicios medía 692px y la de Zonas
   765px dentro de una pantalla de 360: la pagina entera se iba 433px de lado.

   Y eso no se nota como «la tabla es ancha». Se nota al deslizar hacia abajo
   con el pulgar: la pantalla se va en diagonal, el titulo se sale por la
   izquierda, y da la sensacion de que la aplicacion esta rota.

   `overscroll-behavior-x: contain` para que llegar al final de la tabla no
   empiece a mover lo que hay detras. */
.pv2-tabla-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.pv2-tabla-scroll > table { min-width: 100%; }

.tf-tabla { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tf-tabla th { text-align: left; padding: 8px 12px 8px 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pv2-muted); border-bottom: 1px solid var(--pv2-border); }
.tf-tabla td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--pv2-border); vertical-align: top; }
.tf-tabla td:last-child { white-space: nowrap; }

@media (max-width: 720px) {
    .tf-sim__campo, .tf-sim__campo--corto { flex: 1 1 100%; }
    .tf-res__total strong { font-size: 1.5rem; }
    .tf-tabla td:last-child { white-space: normal; }
}

/* --- Pestañas de Tarifas: es UNA pantalla, no seis --- */
.tf-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--pv2-border); }
.tf-tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 9px 14px; margin-bottom: -1px; cursor: pointer;
    font-size: .9rem; font-weight: 600; color: var(--pv2-muted);
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.tf-tab:hover { color: var(--pv2-ink); }
.tf-tab.is-active { color: var(--pv2-primary); border-bottom-color: var(--pv2-primary); }
.tf-tab__n {
    font-size: .74rem; font-weight: 700; padding: 1px 6px; border-radius: 20px;
    background: var(--pv2-border); color: var(--pv2-muted); font-variant-numeric: tabular-nums;
}
.tf-tab.is-active .tf-tab__n { background: var(--pv2-primary-soft, rgba(109,52,214,.12)); color: var(--pv2-primary); }

.tf-panel { display: none; }
.tf-panel.is-active { display: block; }

/* Saltar a otra pestaña desde un aviso. Es un boton y no un enlace a proposito:
   no lleva a ninguna URL, mueve la vista dentro de esta misma pantalla. */
.tf-ir { appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
         color: var(--pv2-primary); font: inherit; font-weight: 600; text-decoration: underline; }

/* --- La formula, escrita --- */
.tf-formula { margin-bottom: 16px; }
.tf-formula__linea {
    display: block; padding: 12px 14px; border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface-2, rgba(0,0,0,.03));
    font-size: .95rem; line-height: 1.7; color: var(--pv2-ink);
}
.tf-formula__linea span { color: var(--pv2-primary); font-weight: 700; margin: 0 3px; }
.tf-formula__linea--final { margin-top: 8px; font-weight: 600; }
.tf-formula__aparte { color: var(--pv2-muted) !important; font-weight: 400 !important; font-size: .85rem; }
.tf-formula__nota { padding: 8px 14px; font-size: .88rem; color: var(--pv2-muted); }

.tf-ojo { display: flex; flex-direction: column; gap: 10px; font-size: .88rem; line-height: 1.6; color: var(--pv2-muted); }
.tf-ojo strong { color: var(--pv2-ink); }

/* --- Tablas de tarifas --- */
.tf-tabla--num td, .tf-tabla--num th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-tabla--num td:first-child, .tf-tabla--num th:first-child { white-space: normal; }
.tf-tabla--num small { color: var(--pv2-muted); font-weight: 400; }
.tf-fila--off { opacity: .5; }
.tf-nada { color: var(--pv2-muted); }
.tf-editar { color: var(--pv2-muted); }
.tf-editar:hover { color: var(--pv2-primary); }
.tf-pie { margin: 12px 0 0; font-size: .84rem; color: var(--pv2-muted); line-height: 1.6; }
.tf-pie code { font-size: .82rem; }

/* --- Conceptos de cargo extra --- */
.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 20px; font-size: .88rem;
    border: 1px solid var(--pv2-border); background: var(--pv2-surface); color: var(--pv2-ink);
}
.tf-chip--off { opacity: .5; }
.tf-chip a { color: var(--pv2-muted); font-size: .8rem; }
.tf-chip a:hover { color: var(--pv2-primary); }

/* --- Interruptores y limites, editables aqui mismo --- */
.tf-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
             padding: 14px 0; border-bottom: 1px solid var(--pv2-border); }
.tf-switch:last-of-type { border-bottom: 0; }
.tf-switch__txt strong { display: block; font-size: .95rem; color: var(--pv2-ink); margin-bottom: 4px; }
.tf-switch__txt p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--pv2-muted); max-width: 64ch; }
.tf-switch__control { display: inline-flex; align-items: center; gap: 8px; flex: none; margin: 0;
                      font-size: .85rem; color: var(--pv2-muted); cursor: pointer; }

.tf-limites { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 18px; }
.tf-limite label { font-size: .88rem; font-weight: 600; }
.tf-limite small { line-height: 1.55; }

@media (max-width: 720px) {
    .tf-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .tf-switch { flex-direction: column; gap: 10px; }
    .tf-limites { grid-template-columns: 1fr; }
}

/* --- Formulario de servicio: la formula arriba y los campos agrupados --- */
.pv2-content .svc-formula {
    margin: 0 0 22px; padding: 14px 16px;
    border: 1px solid var(--pv2-border); border-left: 3px solid var(--pv2-primary);
    border-radius: var(--pv2-radius-sm, 8px); background: var(--pv2-surface);
}
.pv2-content .svc-formula__eti {
    display: block; margin-bottom: 8px;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--pv2-muted);
}
.pv2-content .svc-formula code {
    display: block; font-size: .95rem; line-height: 1.7; color: var(--pv2-ink); background: none; padding: 0;
}
.pv2-content .svc-formula code span { color: var(--pv2-primary); font-weight: 700; margin: 0 3px; }
.pv2-content .svc-formula small { display: block; margin-top: 8px; font-size: .85rem; line-height: 1.6; color: var(--pv2-muted); }

/* El titulo de cada grupo. Lo que hace legible la pantalla no es el adorno:
   es que "Por distancia" este debajo de "Lo que pone el precio" y no al lado
   del metodo de pago. */
.pv2-content .svc-grupo {
    margin: 26px 0 12px; padding-bottom: 7px;
    border-bottom: 1px solid var(--pv2-border);
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--pv2-muted);
    display: flex; align-items: center; gap: 8px;
}
.pv2-content .svc-grupo i { color: var(--pv2-primary); font-size: .9rem; }
.pv2-content .svc-grupo:first-of-type { margin-top: 0; }

/* --- Reportes de QA: la cadena, el par de capturas y los hallazgos --- */
.qa-cadena { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.qa-cadena li { counter-increment: paso; display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--pv2-border); }
.qa-cadena li:first-child { border-top: 0; padding-top: 2px; }
.qa-cadena li::before {
    content: counter(paso); flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700;
    background: var(--pv2-primary-soft, rgba(109,52,214,.1)); color: var(--pv2-primary);
    font-variant-numeric: tabular-nums;
}
.qa-cadena strong { display: block; font-size: .95rem; color: var(--pv2-ink); margin-bottom: 3px; }
.qa-cadena p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--pv2-muted); }

/* El par antes/despues. Las dos imagenes al MISMO ancho a proposito: si una
   se ve mas grande que la otra, la comparacion deja de ser una comparacion. */
.qa-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.qa-par figure { margin: 0; }
.qa-par img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-sm, 8px);
}
.qa-par figcaption { margin-top: 10px; font-size: .86rem; line-height: 1.6; color: var(--pv2-muted); }
.qa-eti {
    display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 20px;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: var(--pv2-border); color: var(--pv2-muted);
}
.qa-eti--ok { background: var(--pv2-success-bg, rgba(34,140,86,.12)); color: var(--pv2-success); }

.qa-nota { margin: 14px 0 0; font-size: .86rem; line-height: 1.65; color: var(--pv2-muted); }
.qa-nota strong { color: var(--pv2-ink); }

.qa-codigo {
    margin: 0 0 14px; padding: 14px 16px; overflow-x: auto;
    border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface-2, rgba(0,0,0,.04));
    font-size: .84rem; line-height: 1.6; color: var(--pv2-ink);
    border-left: 3px solid var(--pv2-primary);
}
.qa-codigo--apagado { border-left-color: var(--pv2-muted); }

.qa-hallazgo { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--pv2-border); }
.qa-hallazgo:first-of-type { border-top: 0; padding-top: 2px; }
.qa-num {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700;
    background: var(--pv2-warning-bg); color: var(--pv2-warning);
    font-variant-numeric: tabular-nums;
}
.qa-hallazgo strong { display: block; font-size: .95rem; color: var(--pv2-ink); margin-bottom: 5px; }
.qa-hallazgo p { margin: 0 0 6px; font-size: .88rem; line-height: 1.65; color: var(--pv2-muted); }
.qa-que-hacer { font-style: italic; }

.qa-lista { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.8; color: var(--pv2-muted); }
.qa-lista strong { color: var(--pv2-ink); }

.qa-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.qa-estado strong { display: block; margin-bottom: 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.qa-estado ul { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.75; color: var(--pv2-muted); }
.qa-estado__ok strong { color: var(--pv2-success); }
.qa-estado__falta strong { color: var(--pv2-warning); }

/* --- Campañas de publicidad: numeros y configuracion en cada tarjeta --- */
.gal__nums { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: .8rem; color: var(--pv2-muted); }
.gal__nums b { color: var(--pv2-ink); font-variant-numeric: tabular-nums; }
/* El porcentaje de clics separado: es el numero por el que pregunta un
   anunciante, y mezclado entre los otros dos se pierde. */
.gal__ctr { margin-left: auto; padding: 1px 8px; border-radius: 20px; font-weight: 700;
            background: var(--pv2-primary-soft, rgba(109,52,214,.1)); color: var(--pv2-primary); }

.gal__camp { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: .78rem; color: var(--pv2-muted); }
.gal__camp i { opacity: .6; margin-right: 3px; }

.ads-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 16px; }
.ads-ajuste .set__pista { display: block; margin-top: 5px; line-height: 1.55; }

/* ═══ Editar una campaña de publicidad ═══════════════════════════════
   Era cuatro tarjetas apiladas en una sola columna: mucho scroll para un
   formulario de diez campos, y sin ninguna señal de como iba la campaña
   que estabas tocando. */

/* --- La cabecera: estado y numeros de un vistazo --- */
.pv2-content .ban__cab {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; padding: 14px 18px;
    border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface);
}
.pv2-content .ban__estado { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.pv2-content .ban__estado i { font-size: .6rem; }
.pv2-content .ban__estado--on  { color: var(--pv2-success); }
.pv2-content .ban__estado--off { color: var(--pv2-warning); }
.pv2-content .ban__estado--off i { font-size: .85rem; }

.pv2-content .ban__nums { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.pv2-content .ban__nums > div { display: flex; flex-direction: column; line-height: 1.2; }
.pv2-content .ban__nums b { font-size: 1.35rem; font-weight: 700; color: var(--pv2-ink); font-variant-numeric: tabular-nums; }
.pv2-content .ban__nums span { font-size: .78rem; color: var(--pv2-muted); }
.pv2-content .ban__nums small { font-size: .74rem; color: var(--pv2-muted); font-style: italic; }

/* --- Dos columnas donde cabe. La imagen manda a la izquierda y los
       campos a la derecha: asi se ve la previa mientras se escribe. --- */
@media (min-width: 1100px) {
    .pv2-content .ban__img { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
}

/* --- La zona de soltar, en vez del "Browse" gris del navegador --- */
.pv2-content .ban__soltar {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; margin: 0 0 16px; padding: 22px 18px; cursor: pointer;
    border: 2px dashed var(--pv2-border); border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface); text-align: center;
    transition: border-color .15s, background .15s;
}
.pv2-content .ban__soltar:hover,
.pv2-content .ban__soltar.is-sobre { border-color: var(--pv2-primary); background: var(--pv2-primary-soft, rgba(109,52,214,.06)); }
.pv2-content .ban__soltar i { font-size: 1.5rem; color: var(--pv2-primary); }
.pv2-content .ban__soltar__t { font-size: .92rem; font-weight: 600; color: var(--pv2-ink); }
.pv2-content .ban__soltar__s { font-size: .82rem; color: var(--pv2-muted); word-break: break-all; }

/* --- La previa al tamaño que tiene en el telefono ---
   La grande engaña: un texto que ahi se lee perfecto, en 330 px no. */
.pv2-content .ban__real { margin-top: 16px; }
.pv2-content .ban__real__marco {
    width: 330px; max-width: 100%; aspect-ratio: 16 / 6; overflow: hidden;
    border-radius: 16px; border: 1px solid var(--pv2-border); background: var(--pv2-surface-2, rgba(0,0,0,.04));
}
.pv2-content .ban__real__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Forma de la zona: circulo o poligono --- */
.pv2-content .zn-forma, .zn-forma { display: flex; flex-wrap: wrap; gap: 10px; }
.zn-forma__op { margin: 0; cursor: pointer; }
.zn-forma__op input { position: absolute; opacity: 0; width: 0; height: 0; }
.zn-forma__op > span {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 11px 16px; min-width: 165px;
    border: 2px solid var(--pv2-border); border-radius: var(--pv2-radius-sm, 8px);
    background: var(--pv2-surface); transition: border-color .15s, background .15s;
}
.zn-forma__op > span i { color: var(--pv2-muted); margin-bottom: 3px; }
.zn-forma__op > span b { font-size: .92rem; color: var(--pv2-ink); }
.zn-forma__op > span small { font-size: .8rem; color: var(--pv2-muted); }
.zn-forma__op input:checked + span {
    border-color: var(--pv2-primary); background: var(--pv2-primary-soft, rgba(109,52,214,.07));
}
.zn-forma__op input:checked + span i { color: var(--pv2-primary); }
/* El foco tiene que verse: se elige con el teclado igual que con el raton. */
.zn-forma__op input:focus-visible + span { outline: 2px solid var(--pv2-primary); outline-offset: 2px; }


/* ═══════════════════════════════════════════════════════════════════════
   MOVIL: QUE SE PUEDA TOCAR
   ═══════════════════════════════════════════════════════════════════════

   Medido con un navegador de verdad a 360x640, no a ojo. Los botones de la
   barra superior median entre 29px y 42px de alto, y las pestañas de Tarifas
   37px. El minimo razonable con un dedo es 44px: por debajo se falla el
   toque, se pulsa lo de al lado, y se culpa al usuario de tener mala punteria.

   Solo por debajo de 760px. En escritorio se apunta con raton y un boton de
   29px esta bien: agrandarlo alli solo desperdiciaria sitio.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* ── La barra de arriba, en TODAS las pantallas ─────────────────── */
    .pv2-burger,
    .pv2-iconbtn,
    .pv2-cmdk {
        min-height: 44px;
    }

    /* Solo ALTO, no ancho. Ponerles tambien `min-width: 44px` hacia que la
       barra superior —hamburguesa, buscador, campana y dos iconos mas— no
       cupiera en 360px y la pagina entera se iba 50px de lado. El alto es lo
       que faltaba: de ancho ya pasaban o quedaban muy cerca, y el dedo
       perdona antes en horizontal, donde los botones estan separados, que en
       vertical, donde se tocan con el borde de la barra. */

    /* ── Tarifas ────────────────────────────────────────────────────── */

    /* Las pestañas ya se deslizan de lado cuando no caben; lo que les
       faltaba era alto para el dedo. */
    .tf-tab {
        min-height: 44px;
    }

    /* «Calcular» es la accion principal de la pantalla y medía 36px. */
    .tf-sim .pv2-btn {
        min-height: 44px;
    }

    /* Enlaces sueltos dentro de las tarjetas de la formula —«Ver cupones»
       media 16px de alto—. No son enlaces dentro de un parrafo: son la
       salida de la tarjeta, y se tocan. */
    .tf-paso__txt > a {
        display: inline-block;
        padding: 14px 0;
    }

    /* ── Los botones, en cualquier pantalla del panel ───────────────── */

    /* Incluido el «Back» del tema viejo, que medía 39px. Se limita a los
       que son ENLACE-boton (cabeceras de pantalla): los botones de accion
       dentro de las filas de una tabla se quedan como estan, que ahi la
       densidad es la que hace util la tabla. */
    .pv2-btn,
    .pv2-content > * a.btn,
    .pv2-content .iq-card-header a.btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Avisos de sesion (partials/_avisos) ─────────────────────────────────
   Guardado / error / validacion en las dos capas del panel: reusan
   .pv2-aviso (arriba). Aqui solo lo nuevo: la pila, la lista de errores y
   la caja de la contraseña temporal, que no se cierra sola. */
.pv2-avisos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pv2-avisos__lista { margin: 4px 0 0; padding-left: 18px; }
.pv2-aviso__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.pv2-aviso__cerrar {
    flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0;
    border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .7;
}
.pv2-aviso__cerrar:hover, .pv2-aviso__cerrar:focus-visible { opacity: 1; }
.pv2-aviso--clave { border-left-color: var(--pv2-primary); background: var(--pv2-primary-050); flex-wrap: wrap; align-items: flex-start; }
.pv2-aviso--clave > i { color: var(--pv2-primary); }
.pv2-aviso__clave {
    display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 8px;
    background: var(--pv2-card, #fff); border: 1px dashed var(--pv2-primary);
    font: 600 18px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--pv2-ink);
    user-select: all;
}
.pv2-avisos .pv2-aviso { margin-bottom: 0; }
@media (max-width: 760px) { .pv2-solo-escritorio { display: none !important; } }

/* ==========================================================================
   fase 1B — La lista de gestión dentro de su página del menú (x-pv2.lista)
   ==========================================================================
   Pasajeros, Choferes, Viajes, Pagos y Quejas llevaban a unas cifras, y la
   lista para trabajar vivía en otra pantalla fuera del menú. Ahora la lista va
   debajo de las cifras, con los filtros a la vista. Solo lo que no existía. */

/* Un buscador, no dos: el de la barra de filtros manda y el de DataTables
   repetía lo mismo en otro sitio. */
.lista .dataTables_filter { display: none; }

/* Rótulo encima de cada caja: se lee qué filtra sin abrirla. */
.lista__filtros { align-items: flex-end; margin-bottom: 10px; }
.lista__filtros .filtros__buscar { flex: 1 1 240px; }
.lista__filtros .filtros__buscar input,
.lista__filtros .pv2-btn { min-height: 40px; }
.pv2-content .lista label.lista__campo {
    display: flex; flex-direction: column; gap: 4px; margin: 0;
    font-size: .78rem; font-weight: 600; color: var(--pv2-muted);
}
.pv2-content .lista .lista__campo .pv2-input { min-height: 40px; min-width: 140px; }

/* Filtros que llegan por enlace (desde una ficha o una cifra): se ven y se
   quitan. Una lista filtrada sin decir por qué parece una lista rota. */
.lista__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.lista__chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
    padding: 5px 12px; border-radius: var(--pv2-radius-pill);
    background: var(--pv2-primary-050); color: var(--pv2-primary);
    font-size: .82rem; font-weight: 600; text-decoration: none;
}
.lista__chip:hover { color: var(--pv2-primary); text-decoration: none; box-shadow: inset 0 0 0 1px var(--pv2-primary); }

/* Encabezados en dos renglones si hace falta: la tabla cabe en el ancho y las
   acciones no quedan escondidas al final del deslizamiento. */
.lista table.dataTable thead th { white-space: normal; }

/* Las acciones se quedan a la vista al deslizar, igual que la primera
   columna: deslizar para encontrar el lápiz es buscar botones. */
.lista--acciones .table-responsive > table.dataTable > thead > tr > th:last-child,
.lista--acciones .table-responsive > table.dataTable > tbody > tr > td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: var(--pv2-surface); box-shadow: -1px 0 0 var(--pv2-border);
}
.lista--acciones .table-responsive > table.dataTable > thead > tr > th:last-child { background: var(--pv2-surface-2); z-index: 3; }
.lista--acciones .table-responsive > table.dataTable > tbody > tr:hover > td:last-child { background: var(--pv2-surface-2); }

/* Una pastilla no se parte en dos renglones («En / investigación»). */
.lista table.dataTable .pv2-badge { white-space: nowrap; }

/* Estado vacío con salida. */
.lista__vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: normal; }
.lista__vacio-accion { margin-top: 10px; }

/* «Análisis»: las gráficas quedan debajo de la lista, como apoyo. */
.lista__seccion { margin: 6px 0 14px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--pv2-ink); }

/* Cifras compactas: arriba informan, no empujan la lista fuera de la vista. */
.res--compacta { margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.res--compacta .res__c { padding: 13px 16px 14px; gap: 3px; }
.res--compacta .res__n { font-size: 1.45rem; }
.res--compacta .res__c--fuerte .res__n { font-size: 1.65rem; }

@media (max-width: 760px) {
    /* En móvil cada renglón es una ficha: nada de columnas pegadas. */
    .lista--acciones .table-responsive > table.dataTable > tbody > tr > td:last-child { position: static; box-shadow: none; background: transparent; }
}
@media (max-width: 560px) {
    .res--compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .res--compacta .res__c--fuerte { grid-column: 1 / -1; }
    .res--compacta .res__n { font-size: 1.25rem; }
    .pv2-content .lista .lista__campo .pv2-input { width: 100%; min-width: 0; }
    /* El selector de periodo del encabezado ocupa su renglón entero: al
       repartirse el ancho con Excel/PDF quedaba como una pastilla deforme de
       tres pisos. */
    .pv2-page-header__actions > .pv2-filters,
    .pv2-page-header__actions > span:has(> .pv2-filters) { flex: 1 1 100%; }
    .pv2-page-header__actions .pv2-filters { width: 100%; border-radius: 14px; }
    .pv2-page-header__actions .pv2-filters > .pv2-filter,
    .pv2-page-header__actions .pv2-filters > .pv2-filter-range { flex: 1 0 auto; }
}

/* fase 1A ------------------------------------------------------------------
   Listas pasadas a v2 (retiros, roles, permisos, sub-admins, idiomas,
   grabaciones, reglas del asistente, reportes de ingresos, plantillas).
   Solo lo que las clases existentes no cubren. */
.pv2-content .pv2-fecha { white-space: nowrap; }
.pv2-content a.pv2-btn--success, .pv2-content a.pv2-btn--success i,
.pv2-content a.pv2-btn--success:hover { color: #fff !important; }
.pv2-content .pv2-wd-actions { flex-wrap: nowrap; justify-content: flex-end; }
.pv2-content td .pv2-wd-actions form { display: inline-flex; }
/* Las pestañas de estado se deslizan en móvil en vez de empujar la página. */
.pest { overflow-x: auto; scrollbar-width: none; }
.pest::-webkit-scrollbar { display: none; }
.pest__op { white-space: nowrap; flex: 0 0 auto; }
/* Filtros visibles arriba de una lista: campos con su rótulo en una fila que
   se dobla. */
.f1a-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.f1a-filtros__campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 160px; max-width: 260px; }
.f1a-filtros__campo > span { font-size: .78rem; font-weight: 600; color: var(--pv2-muted); }
.f1a-filtros__campo .pv2-input, .f1a-filtros__campo select { width: 100%; box-sizing: border-box; }
.f1a-filtros__campo .select2-container { width: 100% !important; }
.f1a-filtros__acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .f1a-filtros__campo { max-width: none; flex-basis: 100%; } }
/* Matriz de permisos: roles en columnas, módulos como grupos de filas. La
   caja se desliza en los dos ejes con la cabecera y la primera columna fijas,
   para no perder ni el rol ni el permiso al recorrerla. */
.f1a-perm { max-height: 70vh; overflow: auto; border-radius: inherit; }
.f1a-perm__tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.f1a-perm__tabla th, .f1a-perm__tabla td { padding: 9px 12px; border-bottom: 1px solid var(--pv2-border-2); text-align: center; }
.f1a-perm__tabla thead th {
    position: sticky; top: 0; z-index: 2; background: var(--pv2-surface-2);
    font-size: 12px; font-weight: 700; color: var(--pv2-ink-2); white-space: nowrap;
    border-bottom: 1px solid var(--pv2-border);
}
.f1a-perm__tabla .f1a-perm__nom {
    position: sticky; left: 0; z-index: 1; text-align: left; background: var(--pv2-surface);
    min-width: 210px; max-width: 260px; font-weight: 500; color: var(--pv2-ink);
}
.f1a-perm__tabla thead .f1a-perm__nom { z-index: 3; background: var(--pv2-surface-2); }
.f1a-perm__nom small { display: block; font-size: 11px; color: var(--pv2-muted); font-family: ui-monospace, Menlo, monospace; }
.f1a-perm__cab th.f1a-perm__nom {
    background: var(--pv2-surface-2); font-weight: 700; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--pv2-muted); padding-top: 14px;
}
.f1a-perm__cab th.f1a-perm__nom span { position: sticky; left: 12px; }
.f1a-perm__fila:hover td, .f1a-perm__fila:hover th { background: var(--pv2-surface-2); }
.f1a-perm__check { width: 18px; height: 18px; accent-color: var(--pv2-primary); cursor: pointer; }
.f1a-perm__check:disabled { cursor: not-allowed; opacity: .5; }
.f1a-perm__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 760px) {
    .f1a-perm__tabla .f1a-perm__nom { min-width: 150px; max-width: 170px; }
    .f1a-perm__pie .pv2-btn { width: 100%; justify-content: center; }
}
.f1a-persona { display: inline-flex; align-items: center; gap: 8px; }
.f1a-quien { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--pv2-ink-2); }
.f1a-quien i { color: var(--pv2-muted); font-size: .85em; }
.f1a-filtros .pv2-filters { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pv2-content table.dataTable td.f1a-col-tema { min-width: 150px; }
.pv2-content table.dataTable td.f1a-col-texto { min-width: 280px; max-width: 420px; }
.f1a-filtros__acc { min-width: 0; max-width: 100%; }
.f1a-filtros__campo .pv2-input { height: 40px; }
.f1a-filtros__campo .select2-container .select2-selection--single { height: 40px; display: flex; align-items: center; }

/* fase 1B — Datos en pares rótulo/valor dentro de una tarjeta de la ficha
   (datos bancarios del pasajero): dos columnas en escritorio, una en móvil. */
.ficha__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 0; }
.ficha__datos dt { font-size: .76rem; font-weight: 600; color: var(--pv2-muted); margin: 0 0 2px; }
.ficha__datos dd { margin: 0; color: var(--pv2-ink); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  /* Con muchas páginas la paginación se salía de la pantalla. */
  .pv2-content .dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
}
@media (max-width: 760px) {
  /* En móvil la tabla se vuelve tarjetas y el pie de totales se cortaba; los
     mismos totales ya están en las cifras de arriba. */
  .pv2-content tfoot.f1a-totales { display: none; }
}

/* ============================================================================
   FASE 2 — Consistencia visual global (oct-2026)
   Lo que va aquí manda sobre lo de arriba: el archivo creció por capas y hay
   tokens definidos dos y tres veces (:root al principio y otra vez en
   «neutros con tinte»). En vez de reescribir 6.000 líneas, la última palabra
   sobre los tokens está en este bloque.
   ========================================================================== */
:root {
  /* Texto secundario. #8d88a6 sobre blanco daba 3.4:1 (AA pide 4.5): las
     fechas, los subtítulos y los rótulos de las cifras no pasaban. Este es el
     mismo gris con tinte, un paso más oscuro: 5.1 sobre blanco, 4.7 sobre el
     fondo. */
  --pv2-muted:        #6f6a88;

  /* Tinta de los estados para TEXTO PEQUEÑO (pastillas, avisos). El verde
     #16a34a sobre su fondo daba 2.9:1 y el ámbar 3.3: el estado se leía por el
     color pero no por la letra. Los tonos vivos se quedan para iconos, cifras
     grandes y gráficas. */
  --pv2-success-ink:  #166534;
  --pv2-warning-ink:  #8a5a12;
  --pv2-danger-ink:   #b91c1c;
  --pv2-info-ink:     #1d4ed8;
  --pv2-neutral-ink:  #4b4663;

  /* Espaciado en rejilla de 4. */
  --pv2-s-1: 4px;  --pv2-s-2: 8px;  --pv2-s-3: 12px; --pv2-s-4: 16px;
  --pv2-s-5: 20px; --pv2-s-6: 24px; --pv2-s-8: 32px; --pv2-s-12: 48px;
}
body.dark, body.dark-mode, html.dark {
  /* 4.2:1 sobre las tarjetas oscuras; este da 5.4. */
  --pv2-muted:        #9690b0;
  --pv2-success-ink:  #4ade80;
  --pv2-warning-ink:  #fbbf24;
  --pv2-danger-ink:   #fca5a5;
  --pv2-info-ink:     #93c5fd;
  --pv2-neutral-ink:  #cfc9e3;
}

/* Las pastillas de estado: misma forma en todo el panel, letra que se lee. */
.pv2-badge--success { color: var(--pv2-success-ink); }
.pv2-badge--warning { color: var(--pv2-warning-ink); }
.pv2-badge--danger  { color: var(--pv2-danger-ink); }
.pv2-badge--info    { color: var(--pv2-info-ink); }
.pv2-badge--neutral { color: var(--pv2-neutral-ink); background: var(--pv2-surface-3, var(--pv2-border-2)); }
.pv2-badge { white-space: nowrap; }
/* Las clases sueltas de Bootstrap que quedan en tablas viejas usan la misma
   tinta legible (el cian de .text-info sobre blanco daba 1.9:1). */
.pv2-content .text-info    { color: var(--pv2-info-ink) !important; }
.pv2-content .text-success { color: var(--pv2-success-ink) !important; }
.pv2-content .text-warning { color: var(--pv2-warning-ink) !important; }
.pv2-content .text-danger  { color: var(--pv2-danger-ink) !important; }
.pv2-content .badge-light-success { color: var(--pv2-success-ink) !important; }
.pv2-content .badge-light-warning { color: var(--pv2-warning-ink) !important; }
.pv2-content .badge-light-danger  { color: var(--pv2-danger-ink) !important; }
.pv2-content .badge-light-info    { color: var(--pv2-info-ink) !important; }

/* Foco de teclado VISIBLE en todo el panel. El anillo de 3px al 16% de
   opacidad no se distinguía del fondo; quien navega con Tab no sabía dónde
   estaba. Solo con teclado (:focus-visible): el clic no lo enciende. */
.pv2-shell :is(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pv2-primary);
  outline-offset: 2px;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
/* Iconos informativos de una fila (visible, destacado…): gris, no estado. */
.pv2-icos { display: inline-flex; gap: var(--pv2-s-2); color: var(--pv2-muted); white-space: nowrap; }
.pv2-ico { display: inline-flex; align-items: center; }
/* Un código (cupón, referido) se lee carácter a carácter: monoespaciada y
   sin el rosa de <code> de Bootstrap. */
.pv2-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; font-weight: 600;
  color: var(--pv2-ink); background: var(--pv2-surface-3, var(--pv2-border-2));
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
}
/* Las cabeceras de tabla no se parten («ÚLTIMA / ACTIVIDAD» en dos pisos
   hacía la cabecera más alta que las filas). */
.pv2-content table.dataTable thead th { white-space: nowrap; }
/* Toda tabla se desliza dentro de su tarjeta, nunca empuja la página. */
.pv2-content .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Una tabla dentro de una tarjeta «flush» (sin relleno) dejaba el «Mostrar»,
   el buscador y la paginación pegados al borde. La tabla sí va de lado a
   lado; los controles, con el aire de la tarjeta. */
.pv2-card__body--flush .dataTables_wrapper > .row { margin: 0; padding: var(--pv2-s-3) var(--pv2-s-5); }
.pv2-card__body--flush .dataTables_wrapper > .table-responsive { margin: 0 !important; }
/* Alertas KYC */
.kyc__detalle { font-size: .82rem; color: var(--pv2-muted); margin-top: 2px; }
.kyc__acciones { display: inline-flex; gap: var(--pv2-s-2); justify-content: flex-end; flex-wrap: nowrap; }
.kyc__acciones form { display: inline-flex; margin: 0; }
.kyc__paginas { margin-top: var(--pv2-s-4); }
/* Filtros a la vista de las listas lista_v2 (global._filtros_get): mismo
   aspecto que los de x-pv2.lista — rótulo encima, cajas de 40px. */
.pv2-content .filtros-get label.lista__campo {
    display: flex; flex-direction: column; gap: var(--pv2-s-1); margin: 0;
    font-size: .78rem; font-weight: 600; color: var(--pv2-muted);
}
.pv2-content .filtros-get .lista__campo .pv2-input { min-height: 40px; min-width: 140px; }
.pv2-content .filtros-get .pv2-btn { min-height: 40px; }
.filtros-get__casilla {
    display: inline-flex; align-items: center; gap: var(--pv2-s-2); min-height: 40px; margin: 0;
    font-size: .86rem; color: var(--pv2-ink-2); cursor: pointer;
}
.filtros-get__casilla input { width: 16px; height: 16px; accent-color: var(--pv2-primary); }
.filtros-get { padding-bottom: var(--pv2-s-3); border-bottom: 1px solid var(--pv2-border-2); }
.filtros-get__casilla input { flex: none; margin: 0; display: inline-block; }
/* Progreso de promociones: el selector «Todos / En curso / Ganaron / Se
   quedaron cerca» empujaba la página 42 px a 360. Se desliza dentro. */
@media (max-width: 640px) {
  .segm2 { display: flex; max-width: 100%; min-width: 0; scrollbar-width: none; }
  .segm2::-webkit-scrollbar { display: none; }
  .segm2__b { flex: 0 0 auto; }
}
.pv2-empty__accion { margin-top: var(--pv2-s-4); }
/* Movimientos de cartera: el signo y el color dicen si entra o sale; antes
   el importe iba dentro de una pastilla verde o ámbar. */
.pv2-monto { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pv2-monto--mas { color: var(--pv2-success-ink); }
.pv2-monto--menos { color: var(--pv2-ink); }
/* Ajustes → Idiomas disponibles: con muchos idiomas marcados la caja de
   select2 crecía cientos de px y se montaba encima de los campos de abajo.
   Se queda en tres renglones y se desliza. */
.pv2-content .select2-container .select2-selection--multiple { max-height: 128px; overflow-y: auto; }
/* Acciones de fila en un renglón: el botón de «sacar de línea» (un segundo
   formulario) bajaba a otra línea y hacía la fila el doble de alta. */
.lista table.dataTable tbody td:last-child { white-space: nowrap; }
.lista table.dataTable tbody td:last-child > form,
.lista table.dataTable tbody td:last-child > form > .d-flex { display: inline-flex; align-items: center; vertical-align: middle; margin: 0; }
.lista table.dataTable tbody td:last-child > form + form { margin-left: var(--pv2-s-2); }

/* Botón primario en modo oscuro. El morado oscuro de marca se aclara en
   oscuro (#9d6cff) para leerse como TEXTO sobre fondo negro, pero como
   FONDO de un botón con letra blanca daba 3.5:1. Los rellenos con letra
   blanca usan el tono hundido (#7a43e8, 5.5:1). Las tres definiciones de
   .pv2-btn--primary que arrastra el archivo quedan pisadas aquí. */
body.dark .pv2-btn--primary, body.dark-mode .pv2-btn--primary,
html.dark body .pv2-btn--primary {
  background: var(--pv2-primary-700); border-color: var(--pv2-primary-700);
}
body.dark .pv2-btn--primary:hover, body.dark-mode .pv2-btn--primary:hover { background: #6a35d6; border-color: #6a35d6; }
body.dark .pv2-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark .pv2-filter.is-active {
  background: var(--pv2-primary-700) !important; border-color: var(--pv2-primary-700) !important;
}

/* La cifra que manda (KPI acentuado). El degradado terminaba en #8f5bff y
   ahí, abajo a la derecha, va el pie en blanco al 85%: 3.1:1. Ahora va del
   púrpura del manual al morado de marca, los dos con letra blanca por encima
   de 6:1; en oscuro, los tonos hundidos. */
.pv2-kpi--accent { background: linear-gradient(145deg, var(--pv2-primary-600), #6e4c9f); }
body.dark .pv2-kpi--accent, body.dark-mode .pv2-kpi--accent { background: linear-gradient(145deg, #5b2fc4, var(--pv2-primary-700)); }
.pv2-kpi--accent .pv2-kpi__label, .pv2-kpi--accent .pv2-kpi__foot { color: rgba(255,255,255,.92); }
/* En oscuro las líneas guía de las gráficas salían casi blancas (cada
   gráfica trae su color fijo) y competían con los datos. Al tono de borde. */
body.dark .apexcharts-gridline, body.dark-mode .apexcharts-gridline,
body.dark .apexcharts-xaxis-tick, body.dark .apexcharts-xaxis line { stroke: var(--pv2-border) !important; }
.filtros-get .filtros__limpiar { line-height: 40px; }
.pv2-table td.pv2-nombre { white-space: nowrap; }
body.dark .pv2-filters .pv2-filter.is-active, body.dark-mode .pv2-filters .pv2-filter.is-active,
body.dark .pv2-filter-range summary.pv2-filter.is-active {
  background: var(--pv2-primary-700) !important; border-color: var(--pv2-primary-700) !important; color: #fff !important;
}

/* ── Menú plegado en pantallas táctiles (tablet) ─────────────────────────
   El botón para volver a abrirlo medía 28 px: con el dedo se fallaba y se
   tocaba el logo o un icono. Ahora mide 44 px (mínimo cómodo para un dedo),
   el logo también lo abre (JS del sidebar) y en táctil no hay «vista previa»
   por hover que se coma el primer toque. */
.pv2-shell.is-plegado .pv2-sidebar__brand { cursor: pointer; flex-wrap: wrap; justify-content: center; }
.pv2-shell.es-tactil .pv2-sidebar__plegar,
.pv2-shell.is-plegado.es-tactil .pv2-sidebar__plegar { width: 44px; height: 44px; font-size: 16px; }
.pv2-shell.is-plegado .pv2-sidebar__plegar { width: 40px; height: 40px; }

/* Editar documento: lo que pasa si la vigencia queda vencida (QA D-48). */
.vig-vencida {
    padding: 8px 10px; border-radius: var(--pv2-radius-sm);
    background: var(--pv2-danger-bg); color: var(--pv2-danger-ink);
    font-size: 13px; line-height: 1.4;
}
.vig-vencida[hidden] { display: none; }