/* Manual de Sistemas TERNIUM — Seccion 3: Especificacion de componentes. */

/* --- 3.1 Botones de accion ------------------------------------------------ */
.tx-btn {
  height: 34px;                      /* alto fijo del manual */
  padding: 0 10px;
  border: 0;
  border-radius: var(--tx-radius);
  background: var(--color-action-primary);
  color: var(--color-text-white);
  font-family: var(--font-family);
  font-size: var(--fs-small);
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;                          /* separacion exacta icono-texto */
}
.tx-btn:hover { filter: brightness(1.12); }
.tx-btn--ghost {
  background: transparent;
  border: 1px solid var(--color-text-main);
  color: var(--color-text-main);
}
.tx-btn i { font-size: 13px; }

/* --- 3.2 Grillas: NUNCA llevan paginador, la navegacion es por scroll ----- */
.tx-grid-wrap {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  max-height: 520px;
  overflow-y: auto;                  /* scroll en lugar de paginacion */
}
.tx-grid { width: 100%; border-collapse: collapse; }
.tx-grid thead th {
  position: sticky;
  top: 0;
  background: var(--color-bg-panel);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text-main);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
}
.tx-grid--maestra thead th {
  background: var(--color-brand-orange);
  color: var(--color-text-white);
  border-right: 1px solid var(--color-text-white);
}
.tx-grid td {
  padding: 6px 10px;                 /* padding obligatorio del manual */
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-body);
}
.tx-grid .num { text-align: right; }  /* numericos a la derecha */
.tx-grid .acciones { text-align: right; }
.tx-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* --- 3.3 Formularios y filtros ------------------------------------------- */
.tx-form label {
  display: block;
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--color-text-main);
  margin-bottom: 6px;
}
.tx-form input, .tx-form select {
  height: var(--tx-control-height);
  width: 100%;
  padding: 0 10px;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--tx-radius);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  color: var(--color-text-main);
}
.tx-form .campo + .campo { margin-top: 20px; }
.tx-check { width: 16px; height: 16px; accent-color: var(--color-action-primary); }

/* --- 3.4 Modales: sin la banda superior de 6px de Homer ------------------- */
.tx-modal-fondo {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .35);
  display: none; align-items: center; justify-content: center;
  z-index: 50;
}
.tx-modal-fondo.abierto { display: flex; }
.tx-modal {
  background: var(--color-bg-panel);
  border-top: 0;                     /* sobrescribe la banda de color de Homer */
  min-width: 420px;
  max-width: 640px;
}
.tx-modal__header {
  height: 45px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 15px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-h4);
  font-weight: 700;
}
.tx-modal__body { padding: 20px; }
.tx-modal__footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 10px 15px;
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Sweet-Alert: puntas cuadradas, todo centrado */
.tx-swal {
  background: var(--color-bg-panel);
  border-radius: 0;
  text-align: center;
  padding: 30px;
  min-width: 380px;
}
.tx-swal__icono { font-size: var(--tx-bola-size); line-height: 1; margin-bottom: 25px; }
.tx-swal__titulo { font-size: var(--fs-h3); font-weight: 600; }
.tx-swal__sub { font-size: var(--fs-body); color: var(--color-text-main); margin-top: 15px; }
.tx-swal__acciones { margin-top: 25px; display: flex; justify-content: center; gap: 10px; }

/* --- 3.5 Price Lists ------------------------------------------------------ */
.tx-price-list {
  width: var(--tx-price-list-w);
  border: 1px solid var(--color-border);
  background: var(--color-bg-panel);
}
.tx-price-list__header {
  height: 42px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  color: var(--color-text-white);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-transform: uppercase;
}
.tx-price-list__modulo { padding: 10px 20px; }
.tx-price-list__modulo + .tx-price-list__modulo { border-top: 1px solid var(--color-border); }
.tx-price-list__titulo {
  font-size: var(--fs-h4); font-weight: 600; text-transform: uppercase;
}
.tx-price-list__cifra { font-size: var(--fs-h2); font-weight: 700; }
.tx-price-list__etiqueta {
  font-size: var(--fs-small); text-transform: uppercase; margin-left: 10px;
}
.tx-price-list__footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 20px;
}

/* Bola indicadora */
.tx-bola {
  width: var(--tx-bola-size); height: var(--tx-bola-size);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-white);
  font-size: var(--fs-h2);
  font-weight: 300;
  margin: 0 auto;
}

