/* =============================================================================
 * DS · PANEL DE FORMULARIO  (`form_panel`)
 *
 * DE DÓNDE VINO: `gw-fields/assets/css/gwfields.css`, bloque "POST FORM" (las
 * reglas se MOVIERON, no se copiaron — allá ya no están).
 *
 * POR QUÉ SE MOVIÓ: el front nuevo no importa `gwfields.css`, igual que no importa
 * `main.css`. `form_panel` es el CONTENEDOR de casi todas las pantallas de
 * formulario —**22 usos**: 20 en juicy-core y 2 en juicy-core-hub, y es el renderer
 * más grande de gw-fields con 191 líneas—, así que mientras se vistiera desde allá,
 * cualquier formulario migrado saldría con la carcasa desnuda: sin cabecera, sin
 * barra lateral y con las pestañas sin pintar. Es el segundo bloque que cruza,
 * después del repetidor (`ds/list.css`).
 *
 * ⚠ ESTA CAPA TIENE DOS CONSUMIDORES, y el segundo hay que registrarlo A MANO.
 * El **Hub** (`juicy-core-hub`) tiene su propia copia vendorizada del DS y su propia
 * lista de enqueue (`includes/dashboard.php`), sin ningún sync que falle si falta una
 * capa. Recibía estas reglas "gratis" porque tiene gw-fields symlinkeado; al vaciarse
 * `gwfields.css` se habría quedado sin ellas y sus dos pantallas de formulario
 * —Ajustes de cuenta y el editor de marca— habrían perdido la cabecera, el sticky y
 * toda distinción visual entre la pestaña activa y las demás. Lo encontró la revisión
 * adversaria, no el instrumento: `foto-estilos.mjs` solo apunta al dashboard del POS.
 * **Regla para los bloques que falten: antes de vaciar uno, pregunta qué OTROS installs
 * lo consumen.**
 *
 * QUÉ VISTE, región por región (`gw-fields/fields/gwfield_form_panel.php`):
 *   .form_panel_header   la banda blanca de arriba (línea 23)
 *   .form_panel_sidebar  la columna pegajosa de la derecha (línea 98)
 *   .form_panel_tabs     el contenedor de la lista de pestañas (línea 118)
 *   .sidebar_tab         cada pestaña, con su estado `.active` y su icono `> i`
 *
 * `.sidebar_tab` es lo que abre cada pestaña (`data-show-tab`), y de ahí sale la
 * trampa de medición que documenta el doc 29: un campo bajo una pestaña CERRADA
 * vive bajo `display:none`, y ahí `getComputedStyle` no resuelve nada que dependa
 * de la caja. Para medir un campo del editor hay que abrir su pestaña primero
 * (`foto-estilos.mjs --clic "[data-show-tab=…]"`).
 *
 * SOBRE LA CASCADA: esto ahora carga DESPUÉS de `main.css` y del resto de capas de
 * componentes, o sea MÁS TARDE que cuando vivía en `gwfields.css`. Y la promoción es
 * mayor de lo que parece: gw-fields se activa en red ANTES que juicy-core, así que
 * `gwfields.css` iba por delante de TODO juicy-core, no solo de los componentes. Aun
 * así es inerte, comprobado: ninguna hoja anterior declara nada que case con estos
 * cuatro selectores, ni en el dashboard ni en el Hub.
 *
 * MEDIDO: diff antes/después sobre `/productos/editar` (7 pestañas, una activa) = 0
 * diferencias. Dicho con precisión, porque el número redondo engaña: de los 10
 * selectores fotografiados **7 son de reglas movidas** y 3 (`.form_panel_sidebar_wrapper`,
 * `.field__label`, `.field__helper`) son de CONTROL — no tienen regla en este bloque y
 * están para detectar daño colateral.
 *
 * LO QUE ESTA CAPA NO RESUELVE, para que nadie lea "carcasa vestida" de más: el
 * renderer emite regiones cuyo CSS sigue en `main.css`, que el front tampoco importa.
 * La que más pesa es **`.tab_content`** (`main.css:367-383`), que es lo que oculta los
 * paneles inactivos: sin ella, un `form_panel` con pestañas en el front nuevo pinta
 * TODOS los paneles apilados a la vez. También `.form_footer` y `.buttons_list`. O sea
 * que la familia Formulario necesita además un barrido de `main.css`, no solo de
 * `gwfields.css`.
 * ========================================================================== */

.form_panel_header{
	background: #FFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    padding: 20px 25px;
}
.form_panel_sidebar{
	top:20px;
}
.form_panel_tabs {
	gap:5px;
}
.sidebar_tab {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
	padding: 5px;
	border-radius: 99px;
	gap: 10px;
	cursor: pointer;
	transition: all 0.5s;
}
.sidebar_tab.active{
	background: var(--neutral-500);
	color: #FFF;
}
.sidebar_tab > i{
	width: 35px;
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: var(--neutral-500);
	color: #FFF;
	border-radius: 50%;
}
.sidebar_tab.active > i{
	background: #FFF;
	color: var(--text-primary, var(--neutral-500));
}