/* ==========================================================================
   SISWEB · Hoja de estilos propia (oleada 1)
   Reemplaza a NiceAdmin. Se carga DESPUÉS de Bootstrap 5.3 y ajusta sus variables,
   así el marcado existente (btn, form-control, card, modal, table…) toma la
   identidad nueva sin reescribir las vistas.

   Orden: 1 tokens · 2 base · 3 Bootstrap · 4 shell · 5 componentes ·
          6 compatibilidad con clases heredadas · 7 utilidades · 8 impresión
   El color de acento por cliente se define en sisweb.ini (APP_ACCENT) y se
   inyecta como --app-accent desde partials/head.php.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --app-accent: #2f5bd3;
  /* Tonos del acento: valores para el acento por omisión. partials/estilos.php los recalcula para el
     acento de cada cliente en hexadecimal (los navegadores anteriores a 2023 no mezclan colores en CSS). */
  --app-accent-rgb: 47, 91, 211;
  --app-accent-hover: #284eb5;
  --app-accent-soft: #eaeffb;
  --app-accent-line: #c5d1f3;
  --app-accent-strong: #214094;

  --app-bg: #f4f6f9;
  --app-surface: #ffffff;
  --app-surface-2: #f8f9fb;
  --app-border: #e2e6ec;
  --app-border-strong: #cfd5de;
  --app-text: #1f2733;
  --app-text-2: #5b6574;
  --app-text-3: #8a93a1;

  --app-ok: #1e8e5a;
  --app-warn: #b7791f;
  --app-danger: #c43d3d;
  --app-info: #2878b8;

  --app-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --app-fs: 0.875rem;      /* 14 px: densidad compacta para pantallas de operación */
  --app-fs-sm: 0.8125rem;  /* 13 px */
  --app-fs-xs: 0.75rem;    /* 12 px */

  --app-radius: 8px;
  --app-radius-sm: 6px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --app-shadow-lg: 0 8px 24px rgba(16, 24, 40, .12);

  --app-header-h: 56px;
  --app-sidebar-w: 256px;
  --app-gap: 16px;
}

/* 2. Base ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: var(--app-fs);
  line-height: 1.45;
}
h1, h2, h3, h4, h5, h6 { color: var(--app-text); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.375rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; } h5 { font-size: 0.9375rem; } h6 { font-size: 0.875rem; }
a { color: var(--app-accent); }
a:hover { color: var(--app-accent-hover); }
label { color: var(--app-text-2); font-size: var(--app-fs-sm); font-weight: 500; }
::selection { background: var(--app-accent-line); }
:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }

/* 3. Bootstrap: variables y componentes con el acento ---------------------- */
:root {
  --bs-primary: var(--app-accent);
  --bs-link-color: var(--app-accent);
  --bs-link-hover-color: var(--app-accent-hover);
  --bs-body-font-family: var(--app-font);
  --bs-body-font-size: var(--app-fs);
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-surface);   /* fondo de controles, tarjetas y modales */
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius-sm);
  --bs-border-radius-lg: var(--app-radius);
  --bs-secondary-color: var(--app-text-2);
  --bs-tertiary-bg: var(--app-surface-2);
  --bs-focus-ring-color: rgba(var(--app-accent-rgb), .25);
}
.btn { font-size: var(--app-fs-sm); font-weight: 500; border-radius: var(--app-radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--app-accent); --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-hover); --bs-btn-hover-border-color: var(--app-accent-hover);
  --bs-btn-active-bg: var(--app-accent-hover); --bs-btn-active-border-color: var(--app-accent-hover);
  --bs-btn-disabled-bg: var(--app-accent); --bs-btn-disabled-border-color: var(--app-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-accent); --bs-btn-border-color: var(--app-accent-line);
  --bs-btn-hover-bg: var(--app-accent); --bs-btn-hover-border-color: var(--app-accent); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--app-accent-hover); --bs-btn-active-border-color: var(--app-accent-hover);
  --bs-btn-disabled-color: var(--app-accent);
}
.btn-light { --bs-btn-bg: var(--app-surface); --bs-btn-border-color: var(--app-border); --bs-btn-hover-bg: var(--app-surface-2); --bs-btn-hover-border-color: var(--app-border-strong); }
.text-primary { color: var(--app-accent) !important; }
.bg-primary { background-color: var(--app-accent) !important; }
.border-primary { border-color: var(--app-accent) !important; }
.link-primary { color: var(--app-accent) !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--app-accent) !important; color: #fff !important; }
.text-bg-primary { background-color: var(--app-accent) !important; }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.form-control, .form-select, .input-group-text {
  font-size: var(--app-fs-sm); border-color: var(--app-border-strong); border-radius: var(--app-radius-sm);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .18);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--app-surface-2); color: var(--app-text-2); }
.input-group-text { background: var(--app-surface-2); color: var(--app-text-2); }
.nav-link { color: var(--app-text-2); }
.nav-link:hover, .nav-link:focus { color: var(--app-accent); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-accent); }
.pagination { --bs-pagination-color: var(--app-accent); --bs-pagination-active-bg: var(--app-accent); --bs-pagination-active-border-color: var(--app-accent); --bs-pagination-font-size: var(--app-fs-sm); }
.dropdown-menu { --bs-dropdown-font-size: var(--app-fs-sm); --bs-dropdown-link-active-bg: var(--app-accent); border-color: var(--app-border); box-shadow: var(--app-shadow-lg); border-radius: var(--app-radius); }
.dropdown-item { padding: .45rem .9rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--app-accent-soft); color: var(--app-accent); }
.progress { --bs-progress-bar-bg: var(--app-accent); }
.list-group { --bs-list-group-active-bg: var(--app-accent); --bs-list-group-active-border-color: var(--app-accent); }
.alert { font-size: var(--app-fs-sm); border-radius: var(--app-radius); }
.modal-content { border: 0; border-radius: var(--app-radius); box-shadow: var(--app-shadow-lg); }
.modal-header { border-bottom-color: var(--app-border); padding: .85rem 1.1rem; }
.modal-footer { border-top-color: var(--app-border); padding: .7rem 1.1rem; }
.modal-title { font-size: 1rem; font-weight: 600; }

