/* ==========================================================================
   Sirius — tema visual "Jupiter" (pastel índigo, barra lateral clara, tablas y chips redondeados).
   Los modales se abren/cierran con :target (anclas de URL), sin JS propio.
   Los listados usan DataTables (jQuery, vía CDN) para paginado/búsqueda/orden.
   ========================================================================== */

:root {
  /* Paleta "Jupiter" (tema pastel índigo). Los nombres --sap-* se conservan para no tocar el resto del CSS. */
  --sap-shell: #4b5167;
  --sap-shell-dark: #2f3445;
  --sap-brand: #5f6fd6;
  --sap-brand-dark: #4a59bd;
  --sap-brand-soft: #e8ebfd;
  --sap-success: #1e7048;
  --sap-success-bg: #d8f3e4;
  --sap-warning: #a4541a;
  --sap-warning-bg: #ffe5d1;
  --sap-danger: #a3303e;
  --sap-danger-bg: #ffdde0;
  --sap-info: #1d5a8c;
  --sap-info-bg: #d9ecff;
  --sap-yellow: #7a6200;
  --sap-yellow-bg: #fff3c4;
  --sap-violet: #6040a8;
  --sap-violet-bg: #ece1ff;
  --sap-black: #ffffff;
  --sap-black-bg: #2f3445;
  --sap-bg: #f6f7fb;
  --sap-surface: #ffffff;
  --sap-border: #e7e9f2;
  --sap-border-input: #dfe2ee;
  --sap-text: #2f3445;
  --sap-text-muted: #7b8196;
  --sap-sidebar: #fbfbfe;
  --sap-hover: #f0f1f8;
  --sap-row-hover: #f6f7fe;
  --sap-thead: #fafbfe;
  --sap-radius: 10px;
  --sap-radius-card: 14px;
  --sap-shadow: 0 1px 2px rgba(47, 52, 69, .04), 0 4px 14px rgba(47, 52, 69, .05);
  --sap-focus: 0 0 0 .2rem rgba(95, 111, 214, .15);
  --sirius-navy: #2f3445;
  --sirius-orange: #e8703a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--sap-bg);
  color: var(--sap-text);
  font-size: 14px;
}

a { color: var(--sap-brand-dark); text-decoration: none; }
a:hover { color: #3a47a3; text-decoration: underline; }

/* ---------- Shell bar (barra superior) ---------- */

.shell-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(246, 247, 251, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sap-border);
  color: var(--sap-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  min-height: 56px;
}

.shell-bar .shell-title {
  font-weight: 650;
  font-size: 16px;
  color: var(--sap-text);
}

.shell-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.shell-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.login-card {
  max-width: 400px;
  margin: 60px auto;
  padding: 2rem;
  border-radius: var(--sap-radius-card);
  box-shadow: var(--sap-shadow);
}

body:has(.login-card) {
  background: radial-gradient(circle at 15% 15%, #e3e7ff 0, transparent 45%), radial-gradient(circle at 85% 85%, #f1e4ff 0, transparent 45%), var(--sap-bg);
  background-attachment: fixed;
}

.login-logo {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

.shell-bar .shell-user {
  color: var(--sap-text-muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icono-usuario { flex-shrink: 0; color: var(--sap-brand); }

.selector-estacion { margin: 0; display: inline-flex; }
.selector-estacion select {
  max-width: 240px; padding: 5px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  color: var(--sap-text); background: #fff; border: 1px solid var(--sap-border-input);
  border-radius: var(--sap-radius);
}
.selector-estacion select:focus { outline: none; border-color: #aeb7f3; box-shadow: var(--sap-focus); }
.selector-estacion select option { color: var(--sap-text); background: #fff; }

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover { text-decoration: none; }

/* ---------- Menú lateral izquierdo, agrupado por módulo (claro, estilo Jupiter) ---------- */

.app-body {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 56px);
}

.shell-nav {
  background: var(--sap-sidebar);
  border-right: 1px solid var(--sap-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 250px;
  flex-shrink: 0;
  padding: 14px 12px 24px;
  /* Fijo bajo la barra superior: al hacer scroll solo se mueve el contenido, y si el menú es más alto que la pantalla scrollea por sí solo. */
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-single {
  display: block;
  color: #4b5167;
  font-weight: 500;
  padding: 9px 12px;
  font-size: 13px;
  border-radius: var(--sap-radius);
}

.nav-single:hover {
  background: var(--sap-hover);
  color: #4b5167;
  text-decoration: none;
}

.nav-single.active {
  background: var(--sap-brand-soft);
  color: var(--sap-brand-dark);
  text-decoration: none;
}

.nav-group {
  border-top: none;
}

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--sap-radius);
  color: #4b5167;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.nav-group-label i {
  margin-right: 10px;
  font-size: 1.05rem;
  color: #8a90a6;
  vertical-align: -1px;
}

.nav-group-label:hover {
  background: var(--sap-hover);
}

.nav-caret {
  font-size: 10px;
  color: #8a90a6;
  transition: transform 0.15s ease;
}

.nav-toggle:checked ~ .nav-group-label {
  color: var(--sap-brand-dark);
}

.nav-toggle:checked ~ .nav-group-label i {
  color: var(--sap-brand);
}

.nav-toggle:checked ~ .nav-group-label .nav-caret {
  transform: rotate(90deg);
  color: var(--sap-brand);
}

.nav-submenu {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px;
}

.nav-toggle:checked ~ .nav-submenu {
  display: flex;
}

.nav-submenu a {
  color: #5a6178;
  padding: 7px 12px 7px 40px;
  font-size: 13px;
  border-radius: var(--sap-radius);
}

.nav-submenu a:hover {
  background: var(--sap-hover);
  color: #4b5167;
  text-decoration: none;
}

.nav-submenu a.active {
  background: var(--sap-brand-soft);
  color: var(--sap-brand-dark);
  font-weight: 600;
  text-decoration: none;
}

/* Submenú anidado (ej. Legales dentro de RRHH): mismo acordeón, un nivel más indentado. */
.nav-submenu .nav-group {
  border-top: none;
}

.nav-submenu .nav-group-label {
  padding-left: 40px;
  font-weight: 500;
}

.nav-submenu .nav-submenu a {
  padding-left: 54px;
}

/* Módulo sin permisos: el ítem se sigue viendo (no se oculta), pero atenuado y sin navegar.
   El grupo entero se atenúa solo cuando ninguno de sus ítems está habilitado, y aun así se
   puede desplegar para ver qué contiene. */
.nav-submenu a.deshabilitado,
.nav-submenu a.deshabilitado:hover {
  color: #b3b8c9;
  background: none;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-group-label.deshabilitado {
  color: #b3b8c9;
}

.nav-group-label.deshabilitado i {
  color: #c9cddb;
}

/* ---------- Layout de contenido ---------- */

.page-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 20px 24px;
}

.page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.page-header h1 {
  font-size: 1.15rem;
  font-weight: 650;
  margin: 0;
  color: var(--sap-shell-dark);
}

.page-header label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sap-text);
}

.page-header input[type="date"],
.page-header input[type="month"] {
  padding: 6px 10px;
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--sap-text);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filtro-fecha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filtro-fecha label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sap-text);
}

.filtro-fecha input[type="date"],
.filtro-fecha input[type="month"],
.filtro-fecha select {
  padding: 6px 10px;
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--sap-text);
  background: var(--sap-surface);
}

.card {
  position: relative;
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius-card);
  box-shadow: var(--sap-shadow);
  padding: 18px;
  margin-bottom: 16px;
}

/* ---------- Permisos por usuario ---------- */

.permisos-app-titulo {
  margin: 0 0 12px;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--sap-shell-dark);
}

.permisos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.permisos-modelo h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--sap-text-muted);
  text-transform: capitalize;
}

.permisos-item {
  display: block;
  font-size: 13px;
  padding: 2px 0;
  cursor: pointer;
}

.permisos-item input {
  margin-right: 6px;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--sap-radius);
  border: 1px solid var(--sap-border);
  background: var(--sap-surface);
  color: var(--sap-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}

.btn:hover { background: var(--sap-hover); color: var(--sap-text); text-decoration: none; }

