:root {
	color-scheme: light;
	--color-red: #b5122b;
	--color-red-dark: #870d20;
	--color-blue: #4f58a8;
	--color-orange: #df7500;
	--color-coral: #e95a3c;
	--color-ink: #29272a;
	--color-muted: #625d60;
	--color-line: #e6dfe1;
	--color-paper: #fff;
	--color-canvas: #f8f5f5;
	--color-success: #17633e;
	--color-success-bg: #e9f5ed;
	--color-error: #8d1c25;
	--color-error-bg: #fff0f0;
	--shadow-panel: 0 8px 26px rgb(51 20 27 / 7%);
	font-family: Arial, Helvetica, sans-serif;
	color: var(--color-ink);
	background: var(--color-canvas);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
a { color: var(--color-red-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; }

.skip-link { position: absolute; z-index: 20; top: 0.75rem; left: 0.75rem; padding: 0.75rem 1rem; transform: translateY(-160%); border-radius: 0.5rem; color: var(--color-paper); background: var(--color-ink); }
.skip-link:focus { transform: translateY(0); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.25rem; padding: 0.7rem max(1rem, calc((100vw - 72rem) / 2)); border-bottom: 4px solid var(--color-red); background: var(--color-paper); }
.site-header__brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--color-ink); font-size: 1rem; font-weight: 700; text-decoration: none; }
.site-header__brand img { display: block; width: 3.8rem; height: 3.8rem; object-fit: contain; }
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; }
.site-header__logout { margin: 0; }
.main-content { width: min(100% - 2rem, 72rem); min-height: calc(100vh - 9.5rem); margin: 0 auto; padding: 2.4rem 0 3rem; }
.site-footer { padding: 1rem; color: var(--color-muted); text-align: center; font-size: 0.88rem; }
.site-footer p { margin: 0; }
.site-footer__credit { margin-top: 0.35rem !important; font-size: 0.82rem; }
.site-footer__credit a { color: var(--color-red-dark); font-weight: 700; }

