:root { --navy:#0f172a; --blue:#2563eb; --cyan:#06b6d4; --text:#475569; --muted:#64748b; --line:#dce6f0; --page:#f5f8fc; --surface:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--navy); background:var(--page); font:16px/1.55 Arial,Helvetica,sans-serif; }
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
:is(a,button,input,select,textarea):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.shell { width:min(1180px,90%); margin-inline:auto; }
.skip-link { position:absolute; top:-80px; left:12px; z-index:20; padding:9px 14px; border-radius:8px; color:white; background:var(--navy); }
.skip-link:focus { top:10px; }
.site-header { border-bottom:1px solid var(--line); background:white; }
.header-inner,.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header-inner { min-height:78px; }
.brand img { display:block; width:150px; height:auto; }
.back-link,.site-footer a { color:#1d4ed8; font-weight:700; text-decoration:none; }
.back-link:hover,.site-footer a:hover { text-decoration:underline; }
.intro { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.7fr); align-items:center; gap:60px; padding:75px 0 55px; }
.eyebrow,.view-kicker { display:inline-block; color:#1d4ed8; font-size:13px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.intro h1 { max-width:730px; margin:12px 0 18px; font-size:clamp(38px,5vw,58px); line-height:1.08; letter-spacing:-.04em; }
.intro p { max-width:690px; color:var(--text); font-size:18px; }
.primary-link { display:inline-flex; align-items:center; justify-content:center; min-height:50px; margin-top:18px; padding:12px 21px; border-radius:10px; color:white; background:var(--blue); font-weight:800; text-decoration:none; }
.primary-link:hover,.action-button:hover { background:#1d4ed8; }
.intro-note { display:flex; gap:15px; padding:24px; border:1px solid #b7e5ed; border-radius:18px; background:linear-gradient(135deg,#e7f9fc,#f1f7ff); }
.note-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:11px; color:#075985; background:#a5f3fc; }
.intro-note strong { display:block; line-height:1.3; }
.intro-note p { margin:7px 0 0; font-size:14px; }
.guide { padding:10px 0 60px; }
.guide h2 { margin:0 0 19px; font-size:26px; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.guide-card { padding:24px; border:1px solid var(--line); border-radius:16px; background:white; }
.guide-card span { color:#08758b; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.guide-card h3 { margin:7px 0 6px; font-size:22px; }
.guide-card p { margin:0; color:var(--text); }
.demo-section { padding:22px 0 70px; scroll-margin-top:20px; }
.demo-heading { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:15px; margin-bottom:22px; }
.demo-heading h2 { margin:4px 0 0; font-size:clamp(30px,4vw,42px); line-height:1.2; }
.sample-badge { padding:8px 12px; border-radius:999px; color:#075985; background:#dff7fc; font-size:13px; font-weight:700; }
.demo-app { overflow:hidden; border:1px solid #cdddeb; border-radius:22px; background:white; box-shadow:0 25px 70px rgba(15,35,65,.09); }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 26px; color:white; background:linear-gradient(105deg,#07172e,#0c365b); }
.app-brand { display:flex; align-items:center; gap:12px; }
.app-brand > span { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:11px; color:#06334d; background:linear-gradient(135deg,#3b82f6,#67e8f9); font-size:22px; font-weight:900; }
.app-brand strong,.app-brand small { display:block; }
.app-brand small { color:#b7d2e5; font-size:12px; }
.reset-button { padding:9px 14px; border:1px solid #6d91ad; border-radius:9px; color:#e6f6ff; background:rgba(255,255,255,.07); font-size:13px; font-weight:700; }
.reset-button:hover { background:rgba(255,255,255,.16); }
.mode-nav { display:flex; gap:6px; padding:13px 25px 0; border-bottom:1px solid var(--line); background:#f8fbff; }
.mode-nav button { min-height:48px; padding:11px 18px; border:1px solid transparent; border-bottom:3px solid transparent; border-radius:9px 9px 0 0; color:#476078; background:transparent; font-weight:800; }
.mode-nav button:hover { background:#e9f3ff; }
.mode-nav button[aria-pressed="true"] { border-color:#d9e7f6; border-bottom-color:var(--blue); color:#173a6d; background:white; }
.demo-notice { margin:15px 26px 0; padding:11px 14px; border:1px solid #a8e6d2; border-radius:10px; color:#166534; background:#effcf6; font-weight:700; font-size:14px; }
.demo-notice.is-error { border-color:#fecaca; color:#b91c1c; background:#fef2f2; }
.workspace { padding:30px 26px 34px; }
.workspace-head h3 { margin:6px 0 6px; font-size:clamp(25px,3vw,32px); line-height:1.2; }
.workspace-head p { margin:0 0 23px; color:var(--text); }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.metric-card { padding:17px 19px; border:1px solid #d9e6f2; border-radius:13px; background:#f7fbff; }
.metric-card span,.metric-card strong,.metric-card small { display:block; }
.metric-card span { color:#46617b; font-size:13px; font-weight:700; }
.metric-card strong { margin:4px 0; color:#123d69; font-size:30px; line-height:1.1; }
.metric-card small { color:var(--muted); font-size:12px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(285px,.85fr); align-items:start; gap:18px; }
.panel { min-width:0; padding:22px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 6px 20px rgba(20,45,75,.035); }
.panel h4 { margin:0; font-size:19px; }
.panel-head { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:15px; margin-bottom:18px; }
.panel-head label { min-width:190px; }
label { display:block; color:#334b63; font-size:13px; font-weight:700; }
input,select,textarea { display:block; width:100%; min-height:42px; margin-top:6px; padding:9px 11px; border:1px solid #bbcad9; border-radius:8px; color:var(--navy); background:white; }
textarea { resize:vertical; }
input::placeholder,textarea::placeholder { color:#64748b; }
.table-wrap { max-width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th,td { padding:13px 10px; border-bottom:1px solid #e7edf4; font-size:13px; }
th { color:#52667d; background:#f7fafd; font-weight:800; }
.table-link { padding:0; border:0; color:#1d4ed8; background:none; font-weight:800; text-align:left; text-decoration:underline; text-underline-offset:3px; }
.code-cell { color:#64748b; white-space:nowrap; }
.stock-cell { font-weight:800; }
.status { display:inline-block; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; }
.status-ok,.status-entregada { color:#166534; background:#dcfce7; }
.status-low,.status-nueva { color:#9a3412; background:#ffedd5; }
.status-en-curso { color:#1d4ed8; background:#dbeafe; }
.side-panel > p { margin:6px 0 17px; color:var(--text); font-size:13px; }
.side-panel form { display:grid; gap:11px; }
.action-button { min-height:43px; width:100%; padding:10px 13px; border:1px solid var(--blue); border-radius:9px; color:white; background:var(--blue); font-size:13px; font-weight:800; }
.action-outline { color:#1d4ed8; background:white; }
.action-outline:hover { color:white; }
.activity { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.activity h5 { margin:0 0 8px; font-size:13px; }
.activity ol { display:grid; gap:7px; max-height:145px; margin:0; padding-left:21px; overflow:auto; color:#42566c; font-size:12px; }
.activity p { margin:0; color:var(--muted); font-size:12px; }
.empty-state { padding:17px; border-radius:9px; color:var(--muted); background:#f6f8fb; font-size:13px; }
.request-list { display:grid; gap:10px; }
.request-card { display:grid; grid-template-columns:1fr auto; gap:3px 9px; width:100%; padding:14px 16px; border:1px solid #d9e3ee; border-radius:11px; color:var(--navy); background:white; text-align:left; }
.request-card:hover { border-color:#83b5ea; }
.request-card[aria-pressed="true"] { border-color:var(--blue); background:#f0f7ff; box-shadow:inset 0 0 0 1px var(--blue); }
.request-code { color:#08758b; font-size:11px; font-weight:800; letter-spacing:.05em; }
.request-card strong { grid-column:1; font-size:15px; }
.request-card small { grid-column:1; color:var(--muted); }
.request-card .status { grid-column:2; grid-row:2 / span 2; align-self:center; }
#request-detail h5 { margin:7px 0; font-size:18px; }
#request-detail p { margin:6px 0 13px; color:var(--text); font-size:13px; }
#request-detail .detail-meta { margin:14px 0 18px; }
#request-action-form { margin-top:18px; }
#advance-request { margin-top:12px; }
.new-request { display:grid; grid-template-columns:minmax(200px,.75fr) minmax(0,1.25fr); gap:28px; margin-top:18px; background:#f8fbff; }
.new-request h4 { margin:8px 0; }
.new-request p { margin:0; color:var(--text); font-size:13px; }
.new-request form { display:grid; gap:10px; }
.new-request form button { margin-top:5px; }
.next-step { display:flex; align-items:center; justify-content:space-between; gap:35px; margin-bottom:70px; padding:33px 38px; border-radius:20px; color:white; background:linear-gradient(110deg,#0c2850,#075c78); }
.next-step .eyebrow { color:#a5f3fc; }
.next-step h2 { margin:7px 0; font-size:29px; line-height:1.2; }
.next-step p { max-width:670px; margin:0; color:#d5e8f2; }
.next-step .primary-link { flex:none; margin:0; color:#08243b; background:#67e8f9; }
.next-step .primary-link:hover { background:#a5f3fc; }
.site-footer { padding:24px 0; border-top:1px solid var(--line); background:white; color:var(--muted); font-size:14px; }
@media (max-width:950px) { .intro { grid-template-columns:1fr; gap:24px; } .workspace-grid { grid-template-columns:1fr; } .new-request { grid-template-columns:1fr; } .next-step { align-items:flex-start; flex-direction:column; } }
@media (max-width:650px) { .shell { width:min(100% - 28px,1180px); } .header-inner { min-height:68px; } .brand img { width:125px; } .back-link { font-size:13px; } .intro { padding:48px 0 40px; } .intro p { font-size:16px; } .guide-grid,.metrics { grid-template-columns:1fr; } .guide { padding-bottom:42px; } .demo-app { border-radius:16px; } .app-header { align-items:flex-start; flex-direction:column; padding:18px; } .mode-nav { display:grid; grid-template-columns:1fr 1fr; padding:8px 10px 0; } .mode-nav button { padding:8px 5px; font-size:12px; } .workspace { padding:23px 13px; } .panel { padding:17px; } .panel-head label { width:100%; } th,td { padding:11px 7px; font-size:12px; } .new-request form { grid-template-columns:1fr; } .new-request form label:nth-child(2) { grid-column:auto; } .next-step { padding:27px 23px; } .next-step .primary-link { width:100%; } .footer-inner { align-items:flex-start; flex-direction:column; gap:8px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }