/* =====================================================================
   Aspecto moderno y translúcido (glassmorphism), cargado después de style.css.
   Reutiliza --glass, --glass-strong, --glass-bd y --glass-sh en lo nuevo.
   ===================================================================== */
:root{--glass:rgba(255,255,255,.74);--glass-strong:rgba(255,255,255,.82);--glass-bd:rgba(255,255,255,.75);--glass-sh:0 8px 32px rgba(60,40,0,.08);--bd:rgba(120,100,60,.16)}
:root[data-theme="dark"]{--glass:rgba(38,38,42,.82);--glass-strong:rgba(32,32,36,.85);--glass-bd:rgba(255,255,255,.08);--glass-sh:0 8px 32px rgba(0,0,0,.35);--bd:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(38,38,42,.82);--glass-strong:rgba(32,32,36,.85);--glass-bd:rgba(255,255,255,.08);--glass-sh:0 8px 32px rgba(0,0,0,.35);--bd:rgba(255,255,255,.1)}}

/* Fondo con manchas de color suaves. Las manchas van en una capa fija aparte (body::after) y no con background-attachment:fixed:
   así el navegador no repinta todo el fondo (ni el cristal de cada tarjeta) en cada paso al desplazarse, y el scroll va fluido */
body{background:#f7f5f1}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:transform;background:
  radial-gradient(900px 600px at 8% -5%,rgba(255,196,77,.38),transparent 60%),
  radial-gradient(800px 600px at 100% 10%,rgba(255,140,90,.22),transparent 60%),
  radial-gradient(900px 700px at 50% 110%,rgba(170,150,255,.18),transparent 60%)}
