/* =============================================================================
   SHELL — login, navegación y marco de los módulos.

   Un solo layout responsive, no dos skins separadas: sidebar en escritorio, barra
   inferior en teléfono. El modelo de referencia mantenía un dashboard de desktop y
   otro de mobile como bloques distintos, y cada cambio había que hacerlo dos veces.
   ============================================================================= */

/* ============================== LOGIN ======================================
   Pantalla de marca: naranja Heredero de lado a lado y el logo en blanco al medio.

   El degradado va del naranja pleno arriba a uno más profundo abajo, que es donde
   están los textos: sobre el #fc5000 de marca el blanco queda en 3,4:1 y las
   etiquetas son de 11px. Con el tono de abajo pasa 4,5:1 sin perder el naranja.
   ========================================================================== */
#login{
  position:fixed; inset:0; z-index:9000;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:linear-gradient(170deg, #ff5a1f 0%, var(--acc) 42%, #c93a08 100%);
}
#login.on{ display:flex; }

#login .caja{ width:100%; max-width:360px; }

/* --- logo --- */
#login .marca{ text-align:center; margin-bottom:34px; }
#login .logo{
  display:block; width:auto; max-width:min(78vw, 300px); max-height:150px;
  margin:0 auto;
  /* Pinta de blanco cualquier logo opaco respetando la transparencia: así alcanza
     con el PNG naranja de marca y no hace falta una segunda versión blanca. */
  filter:brightness(0) invert(1);
}
/* Reemplazo en texto mientras no exista assets/logo-heredero.png */
#login .marca .n{
  display:none;
  font-size:21px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#fff;
}
#login .marca .s{
  font-size:10px; letter-spacing:2.6px; text-transform:uppercase;
  color:rgba(255,255,255,.82); margin-top:10px;
}

/* --- formulario sobre el naranja --- */
#login .fld > label{ color:#fff; font-weight:700; letter-spacing:.5px; }
#login .fld input{
  background:rgba(0,0,0,.24); color:#fff;
  border-color:rgba(255,255,255,.34);
}
#login .fld input::placeholder{ color:rgba(255,255,255,.6); }
#login .fld input:focus{
  border-color:#fff; background:rgba(0,0,0,.32);
  box-shadow:0 0 0 3px rgba(255,255,255,.24);
}
#login .err{
  display:none; margin-bottom:14px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r-sm); padding:10px 12px;
  font-size:11.5px; color:#fff; font-weight:600;
}
#login .err.on{ display:block; }
/* Botón blanco: sobre el naranja es el contraste más alto posible y ancla la acción. */
#login .btn{
  width:100%; justify-content:center; margin-top:10px;
  background:#fff; color:var(--acc-d); border-color:#fff; font-weight:800;
  padding:12px 18px; font-size:13px;
}
#login .btn:hover{ background:#fff; border-color:#fff; filter:brightness(.95); }
#login .pie{
  margin-top:22px; text-align:center; font-size:10.5px;
  color:rgba(255,255,255,.8); line-height:1.6;
}

/* ============================== APP ======================================== */
#app{ display:none; min-height:100%; }
#app.on{ display:block; }

/* ---- barra lateral (escritorio) ---- */
#nav{
  position:fixed; left:0; top:0; bottom:0; width:var(--nav-w); z-index:60;
  background:var(--card2); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  padding:22px 14px 14px;
}
#nav .marca{ padding:0 10px 18px; border-bottom:1px solid var(--line); margin-bottom:14px; }
/* El logo va en su naranja original: sobre el panel oscuro es el punto de color más
   fuerte de la pantalla, que es justo lo que tiene que ser. */
#nav .marca .logo{ display:block; height:44px; width:auto; max-width:100%; }
#nav .marca .n{ display:none; font-size:12.5px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--acc-cl); }
#nav .marca .s{ font-size:9px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--mut); margin-top:7px; }

#nav .items{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.navbtn{
  display:flex; align-items:center; gap:10px;
  background:none; border:0; border-radius:var(--r-sm);
  padding:10px 11px; width:100%;
  color:var(--mut); font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; text-align:left;
  transition:background .14s, color .14s;
}
.navbtn .ic{ font-size:14px; line-height:1; width:18px; text-align:center; flex:none; }
.navbtn:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.navbtn.on{
  color:var(--ink); background:rgba(252,80,0,.17);
  box-shadow:inset 0 0 0 1px rgba(252,80,0,.42);
}
.navbtn.pronto{ opacity:.45; }
.navbtn.pronto:hover{ background:none; color:var(--mut); cursor:default; }
.navbtn .tag{
  margin-left:auto; font-size:8.5px; font-weight:700; letter-spacing:.6px;
  color:var(--faint); text-transform:uppercase;
}

