/* ============================================================================
   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: title_label, footer_help,
      input_actions, search_input, gwf-btn--full, y el layout de los campos
      compuestos (sortable/blocks/import/post form/pincode/color picker/
      attributes/number select/fieldset/taxonomies/checkbox list).

   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 ***/
/* Label de título de grupo (checkbox_list y afines): variante del label de
   campo que el DS no tiene. El compound pasó de .field_label a .field__label. */
.title_label.field__label{
	font-weight: 500;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--neutral-200, var(--gray200));
    padding-bottom: 5px;
}
/* Links dentro del helper: detalle que ds/field.css no cubre. */
.field__helper a{
	text-decoration: underline;
}
.footer_help{
	font-size: 11px;
	text-transform: uppercase;
	margin-top: 15px;
	font-weight: 500;
}
.footer_help a{
	text-decoration: underline;
}
/* .errors_list MURIO en F2a (2026-07-16): CERO emisores en los 3 repos — era
   CSS para markup que nadie construye. Si un formulario quiere errores
   visibles, el componente es .alert-banner.tone-error (ds/alert.css). */

/*** FIELD EXTRAS ***/
.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.
   ======================================================================== */

/** 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) ***/
/* El control por ítem es .choice (ds/choice.css); aquí solo el layout de la
   lista en columnas. Murieron .checkbox_wrapper/.checkbox_label/.switch_*
   (cubiertos por .choice/.choice__label; el switch entero por --switch). */
.checkbox_list{
	list-style: none;
}
.checkbox_list > *{
	width:var(--columns)
}

/*** TAXONOMIES CHECKBOXES (layout) **/
.catogories_box {
	list-style: none;
	background: var(--neutral-100, var(--gray50));
	padding: 15px;
	max-height: 200px;
	overflow: auto;
	border: 2px solid transparent;
	margin: 0;
	gap: 5px;
}
.required_checkbox.error + label + .catogories_box{
	border-color:var(--gw-800, var(--redColor));
}
.catogories_box li{
	margin:3px 0 0 0;
}
.catogories_box label{
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	cursor: pointer;
	line-height: 20px;
}
.catogories_box li .children{
	float:left;
	width:100%;
	box-sizing:border-box;
	list-style:none;
	padding:0 0 0 20px;
}

/* == 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 ***/
.select_number_wrapper select{
	width: 30%;
    min-width: inherit;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    border-radius: 3px 0 0 3px;
    border-right: 0;
}
.select_number_wrapper input[type=number] {
	width: 70%;
    height: var(--control-md);
	border-radius: 0 3px 3px 0;
}

/*** FIELD SET ***/
fieldset{
	border: 1px solid var(--neutral-200, var(--gray250));
	padding: 20px;
	box-sizing: border-box;
	margin: 0 0 10px 0;
	align-content: start;
}
legend{
	font-size: 13px;
	text-transform: uppercase;
	padding: 0 10px;
	color: var(--text-primary, var(--neutral-500));
	letter-spacing: 2px;
	font-weight: bold;
}

