/* Marcadores de clientes (azules) */
  .map-marker-client {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background-color: #0ea5e9;       /* sky-500 */
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(15,23,42,0.28);
  }

/* Punto central (tu ubicación) */
.map-marker-my-location {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 9999px;
  background-color: #00AD57;       /* verde principal */
  border: 2px solid #ffffff;       /* borde blanco como en la captura */
  box-shadow: 0 2px 6px rgba(15,23,42,0.35);
  z-index: 2;                      /* por encima del círculo grande */
}

/* Círculo grande tipo “radio de ubicación” */
.map-marker-my-location::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  /* tamaño del círculo en píxeles de pantalla */
  width: 120px;      /* ajusta esto si lo quieres más grande/pequeño */
  height: 120px;
  border-radius: 9999px;

  /* disco verde semitransparente con borde suave */
  background: radial-gradient(
    circle,
    rgba(0, 185, 93, 0.45) 0%,
    rgba(0, 185, 93, 0.30) 35%,
    rgba(0, 185, 93, 0.12) 70%,
    rgba(0, 185, 93, 0.00) 100%
  );

  opacity: 0.9;
  filter: blur(1.5px);             /* un pelín suavizado como en la imagen */
  pointer-events: none;
  z-index: 1;                      /* debajo del punto, por encima del mapa */
}


  /* Botón flotante “mi ubicación” dentro del mapa */
  #clientesMap {
    position: relative;
  }

  #clientesMap .map-my-location-btn {
    position: absolute;
    z-index: 10;
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.4rem;
    border-radius: 9999px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(15,23,42,0.3);
    cursor: pointer;
  }

  #clientesMap .map-my-location-btn:hover {
    background-color: #f3f4f6;
  }

  #clientesMap .map-my-location-btn svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  /* Limpiar logo / attribution de Mapbox solo en este mapa */
  #clientesMap .mapboxgl-ctrl-logo,
  #clientesMap .mapboxgl-ctrl-attrib {
    display: none !important;
  }



  /* Oculta la flecha nativa del select en todos los navegadores */
  .stats-select-clean {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important;
    background-color: transparent;
  }

  /* ==== Unidades: alternar cuadrícula / vista comprimida ==== */
  #unitsView .units-search-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  #unitsView .units-search-row .units-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  #unitsView .units-view-toggle-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 9999px;
    border: 1px solid #dbe5f1;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
  }

  #unitsView .units-view-toggle-btn:hover {
    border-color: #00AD57;
    color: #00AD57;
    box-shadow: 0 10px 22px rgba(0, 173, 87, 0.14);
  }

  #unitsView .units-view-toggle-btn:active {
    transform: scale(0.98);
  }

  #unitsView .units-compact-table-scroll {
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
  }

  #unitsView .units-compact-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  #unitsView .units-compact-table thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #f8fafc;
    white-space: normal;
  }

  #unitsView .units-compact-table tbody td {
    background: #ffffff;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  #unitsView .units-compact-table .units-compact-date,
  #unitsView .units-compact-table .units-compact-sync,
  #unitsView .units-compact-table .units-compact-alias {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #unitsView .units-compact-table .units-compact-money {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 0.70rem;
    letter-spacing: -0.02em;
  }

  #unitsView .units-compact-table tbody tr:hover td {
    background: rgba(248, 250, 252, 0.95);
  }

  .dark #unitsView .units-compact-table thead th {
    background: #0f172a;
  }

  .dark #unitsView .units-compact-table tbody td {
    background: #1e293b;
  }

  .dark #unitsView .units-compact-table tbody tr:hover td {
    background: rgba(30, 41, 59, 0.95);
  }

  @media (max-width: 767.98px) {
    #unitsView .units-view-toggle-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
    }

    /* En móvil la vista comprimida/lista SÍ debe desplazarse horizontalmente,
       para que no se oculten columnas ni se corten valores. */
    #unitsView .units-compact-table-scroll {
      overflow-x: auto !important;
      overflow-y: visible;
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      padding-bottom: 0.35rem;
    }

    #unitsView .units-compact-table-scroll::-webkit-scrollbar {
      height: 7px;
    }

    #unitsView .units-compact-table-scroll::-webkit-scrollbar-track {
      background: transparent;
    }

    #unitsView .units-compact-table-scroll::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.65);
      border-radius: 9999px;
    }

    #unitsView .units-compact-table {
      width: 1080px !important;
      min-width: 1080px !important;
      table-layout: fixed;
    }

    #unitsView .units-compact-table thead th,
    #unitsView .units-compact-table tbody td {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
      font-size: 0.68rem !important;
      line-height: 1rem !important;
      white-space: nowrap !important;
    }

    #unitsView .units-compact-table .units-compact-money {
      font-size: 0.68rem !important;
      letter-spacing: -0.015em;
      white-space: nowrap !important;
      overflow: visible;
      text-overflow: clip;
    }

    #unitsView .units-compact-table .units-compact-date,
    #unitsView .units-compact-table .units-compact-sync,
    #unitsView .units-compact-table .units-compact-alias {
      white-space: nowrap !important;
    }

    /* Ya no se ocultan Cierre ni Sync en móvil: quedan visibles con scroll horizontal. */
    #unitsView .units-compact-table .units-hide-mobile {
      display: table-cell !important;
    }
  }




  /* ==== Histórico de cambios: filtros tipo select redondeado (como referencia adjunta) ==== */
  #historicoCambiosView #histAuditFilters,
  #historicoCambiosView #histEventosFilters {
    align-items: flex-end;
  }

  #historicoCambiosView :is(#histFiltroEjecutorBtn, #histFiltroAliasBtn, #histFiltroEventoUsuarioBtn) {
    height: 44px;
    min-height: 44px;
    border-radius: 9999px !important;
    border: 1px solid #dbe5f1 !important;
    background: #ffffff !important;
    color: #64748b !important;
    box-shadow: none !important;
    padding-left: 14px !important;
    padding-right: 42px !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  }

  #historicoCambiosView :is(#histFiltroEjecutorBtn, #histFiltroAliasBtn, #histFiltroEventoUsuarioBtn):hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
  }

  #historicoCambiosView :is(#histFiltroEjecutorBtn, #histFiltroAliasBtn, #histFiltroEventoUsuarioBtn):focus,
  #historicoCambiosView :is(#histFiltroEjecutorBtn, #histFiltroAliasBtn, #histFiltroEventoUsuarioBtn):focus-visible {
    outline: none !important;
    border-color: #b7c6d8 !important;
    box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.10) !important;
  }

  #historicoCambiosView :is(#histFiltroEjecutorResumen, #histFiltroAliasResumen, #histFiltroEventoUsuarioResumen) {
    color: #94a3b8;
    font-weight: 500;
  }

  #historicoCambiosView :is(#histFiltroEjecutorBtn, #histFiltroAliasBtn, #histFiltroEventoUsuarioBtn) .material-symbols-outlined {
    right: 12px !important;
    color: #64748b !important;
    font-size: 20px !important;
  }

  #historicoCambiosView :is(#histFiltroEjecutorPanel, #histFiltroAliasPanel, #histFiltroEventoUsuarioPanel) {
    border-radius: 22px !important;
    border-color: #e2e8f0 !important;
    overflow: hidden;
  }

  #historicoCambiosView :is(#histFiltroEjecutorSearch, #histFiltroAliasSearch, #histFiltroEventoUsuarioSearch) {
    min-height: 38px;
    border-radius: 9999px !important;
    border-color: #dbe5f1 !important;
    background: #ffffff !important;
  }

  /* ==== Toast genérico para mensajes de Permisos ==== */
  .perm-toast {
    position: fixed;
    left: 2.0rem;
    bottom: 2.0rem;
    max-width: 420px;          /* + ~20px de ancho */

    background: rgba(0, 0, 0, 0.87);
    color: #f5f5f5;

    /* más alto y con más “aire” alrededor del texto */
    padding: 0.7rem 1.2rem;    /* vertical 0.7rem, horizontal 1.2rem */

    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 2.4;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
    z-index: 9999;

    opacity: 0;
    transform: translateY(10px);
    animation: permToastFade 2.5s ease-in-out forwards;
  }

  /* Variante de éxito (verde) */
  .perm-toast-success {
    background: #00AD57;   /* #00AD57 del proyecto */
    color: #ecfdf5;        /* verde muy claro para texto */
  }

  /* Variante de advertencia (ámbar) */
  .perm-toast-warning {
    background: #FFBF00;   /* amarillo */
    color: #fff1f2;        /* texto oscuro para contraste */
  }

  /* Variante de error (rojo) */
  .perm-toast-error {
    background: #ef4444;   /* red-500 */
    color: #fff1f2;        /* texto claro */
  }

  /* Variante sólida (negro al 87%, p. ej. "Sociedad cambiada."): sin pasar por
     transparencia al aparecer/desaparecer, siempre a opacidad 100%. */
  .perm-toast-solid {
    background: rgba(0, 0, 0, 0.87) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    animation: permToastSlideSolid 2.5s ease-in-out forwards !important;
  }

  @keyframes permToastSlideSolid {
    0%   { opacity: 1; transform: translateY(10px); }
    15%  { opacity: 1; transform: translateY(0); }
    85%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(10px); }
  }


  @keyframes permToastFade {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    15% {
      opacity: 1;
      transform: translateY(0);
    }
    85% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  /* ==== Botones de aprobar / no aprobar en APROBACIONES ==== */
  .aprob-btn {
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.1s ease;
  }

  .aprob-btn-green {
    background-color: #00AD57; /* #00AD57 */
    color: #ffffff;
  }
  .aprob-btn-green:hover {
    background-color: #00AD57; /* #00AD57 */
  }

  .aprob-btn-red {
    background-color: #dc2626; /* red-600 */
    color: #ffffff;
  }
  .aprob-btn-red:hover {
    background-color: #b91c1c; /* red-700 */
  }

  /* Estado deshabilitado (gris) */
  .aprob-btn-disabled {
    background-color: #e5e7eb !important; /* slate-200 */
    color: #9ca3af !important;            /* slate-400 */
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
  }
  .aprob-btn-disabled:hover {
    background-color: #e5e7eb !important;
  }

  

  /* ==== Botones grises para MODIFICAR CAJA ==== */
  .modcaja-btn-gray {
    background-color: #6b7280; /* gray-500 */
    color: #ffffff;
  }
  .modcaja-btn-gray:hover {
    background-color: #4b5563; /* gray-600 */
  }



  .modcaja-readonly{
    background-color:#f1f5f9 !important;
    color:#94a3b8 !important;
    cursor:not-allowed;
  }
  .modcaja-readonly:focus{
    outline:none !important;
    box-shadow:none !important;
  }

/* ==== Switch bonito solo para PERMISOS ==== */
  #permisosView .perm-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  #permisosView .perm-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* Pista */
  #permisosView .perm-slider {
    width: 42px;
    height: 22px;
    background: #e5e7eb;             /* gris claro */
    border-radius: 9999px;
    padding: 2px;
    display: flex;
    align-items: center;
    transition: background .25s ease;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.16);
  }

  /* Botón redondo */
  #permisosView .perm-circle {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #9ca3af;
    box-shadow: 0 2px 4px rgba(15,23,42,0.25);
    transition:
      transform .25s ease,
      box-shadow .25s ease,
      color .18s ease,
      background .25s ease;
  }

  /* Iconos (X / check) */
  #permisosView .perm-icon {
    position: absolute;
    transition: opacity .18s ease, transform .18s ease;
  }

  #permisosView .perm-icon--cross {
    opacity: 1;
    transform: scale(1);
  }

  #permisosView .perm-icon--check {
    opacity: 0;
    transform: scale(0.6);
  }

  /* Estado ON */
  #permisosView .perm-switch input:checked + .perm-slider {
    background: #00AD57;             /* verde tailwind */
  }

  #permisosView .perm-switch input:checked + .perm-slider .perm-circle {
    transform: translateX(18px);
    color: #00AD57;
  }

  /* Cambiar iconos */
  #permisosView .perm-switch input:checked + .perm-slider .perm-icon--check {
    opacity: 1;
    transform: scale(1);
  }

  #permisosView .perm-switch input:checked + .perm-slider .perm-icon--cross {
    opacity: 0;
    transform: scale(0.6);
  }

  /* Focus accesible */
  #permisosView .perm-switch input:focus-visible + .perm-slider {
    outline: 2px solid #00AD57;
    outline-offset: 2px;
  }

/* Misma estética de lista PERMISOS/APROBACIONES también en MODIFICAR CAJA */
#permisosView li.perm-filter-item,
#aprobacionesView li.perm-filter-item,
#modificarCajaView li.perm-filter-item,
#adminGeneralView li.perm-filter-item,
#estadisticasView li.perm-filter-item,
#cifrasView li.perm-filter-item,
#mapaView li.perm-filter-item,
#detailsView li.perm-filter-item,
#clientesView li.perm-filter-item {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Checkbox redondo verde (igual PERMISOS) también en MODIFICAR CAJA */
#permisosView input.perm-checkbox,
#aprobacionesView input.perm-checkbox,
#modificarCajaView input.perm-checkbox,
#adminGeneralView input.perm-checkbox,
#estadisticasView input.perm-checkbox,
#cifrasView input.perm-checkbox,
#mapaView input.perm-checkbox,
#detailsView input.perm-checkbox,
#clientesView input.perm-checkbox {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}

#permisosView input.perm-checkbox:focus,
#permisosView input.perm-checkbox:focus-visible,
#aprobacionesView input.perm-checkbox:focus,
#aprobacionesView input.perm-checkbox:focus-visible,
#modificarCajaView input.perm-checkbox:focus,
#modificarCajaView input.perm-checkbox:focus-visible,
#adminGeneralView input.perm-checkbox:focus,
#adminGeneralView input.perm-checkbox:focus-visible,
#estadisticasView input.perm-checkbox:focus,
#estadisticasView input.perm-checkbox:focus-visible,
#cifrasView input.perm-checkbox:focus,
#cifrasView input.perm-checkbox:focus-visible,
#mapaView input.perm-checkbox:focus,
#mapaView input.perm-checkbox:focus-visible,
#detailsView input.perm-checkbox:focus,
#detailsView input.perm-checkbox:focus-visible,
#clientesView input.perm-checkbox:focus,
#clientesView input.perm-checkbox:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#permisosView input.perm-checkbox:checked,
#aprobacionesView input.perm-checkbox:checked,
#modificarCajaView input.perm-checkbox:checked,
#adminGeneralView input.perm-checkbox:checked,
#estadisticasView input.perm-checkbox:checked,
#cifrasView input.perm-checkbox:checked,
#mapaView input.perm-checkbox:checked,
#detailsView input.perm-checkbox:checked,
#clientesView input.perm-checkbox:checked {
  background-color: #00AD57 !important;
  border-color: #00AD57 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}

/* Cifras Históricas: todas las columnas/tablas en negro */
#cifrasView table thead th,
#cifrasView table tbody td,
#cifrasView table tbody td * {
  color: #000000 !important;
}

  /* === Validación: sin espacios en inputs === */
  .space-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 inset !important;
  }
  .space-hint {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #fca5a5; /* red-300 */
  }
  .space-hint.hidden { display: none; }


  /* === Histórico de cambios: header fijo + anchos estables === */
  #historicoCambiosView .hist-table-scroll {
    position: relative;
    scrollbar-gutter: stable both-edges;
  }

  #historicoCambiosView .hist-table-scroll table {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  #historicoCambiosView .hist-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #f8fafc;
  }

  #historicoCambiosView .hist-table-scroll tbody td {
    background: #ffffff;
  }

  #historicoCambiosView .hist-table-scroll tbody tr:hover td {
    background: rgba(248, 250, 252, 0.95);
  }

  /* Histórico de cambios: botón Mostrar más */
  #historicoCambiosView .hist-load-more-btn {
    min-width: 180px;
    height: 42px;
    border-radius: 9999px;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 1.25rem;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  }

  #historicoCambiosView .hist-load-more-btn:hover {
    background: #00AD57;
    border-color: #00AD57;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 173, 87, 0.22);
  }

  #historicoCambiosView .hist-load-more-btn:active {
    transform: scale(0.98);
  }

  #historicoCambiosView .hist-load-more-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
  }


  /* ==== Depurar cartera: estética basada en Histórico de cambios ==== */
  #depurarCarteraView .depurar-table-scroll {
    position: relative;
    scrollbar-gutter: stable both-edges;
  }

  #depurarCarteraView .depurar-table-scroll table {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  #depurarCarteraView .depurar-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #f8fafc;
  }

  #depurarCarteraView .depurar-table-scroll tbody td {
    background: #ffffff;
  }

  #depurarCarteraView .depurar-table-scroll tbody tr:hover td {
    background: rgba(248, 250, 252, 0.95);
  }

  #depurarCarteraView .depurar-tab-active {
    background: #00AD57 !important;
    border-color: #00AD57 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 173, 87, 0.22);
  }

  #depurarCarteraView input.depurar-checkbox {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
  }

  #depurarCarteraView input.depurar-checkbox:focus,
  #depurarCarteraView input.depurar-checkbox:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  #depurarCarteraView input.depurar-checkbox:checked {
    background-color: #00AD57 !important;
    border-color: #00AD57 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
  }

  #depurarCarteraView .depurar-cartera-row {
    cursor: pointer;
  }

  #depurarCarteraView .depurar-cartera-row td {
    padding-top: 0.975rem !important;
    padding-bottom: 0.975rem !important;
  }

  #depurarCarteraView .depurar-row-selected td {
    background: rgba(0, 173, 87, 0.08) !important;
  }



  /* ==== Filtros con curvas redondeadas unificadas (estilo Cifras Históricas) ==== */
  :root {
    --filters-pill-radius: 9999px;
    --filters-panel-radius: 1.25rem;
  }

  #detailsView :is(button[id*="FiltroBtn"], input[id*="FiltroSearch"], #dvPagosSearch),
  #clientesView :is(#clientesUnidadMobileBtn, #clientesUnidadSelect, #clientesUnidadDesktopBtn, #clientesUnidadDesktopSearch, #clientesSearch),
  #aprobacionesView :is(button[id*="FiltroBtn"], input[id*="FiltroSearch"]),
  #permisosView :is(#permisosFiltroBtn, #permisosSearch),
  #adminGeneralView :is(button[id*="FiltroBtn"], input[id*="FiltroSearch"]),
  #modificarCajaView :is(button[id*="FiltroBtn"], input[id*="FiltroSearch"]),
  #historicoCambiosView :is(button[id*="FiltroBtn"], input[id*="FiltroSearch"]),
  #depurarCarteraView :is(#depurarUnidadFiltroBtn, #depurarUnidadFiltroSearch),
  #estadisticasView :is(#statsDateRange, #statsUnidadFiltroBtn, #statsUnidadFiltroSearch),
  #mapaView :is(#mapUnidadFiltroBtn, #mapUnidadFiltroSearch),
  #cifrasView :is(#cifrasDateDesde, #cifrasDateHasta, #cifrasUnidadFiltroBtn, #cifrasUnidadFiltroSearch),
  #abrirCajasView :is(#abrirCajasSearch) {
    border-radius: var(--filters-pill-radius) !important;
  }

  #detailsView :is([id$="FiltroPanel"]),
  #aprobacionesView :is([id$="FiltroPanel"]),
  #permisosView :is([id$="FiltroPanel"]),
  #adminGeneralView :is([id$="FiltroPanel"]),
  #modificarCajaView :is([id$="FiltroPanel"]),
  #historicoCambiosView :is([id$="FiltroPanel"]),
  #depurarCarteraView :is(#depurarUnidadFiltroPanel),
  #estadisticasView :is(#statsUnidadFiltroPanel, #statsDatePickerPanel),
  #mapaView :is(#mapUnidadFiltroPanel),
  #cifrasView :is(#cifrasUnidadFiltroPanel, #cifrasDatePickerPanel),
  #clientesView :is(#clientesUnidadMobileMenu, #clientesUnidadDesktopPanel) {
    border-radius: var(--filters-panel-radius) !important;
  }

  /* ==== Depurar cartera: filtro Unidad EXACTO tipo Unidades ==== */
  #depurarCarteraView #depurarUnidadFiltroBtn {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 9999px !important;
    border: 1px solid #dbe5f1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #depurarCarteraView #depurarUnidadFiltroBtn:hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
  }

  #depurarCarteraView #depurarUnidadFiltroBtn:focus,
  #depurarCarteraView #depurarUnidadFiltroBtn:focus-visible {
    outline: none !important;
    border-color: #b7c6d8 !important;
    box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.10) !important;
  }

  #depurarCarteraView #depurarUnidadFiltroPanel {
    border-radius: 22px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.12) !important;
  }

  #depurarCarteraView #depurarUnidadFiltroSearch {
    min-height: 38px !important;
    border-radius: 9999px !important;
    border-color: #dbe5f1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #depurarCarteraView #depurarUnidadFiltroResultados li.perm-filter-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  #depurarCarteraView #depurarUnidadFiltroResultados input.perm-checkbox {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 9999px !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
  }

  #depurarCarteraView #depurarUnidadFiltroResultados input.perm-checkbox:focus,
  #depurarCarteraView #depurarUnidadFiltroResultados input.perm-checkbox:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  #depurarCarteraView #depurarUnidadFiltroResultados input.perm-checkbox:checked {
    background-color: #00AD57 !important;
    border-color: #00AD57 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
  }


  /* ==== Pagos: estética basada en Histórico de cambios / Depurar cartera ==== */
  #pagosView .pagos-table-scroll {
    position: relative;
    scrollbar-gutter: stable both-edges;
  }

  #pagosView .pagos-table-scroll table {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  #pagosView .pagos-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #f8fafc;
  }

  #pagosView .pagos-table-scroll tbody td {
    background: #ffffff;
    padding-top: 0.975rem !important;
    padding-bottom: 0.975rem !important;
  }

  #pagosView .pagos-table-scroll tbody tr:hover td {
    background: rgba(248, 250, 252, 0.95);
  }



    /* FIX: encabezados centrados */
    #unitsView thead th{
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* FIX: evitar cortes de contenido */
    #unitsView td, #unitsView th{
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* FIX: mejor distribución de columnas */
    #unitsView table{
        table-layout: auto !important;
    }

    /* FIX: padding más cómodo */
    #unitsView td, #unitsView th{
        padding: 10px 12px !important;
        font-size: 0.78rem !important;
    }

    /* FIX: evitar que números se corten */
    #unitsView .js-fit-amount{
        white-space: nowrap !important;
    }
    



      /* Ajustes base del popup de Mapbox */
  .mapboxgl-popup.cliente-popup {
    max-width: 260px;
  }

  .mapboxgl-popup.cliente-popup .mapboxgl-popup-content {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .mapboxgl-popup.cliente-popup .mapboxgl-popup-tip {
    display: none; /* usamos nuestra propia “flecha” */
  }

  /* Card principal */
  .cliente-popup-card {
    position: relative;
    min-width: 230px;

    background: #f9fafb;
    border-radius: 16px;
    padding: 10px 16px 14px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);

    color: #0f172a;
    font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;

    /* Animación de entrada */
    animation: cliente-popup-fade-in 180ms ease-out forwards;
    transform-origin: bottom center;
  }

  /* Flechita inferior */
  .cliente-popup-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #f9fafb transparent transparent transparent;
  }

  /* Estado de cierre con fade out */
  .cliente-popup-card.is-closing {
    animation: cliente-popup-fade-out 160ms ease-in forwards;
  }

  /* Header: avatar + nombre + alias + botón cerrar */
  .cliente-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .cliente-popup-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: #e0ebff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
  }

  .cliente-popup-title {
    flex: 1;
    min-width: 0;
  }

  .cliente-popup-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #0f172a;
  }

  .cliente-popup-subtitle {
    margin-top: 2px;
    font-size: 0.75rem;
    color: #6b7280;
  }

  .cliente-popup-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
  }

  .cliente-popup-close:hover {
    color: #6b7280;
  }

  .cliente-popup-divider {
    margin: 8px 0;
    height: 1px;
    background: #e5e7eb;
  }

  /* Fila del teléfono */
  .cliente-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #4b5563;
    margin-bottom: 10px;
  }

  .cliente-popup-icon {
    font-size: 0.85rem;
  }

  .cliente-popup-phone {
    font-weight: 500;
  }

  /* Botón "Ver Perfil Completo" */
  .cliente-popup-btn {
    width: 100%;
    margin-top: 2px;
    border: none;
    border-radius: 9999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
  }

  .cliente-popup-btn:hover {
    background: #1d4ed8;
  }

  .cliente-popup-btn-icon {
    font-size: 0.9rem;
  }

  /* Animaciones */
  @keyframes cliente-popup-fade-in {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes cliente-popup-fade-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(6px) scale(0.97);
    }
  }

      /* CLIENTES: ancho de fila filtro+buscador igual que las tarjetas */
@media (min-width: 1024px){
  #clientesView #clientesFilterRow,
  #clientesView #clienteHeaderCard,
  #clientesView #clienteTabsCard{
    width: 110%;
    margin-left: -5%;
  }
}


      /* Nav principal: link activo = texto negro (o blanco en dark) */
      .nav-main-link--active {
        color: #111827 !important;  /* casi negro en light */
      }

      .dark .nav-main-link--active {
        color: #F9FAFB !important;  /* casi blanco en dark */
      }


      /* CLIENTES: padding inferior en ambas pestañas */
    #panelClienteInfoGeneral,
    #panelClienteVentasPagos{
      padding-bottom: 10px; /* 10px ≈ 10 puntos visuales */
    }

    /* CLIENTES: espacio exterior debajo del segundo contenedor (tabs) */
    #clientesView #clienteTabsCard{
      margin-bottom: 30px;  /* ~30 "puntos" respecto al final de la pantalla */
    }


    /* CLIENTES: fila filtro+buscador y tarjetas un 10% más anchas en escritorio */
    @media (min-width: 1024px){
      #clientesView #clientesFilterRow,
      #clientesView #clienteHeaderCard,
      #clientesView #clienteTabsCard{
        width: 110%;
        margin-left: -5%;   /* para que queden centrados visualmente */
      }
    }



        /* Botones del filtro Detallado:
        si el botón está activo (bg-[#00AD57]), el hover mantiene el verde */
      #dvDetalladoWrapper button.bg-[#00AD57]:hover {
        background-color: #00AD57; /* #00AD57 */
      }

      #cifrasMovFilters button.bg-[#00AD57]:hover {
      background-color: #00AD57;
    }


/* Paneles para las tabs General / Detallado */
      .tab-panel {
        opacity: 0;
        transform: translateX(16px);
        transition: opacity 220ms ease-out, transform 220ms ease-out;
      }

      .tab-panel.tab-panel--active {
        opacity: 1;
        transform: translateX(0);
      }

      /* Encabezado fijo para la tabla de DETALLADO (pagos, no pagos, ventas, etc) */
      #dvDetalladoWrapper .max-h-\[380px\]{
        /* contenedor que hace scroll vertical */
        position: relative;
      }

      #dvDetalladoWrapper thead th{
        position: sticky;
        top: 0;          /* se queda pegado arriba dentro del scroll */
        z-index: 20;     /* por encima de las filas */
        background-color: #f8fafc; /* mismo tono gris claro que bg-slate-50 */
      }

      /* Si usás modo oscuro con la clase .dark en <html> o <body> */
      .dark #dvDetalladoWrapper thead th{
        background-color: #0f172a; /* similar a bg-slate-800 */
      }

      /* Pega MÉTRICAS justo debajo de CARTERA en desktop */
  @media (min-width: 1024px){
    #dvSectionCartera{ margin-bottom: 0 !important; }
    /* quita esta línea para permitir separación:
      #dvSectionMetricas{ margin-top: 0 !important; } */
    #dvSectionMetricas > h2{ margin-top: 0 !important; }
    /* puedes dejar esta si quieres evitar otros márgenes superiores colados */
    #dashboardGrid > *:is(section,div)[class*="col-start-2"]{ margin-top: 0 !important; }
  }


/* === Vis




/* === Visibilidad móvil específica por sección === */
@media (max-width: 639.98px){
  /* CARTERA: forzar que SÍ se vean */
  #dvSectionCartera #dvCarteraInicial,
  #dvSectionCartera #dvCarteraFinal,
  #dvSectionCartera #dvPctCartera{
    display: revert !important; /* vuelve a lo que tenía originalmente */
  }

  /* CAJA: ocultar solo el % */
  #dvSectionCaja #dvPctCartera{
    display: none !important;
  }

  /* MÉTRICAS: ocultar inicial/final/% */
  #dvSectionMetricas #dvCarteraInicial,
  #dvSectionMetricas #dvCarteraFinal,
  #dvSectionMetricas #dvPctCartera{
    display: none !important;
  }

  /* Si en MÉTRICAS esos IDs están dentro de una tarjeta, oculta la tarjeta para no dejar cascarón */
  #dvSectionMetricas .rounded-xl:has(#dvCarteraInicial),
  #dvSectionMetricas .rounded-xl:has(#dvCarteraFinal),
  #dvSectionMetricas .rounded-xl:has(#dvPctCartera){
    display: none !important;
  }
}





/* === ADMIN DROPDOWN — versión integrada y corregida (sin sombra en hover) === */

/* Contenedor del dropdown (alineado desde 20% como tenías) */
.nav-admin-dropdown{
  position: absolute;
  left: 20%;
  top: 100%;
  padding-top: 10px;                 /* sin hueco entre botón y menú */
  transform: translateX(-50%);
  z-index: 10000;

  /* Deja ver la sombra completa del card */
  overflow: visible;

  /* Apertura/cierre por opacidad+visibilidad con retardo al cerrar */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    180ms ease 150ms,     /* delay al cerrar */
    visibility 0s linear 330ms;      /* oculta al final del fade */
}

/* Puente invisible para que no “se cierre” al cruzar del botón al menú */
.nav-admin-dropdown::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;                      /* igual a padding-top */
  transform: translateY(-10px);      /* ocupa el “hueco” superior */
}

/* Abrir únicamente mientras el puntero esté sobre Administrar o su menú. */
.nav-admin-wrap:hover .nav-admin-dropdown,
.nav-admin-dropdown:hover{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity    180ms ease 0ms,
    visibility 0s linear 0ms;
}

/* La grilla se contrae después de que el dropdown ya quedó invisible.
   Así no aparece la tarjeta blanca vacía al retirar el mouse. */
.nav-admin-dropdown .admin-menu-grid{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0s linear 330ms;
}
.nav-admin-wrap:hover .nav-admin-dropdown .admin-menu-grid,
.nav-admin-dropdown:hover .admin-menu-grid{
  max-height: 1200px; /* suficiente para todo el contenido */
  transition: max-height 260ms cubic-bezier(.2,.8,.2,1) 0ms;
}

