/* ============================================================
   GENERIPRINTER — Cotizador (panel privado)
   Usa los tokens de styles.css (--electric, --navy, --orange...)
   ============================================================ */

:root{
  --panel-bg: rgba(6, 13, 40, 0.72);
  --panel-line: rgba(160, 190, 255, 0.18);
  --input-bg: rgba(3, 8, 28, 0.62);
  --input-line: rgba(160, 190, 255, 0.26);
  --danger: #FF4D4D;
  --ok: #35D07F;
}

.app-body{ min-height:100vh; }

/* ============================================================
   PANTALLA DE ACCESO
   ============================================================ */
.lockscreen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
.lockscreen[hidden]{ display:none; }

.lock-card{
  width:100%;
  max-width:430px;
  background:rgba(6, 13, 40, 0.82);
  border:1px solid var(--panel-line);
  border-radius:20px;
  padding:38px 32px 28px;
  text-align:center;
  backdrop-filter: blur(14px);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.lock-logo{
  width:96px;
  margin:0 auto 22px;
  background:var(--logo-bg);
  border-radius:16px;
  padding:12px;
}
.lock-logo img{ width:100%; }

.lock-eyebrow{
  margin:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
}
.lock-title{
  font-size:1.6rem;
  margin:8px 0 6px;
  line-height:1.2;
}
.lock-lead{
  margin:0 0 26px;
  font-size:.9rem;
  color:var(--paper-dim);
}

.lock-submit{ width:100%; margin-top:6px; }

.lock-msg{
  min-height:20px;
  margin:14px 0 0;
  font-size:.85rem;
  color:var(--orange-2);
}
.lock-msg.ok{ color:var(--ok); }

.lock-blocked{
  margin-top:20px;
  padding:20px 16px;
  border:1px solid rgba(255,77,77,.35);
  background:rgba(255,77,77,.08);
  border-radius:14px;
}
.lock-blocked[hidden]{ display:none; }
.lock-blocked-icon{ display:block; width:30px; margin:0 auto 8px; color:var(--danger); }
.lock-blocked-icon svg{ width:100%; }
.lock-blocked-title{ margin:0; font-weight:700; font-family:var(--font-display); }
.lock-blocked-sub{ margin:4px 0 10px; font-size:.82rem; color:var(--paper-dim); }
.lock-countdown{
  margin:0;
  font-family:var(--font-mono);
  font-size:2rem;
  font-weight:600;
  letter-spacing:.06em;
  color:#fff;
}

.lock-blocked-nota{
  margin:12px 0 0;
  font-size:.72rem;
  line-height:1.4;
  color:var(--paper-dim);
}

.lock-back{
  display:inline-block;
  margin-top:24px;
  font-size:.82rem;
  color:var(--paper-dim);
}
.lock-back:hover{ color:#fff; }
.lock-back-btn{
  background:none;
  border:0;
  cursor:pointer;
  font-family:var(--font-body);
}

/* ============================================================
   CAMPOS
   ============================================================ */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  margin-bottom:14px;
}
.field-label{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.field-label .opt{ text-transform:none; letter-spacing:0; font-weight:400; opacity:.7; }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid var(--input-line);
  background:var(--input-bg);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:.95rem;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{ resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,212,255,.16);
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(201,211,242,.42); }
.field select option{ background:var(--navy-2); color:var(--paper); }
.field input[type="date"]{ color-scheme:dark; }

.pass-wrap{ position:relative; display:block; }
.pass-wrap input{ padding-right:46px; }
.pass-toggle{
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--paper-dim);
  padding:0;
}
.pass-toggle svg{ width:20px; }
.pass-toggle:hover{ color:#fff; }

/* ============================================================
   ESTRUCTURA DE LA APP
   ============================================================ */
.app[hidden]{ display:none; }

.app-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(4, 9, 30, 0.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-line);
}
.app-header-inner{
  max-width:1340px;
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  gap:20px;
}
.app-brand{
  background:var(--logo-bg);
  border-radius:10px;
  padding:8px 12px;
  flex-shrink:0;
}
.app-brand img{ height:26px; width:auto; }

