/* CADREX Fase 2 · Design System (tema claro marca CADREX, 01-jul-2026)
   Compartido por todas las páginas del sistema de compras. */
  :root{
    /* Tema claro marca CADREX (Cadrex PPT Template 2026 · 01-jul-2026) */
    --bg:#E8F1F9; --panel:#ffffff; --panel2:#F3F8FC; --line:#C9DAEA;
    --ink:#002067; --muted:#5B7395; --brand:#002A89; --brand2:#0B8FDD;
    --indigo:#002A89; --violet:#0B8FDD; --amber:#FFA700; --danger:#FF4040;
    --teal:#04D8B7; --cyan:#12B7FF;
    color-scheme:light;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;font-size:15px}
  button{font-family:inherit;cursor:pointer}
  input,select{font-family:inherit;font-size:14px}
  .hidden{display:none!important}

  /* layout */
  header.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.1rem;background:linear-gradient(110deg,#002A89,#0B5BD7 55%,#12B7FF);border-bottom:1px solid var(--line);color:#fff}
  .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.3px}
  .brand small{font-weight:500;opacity:.85;font-size:.72rem;display:block;letter-spacing:0}
  .who{font-size:.8rem;text-align:right}
  .who b{display:block}
  .who .role{font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:#CFE8FF}
  .btn{border:none;border-radius:.5rem;padding:.55rem .9rem;font-weight:700;font-size:.85rem}
  .btn-pri{background:var(--brand);color:#fff}
  .btn-ind{background:var(--indigo);color:#fff}
  .btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
  .btn-danger{background:var(--danger);color:#fff}
  .btn:disabled{opacity:.5;cursor:not-allowed}

  nav.tabs{display:flex;gap:.3rem;padding:.5rem 1.1rem 0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 1px 3px #002A8912}
  nav.tabs button{background:transparent;border:none;color:var(--muted);padding:.6rem .9rem;border-bottom:3px solid transparent;font-weight:700;font-size:.85rem}
  nav.tabs button.active{color:var(--brand);border-bottom-color:var(--amber)}
  nav.tabs{flex-wrap:wrap}
  nav.subtabs{display:flex;gap:.35rem;padding:.6rem 1.1rem 0;max-width:72rem;margin:0 auto;flex-wrap:wrap}
  nav.subtabs button{background:#fff;border:1px solid var(--line);color:var(--muted);padding:.4rem .85rem;border-radius:2rem;font-weight:700;font-size:.78rem;cursor:pointer}
  nav.subtabs button.active{color:#fff;background:var(--brand);border-color:var(--brand)}
  .navdot{display:inline-block;background:var(--amber);color:#fff;border-radius:1rem;padding:0 .4rem;font-size:.64rem;font-weight:800;margin-left:.35rem;vertical-align:middle}
  .navdot:empty{display:none}

  main{max-width:72rem;margin:0 auto;padding:1.2rem}
  input.num{text-align:right;font-variant-numeric:tabular-nums}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:.8rem;padding:1.1rem 1.2rem;margin-bottom:1rem;box-shadow:0 1px 4px #002A890d}
  h2{font-size:1.05rem;margin-bottom:.8rem}
  label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 .25rem}
  label.req::after{content:" *";color:var(--danger);font-weight:700}
  .invalid{border-color:var(--danger)!important;box-shadow:0 0 0 2px rgba(255,64,64,.22)}
  .errbox{background:#FFE3E3;border:1px solid var(--danger);color:#C22323;border-radius:.5rem;padding:.6rem .8rem;margin-top:.6rem;font-size:.82rem}
  .errbox ul{margin:.3rem 0 0 1rem}
  .field{margin-bottom:.8rem}
  input[type=text],input[type=email],input[type=number],select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:.5rem;padding:.55rem .65rem;color:var(--ink)}
  textarea{min-height:3.5rem;resize:vertical}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}
  @media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

  table{width:100%;border-collapse:collapse;font-size:.84rem}
  th,td{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--line);vertical-align:middle}
  th{font-size:.66rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
  td input,td select{padding:.35rem .4rem}
  .lines td{padding:.3rem .35rem}
  .right{text-align:right}

  .pill{display:inline-block;padding:.15rem .55rem;border-radius:1rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
  .s-DRAFT{background:#E8F1F9;color:#5B7395;border:1px solid #C9DAEA}
  .s-IN_APPROVAL{background:#FFF4DC;color:#A96A00;border:1px solid #FFA700}
  .s-APPROVED{background:#DCFBF4;color:#027A63;border:1px solid #04D8B7}
  .s-REJECTED{background:#FFE3E3;color:#C22323;border:1px solid #FF4040}
  .s-CANCELLED{background:#E8F1F9;color:#5B7395;border:1px solid #C9DAEA}
  .s-IN_PURCHASE{background:#E0F4FF;color:#0B5BD7;border:1px solid #12B7FF}
  .s-ORDERED{background:#E3ECFF;color:#002A89;border:1px solid #002A89}
  .s-CLOSED{background:#E8F1F9;color:#5B7395;border:1px solid #C9DAEA}
  .s-ISSUED{background:#FFF4DC;color:#A96A00;border:1px solid #FFA700}
  .s-CONFIRMED{background:#DCFBF4;color:#027A63;border:1px solid #04D8B7}
  .s-DELIVERED{background:#CBF5E6;color:#014D3F;border:1px solid #027A63}

  /* Wizard de requisición (flujo aprobado por JL: 4 pasos) */
  .steps{display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:.8rem;padding:.8rem 1rem;margin-bottom:1rem;overflow-x:auto}
  .stp{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
  .stp .n{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex-shrink:0}
  .stp .lab{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}
  .stp.on .n{background:var(--brand);border-color:var(--brand);color:#fff}
  .stp.on .lab{color:var(--ink)}
  .stp.ok .n{background:var(--teal);border-color:var(--teal);color:#04372e}
  .stp.ok .lab{color:#027A63}
  .stp-ln{width:2rem;height:2px;background:var(--line);flex:0 0 auto}
  .wstep{display:none}
  .wstep.active{display:block}
  .wnav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1rem}
  .autofill{background:#EAF3FF;border:1px solid #B9D5F2;border-radius:.7rem;padding:.8rem 1rem;margin-bottom:.9rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem}
  .autofill .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
  .autofill .v{font-size:.88rem;font-weight:700;margin-top:.1rem}
  .autofill .tag{grid-column:1/-1;font-size:.72rem;color:var(--brand2)}
  .kv{display:flex;justify-content:space-between;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--panel2);font-size:.85rem}
  .kv .k2{color:var(--muted)}
  .kv .v2{font-weight:700;text-align:right}

  .drop{border:2px dashed var(--line);border-radius:.7rem;padding:1.1rem;text-align:center;color:var(--muted);background:var(--panel2);cursor:pointer}
  .drop.over{border-color:var(--brand);color:var(--brand)}
  .note{font-size:.74rem;color:var(--muted)}
  .tag-soon{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:#FFF4DC;color:#A96A00;border:1px solid #FFA700;border-radius:.3rem;padding:.1rem .4rem;margin-left:.4rem}
  .toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);padding:.7rem 1.1rem;border-radius:.6rem;font-size:.85rem;box-shadow:0 8px 30px #002A8933;z-index:50}
  .toast.err{border-color:var(--danger);color:#C22323}
  .toast.ok{border-color:var(--teal);color:#027A63}

  /* Combobox con búsqueda (Pendientes 06-jul: todo seleccionable filtra al teclear) */
  .combo{position:relative}
  .combo select.combo-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
  .combo .combo-input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:.5rem;padding:.55rem 1.6rem .55rem .65rem;color:var(--ink);cursor:pointer;text-overflow:ellipsis}
  .combo::after{content:"▾";position:absolute;right:.6rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.7rem;pointer-events:none}
  td .combo .combo-input{padding:.35rem 1.4rem .35rem .4rem}
  .combo-list{position:absolute;top:calc(100% + 2px);left:0;right:0;min-width:100%;background:#fff;border:1px solid var(--line);border-radius:.5rem;max-height:14rem;overflow-y:auto;z-index:40;box-shadow:0 8px 24px #002A8926}
  .combo-opt{padding:.45rem .65rem;font-size:.84rem;cursor:pointer;white-space:normal}
  .combo-opt:hover,.combo-opt.hover{background:var(--panel2)}
  .combo-opt.sel{background:#E3ECFF;font-weight:700}
  .combo-empty{padding:.5rem .65rem;font-size:.78rem;color:var(--muted)}

  /* Admin reordenado — sub-bloques y acordeones (06-jul) */
  .ablk{border:1px solid var(--line);border-radius:.6rem;padding:.9rem;margin-bottom:.7rem;background:var(--panel2)}
  .ablk h3{font-size:.9rem;margin-bottom:.6rem;color:var(--brand)}
  details.acc{border:1px solid var(--line);border-radius:.6rem;margin-bottom:.6rem;overflow:hidden;background:#fff}
  details.acc>summary{cursor:pointer;padding:.65rem .9rem;font-weight:700;font-size:.88rem;background:var(--panel2);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.6rem}
  details.acc>summary::-webkit-details-marker{display:none}
  details.acc>summary::before{content:"▸";color:var(--muted);font-size:.75rem;margin-right:.1rem}
  details.acc[open]>summary::before{content:"▾"}
  details.acc>summary .peek{font-size:.72rem;font-weight:500;color:var(--muted);margin-left:auto}
  details.acc[open]>summary{border-bottom:1px solid var(--line)}
  .acc .abody{padding:.9rem}
  .admin-pane.hidden{display:none}

  /* Banner de emulación "Ver como…" (06-jul) */
  .emubar{position:sticky;top:0;z-index:55;background:linear-gradient(90deg,#5C0C86,#9232EE);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;flex-wrap:wrap}
  .emubar .btn{padding:.35rem .8rem}
  .stcheck{display:flex;align-items:flex-start;gap:.5rem;font-size:.83rem;padding:.4rem 0;border-bottom:1px solid var(--panel2)}
  .stdot{width:.7rem;height:.7rem;border-radius:50%;flex:0 0 auto;margin-top:.28rem}
  .stdot.g{background:var(--teal)}.stdot.r{background:var(--danger)}
  .stsum{font-weight:700;margin-top:.5rem}

  /* login */
  .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem}
  .login{width:100%;max-width:23rem;background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.6rem;text-align:center}
  .login .logo{font-size:1.5rem;font-weight:800;background:linear-gradient(90deg,#002A89,#12B7FF,#04D8B7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .login p{color:var(--muted);font-size:.82rem;margin:.4rem 0 1.2rem}
  .login input{text-align:center;margin-bottom:.7rem}
  .login .btn{width:100%}
  .mockbadge{position:fixed;top:.5rem;right:.6rem;background:#FFF4DC;color:#A96A00;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:.4rem;z-index:60;border:1px solid #FFA700}

  /* Logo de marca CADREX (reemplaza logo CSS) — 08-jul-2026 */
  .brand .brandlogo{background:#fff;border-radius:.45rem;padding:.26rem .5rem;display:inline-flex;align-items:center}
  .brand .brandlogo img{height:24px;width:auto;display:block}
  .login .logo-img{width:min(15rem,82%);height:auto;display:block;margin:0 auto .3rem}