/* 4. Shell: encabezado, barra lateral, área de trabajo --------------------- */
.app-shell { min-height: 100vh; }
.app-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1030; height: var(--app-header-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--app-surface); border-bottom: 1px solid var(--app-border);
}
.app-brand { display: flex; align-items: center; gap: 10px; min-width: calc(var(--app-sidebar-w) - 32px); color: var(--app-text); text-decoration: none; }
.app-brand img { max-height: 34px; width: auto; }
.app-brand-name { font-weight: 700; font-size: 1rem; letter-spacing: .01em; }
.app-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid transparent; border-radius: var(--app-radius-sm); background: transparent; color: var(--app-text-2);
}
.app-icon-btn:hover { background: var(--app-surface-2); color: var(--app-text); border-color: var(--app-border); }
.app-header-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.app-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 36px; padding: 0 10px;
  border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface);
  color: var(--app-text); font-size: var(--app-fs-sm); white-space: nowrap;
}
.app-chip:hover { border-color: var(--app-border-strong); background: var(--app-surface-2); }
.app-chip .fa-solid, .app-chip .fa-regular { color: var(--app-accent); }
.app-chip-text { overflow: hidden; text-overflow: ellipsis; }
.app-chip small { color: var(--app-text-3); font-size: var(--app-fs-xs); display: block; line-height: 1; }
.app-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-accent-soft); color: var(--app-accent); font-weight: 700; font-size: var(--app-fs-xs);
}

.app-sidebar {
  position: fixed; top: var(--app-header-h); bottom: 0; left: 0; z-index: 1020; width: var(--app-sidebar-w);
  display: flex; flex-direction: column; background: var(--app-surface); border-right: 1px solid var(--app-border);
  transition: transform .2s ease;
}
.app-sidebar-search { padding: 12px 12px 8px; }
.app-sidebar-search .form-control { padding-left: 32px; background: var(--app-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a93a1'%3E%3Cpath d='M11.7 10.3a6.5 6.5 0 1 0-1.4 1.4l3.6 3.6 1.4-1.4-3.6-3.6zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") no-repeat 10px center / 14px; }
.app-nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.app-nav-group { margin-top: 2px; }
.app-nav-group > button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--app-radius-sm);
  background: transparent; color: var(--app-text); font-size: var(--app-fs-sm); font-weight: 600; text-align: left;
}
.app-nav-group > button:hover { background: var(--app-surface-2); }
.app-nav-group > button .app-nav-ico { width: 18px; text-align: center; color: var(--app-text-3); }
.app-nav-group > button .app-nav-caret { margin-left: auto; font-size: 11px; color: var(--app-text-3); transition: transform .15s; }
.app-nav-group.is-open > button .app-nav-caret { transform: rotate(90deg); }
.app-nav-items { display: none; list-style: none; margin: 2px 0 6px; padding: 0 0 0 20px; }
.app-nav-group.is-open .app-nav-items, .app-nav.is-filtering .app-nav-items { display: block; }
.app-nav-items a {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: var(--app-radius-sm);
  color: var(--app-text-2); text-decoration: none; font-size: var(--app-fs-sm); border-left: 2px solid var(--app-border);
}
.app-nav-items a:hover { color: var(--app-text); background: var(--app-surface-2); }
.app-nav-items a.is-active { color: var(--app-accent); background: var(--app-accent-soft); border-left-color: var(--app-accent); font-weight: 600; }
.app-nav-items .app-nav-num { color: var(--app-text-3); font-family: var(--app-font-mono); font-size: 11px; }
.app-nav-home {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border-radius: var(--app-radius-sm);
  color: var(--app-text); font-weight: 600; font-size: var(--app-fs-sm); text-decoration: none;
}
.app-nav-home:hover { background: var(--app-surface-2); color: var(--app-text); }
.app-nav-home.is-active { background: var(--app-accent-soft); color: var(--app-accent); }
.app-nav-empty { padding: 12px; color: var(--app-text-3); font-size: var(--app-fs-sm); }
.app-sidebar-foot { padding: 10px 16px; border-top: 1px solid var(--app-border); color: var(--app-text-3); font-size: var(--app-fs-xs); }

.app-main { padding-top: var(--app-header-h); padding-left: var(--app-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: padding-left .2s ease; }
.app-titlebar { display: flex; align-items: center; gap: 10px; padding: 12px 20px 0; min-height: 44px; }
.app-titlebar h1 { font-size: 1.0625rem; margin: 0; }
.app-titlebar .app-breadcrumb { color: var(--app-text-3); font-size: var(--app-fs-xs); }
.app-frame-wrap { flex: 1; display: flex; padding: 12px 16px 16px; }
.app-frame { flex: 1; width: 100%; min-height: calc(100vh - var(--app-header-h) - 72px); border: 0; border-radius: var(--app-radius); background: transparent; }

.app-backdrop { display: none; }
body.app-sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
body.app-sidebar-collapsed .app-main { padding-left: 0; }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--app-shadow-lg); }
  .app-main { padding-left: 0; }
  body.app-sidebar-open .app-sidebar { transform: none; }
  body.app-sidebar-open .app-backdrop { display: block; position: fixed; inset: var(--app-header-h) 0 0 0; z-index: 1015; background: rgba(15, 23, 42, .35); }
  .app-brand { min-width: 0; }
  .app-brand-name { display: none; }
  .app-titlebar { padding: 10px 12px 0; }
  .app-frame-wrap { padding: 8px; }
}
@media (max-width: 575.98px) {
  .app-chip { max-width: 44px; padding: 0 11px; }
  .app-chip .app-chip-text, .app-chip .fa-chevron-down { display: none; }
}

/* 5. Componentes ----------------------------------------------------------- */
/* Tarjeta de módulo */
.card { --bs-card-border-color: var(--app-border); --bs-card-border-radius: var(--app-radius); --bs-card-cap-bg: var(--app-surface); border-color: var(--app-border); box-shadow: var(--app-shadow); margin-bottom: var(--app-gap); }
.card-header { font-weight: 600; padding: .75rem 1rem; }
.card-body { padding: 1rem; }
.card-title { font-size: 1rem; font-weight: 600; color: var(--app-text); margin: 0 0 .75rem; padding: 0; }
.card-title span { color: var(--app-text-3); font-size: var(--app-fs-sm); font-weight: 400; }

/* Encabezado de página dentro de un módulo */
.app-page-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.app-page-header h1 { font-size: 1.125rem; margin: 0; }
.app-page-header .app-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Barra de filtros */
.app-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 12px; margin-bottom: 12px; background: var(--app-surface-2); border: 1px solid var(--app-border); border-radius: var(--app-radius); }

/* Tablas: encabezado sobrio, filas compactas, números alineados */
.table { --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-striped-bg: var(--app-surface-2); --bs-table-hover-bg: var(--app-accent-soft); font-size: var(--app-fs-sm); margin-bottom: 0; }
.table > thead th, .table > thead td {
  background: var(--app-surface-2); color: var(--app-text-2); font-weight: 600; font-size: var(--app-fs-xs);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border-bottom: 1px solid var(--app-border-strong); vertical-align: middle;
}
.table > :not(caption) > * > * { padding: .45rem .6rem; }
.table-primary { --bs-table-bg: var(--app-accent-soft); --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-accent-line); }
.table-responsive { border-radius: var(--app-radius-sm); }
td.num, th.num, .text-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pestañas (antes nav-tabs-bordered de NiceAdmin) */
.nav-tabs { --bs-nav-tabs-border-color: var(--app-border); --bs-nav-tabs-link-active-color: var(--app-accent); --bs-nav-tabs-link-active-border-color: transparent transparent var(--app-accent); gap: 4px; }
.nav-tabs-bordered { border-bottom: 1px solid var(--app-border); }
.nav-tabs .nav-link, .nav-tabs-bordered .nav-link {
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .6rem .9rem;
  color: var(--app-text-2); font-weight: 500; font-size: var(--app-fs-sm); background: transparent;
}
.nav-tabs .nav-link i, .nav-tabs-bordered .nav-link i { margin-right: 6px; }
.nav-tabs .nav-link:hover, .nav-tabs-bordered .nav-link:hover { color: var(--app-text); border-bottom-color: var(--app-border-strong); }
.nav-tabs .nav-link.active, .nav-tabs-bordered .nav-link.active { color: var(--app-accent); border-bottom-color: var(--app-accent); background: transparent; }

/* Indicadores (antes info-card/card-icon de NiceAdmin) */
.info-card h6, .app-kpi-value { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--app-text); font-variant-numeric: tabular-nums; }
.card-icon, .app-kpi-icon { width: 48px; height: 48px; flex: 0 0 48px; font-size: 22px; border-radius: 12px !important; background: var(--app-accent-soft); color: var(--app-accent); }
.dashboard .filter { position: absolute; right: 8px; top: 8px; }
.dashboard .activity { font-size: var(--app-fs-sm); }

/* Estados vacío y de carga */
.app-empty { padding: 32px 16px; text-align: center; color: var(--app-text-3); }
.app-empty i { font-size: 28px; display: block; margin-bottom: 8px; }
.app-loading-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; background: linear-gradient(90deg, transparent, var(--app-accent), transparent); background-size: 50% 100%; animation: app-load 1s linear infinite; display: none; }
body.is-loading .app-loading-bar { display: block; }
/* Ajuste 7N: mientras una acción está en curso no se puede volver a hacer clic (sin ventana de «Cargando») */
body.is-ocupado { cursor: progress; }
body.is-ocupado .container-fluid, body.is-ocupado .modal-content, body.is-ocupado main { pointer-events: none; }
@keyframes app-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* Insignias de estado */
.app-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--app-fs-xs); font-weight: 600; background: var(--app-surface-2); color: var(--app-text-2); border: 1px solid var(--app-border); }
.app-badge.is-ok { background: #e8f4ee; color: var(--app-ok); border-color: #bcddce; }
.app-badge.is-warn { background: #f6efe4; color: var(--app-warn); border-color: #e9d7bc; }
.app-badge.is-danger { background: #f9ecec; color: var(--app-danger); border-color: #edc5c5; }

/* Pantallas de acceso (login y selección de empresa) */
.app-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(1200px 500px at 10% -10%, var(--app-accent-soft), transparent 60%), var(--app-bg); }
.app-auth-card { width: 100%; max-width: 400px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; box-shadow: var(--app-shadow-lg); padding: 28px; }
.app-auth-card .app-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; text-align: center; }
.app-auth-card .app-auth-brand img { max-height: 56px; width: auto; }
.app-auth-card h1 { font-size: 1.125rem; margin: 0; }
.app-auth-card p.app-auth-sub { color: var(--app-text-2); font-size: var(--app-fs-sm); margin: 0; }
.app-auth-foot { margin-top: 16px; text-align: center; color: var(--app-text-3); font-size: var(--app-fs-xs); }

/* 6. Compatibilidad con clases heredadas de las vistas --------------------- */
.pagetitle { margin: 4px 0 12px; }
.pagetitle h1 { font-size: 1.125rem; margin: 0; }
.section { margin-bottom: 0; }
.container-fluid { padding-left: 12px; padding-right: 12px; }
body > .container-fluid, body > .card, body > section, body > .pagetitle { margin-top: 12px; }
.back-to-top { display: none !important; }
/* FooTable: alinear con la tabla propia */
.footable .footable-filtering th, .footable .footable-paging td { background: var(--app-surface) !important; }
.footable .footable-paging .pagination { margin: 8px 0 0; }
/* Select2 */
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-color: var(--app-border-strong); border-radius: var(--app-radius-sm); min-height: 31px; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--app-accent); }
.select2-dropdown { border-color: var(--app-border-strong); font-size: var(--app-fs-sm); }
/* SweetAlert2 */
.swal2-popup { font-family: var(--app-font) !important; font-size: .9rem !important; border-radius: 12px !important; }
.swal2-styled.swal2-confirm { background-color: var(--app-accent) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--app-accent-line) !important; }
/* jQuery UI autocompletar */
.ui-autocomplete { max-height: 320px; overflow-y: auto; font-family: var(--app-font); font-size: var(--app-fs-sm); border: 1px solid var(--app-border) !important; border-radius: var(--app-radius-sm); box-shadow: var(--app-shadow-lg); }
.ui-menu .ui-menu-item-wrapper.ui-state-active { background: var(--app-accent); border-color: var(--app-accent); }

