/* src/styles/Tables.css — Sistema de tablas estilo Google Admin */

/* ── CONTENEDOR ───────────────────────────────────────────────── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  /* Sombra de scroll: en móvil el scrollbar nativo suele quedar
     invisible hasta tocar, así que sin esto una tabla ancha
     parece "cortada" en vez de deslizable. Los gradientes viajan
     con el contenido y solo se ven cuando hay más que scrollear. */
  background-image:
    linear-gradient(to right, var(--surface-base) 30%, rgba(0,0,0,0)),
    linear-gradient(to left, var(--surface-base) 30%, rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0) 12px),
    linear-gradient(to left, rgba(0,0,0,0.12), rgba(0,0,0,0) 12px);
  background-position: left, right, left, right;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ── TABLA BASE ───────────────────────────────────────────────── */
.corp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: var(--surface-base);
  font-size: var(--text-sm);
}

/* Encabezados — estilo Google Admin */
.corp-table th {
  background: var(--surface-sunken);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  user-select: none;
}

/* Celdas de dato */
.corp-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

/* Última fila sin borde inferior */
.corp-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── FILAS INTERACTIVAS ───────────────────────────────────────── */
.corp-table-row {
  background: var(--surface-base);
}

.corp-table-row:hover td:not(.sticky-cell):not(.plan-cell) {
  background-color: var(--surface-sunken);
}

/* Filas alternas (zebra) — opcional */
.corp-table-striped .corp-table-row:nth-child(even) td {
  background: var(--surface-sunken);
}

/* ── CELDAS ESPECIALES ────────────────────────────────────────── */

/* Celda sticky de nombre/fila */
.sticky-cell {
  position: sticky;
  left: 0;
  background: var(--surface-base);
  z-index: 1;
}

/* Celda de plan destacado */
.plan-cell {
  background: var(--color-primary-50);
  border-left: 3px solid var(--color-primary-500);
  color: var(--color-primary-700);
  font-weight: var(--weight-semibold);
}

/* ── TABLA AYUDA VENTAS (GenericTable) ────────────────────────── */

.generic-table-title {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.generic-table-title span {
  background-color: var(--color-primary-500);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-2);
  color: white;
}

.generic-table-container {
  background-color: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.generic-table-container table {
  background-color: var(--surface-base);
  color: var(--text-primary);
}

.generic-table-container th.sticky-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  color: var(--color-primary-500);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.generic-table-container td {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
}

.generic-table-container td.sticky-cell {
  background-color: var(--surface-base);
  color: var(--color-primary-700);
  font-weight: var(--weight-semibold);
  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08);
}

.generic-table-container td.plan-cell {
  background-color: var(--color-primary-50);
  border-left: 3px solid var(--color-primary-500);
  color: var(--color-primary-700);
  font-weight: var(--weight-semibold);
  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08);
}

.generic-table-container td.total-plan-cell {
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border-subtle);
}

/* ── DARK MODE ────────────────────────────────────────────────── */

.dark-mode-active .table-wrap {
  background: var(--surface-base);
  border-color: var(--border-subtle);
}

.dark-mode-active .corp-table {
  background: var(--surface-base);
  color: var(--text-primary);
}

.dark-mode-active .corp-table th {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border-bottom-color: var(--border-default);
}

.dark-mode-active .corp-table td {
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}

.dark-mode-active .corp-table-row {
  background: var(--surface-base);
}

.dark-mode-active .corp-table-row:hover td:not(.sticky-cell):not(.plan-cell) {
  background-color: var(--surface-raised);
}

/* Dark Ayuda Ventas */
.dark-mode-active .generic-table-title {
  color: var(--color-secondary-400);
}

.dark-mode-active .generic-table-title span {
  background-color: var(--color-secondary-500);
}

.dark-mode-active .generic-table-container {
  background-color: var(--surface-base);
  border-color: var(--border-subtle);
}

.dark-mode-active .generic-table-container table {
  background-color: var(--surface-base);
  color: var(--text-primary);
}

.dark-mode-active .generic-table-container th.sticky-header {
  background: rgba(26, 29, 35, 0.97);
  color: var(--color-secondary-400);
  border-bottom-color: var(--border-default);
}

.dark-mode-active .generic-table-container td {
  background-color: var(--surface-base);
  border-bottom-color: var(--border-subtle);
  color: var(--text-secondary);
}

.dark-mode-active .generic-table-container td.sticky-cell {
  background-color: var(--surface-base);
  color: var(--text-primary);
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4);
}

.dark-mode-active .generic-table-container td.plan-cell {
  background-color: rgba(89, 37, 130, 0.10);
  border-left-color: var(--color-secondary-500);
  color: var(--color-secondary-300);
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4);
}

.dark-mode-active .generic-table-container td.total-plan-cell {
  background-color: transparent;
  color: var(--text-tertiary);
  border-bottom-color: var(--border-subtle);
}

/* ── TIEMPO EXCEDIDO (tabla de marcaciones) ───────────────────── */
.time-exceeded {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.dark-mode-active .time-exceeded {
  color: #f87171 !important;
}

/* ── TABLA DE FICHA (etiqueta / valor) ──────────────────────────────────
   Para bloques que describen un solo registro, como "Datos del servicio" de
   una orden de trabajo. Antes esos bloques alternaban filas apiladas y filas
   en línea, así que las etiquetas no quedaban alineadas entre sí y el
   conjunto se leía desordenado. Aquí la etiqueta siempre ocupa la primera
   columna y el valor la segunda. */
.corp-table--ficha th,
.corp-table--ficha td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

.corp-table--ficha th {
  width: 36%;
  min-width: 7.5rem;
  white-space: normal;      /* etiquetas largas envuelven en vez de ensanchar */
  line-height: 1.35;
}

/* En pantallas estrechas la etiqueta se encoge para dejar respirar al valor */
@media (max-width: 480px) {
  .corp-table--ficha th {
    width: 42%;
    min-width: 0;
  }
  .corp-table--ficha th,
  .corp-table--ficha td {
    padding: var(--space-2) var(--space-3);
  }
}