/* ============================================================
   Kakao Catálogos — estilos (v0.5 · pulido de diseño)
   Identidad: naranja #F7931E + slate #3C4858 (sin cambios).
   - Tipografía: stacks del sistema (sin CDNs, sin FOUT). Serif editorial = Georgia.
   - Todo el editor/lector vive bajo #kc-app (no contamina WordPress).
   - Modal y toast se agregan al <body> (fuera de #kc-app): reglas propias con `body>`.
   - La revista (StPageFlip) conserva su config; aquí solo se estiliza. Los tamaños
     internos usan container-queries (cqw): NO tocar esas unidades.
   - Contraste: el naranja #F7931E NO se usa como color de texto sobre blanco (2.3:1);
     el texto naranja usa --kk-orange-700 (≥4.5:1) y el botón primario lleva texto oscuro.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* marca */
  --kk-orange:#F7931E;
  --kk-orange-600:#E07A12;
  --kk-orange-700:#B45309;          /* texto/iconos naranja sobre claro (AA) */
  --kk-orange-050:#FFF4E6;
  --kk-orange-100:#FDE3C2;
  --kk-slate:#3C4858;
  --kk-slate-700:#2E3843;
  --kk-slate-900:#1E2630;
  --kk-ink:#222B35;
  --kk-muted:#566170;               /* 5.7:1 sobre blanco */
  --kk-line:#E3E7EB;
  --kk-line-strong:#8E98A3;
  --kk-bg:#F4F5F7;
  --kk-card:#FFFFFF;
  --kk-danger:#B42318;
  --kk-danger-bg:#FFF4F2;
  --kk-ok:#1F7A45;
  --kk-paper:#FFFEFB;
  --kk-paper-edge:#E9E5DB;

  /* tipografía */
  --kk-font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --kk-serif:Georgia,'Times New Roman',serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.9375rem; --fs-base:1rem; --fs-lg:1.25rem; --fs-xl:1.75rem; --fs-2xl:2rem;

  /* espaciado (escala 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* radios */
  --kk-radius-sm:8px; --kk-radius:12px; --kk-radius-lg:16px; --kk-radius-pill:999px;

  /* sombras en capas (ambiente + directa) */
  --sh-1:0 1px 2px rgba(30,38,48,.06),0 1px 1px rgba(30,38,48,.04);
  --sh-2:0 1px 2px rgba(30,38,48,.05),0 4px 8px rgba(30,38,48,.05),0 12px 24px rgba(30,38,48,.05);
  --sh-3:0 2px 4px rgba(30,38,48,.05),0 8px 16px rgba(30,38,48,.07),0 20px 40px rgba(30,38,48,.08);
  --sh-4:0 4px 8px rgba(20,26,32,.08),0 16px 32px rgba(20,26,32,.16),0 40px 80px rgba(20,26,32,.22);
  --kk-shadow:var(--sh-2);

  /* foco accesible: anillo slate + halo naranja (≥3:1 sobre blanco y sobre naranja) */
  --focus:0 0 0 2px #fff,0 0 0 4px var(--kk-slate),0 0 0 7px rgba(247,147,30,.35);

  /* movimiento */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:.12s; --dur-2:.2s; --dur-3:.32s;
}

/* ---------- 2. BASE ---------- */
#kc-app,body:has(#kc-app){margin:0;background:var(--kk-bg);color:var(--kk-ink);font-family:var(--kk-font)}
#kc-app{font-size:var(--fs-base);line-height:1.5;min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body.wp-admin #kc-app{min-height:calc(100vh - 32px)}
#kc-app *,#kc-app *::before,#kc-app *::after{box-sizing:border-box}
#kc-app [hidden]{display:none!important}
#kc-app h1{font-size:var(--fs-2xl);line-height:1.15;margin:0 0 var(--sp-1);letter-spacing:-.02em;color:var(--kk-slate-900);text-wrap:balance}
#kc-app h2,#kc-app h3{text-wrap:balance}
#kc-app p{line-height:1.5}
#kc-app .muted{color:var(--kk-muted)}
#kc-app ::selection,body>.modal ::selection{background:var(--kk-orange-100)}

/* ---------- 3. BOTONES ---------- */
#kc-app button,#kc-app .btn{
  font:inherit;font-size:var(--fs-md);line-height:1.2;cursor:pointer;
  border:1px solid var(--kk-line-strong);border-radius:10px;
  min-height:40px;padding:9px 16px;background:#fff;color:var(--kk-slate);font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  box-shadow:var(--sh-1);
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease),color var(--dur-2) var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
#kc-app button:hover:not(:disabled){border-color:#aab4bd;background:#F9FAFB;box-shadow:var(--sh-2)}
#kc-app button:active:not(:disabled){transform:translateY(1px);box-shadow:none;background:#F1F3F5}
#kc-app button:focus-visible,#kc-app .btn:focus-visible,#kc-app a:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus)}
#kc-app button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
#kc-app button.primary{background:var(--kk-orange);color:var(--kk-slate-900);border-color:var(--kk-orange);font-weight:700}
#kc-app button.primary:hover:not(:disabled){background:var(--kk-orange-600);border-color:var(--kk-orange-600);box-shadow:0 4px 12px rgba(224,122,18,.35)}
#kc-app button.primary:active:not(:disabled){background:#C4660B;box-shadow:none}
#kc-app button[data-act=remove]:hover:not(:disabled),#kc-app button[data-act=unpublish]:hover:not(:disabled){color:var(--kk-danger);border-color:#F0B8B2;background:var(--kk-danger-bg)}
#kc-app button[aria-busy=true]{position:relative;color:transparent;pointer-events:none}
#kc-app button[aria-busy=true]::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-color:var(--kk-slate) transparent var(--kk-slate) transparent;border-radius:50%;animation:kc-spin .7s linear infinite}
@keyframes kc-spin{to{transform:rotate(360deg)}}

