:root {
  --navy: #113f5d;
  --blue: #2c78a5;
  --blue-soft: #e8f1f7;
  --ink: #15202b;
  --muted: #607080;
  --line: #d8e1e8;
  --surface: #ffffff;
  --bg: #f3f6f8;
  --success: #1d7b52;
  --warning: #a65c00;
  --danger: #a53030;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(17,63,93,.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 760px; min-height: 100vh; margin: 0 auto; background: var(--bg); padding-bottom: 88px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.icon-button { width: 54px; height: 54px; border: 0; background: white; border-radius: 14px; box-shadow: 0 2px 10px rgba(17,63,93,.08); padding: 4px; }
.icon-button img { width: 100%; height: 100%; object-fit: contain; }
.topbar-title { display: grid; line-height: 1.15; flex: 1; }
.topbar-title strong { font-size: 1.02rem; }
.topbar-title span { font-size: .8rem; color: var(--muted); }
.prototype-pill { background: var(--blue-soft); color: var(--navy); border: 1px solid #c7dce9; padding: 6px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.content { padding: 18px 16px 26px; }
.hero { background: linear-gradient(145deg, #113f5d, #2c78a5); color: white; border-radius: 24px; padding: 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.08); right: -50px; top: -60px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.05; }
.hero p { margin: 0; max-width: 520px; color: rgba(255,255,255,.86); line-height: 1.45; }
.hero .primary { margin-top: 20px; background: white; color: var(--navy); }
.section-title { margin: 24px 2px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.section-title h2 { margin: 0; font-size: 1.12rem; }
.section-title p { margin: 0; color: var(--muted); font-size: .82rem; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px; box-shadow: 0 5px 18px rgba(17,63,93,.05); }
.action-card { text-align: left; border: 1px solid var(--line); width: 100%; }
.action-card .icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--blue-soft); color: var(--navy); font-size: 1.25rem; margin-bottom: 12px; }
.action-card strong { display: block; margin-bottom: 4px; }
.action-card span { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.notice { background: #fff8e8; border: 1px solid #ecd39b; border-radius: 14px; padding: 13px 14px; color: #6c4b0b; font-size: .84rem; line-height: 1.4; }
.notice.info { background: #edf6fb; border-color: #c6dfea; color: #194b68; }
.notice.success { background: #edf8f3; border-color: #b9dfcf; color: #185f41; }
.button-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.primary, .secondary, .ghost, .danger { border: 0; border-radius: 13px; min-height: 48px; padding: 0 17px; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary { background: var(--navy); color: white; }
.secondary { background: var(--blue-soft); color: var(--navy); border: 1px solid #c5dbe8; }
.ghost { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.danger { background: #f8e9e9; color: var(--danger); border: 1px solid #ecc7c7; }
.primary:disabled, .secondary:disabled { opacity: .45; cursor: not-allowed; }
.full { width: 100%; }
.progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.progress span { height: 5px; background: #dce5eb; border-radius: 999px; }
.progress span.active { background: var(--blue); }
.step-kicker { color: var(--blue); font-weight: 800; font-size: .77rem; text-transform: uppercase; letter-spacing: .05em; }
.form-card h2 { margin: 5px 0 4px; }
.form-card > p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.field { display: grid; gap: 7px; }
.field label { font-size: .82rem; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cbd7df; background: white; color: var(--ink); border-radius: 12px; padding: 12px 13px; outline: none; min-height: 47px; }
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44,120,165,.13); }
.field small { color: var(--muted); }
.checkbox { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfd; }
.checkbox input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--navy); }
.checkbox label { line-height: 1.4; font-size: .88rem; }
.fee-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: .88rem; }
.fee-table th, .fee-table td { border: 1px solid #bfd0dc; padding: 11px; vertical-align: top; text-align: left; }
.fee-table th { width: 35%; background: #dce9f1; color: var(--navy); }
.preview-sheet { background: white; border: 1px solid #cfd9e0; border-radius: 12px; padding: 22px; box-shadow: 0 8px 25px rgba(10,40,60,.07); font-family: Arial, sans-serif; font-size: .79rem; line-height: 1.43; }
.preview-header { display: grid; grid-template-columns: 1fr 110px; align-items: start; gap: 12px; border-bottom: 2px solid #b8cbd7; padding-bottom: 10px; }
.preview-header h3 { margin: 0; font-size: 1rem; color: #263744; }
.preview-header img { width: 105px; justify-self: end; }
.preview-sheet p { margin: 10px 0; }
.data-list { display: grid; grid-template-columns: 150px 1fr; gap: 7px 12px; margin: 14px 0; }
.data-list dt { font-weight: 750; }
.data-list dd { margin: 0; border-bottom: 1px solid #9caeb9; min-height: 20px; }
.signature-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.signature { min-height: 86px; border-top: 1px solid #70828d; padding-top: 7px; text-align: center; font-weight: 750; }
.signature small { display: block; font-weight: 400; color: var(--muted); margin-top: 5px; }
.code-box { letter-spacing: .42em; text-align: center; font-size: 1.35rem; font-weight: 800; }
.success-icon { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; margin: 4px auto 16px; background: #e7f7ef; color: var(--success); font-size: 2.1rem; }
.center { text-align: center; }
.folio { display: inline-block; background: var(--blue-soft); color: var(--navy); padding: 8px 12px; border-radius: 10px; font-weight: 850; letter-spacing: .05em; }
.status-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; background: #fff4db; color: var(--warning); }
.status-chip.approved { background: #e8f7ef; color: var(--success); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
.admin-table { width: 100%; min-width: 630px; border-collapse: collapse; background: white; font-size: .82rem; }
.admin-table th, .admin-table td { padding: 11px; border-bottom: 1px solid var(--line); text-align: left; }
.admin-table th { background: #edf3f6; color: var(--navy); }
.admin-table select { border: 1px solid var(--line); border-radius: 9px; padding: 7px; }
.bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(760px,100%); height: 72px; display: grid; grid-template-columns: repeat(4,1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.nav-item { border: 0; background: transparent; color: #73808a; display: grid; place-items: center; gap: 1px; border-radius: 11px; }
.nav-item span { font-size: 1.15rem; }
.nav-item small { font-size: .68rem; }
.nav-item.active { background: var(--blue-soft); color: var(--navy); font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 88px; transform: translate(-50%,20px); background: #17232c; color: white; padding: 11px 15px; border-radius: 11px; opacity: 0; pointer-events: none; transition: .25s; z-index: 99; width: max-content; max-width: calc(100% - 32px); font-size: .84rem; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.hidden { display: none !important; }
@media (max-width: 560px) {
  .grid.two, .form-grid.two { grid-template-columns: 1fr; }
  .preview-sheet { padding: 15px; font-size: .72rem; }
  .preview-header { grid-template-columns: 1fr 86px; }
  .preview-header img { width: 82px; }
  .data-list { grid-template-columns: 112px 1fr; }
  .signature-box { grid-template-columns: 1fr; gap: 34px; }
  .prototype-pill { display: none; }
}
@media print {
  body { background: white; }
  .topbar, .bottom-nav, .button-row, .progress, .step-kicker, .no-print { display: none !important; }
  .app-shell { max-width: none; padding: 0; }
  .content, .card { padding: 0; border: 0; box-shadow: none; }
  .preview-sheet { border: 0; box-shadow: none; padding: 8mm; font-size: 9.4pt; }
}

/* v0.2 · Flujo de revisión y firma de la directiva */
.status-chip.rejected { background: #f9e7e7; color: #9d2f2f; }
.status-chip.observed { background: #fff2d7; color: #8a5a00; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-bottom: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 15px; box-shadow: 0 5px 18px rgba(17,63,93,.05); }
.stat-card span { display: block; color: var(--muted); font-size: .76rem; margin-bottom: 5px; }
.stat-card strong { font-size: 1.5rem; color: var(--navy); }
.admin-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(245px,.72fr); gap: 14px; align-items: start; }
.document-panel { overflow: hidden; }
.decision-panel { position: sticky; top: 85px; }
.decision-panel h3 { margin: 6px 0 4px; }
.muted { color: var(--muted); }
.decision-actions { display: grid; gap: 9px; margin: 16px 0; }
.approval-button { background: #176b4c; }
.approval-button:hover { filter: brightness(.96); }
.resolution-box { border-radius: 11px; padding: 10px 12px; margin: 12px 0; display: grid; gap: 4px; font-size: .78rem; }
.resolution-box.approved { background: #edf8f3; border: 1px solid #b9dfcf; color: #185f41; }
.resolution-box.observed { background: #fff8e8; border: 1px solid #ecd39b; color: #6c4b0b; }
.resolution-box.rejected { background: #f9e9e9; border: 1px solid #e8c2c2; color: #8c2929; }
.approval-screen { max-width: 630px; margin: 0 auto; }
.approval-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 16px 0; }
.approval-summary div { background: #f4f7f9; border: 1px solid var(--line); border-radius: 12px; padding: 11px; }
.approval-summary span { display: block; color: var(--muted); font-size: .72rem; margin-bottom: 4px; }
.approval-summary strong { font-size: .85rem; }
.history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.history-list li { border-left: 3px solid #bdd2df; padding: 5px 0 5px 12px; display: grid; gap: 3px; }
.history-list li strong { font-size: .86rem; }
.history-list li span { font-size: .79rem; color: var(--ink); }
.history-list li small { color: var(--muted); font-size: .7rem; }

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-layout { grid-template-columns: 1fr; }
  .decision-panel { position: static; }
  .approval-summary { grid-template-columns: 1fr; }
}

/* v0.3 */
.admin-toolbar { margin-bottom: 14px; }
.admin-toolbar .button-row { margin-top: 12px; }
.compact-row .secondary, .compact-row .ghost { min-height: 42px; }
.upload-button { cursor: pointer; }
.workflow-box { margin: 13px 0; border: 1px solid #b9d4c7; background: #f1f9f5; border-radius: 10px; padding: 10px 12px; display: grid; gap: 7px; }
.workflow-box > strong { color: #185f41; font-size: .78rem; }
.workflow-box div { display: grid; grid-template-columns: 1fr auto; gap: 12px; border-top: 1px solid #d2e7dc; padding-top: 6px; }
.workflow-box span { color: #4b6558; }
.workflow-box b { text-align: right; }
@media (max-width: 560px) {
  .compact-row { display: grid; grid-template-columns: 1fr; }
  .compact-row > * { width: 100%; }
  .workflow-box div { grid-template-columns: 1fr; gap: 2px; }
  .workflow-box b { text-align: left; }
}

/* v0.4 - conexión real */
code{background:#eef3f6;border-radius:6px;padding:2px 6px;font-size:.9em}
.setup-card{max-width:760px;margin:24px auto}
.section-title.inline{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 18px}
.section-title.inline h2{margin:2px 0}.section-title.inline p{margin:4px 0 0;color:var(--muted,#64748b)}
.success-card{text-align:center;max-width:760px;margin:18px auto}.success-icon{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#e5f7ef;color:#14734d;font-size:38px;font-weight:800}
.request-card{border:1px solid #dfe7ec;border-radius:14px;padding:16px;margin:12px 0;background:#fff}
.request-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.request-card-head div{display:flex;flex-direction:column;gap:3px}.request-card-head strong{font-size:1.02rem}.request-card-head span{color:#5e6f7a}
.request-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0;color:#5e6f7a;font-size:.9rem}
.button-row.compact{margin-top:12px}.button-row.compact button{width:auto}
.admin-tools{display:grid;grid-template-columns:minmax(220px,1fr) minmax(170px,.45fr) auto;gap:10px;margin:14px 0 18px}.admin-tools input,.admin-tools select{width:100%;border:1px solid #cedae1;border-radius:10px;padding:12px;background:#fff}
.dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.dashboard-stats div{padding:14px;border-radius:12px;background:#eef4f7;text-align:center}.dashboard-stats strong{display:block;font-size:1.5rem;color:#154d73}.dashboard-stats span{font-size:.86rem;color:#5e6f7a}
.admin-detail-grid{grid-template-columns:minmax(0,1.65fr) minmax(270px,.7fr);align-items:start}.decision-panel{position:sticky;top:76px}.decision-panel button{margin-bottom:8px}
.history-list{display:flex;flex-direction:column;gap:10px}.history-list>div{border-left:3px solid #9fb9c8;padding-left:10px;display:flex;flex-direction:column}.history-list span{font-size:.9rem;color:#43545f}.history-list small{color:#73838c;margin-top:3px}
.empty-state{padding:26px;text-align:center;border:1px dashed #b8c8d1;border-radius:12px;color:#60717b}
.notice.observed{background:#fff8df;border-color:#e6c663;color:#6b5410}.notice.danger{background:#fff0f0;border-color:#e4a3a3;color:#8a2929}
.warning{background:#f4b740;color:#2f2505;border:0}.warning:hover{filter:brightness(.96)}
.authorization-box{border:1px solid #bfd0da;background:#f7fafc;border-radius:10px;padding:12px;margin:16px 0}.authorization-box p{margin:7px 0 0}
.document-data{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:14px 0;font-size:.92rem}.document-fees{margin:14px 0}
@media (max-width:760px){.admin-tools{grid-template-columns:1fr}.dashboard-stats{grid-template-columns:1fr 1fr 1fr}.admin-detail-grid{grid-template-columns:1fr}.decision-panel{position:static}.document-data{grid-template-columns:1fr}.section-title.inline{flex-direction:column}.request-card-head{align-items:flex-start}.button-row.compact button{width:100%}}
@media (max-width:430px){.dashboard-stats{grid-template-columns:1fr}.prototype-pill{font-size:.72rem}}