/* Pantallas pequeñas dentro de los módulos */
@media (max-width: 767.98px) {
  .card-body { padding: .75rem; }
  .nav-tabs, .nav-tabs-bordered { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .nav-tabs .nav-link, .nav-tabs-bordered .nav-link { white-space: nowrap; }
  .table-responsive, .footable { -webkit-overflow-scrolling: touch; }
  .modal-dialog { margin: .5rem; }
}

/* 7. Utilidades ------------------------------------------------------------ */
.text-2 { color: var(--app-text-2) !important; }
.text-3 { color: var(--app-text-3) !important; }
.bg-surface { background: var(--app-surface) !important; }
.mono { font-family: var(--app-font-mono); }

/* 8. Impresión ------------------------------------------------------------- */
@media print {
  .app-header, .app-sidebar, .app-titlebar, .app-backdrop, .no-print, .btn, .nav-tabs, .nav-tabs-bordered, .app-filters { display: none !important; }
  .app-main { padding: 0 !important; }
  body { background: #fff; font-size: 11pt; }
  .card { box-shadow: none; border: 0; }
  .table > thead { display: table-header-group; }
  .table tr { break-inside: avoid; }
}

/* 9. Tabla propia (AppTabla, reemplaza a FooTable) ------------------------- */
.app-tabla-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.app-tabla-barra .form-control { max-width: 280px; }
.app-tabla-contador { color: var(--app-text-3); font-size: var(--app-fs-xs); margin-left: auto; }
.app-tabla-pie { display: flex; justify-content: flex-end; margin-top: 8px; }
.app-tabla th.app-ordenable { cursor: pointer; user-select: none; position: relative; padding-right: 1.4rem !important; }
.app-tabla th.app-ordenable::after { content: "\2195"; position: absolute; right: .45rem; color: var(--app-text-3); font-size: 11px; }
.app-tabla th[aria-sort="ascending"]::after { content: "\2191"; color: var(--app-accent); }
.app-tabla th[aria-sort="descending"]::after { content: "\2193"; color: var(--app-accent); }
.app-tabla .table-responsive { max-height: 70vh; }
.app-tabla .table > thead th { position: sticky; top: 0; z-index: 1; }

/* 10. Reportes de consulta (report-kit, oleada 4) ---------------------------- */
.rk-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.rk-barra .rk-buscar { max-width: 280px; }
.rk-contador { color: var(--app-text-3); font-size: var(--app-fs-xs); }
.rk-acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.rk-acciones .btn { border: 1px solid var(--app-border); }
.rk-cuerpo { max-height: 70vh; overflow: auto; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); }
.rk-tabla { margin: 0; }
.rk-tabla > thead th { position: sticky; top: 0; z-index: 2; }
.rk-tabla td, .rk-tabla th { white-space: nowrap; }
.rk-tabla .rk-num { text-align: right; font-variant-numeric: tabular-nums; }
.rk-tabla th.rk-ordenable { cursor: pointer; user-select: none; padding-right: 1.3rem !important; position: sticky; }
.rk-tabla th.rk-ordenable::after { content: "\2195"; position: absolute; right: .4rem; color: var(--app-text-3); font-size: 11px; }
.rk-tabla th[aria-sort="ascending"]::after { content: "\2191"; color: var(--app-accent); }
.rk-tabla th[aria-sort="descending"]::after { content: "\2193"; color: var(--app-accent); }
.rk-tabla tr.rk-grupo > th { background: var(--app-accent-soft); color: var(--app-text); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: var(--app-fs-sm); border-top: 1px solid var(--app-accent-line); }
.rk-tabla tr.rk-grupo.rk-nivel-1 > th { background: var(--app-surface-2); padding-left: 1rem; }
.rk-tabla tr.rk-subtotal > th, .rk-tabla tr.rk-subtotal > td { background: var(--app-surface-2); font-weight: 600; border-top: 1px solid var(--app-border-strong); }
.rk-tabla tr.rk-subtotal > th { text-align: right; }
.rk-tabla tfoot tr.rk-total > th, .rk-tabla tfoot tr.rk-total > td { position: sticky; bottom: 0; background: var(--app-surface); font-weight: 700; border-top: 2px solid var(--app-text); text-align: right; }
.rk-pie { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
.rk-pie-info { color: var(--app-text-3); font-size: var(--app-fs-xs); }
.app-estado { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--app-fs-xs); font-weight: 600; border: 1px solid transparent; }
.app-estado.ok { color: var(--app-ok); background: #e8f4ee; border-color: #bcddce; }
.app-estado.warn { color: var(--app-warn); background: #f8f2e9; border-color: #e9d7bc; }
.app-estado.danger { color: var(--app-danger); background: #f9ecec; border-color: #edc5c5; }
.app-estado.info { color: var(--app-info); background: #eaf2f8; border-color: #bed6ea; }
.app-filters .app-campo { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1 1 180px; }
.app-filters .app-campo label { font-size: var(--app-fs-xs); color: var(--app-text-2); font-weight: 600; margin: 0; }
.app-filters .app-campo-ancho { flex: 2 1 320px; }
.app-filters .app-botones { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
.app-filters .app-checks { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; min-height: 31px; }
.app-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.app-kpi { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.app-kpi > i { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--app-accent-soft); color: var(--app-accent); font-size: 16px; flex: none; }
.app-kpi .app-kpi-label { color: var(--app-text-2); font-size: var(--app-fs-xs); }
.app-kpi > div { min-width: 0; }
.app-kpi .app-kpi-valor { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-kpi .app-kpi-label i { font-size: 11px; color: var(--app-accent); margin-left: 2px; }
button.app-kpi { text-align: left; cursor: pointer; width: 100%; }
button.app-kpi:hover { border-color: var(--app-accent-line); }
.app-grafico svg { width: 100%; height: auto; display: block; }
.app-grafico .leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--app-fs-xs); color: var(--app-text-2); margin-bottom: 6px; }
.app-grafico .leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; background: var(--c); vertical-align: -1px; }
@media (max-width: 767.98px) {
  .rk-acciones { margin-left: 0; width: 100%; }
  .rk-acciones .btn { flex: 1 1 auto; }
  .rk-barra .rk-buscar { max-width: none; flex: 1 1 100%; }
  .rk-tabla > tbody > tr > td:first-child, .rk-tabla > thead > tr > th:first-child { position: sticky; left: 0; z-index: 1; background: var(--app-surface); box-shadow: 1px 0 0 var(--app-border); }
  .rk-tabla > thead > tr > th:first-child { z-index: 3; background: var(--app-surface-2); }
  .rk-cuerpo { max-height: none; }
}
.app-section-title { font-size: var(--app-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--app-text-2); margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--app-border); }

/* 11. Identidad visual v2 (ajuste 6A.1) -------------------------------------
   Más color en íconos, títulos e indicadores; tarjetas con relieve. Solo estilos:
   no cambia el marcado de las vistas. */
:root {
  --app-bg: #f1f4f9;
  --app-radius: 10px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .06);
  --app-ok-soft: #e8f4ee;
  --app-warn-soft: #f8f2e9;
  --app-danger-soft: #f9ecec;
  --app-info-soft: #eaf2f8;
}

/* Tarjetas */
.card { border: 0; box-shadow: var(--app-shadow); }
.card-header { background: var(--app-surface); border-bottom: 1px solid var(--app-border); color: var(--app-text); }
.card-header i, .card-title i { color: var(--app-accent); margin-right: 6px; }
.card-title { position: relative; padding-left: 10px; }
.card-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: var(--app-accent); }
.card .card-title.text-center::before, .modal .card-title::before { display: none; }

/* Títulos de página y de sección */
h1 > i, h2 > i, h3 > i, h4 > i, h5 > i, .app-page-header h1 > i, .pagetitle h1 > i { color: var(--app-accent); }
.app-page-header h1 > i, .app-page-header h1 > .fa-solid, .app-page-header h1 > .fa-regular {
  width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-accent-soft); font-size: 15px; margin-right: 8px; vertical-align: middle;
}
.app-section-title { color: var(--app-accent-strong); border-bottom: 2px solid var(--app-accent-line); }
.modal-title i { color: var(--app-accent); }

/* Íconos dentro de controles y botones */
.input-group-text { color: var(--app-accent); background: var(--app-accent-soft); border-color: var(--app-border-strong); }
.btn-light > i, .btn-light > .fa-solid, .btn-light > .fa-regular { color: var(--app-accent); }
.btn-outline-secondary { --bs-btn-color: var(--app-text-2); --bs-btn-border-color: var(--app-border-strong); }
.nav-tabs .nav-link i, .nav-tabs-bordered .nav-link i { color: var(--app-accent); }
.nav-tabs .nav-link.active, .nav-tabs-bordered .nav-link.active { font-weight: 600; }
label > i { color: var(--app-accent); }

/* Menú lateral: íconos de grupo con color */
.app-nav-group > button .app-nav-ico, .app-nav-home > i {
  width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-accent-soft); color: var(--app-accent); font-size: 13px; flex: none;
}
.app-nav-group.is-open > button { color: var(--app-accent-strong); }
.app-nav-group.is-open > button .app-nav-ico, .app-nav-home.is-active > i { background: var(--app-accent); color: #fff; }
.app-header { box-shadow: 0 1px 3px rgba(16, 24, 40, .05); }
.app-brand-name { color: var(--app-accent-strong); }

/* Tablas: encabezado con el color de acento */
.table > thead th, .table > thead td {
  background: var(--app-accent-soft); color: var(--app-accent-strong); border-bottom: 1px solid var(--app-accent-line);
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--app-accent-soft); }
.rk-cuerpo, .app-tabla .table-responsive { border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); }
.rk-tabla tfoot tr.rk-total > th, .rk-tabla tfoot tr.rk-total > td { border-top: 2px solid var(--app-accent); color: var(--app-accent-strong); }
.rk-acciones .btn i { color: var(--app-accent); }
.rk-acciones .rk-excel i { color: var(--app-ok); }
.rk-acciones .rk-imprimir i { color: var(--app-text-2); }

/* Filtros */
.app-filters { background: var(--app-surface); border: 1px solid var(--app-border); border-left: 3px solid var(--app-accent); }

/* Indicadores: tarjeta con franja e ícono de color; cada posición con su color */
.app-kpi {
  position: relative; overflow: hidden; border: 0; box-shadow: var(--app-shadow); padding: 14px 16px;
  --kpi: var(--app-accent); --kpi-soft: var(--app-accent-soft);
}
.app-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi); }
.app-kpi > i { width: 42px; height: 42px; border-radius: 10px; font-size: 18px; background: var(--kpi-soft); color: var(--kpi); }
.app-kpi .app-kpi-label { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; }
.app-kpi .app-kpi-valor { font-size: 1.3rem; color: var(--app-text); }
.app-kpis > .app-kpi:nth-child(4n+2), .app-kpis > :nth-child(4n+2) > .app-kpi { --kpi: var(--app-ok); --kpi-soft: var(--app-ok-soft); }
.app-kpis > .app-kpi:nth-child(4n+3), .app-kpis > :nth-child(4n+3) > .app-kpi { --kpi: var(--app-warn); --kpi-soft: var(--app-warn-soft); }
.app-kpis > .app-kpi:nth-child(4n+4), .app-kpis > :nth-child(4n+4) > .app-kpi { --kpi: var(--app-info); --kpi-soft: var(--app-info-soft); }
button.app-kpi:hover { box-shadow: var(--app-shadow-lg); }

/* Indicadores heredados (info-card) con el mismo aspecto */
.info-card { border: 0; }
.card-icon { color: var(--app-accent); }

