/* Barra superior fija con pestañas; vista principal (calendario / trabajos / equipo) y ficha de trabajo con fotos antes/después en dos columnas */
:root{
  --bg:#f3f5f8; --surface:#ffffff; --surface-2:#eaeef3; --ink:#15202b; --muted:#5a6775; --line:#d6dde5;
  --accent:#1c5cc8; --accent-ink:#ffffff; --accent-soft:#e2ebfa;
  --st-prog:#5f6f80; --st-curso:#b86e00; --st-term:#1d8047; --st-env:#5b3fbf; --danger:#c0362c;
  --f-display:"Segoe UI Semibold","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --r:10px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0e1319; --surface:#161d25; --surface-2:#1e2731; --ink:#e6ecf2; --muted:#97a4b2; --line:#2a3541;
  --accent:#6f9ff0; --accent-ink:#0a1220; --accent-soft:#1a2942;
  --st-prog:#9aa8b6; --st-curso:#f0a43a; --st-term:#4cc47f; --st-env:#a58cf5; --danger:#f0766c; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em;font-weight:650}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
header.top .wrap{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand .mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--accent) 0 50%,var(--st-curso) 50% 100%);flex:none}
.brand h1{font-size:18px}
.brand small{display:block;color:var(--muted);font-size:12px}
nav.tabs{display:flex;gap:4px;background:var(--surface-2);padding:3px;border-radius:9px}
nav.tabs button{border:0;background:transparent;padding:6px 12px;border-radius:7px;cursor:pointer;color:var(--muted);font-weight:500}
nav.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0/.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);padding:8px 13px;border-radius:8px;cursor:pointer;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--ink);min-height:38px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--danger)}
.btn.danger.armed{background:var(--danger);border-color:var(--danger);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{padding:4px 10px;font-size:13px;min-height:32px}
main{padding-block:18px 60px}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;color:var(--st);background:color-mix(in srgb,var(--st) 14%,transparent);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--st)}
.st-programado{--st:var(--st-prog)} .st-en_curso{--st:var(--st-curso)} .st-terminado{--st:var(--st-term)} .st-enviado{--st:var(--st-env)}
.notice{padding:28px;border:1px dashed var(--line);border-radius:var(--r);text-align:center;color:var(--muted);background:var(--surface)}
.notice h3{color:var(--ink);margin-bottom:6px;font-size:17px}
.offline{background:color-mix(in srgb,var(--st-curso) 18%,var(--surface));color:var(--ink);padding:8px 12px;border-radius:8px;margin-bottom:12px;font-size:13px}

/* login */
.login{max-width:380px;margin:8vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.login .brand{margin-bottom:18px}
.login form{display:flex;flex-direction:column;gap:12px}
.login label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
.login input{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:16px}
.login p{font-size:13px;color:var(--muted);margin:0 0 6px}

/* resumen */
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.summary button{all:unset;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.summary button[aria-pressed="true"]{border-color:var(--st);box-shadow:inset 0 0 0 1px var(--st)}
.summary b{font-family:var(--f-display);font-size:24px;font-variant-numeric:tabular-nums}
.summary span{font-size:12px;color:var(--muted)}
@media (max-width:620px){.summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* calendario */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cal-head h2{font-size:20px;min-width:170px;text-transform:capitalize}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line);gap:1px}
.cal .dow{background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 8px;font-weight:600}
.cal .day{background:var(--surface);min-height:104px;padding:5px;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0;border:0;text-align:left}
.cal .day.out{background:var(--surface-2);color:var(--muted)}
.cal .day .n{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;width:22px;height:22px;display:grid;place-items:center;border-radius:50%}
.cal .day.today .n{background:var(--accent);color:var(--accent-ink)}
.cal .day.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.chip{font-size:11.5px;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--st) 13%,transparent);border-left:3px solid var(--st);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.more{font-size:11px;color:var(--muted)}
.dots{display:none;gap:3px;flex-wrap:wrap}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--st)}
@media (max-width:700px){.cal .day{min-height:58px}.cal .day .chip,.cal .day .more{display:none}.dots{display:flex}}
.dayList{margin-top:18px}
.dayList h3{font-size:15px;margin-bottom:8px;text-transform:capitalize}