#nav .usuario{
  border-top:1px solid var(--line); padding-top:12px; margin-top:10px;
  display:flex; align-items:center; gap:10px;
}
#nav .usuario .av{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:rgba(252,80,0,.2); color:var(--acc-cl);
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800;
}
#nav .usuario .d{ min-width:0; flex:1; }
#nav .usuario .nm{ font-size:11.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#nav .usuario .rl{ font-size:9.5px; color:var(--mut); }

/* ---- contenido ---- */
#main{ margin-left:var(--nav-w); min-height:100vh; }
.wrap{ max-width:1400px; margin:0 auto; padding:26px 32px 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.topbar .t h1{ margin:0; }
.topbar .t h1 span{ color:var(--mut); font-weight:400; }
.topbar .t .sub{ font-size:11.5px; color:var(--mut); margin-top:4px; }
.topbar .acts{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- banda de "sin base configurada" ---- */
#sinbase{
  display:none;
  background:rgba(242,169,59,.09); border:1px solid rgba(242,169,59,.28);
  border-left:3px solid var(--amber); border-radius:var(--r);
  padding:13px 18px; margin-bottom:18px;
  font-size:11.5px; color:var(--dim); line-height:1.6;
}
#sinbase.on{ display:block; }
#sinbase b{ color:var(--amber); }
#sinbase code{
  font-family:var(--mono); font-size:11px;
  background:var(--card2); border-radius:5px; padding:1px 6px;
}

/* ---- falta la fila en `perfiles` ---- */
#sinperfil{
  display:none;
  background:rgba(252,80,0,.08); border:1px solid rgba(252,80,0,.3);
  border-left:3px solid var(--acc); border-radius:var(--r);
  padding:13px 18px; margin-bottom:18px;
  font-size:11.5px; color:var(--dim); line-height:1.6;
}
#sinperfil.on{ display:block; }
#sinperfil b{ color:var(--acc-cl); }
#sinperfil code{
  font-family:var(--mono); font-size:11.5px;
  background:var(--card2); border-radius:5px; padding:3px 8px;
}
#sinperfil .uuid{ display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }

/* ---- módulo en construcción ---- */
.pronto-box{ text-align:center; padding:70px 20px; }
.pronto-box .ic{ font-size:32px; opacity:.4; }
.pronto-box h2{ margin:16px 0 8px; font-size:13px; letter-spacing:.4px; text-transform:none; color:var(--ink); }
.pronto-box p{ font-size:12px; color:var(--mut); max-width:420px; margin:0 auto; line-height:1.7; }

/* Barra superior con la marca: existe SOLO en teléfono, donde la barra lateral se
   convierte en barra inferior de íconos y el logo se quedaría sin lugar. */
#topbrand{ display:none; }

/* ============================== TELÉFONO =================================== */
@media (max-width:900px){
  #topbrand{
    display:flex; align-items:center; justify-content:center;
    position:sticky; top:0; z-index:50;
    padding:9px 14px; padding-top:calc(9px + env(safe-area-inset-top));
    background:rgba(20,22,31,.94); border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  #topbrand .logo{ display:block; height:26px; width:auto; }
  #topbrand .n{ display:none; font-size:11.5px; font-weight:800; letter-spacing:.7px;
    text-transform:uppercase; color:var(--acc-cl); }

  #nav{
    left:0; right:0; top:auto; bottom:0; width:auto; height:auto;
    flex-direction:row; padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line2);
    background:rgba(20,22,31,.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  #nav .marca, #nav .usuario{ display:none; }
  #nav .items{
    flex-direction:row; gap:2px; overflow-x:auto; scrollbar-width:none;
  }
  #nav .items::-webkit-scrollbar{ display:none; }
  .navbtn{
    flex-direction:column; gap:4px; padding:7px 4px; min-width:66px;
    font-size:9.5px; letter-spacing:.2px; text-align:center;
  }
  .navbtn .ic{ font-size:16px; width:auto; }
  .navbtn .tag{ display:none; }
  .navbtn.pronto{ display:none; }   /* en el teléfono no ocupa lugar lo que no anda */

  #main{ margin-left:0; padding-bottom:76px; }
  .wrap{ padding:18px 14px 40px; }
  .topbar{ margin-bottom:16px; }
  h1{ font-size:17px; }
}