/* ============================================================================
   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) */
  --pv2-primary:        #6d34d6;
  --pv2-primary-600:    #5b28bd;
  --pv2-primary-050:    #f1ecff;
  --pv2-primary-100:    #e5dbff;

  /* 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 { padding: 26px; }

/* ----- 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(109,52,214,.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: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ----- Grid utils ------------------------------------------------------ */
.pv2-grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 992px) { .pv2-grid-2 { grid-template-columns: 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); }
.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; }

/* ============================================================================
   #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 {
    max-width: 380px;
    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. */
    overflow-wrap: anywhere;
}

/* 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 (revisión de documentos).
   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. */
.rev-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: rev-nuevos-entra .25s ease-out;
}

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

@keyframes rev-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) {
    .rev-nuevos { animation: none; }
}