/* lista */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tools input[type=search]{flex:1 1 220px;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.jobs{display:flex;flex-direction:column;gap:8px}
.job{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;cursor:pointer;text-align:left;width:100%}
.job:hover{border-color:var(--muted)}
.job .when{font-variant-numeric:tabular-nums;font-size:13px}
.job .when b{display:block;font-family:var(--f-display);font-size:15px}
.job .what{min-width:0}
.job .what b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job .what span{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job .side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.photocount{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.photocount.warn{color:var(--st-curso);font-weight:600}
@media (max-width:560px){.job{grid-template-columns:minmax(0,1fr) auto}.job .when{grid-column:1/-1;display:flex;gap:8px;align-items:baseline}.job .when b{display:inline}}

/* ficha */
.back{margin-bottom:12px}
.dhead{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.dhead .t{flex:1 1 300px;min-width:0}
.dhead h2{font-size:24px}
.dhead select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-height:38px}
.eyebrow{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.panel h3{font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0}
dl.kv dt{color:var(--muted);font-size:13px}
dl.kv dd{margin:0;overflow-wrap:anywhere}
.clock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.clock div{background:var(--surface-2);border-radius:8px;padding:8px 10px}
.clock b{display:block;font-family:var(--f-display);font-size:17px;font-variant-numeric:tabular-nums}
.clock span{font-size:12px;color:var(--muted)}
.photos{margin-top:14px}
.ph-col h3 .count{margin-left:auto;font-family:var(--f-body);font-weight:500;font-size:12px;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.thumb{position:relative;border-radius:8px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;padding:0;display:block;text-align:left}
.thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.thumb .cap{font-size:11px;padding:4px 6px;font-variant-numeric:tabular-nums;color:var(--muted);line-height:1.3}
.thumb .cap b{color:var(--ink);font-weight:600}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--line);border-radius:8px;aspect-ratio:4/3;cursor:pointer;color:var(--muted);font-size:13px;text-align:center;padding:8px}
.drop:hover{border-color:var(--accent);color:var(--accent)}
.drop b{font-size:22px;line-height:1}
.drop input{display:none}
.uploading{font-size:12px;color:var(--accent);margin-bottom:8px}
.gps{font-size:11px;color:var(--st-term)}

/* modal */
.overlay{position:fixed;inset:0;background:rgb(10 15 20/.55);z-index:20;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:max(24px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 24px max(12px,env(safe-area-inset-left,0px))}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:640px;padding:18px 20px;box-shadow:0 20px 50px rgb(0 0 0/.3)}
.modal h2{font-size:19px;margin-bottom:14px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);font-weight:500;min-width:0}
.form input,.form select,.form textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-width:0;width:100%;font-size:15px}
.form textarea{min-height:70px;resize:vertical}
.form fieldset{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0}
.form legend{font-size:12.5px;color:var(--muted);padding:0 4px}
.checks{display:flex;flex-wrap:wrap;gap:6px 14px}
.checks label{flex-direction:row;align-items:center;color:var(--ink);font-size:14px;font-weight:400}
.checks input{width:auto}
.section-t{grid-column:1/-1;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px;border-top:1px solid var(--line);padding-top:10px}
.section-t.first{border:0;margin:0;padding:0}
.hours{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.modal .actions .left{margin-right:auto}
@media (max-width:520px){.form{grid-template-columns:minmax(0,1fr)}}
.err{color:var(--danger);font-size:13px;margin-top:8px}

.lightbox{position:fixed;inset:0;z-index:30;background:rgb(0 0 0/.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lightbox img{max-height:76vh;max-width:100%;border-radius:6px}
.lightbox .meta{color:#dfe6ee;font-size:13px;text-align:center}
.lightbox a{color:#9cc2ff}
.lightbox .row .btn{background:#222a33;color:#fff;border-color:#3a4552}
.lightbox .row .btn.danger.armed{background:#c0362c}

.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.member{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.member.off{opacity:.55}
.member b{font-family:var(--f-display);font-size:16px}
.member code{font-size:13px;background:var(--surface-2);padding:1px 6px;border-radius:5px}

#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:9px;z-index:40;font-weight:500;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.modal{animation:pop .16s ease-out}@keyframes pop{from{transform:translateY(8px);opacity:.6}}}

/* parte del pintor, pasos y exportación */
.parte{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:6px}
.parte:first-of-type{border-top:0;padding-top:0}
.parte p{margin:0;overflow-wrap:anywhere}
.parte .m2{display:flex;gap:16px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.parte .m2 b{font-family:var(--f-display);font-size:18px}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tags span{font-size:12px;background:var(--surface-2);border-radius:99px;padding:2px 9px}
.res-terminado{--st:var(--st-term)} .res-pendiente{--st:var(--st-curso)} .res-incidencia{--st:var(--danger)}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.steps span{font-size:13px;padding:5px 11px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.steps span.ok{color:var(--st-term);border-color:color-mix(in srgb,var(--st-term) 45%,var(--line));font-weight:600}
.exlist{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:8px}
.exrow{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-top:1px solid var(--line);cursor:pointer}
.exrow:first-child{border-top:0}
.exrow input{margin-top:3px}
.exrow .warn{color:var(--st-curso)}