.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.page-heading h1, .login-panel h1, .message-panel h1 { margin: 0 0 0.55rem; color: var(--color-red-dark); font-size: clamp(1.65rem, 4vw, 2.3rem); line-height: 1.14; }
.page-heading p, .login-panel > p:not(.eyebrow) { margin: 0; color: var(--color-muted); line-height: 1.55; }
.eyebrow { margin: 0 0 0.45rem; color: var(--color-blue); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.panel { padding: clamp(1.15rem, 3vw, 1.75rem); border: 1px solid var(--color-line); border-radius: 1rem; background: var(--color-paper); box-shadow: var(--shadow-panel); }
.login-panel, .message-panel { width: min(100%, 34rem); margin: 2rem auto; }
.login-panel h1 { margin-bottom: 0.75rem; }
.login-panel__setup { margin-top: 1rem !important; padding-left: 0.85rem; border-left: 3px solid var(--color-orange); color: var(--color-muted); font-size: 0.92rem; }
.login-panel .form-stack { margin-top: 1.5rem; }
.button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1rem; border: 1px solid transparent; border-radius: 0.65rem; cursor: pointer; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: var(--color-paper); background: var(--color-red); }
.button--primary:hover { background: var(--color-red-dark); }
.button--secondary { border-color: #d7d4e9; color: #3d468f; background: #f3f3fb; }
.button--secondary:hover { background: #e8e8f6; }
.button--quiet { border-color: var(--color-line); color: var(--color-ink); background: var(--color-paper); }
.button--quiet:hover { border-color: #c7babe; background: #fbf8f8; }
.button--full { width: 100%; min-height: 3.2rem; }

.form-stack { display: grid; gap: 1.5rem; }
.form-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-section legend { width: 100%; margin-bottom: 1rem; padding: 0 0 0.65rem; border-bottom: 1px solid var(--color-line); color: var(--color-ink); font-size: 1.15rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.form-field { display: flex; min-width: 0; flex-direction: column; gap: 0.4rem; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { font-size: 0.95rem; font-weight: 700; }
.form-field label span[aria-hidden="true"] { color: var(--color-red); }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.8rem; border: 1px solid #bcb4b7; border-radius: 0.55rem; color: var(--color-ink); background: var(--color-paper); }
.form-field textarea { min-height: 5rem; resize: vertical; line-height: 1.45; }
.form-field small, .field-hint { color: var(--color-muted); font-size: 0.83rem; font-weight: 400; line-height: 1.4; }
.form-note { margin: -0.6rem 0 0; color: var(--color-muted); font-size: 0.9rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.7rem; padding-top: 0.4rem; }
.notice { margin: 0 0 1.25rem; padding: 0.9rem 1rem; border: 1px solid; border-radius: 0.7rem; line-height: 1.5; }
.notice--error { border-color: #e7b5b8; color: var(--color-error); background: var(--color-error-bg); }
.notice--success { border-color: #b7dbc3; color: var(--color-success); background: var(--color-success-bg); }
.notice ul { margin: 0.4rem 0 0; padding-left: 1.35rem; }
.notice p { margin: 0; font-weight: 700; }

.filter-panel { margin-bottom: 1.6rem; }
.filter-panel h2, .section-heading h2 { margin: 0; font-size: 1.15rem; }
.filter-form { display: grid; grid-template-columns: minmax(11rem, 0.8fr) minmax(14rem, 1.3fr) auto auto; align-items: end; gap: 0.8rem; margin-top: 1rem; }
.filter-form .form-field input, .filter-form .form-field select { min-height: 2.9rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.85rem; }
.section-heading p { margin: 0; color: var(--color-muted); }
.agreement-cards { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.agreement-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: 0.86rem; }
.status-pill { display: inline-flex; align-items: center; padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 0.82rem; font-weight: 800; }
.status-pill--pendiente { color: #754600; background: #fff3d9; }
.status-pill--enviado { color: #155c39; background: #e4f3e9; }
.agreement-card h3 { margin: 0.8rem 0 0.35rem; font-size: 1.15rem; }
.agreement-card > p { margin: 0; color: var(--color-muted); line-height: 1.5; white-space: pre-line; }
.agreement-card__sent { margin-top: 0.55rem !important; color: var(--color-success) !important; font-size: 0.88rem; }
.agreement-card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.agreement-card__actions form { margin: 0; }
.empty-state h3 { margin: 0 0 0.4rem; }
.empty-state p { margin: 0 0 1rem; color: var(--color-muted); }

.document-toolbar { display: flex; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.document-toolbar__actions { display: flex; gap: 0.6rem; }
.file-share { position: relative; overflow: hidden; cursor: pointer; }
.file-share__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.file-share:focus-within { outline: 3px solid var(--color-blue); outline-offset: 3px; }
.contract { position: relative; isolation: isolate; display: flex; flex-direction: column; max-width: 52rem; min-height: 70rem; margin: 0 auto; padding: 2rem 2.7rem 1.45rem; border: 1px solid var(--color-line); background: var(--color-paper); box-shadow: var(--shadow-panel); font-family: Georgia, 'Times New Roman', serif; font-size: 0.95rem; line-height: 1.43; }
.contract > :not(.contract__watermark) { position: relative; z-index: 1; }
.contract__watermark { position: absolute; z-index: 0; top: 30%; left: 50%; width: 58%; height: auto; transform: translateX(-50%); opacity: 0.065; pointer-events: none; }
.contract__header { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-red); font-family: Arial, Helvetica, sans-serif; }
.contract__header img { display: block; width: 3.4rem; height: 3.4rem; object-fit: contain; }
.contract__brand { display: grid; gap: 0.1rem; color: var(--color-blue); line-height: 1.15; }
.contract__brand strong { font-size: 1rem; letter-spacing: 0.025em; }
.contract__brand span { color: var(--color-red); font-size: 0.77rem; font-weight: 700; letter-spacing: 0.04em; }
.contract__intro { margin: 1.5rem 0 1.05rem; }
.contract h1 { margin: 0; color: var(--color-ink); font-family: Arial, Helvetica, sans-serif; font-size: 1.12rem; line-height: 1.3; text-transform: uppercase; }
.contract h2 { margin: 1.05rem 0 0.45rem; color: var(--color-ink); font-family: Arial, Helvetica, sans-serif; font-size: 0.96rem; letter-spacing: 0.06em; text-transform: uppercase; }
.contract p { margin: 0.64rem 0; }
.contract__date { margin: 0.65rem 0 0 !important; color: var(--color-muted); font-size: 0.9rem; }
.contract__clauses { display: grid; gap: 0.58rem; padding-left: 1.35rem; }
.contract__clauses li { padding-left: 0.2rem; }
.contract__clauses li::marker { color: var(--color-ink); font-weight: 700; }
.contract__signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; margin-top: 1.5rem; break-inside: avoid; }
.signature { min-width: 0; padding-top: 0.55rem; }
.signature__label { color: var(--color-ink); font-family: Arial, Helvetica, sans-serif; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.signature__space { height: 3.5rem; margin: 0.35rem 0; border-bottom: 1px solid #aaa; }
.signature p { margin: 0.3rem 0; }
.contract__footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--color-red); color: var(--color-muted); font-family: Arial, Helvetica, sans-serif; font-size: 0.67rem; }
.document-hint { max-width: 52rem; margin: 1rem auto 0; color: var(--color-muted); text-align: center; line-height: 1.5; }
.signing-panel { max-width: 52rem; margin: 0 auto 1rem; }
.signing-panel h2, .sign-form h2 { margin: 0 0 0.45rem; color: var(--color-red-dark); font-size: 1.2rem; }
.signing-panel > p { margin: 0 0 0.9rem; line-height: 1.5; }
.signing-status { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 1rem; }
.signing-status span { padding: 0.45rem 0.7rem; border-radius: 0.35rem; background: var(--color-canvas); }
.signing-panel__ready { color: var(--color-success); font-weight: 700; }
.signing-links { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.signing-links__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 0.55rem; margin: 0.8rem 0; }
.signing-links__item label { grid-column: 1 / -1; font-weight: 700; }
.signing-links__item input { width: 100%; min-width: 0; min-height: 2.9rem; padding: 0.55rem; border: 1px solid var(--color-line); border-radius: 0.4rem; }
.sign-intro, .sign-form { max-width: 52rem; margin: 0 auto 1rem; }
.sign-intro p { margin: 0.3rem 0; }
.sign-form { margin-top: 1rem; }
.sign-form > p { line-height: 1.5; }
.sign-form__label, .sign-form__typed label { display: block; margin: 1rem 0 0.4rem; font-weight: 700; }
.sign-form__canvas { max-width: 600px; border: 2px solid var(--color-line); border-radius: 0.45rem; background: #fff; }
.sign-form__canvas canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.sign-form__typed { max-width: 600px; margin: 1rem 0; }
.sign-form__typed input { display: block; width: 100%; min-height: 3rem; padding: 0.6rem; border: 1px solid var(--color-line); border-radius: 0.4rem; }
.sign-form__typed small { display: block; margin-top: 0.35rem; color: var(--color-muted); }
.sign-form__consent { display: flex; align-items: flex-start; gap: 0.65rem; margin: 1.1rem 0; line-height: 1.45; }
.sign-form__consent input { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; margin: 0.1rem 0 0; }
.sign-form__feedback { margin-top: 0.7rem; color: var(--color-error); font-weight: 700; }

@media (max-width: 700px) {
	.site-header { min-height: 4.4rem; padding-inline: 0.8rem; }
	.site-header__brand { font-size: 0.9rem; }
	.site-header__brand img { width: 3.1rem; height: 3.1rem; }
	.site-header__actions { gap: 0.35rem; }
	.site-header__actions .button { min-height: 2.7rem; padding: 0.55rem 0.65rem; font-size: 0.82rem; }
	.site-header__logout .button { min-height: 2.7rem; padding-inline: 0.7rem; font-size: 0.88rem; }
	.main-content { width: min(100% - 1.1rem, 42rem); padding-top: 1.35rem; }
	.page-heading { align-items: flex-start; flex-direction: column; gap: 0.9rem; }
	.page-heading > .button { width: 100%; }
	.form-grid { grid-template-columns: 1fr; }
	.form-field--wide { grid-column: auto; }
	.filter-form { grid-template-columns: 1fr 1fr; }
	.filter-form .button { width: 100%; }
	.agreement-card__top { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
	.agreement-card__actions { display: grid; grid-template-columns: 1fr; }
	.agreement-card__actions form, .agreement-card__actions button, .agreement-card__actions a { width: 100%; }
	.document-toolbar { align-items: stretch; flex-direction: column; }
	.document-toolbar > .button { width: 100%; }
	.document-toolbar__actions { display: grid; grid-template-columns: 1fr 1fr; }
	.contract { min-height: 0; padding: 1.4rem 1.1rem; font-size: 0.88rem; }
	.contract__header img { width: 3.3rem; height: 3.3rem; }
	.contract__brand strong { font-size: 0.95rem; }
	.contract__brand span { font-size: 0.7rem; }
	.contract h1 { font-size: 1.15rem; }
	.contract__signatures { gap: 1rem; }
	.signing-links__item { grid-template-columns: 1fr 1fr; }
	.signing-links__item input { grid-column: 1 / -1; }
	.signing-links__item .button { width: 100%; }
}

@media (max-width: 420px) {
	.filter-form { grid-template-columns: 1fr; }
	.document-toolbar__actions { grid-template-columns: 1fr; }
	.contract__signatures { grid-template-columns: 1fr; gap: 0.8rem; }
	.contract__footer { flex-direction: column; gap: 0.15rem; }
}

@media print {
	@page { size: A4; margin: 12mm 14mm; }
	body { min-width: auto; background: white; }
	.skip-link, .site-header, .site-footer, .no-print, .document-toolbar, .document-hint, .sign-intro, .sign-form { display: none !important; }
	.main-content { width: auto; min-height: 0; margin: 0; padding: 0; }
	.contract { width: 100%; max-width: none; height: 268mm; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; font-size: 9.35pt; line-height: 1.28; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	.contract__watermark { top: 72mm; width: 110mm; opacity: 0.055; }
	.contract__header { padding: 0 0 2mm; }
	.contract__header img { width: 15mm; height: 15mm; }
	.contract__brand strong { font-size: 11pt; }
	.contract__brand span { font-size: 8pt; }
	.contract__intro { margin: 6mm 0 4mm; }
	.contract h1 { font-size: 11pt; }
	.contract h2 { margin: 3mm 0 1.5mm; font-size: 9pt; }
	.contract p { margin: 1.8mm 0; }
	.contract__date { font-size: 8pt; }
	.contract__clauses { gap: 1.6mm; margin: 1mm 0; padding-left: 5mm; }
	.contract__clauses li { break-inside: avoid; }
	.contract__signatures { grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 4mm; }
	.signature { padding-top: 1.5mm; }
	.signature__label { font-size: 7.5pt; }
	.signature__space { height: 13mm; margin: 1mm 0; }
	.contract__footer { flex-direction: row; margin-top: auto; padding-top: 1.5mm; font-size: 6.5pt; }
}