/* Questrial */
@font-face {
font-family:'Questrial'; 
font-style:normal; 
font-weight:400; 
font-display:swap; 
src:url('/css/fonts/Questrial_ext.woff2') format('woff2'); 
unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; 
}
/* Questrial-ext */
@font-face {
font-family:'Questrial'; 
font-style:normal; 
font-weight:400; 
font-display:swap; 
src:url('/css/fonts/Questrial_ext.woff2') format('woff2'); 
unicode-range:U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 
}
/* Questrial */
@font-face { 
font-family:'Questrial'; 
font-style:normal; 
font-weight:400; 
font-display:swap; 
src:url('/css/fonts/Questrial.woff2') format('woff2'); 
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
}

/* Exo 2 Regular */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/css/fonts/Exo2-Regular.woff2') format('woff2');
}

/* Exo 2 Bold */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/css/fonts/Exo2-Bold.woff2') format('woff2');
}


html, body {margin:0; padding:0; font-size:12px; font-family:verdana,arial,cursive; line-height:1.1rem;}

footer {padding:10px; text-align:center; background-color:#f2ede5; color:#505050; border-top:solid 1px #c5c1bb; font-size:1rem; line-height:5rem;}
.main-container {display:flex;}
.sidebar {width:180px; background-color:#f8f8f8; padding:10px; box-sizing:border-box; border-right:1px solid #ccc;}
.sidebar a {display:block; margin:0px; color:#0066cc; text-decoration:none;}
.sidebar a:hover {text-decoration:underline;}
.content {flex-grow:1;}
iframe {display:block; width:99%; height:2700px; margin:10px 0; border:none;}

.logout-container {
flex-grow: 1;
text-align: right;
}

.logout-btn {
background-color: #333; /* gris oscuro */
border: none;
color: white;
font-size: 20px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background-color 0.3s;
}

.logout-btn:hover {
background-color: #555; /* tono un poco más claro al hacer hover */
color: #ffd2d2;
}
		
/* ---> Header <--- */
header {display:flex; align-items:center; gap:12px; /* espacio entre icono y título */ background-color:#f2ede5; padding:5px 20px; margin:0; color:#505050; border-bottom:solid 1px #c5c1bb;}
.circle-icon {display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background-color:#c0392b; color:white; font-size:20px; cursor:pointer;}
.circle-icon:hover {background-color:#505050;}
.title_header {margin:0; font-size:2.5rem; color:#505050; font-weight:bold; font-family:"Exo 2",verdana,arial,cursive; line-height:2.5rem;}

/* ---> Grid principal <--- */
.grid-container {display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:6px; max-width:1000px; margin:0 auto;}
.grid-item {height:280px; background-color:#a01127; display:flex; flex-direction:column; justify-content:space-between; align-items:center; transition:background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor:pointer; border-radius:8px; padding:15px 0; box-sizing:border-box; transform:scale(0.95);}
.grid-item:hover {background-color:#f2ede5; transform:scale(1); box-shadow:0 8px 16px rgba(0, 0, 0, 0.5);}
.icon-container {flex-grow:1; display:flex; justify-content:center; align-items:center; width:100%;}
.icon-link {display:flex; justify-content:center; align-items:center; width:60%; height:60%; transition:width 0.3s ease, height 0.3s ease; color:white; text-decoration:none;}
.grid-item:hover .icon-link {width:72%; height:72%;} /* crece a 80% */
.icon-link.invert-on-hover img {filter:invert(1); transition:filter 0.3s ease;} /* Imagen invertida por defecto */
.grid-item:hover .icon-link.invert-on-hover img {filter:invert(0);} /* Al hacer hover en el div, la imagen vuelve a colores normales */
.icon-link img {width:100%; height:100%; object-fit:contain;}
.icon-link .fa-icon {font-size:5rem; line-height:1; width:100%; height:100%; display:flex; justify-content:center; align-items:center;}/* tamaño grande */
.grid-item:hover .fa-icon {font-size:6.5rem; /* más grande al hover */}
.grid-text { color:white; font-size:1.1rem; text-align:center; padding:5px 10px; user-select:none; transition:color 0.3s ease, font-weight 0.3s ease;}
.grid-item:hover .grid-text {color:black; font-weight:bold;}

/* ---> Tooltip <--- */
.tooltip {position:relative; display:block; margin-bottom:0px;}
.tooltip a {display:block; padding:8px 9px 4px 9px; color:#0000C0; text-decoration:none; border-radius:4px; transition:background 0.3s;}
.tooltip a:hover {background-color:#e0e0e0;}
.tooltip .tooltiptext {visibility:hidden; background-color:#333; color:#fff; text-align:center; border-radius:8px; padding:8px 12px; position:absolute; top:50%; left:100%; margin-left:10px; transform:translateY(-50%); opacity:0; transition:opacity 0.5s ease, margin-left 0.5s ease; box-shadow:0px 0px 8px rgba(0,0,0,0.3); white-space:nowrap; pointer-events:none;}
.tooltip:hover .tooltiptext {visibility:visible; opacity:1; margin-left:20px;}

/* Sidebar normal */
.sidebar {position: relative; width: 180px; background-color: #fffbf5; padding: 40px 10px 10px 10px; /* espacio arriba para botón */ box-sizing: border-box; border-right: 1px solid #ccc; transition: width 0.3s ease; overflow-x: hidden;}

/* Sidebar colapsado */
.sidebar.collapsed {width: 40px;}

/* Ocultar texto y enlaces cuando está colapsado */
.sidebar.collapsed a,
.sidebar.collapsed span {display: none;}

/* Botón hamburguesa */
.toggle-btn {position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #303030; z-index: 10;}
.toggle-btn:hover {color: #c0392b;}