/* Portal del Cliente — Alberto Barrios Design Atelier */
:root{
  --bg:#efece4; --surface:#f7f5ef; --surface-2:#e8e4d9;
  --text:#16181d; --text-dim:#6d675b;
  --line:rgba(22,24,29,.12); --line-strong:rgba(22,24,29,.22);
  --accent:#a97e4f; --accent-soft:rgba(178,138,91,.14);
  --good:#5f7d57; --good-soft:rgba(95,125,87,.14);
  --change:#bd6a4c; --change-soft:rgba(189,106,76,.14);
  --display:'Marcellus', Georgia, serif;
  --body:'Jost', system-ui, sans-serif;
  --shadow:0 1px 2px rgba(22,24,29,.05),0 8px 30px rgba(22,24,29,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141519; --surface:#1c1e24; --surface-2:#23262d;
    --text:#f1efe9; --text-dim:#9a9488;
    --line:rgba(241,239,233,.12); --line-strong:rgba(241,239,233,.22);
    --accent:#c39a67; --accent-soft:rgba(195,154,103,.16);
    --good:#86a879; --good-soft:rgba(134,168,121,.16);
    --change:#d98a7b; --change-soft:rgba(217,138,123,.16);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"]{
  --bg:#efece4; --surface:#f7f5ef; --surface-2:#e8e4d9;
  --text:#16181d; --text-dim:#6d675b;
  --line:rgba(22,24,29,.12); --line-strong:rgba(22,24,29,.22);
  --accent:#a97e4f; --accent-soft:rgba(178,138,91,.14);
  --good:#5f7d57; --good-soft:rgba(95,125,87,.14);
  --change:#bd6a4c; --change-soft:rgba(189,106,76,.14);
  --shadow:0 1px 2px rgba(22,24,29,.05),0 8px 30px rgba(22,24,29,.06);
}
:root[data-theme="dark"]{
  --bg:#141519; --surface:#1c1e24; --surface-2:#23262d;
  --text:#f1efe9; --text-dim:#9a9488;
  --line:rgba(241,239,233,.12); --line-strong:rgba(241,239,233,.22);
  --accent:#c39a67; --accent-soft:rgba(195,154,103,.16);
  --good:#86a879; --good-soft:rgba(134,168,121,.16);
  --change:#d98a7b; --change-soft:rgba(217,138,123,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
/* El atributo hidden SIEMPRE gana (si no, display:grid/flex lo ignora y deja
   elementos empalmados: spinner que no para, login encima del home). */
[hidden]{display:none !important}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.15;margin:0;text-wrap:balance}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.eyebrow{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim)}
.eyebrow b{color:var(--accent);font-weight:400}
.lead{color:var(--text-dim);max-width:60ch}

.mark{width:34px;height:34px;border:1px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;font-family:var(--display);font-size:.85rem;letter-spacing:.04em}
.mark.big{width:56px;height:56px;font-size:1.2rem;margin:0 auto 1.2rem}

/* topbar */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:1rem;max-width:1040px;margin:0 auto;
  padding:.8rem clamp(1rem,4vw,2rem)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display)}
.brand small{display:block;font-family:var(--body);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-dim);margin-top:2px}
.spacer{flex:1}
.chip{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft);
  border-radius:999px;padding:.32rem .7rem}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:.78rem;border:1px solid var(--line)}
.linkbtn{font-family:var(--body);font-size:.75rem;letter-spacing:.06em;background:none;border:none;
  color:var(--text-dim);cursor:pointer;padding:.4rem;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--accent)}

/* layout helpers */
.center{min-height:calc(100vh - 0px);display:grid;place-items:center;padding:2rem 1rem}
main#app>.center{min-height:100vh}