.app-tabs{ display:flex; gap:6px; flex:1; flex-wrap:wrap; }
.app-tab{
  background:none;
  border:1px solid transparent;
  color:var(--paper-dim);
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:600;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:.15s;
}
.app-tab:hover{ color:#fff; background:rgba(255,255,255,.06); }
.app-tab.is-active{
  color:#fff;
  background:rgba(0,64,255,.35);
  border-color:rgba(0,212,255,.4);
}
.tab-count{
  display:inline-block;
  min-width:19px;
  padding:1px 5px;
  margin-left:5px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-family:var(--font-mono);
  font-size:.72rem;
}

.btn-lock{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:none;
  border:1px solid var(--input-line);
  color:var(--paper-dim);
  padding:8px 14px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  flex-shrink:0;
}
.btn-lock svg{ width:16px; }
.btn-lock:hover{ color:#fff; border-color:var(--cyan); }

.app-main{
  max-width:1340px;
  margin:0 auto;
  padding:28px 24px 80px;
}

.view{ display:none; }
.view.is-active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ============================================================
   PANELES
   ============================================================ */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  border-radius:16px;
  padding:22px;
  margin-bottom:18px;
  backdrop-filter:blur(10px);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.panel-head h2{
  font-size:1.05rem;
  letter-spacing:.01em;
}
.panel-note{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--paper-dim);
  letter-spacing:.04em;
}
.panel-sub{
  margin:-8px 0 16px;
  font-size:.84rem;
  color:var(--paper-dim);
}

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; }
.field-wide{ grid-column:1 / -1; }

.cot-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
  align-items:start;
}
.cot-side{ position:sticky; top:86px; }

.ajustes-layout{ max-width:840px; }

