html {
     scroll-behavior: smooth;
	
}

main{
	min-height: 600px;
}
modules{
	display:none;
}

body{
position:relative;
margin: 0px;
padding:0px;

color:#999;	
line-height:20px;

--ok_text: #1d9b22; 

 font-family: 'Inter', sans-serif;
 /* font: 10px Verdana, Arial, sans-serif; */
overflow-x:hidden;
min-height: 100vh;

/* 100% Y NO 100vw, Y ES LA CAUSA DE QUE MEDIO SITIO SALGA DESCENTRADO.
 *
 * `100vw` NO cuenta la barra de desplazamiento: en una ventana de 1920 con
 * barra de 15px, el ancho util es 1905 y esto le exigia 1920 al body. O sea
 * que el body medía quince píxeles más que la página, y CUALQUIER cosa
 * centrada dentro --una cabecera recogida, un héroe, un carril de 1320--
 * quedaba 7,5px a la derecha de donde debía. Medido en `/como-funciona`: 300px
 * de aire a la izquierda y 285 a la derecha.
 *
 * El `overflow-x:hidden` de arriba es de la misma época y esconde el síntoma
 * --la barra horizontal-- pero no el desplazamiento, que es lo que se ve.
 *
 * Con `100%` el body mide lo que mide la página y no hace falta ninguna de las
 * dos cosas. Se deja el `overflow-x` porque protege de otros desbordes. */
min-width: 100%;
}

li{position: relative;}


.Overlay{
    transform: translate3d(0px, 0px, 0px);	
}


button
{
	display: flex;
    align-items: center;
}
.zbuffer{

/* 100% Y NO 100vw, POR LO MISMO QUE EL BODY DE ARRIBA.
 *
 * Esta capa es un fondo invisible (`opacity:0`), pero MIDE: con `100vw` pedía
 * 1920 en una ventana de 1905 útiles --los 15 de la barra de desplazamiento--
 * y estiraba la página entera. Detrás se iban la cabecera y sus zonas, que son
 * `100%` de una página ya estirada, y TODA página del sitio se desplazaba 15px
 * en horizontal. El `overflow-x:hidden` del body escondía la barra, no el
 * desplazamiento.
 *
 * Medido en `/tienda` y en la ficha del pedido: scrollWidth 1920 contra
 * clientWidth 1905, antes y después de este cambio. */
position: absolute;
width: 100%;
height: 100vh; 
z-index: 0;     
background-color: rgb(249, 249, 249); /* #f9f9f9 */	
opacity: 0;	
}



.mod-box {
    margin: 5px;
    position: relative;
    min-height: 113px;
    padding: 13px;
    border: 2px solid #fff;
    border-radius: 7px;
    background: #F7F7F9;
    box-shadow: 0 0 0 1px rgba(0,0,2,0.1), 0 1px 0 rgba(0,0,2,0.15), 0 1px 1px rgba(0,0,2,0.1);
    text-shadow: 0 1px 0 rgba(253,253,255,1.0);
}

.mod-box-header .module-title {
	 margin: 0 0 15px 0;
	font-size: 20px;
    margin: -13px -13px 13px -13px;
    padding: 13px;
    border-radius: 7px 7px 0 0;
    background: #E5E5E7 url(../images/module_box_header.png) 0 0 repeat-x;
}


img{
border: transparent;
}


#web{ z-index:1000}
#bbuffer{ z-index:5}
#plantillas{ z-index:1}



table{	
	margin: 0px;
	padding: 0px;
	border-collapse:collapse;
			
}



body .secciontitle {
  font: bolder 14px Arial;
 
 
  margin-top: 30px;
  margin-bottom: 10px;
  color: #6c396b;
}


/* ── UN TÍTULO NO SE SANGRA ──────────────────────────────────────────
   `padding: 10px` metía 10px TAMBIÉN POR LA IZQUIERDA, así que todo `h1` y
   todo `h2` del sitio arrancaban diez píxeles más adentro que el texto que
   llevaban debajo. Es la regla de alineación del proyecto --lo que va bajo un
   título empieza en su misma vertical-- incumplida desde la hoja global, y por
   eso reaparecía en cada pantalla nueva por mucho que se corrigiera en la suya.
   Se conserva el relleno VERTICAL, que es separación de verdad y en el que sí
   se apoyan las pantallas viejas; se quita el lateral, que era el defecto. */
h1{
color: #000;
font-weight: bold;
font-size: 20px;
padding: 10px 0;
margin: auto;
text-align:left;
}

h2{
color: #000;
font-weight: bold;
font-size: 18px;
padding: 10px 0;
margin: auto;
text-align:left;
}
h3{
	
color: #000;
font-weight: bold;
font-size: 16px;

margin-left: 0px;
clear:both;
	margin: 12px 0px;
	
}



h4{	
color:#93B1EE;
font-weight: bolder;
font-size: 12px;
margin: auto;
margin-left: 0px;
clear:both;
}

h5{	
color: #666;
font-weight: bolder;
font-size: 12px;
margin: auto;
margin-left: 0px;
clear:both;
}



div, span, p, ul, li, ol{
color: inherit;
font: normal 12px 'Inter', sans-serif;

}

div{
color: #000;	
}

.placeholder{
 color: #999;	
}

p{ 
	font-family: Arial, sans-serif;
	font-size: 14px;
    color: #000;

}

a, .link, a:active, a:focus, a:visited, a span  {
	font: normal 11px Arial, Verdana, Helvetica;
	cursor:pointer;
	font-family: inherit;
	font-weight: bold;  
	color:  #910c88;
	text-decoration:none;
	border: 0;

}


a:hover{text-decoration:underline }

/* FOCO DE TECLADO, COMÚN A TODO EL SITIO (WCAG 2.1 AA, criterio 2.4.7).

   La regla de enlaces de arriba llevaba `outline: none !important` y con eso
   NINGÚN enlace enseñaba dónde estaba el foco al navegar con Tab: ni la
   cabecera, ni el paginador, ni el panel. Un componente que quisiera su anillo
   tenía que ponerle también `!important` para ganarle.

   `:focus-visible` y no `:focus`: el navegador solo lo activa cuando el foco
   llega por teclado (o en un campo de texto, donde siempre hace falta), así que
   hacer clic con el ratón en un botón o un enlace no dibuja el anillo.

   Dos tonos para que se vea sobre cualquier fondo: el contorno oscuro va
   separado 2px del elemento y ese hueco lo rellena la sombra clara. Sobre fondo
   claro se lee el verde oscuro; sobre uno oscuro o verde, el halo blanco.

   Sin `!important` y con la especificidad de una clase: un componente que
   quiera su propio foco lo declara con su selector y gana sin pelearse. Una
   zona oscura puede cambiar solo los colores con los dos tokens. */
:root{
	--focus-ring-color: #14532d;
	--focus-ring-halo: #ffffff;
}

:focus-visible{
	outline: 2px solid var(--focus-ring-color);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--focus-ring-halo);
}


.btnRose{
    background-color: #910c88;
    padding: 5px;
    position: relative;
    top: -5px;
    border-radius: 5px;
    font: bold 11px Arial;
    color: #fff;	
}
.btnRose:hover{
 background-color: #670061 !important; /* 910c88 */
 cursor: pointer; 	
}

 .btnGris{
    background-color: #7f7f7f;
    padding: 5px;
    position: relative;
    top: -5px;
    border-radius: 5px;
    font: bold 11px Arial;
    color: #fff;	
	cursor: pointer;
}

.btnRose:hover{
 background-color: #2f2f2f !important; 
 cursor: pointer; 	
}


b, strong{
color: #000;
font-weight:bolder;
}

p, ul, li,ol{

	text-align:left;
	list-style-image:none;
	list-style-type:none;
	list-style:none;
	
	}	


li{ margin-top: 5px;}
	
	
 textarea, input, select {
	
	

	
	margin:0px;
	border-collapse:collapse;
	margin-left: 0px;
	
	text-decoration:none;
	outline:none;
	border: 1px solid #CCC;
	padding: 2px;
	font-weight:bold;
	font-size: 12px;
	color: #032750;
	border-radius: 3px;
	
	/*
	font:11px Arial,Vernada;
	
	background-color: #000000;
	color: #FFCC66;
	border: 1px solid #4D4D4D; 
	color: #032750;
	*/
	padding: 5px;
    border: 1px solid #CCC;
	
	box-sizing: border-box;
	
	border-radius: 3px;
	

}




textarea.resaltado, input.resaltado, select.resaltado{
	
	background-color: #F4A94E;
	color: #532F06;
	border: 1px solid #EE7153;

	
	
}



 option{border:none}
 



input.custon{
	
	
    border:1px solid #464646;
	background: url(/images/ap_indvs/back_input2.jpg) repeat-x ;	
	
}





img{border:0px; outline: none; }
hr{color:#B1DA57;}	
	



.dato_estadistica{
	
	
color: #17b5fe;
font: bold 10px Verdana, Geneva, sans-serif;
	
}

#loop_connecting{

display:none;   
position:absolute;
z-index:200;
margin-left: 28px;
margin-top: 50px;

/* border: 1px solid #9C6; */




}







.fin_menu img{

float: left;
background:  url(../emboss/barra_horizontal.png)  top right;

}


img{

z-index: 1;

}

.Ttree li{
    padding: 5px;
    border-radius: 5px;
	margin-top: 0px;
	display: flex;
    align-items: center;
}
.Ttree li:hover{
	background-color: #cdedff;
}

.txt_seccion{
	
padding-left:10px;
font: bold 12px  Verdana, Geneva, sans-serif;
color:#029517;	
	
}

.txt_subtext{
	font: 10px  ;
	margin-left:10px;
	color:#666;
	
	
}


.MenuVD{
	
	
	
	width: 100%;/* width of menu*/
    padding: 0px;
	padding-bottom: 10px;
	
    background:  url(/images/box_MD.png) no-repeat;
	background-position: 0px 100%;
	
	
	
}

.MenuVD div.cabecera{
	
	
position:relative;
background:url(/images/box_MD.png)  no-repeat top left;
width:100%;
height:15px;	
	
	
}



.res_EMIL{
	
	
padding:10px 20px;
border:0px solid #FFF;
	
	
}

.res_EMIL div.comb{
clear:both;
text-align:center;
margin-top: 5px;
background:url(/images/backg_box_D.png) no-repeat top left;
width:100%;
height:20px;
color:#07D7FD;
font:bold 10px Arial;

	
	
}


.res_BONO{
	
	
padding:10px 20px;
	
	
}

.res_BONO div.comb{
clear:both;
text-align:center;
margin-top: 5px;
background:url(/images/backg_box_D.png) no-repeat top left;
width:100%;
height:20px;
color:#41D600;
font:bold 10px Arial;

	
	
}


.res_LAPR{
	
	
padding:10px 20px;
	
	
}

.res_LAPR div.comb{

clear:both;
text-align:center;
margin-top: 5px;
background:url(/images/backg_box_D.png) no-repeat top left;
width:100%;
height:20px;
color:#95C61F;

font:bold 10px Arial;

	
	
}

.res_ELGR{
	
	
padding:10px 20px;
	
	
}

.res_ELGR div.comb{
clear:both;
text-align:center;
margin-top: 5px;
background:url(/images/backg_box_D.png) no-repeat top left;
width:100%;
height:20px;
color:#FF6633;
font:bold 10px Arial;

	
	
}

span.resaltar{
	
color: #15BCFF;
font: italic 10px  Arial,Verdana;
font-weight:800;
	
	
	
}

.promo li{

font:  10px Arial,Verdana;
	
	
	
	
	
}


.lista_menu li{

padding-left:10px;
float:left;
color:#999;



}



.div_estadistica{
	
color:#9FF1A5;
height:15px;
font: 10px Arial;
	
	
}


.div_estadistica span.dato{
	
color:#000;
font: 10px Arial;
	
}







.orangeData{
color:#FF9900;
font:11px Verdana, sans-serif;	
	
	
}

.yellowData{
color: #FFC000;
font: 11px Verdana,  sans-serif;
	
}

.redData{
	
color: #900403;
font: bold 11px  Arial, Helvetica, sans-serif;
	
	
}

.whiteData{
color: #BDCEBB;
font: 11px Verdana, sans-serif;
	
}

.azulado{
	
color: #B8D2E0;
font:bold  10px Verdana, Arial,sans-serif;	
	
}

.blueData{
	
color: #91aaea;
font: 11px Verdana, sans-serif;	
	
}

.saldoData{ color: #D7C777; font: bold  12px Verdana, Arial; }
.blueDataDark{
	
color: #05459C;
font: bold  11px Verdana, Arial;


}






.datos_adm span{
	
color: #BDCEBB;
font: 11px Verdana, Geneva, sans-serif;

	
}



.redondeado{
	border-radius: 7px;
}


.spverde{

 color:#7CA11D;
 font: italic 10px Verdana, Arial; 	
	
}

.frameset{

display: inline-block;
vertical-align:top;
margin:0px;
margin-top: 20px;
margin-right: 10px;

border: 0px solid #1a1a1a;
width:auto;


background-color:#1a1a1a;
padding: 10px;
white-space:normal;
outline: none;
border-radius: 10px ;
z-index: 1;

	
	
}
.frameset tr{height: 22px;}

.frameset .label{
margin-left: 0px; 
margin-top: -25px;
position: absolute;
border:0;
	
	
}


.icon{
display: inline-block;
float:left;
margin: 0px 5px;


}




/*  up/down  */

.btn_up{
	
	
margin:0px;
border: 0px solid;
	
	
}

.btn_up li{
	
	
padding:0px;
width:52px;
height:20px;
background:url(/images/ap_indvs/up_downA.png) no-repeat top left;
cursor:pointer;
	
}

.btn_up li:hover{
	
	
padding:0px;
width:52px;
height:20px;
background:url(/images/ap_indvs/up_downB.png) no-repeat top left;
	
	
}

.btn_up li.down{
	
	
padding:0px;
width:52px;
height:20px;
background:url(/images/ap_indvs/up_downA.png) no-repeat top left;
background-position:0px -17px;	
}
.btn_up li.down:hover{
	
	
padding:0px;
width:52px;
height:20px;
background:url(/images/ap_indvs/up_downB.png) no-repeat top left;
background-position:0px -17px;	
}


.aviso{
color:#000;
width: 96%;
background-color:#FFCC66;
border:1px solid #FF9933;
margin-top: 10px;
padding: 6px;
display:  none ;	
	
}


.aviso.ok{
	
color: #E6FFD5;
background-color:#558055;
border: 1px solid #5EBB00;
padding: 6px;

	
}







.iconTransfNacional{	
background: url(/images/transf_NI.png) top left no-repeat;
background-position: 0px -94px;
width: 148px;
height: 90px; 
}

 a.current .iconTransfNacional{	
background: url(/images/transf_NI.png) top left no-repeat;
background-position: 0px 0px;
	
}


.iconTransfInternacional{	
background: url(/images/transf_NI.png) top left no-repeat;
background-position: -148px -94px;
width: 184px;
height: 90px; 
margin-left: 50px
}

 a.current .iconTransfInternacional{	
background: url(/images/transf_NI.png) top left no-repeat;
background-position: -148px 0px;

	
}




	

.noactivo{
 font:10px Verdana, Helvetica, sans-serif;	
 color: #F93;

	
	
}
.activo{
font:10px Verdana, Helvetica, sans-serif;	
 color: #9F0;



	
}


/*  div liquido  */
.dialog {
 width:67%;
 margin:0px auto;
 min-width:20em;
 color:#fff;
}

.dialog .hd .c,
.dialog .ft .c {
 font-size:1px; /* ensure minimum height */
 height:13px;
}

.dialog .ft .c {
 height:14px;
}

.dialog .hd {
 background:transparent url(tl.gif) no-repeat 0px 0px;
}

.dialog .hd .c {
 background:transparent url(tr.gif) no-repeat right 0px;
}

.dialog .bd {
 background:transparent url(ml.gif) repeat-y 0px 0px;
}

.dialog .bd .c {
 background:transparent url(mr.gif) repeat-y right 0px;
}

.dialog .bd .c .s {
 margin:0px 8px 0px 4px;
 background:#000 url(ms.jpg) repeat-x 0px 0px;
 padding:1em;
}

.dialog .ft {
 background:transparent url(bl.gif) no-repeat 0px 0px;
}

.dialog .ft .c {
 background:transparent url(br.gif) no-repeat right 0px;
}


/* content-specific */

.dialog h1 {
 /* header */
 font-size:2em;
 margin:0px;
 padding:0px;
 margin-top:-0.6em;
}


mov_neg{color: #FF6600;}
mov_pos{color: #66CCFF; }




 .submenu .menuUsuario li{position: relative}
 .axbar.menu{position:absolute; margin-left:5px; margin-top:3px}

.placeholder-wraper{position: relative;   display: inline-block; padding: 0;z-index: 100; overflow:hidden;}
.placeholder{position: absolute;  text-align:center; vertical-align: central; font:bold 11px Arial;  z-index:100; white-space:nowrap}
.placeholder-wraper .cleaner{right: 3px; top: 4px; position: absolute}

.sp-img{ vertical-align:top ; line-height:20px;}


.green{color:#84a24f;  }
.azul{color: #8eb2d5; }




conf{display: none;}

input.search{
    font-size:18px;
    font-family: Arial, helvetica;
    transition: all 0.75s ease-in-out;
    -webkit-transition: all 0.75s ease-in-out;
    -moz-transition: all 0.75s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:1px solid rgba(0,0,0, 0.2);
    color:gray;
    background-color:#eee;
    padding: 3px;
}
 
input.search:focus {
    box-shadow: 0 0 10px #aaa;
    -webkit-box-shadow: 0 0 10px #aaa;
    -moz-box-shadow: 0 0 10px #aaa;
    border:1px solid #999;
    background-color:white;
}



.linea_3d{
border:0; 
border-bottom: 1px solid #fff; 
height: 1px; 
background-color: #e1e1e1; 
width: 100%;
margin-top: 5px;
margin-bottom:  5px;
}



.linea_3d.bottom{
border-bottom: 1px solid #0c0c0c;
background-color: #404040; 
}




.msgBox{
	padding-left: 50px; 
	margin-right:10px; 
	height: 100%; 
	font: 13px Arial,Verdana;	
}

.msgBox .iconStatus{
position:absolute; 
left: 16px;	
	
}

.wraper_msgbox .titulo  b{
color: #e0b83d	;
}

.loaderCircular {
  font-size: 20px;
  margin: 5em auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}


 

seccion2{
  padding: 20px;
  padding-top: 20px;
  position:relative;
  margin-bottom: 20px; 
  border: 1px solid #e3dfef;	
      
	background-color: #f4f6f8;
	/* padding: 5px; */
	border-radius: 5px;
	padding: 10px;
    
	margin-top: 20px;
	color: #000;
	display: block;
	margin: 10px;

}

seccion2 .label, seccion2 .h2{
  font: bolder 16px Arial;
  color: #7f7f7f;
  margin-bottom: 10px;  
  background-color: #fff;
  position:absolute;
  top: 0px;
  left: 0px;
}



bloq, bloq-row, bloq-inline
{
	/*width: 100%;*/
	height: auto;
	margin-bottom: 10px;
	position: relative;
	display: block;
	flex-direction: row;
}


bloq-row, bloq-inline
{
	width: 100%;
	display: flex;
}

bloq-row > *
{
	width: 100%;
}

bloq-row > *:not(:last-child), 
bloq-inline > *:not(:last-child)
{
	margin-right: 10px;
}




.OverlaySimple  span,
.OverlaySimple  div,
.OverlaySimple  p
{	
    color: #000;
}


.TOverlayWin .overlay-body{
	min-width: 350px;
    min-height: 60px; 
	font-size: 14px;
}

.TOverlayWin  .seccion,
.TOverlayWin   seccion
{	
    border: 0px solid #bbb;
}

.TOverlayWin .actions-container{
	display: none;
	text-align: right;
    border-radius: 5px;
    padding: 5px;
    justify-content: flex-end;
    position: relative;
}


/* SECCIONES --------------------*/


seccion
{
	position: relative;
	
	box-sizing: border-box;
	color: inherit;
	margin-bottom: 5px;
	padding: 10px 12px;
	vertical-align: top;
	
	padding-top: 30px;
	display: block;
	background-color: #FFF;
  

	position: relative;
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 4px 0px;
    padding: 20px;
    box-sizing: border-box;

	/* SIN RECUADRO, igual que su gemela TSection unas líneas más abajo: las dos
	   son "la sección" del framework y tenían el mismo `border:1px solid #bbb`.
	   Una sección agrupa campos DENTRO de una ficha que ya tiene marco, así que
	   el borde dibujaba una caja dentro de otra. Se veía en "Mi cuenta" del
	   cliente: el bloque de direcciones salía con este #bbb al lado de otros con
	   el borde propio del componente (#e1e8f2), y no casaban.

	   Quien quiera el recuadro tiene `seccion.card` justo aquí debajo, que lo
	   declara a propósito. */
	border-radius: 0;
	border: 0;

    box-shadow: none;
    margin-top: 10px;
	padding-top: 16px;
}

seccion.card{
	background-color: #f5f5f5;
	border: 1px solid #bbb;

}

seccion > h3, 
seccion > label{
   	font-weight:600;
	font-size: 16px;

    color: #000;
    position: relative;

    content: attr(label);
    margin-bottom: 0px;
    /*border-left: 4px solid #5bc0de;*/
   
    left: 0px;
    border-radius: 4px;
    position:relative;
    background-color: transparent;

    display: block !important;
	margin: 0px;
	margin-bottom: 10px;
}

seccion seccion{
	position: relative;
	border: 0px solid #bbb;	
	margin-top: 12px;
	/*background: #f1f1f1;*/
    border-radius: 6px;
	padding: 0;
}




seccion seccion > label{
	border-left: 0px solid #5bc0de;
    font-size: 14px;
	 opacity: .85;
}

seccion > p
{
	margin-top: 0;
}

.seccion > .label, seccion > title,  .seccion > h2, seccion > h2, seccion:after
{
	box-sizing: border-box;
	position: absolute;
	padding: 0px;
	top: -12px;
	left: 0px;
	/* margin-top: -21px; */
	padding-right: 5px;
	padding-left: 0px;
	color: #09F;
	background-color: #E3EFFF;
	font: 600 14px  'Inter', sans-serif;
	background-color: #f9f9f9;
	clear: both;
	color: #666;
	margin: 0px;
	font-size: large;
	color: #111;
}

seccion:after
{
	content: attr(text)  attr(label) ;
	left: 0px;
	padding: 0px 5px;

}

/* ─────────────────────────────────────────────────────────────────────────
   LAS SECCIONES QUE PINTA EL DSL, LIMPIAS.

   El tag <seccion> viene del admin viejo y arrastra estilos globales que se
   dan por supuestos en aquellas pantallas: Tadmin.css le pone
   `border:1px solid #bbb`, fondo blanco y radio a TODOS, e index.css le añade
   el `:after` que escribe el atributo `label`, más el bloque de `seccion2`
   con su borde lila, su fondo gris y 20px de relleno.

   En un formulario del DSL eso aparece como un recuadro gris que nadie ha
   pedido, dentro de la caja que ya lo contiene. No es hipotético: hay
   componentes que ya se defendían por su cuenta --TArticleProfile.css repite
   `seccion{background:transparent;border:0}` solo para eso--, que es la señal
   de que el problema estaba en la base y no en cada pantalla.

   Se neutraliza SOLO lo que genera el DSL, marcado con .dsl-seccion desde
   TComponentES6.renderNode y jQuery_FormRenderer. Las 95 reglas que cuelgan
   del tag y los 59 sitios que lo escriben a mano siguen igual: quien quiera el
   recuadro lo sigue teniendo.
   ───────────────────────────────────────────────────────────────────────── */
seccion.dsl-seccion,
seccion.dsl-seccion seccion.dsl-seccion {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	margin-bottom: 0;
}

/* El seudoelemento repetía el rótulo a partir del atributo `label`: en el DSL
   el título ya se pinta como <label> de verdad, así que salía dos veces. */
seccion.dsl-seccion:after {
	content: none;
}

.fa-solid, .fas
{
	margin-right: 5px;
}

 seccion > h3
{
	color: #000;
    font: bolder 1.4em Roboto, Arial, Helvetica, sans-serif;
	clear: both;

}


.material-icons
{
	font-size: 20px;
}



a, a:focus, a:active{
	font: normal 12px 'Inter', sans-serif;
}
/*-------------------- 0  ---------------------------------*/



seccion2 *{
	line-height: 16px;
	    font-family: 'Inter', sans-serif;
}
seccion3 {
	display: block;
	background-color: #f2f2f2;
    padding: 10px;
    border-left: 5px solid #e67e23;
    margin-bottom: 20px;
    font-family: "Open Sans", open-sans, sans-serif, Arial;
	border-radius: 6px;
}

seccion3 > label{
	font-weight:600; 
	font-family: 'Inter', sans-serif;
	position: relative;
    top: -10px;

}
seccion3 b{
	font-weight:600;
}



.advise-discount{
	background-color: rgb(219 6 128 / .1);    
	font-weight: 600 !important; 
	margin: 0; 
	margin-bottom: 10px;    
	border: 1px solid #ed9bca;
}

seccion2 > label{
   	font-weight:600;
    color: #000;
    position: relative;
    padding: 5px;
    content: attr(label);
    margin-bottom: 0px;
 
    top: -10px;
    left: 0px;
    border-radius: 4px;
    position: relative;
    background-color: transparent;
    display: block !important;
    position: relative;
}


seccion2 > title2{
    background: linear-gradient(to bottom, transparent 50%, #f4f6f8 50%);
    top: -18px;
    position: relative;
    left: 10px;
    padding: 0px 10px;
    font-weight: bold;
}



/*-------------------- 0  ---------------------------------*/





 table
{
    border-spacing: 2px !important;
    border-collapse: separate !important;
}
 
 table td{
font: 12px Arial;
vertical-align: top;

font: 12px Arial;
vertical-align: top;
color: #000;
padding: 5px;

position:relative;
    text-align: left;
    vertical-align: top;
    background-color: #f4f6f8;
    padding: 5px;

}

table th{
	padding: 5px;
    color:#000;
    font: 600 14px Arial;
    vertical-align: top;
    text-align: center;
}


table tr{ position:relative;}
table td span{


}





td.status
{
    padding: 0px;
}

thead{
   border-bottom: 1px solid #bbb;
}

thead tr{
margin-bottom: 10px;
}


tbody tr{

}

table border{
    height: 100%;
    width: 4px;
    /* border-radius: 5px; */
    position: absolute;
    left: -3px;
    top: 0px;
}

table tr:hover .border{
    background-color: #5cb85c !important;
}

table img{
    vertical-align: middle;
    width : 20px;
}

iconify-icon {
    font-size: 20px;
    top: 0px;
    position: relative;
	margin-right: 5px;
}


 
input.pending
{    
	border-bottom: 1px solid #f91919 !important;
	background: #ffeaec;
}

.Tselect2.pending {
    border-bottom: 1px solid #f91919 !important;
    background: #ffeaec;
}

  


/*    box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 5px; */ 
.wraper_msgbox{ 
position:relative; 
width:auto; 




/*
border: 30px solid transparent !important;
border-image: url("/plantillas/img/cuadro_msg_plano.png") 38 20 21 13 fill stretch !important;
border-width: 38px 21px 22px 13px !important;
*/

box-sizing: border-box;
border: 8px solid rgba(29,29,29, 0.3) !important;
border-radius: 5px;


box-shadow: 6px 5px 31px -5px rgba(0,0,0,0.6);
	
	

}

li[data-icon], div[data-icon], span[data-icon]
{
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: 3px;
}


.wraper_msgbox .body {	
position:relative; 

background-color: #f9f9f9;
border: 1px solid  #6a6766; 
padding:  0px;	
top: 1px;
left: 0px;

box-sizing: border-box;
border-radius: 5px;
}



	.wraper_msgbox .body > .zona_cliente {
		position: relative;
		z-index: 10;
		border: 0px solid #292929;
		text-align: left;
		
		min-height: 60px;
		min-width: 300px;
		font: 12px Tahoma, Geneva, sans-serif;
		padding: 20px;
		color: #ccc;
		border-radius: 0px;
		overflow: auto;
		max-height: 85vh !important;
		   background-color: #FFF;
    border-radius: 5px;
	
		
		/* box-sizing: border-box; */
	}

.wraper_msgbox .body > .zona_cliente div{
	
font: 12px Arial;
}


.wrapClient  .body > .zona_cliente{
padding: 20px ;
display: block; 
margin: 10px; 
border-radius: 5px; 
background: #fff; 
border: 1px solid #e3dfef;	
	
}



.wraper_msgbox > .logo{position:absolute; margin-top: -3px ; margin-left: 10px ; } /* -6 25*/
.wraper_msgbox > .close{display: none; position:absolute; cursor:pointer; margin-left: -13px; margin-top: -30px ; left: 100%; }


.wraper_msgbox .icon_msg{ background:url(images/sp.gif); top:0px; left:0px; position:absolute; margin-top:-10px ; margin-left: 20px}

.wraper_msgbox .titulo{
z-index: 5; 
position:relative; 
width:100%; 
height: 35px; 
margin-top: 0px; 
border: 0px solid; 
text-align:center;  
cursor:move; 

border-top-left-radius: 3px;
border-top-right-radius: 3px;

top: -1px;
display: none;
/*
background: url(/plantillas/img/fondo_titulo.png) no-repeat; background-size: 100% 100%;
*/


background-color: #6a6766;
box-sizing: border-box;


}


.wraper_msgbox .titulo .txt{position: relative; z-index: 5; font: bold 14px   Tahoma, Geneva, sans-serif; color:#FFFFFF; margin:auto;}
.wraper_msgbox .titulo div.lef{text-align:left; margin-left: 40px ;}

.wraper_msgbox .titulo > img{ 
z-index:1; 
position:absolute; 
top: 0px; 
left: 0px;  
width: 100% ;
border-top-left-radius: 5px;
border-top-right-radius: 5px;



}








.wraper_msgbox .pie{
position: relative; 
clear:  both; 
min-height: 35px;  
padding: 10px; 

padding-top: 0px; 
text-align: right;

border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
       z-index: 100;
    flex-direction: row;
}



/*.wraper_msgbox div{ font: 11px Arial; }*/

.btn.OK {
	-moz-box-shadow:inset 0px 1px 0px 0px #afeb7b;
	-webkit-box-shadow:inset 0px 1px 0px 0px #afeb7b;
	box-shadow:inset 0px 1px 0px 0px #afeb7b;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809));
	background:-moz-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:-webkit-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:-o-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:-ms-linear-gradient(top, #89c403 5%, #77a809 100%);
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809',GradientType=0);
	background-color:#89c403;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
}

.btn.OK:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403));
	background:-moz-linear-gradient(top, #77a809 5%, #89c403 100%);
	background:-webkit-linear-gradient(top, #77a809 5%, #89c403 100%);
	background:-o-linear-gradient(top, #77a809 5%, #89c403 100%);
	background:-ms-linear-gradient(top, #77a809 5%, #89c403 100%);
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403',GradientType=0);
	background-color:#77a809;
}


.btn{margin-right: 20px; font: normal 13px Arial, Verdana, Helvetica;user-select: none; }
.btn.NOK {color: #666; line-height: 28px;}
.btn.NOK span{color: #666; line-height: 28px;}

.btn.disabled{ opacity: 0.6;}
.btn.OK span{ color: #fff; }
.wraper_msgbox .pie .linea_3d{
	clear:both;
	margin-bottom: 5px;
}





.winBlack > .body{ background-color: #292929 !important;}
.winBlack .linea_3d{background-color: #0c0c0c; width: 100%; margin-top: 5px 0px; border: none; height: 1px; border-bottom: 1px solid #404040; }

.winBlack .titulo{
background: url(/plantillas/img/fondo_titulo.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 5px;	
	
}

.winBlack  b{color: #cfa636; } /*#72a1ff;*/
.winBlack .titulo .txt{color: #bbb;}



.tooltipForm{
	
position: absolute;
white-space:nowrap;
display: none;
background-color: #292929;

padding: 5px;
margin:0;	
width: auto;
height: auto;

border: 1px solid #636363;
 box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 5px;
 border-radius: 7px;

 /*
 border-image: url("/plantillas/img/tooltip_field2.png") 7 15 14 7 fill repeat;
 border-width: 7px 15px 14px 7px;
 */
}





.wraper_msgbox2 .body > .zona_cliente {
	background-color: #FFF;
	overflow: overlay;
}
.wraper_msgbox2 .pie{ position:relative; padding: 10px; padding-top: 10px; background-color:#FFF;}












.tooltip1{
	
background-color: #292929;
display:none;
overflow: hidden;
padding: 10px;
border: 1px solid #424242;	
border-radius: 5px;
 box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 5px;
	
}


.tooltipForm2{display: none;}
.tooltipForm2 div, .tooltipForm2 span{color:#000}

.tooltipForm2 .flecha{
position:absolute;	

z-index: 30;

}



.tooltipForm2 .flecha.dir_1{/* down */
left: 0;
bottom:0; /* al fondo del div */
left: 50%;
margin: 6px -14px;

background: url(/img/flechaD_tooltip.png) no-repeat;
display: none;	

height: 16px;
width:  27px;	
	
}

.tooltipForm2 .flecha.dir_3{/* left */
background: url(/img/flechaL_tooltip.png?) no-repeat;
top: 50%;
margin-top: -8px;
left: -5px;
height: 25px;
width: 15px;

display: none;	
	
}


.tooltipForm2 .flecha.dir_7{/* right */
background: url(plantillas/img/flechaD_tooltip.png) no-repeat;
top: -22px;
left: 14px;
height: 16px;
width:  27px;
display: none;	
	
}





.btn_menu{
display: block;
/*position: absolute;*/
top: 6px;
float:right;
 /*right: 30px; */
height: 23px;
width: 22px;
z-index: 100;
}

.btn_menu.conf{
background: url(images/btn_popup_conf.png?m=6ab3b271a2eab)	 no-repeat;
background-position: -54px 0px ;

}

.btn_menu.conf:hover{
background-position: -27px 0px;

}


.btn_menu.close{
background: url(images/btn_popup_close.png?m=6ab3b271a2ead) no-repeat;
background-position: -56px 0px ;
}
.btn_menu.close:hover{
background-position: -27px 0px;

}

.btn_menu.mdown{
background-position: 0px 0px;

}











/*  NOTIFICACIONES -----------------*/
.tooltipForm.notif{ }
.tooltipForm.notif .titulo{ border-bottom: 0px solid #666; }
.tooltipForm.notif .titulo .txt{margin-bottom: 5px; font:bold 14px Arial; color: #D6A610}
.tooltipForm.notif .zona_cliente{padding: 0; margin: 0;margin-top: 15px; font: 10px Arial; white-space: normal; line-height:12px;}
.tooltipForm.notif .close{ position:absolute; cursor:pointer; margin-top: -20px ; left: 100%; margin-left: -30px;}
.tooltipForm.notif .pie{clear:both;  width:100%; height:35px; top:100%;  margin-top: 10px; padding-bottom:5px; border: 0px solid; overflow:hidden;text-align:right}





/* CONTENIDO DE LA NOTIF...item de usuario */
.item_notif{
position: relative;
margin-bottom: 10px; 
border-bottom: 0px solid #444;
padding: 0px; 
height: 50px;
overflow:hidden;
min-width: 260px;
}



.item_notif.small  .foto{height: 50px; width: 50px;}

.item_notif .retrato{ float:left; display:block; margin-right: 10px;  height:50px; overflow:hidden;}
.item_notif .estadoOnline{bottom: 0px; position:absolute; left:0px;}

.item_notif .msg{position: relative; width:200px; margin-bottom: 10px;  overflow:hidden;   vertical-align:top; display:inline-block;   }



.item_notif .localidad{font: 10px Verdana;color: #91aaea}

.item_notif .register-time{position: relative; color: #666; bottom: 0px }
.item_notif .register-time img{  margin-right: 5px; }
.item_notif .prettydate{ vertical-align:top; color: #606060}
.item_notif .fotos{position: absolute; left: 63px; bottom: 2px; }



.item_notif.small .foto{height: 50px;  width: 50px;}
.item_notif.small .fotos{left: 53px;}




#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}



#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

#triangle-topleft { 
   width: 0; 
   height: 0; 
   border-top: 100px solid blue; 
   border-right: 100px solid transparent; 
}

#triangle-topright { 
   width: 0; 
   height: 0; 
   border-top: 100px solid blue; 
   border-left: 100px solid transparent; 
}

#triangle-bottomleft { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-right: 100px solid transparent; 
}

#triangle-bottomright { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-left: 100px solid transparent; 
}

/* comentario con flecha lateral izq */
#speech-bubble {
   width: 120px; 
   height: 80px; 
   background: blue;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}


.btn-actions{
	height: 30px;
    margin-top: 35px;
    display: flex;
    justify-content: flex-end;
}

.btn-secondary,
.btn-primary {
	   line-height: 2px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 14px;

    color: white  ;
	border-image: none;
	margin-left: 6px;
    display: flex;
	background: #FFFFFF;
    align-items: center;	 
	width: fit-content;
}
.btn-primary{
	background: #1e293b !important;
	color: #fff !important;
}
.btn-primary i
{
	color: #fff !important;
}


.btn-secondary {
	background: white;
    color: #1890ff !important;
    border: 0px solid #d9d9d9;
}

/* EL FONDO DEL SECUNDARIO NO CAMBIA AL PASAR POR ENCIMA.
   Se estaba tinendo del mismo azul que su texto, asi que el boton "Cancelar"
   de los modales desaparecia bajo el cursor: azul sobre azul. El fondo blanco
   ya estaba declarado arriba, pero alguna regla de hover lo pisaba; aqui se
   fija para los tres estados en los que se veia. */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
	background: white !important;
	color: #1890ff !important;
}

.btn:hover{
	opacity: 0.9;
}





.floating-element {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    pointer-events: none; /* Opcional: para que no interfiera con clicks */
}

.floating-badge {
    position: absolute;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.TComponentES6 .actions{
	height: auto !important;
	display: flex;
    justify-content: flex-end;

}
.TComponentES6 button{
	text-decoration: underline;
	height: 25px;
	display: flex;
    justify-content: center;
    align-items: center;
		text-decoration:  none;
	border-image: none;
}
/* AQUI HABIA UN :hover QUE CAMBIABA EL display, Y MOVIA LOS BOTONES.
 *
 * Decia exactamente lo mismo que la regla de arriba --display:flex y
 * justify-content:center--, asi que no añadia nada... salvo peso: (0,3,1)
 * frente a los (0,2,0) de un `.TComponente .su-boton`. Resultado: cualquier
 * boton que se declarara `inline-flex` pasaba a `flex` --o sea, a bloque-- al
 * pasar el raton por encima, se estiraba al ancho de su celda y daba el salto.
 *
 * Le paso al boton "Ver" de los vales del cliente, y antes a TSellerShipments,
 * que tuvo que defenderse repitiendo su display con la misma especificidad.
 * Se quita la regla en vez de seguir parcheando componente a componente: el
 * hover no tiene por que tocar la caja, solo el color. */

row{
	
	display: flex;
    align-items: center;
    width: 100%;
	margin-bottom: 10px;
}

label{
	display:flex;
	align-items: center;
}


span.label-gray{
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--gray-100);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-right: 5px;
	box-sizing: border-box;
	margin: 0;
}

input::placeholder,
textarea::placeholder{
  color: #888;
  font-style: italic;
  font-size: 12px;
  font-weight: normal;
  opacity: 0.8;
}

textarea
{
	padding: 5px;
	font-size: 1.2em;
    transition: border-color 0.2s;
	border: 0;
}

.TTextarea textarea{
      border: 0 !important;
    left: 1px;
    position: relative;
}

input[type=number]{
	text-align:right;
}

input{
    height: 30px;
    border-radius: 6px;
	font-size: 1.0em;
}

input[type="checkbox"], 
input[type="radio"] {
    height: 20px;
}

.Tselect2{  
    min-height: 30px !important;
    border-radius: 6px; 
	font-size: 1.0em !important;
}
.Tselect2,
td input:not([type="radio"]):not([type="checkbox"]) {
    width: 100%;
}

/* `:not(.TCheckbox)` porque esta regla GANA a `.TCheckbox` por especificidad
   --0-1-2 contra 0-1-0-- y le imponia el `flex-wrap: wrap` de aqui abajo, que
   partia el interruptor: casilla en una linea y titulo debajo. El TCheckbox
   declara su propio nowrap; el resto de labels con input siguen igual. */
label:not(.switch):not(.TCheckbox):has(input){
    display: flex;
    gap: 0px 6px;
    cursor: pointer;
    margin-left: 0px;
    flex-direction: row;
    flex-wrap: wrap;
	    justify-content: flex-start;
		align-items: center !important;
}

.field-wrapper {
	gap: 0px !important;
	display:inline-flex ;
	width: 100%;
}
/* EL ROTULO DE UN CONTROL CRECE CON SU TEXTO.
   Estaba en 'height: 22px' fijo: un rotulo de dos lineas se salia de su caja y
   se montaba sobre el campo, y el hueco sobrante descuadraba las filas de dos
   columnas --dos campos con el mismo contenido quedaban a distinta altura--.
   El minimo mantiene la alineacion cuando el texto es corto. */
.field-wrapper label{
	min-height: 16px !important;
	height: auto !important;
	margin-bottom: 0px !important;
}

/* UN ROTULO CON INTERRUPTOR MIDE LO MISMO QUE UNO SIN EL.
   Un label con un checkbox dentro --los `labelToggle` del DSL: "Permitir
   Compra Directa", "Activar tal cosa"-- media 28px contra los 16px de sus
   vecinos, porque el checkbox trae los margenes del navegador y estira la
   caja. Con eso su campo empezaba 12px mas abajo y la fila entera salia
   descuadrada: el input hundido respecto a los de al lado, y el hint todavia
   mas.
   Se arregla aqui y no en la ficha donde se vio (la de subasta) porque le pasa
   a CUALQUIER formulario del DSL que use un rotulo con interruptor. */
.field-wrapper > label{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	line-height: 16px;
}

.field-wrapper > label input[type=checkbox],
.field-wrapper > label input[type=radio]{
	margin: 0 !important;
	flex: none;
	width: 13px;
	height: 13px;
	vertical-align: middle;
}


.actions-container{
	display: flex;
    justify-content: flex-end;
}

.TValueAndType
{
	display: flex;
	gap: 6px;
	flex-direction: column;


	> div{
		display: flex;
		flex-direction: column;
		gap: 6px;
		border: 1px solid #CCC;
		border-radius: 6px;
	}
	input{
		border: 0;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	
	input[disabled],
	select[disabled]{
		background-color: #e5e5e5 !important;
	}
	select{
		border: 0;
		height: 30px;
		min-height: 100%;
		width: auto;
		border-radius: 6px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
        
	}
}

.msgBackend{
	color: #000000;
	 border: 1px solid #25b9d7;
	 background-color: #beeaf3;
	 padding: 10px; 
	 border-radius: 5px;   
	 margin-top: 10px;
}

/* plugin filtro de caracteres especiales en inputs */
.fc-error {
    color: #c00;
    font-size: 11px;
    font-style: italic;
}

.warning{
	background: #fff7e6;
    border: 1px solid #ffecb5;
    padding: 8px 10px;
    border-radius: 6px;
    color: #7a4b00;
    font-size: 13px;
}

/* (Aquí estaba `.TTabES6-panel tsection { padding: 0 }`: ya no hace falta, la
   sección no trae relleno propio. Ver la regla de `TSection`.) */

/* LA SECCIÓN AGRUPA Y TITULA. NO DIBUJA NADA.
 *
 * Ni borde, ni fondo, ni relleno. Lo único que pone es el AIRE que separa un
 * grupo del siguiente, que es el `margin-bottom`.
 *
 * ── QUÉ HABÍA, Y POR QUÉ SOBRABA ────────────────────────────────────
 *
 * Tenía `background: #fff` y `padding: 20px`. Con eso, un formulario dentro de
 * una ficha quedaba con DOBLE ENVOLTORIO: la caja de la ficha --que ya trae su
 * marco y sus veinte píxeles-- y encima la caja blanca de cada sección. Se ve
 * como un recuadro dentro de otro, y con varias secciones seguidas, como una
 * reja.
 *
 * Que sobraba lo decía este mismo fichero en dos sitios: `.TOverlayWin TSection
 * { padding: 0 }` lo quitaba en las ventanas y `.TTabES6-panel tsection {
 * padding: 0 }` en los paneles de pestaña -- las dos excepciones existían
 * porque el contenedor ya ponía el relleno. Y ese es SIEMPRE el caso: una
 * sección vive dentro de algo, y ese algo es quien separa del borde.
 *
 * El borde ya se había quitado antes por el mismo motivo. Ahora se van también
 * el fondo y el relleno, y las excepciones dejan de hacer falta.
 *
 * LO QUE SÍ DIBUJA ES `TCard`: fondo, borde y relleno propios. Esa es la
 * diferencia entre las dos y la razón de que existan las dos.
 */
TSection{

	box-sizing: border-box;

	/* El aire entre grupos, que es lo único que aporta la caja. */
	margin: 0 0 10px;
	padding: 0;

	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;

	color: inherit;
	vertical-align: top;

	display: block;
	position: relative;
	min-width: 0;
	width: 100%;
}

/* (Aquí estaba la excepción de las ventanas, que quitaba borde y relleno: la
   sección ya no trae ninguno de los dos.) */

TSection TSection
{
	padding: 0;
	border: 0;
}

TSection TSection > label
{
	font-size: 14px;
}

TSection > label{
   	font-weight:600;
	font-size: 16px;

    color: #000;
    position: relative;

    content: attr(label);
    margin-bottom: 0px;
    /*border-left: 4px solid #5bc0de;*/
   
    left: 0px;
    border-radius: 4px;
    position:relative;
    background-color: transparent;
    /* SIN `!important`.
     *
     * Este `block` ganaba a TODO --incluido el `display: flex` que el propio
     * TSection.js le pone en linea-- y dejaba el rotulo como una caja block. Con
     * eso, ni el `gap` separaba el icono del titulo ni el `margin-left: auto`
     * empujaba el subtitulo a la derecha: dos cosas escritas que no se
     * aplicaban, y ningun aviso.
     *
     * El valor se queda igual, asi que una seccion que no declare nada se sigue
     * viendo como hasta ahora; lo que cambia es que ahora la hoja del componente
     * --TCard.css, que viste el rotulo de TSection y de TCard-- puede ponerlo en
     * fila cuando hace falta. */
    display: block;
	margin: 0px;
	margin-bottom: 10px;
}
TSection.has-right-divider{
	padding-right: 20px;
	border-right: 0px solid #bbb;
}
TSection.has-right-divider::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 2px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0,0,0,.15),
        transparent
    );

	padding: 0px;
}

TSection label{
	display: flex;
}

TSection label .TSwitch{
	top: 5px;
	position: relative;
}



.TInput.has-error input {
    border-color: #e53935;
}

.section-errors {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}

.wizard-summary {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    padding: 10px;
    margin-bottom: 15px;
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}


.form-infobar {
    position: sticky;
    top: 0;
    background: #fff3cd;
    border-bottom: 1px solid #ffeeba;
    padding: 8px 12px;
    display: none;
    z-index: 10;
}
.form-infobar.show {
    display: flex;
    justify-content: space-between;
}


.TInput input[type="color"] {
    height: 36px;
    padding: 2px;
    cursor: pointer;
}

tr.highlight td {
    position: relative;
}

tr.highlight td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: red;
}

tr.selected td:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;              /* ancho del borde */
    background: #3b82f6;     /* color selección */
}

.TTableES6 table{
 outline: none;
}

TFlex, TRow {
    display: flex;
    gap: 12px;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

TFlex > *{
	width: 100%;
}

TInput .input-error{
	color:red;
}


.TCheckbox {
    display: flex ;
    flex-direction: row;
    justify-content: flex-start;

    /* NOWRAP, Y NO ES UN DETALLE.
     *
     * La regla global de mas arriba --`label:not(.switch):has(input)`-- pone
     * `flex-wrap: wrap` a todo <label> que lleve un input dentro, y un
     * TCheckbox es exactamente eso. Con una etiqueta larga --«Aplicar la
     * Directiva Omnibus al mostrar rebajas»-- el texto no cabia al lado de la
     * casilla y se iba DEBAJO: la casilla quedaba sola en su linea y el titulo
     * en dos, asi que dejaba de leerse como un interruptor con su nombre.
     *
     * Con nowrap, la casilla y el texto se quedan en la misma linea y es el
     * TEXTO el que envuelve dentro de su columna, que es lo que se espera. */
    flex-wrap: nowrap;

	.wrap-input{
		border: 0 !important;
	}

}

.TRadio{
	display: inline-flex !important;
    flex-direction: column;
	width: auto;

	.wrap-input{
		border: 0 !important;
	}
}

.TTableES6  #__select_all,
.TTableES6  #selector{ 
    display: inline-flex !important;
}

.row-selector .TCheckbox{
	display: inline-flex;
}

.hint{
	margin-top: 5px;
	color:#a1a1a1 !important;
}


.TComponentES6{
	position: relative;
}

/* arrow */
.TSelect:not(.multi) .wrap::after {
      content: "";
    position: absolute;
    right: 12px;
    top: 54%;

    width: 5px;
    height: 5px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: translateY(-50%) rotate(-45deg);
    transition: transform 160ms ease;
    pointer-events: none;



	transition:  transform 180ms cubic-bezier(.4, 0, .2, 1);

	


}

	/* estado abierto */
	.TSelect.opened .wrap::after {
		transform: translateY(-50%) rotate(-135deg);
	}
/* UN CONTROL APAGADO TIENE QUE VERSE APAGADO.
   Aqui solo se atenuaba la flechita, asi que un TSelect o un campo apagados por
   `rules: {enabled: …}` seguian pareciendo escribibles: el vendedor los pulsa,
   no responden y no hay nada que se lo explique. `pointer-events` es ademas lo
   unico que impide de verdad abrir el popup, porque los enganches del control se
   hicieron al construirlo. */
.TSelect.disabled,
.TInput.disabled,
.field-wrapper.disabled {
    opacity: .55;
    pointer-events: none;
}
.TSelect.disabled::after {
    opacity: .4;
}

.TSelect.readonly::after {
    opacity: .6;
}

.TTabES6
{
    margin-top: 20px;
	.TTabES6-header{
		margin-top: 5px;
	}
}



/* Estilos para TMaskedInput */
.tmask-overlay {
    z-index: 1;
    user-select: none;
}

.TMaskedInput .wrap-input {
    position: relative;
}

.TMaskedInput input {
    background: transparent;
    position: relative;
    z-index: 2;
}

.TMaskedInput input:focus + .tmask-overlay {
    display: block !important;
}

/* Indicador visual para máscara incompleta */
.TMaskedInput.incomplete input {
    border-color: #ff9800;
    background-color: #fff8e1;
}

.TMaskedInput.complete input {
    border-color: #4caf50;
}

.tnotify {
    position: fixed;
    right: 20px;
    top: 20px;
    background: #222;
    color: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all .25s ease;
    z-index: 9999;

    /* ANCHO PARA UNA FRASE, no para una palabra. La caja se ajustaba al
       contenido y un aviso de varias lineas --los campos que han fallado al
       guardar-- salia en una columna de dos palabras de ancho, partida en
       pedazos. Con un minimo y un maximo cabe el mensaje y no invade la
       pantalla. */
    min-width: 260px;
    max-width: min(420px, calc(100vw - 40px));
}

.tnotify.show {
    opacity: 1;
    transform: translateY(0);
}

/* LA PILA DE TOASTS (TNotify.toast).
 *
 * `.tnotify` es `position: fixed; top: 20px`, asi que dos avisos seguidos se
 * pintaban UNO ENCIMA DEL OTRO. Dentro de la pila dejan de posicionarse solos
 * y los ordena el flex en columna; la pila si es fija.
 *
 * pointer-events: none en el contenedor para no tapar la pantalla que hay
 * debajo, y auto en cada aviso para que se pueda pulsar el suyo. */
.tnotify-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.tnotify-stack .tnotify {
    position: static;
    top: auto;
    right: auto;
    pointer-events: auto;
    box-shadow: 0 6px 20px rgba(15, 30, 60, .22);
}

/* El punto que late mientras algo esta en curso: un «Guardando…» que no se
   mueve no se distingue de uno que se quedo colgado. */
.tnotify-loading { background: #334155; }

.tnotify-loading .tnotify-message::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #fff;
    vertical-align: middle;
    animation: tnotify-latido .9s ease-in-out infinite;
}

@keyframes tnotify-latido {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

.tnotify-title { color: #fff;  }

/* pre-line: un aviso puede traer varias lineas --los campos que han fallado en
   un guardado, por ejemplo-- y sin esto salian todas pegadas en un parrafo.
   Se resuelve aqui y no metiendo <br> en el mensaje: el texto llega del
   servidor y el toast lo pinta con innerHTML. */
.tnotify-message { color: #fff; white-space: pre-line;  }
.tnotify-success { background: #28a745;  }
.tnotify-error   { background: #dc3545; }
.tnotify-warning { background: #ffc107; color:#000 }
.tnotify-info    { background: #007bff; }


.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    font-family: system-ui, sans-serif;
    position: relative;
	margin-right: 10px;
}

.ui-icon.warning {
    background: #fff3cd;
    color: #856404;
}

.ui-icon.warning::before {
    content: "!";
    font-size: 18px;
}


.ui-icon.success {
    background: #d4edda;
    color: #155724;
}

.ui-icon.success::before {
    content: "✓";
    font-size: 16px;
}

.ui-icon.error {
    background: #f8d7da;
    color: #721c24;
}

.ui-icon.error::before {
    content: "✕";
    font-size: 16px;
}

.ui-icon {
    animation: pop .25s ease;
}

@keyframes pop {
    from { transform: scale(.5); opacity:0; }
    to   { transform: scale(1); opacity:1; }
}

/* ── AYUDA Y CONTADOR DE UN CAMPO ────────────────────────────────────────
   Los pinta TInput cuando el descriptor trae `help` o `counter`.

   NADA DE `flex-wrap: wrap` NI DE `flex-basis` AQUI, aunque parezca lo natural
   para mandarlos a su propia linea. El wrapper de un campo del panel es un flex
   EN COLUMNA (`.adminui .field-wrapper { flex-direction: column }`), y en
   columna esas dos propiedades significan lo contrario de lo que se busca:
   `flex-wrap` reparte en COLUMNAS NUEVAS lo que no cabe en altura --la ayuda
   aparecia a la derecha del campo, cortada por el borde de la tarjeta, medida:
   x=993 con el campo terminando en 994-- y `flex-basis: 100%` fijaria la
   ALTURA, no el ancho.

   Con el ancho a secas caen debajo del campo, que es donde tienen que estar. */
.field-wrapper > .TInput-help,
.field-wrapper > .TInput-counter {
	width: 100%;
	margin-top: 4px;
	color: #6b7280;
	font-size: 11px;
	line-height: 1.4;
}

/* El contador, a la derecha: es una cifra, no una frase. */
.field-wrapper > .TInput-counter { text-align: right; }
.field-wrapper > .TInput-counter.is-lleno { color: #c2410c; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   UN ICONO DELANTE DE UN TEXTO SE SEPARA DE EL
   ══════════════════════════════════════════════════════════════════════

   Regla del SITIO, no de un componente: el patron «icono + texto» sale en
   rotulos de seccion, titulos de tarjeta, cabeceras de ficha y avisos, y sin
   separacion el glifo queda pegado a la primera letra --«(i)Informacion
   general»--. Declararlo componente a componente significa que el siguiente que
   se escriba vuelva a nacer pegado.

   SE LIMITA A ROTULOS Y TITULOS a proposito. Ahi un icono va con texto casi
   siempre; los botones de solo icono son <button>, asi que no entran, y lo que
   ya separa con `gap` --la botonera, las pestañas-- tampoco, porque sumaria a lo
   que su contenedor pone.

   NADA DE `:not(:only-child)` para adivinar si hay texto: `:only-child` mira
   ELEMENTOS y el texto de un rotulo no lo es, asi que el icono cuenta como hijo
   unico y la regla se excluia a si misma. Estuvo escrita y sin aplicarse hasta
   que se midio el margen en el navegador: 0px. */

label > i:first-child,
legend > i:first-child,
h1 > i:first-child,
h2 > i:first-child,
h3 > i:first-child,
h4 > i:first-child,
label > iconify-icon:first-child,
h1 > iconify-icon:first-child,
h2 > iconify-icon:first-child,
h3 > iconify-icon:first-child,
h4 > iconify-icon:first-child {
	margin-right: 5px;
}

/* ── ICONO DENTRO DE UN CAMPO ────────────────────────────────────────────
   Lo pinta TInput cuando el descriptor trae `icon`. Va superpuesto y sin
   pointer-events, para que pinchar sobre el icono siga enfocando el campo. */
.wrap-input.has-icon { position: relative; }

.wrap-input.has-icon > .TInput-icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #98a2b3;
	font-size: 15px;
	pointer-events: none;
}

/* EL TEXTO SE APARTA DEL ICONO.
   Con `.wrap-input.has-icon > input` no bastaba: el panel fija el relleno del
   campo desde `.adminui .field-wrapper input`, que pesa mas. Se le añade el
   wrapper delante para subir la cuenta de clases, y el `!important` para el
   que el sistema pone en `.au-input`. Medido: sin esto el padding se quedaba en
   11.2px y el glifo se comia la primera letra. */
.field-wrapper .wrap-input.has-icon > input,
.wrap-input.has-icon > input { padding-left: 32px !important; }

/* ── INTERRUPTOR CON AYUDA ───────────────────────────────────────────────
   El rótulo y su explicación van en una columna a la derecha del interruptor,
   los dos arrancando en la misma vertical. */
.TSwitch-fila > .TSwitch-txt {
	display: flex;
	flex-direction: column;
	margin-left: 8px;
	min-width: 0;
}

.TSwitch-fila > .TSwitch-txt > .TSwitch-help {
	margin-top: 2px;
	color: #6b7280;
	font-size: 11px;
	line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════
   TOptionCards — LAS OPCIONES A LA VISTA, CON SU PISTA
   ══════════════════════════════════════════════════════════════════════
   Para elegir entre dos o tres cosas cuya diferencia hay que explicar. El
   control está en `Tbasic/js/Controles/TOptionCards.js` y allí está el porqué.

   LAS TARJETAS SON `<button>`, así que hay que apagarles lo que el sitio le
   pone a todo botón --alto 25px de `.TComponentES6 button`, borde `2px outset`
   y fondo gris del navegador--. `.TOptionCards-lista .TOptionCards-card` es (0,2,0)
   y gana a (0,1,1) sin depender del orden en que se carguen las hojas.
   ────────────────────────────────────────────────────────────────────── */

.TOptionCards-label{
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
}

.TOptionCards-lista{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.TOptionCards-lista .TOptionCards-card{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.TOptionCards-lista .TOptionCards-card:hover{ border-color: #cbd5e1; background: #f8fafc; }

/* ── EN MÚLTIPLE, MÁS PEQUEÑAS Y MÁS POR FILA ──────────────────────────
   Elegir entre tres cosas es leerlas; marcar veintidós es repasarlas. Con la
   tarjeta de 190px de ancho, veintidós ocupan media pantalla y dejan de poder
   recorrerse -- que es justo lo que el propio control advierte de las listas.
   Más estrechas y con la marca a la izquierda se leen como lo que son: una
   lista de casillas que además se explica. */
.TOptionCards-lista.es-multi{ grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 6px; }
.TOptionCards-lista.es-multi .TOptionCards-card{ padding: 7px 9px; }
.TOptionCards-lista.es-multi .TOptionCards-card b{ font-size: 12px; }
.TOptionCards-lista.es-multi .TOptionCards-card small{ font-size: 10.5px; }

/* MARCADA, PERO SIN PINTAR LA TARJETA. En múltiple lo normal es tenerlas casi
   todas puestas --veintiuna de veintidós herramientas--, y con el verde de la
   elegida la pantalla entera se pone verde: para ver CUÁL falta hay que
   repasarlas una a una, que es lo contrario de lo que se venía a hacer.
   La casilla ya lo dice; la tarjeta se queda en blanco. */
.TOptionCards-lista.es-multi .TOptionCards-card.on{
    border-color: #cbd5e1;
    background: #fff;
    box-shadow: none;
}
.TOptionCards-lista.es-multi .TOptionCards-card.on:hover{ background: #f8fafc; }

/* Y EL ICONO SE QUEDA GRIS. En múltiple el verde ya lo pone la casilla; si el
   icono también se pone verde, cada tarjeta tiene dos marcas del mismo color y
   la que cuenta --la casilla-- deja de resaltar. Aquí el icono solo dice si la
   herramienta MIRA o ESCRIBE, que es otra cosa. */
.TOptionCards-lista.es-multi .TOptionCards-card.on iconify-icon{ color: #64748b; }

/* ── EN SECCIONES ──────────────────────────────────────────────────────
   La rejilla pasa a los BLOQUES: la lista solo los apila. Sin esto, el rótulo
   de cada grupo entraría como una celda más de la rejilla de arriba y saldría
   en la primera columna con las tarjetas a su derecha. */
.TOptionCards-lista.es-agrupada{ display: block; }

.TOptionCards-grupo{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 6px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.TOptionCards-grupo:last-child{ margin-bottom: 0; }

/* EL RÓTULO OCUPA LA FILA ENTERA, que es lo que lo hace un rótulo y no otra
   tarjeta más estrecha. */
.TOptionCards-grupo-rot{
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 2px;
    font-size: 11px; font-weight: 800;
    letter-spacing: .03em; text-transform: uppercase;
    color: #64748b;
}
.TOptionCards-grupo-rot iconify-icon{ font-size: 13px; }

/* LAS QUE ESCRIBEN, EN OTRO TONO. Leer un pedido y cancelarlo no son la misma
   decisión, y en veintidós casillas iguales nadie se para a mirar cuáles eran
   cuáles. Es el mismo tono cálido que usa la pestaña de la esquina del agente,
   para que las dos pantallas se lean igual. */
.TOptionCards-grupo.es-escribe{ border-color: #eccfc9; background: #fdf3f1; }
.TOptionCards-grupo.es-escribe .TOptionCards-grupo-rot{ color: #a4483a; }
.TOptionCards-grupo.es-escribe .TOptionCards-card{ border-color: #f0dcd8; }
.TOptionCards-lista.es-multi .TOptionCards-grupo.es-escribe .TOptionCards-card.on::before{
    border-color: #a4483a;
    background: #a4483a
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E")
        center / 11px no-repeat;
}

/* LA MARCA DE ELEGIDA, delante y no solo en el borde: con veintidós tarjetas a
   la vez, un borde verde contra otro gris no basta para contar cuáles están
   puestas. */
.TOptionCards-lista.es-multi .TOptionCards-card::before{
    content: '';
    flex: 0 0 auto;
    width: 14px; height: 14px;
    margin-top: 1px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
}
.TOptionCards-lista.es-multi .TOptionCards-card.on::before{
    border-color: #16a34a;
    background: #16a34a
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E")
        center / 11px no-repeat;
}

/* LA ELEGIDA SE VE SIN LEERLA: borde de color y un aro fino. Sin el aro, en una
   pantalla clara la diferencia entre elegida y no elegida es un gris contra
   otro gris. */
.TOptionCards-lista .TOptionCards-card.on{
    border-color: #16a34a;
    background: #f0fdf4;
    box-shadow: 0 0 0 1px #16a34a inset;
}

.TOptionCards-lista .TOptionCards-card iconify-icon{
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 16px;              /* iconify-icon NO hereda el font-size */
    color: #64748b;
}
.TOptionCards-lista .TOptionCards-card.on iconify-icon{ color: #16a34a; }

/* TODO EL TEXTO EN LA SEGUNDA COLUMNA: título y pista arrancan en la misma
   vertical, que es la regla de alineación del proyecto. */
.TOptionCards-txt{ flex: 1; min-width: 0; }
/* QUE EL TÍTULO PARTA. El sitio le pone `white-space: nowrap` a esto, así que
   un nombre de dos palabras se salía de su tarjeta y lo tapaba la siguiente:
   se leía «Ficha de quien es» y ahí se acababa. Aquí se declara al revés. */
.TOptionCards-txt b{
    display: block;
    font-size: 12.5px; font-weight: 600; line-height: 1.3;
    white-space: normal; overflow-wrap: anywhere;
}
.TOptionCards-txt small{
    display: block; margin-top: 2px;
    font-size: 11px; color: #64748b; line-height: 1.35;
    white-space: normal; overflow-wrap: anywhere;
}

/* EL ASTERISCO DE UN CAMPO OBLIGATORIO.
   Lo pone `TInput`/`TSelect` cuando el descriptor dice `required: true`, así que
   la marca deja de depender de que quien escribe la pantalla se acuerde de
   ponerla a mano en el rótulo. */
.TInput-obligatorio{ color:#dc2626; font-style:normal; font-weight:700; }


@charset "UTF-8";


/*   https://codepen.io/prabinpebam/pen/xwZjBx  */

.AnimatedRadio input[type=radio],.AnimatedRadio input[type=checkbox] {
   /* display: none;*/
}

 .AnimatedRadio   input[type=radio] + label,.AnimatedRadio input[type=checkbox] + label {
        position: relative;
        display: inline-block;
        padding-left: 24px;
        margin-right: 32px;
        cursor: pointer;
        line-height: 16px;
        transition: all 0.2s ease-in-out;
        margin-bottom: 10px;
    }

  .AnimatedRadio     input[type=radio] + label:before,
  .AnimatedRadio input[type=radio] + label:after,
  .AnimatedRadio input[type=checkbox] + label:before,
  .AnimatedRadio input[type=checkbox] + label:after {
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            width: 16px;
            height: 16px;
            text-align: center;
            color: #f5f5f5;
            font-family: Times;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

    .AnimatedRadio    input[type=radio] + label:before {
            box-shadow: inset 0 0 0 1px #666565, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
        }

    .AnimatedRadio    input[type=radio] + label:hover {
            color: #44BB6E;
        }

.AnimatedRadio            input[type=radio] + label:hover:before {
                animation-duration: 0.5s;
                animation-name: change-size;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                box-shadow: inset 0 0 0 1px #44BB6E, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
            }

.AnimatedRadio    input[type=radio]:checked + label:hover {
        color: #333333;
        cursor: default;
    }

.AnimatedRadio    input[type=radio]:checked + label:before {
        animation-duration: 0.2s;
        animation-name: select-radio;
        animation-iteration-count: 1;
        animation-direction: Normal;
        box-shadow: inset 0 0 0 1px #44BB6E, inset 0 0 0 3px #FFFFFF, inset 0 0 0 16px #44BB6E;
    }

@keyframes change-size {
    from {
        box-shadow: 0 0 0 0 #44BB6E, inset 0 0 0 1px #44BB6E, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
    }

    to {
        box-shadow: 0 0 0 1px #44BB6E, inset 0 0 0 1px #44BB6E, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
    }
}

@keyframes select-radio {
    0% {
        box-shadow: 0 0 0 0 #91DEAC, inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px #44BB6E, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
    }

    90% {
        box-shadow: 0 0 0 10px #E8FFF0, inset 0 0 0 0 #FFFFFF, inset 0 0 0 1px #44BB6E, inset 0 0 0 2px #FFFFFF, inset 0 0 0 16px #44BB6E;
    }

    100% {
        box-shadow: 0 0 0 12px #E8FFF0, inset 0 0 0 0 #FFFFFF, inset 0 0 0 1px #44BB6E, inset 0 0 0 3px #FFFFFF, inset 0 0 0 16px #44BB6E;
    }
}

@keyframes select-checkbox {
    0% {
        box-shadow: 0 0 0 0 #91DEAC, inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px #44BB6E, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
    }

    90% {
        box-shadow: 0 0 0 10px #E8FFF0, inset 0 0 0 0 #FFFFFF, inset 0 0 0 1px #44BB6E, inset 0 0 0 0 #FFFFFF, inset 0 0 0 16px #44BB6E;
    }

    100% {
        box-shadow: 0 0 0 12px #E8FFF0, inset 0 0 0 0 #FFFFFF, inset 0 0 0 1px #44BB6E, inset 0 0 0 0 #FFFFFF, inset 0 0 0 16px #44BB6E;
    }
}

.AnimatedRadio input[type=checkbox] + label:hover {
    color: #44BB6E;
}

.AnimatedRadio input[type=checkbox] + label:before {
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "";
    line-height: 17px;
    border-radius: 0;
    background-color: #FFFFFF;
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px #666565, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
}

.AnimatedRadio input[type=checkbox] + label:hover:before {
    color: #FFFFFF;
    animation-duration: 0.5s;
    animation-name: change-size;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    box-shadow: inset 0 0 0 1px #44BB6E, inset 0 0 0 16px #FFFFFF, inset 0 0 0 16px #44BB6E;
}

.AnimatedRadio input[type=checkbox]:checked + label:before {
    background-color: #C3C3C3;
    color: #FFFFFF;
    animation-duration: 0.2s;
    animation-name: select-checkbox;
    animation-iteration-count: 1;
    animation-direction: Normal;
    box-shadow: inset 0 0 0 1px #44BB6E, inset 0 0 0 0 #FFFFFF, inset 0 0 0 16px #44BB6E;
}




/**
 * TImageViewer — el visor de imágenes del proyecto.
 *
 * Fondo oscuro a pantalla completa y la foto centrada: aquí no hay ventana ni
 * cabecera, porque lo que se viene a mirar es la imagen. Todo prefijado con
 * `.TImageViewer`, que se monta colgando del `body` y convive con el CSS de
 * cualquier pantalla.
 */

.TImageViewer {
    position: fixed;
    inset: 0;
    z-index: 100000;   /* por encima de TOverlayWin: el visor se abre DESDE
                          dentro de un overlay --las fotos de una devolución--
                          y detrás de él no se vería */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.TImageViewer .tiv-back {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, .92);
}

.TImageViewer .tiv-stage {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.TImageViewer .tiv-img {
    max-width: 90vw;
    max-height: 78vh;
    display: block;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    /* `contain` y no `cover`: recortar la foto de una incidencia por los bordes
       es justo perder lo que se está mirando. */
    object-fit: contain;
}

.TImageViewer .tiv-close,
.TImageViewer .tiv-nav {
    position: absolute;
    z-index: 3;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    border-radius: 50%;
}

.TImageViewer .tiv-close {
    top: 20px; right: 24px;
    width: 40px; height: 40px;
    font-size: 26px;
}

.TImageViewer .tiv-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    font-size: 20px;
}

.TImageViewer .tiv-prev { left: 24px; }
.TImageViewer .tiv-next { right: 24px; }

.TImageViewer .tiv-close:hover,
.TImageViewer .tiv-nav:hover { background: rgba(255, 255, 255, .24); }

.TImageViewer .tiv-count {
    position: absolute;
    z-index: 3;
    bottom: 108px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
}

/* LA TIRA DE MINIATURAS. Se desplaza en horizontal en vez de partir en dos
   líneas: con veinte fotos, dos filas se comen la mitad de la pantalla que es
   justo lo que se está mirando. */
.TImageViewer .tiv-thumbs {
    position: absolute;
    z-index: 3;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    max-width: 90vw;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.TImageViewer .tiv-thumbs::-webkit-scrollbar { display: none; }

.TImageViewer .tiv-thumb {
    flex: 0 0 auto;
    width: 62px; height: 62px;
    object-fit: cover;
    border-radius: 5px;
    opacity: .5;
    cursor: pointer;
    border: 2px solid transparent;
}

.TImageViewer .tiv-thumb:hover { opacity: .85; }
.TImageViewer .tiv-thumb.is-on { opacity: 1; border-color: #fff; }




.TInput
{
    position: relative;

    .wrap-input
    {
        position: relative;
        border: 0;
        border: 1px solid #bcbec9;
        border-radius: 6px;
        overflow: hidden !important;
        display: flex;
    }

    .wrap-input:has(:focus)
    {
        border-color: #007bff;
        outline: none;
    }

    input
    {
        border: 0 !important;
        padding-right: 0px !important;
        border-radius: 0 !important;
        height: 28px;
    }

    .unit
    {
        font-size: 12px;
        border: 0;
        border-radius: 0;
        right: 0px;
        height: 100%;
        background-color: rgb(238, 238, 238);
        padding: 5px;
        box-sizing: border-box;
        border-left: 1px solid #bcbec9;        
    }

    span.unit
    {
        min-width: 25px;
        line-height: 22px;
        padding: 5px 10px 0px 7px;
    }

    .unit:focus
    {
        border-left: 1px solid #bcbec9;
    }
}




#preloading {
	
    width: 60px;
    height: 60px;
    position: absolute;
  
    z-index: 10000000000000;
    background-color: #000;
    border-radius: 10px;
    opacity: 0.6;
    overflow: hidden;	
}

 
.loadingWraper{
	
    padding: 10px;
     /* background-color: rgba(0,0,0,0.5); */
    border-radius: 5px;
    height: 50px;
	width:  50px;
	z-index: 10000000000;
	position:fixed;

		
	
}
.ball {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .5;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 9px #2187e7; /*rosa:  fa138a */
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spin .5s infinite linear;
    -webkit-animation: spin .5s infinite linear;

	margin-top: -5px;
}

.ball1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    
	top: -41px; 
    left: 10px;
	
    -moz-animation: spinoff .5s infinite linear;
    -webkit-animation: spinoff .5s infinite linear;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-moz-keyframes spinoff {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(-360deg);
    };
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinoff {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    };
}




.flex-container{
	
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}

.flex-container > div{
	flex: 0 0 auto;
	z-index: 10;
}

.Tmodal{
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  position:fixed;
  opacity: 0;
  transition: opacity .1s ;
  transition-timing-function:  ease-out;
	
}


.Toverlay{
  display: table; 
   
 
}



.Overlay .close-bold:hover
{
	color: #000;
}
.Overlay .close-bold {
    color: #bbb;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -0.125em;

  display: inline-block;

  vertical-align: -0.125em;
  
  
  
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504L738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512L828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496L285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512L195.2 285.696a64 64 0 0 1 0-90.496'/%3E%3C/svg%3E");


  
  
  cursor:pointer;

    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10000;
}

 .Toverlay{
 vertical-align: top; 

 box-sizing: border-box;	
 display: block;
 position:absolute;
 top: 0px; 
 
  background-color: #fff; 
  box-shadow: 0px 10px 25px -5px rgba(0,0,0,0.8); 

  transition-duration: 0.1s;
  transition: transform .1s, opacity .1s , margin-top .2s, top .2s, left .2s ;
  transition-timing-function: ease-out;
  
  transform: translate3d(0px,0px,0px);
  
  display: flex;
  flex-flow: column;
   
  max-width: 90%;
  max-height: 90% ;	
  height: auto;
  width: auto;
  
  
 } 



 .Toverlay .overlay-header{

    display: block;
    position: relative;
    width: 100%;
    background-color: #6a6766;
    min-height: 30px;
	flex: 0 0 auto;
	z-index: 10;
	
	/*align-self: stretch;*/
	
	/* box-shadow: 0px 3px 6px -1px rgba(0,0,0,0.5); */
	
	
	transition: font-size 0.1s, background-color 0.1s, box-shadow 0.3s;
	
	/*box-shadow: 0px 3px 6px -1px rgba(0,0,0,0.5);*/
	 /*border-bottom: 1px solid #ccc; */
    /*  width: 84%; 
	margin: auto;
	background-color: rgba(255,255,255,0.2);
	*/
}

.Toverlay .overlay-header .txt b{ color: #F90; }
.Toverlay .overlay-header  .txt{color: #bbb;}


.Toverlay .contextmenu{
	position:absolute;	
	right: 15px;
    top: 5px;
	padding: 5px 0px;
	z-index: 1000;
}

.Toverlay .contextmenu div{
	position: relative;
	margin-top: 2px;
	height: 5px;
	width: 5px;
	border-radius: 100%;
	background-color: #fff;	
}


.Toverlay .TcontextMenu .focus, .Toverlay .TcontextMenu li:hover{
	background-color: transparent;
}





.Toverlay .overlay-client{

min-height: auto;
overflow: hidden;
position: relative;

flex: auto;
align-self: stretch;
background-color: #e9ebee;
z-index: 1;
 
background-color: #fff; 
padding: 12px;
box-sizing:border-box;
text-align:left;
width: 100% !important;

}

.Toverlay .overlay-foot{

min-height: auto;
align-self: stretch;
text-align: center;
white-space: nowrap;

z-index: 10;

flex: 0 0 auto;
display: flex;
flex-flow: row;
width: 100%;


/*
box-shadow: -1px -2px 11px -2px rgba(0,0,0,0.3);

border-top: 1px solid #e1e1e1;
padding-top: 1px;
*/
   
}


.Toverlay .overlay-header .menu img{
 position: absolute;
 top: 14px;
 left: 20px;	
}

.Toverlay .backbtn{
 position: absolute;
 top: 11px;
 left: 20px;
 z-index: 100000;	
}

.Toverlay .overlay-header .txt{
padding: 10px 20px ;
line-height: 40px;
text-align: center;
font: bolder 18px Arial, sans-serif;	
color: #FFF;

}






.Toverlay.zbuffer{
z-index: 0;
visibility:hidden;
}

.Toverlay.fadeCloseH{
   
	opacity: 0;	
}
 
 .Toverlay.fadeShowH{	 
	
	opacity: 1;	 
}


/* ------------CENTER------- */
.Toverlay.motionFadeCloseCenterH{
  
  top: 30%;  
  bottom: 0px;  
  opacity: 0;
  left: 0px;
  right: 0px;
  margin: auto;	
}
 
 .Toverlay.motionFadeShowCenterH{
	
	position: fixed;	
    left: 0px;
    right: 0px;
    margin: auto;
    top: 0px;
    bottom: 0px;
	opacity: 1;	
}

.Toverlay.fullscreem{
   top: 0px;
   left: 0px;
   box-shadow: none;
   max-width: 100%;
   max-height: 100%;
   width: 100%;
   height: 100%;
   box-shadow: none;
}


 
 
 .Toverlay.scaleBlur-show{transform: scale(1), opacity: 1}
 .Toverlay.scaleBlur-close{transform: scale(0.6), opacity: 0}
 

/*----------------BTN-------------------*/ 

.Toverlay .overlay-foot .btn{   
    position: relative;
    border-radius: 5px;
    font: bold 11px Arial;
    
    text-align: center;	
	border-image:none;
    display: inline-block;
    cursor: pointer;
	box-shadow:none;
	flex: auto;
    align-self: stretch;
	margin-right: 5px; 
	padding-top: 12px;
	margin-left: 5px;
	 color: #fff; 
	background: none;
  
    border-radius: 0px;
	margin: 0px;	 
	
}
 .Toverlay .overlay-foot .btn span{
 text-shadow: none;
 font: bold 14px Arial;
 line-height: 100%;	
 vertical-align: sub;
}

 .Toverlay .overlay-foot .btn.OK{
   
	  background-color: #910c88;	/* verde = #83ba06; rosa = #910c88 */
}

 .Toverlay .overlay-foot .btn.OK2{
background-color: #89c403;	
background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);

}
 .Toverlay .overlay-foot .btn.OK2 span{color: #fff;	}


.Toverlay .overlay-foot .btn.OK span{
 color: #fff;
}





/*  ------------------------- OVERLAY SIMPLE -------------------------------------*/
.OverlaySimple{

   border-radius: 20px !important;
}


.OverlaySimple .body.cliente{
border-radius: 10px;
overflow: hidden;
   
      background-color: #fff;
}


.Toverlay .zona_cliente{
overflow: auto;
}
.OverlaySimple .zona_cliente{

    padding:0px;
    background-color: #fff;
    border: 0px;
    border-radius: 5px;
 
	padding-top: 30px;
}

.OverlaySimple .wraper_msgbox .body{

    overflow-y: visible !important;
}


.OverlaySimple .titulo
{
     background-color: #fff;
	 height:auto;
	 padding: 10px;
	 z-index: 100;
	 transition:  box-shadow 0.3s linear;
	 z-index: 100;
}

.OverlaySimple.scrolled .titulo
{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.OverlaySimple .titulo .txt{   
    color: #111 !important;
    font: 700 18px Arial;
}

.OverlaySimple .msgBox{   
    color: #111 !important;
    font: 15px Arial !important;
	margin-top: 5px;
}




/* ── LA MEDIDA DE UN OVERLAY: el alto y el ancho que pida ───────────────
 *
 * EL ANCHO YA NO SE FIJA. Estaba en `min(800px, 94vw)`, y ese 800 obligaba a
 * TODAS las ventanas a medir lo mismo: una confirmación de dos líneas salía
 * igual de ancha que una ficha con dos columnas. Quien necesite una medida
 * concreta la pide en su descriptor (`width` de `TForm`), que es donde se sabe
 * lo que lleva dentro.
 *
 * El `max-width` se queda: es lo que impedía que 800px pelados se salieran del
 * viewport en un portátil, y eso sigue haciendo falta con cualquier ancho.
 *
 * Y HAY UN SUELO, `min-width: 300px`, que es la otra mitad del trato. Sin ancho
 * fijo, una ventana sigue a su contenido, y el contenido más corto que hay son
 * justo los mensajes: un «Guardado» o un «¿Seguro?» se quedarían del tamaño de
 * su propio botón, con la cabecera partida en tres líneas.
 *
 * OJO AL NÚMERO DE VERDAD: el suelo efectivo NO son 300, son 370. Quien manda
 * es `.TOverlayWin .overlay-body { min-width: 350px }`, que vive en
 * `Tjquery/css/index.css` --otra hoja-- y con los 10px de borde transparente de
 * cada lado deja la ventana en 370. Medido: una ventana con una sola letra
 * dentro computa 370px. Este 300 es el respaldo por si aquel se toca; si algún
 * día hace falta bajar de 370, el que hay que mover es el de `index.css`.
 *
 * EL ALTO TAMPOCO SE FIJA. Estaba en `min(80vh, 900px)` y eso obligaba a TODAS
 * las ventanas a medir lo mismo: un formulario de cuatro campos salía con
 * cuatrocientos píxeles de blanco entre el último y los botones. Quien tenga
 * contenido de largo desconocido --una lista de opiniones-- lo resuelve con el
 * desplazamiento de `.overlay-body`, que ya lo tiene.
 *
 * `.TOverlayWin--auto` sigue existiendo para el resto de lo que ajustaba. */
 .TOverlayWin {

      min-width: 300px;
      max-width: 94vw;
      max-height: min(90vh, 900px);

      /*
       * COLUMNA FLEX, y no es un adorno: es lo que hace que el `max-height` de
       * arriba llegue hasta el cuerpo.
       *
       * `.overlay-inner` pedía `height: 100%`, y un porcentaje contra un padre
       * de altura AUTO se resuelve a auto: el interior crecía con su contenido,
       * se pasaba del `max-height` y el `overflow: hidden` de aquí lo cortaba
       * en seco. Con trece opiniones eso son ochocientos píxeles de lista
       * inalcanzables --sin barra, sin nada--. Medido: la ventana 646 y su
       * cuerpo 1465.
       *
       * Con la columna flex y un `min-height: 0` en el interior, el límite baja
       * de padre a hijo y quien desborda es `.overlay-body`, que ya tiene su
       * `overflow: auto`.
       */
      display: flex;
      flex-direction: column;

      border: 10px solid transparent;
         background-color: rgba(29, 29, 29, 0.3);
      border-radius: 6px;
     
      position: fixed;
      opacity: 1;
     /*transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s;*/
      z-index: 1;
      box-shadow: 5px 5px 31px -5px rgba(0, 0, 0, 0.6);
      overflow: hidden;
      transition: transform 0.3s, opacity 0.3s;
       
        
    }

.TOverlayWin .overlay-inner
{
    /*transition: opacity 0.3s;*/
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* `flex: 1` + `min-height: 0` en vez de `height: 100%`: el porcentaje no
       servía de nada con el padre en altura auto (ver el comentario de
       `.TOverlayWin`), y `min-height: 0` es lo que permite que un ítem flex
       encoja por debajo de su contenido --sin él, el navegador le da como
       mínimo lo que ocupa dentro y el límite no se aplica nunca--. */
    flex: 1;
    min-height: 0;
    background: white;
    border-radius: 6px;
}

.TOverlayWin:has(.overlay-title) .overlay-body
{
    border-radius: 0px 0px 5px 5px;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  LA CABECERA VA A LA IZQUIERDA. SIEMPRE. ES REGLA DURA DEL PROYECTO.
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Icono, título y subtítulo alineados a la izquierda, con el icono en su
 * columna y TODO el texto en la segunda, para que título y subtítulo arranquen
 * en la misma vertical.
 *
 * ESTO ERA `text-align: center` Y `justify-content: center`, y la variante a la
 * izquierda solo aplicaba con `:has(.overlay-title-txt)` --o sea, solo si quien
 * abría la ventana se acordaba de montar la cabecera con
 * `TOverlayWin.cabecera()`--. Cualquier `title: 'Texto'` a secas salía centrado,
 * y es el error que se repite en cada overlay nuevo porque el defecto lo
 * empujaba a cometerlo. Ahora el defecto es el correcto y no hay nada que
 * recordar. */
.TOverlayWin .overlay-title
{
    background-color: #ffffff;
    color: #000;
    text-align: left;
    padding: 10px;
    font-weight: bold;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: move;
    user-select: none;
  
    /* ALTO ADAPTATIVO Y NO FIJO.
     *
     * `title()` pinta con `.html()`, así que la barra admite marcado rico --una
     * cabecera con icono, píldora y subtítulo, por ejemplo-- y con `height: 50px`
     * todo lo que pasara de una línea se recortaba sin aviso. El 50 se queda
     * como MÍNIMO, que es lo que mantiene la barra reconocible cuando solo hay
     * un título de texto. */
    min-height: 50px;
    height: auto;
    font-size: 17px;
    line-height: 30px;
    position: relative;
    transition:  background-color 0.1s, box-shadow 0.3s;
    z-index: 10;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    /* Hueco a la derecha para la X, también con título de texto plano: sin él,
       un título largo se metía debajo del botón de cerrar. */
    padding-right: 44px;

    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}
.TOverlayWin.scrolled  .overlay-title
{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    /* ── EL CUERPO TIENE ALTO FIJO, NO ADAPTATIVO ────────────────────────
     *
     * Con `max-height` el overlay medía lo que midiera su contenido, y cualquier
     * cosa que lo cambiara --pasar de pestaña, desplegar una sección, cargar una
     * tabla-- cambiaba el alto de la ventana; y como se recentra en cada cambio
     * (`centerOverlay()`), la ventana SALTABA bajo el ratón. Con las pestañas de
     * una ficha se nota en cada clic: seis alturas distintas, seis posiciones.
     *
     * Ahora el alto es estable --el de la ventana menos un margen-- y lo que
     * scrollea es el contenido. `flex: 1` para que ocupe lo que le dejen la
     * cabecera y el pie, que sí crecen con su contenido.
     *
     * Quien necesite una ventana que se ajuste a su contenido --un aviso de tres
     * líneas-- lo pide con `.TOverlayWin--auto` en su contenedor. */
    .TOverlayWin .overlay-body {
      padding: 5px 20px;
      position: relative;
      font-size: 14px;
      flex: 1;
      min-height: 0;
      overflow: auto;
    }

    /*
     * La excepción: ventanas cortas --confirmaciones, avisos-- donde el alto
     * fijo deja medio overlay vacío. Un «no se pudo completar» de una línea
     * salía en una ventana de 800 × 740 con setecientos píxeles de blanco entre
     * el texto y el botón.
     *
     * SOLO SE LIBERA EL ALTO. El ancho sigue siendo el del CSS --o el que pase
     * quien la abre--: con `width: auto` un aviso de tres palabras salía en una
     * ventana del tamaño de un botón, y uno de dos frases se estiraba de punta a
     * punta de la pantalla. El alto es lo que sobra; el ancho ya estaba bien.
     */
    .TOverlayWin--auto { height: auto; }

    .TOverlayWin--auto .overlay-body {
      height: auto;
      max-height: 85vh;
    }

    /* ── LA CABECERA RICA: ICONO, TÍTULO Y SUBTÍTULO ─────────────────────
     *
     * Regla del proyecto para TODOS los overlays. La monta `TOverlayWin.cabecera()`
     * y admite marcado --pastillas de estado incluidas--.
     *
     * A la izquierda, y no centrada: una cabecera de dos líneas centrada deja el
     * título y el subtítulo arrancando en verticales distintas. El icono va en su
     * propia columna para que todo el texto empiece en la misma. */
    .TOverlayWin .overlay-title:has(.overlay-title-txt) {
      display: flex;
      align-items: center;
      gap: 11px;
      text-align: left;
      padding: 12px 44px 12px 18px;   /* hueco a la derecha para la X */
      border-bottom: 1px solid var(--au-divider, #f1f5f9);
    }

    .TOverlayWin .overlay-title-ico {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: var(--au-surface-3, #f1f5f9);
      color: var(--au-primary, #3b82f6);
      font-size: 17px;
      line-height: 1;
    }

    .TOverlayWin .overlay-title-txt {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1.25;
    }

    .TOverlayWin .overlay-title-t {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: var(--au-text, #0f172a);
    }

    /* El subtítulo no es un título pequeño: es la aclaración de arriba, así que
       ni negrita ni el color del título. */
    .TOverlayWin .overlay-title-s {
      font-size: 11px;
      font-weight: 400;
      color: var(--au-text-soft, #64748b);
    }
    /* ── EL PIE, EN DOS COLUMNAS ─────────────────────────────────────────
     *
     * Izquierda: contenido libre (un aviso, una nota, un enlace secundario).
     * Derecha: los botones.
     *
     * LOS BOTONES SIEMPRE GANAN EL ANCHO: su columna mide lo que necesita y no
     * se encoge nunca; la izquierda es la que cede. Al contrario, un aviso largo
     * partía el botón en dos líneas o lo empujaba fuera de la caja.
     *
     * Y `min-height` en vez de `height`: un pie con dos líneas de aviso a la
     * izquierda tiene que poder crecer. */
    .TOverlayWin .overlay-footer {
      padding: 10px;
      min-height: 50px;
      position: relative;
      border-top: 1px solid #ddd;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    /* La que cede: `min-width: 0` para que un texto largo se parta en vez de
     * ensanchar la fila. */
    .TOverlayWin .overlay-footer-info {
      flex: 1 1 auto;
      min-width: 0;
      text-align: left;
      font-size: 12.5px;
      color: #64748b;
    }

    /* La que manda: mide lo suyo, no se encoge, y se pega a la derecha. */
    .TOverlayWin .overlay-footer-actions {
      flex: 0 0 auto;
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    /* El margen de separación lo pone ahora el `gap` de la columna. */
    .TOverlayWin .overlay-footer-actions .btn { margin-right: 0; }
    .TOverlayWin .overlay-footer .btn {
      margin-right: 20px;
    }

.TOverlayWin .overlay-footer .btn.NOK:hover
{
    text-decoration: underline;
    cursor: pointer;
}



.TOverlayWin .close-bold {
    /*color: #bbb;*/
    color: #000;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -0.125em;
  display: inline-block;
  vertical-align: -0.125em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504L738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512L828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496L285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512L195.2 285.696a64 64 0 0 1 0-90.496'/%3E%3C/svg%3E");
  /* EL SVG, A LA MEDIDA DE SU CAJA Y UNA SOLA VEZ. El `data:` solo trae
     `viewBox`, sin medidas propias: sin `background-size` el navegador decide,
     y sin `no-repeat` un tamaño menor que la caja lo embaldosaría. Con la aspa
     de FontAwesome encima esto no se notaba porque tapaba el resultado. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  cursor:pointer;
    position: absolute;
    right: 10px;
    top: 10px;


}

.TOverlayWin .close-bold:hover
{
	color: #000;
}
/* BARRA DE TITULO VACIA: NO OCUPA, PERO SIGUE AHI.
   Solo aparece cuando el overlay lleva boton de cerrar y no se le ha dado
   titulo: la X tiene que seguir estando, asi que la barra se queda sin alto y
   el boton flota sobre la esquina del contenido. Sin titulo Y sin X, title()
   la quita del DOM y esta regla no llega a usarse. */
.TOverlayWin .overlay-title.overlay-title--vacia {
    min-height: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 2;
}

.TOverlayWin .overlay-title.overlay-title--vacia .close-bold {
    position: absolute;
    top: 12px;
    right: 14px;
}

/* ── EL VELO ESMERILADO ─────────────────────────────────────────────────
 *
 * Lo pide una ventana con `gloss: true`. Sigue siendo NEGRO con transparencia,
 * como el velo de siempre, pero además desenfoca: lo de detrás sigue ahí --se
 * ve que es tuyo-- y deja de competir. Se probó claro y sobre una pantalla
 * clara el desenfoque casi no se notaba: parecía media carga. Es para las ventanas en las que el fondo es CONTEXTO: una pasarela
 * de pago abierta sobre la contratación que la ha originado, donde apagar el
 * importe y el plan justo al confirmar lo que se paga es lo contrario de lo
 * que hace falta.
 *
 * El `-webkit-` no es de adorno: sin él, Safari no desenfoca y se queda el
 * velo claro a secas.
 */
.overlay-gloss{
    backdrop-filter: blur(7px) saturate(120%);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
}


.round {
    position: relative;
}

    .round label {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 28px;
        left: 0;
        position: absolute;
        top: 0;
        width: 28px;
    }

        .round label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 6px;
            left: 7px;
            opacity: 0;
            position: absolute;
            top: 8px;
            transform: rotate(-45deg);
            width: 12px;
        }

    .round input[type="checkbox"] {
        visibility: hidden;
    }

        .round input[type="checkbox"]:checked + label {
            background-color: #66bb6a;
            border-color: #66bb6a;
        }

            .round input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }




.container {
    margin: 0 auto;
}









.switch
{
	position: relative;

	width: 40px;
	height: 21px;

	/* NO SE ENCOGE.
	 *
	 * La pista vive en una fila flex junto a su rotulo, y sin esto vale como
	 * ancho SUGERIDO: en cuanto la columna se estrecha --dos interruptores por
	 * fila, una ventana pequeña, el panel con zoom-- el navegador se la come
	 * hasta 22px. La bolita se mueve con un `transform` de 16px fijo, asi que
	 * no encoge con ella: se sale por la derecha y el interruptor se ve como un
	 * trozo verde con una pelota fuera. Y encogido sigue funcionando, asi que
	 * en las pruebas parece cosa del navegador. */
	flex: 0 0 auto;

	box-sizing: border-box;
}

.switch input 
{
	opacity: 0;
	width: 0;
	height: 0;
}
.slider
{
	position: absolute !important;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;

	box-sizing: border-box;
}

.slider:before
{
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 3px;
	top: 2px;
	bottom: 4px;
    background-color: #FFF;
	    transition: 0.3s;
	box-sizing: border-box;
}

input:checked + .slider
{
	background-color: #70b580;
}

input:focus + .slider
{
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before
{
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

/* Rounded sliders */
.slider.round
{
	border-radius: 34px;
}

.slider.round:before
{
	border-radius: 50%;
}




        
       .TTreeES6 {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
            overflow: hidden;
		    padding: 8px;
        width: 100%;
   
            margin-bottom: 10px;
            border: 1px solid #e9ebee;/*e9ecef*/
            border-radius: 6px;
            overflow: hidden;
         
        
        
       .TTreeES6-root
{
            border: 0px solid #cfcfcf;
        border-radius: 5px;
         overflow: hidden;
            margin-left: 0;
            padding-left: 0;
}
        
        .tree-item.header:hover {
            background: #e9ecef;
        }
        
         .tree-item {
          display: flex;
              justify-content: flex-start;
          z-index: auto;
          align-items: center;
          flex-direction: row;
            padding: 6px;
            border-bottom: 1px solid #f1f3f4;
           
        }

         .TTreeES6-root > li:first-child{
             margin-top: 0;
         }

         .tree-item:hover {
            cursor: pointer;
        }
        input[type=checkbox]:indeterminate {
           /*accent-color: #e15a1a;*/
        }
        .tree-item:last-child {
            border-bottom: none;
        }

          .tree-item.header-item {
          
            padding: 6px;
            background: #ececec;
            border-bottom: 1px solid #e9ecef;
            cursor: pointer;
            transition: background 0.2s;
            border-radius: 6px;
         
        border-bottom: 1px solid #e9ecef;
        cursor: pointer;
        transition: background 0.2s;
        }

        .item-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #2c3e50;
        }
       
        .item-name {
         font-weight: 500;
        font-size: 14px;
        color: #495057;
        margin-bottom: 4px;
        display: flex;
        align-items: center;    
        }

        .header-item .item-name {
                 font-weight: 600;
            font-size: 16px;
            color: #2c3e50;
        }
         
      
        .item-desc{
            margin-right: 50px;
                    font-size: 13px;
        color: #6c757d;
        line-height: 1.5;
        }

        .module-content
        {
            display:block;
            padding: 0;
            margin-left: 20px;
            /*max-height: 0;*/
            overflow: hidden;
            max-height: 0;
        }
        .module-content.expanding,
        .module-content.collapsing {
          will-change: max-height;
        }

        .module-content.expanded{
            
           max-height: 2000px;
        }
        
       
        
        checkbox {
            margin-right: 12px;
            margin-top: 3px;
        }
        
        .function-info {
            flex: 1;
        }
        
        .function-name {
            font-weight: 500;
            font-size: 14px;
            color: #495057;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
        }
        
        .function-description {
            font-size: 13px;
            color: #6c757d;
            line-height: 1.5;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        .actions {
            padding: 20px;
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        .search-container {
            padding: 15px 0px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .search-box {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .search-box:focus {
            outline: none;
            border-color: #3498db;
        }
        
        .select-all {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            background: #f1f8ff;
            border-bottom: 1px solid #e9ecef;
        }
        
       .select-all-checkbox {
            margin-right: 10px;
        }
        
        .select-all-label {
            font-size: 14px;
            color: #495057;
        }

        iconify-icon {
            top: 0px;
        }

 }
/* ══════════════════════════════════════════════════════════════════════
   MODO DE SELECCION SIMPLE  (selectionMode: 'single')
   ══════════════════════════════════════════════════════════════════════

   El arbol deja de ser una lista de casillas y pasa a ser un SELECTOR: se
   pincha una fila y queda marcada. Lo usa, por ejemplo, la categoria padre en
   la ficha de categoria.

   Va todo bajo `.TTreeES6--single`, la clase que el componente se pone segun su
   modo, para no rozar el arbol de permisos ni el de categorias de un articulo,
   que siguen con casillas. */

.TTreeES6--single .tree-item {
	gap: 2px;
	padding: 7px 8px;
	border-bottom: 0;
	border-radius: 6px;
}

.TTreeES6--single .tree-item:hover {
	background: #f3f5f9;
}

/* LA FILA ELEGIDA. Un fondo suave y la barra a la izquierda: el color de fondo
   solo, en una lista larga, se pierde al pasar el raton por encima de otra. */
.TTreeES6--single .tree-item.is-selected {
	background: #eef2ff;
	box-shadow: inset 3px 0 0 0 #6c3ce7;
	font-weight: 600;
}

.TTreeES6--single .tree-item.is-selected .item-name { color: #4c1d95; }

/* LA FLECHA DE PLEGAR. Caja fija --y un hueco del mismo ancho cuando el nodo no
   tiene hijos-- para que los nombres de un nivel arranquen en la misma
   vertical, tengan rama o no. */
.TTreeES6--single .tree-arrow {
	flex: 0 0 18px;
	width: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #98a2b3;
	transition: transform .15s ease;
}

.TTreeES6--single .tree-arrow.is-empty { visibility: hidden; }

/* Apunta hacia abajo cuando la rama esta abierta. `:has()` mira al hermano
   siguiente, que es el <ul> de los hijos. */
.TTreeES6--single li:has(> ul.expanded) > .tree-item > .tree-arrow {
	transform: rotate(90deg);
}

.TTreeES6--single .item-name { font-size: 13px; }
.TTreeES6--single .item-desc { font-size: 11px; color: #98a2b3; }

/* Sin casillas, el sangrado de cada nivel lo tiene que dar el arbol. */
.TTreeES6--single ul.module-content { padding-left: 18px; }






.product > a
{
	text-decoration: none !important;
	padding-bottom: 8px;
}

@media (min-width: 5px)
{
	.product
	{
	
		
	}
}


.product
{
	position:relative;

	display: flex;
	flex-direction: column;	


	
	min-width: 4.75rem;
	max-width: 15rem;
	margin: 0 auto;
	padding: 0 0.5rem 0.5rem;
	width: 100%;
	box-sizing: border-box;
	 /* height: 235px; */
	border-radius: 5px;
	background-color: #fff;
    border: 1px solid #ccc;   
	padding: 14px;
	 padding-top: 40px;
     max-height: 380px;
	 height: 100%;
	 padding-bottom: 50px;
}

.product:hover
{
	position: relative;
	/*box-shadow: 0 0 5px 0 #0069a7;*/
	box-shadow: 0px 0px 4px 0px #9d9d9d;
    transition: box-shadow 0.2s;
}

.product .sendfree
{
	border-radius: 10px;
	padding: 3px;
	position: relative;
	left: 0px;
	bottom: 5px;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	letter-spacing: 0.025rem;
	color: #118000;
	background: #FFFFFF;
	border: 1px solid #118000;
	width: max-content;
	margin: 0px;
    /* top: 10px; */
    position: relative;
    padding: 5px;
    margin-top: 8px;
	color: #118000 !important;
}

.product .reconditioned
{
	border-radius: 3px;
	padding: 3px;
	position: relative;
	left: 0px;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	letter-spacing: 0.025rem;
	color: #333333;
	background: #FFFFFF;
	border: 1px solid #333333;
	width: max-content;

	bottom: 0px;
    position: absolute;
}
.product .dto, .product-small .dto
{
	margin-left: 0px; 
	background-color: red;    
	white-space: nowrap; 
	border-radius: 11px; 
	padding: 3px; 
	color: white;
	font: bold 11px Arial;
	padding: 3px 6px;
	font-weight: 600;
    font-size: 12px;
	text-transform: uppercase;
}

.product .pvp,
.product-small .pvp{
	color: #aaa;
	font: bold 12px Arial;
	text-decoration:line-through;
	white-space: nowrap;
	color: #555;
}

.product .imgContainer
{
	background-size: contain;
	background-repeat: no-repeat;
	max-height: 150px;
	min-height: 100px;
	background-position: center;
	position: relative;

}


.product h3
{
	margin: 0px ;
}
.product .portrait
{
	/*width: 100%;*/
	max-height: 100px;
	top: 0;
	left: 0;
	max-width: 80px;
}

.product > div:has(.price)
{
	 /* margin-top: 20px; */
}

.product .price
{
	font-size: 1.2rem;
	line-height: 1.2rem;
	font-weight: 700;
	letter-spacing: normal;
	white-space: nowrap;
	color: #444;
	display: inline-block;
	margin-bottom: 0;
	
}

.product .attr li{
	border-radius: 5px;
	margin-right: 5px;
	border: 1px solid #ccc; 
	padding: 3px;
	cursor: pointer;
}

.product .attr .color{
	border: 1px solid transparent;
	margin-right: 5px;
	border-radius: 100%;
	padding: 3px;
}

.product .attr li:hover{
	border: 1px solid #ed3333;
}


	/*
	flecha url
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0idmFyKC0tY29sb3ItYnJlYWRjcnVtYi1hcnJvdywgIzMzMzMzMykiPjxwYXRoIGQ9Ik01LjUgMTRhMSAxIDAgMCAxLS43MS0uMjkgMSAxIDAgMCAxIDAtMS40Mkw5LjA5IDhsLTQuMy00LjI5YTEgMSAwIDAgMSAxLjQyLTEuNDJsNSA1YTEgMSAwIDAgMSAwIDEuNDJsLTUgNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==);
*/


.btn-buy {
    font: 800 16px Arial;
    font-weight: bold;
    padding: 8px;
	width: auto;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    background-color: #ff6000;
    border-color: #ed6003;
    user-select: none;
    border: 1px solid transparent;
    margin-top: 10px;
    line-height: 1.33333;
    border-radius: 6px;

}



.product .foot{
	    border-top: 1px solid #bbb;
    height: 33px;
  
    bottom: 0px;
    padding-top: 10px;
   
    color: #555;
	text-align: center;
    margin-top: 5px;
	    position: absolute;
    bottom: 10px;
	right: 5px;
	    width: 96%;
}


/* LA ESQUINA DE LA TARJETA: los cupones y las etiquetas, apilados.
   Los dos quieren el mismo sitio, y colocandose cada uno por su cuenta se
   pisan --paso en la ficha del articulo--. La esquina la coloca este
   contenedor; dentro, los cupones en su fila y las etiquetas debajo. */
.product .pt-esquina-card{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    /* Sin cruzar la tarjeta: un codigo largo se queda en su lado. */
    max-width: 100%;
}

/* Los cupones NO se colocan: los coloca la esquina. En fila entre ellos, que
   es como se han visto siempre. */
.product .offer_tags{
    height: 25px;
    position: static;
	display: flex;
    flex-direction: row;
}

/* Las etiquetas, debajo de los cupones y en columna: el margen de las
   pastillas ya separa, asi que la esquina no pone `gap`.
   CANDIDATO A LA HOJA COMUN del area de cliente: la misma pastilla vive en
   `TArticleProfile.css` y en `TStorefront.css`. */
.product .pt-etiquetas-card{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 4px 0 0 5px;   /* el mismo sangrado que los cupones de arriba */
    pointer-events: none;  /* no estorban al enlace de la tarjeta */
}

.product .pt-etiquetas-card .pt-pastilla{
    font-size: 10px;
    padding: 3px 8px;
}

.product .offer_tags > div{
    display: inline-flex;
    text-transform: uppercase;
    padding: 4px 8px;
    color: #FFF;
    margin: 7px 0 0 5px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 10px;
}
.product .offer_tags > div.new{
	background: #3555A5;
}

.product .offer_tags > div.offer_code{
background-color: #DB0680 !important;
    color: #fff !important;
}

.product .code-applied{
    font-size: 10px;
    color: #000;
	font-family: Montserrat, Verdana, Arial; 
	line-height: 10px; 
	margin-top: 5px;
}



.product h2{
	margin: 0px;
	color: #000;
    font: 14px Roboto, Arial, Helvetica, sans-serif;

	
    width: 100%;
    line-height: 1.5em; /* Altura de línea */
 
  
  position: relative;
      display: block;
   
}




/*  product - small item ------------------------- */
.product-small{
	padding: 12px;
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 10px;    
	display: flex;
   position: relative;
    margin-bottom: 10px;
}
.product-small .offer_tags{
	    position: absolute;
    right: 0px;
    top: 3px;
}

.product .discount{
	display: flex;  
	align-items: center;
}

.product-small .discount{
			display: flex;
    align-items: center;
    margin-bottom: 3px;
    right: -16px;
    position: absolute;
    top: -25px;
}

.product-small .code-applied{
	position: absolute;bottom: 4px;right: 12px;
}

@media (max-width: 1000px) {
    #columna_izq {
        display: none !important;
    }
}

/*  ---------------------- STARS RATING ------------------------------*/
.stars{
	
	justify-content: flex-start;
    align-items: center;
    display: flex;
	margin-top: 5px;
}
.stars input{
	margin-right: 5px;
}

.stars label{
	display: flex; align-items: center;
}


.stars a
{
	margin-left: 5px;
}

.stars span.no-checked,
.stars span.checked{
  width: 18px;
  height: 18px;
   display: inline-block;
   margin: -1px;
  background-repeat: no-repeat;
  background-size: contain;  
  
 }

.stars span.no-checked{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238c8c8c' d='M21.12 9.88a.74.74 0 0 0-.6-.51l-5.42-.79l-2.43-4.91a.78.78 0 0 0-1.34 0L8.9 8.58l-5.42.79a.74.74 0 0 0-.6.51a.75.75 0 0 0 .18.77L7 14.47l-.93 5.4a.76.76 0 0 0 .3.74a.75.75 0 0 0 .79.05L12 18.11l4.85 2.55a.73.73 0 0 0 .35.09a.8.8 0 0 0 .44-.14a.76.76 0 0 0 .3-.74l-.94-5.4l3.93-3.82a.75.75 0 0 0 .19-.77'/%3E%3C/svg%3E");
}

.stars span.checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffa500' d='M21.12 9.88a.74.74 0 0 0-.6-.51l-5.42-.79l-2.43-4.91a.78.78 0 0 0-1.34 0L8.9 8.58l-5.42.79a.74.74 0 0 0-.6.51a.75.75 0 0 0 .18.77L7 14.47l-.93 5.4a.76.76 0 0 0 .3.74a.75.75 0 0 0 .79.05L12 18.11l4.85 2.55a.73.73 0 0 0 .35.09a.8.8 0 0 0 .44-.14a.76.76 0 0 0 .3-.74l-.94-5.4l3.93-3.82a.75.75 0 0 0 .19-.77'/%3E%3C/svg%3E");
}

.btn.iliked{
	background-color: #4d82bc;
    color: #fff;
	border: 1px solid #1183c3 !important;
	content: "----"
}

.btn.iliked .uiw--like-o{
	background-color: #fff;
    color: #fff;
}

.uiw--like-o{
		color: #55ab32 !important;

  display: inline-block;
  width: 16px;
  height: 16px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M1.36 9.495v7.157h3.03l.153.018c2.813.656 4.677 1.129 5.606 1.422c1.234.389 1.694.484 2.531.54c.626.043 1.337-.198 1.661-.528c.179-.182.313-.556.366-1.136a.68.68 0 0 1 .406-.563c.249-.108.456-.284.629-.54c.16-.234.264-.67.283-1.301a.68.68 0 0 1 .339-.57c.582-.337.87-.717.93-1.163c.066-.493-.094-1.048-.513-1.68a.683.683 0 0 1 .176-.936c.401-.282.621-.674.676-1.23c.088-.886-.477-1.541-1.756-1.672a9.4 9.4 0 0 0-3.394.283a.68.68 0 0 1-.786-.95c.5-1.058.778-1.931.843-2.607c.085-.897-.122-1.547-.606-2.083c-.367-.406-.954-.638-1.174-.59c-.29.062-.479.23-.725.818c-.145.348-.215.644-.335 1.335c-.115.656-.178.952-.309 1.34c-.395 1.176-1.364 2.395-2.665 3.236a12 12 0 0 1-2.937 1.37a.7.7 0 0 1-.2.03zm-.042 8.52c-.323.009-.613-.063-.856-.233c-.31-.217-.456-.559-.459-.953l.003-7.323c-.034-.39.081-.748.353-1.014c.255-.25.588-.368.94-.36h2.185A10.5 10.5 0 0 0 5.99 6.95c1.048-.678 1.82-1.65 2.115-2.526c.101-.302.155-.552.257-1.14c.138-.789.224-1.156.422-1.628c.41-.982.948-1.462 1.69-1.623c.73-.158 1.793.263 2.465 1.007c.745.824 1.074 1.855.952 3.129q-.079.82-.454 1.844a10.5 10.5 0 0 1 2.578-.056c2.007.205 3.134 1.512 2.97 3.164c-.072.712-.33 1.317-.769 1.792c.369.711.516 1.414.424 2.1c-.106.79-.546 1.448-1.278 1.959c-.057.693-.216 1.246-.498 1.66a2.9 2.9 0 0 1-.851.834c-.108.684-.335 1.219-.706 1.595c-.615.626-1.714.999-2.718.931c-.953-.064-1.517-.18-2.847-.6c-.877-.277-2.693-.737-5.43-1.377zm1.701-8.831a.68.68 0 0 1 .68-.682a.68.68 0 0 1 .678.682v7.678a.68.68 0 0 1-.679.681a.68.68 0 0 1-.679-.681z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  margin-right: 5px;
}

.uiw--dislike-o{
	color: red !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-opacity='0.89' fill-rule='evenodd' d='M15.807.939c.396.367.655 1.133.706 1.595c.59.366 1.288 1.104 1.349 2.494c1.053.731 1.853 2.083.854 4.06c.58.54 1.227 2.188.395 3.516c-.969 1.552-3.075 1.66-5.174 1.383c.56 1.565.77 3.009-.116 4.488C12.94 19.787 11.724 20 11.308 20c-1.138 0-1.918-.979-2.234-2.283c-.115-.364-.246-1.224-.297-1.45q-.398-2.16-2.67-3.453a11.4 11.4 0 0 0-2.123-.946h-2.34c-.521 0-1.144-.527-1.144-1.165V3.067q.111-1.083 1.202-1.082h3.11Q6.857 1.52 8.89.99C10.2.637 10.487.52 11.403.268c2.053-.532 3.478-.24 4.404.67m-2.382.424c-.819 0-1.856.252-2.316.399c-.162.051-.446.135-.745.221l-.3.087l-.288.082l-.56.158s-1.41.378-4.173 1.02q-.154.018-.166.022v7.38q2.267.873 3.53 2.118c1.264 1.244 1.615 2.368 1.822 3.807c.118.723.309 1.306.597 1.705a.65.65 0 0 0 .342.251c.147.047.35.05.783-.184c.433-.236.99-.853 1.095-1.772c.07-.893-.17-1.667-.492-2.481a16 16 0 0 0-.357-.822c-.218-.413.11-1.099.786-.95c.906.255 3.154.6 4.422 0q1.106-.64.547-2.066a1.7 1.7 0 0 0-.495-.553c-.17-.102-.502-.544-.103-1.045c.396-.635.975-1.928-.49-2.734a.66.66 0 0 1-.34-.57c-.02-.274.024-1.29-.73-1.744c-.18-.097-.397-.177-.52-.41c-.078-.154-.103-.528-.103-.528c-.103-.632-.245-1.222-1.746-1.391M3.519 3.348H1.861v7.157h1.658z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  margin-right: 5px;
}

.icon-edit {
  color:  #b65518;
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  cursor: pointer;
}

.icon-delete {
	color:  #b65518;
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  cursor: pointer;
}

seccion-white{

	position: relative;
    box-sizing: border-box;
    color: inherit;
    margin-bottom: 5px;
    padding: 10px;
    vertical-align: top;
    padding-top: 36px;
    display: block;
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
}
seccion-white title{
	    font-size: 1.0rem;
    line-height: 0.5rem;
    font-weight: 700;
    margin-bottom: 0rem;
    margin-top: 1rem;
    position: relative;
    color: #000;
	    display: inline-block;
    top: -30px;
}



icon{
	
  color: #000;
  display: inline-block;
  width: 16px;
  height: 16px;  
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  margin-right: 5px;

}
.mingcute--arrow-right-fill {
	  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='m15.06 5.283l5.657 5.657a1.5 1.5 0 0 1 0 2.12l-5.656 5.658a1.5 1.5 0 0 1-2.122-2.122l3.096-3.096H4.5a1.5 1.5 0 0 1 0-3h11.535L12.94 7.404a1.5 1.5 0 0 1 2.122-2.121Z'/%3E%3C/g%3E%3C/svg%3E");
}


.hugeicons--play {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.89 12.846c-.353 1.343-2.023 2.292-5.364 4.19c-3.23 1.835-4.845 2.752-6.146 2.384a3.25 3.25 0 0 1-1.424-.841C5 17.614 5 15.743 5 12s0-5.614.956-6.579a3.25 3.25 0 0 1 1.424-.84c1.301-.37 2.916.548 6.146 2.383c3.34 1.898 5.011 2.847 5.365 4.19a3.3 3.3 0 0 1 0 1.692' color='%23000'/%3E%3C/svg%3E");

}
/*--------------------------TItemSelector-------------------------------------------*/
.TItemSelector{
	padding: 10px;
	position: relative;
  
}

.TItemSelector .thumb.selected{
   outline: 3px solid #8fceff ;
   border-radius: 5px;
}

.TItemSelector .placeholder{
	position:relative;
	width: 80px;
	height: 80px;
	border: 2px dashed #ccc;
	background: transparent
}

.TItemSelector .thumb{
    width: 80px;
	height: 80px;
	max-width: 100px;
	max-height: 100px;
	cursor: pointer;
	user-select: none;
	object-fit: contain;
	position: relative;

		outline: 1px solid #ccc;
    border-radius: 5px;
}


.TItemSelector .thumb:hover:not(.selected){

	outline: 3px solid #61a4d9;
    border-radius: 5px;
}

.TItemSelector .thumb.selected:hover{

	outline: 3px solid #61a4d9;
}


icon.order-approved{  
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m17.371 19.827l2.84-2.796l-.626-.627l-2.214 2.183l-.955-.975l-.627.632zM6.77 8.731h10.462v-1H6.769zM18 22.116q-1.671 0-2.835-1.165Q14 19.787 14 18.116t1.165-2.836T18 14.116t2.836 1.164T22 18.116q0 1.67-1.164 2.835Q19.67 22.116 18 22.116M4 20.769V5.616q0-.672.472-1.144T5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v5.944q-.244-.09-.484-.154q-.241-.064-.516-.1v-5.69q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616V19.05h6.344q.068.41.176.802q.109.392.303.748l-.034.034l-1.135-.826l-1.346.961l-1.346-.961l-1.346.961l-1.347-.961zm2.77-4.5h4.709q.056-.275.138-.515t.192-.485H6.77zm0-3.769h7.31q.49-.387 1.05-.645q.56-.259 1.197-.355H6.769zM5 19.05V5z'/%3E%3C/svg%3E");  
}

icon.delivery{	
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' color='%23000'%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M5 17.972c-1.097-.054-1.78-.217-2.268-.704s-.65-1.171-.704-2.268M9 18h6m4-.028c1.097-.054 1.78-.217 2.268-.704C22 16.535 22 15.357 22 13v-2h-4.7c-.745 0-1.117 0-1.418-.098a2 2 0 0 1-1.284-1.284C14.5 9.317 14.5 8.945 14.5 8.2c0-1.117 0-1.675-.147-2.127a3 3 0 0 0-1.926-1.926C11.975 4 11.417 4 10.3 4H2m0 4h6m-6 3h4'/%3E%3Cpath d='M14.5 6h1.821c1.456 0 2.183 0 2.775.354c.593.353.938.994 1.628 2.276L22 11'/%3E%3C/g%3E%3C/svg%3E");
  
}

icon.pay{	
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3.5 3A2.5 2.5 0 0 0 1 5.5V6h14v-.5A2.5 2.5 0 0 0 12.5 3zM15 7H1v3.5A2.5 2.5 0 0 0 3.5 13h9a2.5 2.5 0 0 0 2.5-2.5zm-4.5 3h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1'/%3E%3C/svg%3E");
  
}
/* EL SELLO DE «DESTACADO»: este sitio está pagado, y hay que decirlo.
   Va el PRIMERO de la esquina --por encima de cupones y etiquetas-- porque es
   lo que explica por qué ese producto está delante de los demás; sin la marca
   sería publicidad encubierta.
   En ambar, para que no se confunda con las etiquetas del catalogo, que
   describen el producto y no un pago. */
.product .pt-destacado{
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 5px 0 0 5px;
    padding: 2px 8px;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;

    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 20px;
}
.product .pt-destacado i{ font-size: 11px; }


/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}



        
.mdi--approve {
  height:20px;
  width: 20px;
  color: #4ab2ff;
  display: inline-block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m23 12l-2.44-2.78l.34-3.68l-3.61-.82l-1.89-3.18L12 3L8.6 1.54L6.71 4.72l-3.61.81l.34 3.68L1 12l2.44 2.78l-.34 3.69l3.61.82l1.89 3.18L12 21l3.4 1.46l1.89-3.18l3.61-.82l-.34-3.68zm-13 5l-4-4l1.41-1.41L10 14.17l6.59-6.59L18 9z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

Icon{
  height: 25px;
  width: 25px;
  color: #444;
  background-color: currentColor;
  mask-image: var(--svg);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  top: 0px;
  position: relative;
  display: inline-block;
}

.send-email {  
 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M44 24V9H4v30h20m20-5H30m9-5l5 5l-5 5'/%3E%3Cpath d='m4 9l20 15L44 9'/%3E%3C/g%3E%3C/svg%3E");

}


.approve-comment {  
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m17.371 18.587l-.655-.656q-.13-.129-.307-.129q-.178 0-.307.129q-.129.128-.129.303t.129.304l.86.86q.186.187.419.187t.419-.187l2.098-2.067q.129-.129.139-.297q.01-.169-.139-.317q-.129-.129-.316-.129t-.317.13zM7.27 8.73h9.462q.213 0 .356-.143t.144-.357q0-.233-.144-.366q-.143-.134-.356-.134H7.269q-.213 0-.357.143t-.143.357t.143.357t.357.143M18 22.116q-1.671 0-2.835-1.165Q14 19.787 14 18.116t1.165-2.836T18 14.116t2.836 1.164T22 18.116q0 1.67-1.164 2.835Q19.67 22.116 18 22.116M4 5.616q0-.672.472-1.144T5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v5.317q0 .213-.143.357t-.357.143t-.357-.143t-.143-.357V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616V19.05h6.344q.031.202.073.404q.043.202.11.398q.067.179-.09.293q-.158.115-.3.01l-.249-.17q-.111-.073-.234-.073t-.235.073l-.877.607q-.111.074-.234.074t-.235-.074l-.877-.607q-.112-.073-.235-.073t-.234.073l-.877.607q-.111.074-.234.074t-.235-.074l-.877-.607q-.112-.073-.235-.073t-.234.073L4 20.788zm3.27 10.653h3.874q.214 0 .357-.143t.143-.357t-.143-.356t-.357-.144H7.27q-.213 0-.357.144t-.143.356t.143.357t.357.143m0-3.769h7.204q.213 0 .357-.143t.143-.357t-.143-.357t-.357-.143H7.269q-.213 0-.357.143T6.77 12t.143.357t.357.143M5 19.05V5z'/%3E%3C/svg%3E");

}


/* Ion.RangeSlider
// css version 2.0.3
// © 2013-2014 Denis Ineshin | IonDen.com
// ===================================================================================================================*/

/* =====================================================================================================================
// RangeSlider */

.irs {
    position: relative; display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
    .irs-line {
        position: relative; display: block;
        overflow: hidden;
        outline: none !important;
    }
        .irs-line-left, .irs-line-mid, .irs-line-right {
            position: absolute; display: block;
            top: 0;
        }
        .irs-line-left {
            left: 0; width: 11%;
        }
        .irs-line-mid {
            left: 9%; width: 82%;
        }
        .irs-line-right {
            right: 0; width: 11%;
        }

    .irs-bar {
        position: absolute; display: block;
        left: 0; width: 0;
    }
        .irs-bar-edge {
            position: absolute; display: block;
            top: 0; left: 0;
        }

    .irs-shadow {
        position: absolute; display: none;
        left: 0; width: 0;
    }

    .irs-slider {
        position: absolute; display: block;
        cursor: default;
        z-index: 1;
    }
        .irs-slider.single {

        }
        .irs-slider.from {

        }
        .irs-slider.to {

        }
        .irs-slider.type_last {
            z-index: 2;
        }

    .irs-min {
        position: absolute; display: block;
        left: 0;
        cursor: default;
    }
    .irs-max {
        position: absolute; display: block;
        right: 0;
        cursor: default;
    }

    .irs-from, .irs-to, .irs-single {
        position: absolute; display: block;
        top: 0; left: 0;
        cursor: default;
        white-space: nowrap;
    }

.irs-grid {
    position: absolute; display: none;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
    display: block;
}
    .irs-grid-pol {
        position: absolute;
        top: 0; left: 0;
        width: 1px; height: 8px;
        background: #000;
    }
    .irs-grid-pol.small {
        height: 4px;
    }
    .irs-grid-text {
        position: absolute;
        bottom: 0; left: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 9px; line-height: 9px;
        padding: 0 3px;
        color: #000;
    }

.irs-disable-mask {
    position: absolute; display: block;
    top: 0; left: -1%;
    width: 102%; height: 100%;
    cursor: default;
    background: rgba(0,0,0,0.0);
    z-index: 2;
}
.irs-disabled {
    opacity: 0.4;
}
.lt-ie9 .irs-disabled {
    filter: alpha(opacity=40);
}


.irs-hidden-input {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: -9999 !important;
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
}


/* Ion.RangeSlider, Flat UI Skin
// css version 2.0.3
// © Denis Ineshin, 2014    https://github.com/IonDen
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
    background: url(../img/sprite-skin-flat.png) repeat-x;
}

.irs {
    height: 40px;
}
.irs-with-grid {
    height: 60px;
}
.irs-line {
    height: 12px; top: 25px;
}
    .irs-line-left {
        height: 12px;
        background-position: 0 -30px;
    }
    .irs-line-mid {
        height: 12px;
        background-position: 0 0;
    }
    .irs-line-right {
        height: 12px;
        background-position: 100% -30px;
    }

.irs-bar {
    height: 12px; top: 25px;
    background-position: 0 -60px;
}
    .irs-bar-edge {
        top: 25px;
        height: 12px; width: 9px;
        background-position: 0 -90px;
    }

.irs-shadow {
    height: 3px; top: 34px;
    background: #000;
    opacity: 0.25;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=25);
}

.irs-slider {
    width: 16px; height: 18px;
    top: 22px;
    background-position: 0 -120px;
}
.irs-slider.state_hover, .irs-slider:hover {
    background-position: 0 -150px;
}

.irs-min, .irs-max {
    color: #999;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    top: 0; padding: 1px 3px;
    background: #e1e4e9;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #ed5565;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.irs-from:after, .irs-to:after, .irs-single:after {
    position: absolute; display: block; content: "";
    bottom: -6px; left: 50%;
    width: 0; height: 0;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid transparent;
    border-top-color: #ed5565;
}


.irs-grid-pol {
    background: #e1e4e9;
}
.irs-grid-text {
    color: #999;
}

.irs-disabled {
}


/* Ion.RangeSlider, Simple Skin
// css version 2.0.3
// © Denis Ineshin, 2014    https://github.com/IonDen
// © guybowden, 2014        https://github.com/guybowden
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs {
    height: 55px;
}
.irs-with-grid {
    height: 75px;
}
.irs-line {
    height: 10px; top: 33px;
    background: #EEE;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
    border: 1px solid #CCC;
    border-radius: 16px;
    -moz-border-radius: 16px;
}
    .irs-line-left {
        height: 8px;
    }
    .irs-line-mid {
        height: 8px;
    }
    .irs-line-right {
        height: 8px;
    }

.irs-bar {
    height: 10px; top: 33px;
    border-top: 1px solid #428bca;
    border-bottom: 1px solid #428bca;
    background: #428bca;
    background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
}
    .irs-bar-edge {
        height: 10px; top: 33px;
        width: 14px;
        border: 1px solid #428bca;
        border-right: 0;
        background: #428bca;
        background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
        border-radius: 16px 0 0 16px;
        -moz-border-radius: 16px 0 0 16px;
    }

.irs-shadow {
    height: 2px; top: 38px;
    background: #000;
    opacity: 0.3;
    border-radius: 5px;
    -moz-border-radius: 5px;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=30);
}

.irs-slider {
    top: 25px;
    width: 27px; height: 27px;
    border: 1px solid #AAA;
    background: #DDD;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
    border-radius: 27px;
    -moz-border-radius: 27px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

.irs-slider.state_hover, .irs-slider:hover {
    background: #FFF;
}

.irs-min, .irs-max {
    color: #333;
    font-size: 12px; line-height: 1.333;
    text-shadow: none;
    top: 0;
    padding: 1px 5px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    -moz-border-radius: 3px;
}

.lt-ie9 .irs-min, .lt-ie9 .irs-max {
    background: #ccc;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 14px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #428bca;
    border-radius: 3px;
    -moz-border-radius: 3px;
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
    background: #999;
}

.irs-grid {
    height: 27px;
}
.irs-grid-pol {
    opacity: 0.5;
    background: #428bca;
}
.irs-grid-pol.small {
    background: #999;
}

.irs-grid-text {
    bottom: 5px;
    color: #99a4ac;
}

.irs-disabled {
}


/* Ion.RangeSlider, Modern Skin
// css version 2.0.3
// © Denis Ineshin, 2014    https://github.com/IonDen
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
    background: url(../img/sprite-skin-modern.png) repeat-x;
}

.irs {
    height: 50px;
}
.irs-with-grid {
    height: 70px;
}
.irs-line {
    height: 6px; top: 25px;
}
    .irs-line-left {
        height: 6px;
        background-position: 0 -30px;
    }
    .irs-line-mid {
        height: 6px;
        background-position: 0 0;
    }
    .irs-line-right {
        height: 6px;
        background-position: 100% -30px;
    }

.irs-bar {
    height: 6px; top: 25px;
    background-position: 0 -60px;
}
    .irs-bar-edge {
        top: 25px;
        height: 6px; width: 6px;
        background-position: 0 -90px;
    }

.irs-shadow {
    height: 5px; top: 25px;
    background: #000;
    opacity: 0.25;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=25);
}

.irs-slider {
    width: 11px; height: 18px;
    top: 31px;
    background-position: 0 -120px;
}
.irs-slider.state_hover, .irs-slider:hover {
    background-position: 0 -150px;
}

.irs-min, .irs-max {
    color: #999;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    top: 0; padding: 1px 3px;
    background: #e1e4e9;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #20b426;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.irs-from:after, .irs-to:after, .irs-single:after {
    position: absolute; display: block; content: "";
    bottom: -6px; left: 50%;
    width: 0; height: 0;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid transparent;
    border-top-color: #20b426;
}

.irs-grid {
    height: 34px;
}
.irs-grid-pol {
    background: #c0c0c0;
}
.irs-grid-text {
    bottom: 12px;
    color: #c0c0c0;
}

.irs-disable-mask {

}
.irs-disabled {

}
.lt-ie9 .irs-disabled {

}


/* Ion.RangeSlider, Nice Skin
// css version 2.0.3
// © Denis Ineshin, 2014    https://github.com/IonDen
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
    background: url(../img/sprite-skin-nice.png) repeat-x;
}

.irs {
    height: 40px;
}
.irs-with-grid {
    height: 60px;
}
.irs-line {
    height: 8px; top: 25px;
}
    .irs-line-left {
        height: 8px;
        background-position: 0 -30px;
    }
    .irs-line-mid {
        height: 8px;
        background-position: 0 0;
    }
    .irs-line-right {
        height: 8px;
        background-position: 100% -30px;
    }

.irs-bar {
    height: 8px; top: 25px;
    background-position: 0 -60px;
}
    .irs-bar-edge {
        top: 25px;
        height: 8px; width: 11px;
        background-position: 0 -90px;
    }

.irs-shadow {
    height: 1px; top: 34px;
    background: #000;
    opacity: 0.15;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=15);
}

.irs-slider {
    width: 22px; height: 22px;
    top: 17px;
    background-position: 0 -120px;
}
.irs-slider.state_hover, .irs-slider:hover {
    background-position: 0 -150px;
}

.irs-min, .irs-max {
    color: #999;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    top: 0; padding: 1px 3px;
    background: rgba(0,0,0,0.1);
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.lt-ie9 .irs-min, .lt-ie9 .irs-max {
    background: #ccc;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: rgba(0,0,0,0.3);
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
    background: #999;
}

.irs-grid-pol {
    background: #99a4ac;
}
.irs-grid-text {
    color: #99a4ac;
}

.irs-disabled {
}


/* Ion.RangeSlider, Simple Skin
// css version 2.0.3
// © Denis Ineshin, 2014    https://github.com/IonDen
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
    background: url(../img/sprite-skin-simple.png) repeat-x;
}

.irs {
    height: 40px;
}
.irs-with-grid {
    height: 60px;
}
.irs-line {
    height: 6px; top: 25px;
}
    .irs-line-left {
        height: 6px;
        background-position: 0 -30px;
    }
    .irs-line-mid {
        height: 6px;
        background-position: 0 0;
    }
    .irs-line-right {
        height: 6px;
        background-position: 100% -30px;
    }

.irs-bar {
    height: 6px; top: 25px;
    background-position: 0 -60px;
}
    .irs-bar-edge {
        top: 25px;
        height: 6px; width: 7px;
        background-position: 0 -90px;
    }

.irs-shadow {
    height: 1px; top: 34px;
    background: #000;
    opacity: 0.75;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=75);
}

.irs-slider {
    width: 8px; height: 15px;
    top: 21px;
    background-position: 0 -120px;
}
.irs-slider.state_hover, .irs-slider:hover {
    background-position: 0 -150px;
}

.irs-min, .irs-max {
    color: #c0c0c0;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    top: 0; padding: 1px 3px;
    background: rgba(0,0,0,0.1);
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.lt-ie9 .irs-min, .lt-ie9 .irs-max {
    background: #3654b0;
}

.irs-from, .irs-to, .irs-single {
    color: #000;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: rgba(255,255,255,0.8);
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
    background: #d8dff3;
}

.irs-grid-pol {
    background: #777;
}
.irs-grid-text {
    color: #e0e0e0;
}

.irs-disabled {
}



:root
{
   --primary: #3498db;
    --primary-dark: #2980b9;
    --secondary: #2c3e50;
    --success: #27ae60;
    --warning: #f39c12;
    --danger: #e74c3c;
    --light: #f8f9fa;
    --dark: #2c3e50;
    --gray: #6c757d;
    --border: #e9ecef;
    --purple: #9b59b6;

     --min-field-width: 250px;
}

/* Contenedor principal del formulario */
.form-container {
    font-family: 'Inter', sans-serif;
    color: #333;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    max-width: 1000px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* T�tulos y descripciones del formulario */
.form-container h2 {
    font-size: 1.8em;
    margin-bottom: 5px;
}
.form-container p.description {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 20px;
}

/* Secciones generales */
.form-section {
    margin-bottom: 20px;
}
.form-section h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #444;
}

/* Grid de columnas */
.section-grid {
 display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}


.section-grid .field-wrapper {
   
    min-width: 100px; /* opcional para que no queden demasiado peque�os */
}

/* Field wrapper */
.field-wrapper {
    display: flex;
    flex-direction: column;
   
}
.field-wrapper label {
    font-weight: 500;
    margin-bottom: 4px;
    color: #333;
    font-size: 1.0em;
}
.field-wrapper input,
.field-wrapper select,
.field-wrapper textarea {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #bcbec9;
    font-size: 1.2em;
    transition: border-color 0.2s;
}
.field-wrapper input:focus,
.field-wrapper select:focus,
.field-wrapper textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Cards */

.card-warning
{
    margin-top: 5px;
    padding: 8px;
    background: #e8f4fd;
    border-radius: 6px;
    border-left: 4px solid #3498db;
    font-size: 13px;
    color: #2c3e50;
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-color: rgba(223, 43, 43, 0.1) rgba(223, 43, 43, 0.1) rgba(223, 43, 43, 0.1) rgb(223, 43, 43);
    border-image: initial;
    background-color: rgba(223, 43, 43, 0.2);
    border-radius: 8px;
}
.card-warning p
{
    margin: 0;
}

.card-warning h4{
margin-top: 0;
    margin-bottom: 6px;
        font-size: 1.3em;
    color: var(--dark);
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.card-desc{
    margin: 0px;
    margin-bottom: 18px;
}

.form-card {
    background: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    /*margin-bottom: 15px;*/
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s;
    max-width: 100%;   
    border-radius: 8px;
}

.form-card h4 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 1.3em;
    color: var(--dark);
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.form-card p {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 10px;
    color: var(--gray);
    margin-bottom: 20px;
}
.form-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

/* Inputs especiales */
.field-wrapper input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
}
.field-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

/* Textareas */
.field-wrapper textarea {
    resize: vertical;
    min-height: 60px;
}

/* Tables TTableES6 */
.ttable {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 20px 0;
}
.ttable th,
.ttable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 0.9em;
}
.ttable th {
    background: #f3f3f3;
    font-weight: 600;
}
.ttable tr:nth-child(even) {
    background: #fafafa;
}

/* Botones */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}
.form-actions button {
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
        font-size: 14px;
    transition: background 0.2s, color 0.2s;
    line-height: 16px;
}
.form-actions .btn-primary {
    background: #007bff;
    color: #fff;
    border-image: none;
}
.form-actions .btn-primary:hover {
    background: #0056b3 !important;
    
}
.form-actions .btn-secondary {
    background: #e2e6ea;
    color: #333;
    border-image: none;
}
.form-actions .bnt-secondary:hover {
    background: #cfd4d9;
}

/* Responsive */
@media (max-width: 768px) {
    .section-grid.cols-2 .field-wrapper,
    .section-grid.cols-3 .field-wrapper {
        flex: 1 1 100%;
    }
    .card {
        margin-bottom: 20px;
    }
}

/* Grid auto-responsive: ajusta n�mero de columnas seg�n espacio */
.auto-grid {
 display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

/* Si un hijo debe ocupar toda la fila */
.auto-grid .field-wrapper.full,
.auto-grid .field-wrapper.full * {
  grid-column: 1 / -1;
}

/* Estilos b�sicos para campo/label */
.field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
.field-label { font-weight: 600; margin-bottom: 4px; }
.form-control { width: 100%; box-sizing: border-box; }


.auto-grid .span-2 { grid-column: span 2; }
.auto-grid .span-3 { grid-column: span 3; }
.auto-grid .span-4 { grid-column: span 4; }
.auto-grid .span-5 { grid-column: span 5; }

@media (max-width: 500px) {
  .auto-grid { --min-field-width: 100px; }
}


.animate-show {
  
  overflow: hidden;
  transition: height 300ms ease;
}



 .whiteWindow.gray .zona_cliente{ background-color: #f0f0f0 !important; }
 .whiteWindow.gray .zona_cliente .pie{ background-color: #f0f0f0 !important; }
 .whiteWindow.gray input:focus{ border-radius: 5;  border-color: #dcb64f; border-top-color: #dcb64f;}



.list_multi_column {
	/*
display: flex !important;
justify-content: space-around;
flex-flow: wrap;
*/
position: relative;

min-width: 100%;
min-height: 100%;
outline: none;
top: 0px;
 max-width: 100%; /* */ 

 /* display: flex !important; */
flex-wrap: wrap;

}

.list_multi_column  .foot{ 
 display:none;
}


.list_multi_column > ul{
 margin: 0px;
 padding: 0px;
 
 /*
 flex-wrap: wrap; 
 display: flex; 
 */
}


.list_multi_column  .item{ 
float: left;
left: 0px;
top: 0px;
margin: 0px;  
margin-bottom: 2px;
z-index: 1;




cursor: default;
 /* box-sizing:border-box; */
background-size: contain;
display:inline-block;
vertical-align:top;

border: 5px solid transparent;
padding: 0px; 
margin: 0px;
margin-bottom: 2px;
margin-right: 5px;
white-space: normal;
height: 133px;
position: relative;

overflow: hidden;
 /* height: 110px; */

}

.list_multi_column .loading{
background: url(media/loading/loading_trans_32.gif) 26px 20px no-repeat;
background-size: 24px 24px;
}

.list_multi_column  .edisting{
	
	
} 

.list_multi_column .item .photo{

/* box-shadow: 0px 7px 14px #666; */
position: relative;
left: 9px;
z-index: 10;
width: 60px;
height: 60px;
float:left; 
max-width: 80px; 
padding: 0px; 
border: 0px solid #cbcbcb;

      object-fit: contain;

}




.list_multi_column  .item:hover{

padding: 0px;
border: 5px solid transparent ;
border-image: url(/images/boxSelection_over.png) 5 5 5 fill ;
border-style: solid;
}


.list_multi_column .contextbinder,
.list_multi_column  .item.on{
padding: 0px;
border: 5px solid transparent;
 border-image: url(/images/boxSelection_fout.png) 5 5 5 fill ;/* */
 border-style: solid;
}

/*
.list_multi_column .details.pivot{
border: 1px solid #03C ;
padding: 4px;	
border-radius: 4px;
}
*/

.list_multi_column.focused .item.on,
.list_multi_column .item.focused.on,
.list_multi_column .item.on:hover{
/* z-index:10000 !important; */
padding: 0px;
border: 5px solid transparent ;
border-image: url(/images/boxSelection_focused_on.png) 5 5 5 fill ;/* */
border-style: solid;
}


.explorer .upload_types{  position:relative;  margin-left: 120px;}
.explorer .upload_types a{ line-height: 10px; font-size: 11px;}




.list_multi_column .actions{ display: none; } 





.list_multi_column .details{
margin-bottom: 15px;
position: relative;
	
}

.list_multi_column .dataZone{

 /* max-height: 50px; */
position: relative; 
top: 10px;
 /* margin-bottom: 10px; */
width: 100%; 
 /*left: 3px;  */
overflow: hidden;
left: -3px;
padding: 1px;
border: 1px solid transparent;



}

.list_multi_column .item.editing .dataZone{
border-color: #666 !important ;
cursor: text;
background-color: #fff;		
}



.list_multi_column .name{ 


box-sizing:border-box;
text-align: center; 
font: bold 11px Tahoma, Verdana;
color: #333; 
 /* width: 350px;*/
overflow: hidden;
display: inline-block;
 /*text-overflow:  ellipsis; */
outline: none; 
background-color: transparent ;
white-space: normal;
width: 100%;
word-wrap: break-word;


}




.list_multi_column .selectBox{ position:absolute; display:none; border: 1px solid #60a829; z-index:20000; }
.list_multi_column .selectBox div{left: 0; top: 0; height:100%; width:100%; position:absolute; background-color: #b1df8d; }

.list_multi_column .selectBox{ position:absolute; display:none; border: 1px solid #1238a2; z-index:20000; }
.list_multi_column .selectBox div{left: 0; top: 0; height:100%; width:100%; position:absolute; background-color: #4f94e9; }




/* --------------FIN--------------------*/







.list_multi_column .item .version:before{ content: " · ";}



.list_multi_column .submenu{
margin-bottom: 16px;
padding-bottom: 20px;
height: auto;
position: relative;
width: 100%;
 /* min-width: 400px; */
box-sizing: border-box;
padding: 0px;
padding-top: 0px;

border: 0px solid transparent;
border-top: 1px solid #ccc;
display: block;


}


.list_multi_column .submenu >.details{
margin-bottom: 0px;	
color: #1e3287;
font: bold 11px Verdana, Arial;
cursor: pointer;
}

.list_multi_column .submenu.on,
.list_multi_column .submenu.on:hover,
.list_multi_column .submenu:hover{
padding: 0px;
padding-top: 0px;

border: 0px solid transparent;
border-top: 1px solid #ccc;
}



.list_multi_column .submenu ul,
.list_multi_column .submenu ul:hover{
display:flex;
flex-wrap: wrap;
margin: 0px;
padding: 0px;	
}

.list_multi_column .submenu > .details{
font: bold 11px Verdana, Arial;
position: relative;
top: -14px;
left: -3px;
display: inline-block;
padding: 5px;
background-color: #fff;	
	
}




.list_multi_column .bullet{
padding: 2px 2px;
position: absolute;
background: url(/ft/explorer/images/bullet_coll.png) no-repeat 0px;
margin-top: 2px;
margin-left: -10px;
	

width: 7px;
display:inline-block; 	

}


.list_multi_column .bullet:hover{
background: url(/ft/explorer/images/bullet_hover.png) no-repeat 0px 0px;
margin-top: 2px;
margin-left: -12px;

	
}

.list_multi_column .expanded >.details >.bullet{
margin-top: 5px;
margin-left: -11px;
background: url(/ft/explorer/images/bullet_exp.png) no-repeat ;
	
}

.list_multi_column .expanded > .details >.bullet:hover{
margin-top: 2px;
margin-left: -14px;
background: url(/ft/explorer/images/bullet_exp_hover.png) no-repeat 0px 0px;;

}





.list_multi_column.simpleZoomed .submenu li{ float:left; white-space:normal; }
.list_multi_column.simpleZoomed .dataZone{display: none;}
.list_multi_column.simpleZoomed .photo{

max-width: none;
left: 0px;
margin: 0px; 
}

.list_multi_column.simpleZoomed{
 min-width: 0px !important; 
 padding: 0px;
 margin: 0px;
}

.list_multi_column.simpleZoomed .item{

height: auto; 	
	
}

.list_multi_column.simpleZoomed .encrypted{position: absolute; right: 5px;}

.Tlist.list_multi_column .pendingItems {
top: auto;
bottom: 1px;
z-index: 100;
position: absolute;
}
  
  
  
  


/*-------------LIST ROW ---------*/


.list_one_column{

padding-left: 10px;
position: relative;
margin: 0px;
box-sizing: border-box;

padding-top: 8px;
padding-left: 10px !important;

}


.list_one_column  ul{
 margin: 0px;
 padding: 0px;
 position: relative;
 margin-bottom: 20px;
}

.list_one_column  .submenu ul{
padding-left: 20px;
}


.Tlist .filtered{display: none;}

.list_one_column .bullet{
padding: 2px 2px;
position: absolute;
background: url(/ft/explorer/images/bullet_coll.png) no-repeat 0px;
margin-top: 2px;
margin-left: -10px;
	

width: 7px;
display:inline-block; 	

}


.list_one_column .bullet:hover{
background: url(/ft/explorer/images/bullet_hover.png) no-repeat 0px 0px;
margin-top: 2px;
margin-left: -12px;

	
}

.list_one_column .expanded >.details >.bullet{
margin-top: 5px;
margin-left: -11px;
background: url(/ft/explorer/images/bullet_exp.png) no-repeat ;
	
}

.list_one_column .expanded > .details >.bullet:hover{
margin-top: 2px;
margin-left: -14px;
background: url(/ft/explorer/images/bullet_exp_hover.png) no-repeat 0px 0px;;

}



.list_one_column .item{ 
position: relative;
width:  100%;
height: 37px;
border: 0px;

box-sizing:border-box;
margin: 0px;


box-sizing: border-box;

padding: 4px ;

border-image: none !important;
border-style: solid;

border-left: 2px solid transparent;
border-bottom: 1px solid #ccc;
cursor: pointer;



}



.list_one_column .item .icon{
float:left; 
width: 28px;
height: 28px;
}

.list_one_column .item .subcontent{
font-style:italic;
font: 12px Verdana, Arial;	
color: #999;
display:inline-block;
max-width: 250px;
	
}
.Tlist .loading{
background: url(/media/loading/loading_trans_32.gif) center center no-repeat;
background-size: 20px;
}


.list_one_column .item .totalFiles:before{ content: " · "; left: -10px; }

.list_one_column .item .size:before,
.list_one_column .item .version:before,
.list_one_column .item .progress:before{ content: " · ";  }




.list_one_column .item.pivot{ }
.list_one_column .item .handle{ background-color:#9C0; width: 20px; height:20px; bottom: 0px; position:absolute;}





.list_one_column  .highlight{color: #F60; font: bold 11px Tahoma, Verdana; }

/*-------------listViewRow----------------*/
.list_one_column .dir:before{ content:normal;}
.list_one_column .dir .icon{
float:left;
position: relative;
margin-top: 0px;
left: 0px;
z-index: 10;

}


.list_one_column .encrypted{
    position: absolute;	
	margin-left: -6px;
	display: block;
	background-size: 100% !important;
}


.list_one_column .encrypted.method1{
background: url("/ft/explorer/images/lockoverlay.png")  no-repeat;
}

.list_one_column .encrypted.method2{
background: url("/ft/explorer/images/sec_key.png")  no-repeat;
}


.list_one_column .encryptButton{background-size: 100% !important;}
.list_one_column .encryptButton.method0{
background: url("/ft/explorer/images/sec_key_grey.png")  no-repeat;
}

.list_one_column .encryptButton.method2{
background: url("/ft/explorer/images/sec_key.png")  no-repeat;
}


.list_one_column .actions{ position:absolute; display:block; right: 0px; z-index: 100;}
.list_one_column .actions img{ display:inline-block; opacity: 0.6; cursor:pointer; margin-right: 3px;  }
.list_one_column .dataZone{ display: table-cell;}
.list_one_column .dataZone{
top: auto;
position: relative;
bottom: auto;
height:auto;
width: 320px;
overflow: visible;	
display: inline-block;
white-space: nowrap;
}

.list_one_column .dataZone .foot{ position:absolute; top: 19px; display:block; }
.list_one_column .dataZone .foot span{ display:inline; font: 11px arial,helvetica,clean,sans-serif; }
.list_one_column .dataZone .foot .created{ padding: 2px 1px; }
.list_one_column .dataZone .foot .modificated{display: none;}
.list_one_column .dataZone .name{ 
text-align: left; 
font: bold 11px Tahoma, Verdana;
color: #333; 
width: auto;
overflow: hidden;
display: inline-block;
text-overflow:  ellipsis;
outline: none; 
background-color: transparent ;
white-space: nowrap;
padding:2px;
border: transparent 1px solid;
box-sizing: border-box;
background-color: #FFF;
left: -2px;
position: relative;

}

.list_one_column .editing .name{
border-color: #666 !important ;
cursor: text;	
}

.list_one_column .editingHelper,


.list_one_column .dataZone .path{ display: none ;}
/*------------------------------------------*/



/*---------------------------- MINIMALISTA ----------------------------*/



.list_one_column .item .selectMark{
width: 3px; 
top: 0px;
left: -8px;
position: absolute;
height: 100%;
background-color: transparent;
 float:left; 
 
 
}



.list_one_column .contextbinder > .details .selectMark,
.list_one_column .item.on > .details .selectMark,
.list_one_column .item:hover > .details .selectMark{
background-color: #ddd;
}



.list_one_column.focused .item.on > .details .selectMark{
background-color:    #9C0;
}
.list_one_column.focused .item.on:hover > .details .selectMark{
background-color:     #5EA417;
}

.list_one_column.focused .drop > .details .selectMark{
 background-color:#06F !important; 
}






/* estado normal */
.list_one_column   .name.disabled{
border: 1px solid transparent;
}









.Tlist .pendingItems{
  top: 2px;
  position: relative;
  background-color: #f1f7fd;
  width: 90%;
  height: 18px !important;
  border: 1px solid #b8d6fb !important;
  margin: auto;
  bottom: 1px;
  box-sizing: border-box;
  
  padding: 0px;
  border-image: none !important;
  border-style: solid;
  cursor: pointer;
  text-align: center;
  margin-bottom: 5px;	
  margin-top: 3px;	
}


.list_one_column .pendingItems:hover .name{
text-decoration: underline;	
	
}


.list_one_column .pendingItems .name{
top: 2px;
z-index: 100; 
color: #678ebd !important; 
position: absolute;
text-align: center; 
font: bold 9px Arial, Tahoma; 
top: 3px;
}







.dragHelper { 
position:relative;
background-color:#DFEEFF;
box-shadow: 0px 10px 20px -8px #888;
z-index: 10000000000 ;
border-radius: 5px;
}
.dragHelper .img{
position: absolute;
}
.dragHelper .actions{ display: none;}
.dragHelper .dataZone{ display: none;}

.dragHelper .Tprogress{ display: none;}



.dragHelper .numItems{ 
position:absolute; 
left: 50%; 
top: 50%; 
width: 16px; 
height: 16px; 
margin-top: -8px; 
margin-left: -8px;

position:absolute; 
right:  2px; 
bottom: 2px; 
border: 1px solid #1d74cd; 
width:  15px;
height: 15px;
color:  #036;
font:bold 1em Arial;
text-align:center;
vertical-align:middle;
background-color: #cde0eb;
z-index: 10;
}


.list_one_column .submenu{

margin-bottom: 16px;
height: auto;
border: 0px solid transparent;
border-top: 1px solid #ccc;
padding: 0px;
cursor: pointer;
}

.list_one_column .submenu > .details{
cursor: pointer;
position: relative;
top: -14px;
left: -3px;
display: inline-block;
padding: 5px;
background-color: #fff;	
color: #1e3287;
font: bold 11px Verdana, Arial;
	
}


.list_one_column .Tselect2{
	border: 0px;
}

.list_one_column .Tselect2 ul{
padding: 0px;	
}


.list_one_column .enterdrop .selectMark{ 
 background-color: #666 !important; 
}






/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
 
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background-color: transparent;
}

/* Aquí iba `a:active, a:hover { outline: 0 }`, de una versión vieja de
   normalize (la actual ya no lo trae). Se retira: al pasar el ratón por encima
   de un enlace con el foco de teclado le borraba el anillo común de
   `:focus-visible` (Tjquery/css/index.css), porque `a:hover` pesa más que
   `:focus-visible` y además esta hoja carga después. */

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
    color: inherit; /* 1 */
    font: inherit; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
	background-color: #d8d8d8;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}


@charset "utf-8";
/* CSS Document */


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.pagination{
padding: 2px;

float

border:0px solid;

/*Set to "right" to right align pagination interface*/

}

.pagination{
margin: auto;
padding: 0;
text-align:center;


font-size: 16px;
}

.pagination li{
list-style-type: none;
display: inline;
margin-left:3px;

}


.pagination a, .pagination a:visited{

background:url(/imagenes/mis_apuestas/ico_paginacion.png) no-repeat top left;
background-position: -29px 0px;

display:  inline-block;	


padding:0px;

		
width: 20px;
height:22px;


line-height:20px;
text-align:center;
 


text-decoration: none;
font-size: 9px;
color: #000;
}

.pagination a:hover, .pagination a:active{
	border: 0px solid #f0f0f0;
}

.pagination a.current{

background:url(/imagenes/mis_apuestas/ico_paginacion.png) no-repeat top left;
background-position: -9px 0px;

display:  inline-block;	


padding:0px;

		
width: 20px;
height:22px;




line-height:20px;
text-align:center;
 


text-decoration: none; 

color: #FFF !important;
font: Arial, Helvetica, sans-serif bold;
font-size: 9px;

cursor: default;

}

.pagination  a:hover{

background:url(/imagenes/mis_apuestas/ico_paginacion.png) no-repeat top left;
background-position: -9px 0px;

display:  inline-block;	


padding:0px;

		
width: 20px;
height:22px;




line-height:20px;
text-align:center;
 


text-decoration: none; 

color: #FFF !important;
font: Arial, Helvetica, sans-serif bold;
font-size: 9px;



}



.pagination a.disable, .pagination a.disable:hover{
background: none;
margin-right:10px;	

cursor: default;
color: #3E921F;

font-weight: bold !important;
}



.pagination a.prevnext{
	
background: none;
display:inline-block;

margin-right:10px;	

padding: 0px 5px;




color: #929292;	
border: 0px solid #9aafe5;
font-weight: bold;
}

.pagination a.prevnext:hover{
color: #3E921F !important;
border: 0px solid #9aafe5;
}

.pagination a.fin{
	
background:url(/imagenes/mis_apuestas/ico_paginacion.png) no-repeat top left;
background-position: -50px 0px;
background: none;
margin-right:10px;	

padding: 0px 5px;

color: #929292;	
border: 0px solid #9aafe5;
font-weight: bold;
}


.pagination a.disable, .pagination a.disable:hover{
background: none;
margin-right:10px;	

cursor: default;
color: #3E921F;

font-weight: bold !important;
}





.pagination li.puntos{


	
padding:0px;



line-height:20px;
text-align:left;


		
width: 15px;
height:22px;


}






.Tbutton{
  position: relative;
  z-index: 1;
 /*  float: left; */
  margin-right: 2px;
  border: 5px solid transparent;
  cursor: pointer;
  height: 26px;
  margin-top: 0px;	
  line-height: 16px;
  font: bold 11px Arial;
  color: #000;
  padding: 1px;
  display: inline-block;
  white-space: nowrap; 
   border-style: solid;
 
 
/* background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);*/
 }
 
.Tbutton a {color: #666; text-decoration:none; }
 
.Tbutton.blue:hover{ 
   border-image: url(ft/explorer/images/boxSelection_over.png) 5 5 5 fill ;
  
}

.Tbutton.blue.on,
.Tbutton.blue.opened{ 
border-image: url(ft/explorer/images/boxSelection_focused_on.png) 5 5 5 fill ;

}


 
.Tbutton.gray{ 
 /* border-image: url(/images/btn_over.png) 5 5 5 fill ;*/
   border-image: url(/images/boxSelection_fout.png) 5 5 5 fill ;
  
}


.Tbutton.gray:hover,
.Tbutton.gray.on,
.Tbutton.gray.opened{ 
border-image: url(/images/boxSelection_fout_on.png) 5 5 5 fill ;
}

.Tbutton.gray.down {
border-image: url(/images/btn_gray_on.png) 5 5 5 fill !important ;	
}


/*
.Tbutton.disabled.gray:hover,
.Tbutton.disabled.gray a{
	opacity: 0.4;
	border-image: url(/images/boxSelection_fout.png) 5 5 5 fill ;
}
*/

.winBlack .Tbutton{			
display:inline-block;
margin:0px; 
padding: 0px; 
cursor: pointer;
border-width: 7px;
height: 14px;
border: 7px solid transparent;
color: #666;
font: bold 11px Arial;

}


.winBlack .Tbutton:hover{	
-moz-border-image: url("/plantillas/img/btn_plain_hover.png")  7 7 7  fill stretch;
-webkit-border-image: url("/plantillas/img/btn_plain_hover.png")  7 7 7  fill stretch;
-o-border-image: url("/plantillas/img/btn_plain_hover.png")  7 7 7  fill stretch;
border-image: url("/plantillas/img/btn_plain_hover.png")   7 7 7  fill stretch;
color: #999;
border-style: solid;
 
}

.winBlack .Tbutton.on{	
-moz-border-image: url("/plantillas/img/btn_plain_on.png") 7 7 7 fill stretch;
-webkit-border-image: url("/plantillas/img/btn_plain_on.png") 7 7 7 fill stretch;
-o-border-image: url("/plantillas/img/btn_plain_on.png") 7 7 7 fill stretch;
border-image: url("/plantillas/img/btn_plain_on.png")  7 7 7 fill stretch;
color: #999 !important;
}




.Tbutton.gray{ 
 
   border-image: url(/images/boxSelection_fout.png) 5 5 5 fill ;
}

.Tbutton.gray:hover,
.Tbutton.gray.on,
.Tbutton.gray.opened{ 
border-image: url(/images/boxSelection_fout_on.png) 5 5 5 fill ;
}


.Tbutton.gray span{ color: #000;}
.Tbutton.disabled span{ color: #999; }

/* ══════════════════════════════════════════════════════════════════════
   TCard — la zona destacada
   ══════════════════════════════════════════════════════════════════════

   NO es «una seccion con marco» para hacer fichas enteras de tarjetas: es lo
   que se pone cuando UN trozo tiene que separarse de lo que lo rodea. Por eso
   el fondo no es blanco --sobre una hoja blanca no destacaria nada-- sino un
   gris frio, y por eso trae borde y relleno propios.

   Lo normal es que viva DENTRO de una TSection, que es el agrupador de uso
   diario y no dibuja nada. */

TCard {
	display: block;
	margin: 0 0 12px;
	padding: var(--tcard-padding, 16px);
	border: 1px solid var(--tcard-border, #dbe2ec);
	border-radius: var(--tcard-radius, 10px);
	background: var(--tcard-bg, #f6f8fb);
}

/* EL TITULO. Lo pinta TSection como un <label>; aqui solo el aire y el peso.
   El `display: flex` va en linea desde el JS del padre, asi que no se toca. */
TCard > label {
	margin: 0 0 12px;
	color: var(--tcard-title, #334155);
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
}

TCard > label:empty { display: none !important; }

/* UNA TARJETA DENTRO DE OTRA NO REPITE EL CUERPO: la de fuera ya destaca, y dos
   fondos superpuestos solo ensucian. */
TCard TCard {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Y UNA SECCION DENTRO DE UNA TARJETA SOLO AGRUPA: el relleno lo pone la
   tarjeta. Sin esto, el `TSection { padding: 20px }` de la hoja base metia sus
   campos 20px hacia dentro y quedaban desalineados con los hermanos que
   cuelgan directamente de la tarjeta. */
TCard tsection.TSection {
	padding: 0;
	background: none;
	box-shadow: none;
}

/* Sin marco ni fondo, para donde la tarjeta solo aporta el relleno. */
TCard.TCard--flat {
	border: 0;
	box-shadow: none;
	background: none;
	padding: 0;
}

/* Tonos. El frio de arriba es el neutro; estos tres son los de uso comun, y
   cada proyecto puede añadir los suyos con `tone: 'loquesea'`. */
TCard.TCard--info    { border-color: #bfdbfe; background: #eff6ff; }
TCard.TCard--aviso   { border-color: #fde68a; background: #fffbeb; }
TCard.TCard--peligro { border-color: #fecaca; background: #fef2f2; }

/* ── EL ROTULO DE UNA SECCION ────────────────────────────────────────────
   Va aqui, junto al de la tarjeta, para tener los dos a la vista: el de la
   seccion es un rotulo de grupo --pequeño y discreto-- y el de la tarjeta
   pesa mas, porque encabeza algo que se ha querido destacar. */

/* EL ROTULO ES UNA FILA, Y CON HUECO.
   El display se declara AQUI y no solo en el JS: TSection lo ponia en linea con
   `display: "flex !important"`, y jQuery descarta la propiedad entera cuando el
   valor lleva `!important`, asi que el rotulo se quedaba en `display: block`
   --medido--. Con una caja block, ni el `gap` separaba el icono del titulo
   --«(i)Informacion general», pegados-- ni el `margin-left: auto` empujaba el
   subtitulo a la derecha. */
tsection.TSection > label,
TCard > label {
	display: flex;
	align-items: center;
}

/* La separacion del icono NO se declara aqui: es una regla del sitio --«un icono
   delante de un texto se separa de el»-- y vive en la hoja global
   (Tjquery/css/index.css). Aqui solo lo que es propio del rotulo de una seccion
   o de una tarjeta: que no se encoja y a que tamaño se ve. */
tsection.TSection > label .TSection-icon,
TCard > label .TCard-icon {
	flex: 0 0 auto;
	font-size: 15px;
	color: inherit;
}

/* ── EL ROTULO CON ACLARACION ────────────────────────────────────────────
 *
 * Dos columnas: el icono a la izquierda y TODO el texto a la derecha, con el
 * titulo arriba y la aclaracion debajo, las dos arrancando en la misma
 * vertical. Es la regla del sitio, y aqui hace ademas que la aclaracion se lea
 * como lo que es --de este titulo-- en vez de flotar a su lado.
 *
 * `font: inherit` no sobra: la hoja global fija el tamaño de todo `span` con un
 * shorthand `font:`, asi que sin esto el titulo de la seccion pasaria a 12px
 * solo por meterlo en un span. */
tsection.TSection > label .TSection-rot,
TCard > label .TSection-rot,
TCard > label .TCard-rot {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	font: inherit;
	color: inherit;
}

tsection.TSection > label .TSection-rot > .TSection-t,
TCard > label .TSection-rot > .TSection-t,
TCard > label .TCard-rot > .TCard-t {
	font: inherit;
	color: inherit;
}

/* Con el rotulo en dos lineas, el icono se alinea con la PRIMERA --el titulo--,
   no con el centro del bloque. */
tsection.TSection > label:has(.TSection-rot),
TCard > label:has(.TSection-rot),
TCard > label:has(.TCard-rot) {
	align-items: flex-start;
}

tsection.TSection > label:has(.TSection-rot) .TSection-icon,
TCard > label:has(.TSection-rot) .TCard-icon,
TCard > label:has(.TCard-rot) .TCard-icon {
	margin-top: 2px;
}

/* LOS BOTONES DE LA CABECERA. `actions` los pinta a la derecha del rotulo, que
   es donde los ponen todas las maquetas del proyecto: el titulo manda a la
   izquierda y la accion espera a la derecha. `margin-left:auto` los empuja, y
   `align-self:flex-start` los alinea con el TITULO cuando hay subtitulo debajo
   --si no, se centran contra las dos lineas y quedan medio hundidos--. */
tsection.TSection > label .TSection-acciones,
TCard > label .TSection-acciones {
	margin-left: auto;
	align-self: flex-start;
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	font: initial;
}
tsection.TSection > label .TSection-acciones .actions-container,
TCard > label .TSection-acciones .actions-container {
	display: flex;
	gap: 8px;
}

/* TCard hereda de TSection y sus nodos llevan las clases `TSection-*`: un
   selector que solo mire `TCard-sub` no alcanza a NINGUNA tarjeta real --se
   veía en la pestaña «Uso», con el título y su aclaración pegados en la misma
   línea--. Se enumeran las dos familias. */
tsection.TSection > label .TSection-sub,
TCard > label .TSection-sub,
TCard > label .TCard-sub {
	margin-top: 2px;
	color: var(--tcard-sub, #6b7280);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	white-space: normal;
}



.TCategoryTree{
    padding: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    margin: 10px 0px;
}
.TCategoryTree ul {
      list-style: none;
      padding-left: 0px;
    }
.TCategoryTree .category-wrapper {
      display: flex;
      align-items: center;
      gap: 5px;
    }
.TCategoryTree .toggle-icon {
      width: 20px;
      display: inline-block;
    }

.TCategoryTree .category-checkbox
{
    margin-right: 6px;
}

.TCategoryTree label
{
    user-select:none;
}

/*
 * TChat — hilo de mensajes con adjuntos. Junto a TOrderStatusHistory.css
 * porque es su misma familia: controles compartidos que se montan en varias
 * pantallas.
 *
 * Aquí vive la PIEL DE BURBUJAS (skin: 'bubbles'), la del panel del cliente y
 * la ficha de soporte. La piel compacta (skin: 'mini') se viste con
 * TNotes.css, que ya tiene los valores exactos de la plantilla de referencia:
 * el componente emite sus mismas clases a propósito para no duplicarlos aquí.
 *
 * Todo cuelga de .TChat para que se pueda embeber en cualquier ficha sin que
 * sus reglas se escapen. Y lo que es ASPECTO cuelga además de .tchat--bubbles:
 * el marcado de la piel mini lleva las dos familias de clases a la vez, así que
 * sin ese ancla las burbujas se colaban en las notas del admin —fondo blanco,
 * borde y radio donde antes había una línea con su raya de separación—.
 */

.TChat {
    display: flex;
    flex-direction: column;
}

/* La caja es además la ZONA DE ARRASTRE del uploader, que necesita un
   contenedor con posición propia para esconderse dentro sin salirse. */
.TChat .tchat-caja {
    /* En las DOS pieles: el uploader se esconde dentro con position:absolute y
       necesita que su contenedor tenga posición propia. */
    position: relative;
}

.TChat.tchat--bubbles .tchat-caja {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ---------- LISTA ---------- */

.TChat.tchat--bubbles .tchat-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 320px;
    overflow-y: auto;
}

.TChat.tchat--bubbles .tchat-empty {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 0.6rem 0;
}

.TChat.tchat--bubbles .tchat-msg {
    background: #ffffff;
    border: 1px solid #e9edf2;
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    max-width: 85%;
}

/* Mi lado a la derecha y en color: quién habla se ve sin leer el nombre. Qué
   es "mi lado" lo decide el componente (side: 'mine' | 'staff'), porque el
   panel del cliente y la ficha de soporte alinean al revés. */
.TChat.tchat--bubbles .tchat-msg.is-mine {
    align-self: flex-end;
    background: #eff6ff;
    border-color: #dbeafe;
}

.TChat.tchat--bubbles .tchat-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.6rem;
    color: #94a3b8;
    margin-bottom: 2px;
}

.TChat.tchat--bubbles .tchat-meta strong {
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 600;
}

.TChat.tchat--bubbles .tchat-editada {
    font-size: 0.55rem;
    color: #cbd5e1;
}

.TChat.tchat--bubbles .tchat-body {
    font-size: 0.78rem;
    color: #1e293b;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Editar y borrar: aparecen al pasar por encima para no ensuciar el hilo. En
   táctil no hay hover, así que abajo se dejan siempre visibles. */
.TChat.tchat--bubbles .tchat-acciones-msg {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}

.TChat.tchat--bubbles .tchat-msg:hover .tchat-acciones-msg { opacity: 1; }

.TChat.tchat--bubbles .tchat-acciones-msg i {
    color: #cbd5e1;
    font-size: 0.65rem;
    cursor: pointer;
}

.TChat.tchat--bubbles .tchat-acciones-msg i:hover { color: #475569; }

/* ---------- BARRA DE INVITADOS ----------
   Quién más entra en el hilo, encima de la conversación. Discreta: es
   información de contexto, no la conversación. */

.TChat .tchat-invitados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #f1f5f9;
}

.TChat .tchat-invitados-titulo {
    font-size: 0.62rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 0.2rem;
}

.TChat .tchat-invitado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 30px;
    padding: 3px 5px 3px 9px;
    font-size: 0.66rem;
    line-height: 1;
}

.TChat .tchat-invitado i {
    font-size: 0.55rem;
    color: #cbd5e1;
    cursor: pointer;
    padding: 2px;
}

.TChat .tchat-invitado i:hover { color: #dc2626; }

.TChat .tchat-invitar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    border-radius: 30px;
    padding: 3px 10px;
    font-size: 0.66rem;
    font-family: inherit;
    cursor: pointer;
}

.TChat .tchat-invitar:hover {
    border-color: #3b82f6;
    color: #2563eb;
}

.TChat .tchat-invitar-caja {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.TChat .tchat-invitar-campo {
    border: 1px solid #cbd5e1;
    border-radius: 30px;
    padding: 3px 10px;
    font-size: 0.66rem;
    font-family: inherit;
    width: 150px;
    outline: none;
    color: #1e293b;
}

.TChat .tchat-invitar-campo:focus { border-color: #3b82f6; }

.TChat .tchat-invitar-caja button {
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.7rem;
}

.TChat .tchat-invitar-caja button:hover { color: #1e293b; }

/* ---------- HILOS DE MÁS DE DOS ----------
   Con tres o más, alinear por bandos deja de decir nada: lo que identifica a
   cada uno es su color. El tono lo pone el componente en --tchat-tono,
   calculado del identificador del autor para que no baile entre recargas; aquí
   solo se decide cómo se usa. */

.TChat.tchat--bubbles .tchat-msg.es-de-grupo {
    align-self: flex-start;
    max-width: 92%;
    background: hsl(var(--tchat-tono, 210) 92% 97%);
    border-color: hsl(var(--tchat-tono, 210) 70% 89%);
    border-left: 3px solid hsl(var(--tchat-tono, 210) 65% 62%);
}

/* El nombre, del mismo color: es lo primero que se mira para saber quién
   habla, y así el color y el nombre dicen lo mismo. */
.TChat.tchat--bubbles .tchat-msg.es-de-grupo .tchat-meta strong {
    color: hsl(var(--tchat-tono, 210) 55% 38%);
}

/* ---------- ADJUNTOS PUBLICADOS ---------- */

.TChat.tchat--bubbles .adjuntos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.TChat.tchat--bubbles .adjunto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dbeafe;
    color: #2563eb;
    border-radius: 30px;
    padding: 4px 9px;
    font-size: 0.68rem;
    line-height: 1;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.TChat.tchat--bubbles .adjunto:hover { background: #bfdbfe; }
.TChat.tchat--bubbles .adjunto i { font-size: 0.6rem; }

/* Una imagen se reconoce de un vistazo; un nombre de fichero, no. Nunca por
   debajo de 56px aunque la columna sea estrecha. */
.TChat.tchat--bubbles .adjunto-img {
    display: inline-block;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dbeafe;
    background: #f1f5f9;
    text-decoration: none;
    flex-shrink: 0;
    cursor: zoom-in;
}

.TChat.tchat--bubbles .adjunto-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.TChat.tchat--bubbles .adjunto-img:hover { border-color: #3b82f6; }

/* ---------- ENTRADA ---------- */

/*
  LA CAJA DE ESCRIBIR SE ADAPTA SOLA.

  Con sitio, el campo y los botones van en una fila. Cuando el hueco baja de
  unos 300px —el chat metido en una columna lateral, o un móvil— el campo se
  queda con el ancho entero y los botones bajan a su propia fila debajo.

  Se hace con flex-wrap y una base mínima, NO con un @media: lo que manda aquí
  es el ancho del CONTENEDOR, no el de la ventana. El mismo chat puede estar en
  una columna de 300px dentro de una pantalla de 1920.
*/
.TChat.tchat--bubbles .tchat-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.TChat.tchat--bubbles .tchat-input {
    /* La base es 220px: por debajo de eso el campo se queda en dos palabras
       por línea y escribir ahí es incómodo. min-width con min() para que
       reclame ese ancho —y provoque el salto— pero nunca desborde una caja
       más estrecha que él. */
    flex: 1 1 220px;
    min-width: min(220px, 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
    font-family: inherit;
    /* NI BARRA NI TIRADOR: el campo crece con lo que se escribe.
       'resize: vertical' dejaba al usuario estirar la caja a mano --y dejarla
       torcida-- y el textarea sacaba su propia barra de scroll en cuanto se
       pasaba de dos líneas, dentro de un panel que ya tiene la suya. El alto
       lo ajusta TChat._autoAlto() en cada tecla; overflow-y a hidden evita el
       parpadeo de la barra entre ese cálculo y el repintado. */
    resize: none;
    overflow-y: hidden;
    min-height: 42px;
    /* Un tope para que un mensaje largo no empuje los botones fuera de la
       vista: a partir de ahí sí aparece la barra, que es lo razonable. */
    max-height: 160px;
    color: #1e293b;
    background: #ffffff;
}

.TChat.tchat--bubbles .tchat-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.TChat.tchat--bubbles .tchat-acciones {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    /* Al bajar de fila ocupan todo el ancho y el botón se va a la derecha,
       que es donde se busca. Junto al campo, en cambio, no crecen. */
    flex: 1 1 auto;
    justify-content: flex-end;
}

.TChat.tchat--bubbles .tchat-acciones .tchat-send {
    /* Que el botón mande sobre el hueco sobrante de su fila, sin estirarse
       de lado a lado cuando el clip está al lado. */
    flex: 0 1 auto;
}

/*
  No se llama .btn-primary a propósito: la hoja global del sitio trae
  `.btn-primary { background:#1e293b !important; width:fit-content }` y lo
  dejaría azul marino y encogido.
*/
.TChat.tchat--bubbles .tchat-send {
    border: none;
    border-radius: 60px;
    background: #3b82f6;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    padding: 0.55rem 1.2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.15s;
}

.TChat.tchat--bubbles .tchat-send:hover { background: #2563eb; }

.TChat.tchat--bubbles .tchat-send[disabled] {
    background: #cbd5e1;
    cursor: default;
}

.TChat.tchat--bubbles .tchat-clip {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    border-radius: 60px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.15s;
}

.TChat.tchat--bubbles .tchat-clip:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* ---------- BANDEJA DE PENDIENTES ----------
   Los ficheros ya están subidos, pero no se publican hasta pulsar enviar.
   Vacía no ocupa nada. Misma estética que TUploader: fondo claro y borde
   discontinuo. Las clases son las de TNotes para no tener dos bandejas
   distintas según la piel. */

.TChat .tchat-pendientes { display: none; }

.TChat .tchat-pendientes.con-archivos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background-color: #fafafa;
    border: 2px dashed #ddd;
    border-radius: 8px;
}

.TChat .tn-pendiente {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 62px;
    padding: 4px;
    background-color: #fff;
    outline: 2px solid #f0f0f0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.TChat .tn-pendiente:hover { outline-color: #71b6fc; }

/* Mientras sube: atenuado, para que se vea que aún no está listo. */
.TChat .tn-pendiente.subiendo { opacity: 0.55; }

.TChat .tn-pend-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.TChat .tn-pend-icono {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-radius: 4px;
    background-color: #f1f5f9;
    color: #64748b;
}

.TChat .tn-pend-icono i { font-size: 1rem; }

.TChat .tn-pend-icono .ext {
    font-size: 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

.TChat .tn-pend-nombre {
    font-size: 0.5rem;
    color: #666;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.TChat .tn-pend-quitar {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #666;
    cursor: pointer;
    z-index: 2;
}

.TChat .tn-pend-quitar:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
    color: #dc2626;
}

/* ---------- UPLOADER OCULTO ----------
   El TUploader tiene que estar EN EL DOM (un input[type=file] fuera del
   documento no abre el diálogo), pero no debe VERSE: su interfaz propia
   —zona de arrastre punteada de 120px— no pinta nada aquí, que ya tiene su
   clip y usa la caja entera como dropArea.

   Se oculta con tamaño 0 y no con display:none, que en algunos navegadores
   impide disparar el click sobre el input. */
.TChat .tchat-caja > .TUploader {
    position: absolute;
    width: 0;
    height: 0;
    /* TUploader trae min-height:120px propio y sin anularlo seguiría ocupando
       ese alto (invisible, pero ocupando). */
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* El input sí tiene que seguir siendo pinchable por código. */
.TChat .tchat-caja > .TUploader input[type="file"] {
    pointer-events: auto;
}

/* ---------- ARRASTRANDO ----------
   Los colores son los de .TUploader.dragginfile, que es la clase que el propio
   uploader pone en su dropArea — aquí la caja entera.

   Sin transición a propósito: el resalte al arrastrar es una RESPUESTA, y
   suavizarlo lo hace llegar tarde. */
.TChat .tchat-caja.dragginfile {
    outline: 3px dashed #71b6fc;
    outline-offset: 4px;
    border-radius: 10px;
    background-color: #e8f0fe;
}

/* ---------- PANTALLA ESTRECHA ---------- */
@media (max-width: 500px) {
    .TChat.tchat--bubbles .tchat-msg { max-width: 95%; }

    /* En táctil no hay hover: las acciones se quedan a la vista. */
    .TChat.tchat--bubbles .tchat-acciones-msg { opacity: 1; }
}



/*-------------------------RADIO--------*/
.Tradio{
position: relative;
cursor: pointer;
margin-right: 5px;
vertical-align:top;
line-height: 16px;
display: inline-block;	

}

.Tradio.disabled .imgcheck,
.Tcheck.disabled .imgcheck{

	filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
	-webkit-filter: grayscale(1);
	opacity: 0.5;	
	cursor: default;
}

.Tradio .imgcheck{
	display: inline-block;	
	background: url(/images/radioBox.png) no-repeat;
	background-position: 0px 0px;
	width: 14px;
	height:14px;
	
	margin:0px;
	margin-right: 5px;
	padding:0px;
	top:0px;
	left:0px;	
	border:0px;
    float: left;
}

.Tcheck .imgcheck{
	display: inline-block;
	background: url(/images/checkBox.png) no-repeat top left;
	background-position: 0px 0px;
	
	margin:0px;
	padding:0;
	margin-right: 5px;
	top:0px;
	left:0px;
	
	width: 14px;
	height:14px;
	border:0px;
    float: left;
    
	
}


.Tradio.on .imgcheck{
 background-position: 0px -14px;

}




/*-------------------------CHECK--------*/
.Tcheck {
vertical-align:top;	
position: relative;
cursor: pointer;
margin-right: 5px;	
line-height: 16px;
display: inline-block;		
}

.Tcheck.on .imgcheck{
	background: url(/images/checkBox.png) no-repeat top left;
	background-position: 0px -14px;
	
}


/*  -------------check_ok------------------------- */




.Tcheck.check_ok .imgcheck{
 background:url(/images/check.png) no-repeat top left;
 width:54px;
 height:45px;}

.Tcheck.check_ok:hover .imgcheck{ background-position:0px -45px;	}
.Tcheck.check_ok.on .imgcheck{ background-position:0px -90px;}

/*---------marktilde--------*/


.Tcheck.marktilde .imgcheck, .Tradio.marktilde .imgcheck{
position:relative;
background: url(/images/checkmark2_14.png) no-repeat top left; 
background-position: 0px -25px;
width: 14px;
padding:0;
top:0px;
}
.Tcheck.marktilde.on .imgcheck, .Tradio.marktilde.on .imgcheck{
background-position: 0px 0px;}



/**
 * TColor — el campo de color.
 *
 * La caja (fondo, borde, radio, ancho y alto) sale del sistema del panel, igual
 * que la de un campo de texto: aquí solo lo propio de un selector de color, que
 * es el relleno. El navegador pinta la muestra ocupando el `content-box`, así
 * que con el relleno de un campo de texto --0.35rem 0.7rem-- saldría una franja
 * de color estrecha y con dos márgenes laterales enormes.
 */

.TColor input[type="color"],
.adminui .field-wrapper.TColor input[type="color"] {
    padding: 0.2rem !important;
    cursor: pointer;

    /* LA ALTURA HAY QUE DÁRSELA.
     *
     * El panel manda `height: auto` a sus campos, y a un campo de texto le
     * queda bien porque su contenido mide una línea. Un `input[type=color]` no
     * tiene contenido que medir --la muestra la pinta el navegador dentro del
     * content-box-- así que en auto se quedaba en 5px de alto: una raya de
     * color al lado de un campo de 27. La cuenta es la misma caja que un campo
     * de texto del panel: una línea + su relleno + el borde. */
    /* 1.3em es la altura real de una línea de este campo --`line-height: normal`
       con la fuente del panel--, no un número redondo elegido a ojo: con 1.2em
       el campo quedaba 1px más bajo que el de al lado. El borde no entra en la
       cuenta, lo pone su envoltorio. */
    height: calc(1.3em + 0.7rem) !important;
    width: 100%;
    box-sizing: border-box;
}

/* Chrome pinta la muestra con su propio borde y su propio relleno: sin esto
   queda un marco dentro del marco del campo. */
.TColor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }

.TColor input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--au-radius-input, 10px) - 4px);
}

.TColor input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--au-radius-input, 10px) - 4px);
}





 /* fondo color face: #e9eaed */

.TcontextMenu li ul,
.TcontextMenu{

border-radius: 0px 0px;
border: 1px solid rgba(0, 0, 0, 0.3);

z-index: 200000;
box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px;

box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
opacity: 1;
background-color:#FFF;
padding: 5px 0;

margin: 0px;

display: inline-block;
white-space: nowrap;
word-break: break-all;
}


.TcontextMenu li .iconmenu{

 height: 15px;
 position: absolute;
 	
}

.TcontextMenu.arrowTop{ margin-top: 8px;}
.TcontextMenu.arrowTop::before{
	
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.TcontextMenu.arrowTop::after{
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';	
}

.TcontextMenu li ul{
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
display:none;
border-radius: 0px 8px;
}

.TcontextMenu ul{
padding: 0px;
margin: 0px;
position:relative;
display: inline-block;	
min-width: 100%;
}

.TcontextMenu li ul{
min-width: 0px;
}


.TcontextMenu.multi{ border-radius: 0 0px 8px 8px; }


.TcontextMenu li.collapsed > ul,
.TcontextMenu ul.left{
left: 100%;
margin-top: -6px;
margin-left: -2px;
}


.TcontextMenu li.expanded > ul,
.TcontextMenu li:hover > ul{
	display: block;
}



.TcontextMenu li{
color: #333;
font: 11px  Verdana, Arial, sans-serif;


margin: 0;	
padding: 0px 25px;

background-color: transparent;
position:relative;

cursor: pointer;
white-space: nowrap;
display: block;


}

.TcontextMenu.accelerators li{ padding-right: 60px; }


.TcontextMenu li a{
	font:  normal 11px Verdana, Helvetica;
	color: #333; 
	text-decoration:none;
}



.TcontextMenu .focus,
.TcontextMenu li:hover{
background-color:#F93 ;  
color:#111  !important ; 
cursor:pointer;	
}


.TcontextMenu li.on{
background-color:#F93 ;  
color:#111 ; 
cursor:pointer;	
background-color: transparent;
}




.TcontextMenu.noColorSelection li.on{
background-color:transparent;  
	
}


.TcontextMenu li.disabled{
color: #999 !important;
cursor: default !important;
background-color:transparent;	
}



/**/
.TcontextMenu.up::after{
	
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: ' ';
	
}

.TcontextMenu.up::before{
	position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.3);
content: '';
	
}




.TcontextMenu li .hotkey{
 position:absolute;
 right: 6px;
 top: 3px;
 padding: 0px !important; 	
}


.TcontextMenu span{
text-decoration:none;
color: inherit;	
line-height: 15px;
padding: 3px 5px;
white-space: nowrap;
 /* clear: both; */
font-weight: normal;
display:block;
font-size: 11px;
cursor: inherit;
outline: none;
}


.Tmobile .TcontextMenu span{
text-decoration:none;
color: inherit;	
line-height: 20px;
padding: 5px 5px;
white-space: nowrap;
 /* clear: both; */
font-weight: normal;
display:block;
font-size: 16px;
cursor: inherit;
outline: none;
position:relative;
}

.TcontextMenu .highlight{
	
display: inline;
clear: none;
padding: 0px;
color: red;
font-weight: 900;
	
}

.TcontextMenu li.header:hover,
.TcontextMenu li.header{
	margin-top: 10px;
	background-color: transparent;
	color: #38b1e6 !important;
	font-size: 12px;
	font-weight: bold;
	cursor: default;
	
	
}

.TcontextMenu .line:hover,
.TcontextMenu .line{
height: 1px;
margin: 5px 3px;
overflow: hidden;
background-color: #e5e5e5 !important;
border-bottom: 1px solid #bdbdbd;
cursor: default !important;
}




.TcontextMenu li ul{position:absolute;}

.TcontextMenu li.submenu::after{
position: absolute;
display: block;
/* float: right; */
width: 0;
height: 0;
right: 10px;
/* position: relative; */
top: 7px;
margin-right: 0px;
border-color: transparent;
border-left-color: #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
}
.TcontextMenu li.submenu:hover::after{
	border-left-color: #000;
}


.TcontextMenu li.disabled a{
	color: #bbb;
	cursor:default;
	
}



.TcontextMenu .multi .selected{
	display: none !important; /**/
}

.TcontextMenu.select{ padding: 0px; }

.TcontextMenu .selected{

background-color:#F93;  
color:#111; 
cursor:pointer;	
}

.TcontextMenu  .imgcheck{
margin-left: -20px;
margin-top: 9px;
}

.TcontextMenu  .Tradio .imgcheck{
background: none ;	
}


.TcontextMenu .Tradio.on .imgcheck{
background: url(/images/ok.png) no-repeat ;
background-size: 100%;
background-position: 0px 0px; 
}





/*-------------------------RADIO--------*/

.TfileUploader{
        border-radius: 10px;
	/*background-color: #eee;*/
	outline: 2px;
	outline-color: #bbb;
    outline-style: dashed;
    margin-top: 20px;
    margin-bottom: 20px;
}

.TfileUploader.simpleUploader
{
    height: 100px;
    width: 100px;
    background-image: url(/images/camera.png);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #eee;
   
    margin-bottom: 60px;
   
    --dragging-border: 3px;
    border: 1px solid #ddd;
    padding: calc(var(--dragging-border) - 1px);
}

.TfileUploader:has(.thumb)
{
     /*background-image: none;*/
}

.TfileUploader.simpleUploader b
{
    color: #333;
}

/*-------------------------RADIO--------*/
.TfileUploader.dragginfile
{
    background-color: #e8f0fe;

    border: none;

    outline: var(--dragging-border);
	outline-color: #71b6fc;
    outline-style: dashed;
   
}

.TfileUploader.loaded
{

 
}

.TfileUploader .description
{
    position: absolute;
    top: calc(100% + 10px);
    width: 181px;
    color: #292929;
}

.TfileUploader .delete
{
    display: none;
}

.TfileUploader.loaded .delete
{
    display: block;
    position: absolute;
    right: 4px;
    width: 14px;
    top: 5px;
    border-radius: 5px;
    background-color: #fff;
    padding: 1px;
	z-index: 100;
}



.TfileUploader:not(.multiple) .thumb
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit:contain;
}

.TfileUploader .thumb{
   background-color: #fff;
   outline: 2px solid #fgfgfg;
}



/* ═══════════════════════════════════════════════════════════════════════
   THistoryPipeline / THistoryPipelineManager

   El recorrido lo dibuja TOrderStatusHistory.css (clases .osh-* y
   .status-item), que es de quien se hereda. Aquí va SOLO lo que añade la
   variante con mando: la barra de transición.
   ═══════════════════════════════════════════════════════════════════════ */

.thp-bar{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:14px;
    padding-top:14px;
    /* Separada del recorrido por una línea: lo de arriba es lo que pasó y no
       se toca; lo de abajo es lo único que actúa. Sin la separación, el
       selector parece un paso más de la lista. */
    border-top:1px solid var(--sl-borde, #e8edf2);
}

.thp-select{
    flex:1 1 220px;
    min-width:0;
    height:34px;
    padding:0 10px;
    font-size:13px;
    color:var(--sl-texto, #1f2937);
    background:var(--sl-panel, #fff);
    border:1px solid var(--sl-borde, #e8edf2);
    border-radius:var(--sl-radio-chico, 8px);
}

.thp-go{ flex:0 0 auto; }

/* Un botón deshabilitado tiene que PARECERLO: si no, se pulsa, no pasa nada
   y quien lo pulsa cree que la pantalla está rota. */
.thp-go[disabled]{
    opacity:.5;
    cursor:not-allowed;
}

/* El motivo de que no haya destinos, cuando se declara `emptyTransitions`.
   `small` no hereda el tamaño si alguna regla global usa el atajo `font:`,
   así que se declara. */
.thp-empty{
    font-size:11px;
    line-height:1.45;
    color:var(--sl-texto-suave, #64748b);
}


/*
 * TInlineEdit — edicion en el sitio.
 *
 * El campo debe parecerse a lo que sustituye, no a un formulario: hereda el
 * tamaño y el color del contenedor y solo se distingue por el borde de foco.
 * Asi la lista no "salta" al entrar y salir de edicion.
 */

.tinline-edit {
    width: 100%;
    background: #ffffff;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    padding: 1px 6px;
    outline: none;

    /* Hereda del contexto: en una nota mide 0.65rem y en una ficha 0.8rem,
       sin que este control tenga que saberlo. */
    font: inherit;
    font-family: inherit;
    color: #1e293b;

    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

textarea.tinline-edit {
    min-height: 48px;
    resize: vertical;
    line-height: 1.4;
}

/* Mientras se guarda: se bloquea el campo y se atenua, para que se vea que
   hay una peticion en curso y no se escriba encima. */
.tinline-edit.guardando {
    opacity: 0.6;
    cursor: progress;
    border-color: #94a3b8;
    box-shadow: none;
}

.tinline-edit::placeholder {
    color: #94a3b8;
}



.TInlineNotif a
{

}

.TInlineNotif
{
	min-height: 15px;
	clear: both;
	position: relative;
	border-radius: 5px;
	padding: 6px;
	padding-left: 30px;
	
    display: flex;
    align-items: center;

	width: auto;
	text-align: left;
    
    opacity: 0;
	transition:  opacity 0.3s ease-out;

    left: 0;
    position: absolute;
}


.TInlineNotif .content{ 
    font:bold 11px Arial; 
    color: #292929;

}

.TInlineNotif.notifOK{
 background-color: #d0f8c2;
 border: 1px solid #2df836; 
}
 
 
.TInlineNotif.notifError{
background-color: #fcd8df; 
border: 1px solid #d0aeb5; 
}


.TInlineNotif.notifAdvise{
background-color: #e4cc92; 
border: 1px solid #cda953; 
}



.TInlineNotif img{
position: absolute !important; 
   
    left: 7px !important;
	
}


.TInlineNotif.notifOK .content{ color: #4e851d; }
.TInlineNotif.notifAdvise .content{ color: #604b18; }
.TInlineNotif.notifError .content{ color: #8a2f33; }
.TInlineNotif.loading .content{ }


.TInlineNotif.loading{
background-color:  transparent; 
border: 1px solid transparent;
}


.TInlineNotif.loading img{
background: url(/media/loading/loading_trans_32.gif) 26px 20px no-repeat;
background-size: 15px 15px;	
display:inline-block;
	
}


.TInlineNotif.warnning{
    padding: 0px;
} 

.TInlineNotif.warnning{
       padding-left: 10px;
    border: 1px solid #ffa90c;
    width: 100%;
    height: 30px;
   
    
    background-color: #fff;
    border-left: 30px solid #ffa90c;
    border-radius: 5px;

    box-sizing: border-box;
    vertical-align: middle;
    text-align: left;
    line-height: 30px;
    color: #333;

    position:relative;
      margin-bottom: 20px;
}
.TInlineNotif.warnning, .TInlineNotif.warnning .content
{
     padding-left: 10px;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: left;
    line-height: 30px;
    color: #333;
}
.TInlineNotif.warnning:before{
    content: "ⓘ";
    position: absolute;
    left: -22px;
    top: 3px;
    color: #fff;
    font: 700 15px Arial;
  
}




.Ttree .collapsed > ul,
.Tlist .collapsed > ul{
	
	display: none;
    overflow: hidden;
	
}

.Tlist.grouped{
padding-left: 10px !important;
box-sizing: border-box;	

}
.Tlist.grouped .submenu li{  }
.Tlist.grouped .submenu > .details  .thumb,
.Tlist.grouped .submenu > .details  .actions,
.Tlist.grouped .submenu > .details .foot{
display: none !important;	
	
}

.Tlist.grouped .submenu ul{margin-top: -20px; margin-left: 20px; margin-bottom: 15px; padding-left: 0px !important;}
.Tlist.grouped .submenu > .details{    padding-left: 17px; !important;  }
.Tlist.grouped .submenu {      margin-bottom: 0px;    }
.Tlist.grouped .submenu > .details .dataZone{ position: relative; top: -2px; display: block !important; width:auto; !important;}


.Tlist.grouped.simpleZoomed .submenu{ overflow: visible !important;}
.Tlist.grouped.simpleZoomed .submenu > .details .dataZone{ top: -2px; }
.Tlist.grouped.simpleZoomed .submenu li{
 /*  margin-bottom: 15px; */
 float: none !important;
}

.Tlist.grouped .submenu > .details .selectMark{ display: none;}

.stop {
  animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.trigger {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2');
  background-image: -webkit-linear-gradient(top, #161616 25%, #000000);
  background-image: -moz-linear-gradient(top, #161616 25%, #000000);
  border: 1px solid #111111;
  border-right-color: #333;
  border-bottom-color: #333;
  text-decoration: none;
  color: #fff;
  padding: 10px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.8em;
  text-transform: lowercase;
  margin: 10px auto;
  display: block;
  width: 140px;
  border-radius: 5px;
  text-align: center;
}
.trigger:hover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2');
  background-image: -webkit-linear-gradient(top, #202020 25%, #161616);
  background-image: -moz-linear-gradient(top, #202020 25%, #161616);
}
#ajaxloader1 {
  width: 30px;
  height: 30px;
  border: 8px solid #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 25px 2px;
  -moz-box-shadow: 0 0 25px 2px;
  box-shadow: 0 0 25px 2px;
  color: #fff;
  border-color: #ff0000;
  color: #cc0000;
  border-right-color: transparent;
  border-top-color: transparent;
  -webkit-animation: spin-right 1s linear infinite normal;
  -moz-animation: spin-right 1s linear 0 infinite normal;
  -ms-animation: spin-right 1s linear 0 infinite normal;
  animation: spin-right 1s linear 0 infinite normal;
  margin: 30px auto 0;
}
#ajaxloader1:after {
  display: block;
  width: 13px;
  height: 13px;
  margin: 3px;
  border: 6px solid #ff0000;
  content: " ";
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
#ajaxloader2 {
  margin: 30px auto 0;
}
#ajaxloader2 .outer {
  border: 5px solid rgba(0, 183, 229, 0.9);
  opacity: .9;
  width: 50px;
  height: 50px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
  -moz-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
  box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
  -webkit-animation: spin-right 0.5s linear infinite normal;
  -moz-animation: spin-right 0.5s linear 0 infinite normal;
  -ms-animation: spin-right 0.5s linear 0 infinite normal;
  animation: spin-right 0.5s linear 0 infinite normal;
  margin: 0 auto;
}
#ajaxloader2 .inner {
  display: block;
  width: 30px;
  height: 30px;
  border: 5px solid rgba(0, 183, 229, 0.9);
  opacity: .9;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  -webkit-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
  -moz-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
  box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
  position: relative;
  top: -50px;
  margin: 0 auto;
  -webkit-animation: spin-left 0.5s linear infinite normal;
  -moz-animation: spin-left 0.5s linear 0 infinite normal;
  -ms-animation: spin-left 0.5s linear 0 infinite normal;
  animation: spin-left 0.5s linear 0 infinite normal;
}
#ajaxloader3 {
  margin: 0 auto;
}
#ajaxloader3 .outer {
  border: 5px solid rgba(0, 229, 183, 0.9);
  opacity: .9;
  border-right-color: transparent;
  border-left-color: transparent;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 35px rgba(0, 76, 61, 0.9);
  -moz-box-shadow: 0 0 35px rgba(0, 76, 61, 0.9);
  box-shadow: 0 0 35px rgba(0, 76, 61, 0.9);
  -webkit-animation: spin-pulse 1s linear infinite normal;
  -moz-animation: spin-pulse 1s linear 0 infinite normal;
  -ms-animation: spin-pulse 1s linear 0 infinite normal;
  animation: spin-pulse 1s linear 0 infinite normal;
}
#ajaxloader3 .inner {
  border: 5px solid rgba(0, 229, 183, 0.9);
  opacity: .9;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 15px rgba(0, 76, 61, 0.9);
  -moz-box-shadow: 0 0 15px rgba(0, 76, 61, 0.9);
  box-shadow: 0 0 15px rgba(0, 76, 61, 0.9);
  width: 30px;
  height: 30px;
  position: relative;
  top: -50px;
  margin: 0 auto;
  -webkit-animation: spin-right 1s linear infinite normal;
  -moz-animation: spin-right 1s linear 0 infinite normal;
  -ms-animation: spin-right 1s linear 0 infinite normal;
  animation: spin-right 1s linear 0 infinite normal;
}
#ajaxbar1 {
  margin: 0 auto;
  overflow: hidden;
  width: 90px;
}
#ajaxbar1 .barlittle {
  background-color: #8aff51;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2');
  background-image: -webkit-linear-gradient(45deg, #8aff51 25%, #f1ffea);
  background-image: -moz-linear-gradient(45deg, #8aff51 25%, #f1ffea);
  border: 1px solid #111;
  width: 10px;
  height: 10px;
  float: left;
  margin-left: 5px;
  opacity: 0.1;
  -webkit-animation: pulse 1s linear infinite normal;
  -moz-animation: pulse 1s linear 0 infinite normal;
  -ms-animation: pulse 1s linear 0 infinite normal;
  animation: pulse 1s linear 0 infinite normal;
}
#ajaxbar1 #block1 {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#ajaxbar1 #block2 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#ajaxbar1 #block3 {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
#ajaxbar1 #block4 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#ajaxbar1 #block5 {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#ajaxwave1 {
  margin: 30px auto 0;
  overflow: hidden;
  height: 50px;
}
#ajaxwave1 .pointcircle {
  background-color: #ff0000;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2');
  background-image: -webkit-linear-gradient(90deg, #ff0000 25%, #ff9999);
  background-image: -moz-linear-gradient(90deg, #ff0000 25%, #ff9999);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 5px #cc0000;
  -moz-box-shadow: 0 0 5px #cc0000;
  box-shadow: 0 0 5px #cc0000;
  margin: 0 auto;
  position: relative;
}
#ajaxwave1 #pointcircle1 {
  -webkit-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1) normal;
  -moz-animation: ball-circlex 2s infinite 0 cubic-bezier(0, 0, 0.35, 1) normal;
  -ms-animation: ball-circlex 2s infinite 0 cubic-bezier(0, 0, 0.35, 1) normal;
  animation: ball-circlex 2s infinite 0 cubic-bezier(0, 0, 0.35, 1) normal;
}
#ajaxwave1 #pointcircle2 {
  opacity: 0.7;
  top: 1px;
  -webkit-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1) normal;
  -moz-animation: ball-circlex 2s infinite 0.1s cubic-bezier(0, 0, 0.35, 1) normal;
  -ms-animation: ball-circlex 2s infinite 0.1s cubic-bezier(0, 0, 0.35, 1) normal;
  animation: ball-circlex 2s infinite 0.1s cubic-bezier(0, 0, 0.35, 1) normal;
}
#ajaxwave1 #pointcircle3 {
  opacity: 0.5;
  top: 2px;
  -webkit-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1) normal;
  -moz-animation: ball-circlex 2s infinite 0.2s cubic-bezier(0, 0, 0.35, 1) normal;
  -ms-animation: ball-circlex 2s infinite 0.2s cubic-bezier(0, 0, 0.35, 1) normal;
  animation: ball-circlex 2s infinite 0.2s cubic-bezier(0, 0, 0.35, 1) normal;
}
#ajaxwave1 #pointcircle4 {
  opacity: 0.3;
  top: 3px;
  -webkit-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1) normal;
  -moz-animation: ball-circlex 2s infinite 0.3s cubic-bezier(0, 0, 0.35, 1) normal;
  -ms-animation: ball-circlex 2s infinite 0.3s cubic-bezier(0, 0, 0.35, 1) normal;
  animation: ball-circlex 2s infinite 0.3s cubic-bezier(0, 0, 0.35, 1) normal;
}
#ajaxwave1 #pointcircle5 {
  opacity: 0.1;
  top: 4px;
  -webkit-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1) normal;
  -moz-animation: ball-circlex 2s infinite 0.4s cubic-bezier(0, 0, 0.35, 1) normal;
  -ms-animation: ball-circlex 2s infinite 0.4s cubic-bezier(0, 0, 0.35, 1) normal;
  animation: ball-circlex 2s infinite 0.4s cubic-bezier(0, 0, 0.35, 1) normal;
}
#facebook {
  width: 32px;
  height: 32px;
  margin: 0 auto;
}
#facebook .bar {
  background: #99aaca;
  border: 1px solid #96a6c9;
  float: left;
  margin: 6px 4px 0 0;
  width: 6px;
  height: 18px;
  -webkit-animation: facebook-pulse 1s linear infinite normal;
  -moz-animation: facebook-pulse 1s linear 0 infinite normal;
  -ms-animation: facebook-pulse 1s linear 0 infinite normal;
  animation: facebook-pulse 1s linear 0 infinite normal;
}
#facebook .bar:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
#facebook .bar:last-child {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
  margin-right: 0;
}
#loadpulse {
  width: 48px;
  padding: 8px 5px;
  margin: 30px auto;
  overflow: hidden;
}
#loadpulse .segment {
  float: left;
  position: relative;
  width: 6px;
  height: 6px;
  border: 1px solid #fff;
  border-radius: 50px;
  margin-left: 2px;
  border: 1px solid #111;
  border-right-color: #333;
  border-bottom-color: #333;
  background: #000;
}
#loadpulse .segment:first-child {
  margin-left: 0;
}
#loadpulse .ball {
  background-color: #2187e7;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2');
  background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
  background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
  width: 6px;
  height: 6px;
  border-radius: 50px;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -webkit-animation: loadpulse-ball 1s linear forwards normal;
  -moz-animation: loadpulse-ball 1s linear 0 forwards normal;
  -ms-animation: loadpulse-ball 1s linear 0 forwards normal;
  animation: loadpulse-ball 1s linear 0 forwards normal;
}
#loadpulse .pulse {
  width: 6px;
  height: 6px;
  border-radius: 30px;
  border: 1px solid #00c6ff;
  -webkit-box-shadow: 0 0 5px #00c6ff;
  -moz-box-shadow: 0 0 5px #00c6ff;
  box-shadow: 0 0 5px #00c6ff;
  position: absolute;
  top: -1px;
  left: -1px;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -webkit-animation: loadpulse-glow 3s infinite ease-out normal;
  -moz-animation: loadpulse-glow 3s infinite 0 ease-out normal;
  -ms-animation: loadpulse-glow 3s infinite 0 ease-out normal;
  animation: loadpulse-glow 3s infinite 0 ease-out normal;
}
#loadpulse #layer1 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
#loadpulse #layer2 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
#loadpulse #layer3 {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
#loadpulse #layer4 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#loadpulse #layer5 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
#loadpulse #layer7 {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
#loadpulse #layer8 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#loadpulse #layer9 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
#loadpulse #layer10 {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
}
#loadpulse #layer11 {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
}
#shadowloader {
  display: block;
  position: relative;
  overflow: hidden;
  width: 5em;
  margin: 30px auto;
  padding: 20px 10px;
}
#shadowloader span {
  display: block;
  float: left;
  width: 0.5em;
  height: 3em;
  margin: 0 0.5em 0 0;
  background: #635863;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2');
  background-image: -webkit-linear-gradient(top, #635863 25%, #3d353b);
  background-image: -moz-linear-gradient(top, #635863 25%, #3d353b);
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0), 1px 1px 1px 0 rgba(0, 0, 0, 0), 1px 1px 1px 0 rgba(0, 0, 0, 0);
  -webkit-animation: pound 0.7s ease-in-out infinite alternate;
  -moz-animation: pound 0.7s ease-in-out 0.05s infinite alternate;
  -ms-animation: pound 0.7s ease-in-out 0.05s infinite alternate;
  animation: pound 0.7s ease-in-out 0.05s infinite alternate;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}
#shadowloader span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#shadowloader span:nth-child(3) {
  -webkit-animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
  -o-animation-delay: 0.35s;
  animation-delay: 0.35s;
}
#shadowloader span:nth-child(4) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
#shadowloader span:nth-child(5) {
  -webkit-animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
  animation-delay: 0.65s;
}
h1.loadingtext {
  text-align: center;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  font-size: 4.6875em;
  color: transparent;
  letter-spacing: 0.01em;
}
h1.loadingtext span {
  text-shadow: 0 0 2px rgba(22, 22, 22, 0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(22, 22, 22, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(22, 22, 22, 0.2), 0 0 20px rgba(22, 22, 22, 0.45);
  -webkit-animation: letters 0.85s ease-in-out infinite alternate;
  -moz-animation: letters 0.85s ease-in-out 0 infinite alternate;
  -ms-animation: letters 0.85s ease-in-out 0 infinite alternate;
  animation: letters 0.85s ease-in-out 0 infinite alternate;
}
h1.loadingtext span:nth-child(2) {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  -o-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
h1.loadingtext span:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
h1.loadingtext span:nth-child(4) {
  -webkit-animation-delay: 0.45s;
  -moz-animation-delay: 0.45s;
  -o-animation-delay: 0.45s;
  animation-delay: 0.45s;
}
h1.loadingtext span:nth-child(5) {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
h1.loadingtext span:nth-child(6) {
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
h1.loadingtext span:nth-child(7) {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  animation-delay: 0.9s;
}


@keyframes spin-right {
  from {
    transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(180deg);
    opacity: 1.0;
  }
  to {
    transform: rotate(360deg);
    opacity: 0.2;
  }
}
@-moz-keyframes spin-right {
  from {
    -moz-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -moz-transform: rotate(180deg);
    opacity: 1.0;
  }
  to {
    -moz-transform: rotate(360deg);
    opacity: 0.2;
  }
}
@-webkit-keyframes spin-right {
  from {
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: rotate(180deg);
    opacity: 1.0;
  }
  to {
    -webkit-transform: rotate(360deg);
    opacity: 0.2;
  }
}
@keyframes spin-left {
  from {
    transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(-180deg);
    opacity: 1.0;
  }
  to {
    transform: rotate(-360deg);
    opacity: 0.2;
  }
}
@-moz-keyframes spin-left {
  from {
    -moz-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -moz-transform: rotate(-180deg);
    opacity: 1.0;
  }
  to {
    -moz-transform: rotate(-360deg);
    opacity: 0.2;
  }
}
@-webkit-keyframes spin-left {
  from {
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: rotate(-180deg);
    opacity: 1.0;
  }
  to {
    -webkit-transform: rotate(-360deg);
    opacity: 0.2;
  }
}
@keyframes spin-pulse {
  from {
    transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px rgba(0, 61, 76, 0.9);
  }
  50% {
    transform: rotate(145deg);
    opacity: 1;
  }
  to {
    transform: rotate(-320deg);
    opacity: 0;
  }
}
@-moz-keyframes spin-pulse {
  from {
    -moz-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px rgba(0, 61, 76, 0.9);
  }
  50% {
    -moz-transform: rotate(145deg);
    opacity: 1;
  }
  to {
    -moz-transform: rotate(-320deg);
    opacity: 0;
  }
}
@-webkit-keyframes spin-pulse {
  from {
    -webkit-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px rgba(0, 61, 76, 0.9);
  }
  50% {
    -webkit-transform: rotate(145deg);
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-320deg);
    opacity: 0;
  }
}
@keyframes pulse {
  from {
    transform: scale(1.2);
    opacity: 1;
  }
  to {
    transform: scale(0.7);
    opacity: 0.1;
  }
}
@-moz-keyframes pulse {
  from {
    -moz-transform: scale(1.2);
    opacity: 1;
  }
  to {
    -moz-transform: scale(0.7);
    opacity: 0.1;
  }
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.2);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.7);
    opacity: 0.1;
  }
}
@keyframes ball-circlex {
  from {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(25px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateX(0px);
  }
  75% {
    transform: translateX(-25px);
    animation-timing-function: ease-in;
  }
  to {
    transform: translateX(0px);
  }
}
@-moz-keyframes ball-circlex {
  from {
    -moz-transform: translateX(0px);
  }
  25% {
    -moz-transform: translateX(25px);
    -moz-animation-timing-function: ease-in;
  }
  50% {
    -moz-transform: translateX(0px);
  }
  75% {
    -moz-transform: translateX(-25px);
    -moz-animation-timing-function: ease-in;
  }
  to {
    -moz-transform: translateX(0px);
  }
}
@-webkit-keyframes ball-circlex {
  from {
    -webkit-transform: translateX(0px);
  }
  25% {
    -webkit-transform: translateX(25px);
    -webkit-animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(-25px);
    -webkit-animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: translateX(0px);
  }
}
@keyframes facebook-pulse {
  10% {
    margin-top: 5px;
    height: 22px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }
  20% {
    margin-top: 0px;
    height: 32px;
    border-color: #d1d7e2;
    background-color: #bac5db;
  }
  30% {
    margin-top: 1px;
    height: 30px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }
  40% {
    margin-top: 3px;
    height: 26px;
  }
  50% {
    margin-top: 5px;
    height: 22px;
  }
  60% {
    margin-top: 6px;
    height: 18px;
  }
}
@-moz-keyframes facebook-pulse {
  10% {
    margin-top: 5px;
    height: 22px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }
  20% {
    margin-top: 0px;
    height: 32px;
    border-color: #d1d7e2;
    background-color: #bac5db;
  }
  30% {
    margin-top: 1px;
    height: 30px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }
  40% {
    margin-top: 3px;
    height: 26px;
  }
  50% {
    margin-top: 5px;
    height: 22px;
  }
  60% {
    margin-top: 6px;
    height: 18px;
  }
}
@-webkit-keyframes facebook-pulse {
  10% {
    margin-top: 5px;
    height: 22px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }
  20% {
    margin-top: 0px;
    height: 32px;
    border-color: #d1d7e2;
    background-color: #bac5db;
  }
  30% {
    margin-top: 1px;
    height: 30px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }
  40% {
    margin-top: 3px;
    height: 26px;
  }
  50% {
    margin-top: 5px;
    height: 22px;
  }
  60% {
    margin-top: 6px;
    height: 18px;
  }
}
@keyframes loadpulse-ball {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@-moz-keyframes loadpulse-ball {
  from {
    -moz-transform: scale(0);
  }
  to {
    -moz-transform: scale(1);
  }
}
@-webkit-keyframes loadpulse-ball {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes loadpulse-glow {
  from {
    transform: scale(0);
    opacity: 0;
  }
  10% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.75);
    opacity: 0;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}
@-moz-keyframes loadpulse-glow {
  from {
    -moz-transform: scale(0);
    opacity: 0;
  }
  10% {
    -moz-transform: scale(1);
    opacity: 0.5;
  }
  50% {
    -moz-transform: scale(1.75);
    opacity: 0;
  }
  to {
    -moz-transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes loadpulse-glow {
  from {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  10% {
    -webkit-transform: scale(1);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1.75);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(0);
    opacity: 0;
  }
}
@keyframes pound {
  to {
    transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45);
  }
}
@-moz-keyframes pound {
  to {
    -moz-transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45);
  }
}
@-webkit-keyframes pound {
  to {
    -webkit-transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45);
  }
}
@keyframes letters {
  to {
    text-shadow: 0 0 2px rgba(204, 208, 212, 0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
  }
}
@-moz-keyframes letters {
  to {
    text-shadow: 0 0 2px rgba(204, 208, 212, 0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes letters {
  to {
    text-shadow: 0 0 2px rgba(22, 22, 22, 0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
  }
}




/* ══════════════════════════════════════════════════════════════════════
   LOS COLORES DE TMenu SON VARIABLES
   ══════════════════════════════════════════════════════════════════════
   Estaban escritos a pelo --y con `!important`-- dentro de las reglas, así
   que la única forma de teñir el menú en otro sitio era volver a escribir
   sus selectores con más peso. Ahora se redefine el token y ya:

       .mi-portal .TMenu{ --tmenu-activo: #16a34a; }

   Los valores por defecto son EXACTAMENTE los de antes, así que el panel de
   administración se ve igual que siempre.
   ────────────────────────────────────────────────────────────────────── */
.TMenu{
    /* Lo seleccionado: el rótulo y su icono. */
    --tmenu-activo: #fb148b;

    /* El filo izquierdo del área desplegada. */
    --tmenu-borde-abierto: #afafaf;

    /* Y el de la entrada seleccionada, que es otra cosa: una puede estar
       abierta sin ser la que se está viendo. */
    --tmenu-borde-activo: #fb148b;

    /* El filo de las entradas hijas, que solo se ve al marcarlas. */
    --tmenu-borde-hijo: transparent;

    border-bottom: 0px;
 
	
    position: relative;
    padding: 0px;    
    margin: 0px !important;
    z-index: 100;
    left: 1px;
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

}
.TMenu .menu
{
   width: 220px; 
   padding: 0px; 
   background-color: #e9ebee;
   position: sticky;
    top: 100px;
}

.TMenu .menubar-content{
        margin-left: 20px;
        width: 100%;
}

.TMenu .menu ul
{
 overflow:hidden;
     display: block;
    position: relative;
      padding-left: 0px;
      background-color: #e9ebee;
}

.TMenu .menu li
{
    cursor: pointer;
}

.TMenu .menu li:not(:first-child)
{
    text-align: left;
    min-height: 30px;
    cursor: pointer;
    color: #292929;
    overflow:hidden;
    position: relative;
    display:block;

    box-sizing:border-box;
    border-top: 1px solid #bbb;
    border-left: 3px solid transparent;
    
    background-color: inherit;
    margin-top: 0px;
}
.TMenu .menu li ul
{
    margin-top: -300%; /* Desplazar hacia arriba */    
    transition: all 0.3s ease; /* Agregar una transicin suave */
    
    z-index: 1;
    padding-left: 10px;
    position:relative;
    background-color: #d3d3d3;
}


.TMenu .menu li > .menuitem-content
{
    display: block;
    z-index: 10;
    position:relative;
    white-space: nowrap; 
   
    color: #2c3e50;
    padding: 10px;
    background-color: inherit;
	
	font-weight: 700;

    /* EL RÓTULO ES UN `<button>` (ver `#renderMenu` en TMenu.js): se le quita
       lo que el navegador y las hojas globales le ponen a todo botón para que
       se vea exactamente como el `<span>` que era. De fuera llegan el alto de
       25px, el contenido centrado y el `border-image` de `.TComponentES6 button`
       y del `button` de Tadmin.css, y del navegador el borde, el fondo gris y
       la fuente del sistema. El `<span>` recibía `font: 12px Inter` de la regla
       global de `span`; el botón la HEREDA del `li`, que lleva la misma.

       Y NI `outline` NI `:focus`: el anillo del foco es el común del sitio
       (`:focus-visible` en Tjquery/css/index.css). */
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-image: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.TMenu .menu li.hover > .menuitem-content,
.TMenu .menu li.hover > i
{
    color: var(--tmenu-activo)  ;
}


.TMenu .menu li.on > .menuitem-content,
.TMenu .menu li.on > i
{
   color: var(--tmenu-activo)  !important;
}


.TMenu .menu li li {
    border-left: 3px solid var(--tmenu-borde-hijo);
}



.TMenu .menu li.on, .TMenu .menu li:has(.on) {

  
    z-index: 10 !important;    
}


.TMenu  .menu > li.expanded:has(ul){
    border-left: 3px solid var(--tmenu-borde-abierto);
    
}

/* LA FLECHA DE «AQUÍ HAY MÁS»: a la derecha del rótulo, a su altura, y girando
   un cuarto de vuelta cuando la carpeta se abre. Antes era un glifo de Unicons
   --fuente que el proyecto no carga-- colocado a base de un tamaño de 48px y un
   `top:-24px` en su `::before` para centrarlo; con un icono de verdad basta con
   alinearlo. */
.TMenu .menu i.tmenu-arrow{
  position: absolute;
  right: 8px;
  top: 0;
  height: var(--tmenu-alto-item, 30px);
  display: flex;
  align-items: center;
  font-size: 16px;
  color: inherit;
  opacity: .7;
  transition: transform .2s linear;

  /* POR ENCIMA DEL RÓTULO. El `.menuitem-content` va después en el marcado y
     ocupa toda la fila, así que sin esto la flecha queda DEBAJO: está pintada,
     tiene su sitio y no se ve ni una punta (comprobado con elementFromPoint,
     que devolvía el rótulo). La regla vieja llevaba `z-index:100` justo por
     esto y se perdió al cambiar el icono.

     Y 100, no 2: en el panel de administración el rótulo va con
     `position:relative; z-index:10` (AdminUI.css) y fondo opaco, así que con un
     2 la flecha seguía debajo -- en el portal del vendedor, sin esa regla, se
     veía perfectamente. Es justo el tipo de diferencia que no se aprecia
     mirando una sola pantalla.
     Y sin capturar el ratón: el clic es del li, que es quien despliega. */
  z-index: 100;
  pointer-events: none;
}

.TMenu .menu li.expanded > i.tmenu-arrow{
  transform: rotate(90deg);
}

/* Y EL RÓTULO LE DEJA SITIO. Sin esto, un nombre largo --«Configuración de
   Catálogo»-- pasa por debajo de la flecha y se leen encimados. */
.TMenu .menu li:has(> i.tmenu-arrow) > .menuitem-content{
  padding-right: 30px;
}


.TMenu .menu > li.on{
    /* El filo de lo seleccionado. Con `!important` de siempre, así que el
       único modo de teñirlo fuera del panel es el token. */
    border-left: 3px solid var(--tmenu-borde-activo) !important;
}

/* Las reglas de la fuente Unicons (`.uil`) se han retirado con ella: solo
   servían para encajar aquel glifo de 48px. */

.TMenu .menuitem-content
{
    display: flex !important;
    flex-direction: row;
    align-items: center;
    /* `.TComponentES6 button` centra el contenido: el rótulo va a la izquierda. */
    justify-content: flex-start;
}

.TMenu .menuitem-content iconify-icon
{
font-size: 16px !important;
top: 0px !important;
/* El hueco de siempre (el de la regla global de `iconify-icon`), dicho aquí
   para que no lo cambie `button iconify-icon{margin-right:10px}` de Tadmin.css. */
margin-right: 5px;

}

/* ══════════════════════════════════════════════════════════════════════
   LO PLEGADO NO SE ALCANZA CON TAB
   ══════════════════════════════════════════════════════════════════════
   Un submenú plegado no se quita del DOM: se sube con `margin-top` negativo y
   lo tapa el `overflow:hidden` del `li`. Con rótulos que son botones eso deja
   el foco paseándose por entradas que no se ven. `visibility:hidden` las saca
   del orden de Tab y del árbol de accesibilidad.

   Cuelga de `aria-expanded`, que TMenu calcula de lo que se ve. Y no rompe la
   animación: `visibility` entra en el `transition: all .3s` del submenú, y el
   navegador la mantiene visible mientras dura el viaje en los dos sentidos. */
.TMenu .menu li:has(> .menuitem-content[aria-expanded="false"]) > ul
{
    visibility: hidden;
}

/*
 * EL AVISO de una entrada: cuantas cosas hay pendientes detras.
 *
 * El numero lo pone el servidor (MenuItem::buildMenuItems) y viaja dentro del
 * propio menu. Va pegado a la derecha con margin-left:auto porque
 * .menuitem-content es un flex: sin eso queda pegado al texto y parece parte
 * del nombre de la entrada.
 */
.TMenu .menuitem-badge
{
    margin-left: auto;
    /* Sitio para la flecha de las secciones con hijos, que va en absolute a la
       derecha del li: sin este hueco el numero le queda debajo. */
    margin-right: 18px;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f97316;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    /* El menu fija el tamano con el shorthand `font:` sobre el li, y un span no
       lo hereda: hay que decirlo en el elemento que pinta el texto. */
    font-family: inherit;
}


 

:root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --success: #10b981;
            --danger: #ef4444;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-800: #1f2937;
        }

.TMultiSelectES6:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.TMultiSelectES6.disabled {
    background: var(--gray-100);
    border-color: var(--gray-200);
    pointer-events: none;
    opacity: 0.6;
}
 .TMultiSelectES6{

        position: relative;
        width: 100%;
        border: 1px solid var(--gray-300);
        border-radius: 12px;
        background: white;
        min-height: 45px;
       padding: 5px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-sizing: border-box;


        .selected-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 2px 6px;
            background: var(--primary);
            color: white;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            border: 2px solid var(--primary);
            position: relative;
            transition: all 0.3s ease;
        }
        /* Imagen en items seleccionados */
.selected-item .item-image {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
/* Icono en items seleccionados (mantener compatibilidad) */
.selected-item .item-icon {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.selected-item .item-icon img{
        width: 20px;
        height: fit-content;
}

        .selected-item.animating {
            animation: itemPulse 0.5s ease;
        }
          
		 
        .selected-item.selected {
			border: 2px dashed #007bff; 
			/*box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);*/
			/*padding: 8px;*/
			/*margin: 4px; */
			border-radius: 4px;
			
			transition: all 0.3s ease; 

		}
		
		
		
		/* Opcional: efecto hover para mejor interactividad */
		
		 .selected-item.selected:hover {
/*			box-shadow: 0 0 15px rgba(0, 123, 255, 0.7);*/
			background-color: rgba(0, 123, 255, 0.1);
		 }
        
        .selected-item .item-icon {
            display: flex;
            align-items: center;
            font-size: 0.8rem;
        }

        .selected-item .item-name {
            flex: 1;
            white-space: nowrap;
        }

               /* Bot�n de eliminar */
        .selected-item .remove-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: #000000;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.7rem;
            transition: all 0.3s ease;
            margin-left: 4px;
        }

        .selected-item .remove-btn i{
            color: #000000;
        }

        /* Cuando el item tiene color personalizado, ajustar contraste */
        .selected-item[style*="background"] .item-image {
            border-color: rgba(255, 255, 255, 0.5);
        }

        .selected-item[style*="background"] .remove-btn {
            color: inherit;
        }

        /* Contenedor de medios en items seleccionados */
        .selected-item .item-media {
            display: flex;
            align-items: center;
        }

        /* Imagen en items seleccionados - versi�n mejorada */
        .selected-item .item-image {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.3);
            flex-shrink: 0;
        }

        /* Icono de fallback cuando la imagen no carga */
        .selected-item .item-icon.fallback {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
        }

        /* Para items m�s grandes cuando es necesario */
        .selected-item.large .item-image {
            width: 24px;
            height: 24px;
        }

        .selected-item.large .item-icon {
            font-size: 0.9rem;
        }

        .selected-item .remove-btn:hover {
            background: rgba(255,255,255,0.3);
        }

       
        
		
        .selected-container .option-item.selected {
			border: 0px dashed #2196f3 !important;
           
			/*box-shadow: 0 0 8px rgba(33, 150, 243, 0.3) !important;*/
		}
		

        @keyframes optionPulse {
            0% {
                background: rgba(59, 130, 246, 0.2);
            }
            100% {
                background: rgba(59, 130, 246, 0.1);
            }
        }


        &.active{
           border-color: var(--primary);
           box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }


}


/* Modo est�ndar (default) */
.TMultiSelectES6 .selected-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Modo solo popup - oculta selecci�n */
.TMultiSelectES6.popup-only .selected-container {
    display: none !important;
}



        .dropdown-popup .color-preview {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-right: 8px;
            vertical-align: middle;
        }


        /* Contenedor de medios (imagen o icono) */
        .dropdown-popup .option-media {
            display: flex;
            align-items: center;
            justify-content: center;
            
              height: 30px;
              width: 30px;
            overflow:hidden;
        }


        /* Para modo card-mode con im�genes */
    .dropdown-popup.card-mode .option-image {
        max-height: none;
        border-radius: 6px;
    }

    .dropdown-popup.card-mode .option-item[style*="grid-column: span 2"] .option-image,
    .dropdown-popup.card-mode .option-item[style*="grid-row: span 2"] .option-image {
        max-height: 80px;
    }
    /* Header del popup cuando search est� en popup */
    .dropdown-popup .popup-header {
        padding: 6px 10px;
        background: var(--gray-100);
        border-bottom: 1px solid var(--gray-200);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .dropdown-popup .popup-header .search-input {
        width: 100%;
       
        padding: 8px 12px;
        border: 1px solid var(--gray-300);
        border-radius: 6px;
        font-size: 0.9rem;
        background-color: #fff;
    }

    .dropdown-popup .popup-header .search-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

    /* Search en modo default (�rea de selecci�n) */
    .dropdown-popup .search-input {
        min-width: 120px;
        border: 1px solid var(--gray-300);
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .dropdown-popup .search-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }



    .dropdown-popup.card-mode .options-container {
        display: grid;
        grid-template-columns: repeat(1, minmax(120px, 1fr));
        gap: 12px;
        padding: 15px;
    }
    /* Modo cards en popup */
    .dropdown-popup.card-mode .option-group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
        padding: 15px;
    }

    .dropdown-popup.card-mode .option-item {
  
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--gray-200);
        border-radius: 12px;
        background: white;
        transition: background-color color border 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow:hidden;
        border: 2px solid #e2e8f0;
        justify-content: flex-start;
      
    }

    .dropdown-popup .option-item:hover,
    .dropdown-popup.card-mode .option-item:hover {
        
        /*transform: translateY(-2px);*/
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        /*border: 2px solid var(--primary);*/
        background-color: #FFF;
        border-color: #cbd5e1;
        height:none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .dropdown-popup .option-item.selected {
        border-color: var(--primary) !important;
        background: rgb(59 130 246 / 18%) !important;
    }

    .dropdown-popup.card-mode .option-item.selected:hover {
        border: 2px dashed var(--primary);
        background: rgb(59 130 246 / 18%);
    }


    .dropdown-popup.card-mode .card-icon {
        font-size: 1.5rem;
        margin-bottom: 8px;
        color: var(--gray-600);
    }

    .dropdown-popup.card-mode .card-label {
        font-size: 0.8rem;
        text-align: center;
        font-weight: 500;
    }

    .dropdown-popup.card-mode .card-check {
        position: absolute;
        top: 8px;
        right: 8px;
        color: var(--primary);
        font-size: 0.8rem;
    }

    /* Modo lista formulario */
    .dropdown-popup.form-list .options-container.form-options {
        padding: 0;
    }

    .dropdown-popup.form-list .option-item {
        padding: 6px;
        border-bottom: 1px solid var(--gray-200);
        text-align: left;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        background: none;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .dropdown-popup.form-list .option-item:hover {
        background: var(--gray-50);
        background: rgba(59, 130, 246, 0.05);
    }

    .dropdown-popup.form-list .option-item.selected {
        background: rgba(59, 130, 246, 0.15);
    }

    .dropdown-popup.form-list .form-option-content {
        flex: 1;
    }

    .dropdown-popup.form-list .form-option-title {
        font-weight: 500;
        margin-bottom: 4px;
    }

    .dropdown-popup.form-list .form-option-desc {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

     .dropdown-popup .option-desc {
        font-size: 0.75rem;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }

     .dropdown-popup .option-name-block{
           display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
}

     }
    .dropdown-popup.form-list .form-option-check {
        color: var(--primary);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dropdown-popup.form-list .option-item.selected .form-option-check {
        opacity: 1;
    }

     .dropdown-popup.card-form .option-item.selected .form-option-check {
        right: auto;
        position: relative;
    }


    





		.dropdown-popup .options-container{
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
        }

        
		.TMultiSelectES6 .options-container{
            max-height: none;            
        }

        .TMultiSelectES6 .dropdown-popup {            
            padding: 0px;
            top:0px;
            left: 0px;
            width: 100%;
            box-shadow: none;
            border: 0;
        }

    
        .dropdown-popup .option-item {
            user-select: none;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            position: relative;
            white-space:wrap;
            margin-bottom: 2px;
            margin-left: 0px;
        }
        .dropdown-popup .option-item iconify-icon
        {
            margin-right: 0 !important;
        }
        .dropdown-popup .option-item:hover {
            background: var(--gray-100);
            text-decoration: none !important;
        }

        .dropdown-popup .option-item.selected {
            background: rgba(59, 130, 246, 0.1);
            /*border-left: 5px solid #2196f3;*/

        }

        .dropdown-popup .option-item.animating {
            animation: optionPulse 0.4s ease;
        }

        .dropdown-popup .option-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .dropdown-popup .option-item.hidden {
            display: none;
        }

        .dropdown-popup .option-item .option-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .dropdown-popup .option-name {
            flex: 1;
            color: var(--gray-800);
            font-size: 0.8rem;        
        }

        .dropdown-popup:not(.card-mode) .option-name{
            
            white-space: nowrap;    
        }

           .dropdown-popup.form-list .option-item.selected .option-check {
            opacity: 1;
            right: 20px;
             position: absolute;
        }
        .dropdown-popup.card-form .option-item.selected .option-check {
            right:auto;
             position: relative;
             opacity: 1;
        }

        .dropdown-popup .option-item .option-check {
            color: var(--primary);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

      
		
		.dropdown-popup .option-item.highlighted {
			background-color: #e3f2fd !important;
			border-left: 5px solid #2196f3 !important;
		}
		
		/* Opcional: combinar ambas clases para un efecto m�s fuerte */
		.dropdown-popup .option-item.highlighted.selected {
			background-color: #bbdefb !important;
			/*box-shadow: 0 0 12px rgba(33, 150, 243, 0.5) !important;*/
		}

        .dropdown-popup {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            
            z-index: 1000000000;
			overflow: hidden;
            display: none;
        }

        .dropdown-popup.visible {
            display: block;
            animation: slideDown 0.3s ease;
        }

        .dropdown-popup.fixed {
            position: static;
            margin-top: 15px;
            box-shadow: none;
            border: 2px solid var(--gray-200);
          
        }

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

        @keyframes itemPulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

        .dropdown-popup .option-group {
            padding: 10px 0;
        }

        .dropdown-popup  .group-title {
            padding: 8px 15px;
            font-weight: 600;
            color: var(--gray-600);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: var(--gray-100);
        }

        .dropdown-popup.card-mode  .group-title{
            width: 100%;
    grid-column: 1 / -1;
    margin-bottom: 16px;
    border: 1px solid #dbdbdb;
    padding-bottom: 8px;
    border-radius: 6px;
        }
.dropdown-popup {
    position: absolute;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 10000000000; /* Alto z-index para estar por encima de todo */
    display: none;

    overflow: hidden;
}

.dropdown-popup .option-icon img{
  max-height: 100%;
    max-width: 100%
}
.dropdown-popup.visible {
    display: block;
    animation: slideDown 0.3s ease;
}

.dropdown-popup.fixed {
    position: static;
    margin-top: 15px;
    box-shadow: none;
    border: 2px solid var(--gray-200);
}


        /* Estilos para im�genes */
       .dropdown-popup .option-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Estilos para iconos (mantener compatibilidad) */
       .dropdown-popup  .option-icon {
            font-size: 1.2rem;
            color: var(--gray-600);
        }

        /* Para cards m�s grandes con im�genes */
        .dropdown-popup .option-item[style*="grid-column: span 2"] .option-image,
        .dropdown-popup .option-item[style*="grid-row: span 2"] .option-image {
            max-height: 60px;
        }

        
        .dropdown-popup  .search-input {
            flex: 1;
            min-width: 120px;
            border: none;
            outline: none;
            padding: 8px 4px;
            font-size: 0.9rem;
            background: transparent;
        }

        .dropdown-popup .search-input::placeholder {
            color: var(--gray-400);
        }




       .dropdown-popup  .loading-indicator {
            padding: 20px;
            text-align: center;
            color: var(--gray-500);
            font-size: 0.9rem;
        }

       .dropdown-popup  .loading-indicator i {
            margin-right: 8px;
        }

        .dropdown-popup .no-options {
            padding: 20px;
            text-align: center;
            color: var(--gray-500);
            font-size: 0.9rem;
        }
   

       .dropdown-popup .demo-output {
            margin-top: 30px;
            padding: 20px;
            background: var(--gray-100);
            border-radius: 12px;
            border: 2px solid var(--gray-200);
        }

       .dropdown-popup .output-title {
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

       .dropdown-popup .output-content {
            background: white;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            max-height: 200px;
            overflow-y: auto;
        }

       .dropdown-popup  .method-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

        .dropdown-popup .method-btn {
            padding: 8px 12px;
            font-size: 0.8rem;
        }

        .dropdown-popup .fixed-popup-container {
            background: var(--gray-50);
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
        }

      .dropdown-popup   .fixed-popup-title {
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 15px;
            font-size: 1rem;
        }

      /* Estilos para modo �rbol */
.dropdown-popup  .option-item {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
}

.dropdown-popup .tree-indent {
    flex-shrink: 0;
    transition: width 0.2s ease;
}

.dropdown-popup .tree-expander-container {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-popup .tree-expander {
    background: none;
    border: none;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 10px;
    transition: all 0.2s ease;
}

.dropdown-popup .tree-expander:hover {
    background: #f0f0f0;
    color: #333;
}

.dropdown-popup .tree-spacer {
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* Niveles del �rbol */
.dropdown-popup .tree-level-1 { padding-left: 20px; }
.dropdown-popup .tree-level-2 { padding-left: 40px; }
.dropdown-popup .tree-level-3 { padding-left: 60px; }
.dropdown-popup .tree-level-4 { padding-left: 80px; }
.dropdown-popup .tree-level-5 { padding-left: 100px; }

/* Transiciones suaves */
.dropdown-popup .option-item {
    transition: all 0.2s ease;
}

/* Ocultar tree-expander-container cuando est� vac�o */
.dropdown-popup .tree-expander-container:empty {
    display: none;
}

/* Opcional: ajustar m�rgenes cuando no hay �rbol */
.TMultiSelectES6:not(.form-list) .option-item {
    padding-left: 12px; /* Padding normal cuando no hay indentaci�n */
}

.TMultiSelectES6.form-list .option-item {
    padding-left: 8px; /* Padding reducido cuando hay indentaci�n */
}


/* Estilos para el header del popup */
.popup-header
{
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.dropdown-popup{

        .header-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }

        .view-mode-buttons {
            display: flex;
            gap: 0px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 2px;
        }

        .view-mode-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            border-radius: 4px;
            cursor: pointer;
            color: #000;
            transition: all 0.2s ease;
            padding: 5px;
            margin-left: 0;
        
        }

        .view-mode-btn:hover {
            background: #007bff38;
            color: #333;
            text-decoration:none !important;
        }

        .view-mode-btn.active {
            background: #007bff38;
           
        }

        .view-mode-btn i {
            font-size: 14px;
        }

     

        .results-count,
        .selected-count {
            font-weight: 500;
        }

        /* Ajustes para cuando hay search input */
        .popup-header .search-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }

        .popup-header .search-input:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        /* Estilos para el header de b�squeda en el contenedor principal */
        .search-header {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 8px;
            border-top: 1px solid #e0e0e0;
        }

        .search-header .search-input {
            flex: 1;
            min-width: 120px;
        }

        .search-header .view-mode-buttons {
            display: flex;
            gap: 2px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 1px;
        }


        .loading-message {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
            color: #666;
        }

        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;        
            justify-content: center;
        }

        .loading-content .fa-spinner {
            font-size: 24px;
            color: #3b82f6;
        }

        .loading-count {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #3b82f6;
        }

        .loading-count .fa-spinner {
            font-size: 14px;
        }
}



.TMultiSelectES6.smallItems{
    padding: 0;
}
.dropdown-popup.smallItems .options-container{

padding: 10px;

}

.dropdown-popup.smallItems .option-group{
   padding: 0px; 
   gap: 5px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.dropdown-popup.smallItems .option-item
{
    display: flex;
    flex-direction: row;
    padding-left: 12px; 
    width: 100%;
    height: 40px;
    padding: 6px;
        border-radius: 12px;
    background: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    justify-content: flex-start;
    align-items: center;
    white-space:nowrap;
}

.dropdown-popup.smallItems .option-item
{
    display: flex;
    flex-direction: row;
    padding-left: 12px; 
    width: 100%;
    height: 50px;
    padding: 6px;
}


.dropdown-popup .search-header,
.dropdown-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
	flex-direction: row;
}

.dropdown-popup .header-controls {
     display: flex;
    align-items: center;
    gap: 10px;
  
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.dropdown-popup .popup-label {
       position: absolute;
    left: 20px;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1.0rem;
    display: flex;
    align-items: center;
}

.dropdown-popup .popup-label i
{
    color: inherit;
    margin-right: 8px;
}


.dropdown-popup .view-mode-buttons,
.dropdown-popup .menu-buttons {
    display: flex;
    gap: 0px;
}

.dropdown-popup .menu-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    text-decoration: none !important;
}
.dropdown-popup .menu-btn i
{
    color: inherit;
}



.dropdown-popup .menu-btn:hover:not(.disabled) {
    background: #f5f5f5;
    border-color: #ccc;
}

.dropdown-popup .menu-btn:active:not(.disabled) {
    background: #e9e9e9;
}

.dropdown-popup .menu-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dropdown-popup .menu-btn i {
    font-size: 14px;
}

/*  ------------------------ POUP FOOTER --------------------*/


.dropdown-popup .popup-footer {
    background: #f8f9fa; /* Mismo color que el header */
    border-top: 1px solid #e9ecef;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #6c757d;
}


.dropdown-popup .results-info {
    display: flex;
    gap: 15px;
    font-size: 0.85em;
    color: #666;
    justify-content: space-between;
    
    font-size: 0.8rem;
    color: var(--gray-600);
} 

.dropdown-popup .results-count,
.dropdown-popup .selected-count {
    font-weight: 500;
}

.dropdown-popup .loading-count {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-popup .loading-count i {
    font-size: 12px;
}

/* Asegurar que el dropdown tenga la estructura correcta */
.dropdown-popup .dropdown-popup.visible {
    display: flex !important;
    flex-direction: column;
}



  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
	cursor: pointer;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 180px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    padding: 5px;
    white-space: normal;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}






.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
     display: none;
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;
}


.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    display: none;
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;
}

.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;
}

.tooltip.right .tiptext{
    top: -5px;
    left: 30px;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 25%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;
}



/* Histórico de estados de pedido -- diseño único compartido por admin
   (TOrder2) y cliente (TOrderDetail): puntos + línea conectora, verde
   para lo alcanzado, gris para lo pendiente del pipeline predefinido.
   Colores y estructura calcados de Modules/Admin/templates/TOrders/css/
   TOrder2.css a propósito, para que sea el MISMO componente visualmente
   en cualquier sitio donde se use. */

.TOrderStatusHistory .osh-empty {
    padding: 12px 0;
    color: #94a3b8;
    font-size: 0.75rem;
}

.TOrderStatusHistory .osh-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.TOrderStatusHistory .status-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.7rem;
    color: #475569;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.TOrderStatusHistory .status-item:last-child { border-bottom: none; }

.TOrderStatusHistory .status-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 30px;
    background: #e2e8f0;
    flex-shrink: 0;
    margin-top: 0.3rem;
    position: relative;
    z-index: 1;
}

.TOrderStatusHistory .status-item .dot.completed { background: #22c55e; }
.TOrderStatusHistory .status-item .dot.pending   { background: #cbd5e1; }

/* Línea que une un paso con el siguiente -- solo si el siguiente paso
   comparte el mismo estado (completado/pendiente) que este, para que el
   tramo verde no se cuele en un paso aún pendiente ni al revés. */
.TOrderStatusHistory .status-item.is-linked::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 3px;
    width: 2px;
    height: 100%;
    background: #cbd5e1;
    z-index: 0;
}

.TOrderStatusHistory .status-item.is-linked.is-completed::before { background: #22c55e; }

.TOrderStatusHistory .status-item.is-pending .status-item-title { color: #94a3b8; font-weight: 500; }

.TOrderStatusHistory .status-item-body {
    flex: 1;
    min-width: 0;
}

.TOrderStatusHistory .status-item-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.TOrderStatusHistory .status-item-title {
    font-weight: 600;
    color: #334155;
}

.TOrderStatusHistory .status-item-msg {
    color: #64748b;
    font-size: 0.65rem;
    margin-top: 0.15rem;
    line-height: 1.35;
}

.TOrderStatusHistory .status-item.osh-live-new {
    animation: TOrderStatusHistory-live 1.6s ease;
}

@keyframes TOrderStatusHistory-live {
    0% { background: #dcfce7; }
    100% { background: transparent; }
}





.Tpaginator{
	
padding: 2px;
border:0px solid;
margin: auto;
padding: 0;
text-align: left;
font-size: 16px;
display: inline-block; 

width: 100%;
    text-align: center;
	text-align-last: center;
}




.Tpaginator li{
list-style-type: none;
display: inline;
margin:0px !important;
margin-left:3px;

}



.Tpaginator a{
 
  display: inline-block;
  color: #666;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  text-align: center;
  border: 1px solid #BBB;
  min-width: 8px;
  padding: 0 7px;
  margin: 0 5px 0 0;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  background: #efefef;
  background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
  background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%);	
	
}
.Tpaginator a:hover{
  text-decoration: none;
  background: #FCFCFC;	
}

.Tpaginator a.prev.disabled,
.Tpaginator a.next.disabled,
.Tpaginator a.current{
  background: #666;
  color: #FFF;
  border-color: #444;
  box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
  cursor: default;

}






.Tpaginator a.disable, .Tpaginator a.disable:hover{
background: none;
margin-right:10px;	

cursor: default;

font-weight: bold !important;
}




.Tpaginator a.fin{
	
background:url(images/ico_paginacion.png) no-repeat top left;
background-position: -50px 0px;
background: none;
margin-right:10px;	

padding: 0px 5px;

color: #929292;	
border: 0px solid #9aafe5;
font-weight: bold;
}


.Tpaginator a.disable, .Tpaginator a.disable:hover{
background: none;
margin-right:10px;	

cursor: default;
color: #3E921F;

font-weight: bold !important;
}





.Tpaginator li.puntos{


	
padding:0px;



line-height:20px;
text-align:left;


		
width: 15px;
height:22px;


}


.TPassEye .pass-requirement {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid #dbe5f2;
    border-radius: 9px;
    background: #f8fbff;
}

.TPassEye .pass-requirement p {
    margin: 0 0 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.TPassEye .pass-requirement ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.TPassEye .pass-requirement li {
    display: flex;
    align-items: center;
    min-height: 18px;
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.TPassEye .pass-requirement li iconify-icon {
    position: static;
    flex: 0 0 auto;
    margin: 0 6px 0 0;
    color: #94a3b8;
    font-size: 16px;
}

.TPassEye .pass-requirement li span {
    color: inherit;
    font-weight: 500;
}

.TPassEye .pass-requirement li.valid,
.TPassEye .pass-requirement li.valid span,
.TPassEye .pass-requirement li.valid iconify-icon {
    color: #15803d;
    font-weight: 600;
}

.TPassEye .create-pass {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 1;
    transform: translateY(-50%);
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 520px) {
    .TPassEye .pass-requirement ul {
        grid-template-columns: 1fr;
    }
}



.TplaceHolder.invalid{
	
color: rgb(138, 47, 51) !important;
background-color: rgb(252, 216, 223) !important;
border: 1px solid rgb(208, 174, 181);

}

.TplaceHolder{
border-radius: 3px;
border: 1px solid #cfcfcf;	
}

.TplaceHolder input{
border-radius: 3px !important;
border: none !important;		
}

/* Estilos adicionales para los popups */
.popup-content {
    word-wrap: break-word;
}

.popup-content {
    word-wrap: break-word;
	display: flex;
    align-items: center;
    gap: 12px;
}

.popup-warning .popup-icon { color: #ff9800; }
.popup-danger .popup-icon { color: #f44336; }
.popup-success .popup-icon { color: #4caf50; }
.popup-info .popup-icon { color: #2196f3; }

.toast-notification {
    animation: slideIn 0.3s ease;
    pointer-events: none;
}

.toast-notification.toast-top-right { animation: slideInRight 0.3s ease; }
.toast-notification.toast-top-left { animation: slideInLeft 0.3s ease; }

@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.popup-input:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33,150,243,0.2);
} 
/* --- Ficha del articulo dentro de un aviso de error (TNetCom.componerError) ---
   El aviso de "no queda stock" tiene que decir DE QUE articulo habla: con el
   carrito lleno, una frase suelta no basta para saber cual ajustar. */

.popup-message .tnc-error-mensaje {
    margin: 0 0 14px;
}

.popup-message .tnc-error-ficha {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    text-align: left;
}

.popup-message .tnc-error-foto {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    flex: 0 0 auto;
}

.popup-message .tnc-error-datos {
    min-width: 0;
}

.popup-message .tnc-error-titulo {
    margin: 0 0 4px;
    font-weight: 600;
}

.popup-message .tnc-error-linea {
    margin: 0;
    font-size: 13px;
    color: #555;
}


@charset "utf-8";
/* CSS Document */

.Tprogress{position: relative; border: 1px #435F34; background-color: rgb(63, 59, 59); padding: 0px; width: 100px; top: 3px; height: 3px; }
.Tprogress .txt{position: absolute;  width: 100px; }
.Tprogress .pgr{background-color: #489924; height: 2px;}



/* TQuantity — selector de cantidad en pildora: − [n] +

   El mismo aspecto que ya tenia el selector de la ficha de devolucion, que es
   de donde sale: se extrajo para que las tres pantallas que lo usan --devolver,
   reembolsar y preparar un envio-- compartan control y no tres copias.

   Sin prefijo de componente A PROPOSITO: es un control del framework y tiene
   que verse igual dentro de una ficha, de un TForm o de un TOverlayWin, que
   cuelga fuera del componente que lo abrio. */

.TQuantity {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: #eef2f7;
}

.TQuantity .tq-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: background .15s ease;
}

.TQuantity .tq-btn:hover:not(:disabled) { background: #dbe4f0; }
.TQuantity .tq-btn:disabled { opacity: .4; cursor: not-allowed; }

.TQuantity .tq-btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* El tamaño va SOBRE el elemento que pinta el numero: la regla global con
   shorthand `font:` fija 12px a div, span, p y li, y heredarlo dejaria el
   numero mas pequeño que los iconos. */
.TQuantity .tq-num {
    min-width: 30px;
    height: 26px;
    padding: 0 2px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.TQuantity input.tq-num:focus {
    outline: none;
    background: #fff;
}

/* Las flechitas del input number se comen el espacio y no aportan nada:
   el control ya tiene sus dos botones. */
.TQuantity input.tq-num::-webkit-outer-spin-button,
.TQuantity input.tq-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.TQuantity input.tq-num { -moz-appearance: textfield; }

.TQuantity.is-disabled {
    opacity: .5;
    pointer-events: none;
}


/**
 * TRadioMenu — el grupo de radios, en línea o EN TARJETAS.
 *
 * Con `cards: true` cada opción deja de ser una línea y pasa a ser un recuadro
 * con su título, su explicación y una muestra de lo que hace. Lo pinta aquí y no
 * la hoja de cada pantalla porque el modo tarjeta es del control: la muestra la
 * pone quien lo declara, pero el recuadro, el resalte del elegido y la rejilla
 * son iguales en todas.
 *
 * Los colores salen de los tokens del panel (`--au-*`), con valor de reserva
 * para cuando el control se use fuera de `.adminui` --un overlay, por ejemplo,
 * que se pinta fuera del contenedor--.
 */

.TRadioMenu-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 10px;
    margin: 0;
}

/*
 * EL LABEL SOLO PONE EL RECUADRO.
 *
 * Colocar dentro manda `.radio-card-in`, porque el panel viste toda etiqueta con
 * un input dentro --`label:not(.switch):not(.TCheckbox):has(input)`, en
 * Tjquery/css/index.css-- con `align-items: center !important`, y contra un
 * !important no gana la especificidad. Con el envoltorio no hay pelea.
 */
.TRadioMenu-cards label.radio-card:not(.switch):not(.TCheckbox) {
    display: flex;
    padding: 11px 12px;
    border: 1px solid var(--au-border, #e9edf2);
    border-radius: var(--au-radius-sm, 12px);
    background: var(--au-surface, #fff);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, background .12s;
}

.TRadioMenu-cards label.radio-card:not(.switch):hover {
    border-color: var(--au-border-strong, #e2e8f0);
    background: var(--au-surface-2, #f8fafc);
}

/* LA ELEGIDA. El radio de dentro es de 13px: en un recuadro de 200 no se ve
   cuál está puesto sin marcar el borde entero. */
.TRadioMenu-cards label.radio-card.is-on:not(.switch) {
    border-color: var(--au-primary, #3b82f6);
    /* Fondo del mismo azul, muy diluido: el borde solo se ve en el contorno y
       en una rejilla de ocho recuadros iguales cuesta encontrar el elegido de
       un vistazo. Transparente para que no tape lo que haya debajo. */
    background: var(--au-primary-wash, rgba(59, 130, 246, .07));
    box-shadow: var(--au-shadow-ring, 0 0 0 3px rgba(59, 130, 246, .08));
}

/* Lo que de verdad coloca: una columna a la izquierda, con su hueco entre
   líneas. `width: 100%` porque el label lo centra si le deja el ancho libre. */
.TRadioMenu-cards .radio-card-in {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
    text-align: left;
}

/* La cabecera es UN flex de dos columnas con el radio en la izquierda, para que
   la explicación de debajo arranque en la misma vertical que el título. */
.TRadioMenu-cards .radio-card-h {
    display: flex;
    align-items: center;
    gap: 8px;
}

.TRadioMenu-cards .radio-card-h input {
    flex: 0 0 auto;
    margin: 0;
}

.TRadioMenu-cards .radio-card-h b {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--au-text, #0f172a);
}

.TRadioMenu-cards .radio-card-d,
.TRadioMenu-cards .radio-card-p {
    display: block;
    padding-left: 21px;          /* el ancho del radio + su hueco */
}

.TRadioMenu-cards .radio-card-d {
    font-size: 10px;
    line-height: 1.35;
    color: var(--au-text-soft, #64748b);
}

/* La muestra: lo que se verá en la tienda, a escala. */
.TRadioMenu-cards .radio-card-p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 26px;
    margin-top: 2px;
}

/* ── TARJETA COMPACTA: el dibujo manda ─────────────────────────────────
 *
 * Para elegir entre variantes que se reconocen de un vistazo --horizontal o
 * vertical, una columna o tres--. El icono arriba, el nombre debajo, y el radio
 * escondido pero presente: el <label> ya hace clicable la tarjeta entera, y
 * quitarlo del marcado dejaría el grupo sin teclado ni lector de pantalla.
 */
/* TODAS EN UNA FILA, repartiendo el ancho a partes iguales --las columnas las
   fija el propio control, una por opción--. Con un mínimo por tarjeta, dos
   opciones dentro de media columna de ficha se apilan una debajo de otra, que
   es lo contrario de lo que enseña una elección entre dos dibujos. */
.TRadioMenu-cards--compact {
    gap: 8px;
}

.TRadioMenu-cards--compact label.radio-card:not(.switch):not(.TCheckbox) {
    padding: 9px 8px;
}

.TRadioMenu-cards--compact .radio-card-in {
    align-items: center;
    text-align: center;
    gap: 3px;
}

.TRadioMenu-cards--compact .radio-card-in > b {
    font-size: 11px;
    font-weight: 500;
    color: var(--au-text-body, #1e293b);
}

.TRadioMenu-cards--compact .radio-card-i {
    display: block;
    font-size: 17px;
    line-height: 1;
    color: var(--au-text-faint, #94a3b8);
}

/* Elegida: el icono toma el color del acento, que es lo que se mira. */
.TRadioMenu-cards--compact label.radio-card.is-on .radio-card-i {
    color: var(--au-primary, #3b82f6);
}

.TRadioMenu-cards--compact .radio-card-in > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── EL RÓTULO DEL GRUPO ────────────────────────────────────────────────
   A fila completa y el primero, como el de cualquier campo del panel: es el
   nombre de lo que se está eligiendo, no una opción más de la rejilla. */
.TRadioMenu-cards > label.TRadioMenu-label {
    grid-column: 1 / -1;
    order: -1;
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    background: none;
}


.trule-monitor-dashboard-v2 {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.trule-monitor-dashboard-v2::-webkit-scrollbar {
    width: 6px;
}

.trule-monitor-dashboard-v2::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.trule-monitor-dashboard-v2::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.trule-monitor-dashboard-v2::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}


.Tscroll {position: relative;  min-height: 0px; min-width: 40px; clear: both; margin: 0; line-height: 0px; display: inline-block; box-sizing:border-box; }
.Tscroll .viewport {
position: relative;  
border:0px solid #0FC; 
min-height: 0px; 
min-width: 0px;  
overflow: hidden;  
z-index:1 ; 
display: inline-block; 
border: 0px;
line-height: 0px;
 /* box-sizing: border-box; */
}

.Tscroll .content {
position: relative; 
display: inline-block;
white-space: nowrap;
list-style: none;  
left: 0px; 
top: 0px; 

min-height: 100%;
min-width: 100%; 
 /* box-sizing: border-box; */
}



/*  background: transparent url(/imagenes/scroll/bg-scrollbar.png) no-repeat;  */
.scrollbar{	
position: absolute;  
z-index: 5 !important;
background-position: 0px 0px;
background: #000;

}

.Tscroll > .scrollbar.disabled { display: none !important; }

/*  BARRA VERTICAL */
.barY{


  width: 8px;
  height: 100%;
  /* bottom: 9px; */
  /* padding-bottom: 6px; */
  /* box-sizing: border-box; */
  /* border-bottom: 8px solid transparent; */
  top: 0px;
  right: 0px;
  
}


.barY .track{
height: 100%; 
width: 100%; 
background: transparent url(/js/Tscroll/images/bg-scroll.png)  left top no-repeat; 

}
 
.barY .thumb{position: relative; cursor: pointer; left: 0px; border-radius: 3px; background-color: #666666; width: 100%;  }
.barY .thumb .hash{position: absolute; top:50%; margin-top:-5px; left: 1px; right: 1px; z-index: 3; width: 100%; }



/*  BARRA HORIZONTAL   background-position: 100% 0;*/


.barX{ 
height: 100%;
width: 100%;
display: block;
  bottom: 0px;
  /* margin-top: -5px; */
}


.barX .track { 
background: transparent url(/js/Tscroll/images/bg-scroll-x.png) no-repeat left bottom; 
width: 100%; 
height: 100%; 
}

.barX .thumb {
position: relative; 
cursor: pointer;
border-radius: 3px;
background-color: #666666; 
height: 100%; 
}

.barX .thumb .hash{position: absolute; left:50%; margin-left:-5px; top: 1px; bottom: 1px; z-index: 3; height: 100%; }








.TSelect .wrap {
border: 0px;

white-space: normal;

display: inline-block;
position:relative;
outline: none;
background-color: #fff;
border: 1px solid #cfcfcf;
cursor: pointer;
border-radius: 3px;
box-sizing:border-box;


	padding-right: 20px;
	overflow:hidden;

	    border-radius: 6px;
    border: 1px solid #bcbec9;

	/* SUELO DE 31px Y SU HOLGURA, PARA TODO EL SITIO.

	   El padding de arriba es menor que el de abajo (1 contra 4) porque la
	   ficha de lo elegido ya trae 3px de margen superior: sumados dan los
	   mismos 4px por los dos lados, y el contenido queda centrado.
	   Es la altura a la que el control se lee a la misma linea que un <input>
	   o un <select> de al lado. Va como minimo y no como altura fija: en un
	   multiple cada eleccion añade una ficha y a partir de la segunda linea
	   hace falta sitio -- con la altura clavada, las de abajo se recortaban.

	   El !important es para que ningun formulario tenga que repetirlo: antes
	   cada hoja se lo redefinia con su propio valor y no habia dos selectores
	   iguales en la aplicacion. */
	min-height: 31px !important;
	padding: 1px 6px 4px;

}

/* SIN 'top': EL TEXTO SE CENTRA, NO SE EMPUJA.
   Habia un 'top: 5px' que bajaba la seleccion cinco pixeles respecto a su
   caja, asi que el nombre elegido quedaba descolocado frente a cualquier
   <input> o <select> de al lado. Que existiera una excepcion justo debajo
   --'.TSelect.multi ul { top: 0 }'-- ya decia que era un apaño: en un multiple
   estorbaba, y en uno simple tampoco hacia falta.

   El centrado lo pone el contenedor, que para eso alinea su contenido. */
.TSelect ul{
margin: 0px;
padding: 0px;
position: relative;
}



.Tmobile .TcontextMenu.select li{ padding: 5px 8px;}
.TcontextMenu.select li{ padding: 0px 8px;}


.TSelect.invalid   {
  color: rgb(138, 47, 51);
  background-color: rgb(252, 216, 223);
  border: 1px solid rgb(208, 174, 181);	   
	   
}



.TSelect .itemSelect{
	margin: 0px;
	font: bold 12px Arial, Verdana;
	color: #333;
	height: 24px;
	display: inline-block;
	border: 0px;
	width: 100%;
	background-color:transparent;
	line-height: 22px;
    padding-left: 4px;
	/* padding-top: 5px; */
	white-space: nowrap;
}


.Tmobile .TSelect .itemSelect{ line-height: 24px; }

.TSelect .itemSelect img{
margin-right: 5px;	
}

.TSelect.multi .itemSelect.on{   
	background-color: #8190a6;
	width: auto;
}




/* --------------MULTI------- */
.TSelect.multi { padding: 0px; min-height: 27px; }
.TSelect.multi ul{ padding: 0px;}
.TSelect.multi .itemSelect{
    display: inline-block;
	margin: 0px;
	font: bold 11px Arial, Verdana;
	color: #333;
	
	background-color: aliceblue;
	border-radius: 5px;
	margin-right: 5px;
	border: 1px solid #9daccc;
	margin-bottom: 2px;
	height: 11px;
	width: auto;
	padding: 2px 4px;
	
}

.TSelect.multi .itemSelect .name{
	margin-right: 20px;
}
 
.TSelect.multi .itemSelect .remove{
display: inline-block;
background: url(/images/close_item.png) no-repeat;
height: 11px;

width: 11px;
position: relative;
cursor: pointer;
top: 0px;
margin-left: 5px;	
margin-top: 0px;	
}


/*
.TSelect .writer:focus{display: inline-block; min-width: 20px;	}
*/

.TSelect.multi .itemSelect .remove:hover{
	background-position: 0px -24px ;
}

.TSelect.multi .itemSelect .remove:active{
	background-position: 0px -36px;
}

.TSelect .boton{ 
max-height: 20px;
position:absolute; 
right: 0px; 
margin: auto;
top: 0px;
bottom: 0px;
 
}

.Toverlay.TcontextMenu {
  border: 0px solid #ccc;
  border-radius: 6px !important; 
  max-height: 80%;
}
.Toverlay.TcontextMenu .itemSelect{
	height: 30px;
	padding: 0px;
	padding-left: 10px;	
}

.Toverlay.TcontextMenu span{
 padding: 8px 8px;
 font: normal 15px Arial, Verdana, Helvetica;	
}


/*-------------------------------------------------------------------------------*/

.TSelect.multi  ul.selection
{
	display: flex;
	flex-wrap: wrap;
}

.TSelect li, .TSelect-popup li
{
	height: 20px;
	user-select: none;
	position: relative;
	padding: 3px 5px 5px 5px;
	box-sizing: border-box;
	margin: 0px;
	color: #000;
	margin: 0px;
	
	border: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	
	display: flex;
    align-items: center;
	
}

.TSelect li:last-child
{
	/*border-radius:  0px 0px 5px 5px;*/
	border-radius:  5px;
}

/* LO ELEGIDO, CON SU HOLGURA, EN TODO EL SITIO.
   El padding general de `.TSelect li` (3px arriba, 5px abajo) esta pensado
   para las opciones del desplegable, donde las lineas van pegadas; la ficha de
   lo ya seleccionado necesita el mismo aire por los cuatro lados o el texto se
   ve descentrado dentro de su recuadro azul. */
.TSelect .wrap > .selection > li
{
	padding: 4px;
}

.TSelect.multi  ul.selection li
{
	display: inline-block;
	width: auto;
	background-color: #d6edff;
	border: 1px solid #aed8f8;
	/* Arriba y a la derecha: las fichas se reparten en varias lineas cuando
	   hay muchas elegidas, y sin separacion se leen como un bloque continuo.
	   Nada abajo ni a la izquierda, para que la primera quede pegada al borde
	   del recuadro y la ultima fila no deje un hueco muerto. */
	margin: 3px 3px 0px 0;
	border-radius: 5px;
	
	display: flex;
    align-items: center;
}




.TSelect span:focus{
	outline:none;
	
}


.TSelect li > img, .TSelect-popup li > img
{
	margin-right: 10px;
	
	max-width: 20px;
    object-fit: contain;

}
.TSelect li img
{
	box-sizing: border-box;
	margin-right: 5px;
	width: auto;
	height: 100%;
	max-width: 20px;
    object-fit: contain;

}



/*
.TSelect.withIcons .popup li
{
	box-sizing: border-box;
	padding: 5px 0px 5px 40px !important;
}
.TSelect.withIcons li
{
	background-repeat: no-repeat;
	background-size: 17px;
	background-position: 10px center;
	padding: 3px 0px 3px 40px !important;
}
	*/







.TSelect  ul.selection a.remove
{
	display: inline-block;
	background: url(/images/close_item.png) no-repeat;
	height: 11px;
	width: 11px;
	position: relative;
	cursor: pointer;
	top: 0px;
	margin-left: 5px;
	margin-top: 0px;
}
.TSelect.multi li.selected
{
	background-color: #9fc4e2 !important;
}



.TSelect.multi .writer.focused
{
	width: auto;
	min-width: 20px !important;
	color: #333;
	border: 0px;
	outline: none;
	cursor: default;
	display: inline-block;
	position: relative;

	background-color: transparent;
	color: #333;
	white-space: nowrap;
	font: normal 12px Arial, Verdana, Helvetica;
	line-height: 15.5px;
	height: 15px !important;
	
}

.TSelect .writer
{
	width: 100%;
	min-width: 20px !important;
	height: 20px;
	border: 0px;
	outline: none;
	cursor: default;
	display: inline-block;
	
	
	background-color: #fff;
	color: #333;
	white-space: nowrap;
	font: normal 12px Arial, Verdana, Helvetica;
	line-height: 15.5px;
	padding: 3px 5px 1px 5px;
		display: none;
}



.TSelect .writer .TSelect.multi .writer
{
	width: auto;
	min-width: 20px !important;
	height: 14px !important;
	position: relative;
	background-color: transparent;
}

.TSelect .cleaner
{
	cursor: pointer;
	width: 15px;
	right: 2px;
	position: absolute;
	top: 6px;
}






.TSelect-popup
{
	
	/* height: 100px; */
	outline: none;
	user-select: none;
	border-radius: 0px 0px 8px 8px;
	position: absolute;
	top: 100%;
	box-sizing: border-box;
	z-index: 1000000000;
	background-color: #fff;
	box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
	border-radius: 0% 0% 5px 5px;
	padding: 0px;
	margin-top: 0px;
	
	border-radius: 5px;
    overflow: hidden;
	
}


.TSelect-popup li:hover,
.TSelect-popup li.focused 
{
	background-color: #fdc4a5;
}


.TSelect-popup li
{
	height: 25px;
}

.TSelect-popup li > span
{
color:inherit;
}




.TSelect-popup.static
{
	box-shadow: none;
	width: 100%;
}

.TSelect .uil{
	
	    font-size: 48px;
position: absolute;
    right: 0px;
    transform: rotate(90deg);
    top: -12px;
}

.Overlay .TSelect .uil{
top: -15px;	

}






.TSelect.pending {
    border-bottom: 1px solid #f91919 !important;
    background: #ffeaec;
}

.TSelect li > span,
.TSelect .writer{
 
	color: inherit !important;
	    font-weight: 700;
    vertical-align: top; 
 
}

/* ── LA MINIATURA DE UNA OPCIÓN: 30×30 ─────────────────────────────────
 *
 * TSelect pinta `<img>` cuando la opción trae `image` o `icon`. Sin medida, la
 * imagen sale con el alto que le dé el atributo `height` del marcado y el ancho
 * que tenga el fichero: una foto apaisada de producto empujaba el nombre fuera
 * de la fila y cada opción medía distinto.
 *
 * Cuadrada y recortada: lo que interesa es reconocer el producto de un vistazo,
 * no ver la foto entera.
 */
/* UNA SOLA MEDIDA, Y CUADRADA.
 *
 * Había tres reglas peleándose por esta miniatura --`max-width: 20px` de una
 * recortaba el `width: 30px` de otra-- así que la caja no llegaba a ser
 * cuadrada y la imagen se recortaba de lado con `cover`. Aquí se fija una vez,
 * con `max-width`/`min-width` explícitos para que ninguna de las viejas la
 * estreche por detrás.
 *
 * La imagen CUBRE la caja: se recorta lo que sobra por el lado largo, que es
 * lo que hace que todas las miniaturas se vean del mismo tamaño. */
.TSelect-popup li > img,
.TSelect .selection li > img {
    box-sizing: border-box;
    width: var(--tselect-thumb, 24px);
    height: var(--tselect-thumb, 24px);
    min-width: var(--tselect-thumb, 24px);
    max-width: var(--tselect-thumb, 24px);
    object-fit: cover;
    border-radius: 4px;
    margin-right: 8px;
    flex: 0 0 auto;
    background: var(--au-surface-3, #f1f5f9);
}

.TSelect-popup li,
.TSelect .selection li {
    display: flex;
    align-items: center;
}

/* ── LA COLUMNA DE IMÁGENES: TODAS LAS OPCIONES O NINGUNA ──────────────
 *
 * Cuando solo algunas opciones traían imagen, las que no la tenían empezaban
 * 38px más a la izquierda y la lista quedaba con dos verticales --se lee
 * torcida aunque cada fila esté bien--. Es la regla de siempre: lo de debajo
 * empieza donde el título.
 *
 * `TSelect` pinta SIEMPRE un hueco (`img.opt-sin-icono`, el icono «imagen» de
 * Lucide en gris) en las opciones sin imagen, y marca la lista con `withIcons`
 * en cuanto UNA opción trae la suya. Aquí solo se decide si ese hueco se ve.
 *
 * `useIcon` en la config manda sobre lo automático: `true` enseña la columna
 * siempre; `false` la quita aunque haya imágenes.
 */
.TSelect-popup li > img.opt-sin-icono,
.TSelect .selection li > img.opt-sin-icono {
    display: none;
}

.TSelect-popup.withIcons li > img.opt-sin-icono,
.TSelect.withIcons .selection li > img.opt-sin-icono {
    display: inline-block;

    /* LA MISMA CAJA QUE UNA IMAGEN DE VERDAD, o no sirve de nada: el texto de
     * todas las opciones tiene que arrancar en la misma vertical.
     *
     * Medido cuando llevaba `padding: 4px` con el `content-box` heredado: el
     * hueco ocupaba 28px y la imagen real 20, así que el texto de las opciones
     * sin imagen empezaba 8px más a la derecha -- el mismo desnivel que este
     * hueco venía a arreglar, solo que al revés.
     *
     * El dibujo, `contain`: es un icono, no una foto, y recortarlo lo parte. */
    object-fit: contain;
    padding: 2px;

    /* Sin fondo ni transparencia: con `opacity: .55` sobre un gris claro el
     * icono no se veía, y un hueco que no se ve es un hueco en blanco. */
    opacity: 1;
    background: none;
}





.Tselect2 {
border: 0px;

white-space: normal;

display: inline-block;
position:relative;
outline: none;
background-color: #fff;
border: 1px solid #cfcfcf;
cursor: pointer;
border-radius: 3px;
min-height: 29px;
box-sizing:border-box;
    height: 24px;
	
	padding-right: 20px;
	overflow:hidden;
}

.Tselect2 ul{
margin: 0px;
padding: 0px;	
position: relative;
top: 5px;
padding: 0px;
}

.Tselect2.multi ul{
top: 0px;
}



.Tmobile .TcontextMenu.select li{ padding: 5px 8px;}
.TcontextMenu.select li{ padding: 0px 8px;}


.Tselect2.invalid   {
  color: rgb(138, 47, 51);
  background-color: rgb(252, 216, 223);
  border: 1px solid rgb(208, 174, 181);	   
	   
}



.Tselect2 .itemSelect{
	margin: 0px;
	font: bold 12px Arial, Verdana;
	color: #333;
	height: 24px;
	display: inline-block;
	border: 0px;
	width: 100%;
	background-color:transparent;
	line-height: 22px;
    padding-left: 4px;
	/* padding-top: 5px; */
	white-space: nowrap;
}


.Tmobile .Tselect2 .itemSelect{ line-height: 24px; }

.Tselect2 .itemSelect img{
margin-right: 5px;	
}

.Tselect2.multi .itemSelect.on{   
	background-color: #8190a6;
	width: auto;
}




/* --------------MULTI------- */
.Tselect2.multi { padding: 0px; min-height: 27px; }
.Tselect2.multi ul{ padding: 3px;}
.Tselect2.multi .itemSelect{
    display: inline-block;
	margin: 0px;
	font: bold 11px Arial, Verdana;
	color: #333;
	
	background-color: aliceblue;
	border-radius: 5px;
	margin-right: 5px;
	border: 1px solid #9daccc;
	margin-bottom: 2px;
	height: 11px;
	width: auto;
	padding: 2px 4px;
	
}

.Tselect2.multi .itemSelect .name{
	margin-right: 20px;
}
 
.Tselect2.multi .itemSelect .remove{
display: inline-block;
background: url(/images/close_item.png) no-repeat;
height: 11px;

width: 11px;
position: relative;
cursor: pointer;
top: 0px;
margin-left: 5px;	
margin-top: 0px;	
}


/*
.Tselect2 .writer:focus{display: inline-block; min-width: 20px;	}
*/

.Tselect2.multi .itemSelect .remove:hover{
	background-position: 0px -24px ;
}

.Tselect2.multi .itemSelect .remove:active{
	background-position: 0px -36px;
}

.Tselect2 .boton{ 
max-height: 20px;
position:absolute; 
right: 0px; 
margin: auto;
top: 0px;
bottom: 0px;
 
}

.Toverlay.TcontextMenu {
  border: 0px solid #ccc;
  border-radius: 6px; 
  max-height: 80%;
}
.Toverlay.TcontextMenu .itemSelect{
	height: 30px;
	padding: 0px;
	padding-left: 10px;	
}

.Toverlay.TcontextMenu span{
 padding: 8px 8px;
 font: normal 15px Arial, Verdana, Helvetica;	
}


/*-------------------------------------------------------------------------------*/

.Tselect2.multi > ul.selection
{
	display: flex;
	flex-wrap: wrap;
}

.Tselect2 li, .Tselect2-popup li
{
	height: 20px;
	user-select: none;
	position: relative;
	padding: 3px 5px 5px 5px;
	box-sizing: border-box;
	margin: 0px;
	color: #000;
	margin: 0px;
	
	border: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	
	display: flex;
    align-items: center;
	
}

.Tselect2 li:last-child
{
	/*border-radius:  0px 0px 5px 5px;*/
	border-radius:  5px;
}

.Tselect2.multi > ul.selection li
{
	display: inline-block;
	width: auto;
	background-color: #d6edff;
	border: 1px solid #aed8f8;
	margin: 0px 1px 1px 1px;
	border-radius: 5px;
	
	display: flex;
    align-items: center;
}




.Tselect2 span:focus{
	outline:none;
	
}


.Tselect2 li > img, .Tselect2-popup li > img
{
	margin-right: 10px;
	
	max-width: 20px;
    object-fit: contain;

}
.Tselect2 li img
{
	box-sizing: border-box;
	margin-right: 5px;
	width: auto;
	height: 100%;
	max-width: 20px;
    object-fit: contain;

}



/*
.Tselect2.withIcons .popup li
{
	box-sizing: border-box;
	padding: 5px 0px 5px 40px !important;
}
.Tselect2.withIcons li
{
	background-repeat: no-repeat;
	background-size: 17px;
	background-position: 10px center;
	padding: 3px 0px 3px 40px !important;
}
	*/







.Tselect2 > ul.selection a.remove
{
	display: inline-block;
	background: url(/images/close_item.png) no-repeat;
	height: 11px;
	width: 11px;
	position: relative;
	cursor: pointer;
	top: 0px;
	margin-left: 5px;
	margin-top: 0px;
}
.Tselect2.multi li.selected
{
	background-color: #9fc4e2 !important;
}



.Tselect2.multi .writer.focused
{
	width: auto;
	min-width: 20px !important;
	color: #333;
	border: 0px;
	outline: none;
	cursor: default;
	display: inline-block;
	position: relative;

	background-color: transparent;
	color: #333;
	white-space: nowrap;
	font: normal 12px Arial, Verdana, Helvetica;
	line-height: 15.5px;
	height: 15px !important;
	
}

.Tselect2 .writer
{
	width: 100%;
	min-width: 20px !important;
	height: 20px;
	border: 0px;
	outline: none;
	cursor: default;
	display: inline-block;
	position: absolute;
	
	background-color: #fff;
	color: #333;
	white-space: nowrap;
	font: normal 12px Arial, Verdana, Helvetica;
	line-height: 15.5px;
	padding: 3px 5px 1px 5px;
		display: none;
}



.Tselect2 .writer .Tselect2.multi .writer
{
	width: auto;
	min-width: 20px !important;
	height: 14px !important;
	position: relative;
	background-color: transparent;
}

.Tselect2 .cleaner
{
	cursor: pointer;
	width: 15px;
	right: 2px;
	position: absolute;
	top: 6px;
}






.Tselect2-popup
{
	
	/* height: 100px; */
	outline: none;
	user-select: none;
	border-radius: 0px 0px 8px 8px;
	position: absolute;
	top: 100%;
	box-sizing: border-box;
	z-index: 1000000000;
	background-color: #fff;
	box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
	border-radius: 0% 0% 5px 5px;
	padding: 0px;
	margin-top: 0px;
	
	border-radius: 5px;
    overflow: hidden;
	
}


.Tselect2-popup li:hover
{
	background-color: #fdc4a5;
}


.Tselect2-popup li
{
	height: 25px;
}

.Tselect2-popup li > span
{
color:inherit;
}




.Tselect2-popup.static
{
	box-shadow: none;
	width: 100%;
}

.Tselect2 .uil{
	
	    font-size: 48px;
position: absolute;
    right: 0px;
    transform: rotate(90deg);
    top: -12px;
}

.Overlay .Tselect2 .uil{
top: -15px;	

}






.Tselect2.pending {
    border-bottom: 1px solid #f91919 !important;
    background: #ffeaec;
}

.Tselect2 li > span,
.Tselect2 .writer{
 
	color: inherit !important;
	    font-weight: 700;
    vertical-align: top; 
 
}


/* ══════════════════════════════════════════════════════════════════════
   TStepProgress — los pasos de un proceso
   ══════════════════════════════════════════════════════════════════════

   TRES ESTADOS Y SE DISTINGUEN: hecho (relleno, con su marca), actual
   (marcado y con halo) y pendiente (apagado). Con solo dos, el paso en el
   que estás se ve igual que los que ya hiciste.

   Los colores salen de variables con respaldo, así que el control se viste
   solo dentro del portal del vendedor (--sl-verde) y sigue funcionando
   fuera, donde esas variables no existen.
   ────────────────────────────────────────────────────────────────────── */

.TStepProgress{
    --tsp-verde:      var(--sl-verde, #16a34a);
    --tsp-verde-flojo:var(--sl-verde-claro, #f0fdf4);
    --tsp-borde:      var(--sl-borde, #e8edf2);
    --tsp-texto:      var(--sl-texto, #0f172a);
    --tsp-suave:      var(--sl-texto-suave, #64748b);
    --tsp-tenue:      var(--sl-texto-tenue, #94a3b8);
    --tsp-panel:      var(--sl-panel, #ffffff);
}

.TStepProgress .container{ text-align:center; justify-content:center; }

.TStepProgress .progress-container{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    max-width:100%;
    width:100%;
    margin-bottom:6px;
}

/* La línea de fondo y la que se llena van DETRÁS de los círculos, y a la
   altura del círculo (18px), no a la mitad del bloque: con el rótulo debajo,
   el 50% cae sobre el texto. */
.TStepProgress .progress-container::before{
    content:"";
    position:absolute;
    top:18px; left:0;
    height:2px; width:100%;
    background:var(--tsp-borde);
    z-index:0;
}

.TStepProgress .TStepProgress-linea{
    position:absolute;
    top:18px; left:0;
    height:2px; width:0;
    background:var(--tsp-verde);
    transition:width .35s ease;
    z-index:0;
}

/* ── UN PASO ──────────────────────────────────────────────────────── */
.TStepProgress .circle{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    text-decoration:none;
    color:var(--tsp-tenue);
    font-size:12.5px;
    cursor:default;
}

.TStepProgress .circle .circle-num{
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px;
    margin-top:4px;
    border-radius:50%;
    border:2px solid var(--tsp-borde);
    background:var(--tsp-panel);
    color:var(--tsp-tenue);
    font-size:12.5px; font-weight:600;
    transition:.25s ease;
}

.TStepProgress .circle > div{
    max-width:15ch;
    line-height:1.35;
    color:var(--tsp-tenue);
}

/* HECHO: relleno, y el número se sustituye por la marca de verificación. */
.TStepProgress .circle.is-done .circle-num{
    background:var(--tsp-verde);
    border-color:var(--tsp-verde);
    color:#fff;
    font-size:0;                      /* se oculta el número, no el círculo */
}
.TStepProgress .circle.is-done .circle-num::after{
    content:"✓";
    font-size:14px;
    line-height:1;
}
.TStepProgress .circle.is-done > div{ color:var(--tsp-suave); }

/* Volver a un paso hecho SÍ se puede pulsar, y se nota. */
.TStepProgress .circle.is-done[href],
.TStepProgress .circle.is-done{ cursor:pointer; }
.TStepProgress .circle.is-done:hover .circle-num{ background:var(--tsp-verde); filter:brightness(.92); }

/* ACTUAL: marcado y con halo, para que se vea dónde estás sin contar. */
.TStepProgress .circle.is-current .circle-num{
    background:var(--tsp-verde);
    border-color:var(--tsp-verde);
    color:#fff;
    box-shadow:0 0 0 4px var(--tsp-verde-flojo);
}
.TStepProgress .circle.is-current > div{ color:var(--tsp-texto); font-weight:600; }

/* ── LOS BOTONES PROPIOS (opcionales) ─────────────────────────────── */
.TStepProgress .TStepProgress-botones{
    display:flex; justify-content:center; gap:10px;
    margin-top:14px;
}
.TStepProgress .TStepProgress-botones .btn[disabled]{ opacity:.45; cursor:default; }

/* En pantalla estrecha, los rótulos sobran: los círculos siguen contando. */
@media (max-width:640px){
    .TStepProgress .circle > div{ display:none; }
}





       .TStyledForm .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
       .TStyledForm .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
        }
       .TStyledForm .header h1 {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
            color: #1e293b;
        }
 .TStyledForm  .header-actions {
    display: inline-flex;
    position: absolute;
    right: 22px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}
      .TStyledForm  button {
		   border-image: none;
            padding: 10px 15px;
            border: 1px solid #e0e6ed;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            background-color: #fff;
            color: #1e293b;
                margin-left: 0px;
                    display: flex;
            align-items: center;
        }
       .TStyledForm .btn-main {
		    border-image: none;
            background-color: #1e293b;
            color: #fff;
            border-color: #1e293b;
        }
		 .TStyledForm .btn-main i{
			 color:#ffffff;
		 }
       .TStyledForm button:hover {
            background-color: #f0f4f8;
        }
      .TStyledForm  .btn-main:hover {
            background-color: #3e4c5b;
        }
       .TStyledForm .summary-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
       .TStyledForm .card {
         background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 20px;
    border: 1px solid #e0e6ed;
    display: flex;
   
    align-items: center;
    flex-direction: column;
        }
      .TStyledForm  .card-content h2 {
            font-size: 14px;
            font-weight: 500;
            margin: 0 0 5px 0;
            color: #64748b;
        }
       .TStyledForm .card-content-data{
          display: inline-flex;
        width: 100%;
        justify-content: space-around;
        align-items: center;
      }
       .TStyledForm .card p {
            font-size: 24px;
            font-weight: 700;
            margin: 0;
            color: #1e293b;
        }
      .TStyledForm  .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-top: 2px;
        }
       .TStyledForm .card-icon.blue { background-color: #e0f2fe; color: #007bff; }
       .TStyledForm .card-icon.green { background-color: #d1fae5; color: #065f46; }
       .TStyledForm .card-icon.yellow { background-color: #fef3c7; color: #b45309; }
       .TStyledForm .card-icon.purple { background-color: #ede9fe; color: #6d28d9; }

       .TStyledForm .server-table-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            padding: 20px;
            border: 1px solid #e0e6ed;
            overflow-x: auto;
        }
      .TStyledForm  .server-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            text-align: left;
        }
       .TStyledForm .server-table th {
            font-weight: 600;
            color: #64748b;
            padding: 15px 10px;
            border-bottom: 2px solid #e0e6ed;
            text-transform:  capitalize;
        }
       .TStyledForm .server-table td {
            padding: 15px 10px;
            border-bottom: 1px solid #f0f4f8;
            vertical-align: middle;
        }
      .TStyledForm  .server-name {
            font-weight: 600;
            color: #1e293b;
        }
      .TStyledForm  .server-address {
            font-size: 12px;
            color: #64748b;

            display: block;
            margin-top: 5px;
        }
       .TStyledForm .status-badge {
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 9999px;
            font-size: 12px;
            display: inline-block;
        }
      .TStyledForm  .status-badge.online {
            background-color: #d1fae5;
            color: #065f46;
        }
      
      .TStyledForm  .status-badge.stopped,
      .TStyledForm  .status-badge.offline {
            background-color: #fce7f3;
            color: #be185d;
        }
       .TStyledForm .action-buttons button {
            background-color: #f0f4f8;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            font-size: 16px;
            cursor: pointer;
            color: #64748b;
        }
      .TStyledForm  .action-buttons button:hover {
            background-color: #e2e8f0;
        }
      .TStyledForm  .database-list {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 12px;
            color: #64748b;
            line-height: 1.5;
        }
       .TStyledForm  .database-list a {            
            font-size: 12px;
            color: #64748b;
            line-height: 1.5;
        }
       .TStyledForm .database-list li {
            position: relative;
            padding-left: 15px;
        }
       .TStyledForm .database-list li::before {
            content: '\f1c0'; /* Unicode del �cono de base de datos */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: #007bff;
        }


       

  .TStyledForm .toolbar {
    display: flex;
    align-items: center;
    gap: 26px 11px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 0px solid #e0e6ed;
    flex-wrap: wrap !important; 
}


  .TStyledForm .toolbar select {
    padding: 10px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
}
  .TStyledForm .toolbar button {
    padding: 10px 15px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    background-color: #fff;
    color: #1e293b;
    margin-left: 0px;
}
  .TStyledForm .toolbar button:hover {
    background-color: #f0f4f8;
}

  .TStyledForm .header-actions button {
        padding: 10px 15px;
        border: 1px solid #e0e6ed;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        background-color: #fff;
        color: #1e293b;
    }
    .TStyledForm .header-actions .btn-primary {
        background-color: #1e293b;
        color: #fff;
        border-color: #1e293b;
    }
    .TStyledForm .header-actions button:hover {
        background-color: #f0f4f8;
    }
    .TStyledForm .header-actions .btn-primary:hover {
        background-color: #3e4c5b;
    }
    .TStyledForm .card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        padding: 20px;
        border: 1px solid #e0e6ed;
    }


    

    .TStyledForm .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        gap: 10px;
    }
    .TStyledForm .card-header h2 {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }
    .TStyledForm .card-content {
        font-size: 14px;
        line-height: 1.6;
    }
    .TStyledForm .form-section {
        margin-bottom: 20px;
    }
    .TStyledForm .form-section h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 10px 0;
        color: #1e293b;
        border-bottom: 1px solid #e0e6ed;
        padding-bottom: 10px;
    }
    .TStyledForm .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
.TStyledForm .form-field
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


     .TStyledForm .form-field input, 
    .TStyledForm .form-field select, 
    TStyledForm .form-field textarea {
       
        padding: 10px;
        border: 1px solid #e0e6ed;
        border-radius: 8px;
        font-size: 14px;
        color: #333;
        box-sizing: border-box;
        min-width: 0; 

           
    }

     
 .TStyledForm .form-field label{
       font-weight: 500;
        color: #64748b;
        font-size: 12px;
        white-space: nowrap;
     position: absolute;         
    left: 8px;         
    transition: 0.2s ease;
    pointer-events: none;
    color: #999;
    top: 12px;
}



        .TStyledForm input:focus + label,
        .TStyledForm input:not(:placeholder-shown) + label,
        .TStyledForm .has-value + label,
        .TStyledForm select:focus + label,
        .TStyledForm  select:not([value=""]) + label
        {
            top: -20px;
            left: 4px;
            font-size: 12px;
            color: #333;
        }


.TStyledForm .form-field:has(i) input
{
    padding-left: 35px;
}


   .TStyledForm  .form-field input:focus, .form-field textarea:focus {
        border-color: #007bff;
        outline: none;
    }
  .TStyledForm   .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }
  .TStyledForm   .form-actions .btn-cancel {
        background-color: #f0f4f8;
        color: #1e293b;
        border-color: #e0e6ed;
    }
   .TStyledForm  .form-actions .btn-primary {
        background-color: #1e293b;
        color: #fff;
        border-color: #1e293b;
    }
  .TStyledForm   .form-actions button:hover {
        background-color: #e2e8f0;
    }
   .TStyledForm  .form-actions .btn-primary:hover {
        background-color: #3e4c5b;
    }

.TStyledForm .toolbar-actions
{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}


/*--------------NET---------*/
.Ttab
{
	position: relative;
	flex-wrap: wrap;
	
}
.Ttab.net > ul{margin: 0px; padding: 0px;  }
	.Ttab.net > ul > li {
		height: 20px;
		overflow: hidden;
		background: none;
		display: inline-block;
		position: relative;
		padding-right: 5px;
		top: -4px;
		margin: 0px;
		z-index: 1;
	}

	.Ttab.net > ul > li a {
		position: relative;
		left: 5px;
		padding: 0;
		background: url(MOD_gestion/img/fondo_tabs.png?12) no-repeat right top;
		display: inline-block;
		padding-right: 5px;
		top: 0px;
		margin-top: 0px !important;
	}
		.Ttab.net > ul > li span {
			line-height: 22px;
			font: bold 11px sans-serif;
			padding: 5px;
			padding-right: 0px;
			background: url(MOD_gestion/img/fondo_tabs.png?12) no-repeat left top;
			display: inline-block;
			margin-left: -5px;
		}



	.Ttab.net > ul > li:hover a {
		background: url(MOD_gestion/img/fondo_tabs.png?12) no-repeat;
		background-position: 100% -21px;
	}
	.Ttab.net > ul > li:hover span {
		background: url(MOD_gestion/img/fondo_tabs.png) no-repeat;
		background-position: 0px -21px;
	}


	.Ttab.net > ul > li.current {
		height: 100%;
		top: -3px;
		background-color: #FFF;
		border: 1px solid #898c95;
		-webkit-box-sizing: border-box;
		border-bottom: 0px;
	}
 
.Ttab.net li.current a, .Ttab.net li.current span{ background: none; }
/*------------------------------*/



.Ttab .Tabselector
{
	position: relative;
	padding: 0px;
	z-index: 10;
	border-bottom: 4px solid #7f8c8d;
	margin: 0px;
	z-index: 100;

	box-sizing: border-box;
	display: flex;
	top: 5px;
    left: 0px;
}

.Ttab .Tabselector img {
	height: 9px;
	position: relative;
	margin-left: 10px;
	cursor: pointer;
}

.Ttab .Tabselector li
{
	position: relative;
	marging: 0px;
	padding-bottom: 0;
	padding: 5px 10px;
	margin-right: 5px;
	border-radius: 3px 3px 0px 0px;

	display: inline-block;
	background: #eff0f2;
	user-select: none;
}

.Ttab .TtabContainer
{
	/*padding: 14px;*/
	box-sizing: border-box;
	width: 100%;
	border: 0px solid #7f8c8d;

}


.Ttab .TtabContent
{
	position: relative;
	top: 0px;
	display: none;
	width: 100%;
	padding: 20px;
	
}

.Ttab .TtabContent.selected
{
	position: relative;
	top: 0px;
	display: inline-block;
}


.Ttab .Tabselector li a{
 
    white-space: nowrap;
	font:bold  11px Arial,sans-serif; 
	text-align: left; 
	color: #2c3e50; 
	text-decoration: none; 
	margin-top: 0px !important;
}


.Ttab .Tabselector li:hover a,
.Ttab .Tabselector li.on a{color: #fff;}

.Ttab .Tabselector li:hover,
.Ttab .Tabselector li.on{ background: #7f8c8d ; 	 }





.Ttab.borderBottom ul.Tabselector{ border-bottom: none; }
.Ttab.borderBottom .Tabselector li{ background: none;}
.Ttab.borderBottom .Tabselector li.on{
border-bottom: 3px solid #a40e5f;
color: #666;
}
.Ttab.borderBottom .Tabselector li a{ color: inherit; }
.Ttab.borderBottom .Tabselector li{ color: #bbb;}





/* HORIZONTAL */
.Ttab.hor .Tabselector{  display: inline-block; float:left; border-bottom: 0px;  top: 50px; }
.Ttab.hor .Tabselector li{

border-radius: 3px; 
padding: 7px; 
border: 1px solid transparent; 
display:block;
clear: both;
cursor: pointer;
width: 100%;
color: #2c3e50;

background: transparent;
box-sizing:border-box;
user-select: none;

}

	
	
	
	.Ttab.hor .Tabselector li.on {
	background: #eff0f2;
	background-color: #fff;
	border: 1px solid #e3dfef;
	z-index: 10 !important;
	border-right: 0px;
	border-left: 3px solid #fb148b;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

 

/* .Taccount .Ttab .Tabselector li:hover{background-color: #dbdcde; } */

.Ttab.hor .Tabselector li.on a{color: #2c3e50 !important; margin-left: -2px;}


.Ttab.hor .Tabselector li:hover{background: #eff0f2;}
.Ttab.hor .Tabselector li:hover a{color: #2c3e50;}


.Ttab.hor .TtabContainer{ display: inline-block; padding: 20px; padding-top: 40px;  }


 
/* TAB 2 */



.Ttab.light .Tabselector{
   margin-bottom: 30px;
}

.Ttab.light .Tabselector img {
    height: 17px;
    position: relative;
    margin-left: 10px;
    cursor: pointer;
    top: 4px;
    filter: opacity(0.5);
       transition: all 0.3s ease; /* Aplicar la transici�n a todos los elementos */
}

.Ttab.light .Tabselector li:hover img,
.Ttab.light .Tabselector li.on img
{
    filter: opacity(1);
}


.Ttab.light .Tabselector li a
{
    background-color: transparent !important;
       font-size: 16px;
    line-height: 23px;
     display:inline-block;
    color: #878787;
    transition: all 0.3s ease; /* Aplicar la transici�n a todos los elementos */
}

.Ttab.light .Tabselector li:hover a,
.Ttab.light .Tabselector li.on a
{    
    color: #000;
}


.Ttab.light .Tabselector li {
    background-color: transparent !important;
    padding: 5px 5px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px; /* Tama�o de texto inicial */
    position: relative;
    transition: all 0.3s ease; /* Aplicar la transici�n a todos los elementos */
    color: #000;
}

.Ttab.light .Tabselector li::after {
content: "";
    position: absolute;
    bottom: -5px; /* Desplazamiento del borde inferior 5px hacia abajo */
    left: 50%; /* Posicionamiento inicial del borde en el centro */
    width: 0; /* Ancho inicial del borde */
    height: 2px;
    background-color: #fb148b !important;
    transform: translateX(-50%); /* Centrar el borde en base a left: 50% */
    transition: width 0.3s ease; /* Transici�n del ancho */
}


.Ttab.light .Tabselector li.on {
    color: #000 !important;
}

.Ttab.light .Tabselector li.on::after {
    width: 100%;
}

.Ttab.light .Tabselector{
      border: 0;
}


   .TTabES6 {
     display: flex;
     flex-direction: column;
     border: 0px solid #ccc;
   
     position: relative;
     padding: 5px;
  
   }
   .TTabES6-header {
     display: flex;
     align-items: center;
     overflow-x: auto;
     scrollbar-width: none;
     position: relative;
     scroll-behavior: smooth; /* <-- scroll animado */
     margin-bottom: 10px;

   }
   .TTabES6-header::-webkit-scrollbar { display: none; }
   .TTabES6-tab {
     flex: 0 0 auto;
     padding: 6px 15px;
     cursor: pointer;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: color 0.3s ease;
     color:#3d3d3d ;
     font-weight: bold;
        
   }

    .TTabES6-tab:hover
    {    
        color: #000;
    
    }

    .TTabES6-tab i
    {
        width: 18px;   
        font-size: 18px;
    }
   .TTabES6-tab.active,
   .TTabES6-tab.active i,
   .TTabES6-tab.active span { color: #1976d2;  }



   /* LA BARRA QUE SEÑALA LA PESTAÑA ACTIVA.
      La mueve el JS --calcula posicion y ancho y deja que la transicion haga el
      viaje-- asi que NADIE MAS debe dibujar un subrayado: con dos, el de CSS
      aparece de golpe bajo la pestaña nueva mientras este todavia esta llegando.

      El color sale de una variable para que cada pantalla lo tiña con su acento
      sin tener que ganarle a este por especificidad. */
   .TTabES6-indicator {
     position: absolute;
     bottom: 0;
     height: 3px;
     background: var(--ttab-indicador, #1976d2);
     transition: left 0.3s, width 0.3s, top 0.3s ease;
     border-radius: 5px;
   }
   .TTabES6-close {
     margin-left: 1px;
     cursor: pointer;
     color: #999;
     font-size: 20px;
   }
/* EL MARCO Y EL ESPACIADO LOS PONE EL PANEL (uno por pestaña), NO EL
   CONTENEDOR NI EL COMPONENTE. Antes vivian en .TTabES6-content, que es UN
   SOLO elemento compartido por TODAS las pestañas abiertas a la vez -- asi
   que una pestaña no podia quitarse el marco sin quitarselo tambien a las
   demas. .TTabES6-panel es 1:1 con cada pestaña (TTabES6.js lo crea uno por
   cada add()/addComponent()), asi que el marco vive ahi: cada pestaña puede
   anular su propio panel sin tocar a las otras. Los componentes siguen yendo
   con padding 0 y border 0. */
.TTabES6-content
{
    flex: 1;
    /* padding: 20px; */
    /* top: 5px; */
    position: relative;
    /* background-color: #FFF; */
    /* border-radius: 8px; */
    /* border: 1px solid #cfcfcf; */
}

.TTabES6-panel
{
    /* TODO PANEL LLEVA RELLENO, TAMBIEN EL ANIDADO.
     *
     * Estuvo un tiempo a 0 en los anidados, con el argumento de que el panel de
     * fuera ya separaba y los 20px se sumarian nivel a nivel. Pero lo que se ve
     * es peor que un margen doble: el contenido de la pestaña de dentro queda
     * PEGADO al borde de la de fuera --la ficha de categoria abria con los
     * campos tocando la linea del panel-- y no hay forma de leer donde acaba
     * una pestaña y empieza la otra.
     *
     * Si en algun sitio el doble margen molesta, se quita ahi; el defecto es
     * tenerlo.
     *
     * EL BORDE VUELVE. Estuvo retirado un tiempo porque una tarjeta dentro de un
     * marco dibuja dos lineas paralelas separadas por el relleno, pero sin el la
     * pestaña se derrama sobre el fondo de la pagina y no se ve donde acaba
     * --se nota sobre todo desde que el portal del vendedor dejo de pintar su
     * propio fondo--. Donde el doble marco moleste, se anula en ese componente:
     * `.MiComponente .TTabES6-panel` gana por especificidad. */
    padding: 20px;
    background-color: #FFF;
    border-radius: 8px;
    border: 1px solid #bdc7d1;
}



   /* sombras interiores sin DIVs */
   .TTabES6-header.has-left::before,
   .TTabES6-header.has-right::after {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     width: 20px;
     pointer-events: none;
     z-index: 2;
   }
   .TTabES6-header.has-left::before {
     left: 0;
     background: linear-gradient(to right, rgba(0,0,0,0.15), transparent);
   }
   .TTabES6-header.has-right::after {
     right: 0;
     background: linear-gradient(to left, rgba(0,0,0,0.15), transparent);
   }

 .TTabES6 .shadow-left,
 .TTabES6 .shadow-right {
  position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
    height: 40px;
    color: #000000 !important;
    font-weight: 600;
    text-shadow: 1px 1px 4px #212121;
}
.TTabES6 .shadow-left { 
    left: 0; 
    /*background: linear-gradient(to right, rgba(0,0,0,0.24), transparent); */
}
.TTabES6 .shadow-right { 
    right: 0; 
    /*background: linear-gradient(to left, rgba(0,0,0,0.24), transparent); */

}

.TTabES6 .tab-loading { margin-left: -5px; animation: spin 1s linear infinite; display: inline-block; }
  @keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }


/* =======================================================================
 * Ttabla2 — HOJA LEGACY. No viste a TTableES6.
 *
 * Es la rejilla vieja (js/TTable/Ttabla2.js + el plugin de
 * Tjquery/js/main.js, que hace `this.find(".Ttabla2")`). NINGUNA de estas
 * reglas alcanza a TTableES6: ese componente pinta
 * `.TTableES6 > .tt-table`, y su hoja es Tbasic/css/TTable.css. Si vienes a
 * cambiar el aspecto de una tabla del panel, el fichero es aquel, no este.
 *
 * Dos cosas que conviene saber antes de tocar nada aqui:
 *
 * - Las imagenes de fondo apuntan a /MOD_gestion/img/, una carpeta que YA NO
 *   EXISTE en el arbol. Cada `url(...)` de este fichero es un 404 en cuanto
 *   una regla llega a casar; ademas la mitad estan escritas en relativo
 *   (`url(MOD_gestion/...)`), que resuelve contra la URL de la pagina y no
 *   contra la hoja, asi que apuntan a un sitio distinto en cada pantalla.
 *
 * - Aqui habia dos selectores SUELTOS, `.icon_doc` y `.datosProveedor td`,
 *   sin acotar a `.Ttabla2`. Esta hoja viaja en el bundle de arranque —esta
 *   cargada en TODAS las paginas del sitio—, asi que eran dos reglas
 *   globales de una rejilla retirada. Se acotan al final del fichero. No
 *   los usa nadie en el arbol (comprobado con grep sobre Modules/, lib/ y
 *   www_oneway/).
 * ======================================================================= */


/* CELDA EN EDICION */
.Ttabla2{
position:relative;  
padding: 0;  
overflow:hidden; 
border: 1px solid #a0a0a0; 
white-space:nowrap; 
cursor: default;
}

.Ttabla2.resizing{ cursor:col-resize;}



.Ttabla2 .hDiv{ position: absolute; background:url(/MOD_gestion/img/fondos_tabla.png)  top left; background-position: 0px -54px; padding-right: 50px;  width: 100%;  }

.Ttabla2 .bDiv{position: relative;  overflow: auto; clear:both; z-index: 1; }

.Ttabla2 .pDiv{
position: relative; 
overflow: hidden; 
clear: both; 
height: 32px;
top: 24px;
background: url(MOD_gestion/img/fondos_tabla.png) 0 -103px;
}
.Ttabla2 .pGroup{position:relative; top: 8px; vertical-align:top;   display:inline-block; vertical-align:central; height: 22px;   margin: 0px 5px; }
.Ttabla2 .pGroup span{color:#000 !important;}

.Ttabla2 .separator{position:relative; top: 8px; display:inline-block; margin: 0px 5px ; border-left: 1px solid #cccccc; border-right: 1px solid #ffffff; height: 18px; }

.Ttabla2 div.pButton{
position:relative;
border: 1px solid transparent;

float: left;
width: 22px;
height: 20px;
cursor: pointer;
overflow: hidden;}

.Ttabla2 div.pButton:hover{
border: 1px solid #cccccc; 

}



.Ttabla2 .pSearch{ background:url(MOD_gestion/img/magnifier.png) no-repeat 3px 2px;  }
.Ttabla2 .pFirst{ background:url(MOD_gestion/img/first.gif) no-repeat 3px 2px;  }
.Ttabla2 .pPrev{ background:url(MOD_gestion/img/prev.gif) no-repeat 3px 2px;  }


.Ttabla2 .pcontrol input{ text-align:right;  }

.Ttabla2 .pNext{ background:url(MOD_gestion/img/next.gif) no-repeat 3px 2px;  }
.Ttabla2 .pLast{ background:url(MOD_gestion/img/last.gif) no-repeat 3px 2px;  }	
	
.Ttabla2 .pRefresh{ background:url(MOD_gestion/img/load.png) no-repeat 3px 2px;  }	
.Ttabla2 .pLoading{display:none; background:url(MOD_gestion/img/load.gif) no-repeat 3px 2px;  }	
.Ttabla2 .msg_server{position: relative; display:block; color: #000;  top: 3px; }

.Ttabla2 input,.Ttabla2 select{ background-color:#FFF; border: 1px solid #999; color:#000;}



.Ttabla2 div.pButton span {
border: 1px solid transparent;
float: left;
width: 20px;
height: 25px;
display: block;
}
.Ttabla2 div.pButton span:hover{
border-left: 1px solid #ffffff; 
border-top: 1px solid #ffffff;
}




.Ttabla2 table{
position:relative ;
table-layout: fixed; 
border-collapse: separate;
border-spacing: 0; 
vertical-align: baseline;
float:left ;
display:block;
}




.Ttabla2 th{
	background:url(/MOD_gestion/img/fondos_tabla.png)  top left;
	background-position: 0px -54px;	
	color: #000;
	font: bold 11px sans-serif; 
	border: 0;	
	padding: 0px 0px;
	margin:0; 
	position: relative;
	height: 24px;
	overflow:hidden;
	white-space:nowrap;
}
.Ttabla2 th:hover {background-position: -0px -79px !important;}
.Ttabla2 th.l{border-left:0px;}
.Ttabla2 th.r{border-right:0px;}


.Ttabla2 td{
	position: relative;
	height: 15px; 
	text-align:center ;
	margin: 0px; 
	padding: 0px;		
	border: 0;		
	color: #000;
	overflow:hidden;
	height: 15px;
	white-space:nowrap;
}
.Ttabla2 td, .Ttabla2 th{	
border-left: 1px solid #fff; 
border-right: 1px solid #dddddd;
}



.Ttabla2 .iDiv{position:absolute; top:0px; background-color: #666;width:2px; height: 100px; display: none}
.Ttabla2 th .cell{font: bold 11px sans-serif; }
.Ttabla2 .cell{ min-width:10px; padding: 3px 3px; overflow:hidden; text-align:center;  color: #000; }

.Ttabla2 .cell.sizer{position:relative !important; }
/*
.Ttabla2 .cell{ top: 0px; left: 0px; color: #000}
*/


/*  BORDES TABLA */
.Ttabla2 td .l{border-left:  0px solid #999; }
.Ttabla2 td .r{border-right: 0px solid #999; }

.Ttabla2 .sorted{background-position: -0px -79px}
.Ttabla2 th .cell.asc{ background: url(/MOD_gestion/img/up.png)  no-repeat center top;}
.Ttabla2 th .cell.desc{ background: url(/MOD_gestion/img/dn.png)  no-repeat center top;}

.Ttabla2 .even .sorted{ background-color: #f3f3f3}
.Ttabla2 .odd  .sorted{ background-color: #e3e3e3}



.Ttabla2 tr.even{background-color: #fff }
.Ttabla2 tr.odd{background-color: #f0f0f0}

/*
.Ttabla2 tr.selected td{background-color: #d5effc;  border-bottom: 0px solid #a8d8eb;	}
*/

.Ttabla2 tr.selected td{background-color: #3399ff !important;	}
.Ttabla2 tr.selected .cell{ color: #fff !important;	}

/* FILA DE HEADERS */
.Ttabla2 .edit_cell{
position: absolute;
font: 10px Verdana;	
border: 1px solid #eeb130;
background-color: #fff4db;
padding: 0px;
margin: 0px;
z-index:1000;
text-align:left;
top: 0px;
display: block;
}


/* Acotados a la rejilla: eran globales y esta hoja se carga en todo el sitio.
   Ver la nota de cabecera. */
.Ttabla2 .icon_doc{
position: absolute;
top: 3px;
background: url(MOD_gestion/img/estado_doc.png) no-repeat; 
width: 10px; 
height: 10px; 
right: 5px ;
vertical-align:central;
}
.Ttabla2 .icon_doc.info_detalles{ background-position: -30px 0px; width: 14px; height: 11px; left: 0px; }
.Ttabla2 .icon_doc.pendiente{ background-position: -10px 0px;}
.Ttabla2 .icon_doc.pagado_parcial{ background-position: -20px 0px;}
.Ttabla2 .icon_doc.pagado{ background-position: 0px 0px;}
.Ttabla2 .icon_doc.emailed{ background-position: 0px 0px;}
.Ttabla2 .icon_doc.emailed{ background-position: 0px 0px;}
.Ttabla2 .icon_doc.info_prov{ background-position: -44px 0px; width: 15px; height: 12px; left: 0px;}

.Ttabla2 .datosProveedor td{ vertical-align: central;  text-align:left; height: 15px;}



/* =======================================================================
 * TTable — hoja GENERAL de TTableES6
 *
 * Vale para cualquier TTableES6 de cualquier pantalla: la sirve el bundle de
 * arranque (lib/Module.php concatena todos los .css de esta carpeta dentro de
 * un solo `style name="Tbasic"`), asi que esta presente en el admin, en el
 * area de cliente y dentro de overlays.
 *
 * ---------------------------------------------------------------------
 * QUE PINTA TTableES6 DE VERDAD (comprobado en el navegador, no supuesto)
 * ---------------------------------------------------------------------
 *   div.Component.TTableES6.TComponentES6          <- basicRender()
 *     div.toolbar-container.toolbar.TStyledForm    <- renderToolbar()
 *       div.toolbar-buttons
 *         div.search-box  >  i  +  input#var_search
 *         button.btn-primary.tt-btn
 *         button#toggle_filters.btn-secondary.tt-btn
 *         select#totalCount.tt-pagesize
 *       div.toolbar-filters                        (TForm de filtros, oculto)
 *     table.tt-table
 *       thead > tr.TTableRow.TComponentES6
 *                 th.TCell.TComponentES6[column-id]
 *       tbody > tr.TTableRow.TComponentES6[.selected]
 *                 td.TCell.TComponentES6[column-id][.loading]
 *                    a.action.action-edit  >  iconify-icon
 *                    span.badge.badge-*
 *     div.Component.TPaginator.TComponentES6
 *
 * La clase de la raiz sale de constructor.name (TComponentES6.basicRender), y
 * `tt-table` la pone _renderTable(). Las de fila y celda las ponen TTableRow y
 * TCell por el mismo mecanismo.
 *
 * NO existe ninguna clase `.TTable` en este DOM: las reglas `.TTable …` que
 * habia aqui vestian al componente VIEJO (js/TTable/TTable.js, el del plugin
 * `$(x).TTable()`), que todavia usan TDownloads, TSessionManager y las tablas
 * de TArticles. Se conservan al final, marcadas como legacy.
 *
 * ---------------------------------------------------------------------
 * POR QUE LOS SELECTORES SON CADENAS DE `>`
 * ---------------------------------------------------------------------
 * 1. ESPECIFICIDAD. A TTableES6 lo estaban vistiendo reglas ajenas mas
 *    especificas que un `.TTableES6 td`:
 *        Tjquery  ::  table th   { font: 600 14px Arial; padding: 5px }
 *        Tjquery  ::  table td   { font: 12px Arial; background: #f4f6f8 }
 *        Tadmin   ::  .Tadmin tbody td   { background: #f4f6f8; padding: 4px }
 *        Tadmin   ::  .Tadmin table td span { font: bold 12px Arial; color:#666 }
 *    `.Tadmin tbody td` pesa (0,1,2); `.TTableES6 > .tt-table > tbody > tr > td`
 *    pesa (0,2,4) y gana sin recurrir a !important.
 *
 * 2. AISLAMIENTO. Dentro de una celda puede haber otro componente con sus
 *    propias tablas (un TForm, otro TTableES6 anidado). La cadena de `>`
 *    llega exactamente a la tabla de ESTE componente y no baja a las de
 *    dentro. La regla vieja `.TTableES6 table { display:none }` no lo hacia:
 *    ocultaba tambien la tabla de cualquier componente anidado.
 *
 * ---------------------------------------------------------------------
 * DOS TRAMPAS DEL PROYECTO QUE CONDICIONAN ESTA HOJA
 * ---------------------------------------------------------------------
 * - SUELO TIPOGRAFICO DE 10px. Nada baja de ahi. El rotulo mas pequeño de la
 *   tabla es la cabecera, en var(--au-fs-label, .65rem) = 10.4px, y el badge,
 *   en var(--au-fs-micro, .625rem) = 10px justos.
 *
 * - UN SPAN NO HEREDA EL TAMAÑO. Hay una regla global con el shorthand `font:`
 *   (Tjquery: `div, span, p, ul, li, ol { font: 12px Inter, sans-serif }`) que
 *   FIJA 12px en cada span/div de dentro de una celda, pase lo que pase con el
 *   font-size del <td>. Por eso el tamaño se repite sobre los hijos directos
 *   de la celda, que son los que pintan el texto de verdad.
 *
 * ---------------------------------------------------------------------
 * COLORES: LOS DEL SISTEMA DEL ADMIN, CON FALLBACK
 * ---------------------------------------------------------------------
 * Las variables --au-* se declaran sobre `.adminui`, no sobre :root
 * (AdminUI.css lo hace a proposito, para huella global cero). Una tabla del
 * area de cliente NO las tiene, asi que cada var() lleva su valor de reserva
 * —el mismo que declara AdminUI— y la tabla se ve igual dentro y fuera del
 * panel.
 * ======================================================================= */


/* =======================================================================
 * 1. LA RAIZ
 * ======================================================================= */

.TTableES6 {
    font-family: var(--au-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--au-text-body, #1e293b);

    /* LA TABLA ANCHA SCROLLEA AQUI DENTRO, NUNCA LA PAGINA.
       Medido en el navegador antes de tocar nada: la tabla de WebSockets
       —catorce columnas— hacia 1185px dentro de un panel de 1189 y empujaba
       el documento a 1494px contra 1378 de ventana; el boton "Eliminar" de su
       barra quedaba fuera de la pantalla y habia que desplazar el SITIO
       ENTERO para llegar a el.
       El componente no monta envoltorio propio, asi que la caja que scrollea
       tiene que ser la raiz. Se puede porque lo unico que se sale de una
       celda hacia fuera son los desplegables de TSelect, y esos se cuelgan
       del <body> (TSelect.js:968, `$("body").append(popup)`), no de la
       celda: no los recorta. */
    max-width: 100%;
    overflow-x: auto;
}


/* =======================================================================
 * 2. LA BARRA DE ACCIONES
 *
 * El aspecto (fondo, borde, radio, padding) lo ponia renderToolbar() con
 * $toolbar.css({...}) EN LINEA, de modo que ninguna hoja podia cambiarlo sin
 * !important. Ahora el JS solo pone las clases y el aspecto vive aqui.
 * ======================================================================= */

.TTableES6 > .toolbar-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--au-surface-2, #f8fafc);
    border: 1px solid var(--au-border, #e9edf2);
    border-radius: var(--au-radius-sm, 12px);
}

/* margin-left:auto empuja el grupo al borde derecho de la barra; el buscador
   ya reclama su parte con flex:1. */
.TTableES6 > .toolbar-container .toolbar-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* --- Buscador ------------------------------------------------------- */

.TTableES6 > .toolbar-container .search-box {
    position: relative;
    flex: 1;
    min-width: 160px;
    max-width: 300px;
}

.TTableES6 > .toolbar-container .search-box i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--au-text-faint, #94a3b8);
    pointer-events: none;
}

.TTableES6 > .toolbar-container .search-box input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px 7px 30px;
    font-family: inherit;
    font-size: var(--au-fs-body, 0.75rem);
    color: var(--au-text-body, #1e293b);
    background: var(--au-surface, #ffffff);
    border: 1px solid var(--au-border-strong, #e2e8f0);
    border-radius: var(--au-radius-input, 10px);
    outline: none;
    transition: border-color var(--au-transition, 0.15s), box-shadow var(--au-transition, 0.15s);
}

.TTableES6 > .toolbar-container .search-box input:focus {
    border-color: var(--au-primary, #3b82f6);
    box-shadow: var(--au-shadow-ring, 0 0 0 3px rgba(59, 130, 246, 0.08));
}

.TTableES6 > .toolbar-container .search-box input::placeholder {
    color: var(--au-text-faint, #94a3b8);
}

/* --- Botones -------------------------------------------------------- */

/* Solo geometria y tipografia: el COLOR sigue saliendo de .btn-primary /
   .btn-secondary (TStyledForm.css), que es lo que el resto del panel usa. */
.TTableES6 > .toolbar-container .tt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-family: inherit;
    font-size: var(--au-fs-body, 0.75rem);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--au-radius-input, 10px);
    cursor: pointer;
    transition: filter var(--au-transition, 0.15s), background var(--au-transition, 0.15s);
}

.TTableES6 > .toolbar-container .tt-btn:hover { filter: brightness(0.94); }
.TTableES6 > .toolbar-container .tt-btn iconify-icon { font-size: 15px; }

/* El toggle de filtros, cuando el panel esta desplegado.
   Se señala con un ANILLO, no dandole la vuelta al color: `.btn-secondary`
   declara `color:#1890ff !important` y ademas `background:white !important`
   para :hover/:focus (Tjquery/css/index.css:1999). Pintar el boton de azul
   dejaba el rotulo "Filtros" azul sobre azul —comprobado en pantalla: se leia
   una pastilla vacia—, y al pasar el cursor por encima el fondo volvia a
   blanco. El anillo no lo pisa nadie y se mantiene en los tres estados. */
.TTableES6 > .toolbar-container #toggle_filters.active {
    background: var(--au-tint-info-bg, #dbeafe);
    box-shadow: inset 0 0 0 1.5px var(--au-primary, #3b82f6);
}

/* --- Tamaño de pagina ----------------------------------------------- */

.TTableES6 > .toolbar-container .tt-pagesize {
    height: auto;
    padding: 7px 9px;
    font-family: inherit;
    font-size: var(--au-fs-body, 0.75rem);
    color: var(--au-text-muted, #475569);
    background: var(--au-surface, #ffffff);
    border: 1px solid var(--au-border-strong, #e2e8f0);
    border-radius: var(--au-radius-input, 10px);
    cursor: pointer;
}

/* --- Panel de filtros ------------------------------------------------ */

.TTableES6 > .toolbar-container .toolbar-filters {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--au-border-strong, #e2e8f0);
}


/* =======================================================================
 * 3. LA TABLA: UNA TARJETA
 *
 * Sin envoltorio propio (el componente no lo tiene), asi que el borde y el
 * radio van sobre la <table>. Eso obliga a border-collapse:separate —en el
 * modelo colapsado el radio no recorta— y a redondear a mano las cuatro
 * celdas de las esquinas. Los divisores de fila van entonces en las celdas,
 * no en el <tr>: en el modelo separado los bordes de fila y de grupo de
 * filas se ignoran.
 * ======================================================================= */

/* Una tabla sin filas no se enseña. Regla heredada, ahora acotada a la tabla
   propia: antes era `.TTableES6 table`, que ocultaba tambien la de cualquier
   componente anidado en una celda. */
.TTableES6 > .tt-table { display: none; }
.TTableES6 > .tt-table:has(td) { display: table; }

.TTableES6 > .tt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--au-surface, #ffffff);
    border: 1px solid var(--au-border, #e9edf2);
    border-radius: var(--au-radius-sm, 12px);
    font-size: var(--au-fs-base, 0.78rem);
}

/* --- Cabecera -------------------------------------------------------- */

/* Mayusculas pequeñas y apagadas: la cabecera rotula, no compite con el dato.
   El text-align NO se toca — lo pone TCell en linea, columna a columna. */
.TTableES6 > .tt-table > thead > tr > th {
    padding: 9px 11px;
    background: var(--au-surface-2, #f8fafc);
    color: var(--au-text-muted, #475569);
    font-family: inherit;
    font-size: var(--au-fs-label, 0.65rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    border-bottom: 2px solid var(--au-border, #e9edf2);
}

/* El shorthand `font:` global tambien alcanza a lo que va DENTRO del <th>. */
.TTableES6 > .tt-table > thead > tr > th > span,
.TTableES6 > .tt-table > thead > tr > th > div,
.TTableES6 > .tt-table > thead > tr > th > a,
.TTableES6 > .tt-table > thead > tr > th > label {
    font-family: inherit;
    font-size: var(--au-fs-label, 0.65rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit;
}

.TTableES6 > .tt-table > thead > tr > th:first-child { border-top-left-radius: var(--au-radius-sm, 12px); }
.TTableES6 > .tt-table > thead > tr > th:last-child  { border-top-right-radius: var(--au-radius-sm, 12px); }

/* Columna ordenable: el cursor y la flecha que ya pone _addSortEvents(). */
.TTableES6 > .tt-table > thead > tr > th[sort] { cursor: pointer; }
.TTableES6 > .tt-table > thead > tr > th.arrow-up::after  { content: " \2191"; opacity: 0.55; }
.TTableES6 > .tt-table > thead > tr > th.arrow-dn::after  { content: " \2193"; opacity: 0.55; }

/* Fila de filtros de cabecera (renderTableFilters). */
.TTableES6 > .tt-table > thead > tr.table-filters > th {
    padding: 6px 8px;
    background: var(--au-surface, #ffffff);
    border-bottom: 1px solid var(--au-border, #e9edf2);
    text-transform: none;
    letter-spacing: 0;
}

/* --- Cuerpo ---------------------------------------------------------- */

.TTableES6 > .tt-table > tbody > tr {
    transition: background var(--au-transition, 0.15s);
}

.TTableES6 > .tt-table > tbody > tr > td {
    padding: 8px 11px;
    /* transparente a proposito: el color de la fila (hover, seleccion) tiene
       que verse. Tadmin pintaba cada celda de #f4f6f8 y tapaba los dos. */
    background: transparent;
    color: var(--au-text-body, #1e293b);
    font-family: inherit;
    font-size: var(--au-fs-base, 0.78rem);
    vertical-align: middle;
    border-bottom: 1px solid var(--au-divider, #f1f5f9);
}

.TTableES6 > .tt-table > tbody > tr:last-child > td { border-bottom: 0; }
.TTableES6 > .tt-table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--au-radius-sm, 12px); }
.TTableES6 > .tt-table > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: var(--au-radius-sm, 12px); }

.TTableES6 > .tt-table > tbody > tr:hover > td { background: var(--au-surface-2, #f8fafc); }

.TTableES6 > .tt-table > tbody > tr.selected > td {
    background: var(--au-tint-info-bg, #dbeafe);
    color: var(--au-tint-info-fg, #2563eb);
}

/* Celda esperando respuesta del servidor (TTableRow le pone .loading). */
.TTableES6 > .tt-table > tbody > tr > td.loading {
    opacity: 0.45;
    pointer-events: none;
}

/* --- El texto de dentro de la celda ---------------------------------- */

/* Aqui esta el motivo de la lista larga: el shorthand `font:` de la regla
   global fija 12px Inter en cada span/div/p/li, asi que el tamaño hay que
   ponerlo sobre el elemento que pinta el texto, no solo sobre el <td>.
   Solo HIJOS DIRECTOS: mas abajo ya no es texto de la tabla sino el interior
   de otro componente (un TSelect, un TCheckbox), que trae el suyo. */
.TTableES6 > .tt-table > tbody > tr > td > span,
.TTableES6 > .tt-table > tbody > tr > td > div,
.TTableES6 > .tt-table > tbody > tr > td > p,
.TTableES6 > .tt-table > tbody > tr > td > b,
.TTableES6 > .tt-table > tbody > tr > td > strong,
.TTableES6 > .tt-table > tbody > tr > td > small,
.TTableES6 > .tt-table > tbody > tr > td > a,
.TTableES6 > .tt-table > tbody > tr > td > label {
    font-family: inherit;
    font-size: var(--au-fs-base, 0.78rem);
    color: inherit;
}

/* Las cifras cuadran en columna: tabular-nums y sin partirse. Se aplica por
   el tipo de columna, que TCell ya alinea a la derecha. */
.TTableES6 > .tt-table > tbody > tr > td[column-id] {
    font-variant-numeric: tabular-nums;
}

/* Enlace de dato (no de accion). */
.TTableES6 > .tt-table > tbody > tr > td > a:not(.action) {
    color: var(--au-primary-hover, #2563eb);
    text-decoration: none;
}
.TTableES6 > .tt-table > tbody > tr > td > a:not(.action):hover { text-decoration: underline; }

/* --- Acciones de fila ------------------------------------------------ */

/* Un boton-icono redondo y apagado que se enciende al pasar por encima: son
   varios por fila y no pueden pesar mas que el dato. */
.TTableES6 .tt-table td > a.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    font-size: var(--au-fs-label, 0.65rem);
    color: var(--au-text-soft, #64748b);
    background: transparent;
    border-radius: var(--au-radius-chip, 30px);
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    transition: background var(--au-transition, 0.15s), color var(--au-transition, 0.15s);
}

.TTableES6 .tt-table td > a.action + a.action { margin-left: 2px; }
.TTableES6 .tt-table td > a.action iconify-icon { font-size: 16px; }

.TTableES6 .tt-table td > a.action:hover {
    background: var(--au-surface-3, #f1f5f9);
    color: var(--au-primary-hover, #2563eb);
}

/* Borrar avisa con color, no con tamaño. */
.TTableES6 .tt-table td > a.action-delete:hover {
    background: var(--au-tint-danger-bg, #fee2e2);
    color: var(--au-danger-hover, #dc2626);
}

/* --- Badges ---------------------------------------------------------- */

/* Mismo criterio que .au-badge del sistema del admin. Las variantes toman los
   tintes --au-tint-*; el badge sin variante queda neutro. */
.TTableES6 .tt-table td > span.badge {
    display: inline-block;
    padding: 2px 9px;
    font-size: var(--au-fs-micro, 0.625rem);
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    border-radius: var(--au-radius-chip, 30px);
    background: var(--au-tint-neutral-bg, #e9edf2);
    color: var(--au-tint-neutral-fg, #64748b);
}

.TTableES6 .tt-table td > span.badge-success,
.TTableES6 .tt-table td > span.badge-ok      { background: var(--au-tint-success-bg, #dcfce7); color: var(--au-tint-success-fg, #15803d); }
.TTableES6 .tt-table td > span.badge-warning,
.TTableES6 .tt-table td > span.badge-pending { background: var(--au-tint-warning-bg, #fef3c7); color: var(--au-tint-warning-fg, #b45309); }
.TTableES6 .tt-table td > span.badge-danger,
.TTableES6 .tt-table td > span.badge-error   { background: var(--au-tint-danger-bg, #fee2e2);  color: var(--au-tint-danger-fg, #dc2626); }
.TTableES6 .tt-table td > span.badge-info    { background: var(--au-tint-info-bg, #dbeafe);    color: var(--au-tint-info-fg, #2563eb); }
.TTableES6 .tt-table td > span.badge-progress{ background: var(--au-tint-indigo-bg, #e0e7ff);  color: var(--au-tint-indigo-fg, #4338ca); }

/* --- Selector de fila ------------------------------------------------ */

.TTableES6 .tt-table td .row-selector,
.TTableES6 .tt-table th input[type="checkbox"],
.TTableES6 .tt-table td input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--au-primary, #3b82f6);
}


/* =======================================================================
 * 4. EL PAGINADOR
 *
 * Su aspecto es cosa de Tpaginator.css; aqui solo el hueco que lo separa de
 * la tabla.
 * ======================================================================= */

.TTableES6 > .TPaginator {
    margin-top: 10px;
}


/* =======================================================================
 * 5. LISTADO LARGO: ALTO ACOTADO Y CABECERA FIJA
 *
 * El scroll horizontal ya lo tiene toda tabla por defecto (ver la raiz). Lo
 * que NO se pone por defecto es acotar el alto: una tabla dentro de una ficha
 * o de un overlay tiene que poder crecer con su contenido.
 *
 * Cuando la lista es larga y conviene dejar la cabecera a la vista, se pide
 * con `class: "tt-scrollable"` en la config del componente —TComponentES6 la
 * traslada a la raiz—. La cabecera se queda pegada arriba: `position:sticky`
 * necesita una caja que scrollee, y esta clase es justo la que la crea.
 * ======================================================================= */

.TTableES6.tt-scrollable {
    overflow-y: auto;
    max-height: 70vh;
}

.TTableES6.tt-scrollable > .tt-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}


/* =======================================================================
 * 6. PANTALLAS ESTRECHAS
 * ======================================================================= */

@media (max-width: 640px) {
    .TTableES6 > .tt-table > thead > tr > th { padding: 7px 8px; }
    .TTableES6 > .tt-table > tbody > tr > td { padding: 7px 8px; }
    .TTableES6 > .toolbar-container .search-box { max-width: none; }
    .TTableES6 > .toolbar-container .toolbar-buttons { margin-left: 0; }
}


/* =======================================================================
 * 7. LEGACY — el componente VIEJO js/TTable/TTable.js
 *
 * Ese si pinta `.TTable` en su raiz y lo siguen usando TDownloads,
 * TSessionManager y varias tablas de TArticles a traves del plugin
 * `$(x).TTable()`. No tiene nada que ver con TTableES6: se deja como estaba
 * para no tocar esas pantallas.
 * ======================================================================= */

.TTable .table-menu button {
    margin-left: 6px;
    display: flex;
    align-items: center;
}

.TTable .btn-primary {
    color: #ffffff;
    background: #1e293b;
}

.TTable .btn-primary i {
    color: #ffffff;
}

.TTable #row_selection {
    margin-right: 6px;
}

/* `.toolbar-search` se queda SIN acotar, como estaba. El plugin viejo aplica
   el componente sobre el propio <table>, asi que la clase `.TTable` acaba en
   la tabla y su barra queda FUERA, de hermana: acotarla la dejaria sin
   estilos. */
.toolbar-search {
    flex-grow: 1;
    position: relative;
}

.toolbar-search label {
    padding-left: 30px;
    background-color: transparent;
}

.toolbar-search input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.toolbar-search i {
    position: absolute;
    left: 15px;
    top: 16px;
    transform: translateY(-50%);
    color: #64748b;
}


/*-------------------------UPLOADER--------*/

.TUploader {
   
    margin-top: 10px;

    .TUploader-body {
        border-radius: 10px;
        /*background-color: #eee;*/
        outline: 2px;
        outline-color: #bbb;
        outline-style: dashed;
        margin-top: 5px;
        margin-bottom: 20px;
        position: relative;
        width: 100%;
        cursor:pointer;
        min-height: 114px;

        /* COLOCA a sus hijos, no los deja flotando encima unos de otros.
           El texto de ayuda estaba en position:absolute centrado con
           transform, asi que no ocupaba sitio: en cuanto habia un boton al
           lado -o el ancho no daba- se le montaba encima. Con flex y
           flex-wrap, si no caben en una fila el texto pasa debajo, que es lo
           que se espera. */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }

    > label {
        font-weight: 500;
        margin-bottom: 4px;
        color: #333;
        font-size: 1.0em;
        margin-bottom: 10px;
    }

}


.TUploader.simpleUploader {
    height: 100px;
    width: 100px;
    background-image: url(/images/camera.png);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #eee;
    margin-bottom: 60px;
    --dragging-border: 3px;
    border: 1px solid #ddd;
    padding: calc(var(--dragging-border) - 1px);
    cursor: pointer;
}

.TUploader:has(.thumb) {
    /*background-image: none;*/
}

.TUploader.simpleUploader b {
    color: #333;
}

/*-------------------------DRAGGING STATES--------*/
.TUploader.dragginfile {
    background-color: #e8f0fe;
    border: none;
    outline: var(--dragging-border);
    outline-color: #71b6fc;
    outline-style: dashed;
}

.TUploader.loaded {
    /* Estilos cuando hay archivos cargados */
}

.TUploader .description {
    position: absolute;
    top: calc(100% + 10px);
    width: 181px;
    color: #292929;
    font-size: 12px;
    text-align: center;
}

.TUploader .delete {
    display: none;
}

.TUploader.loaded .delete {
    display: block;
    position: absolute;
    right: 4px;
    width: 14px;
    top: 5px;
    border-radius: 5px;
    background-color: #fff;
    padding: 1px;
    z-index: 100;
    cursor: pointer;
    border: 1px solid #ddd;
}

.TUploader .delete:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
}

/*-------------------------THUMBNAILS--------*/
.TUploader:not(.multiple) .thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.TUploader .thumb {
    background-color: #fff;
    outline: 2px solid #f0f0f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.TUploader .thumb:hover {
    outline-color: #71b6fc;
    transform: scale(1.02);
}

.TUploader .thumb.selected {
    outline: 3px solid #3b82f6;
    outline-offset: -1px;
}

/*-------------------------MULTIPLE UPLOAD MODE--------*/
.TUploader.multiple {
    min-height: 120px;
  
}

.TUploader.multiple .thumb {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 5px;
    object-fit: cover;
    vertical-align: top;
}

/*-------------------------FICHERO QUE NO ES IMAGEN--------*/
/*
  EL NOMBRE VA DEBAJO DEL ICONO, Y EN VARIAS LINEAS.

  De una foto, la miniatura ya dice cual es. De un .zip solo se ve el icono de
  su extension, identico para los tres .zip que subiste: sin el nombre no hay
  forma de distinguirlos. Y cortado con puntos suspensivos tampoco distingue
  nada --"contrato-2026-…" son todos--, asi que se envuelve.

  La caja es mas alta que la de una imagen porque tiene que caber el texto; el
  icono conserva los 80px para que las dos clases de miniatura se alineen por
  arriba.
*/
.TUploader .thumb--file {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.TUploader.multiple .thumb--file {
    width: 92px;
    height: auto;
    min-height: 80px;
}

.TUploader .thumb--file .thumb-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: none;
    pointer-events: none;
}

/*
  El tamaño va SOBRE el elemento que pinta el texto: la regla global con
  shorthand `font:` fija 12px a div/span/p, y heredarlo del contenedor no basta.
*/
.TUploader .thumb--file .thumb-name {
    display: block;
    width: 100%;
    font: 10px Arial, sans-serif;
    line-height: 1.25;
    color: #555;
    word-break: break-word;
    overflow-wrap: anywhere;
    pointer-events: none;
}

/*-------------------------UPLOAD INFO--------*/
/*
  EL TEXTO DE AYUDA FLUYE, no flota.

  Estaba en position:absolute con top/left al 50% y un transform para
  centrarlo. Eso lo sacaba del flujo: no ocupaba sitio, asi que se dibujaba
  ENCIMA del boton de subir y, en una columna estrecha, encima de si mismo y
  del borde. Ahora es un hijo mas del flex del cuerpo, que ya lo centra; y
  cuando no cabe al lado del boton, cae debajo.

  Sin height fija tampoco: 150px de alto para dos lineas de texto dejaban un
  hueco muerto en las cajas pequenas.
*/
.TUploader .uploadinfo {
    text-align: center;
    color: #666;
    pointer-events: none;
    user-select: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*
      CUANDO NO CABE, DEBAJO.

      La base son 240px: es lo que necesita el mensaje —"Haz click o arrastra
      las imagenes con formato JPG, PNG..."— para leerse en dos o tres lineas
      en vez de en una columna de tres palabras. Por debajo de eso, flex-wrap
      lo baja a su propia fila, que es donde se lee bien.
    */
    flex: 1 1 240px;

    /* Y que la base MANDE. Con min-width:0 el texto se encoge sin límite, así
       que nunca llegaba a envolver: se quedaba en su fila hecho una columna de
       tres palabras al lado del botón. Con esto exige sus 240px —o el ancho
       entero, si la caja mide menos— y flex-wrap hace el resto. */
    min-width: min(240px, 100%);
}


/*
  EL BOTON VA PRIMERO, aunque en el DOM venga despues.

  setupDOM() añade el texto y luego el boton, asi que al envolver caia el texto
  ARRIBA y el boton debajo -- justo del reves de lo que se espera: primero el
  sitio donde pulsar y luego la explicacion. Con order:-1 el orden visual es
  boton|texto en una fila, y boton sobre texto cuando no caben.
*/
.TUploader .uploadbtn { order: -1; }

.TUploader .uploadbtn{
    width: 80px;
    height: 80px;
    padding: 5px;
    border: 2px solid #bbb;
    border-radius: 15px;
    background-color: #dfdfdf;
    border-style: dotted;
	cursor: pointer;
	display:flex;
	justify-content: center;
    align-items: center;

        display: inline-block;
    width: 80px;
    height: 80px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    margin: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: #fafafa;
}


.TUploader .uploadinfo .txt {
    margin-top: 10px;
    font-size: 14px;

    position: relative;
    bottom: 0px;
    margin-top: 4px;
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    font-family: Arial;
    line-height: 16px;
      width: 100%;
    transform: translate(-50%, 0%);
 
    left: 50%;
}

/* EL ICONO, CON MEDIDA PROPIA EN PIXELES.
 *
 * Estaba en `width: 80%; height: 80%`, y el `80%` de alto se calcula sobre la
 * caja `.uploadinfo`, que NO tiene altura: la suya depende de su contenido. Un
 * porcentaje sobre una altura automatica es CERO, asi que el icono se pintaba a
 * 256x0 --medido en el navegador-- y la zona de subida salia con el mensaje
 * pero sin dibujo, en todas las pantallas que usan TUploader.
 *
 * El `mask-size: 100% 100%` que ya trae `Icon.upload` hace que el SVG se
 * adapte al tamaño que se le de aqui. */
.TUploader .uploadinfo Icon.upload {
    flex: 0 0 auto;
    width: 34px !important;
    height: 34px !important;
    color: #b8bfcc;
}

Icon.upload {
    width: 20px;
    height: 20px;
    top: 0px;
    --svg: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath stroke-linejoin='round' d='M21.25 13V8.5a5 5 0 0 0-5-5h-8.5a5 5 0 0 0-5 5v7a5 5 0 0 0 5 5h6.26'/%3E%3Cpath stroke-linejoin='round' d='m3.01 17l2.74-3.2a2.2 2.2 0 0 1 2.77-.27a2.2 2.2 0 0 0 2.77-.27l2.33-2.33a4 4 0 0 1 5.16-.43l2.47 1.91M8.01 10.17a1.66 1.66 0 1 0-.02-3.32a1.66 1.66 0 0 0 .02 3.32'/%3E%3Cpath stroke-miterlimit='10' d='M18.707 15v5'/%3E%3Cpath stroke-linejoin='round' d='m21 17.105l-1.967-1.967a.46.46 0 0 0-.652 0l-1.967 1.967'/%3E%3C/g%3E%3C/svg%3E);
    background-color: currentColor;
    mask-image: var(--svg);
    position: relative;
    top: 0px;
    display: block;
    color: rgba(100, 100, 100, 0.3);
}

/*-------------------------UPLOAD BUTTON--------*/


.TUploader .uploadbtn:hover {
    border-color: #71b6fc;
    background-color: #f0f7ff;
}

.TUploader .uploadbtn Icon.upload {
    font-size: 24px;
    color: #999;
}

/*-------------------------PROGRESS BAR--------*/
.TUploader .progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #f0f0f0;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.TUploader .progress-bar {
    height: 100%;
    background-color: #3b82f6;
    transition: width 0.3s ease;
    border-radius: 0 0 6px 6px;
}

/*-------------------------ERROR STATES--------*/
.TUploader .thumb.error {
    outline: 2px solid #ef4444;
    position: relative;
}

.TUploader .thumb.error::after {
    content: "⚠";
    position: absolute;

    top: 2px;
    right: 2px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*-------------------------LOADING STATES--------*/
.TUploader .thumb.loading {
    opacity: 0.7;
    position: relative;
}

.TUploader .thumb.loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.TUploader .thumb.loading::after {
    content: "⏳";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    z-index: 3;
}

/*-------------------------EMPTY STATE--------*/
.TUploader:empty::before {
    content: "Suelta archivos aquí";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #999;
    font-style: italic;
}

/*-------------------------RESPONSIVE--------*/
@media (max-width: 768px) {
    .TUploader.multiple .thumb {
        width: 60px;
        height: 60px;
        margin: 3px;
    }
    
    .TUploader .uploadbtn {
        width: 60px;
        height: 60px;
    }
    
    .TUploader.simpleUploader {
        width: 80px;
        height: 80px;
        background-size: 40px;
    }
}

/*-------------------------ACCESSIBILITY--------*/
.TUploader:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.TUploader .thumb:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}


Icon.upload{
   width: 20px;
   height: 20px;
   top: 0px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath stroke-linejoin='round' d='M21.25 13V8.5a5 5 0 0 0-5-5h-8.5a5 5 0 0 0-5 5v7a5 5 0 0 0 5 5h6.26'/%3E%3Cpath stroke-linejoin='round' d='m3.01 17l2.74-3.2a2.2 2.2 0 0 1 2.77-.27a2.2 2.2 0 0 0 2.77-.27l2.33-2.33a4 4 0 0 1 5.16-.43l2.47 1.91M8.01 10.17a1.66 1.66 0 1 0-.02-3.32a1.66 1.66 0 0 0 .02 3.32'/%3E%3Cpath stroke-miterlimit='10' d='M18.707 15v5'/%3E%3Cpath stroke-linejoin='round' d='m21 17.105l-1.967-1.967a.46.46 0 0 0-.652 0l-1.967 1.967'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  mask-image: var(--svg);
    position: relative;
   top: 0px;
  display: block;
  color: rgba(100, 100, 100, 0.3);
}








 .whiteWindow .titulo{background-color: #6a6766 !important;}
 .whiteWindow .titulo .text{color: #666 !important;}
 .whiteWindow .titulo img{display: none !important;}
 .whiteWindow .body{border: 1px solid #aaa !important;}
 
 

.whiteWindow .Tscale3 {position: relative; float:left;  padding:0px; margin: 0px; top:-6px; z-index:1 }
.whiteWindow .Tscale3 span{ }
.whiteWindow .Tscale3>tbody> tr > .body{
background: url(MOD_gestion/img/ribbon_tab_body_center.png)  repeat-x left;
background-position: 0px 0px;
white-space: nowrap;
}
.whiteWindow .Tscale3 > tbody > tr >.l{background: url(MOD_gestion/img/ribbon_tab_body.png)no-repeat left top; width: 6px;}
.whiteWindow .Tscale3 > tbody > tr >.r{background: url(MOD_gestion/img/ribbon_tab_body.png)no-repeat right top; width: 6px; }



.whiteWindow .ribbonFrame{position: relative; float:left;  padding:0px; margin: 0px; top: 2px; z-index:1 }
.whiteWindow .ribbonFrame > tbody> tr > .body{padding-top: 10px; vertical-align:top; background: url(MOD_gestion/img/ribbon_frame_center.png) repeat-x 0px 2px;}
.whiteWindow .ribbonFrame > tbody > tr >.l{background: url(MOD_gestion/img/ribbon_frame.png)no-repeat left top; width: 6px;}
.whiteWindow .ribbonFrame > tbody > tr >.r{background: url(MOD_gestion/img/ribbon_frame.png)no-repeat right top; width: 6px; }

.whiteWindow .fondoRibbon{  white-space:nowrap; height: 95px}
.whiteWindow .fondoRibbon .ribbonFrame{margin-right: 0px;}
/*----------------------------------------*/



.whiteWindow b, strong{ color:#000; font: bold 14px sans-serif; }



/* ── LA COMA ESTABA MAL PUESTA ───────────────────────────────────────
   Decía `.whiteWindow input, textarea`, y en CSS la coma separa selectores
   COMPLETOS: el primero se acota a `.whiteWindow`, pero el segundo queda
   suelto y le pone `height:22px` --y una tipografía de 11px-- a TODOS los
   `textarea` del sitio, estén donde estén.

   Eso deja en dos líneas de alto cualquier área de texto: un comentario, una
   descripción, una opinión. SIETE pantallas distintas lo tenían ya
   diagnosticado y parcheado cada una por su cuenta --TSellerStory,
   TSellerReviews, TSellerShipping, TSellerProfileEditor, TSellerDeliveryNote,
   TReviewList y el perfil público--, que es la señal de que el arreglo no iba
   en ninguna de ellas sino aquí.

   Se acota al contenedor, que es lo que la regla quería decir. */
.whiteWindow input,
.whiteWindow textarea{



margin: 0px 0px 0px 0px;
background-color: #fff;
font: bolder 11px Arial;
color: #666;
height: 22px;
vertical-align: top;

	
}

.whiteWindow  .formulario tr{
	margin-bottom: 10px; 
}

.whiteWindow  .obligatorio{
color: #F00; 
}


.whiteWindow td{
font: 14px Arial;
color: #666;	
	
}

.whiteWindow  .Tfile input{ height: 20px;}
.whiteWindow span{color: #000 ;}

.whiteWindow .zona_cliente{background-color: #fff!important; border: 0px !important;}
.whiteWindow .body{background-color: #fff !important; border: 1px solid #1a1a1a !important;}




.whiteWindow .pie{background-color: #e9e9e9; margin-top: 0px !important; border-top: 1px solid #c9c9c9;}
.whiteWindow .pie .linea_3d{display: none;}




.whiteWindow   table.imgmenu{ margin-right: 3px; }

.whiteWindow  .dataContainer {position: relative; background-color: #e3efff; }
.whiteWindow  .dataContainer .seccion span{ background-color: #e3efff !important; }
.whiteWindow   .dataContainer a{color: #03C;}


.whiteWindow  table.bloque{  table-layout:fixed; white-space:nowrap;}
.whiteWindow  table.bloque tr{ min-height: 23px;}
.whiteWindow  table.bloque td:nth-child(1){ width: 120px; } 


.whiteWindow  .dataContainer >*{position:relative; padding: 15px;}

.whiteWindow  .bloq_izq_form{width: 420px; float: left; }
.whiteWindow  .bloq_der_form{ overflow:hidden;  padding-left: 15px; display:table-cell; }

.whiteWindow .tab_blanco li.current a{ background:none; background-color:#FFF; }
.whiteWindow .tab_blanco li.current span{background:none; background-color:#FFF; }

.whiteWindow .right{float:right;}
.whiteWindow img.find{ cursor:pointer; background:url(MOD_gestion/img/menu/buscar.png) no-repeat; width: 15px; height: 15px; margin-right: 10px;}

.whiteWindow .fmt_number{ text-align:right;}
.whiteWindow .frameset{ background-color:#D8D8D8; border: #bbb 1px solid; color:#000;}
.whiteWindow .frameset .label{ color:#000; }

.whiteWindow div, .whiteWindow p, .whiteWindow span{color:#000}
.whiteWindow a, .whiteWindow a apsn{color: #03C;  }
.whiteWindow a:hover{ text-decoration: underline;   }



	
	.whiteWindow .barraMenu{ 
		padding: 5px;
		margin-top: 15px;
		border-top: 1px solid #CDCDCD;
		background-color: whiteSmoke;
		margin-bottom: 10px;
	}

	
	.whiteWindow .barraMenu{
	font:  11px Verdana;
	padding: 5px;
	margin-top: 15px;
	border-top: 1px solid #CDCDCD;
	background-color: whiteSmoke;
	margin-bottom: 10px;
	}
	
	

 .whiteWindow.gray .zona_cliente{ background-color: #f0f0f0 !important; }
 .whiteWindow.gray .zona_cliente .pie{ background-color: #f0f0f0 !important; }
 .whiteWindow.gray input:focus{ border-radius: 5px;  border-color: #dcb64f; border-top-color: #dcb64f;}








 /* SECCIONES --------------------*/

.whiteWindow .seccion{
position: relative ;
border-top: 1px solid #09F;
box-sizing: border-box;
color: inherit;

margin: 15px 0px;
margin-bottom: 40px;

padding: 10px 12px;
vertical-align:top;


}

.whiteWindow .seccion > .label{
box-sizing: border-box;
position: absolute;
padding: 0px;
top: -10px;
left: 0px;
 /* margin-top: -21px; */
padding-right: 5px;
padding-left: 0px;
color: #09F ;
background-color: #E3EFFF;
}





.whiteWindow .seccion.grayline{ border-top-color:#CDCDCD; }
.whiteWindow .seccion.grayline .label{ 
font:600 14px 'lucida grande',tahoma,verdana,arial,sans-serif; 	  
background-color: #FFF; 
clear: both;
font: 14px Arial;
color: #666;
margin: 0px;
}

.whiteWindow .seccion_ms{position: relative; padding: 0px 10px; padding-top: 30px; margin-bottom: 20px;  }
.whiteWindow .seccion_ms > .label{
border-top: 1px solid #CDCDCD; 
box-sizing: border-box;
position: absolute;
font: bold 11px Verdana;
color: #666;
top: 0px;
left: 0px;
background-color: whiteSmoke;
margin-bottom: 10px;
width: 100%; 
padding: 5px;
}









.whiteWindow .btn.OK:hover {
	
	background-position: 100% -26px; 
	color: #666;
	
	-moz-box-shadow:
		1px 0px  2px rgba(000,000,000,0.3),
		inset 0px 2px 2px rgba(255,255,255,1);
	
	box-shadow:
		1px 0px 2px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,1);
	
	
}




.whiteWindow .btn.OK.disabled, 
.whiteWindow .btn.OK{ 
position:relative;
display:inline-block; 
height: auto; 
left: 10px;
padding:0px;
width: auto;


border: 1px solid #aaa !important;
padding-right: 2px; 
margin-right: 20px; 
background: url(MOD_gestion/img/btn_yt2.png?2) no-repeat 100% 0px;
color: #666;

box-shadow: none;	
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #444444;
padding: 5px;
background: -moz-linear-gradient(
	top,
	#fcfcfc 0%,
	#cfcfcf)!important; 
background: -webkit-gradient(
	linear, left top, left bottom, 
	from(#fcfcfc),
	to(#cfcfcf))!important; 
border-radius: 5px;
border: 1px solid #666;

text-shadow:
	0px 1px 0px rgba(255,255,255,1),
	0px 0px 0px rgba(255,255,255,0);
		
}

.whiteWindow .btn.disabled span,
.whiteWindow .btn.disabled {
color: #aaa !important;	
}




.whiteWindow .btn.OK span{
padding: 0px !important;
padding-left: 5px; 
padding-right: 0px;  
display: inline-block; 

margin-left: 0px;
color: #333;
min-width: 30px;
background: url(MOD_gestion/img/btn_yt2.png?2) no-repeat 0px 0px; 
padding: 0px; heigth: auto !important;

}




.whiteWindow .btn.NOK{background: none !important; width: auto;}
.whiteWindow .btn.NOK span{text-decoration:none !important;}

.whiteWindow .Tselect2{ width: 100px; height: 20px;}






/* ═══════════════════════════════════════════════════════════════════════════
 *  EL BUSCADOR DE PRODUCTOS DE LA CABECERA
 * ═══════════════════════════════════════════════════════════════════════════ */

.tps{
    position: relative;   /* el desplegable cuelga de aquí */
    flex: 1;
    min-width: 0;

    /* El selector de categoría y la caja de texto, uno al lado del otro. */
    display: flex;
    align-items: stretch;
}

/* El selector no se estira: su ancho lo fija `.categorySelector` en base.php,
   que es donde vive su estilo desde siempre. */
.tps-categoria{ flex: 0 0 auto; }

/* Y la caja de texto se queda con lo que sobre. */
.tps > .tps-caja{ flex: 1; min-width: 0; }

/* ── LA CAJA ─────────────────────────────────────────────────────────── */
/* El flex de dos columnas de siempre: la lupa en la primera, el campo en la
   segunda, para que el texto no baile cuando aparece el aspa de limpiar. */
.tps-caja{
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 8px;
    background: #fff;
}
.tps-lupa{ flex: 0 0 auto; color: #9aa5b1; font-size: 16px; }

.tps-input{
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    font-size: 13px;
    background: transparent;
}

/* El aspa solo cuando hay algo escrito. `:placeholder-shown` evita tener que
   mantenerlo desde el JS con cada tecla. */
.tps-limpiar{
    flex: 0 0 auto;
    display: flex;
    padding: 2px;
    color: #9aa5b1;
    cursor: pointer;
}
.tps-input:placeholder-shown ~ .tps-limpiar{ display: none; }
.tps-limpiar:hover{ color: #465366; }

/* ── EL BOTÓN DE BUSCAR ──────────────────────────────────────────────── */
/*
 * El verde de la casa a la derecha de la caja, como el resto de la cabecera.
 *
 * Es un `span role="button"`, no un `<button>`: la hoja global le fija la
 * altura a todo botón y este se quedaba en 25px dentro de una caja de 38, sin
 * que `align-self: stretch` lo levantara. Medido.
 */
.tps-lanzar{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;

    /* `align-self` Y NO `height: 100%`: dentro de un flex, el porcentaje se
       mide contra una altura que el padre no siempre tiene declarada, y el
       botón se quedaba en 25px de los 40 de la caja -- medido. */
    align-self: stretch;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 0 9px 9px 0;
    background: #16a34a;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
.tps-lanzar:hover{ background: #15803d; }

/* La lupa de dentro de la caja sobra teniendo botón: dos lupas en el mismo
   campo son dos veces la misma pista. */
.tps .tps-lupa{ display: none; }

/* ── EL DESPLEGABLE ──────────────────────────────────────────────────── */
/*
 * Oculto por defecto y NO con `display:none` sobre el contenido: se oculta el
 * contenedor entero, así el marcado sigue ahí y no hay que repintarlo al
 * volver a abrir.
 */
.tps-popup{
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 3000;   /* por encima de la cabecera y del carrito */

    max-height: 420px;
    overflow-y: auto;

    background: #fff;
    border: 1px solid #d7dde4;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.tps.abierto .tps-popup{ display: block; }

/* ── CADA RESULTADO ──────────────────────────────────────────────────── */
/* Foto a la izquierda y TODO el texto en la segunda columna, para que el
   nombre y el código arranquen en la misma vertical. */
.tps-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f3f6;
}
.tps-item:last-of-type{ border-bottom: 0; }
.tps-item:hover,
.tps-item.on{ background: #f4f8f5; }

.tps-foto{
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 1px solid #eceff3;
    border-radius: 6px;
    background: #fff;
}
.tps-sinfoto{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b6bfca;
    font-size: 18px;
}

.tps-texto{ flex: 1; min-width: 0; }
.tps-texto b{
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1f2933;

    /* Un nombre largo no puede empujar el precio fuera de la caja. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Lo que casa con lo escrito. `<i>` y no `<b>` anidado: dentro de un `b` ya en
   negrita, más negrita no se distingue. */
.tps-texto b i{ font-style: normal; font-weight: 700; color: #0f8b46; }

.tps-texto small{
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: #7b8794;
}

.tps-precio{
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #1f2933;
    white-space: nowrap;
    text-align: right;
}
/* «0,88 €/kg» bajo el precio: sobrio, en la misma vertical derecha. */
.tps-precio .tps-precio-ud{
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    color: #5f6b65;
}

/* ── EL PIE Y EL VACÍO ───────────────────────────────────────────────── */
.tps-todos{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    font-size: 12px;
    color: #0f8b46;
    cursor: pointer;
    background: #fafbfc;
    border-top: 1px solid #eceff3;
}
.tps-todos:hover{ background: #f4f8f5; }

.tps-vacio{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    font-size: 12px;
    color: #7b8794;
}
.tps-vacio iconify-icon{ flex: 0 0 auto; font-size: 16px; }

@media (max-width: 640px){
    .tps-popup{ max-height: 60vh; }

    /* EL PRECIO SE QUEDA EN MÓVIL (15/09/2026). Antes se ocultaba «porque manda
       el nombre», y con él se iba el €/kg de debajo, que es justo lo que deja
       comparar dos aceites sin entrar en ninguno. El nombre pasa a dos líneas
       en la pantalla completa de la cabecera (`TSiteHeader.css`). */
    .tps-item{ align-items: flex-start; }
}