/* spinner */
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-strong);
  border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* auth card */
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:2.4rem 2rem;text-align:center}
.auth-card h1{font-size:1.7rem;margin-bottom:.5rem}
.auth-card .sub{color:var(--text-dim);font-size:.92rem;margin:0 auto 1.6rem;max-width:34ch}
.field{display:flex;flex-direction:column;gap:.45rem;text-align:left;margin-bottom:1rem}
.field>span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.field input{width:100%;font-family:var(--body);font-size:.98rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:10px;padding:.8rem .9rem}
.field input:focus{outline:none;border-color:var(--accent)}
.btn{font-family:var(--body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.3rem;border-radius:10px;border:1px solid var(--line-strong);background:transparent;
  color:var(--text);cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.06);color:#fff}
.auth-card .btn.primary{width:100%} /* el botón de login sí ocupa todo el ancho */
.btn:disabled{opacity:.55;cursor:default}
.status{margin:1rem 0 .4rem;font-size:.88rem;min-height:1.2em}
.status.info{color:var(--text-dim)}
.status.ok{color:var(--good)}
.status.err{color:var(--change)}
.back{display:inline-block;margin-top:.8rem;font-size:.8rem;color:var(--text-dim);
  text-decoration:none;letter-spacing:.04em}
.back:hover{color:var(--accent)}

/* home */
.home{padding:clamp(2rem,6vw,4rem) 0}
.home h1{font-size:clamp(2rem,5vw,3rem);margin:.5rem 0 .6rem}
.soon{margin-top:2rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:1.6rem 1.7rem;max-width:640px}
.soon h3{font-size:1.2rem;color:var(--accent);margin-bottom:.5rem}
.soon p{margin:0;color:var(--text-dim)}

/* ===================== app: páginas y componentes ===================== */
.page{padding:clamp(1.6rem,4vw,3rem) 0}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.4rem 0 1.4rem}
.page-head h1{font-size:clamp(1.8rem,4.5vw,2.6rem)}
.head-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
a.btn{text-decoration:none;display:inline-block}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.back-link{background:none;border:none;color:var(--text-dim);font-family:var(--body);font-size:.82rem;
  cursor:pointer;padding:.2rem 0;margin-bottom:.6rem;letter-spacing:.04em}
.back-link:hover{color:var(--accent)}
.muted{color:var(--text-dim)}
.empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:12px;
  padding:1.6rem;color:var(--text-dim);text-align:center}
.empty.err{border-style:solid;border-color:var(--change);color:var(--change)}
.row-end{display:flex;justify-content:flex-end;margin-top:.4rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-title{font-size:1.1rem;color:var(--accent);margin-bottom:.9rem}
.field textarea,.field select{width:100%;font-family:var(--body);font-size:.95rem;color:var(--text);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;padding:.7rem .8rem}
.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field input[type=file]{font-family:var(--body);font-size:.85rem;color:var(--text-dim)}
.btn.ghost:hover{border-color:var(--change);color:var(--change)}

/* tarjetas de proyecto */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.proj-card{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:1.2rem 1.3rem;cursor:pointer;transition:.2s;font-family:var(--body);color:var(--text)}
.proj-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.proj-card h3{font-family:var(--display);font-size:1.2rem;margin:.4rem 0 .3rem}
.proj-card p{margin:0;color:var(--text-dim);font-size:.85rem}
.pc-phase{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.newproj{padding:1.4rem;margin-bottom:1.4rem;display:grid;gap:1rem}

/* vista de proyecto */
.project .phead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;justify-content:space-between;margin-bottom:.4rem}
.project .phead h1{font-size:clamp(1.7rem,4.4vw,2.6rem)}
.loc{color:var(--text-dim);font-size:.92rem}
.phase-pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:.45rem .85rem}
.phase-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tracker{margin:1.6rem 0;display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.step{position:relative;padding-top:1.4rem;text-align:center}
.step .bar{position:absolute;top:6px;left:0;right:0;height:3px;background:var(--surface-2);border-radius:2px}
.step .bar::after{content:"";position:absolute;inset:0;width:0;background:var(--accent);border-radius:2px}
.step.done .bar::after{width:100%}
.step.now .bar::after{width:55%}
.step .num{font-family:var(--body);font-size:.6rem;color:var(--text-dim);letter-spacing:.1em}
.step .lab{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.step.done .lab{color:var(--text)}
.step.now .lab{color:var(--accent)}

/* barra admin + form de avance */
.admin-bar{padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.ab-row{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-end}
.field.inline{gap:.35rem}
.field.inline.grow{flex:1;min-width:220px}
.inline-input{display:flex;gap:.5rem}
.inline-input input{flex:1}
.newupd{padding:1.4rem;margin-bottom:1.8rem;display:grid;gap:1rem}

/* secciones */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:2rem 0 1rem}
.shead h2{font-size:clamp(1.25rem,3vw,1.6rem)}
.shead .count{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}

/* bitácora */
.timeline{display:flex;flex-direction:column;gap:1rem}
.entry{padding:1.2rem 1.3rem}
.entry .meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.entry .date{font-family:var(--body);font-size:.72rem;letter-spacing:.1em;color:var(--text-dim)}
.entry .badge{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem}
.entry h3{font-size:1.15rem;margin-bottom:.35rem}
.entry p{margin:0;color:var(--text-dim);font-size:.92rem}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;margin-top:.9rem}
.thumb{aspect-ratio:1/1;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);
  background-size:cover;background-position:center}
.thumb.loaded{border-color:transparent}

