/* =============================================
   HARVESTCHILE — UX IMPROVEMENTS PATCH
   Agregar al final de style.css (o incluir como
   <link> separado antes de </head>)
   ============================================= */

/* ---- SPA: zona de contenido intercambiable ---- */
#spa-content {
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}

/* ---- Carga SPA: cursor de espera sutil ---- */
body.spa-loading {
  cursor: progress;
}

/* ---- Transición suave al cambiar estado activo ---- */
.gemu-family-btn,
.series-nav__item,
.cat-btn {
  transition: all .18s ease !important;
}

/* ---- TABLA DE MODELOS: no romper el layout ---- */
/*
  Problema: la tabla dentro de <details> se expandía hacia afuera.
  Solución: table-layout fixed + overflow en el wrapper.
*/
.admin-table {
  table-layout: fixed;
  width: 100%;
  word-break: break-word;
}

.admin-table th:nth-child(1),
.admin-table td:nth-child(1) { width: 22%; }
.admin-table th:nth-child(2),
.admin-table td:nth-child(2) { width: 22%; }
.admin-table th:nth-child(3),
.admin-table td:nth-child(3) { width: auto; }   /* descripción ocupa el resto */
.admin-table th:nth-child(4),
.admin-table td:nth-child(4) { width: 80px; }

/* Dentro del details de modelos: descripción truncada para no reventar */
.models-summary-table td:nth-child(3) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;            /* necesario para que text-overflow funcione en td */
}

/* ---- Wrapper del details: nunca sale del contenedor ---- */
details.models-details {
  overflow: hidden;
  max-width: 100%;
}
details.models-details > div {
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  max-width: 100%;
}
details.models-details .admin-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ---- Spinner de carga SPA (pequeño, en la zona de contenido) ---- */
.spa-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(11,140,135,.2);
  border-top-color: var(--teal-mid);
  border-radius: 50%;
  animation: spa-spin .7s linear infinite;
  margin: 0 auto;
}
.spa-loading .spa-spinner { display: block; }
@keyframes spa-spin { to { transform: rotate(360deg); } }

/* ---- Indicador de modelo activo en select ---- */
.model-select-wrap select:focus {
  box-shadow: 0 0 0 3px rgba(11,140,135,.18);
}

/* ---- Active state para links de familia/serie con transición ---- */
.gemu-family-btn.active {
  background: var(--teal-pale);
  border-left-color: var(--teal-dark);
  color: var(--teal-dark);
  font-weight: 800;
}

/* ---- Series nav: scrollbar visible y estilizado ---- */
.series-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--teal-accent) transparent;
}
.series-nav::-webkit-scrollbar {
  height: 4px;
}
.series-nav::-webkit-scrollbar-thumb {
  background: var(--teal-accent);
  border-radius: 2px;
}

/* ---- Fade de panel detalle cuando se cambia de serie ---- */
.product-detail,
.detail-panel {
  transition: opacity .2s ease;
}

/* ---- Cat filter: mejor feedback visual ---- */
.cat-btn {
  position: relative;
}
.cat-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal-dark);
  border-radius: 2px 2px 0 0;
}

/* ---- Responsive: tabla de modelos en móvil ---- */
@media (max-width: 640px) {
  .admin-table th:nth-child(3),
  .admin-table td:nth-child(3) {
    display: none; /* Ocultar descripción en móvil para evitar overflow */
  }
  .admin-table th:nth-child(1),
  .admin-table td:nth-child(1) { width: 45%; }
  .admin-table th:nth-child(2),
  .admin-table td:nth-child(2) { width: 35%; }
}

/* ---- Skip to content (accesibilidad) ---- */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--teal-dark);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: .82rem;
  font-weight: 700;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }