/**
* AbiEX v1.0 - https://abiex.educarex.es/
*
* Autores:
*  Pedro Obregón Mejías (pedro.obregon@educarex.es)
*  José Rasero Mejías (jose.rasero@educarex.es)
*
* Junta de Extremadura, Consejería de Educación y Empleo (STE).
*
* License: GPL v2 or higher (http://www.gnu.org/licenses/gpl.html)

* AbiEX sirve como base del desarrollo de Abies+
* Autor:
* Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado (INTEF) - https://intef.es
*
* License: GPL v3 (http://www.gnu.org/licenses/gpl.html)
* Se atenderá a la "Excepción de Sistema Específico": en la GPLv3 se encuentra en el Artículo 7 de la licencia.
* Esta cláusula establece que ciertas actividades de ejecución y transmisión relacionadas con
* el funcionamiento normal del sistema operativo no están sujetas a los requisitos de la licencia,
* por lo que no se requiere que se distribuya el código fuente en esos casos.
* Abies+ proporciona datos a un tercero (portal que recoge estadísticas de uso, gestión de licencias, etc.).
*/
/* CSS reset */
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.5em; }
b, strong { font-weight: bold; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
th { text-align: center; font: bold 110% arial,sans-serif; }
p { margin: 1em 0; }
a { text-decoration: none; color: #686; font-weight: bold; }
i { font-style: italic; }

@font-face {
  font-family: 'Abel'; font-style: normal; font-weight: 400;
  src: local('Abel Regular'), local('Abel-Regular'), url("../fonts/Abel.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
				 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Estilos de estructura */
body {
	min-width: 360px; font: normal 11pt arial,sans-serif; margin: 0; padding: 0;
	background-color: #FFF; line-height: 1.2em;
}

#cabecera {
	position: relative; height: 50px; color: #444; box-sizing: border-box;
	border-bottom: 1px solid #DDD; box-shadow: 0 2px 5px rgba(0,0,0,0.3); z-index: 150;
	/* background: #F4F4F4 url("../imgs/jex-cee-top.png") 50% 0 no-repeat; */
	background-color: #F4F4F4;
}

#paneles { display: flex; height: calc(100vh - 92px); background-color: #F8F7F6; }
#paneles > div { height: 100%; box-sizing: border-box; }
#panelnav {
	position: relative; width: 240px; transition: width .3s; background-color: #142C33; overflow: auto;
}
#panelcnt { width: 100vw; overflow: auto; padding: 16px; }

#pie {
	position: relative; height: 42px; background-color: #142C33; box-shadow: 0 -2px 5px rgba(0,0,0,0.3); z-index: 1;
}
#pie > span { float: right; color: #FFF; margin: 18px 11px 0 0; font-size: 9pt; font-style: italic; }
#logogobierno {
	display: block; width: 180px; height: 42px; outline: none; float: left;
	background: url("../imgs/logo-gobw.png") 0/contain no-repeat;
}
#logojunta {
  display: block; width: 180px; height: 42px; outline: none; float: left;
  background: url("../imgs/JextCnsEd.png") 0/contain no-repeat;
}
#logoministerio {
  display: block; width: 180px; height: 42px; outline: none; float: left;
  background: url("../imgs/gobierno_de_espana_con_educacion_para_web_Nivel_Gris_2_PNG.png") 0/contain no-repeat;
}
#logoabw {
	float: left; display: block; height: 36px; width: 220px; outline: none; padding: 34px 0 0;
	margin: 2px 0 0 3px; background: url("../imgs/logo_Abies_23_1.svg") no-repeat; background-size: contain;
	font: normal 10px Abel,arial,sans-serif; color: #000; box-sizing: border-box;
}

#wait { position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 100%; display: none; cursor: wait; }

.inv { display: none; }