/* Tarjeta blanca (sin frosted), sombra suave y difusa */
.card--admin{
  width: 500px;                      /* ← aquí ajustas el ANCHO */
  max-width: min(92vw, 500px);       /* opcional: responsivo para pantallas chicas */
  height: auto;
  border-radius: 24px;
  padding: 16px;
  background: #fff;
  box-shadow:
    0 24px 60px rgba(16,24,40,.18),
    0 10px 28px rgba(16,24,40,.12);
  border: 1px solid rgba(0,0,0,.06);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grid 2x2 */
.admin-menu-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* Ítems: texto negro pequeño; icono cambia de color al hover (SIN sombra) */
.admin-menu-item{
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  font-size: .875rem;                /* text-sm */
  color: #000;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}
.admin-menu-item:hover,
.admin-menu-item:focus-visible{
  /* Se nota la selección SIN sombras ni movimientos */
  background: #f3f4f6;               /* igual al hover “seleccionado” del topbar */
  border-color: rgba(0,0,0,.10);
  /* sin box-shadow, sin transform */
}
.admin-menu-icon{
  font-size: 22px; line-height: 1;
  color: #64748b;                     /* slate-500 por defecto */
  transition: color 140ms ease;
}
.admin-menu-item:hover .admin-menu-icon,
.admin-menu-item:focus-visible .admin-menu-icon{
  color: #2072AF;                     /* acento al hover */
}

/* que el topbar no recorte, y z-index alto del dropdown */
#topbar, #topbar > .container{ overflow: visible; }
.nav-admin-wrap{ position: relative; z-index: 9999; }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-admin-dropdown{
    transition: opacity 120ms linear, visibility 0s linear 120ms;
  }
}

/* ==== Rueda deslizante móvil (sin fondo) ==== */
/* ==== Switch móvil 3 pantallas ==== */
.wheel3-viewport{
  width: 220px; height: 40px;
  overflow: hidden; position: relative; contain: paint;
  background: transparent;
}
.wheel3-strip{
  display: flex; width: 300%; height: 100%;
  transform: translateX(0);
  transition: transform 480ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.wheel3-item{
  flex: 0 0 33.3333%;
  display: flex; align-items: center; justify-content: center;
}
.wheel3-text{
  font-weight: 700; letter-spacing: .06em; color: #0f172a; text-transform: uppercase;
}

/* (Opcional) Si la máscara te hace ver “descentrado”, apágala: */
.wheel2-viewport::before,
.wheel2-viewport::after{ display: none; }

        /* Sin empuje: el dashboard ya no se mueve */
        #dashboard{
          /* opcional: puedes quitar estas 2 líneas si no las usas en otro lado */
          transition: none;
          will-change: auto;
        }

        /* Drawer entra por la izquierda como overlay */
        #mobileDrawer{ will-change: transform; }
        body.drawer-open #mobileDrawer{ transform: translateX(0); }

        /* Scrim cubre la pantalla */
        #drawerScrim{ will-change: opacity; }
        body.drawer-open #drawerScrim{
          opacity: 1;
          pointer-events: auto;
        }



         /* evita que $ y el número se separen */
      .js-fit-amount{
        white-space: nowrap;     
        line-height: 1.1;
        display: inline-block;
      }
      
      /* ===== Estilos del overlay/login existentes ===== */
      .glassmorphism{
        background: rgba(255,255,255,0.10);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.20);
      }
      .field-input{
        box-sizing: border-box !important;
        width:100% !important;
        height:48px !important;
        padding-left:3rem !important;
        padding-right:3rem !important;
        padding-top:.75rem !important;
        padding-bottom:.75rem !important;
        background: rgba(255,255,255,0.10) !important;
        border:0 !important;
        border-radius:.5rem !important;
        color:rgba(255,255,255,0.95) !important;
        -webkit-text-fill-color:rgba(255,255,255,0.95) !important;
        caret-color:#fff;
        font-size:16px !important;
        line-height:1.25 !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        text-shadow:0 0 0 rgba(255,255,255,0.95);
        transform:translateZ(0);
        backface-visibility:hidden;
        background-clip:padding-box !important;
      }
      .field-input::placeholder{
        color:#b4b4b4 !important;
        -webkit-text-fill-color:#b4b4b4 !important;
      }
      input.field-input:-webkit-autofill,
      input.field-input:-webkit-autofill:focus{
        -webkit-text-fill-color:rgba(255,255,255,0.95) !important;
        transition:background-color 5000s ease-in-out 0s !important;
        -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,0.10) inset !important;
                box-shadow:0 0 0 1000px rgba(255,255,255,0.10) inset !important;
      }
      input[type="password" autocomplete="current-password"]::-ms-reveal,
      input[type="password" autocomplete="current-password"]::-ms-clear{display:none}
      
      
      @supports (-webkit-touch-callout:none){
        input[type="password" autocomplete="current-password"]{font-family:inherit;letter-spacing:0}
      }
      .icon-cell{width:3rem}

      /* Fondo gradiente */
      :root{
        --gradient-background-start: #00361B;
        --gradient-background-end:   #00361B;
        --first-color: 0, 185, 93;   /* ← color principal (exacto) */
        --second-color: 0, 185, 93;
        --third-color: 0, 185, 93;
        --fourth-color: 0, 185, 93;
        --fifth-color: 0, 185, 93;
        --pointer-color: 0, 185, 93;
        --size: 80%;
        --blur-px: 40px;
        --o2: 400px;
        --o3: 400px;
        --o4: 200px;
        --o5x: 800px;
        --o5y: 800px;
        --blending-value: hard-light;
      }
      .bg-gradient-root{
        background: #00381C;   /* ← color sólido exacto */
        position:absolute; inset:0; z-index:0; overflow:hidden; isolation:isolate;
      }
      .bg-gradient-blur{ position:absolute; inset:0; filter: url(#blurMe) blur(var(--blur-px)); will-change: filter, transform; }
      .is-safari .bg-gradient-blur{ filter: blur(var(--blur-px)); }
      .blob-5{ background: radial-gradient(circle at center, rgba(var(--fifth-color),0.8) 0%, rgba(var(--fifth-color),0) 50%); transform-origin: calc(50% - var(--o5x)) calc(50% + var(--o5y)); opacity: 1; }

      /* === Nebula clouds (dos nubes pequeñas y animables) === */


      @media (min-width:1024px){
        .nebula-cloud{ --nebula-size: 28; }
      }
      @keyframes float2{0%{transform:translate(-50%,-50%) rotate(0) scale(1.05)}50%{transform:translate(-50%,-50%) rotate(-180deg) scale(1.12)}100%{transform:translate(-50%,-50%) rotate(-360deg) scale(1.05)}}
      @keyframes float3{0%{transform:translate(-50%,-50%) rotate(0) scale(.95)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.06)}100%{transform:translate(-50%,-50%) rotate(360deg) scale(.95)}}
      @keyframes float4{0%{transform:translate(-50%,-50%) rotate(0) scale(1.1)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(1)}100%{transform:translate(-50%,-50%) rotate(360deg) scale(1.1)}}
      @keyframes float5{0%{transform:translate(-50%,-50%) rotate(0) scale(1.02)}50%{transform:translate(-50%,-50%) rotate(-180deg) scale(1.15)}100%{transform:translate(-50%,-50%) rotate(-360deg) scale(1.02)}}
      .animate-first{animation:float1 4.8s linear infinite}
      .animate-second{animation:float2 12s linear infinite}
      .animate-third{animation:float3 12s linear infinite}
      .animate-fourth{animation:float4 12s linear infinite}
      .animate-fifth{animation:float5 12s linear infinite}
      .dv-panel { position: absolute; right: 12px; bottom: 12px; padding: 10px 12px;
        background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; font-size: 12px; line-height: 1.2; color: #ddd; user-select: none; }
      .dv-panel code{ color:#fff; font-weight:600 }

      /* === DESTELLOS LATERALES (izquierda / derecha) === */
      .edge-glow{
        position:absolute;
        top:-15%;
        bottom:-15%;
        width:42vw;
        pointer-events:none;
        mix-blend-mode: screen;
        filter: blur(80px) saturate(140%);
        opacity:0;
        will-change: opacity, transform;
        animation: flareFade 8s ease-in-out infinite;
        z-index: 1; /* por debajo de las nubes (z=2) pero sobre blobs */
      }
      .edge-glow.left{
        left:-6vw;
        background:
          radial-gradient(130% 180% at 0% 50%,
            rgba(var(--first-color),0.90) 5%,
            rgba(var(--first-color),0.45) 28%,
            rgba(var(--first-color),0.38) 46%,
            rgba(var(--first-color),0.24) 70%,
            rgba(var(--first-color),0) 78%);
      }
      .edge-glow.right{
        right:-6vw;
        background:
          radial-gradient(130% 180% at 100% 50%,
            rgba(var(--first-color),0.90) 5%,
            rgba(var(--first-color),0.45) 28%,
            rgba(var(--first-color),0.38) 46%,
            rgba(var(--first-color),0.24) 70%,
            rgba(var(--first-color),0) 78%);
        animation-delay: 5s; /* alterna con el de la izquierda */
      }
      @keyframes flareFade{
        0%, 18%   { opacity: 0; }
        28%       { opacity: .7; }
        50%       { opacity: 1; }
        72%       { opacity: .65; }
        82%, 100% { opacity: 0; }
      }
      /* === /DESTELLOS LATERALES === */
      
      @media (max-width: 640px){
      html, body { 
        background-color: #002412; /* ← tu color para móvil */
      }
      .bg-gradient-root{
        background: #002412;       /* ← mismo color para el layer de fondo */
      }
    }

    /* Neumorfismo suave para el buscador */
/* Neumorfismo con fondo BLANCO puro en ambos temas */
.neu-input{
  border-radius: 16px;
  background: #ffffff !important;  /* blanco 100% */
  box-shadow:
    8px 8px 16px rgba(0,0,0,0.10),
    -8px -8px 16px rgba(255,255,255,0.70);
}
.dark .neu-input{
  background: #ffffff !important;  /* mantener blanco también en dark */
  box-shadow:
    8px 8px 16px rgba(0,0,0,0.30),
    -8px -8px 16px rgba(255,255,255,0.10);
}


    


      /* La tabla comprimida sale del ancho pequeño del contenedor y toma una escala amplia tipo imagen 1 */
      #unitsView #cards[data-view-mode="compact"] {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      @media (min-width: 1024px) {
        #unitsView #cards[data-view-mode="compact"] {
          width: min(calc(100vw - 66px), 1320px) !important;
          max-width: min(calc(100vw - 66px), 1320px) !important;
          margin-left: 50% !important;
          transform: translateX(-50%) !important;
        }
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
        border-radius: 16px !important;
        border: 1px solid rgba(226, 232, 240, 0.95) !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        font-size: 14px !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table thead tr {
        min-height: 42px !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th {
        padding: 1.15rem 1.15rem 0.95rem !important;
        font-size: 0.73rem !important;
        line-height: 1.05rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.015em !important;
        color: #53677e !important;
        text-transform: uppercase !important;
        vertical-align: middle !important;
        background: #f8fafc !important;
        white-space: nowrap !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td {
        padding: 1.02rem 1.15rem !important;
        font-size: 0.875rem !important;
        line-height: 1.35rem !important;
        vertical-align: middle !important;
        color: #0f172a !important;
        background: #ffffff !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody tr {
        min-height: 66px !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody tr:hover td {
        background: rgba(248, 250, 252, 0.98) !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-alias,
      #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-date,
      #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-sync,
      #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-money {
        display: inline-block !important;
        max-width: 100% !important;
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-money {
        overflow: visible !important;
        text-overflow: clip !important;
        font-weight: 900 !important;
        letter-spacing: -0.018em !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table td:nth-child(1),
      #unitsView #cards[data-view-mode="compact"] .units-compact-table td:nth-child(2),
      #unitsView #cards[data-view-mode="compact"] .units-compact-table td:nth-child(3),
      #unitsView #cards[data-view-mode="compact"] .units-compact-table td:nth-child(4) {
        font-weight: 900 !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table td:nth-child(7) {
        font-weight: 900 !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table td:nth-child(8) .h-1\.5 {
        height: 0.42rem !important;
      }

      #unitsView #cards[data-view-mode="compact"] .units-compact-table td:nth-child(8) span {
        font-size: 0.78rem !important;
        font-weight: 900 !important;
      }

      #unitsView #cards[data-view-mode="compact"] .details-btn {
        width: 2.15rem !important;
        height: 2.15rem !important;
        min-width: 2.15rem !important;
        min-height: 2.15rem !important;
      }

      #unitsView #cards[data-view-mode="compact"] .details-btn .material-symbols-outlined {
        font-size: 1.15rem !important;
      }

      .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th {
        background: #0f172a !important;
        color: #cbd5e1 !important;
      }

      .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td {
        background: #1e293b !important;
        color: #e2e8f0 !important;
      }

      .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody tr:hover td {
        background: rgba(30, 41, 59, 0.98) !important;
      }

      /* En móvil se mantiene la tabla scrolleable horizontalmente, pero con mejor lectura. */
      @media (max-width: 767.98px) {
        #unitsView #cards[data-view-mode="compact"] {
          width: 100% !important;
          max-width: 100% !important;
          margin-left: auto !important;
          transform: none !important;
        }

        #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
          overflow-x: auto !important;
          -webkit-overflow-scrolling: touch !important;
        }

        #unitsView #cards[data-view-mode="compact"] .units-compact-table {
          width: 1180px !important;
          min-width: 1180px !important;
        }

        #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th,
        #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td {
          padding-left: 0.75rem !important;
          padding-right: 0.75rem !important;
          font-size: 0.78rem !important;
          line-height: 1.15rem !important;
          white-space: nowrap !important;
        }

        #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th {
          font-size: 0.68rem !important;
        }

        #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td {
          padding-top: 0.85rem !important;
          padding-bottom: 0.85rem !important;
        }
      }
    


  /* Ajuste adicional: que Apertura, Sync y Ver se vean completos y no salgan apretados */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table {
    width: 100% !important;
    min-width: 1260px !important;
    table-layout: fixed !important;
  }

  /* Distribución de columnas para que nada se corte */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1) { width: 72px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2) { width: 118px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3) { width: 138px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4) { width: 150px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5) { width: 180px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6) { width: 110px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7) { width: 110px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) { width: 90px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9) { width: 140px !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) { width: 88px !important; text-align: center !important; }

  /* Mostrar completos Apertura y Sync */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-date,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-sync {
    display: block !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Botón VER con espacio suficiente */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }
  #unitsView #cards[data-view-mode="compact"] .details-btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }



  /* Encabezados alineados a la izquierda */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th,
  #unitsView thead th {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  /* VER sigue con buen espacio para el botón, pero el encabezado queda a la izquierda */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10) {
    text-align: left !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) {
    text-align: center !important;
  }

  /* Columnas principales 30% menos anchas:
     Unidad 72px -> 50px
     Alias 118px -> 83px
     Inicial 138px -> 97px
     Final 150px -> 105px
  */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2) {
    width: 83px !important;
    min-width: 83px !important;
    max-width: 83px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3) {
    width: 97px !important;
    min-width: 97px !important;
    max-width: 97px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4) {
    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
  }

  /* El espacio liberado se reparte hacia columnas que necesitaban aire visual */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5) {
    width: 205px !important;
    min-width: 205px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9) {
    width: 165px !important;
    min-width: 165px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) {
    width: 96px !important;
    min-width: 96px !important;
  }

  /* Mantiene simetría sin aplastar Apertura, Sync y Ver */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table {
    min-width: 1160px !important;
  }



  /*
    Ajuste específico solicitado:
    - quitar aire sobrante de Alias, Inicial, Final y Cierre
    - sumar ese espacio a PROG.
    - mantener encabezados a la izquierda
    Orden real de columnas:
    1 Unidad | 2 Alias | 3 Inicial | 4 Final | 5 Apertura | 6 Cierre | 7 Estado | 8 Prog. | 9 Sync | 10 Ver
  */

  #unitsView #cards[data-view-mode="compact"] .units-compact-table {
    width: 100% !important;
    min-width: 1120px !important;
    table-layout: fixed !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th {
    text-align: left !important;
  }

  /* Columnas con menos espacio sobrante */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1) {
    width: 5.0% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2) {
    width: 6.5% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3) {
    width: 6.0% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4) {
    width: 12.0% !important;
  }

  /* Apertura con ancho suficiente para fecha completa, pero sin exagerar */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5) {
    width: 14.0% !important;
  }

  /* Cierre reducido: era uno de los espacios rojos */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6) {
    width: 6.5% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7) {
    width: 8.0% !important;
  }

  /* PROG. recibe el espacio quitado de las columnas rojas */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) {
    width: 15.0% !important;
    min-width: 150px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9) {
    width: 17.0% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) {
    width: 10.0% !important;
  }

  /* Reducir padding horizontal en las columnas donde se veía aire vacío */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6) {
    padding-left: 0.8rem !important;
    padding-right: 0.55rem !important;
  }

  /* PROG. más cómodo visualmente */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) {
    padding-left: 0.9rem !important;
    padding-right: 1.25rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div {
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .h-1\.5 {
    flex: 1 1 auto !important;
    min-width: 64px !important;
    max-width: none !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) span {
    white-space: nowrap !important;
  }

  /* Ver: mantiene el botón visible y centrado en su celda */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) {
    text-align: center !important;
  }

  #unitsView #cards[data-view-mode="compact"] .details-btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }



  /*
    Corrección v5:
    1) Apertura y Cierre ya no se sobremontan.
    2) El encabezado ocupa todo el ancho visible de la tarjeta, sin dejar franja blanca a la derecha.
    3) Se mantiene la reducción de espacios sobrantes y se conserva PROG. más amplia.
  */

  #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: #f8fafc !important; /* evita franja blanca a la derecha del encabezado */
    border-radius: 16px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table{
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead tr,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th{
    background: #f8fafc !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th{
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-left: 1.05rem !important;
    padding-right: 0.55rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-left: 1.05rem !important;
    padding-right: 0.55rem !important;
  }

  /*
    Anchos por porcentaje para que la tabla use el 100% exacto.
    Orden:
    1 Unidad | 2 Alias | 3 Inicial | 4 Final | 5 Apertura | 6 Cierre | 7 Estado | 8 Prog. | 9 Sync | 10 Ver
  */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){
    width: 5% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){
    width: 8% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){
    width: 11% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){
    width: 12% !important;
  }

  /* Apertura gana espacio propio para evitar choque con Cierre */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 12% !important;
  }

  /* Cierre separado y con ancho real, aunque esté vacío o tenga raya */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 8% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){
    width: 8% !important;
  }

  /* PROG. más ancha con el espacio redistribuido */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 13% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    width: 14% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 9% !important;
  }

  /* Fechas completas y sin montarse sobre la columna siguiente */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-date,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-sync{
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Cierre mantiene su propio espacio visual */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    color: #64748b !important;
  }

  /* PROG. con barra más larga y sin comprimir el porcentaje */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .h-1\.5{
    flex: 1 1 auto !important;
    min-width: 70px !important;
    max-width: none !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) span{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* VER alineado y con respiración */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    text-align: center !important;
    padding-left: 0.75rem !important;
    padding-right: 1rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .details-btn{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll,
  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table thead,
  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table thead tr,
  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th{
    background: #0f172a !important;
  }



  /* v6: Apertura +10%, Sync más compacto, y color hasta el borde derecho */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
    /* extiende visualmente los colores de encabezado y fila hasta el final */
    background: linear-gradient(to bottom, #f8fafc 0 56px, #ffffff 56px 100%) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
    background: linear-gradient(to bottom, #0f172a 0 56px, #1e293b 56px 100%) !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Distribución final */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 11% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 12% !important; }

  /* Apertura más ancha */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 14% !important;
    padding-right: 0.35rem !important;
  }

  /* Cierre separado para evitar sobremontaje */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 8% !important;
    padding-left: 0.65rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 13% !important; }

  /* Sync más compacto: se le resta el espacio vacío */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    width: 11% !important;
    padding-right: 0.25rem !important;
  }

  /* Ver un poco más firme al final */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 10% !important;
    padding-left: 0.45rem !important;
    padding-right: 0.6rem !important;
  }

  /* Evita choque visual entre Apertura y Cierre */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-date {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-sync {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Botón final más pegado visualmente al borde útil */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) {
    text-align: center !important;
  }
  #unitsView #cards[data-view-mode="compact"] .details-btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }



  /* v7: Cierre = mismo ancho de Apertura, botón Ver a la izquierda y continuidad visual al borde derecho */

  /* Rebalanceo de columnas (total 100%) */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 11% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 10% !important; }

  /* Apertura */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 13% !important;
    padding-right: 0.45rem !important;
  }

  /* Cierre = mismo ancho de Apertura */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 13% !important;
    padding-left: 0.7rem !important;
    padding-right: 0.45rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 12% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 9% !important; }

  /* Ver más firme al borde derecho */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 11% !important;
  }

  /* Botón VER alineado a la izquierda */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10){
    text-align: left !important;
    padding-left: 0.7rem !important;
    padding-right: 0.2rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    text-align: left !important;
    padding-left: 0.7rem !important;
    padding-right: 0.2rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .details-btn{
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Evitar choque visual Apertura/Cierre */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-date{
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Continuidad visual hasta el borde derecho */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll{
    background: linear-gradient(to bottom, #f8fafc 0 58px, #ffffff 58px 100%) !important;
    overflow: hidden !important;
  }

  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll{
    background: linear-gradient(to bottom, #0f172a 0 58px, #1e293b 58px 100%) !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:last-child{
    background: #f8fafc !important;
    border-top-right-radius: 16px !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:last-child{
    background: #ffffff !important;
    border-bottom-right-radius: 16px !important;
  }

  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:last-child{
    background: #0f172a !important;
  }

  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:last-child{
    background: #1e293b !important;
  }



  /* v8: Apertura y Cierre 10% más anchos */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 9.5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 14.3% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 14.3% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 11% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 8.9% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 10% !important; }



  /* v9: Unidad y Sync 20% más anchos */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 6% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 10.2% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 9% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){ width: 14.3% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){ width: 14.3% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 9.8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 10.68% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 9.72% !important; }



  /* v10: PROG y SYNC 15% más anchos */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 5.8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 7.6% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 9.6% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 8.6% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){ width: 13.7% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){ width: 13.7% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 7.8% !important; }

  /* PROG +15% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 11.27% !important; }

  /* SYNC +15% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 12.28% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 9.65% !important; }



  /* v11: Estado y Unidad 20% más anchos */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 6.96% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 7.3% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 9.1% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 8.2% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){ width: 13.3% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){ width: 13.3% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 9.36% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 11.27% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 12.28% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 8.93% !important; }



  /* v12: Apertura y Cierre 20% más anchos */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 6.96% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 6.7% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 8.2% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 7.5% !important; }

  /* Apertura +20% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){ width: 15.96% !important; }

  /* Cierre +20% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){ width: 15.96% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 9.36% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 10.07% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 11.28% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 8.01% !important; }



  /* v13: quitar el padding/gutter derecho para que el registro ocupe todo el ancho */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
    padding-right: 0 !important;
    margin-right: 0 !important;
    scrollbar-gutter: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tr {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Sin espacio sobrante al final */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:last-child,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:last-child {
    padding-right: 0 !important;
  }

  /* La última celda y la fila extienden su color hasta el borde */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:last-child {
    background-clip: border-box !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
    background: linear-gradient(to bottom, #f8fafc 0 58px, #ffffff 58px 100%) !important;
  }

  .dark #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
    background: linear-gradient(to bottom, #0f172a 0 58px, #1e293b 58px 100%) !important;
  }

  /* Botón VER sigue alineado a la izquierda, pero sin dejar espacio muerto a la derecha */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10) {
    text-align: left !important;
    padding-left: 0.7rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .details-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }



  /* v14: campo SYNC 20% más ancho */
  /* Se redistribuye un poco desde PROG. y VER para conservar el 100% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 9.03% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 13.54% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 6.79% !important; }



  /* v15: campo PROG. 30% más ancho */
  /* PROG. pasa de 9.03% a 11.74%. Se compensa en columnas con más aire para conservar el 100%. */

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){
    width: 6.25% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){
    width: 7.05% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 11.74% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 4.98% !important;
  }

  /* PROG. con barra más cómoda dentro del nuevo ancho */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    width: 100% !important;
    max-width: none !important;
    gap: 0.65rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .h-1\.5{
    flex: 1 1 auto !important;
    min-width: 92px !important;
    max-width: none !important;
  }



  /* v16: PROG. 30% adicional más ancho */
  /* PROG. pasa de 11.74% a 15.26%. Se compensa sin tocar Apertura, Cierre ni Sync. */

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){
    width: 6.96% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){
    width: 5.75% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){
    width: 7.45% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){
    width: 6.30% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 15.96% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 15.96% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){
    width: 8.80% !important;
  }

  /* PROG. +30% adicional */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 15.26% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    width: 13.54% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 4.02% !important;
  }

  /* Barra de progreso más amplia dentro del nuevo ancho */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    width: 100% !important;
    max-width: none !important;
    gap: 0.7rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .h-1\.5{
    flex: 1 1 auto !important;
    min-width: 122px !important;
    max-width: none !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) span{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }



  /* v17: ampliar el espacio visual entre PROG. y SYNC */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    padding-right: 1.6rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    padding-left: 1.35rem !important;
  }

  /* un poco más de aire al contenido interno de progreso */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    gap: 0.95rem !important;
  }



  /* v18: separación fuerte y visible entre PROG. y SYNC */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    padding-right: 2.8rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    padding-left: 2.4rem !important;
  }

  /* separar también visualmente el contenido interno */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    gap: 1.2rem !important;
  }

  /* garantizar espacio real entre ambas columnas */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 14.1% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    width: 14.8% !important;
  }

  /* compensación leve para mantener la tabla estable */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){
    width: 5.15% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 3.92% !important;
  }



  /*
    v19: Separación real entre PROG. y SYNC.
    Se corrige desde 3 capas:
    1) colgroup real del HTML
    2) ancho de columnas por CSS
    3) margen visible en el texto de Sync
  */

  #unitsView #cards[data-view-mode="compact"] .units-compact-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Los anchos coinciden con el colgroup actualizado */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 6% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 7% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 7% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){ width: 16% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){ width: 16% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 9% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 16% !important;
    padding-right: 2.4rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    width: 14% !important;
    padding-left: 2.2rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 4% !important; }

  /* Separa 100% de la fecha Sync, aunque el navegador comprima padding */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) span{
    margin-right: 1.75rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-sync{
    display: inline-block !important;
    margin-left: 1.75rem !important;
    transform: translateX(12px);
    white-space: nowrap !important;
  }

  /* Barra y porcentaje con más aire interno */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    gap: 1.05rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .h-1\.5{
    min-width: 110px !important;
  }



  /* v20: acercar PROG y SYNC, y mover VER un poco hacia la izquierda para más simetría */

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 15% !important;
    padding-right: 1.15rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    width: 13% !important;
    padding-left: 1rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 6% !important;
  }

  /* Quitar la separación exagerada entre 100% y Sync */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) span{
    margin-right: 0.55rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-sync{
    display: inline-block !important;
    margin-left: 0.45rem !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  /* Menor gap interno en la celda PROG */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    gap: 0.65rem !important;
  }

  /* Botón VER menos pegado al borde derecho */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10){
    text-align: left !important;
    padding-left: 0.55rem !important;
    padding-right: 0.25rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    text-align: left !important;
    padding-left: 0.55rem !important;
    padding-right: 0.2rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .details-btn{
    margin-left: 0.1rem !important;
    margin-right: 0 !important;
  }



  /* v21: más separación visual entre Unidad, Alias, Inicial, Final y Apertura */

  /* Un poco más de aire entre las primeras columnas */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){
    width: 6.5% !important;
    padding-right: 1.15rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){
    width: 6.3% !important;
    padding-left: 1rem !important;
    padding-right: 1.25rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){
    width: 7.9% !important;
    padding-left: 1rem !important;
    padding-right: 1.35rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){
    width: 8.6% !important;
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 17% !important;
    padding-left: 1.15rem !important;
    padding-right: 1rem !important;
  }

  /* Compensación ligera para no desbordar la tabla */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 15.2% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 14.4% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){
    width: 12.3% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){
    width: 5.8% !important;
  }



  /* v22: Inicial +20%, Apertura +20%, y estado con formato condicional pastel */

  #unitsView #cards[data-view-mode="compact"] .units-compact-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Reforzar anchos de columnas para que coincidan con el colgroup */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 6% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 5% !important; }

  /* Inicial +20% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){
    width: 8.4% !important;
    padding-left: 1rem !important;
    padding-right: 1.35rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){
    width: 6% !important;
    padding-left: 1rem !important;
    padding-right: 1.25rem !important;
  }

  /* Apertura +20% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 19.2% !important;
    padding-left: 1.2rem !important;
    padding-right: 1rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 14.5% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 9% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 14% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 11.9% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 6% !important; }

  /* Badge pastel para Estado */
  #unitsView #cards[data-view-mode="compact"] .estado-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42rem !important;
    border-radius: 9999px !important;
    padding: 0.34rem 0.72rem !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #unitsView #cards[data-view-mode="compact"] .estado-chip__dot {
    width: 0.46rem !important;
    height: 0.46rem !important;
    border-radius: 9999px !important;
    flex: 0 0 auto !important;
  }

  #unitsView #cards[data-view-mode="compact"] .estado-chip--success {
    background: #dcfce7 !important;   /* verde pastel */
    color: #166534 !important;        /* verde más oscuro */
  }

  #unitsView #cards[data-view-mode="compact"] .estado-chip__dot--success {
    background: #22c55e !important;
  }

  #unitsView #cards[data-view-mode="compact"] .estado-chip--danger {
    background: #fee2e2 !important;   /* rojo pastel */
    color: #991b1b !important;        /* rojo más oscuro */
  }

  #unitsView #cards[data-view-mode="compact"] .estado-chip__dot--danger {
    background: #ef4444 !important;
  }

  /* Estado intermedio/advertencia si luego agregas otros estados */
  #unitsView #cards[data-view-mode="compact"] .estado-chip--warning {
    background: #fef3c7 !important;   /* amarillo pastel */
    color: #92400e !important;        /* ámbar oscuro */
  }

  #unitsView #cards[data-view-mode="compact"] .estado-chip__dot--warning {
    background: #f59e0b !important;
  }



  /* v23: ajustar Unidad, Alias, Inicial, Final, Apertura y Cierre */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 6.5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){
    width: 8.5% !important;
    padding-left: 0.95rem !important;
    padding-right: 1.05rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){
    width: 8.5% !important;
    padding-left: 0.9rem !important;
    padding-right: 1.05rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){
    width: 11.5% !important;
    padding-left: 0.95rem !important;
    padding-right: 1.35rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 18% !important;
    padding-left: 1.15rem !important;
    padding-right: 1rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 12.5% !important;
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 10% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){ width: 12% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 8% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 4.5% !important; }

  /* Alias sin verse tan cortado */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-alias {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Final y Apertura con mejor separación visual */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-money {
    letter-spacing: -0.01em !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table .units-compact-date {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }



  /* v24: reducir 20% el ancho de Apertura, Cierre y Prog. */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1){ width: 6.5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2){ width: 9.5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3){ width: 8.5% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4){ width: 12.5% !important; }

  /* Apertura -20% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(5),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(5){
    width: 14.4% !important;
    padding-left: 1rem !important;
    padding-right: 0.9rem !important;
  }

  /* Cierre -20% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(6),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(6){
    width: 10% !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(7),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(7){ width: 11.5% !important; }

  /* Progreso -20% */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(8),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8){
    width: 9.6% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.9rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(9),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(9){ width: 11% !important; }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th:nth-child(10),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(10){ width: 6.5% !important; }

  /* Ajuste visual interno de la barra de progreso */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) > div{
    gap: 0.55rem !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .h-1\.5{
    min-width: 72px !important;
  }



  /* v25: en móvil la tabla debe desplazarse horizontalmente */
  @media (max-width: 767.98px) {
    #unitsView #cards[data-view-mode="compact"] {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      overflow: visible !important;
    }

    #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll {
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior-x: contain !important;
      max-width: 100% !important;
      width: 100% !important;
      padding-bottom: 0.4rem !important;
      scrollbar-gutter: auto !important;
    }

    #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll::-webkit-scrollbar {
      height: 8px !important;
    }

    #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll::-webkit-scrollbar-track {
      background: transparent !important;
    }

    #unitsView #cards[data-view-mode="compact"] .units-compact-table-scroll::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.75) !important;
      border-radius: 9999px !important;
    }

    /* ancho mínimo amplio para forzar scroll horizontal en móvil */
    #unitsView #cards[data-view-mode="compact"] .units-compact-table,
    #unitsView #cards[data-view-mode="compact"] .units-compact-table thead,
    #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody {
      min-width: 1280px !important;
      width: 1280px !important;
      table-layout: fixed !important;
    }

    #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th,
    #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td {
      white-space: nowrap !important;
    }
  }



  /* v26: encabezados en formato Aa, no en mayúscula sostenida */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead th {
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-weight: 900 !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table thead tr {
    text-transform: none !important;
  }



  /* v28: encabezados intactos; ajuste solo en registros */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(1) *,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(2) * {
    font-weight: 500 !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4),
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(3) *,
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(4) * {
    font-weight: 900 !important;
  }



  /* v29: vista de cuadrícula móvil mucho más compacta verticalmente */
  @media (max-width: 767.98px) {
    /* menos separación entre tarjetas */
    #unitsView #cards:not([data-view-mode="compact"]) {
      gap-row: 0.55rem !important;
      gap-column: 0.55rem !important;
      row-gap: 0.55rem !important;
      column-gap: 0.55rem !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* tarjeta más baja */
    #unitsView #cards:not([data-view-mode="compact"]) .unit-card {
      padding: 0.85rem !important;
      border-radius: 1rem !important;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10) !important;
    }

    /* bloque superior Unidad */
    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.justify-between.items-start.mb-6 {
      margin-bottom: 0.7rem !important;
      align-items: center !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.justify-between.items-start.mb-6 p.text-sm {
      font-size: 0.68rem !important;
      line-height: 0.9rem !important;
      margin-bottom: 0.08rem !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.justify-between.items-start.mb-6 p.text-4xl {
      font-size: 1.35rem !important;
      line-height: 1.4rem !important;
      font-weight: 800 !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.justify-between.items-start.mb-6 p.text-lg {
      font-size: 0.92rem !important;
      line-height: 1.1rem !important;
    }

    /* bloque Caja Inicial / Caja Final */
    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.items-center.justify-between.border-t.border-b {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
      margin-bottom: 0.55rem !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.items-center.justify-between.border-t.border-b p.text-sm {
      font-size: 0.66rem !important;
      line-height: 0.9rem !important;
      margin-bottom: 0.1rem !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.items-center.justify-between.border-t.border-b p.text-xl {
      font-size: 0.96rem !important;
      line-height: 1.05rem !important;
      font-weight: 800 !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card > div.flex.items-center.justify-between.border-t.border-b span.text-2xl {
      font-size: 1rem !important;
      line-height: 1rem !important;
      margin-left: 0.25rem !important;
      margin-right: 0.25rem !important;
    }

    /* bloque de detalles */
    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .space-y-3 {
      gap: 0.3rem !important;
      row-gap: 0.3rem !important;
      font-size: 0.76rem !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .space-y-3 > div.flex.justify-between {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      line-height: 1rem !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .space-y-3 > div.flex.justify-between span,
    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .space-y-3 > div.flex.justify-between p {
      font-size: 0.76rem !important;
      line-height: 1rem !important;
    }

    /* progreso y sincronización */
    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .mt-5.pb-0.mb-0 {
      margin-top: 0.45rem !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .mt-5.pb-0.mb-0 .w-full {
      margin-top: 0.3rem !important;
      height: 0.42rem !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .mt-5.pb-0.mb-0 .w-full > div {
      height: 0.42rem !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .mt-5.pb-0.mb-0 p {
      margin-top: 0.3rem !important;
      margin-bottom: 0 !important;
      font-size: 0.69rem !important;
      line-height: 0.95rem !important;
    }

    /* botón ver detalles más pequeño */
    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .details-btn {
      margin-top: 0.65rem !important;
      padding-top: 0.55rem !important;
      padding-bottom: 0.55rem !important;
      padding-left: 0.85rem !important;
      padding-right: 0.85rem !important;
      border-radius: 0.75rem !important;
      font-size: 0.8rem !important;
      line-height: 1rem !important;
      min-height: 36px !important;
    }

    #unitsView #cards:not([data-view-mode="compact"]) .unit-card .details-btn .material-symbols-outlined {
      font-size: 1rem !important;
      margin-left: 0.25rem !important;
    }
  }



  .cliente-mobile-toggle-btn{ display:none; }

  .admin-mobile-subitem{
    display:flex;
    align-items:center;
    gap:0.7rem;
    width:100%;
    text-align:left;
    padding:0.72rem 0.85rem;
    border-radius:0.85rem;
    font-size:0.92rem;
    font-weight:700;
    color:#334155;
    background:transparent;
  }
  .admin-mobile-subitem:hover{ background:rgba(148,163,184,0.14); }
  .admin-mobile-subicon{ font-size:1.25rem; color:#64748b; }
  .dark .admin-mobile-subitem{ color:#e2e8f0; }
  .dark .admin-mobile-subicon{ color:#94a3b8; }

  .cliente-mobile-estado-header,
  .col-estado-mobile{ display:none; }

  @media (min-width: 768px){
    #panelClienteVentasPagos .cliente-mobile-extra-row,
    #panelClienteVentasPagos .cliente-mobile-toggle-btn,
    #panelClienteVentasPagos .cliente-mobile-ver-col,
    #panelClienteVentasPagos .cliente-mobile-estado-header,
    #panelClienteVentasPagos .col-estado-mobile{
      display:none !important;
    }

    #clienteVentasBody tr.cliente-venta-row-selected > td{
      background:rgba(0,173,87,0.10) !important;
    }
  }

  @media (max-width: 767.98px){
    #clienteTabsCard{
      padding-left:0 !important;
      padding-right:0 !important;
    }

    #panelClienteVentasPagos{
      padding-left:0 !important;
      padding-right:0 !important;
    }

    #panelClienteVentasPagos section{
      max-width:100% !important;
      overflow:visible !important;
      padding-left:0 !important;
      padding-right:0 !important;
    }

    #panelClienteVentasPagos section > h3,
    #panelClienteVentasPagos section > .mb-3{
      padding-left:0.75rem !important;
      padding-right:0.75rem !important;
    }

    #panelClienteVentasPagos .overflow-x-auto{
      overflow-x:auto !important;
      overflow-y:visible !important;
      -webkit-overflow-scrolling:touch !important;
      overscroll-behavior-x:contain !important;
      width:100% !important;
      max-width:100% !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      padding:0 !important;
      margin:0 !important;
      box-shadow:none !important;
    }

    #panelClienteVentasPagos .overflow-x-auto::-webkit-scrollbar{ height:5px !important; }
    #panelClienteVentasPagos .overflow-x-auto::-webkit-scrollbar-thumb{
      background:rgba(148,163,184,.68) !important;
      border-radius:9999px !important;
    }
    #panelClienteVentasPagos .overflow-x-auto::-webkit-scrollbar-track{ background:transparent !important; }

    #panelClienteVentasPagos table{
      display:table !important;
      table-layout:fixed !important;
      width:100% !important;
      min-width:100% !important;
      border-collapse:separate !important;
      border-spacing:0 !important;
      background:#ffffff !important;
    }

    #panelClienteVentasPagos thead{ display:table-header-group !important; }
    #panelClienteVentasPagos thead tr,
    #panelClienteVentasPagos tbody tr{ display:table-row !important; }
    #panelClienteVentasPagos tbody{
      display:table-row-group !important;
      background:#ffffff !important;
    }

    #panelClienteVentasPagos thead th,
    #panelClienteVentasPagos tbody td{
      display:table-cell !important;
      vertical-align:middle !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
      background:#ffffff !important;
      border-bottom:1px solid #f1f5f9 !important;
      box-sizing:border-box !important;
    }

    #panelClienteVentasPagos thead th{
      text-align:center !important;
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:0.67rem !important;
      line-height:0.78rem !important;
      font-weight:900 !important;
      padding:0.50rem 0.18rem !important;
      text-transform:none !important;
      letter-spacing:0 !important;
    }

    #panelClienteVentasPagos tbody td{
      text-align:center !important;
      color:#0f172a !important;
      font-size:0.72rem !important;
      line-height:0.86rem !important;
      padding:0.54rem 0.18rem !important;
    }

    /* ========= VENTAS =========
       Visible full width: # | Venta | Saldo | Cuota | Estado | Flecha */
    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(5),
    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(6),
    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(7),
    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(8),
    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(9),
    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(10),
    #clienteVentasBody tr.cliente-venta-row > td.col-caja,
    #clienteVentasBody tr.cliente-venta-row > td.col-cajas,
    #clienteVentasBody tr.cliente-venta-row > td.col-inicio,
    #clienteVentasBody tr.cliente-venta-row > td.col-fin,
    #clienteVentasBody tr.cliente-venta-row > td.col-atraso,
    #clienteVentasBody tr.cliente-venta-row > td.col-estado{
      display:none !important;
    }

    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(1),
    #clienteVentasBody tr.cliente-venta-row > td.col-numero{
      width:7% !important;
      font-weight:900 !important;
    }

    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(2),
    #clienteVentasBody tr.cliente-venta-row > td.col-venta{
      width:24% !important;
      font-weight:900 !important;
    }

    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(3),
    #clienteVentasBody tr.cliente-venta-row > td.col-saldo{
      width:24% !important;
      font-weight:800 !important;
    }

    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(4),
    #clienteVentasBody tr.cliente-venta-row > td.col-cuota{
      width:22% !important;
      font-weight:800 !important;
    }

    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(11),
    #clienteVentasBody tr.cliente-venta-row > td.col-estado-mobile{
      display:table-cell !important;
      width:10% !important;
    }

    #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(12),
    #clienteVentasBody tr.cliente-venta-row > td.col-ver-detalle{
      width:13% !important;
      overflow:visible !important;
      text-overflow:clip !important;
    }

    .cliente-estado-letter{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:22px !important;
      height:22px !important;
      border-radius:9999px !important;
      font-size:0.70rem !important;
      font-weight:900 !important;
      line-height:1 !important;
    }
    .cliente-estado-letter--ok{ background:#dcfce7 !important; color:#166534 !important; }
    .cliente-estado-letter--bad{ background:#fee2e2 !important; color:#991b1b !important; }

    #clienteVentasBody tr.cliente-venta-row-selected > td,
    #clienteVentasBody tr.cliente-venta-row-selected.is-open > td{
      background:rgba(0,173,87,0.14) !important;
    }

    #clienteVentasBody tr.cliente-venta-row-selected > td:first-child{
      box-shadow:inset 3px 0 0 #00AD57 !important;
    }

    /* ========= PAGOS =========
       Visible full width: # | Valor pago | Cuotas | Fecha | Atraso */
    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(4),
    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(6),
    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(7),
    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(8),
    #clientePagosBody tr.cliente-pago-row > td.col-saldo,
    #clientePagosBody tr.cliente-pago-row > td.col-caja,
    #clientePagosBody tr.cliente-pago-row > td.col-motivo,
    #clientePagosBody tr.cliente-pago-row > td.col-atraso{
      display:none !important;
    }

    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(1),
    #clientePagosBody tr.cliente-pago-row > td.col-numero{
      width:8% !important;
      font-weight:900 !important;
    }

    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(2),
    #clientePagosBody tr.cliente-pago-row > td.col-valor-pago{
      width:28% !important;
      font-weight:900 !important;
    }

    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(3),
    #clientePagosBody tr.cliente-pago-row > td.col-cuotas{
      width:18% !important;
      font-weight:800 !important;
    }

    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(5),
    #clientePagosBody tr.cliente-pago-row > td.col-fecha{
      width:32% !important;
      font-weight:800 !important;
    }

    #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(9),
    #clientePagosBody tr.cliente-pago-row > td.col-atraso-mobile{
      width:14% !important;
      overflow:visible !important;
      text-overflow:clip !important;
    }

    #clientePagosBody tr.cliente-pago-row{
      cursor:pointer !important;
    }

    #clientePagosBody tr.cliente-pago-row.is-open > td{
      background:#f8fafc !important;
    }

    .cliente-mobile-toggle-btn{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:28px !important;
      height:28px !important;
      margin:0 auto !important;
      border:1px solid #d1d5db !important;
      background:#f3f4f6 !important;
      color:#64748b !important;
      padding:0 !important;
      box-shadow:0 1px 2px rgba(15,23,42,.08) !important;
      border-radius:9999px !important;
      touch-action:manipulation !important;
    }

    .cliente-mobile-toggle-icon{
      font-size:21px !important;
      line-height:1 !important;
      color:#64748b !important;
      transition:transform 160ms ease !important;
      pointer-events:none !important;
    }

    tr.is-open .cliente-mobile-toggle-icon{ transform:rotate(180deg) !important; }

    #clienteVentasBody tr.cliente-mobile-extra-row,
    #clientePagosBody tr.cliente-mobile-extra-row{ display:none !important; }

    #clienteVentasBody tr.cliente-mobile-extra-row.open,
    #clientePagosBody tr.cliente-mobile-extra-row.open{ display:table-row !important; }

    #clienteVentasBody tr.cliente-mobile-extra-row.open > td,
    #clientePagosBody tr.cliente-mobile-extra-row.open > td{
      display:table-cell !important;
      padding:0 !important;
      background:#ffffff !important;
      border-bottom:1px solid #e2e8f0 !important;
      white-space:normal !important;
      overflow:visible !important;
    }

    /* Desplegables más grandes y con padding vertical */
    .cliente-mobile-detail-card{
      width:100% !important;
      min-width:100% !important;
      background:#f8fafc !important;
      border-top:1px solid #e2e8f0 !important;
      padding:0.95rem 0.72rem !important;
      box-sizing:border-box !important;
    }

    .cliente-mobile-detail-grid{
      display:grid !important;
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:0.8rem 0.85rem !important;
    }

    .cliente-mobile-detail-grid > div{
      display:flex !important;
      flex-direction:column !important;
      min-width:0 !important;
      text-align:left !important;
    }

    .cliente-mobile-label{
      font-size:0.72rem !important;
      line-height:0.86rem !important;
      color:#64748b !important;
      margin-bottom:0.14rem !important;
      font-weight:900 !important;
    }

    .cliente-mobile-value{
      font-size:0.82rem !important;
      line-height:0.98rem !important;
      color:#0f172a !important;
      font-weight:850 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
  }



  @media (max-width: 900px){
    body #clienteTabsCard,
    body #panelClienteVentasPagos{
      padding-left:0 !important;
      padding-right:0 !important;
    }

    body #panelClienteVentasPagos section{
      max-width:100% !important;
      overflow:visible !important;
      padding-left:0 !important;
      padding-right:0 !important;
    }

    body #panelClienteVentasPagos section > h3,
    body #panelClienteVentasPagos section > .mb-3{
      padding-left:0.75rem !important;
      padding-right:0.75rem !important;
    }

    body #panelClienteVentasPagos .overflow-x-auto{
      overflow-x:auto !important;
      overflow-y:visible !important;
      -webkit-overflow-scrolling:touch !important;
      width:100% !important;
      max-width:100% !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      padding:0 !important;
      margin:0 !important;
      box-shadow:none !important;
    }

    body #panelClienteVentasPagos table{
      display:table !important;
      width:100% !important;
      min-width:100% !important;
      table-layout:fixed !important;
      border-collapse:separate !important;
      border-spacing:0 !important;
      background:#fff !important;
    }

    body #panelClienteVentasPagos thead{ display:table-header-group !important; }
    body #panelClienteVentasPagos tbody{ display:table-row-group !important; }
    body #panelClienteVentasPagos tr{ display:table-row !important; }

    body #panelClienteVentasPagos thead th,
    body #panelClienteVentasPagos tbody td{
      display:table-cell !important;
      vertical-align:middle !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
      background:#fff !important;
      border-bottom:1px solid #eef2f7 !important;
      box-sizing:border-box !important;
      text-align:center !important;
    }

    body #panelClienteVentasPagos thead th{
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:0.72rem !important;
      line-height:0.88rem !important;
      font-weight:900 !important;
      padding:0.58rem 0.18rem !important;
      text-transform:none !important;
      letter-spacing:0 !important;
    }

    body #panelClienteVentasPagos tbody td{
      color:#0f172a !important;
      font-size:0.78rem !important;
      line-height:0.96rem !important;
      padding:0.62rem 0.18rem !important;
    }

    /* VENTAS: # | Venta | Saldo | Cuota | Estado | Flecha */
    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(5),
    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(6),
    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(7),
    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(8),
    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(9),
    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(10),
    body #clienteVentasBody tr.cliente-venta-row > td.col-caja,
    body #clienteVentasBody tr.cliente-venta-row > td.col-cajas,
    body #clienteVentasBody tr.cliente-venta-row > td.col-inicio,
    body #clienteVentasBody tr.cliente-venta-row > td.col-fin,
    body #clienteVentasBody tr.cliente-venta-row > td.col-atraso,
    body #clienteVentasBody tr.cliente-venta-row > td.col-estado{
      display:none !important;
    }

    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(1),
    body #clienteVentasBody tr.cliente-venta-row > td.col-numero{ width:7% !important; font-weight:900 !important; }

    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(2),
    body #clienteVentasBody tr.cliente-venta-row > td.col-venta{ width:24% !important; font-weight:900 !important; }

    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(3),
    body #clienteVentasBody tr.cliente-venta-row > td.col-saldo{ width:24% !important; font-weight:850 !important; }

    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(4),
    body #clienteVentasBody tr.cliente-venta-row > td.col-cuota{ width:22% !important; font-weight:850 !important; }

    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(11),
    body #clienteVentasBody tr.cliente-venta-row > td.col-estado-mobile{
      display:table-cell !important;
      width:10% !important;
    }

    body #panelClienteVentasPagos .cliente-ventas-table thead th:nth-child(12),
    body #clienteVentasBody tr.cliente-venta-row > td.col-ver-detalle{
      width:13% !important;
      overflow:visible !important;
      text-overflow:clip !important;
    }

    body .cliente-estado-letter{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:24px !important;
      height:24px !important;
      border-radius:9999px !important;
      font-size:0.76rem !important;
      font-weight:900 !important;
      line-height:1 !important;
    }

    body .cliente-estado-letter--ok{ background:#dcfce7 !important; color:#166534 !important; }
    body .cliente-estado-letter--bad{ background:#fee2e2 !important; color:#991b1b !important; }

    body #clienteVentasBody tr.cliente-venta-row-selected > td,
    body #clienteVentasBody tr.cliente-venta-row-selected.is-open > td{
      background:rgba(0,173,87,0.14) !important;
    }

    body #clienteVentasBody tr.cliente-venta-row-selected > td:first-child{
      box-shadow:inset 3px 0 0 #00AD57 !important;
    }

    /* PAGOS: # | Valor pago | Cuotas | Fecha | Atraso */
    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(4),
    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(6),
    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(7),
    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(8),
    body #clientePagosBody tr.cliente-pago-row > td.col-saldo,
    body #clientePagosBody tr.cliente-pago-row > td.col-caja,
    body #clientePagosBody tr.cliente-pago-row > td.col-motivo,
    body #clientePagosBody tr.cliente-pago-row > td.col-atraso{
      display:none !important;
    }

    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(1),
    body #clientePagosBody tr.cliente-pago-row > td.col-numero{ width:8% !important; font-weight:900 !important; }

    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(2),
    body #clientePagosBody tr.cliente-pago-row > td.col-valor-pago{ width:28% !important; font-weight:900 !important; }

    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(3),
    body #clientePagosBody tr.cliente-pago-row > td.col-cuotas{ width:18% !important; font-weight:850 !important; }

    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(5),
    body #clientePagosBody tr.cliente-pago-row > td.col-fecha{ width:32% !important; font-weight:850 !important; }

    body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(9),
    body #clientePagosBody tr.cliente-pago-row > td.col-atraso-mobile{
      width:14% !important;
      overflow:visible !important;
      text-overflow:clip !important;
    }

    body #panelClienteVentasPagos .cliente-pagos-table thead th.cliente-mobile-ver-col{
      font-size:0 !important;
    }
    body #panelClienteVentasPagos .cliente-pagos-table thead th.cliente-mobile-ver-col::after{
      content:'Atraso' !important;
      font-size:0.72rem !important;
      line-height:0.88rem !important;
      font-weight:900 !important;
    }

    body #clientePagosBody tr.cliente-pago-row{ cursor:pointer !important; }
    body #clientePagosBody tr.cliente-pago-row.is-open > td{ background:#f8fafc !important; }

    body .cliente-mobile-toggle-btn{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:30px !important;
      height:30px !important;
      margin:0 auto !important;
      border:1px solid #d1d5db !important;
      background:#f3f4f6 !important;
      color:#64748b !important;
      padding:0 !important;
      box-shadow:0 1px 2px rgba(15,23,42,.08) !important;
      border-radius:9999px !important;
      touch-action:manipulation !important;
    }

    body .cliente-mobile-toggle-icon{
      font-size:23px !important;
      line-height:1 !important;
      color:#64748b !important;
      transition:transform 160ms ease !important;
      pointer-events:none !important;
    }

    body tr.is-open .cliente-mobile-toggle-icon{ transform:rotate(180deg) !important; }

    body #clienteVentasBody tr.cliente-mobile-extra-row,
    body #clientePagosBody tr.cliente-mobile-extra-row{ display:none !important; }

    body #clienteVentasBody tr.cliente-mobile-extra-row.open,
    body #clientePagosBody tr.cliente-mobile-extra-row.open{ display:table-row !important; }

    body #clienteVentasBody tr.cliente-mobile-extra-row.open > td,
    body #clientePagosBody tr.cliente-mobile-extra-row.open > td{
      display:table-cell !important;
      padding:0 !important;
      background:#fff !important;
      border-bottom:1px solid #e2e8f0 !important;
      white-space:normal !important;
      overflow:visible !important;
    }

    body .cliente-mobile-detail-card{
      width:100% !important;
      min-width:100% !important;
      background:#f8fafc !important;
      border-top:1px solid #e2e8f0 !important;
      padding:1.05rem 0.8rem !important;
      box-sizing:border-box !important;
    }

    body .cliente-mobile-detail-grid{
      display:grid !important;
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:0.9rem 0.9rem !important;
    }

    body .cliente-mobile-detail-grid > div{
      display:flex !important;
      flex-direction:column !important;
      min-width:0 !important;
      text-align:left !important;
    }

    body .cliente-mobile-label{
      font-size:0.76rem !important;
      line-height:0.9rem !important;
      color:#64748b !important;
      margin-bottom:0.18rem !important;
      font-weight:900 !important;
    }

    body .cliente-mobile-value{
      font-size:0.88rem !important;
      line-height:1.05rem !important;
      color:#0f172a !important;
      font-weight:900 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
  }



  @media (max-width: 900px){
    /* En registros NO negrita. Solo encabezados y labels de detalle. */
    body #panelClienteVentasPagos tbody td,
    body #panelClienteVentasPagos tbody td *,
    body #aprobacionesView tbody td,
    body #aprobacionesView tbody td *{
      font-weight:400 !important;
    }

    body #panelClienteVentasPagos thead th,
    body #aprobacionesView thead th,
    body .cliente-mobile-label,
    body .aprob-mobile-label{
      font-weight:900 !important;
    }

    body .cliente-mobile-value,
    body .aprob-mobile-value{
      font-weight:400 !important;
    }

    /* Aprobaciones: quitar contenedores visuales para ganar ancho */
    body #aprobacionesView > div.max-w-6xl{
      max-width:none !important;
      width:100% !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }

    body #aprobacionesView > div.max-w-6xl > div{
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      padding-left:0 !important;
      padding-right:0 !important;
      background:#fff !important;
    }

    body #aprobacionesView main{
      width:100% !important;
      padding-left:0 !important;
      padding-right:0 !important;
    }

    body #aprobacionesView main > section{
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      padding-left:0 !important;
      padding-right:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }

    body #aprobacionesView main > section > .flex{
      padding-left:0.75rem !important;
      padding-right:0.75rem !important;
    }

    body #aprobacionesView .overflow-x-auto{
      overflow-x:auto !important;
      overflow-y:visible !important;
      -webkit-overflow-scrolling:touch !important;
      width:100% !important;
      max-width:100% !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      padding:0 !important;
      margin:0 !important;
      box-shadow:none !important;
    }

    body #aprobacionesView table.aprob-ventas-table,
    body #aprobacionesView table.aprob-movs-table{
      display:table !important;
      width:100% !important;
      min-width:100% !important;
      table-layout:fixed !important;
      border-collapse:separate !important;
      border-spacing:0 !important;
      background:#fff !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead,
    body #aprobacionesView table.aprob-movs-table thead{
      display:table-header-group !important;
    }

    body #aprobacionesView table.aprob-ventas-table tbody,
    body #aprobacionesView table.aprob-movs-table tbody{
      display:table-row-group !important;
      background:#fff !important;
    }

    body #aprobacionesView table.aprob-ventas-table tr,
    body #aprobacionesView table.aprob-movs-table tr{
      display:table-row !important;
    }

    body #aprobacionesView table.aprob-ventas-table th,
    body #aprobacionesView table.aprob-ventas-table td,
    body #aprobacionesView table.aprob-movs-table th,
    body #aprobacionesView table.aprob-movs-table td{
      display:table-cell !important;
      vertical-align:middle !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
      background:#fff !important;
      border-bottom:1px solid #eef2f7 !important;
      box-sizing:border-box !important;
      text-align:center !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead th,
    body #aprobacionesView table.aprob-movs-table thead th{
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:0.72rem !important;
      line-height:0.86rem !important;
      padding:0.58rem 0.14rem !important;
      text-transform:none !important;
      letter-spacing:0 !important;
    }

    body #aprobacionesView table.aprob-ventas-table tbody td,
    body #aprobacionesView table.aprob-movs-table tbody td{
      color:#0f172a !important;
      font-size:0.78rem !important;
      line-height:0.95rem !important;
      padding:0.64rem 0.14rem !important;
    }

    /* Aprobaciones Ventas:
       Visible: checkbox | Alias | Cliente | Valor venta | Valor cuota.
       Sin columna Ver. Tap en fila abre detalle. */
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(2),
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(7),
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(8),
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(9),
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(10),
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(11),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-unidad,
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-cuotas,
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-periodicidad,
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-interes,
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-renovada,
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-hora{
      display:none !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(1),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-check{ width:9% !important; }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(3),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-alias{ width:20% !important; }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(4),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-cliente{ width:29% !important; }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(5),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-valor{ width:21% !important; }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(6),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-cuota{ width:21% !important; }

    /* Aprobaciones Movs/Pagos:
       Visible: checkbox | Alias | Categoría | Tipo | Valor.
       Sin columna Ver. Tap en fila abre detalle. */
    body #aprobacionesView table.aprob-movs-table thead th:nth-child(2),
    body #aprobacionesView table.aprob-movs-table thead th:nth-child(7),
    body #aprobacionesView table.aprob-movs-table thead th:nth-child(8),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-unidad,
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-motivo,
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-hora{
      display:none !important;
    }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(1),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-check{ width:9% !important; }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(3),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-alias{ width:24% !important; }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(4),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-categoria{ width:21% !important; }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(5),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-tipo{ width:21% !important; }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(6),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-valor{ width:25% !important; }

    body #aprobVentasBody tr.aprob-venta-row,
    body #aprobMovsBody tr.aprob-mov-row{
      cursor:pointer !important;
    }

    body #aprobVentasBody tr.aprob-mobile-extra-row,
    body #aprobMovsBody tr.aprob-mobile-extra-row{
      display:none !important;
    }

    body #aprobVentasBody tr.aprob-mobile-extra-row.open,
    body #aprobMovsBody tr.aprob-mobile-extra-row.open{
      display:table-row !important;
    }

    body #aprobVentasBody tr.aprob-mobile-extra-row.open > td,
    body #aprobMovsBody tr.aprob-mobile-extra-row.open > td{
      display:table-cell !important;
      padding:0 !important;
      background:#fff !important;
      border-bottom:1px solid #e2e8f0 !important;
      white-space:normal !important;
      overflow:visible !important;
    }

    body #aprobVentasBody tr.aprob-venta-row.is-open > td,
    body #aprobMovsBody tr.aprob-mov-row.is-open > td{
      background:#f8fafc !important;
    }

    body .aprob-mobile-detail-card{
      width:100% !important;
      min-width:100% !important;
      background:#f8fafc !important;
      border-top:1px solid #e2e8f0 !important;
      padding:1rem 0.8rem !important;
      box-sizing:border-box !important;
    }

    body .aprob-mobile-detail-grid{
      display:grid !important;
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:0.85rem 0.9rem !important;
    }

    body .aprob-mobile-detail-grid > div{
      display:flex !important;
      flex-direction:column !important;
      min-width:0 !important;
      text-align:left !important;
    }

    body .aprob-mobile-label{
      font-size:0.74rem !important;
      line-height:0.9rem !important;
      color:#64748b !important;
      margin-bottom:0.16rem !important;
    }

    body .aprob-mobile-value{
      font-size:0.86rem !important;
      line-height:1.02rem !important;
      color:#0f172a !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
  }



  #dvDetalladoWrapper .dv-type-header-cell { position: relative; overflow: visible; }
  #dvDetalladoWrapper .dv-type-header-btn {
    display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent;
    color: inherit; font: inherit; font-weight: inherit; padding: .15rem 0; cursor: pointer; white-space: nowrap;
  }
  #dvDetalladoWrapper .dv-type-header-btn:hover,
  #dvDetalladoWrapper .dv-type-header-btn[aria-expanded="true"] { color: #00AD57; }
  #dvDetalladoWrapper .dv-type-header-btn .material-symbols-outlined { font-size: 17px; line-height: 1; }
  #dvDetalladoWrapper .dv-type-header-btn.is-filtered::after {
    content: ''; width: 6px; height: 6px; border-radius: 9999px; background: #00AD57;
    box-shadow: 0 0 0 2px #fff;
  }
  .dv-type-menu {
    position: fixed; z-index: 100000; width: min(245px, calc(100vw - 24px));
    border: 1px solid #e2e8f0; border-radius: 16px; background: #fff;
    color: #0f172a; padding: 6px; box-shadow: 0 16px 38px rgba(15,23,42,.18);
  }
  .dv-type-menu.hidden { display: none !important; }
  .dv-type-options { max-height: 260px; overflow-y: auto; display: grid; gap: 2px; }
  .dv-type-option {
    width: 100%; display: flex; align-items: center; gap: 9px; border-radius: 10px;
    background: transparent; color: #334155; padding: 9px 11px;
    text-align: left; font-size: .79rem; font-weight: 700; cursor: pointer;
  }
  .dv-type-option:hover { background: rgba(0,173,87,.09); color: #008f48; }
  .dv-type-option input {
    appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-width: 16px;
    border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; cursor: pointer;
  }
  .dv-type-option input:checked {
    border-color: #00AD57; background-color: #00AD57;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  }
  .dv-type-empty { padding: 12px 9px; color: #94a3b8; font-size: .76rem; text-align: center; }
  .dark .dv-type-menu { border-color: #334155; background: #0f172a; color: #e2e8f0; }
  .dark .dv-type-option { color: #cbd5e1; }
  .dark .dv-type-option input { border-color: #475569; background-color: #1e293b; }
  .dark .dv-type-option input:checked { border-color: #00AD57; background-color: #00AD57; }



  #clientesView #clientesUnidadDesktopBtn{
    height:44px !important;
    min-height:44px !important;
    border-radius:9999px !important;
    border:1px solid #dbe5f1 !important;
    background:#ffffff !important;
    color:#0f172a !important;
    box-shadow:none !important;
  }
  #clientesView #clientesUnidadDesktopBtn:hover{
    border-color:#cbd5e1 !important;
    background:#ffffff !important;
  }
  #clientesView #clientesUnidadDesktopBtn:focus,
  #clientesView #clientesUnidadDesktopBtn:focus-visible{
    outline:none !important;
    border-color:#b7c6d8 !important;
    box-shadow:0 0 0 3px rgba(0,173,87,0.10) !important;
  }
  #clientesView #clientesUnidadDesktopPanel{
    border-radius:22px !important;
    border:1px solid #e2e8f0 !important;
    background:#ffffff !important;
    overflow:hidden !important;
    box-shadow:0 12px 28px rgba(15,23,42,.12) !important;
  }
  #clientesView #clientesUnidadDesktopSearch{
    min-height:38px !important;
    border-radius:9999px !important;
    border-color:#dbe5f1 !important;
    background:#ffffff !important;
  }
  #clientesView #clientesUnidadDesktopResultados{
    background:#ffffff !important;
  }

  #modificarCajaView #modCajaTheadRow th{
    font-size:0.875rem !important;
    line-height:1.25rem !important;
    font-weight:600 !important;
    color:#334155 !important;
    letter-spacing:0 !important;
  }
  @media (max-width:900px){
    #modificarCajaView #modCajaTheadRow th{
      font-size:0.81rem !important;
      line-height:1.02rem !important;
      font-weight:600 !important;
    }
  }

  #depurarCarteraView #depurarSelectAll{
    opacity:.45;
    cursor:not-allowed !important;
    pointer-events:none !important;
  }



  html.app-shell-loading, body.app-shell-loading{
    background:#f8fafc !important;
  }
  body.app-shell-loading{
    overflow:hidden !important;
  }
  body.app-shell-loading > *{
    visibility:hidden !important;
  }
  body.app-shell-loading::before{
    content:"";
    position:fixed;
    inset:0;
    background:#f8fafc;
    z-index:2147483647;
  }



  #clientesView #clientesUnidadDesktopBtn{
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    padding:0.5rem 2.5rem 0.5rem 0.75rem !important;
    border-radius:9999px !important;
    border:1px solid #cbd5e1 !important;
    background:#ffffff !important;
    color:#1e293b !important;
    font-size:0.875rem !important;
    line-height:1.25rem !important;
    text-align:left !important;
    box-shadow:none !important;
    outline:none !important;
  }
  #clientesView #clientesUnidadDesktopBtn:hover{
    border-color:#cbd5e1 !important;
    background:#ffffff !important;
  }
  #clientesView #clientesUnidadDesktopBtn:focus,
  #clientesView #clientesUnidadDesktopBtn:focus-visible{
    border-color:#00AD57 !important;
    box-shadow:0 0 0 1px #00AD57 !important;
  }
  #clientesView #clientesUnidadDesktopPanel{
    border-radius:1.25rem !important;
    border:1px solid #e2e8f0 !important;
    background:#ffffff !important;
    box-shadow:0 10px 15px -3px rgba(15,23,42,.10),0 4px 6px -4px rgba(15,23,42,.10) !important;
    overflow-y:auto !important;
  }
  #clientesView #clientesUnidadDesktopSearch{
    min-height:38px !important;
    border-radius:9999px !important;
    border:1px solid #e2e8f0 !important;
    background:#ffffff !important;
    box-shadow:none !important;
    outline:none !important;
  }
  #clientesView #clientesUnidadDesktopSearch:focus{
    border-color:#00AD57 !important;
    box-shadow:0 0 0 1px #00AD57 !important;
  }
  #clientesView #clientesUnidadDesktopResultados li.perm-filter-item{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
  #clientesView #clientesUnidadDesktopResultados input.perm-checkbox{
    -webkit-appearance:none !important;
    appearance:none !important;
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    border-radius:9999px !important;
    border:1px solid #cbd5e1 !important;
    display:inline-flex !important;
    background-color:#ffffff !important;
    cursor:pointer !important;
    outline:none !important;
    box-shadow:none !important;
  }
  #clientesView #clientesUnidadDesktopResultados input.perm-checkbox:checked{
    background-color:#00AD57 !important;
    border-color:#00AD57 !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:12px 12px !important;
  }

  html body #modificarCajaView #modCajaTheadRow th,
  html body #modificarCajaView #modCajaTheadRow th *{
    font-size:0.875rem !important;
    line-height:1.25rem !important;
    font-weight:500 !important;
    color:#475569 !important;
  }

  #modificarCajaView.modcaja-loading{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  #modificarCajaView{ transition:none !important; }



  #adminGeneralView .general-category-tabs {
    --general-indicator-x: 0px;
    --general-indicator-width: 0px;
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0.15rem 0.2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
  }

  #adminGeneralView .general-category-tabs::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    z-index: 3;
    width: var(--general-indicator-width);
    height: 3px;
    border-radius: 9999px;
    background: #00AD57;
    transform: translateX(var(--general-indicator-x));
    transition: transform 280ms cubic-bezier(.22,.8,.24,1), width 280ms cubic-bezier(.22,.8,.24,1);
    pointer-events: none;
  }

  #adminGeneralView .general-category-tab {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0.2rem 0.1rem 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.25rem;
    text-align: left;
    cursor: pointer;
    outline: none;
  }

  #adminGeneralView .general-category-tab:hover {
    color: #334155;
  }

  #adminGeneralView .general-category-tab:focus-visible {
    border-radius: 0.5rem;
    box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.13);
  }

  #adminGeneralView .general-category-tab-line {
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 9999px;
    background: #cbd5e1;
    transition: background-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
  }

  #adminGeneralView .general-category-tab.is-active {
    color: #0f172a;
  }

  #adminGeneralView .general-category-tab.is-active .general-category-tab-line {
    background: #cbd5e1;
    box-shadow: none;
    transform: none;
  }

  #adminGeneralView .general-panels-stage {
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
    transition: height 280ms cubic-bezier(.22,.8,.24,1);
  }

  #adminGeneralView .general-panels-stage > .general-category-panel {
    margin-top: 0 !important;
  }

  #adminGeneralView .general-category-panel {
    width: 100%;
    will-change: transform, opacity;
  }

  #adminGeneralView .general-category-panel[hidden] {
    display: none !important;
  }

  #adminGeneralView .general-movement-type-btn {
    min-height: 38px;
    border-radius: 9999px;
    border: 1px solid #dbe5f1;
    background: #ffffff;
    color: #64748b;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  }

  #adminGeneralView .general-movement-type-btn:hover {
    border-color: #b9c7d8;
    color: #334155;
  }

  #adminGeneralView .general-movement-type-btn.is-active {
    border-color: #00AD57;
    background: #00AD57;
    color: #ffffff;
    box-shadow: 0 7px 16px rgba(0, 173, 87, 0.2);
  }

  #adminGeneralView .general-tags-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
  }

  #adminGeneralView .general-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    min-height: 34px;
    border-radius: 0.75rem;
    border: 1px solid #dbe5f1;
    background: #ffffff;
    color: #334155;
    padding: 0.35rem 0.45rem 0.35rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 750;
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.06);
    cursor: grab;
    user-select: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
  }

  #adminGeneralView .general-tag-chip:active {
    cursor: grabbing;
  }

  #adminGeneralView .general-tag-chip.is-dragging {
    opacity: 0.45;
    transform: scale(0.98);
  }

  #adminGeneralView .general-tag-chip.is-drag-over {
    border-color: #00AD57;
    box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.12);
  }

  #adminGeneralView .general-tag-drag {
    color: #94a3b8;
    font-size: 17px;
    line-height: 1;
  }

  #adminGeneralView .general-tag-text {
    max-width: min(330px, 68vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #adminGeneralView .general-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border: 0;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
  }

  #adminGeneralView .general-tag-remove:hover {
    background: #fee2e2;
    color: #dc2626;
  }

  #adminGeneralView .general-tag-empty {
    width: 100%;
    border: 1px dashed #cbd5e1;
    border-radius: 0.9rem;
    padding: 0.8rem 1rem;
    color: #94a3b8;
    font-size: 0.8rem;
    text-align: center;
    background: rgba(248, 250, 252, 0.72);
  }

  #adminGeneralView .general-shared-unit-wrap {
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: rgba(248, 250, 252, 0.78);
    padding: 1rem;
  }


  #adminGeneralView .general-subsection-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  #adminGeneralView .general-subsection-heading h3 {
    flex: 0 0 auto;
    color: #1e293b;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 800;
  }

  #adminGeneralView .general-subsection-heading-line {
    flex: 1 1 auto;
    height: 1px;
    background: #e2e8f0;
  }

  #adminGeneralView .general-range-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.75rem;
  }

  #adminGeneralView .general-range-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  #adminGeneralView .general-range-field > span {
    color: #64748b;
    font-size: 0.7rem;
    line-height: 1rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  #adminGeneralView .general-range-input {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0.5rem 0.7rem;
    color: #0f172a;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 800;
    text-align: center;
    outline: none;
  }

  #adminGeneralView .general-range-input:focus {
    border-color: #00AD57;
    box-shadow: 0 0 0 1px #00AD57;
  }

  #adminGeneralView .general-range-input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
  }

  #adminGeneralView .general-money-range {
    width: min(100%, 370px);
  }

  #adminGeneralView .general-quota-range {
    width: 176px;
  }

  #adminGeneralView .general-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  #adminGeneralView .general-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  #adminGeneralView .general-switch .perm-slider {
    width: 42px;
    height: 22px;
    border-radius: 9999px;
    background: #e5e7eb;
    padding: 2px;
    display: flex;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.16);
    transition: background-color 0.25s ease, opacity 0.2s ease;
  }

  #adminGeneralView .general-switch .perm-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #ffffff;
    color: #9ca3af;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25);
    transition: transform 0.25s ease, color 0.18s ease;
  }

  #adminGeneralView .general-switch .perm-icon {
    position: absolute;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  #adminGeneralView .general-switch .perm-icon--cross {
    opacity: 1;
    transform: scale(1);
  }

  #adminGeneralView .general-switch .perm-icon--check {
    opacity: 0;
    transform: scale(0.6);
  }

  #adminGeneralView .general-switch input:checked + .perm-slider {
    background: #00AD57;
  }

  #adminGeneralView .general-switch input:checked + .perm-slider .perm-circle {
    transform: translateX(18px);
    color: #00AD57;
  }

  #adminGeneralView .general-switch input:checked + .perm-slider .perm-icon--cross {
    opacity: 0;
    transform: scale(0.6);
  }

  #adminGeneralView .general-switch input:checked + .perm-slider .perm-icon--check {
    opacity: 1;
    transform: scale(1);
  }

  #adminGeneralView .general-switch input:focus-visible + .perm-slider {
    outline: 2px solid #00AD57;
    outline-offset: 2px;
  }

  #adminGeneralView .general-switch input:disabled + .perm-slider {
    opacity: 0.55;
    cursor: not-allowed;
  }


  #adminGeneralView .general-range-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  #adminGeneralView .general-range-input.general-input-error,
  #adminGeneralView .general-fixed-quota-input.general-input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
  }

  #adminGeneralView .general-range-error {
    display: none;
    margin: 0.1rem 0 0;
    color: #dc2626;
    font-size: 0.7rem;
    line-height: 1rem;
    font-weight: 700;
    text-align: left;
  }

  #adminGeneralView .general-range-error.is-visible {
    display: block;
  }

  #adminGeneralView .general-fixed-quota-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 176px;
    min-width: 176px;
    align-self: center;
  }

  /*
   * Cuando Cuota fija muestra además el campo numérico, recupera un ancho flexible
   * para que el switch y el input convivan sin romper la alineación base.
   */
  #adminGeneralView .general-fixed-quota-controls:has(.general-fixed-quota-input:not(.hidden)) {
    width: auto;
    justify-content: flex-end;
  }

  /*
   * Los controles que contienen únicamente un switch ocupan el mismo ancho
   * que el bloque de Mínimo/Máximo. Así el switch queda centrado exactamente
   * sobre el espacio entre ambas casillas. Cuota fija queda excluida porque
   * su switch está dentro de .general-fixed-quota-controls junto al textfield.
   */
  #adminGeneralView .general-switch-card > label.general-switch {
    flex: 0 0 176px;
    width: 176px;
    justify-content: center;
    align-self: center;
  }

  /*
   * Los 4 switches solicitados deben ocupar exactamente la misma caja visual
   * y quedar anclados en el mismo punto horizontal.
   */
  #adminGeneralView .general-switch-card > label.general-switch:has(#generalMostrarCalculadoraSwitch),
  #adminGeneralView .general-switch-card > label.general-switch:has(#generalRespetarInteresMinimoSwitch),
  #adminGeneralView .general-switch-card > label.general-switch:has(#generalMetricasRecaudoSwitch),
  #adminGeneralView .general-fixed-quota-controls:has(#generalCuotaFijaSwitch):has(.general-fixed-quota-input.hidden) {
    flex: 0 0 176px;
    width: 176px;
    min-width: 176px;
    max-width: 176px;
    justify-content: flex-end;
    align-self: center;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* En cuota fija, el switch conserva su tamaño exacto y no se estira. */
  #adminGeneralView .general-fixed-quota-controls:has(#generalCuotaFijaSwitch):has(.general-fixed-quota-input.hidden) > label.general-switch {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    margin: 0;
  }


  /* Filas con switch: 20% más de padding derecho para desplazar el control a la izquierda. */
  #adminGeneralView .general-switch-card {
    padding-right: 1.2rem !important;
  }

  @media (min-width: 640px) {
    #adminGeneralView .general-switch-card {
      padding-right: 1.8rem !important;
    }
  }

  #adminGeneralView .general-fixed-quota-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  #adminGeneralView .general-fixed-quota-input {
    width: 68px;
  }

  #adminGeneralView .general-fixed-quota-input.hidden {
    display: none !important;
  }

  #adminGeneralView .general-periodicidades-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
  }

  #adminGeneralView .general-periodicidad-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    background: #ffffff;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
  }

  #adminGeneralView .general-periodicidad-option:hover {
    border-color: rgba(0, 173, 87, 0.45);
    background: rgba(0, 173, 87, 0.035);
  }

  #adminGeneralView .general-periodicidad-option:has(input:checked) {
    border-color: rgba(0, 173, 87, 0.55);
    background: rgba(0, 173, 87, 0.07);
    color: #007a3d;
  }

  #adminGeneralView .general-periodicidad-option:has(input:disabled) {
    opacity: 0.58;
    cursor: not-allowed;
  }

  @media (max-width: 767.98px) {
    #adminGeneralView .general-periodicidades-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #adminGeneralView .general-periodicidad-option:last-child {
      grid-column: 1 / -1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #adminGeneralView .general-category-tabs::after,
    #adminGeneralView .general-panels-stage {
      transition: none !important;
    }
  }



  /* Periodicidad: el contenedor permanece blanco; solo el checkbox refleja la selección. */
  #adminGeneralView .general-periodicidad-option,
  #adminGeneralView .general-periodicidad-option:hover,
  #adminGeneralView .general-periodicidad-option:has(input:checked) {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
  }

  #adminGeneralView .general-periodicidad-option:focus-within {
    border-color: #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.08);
  }


  /* ==== General: rangos de Días de Mora ==== */
  #adminGeneralView .general-mora-list {
    display: grid;
    gap: 0.85rem;
  }

  #adminGeneralView .general-mora-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
  }

  #adminGeneralView .general-mora-color {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 20px;
    padding: 0;
    border-radius: 50px;
    display: inline-block;
  }

  #adminGeneralView .general-mora-color--green { background: #00AD57; }
  #adminGeneralView .general-mora-color--amber { background: #f59e0b; }
  #adminGeneralView .general-mora-color--red { background: #ef4444; }

  #adminGeneralView .general-mora-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(72px, 104px));
    justify-content: end;
    gap: 0.65rem;
    width: min(100%, 230px);
  }

  #adminGeneralView .general-mora-field label {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.68rem;
    line-height: 0.9rem;
    font-weight: 800;
    color: #64748b;
    text-align: center;
  }

  #adminGeneralView .general-mora-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #dbe5f1;
    border-radius: 0.7rem;
    background: #ffffff;
    padding: 0.5rem 0.65rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 900;
    color: #0f172a;
    outline: none;
    box-shadow: none;
  }

  #adminGeneralView .general-mora-input:focus {
    border-color: #00AD57;
    box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.10);
  }

  #adminGeneralView .general-mora-input[disabled],
  #adminGeneralView .general-mora-input[readonly] {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
  }

  #adminGeneralView .general-mora-error {
    display: none;
    margin-top: 0.4rem;
    padding-left: calc(48px + 1rem);
    font-size: 0.72rem;
    line-height: 1rem;
    font-weight: 700;
    color: #ef4444;
  }

  #adminGeneralView .general-mora-error.is-visible { display: block; }

  #adminGeneralView .general-mora-input.general-input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.16) !important;
  }

  #detailsView .dv-caja-load-more-item {
    padding: 0.65rem 0.25rem 0.15rem;
    border-top: 1px solid #f1f5f9;
  }

  #detailsView .dv-caja-load-more-btn {
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    background: #ffffff;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
  }

  #detailsView .dv-caja-load-more-btn:hover,
  #detailsView .dv-caja-load-more-btn:focus-visible {
    border-color: #00AD57;
    background: #00AD57;
    color: #ffffff;
    outline: none;
  }

  @media (max-width: 639.98px) {
    #adminGeneralView .general-mora-row {
      align-items: flex-start;
      gap: 0.7rem;
      padding: 0.85rem;
    }

    #adminGeneralView .general-mora-color {
      flex-basis: 44px;
      width: 44px;
      min-width: 44px;
      height: 19px;
      padding: 0;
    }

    #adminGeneralView .general-mora-fields {
      grid-template-columns: repeat(2, minmax(64px, 1fr));
      width: 100%;
    }

    #adminGeneralView .general-mora-error {
      padding-left: calc(44px + 0.7rem);
    }
  }

  /* El padding derecho adicional se aplica a todas las tarjetas que contienen switches. */
  #adminGeneralView .general-category-panel .rounded-2xl:has(.general-switch) {
    padding-right: 1.2rem !important;
  }

  @media (min-width: 640px) {
    #adminGeneralView .general-category-panel .rounded-2xl:has(.general-switch) {
      padding-right: 1.8rem !important;
    }
  }


  /*
   * Alineación definitiva de los 4 switches solicitados.
   * Se posicionan con la misma coordenada y el mismo tamaño visual.
   */
  #adminGeneralView .general-switch-card:has(#generalMostrarCalculadoraSwitch),
  #adminGeneralView .general-switch-card:has(#generalCuotaFijaSwitch),
  #adminGeneralView .general-switch-card:has(#generalRespetarInteresMinimoSwitch),
  #adminGeneralView .general-switch-card:has(#generalMetricasRecaudoSwitch) {
    position: relative;
    padding-right: 6.5rem !important;
  }

  #adminGeneralView .general-switch-card:has(#generalMostrarCalculadoraSwitch) > label.general-switch,
  #adminGeneralView .general-switch-card:has(#generalRespetarInteresMinimoSwitch) > label.general-switch,
  #adminGeneralView .general-switch-card:has(#generalMetricasRecaudoSwitch) > label.general-switch {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 22px;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center;
    flex: 0 0 42px !important;
  }

  #adminGeneralView .general-switch-card:has(#generalCuotaFijaSwitch) .general-fixed-quota-controls:has(.general-fixed-quota-input.hidden) {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 22px;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    align-items: center;
    flex: 0 0 42px !important;
  }

  #adminGeneralView .general-switch-card:has(#generalCuotaFijaSwitch) .general-fixed-quota-controls:has(.general-fixed-quota-input.hidden) > label.general-switch {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 22px;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 42px !important;
    justify-content: flex-start !important;
    align-items: center;
  }

  @media (max-width: 639.98px) {
    #adminGeneralView .general-switch-card {
      flex-direction: column;
      align-items: stretch;
    }

    /*
     * En móvil, todos los switches del panel General deben quedar alineados
     * en la misma columna. Tomamos la referencia del switch más a la izquierda
     * y luego lo desplazamos ligeramente hacia la derecha, un 20%.
     */
    #adminGeneralView .general-switch-card > label.general-switch {
      flex-basis: auto;
      width: 100%;
      justify-content: flex-start;
      padding-left: 5%;
      box-sizing: border-box;
    }

    #adminGeneralView .general-fixed-quota-controls {
      width: 100%;
      min-width: 0;
      justify-content: flex-start;
      padding-left: 5%;
      box-sizing: border-box;
    }

    #adminGeneralView .general-fixed-quota-field {
      flex: 0 1 auto;
    }

    #adminGeneralView .general-category-tabs {
      gap: 1.1rem;
      margin-right: -0.35rem;
      padding-bottom: 0.45rem;
    }

    #adminGeneralView .general-category-tab {
      font-size: 0.8rem;
    }

    #adminGeneralView .general-movement-type-btn {
      flex: 1 1 0;
      padding-left: 0.65rem;
      padding-right: 0.65rem;
    }

    #adminGeneralView .general-money-range,
    #adminGeneralView .general-quota-range {
      width: 100%;
    }

    #adminGeneralView .general-range-controls {
      width: 100%;
    }
  }



  body:not(.tueni-strict-admin) #navPerfilesDesktop,
  body:not(.tueni-strict-admin) #navPerfilesMobile,
  body:not(.tueni-strict-admin) #navHistoricoCambios,
  body:not(.tueni-strict-admin) #navHistoricoCambiosMobile {
    display: none !important;
  }



  /*
    Opciones internas: reserva el ancho equivalente a tres controles y
    alinea siempre los botones desde la izquierda de esa columna. Así las
    filas con dos niveles no quedan desplazadas hacia el borde derecho.
  */
  #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
    width: 150px !important;
    min-width: 150px !important;
    flex: 0 0 150px !important;
    flex-basis: 150px !important;
    justify-content: flex-start !important;
  }

  /* Triplica la separación anterior (1.15rem × 3) entre el filtro y editor. */
  #perfilesView .profiles-admin-flow {
    row-gap: 3.45rem !important;
    gap: 3.45rem !important;
  }

  @media (max-width: 860px) {
    #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
      width: 100% !important;
      min-width: 0 !important;
      flex: 1 1 auto !important;
      flex-basis: auto !important;
      justify-content: flex-start !important;
    }

    /* Mantiene una separación amplia sin desperdiciar demasiado alto en móvil. */
    #perfilesView .profiles-admin-flow {
      row-gap: 2.25rem !important;
      gap: 2.25rem !important;
    }
  }



  /* Duplica el espacio visual entre los campos de identidad/rol y la matriz. */
  #perfilesView .profiles-permissions-section {
    padding-top: 1.5rem;
  }

  @media (max-width: 640px) {
    #perfilesView .profiles-permissions-section {
      padding-top: 1.25rem;
    }
  }



  /* Detallado: headers y columnas en negro, excepto Unidad y Días atraso */
  #dvTablaPagosWrapper thead th:not(:first-child):not(:last-child),
  #dvTablaVentasWrapper thead th:not(:first-child),
  #dvTablaGastosWrapper thead th:not(:first-child),
  #dvTablaIngresosWrapper thead th:not(:first-child),
  #dvTablaEgresosWrapper thead th:not(:first-child) {
    color: #0f172a !important;
  }

  #dvTablaPagosWrapper tbody td:not(:first-child):not(:last-child),
  #dvTablaVentasWrapper tbody td:not(:first-child),
  #dvTablaGastosWrapper tbody td:not(:first-child),
  #dvTablaIngresosWrapper tbody td:not(:first-child),
  #dvTablaEgresosWrapper tbody td:not(:first-child) {
    color: #0f172a !important;
  }

  /* Mantener Unidad y Días atraso como excepción visual */
  #dvTablaPagosWrapper tbody td:first-child,
  #dvTablaVentasWrapper tbody td:first-child,
  #dvTablaGastosWrapper tbody td:first-child,
  #dvTablaIngresosWrapper tbody td:first-child,
  #dvTablaEgresosWrapper tbody td:first-child {
    color: #64748b !important;
  }




  @media (max-width: 900px){
    /*
      Corrección real: las reglas anteriores tenían más especificidad
      (#clientePagosBody + .cliente-pago-row + .col-valor-pago) y seguían ganando.
      Aquí se usa mayor especificidad para que todos los valores queden en 600.
    */

    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td,
    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td *,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td *,
    body #aprobacionesView #aprobVentasBody tr.aprob-venta-row > td,
    body #aprobacionesView #aprobVentasBody tr.aprob-venta-row > td *,
    body #aprobacionesView #aprobMovsBody tr.aprob-mov-row > td,
    body #aprobacionesView #aprobMovsBody tr.aprob-mov-row > td *{
      font-weight:600 !important;
    }

    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td.col-venta,
    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td.col-saldo,
    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td.col-cuota,
    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td.col-numero,
    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td.col-estado-mobile,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td.col-numero,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td.col-valor-pago,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td.col-cuotas,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td.col-fecha,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td.col-atraso-mobile{
      font-weight:600 !important;
    }

    body #panelClienteVentasPagos .cliente-mobile-detail-card .cliente-mobile-value,
    body #panelClienteVentasPagos .cliente-mobile-detail-card .cliente-mobile-value *,
    body #aprobacionesView .aprob-mobile-detail-card .aprob-mobile-value,
    body #aprobacionesView .aprob-mobile-detail-card .aprob-mobile-value *{
      font-weight:600 !important;
    }

    /* Encabezados y nombres de campos sí quedan destacados */
    body #panelClienteVentasPagos thead th,
    body #aprobacionesView thead th,
    body #panelClienteVentasPagos .cliente-mobile-detail-card .cliente-mobile-label,
    body #aprobacionesView .aprob-mobile-detail-card .aprob-mobile-label{
      font-weight:800 !important;
    }

    /* Evitar que chips y letras de estado vuelvan a 900 */
    body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row span,
    body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row span,
    body #panelClienteVentasPagos .cliente-mobile-detail-card span:not(.cliente-mobile-label),
    body #aprobacionesView #aprobVentasBody tr.aprob-venta-row span,
    body #aprobacionesView #aprobMovsBody tr.aprob-mov-row span,
    body #aprobacionesView .aprob-mobile-detail-card span:not(.aprob-mobile-label){
      font-weight:600 !important;
    }

    body #aprobacionesView input[type="checkbox"]{
      font-weight:normal !important;
    }
  }



  /*
    Quitar el verde que se ve detrás al hacer scroll/overscroll.
    Se mantiene el login sin tocar directamente; el gradiente se oculta cuando el dashboard o páginas públicas están visibles.
  */
  html,
  body{
    background:#ffffff !important;
  }

  #dashboard,
  #dashboard > .min-h-screen,
  #accountDeletionView,
  #privacyPolicyView,
  #unitsView,
  #detailsView,
  #clientesView,
  #aprobacionesView,
  #permisosView,
  #generalView,
  #adminGeneralView,
  #modificarCajaView,
  #abrirCajasView,
  #estadisticasView,
  #cifrasView,
  #mapaView{
    background:#ffffff !important;
  }

  body:has(#dashboard:not(.hidden)) .bg-gradient-root,
  body:has(#accountDeletionView:not(.hidden)) .bg-gradient-root,
  body:has(#privacyPolicyView:not(.hidden)) .bg-gradient-root{
    display:none !important;
    background:#ffffff !important;
  }

  body:has(#dashboard:not(.hidden)){
    background:#ffffff !important;
    overscroll-behavior-y:none !important;
  }

  #dashboard{
    background:#ffffff !important;
    overscroll-behavior-y:contain !important;
  }

  /*
    Aprobaciones: por defecto SIEMPRE contraído.
    Esto va fuera del media query para que no aparezca abierto por cascada o por viewport.
  */
  #aprobVentasBody tr.aprob-mobile-extra-row:not(.open),
  #aprobMovsBody tr.aprob-mobile-extra-row:not(.open){
    display:none !important;
  }

  #aprobVentasBody tr.aprob-mobile-extra-row.open,
  #aprobMovsBody tr.aprob-mobile-extra-row.open{
    display:table-row !important;
  }

  /* Ocultar # Unidad en expandido si algún render viejo lo dejó en DOM */
  #aprobVentasBody .aprob-mobile-detail-grid > div:has(.aprob-mobile-label:first-child),
  #aprobMovsBody .aprob-mobile-detail-grid > div:has(.aprob-mobile-label:first-child){
    /* se corrige abajo con selectores más precisos por posición */
  }

  @media (max-width: 900px){
    /*
      En los renders anteriores # Unidad era el primer bloque del desplegable.
      Se oculta solo en los detalles de aprobaciones para evitar mostrarlo en móvil.
    */
    #aprobVentasBody .aprob-mobile-detail-grid > div:first-child:has(.aprob-mobile-label),
    #aprobMovsBody .aprob-mobile-detail-grid > div:first-child:has(.aprob-mobile-label){
      display:none !important;
    }

    #aprobVentasBody tr.aprob-mobile-extra-row:not(.open),
    #aprobMovsBody tr.aprob-mobile-extra-row:not(.open){
      display:none !important;
    }

    #aprobVentasBody tr.aprob-mobile-extra-row.open,
    #aprobMovsBody tr.aprob-mobile-extra-row.open{
      display:table-row !important;
    }
  }



  /* Aprobaciones: contraído por defecto de forma estricta */
  #aprobVentasBody tr.aprob-mobile-extra-row[hidden],
  #aprobMovsBody tr.aprob-mobile-extra-row[hidden],
  #aprobVentasBody tr.aprob-mobile-extra-row:not(.open),
  #aprobMovsBody tr.aprob-mobile-extra-row:not(.open){
    display:none !important;
  }

  #aprobVentasBody tr.aprob-mobile-extra-row.open:not([hidden]),
  #aprobMovsBody tr.aprob-mobile-extra-row.open:not([hidden]){
    display:table-row !important;
  }

  #aprobVentasBody tr.aprob-mobile-extra-row.open:not([hidden]) > td,
  #aprobMovsBody tr.aprob-mobile-extra-row.open:not([hidden]) > td{
    display:table-cell !important;
  }

  @media (max-width: 900px){
    #aprobVentasBody tr.aprob-mobile-extra-row[hidden],
    #aprobMovsBody tr.aprob-mobile-extra-row[hidden],
    #aprobVentasBody tr.aprob-mobile-extra-row:not(.open),
    #aprobMovsBody tr.aprob-mobile-extra-row:not(.open){
      display:none !important;
    }

    #aprobVentasBody tr.aprob-mobile-extra-row.open:not([hidden]),
    #aprobMovsBody tr.aprob-mobile-extra-row.open:not([hidden]){
      display:table-row !important;
    }
  }



  @media (max-width: 900px){
    /* Ventas: Cuotas oculto como columna principal */
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(7),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-cuotas{
      display:none !important;
    }

    /* Movimientos: Motivo oculto como columna principal */
    body #aprobacionesView table.aprob-movs-table thead th:nth-child(7),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-motivo{
      display:none !important;
    }
  }



  @media (max-width: 900px){
    /*
      Cuotas y Motivo deben ir DENTRO del expandido.
      Se anula la regla vieja que ocultaba el primer item del detalle
      cuando antes ese primer item era "# Unidad".
    */
    body #aprobVentasBody .aprob-mobile-detail-grid > div:first-child,
    body #aprobMovsBody .aprob-mobile-detail-grid > div:first-child{
      display:flex !important;
    }

    /* Se mantienen fuera SOLO los campos principales.
       Cuotas NO visible como columna principal en Ventas. */
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(7),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-cuotas{
      display:none !important;
    }

    /* Motivo NO visible como columna principal en Movimientos. */
    body #aprobacionesView table.aprob-movs-table thead th:nth-child(7),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-motivo{
      display:none !important;
    }

    /* Pero dentro del contenido expandido sí se ven. */
    body #aprobVentasBody tr.aprob-mobile-extra-row.open .aprob-mobile-detail-grid > div,
    body #aprobMovsBody tr.aprob-mobile-extra-row.open .aprob-mobile-detail-grid > div{
      display:flex !important;
    }
  }



  @media (max-width: 900px){
    /*
      Aprobaciones: más separación entre filas.
      Antes el padding vertical móvil estaba cerca de 0.64rem.
      Se aumenta aproximadamente 50%: 0.96rem.
    */
    body #aprobacionesView table.aprob-ventas-table tbody tr.aprob-venta-row > td,
    body #aprobacionesView table.aprob-movs-table tbody tr.aprob-mov-row > td{
      padding-top:0.96rem !important;
      padding-bottom:0.96rem !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead th,
    body #aprobacionesView table.aprob-movs-table thead th{
      padding-top:0.72rem !important;
      padding-bottom:0.72rem !important;
    }

    /* Mantener valores de registros en peso medio, no pesado */
    body #aprobacionesView tbody tr.aprob-venta-row > td,
    body #aprobacionesView tbody tr.aprob-venta-row > td *,
    body #aprobacionesView tbody tr.aprob-mov-row > td,
    body #aprobacionesView tbody tr.aprob-mov-row > td *{
      font-weight:600 !important;
    }

    body #aprobacionesView thead th,
    body #aprobacionesView .aprob-mobile-label{
      font-weight:800 !important;
    }

    body #aprobacionesView .aprob-mobile-value,
    body #aprobacionesView .aprob-mobile-value *{
      font-weight:600 !important;
    }
  }



  @media (max-width: 900px){
    /*
      Aprobaciones: +30% separación adicional sobre v53.
      Registros principales con más aire vertical.
    */
    body #aprobacionesView table.aprob-ventas-table tbody tr.aprob-venta-row > td,
    body #aprobacionesView table.aprob-movs-table tbody tr.aprob-mov-row > td{
      padding-top:1.25rem !important;
      padding-bottom:1.25rem !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead th,
    body #aprobacionesView table.aprob-movs-table thead th{
      padding-top:0.82rem !important;
      padding-bottom:0.82rem !important;
    }

    /*
      Pagos: eliminar sensación de contenedor en móvil y dejar la tabla
      con columnas automáticas al contenido.
    */
    body #pagosView > div{
      max-width:none !important;
      width:100% !important;
      padding-left:0 !important;
      padding-right:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }

    body #pagosView > div > div{
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      padding-left:0 !important;
      padding-right:0 !important;
      background:#ffffff !important;
    }

    body #pagosView section{
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      padding-left:0 !important;
      padding-right:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      background:#ffffff !important;
    }

    body #pagosView .flex.items-start.gap-3.mb-6{
      padding-left:0.9rem !important;
      padding-right:0.9rem !important;
    }

    body #pagosView .pagos-table-scroll{
      width:100% !important;
      max-width:100% !important;
      overflow-x:auto !important;
      overflow-y:auto !important;
      -webkit-overflow-scrolling:touch !important;
      border:0 !important;
      border-radius:0 !important;
      padding:0 !important;
      margin:0 !important;
      background:#ffffff !important;
      box-shadow:none !important;
    }

    body #pagosView .pagos-table-scroll table{
      table-layout:auto !important;
      width:max-content !important;
      min-width:100% !important;
      border-collapse:separate !important;
      border-spacing:0 !important;
    }

    body #pagosView .pagos-table-scroll th,
    body #pagosView .pagos-table-scroll td{
      width:auto !important;
      min-width:max-content !important;
      white-space:nowrap !important;
      padding-left:0.55rem !important;
      padding-right:0.55rem !important;
      font-size:0.76rem !important;
      line-height:0.95rem !important;
    }

    body #pagosView .pagos-table-scroll th:first-child,
    body #pagosView .pagos-table-scroll td:first-child,
    body #pagosView .pagos-table-scroll th:last-child,
    body #pagosView .pagos-table-scroll td:last-child{
      display:none !important;
    }

    body #pagosView .pagos-table-scroll td[title]{
      max-width:none !important;
      overflow:visible !important;
      text-overflow:clip !important;
    }
  }



  /* Aprobaciones: solo una columna Unidad, nunca # Unidad aparte */
  body #aprobacionesView table.aprob-ventas-table thead th:nth-child(2),
  body #aprobacionesView table.aprob-movs-table thead th:nth-child(2),
  body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-unidad,
  body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-unidad{
    display:none !important;
  }

  @media (max-width: 900px){
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(3),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-alias{
      width:25% !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(4),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-cliente{
      width:26% !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(5),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-valor{
      width:20% !important;
    }

    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(6),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-cuota{
      width:21% !important;
    }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(3),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-alias{
      width:27% !important;
    }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(4),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-categoria{
      width:21% !important;
    }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(5),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-tipo{
      width:20% !important;
    }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(6),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-valor{
      width:24% !important;
    }
  }



  /*
    Administrar: cuando exista Unidad + Alias en columnas separadas,
    se muestra una sola columna "Unidad" con valor concatenado.
  */
  #aprobacionesView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #aprobacionesView table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  #permisosView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #permisosView table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  #adminGeneralView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #adminGeneralView table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  #modificarCajaView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #modificarCajaView table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  #abrirCajasView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #abrirCajasView table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  #pagosView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #pagosView table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  #depurarCarteraView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #depurarCarteraView table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  #historicoCambiosView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  #historicoCambiosView table.admin-unidad-concat-table td.admin-unidad-alias-hidden{
    display:none !important;
  }

  /* Aprobaciones ya traía #Unidad + Alias/Unidad: dejar visible solo la columna concatenada */
  body #aprobacionesView table.aprob-ventas-table thead th:nth-child(2),
  body #aprobacionesView table.aprob-movs-table thead th:nth-child(2),
  body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-unidad,
  body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-unidad{
    display:none !important;
  }

  body #aprobacionesView table.aprob-ventas-table thead th:nth-child(3),
  body #aprobacionesView table.aprob-movs-table thead th:nth-child(3){
    font-weight:800 !important;
  }

  @media (max-width: 900px){
    body #aprobacionesView table.aprob-ventas-table thead th:nth-child(3),
    body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-alias{
      width:25% !important;
    }

    body #aprobacionesView table.aprob-movs-table thead th:nth-child(3),
    body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-alias{
      width:27% !important;
    }

    body table.admin-unidad-concat-table td.admin-unidad-concat-cell{
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
  }



  /*
    Todas las tablas: encabezados en formato normal (Aa), no en MAYÚSCULAS por clase uppercase.
  */
  body table thead th,
  body table th{
    text-transform:none !important;
    letter-spacing:normal !important;
  }

  /*
    Unidad concatenada y valores de registros sin negrita pesada.
    Los encabezados pueden conservar énfasis visual, pero los datos no quedan bold.
  */
  body table tbody td,
  body table tbody td *,
  body td.admin-unidad-concat-cell,
  body td.admin-unidad-concat-cell *,
  body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-alias,
  body #aprobVentasBody tr.aprob-venta-row > td.aprob-col-alias *,
  body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-alias,
  body #aprobMovsBody tr.aprob-mov-row > td.aprob-col-alias *{
    font-weight:500 !important;
  }

  body table thead th,
  body table thead th *,
  body .aprob-mobile-label,
  body .cliente-mobile-label{
    font-weight:700 !important;
  }

  /*
    Las tarjetas expandibles y el tap para expandir son SOLO mobile.
    En desktop quedan anuladas/ocultas aunque una clase open haya quedado en DOM.
  */
  @media (min-width: 901px){
    body tr.aprob-mobile-extra-row,
    body tr.cliente-mobile-extra-row,
    body .aprob-mobile-detail-card,
    body .cliente-mobile-detail-card,
    body .cliente-mobile-toggle-btn{
      display:none !important;
    }

    body tr.aprob-venta-row,
    body tr.aprob-mov-row,
    body tr.cliente-pago-row{
      cursor:default !important;
    }

    body tr.aprob-venta-row.is-open > td,
    body tr.aprob-mov-row.is-open > td,
    body tr.cliente-venta-row.is-open > td,
    body tr.cliente-pago-row.is-open > td{
      background:inherit !important;
    }
  }



  /*
    Todas las tablas:
    - Encabezados sin negrita.
    - Encabezados y registros con el mismo peso visual.
    - Registros con 30% más separación vertical.
  */

  body table thead th,
  body table thead th *,
  body table th,
  body table th *,
  body table tbody td,
  body table tbody td *,
  body td.admin-unidad-concat-cell,
  body td.admin-unidad-concat-cell *,
  body #aprobVentasBody tr.aprob-venta-row > td,
  body #aprobVentasBody tr.aprob-venta-row > td *,
  body #aprobMovsBody tr.aprob-mov-row > td,
  body #aprobMovsBody tr.aprob-mov-row > td *,
  body #clienteVentasBody tr.cliente-venta-row > td,
  body #clienteVentasBody tr.cliente-venta-row > td *,
  body #clientePagosBody tr.cliente-pago-row > td,
  body #clientePagosBody tr.cliente-pago-row > td *{
    font-weight:500 !important;
  }

  body table thead th,
  body table th{
    text-transform:none !important;
    letter-spacing:normal !important;
  }

  /* +30% de separación en registros */
  body table tbody tr:not(.aprob-mobile-extra-row):not(.cliente-mobile-extra-row) > td{
    padding-top:1.25rem !important;
    padding-bottom:1.25rem !important;
  }

  /* Encabezados también quedan cómodos, pero sin verse más pesados */
  body table thead th{
    padding-top:0.95rem !important;
    padding-bottom:0.95rem !important;
  }

  /*
    Detalles expandibles: mantener mismo weight que registros.
    No se aumenta tanto el padding para no hacer tarjetas excesivamente altas.
  */
  body .aprob-mobile-value,
  body .aprob-mobile-value *,
  body .cliente-mobile-value,
  body .cliente-mobile-value *,
  body .aprob-mobile-label,
  body .cliente-mobile-label{
    font-weight:500 !important;
  }

  @media (max-width: 900px){
    body table tbody tr:not(.aprob-mobile-extra-row):not(.cliente-mobile-extra-row) > td{
      padding-top:1.25rem !important;
      padding-bottom:1.25rem !important;
    }

    body table thead th{
      padding-top:0.95rem !important;
      padding-bottom:0.95rem !important;
      font-weight:500 !important;
    }
  }



  /*
    Todas las tablas del archivo:
    encabezados y registros alineados a la izquierda.
  */
  body table th,
  body table td,
  body table thead th,
  body table tbody td{
    text-align:left !important;
  }

  /*
    Cifras históricas:
    la separación no debe ser la global de 30%.
    Se deja cerca de 10% más amplia que el padding base.
  */
  body #cifrasView table tbody tr > td{
    padding-top:0.85rem !important;
    padding-bottom:0.85rem !important;
  }

  body #cifrasView table thead th{
    padding-top:0.85rem !important;
    padding-bottom:0.85rem !important;
  }

  /*
    Cifras históricas: contenedor tipo Aprobaciones
    (borde suave, fondo gris claro, radio amplio, sin contraste pesado).
  */
  body #cifrasView #cifrasTablesCard{
    border:1px solid #e2e8f0 !important;
    border-radius:1rem !important;
    background:rgba(248,250,252,0.40) !important;
    box-shadow:none !important;
    padding:1rem !important;
    overflow:hidden !important;
  }

  @media (min-width:640px){
    body #cifrasView #cifrasTablesCard{
      padding:1.5rem !important;
    }
  }

  body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"]{
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    background:#ffffff !important;
    border-radius:0.75rem !important;
    border:1px solid #e5e7eb !important;
  }

  body #cifrasView #cifrasTablesCard table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#ffffff !important;
  }

  body #cifrasView #cifrasTablesCard thead th{
    background:#f8fafc !important;
  }

  /*
    Gastos y todas las demás tablas de Cifras:
    fuerza alineación izquierda también si venían con text-center/text-right.
  */
  body #cifrasView #cifrasTablesCard table th,
  body #cifrasView #cifrasTablesCard table td{
    text-align:left !important;
  }

  /*
    Aprobaciones desktop: resaltar visualmente filas seleccionadas por click.
  */
  @media (min-width:901px){
    body #aprobacionesView tr.aprob-venta-row,
    body #aprobacionesView tr.aprob-mov-row{
      cursor:pointer !important;
    }

    body #aprobacionesView tr.aprob-venta-row.is-selected > td,
    body #aprobacionesView tr.aprob-mov-row.is-selected > td{
      background:#f8fafc !important;
    }
  }



  /*
    Encabezados de TODAS las tablas:
    mismo tipo de letra, mismo tamaño y centrados.
    Se aplica al final para ganar sobre reglas anteriores de text-left/text-right.
  */
  body table thead th,
  body table thead th *,
  body table th,
  body table th *{
    font-family:'Nunito', system-ui, sans-serif !important;
    font-size:0.78rem !important;
    line-height:0.95rem !important;
    font-weight:500 !important;
    text-align:center !important;
    text-transform:none !important;
    letter-spacing:normal !important;
    vertical-align:middle !important;
  }

  /*
    Cifras Históricas:
    +15% de altura respecto al ajuste anterior.
    - max-height 360px -> 414px
    - padding vertical 0.85rem -> 0.98rem
  */
  body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"]{
    max-height:414px !important;
  }

  body #cifrasView table tbody tr > td{
    padding-top:0.98rem !important;
    padding-bottom:0.98rem !important;
  }

  body #cifrasView table thead th{
    padding-top:0.98rem !important;
    padding-bottom:0.98rem !important;
  }

  @media (max-width: 900px){
    body table thead th,
    body table thead th *,
    body table th,
    body table th *{
      font-family:'Nunito', system-ui, sans-serif !important;
      font-size:0.78rem !important;
      line-height:0.95rem !important;
      font-weight:500 !important;
      text-align:center !important;
    }

    body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"]{
      max-height:414px !important;
    }
  }



  /*
    Todas las tablas del archivo:
    encabezados y registros completamente centrados.
  */
  html body table th,
  html body table td,
  html body table th *,
  html body table td *,
  html body table thead th,
  html body table tbody td,
  html body table thead th *,
  html body table tbody td *{
    text-align:center !important;
    justify-content:center !important;
    align-items:center !important;
    vertical-align:middle !important;
  }

  html body table th,
  html body table td{
    white-space:normal;
  }

  /* Mantener mismo peso visual entre encabezados y registros */
  html body table th,
  html body table th *,
  html body table td,
  html body table td *{
    font-weight:500 !important;
  }



  /*
    Base visual común para TODAS las tablas:
    bordes redondeados, borde suave y sin negrita pesada.
  */
  html body table{
    border-collapse:separate !important;
    border-spacing:0 !important;
    border-radius:1rem !important;
    overflow:hidden !important;
    border:1px solid #e5e7eb !important;
    background:#ffffff !important;
  }

  html body table thead tr:first-child th:first-child{
    border-top-left-radius:1rem !important;
  }

  html body table thead tr:first-child th:last-child{
    border-top-right-radius:1rem !important;
  }

  html body table tbody tr:last-child td:first-child{
    border-bottom-left-radius:1rem !important;
  }

  html body table tbody tr:last-child td:last-child{
    border-bottom-right-radius:1rem !important;
  }

  /*
    Registros: mismo tamaño y peso visual que se maneja en Aprobaciones.
  */
  html body table tbody td,
  html body table tbody td *,
  html body td.admin-unidad-concat-cell,
  html body td.admin-unidad-concat-cell *,
  html body #cifrasView table tbody td,
  html body #cifrasView table tbody td *{
    font-family:'Nunito', system-ui, sans-serif !important;
    font-size:0.78rem !important;
    line-height:0.95rem !important;
    font-weight:500 !important;
    text-align:center !important;
    vertical-align:middle !important;
  }

  /*
    Encabezados conservan el mismo tamaño/peso para que no se vean más pesados.
  */
  html body table thead th,
  html body table thead th *{
    font-family:'Nunito', system-ui, sans-serif !important;
    font-size:0.78rem !important;
    line-height:0.95rem !important;
    font-weight:500 !important;
    text-align:center !important;
    vertical-align:middle !important;
  }

  /*
    Cifras Históricas:
    unificar estética de todas las tablas internas, incluyendo "Gastos",
    para que se vea igual a "Cartera".
  */
  html body #cifrasView #cifrasTablesCard{
    border:1px solid #e2e8f0 !important;
    border-radius:1.25rem !important;
    background:rgba(248,250,252,0.65) !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"]{
    height:414px !important;
    min-height:414px !important;
    max-height:414px !important;
    overflow:auto !important;
    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    border-radius:1rem !important;
    padding:0 !important;
    box-shadow:none !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"].hidden{
    display:none !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table{
    width:100% !important;
    min-width:max-content !important;
    border:0 !important;
    border-radius:1rem !important;
    overflow:hidden !important;
    background:#ffffff !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] thead th{
    background:#f8fafc !important;
    padding-top:0.98rem !important;
    padding-bottom:0.98rem !important;
    padding-left:0.75rem !important;
    padding-right:0.75rem !important;
    text-align:center !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] tbody td{
    padding-top:0.98rem !important;
    padding-bottom:0.98rem !important;
    padding-left:0.75rem !important;
    padding-right:0.75rem !important;
    text-align:center !important;
    border-bottom:1px solid #f1f5f9 !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] tbody tr:last-child td{
    border-bottom:0 !important;
  }

  /*
    Refuerzo específico para Gastos: misma separación/estética que Cartera.
  */
  html body #cifrasView #cifrasTablaGastosWrapper,
  html body #cifrasView #cifrasTablaCarteraWrapper{
    height:414px !important;
    min-height:414px !important;
    max-height:414px !important;
    border-radius:1rem !important;
    border:1px solid #e5e7eb !important;
    background:#ffffff !important;
    overflow:auto !important;
  }

  html body #cifrasView #cifrasTablaGastosWrapper table th,
  html body #cifrasView #cifrasTablaGastosWrapper table td,
  html body #cifrasView #cifrasTablaCarteraWrapper table th,
  html body #cifrasView #cifrasTablaCarteraWrapper table td{
    font-size:0.78rem !important;
    line-height:0.95rem !important;
    font-weight:500 !important;
    text-align:center !important;
    padding-top:0.98rem !important;
    padding-bottom:0.98rem !important;
  }

  @media (max-width:900px){
    html body table{
      border-radius:1rem !important;
      overflow:hidden !important;
    }

    html body table tbody td,
    html body table tbody td *,
    html body table thead th,
    html body table thead th *{
      font-size:0.78rem !important;
      line-height:0.95rem !important;
      font-weight:500 !important;
      text-align:center !important;
    }

    html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"]{
      height:414px !important;
      min-height:414px !important;
      max-height:414px !important;
    }
  }



  /*
    Todas las tablas: +2 puntos aprox. en tamaño de letra.
    Se aplica a encabezados, registros y elementos internos.
  */
  html body table,
  html body table th,
  html body table td,
  html body table th *,
  html body table td *{
    font-size:0.92rem !important;
    line-height:1.15rem !important;
    font-weight:500 !important;
    text-align:center !important;
    vertical-align:middle !important;
  }

  /*
    Cifras Históricas:
    el problema de "Gastos" era que la tabla quedaba estirada al alto completo
    cuando tenía pocos registros. Se elimina ese estiramiento y se deja una
    separación fija igual para todas las categorías.
  */
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table,
  html body #cifrasView #cifrasTablaGastosWrapper table,
  html body #cifrasView #cifrasTablaCarteraWrapper table,
  html body #cifrasView #cifrasTablaRecaudoWrapper table{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    table-layout:auto !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] tbody tr,
  html body #cifrasView #cifrasTablaGastosWrapper tbody tr,
  html body #cifrasView #cifrasTablaCarteraWrapper tbody tr,
  html body #cifrasView #cifrasTablaRecaudoWrapper tbody tr{
    height:auto !important;
    min-height:0 !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] tbody td,
  html body #cifrasView #cifrasTablaGastosWrapper tbody td,
  html body #cifrasView #cifrasTablaCarteraWrapper tbody td,
  html body #cifrasView #cifrasTablaRecaudoWrapper tbody td{
    height:auto !important;
    padding-top:0.72rem !important;
    padding-bottom:0.72rem !important;
    padding-left:0.75rem !important;
    padding-right:0.75rem !important;
    font-size:0.92rem !important;
    line-height:1.15rem !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] thead th,
  html body #cifrasView #cifrasTablaGastosWrapper thead th,
  html body #cifrasView #cifrasTablaCarteraWrapper thead th,
  html body #cifrasView #cifrasTablaRecaudoWrapper thead th{
    padding-top:0.72rem !important;
    padding-bottom:0.72rem !important;
    padding-left:0.75rem !important;
    padding-right:0.75rem !important;
    font-size:0.92rem !important;
    line-height:1.15rem !important;
  }

  /*
    Refuerzo específico: Gastos exactamente con la misma densidad que las demás
    tablas de Cifras, sin filas gigantes.
  */
  html body #cifrasView #cifrasTablaGastosWrapper tbody tr > td{
    padding-top:0.72rem !important;
    padding-bottom:0.72rem !important;
    height:auto !important;
  }

  @media (max-width:900px){
    html body table,
    html body table th,
    html body table td,
    html body table th *,
    html body table td *{
      font-size:0.92rem !important;
      line-height:1.15rem !important;
    }

    html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] tbody td{
      padding-top:0.72rem !important;
      padding-bottom:0.72rem !important;
    }
  }



  /*
    v66:
    Sin JavaScript para altura ni tipografía = sin parpadeo.
    Todo se resuelve por CSS al final de la cascada.
  */

  /*
    Todas las tablas: encabezados y registros con el mismo tamaño,
    +0.5 aprox. respecto al ajuste anterior.
  */
  html body table,
  html body table thead th,
  html body table tbody td,
  html body table th,
  html body table td,
  html body table thead th *,
  html body table tbody td *,
  html body table th *,
  html body table td *{
    font-family:'Nunito', system-ui, sans-serif !important;
    font-size:0.875rem !important;
    line-height:1.15rem !important;
    font-weight:500 !important;
    text-align:center !important;
    vertical-align:middle !important;
  }

  /*
    Encabezados y registros conservan el mismo peso y tamaño.
  */
  html body table thead th,
  html body table tbody td{
    padding-left:0.75rem !important;
    padding-right:0.75rem !important;
  }

  /*
    Cifras Históricas: altura dinámica con máximo.
    No se fija height/min-height, así no aparece espacio vacío ni parpadeo.
  */
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"],
  html body #cifrasView #cifrasTablaGastosWrapper,
  html body #cifrasView #cifrasTablaCarteraWrapper,
  html body #cifrasView #cifrasTablaRecaudoWrapper{
    height:auto !important;
    min-height:0 !important;
    max-height:414px !important;
    overflow-y:auto !important;
    overflow-x:auto !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"].hidden{
    display:none !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    table-layout:auto !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] thead th,
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] tbody td{
    padding-top:0.72rem !important;
    padding-bottom:0.72rem !important;
  }

  /*
    Refuerzo específico para Gastos: misma densidad que el resto,
    sin estirar filas cuando hay pocos registros.
  */
  html body #cifrasView #cifrasTablaGastosWrapper tbody tr,
  html body #cifrasView #cifrasTablaGastosWrapper tbody td{
    height:auto !important;
    min-height:0 !important;
  }

  @media (max-width:900px){
    html body table,
    html body table thead th,
    html body table tbody td,
    html body table th,
    html body table td,
    html body table thead th *,
    html body table tbody td *,
    html body table th *,
    html body table td *{
      font-size:0.875rem !important;
      line-height:1.15rem !important;
    }

    html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"]{
      height:auto !important;
      min-height:0 !important;
      max-height:414px !important;
    }
  }



  /*
    CLIENTES > Ventas y pagos
    Selección más pastel / menos contraste.
  */
  html body #clienteVentasBody tr.cliente-venta-row-selected > td,
  html body #clienteVentasBody tr.cliente-venta-row-selected.is-open > td{
    background:#eefaf3 !important;
  }

  html body #clienteVentasBody tr.cliente-venta-row-selected > td:first-child{
    box-shadow:inset 2px 0 0 #a7f3d0 !important;
  }

  html body #clienteVentasBody tr.cliente-venta-row-selected:hover > td{
    background:#eaf8f0 !important;
  }

  /*
    Encabezado completo hasta el final del ancho.
  */
  html body #panelClienteVentasPagos .overflow-x-auto{
    background:#ffffff !important;
    border-radius:1rem !important;
    overflow:hidden !important;
  }

  html body #panelClienteVentasPagos table{
    width:100% !important;
    min-width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    overflow:hidden !important;
    border-radius:1rem !important;
    background:#ffffff !important;
  }

  html body #panelClienteVentasPagos table thead,
  html body #panelClienteVentasPagos table thead tr,
  html body #panelClienteVentasPagos table thead th{
    background:#f8fafc !important;
  }

  html body #panelClienteVentasPagos table thead th:first-child{
    border-top-left-radius:1rem !important;
  }

  html body #panelClienteVentasPagos table thead th:last-child{
    border-top-right-radius:1rem !important;
  }

  /*
    Desktop: las columnas auxiliares de mobile no deben dejar espacio,
    así el gris del encabezado llega hasta el borde derecho.
  */
  @media (min-width:768px){
    html body #panelClienteVentasPagos .cliente-ventas-table th.cliente-mobile-estado-header,
    html body #panelClienteVentasPagos .cliente-ventas-table th.cliente-mobile-ver-col,
    html body #clienteVentasBody tr.cliente-venta-row > td.col-estado-mobile,
    html body #clienteVentasBody tr.cliente-venta-row > td.col-ver-detalle{
      display:none !important;
      width:0 !important;
      max-width:0 !important;
      padding:0 !important;
      border:0 !important;
    }
  }

  /*
    Histórico de pagos: eliminar definitivamente la columna extra a la derecha de Atraso.
    En desktop y mobile se usa la columna normal .col-atraso.
  */
  html body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(9),
  html body #clientePagosBody tr.cliente-pago-row > td.col-atraso-mobile,
  html body #clientePagosBody tr.cliente-pago-row > td.col-ver-detalle.col-atraso-mobile{
    display:none !important;
    width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  @media (max-width:900px){
    /* En móvil, para pagos, mostrar Atraso normal y no crear columna duplicada */
    html body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(8),
    html body #clientePagosBody tr.cliente-pago-row > td.col-atraso{
      display:table-cell !important;
      width:14% !important;
      overflow:visible !important;
      text-overflow:clip !important;
    }

    html body #panelClienteVentasPagos .cliente-pagos-table thead th:nth-child(9),
    html body #clientePagosBody tr.cliente-pago-row > td.col-atraso-mobile{
      display:none !important;
    }

    html body #clienteVentasBody tr.cliente-venta-row-selected > td,
    html body #clienteVentasBody tr.cliente-venta-row-selected.is-open > td{
      background:#eefaf3 !important;
    }
  }



  /*
    Fondo general 2% menos blanco.
    #FAFAFA equivale a un gris muy sutil, casi blanco.
  */
  html,
  body,
  #dashboard,
  #dashboard > .min-h-screen,
  #mainResumen,
  #unitsView,
  #detailsView,
  #clientesView,
  #aprobacionesView,
  #permisosView,
  #adminGeneralView,
  #modificarCajaView,
  #abrirCajasView,
  #pagosView,
  #depurarCarteraView,
  #historicoCambiosView,
  #cifrasView,
  #mapaView{
    background:#fafafa !important;
  }

  /*
    Tablas y contenedores: ya no blanco puro,
    pero mantiene contraste con encabezados y selección.
  */
  html body table,
  html body table tbody,
  html body table tbody tr,
  html body table tbody td,
  html body #panelClienteVentasPagos .overflow-x-auto,
  html body #panelClienteVentasPagos table,
  html body #panelClienteVentasPagos tbody,
  html body #panelClienteVentasPagos tbody td,
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"],
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table{
    background:#fbfbfb !important;
  }

  /*
    Encabezados conservan un gris sutil un poco más marcado.
  */
  html body table thead,
  html body table thead tr,
  html body table thead th,
  html body #panelClienteVentasPagos table thead,
  html body #panelClienteVentasPagos table thead tr,
  html body #panelClienteVentasPagos table thead th{
    background:#f6f7f8 !important;
  }

  /*
    Tarjetas principales con gris casi blanco para que no se vean planas.
  */
  html body #clienteTabsCard,
  html body #clienteHeaderCard,
  html body #cifrasTablesCard,
  html body .bg-white{
    background-color:#fbfbfb !important;
  }

  /*
    Mantener selección pastel.
  */
  html body #clienteVentasBody tr.cliente-venta-row-selected > td,
  html body #clienteVentasBody tr.cliente-venta-row-selected.is-open > td{
    background:#eefaf3 !important;
  }



  /*
    Fondo: más blanco que v68, pero sin llegar a blanco puro.
  */
  html,
  body,
  #dashboard,
  #dashboard > .min-h-screen,
  #mainResumen,
  #unitsView,
  #detailsView,
  #clientesView,
  #aprobacionesView,
  #permisosView,
  #adminGeneralView,
  #modificarCajaView,
  #abrirCajasView,
  #pagosView,
  #depurarCarteraView,
  #historicoCambiosView,
  #cifrasView,
  #mapaView{
    background:#fdfdfd !important;
  }

  html body #clienteTabsCard,
  html body #clienteHeaderCard,
  html body #cifrasTablesCard,
  html body .bg-white{
    background-color:#fefefe !important;
  }

  html body table,
  html body table tbody,
  html body table tbody tr,
  html body table tbody td,
  html body #panelClienteVentasPagos .overflow-x-auto,
  html body #panelClienteVentasPagos table,
  html body #panelClienteVentasPagos tbody,
  html body #panelClienteVentasPagos tbody td,
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"],
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table{
    background:#fefefe !important;
  }

  html body table thead,
  html body table thead tr,
  html body table thead th{
    background:#fafafa !important;
  }

  /*
    Clientes > Ventas y pagos:
    misma separación vertical que venimos usando en Aprobaciones.
  */
  html body #panelClienteVentasPagos #clienteVentasBody tr.cliente-venta-row > td,
  html body #panelClienteVentasPagos #clientePagosBody tr.cliente-pago-row > td{
    padding-top:1.25rem !important;
    padding-bottom:1.25rem !important;
  }

  html body #panelClienteVentasPagos table thead th{
    padding-top:0.95rem !important;
    padding-bottom:0.95rem !important;
  }

  /*
    Unidad + Alias concatenados: ocultar columna Alias cuando ya se unifica
    en una sola columna Unidad.
  */
  html body table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  html body table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  html body th.admin-unidad-alias-hidden,
  html body td.admin-unidad-alias-hidden{
    display:none !important;
    width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  /*
    Modificar Cajas > Ventas en mobile:
    principales: checkbox, Unidad, Cliente, Valor, Fecha creación.
    Los demás van en expandido.
  */
  #modCajaTbody tr.modcaja-mobile-extra-row{
    display:none !important;
  }

  #modCajaTbody tr.modcaja-mobile-extra-row.open{
    display:table-row !important;
  }

  @media (max-width:900px){
    html body #modificarCajaView table[data-modcaja-tab="ventas"] thead th:not(.modcaja-head-check):not(.modcaja-head-unidad):not(.modcaja-head-cliente):not(.modcaja-head-valor):not(.modcaja-head-fecha-creacion){
      display:none !important;
    }

    html body #modCajaTbody tr.modcaja-venta-row > td:not(.modcaja-col-check):not(.modcaja-col-unidad):not(.modcaja-col-cliente):not(.modcaja-col-valor):not(.modcaja-col-fecha-creacion){
      display:none !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"]{
      table-layout:fixed !important;
      width:100% !important;
      min-width:100% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-check,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-check{
      width:8% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-unidad,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-unidad{
      width:25% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-cliente,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-cliente{
      width:29% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-valor,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-valor{
      width:19% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-fecha-creacion,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-fecha-creacion{
      width:19% !important;
    }

    html body #modCajaTbody tr.modcaja-venta-row{
      cursor:pointer !important;
    }

    html body #modCajaTbody tr.modcaja-venta-row.is-open > td{
      background:#f8fafc !important;
    }

    html body #modCajaTbody tr.modcaja-mobile-extra-row.open > td{
      display:table-cell !important;
      padding:0 !important;
      background:#ffffff !important;
      border-bottom:1px solid #e2e8f0 !important;
      white-space:normal !important;
      overflow:visible !important;
    }

    html body .modcaja-mobile-detail-card{
      width:100% !important;
      background:#f8fafc !important;
      border-top:1px solid #e2e8f0 !important;
      padding:0.95rem 0.72rem !important;
      box-sizing:border-box !important;
    }

    html body .modcaja-mobile-detail-grid{
      display:grid !important;
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:0.8rem 0.85rem !important;
    }

    html body .modcaja-mobile-detail-grid > div{
      display:flex !important;
      flex-direction:column !important;
      min-width:0 !important;
      text-align:center !important;
    }

    html body .modcaja-mobile-label{
      font-size:0.72rem !important;
      line-height:0.86rem !important;
      color:#64748b !important;
      margin-bottom:0.14rem !important;
      font-weight:500 !important;
    }

    html body .modcaja-mobile-value{
      font-size:0.875rem !important;
      line-height:1.15rem !important;
      color:#0f172a !important;
      font-weight:500 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
  }

  @media (min-width:901px){
    html body #modCajaTbody tr.modcaja-mobile-extra-row{
      display:none !important;
    }
  }



  /*
    Mobile solamente: quitar el contenedor visual de Clientes
    para ganar espacio horizontal.
  */
  @media (max-width:900px){
    html body #clientesView #clienteTabsCard{
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:0 !important;
      padding-left:0 !important;
      padding-right:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      width:100% !important;
      max-width:100% !important;
    }

    html body #clientesView #clienteTabsCard > div,
    html body #panelClienteInfoGeneral,
    html body #panelClienteVentasPagos{
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:0 !important;
      padding-left:0 !important;
      padding-right:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      width:100% !important;
      max-width:100% !important;
    }

    html body #panelClienteVentasPagos section{
      padding-left:0 !important;
      padding-right:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      width:100% !important;
      max-width:100% !important;
    }

    html body #panelClienteVentasPagos .overflow-x-auto{
      width:100% !important;
      max-width:100% !important;
      margin-left:0 !important;
      margin-right:0 !important;
      border-left:0 !important;
      border-right:0 !important;
      border-radius:0.85rem !important;
    }
  }

  /*
    Corregir "keyboard_arrow..." visible como texto:
    los íconos Material Symbols no deben heredar Nunito de las tablas.
  */
  html body .material-symbols-outlined,
  html body .cliente-mobile-toggle-icon,
  html body #panelClienteVentasPagos .material-symbols-outlined,
  html body table .material-symbols-outlined{
    font-family:'Material Symbols Outlined' !important;
    font-weight:normal !important;
    font-style:normal !important;
    font-size:24px;
    line-height:1 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    -webkit-font-feature-settings:'liga';
    -webkit-font-smoothing:antialiased;
    font-feature-settings:'liga';
  }

  /*
    Unidad + Alias: cuando estén separados, queda visible solo Unidad concatenada.
  */
  html body table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
  html body table.admin-unidad-concat-table td.admin-unidad-alias-hidden,
  html body th.admin-unidad-alias-hidden,
  html body td.admin-unidad-alias-hidden{
    display:none !important;
    width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  /*
    Modificar Caja > Ventas mobile:
    principales: Unidad, Cliente, Valor, Fecha creación.
  */
  #modCajaTbody tr.modcaja-mobile-extra-row{
    display:none !important;
  }

  #modCajaTbody tr.modcaja-mobile-extra-row.open{
    display:table-row !important;
  }

  @media (max-width:900px){
    html body #modificarCajaView table[data-modcaja-tab="ventas"]{
      table-layout:fixed !important;
      width:100% !important;
      min-width:100% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] thead th:not(.modcaja-head-check):not(.modcaja-head-unidad):not(.modcaja-head-cliente):not(.modcaja-head-valor):not(.modcaja-head-fecha-creacion){
      display:none !important;
    }

    html body #modCajaTbody tr.modcaja-venta-row > td:not(.modcaja-col-check):not(.modcaja-col-unidad):not(.modcaja-col-cliente):not(.modcaja-col-valor):not(.modcaja-col-fecha-creacion){
      display:none !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-check,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-check{
      width:8% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-unidad,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-unidad{
      width:24% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-cliente,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-cliente{
      width:30% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-valor,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-valor{
      width:19% !important;
    }

    html body #modificarCajaView table[data-modcaja-tab="ventas"] .modcaja-head-fecha-creacion,
    html body #modCajaTbody tr.modcaja-venta-row > td.modcaja-col-fecha-creacion{
      width:19% !important;
    }

    html body #modCajaTbody tr.modcaja-venta-row{
      cursor:pointer !important;
    }

    html body #modCajaTbody tr.modcaja-venta-row.is-open > td{
      background:#f8fafc !important;
    }

    html body #modCajaTbody tr.modcaja-mobile-extra-row.open > td{
      display:table-cell !important;
      padding:0 !important;
      background:#ffffff !important;
      border-bottom:1px solid #e2e8f0 !important;
      white-space:normal !important;
      overflow:visible !important;
    }

    html body .modcaja-mobile-detail-card{
      width:100% !important;
      background:#f8fafc !important;
      border-top:1px solid #e2e8f0 !important;
      padding:0.95rem 0.72rem !important;
      box-sizing:border-box !important;
    }

    html body .modcaja-mobile-detail-grid{
      display:grid !important;
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:0.8rem 0.85rem !important;
    }

    html body .modcaja-mobile-detail-grid > div{
      display:flex !important;
      flex-direction:column !important;
      min-width:0 !important;
      text-align:center !important;
    }

    html body .modcaja-mobile-label{
      font-size:0.72rem !important;
      line-height:0.86rem !important;
      color:#64748b !important;
      margin-bottom:0.14rem !important;
      font-weight:500 !important;
    }

    html body .modcaja-mobile-value{
      font-size:0.875rem !important;
      line-height:1.15rem !important;
      color:#0f172a !important;
      font-weight:500 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
  }

  @media (min-width:901px){
    html body #modCajaTbody tr.modcaja-mobile-extra-row{
      display:none !important;
    }
  }



  @media (max-width:900px){
    /*
      Modificar Caja mobile:
      quitar contenedor exterior y contenedor interno de "Registros".
      Esto deja la tabla ocupando más ancho útil.
    */

    /* Contenedor general de la vista */
    html body #modificarCajaView{
      padding-left:0 !important;
      padding-right:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      width:100% !important;
      max-width:100% !important;
      background:#fdfdfd !important;
    }

    html body #modificarCajaView > div,
    html body #modificarCajaView > div > div{
      width:100% !important;
      max-width:100% !important;
      margin-left:0 !important;
      margin-right:0 !important;
      padding-left:0 !important;
      padding-right:0 !important;
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:0 !important;
    }

    /*
      Contenedor interno donde está la tabla Registros.
      Se elimina borde, fondo, padding lateral y radio del card.
    */
    html body #modificarCajaView main,
    html body #modificarCajaView main > section{
      width:100% !important;
      max-width:100% !important;
      margin-left:0 !important;
      margin-right:0 !important;
      padding-left:0 !important;
      padding-right:0 !important;
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:0 !important;
    }

    /*
      Mantener un poco de aire solo en títulos, filtros y botones,
      pero no en la tabla.
    */
    html body #modificarCajaView header,
    html body #modificarCajaView main > section > div:first-child{
      padding-left:0.75rem !important;
      padding-right:0.75rem !important;
    }

    /*
      Tabla full width.
    */
    html body #modificarCajaView .overflow-x-auto{
      width:100% !important;
      max-width:100% !important;
      margin-left:0 !important;
      margin-right:0 !important;
      padding-left:0 !important;
      padding-right:0 !important;
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:0.85rem !important;
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch !important;
    }

    html body #modificarCajaView table{
      width:100% !important;
      min-width:100% !important;
      margin-left:0 !important;
      margin-right:0 !important;
      border-radius:0.85rem !important;
      overflow:hidden !important;
    }

    html body #modCajaEmpty{
      margin-left:0 !important;
      margin-right:0 !important;
      border:0 !important;
      background:transparent !important;
    }
  }



  @media (max-width:900px){
    /*
      Modificar Caja: scroll horizontal real y columnas compactas.
      La tabla ya no se fuerza a 720px ni a anchos grandes.
    */
    html body #modificarCajaView .overflow-x-auto{
      overflow-x:auto !important;
      overflow-y:visible !important;
      -webkit-overflow-scrolling:touch !important;
      width:100% !important;
      max-width:100% !important;
      overscroll-behavior-x:contain !important;
    }

    html body #modificarCajaView .overflow-x-auto::-webkit-scrollbar{
      height:5px !important;
    }

    html body #modificarCajaView .overflow-x-auto::-webkit-scrollbar-thumb{
      background:rgba(148,163,184,.68) !important;
      border-radius:9999px !important;
    }

    html body #modificarCajaView .overflow-x-auto::-webkit-scrollbar-track{
      background:transparent !important;
    }

    html body #modificarCajaView table.modcaja-table{
      table-layout:auto !important;
      width:max-content !important;
      min-width:100% !important;
      max-width:none !important;
      border-collapse:separate !important;
      border-spacing:0 !important;
    }

    html body #modificarCajaView table.modcaja-table th,
    html body #modificarCajaView table.modcaja-table td{
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
      white-space:nowrap !important;
      overflow:visible !important;
      text-overflow:clip !important;
      padding-left:0.48rem !important;
      padding-right:0.48rem !important;
    }

    html body #modificarCajaView table.modcaja-table .modcaja-head-check,
    html body #modCajaTbody tr.modcaja-main-row > td.modcaja-col-check{
      width:38px !important;
      min-width:38px !important;
      max-width:38px !important;
      padding-left:0.25rem !important;
      padding-right:0.25rem !important;
    }

    /*
      Campos principales por pestaña.
      Los secundarios se ocultan en la línea principal y van al expandido.
    */

    /* Ventas: Unidad, Cliente, Valor, Fecha creación */
    html body #modificarCajaView table[data-modcaja-tab="ventas"] thead th:not(.modcaja-head-check):not(.modcaja-head-unidad):not(.modcaja-head-cliente):not(.modcaja-head-valor):not(.modcaja-head-fecha-creacion),
    html body #modCajaTbody tr.modcaja-ventas-row > td:not(.modcaja-col-check):not(.modcaja-col-unidad):not(.modcaja-col-cliente):not(.modcaja-col-valor):not(.modcaja-col-fecha-creacion){
      display:none !important;
    }

    /* Pagos: Unidad, Cliente, Valor, Saldo después pago */
    html body #modificarCajaView table[data-modcaja-tab="pagos"] thead th:not(.modcaja-head-check):not(.modcaja-head-unidad):not(.modcaja-head-cliente):not(.modcaja-head-valor):not(.modcaja-head-saldo-despues-pago),
    html body #modCajaTbody tr.modcaja-pagos-row > td:not(.modcaja-col-check):not(.modcaja-col-unidad):not(.modcaja-col-cliente):not(.modcaja-col-valor):not(.modcaja-col-saldo-despues-pago){
      display:none !important;
    }

    /* Movimientos: Unidad, Categoría, Tipo, Valor */
    html body #modificarCajaView table[data-modcaja-tab="movimientos"] thead th:not(.modcaja-head-check):not(.modcaja-head-unidad):not(.modcaja-head-categoria):not(.modcaja-head-tipo):not(.modcaja-head-valor),
    html body #modCajaTbody tr.modcaja-movimientos-row > td:not(.modcaja-col-check):not(.modcaja-col-unidad):not(.modcaja-col-categoria):not(.modcaja-col-tipo):not(.modcaja-col-valor){
      display:none !important;
    }

    #modCajaTbody tr.modcaja-mobile-extra-row{
      display:none !important;
    }

    #modCajaTbody tr.modcaja-mobile-extra-row.open{
      display:table-row !important;
    }

    html body #modCajaTbody tr.modcaja-main-row{
      cursor:pointer !important;
    }

    html body #modCajaTbody tr.modcaja-main-row.is-open > td{
      background:#f8fafc !important;
    }

    html body #modCajaTbody tr.modcaja-mobile-extra-row.open > td{
      display:table-cell !important;
      padding:0 !important;
      background:#ffffff !important;
      border-bottom:1px solid #e2e8f0 !important;
      white-space:normal !important;
      overflow:visible !important;
    }

    html body .modcaja-mobile-detail-card{
      width:100% !important;
      min-width:100% !important;
      background:#f8fafc !important;
      border-top:1px solid #e2e8f0 !important;
      padding:0.85rem 0.65rem !important;
      box-sizing:border-box !important;
    }

    html body .modcaja-mobile-detail-grid{
      display:grid !important;
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:0.72rem 0.75rem !important;
    }

    html body .modcaja-mobile-detail-grid > div{
      display:flex !important;
      flex-direction:column !important;
      min-width:0 !important;
      text-align:center !important;
    }

    html body .modcaja-mobile-label{
      font-size:0.72rem !important;
      line-height:0.86rem !important;
      color:#64748b !important;
      margin-bottom:0.14rem !important;
      font-weight:500 !important;
    }

    html body .modcaja-mobile-value{
      font-size:0.875rem !important;
      line-height:1.15rem !important;
      color:#0f172a !important;
      font-weight:500 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
  }

  @media (min-width:901px){
    html body #modCajaTbody tr.modcaja-mobile-extra-row{
      display:none !important;
    }
  }



  .sociedad-switcher-btn{
    width:28px !important;
    height:28px !important;
    border-radius:9999px !important;
    border:1px solid rgba(148,163,184,.36) !important;
    background:rgba(255,255,255,.82) !important;
    color:#334155 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 4px 12px rgba(15,23,42,.08) !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .sociedad-switcher-btn:active{
    transform:scale(.98);
  }

  .sociedad-switcher-icon,
  #sociedadSwitcher .material-symbols-outlined{
    font-family:'Material Symbols Outlined' !important;
    font-weight:normal !important;
    font-style:normal !important;
    font-size:22px !important;
    line-height:1 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
    display:inline-block !important;
    white-space:nowrap !important;
    word-wrap:normal !important;
    direction:ltr !important;
    -webkit-font-feature-settings:'liga' !important;
    font-feature-settings:'liga' !important;
    -webkit-font-smoothing:antialiased !important;
  }

  .sociedad-switcher-menu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    min-width:150px !important;
    max-height:260px !important;
    overflow:auto !important;
    border:1px solid #e2e8f0 !important;
    border-radius:1rem !important;
    background:#ffffff !important;
    box-shadow:0 16px 38px rgba(15,23,42,.16) !important;
    padding:.35rem !important;
    z-index:10050 !important;
  }

  .sociedad-option{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:.75rem !important;
    border:0 !important;
    background:transparent !important;
    color:#0f172a !important;
    border-radius:.75rem !important;
    padding:.62rem .72rem !important;
    font-size:.86rem !important;
    line-height:1.1rem !important;
    font-weight:700 !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

  .sociedad-option:hover{
    background:#f1f5f9 !important;
  }

  .sociedad-option.is-active{
    background:#e9fbf1 !important;
    color:#047857 !important;
  }

  .sociedad-option-check{
    font-size:18px !important;
    color:#00AD57 !important;
  }

  @media (max-width:900px){
    .sociedad-logo-wrap{
      gap:.15rem !important;
    }
    .sociedad-switcher-btn{
      width:26px !important;
      height:26px !important;
    }
    .sociedad-switcher-menu{
      left:auto !important;
      right:0 !important;
      transform:none !important;
    }
  }

  #sociedadSwitcher:not(.hidden){
    display:block !important;
  }

  #sociedadSwitcher:not(.hidden){
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .sociedad-logo-wrap{
    overflow:visible !important;
  }



  /* Flecha sin contenedor/círculo, alineada a piso del logo/texto */
  .sociedad-logo-wrap{
    align-items:flex-end !important;
    gap:0.18rem !important;
  }

  #sociedadSwitcher{
    position:relative !important;
    align-self:flex-end !important;
    margin-left:0.02rem !important;
    margin-bottom:0.02rem !important;
  }

  .sociedad-switcher-btn{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:#64748b !important;
    display:inline-flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    line-height:1 !important;
  }

  .sociedad-switcher-btn:hover,
  .sociedad-switcher-btn:focus,
  .sociedad-switcher-btn:focus-visible,
  .sociedad-switcher-btn:active{
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    border:0 !important;
  }

  .sociedad-switcher-icon,
  #sociedadSwitcher .material-symbols-outlined.sociedad-switcher-icon{
    font-size:22px !important;
    line-height:1 !important;
    color:#64748b !important;
    display:block !important;
    transform:translateY(1px) !important;
  }

  /* Menú de opciones 60% más ancho */
  .sociedad-switcher-menu{
    min-width:240px !important;   /* 150px -> 240px */
    width:240px !important;
    max-width:240px !important;
    top:calc(100% + 6px) !important;
    left:0 !important;
    right:auto !important;
    transform:none !important;
  }

  @media (max-width:900px){
    .sociedad-switcher-menu{
      left:0 !important;
      right:auto !important;
      transform:none !important;
    }
    .sociedad-switcher-icon,
    #sociedadSwitcher .material-symbols-outlined.sociedad-switcher-icon{
      font-size:21px !important;
    }
  }

  /* Colores finales de los toast */
  .perm-toast,
  .perm-toast-info{
    background:rgba(0, 0, 0, 0.87) !important;
    color:#f5f5f5 !important;
    opacity:1 !important;
    border:0 !important;
  }

  .perm-toast-success{
    background:#00AD57 !important;
    color:#ecfdf5 !important;
    opacity:1 !important;
    border:0 !important;
  }

  .perm-toast-warning{
    background:#FFBF00 !important;
    color:#1f2937 !important;
    opacity:1 !important;
    border:0 !important;
  }

  .perm-toast-warning-white{
    background:#FFBF00 !important;
    color:#ffffff !important;
    opacity:1 !important;
    border:0 !important;
  }

  .perm-toast-error{
    background:#ef4444 !important;
    color:#fff1f2 !important;
    opacity:1 !important;
    border:0 !important;
  }



  /* Sociedad: no ocultar ni cortar el desplegable en móvil */
  #topbar{
    overflow: visible !important;
  }

  #sociedadSwitcher:not(.hidden){
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .sociedad-logo-wrap,
  #sociedadSwitcher{
    overflow:visible !important;
  }

  @media (max-width:900px){
    #sociedadSwitcherMenu.sociedad-switcher-menu{
      position:fixed !important;
      top:58px !important;
      left:50% !important;
      right:auto !important;
      transform:translateX(-50%) !important;
      width:240px !important;
      min-width:240px !important;
      max-width:calc(100vw - 24px) !important;
      z-index:100000 !important;
    }
  }

  /* Modificar Caja: filtros iguales a los filtros tipo píldora de las otras pantallas */
  #modificarCajaView #modCajaFiltroBtn,
  #modificarCajaView #modCajaCajaBtn{
    height:44px !important;
    min-height:44px !important;
    border-radius:var(--filters-pill-radius, 9999px) !important;
    border:1px solid #dbe5f1 !important;
    background:#ffffff !important;
    color:#0f172a !important;
    box-shadow:none !important;
    outline:none !important;
    overflow:hidden !important;
  }

  #modificarCajaView #modCajaFiltroPanel,
  #modificarCajaView #modCajaCajaPanel{
    border-radius:var(--filters-panel-radius, 1.25rem) !important;
    overflow:hidden !important;
  }

  #modificarCajaView #modCajaFiltroSearch,
  #modificarCajaView #modCajaCajaSearch{
    height:38px !important;
    min-height:38px !important;
    border-radius:var(--filters-pill-radius, 9999px) !important;
    border:1px solid #dbe5f1 !important;
    background:#ffffff !important;
  }

  /* Tabla compacta sin scroll horizontal */
  #modificarCajaView .modcaja-table-wrapper,
  #modificarCajaView .overflow-x-auto{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  #modificarCajaView table,
  #modificarCajaView table.modcaja-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
    border-collapse:collapse !important;
  }

  #modificarCajaView #modCajaTheadRow th,
  #modificarCajaView #modCajaTbody td,
  #modificarCajaView #modCajaTbody td *{
    font-size:0.72rem !important;
    line-height:0.92rem !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
  }

  #modificarCajaView #modCajaTheadRow th{
    color:#475569 !important;
    font-weight:600 !important;
  }

  #modificarCajaView #modCajaTheadRow th,
  #modificarCajaView #modCajaTbody td{
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    min-width:0 !important;
    padding-left:0.18rem !important;
    padding-right:0.18rem !important;
    vertical-align:middle !important;
  }

  #modCajaTbody tr > td{
    height:4.45rem !important;
  }

  /* Cliente en 2 líneas balanceadas */
  #modificarCajaView .modcaja-cliente-two-lines{
    display:block !important;
    white-space:pre-line !important;
    line-height:0.98rem !important;
    max-height:1.98rem !important;
    overflow:hidden !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  /* Fecha creación en 2 líneas: fecha corta + hora */
  #modificarCajaView .modcaja-fecha-two-lines{
    display:block !important;
    white-space:pre-line !important;
    line-height:0.96rem !important;
    max-height:1.95rem !important;
    overflow:hidden !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  #modificarCajaView .modcaja-cliente-cell,
  #modificarCajaView .modcaja-fecha-creacion-cell,
  #modificarCajaView td.modcaja-col-cliente,
  #modificarCajaView td.modcaja-col-fecha-creacion{
    white-space:normal !important;
    min-width:0 !important;
    vertical-align:middle !important;
  }

  @media (max-width:900px){
    /* Distribución más estable: evita corte de fecha y deja valor legible */
    #modificarCajaView table[data-modcaja-tab] .modcaja-head-check,
    #modCajaTbody tr > td.modcaja-col-check{
      width:6% !important;
      max-width:6% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-unidad,
    #modCajaTbody tr > td.modcaja-col-unidad{
      width:17% !important;
      max-width:17% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-cliente,
    #modCajaTbody tr > td.modcaja-col-cliente{
      width:29% !important;
      max-width:29% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-valor,
    #modCajaTbody tr > td.modcaja-col-valor{
      width:23% !important;
      max-width:23% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-fecha-creacion,
    #modCajaTbody tr > td.modcaja-col-fecha-creacion{
      width:25% !important;
      max-width:25% !important;
    }

    #modificarCajaView #modCajaTheadRow th,
    #modificarCajaView #modCajaTbody td,
    #modificarCajaView #modCajaTbody td *{
      font-size:0.70rem !important;
      line-height:0.90rem !important;
    }

    #modCajaTbody tr > td{
      height:4.15rem !important;
    }
  }



  @media (max-width:900px){
    /* Compactar el contenido visual para acercar columnas */
    #modificarCajaView .modcaja-table-wrapper,
    #modificarCajaView .overflow-x-auto{
      padding-left: 0.15rem !important;
      padding-right: 0.15rem !important;
    }

    #modificarCajaView table,
    #modificarCajaView table.modcaja-table{
      width: 93% !important;
      max-width: 93% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Columnas más estrechas y cercanas entre sí */
    #modificarCajaView table[data-modcaja-tab] .modcaja-head-check,
    #modCajaTbody tr > td.modcaja-col-check{
      width: 5% !important;
      max-width: 5% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-unidad,
    #modCajaTbody tr > td.modcaja-col-unidad{
      width: 15% !important;
      max-width: 15% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-cliente,
    #modCajaTbody tr > td.modcaja-col-cliente{
      width: 27% !important;
      max-width: 27% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-valor,
    #modCajaTbody tr > td.modcaja-col-valor{
      width: 20% !important;
      max-width: 20% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-fecha-creacion,
    #modCajaTbody tr > td.modcaja-col-fecha-creacion{
      width: 19% !important;
      max-width: 19% !important;
    }

    /* Aumentar tipografía ahora que el contenido quedó más compacto */
    #modificarCajaView #modCajaTheadRow th,
    #modificarCajaView #modCajaTbody td,
    #modificarCajaView #modCajaTbody td *{
      font-size: 0.76rem !important;
      line-height: 0.98rem !important;
    }

    #modificarCajaView #modCajaTheadRow th{
      font-weight: 600 !important;
    }

    /* Menor padding lateral para evitar sensación de separación excesiva */
    #modificarCajaView #modCajaTheadRow th,
    #modificarCajaView #modCajaTbody td{
      padding-left: 0.10rem !important;
      padding-right: 0.10rem !important;
    }

    #modCajaTbody tr > td{
      height: 4.20rem !important;
    }

    #modificarCajaView .modcaja-cliente-two-lines,
    #modificarCajaView .modcaja-fecha-two-lines{
      line-height: 1.00rem !important;
    }
  }



  @media (max-width:900px){
    /* Reducir aún más el espacio visual entre columnas */
    #modificarCajaView .modcaja-table-wrapper,
    #modificarCajaView .overflow-x-auto{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #modificarCajaView table,
    #modificarCajaView table.modcaja-table{
      width: 89% !important;
      max-width: 89% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      border-collapse: collapse !important;
    }

    /* Anchos más ajustados */
    #modificarCajaView table[data-modcaja-tab] .modcaja-head-check,
    #modCajaTbody tr > td.modcaja-col-check{
      width: 4% !important;
      max-width: 4% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-unidad,
    #modCajaTbody tr > td.modcaja-col-unidad{
      width: 14% !important;
      max-width: 14% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-cliente,
    #modCajaTbody tr > td.modcaja-col-cliente{
      width: 27% !important;
      max-width: 27% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-valor,
    #modCajaTbody tr > td.modcaja-col-valor{
      width: 19% !important;
      max-width: 19% !important;
    }

    #modificarCajaView table[data-modcaja-tab] .modcaja-head-fecha-creacion,
    #modCajaTbody tr > td.modcaja-col-fecha-creacion{
      width: 17% !important;
      max-width: 17% !important;
    }

    /* Menos padding horizontal para que las columnas se perciban más juntas */
    #modificarCajaView #modCajaTheadRow th,
    #modificarCajaView #modCajaTbody td{
      padding-left: 0.02rem !important;
      padding-right: 0.02rem !important;
      padding-top: 0.30rem !important;
      padding-bottom: 0.30rem !important;
    }

    /* Más tamaño de texto */
    #modificarCajaView #modCajaTheadRow th,
    #modificarCajaView #modCajaTbody td,
    #modificarCajaView #modCajaTbody td *{
      font-size: 0.81rem !important;
      line-height: 1.02rem !important;
    }

    #modificarCajaView #modCajaTheadRow th{
      font-weight: 600 !important;
    }

    #modificarCajaView .modcaja-cliente-two-lines,
    #modificarCajaView .modcaja-fecha-two-lines{
      line-height: 1.02rem !important;
    }

    #modCajaTbody tr > td{
      height: 4.08rem !important;
    }
  }



  @media (min-width:901px){
    /* Desktop: las tablas ajustan columnas al contenido y no generan expandibles mobile */
    html body #modificarCajaView .modcaja-table-wrapper,
    html body #modificarCajaView .overflow-x-auto{
      width:100% !important;
      max-width:100% !important;
      overflow-x:auto !important;
      overflow-y:visible !important;
      -webkit-overflow-scrolling:auto !important;
    }

    html body #modificarCajaView table,
    html body #modificarCajaView table.modcaja-table,
    html body #modificarCajaView table.admin-unidad-concat-table{
      table-layout:auto !important;
      width:max-content !important;
      min-width:100% !important;
      max-width:none !important;
      border-collapse:collapse !important;
      border-spacing:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }

    html body #modificarCajaView table.modcaja-table th,
    html body #modificarCajaView table.modcaja-table td,
    html body #modificarCajaView table.admin-unidad-concat-table th,
    html body #modificarCajaView table.admin-unidad-concat-table td{
      width:auto !important;
      min-width:max-content !important;
      max-width:none !important;
      white-space:nowrap !important;
      overflow:visible !important;
      text-overflow:clip !important;
      padding-left:0.55rem !important;
      padding-right:0.55rem !important;
      vertical-align:middle !important;
      font-size:0.875rem !important;
      line-height:1.25rem !important;
      font-weight:500 !important;
    }

    /* Unidad con fuente igual a las demás columnas */
    html body #modificarCajaView th.modcaja-head-unidad,
    html body #modCajaTbody tr > td.modcaja-col-unidad,
    html body #modificarCajaView td.admin-unidad-concat-cell{
      font-size:0.875rem !important;
      line-height:1.25rem !important;
      font-weight:500 !important;
      color:#334155 !important;
      white-space:nowrap !important;
    }

    /* Cliente y fechas en desktop a una sola línea */
    html body #modificarCajaView .modcaja-cliente-two-lines,
    html body #modificarCajaView .modcaja-fecha-two-lines{
      display:inline !important;
      white-space:nowrap !important;
      overflow:visible !important;
      text-overflow:clip !important;
      max-height:none !important;
      line-height:1.25rem !important;
    }

    /* Si Unidad y Alias se fusionan, Alias oculto no debe ocupar ancho */
    html body #modificarCajaView table.admin-unidad-concat-table th.admin-unidad-alias-hidden,
    html body #modificarCajaView table.admin-unidad-concat-table td.admin-unidad-alias-hidden{
      display:none !important;
      width:0 !important;
      min-width:0 !important;
      max-width:0 !important;
      padding:0 !important;
      border:0 !important;
    }

    html body #modCajaTbody tr.modcaja-mobile-extra-row{
      display:none !important;
    }
  }



  @media (max-width:900px){
    /* Botones Ventas / Pagos / Movimientos 15% más grandes SOLO en mobile */
    #modCajaTab_ventas,
    #modCajaTab_pagos,
    #modCajaTab_movimientos{
      min-height: 2.42rem !important;
      padding: 0.62rem 0.96rem 0.50rem 0.96rem !important;
      font-size: 0.95rem !important;
      line-height: 1.08 !important;
      border-radius: 9999px !important;
      font-weight: 600 !important;
    }

    /* Centrar verticalmente los botones entre Estado caja y Registros */
    #modCajaMovFilters{
      margin-top: 18px !important;
      margin-bottom: 10px !important;
    }

    #modCajaMovFilters.closest-fallback{}

    #modificarCajaView header > div:has(#modCajaMovFilters){
      margin-top: 18px !important;
      margin-bottom: 10px !important;
    }

    #modificarCajaView header{
      padding-bottom: 0 !important;
    }

    #modificarCajaView main{
      margin-top: 0 !important;
    }

    #modificarCajaView main > section:first-child{
      margin-top: 0 !important;
    }

    /* Movimientos: encabezado con alto uniforme como las otras tablas */
    html body #modificarCajaView table[data-modcaja-tab="movimientos"] #modCajaTheadRow,
    html body #modificarCajaView table[data-modcaja-tab="movimientos"] #modCajaTheadRow th{
      height: 3.25rem !important;
      min-height: 3.25rem !important;
      padding-top: 0.58rem !important;
      padding-bottom: 0.50rem !important;
      vertical-align: middle !important;
    }

    /* Reafirmar que Movimientos en mobile no tenga Cliente */
    html body #modificarCajaView table[data-modcaja-tab="movimientos"] thead th:not(.modcaja-head-check):not(.modcaja-head-unidad):not(.modcaja-head-categoria):not(.modcaja-head-tipo):not(.modcaja-head-valor),
    html body #modCajaTbody tr.modcaja-movimientos-row > td:not(.modcaja-col-check):not(.modcaja-col-unidad):not(.modcaja-col-categoria):not(.modcaja-col-tipo):not(.modcaja-col-valor){
      display:none !important;
    }
  }

  @media (min-width:901px){
    /* Desktop: restaurar tamaño normal anterior de las tablas */
    html body #modificarCajaView table.modcaja-table th,
    html body #modificarCajaView table.modcaja-table td,
    html body #modificarCajaView table.admin-unidad-concat-table th,
    html body #modificarCajaView table.admin-unidad-concat-table td,
    html body #modificarCajaView #modCajaTbody tr > td,
    html body #modificarCajaView #modCajaTbody tr > td *,
    html body #modificarCajaView td.admin-unidad-concat-cell{
      font-size: 0.875rem !important;
      line-height: 1.25rem !important;
      font-weight: 500 !important;
    }

    html body #modificarCajaView table.modcaja-table thead th,
    html body #modificarCajaView table.admin-unidad-concat-table thead th{
      font-size: 0.75rem !important;
      line-height: 1rem !important;
      font-weight: 600 !important;
    }
  }



  /*
    Distancia vertical de tabs:
    margen superior = 28px.
    margen inferior visual = 12px + padding superior del card de Registros (16px) = 28px.
    Así queda balanceado arriba y abajo en mobile y desktop.
  */
  #modificarCajaView header > div:has(#modCajaMovFilters){
    margin-top: 28px !important;
    margin-bottom: 12px !important;
  }

  #modCajaMovFilters{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #modificarCajaView header{
    padding-bottom: 0 !important;
  }

  #modificarCajaView main{
    margin-top: 0 !important;
  }

  #modificarCajaView main > section:first-child{
    padding-top: 1rem !important;
  }

  @media (max-width:900px){
    /* Mantener botones mobile 15% más grandes */
    #modCajaTab_ventas,
    #modCajaTab_pagos,
    #modCajaTab_movimientos{
      min-height: 2.42rem !important;
      padding: 0.62rem 0.96rem 0.50rem 0.96rem !important;
      font-size: 0.95rem !important;
      line-height: 1.08 !important;
      border-radius: 9999px !important;
      font-weight: 600 !important;
    }

    /* Distribución mobile más balanceada:
       - Unidad y Cliente más pegados.
       - Más aire entre Valor y Fecha creación.
    */
    html body #modificarCajaView table[data-modcaja-tab] .modcaja-head-check,
    html body #modCajaTbody tr > td.modcaja-col-check{
      width: 4% !important;
      max-width: 4% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    html body #modificarCajaView table[data-modcaja-tab] .modcaja-head-unidad,
    html body #modCajaTbody tr > td.modcaja-col-unidad{
      width: 12% !important;
      max-width: 12% !important;
      text-align: right !important;
      padding-left: 0 !important;
      padding-right: 0.05rem !important;
    }

    html body #modificarCajaView table[data-modcaja-tab] .modcaja-head-cliente,
    html body #modCajaTbody tr > td.modcaja-col-cliente{
      width: 24% !important;
      max-width: 24% !important;
      text-align: left !important;
      padding-left: 0.05rem !important;
      padding-right: 0.02rem !important;
    }

    html body #modificarCajaView table[data-modcaja-tab] .modcaja-head-valor,
    html body #modCajaTbody tr > td.modcaja-col-valor{
      width: 23% !important;
      max-width: 23% !important;
      text-align: left !important;
      padding-left: 0.20rem !important;
      padding-right: 0.08rem !important;
    }

    html body #modificarCajaView table[data-modcaja-tab] .modcaja-head-fecha-creacion,
    html body #modCajaTbody tr > td.modcaja-col-fecha-creacion{
      width: 24% !important;
      max-width: 24% !important;
      text-align: right !important;
      padding-left: 0.18rem !important;
      padding-right: 0.18rem !important;
    }

    /* Para pagos, cuando el último campo sea saldo después pago, mantenerlo amplio a la derecha. */
    html body #modificarCajaView table[data-modcaja-tab="pagos"] .modcaja-head-saldo-despues-pago,
    html body #modCajaTbody tr.modcaja-pagos-row > td.modcaja-col-saldo-despues-pago{
      width: 25% !important;
      max-width: 25% !important;
      text-align: right !important;
      padding-left: 0.18rem !important;
      padding-right: 0.18rem !important;
    }

    html body #modificarCajaView .modcaja-cliente-two-lines{
      text-align: left !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    html body #modificarCajaView .modcaja-fecha-two-lines{
      text-align: right !important;
      margin-left: auto !important;
      margin-right: 0 !important;
    }

    /* Evitar reacomodación visual durante preparación */
    html body #modificarCajaView table.modcaja-table{
      table-layout: fixed !important;
      width: 89% !important;
      max-width: 89% !important;
      min-width: 89% !important;
    }
  }

  @media (min-width:901px){
    /* Desktop: misma separación visual arriba y abajo de los tabs */
    #modificarCajaView header > div:has(#modCajaMovFilters){
      margin-top: 28px !important;
      margin-bottom: 12px !important;
    }

    #modCajaMovFilters{
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    #modificarCajaView main > section:first-child{
      padding-top: 1rem !important;
    }

    /* Desktop sin reacomodos por saltos */
    html body #modificarCajaView table.modcaja-table th,
    html body #modificarCajaView table.modcaja-table td,
    html body #modificarCajaView table.admin-unidad-concat-table th,
    html body #modificarCajaView table.admin-unidad-concat-table td{
      white-space: nowrap !important;
    }
  }



  /*
    Barra de progreso real:
    - track siempre gris.
    - fill verde solo según el porcentaje.
    - 0% no muestra verde.
    - 100% llena todo el track.
    Aplica en desktop y mobile.
  */
  #unitsView .progress-track{
    position: relative !important;
    overflow: hidden !important;
    background-color: #e5e7eb !important;
    border-radius: 9999px !important;
  }

  .dark #unitsView .progress-track{
    background-color: #4b5563 !important;
  }

  #unitsView .progress-fill{
    display: block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    background-color: #00AD57;
    border-radius: 9999px !important;
    transition: width 160ms ease-out !important;
  }

  /* Corrige reglas antiguas que aplicaban min-width a cualquier .h-1.5 dentro de progreso */
  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .progress-fill{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #unitsView #cards[data-view-mode="compact"] .units-compact-table tbody td:nth-child(8) .progress-track{
    flex: 1 1 auto !important;
    min-width: 72px !important;
    max-width: none !important;
  }

  @media (max-width:900px){
    #unitsView .progress-track{
      background-color: #e5e7eb !important;
    }
    #unitsView .progress-fill{
      min-width: 0 !important;
    }
  }



  #topbar,
  .sociedad-logo-wrap,
  #sociedadSwitcher{
    overflow: visible !important;
  }

  #sociedadSwitcher:not(.hidden){
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  #sociedadSwitcherMenu.sociedad-switcher-menu{
    z-index:100000 !important;
  }

  @media (min-width:901px){
    #sociedadSwitcherMenu.sociedad-switcher-menu{
      position:absolute !important;
      top:calc(100% + 8px) !important;
      left:0 !important;
      right:auto !important;
      transform:none !important;
      width:240px !important;
      min-width:240px !important;
      max-width:240px !important;
    }
  }



  #topbar,
  .sociedad-logo-wrap,
  #sociedadSwitcher{
    overflow: visible !important;
  }

  #sociedadSwitcher:not(.hidden){
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  #sociedadSwitcherMenu.sociedad-switcher-menu{
    z-index:100000 !important;
  }

  @media (min-width:901px){
    #sociedadSwitcherMenu.sociedad-switcher-menu{
      position:absolute !important;
      top:calc(100% + 8px) !important;
      left:0 !important;
      right:auto !important;
      transform:none !important;
      width:240px !important;
      min-width:240px !important;
      max-width:240px !important;
    }
  }



  /* Refuerzo final: Clientes desktop debe verse exactamente como filtro tipo Permisos */
  #clientesView #clientesUnidadDesktopBtn{
    height:44px !important;
    min-height:44px !important;
    border-radius:9999px !important;
    border:1px solid #dbe5f1 !important;
    background:#ffffff !important;
    color:#0f172a !important;
    box-shadow:none !important;
    outline:none !important;
  }
  #clientesView #clientesUnidadDesktopBtn:hover{
    border-color:#cbd5e1 !important;
    background:#ffffff !important;
  }
  #clientesView #clientesUnidadDesktopBtn:focus,
  #clientesView #clientesUnidadDesktopBtn:focus-visible{
    outline:none !important;
    border-color:#b7c6d8 !important;
    box-shadow:0 0 0 3px rgba(0,173,87,.10) !important;
  }
  #clientesView #clientesUnidadDesktopPanel{
    border-radius:22px !important;
    border:1px solid #e2e8f0 !important;
    background:#ffffff !important;
    overflow:hidden !important;
    box-shadow:0 12px 28px rgba(15,23,42,.12) !important;
  }
  #clientesView #clientesUnidadDesktopSearch{
    min-height:38px !important;
    border-radius:9999px !important;
    border-color:#dbe5f1 !important;
    background:#ffffff !important;
    box-shadow:none !important;
    outline:none !important;
  }

  /* Refuerzo final: encabezados de Modificar Caja al mismo tamaño visual que los registros */
  html body #modificarCajaView table.modcaja-table thead th,
  html body #modificarCajaView #modCajaTheadRow th{
    font-size:0.875rem !important;
    line-height:1.25rem !important;
    font-weight:500 !important;
    color:#475569 !important;
  }
  @media (max-width:900px){
    html body #modificarCajaView table.modcaja-table thead th,
    html body #modificarCajaView #modCajaTheadRow th{
      font-size:0.81rem !important;
      line-height:1.02rem !important;
      font-weight:500 !important;
    }
  }



  #modificarCajaView #modCajaTableSearch{
    min-height: 42px;
  }



  /* Cifras Históricas: contenido de tablas con la misma estética de Modificar Caja */
  html body #cifrasView #cifrasTablesCard table,
  html body #cifrasView #cifrasMovimientosTableWrapper table,
  html body #cifrasView table{
    width:100% !important;
    min-width:100% !important;
    table-layout:fixed !important;
    border-collapse:collapse !important;
    border-spacing:0 !important;
    background:#ffffff !important;
  }

  html body #cifrasView table thead{
    background:#f8fafc !important;
  }

  html body #cifrasView table thead th,
  html body #cifrasView table tbody td,
  html body #cifrasView table tbody td *{
    font-size:0.875rem !important;
    line-height:1.25rem !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    color:#334155 !important;
    text-align:center !important;
    vertical-align:middle !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }

  html body #cifrasView table thead th{
    padding:0.95rem 0.55rem !important;
    color:#475569 !important;
    background:#f8fafc !important;
    border-bottom:1px solid #e2e8f0 !important;
  }

  html body #cifrasView table tbody td{
    padding:1.25rem 0.55rem !important;
    background:#ffffff !important;
    border-bottom:1px solid #f1f5f9 !important;
  }

  html body #cifrasView table tbody tr:hover > td{
    background:#f8fafc !important;
  }

  html body #cifrasView table tbody tr:last-child > td{
    border-bottom:0 !important;
  }

  /* El mensaje sin registros conserva la apariencia discreta del resto del proyecto */
  html body #cifrasView td.cifras-empty-message,
  html body #cifrasView td.cifras-empty-message *{
    font-size:0.75rem !important;
    line-height:1rem !important;
    font-weight:400 !important;
    color:#94a3b8 !important;
    text-align:center !important;
    padding-top:1rem !important;
    padding-bottom:1rem !important;
  }

  @media (max-width:900px){
    html body #cifrasView table thead th,
    html body #cifrasView table tbody td,
    html body #cifrasView table tbody td *{
      font-size:0.81rem !important;
      line-height:1.02rem !important;
      font-weight:500 !important;
    }

    html body #cifrasView table thead th{
      padding:0.75rem 0.10rem !important;
    }

    html body #cifrasView table tbody td{
      padding:1.25rem 0.10rem !important;
    }

    html body #cifrasView td.cifras-empty-message,
    html body #cifrasView td.cifras-empty-message *{
      font-size:0.75rem !important;
      line-height:1rem !important;
      padding:1rem 0.25rem !important;
    }
  }



  /* Modificar Caja: transición estable y encabezado real dentro del scroll. */
  html body #modificarCajaView .modcaja-table-wrapper{
    position:relative !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  html body #modificarCajaView .modcaja-table-wrapper > table{
    border-collapse:separate !important;
    border-spacing:0 !important;
  }
  html body #modificarCajaView .modcaja-table-wrapper > table > thead > tr > th{
    position:sticky !important;
    top:0 !important;
    z-index:40 !important;
    background:#f8fafc !important;
    box-shadow:inset 0 -1px 0 #e2e8f0 !important;
  }

  #navModificarCaja.modcaja-v14-loading,
  #navModificarCajaMobile.modcaja-v14-loading{
    cursor:wait !important;
  }
  .modcaja-v14-spinner{
    width:16px;
    height:16px;
    min-width:16px;
    margin-left:auto;
    border-radius:9999px;
    border:2px solid rgba(0,173,87,.22);
    border-top-color:#00AD57;
    animation:modCajaV14Spin .55s linear infinite;
  }
  @keyframes modCajaV14Spin{to{transform:rotate(360deg)}}

  #modCajaTab_ventas.modcaja-v14-pending,
  #modCajaTab_pagos.modcaja-v14-pending,
  #modCajaTab_movimientos.modcaja-v14-pending{
    position:relative;
    padding-right:2rem !important;
    cursor:wait !important;
  }
  #modCajaTab_ventas.modcaja-v14-pending::after,
  #modCajaTab_pagos.modcaja-v14-pending::after,
  #modCajaTab_movimientos.modcaja-v14-pending::after{
    content:"";
    position:absolute;
    right:.62rem;
    top:50%;
    width:12px;
    height:12px;
    margin-top:-6px;
    border-radius:9999px;
    border:2px solid rgba(0,173,87,.2);
    border-top-color:#00AD57;
    animation:modCajaV14Spin .5s linear infinite;
  }



  /* CIFRAS HISTÓRICAS: una sola tabla visible, sin encabezados clonados ni observadores pesados. */
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"]{
    position:relative !important;
    max-height:520px !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
    overscroll-behavior:auto !important;
    scrollbar-gutter:stable !important;
    border-radius:0 !important;
  }
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"].hidden{
    display:none !important;
  }
  html body #cifrasView #cifrasTablesCard table{
    width:100% !important;
    min-width:100% !important;
    table-layout:fixed !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#ffffff !important;
  }
  html body #cifrasView #cifrasTablesCard table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    padding:0.95rem 0.55rem !important;
    background:#f8fafc !important;
    color:#475569 !important;
    border-bottom:1px solid #e2e8f0 !important;
    box-shadow:inset 0 -1px 0 #e2e8f0 !important;
    font-size:0.875rem !important;
    line-height:1.25rem !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    text-align:center !important;
    vertical-align:middle !important;
    white-space:normal !important;
  }
  html body #cifrasView #cifrasTablesCard table tbody td,
  html body #cifrasView #cifrasTablesCard table tbody td *{
    padding-top:1rem !important;
    padding-bottom:1rem !important;
    color:#334155 !important;
    font-size:0.875rem !important;
    line-height:1.25rem !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    vertical-align:middle !important;
  }
  html body #cifrasView #cifrasTablesCard table tbody tr:hover > td{
    background:#f8fafc !important;
  }
  html body #cifrasView .cifras-fixed-head-layer-v6,
  html body #cifrasView .tueni-fixed-head-layer-v7{
    display:none !important;
  }

  /* MODIFICAR CAJA: el contenedor mantiene scroll interno y encabezado real. */
  html body #modificarCajaView .modcaja-table-wrapper{
    position:relative !important;
    max-height:min(70vh,720px) !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
    overscroll-behavior:auto !important;
    scrollbar-gutter:stable !important;
    touch-action:pan-x pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html body #modificarCajaView .modcaja-table-wrapper > table{
    border-collapse:separate !important;
    border-spacing:0 !important;
  }
  html body #modificarCajaView .modcaja-table-wrapper > table > thead > tr > th{
    position:sticky !important;
    top:0 !important;
    z-index:30 !important;
    background:#f8fafc !important;
    box-shadow:inset 0 -1px 0 #e2e8f0 !important;
  }

  /* Mostrar más dentro de la tabla. */
  #cifrasView tr.tueni-inline-load-more-row > td,
  #modificarCajaView tr.tueni-inline-load-more-row > td{
    padding:0.8rem 0.25rem !important;
    background:#ffffff !important;
    text-align:center !important;
  }
  #cifrasView .tueni-inline-load-more-btn,
  #modificarCajaView .tueni-inline-load-more-btn{
    min-width:180px;
    height:42px;
    border-radius:9999px;
    border:2px solid #cbd5e1;
    background:#ffffff;
    color:#334155;
    font-size:0.875rem;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.35rem;
    padding:0 1.25rem;
    box-shadow:0 6px 14px rgba(15,23,42,.08);
    cursor:pointer;
  }
  #cifrasView .tueni-inline-load-more-btn:hover,
  #modificarCajaView .tueni-inline-load-more-btn:hover{
    background:#00AD57;
    border-color:#00AD57;
    color:#ffffff;
  }



  /* Altura idéntica para los encabezados de Cifras Históricas y Modificar Caja. */
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table > thead > tr,
  html body #modificarCajaView #modCajaTheadRow{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table > thead > tr > th,
  html body #modificarCajaView #modCajaTheadRow > th{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    box-sizing:border-box !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    vertical-align:middle !important;
    line-height:1.15rem !important;
    white-space:nowrap !important;
  }

  /* Mostrar más: fila real dentro de la tabla, sin texto de icono sin renderizar. */
  html body #cifrasView tr.tueni-inline-load-more-row,
  html body #modificarCajaView tr.tueni-inline-load-more-row{
    display:table-row !important;
    height:auto !important;
    background:#ffffff !important;
  }

  html body #cifrasView tr.tueni-inline-load-more-row > td,
  html body #modificarCajaView tr.tueni-inline-load-more-row > td{
    display:table-cell !important;
    width:auto !important;
    padding:0.9rem 0.5rem !important;
    text-align:center !important;
    vertical-align:middle !important;
    background:#ffffff !important;
    border-top:1px solid #f1f5f9 !important;
    border-bottom:0 !important;
  }

  html body #cifrasView .tueni-inline-load-more-btn,
  html body #modificarCajaView .tueni-inline-load-more-btn{
    min-width:170px !important;
    min-height:40px !important;
    height:40px !important;
    border:1px solid #cbd5e1 !important;
    border-radius:9999px !important;
    background:#ffffff !important;
    color:#475569 !important;
    font-family:inherit !important;
    font-size:0.875rem !important;
    line-height:1rem !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0.6rem !important;
    padding:0 1.15rem !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease !important;
  }

  html body #cifrasView .tueni-inline-load-more-btn:hover,
  html body #modificarCajaView .tueni-inline-load-more-btn:hover{
    background:#f8fafc !important;
    border-color:#94a3b8 !important;
    color:#334155 !important;
  }

  html body .tueni-load-more-chevron{
    width:8px !important;
    height:8px !important;
    border-right:2px solid currentColor !important;
    border-bottom:2px solid currentColor !important;
    transform:rotate(45deg) translateY(-2px) !important;
    flex:0 0 auto !important;
  }

  /* Scroll nativo: sin interceptores de rueda ni animaciones en filas. */
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"],
  html body #modificarCajaView .modcaja-table-wrapper{
    overflow-x:auto !important;
    overflow-y:auto !important;
    overscroll-behavior:auto !important;
    scroll-behavior:auto !important;
    touch-action:pan-x pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }

  html body #cifrasView #cifrasTablesCard tbody tr,
  html body #cifrasView #cifrasTablesCard tbody td,
  html body #modificarCajaView #modCajaTbody tr,
  html body #modificarCajaView #modCajaTbody td{
    animation:none !important;
    transition:none !important;
  }

  @media (max-width:900px){
    html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table > thead > tr,
    html body #modificarCajaView #modCajaTheadRow,
    html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] table > thead > tr > th,
    html body #modificarCajaView #modCajaTheadRow > th{
      height:46px !important;
      min-height:46px !important;
      max-height:46px !important;
    }
  }



  /* ================================================================
     CIFRAS HISTÓRICAS — corrección puntual de la fila "Mostrar más"
     Evita que las reglas generales de tbody/td se hereden al botón.
     ================================================================ */
  html body #cifrasView #cifrasTablesCard tr.tueni-inline-load-more-row {
    display: table-row !important;
    height: auto !important;
    background: #ffffff !important;
  }

  html body #cifrasView #cifrasTablesCard tr.tueni-inline-load-more-row > td {
    display: table-cell !important;
    width: auto !important;
    height: auto !important;
    padding: 0.9rem 0.5rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: normal !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 0 !important;
  }

  html body #cifrasView #cifrasTablesCard tr.tueni-inline-load-more-row > td > *,
  html body #cifrasView #cifrasTablesCard .tueni-inline-load-more-btn > * {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  html body #cifrasView #cifrasTablesCard .tueni-inline-load-more-btn {
    width: auto !important;
    min-width: 170px !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 auto !important;
    padding: 0 1.15rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #475569 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  html body #cifrasView #cifrasTablesCard .tueni-inline-load-more-btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
  }

  html body #cifrasView #cifrasTablesCard .tueni-load-more-chevron {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    padding: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) translateY(-2px) !important;
    flex: 0 0 8px !important;
  }

  /* ================================================================
     ENCABEZADOS FIJOS — regla final para todas las tablas del dashboard
     Se deja al final del documento para que no vuelva a ser anulada.
     ================================================================ */
  html body #dashboard table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  html body #dashboard table > thead {
    display: table-header-group !important;
  }

  html body #dashboard table > thead > tr > th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background-color: #f8fafc !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 -1px 0 #e2e8f0 !important;
  }

  html.dark body #dashboard table > thead > tr > th,
  .dark body #dashboard table > thead > tr > th,
  body.dark #dashboard table > thead > tr > th {
    background-color: #0f172a !important;
    box-shadow: inset 0 -1px 0 #334155 !important;
  }

  /* Los contenedores con desplazamiento deben ser el contexto del sticky. */
  html body #dashboard :is(
    #dvTablaPagosWrapper,
    #dvTablaVentasWrapper,
    #dvTablaGastosWrapper,
    #dvTablaIngresosWrapper,
    #dvTablaEgresosWrapper,
    .hist-table-scroll,
    .pagos-table-scroll,
    .depurar-table-scroll,
    .modcaja-table-wrapper,
    .units-compact-table-scroll,
    #cifrasTablesCard > div[id^="cifrasTabla"]
  ) {
    position: relative !important;
    isolation: isolate !important;
  }

  /* Refuerzo específico para tablas renderizadas dinámicamente. */
  html body #dashboard :is(
    #dvDetalladoWrapper,
    #panelClienteVentasPagos,
    #aprobacionesView,
    #historicoCambiosView,
    #pagosView,
    #depurarCarteraView,
    #modificarCajaView,
    #cifrasView,
    #unitsView
  ) table > thead > tr > th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }



  /* =====================================================================
     ENCABEZADOS REALMENTE FIJOS — TODAS LAS TABLAS DEL DASHBOARD

     La regla antigua que redondeaba las tablas también aplicaba
     overflow:hidden al propio <table>. Ese overflow convertía la tabla en
     un ancestro de recorte y anulaba position:sticky de los encabezados.
     El recorte se mantiene en el contenedor, no en la tabla.
     ===================================================================== */

  /* El propio table no puede recortar al encabezado sticky. */
  html body #dashboard table {
    overflow: visible !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  html body #dashboard table > thead,
  html body #dashboard table > thead > tr {
    overflow: visible !important;
    background: #f8fafc !important;
  }

  /* Refuerzo doble: sticky en el grupo y en cada celda para compatibilidad. */
  html body #dashboard table > thead {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
  }

  html body #dashboard table > thead > tr > th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 71 !important;
    background: #f8fafc !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 -1px 0 #e2e8f0 !important;
  }

  /* El contenedor es quien recorta y controla el desplazamiento. */
  html body #dashboard :is(
    #dvTablaPagosWrapper,
    #dvTablaVentasWrapper,
    #dvTablaGastosWrapper,
    #dvTablaIngresosWrapper,
    #dvTablaEgresosWrapper,
    .hist-table-scroll,
    .pagos-table-scroll,
    .depurar-table-scroll,
    .modcaja-table-wrapper,
    .units-compact-table-scroll,
    #cifrasTablesCard > div[id^="cifrasTabla"]
  ) {
    position: relative !important;
    isolation: auto !important;
  }

  /* Cifras históricas: corrección directa para la tabla mostrada en la captura. */
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] {
    overflow-x: auto !important;
    overflow-y: auto !important;
    position: relative !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] > table {
    overflow: visible !important;
  }

  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] > table > thead,
  html body #cifrasView #cifrasTablesCard > div[id^="cifrasTabla"] > table > thead > tr > th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #f8fafc !important;
  }

  /* Modo oscuro. */
  html.dark body #dashboard table > thead,
  html.dark body #dashboard table > thead > tr,
  html.dark body #dashboard table > thead > tr > th,
  .dark body #dashboard table > thead,
  .dark body #dashboard table > thead > tr,
  .dark body #dashboard table > thead > tr > th,
  body.dark #dashboard table > thead,
  body.dark #dashboard table > thead > tr,
  body.dark #dashboard table > thead > tr > th {
    background: #0f172a !important;
  }

  html.dark body #dashboard table > thead > tr > th,
  .dark body #dashboard table > thead > tr > th,
  body.dark #dashboard table > thead > tr > th {
    box-shadow: inset 0 -1px 0 #334155 !important;
  }



  /* Aprobaciones: el desplegable de Unidades queda por encima del encabezado fijo. */
  html body #aprobacionesView > div.max-w-6xl > div > header {
    position: relative !important;
    z-index: 300 !important;
    overflow: visible !important;
  }

  html body #aprobacionesView > div.max-w-6xl > div > header > div:first-child > div.mt-4 {
    position: relative !important;
    z-index: 310 !important;
    overflow: visible !important;
  }

  html body #aprobacionesView #aprobFiltroPanel {
    position: absolute !important;
    z-index: 9999 !important;
  }

  html body #aprobacionesView main {
    position: relative !important;
    z-index: 1 !important;
  }



  /* Modificar Caja: los desplegables de Unidad y Caja quedan por encima
     de los encabezados sticky de las tablas. */
  html body #modificarCajaView > div.max-w-6xl > div > header {
    position: relative !important;
    z-index: 300 !important;
    overflow: visible !important;
  }

  html body #modificarCajaView header > .mt-4.grid {
    position: relative !important;
    z-index: 310 !important;
    overflow: visible !important;
  }

  html body #modificarCajaView header > .mt-4.grid > div {
    overflow: visible !important;
  }

  html body #modificarCajaView #modCajaFiltroPanel,
  html body #modificarCajaView #modCajaCajaPanel {
    position: absolute !important;
    z-index: 9999 !important;
  }

  html body #modificarCajaView main {
    position: relative !important;
    z-index: 1 !important;
  }



  /* Depurar cartera: el desplegable de filtros debe quedar por encima
     de los encabezados sticky de la tabla. */
  html body #depurarCarteraView > div.max-w-6xl > div,
  html body #depurarCarteraView > div.max-w-6xl > div > section {
    overflow: visible !important;
  }

  html body #depurarCarteraView .mb-4.grid {
    position: relative !important;
    z-index: 500 !important;
    overflow: visible !important;
  }

  html body #depurarCarteraView .mb-4.grid > div.relative {
    position: relative !important;
    z-index: 510 !important;
    overflow: visible !important;
  }

  html body #depurarCarteraView #depurarUnidadFiltroPanel {
    position: absolute !important;
    z-index: 9999 !important;
    isolation: isolate !important;
  }

  html body #depurarCarteraView .depurar-table-scroll {
    position: relative !important;
    z-index: 1 !important;
  }

  html body #depurarCarteraView .depurar-table-scroll table,
  html body #depurarCarteraView .depurar-table-scroll thead,
  html body #depurarCarteraView .depurar-table-scroll thead th {
    z-index: auto;
  }

  html body #depurarCarteraView .depurar-table-scroll thead {
    z-index: 70 !important;
  }

  html body #depurarCarteraView .depurar-table-scroll thead th {
    z-index: 71 !important;
  }



  /* Histórico de cambios: los paneles de filtros deben quedar por encima
     del encabezado sticky, no detrás de él. */
  html body #historicoCambiosView > div.max-w-6xl > div,
  html body #historicoCambiosView > div.max-w-6xl > div > section {
    overflow: visible !important;
  }

  html body #historicoCambiosView #histAuditFilters,
  html body #historicoCambiosView #histEventosFilters {
    position: relative !important;
    z-index: 500 !important;
    overflow: visible !important;
    isolation: auto !important;
  }

  html body #historicoCambiosView #histAuditFilters > div.relative,
  html body #historicoCambiosView #histEventosFilters > div.relative {
    position: relative !important;
    z-index: 510 !important;
    overflow: visible !important;
  }

  html body #historicoCambiosView :is(
    #histFiltroEjecutorPanel,
    #histFiltroAliasPanel,
    #histFiltroEventoUsuarioPanel
  ) {
    position: absolute !important;
    z-index: 9999 !important;
    isolation: isolate !important;
  }

  html body #historicoCambiosView .hist-table-scroll {
    position: relative !important;
    z-index: 1 !important;
  }

  html body #historicoCambiosView .hist-table-scroll thead {
    z-index: 70 !important;
  }

  html body #historicoCambiosView .hist-table-scroll thead th {
    z-index: 71 !important;
  }

  /* Mostrar más como último registro de la tabla. */
  html body #historicoCambiosView tr.hist-inline-load-more-row {
    display: table-row !important;
    height: auto !important;
    background: #ffffff !important;
  }

  html body #historicoCambiosView tr.hist-inline-load-more-row > td {
    display: table-cell !important;
    width: auto !important;
    padding: 0.9rem 0.5rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 0 !important;
  }

  html body #historicoCambiosView .hist-load-more-btn {
    min-width: 170px !important;
    width: auto !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
    padding: 0 1.15rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #475569 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
  }

  html body #historicoCambiosView .hist-load-more-btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
  }

  html body #historicoCambiosView .hist-load-more-btn:disabled {
    opacity: 0.65 !important;
    cursor: wait !important;
  }

  html body #historicoCambiosView .hist-load-more-chevron {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    padding: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) translateY(-2px) !important;
    flex: 0 0 8px !important;
  }



  #perfilesView .profiles-shell{ min-height:520px; }
  #perfilesView .profiles-tabs{
    display:flex;
    gap:.5rem;
    padding:1rem;
    border-bottom:1px solid #e2e8f0;
    background:#f8fafc;
  }
  #perfilesView .profiles-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    min-width:150px;
    padding:.72rem 1.15rem;
    border-radius:9999px;
    border:1px solid #dbe5f1;
    background:#fff;
    color:#64748b;
    font-size:.9rem;
    font-weight:800;
    transition:all 150ms ease;
  }
  #perfilesView .profiles-tab:hover{ border-color:#00AD57; color:#00AD57; }
  #perfilesView .profiles-tab.is-active{
    background:#00AD57;
    border-color:#00AD57;
    color:#fff;
    box-shadow:0 8px 18px rgba(0,173,87,.20);
  }
  #perfilesView .profiles-tab .material-symbols-outlined{ font-size:20px; }
  #perfilesView .profiles-label{
    display:block;
    margin-bottom:.4rem;
    color:#475569;
    font-size:.86rem;
    font-weight:800;
  }
  #perfilesView .profiles-input{
    width:100%;
    min-height:44px;
    border:1px solid #dbe5f1;
    border-radius:9999px;
    background:#fff;
    color:#0f172a;
    padding:.65rem 1rem;
    font-size:.9rem;
    outline:none;
    box-shadow:none;
  }
  #perfilesView .profiles-input:focus{
    border-color:#00AD57;
    box-shadow:0 0 0 3px rgba(0,173,87,.10);
  }
  #perfilesView .profiles-primary-btn,
  #perfilesView .profiles-secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:42px;
    padding:.62rem 1.15rem;
    border-radius:9999px;
    font-size:.86rem;
    font-weight:900;
    transition:all 150ms ease;
  }
  #perfilesView .profiles-primary-btn{
    border:1px solid #00AD57;
    background:#00AD57;
    color:#fff;
    box-shadow:0 8px 18px rgba(0,173,87,.18);
  }
  #perfilesView .profiles-primary-btn:hover{ filter:brightness(.96); }
  #perfilesView .profiles-primary-btn:disabled{ opacity:.6; cursor:not-allowed; }
  #perfilesView .profiles-secondary-btn{
    border:1px solid #dbe5f1;
    background:#fff;
    color:#475569;
  }
  #perfilesView .profiles-secondary-btn:hover{ border-color:#00AD57; color:#00AD57; }
  #perfilesView .profiles-permissions-grid{ display:grid; gap:1.15rem; }
  #perfilesView .profiles-permission-category-group{ display:grid; gap:1rem; }
  #perfilesView .profiles-permission-category-heading{
    display:flex;
    align-items:center;
    gap:.55rem;
    color:#475569;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:.15rem .2rem;
  }
  #perfilesView .profiles-permission-category-heading .material-symbols-outlined{ color:#00AD57; font-size:19px; }
  #perfilesView .profiles-permission-category{
    border:1px solid #e2e8f0;
    border-radius:1.15rem;
    overflow:hidden;
    background:#fff;
  }
  #perfilesView .profiles-permission-category-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:1rem;
    align-items:center;
    padding:.9rem 1rem;
    background:#f8fafc;
  }
  #perfilesView .profiles-permission-category-toggle{
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    border:0;
    background:transparent;
    color:#334155;
    padding:0;
    text-align:left;
    cursor:pointer;
  }
  #perfilesView .profiles-permission-category-toggle:focus-visible{
    outline:2px solid #00AD57;
    outline-offset:5px;
    border-radius:.65rem;
  }
  #perfilesView .profiles-permission-chevron{
    color:#64748b;
    font-size:21px;
    margin-top:.02rem;
    transition:transform 160ms ease,color 160ms ease;
  }
  #perfilesView .profiles-permission-category-toggle[aria-expanded="true"] .profiles-permission-chevron{
    transform:rotate(90deg);
    color:#00AD57;
  }
  #perfilesView .profiles-permission-module-icon{ color:#00AD57; font-size:21px; margin-top:.02rem; }
  #perfilesView .profiles-permission-category-copy{ min-width:0; }
  #perfilesView .profiles-permission-category-copy strong{ display:block; color:#334155; font-size:.92rem; font-weight:900; }
  #perfilesView .profiles-permission-category-copy small{ display:block; margin-top:.16rem; color:#94a3b8; font-size:.74rem; font-weight:600; line-height:1.3; }
  #perfilesView .profiles-permission-category-access{
    display:grid;
    gap:.35rem;
    flex:0 0 auto;
  }
  #perfilesView .profiles-permission-category-level-labels,
  #perfilesView .profiles-permission-category-level-choices{
    display:grid;
    grid-template-columns:repeat(3,44px);
    gap:.5rem;
    align-items:center;
    justify-content:end;
  }
  #perfilesView .profiles-permission-category-level-labels{
    color:#64748b;
    font-size:.61rem;
    font-weight:900;
    line-height:1.05;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  #perfilesView .profiles-permission-category-body{
    border-top:1px solid #e2e8f0;
    background:#fff;
  }
  #perfilesView .profiles-permission-category-body[hidden]{ display:none !important; }
  #perfilesView .profiles-permission-table-scroll{ overflow-x:auto; }
  #perfilesView .profiles-permission-matrix{ min-width:520px; }
  #perfilesView .profiles-permission-row{
    display:grid;
    grid-template-columns:minmax(250px,1fr) repeat(3,44px);
    gap:.5rem;
    align-items:center;
    padding:.72rem 1rem;
    border-bottom:1px solid #f1f5f9;
    transition:background-color 140ms ease;
  }
  #perfilesView .profiles-permission-row:last-child{ border-bottom:0; }
  #perfilesView .profiles-permission-row:hover{ background:#fbfdfc; }
  #perfilesView .profiles-permission-copy{ min-width:0; }
  #perfilesView .profiles-permission-name{ color:#0f172a; font-size:.84rem; font-weight:900; }
  #perfilesView .profiles-permission-description{ color:#94a3b8; font-size:.72rem; margin-top:.13rem; line-height:1.25; }
  #perfilesView .profiles-permission-choice{ display:block; position:relative; margin:0; cursor:pointer; }
  #perfilesView .profiles-permission-choice input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    pointer-events:none;
  }
  #perfilesView .profiles-permission-choice-ui{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    border-radius:.8rem;
    border:1px solid #dbe5f1;
    background:#fff;
    color:#64748b;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,box-shadow 140ms ease,transform 100ms ease;
  }
  #perfilesView .profiles-permission-choice-ui .material-symbols-outlined{ font-size:19px; }
  #perfilesView .profiles-permission-choice:hover .profiles-permission-choice-ui{ border-color:#94a3b8; transform:translateY(-1px); }
  #perfilesView .profiles-permission-choice input:focus-visible + .profiles-permission-choice-ui{ outline:2px solid #00AD57; outline-offset:2px; }
  #perfilesView .profiles-permission-choice[data-level="none"] input:checked + .profiles-permission-choice-ui{
    background:#fff1f2;
    border-color:#fb7185;
    color:#be123c;
    box-shadow:0 5px 12px rgba(190,18,60,.12);
  }
  #perfilesView .profiles-permission-choice[data-level="read"] input:checked + .profiles-permission-choice-ui{
    background:#fffbeb;
    border-color:#f59e0b;
    color:#b45309;
    box-shadow:0 5px 12px rgba(180,83,9,.12);
  }
  #perfilesView .profiles-permission-choice[data-level="edit"] input:checked + .profiles-permission-choice-ui{
    background:#eafaf1;
    border-color:#00AD57;
    color:#008743;
    box-shadow:0 5px 12px rgba(0,173,87,.16);
  }
  #perfilesView .profiles-permission-choice input:disabled + .profiles-permission-choice-ui{
    opacity:.38;
    cursor:not-allowed;
    filter:grayscale(.3);
  }
  #perfilesView .profiles-permission-empty-detail{
    padding:1rem;
    color:#94a3b8;
    font-size:.78rem;
    font-weight:700;
    text-align:center;
  }
  #perfilesView .profiles-users-list{
    max-height:610px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    padding-right:.25rem;
  }
  #perfilesView .profiles-user-item{
    width:100%;
    text-align:left;
    border:1px solid #e2e8f0;
    border-radius:1rem;
    background:#fff;
    padding:.9rem 1rem;
    transition:all 140ms ease;
  }
  #perfilesView .profiles-user-item:hover{ border-color:#00AD57; background:#f8fffb; }
  #perfilesView .profiles-user-item.is-active{ border-color:#00AD57; background:#e9fbf1; box-shadow:0 0 0 2px rgba(0,173,87,.08); }
  #perfilesView .profiles-user-name{ color:#0f172a; font-weight:900; font-size:.9rem; }
  #perfilesView .profiles-user-mail{ color:#64748b; font-size:.78rem; margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #perfilesView .profiles-user-role{ display:inline-flex; margin-top:.55rem; padding:.2rem .55rem; border-radius:9999px; background:#f1f5f9; color:#475569; font-size:.7rem; font-weight:900; }
  #perfilesView .profiles-editor-card{ min-width:0; border:1px solid #e2e8f0; border-radius:1.25rem; padding:1rem; background:#fff; }
  #perfilesView .profiles-empty{ color:#94a3b8; text-align:center; font-size:.86rem; }
  #perfilesView .profiles-empty .material-symbols-outlined{ display:block; margin-left:auto; margin-right:auto; }
  #perfilesView .profiles-auth-note,
  #perfilesView .profiles-auth-panel{
    display:flex;
    align-items:flex-start;
    gap:.8rem;
    border:1px solid #dbeafe;
    border-radius:1rem;
    background:#f0f9ff;
    color:#334155;
    padding:.85rem 1rem;
  }
  #perfilesView .profiles-auth-note > .material-symbols-outlined{ color:#0284c7; margin-top:.05rem; }
  #perfilesView .profiles-auth-note strong{ display:block; color:#0f172a; font-size:.86rem; }
  #perfilesView .profiles-auth-note p,
  #perfilesView .profiles-auth-panel p{ margin-top:.2rem; color:#64748b; font-size:.76rem; line-height:1.35; }
  #perfilesView .profiles-auth-note code{ font-weight:800; color:#0369a1; }
  #perfilesView .profiles-auth-panel{ align-items:center; justify-content:space-between; border-color:#e2e8f0; background:#f8fafc; }
  #perfilesView .profiles-auth-panel-copy{ min-width:0; }
  #perfilesView .profiles-auth-status,
  #perfilesView .profiles-user-auth-status{
    display:inline-flex;
    align-items:center;
    border-radius:9999px;
    padding:.22rem .58rem;
    font-size:.68rem;
    font-weight:900;
  }
  #perfilesView .profiles-auth-status.is-active,
  #perfilesView .profiles-user-auth-status.is-active{ background:#dcfce7; color:#166534; }
  #perfilesView .profiles-auth-status.is-pending,
  #perfilesView .profiles-user-auth-status.is-pending{ background:#fef3c7; color:#92400e; }
  #perfilesView .profiles-user-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
  #perfilesView .profiles-user-meta .profiles-user-role{ margin-top:0; }
  .profile-hidden-by-policy{ display:none !important; }
  [data-profile-readonly="1"]{ position:relative; }
  .profile-readonly-scope:is(button,input,select,textarea),
  .profile-readonly-scope :is(button,input,select,textarea,[role="button"],[draggable="true"]){
    cursor:not-allowed !important;
    opacity:.62 !important;
  }
  .profile-readonly-scope:is(button,input,select,textarea,[role="button"],[draggable="true"]),
  .profile-readonly-scope :is(button,input,select,textarea,[role="button"],[draggable="true"]){ pointer-events:none !important; }
  @media (max-width:700px){
    #perfilesView .profiles-tabs{ padding:.75rem; }
    #perfilesView .profiles-tab{ flex:1; min-width:0; padding:.65rem .5rem; }
    #perfilesView .profiles-permission-category-header{ grid-template-columns:1fr; gap:.75rem; }
    #perfilesView .profiles-permission-category-access{ margin-left:2.4rem; justify-self:start; }
    #perfilesView .profiles-permission-category-level-labels,
    #perfilesView .profiles-permission-category-level-choices{ grid-template-columns:repeat(3,42px); gap:.45rem; }
    #perfilesView .profiles-permission-choice-ui{ width:38px; height:38px; min-width:38px; min-height:38px; }
    #perfilesView .profiles-permission-matrix{ min-width:500px; }
    #perfilesView .profiles-permission-row{ grid-template-columns:minmax(230px,1fr) repeat(3,42px); }
  }
  .dark #perfilesView .profiles-tabs,
  .dark #perfilesView .profiles-permission-category-header{ background:#0f172a; border-color:#334155; }
  .dark #perfilesView .profiles-permission-category,
  .dark #perfilesView .profiles-permission-category-body,
  .dark #perfilesView .profiles-user-item,
  .dark #perfilesView .profiles-editor-card,
  .dark #perfilesView .profiles-auth-panel,
  .dark #perfilesView .profiles-input,
  .dark #perfilesView .profiles-secondary-btn,
  .dark #perfilesView .profiles-permission-choice-ui{ background:#1e293b; border-color:#334155; color:#cbd5e1; }
  .dark #perfilesView .profiles-label,
  .dark #perfilesView .profiles-permission-category-copy strong,
  .dark #perfilesView .profiles-permission-name,
  .dark #perfilesView .profiles-user-name{ color:#e2e8f0; }

  /* Matriz jerárquica: Ocultar / Lector / Editor */
  #perfilesView .profiles-permission-category-level-labels[data-choice-count="3"],
  #perfilesView .profiles-permission-category-level-choices[data-choice-count="3"]{
    grid-template-columns:repeat(3,66px);
  }
  #perfilesView .profiles-permission-row[data-choice-count="3"],
  #perfilesView .profiles-permission-subheader{
    grid-template-columns:minmax(250px,1fr) repeat(3,66px);
  }
  #perfilesView .profiles-permission-subheader{
    display:grid;
    gap:.5rem;
    align-items:center;
    padding:.58rem 1rem;
    border-bottom:1px solid #e2e8f0;
    background:#f8fafc;
    color:#64748b;
    font-size:.64rem;
    font-weight:900;
    letter-spacing:.035em;
    text-align:center;
    text-transform:uppercase;
  }
  #perfilesView .profiles-permission-subheader > :first-child{ text-align:left; }
  #perfilesView .profiles-permission-type{
    display:inline-flex;
    align-items:center;
    margin-bottom:.18rem;
    padding:.12rem .42rem;
    border-radius:9999px;
    background:#eef2ff;
    color:#4f46e5;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  #perfilesView [data-permission-row].is-dependency-disabled{ opacity:.48; }
  #perfilesView .profiles-permission-row.is-dependency-disabled{ background:#f8fafc; }
  #perfilesView [data-permission-row].is-dependency-disabled .profiles-permission-choice{ cursor:not-allowed; }
  #perfilesView .profiles-permission-dependency-note{
    display:none;
    margin-top:.22rem;
    color:#b45309;
    font-size:.68rem;
    font-weight:800;
  }
  #perfilesView .profiles-permission-row.is-dependency-disabled .profiles-permission-dependency-note{ display:block; }
  .dark #perfilesView .profiles-permission-subheader{ background:#0f172a; border-color:#334155; color:#94a3b8; }
  .dark #perfilesView .profiles-permission-type{ background:#312e81; color:#c7d2fe; }
  /* Jerarquía visual: categoría > subcategoría > opción. */
  #perfilesView .profiles-permission-subcategory-row{
    background:linear-gradient(90deg, rgba(0,173,87,.075), rgba(255,255,255,.98));
    border-left:4px solid rgba(0,173,87,.62);
  }
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-copy{
    position:relative;
    padding-left:2rem;
  }
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-copy::before{
    content:'subdirectory_arrow_right';
    position:absolute;
    left:0;
    top:.1rem;
    font-family:'Material Symbols Outlined';
    font-size:1.25rem;
    color:#00AD57;
  }
  #perfilesView .profiles-permission-subcategory-name{
    display:flex;
    align-items:center;
    gap:.5rem;
    font-weight:900;
    color:#0f172a;
  }
  #perfilesView .profiles-permission-subcategory-name .material-symbols-outlined{
    font-size:1.15rem;
    color:#00AD57;
  }
  #perfilesView .profiles-permission-option-row{
    position:relative;
    margin-left:1.75rem;
    background:#fff;
  }
  #perfilesView .profiles-permission-option-row::before{
    content:'';
    position:absolute;
    left:.75rem;
    top:0;
    bottom:0;
    width:1px;
    background:#dbe5f1;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-copy{
    padding-left:1.45rem;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-name{
    font-weight:800;
    color:#334155;
  }
  #perfilesView .profiles-permission-children{
    border-bottom:1px solid #e2e8f0;
  }
  #perfilesView .profiles-permission-subheader[data-choice-count="2"],
  #perfilesView .profiles-permission-row[data-choice-count="2"]{
    grid-template-columns:minmax(250px,1fr) repeat(2,66px);
  }
  #perfilesView .profiles-permission-subheader--nested{
    margin-left:1.75rem;
    border-left:1px solid #dbe5f1;
    background:#fbfdff;
  }
  #perfilesView .profiles-permission-level-caption{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:#047857;
    font-size:.64rem;
    font-weight:900;
    letter-spacing:.035em;
    text-transform:uppercase;
  }
  .dark #perfilesView .profiles-permission-subcategory-row{
    background:linear-gradient(90deg, rgba(0,173,87,.13), rgba(15,23,42,.98));
  }
  .dark #perfilesView .profiles-permission-subcategory-name,
  .dark #perfilesView .profiles-permission-option-row .profiles-permission-name{ color:#e2e8f0; }
  .dark #perfilesView .profiles-permission-option-row{ background:#0f172a; }
  .dark #perfilesView .profiles-permission-subheader--nested{ background:#111827; }
  @media (max-width:700px){
    #perfilesView .profiles-permission-subheader[data-choice-count="2"],
    #perfilesView .profiles-permission-row[data-choice-count="2"]{
      grid-template-columns:minmax(230px,1fr) repeat(2,62px);
    }
    #perfilesView .profiles-permission-option-row,
    #perfilesView .profiles-permission-subheader--nested{ margin-left:.65rem; }
  }
  @media (max-width:700px){
    #perfilesView .profiles-permission-category-level-labels[data-choice-count="3"],
    #perfilesView .profiles-permission-category-level-choices[data-choice-count="3"]{
      grid-template-columns:repeat(3,62px);
    }
    #perfilesView .profiles-permission-row[data-choice-count="3"],
    #perfilesView .profiles-permission-subheader{
      grid-template-columns:minmax(230px,1fr) repeat(3,62px);
    }
  }



  /* Jerarquía limpia: categoría > bloque interno > opción. Sin encabezados repetidos. */
  #perfilesView .profiles-permission-category{
    border:1px solid #dbe5f1;
    border-radius:18px;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
  }
  #perfilesView .profiles-permission-category-header{
    padding:1rem 1.1rem;
    background:#f8fafc;
  }
  #perfilesView .profiles-permission-module-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:10px;
    background:#e9fbf1;
    color:#008743;
  }
  #perfilesView .profiles-permission-category-copy strong{
    font-size:.98rem;
  }
  #perfilesView .profiles-permission-category-level-labels,
  #perfilesView .profiles-permission-subheader,
  #perfilesView .profiles-permission-level-caption{
    display:none !important;
  }
  #perfilesView .profiles-permission-category-access{
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  #perfilesView .profiles-permission-category-level-choices,
  #perfilesView .profiles-permission-choice-group{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.38rem;
  }
  #perfilesView .profiles-permission-choice{
    flex:0 0 auto;
  }
  #perfilesView .profiles-permission-choice-ui{
    width:auto;
    min-width:82px;
    height:36px;
    min-height:36px;
    padding:0 .7rem;
    border-radius:9999px;
    gap:.34rem;
  }
  #perfilesView .profiles-permission-choice-ui .material-symbols-outlined{
    font-size:17px;
  }
  #perfilesView .profiles-permission-choice-text{
    display:inline-block;
    font-size:.66rem;
    line-height:1;
    font-weight:900;
    letter-spacing:.025em;
    text-transform:uppercase;
  }
  #perfilesView .profiles-permission-category-body{
    padding:.8rem;
    background:#f1f5f9;
  }
  #perfilesView .profiles-permission-table-scroll{
    overflow:visible;
  }
  #perfilesView .profiles-permission-matrix{
    min-width:0 !important;
    display:grid;
    gap:.65rem;
  }
  #perfilesView .profiles-permission-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.78rem .9rem;
    border:1px solid #e2e8f0;
    border-radius:13px;
    background:#fff;
  }
  #perfilesView .profiles-permission-row:hover{
    background:#fff;
    border-color:#cbd5e1;
  }
  #perfilesView .profiles-permission-copy{
    flex:1 1 auto;
    min-width:220px;
  }
  #perfilesView .profiles-permission-subcategory-row{
    margin:0;
    border:0;
    border-left:4px solid #00AD57;
    border-radius:0;
    background:#fff;
    padding:1rem;
  }
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-copy{
    padding-left:0;
  }
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-copy::before{
    content:none;
  }
  #perfilesView .profiles-permission-subcategory-name{
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.91rem;
    font-weight:900;
    color:#0f172a;
  }
  #perfilesView .profiles-permission-subcategory-name .material-symbols-outlined{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:8px;
    background:#e9fbf1;
    color:#008743;
    font-size:17px;
  }
  #perfilesView .profiles-permission-option-row{
    margin:0;
    border-radius:11px;
    background:#fff;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-name{
    color:#334155;
    font-size:.83rem;
    font-weight:850;
  }
  #perfilesView .profiles-permission-branch{
    overflow:hidden;
    border:1px solid #dbe5f1;
    border-radius:15px;
    background:#fff;
    box-shadow:0 3px 10px rgba(15,23,42,.035);
  }
  #perfilesView .profiles-permission-branch > .profiles-permission-row{
    border-top:0;
    border-right:0;
    border-bottom:0;
    border-radius:0;
  }
  #perfilesView .profiles-permission-children{
    display:grid;
    gap:.48rem;
    margin:0;
    padding:.65rem .7rem .75rem 2rem;
    border-top:1px solid #e2e8f0;
    border-bottom:0;
    background:#f8fafc;
    position:relative;
  }
  #perfilesView .profiles-permission-children::before{
    content:'';
    position:absolute;
    left:.9rem;
    top:.72rem;
    bottom:.78rem;
    width:2px;
    border-radius:9999px;
    background:#cbd5e1;
  }
  #perfilesView .profiles-permission-children > .profiles-permission-row,
  #perfilesView .profiles-permission-children > .profiles-permission-branch{
    position:relative;
  }
  #perfilesView .profiles-permission-children > .profiles-permission-row::before,
  #perfilesView .profiles-permission-children > .profiles-permission-branch::before{
    content:'';
    position:absolute;
    left:-1.1rem;
    top:1.55rem;
    width:1rem;
    height:2px;
    background:#cbd5e1;
  }
  #perfilesView [data-permission-row].is-dependency-disabled{
    opacity:.52;
  }
  #perfilesView .profiles-permission-row.is-dependency-disabled{
    background:#f8fafc;
  }
  .dark #perfilesView .profiles-permission-category-body,
  .dark #perfilesView .profiles-permission-children{
    background:#111827;
  }
  .dark #perfilesView .profiles-permission-branch,
  .dark #perfilesView .profiles-permission-row,
  .dark #perfilesView .profiles-permission-subcategory-row,
  .dark #perfilesView .profiles-permission-option-row{
    background:#1e293b;
    border-color:#334155;
  }
  .dark #perfilesView .profiles-permission-subcategory-name{
    color:#e2e8f0;
  }
  @media (max-width:860px){
    #perfilesView .profiles-permission-category-header{
      grid-template-columns:1fr;
    }
    #perfilesView .profiles-permission-category-access{
      justify-content:flex-start;
      margin-left:2.35rem;
    }
    #perfilesView .profiles-permission-row{
      flex-direction:column;
      align-items:stretch;
      gap:.7rem;
    }
    #perfilesView .profiles-permission-choice-group{
      justify-content:flex-start;
    }
    #perfilesView .profiles-permission-choice{
      flex:1 1 105px;
    }
    #perfilesView .profiles-permission-choice-ui{
      width:100%;
      min-width:0;
    }
    #perfilesView .profiles-permission-children{
      padding-left:1.35rem;
    }
    #perfilesView .profiles-permission-children::before{
      left:.55rem;
    }
    #perfilesView .profiles-permission-children > .profiles-permission-row::before,
    #perfilesView .profiles-permission-children > .profiles-permission-branch::before{
      left:-.8rem;
      width:.7rem;
    }
  }
  @media (max-width:520px){
    #perfilesView .profiles-permission-category-access{
      margin-left:0;
      width:100%;
    }
    #perfilesView .profiles-permission-category-level-choices{
      width:100%;
      justify-content:stretch;
    }
    #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice{
      flex:1 1 0;
    }
    #perfilesView .profiles-permission-choice-text{
      font-size:.61rem;
    }
  }




  /* Categoría: mantiene controles con texto y una cabecera visual dominante. */
  #perfilesView .profiles-permission-category{
    border:1px solid #cfdbea;
    border-radius:20px;
    box-shadow:0 12px 30px rgba(15,23,42,.075);
    background:#fff;
  }
  #perfilesView .profiles-permission-category-header{
    min-height:74px;
    background:linear-gradient(105deg,#f8fafc 0%,#f4fbf7 58%,#eefaf3 100%);
    box-shadow:inset 5px 0 0 #00AD57;
    border-bottom:1px solid #dbe5f1;
  }
  #perfilesView .profiles-permission-module-icon{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:12px;
    background:#00AD57;
    color:#fff;
    box-shadow:0 7px 16px rgba(0,173,87,.22);
  }
  #perfilesView .profiles-permission-category-copy strong{
    color:#0f172a;
    font-size:1rem;
    letter-spacing:-.01em;
  }
  #perfilesView .profiles-permission-category-copy small{
    color:#718198;
  }
  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-ui{
    min-width:88px;
    height:38px;
    border-radius:9999px;
    padding:0 .78rem;
  }
  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-text{
    display:inline-block !important;
  }

  /* Dentro de categorías: controles sólo con iconos, conservando title y aria-label. */
  #perfilesView .profiles-permission-row .profiles-permission-choice-text{
    display:none !important;
  }
  #perfilesView .profiles-permission-row .profiles-permission-choice-group{
    flex-wrap:nowrap;
    gap:.46rem;
  }

  /* Subcategoría: bloque verde suave, más alto y claramente separado. */
  #perfilesView .profiles-permission-branch{
    border:1px solid #bfe8d0;
    border-radius:17px;
    background:#fff;
    box-shadow:0 6px 17px rgba(15,23,42,.045);
  }
  #perfilesView .profiles-permission-subcategory-row{
    min-height:70px;
    padding:1rem 1.05rem;
    border:0;
    border-left:5px solid #00AD57;
    background:linear-gradient(90deg,#ecfdf5 0%,#f7fffa 42%,#ffffff 100%);
  }
  #perfilesView .profiles-permission-subcategory-name{
    color:#064e3b;
    font-size:.94rem;
    letter-spacing:-.005em;
  }
  #perfilesView .profiles-permission-subcategory-name .material-symbols-outlined{
    width:31px;
    height:31px;
    border-radius:10px;
    background:#d1fae5;
    color:#047857;
    box-shadow:inset 0 0 0 1px rgba(5,150,105,.13);
  }
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-description{
    color:#6b8291;
  }
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-ui{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    padding:0;
    border-radius:12px;
  }
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-ui .material-symbols-outlined{
    font-size:19px;
  }

  /* Opciones: tarjetas compactas neutras, con punto identificador y controles circulares. */
  #perfilesView .profiles-permission-children{
    gap:.52rem;
    padding:.75rem .8rem .85rem 2.2rem;
    border-top:1px solid #d9e9df;
    background:#f6f9fc;
  }
  #perfilesView .profiles-permission-option-row{
    min-height:58px;
    padding:.72rem .82rem;
    border:1px solid #e1e9f2;
    border-radius:12px;
    background:#fff;
    box-shadow:0 2px 7px rgba(15,23,42,.025);
  }
  #perfilesView .profiles-permission-option-row:hover{
    border-color:#c9d7e6;
    background:#fcfdff;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-copy{
    padding-left:.15rem;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-name{
    display:flex;
    align-items:center;
    gap:.52rem;
    color:#334155;
    font-size:.84rem;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-name::before{
    content:'';
    width:8px;
    height:8px;
    min-width:8px;
    border-radius:9999px;
    background:#8fa4ba;
    box-shadow:0 0 0 4px #edf2f7;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-description{
    margin-left:1.02rem;
    color:#94a3b8;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-choice-ui{
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    padding:0;
    border-radius:9999px;
  }
  #perfilesView .profiles-permission-option-row .profiles-permission-choice-ui .material-symbols-outlined{
    font-size:18px;
  }

  /* Conectores más discretos para no competir con la jerarquía. */
  #perfilesView .profiles-permission-children::before{
    left:1rem;
    width:2px;
    background:#c5d3df;
  }
  #perfilesView .profiles-permission-children > .profiles-permission-row::before,
  #perfilesView .profiles-permission-children > .profiles-permission-branch::before{
    left:-1.2rem;
    width:1.05rem;
    background:#c5d3df;
  }

  /* Estados seleccionados: color consistente y más evidente. */
  #perfilesView .profiles-permission-choice[data-level="none"] input:checked + .profiles-permission-choice-ui{
    background:#fff1f2;
    border-color:#f43f5e;
    color:#be123c;
  }
  #perfilesView .profiles-permission-choice[data-level="read"] input:checked + .profiles-permission-choice-ui{
    background:#fff7ed;
    border-color:#f59e0b;
    color:#b45309;
  }
  #perfilesView .profiles-permission-choice[data-level="edit"] input:checked + .profiles-permission-choice-ui{
    background:#ecfdf5;
    border-color:#00AD57;
    color:#047857;
  }

  .dark #perfilesView .profiles-permission-category-header{
    background:linear-gradient(105deg,#0f172a,#10241c);
    border-color:#334155;
  }
  .dark #perfilesView .profiles-permission-category-copy strong{ color:#f1f5f9; }
  .dark #perfilesView .profiles-permission-subcategory-row{
    background:linear-gradient(90deg,rgba(0,173,87,.16),#1e293b 54%);
  }
  .dark #perfilesView .profiles-permission-subcategory-name{ color:#d1fae5; }
  .dark #perfilesView .profiles-permission-children{ background:#111827; }
  .dark #perfilesView .profiles-permission-option-row{ background:#1e293b; border-color:#334155; }
  .dark #perfilesView .profiles-permission-option-row .profiles-permission-name{ color:#e2e8f0; }

  @media (max-width:860px){
    #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group,
    #perfilesView .profiles-permission-option-row .profiles-permission-choice-group{
      justify-content:flex-start;
    }
    #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice,
    #perfilesView .profiles-permission-option-row .profiles-permission-choice{
      flex:0 0 auto;
    }
    #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-ui,
    #perfilesView .profiles-permission-option-row .profiles-permission-choice-ui{
      width:42px;
      min-width:42px;
    }
  }



  /* Modificar Caja: mostrar las 7 cajas cuando haya espacio y permitir
     desplazamiento vertical en pantallas de menor altura. */
  #modificarCajaView #modCajaCajaPanel {
    max-height: min(26rem, calc(100vh - 12rem)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }



  /* Subcategorías: barra azul y degradado limitado a la mitad del ancho. */
  #perfilesView .profiles-permission-subcategory-row {
    border-left-color: #2072AF !important;
    background: linear-gradient(
      90deg,
      rgba(32, 114, 175, 0.12) 0%,
      rgba(32, 114, 175, 0.045) 22%,
      #ffffff 50%,
      #ffffff 100%
    ) !important;
  }

  /* Los tres niveles de una subcategoría viven dentro de una sola cápsula. */
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .34rem;
    padding: .3rem;
    border: 1px solid #dbe5f1;
    border-radius: 9999px;
    background: rgba(241, 245, 249, .9);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .035);
  }

  #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-ui {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 9999px !important;
    background: #ffffff;
  }

  .dark #perfilesView .profiles-permission-subcategory-row {
    background: linear-gradient(
      90deg,
      rgba(32, 114, 175, 0.22) 0%,
      rgba(32, 114, 175, 0.09) 24%,
      #1e293b 50%,
      #1e293b 100%
    ) !important;
  }

  .dark #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group {
    border-color: #334155;
    background: rgba(15, 23, 42, .72);
  }

  .dark #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-ui {
    background: #1e293b;
  }



  /* Categorías principales: fondo neutro, sin verde ni degradado. */
  #perfilesView .profiles-permission-category-header {
    background: #ffffff !important;
  }

  .dark #perfilesView .profiles-permission-category-header {
    background: #0f172a !important;
  }



  /* Categorías principales: controles sólo con iconos.
     Se conservan más anchos y grandes que los de las subcategorías
     para que el nivel principal siga siendo fácil de distinguir. */
  #perfilesView .profiles-permission-category-level-choices {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .58rem;
  }

  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice {
    flex: 0 0 auto;
  }

  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-text {
    display: none !important;
  }

  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-ui {
    width: 50px;
    min-width: 50px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-ui .material-symbols-outlined {
    font-size: 20px;
  }

  @media (max-width: 640px) {
    #perfilesView .profiles-permission-category-level-choices {
      gap: .42rem;
    }

    #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-ui {
      width: 46px;
      min-width: 46px;
      height: 40px;
      min-height: 40px;
    }
  }



  /* Encabezado general para toda la matriz de permisos. */
  #perfilesView .profiles-permission-matrix-heading {
    display: flex;
    align-items: center;
    gap: .72rem;
    margin: 0 0 .85rem;
    padding: .72rem .9rem;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
  }

  #perfilesView .profiles-permission-matrix-heading > .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 19px;
  }

  #perfilesView .profiles-permission-matrix-heading strong,
  #perfilesView .profiles-permission-matrix-heading small {
    display: block;
  }

  #perfilesView .profiles-permission-matrix-heading strong {
    font-size: .82rem;
    font-weight: 900;
    color: #1e293b;
  }

  #perfilesView .profiles-permission-matrix-heading small {
    margin-top: .08rem;
    font-size: .68rem;
    color: #64748b;
  }

  /* Controles de las categorías: completamente circulares. */
  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-ui {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
  }

  #perfilesView .profiles-permission-category-level-choices .profiles-permission-choice-ui .material-symbols-outlined {
    font-size: 19px !important;
  }

  /* Las opciones editables usan tres botones redondos; las visuales conservan dos. */
  #perfilesView .profiles-permission-option-row .profiles-permission-choice-ui {
    border-radius: 9999px !important;
  }

  .dark #perfilesView .profiles-permission-matrix-heading {
    border-color: #334155;
    background: #1e293b;
    color: #cbd5e1;
  }

  .dark #perfilesView .profiles-permission-matrix-heading > .material-symbols-outlined {
    background: #334155;
    color: #cbd5e1;
  }

  .dark #perfilesView .profiles-permission-matrix-heading strong { color: #f1f5f9; }
  .dark #perfilesView .profiles-permission-matrix-heading small { color: #94a3b8; }



  /* Encabezados alineados con los tres controles de cada categoría. */
  #perfilesView .profiles-permission-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  #perfilesView .profiles-permission-category-heading-title {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
  }

  #perfilesView .profiles-permission-column-labels {
    display: grid;
    grid-template-columns: repeat(3, 42px);
    gap: .58rem;
    flex: 0 0 auto;
    align-items: center;
    justify-items: center;
    margin-right: 1rem;
  }

  #perfilesView .profiles-permission-column-labels span {
    font-size: .58rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .025em;
    color: #64748b;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .dark #perfilesView .profiles-permission-column-labels span {
    color: #94a3b8;
  }

  @media (max-width: 640px) {
    #perfilesView .profiles-permission-column-labels {
      grid-template-columns: repeat(3, 40px);
      gap: .42rem;
      margin-right: .75rem;
    }

    #perfilesView .profiles-permission-column-labels span {
      font-size: .5rem;
    }
  }



  /* Más aire horizontal entre columnas y controles en toda la matriz. */
  #perfilesView .profiles-permission-column-labels {
    grid-template-columns: repeat(3, 42px) !important;
    column-gap: .9rem !important;
    margin-right: 1.15rem !important;
  }

  #perfilesView .profiles-permission-column-labels span {
    font-size: .66rem !important;
    letter-spacing: .045em !important;
  }

  #perfilesView .profiles-permission-category-level-choices,
  #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group,
  #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
    gap: .9rem !important;
  }

  #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group,
  #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
    padding: .34rem .52rem !important;
  }

  #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: rgba(248,250,252,.94);
  }

  /* Administrar perfiles: filtro superior y editor vertical. */
  #perfilesView .profiles-admin-flow {
    display: grid;
    gap: 1.15rem;
  }

  #perfilesView .profiles-active-user-filter {
    display: grid;
    grid-template-columns: minmax(250px, .85fr) minmax(310px, 1.15fr);
    align-items: end;
    gap: 1rem 1.25rem;
    padding: 1rem 1rem 1.75rem;
    border: 1px solid #dbe5f1;
    border-radius: 1.15rem;
    background: #f8fafc;
  }

  #perfilesView .profiles-active-user-filter-copy {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
  }

  #perfilesView .profiles-active-user-filter-copy > .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #475569;
  }

  #perfilesView .profiles-active-user-filter-copy p,
  #perfilesView .profiles-active-user-filter-help {
    margin: .18rem 0 0;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.35;
  }

  #perfilesView .profiles-active-user-filter-help {
    grid-column: 1 / -1;
    margin-top: -.25rem;
    padding-left: .15rem;
  }

  #perfilesView .profiles-selected-user-heading {
    display: flex;
    align-items: center;
    gap: .72rem;
    padding: .8rem .9rem;
    border: 1px solid #dbe5f1;
    border-radius: 1rem;
    background: #f8fafc;
  }

  #perfilesView .profiles-selected-user-heading > .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9999px;
    background: #e9fbf1;
    color: #008743;
  }

  #perfilesView .profiles-selected-user-heading strong,
  #perfilesView .profiles-selected-user-heading small { display: block; }
  #perfilesView .profiles-selected-user-heading strong { color: #1e293b; font-size: .86rem; font-weight: 900; }
  #perfilesView .profiles-selected-user-heading small { margin-top: .1rem; color: #64748b; font-size: .72rem; }

  #perfilesView .profiles-save-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
  }

  .dark #perfilesView .profiles-active-user-filter,
  .dark #perfilesView .profiles-selected-user-heading,
  .dark #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
    border-color: #334155;
    background: #0f172a;
  }
  .dark #perfilesView .profiles-selected-user-heading strong { color: #e2e8f0; }
  .dark #perfilesView .profiles-active-user-filter-copy > .material-symbols-outlined { background: #334155; color: #cbd5e1; }

  @media (max-width: 760px) {
    #perfilesView .profiles-permission-column-labels {
      grid-template-columns: repeat(3, 42px) !important;
      column-gap: .72rem !important;
      margin-right: .8rem !important;
    }
    #perfilesView .profiles-permission-column-labels span { font-size: .55rem !important; }
    #perfilesView .profiles-permission-category-level-choices,
    #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group,
    #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
      gap: .56rem !important;
    }
    #perfilesView .profiles-active-user-filter { grid-template-columns: 1fr; align-items: stretch; }
    #perfilesView .profiles-active-user-filter-help { grid-column: auto; }
  }



  #perfilesView .profiles-filter-control { position: relative; width: 100%; }
  #perfilesView .profiles-filter-btn {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: .55rem;
    padding: .58rem .8rem .58rem .95rem; border-radius: 9999px;
    border: 1px solid #dbe5f1; background: #fff; color: #0f172a;
    text-align: left; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
  }
  #perfilesView .profiles-filter-btn:hover { border-color: #cbd5e1; }
  #perfilesView .profiles-filter-btn:focus,
  #perfilesView .profiles-filter-btn[aria-expanded="true"] {
    outline: none; border-color: #b7c6d8; box-shadow: 0 0 0 3px rgba(0,173,87,.10);
  }
  #perfilesView .profiles-filter-summary { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 700; }
  #perfilesView .profiles-filter-leading { color: #64748b; font-size: 20px; }
  #perfilesView .profiles-filter-btn > .material-symbols-outlined:last-child { color: #64748b; font-size: 20px; transition: transform .15s ease; }
  #perfilesView .profiles-filter-btn[aria-expanded="true"] > .material-symbols-outlined:last-child { transform: rotate(180deg); }
  #perfilesView .profiles-filter-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + .4rem); z-index: 80;
    padding: .7rem; border: 1px solid #e2e8f0; border-radius: 22px;
    background: #fff; box-shadow: 0 14px 34px rgba(15,23,42,.14); overflow: hidden;
  }
  #perfilesView .profiles-filter-search-wrap { position: relative; margin-bottom: .55rem; }
  #perfilesView .profiles-filter-search-wrap > .material-symbols-outlined { position: absolute; left: .72rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 18px; pointer-events: none; }
  #perfilesView .profiles-filter-search {
    width: 100%; min-height: 38px; padding: .48rem .7rem .48rem 2.25rem;
    border: 1px solid #dbe5f1; border-radius: 9999px; background: #fff;
    color: #0f172a; font-size: .82rem; outline: none;
  }
  #perfilesView .profiles-filter-search:focus { border-color: #00AD57; box-shadow: 0 0 0 3px rgba(0,173,87,.10); }
  #perfilesView .profiles-filter-results { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
  #perfilesView .profiles-filter-option {
    width: 100%; display: flex; align-items: center; gap: .7rem; padding: .72rem .68rem;
    border: 0; border-bottom: 1px solid #f1f5f9; background: transparent; color: #334155;
    text-align: left; font-size: .82rem; line-height: 1.25; cursor: pointer;
  }
  #perfilesView .profiles-filter-option:last-child { border-bottom: 0; }
  #perfilesView .profiles-filter-option:hover { background: #f8fafc; border-radius: .8rem; }
  #perfilesView .profiles-filter-option-dot {
    width: 16px; height: 16px; min-width: 16px; border-radius: 9999px;
    border: 1px solid #cbd5e1; background: #fff; box-shadow: inset 0 0 0 3px #fff;
  }
  #perfilesView .profiles-filter-option.is-selected .profiles-filter-option-dot { border-color: #00AD57; background: #00AD57; }
  #perfilesView .profiles-filter-option-copy { min-width: 0; flex: 1; }
  #perfilesView .profiles-filter-option-copy strong { display: block; color: #0f172a; font-size: .82rem; font-weight: 800; }
  #perfilesView .profiles-filter-option-copy small { display: block; margin-top: .12rem; color: #64748b; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #perfilesView .profiles-filter-empty { padding: 1rem .75rem; color: #64748b; text-align: center; font-size: .78rem; }
  #perfilesView .profiles-input--readonly { background: #f1f5f9 !important; color: #64748b !important; cursor: not-allowed; }
  #perfilesView .profiles-selected-user-heading-copy { min-width: 0; flex: 1; }
  #perfilesView .profiles-delete-user-btn {
    margin-left: auto; width: 40px; height: 40px; min-width: 40px; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 9999px;
    border: 1px solid #fecaca; background: #fff; color: #dc2626;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
  }
  #perfilesView .profiles-delete-user-btn:hover { background: #fef2f2; border-color: #f87171; }
  #perfilesView .profiles-delete-user-btn:active { transform: scale(.97); }
  #perfilesView .profiles-delete-user-btn:disabled { opacity: .55; cursor: wait; }
  .dark #perfilesView .profiles-filter-btn,
  .dark #perfilesView .profiles-filter-panel,
  .dark #perfilesView .profiles-filter-search { background: #0f172a; border-color: #334155; color: #e2e8f0; }
  .dark #perfilesView .profiles-filter-option { color: #cbd5e1; border-color: #1e293b; }
  .dark #perfilesView .profiles-filter-option:hover { background: #1e293b; }
  .dark #perfilesView .profiles-filter-option-copy strong { color: #e2e8f0; }
  .dark #perfilesView .profiles-input--readonly { background: #1e293b !important; color: #94a3b8 !important; }

  #perfilesView .profiles-editor-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
  }
  #perfilesView .profiles-delete-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 48px;
  }
  #perfilesView .profiles-delete-label {
    visibility: hidden;
    height: 1.15rem;
  }
  #perfilesView .profiles-delete-field .profiles-delete-user-btn {
    margin-left: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  @media (max-width: 900px) {
    #perfilesView .profiles-editor-fields {
      grid-template-columns: 1fr 1fr;
    }
    #perfilesView .profiles-delete-field {
      align-items: flex-end;
    }
  }
  @media (max-width: 620px) {
    #perfilesView .profiles-editor-fields {
      grid-template-columns: 1fr;
    }
    #perfilesView .profiles-delete-field {
      align-items: flex-end;
    }
    #perfilesView .profiles-delete-label { display: none; }
  }




  /*
    Escala de separación respecto al borde derecho:
    categoría = x, subcategoría = 2x, opción = 3x.
  */
  #perfilesView .profiles-permission-category-header {
    padding-right: 1rem !important;
  }

  #perfilesView .profiles-permission-subcategory-row {
    padding-right: 2rem !important;
  }

  #perfilesView .profiles-permission-option-row {
    padding-right: 3rem !important;
  }

  /*
    Sólo las subcategorías conservan la cápsula gris.
    En las opciones, los botones quedan sueltos sobre la fila.
  */
  #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .dark #perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  @media (max-width: 760px) {
    #perfilesView .profiles-permission-category-header {
      padding-right: .65rem !important;
    }

    #perfilesView .profiles-permission-subcategory-row {
      padding-right: 1.3rem !important;
    }

    #perfilesView .profiles-permission-option-row {
      padding-right: 2.5rem !important;
    }
  }



  #perfilesView .profiles-society-branch{ overflow:visible; }
  #perfilesView .profiles-society-subcategory-header{
    border-left-color:#2072AF !important;
  }
  #perfilesView .profiles-society-children{ overflow:visible; }
  #perfilesView .profiles-society-access-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(240px,360px);
    align-items:center;
    gap:1.25rem;
  }
  #perfilesView .profiles-society-filter-wrap{ position:relative; width:100%; min-width:0; }
  #perfilesView .profiles-society-filter-btn{ width:100%; min-height:44px; }
  #perfilesView .profiles-society-filter-panel{ left:0; right:0; z-index:90; }
  #perfilesView .profiles-society-filter-title{
    padding:.2rem .45rem .55rem;
    color:#64748b;
    font-size:.69rem;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  #perfilesView .profiles-society-filter-results{ max-height:260px; overflow-y:auto; }
  #perfilesView .profiles-society-option{ cursor:pointer; }
  #perfilesView .profiles-society-option input{ position:absolute; opacity:0; pointer-events:none; }
  #perfilesView .profiles-society-access-row.is-dependency-disabled{ opacity:.62; }
  #perfilesView .profiles-society-access-row.is-dependency-disabled .profiles-permission-dependency-note,
  #perfilesView .profiles-society-subcategory-header.is-dependency-disabled .profiles-permission-dependency-note{ display:block; }
  @media (max-width:860px){
    #perfilesView .profiles-society-access-row{ grid-template-columns:1fr; }
  }



  /* Permite que el desplegable de sociedades salga del árbol sin quedar recortado. */
  #perfilesView .profiles-permission-category.has-open-society-dropdown,
  #perfilesView .profiles-permission-category.has-open-society-dropdown .profiles-permission-category-body,
  #perfilesView .profiles-permission-category.has-open-society-dropdown .profiles-permission-table-scroll,
  #perfilesView .profiles-permission-category.has-open-society-dropdown .profiles-permission-matrix,
  #perfilesView .profiles-permission-category.has-open-society-dropdown .profiles-society-branch,
  #perfilesView .profiles-permission-category.has-open-society-dropdown .profiles-society-children,
  #perfilesView .profiles-permission-category.has-open-society-dropdown .profiles-society-access-row {
    overflow: visible !important;
  }

  #perfilesView .profiles-permission-category.has-open-society-dropdown {
    position: relative;
    z-index: 220;
  }

  #perfilesView [data-profile-society-control].is-dropdown-open {
    position: relative;
    z-index: 230;
  }

  #perfilesView .profiles-society-filter-panel {
    top: calc(100% + .45rem) !important;
    z-index: 240 !important;
    max-height: min(360px, 55vh);
    overflow: hidden !important;
  }

  #perfilesView .profiles-society-filter-results {
    max-height: min(285px, 44vh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }



  #perfilesView .profiles-society-filter-panel.opens-upward {
    top: auto !important;
    bottom: calc(100% + .45rem) !important;
  }

  #perfilesView .profiles-society-filter-panel {
    box-sizing: border-box;
    min-height: 0;
  }

  #perfilesView .profiles-society-filter-results {
    min-height: 0;
  }



  #perfilesView .profiles-society-filter-panel:not(.hidden) {
    overscroll-behavior: contain !important;
    pointer-events: auto !important;
  }

  #perfilesView .profiles-society-filter-results {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
  }

  #perfilesView .profiles-society-filter-results::-webkit-scrollbar {
    width: 8px;
  }

  #perfilesView .profiles-society-filter-results::-webkit-scrollbar-track {
    background: transparent;
  }

  #perfilesView .profiles-society-filter-results::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .72);
    border-radius: 9999px;
  }


