/* ============================================================================
   gw-fields — pegamento y extras SOBRE el Design System (ds/field.css,
   ds/choice.css). Aquí quedan SOLO dos categorías:

   1. PEGAMENTO DE LIBRERÍAS: selectize, fileuploader, iris (color picker).
      Alinean el DOM que esas librerías re-renderizan a las métricas del DS.
      El DS no sabe que existen.
   2. EXTRAS AÚN SIN COMPONENTE DS: input_actions, search_input, gwf-btn--full,
      y el layout de los campos compuestos (blocks/import/pincode/color picker/
      attributes/fieldset).
      Ya NO están aquí: sortable list, post form (form_panel), taxonomies,
      number select, form headline, checkbox list y title_label — cruzaron al
      Design System de juicy-core entre el 2026-07-28 y el 2026-07-28 (ver el
      puntero que cada bloque dejó en su sitio).

   El contrato base (.field / .field__label / .field__control / .input /
   .field__helper / .choice / .spinner) vive en ds/field.css y ds/choice.css.
   Murieron de aquí: .form_field, .field_label, .field_help, .icon_before,
   el SPINNER, el CHECKBOX y el SWITCH viejos — cubiertos por el DS.
   ============================================================================ */

/* Extra: mata los spin-buttons nativos de CUALQUIER input numérico de campo
   (el DS solo lo hace para .spinner__num). */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/*** FIELD EXTRAS SIN COMPONENTE DS ***/
/* `.title_label.field__label` se MOVIÓ a juicy-core/assets/css/ds/field-types.css
   (2026-07-28), con el bloque CHECKBOX LIST: es su label de grupo y no tiene otro emisor.

   `.field__helper a` se BORRÓ en vez de moverse, como en su día `.errors_list` y por lo
   mismo: CERO emisores en los tres repos. Ningún `help` del producto trae un <a> dentro
   (comprobado con grep sobre juicy-core, gw-fields y juicy-core-hub). Mover CSS muerto es
   mudar deuda.

   `.footer_help` / `.footer_help a`: BORRADAS también, y por lo mismo. Cero emisores en los
   tres repos (comprobado con grep, no deducido); la doc 29 ya las tenía nombradas como
   muertas. Así que de este bloque no queda ninguna regla: era CSS sin marcado que lo
   pintara, salvo el label de grupo, que sí se usaba y cruzó al DS. */

/*** FIELD EXTRAS ***/
/* Esto NO es de los formularios, aunque el nombre lo sugiera: `.input_actions` tiene un solo
   emisor en todo el producto —la barra del buscador de `templates/.../blocks/pos.php`— y
   `.search_input` otro tanto (pos.php + searchCustomer + posApplyCoupon). Las "acciones de
   campo" de un `text` (el generador de SKU) NO usan esta clase: `gwfield_text.php` emite un
   `.icon-chip` dentro del `.input`. O sea que este bloque es del POS (F4) y cruzará con su
   familia, no con la de Formulario. Queda corregido lo que decía la doc 29.
   Además `.search_input` arrastra `url(../images/search.svg)`: al moverla habría que
   resolver la ruta relativa, que es trabajo aparte. */
.input_actions{
	position: absolute;
	top:5px;
	right:5px;
	gap: 5px;
}
.input_actions input{
	display: none;
}
.input_actions input + .icon_button{
	--btnColor: var(--neutral-200, var(--gray250));
}
.input_actions input:checked + .icon_button{
	--btnColor: var(--gw-400, var(--purpleColor));
}
.search_input{
	background-image: url(../images/search.svg);
    background-size: 20px;
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
}

/*** SPINNER (resto) ***/
/* El componente vive en ds/field.css (.spinner/.spinner__btn/.spinner__num);
   las clases spinner_wrapper/spinner_minus/spinner_plus siguen en el markup
   porque las lee gwfields.js. Único detalle sin cubrir: el DS dimensiona el
   icono como <svg> de 24, y gw-fields usa <i> de uicons — se le da tamaño. */
.spinner__btn > i{
	font-size: 20px;
	line-height: 1;
}

