.ck-balloon-panel{
	display: none !important;
}
.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw{
	max-width: 320px;
	right: -5px;
	top: 34px;
	border-radius:5px;
	overflow:hidden;
}
.content80{
	max-width: 800px;
	margin: 0 auto;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.oddeven > div:nth-child(even),
.oddeven > li:nth-child(even){
	background-color: var(--light);
}
.oddeven > div:nth-child(odd),
.oddeven > li:nth-child(odd){
	background-color: var(--white);
}
.bxshl {
    box-shadow: 10px 0px 15px -5px rgba(0, 0, 0, 0.2);
}

.tools,
.summary-document{
	background-color:var(--light);
}
.text-wrap,
.text-wrap p {
	word-wrap: break-word;
}
.text-ellipsis,
.text-ellipsis p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.text-nowrap{
	white-space: nowrap;
}
/* ICONS */
.icon{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 7.5px 10px;
	box-sizing: unset;
}
.icon > span{
	display: flex;
	justify-content: center;
	align-items: center;
}
.icon.tiny > span > svg{
	width:25px;
	height:25px;
}

.icon.mini > span > svg{
	width: 20px;
	height: 20px;
}
.icon.medium > span > svg {
	width: 50px;
	height:50px;
}
.icon.bigger > span > svg {
	width: 75px;
	height:75px;
}
.icon.tiny.mini > span{
	--ggs:0.7;
}
.icon.bigger > span{
	--ggs:1.6;
}
.icon.medium > span{
	--ggs:1.2;
}
.icon.maxi > span > svg{
	width: 100px;
	height: 100px;
}
.icon.maxi > span{
	--ggs:2;
}
/**POP UP**/
.popUp-info{
	width: 80%;
	text-align: left;
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translate(-50%, 0%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding:5px 22px 5px 10px;
	border-radius:8px;
	z-index: 10000;
}.popUp-info > .close-popUp{
	position: absolute;
	top: 0;
	right: 0px;
	height: 100%;
	padding: 0px 5px;
	border-left: 1px dashed white;
	cursor: pointer;
	display: flex;
	align-items: center;
}.popUp-info > p{
	margin:5px;
}
/* Disposición autmática de listas */
ul.inline-block{
	display: flex;
    flex-wrap: wrap;
	align-items: center;
}
ul.inline-block > li {
    /*box-shadow: 1px 0 0 0 #e1e1e1, 0 1px 0 0 #e1e1e1, 1px 1px 0 0 #e1e1e1, inset 1px 0 0 0 #e1e1e1, inset 0 1px 0 0 #e1e1e1;*/
    flex: auto;
    min-width: 160px;
    width: 25%;
    box-sizing: border-box;
}
.selected{
	background-color:var(--light);
	border:1px solid rgba(0,0,0,0.3);
	transform:rotate(-5deg);
}
.highlight{
	background-color:rgba(0,0,0,0.1);
}
.drop-highlight {
    border:1px dashed var(--primary);
    background-color: #e6f7ff;
	box-sizing: border-box;
}

.flash-popup {
    position: fixed;
    top:45px;
    right: -350px; /* fuera de pantalla inicialmente */
    z-index: 9999;
    width: 300px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    overflow: hidden;
    font-family: sans-serif;
    color: #333;
    transition: right 0.5s ease;
}

/* Animación de entrada */
.flash-popup.show {
    right: 5px;
}

/* Animación de salida */
.flash-popup.hide {
    right: -350px;
}

/* Barra de progreso */
.flash-popup .bar {
    height: 5px;
    width: 100%;
}

.flash-popup.success .bar {
    background-color: var(--primary);
}

.flash-popup.error-box .bar {
    background-color: var(--action);
    width: 100%;
}

/* Contenido interno */
.flash-popup .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}

.flash-popup .message {
    flex: 1;
    padding-right: 10px;
}

.flash-popup .close-btn {
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

/* 1) Contenedor fijo que apila en columna */
.error-container {
    position: fixed;
    top: 45px;
    right: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

/* 2) Caja de error en su flujo (no fixed), animada con transform */
.error-box {
    width: 300px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    overflow: hidden;
    font-family: sans-serif;
    color: #333;
    transform: translateX(350px);           /* fuera de vista */
    transition: transform 0.5s ease;
}

/* 3) Al mostrarla, la traemos a su sitio */
.error-box.show {
    transform: translateX(0);
}

/* 4) Al ocultarla, la mandamos otra vez a la derecha */
.error-box.hide {
    transform: translateX(350px);
}

/* 5) Barra roja estática (sin temporizador) */
.error-box .bar {
    height: 5px;
    width: 100%;
    background-color: #f44336;
}

/* 6) Contenido y botón de cierre tal como ya lo tenías */
.error-box .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}

.error-box .message {
    flex: 1;
    padding-right: 10px;
}

.error-box .close-btn {
    cursor: pointer;
    font-size: 18px;
    color: #888;
}
/*Pop up*/
.popup{
	position: absolute;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	display: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}
/* Estilo del contenedor de alerta */
.alert {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	color: black;
	border-radius: 10px;
	z-index: 10000;
	text-align: center;
	display: flex;
	flex-direction: column;
	max-width: 80%;
	max-height: 80%;
	min-width: 260px;
}
.alert .message{
	overflow: auto;
	padding: 20px;
}
/* Estilo del texto */
.alert .message > p {
	margin: 0;
	overflow: auto;
	font-size: 18px;
}

/* Estilo del botón */
.alert .buttons button {
	border: none;
	font-size: 18px;
	font-weight: 600;
	padding: 7.5px 15px;
	flex:1;
}/* Si el botón es el único */
.alert .buttons > button:only-child {
  border-radius: 0 0 10px 10px;
}

/* Si hay más de un botón, el primero obtiene redondeo en la esquina inferior izquierda */
.alert .buttons > button:first-child:not(:only-child) {
  border-radius: 0 0 0 10px;
}

/* Si hay más de un botón, el último obtiene redondeo en la esquina inferior derecha */
.alert .buttons > button:last-child:not(:only-child) {
  border-radius: 0 0 10px 0;
}

  
  /* Fondo oscuro */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

/* Inputs tipo ios */
.widget-selectable,
.form-entity label {
	display: flex;
	flex-direction: column;
	position: relative;
}
.import-fields .field-list > li:nth-child(odd){
	background-color: var(--white);
}
/* Especial para input radio */
.form-entity label.radio {
	box-shadow: 1px 1px 0px currentColor,inset 0px 1px 0px currentColor,inset 1px 0px 0px currentColor;
	flex:1;
	justify-content: center;
	align-items: center;
	padding: 5px;
	cursor: pointer;  
	margin: 2.5px;
	border-radius: 5px;
}
.form-entity label.radio:hover,
.form-entity label.radio.active{
	color:var(--light);
}
.form-entity label.radio:hover{
	background-color: var(--secondary);
}
.form-entity label.radio.active {
	background-color: var(--primary);
	color: var(--white);
}
.form-entity label.radio > .icon {
	padding: 0;
}
.form-entity label.radio > input {
	position: absolute;
	cursor: pointer;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	opacity: 0;
}
.form-entity label.radio > b {
	font-size: 16px;
	text-align: center;
}
.form-entity label:has( > ul.options),
.form-entity label:has( > div.input-file){
	/*margin:10px 0px;*/
}
.form-entity label:has( > ul.options) > b,
.form-entity label:has( > div.input-file) > b{
	top: -10px;
	left: 0px;
	font-size: 14px;
	color: var(--dark);
}
.form-entity label:has( > .input-file) .preview{
	border: 1px solid var(--primary);
	width: 100%;
	min-height: 50px;
  	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin-top: 5px;
}
.form-entity label:has( > .input-file) .concept{
	border-radius: 10px;
	overflow: hidden;
}.form-entity label:has( > .input-file) .concept > button[data-upload-file]{
	padding: 0px 5px 0px 10px;
	border:1px solid var(--primary);
	border-radius: 10px 0px 0px 10px;
	text-align: left;
}
.form-entity label:has( > .input-file) .concept > button[data-clean-file]{
	border-radius: 0px 10px 10px 0px;
}.form-entity label:has( > .input-file) .concept > button[data-clean-file] > .icon{
  	height: 27px;
}
.form-entity label:has( > .input-file) input[type=file]{
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	z-index: -1;
}
.refillable > div,
.widget-selectable > button,
.form-entity label > button,
.form-entity label > textarea,
.form-entity label:not(.radio) > input:not([type="submit"]),
.form-entity label > select{
	flex:1;
	padding: 12px 15px;
	border: 1px solid var(--primary);
	border-radius: 10px;
	background-color: var(--white);
	font-size: 16px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	transition: border-color 0.2s, box-shadow 0.2s;
	width:100%;
}
.form-entity label > select{
	width: 100%;
}
.form-entity label:not(.radio) > input.jscolor{
	/*width: calc(100% - 85px);*/
}
.form-entity label > textarea{
	flex:unset;
}
.widget-selectable > button{
	flex: 1;
  	width: unset;
	padding:0px 5px 0px 12.5px;
}
.form-entity label > textarea{
	/*max-width: calc(100% - 32px);
	min-width: calc(100% - 32px);*/
	height: auto;
	resize: vertical;
	margin: 0;
}
button:disabled{
	cursor:unset;
}
.widget-selectable > button:not(:disabled):hover,
.form-entity label > button:not(:disabled):hover{
	background-color: var(--dark);
	color:var(--light);
}
.form-entity label > textarea:focus,
.form-entity label:not(.radio) > input:focus,
.form-entity label > select:focus{
	border-color: var(--primary);
	outline: none;
}
.form-entity label > button:not(:disabled):hover > .icon > span{
	color: var(--primary);
}

.form-entity label:not(.radio) > b {
	position: absolute;
	top: 47%;
  	left: 10px;
	transform: translateY(-50%);
	padding: 0 5px;
	color: #5C5C5C;
	font-weight: normal;
	font-size: 16px;
	pointer-events: none;
	transition: ease-out 0.1s;
}
.form-entity label > textarea:focus + b,
.form-entity label > select:focus + b,
.form-entity label:not(.radio) > input:focus + b,
.form-entity label > textarea:not(:placeholder-shown) + b,
.form-entity label > select:not(:placeholder-shown) + b,
.form-entity label:not(.radio)  > input:not(:placeholder-shown) + b {
  top: -10px;
  left: 0px;
  font-size: 14px;
  color: var(--dark);
}
.form-entity label > textarea:not(:placeholder-shown),
.form-entity label > select:not(:placeholder-shown),
.form-entity label:not(.radio) > input:not(:placeholder-shown) {
  border-color:  var(--primary);
}
.btn-general,
.form-entity label > input[type="submit"]{
	padding: 12px 15px;
	/*background-color: inherit;
	color: inherit;*/
	border: unset;
	font-weight: 600;
	font-size: 18px;
	cursor: pointer; 
	width: 100%;
	z-index: 2;
}
/*
.btn-general:hover,
.view-header:hover,
form label > input[type="submit"]:hover{
	background-color: var(--secondary);
	color: var(--light);
}*/
.form-entity label > input[type=color]{
	flex:auto;
	padding:0;
}
/*Especial para botones de busqueda*/

.form-entity label > button{
	padding: 7px 15px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.form-entity label > button > .icon{
	padding: 0;
	color:inherit;
} 

.refillable > div{
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 10px 0px 10px 15px;
	border-radius: 0px 0px 10px 10px;
	color:var(--dark);
	border-color:  var(--dark);
	border-top: none;
	overflow: hidden;
}
.refillable > div:has(button){
	padding: 0px 0px 0px 15px;
}
.refillable > div > p{
	margin: 0;
	flex:1;
	padding: 0;
}
.refillable {
	display: flex;
	order:1;
}
.refillable.empty > div{
	display: none;
}
/*.refillable.empty + button{
	margin-top: 5px;
}*/
.refillable.not-empty + button {
	color: var(--light);
	border-color: var(--secondary);
	border-radius: 10px 10px 0 0 !important;
	background-color: var(--primary);
}
.refillable.not-empty + button > p{
	margin: 0;
}
.form-entity .data-ent{
	box-shadow: 0 1px 0 #ddd;;
}
.form-entity .info-ent > button:first-child{
}
.form-entity .info-ent .concept{
	padding: 0 0 0 10px;
	font-size: 18px;
	font-weight: 600;
}
form .btn-save{
	margin: 0;
	padding: 10px;
	border-top:1px solid rgba(0,0,0,0.2);
	position:sticky;
	bottom:0;
}
.btn-general > p{
	text-align: center;
}

.fancy-title {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 1.12rem;
    font-weight: bold;
	margin: 5px;
}

.fancy-title::before,
.fancy-title::after {
    content: "";
    flex: 1;
    /*margin: 0 10px;*/
}
.fancy-title.dashed::before,
.fancy-title.dashed::after {
    border-bottom: 1px dashed currentColor; 
}
.fancy-title.solid::before,
.fancy-title.solid::after {
    border-bottom: 1px solid currentColor;  
}
.fancy-title::before {
    margin-right: 10px; 
}

.fancy-title::after {
    margin-left: 10px; 
}
/* VIEW ENTITY */
.view-entity .view-body,
.view-entity{
	flex:1;
	display: flex;
	flex-direction: column;
	position: relative;
}
.tagfixed .dropdown{
	top:45px;
	background-color: unset;
	box-shadow: none;  
	max-width: none !important;
	width: auto !important;
	max-height: none !important;
	margin: 0;
	right: 0;
  	left: auto;
}
.tagfixed .dropdown > li{
	margin:5px 0px;
	background-color: var(--tertiary);
	color:var(--primary);
	border-radius: 100px;
	box-shadow: 0 1.6px 3.6px 0 rgb(0 0 0 / 13%), 0 0.3px 0.9px 0 rgb(0 0 0 / 11%);
	overflow: hidden;
	padding: 0 5px;
}
.tagfixed .dropdown > li:hover{
	background-color: var(--dark);
}
.tagfixed .dropdown > li:hover button,
.tagfixed .dropdown > li:hover button .icon{
	color:var(--light) !important;
}
.tagfixed{
	position: sticky;
	color:var(--primary);
	background-color: var(--tertiary);
	top:7.5px;
	z-index:3;
	max-width: 50px;
	margin: 0px 40px -50px 5px;
	border-radius: 100px;
	left:100%;
	transition: all 500ms ease;
	overflow: visible;
}
.tagfixed > button > .icon{
	width: 40px !important;
	height: 40px !important;
}
.tagfixed > button > .icon:has(> span > svg) {
	width: 50px !important;
	height: 50px !important;
}
.tagfixed > button > .icon > span{
	--ggs:1.3;
}
.tagfixed > button > p{
	display: none;
}
.tagfixed:hover{
	background-color: var(--dark);
	color:var(--light);
}
.view-data .data-block > button{
	color:var(--light);
	background-color: var(--tertiary);
}
.data-block{
	box-shadow: 0px 2px 5px rgba(0,0,0,.15);
	margin:5px 5px;
	border-radius: 5px;
	background-color: var(--light);
	overflow: hidden;
}
.data-ents > button,
.data-block > button{
	background-color: var(--primary);
	color:var(--light);
}
.data-block > button:hover{
	background-color: var(--secondary) !important;
	color:var(--light) !important;
}
.inputs-entity > li{
	padding:25px 10px 0px 10px;
}
.inputs-entity{
	padding-bottom: 10px !important;
}
.data-ents > button{
	margin: 5px 10px 0px 10px;
	box-shadow: 0px 2px 5px rgba(0,0,0,.15);
	border-radius: 10px;
}
.widget-entity .dependencies{}
.widget-entity .dependencies > button{
	box-shadow: 0px 1px 0px #ddd;
}
.widget-entity .dependencies > button:hover{
	color:var(--primary);
	box-shadow: 0px 1px 0px var(--primary);
}
.widget-entity .dependencies > button > .icon{
	margin: 10px;
}
.key-value{
	font-size: 16px;
}
.key-value > :last-child{
	color:var(--dark);
	margin-left:10px;
}
.key-value > button{
	text-decoration: underline;
}
.subtext{
	font-size: 14px;
}
/* Para WebKit (Chrome, Safari, Edge) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Para Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Input reseteado como tag normal */
label.normalized input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 1em;
    font-family: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    display: inline;
    width: auto;
}

label.normalized input ::placeholder {
    color: inherit;
}

label.normalized input :focus {
    outline: none;
}
label.normalized b{
	font-weight: normal;
}
/* Estilo inicial del input */
input.minimal,
textarea.minimal {
    border: none; /* Eliminar todos los bordes */
    border-bottom: 2px solid currentColor; /* Solo mostrar el borde inferior */
    outline: none; /* Eliminar el contorno al hacer clic */
    transition: border-bottom-color 0.3s ease; /* Suavizar la transición del color */
	color:currentColor;
	font-size: inherit;
	background-color: inherit;  
	margin:1.5px 1.5px !important;
}

/* Estilo del input al enfocarse */
input:focus.minimal,
textarea:focus.minimal  {
    border-bottom-color:var(--dark); /* Cambiar el color del borde inferior al enfocarse */
	color:var(--dark);
}
textarea.minimal{
}
/**/
.widget-table.discrepancies .thead .headers > li:last-child,
.widget-table.discrepancies .tbody .entities > li > div > .notes-discrepancy{
	flex:unset;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
}
/**/
.summary > *{
	padding: 5px;
	font-size: 18px;
	background-color: var(--light);
}
.summary > *:nth-child(odd){
	background-color: white;
}
.summary > div > :last-child{
	font-weight: bold;
}
.list-summary{
	margin:0px;
	padding: revert;
}
.list-summary > li{
	padding: 5px;
}

button.btn-quantity{
	border:1px solid;
	border-radius: 10px;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
}
button.btn-quantity:hover{
	box-shadow: none;
}
button.btn-quantity > .icon{
	padding: 6.5px !important;
}
.flag{
	position: absolute;
	top:0px;
	right: 0px;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 100px;
}
.avatar {
	max-width:50px;
	max-height:50px;
	min-height:50px;
	min-width:50px;
	width:50px;
	height:50px;
	border-radius:100px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.avatar-input{
	margin:10px auto;
	max-width:80px;
	max-height:80px;
	min-height:80px;
	min-width:80px;
	width:80px;
	height:80px;
	border-radius:100px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.avatar-input > button > .icon{
	position: absolute;
	right: 0;
	bottom:0;
	border-radius: 100px;
	width: 10px;
    height: 15px;
}
.image-square {
	max-width: 300px;
	height: 160px;
	border-radius:10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.info-teacher .widget-datavalue{
	padding: 10px 0px;
	border-bottom:1px dashed currentColor;
}
.info-teacher .widget-datavalue:last-child{
	border-bottom:none;
}
.info-teacher .widget-datavalue > p:first-child{
	font-size: 16px;
}
.info-teacher .widget-datavalue > p:last-child{
	font-size: 18px;
	font-weight: 600;
}
.tools > .actions .widget-check > .icon{
	border-radius:0px 5px 5px 0px;
	padding: 11px 10px !important;
}
.entity-list > .info-header {
	border-bottom:1px dashed currentColor;
}
.notification > .info-header > button.checkentity{
	border-left:1px dashed currentColor;
}
.notification > .info-header > .widget-check{
	border-radius: 0px 5px 0px 0px;
	overflow: hidden;
}
.tools > .actions .widget-check,

.message{
	color:var(--dark);
}
.view-event .assistance > label > b{
	display: none;
}
.link{
	font-size:16px;
	font-style: italic;
	display:block;
	padding-left:10px;
	padding-bottom:10px;
	margin-bottom:2px;
	text-decoration:underline;
}
.link:hover{
	color:var(--dark);
}
.nav-customer-data .icon.svg {
	border-radius: 100px;
	margin-right: 10px;
	padding: 10px;
	box-sizing: border-box;
}.nav-customer-data .icon.svg svg{
	width: 20px !important;
	height: 20px !important; 
}
.bkimage{
	text-align: center;
    color: var(--dark);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 70%;
    vertical-align: middle;
    align-items: center;
	padding: 20px;
}
.bkimage > h4 {
	font-size: 20px;
}
.festive-box {
	background-color: #d4f8d4;
    color: #2e7d32;
    font-weight: bold;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    padding: 10px;
    margin: 0 2.5px;
    margin-top: 2.5px;
    text-align: center;
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================================================
    ESTILOS BASE PARA ALERTAS FLOTANTES (Sticky Alert)
    Esta clase se usa como base para todas las alertas.
================================================ */

/* Contenedor Flotante Base */
.fixed-alerts {
    position: fixed !important; /* Lo fija a la ventana del navegador */
    top: 40px;       /* Posición superior (cambia si es necesario) */
    left: 0px;
	margin: 10px;     /* Posición derecha */
    z-index: 1000;   /* Asegura que esté por encima de casi todo */
	color: var(--white);
    border-radius: 8px;
	background-color: var(--secondary); /* Fondo Oscuro */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Sombra marcada */
    width: 300px;
    text-align: center;
    opacity: 0.95; /* Ligeramente transparente */
	transition: background-color 0.3s ease, border-radius 0.5s ease;
}
.fixed-alerts .alerts-header{
	padding-bottom: 5px;
}
.fixed-alerts .alerts-header > h4{
	font-size: 1.4rem;
}

.fixed-alerts .alerts-header > button{
	padding: 0px;
}
.fixed-alerts .alerts-header > button.close-alerts{
	transition: all 0.3s ease;
}
.fixed-alerts .alerts-header > button.close-alerts:hover{
	color:var(--red);
	transform: rotate(90deg);
}
.fixed-alerts .alerts-header > button.open-alerts > p{
	margin: 0;
	font-size: 1.2rem;
	padding: 5.5px 7.82px;
}
/* Contenedores de alerta */
.fixed-alerts .alert-tag {
	border-top: 1px dashed white;
	padding: 15px 20px;
	
}
.fixed-alerts .alert-tag > .alert-message {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--orange); /* Destaca el mensaje */
    display: block;
}

/* Botón de acción */
.fixed-alerts .alert-tag > .alert-button {
    display: block;
    padding: 10px 15px;
    font-size: 1rem;
    text-transform: uppercase;
    background-color: var(--red); 
    color: var(--white);
    border: none;
    border-radius: 5px;
    text-decoration: none;
	font-weight: 600;
    transition: background-color 0.2s;
}
.fixed-alerts .alert-tag > .alert-button:hover {
	transform: scale(1.02);/* Pequeño efecto al pasar el ratón */
    background-color: #c93d4b; /* Tono más oscuro de Rojo de Acción */
}
/* ================================================
    ESTADO MINIMIZADO (Icono Fijo)
================================================ */

/* Estilos de la clase que se aplica por JS para minimizar */
.fixed-alerts.is-minimized {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px; 
	width: 50px;
	height: 50px;
    padding: 0;
    overflow: hidden; /* Oculta el contenido original */
    background-color: var(--red, #D9534F); /* Usa el color de alerta principal (rojo) */
    
}
/* Ocultar el contenido interno cuando está minimizado */
.fixed-alerts.is-minimized .alerts-content,
.fixed-alerts.is-minimized > .alerts-header > .close-alerts,
.fixed-alerts.is-minimized > .alerts-header > h4{
	display: none;
}

/* Mostrar el ícono de alerta (requiere añadir un elemento de ícono en HTML, ej: 🔔) */
.fixed-alerts.is-minimized > .alerts-header > .open-alerts > p {
   	font-size: 1.8rem;
    text-align: center;
    margin: 5px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================================
    ESTILOS RESPONSIVOS
================================================ */

@media (max-width: 768px) {
    
   
}