.btn-primary {
  background: var(--sap-brand);
  border-color: var(--sap-brand);
  color: #fff;
}
.btn-primary:hover { background: var(--sap-brand-dark); border-color: var(--sap-brand-dark); color: #fff; }

.btn-success { background: #198754; border-color: #198754; color: #fff; }
.btn-success:hover { background: #157347; border-color: #157347; color: #fff; }
.btn-danger { background: #dc3545; border-color: #dc3545; color: #fff; }
.btn-danger:hover { background: #bb2d3b; border-color: #bb2d3b; color: #fff; }
.btn-warning { background: #ffc107; border-color: #ffc107; color: #2f3445; }
.btn-warning:hover { background: #ffca2c; border-color: #ffca2c; color: #2f3445; }
.btn-outline-primary { background: transparent; border-color: #c9cffa; color: var(--sap-brand-dark); }
.btn-outline-primary:hover { background: var(--sap-brand); border-color: var(--sap-brand); color: #fff; }
.btn-soft { background: var(--sap-brand-soft); color: var(--sap-brand-dark); border-color: transparent; }
.btn-soft:hover { background: #d9defb; color: #3a47a3; }
.btn-light { background: #fff; border-color: var(--sap-border); }

.btn-sm { padding: 3px 10px; font-size: 12px; }

/* Acciones con color propio: ver adjuntos (celeste) y pagar (amarillo), en versión pastel. */
.btn-adjunto { background: #dcefff; border-color: #b9dcfb; color: #1d5a8c; }
.btn-adjunto:hover { background: #c8e5ff; color: #1d5a8c; }
.btn-pagar { background: #fff3c4; border-color: #f0dc8a; color: #7a6200; }
.btn-pagar:hover { background: #ffeda0; color: #7a6200; }

/* Acción sin permiso: NO se oculta, se muestra deshabilitada (ver appcore/permissions.py).
   `pointer-events: none` evita el clic en los <a> (que no soportan el atributo disabled) y de
   paso anula el :hover; los <button> además llevan el `disabled` nativo. */
.btn.deshabilitado,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(100%);
}

/* El tooltip "no tenés permisos" no llega al elemento por el pointer-events: se pone en este
   contenedor, que sí lo recibe. */
.accion-bloqueada {
  display: inline-block;
  cursor: not-allowed;
}

/* ---------- Tablas ---------- */

table.sap-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sap-surface);
  border: 0;
}

.sap-table th {
  background: var(--sap-thead);
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sap-text-muted);
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--sap-border);
}

.sap-table td {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--sap-border);
  font-size: 13px;
  vertical-align: middle;
}

.sap-table tbody tr:last-child td { border-bottom: 0; }
.sap-table tr:hover td { background: var(--sap-row-hover); }
.sap-table tfoot td { background: var(--sap-thead); font-weight: 600; border-top: 1px solid var(--sap-border); }

/* Variante compacta: para tablas con muchas columnas angostas (ej. Cheques), reduce
   padding/tipografía sin afectar el resto de las tablas del proyecto. */
.sap-table-compact th,
.sap-table-compact td { padding: 5px 6px !important; font-size: 11.5px; }

/* ---------- DataTables (buscador/paginado en español, sobre .sap-table) ----------
   Formato de listado "Jupiter": barra de búsqueda/acciones arriba, tabla sin bordes verticales y pie con
   el contador y el paginador (ver `dom` en static/js/sirius-datatables.js). */

.dataTables_wrapper {
  background: var(--sap-surface);
  font-size: 13px;
  color: var(--sap-text-muted);
}

.dataTables_wrapper .dt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 0 0 12px;
}

.dataTables_wrapper .dt-top .dt-acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dataTables_wrapper .dt-top .dt-acciones:empty { display: none; }

.dataTables_wrapper .dt-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 0 0;
  border-top: 1px solid var(--sap-border);
  font-size: 13px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--sap-text-muted);
  margin: 0;
  padding: 0;
  float: none;
  text-align: left;
}

.dataTables_wrapper .dataTables_info { padding: 0; }

.dataTables_wrapper .dataTables_filter label { font-weight: 500; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--sap-border-input);
  border-radius: var(--sap-radius);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--sap-text);
  margin-left: 6px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: #aeb7f3;
  box-shadow: var(--sap-focus);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--sap-border) !important;
  border-radius: var(--sap-radius) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--sap-text) !important;
  padding: 3px 10px !important;
  margin-left: 4px !important;
  font-size: 12.5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--sap-hover) !important;
  color: var(--sap-text) !important;
  border-color: var(--sap-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--sap-brand-soft) !important;
  border-color: #c9cffa !important;
  color: var(--sap-brand-dark) !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #fff !important;
  color: #b3b8c9 !important;
  border-color: var(--sap-border) !important;
  cursor: default;
}

.dataTables_wrapper .dataTables_processing {
  background: rgba(255, 255, 255, 0.9);
  color: var(--sap-brand-dark);
  border-radius: var(--sap-radius);
}

table.sap-table.dataTable { border: 0; border-collapse: collapse; margin: 0 !important; }
table.sap-table.dataTable.no-footer { border-bottom: 0; }
table.sap-table.dataTable thead th,
table.sap-table.dataTable thead td {
  background-color: var(--sap-thead);
  border-bottom: 1px solid var(--sap-border);
  padding: 10px 12px;
  color: var(--sap-text-muted);
}
table.sap-table.dataTable thead th.sorting,
table.sap-table.dataTable thead th.sorting_asc,
table.sap-table.dataTable thead th.sorting_desc { padding-right: 24px; cursor: pointer; }
table.sap-table.dataTable thead th.sorting:hover { color: var(--sap-brand-dark); }
table.sap-table.dataTable tbody tr { background-color: transparent; }
table.sap-table.dataTable tbody td { padding: 10px 12px; }
table.sap-table.dataTable tbody tr:hover > td { background: var(--sap-row-hover); }

/* Botón "Exportar" (Excel / CSV) que se agrega arriba de cada listado (ver sirius-datatables.js). */
.dt-exportar { position: relative; display: inline-block; }
.dt-exportar-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  box-shadow: var(--sap-shadow);
  padding: 4px;
  z-index: 50;
}
.dt-exportar.abierto .dt-exportar-menu { display: block; }
.dt-exportar-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--sap-text);
  cursor: pointer;
}
.dt-exportar-menu button:hover { background: var(--sap-brand-soft); color: var(--sap-brand-dark); }
.dt-exportar .btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Badges de estado ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-success { background: var(--sap-success-bg); color: var(--sap-success); }
.badge-warning { background: var(--sap-warning-bg); color: var(--sap-warning); }
.badge-danger { background: var(--sap-danger-bg); color: var(--sap-danger); }
.badge-info { background: var(--sap-info-bg); color: var(--sap-info); }
.badge-neutral { background: #edeef4; color: #5f657b; }
/* Amarillo FUERTE a propósito (no el pastel del resto de los badges): tiene que resaltar. */
.badge-yellow { background: #f2c94c; color: #5c4a00; }
.badge-violet { background: var(--sap-violet-bg); color: var(--sap-violet); }
.badge-black { background: var(--sap-black-bg); color: var(--sap-black); }
.badge-blue { background: #dde5ff; color: #3b4bb5; }
.badge-teal { background: #d3f3f0; color: #17766d; }
.badge-pink { background: #ffe0f0; color: #a1306f; }
.badge-orange { background: #ffe5d1; color: #a4541a; }

/* Utilidades del tema Jupiter: etiquetas ("chips"), íconos de KPI, vacíos y toasts. */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.chip-gray { background: #edeef4; color: #5f657b; }
.chip-green { background: #d8f3e4; color: #1e7048; }
.chip-blue { background: #dde5ff; color: #3b4bb5; }
.chip-purple { background: #ece1ff; color: #6040a8; }
.chip-yellow { background: #fff3c4; color: #7a6200; }
.chip-red { background: #ffdde0; color: #a3303e; }
.chip-orange { background: #ffe5d1; color: #a4541a; }
.chip-teal { background: #d3f3f0; color: #17766d; }
.chip-pink { background: #ffe0f0; color: #a1306f; }
.kpi { display: flex; gap: .85rem; align-items: center; height: 100%; }
.kpi .ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.kpi .val { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.kpi .lbl { color: var(--sap-text-muted); font-size: .8rem; }
.ico-indigo { background: #e6e9ff; color: #4f5fcf; }
.ico-mint { background: #d9f4e6; color: #247a52; }
.ico-peach { background: #ffe8d6; color: #b25a1c; }
.ico-rose { background: #ffe0e6; color: #b13a52; }
.ico-sky { background: #dcefff; color: #266a9e; }
.ico-lilac { background: #eee3ff; color: #6a45b5; }
.ico-lemon { background: #fff5c9; color: #8a6d00; }
.empty { text-align: center; color: var(--sap-text-muted); padding: 2.2rem 1rem; }
.empty i { font-size: 2rem; display: block; margin-bottom: .4rem; opacity: .6; }
.amount-pos { color: #1e7048; }
.amount-neg { color: #b0364a; }

/* ---------- Alertas de fraude (ver appconciliacion/fraude.py) ---------- */
.solo-impresion { display: none; }
.fraude-modal-box { border-top: 6px solid var(--sap-warning); max-width: 700px; }
.fraude-modal-box.fraude-critica,
.fraude-modal-box.fraude-alta { border-top-color: var(--sap-danger); }
.fraude-modal-box.fraude-media { border-top-color: var(--sap-warning); }
.fraude-modal-box.fraude-baja { border-top-color: var(--sap-info); }
.fraude-banda { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 18px; background: var(--sap-danger); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 0; }
.fraude-modal-box.fraude-media .fraude-banda { background: var(--sap-warning); }
.fraude-modal-box.fraude-baja .fraude-banda { background: var(--sap-info); }
.fraude-cabecera { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.fraude-titulo { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.fraude-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.fraude-puntaje { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sap-danger); color: #fff; line-height: 1; }
.fraude-puntaje strong { font-size: 28px; }
.fraude-puntaje small { font-size: 10px; font-weight: 600; opacity: .85; margin-top: 2px; }
.fraude-puntaje.fraude-media { background: var(--sap-warning); }
.fraude-puntaje.fraude-baja { background: var(--sap-info); }
.fraude-medidor { height: 8px; background: #eceef6; border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.fraude-medidor > span { display: block; height: 100%; background: var(--sap-danger); border-radius: 4px; transition: width .3s; }
.fraude-modal-box.fraude-media .fraude-medidor > span, .fraude-medidor.fraude-media > span { background: var(--sap-warning); }
.fraude-modal-box.fraude-baja .fraude-medidor > span, .fraude-medidor.fraude-baja > span { background: var(--sap-info); }
.fraude-medidor-fino { height: 5px; margin: 4px 0 0; min-width: 90px; }
.fraude-celda-puntaje { display: flex; align-items: center; gap: 8px; }
.fraude-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 6px; }
.fraude-kpis > div { background: var(--sap-bg); border: 1px solid var(--sap-border); border-radius: var(--sap-radius); padding: 8px 10px; }
.fraude-kpis dt { font-size: 11px; color: var(--sap-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.fraude-kpis dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; word-break: break-word; }
.fraude-seccion { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--sap-text-muted); }
.fraude-senales { list-style: none; margin: 0; padding: 0; }
.fraude-senales li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sap-border); font-size: 13px; }
.fraude-senales li:last-child { border-bottom: none; }
.fraude-puntos { font-weight: 700; color: var(--sap-danger); white-space: nowrap; }
.fraude-recomendacion { background: var(--sap-info-bg); border-left: 4px solid var(--sap-info); padding: 10px 12px; font-size: 13px; border-radius: 0 var(--sap-radius) var(--sap-radius) 0; }
.fraude-registros { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.fraude-registros li { padding: 3px 0; }
.fraude-nota { margin-top: 14px; }
.fraude-acciones { flex-wrap: wrap; }
.fraude-contexto { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; margin: 12px 0; }
.fraude-contexto dt { font-weight: 600; color: var(--sap-text-muted); }
.fraude-contexto dd { margin: 0; }
.fraude-meta { font-size: 12px; color: var(--sap-text-muted); }
.fraude-detalle-corta { font-size: 12px; color: var(--sap-text-muted); margin-top: 2px; }
@media (max-width: 600px) { .fraude-kpis { grid-template-columns: 1fr; } }

/* ---------- Aviso de gastos operativos que vencen hoy (ver appgastos/views.py) ---------- */
.vencimiento-modal-box { border-top: 6px solid var(--sap-warning); max-width: 560px; }
.vencimiento-icono { font-size: 28px; color: var(--sap-warning); margin-right: 8px; vertical-align: -4px; }
.vencimiento-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.vencimiento-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sap-border); }
.vencimiento-lista li:last-child { border-bottom: none; }
.vencimiento-lista .vencimiento-concepto { font-weight: 600; }
.vencimiento-lista .vencimiento-detalle { font-size: 12px; color: var(--sap-text-muted); }
.vencimiento-lista .vencimiento-monto { font-weight: 600; white-space: nowrap; }

/* ---------- Notificaciones de cheques (ver appcheques/views.py y static/js/cheques-notificaciones.js) ---------- */
.cheque-pendiente-modal-box { border-top: 6px solid var(--sap-info); max-width: 620px; }
.cheque-pendiente-detalle { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; margin: 12px 0; max-height: 50vh; overflow-y: auto; }
.cheque-pendiente-detalle dt { font-weight: 600; color: var(--sap-text-muted); white-space: nowrap; }
.cheque-pendiente-detalle dd { margin: 0; word-break: break-word; }
.cheque-rechazado-modal-box { border-top: 6px solid var(--sap-danger); max-width: 520px; }


.advertencia-fuera-de-rango {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--sap-warning);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  max-width: 180px;
}
.icono-advertencia { flex-shrink: 0; }

/* ---------- Formularios ---------- */

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5a6178;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="month"],
.form-group input[type="datetime-local"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--sap-border-input);
  border-radius: var(--sap-radius);
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--sap-text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #aeb7f3;
  box-shadow: var(--sap-focus);
}
.form-group .helptext { font-size: 12px; color: var(--sap-text-muted); }
.form-group .field-errors { color: var(--sap-danger); font-size: 12px; margin-top: 4px; }

/* El navegador no deja estilar el <input type="file"> en sí más allá del borde/padding de
   arriba — el botón "Seleccionar archivo" que dibuja es un elemento interno (shadow DOM) aparte,
   que se pinta con su propio look nativo del sistema operativo salvo que se le apunte con estos
   pseudo-elementos. `::file-selector-button` es el estándar (Chrome/Edge/Firefox/Safari
   recientes); `::-webkit-file-upload-button` es el equivalente viejo de motores Blink/WebKit —
   se repiten las reglas porque un selector no reconocido invalida toda la línea si van juntos. */
input[type="file"]::file-selector-button {
  padding: 6px 14px;
  margin-right: 10px;
  border: 1px solid var(--sap-brand);
  border-radius: var(--sap-radius);
  background: var(--sap-brand);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--sap-brand-dark); }
input[type="file"]::-webkit-file-upload-button {
  padding: 6px 14px;
  margin-right: 10px;
  border: 1px solid var(--sap-brand);
  border-radius: var(--sap-radius);
  background: var(--sap-brand);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button:hover { background: var(--sap-brand-dark); }

/* Select de edición rápida dentro de una celda de tabla (ej. modal de "montos corregidos a $0"
   del arqueo de cheques) — mismo look que `.form-group select` pero sin el width:100% (la celda
   tiene que achicarse al contenido, no ocupar todo el ancho de la columna). */
.selector-estado-cheque-cero {
  padding: 5px 8px;
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  font-size: 13px;
  font-family: inherit;
}

.adjuntar-de-a-uno-lista {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adjuntar-de-a-uno-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: var(--sap-bg);
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  font-size: 13px;
}
.adjuntar-de-a-uno-quitar {
  color: var(--sap-danger);
  font-weight: 700;
  text-decoration: none;
  padding: 0 4px;
}
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.modal-ayuda {
  background: var(--sap-info-bg);
  border-left: 4px solid var(--sap-info);
  border-radius: var(--sap-radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.modal-ayuda p { margin: 0 0 6px; font-weight: 600; color: var(--sap-shell-dark); }
.modal-ayuda ol { margin: 0; padding-left: 20px; }
.modal-ayuda li { margin-bottom: 2px; }

.comprobantes-galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.comprobante-galeria-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 160px;
}
.comprobante-galeria-item .comprobante-modal-imagen { max-height: 160px; }
.comprobante-galeria-item .comprobante-modal-pdf-aviso { padding: 10px 0; font-size: 40px; }
.comprobantes-seccion { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font-size: 14px; }
.comprobantes-seccion:first-child { margin-top: 0; }
.comprobantes-seccion small { color: var(--sap-text-muted); font-weight: 400; }

.comprobante-modal-imagen { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; }
.comprobante-modal-pdf-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 0;
  font-size: 60px;
  color: var(--sap-danger);
}

/* Vista previa de un único adjunto (ej. "Ver cheque" — a diferencia de
   `.comprobantes-galeria`/`.comprobante-galeria-item`, pensadas para una grilla de VARIOS
   comprobantes en miniatura, acá es un solo ítem centrado sin ancho fijo). */
.cheque-adjunto-preview {
  display: flex;
  justify-content: center;
}

/* ---------- Modales sin JavaScript (CSS :target) ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(47, 52, 69, 0.45);
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 40px;
  overflow-y: auto;
  z-index: 1000;
}

.modal-overlay:target { display: flex; }
.modal-overlay.abierto { display: flex; }

.modal-box {
  position: relative;
  background: var(--sap-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 100px);
  box-shadow: 0 20px 60px rgba(47, 52, 69, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Los modales de edición viven dentro de la celda de acciones de una tabla (columna `nowrap`): sin esto heredan
     white-space: nowrap y los textos largos (ej. la ayuda del vencimiento) no cortan línea como en el de alta. */
  white-space: normal;
}

/* Variante opcional (pasar modal_box_class='modal-box-ancho' a partials/_modal_form.html) para
   formularios largos que conviene mostrar en 2 columnas (ver .form-grid-2col) en vez de una
   columna angosta con scroll infinito — ej. el modal de "Nuevo cheque". */
.modal-box-ancho { max-width: 820px; }

/* Variante más ancha todavía, para modales con una tabla adentro (ej. "Cheques que quedaron en
   $0") en vez de un formulario — necesitan más aire horizontal para que las columnas no queden
   apretadas. */
.modal-box-xancho { max-width: 1100px; }

/* Más ancha aún (ej. "Gastos operativos pendientes": concepto + 4 botones de acción en la
   última columna no entraban sin scroll horizontal ni con `.modal-box-xancho`). */
.modal-box-xxancho { max-width: 1400px; }

/* Variante opcional (pasar form_class='form-grid-2col') para acomodar los .form-group en 2
   columnas; los campos "grandes" (textarea, archivo) y las acciones/errores generales siguen
   ocupando el ancho completo para no partirlos a la mitad. */
.form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid-2col .form-group:has(textarea),
.form-grid-2col .form-group:has(input[type="file"]) { grid-column: 1 / -1; }
.form-grid-2col > .field-errors,
.form-grid-2col > .form-actions { grid-column: 1 / -1; }

.overlay-carga {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--sap-radius);
  background: rgba(255, 255, 255, 0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}
.overlay-carga.visible { display: flex; }
.overlay-carga span { font-size: 13px; font-weight: 600; color: var(--sap-text); }

/* Variante para acciones de página (fuera de un .modal-box): en vez de cubrir el ancho
   completo del contenedor, tapa toda la pantalla con el mismo fondo oscuro que .modal-overlay
   y muestra una caja del mismo tamaño/estilo que un modal — mismo lenguaje visual en toda la app. */
.overlay-carga-pagina {
  position: fixed;
  background: rgba(47, 52, 69, 0.45);
  border-radius: 0;
  z-index: 1000;
}
.overlay-carga-caja {
  background: var(--sap-surface);
  border-radius: var(--sap-radius);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.spinner {
  width: 34px;
  height: 34px;
  border: 4px solid var(--sap-border);
  border-top-color: var(--sap-info);
  border-radius: 50%;
  animation: sirius-spin 0.8s linear infinite;
}
@keyframes sirius-spin { to { transform: rotate(360deg); } }

/* Tiempo estimado y cuenta regresiva del overlay de carga (ver static/js/carga-spinner.js). */
.carga-estimacion { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 260px; text-align: center; }
.carga-estimacion[hidden], .carga-barra[hidden] { display: none; }
.overlay-carga .carga-estimacion-texto { font-size: 12px; font-weight: 400; color: var(--sap-text-muted); }
.carga-cuenta { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--sap-shell-dark); }
.carga-barra { width: 100%; height: 6px; border-radius: 3px; background: var(--sap-border); overflow: hidden; }
.carga-barra-relleno { width: 0; height: 100%; background: var(--sap-info); transition: width 1s linear; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sap-border);
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: 15px;
  margin: 0;
  font-weight: 600;
}

.modal-close {
  color: var(--sap-text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
}
.modal-close:hover { color: var(--sap-text); text-decoration: none; }

.modal-body { padding: 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* ---------- Modal de mensajes (success / warning / danger / info) ---------- */

.message-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47, 52, 69, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  z-index: 1100;
}

.message-box {
  background: var(--sap-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-top: 4px solid var(--sap-info);
  overflow: hidden;
}

.message-box.msg-success { border-top-color: var(--sap-success); }
.message-box.msg-warning { border-top-color: var(--sap-warning); }
.message-box.msg-danger { border-top-color: var(--sap-danger); }
.message-box.msg-info { border-top-color: var(--sap-info); }

.message-box .message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 8px;
}

.message-box .message-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.message-box.msg-success .message-icon { background: var(--sap-success); }
.message-box.msg-warning .message-icon { background: var(--sap-warning); }
.message-box.msg-danger .message-icon { background: var(--sap-danger); }
.message-box.msg-info .message-icon { background: var(--sap-info); }

.message-box .message-title { font-weight: 600; font-size: 14px; }
.message-box .message-body { padding: 0 18px 18px 50px; font-size: 13px; color: var(--sap-text); }
.message-box .message-actions { padding: 12px 18px; border-top: 1px solid var(--sap-border); text-align: right; }

/* ---------- Utilidades ---------- */

.text-muted { color: var(--sap-text-muted); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }

/* Los montos ("$ 68.406.844,90") van en celdas alineadas a la derecha: el signo $ nunca debe quedar en una línea
   distinta a la cifra cuando la columna se angosta (pantalla o impresión). */
.sap-table td.text-right,
.sap-table th.text-right { white-space: nowrap; }
/* Celda con texto potencialmente muy largo (ej. "Período cobros" del panel Cobros vs Ventas,
   que puede combinar varios períodos ya importados) — se corta con "…" en vez de hacer wrap y
   estirar verticalmente toda la fila; el texto completo queda disponible en el `title` (tooltip
   nativo del navegador al pasar el mouse). */
.celda-truncada { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* DataTables fuerza `text-align:left` en thead/tfoot con un selector más específico
   (table.dataTable thead/tfoot th/td) que le gana a `.text-right` sola — se repite acá con
   más especificidad para que los encabezados y la fila de totales respeten la alineación. */
.sap-table thead th.text-right,
.sap-table tfoot td.text-right { text-align: right; }
.empty-state { padding: 30px; text-align: center; color: var(--sap-text-muted); }

.dato-movimiento { line-height: 1.4; }
.dato-movimiento .dato-principal { font-weight: 600; }
.dato-movimiento .dato-secundario { font-size: 11px; color: var(--sap-text-muted); }

.candidato-sugerido {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 4px 0;
}
.candidato-sugerido + .candidato-sugerido { border-top: 1px dashed var(--sap-border); }
/* flex-grow: el bloque de datos absorbe el espacio libre, dejando score/botón siempre a la derecha */
.candidato-info { flex: 1 1 auto; min-width: 0; }

/* ---------- Panel: KPIs (100% CSS, sin JavaScript) ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-left: 4px solid var(--sap-brand);
  border-radius: var(--sap-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-label { font-size: 12px; color: var(--sap-text-muted); }
.kpi-value { font-size: 24px; font-weight: 700; color: var(--sap-shell-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value-positivo { color: var(--sap-success); }
.kpi-value-negativo { color: var(--sap-danger); }
/* Saldo con una petrolera: negativo = a favor (verde), positivo = en contra (rojo). */
.saldo-a-favor { color: var(--sap-success); }
.saldo-en-contra { color: var(--sap-danger); }
.kpi-sub { font-size: 11.5px; color: var(--sap-text-muted); }

/* Modificador para paneles donde el ancho fijo de .kpi-grid corta montos largos (Cheques, Cash
   Flow): en vez de columnas parejas de 230px, cada card ocupa solo el ancho que necesita su
   propio contenido (flex-wrap en lugar de grid), sin truncar el valor con "…". */
.kpi-grid-ajustado { display: flex; flex-wrap: wrap; }
.kpi-grid-ajustado .kpi-card { flex: 0 1 auto; width: auto; min-width: 200px; }
.kpi-grid-ajustado .kpi-value { white-space: nowrap; overflow: visible; text-overflow: clip; }

/* Fila resaltada para movimientos que necesitan atención (ej. cuenta corriente pendiente de
   pago) — mismo criterio de color que .badge-warning/.kpi-value-negativo. */
.fila-pendiente-pago td { background: var(--sap-warning-bg); }

/* ---------- Panel: gráficos (Chart.js, ver static/js/sirius-charts.js) ---------- */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  /* Sin esto, los cards de una misma fila del grid se estiran para igualar la altura del más
     alto (comportamiento default de CSS Grid) — cada card debe ajustarse a su propio contenido. */
  align-items: start;
}

/* min-width: 0 — sin esto, un hijo ancho (ej. una tabla) fuerza el track de grid a expandirse
   más allá de su columna y termina visualmente afuera del card. */
.chart-card { padding: 16px; min-width: 0; }
.chart-card-full { grid-column: 1 / -1; }
/* Card "Resumen diario RD": ocupa el ancho de 3 cards de gráficos, alto ajustado a su contenido. */
.chart-card-triple { grid-column: span 3; }

/* Card que tiene que resaltar como una opción propia, separada del resto del panel (ej.
   "Registro de conciliación diaria"/"Informe gerencial") — mismo tono que `.chart-title` pero
   con un borde a la izquierda para que se note de un vistazo que es otra cosa, no un gráfico
   más de la grilla. */
.card-destacada { border-left: 4px solid var(--sap-brand); }
.form-inline-fin { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.form-inline-fin .form-group { margin: 0; }
/* RadioSelect de Django renderiza un <ul> con bullets por default — acá va en fila, sin bullets. */
.radio-inline-list ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.radio-inline-list li { display: flex; align-items: center; gap: 4px; }

/* ---------- Panel: card "Resumen diario RD" (calca el diseño de la planilla del surtidor) ---------- */

.rd-diario-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.rd-diario-header-celda {
  border: 1px solid var(--sap-shell-dark);
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  padding: 8px;
}
.rd-diario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.tabla-rd-bloque {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tabla-rd-bloque td {
  border: 1px solid var(--sap-shell-dark);
  padding: 5px 8px;
}
.tabla-rd-bloque .rd-color {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  width: 90px;
}
.rd-color-visa { background: #1060a8; color: #fff; }
.rd-color-master { background: #1e7d3c; color: #fff; }
.rd-color-amex { background: #f2a13a; color: #1a1a1a; }
.rd-color-mp { background: #ffe600; color: #1a1a1a; }
.rd-color-ticketcard { background: #c9d9ae; color: #1a1a1a; }
.rd-color-nave { background: #d7c3e8; color: #1a1a1a; }
.rd-color-pei { background: #f5a623; color: #1a1a1a; }
.rd-color-cabal { background: #8fa6c9; color: #1a1a1a; }
.rd-color-qr { background: #8b5a2b; color: #fff; }
.rd-color-app-ypf { background: #e0a638; color: #fff; }
.rd-color-cta-dni { background: #4a5fc1; color: #fff; }
.rd-color-puma-pris { background: #f4c242; color: #1a1a1a; }
.tabla-rd-bloque .rd-resultado { font-weight: 700; }
.tabla-rd-bloque .text-right { text-align: right; min-width: 90px; }
.chart-title { font-size: 14px; margin: 0 0 14px; color: var(--sap-shell-dark); }

/* Caja cuadrada para los donuts (ver crearDonut en sirius-charts.js, maintainAspectRatio:false):
   sin esto, el canvas toma el ancho de la columna del grid pero una altura fija en px, y el
   doughnut queda ovalado en vez de redondo cuando la columna es más ancha que 220px. */
.chart-donut-box { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin: 0 auto; }

/* Leyenda HTML externa (ver crearDonut/renderizarLeyendaHtml en sirius-charts.js) — usada cuando
   las etiquetas pueden ser largas (ej. descripciones reales de movimientos bancarios), para que
   el texto haga wrap normal en vez de cortarse contra el borde fijo del <canvas>. */
.chart-legend-html { list-style: none; margin: 14px 0 0; padding: 0; font-size: 12px; }
.chart-legend-html li { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; cursor: pointer; }
.chart-legend-item-oculto .chart-legend-texto { text-decoration: line-through; opacity: .55; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: 3px; }
.chart-legend-texto { word-break: break-word; }

.tabla-scroll { overflow-x: auto; }

.lista-partidas-pendientes { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lista-partidas-pendientes li + li { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sap-border); }

.alerta-descuadre p { font-size: 12.5px; margin: 10px 0; }

/* ---------- Select2 remoto (búsqueda AJAX, ver select2-remoto.js) ---------- */

.select2-container--default .select2-selection--single {
  height: auto;
  padding: 6px 10px;
  border: 1px solid var(--sap-border-input);
  border-radius: var(--sap-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 20px;
  font-size: 13px;
  color: var(--sap-text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #aeb7f3;
  box-shadow: var(--sap-focus);
}
.select2-dropdown { border-color: var(--sap-border); border-radius: var(--sap-radius); box-shadow: var(--sap-shadow); font-size: 13px; overflow: hidden; }
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--sap-border-input);
  border-radius: var(--sap-radius);
  padding: 5px 8px;
  font-size: 13px;
}
.select2-results__option .dato-movimiento { padding: 3px 0; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--sap-brand);
}
.select2-results__option--highlighted .dato-secundario { color: rgba(255, 255, 255, 0.85) !important; }

/* Impresión de vistas completas (ver botón "Imprimir" en templates que lo necesiten): oculta el
   shell de la app (barra superior, menú lateral) y cualquier control que no tenga sentido en
   papel (`.no-imprimir`, ej. el propio botón de imprimir), dejando solo el contenido de la
   página. `color-adjust`/`print-color-adjust` fuerzan a los navegadores a respetar los colores de
   fondo (ej. los bloques de color del card "Resumen diario RD") en vez de imprimirlos en blanco.
   Los `<canvas>` de Chart.js quedan con el ancho/alto en PÍXELES que tenían en pantalla (no se
   recalculan solos al imprimir) — se fuerzan a `max-width/height:100%` para que la hoja los achique
   en vez de cortarlos, y `chart.resize()` los redibuja nítidos a ese tamaño nuevo (ver
   sirius-charts.js, evento `beforeprint`). `page-break-inside:avoid` en cada card evita que un
   gráfico/tabla quede partido entre dos hojas. */
@media print {
  .shell-bar, .shell-nav, .no-imprimir { display: none !important; }
  .app-body, .page-content { margin: 0 !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .kpi-card { page-break-inside: avoid; break-inside: avoid; }
  /* Sin !important a propósito: si `chart.resize()` corrió (ver sirius-charts.js, evento
     beforeprint) el canvas ya tiene su propio estilo inline con el tamaño correcto para la hoja,
     y un estilo inline siempre le gana a esta regla externa aunque no sea !important — esto solo
     actúa de red de seguridad en el caso (raro) de que ese evento no se dispare. */
  canvas { max-width: 100%; height: auto; }
  /* "Imprimir tablero y resumen" (tablero mensual de tarjetas): el modal del resumen sale a continuación del
     tablero, en una hoja nueva. */
  body.imprimir-informe #modal-resumen-conciliacion {
    display: block !important; position: static; background: none; padding: 0; overflow: visible;
    page-break-before: always; break-before: page;
  }
  body.imprimir-informe #modal-resumen-conciliacion .modal-box {
    max-width: none; max-height: none; box-shadow: none; display: block;
  }
  body.imprimir-informe #modal-resumen-conciliacion .modal-body { overflow: visible; padding: 0; }
  /* Modal de alerta de fraude (botón "Imprimir", ver static/js/fraude-alertas.js): sale solo el modal, como en pantalla. */
  body.imprimiendo-fraude > *:not(#fraude-modal-overlay) { display: none !important; }
  body.imprimiendo-fraude #fraude-modal-overlay {
    display: block !important; position: static; background: none; padding: 0; overflow: visible;
  }
  body.imprimiendo-fraude #fraude-modal-box { max-width: none; max-height: none; box-shadow: none; display: block; }
  body.imprimiendo-fraude #fraude-modal-box .modal-body { overflow: visible; }
  body.imprimiendo-fraude .fraude-acciones, body.imprimiendo-fraude #fraude-cerrar { display: none !important; }
  /* Expediente del listado (modal por :target, dentro de .page-content). */
  body.imprimiendo-fraude-caso .page-content > *:not(.modal-overlay:target) { display: none !important; }
  body.imprimiendo-fraude-caso .modal-overlay:target {
    display: block !important; position: static; background: none; padding: 0; overflow: visible;
  }
  body.imprimiendo-fraude-caso .modal-overlay:target .modal-box { max-width: none; max-height: none; box-shadow: none; display: block; }
  body.imprimiendo-fraude-caso .modal-overlay:target .modal-body { overflow: visible; }
  body.imprimiendo-fraude-caso .fraude-acciones, body.imprimiendo-fraude-caso .modal-close,
  body.imprimiendo-fraude-caso .fraude-nota { display: none !important; }
  /* Cuenta corriente: imprime solo el listado de remitos que no coinciden entre el sistema y el RD. */
  body.imprimiendo-faltantes .page-content > *:not(#remitos-faltantes) { display: none !important; }
  body.imprimiendo-faltantes .solo-impresion { display: block !important; }
  body.imprimiendo-faltantes #remitos-faltantes { page-break-inside: auto; break-inside: auto; }
  body.imprimiendo-faltantes #remitos-faltantes .dataTables_filter,
  body.imprimiendo-faltantes #remitos-faltantes .dataTables_length,
  body.imprimiendo-faltantes #remitos-faltantes .dataTables_info,
  body.imprimiendo-faltantes #remitos-faltantes .dataTables_paginate { display: none !important; }
}

/* ---------- Tablero de RRHH (estilo Trello) — ver templates/apprrhh/tablero.html,
   static/js/tablero-rrhh.js ---------- */

.tablero-tabs { display: flex; gap: 4px; }
.tablero-tab-btn {
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--sap-text-muted);
}
.tablero-tab-btn.active { background: var(--sap-brand); color: #fff; border-color: var(--sap-brand); }
.tablero-seccion.oculta { display: none; }

.tablero-trello {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.columna-trello {
  background: #eef0f8;
  border-radius: 8px;
  padding: 10px;
  width: 270px;
  flex: 0 0 auto;
}

.columna-trello-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 10px;
}

.columna-trello-nombre { font-weight: 600; font-size: 14px; color: var(--sap-text); flex: 1; }
.columna-trello-contador {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--sap-text-muted);
}

.columna-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.columna-trello-menu-btn {
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--sap-radius);
  color: var(--sap-text-muted);
}
.columna-trello-menu-btn:hover { background: rgba(0, 0, 0, 0.08); }

.columna-trello-menu-panel {
  display: none;
  position: fixed;
  z-index: 500;
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px;
  width: 220px;
}
.columna-menu-toggle:checked ~ .columna-trello-menu-panel { display: flex; flex-direction: column; gap: 8px; }
.columna-renombrar-form { display: flex; gap: 6px; }
.columna-renombrar-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  padding: 4px 6px;
  font-size: 13px;
}

.columna-color-form { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0;
}
.color-swatch-btn:hover { border-color: rgba(0, 0, 0, 0.3); }
.color-swatch-btn-activo { border-color: var(--sap-brand); box-shadow: 0 0 0 2px var(--sap-brand); }

.lista-tarjetas { list-style: none; margin: 0; padding: 0; min-height: 48px; }

.tarjeta-trello {
  position: relative;
  background: var(--sap-surface);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  margin-bottom: 8px;
  cursor: grab;
}
.tarjeta-trello.sortable-ghost { opacity: 0.4; }

.tarjeta-trello-link { display: block; padding: 8px 10px; color: var(--sap-text); }
.tarjeta-trello-link:hover { text-decoration: none; background: rgba(0, 0, 0, 0.03); }

.tarjeta-trello-tipo {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}

.tarjeta-trello-contenido { font-size: 13.5px; margin-bottom: 4px; padding-right: 22px; overflow-wrap: anywhere; }
.tarjeta-trello-link[data-editar] { cursor: pointer; position: relative; }
.tarjeta-trello-editar {
  position: absolute; top: 4px; right: 26px; padding: 2px 5px; border-radius: var(--sap-radius);
  color: var(--sap-text-muted); line-height: 1; opacity: 0; transition: opacity 0.15s;
}
.tarjeta-trello:hover .tarjeta-trello-editar, .tarjeta-trello-editar:focus { opacity: 1; }
.tarjeta-trello-editar:hover { background: rgba(0, 0, 0, 0.08); color: var(--sap-text); text-decoration: none; }
@media (hover: none) { .tarjeta-trello-editar { opacity: 1; } }

/* ---------- Bloques de tarjeta (tipos de bloque estilo Notion) ---------- */
.bloque { margin: 0 0 4px; }
.bloque p { margin: 0 0 3px; }
.bloque-h1 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.bloque-h2 { font-size: 17px; font-weight: 700; line-height: 1.25; }
.bloque-h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.bloque-h4 { font-size: 13.5px; font-weight: 600; color: var(--sap-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.bloque-pagina-titulo { font-weight: 600; }
.bloque-pagina-contenido { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--sap-border); font-size: 12.5px; }
ul.bloque-lista, ol.bloque-lista { padding-left: 20px; margin: 0 0 4px; }
.bloque-tareas { list-style: none; padding: 0; margin: 0 0 4px; }
.bloque-tareas label { display: flex; align-items: flex-start; gap: 6px; margin: 0; cursor: pointer; font-weight: normal; }
.bloque-tareas input { margin-top: 3px; flex: 0 0 auto; }
.bloque-tareas li.hecha span { text-decoration: line-through; color: var(--sap-text-muted); }
.bloque-desplegable summary { cursor: pointer; font-weight: 500; }
.bloque-desplegable-detalle { padding: 4px 0 0 18px; }
.bloque-vacio { color: var(--sap-text-muted); font-style: italic; }
.bloque-codigo {
  background: #f2f3fa; border-radius: 4px; padding: 8px 10px; font-size: 12px; margin: 0 0 4px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bloque-codigo code { background: transparent; padding: 0; color: inherit; }
.bloque-cita { border-left: 3px solid var(--sap-text); margin: 0 0 4px; padding: 2px 0 2px 10px; }
.bloque-destacado { display: flex; gap: 8px; background: #f2f3fa; border-radius: 6px; padding: 8px 10px; }
.bloque-destacado > i { flex: 0 0 auto; }
.bloque-ecuacion { text-align: center; padding: 6px; background: #fafbfe; border-radius: 4px; }
.bloque-ecuacion code { font-family: 'Times New Roman', serif; font-style: italic; font-size: 15px; color: inherit; background: transparent; }
.bloque-sincronizado { border: 1px dashed #e0689a; border-radius: 6px; padding: 4px 6px; }
.bloque-sincronizado-etiqueta { font-size: 10.5px; color: #c2437d; margin-bottom: 2px; }

/* Menú de tipos de bloque del modal de tarjeta */
.modal-bloques { max-width: 620px; }
.selector-bloque { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; max-height: 300px; overflow-y: auto; border: 1px solid var(--sap-border); border-radius: var(--sap-radius); padding: 4px; }
.selector-bloque-opcion { display: flex; align-items: center; gap: 16px; margin: 0; padding: 5px 8px; border-radius: var(--sap-radius); cursor: pointer; font-weight: normal; }
.selector-bloque-opcion:hover { background: rgba(0, 0, 0, 0.06); }
.selector-bloque-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.selector-bloque-opcion i { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sap-border); border-radius: 4px; background: #fff; font-size: 15px; flex: 0 0 auto; }
.selector-bloque-opcion:has(input:checked) { background: rgba(95, 111, 214, 0.12); font-weight: 600; }
.selector-bloque-opcion:has(input:focus-visible) { outline: 2px solid var(--sap-primary, #5f6fd6); }

/* Contenido que se escribe ya con la forma del tipo elegido */
textarea.editor-estilo { width: 100%; resize: none; overflow: hidden; }
textarea.editor-h1 { font-size: 20px; font-weight: 700; }
textarea.editor-h2 { font-size: 17px; font-weight: 700; }
textarea.editor-h3 { font-size: 15px; font-weight: 600; }
textarea.editor-h4 { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
textarea.editor-pagina { font-weight: 600; }
textarea.editor-codigo { font-family: monospace; font-size: 12px; background: #f2f3fa; white-space: pre; overflow-x: auto; }
textarea.editor-cita { border-width: 0 0 0 3px; border-color: var(--sap-text); border-radius: 0; padding-left: 12px; }
textarea.editor-destacado { background: #f2f3fa; border-color: transparent; border-radius: 6px; padding-left: 12px; }
textarea.editor-ecuacion { font-family: 'Times New Roman', serif; font-style: italic; font-size: 16px; text-align: center; background: #fafbfe; }
.editor-lista { border: 1px solid var(--sap-border); border-radius: var(--sap-radius); padding: 4px 8px; counter-reset: fila; background: #fff; }
.editor-fila { display: flex; align-items: center; gap: 8px; counter-increment: fila; }
.editor-fila .editor-campo { flex: 1 1 auto; border: 0; outline: 0; background: transparent; padding: 4px 0; min-width: 0; width: auto; box-shadow: none; }
.editor-lista_vinetas .editor-fila::before { content: '\2022'; width: 18px; text-align: center; flex: 0 0 auto; }
.editor-lista_numerada .editor-fila::before { content: counter(fila) '.'; min-width: 18px; text-align: right; flex: 0 0 auto; }
.editor-lista_tareas .editor-check { flex: 0 0 auto; margin: 0; }
.editor-lista_tareas .editor-check:checked + .editor-campo { text-decoration: line-through; color: var(--sap-text-muted); }
.editor-lista_desplegable .editor-fila:first-child::before { content: '\25B6'; font-size: 10px; width: 18px; text-align: center; flex: 0 0 auto; }
.editor-lista_desplegable .editor-fila:first-child .editor-campo { font-weight: 500; }
.editor-lista_desplegable .editor-fila:not(:first-child) { padding-left: 26px; }

/* Editor de bloques de una Página (dentro del modal de edición) */
.pagina-bloques-editor { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sap-border); }
.pagina-bloques-editor h3 { margin: 0 0 8px; font-size: 15px; }
.pagina-bloque-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 8px; background: #fafbfe; border-radius: 6px; }
.pagina-bloque-item .pagina-bloque-form { flex: 1 1 auto; margin: 0; }
.pagina-bloque-eliminar { margin: 0; }
.pagina-bloque-nuevo { padding: 8px; border: 1px dashed var(--sap-border); border-radius: 6px; }
.pagina-bloque-form select, .pagina-bloque-form textarea { width: 100%; }

.tarjeta-trello-eliminar {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}
.tarjeta-trello:hover .tarjeta-trello-eliminar,
.tarjeta-trello-eliminar:focus-within { opacity: 1; }
@media (hover: none) { .tarjeta-trello-eliminar { opacity: 1; } }
.tarjeta-trello-eliminar-btn {
  border: 0;
  background: transparent;
  color: var(--sap-text-muted);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--sap-radius);
  line-height: 1;
}
.tarjeta-trello-eliminar-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.08); color: #bb0000; }
.tarjeta-trello-eliminar-btn:disabled { cursor: not-allowed; opacity: 0.5; }

.tarjeta-trello-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--sap-text-muted);
}

.columna-trello-add, .columna-trello-nueva {
  display: block;
  padding: 6px 8px;
  border-radius: var(--sap-radius);
  font-size: 13px;
  color: var(--sap-text-muted);
}
.columna-trello-add:hover, .columna-trello-nueva:hover {
  background: rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--sap-text);
}
.columna-trello-nueva {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  width: 270px;
  flex: 0 0 auto;
  text-align: left;
}

/* ---------- Calendario de pagos — ver templates/appcalendariopagos/calendario.html,
   static/js/calendario-pagos.js ---------- */

.calendario-pagos-leyenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--sap-text-muted);
  margin-bottom: 12px;
}
.calendario-pagos-leyenda i { font-size: 10px; margin-right: 4px; }
#calendario-pagos { max-width: 100%; }

/* Modal "Resumen de conciliación": informe en prosa dentro de una card */
.informe-card { background: var(--sap-surface); border: 1px solid var(--sap-border); border-left: 5px solid #2f3445; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 20px 26px 16px; }
.informe-card-cabecera { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--sap-border); }
.informe-card-icono { width: 44px; height: 44px; border-radius: 10px; background: #2f3445; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.informe-card-titulo { font-size: 17px; font-weight: 700; color: #2f3445; }
.informe-card-sub { font-size: 12.5px; color: var(--sap-text-muted); }
.informe-card-seccion h3 { font-size: 14.5px; margin: 20px 0 8px; color: #2f3445; display: flex; align-items: center; gap: 8px; }
.informe-card-numero { width: 22px; height: 22px; border-radius: 50%; background: #b8863a; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.informe-card-seccion p { margin: 0 0 9px 30px; line-height: 1.65; font-size: 13.5px; text-align: justify; }
.informe-card-pie { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--sap-border); font-size: 11.5px; color: var(--sap-text-muted); }

/* ---------- Calendario de RRHH: barra, leyenda y modal de eventos (ver static/js/calendario-rrhh.js) ---------- */

.calendario-barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.calendario-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--sap-text-muted); }
.calendario-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.calendario-leyenda-punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#calendario-tablero .fc-event { cursor: pointer; }
#calendario-tablero .fc-daygrid-day-frame { cursor: pointer; }

.evento-modal { overflow: hidden; }
.evento-modal [hidden] { display: none !important; }
.evento-franja { height: 6px; background: #1565c0; flex: 0 0 auto; transition: background 0.15s; }
.evento-modal .form-group input[type="time"], .evento-modal .form-group input[type="tel"], .evento-modal .form-group input[type="email"],
.evento-modal .form-group select:not(.select2-simple) {
  width: 100%; padding: 7px 10px; border: 1px solid var(--sap-border); border-radius: var(--sap-radius);
  font-size: 13px; font-family: inherit;
}
.evento-modal .form-group input:focus, .evento-modal .form-group select:focus, .evento-modal .form-group textarea:focus {
  outline: none; border-color: var(--sap-brand); box-shadow: 0 0 0 2px rgba(95, 111, 214, 0.15);
}
.evento-modal .evento-invalido { border-color: var(--sap-danger) !important; }
.evento-requerido { color: var(--sap-danger); }
.evento-errores { background: var(--sap-danger-bg); border-radius: var(--sap-radius); padding: 8px 12px; margin-bottom: 12px; }
.evento-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.evento-categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.evento-categoria {
  position: relative;
  display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 5px 12px;
  border: 1px solid var(--sap-border); border-radius: 999px; font-weight: 500 !important; font-size: 12.5px !important;
  cursor: pointer; background: var(--sap-surface); transition: border-color 0.12s, background 0.12s;
}
.evento-categoria:hover { border-color: var(--sap-brand); }
.evento-categoria input { position: absolute; opacity: 0; pointer-events: none; }
.evento-categoria-punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.evento-categoria:has(input:checked) { border-color: var(--sap-brand); background: var(--sap-info-bg); font-weight: 600 !important; }
.evento-categoria:has(input:focus-visible) { box-shadow: 0 0 0 2px rgba(95, 111, 214, 0.3); }
.evento-interruptor { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.evento-interruptor input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.evento-pie, .evento-confirmar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sap-border);
}
.evento-confirmar { background: var(--sap-danger-bg); color: var(--sap-danger); border-radius: var(--sap-radius); padding: 12px; font-size: 13px; font-weight: 600; }
.evento-pie-izquierda, .evento-pie-derecha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evento-auditoria { font-size: 11.5px; color: var(--sap-text-muted); }
/* Estado de pago de un evento de Tesorería: marca sobre el evento del calendario y píldora en el modal. */
.evento-marca {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-right: 4px;
  border-radius: 50%; background: #fff; font-size: 10px; line-height: 1; vertical-align: middle;
}
.evento-marca-pendiente, .evento-estado-pendiente { color: #ef6c00; }
.evento-marca-vencido, .evento-estado-vencido { color: #c62828; }
.evento-marca-pagado, .evento-estado-pagado { color: #2e7d32; }
.evento-estado-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.evento-estado-bloque { font-size: 13px; font-weight: 600; }
.evento-estado-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f2f3f5; }
.evento-estado-badge.evento-estado-pendiente { background: #fff1e0; }
.evento-estado-badge.evento-estado-vencido { background: #fde8e8; }
.evento-estado-badge.evento-estado-pagado { background: #e3f4e6; }
.evento-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 1200; max-width: 340px; padding: 11px 18px; border-radius: var(--sap-radius);
  background: var(--sap-shell-dark); color: #fff; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.evento-toast.visible { opacity: 1; transform: translateY(0); }
.evento-toast-error { background: var(--sap-danger); }

/* Aviso de gastos en efectivo pendientes (static/js/gastos-efectivo-pendientes.js) */
.efectivo-modal { overflow: hidden; }
.efectivo-franja { height: 6px; background: linear-gradient(90deg, #2e7d32, #66bb6a); flex: 0 0 auto; }
.efectivo-resumen {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px;
  background: var(--sap-success-bg); border: 1px solid #bfe6cf; border-radius: var(--sap-radius);
}
.efectivo-resumen-dato { display: flex; flex-direction: column; font-size: 12px; color: var(--sap-text-muted); }
.efectivo-resumen-dato strong { font-size: 20px; color: var(--sap-success); line-height: 1.2; }
.efectivo-resumen-texto { flex: 1 1 260px; margin: 0; font-size: 13px; color: var(--sap-text); }

/* Acciones masivas de Gastos operativos (static/js/gastos-masivo.js) */
.gastos-masivo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gastos-masivo form { margin: 0; }
.gastos-masivo-contador { font-size: 13px; color: var(--sap-text-muted); margin-right: 4px; }

/* Avisos de recordatorio de eventos (static/js/recordatorios-rrhh.js) */
.recordatorio-pila {
  position: fixed; top: 64px; right: 20px; z-index: 1300; width: 320px; max-width: calc(100vw - 40px);
  display: flex; flex-direction: column; gap: 10px;
}
.recordatorio-tarjeta {
  background: var(--sap-surface); border: 1px solid var(--sap-border); border-left: 4px solid var(--sap-brand);
  border-radius: var(--sap-radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); padding: 12px 14px;
}
.recordatorio-cabecera { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sap-brand); margin-bottom: 4px; }
.recordatorio-titulo { display: block; font-size: 14px; }
.recordatorio-detalle { font-size: 12.5px; color: var(--sap-text-muted); margin-top: 2px; }
.recordatorio-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
@media print { .recordatorio-pila { display: none !important; } }
@media (max-width: 640px) { .evento-fila { grid-template-columns: 1fr; } }

/* ---------- Categorías de eventos del calendario de RRHH ---------- */

.calendario-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.categorias-ayuda { margin: 0 0 12px; }
.categorias-lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.categoria-fila {
  display: grid; grid-template-columns: 40px 1fr 90px auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--sap-border); border-radius: var(--sap-radius); background: var(--sap-surface);
}
.categoria-fila input[type="color"] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--sap-border); border-radius: var(--sap-radius); background: #fff; cursor: pointer; }
.categoria-fila input[type="text"], .categorias-nueva input[type="text"] {
  width: 100%; padding: 7px 10px; border: 1px solid var(--sap-border); border-radius: var(--sap-radius); font-size: 13px; font-family: inherit;
}
.categoria-fila input:focus, .categorias-nueva input:focus { outline: none; border-color: var(--sap-brand); box-shadow: 0 0 0 2px rgba(95, 111, 214, 0.15); }
.categoria-uso { font-size: 12px; color: var(--sap-text-muted); white-space: nowrap; }
.categoria-acciones { display: flex; gap: 6px; }
.categoria-confirmar {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--sap-danger-bg); color: var(--sap-danger); border-radius: var(--sap-radius); padding: 8px 10px; font-size: 12.5px; font-weight: 600;
}
.categoria-confirmar[hidden], .categoria-acciones[hidden] { display: none !important; }
.categoria-vacia { padding: 14px; text-align: center; color: var(--sap-text-muted); border: 1px dashed var(--sap-border); border-radius: var(--sap-radius); }
.categorias-nueva { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sap-border); }
.categorias-nueva input[type="color"] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--sap-border); border-radius: var(--sap-radius); background: #fff; cursor: pointer; }
@media (max-width: 640px) { .categoria-fila { grid-template-columns: 40px 1fr; } .categoria-uso { grid-column: 1 / -1; } }

/* ---------- Tareas administrativas (apptareas) ---------- */
.tareas-nav-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tareas-nav-fecha input[type="date"],
.tareas-filtros input[type="search"], .tareas-filtros select,
.tareas-form input[type="time"], .tareas-form input[type="search"],
.tarea-form-inline textarea, .tarea-form-inline input[type="file"] {
  padding: 6px 10px;
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--sap-text);
  background: var(--sap-surface);
}
.tareas-nav-fecha input[type="date"] { width: auto; min-height: 30px; cursor: pointer; }
.tareas-nav-fecha input[type="date"]:focus, .tareas-filtros input:focus, .tareas-filtros select:focus {
  outline: none; border-color: var(--sap-brand); box-shadow: 0 0 0 2px rgba(95, 111, 214, .15);
}
.tareas-form input[type="time"] { width: 100%; }
.tareas-nav-dia { margin-left: 8px; color: var(--sap-text-muted); }
.tareas-aviso { margin-bottom: 14px; font-size: 13px; }
.tareas-nota { font-size: 12px; margin: 4px 0 14px; }
.tareas-progreso { height: 8px; background: #eceef6; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.tareas-progreso > div { height: 100%; background: var(--sap-success); border-radius: 999px; }
.efectividad-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .9em; }
.efectividad-alta { background: var(--sap-success-bg); color: var(--sap-success); }
.efectividad-media { background: var(--sap-warning-bg); color: var(--sap-warning); }
.efectividad-baja { background: var(--sap-danger-bg); color: var(--sap-danger); }
.tarea-atrasada td { background: rgba(198, 40, 40, .05); }
.tarea-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; color: var(--sap-text-muted); margin-top: 2px; }
.tareas-anteriores { border-left: 4px solid var(--sap-warning); }
.tareas-filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 16px; }
.tareas-dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.tarea-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px; margin: 0 0 12px; }
.tarea-datos dt { font-size: 11px; color: var(--sap-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tarea-datos dd { margin: 2px 0 0; font-size: 14px; word-break: break-word; }
.tarea-datos-ancho { grid-column: 1 / -1; }
.linea-tiempo { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--sap-border); display: grid; gap: 6px; }
.comentario-tarea { border-bottom: 1px solid var(--sap-border); padding: 8px 0; font-size: 13.5px; }
.comentario-meta { font-size: 11.5px; color: var(--sap-text-muted); margin-bottom: 2px; }
.archivo-tarea { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--sap-border); font-size: 13.5px; }
.tarea-form-inline { display: grid; gap: 8px; margin-top: 12px; }
.tarea-form-inline textarea { width: 100%; }
.tareas-form { max-width: 900px; }
.tareas-grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 20px; }
.tareas-grid-form [hidden] { display: none !important; }
.tareas-dias { grid-column: 1 / -1; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dia-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }

/* RRHH > Recibos de sueldo */
.recibos-filtros { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: flex-end; }
.recibos-filtros .form-group { min-width: 180px; }
.recibo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
@media (max-width: 1200px) { .recibo-layout { grid-template-columns: 1fr; } }
.recibo-vista { position: sticky; top: 12px; }
.recibo-vista h2 { font-size: 15px; margin: 0 0 8px; }
.recibo-seccion { margin-bottom: 14px; }
.recibo-seccion h3 { font-size: 14px; font-weight: 600; color: var(--sap-shell-dark); margin: 0 0 10px; }
.recibo-extras { width: 100%; border-collapse: collapse; }
.recibo-extras th { text-align: left; font-size: 12px; color: var(--sap-text-muted); padding: 4px; }
.recibo-extras select { min-width: 150px; }
.recibo-extras td { padding: 3px 4px; }
.recibo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; }
.recibo-check label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.recibo-extras input[type="text"], .recibo-extras input[type="number"], .recibo-extras select {
  width: 100%; min-width: 90px; padding: 7px 10px; border: 1px solid var(--sap-border-input);
  border-radius: var(--sap-radius); font-size: 13px; font-family: inherit; background: #fff;
}
.recibo { background: #fff; border: 1px solid #333; padding: 10px; font-size: 12px; color: #222; }
.recibo-cabecera { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 8px; border: 1px solid #333; padding: 8px; }
.recibo-titulo { text-align: center; font-weight: 700; font-size: 15px; }
.recibo-titulo small { display: block; font-weight: 400; font-size: 12px; }
.recibo-derecha { text-align: right; }
.recibo-empleado { display: grid; grid-template-columns: 2fr 1.2fr 0.8fr 1.6fr 1fr; gap: 6px; background: #f2f2f2; border: 1px solid #333; border-top: 0; padding: 6px 8px; }
.recibo-empleado span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #555; }
.recibo-conceptos { width: 100%; border-collapse: collapse; margin-top: 8px; border: 1px solid #333; }
.recibo-conceptos th, .recibo-conceptos td { padding: 3px 6px; border-bottom: 1px solid #e3e3e3; }
.recibo-conceptos thead th { background: #f2f2f2; border-bottom: 1px solid #333; font-size: 11px; }
.recibo-conceptos tfoot td { border-top: 1px solid #333; font-weight: 700; }
.recibo-conceptos .num { text-align: right; white-space: nowrap; }
.recibo-neto { display: flex; justify-content: space-between; align-items: center; background: #f2f2f2; border: 1px solid #333; border-top: 0; padding: 8px; font-size: 14px; }
.recibo-letras { font-weight: 700; margin: 8px 0 2px; }
.recibo-pago { margin: 0; color: #555; }
.recibo-aviso, .recibo-errores { margin-top: 8px; padding: 8px 10px; border-radius: 4px; background: #fff4e5; color: #8a4b00; }
.recibo-errores ul { margin: 6px 0 0 18px; padding: 0; }

/* Estado vacío de los listados (sin datos / sin resultados de búsqueda). */
table.sap-table.dataTable td.dataTables_empty {
  text-align: center;
  color: var(--sap-text-muted);
  padding: 2.2rem 1rem;
}
table.sap-table.dataTable td.dataTables_empty i { display: block; font-size: 2rem; margin-bottom: .4rem; opacity: .6; }

/* Cuentas Corrientes > Panel (consumo semanal vs. límite de crédito). */
.slots-rd { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.slot-rd { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.slot-rd-cargado { border-left: 4px solid #5fbf94; }
.slot-rd-titulo { font-weight: 650; font-size: 14px; }
.slot-rd-estacion { font-size: 12px; }
.texto-excedido { color: var(--sap-danger); }
.seccion-titulo { font-size: 15px; font-weight: 650; margin: 22px 0 10px; color: var(--sap-shell-dark); }

/* Aviso de tareas administrativas críticas (static/js/tareas-criticas.js) */
.criticas-modal { overflow: hidden; }
.criticas-franja { height: 6px; background: linear-gradient(90deg, #a3303e, #e57373); flex: 0 0 auto; }
.criticas-modal .modal-header h2 { color: var(--sap-danger); }
.criticas-resumen {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px;
  background: var(--sap-danger-bg); border: 1px solid #f2b8bd; border-radius: var(--sap-radius);
}
.criticas-resumen-dato { display: flex; flex-direction: column; font-size: 12px; color: var(--sap-text-muted); }
.criticas-resumen-dato strong { font-size: 20px; color: var(--sap-danger); line-height: 1.2; }
.criticas-resumen-texto { flex: 1 1 240px; margin: 0; font-size: 13px; color: var(--sap-text); }
.criticas-error { margin-bottom: 12px; padding: 9px 14px; border-radius: var(--sap-radius); background: var(--sap-danger-bg); color: var(--sap-danger); font-size: 13px; }
#criticas-lista { max-height: 50vh; overflow-y: auto; padding-right: 4px; }
.criticas-tarjeta { border: 1px solid var(--sap-border); border-left: 4px solid var(--sap-danger); border-radius: var(--sap-radius); padding: 14px 16px; margin-bottom: 12px; background: var(--sap-surface); }
.criticas-tarjeta-atrasada { background: rgba(198, 40, 40, .04); }
.criticas-tarjeta-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.criticas-titulo-tarea { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.criticas-seccion { font-size: 12px; color: var(--sap-text-muted); }
.criticas-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 18px; }
.criticas-dato { display: flex; flex-direction: column; font-size: 12px; color: var(--sap-text-muted); }
.criticas-dato strong { font-size: 13px; font-weight: 600; color: var(--sap-text); }
.criticas-observaciones { margin: 10px 0 0; padding: 8px 12px; background: var(--sap-bg, #f5f6fa); border-radius: var(--sap-radius); font-size: 13px; white-space: pre-line; }
.criticas-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.criticas-aviso-estacion { font-size: 12px; color: var(--sap-warning); margin-right: auto; }
.criticas-finalizar { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sap-border); }
.criticas-finalizar label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.criticas-finalizar textarea { width: 100%; }