/* Siti Card Studio — editor de tarjetas de mesa 5×9".
 *
 * Es una página propia (/tarjetas), a la que se llega desde Recursos › Tarjetas
 * en el menú del portal. Por eso aquí SÍ se pueden usar selectores de elemento
 * (summary, details, input) sin pisar nada del portal: son documentos distintos
 * y nunca comparten cascada. No mezclar este archivo con los del shell.
 */

:root{
  /* ---------- paleta Siti Negocios ---------- */
  --ink:#FFFFFF;            /* lienzo de la app */
  --shell:#FFFBF7;          /* panel lateral, crema cálido */
  --panel:#FFFBF7;
  --panel-2:#FFFFFF;        /* campos y tarjetas */
  --line:#F0E7DD;
  --line-2:#E4D8CA;
  --txt:#141518;
  --muted:#8B909A;
  --brand:#F97316;
  --brand-2:#FDBA74;
  --brand-soft:#FFF3E8;
  --brand-ring:rgba(249,115,22,.18);
  --shadow:0 1px 2px rgba(20,21,24,.04);
  --shadow-2:0 4px 16px rgba(20,21,24,.06);
  --radius:12px;
  --radius-lg:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ink);color:var(--txt);
  font-family:'Plus Jakarta Sans',Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:13px;overflow:hidden;-webkit-font-smoothing:antialiased;
}
.app{display:flex;height:100vh;height:100dvh;width:100%}

