/* ==========================================================================
   DATA TABLE — Tablas de datos reutilizables (estilo planilla / Excel-like)
   ==========================================================================
   Sistema de estilos nativos (sin Tailwind) para tablas de datos, compartido
   por toda la app. Estiliza SOLO la estructura de la tabla (rejilla, cabecera,
   filas, hover, ordenamiento) y NO el contenido de las celdas (imágenes,
   textos, enlaces, badges), que permanece primitivo.

   Colores vía tokens semánticos del tema (--color-*) → adaptan a modo oscuro.

   Estructura esperada:
     <div class="data-table">
       <div class="data-table__header">            (opcional)
         <h2 class="data-table__title">Título</h2>
       </div>
       <table>
         <thead>
           <tr><th class="is-right">Columna</th></tr>
         </thead>
         <tbody>
           <tr><td>Valor</td></tr>
         </tbody>
       </table>
     </div>
     <div class="pagination">...</div>             (ver abajo)

   Modificadores:
     .data-table--zebra      : filas alternadas (opt-in, mejora legibilidad)
     .data-table--scrollable : habilita scroll horizontal en tablas anchas
                               (ojo: un contenedor con overflow puede recortar
                               los menús desplegables de las filas).
     .is-right / .is-center  : alineación de th/td por columna (números, etc.)
   ========================================================================== */

.data-table {
  width: 100%;
  color: var(--color-secondary);
  font-size: 13px;
  line-height: 1.35;
}

/* Encabezado del bloque de tabla (título + acciones opcionales) */
.data-table__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.data-table__title {
  margin: 0;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Acciones en la misma línea que el título (spread content, lado derecho) */
.data-table__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Contenedor de acciones por fila (columna de acciones) */
.data-table__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Rejilla base: celdas con borde completo, estilo hoja de cálculo */
.data-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--color-border-subtle);
}

.data-table th,
.data-table td {
  padding: 7px 12px;
  border: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: middle;
}

/* Cabecera: fondo diferenciado y micro-tipografía (como el encabezado de una
   hoja de cálculo) */
.data-table thead th {
  background: var(--color-surface-input);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  user-select: none;
}

/* Enlaces de ordenamiento de la cabecera */
.data-table thead th a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.data-table thead th a:hover { color: var(--color-primary); }
.data-table thead th a svg { width: 12px; height: 12px; opacity: .5; flex: none; }
.data-table thead th a:hover svg { opacity: 1; }

/* Filas alternadas (opt-in): definidas antes del hover para que este gane con
   igual especificidad por orden de aparición */
.data-table--zebra tbody tr:nth-child(even) > td {
  background: color-mix(in srgb, var(--color-surface-input) 60%, var(--color-surface));
}

/* Fila de totales (tfoot) de tablas de reportes/agregaciones */
.data-table tfoot td {
  background: color-mix(in srgb, var(--color-surface-input) 60%, var(--color-surface));
  font-weight: 700;
  border-top: 2px solid var(--color-border-subtle);
}

/* Hover de fila: resaltado sutil acorde al tema */
.data-table tbody tr:hover > td {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

/* Scroll horizontal opt-in para tablas anchas */
.data-table--scrollable { overflow-x: auto; }

/* Alineaciones utilitarias por columna (th y td) */
.data-table .is-right { text-align: right; }
.data-table .is-center { text-align: center; }

/* Columna de Acciones: que ocupe solo lo que necesita el botón de 3 puntos,
   en vez de heredar espacio sobrante del table-layout automático */
.data-table th.data-table__actions-col,
.data-table td.data-table__actions-col {
  width: 1%;
  white-space: nowrap;
}

/* Estado vacío de la tabla */
.data-table__empty {
  display: block;
  padding: 24px 12px;
  color: var(--color-subtle);
  font-style: italic;
}

/* Miniatura en columna de imagen (helper estructural para tablas con imagen) */
.data-table__thumb {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  background: var(--color-surface-input);
}
.data-table__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-subtle);
}
.data-table__thumb--empty svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   ROW MENU — Menú de acciones por fila (botón de 3 puntos)
   ==========================================================================
   Botón compacto (⋮) que despliega un menú con acciones de la fila (Ver,
   Editar, Eliminar, …). Reutilizable en cualquier tabla de la app.

   Estructura (generada por el componente Cotton c-data.row_menu):
     <div class="row-menu" x-data="{ open: false }">
       <button class="row-menu__trigger" ...>⋮</button>
       <div class="row-menu__panel" x-show="open" ...>
         <a class="row-menu__item">Acción</a>
         <a class="row-menu__item row-menu__item--danger">Eliminar</a>
       </div>
     </div>
   ========================================================================== */

.row-menu {
  position: relative;
  display: inline-flex;
}

.row-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.row-menu__trigger:hover {
  background: var(--color-surface-input);
  color: var(--color-secondary);
}
.row-menu__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.row-menu__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Panel desplegable: alineado a la derecha para no salirse de la tabla */
.row-menu__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 160px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / .12);
}

.row-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-secondary);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.row-menu__item:hover {
  background: var(--color-surface-input);
  color: var(--color-secondary);
}
.row-menu__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.row-menu__item-icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--color-muted);
}
.row-menu__item:hover .row-menu__item-icon { color: inherit; }

/* Variante destructiva */
.row-menu__item--danger { color: var(--color-danger); }
.row-menu__item--danger .row-menu__item-icon { color: var(--color-danger); }
.row-menu__item--danger:hover {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  color: var(--color-danger);
}

/* ==========================================================================
   PAGINATION — Barra de paginación compacta (estilo planilla)
   ==========================================================================
   Barra inferior de una hoja de cálculo: resumen a la izquierda y controles
   Previo / Siguiente a la derecha.

   Estructura (generada por el componente Cotton c-misc.paginator):
     <div class="pagination">
       <span class="pagination__info">Mostrando 1–10 de 54</span>
       <div class="pagination__controls">
         <button class="pagination__button" ...>‹ Previo</button>
         <span class="pagination__page">Página 1 de 6</span>
         <button class="pagination__button" ...>Siguiente ›</button>
       </div>
     </div>
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
}

.pagination__info {
  color: var(--color-muted);
  font-size: 12px;
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination__page {
  padding: 0 8px;
  color: var(--color-muted);
  font-size: 12px;
  white-space: nowrap;
}

.pagination__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.pagination__button:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination__button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.pagination__button svg {
  width: 14px;
  height: 14px;
  flex: none;
}