/* Barra Min–Mid–Max del rango salarial */
.tx-barra-rango { position: relative; height: 10px; background: var(--color-bg-progress);
  border-radius: 2px; margin: 18px 0 6px; }
.tx-barra-rango__relleno { height: 100%; border-radius: 2px; background: var(--color-status-info); }
.tx-barra-rango__medio { position: absolute; top: -4px; width: 1px; height: 18px;
  background: var(--color-text-light); }
.tx-barra-rango__marcador { position: absolute; top: -5px; width: 3px; height: 20px;
  background: var(--color-action-primary); }
.tx-barra-rango__leyenda { display: flex; justify-content: space-between;
  font-size: var(--fs-nano); font-weight: 300; color: var(--color-text-light); }

/* --- 3.6 Tiles de dashboard ---------------------------------------------- */
.tx-tiles { display: flex; flex-wrap: wrap; gap: var(--tx-tile-gap); }
.tx-tile {
  width: var(--tx-tile-w);
  height: var(--tx-tile-h);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  padding: 10px;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tx-tile__titulo { font-size: var(--fs-h2); font-weight: 700; }
.tx-tile__icono {
  position: absolute; top: 10px; right: 10px;
  width: 50px; height: 50px;
  font-size: 50px; line-height: 1;
  color: var(--color-text-main); opacity: .35;
}
.tx-tile__cifra {
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--color-brand-amber);
  line-height: 1;
}
.tx-tile__pie {
  /* El manual fija #6a6c6f para el pie de 12px. --color-text-light (#9d9fa2)
     esta reservado para los textos de 10px: "Open Sans Light" es un peso de
     fuente, no este token de color. */
  font-size: var(--fs-small); text-transform: uppercase; color: var(--color-text-main);
}

/* --- 3.7 Navegacion ------------------------------------------------------- */
.tx-topbar {
  height: 56px;
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 30px;
  padding: 0 20px;
}
.tx-marca { font-size: var(--fs-h4); font-weight: 700; color: var(--color-action-primary); }
.tx-tabs { display: flex; gap: 24px; height: 100%; }
.tx-tabs a {
  display: flex; align-items: center;
  font-size: var(--fs-body); text-transform: uppercase; color: var(--color-text-main);
  position: relative;
}
.tx-tabs a.activo::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: 0;
  height: 3px; background: var(--color-brand-amber);
}
.tx-main { padding: 20px; }

/* --- Piso de accesibilidad ------------------------------------------------
   El manual TERNIUM no cubre foco de teclado ni movimiento reducido. Se agregan
   porque una demo que no se puede recorrer con el teclado esta incompleta.

   El outline usa el azul corporativo y no el naranja: medido contra los
   fondos de panel (9.29:1), pagina (8.36:1) y alterno (8.80:1). Sobre los
   fondos semaforizados reutilizables queda entre 2.43:1 y 2.95:1: si alguna
   vez se aplica .bg-alto a un elemento focuseable, hay que revisarlo. */
:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
}
.tx-grid tbody tr:focus-within { background: var(--color-bg-alt); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Semaforizacion reutilizable ----------------------------------------- */
.bg-alto { background: var(--color-status-danger); }
.bg-medio { background: var(--color-status-warning); }
.bg-bajo { background: var(--color-status-success); }
.bg-neutro { background: var(--color-status-neutral); }
.tx-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--tx-radius);
  /* Los fondos son los del manual y no se tocan. El texto si: en blanco daba
     1.41:1 sobre el amarillo de "Medio" y 2.08:1 sobre el verde de "Bajo",
     debajo del 4.5:1 que WCAG 1.4.3 pide para texto de 11px. Este gris muy
     oscuro pasa sobre los cuatro fondos (4.51 / 12.24 / 8.29 / 11.62). */
  color: var(--color-text-badge); font-size: var(--fs-micro); text-transform: uppercase;
  font-weight: 600;
}
.tx-panel {
  background: var(--color-bg-panel); border: 1px solid var(--color-border); padding: 20px;
}
.tx-vacio { text-align: center; color: var(--color-text-main); }
.tx-check-label {
  display: inline; font-size: var(--fs-micro); text-transform: none;
  color: var(--color-text-main);
}
.tx-seccion-titulo {
  font-size: var(--fs-h4); font-weight: 600; text-transform: uppercase; margin-bottom: 12px;
}