/* e404 */
#e404 {
	margin: 10px; border: 1px solid #CCC; background-color: #F8F8F8; min-height: 156px;
	-webkit-box-shadow: 1px 1px 5px #CCC; box-shadow: 1px 1px 5px #CCC;
	background: url("../imgs/error-ico.png") 98% 90% no-repeat;
}
#e404 h1 {
	color: #864; background-color: #EFE8E0; border-bottom: 1px solid #EDC; font-size: 14pt;
	margin: 0 0 14px 0; padding: 14px 15px 10px 15px; text-shadow: 1px 1px 0 #FFF;
}
#e404 p { margin: 12px 15px; font-size: 120%; }

/* Diálogos */
.dlg { display: none; }
.ui-dialog h4 { margin: 0 0 10px; padding: 4px 4px 8px; border-bottom: 1px solid #888; font-size: 120%; }
/*
.ui-dialog .accs { margin: 0; padding-top: 10px; border-top: 1px solid #888; margin-top: 10px; text-align: center; }
.ui-dialog .accs a { display: inline-block; width: 50px; text-align: center; font-size: 20pt; position: relative; }
.ui-dialog .accs a:first-child { color: #C00; }
.ui-dialog .accs a:last-child { color: #080; }
.ui-dialog .accs a:hover { text-shadow: 1px 1px 2px #333; top: -1px; }
*/

/* Grids */
.flexigrid .si { font-weight: bold; color: #080; }
.flexigrid .no { font-weight: bold; color: #A00; }
.flexigrid .act { font-weight: bold; color: #48C; }
.flexigrid .des { font-weight: bold; color: #AAA; }

/* Forms */
.form .sep { height: 10px; width: 100%; }
.form .seph {
	display: inline-block; width: 3px; height: 1em; clear: none; background-color: #AAA;
	vertical-align: middle; margin: 0 3%;
}
.form .box { position: relative; }
.form hr { border: none; border-top: 1px solid #ECA; }
.form fieldset { margin: 0 0 8px; padding: 6px 10px; border: 1px solid #CCC; border-radius: 6px; }
.form legend { color: #668; font-size: 85%; font-weight: bold; padding: 0 4px; }
.form label { font-weight: bold; font-size: 92%; color: #666; }
.form label span { font-size: 85%; }
.form label.sup { display: block; margin-bottom: 1px; padding-left: 5px; }
.form label.fix {
	display: inline-block; width: 20%; margin: 10px 2px 0 3px; padding-left: 2px;
	border-bottom: 1px dotted #AAA; vertical-align: top; box-sizing: border-box;
}
.form label.ext { display: inline-block; margin: 5px 4px; }
.form label.extb { display: block; margin: 5px 4px 8px; }
.form .der { text-align: right; }
.form .izq { text-align: left; }
.form .cen { text-align: center; }
.form input.chk { vertical-align: middle; margin: 0 6px 1px 14px; }
.form ul.lst {
	background-color: #FFF; padding: 3px 3px 1px; margin: 0 0 4px; border: 1px solid #CCC;
	max-height: 12em; overflow: auto; border-radius: 4px; box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.form ul.lst li { border-bottom: 1px dotted #CCC; margin: 0 0 2px; padding: 0 0 2px; }
.form ul.lst li:last-child { border-bottom: none; }
.form ul.lst label {
	font: normal 9pt arial,sans-serif; display: block; color: #444; cursor: pointer;
	border: 1px solid transparent; padding: 4px 6px; border-radius: 4px;
}
.form ul.lst label:hover { background-color: #FFC; border-color: #EE6; }
.form ul.lst span { font-size: 80%; }
.form ul.lst li.sel label { font-weight: bold; background-color: #CEF; border-color: #ABC; }
.form textarea { resize: none; min-height: 5em; }
.form [class*="tx"] {
	padding: 7px; border: 1px solid #CCC; color: #444; box-sizing: border-box; background-color: #FFF;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.2); font: normal 1em Arial, sans-serif; margin: 0 0 10px;
	border-radius: 4px;
}
.form [class*="tx"].sel, .form [class*="tx"]:focus { outline: none; border-color: #48C; box-shadow: 0 0 2px #08F; }
.form .tx0 { width: 100%; }
.form .tx1 { width: calc(100% - 22.5%); }
.form .tx1-5 { width: calc(85% - 20%); }
.form .tx2 { width: calc( 70% - 20%);	}
.form .tx3 { width: calc( 50% - 168px); }
.form .tx4 { width: calc( 46% - 21.6%); }
.form .tx5 { width: calc( 30% - 168px); }
.form select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 6px 16px 6px 6px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12' width='10'%3E%3Cpolygon style='fill:%23888' points='0,0 10,0 5,12'%3E%3C/polygon%3E%3C/svg%3E")
		#FFF right 6px bottom 8px/7px 8px no-repeat;
}

/* Abies+ - Estilo para input readonly */
.form [class*="tx"][readonly] {
  background-color: #e9ecef !important;
  color: #6c757d;
  border-color: #CCC;
  box-shadow: none !important;
}

.form .fecha { text-align: center; width: 20%; min-width: 110px; }
.form .creq { float: right; margin-right: 5px; color: #E00; font-size: 12pt !important; line-height: 11px; }

.panel-btns { text-align: center; padding: 2px; margin-top: 8px; }
.btn {
	position: relative; padding: .8em 1.2em; margin: 2px; text-decoration: none; outline: none;
	font: bold 10pt Arial,sans-serif; border: none; cursor: pointer; background-color: #EEE;
	border: 1px solid #CCC; border-radius: 4px; color: #444; box-shadow: 2px 2px 1px #CCC;
}
.btn i { font-size: 120%; margin-right: 3px; }
.btn:focus, .btn:hover { background-color: #E0E0E0; }
.btn:focus i, .btn:hover i { color: #080; }
.btn:active { box-shadow: none; top: 2px; left: 2px; }
.btnLeft { float: left; }
.btn.dis, .btn.dis:hover, .btn.dis:hover i { color: #888; box-shadow: none; top: 2px; left: 2px; }
input.btn::-moz-focus-inner, button.btn::-moz-focus-inner { border: 0; padding: 0; }
span.btnr { position: relative; }
span.btnr input { padding-right: 36px ! important; }
span.btnr a {
	position: absolute; top: -3px; right: 0; padding: 2px; font-size: 13pt; color: #888; margin-right: 9px;
}

.cargando::after {
	content: ""; display: block; position: absolute; background: url("../imgs/load/form-loading.gif") no-repeat;
	width: 50px; height: 50px; top: 45%; left: 50%; transform: translate(-50%,-50%);
}

.form .imagen { position: absolute; bottom: 1px; right: 10px; width: 140px; }
.form .imagen .tx0 { height: 163px; }

.form .nota {
	border: 1px solid #EEB; background-color: #FFC; color: #444; font-size: 92%;
	padding: 4px 8px; border-radius: 6px;
}

section .titulo { font: bold 160% abel,arial,sans-serif; }

#datos { position: relative; min-height: 100px; }

/* Upload imagen */
.imagen .tx0 { position: relative; }
.imagen .tx0 img { width: 100%; height: 100%; object-fit: contain; }
.sel-archivo input[type="file"],
.imagen input[type="file"] {
	position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
	opacity: 0; cursor: pointer; z-index: 2;
}

/* Estilos Material */
.group-material { position: relative; margin-bottom: 20px; font-size: 10pt; }
.group-material input.text {
	background-color: transparent; padding: 8px 8px 4px 8px; display: block;
	width: 100%; border:none; border-bottom: 1px solid #444; outline:none;
	box-sizing: border-box; font-size: inherit;
}
.group-material input.text:-webkit-autofill { background-color: transparent !important; }
.group-material input.text:focus { outline: none; }
.group-material label {
	position: absolute; font-weight: normal; pointer-events: none;
	left: 8px; top: 10px; transition: all 0.2s ease; color: #444;
	-moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
}
.group-material input.content ~ label,
.group-material input.text:focus ~ label { top: -12px; font-size: 8pt; }
.group-material span { position: relative; display: block; width: 100%; }
.group-material span::before, .group-material span::after {
	content: ""; height: 2px; width: 0; bottom: 1px; position: absolute;
	background-color: #444; transition: all 0.2s ease; -moz-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.group-material span::before { left:50%; }
.group-material span::after { right:50%; }
.group-material input.text:focus ~ span::before,
.group-material input.text:focus ~ span::after { width:50%; }

/* Acordeones */
.acordeon > form, .acordeon > section { position: relative; display: none; margin: 10px 12px; }
.acordeon > form:nth-child(2), .acordeon > section:nth-child(2) { display: block; }
.acordeon > h3 {
	background-color: #EEE; padding: 7px 7px 7px 32px; position: relative; font: bold 120% abel,arial,sans-serif;
	border: 1px solid #AAA; border-radius: 5px; margin: 0 0 1px; cursor: pointer;
}
.acordeon > h3::before {
	content: "\f055"; font: normal 14pt "Font Awesome Solid"; position: absolute; left: 7px; top: 7px; color: #080;
}
.acordeon > h3.sel::before { content: "\f056"; color: #A80; }

/* Tooltips de validación */
.valid-tooltip {
	position: absolute; z-index: 1050; cursor: pointer; padding: 3px 5px; font-size: 85%;
	color: #FFF; background-color: #E00; border: 1px solid #B00; line-height: 1.1em;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4); display: none;
}
.valid-tooltip:hover { color: #EE0; }

.valid-tooltip.atop { max-width: 240px; }
.valid-tooltip.aleft { max-width: 12em; }
.valid-tooltip.atop::before, .valid-tooltip.atop::after {
	content: ""; position: absolute; display: block; width: 0; height: 0; border: 7px solid #B00;
	border-top: none; border-left-color: transparent; border-right-color: transparent; top: -7px; left: 2px;
}
.valid-tooltip.atop::after { border-bottom-color: #E00; top: -6px; }
.valid-tooltip.aleft::before, .valid-tooltip.aleft::after {
	content: ""; position: absolute; display: block; width: 0; height: 0; border: 7px solid #B00;
	border-left: none; border-top-color: transparent; border-bottom-color: transparent; top: 2px; left: -7px;
}
.valid-tooltip.aleft::after { border-right-color: #E00; left: -6px; }

/* Selector perfil */
.sel_perfil {
	position: relative; float: right; padding: 16px 44px 5px 0; box-sizing: border-box; cursor: pointer;
}
.sel_perfil span { font: bold 11pt Abel,arial,sans-serif; float: right; }
.sel_perfil::after {
	content: "\f007"; font-family: "Font Awesome Regular"; font-size: 15pt;
	position: absolute; right: 16px; top: 15px;
}
.sel_perfil div { display: none; position: absolute; top: 30px; right: 10px; padding-top: 14px; z-index: 100; }
/* .sel_perfil div:hover, .sel_perfil:hover div { display: block; } */
.sel_perfil ul {
	background-color: #FAFAFA; border: 1px solid #C4C4C4; padding: 8px 6px; min-width: 310px; max-width: 360px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2); font: normal 11pt Abel,arial,sans-serif; max-height: 72vh; overflow: auto;
}
.sel_perfil div::before, .sel_perfil div::after {
	content: ""; position: absolute; display: block; width: 0; height: 0; border: 11px solid #BBB;
	border-top: none; border-left-color: transparent; border-right-color: transparent; top: 3px; right: 4px;
}
.sel_perfil div::after { border-bottom-color: #FAFAFA; top: 4px; }
.sel_perfil ul li { padding: 6px; border: 1px solid transparent; border-radius: 4px; }
.sel_perfil ul li.sel { background-color: #CEF; border-color: #ACD; font-weight: bold; }
.sel_perfil ul li:hover { background-color: #FFA; border-color: #EE6; color: #000; }
.sel_perfil ul li.sep { height: 0; padding: 0; margin: 4px 0; border: none; border-top: 2px groove #FFF; }
.sel_perfil ul li.sep:hover { background-color: none; border-color: none; }

.notifications {
    position: relative;
    float: right;
    box-sizing: border-box;
    cursor: pointer;
}
.notifications a.number {
    font-weight: normal;
    color: #444;
}

.fa-stack{
    height: auto!important;
}

.fa-stack[data-count]:after{
    position: absolute;
    right: 22%;
    top: -3px;
    content: attr(data-count);
    font-size: 25%;
    padding: 0.5em;
    border-radius: 999px;
    line-height: .75em;
    color: white;
    background: rgba(255,0,0,.85);
    text-align: center;
    min-width: 2em;
    font-weight: bold;
}

.notifications_number::before {
    content: "\f0f3";
    font-family: "Font Awesome Regular", sans-serif;
    font-size: 17pt;
    position: absolute;
    right: 45px;
    top: -28px;
}

#sel-biblio ul { height: 50vh; overflow: auto; padding: 2px; }
#sel-biblio ul li { padding: 3px; margin: 0 0 2px; border: 1px solid transparent; border-radius: 4px; }
#sel-biblio ul li.sel { background-color: #CEF; border-color: #ACD; font-weight: bold; }
#sel-biblio ul li:hover { background-color: #FFA; border-color: #EE6; color: #000; cursor: pointer; }
#sel-biblio li span { font-size: 80%; font-style: italic; color: #88A; }

@-webkit-keyframes blink {
	from { background-color: #F4F4F4; } to { background-color: #FFC0C0; }
}
@-moz-keyframes blink {
	from { background-color: #F4F4F4; } to { background-color: #FFC0C0; }
}
@-ms-keyframes blink {
	from { background-color: #F4F4F4; } to { background-color: #FFC0C0; }
}
@-o-keyframes blink {
	from { background-color: #F4F4F4; } to { background-color: #FFC0C0; }
}
@keyframes blink {
	from { background-color: #F4F4F4; } to { background-color: #FFC0C0; }
}

.blink {
	color: #000;
	-webkit-animation: blink .8s linear infinite alternate;
	-moz-animation: blink .8s linear infinite alternate;
	-ms-animation: blink .8s linear infinite alternate;
	-o-animation: blink .8s linear infinite alternate;
	animation: blink .8s linear infinite alternate;
}

/* Logo */
.logo {
	width: 100%; min-width: 200px; padding: 0 5px; box-sizing: border-box; text-align: center;
	font: normal 10pt Abel,arial,sans-serif; color: #FFF;
}
.logo img {
	display: block; margin: 0 auto 5px;	width: 140px; height: 140px;
	object-fit: contain; /* object-position: 50% 0; border-radius: 25%; */
}

/* Tabs */
.cont-tabs { min-height: 150px; }
.tabs {
	height: 23px; list-style-type: none; margin: 0 0 8px; padding: 0 4px;
	background-color: #FFF; border-bottom: 1px solid #888; font-weight: bold;
}
.tabs li {
	background-color: #DDD; border-radius: 4px 4px 0 0; border: 1px solid #888;
	display: inline-block; float: left;
	height: 20px; margin: 2px 1px 4px; overflow: hidden;
	text-shadow: 1px 1px 0 #FFFFFF; vertical-align: top;
	background-image: linear-gradient(top, #EEE 10%, #CCC 90%);
	background-image: -webkit-linear-gradient(top, #EEE 10%, #CCC 90%);
	background-image: -moz-linear-gradient(top, #EEE 10%, #CCC 90%);
	background-image: -o-linear-gradient(top, #EEE 10%, #CCC 90%);
	background-image: -ms-linear-gradient(top, #EEE 10%, #CCC 90%);
}
.tabs li.sel {
	background: #FFF url("../imgs/top_tab.png") repeat-x;
	height: 22px; border-bottom: none;
}
.tabs a { display: block; text-decoration: none; padding: 3px 8px; color: #555; }
.tabs a:hover { text-decoration: none; }
.tabs li.sel a { color: #222; outline: none; }
.tabs a.dis { color: #AAA; text-shadow: none; cursor: default; }

.tab { display: none; }

/* Grids autoeditables */
.aux-aedit { float: left; margin: 2px 0; }
input.filt-aedit {
	padding: 5px; border: 1px solid #CCC; color: #444; box-sizing: border-box; background-color: #FFF;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.2); font: normal 1em Arial, sans-serif; margin: 0 2px;
	border-radius: 4px;
}
input.filt-aedit:focus { border-color: #48C; box-shadow: 0 0 2px #08F; }
.exp-aedit {
	padding: 5px 9px; margin: 0 2px; text-decoration: none; outline: none; cursor: pointer; color: #444;
	background-color: #EEE; border: 1px solid #CCC; border-radius: 4px; box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.exp-aedit::before { font: normal 13pt "Font Awesome Regular"; content: "\f1c1"; }
.exp-aedit:hover { color: #C22; }
.exp-aedit:active { box-shadow: none; top: 2px; left: 2px; }
.autoeditable { width: 100%; border: 1px solid #CCC; background-color: #FFF; }
.autoeditable thead { background-color: #EEE; }
.autoeditable th,
.autoeditable td { border: 1px dotted #CCC; padding: 4px 6px; vertical-align: middle; }
.autoeditable tbody tr { border-bottom: 1px solid #CCC; }
.autoeditable tbody tr:nth-child(odd) { background-color: #F8F8F8; }
.autoeditable tbody tr:hover { background-color: #FFA; }
.autoeditable tbody tr.sel { background-color: #CEF; }
.autoeditable tbody tr.fijo { background-color: #F2FFF2; }
.autoeditable tbody tr.fijo td.editable { color: #888; }
.autoeditable td.editable:focus {
	border: 1px solid #08E; box-shadow: 0 0 2px inset #08E; outline: none; font-weight: bold;
}
.autoeditable tbody tr.sel a[href="#sel"] { color: #C00; }
.autoeditable tbody tr.sel a[href="#sel"] i::before { content: "\f058"; }

.autoeditable .accs { width: 60px; text-align: center; font-size: 110%; color: #444; }
.autoeditable .accs a { color: #444; }
.autoeditable .accs a:hover { color: #090 !important; }
.autoeditable .accs i { padding: 2px 7px; }

/* Filtros */
.filtro .btn { float: right; padding: 6px 22px; margin: 0 1px; }
.filtro .condiciones {
	border: 1px solid #CCC; margin: 0; padding: 5px; height: 9em; overflow: auto;
	border-radius: 5px;
}
.filtro #fav_neg { margin-left: 14px; }
.filtro span.fav_valor { display: none; }
.condiciones li {
	font: normal 9pt arial,sans-serif; display: block; color: #444; cursor: pointer;
	border: 1px solid transparent; padding: 4px; border-radius: 4px;
}
.condiciones li:hover { background-color: #FFC; border-color: #EE6; }
.condiciones li.nexo { font-weight: bold; }
.condiciones li:last-child { margin-bottom: 5px; }
.condiciones li a { float: right; }
.condiciones li a i { color: #C00; margin-top: -2px; font-size: 148%; }
.condiciones li.editing { background-color: #EEE; border: 1px solid #CCC; }
.condiciones li.editing a { display: none; }

/* Impresión */
#print-area { display: none; }
#print-area p { margin: 0.5em 0; }
#print-area p.sub { text-decoration: underline; font-size: 140%; }
#print-area p.info { font-style: italic; }
#print-area div.lst { font-size: 90%; }

@media only print {
	body > * { display: none !important; }
	#print-area { display: block !important; }
}

/* Orden de signaturas */
.form-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sortable-container {
  list-style: none;
  display: flex;
  gap: 10px;
  /* Espaciado entre elementos */
  padding: 0;
  margin: 0;
}

.sortable-item {
  padding: 10px 20px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  cursor: grab;
  user-select: none;
}

.sortable-item:active {
  cursor: grabbing;
}

.sortable-item.dragging {
  opacity: 0.5;
}

.sortable-item.placeholder {
  background-color: #d3d3d3;
  border: 1px dashed #aaa;
}

span.separator {
  align-self: center;
}