@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html,body{
  min-height:100vh;
  height:auto;
  background-color:#f5f7fa;
}

body.responsive-layout{
  overflow-x:hidden;
  overflow-y:auto;
}

:root{
  --sidebar-color:linear-gradient(180deg,#0079c1,#009adf);
  --primary-color:#009adf;
  --text-color:#ffffff;
  --icon-color:#e0f7ff;
  --hover-bg:rgba(255,255,255,0.1);
  --tran-03:all .3s ease;
  --tran-05:all .5s ease;
}

/* =========================
   SIDEBAR (Desktop, +grande)
   ========================= */
.sidebar{
  position:fixed;
  top:0;left:0;
  height:100vh;                 /* sin scroll fantasma */
  width:290px;                  /* << un poco más grande */
  padding:18px 16px;            /* leve aumento */
  background:var(--sidebar-color);
  transition:var(--tran-05);
  z-index:100;
  overflow-y:auto;              /* solo si hace falta */
  box-shadow:2px 0 6px rgba(0,0,0,.1);
  border-right:1px solid rgba(255,255,255,.2);
  color:var(--text-color);
  -webkit-overflow-scrolling:touch;
}

/* Oculta el <br> tras el header si existe (ahorra altura) */
.sidebar header+br{display:none;}

.sidebar.close{
  width:88px;
  overflow-x:hidden;
}

.sidebar header{
  position:relative;
  margin-bottom:10px;
}

.sidebar header .image-text{
  display:flex;align-items:center;gap:12px;
}

.sidebar header .image img{
  width:36px;                   /* + */
  height:auto;border-radius:6px;
}

.sidebar header .logo-text{display:flex;flex-direction:column;}
.logo-text .profession{
  font-size:13.5px;             /* + */
  color:#e3e3e3;line-height:1.15;
}

.sidebar header .toggle-desktop{
  position:absolute;top:50%;right:-12px;
  transform:translateY(-50%);
  height:30px;width:30px;       /* + */
  background:#fff;color:var(--primary-color);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;
  transition:transform .3s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.sidebar.close .toggle-desktop{transform:translateY(-50%) rotate(180deg);}

.sidebar .icon{
  min-width:40px;               /* + */
  display:flex;align-items:center;justify-content:center;
  font-size:20px;               /* + */
  color:var(--icon-color);
}

.sidebar .text{
  font-size:16px;               /* + */
  font-weight:500;white-space:nowrap;opacity:1;
  color:var(--text-color);transition:var(--tran-03);
}
.sidebar.close .text{opacity:0;pointer-events:none;}

.sidebar li{
  list-style:none;height:46px;  /* + */
  display:flex;align-items:center;margin-top:8px;
}

.sidebar li a{
  display:flex;align-items:center;width:100%;height:100%;
  border-radius:8px;text-decoration:none;background:transparent;
  padding:0 12px;               /* + */
  transition:var(--tran-03);
}
.sidebar li a:hover{background-color:var(--hover-bg);}
.sidebar li a:hover .icon,.sidebar li a:hover .text{color:#fff;}

.sidebar .menu-bar{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
}

/* =========================
   TOP BAR & IFRAMES
   ========================= */
#titulo-container{
  margin-left:290px;                 /* compensa nuevo ancho */
  width:calc(100% - 290px);
  padding:18px 26px;                 /* + */
  background:linear-gradient(90deg,#0079c1,#009adf);
  color:#fff;font-size:20px;font-weight:600;
  transition:margin-left .3s ease,width .3s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  display:flex;align-items:center;overflow-x:hidden;
}

#iframe-container{
  margin-left:auto;width:calc(100% - 290px); /* compensa nuevo ancho */
  height:auto;min-height:101vh;overflow-y:auto;overflow-x:hidden;
  position:relative;background:#fff;
}

iframe{
  width:100%;border:none;background:#fff;display:block;height:auto;min-height:800px;
}

/* estado cerrado (88px) */
.sidebar.close ~ #titulo-container,
.sidebar.close ~ #iframe-container{
  margin-left:88px !important;width:calc(100% - 88px) !important;
}

/* =========================
   RESPONSIVE (Mobile)
   ========================= */
@media (max-width:768px){
  .sidebar{
    left:-290px;              /* sale completo de pantalla */
    z-index:999;transition:left .3s ease;height:100%;
  }
  .sidebar.open{left:0;}

  .sidebar .menu-bar{overflow-y:auto;}
  .sidebar .menu-bar::-webkit-scrollbar{width:6px;}
  .sidebar .menu-bar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:4px;}

  .sidebar.close ~ #titulo-container,
  .sidebar.close ~ #iframe-container,
  #titulo-container,#iframe-container{
    margin-left:0 !important;width:100% !important;
  }

  .overlay{
    position:fixed;top:0;left:0;width:100%;height:100vh;
    background:rgba(0,0,0,.3);z-index:998;display:none;
  }
  .sidebar.open ~ .overlay{display:block;}
  .sidebar.open ~ .toggle-btn{display:none !important;}

  /* tamaño móvil: compacto */
  .sidebar li{height:44px;}
  .sidebar .text{font-size:15px;}
  .sidebar .icon{font-size:19px;min-width:38px;}
}

/* =========================
   ALTURAS BAJAS (laptops)
   ========================= */
@media (max-height:860px) and (min-width:769px){
  /* primera nivel de compactación suave */
  .sidebar header .image img{width:34px;}
  .logo-text .profession{font-size:13px;}
  .sidebar li{height:44px;margin-top:7px;}
  .sidebar .text{font-size:15.5px;}
  .sidebar .icon{font-size:19px;min-width:38px;}
  #titulo-container{padding:16px 22px;font-size:19px;}
}

@media (max-height:800px) and (min-width:769px){
  /* segunda compactación para asegurar que no aparezca scroll */
  .sidebar header .image img{width:32px;}
  .logo-text .profession{font-size:12.5px;}
  .sidebar li{height:42px;margin-top:6px;}
  .sidebar .text{font-size:15px;}
  .sidebar .icon{font-size:18px;min-width:36px;}
  #titulo-container{padding:14px 20px;font-size:18px;}
}

@media (max-height:700px) and (min-width:769px){
  /* ultra-compacto en alturas muy bajas */
  .sidebar{padding:14px 14px;}
  .sidebar header .image img{width:30px;}
  .sidebar li{height:40px;margin-top:5px;}
  .sidebar .text{font-size:14.5px;}
  .sidebar .icon{font-size:17px;min-width:34px;}
}

/* =========================
   BOTÓN TOGGLE
   ========================= */
.toggle-btn{
  position:fixed;top:20px;left:20px;z-index:1001;
  background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);
  width:40px;height:40px;display:none;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s;
}
.toggle-btn .toggle{font-size:22px;color:#009adf;}
.toggle-btn:hover{background-color:#e0f0ff;}
@media (max-width:768px){.toggle-btn{display:flex;}}

/* =========================
   OTROS AJUSTES RESPONSIVE
   ========================= */
@media (max-width:768px) and (orientation:landscape){
  html,body{height:auto;overflow:auto;}
  .sidebar{max-height:100dvh;overflow-y:auto;}
  #titulo-container,#iframe-container{padding-top:60px;}
  iframe{min-height:100vh;}
}

@media (min-width:769px){
  html,body{overflow:auto;height:auto;}
  #iframe-container{height:auto;overflow:auto;}
  #iframe-container iframe{min-height:100vh;overflow:auto;}
}