/* ---------- 4. ENCABEZADO / MARCA ---------- */
#kc-app .top{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) 4%;border-bottom:1px solid var(--kk-line);box-shadow:0 1px 0 rgba(30,38,48,.02),0 6px 16px -10px rgba(30,38,48,.18);gap:var(--sp-4);position:sticky;top:0;z-index:50}
body.wp-admin #kc-app .top{top:32px}
#kc-app .brand{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
#kc-app .brand-logo{height:34px;width:auto;display:block}
#kc-app .brand small{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kk-muted);border-left:1px solid var(--kk-line);padding-left:var(--sp-4);white-space:nowrap}
#kc-app .actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}

/* ---------- 5. WORKSPACE / LISTADO ---------- */
#kc-app .workspace{padding:var(--sp-8) 4% var(--sp-12);max-width:1500px;margin:auto;animation:kc-rise var(--dur-3) var(--ease) both}
#kc-app .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-6);gap:var(--sp-4)}
#kc-app .head h2{margin:0}
#kc-app .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-6)}
#kc-app .catalog-card{background:var(--kk-card);border:1px solid var(--kk-line);border-radius:var(--kk-radius-lg);overflow:hidden;box-shadow:var(--sh-2);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
#kc-app .catalog-card:hover,#kc-app .catalog-card:focus-within{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#d3d9de}
#kc-app .mini{padding:var(--sp-6);color:#fff;height:210px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(120% 90% at 100% 0%,rgba(247,147,30,.22),transparent 55%),linear-gradient(135deg,var(--kk-slate),var(--kk-slate-700));position:relative}
#kc-app .mini::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--kk-orange)}
#kc-app .mini.sale::after{background:#D8541F}
#kc-app .mini.christmas::after{background:#1F8A4C}
#kc-app .mini span:first-child{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
#kc-app .mini span:last-child{font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
#kc-app .mini h2{font-family:var(--kk-serif);font-weight:400;font-size:1.75rem;max-width:15em;margin:0;line-height:1.12;color:#fff}
#kc-app .card-body{padding:var(--sp-5)}
#kc-app .card-body p{margin:var(--sp-3) 0 var(--sp-4);color:var(--kk-muted)}
#kc-app .badge{font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;background:var(--kk-orange-050);color:#8F4207;padding:4px 11px;border-radius:var(--kk-radius-pill);display:inline-block;border:1px solid var(--kk-orange-100)}
#kc-app .card-body .actions button{flex:1 1 auto}

/* ---------- 6. EDITOR ---------- */
#kc-app .editor{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-6);align-items:start}
#kc-app .panel{background:var(--kk-card);border:1px solid var(--kk-line);border-radius:var(--kk-radius-lg);padding:var(--sp-6);box-shadow:var(--sh-2)}
#kc-app .panel h2{margin:0 0 var(--sp-1);font-size:var(--fs-lg);color:var(--kk-slate-900)}
#kc-app label{display:block;font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;margin:var(--sp-4) 0 6px;color:var(--kk-slate)}
#kc-app input:not([type=range]),#kc-app textarea,#kc-app select{width:100%;border:1px solid var(--kk-line-strong);border-radius:10px;padding:11px 12px;background:#fff;color:var(--kk-ink);font:inherit;font-size:var(--fs-base);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
#kc-app input:not([type=range]):hover,#kc-app textarea:hover,#kc-app select:hover{border-color:#9AA6B1}
#kc-app input:not([type=range]):focus,#kc-app textarea:focus,#kc-app select:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--kk-slate);box-shadow:0 0 0 3px rgba(247,147,30,.35)}
#kc-app textarea{min-height:80px;resize:vertical}
#kc-app .mobile-note{font-size:var(--fs-sm)}
#kc-app .panel>button{margin-top:var(--sp-2)}
#kc-app .panel>p{margin:var(--sp-3) 0}
#kc-app .product-row{display:flex;align-items:center;gap:var(--sp-4);border-bottom:1px solid #EEF1F3;padding:var(--sp-3) var(--sp-2);margin:0 calc(var(--sp-2) * -1);border-radius:var(--kk-radius-sm);transition:background-color var(--dur-2) var(--ease)}
#kc-app .product-row:hover{background:#FAFBFC}
#kc-app .product-row:last-child{border-bottom:none}
#kc-app .product-row img{width:70px;height:70px;object-fit:cover;border-radius:10px;border:1px solid var(--kk-line);background:#F3F4F6}
#kc-app .product-info{flex:1;min-width:0}
#kc-app .product-info h3{margin:0 0 2px;font-size:var(--fs-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kc-app .product-info strong{color:var(--kk-orange-700)}
#kc-app .kc-row-actions{display:flex;gap:6px;flex-wrap:wrap}
#kc-app .kc-row-actions button{padding:8px 12px;min-height:38px}
#kc-app .kc-row-actions button[data-act=up],#kc-app .kc-row-actions button[data-act=down]{width:38px;padding:0}
#kc-app .empty{padding:var(--sp-10) var(--sp-6);text-align:center;color:var(--kk-muted);border:1.5px dashed var(--kk-line-strong);border-radius:var(--kk-radius);background:#FAFBFC}
#kc-app .notice{padding:var(--sp-3) var(--sp-4);background:var(--kk-orange-050);border:1px solid #F3DCC0;border-left:4px solid var(--kk-orange);border-radius:10px;font-size:var(--fs-md);margin-bottom:var(--sp-5);color:#7A4A12}

