/* Custom Styles for CrisColor PMV Vanilla Port */

/* ----------------------------------------
VIEWS: CONTROL DE VISIBILIDAD Y TRANSICIONES
----------------------------------------
- .view-section → oculta vistas por defecto
- .view-section.active → muestra la vista activa
- fadeIn → animación de entrada vertical suave
- scaleIn → animación de escala para transiciones de bloques
Impacto: navegación principal entre pantallas (views) */
.view-section {
  display: none;
  animation: fadeIn 0.4s ease-out;
}
.view-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}



/* ----------------------------------------
FORMULARIOS: ESTILO BASE DE INPUTS Y LABELS
----------------------------------------
- .form-label → define estilo de etiquetas
- .form-input / textarea / select → inputs consistentes
- :focus → feedback visual al interactuar
- [readonly] → estado bloqueado visual
- textarea resize → permite ajuste vertical
Impacto: formularios de producto, perfil y manual */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #0f172a; /* slate-900 */
}

.form-input, .form-textarea, select.form-input {
  display: flex;
  width: 100%;
  border-radius: 0.5rem; /* rounded-lg */
  border: 1px solid #e2e8f0; /* slate-200 */
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #0f172a;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}
.form-input {
  height: 2.5rem;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #2563eb; /* blue-600 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.form-input[readonly] {
  background-color: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
}

textarea.form-textarea {
  resize: vertical;
}


/* ----------------------------------------
TABS: NAVEGACIÓN
----------------------------------------
- .tab-btn → estilo base de botones de pestañas
- :hover → mejora feedback visual
- .tab-btn.active → estado activo seleccionado
Impacto: navegación interna en módulo producto */
.tab-btn {
  flex: 1;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  border-radius: 0.375rem;
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.tab-btn:hover {
  color: #0f172a; /* slate-900 */
}
.tab-btn.active {
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* ----------------------------------------
TABS: CONTENIDO
----------------------------------------
- .tab-pane → oculta contenido por defecto
- .tab-pane.active → muestra contenido activo
- scaleIn → animación al cambiar de pestaña
Impacto: visualización de contenido asociado a tabs */
.tab-pane {
  display: none;
  animation: scaleIn 0.3s ease-out;
}
.tab-pane.active {
  display: block;
}

/* ----------------------------------------
SCROLL: PERSONALIZACIÓN DE SCROLLBAR
----------------------------------------
- scrollbar base, track y thumb
- hover → mejora visual al interactuar
Impacto: estética global en contenedores con scroll */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ----------------------------------------
PRODUCT TABS: GRID DE 6 COLUMNAS
----------------------------------------
- #product-tabs-nav → layout fijo de 6 slots
Impacto: estructura de navegación en módulo producto */
#product-tabs-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.25rem;
}

/* ----------------------------------------
TAB DINÁMICO: VISIBILIDAD CONTROLADA
----------------------------------------
- .tab-btn.invisible → oculta botón sin romper layout
Impacto: permite reservar espacio para tabs dinámicos */
.tab-btn.invisible {
  visibility: hidden;
}