/* ============================================================
   SHELL — solo lo usa index.html
   Rail de navegación + topbar + contenedor de pantallas
   ============================================================ */

html, body{ height:100%; overflow:hidden; }

.app{ display:flex; height:100vh; }

/* ---------- Rail lateral ---------- */
.rail{
  width:var(--rail-w); flex:0 0 var(--rail-w);
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding:14px 8px; height:100vh; z-index:30;
}
.rail__logo{
  width:52px; height:52px; border-radius:14px;
  background:var(--ink); overflow:hidden;
  display:grid; place-items:center;
  margin-bottom:18px; flex:0 0 auto; box-shadow:var(--sh-2);
}
.rail__logo img{ width:100%; height:100%; object-fit:cover; }

.rail__nav{
  display:flex; flex-direction:column; gap:4px; width:100%;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
}
.rail__nav::-webkit-scrollbar{ width:0; }

.navitem{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:100%; padding:10px 4px 8px; border-radius:var(--r);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:var(--text-3); position:relative;
  transition:background .15s, color .15s;
}
.navitem svg{ width:22px; height:22px; stroke-width:1.7; }
.navitem span{
  font-size:10.5px; font-weight:600; letter-spacing:.01em;
  text-align:center; line-height:1.15;
}
.navitem:hover{ background:var(--surface-2); color:var(--ink); }
.navitem.is-active{
  background:var(--brand); color:#fff;
  box-shadow:0 6px 16px rgba(242,104,28,.32);
}
.navitem.is-active svg{ stroke-width:2; }

.rail__sep{ width:34px; height:1px; background:var(--line); margin:10px 0; flex:0 0 auto; }

/* ---------- Zona principal ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; }

.topbar{
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding:0 22px; z-index:25;
}
.topbar__brand{ display:flex; flex-direction:column; line-height:1.15; }
.topbar__brand b{ font-size:15.5px; color:var(--ink); }
.topbar__brand b em{ font-style:normal; color:var(--brand); }
.topbar__brand small{ font-size:11px; color:var(--text-3); font-weight:500; }

.topbar .search{ margin-left:auto; }

.topbar__right{ display:flex; align-items:center; gap:12px; }
.chip-status{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-2);
  font-size:11.5px; font-weight:700; border:1px solid var(--line);
}
.chip-status i{ width:7px; height:7px; border-radius:50%; background:currentColor; display:block; }
.chip-status.is-online{ background:var(--ok-50); color:var(--ok); border-color:transparent; }
.chip-status.is-offline{ background:var(--danger-50); color:var(--danger); border-color:transparent; }

.avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--brand-700));
  color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:13px; box-shadow:var(--sh-1);
}

/* ---------- Contenedor de pantallas ---------- */
.stage{ flex:1; min-height:0; position:relative; background:var(--bg); }
.stage iframe{
  width:100%; height:100%; border:0; display:block;
  background:var(--bg);
}
.stage__loader{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--bg); z-index:2; transition:opacity .2s;
}
/* El ocultamiento lo resuelve ahora la regla global [hidden] de design-system.css */
.stage__loader i{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--brand);
  animation:scdj-spin .7s linear infinite; display:block;
}
@keyframes scdj-spin{ to{ transform:rotate(360deg); } }

/* ---------- Tabletas ---------- */
@media (max-width:820px){
  :root{ --rail-w:74px; }
  .navitem span{ font-size:9.5px; }
  .topbar__brand small{ display:none; }
  .topbar .search{ max-width:220px; }
}

/* ============================================================
   TELÉFONOS
   El rail lateral deja de tener sentido: en 375 px se llevaba 74
   px, o sea el 20% del ancho, y dejaba 301 px para trabajar. Pasa
   a ser una barra abajo, que además queda al alcance del pulgar.
   ============================================================ */
@media (max-width:640px){

  /* 100dvh y no 100vh: en el móvil, 100vh mide la ventana SIN la
     barra del navegador, así que con 100vh la barra de navegación
     queda tapada hasta que el usuario hace scroll. */
  .app{ flex-direction:column; height:100dvh; }

  /* Se reordena sin tocar el HTML: el rail es el primer hijo en el
     documento (correcto para lectores de pantalla, es la
     navegación) pero se dibuja al final. */
  .main{ order:1; height:auto; flex:1 1 auto; min-height:0; }
  .rail{ order:2; }

  .rail{
    width:auto; flex:0 0 auto; height:auto;
    flex-direction:row; align-items:stretch;
    border-right:0; border-top:1px solid var(--line);
    padding:0;
    /* Deja libre la franja del gesto de inicio en los iPhone sin
       botón; si no, el último botón queda debajo de ella. */
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -2px 12px rgba(22,32,46,.06);
  }

  /* El logo y los separadores son de la versión vertical. */
  .rail__logo, .rail__sep{ display:none; }

  .rail__nav{
    flex-direction:row; gap:0;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  /* Son nueve pantallas: no caben todas de golpe en 375 px, así que
     la barra se desliza. 68 px de ancho deja ver ~5 y media, que es
     justo la pista de que hay más si se arrastra.

     El width:auto NO sobra: la regla base pone width:100%, pensada
     para la columna vertical. En fila, ese 100% se resuelve contra
     el ancho de la barra y cada botón salía de 375 px — se veía
     uno solo y había que arrastrar para llegar a los demás. */
  .navitem{
    width:auto; min-width:68px; flex:0 0 auto;
    padding:9px 6px 7px; border-radius:0; gap:4px;
  }
  .navitem svg{ width:21px; height:21px; }
  .navitem span{ font-size:9.5px; }

  /* Sin sombra: dentro de una barra queda sucio. La activa se marca
     con una línea arriba, como en las apps del teléfono. */
  .navitem.is-active{
    background:var(--brand-50); color:var(--brand-700); box-shadow:none;
  }
  .navitem.is-active::before{
    content:''; position:absolute; top:0; left:8px; right:8px; height:3px;
    background:var(--brand); border-radius:0 0 3px 3px;
  }

  /* ---------- Topbar de un solo renglón ---------- */
  /* En un teléfono el alto es lo caro. Con el buscador en su propio
     renglón la topbar medía 135 px que, sumados a los 53 de la
     barra de abajo, se llevaban el 23% de la pantalla antes de
     mostrar un solo dato.
     Lo que se va:
       · el buscador global, que solo lleva al catálogo con el
         término escrito — y el catálogo tiene el suyo, a un toque
         de la barra de abajo;
       · el nombre y el rol en texto, que ya dice el avatar.
     Si prefieres el buscador aquí, basta con quitar su display:none
     y devolverle el flex:1 0 100%. */
  .topbar{
    height:auto; flex:0 0 auto;
    gap:10px; padding:7px 12px;
  }
  .topbar__brand b{ font-size:14px; }
  .topbar .search{ display:none; }
  #usuarioCaja{ display:none; }
  .topbar__right{ margin-left:auto; gap:8px; }
  .avatar{ width:34px; height:34px; font-size:12px; }

  /* El texto del chip sobra: el color del punto ya dice si la API
     responde. */
  .chip-status{ font-size:0; padding:7px; gap:0; }
  .chip-status i{ width:9px; height:9px; }
}