/* ============================================================================
   AO HOME · Ventriloc · Acceso y listado de proyectos · 2026-09-12
   Capa visual final de admin/index.html y admin/proyectos.html.
   Sustituye a dimension-admin.css. Mismo sistema que ventriloc.css.
   ========================================================================== */

:root{
  --vnt-graphite:#211f1c;--vnt-canvas:#ffffff;--vnt-ash:#ece6db;--vnt-fog:#f5f1e9;
  --vnt-ivory:#e0d7c6;--vnt-steel:#4b463f;--vnt-slate:#7a7268;--vnt-mist:#ded6c8;
  --vnt-ember:#ff682c;--vnt-brass:#816729;
  --font-display:"Inter Tight","Space Grotesk",Inter,ui-sans-serif,system-ui,sans-serif;
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:var(--vnt-canvas);--panel:var(--vnt-ash);--panel2:var(--vnt-fog);
  --text:var(--vnt-graphite);--muted:var(--vnt-steel);--line:var(--vnt-mist);
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  background:var(--vnt-canvas)!important;
  color:var(--vnt-graphite)!important;
  font-family:var(--font-ui)!important;
  font-size:15px;
}
h1,h2,h3,.brand{font-family:var(--font-display)!important;font-weight:400!important;letter-spacing:-.02em!important}

/* ============================== Acceso (login) ============================
   Dos bandas: izquierda papel Ivory con el titular, derecha lienzo blanco. */
