:root{
  --bg:#f3f4f6;
  --surface:#ffffff;
  --sunk:#eceef1;
  --line:#d9dde3;
  --fg:#252a31;
  --muted:#6b7280;

  --accent:#c8102e;
  --accent-hover:#a50e26;
  --accent-fg:#ffffff;
  --accent-soft:#fce8ec;

  --amber:#a51d36;
  --amber-soft:#fce8ec;

  --ok:#4b5563;
  --ok-hover:#374151;
  --ok-soft:#e8eaed;

  --bad:#b42335;
  --bad-soft:#fce8ec;

  --violet:#5f6368;
  --violet-soft:#e9eaec;

  --shadow:0 2px 6px rgba(31,41,55,.05),
           0 8px 24px rgba(31,41,55,.04);

  --f-body:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:"Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;

  --r:12px;
}

*{
  box-sizing:border-box;
}

[hidden]{
  display:none!important;
}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  scroll-behavior:smooth;
}

body{
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

button,input,select,textarea{
  font:inherit;
  color:inherit;
}

a{
  color:var(--accent);
  text-decoration:none;
}

a:hover{
  color:var(--accent-hover);
}

:focus-visible{
  outline:3px solid rgba(200,16,46,.25);
  outline-offset:2px;
}

.wrap{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:800;
}

h1{
  font-family:var(--f-display);
  font-size:clamp(25px,4vw,34px);
  line-height:1.15;
  margin:4px 0 0;
  font-weight:750;
  letter-spacing:-.8px;
  color:var(--fg);
}

h2{
  font-family:var(--f-display);
  font-size:21px;
  margin:0;
  font-weight:700;
  letter-spacing:-.35px;
}

h3{
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
  font-weight:750;
}

p{
  margin:0;
}

/* ---------- botones ---------- */

.btn{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:9px;
  padding:10px 17px;
  cursor:pointer;
  font-weight:650;
  font-size:13.5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.035);
  line-height:1.35;
  user-select:none;
  transition:all .2s ease;
}

.btn:hover{
  background:#f1f2f4;
  border-color:#b9bec6;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

.btn:active{
  transform:translateY(0);
  box-shadow:none;
}

.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-fg);
  box-shadow:0 3px 8px rgba(200,16,46,.18);
}

.btn.primary:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  box-shadow:0 5px 13px rgba(200,16,46,.23);
}

.btn.ok{
  background:#4b5563;
  border-color:#4b5563;
  color:#fff;
}

.btn.ok:hover{
  background:#374151;
  border-color:#374151;
}

.btn.danger{
  color:var(--bad);
  border-color:#edbdc5;
  background:#fff;
}

.btn.danger:hover{
  background:var(--bad-soft);
  border-color:var(--bad);
}

.btn.small{
  padding:7px 12px;
  font-size:12px;
  border-radius:7px;
}

.btn.link{
  border:0;
  box-shadow:none;
  background:none;
  color:var(--accent);
  padding:5px 7px;
}

.btn.link:hover{
  background:var(--accent-soft);
  transform:none;
}

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ---------- formularios ---------- */

input[type=text],
input[type=number],
input[type=date],
input[type=month],
input[type=email],
input[type=password],
select,
textarea{
  background:var(--surface);
  border:1px solid #d5d9df;
  border-radius:9px;
  padding:11px 12px;
  width:100%;
  min-width:0;
  font-size:14px;
  color:var(--fg);
  transition:border-color .2s,box-shadow .2s;
}

input::placeholder,
textarea::placeholder{
  color:#a0a5ae;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
  outline:none;
  box-shadow:0 0 0 3px rgba(200,16,46,.10);
}

textarea{
  resize:vertical;
  min-height:75px;
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12.5px;
  color:#555d68;
  font-weight:700;
  min-width:0;
}

label.check{
  flex-direction:row;
  align-items:center;
  gap:9px;
  color:var(--fg);
  font-weight:500;
  font-size:13.5px;
  cursor:pointer;
}

label.check input{
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--accent);
}

input[type=checkbox],
input[type=radio]{
  accent-color:var(--accent);
  width:16px;
  height:16px;
  cursor:pointer;
}

/* ---------- login ---------- */

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  background:
    radial-gradient(circle at 10% 10%,rgba(200,16,46,.06),transparent 30%),
    radial-gradient(circle at 90% 90%,rgba(75,85,99,.08),transparent 30%),
    #f3f4f6;
}

.login{
  position:relative;
  overflow:hidden;
  width:min(440px,100%);
  background:var(--surface);
  border:1px solid #e0e2e6;
  border-radius:17px;
  padding:36px 30px;
  display:flex;
  flex-direction:column;
  gap:17px;
  box-shadow:0 15px 45px rgba(31,41,55,.10);
}

.login::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:var(--accent);
}

.login .btn{
  padding:13px 18px;
  border-radius:9px;
  font-size:14px;
  width:100%;
}

.flag{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:16px;
}

/* ---------- encabezado ---------- */

.top{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  border-top:4px solid var(--accent);
  box-shadow:0 3px 12px rgba(0,0,0,.035);
}

.top .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  align-items:center;
  justify-content:space-between;
  padding-block:16px 10px;
}

.me{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.me .name{
  font-weight:750;
  color:var(--fg);
}

.avatar{
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
}

.tabs{
  display:flex;
  gap:5px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding-top:7px;
}

.tab{
  border:0;
  background:none;
  padding:11px 16px;
  cursor:pointer;
  color:var(--muted);
  font-weight:650;
  font-size:13px;
  border-bottom:3px solid transparent;
  white-space:nowrap;
  border-radius:8px 8px 0 0;
  transition:all .2s ease;
}

.tab:hover{
  background:#f4f5f6;
  color:var(--fg);
}

.tab[aria-selected="true"]{
  color:var(--accent);
  border-bottom-color:var(--accent);
  background:var(--accent-soft);
}

.tab .n{
  display:inline-block;
  min-width:19px;
  padding:2px 6px;
  margin-left:6px;
  border-radius:20px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  text-align:center;
  font-weight:800;
}

main .wrap{
  padding-block:27px 65px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.demo-note{
  border:1px solid #e1c6cb;
  border-left:4px solid var(--accent);
  border-radius:10px;
  padding:13px 16px;
  font-size:13px;
  color:#626873;
  background:#fff;
}

/* ---------- barra de herramientas ---------- */

.toolbar{
  display:flex;
  gap:11px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.toolbar > input{
  flex:1 1 240px;
  width:auto;
}

.chips{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.chip{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:8px;
  padding:7px 13px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  display:inline-flex;
  gap:7px;
  align-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
  transition:all .2s ease;
}

.chip:hover{
  border-color:#b7bdc5;
  background:#f7f7f8;
}

.chip b{
  font-family:var(--f-mono);
  font-weight:600;
}

.chip[aria-pressed="true"]{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 3px 8px rgba(200,16,46,.15);
}

/* ---------- tarjetas y tablas ---------- */

.card{
  background:var(--surface);
  border:1px solid #e0e3e8;
  border-radius:13px;
  box-shadow:0 2px 8px rgba(31,41,55,.025);
  overflow:hidden;
}

.tbl{
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13.5px;
}

th{
  font-size:11.5px;
  text-align:left;
  color:#535b65;
  font-weight:800;
  letter-spacing:.035em;
  padding:13px 12px;
  border-bottom:2px solid #dfe2e7;
  background:#f2f3f5;
  white-space:nowrap;
}

td{
  padding:13px 12px;
  border-bottom:1px solid #eceef1;
  vertical-align:middle;
}

tr:last-child td{
  border-bottom:0;
}

tbody tr{
  transition:background .15s ease;
}

tr.click{
  cursor:pointer;
}

tr.click:hover td{
  background:#f9f0f2;
}

tr.win td{
  background:#f0f1f3;
}

.num{
  font-family:var(--f-mono);
  font-size:12.5px;
  white-space:nowrap;
}

.amt{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
  font-weight:600;
}

.sub{
  color:var(--muted);
  font-size:12.5px;
}

/* ---------- estados ---------- */

.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:7px;
  padding:5px 10px;
  font-size:11.5px;
  font-weight:750;
  white-space:nowrap;
  border:1px solid transparent;
}

.pill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}

.e-solicitada,
.p-gris{
  background:#eceef1;
  color:#59616c;
  border-color:#e0e2e6;
}

.e-cotizando{
  background:#fce8ec;
  color:#b21e38;
  border-color:#f2ccd3;
}

.e-aprobada{
  background:#e9eaec;
  color:#505761;
  border-color:#dadddf;
}

.e-comprada,
.e-parcial,
.p-amber{
  background:#fce8ec;
  color:#a51d36;
  border-color:#f2ccd3;
}

.e-recibida,
.p-ok{
  background:#e8eaed;
  color:#46505b;
  border-color:#d9dde3;
}

.e-rechazada,
.p-bad{
  background:#fce8ec;
  color:#b42335;
  border-color:#f2cbd2;
}

.tag{
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-left:6px;
}

.tag.urg{
  color:var(--accent);
}

.tag.orig{
  color:#626873;
}

.badge{
  font-size:11px;
  font-weight:750;
  border-radius:6px;
  padding:4px 9px;
  background:var(--accent-soft);
  color:var(--accent);
  white-space:nowrap;
}

.empty{
  padding:48px 16px;
  text-align:center;
  color:var(--muted);
}

.empty strong{
  display:block;
  color:var(--fg);
  font-size:19px;
  margin-bottom:6px;
  font-weight:750;
}

/* ---------- panel lateral ---------- */

.overlay{
  position:fixed;
  inset:0;
  background:rgba(20,24,30,.58);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:20;
  display:flex;
  justify-content:flex-end;
}

.panel{
  background:var(--bg);
  width:min(800px,100%);
  height:100%;
  overflow-y:auto;
  padding:24px 24px 45px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:-12px 0 40px rgba(0,0,0,.16);
  animation:panelIn .25s ease;
}

@keyframes panelIn{
  from{
    transform:translateX(25px);
    opacity:.7;
  }
  to{
    transform:translateX(0);
    opacity:1;
  }
}

.panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}

.sec{
  background:var(--surface);
  border:1px solid #e0e3e8;
  border-radius:13px;
  padding:19px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:0 2px 7px rgba(31,41,55,.025);
}

.sec.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(200,16,46,.08);
}

