.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #000000;
    text-decoration: underline;
}

body{
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

h1{
	font-size: 22px;
	color:#c66e05;
}
h2{
	font-size: 16px;
}
h3{
	font-size: 12px;
}

a {
	color:#999999; 
}

.caption{
	background-color:#999999; 		color: #ffffff;
	padding:0.5%;
	border-top-left-radius: 75px;
	border-top-right-radius: 75px;
	text-align:center;
	font-size: 12px;
}
.th{
	background-color:#cccccc; 
	padding:10px;
	text-align:center;
	border:1px solid #eeeeee;
	font-size: 12px;
}
.td{
	background-color:#eeeeee; 
	padding:10px;
	text-align:center;
	border:1px solid #cccccc;
	font-size: 12px;
}

.cabecera{
	background-color:#ffffff;
    font-weight:normal ; 
	width:99%;
	margin:0.1%;
	padding:0.1%;
	min-height:20px;
}
.logo{
	width:13%;
	padding:0.5%;
}

.cuerpo{
	background-color:#ffffff;
    font-weight:normal ; 
	width:98%;
	margin:0.5%;
	padding:0.5%;
	min-height:300px;
}


.input{
	width:80%;
}
.textarea{
	width:80%;
	height:100px;
}


.f_verde{
	background-color:#9EF88E;
	border:1px solid #eeeeee;
}
.f_rojo{
	background-color:#FD8383;
	border:1px solid #eeeeee;
}
.f_naranja{
	background-color:#FFB300;
	border:1px solid #eeeeee;
}


.asteko{
	/*background-color:#eeeeee;*/
	border:1px solid #cccccc;
    font-weight:normal ; 
	width:88%;
	border-radius: 25px;	
	padding:1%;
	min-height:40px;
	margin-left:3%;
	margin-top:2%;
}
.boton_inicio{
	background-color:#ffffff;
	border:1px solid #cccccc;
    font-weight:normal ; 
	width:15%;
	border-radius: 25px;	
	padding-top:1%;
	min-height:125px;
	margin-left:5%;
	margin-top:0.5%;
	float:left;
	text-align:center;
}

.apps{
	background-color:#F8F8F8;
    font-weight:normal ; 
	width:99%;
	margin:0.5%;
	margin-top:1%;
	text-align:center;
	min-height:175px;
}




.subcuerpo{
	background-color:#f4e8d1;
    font-weight:normal ; 
	width:98%;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;	
	padding:1%;
	min-height:100px;
}

.td_interior{
	font-weight:normal ; 
	font-size: 24px;
	padding:2%;
}



.pie{
	background-color:#eeeeee;
    font-weight:normal ; 
	width:98%;
	margin:0.5%;
	padding:0.5%;
	text-align:center;
}
.submenu{
	border-radius: 15%;
	background-color:#eeeeee;
	clear:both;
	float:left;
	width:70%;
	text-align:center;
	color:#999999;
	padding:1%;
	margin-top:1%;
	margin-left:15%;
}

.boton_menu{
	width:98%;
	padding:1%;
	float:left;
	background-color:#cccccc;
	border-bottom:1px solid #cccccc;
	text-align:center;
	min-height:20px;
}
.boton_submenu{
	width:98%;
	padding:1%;
	float:left;
	background-color:#eeeeee;
	border-bottom:1px solid #cccccc;
	text-align:center;
	min-height:20px;
}


#ws-header-wrap  {
	background-color:#ffffff;
    font-weight:normal ; 
}


#ws-header-container {
	background-color:#ffffff; 
}

#ws-footer-wrap {
	background-color:#4A95CF;
}



.boton_interior{
	background-color:#f4e8d1; 
	padding:0.5%;
	border-radius: 75px;
	text-align:center;
	width:40%;
	float:left;
	margin:1%;
	min-height:100px;
}


.caption_kudeapp{
	background-color:#f4e8d1; 
	padding:0.5%;
	border-top-left-radius: 75px;
	border-top-right-radius: 75px;
	text-align:center;
}
.th_kudeapp{
	background-color:#cccccc; 
	padding:10px;
	text-align:center;
	border:1px solid #eeeeee;
}
.td_kudeapp{
	background-color:#eeeeee; 
	padding:10px;
	text-align:center;
	border:1px solid #cccccc;
	
}


.th_kudeapp_plan{
	background-color:#cccccc; 
	padding:10px;
	text-align:center;
	border:1px solid #eeeeee;
	font-size: 11px;
}
.td_kudeapp_plan{
	background-color:#eeeeee; 
	padding:10px;
	text-align:center;
	border:1px solid #cccccc;
	font-size: 11px;
}


.td_estra1{
	background-color:#999999; 
	padding:10px;
	text-align:left;
	border:1px solid #cccccc;
}
.td_estra2{
	background-color:#cccccc; 
	padding:10px;
	text-align:left;
	border:1px solid #ffffff;
}
.td_estra3{
	background-color:#eeeeee; 
	padding:10px;
	text-align:left;
	border:1px solid #cccccc;
}
.td_estra4{
	background-color:#ffffff; 
	padding:10px;
	text-align:left;
	border:1px solid #cccccc;
}
.td_estra_indi{
	background-color:#ffffff; 
	padding:10px;
	text-align:center;
	border:1px solid #cccccc;
}


.estoy{
	background-color:#FDBF21; 
	padding:10px;
	text-align:center;
	border:1px solid #eeeeee;
}

