/* ══════════════════════════════════════════════════════════════════════════
   KORA · TARJETAS DE MESA — 18 oct 2026 (js/kora-mesa.js)
   Plana y parada, 8.5 × 11 cm como la navideña (21 oct; antes 9.5 × 11, «un poco más cuadradas»): el nombre arriba y el retrato abajo. Usa la tarjeta de kora-tarjetas.css (cqmin) y el
   editor de kora-tarjeta-editor.css (te-*); aquí sólo lo propio.
   ══════════════════════════════════════════════════════════════════════════ */
.tj-card.ms-card{ width:66%; aspect-ratio:17/22 }   /* 21 oct, noche · Vivi: «las tarjetas de mesa deben llevar el mismo tamaño» que las navideñas: 8.5 × 11 cm */
.ms-in{ flex-direction:column; align-items:center; gap:6cqmin; padding:11cqmin 11cqmin 12cqmin }
.ms-ret{ position:relative; flex:1 1 auto; min-height:0; width:100%; background-color:#EDE8DF; background-repeat:no-repeat }
.ms-nom{ --f:1; flex:none; max-width:100%; text-align:center }

/* Su foto (o su pintura), ya encuadrada a mano en cuadro: llena su forma. */
.ms-ret.ms-foto{ overflow:hidden; background:#EDE8DF }
.ms-ret.ms-foto img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover }
/* El hueco del que todavía no sube su foto */
.ms-ret.ms-vacio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqmin; background:#EFEBE4; box-shadow:inset 0 0 0 .5cqmin #D9D1C2 }
.ms-vacio svg{ width:30%; fill:none; stroke:#A39D94; stroke-width:1.2 }
.ms-vacio small{ font-family:'Jost',sans-serif; font-size:4.4cqmin; letter-spacing:.12em; text-transform:uppercase; color:#8E877D }

/* 21 oct, noche · Los cuatro de Vivi. La plantilla (.ms-deco) va tal cual, a todo lo
   de la tarjeta; el retrato, cuadrado y sin fondo (su blanco se vuelve el hueso). */
.ms-deco{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.ms-listones .ms-ret, .ms-ondas .ms-ret, .ms-destellos .ms-ret, .ms-salvia .ms-ret{ flex:none; aspect-ratio:1/1; background-color:transparent }
.ms-listones .ms-ret.ms-foto, .ms-ondas .ms-ret.ms-foto, .ms-destellos .ms-ret.ms-foto, .ms-salvia .ms-ret.ms-foto{ background:transparent }
.ms-listones .ms-foto img, .ms-ondas .ms-foto img, .ms-destellos .ms-foto img, .ms-salvia .ms-foto img{ object-fit:contain; mix-blend-mode:multiply }
.ms-listones .ms-nom, .ms-ondas .ms-nom, .ms-destellos .ms-nom, .ms-salvia .ms-nom{ position:relative }

/* Listones: la guirnalda de moños arriba, el nombre a mano encima de la orilla del retrato */
.ms-listones .ms-in{ justify-content:center; gap:0; padding:24cqmin 9cqmin 6cqmin }
.ms-listones .ms-ret{ width:86% }
.ms-listones .ms-nom{ margin-top:-8cqmin; font-family:'Mrs Saint Delafield',cursive; font-size:calc(30cqmin * var(--f)); line-height:1; color:#4A1A22 }

/* Marco ondulado: el marco verde a mano y el nombre en letra redonda y gruesa */
.ms-ondas .ms-in{ justify-content:center; gap:5cqmin; padding:14cqmin 14cqmin }
.ms-ondas .ms-ret{ width:86% }
.ms-ondas .ms-nom{ font-family:'Grandstander',sans-serif; font-weight:600; font-size:calc(14cqmin * var(--f)); line-height:1; letter-spacing:.06em; text-transform:uppercase; color:#4F5B22 }

/* Destellos: los destellos arriba, la rama abajo, el nombre a mano entre los dos */
.ms-destellos .ms-ret{ width:74% }
.ms-destellos .ms-in{ justify-content:flex-start; gap:1cqmin; padding:16cqmin 10cqmin 0 }
.ms-destellos .ms-deco{ mix-blend-mode:multiply }
.ms-destellos .ms-nom{ font-family:'Caveat',cursive; font-weight:500; font-size:calc(16cqmin * var(--f)); line-height:1; color:#4A1E22 }

/* Salvia: como la navideña (Salvia) */
.ms-salvia{ background:#6B6E5E }
.ms-salvia .ms-in{ padding:11cqmin 12cqmin }
.ms-sa-in{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqmin; flex:1 1 auto; width:100%; box-sizing:border-box; background:#F6F1E7; border:.9cqmin solid #2F2F2C; padding:6cqmin 7cqmin }
.ms-salvia .ms-ret{ width:84% }
.ms-salvia .ms-nom{ font-family:'Homemade Apple',cursive; font-size:calc(12cqmin * var(--f)); line-height:1.5; color:#2F2F2C }
.ms-sa-f{ font-family:'Jost',sans-serif; font-size:3.6cqmin; letter-spacing:.1em; text-transform:uppercase; color:#2F2F2C; text-align:center }
#s20 .ms-firma{ display:flex; align-items:center; gap:10px; margin-top:10px }
#s20 .ms-firma span{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#79746D }
#s20 .ms-firma input{ flex:1; border:1px solid #D9D4CC; border-radius:8px; padding:8px 10px; font:inherit; font-size:14px }

/* La vuelta: el mensaje */
.ms-rev .ms-in{ flex-direction:column; justify-content:center; gap:3.4cqmin; text-align:center; padding:9cqmin 14cqmin }
.ms-para{ font-family:'Caveat',cursive; font-weight:600; font-size:12cqmin; line-height:1; color:#A3262A }
.ms-tema{ font-family:var(--font-display); font-size:9cqmin; line-height:1.1; letter-spacing:.14em; text-transform:uppercase; color:#2E2A26 }
.ms-tema::after{ content:''; display:block; width:8cqmin; height:.5cqmin; margin:3.2cqmin auto 0; background:#A3262A }
.ms-msg{ font-family:var(--font-display); font-size:6.6cqmin; line-height:1.4; color:#2E2A26; overflow-wrap:anywhere }
.ms-pie{ font-family:'Jost',sans-serif; font-size:3.4cqmin; letter-spacing:.22em; text-transform:uppercase; color:#A39D94 }

/* En el editor */
.te-card.ms-grande{ width:min(330px,62%) }
.te-card.ms-grande .tj-card{ width:100% }
.ms-dis{ grid-template-columns:repeat(3,1fr) }
.ms-dis .tj-card{ width:66% }
.ms-otro{ margin-top:16px; background:none; border:1px solid #B9B3AA; border-radius:8px; padding:6px 14px; cursor:pointer; font-family:'Jost',sans-serif; font-size:12.5px; color:#46423D }
.ms-otro:hover{ border-color:#1F1D1B; color:#1F1D1B }
.ms-todos{ margin-top:10px }
.ms-cat{ margin-top:10px; font-family:'Jost',sans-serif }
.ms-cat summary{ cursor:pointer; font-size:12.5px; color:#1F1D1B; text-decoration:underline; text-underline-offset:3px }
.ms-cat ol{ margin:10px 0 0; padding:0 0 0 22px; max-height:300px; overflow:auto; font-family:var(--font-display); font-size:14px; color:#46423D }
.ms-cat li{ margin-bottom:4px }
.ms-cat li button{ display:block; width:100%; text-align:left; background:none; border:0; padding:4px 6px; border-radius:6px; cursor:pointer; font:inherit; color:inherit; line-height:1.35 }
.ms-cat li button:hover{ background:#F2EFEA }
.ms-cat li button.tiene{ color:#1F1D1B }
.ms-cat li button small{ display:block; font-family:'Jost',sans-serif; font-size:11px; color:#A3262A }
.ms-lista{ display:flex; flex-direction:column; gap:6px }
.ms-fila{ display:flex; align-items:flex-start; gap:12px; padding:8px; border:1px solid #E4E0D9; border-radius:10px; background:#fff; cursor:pointer }
.ms-fila.on{ border-color:#1F1D1B }
.ms-fila-f{ position:relative; flex:none; width:76px; height:76px; border-radius:10px; overflow:hidden; background:#EFEDE9; display:flex; align-items:center; justify-content:center; cursor:pointer }
.ms-fila-f img{ width:100%; height:100%; object-fit:cover }
.ms-fila-f > svg{ width:24px; height:24px; fill:none; stroke:#46423D; stroke-width:1.5 }
.ms-fila-ej{ position:absolute; inset:0; background-repeat:no-repeat }
/* La camarita encima, para que se vea que ahí se sube o se cambia la foto */
.ms-fila-cam{ display:none; position:absolute; right:4px; bottom:4px; width:22px; height:22px; border-radius:50%; background:rgba(31,29,27,.72); align-items:center; justify-content:center }
.ms-fila-f.tiene .ms-fila-cam{ display:flex }
.ms-fila-cam svg{ width:13px; height:13px; fill:none; stroke:#fff; stroke-width:1.8 }
/* Lo que dice atrás, en el renglón */
.ms-atras{ display:block; margin:1px 0 3px; font-family:var(--font-display); font-size:13.5px; line-height:1.35; color:#46423D }
.ms-atras b{ display:block; font-family:'Jost',sans-serif; font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#A3262A }
.ms-atras .ms-mini{ margin-left:6px; font-size:11px }
.ms-fila-f{ box-shadow:inset 0 0 0 1.5px #B9B3AA }
.ms-fila-f:hover{ box-shadow:inset 0 0 0 1.5px #1F1D1B }
.ms-fila-f.tiene{ box-shadow:none }
.ms-est{ font-size:11.5px; color:#8E877D }
.ms-est.ok{ color:#4C6657 }
.ms-est.ojo{ color:#A3262A }
/* Pintar gratis (hasta 3 por cuenta) */
.ms-acc{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.ms-mini{ background:none; border:0; padding:0; cursor:pointer; font-family:'Jost',sans-serif; font-size:11.5px; color:#1F1D1B; text-decoration:underline; text-underline-offset:2px }
.ms-pintar{ margin:1px 0; background:#1F1D1B; color:#FBFAF7; border:0; border-radius:8px; padding:4px 12px; cursor:pointer; font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.04em }
.ms-pintar:hover{ background:#000 }
.ms-ejs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.ms-ejs-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.ms-ej{ display:flex; flex-direction:column; gap:6px; padding:0; border:0; background:none; cursor:pointer; text-align:left }
.ms-ej-art{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#EFEDE9; box-shadow:0 0 0 1px #E4E0D9 }
.ms-ej-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 25% }
.ms-ej.on .ms-ej-art{ box-shadow:0 0 0 2px #1F1D1B }
.ms-ej-n{ font-family:'Jost',sans-serif; font-size:12.5px; color:#1F1D1B }
.ms-ej-dibujo svg{ width:58%; height:auto }
.ms-sub{ margin:14px 0 6px; font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.06em; color:#5F5A53 }
.ms-gal{ display:flex; flex-wrap:wrap; gap:6px }
.ms-gal-f{ position:relative; width:52px; height:52px }
.ms-gal-f > button[data-galeria]{ width:100%; height:100%; padding:0; border:0; border-radius:6px; overflow:hidden; cursor:pointer; background:#EFEDE9 }
.ms-gal-f img{ width:100%; height:100%; object-fit:cover; display:block }
.ms-gal-f.on > button[data-galeria]{ box-shadow:0 0 0 2px #1F1D1B }
.ms-gal-x{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:0; padding:0; background:#1F1D1B; color:#fff; font-size:12px; line-height:18px; cursor:pointer; opacity:0; transition:opacity .15s }
.ms-gal-f:hover .ms-gal-x, .ms-gal-x:focus{ opacity:1 }
@media (hover:none){ .ms-gal-x{ opacity:.85 } }
.ms-gal-mas{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:1px dashed #B9B3AA; border-radius:6px; cursor:pointer; font-family:'Jost',sans-serif; font-size:22px; color:#79746D }
.ms-gal-mas:hover{ border-color:#1F1D1B; color:#1F1D1B }
.ms-cat li b{ font-weight:500; color:#1F1D1B }
.ms-gratis{ margin:10px 0 0; padding:7px 11px; background:#F3EFE8; border-radius:8px; font-family:'Jost',sans-serif; font-size:12px; line-height:1.45; color:#46423D }
.ms-fila-c{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px }
.ms-fila-c input{ width:100%; box-sizing:border-box; border:0; padding:2px 0; outline:none; background:none; font-family:'Jost',sans-serif; color:#1F1D1B }
.ms-nombre{ font-size:14px }
.ms-propio{ font-size:12px; color:#5F5A53 !important }
.ms-quita{ flex:none; background:none; border:0; cursor:pointer; font-size:20px; line-height:1; color:#A39D94; padding:4px 6px }
.ms-quita:hover{ color:#1F1D1B }
.ms-mas{ margin-top:8px; background:none; border:1px dashed #B9B3AA; border-radius:10px; width:100%; padding:9px; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; color:#46423D }
.ms-mas:hover{ border-color:#1F1D1B; color:#1F1D1B }

/* En la página de tarjetas: tres tarjetas sobre el mantel, como en la mesa */
.ms-sec{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:center }
.ms-sec-art{ position:relative; aspect-ratio:4/3; overflow:hidden; background-color:#E8E1D4;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120,100,80,.06) 0 1px, transparent 1px 3px) }
.ms-plana{ position:absolute; width:27% }
.ms-plana .tj-card{ width:100%; box-shadow:0 1px 1px rgba(0,0,0,.08), 0 10px 18px -10px rgba(44,37,32,.45) }
.ms-plana-0{ left:8%;  top:12%; transform:rotate(-7deg) }
.ms-plana-1{ left:38%; top:20%; transform:rotate(3deg) }
.ms-plana-2{ left:66%; top:9%;  transform:rotate(-3deg) }

@media (max-width:820px){
  .ms-sec{ grid-template-columns:1fr; gap:18px }
  .te-card.ms-grande{ width:min(230px,60%) }
}

/* 19 oct · al acabarse las 5: la invitación al Club (pruebas sin límite) */
.ms-club{ display:inline; margin:0; padding:0; border:0; background:none; font:inherit; color:#A3262A; text-decoration:underline; text-underline-offset:2px; cursor:pointer }

/* 28 oct · antes y después, arriba a la izquierda (el mismo botón que la tarjeta navideña) */
#s20 #msCard{ position:relative }
#s20 .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) }
#s20 .te-antes svg{ width:16px; height:16px }
#s20 .te-antes span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
#s20 .te-antes.on{ background:#1F1D1B; color:#fff }