/* ============================================================
   Facturas — Johan Acoustic Ceiling
   ============================================================ */

:root{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --ink:#12181f;
  --ink-soft:#5b6775;
  --line:#e2e7ee;
  --brand:#1f5fa8;
  --brand-dark:#17497f;
  --brand-soft:#eaf2fc;
  --danger:#c0392b;
  --ok:#1e8e5a;
  --radius:12px;
  --shadow:0 1px 2px rgba(18,24,31,.06), 0 8px 24px rgba(18,24,31,.05);
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  padding-bottom:4rem;
}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar__inner{
  max-width:900px; margin:0 auto; padding:.9rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.7rem}
.brand__mark{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:var(--brand); color:#fff;
  border-radius:9px; font-weight:700; font-size:.85rem; letter-spacing:.02em;
}
.brand__name{display:block; font-size:.95rem; line-height:1.2}
.brand__sub{display:block; font-size:.78rem; color:var(--ink-soft)}

.saved{
  font-size:.75rem; color:var(--ok); font-weight:600;
  opacity:0; transition:opacity .25s;
}
.saved.is-on{opacity:1}

/* ---------- Layout ---------- */
.wrap{max-width:900px; margin:0 auto; padding:1.5rem 1.25rem}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem;
  margin-bottom:1.1rem;
}
.card__title{
  font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1rem;
}

/* minmax(0,1fr) y no 1fr: si no, los input[type=date] de iOS
   fuerzan la columna a su ancho intrínseco y se salen del cuadro */
.grid{display:grid; gap:.85rem}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Dirección y Ciudad a lo ancho; Estado y ZIP comparten fila */
.grid--addr{grid-template-columns:minmax(0,1fr); margin-top:.85rem}
.grid--statezip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem}

/* ---------- Fields ---------- */
.field{display:flex; flex-direction:column; gap:.3rem}
.field__label{
  font-size:.8rem; font-weight:600; color:var(--ink);
}
.field__label em{font-style:normal; font-weight:400; color:var(--ink-soft)}

input, textarea{
  font:inherit; font-size:.92rem;
  color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:8px;
  padding:.55rem .7rem;
  width:100%; min-width:0;          /* deja encoger dentro del grid */
  transition:border-color .15s, box-shadow .15s;
}

/* Safari en iPhone le da a los date un ancho intrínseco enorme
   y los saca del cuadro: hay que anularlo a mano */
input[type="date"]{
  -webkit-appearance:none; appearance:none;
  min-height:2.45rem;
  text-align:left;
}
input[type="date"]::-webkit-date-and-time-value{text-align:left; margin:0}
input[type="date"]::-webkit-calendar-picker-indicator{margin-left:auto; padding-left:.25rem}
textarea{resize:vertical; line-height:1.45}
input:focus, textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
input::placeholder, textarea::placeholder{color:#a9b3c0}
input.is-error{border-color:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.1)}

/* Aviso pegado al campo que falta, en vez de un mensaje suelto al final */
.field__error{
  display:flex; align-items:center; gap:.3rem;
  font-size:.82rem; font-weight:600; color:var(--danger);
  margin-top:.35rem;
}
.field__error::before{content:"!";
  flex:none; width:15px; height:15px; border-radius:50%;
  background:var(--danger); color:#fff;
  font-size:.68rem; font-weight:700; line-height:15px; text-align:center;
}
/* el aviso de las líneas cuelga de la tabla, no de un input */
.items + .field__error{margin:.5rem 0 0}
.items.is-error{border-color:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.1)}

