/* ============================================================
   TABLAS · Estilo para tablas del blog
   Autor: Carlos + DeepSeek
   ============================================================ */

:root {
  --tabla-borde:        #d9d9e0;
  --tabla-borde-fuerte: #8a8a96;
  --tabla-fondo:        #ffffff;
  --tabla-fondo-alt:    #f7f7fa;
  --tabla-fondo-head:   #2c3e50;
  --tabla-texto-head:   #ffffff;
  --tabla-hover:        #eef4ff;
  --tabla-vacio:        #b8b8c0;
  --tabla-foco:         #ffd966;
  --tabla-radius:       8px;
  --tabla-sombra:       0 2px 8px rgba(0,0,0,.06);
  --fuente-china:       "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;

  /* Colores por elemento Wu Xing */
  --elem-madera-bg:  #e8f5e9;
  --elem-madera-bd:  #4caf50;
  --elem-fuego-bg:   #ffebee;
  --elem-fuego-bd:   #f44336;
  --elem-tierra-bg:  #fff8e1;
  --elem-tierra-bd:  #ffc107;
  --elem-metal-bg:   #f5f5f5;
  --elem-metal-bd:   #9e9e9e;
  --elem-agua-bg:    #e3f2fd;
  --elem-agua-bd:    #2196f3;
}

/* ---------- Contenedor con scroll horizontal ---------- */
.tabla-scroll {
  overflow-x: auto;
  overflow-y: visible;
  margin: 1.5rem 0;
  border-radius: var(--tabla-radius);
  box-shadow: var(--tabla-sombra);
  background: var(--tabla-fondo);
  -webkit-overflow-scrolling: touch;
  width: 100%;                 /* ← ancho completo */
}

.tabla-scroll::-webkit-scrollbar { height: 10px; }
.tabla-scroll::-webkit-scrollbar-track { background: #f0f0f5; border-radius: 5px; }
.tabla-scroll::-webkit-scrollbar-thumb { background: #b0b0bd; border-radius: 5px; }
.tabla-scroll::-webkit-scrollbar-thumb:hover { background: #8a8a96; }

/* ---------- Tabla ---------- */
.tabla-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  font-size: 0.92rem;
  line-height: 1.5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Encabezados ---------- */
.tabla-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--tabla-fondo-head);
  color: var(--tabla-texto-head);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 0.9rem;
  border-bottom: 2px solid var(--tabla-borde-fuerte);
  white-space: nowrap;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Celdas ---------- */
.tabla-scroll td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--tabla-borde);
  vertical-align: top;
  color: #2a2a30;
}

/* Zebra (se sobreescribe con colores de elemento si aplica) */
.tabla-scroll tbody tr:nth-child(even) { background: var(--tabla-fondo-alt); }
.tabla-scroll tbody tr:hover { background: var(--tabla-hover); }

/* ---------- Primera columna fija ---------- */
.tabla-scroll th:first-child,
.tabla-scroll td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  font-weight: 600;
  color: var(--tabla-fondo-head);
  border-right: 1px solid var(--tabla-borde-fuerte);
  text-align: center;
  min-width: 50px;
}
.tabla-scroll thead th:first-child {
  z-index: 4;
  background: var(--tabla-fondo-head);
  color: var(--tabla-texto-head);
}

/* ---------- Chino ---------- */
.tabla-scroll .zh,
.tabla-scroll td:lang(zh) {
  font-family: var(--fuente-china);
  font-size: 1.02em;
}

/* ---------- Vacías ---------- */
.tabla-scroll td:empty::after {
  content: "—";
  color: var(--tabla-vacio);
  font-style: italic;
}

/* ---------- Fila anclada ---------- */
.tabla-scroll tbody tr:target {
  background: var(--tabla-foco) !important;
  transition: background 0.6s ease;
}

/* ---------- Columna de explicación más ancha ---------- */
.tabla-scroll td:nth-child(6) { min-width: 320px; }

/* ============================================================
   COLORES POR ELEMENTO WU XING
   El JS añade .elem-madera, .elem-fuego, etc. a cada <tr>.
   ============================================================ */
.tabla-scroll tbody tr.elem-madera { background: var(--elem-madera-bg); }
.tabla-scroll tbody tr.elem-madera td:first-child { border-left: 4px solid var(--elem-madera-bd); }

.tabla-scroll tbody tr.elem-fuego  { background: var(--elem-fuego-bg); }
.tabla-scroll tbody tr.elem-fuego  td:first-child { border-left: 4px solid var(--elem-fuego-bd); }

.tabla-scroll tbody tr.elem-tierra { background: var(--elem-tierra-bg); }
.tabla-scroll tbody tr.elem-tierra td:first-child { border-left: 4px solid var(--elem-tierra-bd); }

.tabla-scroll tbody tr.elem-metal  { background: var(--elem-metal-bg); }
.tabla-scroll tbody tr.elem-metal  td:first-child { border-left: 4px solid var(--elem-metal-bd); }

.tabla-scroll tbody tr.elem-agua   { background: var(--elem-agua-bg); }
.tabla-scroll tbody tr.elem-agua   td:first-child { border-left: 4px solid var(--elem-agua-bd); }

/* Hover más intenso que el color de fondo */
.tabla-scroll tbody tr.elem-madera:hover { background: #c8e6c9; }
.tabla-scroll tbody tr.elem-fuego:hover  { background: #ffcdd2; }
.tabla-scroll tbody tr.elem-tierra:hover { background: #ffecb3; }
.tabla-scroll tbody tr.elem-metal:hover  { background: #e0e0e0; }
.tabla-scroll tbody tr.elem-agua:hover   { background: #bbdefb; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .tabla-scroll table { font-size: 0.85rem; }
  .tabla-scroll th, .tabla-scroll td { padding: 0.5rem 0.6rem; }
  .tabla-scroll td:nth-child(6) { min-width: 240px; }
}