:root[data-theme="dark"] body{background:#121214}
:root[data-theme="dark"] body::after{background:
  radial-gradient(900px 600px at 8% -5%,rgba(224,165,38,.18),transparent 60%),
  radial-gradient(800px 600px at 100% 10%,rgba(255,110,70,.10),transparent 60%),
  radial-gradient(900px 700px at 50% 110%,rgba(120,100,255,.12),transparent 60%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background:#121214}
:root:not([data-theme="light"]) body::after{background:
  radial-gradient(900px 600px at 8% -5%,rgba(224,165,38,.18),transparent 60%),
  radial-gradient(800px 600px at 100% 10%,rgba(255,110,70,.10),transparent 60%),
  radial-gradient(900px 700px at 50% 110%,rgba(120,100,255,.12),transparent 60%)}}

/* Tarjetas de cristal */
/* Sin desenfoque (backdrop-filter): con una tarjeta por chollo, recalcularlo al desplazarse hacía el scroll pesado; --glass es más opaco para que se vea igual */
.card{background:var(--glass);border:1px solid var(--glass-bd);border-radius:18px;box-shadow:var(--glass-sh)}
.deal .img,.grid .deal .img{background:rgba(255,255,255,.35)}

/* Cabecera y pie: degradado ámbar con brillo */
header,footer#foot{background:linear-gradient(135deg,rgba(242,184,56,.96),rgba(232,150,42,.92));box-shadow:inset 0 -1px 0 rgba(255,255,255,.35)}
footer#foot{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}

/* Barras fijas y paneles translúcidos */
#hbar{background:rgba(236,170,45,.78);-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);box-shadow:0 4px 20px rgba(60,40,0,.12)}
#dbar{background:var(--glass-strong);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-color:var(--glass-bd);border-radius:0 0 14px 14px;box-shadow:var(--glass-sh)}
.mbox,.dpanel,.rpop,.chbox,.osell{background:var(--glass-strong);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--glass-bd)}
.mbox{border-radius:20px}

/* Botones: principales con degradado, secundarios de cristal */
a.go{background:linear-gradient(135deg,#f5bd3c,#e39a26);border-color:transparent;box-shadow:0 6px 18px rgba(227,154,38,.35)}
.sec,button.sec,.btn.sec{background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="dark"] .sec{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec{background:rgba(255,255,255,.06)}}

/* Campos de texto y etiquetas más suaves */
/* Campos: en claro, fondo blanco, borde más marcado y una sombra interior suave para que se vean sobre las tarjetas */
input,textarea,select{background:#fff;border-color:#c9bda4;border-radius:12px;box-shadow:inset 0 1px 2px rgba(60,40,0,.06)}
input:hover:not(:focus):not([type=checkbox]):not([type=radio]),textarea:hover:not(:focus),select:hover:not(:focus){border-color:#b3a585}
::placeholder{color:#8a857a;opacity:1}
:root[data-theme="dark"] :is(input,textarea,select){background:rgba(255,255,255,.05);border-color:var(--bd);box-shadow:none}
:root[data-theme="dark"] ::placeholder{color:#8f8d86}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(input,textarea,select){background:rgba(255,255,255,.05);border-color:var(--bd);box-shadow:none}
:root:not([data-theme="light"]) ::placeholder{color:#8f8d86}}
.tag{background:rgba(255,255,255,.5);border-color:var(--bd)}
.vote{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Modo oscuro: zonas de foto y termómetro sin velo claro */
:root[data-theme="dark"] :is(.deal .img,.grid .deal .img){background:#fff}
:root[data-theme="dark"] .vote{background:rgba(255,255,255,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.deal .img,.grid .deal .img){background:#fff}:root:not([data-theme="light"]) .vote{background:rgba(255,255,255,.05)}}

/* Botones principales (Enviar, Publicar chollo, Guardar, Entrar, Entendido…): degradado de cristal con brillo */
:is(button:not([type=button]):not(.sec):not(.linkbtn):not(.dab):not(.danger):not([data-vote]),.mact button:not(.sec):not(.danger),.dsthelp button,.btn:not(.sec):not(.light):not(.on):not(.go)){background:linear-gradient(135deg,rgba(247,194,70,.94),rgba(228,152,36,.92));border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 18px rgba(227,154,38,.32),inset 0 1px 0 rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:filter .15s,box-shadow .15s,transform .1s}
:is(button:not([type=button]):not(.sec):not(.linkbtn):not(.dab):not(.danger):not([data-vote]),.mact button:not(.sec):not(.danger),.dsthelp button,.btn:not(.sec):not(.light):not(.on):not(.go)):hover{filter:brightness(1.06);box-shadow:0 8px 24px rgba(227,154,38,.42),inset 0 1px 0 rgba(255,255,255,.5)}
:is(button:not([type=button]):not(.sec):not(.linkbtn):not(.dab):not(.danger):not([data-vote]),.mact button:not(.sec):not(.danger),.dsthelp button,.btn:not(.sec):not(.light):not(.on):not(.go)):active{transform:translateY(1px)}
:is(button:not([type=button]):not(.sec):not(.linkbtn):not(.dab):not(.danger):not([data-vote]),.mact button:not(.sec):not(.danger)):disabled{filter:grayscale(.4) opacity(.7);box-shadow:none}
/* Botones de peligro (Eliminar cuenta, Borrar…) con el mismo efecto en rojo */
button.danger,.mact button.danger{background:linear-gradient(135deg,rgba(232,62,48,.94),rgba(196,22,10,.92));border:1px solid rgba(255,255,255,.35);box-shadow:0 6px 18px rgba(209,26,14,.3),inset 0 1px 0 rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Botones de lista / cuadrícula: el activo con el degradado dorado translúcido; el otro, de cristal */
.vb{background:rgba(255,255,255,.45);border:1px solid var(--glass-bd);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;transition:filter .15s,box-shadow .15s}
:root[data-theme="dark"] .vb:not(.on){background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vb:not(.on){background:rgba(255,255,255,.06)}}
.vb.on{background:linear-gradient(135deg,rgba(247,194,70,.94),rgba(228,152,36,.92));color:var(--onac);border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 14px rgba(227,154,38,.32),inset 0 1px 0 rgba(255,255,255,.45)}
.vb:hover{filter:brightness(1.06)}

/* Familias: la elegida con el degradado dorado translúcido; las demás, de cristal */
.chips .btn{border-radius:999px;transition:filter .15s,box-shadow .15s}
.chips .btn.sec{border-color:rgba(227,154,38,.4);box-shadow:0 2px 8px rgba(60,40,0,.05)}
.chips .btn.sec:hover{border-color:rgba(227,154,38,.6);color:var(--act)}
.chips .btn.on{background:linear-gradient(135deg,rgba(247,194,70,.94),rgba(228,152,36,.92));color:var(--onac);border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 14px rgba(227,154,38,.32),inset 0 1px 0 rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chips .btn.on:hover{filter:brightness(1.06)}

/* Botón «Menú»: degradado dorado translúcido con brillo (mantiene el gris del borde, icono y texto) */
#burger{background:linear-gradient(135deg,rgba(250,205,90,.95),rgba(232,156,38,.9));box-shadow:0 6px 18px rgba(150,90,0,.28),inset 0 1px 0 rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:filter .15s,box-shadow .15s}
#burger:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(150,90,0,.36),inset 0 1px 0 rgba(255,255,255,.6)}

/* «+ Colgar chollo»: fondo blanco; al pasar el ratón las letras se vuelven doradas y brillantes */

/* Formulario: «Envío añadido» y «Código añadido» (marcados) con el degradado dorado translúcido */
.btn.sec.togl:has(input:checked){background:linear-gradient(135deg,rgba(247,194,70,.94),rgba(228,152,36,.92));color:var(--onac);border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 14px rgba(227,154,38,.32),inset 0 1px 0 rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn.sec.togl:has(input:checked):hover{filter:brightness(1.06)}

/* Perfil: panel de secciones de cristal y la sección elegida con el degradado dorado translúcido */
.pside{background:var(--glass);border:1px solid var(--glass-bd);border-radius:18px;box-shadow:var(--glass-sh)}
.pside>a{border-radius:12px;transition:background .15s,box-shadow .15s,filter .15s}
.pside>a:hover:not(.on){background:rgba(227,154,38,.12)}
.pside>a.on,.pside>a:active{background:linear-gradient(135deg,rgba(247,194,70,.94),rgba(228,152,36,.92));color:var(--onac);box-shadow:0 4px 14px rgba(227,154,38,.32),inset 0 1px 0 rgba(255,255,255,.45)}

/* Guardar, compartir y denunciar: al pasar el ratón se iluminan en dorado como «+ Colgar chollo» */
:is([data-save],[data-share],[data-report]).sec{transition:color .2s,box-shadow .2s,border-color .2s,filter .2s}
@media (hover:hover){
:is([data-save],[data-share],[data-report]).sec:hover{color:#d48f00;border-color:#e8a417;box-shadow:0 0 0 1px rgba(232,164,23,.25),0 6px 18px rgba(212,143,0,.28)}
:is([data-save],[data-share],[data-report]).sec:hover svg{filter:drop-shadow(0 0 5px rgba(255,190,40,.75))}
[data-report].sec.done:hover{color:#d9300a;border-color:#d9300a;box-shadow:0 0 0 1px rgba(217,48,10,.2),0 6px 18px rgba(217,48,10,.25)}
[data-report].sec.done:hover svg{filter:drop-shadow(0 0 5px rgba(255,80,40,.6))}
}

/* Botón de comentarios (lista/cuadrícula y dentro del chollo): mismo brillo dorado al pasar el ratón */
.acl a.btn.sec[href$="#comentarios"],.cmcnt{transition:color .2s,box-shadow .2s,border-color .2s,text-shadow .2s}
@media (hover:hover){
.acl a.btn.sec[href$="#comentarios"]:hover{color:#d48f00;border-color:#e8a417;text-shadow:0 0 8px rgba(255,190,40,.6);box-shadow:0 0 0 1px rgba(232,164,23,.25),0 6px 18px rgba(212,143,0,.28)}
.cmcnt:hover{color:#d48f00;text-shadow:0 0 8px rgba(255,190,40,.6)}
.cmcnt:hover svg{filter:drop-shadow(0 0 5px rgba(255,190,40,.75))}
}

/* Etiqueta de % de descuento: verde de cristal translúcido */
.disc{background:linear-gradient(135deg,rgba(76,195,120,.24),rgba(30,160,80,.16));border:1px solid rgba(46,170,92,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(30,150,70,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px}
:root[data-theme="dark"] .disc{background:linear-gradient(135deg,rgba(76,195,120,.22),rgba(30,160,80,.12));color:#5fdc8e;border-color:rgba(95,220,142,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .disc{background:linear-gradient(135deg,rgba(76,195,120,.22),rgba(30,160,80,.12));color:#5fdc8e;border-color:rgba(95,220,142,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}}

/* Nombre de la tienda («Oferta en: …»): se ilumina en dorado al pasar el ratón */
a.shop{transition:color .2s,text-shadow .2s}
@media (hover:hover){a.shop:hover{color:#d48f00;text-shadow:0 0 8px rgba(255,190,40,.6)}}
@media (hover:hover){:root[data-theme="dark"] a.shop:hover{color:#ffd66e;text-shadow:0 0 10px rgba(255,200,60,.7)}}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) a.shop:hover{color:#ffd66e;text-shadow:0 0 10px rgba(255,200,60,.7)}}

/* Acciones de tu chollo (Editar, Marcar caducado, Reactivar, Borrar): se iluminan al pasar el ratón */
.dacts :is(a.u,.linkbtn){transition:color .2s,text-shadow .2s}
@media (hover:hover){
.dacts :is(a.u,.linkbtn):not(.warn):hover{color:#d48f00;text-shadow:0 0 8px rgba(255,190,40,.6)}
.dacts .linkbtn.warn:hover{color:#ff3b1f;text-shadow:0 0 8px rgba(255,70,40,.5)}
:root[data-theme="dark"] .dacts :is(a.u,.linkbtn):not(.warn):hover{color:#ffd66e;text-shadow:0 0 10px rgba(255,200,60,.7)}
}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dacts :is(a.u,.linkbtn):not(.warn):hover{color:#ffd66e;text-shadow:0 0 10px rgba(255,200,60,.7)}}

/* Modo oscuro: las fotos no se funden con el fondo oscuro (multiply las apagaba) */
:root[data-theme="dark"] :is(.img img,.mini .mimg img){mix-blend-mode:normal}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.img img,.mini .mimg img){mix-blend-mode:normal}}
/* Aviso al usar la web como un usuario de apoyo (panel → «Entrar como») */
.impbar{position:sticky;top:0;z-index:60;margin:0 auto 10px;max-width:1100px;padding:8px 14px;border-radius:14px;text-align:center;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.95rem;font-weight:500;color:#5a3d00;background:linear-gradient(135deg,rgba(247,194,70,.94),rgba(228,152,36,.92));border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 14px rgba(227,154,38,.32),inset 0 1px 0 rgba(255,255,255,.45)}
.impbar a{color:#5a3d00;font-weight:700}
/* «¡Cuelga el primero!» (listas vacías): se ilumina al pasar el ratón */
.dtxt a.u{transition:color .15s,text-shadow .15s}
@media (hover:hover){.dtxt a.u:hover{color:#d48f00;text-shadow:0 0 8px rgba(255,190,40,.6)}
:root[data-theme="dark"] .dtxt a.u:hover{color:#ffd66e}}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dtxt a.u:hover{color:#ffd66e}}
/* Popup «Añadir imagen»: cabecera con icono, dos tarjetas grandes y zona para arrastrar (solo con ratón) */
.impop{margin:-2px}
.imhd{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.imhd .sti{flex:none;width:42px;height:42px;margin:0;border-radius:13px;box-shadow:0 6px 16px rgba(242,107,58,.28)}
.imhd .sti svg{width:23px;height:23px}
.imhd div{flex:1;min-width:0}
.imhd h3{margin:0;font-size:1.12rem;line-height:1.25}
.imhd p{margin:2px 0 0;color:var(--mu);font-size:.85rem;line-height:1.35}
button.imx{flex:none;align-self:flex-start;width:32px;height:32px;padding:0;border-radius:50%;background:rgba(120,100,60,.1);color:var(--mu);font-size:.95rem;line-height:1;box-shadow:none;transition:background .15s,color .15s}
button.imx:hover{background:rgba(120,100,60,.2);color:var(--tx)}
.impop .imgopts{grid-template-columns:1fr 1fr;gap:12px;margin:0}
.impop .imgopts button{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 12px 18px;border-radius:16px;background:rgba(255,255,255,.55);color:var(--tx);border:1px solid var(--bd);box-shadow:0 2px 10px rgba(60,40,0,.05);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.impop .imgopts .sti{width:52px;height:52px;margin:0;border-radius:16px;box-shadow:0 6px 16px rgba(60,40,0,.14);transition:transform .2s}
.impop .imgopts .sti svg{width:28px;height:28px}
.impop .imgopts .i3{color:#fff}
.impop .imgopts small{font-size:.8rem;line-height:1.3;margin-top:3px}
.impop .imgopts button:active{transform:scale(.98)}
.impop .imgopts button:focus-visible{outline:2px solid #e8a417;outline-offset:2px}
.impop .imgopts button:focus:not(:focus-visible){outline:0}
.imdrop{display:none}
@media (hover:hover) and (pointer:fine){
.impop .imgopts button:hover{transform:translateY(-2px);border-color:#e8a417;background:rgba(255,248,230,.85);box-shadow:0 0 0 1px rgba(232,164,23,.25),0 10px 24px rgba(212,143,0,.2)}
.impop .imgopts button:hover .sti{transform:scale(1.07)}
.imdrop{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:14px;border:1.5px dashed var(--bd);border-radius:14px;color:var(--mu);font-size:.88rem;transition:border-color .15s,background .15s,color .15s}
.imdrop svg{width:18px;height:18px}
.imdrop.on{border-color:#e8a417;background:rgba(247,194,70,.12);color:var(--act)}}
/* Paso «desde un enlace»: campo con icono, botón Pegar y vista previa */
.imurl{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.imurl:focus-within{border-color:#e8a417;box-shadow:0 0 0 3px rgba(232,164,23,.18)}
.imurl>svg{flex:none;width:18px;height:18px;color:var(--mu)}
.imgurl .imurl input{flex:1;min-width:0;margin:0;padding:9px 0;border:0;background:none;outline:0;box-shadow:none}
.imurl button.sec{flex:none;padding:6px 12px;font-size:.85rem;border-radius:9px}
.imprev{margin-top:12px;border-radius:14px;overflow:hidden;background:rgba(120,100,60,.06);border:1px solid var(--bd);display:flex;justify-content:center}
.imprev.hide{display:none}
.imprev img{max-width:100%;max-height:200px;object-fit:contain;display:block}
.impop .mact{margin-top:18px}
.impop .mact button{min-width:110px;border-radius:12px}
:root[data-theme="dark"] .impop .imgopts button{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] button.imx{background:rgba(255,255,255,.08)}
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] .impop .imgopts button:hover{background:rgba(247,194,70,.08)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .impop .imgopts button{background:rgba(255,255,255,.05)}
:root:not([data-theme="light"]) button.imx{background:rgba(255,255,255,.08)}}
@media (prefers-color-scheme:dark) and (hover:hover) and (pointer:fine){:root:not([data-theme="light"]) .impop .imgopts button:hover{background:rgba(247,194,70,.08)}}
/* Desplegable de orden de comentarios: casi opaco (dentro de la tarjeta translúcida el desenfoque no actúa y se leían las letras de detrás) */
.osell{background:#fff;border-color:rgba(120,100,60,.18);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] .osell{background:#222226;border-color:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .osell{background:#222226;border-color:rgba(255,255,255,.1)}}
/* Con el desplegable abierto, su tarjeta pasa por encima de lo que va después (pie, etc.) */
.card:has(.osell:not(.hide)){position:relative;z-index:40}

/* Aviso de cookies de cristal: «Aceptar todo» en dorado, los demás translúcidos */
.ccbox{background:var(--glass-strong);border:1px solid var(--glass-bd);border-radius:18px;box-shadow:var(--glass-sh),0 12px 40px rgba(60,40,0,.14);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
.ccopts{background:rgba(255,255,255,.4);border-color:var(--glass-bd);border-radius:12px}
:root[data-theme="dark"] .ccopts{background:rgba(255,255,255,.04)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ccopts{background:rgba(255,255,255,.04)}}
.ccact button{border-radius:12px}
.ccact .ccok{flex-grow:1.6;background:linear-gradient(135deg,rgba(247,194,70,.94),rgba(228,152,36,.92));color:var(--onac);border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 18px rgba(227,154,38,.32),inset 0 1px 0 rgba(255,255,255,.45);transition:filter .15s,box-shadow .15s,transform .1s}
.ccact .ccok:hover{filter:brightness(1.06);box-shadow:0 8px 24px rgba(227,154,38,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.ccact .ccok:active{transform:translateY(1px)}
@media (hover:hover){.ccact .sec:hover{color:#c98a00;border-color:#c98a00;filter:brightness(1.05)}}
@media (max-width:560px){.ccact .ccok{order:-1;flex-basis:100%}}

/* Pie: enlaces y textos con la letra de los textos legales (Open Sans) en gris */
footer#foot .fnav a,footer#foot .flegal .linkbtn,footer#foot .fnote{font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#66645f}
footer#foot .fnote{opacity:1}
footer#foot .fnav a,footer#foot .flegal .linkbtn{font-weight:600}
footer#foot .fnav a:hover,footer#foot .flegal .linkbtn:hover{color:#3d3c38}

/* ---------- Perfil público y ficha emergente del usuario: portada, avatar grande y estadísticas con iconos ---------- */
.uprof{padding:0 20px 20px;overflow:hidden}
.mbox:has(.uprof){padding:0;overflow-x:hidden}
.ucover{height:120px;margin:0 -20px;background:
  radial-gradient(circle at 15% 30%,rgba(255,255,255,.35) 0 18%,transparent 19%),
  radial-gradient(circle at 85% 70%,rgba(255,255,255,.22) 0 24%,transparent 25%),
  linear-gradient(135deg,#fbd36a 0%,#f2a31b 55%,#e07b12 100%)}
.uprof .uhead{gap:0;padding:0}
.uprof .uhead .av104{width:104px;height:104px;margin:-56px 0 10px;border:4px solid #fff;box-shadow:0 0 0 3px #eaa632,0 6px 20px rgba(160,90,0,.28)}
.uprof .uname{font-size:1.6rem;font-weight:900;letter-spacing:-.01em;line-height:1.15}
.uchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0 2px}
.uchip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.8rem;font-weight:600;color:#6b5a3a;background:rgba(242,163,27,.12);border:1px solid rgba(242,163,27,.28);white-space:nowrap}
.uchip svg{width:14px;height:14px;fill:none;stroke:#b07a10;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ucard .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 0}
.upage .stats{grid-template-columns:repeat(5,1fr)}
.ucard .st{max-width:none;padding:16px 8px 14px;border-radius:18px;background:var(--card);border:1px solid var(--bd);box-shadow:0 2px 10px rgba(60,40,0,.05);gap:0}
.sti{width:46px;height:46px;margin:0 auto 10px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.sti svg{width:26px;height:26px}
.ucard .st b{font-size:1.55rem;font-weight:900;line-height:1}
.ucard .st span:not(.sti){margin-top:6px;font-size:.8rem;line-height:1.3}
.i1{background:linear-gradient(135deg,#ffe7a8,#f6b73c)}
.i2{background:linear-gradient(135deg,#ffd0b5,#f26b3a)}
.i3{background:linear-gradient(135deg,#cfe3ff,#4f8df5)}
.i4{background:linear-gradient(135deg,#ffd3e0,#ec4f7c)}
.i5{background:linear-gradient(135deg,#d8f5d0,#3fb86a)}
.uprof .uacts{margin-top:16px}
/* Ficha emergente: 3 tarjetas arriba y 2 más anchas abajo, sin huecos; en móvil la de chollos ocupa todo el ancho */
.mbox .ucard .stats{grid-template-columns:repeat(6,1fr)}
.mbox .ucard .st{grid-column:span 2}
.mbox .ucard .st:nth-child(n+4){grid-column:span 3}
@media (max-width:640px){
  .upage .stats,.ucard .stats,.mbox .ucard .stats{grid-template-columns:repeat(2,1fr)}
  .ucard .st,.mbox .ucard .st,.mbox .ucard .st:nth-child(n+4){grid-column:span 1}
  .ucard .st:first-child,.mbox .ucard .st:first-child{grid-column:span 2}
  .uprof{padding:0 14px 16px}.ucover{margin:0 -14px;height:96px}
  .uprof .uname{font-size:1.45rem}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .uchip{color:#e9d3a6;background:rgba(242,163,27,.14)}:root:not([data-theme="light"]) .uprof .uhead .av104{border-color:var(--card)}}
:root[data-theme="dark"] .uchip{color:#e9d3a6;background:rgba(242,163,27,.14)}
:root[data-theme="dark"] .uprof .uhead .av104{border-color:var(--card)}

/* ---------- Estadísticas de cada chollo para su autor (ficha y «Mis chollos») y guía de métricas ---------- */
.i6{background:linear-gradient(135deg,#e6d8ff,#8b5cf6)}
.dst{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px}
.dst .dsi{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 6px 10px;border-radius:16px;background:var(--card);border:1px solid var(--bd);box-shadow:0 2px 10px rgba(60,40,0,.05);white-space:normal}
.dst .sti{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 8px;border-radius:12px}
.dst .sti svg{width:22px;height:22px}
.dst .dsi b{margin:0;font-size:1.35rem;font-weight:900;line-height:1;color:var(--tx)}
.dst .dsi em{font-style:normal;margin-top:5px;font-size:.78rem;color:var(--mu);line-height:1.25}
.minew .dst{background:var(--glass,var(--card))}
.dstats .dst{padding:0;background:none;border:0}
.dsth{font-size:1rem;margin-bottom:10px}
.dsthelp li .sti{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;margin:0;border-radius:12px}
.dsthelp li .sti svg{width:22px;height:22px}
@media (max-width:560px){
  .dst{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px}
  .dst .dsi{flex-direction:row;justify-content:flex-start;text-align:left;gap:0 10px;padding:10px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center}
  .dst .dsi .sti{display:flex;align-items:center;grid-row:span 2;margin:0}
  .dst .dsi b{font-size:1.2rem}
  .dst .dsi em{margin-top:2px}
  .dst .dsi b,.dst .dsi em{display:block;margin-left:0}
}

/* ---------- Portada moderna: banner, familias, pestañas y tarjetas de chollo ---------- */
:root{--mx-card:rgba(255,255,255,.82);--mx-card-bd:rgba(255,255,255,.95);--mx-sh:0 8px 28px rgba(60,40,0,.08);--mx-chip:rgba(255,255,255,.75);--mx-chip-ic:#f6f1e6;--mx-cream:#f6f1e6;--mx-cream-tx:#6b4c00;--mx-img:linear-gradient(160deg,#fff,#f3efe6);--mx-vote:#fff4ec;--mx-vote-bd:#ffd9c2;--mx-ink:#0f172a;--mx-tabon:#fff;--mx-col:#f6f2ea}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mx-card:rgba(34,34,32,.85);--mx-card-bd:rgba(255,255,255,.06);--mx-sh:0 8px 28px rgba(0,0,0,.35);--mx-chip:rgba(40,40,37,.8);--mx-chip-ic:#33312c;--mx-cream:#3a3326;--mx-cream-tx:#f0c25c;--mx-img:linear-gradient(160deg,#f7f5f0,#e8e3d8);--mx-vote:#3a2a22;--mx-vote-bd:#5a3a2a;--mx-ink:#f1efe9;--mx-tabon:#33312c;--mx-col:#2a2926}}
:root[data-theme="dark"]{--mx-card:rgba(34,34,32,.85);--mx-card-bd:rgba(255,255,255,.06);--mx-sh:0 8px 28px rgba(0,0,0,.35);--mx-chip:rgba(40,40,37,.8);--mx-chip-ic:#33312c;--mx-cream:#3a3326;--mx-cream-tx:#f0c25c;--mx-img:linear-gradient(160deg,#f7f5f0,#e8e3d8);--mx-vote:#3a2a22;--mx-vote-bd:#5a3a2a;--mx-ink:#f1efe9;--mx-tabon:#33312c;--mx-col:#2a2926}

.hero{display:flex;gap:24px;align-items:center;justify-content:space-between;margin:4px 0 16px;padding:22px 24px;border-radius:24px;background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#3b2a10 100%);color:#fff;box-shadow:0 14px 40px rgba(15,23,42,.25);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(242,163,27,.55),transparent 70%);pointer-events:none}
.hero h1{margin:0 0 6px;font-size:1.55rem;line-height:1.2;font-weight:900;letter-spacing:-.01em;color:#fff}
.hero h1 span{background:linear-gradient(90deg,#fbd36a,#f2a31b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:#cbd5e1;font-size:.92rem;max-width:520px;line-height:1.5}
.hstats{display:flex;gap:10px;position:relative;z-index:1;align-items:stretch}
.hstats>*{min-width:86px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;display:flex;flex-direction:column;justify-content:center;color:#fff;text-decoration:none}
.hstats a:hover{background:rgba(255,255,255,.16)}
.hstats b{display:block;font-size:1.25rem;font-weight:900;line-height:1.1;color:#fff}
.hstats span{display:block;font-size:.72rem;color:#cbd5e1;line-height:1.3;margin-top:2px}

#cats.chips{gap:8px}
#cats .btn{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 7px;border-radius:999px;background:var(--mx-chip);border:1px solid var(--bd);color:var(--tx);font-weight:700;box-shadow:0 2px 8px rgba(60,40,0,.05);white-space:nowrap}
#cats .btn .ce{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--mx-chip-ic);font-size:.95rem;line-height:1}
#cats .btn.on{background:#14213d;color:#fff;border-color:#14213d}
#cats .btn.on .ce{background:rgba(255,255,255,.14)}
/* Familias: se iluminan al pasar el ratón (crema dorado en claro, dorado translúcido en oscuro) */
#cats .btn{transition:background .15s,border-color .15s,box-shadow .15s,color .15s,transform .15s}
#cats .btn.sec:hover,#cats .btn.sec.hov{background:#fff7e3;border-color:rgba(227,154,38,.6);color:#6b4c00;box-shadow:0 4px 14px rgba(227,154,38,.28);transform:translateY(-1px)}
#cats .btn.sec:hover .ce,#cats .btn.sec.hov .ce{background:#ffe9b3}
#cats .btn.on:hover,#cats .btn.on.hov{box-shadow:0 4px 14px rgba(15,23,42,.25);transform:translateY(-1px)}
:root[data-theme="dark"] #cats .btn.sec:hover,:root[data-theme="dark"] #cats .btn.sec.hov{background:rgba(246,183,60,.18);border-color:rgba(246,183,60,.55);color:#ffd66e;box-shadow:0 0 14px rgba(246,183,60,.25)}
:root[data-theme="dark"] #cats .btn.sec:hover .ce,:root[data-theme="dark"] #cats .btn.sec.hov .ce{background:rgba(246,183,60,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #cats .btn.sec:hover,:root:not([data-theme="light"]) #cats .btn.sec.hov{background:rgba(246,183,60,.18);border-color:rgba(246,183,60,.55);color:#ffd66e;box-shadow:0 0 14px rgba(246,183,60,.25)}:root:not([data-theme="light"]) #cats .btn.sec:hover .ce,:root:not([data-theme="light"]) #cats .btn.sec.hov .ce{background:rgba(246,183,60,.22)}}

#tabs.tabs{align-items:center;gap:4px}
#tabs .tab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:800;font-size:.92rem}
#tabs .tab.on{background:var(--mx-tabon);color:var(--mx-ink);box-shadow:0 2px 10px rgba(60,40,0,.10);text-decoration:none}
#tabs .tab .tic{height:22px;width:auto}
.tabs .vbs{margin-left:auto;display:inline-flex;gap:2px;background:var(--mx-chip);border-radius:999px;padding:3px;border:1px solid var(--bd)}
.tabs .vb{border-radius:999px;border-color:transparent}
.tabs .vb+.vb{margin-left:0}
.tabs .vb:not(.on){background:none}

#list .card.deal{border-radius:22px;border:1px solid var(--mx-card-bd);background:var(--mx-card);box-shadow:var(--mx-sh);overflow:hidden}
#list:not(.grid) .deal .img{background:var(--mx-img);margin:10px;border-radius:16px;overflow:hidden}
#list .deal .vote,.dinfo .vote{background:var(--mx-vote);border:1px solid var(--mx-vote-bd);border-radius:999px;padding:2px 4px}
#list .deal .temp,.dinfo .temp{font-weight:900}
#list .deal h3 a{font-weight:800}
#list .deal:not(.exp) .price,.dinfo .price.lg{font-weight:900;background:linear-gradient(90deg,#e11d48,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
#list .deal .price{font-size:1.5rem}
#list .deal:not(.exp) .disc,.dinfo .disc{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;border:0;border-radius:999px;padding:2px 9px;font-weight:800}
#list .deal .u.shop,.dshop .u.shop{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--mx-cream);text-decoration:none;color:var(--mx-cream-tx);font-weight:700}
#list .deal .desc{-webkit-line-clamp:2;line-clamp:2}
#list .deal:not(.exp) .btn.go,.act.main .btn.go:not(.off){border-radius:14px;background:linear-gradient(135deg,#fbd36a,#f2a31b 60%,#e8901a);box-shadow:0 8px 20px rgba(232,144,26,.35);font-weight:900}

/* ---------- Ficha del chollo: dos columnas en ordenador ---------- */
main.det{max-width:1060px}
main.det>.uback.back{padding:6px 20px 6px 6px;font-size:1rem;gap:10px;vertical-align:middle}main.det>.uback.back .ubi{width:32px;height:32px}main.det>.uback.back .ubi svg{width:17px;height:17px}
main.det>.bc{display:inline-flex;flex-wrap:wrap;gap:4px;padding:6px 14px;margin:10px 0 12px;border-radius:999px;background:var(--mx-chip);border:1px solid var(--bd)}
main.det>.bc .cur{font-weight:800;color:var(--mx-ink)}
main.det>article.card,main.det>section.card{border-radius:24px;background:var(--mx-card);border:1px solid var(--mx-card-bd);box-shadow:var(--mx-sh);padding:18px}
main.det .dgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:start}
main.det .dgrid>.img.big{margin:0;border-radius:18px;background:var(--mx-img);border:0;aspect-ratio:1/1;height:auto;max-height:none}
main.det .dgrid>.img.big.car img{object-fit:contain}
main.det .dgrid .arw{background:rgba(15,23,42,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dinfo{padding-top:4px;min-width:0}
.dinfo .dtitle{font-size:1.6rem;line-height:1.22;font-weight:900;letter-spacing:-.01em;margin:14px 0 12px;color:var(--mx-ink)}
.dinfo .price.lg{font-size:2.3rem}
.dinfo .old{font-size:1.05rem}
.dinfo .disc{padding:3px 10px;vertical-align:middle}
.dinfo .pstamp{margin:6px 0 12px}
.dinfo .dshop{margin:4px 0 14px}
.dinfo .act.main{display:flex;gap:10px;align-items:stretch}
.dinfo .act.main .btn.go{flex:1;justify-content:center;padding:14px 18px;font-size:1.1rem;border-radius:16px}
.dinfo .act.main .ico{width:52px;height:auto;border-radius:16px}
.dinfo .by{margin-top:16px;padding:10px 12px;border-radius:14px;background:var(--mx-cream);border:1px solid var(--bd)}
.ddesc .ddh{font-size:1.2rem;font-weight:900;margin:0 0 10px;color:var(--mx-ink)}
.ddesc .full{line-height:1.7}

@media (max-width:760px){
  main.det .dgrid{grid-template-columns:1fr;gap:14px}
  .dinfo .dtitle{font-size:1.3rem}.dinfo .price.lg{font-size:1.9rem}
  main.det>article.card,main.det>section.card{padding:12px;border-radius:20px}
  main.det>.bc{border-radius:14px}
}
@media (max-width:560px){#list:not(.grid) .card.deal{background:linear-gradient(90deg,var(--mx-col) 150px,var(--mx-card) 150px)}#list:not(.grid) .deal>.img{margin:6px;background:var(--mx-img)}}
@media (max-width:640px){
  .hero{flex-direction:column;align-items:flex-start;padding:16px;gap:12px;margin-bottom:12px}
  .hero p{display:none}.hero h1{font-size:1.2rem;margin:0}
  .hstats{width:100%}.hstats>*{flex:1;min-width:0}
  #tabs.tabs{flex-wrap:nowrap}#tabs .tab{padding:7px 11px;font-size:.85rem}#tabs .tab .tic{height:18px}
}

/* Selector Hoy / Semana / Mes de «Más votados» */
#tabs .rng{margin-left:6px}
#tabs .rng>summary.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:999px;background:var(--mx-chip);border:1px solid var(--bd);color:var(--tx);font-weight:800;font-size:.85rem;box-shadow:0 2px 8px rgba(60,40,0,.06);cursor:pointer}
#tabs .rng>summary.btn::-webkit-details-marker{display:none}
#tabs .rng svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#tabs .rng .rci{color:#e8901a}
#tabs .rng .rch{transition:transform .15s;opacity:.7}
#tabs .rng[open] .rch{transform:rotate(180deg)}
#tabs .rmenu{top:calc(100% + 6px);padding:5px;border-radius:16px;background:var(--mx-card);border:1px solid var(--bd);box-shadow:0 12px 30px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);min-width:130px}
#tabs .rmenu a{border-radius:11px;padding:9px 12px;font-weight:600}
#tabs .rmenu a.on{background:linear-gradient(135deg,rgba(251,211,106,.35),rgba(242,163,27,.25));color:var(--mx-ink);font-weight:800}
#tabs .rmenu a:hover{background:var(--mx-cream)}
@media (max-width:640px){#tabs .rng{margin-left:2px}#tabs .rng>summary.btn{padding:5px 8px 5px 9px;font-size:.76rem;gap:4px}#tabs .rng svg{width:13px;height:13px}}

/* Nuevos / Más votados: control segmentado con carril propio, para distinguirlo de las familias */
#tabs.tabs{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)}
.tseg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(15,23,42,.07);box-shadow:inset 0 1px 3px rgba(15,23,42,.08)}
#tabs .tseg .tab{padding:8px 18px;font-size:.95rem;color:var(--mu);background:none;box-shadow:none}
#tabs .tseg .tab.on{background:linear-gradient(135deg,#fbd36a,#f2a31b 60%,#e8901a);color:#2b1e00;box-shadow:0 4px 12px rgba(232,144,26,.35)}
#tabs .tseg .tab:not(.on):hover{color:var(--tx)}
:root[data-theme="dark"] .tseg{background:rgba(255,255,255,.07)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tseg{background:rgba(255,255,255,.07)}}
@media (max-width:640px){#tabs.tabs{margin-top:10px;padding-top:10px}#tabs .tseg .tab{padding:7px 11px;font-size:.85rem}.tseg{gap:2px;padding:3px}}

/* Modo oscuro: las fotos de producto (casi siempre con fondo blanco) van sobre un recuadro claro
   con borde suave, en lugar de quedar como un bloque blanco sobre el fondo negro */
:root[data-theme="dark"] #list .deal .img,:root[data-theme="dark"] main.det .dgrid>.img.big{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.35);padding:8px}
:root[data-theme="dark"] #list .deal .img img,:root[data-theme="dark"] main.det .dgrid>.img.big img{mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #list .deal .img,:root:not([data-theme="light"]) main.det .dgrid>.img.big{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.35);padding:8px}
  :root:not([data-theme="light"]) #list .deal .img img,:root:not([data-theme="light"]) main.det .dgrid>.img.big img{mix-blend-mode:multiply}
}
/* Modo oscuro: la familia seleccionada en claro (el azul marino no se distingue del fondo) */
:root[data-theme="dark"] #cats .btn.on{background:#f1efe9;color:#0f172a;border-color:#f1efe9}
:root[data-theme="dark"] #cats .btn.on .ce{background:rgba(15,23,42,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #cats .btn.on{background:#f1efe9;color:#0f172a;border-color:#f1efe9}:root:not([data-theme="light"]) #cats .btn.on .ce{background:rgba(15,23,42,.08)}}

/* Ficha: «Copiar + ir al chollo» con el código arriba y el texto abajo, a la misma altura que el botón normal */
.dinfo .act.main .btn.go.long:has(.cd){flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:8px 14px;line-height:1.15;min-width:0}
.dinfo .act.main .btn.go.long .cd{margin:0;padding:1px 10px;font-size:.78rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px}
.dinfo .act.main .btn.go.long .ct{display:inline-flex;align-items:center;gap:6px;font-size:1rem;white-space:nowrap}
.dinfo .act.main .btn.go.long .ct svg{width:18px;height:18px}
@media (max-width:560px){.dinfo .act.main .btn.go.long:has(.cd){padding:7px 10px}.dinfo .act.main .btn.go.long .cd{font-size:.7rem;padding:1px 6px}.dinfo .act.main .btn.go.long .ct{font-size:.9rem;gap:4px}.dinfo .act.main .btn.go.long .ct svg{width:16px;height:16px}}
/* Ficha en escritorio: precio algo más fino */
@media (min-width:761px){.dinfo .price.lg{font-weight:700;letter-spacing:-.01em}}
/* Móvil: el selector Hoy / Semana / Mes baja a su propia línea, bajo las pestañas, para que no se monte */
@media (max-width:640px){#tabs.tabs{flex-wrap:wrap;row-gap:8px}#tabs .tseg{order:1}#tabs .vbs{order:2}#tabs .rng{order:3;flex:0 0 100%;margin-left:0}}

/* Ficha: cuenta atrás en bloque propio, con casillas */
.dinfo .tagrow .tag.cdown{display:none}
.dinfo .tagrow:not(:has(.tag:not(.cdown))){display:none}
.cdbox{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:4px 0 14px;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg,#fff1ef,#ffe4e0);border:1px solid #ffc9c2}
.cdbox .cdl{font-weight:800;color:#c4160a;font-size:.92rem}
.cdbox .cdseg{display:flex;gap:6px;color:#7a2a20;font-size:.85rem}
.cdbox .cdn{display:flex;flex-direction:column;align-items:center;min-width:44px;padding:5px 6px 4px;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(196,22,10,.10)}
.cdbox .cdn b{font-size:1.15rem;font-weight:800;line-height:1;color:#c4160a;font-variant-numeric:tabular-nums}
.cdbox .cdn i{font-style:normal;font-size:.68rem;color:#9a4a40;margin-top:2px}
.cdbox.done{background:var(--mx-cream);border-color:var(--bd)}.cdbox.done .cdl{color:var(--mu)}
:root[data-theme="dark"] .cdbox{background:linear-gradient(135deg,#3a1f1c,#2e1a18);border-color:#5a2c26}
:root[data-theme="dark"] .cdbox .cdn{background:#241716}:root[data-theme="dark"] .cdbox .cdl,:root[data-theme="dark"] .cdbox .cdn b{color:#ff8a7a}:root[data-theme="dark"] .cdbox .cdn i{color:#d9a59d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cdbox{background:linear-gradient(135deg,#3a1f1c,#2e1a18);border-color:#5a2c26}:root:not([data-theme="light"]) .cdbox .cdn{background:#241716}:root:not([data-theme="light"]) .cdbox .cdl,:root:not([data-theme="light"]) .cdbox .cdn b{color:#ff8a7a}:root:not([data-theme="light"]) .cdbox .cdn i{color:#d9a59d}}

/* Comentarios: «Responder» y «Editar» se envuelven en una pastilla como las familias al pasar el ratón */
.ra .ca{display:inline-flex;align-items:center;gap:5px;margin:0 -12px;padding:5px 12px;border-radius:999px;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s}
.ra .ca:hover,.ra .ca:focus-visible{background:var(--mx-chip);border-color:var(--bd);box-shadow:0 2px 8px rgba(60,40,0,.08);color:var(--tx)}

/* Etiqueta de tienda: al pasar el ratón se ilumina en dorado */
#list .deal .u.shop,.dshop .u.shop{border:1px solid transparent;transition:background .15s,box-shadow .15s,transform .15s,color .15s}
@media (hover:hover){
  #list .deal .u.shop:hover,.dshop .u.shop:hover{background:linear-gradient(135deg,#fff6dc,#fde6ae);border-color:rgba(232,144,26,.28);color:#4a3500;text-shadow:none;box-shadow:0 0 0 3px rgba(246,183,60,.10),0 3px 9px rgba(232,144,26,.18);transform:translateY(-1px)}
}
/* Modo oscuro: la tienda se ilumina con un dorado translúcido, sin el bloque crema */
@media (hover:hover){
  :root[data-theme="dark"] #list .deal .u.shop:hover,:root[data-theme="dark"] .dshop .u.shop:hover{background:rgba(246,183,60,.18);border-color:rgba(246,183,60,.45);color:#ffd66e;text-shadow:none;box-shadow:0 0 0 3px rgba(246,183,60,.08),0 0 14px rgba(246,183,60,.22)}
}
@media (hover:hover) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #list .deal .u.shop:hover,:root:not([data-theme="light"]) .dshop .u.shop:hover{background:rgba(246,183,60,.18);border-color:rgba(246,183,60,.45);color:#ffd66e;text-shadow:none;box-shadow:0 0 0 3px rgba(246,183,60,.08),0 0 14px rgba(246,183,60,.22)}
}

/* En revisión (oculto por denuncias): aviso para el autor y los moderadores */
.rvbox{margin:0 0 12px;padding:12px 16px;border-radius:14px;background:#fff4dc;border:1px solid #f2c96b;color:#5a4100;font-size:.92rem}
.rvbox p{margin:4px 0 8px}.rvbox p:last-child{margin-bottom:0}
.tag.enrev{background:#f2a31b;border-color:#f2a31b;color:#2b1e00;font-weight:800;padding:1px 10px}
.rvtag{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:#fff4dc;border:1px solid #f2c96b;color:#5a4100;font-size:.8rem;font-weight:700}
.crvnote{margin:4px 0;padding:6px 10px;border-radius:10px;background:#fff4dc;border:1px solid #f2c96b;color:#5a4100;font-size:.85rem}
.cm.crv>.cbody{opacity:.75}
:root[data-theme="dark"] .rvbox,:root[data-theme="dark"] .rvtag,:root[data-theme="dark"] .crvnote{background:rgba(246,183,60,.12);border-color:rgba(246,183,60,.45);color:#ffd66e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rvbox,:root:not([data-theme="light"]) .rvtag,:root:not([data-theme="light"]) .crvnote{background:rgba(246,183,60,.12);border-color:rgba(246,183,60,.45);color:#ffd66e}}

/* Motivo de la retirada (moderadores) */
.modwhy{display:grid;gap:6px;margin:12px 0 4px;text-align:left}
.modwhy .mwl{font-weight:700;font-size:.88rem}
.modwhy select,.modwhy textarea{width:100%;box-sizing:border-box}

/* Denuncia de visitantes sin cuenta */
.greport .rreasons{display:grid;gap:6px;margin:10px 0}
.greport label{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--bd);border-radius:10px;cursor:pointer;font-weight:500}
.greport label:has(input:checked){border-color:var(--ac);background:var(--bg)}
.greport input[type=radio],.greport input[type=checkbox]{width:auto;margin:0;accent-color:var(--ac)}
.greport textarea,.greport .grow input{width:100%;box-sizing:border-box}
.greport .grow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.greport .gacc{border:0;padding:4px 0;font-size:.88rem;align-items:flex-start}
.greport .gpriv{font-size:.78rem;margin:4px 0 10px}
.greport .hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:520px){.greport .grow{grid-template-columns:1fr}}
/* Perfil público: «Ver todos los chollos» como píldora con flecha en círculo dorado */
.uback{display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--tx);text-decoration:none;background:rgba(255,255,255,.6);border:1px solid rgba(227,154,38,.35);box-shadow:0 4px 14px rgba(60,40,0,.07);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,box-shadow .15s,transform .15s,color .15s}
.ubi{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 4px 10px rgba(227,154,38,.35);transition:transform .2s}
.ubi svg{width:16px;height:16px}
.uback:active{transform:scale(.98)}
@media (hover:hover){.uback:hover{color:#b87a00;border-color:#e8a417;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(232,164,23,.2),0 8px 22px rgba(212,143,0,.22)}
.uback:hover .ubi{transform:translateX(-3px)}}
:root[data-theme="dark"] .uback{background:rgba(255,255,255,.06);border-color:rgba(240,194,92,.3)}
@media (hover:hover){:root[data-theme="dark"] .uback:hover{color:#ffd66e}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .uback{background:rgba(255,255,255,.06);border-color:rgba(240,194,92,.3)}}
@media (prefers-color-scheme:dark) and (hover:hover){:root:not([data-theme="light"]) .uback:hover{color:#ffd66e}}
/* Cabecera de tienda: icono, nombre y número de chollos; «Ver todos los chollos» a la derecha */
.shopc{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;background:linear-gradient(120deg,rgba(255,236,190,.55),rgba(255,255,255,.4) 55%);border-color:rgba(227,154,38,.28)}
.shopi{flex:none;width:56px;height:56px;margin:0;border-radius:17px;box-shadow:0 8px 20px rgba(227,154,38,.3)}
.shopi svg{width:30px;height:30px}
.shopt{flex:1;min-width:0;display:flex;flex-direction:column}
.shope{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--act)}
.shopc .shoph{margin:2px 0;font-size:1.6rem;overflow-wrap:anywhere}
.shopc .uback{flex:none}
@media (max-width:600px){.shopc{flex-wrap:wrap;padding:16px}.shopi{width:50px;height:50px}.shopc .shoph{font-size:1.35rem}.shopc .uback{width:100%;justify-content:center}}
:root[data-theme="dark"] .shopc{background:linear-gradient(120deg,rgba(240,194,92,.12),rgba(255,255,255,.03) 55%);border-color:rgba(240,194,92,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shopc{background:linear-gradient(120deg,rgba(240,194,92,.12),rgba(255,255,255,.03) 55%);border-color:rgba(240,194,92,.22)}}
/* Ajustes de cuenta: cada bloque con icono en degradado, título y explicación; estados en píldora */
.sets{display:grid;gap:14px}
.sets .setc{margin:0;padding:18px 20px;border-radius:18px;transition:box-shadow .2s,border-color .2s}
@media (hover:hover){.sets .setc:hover{border-color:rgba(227,154,38,.3);box-shadow:0 10px 28px rgba(60,40,0,.07)}}
.seth{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.seth .sti{flex:none;width:44px;height:44px;margin:0;border-radius:14px;box-shadow:0 6px 16px rgba(60,40,0,.12)}
.seth .sti svg{width:23px;height:23px}
.seth div{min-width:0}
.sets .seth h3{margin:1px 0 0;font-size:1.06rem;line-height:1.3}
.seth p{margin:3px 0 0;color:var(--mu);font-size:.86rem;line-height:1.4}
.idz{background:linear-gradient(135deg,#ffc9c2,#e5483a)}
.setav{display:flex;align-items:center;gap:16px;padding-left:58px}
.setav img{box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 0 5px rgba(227,154,38,.45)}
.sets .setc>form,.sets .setst,.sets .setd,.sets .setc>.mb10{margin-left:58px}
.setst{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:12px;font-size:.92rem;overflow-wrap:anywhere}
.spill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:800;background:rgba(120,100,60,.1);color:var(--mu);white-space:nowrap}
.spill.ok{background:rgba(63,184,106,.14);color:#1f8a47}
.spill.no{background:rgba(229,72,58,.12);color:#c0392b}
.sets input:not([type=checkbox]):not([type=file]){border-radius:12px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.sets input:not([type=checkbox]):focus{outline:0;border-color:#e8a417;box-shadow:0 0 0 3px rgba(232,164,23,.18)}
.sets button,.sets .btn{border-radius:12px}
.sets .setd>summary{display:inline-flex;align-items:center;gap:8px}
.sets .setd>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.sets .setd[open]>summary::after{transform:rotate(-135deg) translate(-2px,0)}
.sets .setd form{display:grid;gap:8px;max-width:420px;padding:14px;border-radius:14px;background:rgba(120,100,60,.05);border:1px solid var(--bd)}
.sets .setd form input{margin:0}
.sets .setd form button{justify-self:start}
.sets .setc.dz{border-color:rgba(229,72,58,.35);background:linear-gradient(120deg,rgba(255,225,220,.55),rgba(255,255,255,.4) 60%)}
@media (max-width:600px){.sets .setc{padding:16px}.setav,.sets .setc>form,.sets .setst,.sets .setd,.sets .setc>.mb10{margin-left:0;padding-left:0}}
:root[data-theme="dark"] .spill.ok{color:#6fdc95}
:root[data-theme="dark"] .spill.no{color:#ff8a7e}
:root[data-theme="dark"] .sets .setc.dz{background:linear-gradient(120deg,rgba(229,72,58,.13),rgba(255,255,255,.02) 60%)}
:root[data-theme="dark"] .setav img{box-shadow:0 0 0 3px rgba(0,0,0,.4),0 0 0 5px rgba(240,194,92,.4)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spill.ok{color:#6fdc95}
:root:not([data-theme="light"]) .spill.no{color:#ff8a7e}
:root:not([data-theme="light"]) .sets .setc.dz{background:linear-gradient(120deg,rgba(229,72,58,.13),rgba(255,255,255,.02) 60%)}
:root:not([data-theme="light"]) .setav img{box-shadow:0 0 0 3px rgba(0,0,0,.4),0 0 0 5px rgba(240,194,92,.4)}}
.sets button:not(.imx),.sets .btn{padding:8px 16px;font-size:.92rem;line-height:1.4}
/* Formulario de colgar chollo: cabecera, pasos numerados, zona de fotos y barra de publicar */
#form{padding:0;overflow:hidden;border-radius:22px}
.fhero{padding:22px 24px 18px;background:linear-gradient(120deg,rgba(255,236,190,.6),rgba(255,255,255,0) 70%);border-bottom:1px solid var(--bd)}
#form .fhead{gap:12px;margin:0;font-size:1.35rem;line-height:1.2}
.fhead>span:last-child{display:flex;flex-direction:column}
.fhead small{margin-top:4px;font-size:.88rem;font-weight:500;color:var(--mu)}
.fhi{font-size:2rem;line-height:1}
#form>.fsec,#form>.fact,#form>ul{margin:0 24px}
.fsec{padding:20px 0;border-bottom:1px solid var(--bd)}
.fsh{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.fsn{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;font-weight:900;font-size:.95rem;color:#fff;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 4px 12px rgba(227,154,38,.35)}
.fsh h3{margin:3px 0 0;font-size:1.05rem;line-height:1.3}
.fsh p{margin:2px 0 0;color:var(--mu);font-size:.85rem;line-height:1.4}
#form input:not([type=checkbox]):not([type=file]),#form select,#form textarea{border-radius:12px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
#form :is(input,select,textarea):focus{outline:0;border-color:#e8a417;box-shadow:0 0 0 3px rgba(232,164,23,.18)}
#form label[for]{display:block;margin:8px 2px 6px;font-size:.85rem;font-weight:700;color:var(--mu)}
#form .togl{border-radius:999px;padding:7px 16px;font-size:.9rem}
#shopinfo:not(:empty),#catinfo:not(:empty){display:inline-flex;align-items:center;gap:6px;margin:2px 0 10px;padding:5px 12px;border-radius:999px;background:rgba(247,194,70,.14);color:var(--tx);font-size:.85rem}
.dupbox{border-radius:14px}
/* Zona de fotos: recuadro discontinuo que se puede pulsar entero */
.fsec .phadd{gap:14px;margin:4px 0 0;padding:16px;border:1.5px dashed rgba(227,154,38,.5);border-radius:16px;background:rgba(247,194,70,.06);cursor:pointer;transition:border-color .15s,background .15s}
.fsec .phadd .imb{width:48px;height:48px;border-radius:14px;color:#fff;border:0;background:linear-gradient(135deg,#ffe7a8,#f6b73c);box-shadow:0 6px 16px rgba(227,154,38,.3)}
.fsec .phadd .imb svg{width:24px;height:24px}
#phinfo{display:flex;flex-direction:column;font-size:.85rem}
#phinfo b{color:var(--tx);font-size:.95rem}
@media (hover:hover){.fsec .phadd:hover{border-color:#e8a417;background:rgba(247,194,70,.12)}}
.fsec .pgrid:not(:empty){margin-bottom:12px}
.fsec .pt{border-radius:12px;overflow:hidden}
#form .dtools .imb,#form .dtools .eb{border-radius:10px}
/* Barra final: publicar destacado */
#form>.fact{margin:0;padding:18px 24px;gap:10px;background:rgba(120,100,60,.04)}
#pub{padding:11px 26px;font-size:1rem;border-radius:12px}
#form #cancel{border-radius:12px;padding:11px 20px}
@media (max-width:600px){.fhero{padding:18px 16px 14px}#form>.fsec,#form>ul{margin:0 16px}#form>.fact{padding:16px}#pub{flex:1}#form .fhead{font-size:1.2rem}}
:root[data-theme="dark"] .fhero{background:linear-gradient(120deg,rgba(240,194,92,.12),rgba(255,255,255,0) 70%)}
:root[data-theme="dark"] #form>.fact{background:rgba(255,255,255,.03)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fhero{background:linear-gradient(120deg,rgba(240,194,92,.12),rgba(255,255,255,0) 70%)}
:root:not([data-theme="light"]) #form>.fact{background:rgba(255,255,255,.03)}}
/* Buscador: píldora de cristal con sombra suave; el zorro de la lupa asoma por la izquierda y se inclina al buscar */
.sw input{border-radius:999px!important;background-color:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.85)!important;box-shadow:0 6px 20px rgba(120,70,0,.16),inset 0 1px 0 #fff!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .2s,border-color .2s,background-color .2s}
.sw input:hover{box-shadow:0 8px 24px rgba(120,70,0,.22),inset 0 1px 0 #fff!important}
.sw input:focus{outline:0;background-color:#fff!important;border-color:#f0b32e!important;box-shadow:0 0 0 4px rgba(255,214,110,.45),0 10px 28px rgba(120,70,0,.22)!important}
.sw .swi{z-index:2;filter:drop-shadow(0 2px 3px rgba(80,40,0,.25));transform-origin:60% 70%;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.sw:focus-within .swi{transform:translateY(-50%) rotate(-10deg) scale(1.1)}
header>.sw .swi{height:34px;left:6px}
header>.sw input{padding-top:9px;padding-bottom:9px;padding-left:48px}
.sw .qx{z-index:2;background:rgba(120,100,60,.14);color:#4a463e;transition:background .15s}
.sw .qx:hover{background:rgba(120,100,60,.26)}
/* «Colgar chollo»: píldora negra como el marco del logo, con el «+» en un círculo dorado que gira al pasar el ratón */
#toggle{display:inline-flex!important;align-items:center;gap:9px;border-radius:999px!important;padding:6px 18px 6px 6px!important;font-weight:800;background:#14213d!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 8px 22px rgba(60,30,0,.35),inset 0 1px 0 rgba(255,255,255,.1)!important;text-shadow:none!important;transition:transform .15s,box-shadow .2s,color .2s}
#toggle .tgi{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 3px 8px rgba(227,154,38,.45);transition:transform .3s}
#toggle .tgi svg{width:16px;height:16px}
#toggle:active{transform:scale(.97)}
@media (hover:hover){#toggle:hover{transform:translateY(-2px);color:#ffd66e!important;filter:none;box-shadow:0 0 0 3px rgba(255,214,110,.35),0 12px 28px rgba(60,30,0,.45)!important}
#toggle:hover .tgi{transform:rotate(90deg)}}
#toggle:focus-visible{outline:2px solid #ffd66e;outline-offset:3px}
/* Barra fija al bajar: menú y buscar como botones redondos de cristal; «Colgar» igual que el botón grande; «Entrar» en píldora blanca */
#hbar .hb{height:34px;min-width:34px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.85);color:#5c4000;box-shadow:0 3px 10px rgba(120,70,0,.18);transition:transform .15s,box-shadow .2s,background .2s}
#hbar button.hb{width:34px;padding:0!important}
#hbar .hb svg{width:18px;height:18px}
#hbar .hent{padding:0 14px!important;font-weight:800}
#hbar .hb.hpost{gap:7px;padding:0 13px 0 3px!important;font-weight:800;background:#14213d;color:#fff;border-color:rgba(255,255,255,.14);box-shadow:0 5px 14px rgba(60,30,0,.35),inset 0 1px 0 rgba(255,255,255,.1)}
#hbar .hpost .tgi{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 2px 6px rgba(227,154,38,.45);transition:transform .3s}
#hbar .hpost .tgi svg{width:14px;height:14px}
#hbar .hb:active{transform:scale(.95)}
#hbar .hav img{box-shadow:0 0 0 2px #fff,0 3px 10px rgba(120,70,0,.25);border-radius:50%}
@media (hover:hover){#hbar .hb:hover{transform:translateY(-1px);background:#fff;box-shadow:0 0 0 3px rgba(255,214,110,.4),0 6px 16px rgba(120,70,0,.25)}
#hbar .hb.hpost:hover{background:#14213d;color:#ffd66e;box-shadow:0 0 0 3px rgba(255,214,110,.35),0 8px 20px rgba(60,30,0,.45)}
#hbar .hpost:hover .tgi{transform:rotate(90deg)}}
/* Títulos de los chollos en Nunito 800 (la familia del logo); en el ordenador, la lista los muestra más grandes */
#list .deal h3,#list .deal h3 a,.dinfo .dtitle{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800}
.dinfo .dtitle{letter-spacing:0}
@media (min-width:900px){#list:not(.grid) .deal h3{font-size:1.16rem;line-height:1.28;letter-spacing:-.005em}.grid .deal h3{font-size:1.02rem}}
#list .deal h3 a{transition:color .15s}
@media (hover:hover){#list .deal h3 a:hover{color:#c98a00}:root[data-theme="dark"] #list .deal h3 a:hover{color:#ffd66e}}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) #list .deal h3 a:hover{color:#ffd66e}}
/* Barra fija en el móvil: sin perfil ni «Entrar» (están arriba y en el menú); el logo queda centrado con tres columnas */
@media (max-width:560px){
#hbar .hav,#hbar .hent{display:none!important}
#hbar{display:grid;grid-template-columns:1fr auto 1fr;gap:0}
#hbar>.hb:nth-child(1){grid-column:1;grid-row:1;justify-self:start}
#hbar>.hb:nth-child(2){grid-column:1;grid-row:1;justify-self:start;margin-left:40px}
#hbar .hlg{grid-column:2;grid-row:1;width:clamp(96px,calc(100vw - 270px),166px)}
#hbar .hpost{grid-column:3;grid-row:1;justify-self:end}
}
/* Lista vacía: tarjeta centrada con el zorro del portátil (flota suavemente) y botón negro como «Colgar chollo» */
.card.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px 28px;border-radius:22px;background:radial-gradient(circle at 50% 0,rgba(255,226,150,.5),rgba(255,255,255,0) 65%),var(--card)}
.emz{width:96px;height:96px;filter:drop-shadow(0 8px 14px rgba(120,70,0,.22));animation:emzf 3.2s ease-in-out infinite}
@keyframes emzf{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
.card.empty h3{margin:12px 0 4px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:1.3rem;line-height:1.25}
.card.empty p{margin:0;color:var(--mu);font-size:.95rem;max-width:420px}
.ecta{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:6px 18px 6px 6px;border-radius:999px;font-weight:800;text-decoration:none;color:#fff;background:#14213d;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 22px rgba(60,30,0,.28),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .15s,box-shadow .2s,color .2s}
.ecta .tgi{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 3px 8px rgba(227,154,38,.45);transition:transform .3s}
.ecta .tgi svg{width:16px;height:16px}
.ecta:active{transform:scale(.97)}
@media (hover:hover){.ecta:hover{transform:translateY(-2px);color:#ffd66e;box-shadow:0 0 0 3px rgba(255,214,110,.35),0 12px 28px rgba(60,30,0,.38)}.ecta:hover .tgi{transform:rotate(90deg)}}
:root[data-theme="dark"] .card.empty{background:radial-gradient(circle at 50% 0,rgba(240,194,92,.14),rgba(255,255,255,0) 65%),var(--card)}
:root[data-theme="dark"] .ecta{background:#14213d;border-color:rgba(240,194,92,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card.empty{background:radial-gradient(circle at 50% 0,rgba(240,194,92,.14),rgba(255,255,255,0) 65%),var(--card)}
:root:not([data-theme="light"]) .ecta{background:#14213d;border-color:rgba(240,194,92,.3)}}
#list .minew>.card{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;margin-bottom:0}
/* Estadísticas del perfil: «Ver tus chollos» y «Ver tu perfil público» como píldoras con icono y flecha hacia delante */
.uacts.urow{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.uacts.urow .uback{width:auto;max-width:none;padding-right:14px}
.uback .ufw{width:16px;height:16px;margin-left:2px;opacity:.55;transition:transform .2s,opacity .2s}
@media (hover:hover){.uback.fwd:hover .ubi{transform:none}.uback.fwd:hover .ufw{transform:translateX(3px);opacity:1}}
@media (max-width:480px){.uacts.urow .uback{width:100%;justify-content:flex-start}.uacts.urow .ufw{margin-left:auto}}
/* Menú lateral: cabecera con tu perfil, «Colgar chollo», opciones con icono en círculo, interruptor de modo oscuro y «Cerrar sesión» abajo */
.dpanel{display:flex;flex-direction:column;padding:0 0 14px;border-radius:0 24px 24px 0}
.dpanel .dhead{display:flex;align-items:center;gap:10px;padding:18px 14px 16px 16px;background:linear-gradient(135deg,rgba(255,224,150,.75),rgba(255,255,255,.2));border-bottom:1px solid rgba(227,154,38,.25);font-size:1rem;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dme{flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx)}
.dme>span:last-child{display:flex;flex-direction:column;min-width:0}
.dme b{font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:1.12rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dme small{color:var(--mu);font-size:.82rem}
.dme .av img,.dme.guest img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(120,70,0,.25)}
.dme.guest img{border-radius:0;box-shadow:none;object-fit:contain}
@media (hover:hover){a.dme:hover small{color:#b87a00}}
.dpanel .dx{width:34px;height:34px;flex:none;padding:0;border-radius:50%;background:rgba(255,255,255,.6);font-size:.95rem;display:flex;align-items:center;justify-content:center;align-self:flex-start}
.dpanel .dx:hover{background:#fff}
.dauth{display:flex;gap:8px;padding:14px 16px 0}
.dauth .btn{flex:1;border-radius:12px;margin:0;padding:9px 8px;font-size:.9rem;white-space:nowrap}
.ecta.dpost{align-self:stretch;justify-content:center;margin:14px 16px 6px;padding:7px 18px 7px 7px}
.dnav{display:flex;flex-direction:column;gap:2px;padding:4px 8px}
.dpanel .ditem{justify-content:flex-start;gap:12px;padding:8px 10px;border-radius:14px;font-weight:700;transition:background .15s,color .15s}
.dpanel .ditem:hover{background:rgba(247,194,70,.16)}
.dpanel .ditem.on{background:linear-gradient(135deg,rgba(247,194,70,.35),rgba(228,152,36,.22));color:var(--onac,#3a2900)}
.dic{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;box-shadow:0 4px 10px rgba(60,40,0,.12);transition:transform .2s}
.dic svg{width:19px;height:19px}
@media (hover:hover){.dpanel .ditem:hover .dic,.dswitch:hover .dic{transform:scale(1.08)}}
.idk{background:linear-gradient(135deg,#4b5563,#15171c)}
.dlb{flex:1;text-align:left}
.dpanel .chev{width:8px;height:8px;margin-right:6px;border:solid var(--mu);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s;font-size:0}
.dgroup[open]>summary .chev{transform:rotate(-135deg) translate(-2px,0)}
.dpanel .dtree{margin:4px 0 6px 22px;padding-left:10px;border-left:2px solid rgba(227,154,38,.3)}
.dpanel .mrow a{padding:8px 12px;border-radius:10px}
.dpanel .ms .mrow a{padding-left:24px}
.dpanel .ml{padding-left:38px;border-radius:10px}
.dsec{margin:14px 18px 4px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.dswitch{display:flex;align-items:center;gap:12px;margin:10px 8px 0;padding:8px 10px;border-radius:14px;background:none;border:0;box-shadow:none;color:var(--tx);font:inherit;font-weight:700;cursor:pointer;width:calc(100% - 16px)}
.dswitch:hover{background:rgba(247,194,70,.16)}
.sw2{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:rgba(120,100,60,.25);transition:background .2s}
.sw2::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s}
.dswitch[aria-checked="true"] .sw2{background:linear-gradient(135deg,#f7c246,#e49824)}
.dswitch[aria-checked="true"] .sw2::after{transform:translateX(18px)}
.dout{display:flex;align-items:center;gap:10px;margin:auto 16px 0;padding:16px 4px 0;border-top:1px solid var(--bd);color:#b4493d;font-weight:700;text-decoration:none}
.dout svg{width:20px;height:20px}
.dout:hover{color:#d1301f}
.dnav+.dswitch,.dnav+.dsec{margin-top:6px}
:root[data-theme="dark"] .dpanel .dhead{background:linear-gradient(135deg,rgba(240,194,92,.18),rgba(255,255,255,.02))}
:root[data-theme="dark"] .dpanel .dx{background:rgba(255,255,255,.08);color:var(--tx)}
:root[data-theme="dark"] .dme .av img{box-shadow:0 0 0 3px rgba(255,255,255,.15),0 4px 12px rgba(0,0,0,.4)}
:root[data-theme="dark"] .dpanel .ditem.on{color:#ffd66e}
:root[data-theme="dark"] .dout{color:#ff8a7e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dpanel .dhead{background:linear-gradient(135deg,rgba(240,194,92,.18),rgba(255,255,255,.02))}
:root:not([data-theme="light"]) .dpanel .dx{background:rgba(255,255,255,.08);color:var(--tx)}
:root:not([data-theme="light"]) .dpanel .ditem.on{color:#ffd66e}
:root:not([data-theme="light"]) .dout{color:#ff8a7e}}
/* Popup «¡Únete a SocialChollo!»: banda dorada con el zorro que celebra, ventajas con icono y botones a todo el ancho */
#mbox:has(.lgp){padding:0;overflow:hidden;max-width:400px}
.lgp{position:relative;padding:0 22px 22px;text-align:center}
.lgp .close{position:absolute;top:12px;right:12px;z-index:1;background:rgba(255,255,255,.65)}
.lgh{margin:0 -22px;padding:22px 0 14px;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),linear-gradient(135deg,#ffd36b,#f2a93b)}
.lgz{display:block;margin:0 auto;width:88px;height:88px;filter:drop-shadow(0 8px 14px rgba(120,60,0,.3));animation:lgzb 2.4s ease-in-out infinite}
@keyframes lgzb{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
.lgp h3{margin:16px 0 4px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:1.35rem;line-height:1.2}
.lgm{margin:0;color:var(--mu);font-size:.92rem}
.lgb{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:8px;text-align:left}
.lgb li{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(120,100,60,.06);font-weight:700;font-size:.92rem}
.lgb .dic{width:30px;height:30px;border-radius:10px}
.lgb .dic svg{width:17px;height:17px}
.lga{display:grid;gap:8px}
.lga .btn{margin:0;padding:11px 16px;border-radius:14px;font-size:1rem}
:root[data-theme="dark"] .lgb li{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .lgh{background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c98a1c,#8a5a10)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lgb li{background:rgba(255,255,255,.05)}
:root:not([data-theme="light"]) .lgh{background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c98a1c,#8a5a10)}}
.lgp :focus:not(:focus-visible){outline:0}.lgp :focus-visible{outline:2px solid #e8a417;outline-offset:2px}
/* Botón ✕ de los popups en modo oscuro: círculo oscuro con la cruz blanca */
:root[data-theme="dark"] button.imx,:root[data-theme="dark"] .lgp .close{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.22)}
:root[data-theme="dark"] button.imx:hover,:root[data-theme="dark"] .lgp .close:hover{background:rgba(0,0,0,.65);color:#ffd66e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button.imx,:root:not([data-theme="light"]) .lgp .close{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.22)}
:root:not([data-theme="light"]) button.imx:hover,:root:not([data-theme="light"]) .lgp .close:hover{background:rgba(0,0,0,.65);color:#ffd66e}}
/* Pantallas de cuenta (iniciar sesión, registro…): zorro sobre una banda dorada, campos con icono y botones grandes */
.card.auth{position:relative;overflow:hidden;border-radius:24px;padding:0 26px 26px}
.card.auth::before{content:"";position:absolute;left:0;right:0;top:0;height:118px;background:radial-gradient(circle at 50% 130%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),linear-gradient(135deg,#ffd36b,#f2a93b);z-index:0}
.card.auth>*{position:relative;z-index:1}
.card.auth .authfox{width:92px;height:92px;margin:22px auto 6px;filter:drop-shadow(0 8px 14px rgba(120,60,0,.28))}
.card.auth:not(.login) .authfox{border-radius:50%;box-shadow:0 0 0 4px #fff}
.ahd{height:118px;display:flex;align-items:flex-end;justify-content:center}
.ahd .authfox{margin:0 0 6px!important}
.card.auth h2{margin:16px 0 4px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:1.5rem}
.asub{margin:0 0 18px;color:var(--mu);font-size:.93rem}
.aerr{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(229,72,58,.1);color:#c0392b;font-size:.9rem;font-weight:600;text-align:left}
.aerr svg{width:18px;height:18px;flex:none}
.fld{position:relative;display:block;margin-bottom:10px}
.fld>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mu);z-index:1;pointer-events:none;transition:color .15s}
.fld input{margin:0!important;padding:13px 14px 13px 44px!important;border-radius:14px!important}
.fld .pwd input{padding-right:46px!important}
.fld:focus-within>svg{color:#d48f00}
.auth .fld input:focus{outline:0;border-color:#e8a417;box-shadow:0 0 0 3px rgba(232,164,23,.18)}
.aforgot{display:block;margin:-2px 2px 16px auto;width:max-content;font-size:.85rem;font-weight:700;color:var(--act);text-decoration:none}
.aforgot:hover{text-decoration:underline}
.auth .abtn{display:block;width:100%;padding:13px 16px;border-radius:14px;font-size:1.02rem;box-sizing:border-box}
.aor{display:flex;align-items:center;gap:10px;margin:20px 0 12px;color:var(--mu);font-size:.85rem}
.aor::before,.aor::after{content:"";flex:1;border-top:1px solid var(--bd)}
:root[data-theme="dark"] .card.auth::before{background:radial-gradient(circle at 50% 130%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c98a1c,#8a5a10)}
:root[data-theme="dark"] .aerr{color:#ff8a7e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card.auth::before{background:radial-gradient(circle at 50% 130%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c98a1c,#8a5a10)}
:root:not([data-theme="light"]) .aerr{color:#ff8a7e}}
.auth input:not([type=checkbox]):focus{outline:0;border-color:#e8a417;box-shadow:0 0 0 3px rgba(232,164,23,.18)}.auth input:not([type=checkbox]){border-radius:14px}
/* Selector de emojis: panel de cristal con cabecera, «Recientes», cuadrícula que crece al señalar y el nombre abajo */
#emp{display:flex!important;flex-direction:column;padding:0!important;overflow:hidden!important;border-radius:20px!important;background:var(--glass-strong,var(--card))!important;-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(227,154,38,.28)!important;box-shadow:0 18px 44px rgba(60,40,0,.25)!important;animation:empin .16s ease-out;transform-origin:bottom right}
@keyframes empin{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}
.emh{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 8px 16px;background:linear-gradient(135deg,rgba(255,224,150,.7),rgba(255,255,255,0));border-bottom:1px solid rgba(227,154,38,.2)}
.emh b{font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:1rem}
#emp .emx{width:28px;height:28px;padding:0;border-radius:50%;background:rgba(120,100,60,.12);color:var(--mu);font-size:.8rem;display:flex;align-items:center;justify-content:center}
#emp .emx:hover{background:rgba(120,100,60,.22);color:var(--tx)}
.embd{overflow:auto;padding:6px 8px 8px;min-height:0;flex:1}
.ems{margin:6px 6px 4px;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.emg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
#emp .emg button{padding:4px;border-radius:14px;transition:background .15s,transform .15s}
#emp .emg button:hover,#emp .emg button:focus-visible{background:rgba(247,194,70,.24);transform:scale(1.12)}
#emp .emg button:active{transform:scale(.95)}
.emf{padding:8px 14px;border-top:1px solid var(--bd);font-size:.85rem;font-weight:700;color:var(--mu);text-align:center;min-height:1.3em}
@media (hover:none){.emf{display:none}}
@media(min-width:900px) and (hover:hover){.emg{grid-template-columns:repeat(6,1fr)}}
:root[data-theme="dark"] .emh{background:linear-gradient(135deg,rgba(240,194,92,.16),rgba(255,255,255,0))}
:root[data-theme="dark"] #emp .emx{background:rgba(0,0,0,.4);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .emh{background:linear-gradient(135deg,rgba(240,194,92,.16),rgba(255,255,255,0))}
:root:not([data-theme="light"]) #emp .emx{background:rgba(0,0,0,.4);color:#fff}}
/* Editor con emojis a la vista (sustituye a los cuadros con botón de emojis; el textarea real queda oculto) */
textarea.rteta{display:none!important}
.rte{display:block;width:100%;box-sizing:border-box;margin:0 0 8px;padding:10px 12px;border:1px solid #c9bda4;border-radius:12px;background:#fff;color:var(--tx);font:inherit;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;overflow-y:auto;max-height:280px;cursor:text;box-shadow:inset 0 1px 2px rgba(60,40,0,.06);transition:border-color .15s,box-shadow .15s,min-height .2s;outline:0}
.rte:hover:not(:focus){border-color:#b3a585}
.rte:focus{border-color:#e8a417;box-shadow:0 0 0 3px rgba(232,164,23,.18)}
.rte.empty::before{content:attr(data-ph);color:#8a857a;pointer-events:none;position:absolute}
.rte{position:relative}
.rte img.emo{width:1.75em;height:1.75em;vertical-align:-.5em;margin:0 1px;display:inline-block;cursor:default}
.rte.cta{flex:1 1 100%;min-height:40px;padding:9px 12px;line-height:1.35;margin:0}
.rte.cta.big{min-height:110px}
.rte.desc-ta{min-height:9.5em}
#form .rte{border-radius:12px;padding:11px 13px}
:root[data-theme="dark"] .rte{background:rgba(255,255,255,.05);border-color:var(--bd);box-shadow:none}
:root[data-theme="dark"] .rte.empty::before{color:#8f8d86}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rte{background:rgba(255,255,255,.05);border-color:var(--bd);box-shadow:none}
:root:not([data-theme="light"]) .rte.empty::before{color:#8f8d86}}
/* Menú lateral, modo claro: al pasar el ratón, la fila se marca más (fondo dorado, texto tostado y un poco de relieve) */
@media (hover:hover){
.dpanel .ditem:hover,.dswitch:hover{background:linear-gradient(135deg,rgba(247,194,70,.42),rgba(228,152,36,.26));color:#7a4f00;box-shadow:inset 0 0 0 1px rgba(227,154,38,.35),0 3px 10px rgba(150,90,0,.12)}
.dpanel .mrow a:hover,.dpanel .ml:hover{background:rgba(247,194,70,.3);color:#7a4f00}
:root[data-theme="dark"] .dpanel .ditem:hover,:root[data-theme="dark"] .dswitch:hover{background:rgba(247,194,70,.16);color:#ffd66e;box-shadow:none}
:root[data-theme="dark"] .dpanel .mrow a:hover,:root[data-theme="dark"] .dpanel .ml:hover{background:rgba(247,194,70,.14);color:#ffd66e}}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dpanel .ditem:hover,:root:not([data-theme="light"]) .dswitch:hover{background:rgba(247,194,70,.16);color:#ffd66e;box-shadow:none}
:root:not([data-theme="light"]) .dpanel .mrow a:hover,:root:not([data-theme="light"]) .dpanel .ml:hover{background:rgba(247,194,70,.14);color:#ffd66e}}
.dpanel .ditem.on,.dpanel .ditem.on:hover{background:linear-gradient(135deg,#f7c246,#e49824);color:#3a2900;box-shadow:0 4px 12px rgba(227,154,38,.35)}.dpanel .ditem.on .dic{box-shadow:0 0 0 2px rgba(255,255,255,.7)}
:root[data-theme="dark"] .dpanel .ditem.on{color:#3a2900}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dpanel .ditem.on{color:#3a2900}}
/* Menú del perfil: como el menú lateral (icono en color, fila dorada al pasar el ratón, la sección actual en dorado intenso) y «Colgar chollo» en píldora negra */
.pside{padding:10px}
.pside>a.pitem{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;font-weight:700;color:var(--tx)}
.pside>a.pitem .dlb{min-width:0}
.pside>a.ppost{display:flex;justify-content:center;margin:10px 2px 2px;padding:7px 18px 7px 7px;color:#fff;font-weight:800}
.pside>a.ppost:active{background:#14213d}
@media (hover:hover){
.pside>a.pitem:hover:not(.on){background:linear-gradient(135deg,rgba(247,194,70,.42),rgba(228,152,36,.26));color:#7a4f00;box-shadow:inset 0 0 0 1px rgba(227,154,38,.35),0 3px 10px rgba(150,90,0,.12)}
.pside>a.pitem:hover .dic{transform:scale(1.08)}
.pside>a.ppost:hover{background:#14213d;color:#ffd66e}
:root[data-theme="dark"] .pside>a.pitem:hover:not(.on){background:rgba(247,194,70,.16);color:#ffd66e;box-shadow:none}
:root[data-theme="dark"] .pside>a.ppost:hover{background:#14213d}}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pside>a.pitem:hover:not(.on){background:rgba(247,194,70,.16);color:#ffd66e;box-shadow:none}
:root:not([data-theme="light"]) .pside>a.ppost:hover{background:#14213d}}
.pside>a.pitem.on,.pside>a.pitem:active{background:linear-gradient(135deg,#f7c246,#e49824);color:#3a2900;box-shadow:0 4px 12px rgba(227,154,38,.35)}
.pside>a.pitem.on .dic{box-shadow:0 0 0 2px rgba(255,255,255,.7)}
@media (max-width:560px){.pside{padding:8px}.pside>a.pitem{flex-direction:column;justify-content:center;gap:6px;padding:10px 4px;text-align:center}.pside>a.ppost{grid-column:1/-1;margin:4px 0 0}}
/* Acciones de la ficha (Editar, Marcar caducado/Reactivar, Borrar): píldoras de cristal con icono en círculo de color */
.dacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dacts form.inl{display:contents}
.dab{display:inline-flex;align-items:center;gap:8px;margin:0;padding:3px 13px 3px 3px;border-radius:999px;font:inherit;font-size:.88rem;font-weight:700;line-height:1;color:var(--tx);text-decoration:none;cursor:pointer;background:rgba(255,255,255,.72);border:1px solid rgba(201,189,164,.8);box-shadow:0 2px 8px rgba(80,50,0,.08);transition:transform .15s,box-shadow .2s,background .2s,color .2s,border-color .2s}
.dabi{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#fff;transition:transform .25s}
.dabi svg{width:13px;height:13px}
.dab.ed .dabi{background:linear-gradient(135deg,#f7c246,#e49824)}
.dab.ex .dabi{background:linear-gradient(135deg,#9aa3b2,#5b6472)}
.dab.re .dabi{background:linear-gradient(135deg,#6fd08f,#2f9e5b)}
.dab.dl .dabi{background:linear-gradient(135deg,#ff8a6b,#e23d1c)}
.dab.dl{color:#c02a0c}
.dab.off{opacity:.55}
.dab:active{transform:scale(.96)}
@media (hover:hover){.dab:hover{transform:translateY(-1px);background:#fff;box-shadow:0 6px 16px rgba(80,50,0,.16)}
.dab.ed:hover,.dab.re:hover{border-color:#e4a52e;color:#7a4f00}.dab.ed:hover .dabi{transform:rotate(-12deg)}
.dab.ex:hover{border-color:#8a93a3}.dab.ex:hover .dabi,.dab.re:hover .dabi{transform:rotate(-30deg)}
.dab.dl:hover{border-color:#ef6a4b;background:#fff3ef;color:#b01f04}.dab.dl:hover .dabi{transform:scale(1.1)}}
:root[data-theme="dark"] .dab{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
:root[data-theme="dark"] .dab.dl{color:#ff8a6b}
@media (hover:hover){:root[data-theme="dark"] .dab:hover{background:rgba(255,255,255,.12);color:#ffd66e}:root[data-theme="dark"] .dab.dl:hover{background:rgba(255,90,60,.14);color:#ffa58c}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dab{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
:root:not([data-theme="light"]) .dab.dl{color:#ff8a6b}}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dab:hover{background:rgba(255,255,255,.12);color:#ffd66e}:root:not([data-theme="light"]) .dab.dl:hover{background:rgba(255,90,60,.14);color:#ffa58c}}
/* Ordenador: la columna de información ocupa todo el alto de la foto y las acciones de la ficha bajan al fondo */
@media (min-width:761px){main.det .dgrid>.dinfo{align-self:stretch;display:flex;flex-direction:column}main.det .dinfo>.dacts{margin-top:auto;padding-top:20px}}
/* «Nuevos» y «Más votados» en Nunito, como los títulos de los chollos */
#tabs .tab{font-family:'Nunito',system-ui,sans-serif;font-weight:800;letter-spacing:.005em}
#tabs .tseg .tab{font-size:1rem}
@media (max-width:640px){#tabs .tseg .tab{font-size:.9rem}}
/* Cabecera (ordenador): interruptor claro/oscuro, píldora negra con sol y luna; la bola dorada se desliza al modo activo */
#theme{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:74px;height:36px;padding:0 10px;border-radius:999px;background:#15171c;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 16px rgba(60,30,0,.28),inset 0 1px 0 rgba(255,255,255,.1);color:rgba(255,255,255,.55);cursor:pointer;transition:box-shadow .2s,transform .15s}
#theme svg{position:relative;z-index:1;width:15px;height:15px;transition:color .3s,transform .4s}
#theme .thk{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ffd66e,#e49824);box-shadow:0 3px 8px rgba(227,154,38,.5),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .35s cubic-bezier(.4,1.4,.6,1),background .3s}
#theme .ths{color:#3a2900}
#theme:active{transform:scale(.96)}
@media (hover:hover){#theme:hover{box-shadow:0 0 0 3px rgba(255,214,110,.35),0 8px 20px rgba(60,30,0,.35)}#theme:hover .ths{transform:rotate(45deg)}#theme:hover .thm{color:#ffd66e}}
:root[data-theme="dark"] #theme{background:#0c0d10;border-color:rgba(240,194,92,.3)}
:root[data-theme="dark"] #theme .thk{transform:translateX(38px);background:linear-gradient(135deg,#e6e9f2,#9aa3c0)}
:root[data-theme="dark"] #theme .ths{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] #theme .thm{color:#15171c}
@media (hover:hover){:root[data-theme="dark"] #theme:hover .ths{color:#ffd66e;transform:rotate(45deg)}:root[data-theme="dark"] #theme:hover .thm{color:#15171c;transform:rotate(-15deg)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #theme{background:#0c0d10;border-color:rgba(240,194,92,.3)}
:root:not([data-theme="light"]) #theme .thk{transform:translateX(38px);background:linear-gradient(135deg,#e6e9f2,#9aa3c0)}
:root:not([data-theme="light"]) #theme .ths{color:rgba(255,255,255,.55)}
:root:not([data-theme="light"]) #theme .thm{color:#15171c}}
@media (prefers-color-scheme:dark) and (hover:hover){:root:not([data-theme="light"]) #theme:hover .ths{color:#ffd66e;transform:rotate(45deg)}:root:not([data-theme="light"]) #theme:hover .thm{color:#15171c;transform:rotate(-15deg)}}
/* Ventana de confirmación (cerrar sesión, darse de baja, caducar…): banda dorada con el zorro, título en Nunito y botones grandes */
#mbox:has(.cfm){padding:0;overflow:hidden;max-width:400px}
.cfm{position:relative;padding:0 22px 22px;text-align:center}
.cfh{display:flex;justify-content:center;margin:0 -22px;padding:22px 0 16px;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),linear-gradient(135deg,#ffd36b,#f2a93b)}
.cfm .cemo{width:96px;height:96px;margin:0;filter:drop-shadow(0 6px 10px rgba(120,70,0,.25))}
.cfi{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 8px 18px rgba(120,70,0,.2)}
.cfi svg{width:36px;height:36px}
.cfm.dz .cfh{background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),linear-gradient(135deg,#ff9a7a,#e2401f)}
.cfm h3{margin:16px 0 6px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:1.35rem;line-height:1.2}
.mbox .cfm .ctxt{margin:0 auto;max-width:320px;color:var(--mu);text-align:center;line-height:1.45}
.cfm .mact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.cfm .mact button{margin:0;padding:11px 12px;border-radius:14px;font-size:.98rem;font-weight:800}
.cfm .cfx{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.65)}
.cfm :focus:not(:focus-visible){outline:0}.cfm :focus-visible{outline:2px solid #e8a417;outline-offset:2px}
@media (max-width:380px){.cfm .mact{grid-template-columns:1fr}.cfm .mact [data-ok]{order:-1}}
:root[data-theme="dark"] .cfh{background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c98a1c,#8a5a10)}
:root[data-theme="dark"] .cfm.dz .cfh{background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.2),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c2442a,#7a1d0c)}
:root[data-theme="dark"] .cfm .cfx{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cfh{background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c98a1c,#8a5a10)}
:root:not([data-theme="light"]) .cfm.dz .cfh{background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.2),rgba(255,255,255,0) 60%),linear-gradient(135deg,#c2442a,#7a1d0c)}
:root:not([data-theme="light"]) .cfm .cfx{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.22)}}
@media (max-width:560px){#theme{display:none}}
/* Orden de los comentarios: píldoras con icono dentro de un carril, la elegida en dorado (como «Nuevos / Más votados») */
#comentarios>.top{flex-wrap:wrap;row-gap:10px}
#comentarios>.top>strong{font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:1.08rem}
.cso{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(15,23,42,.07);box-shadow:inset 0 1px 3px rgba(15,23,42,.08)}
.cso a{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.88rem;color:var(--mu);text-decoration:none;transition:color .15s,background .15s,box-shadow .2s}
.cso svg{width:15px;height:15px;flex:none}
.cso a.on{background:#fff;color:var(--tx);box-shadow:0 1px 4px rgba(40,25,0,.14)}.cso a.on svg{color:#e49824}
@media (hover:hover){.cso a:not(.on):hover{color:var(--tx);background:rgba(255,255,255,.6)}}
:root[data-theme="dark"] .cso{background:rgba(255,255,255,.07)}
@media (hover:hover){:root[data-theme="dark"] .cso a:not(.on):hover{background:rgba(255,255,255,.08);color:#ffd66e}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cso{background:rgba(255,255,255,.07)}}
@media (prefers-color-scheme:dark) and (hover:hover){:root:not([data-theme="light"]) .cso a:not(.on):hover{background:rgba(255,255,255,.08);color:#ffd66e}}
@media (max-width:400px){.cso a{padding:6px 10px;font-size:.82rem}.cso svg{width:13px;height:13px}}
/* Reacciones a un comentario: barra flotante con dos burbujas (Me gusta en azul, Útil en dorado); la elegida, marcada en su color */
.rpop[data-comment]{display:flex;gap:6px;padding:6px;min-width:0;border-radius:20px;box-shadow:0 12px 30px rgba(40,25,0,.22),0 2px 6px rgba(40,25,0,.1);overflow:visible;transform-origin:20px 0;animation:rpIn .22s cubic-bezier(.3,1.5,.6,1)}
.rpop[data-comment].hide{display:none}
@keyframes rpIn{from{opacity:0;transform:translateY(-6px) scale(.85)}}
.rpop[data-comment] button{flex-direction:column;justify-content:center;gap:4px;width:auto;min-width:84px;padding:8px 10px 7px;border-radius:15px;text-align:center;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.85rem;line-height:1.1;color:var(--tx);border:1px solid transparent;box-shadow:none;transition:background .15s,border-color .15s,transform .15s}
.rpi{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:transform .2s cubic-bezier(.3,1.6,.6,1)}
.rpi svg{width:20px;height:20px}
.rlike .rpi{background:linear-gradient(135deg,#7cb4ff,#2f6fe4)}
.ruse .rpi{background:linear-gradient(135deg,#ffd66e,#e49824)}
.rpop[data-comment] b{min-height:1em;font-size:.78rem;color:var(--mu)}
.rpop[data-comment] b:empty{display:none}
@media (hover:hover){.rpop[data-comment] button:hover{background:rgba(120,100,60,.08)}.rpop[data-comment] button:hover .rpi{transform:translateY(-3px) scale(1.12)}}
.rpop[data-comment] button:active .rpi{transform:scale(.9)}
.rpop[data-comment] .rlike.on{background:rgba(47,111,228,.12);border-color:rgba(47,111,228,.35);color:#1f55c0}
.rpop[data-comment] .ruse.on{background:rgba(228,152,36,.14);border-color:rgba(228,152,36,.45);color:#8a5600}
.rpop[data-comment] button.on b{color:inherit}
:root[data-theme="dark"] .rpop[data-comment]{box-shadow:0 12px 30px rgba(0,0,0,.55)}
:root[data-theme="dark"] .rpop[data-comment] .rlike.on{color:#9cc4ff}:root[data-theme="dark"] .rpop[data-comment] .ruse.on{color:#ffd66e}
@media (hover:hover){:root[data-theme="dark"] .rpop[data-comment] button:hover{background:rgba(255,255,255,.07)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rpop[data-comment]{box-shadow:0 12px 30px rgba(0,0,0,.55)}
:root:not([data-theme="light"]) .rpop[data-comment] .rlike.on{color:#9cc4ff}:root:not([data-theme="light"]) .rpop[data-comment] .ruse.on{color:#ffd66e}}
@media (prefers-color-scheme:dark) and (hover:hover){:root:not([data-theme="light"]) .rpop[data-comment] button:hover{background:rgba(255,255,255,.07)}}
/* Ventana «Reacciones» de un comentario: cabecera con icono, una tarjeta por reacción y las personas en filas */
#mbox:has(.rxp){max-width:420px;padding:20px}
.rxp .imhd p{margin:2px 0 0;color:var(--mu);font-size:.88rem}
.rxp .rsec{margin-top:12px;padding:10px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid var(--bd)}
.rsh{display:flex;align-items:center;gap:10px;padding:0 2px 8px}
.rsh .rpi{width:30px;height:30px}.rsh .rpi svg{width:16px;height:16px}
.rsh b{flex:1;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:1rem}
.rsn{min-width:26px;padding:2px 9px;border-radius:999px;font-weight:800;font-size:.82rem;text-align:center}
.rlike .rsn{background:rgba(47,111,228,.12);color:#1f55c0}
.ruse .rsn{background:rgba(228,152,36,.16);color:#8a5600}
.rul{display:grid;gap:2px;max-height:min(46vh,320px);overflow:auto}
.rxp .rus{margin:0;padding:6px 8px;border-radius:12px;font-weight:700}
.rxp .rus span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.rxp .rus:hover{background:rgba(120,100,60,.08)}}
:root[data-theme="dark"] .rxp .rsec{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .rlike .rsn{color:#9cc4ff}:root[data-theme="dark"] .ruse .rsn{color:#ffd66e}
@media (hover:hover){:root[data-theme="dark"] .rxp .rus:hover{background:rgba(255,255,255,.06)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rxp .rsec{background:rgba(255,255,255,.04)}
:root:not([data-theme="light"]) .rlike .rsn{color:#9cc4ff}:root:not([data-theme="light"]) .ruse .rsn{color:#ffd66e}}
@media (prefers-color-scheme:dark) and (hover:hover){:root:not([data-theme="light"]) .rxp .rus:hover{background:rgba(255,255,255,.06)}}
.rxp .rus .av{flex:none;width:32px;height:32px;margin:0}
:root[data-theme="dark"] .cso a.on{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}:root[data-theme="dark"] .cso a.on svg{color:#ffd66e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cso a.on{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}:root:not([data-theme="light"]) .cso a.on svg{color:#ffd66e}}
/* Barra fija de la ficha al bajar: tarjeta de cristal flotante con foto, título en Nunito, precio y «Ir al chollo» en píldora */
#dbar{top:8px;padding:6px 6px 6px 8px;gap:10px;border:1px solid var(--glass-bd);border-radius:20px;background:var(--glass-strong);box-shadow:0 10px 30px rgba(60,40,0,.18),0 2px 6px rgba(60,40,0,.08);transform:translate(-50%,calc(-100% - 12px))}
#dbar.on{transform:translate(-50%,0)}
#dbar .vote{border-radius:999px}
.dbi{flex:none;width:40px;height:40px;border-radius:12px;object-fit:contain;background:var(--mx-img,#fff);border:1px solid var(--bd)}
#dbar .dbt{display:flex;flex-direction:column;gap:1px;font-size:inherit;font-weight:inherit;white-space:normal}
#dbar .dbt b{font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.98rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbp{display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden;font-size:.85rem}
.dbp .price{font-weight:900;font-size:1rem;background:linear-gradient(90deg,#e11d48,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
.dbp .old{font-size:.8rem}.dbp .disc{padding:0 7px;border-radius:999px;font-size:.75rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#16a34a,#22c55e)}
.dbp .ship{display:none}
#dbar a.go{padding:9px 16px;border-radius:999px;font-size:.92rem}
@media (max-width:560px){#dbar{top:6px;gap:8px;border-radius:18px}.dbi{display:none}#dbar .dbt b{font-size:.9rem}#dbar a.go{padding:8px 12px;font-size:.86rem}}
:root[data-theme="dark"] #dbar{box-shadow:0 10px 30px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #dbar{box-shadow:0 10px 30px rgba(0,0,0,.5)}}
@media (max-width:560px){.dbp :is(.old,.disc,.pst){display:none}.dbp{overflow:visible}}
@media (max-width:560px){#dbar{gap:6px;padding:5px 5px 5px 6px}.dbp .price{font-size:.92rem}#dbar a.go{padding:8px 11px;font-size:.84rem}}
/* Barra fija de la ficha: pegada arriba y sin esquinas redondeadas */
#dbar,#dbar.on{top:0;border-radius:0;border-top:0}
#dbar{transform:translate(-50%,-110%)}#dbar.on{transform:translate(-50%,0)}
@media (max-width:560px){#dbar{top:0;border-radius:0}}
/* Chollo caducado: la barra fija también en gris (foto, precio y descuento apagados, título atenuado) */
body:has(main article.card.exp) #dbar :is(.dbi,.dbp){filter:grayscale(1);opacity:.6}
body:has(main article.card.exp) #dbar .dbt b{color:var(--mu)}
body:has(main article.card.exp) #dbar .dbp .price{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--mu)}
#dbar,#dbar.on{border-radius:0 0 16px 16px}@media (max-width:560px){#dbar{border-radius:0 0 14px 14px}}

/* Redes de los usuarios («Sigue a X en:»): logotipos oficiales sobre el círculo del color de cada red */
.chi{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none}
.chi svg{display:block;width:100%;height:100%}
.ch-telegram,.ch-facebook{background:#fff}
.ch-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ch-youtube{background:#f00}
.ch-tiktok,.ch-x{background:#000}
.ch-web{background:#5b6b82}
:root[data-theme="dark"] :is(.ch-tiktok,.ch-x){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.ch-tiktok,.ch-x){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}}
.chs{display:flex;flex-direction:column;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd)}
.chl{font-size:.85rem;font-weight:600;color:var(--mu)}
.chr{display:flex;flex-wrap:wrap;gap:8px}
.chr a{display:inline-flex;border-radius:50%;transition:transform .15s}
@media (hover:hover){.chr a:hover{transform:translateY(-2px)}}
.chr a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.uprof .chs{align-items:center;gap:12px;margin-top:16px;padding-top:16px}
.uprof .chl{font-family:"Nunito",system-ui,sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.01em;color:var(--tx)}
.uprof .chr{justify-content:center;gap:12px}
.uprof .chr .chi{width:40px;height:40px}
@media (hover:hover){.uprof .chr a:hover{transform:translateY(-3px) scale(1.06)}}
@media (max-width:420px){.uprof .chr{gap:9px}.uprof .chr .chi{width:37px;height:37px}}
/* «Tus redes» en el perfil */
.chrow{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--bd)}
.chrow:first-of-type{border-top:0}
.chrow>.chi{width:34px;height:34px;margin-top:24px}
.chf{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.chn{font-size:.92rem;font-weight:700}
.sets .chf input{margin:0}
.chrow.bad input{border-color:#e0645c}
.cherr{font-size:.85rem;color:#c0392b}
:root[data-theme="dark"] .cherr{color:#ff8a80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cherr{color:#ff8a80}}
.chv{font-size:.82rem;color:var(--mu)}
.chset form>button{margin-top:12px}
.chnote h3{margin:0 0 8px}
.chnote ul{margin:0;padding-left:20px;font-size:.92rem;line-height:1.5;color:var(--mu)}
.chnote li+li{margin-top:6px}
.chsum{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border:1px solid var(--bd);border-radius:14px;color:inherit;text-decoration:none}
.chsi{display:flex;flex:none}
.chsi .chi{width:24px;height:24px;margin-left:-6px;box-shadow:0 0 0 2px var(--card)}
.chsi .chi:first-child{margin-left:0}

/* Ficha emergente del usuario: cruz de cerrar arriba a la derecha, sobre la portada */
.mbox .uprof{position:relative}
.uprof .ufx{position:absolute;top:12px;right:12px;z-index:1;background:rgba(255,255,255,.65)}
:root[data-theme="dark"] .uprof .ufx{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .uprof .ufx{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.22)}}
.chpend{font-size:.85rem;font-weight:600;color:#a86a00}
:root[data-theme="dark"] .chpend{color:#ffc95c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chpend{color:#ffc95c}}

/* ---------- Seguir a usuarios: botón «Seguir» / «Siguiendo» y lista de «Seguidores» del perfil ---------- */
button.ufol{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 22px;border-radius:999px;font-weight:800;font-size:.95rem;background:#14213d;color:#fff;border:1px solid #14213d;box-shadow:0 6px 16px rgba(20,33,61,.25);transition:transform .15s,box-shadow .15s,background .15s,color .15s}
button.ufol svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
button.ufol .ufk,button.ufol.on .ufp{display:none}
button.ufol.on .ufk{display:block}
button.ufol.on{background:transparent;color:var(--tx);border-color:var(--bd);box-shadow:none}
@media (hover:hover){button.ufol:hover{transform:translateY(-1px);color:#ffd66e;box-shadow:0 0 0 3px rgba(255,214,110,.3),0 8px 20px rgba(20,33,61,.3)}
button.ufol.on:hover{color:#c0392b;border-color:#e0645c;box-shadow:none}}
button.ufol:disabled{opacity:.6}
.upage .uacts .ufol{width:auto;min-width:160px}
:root[data-theme="dark"] button.ufol:not(.on){border-color:rgba(240,194,92,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button.ufol:not(.on){border-color:rgba(240,194,92,.35)}}
.flist{padding:6px 18px}
.frow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--bd)}
.frow:first-child{border-top:0}
.fwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fwho a{font-weight:800;color:var(--tx);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwho a:hover{color:#b87a00}
.frow button.ufol{flex:none;padding:7px 14px;font-size:.85rem;width:auto}
.tab .tcnt{display:inline-block;min-width:20px;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:.78rem;background:rgba(120,100,60,.12)}
@media (max-width:420px){.frow button.ufol span{display:none}.frow button.ufol{padding:8px}}
.fpriv{margin:10px 4px 0;font-size:.85rem}
.ufrow{display:flex;justify-content:center;margin:14px 0 0}
.ufrow:empty{display:none}
.ufrow button.ufol{width:auto;min-width:160px}
/* Solo el icono: el texto queda para lectores de pantalla y el aviso al pasar el ratón (title) */
button.ufol,.ufrow button.ufol,.upage .uacts .ufol,.frow button.ufol{width:46px;min-width:0;height:46px;padding:0;border-radius:50%;flex:none}
button.ufol svg{width:21px;height:21px}
button.ufol span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.frow button.ufol{width:40px;height:40px}
.frow button.ufol svg{width:19px;height:19px}

/* ---------- Buzón: mensajes directos y avisos ---------- */
.ufrow{gap:10px}
a.ufol.udm{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;flex:none;color:var(--tx);background:var(--card);border:1px solid var(--bd);text-decoration:none;transition:transform .15s,color .15s,border-color .15s}
a.ufol.udm svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){a.ufol.udm:hover{transform:translateY(-1px);color:#b87a00;border-color:#e8a417}}
#myav,#hbar .hav{position:relative}
.avdot{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:#e23b2e;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.nbadge{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:999px;background:#e23b2e;color:#fff;font-size:.75rem;font-weight:800;line-height:18px;text-align:center}
@media (max-width:560px){.pside>a.pitem{position:relative}.pside>a.pitem .nbadge{position:absolute;top:6px;right:8px;margin:0}}
.tab .tcnt.nb{background:#e23b2e;color:#fff}
.dmrow,.ntc{text-decoration:none;color:var(--tx)}
.dmrow .fwho b{font-weight:800}
.dmprev{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmrow.unread .dmprev{color:var(--tx);font-weight:700}
.dmwhen{flex:none;display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mu)}
.dmdot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:#e23b2e}
@media (hover:hover){.dmrow:hover .fwho b,.ntc:hover .ntx b{color:#b87a00}}
.ntc.unread{background:rgba(242,163,27,.08);margin:0 -18px;padding-left:18px;padding-right:18px}
.ntx{line-height:1.4}
.ntic{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#9aa4b2,#5b6472)}
.ntic svg{width:20px;height:20px}
.nt-comentario{background:linear-gradient(135deg,#6aa8ff,#3d6fe0)}
.nt-respuesta{background:linear-gradient(135deg,#7bd88f,#2f9e52)}
.nt-mencion{background:linear-gradient(135deg,#c59bff,#7b4ae0)}
.nt-caducado{background:linear-gradient(135deg,#ffb37a,#e0662b)}
.nt-reactivado{background:linear-gradient(135deg,#f7c246,#e49824)}
.dmthread{padding:0;overflow:hidden}
.dmh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bd)}
.dmback{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--tx);background:rgba(120,100,60,.1)}
.dmback svg{width:18px;height:18px}
.dmname{font-weight:800;color:var(--tx);text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmclr .linkbtn{font-size:.85rem;color:var(--mu)}
.dmlist{display:flex;flex-direction:column;gap:10px;padding:16px;max-height:60vh;overflow-y:auto}
.dmm{display:flex;flex-direction:column;align-items:flex-start;max-width:80%}
.dmm.me{align-self:flex-end;align-items:flex-end}
.dmb{padding:9px 13px;border-radius:16px 16px 16px 4px;background:rgba(120,100,60,.09);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.dmm.me .dmb{border-radius:16px 16px 4px 16px;background:#14213d;color:#fff}
.dmt{margin-top:3px;font-size:.72rem;color:var(--mu)}
.dmempty{margin:20px auto;text-align:center}
.dmform{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--bd)}
.dmform textarea{flex:1;min-height:44px;max-height:160px;resize:vertical;margin:0}
.dmform button{flex:none}
.dmno{margin:0;padding:14px 16px;border-top:1px solid var(--bd);color:var(--mu);text-align:center}
.dmopt{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer}
.mt8{margin-top:8px}
/* Modo oscuro: los tuyos en ámbar con letra oscura; los recibidos, en un marrón claro con borde */
:root[data-theme="dark"] .dmm.me .dmb{background:linear-gradient(135deg,#f5bd3c,#e39a26);color:#1d1405;border-color:transparent}
:root[data-theme="dark"] .dmb{background:#3d3329;color:#f5eee4;border:1px solid rgba(255,255,255,.1)}
:root[data-theme="dark"] .dmm.me .dmb a{color:#1d1405}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmm.me .dmb{background:linear-gradient(135deg,#f5bd3c,#e39a26);color:#1d1405;border-color:transparent}:root:not([data-theme="light"]) .dmb{background:#3d3329;color:#f5eee4;border:1px solid rgba(255,255,255,.1)}:root:not([data-theme="light"]) .dmm.me .dmb a{color:#1d1405}}
.sets .dmopt input[type=radio]{flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;accent-color:#e49824}
/* Sobre apagado (no te deja escribirle): al pasar el ratón, prohibido en rojo y el motivo en un globo */
button.ufol.udm.off{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;color:var(--mu);background:var(--card);border:1px dashed var(--bd);box-shadow:none;cursor:not-allowed;opacity:.75}
button.ufol.udm.off svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
button.ufol.udm.off .udx{position:absolute;inset:0;margin:auto;width:34px;height:34px;stroke:#e23b2e;stroke-width:2.4;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.udtip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);width:max-content;max-width:240px;padding:8px 12px;border-radius:10px;background:#14213d;color:#fff;font-size:.82rem;font-weight:600;line-height:1.35;text-align:center;white-space:normal;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.udtip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#14213d}
button.ufol.udm.off span.udtip{width:max-content;height:auto;overflow:visible;clip:auto;white-space:normal}
@media (hover:hover){button.ufol.udm.off:hover{opacity:1;transform:none;border-color:#e0645c;color:var(--mu);box-shadow:none}
button.ufol.udm.off:hover .udx{opacity:1;transform:scale(1)}
button.ufol.udm.off:hover .udtip{opacity:1;transform:translateX(-50%) translateY(0)}}
button.ufol.udm.off:focus-visible .udx{opacity:1;transform:scale(1)}
button.ufol.udm.off:focus-visible .udtip{opacity:1;transform:translateX(-50%) translateY(0)}
.dmprev img.emo{width:1.35em;height:1.35em;vertical-align:-.3em;margin:0 1px;cursor:default}
.dmb img.emo{width:66px;height:66px;vertical-align:middle;margin:0 1px;cursor:pointer}
.dmform .emb{flex:none;align-self:center}
.dmm.solo .dmb,.dmm.me.solo .dmb{padding:0;background:none!important;border-radius:0}
.dmm.solo .dmb img.emo{width:72px;height:72px;vertical-align:middle}
.blist{padding:0}.blist .frow{padding:10px 0}.dmrep{font-size:inherit;color:var(--mu);padding:0}.dmrep:hover{color:#c0392b}.dmname.gone{color:var(--mu)}
/* Fecha de nacimiento: solo cuando se elige «de cualquier usuario» */
.dmbirth{display:none;margin:6px 0 4px 26px;max-width:320px}
.dmset:has(input[value=todos]:checked) .dmbirth{display:block}
.dmbirth label{display:block;font-weight:700;margin-bottom:4px}
.dmbirth input{margin:0 0 6px}
.dmbirth .meta{margin:0;font-size:.82rem}
.dmopt.dis{opacity:.55;cursor:not-allowed}
.dmage{margin:6px 0 0;font-size:.82rem}
/* Globo del sobre apagado al tocarlo en el móvil (mismo globo que el emoji ampliado) */
#ezm .ezt{margin:0;max-width:230px;padding:2px 6px;font-size:.88rem;font-weight:600;line-height:1.35;text-align:center;color:var(--tx)}

/* ---- Comentarios en burbujas: avatar a la izquierda, burbuja con nombre, texto y reacciones;
   las respuestas cuelgan del avatar del comentario con un conector curvo ---- */
:root{--cb:#f4efe5;--cb-mine:#fcefd0;--cb-line:#e2d9c6;--cb-bd:transparent;--cb-bd-mine:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cb:#34322d;--cb-mine:#3f3424;--cb-line:#4a463d;--cb-bd:rgba(255,255,255,.07);--cb-bd-mine:rgba(240,194,92,.28)}}
:root[data-theme="dark"]{--cb:#34322d;--cb-mine:#3f3424;--cb-line:#4a463d;--cb-bd:rgba(255,255,255,.07);--cb-bd-mine:rgba(240,194,92,.28)}
#comentarios .cm{--cw:40px;--rw:32px;--cg:10px;display:grid;grid-template-columns:var(--cw) minmax(0,1fr);column-gap:var(--cg);border:0;margin:0;padding:12px 0 0;position:relative}
#comentarios .cm>*{grid-column:2;min-width:0}
/* El avatar ocupa tantas filas como la burbuja y lo que va debajo (acciones, edición, responder); las respuestas, después */
#comentarios .cm>.cav{grid-column:1;grid-row:1/span 2;align-self:stretch;position:relative}
#comentarios .cm:has(>.cedit:not(.hide))>.cav,#comentarios .cm:has(>.creply:not(.hide))>.cav{grid-row:1/span 3}
#comentarios .cm:has(>.cedit:not(.hide)):has(>.creply:not(.hide))>.cav{grid-row:1/span 4}
#comentarios .cm:not(:has(>.ra))>.cav{grid-row:1/span 1}
#comentarios .cm>.cedit{margin-top:6px}
.cav .av{width:var(--cw);height:var(--cw);margin:0;display:flex}
.cav .avx{background:var(--cb);border-color:transparent}
.cbub{position:relative;justify-self:start;max-width:100%;background:var(--cb);box-shadow:inset 0 0 0 1px var(--cb-bd);border-radius:4px 18px 18px 18px;padding:8px 14px 10px}
.cm.mine>.cbub{background:var(--cb-mine);box-shadow:inset 0 0 0 1px var(--cb-bd-mine)}
.cbub:has(>.cmore){padding-right:38px}
.cbub>.cmore{top:4px;right:4px}
.chd{display:block;margin-bottom:2px;font-size:.84rem}
.chd>.u,.chd>.gone{font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.95rem;color:var(--tx);text-decoration:none}
.chd>.u:hover{text-decoration:underline}
.cop{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--ac);color:var(--onac);font-size:.68rem;font-weight:800;line-height:1.65;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.chd .rto{font-size:inherit;color:var(--mu)}
.chd .rto .u{font-weight:700}
.cbub>.rcnt{position:absolute;right:12px;bottom:-14px;margin:0;padding:2px 8px;background:var(--card);border:1px solid var(--bd);border-radius:999px;box-shadow:0 2px 6px rgba(40,25,0,.1);z-index:2}
#comentarios .cm>.ra{margin-top:3px;padding-left:2px}
.cbub:has(>.rcnt:not(.hide))+.cedit,.cbub:has(>.rcnt:not(.hide))~.ra{margin-top:8px}
/* Respuestas: avatar más pequeño y conector desde el avatar del comentario */
#comentarios .cm.rp{grid-template-columns:var(--rw) minmax(0,1fr);padding:14px 0 0}
.cm.rp>.cav .av{width:var(--rw);height:var(--rw)}
#comentarios .cm:has(>.cm.rp)>.cav::after{content:'';position:absolute;left:calc(var(--cw) / 2 - 1px);top:calc(var(--cw) + 6px);bottom:0;width:2px;border-radius:2px;background:var(--cb-line)}
#comentarios .cm.rp::before{content:'';box-sizing:border-box;position:absolute;left:calc(-1 * (var(--cw) / 2 + var(--cg) + 1px));top:0;width:calc(var(--cw) / 2 + var(--cg) - 1px);height:calc(14px + var(--rw) / 2 + 1px);border:2px solid var(--cb-line);border-top:0;border-right:0;border-bottom-left-radius:14px}
#comentarios .cm.rp:has(~.cm.rp)::after{content:'';position:absolute;left:calc(-1 * (var(--cw) / 2 + var(--cg) + 1px));top:0;bottom:0;width:2px;background:var(--cb-line)}
#comentarios .cm:not(.rp)+.cm:not(.rp){margin-top:10px}
@media (max-width:560px){#comentarios .cm{--cw:34px;--rw:28px;--cg:8px}.cbub{padding:7px 12px 9px}}

/* ---- Huellas de zorro al votar (app.js, burst): pisadas que aparecen una tras otra y se desvanecen ---- */
.pawf{position:fixed;z-index:99999;pointer-events:none;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);opacity:0;transform:rotate(var(--r)) scale(.3);animation:pawstep 1.15s ease-out forwards;will-change:transform,opacity}
.pawf svg{display:block;width:100%;height:100%;fill:currentColor}
.pawf.up{color:#f07f12;filter:drop-shadow(0 1px 2px rgba(150,70,0,.35))}
.pawf.down{color:#3d8fe0;filter:drop-shadow(0 1px 2px rgba(20,80,160,.35))}
@keyframes pawstep{0%{opacity:0;transform:rotate(var(--r)) scale(.3)}16%{opacity:1;transform:rotate(var(--r)) scale(1.18)}28%{transform:rotate(var(--r)) scale(1)}65%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) scale(.95)}}
.sparkf{position:fixed;z-index:99999;pointer-events:none;color:#ffc531;text-shadow:0 0 6px rgba(255,190,40,.8);line-height:1;margin:-.5em 0 0 -.5em;opacity:0;animation:sparkout .9s ease-out forwards}
@keyframes sparkout{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(90deg)}}

/* ---- Al votar (app.js: foxJump, rollTemp): el zorro del botón salta o se encoge y la puntuación gira como un marcador ---- */
.vote .fx{transform-origin:50% 90%}
.vote .fx.foxup{animation:foxup .8s cubic-bezier(.3,1.6,.5,1)}
.vote .fx.foxdn{animation:foxdn .75s ease-in-out}
@keyframes foxup{0%{transform:none}25%{transform:translateY(-11px) rotate(-10deg) scale(1.18)}45%{transform:translateY(0) scale(1.12,.86)}62%{transform:translateY(-4px) rotate(6deg)}80%{transform:translateY(0) scale(.97,1.03)}100%{transform:none}}
@keyframes foxdn{0%{transform:none}18%{transform:translateY(3px) scale(1.06,.82)}32%{transform:translateY(3px) scale(1.04,.86) rotate(-7deg)}46%{transform:translateY(3px) scale(1.04,.86) rotate(6deg)}60%{transform:translateY(2px) scale(1.03,.9) rotate(-5deg)}74%{transform:translateY(1px) rotate(3deg)}100%{transform:none}}
.heartf{position:fixed;z-index:99999;pointer-events:none;color:#ff5a3c;text-shadow:0 1px 3px rgba(180,40,0,.35);line-height:1;margin:-.5em 0 0 -.5em;opacity:0;animation:heartup 1.1s ease-out forwards}
@keyframes heartup{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1;transform:translate(calc(var(--dx) * .3),-10px) scale(1.15)}100%{opacity:0;transform:translate(var(--dx),-46px) scale(.9)}}
.vote .temp{display:inline-block}
.troll{display:inline-grid;overflow:hidden;vertical-align:top}
.troll>span{grid-area:1/1}
.troll.up>span:first-child{animation:rollout-up .4s ease-in forwards}
.troll.up>span:last-child{animation:rollin-up .45s cubic-bezier(.2,1.4,.5,1) .12s both}
.troll.dn>span:first-child{animation:rollout-dn .4s ease-in forwards}
.troll.dn>span:last-child{animation:rollin-dn .45s cubic-bezier(.2,1.4,.5,1) .12s both}
@keyframes rollout-up{to{transform:translateY(-110%);opacity:0}}
@keyframes rollin-up{from{transform:translateY(110%);opacity:0}}
@keyframes rollout-dn{to{transform:translateY(110%);opacity:0}}
@keyframes rollin-dn{from{transform:translateY(-110%);opacity:0}}
.vote .temp.tglow{animation:tglow .95s ease-out}
.vote .temp.tshake{animation:tshake .7s ease-in-out}
@keyframes tglow{0%{transform:scale(1)}35%{transform:scale(1.32);text-shadow:0 0 10px rgba(255,140,0,.85),0 0 2px rgba(255,140,0,.6)}100%{transform:scale(1);text-shadow:none}}
@keyframes tshake{0%,100%{transform:none}15%,45%,75%{transform:translateX(-3px)}30%,60%,90%{transform:translateX(3px)}20%,60%{text-shadow:0 0 9px rgba(40,130,230,.8)}}

/* ---- Botón «Menú» (abre el menú lateral): pastilla clara con el icono en un círculo ámbar, a juego con el buscador y «Colgar chollo» ---- */
#burger{background:rgba(255,255,255,.92);color:#14213d;border:1px solid rgba(255,255,255,.95);padding:4px 15px 4px 4px!important;gap:8px;box-shadow:0 4px 14px rgba(120,70,0,.2)}
#burger .bic{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffd66e,#f09a1a);color:#14213d;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
#burger .bic svg{width:18px;height:18px}
#burger>span:last-child{font-family:'Nunito',system-ui,sans-serif;font-weight:800}
@media (hover:hover){#burger:hover{filter:none;background:#fff;box-shadow:0 0 0 3px rgba(255,214,110,.45),0 6px 16px rgba(120,70,0,.25)}#burger:hover .bic svg{transform:rotate(-14deg) scale(1.12)}}
#burger .bic svg{transition:transform .25s}
:root[data-theme="dark"] #burger{background:rgba(30,30,28,.88);color:#f1efe9;border-color:rgba(255,255,255,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #burger{background:rgba(30,30,28,.88);color:#f1efe9;border-color:rgba(255,255,255,.12)}}
@media (hover:hover){:root[data-theme="dark"] #burger:hover{background:rgba(40,40,37,.95)}}

/* ---- Zorro del buscador: cada 15 s mira a los lados; al pulsar el buscador da un saltito con la lupa
   y le brilla el cristal; al escribir y al borrar se mueve (app.js). Los giros van en «rotate» para no pisar el transform ---- */
.sw .swi{animation:foxlook 15s ease-in-out 3s infinite}
@keyframes foxlook{0%,86%,100%{rotate:0deg}88.5%{rotate:-9deg}91.5%{rotate:8deg}94.5%{rotate:-4deg}97.5%{rotate:1deg}}
.sw:focus-within .swi{animation:none;transform:translateY(-56%) rotate(-12deg) scale(1.16);transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
.sw .swg{position:absolute;z-index:3;left:30px;top:calc(50% - 17px);font-size:12px;line-height:1;color:#fff;text-shadow:0 0 6px #ffd66e,0 0 2px #f0a020;opacity:0;pointer-events:none}
header>.sw .swg{left:27px;top:calc(50% - 16px)}
.sw:focus-within .swg{animation:swglint .9s ease-out .2s}
@keyframes swglint{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.25) rotate(90deg)}100%{opacity:0;transform:scale(.5) rotate(180deg)}}

/* ---- Logo: al pasar el ratón, el zorro se ríe (ojos cerrados, boca abierta, lágrimas de risa y «JA») y se mueve con la risa ---- */
.logoimg .lfx,.logoimg .lja text{opacity:0}
.logoimg .lfox{transform-box:fill-box;transform-origin:50% 100%}
.logoimg .lja text{font:900 46px 'Nunito',system-ui,sans-serif;fill:#ffd23f;stroke:#14213d;stroke-width:7px;paint-order:stroke;transform-box:fill-box;transform-origin:center}
@media (hover:hover){
.logoimg:hover .lfx{opacity:1}
.logoimg:hover .lfox{animation:foxlaugh .46s ease-in-out infinite}
.logoimg:hover .ltear{animation:ltear .9s ease-in infinite}
.logoimg:hover .lja text{animation:lja 1.2s ease-out infinite}
.logoimg:hover .lja text:nth-child(2){animation-delay:.4s}
.logoimg:hover .lja text:nth-child(3){animation-delay:.8s}
}
@keyframes foxlaugh{0%,100%{transform:none}25%{transform:translateY(-7px) rotate(-1.6deg)}50%{transform:translateY(0)}75%{transform:translateY(-5px) rotate(1.6deg)}}
@keyframes ltear{0%{transform:translateY(0);opacity:1}80%{opacity:.9}100%{transform:translateY(16px);opacity:0}}
@keyframes lja{0%{opacity:0;transform:scale(.4) translateY(10px)}25%{opacity:1;transform:scale(1.12)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-16px)}}

/* ---- Botón de perfil (arriba a la derecha y en la barra fija): al pasar el ratón se hace grande ---- */
#myav .av,#hbar .hav .av{transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
#myav .av{transform-origin:100% 0}
@media (hover:hover){#myav:hover .av,#hbar .hav:hover .av{transform:scale(1.35);box-shadow:0 0 0 3px rgba(255,214,110,.6),0 6px 16px rgba(120,70,0,.3)}}

/* ---- Páginas vacías con su zorro (ui.empty): busca con la lupa sin encontrar nada, duerme, saluda… ---- */
.emw{position:relative;display:inline-block;line-height:0}
.emp-search .emz{width:90px;animation:emscan 3.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes emscan{0%,100%{transform:none}18%{transform:translateX(-5px) rotate(-12deg)}40%{transform:translateX(5px) rotate(11deg)}60%{transform:rotate(-3deg)}78%,90%{transform:translateY(4px) rotate(4deg) scale(.97)}}
.emq{position:absolute;top:-6px;right:-16px;font:900 24px/1 'Nunito',system-ui,sans-serif;font-style:normal;color:#f09a1a;text-shadow:0 2px 0 rgba(20,33,61,.25);opacity:0;animation:emq 3.6s ease-out infinite}
.emq.q2{right:auto;left:-14px;top:12px;font-size:18px;animation-delay:1.8s}
@keyframes emq{0%,8%{opacity:0;transform:translateY(8px) scale(.4)}22%{opacity:1;transform:translateY(0) scale(1.15)}55%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(-12px)}}
.emdrop{position:absolute;left:16px;top:30px;width:8px;height:11px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#5ab4f0;box-shadow:inset -1px -2px 0 rgba(0,60,140,.25);opacity:0;animation:emdrop 3.6s ease-in infinite 1.2s}
@keyframes emdrop{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1;transform:scale(1)}55%{opacity:1}75%,100%{opacity:0;transform:translateY(16px)}}
.emp-sleep .emz,.emp-nap .emz{animation:embreathe 3.8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes embreathe{0%,100%{transform:none}50%{transform:translateY(1px) scale(1.04,.96)}}
.emzz{position:absolute;right:-4px;top:4px;font:900 17px/1 'Nunito',system-ui,sans-serif;font-style:normal;color:#7d8fb3;opacity:0;animation:emzz 3.6s ease-out infinite}
.emzz:nth-of-type(2){animation-delay:1.2s;font-size:20px}
.emzz:nth-of-type(3){animation-delay:2.4s;font-size:24px}
@keyframes emzz{0%{opacity:0;transform:translate(0,0) scale(.5) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translate(22px,-38px) scale(1.2) rotate(12deg)}}
.emp-love .emz{animation:emlove 1.6s ease-in-out infinite}
@keyframes emlove{0%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(1)}45%{transform:scale(1.06)}}
.emp-hello .emz{animation:emhello 2.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes emhello{0%,60%,100%{transform:none}68%{transform:rotate(-8deg)}76%{transform:rotate(7deg)}84%{transform:rotate(-5deg)}92%{transform:rotate(3deg)}}
.emp-sad .emz{animation:emsad 4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes emsad{0%,100%{transform:none}50%{transform:translateY(3px) rotate(-3deg) scale(.98)}}
/* 404: el zorro perdido mira a los lados y sus huellas se alejan */
.card.auth.lost .authfox{animation:emlost 3s ease-in-out infinite}
@keyframes emlost{0%,100%{transform:none}25%{transform:rotate(-10deg) translateX(-4px)}50%{transform:rotate(0)}75%{transform:rotate(10deg) translateX(4px)}}
.lpaws{display:flex;justify-content:center;gap:11px;margin:6px 0 8px}
.lpaws i{display:block;width:16px;height:16px;color:#e2a86a;opacity:0;animation:lpaw 3s ease-in-out infinite}
.lpaws i:nth-child(odd){transform:translateY(-4px) rotate(90deg)}
.lpaws i:nth-child(even){transform:translateY(4px) rotate(90deg)}
.lpaws i svg{width:100%;height:100%;fill:currentColor}
.lpaws i:nth-child(2){animation-delay:.25s}.lpaws i:nth-child(3){animation-delay:.5s}.lpaws i:nth-child(4){animation-delay:.75s}.lpaws i:nth-child(5){animation-delay:1s}.lpaws i:nth-child(6){animation-delay:1.25s}
@keyframes lpaw{0%,100%{opacity:0}15%,55%{opacity:.9}80%{opacity:0}}

/* ---- Guardar un chollo (app.js, saveFx): huella que vuela hasta el avatar ---- */
.pawfly{position:fixed;z-index:99999;pointer-events:none;width:32px;height:32px;color:#f07f12;filter:drop-shadow(0 2px 3px rgba(150,70,0,.4))}
.pawfly svg{display:block;width:100%;height:100%;fill:currentColor}

/* ---- Enviar comentario (app.js, eatFx): un zorro asoma por «Enviar» y se come el comentario ---- */
.eatfox{position:fixed;z-index:99999;width:48px;height:48px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(120,60,0,.3))}
.eatbub{position:fixed;z-index:99998;max-width:220px;padding:4px 11px;border-radius:12px 12px 12px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.85rem;line-height:1.4;background:var(--card);color:var(--tx);border:1px solid var(--bd);box-shadow:0 4px 12px rgba(40,25,0,.15);pointer-events:none;transform-origin:50% 50%}
.eatnam{position:fixed;z-index:99999;pointer-events:none;font:900 16px/1 'Nunito',system-ui,sans-serif;color:#f07f12;text-shadow:0 0 3px #fff,0 0 6px #fff;animation:eatnam .9s ease-out forwards}
@keyframes eatnam{0%{opacity:0;transform:translateY(6px) scale(.5) rotate(-8deg)}25%{opacity:1;transform:scale(1.2) rotate(6deg)}70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}

/* ---- @menciones en comentarios y descripciones: enlace al perfil ---- */
a.umen{color:var(--act);font-weight:700;text-decoration:none;background:rgba(224,165,38,.12);border-radius:6px;padding:0 3px}
a.umen:hover{text-decoration:underline;background:rgba(224,165,38,.22)}

/* Ajustes › Mensajes directos: casilla del aviso por correo, separada de las opciones de quién puede escribirte */
.dmset .dmmail{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd);align-items:flex-start}
.dmset .dmmail input{width:auto;flex:none;padding:0;margin:5px 0 0;box-shadow:none;accent-color:#e0a526}
.dmset .dmmail small{display:block;margin-top:2px}

/* ---- Alertas por palabra: icono turquesa (perfil, menú y aviso del buzón), formulario, lista y botón en la búsqueda ---- */
.ial,.nt-alerta{background:linear-gradient(135deg,#7fe3d6,#0f9f8f)}
.alform{display:flex;gap:8px;margin:4px 0 6px}
.alform input{flex:1;margin:0;min-width:0}
.alform button{flex:none}
.allist{margin-top:12px}
.allist .frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.alkw{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-weight:800;font-family:'Nunito',system-ui,sans-serif;background:rgba(15,159,143,.12);color:#0b6f64}
.alhits{flex:1;min-width:120px}
.alcnt{margin:10px 0 0;font-size:.82rem}
:root[data-theme="dark"] .alkw{background:rgba(127,227,214,.14);color:#8ff0e3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .alkw{background:rgba(127,227,214,.14);color:#8ff0e3}}
#qtop:has(.qalert){display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qalert{margin:0}
#qtop .qalert button,#qtop a.qalert{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 10px;border-radius:999px;font-size:.88rem;font-weight:800;font-family:'Nunito',system-ui,sans-serif;text-decoration:none;background:linear-gradient(135deg,#7fe3d6,#0f9f8f);color:#fff;border:0;box-shadow:0 4px 12px rgba(15,159,143,.3)}
.qalert svg{width:17px;height:17px;flex:none}
#qtop a.qalert.on{background:rgba(15,159,143,.12);color:#0b6f64;box-shadow:none}
@media (hover:hover){#qtop .qalert button:hover{filter:brightness(1.06);transform:translateY(-1px);background:linear-gradient(135deg,#7fe3d6,#0f9f8f);color:#fff}#qtop .qalert button:hover svg{animation:bellring .6s ease-in-out}}
@keyframes bellring{0%,100%{transform:none}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
:root[data-theme="dark"] a.qalert.on{background:rgba(127,227,214,.14);color:#8ff0e3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a.qalert.on{background:rgba(127,227,214,.14);color:#8ff0e3}}

/* ---- Portada: caja «Avísame cuando haya chollos de…» en el banner (crea una alerta por palabra) ---- */
.halert{position:relative;z-index:1;flex:0 1 380px;min-width:0;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.halert label{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.95rem;color:#fff}
.halert label .hbell{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#7fe3d6,#0f9f8f);box-shadow:0 3px 10px rgba(15,159,143,.45);animation:hbell 4s ease-in-out infinite;transform-origin:50% 10%}
.halert label .hbell svg{width:16px;height:16px}
@keyframes hbell{0%,80%,100%{transform:none}84%{transform:rotate(16deg)}88%{transform:rotate(-14deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.halert .hrow{display:flex;gap:6px;padding:4px;border-radius:999px;background:#fff}
.halert input{flex:1;min-width:0;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:7px 12px;font-size:.92rem;color:#1d1d1b!important}
.halert input:focus{outline:0}
.halert button{flex:none;border-radius:999px;padding:7px 15px;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.88rem;background:linear-gradient(135deg,#7fe3d6,#0f9f8f)!important;color:#fff!important;box-shadow:0 3px 10px rgba(15,159,143,.4)!important;border:0}
.halert small{display:block;margin-top:7px;color:#94a3b8;font-size:.76rem}
.halert small a{color:#cbd5e1}
@media (max-width:560px){.hero .halert{flex:none;width:100%;padding:10px;border-radius:14px}.halert label{font-size:.88rem;margin-bottom:7px}.halert small{display:none}}

/* ---- Crear alerta (app.js): campana turquesa que vuela hasta el avatar ---- */
.bellfly{position:fixed;z-index:99999;pointer-events:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7fe3d6,#0f9f8f);box-shadow:0 4px 14px rgba(15,159,143,.5)}
.bellfly svg{width:21px;height:21px}
#qtop .qalert button.done{background:rgba(15,159,143,.14);color:#0b6f64;box-shadow:none;cursor:default}

/* ---- App instalable: botón del menú (oculto hasta que se puede instalar) e instrucciones del iPhone ---- */
.ditem[hidden]{display:none}
.iosins{margin:8px 0 6px;padding-left:22px;line-height:1.55}
.iosins li{margin-bottom:8px}
.iosico{display:inline-flex;vertical-align:-4px;width:22px;height:22px;color:#1a73e8}
.iosico svg{width:100%;height:100%}

/* ---- Ajustes › Notificaciones en el móvil ---- */
.pushbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 12px;padding:10px 12px;border-radius:14px;background:rgba(15,159,143,.08);border:1px solid rgba(15,159,143,.2)}
.pushst{margin:0;flex:1;min-width:200px;font-size:.92rem}
.pushbox button[data-push-on]{background:linear-gradient(135deg,#7fe3d6,#0f9f8f);color:#fff;border:0;box-shadow:0 3px 10px rgba(15,159,143,.35)}
.pushprefs .dmmail:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.pushprefs .dmmail+.dmmail{border-top:0;padding-top:0;margin-top:8px}
.pushbox [hidden]{display:none!important}
.pushprefs .dmmail{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.pushprefs .dmmail input{width:auto;flex:none;padding:0;margin:5px 0 0;box-shadow:none;accent-color:#0f9f8f}
.pushprefs .dmmail small{display:block;margin-top:2px}
.pushprefs a{color:var(--act);font-weight:700}

/* ---- Vista en cuadrícula: el mensaje de «no hay chollos» ocupa toda la fila ---- */
.grid>.card.empty{grid-column:1/-1}

/* ---- Botón «Siguiendo»: filtra los chollos de los usuarios que sigues; se combina con Nuevos / Más votados ---- */
#tabs .tfol{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:5px 16px 5px 6px;border-radius:999px;background:var(--mx-chip);border:1px solid var(--bd);color:var(--mu);font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:1rem;text-decoration:none;box-shadow:0 2px 8px rgba(60,40,0,.06);transition:color .15s,background .15s,box-shadow .15s}
#tabs .tfol img{width:34px;height:34px;margin:-6px 0 -6px -2px;filter:grayscale(.35);transition:transform .2s,filter .2s}
#tabs .tfol:hover{color:var(--tx)}#tabs .tfol:hover img{transform:scale(1.12) rotate(-6deg);filter:none}
#tabs .tfol.on{background:linear-gradient(135deg,#ffd9e2,#ff9fb4);border-color:#ff8aa3;color:#5a0f22;box-shadow:0 4px 12px rgba(255,90,130,.35)}
#tabs .tfol.on img{filter:none}
#tabs .tfol.on::after{content:'✕';font-size:.75rem;margin-left:2px;opacity:.6}
@media (max-width:640px){#tabs .tfol{order:3;margin-left:0;font-size:.9rem;padding:4px 14px 4px 5px}#tabs .tfol img{width:30px;height:30px}#tabs:has(.tfol) .rng{order:4;flex:none;margin-left:6px}}

/* ---- Zorros de las pestañas Nuevos / Más votados: más grandes y con animación ----
   Al pasar el ratón: «Nuevos» da un saltito; «Más votados» acelera en su carrito. La pestaña activa la hace una vez al cargar. */
#tabs .tab .tic{height:36px;margin:-9px 0 -9px -4px;transform-origin:50% 100%}
@media (max-width:640px){#tabs .tab .tic{height:28px;margin:-7px 0 -7px -3px}}
#tabs .tab:hover .tic[src*="tab-new"],#tabs .tab.on .tic[src*="tab-new"]{animation:ticHop .7s cubic-bezier(.3,1.4,.5,1)}
#tabs .tab:hover .tic[src*="tab-hot"],#tabs .tab.on .tic[src*="tab-hot"]{animation:ticZoom .8s ease-in-out}
@keyframes ticHop{0%{transform:none}20%{transform:scale(1.12,.85)}45%{transform:translateY(-9px) scale(.94,1.08) rotate(-6deg)}70%{transform:translateY(0) scale(1.08,.9)}85%{transform:scale(.97,1.03)}100%{transform:none}}
@keyframes ticZoom{0%{transform:none}15%{transform:translateX(-4px) rotate(4deg)}45%{transform:translateX(7px) rotate(-5deg) scale(1.08)}55%{transform:translateX(6px) translateY(-1px) rotate(-4deg) scale(1.08)}65%{transform:translateX(7px) translateY(1px) rotate(-5deg) scale(1.08)}100%{transform:none}}
/* «Siguiendo» activo: el corazón late de vez en cuando */
#tabs .tfol img{width:38px;height:38px;margin:-8px 0 -8px -4px}
@media (max-width:640px){#tabs .tfol img{width:32px;height:32px}}
#tabs .tfol.on img{animation:ticBeat 3s ease-in-out infinite}
@keyframes ticBeat{0%,70%,100%{transform:none}76%{transform:scale(1.16)}82%{transform:scale(1)}88%{transform:scale(1.12)}94%{transform:none}}

/* ---- Cuadrícula: el título se corta a 3 líneas (con «…») para que las tarjetas no salgan tan largas; el completo, en la ficha ---- */
.grid .deal h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

/* ---- Fotos de los usuarios (en todas partes): al pasar el ratón se hacen más grandes con un rebote.
   Las pequeñas crecen más para que se vean; las grandes del perfil, menos. ---- */
.av{transition:transform .28s cubic-bezier(.3,1.6,.5,1),box-shadow .28s}
@media (hover:hover){
  .av:hover{position:relative;z-index:5;transform:scale(1.5);box-shadow:0 0 0 2px rgba(255,214,110,.7),0 6px 16px rgba(120,70,0,.3)}
  .av42:hover,.av48:hover,.av56:hover{transform:scale(1.3)}
  .av72:hover,.av104:hover{transform:scale(1.12);box-shadow:0 0 0 3px #eaa632,0 10px 26px rgba(160,90,0,.35)}
}

/* ---- Cuadrícula con el mismo ancho que la lista (antes 1000px frente a 1040px: al cambiar de vista se estrechaba) ---- */
main.wide{max-width:1040px}

/* ---- Al llegar al formulario desde «Colgar chollo», el zorro del logo pone cara de risa (sin moverse ni los «JA») (clase .laugh, app.js); también en el móvil ---- */
.logoimg.laugh .lfx{opacity:1}
.logoimg.laugh .ltear{animation:ltear 1.3s ease-in infinite}

/* Cabecera de cristal: ámbar translúcido que deja ver las manchas del fondo, con brillo arriba y borde fino */
header{background:
  radial-gradient(520px 200px at 50% -20px,rgba(255,220,120,.55),transparent 70%),
  linear-gradient(180deg,rgba(245,182,52,.86),rgba(236,156,40,.64));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 12px 32px -14px rgba(170,100,0,.3),inset 0 1px 0 rgba(255,255,255,.5)}
:root[data-theme="dark"] header{background:
  radial-gradient(520px 200px at 50% -20px,rgba(240,170,40,.3),transparent 70%),
  linear-gradient(180deg,rgba(60,44,20,.62),rgba(28,24,20,.45));
  border-bottom-color:rgba(255,200,90,.14);box-shadow:0 12px 32px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) header{background:
  radial-gradient(520px 200px at 50% -20px,rgba(240,170,40,.3),transparent 70%),
  linear-gradient(180deg,rgba(60,44,20,.62),rgba(28,24,20,.45));
  border-bottom-color:rgba(255,200,90,.14);box-shadow:0 12px 32px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}}
/* Pie con el mismo cristal que la cabecera, con el brillo abajo y el borde arriba */
footer#foot{background:
  radial-gradient(520px 200px at 50% calc(100% + 20px),rgba(255,220,120,.55),transparent 70%),
  linear-gradient(0deg,rgba(245,182,52,.86),rgba(236,156,40,.64));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -12px 32px -14px rgba(170,100,0,.3),inset 0 -1px 0 rgba(255,255,255,.5)}
:root[data-theme="dark"] footer#foot{background:
  radial-gradient(520px 200px at 50% calc(100% + 20px),rgba(240,170,40,.3),transparent 70%),
  linear-gradient(0deg,rgba(60,44,20,.62),rgba(28,24,20,.45));
  border-top-color:rgba(255,200,90,.14);box-shadow:0 -12px 32px -14px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer#foot{background:
  radial-gradient(520px 200px at 50% calc(100% + 20px),rgba(240,170,40,.3),transparent 70%),
  linear-gradient(0deg,rgba(60,44,20,.62),rgba(28,24,20,.45));
  border-top-color:rgba(255,200,90,.14);box-shadow:0 -12px 32px -14px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.06)}}
footer#foot .fnav a,footer#foot .flegal .linkbtn,footer#foot .fnote{color:#5c4312}
footer#foot .fnav a:hover,footer#foot .flegal .linkbtn:hover{color:#2a1d00}
:root[data-theme="dark"] footer#foot :is(.fnav a,.flegal .linkbtn,.fnote){color:#cdc4b2}
:root[data-theme="dark"] footer#foot :is(.fnav a,.flegal .linkbtn):hover{color:#ffd66e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer#foot :is(.fnav a,.flegal .linkbtn,.fnote){color:#cdc4b2}
:root:not([data-theme="light"]) footer#foot :is(.fnav a,.flegal .linkbtn):hover{color:#ffd66e}}

/* Modo oscuro cálido: tarjetas con un toque marrón, buscador de la cabecera oscuro y bloque de bienvenida en la misma familia */
:root[data-theme="dark"]{--glass:rgba(42,37,30,.58);--glass-strong:rgba(35,31,26,.88);--glass-bd:rgba(255,220,160,.09);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(42,37,30,.58);--glass-strong:rgba(35,31,26,.88);--glass-bd:rgba(255,220,160,.09);}}
:root[data-theme="dark"] header>.sw input{background-color:rgba(18,15,11,.5)!important;color:#f1efe9!important;border-color:rgba(255,200,90,.2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px rgba(0,0,0,.25)!important}
:root[data-theme="dark"] header>.sw input::placeholder{color:#a8a194}
:root[data-theme="dark"] header>.sw input:focus{border-color:rgba(255,200,90,.5)!important}
:root[data-theme="dark"] .hero{background:linear-gradient(135deg,#1c1711 0%,#2a2117 60%,#4a3412 100%);border:1px solid rgba(255,200,90,.14);box-shadow:0 14px 40px rgba(0,0,0,.35)}
:root[data-theme="dark"] .hero p{color:#d3cab9}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) header>.sw input{background-color:rgba(18,15,11,.5)!important;color:#f1efe9!important;border-color:rgba(255,200,90,.2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px rgba(0,0,0,.25)!important}
:root:not([data-theme="light"]) header>.sw input::placeholder{color:#a8a194}
:root:not([data-theme="light"]) header>.sw input:focus{border-color:rgba(255,200,90,.5)!important}
:root:not([data-theme="light"]) .hero{background:linear-gradient(135deg,#1c1711 0%,#2a2117 60%,#4a3412 100%);border:1px solid rgba(255,200,90,.14);box-shadow:0 14px 40px rgba(0,0,0,.35)}
:root:not([data-theme="light"]) .hero p{color:#d3cab9}
}
/* Colgar chollo en modo claro: cristal ámbar y campos con más contraste (antes era blanco sobre casi blanco) */
:root[data-theme="light"] #form{background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,232,190,.42));-webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%);border:1px solid rgba(255,255,255,.95);box-shadow:0 22px 50px -12px rgba(150,90,0,.22),0 2px 8px rgba(120,80,0,.06),inset 0 1px 0 #fff}
:root[data-theme="light"] #form .fsec{border-bottom-color:rgba(190,140,60,.22)}
:root[data-theme="light"] #form .fsh p{color:#685a40}
:root[data-theme="light"] #form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.rte){background:rgba(255,255,255,.88);border:1.5px solid #c0975a;color:#1d1d1b;box-shadow:inset 0 1px 0 #fff,0 4px 12px -2px rgba(120,80,0,.16)}
:root[data-theme="light"] #form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.rte)::placeholder{color:#857a66}
:root[data-theme="light"] #form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.rte):hover:not(:focus){border-color:#a27a3c}
:root[data-theme="light"] #form :is(input,select,textarea):focus{background:#fff;border-color:#e8a417;box-shadow:0 0 0 4px rgba(232,164,23,.22),0 4px 12px -2px rgba(120,80,0,.16)}
:root[data-theme="light"] #form .fsec .phadd{border:2px dashed #dc9214;background:linear-gradient(135deg,rgba(255,226,150,.5),rgba(255,255,255,.4));box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
:root[data-theme="light"] #form>.fact{background:rgba(255,236,200,.4);border-top:1px solid rgba(200,150,60,.22)}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]) #form{background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,232,190,.42));-webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%);border:1px solid rgba(255,255,255,.95);box-shadow:0 22px 50px -12px rgba(150,90,0,.22),0 2px 8px rgba(120,80,0,.06),inset 0 1px 0 #fff}
:root:not([data-theme="dark"]) #form .fsec{border-bottom-color:rgba(190,140,60,.22)}
:root:not([data-theme="dark"]) #form .fsh p{color:#685a40}
:root:not([data-theme="dark"]) #form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.rte){background:rgba(255,255,255,.88);border:1.5px solid #c0975a;color:#1d1d1b;box-shadow:inset 0 1px 0 #fff,0 4px 12px -2px rgba(120,80,0,.16)}
:root:not([data-theme="dark"]) #form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.rte)::placeholder{color:#857a66}
:root:not([data-theme="dark"]) #form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.rte):hover:not(:focus){border-color:#a27a3c}
:root:not([data-theme="dark"]) #form :is(input,select,textarea):focus{background:#fff;border-color:#e8a417;box-shadow:0 0 0 4px rgba(232,164,23,.22),0 4px 12px -2px rgba(120,80,0,.16)}
:root:not([data-theme="dark"]) #form .fsec .phadd{border:2px dashed #dc9214;background:linear-gradient(135deg,rgba(255,226,150,.5),rgba(255,255,255,.4));box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
:root:not([data-theme="dark"]) #form>.fact{background:rgba(255,236,200,.4);border-top:1px solid rgba(200,150,60,.22)}
}
@media (hover:hover){:root:not([data-theme="dark"]) #form .fsec .phadd:hover{border-color:#c47c05;background:linear-gradient(135deg,rgba(255,214,120,.6),rgba(255,255,255,.45))}}
/* Cabecera del formulario «Colgar un chollo»: cristal oscuro con brillo ámbar, como el bloque de bienvenida de la portada */
#form .fhero{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(15,23,42,.97),rgba(30,41,59,.93) 60%,rgba(80,54,12,.9));-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border-bottom:1px solid rgba(255,200,90,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.2)}
#form .fhero::after{content:"";position:absolute;right:-50px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(242,163,27,.5),transparent 70%);pointer-events:none}
#form .fhero .fhead{position:relative;z-index:1;color:#fff}
#form .fhero .fhead small{color:#d5dbe5}
:root[data-theme="dark"] #form .fhero{background:linear-gradient(135deg,rgba(28,23,17,.92),rgba(42,33,23,.86) 60%,rgba(74,52,18,.84));border-bottom-color:rgba(255,200,90,.16)}
:root[data-theme="dark"] #form .fhero .fhead small{color:#d3cab9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #form .fhero{background:linear-gradient(135deg,rgba(28,23,17,.92),rgba(42,33,23,.86) 60%,rgba(74,52,18,.84));border-bottom-color:rgba(255,200,90,.16)}
:root:not([data-theme="light"]) #form .fhero .fhead small{color:#d3cab9}}

/* «Cómo funciona SocialChollo» (/como-funciona) */
.how .hhow{margin-bottom:22px}
.how .hhow h1{font-size:1.9rem}
.how .hfox{position:relative;z-index:1;flex:none;width:120px;height:120px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.how h2{font-size:1.25rem;margin:0 0 10px}
.how .hwt{margin:4px 2px 12px;font-size:1.35rem}
.hsteps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hsteps li{position:relative;margin:0;padding:22px 16px 18px;text-align:center}
.hsteps li>img,.hvote{display:flex;justify-content:center;gap:4px;width:72px;height:72px;margin:0 auto 8px;object-fit:contain}
.hvote{width:auto;align-items:center}
.hsteps h3{margin:0 0 6px;font-size:1.02rem}
.hsteps p{margin:0;font-size:.9rem;line-height:1.45;color:var(--mu)}
.hsteps .hn{position:absolute;top:12px;left:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.9rem;color:#3a2900;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 4px 10px rgba(227,154,38,.35)}
.hcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.hcol,.hband,.hfaq{padding:20px 22px}
.hch{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.hch h2{margin:0}
.hlist{margin:0;padding:0;list-style:none}
.hlist li{position:relative;margin:0 0 10px;padding-left:22px;line-height:1.5;font-size:.95rem}
.hlist li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#f7c246,#e49824)}
.hlist li:last-child{margin-bottom:0}
.hband{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px}
.hband>img{flex:none}
.hband p{margin:0;line-height:1.55}
.hfaq{margin-bottom:18px}
.hfaq details{border-top:1px solid var(--bd);padding:12px 2px}
.hfaq details:last-child{padding-bottom:2px}
.hfaq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
.hfaq summary::-webkit-details-marker{display:none}
.hfaq summary::after{content:"+";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#3a2900;background:linear-gradient(135deg,#f7c246,#e49824);transition:transform .2s}
.hfaq details[open] summary::after{transform:rotate(45deg)}
.hfaq details p{margin:8px 0 0;line-height:1.55;color:var(--mu)}
.how .hcta{margin-bottom:8px}
.hcta h2{color:#fff;margin:0 0 6px}
.hbtns{position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.hbtns .btn{margin:0;border-radius:999px;padding:10px 20px;line-height:1.2}
/* «Iniciar sesión» del bloque final: blanco translúcido para que se lea sobre el fondo oscuro */
.hcta .hbtns .btn.sec{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.55)}
.hcta .hbtns .btn.sec:hover{background:rgba(255,255,255,.2)}
/* «Tus redes, en cada chollo»: bloque destacado de Cómo funciona, con un chollo de ejemplo */
.hsoc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:center;padding:24px 26px;margin-bottom:22px;border:2px solid rgba(227,154,38,.55);background:linear-gradient(135deg,rgba(255,232,180,.55),var(--mx-card) 60%);box-shadow:0 10px 30px rgba(227,154,38,.18)}
.hsoc h2{font-size:1.6rem;margin:6px 0 4px}
.hsbadge{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#3a2900;background:linear-gradient(135deg,#f7c246,#e49824);border-radius:999px;padding:3px 10px}
.hslead{margin:0 0 12px;color:var(--mu)}
.hsnum{margin:0;padding:0;list-style:none;counter-reset:hs}
.hsnum li{counter-increment:hs;position:relative;padding-left:38px;margin:0 0 10px;line-height:1.45}
.hsnum li:last-child{margin-bottom:0}
.hsnum li::before{content:counter(hs);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.85rem;color:#3a2900;background:linear-gradient(135deg,#f7c246,#e49824)}
.hdemo{position:relative;background:var(--mx-card);border:1px solid var(--mx-card-bd);border-radius:20px;padding:16px;box-shadow:0 14px 34px rgba(60,40,0,.16);transform:rotate(1.5deg)}
.hdtop{display:flex;gap:14px;align-items:center}
.hdpic{flex:none;width:84px;height:84px;border-radius:16px;display:grid;place-items:center;font-size:50px;background:var(--mx-img)}
.hdt{display:block;font-size:1rem;line-height:1.3}
.hdpr{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:6px}
.hdpr b{font-size:1.4rem;color:var(--act)}
.hdpr s{color:var(--mu)}
.hdpr .disc{border-radius:999px;padding:1px 8px;font-weight:800;font-size:.85rem}
.hdemo .chs{margin-top:12px;padding:12px;border:2px dashed rgba(227,154,38,.6);border-radius:14px;background:rgba(247,194,70,.1)}
.hdemo .chl{color:var(--tx);font-weight:800}
.hdemo .chi{width:34px;height:34px}
.hdby{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px;font-size:.9rem;color:var(--mu)}
.hdby b{color:var(--tx)}
.hdfol{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:999px;font-size:.8rem;font-weight:800;color:#fff;background:#14213d}
.hdfol svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.hdnote{font-size:.78rem;font-weight:800;color:var(--act);white-space:nowrap}
.chr .hdnote{align-self:center;margin-left:2px}
.hdnote::before{content:"← "}
@media (max-width:760px){.hdnote{flex-basis:100%}.hdnote::before{content:"↑ "}}
:root[data-theme="dark"] .hsoc{background:linear-gradient(135deg,rgba(227,154,38,.22),var(--mx-card) 60%);border-color:rgba(240,194,92,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hsoc{background:linear-gradient(135deg,rgba(227,154,38,.22),var(--mx-card) 60%);border-color:rgba(240,194,92,.45)}}
@media (max-width:760px){.hsoc{grid-template-columns:1fr;gap:22px;padding:20px 18px}.hsoc h2{font-size:1.4rem}.hdemo{transform:none;margin-top:6px}}
.auth .ahow{display:block;margin-top:14px;text-align:center;font-size:.9rem;font-weight:700}
@media (max-width:860px){.hsteps{grid-template-columns:1fr 1fr}.hcols{grid-template-columns:1fr}}
@media (max-width:560px){.how .hhow p{display:block}.how .hhow{flex-direction:row;align-items:center}.how .hfox{width:84px;height:84px}.how .hhow h1{font-size:1.35rem}
  .hsteps{gap:10px}.hsteps li{padding:18px 10px 14px}.hsteps li>img{width:56px;height:56px}.hvote img{width:34px;height:34px}.hsteps p{font-size:.84rem}
  .hcol,.hband,.hfaq{padding:16px}.hband{flex-direction:column;gap:6px}.hband>img{width:52px;height:52px}.how .hcta{flex-direction:column;align-items:stretch}.hbtns .btn,.hbtns .ecta{flex:1;justify-content:center;text-align:center}}
/* Alertas: «N avisos · el último…» lleva a Buzón › Avisos */
a.alhits{color:var(--act);font-weight:600;text-decoration:underline;text-decoration-color:rgba(227,154,38,.45);text-underline-offset:3px}
a.alhits:hover{text-decoration-color:currentColor}

/* Lista y cuadrícula (móvil y escritorio): letra de las tarjetas de chollo un poco más pequeña */
body #list .deal h3,body #list .deal h3 a{font-size:.94rem}
body #list .deal .price{font-size:1.38rem}
body #list .deal .old{font-size:.9rem}
body #list .deal .disc{font-size:.82rem}
body #list .deal .meta.by,body #list .deal .meta.by .u,body #list .deal .desc{font-size:.875rem}
body #list .deal .act .btn.go{font-size:.94rem}
@media (min-width:900px){body #list:not(.grid) .deal h3,body #list:not(.grid) .deal h3 a{font-size:1.07rem}}

/* Tarjeta: precios (.plp) y tienda/autor (.plm). En la lista no cuentan; en la cuadrícula «Oferta en» y «por»
   van siempre abajo, justo encima de los botones, para que todas las tarjetas de la fila queden igualadas */
.pl .plp,.pl .plm{display:contents}
#list.grid .deal .pl{flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;gap:0}
#list.grid .deal .pl .plp{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
#list.grid .deal .pl .plm{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:8px}

/* Perfil › Alertas: «Borrar» se ilumina en rojo al pasar el ratón */
.sec.aldel{transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.sec.aldel:hover,.sec.aldel:focus-visible{color:#d9300a;background:rgba(217,48,10,.1);border-color:#d9300a;box-shadow:0 0 0 1px rgba(217,48,10,.2),0 6px 18px rgba(217,48,10,.28)}
:root[data-theme="dark"] .sec.aldel:hover,:root[data-theme="dark"] .sec.aldel:focus-visible{color:#ff7a5c;background:rgba(255,90,60,.14);border-color:#ff6a48;box-shadow:0 0 0 1px rgba(255,90,60,.25),0 0 16px rgba(255,90,60,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec.aldel:hover,:root:not([data-theme="light"]) .sec.aldel:focus-visible{color:#ff7a5c;background:rgba(255,90,60,.14);border-color:#ff6a48;box-shadow:0 0 0 1px rgba(255,90,60,.25),0 0 16px rgba(255,90,60,.35)}}

/* Botones rojos (Eliminar cuenta y el «Sí, eliminar» de su popup): se iluminan al pasar el ratón */
button.danger{transition:filter .2s,box-shadow .2s,transform .1s}
button.danger:hover,button.danger:focus-visible{filter:brightness(1.12) saturate(1.1);box-shadow:0 0 0 3px rgba(232,62,48,.22),0 8px 26px rgba(232,62,48,.55),0 0 22px rgba(255,80,60,.45),inset 0 1px 0 rgba(255,255,255,.45)}
button.danger:active{transform:translateY(1px)}

/* Ojo de ver contraseña: sin relleno heredado (en Ajustes lo aplastaba) y más visible */
.pwd>button.pwt{padding:0;width:38px;height:38px;color:#8a6a1f;opacity:1}
.pwd>button.pwt svg{flex:none;width:20px;height:20px}
.pwd>button.pwt:hover{color:#d48f00;background:rgba(245,182,52,.14)}
:root[data-theme="dark"] .pwd>button.pwt{color:#cdb98a}
:root[data-theme="dark"] .pwd>button.pwt:hover{color:#ffd66e;background:rgba(246,183,60,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pwd>button.pwt{color:#cdb98a}:root:not([data-theme="light"]) .pwd>button.pwt:hover{color:#ffd66e;background:rgba(246,183,60,.14)}}
/* Contraseña puesta por el navegador (autorrelleno): sin ojo. La animación avisa a app.js del autorrelleno */
.pwd.pwa>.pwt{display:none}
.pwd:has(input:-webkit-autofill)>.pwt{display:none}
@keyframes pwauto{from{opacity:1}to{opacity:1}}
.pwd>input:-webkit-autofill{animation:pwauto 1ms}
.fld .pwd.pwa input{padding-right:14px!important}
/* Móvil, cuadrícula: la tienda siempre debajo de «Oferta en:» (en escritorio va al lado si cabe) */
@media (max-width:560px){#list.grid .deal .pl .plm .meta.by:has(.shop){display:flex;flex-direction:column;align-items:flex-start;gap:3px}}

/* Pastilla de votar (opción F): degradado cálido con brillo suave en los dos modos */
:root{--mx-vote:linear-gradient(135deg,#fff3d6,#ffe2cc);--mx-vote-bd:#f5c48a;--mx-vote-sh:0 2px 10px rgba(232,144,26,.15)}
:root[data-theme="dark"]{--mx-vote:linear-gradient(135deg,rgba(246,183,60,.34),rgba(232,110,40,.24));--mx-vote-bd:rgba(250,170,70,.65);--mx-vote-sh:0 0 14px rgba(246,160,60,.25),inset 0 1px 0 rgba(255,220,150,.15)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mx-vote:linear-gradient(135deg,rgba(246,183,60,.34),rgba(232,110,40,.24));--mx-vote-bd:rgba(250,170,70,.65);--mx-vote-sh:0 0 14px rgba(246,160,60,.25),inset 0 1px 0 rgba(255,220,150,.15)}}
#list .deal .vote,.dinfo .vote{box-shadow:var(--mx-vote-sh)}
/* Zorros de votar sin el cuadradito de fondo de los botones .sec */
:root .vote button.sec,:root .vote button.sec:hover{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
/* Chollo en negativo: la pastilla de votar pasa a un degradado frío (app.js cambia la clase al votar) */
.vote:has(>.temp.cold){--mx-vote:linear-gradient(135deg,#e3f1ff,#d6e4ff);--mx-vote-bd:#8db8ec;--mx-vote-sh:0 2px 10px rgba(40,110,200,.15)}
:root[data-theme="dark"] .vote:has(>.temp.cold){--mx-vote:linear-gradient(135deg,rgba(90,170,255,.34),rgba(70,100,230,.24));--mx-vote-bd:rgba(120,180,255,.65);--mx-vote-sh:0 0 14px rgba(90,160,255,.28),inset 0 1px 0 rgba(180,215,255,.15)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vote:has(>.temp.cold){--mx-vote:linear-gradient(135deg,rgba(90,170,255,.34),rgba(70,100,230,.24));--mx-vote-bd:rgba(120,180,255,.65);--mx-vote-sh:0 0 14px rgba(90,160,255,.28),inset 0 1px 0 rgba(180,215,255,.15)}}
/* Modo oscuro: número de la temperatura más claro para que se lea sobre los degradados */
:root[data-theme="dark"] .vote .temp.hot{color:#ff8a5c}
:root[data-theme="dark"] .vote .temp.cold{color:#8cc8ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vote .temp.hot{color:#ff8a5c}:root:not([data-theme="light"]) .vote .temp.cold{color:#8cc8ff}}

/* Confeti (chollo publicado o reactivado): el zorro del logo se ríe como al pasar el ratón, sin los «JA» (clase .cheer, app.js) */
.logoimg.cheer .lfx{opacity:1}
.logoimg.cheer .lfox{animation:foxlaugh .46s ease-in-out infinite}
.logoimg.cheer .ltear{animation:ltear .9s ease-in infinite}
/* Logo: al pasar el ratón ya no salen los «JA» (el zorro se sigue riendo) */
.logoimg .lja{display:none}
/* Tarjetas de chollo: se abren pulsando en cualquier parte (app.js) */
article.deal[id^="d-"]{cursor:pointer}
article.deal[id^="d-"] :is(.vote,.acl){cursor:default}
/* «Avisar caducado» (usuarios): ámbar; una vez avisado, en verde y más discreto */
.dab.wn .dabi{background:linear-gradient(135deg,#ffc35a,#e8890c)}
@media (hover:hover){.dab.wn:hover{border-color:#e8a23a}.dab.wn:hover .dabi{transform:rotate(-30deg)}}
.dab.wn.done .dabi{background:linear-gradient(135deg,#6fd08f,#2f9e5b)}
.dab.wn.done{opacity:.8}
/* Estadísticas de perfil: número más grande con el degradado de su icono */
.ucard .st b{font-size:1.5rem;font-weight:600;letter-spacing:0;-webkit-background-clip:text;background-clip:text;color:transparent}
.ucard .st:has(.i1) b{background-image:linear-gradient(135deg,#f9c74f,#e08a00)}
.ucard .st:has(.i2) b{background-image:linear-gradient(135deg,#ff9a6b,#e2401a)}
.ucard .st:has(.i3) b{background-image:linear-gradient(135deg,#7fb0ff,#2f6fe0)}
.ucard .st:has(.i4) b{background-image:linear-gradient(135deg,#ff8fb0,#d92e62)}
.ucard .st:has(.i5) b{background-image:linear-gradient(135deg,#6fd08f,#23914f)}
.ucard .st:has(.i6) b{background-image:linear-gradient(135deg,#c4a3ff,#7c3aed)}
:root[data-theme="dark"] .ucard .st:has(.i1) b{background-image:linear-gradient(135deg,#ffe08a,#f6b73c)}
:root[data-theme="dark"] .ucard .st:has(.i2) b{background-image:linear-gradient(135deg,#ffc0a0,#ff7a4a)}
:root[data-theme="dark"] .ucard .st:has(.i3) b{background-image:linear-gradient(135deg,#b5d2ff,#6ea4ff)}
:root[data-theme="dark"] .ucard .st:has(.i4) b{background-image:linear-gradient(135deg,#ffbcd0,#ff6f9a)}
:root[data-theme="dark"] .ucard .st:has(.i5) b{background-image:linear-gradient(135deg,#a8ecbb,#4cc97a)}
:root[data-theme="dark"] .ucard .st:has(.i6) b{background-image:linear-gradient(135deg,#ddc8ff,#a78bfa)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ucard .st:has(.i1) b{background-image:linear-gradient(135deg,#ffe08a,#f6b73c)}
:root:not([data-theme="light"]) .ucard .st:has(.i2) b{background-image:linear-gradient(135deg,#ffc0a0,#ff7a4a)}
:root:not([data-theme="light"]) .ucard .st:has(.i3) b{background-image:linear-gradient(135deg,#b5d2ff,#6ea4ff)}
:root:not([data-theme="light"]) .ucard .st:has(.i4) b{background-image:linear-gradient(135deg,#ffbcd0,#ff6f9a)}
:root:not([data-theme="light"]) .ucard .st:has(.i5) b{background-image:linear-gradient(135deg,#a8ecbb,#4cc97a)}
:root:not([data-theme="light"]) .ucard .st:has(.i6) b{background-image:linear-gradient(135deg,#ddc8ff,#a78bfa)}}

/* ---- Chollo publicado o reactivado: el chollo se ilumina y salen fuegos artificiales sobre él (celebrate(), app.js) ---- */
.deal.glow,.card.glow{animation:dglow 4s ease-out;position:relative;z-index:1}
@keyframes dglow{0%{box-shadow:0 0 0 0 rgba(255,200,60,0)}12%,30%,48%{box-shadow:0 0 0 3px #f5bd3c,0 0 34px 10px rgba(255,200,60,.65)}21%,39%{box-shadow:0 0 0 3px #f5bd3c,0 0 18px 4px rgba(255,200,60,.35)}100%{box-shadow:0 0 0 3px transparent,0 0 0 0 transparent}}
.fwks{position:fixed;inset:0;pointer-events:none;z-index:1900;overflow:hidden}
.fwks b{position:absolute;width:4px;height:14px;margin-left:-2px;border-radius:2px;opacity:0;animation:fwup .55s ease-out both}
.fwks i{position:absolute;width:4px;height:16px;margin:-8px -2px;border-radius:3px;opacity:0;animation:fwboom 1.4s cubic-bezier(.12,.75,.3,1) both}
.fwks u{position:absolute;width:120px;height:120px;margin:-60px;border-radius:50%;opacity:0;animation:fwflash .5s ease-out both}
@keyframes fwup{0%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0;transform:translateY(var(--ty))}}
@keyframes fwboom{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scaleY(.4)}15%{transform:rotate(var(--a)) translateY(calc(var(--v) * .45)) scaleY(1.6)}75%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(var(--v)) scaleY(.5)}}
@keyframes fwflash{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.3)}}
/* El zorro, además de reírse, da saltos */
.logoimg.cheer .lfox{animation:foxcheer 1s ease-in-out 3}
@keyframes foxcheer{0%,100%{transform:none}15%{transform:translateY(-12px) rotate(-6deg)}30%{transform:translateY(0) scale(1.05,.95)}45%{transform:translateY(-9px) rotate(6deg)}60%{transform:translateY(0)}75%{transform:translateY(-6px) rotate(-3deg)}90%{transform:translateY(0)}}

/* ---- Móvil: conversación a pantalla completa (body.dmfull, app.js); --vvh/--vvt = zona visible sin el teclado ---- */
@media (max-width:560px){
body.dmfull{overflow:hidden}
body.dmfull .dmthread{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100dvh);z-index:50;margin:0;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
body.dmfull .dmh{flex:none;padding-top:calc(10px + env(safe-area-inset-top,0px))}
body.dmfull .dmlist{flex:1;min-height:0;max-height:none;overscroll-behavior:contain}
body.dmfull .dmform,body.dmfull .dmno{flex:none;margin:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}

/* ---- Conversación: «Bloquear» y «Borrar conversación» en el menú de tres puntos ---- */
.dmmenu{position:relative;flex:none}
.dmmenu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;cursor:pointer;color:var(--tx)}
.dmmenu>summary::-webkit-details-marker{display:none}
.dmmenu>summary svg{width:20px;height:20px}
.dmmenu>summary:hover,.dmmenu[open]>summary{background:rgba(120,100,60,.12)}
.dmpop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:210px;padding:6px;border-radius:14px;background:var(--card);border:1px solid var(--bd);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.dmact{margin:0}
.dmpop .dmact button{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:10px 12px;border:0!important;border-radius:10px;background:none!important;box-shadow:none!important;color:var(--tx)!important;font:inherit;font-weight:600;text-align:left;white-space:nowrap;cursor:pointer;transform:none!important;filter:none!important}
.dmpop .dmact button:hover{background:rgba(120,100,60,.1)!important}
.dmact button svg{width:18px;height:18px;flex:none;color:#c0392b}
:root[data-theme="dark"] .dmpop{box-shadow:0 10px 30px rgba(0,0,0,.5)}
:root[data-theme="dark"] .dmmenu>summary:hover,:root[data-theme="dark"] .dmmenu[open]>summary{background:rgba(255,255,255,.08)}:root[data-theme="dark"] .dmpop .dmact button:hover{background:rgba(255,255,255,.08)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmpop{box-shadow:0 10px 30px rgba(0,0,0,.5)}:root:not([data-theme="light"]) .dmmenu>summary:hover,:root:not([data-theme="light"]) .dmmenu[open]>summary,:root:not([data-theme="light"]) .dmpop .dmact button:hover{background:rgba(255,255,255,.08)!important}}
/* Menú de un mensaje recibido («Denunciar mensaje»), junto a la hora: tres puntos pequeños para evitar pulsaciones sin querer */
.dmt{display:flex;align-items:center;gap:4px}
/* La hora de debajo del mensaje y las fechas no se seleccionan al marcar texto */
.dmt,.dmday{-webkit-user-select:none;user-select:none}

/* ---- Conversación: cabecera (nombre de con quién hablas) moderna y translúcida; los mensajes pasan por debajo con desenfoque ---- */
.dmthread{position:relative}
.dmthread .dmh{position:absolute;top:0;left:0;right:0;z-index:5;border-bottom:1px solid rgba(227,154,38,.28);
  background:linear-gradient(120deg,rgba(255,214,110,.62),rgba(255,247,228,.5) 55%,rgba(255,190,120,.42));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 6px 18px rgba(150,95,10,.1)}
.dmthread .dmback,.dmthread .dmmenu>summary{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.dmthread .dmname{color:#3a2900}
:root[data-theme="dark"] .dmthread .dmh{border-bottom-color:rgba(255,200,90,.16);background:linear-gradient(120deg,rgba(247,180,60,.26),rgba(38,30,22,.55) 55%,rgba(150,90,200,.18));box-shadow:0 6px 18px rgba(0,0,0,.35)}
:root[data-theme="dark"] .dmthread .dmback,:root[data-theme="dark"] .dmthread .dmmenu>summary{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
:root[data-theme="dark"] .dmthread .dmname{color:#ffe2a6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmthread .dmh{border-bottom-color:rgba(255,200,90,.16);background:linear-gradient(120deg,rgba(247,180,60,.26),rgba(38,30,22,.55) 55%,rgba(150,90,200,.18));box-shadow:0 6px 18px rgba(0,0,0,.35)}
:root:not([data-theme="light"]) .dmthread .dmback,:root:not([data-theme="light"]) .dmthread .dmmenu>summary{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
:root:not([data-theme="light"]) .dmthread .dmname{color:#ffe2a6}}
/* Caja de escribir y «Enviar»: misma barra translúcida, por encima de los mensajes */
.dmthread .dmform,.dmthread .dmno{position:absolute;bottom:0;left:0;right:0;z-index:5;border-top:1px solid rgba(227,154,38,.28);
  background:linear-gradient(120deg,rgba(255,190,120,.42),rgba(255,247,228,.5) 45%,rgba(255,214,110,.62));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 -6px 18px rgba(150,95,10,.08)}
.dmthread .dmform .rte,.dmthread .dmform textarea,.dmthread .dmform .emb{background:rgba(255,255,255,.6);border-color:rgba(227,154,38,.35)}
:root[data-theme="dark"] .dmthread .dmform,:root[data-theme="dark"] .dmthread .dmno{border-top-color:rgba(255,200,90,.16);background:linear-gradient(120deg,rgba(150,90,200,.18),rgba(38,30,22,.55) 45%,rgba(247,180,60,.26));box-shadow:0 -6px 18px rgba(0,0,0,.3)}
:root[data-theme="dark"] .dmthread .dmform .rte,:root[data-theme="dark"] .dmthread .dmform textarea,:root[data-theme="dark"] .dmthread .dmform .emb{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmthread .dmform,:root:not([data-theme="light"]) .dmthread .dmno{border-top-color:rgba(255,200,90,.16);background:linear-gradient(120deg,rgba(150,90,200,.18),rgba(38,30,22,.55) 45%,rgba(247,180,60,.26));box-shadow:0 -6px 18px rgba(0,0,0,.3)}
:root:not([data-theme="light"]) .dmthread .dmform .rte,:root:not([data-theme="light"]) .dmthread .dmform textarea,:root:not([data-theme="light"]) .dmthread .dmform .emb{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}}
.dmthread .dmlist{max-height:calc(60vh + 130px)}

/* ---- Buzón: lista de conversaciones con tarjetas de cristal de color (sin la tarjeta blanca) ---- */
.dmconvs{display:flex;flex-direction:column;gap:10px;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.dmconvs .dmrow{position:relative;padding:12px 14px;border:1px solid rgba(227,154,38,.22);border-radius:18px;
  background:linear-gradient(120deg,rgba(255,236,190,.75),rgba(255,250,240,.7) 60%,rgba(255,226,200,.6));
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 4px 14px rgba(150,95,10,.08);transition:transform .15s,box-shadow .15s,border-color .15s}
.dmconvs .dmrow .av{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 8px rgba(120,80,0,.18);border-radius:50%}
.dmconvs .dmrow.unread{border-color:rgba(227,154,38,.6);background:linear-gradient(120deg,rgba(255,206,100,.85),rgba(255,240,205,.8) 60%,rgba(255,200,150,.7));box-shadow:0 6px 18px rgba(227,154,38,.25)}
.dmconvs .dmrow.unread .av{box-shadow:0 0 0 2px #fff,0 0 0 4px #e8a417}
.dmconvs .dmwhen{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.65);font-weight:600}
.dmconvs .dmdot{box-shadow:0 0 0 3px rgba(226,59,46,.22),0 0 10px rgba(226,59,46,.6)}
@media (hover:hover){.dmconvs .dmrow:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(150,95,10,.16);border-color:rgba(227,154,38,.5)}}
:root[data-theme="dark"] .dmconvs .dmrow{border-color:rgba(255,200,90,.14);background:linear-gradient(120deg,rgba(247,180,60,.14),rgba(40,32,24,.6) 60%,rgba(150,90,200,.12));box-shadow:0 4px 14px rgba(0,0,0,.3)}
:root[data-theme="dark"] .dmconvs .dmrow .av{box-shadow:0 0 0 2px rgba(255,255,255,.15),0 2px 8px rgba(0,0,0,.4)}
:root[data-theme="dark"] .dmconvs .dmrow.unread{border-color:rgba(247,190,70,.5);background:linear-gradient(120deg,rgba(247,180,60,.3),rgba(52,40,26,.7) 60%,rgba(150,90,200,.18));box-shadow:0 6px 20px rgba(247,180,60,.15)}
:root[data-theme="dark"] .dmconvs .dmrow.unread .av{box-shadow:0 0 0 2px #1d1712,0 0 0 4px #f5bd3c}
:root[data-theme="dark"] .dmconvs .dmwhen{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .dmconvs .dmrow .fwho b{color:#ffe2a6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmconvs .dmrow{border-color:rgba(255,200,90,.14);background:linear-gradient(120deg,rgba(247,180,60,.14),rgba(40,32,24,.6) 60%,rgba(150,90,200,.12));box-shadow:0 4px 14px rgba(0,0,0,.3)}
:root:not([data-theme="light"]) .dmconvs .dmrow .av{box-shadow:0 0 0 2px rgba(255,255,255,.15),0 2px 8px rgba(0,0,0,.4)}
:root:not([data-theme="light"]) .dmconvs .dmrow.unread{border-color:rgba(247,190,70,.5);background:linear-gradient(120deg,rgba(247,180,60,.3),rgba(52,40,26,.7) 60%,rgba(150,90,200,.18));box-shadow:0 6px 20px rgba(247,180,60,.15)}
:root:not([data-theme="light"]) .dmconvs .dmrow.unread .av{box-shadow:0 0 0 2px #1d1712,0 0 0 4px #f5bd3c}
:root:not([data-theme="light"]) .dmconvs .dmwhen{background:rgba(255,255,255,.08)}
:root:not([data-theme="light"]) .dmconvs .dmrow .fwho b{color:#ffe2a6}}
/* Modo oscuro: más contraste en la lista de chats (tarjeta más clara, texto y hora más legibles) */
:root[data-theme="dark"] .dmconvs .dmrow{border-color:rgba(255,205,110,.3);background:linear-gradient(120deg,rgba(247,180,60,.24),rgba(74,60,46,.85) 55%,rgba(120,80,170,.3))}
:root[data-theme="dark"] .dmconvs .dmrow.unread{border-color:rgba(255,200,80,.75);background:linear-gradient(120deg,rgba(247,180,60,.45),rgba(84,66,44,.9) 55%,rgba(130,85,180,.35))}
:root[data-theme="dark"] .dmconvs .dmprev{color:#e6d9c6}
:root[data-theme="dark"] .dmconvs .dmrow.unread .dmprev{color:#fff}
:root[data-theme="dark"] .dmconvs .dmwhen{background:rgba(255,255,255,.14);color:#f3e6d2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmconvs .dmrow{border-color:rgba(255,205,110,.3);background:linear-gradient(120deg,rgba(247,180,60,.24),rgba(74,60,46,.85) 55%,rgba(120,80,170,.3))}
:root:not([data-theme="light"]) .dmconvs .dmrow.unread{border-color:rgba(255,200,80,.75);background:linear-gradient(120deg,rgba(247,180,60,.45),rgba(84,66,44,.9) 55%,rgba(130,85,180,.35))}
:root:not([data-theme="light"]) .dmconvs .dmprev{color:#e6d9c6}
:root:not([data-theme="light"]) .dmconvs .dmrow.unread .dmprev{color:#fff}
:root:not([data-theme="light"]) .dmconvs .dmwhen{background:rgba(255,255,255,.14);color:#f3e6d2}}
/* Número de mensajes sin leer de cada chat, junto a la hora */
.dmcnt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;box-sizing:border-box;border-radius:999px;background:linear-gradient(135deg,#ff5a4a,#e23b2e);color:#fff;font-size:.78rem;font-weight:800;line-height:1;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 2px 8px rgba(226,59,46,.45)}
:root[data-theme="dark"] .dmcnt{box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 10px rgba(226,59,46,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmcnt{box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 10px rgba(226,59,46,.55)}}
.dmconvs .dmwhen:has(.dmcnt){padding-right:4px}
/* Lista de chats: a la derecha solo el número de sin leer, en una bola de cristal de color con brillo */
.dmconvs .dmwhen,.dmconvs .dmwhen:has(.dmcnt){padding:0;background:none!important}
.dmconvs .dmcnt{min-width:30px;height:30px;padding:0 8px;font-size:.85rem;border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(135deg,rgba(255,84,150,.82),rgba(255,140,60,.82));-webkit-backdrop-filter:blur(8px) saturate(180%);backdrop-filter:blur(8px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 10px rgba(160,20,60,.25),0 4px 14px rgba(255,84,150,.45);text-shadow:0 1px 2px rgba(120,0,40,.35)}
:root[data-theme="dark"] .dmconvs .dmcnt{border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -6px 10px rgba(120,10,50,.3),0 0 18px rgba(255,84,150,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmconvs .dmcnt{border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -6px 10px rgba(120,10,50,.3),0 0 18px rgba(255,84,150,.55)}}
:root[data-theme="dark"] .dmconvs .dmcnt{background:linear-gradient(135deg,rgba(255,70,150,.92),rgba(255,140,50,.92))}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmconvs .dmcnt{background:linear-gradient(135deg,rgba(255,70,150,.92),rgba(255,140,50,.92))}}
/* Móvil: mientras escribes un comentario no se muestra el botón de subir (taparía «Enviar») */
@media (max-width:560px){body:has(form.cform:focus-within) #totop{opacity:0!important;pointer-events:none!important}}

/* ---- Mensajes directos: botón de enviar redondo con flecha a la derecha, de cristal ámbar ---- */
.dmform .dmsend{flex:none;align-self:center;display:flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:0;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);color:#3a2900;
  background:linear-gradient(135deg,rgba(255,206,90,.88),rgba(240,140,40,.85));-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -6px 12px rgba(170,90,0,.22),0 4px 14px rgba(227,154,38,.4);transition:transform .15s,box-shadow .15s}
.dmform .dmsend svg{width:22px;height:22px}
.dmform .dmsend:active{transform:scale(.92)}
@media (hover:hover){.dmform .dmsend:hover{transform:translateX(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -6px 12px rgba(170,90,0,.22),0 8px 20px rgba(227,154,38,.5)}}
:root[data-theme="dark"] .dmform .dmsend{border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(120,60,0,.3),0 0 18px rgba(247,180,60,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmform .dmsend{border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(120,60,0,.3),0 0 18px rgba(247,180,60,.45)}}
/* Mensajes directos: enlace a un chollo (con el zorro) o a un perfil de la propia web, como una tarjetita dentro del globo */
.dmb a.dlink.own{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:4px 0 2px;padding:6px 12px 6px 6px;border-radius:14px;box-sizing:border-box;
  text-decoration:none;font-weight:700;line-height:1.3;white-space:normal;vertical-align:middle;
  background:linear-gradient(135deg,#fff3d1,#ffe2a0);border:1px solid rgba(227,154,38,.45);color:#6b4300;box-shadow:0 2px 8px rgba(150,95,10,.12)}
.dmb a.dlink.own .ownic{flex:none;width:26px;height:26px;border-radius:50%;background:#14213d;padding:2px;box-sizing:border-box}
.dmb a.dlink.own:hover{border-color:#e39a26;box-shadow:0 4px 12px rgba(150,95,10,.2)}
.dmm.me .dmb a.dlink.own{background:rgba(255,214,110,.14);border-color:rgba(255,214,110,.4);color:#ffd66e;box-shadow:none}
:root[data-theme="dark"] .dmb a.dlink.own{background:rgba(255,214,110,.12);border-color:rgba(255,214,110,.3);color:#ffd27a;box-shadow:none}
:root[data-theme="dark"] .dmm.me .dmb a.dlink.own{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.5);color:#3a2400}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmb a.dlink.own{background:rgba(255,214,110,.12);border-color:rgba(255,214,110,.3);color:#ffd27a;box-shadow:none}:root:not([data-theme="light"]) .dmm.me .dmb a.dlink.own{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.5);color:#3a2400}}
.dmb a.dlink.own .ownic.uav{padding:0;background:none;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.dmb a.dlink.own .ownic.nof{filter:grayscale(1);background:#fff;padding:0;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
/* Escritorio: las barras translúcidas del chat (nombre arriba, caja de escribir abajo) difuminan más lo que pasa por detrás */
@media (min-width:561px){.dmthread .dmh,.dmthread .dmform,.dmthread .dmno{-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%)}}
@media (min-width:561px){
.dmthread .dmh{background:linear-gradient(120deg,rgba(255,214,110,.78),rgba(255,247,228,.68) 55%,rgba(255,190,120,.6))}
.dmthread .dmform,.dmthread .dmno{background:linear-gradient(120deg,rgba(255,190,120,.6),rgba(255,247,228,.68) 45%,rgba(255,214,110,.78))}
:root[data-theme="dark"] .dmthread .dmh{background:linear-gradient(120deg,rgba(247,180,60,.34),rgba(38,30,22,.72) 55%,rgba(150,90,200,.26))}
:root[data-theme="dark"] .dmthread .dmform,:root[data-theme="dark"] .dmthread .dmno{background:linear-gradient(120deg,rgba(150,90,200,.26),rgba(38,30,22,.72) 45%,rgba(247,180,60,.34))}}
@media (min-width:561px) and (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .dmthread .dmh{background:linear-gradient(120deg,rgba(247,180,60,.34),rgba(38,30,22,.72) 55%,rgba(150,90,200,.26))}
:root:not([data-theme="light"]) .dmthread .dmform,:root:not([data-theme="light"]) .dmthread .dmno{background:linear-gradient(120deg,rgba(150,90,200,.26),rgba(38,30,22,.72) 45%,rgba(247,180,60,.34))}}
/* (más difuminado aún en escritorio) */
@media (min-width:561px){.dmthread .dmh,.dmthread .dmform,.dmthread .dmno{-webkit-backdrop-filter:blur(50px) saturate(200%);backdrop-filter:blur(50px) saturate(200%)}
.dmthread .dmh{background:linear-gradient(120deg,rgba(255,214,110,.86),rgba(255,247,228,.8) 55%,rgba(255,190,120,.72))}
.dmthread .dmform,.dmthread .dmno{background:linear-gradient(120deg,rgba(255,190,120,.72),rgba(255,247,228,.8) 45%,rgba(255,214,110,.86))}
:root[data-theme="dark"] .dmthread .dmh{background:linear-gradient(120deg,rgba(247,180,60,.42),rgba(38,30,22,.82) 55%,rgba(150,90,200,.32))}
:root[data-theme="dark"] .dmthread .dmform,:root[data-theme="dark"] .dmthread .dmno{background:linear-gradient(120deg,rgba(150,90,200,.32),rgba(38,30,22,.82) 45%,rgba(247,180,60,.42))}}
@media (min-width:561px) and (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .dmthread .dmh{background:linear-gradient(120deg,rgba(247,180,60,.42),rgba(38,30,22,.82) 55%,rgba(150,90,200,.32))}
:root:not([data-theme="light"]) .dmthread .dmform,:root:not([data-theme="light"]) .dmthread .dmno{background:linear-gradient(120deg,rgba(150,90,200,.32),rgba(38,30,22,.82) 45%,rgba(247,180,60,.42))}}
/* El cristal de la propia tarjeta del chat impedía que las barras difuminaran los mensajes (un desenfoque dentro de otro
   no funciona en los navegadores): en escritorio la tarjeta va sin desenfoque y con fondo casi opaco */
@media (min-width:561px){.card.dmthread{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--card) 92%,transparent)}}

/* ---------- Avisos (toast): cristal azul oscuro como el botón «Subir chollo»; los de advertencia con icono ámbar ---------- */
#toast{display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:11px 16px;border-radius:16px;background:rgba(20,33,61,.9);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);color:#fff;font-size:.93rem;font-weight:500;line-height:1.45;text-align:left;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(40,20,0,.35),inset 0 1px 0 rgba(255,255,255,.1);cursor:pointer;-webkit-tap-highlight-color:transparent}
#toast.show{pointer-events:auto}
#toast .ti{display:none}
#toast.warn{padding-left:11px;border-color:rgba(247,194,70,.5)}
#toast.warn .ti{display:flex;flex:0 0 26px;height:26px;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 2px 8px rgba(227,154,38,.5)}
#toast.warn .ti svg{width:15px;height:15px}
#toast.warn .tt{padding-top:2px}

/* Menú › Categorías: al pasar el ratón se marca la fila entera, también la flecha de desplegar; la flecha bajo el ratón, más fuerte */
.dpanel .mrow{border-radius:10px}
.dpanel .mtg{border-radius:10px;transition:background .15s,color .15s,transform .2s}
@media (hover:hover){
.dpanel .mrow:hover{background:rgba(247,194,70,.3)}
.dpanel .mrow:hover a{background:none;color:#7a4f00}
.dpanel .mrow:hover .mtg{color:#7a4f00}
:root[data-theme="dark"] .dpanel .mrow:hover{background:rgba(247,194,70,.14)}
:root[data-theme="dark"] .dpanel .mrow:hover a,:root[data-theme="dark"] .dpanel .mrow:hover .mtg{color:#ffd66e}
:root[data-theme="dark"] .dpanel .mrow:hover a{background:none}
}
@media (hover:hover) and (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .dpanel .mrow:hover{background:rgba(247,194,70,.14)}
:root:not([data-theme="light"]) .dpanel .mrow:hover a,:root:not([data-theme="light"]) .dpanel .mrow:hover .mtg{color:#ffd66e}
:root:not([data-theme="light"]) .dpanel .mrow:hover a{background:none}
}

/* Menú › Categorías: tres niveles bien distintos.
   Familia: negrita grande; abierta, todo su contenido queda dentro de una tarjeta ámbar.
   Subfamilia: seminegrita con un punto ámbar; abierta, en color ámbar.
   Tipo: letra más pequeña y suave, colgando de una línea vertical bajo su subfamilia. */
.dpanel .mf>summary a{font-weight:800;font-size:1.03rem;color:var(--tx)}
.dpanel .mf{border-radius:14px;transition:background .2s}
.dpanel .mf[open]{margin:4px 0 8px;padding-bottom:6px;background:rgba(247,194,70,.13);box-shadow:inset 0 0 0 1px rgba(227,154,38,.28)}
.dpanel .mf[open]>summary a{color:#7a4f00}
.dpanel .mf[open]>summary .mtg{color:#7a4f00}
.dpanel .ms .mrow a{position:relative;padding-left:30px;font-weight:500;font-size:.93rem;color:var(--tx)}
.dpanel .ms[open]>summary a{font-weight:700}
.dpanel .ms .mrow a::before{content:"";position:absolute;left:15px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#e8a417;opacity:.55}
.dpanel .ms[open]>summary a{color:#a86400}
.dpanel .ms[open]>summary a::before{opacity:1;box-shadow:0 0 0 3px rgba(232,164,23,.25)}
.dpanel .ms[open]{padding-bottom:4px}
.dpanel .ml{margin-left:17px;padding:6px 12px 6px 18px;border-left:2px solid rgba(227,154,38,.4);border-radius:0 10px 10px 0;font-size:.86rem;font-weight:400;color:var(--mu)}
:root[data-theme="dark"] .dpanel .mf[open]{background:rgba(247,194,70,.07);box-shadow:inset 0 0 0 1px rgba(247,194,70,.18)}
:root[data-theme="dark"] .dpanel .mf[open]>summary a,:root[data-theme="dark"] .dpanel .mf[open]>summary .mtg{color:#ffd66e}
:root[data-theme="dark"] .dpanel .ms[open]>summary a{color:#f5bd3c}
:root[data-theme="dark"] .dpanel .ml{border-left-color:rgba(247,194,70,.3)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .dpanel .mf[open]{background:rgba(247,194,70,.07);box-shadow:inset 0 0 0 1px rgba(247,194,70,.18)}
:root:not([data-theme="light"]) .dpanel .mf[open]>summary a,:root:not([data-theme="light"]) .dpanel .mf[open]>summary .mtg{color:#ffd66e}
:root:not([data-theme="light"]) .dpanel .ms[open]>summary a{color:#f5bd3c}
:root:not([data-theme="light"]) .dpanel .ml{border-left-color:rgba(247,194,70,.3)}}

/* Flecha de desplegar (con ratón): bolita redonda; con el ratón en la fila se insinúa y, encima de la flecha, se rellena de ámbar */
@media (hover:hover){
.dpanel .mrow .mtg{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-right:8px;padding:0;border-radius:50%;font-size:.8rem}
.dpanel .mrow:hover .mtg{background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(227,154,38,.35)}
.dpanel .mrow .mtg.mtg:hover,:root[data-theme="dark"] .dpanel .mrow .mtg.mtg:hover{color:#3a2900;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 3px 10px rgba(227,154,38,.45)}
:root[data-theme="dark"] .dpanel .mrow:hover .mtg:not(:hover){background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(247,194,70,.3)}}
@media (hover:hover) and (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .dpanel .mrow .mtg.mtg:hover{color:#3a2900;background:linear-gradient(135deg,#f7c246,#e49824);box-shadow:0 3px 10px rgba(227,154,38,.45)}
:root:not([data-theme="light"]) .dpanel .mrow:hover .mtg:not(:hover){background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(247,194,70,.3)}}

/* Menú, modo oscuro: la opción donde estás conserva su fondo ámbar al pasar el ratón (si no, el texto oscuro quedaba sobre fondo oscuro) */
:root[data-theme="dark"] .dpanel .ditem.on:hover{background:linear-gradient(135deg,#f7c246,#e49824);color:#3a2900;box-shadow:0 4px 12px rgba(227,154,38,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dpanel .ditem.on:hover{background:linear-gradient(135deg,#f7c246,#e49824);color:#3a2900;box-shadow:0 4px 12px rgba(227,154,38,.35)}}

/* Familias de la portada: una sola fila que se desliza, con los bordes difuminados cuando hay más por ver
   y flechas ‹ › en el ordenador. Las familias sin chollos activos van al final y apagadas. */
.catwrap{position:relative;margin-bottom:8px}
#cats.chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth;margin-bottom:0;padding:4px 2px 8px;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
#cats.chips::-webkit-scrollbar{display:none}
.catwrap.l #cats{--fl:56px}.catwrap.r #cats{--fr:56px}
#cats .btn.empty{opacity:.5;filter:grayscale(.6);box-shadow:none}
#cats .btn.empty:hover,#cats .btn.empty.hov{opacity:.85;filter:none}
.catar{position:absolute;top:50%;margin-top:-22px;z-index:2;width:36px;height:36px;padding:0;border-radius:50%;display:none;align-items:center;justify-content:center;border:1px solid rgba(227,154,38,.45);background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#7a4f00;box-shadow:0 4px 14px rgba(120,70,0,.2);cursor:pointer;transition:transform .15s,box-shadow .15s}
.catar svg{width:18px;height:18px;display:block}
.catar.pl{left:-6px}.catar.pr{right:-6px}
.catwrap.l .catar.pl,.catwrap.r .catar.pr{display:flex}
@media (hover:hover){.catar:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,214,110,.4),0 6px 16px rgba(120,70,0,.25)}}
:root[data-theme="dark"] .catar{background:rgba(40,32,24,.85);color:#ffd66e;border-color:rgba(247,194,70,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .catar{background:rgba(40,32,24,.85);color:#ffd66e;border-color:rgba(247,194,70,.35)}}
@media (max-width:560px){
 .catar{display:none!important}
 .catwrap.r #cats{--fr:44px}.catwrap.l #cats{--fl:24px}
 #cats .btn{padding:3px 11px 3px 4px;gap:6px;font-size:.8rem;min-height:0}
 #cats .btn .ce{width:21px;height:21px;font-size:.75rem}
}
/* Desplegables de las familias: van en una capa fija fuera de la fila (la fila desliza y los recortaría) */
#chpop .chmenu{position:fixed;z-index:200}
#chpop .chmenu.show{display:block}

/* Campana de alertas en la cabecera (junto al perfil). En la portada no sale: el banner ya trae su cuadro de alertas */
#hbellw{position:relative;display:inline-flex}
body:has(.hero) #hbellw{display:none}
#hbellbtn{width:38px;height:38px;padding:0!important;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7fe3d6,#0f9f8f);border:2px solid #fff;box-shadow:0 3px 10px rgba(15,159,143,.4);transition:transform .2s,box-shadow .2s}
#hbellbtn svg{width:19px;height:19px;transform-origin:50% 15%}
@media (hover:hover){#hbellbtn:hover{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(127,227,214,.45),0 6px 16px rgba(15,159,143,.45)}
#hbellbtn:hover svg{animation:bellring .7s ease-in-out}}
#hbellbtn[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(127,227,214,.55),0 6px 16px rgba(15,159,143,.45)}
@keyframes bellring{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-13deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
#bellpop{position:absolute;right:-6px;top:calc(100% + 10px);z-index:60;width:min(360px,calc(100vw - 24px));padding:4px;border-radius:20px;background:linear-gradient(135deg,rgba(20,33,61,.96),rgba(32,44,70,.94));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(20,20,40,.35)}
#bellpop.hide{display:none}
#bellpop::before{content:"";position:absolute;right:18px;top:-7px;width:12px;height:12px;background:#17243f;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);transform:rotate(45deg)}
#bellpop .halert{flex:none;width:auto;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
#bellpop .halert small{display:block}
@media (max-width:560px){
 #hbellw{grid-area:t;justify-self:end;align-self:start;z-index:3;margin-right:46px}
 #bellpop{right:-46px}
 #bellpop::before{right:64px}
}

/* Familias: con ratón, mano para arrastrar la fila (solo cuando hay más por ver); al arrastrar, mano cerrada */
@media (hover:hover) and (pointer:fine){
.catwrap:is(.l,.r) #cats,.catwrap:is(.l,.r) #cats .btn{cursor:grab}
#cats.drag,#cats.drag .btn{cursor:grabbing;user-select:none}
#cats.drag .btn{pointer-events:none}}

/* Perfil público: botón de compartir en la esquina superior derecha, sobre la portada */
.uprof{position:relative}
.ushare{position:absolute;top:12px;right:12px;z-index:2;width:42px;height:42px;min-width:0;padding:0;border-radius:50%;display:grid;place-items:center;color:#7a4a00;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(120,70,0,.22);cursor:pointer;transition:transform .15s,background .15s,color .15s}
.ushare svg{width:20px;height:20px}
.ushare:hover{transform:scale(1.07);background:linear-gradient(135deg,#ffc94a,#f2a31b);color:#3a2900}
.ushare:active{transform:scale(.95)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ushare{background:rgba(30,26,20,.82);border-color:rgba(255,255,255,.12);color:#ffcf6b}}
:root[data-theme="dark"] .ushare{background:rgba(30,26,20,.82);border-color:rgba(255,255,255,.12);color:#ffcf6b}
@media (max-width:600px){.ushare{top:10px;right:10px;width:38px;height:38px}}

/* ---------- Mensajes directos: menú del mensaje, reacciones y responder citando ---------- */
.dmmore{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;min-width:0;margin:0;padding:0;border:0;border-radius:11px;background:none;color:var(--mu);box-shadow:none;cursor:pointer}
.dmmore svg{width:16px;height:16px}
.dmmore:hover{background:rgba(120,100,60,.12);color:var(--tx)}
.dmm.me .dmt{flex-direction:row-reverse}
/* En el móvil, mantener pulsado abre el menú: sin selección de texto ni el menú del sistema sobre el globo */
@media (pointer:coarse){.dmb{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
.dmm .dmb{transition:transform .15s,box-shadow .15s}
.dmm.sel .dmb{transform:scale(1.02);box-shadow:0 0 0 2px rgba(227,154,38,.55),0 8px 22px rgba(120,70,0,.18)}
.dmm.flash .dmb{animation:dmflash 1.5s ease}
@keyframes dmflash{0%,40%{box-shadow:0 0 0 3px rgba(227,154,38,.8)}100%{box-shadow:0 0 0 3px rgba(227,154,38,0)}}

/* Cita del mensaje al que responde, dentro del globo */
.dmq{display:block;width:100%;min-width:0;margin:0 0 6px;padding:5px 9px;border:0;border-left:3px solid #e39a26;border-radius:8px;background:rgba(120,100,60,.1);color:inherit;font:inherit;font-size:.85rem;line-height:1.35;text-align:left;white-space:normal;box-shadow:none;cursor:pointer}
.dmq b{display:block;font-size:.8rem;color:#b06d00}
.dmq span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.85}
.dmq img.emo{width:18px!important;height:18px!important;vertical-align:-4px}
.dmm.me .dmq{background:rgba(255,255,255,.12);border-left-color:#f5bd3c}
.dmm.me .dmq b{color:#ffcf6b}

/* Reacciones debajo del globo */
.dmrx{display:flex;flex-wrap:wrap;gap:4px;margin-top:-6px;padding:0 8px;position:relative;z-index:1}
.dmrx:empty{display:none}
.dmrp{display:inline-flex;align-items:center;gap:3px;min-width:0;height:26px;margin:0;padding:0 7px;border:1px solid var(--bd);border-radius:13px;background:var(--card);color:var(--tx);font-size:.78rem;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer}
.dmrp img{width:18px;height:18px}
.dmrp.on{border-color:#e39a26;background:#fff4dc}
.dmrp.pop{animation:dmpop .4s ease}
@keyframes dmpop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Menú flotante */
.dmctx{position:fixed;z-index:70;width:max-content;max-width:calc(100vw - 16px);padding:8px;border-radius:18px;background:var(--card);border:1px solid var(--bd);box-shadow:0 14px 40px rgba(60,35,0,.25);animation:dmctxin .14s ease-out}
@keyframes dmctxin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.dmrq{display:flex;align-items:center;gap:2px;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--bd)}
.dmrq button,.dmrall button{display:flex;align-items:center;justify-content:center;width:42px;height:42px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;cursor:pointer;transition:transform .12s,background .12s}
.dmrq img{width:30px;height:30px}
.dmrq button:hover,.dmrall button:hover{transform:scale(1.18);background:rgba(227,154,38,.14)}
.dmrq button.on,.dmrall button.on{background:rgba(227,154,38,.28)}
.dmrq .dmrmore{width:36px;height:36px;margin-left:4px;color:var(--mu);background:rgba(120,100,60,.1)}
.dmrq .dmrmore svg{width:18px;height:18px}
.dmrq .dmrmore.on{color:#3a2900;background:linear-gradient(135deg,#ffc94a,#f2a31b)}
.dmrall{display:grid;grid-template-columns:repeat(7,40px);gap:2px;max-height:220px;overflow-y:auto;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--bd)}
.dmrall[hidden]{display:none}
.dmrall button{width:40px;height:40px}
.dmrall img{width:28px;height:28px}
.dmcl button{display:flex;align-items:center;gap:10px;width:100%;min-width:0;margin:0;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--tx);font:inherit;font-weight:600;text-align:left;box-shadow:none;cursor:pointer}
.dmcl button:hover,.dmcl button:focus-visible{background:rgba(120,100,60,.1)}
.dmcl svg{width:18px;height:18px;flex:none;color:#b06d00}
.dmcl .dng,.dmcl .dng svg{color:#c0392b}

/* Barra «Respondiendo a…» encima de la caja de escribir */
.dmform:has(.dmrep){flex-wrap:wrap}
.dmrep{flex:1 0 100%;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 6px 6px 10px;border-left:3px solid #e39a26;border-radius:10px;background:rgba(255,255,255,.55)}
.dmrw{flex:1;min-width:0;font-size:.85rem;line-height:1.3}
.dmrw b{display:block;font-size:.78rem;color:#b06d00}
.dmrs{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.dmrs br{display:none}
.dmrs img.emo{width:18px!important;height:18px!important;vertical-align:-4px}
.dmform .dmrepx{flex:none;width:30px;height:30px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:rgba(120,100,60,.12);color:var(--tx);font-size:1.2rem;line-height:1;box-shadow:none;cursor:pointer}

/* Modo oscuro */
:root[data-theme="dark"] .dmctx{box-shadow:0 14px 40px rgba(0,0,0,.55)}
:root[data-theme="dark"] .dmrp.on{background:rgba(247,180,60,.22)}
:root[data-theme="dark"] .dmq{background:rgba(255,255,255,.07)}
:root[data-theme="dark"] .dmm.me .dmq{background:rgba(0,0,0,.12);border-left-color:#7a4a00}
:root[data-theme="dark"] .dmm.me .dmq b{color:#5a3600}
:root[data-theme="dark"] .dmq b,:root[data-theme="dark"] .dmrw b,:root[data-theme="dark"] .dmcl svg{color:#ffcf6b}
:root[data-theme="dark"] .dmrep{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .dmcl .dng,:root[data-theme="dark"] .dmcl .dng svg{color:#ff7b6b}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dmctx{box-shadow:0 14px 40px rgba(0,0,0,.55)}
  :root:not([data-theme="light"]) .dmrp.on{background:rgba(247,180,60,.22)}
  :root:not([data-theme="light"]) .dmq{background:rgba(255,255,255,.07)}
  :root:not([data-theme="light"]) .dmm.me .dmq{background:rgba(0,0,0,.12);border-left-color:#7a4a00}
  :root:not([data-theme="light"]) .dmm.me .dmq b{color:#5a3600}
  :root:not([data-theme="light"]) .dmq b,:root:not([data-theme="light"]) .dmrw b,:root:not([data-theme="light"]) .dmcl svg{color:#ffcf6b}
  :root:not([data-theme="light"]) .dmrep{background:rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .dmcl .dng,:root:not([data-theme="light"]) .dmcl .dng svg{color:#ff7b6b}
}
.dmform:has(.dmrep) .rte,.dmform:has(.dmrep) textarea{flex:1 1 0;width:auto;min-width:0}
.dmrs a{color:inherit!important;text-decoration:none;pointer-events:none}
.dmrs .dlink{display:inline;padding:0;border:0;background:none;box-shadow:none;font-weight:600}
.dmrs .dlink img{width:16px;height:16px;vertical-align:-3px}

/* Móvil: deslizar un mensaje a la izquierda para responder (la flecha aparece a su derecha) */
.dmm{position:relative}
@media (pointer:coarse){.dmm{touch-action:pan-y}}
.dmswi{position:absolute;width:34px;height:34px;margin-top:-17px;border-radius:50%;display:grid;place-items:center;color:#7a4a00;background:rgba(227,154,38,.2);opacity:0;transition:background .15s,color .15s;pointer-events:none}
.dmswi svg{width:18px;height:18px}
.dmswi.ok{color:#3a2900;background:linear-gradient(135deg,#ffc94a,#f2a31b)}
:root[data-theme="dark"] .dmswi:not(.ok){color:#ffcf6b;background:rgba(247,180,60,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmswi:not(.ok){color:#ffcf6b;background:rgba(247,180,60,.2)}}
.dmlist{overflow-x:hidden}

/* Reacciones en modo oscuro: pastilla más clara que el fondo, borde visible y un aro del color del fondo para separarla del globo */
.dmrp{box-shadow:0 0 0 2px var(--bg),0 2px 6px rgba(0,0,0,.08)}
:root[data-theme="dark"] .dmrp{background:#3d3329;border-color:rgba(255,255,255,.2);color:#f5eee4;box-shadow:0 0 0 2px var(--bg)}
:root[data-theme="dark"] .dmrp.on{background:#5a4220;border-color:#f5bd3c;color:#ffd77a}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dmrp{background:#3d3329;border-color:rgba(255,255,255,.2);color:#f5eee4;box-shadow:0 0 0 2px var(--bg)}
  :root:not([data-theme="light"]) .dmrp.on{background:#5a4220;border-color:#f5bd3c;color:#ffd77a}
}

/* Emojis normales (Noto) dentro del texto: del tamaño de la letra, como un emoji de teclado (los del zorro son pegatinas grandes);
   si el texto es solo emojis, se ven grandes */
img.emo.noto,.rte img.emo.noto,.dmb img.emo.noto{width:1.35em;height:1.35em;vertical-align:-.28em;margin:0 1px;cursor:default}
img.emo.noto.solo,.dmm.solo .dmb img.emo.noto{width:52px;height:52px;vertical-align:middle}
/* Selector al escribir: los normales, más pequeños y en más columnas que los del zorro */
.emg.emn{grid-template-columns:repeat(7,1fr)}
#emp .emn img{max-width:34px;padding:3px}
/* Menú de reacciones: títulos de las secciones «Zorro» y «Emojis» */
.dmrs2{grid-column:1/-1;margin:4px 4px 2px;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.dmrq img[src*="/z"],.dmrall img[src*="/z"],.dmrp img[src*="/z"]{transform:scale(1.15)}

/* Vídeos de YouTube en los mensajes directos: dentro del globo, a todo su ancho */
.dmb .vidw{width:min(340px,62vw);max-width:100%;margin-top:6px;white-space:normal}
.dmb .vidw:first-child{margin-top:0}
.dmb .vid{border-radius:10px}
.dmb .vlk{display:inline-block;margin-top:4px;font-size:.75rem;color:inherit;opacity:.75}
.dmb .dmv{white-space:normal}
.dmb .dmv:first-child .vidw,.dmq+.dmv .vidw{margin-top:0}

/* Vídeos en los comentarios: el globo se ajusta a su contenido, así que el vídeo necesita un ancho propio */
.cbody .vidw{width:min(420px,calc(100vw - 110px));max-width:100%;white-space:normal}
/* Vista previa de la lista de chats: emojis centrados con el texto */
.dmprev img.emo.emo{vertical-align:middle;margin-top:-2px}

/* Campana de alertas también en la barra fija (abre el mismo cuadro, que app.js trae aquí) */
.hbw{position:relative;display:inline-flex;flex:0 0 auto}
#hbar .hb.hbell{width:34px;padding:0!important;color:#fff;background:linear-gradient(135deg,#7fe3d6,#0f9f8f);border-color:#fff;box-shadow:0 3px 10px rgba(15,159,143,.4)}
#hbar .hbell svg{width:18px;height:18px;transform-origin:50% 15%}
#hbar .hbell[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(127,227,214,.55),0 6px 16px rgba(15,159,143,.45)}
@media (hover:hover){#hbar .hb.hbell:hover{background:linear-gradient(135deg,#7fe3d6,#0f9f8f);box-shadow:0 0 0 3px rgba(127,227,214,.45),0 6px 16px rgba(15,159,143,.45)}
#hbar .hbell:hover svg{animation:bellring .7s ease-in-out}}
.hbw #bellpop{top:calc(100% + 12px)}
@media (max-width:560px){
 #hbar .hbw{grid-column:1;grid-row:1;justify-self:start;margin-left:80px}
 #hbar .hlg{width:clamp(80px,calc(100vw - 290px),166px)}
 .hbw #bellpop{right:auto;left:-76px}
 .hbw #bellpop::before{right:auto;left:87px}
}

/* Tarjeta «Alertas» intercalada en la lista cada 20 chollos: mismo formato que un chollo, con el zorro de la campana */
.dalert{display:flex;align-items:center;gap:6px;padding:0;overflow:hidden;background:radial-gradient(circle at 0 50%,rgba(127,227,214,.32),rgba(127,227,214,0) 55%),var(--card)}
.dalert>.img{flex:none;display:flex;align-items:center;justify-content:center;width:240px;height:auto;min-height:150px;align-self:stretch;margin:10px;border-radius:16px;background:linear-gradient(135deg,rgba(127,227,214,.28),rgba(15,159,143,.14))}
.dalert>.img img{width:96px;height:96px;filter:drop-shadow(0 8px 14px rgba(15,110,100,.25));animation:emzf 3.2s ease-in-out infinite}
.dalert .info{flex:1;min-width:0;padding:14px 16px 14px 6px}
.dalert .datag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:999px;font-size:.75rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#7fe3d6,#0f9f8f);box-shadow:0 2px 8px rgba(15,159,143,.35)}
.dalert .datag svg{width:14px;height:14px}
.dalert h3{margin:8px 0 4px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:1.16rem;line-height:1.28}
.dalert h3 label{cursor:pointer}
.dalert .desc{display:block;-webkit-line-clamp:unset;overflow:visible;max-height:none;margin:0 0 10px;color:var(--mu);font-size:.9rem}
.dalert .halert{flex:none;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:460px}
.dalert .halert .hrow{border:1px solid rgba(15,159,143,.35);box-shadow:0 3px 12px rgba(15,159,143,.12)}
.dalert .halert small{color:var(--mu)}
.dalert .halert small a{color:inherit}
@media (max-width:560px){
 .dalert{flex-direction:column;align-items:stretch;gap:0}
 .dalert>.img{width:auto;height:120px;margin:10px 10px 0}
 .dalert .info{padding:12px 14px 14px}
 .dalert h3{font-size:1.05rem}
}
.grid .dalert{flex-direction:column;align-items:stretch;gap:0;height:100%}
.grid .dalert>.img{width:auto;height:150px;margin:8px 8px 0}
.grid .dalert .info{padding:10px 12px 12px}
.grid .dalert h3{font-size:1.02rem}
.grid .dalert{grid-row:span 6;margin-bottom:14px;height:auto}
.grid .dalert .halert small{display:none}
.grid .dalert .halert .hrow{flex-direction:column;border-radius:16px}
.grid .dalert .halert input{padding:9px 12px}
.grid .dalert .halert button{padding:9px 15px}
.grid .dalert .info{display:flex;flex-direction:column;flex:1}.grid .dalert .halert{margin-top:auto;max-width:none}
/* Tarjeta «Alertas»: el verde se difumina hacia el texto (sin borde) y el zorro, más grande */
.dalert{background:var(--card)}
.dalert>.img{margin:0;border-radius:0;box-shadow:none;border:0;background:linear-gradient(90deg,rgba(127,227,214,.42),rgba(127,227,214,.2) 55%,rgba(127,227,214,0))}
.dalert>.img img{width:140px;height:140px}
@media (max-width:560px){.dalert>.img{height:160px;margin:0;background:linear-gradient(180deg,rgba(127,227,214,.42),rgba(127,227,214,.2) 55%,rgba(127,227,214,0))}.dalert>.img img{width:130px;height:130px}}
.grid .dalert>.img{height:170px;margin:0;background:linear-gradient(180deg,rgba(127,227,214,.42),rgba(127,227,214,.2) 55%,rgba(127,227,214,0))}
.grid .dalert>.img img{width:130px;height:130px}
/* …y otro difuminado verde en el lado derecho de la tarjeta (abajo, en la cuadrícula y en el móvil) */
.dalert{background:linear-gradient(270deg,rgba(127,227,214,.38),rgba(127,227,214,.14) 22%,rgba(127,227,214,0) 45%),var(--card)}
@media (max-width:560px){.dalert{background:linear-gradient(0deg,rgba(127,227,214,.38),rgba(127,227,214,.14) 25%,rgba(127,227,214,0) 50%),var(--card)}}
.grid .dalert{background:linear-gradient(0deg,rgba(127,227,214,.38),rgba(127,227,214,.14) 25%,rgba(127,227,214,0) 50%),var(--card)}
/* Sin verde detrás del zorro: solo el difuminado del lado derecho (abajo, en la cuadrícula y en el móvil) */
.dalert>.img,.grid .dalert>.img{background:none}
@media (max-width:560px){.dalert>.img{background:none}}
/* Móvil (lista): tarjeta «Alertas» más baja, con el zorro pegado a la etiqueta */
@media (max-width:560px){#list:not(.grid) .dalert>.img{height:auto;min-height:0;padding:10px 0 0}#list:not(.grid) .dalert>.img img{width:104px;height:104px}#list:not(.grid) .dalert .info{padding-top:2px}}

/* Cabecera de familia (como la de tienda): emoji en el cuadro dorado, ruta si es subfamilia y accesos a sus subfamilias */
.famc{flex-wrap:wrap}
.famei{display:flex;align-items:center;justify-content:center;font-size:1.9rem;line-height:1;background:linear-gradient(135deg,#ffe7a8,#f6b73c)}
.famc .bc{margin:0 0 2px;font-size:.8rem}
.famsubs{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid rgba(227,154,38,.2)}
.famsubs .btn{gap:6px}
.famsubs .btn b{min-width:20px;padding:1px 6px;border-radius:999px;font-size:.72rem;text-align:center;background:rgba(247,194,70,.3);color:var(--act)}
@media (max-width:600px){.famei{font-size:1.6rem}.famsubs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:12px 16px 2px}.famsubs::-webkit-scrollbar{display:none}.famsubs .btn{flex:none}}

/* Carrusel de la ficha: pista deslizable con puntos */
.car .ctrk{display:flex;align-self:stretch;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:inherit}
.car .ctrk::-webkit-scrollbar{display:none}
.car .ctrk img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;scroll-snap-stop:always}
.car.zoomed .ctrk{overflow-x:hidden}
.car:has(.fsbtn) .ctrk img{cursor:zoom-in}
.car .cdots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:7px;padding:5px 8px;border-radius:10px;background:rgba(15,23,42,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.car .cdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .2s,transform .2s}
.car .cdots i.on{background:#fff;transform:scale(1.25)}
/* Visor: la foto se puede ampliar y arrastrar */
#fsv{touch-action:none;overflow:hidden;overscroll-behavior:contain}
#fsv .fstrk{position:absolute;inset:0}
#fsv .fstrk img{position:absolute;top:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform-origin:50% 50%;-webkit-user-drag:none;-webkit-touch-callout:none}
#fsv .fstrk img[hidden]{display:none}
#fsv.zoomed .fstrk img{cursor:grab}
#fsv.zoomed .fsa{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){#fsv:not(.zoomed) .fstrk img{cursor:zoom-in}}

/* ---- Escritorio: conversación a pantalla completa (body.dmfull, app.js), centrada y con la página oscurecida detrás ----
   Sin desenfoque (backdrop-filter): a pantalla completa, el navegador lo recalculaba en cada tecla y escribir iba con retraso */
@media (min-width:561px){
body.dmfull{overflow:hidden}
body.dmfull::before{content:"";position:fixed;inset:0;z-index:49;background:rgba(45,28,6,.62)}
body.dmfull .dmthread{position:fixed;top:16px;bottom:16px;left:0;right:0;z-index:50;width:min(860px,calc(100% - 32px));margin:0 auto;display:flex;flex-direction:column;background:var(--bg);box-shadow:0 24px 70px rgba(60,35,0,.3)}
body.dmfull .dmlist{flex:1;min-height:0;max-height:none;overscroll-behavior:contain}
:root[data-theme="dark"] body.dmfull::before{background:rgba(0,0,0,.68)}
}
@media (min-width:561px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.dmfull::before{background:rgba(0,0,0,.68)}}
/* Botón «↓» / «N mensajes nuevos» encima de la caja de escribir */
.dmjump{position:absolute;right:18px;bottom:calc(var(--fth,72px) + 12px);z-index:6;display:flex;align-items:center;gap:6px;height:40px;min-width:40px;margin:0;padding:0 10px;border:1px solid rgba(227,154,38,.4);border-radius:20px;background:var(--card);color:var(--tx);font:800 .85rem/1 'Nunito',system-ui,sans-serif;box-shadow:0 6px 18px rgba(60,35,0,.22);cursor:pointer;animation:dmctxin .16s ease-out}
.dmjump[hidden]{display:none}
.dmjump svg{width:18px;height:18px;flex:none}
.dmjump.new{background:linear-gradient(180deg,#ffd36b,#f5a524);color:#1f1300;border-color:rgba(255,255,255,.6)}
.dmjn:empty{display:none}
/* Lupa y barra de búsqueda en la conversación */
.dmh{flex-wrap:wrap}
.dmsbtn{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:var(--tx);cursor:pointer}
.dmsbtn svg{width:18px;height:18px}
.dmsbtn.on{background:#14213d;color:#fff;box-shadow:none}
:root[data-theme="dark"] .dmsbtn:not(.on){background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmsbtn:not(.on){background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}}
.dmsrch{flex:1 0 100%;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:14px;background:var(--card);border:1px solid var(--bd)}
.dmsrch[hidden]{display:none}
.dmsrch>svg{width:16px;height:16px;flex:none;color:var(--mu)}
.dmsrch input{flex:1;min-width:0;margin:0;padding:6px 4px;border:0;background:none;box-shadow:none;outline:0;font-size:16px;color:var(--tx)}
.dmsrch input::-webkit-search-cancel-button{display:none}
.dmscnt{flex:none;font-size:.8rem;font-weight:700;color:var(--mu);white-space:nowrap}
.dmsrch.none .dmscnt{color:#c2410c}
.dmsrch button{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:rgba(120,100,60,.1);color:var(--tx);box-shadow:none;cursor:pointer;font-size:1.25rem;line-height:1}
.dmsrch button svg{width:16px;height:16px}
mark.dmhl{background:rgba(255,200,60,.45);color:inherit;border-radius:3px;padding:0 1px}
mark.dmhl.on{background:#ffb020;color:#1f1300;box-shadow:0 0 0 2px #ffb020}
.dmsrch input[type=search]{background:none;border:0;box-shadow:none}
/* Mensajes propios: en claro son azul marino (marca amarilla, más viva); en oscuro, naranjas (marca azul marino) */
.dmm.me mark.dmhl{background:rgba(255,200,60,.4);color:#fff}
.dmm.me mark.dmhl.on{background:#ffb020;color:#1f1300}
:root[data-theme="dark"] .dmm.me mark.dmhl{background:rgba(20,33,61,.22);color:inherit}
:root[data-theme="dark"] .dmm.me mark.dmhl.on{background:#14213d;color:#fff;box-shadow:0 0 0 2px #14213d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmm.me mark.dmhl{background:rgba(20,33,61,.22);color:inherit}
:root:not([data-theme="light"]) .dmm.me mark.dmhl.on{background:#14213d;color:#fff;box-shadow:0 0 0 2px #14213d}}

/* ---- Pantallas anchas: conversaciones a la izquierda y la abierta a la derecha (.dmwrap; en las estrechas, solo la conversación) ---- */
.dmwrap{display:contents}
.dmside{display:none}
@media (min-width:1000px){
body.dmfull .dmwrap{display:flex;position:fixed;top:16px;bottom:16px;left:0;right:0;z-index:50;width:min(1240px,calc(100% - 32px));margin:0 auto;border-radius:18px;overflow:hidden;background:var(--bg);border:1px solid var(--glass-bd);box-shadow:0 24px 70px rgba(60,35,0,.3)}
body.dmfull .dmwrap .dmthread{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:auto;flex:1;min-width:0;margin:0;border:0;border-left:1px solid var(--bd);border-radius:0;box-shadow:none}
body.dmfull .dmwrap .dmthread .dmh .dmback{display:none}
body.dmfull .dmside{display:flex;flex-direction:column;flex:0 0 340px;min-height:0}
}
.dmsh{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.dmsh b{font:900 1.25rem/1.2 'Nunito',system-ui,sans-serif;color:var(--tx)}
.dmside .dmback{background:rgba(120,100,60,.1)}
.dmsf{display:flex;align-items:center;gap:8px;margin:6px 16px 8px;padding:2px 12px;border-radius:12px;background:rgba(120,100,60,.08);color:var(--mu)}
.dmsf svg{width:16px;height:16px;flex:none}
.dmsf input[type=search]{flex:1;min-width:0;margin:0;padding:8px 0;border:0;background:none;box-shadow:none;outline:0;font-size:.95rem;color:var(--tx)}
.dmsl{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 8px 12px}
.dmsl .dmrow{display:flex;align-items:center;gap:12px;margin:2px 0;padding:10px;border:0;border-radius:14px;text-decoration:none}
.dmsl .dmrow[hidden]{display:none}
.dmsl .dmrow:hover{background:rgba(120,100,60,.07)}
.dmsl .dmrow.cur{background:linear-gradient(120deg,rgba(255,214,110,.55),rgba(255,190,120,.35))}
:root[data-theme="dark"] .dmsl .dmrow.cur{background:linear-gradient(120deg,rgba(247,180,60,.26),rgba(150,90,200,.18))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmsl .dmrow.cur{background:linear-gradient(120deg,rgba(247,180,60,.26),rgba(150,90,200,.18))}}
.dmsl .dmprev{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmsl .fwho{flex:1;min-width:0}
.dmsnone{margin:14px;text-align:center}
/* Conversación con mensajes nuevos en la columna: destello suave al llegar */
.dmsl .dmrow.flash{animation:dmflash 1.6s ease-out}
@keyframes dmflash{0%,30%{background:rgba(255,190,60,.45)}100%{background:transparent}}

/* ==== Chat: columna de conversaciones de otro color, botones que se iluminan y animaciones ==== */
@media (min-width:1000px){
body.dmfull .dmside{background:linear-gradient(165deg,#fff4d9 0%,#ffe4bd 50%,#ffd2a3 100%)}
:root[data-theme="dark"] body.dmfull .dmside{background:linear-gradient(165deg,#2b2038 0%,#231a15 55%,#33230f 100%)}
}
@media (min-width:1000px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.dmfull .dmside{background:linear-gradient(165deg,#2b2038 0%,#231a15 55%,#33230f 100%)}}
.dmsh b{background:linear-gradient(90deg,#c2410c,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .dmsh b{background-image:linear-gradient(90deg,#ffd36b,#ff9d4d)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmsh b{background-image:linear-gradient(90deg,#ffd36b,#ff9d4d)}}
.dmside .dmsf{background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(227,154,38,.25);transition:box-shadow .2s}
.dmside .dmsf:focus-within{box-shadow:inset 0 0 0 2px #f5a524,0 0 14px rgba(245,165,36,.35)}
:root[data-theme="dark"] .dmside .dmsf{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmside .dmsf{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}}
/* Filas: se deslizan al pasar el ratón; la abierta, tarjeta blanca con barra naranja */
.dmsl .dmrow{position:relative;transition:transform .2s cubic-bezier(.3,1.5,.5,1),background .2s,box-shadow .2s}
@media (hover:hover){.dmsl .dmrow:not(.cur):hover{transform:translateX(4px);background:rgba(255,255,255,.55);box-shadow:0 4px 14px rgba(170,90,0,.12)}}
.dmsl .dmrow.cur{background:linear-gradient(120deg,#ffd36b,#f5a524);box-shadow:0 6px 18px rgba(200,120,0,.3)}
.dmsl .dmrow.cur b{color:#2a1700}.dmsl .dmrow.cur .dmprev{color:#5a3a00}
.dmsl .dmrow.cur .av{box-shadow:0 0 0 2px #fff,0 0 0 4px #c2410c!important}
:root[data-theme="dark"] .dmsl .dmrow.cur{background:rgba(255,255,255,.09);box-shadow:inset 4px 0 0 #ffb020,0 0 18px rgba(255,170,40,.15)}
:root[data-theme="dark"] .dmsl .dmrow:not(.cur):hover{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmsl .dmrow.cur{background:rgba(255,255,255,.09);box-shadow:inset 4px 0 0 #ffb020,0 0 18px rgba(255,170,40,.15)}
:root:not([data-theme="light"]) .dmsl .dmrow:not(.cur):hover{background:rgba(255,255,255,.06)}}
.dmsl .dmrow .av{transition:box-shadow .2s}
.dmsl .dmrow.cur .av,.dmsl .dmrow:hover .av{box-shadow:0 0 0 2px #fff,0 0 0 4px #f5a524}
/* Al abrir, las filas entran escalonadas (no al repintarse por un mensaje nuevo) */
.dmsl:not(.upd) .dmrow{animation:dmrowin .4s cubic-bezier(.2,1.2,.4,1) both}
.dmsl:not(.upd) .dmrow:nth-child(2){animation-delay:.04s}.dmsl:not(.upd) .dmrow:nth-child(3){animation-delay:.08s}
.dmsl:not(.upd) .dmrow:nth-child(4){animation-delay:.12s}.dmsl:not(.upd) .dmrow:nth-child(5){animation-delay:.16s}
.dmsl:not(.upd) .dmrow:nth-child(6){animation-delay:.2s}.dmsl:not(.upd) .dmrow:nth-child(n+7){animation-delay:.24s}
@keyframes dmrowin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* No leídos: el número late suavemente */
.dmsl .dmcnt{animation:dmbeat 2.2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(239,68,68,.5)}
@keyframes dmbeat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{transform:scale(1.12);box-shadow:0 0 0 6px rgba(239,68,68,0)}}
/* Botones redondos del chat: se iluminan y crecen un poco al pasar el ratón; se hunden al pulsar */
.dmthread .dmback,.dmside .dmback,.dmsbtn,.dmmenu>summary,.dmsrch button,.dmform .emb,.dmjump{transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s,color .2s}
@media (hover:hover){
.dmthread .dmback:hover,.dmside .dmback:hover,.dmsbtn:not(.on):hover,.dmthread .dmmenu>summary:hover,.dmsrch button:hover,.dmform .emb:hover,.dmjump:hover{transform:scale(1.1);background:#fff6df;color:#b45309;box-shadow:0 0 0 2px rgba(255,190,70,.7),0 0 18px rgba(255,165,30,.55)}
:root[data-theme="dark"] :is(.dmthread .dmback,.dmside .dmback,.dmsbtn:not(.on),.dmthread .dmmenu>summary,.dmsrch button,.dmform .emb,.dmjump):hover{background:rgba(255,190,70,.2);color:#ffd36b;box-shadow:0 0 0 2px rgba(255,190,70,.5),0 0 20px rgba(255,165,30,.45)}
}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.dmthread .dmback,.dmside .dmback,.dmsbtn:not(.on),.dmthread .dmmenu>summary,.dmsrch button,.dmform .emb,.dmjump):hover{background:rgba(255,190,70,.2);color:#ffd36b;box-shadow:0 0 0 2px rgba(255,190,70,.5),0 0 20px rgba(255,165,30,.45)}}
:is(.dmthread .dmback,.dmside .dmback,.dmsbtn,.dmmenu>summary,.dmsrch button,.dmform .emb,.dmjump):active{transform:scale(.9)}
.dmsbtn.on{box-shadow:0 0 0 2px rgba(255,190,70,.6),0 0 14px rgba(255,165,30,.45)}
.dmjump.new{animation:dmctxin .16s ease-out,dmglow 1.8s ease-in-out .2s infinite}
@keyframes dmglow{0%,100%{box-shadow:0 6px 18px rgba(60,35,0,.22)}50%{box-shadow:0 0 0 3px rgba(255,200,90,.5),0 0 22px rgba(255,165,30,.7)}}
/* Enviar: con texto escrito, el botón respira con un brillo; al enviar, la flecha sale volando y vuelve */
.dmform:has(textarea:valid) .dmsend{animation:dmready 1.8s ease-in-out infinite}
@keyframes dmready{0%,100%{filter:none}50%{filter:drop-shadow(0 0 8px rgba(255,170,30,.85)) brightness(1.06)}}
.dmsend.go svg{animation:dmfly .55s ease-in-out}
@keyframes dmfly{0%{transform:none;opacity:1}45%{transform:translateX(18px) rotate(-12deg);opacity:0}55%{transform:translateX(-18px);opacity:0}100%{transform:none;opacity:1}}
/* La caja de escribir brilla al tener el foco */
.dmform .rte,.dmform textarea{transition:box-shadow .2s,border-color .2s}
.dmform .rte:focus,.dmform textarea:focus{border-color:#f5a524;box-shadow:0 0 0 3px rgba(245,165,36,.25),0 0 16px rgba(245,165,36,.25)}
/* Avatar de la cabecera con aro naranja */
.dmthread .dmh .av{box-shadow:0 0 0 2px #fff,0 0 0 4px #f5a524}
/* Mensajes que llegan o se envían: aparecen con un pequeño salto desde su lado */
/* (con un pequeño retraso, para que el salto se vea cuando la conversación ya ha bajado hasta el mensaje) */
.dmm.in{animation:dmminl .55s cubic-bezier(.2,1.45,.4,1) .2s both;transform-origin:bottom left}
.dmm.me.in{animation-name:dmminr;transform-origin:bottom right}
@keyframes dmminl{from{opacity:0;transform:translate(-36px,18px) scale(.7)}to{opacity:1;transform:none}}
@keyframes dmminr{from{opacity:0;transform:translate(36px,18px) scale(.7)}to{opacity:1;transform:none}}
/* El globo de un mensaje recibido se ilumina un momento al llegar */
.dmm.in:not(.me) .dmb{animation:dmbglow 1.6s ease-out .45s}
@keyframes dmbglow{0%{box-shadow:0 0 0 0 rgba(255,176,32,0)}25%{box-shadow:0 0 0 3px rgba(255,176,32,.55),0 0 22px rgba(255,165,30,.5)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}

/* ==== Chat: fondo, fechas, mensajes agrupados, «Visto», tarjeta de chollo, fijadas y borradores ==== */
/* Fondo del chat: degradado cálido con dos luces suaves (amarilla arriba, melocotón abajo) */
.dmthread .dmlist{background:radial-gradient(circle at 15% 10%,rgba(255,214,110,.35),transparent 45%),radial-gradient(circle at 90% 85%,rgba(255,170,120,.3),transparent 50%),linear-gradient(180deg,#fffaf0,#fff3e2);background-attachment:scroll}
:root[data-theme="dark"] .dmthread .dmlist{background:radial-gradient(circle at 15% 10%,rgba(247,180,60,.12),transparent 45%),radial-gradient(circle at 90% 85%,rgba(150,90,200,.12),transparent 50%),linear-gradient(180deg,#17130e,#1b140f);background-attachment:scroll}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmthread .dmlist{background:radial-gradient(circle at 15% 10%,rgba(247,180,60,.12),transparent 45%),radial-gradient(circle at 90% 85%,rgba(150,90,200,.12),transparent 50%),linear-gradient(180deg,#17130e,#1b140f);background-attachment:scroll}}
/* Fecha: pastilla centrada al empezar cada día */
.dmday{align-self:center;margin:6px 0 2px;pointer-events:none}
/* La fecha se pulsa: abre el calendario de la conversación (app.js) */
.dmdayb{pointer-events:auto;display:inline-block;min-width:0;margin:0;padding:0;border:0;border-radius:12px;background:none;box-shadow:none;color:inherit;font:inherit;line-height:inherit;cursor:pointer}
.dmdayb span{transition:border-color .15s,transform .15s}
.dmdayb:hover span{border-color:rgba(227,154,38,.75)}
.dmdayb:active span{transform:scale(.96)}
.dmday.flash span{animation:dmflash 1.5s ease}
.dmcal{position:fixed;z-index:70;width:292px;max-width:calc(100vw - 16px);padding:10px 10px 8px;border-radius:18px;background:var(--card);border:1px solid var(--bd);box-shadow:0 14px 40px rgba(60,35,0,.25);-webkit-user-select:none;user-select:none;animation:dmctxin .14s ease-out}
.dmch{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.dmch b{font-weight:800;font-size:.95rem}
.dmch button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:rgba(120,100,60,.1);box-shadow:none;color:var(--tx);cursor:pointer}
.dmch button svg{width:18px;height:18px}
.dmch button:hover:not(:disabled){background:rgba(227,154,38,.25)}
.dmch button:disabled{opacity:.3;cursor:default}
.dmcg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.dmcg i{font-style:normal;font-size:.7rem;font-weight:800;color:var(--mu);padding:2px 0 4px}
.dmcg span,.dmcg button{display:flex;align-items:center;justify-content:center;height:34px;border-radius:10px;font-size:.85rem}
.dmcg span{color:var(--mu);opacity:.6}
.dmcg button{position:relative;min-width:0;margin:0;padding:0;border:0;background:rgba(242,163,27,.22);box-shadow:none;color:#8a5a12;font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.dmcg button::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.dmcg button:hover{background:rgba(242,163,27,.4)}
.dmcg button.cur{background:linear-gradient(135deg,#ffc94a,#f2a31b);color:#3a2900}
.dmcg .tod{box-shadow:inset 0 0 0 1.5px currentColor}
.dmcn{margin:8px 0 0;font-size:.72rem;color:var(--mu);text-align:center}
:root[data-theme="dark"] .dmcg button:not(.cur){color:#ffd27a}
:root[data-theme="dark"] .dmcal{box-shadow:0 14px 40px rgba(0,0,0,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmcg button:not(.cur){color:#ffd27a}:root:not([data-theme="light"]) .dmcal{box-shadow:0 14px 40px rgba(0,0,0,.55)}}
.dmday span{display:inline-block;padding:4px 12px;border-radius:12px;background:rgba(255,248,230,.92);border:1px solid rgba(227,154,38,.3);box-shadow:0 2px 8px rgba(120,70,0,.1);font-size:.75rem;font-weight:800;color:#8a5a12;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root[data-theme="dark"] .dmday span{background:rgba(40,30,20,.9);border-color:rgba(255,200,90,.2);color:#ffd27a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmday span{background:rgba(40,30,20,.9);border-color:rgba(255,200,90,.2);color:#ffd27a}}
/* Mensajes seguidos de la misma persona: más juntos, esquinas unidas y la hora solo en el último (en los demás, al pasar el ratón) */
.dmm.cp{margin-top:-7px}
.dmm.cn:not(.me) .dmb{border-bottom-left-radius:6px}
.dmm.cp:not(.me) .dmb{border-top-left-radius:6px}
.dmm.me.cn .dmb{border-bottom-right-radius:6px}
.dmm.me.cp .dmb{border-top-right-radius:6px}
.dmm.cn>.dmt{position:absolute;top:50%;left:calc(100% + 8px);margin:0;transform:translateY(-50%);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.dmm.me.cn>.dmt{left:auto;right:calc(100% + 8px)}
.dmm.cn:hover>.dmt,.dmm.cn.sel>.dmt,.dmm.cn:focus-within>.dmt{opacity:1;pointer-events:auto}
/* «Enviado» / «Visto» */
/* ✓ / ✓✓ dentro de cada mensaje tuyo, abajo a la derecha (como en Telegram) */
/* El hueco va al final de la última línea (para no pisar el texto) y los ✓ se colocan en la esquina de abajo */
.dmm.me .dmb{position:relative}
.dmb .dmtk{display:inline-block;width:18px;height:12px;color:rgba(255,255,255,.5);line-height:1}
.dmb .dmtk svg{position:absolute;right:7px;bottom:5px;width:17px;height:17px}
.dmtk.on{color:#5eead4}
.dmt .dmtk{display:inline-flex;vertical-align:-4px;margin:0 0 0 4px;color:var(--mu)}.dmt .dmtk svg{width:16px;height:16px}.dmt .dmtk.on{color:#0f9f8f}
.dmtk.pop svg{animation:dmtkpop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes dmtkpop{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:none}}
:root[data-theme="dark"] .dmb .dmtk{color:rgba(29,20,5,.45)}:root[data-theme="dark"] .dmb .dmtk.on{color:#0b5f8a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmb .dmtk{color:rgba(29,20,5,.45)}:root:not([data-theme="light"]) .dmb .dmtk.on{color:#0b5f8a}}
/* Enlace a un chollo: mini tarjeta con foto, título, precio, temperatura y tienda */
.dmb a.dlink.own.dcard{display:flex;align-items:center;gap:10px;width:340px;max-width:100%;margin:4px 0;padding:8px;border-radius:14px;background:#fff;border:1px solid rgba(227,154,38,.35);color:#1f1300;text-decoration:none;white-space:normal;box-shadow:0 4px 14px rgba(120,70,0,.12);transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
@media (hover:hover){.dmb a.dlink.own.dcard:hover{transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,190,70,.6),0 8px 22px rgba(255,150,20,.3)}}
.dcard .dci{flex:none;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:10px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.dcard .dci img{width:100%;height:100%;object-fit:contain}
.dcard .dci .dcfox{width:44px;height:44px}
.dcard .dcb{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dcard .dct{font-size:.88rem;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcard .dcm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.8rem}
.dcard .dcpr{font-size:1rem;font-weight:900;background:linear-gradient(90deg,#e11d48,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
.dcard s{color:#8a7a60}
.dcard .temp{padding:1px 7px;border-radius:10px;font-weight:900;background:rgba(120,100,60,.1);color:#6b5a3a}
.dcard .temp.hot{background:rgba(249,115,22,.14);color:#e8590c}
.dcard .temp.cold{background:rgba(28,126,214,.12);color:#1c7ed6}
.dcard .dcs{color:#8a6a30;font-weight:700}
.dcard .dcx{padding:1px 7px;border-radius:8px;background:#64748b;color:#fff;font-size:.7rem;font-weight:800}
.dcard.gone .dci,.dcard.gone .dcpr{filter:grayscale(1);opacity:.7}
:root[data-theme="dark"] .dmm .dmb a.dlink.own.dcard{background:#2a2118;border-color:rgba(255,200,90,.25);color:#f5e9d6;box-shadow:0 4px 14px rgba(0,0,0,.35)}
:root[data-theme="dark"] .dcard s{color:#a8997f}:root[data-theme="dark"] .dcard .dcs{color:#e0b46a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmm .dmb a.dlink.own.dcard{background:#2a2118;border-color:rgba(255,200,90,.25);color:#f5e9d6;box-shadow:0 4px 14px rgba(0,0,0,.35)}
:root:not([data-theme="light"]) .dcard s{color:#a8997f}:root:not([data-theme="light"]) .dcard .dcs{color:#e0b46a}}
/* Conversación fijada (chincheta junto al nombre) y borrador sin enviar en las listas */
.dmpin{width:14px;height:14px;margin-left:6px;vertical-align:-2px;color:#f5a524;transform:rotate(35deg)}
.dmdraft{font-style:normal;font-weight:800;color:#c2410c}
:root[data-theme="dark"] .dmdraft{color:#ff9d4d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmdraft{color:#ff9d4d}}
/* En tus mensajes, las reacciones un poco más abajo para que no se junten con los ✓ */
.dmm.me .dmrx{margin-top:4px}
/* Modo claro: los mensajes recibidos, globo turquesa claro (el color de la campana y los ✓✓) para que destaquen sobre el fondo crema */
:root[data-theme="light"] .dmm:not(.me):not(.solo):not(.sel) .dmb{background:linear-gradient(135deg,#d9f4ef,#c6ece5);border:1px solid rgba(15,159,143,.28);box-shadow:0 2px 6px rgba(15,120,110,.12)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .dmm:not(.me):not(.solo):not(.sel) .dmb{background:linear-gradient(135deg,#d9f4ef,#c6ece5);border:1px solid rgba(15,159,143,.28);box-shadow:0 2px 6px rgba(15,120,110,.12)}}
/* Menú ⋯ del chat: las opciones de tema con iconos ámbar (los rojos son para bloquear y borrar) */
.dmpop .dmthm button svg{color:#e39a26}
.dmpop .dmthm{border-bottom:1px solid var(--bd);margin-bottom:4px;padding-bottom:4px}
/* Menú lateral abierto: la página de detrás queda quieta (sin saltos al desaparecer la barra de desplazamiento) */
html.menuopen{overflow:hidden;scrollbar-gutter:stable}
.dpanel{overscroll-behavior:contain}

/* ==== Botones de emojis (.emb) y de añadir foto (.imb) de toda la web: se iluminan y se animan, como en el chat ==== */
.emb,.imb{transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s,color .2s,border-color .2s}
@media (hover:hover){
.emb:hover,.imb:hover{transform:scale(1.1);border-color:rgba(255,190,70,.8);color:#b45309;box-shadow:0 0 0 2px rgba(255,190,70,.6),0 0 18px rgba(255,165,30,.5)}
.emb:hover{background:#fff6df}
.imb:not(.fsec .phadd .imb):hover{background:#fff6df}
.emb:hover img{animation:embwig .6s ease-in-out}
.imb:hover svg{animation:imbhop .55s cubic-bezier(.3,1.6,.5,1)}
:root[data-theme="dark"] :is(.emb,.imb:not(.fsec .phadd .imb)):hover{background:rgba(255,190,70,.18);color:#ffd36b;box-shadow:0 0 0 2px rgba(255,190,70,.45),0 0 20px rgba(255,165,30,.4)}
}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.emb,.imb:not(.fsec .phadd .imb)):hover{background:rgba(255,190,70,.18);color:#ffd36b;box-shadow:0 0 0 2px rgba(255,190,70,.45),0 0 20px rgba(255,165,30,.4)}}
/* Al pulsar (también en el móvil): se hunden y el icono da un saltito */
.emb:active,.imb:active{transform:scale(.88)}
.emb:active img{animation:embwig .45s ease-in-out}
.imb:active svg{animation:imbhop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes embwig{0%,100%{transform:none}20%{transform:rotate(-14deg) scale(1.12)}45%{transform:rotate(11deg) scale(1.12)}70%{transform:rotate(-6deg) scale(1.06)}}
@keyframes imbhop{0%,100%{transform:none}35%{transform:translateY(-4px) scale(1.15)}65%{transform:translateY(1px) scale(.95)}}

/* Modo oscuro: la conversación abierta, también en ámbar (algo más profundo) con texto oscuro y un halo, para que destaque */
:root[data-theme="dark"] .dmsl .dmrow.cur{background:linear-gradient(120deg,#f5bd3c,#e08a1e);box-shadow:0 0 0 1px rgba(255,210,120,.5),0 0 22px rgba(245,165,36,.35)}
:root[data-theme="dark"] .dmsl .dmrow.cur b{color:#2a1700}:root[data-theme="dark"] .dmsl .dmrow.cur .dmprev{color:#4a2e00}
:root[data-theme="dark"] .dmsl .dmrow.cur .av{box-shadow:0 0 0 2px #2a1700,0 0 0 4px #fff3d6!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dmsl .dmrow.cur{background:linear-gradient(120deg,#f5bd3c,#e08a1e);box-shadow:0 0 0 1px rgba(255,210,120,.5),0 0 22px rgba(245,165,36,.35)}
:root:not([data-theme="light"]) .dmsl .dmrow.cur b{color:#2a1700}:root:not([data-theme="light"]) .dmsl .dmrow.cur .dmprev{color:#4a2e00}
:root:not([data-theme="light"]) .dmsl .dmrow.cur .av{box-shadow:0 0 0 2px #2a1700,0 0 0 4px #fff3d6!important}}

/* Botón redondo de seguir junto al autor en las tarjetas (como el del perfil, en pequeño) */
button.cfol{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:6px;padding:0;border-radius:50%;vertical-align:middle;color:#fff;background:#14213d;border:1px solid #14213d;box-shadow:0 3px 8px rgba(20,33,61,.22);cursor:pointer;transition:transform .15s,color .15s,box-shadow .15s,border-color .15s}
button.cfol svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
button.cfol .cfk,button.cfol.on .cfp{display:none}
button.cfol.on .cfk{display:block}
button.cfol.on{color:#1d7a4f;background:transparent;border-color:var(--bd);box-shadow:none}
button.cfol.on.pop{animation:cfpop .35s ease-out}
button.cfol span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes cfpop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (hover:hover){button.cfol:not(.on):hover{transform:translateY(-1px);color:#ffd66e;box-shadow:0 0 0 3px rgba(255,214,110,.3),0 4px 10px rgba(20,33,61,.3)}
button.cfol.on:hover{color:#c0392b;border-color:#e0645c}}
button.cfol:active{transform:scale(.9)}
button.cfol:disabled{opacity:.6}
:root[data-theme="dark"] button.cfol:not(.on){border-color:rgba(240,194,92,.35)}
:root[data-theme="dark"] button.cfol.on{color:#6fdca5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button.cfol:not(.on){border-color:rgba(240,194,92,.35)}
:root:not([data-theme="light"]) button.cfol.on{color:#6fdca5}}

/* Perfil público: barra fija pequeña con «Seguir» al bajar hasta sus chollos */
.ubar{position:fixed;left:50%;top:54px;z-index:60;display:flex;align-items:center;gap:7px;max-width:calc(100% - 24px);padding:3px 3px 3px 4px;border-radius:999px;background:rgba(255,253,248,.88);-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(232,164,23,.35);box-shadow:0 8px 24px rgba(60,40,0,.16);transform:translate(-50%,-14px);opacity:0;visibility:hidden;transition:transform .25s,opacity .25s,visibility .25s}
.ubar.on{transform:translate(-50%,0);opacity:1;visibility:visible}
.ubar .ubav{width:24px;height:24px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #f0a92a}
.ubar .ubav .av,.ubar .ubav img{width:100%;height:100%;object-fit:cover;display:block}
.ubar .ubn{min-width:0;max-width:150px;font-size:.86rem;font-weight:800;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ubar button.ufol,.ubar button.ufol.on{width:auto;min-width:0;height:26px;padding:0 10px;border-radius:999px;font-size:.78rem;gap:4px;flex:none}
.ubar button.ufol:not(.on){box-shadow:0 3px 8px rgba(20,33,61,.22)}
.ubar button.ufol svg{width:14px;height:14px}
.ubar button.ufol span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
:root[data-theme="dark"] .ubar{background:rgba(30,26,22,.86);border-color:rgba(240,194,92,.3);box-shadow:0 8px 24px rgba(0,0,0,.45)}
:root[data-theme="dark"] .ubar .ubav{box-shadow:0 0 0 1.5px #1e1a16,0 0 0 3px #f0a92a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ubar{background:rgba(30,26,22,.86);border-color:rgba(240,194,92,.3);box-shadow:0 8px 24px rgba(0,0,0,.45)}
:root:not([data-theme="light"]) .ubar .ubav{box-shadow:0 0 0 1.5px #1e1a16,0 0 0 3px #f0a92a}}

/* Popup abierto: la página de atrás queda quieta; el contenido largo del popup se desliza sin arrastrarla */
html.popopen{overflow:hidden;scrollbar-gutter:stable}
.mbox{overscroll-behavior:contain}
.ubar{z-index:55}

/* Autor debajo de la descripción, solo en la lista del ordenador; en el resto va en su línea de siempre */
.deal .dby{display:none}
@media (min-width:1000px){
#list:not(.grid) .deal .dby{display:flex;align-items:center;gap:5px;margin:6px 0 0;white-space:nowrap}
#list:not(.grid) .deal .dby .u{overflow:hidden;text-overflow:ellipsis;max-width:220px}
#list:not(.grid) .deal .dby .avl{display:inline-flex}
#list:not(.grid) .deal .dby button.cfol{margin-left:2px}
#list:not(.grid) .deal .pl .pby,#list:not(.grid) .deal .pl .sby{display:none}
}


/* Cabecera de familia: marca de agua, emoji en baldosa, contador en pastilla y subfamilias en cápsulas */
.famc{position:relative;overflow:hidden;isolation:isolate;padding:22px 24px;gap:18px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,214,120,.55),transparent 55%),linear-gradient(120deg,rgba(255,243,214,.75),rgba(255,255,255,.55) 60%);border-color:rgba(227,154,38,.3);box-shadow:0 10px 30px rgba(120,80,0,.07)}
.famc::after{content:attr(data-e);position:absolute;z-index:-1;right:150px;top:50%;font-size:150px;line-height:1;opacity:.09;transform:translateY(-58%) rotate(-14deg);pointer-events:none;filter:saturate(.6)}
.famei{width:64px;height:64px;border-radius:20px;font-size:2.1rem;background:linear-gradient(145deg,#ffeab0,#f7c246 55%,#ea9e2a);box-shadow:0 10px 24px rgba(227,154,38,.35),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(180,100,0,.15);transform:rotate(-5deg);transition:transform .3s}
@media (hover:hover){.famc:hover .famei{transform:rotate(0) scale(1.04)}}
.famc .bc{gap:5px;margin:0 0 4px;font-size:.78rem}
.famc .bc a{color:var(--mu);font-weight:600}
.famc .bc a.cur{color:var(--act)}
.famc .bc .sep{opacity:.5}
.famc .shoph{margin:0 0 6px;font-size:1.75rem;letter-spacing:-.01em}
.famn{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 9px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(227,154,38,.2);font-size:.8rem;font-weight:700;color:var(--tx)}
.famn::before{content:"";width:8px;height:8px;border-radius:50%;background:#b9b0a0}
.famn.on::before{background:#2fb35a;box-shadow:0 0 0 3px rgba(47,179,90,.18);animation:famdot 2s ease-in-out infinite}
@keyframes famdot{50%{box-shadow:0 0 0 6px rgba(47,179,90,0)}}
.famsubs{gap:8px;padding-top:16px;border-top:1px dashed rgba(227,154,38,.3)}
.famsubs .btn{gap:8px;padding:5px 6px 5px 14px;border-radius:999px;border:1px solid rgba(227,154,38,.28);background:rgba(255,255,255,.75);color:var(--tx);font-weight:700;box-shadow:0 2px 8px rgba(120,80,0,.06);transition:transform .15s,box-shadow .15s,border-color .15s,color .15s}
.famsubs .btn b{min-width:22px;padding:2px 7px;font-size:.72rem;background:linear-gradient(135deg,#f7c246,#e49824);color:#fff;box-shadow:0 2px 6px rgba(227,154,38,.35)}
@media (hover:hover){.famsubs .btn:hover{transform:translateY(-2px);border-color:#e8a417;color:#b87a00;box-shadow:0 6px 16px rgba(212,143,0,.18)}}
@media (max-width:600px){.famc{padding:18px 16px}.famc::after{right:-14px;top:auto;bottom:-34px;font-size:120px;transform:rotate(-14deg)}.famei{width:54px;height:54px;font-size:1.75rem;border-radius:17px}.famc .shoph{font-size:1.4rem}}
:root[data-theme="dark"] .famc{background:radial-gradient(120% 140% at 0% 0%,rgba(240,194,92,.16),transparent 55%),linear-gradient(120deg,rgba(240,194,92,.08),rgba(255,255,255,.02) 60%);border-color:rgba(240,194,92,.22);box-shadow:none}
:root[data-theme="dark"] .famc::after{opacity:.07}
:root[data-theme="dark"] .famn,:root[data-theme="dark"] .famsubs .btn{background:rgba(255,255,255,.06);border-color:rgba(240,194,92,.25)}
:root[data-theme="dark"] .famsubs .btn b{color:#2a1d00}
@media (hover:hover){:root[data-theme="dark"] .famsubs .btn:hover{color:#ffd66e;border-color:rgba(246,183,60,.6)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .famc{background:radial-gradient(120% 140% at 0% 0%,rgba(240,194,92,.16),transparent 55%),linear-gradient(120deg,rgba(240,194,92,.08),rgba(255,255,255,.02) 60%);border-color:rgba(240,194,92,.22);box-shadow:none}
:root:not([data-theme="light"]) .famc::after{opacity:.07}
:root:not([data-theme="light"]) .famn,:root:not([data-theme="light"]) .famsubs .btn{background:rgba(255,255,255,.06);border-color:rgba(240,194,92,.25)}
:root:not([data-theme="light"]) .famsubs .btn b{color:#2a1d00}}
@media (hover:hover) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .famsubs .btn:hover{color:#ffd66e;border-color:rgba(246,183,60,.6)}}
@media (max-width:600px){.famc .bc a.cur,.famc .bc .sep:has(+a.cur){display:none}}


/* Barra de navegación de abajo (solo móvil): cápsula flotante con 5 botones; el de subir, redondo y destacado */
#bnav{display:none}
@media (max-width:700px){
  #bnav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;height:calc(62px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);box-sizing:border-box;border-radius:24px 24px 0 0;border-bottom:0!important;background:var(--glass-strong);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border:1px solid var(--glass-bd);box-shadow:0 -6px 24px rgba(60,40,0,.12);transition:transform .25s,opacity .25s}
  .bn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0;border:0;background:none;box-shadow:none;color:var(--mu);font:700 .68rem/1 'Nunito',system-ui,sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
  .bn svg{width:23px;height:23px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
  .bn:active svg,.bn:active .bnpi,.bn:active .av{transform:scale(.88)}
  .bn.on{color:var(--act)}
  .bn.on::before{content:"";position:absolute;top:7px;left:50%;width:46px;height:30px;margin-left:-23px;border-radius:999px;background:rgba(247,194,70,.24);z-index:-1}
  .bn .av{transition:transform .2s;border-radius:50%;box-shadow:0 0 0 2px var(--glass-strong),0 0 0 3.5px transparent}
  .bn.on .av{box-shadow:0 0 0 2px var(--glass-strong),0 0 0 3.5px #e8a417}
  .bnp .bnpi{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-top:-26px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#f7c246,#e49824);border:4px solid var(--bg,#f6f1e7);box-shadow:0 8px 18px rgba(227,154,38,.45);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
  .bnp .bnpi svg{width:22px;height:22px}
  .bnp.on::before{display:none}
  .bnp.on .bnpi{background:#14213d;color:#ffd66e}
  .bnc{position:absolute;top:6px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:#e8402a;color:#fff;font-size:.64rem;font-weight:900;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--glass-strong)}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  #totop{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  #toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  /* La barra de arriba ya no repite buscar ni subir */
  #hbar>[data-focus-search],#hbar .hpost{display:none!important}
  /* Fuera mientras se escribe (teclado) o con el chat a pantalla completa */
  body.dmfull #bnav,body:has(:is(input:not([type=checkbox],[type=radio],[type=button],[type=submit]),textarea,select,[contenteditable="true"]):focus) #bnav{transform:translateY(140%);opacity:0;pointer-events:none}
}
:root[data-theme="dark"] #bnav{box-shadow:0 -6px 24px rgba(0,0,0,.45)}
:root[data-theme="dark"] .bn.on::before{background:rgba(246,183,60,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #bnav{box-shadow:0 -6px 24px rgba(0,0,0,.45)}:root:not([data-theme="light"]) .bn.on::before{background:rgba(246,183,60,.16)}}
/* Móvil: el número del buzón, pegado a la esquina de su icono (no al borde de la casilla) */
@media (max-width:560px){.pside>a.pitem .nbadge{top:3px;right:auto;left:calc(50% + 9px)}}

/* Al pulsar (dedo o ratón) el botón se hunde y rebota al soltar (app.js pone .prs / .prsout) */
.prs{animation:prsin .09s ease-out both}
.prsout{animation:prsout .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes prsin{to{scale:.94}}
@keyframes prsout{from{scale:.94}to{scale:1}}
/* El ajuste de vibración solo tiene sentido en pantallas táctiles */
@media (pointer:fine){.hapc{display:none}}
/* Con la barra de abajo, la campana de la barra pequeña queda junto al menú: su desplegable se alinea con el borde izquierdo */
@media (max-width:560px){
 #hbar .hbw{margin-left:40px}
 .hbw #bellpop{left:-36px}
 .hbw #bellpop::before{left:47px}
}

/* Rendimiento del scroll: dentro de una tarjeta de cristal, los botones, el voto y las etiquetas no llevan su propio desenfoque
   (la tarjeta ya es casi opaca y no se nota; con ~6 por tarjeta, la portada tenía más de 200 desenfoques que recalcular al desplazarse) */
.card :is(.vote,.disc,.sec,.btn,.vb){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- Sensación de fluidez ---------- */
/* Fotos de las tarjetas: fundido al llegar (app.js pone .ld mientras cargan) */
.deal .img img,.mimg img{transition:opacity .3s ease}
.deal .img img.ld,.mimg img.ld{opacity:0}
/* Cambio de página suave (Chrome y Edge; los demás cambian como siempre) y la foto del chollo de la tarjeta a la ficha */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
::view-transition-group(dimg){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(dimg),::view-transition-new(dimg){height:100%;object-fit:contain}
main article.card .ctrk img:first-child{view-transition-name:dimg}
/* Aviso con «Deshacer» (app.js: toast con acción) */
#toast{align-items:center}
#toast .tact{flex:none;min-width:0;margin:0 -4px 0 6px;padding:6px 10px;border:0;border-radius:10px;background:rgba(255,201,74,.16);box-shadow:none;color:#ffc94a;font:inherit;font-weight:900;cursor:pointer}
#toast .tact:hover{background:rgba(255,201,74,.28)}
/* Siluetas de carga (app.js: SK) */
.skel{display:flex;flex-direction:column;gap:10px}
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(120,100,60,.1) 25%,rgba(120,100,60,.2) 40%,rgba(120,100,60,.1) 60%);background-size:300% 100%;animation:skel 1.2s ease-in-out infinite}
:root[data-theme="dark"] .sk{background-image:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 40%,rgba(255,255,255,.06) 60%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sk{background-image:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 40%,rgba(255,255,255,.06) 60%)}}
@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}
.skuser{align-items:center;padding:18px 8px 6px}
.skav{width:84px;height:84px;border-radius:50%}
.skl{height:13px}.skl.w55{width:55%;height:18px}.skl.w35{width:35%}
.skrow{display:flex;gap:8px;justify-content:center;width:100%}
.skc{width:96px;height:28px;border-radius:999px}
.skbtn{width:70%;height:42px;border-radius:14px;margin-top:6px}
.skrows{padding:6px 4px}
.skr{display:flex;align-items:center;gap:10px}
.skdot{flex:none;width:28px;height:28px;border-radius:50%}
/* Botón enviando: ruedecita delante del texto; al terminar, ✓ (app.js: .busy / .okd) */
button.busy::before,button.okd::before,.btn.busy::before{content:"";display:inline-block;width:.95em;height:.95em;margin:0 .5em 0 0;vertical-align:-.12em;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bspin .7s linear infinite}
button.okd::before{content:"✓";width:auto;height:auto;border:0;font-weight:900;animation:okpop .35s cubic-bezier(.3,1.7,.5,1)}
button.busy:disabled,button.okd:disabled{opacity:1;cursor:progress}
@keyframes bspin{to{transform:rotate(360deg)}}
@keyframes okpop{from{transform:scale(.3)}to{transform:none}}
/* «↑ N chollos nuevos» (app.js) */
.newpill{position:fixed;left:50%;top:62px;z-index:44;display:flex;align-items:center;gap:7px;margin:0;padding:9px 16px 9px 12px;border:0;border-radius:999px;background:linear-gradient(135deg,#ffc94a,#f2a31b);color:#3a2900;font:900 .92rem/1 'Nunito',system-ui,sans-serif;box-shadow:0 8px 22px rgba(150,90,0,.35),inset 0 1px 0 rgba(255,255,255,.6);cursor:pointer;transform:translate(-50%,-90px);opacity:0;transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .3s}
.newpill.show{transform:translate(-50%,0);opacity:1}
.newpill svg{width:17px;height:17px}
.newpill.busy svg{animation:bspin .7s linear infinite}
/* App instalada: arrastrar hacia abajo para recargar (app.js) */
.ptr{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));z-index:80;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--card);box-shadow:0 6px 18px rgba(60,35,0,.25);pointer-events:none;opacity:0}
.ptr img{width:30px;height:30px}
.ptr.ok{box-shadow:0 0 0 3px #f5bd3c,0 6px 18px rgba(60,35,0,.25)}
.ptr.spin img{animation:bspin .8s linear infinite}
/* Más votados: el rango (Hoy / Semana / Mes…) va pegado a las pestañas; en móvil baja a la segunda fila, centrado debajo de
   «Más votados» (app.js calcula el margen en --rngx) */
@media (max-width:640px){#tabs:has(.rng) .tfol{order:3}#tabs:has(.rng) .rng{order:4;flex:none;margin-left:var(--rngx,6px)}}