/* ---------- 7. MODAL (fuera de #kc-app) ---------- */
body>.modal{position:fixed;inset:0;background:rgba(20,26,32,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:100000;display:flex;justify-content:center;align-items:flex-start;padding:5vh var(--sp-5);overflow:auto;overscroll-behavior:contain;font-family:var(--kk-font);font-size:16px;line-height:1.5;animation:kc-fade var(--dur-2) var(--ease) both}
body:has(>.modal){overflow:hidden}
body>.modal *,body>.modal *::before,body>.modal *::after{box-sizing:border-box}
body>.modal .modal-box{background:#fff;border-radius:18px;padding:var(--sp-6) 28px;width:540px;max-width:100%;margin:auto;box-shadow:var(--sh-4);animation:kc-pop var(--dur-3) var(--ease) both}
body>.modal .modal-box h2{margin:0 0 var(--sp-5);font-size:1.3rem;line-height:1.2;color:var(--kk-slate-900)}
body>.modal .field{margin-bottom:var(--sp-4)}
body>.modal .field-row{display:flex;gap:var(--sp-4)}
body>.modal .field-row .field{flex:1;min-width:0;margin-bottom:0}
body>.modal label{display:block;font-size:var(--fs-sm);font-weight:700;margin:0 0 6px;color:var(--kk-slate)}
body>.modal input,body>.modal textarea{width:100%;border:1px solid var(--kk-line-strong);border-radius:10px;padding:11px 12px;background:#fff;color:var(--kk-ink);font:inherit;font-size:16px;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
body>.modal input:hover,body>.modal textarea:hover{border-color:#9AA6B1}
body>.modal textarea{min-height:80px;resize:vertical}
body>.modal input:focus,body>.modal textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--kk-slate);box-shadow:0 0 0 3px rgba(247,147,30,.35)}
body>.modal input[type=file]{padding:8px;background:#F8F9FA;cursor:pointer;border-style:dashed}
body>.modal input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:var(--fs-md);margin-right:var(--sp-3);padding:7px 14px;border:1px solid var(--kk-line-strong);border-radius:8px;background:#fff;color:var(--kk-slate);cursor:pointer}
body>.modal input[type=file]::file-selector-button:hover{background:#F1F3F5}
body>.modal .muted{margin:4px 0 var(--sp-4);color:var(--kk-muted)}
body>.modal button{font:inherit;font-size:var(--fs-md);cursor:pointer;border:1px solid var(--kk-line-strong);border-radius:10px;min-height:42px;padding:10px 18px;background:#fff;color:var(--kk-slate);font-weight:600;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);touch-action:manipulation}
body>.modal button:hover{background:#F9FAFB;border-color:#aab4bd}
body>.modal button:active{transform:translateY(1px)}
body>.modal button:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus)}
body>.modal button.primary{background:var(--kk-orange);color:var(--kk-slate-900);border-color:var(--kk-orange);font-weight:700}
body>.modal button.primary:hover{background:var(--kk-orange-600);border-color:var(--kk-orange-600)}
body>.modal button:disabled{opacity:.45;cursor:not-allowed}
body>.modal .actions{display:flex;gap:var(--sp-3);justify-content:flex-end;margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid #EEF1F3}
body>.modal #image-preview{display:flex;justify-content:center;margin:var(--sp-2) 0 var(--sp-4)}
body>.modal #image-preview:empty{display:none}
body>.modal #image-preview img,body>.modal .modal-box img{max-height:150px;max-width:100%;border-radius:10px;border:1px solid var(--kk-line);background:#F3F4F6;box-shadow:var(--sh-1)}
body>.modal #image-preview div{border-radius:10px}

/* ---------- 8. TOAST (fuera de #kc-app) ---------- */
body>.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--kk-slate-900);color:#fff;padding:13px 20px 13px 18px;border-radius:12px;border-left:4px solid var(--kk-orange);z-index:100001;box-shadow:var(--sh-4);font-family:var(--kk-font);font-size:var(--fs-md);line-height:1.4;max-width:min(92vw,520px);animation:kc-toast var(--dur-3) var(--ease) both}

/* ---------- 9. ANIMACIONES UI ---------- */
@keyframes kc-fade{from{opacity:0}to{opacity:1}}
@keyframes kc-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kc-toast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes kc-pulse{50%{opacity:.5}}

/* ---------- 10. SKELETON / CARGA ----------
   #kc-app está vacío hasta que app.js renderiza → se muestra un esqueleto.
   También hay utilidades .kc-skeleton para futuros estados de carga. */
#kc-app:empty::before{content:"";display:block;height:62px;background:#fff;border-bottom:1px solid var(--kk-line)}
#kc-app:empty::after{content:"";display:block;max-width:1500px;height:260px;margin:var(--sp-8) auto 0;width:92%;border-radius:var(--kk-radius-lg);background:
  linear-gradient(#E8ECEF,#E8ECEF) 0 0/31.5% 100% no-repeat,
  linear-gradient(#E8ECEF,#E8ECEF) 50% 0/31.5% 100% no-repeat,
  linear-gradient(#E8ECEF,#E8ECEF) 100% 0/31.5% 100% no-repeat;animation:kc-pulse 1.4s ease-in-out infinite}
.kc-skeleton{display:block;border-radius:var(--kk-radius-sm);background:linear-gradient(90deg,#E8ECEF 25%,#F3F5F7 50%,#E8ECEF 75%);background-size:200% 100%;animation:kc-shimmer 1.3s linear infinite;color:transparent!important;user-select:none;pointer-events:none}
@keyframes kc-shimmer{to{background-position:-200% 0}}

/* ============================================================
   11. PÁGINAS (estructura compartida por impresión y lector)
   ============================================================ */
#kc-app .page{background:#fff;aspect-ratio:210/297;padding:7%;position:relative;overflow:hidden;color:var(--kk-ink)}

/* portada */
#kc-app .page.cover{--accent:var(--kk-orange);display:flex;flex-direction:column;justify-content:space-between;background:#FFFDF9}
#kc-app .page.cover.sale{--accent:#D8541F}
#kc-app .page.cover.christmas{--accent:#1F8A4C}
#kc-app .cover-head{display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--accent);padding-bottom:18px}
#kc-app .cover-logo{height:52px;width:auto}
#kc-app .cover .eyebrow{font-size:13px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--kk-muted)}
#kc-app .cover-main{padding:6% 0}
#kc-app .cover-main::before{content:"";display:block;width:64px;height:6px;background:var(--accent);border-radius:3px;margin-bottom:22px}
#kc-app .cover h1{font-family:var(--kk-serif);font-size:clamp(38px,7vw,74px);font-weight:400;line-height:1.04;letter-spacing:-.01em;margin:0;color:var(--kk-slate);max-width:660px}
#kc-app .cover p{font-size:19px;color:var(--kk-muted);margin:18px 0 0;max-width:560px}
#kc-app .cover-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--kk-muted);border-top:1px solid #EADFCE;padding-top:16px}

/* páginas de producto */
#kc-app .page-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E4E8EB;padding-bottom:14px;font-size:13px;color:var(--kk-muted)}
#kc-app .page-header strong{color:var(--kk-slate);font-size:15px;letter-spacing:.14em}
#kc-app .product-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;margin-top:28px}
#kc-app .item img{width:100%;height:220px;object-fit:contain;background:#F6F7F8;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(30,38,48,.06)}
#kc-app .item>div:first-child{border-radius:10px}
#kc-app .item .category{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--kk-orange-700);margin-top:12px;font-weight:700}
#kc-app .item h2{font-family:var(--kk-serif);font-weight:700;font-size:23px;margin:6px 0;color:var(--kk-slate);line-height:1.15}
#kc-app .item p{font-size:14px;margin:6px 0;color:var(--kk-muted);overflow-wrap:anywhere}
#kc-app .price{font-size:21px;font-weight:800;color:var(--kk-orange-700);font-variant-numeric:tabular-nums}
#kc-app .page-foot{position:absolute;bottom:3.5%;left:7%;right:7%;display:flex;justify-content:space-between;font-size:12px;color:var(--kk-muted);font-variant-numeric:tabular-nums}
/* placeholder de foto (el JS lo pinta inline; se unifica con !important) */
#kc-app .item>div:first-child:not(.category){background:linear-gradient(135deg,#F4F2EC,#E9E6DE)!important;color:#7A7467!important}

/* ============================================================
   12. LECTOR ANIMADO (StPageFlip) — dimensionado por container-query.
   ============================================================ */
#kc-app .viewer{background:radial-gradient(ellipse 80% 70% at 50% 38%,#FDFDFE 0%,#EBEEF2 62%,#DEE3E9 100%);padding:var(--sp-5) 3% var(--sp-8);min-height:calc(100vh - 100px);animation:kc-fade var(--dur-3) var(--ease) both}
#kc-app .reader-hint{text-align:center;color:var(--kk-muted);font-size:var(--fs-md);margin-bottom:var(--sp-4)}
#kc-app .book-stage{position:relative;isolation:isolate;max-width:1200px;margin:0 auto var(--sp-8)}
@media(min-width:801px){
  /* el libro completo (2 páginas, proporción 550:778) cabe en la altura visible */
  #kc-app .book-stage{max-width:min(1200px,max(560px,calc((100vh - 280px)*1.414)));max-width:min(1200px,max(560px,calc((100svh - 280px)*1.414)))}
}
#kc-app #flip-book{margin:auto}
#kc-app .stf__parent{touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#kc-app .stf__block{perspective:2000px}
/* StPageFlip posiciona cada hoja en absoluto; "#kc-app .page{position:relative}" ganaba por especificidad y apilaba las hojas (bug gris al girar) */
#kc-app .stf__item{position:absolute}
/* El pliegue de esquina sobresale del libro; sin recorte aparecía scroll (barra inferior) y la pantalla "temblaba".
   overflow:clip no crea contenedor de scroll; el margen deja ver la sombra y el borde del pliegue. */
html:has(#kc-app .book-stage),body:has(#kc-app .book-stage){overflow-x:clip}
html:has(#kc-app .book-stage){scrollbar-gutter:stable}
#kc-app .book-stage{overflow:clip;overflow-clip-margin:80px}
@supports not (overflow:clip){#kc-app .book-stage{overflow:visible}html:has(#kc-app .book-stage),body:has(#kc-app .book-stage){overflow-x:hidden}}

/* página dentro del libro */
#kc-app .book-stage .page{container-type:inline-size;background:var(--kk-paper);width:100%;height:100%;min-height:0;aspect-ratio:auto;padding:7%;overflow:hidden;border:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#kc-app .book-stage .page.cover{background:#FFFDF9}
/* fallback si StPageFlip no carga: una página plana */
#kc-app #flip-book:not(.stf__parent)>.page{height:auto;aspect-ratio:550/778;max-width:560px;margin:auto;box-shadow:var(--sh-3)}

/* realismo: brillo de papel (::before) y curvatura hacia el lomo (::after) */
#kc-app .book-stage .page::before,#kc-app .book-stage .page::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3}
#kc-app .book-stage .page::before{background:linear-gradient(115deg,rgba(70,55,30,.05) 0%,rgba(70,55,30,0) 28%,rgba(70,55,30,0) 70%,rgba(70,55,30,.04) 100%)}
#kc-app .book-stage .page.--left::after{background:
  linear-gradient(to left,rgba(40,30,15,.30) 0,rgba(40,30,15,.14) 2.5%,rgba(40,30,15,.05) 9%,rgba(40,30,15,0) 22%),
  linear-gradient(to right,rgba(40,30,15,.06) 0,rgba(40,30,15,0) 2.5%)}
#kc-app .book-stage .page.--right::after{background:
  linear-gradient(to right,rgba(40,30,15,.30) 0,rgba(40,30,15,.14) 2.5%,rgba(40,30,15,.05) 9%,rgba(40,30,15,0) 22%),
  linear-gradient(to left,rgba(40,30,15,.06) 0,rgba(40,30,15,0) 2.5%)}
/* tapa: surco de la bisagra junto al lomo */
#kc-app .book-stage .page.cover.--right::after{background:
  linear-gradient(to right,rgba(40,30,15,.34) 0,rgba(40,30,15,.10) 1.1%,rgba(255,255,255,.55) 1.7%,rgba(40,30,15,.08) 2.6%,rgba(40,30,15,.04) 7%,rgba(40,30,15,0) 20%)}
/* vista de una sola página (móvil): lomo más sutil */
#kc-app .stf__parent.--portrait .page::after{opacity:.55}

/* grosor de páginas (pila de cantos) + sombra proyectada del libro sobre la mesa */
#kc-app .book-stage .page.--right{border-radius:0 4px 4px 0;box-shadow:
  1px 0 0 #EFECE4,2px 0 0 #DDD9CF,3px 0 0 #EFECE4,4px 0 0 #CBC6BB,
  0 1px 0 #E9E5DB,0 2px 0 #D3CEC3,
  0 8px 12px -6px rgba(20,26,34,.30),0 24px 32px -14px rgba(20,26,34,.38),6px 34px 50px -22px rgba(20,26,34,.30)}
#kc-app .book-stage .page.--left{border-radius:4px 0 0 4px;box-shadow:
  -1px 0 0 #EFECE4,-2px 0 0 #DDD9CF,-3px 0 0 #EFECE4,-4px 0 0 #CBC6BB,
  0 1px 0 #E9E5DB,0 2px 0 #D3CEC3,
  0 8px 12px -6px rgba(20,26,34,.30),0 24px 32px -14px rgba(20,26,34,.38),-6px 34px 50px -22px rgba(20,26,34,.30)}
#kc-app .book-stage .page.cover.--right,#kc-app .book-stage .page.cover.--left{border-radius:3px 7px 7px 3px}

/* tipografía interna en cqw (NO modificar: define el tamaño responsive de la revista) */
#kc-app .book-stage .cover-head{padding-bottom:3.2cqw}
#kc-app .book-stage .cover-logo{height:11cqw}
#kc-app .book-stage .cover .eyebrow{font-size:2.4cqw;letter-spacing:.5cqw}
#kc-app .book-stage .cover-main{padding:7cqw 0}
#kc-app .book-stage .cover-main::before{width:14cqw;height:1.4cqw;margin-bottom:5cqw}
#kc-app .book-stage .cover h1{font-size:12.5cqw;line-height:1.03;overflow-wrap:anywhere}
#kc-app .book-stage .cover p{font-size:3.6cqw;margin-top:3cqw}
#kc-app .book-stage .cover-foot{font-size:2.3cqw;padding-top:3cqw}
#kc-app .book-stage .page-header{font-size:2.5cqw;padding-bottom:3cqw}
#kc-app .book-stage .page-header strong{font-size:2.9cqw}
#kc-app .book-stage .product-grid{gap:4cqw 4cqw;margin-top:5cqw}
#kc-app .book-stage .item img{height:33cqw}
#kc-app .book-stage .item>div:first-child{min-height:33cqw!important;font-size:2.5cqw}
#kc-app .book-stage .item .category{font-size:2cqw;letter-spacing:.3cqw;margin-top:2cqw}
#kc-app .book-stage .item h2{font-size:4cqw;line-height:1.15;margin:1.4cqw 0;overflow-wrap:anywhere}
#kc-app .book-stage .item p{font-size:2.6cqw;line-height:1.35;margin:1.3cqw 0}
#kc-app .book-stage .price{font-size:3.8cqw}
#kc-app .book-stage .page-foot{font-size:2cqw;bottom:3.5%;gap:10px}
#kc-app .book-stage .page-foot span:first-child{max-width:85%}
#kc-app:fullscreen{overflow:auto;background:#E7EBEF}
#kc-app:fullscreen .book-stage{max-width:min(1200px,max(560px,calc((100vh - 200px)*1.414)))}

/* ---------- controles del lector ---------- */
#kc-app .reader-controls{display:flex;justify-content:center;align-items:center;gap:var(--sp-3);background:rgba(255,255,255,.95);border:1px solid var(--kk-line);box-shadow:var(--sh-3);border-radius:var(--kk-radius-lg);padding:var(--sp-3) var(--sp-4);max-width:1200px;margin:0 auto var(--sp-5);flex-wrap:wrap}
#kc-app .reader-controls input[type=range]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:transparent;box-shadow:none;height:28px;width:180px;flex:1;min-width:90px;max-width:350px;cursor:pointer;accent-color:var(--kk-orange)}
#kc-app .reader-controls input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#B45309,#8E98A3)}
#kc-app .reader-controls input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#B45309,#8E98A3)}
#kc-app .reader-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--kk-orange);border:3px solid #fff;box-shadow:0 0 0 1px #7F8995,0 2px 6px rgba(30,38,48,.3);transition:transform var(--dur-1) var(--ease)}
#kc-app .reader-controls input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--kk-orange);border:3px solid #fff;box-shadow:0 0 0 1px #7F8995,0 2px 6px rgba(30,38,48,.3)}
#kc-app .reader-controls input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
#kc-app .reader-controls input[type=range]:focus-visible{outline:2px solid transparent;outline-offset:2px}
#kc-app .reader-controls input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--kk-slate),0 0 0 7px rgba(247,147,30,.35)}
#kc-app .reader-controls input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--kk-slate),0 0 0 7px rgba(247,147,30,.35)}
#kc-app .page-slider-label{margin:0;font-size:var(--fs-md);font-weight:600;color:var(--kk-slate);letter-spacing:0}
#kc-app #page-counter{font-weight:700;color:var(--kk-slate);min-width:76px;text-align:center;font-variant-numeric:tabular-nums}
#kc-app .thumbnails{max-width:1200px;margin:var(--sp-4) auto 0;display:flex;gap:10px;overflow-x:auto;padding:var(--sp-2);scroll-snap-type:x proximity;scrollbar-width:thin}
#kc-app .thumbnails button{min-width:104px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:12px 14px;scroll-snap-align:start}
#kc-app .thumbnails strong{font-family:var(--kk-serif);font-size:1.75rem;line-height:1;color:var(--kk-slate)}
#kc-app .thumbnails span{font-size:var(--fs-xs);color:var(--kk-muted)}

/* ============================================================
   13. RESPONSIVE (solo pantalla: no debe afectar al PDF)
   ============================================================ */
@media screen and (max-width:1000px){
  #kc-app .editor{grid-template-columns:300px 1fr}
}
@media screen and (max-width:800px){
  #kc-app .editor{grid-template-columns:1fr}
  #kc-app .top{flex-wrap:wrap;row-gap:var(--sp-2)}
  #kc-app .head{align-items:flex-start;flex-direction:column}
  #kc-app .workspace{padding:var(--sp-5) 5% var(--sp-10)}
  #kc-app .product-row{flex-wrap:wrap}
  #kc-app .product-info h3{white-space:normal}
  #kc-app .kc-row-actions{width:100%;justify-content:flex-start}
  #kc-app .panel{padding:var(--sp-5)}
  body>.modal{padding:var(--sp-3);align-items:flex-end}
  body>.modal .modal-box{padding:var(--sp-5);border-radius:18px 18px 12px 12px;margin:auto 0 0;animation-name:kc-sheet}
  body>.modal .field-row{flex-direction:column;gap:0}
  body>.modal .field-row .field{margin-bottom:var(--sp-4)}
  body>.modal .actions button{flex:1 1 auto;white-space:nowrap}
  body>.modal .actions button:not(.primary){flex:0 1 38%}
  body.wp-admin #kc-app .top{top:46px}
}
@keyframes kc-sheet{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media screen and (max-width:650px){
  #kc-app h1{font-size:1.6rem}
  #kc-app .viewer{padding:var(--sp-3) 10px var(--sp-6)}
  #kc-app .reader-hint{font-size:var(--fs-sm)}
  #kc-app .page-slider-label{display:none}
  #kc-app .book-stage{margin-bottom:var(--sp-6)}
  #kc-app .top{padding:var(--sp-3) 5%;flex-direction:row;align-items:center;flex-wrap:wrap}
  #kc-app .brand-logo{height:28px}
  #kc-app .brand small{display:none}
  #kc-app .top .actions{margin-left:auto}
  #kc-app .top .actions .muted{display:none}
  /* controles: fila 1 anterior/contador/siguiente · fila 2 slider · fila 3 páginas/pantalla completa */
  #kc-app .reader-controls{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-2);padding:var(--sp-3)}
  #kc-app .reader-controls [data-act=prev]{grid-column:span 2}
  #kc-app .reader-controls #page-counter{grid-column:span 2;align-self:center;min-width:0}
  #kc-app .reader-controls [data-act=next]{grid-column:span 2}
  #kc-app .reader-controls input[type=range]{grid-column:1/-1;max-width:none;width:100%}
  #kc-app .reader-controls [data-act=thumbs],#kc-app .reader-controls [data-act=fullscreen]{grid-column:span 3}
  #kc-app .reader-controls button{padding:9px 8px}
  #kc-app .cards{grid-template-columns:1fr}
  /* sombras del libro más compactas */
  #kc-app .book-stage .page.--right,#kc-app .book-stage .page.--left{box-shadow:1px 0 0 #DDD9CF,2px 0 0 #CBC6BB,0 1px 0 #D3CEC3,0 8px 12px -6px rgba(20,26,34,.30),0 22px 28px -14px rgba(20,26,34,.38)}
}
@media (pointer:coarse){
  #kc-app button,#kc-app .btn,body>.modal button{min-height:44px}
  #kc-app .kc-row-actions button[data-act=up],#kc-app .kc-row-actions button[data-act=down]{width:44px}
}

/* ---------- 14. MOVIMIENTO REDUCIDO ----------
   (La animación de pasar página es de StPageFlip/JS: ver DESIGN_NOTES.md.) */
@media (prefers-reduced-motion:reduce){
  #kc-app *,#kc-app *::before,#kc-app *::after,body>.modal,body>.modal *,body>.toast{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  #kc-app:empty::after{animation:none}
  #kc-app .catalog-card:hover{transform:none}
}
@media (prefers-contrast:more){
  #kc-app button,#kc-app input,#kc-app textarea,#kc-app select{border-color:#5B6672}
}

/* ============================================================
   15. IMPRESIÓN / PDF (al final para que gane el orden; solo A4 plano, sin efectos de revista)
   ============================================================ */
#kc-app .print-pages{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body,#kc-app,body:has(#kc-app){background:#fff!important;margin:0!important;padding:0!important;min-height:0!important}
  #wpadminbar,#adminmenumain,#adminmenuback,#adminmenuwrap,#wpfooter,#screen-meta,#screen-meta-links,.notice,#kc-app .top,#kc-app .workspace,#kc-app .viewer,body>.modal,body>.toast{display:none!important}
  #wpcontent,#wpbody,#wpbody-content{margin:0!important;padding:0!important;float:none!important}
  #kc-app .print-pages{display:block!important}
  #kc-app .print-pages .page{width:210mm;height:297mm;min-height:0;padding:16mm;aspect-ratio:auto;break-after:page;page-break-after:always;break-inside:avoid;box-shadow:none;border:0;border-radius:0;print-color-adjust:exact;-webkit-print-color-adjust:exact;animation:none}
  #kc-app .print-pages .page:last-child{break-after:auto;page-break-after:auto}
  #kc-app .print-pages .cover-logo{height:22mm}
  #kc-app .print-pages .cover h1{font-size:60px}
  #kc-app .print-pages .item img{height:58mm}
  #kc-app .print-pages .page-foot{bottom:12mm}
  #kc-app .print-pages .product-grid{gap:24px;margin-top:24px}
  #kc-app .print-pages .item,#kc-app .print-pages .item img{break-inside:avoid}
}

/* ============================================================
   15. COMPONENTES v0.6 (lista de deseos, guardado, validaciones, arrastrar)
   Solo usa tokens existentes. No toca la revista ni sus cqw.
   ============================================================ */
#kc-app h1:focus{outline:none}
#kc-app .small{font-size:var(--fs-sm);margin:0 0 var(--sp-3)}
#kc-app .empty h2{margin:0 0 var(--sp-2);font-size:var(--fs-lg);color:var(--kk-slate-900)}
#kc-app .empty p{margin:0 0 var(--sp-4)}
#kc-app .reader-empty{max-width:520px;margin:var(--sp-10) auto}
#kc-app .preview-note{max-width:1200px;margin:0 auto var(--sp-4)}
#kc-app .notice.migrate{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
#kc-app .notice.migrate>span:first-child{flex:1 1 280px}

/* estados de publicación */
#kc-app .badge.live{background:#E8F5EC;color:#14532D;border-color:#BBE0C7}
#kc-app .badge.changes{background:#FFF4E6;color:#7A3B05;border-color:#F3C48A}
#kc-app .head .actions{justify-content:flex-end}
#kc-app .save-state{font-size:var(--fs-sm);color:var(--kk-muted);min-width:5.5em;text-align:right}
#kc-app .save-state.is-saving{color:var(--kk-slate)}
#kc-app .save-state.is-error{color:var(--kk-danger);font-weight:700}
#kc-app .subtle-danger:hover:not(:disabled){color:var(--kk-danger);border-color:#F0B8B2;background:var(--kk-danger-bg)}

/* campos: ayudas y errores */
#kc-app .err,body>.modal .err{display:block;color:var(--kk-danger);font-size:var(--fs-sm);font-weight:600;margin-top:6px}
#kc-app .err[hidden],body>.modal .err[hidden]{display:none}
#kc-app input[aria-invalid=true],body>.modal input[aria-invalid=true]{border-color:var(--kk-danger)}
#kc-app .hint,body>.modal .hint{display:block;color:var(--kk-muted);font-size:var(--fs-sm);margin-top:6px}
body>.modal .count{display:block;text-align:right;color:var(--kk-muted);font-size:var(--fs-sm);margin-top:4px;font-variant-numeric:tabular-nums}
body>.modal .count.near{color:var(--kk-orange-700);font-weight:700}
body>.modal .form-err{margin:var(--sp-3) 0 0}
#kc-app .input-prefix,body>.modal .input-prefix{display:flex;align-items:stretch;border:1px solid var(--kk-line-strong);border-radius:10px;background:#fff;overflow:hidden}
#kc-app .input-prefix:focus-within,body>.modal .input-prefix:focus-within{border-color:var(--kk-slate);box-shadow:0 0 0 3px rgba(247,147,30,.35)}
#kc-app .input-prefix>span,body>.modal .input-prefix>span{display:flex;align-items:center;padding:0 10px;background:#F4F5F7;color:var(--kk-muted);font-size:var(--fs-sm);white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}
#kc-app .input-prefix>input,body>.modal .input-prefix>input{border:0!important;box-shadow:none!important;border-radius:0;min-width:0}
#kc-app .theme-row{display:flex;align-items:center;gap:var(--sp-3)}
#kc-app .swatch,body>.modal .swatch{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--kk-line-strong)}
body>.modal .theme-row{display:flex;align-items:center;gap:var(--sp-3)}
body>.modal select{width:100%;border:1px solid var(--kk-line-strong);border-radius:10px;padding:11px 12px;background:#fff;font:inherit;font-size:16px;color:var(--kk-ink)}
body>.modal .photo-tools{margin:0 0 var(--sp-4)}
body>.modal .photo-tools:has(button[hidden]){display:none}
body>.modal .processing{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);color:var(--kk-slate);font-weight:600}
body>.modal .spin{width:18px;height:18px;border:3px solid var(--kk-orange-100);border-top-color:var(--kk-orange);border-radius:50%;animation:kc-spin .7s linear infinite}
body>.modal .confirm{width:460px}
body>.modal .confirm p{margin:0 0 var(--sp-2);color:var(--kk-muted)}
body>.modal .steps{margin:var(--sp-3) 0;padding-left:1.2em;color:var(--kk-ink);line-height:1.6}
body>.modal .check{display:flex;align-items:center;gap:var(--sp-2);font-weight:500;margin-top:var(--sp-3)}
body>.modal .check input{width:auto}
body>.modal button.danger{background:var(--kk-danger);border-color:var(--kk-danger);color:#fff}
body>.modal button.danger:hover{background:#8F1B12;border-color:#8F1B12}

/* panel de publicación */
#kc-app .pub-box{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--kk-line);display:flex;flex-direction:column;gap:var(--sp-3)}
#kc-app .pub-note{margin:var(--sp-4) 0 0}
#kc-app .pub-warn{margin:0;padding:var(--sp-2) var(--sp-3);background:var(--kk-orange-050);border-left:3px solid var(--kk-orange);border-radius:6px;font-size:var(--fs-sm);color:#7A3B05}
#kc-app .link-row{display:flex;gap:var(--sp-2)}
#kc-app .link-row input{flex:1;min-width:0;font-size:var(--fs-sm)}
#kc-app .pub-links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* lista de productos: arrastrar y soltar */
#kc-app .page-sep{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kk-muted);margin:var(--sp-4) 0 var(--sp-1);padding-top:var(--sp-3);border-top:1px dashed var(--kk-line-strong)}
#kc-app .page-sep:first-of-type{border-top:0;margin-top:var(--sp-2);padding-top:0}
#kc-app .drag-handle{cursor:grab;color:var(--kk-line-strong);font-size:1.25rem;line-height:1;user-select:none;padding:0 2px}
#kc-app .product-row:hover .drag-handle{color:var(--kk-muted)}
#kc-app .product-row.dragging{opacity:.45}
#kc-app .product-row.drag-over{box-shadow:0 -3px 0 var(--kk-orange)}
#kc-app .thumb-empty{flex:none;width:70px;height:70px;background:#EDF0F3;border-radius:10px;border:1px solid var(--kk-line)}
@media (pointer:coarse){#kc-app .drag-handle{display:none}}

/* aviso (toast) con acción */
body>.toast{display:flex;align-items:center;gap:var(--sp-3)}
body>.toast .toast-action,body>.toast .toast-close{font:inherit;font-weight:700;cursor:pointer;background:transparent;color:var(--kk-orange);border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:6px 12px;min-height:36px}
body>.toast .toast-action:hover,body>.toast .toast-close:hover{background:rgba(255,255,255,.12)}
body>.toast .toast-close{color:#fff;padding:2px 10px;font-size:1.2rem;line-height:1}
body>.toast button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* lista de deseos del cliente (botón dentro de la revista: no altera el layout) */
#kc-app .item{position:relative}
#kc-app .item .wish{position:absolute;top:1.6cqw;right:1.6cqw;min-height:0;padding:1cqw 2.4cqw;font-size:max(11px,2.3cqw);font-weight:700;line-height:1.2;border-radius:var(--kk-radius-pill);background:var(--kk-orange);color:#1E2630;border:1px solid var(--kk-orange-700);box-shadow:var(--sh-2);cursor:pointer}
#kc-app .item .wish.on{background:var(--kk-slate);color:#fff;border-color:var(--kk-slate)}
#kc-app .item .wish:hover:not(:disabled){background:#FFA83F;border-color:var(--kk-orange-700)}
#kc-app .item .wish.on:hover:not(:disabled){background:var(--kk-slate-700)}
body>.modal .wish-list{list-style:none;margin:var(--sp-3) 0;padding:0}
body>.modal .wish-list li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid #EEF1F3}
body>.modal .wish-list li>span{flex:1;min-width:0;display:flex;flex-direction:column}
body>.modal .wish-list small{color:var(--kk-muted)}
body>.modal .wish-list b{color:var(--kk-orange-700);white-space:nowrap}
body>.modal .wish-list button{min-height:36px;padding:6px 12px}
body>.modal .wish-total{margin:var(--sp-3) 0 var(--sp-4);font-size:var(--fs-base)}
body>.modal .wish-total small{color:var(--kk-muted)}
body>.modal .wish-modal textarea{font-size:var(--fs-md);background:#F8F9FA}
body>.modal .wish-modal{width:600px}
@media print{.wish{display:none!important}}
@media screen and (max-width:650px){
  #kc-app .top .actions{width:100%}
  #kc-app .top .actions button{flex:1 1 auto;min-height:44px;padding:6px 10px;font-size:var(--fs-sm)}
  body>.modal .wish-modal .actions{flex-wrap:wrap}
  body>.modal .wish-modal .actions button{flex:1 1 40%}
  #kc-app .head .actions{justify-content:flex-start}
}
#kc-app .save-state:empty{display:none}
#kc-app .input-prefix>span,body>.modal .input-prefix>span{max-width:70%}

/* ---------- 16. A11Y (informe A11Y_QA) ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#kc-app button:focus-visible:not(:disabled),#kc-app .btn:focus-visible{box-shadow:var(--focus)}
#kc-app .item .wish{min-height:28px;padding:.8cqw 2.4cqw}
#kc-app .item .wish::after{content:"";position:absolute;inset:-8px}
body>.toast .toast-action,body>.toast .toast-close{min-height:36px}
@media (pointer:coarse){
  #kc-app .kc-row-actions button,body>.modal .wish-list button,body>.toast button{min-height:44px}
  #kc-app .kc-row-actions button[data-act=up],#kc-app .kc-row-actions button[data-act=down]{width:44px}
  #kc-app .reader-controls input[type=range]{height:44px}
}
@media (prefers-reduced-motion:reduce){#kc-app .catalog-card:focus-within{transform:none}}
@media (forced-colors:active){
  #kc-app button:focus-visible,#kc-app .btn:focus-visible,#kc-app a:focus-visible,#kc-app input:focus,#kc-app select:focus,#kc-app textarea:focus,body>.modal button:focus-visible,body>.modal input:focus,body>.modal textarea:focus,body>.toast button:focus-visible{outline:3px solid Highlight;outline-offset:2px}
  #kc-app input[aria-invalid=true],body>.modal input[aria-invalid=true]{border:2px solid Mark}
  #kc-app .item .wish.on{border:2px solid Highlight}
}

body>.modal .actions .wa{background:#1FA855;border-color:#14803F;color:#fff}
body>.modal .actions .wa:hover:not(:disabled){background:#178F48}