/*** UPLOAD FIELD (pegamento de fileuploader) ***/
/* == juicy:fileuploader:inicio ===========================================
   De aquí sale `fileuploader-glue.css` para el front nuevo (juicy-app), que
   monta la MISMA librería y necesita este pegamento: la hoja de fileuploader
   viste su tema por defecto, y el del dashboard (`upload_file` / `upload_box`)
   lo pinta todo esto. Sin él el campo queda funcionando y sin caja.
   Lo extrae `scripts/sync-ds.mjs` de juicy-app cortando por estas marcas —
   igual que el de selectize, más abajo. Mover una regla fuera del bloque la
   saca del front sin que nada falle: ahí se despinta y ya.
   ======================================================================== */

/**
 * `.spacer` — VINO DE `main.css` (juicy-core), 2026-07-29.
 *
 * Es lo que le da ALTO a la caja del uploader de imagen: el `<span class="spacer">` que
 * `uploadImageField` mete dentro de `.file_uploader_box` no tiene contenido, así que sin
 * `float:left; width:100%` no genera caja y el `padding-top:100%` de más abajo —el que hace el
 * cuadrado— no tiene contra qué resolverse. Medido: sin esta regla el spacer computa
 * `display:inline` y `padding: 100%` sin resolver, o sea la caja del uploader colapsada.
 *
 * Estaba en `main.css`, que es el CSS legacy que el front nuevo **no importa a propósito**, así que
 * el campo `image` de React salía sin caja. Se MUEVE (no se copia) aquí dentro de las marcas
 * `juicy:fileuploader`, que es de donde `sync-ds.mjs` extrae el pegamento del front: una regla, dos
 * pantallas.
 *
 * Comprobado antes de moverla que su ÚNICO emisor en los cuatro repos es ese `changeInput` de
 * `gwfields.js:495` — el campo `spacer` de gw-fields NO emite esta clase (pinta un div con las
 * clases del descriptor, y ninguno le pasa `spacer`). Por eso puede vivir aquí y no en una capa
 * genérica del DS.
 */
.spacer{
	float: left;
	width: 100%;
}