.legacy-inline-style-1 {font-family:'Nunito',ui-sans-serif,system-ui}

.legacy-inline-style-2 {-webkit-tap-highlight-color:transparent;}

.legacy-inline-style-3 {-webkit-overflow-scrolling:touch; touch-action: pan-y;}

.legacy-inline-style-4 {-webkit-overflow-scrolling:touch;}

/* ================================================================
   MODIFICAR CAJA: restaurar checkbox redondo verde de la versión
   anterior al reemplazar Tailwind Play CDN por CSS compilado.
   Afecta únicamente el selector general y los selectores de filas.
   ================================================================ */
#modificarCajaView #modCajaSelectAll,
#modificarCajaView input.modcaja-row-checkbox {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  padding: 0 !important;
  vertical-align: middle !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  background-origin: border-box !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #00ad57 !important;
  cursor: pointer !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  user-select: none;
  flex-shrink: 0;
  box-shadow: none !important;
}

#modificarCajaView #modCajaSelectAll:checked,
#modificarCajaView input.modcaja-row-checkbox:checked {
  border-color: transparent !important;
  background-color: currentColor !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0Z'/%3E%3C/svg%3E") !important;
}

#modificarCajaView #modCajaSelectAll:indeterminate {
  border-color: transparent !important;
  background-color: currentColor !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4z'/%3E%3C/svg%3E") !important;
}

