:root{
  --tinta:#12211c; --tinta-2:#4a5b54; --tinta-3:#8a978f;
  --papel:#f4f2ec; --tarjeta:#ffffff; --linea:#e2ded3;
  --cobre:#9c5b2e; --cobre-cl:#f3e6da;
  --verde:#2f7d5b; --verde-cl:#e3f0e8;
  --ambar:#a9791a; --ambar-cl:#f6ecd6;
  --azul:#2f5d7d; --azul-cl:#e1ebf1;
  --rojo:#a3372f; --rojo-cl:#f6e3e1;
  --gris-cl:#eeece5;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--papel);color:var(--tinta);font-family:var(--sans);line-height:1.5;padding:24px 16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto}

.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.marca{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:8px;background:var(--tinta);color:var(--papel);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;letter-spacing:.5px}
.marca small{display:block;color:var(--tinta-3);font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.marca strong{font-size:15px;font-weight:600}
.quien{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta-2)}
select,input,textarea{font-family:inherit;color:var(--tinta)}
.quien select{font-size:13px;padding:7px 10px;border:1px solid var(--linea);border-radius:8px;background:var(--tarjeta)}

.titulo{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.titulo h1{font-size:22px;font-weight:600;letter-spacing:-.3px}
.titulo p{font-size:13px;color:var(--tinta-2)}

.obra-sel{margin-bottom:16px}
.obra-sel label{display:block;font-size:11.5px;color:var(--tinta-2);margin-bottom:4px;font-weight:600}
.obra-sel select{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:8px;background:var(--tarjeta);font-size:14px}

button{font-family:inherit;cursor:pointer;border:none;font-weight:600;transition:.15s}
.btn{background:var(--tinta);color:var(--papel);font-size:13px;padding:9px 15px;border-radius:8px}
.btn:hover{background:#1d3830}
.btn.cobre{background:var(--cobre)}.btn.cobre:hover{background:#834a24}
.btn.ghost{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.btn.ghost:hover{background:var(--tarjeta)}
.btn.mini{font-size:12px;padding:7px 12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{background:none;color:var(--cobre);font-size:12.5px;padding:3px 4px;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.link.gris{color:var(--tinta-3)}

.plano{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;margin-bottom:14px;overflow:hidden}
.phead{padding:16px 18px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.phead .cod{font-size:12px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.phead .nom{font-size:16px;font-weight:600;margin:2px 0 6px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}
.b-vig{background:var(--verde-cl);color:var(--verde)}
.b-rev{background:var(--ambar-cl);color:var(--ambar)}
.b-propio{background:var(--cobre-cl);color:var(--cobre)}
.b-cliente{background:var(--azul-cl);color:var(--azul)}
.revbig{text-align:right;white-space:nowrap}
.revbig .n{font-size:20px;font-weight:700;color:var(--tinta)}
.revbig small{display:block;font-size:11px;color:var(--tinta-3)}

.pbody{border-top:1px solid var(--linea);padding:14px 18px;background:#fbfaf6}
.seccion{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tinta-3);margin:2px 0 8px;font-weight:700}
.seccion.mt{margin-top:18px}

.rev{display:flex;gap:11px;padding:8px 0 2px;border-bottom:1px dashed var(--linea);align-items:baseline;flex-wrap:wrap}
.rev:last-of-type{border-bottom:0}
.rev .et{font-weight:700;font-size:13px;min-width:52px;font-variant-numeric:tabular-nums}
.rev.super .et,.rev.super .tx{color:var(--tinta-3)}
.rev .tx{font-size:13px;flex:1;min-width:160px}
.rev .tx small{display:block;color:var(--tinta-2);font-size:11.5px}
.tacha{text-decoration:line-through}
.chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--gris-cl);color:var(--tinta-3);text-transform:uppercase;letter-spacing:.3px}
.chip.vig{background:var(--verde-cl);color:var(--verde)}

.archivos{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.archivo-item{display:inline-flex;align-items:center;gap:4px;background:var(--gris-cl);border-radius:8px;padding:2px 4px 2px 8px;font-size:11.5px}
.archivo-item .link{padding:2px 2px}
.adjuntar{width:100%;padding:4px 0 8px}
.adjuntar label.link{cursor:pointer}

.vacio{font-size:12.5px;color:var(--tinta-3);font-style:italic;padding:4px 0}

.form{background:var(--papel);border:1px solid var(--linea);border-radius:10px;padding:12px;margin-top:10px}
.form.oculto{display:none}
.campo{margin-bottom:9px}
.campo label{display:block;font-size:11.5px;color:var(--tinta-2);margin-bottom:3px;font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;padding:8px 10px;border:1px solid var(--linea);border-radius:7px;background:#fff;font-size:13px}
.campo textarea{resize:vertical;min-height:44px}
.g2{display:flex;gap:9px}.g2>*{flex:1}
.formbtns{display:flex;gap:8px;margin-top:4px}

.rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.addplano{width:100%;background:var(--tarjeta);border:1.5px dashed var(--linea);color:var(--tinta-2);padding:14px;border-radius:12px;font-size:13.5px;font-weight:600}
.addplano:hover{border-color:var(--cobre);color:var(--cobre)}
.pie{margin-top:16px;font-size:12px;color:var(--tinta-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pie button{background:none;color:var(--tinta-3);font-size:12px;text-decoration:underline}

/* Login */
.login-wrap{max-width:360px;margin:14vh auto 0}
.login-card{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;padding:26px 24px}
.login-card h1{font-size:18px;font-weight:600;margin-bottom:4px}
.login-card p{font-size:13px;color:var(--tinta-2);margin-bottom:18px}
.login-card .btn{width:100%;padding:11px;font-size:14px;margin-top:6px}
.error-msg{color:var(--rojo);font-size:12.5px;margin-top:8px;min-height:16px}
.cargando{opacity:.6;pointer-events:none}