.admin-login-shell{background:var(--vnt-canvas)}
.admin-intro{
  position:relative;overflow:hidden;
  padding:clamp(36px,5vw,72px)!important;
  background:var(--vnt-ivory)!important;
  color:var(--vnt-graphite)!important;
}
.admin-intro::after{display:none!important}
.admin-intro>*{position:relative;z-index:1}
.admin-intro .brand{
  color:var(--vnt-graphite)!important;
  font-size:20px!important;font-weight:400!important;letter-spacing:-.02em!important;
  text-decoration:underline;text-decoration-color:var(--vnt-ember);text-decoration-thickness:1px;text-underline-offset:4px;
}
.admin-intro p{color:var(--vnt-brass)!important;font-family:var(--font-ui)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase}
.admin-intro h1{
  color:var(--vnt-graphite)!important;
  font-size:clamp(40px,5.4vw,66px)!important;
  line-height:.91!important;letter-spacing:-.02em!important;
}
.admin-login-panel{background:var(--vnt-canvas)!important}
.admin-login-card{
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  background:var(--vnt-canvas)!important;
  box-shadow:none!important;
}
.admin-login-card .eyebrow,.eyebrow{color:var(--vnt-brass)!important;font-family:var(--font-ui)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase}
.admin-login-card h2{color:var(--vnt-graphite)!important;font-size:32px!important;line-height:1.19!important}
.muted{color:var(--vnt-steel)!important}
.admin-login-card label{font-family:var(--font-ui)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.08em!important;color:var(--vnt-steel)!important}
.admin-login-card input,.client-create-panel input{
  border:1px solid #cbc1b0!important;
  border-radius:0!important;
  background:var(--vnt-canvas)!important;
  color:var(--vnt-graphite)!important;
  font-family:var(--font-ui)!important;font-size:15px!important;
}
.admin-login-card input:focus,.client-create-panel input:focus{border-color:var(--vnt-graphite)!important;outline:none!important}
.admin-login-card button,.client-create-panel button{
  border:1px solid var(--vnt-graphite)!important;
  border-radius:0!important;
  background:var(--vnt-graphite)!important;
  color:var(--vnt-canvas)!important;
  font-family:var(--font-display)!important;font-size:16px!important;font-weight:400!important;letter-spacing:-.02em!important;
  box-shadow:none!important;
}
.admin-login-card button:hover,.client-create-panel button:hover{background:#000!important;border-color:#000!important}
.admin-login-card small{color:var(--vnt-slate)!important;font-size:12px!important}
.notice.error{
  border:0!important;border-radius:8px!important;
  background:rgba(255,104,44,.09)!important;color:var(--vnt-ember)!important;
  font-size:14px!important;
}

/* =========================== Listado de proyectos ========================= */
.admin-page{padding-left:236px!important;background:var(--vnt-canvas)!important;color:var(--vnt-graphite)!important}
.admin-sidebar{
  width:236px!important;padding:28px 18px!important;
  border-right:0!important;
  background:var(--vnt-graphite)!important;
}
.admin-sidebar .brand,.admin-sidebar a,.admin-sidebar span{font-family:var(--font-display)!important}
.admin-sidebar .brand{color:var(--vnt-canvas)!important;font-size:20px!important}
.admin-sidebar nav span{
  display:block;
  border:0!important;border-radius:200px!important;
  padding:8px 14px!important;
  background:var(--vnt-canvas)!important;
  color:var(--vnt-graphite)!important;
  font-size:13px!important;letter-spacing:-.02em!important;
}
.admin-sidebar nav a{color:#a8a8a8!important;font-size:13px!important;text-decoration:none!important}
.admin-sidebar nav a:hover{color:var(--vnt-canvas)!important}
.admin-sidebar .logout{color:var(--vnt-slate)!important;font-family:var(--font-ui)!important}
.admin-main{max-width:1200px;margin:auto;padding:24px clamp(24px,4vw,64px)!important}
.admin-main>header{align-items:center!important;margin-bottom:22px!important;padding-bottom:14px;border-bottom:1px solid var(--line)}
.admin-main>header .eyebrow{margin:0 0 3px!important}
.admin-main>header .muted{margin:3px 0 0!important;line-height:1.35!important}
.admin-main h1{margin:0!important;color:var(--vnt-graphite)!important;font-size:clamp(28px,3vw,34px)!important;line-height:1.1!important}
.demo-badge{
  border:0!important;border-radius:20px!important;padding:4px 12px!important;
  background:var(--vnt-ash)!important;color:var(--vnt-steel)!important;
  font-family:var(--font-ui)!important;font-size:12px!important;font-weight:500!important;
}
.client-create-panel{
  grid-template-columns:minmax(190px,.55fr) minmax(0,1.45fr)!important;
  margin-bottom:24px!important;
  border:0!important;border-radius:6px 0 0 0!important;
  padding:clamp(28px,3vw,40px)!important;
  background:var(--vnt-ivory)!important;
  box-shadow:none!important;
}
.client-create-panel h2{font-size:24px!important}
.client-create-panel form{gap:12px!important}
.client-create-panel label{color:var(--vnt-steel)!important;font-family:var(--font-ui)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.08em!important}
.client-create-panel input{padding:10px 12px!important}
.client-create-panel button{padding:10px 20px!important}
.client-create-status{color:var(--vnt-steel)!important;font-size:14px!important}
.project-list{gap:12px!important}
.project-card{
  grid-template-columns:110px 1fr 150px 220px!important;gap:20px!important;
  border:0!important;border-radius:8px!important;
  padding:20px!important;
  background:var(--vnt-ash)!important;color:var(--vnt-graphite)!important;
  box-shadow:none!important;
  transition:background .18s ease;
}
.project-card:hover{background:var(--vnt-ivory)!important;border:0!important}
.project-copy h2{font-size:18px!important;line-height:1.25!important}
.project-copy p,.project-code span,.project-state small{color:var(--vnt-steel)!important;font-size:13px!important}
.project-copy span,.project-state>span,.project-actions small{color:var(--vnt-steel)!important;font-size:13px!important}
.project-code strong{font-family:var(--font-display)!important;font-weight:400!important;letter-spacing:-.02em!important}
.project-card>a,.project-actions>a,.project-actions button{
  border:1px solid var(--vnt-graphite)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--vnt-graphite)!important;
  font-family:var(--font-display)!important;font-size:14px!important;font-weight:400!important;letter-spacing:-.02em!important;
  text-align:center;text-decoration:none!important;
  transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .32s ease,color .32s ease,border-color .32s ease,box-shadow .32s ease!important;
}
.project-actions>a:hover,.project-actions button:hover,.project-card>a:hover{background:var(--vnt-graphite)!important;color:var(--vnt-canvas)!important;border-color:var(--vnt-graphite)!important}
@media(any-hover:hover){
  .project-card>a:not([aria-disabled="true"]):hover,.project-actions>a:not([aria-disabled="true"]):hover,.project-actions button:not(:disabled):hover{
    transform:translateY(-2px);box-shadow:0 14px 30px -24px rgba(33,31,28,.6)!important;
  }
  .project-card>a:active,.project-actions>a:active,.project-actions button:not(:disabled):active{transform:translateY(0);transition-duration:.12s!important}
}
@media(prefers-reduced-motion:reduce){
  .project-card>a,.project-actions>a,.project-actions button{transition:none!important}
  .project-card>a:hover,.project-actions>a:hover,.project-actions button:hover{transform:none!important}
}
.empty,.loading{border:0!important;border-radius:8px!important;background:var(--vnt-ash)!important;color:var(--vnt-steel)!important}

@media(max-width:900px){
  .admin-page{padding:0!important}
  .admin-sidebar{position:relative!important;width:100%!important;height:66px!important;padding:0 18px!important}
  .admin-main{padding:20px 18px!important}
  .client-create-panel{grid-template-columns:1fr!important}
  .project-card{grid-template-columns:1fr!important}
  .admin-login-shell{grid-template-columns:1fr}
  .admin-intro{min-height:34vh}
  .admin-login-card{padding:28px!important}
}