:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17202a;
  background: #f4f6f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: #f4f6f8; }

.shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }

.topbar { color: #fff; background: linear-gradient(115deg, #173b55, #155b63); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.2rem 0; }
.eyebrow { margin: 0 0 .35rem; color: #4d7783; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar .eyebrow { color: #a9d9d8; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.phase-badge, .status-chip { display: inline-flex; align-items: center; border-radius: 999px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.phase-badge { padding: .5rem .8rem; color: #d9f7ef; background: #ffffff18; border: 1px solid #ffffff35; }

.page { display: grid; gap: 1rem; padding: 1.5rem 0 2.5rem; }
.notice { padding: 1rem 1.15rem; color: #22445a; background: #e6f3f5; border: 1px solid #c0e1e3; border-radius: 12px; }
.notice p { margin: .35rem 0 0; color: #426474; line-height: 1.5; }
.feedback { padding: .85rem 1rem; border-radius: 10px; font-weight: 650; }
.feedback.success { color: #155d42; background: #e4f6ed; border: 1px solid #bde5cf; }
.feedback.error { color: #8c2c2c; background: #fff0f0; border: 1px solid #f0c5c5; }
.feedback[hidden], [hidden] { display: none !important; }

.panel { padding: 1.35rem; background: #fff; border: 1px solid #dce4e8; border-radius: 14px; box-shadow: 0 8px 26px #17202a0a; }
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.25rem; }
.assessment-heading { align-items: center; }
.muted { color: #647782; font-size: .85rem; }
.form-grid { display: grid; gap: .9rem; }
.request-meta { grid-template-columns: minmax(220px, 420px); }
label { display: grid; gap: .38rem; color: #455862; font-size: .78rem; font-weight: 750; }
input, select { width: 100%; min-height: 2.55rem; padding: .62rem .7rem; color: #17202a; font: inherit; font-size: .92rem; background: #fff; border: 1px solid #bdcbd1; border-radius: 8px; outline: 0; }
input:focus, select:focus { border-color: #1a7276; box-shadow: 0 0 0 3px #1a727622; }
.section-label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.35rem 0 .7rem; color: #24495a; font-size: .82rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.line-list { display: grid; gap: .7rem; }
.line-row { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(150px, 1fr) minmax(210px, 1.5fr) minmax(100px, .55fr) auto; align-items: end; gap: .65rem; padding: .75rem; background: #f8fafb; border: 1px solid #e0e8eb; border-radius: 10px; }
.button { min-height: 2.55rem; padding: .62rem .95rem; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 800; transition: transform .12s ease, filter .12s ease; }
.button:hover { filter: brightness(.96); }
.button:active { transform: translateY(1px); }
.button-primary { color: #fff; background: #176d70; }
.button-secondary { color: #22545d; background: #e6f1f2; border: 1px solid #bcdadd; }
.icon-button { width: 2.55rem; height: 2.55rem; padding: 0; color: #8b3b3b; background: #fff1f1; border: 1px solid #efcaca; border-radius: 8px; cursor: pointer; font-size: 1.4rem; line-height: 1; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.inline-form { display: flex; align-items: end; gap: .75rem; max-width: 650px; }
.grow { flex: 1; }
.status-chip { padding: .5rem .75rem; }
.status-pending { color: #775b0a; background: #fff3c9; }
.status-todo { color: #156244; background: #dff5e8; }
.status-parcial { color: #8a5310; background: #fff0cb; }
.status-no-hay { color: #8c2c2c; background: #ffe2e2; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.summary-card { padding: .85rem; background: #f8fafb; border: 1px solid #e0e8eb; border-radius: 10px; }
.summary-card strong { display: block; margin-top: .2rem; font-size: 1.15rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { padding: .75rem .65rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e5ecef; }
th { color: #61747d; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
td strong { display: block; color: #1f4659; }
td small { display: block; margin-top: .25rem; color: #6f8088; }
.line-status { display: inline-block; padding: .28rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 850; }
.confirmation-block { margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid #e3eaed; }
.confirmation-grid { grid-template-columns: 1.2fr 1.1fr .85fr 1fr; align-items: end; }
.confirmation-actions { grid-column: 1 / -1; }
.footer { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 2rem; color: #6b7b83; font-size: .75rem; }

@media (max-width: 820px) {
  .line-row { grid-template-columns: 1fr 1fr; }
  .description-field { grid-column: 1 / -1; }
  .remove-line { grid-column: 2; justify-self: end; }
  .confirmation-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 1.2rem, 1180px); }
  .topbar-inner, .panel-heading, .footer { align-items: flex-start; flex-direction: column; }
  .inline-form, .confirmation-grid, .summary-grid, .request-meta { display: grid; grid-template-columns: 1fr; max-width: none; }
  .inline-form .button { width: 100%; }
  .line-row { grid-template-columns: 1fr; }
  .description-field, .remove-line, .confirmation-actions { grid-column: auto; }
  .remove-line { justify-self: start; }
  th, td { min-width: 105px; }
}