.g2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.g3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}

.full{
  grid-column:1/-1;
}

.kv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:13px 18px;
}

.kv div{
  display:flex;
  flex-direction:column;
  font-size:13.5px;
  min-width:0;
  gap:3px;
  font-weight:650;
}

.kv span{
  font-size:11.5px;
  color:var(--muted);
  font-weight:600;
}

/* ---------- pasos ---------- */

.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}

.steps li{
  font-size:11px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:650;
}

.steps li::before{
  content:"";
  height:6px;
  border-radius:10px;
  background:#dfe2e6;
}

.steps li.done::before{
  background:#59616c;
}

.steps li.now{
  color:var(--accent);
  font-weight:800;
}

.steps li.now::before{
  background:var(--accent);
}

.steps li.stop::before{
  background:#b42335;
}

/* ---------- elementos de formulario ---------- */

.item-row{
  display:grid;
  grid-template-columns:1fr 80px 100px 42px;
  gap:9px;
  align-items:end;
}

.x{
  height:42px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:9px;
  cursor:pointer;
  color:#707783;
  box-shadow:0 1px 3px rgba(0,0,0,.035);
  transition:all .2s ease;
}

.x:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}

.hint{
  border-left:4px solid var(--accent);
  background:var(--accent-soft);
  color:#762034;
  padding:11px 14px;
  font-size:13px;
  border-radius:0 9px 9px 0;
}

.hint.warn{
  border-left-color:#777e88;
  background:#eff0f2;
  color:#515965;
}

.wait{
  font-size:13px;
  color:#5c6570;
  background:#eceef1;
  border-radius:9px;
  padding:10px 13px;
}

.effect{
  font-size:12px;
  color:var(--muted);
}

.actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
}

.log{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:13px;
}

.log li{
  padding:9px 11px;
  border-radius:8px;
  background:#f5f6f7;
  border:1px solid #e9ebee;
}

.log time{
  font-family:var(--f-mono);
  font-size:11.5px;
  color:var(--muted);
  margin-right:8px;
}

.err{
  color:var(--bad);
  font-size:13px;
  font-weight:700;
}

.okmsg{
  color:#4b5563;
  font-size:13px;
  font-weight:700;
}

.secret{
  font-family:var(--f-mono);
  font-size:16px;
  background:#f0f1f3;
  border:1px dashed #bfc4cb;
  border-radius:9px;
  padding:11px 13px;
  user-select:all;
}

/* ---------- permisos ---------- */

.perm{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:8px 13px;
}

.perm label.check{
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  background:var(--surface);
  transition:all .15s ease;
}

.perm label.check:hover{
  border-color:#bdc2ca;
  background:#f8f8f9;
}

.perm label.check span.l{
  display:flex;
  gap:9px;
  align-items:center;
}

.src{
  font-size:10px;
  font-weight:750;
  border-radius:6px;
  padding:3px 8px;
  white-space:nowrap;
}

.src.rol{
  background:#eceef1;
  color:#5c6570;
}

.src.add{
  background:#e8eaed;
  color:#46505b;
}

.src.del{
  background:var(--accent-soft);
  color:var(--accent);
}

