/* Pantallas de listado (Solicitudes, Horas extras, Aprobaciones, Cierre): una sola estructura para todos los perfiles.
   Piezas: encabezado · ventana en una línea · filtros · burbujas · barra de acciones · tabla. Ver web/js/listado.js. */

/* Encabezado: título y subtítulo de una línea */
.ls-cab { margin-bottom: 10px; }
.ls-cab h1 { margin: 0; }
.ls-sub { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aviso de la ventana, compacto y en una línea */
.rl-ventana { padding: 5px 12px; font-size: 0.8125rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Totales: burbujas, siempre iguales */
.ls-burbujas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ls-bub { background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; padding: 3px 12px; font-size: 0.8125rem; white-space: nowrap; color: var(--texto-2); }
.ls-bub b { color: var(--azul); }

/* Barra de acciones: una sola fila, todos los botones del mismo alto */
.ls-acciones { display: flex; flex-wrap: nowrap; gap: 8px 10px; align-items: center; margin: 0 0 12px; }
.ls-der { margin-left: auto; position: relative; }
.rl-pagina .btn.ls-btn, .ls-btn { min-height: 40px; height: 40px; padding: 0 16px; font-size: 0.9375rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; border-radius: 8px; cursor: pointer; box-sizing: border-box; }
.ls-btn.ls-sec { border: 1px solid var(--linea-fuerte); }
.ls-mas { position: relative; }
.ls-mas > summary { list-style: none; }
.ls-mas > summary::-webkit-details-marker { display: none; }
.ls-mas > summary::after { content: "▾"; margin-left: 6px; font-size: 0.75rem; }
.ls-mas-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: 10px; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.14); padding: 4px; display: flex; flex-direction: column; }
.ls-mas-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 0.875rem; color: var(--texto); text-decoration: none; cursor: pointer; }
.ls-mas-item:hover, .ls-mas-item:focus-visible { background: var(--tinte); }

/* Tabla: filas compactas y del mismo alto */
.ls-tabla-caja { border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--superficie); margin-bottom: 12px; }
.tabla.ls-tabla { table-layout: fixed; width: 100%; }
.ls-tabla th, .ls-tabla td { padding: 4px 10px; height: 48px; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tabla th[scope="col"]:first-child, .ls-tabla thead th:first-child { position: static; min-width: 0; max-width: none; border-right: 0; z-index: auto; }
.ls-tabla thead th { position: static; height: 38px; background: #F9FAFB; color: var(--texto-2); font-weight: 600; vertical-align: middle; }
.ls-tabla .ls-c-sel { width: 36px; padding-right: 0; }
.ls-tabla .ls-c-fecha { width: 88px; }
.ls-tabla .ls-c-num { width: 72px; text-align: right; }
.ls-tabla .ls-c-clip { width: 84px; }
.ls-tabla .ls-c-tipo { width: 118px; }
.ls-tabla .ls-c-estado { width: 200px; }
.ls-tabla .ls-c-acc { width: 262px; text-align: right; }
.ls-tabla.ls-acc-corta .ls-c-acc { width: 150px; }
.ls-tabla .ls-c-colab { width: 200px; }
.ls-tabla .ls-c-fija { width: 124px; }
.ls-1l { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-colab { display: flex; flex-direction: column; min-width: 0; }
.ls-colab small, .ls-estado small { color: var(--texto-3); font-size: 0.6875rem; line-height: 1.25; font-weight: 400; }
.ls-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.ls-items { display: flex; gap: 6px; overflow: hidden; flex-wrap: nowrap; }
.ls-items .rl-item-chip { flex: none; }
.ls-clips, .ls-acc { display: inline-flex; gap: 8px; align-items: center; }
.ls-acc { flex-wrap: nowrap; }
.ls-tabla tr.ls-grupo td { background: var(--tinte); height: 40px; font-size: 0.875rem; }
.ls-tabla tr.ls-expandir td { height: auto; white-space: normal; padding: 6px 12px 12px; background: #FCFCFD; }
.ls-grupo-cab { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.ls-tabla .btn, .ls-grupo-cab .rl-pagina .btn.ls-btn, .rl-pagina .ls-grupo-cab .btn.ls-btn { min-height: 32px; height: 32px; padding: 0 12px; font-size: 0.8125rem; }

/* Celular: cada fila es una tarjeta, sin scroll horizontal */
@media (max-width: 640px) {
  .ls-acciones { flex-wrap: wrap; }
  .ls-btn { flex: 1 1 auto; }
  .ls-der { margin-left: 0; flex: 1 1 auto; }
  .ls-der .ls-mas > summary { width: 100%; }
  .ls-tabla-caja { border: 0; background: transparent; overflow: visible; }
  .ls-tabla, .ls-tabla tbody, .ls-tabla tr, .ls-tabla td { display: block; width: auto; }
  .ls-tabla thead { display: none; }
  .ls-tabla tr[data-fila] { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; }
  .ls-tabla tr.ls-grupo { margin: 10px 0 4px; }
  .ls-tabla tr.ls-grupo td, .ls-tabla tr.ls-expandir td { padding: 6px 4px; background: transparent; }
  .ls-tabla td, .ls-tabla .ls-c-fecha, .ls-tabla .ls-c-num, .ls-tabla .ls-c-estado, .ls-tabla .ls-c-acc, .ls-tabla .ls-c-clip, .ls-tabla .ls-c-sel, .ls-tabla .ls-c-tipo, .ls-tabla .ls-c-fija, .ls-tabla .ls-c-colab { width: auto; height: auto; padding: 2px 0; text-align: left; white-space: normal; }
  .ls-tabla td { border: 0; }
  .ls-tabla td:not(.ls-c-primera):not(.ls-c-estado):not(.ls-c-acc):not(.ls-c-sel) { display: flex; gap: 6px; align-items: baseline; }
  .ls-tabla td .ls-1l { display: inline-block; max-width: 100%; }
  .ls-tabla td:empty { display: none; }
  .ls-tabla td:not(.ls-c-primera):not(.ls-c-estado):not(.ls-c-acc):not(.ls-c-sel)::before { content: attr(data-label) ": "; color: var(--texto-3); font-size: 0.75rem; }
  .ls-tabla .ls-c-primera { font-size: 1rem; padding-bottom: 4px; }
  .ls-tabla .ls-c-acc { padding-top: 6px; }
  .ls-tabla .ls-c-acc .ls-acc { flex-wrap: wrap; }
  .ls-tabla .ls-c-sel { float: right; }
  .ls-items { flex-wrap: wrap; }
}
.ls-tabla small { color: var(--texto-3); font-size: 0.6875rem; line-height: 1.25; font-weight: 400; }