/* =====================================================================
   Plantilla "New Katty" — TEMA global (se carga sobre app.css en TODAS
   las páginas de la tienda). Vuelve el interior kawaii/claro sobreescribiendo
   las variables de superficie y los pocos componentes con colores fijos.
   ===================================================================== */

/* 1) Variables de superficie -> tema claro rosa (app.css es variable-driven). */
:root{
  --bg-black:#fff6fc; --bg-deep:#ffeaf6; --bg-card:#ffffff; --bg-card-2:#fff2fb;
  --text:#5b2a4c; --text-muted:#a0688b; --text-faded:#c092ac; --radius:18px;
  --nk-soft:#ffe6f5; --nk-line:rgba(var(--accent-rgb),.22); --nk-shadow:0 16px 38px rgba(var(--accent-rgb),.16);
}
html,body{
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(var(--accent-rgb),.22), transparent 60%),
    linear-gradient(180deg,#fff6fc 0%,#ffeaf6 100%) !important;
  color:var(--text);
  font-family:'Poppins',system-ui,sans-serif;
  min-height:100vh;
}
.bg-fx{display:none !important}          /* capas oscuras del tema clásico */
h1,h2,h3,h4{font-family:'Baloo 2',cursive;letter-spacing:.3px}
a{color:inherit}

/* 2) Contenedor de páginas internas */
.nk-page{max-width:1040px;margin:0 auto;padding:24px 16px 52px;min-height:52vh}

/* 3) NAV (compartido con la portada) */
.nk-nav{background:#fff;border-bottom:1px solid var(--nk-line);position:sticky;top:0;z-index:20}
.nk-nav-in{max-width:1040px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:18px}
.nk-logo{display:flex;align-items:center;gap:8px;font-family:'Baloo 2',cursive;font-weight:800;font-size:22px;color:var(--accent)}
.nk-logo svg{width:24px;height:24px}
.nk-logo img{height:44px;width:auto}
.nk-logo.logo-only img{height:56px}
.nk-nav-links{margin-left:auto;display:flex;gap:22px;align-items:center}
.nk-nav-links a{font-weight:600;color:#7a5069;font-size:15px}
.nk-nav-links a:hover{color:var(--accent)}
.nk-btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-weight:700;font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,var(--accent-light),var(--accent));color:#fff;border-radius:999px;padding:11px 22px;
  box-shadow:0 8px 20px rgba(var(--accent-rgb),.35);transition:transform .15s}
.nk-btn:hover{transform:translateY(-2px)}
.nk-btn.sm{padding:9px 18px;font-size:14px}

/* 4) Footer simple de páginas internas */
.nk-tfoot{background:#fff;border-top:1px solid var(--nk-line);text-align:center;color:var(--text-muted);
  padding:20px 16px;font-size:14px;margin-top:30px}
.nk-tfoot a{color:var(--accent);font-weight:600}

/* 5) Overrides de componentes con colores fijos oscuros (checkout/cuentas/etc.) */
.form-control{background:#fff !important;border:1px solid var(--nk-line) !important;color:var(--text) !important;border-radius:12px !important}
.form-control::placeholder{color:#c99ab5}
.form-control:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15) !important;outline:none}
label{color:var(--text);font-weight:600}
.hint,.form-group small,small.hint{color:var(--text-muted) !important}

.metodo-card{background:#fff !important;border:2px solid var(--nk-line) !important;color:var(--text) !important;border-radius:14px !important;box-shadow:var(--nk-shadow)}
.metodo-card:hover{border-color:var(--accent) !important}
.metodo-card.active{border-color:var(--accent) !important;background:var(--nk-soft) !important}
.metodo-card .icon svg,.metodo-card .icon{color:var(--accent) !important}
.metodo-card .nombre{color:var(--text) !important;background:linear-gradient(to top,rgba(255,255,255,.96) 0%,rgba(255,255,255,.75) 55%,rgba(255,255,255,0) 100%) !important;text-shadow:none !important}
.metodo-card.active::after{background:var(--accent) !important}

.checkout-card,.confirm-card{color:var(--text) !important;box-shadow:var(--nk-shadow)}
.checkout-card h2,.checkout-card h3,.confirm-card h2{color:var(--accent) !important}
.precio-tag{color:var(--accent) !important;background:var(--nk-soft) !important;border-color:var(--nk-line) !important}

.alert-info{background:rgba(var(--accent-rgb),.10) !important;color:#8a2b6b !important;border-color:var(--border-red-strong) !important}
.alert-ok{background:rgba(34,197,94,.14) !important;color:#177a3f !important;border-color:#38c172 !important}
.alert-bad{background:rgba(239,68,68,.12) !important;color:#c0324a !important;border-color:#ef6a7e !important}
.alert-warn{background:rgba(245,158,11,.14) !important;color:#8a5a00 !important;border-color:#f0b429 !important}

.pin-display{background:linear-gradient(180deg,#fff,var(--nk-soft)) !important;border:2px dashed var(--accent) !important;color:var(--accent) !important}

.btn-outline{color:var(--accent) !important;border:1px solid var(--nk-line) !important;background:#fff !important}
.btn-outline:hover{background:var(--nk-soft) !important}

/* Cuentas (marketplace) */
.cuenta-card{box-shadow:var(--nk-shadow)}
.cuenta-card,.cuenta-detalle{color:var(--text) !important}
.cuenta-titulo,.cuenta-precio,.cuenta-precio-lg{color:var(--accent) !important}
.cuenta-badge{background:var(--nk-soft) !important;color:var(--accent) !important}
.cuenta-noimg{background:var(--nk-soft) !important;color:var(--accent) !important}

hr{border-color:var(--nk-line) !important}

/* Referidos en la nav: pildora rosa, el reclamo del menu. */
.nk-nav-links a.nk-ref{background:var(--accent);color:#fff !important;border-radius:999px;padding:7px 14px;box-shadow:0 6px 18px rgba(var(--accent-rgb),.3)}
.nk-nav-links a.nk-ref:hover{filter:brightness(1.08)}