#modificarCajaView #modCajaSelectAll:focus,
#modificarCajaView #modCajaSelectAll:focus-visible,
#modificarCajaView input.modcaja-row-checkbox:focus,
#modificarCajaView input.modcaja-row-checkbox:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(0, 173, 87, 0.28) !important;
}

#modificarCajaView #modCajaSelectAll:disabled,
#modificarCajaView input.modcaja-row-checkbox:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}


/* ===== Modificar Caja: desplegables de modales con estética de Histórico ===== */
.modcaja-modal-select-host {
  position: relative;
  width: 100%;
  min-width: 0;
  font-family: inherit;
}

.modcaja-native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.modcaja-modal-select-button {
  width: 100%;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 42px 0 14px;
  border: 1px solid #dbe5f1;
  border-radius: 9999px;
  background: #ffffff;
  color: #334155;
  box-shadow: none;
  outline: none;
  position: relative;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.modcaja-modal-select-button:hover {
  border-color: #cbd5e1;
  background: #ffffff;
}

.modcaja-modal-select-button:focus,
.modcaja-modal-select-button:focus-visible,
.modcaja-modal-select-button.is-open {
  border-color: #b7c6d8;
  box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.10);
}

.modcaja-modal-select-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: #f8fafc;
}

.modcaja-modal-select-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
}