.hint{font-size:.82rem; color:var(--ink-soft); margin:-.4rem 0 .9rem}
.hint--ac{margin:.6rem 0 0}
.hint--warn{color:#a05a00}

/* ---------- Autocompletado de dirección ---------- */
.ac{position:relative}

.ac__spinner{
  position:absolute; right:.6rem; bottom:.72rem;
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--brand);
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.ac__list{
  position:absolute; top:calc(100% + 4px); left:0;
  z-index:40; margin:0; padding:.25rem; list-style:none;
  width:100%; min-width:290px; max-height:280px; overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 24px rgba(18,24,31,.14);
}

.ac__item{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.5rem .6rem; border-radius:7px; cursor:pointer;
}
.ac__item.is-active{background:var(--brand-soft)}
.ac__street{
  font-size:.89rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ac__meta{
  font-size:.78rem; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Items ---------- */
.items{border:1px solid var(--line); border-radius:10px; overflow:hidden}

.items__head, .item{
  display:grid;
  grid-template-columns:1fr 74px 108px 118px 38px;
  gap:.5rem; align-items:center;
}
.items__head{
  background:#f8fafc; border-bottom:1px solid var(--line);
  padding:.55rem .7rem;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft);
}
.item{padding:.55rem .7rem; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item input{font-size:.88rem; padding:.45rem .55rem}
.item input[type="number"]{text-align:right}
.item .amount{background:#fbfcfe; font-weight:600}
.item .amount.is-manual{background:#fffdf2}

.item__del{
  border:0; background:transparent; cursor:pointer;
  color:#b6bfca; font-size:1.15rem; line-height:1;
  width:30px; height:30px; border-radius:7px;
  transition:background .15s, color .15s;
}
.item__del:hover{background:#fdeceb; color:var(--danger)}

.btn--ghost{margin-top:.8rem}

/* ---------- Totals ---------- */
.totals{
  margin-top:1.1rem; margin-left:auto;
  width:100%; max-width:330px;
  font-size:.92rem;
}
.totals__row{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.45rem 0; border-bottom:1px solid var(--line);
}
/* ---- Fila del impuesto, con interruptor ---- */
.taxctl{display:flex; align-items:center; gap:.45rem; color:var(--ink-soft)}
.taxctl__name{font-weight:500}
.taxinput{width:58px; padding:.25rem .4rem; text-align:right; font-size:.85rem}

/* interruptor on/off */
.switch{
  flex:none; position:relative;
  width:38px; height:22px; padding:0;
  border:0; border-radius:999px; cursor:pointer;
  background:#c9d2dd; transition:background .18s;
}
.switch__dot{
  position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s;
}
.switch[aria-checked="true"]{background:var(--brand)}
.switch[aria-checked="true"] .switch__dot{transform:translateX(16px)}
.switch:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* apagado: la fila se atenúa y el % deja de editarse */
.totals__row--tax.is-off{opacity:.5}
.totals__row--tax.is-off .taxinput{
  background:#f1f4f8; color:var(--ink-soft); pointer-events:none;
}
.totals__row--total{
  border-bottom:0; padding-top:.7rem;
  font-size:1.15rem; font-weight:700;
}
.totals__row--total strong{color:var(--brand)}

/* ---------- Buttons ---------- */
.btn{
  font:inherit; font-size:.9rem; font-weight:600;
  padding:.62rem 1.1rem; border-radius:9px; border:1px solid transparent;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-dark)}
.btn--ghost{background:var(--brand-soft); color:var(--brand); border-color:#cfe1f6}
.btn--ghost:hover{background:#dceafa}
.btn--quiet{background:transparent; color:var(--ink-soft); border-color:var(--line)}
.btn--quiet:hover{background:#fff; color:var(--danger); border-color:#f0c9c5}

.actions{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-top:1.4rem;
}


/* ---------- Responsive ---------- */
/* Safari en iPhone amplía la página al enfocar un campo de menos de 16px.
   Con 16px exactos no hace zoom, y el usuario conserva el zoom manual. */
@media (max-width:900px){
  input, textarea, select{font-size:16px}
  .item input{font-size:16px}
  .taxinput{font-size:16px; width:64px}
}

@media (max-width:760px){
  .grid--2{grid-template-columns:minmax(0,1fr)}
  /* Estado y ZIP siguen juntos también en el móvil */
  .grid--statezip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac__list{min-width:0}

  .items__head{display:none}
  .items{border:0}
  .item{
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    border:1px solid var(--line); border-radius:10px;
    padding:.7rem; margin-bottom:.7rem;
    position:relative;
  }
  .item .desc{grid-column:1 / -1; padding-right:2rem}
  .item .amount{grid-column:1 / -1}
  .item input[type="number"]{text-align:left}
  .item__del{position:absolute; top:.5rem; right:.45rem}

  .totals{max-width:none}
  .actions{flex-direction:column-reverse}
  .actions .btn{width:100%}
}