/* vigencia rápida */
.vig-shortcuts{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}
.vig-label{ font-size:.78rem; color:var(--paper-dim); }
.chip{
  background:rgba(255,255,255,.06);
  border:1px solid var(--input-line);
  color:var(--paper-dim);
  border-radius:999px;
  padding:5px 13px;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
.chip:hover{ color:#fff; border-color:var(--cyan); background:rgba(0,212,255,.12); }

/* ============================================================
   PARTIDAS
   ============================================================ */
.items-head,
.item-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 132px 132px 40px;
  gap:10px;
  align-items:center;
}
.items-head{
  padding:0 2px 8px;
  border-bottom:1px solid var(--panel-line);
  margin-bottom:10px;
}
.items-head span{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.items-head span:nth-child(3),
.items-head span:nth-child(4){ text-align:right; }

.item-row{
  padding:6px 2px;
  border-radius:10px;
}
.item-row + .item-row{ margin-top:4px; }
.item-cell{ min-width:0; }
.item-cell-label{ display:none; }
.item-row input,
.item-row textarea{
  width:100%;
  padding:10px 12px;
  border-radius:9px;
  border:1px solid var(--input-line);
  background:var(--input-bg);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:.92rem;
}
.item-row textarea{ resize:vertical; min-height:42px; line-height:1.35; }
.item-row input:focus,
.item-row textarea:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,212,255,.16);
}
.item-row input.num{ text-align:right; font-family:var(--font-mono); }
.item-importe{
  text-align:right;
  font-family:var(--font-mono);
  font-size:.95rem;
  font-weight:600;
  padding:10px 12px;
  color:#fff;
  background:rgba(0,64,255,.16);
  border:1px solid rgba(0,212,255,.18);
  border-radius:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.item-row.sin-concepto .item-importe{
  background:rgba(255,106,26,.14);
  border-color:rgba(255,106,26,.45);
  color:var(--orange-2);
}
.item-row.sin-concepto .it-concepto{ border-color:rgba(255,106,26,.5); }

.item-del{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:9px;
  border:1px solid transparent;
  background:none;
  color:var(--paper-dim);
  font-size:1.1rem;
  cursor:pointer;
  transition:.15s;
}
.item-del:hover{ color:#fff; background:rgba(255,77,77,.22); border-color:rgba(255,77,77,.4); }

.btn-add{
  margin-top:14px;
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px dashed var(--input-line);
  background:rgba(255,255,255,.03);
  color:var(--paper-dim);
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
.btn-add span{ color:var(--orange); font-size:1.05rem; }
.btn-add:hover{ color:#fff; border-color:var(--cyan); background:rgba(0,212,255,.08); }

/* ============================================================
   RESUMEN / TOTALES
   ============================================================ */
.totals-card{
  background:linear-gradient(170deg, rgba(0,48,204,.42), rgba(6,11,34,.86));
  border:1px solid rgba(0,212,255,.26);
  border-radius:16px;
  padding:22px;
  backdrop-filter:blur(10px);
}
.totals-card h2{ font-size:1.05rem; margin-bottom:16px; }

.total-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  font-size:.92rem;
}
.total-row strong{ font-family:var(--font-mono); font-weight:600; }
.total-row-sm{ font-size:.85rem; color:var(--paper-dim); }
.total-row-sm strong{ color:var(--paper); }
.total-row-big{
  margin-top:8px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:700;
}
.total-row-big strong{ font-size:1.5rem; color:var(--orange-2); }
#rowDescuento[hidden]{ display:none; }

.total-letra{
  margin:6px 0 18px;
  font-size:.76rem;
  line-height:1.4;
  color:var(--paper-dim);
  font-style:italic;
}

.desc-row,
.iva-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1);
}
.field-inline{ flex:1; margin-bottom:0; }
.field-narrow{ max-width:96px; }

.switch{
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  flex:1;
  padding-bottom:9px;
}
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch-track{
  width:40px; height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  position:relative;
  transition:.2s;
  flex-shrink:0;
}
.switch-knob{
  position:absolute;
  top:3px; left:3px;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
}
.switch input:checked + .switch-track{ background:var(--orange); }
.switch input:checked + .switch-track .switch-knob{ transform:translateX(18px); }
.switch-text{ font-size:.84rem; font-weight:600; }

.totals-actions{ display:flex; flex-direction:column; gap:9px; }
.btn-block{ width:100%; }
.btn-flat{
  background:none;
  border:0;
  color:var(--paper-dim);
  font-size:.84rem;
  padding:8px;
  cursor:pointer;
  font-family:var(--font-body);
  border-radius:999px;
}
.btn-flat:hover{ color:var(--danger); background:rgba(255,77,77,.1); }

.privacy-note{
  display:flex;
  gap:9px;
  margin:18px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.74rem;
  line-height:1.45;
  color:var(--paper-dim);
}
.privacy-note svg{ width:17px; flex-shrink:0; color:var(--cyan); }

/* ============================================================
   HISTORIAL
   ============================================================ */
.hist-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:15px 16px;
  border:1px solid var(--panel-line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  margin-bottom:10px;
}
.hist-main{ min-width:0; }
.hist-folio{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--cyan);
  letter-spacing:.05em;
}
.hist-cliente{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  margin:2px 0 4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hist-meta{ font-size:.78rem; color:var(--paper-dim); }
.hist-meta .vencida{ color:var(--danger); font-weight:600; }
.hist-meta .vigente{ color:var(--ok); font-weight:600; }
.hist-total{
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--orange-2);
}
.hist-actions{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.mini-btn{
  border:1px solid var(--input-line);
  background:rgba(255,255,255,.05);
  color:var(--paper-dim);
  border-radius:8px;
  padding:7px 12px;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
.mini-btn:hover{ color:#fff; border-color:var(--cyan); }
.mini-btn.danger:hover{ color:#fff; border-color:var(--danger); background:rgba(255,77,77,.2); }

.empty-state{
  text-align:center;
  padding:46px 20px;
  color:var(--paper-dim);
  font-size:.9rem;
}

.btn-danger-ghost{
  border:1px solid rgba(255,77,77,.35);
  background:none;
  color:var(--danger);
  border-radius:999px;
  padding:7px 15px;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
}
.btn-danger-ghost:hover{ background:rgba(255,77,77,.15); }

/* ============================================================
   AJUSTES
   ============================================================ */
.lock-table{ margin:0 0 16px; }
.lock-table li{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:.86rem;
}
.lock-table span{ color:var(--paper-dim); }
.lock-table strong{ font-family:var(--font-mono); font-weight:600; }

.save-flash{
  margin-left:12px;
  font-size:.84rem;
  color:var(--ok);
  font-weight:600;
}
.save-flash[hidden]{ display:none; }
.save-flash.err{ color:var(--danger); }

/* ============================================================
   MODAL / VISTA PREVIA
   ============================================================ */
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,20,.82);
  backdrop-filter:blur(4px);
}
.modal-box{
  position:relative;
  width:min(980px, 100%);
  height:min(88vh, 100%);
  display:flex;
  flex-direction:column;
  background:var(--navy-2);
  border:1px solid var(--panel-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-head,
.modal-foot{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
}
.modal-head{ justify-content:space-between; border-bottom:1px solid var(--panel-line); }
.modal-head h2{ font-size:1rem; }
.modal-foot{ justify-content:flex-end; border-top:1px solid var(--panel-line); flex-wrap:wrap; }
.modal-foot .btn{ padding:10px 18px; font-size:.88rem; }
.modal-close{
  background:none; border:0; color:var(--paper-dim);
  font-size:1.1rem; cursor:pointer; padding:4px 8px; border-radius:8px;
}
.modal-close:hover{ color:#fff; background:rgba(255,255,255,.1); }
.modal-body{ flex:1; min-height:0; background:#555; }
.modal-body iframe{ width:100%; height:100%; border:0; display:block; }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index:120;
  padding:13px 22px;
  border-radius:999px;
  background:var(--navy-2);
  border:1px solid var(--cyan);
  color:#fff;
  font-size:.88rem;
  font-weight:600;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  animation:toastIn .25s ease;
}
.toast[hidden]{ display:none; }
.toast.err{ border-color:var(--danger); }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%, 12px);} to{ opacity:1; transform:translate(-50%,0);} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .cot-layout{ grid-template-columns:1fr; }
  .cot-side{ position:static; }
}

@media (max-width: 780px){
  .app-header-inner{ flex-wrap:wrap; padding:10px 16px; gap:12px; }
  .app-tabs{ order:3; width:100%; flex-wrap:nowrap; gap:4px; }
  .app-tab{
    flex:1;
    min-width:0;
    text-align:center;
    padding:9px 4px;
    font-size:.8rem;
    white-space:nowrap;
  }
  .tab-long{ display:none; }
  .tab-count{ margin-left:3px; }
  .app-main{ padding:20px 14px 60px; }
  .panel{ padding:18px 15px; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }

  .items-head{ display:none; }
  .item-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:14px;
    border:1px solid var(--panel-line);
    background:rgba(255,255,255,.03);
    margin-bottom:10px;
  }
  .item-row .cell-concepto{ grid-column:1 / -1; order:-1; }
  .item-row .item-del{ justify-self:end; }
  .item-cell{ display:flex; flex-direction:column; gap:5px; }
  .item-cell-label{
    display:block;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .hist-item{ grid-template-columns:1fr; }
  .hist-actions{ justify-content:flex-start; }
  .modal{ padding:0; }
  .modal-box{ height:100vh; width:100%; border-radius:0; border:0; }
  .lock-card{ padding:30px 22px 24px; }
}

@media print{
  body{ background:#fff; }
  .app-header, .cot-side, .modal, .toast{ display:none !important; }
}

/* ============================================================
   Añadidos de la versión con servidor
   ============================================================ */

.app-user{
  font-size:.84rem;
  color:var(--paper-dim);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}

.app-tab[hidden]{ display:none; }

.estado-guardada{ color:var(--ok) !important; }

/* Barra de borrador pendiente */
.draft-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:13px 18px;
  border-radius:12px;
  background:rgba(255,106,26,.12);
  border:1px solid rgba(255,106,26,.4);
  font-size:.88rem;
}
.draft-bar[hidden]{ display:none; }
.draft-actions{ display:flex; gap:8px; }

/* Búsqueda del historial */
.hist-search{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}
.hist-search input{
  flex:1;
  padding:11px 14px;
  border-radius:10px;
  border:1px solid var(--input-line);
  background:var(--input-bg);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:.92rem;
}
.hist-search input:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,212,255,.16);
}
.hist-search input::placeholder{ color:rgba(201,211,242,.42); }

.hist-meta-sm{
  margin-top:3px;
  font-size:.74rem;
  opacity:.75;
}

#histMas[hidden]{ display:none; }

/* Etiquetas de usuario */
.tag{
  display:inline-block;
  vertical-align:middle;
  margin-left:6px;
  padding:2px 9px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tag-admin{ background:rgba(0,64,255,.4); color:#cfe0ff; border:1px solid rgba(0,212,255,.4); }
.tag-yo{ background:rgba(53,208,127,.2); color:var(--ok); border:1px solid rgba(53,208,127,.4); }
.tag-off{ background:rgba(255,77,77,.18); color:var(--danger); border:1px solid rgba(255,77,77,.4); }

.field input:disabled,
.field select:disabled,
.field textarea:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.field-hueco{ display:block; height:43px; }

.solo-admin[hidden], .solo-usuario[hidden]{ display:none; }

#folio[readonly]{
  background:rgba(0,64,255,.14);
  border-color:rgba(0,212,255,.26);
  font-family:var(--font-mono);
  letter-spacing:.04em;
}

@media (max-width: 780px){
  .app-user{ display:none; }
  .field-hueco{ display:none; }
  .hist-search{ flex-direction:column; }
}