/* ══════════════════════════════════════════════════════════════════════════
   KORA · EDITOR DE LA TARJETA — 18 oct 2026 (js/kora-tarjeta-editor.js)
   Como el editor del libro, más sencillo: la tarjeta grande en el gris de la
   casa a la izquierda y el panel de pasos a la derecha.
   ══════════════════════════════════════════════════════════════════════════ */
.te{ max-width:1240px; margin:0 auto; padding:18px clamp(16px,3vw,40px) 60px }
.te-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:16px }
.te-back{ background:none; border:0; padding:0; cursor:pointer; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#79746D }
.te-back:hover{ color:#1F1D1B }
.te-h{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.6vw,32px); color:#1F1D1B }

.te-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:32px; align-items:start }
.te-stage{ position:sticky; top:84px; background:#EFEDE9; min-height:min(76vh,680px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px 24px; box-sizing:border-box }
.te-card{ width:min(340px,72%); transition:width .3s ease }
.te-card.te-chica{ width:min(272px,58%) }            /* 10 cm contra 12.5 cm: 80 % */
.te-card .tj-card{ width:100% }
.te-card.te-h{ width:min(470px,90%) }
.te-card.te-h.te-chica{ width:min(376px,72%) }
.te-lado{ display:flex; gap:2px; margin-bottom:26px; background:#E2DED7; border-radius:8px; padding:3px }
.te-lado button{ background:none; border:0; border-radius:8px; padding:6px 16px; cursor:pointer; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.08em; color:#5F5A53 }
.te-lado button.on{ background:#FBFAF7; color:#1F1D1B; box-shadow:0 1px 2px rgba(0,0,0,.08) }
.te-nota{ margin:22px 0 0; max-width:44ch; text-align:center; font-family:var(--font-display); font-size:15px; line-height:1.45; color:#5F5A53 }

.te-panel{ font-family:'Jost',sans-serif }
.te-paso{ padding:16px 0; border-top:1px solid #E4E0D9 }
.te-paso:first-child{ border-top:0; padding-top:0 }
.te-paso-t{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#1F1D1B }
.te-paso-t span{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:1px solid #B9B3AA; font-size:10.5px; letter-spacing:0; color:#5F5A53 }

.te-dis{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px }
.te-dis-b{ background:#EFEDE9; border:1.5px solid transparent; padding:10px 5px 7px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px }
.te-dis-b .tj-card{ width:72%; box-shadow:0 6px 10px -7px rgba(44,37,32,.5) }
.te-dis-b .tj-card.tj-h{ width:96% }
.te-dis-b small{ font-size:11px; line-height:1.25; color:#46423D }
.te-dis-b.on{ border-color:#1F1D1B }

.te-pills{ display:flex; flex-wrap:wrap; gap:6px }
.te-pill{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; background:#fff; border:1px solid #D9D4CC; border-radius:8px; padding:7px 13px; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; color:#1F1D1B; text-align:left }
.te-pill img{ width:22px; height:22px; object-fit:contain }
.te-pill small{ flex-basis:100%; font-size:11px; color:#79746D }
.te-pill:has(small){ border-radius:10px; flex:1 1 140px; padding:9px 12px }
.te-pill.on{ border-color:#1F1D1B; box-shadow:inset 0 0 0 1px #1F1D1B }

.te-up{ display:flex; align-items:center; gap:12px; padding:12px; border:1.5px dashed #D9D4CC; border-radius:12px; background:#fff; cursor:pointer }
.te-up.has{ border-style:solid; border-color:#1F1D1B }
.te-up-ic{ flex:none; width:46px; height:46px; border-radius:6px; background:#EFEDE9; display:flex; align-items:center; justify-content:center; overflow:hidden }
.te-up-ic img{ width:100%; height:100%; object-fit:cover }
.te-up-ic svg{ width:22px; height:22px; fill:none; stroke:#79746D; stroke-width:1.5 }
.te-up b{ display:block; font-weight:500; font-size:13.5px; color:#1F1D1B }
.te-up small{ font-size:11.5px; color:#79746D }

.te-f{ display:block; margin-bottom:8px }
.te-f small{ display:block; margin-bottom:4px; font-size:11.5px; color:#5F5A53 }
.te-f textarea{ width:100%; box-sizing:border-box; resize:vertical; font-family:var(--font-display); font-size:15px; line-height:1.45; color:#1F1D1B; background:#fff; border:1px solid #D9D4CC; border-radius:8px; padding:9px 11px; outline:none }
.te-f textarea:focus{ border-color:#1F1D1B }
.te-f input{ width:100%; box-sizing:border-box; font-family:'Jost',sans-serif; font-size:14px; color:#1F1D1B; background:#fff; border:1px solid #D9D4CC; border-radius:8px; padding:9px 11px; outline:none }
.te-f input:focus{ border-color:#1F1D1B }
.te-chico{ margin:8px 0 0; font-size:11.5px; color:#79746D }

.te-fin{ padding-top:16px; border-top:1px solid #E4E0D9 }
.te-total{ display:flex; justify-content:space-between; align-items:baseline; margin:0; font-size:14px; color:#46423D }
.te-total b{ font-weight:600; font-size:18px; color:#1F1D1B; letter-spacing:-.01em }
.te-envio{ margin:2px 0 14px }
.te-pronto{ margin:0 0 10px; font-family:var(--font-display); font-size:15px; line-height:1.4; color:#46423D }
.te-cta{ width:100%; background:#1F1D1B; color:#FBFAF7; border:0; border-radius:4px; padding:12px 18px; cursor:pointer; font-family:'Jost',sans-serif; font-weight:600; font-size:14px; letter-spacing:.04em }
.te-cta:hover{ background:#000 }

/* La página de tarjetas: ahora cada diseño es un botón que abre el editor */
button.tj-item{ display:block; width:100%; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit }
button.tj-cta{ border:0; cursor:pointer }
.tj-item .tj-pr{ color:#1F1D1B; letter-spacing:.08em }

@media (max-width:820px){
  .te-grid{ grid-template-columns:1fr; gap:18px }
  .te-stage{ position:relative; top:0; min-height:0; padding:28px 16px 16px }
  .te-card{ width:min(250px,64%) }
  .te-card.te-chica{ width:min(200px,51%) }
  .te-card.te-h{ width:92% }
  .te-card.te-h.te-chica{ width:74% }
}

/* 18 oct · «lo mismo / similar» que las tarjetas de mesa: usa sus cajas
   (.ms-ej, .ms-fila, .ms-gal… en css/kora-mesa.css). Aquí solo lo propio. */
.te-foto-fila{ cursor:default }
.ms-ej-dos{ position:relative; display:block; width:100%; height:100% }
.ms-ej-dos img{ width:100%; height:100%; object-fit:cover }
.ms-ej-dos .ms-ej-dibujo{ position:absolute; right:6%; bottom:6%; width:42%; padding:6% 4% 2%; border-radius:8px; background:rgba(251,250,247,.92) }
.ms-ej-dos .ms-ej-dibujo svg{ width:100% }

/* 19 oct · Vivi: «vamos a cambiar el fondo de la tarjeta navideña a rojo vino».
   20 oct: «siento muy intenso el rojo… mejor vámonos a un beige oscuro».
   El fondo sobre el que se ve la tarjeta (la tienda y el editor, #s19); el de
   las tarjetas de mesa (que comparte .te-stage) se queda como estaba. */
/* 20 oct, después · «neutralizar un poco el color camello»: de #CDBFA9 a un greige. */
.tj-box, #s19 .te-stage, #s19 .te-dis-b{ background:#CBC5BB }
#s19 .te-lado{ background:rgba(255,255,255,.32) }
#s19 .te-nota{ color:#3E3A33 }

/* 20 oct · Vivi: «quiero poder ver el diseño de la tarjeta más grande para que
   luzca al máximo la ilustración y la puedan revisar a detalle… aunque sea la
   chica; el tamaño lo mostramos de otra manera». En el editor de la tarjeta
   navideña la tarjeta va lo más grande que quepa —a lo ancho del escenario y
   a lo alto de la pantalla—, igual para las dos medidas; la medida la dice el
   renglón de abajo (pintaTarjeta). Las de mesa (.ms-grande) no cambian. */
/* 21 oct · Vivi: «el espacio gris un poco más corto, para que se vea completo
   en la pantalla; arriba tiene espacio de más». La tarjeta toma la altura que
   deja la pantalla (encabezado, título y el gris de arriba y abajo). */
#s19 .te-stage{ position:sticky; top:72px; min-height:0; padding:14px 20px 18px }
#s19 .te-lado{ margin-bottom:12px }
#s19 .te-card, #s19 .te-card.te-chica{ width:min(520px, 86%, calc((100vh - 250px) * 17 / 22)) }
@media (max-width:900px){
  #s19 .te-stage{ min-height:0 }
  #s19 .te-card, #s19 .te-card.te-chica{ width:min(420px, 88%) }
}

/* 20 oct, después · El panel en pasos desplegables (paso() en kora-tarjeta-editor.js) */
#s19 .te-paso{ padding:0; border-top:1px solid #E4E0D9 }
#s19 .te-paso:first-of-type{ border-top:0 }
#s19 .te-paso-t{ width:100%; display:flex; align-items:center; gap:10px; margin:0; padding:15px 0; background:none; border:0; cursor:pointer; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#1F1D1B; text-align:left }
#s19 .te-paso-r{ flex:1 1 auto; min-width:0; margin-left:6px; font-style:normal; font-size:12.5px; letter-spacing:0; text-transform:none; color:#79746D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right }
#s19 .te-paso-fl{ flex:none; width:8px; height:8px; margin-left:auto; border-right:1.5px solid #79746D; border-bottom:1.5px solid #79746D; transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s }
#s19 .te-paso-r + .te-paso-fl{ margin-left:10px }
#s19 .te-paso.abierto .te-paso-fl{ transform:rotate(-135deg) translate(-2px,-2px) }
#s19 .te-paso-c{ padding:2px 0 18px }
#s19 .te-sig{ display:block; margin:16px 0 0 auto; background:none; border:0; border-bottom:1px solid currentColor; padding:0 0 2px; cursor:pointer; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#1F1D1B }
#s19 .te-sub-gorros{ margin-top:16px }
#s19 .te-pintar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:16px 0 4px }
#s19 .te-pintar .ms-pintar{ padding:12px 22px; font-size:13.5px; font-weight:500; letter-spacing:.05em }
#s19 .te-pintar .kav{ flex:1 1 100% }

/* «Tus pinturas», grandes: dos por renglón, para escoger viéndolas bien */
#s19 .te-pinturas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
#s19 .te-pintura{ display:flex; flex-direction:column; gap:6px; padding:0; border:0; background:none; cursor:pointer; text-align:left }
#s19 .te-pintura img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; border-radius:8px; box-shadow:0 0 0 1px #E4E0D9 }
#s19 .te-pintura.on img{ box-shadow:0 0 0 2px #1F1D1B }
#s19 .te-pintura small{ font-family:'Jost',sans-serif; font-size:11.5px; color:#5F5A53 }

/* Tus tarjetas guardadas, arriba de todo */
#s19 .te-guardadas{ margin:0 0 6px; padding:0 0 14px; border-bottom:1px solid #E4E0D9 }
#s19 .te-guardadas > .te-chico{ margin:0 }
#s19 .te-guard-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
#s19 .te-guard-top .ms-sub, #s19 .te-guard-top .te-chico{ margin:0 }
#s19 .te-guard{ display:flex; gap:10px; overflow-x:auto; padding:10px 2px 4px }
#s19 .te-guard-i{ position:relative; flex:none }
#s19 .te-guard-b{ display:block; width:88px; padding:0; border:0; background:none; cursor:pointer }   /* 21 oct · «un poco más grandes» */
#s19 .te-guard{ padding:12px 4px 6px }
#s19 .te-guard-i.on .te-guard-b{ outline:2px solid #1F1D1B; outline-offset:3px }
#s19 .te-guard-x{ opacity:.9; top:-7px; right:-7px; width:22px; height:22px; line-height:22px; font-size:14px }
#s19 .te-guard-b .tj-card{ width:100%; box-shadow:0 4px 8px -5px rgba(44,37,32,.5) }
#s19 .te-guardadas .te-chico{ margin:6px 0 0 }

/* 20 oct, después · El diseño trae su estilo: grupos en el paso 2, y en el 4 sólo se dice en qué se pinta */
#s19 .te-dis-grupo{ margin:12px 0 6px }
#s19 .te-dis-grupo:first-child{ margin-top:0 }
#s19 .te-ilus{ margin:0 0 4px; font-family:var(--font-display); font-size:16px; line-height:1.45; color:#3E3A33 }
#s19 .te-ilus b{ font-weight:500 }
#s19 .te-pintura.otra{ opacity:.55 }
#s19 .te-pintura.otra:hover{ opacity:1 }

/* 20 oct · El botón de pintar, sobre la tarjeta grande (kora-tarjeta-editor.js, capaPintar) */
#s19 .te-card{ position:relative }
#s19 .te-capa{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:0 12px 7%; box-sizing:border-box; z-index:5; pointer-events:none }
#s19 .te-capa-b{ pointer-events:auto; background:rgba(31,29,27,.38); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); color:#FBFAF7; border:1px solid rgba(251,250,247,.45); border-radius:8px; padding:9px 24px; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 12px 30px -10px rgba(0,0,0,.55) }
#s19 .te-capa-b:hover{ background:rgba(31,29,27,.55) }
#s19 .te-capa-c{ pointer-events:auto; width:min(320px, 90%); background:rgba(251,250,247,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:10px; padding:14px 16px; text-align:center; box-shadow:0 12px 30px -10px rgba(0,0,0,.4) }
#s19 .te-capa-e{ display:block; margin-bottom:8px; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.06em; color:#1F1D1B }

/* 20 oct · El texto se escribe directo en la tarjeta, con su barrita (kora-tarjeta-editor.js, barraTexto):
   un solo renglón, chiquito, para que se vea con el teclado abierto */
/* un solo recuadro alrededor del texto, aunque ocupe dos renglones */
#s19 .te-card .tj-tx[contenteditable]{ display:inline-block; max-width:100%; cursor:text; outline:none; border-radius:2px; transition:box-shadow .15s }
#s19 .te-card .tj-tx[contenteditable][data-al]{ display:block }
#s19 .te-card .tj-tx[contenteditable]:hover{ box-shadow:0 0 0 1px rgba(31,29,27,.35) }
#s19 .te-card .tj-tx[contenteditable]:focus{ box-shadow:0 0 0 1.5px #1F1D1B; background:rgba(255,255,255,.25) }
#s19 .te-tx-bar{ position:absolute; z-index:20; display:flex; align-items:center; gap:1px; padding:3px; background:#1F1D1B; color:#FBFAF7; border-radius:9px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6); font-family:'Jost',sans-serif; white-space:nowrap }
#s19 .te-tx-bar[hidden]{ display:none }
#s19 .te-tx-bar button{ display:flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 6px; background:none; border:0; border-radius:6px;
  color:inherit; font:inherit; font-size:13px; cursor:pointer }
#s19 .te-tx-bar button:hover, #s19 .te-tx-bar button.on{ background:rgba(251,250,247,.16) }
#s19 .te-tx-bar button[disabled]{ opacity:.35; cursor:default }
#s19 .te-tx-bar svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round }
#s19 .te-tx-sep{ width:1px; height:16px; margin:0 3px; background:rgba(251,250,247,.25) }
#s19 .te-tx-bar .te-tx-letra{ min-width:64px; padding:0 8px; font-size:13px }
#s19 .te-tx-bar .tj-tx-fg{ font-family:var(--font-libro, 'EB Garamond'),serif; font-size:15px; font-weight:500 }
#s19 .te-tx-bar .tj-tx-fj{ font-family:'Jost',sans-serif; font-size:13px }
#s19 .te-tx-bar .tj-tx-fc{ font-family:'Caveat',cursive; font-size:17px; font-weight:600 }
#s19 .te-tx-bar .tj-tx-fl{ font-family:'Londrina Solid',sans-serif; font-size:15px }
#s19 .te-tx-bar .te-tx-ok{ margin-left:2px; background:#FBFAF7; color:#1F1D1B; font-weight:600; font-size:14px }
#s19 .te-tx-bar .te-tx-ok:hover{ background:#fff }

/* 20 oct, noche · El panel, más sencillo (kora-tarjeta-editor.js, pintaPanel) */
#s19 .te-nota-p{ margin:0 0 10px }
/* El diseño: los tres estilos y, abajo, sus cuatro diseños, dos y dos */
#s19 .te-estilos{ display:flex; gap:6px; margin:0 0 12px }
#s19 .te-estilo{ flex:1 1 0; padding:9px 6px; border:1px solid #D9D4CC; border-radius:8px; background:#fff; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#46423D }
#s19 .te-estilo.on{ background:#1F1D1B; border-color:#1F1D1B; color:#FBFAF7 }
#s19 .te-dis4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
#s19 .te-dis4 .te-dis-b{ padding:16px 10px 10px; gap:9px }
#s19 .te-dis4 .te-dis-b .tj-card{ width:80% }
#s19 .te-dis4 .te-dis-b small{ font-size:12.5px }
/* Tu foto: las originales, más grandes, y el círculo con + */
#s19 .te-fotos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 12px }
#s19 .te-foto-i{ position:relative; aspect-ratio:1/1 }
#s19 .te-foto-i > button:first-child{ width:100%; height:100%; padding:0; border:0; border-radius:8px; overflow:hidden; cursor:pointer; background:#EFEDE9 }
#s19 .te-foto-i > button:first-child[disabled]{ cursor:default }
#s19 .te-foto-i img{ width:100%; height:100%; object-fit:cover; display:block }
#s19 .te-foto-i.on > button:first-child{ box-shadow:0 0 0 2px #1F1D1B }
#s19 .te-foto-mas{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; cursor:pointer }
#s19 .te-foto-mas span{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:1.5px solid #1F1D1B;
  font-family:'Jost',sans-serif; font-size:28px; font-weight:300; line-height:1; color:#1F1D1B; transition:background .15s, color .15s }
#s19 .te-foto-mas:hover span{ background:#1F1D1B; color:#FBFAF7 }
#s19 .te-ajusta{ margin:0 0 6px }
#s19 #teCard .tj-foto{ cursor:pointer }
/* La ilustración: tus pruebas, y la palomita para sumarla a la impresión */
#s19 .te-pz{ position:relative }
#s19 .te-pz .te-pintura{ width:100% }
#s19 .te-pz.on .te-pintura img{ box-shadow:0 0 0 2px #1F1D1B }
#s19 .te-pz-imp{ position:absolute; top:8px; right:8px; width:28px; height:28px; padding:0; border-radius:50%; border:1.5px solid #1F1D1B; background:rgba(255,255,255,.85);
  color:transparent; font-size:14px; line-height:1; cursor:pointer }
#s19 .te-pz-imp.si{ background:#1F1D1B; color:#FBFAF7 }
#s19 .te-pz-imp[disabled]{ cursor:default }
#s19 .te-mezcla{ display:block; margin-top:2px; font-size:12px; color:#79746D }
/* El aviso de la primera vez: el texto se edita sobre la tarjeta */
#s19 .te-tip{ position:absolute; z-index:21; box-shadow:0 8px 20px -10px rgba(0,0,0,.6); border-radius:8px }
#s19 .te-tip[hidden]{ display:none }
#s19 .te-tip::before{ content:''; position:absolute; left:50%; top:-4px; width:8px; height:8px; margin-left:-4px; background:#1F1D1B; transform:rotate(45deg) }
#s19 .te-tip.abajo::before{ top:auto; bottom:-4px }
#s19 .te-tip button{ position:relative; display:block; background:#1F1D1B; color:#FBFAF7; border:0; border-radius:8px; padding:7px 14px; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.06em; white-space:nowrap }
#s19 .te-pz-x{ top:9px; right:auto; left:9px; width:24px; height:24px; line-height:24px; font-size:15px }
#s19 .te-pz:hover .te-pz-x{ opacity:1 }

/* 21 oct · Más diseños en el mismo pedido: las guardadas, con su palomita */
#s19 .te-incl{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:0 0 8px }
#s19 .te-incl-b{ position:relative; padding:8px 6px; border:1.5px solid transparent; border-radius:6px; background:#EFEDE9; cursor:pointer }
#s19 .te-incl-b .tj-card{ width:100%; box-shadow:0 4px 8px -6px rgba(44,37,32,.5) }
#s19 .te-incl-b i{ position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; border:1.5px solid #1F1D1B; background:rgba(255,255,255,.9);
  color:transparent; font-style:normal; font-size:11px; line-height:17px; text-align:center; z-index:3 }
#s19 .te-incl-b.on{ border-color:#1F1D1B }
#s19 .te-incl-b.on i{ background:#1F1D1B; color:#FBFAF7 }

/* 21 oct · «Guardar esta versión», en la esquina de la tarjeta */
#s19 .te-stage{ position:sticky }
#s19 .te-guardar{ position:absolute; top:14px; right:16px; z-index:6; padding:8px 14px; border:1px solid rgba(31,29,27,.25); border-radius:8px;
  background:rgba(251,250,247,.75); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:pointer;
  font-family:'Jost',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.04em; color:#1F1D1B }
#s19 .te-guardar:hover{ background:#FBFAF7 }
@media (max-width:640px){ #s19 .te-guardar{ position:static; order:3; margin-top:12px; font-size:12.5px; padding:8px 14px } }

/* 21 oct · Vivi: «hay texto en el panel lateral muy chiquito y muy delgadito,
   muy difícil de leer»: el panel a 400 y un punto más grande */
#s19 .te-panel{ font-weight:400 }
#s19 .te-chico, #s19 .te-nota-p{ font-size:13px; line-height:1.45; color:#5F5A53 }
#s19 .ms-sub{ font-size:13px; letter-spacing:.03em; color:#46423D }
#s19 .ms-est{ font-size:13px; font-weight:500 }
#s19 .ms-gratis{ font-size:13px }
#s19 .te-paso-r{ font-size:13px; color:#5F5A53 }
#s19 .te-dis-b small, #s19 .te-dis4 .te-dis-b small{ font-size:13px; color:#2E2B28 }
#s19 .te-pintura small{ font-size:12.5px }
#s19 .ms-mini{ font-size:12.5px }

/* 21 oct · El diseño (todos, tres por renglón) y el estilo, en pasos separados */
#s19 .te-dis-todos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
#s19 .te-dis-todos .te-dis-b{ padding:12px 6px 8px; gap:7px }
#s19 .te-dis-todos .te-dis-b .tj-card{ width:84% }
#s19 .te-dis-todos .te-dis-b small{ font-size:12px; line-height:1.25; text-align:center }
#s19 .te-estilos-x{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 6px }
#s19 .te-estilo-x{ display:flex; flex-direction:column; gap:5px; padding:0 0 8px; border:1.5px solid #E4E0D9; border-radius:8px; background:#fff; cursor:pointer; text-align:left; overflow:hidden }
#s19 .te-estilo-x img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block }
#s19 .te-estilo-x b{ padding:0 8px; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; color:#1F1D1B }
#s19 .te-estilo-x small{ padding:0 8px; font-size:11.5px; line-height:1.3; color:#5F5A53 }
#s19 .te-estilo-x.on{ border-color:#1F1D1B }

/* 21 oct, tarde · Los colores del marco a sangre (paso 1, cuando el diseño los tiene) */
.te-colores{ display:flex; flex-wrap:wrap; gap:8px }
.te-color{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #D9D4CC; border-radius:8px; padding:6px 13px 6px 7px; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; color:#1F1D1B }
.te-color i{ width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12) }
.te-color.on{ border-color:#1F1D1B; box-shadow:0 0 0 1px #1F1D1B }

/* 21 oct, noche · El nombre del proyecto de tarjetas («Tarjetas familia ZO») */
.te-nombre{ display:flex; align-items:baseline; gap:8px; margin-left:auto; font-family:'Jost',sans-serif }
.te-nombre span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#79746D }
.te-nombre input{ width:min(260px,52vw); border:0; border-bottom:1px solid #CFC8BD; background:transparent; padding:4px 2px; font:inherit; font-size:15px; color:#1F1D1B; outline:none }
.te-nombre input:focus{ border-bottom-color:#1F1D1B }
@media (max-width:640px){ .te-nombre{ margin-left:0; width:100% } .te-nombre input{ flex:1 } }
.te-head{ flex-wrap:wrap }

/* 21 oct, noche · Vivi: «darle más sombra a la tarjeta para que resalte más sobre el fondo» */
#s19 .te-card .tj-card{ box-shadow:0 2px 3px rgba(0,0,0,.08), 0 22px 44px -16px rgba(44,37,32,.6), 0 40px 70px -40px rgba(44,37,32,.45) }
/* y los colores del marco, sobre la tarjeta (arriba a la izquierda) */
#s19 .te-col-st{ position:absolute; top:14px; left:16px; z-index:6; display:flex; gap:6px; padding:5px; border-radius:999px; background:rgba(255,255,255,.42) }
#s19 .te-col-st button{ width:24px; height:24px; border-radius:50%; border:0; padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14) }
#s19 .te-col-st button.on{ box-shadow:0 0 0 2px #FBFAF7, 0 0 0 3.5px #1F1D1B }
@media (max-width:640px){ #s19 .te-col-st{ position:static; order:2; margin:0 0 10px } }
#s19 .te-col-st[hidden]{ display:none }

/* 22 oct · Vivi: «la vista de la tarjeta un poquito más chica para que tenga el mismo
   espacio libre arriba y abajo»: abajo, lo mismo que ocupan arriba el gris y Frente/Reverso */
@media (min-width:641px){
  #s19 .te-stage{ padding-bottom:62px }
  #s19 .te-card, #s19 .te-card.te-chica{ width:min(480px, 80%, calc((100vh - 310px) * 17 / 22)) }
}
/* y en el panel, los diseños sin su nombre abajo: que luzca el diseño */
#s19 .te-dis-todos .te-dis-b{ padding:10px 6px }
/* 22 oct · los mensajes del reverso */
#s19 .te-revs{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px }
#s19 .te-rev-o{ text-align:left; background:#fff; border:1px solid #D9D4CC; border-radius:10px; padding:10px 12px; cursor:pointer; font-family:'EB Garamond',var(--font-display),serif; font-size:15px; line-height:1.35; color:#1F1D1B }
#s19 .te-rev-o.on{ border-color:#1F1D1B; box-shadow:inset 0 0 0 1px #1F1D1B }
#s19 .te-rev-mio{ font-family:'Jost',sans-serif; font-size:13.5px; letter-spacing:.02em }
/* 22 oct · la × de cada foto, siempre a la vista; y «+ Nuevo proyecto» junto al nombre */
#s19 .te-foto-i{ position:relative }
#s19 .te-foto-i .ms-gal-x{ opacity:1; top:-7px; right:-7px; width:22px; height:22px; line-height:22px; font-size:14px; z-index:2 }
#s19 .te-nuevo{ background:none; border:1px solid #CFC8BD; border-radius:8px; padding:6px 12px; cursor:pointer; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.04em; color:#46423D; white-space:nowrap }
#s19 .te-nuevo:hover{ border-color:#1F1D1B; color:#1F1D1B }
#s19 .te-guardar.te-guardar-ok{ background:rgba(251,250,247,.45); color:#46423D; border-color:rgba(31,29,27,.15); cursor:default }
/* 22 oct · Los tres estilos en grande (verEstilos) */
.te-est-v{ position:fixed; inset:0; z-index:950; background:rgba(31,29,27,.55); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto }
.te-est-v[hidden]{ display:none }
.te-est-c{ position:relative; width:min(1180px,100%); max-height:calc(100vh - 40px); overflow-y:auto; background:#FBFAF7; border-radius:14px; padding:26px 26px 22px; box-sizing:border-box; font-family:'Jost',sans-serif; color:#1F1D1B }
.te-est-c h3{ margin:0 0 4px; font-family:var(--font-display); font-weight:400; font-size:26px }
.te-est-c > p{ margin:0 0 18px; font-size:14px; color:#5F5A53 }
.te-est-x{ position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; border:0; background:#EFEDE9; font-size:20px; line-height:34px; cursor:pointer; color:#1F1D1B }
.te-est-g{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start }
.te-est-g figure{ margin:0; display:flex; flex-direction:column; gap:10px }
.te-est-g img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; background:#fff; box-shadow:0 0 0 1px #E4E0D9 }
.te-est-o img{ object-fit:cover; filter:saturate(.95) }
.te-est-i.on img{ box-shadow:0 0 0 2px #1F1D1B }
.te-est-g figcaption{ display:flex; flex-direction:column; gap:3px }
.te-est-g b{ font-weight:500; font-size:15px }
.te-est-g small{ font-size:13px; color:#5F5A53; line-height:1.35 }
.te-est-b{ margin-top:8px; align-self:flex-start; background:#1F1D1B; color:#FBFAF7; border:0; border-radius:8px; padding:8px 16px; font:inherit; font-size:13px; cursor:pointer }
.te-est-i.on .te-est-b{ background:#EFEDE9; color:#1F1D1B }
@media (max-width:900px){ .te-est-g{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
#s19 .te-ver-est{ margin:10px 0 0 }
/* 22 oct · los gorros con la familia (paso 2 y la ventana de estilos) */
#s19 .te-gor{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
#s19 .te-gor-b{ display:flex; flex-direction:column; gap:6px; padding:6px 6px 8px; background:#fff; border:1px solid #D9D4CC; border-radius:10px; cursor:pointer; text-align:left; font-family:'Jost',sans-serif; color:#1F1D1B }
#s19 .te-gor-b img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px }
/* 28 oct · el sombrero de bruja, encima de la muestra */
#s19 .te-gor-m{ position:relative; display:block }
#s19 .te-gor-sombrero{ position:absolute; right:6px; top:6px; width:30%; padding:5% 4% 3%; background:rgba(255,255,255,.92); border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.18); box-sizing:border-box }
#s19 .te-gor-b b{ font-weight:500; font-size:13px; padding:0 2px }
#s19 .te-gor-b.on{ border-color:#1F1D1B; box-shadow:inset 0 0 0 1px #1F1D1B }
.te-est-gz{ display:inline-flex; gap:2px; margin:0 0 16px; background:#EFEDE9; border-radius:8px; padding:3px }
.te-est-gz button{ border:0; background:none; border-radius:8px; padding:7px 16px; font:inherit; font-size:13px; color:#5F5A53; cursor:pointer }
.te-est-gz button.on{ background:#fff; color:#1F1D1B; box-shadow:0 1px 2px rgba(0,0,0,.08) }

/* 22 oct · Vivi: en las ventanas con scroll, «para que no se sienta raro las esquinas rectas del lado del scroll y las redondeadas del otro, hacemos todas las esquinas rectas» */
.te-est-c{ border-radius:0 }
/* 22 oct · el estilo bajo cada prueba; el mensaje del reverso elegido, en olivo claro */
#s19 .te-pz-e{ display:block; margin-top:5px; font-family:'Jost',sans-serif; font-size:12px; color:#5F5A53; text-align:center }
#s19 .te-rev-o.on{ background:#E6E9D8; border-color:#7E8B5B; box-shadow:inset 0 0 0 1px #7E8B5B }
/* 22 oct · el mensaje de atrás se escribe sobre la tarjeta */
#s19 .te-card .tj-rev-m[contenteditable]{ display:block; min-height:1.4em; cursor:text; outline:none; border-radius:2px; transition:box-shadow .15s }
#s19 .te-card .tj-rev-m[contenteditable]:hover{ box-shadow:0 0 0 1px rgba(31,29,27,.3) }
#s19 .te-card .tj-rev-m[contenteditable]:focus{ box-shadow:0 0 0 1.5px #1F1D1B; background:rgba(255,255,255,.3) }
#s19 .te-card .tj-rev-m[contenteditable]:empty::before{ content:attr(data-vacio); color:#A39D94; font-style:italic }
/* 22 oct · la tarjeta vacía con el +, para crear otra (al final de «Tus tarjetas») */
#s19 .te-guard-vacia{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:17/22; box-sizing:border-box; border:1.5px dashed #B9B1A5; background:rgba(255,255,255,.55); transition:border-color .15s, background .15s }
#s19 .te-guard-vacia i{ font-style:normal; font-family:'Jost',sans-serif; font-weight:300; font-size:34px; line-height:1; color:#5F5A53 }
#s19 .te-guard-mas .te-guard-b:hover .te-guard-vacia{ border-color:#1F1D1B; background:#fff }
/* 22 oct · Vivi, en el celular: «se traslapa todo lo del panel con la vista previa de la
   tarjeta». La tarjeta se quedaba pegada arriba (sticky) y el panel le pasaba por encima.
   Con una sola columna, la tarjeta va arriba y el panel debajo, sin pegarse. */
@media (max-width:820px){
  #s19 .te-stage{ position:relative; top:0; z-index:auto }
  #s19 .te-panel{ position:relative; z-index:1 }
}
/* 22 oct · rectangulares con esquinas redondeadas: la caja 10 px, cada opción 7 px */
.te-lado, .te-est-gz{ border-radius:10px }
.te-lado button, .te-est-gz button{ border-radius:7px }
/* 27 oct · Imprimir en casa (sólo el equipo) */
.te-casa{ display:block; width:100%; margin-top:10px; font:inherit; font-size:14px; padding:10px 14px; border:1px solid #DDD3C4; border-radius:10px; background:#FFFDF9; color:#4A4038; cursor:pointer }
.te-casa-c{ margin-top:14px; padding:14px 16px; border:1px solid #E6DDCF; border-radius:12px; background:#FFFDF9 }
.te-casa-n{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 8px }
.te-casa-n button{ font:inherit; font-size:14px; min-width:42px; padding:6px 10px; border:1px solid #DDD3C4; border-radius:20px; background:#fff; cursor:pointer }
.te-casa-n button.on{ background:#2F2A24; border-color:#2F2A24; color:#fff }
.te-casa-b{ display:grid; gap:0; margin-top:10px }
.te-casa-b .te-cta{ width:100% }

/* 28 oct · antes y después: arriba a la izquierda, sobre la tarjeta */
#s19 .te-antes{ position:absolute; top:6px; left:6px; z-index:7; display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:#1F1D1B; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.16) }
#s19 .te-antes svg{ width:16px; height:16px }
#s19 .te-antes span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
#s19 .te-antes.on{ background:#1F1D1B; color:#fff }

/* 28 oct · Halloween trae tres (como en la foto, bruja y zombie) */
#s19 .te-gor.te-gor-3{ grid-template-columns:repeat(3, 1fr); gap:6px }
#s19 .te-gor-3 .te-gor-b b{ font-size:12px; line-height:1.25 }

/* 29 oct · Vivi: «sale cortada la vista previa de la tarjeta en el celular». Con varias tarjetas
   guardadas, la tira de «Tus tarjetas» empujaba el ancho del panel (un elemento de rejilla no se
   encoge por debajo de su contenido) y la página entera quedaba más ancha que el teléfono. La
   tira se desliza sola; el panel y la tarjeta no crecen por ella. */
#s19 .te-grid > *, #s19 .te-panel, #s19 .te-guardadas, #s19 .te-guard{ min-width:0 }
#s19 .te-guard{ max-width:100% }