:root { --blue:#075dad; --blue-dark:#073b68; --ink:#101828; --text:#344054; --muted:#667085; --line:#d6deea; --bg:#f1f5f9; --surface:#fff; --green:#157347; --amber:#a85a00; --red:#b42318; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:0; }
button,input,select,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.topbar { min-height:72px; padding:12px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:18px; color:var(--ink); font-weight:800; text-decoration:none; }
.brand img { width:130px; }
.brand span { padding-left:18px; border-left:1px solid var(--line); }
.top-actions { display:flex; align-items:center; gap:12px; }
.top-actions a,.top-actions button,#refreshButton { min-height:38px; padding:8px 14px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--blue-dark); text-decoration:none; font-weight:750; }
#currentUser { color:var(--muted); font-size:14px; }
.page-shell { width:min(1240px,calc(100% - 40px)); margin:0 auto; padding:38px 0 60px; }
.login-panel { width:min(460px,100%); margin:7vh auto 0; padding:32px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 16px 42px rgba(16,24,40,.09); }
.login-panel img { width:155px; }
.login-panel h1 { margin:25px 0 8px; color:var(--ink); }
.login-panel p { color:var(--muted); line-height:1.5; }
.login-panel form { display:grid; gap:15px; margin-top:24px; }
label { font-size:13px; font-weight:750; }
input,select,textarea { width:100%; min-width:0; margin-top:6px; padding:10px 11px; border:1px solid #b9c5d3; border-radius:5px; background:#fff; color:var(--ink); }
textarea { min-height:72px; resize:vertical; }
.login-panel form button,.approve-button { min-height:42px; border:0; border-radius:5px; background:var(--blue); color:#fff; font-weight:800; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; padding:28px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.eyebrow { margin:0 0 7px; color:#087f8c; font-size:11px; font-weight:850; text-transform:uppercase; }
.page-heading h1 { margin:0 0 8px; color:var(--ink); font-size:28px; }
.page-heading p:last-child { max-width:800px; margin:0; color:var(--muted); line-height:1.5; }
.summary-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:16px 0; }
.summary-strip div { padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:7px; }
.summary-strip small,.summary-strip strong { display:block; }
.summary-strip small { color:var(--muted); font-weight:700; }
.summary-strip strong { margin-top:4px; color:var(--ink); font-size:24px; }
.filters { display:flex; gap:4px; overflow-x:auto; padding:5px; background:#fff; border:1px solid var(--line); border-radius:7px; }
.filters button { flex:0 0 auto; min-height:36px; padding:7px 12px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-weight:750; }
.filters button.active { background:#e9f3fd; color:var(--blue); }
.workspace-message { display:block; min-height:25px; padding:12px 2px 0; color:var(--red); font-size:13px; }
.workspace-message.success { color:var(--green); }
.requests-list { display:grid; gap:12px; }
.request-card { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(260px,1fr) minmax(280px,1.15fr); gap:22px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:7px; }
.request-card.focused { outline:3px solid rgba(7,93,173,.2); border-color:var(--blue); }
.identity h2 { margin:0 0 5px; color:var(--ink); font-size:17px; }
.identity a { color:var(--blue); word-break:break-word; }
.identity small { display:block; margin-top:10px; color:var(--muted); }
.status-pill { display:inline-flex; margin-top:12px; padding:5px 9px; border-radius:999px; background:#fff1d6; color:var(--amber); font-size:11px; font-weight:850; }
.status-pill.activada { background:#def5e8; color:var(--green); }
.status-pill.rechazada { background:#fee4e2; color:var(--red); }
.status-pill.aprobada { background:#e7f1ff; color:var(--blue); }
.request-details { font-size:13px; line-height:1.55; }
.request-details strong { color:var(--ink); }
.request-actions { display:grid; gap:10px; align-content:start; }
.action-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.action-row button,.reject-button,.resend-button { min-height:40px; padding:8px 13px; border-radius:5px; font-weight:800; }
.reject-button { border:1px solid #efb5ae; background:#fff; color:var(--red); }
.resend-button { border:1px solid var(--line); background:#fff; color:var(--blue); }
.empty-state { padding:45px 20px; background:#fff; border:1px solid var(--line); border-radius:7px; color:var(--muted); text-align:center; }
@media(max-width:900px){.request-card{grid-template-columns:1fr 1fr}.request-actions{grid-column:1/-1}.page-heading{flex-direction:column}.summary-strip{grid-template-columns:1fr}}
@media(max-width:600px){.topbar{padding:10px 14px}.brand span,#currentUser{display:none}.page-shell{width:calc(100% - 24px);padding-top:18px}.request-card{grid-template-columns:1fr}.request-actions{grid-column:auto}.action-row{grid-template-columns:1fr}.page-heading{padding:20px}.summary-strip{grid-template-columns:repeat(3,1fr)}.summary-strip div{padding:12px}.summary-strip strong{font-size:20px}}