/*** SORTABLE LIST ***/
.field_blocks_list{
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 15px 15px 30px 15px;
	border: 1px solid var(--neutral-200, var(--gray250));
	border-radius: 3px;
	min-height: 90px;
	list-style: none;
	background:#FFF;
}
.field_blocks_list.dradding_list{
	position: absolute;
	padding: 0;
	border: none;
	pointer-events: none;
	z-index: 99999;
}
.field_blocks_list > li > .field_blocks_list{
	padding: 0 0 0 30px;
    border: none;
    margin-top: 10px;
	gap: 10px;
}
.list_field_actions {
	transform: translateY(-50%);
}
.list_item .list_item_wrapper{
	width: calc(100% - 50px);
    background: var(--neutral-100, #f8f9fa);
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
}
.sortable_list .list_item .list_item_wrapper{
	padding-left: 30px;
}
.list_item .list_item_header{
	padding: 15px;
}
.only_fields_edition .list_item{
	width: 100%;
}
.only_fields_edition .list_item:last-child{
	margin-bottom: -15px;
}
.delete_list_item{
	position: absolute;
    top: calc(50% - 20px);
    right: -50px;
}
.sortable_list_base .delete_list_item{
	display: none;
}
.list_centered_fields .list_item_header > .row{
	align-items: center;
}
.list_item_handle{
	position: absolute;
    top: 0;
    left: -30px;
    width: 30px;
    color: var(--neutral-200, var(--gray250));
    background: var(--neutral-100, var(--gray150));
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: grab;
}
.list_item_handle:hover{
	color: var(--neutral-300, var(--gray300));
}

/*** 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 ***/
.gwfield_form_headline{
	border-bottom: 1px solid var(--neutral-200, var(--gray200));
	padding: 15px 0;
}
.gwfield_form_headline.box_header{
	width: calc(100% + 60px);
	max-width: calc(100% + 44px);
	margin: -6px 0 0 -22px;
	padding: 20px 35px;
	border-bottom: 1px solid var(--neutral-200, var(--gray200));
	border-radius: 5px 5px 0 0;
}
.form_headline{
	margin: 0;
	text-transform: uppercase;
	color: var(--text-primary, var(--neutral-500));
	font-size: 15px;
	letter-spacing: 1px;
}
.gwfield_form_headline .subtitle{
	font-size: 14px;
	margin-top: 5px;
	font-weight: 500;
	color: var(--neutral-300, var(--gray300));
}

/*** IMPORT FIELD ***/
.import_field_form_wrapper{
	padding: 30px;
	background: #FFF;
	border-radius: 5px;
}
.import_sidebar{
	top: 30px;
	right:30px;
	background: #FFF;
	border-radius: 3px;
}
.import_sidebar_header{
	padding: 15px;
	border-bottom: 1px solid var(--neutral-200, var(--gray200));
}
.import_sidebar_header h3{
	margin: 0;
	text-transform: uppercase;
	color: var(--text-primary, var(--neutral-500));
	font-size: 13px;
	letter-spacing: 1px;
}
.import_sidebar_fields {
	padding: 15px;
	gap: 10px;
	max-height: calc(100vh - 356px);
	overflow: auto;
}
.import_sidebar_fields > *{
	padding: 10px;
	background: var(--neutral-100, var(--gray50));
	border-radius: 3px;
	color: var(--text-primary, var(--neutral-500));
	font-weight: 500;
	transition:all 0.5s;
}
.import_sidebar_fields > *:hover{
	background: var(--neutral-200, var(--gray200));
}
.field_col_input span{
	font-size: 11px;
	margin-bottom: 4px;
	opacity: 0.7;
}
.field_col_input .drag_column{
	font-size: 14px;
	cursor: grab;
}
.field_col_input .drag_column:hover{
	color: var(--gw-400, var(--purpleColor));
}

/** 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 ***/
.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));
}

/*** PINCODE INPUT ***/
.pincode_wrapper{
	gap: 5px;
}
.pincode_wrapper input[type=number]{
	width: 50px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: var(--neutral-200, var(--gray200));
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* Indicador claro de la casilla activa: borde de marca + halo suave. */
.pincode_wrapper input[type=number]:focus,
.pincode_wrapper input[type=number]:focus-visible{
	border-color: var(--gw-300, var(--greenColor));
	background: var(--neutral-100, var(--gray100));
	box-shadow: 0 0 0 3px rgba(137, 242, 98, 0.25);
}

/*** COLOR PICKER ***/
input[type=text].color_picker{
	padding: 0 10px 0 43px;
}
.color_picker_box{
	position: absolute;
	top: 4px;
    left: 4px;
    width: 36px;
    height: 36px;
	border-radius: 3px;
	border: 1px solid var(--neutral-100, var(--gray100));
	cursor: pointer;
}
.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 ================================================= */