.modcaja-modal-select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 20px;
  transition: transform 150ms ease;
  pointer-events: none;
}

.modcaja-modal-select-button.is-open .modcaja-modal-select-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.modcaja-modal-select-panel {
  position: fixed;
  z-index: 100004;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #ffffff;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16), 0 4px 14px rgba(15, 23, 42, 0.08);
  font-family: inherit;
}

.modcaja-modal-select-panel[hidden] {
  display: none !important;
}

.modcaja-modal-select-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modcaja-modal-select-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1e293b;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.modcaja-modal-select-option:hover,
.modcaja-modal-select-option:focus-visible {
  background: #f8fafc;
  outline: none;
}

.modcaja-modal-select-option.is-selected {
  background: rgba(0, 173, 87, 0.08);
  color: #04783f;
}

.modcaja-modal-select-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.modcaja-modal-select-dot {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}

.modcaja-modal-select-dot-inner {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 9999px;
  background: transparent;
}

.modcaja-modal-select-option.is-selected .modcaja-modal-select-dot {
  border-color: #00AD57;
}

.modcaja-modal-select-option.is-selected .modcaja-modal-select-dot-inner {
  background: #00AD57;
}

.modcaja-modal-select-option-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El calendario se porta al body y no depende de utilidades generadas por Tailwind. */
#modCajaVentaFechaPrimerPagoPanel {
  z-index: 100005 !important;
  display: none;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 640px) {
  .modcaja-modal-select-panel {
    border-radius: 18px;
  }
}

