/******************** GRID ************************/
[class*="col-"] {box-sizing: border-box;}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-1 .Bloque, .col-2 .Bloque, .col-3 .Bloque, .col-4 .Bloque, .col-5 .Bloque, .col-6 .Bloque, .col-7 .Bloque, .col-8 .Bloque, .col-9 .Bloque, .col-10 .Bloque, .col-11 .Bloque, .col-12 .Bloque {/*border-bottom:none!important;*/ border-bottom:1px solid #dcdcdc;}

.text-center {
  text-align:center!important;
}

.justify-left, ul.justify-left > li {
  text-align: left!important;
}

.mt-1 {margin-top:10px;}
.mb-1 {margin-bottom:10px;}
.mt-2 {margin-top:20px;}
.mb-2 {margin-bottom:20px;}
.ml-1 {margin-left:10px;}
.mr-1 {margin-right:10px;}
.ml-2 {margin-left:20px;}
.mr-2 {margin-right:20px;}

.my-1 {margin:10px 0;}
.my-2 {margin:20px 0;}
.my-3 {margin:30px 0;}
.my-4 {margin:40px 0;}
.my-5 {margin:50px 0;}

.Doc ul ul {
   margin-top:20px;
   margin-bottom:20px
}

.Doc ul ul li {
  list-style-type:circle;
}

[class*="col-"] {
    float: left!important;
    padding: 15px;
}

.Bloque::after {
    content: "";
    clear: both;
    display: block;
}

.pull-left {float:left!important}
.pull-right {float:right!important}

.upload-file[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.upload-file [type=file] {
  overflow: hidden;
}
.upload-file {
  display: block;
  /*width: 100%;*/
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.25rem;
  font-size: 1em;
  color: #666;
  font-family: 'Maven Pro', Arial, Helvetica, sans-serif;
  font-weight: 300;
  border: solid 2px #e3e3e3;
  outline: none;
}

/* ESTRUCTURA //////////////////////////////////////////////////////////////////////////////////////////////// */
#CONTENIDO { background-color:#FFF;}
.Grid {/*width:1200px;*/ width:98%; margin:0 auto; height:100%; overflow:hidden;}

/* Cabecera -------------------------------------------------- */
#CABECERA { height:124px; background:url(../img/background/fondo-cabecera.gif) 0 bottom repeat-x;}
#CABECERA .Grid { background:url(../img/comun/logo-tickstats.png) right 0 no-repeat; height:111px;}
#CABECERA .Logo { background-color:#FFF; float:left; display:table;}
#CABECERA .Logo p { display:table-cell; text-align:center; vertical-align:middle;}
#CABECERA .Titulo { /*float:right;*/ padding-top:20px; text-align:right;}
#CABECERA .Titulo p { font-size:1.8em; color:#FFF;}
#CABECERA .Titulo p a { color:#FFF; font-weight:400; text-decoration:underline;}
#CABECERA .Titulo h1 {padding-left:280px}

/* Contenido -------------------------------------------------- */
#CONTENIDO .Grid { padding:18px 0 0 0;}
#CONTENIDO .Top { height:100%; overflow:hidden; margin-bottom:2em;}
#CONTENIDO .Top h2 { float:left;}
#CONTENIDO .Status {width:450px; /*width:530*/ float:right; text-align:right;}
#CONTENIDO #Progressbar { width:420px; margin:0 0 0.6em 0; height:20px; border:none; float:left;}
#CONTENIDO .Status p { width:30px; /*width:110*/ font-size:1.4em; font-weight: bold; line-height:1em; margin:0; padding:0; height:20px; border:none; float:right;}
#CONTENIDO h3 { font-size:20px; color:#74261e; font-weight:500; margin-bottom:15px; background-color:#ffcdc8; padding:10px 10px; border:1px solid #e74c3c;}


/* Posicion_01 */
#CONTENIDO.Posicion_01 h2 { float:left;}
#CONTENIDO.Posicion_01 .Status { float:right; text-align:right;}

/* Posicion_02 */
#CONTENIDO.Posicion_02 h2 { float:right;}
#CONTENIDO.Posicion_02 .Status { float:left; text-align:left;}

/* Posicion_03 */
#CONTENIDO.Posicion_03 h2 { float:left;}
#CONTENIDO.Posicion_03 .Status { float:right; text-align:left;}
#CONTENIDO.Posicion_03 .Top ul {  width:450px; height:100%; overflow:hidden; padding-bottom:5px; float:right; text-align:right; padding-top:15px;}
#CONTENIDO.Posicion_03 .Top ul li {  display:inline;margin-left:5px;}


/* Footer ----------------------------------------------------- */
footer .Grid { padding: 0px 0 5px 0;}
footer p { font-size:1.4em; color:#FFF;}

/* ESTILOS GENERALES ////////////////////////////////////////////////////////////////////////////////////////// */
h1 { font-size:2.4em; color:#FFF; font-weight:400;}
h2 {font-size:3em; font-weight:400; letter-spacing:-0.04em}
h2 strong {font-weight:700;}
p {letter-spacing:-0.04em;}

ul.list {margin: 15px 0 25px 35px;}
ul.list li {font-size:14px; list-style: disc;}

.Bloque .Row.Pregunta p.info {line-height: 140%; font-size: 18px!important}

.grid-select {padding: 10px 5px 10px 5px!important;}
.grid-select select.multiple {height: 75px;}

@media only screen and (min-width: 601px) {
  .grid-select select {width: 75px;}
}

@media only screen and (min-width: 1024px) {
  .grid-select select {width: 85px;}
}

@media only screen and (min-width: 1200px) {
  .grid-select select {width: 100px;}
}

@media only screen and (min-width: 1366px) {
  .grid-select select {width: 120px;}
}

@media only screen and (min-width: 1366px) {
  .grid-select select {width: 150px;}
}

@media only screen and (min-width: 1920px) {
  .grid-select select {width: auto;}
  .grid-select select.multiple {width:-webkit-fill-available;}
}



/* ELEMENTOS DE FORMULARIO ////////////////////////////////////////////////////////////////////////////////////////// */
input.TXT { height:38px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:0 1em; font-size:0.889em; line-height:normal; color:#666;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: solid 2px #e3e3e3; outline: none}
textarea.TXT { font-family: 'Maven Pro', sans-serif;height:100px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:0.3em 0.5em; font-size:0.889em; line-height:normal; color:#999;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: solid 2px #e3e3e3; outline: none; resize:none;}

/* Textarea auto-expandible */
textarea.TXT.auto-expand {
	height: 38px;
	min-height: 38px;
	overflow-y: hidden;
	max-width: 95%;
}

select { height:38px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:0 1.5em 0 0.2em; color:#666; line-height:normal; font-size:0.889em; color:#666;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: solid 2px #e3e3e3;outline: none;}
select.Multiple { width:60%; height: 250px; padding:0; overflow:visible}
select.Multiple option { display:block; padding:15px 10px}
.MultiSeleccion { position:relative;}
.MultiSeleccion .btn.Arriba { position:absolute; top:0; right:0; left:61%;}
.MultiSeleccion .btn.Abajo { position:absolute; bottom:0; right:0; left:61%;}

/* Anchos para campos de formulario */
input.Small { width:85px;}
input.Medium { width:150px;}
input.Large {width:285px;}
input.Date {width:225px; float:left; margin-right:0.5em}
input.Date_Green {width:225px; float:left; margin-right:0.5em}

.date-select-group {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    vertical-align: middle;
}
.date-select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}
.date-select:focus {
    border-color: #888;
    outline: none;
}
.date-select.error {
    border-color: #e74c3c;
}
.date-day { width: 70px; }
.date-month { width: 130px; }
.date-year { width: 90px; }

select.Large {width:285px;}
textarea { width:510px}
textarea.Large { height:200px}
textarea.Medium { height:200px; width:400px;}
.divider textarea { width:95%!important}

/* Formateo de Radiobuttons y checkbox */
input[type=radio] { position: absolute; left: -9999px; margin: 0;}
input[type=radio] + label { width:31px; height:31px; display:inline-block; cursor:pointer;} /* las imagenes que muestra estan en la hoja de estilos correspondientes al theme */
input[type=checkbox] { position: absolute; left: -9999px; margin: 0;}
input[type=checkbox] + label { width:31px; height:31px; display:inline-block; cursor:pointer;} /* las imagenes que muestra estan en la hoja de estilos correspondientes al theme */

/* MODULOS //////////////////////////////////////////////////////////////////////////////////////////////// */
/* Bloques de preguntas */
.Bloque { border:1px solid #dcdcdc; border-bottom:none; background-color:#f9f9f9; margin-bottom:3em}
.Bloque .Row { border-bottom:1px solid #dcdcdc;}
.Bloque .Pregunta { padding:1.5em 2.5em;}
.Bloque .Respuesta { padding:1.5em 2.5em 2em 2.5em;}
.Bloque .Pregunta p { font-size:2.4em; color:#000; line-height:1.250em;}
.Bloque .Respuesta p { font-size:1.8em; color:#4c4c4c; line-height:1em;}
.Bloque .Respuesta p label { margin-right:5px;}
.Bloque .Respuesta p label.ForSelect { margin-right:10px; margin-top:13px; float:left;}
.Bloque .Frame { padding:1.5em 0 2em 0; overflow-x: auto; display:block;}
.Bloque .Validacion { padding:1.5em 2.5em;}
.overflow {max-height: 200px}
.ui-selectmenu-open .ui-widget-content {max-height: 200px;}

.Bloque .Respuesta p label.Fecha { float:left; margin:10px 5px 0 0;}
.Bloque .Respuesta input.Small { margin-right:0.4em;}
label.error {font-size:16px; display:block; margin-top:10px;clear:both; font-weight:normal; font-style:normal !important; }

.Bloque .Listado { padding:1.5em 2.5em 2em 2.5em; background-color:#FFF}
.Bloque .Listado p { font-size:1.8em; color:#4c4c4c; line-height:1em;}
.Bloque .Listado li { font-size:1.9em; color:#4c4c4c; line-height:1em; margin-bottom:0.5em; background:url(../img/comun/bolo.png) 0 7px no-repeat; padding:0 0 10px 10px}


.Bloque .Listado2 { background-color:#FFF}
.Bloque .Listado2 p { font-size:1.8em; color:#4c4c4c; line-height:1em;}
.Bloque .Listado2 li {font-size:1.6em; color:#4c4c4c; line-height:1em;}

.Bloque .Respuesta p label.LabelSided { float:left; margin:10px 5px 0 0;}

.Pregunta-Eval {font-size:0.8em; padding:2.5em 2.5em!important}

/* FancyBox */
/*#fancybox-buttons a.btnPrev, #fancybox-buttons a.btnNext, #fancybox-buttons a.btnPlay {display:none!important;}*/

/* Striped List */

ul.striped {
  margin: 0;
  padding: 0;
}
ul.striped > li {
  border-bottom: 1px solid #eee;
  padding: 15px 15px 15px 25px;
}
ul.striped > li:nth-of-type(odd) {
  background-color: #f6f6f6 ;
}
ul.striped > li:last-child {
  border-bottom: none;
}


/* Multimedia */
.Bloque .Multimedia { padding:15px; text-align:center}
.Bloque .Multimedia p { text-align:center;}
.Bloque .Multimedia p img { border:1px solid #dcdcdc; /*max-height: 100%; width:auto;*/ display:block; height:auto; max-width: 100%; margin:0 auto; }
.Bloque .Multimedia iframe { border:1px solid #dcdcdc; width:50%; height:400px; margin:0 auto;}

/* Elementos huerfanos */
.Orphan { padding:0 0 0 25px; margin:0 0 2em 0}
.Orphan p { font-size:1.8em;}

/* Modulo tipo Tabla */
.Bloque.Titular { background-color:#FFF; border-bottom:none; margin:0 0 10px 0;}
.Bloque.Titular .Row { padding:1.5em 1.5em 1.5em 2.5em; height:100%; overflow:hidden;}
.Bloque.Titular .Row p {font-size:2.4em; color:#000; line-height:1.250em;}
.cabeceraMatricial {font-size:2.4em; color:#000; line-height:1.250em;}
.Bloque.Titular .Row p.FloatLeft { line-height:1.8em;}
.Bloque.Titular .Row p a {font-size:0.750em; color:#000; margin:0 0 0 0; color:#FFF;}
/**/
.Bloque.TablaDatos {background-color:#FFF;}
.Bloque.TablaDatos table { width:100%;}
.Bloque.TablaDatos th { background-color:#f9f9f9; border-bottom:1px solid #dcdcdc; font-size:1.9em; color:#4c4c4c; font-weight:500; padding:20px 0 22px 25px; text-align:left;line-height:1em;}
.Bloque.TablaDatos th.First {width:40%;}
.Bloque.TablaDatos th.First0 {width:1%;}
.Bloque.TablaDatos th.Pregunta {font-size:2.4em; color:#000; line-height:1.250em; font-weight:400;letter-spacing:-0.04em;}
.Bloque.TablaDatos th.Center { text-align:center; /*padding:20px 0 22px 0;*/ padding: 20px 5px 22px 5px; vertical-align: bottom;}
.Bloque.TablaDatos th.Right {text-align:right;}
.Bloque.TablaDatos td {color:#4c4c4c; font-size:1.6em; line-height:1em; text-align:left;border-bottom:1px solid #dcdcdc; padding:10px 10px 10px 25px;}
.Bloque.TablaDatos.equalTD td {height: 60px!important;}
.Bloque.TablaDatos td.Center {text-align:center;padding:10px 0 10px 0;}
.Bloque.TablaDatos td.Right {text-align:right;}
.Bloque.TablaDatos td.Input { width:5%; vertical-align:top; padding-top: 15px;}
.Bloque.TablaDatos td.Rowspan {border-left:1px solid #dcdcdc;}
.Bloque.TablaDatos td i { float:left}
.Bloque.TablaDatos td i img { display:block;}
.Bloque.TablaDatos td span {  display:block; padding:10px 0; float:left}

.Bloque.TablaDatos td.program i {display: block!important; float: none!important;}

.Bloque.TablaDatos .table-responsive table {table-layout: fixed;}

.Bloque.Imagen {
  background-color: #FFF;
  border-bottom: 1px solid #dcdcdc;
  display: flex;
  justify-content: center;
}


/******************* Grid Img ***********************/


.Bloque.TablaDatos.GridImg .headrow img {
 height:150px;
 text-align: center;
}

/*****  Estilos particulares para tablas de clase "programs" *******/
/* Hover highlight on choice columns - colors defined per theme */
.highlighted {background-color: #EEE; opacity:0.8}

/* Ensure border-radius works on table cells */
.Bloque.TablaDatos table.programs {
	border-collapse: separate;
	border-spacing: 0;
}

/* Smooth transition and pointer cursor on choice columns */
.Bloque.TablaDatos table.programs td.program {
	transition: background-color 0.25s ease;
	cursor: pointer;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid transparent;
}

/* Selected column border - structural (colors per theme) */
.column-selected-top {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
.column-selected-bottom {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* Scroll indicator after selecting a choice option */
.choice-scroll-indicator {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 18px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	z-index: 9999;
	animation: choiceBounce 1.5s ease infinite;
}
.choice-scroll-indicator:hover {
	background: rgba(0,0,0,0.7);
}
@keyframes choiceBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* Attention gauge inline in progress bar */
#attentionGaugeWidget {
	float: left;
	margin-right: 24px;
	margin-top: -2px;
	line-height: 0;
}
#attentionGaugeArc,
#attentionGaugeNeedle {
	transition: all 0.6s ease;
}
#attentionGaugeTrend {
	transition: fill 0.6s ease;
}

/* Choice mobile: tap instruction overlay (hidden by default, shown via JS on mobile) */
.choice-tap-instruction {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(245,245,245,0.95);
	color: #333;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
	padding: 16px 24px;
	border-radius: 12px;
	font-size: 16px;
	z-index: 100;
	text-align: center;
	animation: choiceTapFadeIn 0.3s ease;
}
@keyframes choiceTapFadeIn {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Simple lightbox for choice card image zoom (double-click on image) */
.choice-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.choice-lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.choice-lightbox-content img {
	max-width: 100%;
	max-height: 85vh;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.choice-lightbox-close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 32px;
	height: 32px;
	background: #fff;
	color: #333;
	border-radius: 50%;
	font-size: 22px;
	line-height: 32px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.choice-lightbox-close:hover {
	background: #f44336;
	color: #fff;
}

/* Choice mobile: compact layout when hiding columns */
.choice-mobile-compact td {padding: 0 !important;}
.choice-mobile-compact td.program i {margin: 0 !important;}

/* Choice mobile: hide first column (attribute names) */
.choice-hide-attr-col tr > td:first-child {display: none !important;}

/* Choice mobile: hide status quo column */
.choice-hide-sq-col tr > td:last-child {display: none !important;}

/* Status quo button */
.choice-statusquo-mobile {text-align: center; padding: 10px 5px;}
.choice-statusquo-btn {width: 100%; padding: 12px 15px; font-size: 2.3em; font-weight: bold; color: #4c4c4c; background-color: #f5f5f5; border: 2px solid #ccc; border-radius: 6px; cursor: pointer; height: auto; line-height: 1.4; overflow: visible; white-space: normal;}
.choice-statusquo-btn:hover {background-color: #e8e8e8;}
/* .choice-statusquo-btn-selected colors defined per theme (blue.css, etc.) */

.Bloque.TablaDatos table.programs thead td {border-bottom:1px solid #dcdcdc; font-size:2em; color:#4c4c4c; font-weight:500; padding: 10px 0 12px 25px; text-align:left;line-height:1em;}
.Bloque.TablaDatos table.programs thead td.First {width:40%;}
.Bloque.TablaDatos table.programs thead td.First.choice {width: 25%;}
.Bloque.TablaDatos table.programs td.info {width:30px; padding-left:0!important; padding-right:0!important}
.Bloque.TablaDatos table.programs td .moreinfo { display: inline-block; padding-left:20px; padding-right:0; color: #2C3E50}
.Bloque.TablaDatos table.programs td .fa-lg {line-height:1.75em!important; background-color:transparent!important}
.Bloque.TablaDatos table.programs tfoot td {padding: 12px 0 15px 25px;}
.Acciones.noblank { background-image: none; padding:0 0 30px 0; margin-top:-25px;}


/********* Modificaciones TABLE SAW *****************/
.Bloque.TablaDatos table.tablesaw td span {float:none!important; padding:0!important; display:inline-block;}
.Bloque.TablaDatos table.tablesaw td.Center {padding: 10px 0 10px 20px;}
.tablesaw-cell-content {max-width: 100%!important;}
.Bloque.TablaDatos table.tablesaw.programs tr:nth-child(2n+1) {background-color: #f2f2f2}

.Bloque.TablaDatos table.tablesaw td.headrow {font-size: 2em; color: #4c4c4c; font-weight: 500;}


/********* TABLA con choice + img ************/
.choice-img {width:100%}
.choice-img td.image img {height:100px; text-align: center;}
.choice-img td.Input {width:6%!important; vertical-align: middle!important;}
.choice-img td.image {width:5%!important; padding: 10px 0 10px 0;}
.choice-img td.text {width:89%!important}

.choice-img td.image:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

/* Tabla con choice + img */
.choice-img td .image-selected {border-radius: 6px;}

/********* Aumentar en porcentaje tamaño imágenes ************/

.Bloque.TablaDatos .specialchoice table.programs td.program.percentage10 img {
    -webkit-transform: scale(1.1)!important;
    -moz-transform: scale(1.1)!important;
    -o-transform: scale(1.1)!important;
    transform: scale(1.1)!important;
}
.Bloque.TablaDatos .specialchoice table.programs td.program.percentage10 .txt-grid {margin-top:10px;}
.Bloque.TablaDatos .specialchoice table.programs td.program.percentage10 i {margin-top:10px;}

.Bloque.TablaDatos .specialchoice table.programs td.program.percentage20 img {
    -webkit-transform: scale(1.2)!important;
    -moz-transform: scale(1.2)!important;
    -o-transform: scale(1.2)!important;
    transform: scale(1.2)!important;
}
.Bloque.TablaDatos .specialchoice table.programs td.program.percentage20 .txt-grid {margin-top:10px;}
.Bloque.TablaDatos .specialchoice table.programs td.program.percentage20 i {margin-top:10px;}

.Bloque.TablaDatos .specialchoice table.programs td.program.percentage30 img {
    -webkit-transform: scale(1.3)!important;
    -moz-transform: scale(1.3)!important;
    -o-transform: scale(1.3)!important;
    transform: scale(1.3)!important;
}

.Bloque.TablaDatos .specialchoice table.programs td.program.percentage30 .txt-grid {margin-top:20px;}
.Bloque.TablaDatos .specialchoice table.programs td.program.percentage30 i {margin-top:20px;}



.Bloque.TablaDatos .specialchoice table.programs td.program.percentage40 img {
    -webkit-transform: scale(1.4)!important;
    -moz-transform: scale(1.4)!important;
    -o-transform: scale(1.4)!important;
    transform: scale(1.4)!important;
}

.Bloque.TablaDatos .specialchoice table.programs td.program.percentage40 .txt-grid {margin-top:30px;}
.Bloque.TablaDatos .specialchoice table.programs td.program.percentage40 i {margin-top:30px;}



.Bloque.TablaDatos .specialchoice table.programs td.program.percentage50 img {
    -webkit-transform: scale(1.5)!important;
    -moz-transform: scale(1.5)!important;
    -o-transform: scale(1.5)!important;
    transform: scale(1.5)!important;
}

.Bloque.TablaDatos .specialchoice table.programs td.program.percentage50 .txt-grid {margin-top:30px;}
.Bloque.TablaDatos .specialchoice table.programs td.program.percentage50 i {margin-top:30px;}

/********* TABLA con choice solo img ************/
.choice-only-img {width:100%}
.choice-only-img td.image img {height:100px; text-align:left;}
.choice-only-img td.Input {width:5%; vertical-align: middle!important;}
.choice-only-img td.image {width:90%; padding: 10px 0 10px 0;}

.choice-only-img td.image img:hover {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
}

.Datos.choice-only-img  tbody tr.highlight { background-color:transparent!important;}
.Datos.choice-only-img  tbody tr.highlight:nth-child(even) { background-color:transparent !important;}
.Datos.choice-only-img  tbody tr.highlight:nth-child(odd) { background-color:transparent !important;}


/********* TABLA con choice + img HORIZONTAL ************/
.choice-only-img .choice-horiz {width:230px; margin-right:50px; margin-bottom:30px; float:left;}
.choice-only-img .choice-horiz .Input {float:left; margin-right:40px; margin-top:30px;}
.choice-only-img .choice-horiz .image img {float:left; height:100px;}
.choice-only-img .choice-horiz .image img:hover {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
}

@media only screen and (max-width: 768px) {
.choice-only-img .choice-horiz {width:100%;}
}

/********* TABLA con choice solo img ************/
.choice-only-img2 {width:100%}
.choice-only-img2 td.image img {height:100px; max-width: 100%; text-align:left;}
.choice-only-img2 td.image {padding: 10px 0 10px 0;}

.choice-only-img2 td.col1 {width:30%}
.choice-only-img2 td.colA {width:30%}
.choice-only-img2 td.colB {width:30%}
.choice-only-img2 td.colAB {width:10%}

.choice-only-img2 td.image img:hover {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

@media only screen and (max-width: 992px) {
  .choice-only-img2 thead td {font-size:15px!important}
  .choice-only-img2 td.col1 {width:20%}
  .choice-only-img2 td.colA {width:35%}
  .choice-only-img2 td.colB {width:35%}
  .choice-only-img2 td.colAB {width:10%}
}

@media only screen and (max-width: 768px) {
  .choice-only-img2 thead td {font-size:15px!important}
  .choice-only-img2 td.image img {height:auto; max-width: 100%; text-align:left;}
  .choice-only-img2 tfoot td.col1 {font-size:13px!important;}

  .choice-only-img2 td.image img:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
   }
  }

  @media only screen and (max-width: 576px) {
    .choice-only-img2 thead td {font-size:13px!important; padding: 10px 0 10px 10px!important;}
    .choice-only-img2 tfoot td.col1 {font-size:13px!important; padding-left:10px!important}
    }

  @media only screen and (max-width: 414px) {
    .choice-only-img2 thead td {font-size:11px!important;}
    .choice-only-img2 tfoot td.col1 {font-size:12px!important;}
  }


/********* Dados ************/
.wrap{width:90px; height:90px; margin:10px auto; position:relative}
.dice{width:90px; height:90px; background:url(../img/dice.png) no-repeat; cursor:pointer;}
.dice_1{background-position:-5px -4px}
.dice_2{background-position:-5px -107px}
.dice_3{background-position:-5px -212px}
.dice_4{background-position:-5px -317px}
.dice_5{background-position:-5px -427px}
.dice_6{background-position:-5px -535px}
.dice_t{background-position:-5px -651px}
.dice_s{background-position:-5px -763px}
.dice_e{background-position:-5px -876px}
p#result{text-align:center; font-size:16px}
p#result span{font-weight:bold; color:#f30; margin:6px}
#dice_mask{width:90px; height:90px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999}


/********* Bloques ************/
.Row.Respuesta .blocks {border:1px solid #eee; margin-top:15px;}
.Row.Respuesta .block1, .Row.Respuesta .block2, .Row.Respuesta .block3 {font-size: 14px; padding:10px;}

.Row.Respuesta .block1 {background-color: #eee}
.Row.Respuesta .block2 {background-color: #fff}
.Row.Respuesta .block3 {background-color: #fff}

.Row.Respuesta .block2 .btn {
  background-color: #666;
  -webkit-box-shadow: 1px 2px #333;
  -moz-box-shadow: 1px 2px #333;
  box-shadow: 1px 2px #333;
}

.Row.Respuesta .block2 .btn:hover {
  background-color: #333;
  -webkit-box-shadow: 1px 2px #000;
  -moz-box-shadow: 1px 2px #000;
  box-shadow: 1px 2px #000;
}


/********* TABLA RESPONSIVE *****************/
table.adaptive td.headrow {
	font-size: 2em;
	color: #4c4c4c;
	font-weight: 500;
}

table.adaptive th,
table.adaptive td {
  box-sizing: border-box;
  padding: .5em .7em;
}
.Bloque.TablaDatos td span.label-hidable {
  display: none;
}
@media screen and (max-width: 600px) {
  table.adaptive {
    border: 0;
  }
  table.adaptive caption {
    font-size: 1.3em;
  }
  table.adaptive thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table.adaptive tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  table.adaptive td.headrow {
	font-size: 1.6em;
  /* font-style: italic;*/
	text-align: center;
  }

  table.adaptive td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  .Bloque.TablaDatos td span.label-hidable {
    display: inline-block;
    padding: 0 0 0 10px;
  }
  .label-hidable.text-center {
    text-align: left!important;
    padding-left: 5px!important; /* align with td.headrow.justify-left so matrix question and answer rows share the same vertical */
    margin-bottom: 3px!important;
  }
  .Bloque.Titular .Row {
    padding-left: 5px!important;
  }
  td.headrow.justify-left {
    padding-left: 5px!important;
  }
table.adaptive td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    /*font-weight: bold;
    text-transform: uppercase;*/
  }

  .Bloque.TablaDatos table.adaptive td {font-size:1.5em!important; font-weight: 400;}
  .Bloque.TablaDatos table.adaptive td.headrow {font-size:1.6em!important; font-weight: 600; color:#444; text-align: center;}


  table.adaptive td:last-child {
    border-bottom: 0;
  }

.Datos table.adaptive tbody tr.highlight { background-color:transparent!important;}
.Datos table.adaptive tbody tr.highlight:nth-child(even) { background-color:transparent !important;}
.Datos table.adaptive tbody tr.highlight:nth-child(odd) { background-color:transparent !important;}
.Datos table.adaptive tbody tr.highlight td.Rowspan { background-color:transparent !important;}

.Datos table.adaptive td.Center {padding-right: 30px!important; text-align: right;}

}



/********* SLIDER **************/
.control-slider {background-color:#FFF; padding:20px; border:1px solid #DDD; margin-top:15px; margin-bottom:15px;}
.control-slider .label-min {font-size:13px; color:#333; font-weight:bold;  float:left; display:block; margin-top:-15px;}
.control-slider .label-max {font-size:13px; color:#333; font-weight:bold; float:right; display:block; margin-top:-15px;}
.control-slider .label-center {text-align: center; position: relative; width: 100%; font-size: 13px; color: #333; font-weight: bold;}
.control-slider .slider-h {margin-top: 25px; margin-top: 30px; height:15px; background-color: #eee}
.control-slider .slider-labels {float:left; width:100%}
.control-slider .amount {font-size:14px; color:#333; font-weight: 700;}
.ui-slider {text-align: center!important;} /* El margen intenta corregir el centrado del botón del sider */

/********* IMPORTANCE GROUP (battery of sliders) **************/
.importance-group-header.fixed { position: fixed; top: 0; z-index: 10; background: #fff; display: none; border-bottom: 2px solid #e0e0e0; }
.importance-group-item { padding: 15px 0; }
.importance-group-item + .importance-group-item { border-top: 2px solid #ccc; }
.importance-group-item .Row, .importance-group-item .row { border: none !important; }
.importance-group-label { margin-bottom: 0; }
.importance-group-label p { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 5px; }
.importance-group-item .control-slider { margin-top: 5px; margin-bottom: 5px; }

/*
#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}
#custom-handle {
  width: 20px;
  height: 2.6em;
  top: 8%;
  margin-top: -.8em;
  text-align: center;
  line-height: 2.6em;
}
*/

 /********* Fin Modificaciones TABLE SAW *****************/

.Bloque.TablaDatos td em.TxtInfo { display:block; margin:3px 0 0 0; font-size:0.875em;}
.Bloque.TablaDatos td p { margin:8px 0 8px 0; line-height: 130%;}
.Bloque.TablaDatos tr:hover i {background-color:#FFF; opacity:0.9;filter:alpha(opacity=90);}
.Bloque.TablaDatos tfoot td { font-size:1.8em; line-height:1em; font-weight:700;letter-spacing:-0.04em; padding:20px 0 22px 25px;}
.Bloque.TablaDatos tfoot td input[type=radio] + label { margin-left:3px;}

.Bloque .EscalaValoracion { background-color: #f9f9f9; height:100%; overflow:hidden; padding:20px 25px;}
.Bloque .EscalaValoracion div { float:left;}
.Bloque .EscalaValoracion ul { -webkit-border-radius: 5px;-moz-border-radius: 5px; border:1px solid #e1e1e1;	border-radius: 5px;	background-color: #eee;	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.12);-moz-box-shadow: 0 0 5px rgba(0,0,0,.12);box-shadow: 0 0 5px rgba(0,0,0,.12); padding: 5px 10px; margin-bottom:10px; text-align:center}
.Bloque .EscalaValoracion ul li { display:inline-block; margin:0 5%;}
.Bloque .EscalaValoracion .Menor {width:45%;}
.Bloque .EscalaValoracion .Menor p { text-align:left; color:#740000; font-size:1.8em; font-weight:700;}
.Bloque .EscalaValoracion .Duda { width:6%; margin:0 2%; position:relative; text-align: center;}
.Bloque .EscalaValoracion .Duda p:before { content:url(../img/iconos/ico-menor.png); position:absolute; top:10px; left:-13px;}
.Bloque .EscalaValoracion .Duda p:after { content:url(../img/iconos/ico-mayor.png); position:absolute; top:10px; right:-13px;}
.Bloque .EscalaValoracion .Duda p { -webkit-border-radius: 5px;-moz-border-radius: 5px; border:1px solid #e1e1e1; border-radius: 5px; background-color: #eee;-webkit-box-shadow: 0 0 5px rgba(0,0,0,.12);-moz-box-shadow: 0 0 5px rgba(0,0,0,.12);box-shadow: 0 0 5px rgba(0,0,0,.12); padding: 5px 10px; text-align:center;margin-bottom:10px;}
.Bloque .EscalaValoracion .Duda span { text-align:center; color:#000; font-size:1.65em; font-weight:700; display:block}
.Bloque .EscalaValoracion .Mayor {width:45%;}
.Bloque .EscalaValoracion .Mayor p { text-align:right; color:#4aa600; font-size:1.8em; font-weight:700;}

.Bloque .EscalaValoracion.EscalaValoracion-3values ul li {margin: 0 11%;}
.Bloque .EscalaValoracion.EscalaValoracion-4values ul li {margin: 0 7%;}
.EscalaValoracion-5values ul {display: flex !important; justify-content: space-around !important; align-items: center !important; padding: 5px 0 !important;}
.EscalaValoracion-5values ul li {margin: 0 !important; flex: 1; text-align: center;}
.Bloque .EscalaValoracion.EscalaNoArrows .Duda p:before { content:none;}
.Bloque .EscalaValoracion.EscalaNoArrows .Duda p:after { content:none;}
.delete-value-up {margin-top:-30px}

@media only screen and (max-width: 800px) {
  .delete-value-up {margin-top:0}
  }




.Bloque .EscalaValoracion2 { background-color: #f9f9f9; height:100%; overflow:hidden; padding:20px 25px;}
.Bloque .EscalaValoracion2 div { float:left;}
.Bloque .EscalaValoracion2 div.row {width: 100%;  -webkit-border-radius: 5px;-moz-border-radius: 5px; border:1px solid #e1e1e1;	border-radius: 5px;	background-color: #eee;	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.12);-moz-box-shadow: 0 0 5px rgba(0,0,0,.12);box-shadow: 0 0 5px rgba(0,0,0,.12); padding: 20px 0; margin-bottom:10px; text-align:center}
.Bloque .EscalaValoracion2 .escala-completa {width:100%}
.Bloque .EscalaValoracion2 ul li { display:inline-block; margin:0 2.1%; font-size:16px;}
.EscalaValoracion2 ul {display: flex !important; justify-content: space-around !important; align-items: center !important; padding: 0 !important;}
.EscalaValoracion2 ul li {margin: 0 !important; flex: 1; text-align: center; display: flex !important; flex-direction: column; align-items: center;}

.Bloque .EscalaValoracion2 label {display: block;}
.Bloque .EscalaValoracion2 .valor {display: block; float:none; clear:both; text-align: center;  margin-top:10px}

.Bloque .EscalaValoracion2 .valor.min {font-weight: bold;}
.Bloque .EscalaValoracion2 .valor.max {font-weight: bold;}

.leyenda.mb {display:none}

.Bloque .EscalaValoracion2 .leyenda {
  margin-bottom: 20px;
  width:100%;
  font-size:18px;
}

.Bloque .EscalaValoracion2 .leyenda .ninguna {
  float:left;
  width:50%;

}

.Bloque .EscalaValoracion2 .leyenda .mucha {
  float:right;
  width:50%;
  text-align:right;
}



/* Validacion */
label.error { color: #990000; font-style:italic; font-size:15px !important;}
.Bloque.TablaDatos label.error { display:block; margin:3px 0 0 0}
.Bloque.TablaDatos label.error .fa { margin-right:6px; }
/* Align the question-level error label (direct child of .Row.Datos) with the
   radio/checkbox column so the message sits under the controls, not under the
   answer text. The actual X of the radio/checkbox visual depends on screen
   size (different td.Input rendering width on desktop vs mobile). */
.Bloque.TablaDatos > .Row.Datos > label.error { padding-left:28px; }
@media only screen and (max-width: 600px) {
	.Bloque.TablaDatos > .Row.Datos > label.error { padding-left:14px; }
}
textarea.ts-invalid, input.ts-invalid, .Bloque.TablaDatos textarea.ts-invalid { border:1px solid #990000 !important; box-shadow:0 0 4px rgba(153,0,0,0.2); }

/* Acciones */
.Acciones { background:url(../img/background/fondo-cabecera.gif) 0 0 repeat-x; padding:10px 0 30px 0;}
.Acciones ul { height:100%; overflow:hidden; padding-bottom:5px;}
.Acciones ul.save {float:left;}
.Acciones ul.prev-next {float:right;}
.Acciones ul li { display:inline;margin-left:5px;}
.Acciones ul.save li .btn {background-color: #555; box-shadow: 1px 2px #333;}
.Acciones ul.save li .btn:hover {background-color: #2c620b; box-shadow: 1px 2px #333;}

/* Acciones Posicion_01 */
#CONTENIDO.Posicion_01 .Acciones ul { float:right;}
#CONTENIDO.Posicion_01 .Acciones ul li {margin-left:5px;}

/* Acciones Posicion_02 */
#CONTENIDO.Posicion_02 .Acciones ul { float:left;}
#CONTENIDO.Posicion_02 .Acciones ul li {margin-right:5px;}


/* DIALOG //////////////////////////////////////////////////////////////////////////////////////////////// */
.ui-dialog .ui-widget-header {background: #333!important;}
.ui-dialog .ui-dialog-title {width: 100%!important; float:none!important;}
.ui-dialog .ui-dialog-titlebar-close {background: url(../img/btn-cerrar.png) 0 0 no-repeat!important; margin: -10px 0 0 0!important;}

.ui-dialog .ui-dialog-buttonset .ui-button {background-color: #DDD!important; color:#333!important; -webkit-box-shadow: 1px 2px #999!important; -moz-box-shadow: 1px 2px #999!important; box-shadow: 1px 2px #999;}


/* BOTONES //////////////////////////////////////////////////////////////////////////////////////////////// */
/* Formato para boton tipo input */
button.btn, input.btn { font-size:1.8em; line-height:1em; padding: 3px 20px 0 20px; height: 38px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-family: 'Maven Pro', sans-serif; font-weight:500;-webkit-transition: all 0.1s ease-out;transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;}
input.btn:focus { outline:none; border:none;}

/* Formato para boton tipo a */
a.btn {  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;font-size:1em; line-height:1.3em;padding:8px 20px 6px 20px; margin:3px 0 3px 3px; display:inline-block; -webkit-transition: all 0.1s ease-out;transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out; outline:none;}
a.btn span { display:inline-block}

/* Formato para botones de lista de selección */
.btn.Arriba { background-image:url(../img/iconos/ico-arrow-top.png); background-position:15px 15px; background-repeat:no-repeat; padding-left:50px; width:70px}
.btn.Abajo { background-image:url(../img/iconos/ico-arrow-bottom.png); background-position:15px 15px; background-repeat:no-repeat; padding-left:50px; width:70px}

input.btn2 {margin-top:10px; background-color:#EEE; color:#666; border:1px solid #DDD; font-size:1.3em; line-height:1em; padding:0 10px; height: 28px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-family: 'Maven Pro', sans-serif; font-weight:500;-webkit-transition: all 0.1s ease-out;transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;}
input.btn2:hover {background-color: #e5e5e5}

input.btn3 {background-color:#333; color:#fff; border:1px solid #000; font-size:15px; line-height:1em; padding:0 20px; height: 38px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-family: 'Maven Pro', sans-serif; font-weight:500;-webkit-transition: all 0.1s ease-out;transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;}
input.btn3:focus { outline:none; border:none;}
input.btn3:hover {background-color: #999;  border:1px solid #666;}

.btn-large {background-color:#333; color:#fff; border:1px solid #000; font-size:25px; line-height:1em; padding:0 20px; height: 80px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-family: 'Maven Pro', sans-serif; font-weight:500;-webkit-transition: all 0.1s ease-out;transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;}
.btn-large:hover {background-color: #eee;  color:#222; border:1px solid #666;}
.btn-large .fas {opacity: 0.6}
.btn-large:hover .fas {color:#000;}

 .btn.secondary {
  background-color: #666;
  -webkit-box-shadow: 1px 2px #333;
  -moz-box-shadow: 1px 2px #333;
  box-shadow: 1px 2px #333;
  font-size:14px;
}

.btn.secondary:hover {
  background-color: #333;
  -webkit-box-shadow: 1px 2px #000;
  -moz-box-shadow: 1px 2px #000;
  box-shadow: 1px 2px #000;
}

/* ICONOS //////////////////////////////////////////////////////////////////////////////////////////////// */
i { display:inline-block; margin-right:10px; float:left;}
i.ico-info { width:26px; height:26px; background:url(../img/iconos/ico-info.png) 0 0 no-repeat;}

/* ESTILOS PARA POPUPS //////////////////////////////////////////////////////////////////////////////////////////////// */
body.Popup { background-color:#FFF;}
body.Popup .Main { padding:15px; position:relative;}
body.Popup .Main .Cerrar { text-align:right; font-size:1.8em; margin-bottom:20px;}
body.Popup .Main .Contenido { padding:25px;}
body.Popup .Main .Contenido .Titular { font-size:2.4em; line-height:1.250em; padding:0 25px 15px 25px; border-bottom:1px solid #dcdcdc;}
body.Popup .Main .Contenido .Cuerpo { font-size:1.8em; line-height:1.333em; padding:25px 25px 0 25px;}
body.Popup .Main .Contenido .Cuerpo p { margin-bottom:15px;}

/******* Contador ********/
p#note {display:none;}
.counter {margin-top:20px; float:right; /*width: 265px;*/}
.counter .counter-label {font-size: 15px; float:left; margin-top:7px; margin-right: 10px}

/******* Label / Value *****/
/*.quantity-block  {float: right!important; margin-top:20px; margin-right: 20px; margin-bottom:-35px; clear: both; width: 30%}*/
.quantity-block {position: fixed; top:265px; right:100px; background-color: #FFF; width: auto; margin-top:20px; margin-right: 20px;}
.quantity-block .block1 {margin-bottom:10px;}
.quantity-block .block2 {background-color: #EEE; padding:10px; border-radius: 3px; border:1px solid #DDD; width: 215px}
.quantity-block .label-txt {font-size:14px; font-weight: 600;}
.quantity-block .value-txt {font-size:17px; font-weight: 600; color:#2FACB2;}

/*@media only screen and (max-width: 1545px) {.quantity-block {width: 25%}}
@media only screen and (max-width: 1285px) {.quantity-block {width: 22%}}
@media only screen and (max-width: 945px) {.quantity-block {width: 30%}}
@media only screen and (max-width: 767px) {.quantity-block {width: 35%}}
@media only screen and (max-width: 650px) {.quantity-block {width: 40%}}
@media only screen and (max-width: 575px) {.quantity-block {width: 90%}}	*/


@media only screen and (max-width: 1366px) {.quantity-block {right:50px!important}}
@media only screen and (max-width: 1250px) {.quantity-block {right:10px!important}}
@media only screen and (max-width: 999px) {.bandejas-fijas {margin-top:60px!important;}}

@media only screen and (max-width: 867px) {
	.quantity-block {top:300px}
	.bandejas-fijas {margin-top:80px!important;}
}

@media only screen and (max-width: 479px) {.quantity-block {top:370px}}
@media only screen and (max-width: 408px) {.quantity-block {top:400px}}
@media only screen and (max-width: 372px) {.quantity-block {top:430px}}
@media only screen and (max-width: 354px) {.quantity-block {top:450px}}
@media only screen and (max-width: 305px) {.quantity-block {top:470px}}


/******* Clearfix *****/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/* CLASES GENERICAS //////////////////////////////////////////////////////////////////////////////////////////////// */
/* Alineacion -------------------------------------------------- */
.AlignRight { text-align:right;}
.AlignCenter {text-align:center!important;}
.AlignLeft {text-align:left}

/* Flotacion --------------------------------------------------- */
.FloatLeft { float:left;}
.FloatRight { float:right;}
.Clear { clear:both;}
.Clearfix { height:100%; overflow:hidden;}

/* Estilo Tipografia -------------------------------------------------- */
.Underline { text-decoration:underline;}
.noborder {border-bottom:none!important;}
.Bold { font-weight:bold;}

/* Paddings - Margins*/
.p-right10 {padding-right:10px!important;}
.p-bottom10 {padding-bottom:10px!important;}

.noborderbottom {border-bottom: 0!important}

.cursor-hand:hover { cursor: pointer; cursor: hand; }

input.readonly {background-color: #EEE; border-color:1px solid #DDD; color:#666;}
p.descrip {font-family:Arial; color:#666!important; line-height: 130%!important; font-size:15px!important;}

.w100 {width: 100%!important;}

/******* Barra progreso gris claro **********/
#Progressbar.ui-widget-content {border: 1px solid #dddddd; background: #e5e5e5; color: #333333; }



/*********** ESTILOS BANDEJAS *******************/

#bandejas {margin:3px 0 0 0; width:100%; text-align: center;}
#bandejas p {font-size:18px}

.basketsGroup {text-align: center; display:inline-block}

.repository {border: 1px solid #CCC; background-color:#EEE; list-style-type: none; margin: 0;  float: left; margin-bottom:20px; padding:0; min-height:80px!important; min-width:300px!important; width: auto; border: 1px solid #CCC;  padding: 12px 10px 0; clear: both; }
.repository li {margin: 0 10px 5px 0; padding: 0px; font-size: 1.2em; border: none; background: transparent; float: left;}

.basketMainContainer {width:auto; margin-top:20px; display: inline-block; text-align:center}
.basketMainContainer .title {width:100%; background-color:#2FACB2!important; color:#FFF; font-weight:bold; text-transform:uppercase;  text-align:center; margin: 0!important; padding:5px 0!important; font-size:12px; }

.basketContainer {float:left;  margin-right: 10px; width: auto; margin-bottom:25px;}
.basketContainer .title {background-color:#2FACB2!important; color:#FFF; font-weight:bold; text-transform:uppercase; width:100%!important; text-align:center; margin: -3px 0 0 0!important; padding:5px 0!important; font-size:12px; display: table;}
.basket {border: 1px solid #2facb2; /*float: left;*/ list-style-type: none; margin: 0 0 0; min-height: 70px; min-width: 125px; padding: 60px 0 0; width: 200px; background: url("../img/transp.png") repeat;  border-top: none; display: inline-block;}
.basket li {margin: 0 5px 5px 5px; padding: 0px; font-size: 1.2em; border: none; background: transparent; float: left;}

.basketsGroup.basket_6 .basket {width:175px;}

.onecol .basket {width:100px;}
.onecol .basket li {float:none;}

/*.basketVariant.basketMainContainer {width: 50%!important; float:left;}
.basketVariant.basketMainContainer .title {width: 400px!important; float:right;}*/
.basketVariant .repository {width: 378px!important; float:right; margin-bottom: 0; border:1px solid #2facb2; border-top:none; background-color: #fff}
.basketVariant .basket {width:auto!important;}
.basketVariant.onecol {float:right; margin-top:20px;}
.basketVariant.onecol .basket {width:90px!important; min-width:150px; min-height:90px; padding-top:0!important;}
.basketMainContainer.basketVariant .title {width:100%; margin: 0!important; padding:5px 0!important;}

.wordBasket .repository {border: 1px solid #CCC; background-color:#EEE; min-height:auto!important; min-width:300px!important;  padding: 20px 10px 15px; }
.wordBasket .repository li .word {background-color: #fff; border:1px solid #ddd; padding:10px; font-size: 15px; color:#333;}
.wordBasket .repository li .word:hover {cursor: move;}
.wordBasketsGroup .basket {min-height: auto; padding: 50px 0 2px; background-image: none}
.wordBasketsGroup .basket .word {background-color: #D6F0F1; border:1px solid #B6E4E6; padding:10px; font-size: 15px; color:#24ACB3;}
.wordBasketsGroup .basket .word:hover {cursor: move;}


/* Basket Percentage 11 baskets */
.basket_percentage11 .connectedSortable li img {height: auto;}
.basket_percentage11 .repository {min-height: 55px!important; width: 950px;}
.basket_percentage11 .repository li {margin:0;}
.basket_percentage11 .thumb:hover {transform: scale(1.0);}
.basketsGroup.basket_percentage11 .basket li img:hover {transform: scale(6.0);}
.basketsGroup.basket_percentage11 {width:100%;}
.basketsGroup.basket_percentage11 .row {display: flex;}
.basketsGroup.basket_percentage11 .basketContainer {float: left; margin-left: 5px; margin-right: 5px; width: 9%; margin-bottom: 25px;}
.basketsGroup.basket_percentage11 .basket {width:10%; min-height:30px; border-bottom-width: 3px;}
.basketsGroup.basket_percentage11 .basket {float: none; margin: 0 0 0; min-width: unset; padding: 0 0 0; width: unset; display: flow-root;}
.basketsGroup.basket_percentage11 .basket li {margin: 0 4px 5px 5px; float: none;}
.basketsGroup.basket_percentage11 .basket li img {width: 100%; height: auto;}




/* Basket 6 mobile */

@media only screen and (max-width:576px) {

  .basketsGroup.basket_6 .basket {
      margin: 0 0 0;
      min-height: 70px;
      min-width: auto;
      width: 128px;
      padding: 5px 0 0;
      display: inline-block;
  }

  .connectedSortable li img {
    height: 40px!important;
  }

  .basketsGroup.basket_6 .basketContainer {
    margin-right:5px;
  }

  .basket_top .basketContainer {
    margin-bottom:0!important;
    margin-top:30px;
  }

}


@media only screen and (max-width:413.98px) {

  .basketsGroup.basket_6 .basket {
      margin: 0 0 0;
      min-height: 70px;
      min-width: auto;
      width: 115px;
      padding: 5px 0 0;
      display: inline-block;
  }

  .connectedSortable li img {
    height: 40px!important;
  }

  .basketsGroup.basket_6 .basketContainer {
    margin-right:5px;
  }

}


@media only screen and (max-width: 374.98px) {

  .basketsGroup.basket_6 .basket {
      margin: 0 0 0;
      min-height: 70px;
      min-width: auto;
      width: 97px;
      padding: 5px 0 0;
      display: inline-block;
  }

  .connectedSortable li img {
    height: 40px!important;
  }

  .basketsGroup.basket_6 .basketContainer {
    margin-right:5px;
  }

}


@media only screen and (max-width: 320px) {

  .basketsGroup.basket_6 .basket {
      margin: 0 0 0;
      min-height: 70px;
      min-width: auto;
      width: 95px;
      padding: 5px 0 0;
      display: inline-block;
  }

  .connectedSortable li img {
    height: 35px!important;
  }

  .basketsGroup.basket_6 .basketContainer {
    margin-right:5px;
   /* display: inline-block;
    margin: 0 0 5em;*/
  }

  /*.basketsGroup.basket_6 .basketContainer:nth-child(4) {
    clear: both!important;
  }*/

}

.ico-arrow {font-size: 40px; margin-top:0px; }
.ico-arrow .ico-txt i {float:none;}

/*.basketVariant .thumb:hover {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
}*/

/*.header-titles {}
.title-column1 {float:left!important;}
.title-column1In {padding: 0 10px 0; clear: both; width: 378px!important; float:right;}
.col-left.title-column1, .col-left .title-column3 {font-size: 15px; font-weight: 700; text-transform: uppercase; padding-bottom:0;}
.title-column2 {width:80px; margin-top:0; padding-bottom:0;}
.title-column3 {display: inline-block; min-width:150px; padding-top:0!important;}*/
.title-column1, .title-column2 {font-size: 15px; font-weight: 700; text-transform: uppercase; padding-bottom:0; margin-bottom: 30px}
.first-row .ico-arrow {margin-top:45px; }

.centerdiv3 {margin:auto; width:40%;}

@media only screen and (max-width: 1792px) {
.centerdiv3 {width:45%!important;}
}

@media only screen and (max-width: 1592px) {
.centerdiv3 {width:50%!important;}
}

@media only screen and (max-width: 1434px) {
.centerdiv3 {width:55%!important;}
}

@media only screen and (max-width: 1302px) {
.centerdiv3 {width:60%!important;}
}

@media only screen and (max-width: 1194px) {
.centerdiv3 {width:65%!important;}
}

@media only screen and (max-width: 1113px) {
.centerdiv3 {width:75%!important;}
.basketVariant .repository,  .title-column1 {width: 300px!important; min-width: initial!important;}
}

@media only screen and (max-width: 850px) {
.centerdiv3 {width:80%!important;}
}

@media only screen and (max-width: 796px) {
.centerdiv3 {width:85%!important;}
}

@media only screen and (max-width: 750px) {
.centerdiv3 {width:90%!important;}
}

@media only screen and (max-width: 708px) {
.centerdiv3 {width:95%!important;}
}

@media only screen and (max-width: 672px) {
.centerdiv3 {width:100%!important;}
.basketVariant .repository,  .title-column1 {width: 250px!important; min-width: initial!important;}
}

@media only screen and (max-width: 686px) {
}




.pinar {background:url(../img/pinar.jpg) 0 0 no-repeat; background-size: cover}
#row1 {width:100%; float:left;}
#row2 {width:100%; float:left;}
.pull-right {float:right;}
.pull-left {float:left;}
.pinar .basket {width:300px;  margin: 0; background: url("../img/transp.png") repeat; /*border:2px solid #FFF;*/ border:none;}
.pinar .basketContainer .title {width:302px; display: table;}
.txt {color:#FFF; font-size:13px; font-weight: bold;  margin-top:30px;}
.pull-left .txt {text-align: left; margin-left: 15px;}
.pull-right .txt {text-align: right; margin-right: 15px;}
.pinar .basketContainer.pull-left {margin-left:10px!important; margin-bottom: 25px;}
.pinar .basketContainer.pull-right {margin-right:10px!important; margin-bottom: 25px;}
.pinar .basketMainContainer {margin-top:0}
.pinar #basket3 {margin-left: 8%!important}
.pinar #basket4 {margin-right:11%!important}


@media only screen and (max-width: 500px) {
    .pinar .basket {width:125px;}
    .pinar .basketContainer .title {width:127px;}
    .repository {margin-left:0; margin-right: 0; min-width: 250px!important}
    #bandejas {margin: 0;}
}


.fix:after {
	content: " "; /* Older browser do not support empty content */
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

.thumb:hover {
    -webkit-transform: scale(2.0);
    -moz-transform: scale(2.0);
    -o-transform: scale(2.0);
    transform: scale(2.0);
}


.thumbLarger:hover {
    -webkit-transform: scale(4.0)!important;
    -moz-transform: scale(4.0)!important;
    -o-transform: scale(4.0)!important;
    transform: scale(4.0)!important;
}


.thumb {
   width:80px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

.connectedSortable li img {
  object-fit: contain;
  object-position: center;
  height: 65px;
  width:auto;
  /*width: 50px;*/
}



/************************** Img tablas **********************************/
.programs td.program img {object-fit: fill; width: 49%; object-position: center center; display:block; margin: 0 auto;}
.programs td.program {padding:0!important;}

.programs td.program i.imgtxt {width: 50px; overflow: hidden; float:left!important;}
.programs td.program img.pull-left.p-right10 {width:auto}


/****** Para drag & drop - Ranking *********/
.ranking-hint {
    text-align: center;
    color: #888;
    font-size: 13px;
    margin-bottom: 12px;
    font-style: italic;
}
#dragdrop.ranking-list {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    width: 50%;
}
#dragdrop .ranking-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
    padding: 10px 12px;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 15px;
    color: #333;
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: grab;
}
#dragdrop .ranking-item:hover {
    border-color: #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
#dragdrop .ranking-item.ui-sortable-helper {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: #999;
    cursor: grabbing;
}
.ranking-position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.ranking-grip {
    color: #bbb;
    font-size: 16px;
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
}
.ranking-text {
    flex: 1;
    min-width: 0;
}
.ranking-placeholder {
    height: 44px;
    margin: 0 0 6px 0;
    border: 2px dashed #ccc;
    border-radius: 6px;
    background: #fafafa;
}

 /******* Smile ******/
#smile-set {width:70%; margin: 0 auto;}
.smile-set-center {text-align:center;}
#smile-set img {height:auto; max-width:100%; padding:5px; border:1px solid transparent;}
#smile-set .Respuesta {text-align: center; padding:0; margin-bottom:20px;}
.resp-smile {width: 19%; float: left; margin-right: 5px}
.selected{border-radius:4px;}

/****** Multiple Chioce *******/
.choice-most {background-color:#E4F2D9;}
.choice-least {background-color:#EFE0E0;}
.choice-neither {background-color:#e9ecef;}
.Bloque.TablaDatos tfoot .choice-most td.AlignLeft {color:#4BA800}
.Bloque.TablaDatos tfoot .choice-least td.AlignLeft {color:#780000}
.Bloque.TablaDatos tfoot .choice-neither td.AlignLeft {color:#000000}
/*.Bloque.TablaDatos tfoot .choice-least td.AlignCenter, .Bloque.TablaDatos tfoot .choice-most td.AlignCenter {padding:0!important;}*/
.radio-merge {background-color: #f3f3f3;}


/**** TABLA MALLA +***/
.RespuestaTable { overflow-x:auto;}
.TablaMalla {background-color:#FFF; width:100%; margin:0 auto; border-collapse:separate;}
.TablaMalla th { background-color:#e5e5e5; border-bottom:1px solid #fff; border-right:1px solid #eee; font-size:2em; color:#4c4c4c; font-weight:500; padding:20px 0 22px 25px; text-align:center ;line-height:1em;}
.TablaMalla th.mainth {background-color: #333; color:#FFF; font-size:3em;}
.TablaMalla td {color:#4c4c4c; font-size:1.6em; line-height:1em; text-align:center; border-bottom:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:10px 15px 10px 15px; background: #FFF}
.TablaMalla td.high {font-size:2em; color:#4c4c4c; font-weight:500; background-color: #e5e5e5}
.TablaMalla td.superhigh {background-color: #eee; font-weight: 500}
.TablaMalla td.superhigh.elected {background-color: #fbcb5e; color:#000}
.TablaMalla td.nowrite {background-color:lightyellow; color:orange;}
.TablaMalla td.Rowspan {border-left:1px solid #dcdcdc;}

.centerdiv1 {width:100%; padding:0;}
.centerdiv2 {margin:auto; width:80%;}
.centerdiv4 {margin:auto; width:100%;}

.Bloque .RespuestaTable { padding:1.5em 0 2em 0;}

/**** TABLA SUMA **+*/
.TablaSuma td:nth-child(1) {width: 90px}
.TablaSuma tr:last-child p {color:#FFF; font-size:18px; font-weight: 700;  border-radius: 3px; width: 85px; text-align: center; margin:0; line-height: 40px}
.TablaSuma tr:nth-child(even) { background-color: rgb(250, 250, 250)}
.TablaSuma tr:nth-child(odd) { background-color:#FFF;}

.TablaSumaLitFirst td:nth-child(1) {width: 190px}
.TablaSumaLitFirst tr:last-child p {color:#FFF; font-size:18px; font-weight: 700;  border-radius: 3px; width: 85px; text-align: center; margin:0; line-height: 40px}
.TablaSumaLitFirst tr:nth-child(even) { background-color: rgb(250, 250, 250)}
.TablaSumaLitFirst tr:nth-child(odd) { background-color:#FFF;}

/****** Espera *****/
  #progressbar .ui-progressbar-value {
    background-color: #ccc!important;
  }

/***** Google Doc *****/

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

#Iframe-Sheet {
  max-width: 810px;
  max-height: max-content;
  /*overflow-y: auto;*/
  overflow-y: hidden;
 }
 /* inner wrapper: make responsive */
 .responsive-wrapper {
  position: relative;
  height: 0;  /* gets height from padding-bottom setting */
  -webkit-overflow-scrolling: touch;
  /*overflow: auto;*/
  overflow:none;
 }
 .responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
 }
 /* padding-bottom = h/w as a % */
 .responsive-wrapper-wxh {
  /*padding-bottom: 363.6364%;*/
  padding-bottom: 143.6364%;
 }
 .iframe-border {
  border: 1px solid #222;
 }
 .center-block-horiz {
  margin-left: auto !important;
  margin-right: auto !important;
 }



/******** Contenido Doc *******/

.Doc {
   padding-left:20px;
   padding-right:20px;
}

.Doc .h2 {
  font-size: 25px!important;
  font-weight: 700!important;
  text-align: center;
}

.Doc .h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 35px;
    margin-bottom: 10px;
    text-transform: uppercase;
    color:#000;
    text-decoration: underline;
}

.Doc .h4 {
  font-size: 19px!important;
  color: #000;
  line-height: 1.250em;
  list-style: circle;
  margin-top:30px;
  margin-bottom:15px;
  text-align: center;
  font-weight: 600;
}

.Doc .colored {
  color: #eb5008!important;
}

.Doc p {
  font-size: 19px!important;
  color: #000;
  line-height: 1.250em;
  margin:20px 0;
  text-align: justify;
}

.Doc ul {
  padding-left:30px;
}

.Doc li {
  font-size: 19px!important;
  color: #000;
  line-height: 1.250em;
  list-style: disc;
  margin-bottom:15px;
  text-align: justify;
}

.Doc .logos-container {
  display: flex;
  margin-bottom:20px;
}

.Doc .logo {
  flex: 1;
}

.Doc .logo:first-child {
  margin-right: 20px;
}

.Doc .logo2 {
  text-align:right;
}

.Doc .logo2 img {
  height:100px;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

.Doc .header {
  display: flex;
  margin-bottom:20px;
  justify-content: space-between;
  align-items: center;
}

.Doc .header .title {
  font-size: 23px;
  font-weight: 600;
  margin-top: 35px;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #000;
  background-color: #EEE;
  padding:10px;
  flex-grow: 1 !important;
}

.Doc .header .text {
  font-size: 18px;
  font-weight: 600;
  margin-top: 35px;
  margin-bottom: 10px;
  color: #000;
  border:1px solid #ddd;
  padding:20px;
}


@media only screen and (max-width: 576px) {
  .Doc .header .text {
    font-size: 15px;
  }
}

.Doc .images {margin-bottom:30px}

.Doc .images .row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  flex-direction: row;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  align-items: center;
}

.Doc .images .cell {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 5px;
  margin: 5px;
  text-align: center;
}

.Doc .images img {
  max-width:100%;
  max-height:250px;
  height:auto;
  object-fit: contain;
  object-position: center;
}

.images_larger img {
  max-height: 500px!important;
}

.Doc .images .legende {
  font-size:12px;
  font-weight: 500;
  padding-top: 5px;
}

.Doc .images_larger .legende {
  font-size:16px;
  font-weight: 500;
  color: #07429b;
}

@media (max-width: 767.98px) {
  .Doc .images img {
    max-height:250px;
    height:auto;
  }
}

@media (max-width: 575.98px) {

  .Doc .images .row {
    display:block;
  }

  .Doc .images .cell {
    /* border:1px solid #165480; */
    margin-bottom:30px;
  }

  .Doc .images {
    margin-bottom: 0px;
  }

  .Doc .images .legende {
    padding-top:10px;
    padding-bottom:10px;
  }


}

/***** Grid de 8 imágenes ****/
.Bloque.TablaDatos .img-grid table.programs td.program img {height: 90px; width: auto; }
.Bloque.TablaDatos .img-grid table.programs tr:hover i {background-color:transparent!important; opacity:1!important;filter:alpha(opacity=100)!important;}
.Bloque.TablaDatos .img-grid table.programs tr td {padding-bottom:5px!important; padding-top:5px!important;}
.Bloque.TablaDatos .img-grid table.programs tr td img.yellow {border:4px solid #f39c12;}
.Bloque.TablaDatos .img-grid table.programs tr td img.green {border:4px solid #428619;border:8px solid #428619;}
.Bloque.TablaDatos .img-grid table.programs tr td img.blue {border:4px solid #0C3C60;border:8px solid #0C3C60;}

/***** Special Choice ********/
.Bloque.TablaDatos .specialchoice table.programs td.program {text-align: center;}
.Bloque.TablaDatos .specialchoice table.programs td.program .txt-grid {font-size:15px; margin-bottom:3px; margin:4px 0px 3px 0px;}
.Bloque.TablaDatos .specialchoice table.programs td.program img {height: 90px; width: auto;}
.Bloque.TablaDatos .specialchoice table.programs tr:hover i {background-color:transparent; opacity:1.0;filter:alpha(opacity=100);}

.Bloque.TablaDatos .specialchoice-largeimage table.programs td.program img {
  height: auto;
  width: 100%;
}

.Bloque.TablaDatos .specialchoice-largeimage table.programs thead td.col1 {width: 40%; padding-top:5px!important; padding-bottom:5px!important}
.Bloque.TablaDatos .specialchoice-largeimage table.programs thead td.col2 {width: 40%; padding-top:5px!important; padding-bottom:5px!important}
.Bloque.TablaDatos .specialchoice-largeimage table.programs thead td.col3 {width: 20%; padding-top:5px!important; padding-bottom:5px!important}

.Bloque.TablaDatos .specialchoice-largeimage table.programs td span.text-label {
  font-size:16px; font-weight: 500; padding-left:5px;
}

.Bloque.TablaDatos .specialchoice-largeimage table.programs td .label-group {
  display: flex; justify-content: center; align-items: center;  margin:10px 0;
}

@media only screen and (max-width: 992px) {
  .Bloque.TablaDatos .specialchoice-largeimage table.programs td .label-group {
    flex-direction: column;  margin:5px 0;
  }
  .Bloque.TablaDatos .specialchoice-largeimage table.programs td span.text-label {
    font-size:14px;
  }
}


/*@media only screen and (min-width: 768px) {
.Bloque.TablaDatos .specialchoice table.programs thead td.col2 {width:20%}
.Bloque.TablaDatos .specialchoice table.programs thead td.col3 {width:20%}
.Bloque.TablaDatos .specialchoice table.programs thead td.col4 {width:20%}
.Bloque.TablaDatos .specialchoice table.programs thead td.col5 {width:20%}
}*/


/*********** ESTILOS RESPONSIVE *******************/

.st-head-row {background-color: #DDD!important; color:#000!important;}
.st-head-row.st-head-row-main {display:none;}

/*@media only screen and (max-width: 1920px) {
.Bloque .Multimedia p {height:650px; }
}

@media only screen and (max-width: 1366px) {
.Bloque .Multimedia p {height:450px; }
}


@media only screen and (max-width: 1099px) {
.programs td.program img {width: 100%;}
}*/

@media only screen and (max-width: 1310px) {
 #smile-set {width:80%;}
}

@media only screen and (max-width: 1024px) {

.connectedSortable li img {height: 50px;}
.thumb:hover, .view-tap {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
}

 #dragdrop.ranking-list {width:70%;}
 #smile-set {width:90%;}
}

@media only screen and (max-width: 1250px) {

.Bloque.TablaDatos .specialchoice table.programs td.program img {object-fit: fill; max-width: 100%; height: auto; object-position: center center; display: block; margin: 0 auto;}
.Bloque.TablaDatos .img-grid table.programs td.program img {object-fit: fill; max-width: 100%; height: auto; object-position: center center; display: block; margin: 0 auto;}

}

@media only screen and (max-width: 1005px) {

.pinar #basket3 {margin-left: 10px!important}
.pinar #basket4 {margin-right:10px!important}

}

@media only screen and (max-width: 920px) {
.resp-smile {width: 19%;}

.Bloque.TablaDatos .img-grid table.programs td.program img {height: auto;}
.Bloque.TablaDatos .img-grid table.programs td.program img {object-fit: fill; width: 100%; object-position: center center; display: block; margin: 0 auto;}

.Bloque.TablaDatos .specialchoice table.programs td.program img {height: auto;}
.Bloque.TablaDatos .specialchoice table.programs thead td {font-size: 14px; padding:0; font-weight:bold; line-height: 1em;}
.Bloque.TablaDatos .specialchoice table.programs thead td.col1 {padding-left:10px; width: 100px}
.Bloque.TablaDatos .specialchoice table.programs thead td.col4 {width: 110px}
/*.Bloque.TablaDatos .specialchoice table.programs thead td.col5 {width: 110px}*/
.Bloque.TablaDatos .specialchoice table.programs tfoot td.col1 {font-size: 14px;}
.Bloque.TablaDatos .specialchoice table.programs td span {font-size: 14px}
.Bloque.TablaDatos .specialchoice table.programs td.no-one {font-size: 13px}
.Bloque.TablaDatos .specialchoice table.programs td.program .txt-grid {font-size:13px; margin-bottom:3px;}
.Bloque.TablaDatos .specialchoice table.programs td.program img {object-fit: fill; width: 100%; object-position: center center; display: block; margin: 0 auto;}
.Bloque.TablaDatos .specialchoice table.programs.tableview td.program img {object-fit: fill; object-fit: contain; width: auto; object-position: center center; display: block; margin: 0 auto;}
.Bloque.TablaDatos .specialchoice table.programs td {font-size: 1.3em; line-height: 1.6em; font-weight: 400; padding: 0 0 0 10px;}
.Bloque.TablaDatos .specialchoice table.programs tfoot td {padding: 12px 0 15px 10px;}

.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.info {width:30px;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col1 {padding-left:10px; width: 100px;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col2 {width: auto;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col3 {width: auto;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col4 {width: auto;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col5 {width: auto;}

}

@media only screen and (max-width: 851px) {

.pinar .basket  {width:125px;}
.connectedSortable li img {height: 40px;}

}


@media only screen and (max-width: 800px) {

.Bloque .EscalaValoracion .Menor, .Bloque .EscalaValoracion .Mayor {margin-bottom:15px;}
.Bloque .EscalaValoracion .Duda {margin-bottom:15px!important;}
.Bloque .EscalaValoracion .Menor, .Bloque .EscalaValoracion .Mayor {width: 100%;}
.Bloque .EscalaValoracion ul li {display: inline; margin: 0 2%;}
.Bloque .EscalaValoracion .Menor p, .Bloque .EscalaValoracion .Mayor p {text-align: left;}
.Bloque .EscalaValoracion .Duda p, .Bloque .EscalaValoracion .Mayor p {text-align: center;}
.Bloque .EscalaValoracion .Mayor p, .Bloque .EscalaValoracion .Mayor p {text-align: right;}
.Bloque .EscalaValoracion .Duda {margin: 0; width: 100%;}
.Bloque .EscalaValoracion .Menor ul {
	box-shadow: none !important;
	background: rgba(194,31,19,1);
	background: -moz-linear-gradient(left, rgba(194,31,19,1) 0%, rgba(245,218,213,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(194,31,19,1)), color-stop(100%, rgba(245,218,213,1)));
	background: -webkit-linear-gradient(left, rgba(194,31,19,1) 0%, rgba(245,218,213,1) 100%);
	background: -o-linear-gradient(left, rgba(194,31,19,1) 0%, rgba(245,218,213,1) 100%);
	background: -ms-linear-gradient(left, rgba(194,31,19,1) 0%, rgba(245,218,213,1) 100%);
	background: linear-gradient(to right, rgba(194,31,19,1) 0%, rgba(245,218,213,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c21f13', endColorstr='#f5dad5', GradientType=1 );
}
.Bloque .EscalaValoracion .Mayor ul {
	box-shadow: none !important;
	background: rgba(198,232,181,1);
	background: -moz-linear-gradient(left, rgba(198,232,181,1) 0%, rgba(45,153,9,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(198,232,181,1)), color-stop(100%, rgba(45,153,9,1)));
	background: -webkit-linear-gradient(left, rgba(198,232,181,1) 0%, rgba(45,153,9,1) 100%);
	background: -o-linear-gradient(left, rgba(198,232,181,1) 0%, rgba(45,153,9,1) 100%);
	background: -ms-linear-gradient(left, rgba(198,232,181,1) 0%, rgba(45,153,9,1) 100%);
	background: linear-gradient(to right, rgba(198,232,181,1) 0%, rgba(45,153,9,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6e8b5', endColorstr='#2d9909', GradientType=1 );
}

}

@media only screen and (max-width: 768px) {
 #smile-set {width:100%;}
 .resp-smile {width: 17%; margin-left:5px; }

.TablaMalla th.mainth { padding:10px; font-size:2em;}
.centerdiv2 {margin:0 auto; width:90%;}
.centerdiv2.AlignRight {text-align:left!important}

/*.Bloque .Respuesta {padding: 1.5em 0 2em 0;}*/

.Bloque.TablaDatos table.tablesaw td.headrow {font-size: 1.5em!important;}
.Bloque.TablaDatos th {font-size: 1.8em!important; padding: 20px 3px 22px 3px!important;}

/* === Importance Simple (and Vignettes 0-10) — mobile layout ===
   Goal: 11 discrete circles must fit in a single horizontal row inside a
   ~390px viewport, with both anchor literals visible side-by-side ABOVE
   the scale (left half + right half) so the bipolar nature of the
   question is unmistakable. The desktop default already has .leyenda.dk
   doing exactly this 50/50 split via floats — on mobile we just need to
   (a) reorder it ABOVE the .row using flex order, (b) hide the now
   redundant single-anchor .leyenda.mb stacks the template still emits,
   and (c) shrink the circles so 11 fit comfortably.

   Affects two templates that share this component:
   - templates/genEncuesta2/questionImportanceSimple.vm
   - templates/genEncuesta2/choice/vinnetas/questionVinnetasVisButtons.vm */

.Bloque .EscalaValoracion2 {
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
}

/* Force border-box on every descendant of the component so width:100% rules
   include padding+border. Without this, the inner .row (width:100% set in
   the desktop CSS at line 885 with its own 4px padding + 1px border) was
   overflowing the section's right padding by ~9px — giving the visual
   asymmetry the user reported (10px gap on left, ~1px on right). */
.Bloque .EscalaValoracion2,
.Bloque .EscalaValoracion2 * { box-sizing: border-box; }

/* Defloat the immediate children so flex column ordering takes over (the
   non-mobile rule on line ~884 floats every direct div). */
.Bloque .EscalaValoracion2 > div { float: none !important; width: 100%; }

/* Anchors row goes FIRST. Reuse .leyenda.dk which already lays out
   .ninguna (float:left 50%) + .mucha (float:right 50%) per desktop CSS. */
.Bloque .EscalaValoracion2 > .leyenda.dk {
  display: block !important;
  order: 1;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.35;
}

/* The two single-anchor centered stacks the template still emits for the
   legacy mobile layout are now redundant. Hide them only inside this
   component so other places that may use .leyenda.mb keep their behaviour. */
.Bloque .EscalaValoracion2 > .leyenda.mb { display: none !important; }

/* Circles row goes second. */
.Bloque .EscalaValoracion2 > .row {
  order: 2;
  padding: 14px 4px !important;
  margin-bottom: 0;
}

/* Drop the broken margin:25% rule on each <li> that was sabotaging the
   flex:1 distribution coming from line 889 — that conflict was the root
   cause of the "10" overflowing the card on mobile. */
.Bloque .EscalaValoracion2 ul li {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
}

/* Shrink the circles slightly on mobile so adjacent ones do not touch.
   The orange/blue/green theme CSS files paint each circle via a 31x99
   PNG sprite (3 stacked states of 31x33). To keep the sprite intact at
   the smaller label size, we MUST also scale background-size with the
   same ratio (26/31 ≈ 0.839 → sprite becomes 26x83) and re-position the
   :checked and .error states proportionally. !important is required to
   beat the `background:` shorthand declared per theme (which would
   otherwise reset background-size back to auto). */
.Bloque .EscalaValoracion2 input[type=radio] + label,
.Bloque .EscalaValoracion2 input[type=radio]:checked + label,
.Bloque .EscalaValoracion2 input[type=radio] + label.error {
  width: 26px !important;
  height: 26px !important;
  background-size: 26px 83px !important;
}
.Bloque .EscalaValoracion2 input[type=radio]:checked + label {
  background-position: 0 -28px !important;   /* native -34px scaled by 26/31 */
}
.Bloque .EscalaValoracion2 input[type=radio] + label.error {
  background-position: 0 -56px !important;   /* native -68px scaled by 26/31 */
}

.Bloque .EscalaValoracion2 .valor { font-size: 11px; margin-top: 5px; }

/* Allow long anchor literals (P18 / P146 style: full sentences) to wrap
   gracefully inside their 50% halves without overflowing the card. */
.Bloque .EscalaValoracion2 .leyenda .ninguna,
.Bloque .EscalaValoracion2 .leyenda .mucha {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

table.adaptive td.headrow {font-size: 1.6em;}

/* Other components that still rely on the old .leyenda toggle outside
   .EscalaValoracion2 (none in the codebase today, kept defensively). */
.leyenda.mb {display:block}
.leyenda.dk {display:none}

/* Choice mobile: cardChoice needs relative for overlay positioning */
#cardChoice {
  position: relative;
}
/* Choice mobile: constrain attribute name column so long words don't overflow */
.Bloque.TablaDatos table.programs td.First.choice,
.Bloque.TablaDatos table.programs thead td.First.choice,
.Bloque.TablaDatos table.programs tbody tr td:first-child:not(.program) {
  max-width: 80px;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: 0.85em;
  line-height: 1.5em;
}

}


@media only screen and (max-width: 767px) {
.Bloque .Multimedia iframe {width:100%; height:250px;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {width: 100%;}
.divider, .divider2, .divider3 {background-image:none!important;}

/*#CONTENIDO .Status {width:100%; float:left; text-align:right;}
#CONTENIDO .Status p { width:100%; font-size:1.8em; line-height:1em; margin:0; padding:0; height:20px; border:none;}
#CONTENIDO #Progressbar { width:100%; margin:0 0 0.6em 0; height:20px; border:none;}*/

#CONTENIDO .Status {width:100%; float:left; text-align:right;}
#CONTENIDO #Progressbar { width:90%; font-size:1.8em; line-height:1em; margin:0; padding:0; height:20px; border:none;}
#CONTENIDO .Status p { width:30px; margin:0 0 0.6em 0; height:20px; border:none;}

/*.Bloque .Multimedia p img {display:block; height:auto; max-width: 100%}*/
}

@media only screen and (max-width: 650px) {
textarea {width:95%;}
}

@media only screen and (max-width: 640px) {
table.fixed-header.tablesaw tr:hover {background-color: transparent!important}
.Bloque.TablaDatos table.tablesaw.programs tr:nth-child(2n+1):hover {background-color:#F2F2F2!important}
}

@media only screen and (max-width: 560px) {
.resp-smile {width: 14%;}
}

@media only screen and (max-width: 550px) {
/*.resp-smile {width: 15%;}*/
#dragdrop.ranking-list {width:100%;}

.Bloque {border-left:none; border-right:none;}
.Bloque .col-12 {padding:0;}
}


@media only screen and (max-width: 479px) {
.Bloque.TablaDatos td {font-size:1.5em; line-height:1.2em; font-weight:500; padding:10px 0 10px 10px;}
.Bloque.TablaDatos th {font-size:15px!important; font-weight:600; padding:20px 0 22px 25px;}
.Bloque .Pregunta p {font-size:15px!important;}
.Bloque .Pregunta li {font-size:15px!important;}
.Bloque .Respuesta p label.ForSelect {font-size: 15px; padding-bottom: 5px;}
.Bloque.TablaDatos th.Pregunta {font-size: 15px!important}

.Bloque .Pregunta-Eval p {font-size:1.9em;}
.Bloque.Titular .Row p {font-size:15px;}
.cabeceraMatricial {font-size:1.9em!important; text-align:left!important; font-weight:bold!important; padding:0!important;}
.Bloque.TablaDatos th.First {width:30%;}
.Bloque.TablaDatos th.First0 {width:1%;}
.Bloque.TablaDatos label.error {font-size:15px!important;}
/*textarea {width:95%;}*/
.MultiSeleccion .btn.Abajo, .MultiSeleccion .btn.Arriba {left:85%; color:transparent; width:25px; padding-left:0;}
.MultiSeleccion select.Multiple {width:80%; overflow: hidden; font-size:13px;}
.Bloque.TablaDatos tfoot td {padding-left:10px}
#CABECERA {height:auto}
#CABECERA .Grid {height:auto;}
#CABECERA .Logo {width:100%}
#CABECERA .Titulo {padding-top:5px; text-align:left; clear:both; padding-bottom:25px}
#CABECERA .Titulo h1 {padding-left:0}

.Bloque.TablaDatos .specialchoice table.programs thead td {font-size: 12px; padding:0; font-weight:bold; line-height: 1em;}
.Bloque.TablaDatos .specialchoice table.programs thead td.col1 {padding-left:10px; width: 80px}
.Bloque.TablaDatos .specialchoice table.programs thead td.col4 {width: 80px}
/*.Bloque.TablaDatos .specialchoice table.programs thead td.col5 {width: 80px}*/
.Bloque.TablaDatos .specialchoice table.programs tfoot td.col1 {font-size: 13px;}
.Bloque.TablaDatos .specialchoice table.programs td span {font-size: 12px}
.Bloque.TablaDatos .specialchoice table.programs td.no-one {font-size: 12px}
.Bloque.TablaDatos .specialchoice table.programs td.program img {object-fit: fill; width: 100%; object-position: center center; display: block; margin: 0 auto;}
.Bloque.TablaDatos .specialchoice table.programs td {font-size: 1.3em; line-height: 1.6em; font-weight: 400; padding: 0 0 0 10px;}
.Bloque.TablaDatos .specialchoice table.programs tfoot td {padding: 12px 0 15px 10px;}

.Bloque.TablaDatos .img-grid table.programs td.program img {object-fit: fill; width: 100%; object-position: center center; display: block; margin: 0 auto;}

.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.info {width:30px;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col1 {padding-left:0; width: 90px;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col2 {width: auto;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col3 {width: auto;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col4 {width: auto;}
.Bloque.TablaDatos .specialchoice.specialchoice_4img table.programs thead td.col5 {width: auto;}


.Doc .logo1 img {
  height:40px;
}

.Doc .logo2 img {
  height:70px;
}



}


@media only screen and (max-width: 414px) {
.Bloque {border-left:none; border-right:none;}
.Bloque .Pregunta {padding-left:7px; padding-right: 7px}
.Bloque .col-12 {padding:0;}
.Bloque.TablaDatos .specialchoice table.programs thead td {font-size: 10px; padding:0; font-weight:bold; line-height: 1em;}
.Bloque.TablaDatos .specialchoice table.programs thead td.col1 {padding-left:10px; width: 70px}
.Bloque.TablaDatos .specialchoice table.programs thead td.col4 {width: 70px}
.Bloque.TablaDatos .specialchoice table.programs thead td.col5 {width: 70px}
.Bloque.TablaDatos .specialchoice table.programs tfoot td.col1 {font-size: 13px;}
.Bloque.TablaDatos .specialchoice table.programs td span {font-size: 12px}
.Bloque.TablaDatos .specialchoice table.programs td.no-one {font-size: 12px}
.Bloque.TablaDatos .specialchoice table.programs td.program .txt-grid {font-size:12px; margin-bottom:3px;}
.Bloque.TablaDatos .specialchoice table.programs td.program img {object-fit: fill; width: 110%; object-position: center center; display: block; margin: 0 auto;}
.Bloque.TablaDatos .specialchoice table.programs td {font-size: 1.3em; line-height: 1.6em; font-weight: 400; padding: 0 0 0 10px;}
.Bloque.TablaDatos .specialchoice table.programs tfoot td {padding: 12px 0 15px 10px;}
.control-slider {padding-left:7px; padding-right: 7px}

.Bloque.TablaDatos .img-grid table.programs td.program img {object-fit: fill; width: 110%; object-position: center center; display: block; margin: 0 auto;}

input.Large, input.TXT {width: 100%; margin-bottom:5px;}
input.Small { width:85px;}

.Acciones { background:url(../img/background/fondo-cabecera.gif) 0 0 repeat-x; padding:10px 0 30px 0;}
.Acciones ul { height:100%; overflow:hidden; padding-bottom:5px;}
.Acciones ul.save {float:none!important; /*width:100%;*/ text-align: center; margin-bottom:15px;}
.Acciones ul.prev-next {float:none!important; width:100%; text-align: center}
.Acciones ul li { display:inline; margin-left:0;}
.Acciones ul.save li .btn {background-color: #555; box-shadow: 1px 2px #333;}
.Acciones ul.save li .btn:hover {background-color: #2c620b; box-shadow: 1px 2px #333;}

}


@media only screen and (max-width: 392px) {
 #smile-set {width:100%;}
 .resp-smile {margin-left:5px;}

}

@media only screen and (max-width: 375px) {
.Bloque.TablaDatos table.tablesaw td.headrow {font-size: 1.4em!important;}
select.Large {width:100%;}

}


@media only screen and (max-device-width: 340px) {
/*.Bloque .Respuesta {padding:1.5em 2.0em 2em 2.0em;}*/
}


@media only screen and (max-width: 320px) {
  .Doc .logo1 img {
    height:35px;
  }
  }


.table-responsive {overflow-y: hidden; overflow-x: auto;}



/**** Tabla Header Fixed *******/



table.fixed-header {
  border-collapse:collapse;
  width:100%;
}

.container{
  width:100%;
  margin:auto;
}

.fixed{
  top:0;
  position:fixed;
  width:auto!important;
  display:none;
  border:none!important
}

/*.Bloque.TablaDatos .fixed th.First {width: 40%!important}
.fixed th {width: auto!important}*/

/*.scrollMore{
  margin-top:600px;
}

.up{
  cursor:pointer;
}*/

table.fixed-header tr:hover {background-color: #DDD!important}


/*Estilos añadidos por Ignacio*/

input.btn4 {background-color:#333; color:#fff; border:1px solid #000; font-size:15px; line-height:1em; padding:0 20px; height: 68px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-family: 'Maven Pro', sans-serif; font-weight:500;-webkit-transition: all 0.1s ease-out;transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;}
input.btn4:focus { outline:none; border:none;}
input.btn4:hover {background-color: #999; border:1px solid #666;}


/* Mapa google*/

      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 600px;
        /*width: 90%;*/
        margin:5px auto 0 auto;
        border:1px solid #CCC;
      }
      /* Optional: Makes the sample page fill the window. */
      /*html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }*/
       .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 20px;
        font-weight: 700;
        margin-left: 0;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 500px;
        margin-top:10px;
        height: 52px;
        color:#222;
      }

      .btn-map {margin-left:10px; height:53px!important; padding-top: 2px !important;}

      @media only screen and (max-width: 779px) {
      	.btn-map {margin-left:0; margin-top:10px;}
	  }

      @media only screen and (max-width: 600px) {
      	#pac-input {width: 90%}
	  }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
      #target {
        width: 345px;
      }



/****** ESTILOS ORDEN CAJAS *******/


.sorting .table-item{ width:70%; display: inline-block; border-collapse: collapse; margin: 0 auto;}
.sorting .tr-item {display:inline-block; vertical-align: top; width:49%; margin-bottom:10px; border: 0;}
/*.sorting .tr-item, .sorting .tr-item:hover{
    background:none;
}*/
.sorting .tr-item:hover .sorting-number, .sorting .tr-item:hover .td-item.sorting-text div,  .sorting .tr-item.sorting-item-selected:hover .td-item.sorting-text .comment p {color:#fff!important;}
.sorting .tr-item:hover .td-item.sorting-text {border-color: #276A00;}
.sorting .tr-item:hover .td-item.sorting-text .comment p {color:#276A00;}
.sorting .table-item .comment {margin:0;}

.sorting .tr-item.sorting-item-selected .sorting-number span, .sorting .tr-item:hover .sorting-number span {display: inline; zoom:1; }
.sorting .td-item {vertical-align: top; height: 43px; display: table-cell; min-width: 40px; vertical-align: top;}
/*.sorting .td-item:hover {background:none;}*/
.sorting .sorting-number{min-width:25px; text-align:right; padding-right:5px; padding-right:0.313rem;}
.sorting .sorting-number span, .sorting-list .sorting-list-number {display:none; font-size: 1.4em;}
.sorting .td-item.sorting-text {border:1px solid #ddd; width:100%; padding:0.5em 0.5em 0.5em 1em; cursor: pointer; background-color: #fff}
.sorting .td-item.sorting-text .comment p {margin-top:0; font-size:18px;}
.sorting .tr-item:hover .sorting-number span {color: #276A00; font-weight: 500; font-size:20px;}
.sorting .tr-item.sorting-item-selected .sorting-number span {color: #276A00; font-weight: 500; font-size:20px;}
.sorting .tr-item.sorting-item-selected .td-item.sorting-text{
    background:#276A00;
    border-color: #276A00;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
}
.sorting .tr-item.sorting-item-selected .td-item.sorting-text .comment p {color: #fff;}
.sorting .tr-item.sm-sorting-item-selected .td-item.sorting-text div {color: #fff;}

.sorting-list {width:28%; float:right;}
.sorting-list li {display: table; margin-bottom:5px; min-height:45px; height: 45px;}
.sorting-list .sorting-list-number, .sorting-list .sorting-list-label {display:table-cell;}
.sorting-list .sorting-list-number {color: #999; font-size: 1.8em; min-width:22px; padding-right: 5px; font-weight:600; text-align:right;}
.sorting-list .sorting-list-label {background: #F6F6F6; color: #999; font-size:1.5em; border: 1px solid #ccc; width:100%; padding:5px;}

@media only screen and  (max-width: 768px) {
    .sorting .table-item {width: 100%;}
    .sorting-list {display:none;}
}

@media only screen and  (max-width: 480px) {
    .sorting .default-type .tr-item {width: 100%;}
    .sorting .default-type .td-item.sorting-number, .sorting .default-type .td-item.sorting-text {display: table-cell;}
    .sorting .default-type .td-item.sorting-number{background: #ccc;}
    .sorting .sorting-number{min-width: 30px; padding:0; text-align: center; border:1px solid #ccc;}
    .sorting .sorting-number span{display:block;}
    .sorting .default-type .td-item:first-child:hover {background: #E85810;}
    .sorting .tr-item .sorting-number span{color: #ccc;}
    .sorting .tr-item:hover .sorting-number {color: #fff; background-color: #276A00!important; border-color:#276A00;}
    .sorting .tr-item:hover .sorting-number span {color: #fff;}
    .sorting .default-type .td-item:first-child, .sorting .default-type .td-item:first-child:hover {vertical-align: middle; background: #c8c8c8;}
    .sorting .td-item.sorting-text {padding: 1.0em;}
    .sorting .td-item.sorting-text .comment p {font-size:15px;}

    .sorting .default-type .sorting-item-selected .td-item:first-child,
    .sorting .tr-item.sm.sorting-item-selected .sorting-number,
    .sorting .tr-item.sorting-item-selected:hover .sorting-number,
    .sorting .tr-item.sorting-item-selected:hover .sorting-number,
    .sorting .tr-item.sorting-item-selected:hover .sorting-number span {background: #4C4C4C!important; border-color:#4C4C4C;}
    .sorting .tr-item.sorting-item-selected .sorting-number span,
    .sorting .tr-item.sorting-item-selected .td-item.sorting-text .comment p {color:#fff!important;}
    .sorting .tr-item.sorting-item-selected .td-item.sorting-number span {color:#fff!important;}
    .sorting .tr-item:hover .td-item.sorting-number span {color:#fff!important;}


}


/******************** Colored Slider ***********************/

.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
  font-size:16px;
  text-align: center;
}

.alert-light {
  color: #333;
  background-color: #f7f7f7;
  border-color: #eee;
  font-size:16px;
  text-align: center;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
  font-size:16px;
  text-align: center;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
  font-size:16px;
  text-align: center;
}

.alert ol {
  margin:20px;
}

.alert ol li {
  list-style-type: decimal;
}

.alert-success li{
  color: #0f5132;
}

.alert-danger li {
  color: #842029;
}

.container-slider {
display:flex;
align-items: center;
justify-content: center;
}

.first-weeks {
background-color: rgb(125, 225, 255);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
height:20px;
width:17%;
}

.colored-slider {
float: left;
clear: left;
width: 95%;
margin: 30px 0;
}

.colored-slider .ui-slider-range {
  background-color:rgb(252, 227, 5)!important;
  opacity:0.7;
  border:none!important;
}

.colored-slider .ui-state-default, .ui-widget-content .ui-state-default {
  background: none!important;
  background-color: #FFF;
}

.colored-slider.ui-slider-horizontal {
  height: 20px!important;
}

.colored-slider.ui-slider-horizontal .ui-slider-handle {
  top: -0.8em;
  margin-left: -1.0em;
  display: grid;
  align-content: center;
  color:orangered!important;
  font-size:16px;
}

.colored-slider .slider-labels {
  position:relative;
  top:-35px;
  display:flex;
  font-size:15px;
}

.colored-slider .slider-labels .week-start,
.colored-slider .slider-labels .week-limit,
.colored-slider .slider-labels .week-p1,
.colored-slider .slider-labels .week-p2,
.colored-slider .slider-labels .week-p3,
.colored-slider .slider-labels .week-end {
  position: absolute;
  color:#333;
}

.colored-slider .slider-labels .week-start {
  left:0;
}

.colored-slider .slider-labels .week-limit {
  left:17%;
}

.colored-slider .slider-labels .week-p1 {
  left:9%;
}

.colored-slider .slider-labels .week-p2 {
  left:29%;
}

.colored-slider .slider-labels .week-p3 {
  left:40%;
}

.colored-slider .slider-labels .week-end {
  right:0;
}

#custom-handle {
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  padding: 10px 2px;
  top: -12px;
  width: min-content;
  min-width: 22px;
}
.ts_table.ts_zebra tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.ts_table.ts_hover tbody tr.ts_selected:hover td,
.ts_table.ts_hover tbody tr:hover td {
    font-weight: bold;
    color: #000;
}
.ts_table.ts_hover tbody tr:hover,
tr.ts_selected {
  position: relative;
  font-weight: bold;
}
.ts_table.ts_hover tbody tr:hover:after,
.ts_selected:after {
  /* content: ''; */
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index: 0;
  pointer-events: none;
}
.ts_selected:after {
  border-radius: 5px;
}
.ts_table.ts_hover tbody tr:hover:after {
  box-shadow: -2px 4px 20px 1px rgba(0,0,0,0.68);
  z-index: 1;
}
.ts_table tbody tr.tr_click {
    position: relative;
}
.ts_table tbody tr.tr_click input[type="text"],
.ts_table tbody tr.tr_click input[type="number"],
.ts_table tbody tr.tr_click textarea {
  position: relative;
  z-index: 2;
}
.ts_table tbody tr.tr_click input[type="checkbox"] + label:after,
.ts_table tbody tr.tr_click input[type="radio"] + label:after {
    /* content: ''; */
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    pointer-events: all;
}


@media only screen and  (max-width: 576px) {
  .colored-slider .slider-labels {
    font-size:12px;
    }
}
/* UPD GENERAL JVG */
.fixed-header.fixed {
  z-index: 1;
}
table.layout-fixed {
  table-layout: fixed;
}
.layout-fixed .grid-select select,
.layout-fixed .grid-select input,
.layout-fixed .program input{
  max-width: 100%;
  width: calc(100% - 10px);
}

/* UPD GENERAL JVG */
/* SELECT2 */
.select2_container span.select2-container.select2-container--default.select2-container--open {
    max-width: 100%;
}
span.select2-container.select2-container--default.select2-container--open {
  width: max-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 50vw;
  padding: 0 5px;
  padding: 0;
}

.select2_container {
    display: inline-block;
    width: 100%;
    height: 38px;
}
.Bloque.TablaDatos td .select2_container span {
    padding: 0 2px;
    float: none;
    text-align: left;
    height: 100%;
}
span.select2-selection.select2-selection--single,
span.select2-selection.select2-selection--multiple {
  border-radius: 4px;
  border: solid 2px #e3e3e3;
  outline: none;
}
.select2_container .selection > .select2-selection,
.select2_container .selection {
    width: 100%;
}
.select2-selection__rendered {
    max-width: 100%;
}
.select2-results__option {
    font-size: 0.8rem;
}
.Bloque.TablaDatos td .select2_container span.select2.select2-container.select2-container--default {
    padding: 0;
    height: 100%;
}
span.select2-selection.select2-selection--single:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.select2_container .select2-container .select2-selection--single span.select2-selection__rendered {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    width: calc(100% - 4px);
}
.select2-results__option.select2-results__option--selectable:hover {
  /* background-color: #f39c12; */
  color:white;
  opacity: 0.8;
}
.ts_none {
  display: none;
}
.select2.select2-container.select2-container--default {
  width: 100% !important;
}
.select2-container--focus > .selection > .select2-selection {
    background-color: #80808099;
}
.select2-container--focus > .selection > .select2-selection > .select2-selection__rendered {
    color: #FFF;
}
.select2-results {
    box-sizing: content-box;
    padding-right: 6px;
    margin-right: -2px;
}
.select2-results__options {
    width: calc(100% + 2px);
    padding-right: 2px;
    margin-right: -2px;
}
.select2-results__options::-webkit-scrollbar {
  width: 8px;
  background-clip: padding-box;
}
.select2-results__options::-webkit-scrollbar-track {
  background-color: #e5e5e5;
  height: 2px;
  background-clip: padding-box;
  border-right: 0px solid rgba(0, 0, 0, 0);
  border-top: 2px solid rgba(0, 0, 0, 0);
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}
.select2-results__options::-webkit-scrollbar-thumb {
  /* background-color: #0F2464; */
  background-clip: padding-box;
  border-right: 0px solid rgba(0, 0, 0, 0);
  border-top: 2px solid rgba(0, 0, 0, 0);
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}
.select2-results__options::-webkit-scrollbar-button {
  display: none;
}
ul.select2-selection__rendered {
  overflow: hidden;
}
ul.select2-selection__rendered > .select2-selection__choice,
ul.select2-selection__rendered > .select2-selection__choice > .select2-selection__choice__display {
  max-width: 95%;
  width: 95%;
}
.select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  color: white;
}
.select2-container--open .select2-dropdown.customdrop {
  left: 2px;
}
.select2-container--open .select2-dropdown.normaldrop {
  left: -3px;
}
span.select2.select2-container.select2-container--default.error .select2-selection,
.select2_container.error .select2-selection {
    border-color: #990000;
/*     outline: 1px solid #990000; */
}
.customdrop .select2-results__option {
  font-size: 0.8rem;
  /* padding-left: 21px; */
  padding-left: 0;
  align-items: center;
  display: inline-flex;
  align-items: center;
  /* vertical-align: middle; */
  width: calc(100% - 6px);
  min-height: 21px;
  /* display: inline-flex; */
  /* width: calc(100% - -9px); */
}
.customdrop .select2-results__option.select2-results__option--selected {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: calc(100% - 6px);
  min-height: 21px;
}

.customdrop .select2-results__option.select2-results__option--selected {
  padding-left: 0px;
}
/* .customdrop .select2-results__option.select2-results__option--selected.select2-results__option--highlighted:before,
.customdrop .select2-results__option.select2-results__option--selected:hover:before */
.select2-results__option.select2-results__option--selected.select2-results__option--highlighted:before,
.select2-results__option.select2-results__option--selected:hover:before {
  color: yellow;
}
/* .customdrop .select2-results__option.select2-results__option--selected:before { */
.select2-results__option.select2-results__option--selected:before {
  content: '\2713';
}
/* .customdrop .select2-results__option:before { */
.select2-results__option:before {
  content: '\2713';
  content: '';
  display: inline-block;
  padding: 0 2px 0 3px;
  font-weight: bolder;
  font-size: 1rem;
  -webkit-text-stroke-width: 1px;
  left: 0;
  display: inline-block;
  width: 20px;
}
.select2-container.select2-container--default.select2-container--open .select2-dropdown {
  border-top: 1px solid rgb(170, 170, 170);
}
.select2-container.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--above {
  border-bottom: 1px solid rgb(170, 170, 170);
}
.select2_container span.select2-selection__placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
}
.select2_container .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #444;
}
.select2_container .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: -3px;
}
.select2_container .select2-container .select2-selection--single span.select2-selection__rendered,
.Bloque.TablaDatos td .select2_container span.select2-selection__arrow {
  padding: 0;
}
.select2_container.select2_container_multi .select2-container .select2-selection--single span.select2-selection__rendered {
  padding-right: 2px;
  width: calc(100% - 5px);
}
/* SELECT2 */
/* FLAG-GALLERY */
.info {
  line-height: 2; 
}
.Doc ul.flag-gallery {
  padding-left: 0px;
}
.flag-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* justify-content: center; */
  /* gap: 10px; */
}
ul.flag-gallery > li,
ul.flag-gallery {
  list-style: none !important;
}
.flag-gallery > li {
  /* flex-basis: 350px; */
  flex-basis: calc(100% / 7);
  max-width: 200px;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  cursor: pointer;
}
.flag-gallery li a:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.flag-gallery li img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: 5px;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(57, 57, 57, 0.502);
  top: 0;
  left: 0;
  transform: scale(0);
  transition: all 0.2s 0.1s ease-in-out;
  color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay > span {
  text-align: center;
}
/* hover */
.flag-gallery li:hover .overlay {
  transform: scale(1);
}
@media (max-width: 850px) {
  .overlay > span {
    font-size: 18px;
    line-height: 1;
  }
}
@media (max-width: 800px) {
  .overlay > span {
    font-size: 17px;
    line-height: 1;
  }
}
@media (max-width: 750px) {
  .overlay > span {
    font-size: 16px;
  }
}
@media (max-width: 700px) {
  .overlay > span {
    font-size: 15px;
    line-height: 1;
  }
}
@media (max-width: 650px) {
  .overlay > span {
    font-size: 14px;
    line-height: 1;
  }
}
@media (max-width: 600px) {
  .overlay > span {
    /* font-size: 14px; */
    font-size: 13px;
    line-height: 1;
  }
}
@media (max-width: 550px) {
  .overlay > span {
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
  }
}
@media (max-width: 500px) {
  .overlay > span {
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
  }
}
@media (max-width: 400px) {
  .overlay > span {
    font-size: 10px;
    line-height: 1;
  }
}
/* FLAG-GALLERY */
/* TOOLTIP */
.ui-tooltip-content > ul {
  display: flex;
  flex-direction: column;
}
.ui-tooltip-content > ul > li {
  display: inline-block;
  padding-left: 10px;
  font-weight: bolder;
}
.ui-tooltip-content > ul > li + li.tooltip-disc {
  padding-top: 5px;
}
.ui-tooltip-content > ul > li:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: bolder;
  width: 3px;
  height: 3px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #000;
  margin-right: 3px;
  margin-bottom: 2px;
  margin-left:-7px;
}
body .ui-tooltip {
  /* background-color: #FFF; */
  font-size: 12px;
}
/* TOOLTIP */
/* CABECERA Y TABLA */
#CABECERA.ts__large_logo.ts__white,
#CABECERA.ts__white,
.ts__white {
  background-color: #FFF;
  color: #000;
}
#CABECERA.ts__white .Titulo *,
#CABECERA.ts__white *,
.ts__white h1 {
  color: #000;
}
#CABECERA .Titulo.ts__flex.ts__flex_col {
  justify-content: center;
  padding-top: 0;
}
.ts__p_10 {
  padding: 0 10px;
}
.ts__bb {
  box-sizing: border-box;
}

.ts__flex > .Logo {
  margin: 5px;
}
.ts__w_100 {
  width: 100%;
}
.ts__flex {
  display: inline-flex;
}
.ts__flex_col {
  flex-direction: column;
}
.ts__flex.ts__justify_between {
  justify-content: space-between;
}
.ts__flex.ts__justify_evenly {
  justify-content: space-evenly;
}
.ts__flex.ts__justify_start {
    justify-content: flex-start;
}
.ts__flex.ts_center {
  justify-content: center;
  align-items: center;
}
.ts__flex.ts__align_center {
  align-items: center;
}
.ts__gap_1r {
    gap: 1rem;
}
.ts__flex_col.ts__center,
.ts__flex.ts__center {
  align-items: center;
}
.ts__table_container {
  max-width: 70%;
  font-size: 0.8rem;
  padding: 15px 0;
}
table.ts__table {
  width: 100%;
  border-collapse: collapse;
}
table.ts__table .ts_header {
  color: #FFF;
  opacity: 0.6;
}
.ts__table tr.ts_header > th {
    padding: 5px;
    color: #FFF;
    text-align: center;
}
.ts_header_info {
  color: #FFF;
}
.ts__table_container table.ts__table tr > td,
.ts__table tr > th,
.ts__table tr > td {
  padding: 5px;
  border: 1px solid;
  border: 1px solid #c4c4c4;
}
.ts__table tr > th {
  font-weight: bolder;
}
.ts__table tr.ts_header > th,
.ts_header > th {
  border: 1px solid black;
  border: 1px solid #c4c4c4;
}
.ts__text_center,
.ts_center {
  text-align: center;
}
.ts__info_label {
  display: inline-block;
}
td.ts__bold.ts_center {
  color: #9b9b9b;
}
.ts__table_info {
  margin-top: 10px;
}
.ts__bold {
  font-weight: bolder;
}
/* CABECERA Y TABLA */
/* INPUTS */
.layout-fixed .program input[type="time"],
input[type="time"] {
  width: -moz-fit-content;
  width: fit-content;
}
/* INPUTS */
/* IMG COL */
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_4 td.program.ts__img_col,
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_5 td.program.ts__img_col,
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_6 td.program.ts__img_col,
tr.ts__col_4 .ts__img_col,
tr.ts__col_5 .ts__img_col,
tr.ts__col_6 .ts__img_col {
  height: 15vw;
}
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_4 td.program.ts__img_col  img,
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_5 td.program.ts__img_col  img,
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_6 td.program.ts__img_col  img,
tr.ts__col_4 .ts__img_col img,
tr.ts__col_5 .ts__img_col img,
tr.ts__col_6 .ts__img_col img {
  max-height: 15vw;
}
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_7 td.program.ts__img_col,
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_8 td.program.ts__img_col,
tr.ts__col_7 .ts__img_col,
tr.ts__col_8 .ts__img_col  {
  height: 10vw;
}
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_7 td.program.ts__img_col  img,
.Bloque.TablaDatos .img-grid table.programs tr.ts__col_8 td.program.ts__img_col  img,
tr.ts__col_7 .ts__img_col img {
  max-height: 10vw;
}
.Bloque.TablaDatos .img-grid table.programs td.program.ts__img_col {
  height: 10vw;
}
.Bloque.TablaDatos .img-grid table.programs td.program.ts__img_col img {
  height: auto;
  max-height: 10vw;
  box-sizing: border-box;
}
.Bloque.TablaDatos .img-grid table.programs tr:last-child td.program.ts__img_col {
  padding-bottom: 15px !important;
}
.ts__img_col img:hover {
  border: 1px solid #0000001c;
  cursor: pointer;
  transform: scale(1.1);
  transform: scale(1.05);
}
i.ts__velo {
    max-height: 10vw;
    width: auto;
    position: relative;
    max-width: 10vw;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: auto;
    box-sizing: border-box;
}
.Bloque.TablaDatos td i.ts__velo > img + span.ts__velo_overlay {
    display: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0px;
    opacity: 0.3;
    z-index: 1;
    margin: auto;
    pointer-events: none;
}
.Bloque.TablaDatos td i.ts__velo > img.green + span.ts__velo_overlay {
    background-color: green;
    background-color: #428619;
    display: inline-block;
}
.Bloque.TablaDatos td i.ts__velo > img.blue + span.ts__velo_overlay {
    background-color: #0C3C60;
    background-color: blue;
    display: inline-block;
}
/* IMG COL */
/* BUTTON DISABLED */
.ts__disabled > input[type="submit"],
.ts__disabled > input[type="button"] {
    opacity: 0.6;
    pointer-events: none;
}
li.ts__disabled {
    cursor: not-allowed;
}

button.btn {
    position: relative;
    display: inline-block;
    border: none;
    box-shadow: none;
}
button.btn.ts__disabled {
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}
button.btn.ts__disabled {
    webkit-box-shadow:none;
    box-shadow: none;
}
button.btn.ts__disabled::before {
    content: '';
    position:absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    cursor: not-allowed;
    z-index:1;
    display: inline-block;
    pointer-events: visible;
}
/* BUTTON DISABLED */
/* SCROLLBAR */
::-webkit-scrollbar {
  width: 10px;
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: white;
}
::-webkit-scrollbar-track-piece {
  background: white;
  background: #e5e5e5;
}
::-webkit-scrollbar-corner {
  background: white;
}
::-webkit-resizer {
  background: #111;
}
::-moz-scrollbar-button,
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
/*   background: transparent; */
}
html,
html * {
  scrollbar-width: thin !important;  
}
/* SCROLLBAR */
/* LARGE-LOGO */
@media only screen and (max-width: 800px) {
	#CABECERA.ts__large_logo .Titulo h1 {
		font-size: 2.6em;
	}
	#CABECERA.ts__large_logo .Titulo.ts__flex.ts__flex_col {
		width: 100%;
		text-align: left;
		padding-bottom: 10px;
	}
	.Grid.ts__flex {
		flex-direction: column;
		height: 100%;
	}
	.header-progress {
		max-width: 100%;
		width: 100%;
	}
	#CABECERA.ts__large_logo .Titulo.ts__flex.ts__flex_col {
		width: 100% !important;
	}
	#CABECERA.ts__large_logo .ts__flex > .Logo {
		margin: 10px 0 0 0;
		max-height: 100px;
	}
	#CABECERA.ts__large_logo {
		height: 100%;
		background: none;
	}
	#CABECERA.ts__large_logo .Grid {
		height: 100%;
		background-size: auto 100%;
	}
  	#CABECERA.ts__large_logo .Logo {
		display: inline-flex;
	}
	#CABECERA.ts__large_logo .Logo > img {
	    width: 100%;
	    min-width: 10vw;
	    max-height: 100%;
	    height: unset;
	}
}
#CABECERA.ts__large_logo {
    height: 100%;
    background: none;
    position: relative;
}
#CABECERA.ts__large_logo:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #e1e1e1;
    top: 100%;
    bottom: 0px;
    left: 0px;
    /* margin-top: 8px; */
}
/*
#CABECERA.ts__large_logo .Logo {
    display: inline-flex;
}
#CABECERA.ts__large_logo .Logo > img {
    width: 100%;
    min-width: 10vw;
    max-height: 100%;
    height: unset;
}
#CABECERA.ts__large_logo .Titulo.ts__flex.ts__flex_col {
    width: 50vw;
}
*/
#CABECERA.ts__large_logo .Titulo h1 {
    padding-left: 0px;
}
/* LARGE-LOGO */
/* INPUT OTROS */
.ts__flex > .ts-texto > input {
  width: 100%;
}
/*.tr_va_top td:not(:first-child) { vertical-align: top;}*/
.tr_otros .ts__flex.ts_w_100 {
  gap: 10px;
}
.tr_otros .ts__flex.ts_w_100 .ts-texto{
  flex-grow: 2;
}
/*.tr_va_top .grid-select,
.tr_va_top .select2_container {
    vertical-align: top
}*/
.ts_w_100 {
  width: 100%;
}
/* INPUT OTROS */
.Bloque.TablaDatos .specialchoice table.programs thead tr.tr_super > td,
table > thead tr.tr_super > td {
    font-size: 2.3em;
    font-weight: bold;
}
.Bloque.TablaDatos .specialchoice table.programs tr.tr_super td,
.Bloque.TablaDatos .specialchoice table.programs tr.tr_super td span,
table > tbody tr.tr_super > td {
    /* font-size: 18px; */
    font-size: 1.3em;
    line-height: 1.6em;
}
.Bloque.TablaDatos .specialchoice table.programs tr.tr_super td.program div {
    font-size: 1.1em;
}
@media only screen and (max-width: 920px) {
    .Bloque.TablaDatos .specialchoice table.programs thead tr.tr_super > td,
    table > thead tr.tr_super > td {
        font-size: 14px;
    }
    .Bloque.TablaDatos .specialchoice table.programs tr.tr_super td span {
        font-size: 14px;
        line-height: 1.6em;
    }
    .Bloque.TablaDatos .specialchoice table.programs tr.tr_super td.program div {
        font-size: 13px;
    }
    .choice-statusquo-btn {
        font-size: 14px;
    }
}
/* YOU-TUBE VIDEO */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 50%;
}
.video-container  > iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.Bloque .Multimedia .video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.Bloque .Multimedia .video-container {
  margin: auto;
}
/* YOU-TUBE VIDEO */
/* TABLE-FLEX */
.Bloque.TablaDatos .table-flex td {
    padding: 15px;
    padding: 10px;
}
.col_imgs_container {
    display: flex;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    justify-content:center;
    margin: auto;
    text-align: center;
    /* margin: 5px 0; */
    /* padding-bottom: 15px; */
}
.ts__img_flex.ts_cols_2 .img_col_container {
    width: calc(50% - 12px);
}
.ts__img_flex.ts_cols_3 .img_col_container {
    width: calc(33% - 12px);
}
.ts__img_flex.ts_cols_4 .img_col_container {
    width: calc(25% - 12px);
}
.ts__img_flex.ts_cols_5 .img_col_container {
    width: calc(20% - 12px);
}
.ts__img_flex.ts_cols_6 .img_col_container {
    width: calc(16.6% - 12px);
}
.ts__img_flex.ts_cols_7 .img_col_container {
    width: calc(14.2% - 12px);
}
.ts__img_flex.ts_cols_8 .img_col_container {
    width: calc(12.5% - 12px);
}
.ts__img_flex.ts_cols_9 .img_col_container {
    width: calc(11.1% - 12px);
}
.ts__img_flex.ts_cols_10 .img_col_container {
    width: calc(10% - 12px);
}
.ts__img_flex .img_col_container {
    min-width: 200px;
    min-width: 175px;
    margin: 5px 0px;
    margin: 10px auto;
    /* padding-bottom: 15px; */
}
.ts__img_flex .img_col_container.ts_hidden {
  height: 0;
  visibility: hidden;
  margin: 0 auto;
}
.ts__img_flex.ts_cols_8 .img_col_container img {
    width: 100%;
    width: calc(100% - 4px);
    display: inline-block;
    object-fit: cover;
}
.ts__img_flex .img_col_container img {
    width: 100%;
}
.ts__img_flex .img_col_container img.green {
    border: none !important;
    outline: 4px solid green;
}
.img_col_container {
    display: flex;
    flex-direction: column;
}
.img_col_container i {
    margin: 0 2px;
}
.ts__img_flex .img_col_container img:hover {
    border: 1px solid #0000001c;
    cursor: pointer;
    transform: scale(1.1);
    transform: scale(1.05);
    box-sizing: border-box;
    z-index: 1;
    position: relative;
}
.ts__img_flex .img_col_container img.blue {
    /* width: calc(100% - 8px); */
    border: none !important;
    outline: 4px solid #0C3C60;
    outline: 6px solid #0C3C60;
}
.ts__img_flex .img_col_container img.green {
    /* width: calc(100% - 8px); */
    border: none !important;
    outline: 4px solid #428619;
    outline: 6px solid #428619;
}
.ts__img_flex .img_col_container img.orange {
    /* width: calc(100% - 8px); */
    border: none !important;
    outline: 4px solid #f39c12;
    outline: 6px solid #f39c12;
}
/* TABLE-FLEX VELO */
.img_col_container > i.ts__velo {
    max-height: 100%;
    width: 100%;
    position: relative;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: auto;
    box-sizing: border-box;
}
.ts__velo > img + span.ts__velo_overlay {
    display: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -1px;
    right: 0px;
    opacity: 0.3;
    z-index: 1;
    margin: auto;
    pointer-events: none;
    width: 100%;
}
.Bloque.TablaDatos td .img_col_container i.ts__velo > img:hover + span.ts__velo_overlay {
    top: -5px;
    top: -7px;
    left: -4px;
    left: -10px;
    width: calc(100% + 8px);
    width: calc(100% + 20px);
    bottom: -7px;
}
.Bloque.TablaDatos td i.ts__velo > img.orange + span.ts__velo_overlay,
.Bloque.TablaDatos td i.ts__velo > img.green + span.ts__velo_overlay,
.Bloque.TablaDatos td i.ts__velo > img.blue + span.ts__velo_overlay{
    display: inline-block;
}
.Bloque.TablaDatos td i.ts__velo > img.blue + span.ts__velo_overlay {
    background-color: #0C3C60;
}
.Bloque.TablaDatos td i.ts__velo > img.green + span.ts__velo_overlay {
    background-color: #428619;
}
.Bloque.TablaDatos td i.ts__velo > img.orange + span.ts__velo_overlay {
    background-color: #f39c12;
}
/* TABLE-FLEX VELO */
/* IMAGE LABELS - align images to top when labels have different lengths */
.col_imgs_with_labels .img_col_container > i.ts__velo {
    margin-top: 0;
}
/* TABLE-FLEX */
.Bloque.TablaDatos {
	margin-bottom: 0px;
}
.Bloque:last-of-type:not(.TablaDatos) {
  margin-bottom: 2em;
  margin-bottom: 1em;
}
/* TABLE VIEWPORT */
table.tableview {
  height: 90vh;
  height: var(--tableheight);
}
.Bloque.TablaDatos .specialchoice table.programs.tableview td.program img {
  height: 80px;
  height: var(--maximgheight);
}
.ts-hidden {
  opacity: 0;
  z-index: -1;
}
.Bloque.TablaDatos .specialchoice table.programs.tableview tr.tr_super td.img-text {
  vertical-align: top;
}
/* TABLE VIEWPORT */

/* PRE-SURVEY VERIFICATION */
.pre-survey-verification {
  max-width: 700px;
  margin: 0 auto;
}
.pre-survey-verification .pre-survey-title {
  font-size: 1.6em;
  font-weight: 500;
  margin-bottom: 10px;
}
.pre-survey-verification .verification-audio-check {
  padding: 15px;
}
.pre-survey-verification .verification-audio-check .verification-section-title {
  font-size: 1.8em;
  font-weight: 500;
  margin-bottom: 12px;
  background-color: transparent;
  border: none;
  color: #333;
  padding: 0;
}
.pre-survey-verification .verification-audio-check .verification-instruction {
  font-size: 1.4em;
  line-height: 1.5;
  color: #555;
  margin-bottom: 15px;
}
.pre-survey-verification .verification-recaptcha-section {
  padding: 15px;
}
.pre-survey-verification .verification-recaptcha-section .verification-section-title {
  font-size: 1.8em;
  font-weight: 500;
  margin-bottom: 12px;
  background-color: transparent;
  border: none;
  color: #333;
  padding: 0;
}
.pre-survey-verification .verification-recaptcha-section .verification-instruction {
  font-size: 1.4em;
  line-height: 1.5;
  color: #555;
  margin-bottom: 15px;
}
.pre-survey-verification .verification-recaptcha-section #recaptcha-badge-container {
  margin: 15px 0;
}
.pre-survey-verification .verification-recaptcha-status {
  color: #428619;
  font-weight: 500;
  font-size: 1.2em;
  margin-top: 10px;
}
.pre-survey-verification .audio-test-container {
  margin: 15px 0;
}
.pre-survey-verification .audio-confirm-buttons {
  margin: 15px 0;
}
.pre-survey-verification .audio-confirm-buttons .btn {
  margin-right: 10px;
  margin-bottom: 5px;
}
.pre-survey-verification .verification-text-success {
  color: #428619;
  font-weight: 500;
  font-size: 1.1em;
}
.pre-survey-verification .verification-text-warning {
  color: #c9302c;
  font-weight: 500;
  font-size: 1.4em;
  line-height: 1.5;
  margin-bottom: 15px;
}
.pre-survey-verification #audioAdjustMessage .btn {
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
}
@media only screen and (max-width: 600px) {
  .pre-survey-verification {
    padding: 0 10px;
  }
  .pre-survey-verification .audio-confirm-buttons .btn {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
  .pre-survey-verification #audioAdjustMessage .btn {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}
/* PRE-SURVEY VERIFICATION */

/* SUCCESS ERROR */
table.ts_table.ts_validate {
  border-collapse: separate;
}
table.ts_table.ts_validate tr.tr_click.ts_success td:not(:first-child),
table.ts_table.ts_validate tr.tr_click.ts_selected.ts_error td:not(:first-child) {
  border-left: hidden;
}
table.ts_table.ts_validate tr.tr_click.ts_success td:not(:last-child),
table.ts_table.ts_validate tr.tr_click.ts_selected.ts_error td:not(:last-child) {
  border-right: hidden;
}
table.ts_table.ts_validate tr.tr_click.ts_success td:first-child,
table.ts_table.ts_validate tr.tr_click.ts_selected.ts_error td:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
table.ts_table.ts_validate tr.tr_click.ts_success td:last-child,
table.ts_table.ts_validate tr.tr_click.ts_selected.ts_error td:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
table.ts_table.ts_validate tr.tr_click.ts_error input[type="checkbox"]:checked + label {
  background: url(../img/multi-look/red/forms/checkbox.png) 0 -34px no-repeat;
}
table.ts_table.ts_validate tr.tr_click.ts_error input[type="radio"]:checked + label {
  background: url(../img/multi-look/red/forms/radiobutton.png) 0 -34px no-repeat;
}
table.ts_table.ts_validate tr.tr_click.ts_selected.ts_error td {
  border: 4px solid red;
}
table.ts_table.ts_validate tr.tr_click td {
  border: 4px solid transparent;
}
table.ts_table.ts_validate tr.tr_click.ts_success td {
  border: 4px solid green;
}
table.ts_table.ts_validate tr.tr_click.ts_success td,
table.ts_table.ts_validate tr.tr_click.ts_error td {
  font-weight: bold;
}
table.ts_table.ts_validate tr.tr_click.ts_success td {
  color: green;
}
table.ts_table.ts_validate tr.tr_click.ts_error td {
  color: red;
}
table.ts_table.ts_validate tr.tr_click.ts_success td:last-child p:after {
  content: '\2713';
  display: inline-block;
  color: green;
  padding: 0 6px 0 0;
  position: absolute;
  right:10px;
  font-size: 30px;
  font-weight: bold;
  -webkit-text-stroke-width: 1.5px;
}
table.ts_table.ts_validate tr.tr_click.ts_error td:last-child p:after {
  content: '+';
  transform: scale(1.5) rotate(45deg);
  display: inline-block;
  color: red;
  padding: 0 6px 0 0;
  position: absolute;
  right:15px;
  font-size: 30px;
  font-weight: bold;
  top:calc(50% - 7.5px);
  -webkit-text-stroke-width: 1.5px;
}
table.ts_table.ts_validate tr.tr_click.ts_success:hover td,
table.ts_table.ts_validate tr.tr_click.ts_success td {
  background: #0080003d;
}
table.ts_table.ts_validate tr.tr_click.ts_error:hover td,
table.ts_table.ts_validate tr.tr_click.ts_error td {
  background: #ff000054;
}
table.ts_table.ts_validate tr {
  pointer-events: none;
}
/* FIN SUCCESS ERROR */
.ts__large_logo section.Grid .Logo img {
  max-width: calc(100% - 20px);
  height: auto;
}
/* NS-NC ESCALA-VALORACION */
.btn-label {
  border-radius: 4px;
  font-size: 1.8em;
  font-weight: 500;
  color: #FFF;
  min-width: 100px;
  text-align: center;
  cursor: pointer;
  pointer-events: all;
  user-select: none;
}
.btn-label > span {
  display: inline-block;
  padding: 10px;
  vertical-align: middle;
}
.row.ts__disabled {
  opacity: 0.5;
}
.row.ts__disabled label {
  pointer-events: none;
}
.row.ts__disabled li {
  cursor: not-allowed;
}
/* FIN NS-NC ESCALA-VALORACION */
/* G-DOCS */
iframe.gdocs {
  width: calc(100% - 4px);
  border: 2px solid;
}
/* G-DOCS */
/* CHOICE-VIEWPORT-DEMO */
.Bloque.TablaDatos #tableChoice td.program.col1 {
  width: 40%;
}
.Bloque.TablaDatos #tableChoice td i {
  margin: 0 2.5px;
}
@media only screen and (max-width: 920px) {
  .Bloque.TablaDatos #tableChoice td.program.col2 {
    width: 40%;
  }
  .Bloque.TablaDatos #tableChoice td.program.col3 {
    width: 20%;
  }
}
/* CHOICE-VIEWPORT-DEMO */
/* SLIDER-DEMO - removed: was overriding theme slider colors */
/* MOBILE NO-REFRESH */
body {
  overscroll-behavior: none 
}
/* MOBILE NO-REFRESH */
/* POWERED-BY */
p#buildBy {
    text-align: right;
}
p#buildBy a {
    font-weight: 600;
}
.ts_logo {
    font-size: 18px;
    color: gray;
}
.ts_inner{
    -webkit-text-stroke: 0.4px;
}
/* POWERED-BY */
.ts_overflow_visible {
  overflow: visible;
}
/* ANCHO PRIMERA COL MATRICIALES */
table.adaptive.fixed-header.layout-fixed.fc15 thead tr th:first-child {
    width: 15%;
}
table.adaptive.fixed-header.layout-fixed.fc20 thead tr th:first-child {
    width: 20%;    
}
table.adaptive.fixed-header.layout-fixed.fc30 thead tr th:first-child {
    width: 30%;    
}
table.adaptive.fixed-header.layout-fixed th {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ===== NPS VISUALIZATION ===== */
.nps-container {
    overflow: visible !important;
}
.nps-wrapper {
    display: block !important;
    float: none !important;
    width: 80%;
    margin: 0 auto;
}
.Bloque .EscalaValoracion2.nps-container {
    text-align: center;
}
.nps-scale {
    display: flex !important;
    float: none !important;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0;
    width: 100%;
}
.nps-btn {
    flex: 1;
    height: 56px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
    padding: 0;
    outline: none;
    float: none !important;
}
.nps-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.nps-btn.nps-detractor {
    border-color: #e74c3c;
    color: #e74c3c;
}
.nps-btn.nps-passive {
    border-color: #f39c12;
    color: #f39c12;
}
.nps-btn.nps-promoter {
    border-color: #27ae60;
    color: #27ae60;
}
.nps-btn.nps-selected.nps-detractor {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(231,76,60,0.4);
}
.nps-btn.nps-selected.nps-passive {
    background: #f39c12;
    border-color: #f39c12;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(243,156,18,0.4);
}
.nps-btn.nps-selected.nps-promoter {
    background: #27ae60;
    border-color: #27ae60;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(39,174,96,0.4);
}
.nps-scale-labels {
    float: none !important;
    width: 100%;
    padding: 0;
}
.nps-labels-desktop {
    display: flex !important;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 15px;
}
.nps-labels-top,
.nps-labels-bottom {
    display: none !important;
}
.nps-label-min {
    font-size: 16px;
    font-weight: 600;
    color: #e74c3c;
    float: none !important;
}
.nps-label-max {
    font-size: 16px;
    font-weight: 600;
    color: #27ae60;
    float: none !important;
    text-align: right;
}
.nps-selected-zone {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-height: 22px;
    transition: all 0.3s;
}
.Bloque .EscalaValoracion2 .nps-selected-zone-wrapper {
    clear: both;
    float: none;
    width: 100%;
    text-align: center;
}
.Bloque .EscalaValoracion2 .nps-selected-zone-wrapper .nps-selected-zone {
    float: none;
    width: 100%;
}
.nps-selected-zone-detractor {
    color: #e74c3c;
}
.nps-selected-zone-passive {
    color: #f39c12;
}
.nps-selected-zone-promoter {
    color: #27ae60;
}
@media (max-width: 600px) {
    .nps-wrapper {
        display: block !important;
        width: 100%;
    }
    .nps-scale {
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    .nps-btn {
        width: 100%;
        height: 48px;
        font-size: 16px;
        border-radius: 6px;
    }
    .nps-labels-desktop {
        display: none !important;
    }
    .nps-labels-top {
        display: block !important;
        text-align: center;
        margin-bottom: 10px;
    }
    .nps-labels-bottom {
        display: block !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    .nps-label-min,
    .nps-label-max {
        font-size: 14px;
        text-align: center;
    }
}
/* ===== END NPS VISUALIZATION ===== */

/* ===== STEP TRANSITIONS & MICRO-ANIMATIONS ===== */

/* Fade-in animation when a new step loads */
#contentFrontend.step-enter {
    animation: stepFadeIn 0.4s ease forwards;
}
@keyframes stepFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Staggered question block entrance (opacity only, no transform to avoid
   breaking position:fixed/absolute in choice cards and other question types) */
.step-enter .Bloque {
    animation: questionFadeIn 0.4s ease backwards;
}
.step-enter .Bloque:nth-child(1) { animation-delay: 0.05s; }
.step-enter .Bloque:nth-child(2) { animation-delay: 0.1s; }
.step-enter .Bloque:nth-child(3) { animation-delay: 0.15s; }
.step-enter .Bloque:nth-child(4) { animation-delay: 0.2s; }
.step-enter .Bloque:nth-child(5) { animation-delay: 0.25s; }
.step-enter .Bloque:nth-child(6) { animation-delay: 0.3s; }

@keyframes questionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== PROGRESS BAR IN HEADER (with logo) ===== */
.header-progress {
    flex: 1;
    min-width: 200px;
    max-width: 500px;
}

/* ===== MODERN PROGRESS BAR ===== */
.progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
}
.progress-bar-track {
    flex: 1;
    height: 12px;
    background: #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    background: #428619;
}
.progress-text {
    font-size: 13px;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

/* ===== END STEP TRANSITIONS & PROGRESS BAR ===== */


/* ===== PUBLICATION CHOICE CARDS =============================================
   Opt-in visual variant for Choice questions whose parent uses the
   "Personal design" generation method (modelFactorialIniae) AND whose
   ConfigChoice.cardStyle is "publication". The Velocity template
   (questionMultipleDiscreteChoice.vm) adds the .choice-publication class
   to the card wrapper only when both conditions are met; for any other
   case these rules don't match and the existing classic look applies.

   Theme awareness: the column-header pill colour is driven by the
   --ts-publication-pill variable. orange.css / blue.css / green.css
   override this variable at the end of each theme so the pill picks up
   the theme's primary colour automatically (CABECERA-equivalent).

   Structural notes:
   - The HTML is unchanged from the classic template; only the wrapper
     gets a class. We re-style cells via the same .programs table.
   - border-spacing creates horizontal gaps between columns so each
     program looks like a standalone pill; cells inside a column share a
     uniform white background, so visually they read as a single column.
   - Header (thead) gets the dark theme pill at top with rounded corners.
   - Footer (tfoot) gets matching rounded corners at bottom plus the
     "My choice!" hint under the selected radio. */

/* === Publication card style ===
 *
 * Design contract: Publication == Classic in every dimension (heights,
 * paddings, font sizes, border-spacing, image budget). The ONLY visual
 * deltas are:
 *   1. Header cells get a filled theme-coloured background.
 *   2. Each program column carries a 2 px theme-coloured outline
 *      (left/right on every row, top on the header, bottom on the tfoot)
 *      with rounded corners — the "pill" effect.
 *   3. The radio sprite is replaced by a tickStat-style square with a
 *      CSS-drawn check.
 *
 * Anything that touches dimensions (cell padding, border-spacing,
 * font-size, mobile media query overrides) is intentionally absent —
 * the legacy ts-choice-viewport.js was tuned for Classic's dimensions
 * and breaks (uniform transform:scale that wastes horizontal space)
 * when Publication adds more vertical overhead per row. Keep this rule
 * in mind before adding ANY padding/sizing override here.
 */

.choice-publication {
  --ts-publication-pill: #1a2a42;          /* dark navy default — themes override */
  --ts-publication-pill-text: #ffffff;
  --ts-publication-tint: rgba(26, 42, 66, 0.06);  /* matches pill at 6% */
}

/* border-collapse must stay "separate" — collapse breaks border-radius
   on cells (the rounded corners of the thead/tfoot pills disappear).
   border-spacing keeps a small horizontal gap so adjacent pill columns
   don't stack their 2 px side borders into a 4 px shared spine. The
   trade-off is that the per-cell border-bottom looks segmented at the
   column gaps (each cell's separator stops at its right edge); we
   accept that here because the alternatives (collapse → no radius;
   zero spacing → pills glued together) are worse. */
.Bloque.TablaDatos.choice-publication table.programs {
  border-collapse: separate;
  border-spacing: 4px 0;
}

/* THEAD: programa header pill — filled theme background, theme outline
   on top/sides, rounded top corners. With border-collapse:collapse the
   thead's bottom border merges with tbody's first row top, giving a
   clean 1 px line at the seam (from Classic's td border-bottom). */
.Bloque.TablaDatos.choice-publication table.programs thead td.program {
  background: var(--ts-publication-pill);
  color: var(--ts-publication-pill-text);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-left: 2px solid var(--ts-publication-pill);
  border-right: 2px solid var(--ts-publication-pill);
  border-top: 2px solid var(--ts-publication-pill);
}

/* TBODY: side outline (left/right) of every program column — real 2 px
   borders. The horizontal row separator is drawn via a background-image
   gradient (8 px solid + 6 px gap = wide, clearly discrete dashes) so
   the small horizontal gap that border-spacing leaves between columns
   reads as natural empty space between dashes rather than a broken
   line. */
.Bloque.TablaDatos.choice-publication table.programs tbody tr td.program {
  border-left: 2px solid var(--ts-publication-pill);
  border-right: 2px solid var(--ts-publication-pill);
  border-bottom: 1px solid transparent;
  background-image: linear-gradient(to right,
                                    #c4c4cc 0, #c4c4cc 8px,
                                    transparent 8px, transparent 14px);
  background-size: 14px 1px;
  background-repeat: repeat-x;
  background-position: bottom;
}

/* TFOOT: closes the pill at the bottom. Side borders continue, plus the
   theme-coloured bottom border + rounded bottom corners. No padding
   override — inherits Classic's tfoot td padding so heights match. */
.Bloque.TablaDatos.choice-publication table.programs tfoot td.program {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  border-left: 2px solid var(--ts-publication-pill);
  border-right: 2px solid var(--ts-publication-pill);
  border-bottom: 2px solid var(--ts-publication-pill);
}

/* Replace the radio sprite with a tickStat-style check inside a rounded
   square box. The hidden <input type=radio> still drives behaviour
   (single-select, form submission, etc.); only the visual changes:
     - Unselected → empty box, theme-coloured border, white interior.
     - Selected   → SAME white interior, theme-coloured check inside,
                    plus a "My choice!" tag to the right of the box.
   The legacy 31x99 PNG sprite is suppressed via background-image:none. */
.choice-publication table.programs tfoot input[type=radio] + label {
  width: 36px !important;
  height: 36px !important;
  background-image: none !important;
  background-color: #fff !important;
  border: 2px solid var(--ts-publication-pill) !important;
  border-radius: 6px !important;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.choice-publication table.programs tfoot input[type=radio]:checked + label {
  background-image: none !important;
  background-color: #fff !important;       /* white interior preserved */
}

/* CSS-drawn check (✓) in the theme colour. tickStat-style proportions:
   SHORT down-stroke on the LEFT, LONG up-stroke on the RIGHT. With the
   classic rotate(45deg) trick the box's HEIGHT becomes the long right
   arm and the WIDTH becomes the short left arm (the box's right border
   ends up as the right arm of ✓, bottom border as the left arm — when
   the corner of the L sits at the bottom-left after rotation). So we
   want height > width. */
.choice-publication table.programs tfoot input[type=radio]:checked + label::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 4px;
  width: 12px;       /* short left arm */
  height: 22px;      /* long right arm */
  border: solid var(--ts-publication-pill);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  transform-origin: center;
}

/* (Removed: the "My choice!" label after the checked radio added noise
   and would have required translation to 13 locales for marginal value;
   the cream-tinted column + thicker border + tick icon already make the
   selection unambiguous.) */

/* The legacy `.column-selected` / `.column-selected-top` classes are
   added by the click handler. We reuse them as the "this column is
   picked" signal — but reskin the visual:
     - Header keeps its dark pill (cancels the cream bg from the legacy
       rule that was making the white text unreadable).
     - Borders thicken from 2px to 4px so the picked column is
       unmistakable at a glance (user's request).
     - Body cells get a subtle theme-tinted background so the eye is
       drawn to the picked column without obscuring the values.
   transition makes the click feel responsive instead of sudden. */
.Bloque.TablaDatos.choice-publication table.programs td.column-selected,
.Bloque.TablaDatos.choice-publication table.programs td.column-selected-top {
  border-left: 4px solid var(--ts-publication-pill) !important;
  border-right: 4px solid var(--ts-publication-pill) !important;
  transition: border-width 0.15s, background-color 0.15s;
}
.Bloque.TablaDatos.choice-publication table.programs thead td.program.column-selected,
.Bloque.TablaDatos.choice-publication table.programs thead td.program.column-selected-top {
  background-color: var(--ts-publication-pill) !important;
  background: var(--ts-publication-pill) !important;
  color: var(--ts-publication-pill-text) !important;
  border-top: 4px solid var(--ts-publication-pill) !important;
}
.Bloque.TablaDatos.choice-publication table.programs tbody td.program.column-selected {
  background-color: var(--ts-publication-tint) !important;
}
.Bloque.TablaDatos.choice-publication table.programs tfoot td.program.column-selected {
  background-color: var(--ts-publication-tint) !important;
  border-bottom: 4px solid var(--ts-publication-pill) !important;   /* close the pill at the bottom too, matching the thick sides */
}

/* Mobile: ts-choice-viewport.js hides the tfoot (radio row replaced by
   tap-to-select on the column). With tfoot gone, the LAST tbody row
   becomes the visual bottom of each pill — paint the closing border +
   rounded corners there so the pill is still closed. NO dimensional
   overrides — Publication inherits Classic's mobile dimensions so the
   JS scales it the same way and there is no lateral whitespace. */
@media only screen and (max-width: 768px) {
  .Bloque.TablaDatos.choice-publication table.programs tbody tr:last-child td.program {
    border-bottom: 2px solid var(--ts-publication-pill);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }
  .Bloque.TablaDatos.choice-publication table.programs tbody tr:last-child td.program.column-selected {
    border-bottom: 4px solid var(--ts-publication-pill) !important;
  }
}
/* ===== END PUBLICATION CHOICE CARDS ===== */

/* ANCHO PRIMERA COL MATRICIALES */