:root{
  --navy:#0E1B2A; --navy-2:#152233; --lime:#AFD32B;
  --bg:#F6F8FB; --card:#FFFFFF; --border:#E4E9F0; --border-2:#DFE8F2;
  --muted:#5B6A7D; --muted-2:#8A97A8; --ok:#1c7c3f; --warn:#9a6a00; --err:#b3261e;
  --radius:14px; --shadow:0 1px 2px rgba(14,27,42,.04),0 8px 24px rgba(14,27,42,.06);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--navy);background:var(--bg);}
.hidden{display:none!important}
.muted{color:var(--muted)}
.opt{color:var(--muted-2);font-weight:400}

/* Marca */
.brand{display:flex;align-items:baseline;gap:.5rem}
.brand-mark{font-weight:800;letter-spacing:.5px;font-size:1.05rem;
  background:var(--navy);color:#fff;padding:.18rem .5rem;border-radius:7px}
.brand-sub{color:var(--muted);font-size:.9rem}

/* ---------------- Login ---------------- */
.login{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1rem;padding:1.5rem}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;display:flex;
  flex-direction:column;gap:.85rem}
.login-card h1{font-size:1.25rem;margin:.2rem 0 .3rem}
.login-card label,.cod-form label{display:flex;flex-direction:column;gap:.35rem;
  font-size:.82rem;font-weight:600;color:var(--navy-2)}
input{font:inherit;padding:.6rem .7rem;border:1px solid var(--border);border-radius:10px;
  background:#fff;color:var(--navy);font-weight:400}
input:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:transparent}
button{font:inherit;cursor:pointer;font-weight:700;border:0;border-radius:10px;
  padding:.65rem .9rem;background:var(--navy);color:#fff;transition:filter .15s}
button:hover{filter:brightness(1.12)}
button:disabled{opacity:.55;cursor:progress}
.foot{color:var(--muted-2);font-size:.8rem}
.error{color:var(--err);font-size:.85rem;margin:.2rem 0 0}

/* ---------------- Hub ---------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.25rem;background:var(--card);border-bottom:1px solid var(--border)}
.user{display:flex;align-items:center;gap:.75rem}
.user-email{color:var(--muted);font-size:.85rem}
.ghost{background:transparent;color:var(--navy);border:1px solid var(--border);font-weight:600}
.ghost:hover{filter:none;background:var(--bg)}
.hub{max-width:960px;margin:0 auto;padding:1.75rem 1.25rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.tool{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;text-align:left;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.15rem;color:var(--navy);position:relative;min-height:150px}
button.tool{cursor:pointer;transition:transform .12s,box-shadow .12s}
button.tool:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(14,27,42,.10)}
button.tool::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--lime);border-radius:var(--radius) 0 0 var(--radius)}
.tool-icon{font-size:1.5rem}
.tool-name{font-weight:800;font-size:1.02rem}
.tool-desc{color:var(--muted);font-size:.85rem;line-height:1.35}
.tool-disabled{opacity:.62;filter:grayscale(.4);cursor:not-allowed}
.badge{position:absolute;top:.9rem;right:.9rem;background:var(--navy-2);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.3px;padding:.2rem .5rem;border-radius:999px}

/* ---------------- Panel Codificador ---------------- */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.5rem;max-width:640px}
.back{background:transparent;color:var(--muted);border:0;padding:0 0 .6rem;font-weight:600}
.back:hover{filter:none;color:var(--navy)}
.panel h2{margin:.1rem 0 .2rem}
.cod-form{display:flex;flex-direction:column;gap:.85rem;margin-top:1rem}
.cod-form button{align-self:flex-start;padding-left:1.4rem;padding-right:1.4rem}

/* ---------------- Resultado ---------------- */
.result{margin-top:1.25rem;border-top:1px solid var(--border);padding-top:1.1rem}
.estado{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;padding:.25rem .6rem;
  border-radius:999px;font-size:.85rem}
.estado.OK{background:#e8f5ec;color:var(--ok)}
.estado.OK_TIPO_A_VALIDAR{background:#fff4df;color:var(--warn)}
.estado.DESCONOCIDO{background:#eef1f5;color:var(--muted)}
.estado.PENDIENTE{background:#fde9e7;color:var(--err)}
.codigo{font-family:var(--mono);font-size:1.5rem;font-weight:700;margin:.8rem 0;
  background:var(--navy);color:#fff;padding:.6rem .8rem;border-radius:10px;display:inline-block}
.desglose{width:100%;border-collapse:collapse;margin:.4rem 0}
.desglose td{padding:.4rem .2rem;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:top}
.desglose td:first-child{color:var(--muted);width:9.5rem;font-weight:600}
.notas{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-direction:column;gap:.3rem}
.notas li{font-size:.85rem;padding:.4rem .6rem;border-radius:8px;background:var(--bg)}
.notas li.motivo{background:#fde9e7;color:#7a1a14}
.notas li.aviso{background:#fff4df;color:#6b4a00}