/* Panel del home de AZATECH — mismo negro/amarillo de la landing. */
:root{
  --bg:#050505; --panel:#0e0e0e; --panel-2:#141414; --line:#1f1f1f;
  --y:#ffd400; --y-2:#d9f225; --y-line:rgba(255,212,0,.32);
  --w:#fff; --tx:#e9e9e9; --mut:#a5a5a5; --mut-2:#7c7c7c; --red:#e5484d;
  --rad:14px;
  --body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* el display:grid de .login le gana al atributo hidden: sin esto el login
   se queda encima del panel despues de entrar */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--body);font-size:15px;line-height:1.6}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--y);text-decoration:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;
  border:1.5px solid transparent;font-weight:700;font-size:14px;cursor:pointer;transition:.2s ease}
.btn-y{background:var(--y);color:#141000}
.btn-y:hover{background:#ffe14d}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--tx)}
.btn-ghost:hover{border-color:var(--y-line);color:var(--y)}
.btn-red{background:var(--red);color:#fff}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(70% 60% at 50% 0%,rgba(255,212,0,.12),transparent 62%),var(--bg)}
.login-box{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:32px;display:grid;gap:14px;text-align:center}
.login-box img{height:44px;width:auto;margin:0 auto 6px}
.login-box h1{margin:0;font-size:20px;color:var(--y);text-transform:uppercase;letter-spacing:.1em}
.login-box p{margin:0;color:var(--mut);font-size:13.5px}
.login-box input{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.login-box input:focus{outline:none;border-color:var(--y)}
.err{color:var(--red)!important}

/* ---------- estructura ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:rgba(5,5,5,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--y)}
.top-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lnk{font-size:13.5px;color:var(--mut)}
.lnk:hover{color:var(--y)}
.save{font-size:12.5px;color:var(--mut-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.save.dirty{color:var(--y);border-color:var(--y-line)}
.save.ok{color:var(--y-2);border-color:rgba(217,242,37,.35)}

.shell{display:grid;grid-template-columns:230px 1fr;gap:24px;max-width:1240px;margin:0 auto;padding:22px 20px 60px}
/* la lista de secciones es mas alta que la pantalla: la barra entera es la que
   queda fija y con scroll propio. Con el sticky en el <nav>, el boton de
   restaurar quedaba montado sobre las ultimas secciones. */
.side{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 92px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-right:4px}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.side nav{display:grid;gap:4px}
.side nav button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  padding:10px 13px;border:0;border-radius:11px;background:transparent;color:var(--mut);font-size:14px;cursor:pointer}
.side nav button:hover{background:rgba(255,255,255,.04);color:var(--tx)}
.side nav button.on{background:linear-gradient(90deg,var(--y),var(--y-2));color:#141000;font-weight:700}
.side nav button .n{font-size:11.5px;opacity:.7}
.reset{margin-top:18px;width:100%}
.hint{color:var(--mut-2);font-size:12px;margin:8px 2px 0}

.note{border:1px solid rgba(217,242,37,.28);background:rgba(217,242,37,.07);color:#dbe9a5;
  border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:18px}

/* ---------- campos ---------- */
.group{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:18px;margin-bottom:16px}
.group > h2{margin:0 0 4px;font-size:15px;color:var(--y);text-transform:uppercase;letter-spacing:.12em}
.group > .sub{margin:0 0 14px;color:var(--mut-2);font-size:12.5px}
.field{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.field:first-of-type{border-top:0}
.field label{font-size:12px;color:var(--mut);letter-spacing:.04em}
.field .orig{font-size:12px;color:var(--mut-2)}
.field input[type=text],.field input[type=url],.field textarea,.field select{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--y)}
.field textarea{min-height:78px;resize:vertical}
.field.changed input,.field.changed textarea{border-color:var(--y-line);background:rgba(255,212,0,.05)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row > *{flex:0 0 auto}
.row input{flex:1 1 240px}
.thumb{width:112px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#000}
.filebtn{position:relative;overflow:hidden}
.filebtn-wrap{display:inline-flex}
/* el input tiene que ser un elemento real y del tamaño del boton: en el movil
   el toque cae sobre el input, no sobre un boton que llame a .click() */
.filebtn{-webkit-tap-highlight-color:rgba(255,212,0,.2)}
.filebtn input[type=file]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font-size:120px;padding:0;border:0;background:none}

/* ---------- listas del catalogo ---------- */
.item{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--panel-2)}
.item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.item-head b{font-size:14px;color:var(--w)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .field{border-top:0;padding:4px 0}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  background:var(--y);color:#141000;font-weight:700;padding:11px 20px;border-radius:999px;font-size:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.6)}

@media (max-width:900px){
  .shell{grid-template-columns:1fr;gap:14px}
  .side{position:static;max-height:none;overflow:visible}
  .side nav{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:6px}
  .side nav button{white-space:nowrap}
  .reset{width:auto}
  .grid2{grid-template-columns:1fr}
}