/* Insignias de estado heredadas de Bootstrap: tonos suaves */
.badge.text-bg-warning { color: #5c3d07 !important; }

/* 12. Tarjeta del módulo y menú en acordeón (ajuste 6A.2) -------------------- */
.app-modulo {
  flex: 1; display: flex; flex-direction: column; margin: 12px 16px 16px; min-height: 0;
  background: var(--app-surface); border-radius: var(--app-radius); box-shadow: var(--app-shadow); overflow: hidden;
}
.app-modulo-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--app-border); }
.app-modulo-ico {
  width: 36px; height: 36px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-accent-soft); color: var(--app-accent); font-size: 15px;
}
.app-modulo-titulos { min-width: 0; }
.app-modulo-titulos .app-breadcrumb { color: var(--app-text-3); font-size: var(--app-fs-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.app-modulo-titulos h1 { font-size: 1.05rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-modulo-num { margin-left: auto; font-family: var(--app-font-mono); font-size: 11px; color: var(--app-text-3); border: 1px solid var(--app-border); border-radius: 999px; padding: 1px 8px; }
.app-modulo .app-frame-wrap { padding: 0; background: var(--app-bg); }
.app-modulo .app-frame { border-radius: 0; min-height: calc(100vh - var(--app-header-h) - 92px); }
@media (max-width: 991.98px) {
  .app-modulo { margin: 8px; }
  .app-modulo-head { padding: 8px 12px; }
}

/* Dentro del marco: la vista de una sola tarjeta se integra a la tarjeta del módulo */
html.app-embebido-unico body { background: var(--app-surface); }
html.app-embebido-unico .app-card-modulo { box-shadow: none; border: 0; border-radius: 0; margin: 0; }
html.app-embebido-unico body > .container-fluid, html.app-embebido-unico body > .card,
html.app-embebido-unico body > section, html.app-embebido-unico body > main { margin-top: 0; }
html.app-embebido-unico body > .container-fluid { padding-left: 4px; padding-right: 4px; }

/* Acordeón: apertura suave del grupo */
.app-nav-group.is-open .app-nav-items { animation: app-abrir-grupo .18s ease; }
@keyframes app-abrir-grupo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.app-ranking { display: flex; flex-direction: column; gap: 10px; }
.app-ranking-txt { display: flex; justify-content: space-between; gap: 8px; font-size: var(--app-fs-sm); margin-bottom: 3px; }
.app-ranking-nom { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-ranking-val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-ranking-val small { color: var(--app-text-3); font-weight: 400; }
.app-ranking-barra { height: 6px; background: var(--app-surface-2); border-radius: 999px; overflow: hidden; }
.app-ranking-barra > span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.app-kpi .app-kpi-sub { font-size: var(--app-fs-xs); color: var(--app-text-3); margin-top: 1px; }
.app-kpi .app-kpi-sub .sube { color: var(--app-ok); font-weight: 600; }
.app-kpi .app-kpi-sub .baja { color: var(--app-danger); font-weight: 600; }
.app-alerta-lista { list-style: none; margin: 0; padding: 0; }
.app-alerta-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--app-border); font-size: var(--app-fs-sm); }
.app-alerta-lista li:last-child { border-bottom: 0; }
.app-alerta-lista .num { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-kpis-admin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .app-kpis-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .app-kpis-admin { grid-template-columns: 1fr; } }
.app-kpi .app-kpi-valor { overflow: hidden; text-overflow: ellipsis; }


/* 13. Gráficos v2 (ajuste 6A.5): animación, degradados, resaltado y ventanita de valores ---------------- */
.app-grafico .ag-lienzo { position: relative; }
.app-grafico .ag-grid { stroke: #e9edf2; stroke-width: 1; stroke-dasharray: 3 4; }
.app-grafico .ag-grid.ag-cero { stroke: #cfd6df; stroke-dasharray: none; }
.app-grafico .ag-eje { font-size: 11px; fill: #7a8494; font-family: inherit; }
.app-grafico .ag-hit { fill: transparent; cursor: pointer; outline: none; }
.app-grafico .ag-hit.on, .app-grafico .ag-hit:focus-visible { fill: rgba(var(--app-accent-rgb), .06); }
.app-grafico .ag-hit-area.on, .app-grafico .ag-hit-area:focus-visible { fill: transparent; }
.app-grafico .ag-barra { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); pointer-events: none;
  transition: transform .75s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), opacity .2s ease; }
.app-grafico .ag-barra.ag-neg { transform-origin: 50% 0; }
.app-grafico.ag-visible .ag-barra { transform: scaleY(1); }
.app-grafico .ag-barra.ag-tenue { opacity: .35; }
.app-grafico .ag-linea { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.app-grafico.ag-visible .ag-linea { stroke-dashoffset: 0; }
.app-grafico .ag-relleno { opacity: 0; transition: opacity .9s ease .35s; pointer-events: none; }
.app-grafico.ag-visible .ag-relleno { opacity: 1; }
.app-grafico .ag-punto { fill: #fff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4);
  transition: opacity .3s ease var(--d, 0ms), transform .3s ease var(--d, 0ms); pointer-events: none; }
.app-grafico.ag-visible .ag-punto { opacity: 1; transform: scale(1); }
.app-grafico .ag-punto.on { transform: scale(1.6); transition-delay: 0ms; }
.app-grafico .ag-guia { stroke: var(--app-border-strong); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.app-grafico .ag-guia.on { opacity: 1; }
.ag-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 140px; padding: 8px 10px; border-radius: 8px;
  background: #1f2733; color: #fff; font-size: 12px; box-shadow: 0 6px 18px rgba(16,24,40,.22);
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.ag-tip.on { opacity: 1; transform: none; }
.ag-tip-t { font-weight: 700; margin-bottom: 4px; color: #cfd6df; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ag-tip-f { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ag-tip-f b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.ag-pt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
/* Dona */
.ag-dona .ag-dona-svg svg { max-width: 210px; margin: 0 auto; display: block; }
.ag-dona .ag-seg { transition: stroke-dasharray 1s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), stroke-width .2s ease, opacity .2s ease; cursor: pointer; outline: none; }
.ag-dona .ag-seg.on { stroke-width: 24; }
.ag-dona .ag-seg.ag-tenue { opacity: .35; }
.ag-dona .ag-centro { font-weight: 700; fill: var(--app-text); font-family: inherit; }
.ag-dona .ag-centro-sub { font-size: 10px; fill: #7a8494; font-family: inherit; }
.ag-leyenda-dona { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.ag-ley { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 5px 8px; border-radius: 6px;
  font-size: var(--app-fs-sm); color: var(--app-text); text-align: left; cursor: pointer; }
.ag-ley:hover, .ag-ley.on, .ag-ley:focus-visible { background: var(--app-surface-2); }
.ag-ley-v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Ranking con posición */
.app-ranking-pos { width: 20px; height: 20px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-accent-soft); color: var(--app-accent-strong); font-size: 11px; font-weight: 700; }
.app-ranking-txt { align-items: center; }
/* Indicadores: aparición suave */
.app-kpi { animation: app-kpi-entrar .5s cubic-bezier(.2,.8,.2,1) both; }
.app-kpis > :nth-child(2) { animation-delay: .05s; } .app-kpis > :nth-child(3) { animation-delay: .1s; }
.app-kpis > :nth-child(4) { animation-delay: .15s; } .app-kpis > :nth-child(5) { animation-delay: .2s; } .app-kpis > :nth-child(6) { animation-delay: .25s; }
@keyframes app-kpi-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.app-kpi { transition: box-shadow .2s ease, transform .2s ease; }
.app-kpi:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  .app-grafico .ag-barra, .app-grafico .ag-linea, .app-grafico .ag-relleno, .app-grafico .ag-punto, .ag-dona .ag-seg, .app-ranking-barra > span, .app-kpi { transition: none !important; animation: none !important; }
}

/* 14. Estilo sobrio (ajuste 6A.8) -------------------------------------------
   Criterio para todo el proyecto: superficies blancas con líneas finas, rótulos en
   texto normal, color solo cuando informa, sin animaciones decorativas.
   Encabezados de tabla: SIEMPRE con los colores del de «Detalle de pedido»
   (tono suave de la marca de fondo, tono fuerte de la marca en el texto). */
:root { --app-shadow: none; }
.card { box-shadow: none; border: 1px solid var(--app-border); }
.card-title { padding-left: 0; }
.card-title::before { display: none; }
.card-header i, .card-title i { color: var(--app-text-3); }

/* Encabezados de tabla y de listas con columnas (mismo aspecto en todo el sistema) */
.table > thead th, .table > thead td, .app-thead,
.rk-tabla > thead > tr > th:first-child {
  background: var(--app-accent-soft); color: var(--app-accent-strong); border-bottom: 1px solid var(--app-accent-line);
  font-weight: 600; font-size: var(--app-fs-xs); text-transform: uppercase; letter-spacing: .03em;
}
.table-primary > th, .table-primary > td, thead.table-primary th { background: var(--app-accent-soft) !important; color: var(--app-accent-strong) !important; }

/* Títulos */
.app-page-header h1 > i, .app-page-header h1 > .fa-solid, .app-page-header h1 > .fa-regular {
  width: auto; height: auto; background: none; font-size: .95em; color: var(--app-text-3); margin-right: 8px;
}
.app-section-title { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--app-text); border-bottom: 1px solid var(--app-border); }
.modal-title i { color: var(--app-text-3); }
h1 > i, h2 > i, h3 > i, h4 > i, h5 > i { color: var(--app-text-3); }

/* Controles */
.input-group-text { color: var(--app-text-3); background: var(--app-surface-2); }
.btn-light > i, .btn-light > .fa-solid, .btn-light > .fa-regular, label > i { color: var(--app-text-3); }
.nav-tabs .nav-link i, .nav-tabs-bordered .nav-link i { color: inherit; opacity: .75; }
.app-filters { border-left: 1px solid var(--app-border); background: var(--app-surface); }

/* Menú lateral y tarjeta del módulo: íconos sin recuadro */
.app-nav-group > button .app-nav-ico, .app-nav-home > i { width: 18px; height: auto; background: none; color: var(--app-text-3); border-radius: 0; }
.app-nav-group.is-open > button .app-nav-ico, .app-nav-home.is-active > i { background: none; color: var(--app-accent); }
.app-header { box-shadow: none; }
.app-modulo { box-shadow: none; border: 1px solid var(--app-border); }
.app-modulo-ico { width: auto; height: auto; background: none; color: var(--app-text-3); font-size: 16px; }
.app-modulo-titulos .app-breadcrumb { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; }
.app-modulo-num { font-family: inherit; border: 0; padding: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.app-nav-group.is-open .app-nav-items { animation: none; }

/* Indicadores: una franja de datos con divisiones, sin íconos ni colores por posición */
.app-kpis { gap: 0; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); overflow: hidden; }
.app-kpi, .app-kpis > .app-kpi:nth-child(n), .app-kpis > :nth-child(n) > .app-kpi {
  --kpi: var(--app-text-3); --kpi-soft: transparent;
  border: 0; border-radius: 0; box-shadow: -1px 0 0 var(--app-border), 0 -1px 0 var(--app-border);
  padding: 12px 16px; animation: none; transform: none; background: var(--app-surface);
}
.app-kpi::before { display: none; }
.app-kpi > i { display: none; }
.app-kpi .app-kpi-label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--app-text-3); }
.app-kpi .app-kpi-valor { font-size: 1.35rem; font-weight: 600; color: var(--app-text); letter-spacing: -.01em; }
.app-kpi:hover { transform: none; box-shadow: -1px 0 0 var(--app-border), 0 -1px 0 var(--app-border); }
button.app-kpi:hover { background: var(--app-surface-2); }
.app-kpis + .app-kpis { margin-top: 12px; }

/* Estados (insignias): marca discreta */
.app-estado { border-radius: 4px; font-weight: 500; font-size: 12px; padding: 1px 7px; }
.app-estado.info { color: var(--app-text-2); background: var(--app-surface); border-color: var(--app-border-strong); }

/* Gráficos: rótulos en texto normal y ranking sin recuadros */
.ag-tip-t { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; }
.app-ranking-pos { width: 18px; background: none; color: var(--app-text-3); font-weight: 500; font-variant-numeric: tabular-nums; justify-content: flex-start; }

/* Autocompletar: sin desplazamiento horizontal; barra vertical fina */
.ui-autocomplete {
  max-height: 340px; overflow-y: auto; overflow-x: hidden; z-index: 1060; max-width: min(640px, calc(100vw - 16px));
  padding: 4px; border: 1px solid var(--app-border) !important; border-radius: 8px; background: var(--app-surface);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12); font-family: var(--app-font); font-size: 13.5px;
  scrollbar-width: thin; scrollbar-color: #c9d0da transparent;
}
.ui-autocomplete::-webkit-scrollbar { width: 6px; height: 0; }
.ui-autocomplete::-webkit-scrollbar-track { background: transparent; }
.ui-autocomplete::-webkit-scrollbar-thumb { background: #c9d0da; border-radius: 6px; }
.ui-autocomplete::-webkit-scrollbar-thumb:hover { background: #aab3bf; }
.ui-autocomplete .ui-menu-item { list-style: none; }
.ui-autocomplete .ui-menu-item-wrapper {
  padding: 7px 10px; border-radius: 6px; border: 0 !important; margin: 0 !important;
  white-space: normal; overflow-wrap: anywhere; color: var(--app-text); line-height: 1.35;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: var(--app-accent-soft) !important; color: var(--app-accent-strong) !important; border: 0 !important;
}

/* 15. Tarjetas (ajuste 6A.10) ------------------------------------------------
   Indicadores y bloques de datos vuelven a ser tarjetas separadas (no una tabla de celdas),
   con el mismo criterio sobrio: borde fino, sin sombra de color ni franjas. */
.app-kpis { gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.app-kpi, .app-kpis > .app-kpi:nth-child(n), .app-kpis > :nth-child(n) > .app-kpi {
  border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  padding: 14px 16px; background: var(--app-surface);
}
.app-kpi:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
button.app-kpi:hover { border-color: var(--app-border-strong); background: var(--app-surface); }
.app-kpi .app-kpi-valor { font-size: 1.4rem; }

/* Bloques de datos en tarjetas: rótulo arriba, valor abajo (clase reutilizable) */
.app-datos-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; }
.app-datos-tarjetas > div { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--app-border); border-radius: 10px;
  background: var(--app-surface); padding: 10px 12px; min-width: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.app-datos-tarjetas dt { font-size: 12px; font-weight: 400; color: var(--app-text-3); margin: 0; }
.app-datos-tarjetas dd { font-size: 14px; font-weight: 500; color: var(--app-text); margin: 0; overflow-wrap: anywhere; line-height: 1.35; font-variant-numeric: tabular-nums; }
.app-datos-tarjetas dd.neg { color: #a8322f; }
.app-datos-tarjetas dd .de { color: var(--app-text-3); font-weight: 400; }

/* 16. Calendario (jQuery UI datepicker) con los colores del sistema (ajuste 6A.16) ---------- */
.ui-datepicker {
  width: 17.5rem; padding: 10px; z-index: 1070 !important; margin-top: 4px;
  background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .14); font-family: var(--app-font) !important; font-size: 13px; color: var(--app-text);
}
.ui-datepicker .ui-datepicker-header {
  position: relative; padding: 2px 0 8px; margin-bottom: 4px;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--app-border) !important; border-radius: 0 !important; color: var(--app-text) !important;
}
.ui-datepicker .ui-datepicker-title { margin: 0 34px; line-height: 30px; text-align: center; font-weight: 600; font-size: 14px; text-transform: capitalize; }
.ui-datepicker .ui-datepicker-title select { font-size: 13px; padding: 2px 4px; border: 1px solid var(--app-border-strong); border-radius: 6px; background: var(--app-surface); color: var(--app-text); margin: 0 2px; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  top: 2px !important; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: none !important; border: 0 !important;
}
.ui-datepicker .ui-datepicker-prev { left: 0 !important; } .ui-datepicker .ui-datepicker-next { right: 0 !important; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: var(--app-surface-2) !important; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: none !important; }
.ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -3px;
  border: solid var(--app-text-2); border-width: 0 0 2px 2px; transform: rotate(45deg);
}
.ui-datepicker .ui-datepicker-next::before { margin-left: -5px; transform: rotate(-135deg); }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled, .ui-datepicker .ui-datepicker-next.ui-state-disabled { opacity: .3; cursor: default; }
.ui-datepicker table { width: 100%; margin: 0; font-size: 13px; border-collapse: separate; border-spacing: 2px; }
.ui-datepicker th { padding: 6px 0 4px; font-weight: 600; font-size: 11.5px; color: var(--app-text-3); text-transform: none; background: none !important; border: 0 !important; }
.ui-datepicker td { padding: 0; border: 0 !important; }
.ui-datepicker td a, .ui-datepicker td span {
  display: block; text-align: center !important; padding: 0 !important; height: 32px; line-height: 32px; border-radius: 8px;
  border: 1px solid transparent !important; background: none !important; color: var(--app-text) !important; font-weight: 500;
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.ui-datepicker td a:hover { background: var(--app-surface-2) !important; }
.ui-datepicker td.ui-datepicker-today a { border-color: var(--app-accent-line) !important; color: var(--app-accent-strong) !important; font-weight: 600; }
.ui-datepicker td a.ui-state-active, .ui-datepicker td.ui-datepicker-current-day a {
  background: var(--app-accent) !important; color: #fff !important; border-color: var(--app-accent) !important; font-weight: 600;
}
.ui-datepicker td.ui-datepicker-other-month a, .ui-datepicker td.ui-datepicker-other-month span { color: var(--app-text-3) !important; }
.ui-datepicker td.ui-state-disabled span, .ui-datepicker td.ui-state-disabled { opacity: 1 !important; }
.ui-datepicker td.ui-state-disabled span { color: #c3c9d2 !important; }
.ui-datepicker td.ui-datepicker-week-end a:not(.ui-state-active) { color: var(--app-text-2) !important; }
.ui-datepicker .ui-datepicker-buttonpane { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--app-border) !important; background: none; }
.ui-datepicker .ui-datepicker-buttonpane button {
  margin: 0 0 0 6px; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; opacity: 1;
  background: var(--app-surface) !important; border: 1px solid var(--app-border-strong) !important; color: var(--app-text) !important;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-priority-primary { background: var(--app-accent) !important; border-color: var(--app-accent) !important; color: #fff !important; }
input.hasDatepicker { cursor: pointer; background-color: var(--app-surface); }
input.hasDatepicker[readonly] { background-color: var(--app-surface) !important; }

/* 17. Pantallas de acceso (ajuste 6B.5): el diseño original, un poco más grande y adaptado al celular ----- */
.app-auth { padding: 32px 16px; }
.app-auth-card { max-width: 460px; padding: 40px 40px 32px; border-radius: 16px; }
.app-auth-card .app-auth-brand { gap: 10px; margin-bottom: 26px; }
.app-auth-card .app-auth-brand img { max-height: 72px; max-width: 260px; }
.app-auth-card h1 { font-size: 1.4rem; font-weight: 600; }
.app-auth-card p.app-auth-sub { font-size: 14.5px; }
.app-auth-card .form-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.app-auth-card .input-group-text { min-width: 46px; justify-content: center; font-size: 15px; }
.app-auth-card .form-control, .app-auth-card .form-select { height: 46px; font-size: 15px; }
.app-auth-card .btn { height: 46px; font-size: 15px; font-weight: 500; }
.app-auth-card .form-check-label, .app-auth-card .small { font-size: 14px !important; }
.app-auth-foot { margin-top: 20px; font-size: 12.5px; }
/* Celular: la tarjeta ocupa el ancho, campos de 16 px (el teléfono no hace zoom al escribir) */
@media (max-width: 575.98px) {
  .app-auth { place-items: start center; padding: 20px 12px 28px; }
  .app-auth-card { max-width: none; padding: 28px 20px 24px; border-radius: 14px; margin-top: 4vh; }
  .app-auth-card .app-auth-brand img { max-height: 60px; }
  .app-auth-card h1 { font-size: 1.3rem; }
  .app-auth-card .form-control, .app-auth-card .form-select { height: 50px; font-size: 16px; }
  .app-auth-card .btn { height: 50px; font-size: 16px; }
  .app-auth-card .form-check-input { width: 1.2em; height: 1.2em; }
}