/* ---------- panel ---------- */
.panel{
  width:376px;flex:0 0 376px;background:var(--shell);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
/* Camino de vuelta al portal. El editor es una página propia, así que sin esto
   solo se sale con el botón "atrás" del navegador. Va arriba del todo, donde se
   busca un "atrás".

   `inline-flex` + `align-self` es lo que lo hace ocupar SOLO su texto: el panel
   es una columna flex y, por defecto, un hijo se estira de lado a lado — el
   enlace parecía una franja y la zona sensible al clic llegaba hasta la orilla.
   La píldora al pasar el ratón es la misma que usan los renglones de secciones,
   para que se lea como parte del panel y no como algo pegado encima. */
.backbar{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  margin:12px 0 0 12px;padding:5px 11px 5px 7px;
  border-radius:999px;
  font-size:11px;font-weight:600;line-height:1;
  color:var(--muted);text-decoration:none;
  transition:color .16s,background .16s;
}
.backbar:hover{color:var(--brand);background:var(--brand-soft)}
/* El tamaño se fija aquí y no en el atributo del <svg>: sin ancho ni alto, un
   SVG suelto se dibuja a su tamaño por defecto (300×150 px). Eso es lo que se
   veía cuando esta hoja no llegaba a cargar. */
.backbar svg{width:13px;height:13px;flex:0 0 13px;display:block;stroke-width:2.5}
.brandbar{
  padding:12px 18px 16px;
  display:flex;align-items:center;gap:10px;
}
.brandbar h1{font-size:16px;margin:0;letter-spacing:-.02em;text-transform:none;font-weight:800;line-height:1.1}
.brandbar h1 .bmark{color:var(--brand)}
.brandbar span{font-size:11.5px;color:var(--muted);letter-spacing:0;font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(249,115,22,.14)}
.panelbody{display:flex;flex:1;min-height:0}
/* el nav es la única botonera: iconos grandes + etiqueta, estilo Siti */
.sicon svg{width:21px;height:21px;display:block}
.sicon{color:#7C838C;display:grid;place-items:center;flex:0 0 21px;transition:color .16s}
details[open]>summary .sicon{color:#fff}
.navgroup{
  padding:16px 22px 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:#A9AFB8;text-transform:none;
}
.sub{
  border:1px solid var(--line);border-radius:var(--radius-lg);margin-top:10px;
  background:var(--panel-2);overflow:hidden;box-shadow:var(--shadow);
}
.sub>summary{
  padding:11px 13px;margin:0;border-radius:0;font-size:11.5px;letter-spacing:0;
  font-weight:700;color:var(--txt);text-transform:none;gap:8px;
}
.sub>summary::after{width:6px;height:6px;flex:0 0 6px;opacity:.45}
details.sub>summary:hover{background:#FFF7F0;color:var(--txt)}
details.sub[open]>summary{
  background:transparent;color:var(--txt);box-shadow:none;
  border-bottom:1px solid var(--line);
}
details.sub[open]>summary:hover{background:#FFF7F0}
.sub>.body{padding:0 13px 14px}
.sub .hint{margin-top:7px}
.scroll{overflow-y:auto;flex:1;min-height:0;padding-bottom:80px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}

details{border-bottom:none;margin:1px 0}
summary{
  list-style:none;cursor:pointer;padding:11px 14px;margin:0 12px;border-radius:12px;
  font-size:13.5px;letter-spacing:-.01em;text-transform:none;color:#33383F;font-weight:600;
  display:flex;align-items:center;gap:12px;user-select:none;
  transition:color .16s,background .16s,box-shadow .16s;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--txt);background:#FDEFE4}
summary::after{
  content:"";margin-left:auto;width:7px;height:7px;flex:0 0 7px;opacity:.55;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s;
}
details[open]>summary{
  color:#fff;font-weight:700;background:var(--brand);
  box-shadow:0 5px 14px rgba(249,115,22,.30);
}
details[open]>summary::after{transform:rotate(45deg);opacity:.85}
details[open]>summary:hover{background:#EA6A0C}
.body{padding:6px 22px 18px}

label.f{display:block;margin:12px 0 6px;font-size:11.5px;color:var(--muted);letter-spacing:0;font-weight:600}
input[type=text],select,textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);
  border-radius:var(--radius);padding:9px 11px;font:inherit;font-size:12.5px;outline:none;
  transition:border-color .16s,box-shadow .16s;
}
input[type=text]:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
input[type=range]{width:100%;accent-color:var(--brand);margin:6px 0 0}
.row{display:flex;gap:8px}
.row>*{flex:1;min-width:0}

.tpls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.tpl{
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  padding:9px;cursor:pointer;text-align:left;color:var(--txt);font:inherit;
  display:flex;gap:9px;align-items:center;box-shadow:var(--shadow);
  transition:border-color .16s,background .16s,box-shadow .16s,transform .16s;
}
.tpl:hover{border-color:var(--brand-2);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.tpl[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-ring)}
.tpl b{display:block;font-size:12px;font-weight:700;letter-spacing:-.01em}
.tpl i{display:block;font-size:10.5px;color:var(--muted);font-style:normal;font-weight:500}
.chip{width:22px;height:34px;border-radius:6px;flex:0 0 22px;border:1px solid rgba(20,21,24,.10)}

/* ---------- integración del logo ---------- */
.lmodes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.lmodes.off{opacity:.62}
.lmode{
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  padding:9px;cursor:pointer;text-align:left;color:var(--txt);font:inherit;
  display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow);
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.lmode:hover{border-color:var(--brand-2);box-shadow:var(--shadow-2)}
.lmode[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-ring)}
.lmode[aria-pressed=true] .lmp{border-color:rgba(249,115,22,.32);background:#fff}
.lmode.wide{grid-column:1 / -1}
.lmode b{display:block;font-size:11.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.lmode i{display:block;font-size:10px;color:var(--muted);font-style:normal;line-height:1.3;font-weight:500}
.lmp{
  height:46px;border:1px solid var(--line);border-radius:9px;background:#FFF9F3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:5px;overflow:hidden;
}
.lmp .blk{background:var(--brand);border-radius:2px;display:block}
.lmp .siti{background:var(--brand-2);border-radius:2px;display:block;opacity:.95}
.lmp .bar{background:rgba(20,21,24,.16);border-radius:1.5px;height:3px;display:block}
.lmp .tiny{font-size:6.5px;letter-spacing:.04em;color:var(--muted);line-height:1;white-space:nowrap}
.lmp .duo{display:flex;align-items:center;gap:5px}
.lmp .duo em{width:1px;height:13px;background:rgba(20,21,24,.18);display:block}
.lmp .pbadge{
  border:1px solid rgba(249,115,22,.45);border-radius:4px;padding:2px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}

.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}
.sw{
  border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:8px;
  cursor:pointer;color:var(--txt);font:inherit;font-size:10.5px;text-align:left;font-weight:600;
  box-shadow:var(--shadow);transition:border-color .16s,box-shadow .16s;
}
.sw:hover{border-color:var(--brand-2);box-shadow:var(--shadow-2)}
.sw .bars{display:flex;height:14px;border-radius:5px;overflow:hidden;margin-bottom:6px}
.sw .bars i{flex:1}

.colorgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.cf{display:flex;align-items:center;gap:9px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:7px 9px;box-shadow:var(--shadow)}
.cf input[type=color]{width:26px;height:26px;border:none;background:none;padding:0;cursor:pointer;border-radius:8px}
.cf span{font-size:10.5px;color:var(--muted);font-weight:600}

.toggle{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line)}
.toggle:first-of-type{border-top:none}
.toggle span{font-size:12.5px;font-weight:600}
.sw-btn{position:relative;width:40px;height:22px;border-radius:20px;background:#E4D8CA;border:none;cursor:pointer;transition:background .16s;flex:0 0 40px}
.sw-btn::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,21,24,.2);transition:.16s}
.sw-btn[aria-pressed=true]{background:var(--brand)}
.sw-btn[aria-pressed=true]::after{left:21px;background:#fff}

.btn{
  width:100%;border:1px solid var(--line-2);background:var(--panel-2);color:var(--txt);
  border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:12.5px;cursor:pointer;font-weight:600;
  box-shadow:var(--shadow);transition:border-color .16s,background .16s,box-shadow .16s;
}
.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(249,115,22,.26)}
.btn.primary:hover{background:#EA6A0C;border-color:#EA6A0C;color:#fff}
.hint{font-size:11px;color:var(--muted);line-height:1.55;margin-top:9px;font-weight:500}
.hint b{color:#4B5058;font-weight:700}

/* ---------- stage ---------- */
.stage{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 70% at 50% 0%, #FFF6EC 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%,#FDF9F5 100%);
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
}
.meta{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tools{display:flex;gap:9px;align-items:center}
.tools select{width:auto;padding:8px 12px;font-size:12px;border-radius:999px;font-weight:600}
.tools .btn{width:auto;padding:8px 16px;border-radius:999px}

/* ---------- menú de descarga ---------- */
.dropdown{position:relative}
.dd-toggle{display:inline-flex;align-items:center;gap:8px}
.dd-toggle .dd-ic{width:16px;height:16px;flex:0 0 16px;display:block}
.dd-caret{
  width:6px;height:6px;flex:0 0 6px;margin:-3px 0 0 3px;opacity:.9;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .18s,margin-top .18s;
}
.dd-toggle[aria-expanded=true] .dd-caret{transform:rotate(-135deg);margin-top:3px}
.dd-panel{
  position:absolute;top:calc(100% + 9px);right:0;z-index:40;min-width:268px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:7px;box-shadow:0 14px 34px rgba(20,21,24,.14),0 2px 6px rgba(20,21,24,.06);
  animation:ddIn .14s ease-out;
}
.dd-panel[hidden]{display:none}
@keyframes ddIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.dd-item{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;
  background:none;border:none;border-radius:11px;padding:9px 10px;cursor:pointer;
  font:inherit;color:var(--txt);transition:background .14s;
}
.dd-item + .dd-item{margin-top:2px}
.dd-item:hover,.dd-item:focus-visible{background:var(--brand-soft);outline:none}
.dd-item:disabled{opacity:.5;cursor:default}
.dd-tag{
  flex:0 0 42px;height:30px;border-radius:9px;background:#FDEFE4;color:var(--brand);
  display:grid;place-items:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;
}
.dd-item:hover .dd-tag{background:var(--brand);color:#fff}
.dd-txt{min-width:0}
.dd-txt b{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.dd-txt i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);font-weight:500;margin-top:1px}
.canvaswrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px}
canvas{
  max-width:100%;max-height:100%;border-radius:8px;
  box-shadow:0 18px 44px rgba(20,21,24,.12), 0 2px 6px rgba(20,21,24,.06);
  background:#fff;
}
.status{
  padding:11px 24px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);
  display:flex;justify-content:space-between;gap:10px;font-weight:500;background:#fff;
}

/* ---------- recorte del fondo del logo ---------- */
.cutbox{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:10px;margin-top:10px;box-shadow:var(--shadow)}
.cuthead{display:flex;gap:10px;align-items:center}
.cutmeta{flex:1;min-width:0}
.cutmeta .toggle{padding:0;border-top:none}
.cutmeta i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:4px;font-weight:500}
.cutprev,.qrprev{
  flex:0 0 48px;width:48px;height:48px;border-radius:10px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3px;
  background-color:#F7F1EA;
  background-image:linear-gradient(45deg,#E4D8CA 25%,transparent 25%,transparent 75%,#E4D8CA 75%),
                   linear-gradient(45deg,#E4D8CA 25%,transparent 25%,transparent 75%,#E4D8CA 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;
}
.cutprev img,.qrprev img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.qrbox{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:10px;margin-top:10px;box-shadow:var(--shadow)}
.qrhead{display:flex;gap:10px;align-items:center}
.qrhead div{flex:1;min-width:0}
.qrhead b{display:block;font-size:12px;font-weight:700;letter-spacing:-.01em}
.qrhead i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:4px;font-weight:500}
.qrwarn{color:#D9480F}
details.sub.off{opacity:.55}
details.sub.off .body{pointer-events:none}

.logoitem{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:10px;margin-top:10px;box-shadow:var(--shadow)}
.logohead{display:flex;align-items:center;gap:9px}
.logohead img{width:34px;height:34px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:9px;padding:2px;flex:0 0 34px}
.logohead select{flex:1}
.logohead button{flex:0 0 28px;height:28px;border-radius:9px;border:1px solid var(--line-2);background:#fff;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;transition:.16s}
.logohead button:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)}
.logoitem .mini{display:flex;gap:9px;margin-top:8px}
.logoitem .mini label{flex:1;font-size:10.5px;color:var(--muted);font-weight:600}
.logoitem .mini input{width:100%}
.empty{font-size:11.5px;color:var(--muted);padding:12px 0 2px;font-weight:500}

#bootfail{
  position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:9999;
  width:min(560px,calc(100vw - 40px));background:#fff;border:1px solid #F5CFA9;
  border-left:4px solid var(--brand);border-radius:14px;padding:15px 18px;
  box-shadow:0 16px 38px rgba(20,21,24,.18);opacity:0;pointer-events:none;
  transition:opacity .25s ease-out;
}
#bootfail.show{opacity:1;pointer-events:auto}
#bootfail b{display:block;font-size:13.5px;font-weight:800;margin-bottom:5px}
#bootfail p{margin:0;font-size:12px;color:#5A6069;line-height:1.5}
#bootfail #bootfailmsg{margin-top:7px;font-family:ui-monospace,monospace;font-size:11px;color:var(--brand);word-break:break-word}
#bootfail #bootfailmsg:empty{display:none}

@media (max-width: 900px){
  body{overflow:auto}
  .app{flex-direction:column;height:auto}
  .panel{width:100%;flex:none;border-right:none;border-top:1px solid var(--line);order:2}
  .panelbody{flex-direction:column}
  .navgroup{padding:14px 22px 4px}
  .scroll{overflow:visible;padding-bottom:24px}
  .stage{order:1;height:70vh}
}