/* Experiencia visual; no define comportamiento de agenda, roles ni trabajos. */
header{border-bottom:1px solid var(--color-border);padding:18px max(24px,calc((100% - var(--content-width))/2));}
header p{color:var(--color-muted);font-size:13px;margin-top:6px}
small,.role-label{color:var(--color-muted)}
button,.link{color:var(--color-on-action)}
button.secondary:hover,.link.secondary:hover{background:#e1e6ec}
:focus-visible{outline-color:#64748b}
nav{background:var(--color-surface);padding:12px max(24px,calc((100% - var(--content-width))/2));}
nav button{background:transparent;color:var(--color-text);font-weight:600}
nav button[aria-current="page"]{background:var(--color-action);color:var(--color-on-action)}
nav button.secondary{background:transparent;color:var(--color-muted)}
.brand-lockup{display:flex;gap:9px;align-items:center}
.brand-name{font-size:21px;font-weight:750;letter-spacing:.06em;line-height:1.2}
.brand-version{font-size:12px;color:var(--color-muted);padding:4px 6px;background:var(--color-soft);border-radius:5px}
.official-logo{display:block;object-fit:contain;max-width:100%;width:64px;height:auto}
.brand-lockup--login,.brand-lockup--splash{justify-content:center}
.brand-lockup--login .official-logo{width:150px;height:auto}
.brand-lockup--splash .official-logo{width:196px;height:auto}
.brand-caption{font-size:17px;font-weight:650;letter-spacing:.015em}
.brand-caption small{display:block;font-size:11px;font-weight:400;margin-top:3px}
.brand-lockup--login .brand-name,.brand-lockup--splash .brand-name{font-size:30px;letter-spacing:.075em}
.login{max-width:460px;margin:6vh auto;padding:0 24px}
.login-brand{text-align:center;margin:0 0 30px}
.login-brand p{margin:12px 0;color:var(--color-muted);font-size:14px}
.login-card{padding:32px;border:1px solid var(--color-border);box-shadow:0 12px 36px #23304008;border-radius:18px}
.login-card h2{margin-top:12px;font-size:28px}
.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--color-muted)}
.login form{margin-top:26px;gap:20px}
.login input{border-color:#cbd2da;min-height:52px}
.login-submit{min-height:56px;font-weight:650;width:100%;margin-top:4px}
.login-note{text-align:center;font-size:12px;color:var(--color-muted);margin:22px 0 0}
.login footer{text-align:center;margin:24px 0}
.login-demo-link{display:flex;justify-content:center;margin-top:22px}
.demo-help{padding:16px 18px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);margin-top:20px;font-size:13px}
.demo-help summary{cursor:pointer;font-weight:600;padding:8px 0;min-height:40px}
.demo-banner{border-bottom:1px solid var(--color-border);font-size:12px;padding:9px 5%;line-height:1.4}
.badge{background:var(--color-soft);color:var(--color-text)}
.demo-badge{background:var(--color-demo-background);color:var(--color-demo-text);font-size:11px;font-weight:650}
.status-badge[data-state="Aceptado"],.status-badge[data-state="Finalizado"],.status-badge[data-state="Pagado"]{background:var(--color-status-success-bg);color:var(--color-status-success-text)}
.status-badge[data-state="En revisión"]{background:var(--color-status-warning-bg);color:var(--color-status-warning-text)}
.timeline li:before{background:var(--color-action)}
.notice{border-left-color:#64748b}
#message{background:var(--color-action);color:var(--color-on-action)}
.work-card{border-radius:16px}
.field-preparation{border-top:1px dashed var(--color-border);margin-top:22px;padding-top:16px;color:var(--color-muted);font-size:13px}
.field-preparation strong{font-size:13px;font-weight:600}
.field-preparation p{margin:8px 0;line-height:1.5}
.field-preparation span{font-size:11px;letter-spacing:.015em}
.splash{position:fixed;inset:0;z-index:100;background:var(--color-surface);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px}
.splash[hidden]{display:none}
.splash p{font-size:13px;color:var(--color-muted);margin-top:20px}
.splash-open{overflow:hidden}
.app-loading{text-align:center;padding-top:20vh;color:var(--color-muted)}
@media(max-width:640px){
 header{padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
 .header-brand p{display:none}
 .brand-lockup--header .brand-name{font-size:17px;letter-spacing:.04em}
 .brand-lockup--header .official-logo{width:44px;height:auto}
 .brand-caption{font-size:15px}
 .brand-lockup--header .brand-version{font-size:10px}
 .user-panel{display:contents}
 .user-panel>span{font-size:13px;grid-column:1 / -1;grid-row:2;overflow-wrap:anywhere}
 .role-label{display:inline-block;font-size:11px;margin:0 0 0 8px}
 header #logout{grid-column:2;grid-row:1;font-size:12px;padding:9px 12px;min-height:44px}
 nav{padding:10px 14px;gap:6px}
 nav button{min-height:48px;font-size:13px}
 main{margin-top:24px}
 .login{margin:28px auto;max-width:430px;padding:0 18px}
 .login-brand{margin-bottom:24px}
 .brand-lockup--login .brand-name{font-size:26px}
 .login .login-card{padding:24px 22px;border-radius:16px}
 .login-card h2{font-size:26px}
 .login form{gap:18px}
 .login input{font-size:16px}
 .login-demo-link .link{font-size:14px;min-height:48px}
 .page-heading h2{font-size:26px}
 .work-actions button{min-height:56px}
 body[data-role="Técnico"] .page-heading .muted{font-size:13px}
 body[data-role="Técnico"] .work-card h3{font-size:19px;line-height:1.4}
 body[data-role="Técnico"] .work-grid{gap:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}