/* ============================================================================
 * moderno.css — dos ajustes puntuales sobre el tema
 *
 * Hubo una capa de refinamiento visual mas amplia (paleta nueva, tarjetas,
 * botones, formularios, dashboard y POS). Se retiro a peticion: cambiar el
 * acento obligaba a repasar demasiados sitios con colores en linea y el
 * conjunto quedaba descompensado.
 *
 * Queda solo lo que resuelve un problema concreto y no depende de cambiar la
 * paleta:
 *
 *   1. Los listados de DataTables, que no cabian en una pantalla de portatil.
 *   2. El menu lateral, que no indicaba en que seccion estabas.
 *
 * Se usa el morado propio del tema (#7c5cc4), NO uno nuevo, justamente para que
 * combine con todo lo que no se ha tocado.
 *
 * Todo va dentro de @media screen: los comprobantes se imprimen desde el
 * navegador y una sombra o un borde en una tabla impresa es basura en el papel.
 * ========================================================================= */

@media screen {

  :root {
    --m-acento:       #7c5cc4;   /* el del tema, sin cambios */
    --m-acento-suave: #f2eefb;   /* el mismo, muy diluido, para fondos de estado */
    --m-borde:        #e6e8f0;
    --m-texto-tenue:  #6e6b7b;   /* el gris que el propio tema usa en tablas */
    --m-radio-chico:  4px;
  }

  /* ── Listados densos ────────────────────────────────────────────────────── */

  /* El listado de ventas no entraba en una pantalla de portatil y habia que
     desplazarse en horizontal para leer una fila, que es lo que hace que un
     listado se sienta incomodo. Se aprieta solo lo que gestiona DataTables;
     los formularios y las tablas cortas se quedan como estaban. */
  .dataTables_wrapper table.dataTable {
    font-size: .8125rem;
  }

  .dataTables_wrapper table.dataTable th,
  .dataTables_wrapper table.dataTable td {
    padding: .45rem .5rem;
    vertical-align: middle;
  }

  .dataTables_wrapper table.dataTable thead th {
    font-size: .6875rem;
    letter-spacing: .03em;
  }

  /* Importes y fechas no deben partirse en dos lineas: al hacerlo la fila crece
     de alto y se pierde lo que se gana en ancho. */
  .dataTables_wrapper table.dataTable td {
    white-space: nowrap;
  }

  /* Vendedor y cliente si pueden partirse: son las unicas columnas de ancho
     variable, y dejarlas en una linea es lo que empujaba la tabla fuera de la
     pantalla. La clase la asigna columnDefs en sale/index.blade.php. */
  .dataTables_wrapper table.dataTable td.puede-partirse {
    white-space: normal;
  }

  /* Dentro de un listado denso no hace falta el mismo cuerpo. */
  .dataTables_wrapper table.dataTable .badge {
    font-size: .6875rem;
    padding: .25em .6em;
  }

  /* El menu de acciones ocupaba tanto como una columna de datos. */
  .dataTables_wrapper table.dataTable .btn {
    padding: .25rem .6rem;
    font-size: .8125rem;
  }

  @media (max-width: 767.98px) {
    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td { padding: .35rem .4rem; }
  }

  /* ── Menú lateral ───────────────────────────────────────────────────────── */

  /* El tema pinta el hover y la seccion activa con
     `background: var(--primary-bg-color)`, y esa variable NO SE DEFINE en
     ninguna parte del proyecto: se usa tres veces en custom-default.css y no
     hay ni una declaracion. `var()` sin valor ni respaldo no resuelve nada, asi
     que el fondo nunca se pintaba y lo unico que marcaba la seccion actual era
     el texto en morado. Con catorce submenus colapsables eso es muy poca senal.
     Definirla arregla las tres reglas de golpe, sin tocarlas. */
  :root          { --primary-bg-color: var(--m-acento-suave); }

  /* En oscuro el lila claro seria un parche de luz sobre el #283046 de la barra. */
  body.dark-mode { --primary-bg-color: rgba(255, 255, 255, .07); }

  .side-navbar li a {
    transition: background-color .12s ease, box-shadow .12s ease;
  }

  /* La seccion activa se marca ademas con una barra de acento a la izquierda:
     un color de texto obliga a comparar entre items, una barra se ve de un
     vistazo. Va como box-shadow interior y no como border para no alterar el
     padding del tema y que el texto no se desplace al activarse.
     La clase `active` la asigna el JS de layout/main.blade.php; el tema traia
     la regla pero nadie la ponia nunca. */
  .side-navbar li.active > a,
  .side-navbar li a[aria-expanded="true"] {
    box-shadow: inset 3px 0 0 var(--m-acento);
    font-weight: 600;
  }
}