/* ============================================================
   Generador de firmas · interfaz del portal
   Usa el sistema visual de dealersolutions.com.mx: Archivo para
   títulos, IBM Plex Sans de cuerpo, IBM Plex Mono en etiquetas,
   acento cian, navy profundo y esquinas de 2 px.

   Nada de esto viaja dentro de la firma: la firma se arma con
   estilos en línea en app.js.
   ============================================================ */

:root{
  color-scheme:light;
  --bg:#F4F7FA; --surface:#FFFFFF; --surface-2:#EDF3F8;
  --text:#0A2540; --muted:#59708A; --line:#D5E0EA;
  --accent:#06B6D4; --accent-ink:#05505E; --bull:#4C86CC;
  --deep:#0A2540; --on-deep:#E9F2F9; --on-deep-muted:#9DB4CA;
  --shadow:0 1px 2px rgba(10,37,64,.06), 0 12px 32px -18px rgba(10,37,64,.35);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:Archivo,"Arial Narrow",Arial,sans-serif; font-variation-settings:"wdth" 116;
  margin:0; letter-spacing:-.02em; font-weight:700;
}
p{margin:0}
.wrap{width:min(1280px,100% - 44px); margin-inline:auto}
:where(a,button,input,select,summary):focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* --- barra superior, igual que la del sitio --- */
.top{
  position:sticky; top:0; z-index:20; background:rgba(244,247,250,.92);
  backdrop-filter:blur(9px); border-bottom:1px solid var(--line); padding:14px 0;
}
.top-in{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.marca-app{display:flex; align-items:center; gap:16px}
.logo{height:30px; width:auto; display:block; flex:none}
.titulo{border-left:1px solid var(--line); padding-left:16px}
.top h1{font-size:1.02rem; line-height:1.2}
.top .sub{color:var(--muted); font-size:.82rem; margin-top:1px}

.selector{display:flex; align-items:center; gap:13px; margin-left:auto}
.eyebrow,.selector-lbl{
  font-family:"IBM Plex Mono",monospace; font-size:.685rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:500;
}
.tabs{display:flex; gap:2px}
.tab{
  border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer;
  padding:9px 15px; font-family:inherit; font-size:.9rem; font-weight:500;
  color:var(--muted); white-space:nowrap; transition:color .15s ease, border-color .15s ease;
}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text); font-weight:600; border-bottom-color:var(--accent)}

/* --- estructura --- */
.layout{display:grid; grid-template-columns:minmax(0,410px) minmax(0,1fr); gap:26px; align-items:start; padding:28px 0 64px}
.col-der{display:grid; gap:20px}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

.panel{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  box-shadow:var(--shadow); padding:22px;
}
.panel-h{
  font-family:"IBM Plex Mono",monospace; font-size:.685rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:500;
  padding-bottom:13px; border-bottom:1px solid var(--line); margin-bottom:20px;
}

/* --- formulario --- */
.fields{display:grid; gap:16px}
.field{display:grid; gap:6px}
.field-sm{max-width:170px}
.par{display:grid; grid-template-columns:1fr 1fr; gap:13px}
@media (max-width:520px){.par{grid-template-columns:1fr}}
.field select{max-width:260px}
.hint-par{margin-top:-10px}

.lbl{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:500;
}
.lbl em{font-style:normal; color:var(--accent); font-weight:700}

.field input,.field select{
  font-family:"IBM Plex Sans",Arial,sans-serif; font-size:.97rem; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:11px 13px; width:100%; transition:border-color .15s ease;
}
.field select{cursor:pointer; padding:11px 9px}
.field input::placeholder{color:#9AAEC0}
.field input:hover,.field select:hover{border-color:#B9CBDA}
.field input:focus,.field select:focus{border-color:var(--accent); outline:none}
.field input.invalido{border-color:#C2410C; background:#FFF7F3}
.hint{font-size:.78rem; color:var(--muted); line-height:1.45}
.hint code{font-family:"IBM Plex Mono",monospace; font-size:.95em; background:var(--surface-2); padding:1px 4px}

/* --- campo con sufijo fijo (el dominio del correo) --- */
.compuesto{display:flex; align-items:stretch}
.compuesto input{border-right:0; min-width:0}
.sufijo{
  display:flex; align-items:center; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--line);
  padding:0 13px; font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:var(--accent-ink);
}

/* --- dato que pone la marca y no se edita --- */
.fijo{
  background:var(--surface-2); border:1px solid var(--line); border-left:2px solid var(--accent);
  padding:11px 13px; font-size:.95rem; color:var(--muted);
}

/* --- grupos y conmutador --- */
.grupo{display:grid; gap:9px; border-top:1px solid var(--line); padding-top:16px}
.grupo[hidden]{display:none}
.conmutador{display:inline-flex; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.opcion{
  border:0; background:transparent; cursor:pointer; padding:8px 18px;
  font-family:inherit; font-size:.86rem; font-weight:500; color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.opcion+.opcion{border-left:1px solid var(--line)}
.opcion:hover{color:var(--text)}
.opcion[aria-checked="true"]{background:var(--accent); color:#04202B; font-weight:600}

/* --- avanzadas --- */
.adv{margin-top:20px; border-top:1px solid var(--line); padding-top:16px}
summary{
  cursor:pointer; list-style:none; font-family:"IBM Plex Mono",monospace;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500;
}
summary::-webkit-details-marker{display:none}
summary::after{content:" +"; color:var(--accent); font-size:1rem}
details[open]>summary::after{content:" –"}
summary:hover{color:var(--text)}
.adv[open]>summary{margin-bottom:16px}
.adv .btn-quiet{margin-top:16px}

/* --- vista previa --- */
.aviso{
  background:rgba(6,182,212,.09); border:1px solid var(--line); border-left:2px solid var(--accent);
  color:var(--text); padding:12px 14px; font-size:.85rem; line-height:1.5; margin-bottom:18px;
}
.aviso code{font-family:"IBM Plex Mono",monospace; font-size:.95em}
.canvas{padding:4px 2px; overflow-x:auto}
.mail-line{color:#4A5B6B; font-family:Arial,Helvetica,sans-serif; font-size:14.5px; line-height:1.6; margin-bottom:14px; max-width:64ch}
.mail-line-final{margin-bottom:26px}
#firma{min-width:min-content}
#firma:empty::after{content:"Empieza a capturar tus datos y la firma aparece aquí."; color:#9AAEC0; font-size:.85rem}

/* --- botones --- */
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.btn{
  display:inline-flex; align-items:center; gap:.5em; border:0; cursor:pointer;
  font-family:"IBM Plex Sans",Arial,sans-serif; font-size:.95rem; font-weight:600;
  padding:12px 20px; border-radius:2px; color:var(--text); background:var(--surface-2);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); background:#E1EBF3}
.btn-primary{background:var(--accent); color:#04202B}
.btn-primary:hover{background:#3DCBE3}
.btn[disabled]{background:var(--surface-2); color:#9AAEC0; cursor:not-allowed; transform:none}
.btn-quiet{background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); padding:10px 16px; font-size:.87rem}
.btn-quiet:hover{background:transparent; box-shadow:inset 0 0 0 1px var(--accent); color:var(--text)}

/* --- instrucciones, en la banda navy del sitio --- */
.instrucciones{background:var(--deep); color:var(--on-deep-muted); padding:20px 24px; font-size:.89rem; line-height:1.6}
.instrucciones-titulo{
  font-family:Archivo,"Arial Narrow",Arial,sans-serif; font-variation-settings:"wdth" 116;
  font-size:1.1rem; font-weight:700; letter-spacing:-.02em; color:var(--on-deep);
  text-transform:none;
}
.instrucciones-titulo::after{content:" +"; color:var(--accent); font-size:1.05rem}
.instrucciones[open]>.instrucciones-titulo::after{content:" –"}
.instrucciones-titulo:hover{color:#fff}
.instrucciones-cuerpo{margin-top:8px}

/* cada cliente de correo se abre por su cuenta: con cinco, desplegados
   ocuparían más que la propia vista previa */
.cliente{border-top:1px solid rgba(255,255,255,.14)}
.cliente>summary{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); font-weight:500; padding:13px 0;
}
.cliente>summary::after{content:" +"; font-size:.95rem}
.cliente[open]>summary::after{content:" –"}
.cliente>summary:hover{color:#fff}
.cliente ol{margin:0 0 16px; padding-left:20px; display:grid; gap:4px}
.cliente-nota{margin:0 0 12px; font-size:.85rem}

.instrucciones strong{color:var(--on-deep); font-weight:600}
.instrucciones em{color:var(--on-deep); font-style:italic}
.instrucciones .nota{
  margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); font-size:.83rem;
}
.instrucciones .nota+.nota{margin-top:10px; padding-top:0; border-top:0}

/* --- código --- */
.code{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:16px 22px}
.code-in{padding-top:16px}
#codigo{
  background:var(--deep); color:#D6E6F2; padding:16px; margin:14px 0 0; border-left:2px solid var(--accent);
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto;
}

/* --- área oculta para el copiado con formato --- */
.fuera-de-vista{position:fixed; left:-9999px; top:0; width:700px; opacity:0; pointer-events:none}

/* --- elegir la foto desde la computadora --- */
.archivo{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.archivo .btn-quiet{flex:none}
#nombre-archivo{font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--text)}
.btn-enlace{
  border:0; background:transparent; cursor:pointer; padding:0; font-family:inherit;
  font-size:.78rem; color:var(--muted); text-decoration:underline; text-underline-offset:2px;
}
.btn-enlace:hover{color:#C2410C}
.field input:disabled{background:var(--surface-2); color:var(--muted); cursor:not-allowed}
.hint.alerta{
  background:rgba(6,182,212,.09); border-left:2px solid var(--accent);
  padding:9px 11px; color:var(--text);
}

/* --- pantalla de acceso --- */
body.bloqueado{overflow:hidden}
body.bloqueado > .top,body.bloqueado > .layout{display:none}
.acceso{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--deep); padding:24px;
}
.acceso[hidden]{display:none}
.acceso-caja{
  background:var(--surface); border-top:3px solid var(--accent); box-shadow:var(--shadow);
  padding:34px 32px 30px; width:min(390px,100%); display:grid; gap:14px;
}
.acceso-caja h1{font-size:1.3rem}
.acceso-caja .sub{color:var(--muted); font-size:.9rem; margin-top:-8px; margin-bottom:6px}
.acceso-caja .btn{justify-content:center; margin-top:4px}
.acceso-caja .error{
  background:#FFF7F3; border-left:2px solid #C2410C; color:#9A3412;
  padding:9px 11px; font-size:.83rem;
}
.acceso-caja .error[hidden]{display:none}

/* --- selector reducido a una sola empresa --- */
.selector.una-marca .selector-lbl{display:none}
.selector.una-marca .tab{cursor:default; padding-left:0}
.selector.una-marca .tab:hover{color:var(--text)}
#salir{margin-left:4px}

/* --- aviso de campos obligatorios pendientes --- */
.falta{
  margin-top:18px; font-size:.82rem; color:var(--muted);
  border-left:2px solid var(--line); padding-left:11px;
}
.falta[hidden]{display:none}

/* --- distintivo de la firma de muestra --- */
.es-ejemplo{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:500;
  background:rgba(6,182,212,.10); border-left:2px solid var(--accent);
  padding:8px 12px; margin-bottom:14px; line-height:1.5;
}
.es-ejemplo[hidden]{display:none}

/* --- pista bajo los botones --- */
.hint-botones{display:block; margin-top:10px; max-width:52ch}