/** GENERALS **/
.file_item_actions > *{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 12px;
	color: #FFF;
	cursor: pointer;
}
.file_uploader_box{
	position: relative;
	float: left;
	width: 100%;
	border: 2px dashed var(--neutral-300, var(--gray300));
	background: var(--neutral-100, #f8f9fa);
	border-radius: 10px;
	transition: all 0.3s;
	cursor: pointer;
}
.file_uploader_box:hover{
	background: var(--neutral-200, #e9ecef);
}

.fileuploader-droparea{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: var(--neutral-300, var(--gray300));
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
}
.fileuploader-dragging .fileuploader-droparea{
	opacity: 0.4;
	visibility: visible;
}
.file_uploader_box:not(.with_label)::after{
	content: "\f982";
	font-family: uicons-regular-rounded;
	position: absolute;
	top:50%;
	left:50%;
	font-size: 14px;
	color: var(--neutral-300, var(--gray300));
	transform: translate(-50%, -50%);
}


/** IMAGE UPLOAD **/
.upload_input_wrapper {
	padding: 10px;
	border: 1px solid var(--neutral-200, var(--gray250));
	border-radius: 3px;
	text-align: center;
}
.fileuploader-theme-upload_box{
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 180px;
	padding: 0;
	margin: 0;
	background: none;
}
.fileuploader-theme-upload_box .file_uploader_box::after{
	content: "\f4e9";
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	width: 40px;
	height: 40px;
	font-size: 25px;
	color: var(--neutral-300, var(--gray300));
	font-family: uicons-regular-rounded;
	transform: scale(0.9);
	transition: all 0.3s;
	opacity: 0.8;
}
.fileuploader-theme-upload_box .file_uploader_box:hover::after{
	opacity: 1;
	transform: scale(1);
}
.fileuploader-theme-upload_box .spacer{
	padding-top:100%;
}
.fileuploader-theme-upload_box .thumbnails_area{
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	padding: 5px;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	overflow: hidden;
}
.fileuploader-theme-upload_box.with_items .thumbnails_area{
	display: inline-block;
}

.fileuploader-item-image {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	overflow: hidden;
	border-radius: 5px;
	background: var(--neutral-100, var(--gray100));
}
.fileuploader-item-image img {
	float: left;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	border-radius: 5px;
	max-width: none;
	max-height: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.fileuploader-theme-upload_box .file_item_actions{
	position: absolute;
	top:10px;
	right:10px;
	background: rgba(89, 96, 104, 0.7);
	border-radius: 5px;
	opacity: 0;
	gap:5px;
	transition: all 0.3s;
}
.fileuploader-theme-upload_box .file_item:hover .file_item_actions{
	opacity: 1;
}
.fileuploader-theme-upload_box .file_item_actions:hover{
	opacity: 1;
	background: var(--neutral-500);
}

/** UPLOADER SHAPES **/
.circle_uploader_shape .file_uploader_box,
.circle_uploader_shape .fileuploader-theme-upload_box .thumbnails_area,
.circle_uploader_shape .fileuploader-item-image{
	border-radius: 50%;
}
.circle_uploader_shape  .fileuploader-theme-upload_box .file_item_actions{
	top: inherit;
	bottom: 15px;
	right: 50%;
	transform: translateX(50%);
	background: rgba(89, 96, 104, 0.9);
}

/*** FILE UPLOAD ***/
.fileuploader-theme-upload_file {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 0;
	background: none;
	margin: 0;
}
.fileuploader-theme-upload_file .file_uploader_box {
	height: 35px;
	border-radius: 5px;
}
.fileuploader-theme-upload_file .uploader_label{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transform: translate(-50%, -50%);
	color: var(--text-primary, var(--neutral-500));
}
.fileuploader-theme-upload_file .uploader_label i{
	font-size: 15px;
}
.fileuploader-theme-upload_file .file_item_actions{
	gap:5px;
	width: 30px;
}
.fileuploader-theme-upload_file .file_items{
	position: relative;
	display: none;
	margin-top:10px;
}
.fileuploader-theme-upload_file.with_items .file_items{
	display: inline-block;
}
.fileuploader-theme-upload_file .file_item{
	padding: 5px 10px;
	background: var(--neutral-200, #e9ecef);
	border-radius: 5px;
}
.column-title{
	width: calc(100% - 40px);
}
.fileuploader-theme-upload_file .file_name {
	font-size: 12px;
	font-weight: 500;
}
.fileuploader-theme-upload_file .file_size{
	font-size: 11px;
	opacity: 0.7;
}
.fileuploader-theme-upload_file .remove_item{
	background: var(--gw-800, var(--redColor));
	border-radius: 5px;
	height: 25px;
	width: 25px;
	font-size: 9px;
}
.fileuploader-theme-upload_file .progress-bar{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--neutral-100, var(--gray50));
}
.fileuploader-theme-upload_file .progress-bar > span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
}
.fileuploader-theme-upload_file .fileuploader-progressbar,
.fileuploader-theme-upload_file .fileuploader-progressbar .bar{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}
.fileuploader-theme-upload_file .fileuploader-progressbar .bar{
	background: var(--gw-300, var(--greenColor));
}
.limit_reached .file_uploader_box{
	display: none;
}
.limit_reached .file_items{
	margin-top: 0;
}
/* == juicy:fileuploader:fin ============================================== */

/*** CHECKBOX LIST (layout) ***/
/* MOVIDO al Design System: juicy-core/assets/css/ds/field-types.css (2026-07-28), junto
   con `.title_label` —que era su label de grupo y estaba en el bloque de arriba—, porque
   son el mismo componente. El control por item sigue siendo .choice (ds/choice.css).
   Murieron .checkbox_wrapper/.checkbox_label/.switch_* (cubiertos por .choice/.choice__label;
   el switch entero por --switch). */

/*** TAXONOMIES CHECKBOXES (layout) **/
/* MOVIDO al Design System: juicy-core/assets/css/ds/field-types.css (2026-07-28).
 * Motivo: el front nuevo (juicy-app) no importa esta hoja. El control por fila ya vivia
 * en el DS (.choice); lo unico que faltaba cruzar era el layout de la caja.
 * Se movieron, NO se copiaron: la unica definicion viva esta en el DS.
 *
 * EXCEPCION: la regla de abajo NO cruzo, y a proposito. Dos motivos independientes:
 *  1. NO PUEDE CASAR con el marcado actual. El orden que emite gwfield_taxonomy_checkboxes.php
 *     es: label -> helper -> .required_checkbox -> <input hidden> -> <ul.catogories_box>.
 *     El selector pide `.required_checkbox + label + .catogories_box`, pero tras el checkbox
 *     va el hidden y el label va ANTES. O sea: el borde rojo de "falta elegir una categoria"
 *     no se pinta nunca. Es un defecto real de este campo, y queda escrito aqui en vez de
 *     arreglarse a escondidas dentro de un traslado de CSS.
 *  2. Depende de `--gw-800`, que solo declara el main.css de juicy-core. Llevarla al DS
 *     habria metido alli la unica dependencia a un token del CSS legacy, para vestir algo
 *     que no se pinta. */
.required_checkbox.error + label + .catogories_box{
	border-color:var(--gw-800, var(--redColor));
}

/* == juicy:selectize:inicio ==============================================
   EL PEGAMENTO DE SELECTIZE, y por qué está acotado entre marcas.

   El front nuevo (juicy-app, React) pinta el MISMO marcado que Selectize
   —`.selectize-control` › `.selectize-input` › `.item`— para que un
   desplegable se vea igual en las dos pantallas sin traerse jQuery. Su
   script `sync-ds.mjs` extrae de aquí, por estas marcas, exactamente estas
   reglas y ninguna más: el resto de este archivo es pegamento de librerías
   que el front no usa (fileuploader, iris, nestable) y traérselo entero
   metería reglas que en PHP main.css sobreescribe y allí no.

   Consecuencia práctica: si añades una regla de selectize, va DENTRO de las
   marcas o el front no la verá. Y si mueves las marcas, sync-ds falla
   ruidosamente en vez de dejar el front sin el pegamento.
   ======================================================================= */

/*** TAGS FIELDS ***/
.selectize-input{
	border: 1px solid var(--neutral-200, var(--gray250));
	box-shadow: none;
	padding: 0 10px;
}
.selectize-input > input,
.selectize-input > input[type=text]{
	/* Alinea el alto del control vacío a la métrica del DS: control-md (40px) menos
	   el borde 1px×2 → el control queda en 40, como los inputs de una línea de al
	   lado. Antes 43px daba 45 y sobresalía (repaso fino POS). */
	height: calc(var(--control-md, 40px) - 2px);
}
.selectize-input.has-items > input,
.selectize-input.has-items > input[type=text]{
	height: 36px;
}
.selectize-input.focus{
	box-shadow: none;
}
/* EL PRIMITIVO PRIMERO (`--blue-500`), y los alias viejos solo de red.
   `--info-500`/`--blueColor500` son alias que **solo existen en main.css**: en el dashboard PHP
   están, pero el front nuevo consume el DS y NO carga main.css, así que ahí `var()` no resolvía y
   la declaración entera se caía — fichas con fondo transparente y texto blanco, es decir
   invisibles. El DS ya publica el primitivo (y `ds/table.css` documenta esta misma migración de
   `--info-600` → `--blue-600`). */
.selectize-control.multi .selectize-input [data-value]{
	text-shadow: none;
	background: var(--blue-500, var(--info-500, var(--blueColor500)));
	box-shadow: none;
	padding: 5px 10px;
	border: none;
}
.selectize-control.multi .selectize-input [data-value].active{
	background: var(--blue-600, var(--info-600, var(--blueColor600)));
	border: none;
}
.selectize-dropdown {
    margin: -1px 0 0 0 !important;
}

/** SELECT TAGS FIELDS **/
.selectize-control.single .selectize-input:after {
	right: 10px;
	margin-top: 0;
	border-color: #7c97b3 transparent transparent transparent;
}
.selectize-control.single .selectize-input.locked{
	background: #eef0f3;
	pointer-events:none;
	color: #283c55b0;
}
.selectize-control.single .selectize-input.locked:after{
	display: none;
}

/*** SEARCH SELECT FIELD ***/
.selectize-control.single .selectize-input{
	float: left;
	height: var(--control-md);
    line-height: var(--control-md);
    background: #FFF;
    border: 1px solid var(--neutral-200, var(--gray250));
    box-shadow: none;
}
/* El select vive ahora dentro de .field__control (contrato DS) — un nivel más. */
.last_field > .field__control > .selectize-control .selectize-dropdown{
	float: left;
	position: relative !important;
	top:0 !important;
	margin: 0 !important;
}
.selecitize_item{
	line-height:25px;
	font-size:12px;
	padding:5px 10px;
	box-sizing:border-box;
	border-bottom: 1px solid #f6f8fc;
}
.selecitize_selected_item .caption{
	display: inline-block;
	font-size: 90%;
	color: var(--neutral-500, var(--gray500));
	margin-top:3px;
}
.selecitize_item .caption{
	display: inline-block;
	font-size: 90%;
	color: var(--neutral-500, var(--gray500));
	margin:-3px 0 3px;
}
/* == juicy:selectize:fin ================================================= */

/*** NUMBER SELECT ***/
/* MOVIDO al Design System: juicy-core/assets/css/ds/field-types.css (2026-07-28).
 * Motivo: el front nuevo (juicy-app) no importa esta hoja. El input ya era .input del DS;
 * lo que faltaba cruzar era el reparto 30/70 entre el select y el numero.
 * Se movieron, NO se copiaron: la unica definicion viva esta en el DS. */

/*** FIELD SET — MOVIDO AL DESIGN SYSTEM ***/
/* `fieldset` y `legend` viven ahora en `juicy-core/assets/css/ds/field.css`. Se movieron, NO se
 * copiaron. Motivo: el front nuevo no importa esta hoja, y sin ellas el tipo `section` salia en
 * React con los estilos por defecto del navegador —borde `2px groove`, leyenda sin versalitas—;
 * medido, 12 diferencias.
 * OJO: **el Hub tambien pinta un `<fieldset>`** (`account-settings.php`, campo `password_fieldset`),
 * y lo recibia gratis de aqui por tener gw-fields symlinkeado. Por eso el bloque va a `field.css`,
 * que el Hub YA encola, y ademas se copia a su `assets/css/ds/` vendorizado en el mismo cambio. */

/*** SORTABLE LIST ***/
/* MOVIDO al Design System: juicy-core/assets/css/ds/list.css (2026-07-28).
 * Motivo: el front nuevo (juicy-app) no importa esta hoja, igual que no importa main.css,
 * asi que mientras el repetidor se vistiera desde aqui era imposible migrarlo con paridad.
 * Se movieron, NO se copiaron: la unica definicion viva esta en el DS, que cargan las dos
 * pantallas. Si algo del repetidor se ve mal, se toca alli. */

/*** BLOCKS FIELD ***/
.sortable_boxes{
	gap: 5px;
	margin: 0;
	padding: 15px;
	background: var(--neutral-300, var(--gray300));
	list-style: none;
	border-radius: 5px;
}
.sortable_box{
	float: left;
	position: relative;
	margin: 0;
	width: calc(20% - 20px);
	min-height: 80px;
	min-width: 150px;
	border-radius: 5px;
}
.sortable_box_handle {
	float: left;
	height: 20px;
	line-height: 20px;
	color: var(--neutral-300, var(--gray300));
	background: var(--neutral-100, var(--gray50));
	border-radius: 3px 3px 0 0;
	border-bottom: 1px solid var(--neutral-100, var(--gray100));
	cursor: move;
}
.sortable_box_handle i {
	font-size: 14px;
}
.sortable_box_body{
	float:left;
	background: #FFF;
	padding: 20px 15px 20px 20px;
	font-size: 12px;
	line-height: 20px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(50% + 13px), 10px 50%, 0 calc(50% - 13px));;
}
/*
.sortable_box:before{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	left: 0;
	border-style: solid;
	border-width: 17px 0 17px 12px;
	border-color: transparent transparent transparent var(--neutral-300, var(--gray300));
}
*/
.sortable_box:after{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	right: -8px;
	border-style: solid;
	border-width: 15px 0 15px 10px;
	border-color: transparent transparent transparent #FFF;
}
.add_sortable_box{
	float: left;
	position: relative;
	margin-left:10px;
	width: calc(20% - 20px);
	min-width: 150px;
	min-height: 80px;
	color: rgba(255,255,255,0.6);
	background: rgba(0,0,0,0.2);
	border: 2px dashed rgba(255,255,255,0.6);
	border-radius: 5px;
	cursor: pointer;
}
.add_sortable_box:hover{
	color: rgba(255,255,255,1);
	border: 2px dashed rgba(255,255,255,1);
}
.sortable_box_delete{
	float: left;
	height: 20px;
	line-height: 20px;
	background: var(--neutral-100, var(--gray50));
	border-top: 1px solid var(--neutral-100, var(--gray100));
	color: var(--gw-800, var(--redColor));
	font-size: 15px;
	border-radius: 0 0 3px 3px;
	cursor: pointer;
	transition: all 0.3s;
}
.sortable_box_delete:hover{
	background:var(--gw-800, var(--redColor));
	color:#FFF;
}
.sortable_box_options{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background: var(--gw-400, var(--purpleColor));
	opacity:0;
	transition:all 0.3s;
}
.sortable_box_options:before{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	left: -3px;
	border-style: solid;
	border-width: 17px 0 17px 12px;
	border-color: transparent transparent transparent #f2f5ff;
}
.sortable_box_options:after{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	right: -10px;
	border-style: solid;
	border-width: 15px 0 15px 10px;
	border-color: transparent transparent transparent var(--gw-400, var(--purpleColor));
}
.sortable_box_options:hover{
	opacity:1;
}
.sortable_box_options i{
	position:absolute;
	top:50%;
	left:50%;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-size:18px;
	transform:translate(-50%, -50%);
}
.sortable_box_placeholder i{
	font-size: 27px;
}

/*** FORM HEADLINE ***/
/* MOVIDO al Design System: juicy-core/assets/css/ds/field-types.css (2026-07-28).
   Es el separador de sección de un formulario (tipo `form_headline`) y el front nuevo
   no importa esta hoja. Allá quedan declaradas las dos reglas que viajaron SIN medir
   (`.box_header` y `.subtitle`): sus únicos emisores son formularios de importación,
   o sea el paso 2 de un flujo que exige subir un archivo antes. */

/*** IMPORT FIELD ***/
/* CRUZÓ a juicy-core/assets/css/ds/import.css (2026-07-29), con el campo `import` del
   front nuevo. Eran 11 reglas de layout —la barra de columnas, su cabecera en versalitas
   y las fichas arrastrables— y mientras vivieron aquí el <CampoImportar> de React salía
   sin vestir: 13 diferencias medidas en 12 selectores. Diff mecánico tras mover: 0. */

/** SPECIAL FIELDS **/
.input_action{
	position: absolute;
	top: 0;
	right: 0;
	width: var(--control-md);
	height: var(--control-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--text-primary, var(--neutral-500));
	cursor: pointer;
}

/*** POST FORM ***/
/* MOVIDO al Design System: juicy-core/assets/css/ds/form-panel.css (2026-07-28).
 * Motivo: el front nuevo (juicy-app) no importa esta hoja, igual que no importa main.css,
 * y `form_panel` es la CARCASA de casi todas las pantallas de formulario (19 usos), asi que
 * mientras se vistiera desde aqui cualquier formulario migrado saldria sin cabecera, sin
 * barra lateral y con las pestanas sin pintar.
 * Se movieron, NO se copiaron: la unica definicion viva esta en el DS, que cargan las dos
 * pantallas. Si algo de la carcasa del formulario se ve mal, se toca alli. */

/*** PINCODE INPUT — MOVIDO AL DESIGN SYSTEM ***/
/* Las reglas de `.pincode_wrapper` viven ahora en
 * `juicy-core/assets/css/ds/field-types.css`. Se movieron, NO se copiaron: el front nuevo no
 * importa esta hoja a proposito, y mientras la unica definicion viviera aqui el campo PIN salia
 * en React como un `input` de texto cualquiera —medido: 48 diferencias de estilo, entre ellas
 * fondo, tipografia y centrado—. El Hub no pinta este tipo, asi que no le hace falta la capa. */

/*** COLOR PICKER — MOVIDO AL DESIGN SYSTEM ***/
/* Las reglas de `input[type=text].color_picker` y `.color_picker_box` viven ahora en
 * `juicy-core/assets/css/ds/field-types.css`. Se movieron, NO se copiaron, por lo mismo que el
 * PINCODE de aqui arriba: el front nuevo no importa esta hoja a proposito, y mientras la unica
 * definicion viviera aqui el campo salia en React con la muestra de color SIN posicionar —apilada
 * encima del input en vez de dentro— y con el texto pegado al borde, porque el hueco de 43px lo
 * abre justamente ese padding.
 *
 * El PANEL del selector no esta ni aqui ni alla, y no falta: `iris.min.js` se inyecta su propia
 * hoja (`<style id="iris-css">`) al evaluarse. Por eso `assets/lib/iris/` tiene un solo archivo
 * mientras selectize, fileuploader, datetimepicker, daterangepicker y nestable llevan el suyo.
 *
 * `.color_picker_accept` se queda aqui y es CSS MUERTO: no lo emite `gwfield_color_picker`, no lo
 * escribe ningun JS y no aparece en juicy-core, los tres verticales ni el Hub (comprobado). No se
 * lleva al DS para no ensuciarlo con una regla que nadie pinta. */
.color_picker_accept{
	position: absolute;
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: var(--gw-300, var(--greenColor));
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}

/*** ATTRIBUTES ***/
.attributes_list:empty::after{
	content: 'Sin atributos';
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 14px;
    font-style: italic;
    color: var(--neutral-200, var(--gray250));
    transform: translate(-50%, -50%);
}
/* ============================================================================
   BOTONES DE GW-FIELDS — los pinta el DS, no este archivo.
   ----------------------------------------------------------------------------
   Aquí hubo, del 2026-07-16 por la tarde al 2026-07-16 por la noche, un
   componente `.gwf-btn` completo: 40/30, radio 5, contrato de tonos, hover por
   color-mix 86%, outline, round. O sea, un CLON de `.icon-chip` con otro nombre
   y con #C0362D / #00B4BD / #12B76A / #3E4349 pegados a mano, cuando los cuatro
   ya eran --red-600 / --ui-500 / --green-500 / --neutral-500.

   Se escribió porque gw-fields lo montan LOS DOS hosts y el Hub no tenía el DS,
   así que usar `.icon-chip` lo habría dejado sin estilo. La salida no era clonar
   el componente: era que gw-fields TRAIGA el DS (ver gw-fields.php). Ahora los
   dos hosts lo reciben y el markup dice `.icon-chip`, como todo lo demás.

   Lección: si tienes que duplicar un componente para saltarte una dependencia,
   el problema es la dependencia.
   ============================================================================ */

/* Único superviviente: un botón de ancho completo dentro de un campo. No es un
   chip (no es cuadrado ni lleva icono solo) y el DS no tiene equivalente. */
.gwf-btn--full,
.full_field_button.button{  /* la 2a se va cuando el Hub suelte .button */
	width: 100%;
    padding: 0;
    line-height: var(--control-md);
}

/* ============================================================================
   EL PLACEHOLDER DE UN SELECT
   ----------------------------------------------------------------------------
   `gwfield_select.php` emite el placeholder como `<option value="0" disabled
   selected>`. Es un placeholder legítimo — el `disabled` dice que no es una
   opción elegible. Pero selectize lo RE-RENDERIZA como un `.item` cualquiera y
   tira el `disabled`, así que en el DOM un select vacío y uno lleno quedan
   idénticos:

     <div class="selectize-input items full has-options has-items">
       <div class="item" data-value="0">Seleccione</div>      <- "vacío"
       <div class="item" data-value="49">Sucursal Este</div>  <- lleno

   Lo único que los distingue es el valor. Por eso "Seleccione" se veía igual de
   oscuro que un dato escrito, y por eso aclarar `--text-placeholder` no lo
   arregló: eso solo toca `::placeholder`, que aquí no existe.

   `value="0"` es el centinela que gw-fields mismo define (gwfield_select.php:79),
   así que gw-fields es quien debe pintarlo. No es un hack contra selectize: es
   cerrar un contrato que gw-fields abre.
   ============================================================================ */
/* == juicy:selectize:inicio == (segundo bloque; ver la nota del primero) */
.selectize-input .item[data-value="0"] {
	color: var(--text-placeholder);
}

/* Y el valor DE VERDAD: selectize lo pinta con su `#303030` hardcodeado, un
   color que no está en la paleta y que nadie eligió — viene con la librería.
   Se reclama para el sistema. */
.selectize-input,
.selectize-input .item,
.selectize-dropdown .option {
	color: var(--text-primary);
}
/* == juicy:selectize:fin ================================================= */