/**
 * Ketin 2.0 — Table · kem2-table.css · v1.0.0 · 2026-07-20
 * Sin prototipo previo: construido desde cero con criterios editoriales
 * consistentes con el resto del sistema. SIN !important: Design gana
 * siempre. Identidades = carga inicial editable.
 */

/* ---------- Variables por identidad ---------- */
.kem2-table{
  --kem2-tbl-ink: #12131c;
  --kem2-tbl-gray: #40424f;
  --kem2-tbl-accent: #4800fe;
  --kem2-tbl-border: #dbdde6;
  --kem2-tbl-headbg: #f6f7fb;
  --kem2-tbl-headc: #12131c;
  --kem2-tbl-zebra-default: #f9f9fc;
}
.kem2-table.kem-ptf{
  --kem2-tbl-accent: #a9781f;
  --kem2-tbl-headbg: #f3ecdc;
  --kem2-tbl-gray: #3c4a3e;
}

/* ---------- Wrapper y tabla ---------- */
.kem2-tbl-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--kem2-tbl-radius, 0);
}
.kem2-tbl-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--kem2-tbl-gray);
}
.kem2-tbl-caption{
  text-align: left;
  font-size: 13px;
  color: var(--kem2-tbl-gray);
  padding: 0 0 10px;
  caption-side: top;
}
.kem2-tbl-caption.kem2-tbl-sr{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ---------- Cabecera ---------- */
.kem2-tbl-table thead th{
  background: var(--kem2-tbl-hbg, var(--kem2-tbl-headbg));
  color: var(--kem2-tbl-hc, var(--kem2-tbl-headc));
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--kem2-tbl-pv, 12px) var(--kem2-tbl-ph, 14px);
  white-space: nowrap;
}
.kem2-tbl-numcol{ width: var(--kem2-tbl-numw, 40px); text-align: center !important; }

.kem2-tbl-stickyhead .kem2-tbl-wrap{
  max-height: var(--kem2-tbl-maxh, none);
  overflow-y: auto;
}
.kem2-tbl-stickyhead thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ---------- Celdas ---------- */
.kem2-tbl-table tbody td{
  padding: var(--kem2-tbl-pv, 12px) var(--kem2-tbl-ph, 14px);
  vertical-align: top;
}
.kem2-tbl-density-compacta .kem2-tbl-table thead th,
.kem2-tbl-density-compacta .kem2-tbl-table tbody td{
  padding: var(--kem2-tbl-pv, 7px) var(--kem2-tbl-ph, 10px);
  font-size: 13px;
}
.kem2-tbl-table tbody td p{ margin: 0 0 6px; }
.kem2-tbl-table tbody td p:last-child{ margin-bottom: 0; }
.kem2-tbl-table tbody td img{ max-width: 100%; height: auto; display: block; }
.kem2-tbl-table tbody td ul, .kem2-tbl-table tbody td ol{ padding-left: 1.2em; margin: 0; }
.kem2-tbl-table tbody td a{ color: var(--kem2-tbl-accent); }

/* Número de fila (::before como columna faux, sin depender del hijo) */
.kem2-tbl-numbered tbody{ counter-reset: kem2tblrow; }
.kem2-tbl-numbered tbody tr::before{
  counter-increment: kem2tblrow;
  content: counter(kem2tblrow);
  display: table-cell;
  width: var(--kem2-tbl-numw, 40px);
  text-align: center;
  color: var(--kem2-tbl-gray);
  font-size: 12.5px;
  padding: var(--kem2-tbl-pv, 12px) 6px;
  border-top: inherit;
}
.kem2-tbl-numbered.kem2-tbl-num-dlz tbody tr::before{ content: counter(kem2tblrow, decimal-leading-zero); }
.kem2-tbl-numbered.kem2-tbl-num-uroman tbody tr::before{ content: counter(kem2tblrow, upper-roman); }
.kem2-tbl-numbered.kem2-tbl-num-ualpha tbody tr::before{ content: counter(kem2tblrow, upper-alpha); }

/* ---------- Estilos de fila ---------- */
.kem2-tbl-style-sep tbody tr{ border-top: var(--kem2-tbl-bw, 1px) solid var(--kem2-tbl-border, var(--kem2-tbl-border)); }
.kem2-tbl-style-sep tbody tr:first-child{ border-top: none; }
.kem2-tbl-style-sep tbody tr{ border-top-color: var(--kem2-tbl-bc, var(--kem2-tbl-border)); }

.kem2-tbl-style-bordered tbody td,
.kem2-tbl-style-bordered thead th{
  border: var(--kem2-tbl-bw, 1px) solid var(--kem2-tbl-bc, var(--kem2-tbl-border));
}

.kem2-tbl-style-zebra tbody tr:nth-child(even){ background: var(--kem2-tbl-zebra, var(--kem2-tbl-zebra-default)); }

.kem2-tbl-style-none tbody tr{ border: none; }

/* ---------- Resaltado y totales (por fila, vía custom properties del hijo) ---------- */
.kem2-tbl-row.kem2-tbl-highlight{
  background: var(--kem2-tbl-row-bg, transparent);
  color: var(--kem2-tbl-row-c, inherit);
}
.kem2-tbl-row.kem2-tbl-totals td,
.kem2-tbl-row.kem2-tbl-totals::before{
  font-weight: 700;
  border-top: calc(var(--kem2-tbl-bw, 1px) * 2) solid var(--kem2-tbl-bc, var(--kem2-tbl-ink));
}

/* ---------- Botón y badge (micro-etiquetas) ---------- */
.kem2-tbl-btn{
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--kem2-tbl-accent);
  border-radius: 4px;
  padding: 6px 14px;
  text-decoration: none;
}
.kem2-tbl-btn:hover{ opacity: .85; }
.kem2-tbl-badge{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #eceef4;
  color: var(--kem2-tbl-gray);
  border-radius: 12px;
  padding: 3px 9px;
}

/* ---------- Primera columna fija (modo scroll) ---------- */
.kem2-tbl-stickycol thead th:first-child,
.kem2-tbl-stickycol tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--kem2-tbl-headbg-cell, #fff);
}
.kem2-tbl-stickycol thead th:first-child{ background: var(--kem2-tbl-hbg, var(--kem2-tbl-headbg)); z-index: 3; }

/* =====================================================================
 * MODO TARJETAS (responsive: cards)
 * ===================================================================== */
@media (max-width: 640px){
  .kem2-tbl-responsive-cards .kem2-tbl-wrap{ overflow-x: visible; }
  .kem2-tbl-responsive-cards .kem2-tbl-table,
  .kem2-tbl-responsive-cards .kem2-tbl-table tbody,
  .kem2-tbl-responsive-cards .kem2-tbl-table tr,
  .kem2-tbl-responsive-cards .kem2-tbl-table td{ display: block; width: auto !important; }
  .kem2-tbl-responsive-cards .kem2-tbl-table thead{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }
  .kem2-tbl-responsive-cards .kem2-tbl-table tr{
    border: 1px solid var(--kem2-tbl-bc, var(--kem2-tbl-border));
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 10px 14px;
  }
  .kem2-tbl-responsive-cards.kem2-tbl-numbered .kem2-tbl-table tr::before{
    display: block;
    width: auto;
    text-align: left;
    font-weight: 700;
    padding: 4px 0;
  }
  .kem2-tbl-responsive-cards .kem2-tbl-table td{
    padding: 6px 0;
    border: none;
  }
  .kem2-tbl-responsive-cards .kem2-tbl-table td[data-label]::before{
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kem2-tbl-accent);
    margin-bottom: 2px;
  }
}