@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700&family=Special+Gothic+Expanded+One&family=Caladea:wght@400;700&display=swap");

/* AGH Ibérica — componentes en CSS. Todos los valores salen de tokens.css. */
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 24px; }
.agh-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.agh-stack { display: grid; gap: var(--space-3); padding: var(--space-4); }

/* Cuadradito de marca */
.agh-sq { display: inline-flex; align-items: center; gap: var(--space-2); }
.agh-sq::before { content: ""; width: var(--brand-square); height: var(--brand-square); background: var(--red); flex: none; }
.agh-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }

/* Botones */
.agh-btn { font: inherit; font-size: 15px; font-weight: 600; height: var(--control-h); padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.agh-btn:hover { background: var(--beige); }
.agh-btn:focus-visible, .agh-field:focus-visible, .agh-change:focus-visible, .agh-drop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.agh-btn-primary { background: var(--red-dark); border-color: var(--red-dark); color: var(--on-red); }
.agh-btn-primary:hover { background: var(--red-press); border-color: var(--red-press); }
.agh-btn-ghost { border-color: transparent; }
.agh-btn-ghost:hover { background: var(--beige); }
.agh-btn-danger { border-color: var(--error); color: var(--error); }
.agh-btn-sm { height: 32px; padding: 0 var(--space-3); font-size: 14px; }
.agh-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Campos */
.agh-field-wrap { display: grid; gap: var(--space-1); }
.agh-field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.agh-field-help { font-size: 13px; color: var(--text-muted); }
.agh-field { font: inherit; font-size: 15px; min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-sizing: border-box; width: 100%; }
textarea.agh-field { padding: var(--space-3); line-height: 22px; min-height: 120px; resize: vertical; }
.agh-field-error { border-color: var(--error); }
.agh-field-msg-error { font-size: 13px; color: var(--error); }

/* Zona de subida */
.agh-drop { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-6) var(--space-5); display: grid; justify-items: center; gap: var(--space-2); text-align: center; color: var(--text); }
.agh-drop-over { border-color: var(--red-dark); background: var(--red-soft); }
.agh-drop-icon { width: 40px; height: 40px; border: 2.5px solid var(--red); border-radius: 9px; }
.agh-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }

/* Insignias de estado: siempre icono + palabra */
.agh-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; font-weight: 600; line-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--rejected-soft); color: var(--ink); }
.agh-badge-pending { background: var(--warning-soft); color: var(--warning); }
.agh-badge-accepted { background: var(--accepted-soft); color: var(--accepted); }
.agh-badge-rejected { background: var(--rejected-soft); color: var(--rejected); }
.agh-badge-edited { background: var(--edited-soft); color: var(--edited); }
.agh-badge-locked { background: var(--beige); color: var(--text); }

/* Pasos */
.agh-steps { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: s; flex-wrap: wrap; }
.agh-step { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-muted); padding-right: var(--space-4); }
.agh-step::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.agh-step-done { color: var(--text); }
.agh-step-done::before { content: "✓"; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.agh-step-current { color: var(--ink); font-weight: 600; }
.agh-step-current::before { background: var(--red-dark); border-color: var(--red-dark); color: var(--on-red); }

/* Encaje */
.agh-score { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); align-items: end; padding: var(--space-5); background: var(--beige); border-radius: var(--radius-md); }
.agh-score-num { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.agh-score-num small { font-size: 20px; color: var(--text-muted); }
.agh-score-bar { grid-column: 1 / -1; height: 8px; background: var(--surface); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--line); }
.agh-score-bar > span { display: block; height: 100%; background: var(--red); }

/* Tarjeta de cambio propuesto */
.agh-change { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); }
.agh-change-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.agh-change-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.agh-change-col { min-width: 0; }
.agh-change-col p { margin: var(--space-1) 0 0; font-size: 14px; line-height: 21px; color: var(--text); }
.agh-change-why { font-size: 13px; line-height: 19px; color: var(--text-muted); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.agh-change-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.agh-change-accepted { border-color: var(--accepted); }
.agh-change-rejected { background: var(--paper); }
.agh-change-rejected .agh-change-col-new p { text-decoration: line-through; color: var(--text-muted); }
ins.agh-add { background: var(--diff-add); text-decoration: underline; text-decoration-color: var(--accepted); text-underline-offset: 3px; color: var(--ink); }
del.agh-del { background: var(--diff-del); color: var(--text-muted); }

/* Avisos */
.agh-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--ink); font-size: 14px; line-height: 20px; }
.agh-notice-icon { font-weight: 700; color: var(--warning); }
.agh-notice-error { background: var(--error-soft); }
.agh-notice-error .agh-notice-icon { color: var(--error); }
.agh-notice-info { background: var(--edited-soft); }
.agh-notice-info .agh-notice-icon { color: var(--edited); }
.agh-notice-success { background: var(--accepted-soft); }
.agh-notice-success .agh-notice-icon { color: var(--accepted); }

/* Opción de vacante */
.agh-vacancy { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.agh-vacancy-title { font-weight: 600; color: var(--ink); }
.agh-vacancy-meta { font-size: 13px; color: var(--text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.agh-vacancy-selected { border-color: var(--red-dark); background: var(--red-soft); outline: 1px solid var(--red-dark); }

/* Hoja de la plantilla Word */
.agh-doc { background: var(--doc-paper); color: var(--doc-ink); font-family: var(--font-doc); font-size: 11px; line-height: 1.45; padding: 36px 40px; border: 1px solid var(--line); box-shadow: var(--shadow-card); max-width: 560px; }
.agh-doc-logo { height: 26px; display: block; margin-bottom: 18px; }
.agh-doc-name { font-size: 22px; font-weight: 700; margin: 0; }
.agh-doc-role { color: var(--doc-muted); margin: 2px 0 12px; font-size: 12px; }
.agh-doc-section { color: var(--doc-red); font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--doc-red); padding-bottom: 2px; margin: 14px 0 6px; }
.agh-doc ul { margin: 2px 0; padding-left: 16px; }
.agh-doc-hl { background: var(--diff-add); outline: 1px dashed var(--accepted); outline-offset: 1px; }