/* ==== Producción: campos de texto sin sombra ==== */
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  textarea
) {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  textarea
):is(:hover, :focus, :focus-visible, :active, :disabled, [readonly]) {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
}

/* ================================================================
   APROBACIONES: checkbox redondo verde, igual a Modificar Caja.
   Afecta los selectores generales y los selectores de cada fila.
   ================================================================ */
#aprobacionesView #aprobVentasSelectAll,
#aprobacionesView #aprobMovsSelectAll,
#aprobacionesView input.aprob-ventas-checkbox,
#aprobacionesView input.aprob-movs-checkbox {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  padding: 0 !important;
  vertical-align: middle !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  background-origin: border-box !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #00ad57 !important;
  cursor: pointer !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  user-select: none;
  flex-shrink: 0;
  box-shadow: none !important;
}

#aprobacionesView #aprobVentasSelectAll:checked,
#aprobacionesView #aprobMovsSelectAll:checked,
#aprobacionesView input.aprob-ventas-checkbox:checked,
#aprobacionesView input.aprob-movs-checkbox:checked {
  border-color: transparent !important;
  background-color: currentColor !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0Z'/%3E%3C/svg%3E") !important;
}

#aprobacionesView #aprobVentasSelectAll:indeterminate,
#aprobacionesView #aprobMovsSelectAll:indeterminate {
  border-color: transparent !important;
  background-color: currentColor !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4z'/%3E%3C/svg%3E") !important;
}