/* aprobaciones */
.approvals{display:flex;flex-direction:column;gap:1rem}
.approve{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1.2rem 1.3rem;border-left:3px solid var(--accent)}
.approve .txt h3{font-size:1.1rem}
.approve .txt p{margin:.3rem 0 0;color:var(--text-dim);font-size:.9rem}
.ap-note{font-style:italic}
.ap-right{display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
.ap-state{font-size:.72rem;letter-spacing:.08em;padding:.3rem .6rem;border-radius:999px}
.ap-state.ok{color:var(--good);background:var(--good-soft)}
.ap-state.ch{color:var(--change);background:var(--change-soft)}
.ap-state.pend{color:var(--text-dim);background:var(--surface-2)}
.btns{display:flex;gap:.5rem;flex-wrap:wrap}

/* comentarios */
.comments{padding:1.3rem 1.4rem}
.thread{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1rem}
.msg{display:flex;gap:.75rem;max-width:82%}
.msg .who{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.66rem;border:1px solid var(--line)}
.msg .who.c{background:var(--surface-2);color:var(--text-dim)}
.msg .who.a{background:var(--accent-soft);color:var(--accent)}
.bubble{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem}
.bubble .n{font-family:var(--body);font-size:.66rem;letter-spacing:.05em;color:var(--text-dim);margin-bottom:.15rem}
.bubble p{margin:0;font-size:.92rem}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg.me .bubble{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.composer{display:flex;gap:.6rem}
.composer input{flex:1;font-family:var(--body);font-size:.92rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:10px;padding:.75rem .9rem}
.composer input:focus{outline:none;border-color:var(--accent)}

/* acciones de editar/borrar en cada avance */
.entry-actions{margin-left:auto;display:flex;gap:.4rem}
.mini{font-family:var(--body);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--line-strong);color:var(--text-dim);border-radius:7px;
  padding:.28rem .6rem;cursor:pointer;transition:.2s}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.mini.danger:hover{border-color:var(--change);color:var(--change)}
.thumb{cursor:pointer}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,11,13,.9);
  display:flex;align-items:center;justify-content:center;padding:2rem}
.lightbox img{max-width:94vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:1rem;right:1.3rem;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.5rem;
  line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.2)}

/* toast */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(150%);
  background:#16181d;color:#f1efe9;padding:.8rem 1.2rem;border-radius:10px;font-size:.85rem;
  box-shadow:0 12px 34px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.9,.3,1);z-index:60}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ============================ COSTOS (admin) ============================ */
.cost-block{margin:1.6rem 0;border-top:1px solid var(--line);padding-top:.4rem}
.cost-block>summary{list-style:none;cursor:pointer;display:flex;align-items:center}
.cost-block>summary::-webkit-details-marker{display:none}
.cost-block>summary h2{display:flex;align-items:center;gap:.5rem}
.cost-toggle{color:var(--accent);font-size:.8rem;transition:transform .2s}
.cost-block[open]>summary .cost-toggle{transform:rotate(180deg)}

.cost-summary{margin:1rem 0}
.cs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.cs-head .field.inline{max-width:260px}
.cstats{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem}
.cstat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.25rem}
.cstat .cs-l{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.cstat .cs-v{font-family:var(--display);font-size:1.15rem}
.cstat.strong .cs-v{color:var(--accent)}
.cstat.dim{opacity:.7}
.cstat.neg .cs-v{color:var(--change)}

/* semáforo */
.sema{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;font-weight:500;white-space:nowrap}
.sema-ok{background:var(--good-soft);color:var(--good)}
.sema-warn{background:var(--accent-soft);color:var(--accent)}
.sema-over{background:var(--change-soft);color:var(--change)}
.sema-none{background:var(--surface-2);color:var(--text-dim)}

/* tablas */
.tbl-wrap{overflow-x:auto;margin:.6rem 0 1.2rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.tbl th,.tbl td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl thead th{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:500;background:var(--surface-2)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.strong{font-weight:500;color:var(--accent)}
.tbl td.neg{color:var(--change)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tfoot td{font-weight:500;border-top:2px solid var(--line-strong);background:var(--surface-2)}
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover{background:var(--accent-soft)}
.tbl input,.tbl select{font-family:var(--body);font-size:.84rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:7px;padding:.32rem .45rem;max-width:120px}
.tbl input.cat-budget{text-align:right}
.tbl input:focus,.tbl select:focus{outline:none;border-color:var(--accent)}
.ex-desc{display:block;font-size:.74rem;color:var(--text-dim);margin-top:.15rem}
.tag{font-size:.72rem;padding:.18rem .5rem;border-radius:6px;font-variant-numeric:tabular-nums}
.tag-ok{background:var(--good-soft);color:var(--good)}
.tag-warn{background:var(--accent-soft);color:var(--accent)}
.tag-over{background:var(--change-soft);color:var(--change)}

.newexp .grid-exp{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}

@media (max-width:720px){
  .grid2{grid-template-columns:1fr}
  .tracker{grid-template-columns:repeat(3,1fr);row-gap:1rem}
  .msg{max-width:100%}
  .cstats{grid-template-columns:repeat(2,1fr)}
  .newexp .grid-exp{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}