/* /src/styles/perfil.css */
.pf {
--pf-a: #00f5d4;
--pf-b: #f72585;
--pf-panel: #0d0f1f;
--pf-panel-2: #11142a;
}
.pf[data-acento="rosa"]     { --pf-a: #f72585; --pf-b: #00f5d4; }
.pf[data-acento="violeta"]  { --pf-a: #8b5cf6; --pf-b: #00f5d4; }
.pf[data-acento="oro"]      { --pf-a: #ffd60a; --pf-b: #f72585; }
.pf[data-acento="verde"]    { --pf-a: #2ee66b; --pf-b: #8b5cf6; }
.pf[data-acento="arcoiris"] { --pf-a: #00f5d4; --pf-b: #f72585; }
@media (min-width: 1300px) {
.pf .pf-cabecera .pf-ficha { max-width: min(860px, 62%); }
.pf .pf-cabecera > .pc-cabecera-arte { width: 100%; background-size: 1280px 360px; background-position: 100% 0; opacity: .9; }
}
@media (min-width: 901px) and (max-width: 1299px) {
.pc-pagina.pf > .pf-cabecera:first-child { padding-top: 168px; }
.pf .pf-cabecera > .pc-cabecera-arte {
bottom: auto;
height: 236px;
width: 100%;
background-size: 1280px 360px;
background-position: 100% 0;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 52%, transparent 96%);
mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 52%, transparent 96%);
}
}
.pf .pf-ficha {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
gap: 28px;
align-items: center;
margin-top: 6px;
padding: 28px 30px;
border: 2px solid color-mix(in srgb, var(--pf-a) 75%, transparent);
border-radius: 10px;
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pf-a) 12%, transparent), transparent 55%),
linear-gradient(180deg, #121530, #0b0d1d);
box-shadow:
0 0 0 1px rgba(0, 0, 0, .55),
0 0 26px color-mix(in srgb, var(--pf-a) 32%, transparent),
inset 0 0 26px color-mix(in srgb, var(--pf-a) 10%, transparent);
}
.pf[data-acento="arcoiris"] .pf-ficha { animation: pfArcoiris 8s linear infinite; }
@keyframes pfArcoiris {
0%, 100% { border-color: #00f5d4; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 26px rgba(0,245,212,.35); }
25%      { border-color: #8b5cf6; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 26px rgba(139,92,246,.35); }
50%      { border-color: #f72585; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 26px rgba(247,37,133,.35); }
75%      { border-color: #ffd60a; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 26px rgba(255,214,10,.35); }
}
.pf .pf-retrato { position: relative; }
.pf .pf-avatar {
position: relative;
width: 148px;
height: 148px;
border: 4px solid #3a3a52;
background: var(--bg-sunken);
}
.pf .pf-avatar-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: hidden; }
.pf .pf-avatar-svg > svg { display: block; width: 100%; height: 100%; }
.pf .pf-avatar-insignia {
position: absolute;
z-index: 3;
top: -12px;
right: -12px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 2px solid var(--accent-yellow);
background: #15120a;
color: var(--accent-yellow);
}
.pf .pf-retrato-editar {
position: absolute;
z-index: 4;
right: -12px;
bottom: -12px;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 2px solid #0b0d1d;
border-radius: 6px;
background: var(--accent-cyan);
color: var(--bg-sunken);
box-shadow: 0 0 0 2px var(--accent-cyan), 0 0 14px rgba(0, 245, 212, .55);
transition: transform var(--dur-rapida), background var(--dur-rapida);
}
.pf .pf-retrato-editar:hover { background: #5dfbe4; transform: translate(-1px, -1px); }
.pf .pf-datos { min-width: 0; }
.pf .pf-ante {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--font-pixel);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pf-a);
}
.pf .pf-nombre {
margin: 8px 0 0;
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.015em;
overflow-wrap: anywhere;
text-shadow: 3px 3px 0 rgba(5, 7, 13, .9);
}
.pf .pf-titulo { margin: 6px 0 0; font-size: 15px; font-style: italic; color: var(--text-secondary); }
.pf .pf-meta { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }
.pf .pf-bio { margin: 10px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.pf .pf-bio--vacia { color: var(--text-muted); }
.pf .pf-enlace {
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 700;
color: var(--accent-cyan);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.pf .pf-chips { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 16px; }
.pf .pf-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-secondary); }
.pf .pf-chip svg { color: var(--text-muted); }
.pf .pf-chip--record svg { color: var(--accent-yellow); }
.pf .pf-chip--monedas {
padding: 6px 12px;
border: 1px solid rgba(255, 214, 10, .55);
border-radius: 6px;
background: rgba(255, 214, 10, .06);
color: var(--accent-yellow);
}
.pf .pf-chip--monedas svg { color: var(--accent-yellow); }
.pf .pf-chip--monedas strong { font-family: var(--font-pixel); font-size: 13px; }
.pf .pf-chip--monedas:hover { background: rgba(255, 214, 10, .14); }
.pf .pf-acciones { display: flex; flex-direction: column; gap: 14px; }
.pf .pf-acciones .pc-btn { justify-content: center; width: 100%; background: rgba(5, 7, 13, .55); }
.pf .pf-acciones .pc-btn--primario { background: var(--accent-cyan); }
.pf .pf-salir:hover { border-color: var(--accent-pink); }
.pf .pf-escaparate { margin-top: 48px; }
.pf .pf-sec-cabeza { display: flex; align-items: flex-start; gap: 14px; }
.pf .pf-sec-ico {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
margin-top: 2px;
color: var(--pf-a);
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pf-a) 55%, transparent));
}
.pf .pf-sec-cabeza .pc-h2::before { display: none; }
.pf .pf-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pf .pf-tarjeta {
--t: var(--pf-a);
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
padding: 20px;
border: 2px solid color-mix(in srgb, var(--t) 70%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, var(--pf-panel-2), var(--pf-panel));
box-shadow: 0 0 18px color-mix(in srgb, var(--t) 22%, transparent), inset 0 0 22px color-mix(in srgb, var(--t) 6%, transparent);
}
.pf .pf-tarjeta--b { --t: var(--pf-b); }
.pf .pf-tarjeta-cabeza { display: flex; align-items: flex-start; gap: 14px; }
.pf .pf-tarjeta-ico { flex: none; color: var(--t); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--t) 50%, transparent)); }
.pf .pf-tarjeta-titulo { margin: 0; font-size: 19px; font-weight: 800; }
.pf .pf-tarjeta-texto { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.pf .pf-tarjeta-cuerpo { flex: 1; display: flex; align-items: center; min-height: 92px; }
.pf .pf-tarjeta-pie { margin-top: auto; }
.pf .pf-boton {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--t, var(--accent-cyan)) 70%, transparent);
border-radius: 6px;
background: rgba(5, 7, 13, .45);
color: var(--text-primary);
font: inherit;
font-size: 14.5px;
font-weight: 700;
cursor: pointer;
transition: background var(--dur-rapida), border-color var(--dur-rapida);
}
.pf .pf-boton svg { color: var(--t, var(--accent-cyan)); }
.pf .pf-boton:hover { background: color-mix(in srgb, var(--t, var(--accent-cyan)) 14%, transparent); border-color: var(--t, var(--accent-cyan)); }
.pf .pf-muestras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; }
.pf .pf-muestras li:nth-child(n+5) { display: none; }
.pf .pf-muestra {
position: relative;
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1;
padding: 7px;
border: 2px solid transparent;
border-radius: 8px;
background: rgba(5, 7, 13, .5);
cursor: pointer;
transition: border-color var(--dur-rapida), transform var(--dur-rapida);
}
.pf .pf-muestra:hover { border-color: color-mix(in srgb, var(--t) 60%, transparent); transform: translateY(-1px); }
.pf .pf-muestra.is-puesta { border-color: var(--t); box-shadow: 0 0 12px color-mix(in srgb, var(--t) 45%, transparent); cursor: default; }
.pf .pf-muestra.is-cargando { opacity: .55; pointer-events: none; }
.pf .pf-muestra-caja { display: block; width: 100%; height: 100%; border: 4px solid #3a3a52; background: #0a0b16; overflow: hidden; box-sizing: border-box; }
.pf .pf-muestra-caja--fondo { border: 2px solid #2a2d48; }
.pf .pf-muestra-caja--fondo > svg { display: block; width: 100%; height: 100%; }
.pf .pf-muestra-ok {
position: absolute;
top: -8px;
right: -8px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--t);
color: #05070d;
}
.pf .pf-muestra.is-bloqueada .pf-muestra-caja { opacity: .7; filter: saturate(.55); }
.pf .pf-muestra-candado {
position: absolute;
right: -6px;
bottom: -6px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: #1c1f38;
box-shadow: 0 0 0 2px #0b0d1d;
color: var(--text-secondary);
}
.pf .pf-vitrina {
width: 100%;
padding: 12px 12px 0;
border-radius: 6px;
background: linear-gradient(180deg, #1a1430 0%, #120e22 100%);
box-shadow: inset 0 0 0 2px #2a2140;
}
.pf .pf-estante {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0 0 8px;
list-style: none;
border-bottom: 6px solid #3b2a1e;
box-shadow: 0 6px 0 #22170f;
}
.pf .pf-pieza { min-width: 0; }
.pf .pf-pieza-enlace { display: block; border-radius: 3px; outline-offset: 2px; }
.pf .pf-pieza img {
display: block;
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 3px 0 rgba(0, 0, 0, .55);
transition: transform var(--dur-rapida);
}
.pf .pf-pieza-enlace:hover img { transform: translateY(-3px); }
.pf .pf-pieza--hueco { aspect-ratio: 2 / 3; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 3px; }
.pf .pf-expositor-vacio { margin: 0; padding: 18px 4px; font-size: 14px; color: var(--text-muted); }
.pf .pf-vitrina--grande { padding: 22px 22px 0; }
.pf .pf-estante--grande { gap: 18px; padding-bottom: 14px; border-bottom-width: 10px; }
.pf .pf-estante--grande .pf-pieza-texto { display: flex; flex-direction: column; gap: 3px; padding: 10px 2px 4px; }
.pf .pf-pieza-tipo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.pf .pf-pieza-titulo { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf .pf-colores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; justify-items: center; }
.pf .pf-color {
display: grid;
place-items: center;
width: min(40px, 100%);
aspect-ratio: 1;
padding: 0;
border: 3px solid rgba(5, 7, 13, .9);
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
color: #05070d;
cursor: pointer;
transition: transform var(--dur-rapida), box-shadow var(--dur-rapida);
}
.pf .pf-color:hover { transform: scale(1.08); }
.pf .pf-color.is-puesto { box-shadow: 0 0 0 3px var(--text-primary), 0 0 16px rgba(255, 255, 255, .35); }
.pf .pf-color--cian     { background: #00f5d4; }
.pf .pf-color--rosa     { background: #f72585; }
.pf .pf-color--violeta  { background: #8b5cf6; }
.pf .pf-color--oro      { background: #ffd60a; }
.pf .pf-color--verde    { background: #2ee66b; }
.pf .pf-color--arcoiris { background: conic-gradient(#f72585, #ffd60a, #2ee66b, #00f5d4, #8b5cf6, #f72585); }
.pf .pf-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 26px 0 72px; }
.pf .pf-fila--publica { grid-template-columns: minmax(0, 420px); }
.pf .pf-panel {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 18px 20px;
border: 1px solid var(--border-strong);
border-radius: 10px;
background: linear-gradient(180deg, var(--pf-panel-2), var(--pf-panel));
}
.pf .pf-panel-cabeza { display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; }
.pf .pf-panel-cabeza > svg { color: var(--pf-a); flex: none; }
.pf .pf-panel-cabeza h3 { margin: 0; font-size: 16.5px; font-weight: 800; }
.pf .pf-panel-ir { margin-left: auto; display: grid; color: var(--text-muted); transition: color var(--dur-rapida), transform var(--dur-rapida); }
.pf a.pf-panel-cabeza:hover .pf-panel-ir { color: var(--accent-cyan); transform: translateX(2px); }
.pf .pf-panel-nota { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.pf .pf-panel .pf-boton { margin-top: auto; --t: var(--accent-cyan); }
.pf .pf-contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf .pf-contador {
display: grid;
justify-items: start;
gap: 2px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(5, 7, 13, .45);
}
.pf .pf-contador > svg { color: var(--text-muted); }
.pf .pf-contador--games > svg { color: var(--accent-cyan); }
.pf .pf-contador--movies > svg { color: var(--accent-pink-texto, #ff6fae); }
.pf .pf-contador--series > svg { color: var(--accent-yellow); }
.pf .pf-contador-num { font-family: var(--font-pixel); font-size: 20px; line-height: 1.3; color: var(--text-primary); }
.pf .pf-contador-nombre { font-size: 12.5px; color: var(--text-secondary); }
.pf .pf-inventario { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pf .pf-inventario-num { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pf .pf-inventario-num strong { font-family: var(--font-pixel); font-size: 26px; color: var(--pf-a); }
.pf .pf-inventario-num span { font-size: 13px; color: var(--text-secondary); }
.pf .pf-inventario-lista { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf .pf-mini {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: rgba(5, 7, 13, .5);
color: var(--accent-yellow);
}
.pf .pf-mini.is-puesto { border-color: var(--pf-a); }
.pf .pf-mini-caja { display: block; width: 26px; height: 26px; border-width: 3px !important; box-sizing: border-box; background: #0a0b16; }
.pf .pf-estado {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, .06);
font-size: 12px;
color: var(--text-secondary);
}
.pf .pf-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6c7a9c; }
.pf .pf-estado.is-ok::before { background: #2ee66b; box-shadow: 0 0 8px #2ee66b; }
.pf .pf-carnet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; }
.pf .pf-carnet-datos { display: contents; }
.pf .pf-carnet-datos > p { grid-column: 1; }
.pf .pf-carnet-num { align-self: end; }
.pf .pf-carnet-datos > .pf-panel-nota { align-self: start; }
.pf .pf-carnet-mini { grid-column: 2; grid-row: 1 / span 2; }
.pf .pf-carnet-datos .pf-boton { grid-column: 1 / -1; grid-row: 3; }
.pf .pf-carnet-num { margin: 0; font-family: var(--font-pixel); font-size: 12px; letter-spacing: .02em; white-space: nowrap; color: var(--text-primary); }
.pf .pf-carnet-mini {
display: grid;
grid-template-columns: 40px auto;
grid-template-rows: auto 1fr auto;
gap: 4px 8px;
flex: none;
width: 112px;
padding: 8px;
border: 2px solid var(--accent-pink);
border-radius: 6px;
background: linear-gradient(135deg, #f72585, #b5179e);
box-shadow: 0 0 14px rgba(247, 37, 133, .45);
rotate: -4deg;
cursor: pointer;
transition: rotate var(--dur-rapida);
}
.pf .pf-carnet-mini:hover { rotate: 0deg; }
.pf .pf-carnet-marca { grid-column: 1 / -1; font-family: var(--font-pixel); font-size: 9px; color: #fff; letter-spacing: .06em; }
.pf .pf-carnet-foto { grid-row: 2; width: 40px; height: 40px; border: 2px solid #fff; background: #0a0b16; overflow: hidden; }
.pf .pf-carnet-foto > svg { display: block; width: 100%; height: 100%; }
.pf .pf-carnet-pie { grid-column: 1 / -1; font-family: var(--font-pixel); font-size: 7px; white-space: nowrap; color: #fff; background: rgba(0, 0, 0, .35); padding: 3px 4px; }
.pf-modal .pf-modal-card {
width: min(560px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
overflow: auto;
padding: 26px 26px 22px;
border: 2px solid var(--accent-cyan);
border-radius: 10px;
background: linear-gradient(180deg, #121530, #0b0d1d);
box-shadow: 0 0 30px rgba(0, 245, 212, .25);
color: var(--text-primary);
}
.pf-modal .pf-modal-card--ancha { width: min(820px, calc(100vw - 32px)); }
.pf-modal .pf-modal-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.pf-modal .pf-modal-titulo svg { color: var(--accent-cyan); }
.pf-modal .pf-form { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.pf-modal .pf-form-avatar { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 8px; background: rgba(5, 7, 13, .45); }
.pf-modal .pf-form-avatar-svg { flex: none; width: 84px; height: 84px; border: 3px solid #3a3a52; background: var(--bg-sunken); overflow: hidden; }
.pf-modal .pf-form-avatar-svg > svg { display: block; width: 100%; height: 100%; }
.pf-modal .pf-form-avatar .pc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 8px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-primary); font-weight: 700; text-decoration: none; }
.pf-modal .pf-form-avatar .pc-btn:hover { border-color: var(--accent-cyan); }
.pf-modal .pf-form-etiqueta { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.pf-modal .pf-campo { display: flex; flex-direction: column; gap: 6px; }
.pf-modal .pf-campo input,
.pf-modal .pf-campo textarea {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--bg-input, #0a0c18);
color: var(--text-primary);
font: inherit;
font-size: 15.5px;
resize: vertical;
}
.pf-modal .pf-campo input:focus,
.pf-modal .pf-campo textarea:focus { border-color: var(--accent-cyan); outline: none; box-shadow: 0 0 0 3px rgba(0, 245, 212, .25); }
.pf-modal .pf-campo [aria-invalid="true"] { border-color: var(--accent-danger, #ff5470); }
.pf-modal .pf-ayuda { margin: 0; font-size: 13px; color: var(--text-muted); }
.pf-modal .pf-error { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--accent-danger, #ff5470); }
.pf-modal .pf-error:empty { display: none; }
.pf-modal .pf-form-botones { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.pf-modal .pf-form-botones .pc-btn {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: transparent;
color: var(--text-primary); font: inherit; font-weight: 700; cursor: pointer;
}
.pf-modal .pf-form-botones .pc-btn--primario { border-color: var(--accent-cyan); background: var(--accent-cyan); color: var(--bg-sunken); box-shadow: 3px 3px 0 var(--accent-cyan-hondo); }
.pf-modal .pf-form-botones .pc-btn[disabled] { opacity: .6; cursor: progress; }
.pf-modal .pf-ed-estante-cabeza { display: flex; justify-content: space-between; margin: 18px 0 8px; font-size: 14px; color: var(--text-secondary); }
.pf-modal .pf-ed-estante-cabeza span { font-family: var(--font-pixel); font-size: 12px; color: var(--accent-cyan); }
.pf-modal .pf-ed-estante {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 12px 12px 10px;
list-style: none;
border-radius: 6px;
background: linear-gradient(180deg, #1a1430, #120e22);
border-bottom: 8px solid #3b2a1e;
}
.pf-modal .pf-ed-pieza { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-modal .pf-ed-pieza img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; }
.pf-modal .pf-ed-pieza-titulo { font-size: 11.5px; line-height: 1.25; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-modal .pf-ed-pieza-botones { display: flex; gap: 4px; justify-content: space-between; }
.pf-modal .pf-ed-mini {
flex: 1;
min-width: 0;
min-height: 30px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: rgba(5, 7, 13, .6);
color: var(--text-primary);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.pf-modal .pf-ed-mini:hover:not([disabled]) { border-color: var(--accent-cyan); }
.pf-modal .pf-ed-mini[disabled] { opacity: .3; cursor: default; }
.pf-modal .pf-ed-pieza--hueco { display: grid; place-items: center; aspect-ratio: 2 / 3; border: 1px dashed rgba(255, 255, 255, .18); border-radius: 3px; font-family: var(--font-pixel); font-size: 12px; color: var(--text-muted); }
.pf-modal .pf-ed-pestanas { display: flex; gap: 6px; margin: 20px 0 0; border-bottom: 1px solid var(--border-strong); }
.pf-modal .pf-ed-pestana {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-secondary);
font: inherit; font-weight: 700; cursor: pointer;
}
.pf-modal .pf-ed-pestana.is-activa { border-bottom-color: var(--accent-cyan); color: var(--text-primary); }
.pf-modal .pf-ed-panel { padding-top: 14px; }
.pf-modal .pf-ed-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pf-modal .pf-ed-filtro {
min-height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px;
background: none; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pf-modal .pf-ed-filtro.is-activo { border-color: var(--accent-cyan); background: rgba(0, 245, 212, .12); color: var(--text-primary); }
.pf-modal .pf-ed-buscar { margin-bottom: 12px; }
.pf-modal .pf-ed-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; max-height: 340px; overflow: auto; margin: 0; padding: 4px; list-style: none; }
.pf-modal .pf-ed-opcion {
position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 6px;
border: 2px solid transparent; border-radius: 8px; background: rgba(5, 7, 13, .45);
color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.pf-modal .pf-ed-opcion img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.pf-modal .pf-ed-opcion:hover:not([disabled]) { border-color: rgba(0, 245, 212, .5); }
.pf-modal .pf-ed-opcion.is-elegida { border-color: var(--accent-cyan); box-shadow: 0 0 12px rgba(0, 245, 212, .35); }
.pf-modal .pf-ed-opcion[disabled] { opacity: .45; cursor: not-allowed; }
.pf-modal .pf-ed-opcion-texto { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow: hidden; }
.pf-modal .pf-ed-opcion-tipo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.pf-modal .pf-ed-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-cyan); color: #05070d; }
.pf-modal .pf-expositor-vacio { margin: 0; padding: 18px 4px; font-size: 14px; color: var(--text-muted); }
.ml {
--ml-games: #00f5d4;
--ml-movies: #ff4fa3;
--ml-series: #a570ff;
--ml-panel: linear-gradient(180deg, #11142a, #0d0f1f);
}
.ml .ml-cabecera .pc-titulo { font-size: clamp(40px, 5vw, 64px); }
.ml .ml-ante { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font-pixel); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-pink-texto, #ff6fae); }
.ml .ml-arriba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 480px); gap: 20px; margin-top: 4px; }
.ml .ml-resumen,
.ml .ml-descubre {
border: 1px solid var(--border-strong);
border-radius: 10px;
background: var(--ml-panel);
}
.ml .ml-resumen { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 22px; }
.ml .ml-resumen-avatar { width: 84px; height: 84px; border: 3px solid #3a3a52; background: var(--bg-sunken); overflow: hidden; }
.ml .ml-resumen-avatar > svg { display: block; width: 100%; height: 100%; }
.ml .ml-resumen-titulo { margin: 6px 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.ml .ml-resumen-sub { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; color: var(--text-secondary); }
.ml .ml-resumen-sub svg { color: var(--ml-movies); }
.ml .ml-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ml .ml-cifra {
display: grid;
justify-items: center;
align-content: center;
gap: 4px;
min-height: 108px;
padding: 12px 8px;
border-radius: 8px;
background: rgba(5, 7, 13, .5);
text-align: center;
}
.ml .ml-cifra strong { font-family: var(--font-pixel); font-size: 22px; line-height: 1.2; }
.ml .ml-cifra span { font-size: 13px; line-height: 1.3; color: var(--text-secondary); }
.ml .ml-cifra--games svg { color: var(--ml-games); }
.ml .ml-cifra--movies svg { color: var(--ml-movies); }
.ml .ml-cifra--series svg { color: var(--ml-series); }
.ml .ml-cifra--recientes svg { color: var(--accent-yellow); }
.ml .ml-descubre { position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; padding: 20px 22px; }
.ml .ml-descubre-texto { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ml .ml-descubre-titulo { margin: 8px 0 6px; font-size: 22px; font-weight: 800; line-height: 1.15; }
.ml .ml-descubre-sub { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.ml .ml-descubre .ml-descubre-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.ml .ml-descubre-carteles { position: relative; flex: none; width: 150px; height: 128px; }
.ml .ml-descubre-cartel { position: absolute; width: 70px; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 14px rgba(0, 0, 0, .6); }
.ml .ml-descubre-cartel img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.ml .ml-descubre-cartel:nth-child(1) { left: 0; top: 18px; rotate: -10deg; opacity: .75; }
.ml .ml-descubre-cartel:nth-child(2) { left: 38px; top: 8px; rotate: -3deg; opacity: .9; }
.ml .ml-descubre-cartel:nth-child(3) { left: 78px; top: 0; rotate: 6deg; box-shadow: 0 0 0 2px var(--ml-movies), 0 0 18px rgba(255, 79, 163, .5); }
.ml .ml-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 28px 0 18px; }
.ml .ml-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ml .ml-chip {
display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(5, 7, 13, .5);
color: var(--text-secondary); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.ml .ml-chip span { color: var(--text-muted); font-weight: 500; }
.ml .ml-chip svg { color: var(--text-muted); }
.ml .ml-chip[data-ml-tipo="games"] svg { color: var(--ml-games); }
.ml .ml-chip[data-ml-tipo="movies"] svg { color: var(--ml-movies); }
.ml .ml-chip[data-ml-tipo="series"] svg { color: var(--ml-series); }
.ml .ml-chip:hover:not([disabled]) { border-color: rgba(0, 245, 212, .55); }
.ml .ml-chip.is-activo { border-color: var(--accent-cyan); background: rgba(0, 245, 212, .1); color: var(--text-primary); box-shadow: 0 0 12px rgba(0, 245, 212, .25); }
.ml .ml-chip.is-activo svg { color: var(--accent-cyan); }
.ml .ml-chip[disabled] { opacity: .45; cursor: default; }
.ml .ml-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ml .ml-select { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-secondary); }
.ml .ml-select-caja {
position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(5, 7, 13, .5); color: var(--text-muted);
}
.ml .ml-select select {
min-width: 128px; padding: 0 22px 0 0; border: 0; background: transparent; color: var(--text-primary);
font: inherit; font-size: 14.5px; cursor: pointer; appearance: none;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 9px) 52%, calc(100% - 4px) 52%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.ml .ml-select select option { background: #0d0f1f; color: var(--text-primary); }
.ml .ml-select-caja:focus-within { border-color: var(--accent-cyan); }
.ml .ml-buscar {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 260px; padding: 0 14px;
border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(5, 7, 13, .5); color: var(--text-muted);
}
.ml .ml-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 14.5px; }
.ml .ml-buscar input::placeholder { color: var(--text-muted); }
.ml .ml-buscar:focus-within { border-color: var(--accent-cyan); }
.ml .ml-buscar input:focus-visible { outline: none !important; box-shadow: none !important; }
.ml .ml-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-bottom: 72px; }
.ml .ml-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ml .ml-tarjeta {
--t: var(--ml-games);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: #0d0f1f;
transition: border-color var(--dur-rapida), transform var(--dur-rapida), box-shadow var(--dur-rapida);
}
.ml .ml-tarjeta--movies { --t: var(--ml-movies); }
.ml .ml-tarjeta--series { --t: var(--ml-series); }
.ml .ml-tarjeta:hover { border-color: color-mix(in srgb, var(--t) 60%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--t) 22%, transparent); transform: translateY(-2px); }
.ml .ml-tarjeta-arte { position: relative; display: block; overflow: hidden; border-radius: 8px 8px 0 0; }
.ml .ml-tarjeta-arte img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.ml .ml-tarjeta-arte::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(5, 7, 13, .92)); pointer-events: none; }
.ml .ml-nota {
position: absolute; z-index: 1; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px;
padding: 3px 7px; border-radius: 4px; background: rgba(5, 7, 13, .82); font-size: 12.5px; font-weight: 700; color: var(--text-primary);
}
.ml .ml-nota svg { color: var(--accent-yellow); }
.ml .ml-tipo {
position: absolute; z-index: 1; left: 10px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-pixel); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t);
text-shadow: 0 1px 2px #000;
}
.ml .ml-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 10px 12px; }
.ml .ml-tarjeta-titulo { overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--text-primary); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.6em; }
.ml .ml-tarjeta-titulo:hover { color: var(--t); }
.ml .ml-tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ml .ml-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.ml .ml-estado svg { color: var(--ml-movies); }
.ml .ml-estado--playing { color: var(--accent-cyan); }
.ml .ml-estado--done { color: #7ee2a8; }
.ml .ml-mas {
display: grid; place-items: center; width: 34px; height: 30px; padding: 0;
border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer;
}
.ml .ml-mas:hover, .ml .ml-mas[aria-expanded="true"] { border-color: var(--border-strong); color: var(--text-primary); background: rgba(255, 255, 255, .05); }
.ml .ml-menu {
position: absolute; z-index: 20; right: 6px; bottom: 44px; display: flex; flex-direction: column; min-width: 210px; padding: 6px;
border: 1px solid var(--accent-cyan); border-radius: 8px; background: #0b0d1d; box-shadow: 0 12px 30px rgba(0, 0, 0, .65);
}
.ml .ml-menu--derecha { right: auto; left: 6px; }
.ml .ml-menu-grupo { margin: 6px 10px 2px; font-family: var(--font-pixel); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ml .ml-menu-op {
display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 6px;
background: none; color: var(--text-primary); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.ml .ml-menu-op svg { color: var(--text-muted); }
.ml .ml-menu-op:hover, .ml .ml-menu-op:focus-visible { background: rgba(0, 245, 212, .1); }
.ml .ml-menu-op.is-puesto { color: var(--accent-cyan); }
.ml .ml-menu-ok { margin-left: auto; color: var(--accent-cyan); }
.ml .ml-menu-op--quitar { margin-top: 4px; border-top: 1px solid var(--border-strong); border-radius: 0 0 6px 6px; color: #ff7b93; }
.ml .ml-menu-op--quitar svg { color: #ff7b93; }
.ml .ml-quitado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(5, 7, 13, .5); font-size: 14px; color: var(--text-secondary); }
.ml .ml-enlace { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ml .ml-vacio { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; border: 1px dashed var(--border-strong); border-radius: 10px; text-align: center; color: var(--text-secondary); }
.ml .ml-vacio > svg { color: var(--ml-movies); }
.ml .ml-vacio-titulo { margin: 4px 0 0; font-size: 19px; font-weight: 800; color: var(--text-primary); }
.ml .ml-vacio p { margin: 0; }
.ml .ml-vacio .pc-btn { margin-top: 10px; }
.ml .ml-aside { display: flex; flex-direction: column; gap: 20px; }
.ml .ml-lado { padding: 18px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--ml-panel); }
.ml .ml-lado-cabeza { display: flex; align-items: center; justify-content: space-between; }
.ml .ml-lado-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; font-weight: 800; }
.ml .ml-lado-titulo::before { content: ''; width: 4px; height: 20px; background: var(--accent-cyan); }
.ml .ml-lado-ir { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--accent-cyan); cursor: pointer; }
.ml .ml-lado-ir:hover { background: rgba(0, 245, 212, .1); }
.ml .ml-lado-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.ml .ml-continuar-lista { display: flex; flex-direction: column; margin: 14px 0 0; padding: 0; list-style: none; }
.ml .ml-continuar-fila { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.ml .ml-continuar-arte { display: block; overflow: hidden; border-radius: 4px; }
.ml .ml-continuar-arte img { display: block; width: 56px; height: 64px; object-fit: cover; }
.ml .ml-continuar-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml .ml-continuar-titulo { overflow: hidden; font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.ml .ml-continuar-titulo:hover { color: var(--accent-cyan); }
.ml .ml-continuar-tipo { font-size: 12.5px; font-weight: 600; }
.ml .ml-continuar-tipo--games { color: var(--ml-games); }
.ml .ml-continuar-tipo--movies { color: var(--ml-movies); }
.ml .ml-continuar-tipo--series { color: var(--ml-series); }
.ml .ml-continuar-cuando { font-size: 12px; color: var(--text-muted); }
.ml .ml-play {
display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--text-primary); border-radius: 50%;
color: var(--text-primary); transition: border-color var(--dur-rapida), color var(--dur-rapida), background var(--dur-rapida);
}
.ml .ml-play:hover { border-color: var(--accent-cyan); color: var(--bg-sunken); background: var(--accent-cyan); }
.ml .ml-nuevo { display: flex; gap: 14px; border-style: dashed; }
.ml .ml-nuevo-ico { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ml-movies); border-radius: 50%; color: var(--ml-movies); box-shadow: 0 0 14px rgba(255, 79, 163, .35); }
.ml .ml-nuevo-titulo { margin: 0; font-size: 17px; font-weight: 800; color: var(--accent-cyan); }
.ml .ml-nuevo-btn {
display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-top: 14px; padding: 0 16px;
border: 1px solid var(--accent-cyan); border-radius: 8px; color: var(--text-primary); font-size: 14px; font-weight: 700; text-decoration: none;
}
.ml .ml-nuevo-btn svg { color: var(--accent-cyan); }
.ml .ml-nuevo-btn:hover { background: rgba(0, 245, 212, .1); }
@media (max-width: 1280px) {
.ml .ml-arriba { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
.ml .ml-cuerpo { grid-template-columns: 1fr; }
.ml .ml-aside { order: -1; }
.ml .ml-nuevo { display: none; }
}
@media (max-width: 760px) {
.ml .ml-resumen { grid-template-columns: auto minmax(0, 1fr); }
.ml .ml-cifras { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml .ml-cifra { min-height: 0; grid-template-columns: auto auto; justify-content: start; justify-items: start; text-align: left; column-gap: 10px; }
.ml .ml-cifra > span { grid-column: 1 / -1; }
.ml .ml-descubre-carteles { display: none; }
.ml .ml-controles, .ml .ml-buscar { width: 100%; }
.ml .ml-select { flex: 1 1 140px; }
.ml .ml-select > span:first-child { display: none; }
.ml .ml-select-caja { width: 100%; }
.ml .ml-select select { flex: 1; min-width: 0; }
.ml .ml-aside { grid-template-columns: 1fr; }
.ml .ml-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ml .ml-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
.ml .ml-chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
.ml .ml-tarjeta, .ml .ml-tarjeta:hover { transition: none; transform: none; }
}
.pf-publico .pf-publico-aviso { max-width: 560px; margin-top: 12px; text-align: center; }
.pf-publico .pf-publico-aviso svg { color: var(--accent-cyan); }
.pf-publico .pf-publico-expositor { margin-top: 48px; }
.pf-publico .pf-fila { margin-top: 26px; }
@media (max-width: 1180px) {
.pf .pf-tarjetas,
.pf .pf-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.pf .pf-ficha { grid-template-columns: auto minmax(0, 1fr); }
.pf .pf-acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
.pf .pf-acciones .pc-btn { width: auto; flex: 1 1 200px; }
}
@media (max-width: 640px) {
.pf .pf-ficha { grid-template-columns: 1fr; justify-items: start; padding: 22px 18px; gap: 20px; }
.pf .pf-avatar { width: 120px; height: 120px; }
.pf .pf-acciones .pc-btn { flex: 1 1 100%; }
.pf .pf-tarjetas,
.pf .pf-fila { grid-template-columns: 1fr; }
.pf .pf-estante { gap: 6px; }
.pf .pf-estante--grande { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-modal .pf-ed-estante { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pagina-mi-lista .pf-contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.pf[data-acento="arcoiris"] .pf-ficha { animation: none; border-color: #8b5cf6; }
.pf .pf-carnet-mini { transition: none; }
}
.ml .ml-mi-nota { margin: 4px 0 0; color: var(--accent-amarillo, #ffd166); font-size: 13px; letter-spacing: 1px; }
.ml .ml-mi-nota span { color: var(--text-muted); opacity: .45; }
.ml .ml-apuntes-vista { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ml .ml-apuntes { padding: 10px; width: min(300px, calc(100vw - 32px)); }
.ml .ml-apuntes textarea { width: 100%; box-sizing: border-box; margin: 4px 0 8px; font: inherit; font-size: 14px; resize: vertical; }
.ml .ml-estrellas { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ml .ml-estrella { cursor: pointer; font-size: 19px; line-height: 1; color: var(--text-muted); }
.ml .ml-estrella input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ml .ml-estrellas:has(.ml-estrella:not(.ml-estrella--sin) input:checked) .ml-estrella:not(.ml-estrella--sin),
.ml .ml-estrellas:has(.ml-estrella:not(.ml-estrella--sin):hover) .ml-estrella:not(.ml-estrella--sin) { color: var(--accent-amarillo, #ffd166); }
.ml .ml-estrellas:not(:has(.ml-estrella:not(.ml-estrella--sin):hover)) .ml-estrella:has(input:checked) ~ .ml-estrella:not(.ml-estrella--sin),
.ml .ml-estrellas:has(.ml-estrella:not(.ml-estrella--sin):hover) .ml-estrella:hover ~ .ml-estrella:not(.ml-estrella--sin) { color: var(--text-muted); }
.ml .ml-estrella--sin:has(input:checked) { color: var(--text-primary, #fff); }
.ml .ml-estrella input:focus-visible + span { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.ml .ml-estrella--sin { font-size: 12.5px; margin-left: 8px; }
.ml .ml-apuntes-error { margin: 0 0 8px; font-size: 13px; color: var(--accent-rosa, #f72585); }
.ml .ml-apuntes-botones { display: flex; gap: 8px; }
.pf .pf-steam { margin: -40px 0 72px; padding: 22px; border: 1px solid var(--border-strong); border-radius: 12px; background: linear-gradient(180deg, var(--pf-panel-2), var(--pf-panel)); }
.pf .pf-steam-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pf .pf-steam-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 800; }
.pf .pf-steam-titulo svg { color: var(--pf-a); }
.pf .pf-steam-datos { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
.pf .pf-steam-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.pf .pf-steam-juego { display: grid; gap: 4px; align-content: start; padding: 8px 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--border); }
.pf .pf-steam-juego.is-pixel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-pink, #f72585) 55%, transparent), 0 0 18px rgba(247, 37, 133, .12); }
.pf .pf-steam-juego img { width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 6px; margin-bottom: 4px; }
.pf .pf-steam-nombre { font-weight: 800; font-size: 14.5px; line-height: 1.25; }
.pf .pf-steam-horas { font-size: 13px; color: var(--text-muted); }
.pf .pf-steam-ficha { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; min-height: 32px; border: 0; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--accent-pink-relleno, #dc1f78); cursor: pointer; }
.pf .pf-steam-ficha:hover { filter: brightness(1.1); }
.pf .pf-steam-ficha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pf .pf-steam-mas { margin: 16px auto 0; display: flex; }
@media (max-width: 640px) {
.pf .pf-steam { margin-top: -50px; padding: 16px; }
.pf .pf-steam-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.pf .pf-steam .pf-boton { width: auto; margin-top: 0; }
.pf .pf-steam .pf-steam-mas { margin: 16px auto 0; }
.pf .pf-acciones .pf-vinculado { color: var(--accent-cyan); cursor: default; }