.link_menu{
	color:#000000;
	text-decoration: none;
}
.link_menu_estoy{
	color:#000000;
	text-decoration: none;
}

.acc_acti{
	background-color:#eeeeee;
}
.acc_tras{
	background-color:#abfd6f;
}
.acc_proc{
	background-color:#5fbcfd;
}
.acc_eval{
	background-color:#fd5f84;
}
.acc_inac{
	background-color:#ff9a9a;
}


/* CSS */
.button-4 {
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  padding: 6px 16px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

.button-4:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}

.button-4:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}

.button-4:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

.button-4:focus {
  outline: 1px transparent;
}

.button-4:before {
  display: none;
}

.button-4:-webkit-details-marker {
  display: none;
}





  
  
ul.acorh,
ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 13px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #cccccc;
color: #000000;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #eeeeee;
color: #000;
font-size: 13px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 1200px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #999999;
color: #fff;
}
  
  
  
  
.tooltip_kudea {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip_kudea .top {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip_kudea:hover .top {
    display:block;
}

.tooltip_kudea .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip_kudea .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}  
  
  
  
  
  
.tooltip_gigante {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip_gigante .top {
    min-width:900px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip_gigante:hover .top {
    display:block;
}

.tooltip_gigante .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip_gigante .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}  
  
  
  
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
  
  
  
  
  
  
  
  
  
.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 90%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}  
  
  
  
  
  
 
  
 /* Add a black background color to the top navigation */
.topnav {
  background-color: #ffffff;
  overflow: hidden;
  margin-top:20px;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
  /*border-right:1px solid #eeeeee;*/
  background-color: #cccccc;
}


/* Add an active class to highlight the current page */
.active {
  background-color: #f4e8d1;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 14px;
  border: none;
  outline: none;
  color: black;
  /*padding: 14px 16px;*/
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  /*background-color: #555;*/
  color: black;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}   
  
  
  
  
  
  
  
  
  
#container {
	margin: 0 auto;
}


nav {
	margin: 20px 0;
	background-color: #fe6b0a;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #fe6b0a;
	border-left:1px solid #ffffff;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:14px;
	line-height: 40px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 35px; /* the height of the main nav */
	z-index: 1000; /* el desplegable siempre por encima de botones y tablas */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
/* El tercer nivel se coloca a la derecha del elemento padre. Antes se desplazaban los li
   (top:-60px; left:170px) y la caja del ul quedaba invisible encima de la columna del
   segundo nivel, tapando a los elementos de debajo (p.ej. Procesos). */
nav ul ul ul {
	top: 0;
	left: 100%;
}
nav ul ul ul li {
	position: relative;
}

	
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; } 
  
  
  
  
  
  
    /* =============================================
       CONTENEDOR PRINCIPAL - 3 columnas iguales
       a ancho completo. Pega este bloque donde
       quieras en tu página PHP.
    ============================================= */
    .kude-cards-section {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      width: 100%;
      font-family: 'Open Sans', sans-serif;
    }
 
    .kcard {
      height: 280px;
      position: relative;
      cursor: pointer;
      text-decoration: none;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .kcard:hover {
      z-index: 2;
      transform: scaleY(1.03);
      box-shadow: 0 16px 40px rgba(249,115,22,0.4);
    }
 
    .kcard-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      transition: transform 0.5s ease;
    }
    .kcard:hover .kcard-bg { transform: scale(1.08); }
 
    .kcard-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
      transition: background 0.3s ease;
    }
    .kcard:hover .kcard-overlay {
      background: linear-gradient(to top, rgba(249,115,22,0.88) 0%, rgba(249,115,22,0.30) 55%, transparent 100%);
    }
 
    .kcard-badge {
      position: absolute; top: 16px; right: 16px;
      background: #F97316; color: #fff;
      font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
      text-transform: uppercase; padding: 3px 10px; border-radius: 3px;
      opacity: 0; transform: translateY(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .kcard:hover .kcard-badge { opacity: 1; transform: translateY(0); }
 
    .kcard-content {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 24px 28px; color: #fff;
    }
 
    .kcard-icon {
      font-size: 34px; color: #fff; margin-bottom: 8px;
      display: block; opacity: 0.9;
      transform: translateY(4px);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .kcard:hover .kcard-icon { transform: translateY(0); opacity: 1; }
 
    .kcard-title {
      font-size: 18px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.5px;
      margin: 0 0 8px; color: #fff;
    }
 
    .kcard-desc {
      font-size: 13px; color: rgba(255,255,255,0.88);
      margin: 0; max-height: 0; overflow: hidden;
      opacity: 0; line-height: 1.6;
      transition: max-height 0.35s ease, opacity 0.3s ease;
    }
    .kcard:hover .kcard-desc { max-height: 60px; opacity: 1; }
 
    .kcard-arrow {
      display: inline-flex; align-items: center; justify-content: center;
      margin-top: 12px; width: 32px; height: 32px;
      background: #fff; border-radius: 50%;
      opacity: 0; transform: translateX(-8px);
      transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
    }
    .kcard-arrow i { font-size: 15px; color: #F97316; }
    .kcard:hover .kcard-arrow { opacity: 1; transform: translateX(0); }
 
    .kcard-divider {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: 3px; background: #fff; opacity: 0.15;
    }
    .kcard:last-child .kcard-divider { display: none; }