*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
width:100%;
overflow-x:hidden;
}

body{
font-family:'Segoe UI',sans-serif;
background:#f4f6f9;
color:#222;
}

/* =========================
   TOPBAR
========================= */

.topbar{
position:sticky;
top:0;
z-index:5000;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
flex-wrap:wrap;
background:#fff;
padding:10px 15px;
border-bottom:1px solid #ddd;
width:100%;
}

.logos{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
max-width:100%;
}

.logos img{
height:42px;
max-width:100%;
width:auto;
display:block;
}

.redes{
display:flex;
align-items:center;
gap:14px;
}

.redes a{
font-size:20px;
color:#333;
text-decoration:none;
}

/* =========================
   HAMBURGUESA
========================= */

.hamburger{
width:30px;
height:22px;
cursor:pointer;
position:relative;
display:none;
}

.hamburger span{
position:absolute;
left:0;
width:100%;
height:3px;
background:#000;
transition:.3s;
}

.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:9px;}
.hamburger span:nth-child(3){bottom:0;}

.hamburger.active span:nth-child(1){
transform:rotate(45deg);
top:9px;
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:rotate(-45deg);
bottom:10px;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{
position:fixed;
top:0;
left:0;
width:250px;
height:100vh;
background:#1e191d;
color:#fff;
overflow:hidden;
transition:.3s;
z-index:3000;
}

.sidebar.collapsed{
width:70px;
}

.sidebar ul{
list-style:none;
padding:0;
margin-top:60px;
}

.sidebar li{
padding:15px;
}

.sidebar a{
display:flex;
align-items:center;
gap:15px;
color:#fff;
text-decoration:none;
}

.sidebar i{
width:20px;
text-align:center;
}

.sidebar.collapsed span{
display:none;
}


/* =========================
  LISTAS
========================= */

.listas ul {
  list-style-type: circle;
  padding: 20px;
}

.listas li a {
  list-style-type: disc;
  margin: 0;
  padding: 0;
}


/* =========================
   CONTENIDO
========================= */

.main{
margin-left:250px;
width:calc(100% - 250px);
padding:20px;
transition:.3s;
}

.mainAdmin{
margin-left:20px;
width:95% ;
padding:20px;
transition:.3s;
}

.sidebar.collapsed ~ .main{
margin-left:70px;
width:calc(100% - 70px);
}

/* =========================
   MENU MOVIL
   como antes: flotando sobre contenido
========================= */

.mobile-menu{
position:fixed;
top:110px; /* pegado al topbar */
left:0;
width:100%;
background:#000;
color:#fff;
max-height:0;
overflow-y:auto;
transition:max-height .35s ease;
z-index:6000;
box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.mobile-menu.open{
max-height:calc(100vh - 110px);
}

.mobile-menu ul{
list-style:none;
padding:0;
margin:0;
}

.mobile-menu li{
border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile-menu a{
display:flex;
align-items:center;
gap:10px;
padding:15px;
color:#fff;
text-decoration:none;
}

.mobile-menu i{
width:20px;
}

/* =========================
   PLECAS
========================= */

.pleca-container{
width:100%;
text-align:center;
margin-bottom:20px;
}

.pleca-img{
width:100%;
max-width:100%;
height:auto;
display:block;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* =========================
   GENIALLY
========================= */

.genially {
    width: 100%;
    min-height: calc(100vh - 170px); /* asegura altura mínima y espacio para footer */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

/* Iframe Genially principal */
.genially iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =========================
   FORMULARIOS
========================= */

.form-container{
max-width:900px;
margin:auto;
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.10);
}
.form-container2{
max-width:90%px;
margin:auto;
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.10);
}

input,select,textarea{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:6px;
font:inherit;
}
.word-count {
            font-size: 0.8em;
            color: #666;
            margin-top: 2px;
        }
.error-message {
            color: #d9534f;
            font-size: 0.8em;
            display: none;
        }
.add-coauthor-btn {
            background-color: #073A57;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
.remove-coauthor-btn {
            background-color: #B93F23;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
            padding: 5px 10px;
        }
.coauthor-group {
            display: flex;
            align-items: flex-end;
            margin-top: 10px;
        }
.coauthor-input {
            flex-grow: 1;
            margin-right: 10px;
        }
/* =========================
   TABLA
========================= */
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-width: 400px;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); /* Sombra muy suave */
    border-radius: 8px 8px 0 0;
    overflow: hidden; /* Para que el borde redondeado funcione */
}

.styled-table thead tr {
    background-color: #27313D; /* Color verde profesional, puedes cambiarlo */
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

/* Efecto cebra: filas alternas de color gris claro */
.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/* El último borde de la tabla */
.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #27313D;
}

/* Efecto hover: se ilumina al pasar el mouse */
.styled-table tbody tr:hover {
    background-color: #f1f1f1;
    cursor: default;
}

/* =========================
   FOOTER
========================= */

footer{
margin-top:20px;
padding:25px;
text-align:center;
background:#1e191d;
color:#fff;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

.sidebar{
display:none;
}

.main{
margin-left:0;
width:100%;
padding:0;
}

.topbar{
flex-direction:column;
align-items:center;
text-align:center;
gap:8px;
padding:10px;
}

.logos{
justify-content:center;
}

.logos img{
height:34px;
}

.redes{
justify-content:center;
}

.hamburger{
display:block;
margin-top:4px;
}

.mobile-menu{
top:115px;
}

.mobile-menu.open{
max-height:calc(100vh - 115px);
}

.form-container{
margin:15px;
padding:20px;
}

}

@media(max-width:600px){

.topbar{
padding:8px;
}

.logos img{
height:30px;
}

.redes a{
font-size:18px;
}

.mobile-menu{
top:120px;
}

.mobile-menu.open{
max-height:calc(100vh - 120px);
}

}

@media(max-width:430px){

.logos img{
height:26px;
}

.mobile-menu{
top:125px;
}

.mobile-menu.open{
max-height:calc(100vh - 125px);
}

}

/* Responsividad general */
@media (max-width: 768px) {


    .genially {
        margin-top: 10px;
        margin-bottom: 0;
        min-height: auto; /* Elimina el alto fijo */
    }
	



}


/* Tooltip básico + estilizado (globo) */
.has-tooltip {
  position: relative;           /* contenedor relativo para posicionar el globo */
  cursor: help;
  outline: none;                /* focus gestionado más abajo */
}

/* Oculto por defecto */
.tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.95);
  bottom: 100%;                 /* aparece encima del td */
  width: 540px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  color: #073A57;
  border: 1px solid rgba(8,60,80,0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(7,58,87,0.12);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 40;
}

/* pequeño contenido interno para controlar padding */
.tooltip-inner {
  color: #073A57;
}

/* Flecha del globo */
.tooltip-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  bottom: -6px; /* coloca la flecha hacia abajo (apunta al td) */
  background: #ffffff;
  border-left: 1px solid rgba(8,60,80,0.08);
  border-bottom: 1px solid rgba(8,60,80,0.08);
  transform-origin: center;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(7,58,87,0.06);
  z-index: -1;
}

/* Mostrar tooltip al hover o focus */
.has-tooltip:hover .tooltip,
.has-tooltip:focus .tooltip,
.has-tooltip[data-open="true"] .tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Mejor visibilidad del foco (teclado) */
.has-tooltip:focus {
  outline: 3px solid rgba(138,179,181,0.25);
  border-radius: 4px;
}

/* Adaptaciones: si el espacio encima no alcanza, mover abajo */
.has-tooltip .tooltip--bottom {
  top: 100%;
  bottom: auto;
  transform: translateX(-50%) translateY(-8px) scale(.95);
}
.has-tooltip:hover .tooltip--bottom,
.has-tooltip:focus .tooltip--bottom,
.has-tooltip[data-open="true"] .tooltip--bottom {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}