.roles-grid{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.roles-grid label.check{
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 13px;
  background:var(--surface);
  transition:all .2s ease;
}

.roles-grid label.check:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}

/* ---------- avisos / reporte ---------- */

.mail{
  background:var(--surface);
  border:1px solid #e0e3e8;
  border-radius:11px;
  padding:15px 17px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 2px 7px rgba(31,41,55,.025);
}

.mail.new{
  border-left:4px solid var(--accent);
  background:#fffafa;
}

.mail .hd{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.mail .subj{
  font-weight:750;
  font-size:14px;
  color:var(--fg);
}

.grid-rep{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:17px;
}

/* ---------- indicadores ---------- */

.stat{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}

.stat div{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid #e0e3e8;
  border-radius:12px;
  padding:17px 15px;
  box-shadow:0 3px 9px rgba(31,41,55,.035);
}

.stat div::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:var(--accent);
}

.stat b{
  display:block;
  font-family:var(--f-mono);
  font-size:25px;
  font-weight:700;
  color:var(--fg);
  margin-bottom:4px;
}

.stat span{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

.mailprev{
  background:#fff;
  color:#252a31;
  border:1px solid var(--line);
  border-radius:11px;
  padding:18px;
  overflow-x:auto;
}

.mailprev th,
.mailprev td{
  background:none;
  color:#252a31;
}

.doc{
  max-width:950px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ---------- código y notificaciones ---------- */

pre{
  background:#f0f1f3;
  border:1px solid #dce0e5;
  border-radius:10px;
  padding:15px;
  overflow-x:auto;
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.55;
  margin:0;
  color:#343a43;
}

code{
  font-family:var(--f-mono);
  font-size:12.5px;
  background:#f0f1f3;
  color:#a51d36;
  padding:2px 6px;
  border-radius:5px;
}

.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:24px;
  z-index:40;
  padding:13px 19px;
  border-radius:10px;
  font-size:13px;
  font-weight:650;
  max-width:min(560px,92vw);
  box-shadow:0 8px 25px rgba(0,0,0,.18);
  animation:toastIn .25s ease;
}

.toast.ok{
  background:#3f4650;
  color:#fff;
}

.toast.bad{
  background:var(--accent);
  color:#fff;
}

@keyframes toastIn{
  from{
    opacity:0;
    transform:translate(-50%,10px);
  }
  to{
    opacity:1;
    transform:translate(-50%,0);
  }
}

/* ---------- responsive ---------- */

@media (max-width:720px){

  .wrap{
    padding-left:15px;
    padding-right:15px;
  }

  .top .wrap{
    padding-top:13px;
    padding-bottom:6px;
    gap:10px;
  }

  .tabs{
    width:100%;
    padding-bottom:2px;
  }

  .tab{
    padding:10px 12px;
    font-size:12px;
  }

  main .wrap{
    padding-top:20px;
    padding-bottom:40px;
    gap:15px;
  }

  .g2,
  .g3{
    grid-template-columns:1fr;
  }

  .stat{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .stat div{
    padding:13px 12px;
  }

  .stat b{
    font-size:21px;
  }

  .item-row{
    grid-template-columns:1fr 70px 38px;
    gap:7px;
  }

  .item-row .u{
    display:none;
  }

  .steps{
    gap:4px;
  }

  .steps li{
    font-size:9.5px;
  }

  .hide-sm{
    display:none;
  }

  .panel{
    padding:18px 14px 35px;
  }

  .sec{
    padding:14px;
  }

  .login{
    padding:30px 21px;
  }

  .toolbar{
    gap:8px;
  }

  .toolbar .btn{
    flex:1 1 auto;
  }

  .grid-rep{
    grid-template-columns:1fr;
  }

  th{
    padding:11px 9px;
  }

  td{
    padding:11px 9px;
  }
}

@media (max-width:420px){

  h1{
    font-size:25px;
  }

  h2{
    font-size:18px;
  }

  .stat{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .stat b{
    font-size:19px;
  }

  .btn{
    padding:9px 12px;
    font-size:12.5px;
  }

  .roles-grid label.check{
    width:100%;
  }
}

/* ---------- animaciones y estados ---------- */

@media (prefers-reduced-motion:no-preference){

  .btn,
  .chip,
  .tab,
  tr.click td,
  .card,
  .sec,
  .mail{
    transition:background .18s ease,
               border-color .18s ease,
               box-shadow .18s ease,
               transform .18s ease;
  }
}

body.busy{
  cursor:progress;
}

body.busy .btn{
  pointer-events:none;
  opacity:.7;
}

.loading{
  padding:35px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}