#aprobacionesView #aprobVentasSelectAll:focus,
#aprobacionesView #aprobVentasSelectAll:focus-visible,
#aprobacionesView #aprobMovsSelectAll:focus,
#aprobacionesView #aprobMovsSelectAll:focus-visible,
#aprobacionesView input.aprob-ventas-checkbox:focus,
#aprobacionesView input.aprob-ventas-checkbox:focus-visible,
#aprobacionesView input.aprob-movs-checkbox:focus,
#aprobacionesView input.aprob-movs-checkbox:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(0, 173, 87, 0.28) !important;
}

#aprobacionesView #aprobVentasSelectAll:disabled,
#aprobacionesView #aprobMovsSelectAll:disabled,
#aprobacionesView input.aprob-ventas-checkbox:disabled,
#aprobacionesView input.aprob-movs-checkbox:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* ================================================================
   OPCIONES GENERALES: botón Guardar cambios al final de cada panel.
   Negocio y Días de Mora reciben su propio botón; Config por unidad
   conserva el botón original dentro de su panel.
   ================================================================ */
.general-panel-save-wrap {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
}

.general-panel-save-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: #00ad57;
  padding: 0.7rem 1.5rem;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 173, 87, 0.18);
  transition: transform 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.general-panel-save-btn:hover:not(:disabled) {
  background: #009f50;
  transform: translateY(-1px);
}

.general-panel-save-btn:focus,
.general-panel-save-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 173, 87, 0.2), 0 10px 20px rgba(0, 173, 87, 0.18);
}

.general-panel-save-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

@media (max-width: 640px) {
  .general-panel-save-wrap {
    justify-content: stretch;
  }

  .general-panel-save-btn {
    width: 100%;
  }
}

/* ================================================================
   GESTIÓN DE CAJAS: checkbox redondo verde, igual a Modificar Caja
   y Aprobaciones.
   ================================================================ */
#abrirCajasView #abrirCajasLista input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  padding: 0 !important;
  vertical-align: middle !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  background-origin: border-box !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #00ad57 !important;
  cursor: pointer !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  user-select: none;
  flex-shrink: 0;
  box-shadow: none !important;
}

