/* factura-builder.css — fillable form & modal for plantilla-por-oficio pages
   Mobile-first (375px), uses host theme tokens (--surf, --bdr, --indigo-3 etc.) */

.fb-wrap{
  max-width:62rem;margin:0 auto;
}
.fb-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media(min-width:880px){
  .fb-grid{grid-template-columns:1fr 22rem;align-items:start}
  .fb-totals{position:sticky;top:calc(var(--nav-h,4rem) + 1rem)}
}

.fb-card{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:var(--r-xl,1rem);
  padding:1.25rem 1.25rem 1.5rem;
}
@media(min-width:480px){.fb-card{padding:1.5rem}}

.fb-h{
  font-size:.875rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--mute);
  margin:0 0 1rem;
  font-family:var(--font-mono,ui-monospace,monospace);
}

.fb-row{
  display:grid;
  grid-template-columns:1fr;
  gap:.875rem;
  margin-bottom:.875rem;
}
@media(min-width:560px){
  .fb-row{grid-template-columns:repeat(2,1fr)}
}
.fb-row:last-child{margin-bottom:0}

.fb-l{
  display:flex;
  flex-direction:column;
  gap:.375rem;
  font-size:.8125rem;
  font-weight:600;
  color:var(--txt);
}
.fb-l--wide{grid-column:1/-1}
.fb-l--check{
  flex-direction:row;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
}
.fb-l--check input[type="checkbox"]{
  width:1.125rem;height:1.125rem;
  accent-color:var(--indigo-3,#635bff);
  cursor:pointer;
}

.fb-l input,
.fb-l select,
.fb-l textarea{
  font:inherit;
  font-size:.9375rem;
  font-weight:500;
  padding:.625rem .75rem;
  background:var(--bg-2,rgba(255,255,255,.04));
  border:1px solid var(--bdr);
  border-radius:.5rem;
  color:var(--txt);
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-width:0;
  transition:border-color .15s, box-shadow .15s;
}
.fb-l input:focus,
.fb-l select:focus,
.fb-l textarea:focus{
  outline:none;
  border-color:var(--indigo-3,#635bff);
  box-shadow:0 0 0 3px rgba(99,91,255,.15);
}
.fb-l textarea{resize:vertical;min-height:5rem;font-family:inherit}
.fb-l select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%237a7a8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:.75rem;
  padding-right:2rem;
}

.fb-hint{
  font-size:.75rem;
  font-weight:400;
  color:var(--mute);
}

/* Conceptos */
.fb-conceptos{
  display:flex;
  flex-direction:column;
  gap:.875rem;
  margin-bottom:1rem;
}
.fb-concepto{
  display:grid;
  grid-template-columns:1fr;
  gap:.625rem;
  padding:.875rem;
  background:rgba(99,91,255,.03);
  border:1px solid var(--bdr);
  border-radius:.625rem;
  position:relative;
}
@media(min-width:640px){
  .fb-concepto{
    grid-template-columns:minmax(0,1fr) 4.5rem 6rem 4.5rem 1.75rem;
    align-items:end;
  }
}
.fb-l--xs input,.fb-l--xs select{font-size:.8125rem;padding:.5rem .55rem}
.fb-l--sm input{font-size:.875rem}
.fb-rm{
  height:2.4rem;width:2.4rem;
  border:1px solid var(--bdr);
  border-radius:.5rem;
  background:transparent;
  color:var(--mute);
  font-size:1.125rem;
  cursor:pointer;
  align-self:end;
  justify-self:end;
}
@media(min-width:640px){.fb-rm{align-self:end;justify-self:center}}
.fb-rm:hover{border-color:#ef4444;color:#ef4444}

.fb-add{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.625rem 1rem;
  background:transparent;
  border:1px dashed var(--bdr);
  border-radius:.5rem;
  font-size:.875rem;font-weight:600;
  color:var(--txt);
  cursor:pointer;
  width:100%;
  transition:border-color .15s, color .15s;
}
.fb-add:hover{border-color:var(--indigo-3,#635bff);color:var(--indigo-3,#635bff)}

/* Totales sidebar */
.fb-totals{padding:1.25rem}
.fb-tot-list{
  list-style:none;padding:0;margin:0 0 1.25rem;
  display:flex;flex-direction:column;gap:.5rem;
  font-size:.9375rem;
}
.fb-tot-list li{display:flex;justify-content:space-between;align-items:center;color:var(--txt-2)}
.fb-tot-list strong{font-family:var(--font-mono,ui-monospace,monospace);color:var(--txt);font-weight:700}
.fb-tot-irpf strong{color:#ef4444}
.fb-tot-grand{
  border-top:1px solid var(--bdr);
  padding-top:.625rem;margin-top:.25rem;
}
.fb-tot-grand span{font-weight:700;color:var(--txt)}
.fb-tot-grand strong{font-size:1.25rem;color:var(--indigo-3,#635bff)}

.fb-cta{
  width:100%;
  padding:.875rem 1rem;
  background:var(--indigo-3,#635bff);
  color:#fff;
  border:none;
  border-radius:.625rem;
  font-size:1rem;font-weight:700;
  cursor:pointer;
  transition:transform .12s, opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.fb-cta:hover{opacity:.95;transform:translateY(-1px)}
.fb-cta:active{transform:translateY(0)}
.fb-cta:disabled{opacity:.6;cursor:wait}
.fb-disc{
  font-size:.75rem;color:var(--mute);
  text-align:center;margin:.625rem 0 0;line-height:1.4;
}

/* Modal */
.fb-modal{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:1rem;
}
.fb-modal[hidden]{display:none}
.fb-modal-back{
  position:absolute;inset:0;
  background:rgba(8,10,18,.65);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.fb-modal-card{
  position:relative;
  width:min(100%,28rem);
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  background:var(--surf);
  border:1px solid var(--bdr-2,var(--bdr));
  border-radius:1rem;
  padding:1.5rem 1.5rem 1.25rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.fb-modal-x{
  position:absolute;top:.625rem;right:.625rem;
  width:2rem;height:2rem;
  background:transparent;border:none;
  font-size:1.5rem;color:var(--mute);
  cursor:pointer;border-radius:.375rem;
}
.fb-modal-x:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.fb-modal-h{font-size:1.25rem;margin:0 0 .625rem;color:var(--txt)}
.fb-modal-p{
  font-size:.9375rem;color:var(--txt-2);
  line-height:1.55;margin:0 0 1.25rem;
}
.fb-modal-actions{margin-bottom:1.125rem}
.fb-modal-cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:.875rem 1rem;
  background:var(--indigo-3,#635bff);color:#fff;
  text-decoration:none;font-weight:700;font-size:.9375rem;
  border-radius:.625rem;
  transition:opacity .15s;
}
.fb-modal-cta:hover{opacity:.95}

.fb-email-form{
  border-top:1px solid var(--bdr);
  padding-top:1rem;
  display:flex;flex-direction:column;gap:.625rem;
}
.fb-email-btn{
  padding:.625rem 1rem;
  background:transparent;
  border:1px solid var(--bdr);
  border-radius:.5rem;
  color:var(--txt);font-weight:600;font-size:.875rem;
  cursor:pointer;
  transition:border-color .15s;
}
.fb-email-btn:hover{border-color:var(--indigo-3,#635bff);color:var(--indigo-3,#635bff)}
.fb-email-btn:disabled{opacity:.6;cursor:wait}
.fb-email-success{
  font-size:.8125rem;color:#10b981;margin:0;
}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  .fb-cta,.fb-modal-cta,.fb-add{transition:none}
}

/* Light theme adjustments */
[data-theme="light"] .fb-l input,
[data-theme="light"] .fb-l select,
[data-theme="light"] .fb-l textarea{
  background:#fff;
  border-color:#dbdbe6;
  color:#0d0d18;
}
[data-theme="light"] .fb-modal-back{background:rgba(20,22,40,.5)}