/* =====================================================
   Best View Cleaning — style.css (updated compact + print)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --ocean-50:#f5faff;
  --ocean-100:#e6f2ff;
  --ocean-200:#cfe4ff;
  --ocean-300:#a9ccff;
  --ocean-500:#3b82f6;
  --ocean-600:#2563eb;
  --ocean-700:#1d4ed8;

  --foam-50:#f8fafc;
  --foam-100:#f1f5f9;
  --foam-200:#e2e8f0;

  --bg:#f6f8fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;

  --border:#e5e7eb;
  --border-focus:#93c5fd;

  --shadow-xs:0 1px 3px rgba(2,132,199,.07);
  --shadow-sm:0 4px 12px rgba(2,132,199,.10);
  --shadow:0 8px 28px rgba(2,132,199,.13);
  --shadow-lg:0 16px 48px rgba(2,132,199,.18);

  --radius:18px;
  --radius-2:24px;
  --radius-3:14px;
  --radius-pill:999px;
  --max:980px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ── Topbar ── */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 16px rgba(2,132,199,.07);
}
.brand{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 20px 12px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.brand__left{
  display:flex; gap:14px; align-items:center;
}
.logo{
  height:40px;
  width:auto;
  border-radius:10px;
  display:block;
}
.brand__title{font-weight:900;font-size:16px}
.brand__subtitle{color:var(--muted);font-size:12px;margin-top:2px}

/* ── Tabs ── */
.tabs{
  display:flex; gap:5px;
  background:var(--ocean-50);
  padding:5px; border-radius:var(--radius-pill);
  border:1px solid var(--border);
  min-width: 320px;
}
.tab{
  flex:1; border:none; background:transparent;
  color:var(--muted); padding:10px 14px;
  border-radius:var(--radius-pill);
  font-weight:700; font-size:13.5px; cursor:pointer;
  transition:all .2s ease;
}
.tab:hover{color:var(--ocean-600); background:rgba(14,165,233,.07)}
.tab.is-active{
  background:#fff; color:var(--ocean-600);
  box-shadow:0 2px 10px rgba(2,132,199,.14);
  font-weight:800;
}

/* ── Actions right ── */
.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.btn{
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:11px 18px;
  border-radius:var(--radius-3);
  font-weight:700;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:var(--shadow-xs);
  white-space:nowrap;
}
.btn:hover{box-shadow:var(--shadow-sm); transform:translateY(-1px)}
.btn:active{transform:translateY(0); box-shadow:var(--shadow-xs)}
.btn--primary{
  background:linear-gradient(135deg,var(--ocean-500),var(--ocean-700));
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 14px rgba(14,165,233,.35);
}
.btn--secondary{
  background:var(--foam-50);
  border-color:var(--foam-200);
  color:var(--ocean-700);
}
.btn--ghost{
  background:transparent;
  border-style:dashed;
  border-color:var(--ocean-300);
  color:var(--muted);
  box-shadow:none;
}
.btn--danger{
  background:#ef4444;
  border-color:transparent;
  color:#fff;
}
.btn--danger:hover{background:#dc2626}

/* ── Container / views ── */
.container{max-width:var(--max); margin:0 auto; padding:20px}
.view{display:none}
.view.is-active{display:block}

/* ── Toolbar ── */
.toolbar{
  display:flex; gap:10px; align-items:center;
  justify-content:space-between; flex-wrap:wrap;
  margin:8px 0 16px;
}

/* ── Search ── */
.search{flex:1; min-width:220px}
.search input{
  width:100%;
  padding:12px 18px;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
  font-size:14px;
  box-shadow:var(--shadow-xs);
}
.search input:focus{
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(14,165,233,.12);
}
.search input::placeholder{color:var(--muted)}

/* ── Cards ── */
.cards{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:720px){
  .cards{grid-template-columns:1fr 1fr}
}
.card{
  background:var(--panel);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.card__top{display:flex; justify-content:space-between; gap:10px}
.card__title{font-weight:800; font-size:15px}
.card__meta{color:var(--muted); font-size:13px; margin-top:5px; line-height:1.5}
.card__actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}

/* ── Client Cards ── */
.client-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.client-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
  border-color:var(--ocean-200);
}
.client-card__head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.client-card__name{font-weight:800; font-size:15px; color:var(--text)}
.client-card__name .muted{font-weight:500; font-size:13px}
.client-card__meta{display:flex; flex-direction:column; gap:3px; font-size:13.5px; line-height:1.5}
.client-card__meta .muted{font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
.client-card__addrs{
  display:flex;
  flex-direction:column;
  gap:7px;
}
/* Cada domicilio = su propio bloque */
.addrblock{
  background:var(--ocean-50);
  border:1.5px solid var(--ocean-100);
  border-radius:10px;
  padding:8px 12px;
}
.addrblock__alias{
  font-size:12px; font-weight:800;
  color:var(--ocean-700);
  margin-bottom:3px;
  text-transform:uppercase; letter-spacing:.4px;
}
.addrblock__line{
  font-size:13px; color:var(--text);
  font-weight:500; line-height:1.4;
}
.addrblock__meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:4px;
  font-size:12px; color:var(--muted);
}
/* Botón Maps inline */
.addr-maps-btn{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:700;
  color:var(--ocean-600);
  background:#fff;
  border:1.5px solid var(--ocean-200);
  border-radius:999px;
  padding:2px 9px;
  text-decoration:none;
  transition:background .15s, border-color .15s;
  white-space:nowrap;
  margin-left:auto;
}
.addr-maps-btn:hover{
  background:var(--ocean-100);
  border-color:var(--ocean-600);
}
.addrline{font-size:12.5px; color:var(--ocean-700); font-weight:500}
.client-card__actions{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-top:8px;
  border-top:1px solid var(--border);
}

/* ── Panel ── */
.panel{
  background:var(--panel);
  border:1.5px solid var(--border);
  border-radius:var(--radius-2);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel__header{
  padding:20px 22px;
  border-bottom:1.5px solid var(--border);
  background:linear-gradient(135deg,var(--foam-50),#fff);
}
.panel__header h2{margin:0 0 6px; font-size:20px; font-weight:900}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* ── Form ── */
.form{padding:20px 22px}
.grid{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:720px){
  .grid{grid-template-columns:1fr 1fr}
  .field.full{grid-column:1 / -1}
}
.field{display:block}
.field span{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.field input, .field select, .field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-3);
  border:1.5px solid var(--border);
  background:var(--foam-50);
  color:var(--text);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--border-focus);
  background:#fff;
  box-shadow:0 0 0 3px rgba(14,165,233,.10);
}
.field.inline{display:flex; gap:10px; align-items:center}
.field.inline span{margin:0; width:80px}
.field.inline select{min-width:180px}

.divider{height:1px; background:var(--border); margin:18px 0}

/* ── Line Items (COMPACT widths) ── */
.line-items{
  margin-top:12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
}
.line-items__head{
  display:grid;
  grid-template-columns: 1.4fr .9fr 105px .9fr 100px 80px 36px;
  gap:8px;
  padding:10px 14px;
  background:linear-gradient(to right,var(--foam-50),#fff);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1.5px solid var(--border);
}
.line{
  display:grid;
  grid-template-columns: 1.4fr .9fr 105px .9fr 100px 80px 36px;
  gap:8px;
  padding:9px 14px;
  border-top:1px solid var(--border);
  background:#fff;
  transition:background .15s;
  align-items:center;
}
.line:hover{background:var(--foam-50)}
/* En desktop, los .line__field son transparentes - solo se ve el input/select */
.line__field{display:contents}
.line__label{display:none}
.line input, .line select{
  border-radius:10px;
  padding:9px 10px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-family:inherit;
  outline:none;
  width:100%;
}
.line input[type="number"]{text-align:right}
/* Subtotal read-only por fila */
.line__subtotal{display:contents}
.line__sub-val{
  text-align:right;
  font-weight:700;
  font-size:13px;
  color:var(--ocean-700);
  padding:0 4px;
}

.icon-btn{
  width:38px; height:38px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  display:grid;
  place-items:center;
  transition:all .18s;
}
.icon-btn:hover{border-color:#fca5a5; background:#fef2f2; color:#ef4444}
.right{text-align:right}

@media (max-width:720px){
  .line-items__head{display:none}
  /* Cada line es un bloque compacto con grid 2 cols */
  .line{
    display:flex; flex-direction:column; gap:0;
    padding:12px;
    position:relative;
  }
  /* display:contents en desktop, flex en mobile */
  .line__field{
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 0;
    border-bottom:1px solid var(--border);
  }
  .line__field:last-of-type{border-bottom:none}
  .line__label{
    display:block;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--muted);
    width:72px;
    flex-shrink:0;
  }
  .line input, .line select{
    flex:1;
    padding:9px 10px;
    font-size:14px;
    min-width:0;
  }
  /* Subtotal: mostrar inline al lado del label */
  .line__subtotal{display:flex; align-items:center; gap:8px; padding:6px 0 2px}
  .line__sub-val{font-size:15px; font-weight:800; color:var(--ocean-600); flex:1; text-align:right}
  /* Trash: esquina superior derecha */
  .line .trash{
    position:absolute; top:10px; right:10px;
    width:36px; height:36px;
    font-size:16px;
    border-radius:8px;
  }
}

/* ── Totals ── */
.totals{display:flex; justify-content:flex-end; margin-top:14px}
.totals__row{
  width:240px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border:1.5px solid var(--ocean-200);
  border-radius:var(--radius-3);
  background:linear-gradient(135deg,var(--foam-50),#fff);
  box-shadow:var(--shadow-xs);
}
.totals__row strong{font-size:18px; color:var(--ocean-600)}
.actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

/* ── Modal ── */
.modal::backdrop{background:rgba(15,23,42,.52); backdrop-filter:blur(4px)}
.modal{border:none; padding:0; width:min(840px,94vw); border-radius:var(--radius-2); background:transparent}
.modal__content{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius-2);
  padding:20px;
  box-shadow:var(--shadow-lg);
}
.modal__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1.5px solid var(--border);
  margin-bottom:16px;
}
.modal__header h3{margin:0; font-size:18px; font-weight:900}

/* ── Domicilios ── */
.doms__head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.doms h4{margin:0; font-size:15px; font-weight:800}
.casas-wrap{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.casa{
  border:1.5px solid var(--ocean-200);
  border-radius:var(--radius);
  background:var(--ocean-50);
  padding:14px;
  transition:box-shadow .2s;
}
.casa:hover{box-shadow:var(--shadow-sm)}
.casa__grid{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:720px){
  .casa__grid{grid-template-columns:1fr 1fr 1fr}
  .casa__grid .full{grid-column:1 / -1}
}
.casa__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

/* ── Historial ── */
.table{
  border:1.5px solid var(--border);
  border-radius:var(--radius-2);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
/* cols: invoice | fecha | cliente | técnico | estatus | total | acciones */
.hist-head,
.hist-row{
  display:grid;
  grid-template-columns: 130px 100px 1fr 120px 118px 100px 150px;
  gap:10px;
  padding:13px 16px;
  align-items:center;
}
.hist-head{
  background:linear-gradient(to right,var(--foam-50),#fff);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1.5px solid var(--border);
}
.hist-row{
  border-top:1px solid var(--border);
  transition:background .15s;
  font-size:13.5px;
}
.hist-row:hover{background:var(--foam-50)}
.hist-invoice{font-weight:700; font-family:monospace; font-size:13px; color:var(--ocean-700)}
.hist-date{color:var(--muted); font-size:13px}
.hist-client{font-weight:600}
.hist-tech{color:var(--muted); font-size:13px}
.hist-total{font-weight:700; font-size:14px}
.hist-actions{display:flex; gap:6px; justify-content:flex-end}
.hist-empty{padding:40px; text-align:center; color:var(--muted); font-size:14px}

/* Pill status */
.pill-status{
  display:inline-block;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  font-size:11px;
  font-weight:800;
  border:1.5px solid var(--border);
  background:#f1f5f9;
  color:var(--muted);
  white-space:nowrap;
}
.pill-status.s-pending,
.pill-status.s-pendiente  {border-color:#fde68a; background:#fffbeb; color:#92400e}
.pill-status.s-scheduled,
.pill-status.s-programado {border-color:var(--ocean-200); background:var(--ocean-50); color:var(--ocean-700)}
.pill-status.s-completed,
.pill-status.s-concluido  {border-color:#a7f3d0; background:#ecfdf5; color:#065f46}
.pill-status.s-cancelled,
.pill-status.s-cancelado  {border-color:#fecaca; background:#fef2f2; color:#991b1b}

.btn-sm{padding:7px 12px; font-size:12px}

/* Responsive historial */
@media (max-width:900px){
  .hist-head{display:none}
  .hist-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "invoice date"
      "client  client"
      "tech    status"
      "total   actions";
    gap:8px; padding:14px;
  }
  .hist-invoice{grid-area:invoice}
  .hist-date   {grid-area:date; text-align:right}
  .hist-client {grid-area:client}
  .hist-tech   {grid-area:tech}
  .hist-row > div:nth-child(5){grid-area:status}
  .hist-total  {grid-area:total}
  .hist-actions{grid-area:actions}
}

/* ── Mobile general (max 600px) ── */
@media (max-width:600px){
  /* Topbar compacto */
  .brand{padding:10px 14px; gap:8px}
  .tabs{min-width:0; gap:3px}
  .tab{padding:8px 10px; font-size:12px}
  .top-actions .btn{padding:8px 12px; font-size:12px}

  /* Container con menos padding */
  .container{padding:12px}

  /* Panel del form */
  .panel__header{padding:14px 16px}
  .panel__header h2{font-size:17px}
  .form{padding:14px 16px}

  /* Grid de campos: 1 col en móvil */
  .grid{grid-template-columns:1fr !important}

  /* Line items: usar estilos del bloque 720px */
  .line-items{border-radius:12px}

  /* Total */
  .totals{margin-top:10px}
  .totals__row{width:100%; font-size:16px}

  /* Botones de acciones del form */
  .actions{flex-direction:column; gap:8px}
  .actions .btn{width:100%; justify-content:center; text-align:center; padding:14px}

  /* Modal ancho completo */
  .modal{width:95vw}
  .modal__content{padding:14px}

  /* Clientes: 1 col */
  .cards{grid-template-columns:1fr !important}

  /* Historial: ocultar head, mostrar cards */
  .hist-head{display:none}
  .hist-row{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px;
    border-top:1px solid var(--border);
  }
  .hist-invoice{font-size:14px}
  .hist-actions{justify-content:flex-start; margin-top:4px}
}

/* ── Print overlay ── */
.print-area{
  position:fixed; inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  display:none;
  padding:16px;
  overflow:auto;
  z-index:9999;
}
.print-area.is-open{display:block}

/* Vista previa (compacta) */
.invoice{
  max-width: 620px;
  margin:0 auto;
  background:#fff;
  color:#111;
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow-lg);
}
.invoice__top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:2px solid var(--border);
  padding-bottom:10px;
}
.invoice__title{font-weight:900; font-size:18px; color:var(--ocean-700)}
.invoice__subtitle{font-size:11px; color:#4b5563; margin-top:3px}
.invoice__mail-addr{
  text-align:center;
  font-size:11px;
  color:#374151;
  line-height:1.6;
  padding:4px 10px;
  border-left:2px solid var(--border);
  border-right:2px solid var(--border);
}
.invoice__mail-title{font-weight:900; font-size:11px; margin-bottom:2px; color:#111827}
.invoice__meta{min-width:200px; text-align:right}
.badge{
  display:inline-block;
  padding:5px 12px;
  background:var(--ocean-50);
  border:1.5px solid var(--ocean-200);
  border-radius:var(--radius-pill);
  font-weight:900;
  font-size:10px;
  color:var(--ocean-700);
}
.meta-row{margin-top:5px; font-size:11px; color:#111827}
.meta-row span{color:#6b7280}

.invoice__mid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px 0;
}
.box{
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:var(--foam-50);
}
.box__title{
  font-weight:900;
  font-size:10px;
  color:var(--ocean-700);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.box__row{font-size:11px; margin-top:5px; color:#111827}
.box__row span{color:#6b7280}
.box__note{
  border:1.5px dashed var(--ocean-300);
  border-radius:10px;
  padding:8px;
  font-size:11px;
  min-height:48px;
  margin-top:6px;
  background:#fff;
}

.invoice__table{
  border:1.5px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.invoice__table .thead,
.invoice__table .tfoot{
  background:var(--foam-50);
  font-weight:900;
  font-size:10px;
  color:var(--ocean-700);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.invoice__table .thead,
.invoice__table .trow,
.invoice__table .tfoot{
  display:grid;
  grid-template-columns: 1.1fr 54px 1.8fr 88px;
  gap:8px;
  padding:8px 10px;
  align-items:center;
}
.invoice__table .trow{
  background:#fff;
  border-top:1px solid var(--border);
  font-size:11px;
  color:#111827;
}
.invoice__table .tfoot{border-top:1.5px solid var(--border)}

.invoice__bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
  align-items:end;
}
.pay,.sign{
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:var(--foam-50);
}
.pay__title{
  font-weight:900;
  font-size:10px;
  color:var(--ocean-700);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.pay__row{font-size:11px; margin-top:7px}
.sign__text{font-weight:900; font-size:11px; margin-bottom:10px; color:var(--ocean-700)}
.sign__line{height:32px; border-bottom:2px solid var(--ocean-300); margin-bottom:6px}
.invoice__actions{
  margin-top:14px;
  border-top:1.5px solid var(--border);
  padding-top:14px;
}
.invoice__actions-hint{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-bottom:10px;
}
.invoice__actions-btns{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.invoice__actions-btns .btn--primary{
  padding:14px 24px;
  font-size:15px;
}

/* ── Print (MEDIA CARTA) ── */
/* ────────────────────────────────────────────────
   PRINT  –  Media carta 5.5 × 8.5 in  vertical
   @page margin:0 elimina URL / título / fecha/hora
   del browser. El espacio se repone con padding
   en el .invoice.
──────────────────────────────────────────────── */
/* ────────────────────────────────────────────────
   PRINT  –  Carta 8.5 × 11 in
   Dos modos:
   • invoice  → original arriba + copia abajo
   • list     → tabla de servicios filtrada
──────────────────────────────────────────────── */
/* ════════════════════════════════════════════════
   PRINT  —  Carta 8.5 × 11 in
   Original arriba · Línea de corte · Copia abajo
════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   PRINT — Carta 8.5 × 11 in
   @page margin:0 elimina URL/fecha/hora del browser
   El espacio se repone con padding en .invoice
════════════════════════════════════════════════ */
@page {
  size: 8.5in 11in portrait;
  margin: 0;                    /* ← esto quita header/footer del browser */
}

@media print {

  /* 1 — Ocultar todo excepto área activa */
  body > *:not(#printArea):not(#printListArea) { display: none !important; }
  body { background: #fff !important; margin: 0; padding: 0; }

  /* 2 — printArea ocupa la hoja completa */
  #printArea {
    display: block !important;
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 8.5in !important;
    overflow: visible !important;
  }

  /* 3 — Modo lista */
  #printListArea { display: none !important; }
  body[data-print-mode="list"] #printArea     { display: none !important; }
  body[data-print-mode="list"] #printListArea { display: block !important; }

  /* 4 — Cada invoice tiene su propio padding como margen real
         Fuente más grande para personas mayores — ~11px base */
  .invoice {
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 8.5in !important;
    max-width: 8.5in !important;
    padding: 0.2in 0.35in !important;   /* ← márgenes reales aquí */
    margin: 0 !important;
    overflow: visible !important;
    page-break-inside: avoid;
  }

  /* 5 — Línea de corte entre original y copia */
  .cut-line {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    border-top: 1.5px dashed #94a3b8;
    border-bottom: 1.5px dashed #94a3b8;
    font-size: 9px;
    color: #94a3b8;
    letter-spacing: 1.5px;
    margin: 0;
    width: 8.5in;
  }

  /* 6 — Ocultar botones */
  .no-print,
  .invoice__actions { display: none !important; }

  /* 7 — Tipografía legible — base 11px */
  .invoice__top     { padding-bottom: 8px; gap: 10px; border-bottom-width: 1.5px; }
  .invoice__title   { font-size: 15px; font-weight: 900; }
  .invoice__subtitle{ font-size: 10px; margin-top: 2px; }
  .invoice__mail-addr { font-size: 10px; padding: 4px 10px; }
  .invoice__mail-title{ font-size: 10px; font-weight: 900; margin-bottom: 2px; }
  .meta-row         { font-size: 10px; margin-top: 3px; }
  .badge            { font-size: 9px; padding: 3px 8px; }

  /* Sección cliente / job */
  .invoice__mid   { gap: 6px; padding: 6px 0; }
  .box            { padding: 7px 9px; border-radius: 5px; }
  .box__title     { font-size: 9px; margin-bottom: 4px; letter-spacing: .5px; }
  .box__row       { font-size: 11px; margin-top: 3px; }    /* ← legible */
  .box__note      { font-size: 11px; min-height: 26px; padding: 4px 6px; line-height: 1.5; }

  /* Tabla de conceptos */
  .invoice__table .thead,
  .invoice__table .trow,
  .invoice__table .tfoot {
    font-size: 11px;
    padding: 5px 7px;
    gap: 6px;
    grid-template-columns: 1.4fr 36px 2fr 70px;
  }
  .invoice__table .thead { font-size: 9px; padding: 5px 7px; font-weight: 800; }
  .invoice__table { border-radius: 5px; }

  /* Pie: pago + firma */
  .invoice__bottom { gap: 6px; margin-top: 7px; }
  .pay, .sign      { padding: 7px 9px; border-radius: 5px; }
  .pay__title      { font-size: 9px; margin-bottom: 4px; }
  .pay__row        { font-size: 11px; margin-top: 5px; }    /* ← legible */
  .sign__text      { font-size: 11px; margin-bottom: 8px; font-weight: 700; }
  .sign__line      { height: 22px; }
  .tiny            { font-size: 9px; }
  .pay__mail       { font-size: 10px; margin-top: 7px; padding-top: 7px; }

  * { -webkit-print-color-adjust: exact !important;
          print-color-adjust: exact !important; }
}

/* ── Toast ── */
#toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#0f172a;
  color:#fff;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:700;
  box-shadow:var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:99999;
  white-space:nowrap;
}
#toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}