#abrirCajasView #abrirCajasLista input[type="checkbox"]:checked {
  border-color: transparent !important;
  background-color: currentColor !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0Z'/%3E%3C/svg%3E") !important;
}

#abrirCajasView #abrirCajasLista input[type="checkbox"]:focus,
#abrirCajasView #abrirCajasLista input[type="checkbox"]:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(0, 173, 87, 0.28) !important;
}

#abrirCajasView #abrirCajasLista input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}


/* =========================================================
   Toasts de producción: posición estable y texto uniforme
   ========================================================= */
.perm-toast,
.perm-toast-info,
.perm-toast-success,
.perm-toast-warning,
.perm-toast-warning-white,
.perm-toast-error {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  left: calc(2rem + env(safe-area-inset-left, 0px)) !important;
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  max-width: min(420px, calc(100vw - 4rem)) !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
}

.perm-toast-warning,
.perm-toast-warning-white {
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .perm-toast,
  .perm-toast-info,
  .perm-toast-success,
  .perm-toast-warning,
  .perm-toast-warning-white,
  .perm-toast-error {
    left: calc(1rem + env(safe-area-inset-left, 0px)) !important;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* Unidades: buscador destacado con sombra tenue, sin contorno */
#unitsView #searchUnits {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.10) !important;
  transition: box-shadow 160ms ease, background-color 160ms ease !important;
}

#unitsView #searchUnits:hover {
  border-color: transparent !important;
  box-shadow: 0 4px 13px rgba(15, 23, 42, 0.13) !important;
}

#unitsView #searchUnits:focus,
#unitsView #searchUnits:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
}

.dark #unitsView #searchUnits {
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28) !important;
}

/* =========================================================
   Toasts: tamaño mediano y lectura cómoda
   ========================================================= */
.perm-toast,
.perm-toast-info,
.perm-toast-success,
.perm-toast-warning,
.perm-toast-warning-white,
.perm-toast-error {
  width: auto !important;
  min-width: min(360px, calc(100vw - 4rem)) !important;
  max-width: min(560px, calc(100vw - 4rem)) !important;
  min-height: 76px !important;
  padding: 18px 22px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

@media (max-width: 640px) {
  .perm-toast,
  .perm-toast-info,
  .perm-toast-success,
  .perm-toast-warning,
  .perm-toast-warning-white,
  .perm-toast-error {
    width: calc(100vw - 2rem) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 2rem) !important;
    min-height: 68px !important;
    padding: 16px 18px !important;
  }
}


/* =========================================================
   Toasts: reducción aproximada del 30 %
   ========================================================= */
.perm-toast,
.perm-toast-info,
.perm-toast-success,
.perm-toast-warning,
.perm-toast-warning-white,
.perm-toast-error {
  width: auto !important;
  min-width: min(252px, calc(100vw - 4rem)) !important;
  max-width: min(392px, calc(100vw - 4rem)) !important;
  min-height: 53px !important;
  padding: 13px 15px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

@media (max-width: 640px) {
  .perm-toast,
  .perm-toast-info,
  .perm-toast-success,
  .perm-toast-warning,
  .perm-toast-warning-white,
  .perm-toast-error {
    width: auto !important;
    min-width: min(252px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
}

/* =========================================================
   Toasts: mismo ancho, más aire vertical
   ========================================================= */
.perm-toast,
.perm-toast-info,
.perm-toast-success,
.perm-toast-warning,
.perm-toast-warning-white,
.perm-toast-error {
  min-height: 60px !important;
  padding: 16px 15px !important;
}

@media (max-width: 640px) {
  .perm-toast,
  .perm-toast-info,
  .perm-toast-success,
  .perm-toast-warning,
  .perm-toast-warning-white,
  .perm-toast-error {
    min-height: 56px !important;
    padding: 15px 14px !important;
  }
}

/* =========================================================
   Toasts: ancho ajustado al contenido
   ========================================================= */
.perm-toast,
.perm-toast-info,
.perm-toast-success,
.perm-toast-warning,
.perm-toast-warning-white,
.perm-toast-error {
  min-width: 0 !important;
}

@media (max-width: 640px) {
  .perm-toast,
  .perm-toast-info,
  .perm-toast-success,
  .perm-toast-warning,
  .perm-toast-warning-white,
  .perm-toast-error {
    min-width: 0 !important;
  }
}

/* Días atraso detallado: indicadores visuales */
.dias-atraso-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  padding:0.15rem 0.55rem;
  border-radius:9999px;
  font-size:0.75rem;
  font-weight:700;
}
.dias-atraso-ok {
  color:#15803d;
  background:#dcfce7;
}
.dias-atraso-error {
  color:#dc2626;
  background:#fee2e2;
}
.dias-atraso-positive {
  color:#2563eb;
  background:#dbeafe;
}
.dias-atraso-neutral {
  color:#475569;
  background:#f1f5f9;
}


/* Ajuste espacio inferior externo pantalla detallado */
#detailsView {
  padding-bottom: 60px;
}

#detailsView .detalle-scroll-exterior {
  padding-bottom: 0;
}

/* Días atraso: colores condicionales */
#detailsView .dias-atraso-error {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .55rem;
  border-radius:9999px;
  background:#fee2e2;
  color:#dc2626;
}
#detailsView .dias-atraso-ok {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .55rem;
  border-radius:9999px;
  background:#dcfce7;
  color:#16a34a;
}
#detailsView .dias-atraso-positive {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .55rem;
  border-radius:9999px;
  background:#dbeafe;
  color:#2563eb;
}



/* Perfiles V109: las categorías vuelven a tener Ocultar / Lectura / Edición.
   Edición funciona como selector masivo; el JS mantiene en Lectura las opciones
   que son únicamente navegación/consulta. */
#perfilesView .profiles-permission-category-heading {
  overflow: visible !important;
}
#perfilesView .profiles-permission-column-labels[data-choice-count="3"] {
  display: grid !important;
  grid-template-columns: repeat(3, 42px) !important;
  column-gap: 1.08rem !important; /* 20% más que .9rem */
  margin-left: auto !important;
  margin-right: -0.25rem !important;
  max-width: none !important;
  overflow: visible !important;
  position: relative;
}
#perfilesView .profiles-permission-category-level-choices[data-choice-count="3"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1.08rem !important; /* mantiene alineación con la cabecera */
  overflow: visible !important;
  max-width: none !important;
}
@media (max-width: 760px) {
  #perfilesView .profiles-permission-column-labels[data-choice-count="3"] {
    grid-template-columns: repeat(3, 40px) !important;
    column-gap: .672rem !important; /* 20% más que .56rem */
    margin-right: -.1rem !important;
  }
  #perfilesView .profiles-permission-category-level-choices[data-choice-count="3"] {
    gap: .672rem !important;
  }
}

/* Depurar cartera V109: el contenedor principal pasa de max-w-6xl (72rem)
   a 86.4rem, exactamente 20% más ancho. Los bloques internos siguen ocupando
   el 100% disponible para conservar la simetría y crecer junto con él. */
#depurarCarteraView > .depurar-cartera-shell {
  width: 100% !important;
  max-width: 86.4rem !important;
}
#depurarCarteraView > .depurar-cartera-shell > div,
#depurarCarteraView > .depurar-cartera-shell > div > section,
#depurarCarteraView .depurar-table-scroll,
#depurarCarteraView .depurar-table-scroll > table {
  width: 100% !important;
}

/* =========================================================
   Perfiles V110: alineación exacta de Ocultar / Lectura / Edición
   y categorías sin lápiz cuando no existe ninguna acción editable.
   ========================================================= */
#perfilesView {
  --profile-permission-control-size: 42px;
  --profile-permission-column-gap: 1rem;
  --profile-permission-column-width: 158px;
}

/* La cabecera y los controles principales comparten exactamente la misma rejilla. */
#perfilesView .profiles-permission-category-heading {
  padding-right: 1rem !important;
  overflow: visible !important;
}
#perfilesView .profiles-permission-column-labels[data-choice-count="3"] {
  display: grid !important;
  grid-template-columns: repeat(3, var(--profile-permission-control-size)) !important;
  column-gap: var(--profile-permission-column-gap) !important;
  width: var(--profile-permission-column-width) !important;
  min-width: var(--profile-permission-column-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
  justify-items: center !important;
  align-items: center !important;
  overflow: visible !important;
}
#perfilesView .profiles-permission-column-labels[data-choice-count="3"] span {
  font-size: .62rem !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
}

/* Aunque una categoría tenga solo dos botones, reserva la tercera columna vacía.
   Así Ocultar y Lectura quedan debajo de sus textos y no se corren a la derecha. */
#perfilesView .profiles-permission-category-level-choices[data-choice-count="2"],
#perfilesView .profiles-permission-category-level-choices[data-choice-count="3"] {
  display: grid !important;
  grid-template-columns: repeat(3, var(--profile-permission-control-size)) !important;
  column-gap: var(--profile-permission-column-gap) !important;
  width: var(--profile-permission-column-width) !important;
  min-width: var(--profile-permission-column-width) !important;
  max-width: none !important;
  gap: 0 var(--profile-permission-column-gap) !important;
  justify-content: end !important;
  justify-items: center !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Las opciones internas usan la misma huella horizontal de tres columnas.
   Las filas binarias ocupan las dos primeras y dejan libre la tercera. */
#perfilesView .profiles-permission-subcategory-row,
#perfilesView .profiles-permission-option-row {
  padding-right: 1rem !important;
}
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group,
#perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
  display: grid !important;
  grid-template-columns: repeat(3, var(--profile-permission-control-size)) !important;
  column-gap: var(--profile-permission-column-gap) !important;
  width: var(--profile-permission-column-width) !important;
  min-width: var(--profile-permission-column-width) !important;
  max-width: var(--profile-permission-column-width) !important;
  flex: 0 0 var(--profile-permission-column-width) !important;
  gap: 0 var(--profile-permission-column-gap) !important;
  justify-content: end !important;
  justify-items: center !important;
  align-items: center !important;
}
#perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

@media (max-width: 760px) {
  #perfilesView {
    --profile-permission-control-size: 40px;
    --profile-permission-column-gap: .72rem;
    --profile-permission-column-width: 143px;
  }
  #perfilesView .profiles-permission-category-heading {
    padding-right: .65rem !important;
  }
  #perfilesView .profiles-permission-column-labels[data-choice-count="3"] span {
    font-size: .54rem !important;
  }
  #perfilesView .profiles-permission-subcategory-row,
  #perfilesView .profiles-permission-option-row {
    padding-right: .65rem !important;
  }
}

/* =========================================================
   Depurar cartera V110: salida real del límite del .container padre.
   En escritorio ocupa prácticamente todo el viewport para mostrar muchas
   más columnas antes de necesitar desplazamiento horizontal.
   ========================================================= */
@media (min-width: 900px) {
  #depurarCarteraView > .depurar-cartera-shell {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 24px), 100rem) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #depurarCarteraView > .depurar-cartera-shell > div,
  #depurarCarteraView > .depurar-cartera-shell > div > section,
  #depurarCarteraView .depurar-table-scroll {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #depurarCarteraView .depurar-table-scroll {
    scrollbar-gutter: auto !important;
  }
}

@media (max-width: 899.98px) {
  #depurarCarteraView > .depurar-cartera-shell {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
  }
}

/* =========================================================
   V111 - ajuste fino solicitado
   - Depurar cartera: un poco menos ancho que V110.
   - Subcategorías: controles contenidos y alineados dentro de su fila.
   ========================================================= */

/* La cápsula de las subcategorías conserva la misma huella horizontal que
   las columnas superiores, pero su padding y borde cuentan DENTRO del ancho.
   Esto evita que los botones/cápsula se desplacen fuera del contenedor. */
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group {
  box-sizing: border-box !important;
  width: var(--profile-permission-column-width) !important;
  min-width: var(--profile-permission-column-width) !important;
  max-width: var(--profile-permission-column-width) !important;
  flex: 0 0 var(--profile-permission-column-width) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-self: end !important;
}

/* La propia fila calcula el padding dentro del ancho disponible y el bloque
   de texto puede encogerse antes de empujar los controles hacia afuera. */
#perfilesView .profiles-permission-subcategory-row {
  box-sizing: border-box !important;
}
#perfilesView .profiles-permission-subcategory-row .profiles-permission-copy {
  min-width: 0 !important;
}

/* Depurar cartera: V110 quedaba casi pegado a los bordes del viewport.
   Se reduce ligeramente, manteniéndolo bastante más ancho que el diseño
   original para seguir mostrando más columnas sin scroll horizontal. */
@media (min-width: 900px) {
  #depurarCarteraView > .depurar-cartera-shell {
    width: min(calc(100vw - 72px), 94rem) !important;
    max-width: none !important;
  }
}

/* =========================================================
   V112 - corrección definitiva de alineación de subcategorías
   y ajuste de ancho de Depurar cartera.
   ========================================================= */

/*
 * SUBCATEGORÍAS
 * La rejilla superior mide exactamente 158px (3x42px + 2x16px).
 * La cápsula anterior añadía padding + borde dentro de esos 158px,
 * reduciendo el área útil de la grid y desplazando los botones a la izquierda.
 * Aquí la rejilla vuelve a medir exactamente lo mismo que la cabecera.
 */
#perfilesView .profiles-permission-subcategory-row {
  padding-right: .25rem !important;
}

#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group,
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="2"],
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="3"] {
  display: grid !important;
  grid-template-columns: repeat(3, var(--profile-permission-control-size)) !important;
  column-gap: var(--profile-permission-column-gap) !important;
  width: var(--profile-permission-column-width) !important;
  min-width: var(--profile-permission-column-width) !important;
  max-width: var(--profile-permission-column-width) !important;
  flex: 0 0 var(--profile-permission-column-width) !important;
  box-sizing: content-box !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 var(--profile-permission-column-gap) !important;
  justify-content: end !important;
  justify-items: center !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Dos permisos ocupan las columnas Ocultar y Lectura; la tercera queda vacía
   exclusivamente para conservar la alineación con la cabecera. */
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="2"] > .profiles-permission-choice:nth-child(1) {
  grid-column: 1 !important;
}
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="2"] > .profiles-permission-choice:nth-child(2) {
  grid-column: 2 !important;
}

/* Evita que reglas de modo oscuro reconstruyan la cápsula eliminada. */
.dark #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* DEPURAR CARTERA
 * Menos ancho que V110/V111: conserva más espacio que el diseño original,
 * pero recupera márgenes laterales visibles en escritorio.
 */
@media (min-width: 900px) {
  #depurarCarteraView > .depurar-cartera-shell {
    width: min(calc(100vw - 180px), 86rem) !important;
    max-width: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* =========================================================
   V113 - restaurar cápsula gris en subcategorías SIN alterar
   la rejilla de alineación Ocultar / Lectura / Edición.
   ========================================================= */
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group,
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="2"],
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="3"] {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* La cápsula es puramente visual: no añade padding/borde al grid y por eso
   no mueve ni un píxel los botones. */
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  height: 52px;
  border-radius: 9999px;
  background: rgba(241, 245, 249, .92);
  box-shadow: inset 0 0 0 1px #dbe5f1, inset 0 1px 2px rgba(15, 23, 42, .035);
  pointer-events: none;
}

/* Si solo existen Ocultar/Lectura, la cápsula abraza únicamente esos dos
   botones. La tercera columna sigue existiendo solo para la alineación. */
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="2"]::before {
  left: -4px;
  width: calc((var(--profile-permission-control-size) * 2) + var(--profile-permission-column-gap) + 8px);
}

/* Si la subcategoría sí admite Edición, la cápsula cubre las tres columnas. */
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group[data-choice-count="3"]::before {
  left: -4px;
  width: calc((var(--profile-permission-control-size) * 3) + (var(--profile-permission-column-gap) * 2) + 8px);
}

#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice {
  position: relative !important;
  z-index: 1 !important;
}

.dark #perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group::before {
  background: rgba(15, 23, 42, .72);
  box-shadow: inset 0 0 0 1px #334155, inset 0 1px 2px rgba(0, 0, 0, .18);
}


  /* Ajuste de jerarquía visual de permisos: categoría > subcategoría > opción */
  #perfilesView .profiles-permission-subcategory-row{
    padding-right: 1.5rem;
  }
  #perfilesView .profiles-permission-option-row{
    padding-right: 3rem;
  }
  #depurarCarteraView .depurar-table-scroll{
    max-width: 86rem;
    margin-left:auto;
    margin-right:auto;
  }

/* Ajuste solicitado: desplazamiento horizontal de permisos por nivel */
#perfilesView .profiles-permission-subcategory-row .profiles-permission-choice-group {
  transform: translateX(-20px) !important;
}

#perfilesView .profiles-permission-option-row .profiles-permission-choice-group {
  transform: translateX(-40px) !important;
}

#tueni-photo-viewer{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;pointer-events:none;transition:.25s}
#tueni-photo-viewer.open{opacity:1;pointer-events:auto}
#tueni-photo-viewer .tueni-photo-full{max-width:92vw;max-height:90vh;border-radius:12px;object-fit:contain;transform:translate(calc(var(--from-x,0px) - 50vw + var(--from-w,0px)/2),calc(var(--from-y,0px) - 50vh + var(--from-h,0px)/2)) scale(calc(var(--from-w,100px) / max(1px, 92vw)),calc(var(--from-h,100px) / max(1px, 90vh)));opacity:.7;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
#tueni-photo-viewer.open.animate .tueni-photo-full{transform:translate(0,0) scale(1);opacity:1}
.tueni-photo-close{position:absolute;right:24px;top:18px;width:42px;height:42px;border-radius:50%;font-size:32px;background:#fff;color:#111;border:0;z-index:2}

/* ============================================================
   PANTALLA: ADMINISTRAR SOCIEDADES + MIEMBROS
   Usa la tipografía global (Nunito), igual que Permisos/General.
   ============================================================ */
.soc-ico-18{ font-size:18px; }
.soc-ico-20{ font-size:20px; }

/* Botones compartidos (sin sombra) */
.soc-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:1rem; background:#00AD57; color:#fff; font-weight:700;
  font-size:.85rem; padding:.6rem 1.05rem; border:0; cursor:pointer;
  transition:background-color 140ms ease, transform 140ms ease;
}
.soc-btn-primary:hover{ background:#049a4c; }
.soc-btn-primary:active{ transform:scale(.98); }
.soc-btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.soc-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:1rem; border:1px solid #e2e8f0; background:#fff; color:#475569;
  font-weight:600; font-size:.85rem; padding:.55rem 1rem; cursor:pointer;
}
.soc-btn-ghost:hover{ background:#f1f5f9; }
/* "Nueva Unidad": contorno verde (del color de "Nueva Sociedad") */
#sociedadesNuevaUnidadBtn.soc-btn-ghost{ border-color:#00AD57; color:#00AD57; }
#sociedadesNuevaUnidadBtn.soc-btn-ghost:hover{ background:#ecfdf5; }

/* Inputs de los modales (misma estética que el modal de venta) */
.soc-input{
  display:block; width:100%; border-radius:1rem; border:1px solid #e2e8f0; background:#fff;
  padding:.75rem 1rem; font-size:.875rem; color:#0f172a;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:border-color 140ms ease, box-shadow 140ms ease;
}
.soc-input:focus{
  outline:none; border-color:#00AD57; box-shadow:0 0 0 3px rgba(0,173,87,.14);
}
/* Campo con validación fallida (p. ej. código de longitud incorrecta) */
.soc-input.is-invalid,
.soc-input.is-invalid:focus{
  border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.16);
}
/* Texto descriptivo bajo un campo (p. ej. longitud exacta de los códigos) */
.soc-field-hint{ margin-top:.35rem; font-size:.78rem; color:#64748b; }
.soc-field-hint.is-invalid{ color:#ef4444; }
/* z-index explícito: `z-[..]` no está en tailwind-production.css → el modal
   quedaría detrás de #dashboard (z-index:10). */
#transferirMiembroModal{ z-index:95; }

/* Transición sutil de arriba hacia abajo al entrar en cualquier pantalla del topbar.
   Sin fill-mode: al terminar no queda ningún transform residual (no rompe modales
   position:fixed dentro de la vista). */
@keyframes tueniViewIn {
  from { opacity:0; transform:translateY(-14px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Sin will-change: dejarlo permanente crea una capa de composición que vuelve
   el texto borroso. El JS quita la clase en animationend, así no queda residuo. */
.tueni-view-in{ animation:tueniViewIn 260ms cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce){ .tueni-view-in{ animation:none; } }

/* -------- Desplegable plegable (estética del modal de venta) -------- */
.soc-dd{ position:relative; }
.soc-dd-btn{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%;
  border-radius:1rem; border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a;
  padding:.75rem 1rem; font-size:.875rem; text-align:left; cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.05); transition:border-color 140ms ease, box-shadow 140ms ease;
}
.soc-dd-btn:hover{ border-color:#cbd5e1; }
.soc-dd-btn[aria-expanded="true"]{ border-color:#00AD57; box-shadow:0 0 0 3px rgba(0,173,87,.14); }
.soc-dd-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.soc-dd-label.is-placeholder{ color:#94a3b8; }
.soc-dd-caret{ font-size:20px; color:#64748b; flex-shrink:0; transition:transform 140ms ease; }
.soc-dd-btn[aria-expanded="true"] .soc-dd-caret{ transform:rotate(180deg); }
.soc-dd.is-disabled .soc-dd-btn{ opacity:.55; cursor:not-allowed; background:#f1f5f9; }

.soc-dd-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
  box-shadow:0 18px 40px rgba(15,23,42,.16); padding:.4rem; overflow:hidden;
}
.soc-dd-search-wrap{ position:relative; padding:.15rem .15rem .35rem; }
.soc-dd-search-wrap .material-symbols-outlined{
  position:absolute; left:.65rem; top:50%; transform:translateY(-60%); font-size:18px; color:#94a3b8;
}
.soc-dd-search{
  width:100%; border:1px solid #e2e8f0; border-radius:.75rem; background:#fff;
  padding:.5rem .6rem .5rem 2.1rem; font-size:.85rem; color:#0f172a; outline:none;
}
.soc-dd-search:focus{ border-color:#00AD57; box-shadow:0 0 0 3px rgba(0,173,87,.12); }
.soc-dd-list{ list-style:none; margin:0; padding:0; max-height:240px; overflow-y:auto; overscroll-behavior:contain; }
.soc-dd-list li{
  padding:.55rem .7rem; border-radius:.6rem; font-size:.85rem; color:#334155; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.soc-dd-list li:hover, .soc-dd-list li.is-active{ background:#f1f5f9; }
.soc-dd-list li.is-selected{ background:#eefdf4; color:#00AD57; font-weight:700; }
.soc-dd-empty{ padding:.7rem; text-align:center; font-size:.8rem; color:#94a3b8; }

/* Grilla de tarjetas de sociedad */
.soc-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.25rem;
}
@media (max-width:640px){ .soc-grid{ grid-template-columns:1fr; } }

.soc-card{
  position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:1.25rem;
  padding:1.25rem; display:flex; flex-direction:column; gap:.9rem;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.soc-card:hover{ border-color:#cbd5e1; box-shadow:0 14px 32px rgba(15,23,42,.09); }
.soc-card.is-editing{ border-color:#cbd5e1; }

/* Reordenar sociedades (drag & drop estilo iOS: las demás se corren en vivo) */
.soc-drag-handle{
  position:absolute; top:.55rem; left:.55rem; width:26px; height:26px; display:inline-flex;
  align-items:center; justify-content:center; color:#94a3b8; cursor:grab; border-radius:.5rem;
  touch-action:none; z-index:2;
}
.soc-drag-handle:hover{ color:#475569; background:#f1f5f9; }
.soc-drag-handle:active{ cursor:grabbing; }
.soc-drag-handle .material-symbols-outlined{ font-size:20px; }
.soc-card[draggable="true"]{ padding-left:2.4rem; }
/* Mientras se reordena, las tarjetas animan su cambio de posición (FLIP). */
.soc-grid.is-reordering .soc-card{ transition:transform 230ms cubic-bezier(.2,.7,.3,1); }
.soc-card.soc-dragging{ opacity:.3; }
.soc-card.soc-dragging .soc-drag-handle{ cursor:grabbing; }

.soc-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.soc-icon{
  width:52px; height:52px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.soc-icon .material-symbols-outlined{ font-size:26px !important; line-height:1 !important; }
.soc-card-actions{ display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
/* Botones de acción: contenedor circular gris muy tenue */
.soc-icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9999px; border:0; background:#f1f5f9; color:#64748b; cursor:pointer;
  transition:background-color 120ms ease, color 120ms ease;
}
.soc-icon-btn .material-symbols-outlined{ font-size:20px !important; line-height:1 !important; }
.soc-icon-btn:hover{ background:#e2e8f0; color:#334155; }
.soc-icon-btn.soc-danger:hover{ background:#fee2e2; color:#dc2626; }
.soc-icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
.soc-icon-btn:disabled:hover{ background:#f1f5f9; color:#64748b; }

/* Acciones de la tabla de miembros */
.soc-miembro-acciones{ display:flex; align-items:center; justify-content:flex-end; gap:.4rem; }
.soc-miembro-acciones .soc-icon-btn{ width:33px; height:33px; }
.soc-miembro-acciones .soc-icon-btn .material-symbols-outlined{ font-size:18px !important; line-height:1 !important; }
.soc-miembros-tabla td:last-child, .soc-miembros-tabla th:last-child{ white-space:nowrap; }

/* Flecha "volver" bajo el título de la sociedad */
.soc-back-btn{
  display:inline-flex; align-items:center; gap:.4rem; border:0; background:transparent;
  padding:0; cursor:pointer; color:#00AD57; font-weight:600; font-size:.9rem;
}
.soc-back-btn:hover{ color:#049a4c; }
.soc-back-btn .material-symbols-outlined{ font-size:20px !important; line-height:1 !important; }

.soc-card-name{
  font-weight:750; font-size:1.15rem; color:#0f172a; line-height:1.25; cursor:pointer;
  border:0; background:transparent; text-align:left; padding:0; width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.soc-card-name:hover{ color:#00AD57; }
.soc-name-input{
  font-weight:750; font-size:1.1rem; color:#0f172a; border:1px solid #00AD57; border-radius:.6rem;
  padding:.25rem .5rem; width:100%; outline:none;
}
.soc-card-meta{ border-top:1px solid #eef2f7; padding-top:.8rem; display:flex; flex-direction:column; gap:.45rem; }
.soc-card-meta-row{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.soc-card-meta-label{ font-size:.8rem; color:#64748b; }
.soc-card-meta-value{ font-size:.85rem; font-weight:700; color:#1e293b; text-align:right; }

.soc-empty-state{
  grid-column:1/-1; border:1px dashed #cbd5e1; border-radius:1.25rem;
  padding:2.5rem 1rem; color:#94a3b8; font-size:.9rem; text-align:center;
}

/* Breadcrumb + título de la sub-pantalla */
.soc-breadcrumb{ display:flex; align-items:center; gap:.35rem; font-size:.85rem; color:#64748b; }
.soc-breadcrumb a{ color:#00AD57; font-weight:600; cursor:pointer; }
.soc-breadcrumb a:hover{ text-decoration:underline; }
.soc-breadcrumb-sep{ font-size:18px; color:#cbd5e1; }

/* Tabla de miembros: más ancha y con más aire horizontal */
.soc-miembros-scroll{ border-radius:1rem; }
.soc-miembros-tabla{ border-collapse:separate; border-spacing:0; width:100%; }
.soc-miembros-tabla thead th{
  background:#f8fafc; color:#64748b; font-size:.7rem; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; text-align:left; padding:.85rem 1.5rem; border-bottom:1px solid #e2e8f0;
  white-space:nowrap;
}
.soc-miembros-tabla thead th.soc-col-acciones{ text-align:right; }
.soc-miembros-tabla tbody td{
  padding:1rem 1.5rem; border-bottom:1px solid #eef2f7; font-size:.875rem; color:#334155;
  vertical-align:middle; white-space:nowrap;
}
.soc-miembros-tabla tbody td:first-child{ white-space:normal; }
.soc-miembros-tabla tbody tr:last-child td{ border-bottom:0; }
.soc-miembros-tabla tbody tr:hover td{ background:rgba(248,250,252,.9); }
.soc-miembro-cell{ display:flex; align-items:center; gap:.7rem; }
.soc-avatar{
  width:34px; height:34px; border-radius:9999px; background:#e0ebff; color:#2563eb;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0;
}
.soc-miembro-alias{ font-weight:700; color:#1e293b; }

/* ---- Entrada "Administrar sociedades" dentro del selector de sociedades ---- */
.sociedad-switcher-menu .sociedad-manage-divider{
  height:1px; background:#e2e8f0; margin:.35rem .1rem; border:0;
}
.sociedad-switcher-menu .sociedad-manage-item{
  width:100%; display:flex; align-items:center; gap:.55rem; border:0; background:transparent;
  color:#1e3a8a; border-radius:.75rem; padding:.6rem .72rem; font-size:.82rem; font-weight:700;
  text-align:left; white-space:nowrap; cursor:pointer;
}
.sociedad-switcher-menu .sociedad-manage-item:hover{ background:#eef2ff; color:#1e3a8a; }
.sociedad-switcher-menu .sociedad-manage-item .material-symbols-outlined{ font-size:18px; }

/* --- Campana de notificaciones (topbar) --- */
.notif-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:transparent; color:#64748b;
  border-radius:.5rem; cursor:pointer; transition:background-color 120ms ease, color 120ms ease;
}
.notif-btn:hover{ background:#f1f5f9; color:#334155; }
.notif-btn .material-symbols-outlined{ font-size:24px; line-height:1; }
.notif-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:9999px; background:#ef4444; color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
/* app-custom.css se carga después de tailwind: sin esto .hidden no oculta el globo */
.notif-badge.hidden{ display:none; }
.notif-menu{
  position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:88vw;
  max-height:420px; overflow:auto; border:1px solid #e2e8f0; border-radius:1rem;
  background:#fff; box-shadow:0 16px 38px rgba(15,23,42,.16); padding:.4rem; z-index:10050;
}
.notif-menu-title{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#94a3b8; padding:.5rem .6rem .35rem;
}
.notif-card{
  width:100%; display:flex; gap:.6rem; align-items:flex-start; text-align:left;
  padding:.7rem .6rem; border:0; background:transparent; border-radius:.75rem; cursor:pointer;
  border-bottom:1px solid #f1f5f9;
}
.notif-card:last-child{ border-bottom:0; }
.notif-card:hover{ background:#f8fafc; }
.notif-card .material-symbols-outlined{ font-size:20px; line-height:1; color:#2563eb; flex-shrink:0; margin-top:1px; }
.notif-card[data-anchor="movs"] .material-symbols-outlined{ color:#b45309; }
.notif-card-body{ display:flex; flex-direction:column; min-width:0; }
.notif-card-title{ font-weight:700; font-size:.85rem; color:#1e293b; }
.notif-card-text{ font-size:.8rem; color:#64748b; margin-top:.1rem; white-space:normal; }
.notif-empty{ padding:1.5rem .6rem; text-align:center; color:#94a3b8; font-size:.82rem; }

/* --- Animación sutil de despliegue/contracción de las cortinas --- */
@keyframes tueniMenuIn  { from { opacity:0; } to { opacity:1; } }
@keyframes tueniMenuOut { from { opacity:1; } to { opacity:0; } }
@keyframes tueniNotifIn  { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes tueniNotifOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-6px); } }

.sociedad-switcher-menu:not(.hidden){ animation:tueniMenuIn 140ms ease; }
.sociedad-switcher-menu.is-closing{ animation:tueniMenuOut 140ms ease forwards; }
.notif-menu:not(.hidden){ animation:tueniNotifIn 150ms cubic-bezier(.22,.61,.36,1); }
.notif-menu.is-closing{ animation:tueniNotifOut 140ms ease forwards; }

/* --- Desvanecido fluido de inicio / cierre de sesión (estilo Windows) --- */
@keyframes tueniFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes tueniFadeIn  { from { opacity:0; } to { opacity:1; } }
.tueni-fade-out{ animation:tueniFadeOut 420ms cubic-bezier(.4,0,.2,1) forwards; pointer-events:none; }
.tueni-fade-in{ animation:tueniFadeIn 480ms cubic-bezier(.4,0,.2,1) both; }

@media (prefers-reduced-motion: reduce){
  .sociedad-switcher-menu:not(.hidden), .sociedad-switcher-menu.is-closing,
  .notif-menu:not(.hidden), .notif-menu.is-closing,
  .tueni-fade-out, .tueni-fade-in{ animation:none; }
  .soc-grid.is-reordering .soc-card{ transition:none; }
}

/* --- Tabla "clientes detallado" (desplegable en Clientes) --- */
.cdet-toggle{
  transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.cdet-toggle:active{ transform:scale(.9); }
.cdet-toggle-caret{ transition:transform 200ms cubic-bezier(.22,.61,.36,1); }
.cdet-toggle.is-open{ color:#00AD57; border-color:#bbf7d0; background:#f0fdf4; }
.cdet-toggle.is-open .cdet-toggle-caret{ transform:rotate(180deg); }
@keyframes cdetPulse{ 0%{ transform:scale(1); } 35%{ transform:scale(.86); } 70%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.cdet-toggle.cdet-pulse{ animation:cdetPulse 320ms ease; }

#clientesTablaWrap{ animation:tueniNotifIn 180ms cubic-bezier(.22,.61,.36,1); }

/* El filtro de Unidad y la lista del buscador deben quedar SIEMPRE por encima
   del encabezado fijo de la tabla (thead sticky).
   #clientesTablaWrap es descendiente de #clientesFilterRow, así que encerramos
   toda la tabla en su propio contexto de apilado con z-index bajo: cualquier
   z-index interno (incluido el thead sticky) queda confinado por debajo de las
   cortinas del filtro/buscador, que se apilan en z-index:60. */
#clientesTablaWrap{ position:relative; z-index:0; }
#clientesResults,
#clientesUnidadDesktopPanel,
#clientesUnidadMobileMenu{ z-index:60; }

.cdet-card{
  background:#fff; border:1px solid #e9edf3; border-radius:1rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 28px rgba(15,23,42,.05);
  overflow:hidden; padding:.9rem;
}
@media (max-width:640px){ .cdet-card{ padding:.55rem; } }

/* +20% de altura respecto a la versión anterior (70vh -> 84vh) */
.cdet-scroll{ overflow:auto; max-height:84vh; border-radius:.7rem; border:1px solid #eef2f7; }
.cdet-table{
  width:100%; min-width:960px; border-collapse:separate; border-spacing:0;
  font-size:.82rem; color:#334155;
}
/* Encabezado: fijo al hacer scroll y con la misma altura que Cifras Históricas */
.cdet-table thead th{
  position:sticky; top:0; background:#f8fafc; z-index:20;
  height:50px; box-sizing:border-box;
  text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#475569; white-space:nowrap;
  padding:0 1.1rem; border-bottom:1px solid #e2e8f0;
  box-shadow:inset 0 -1px 0 #e2e8f0;
}
/* Filtro/orden en el propio encabezado (estilo columna "Tipo" de Cifras) */
.cdet-th-filter{
  display:inline-flex; align-items:center; gap:.3rem; border:0; background:transparent;
  color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit;
  padding:.25rem .35rem; margin:-.25rem -.35rem; border-radius:.5rem; cursor:pointer;
  transition:background-color 120ms ease, color 120ms ease;
}
.cdet-th-filter:hover{ background:#eef2f7; }
.cdet-th-filter .material-symbols-outlined{ font-size:16px; }
.cdet-th-filter.is-active{ color:#00AD57; }
.cdet-th-filter.is-active .material-symbols-outlined{ color:#00AD57; }

/* Cortina de filtro (reusa .dv-type-menu) */
.cdet-fm{ padding:.55rem; display:grid; gap:.15rem; min-width:210px; }
.cdet-fm-opt{
  width:100%; display:flex; align-items:center; gap:.5rem; border:0; background:transparent;
  border-radius:.6rem; padding:.55rem .7rem; text-align:left; font-size:.8rem; font-weight:700;
  color:#334155; cursor:pointer;
}
.cdet-fm-opt:hover{ background:rgba(0,173,87,.09); color:#008f48; }
.cdet-fm-opt.is-sel{ color:#00AD57; }
.cdet-fm-opt .material-symbols-outlined{ font-size:18px; margin-left:auto; opacity:0; }
.cdet-fm-opt.is-sel .material-symbols-outlined{ opacity:1; }
.cdet-fm-range{ display:flex; align-items:center; gap:.45rem; padding:.35rem .4rem; }
.cdet-fm-range input{
  width:78px; height:34px; border:1px solid #e2e8f0; border-radius:.55rem; background:#fff;
  padding:0 .55rem; font-size:.82rem; text-align:center; color:#0f172a; outline:none;
}
.cdet-fm-range input:focus{ border-color:#00AD57; box-shadow:0 0 0 3px rgba(0,173,87,.12); }
.cdet-fm-range span{ color:#94a3b8; font-size:.8rem; }
.cdet-fm-actions{ display:flex; gap:.4rem; padding:.4rem .4rem .15rem; }
.cdet-fm-btn{
  flex:1; height:32px; border-radius:.55rem; border:1px solid #e2e8f0; background:#fff;
  font-size:.76rem; font-weight:800; color:#475569; cursor:pointer;
}
.cdet-fm-btn.is-primary{ background:#00AD57; border-color:#00AD57; color:#fff; }
.cdet-fm-btn:active{ transform:scale(.97); }
.cdet-table tbody td{
  padding:.8rem 1.1rem; border-bottom:1px solid #f2f5f9; white-space:nowrap;
  vertical-align:middle;
}
.cdet-table tbody tr:last-child td{ border-bottom:0; }
.cdet-table tbody tr{ transition:background-color 110ms ease; }
.cdet-table tbody tr:hover td{ background:#f8fafc; }
/* "Nombre del cliente" ahora es la 3.ª columna */
.cdet-table tbody td:nth-child(3){ font-weight:600; color:#1e293b; white-space:normal; }

/* Fila "Mostrar más" */
.cdet-more-row td{ padding:.9rem 1.1rem !important; text-align:center; background:#fff; }
.cdet-more-btn{
  display:inline-flex; align-items:center; gap:.55rem; min-width:170px; justify-content:center;
  height:38px; padding:0 1.1rem; border-radius:9999px; border:1.5px solid #cbd5e1;
  background:#fff; color:#334155; font-weight:800; font-size:.8rem; cursor:pointer;
  transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}
.cdet-more-btn:hover{ background:#00AD57; border-color:#00AD57; color:#fff; }
.cdet-more-btn:active{ transform:scale(.97); }
.cdet-more-btn:disabled{ opacity:.65; cursor:not-allowed; }
.cdet-more-count{ font-weight:600; font-size:.72rem; color:#94a3b8; }
.cdet-more-btn:hover .cdet-more-count{ color:rgba(255,255,255,.85); }

.cdet-estado{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.15rem .6rem; border-radius:9999px; font-size:.72rem; font-weight:700;
  text-transform:capitalize;
}

.cdet-state{ padding:2rem 1rem; text-align:center; color:#94a3b8; font-size:.85rem; }
.cdet-state.is-loading{
  display:flex; align-items:center; justify-content:flex-start; gap:.6rem;
  padding:1.15rem 1.1rem; text-align:left; color:#475569; font-weight:500;
}
.cdet-spin{
  font-size:20px; color:#00AD57; animation:cdetSpin 900ms linear infinite;
}
@keyframes cdetSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .cdet-toggle.cdet-pulse{ animation:none; }
  .cdet-spin{ animation-duration:1.6s; }
}