/* /src/styles/mercado.css */
.mk {
--mk-hueco: 20px;
padding-top: 20px;
overflow-x: clip;
}
.mk [hidden] { display: none !important; }
.mk .ico { display: block; flex: none; shape-rendering: crispEdges; }
.mk p { margin: 0; }
.mk ul, .mk ol { margin: 0; padding: 0; list-style: none; }
.mk strong { color: var(--text-primary); }
.mk-enlace { color: var(--accent-cyan); font-weight: 600; }
.mk .mk-enlace:hover { color: var(--accent-cyan); text-decoration: underline; }
.mk :is(.mk-tabla, .mk-clave, .mk-filtros-pie, .mk-pedido-fila, .mk-aviso, .mk-barra) .pc-btn { --g: 3px; --s: transparent; }
.mk .pc-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: var(--marco-plano); }
.mk .pc-btn--primario:disabled { background: var(--bg-elevated); color: var(--text-muted); --m: var(--border-strong); }
.mk-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 28px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.mk-nav-enlaces { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mk-nav-enlaces::-webkit-scrollbar { display: none; }
.mk :is(.mk-nav-enlace, .mk-nav-carrito, .mk-pestana) {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
border-radius: var(--radius-control);
font-size: 15px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
transition: background var(--dur-rapida), color var(--dur-rapida);
}
.mk :is(.mk-nav-enlace, .mk-nav-carrito, .mk-pestana):hover { color: var(--text-primary); background: var(--bg-elevated); }
.mk :is(.mk-nav-enlace, .mk-pestana)[aria-current="page"] { background: var(--accent-pink-relleno); color: #fff; }
.mk .mk-nav-carrito { border: 1px solid var(--border-strong); color: var(--text-primary); }
.mk .mk-nav-carrito:hover, .mk .mk-nav-carrito[aria-current="page"] { border-color: var(--accent-cyan); color: var(--accent-cyan); background: transparent; }
.mk-pestanas { display: flex; gap: 4px; margin: 0 0 24px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.mk-hero { padding: 8px 0 12px; }
.mk .mk-hero .pc-titulo { max-width: 22ch; }
.mk .mk-buscador--grande {
flex: none;
max-width: 760px;
height: 60px;
margin: 26px 4px 12px;
padding: 0 8px 0 18px;
gap: 14px;
--m: var(--accent-cyan);
}
.mk .mk-buscador--grande input { font-size: 17px; }
.mk .mk-buscador--grande .pc-btn { --g: 0px; --s: transparent; min-height: 44px; box-shadow: none; }
.mk .mk-buscador input { min-height: 40px; }
.mk .mk-buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mk-seccion-corta { margin-top: 28px; }
.mk .mk-buscador { position: relative; }
.mk-sugerencias {
position: absolute;
z-index: var(--z-dropdown);
top: calc(100% + 8px);
left: -4px;
right: -4px;
max-height: min(60vh, 440px);
overflow-y: auto;
background: var(--bg-elevated);
border: 1px solid var(--accent-cyan);
box-shadow: var(--shadow-elevated);
}
.mk-sugerencia {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 6px 14px;
color: var(--text-secondary);
cursor: pointer;
}
.mk-sugerencia + .mk-sugerencia { border-top: 1px solid var(--border); }
.mk-sugerencia:hover, .mk-sugerencia[aria-selected="true"] { background: var(--bg-surface); color: var(--accent-cyan); }
.mk .mk-sugerencia-texto { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk .mk-sugerencia-texto mark { background: none; color: var(--accent-cyan); font-weight: 800; }
.mk .mk-sugerencia-detalle { flex: none; font-size: var(--fs-tiny); color: var(--text-muted); white-space: nowrap; }
.mk .mk-quiza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 14px; font-size: 16px; color: var(--text-primary); }
.mk .mk-quiza-btn { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent-cyan); font-size: 16px; font-weight: 800; cursor: pointer; text-decoration: underline; }
.mk .mk-quiza span { flex: 1 1 100%; font-size: var(--fs-small); color: var(--text-secondary); }
.mk-vacio-categorias { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.mk .mk-vacio-categorias .mk-chip { min-height: 44px; padding: 0 14px; }
.mk-categorias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mk .mk-categoria {
display: grid;
gap: 4px;
height: 100%;
min-height: 112px;
padding: 14px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
transition: border-color var(--dur-rapida), background var(--dur-rapida), transform var(--dur-rapida);
}
.mk .mk-categoria:hover { border-color: var(--accent-cyan); background: var(--bg-elevated); transform: translateY(-2px); }
.mk-categoria-ico { color: var(--accent-cyan); }
.mk .mk-categoria-nombre { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.mk .mk-categoria-texto { font-size: var(--fs-tiny); color: var(--text-muted); line-height: 1.35; }
.mk-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-hueco); }
.mk-tarjeta {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
transition: border-color var(--dur-rapida), transform var(--dur-rapida);
}
.mk-tarjeta:is(:hover, :focus-within) { border-color: var(--accent-cyan); transform: translateY(-2px); }
.mk-tarjeta-arte {
position: relative;
display: block;
aspect-ratio: 2 / 3;
overflow: hidden;
background: var(--bg-sunken);
}
.mk-tarjeta-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-tarjeta[data-agotado] .mk-tarjeta-arte img { filter: grayscale(.8) brightness(.7); }
.mk-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 14px 14px; }
.mk .mk-tarjeta-titulo {
margin: 0;
font-size: 15.5px;
font-weight: 700;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.mk-tarjeta-titulo a::after { content: ''; position: absolute; inset: 0; }
.mk .mk-tarjeta:hover .mk-tarjeta-titulo a { color: var(--accent-cyan); }
.mk .mk-tarjeta-meta { font-size: var(--fs-tiny); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-tarjeta-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: auto; padding-top: 8px; }
.mk .mk-desde { font-size: var(--fs-tiny); color: var(--text-secondary); }
.mk .mk-sin-vendedor { display: inline-block; padding: 4px 9px; border: 1px dashed var(--border-color, rgba(255,255,255,.25)); border-radius: 8px; font-size: var(--fs-small, 13px); font-weight: 600; color: var(--text-secondary); }
.mk .mk-tarjeta-precio strong { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--text-primary); }
.mk :is(.mk-tarjeta-precio, .mk-compra-precio) s { font-size: var(--fs-small); color: var(--text-muted); }
.mk .mk-tarjeta-pie { font-size: var(--fs-tiny); color: var(--text-secondary); }
.mk .mk-descuento {
position: absolute;
left: 8px;
bottom: 8px;
padding: 3px 7px;
background: var(--pc-descuento);
color: #fff;
font-size: var(--fs-tiny);
font-weight: 800;
box-shadow: 2px 2px 0 var(--bg-sunken);
}
.mk .mk-descuento--linea { position: static; box-shadow: none; }
.mk-fav {
position: absolute;
z-index: 1;
top: 4px;
right: 4px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
background: none;
color: var(--text-primary);
cursor: pointer;
filter: drop-shadow(2px 2px 0 var(--bg-sunken));
transition: color var(--dur-rapida), transform var(--dur-rapida);
}
.mk-fav:hover { color: var(--accent-pink-texto); transform: scale(1.1); }
.mk-fav[aria-pressed="true"] { color: var(--accent-pink); }
.mk .mk-fav--texto { position: static; width: auto; height: auto; filter: none; transform: none; }
.mk .mk-fav--texto[aria-pressed="true"] { --m: var(--accent-pink); color: var(--accent-pink-texto); }
.mk-esqueleto { pointer-events: none; }
.mk-esqueleto .mk-tarjeta-arte { background: var(--bg-elevated); }
.mk-esqueleto .mk-tarjeta-cuerpo span { display: block; height: 14px; background: var(--bg-elevated); }
.mk-esqueleto .mk-tarjeta-cuerpo span:nth-child(2) { width: 60%; }
.mk-esqueleto .mk-tarjeta-cuerpo span:nth-child(3) { width: 40%; height: 24px; margin-top: 10px; }
.mk-carrusel-mandos { display: flex; align-items: center; gap: 10px; }
.mk-flecha {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-control);
background: var(--bg-surface);
color: var(--text-primary);
cursor: pointer;
transition: border-color var(--dur-rapida), color var(--dur-rapida);
}
.mk-flecha:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.mk-flecha[data-mk-carrusel="-1"] .ico { transform: scaleX(-1); }
.mk-carrusel-pista {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 3 * var(--mk-hueco)) / 4);
gap: var(--mk-hueco);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding: 4px 2px 6px;
margin: -4px -2px -6px;
}
.mk-carrusel-pista::-webkit-scrollbar { display: none; }
.mk-carrusel-pista > * { scroll-snap-align: start; }
.mk-bloques { display: grid; gap: var(--mk-hueco); }
.mk-bloques--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-bloques--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-bloque {
display: flex;
gap: 14px;
padding: 18px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}
.mk-bloque-ico {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 48px;
height: 48px;
background: var(--bg-sunken);
border: 1px solid var(--border-strong);
color: var(--accent-cyan);
}
.mk .mk-bloque-num {
position: absolute;
top: -8px;
left: -8px;
display: grid;
place-items: center;
width: 20px;
height: 20px;
background: var(--accent-yellow);
color: var(--bg-sunken);
font-family: var(--font-pixel);
font-size: 9px;
}
.mk-bloque-texto { display: grid; gap: 4px; min-width: 0; }
.mk .mk-bloque-texto strong { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.mk .mk-bloque-texto span { font-size: var(--fs-small); line-height: 1.45; color: var(--text-secondary); }
.mk .mk-vacio { display: grid; justify-items: center; gap: 8px; margin: 8px 4px 16px; }
.mk-vacio-ico { color: var(--text-muted); }
.mk .mk-vacio-titulo { margin: 4px 0 0; font-size: 20px; font-weight: 800; }
.mk .mk-vacio p { max-width: 52ch; font-size: 15px; }
.mk .mk-error .mk-vacio-ico { color: var(--warning); }
.mk-listado-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 22px; }
.mk .mk-titulo-listado, .mk .mk-titulo-pagina { margin: 0; max-width: none; font-size: clamp(26px, 2.6vw, 34px); }
.mk .mk-titulo-pagina { margin-bottom: 22px; }
.mk .mk-cuenta { font-size: var(--fs-small); color: var(--text-secondary); }
.mk-listado { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.mk-resultados { min-width: 0; }
.mk-rejilla--listado { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-filtros {
position: sticky;
top: calc(var(--navbar-height) + 16px);
padding: 18px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}
.mk-filtros-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mk .mk-filtros-titulo { margin: 0; font-size: 17px; font-weight: 800; }
.mk-filtros-cerrar, .mk-filtros-pie { display: none; }
.mk-filtros-campos { display: grid; gap: 18px; padding: 4px; }
.mk .mk-filtro { min-width: 0; }
.mk .mk-filtro .pc-select { width: 100%; height: 44px; }
.mk-precio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-precio legend { width: 100%; padding: 0; margin-bottom: 6px; }
.mk-precio label { flex: 1 1 0; min-width: 0; }
.mk :is(.mk-precio input, .mk-campo input) {
width: 100%;
height: 44px;
padding: 0 12px;
background: var(--bg-sunken);
border: 1px solid var(--border-strong);
border-radius: var(--radius-control);
color: var(--text-primary);
font-size: 15px;
}
.mk :is(.mk-precio input, .mk-campo input):hover { border-color: var(--text-muted); }
.mk-casilla { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.4; color: var(--text-primary); cursor: pointer; }
.mk-casilla input, .mk-metodo input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent-cyan); }
.mk-filtros .mk-casilla { padding: 2px 0; align-items: center; }
.mk .mk-casilla small { color: var(--text-muted); font-size: var(--fs-tiny); }
.mk-barra { display: flex; align-items: flex-start; gap: 16px; padding: 4px; margin-bottom: 14px; }
.mk .mk-barra .mk-buscador { flex: 1 1 auto; height: 44px; }
.mk .mk-abrir-filtros { display: none; }
.mk .mk-orden .pc-select { height: 44px; max-width: 100%; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mk-chips:empty { display: none; }
.mk .mk-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 10px 0 12px;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-control);
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: border-color var(--dur-rapida);
}
.mk .mk-chip:hover { border-color: var(--accent-cyan); }
.mk .mk-chip--todo { background: none; border-color: transparent; color: var(--accent-cyan); }
.mk-vermas { display: flex; justify-content: center; margin-top: 28px; }
.mk :is(.mk-nota, .mk-verificado, .mk-entrega) { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; vertical-align: middle; }
.mk .mk-nota { color: var(--accent-yellow); }
.mk .mk-ventas { font-size: var(--fs-small); color: var(--text-secondary); }
.mk .mk-verificado { color: var(--accent-cyan); }
.mk .mk-sin-verificar { color: var(--text-muted); font-size: var(--fs-small); }
.mk .mk-nuevo, .mk .mk-recomendada, .mk .mk-de-ejemplo {
display: inline-block;
padding: 3px 7px;
border: 1px solid var(--border-strong);
font-family: var(--font-pixel);
font-size: 8px;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-secondary);
vertical-align: middle;
}
.mk .mk-recomendada { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.mk .mk-entrega--ya { color: var(--success); }
.mk .mk-entrega--luego { color: var(--text-secondary); }
.mk .mk-stock { font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); }
.mk .mk-stock--poco { color: var(--warning); }
.mk .mk-stock--no { color: var(--danger); }
.mk-aviso {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
padding: 12px 14px;
border-left: 4px solid var(--warning);
background: color-mix(in srgb, var(--warning) 9%, transparent);
font-size: var(--fs-small);
line-height: 1.45;
color: var(--text-primary);
}
.mk .mk-aviso p, .mk .mk-aviso span { font-size: var(--fs-small); }
.mk-aviso > span:first-child { color: var(--warning); }
.mk-aviso--mal { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.mk-ficha {
display: grid;
grid-template-columns: 250px minmax(0, 1fr) 360px;
grid-template-areas: 'arte cabeza compra';
gap: 32px;
align-items: start;
}
.mk-ficha-arte { grid-area: arte; aspect-ratio: 2 / 3; overflow: hidden; background: var(--bg-sunken); border: 1px solid var(--border); }
.mk-ficha-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-ficha-cabeza { grid-area: cabeza; min-width: 0; }
.mk .mk-ficha-titulo { max-width: none; font-size: clamp(26px, 2.8vw, 38px); }
.mk-ficha-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px !important; }
.mk-ficha-meta li, .mk-compra-datos li { display: grid; gap: 2px; }
.mk-ficha-meta li { padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border); min-width: 110px; }
.mk :is(.mk-ficha-meta, .mk-compra-datos) li > span:first-child { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .mk-ficha-meta strong { font-size: 15px; font-weight: 700; }
.mk .mk-ficha-desde { margin-top: 20px; font-size: 15px; color: var(--text-secondary); }
.mk .mk-ficha-desde strong { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.mk-compra {
grid-area: compra;
display: grid;
gap: 14px;
padding: 22px;
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-card);
}
.mk .mk-compra-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mk .mk-compra-precio strong { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mk .mk-compra-iva, .mk .mk-compra-custodia { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .mk-compra-iva { margin-top: -10px; }
.mk-compra-vendedor { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.mk .mk-compra-vendedor p { font-size: 15px; }
.mk .mk-compra-reputacion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.mk-compra-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk .mk-compra-datos strong { font-size: var(--fs-small); font-weight: 600; }
.mk-compra-botones { display: grid; gap: 16px; padding: 4px 4px 8px; }
.mk .mk-compra-botones .pc-btn { width: 100%; min-height: 48px; }
.mk .mk-compra-botones .pc-btn--primario { font-size: 16px; }
.mk-tabla { width: 100%; border-collapse: collapse; background: var(--bg-surface); border: 1px solid var(--border); }
.mk-tabla th {
padding: 12px 16px;
text-align: left;
font-family: var(--font-pixel);
font-size: 9px;
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-strong);
}
.mk-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; vertical-align: middle; }
.mk-tabla tr:last-child td { border-bottom: 0; }
.mk-tabla tr[data-recomendada] td { background: color-mix(in srgb, var(--accent-cyan) 5%, transparent); }
.mk-tabla tr[data-agotada] td:not(:last-child) { opacity: .55; }
.mk-tabla-reputacion { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 4px; }
.mk .mk-recomendada { margin-top: 6px; }
.mk .mk-tabla-precio strong { font-size: 19px; font-weight: 800; white-space: nowrap; }
.mk .mk-region-no { display: block; margin-top: 2px; font-size: var(--fs-tiny); color: var(--warning); }
.mk-tabla td:last-child { text-align: right; padding-right: 20px; }
.mk-detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.mk-detalle { display: grid; gap: 10px; align-content: start; }
.mk .mk-detalle p, .mk .mk-pasos li { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.mk .mk-pasos { display: grid; gap: 6px; padding-left: 22px; list-style: decimal; }
.mk .mk-pasos li::marker { color: var(--accent-cyan); font-weight: 700; }
.mk-garantia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-hueco); }
.mk-garantia-caja { padding: 18px 20px; background: var(--bg-surface); border: 1px solid var(--border); border-top: 3px solid var(--success); }
.mk-garantia-caja--no { border-top-color: var(--text-muted); }
.mk .mk-garantia-caja h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.mk-garantia-lista { display: grid; gap: 10px; }
.mk-garantia-lista li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.mk-garantia-lista li > span:first-child { padding-top: 3px; color: var(--success); }
.mk-garantia-caja--no .mk-garantia-lista li > span:first-child { color: var(--text-muted); }
.mk-faq { border-top: 1px solid var(--border); }
.mk-faq-item, .mk-canje { border-bottom: 1px solid var(--border); }
.mk :is(.mk-faq-item, .mk-canje) summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 52px;
padding: 6px 2px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.mk :is(.mk-faq-item, .mk-canje) summary::-webkit-details-marker { display: none; }
.mk :is(.mk-faq-item, .mk-canje) summary:hover { color: var(--accent-cyan); }
.mk :is(.mk-faq-item, .mk-canje) summary span { transition: transform var(--dur-rapida); }
.mk :is(.mk-faq-item, .mk-canje)[open] summary span { transform: rotate(180deg); }
.mk .mk-faq-item p { padding: 0 2px 16px; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.mk-cta-fija { display: none; }
.mk-vendedor { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 24px; background: var(--bg-surface); border: 1px solid var(--border); margin-bottom: 16px; }
.mk-vendedor-ico { display: grid; place-items: center; width: 84px; height: 84px; background: var(--bg-sunken); border: 1px solid var(--border-strong); color: var(--accent-cyan); }
.mk .mk-vendedor .pc-titulo { font-size: clamp(24px, 2.6vw, 34px); max-width: none; }
.mk .mk-vendedor-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-small); color: var(--text-secondary); }
.mk-vendedor-cifras { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 28px; margin: 0; }
.mk-vendedor-cifras dt { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk-vendedor-cifras dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; }
.mk-dos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.mk-lineas { border-top: 1px solid var(--border); }
.mk-linea {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) auto 96px 44px;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.mk-linea--mal { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.mk-linea--mal > .mk-linea-datos:first-child { grid-column: 1 / 5; padding-left: 12px; }
.mk-linea-arte { display: block; aspect-ratio: 460 / 215; overflow: hidden; background: var(--bg-sunken); }
.mk-linea-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-linea-datos { display: grid; gap: 3px; min-width: 0; }
.mk .mk-linea-titulo { font-size: 16px; font-weight: 700; line-height: 1.3; }
.mk .mk-linea-titulo a:hover { color: var(--accent-cyan); }
.mk .mk-linea-meta, .mk .mk-linea-unidad { font-size: var(--fs-small); color: var(--text-secondary); }
.mk .mk-linea-aviso { margin-top: 4px; font-size: var(--fs-small); color: var(--warning); }
.mk .mk-linea-aviso--mal { color: var(--danger); }
.mk-linea-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-control); }
.mk-linea-cantidad button, .mk-linea-quitar, .mk-filtros-cerrar {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
background: none;
color: var(--text-primary);
font-size: 20px;
cursor: pointer;
transition: color var(--dur-rapida), background var(--dur-rapida);
}
.mk-linea-cantidad button:hover:not(:disabled), .mk-linea-quitar:hover { color: var(--accent-cyan); background: var(--bg-elevated); }
.mk-linea-cantidad button:disabled { opacity: .35; cursor: not-allowed; }
.mk .mk-linea-cantidad span { min-width: 28px; text-align: center; font-weight: 700; }
.mk .mk-linea-importe { text-align: right; font-size: 18px; font-weight: 800; white-space: nowrap; }
.mk-linea-quitar { color: var(--text-muted); }
.mk-resumen {
position: sticky;
top: calc(var(--navbar-height) + 16px);
display: grid;
gap: 14px;
padding: 22px;
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-card);
}
.mk .mk-resumen-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--text-secondary); }
.mk .mk-resumen-fila strong { font-size: 24px; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.mk .mk-resumen-total { padding-top: 14px; border-top: 1px solid var(--border); }
.mk .mk-resumen-nota { margin-top: -8px; font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .mk-resumen-congelado { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--success); }
.mk .mk-resumen-cta { width: calc(100% - 8px); min-height: 50px; margin: 6px 4px 10px; font-size: 16px; }
.mk .mk-resumen .pc-enlace-accion { justify-self: center; }
.mk-pago-campos { display: grid; gap: 24px; }
.mk-bloque-pago { display: grid; gap: 16px; margin: 0; padding: 20px 22px 22px; background: var(--bg-surface); border: 1px solid var(--border); min-width: 0; }
.mk-bloque-pago legend { padding: 0 8px; margin-left: -8px; font-size: 18px; font-weight: 800; color: var(--text-primary); }
.mk-campo { display: grid; gap: 6px; }
.mk .mk-campo-fijo { margin: 0; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px; border: 1px dashed var(--border-strong, rgba(255,255,255,.2)); color: var(--text-primary, #fff); }
.mk .mk-factura { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 0; color: var(--text-secondary); }
.mk .mk-factura[hidden] { display: none; }
.mk .mk-factura .mk-enlace { display: inline-block; padding: 8px 0; }
.mk .mk-boton-enlace { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.mk .mk-boton-enlace:hover { text-decoration: underline; }
.mk .mk-boton-enlace:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.mk .mk-campo > span { font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.mk .mk-campo small { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .mk-campo .pc-select { width: calc(100% - 8px); height: 44px; margin: 4px; }
.mk .mk-campo input[aria-invalid="true"], .mk .mk-casilla input[aria-invalid="true"] { border-color: var(--danger); outline: 2px solid var(--danger); }
.mk .mk-campo-error { font-size: var(--fs-small); font-weight: 600; color: var(--danger); }
.mk-metodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-metodo {
display: flex;
gap: 10px;
min-height: 64px;
padding: 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-control);
background: var(--bg-sunken);
cursor: pointer;
transition: border-color var(--dur-rapida);
}
.mk-metodo:hover, .mk-metodo:has(input:checked) { border-color: var(--accent-cyan); }
.mk-metodo span { display: grid; gap: 2px; }
.mk .mk-metodo strong { font-size: 15px; }
.mk .mk-metodo small { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk-casilla--aviso { padding: 12px 14px; border-left: 4px solid var(--warning); background: color-mix(in srgb, var(--warning) 9%, transparent); }
.mk-pago-lineas { display: grid; gap: 14px; }
.mk .mk-pago-linea { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.mk .mk-pago-linea strong { white-space: nowrap; }
.mk .mk-pago-linea-meta { margin-top: 2px; font-size: var(--fs-tiny); line-height: 1.45; color: var(--text-muted); }
.mk-estado {
--tono: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border: 1px solid var(--tono);
background: color-mix(in srgb, var(--tono) 10%, transparent);
font-size: var(--fs-small);
font-weight: 700;
color: var(--tono);
white-space: nowrap;
}
.mk-estado::before { content: ''; width: 8px; height: 8px; background: var(--tono); }
.mk-estado--bien { --tono: var(--success); }
.mk-estado--info { --tono: var(--accent-cyan); }
.mk-estado--espera { --tono: var(--text-secondary); }
.mk-estado--aviso { --tono: var(--warning); }
.mk-estado--mal { --tono: var(--danger); }
.mk-estado--neutro { --tono: var(--text-muted); }
.mk-pedido { display: grid; gap: 14px; padding: 28px; margin-bottom: 20px; background: var(--bg-surface); border: 1px solid var(--border); border-top: 4px solid var(--border-strong); }
.mk-pedido--bien { border-top-color: var(--success); }
.mk-pedido--info { border-top-color: var(--accent-cyan); }
.mk-pedido--aviso { border-top-color: var(--warning); }
.mk-pedido--mal { border-top-color: var(--danger); }
.mk .mk-pedido .pc-titulo { margin: 0; max-width: none; font-size: clamp(26px, 2.8vw, 36px); }
.mk .mk-pedido-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--text-secondary); }
.mk-pedido-botones { display: flex; flex-wrap: wrap; gap: 18px; padding: 8px 4px; }
.mk-pedido-detalle { position: static; max-width: 720px; }
.mk-pedido-keys { display: grid; gap: 12px; margin-bottom: 20px; }
.mk-pedidos { border-top: 1px solid var(--border); }
.mk-pedido-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px auto; align-items: center; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--border); }
.mk .mk-pedido-id { font-size: 16px; font-weight: 800; }
.mk .mk-pedido-id a:hover { color: var(--accent-cyan); }
.mk .mk-pedido-que { font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-pedido-cuando { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .mk-pedido-total { text-align: right; font-size: 17px; font-weight: 800; white-space: nowrap; }
.mk .mk-ejemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 18px; font-size: var(--fs-small); color: var(--text-muted); }
.mk-biblioteca { display: grid; gap: 16px; }
.mk-entrada { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); }
.mk-entrada-datos { display: grid; gap: 4px; min-width: 0; align-content: start; }
.mk-clave { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; padding: 4px; }
.mk .mk-clave-texto {
flex: 1 1 240px;
min-width: 0;
padding: 11px 14px;
background: var(--bg-sunken);
border: 1px dashed var(--border-strong);
font-family: var(--font-terminal);
font-size: 22px;
letter-spacing: .06em;
color: var(--accent-cyan);
overflow-wrap: anywhere;
}
.mk .mk-clave-camino { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-small); color: var(--warning); }
.mk .mk-canje { margin-top: 6px; border-bottom: 0; }
.mk .mk-canje summary { min-height: 44px; font-size: var(--fs-small); color: var(--accent-cyan); justify-content: flex-start; }
.mk .mk-canje .mk-pasos { padding-bottom: 8px; }
.mk .mk-canje .mk-pasos li { font-size: var(--fs-small); color: var(--text-secondary); }
.mk .mk-nav-cuenta {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
max-width: 190px;
margin-left: auto;
padding: 0 12px;
border-radius: var(--radius-control);
font-size: 15px;
font-weight: 600;
color: var(--text-secondary);
transition: background var(--dur-rapida), color var(--dur-rapida);
}
.mk .mk-nav-cuenta:hover { color: var(--text-primary); background: var(--bg-elevated); }
.mk .mk-nav-cuenta .mk-nav-palabra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-acceso { display: grid; gap: 22px; padding: 24px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-top: 4px solid var(--accent-cyan); }
.mk-acceso-cabeza { display: flex; gap: 16px; align-items: flex-start; }
.mk-acceso-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; background: var(--bg-sunken); border: 1px solid var(--border-strong); color: var(--accent-cyan); }
.mk .mk-acceso-titulo { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.mk .mk-acceso-cabeza p { font-size: 15px; color: var(--text-secondary); }
.mk-acceso-caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-hueco); }
.mk-acceso-camino { display: grid; gap: 12px; align-content: start; padding: 18px 20px 22px; background: var(--bg-sunken); border: 1px solid var(--border); }
.mk .mk-acceso-camino h3 { margin: 0; font-size: 16px; font-weight: 700; }
.mk .mk-acceso-camino > p { font-size: var(--fs-small); color: var(--text-secondary); }
.mk .mk-acceso-camino .pc-btn { justify-self: start; margin: 6px 4px 4px; white-space: normal; text-align: center; }
.mk .mk-acceso-volver { margin-top: 12px; }
.mk .mk-campo textarea {
width: 100%;
min-height: 96px;
padding: 10px 12px;
background: var(--bg-sunken);
border: 1px solid var(--border-strong);
border-radius: var(--radius-control);
color: var(--text-primary);
font: inherit;
font-size: 15px;
line-height: 1.45;
resize: vertical;
}
.mk .mk-campo textarea:hover { border-color: var(--text-muted); }
.mk .mk-campo textarea[aria-invalid="true"], .mk .mk-campo select[aria-invalid="true"] { outline: 2px solid var(--danger); }
.mk .mk-campo input[readonly] { color: var(--text-secondary); background: var(--bg-surface); border-style: dashed; }
.mk-disputa { display: grid; gap: 16px; }
.mk .mk-disputa .pc-btn, .mk .mk-pedido-detalle > .pc-btn { justify-self: start; margin: 4px; }
.mk .mk-disputa-texto { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.mk .mk-disputa-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; }
.mk-pedido-detalle + .mk-pedido-detalle { margin-top: 20px; }
.mk-ticket-cabeza { margin-bottom: 20px; }
.mk .mk-ticket-cabeza .mk-titulo-pagina { margin: 10px 0 12px; }
.mk-mensajes { display: grid; gap: 14px; max-width: 760px; margin-bottom: 24px !important; }
.mk-mensaje { display: grid; gap: 6px; max-width: 88%; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); }
.mk-mensaje--mio { justify-self: end; border-left-color: var(--accent-cyan); background: var(--bg-elevated); }
.mk .mk-mensaje-quien { font-size: var(--fs-tiny); font-weight: 600; color: var(--text-muted); }
.mk .mk-mensaje-texto { font-size: 15px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.mk-respuesta { display: grid; gap: 8px; max-width: 760px; }
.mk-perfil { max-width: 560px; }
.mk .mk-perfil-fijo { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--fs-small); color: var(--text-secondary); }
.mk .mk-seguridad-texto { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.mk-cuenta-cuerpo > .mk-bloque-pago { max-width: 560px; }
.mk-pie { display: grid; gap: 10px; margin-top: var(--seccion); padding-top: 20px; border-top: 1px solid var(--border); }
.mk-pie nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.mk .mk-pie a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); }
.mk .mk-pie a:hover { color: var(--accent-cyan); }
.mk .mk-pie p { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .mk-borrador { margin: 18px 0 26px; max-width: 760px; flex-wrap: nowrap; align-items: flex-start; }
.mk .mk-borrador > span:first-child { padding-top: 2px; }
.mk-legal { max-width: 760px; }
.mk-legal section { margin-top: 30px; }
.mk .mk-legal section p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.mk .mk-legal section ul { display: grid; gap: 8px; margin-top: 12px; padding-left: 20px; list-style: square; }
.mk .mk-legal section li { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.mk .mk-legal section li::marker { color: var(--accent-cyan); }
.mk-legal-otras { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border); }
.mk-pilares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-hueco); }
.mk-pilar { display: flex; gap: 16px; padding: 20px; background: var(--bg-surface); border: 1px solid var(--border); }
.mk .mk-pilar-titulo { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.mk .mk-pilar p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.mk .mk-pilar p + p { margin-top: 8px; }
.mk-pilar > div { min-width: 0; }
.mk .mk-pilar .pc-enlace-accion { white-space: normal; }
.mk .mk-pasos--anchos { max-width: 720px; margin-bottom: 16px; }
.mk .mk-pasos--anchos li { font-size: 16px; }
.mk .mk-pago-legal { font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); }
.mk .mk-pago-legal .mk-enlace, .mk .mk-compra-custodia .mk-enlace { display: inline-block; padding: 6px 0; }
.mk-panel-cabeza { margin-bottom: 20px; }
.mk .mk-panel-cabeza .mk-titulo-pagina { margin: 10px 0 12px; }
.mk-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-hueco); margin: 0 0 20px; }
.mk-cifra { padding: 18px; background: var(--bg-surface); border: 1px solid var(--border); border-top: 3px solid var(--accent-cyan); }
.mk-cifra dt { font-size: var(--fs-tiny); color: var(--text-secondary); }
.mk-cifra dd { margin: 6px 0 8px; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--text-primary); }
.mk .mk-cifra p { font-size: var(--fs-tiny); line-height: 1.45; color: var(--text-muted); }
.mk-campos-fila { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mk-campos-fila:has(> :nth-child(4)) { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.mk-desglose { display: grid; gap: 8px; max-width: 460px; margin: 0; padding: 14px 16px; background: var(--bg-sunken); border: 1px dashed var(--border-strong); }
.mk-desglose > div { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-small); color: var(--text-secondary); }
.mk-desglose dd { margin: 0; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.mk-desglose-total { padding-top: 8px; border-top: 1px solid var(--border); }
.mk-desglose-total dt { color: var(--text-primary); font-weight: 700; }
.mk-desglose-total dd { font-size: 18px; color: var(--success); }
.mk-panel-acciones { display: grid; gap: 10px; padding: 4px; }
.mk .mk-panel-acciones .pc-btn { width: 100%; min-height: 48px; }
.mk .mk-tabla--inventario { margin-top: 20px; }
.mk .mk-clave-mini { font-family: var(--font-terminal); font-size: 19px; letter-spacing: .05em; color: var(--text-primary); overflow-wrap: anywhere; }
.mk-pedido-fila--admin { grid-template-columns: minmax(0, 1fr) auto auto; }
.mk-admin-botones { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px; }
.mk-resolver { display: grid; gap: 12px; max-width: 760px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.mk-resolver .mk-pedido-botones { padding: 4px; }
.mk .mk-volver { margin-top: 28px; }
.mk-nav-prefs { display: inline-flex; align-items: center; }
.mk .mk-nav-prefs .pc-select { min-height: 40px; padding-block: 6px; font-size: var(--fs-small); }
.mk-cuenta-atras { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--warning); }
.mk-cupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; margin: 6px 0 10px; }
.mk-cupon .mk-campo-error { grid-column: 1 / -1; }
.mk .mk-resumen-descuento strong { color: var(--success); }
.mk .mk-clave-api code, .mk .mk-pedido-id code { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.mk .mk-clave-api { padding: 10px 12px; background: var(--bg-sunken); border: 1px solid var(--border); font-size: var(--fs-small); color: var(--text-primary); }
.mk-codigo { max-width: 100%; overflow-x: auto; margin: 6px 0 14px; padding: 12px 14px; background: var(--bg-sunken); border: 1px solid var(--border); }
.mk .mk-codigo code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--text-primary); white-space: pre; }
.mk .mk-campo--motivo { max-width: 420px; margin-top: 8px; }
.mk-aviso-fila { grid-template-columns: minmax(0, 1fr) auto; }
.mk-aviso-fila[data-nuevo] { border-left: 4px solid var(--success); }
.mk .mk-aviso-fila .mk-pedido-que { white-space: normal; overflow: visible; }
.mk-avisos { display: grid; gap: 8px; max-width: 760px; margin-bottom: 24px; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border); }
.mk .mk-avisos-casilla { display: flex; gap: 10px; align-items: center; min-height: 32px; font-size: 15px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.mk .mk-avisos-casilla input { width: 20px; height: 20px; flex: none; accent-color: var(--accent-cyan); }
.mk .mk-avisos-nota { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }
.mk .mk-avisos-nota strong { color: var(--text-primary); }
.mk .mk-correo-simulado summary { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-small); font-weight: 600; color: var(--accent-cyan); cursor: pointer; }
.mk-correo { display: grid; gap: 10px; margin-top: 8px; padding: 14px 16px; border: 1px dashed var(--border-strong); }
.mk .mk-correo :is(p, li) { font-size: var(--fs-small); line-height: 1.5; color: var(--text-primary); }
.mk .mk-correo-cabeza span { color: var(--text-muted); }
.mk-correo ul { display: grid; gap: 4px; padding-left: 18px; list-style: disc; }
.mk-perfil-avisos { display: grid; gap: 10px; max-width: 760px; margin-top: 28px; }
.mk-perfil-avisos .mk-avisos { margin-bottom: 0; }
.mk-estrellas { color: var(--warning); letter-spacing: 1px; white-space: nowrap; }
.mk-estrellas > span { color: var(--text-muted); }
.mk-resenas { display: grid; gap: 14px; max-width: 760px; }
.mk-resena { display: grid; gap: 6px; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border); }
.mk .mk-resena-cabeza { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: var(--fs-small); color: var(--text-muted); }
.mk .mk-resena-texto { font-size: 15px; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }
.mk .mk-resena-nota, .mk .mk-linea-resena { font-size: var(--fs-small); color: var(--text-muted); }
.mk :is(.mk-denuncia, .mk-valorar) summary { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); cursor: pointer; }
.mk :is(.mk-denuncia, .mk-valorar) summary:hover { color: var(--accent-cyan); }
.mk .mk-valorar summary { color: var(--accent-cyan); }
.mk :is(.mk-denuncia, .mk-valorar) form { display: grid; gap: 12px; max-width: 520px; padding: 10px 0 4px; justify-items: start; }
.mk :is(.mk-denuncia, .mk-valorar) form .mk-campo { width: 100%; }
.mk-puntos { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; border: 0; }
.mk .mk-puntos legend { margin-bottom: 6px; padding: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.mk .mk-puntos label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-small); color: var(--text-primary); cursor: pointer; }
.mk-pedido-fila--resena { align-items: start; }
.mk-bajadas { display: grid; gap: 10px; margin-bottom: 24px; padding: 14px 16px; border-left: 4px solid var(--success); background: color-mix(in srgb, var(--success) 9%, transparent); }
.mk-bajadas ul { display: grid; gap: 8px; }
.mk .mk-bajadas li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--fs-small); line-height: 1.45; color: var(--text-primary); }
.mk .mk-bajadas s { color: var(--text-muted); }
.mk .mk-bajadas li a { display: inline-flex; align-items: center; min-height: 24px; }
.mk .pc-migas a { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: 24px; }
.mk .pc-migas { align-items: center; }
.mk-aviso.mk-confirma { display: grid; gap: 10px; }
.mk .mk-nota-suelta { margin-top: 14px; }
.mk .mk-perfil-vender { margin-top: 18px; font-size: 15px; color: var(--text-secondary); }
.mk .mk-sin-ofertas { margin: 20px 0 6px; }
.mk-ficha--sin-ofertas { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: 'arte cabeza'; }
.mk {
--mk-r-c: 8px;
--mk-r: 10px;
--mk-r-g: 14px;
--mk-hueco: 24px;
--mk-linea: color-mix(in srgb, var(--border-strong) 55%, transparent);
--mk-sombra: 0 18px 34px -18px color-mix(in srgb, var(--bg-sunken) 95%, transparent), 0 2px 8px color-mix(in srgb, var(--bg-sunken) 55%, transparent);
--mk-cian-suave: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
--mk-t: var(--dur-media) var(--curva);
}
.mk .pc-btn {
min-height: 44px;
padding: 0 20px;
border: 1px solid var(--border-strong);
border-radius: var(--mk-r-c);
background: var(--bg-elevated);
box-shadow: none;
transition: transform var(--dur-rapida) var(--curva), background var(--dur-rapida), border-color var(--dur-rapida), color var(--dur-rapida), box-shadow var(--mk-t);
}
.mk .pc-btn:hover {
border-color: color-mix(in srgb, var(--accent-cyan) 70%, var(--border-strong));
background: color-mix(in srgb, var(--accent-cyan) 8%, var(--bg-elevated));
transform: translateY(-1px);
box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--accent-cyan) 60%, transparent);
}
.mk .pc-btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.mk .pc-btn--primario {
border-color: var(--accent-cyan);
background: var(--accent-cyan);
color: var(--bg-sunken);
box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent-cyan) 75%, transparent);
}
.mk .pc-btn--primario:hover {
border-color: color-mix(in srgb, var(--accent-cyan) 78%, var(--text-primary));
background: color-mix(in srgb, var(--accent-cyan) 78%, var(--text-primary));
color: var(--bg-sunken);
box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent-cyan) 85%, transparent);
}
.mk .pc-btn--primario:active { box-shadow: none; }
.mk .pc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.mk .pc-btn--primario:disabled { border-color: var(--border-strong); background: var(--bg-elevated); color: var(--text-muted); }
.pc-pagina.mk :is(.pc-pestana, .pc-btn, .pixel-btn, .pc-select, .pc-interruptor):focus-visible { outline-offset: 3px !important; }
.mk .pc-select {
height: 44px;
border: 1px solid var(--border-strong);
border-radius: var(--mk-r-c);
background-color: var(--bg-elevated);
box-shadow: none;
transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
}
.mk .pc-select:hover { border-color: var(--text-muted); }
.mk .pc-select:focus-visible { border-color: var(--accent-cyan); }
.mk :is(.mk-filtro, .mk-campo) .pc-select { width: 100%; margin: 0; }
.mk .pc-buscador {
height: 48px;
margin: 0;
border: 1px solid var(--border-strong);
border-radius: var(--mk-r-c);
background: var(--bg-sunken);
box-shadow: none;
color: var(--text-muted);
transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida), color var(--dur-rapida);
}
.mk .pc-buscador:hover { border-color: var(--text-muted); }
.mk .pc-buscador:focus-within { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--mk-cian-suave); color: var(--accent-cyan); }
.mk .pc-buscador input { font-family: var(--font-ui); font-size: 16px; letter-spacing: 0; }
.mk .mk-barra .mk-buscador { height: 48px; }
.mk .mk-orden .pc-select { height: 48px; }
.mk .mk-buscador--grande {
max-width: 620px;
height: 64px;
margin: 26px 0 6px;
padding: 0 8px 0 20px;
border-color: color-mix(in srgb, var(--accent-cyan) 55%, var(--border-strong));
border-radius: 12px;
background: color-mix(in srgb, var(--bg-sunken) 90%, transparent);
box-shadow: var(--mk-sombra);
color: var(--accent-cyan);
}
.mk .mk-buscador--grande input { font-family: var(--font-terminal); font-size: 22px; letter-spacing: .01em; }
.mk .mk-buscador--grande .pc-btn { min-height: 48px; padding: 0 24px; border-radius: var(--mk-r-c); }
.mk-sugerencias { left: 0; right: 0; border-radius: var(--mk-r); border-color: color-mix(in srgb, var(--accent-cyan) 55%, var(--border-strong)); }
.mk :is(.mk-precio input, .mk-campo input, .mk-campo textarea) { border-radius: var(--mk-r-c); transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
.mk :is(.mk-precio input, .mk-campo input, .mk-campo textarea):focus-visible { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--mk-cian-suave); }
.mk .pc-migas { margin-bottom: 14px; }
.mk-nav {
gap: 8px;
margin-bottom: 28px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}
.mk :is(.mk-nav-enlace, .mk-nav-carrito, .mk-pestana, .mk-nav-cuenta) {
border-radius: var(--mk-r-c);
transition: background var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida), transform var(--dur-rapida) var(--curva), box-shadow var(--mk-t);
}
.mk :is(.mk-nav-enlace, .mk-pestana) { padding: 0 16px; }
.mk :is(.mk-nav-enlace, .mk-nav-carrito, .mk-pestana, .mk-nav-cuenta):active { transform: scale(.97); }
.mk :is(.mk-nav-enlace, .mk-pestana)[aria-current="page"] { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent-pink) 85%, transparent); }
.mk .mk-nav-carrito { gap: 8px; padding: 0 8px 0 14px; border: 1px solid var(--border); background: var(--bg-elevated); }
.mk .mk-nav-carrito:hover, .mk .mk-nav-carrito[aria-current="page"] { border-color: var(--accent-cyan); background: var(--mk-cian-suave); color: var(--accent-cyan); }
.mk .mk-nav-n {
display: grid;
place-items: center;
min-width: 26px;
height: 26px;
padding: 0 7px;
border-radius: 13px;
background: var(--bg-sunken);
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
transition: background var(--dur-rapida), color var(--dur-rapida);
}
.mk .mk-nav-carrito[data-hay] .mk-nav-n { background: var(--accent-cyan); color: var(--bg-sunken); }
.mk .mk-nav-avisos[data-hay] { border-color: color-mix(in srgb, var(--accent-pink) 60%, var(--border)); color: var(--text-primary); }
.mk .mk-nav-avisos[data-hay] .mk-nav-n { background: var(--accent-pink-relleno); color: #fff; }
.mk .mk-nav-avisos[data-hay] > span:first-child { color: var(--accent-pink-texto); transform-origin: 50% 0; animation: mk-campana 700ms var(--curva) 300ms 1 both; }
@keyframes mk-campana { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(6deg); } }
.mk .mk-nav-prefs .pc-select { height: 40px; min-height: 40px; border-color: var(--border); background-color: transparent; font-weight: 700; }
.mk .mk-nav-prefs .pc-select:hover { border-color: var(--border-strong); background-color: var(--bg-elevated); }
.mk-pestanas { gap: 6px; margin: 0 0 28px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); }
.mk > .pc-cabecera { margin-bottom: 22px; }
@media (min-width: 1181px) { .mk > .pc-cabecera { min-height: 408px; } }
@media (min-width: 901px) and (max-width: 1180px) { .mk > .pc-cabecera { min-height: 400px; } }
@media (min-width: 641px) and (max-width: 900px) { .mk > .pc-cabecera { min-height: 475px; } }
.mk .pc-cabecera .pc-titulo { margin: 12px 0 0; max-width: 20ch; font-size: var(--fs-display); }
.mk .pc-cabecera .mk-pedido-estado { margin-top: 18px; }
.mk .pc-cabecera .mk-cuenta { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--text-secondary); text-shadow: 2px 2px 0 color-mix(in srgb, var(--bg-sunken) 90%, transparent); }
.mk .mk-cabecera .pc-entradilla { max-width: 58ch; }
.mk .mk-cabecera--rosa .pc-ante { width: fit-content; padding: 8px 12px; margin-top: 0; border-radius: 6px; background: var(--accent-pink-relleno); color: #fff; text-shadow: none; overflow: visible; }
.mk .pc-cabecera .mk-pegatina-sitio {
position: absolute;
z-index: 2;
top: 50%;
right: max(4%, calc((100% - var(--contenedor)) / 2 + 24px));
transform: translateY(-50%) rotate(-6deg);
filter: drop-shadow(8px 9px 0 color-mix(in srgb, var(--bg-sunken) 88%, transparent));
animation: none;
}
.mk .mk-pegatina {
position: relative;
display: grid;
gap: 10px;
margin: 0;
padding: 26px 40px 28px 30px;
background: var(--accent-yellow);
color: var(--bg-sunken);
clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
text-shadow: none;
}
.mk .mk-pegatina::after { content: ''; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--accent-yellow) 58%, var(--bg-sunken)) 50%); }
.mk .mk-pegatina-rotulo { font-family: var(--font-pixel); font-size: 14px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-sunken); }
.mk .mk-pegatina-texto { font-size: clamp(34px, 4vw, 58px); font-weight: 800; line-height: .98; letter-spacing: -.03em; color: var(--bg-sunken); white-space: nowrap; }
.mk-pronto-seccion { margin-top: 40px !important; }
.mk-pronto-salidas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 36px 0 var(--seccion); }
.mk .mk-pronto-salidas p { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
@media (prefers-reduced-motion: no-preference) {
#mk:not([data-quieto]) > .pc-cabecera .mk-pegatina-sitio { animation: mk-pega 520ms var(--curva) 240ms both; }
}
@keyframes mk-pega { from { opacity: 0; transform: translateY(-50%) rotate(4deg) scale(1.25); } }
@media (max-width: 1180px) {
.mk .pc-cabecera .mk-pegatina-sitio { position: static; width: fit-content; margin: 26px 0 8px 6px; transform: rotate(-4deg); }
@keyframes mk-pega { from { opacity: 0; transform: rotate(3deg) scale(1.2); } }
.mk .mk-pegatina { padding: 20px 30px 22px 22px; }
.mk .mk-pegatina-rotulo { font-size: 12px; }
.mk .mk-pegatina-texto { font-size: clamp(30px, 8vw, 44px); }
}
.mk .mk-titulo-pagina { margin-bottom: 26px; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.02em; }
.mk .pc-seccion { margin-top: clamp(56px, 6vw, 88px); }
.mk .mk-seccion-corta { margin-top: 32px; }
.mk .pc-seccion-cabecera { margin-bottom: 26px; }
.mk .pc-h2 { gap: 16px; font-size: clamp(25px, 2.4vw, 32px); letter-spacing: -.02em; }
.mk .pc-h2::before { width: 10px; height: 10px; translate: 0 -.1em; background: var(--accent-cyan); box-shadow: 4px 4px 0 var(--accent-pink-relleno); }
.mk .pc-seccion-sub { margin-top: 8px; max-width: 68ch; font-size: 16px; }
.mk .pc-seccion-cabecera > .pc-enlace-accion { margin-top: 0; align-self: center; }
.mk-categorias { gap: 16px; }
.mk .mk-categoria {
position: relative;
overflow: hidden;
grid-template-rows: auto auto 1fr auto;
gap: 6px;
min-height: 164px;
padding: 18px;
border-radius: var(--mk-r);
background: linear-gradient(165deg, var(--bg-elevated), var(--bg-surface) 62%);
transition: transform var(--mk-t), border-color var(--dur-rapida), box-shadow var(--mk-t);
}
.mk .mk-categoria::after {
content: '';
position: absolute;
right: -50px;
bottom: -60px;
width: 170px;
height: 170px;
background: radial-gradient(circle, color-mix(in srgb, var(--accent-cyan) 22%, transparent), transparent 68%);
opacity: 0;
transition: opacity var(--mk-t);
pointer-events: none;
}
.mk .mk-categoria:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-cyan) 55%, var(--border-strong)); background: linear-gradient(165deg, var(--bg-elevated), var(--bg-surface) 62%); box-shadow: var(--mk-sombra); }
.mk .mk-categoria:hover::after { opacity: 1; }
.mk .mk-categoria:active { transform: translateY(-1px) scale(.99); }
.mk-categoria-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 10px; background: var(--mk-cian-suave); transition: transform var(--mk-t), background var(--dur-rapida); }
.mk .mk-categoria:hover .mk-categoria-ico { transform: translateY(-2px) scale(1.06); background: color-mix(in srgb, var(--accent-cyan) 20%, transparent); }
.mk .mk-categoria-nombre { font-size: 17px; }
.mk .mk-categoria-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: var(--fs-tiny); font-weight: 700; color: var(--text-secondary); }
.mk .mk-categoria-ir { color: var(--accent-cyan); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-rapida), transform var(--mk-t); }
.mk .mk-categoria:is(:hover, :focus-visible) .mk-categoria-ir { opacity: 1; transform: none; }
.mk-tarjeta {
border-radius: var(--mk-r);
background: var(--bg-surface);
transition: transform var(--mk-t), border-color var(--dur-rapida), box-shadow var(--mk-t), background var(--dur-rapida);
}
.mk-tarjeta:is(:hover, :focus-within) { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-cyan) 55%, var(--border-strong)); background: var(--bg-elevated); box-shadow: var(--mk-sombra); }
.mk-tarjeta-arte { margin: 8px 8px 0; border-radius: 6px; }
.mk-tarjeta-arte img { transition: transform 420ms var(--curva), filter var(--mk-t); }
.mk-tarjeta:is(:hover, :focus-within) .mk-tarjeta-arte img { transform: scale(1.06); }
.mk-tarjeta-arte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--bg-sunken) 62%, transparent)); pointer-events: none; }
.mk-tarjeta-cuerpo { gap: 6px; padding: 14px 16px 16px; }
.mk .mk-tarjeta-titulo { font-size: 16px; transition: color var(--dur-rapida); }
.mk .mk-tarjeta-titulo a { transition: color var(--dur-rapida); }
.mk .mk-tarjeta-precio { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mk-linea); }
.mk .mk-tarjeta-meta { margin-bottom: 8px; }
.mk .mk-tarjeta-precio strong { font-size: 25px; letter-spacing: -.02em; }
.mk .mk-descuento { z-index: 1; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 6px; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent-pink) 90%, transparent); }
.mk .mk-descuento--linea { box-shadow: none; }
.mk-fav {
top: 12px;
right: 12px;
border-radius: 50%;
background: color-mix(in srgb, var(--bg-sunken) 62%, transparent);
filter: none;
transition: color var(--dur-rapida), background var(--dur-rapida), transform var(--mk-t);
}
.mk-fav:hover { background: color-mix(in srgb, var(--bg-sunken) 86%, transparent); transform: scale(1.08); }
.mk-fav:active { transform: scale(.92); }
.mk-fav[aria-pressed="true"] { animation: mk-latido 320ms var(--curva) 1; }
@keyframes mk-latido { 40% { transform: scale(1.22); } }
.mk .mk-fav--texto { border-radius: var(--mk-r-c); background: var(--bg-elevated); animation: none; }
.mk .mk-fav--texto[aria-pressed="true"] { border-color: var(--accent-pink); color: var(--accent-pink-texto); }
.mk-esqueleto .mk-tarjeta-cuerpo span { border-radius: 4px; }
.mk-flecha { border-radius: var(--mk-r-c); background: var(--bg-elevated); transition: border-color var(--dur-rapida), color var(--dur-rapida), background var(--dur-rapida), transform var(--dur-rapida) var(--curva); }
.mk-flecha:hover { background: var(--mk-cian-suave); }
.mk-flecha:active { transform: scale(.94); }
.mk-flecha .ico { transition: transform var(--dur-rapida) var(--curva); }
.mk-flecha[data-mk-carrusel="1"]:hover .ico { transform: translateX(2px); }
.mk-flecha[data-mk-carrusel="-1"]:hover .ico { transform: scaleX(-1) translateX(2px); }
.mk-carrusel-pista { padding: 10px 4px 30px; margin: -10px -4px -30px; }
.mk-pasos-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.mk-paso { display: grid; gap: 18px; align-content: start; }
.mk-paso-cabeza { display: flex; align-items: center; gap: 16px; }
.mk-paso-ico { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-elevated); color: var(--accent-cyan); transition: transform var(--mk-t), border-color var(--dur-rapida), background var(--dur-rapida); }
.mk-paso:hover .mk-paso-ico { transform: translateY(-3px); border-color: var(--accent-cyan); background: var(--mk-cian-suave); }
.mk .mk-paso-num { flex: none; font-family: var(--font-pixel); font-size: 20px; line-height: 1; color: var(--border-strong); transition: color var(--dur-rapida); }
.mk .mk-paso:hover .mk-paso-num { color: var(--accent-yellow); }
.mk-paso:not(:last-child) .mk-paso-cabeza::after { content: ''; flex: 1; height: 2px; margin-right: -20px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px); }
.mk .mk-bloque-texto strong { font-size: 18px; }
.mk .mk-bloque-texto span { font-size: 15px; line-height: 1.5; }
.mk-respaldo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--mk-r-g); background: linear-gradient(115deg, color-mix(in srgb, var(--success) 6%, var(--bg-surface)), var(--bg-surface) 48%); }
.mk-respaldo-punto { display: grid; gap: 16px; align-content: start; padding: 28px 26px; transition: background var(--dur-rapida); }
.mk-respaldo-punto + .mk-respaldo-punto { border-left: 1px solid var(--mk-linea); }
.mk-respaldo-punto:hover { background: color-mix(in srgb, var(--success) 5%, transparent); }
.mk-respaldo-ico, .mk-pie-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); transition: transform var(--mk-t); }
.mk-respaldo-punto:hover .mk-respaldo-ico { transform: translateY(-2px) scale(1.05); }
.mk-bloque { gap: 16px; padding: 22px; border-radius: var(--mk-r); transition: transform var(--mk-t), border-color var(--dur-rapida); }
.mk-bloque:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.mk-bloque-ico { border: 0; border-radius: 10px; background: var(--mk-cian-suave); }
.mk .pc-vacio {
margin: 8px 0 16px;
padding: 52px 24px 48px;
border: 1px dashed var(--border-strong);
border-radius: var(--mk-r-g);
background: radial-gradient(ellipse 60% 70% at 50% 0%, color-mix(in srgb, var(--accent-cyan) 7%, transparent), transparent), var(--bg-surface);
box-shadow: none;
}
.mk .mk-vacio { gap: 10px; }
.mk-vacio-ico { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-elevated); color: var(--accent-cyan); }
.mk .mk-vacio-titulo { font-size: 24px; letter-spacing: -.01em; }
.mk .mk-vacio p { font-size: 16px; }
.mk .pc-vacio .pc-btn { margin-top: 16px; }
.mk .mk-ejemplos { margin-top: 22px; }
.mk-listado { gap: 36px; }
.mk-filtros { padding: 22px; border-radius: var(--mk-r); }
.mk-filtros-cabeza { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--mk-linea); }
.mk .mk-filtros-titulo { font-size: 18px; }
.mk-filtros-campos { gap: 20px; padding: 0; }
.mk .mk-filtro { gap: 8px; }
.mk :is(.mk-precio input, .mk-campo input) { background: var(--bg-elevated); }
.mk-barra { align-items: center; gap: 14px; padding: 0; margin-bottom: 22px; }
.mk .mk-chip { border-radius: 18px; padding: 0 12px 0 14px; transition: border-color var(--dur-rapida), background var(--dur-rapida), transform var(--dur-rapida) var(--curva); }
.mk .mk-chip:hover { background: var(--mk-cian-suave); }
.mk .mk-chip:active { transform: scale(.97); }
.mk-vermas { margin-top: 36px; }
.mk .mk-vermas .pc-btn { min-height: 48px; padding: 0 28px; }
.mk-aviso {
gap: 10px 14px;
padding: 14px 18px;
border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
border-left: 4px solid var(--warning);
border-radius: var(--mk-r-c);
background: color-mix(in srgb, var(--warning) 12%, var(--bg-surface));
font-size: 15px;
}
.mk .mk-aviso p, .mk .mk-aviso span { font-size: 15px; }
.mk-aviso--mal { border-color: color-mix(in srgb, var(--danger) 50%, transparent); border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--bg-surface)); }
.mk-casilla--aviso { border-radius: var(--mk-r-c); }
.mk-bajadas { padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); border-left: 4px solid var(--success); border-radius: var(--mk-r-c); background: color-mix(in srgb, var(--success) 10%, var(--bg-surface)); }
.mk-avisos-lista { display: grid; gap: 12px; border-top: 0; }
.mk-aviso-fila--con-ico {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 18px;
padding: 18px 20px;
border: 1px solid var(--border);
border-radius: var(--mk-r);
background: var(--bg-surface);
transition: border-color var(--dur-rapida), background var(--dur-rapida), transform var(--mk-t);
}
.mk-aviso-fila--con-ico:hover { border-color: var(--border-strong); background: var(--bg-elevated); transform: translateX(2px); }
.mk-aviso-ico { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-elevated); color: var(--text-secondary); }
.mk-aviso-fila--con-ico[data-nuevo] { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); border-left: 4px solid var(--success); background: linear-gradient(90deg, color-mix(in srgb, var(--success) 11%, var(--bg-surface)), var(--bg-surface) 60%); }
.mk-aviso-fila--con-ico[data-nuevo] .mk-aviso-ico { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.mk .mk-aviso-fila--con-ico .mk-pedido-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 17px; }
.mk .mk-aviso-fila--con-ico .mk-pedido-que { margin-top: 4px; font-size: 15px; color: var(--text-primary); }
.mk .mk-aviso-fila--con-ico .mk-pedido-cuando { margin-top: 6px; }
.mk-pedido-fila { padding: 18px 12px; border-radius: var(--mk-r-c); transition: background var(--dur-rapida); }
.mk-pedido-fila:hover { background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); }
.mk-estado { padding: 5px 10px; border-radius: 6px; }
.mk-estado::before { border-radius: 2px; }
.mk :is(.mk-nuevo, .mk-recomendada, .mk-de-ejemplo) { border-radius: 4px; }
.mk :is(.mk-compra, .mk-resumen, .mk-bloque-pago, .mk-acceso, .mk-pedido, .mk-entrada, .mk-vendedor, .mk-garantia-caja, .mk-pilar, .mk-resena, .mk-avisos, .mk-mensaje, .mk-desglose, .mk-correo, .mk-codigo, .mk-clave-api) { border-radius: var(--mk-r); }
.mk :is(.mk-acceso-camino, .mk-metodo, .mk-ficha-arte, .mk-linea-arte, .mk-clave-texto, .mk-linea-cantidad, .mk-vendedor-ico, .mk-acceso-ico) { border-radius: var(--mk-r-c); }
.mk-ficha-meta li { border-radius: var(--mk-r-c); }
.mk :is(.mk-linea-arte, .mk-ficha-arte) { overflow: hidden; }
.mk-tabla { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--mk-r); }
.mk-tabla tbody tr { transition: background var(--dur-rapida); }
.mk-tabla tbody tr:hover td { background: color-mix(in srgb, var(--bg-elevated) 65%, transparent); }
.mk-metodo { transition: border-color var(--dur-rapida), background var(--dur-rapida), transform var(--dur-rapida) var(--curva); }
.mk-metodo:hover { transform: translateY(-1px); }
.mk-metodo:has(input:checked) { background: var(--mk-cian-suave); }
.mk-compra, .mk-resumen { padding: 24px; }
.mk-pilar { transition: transform var(--mk-t), border-color var(--dur-rapida); }
.mk-pilar:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.mk-panel { display: grid; gap: 10px; margin-bottom: 24px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk .mk-panel-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 800; color: var(--text-primary); }
.mk .mk-panel-titulo > span { color: var(--accent-yellow); }
.mk .mk-panel .mk-avisos-nota { font-size: 15px; color: var(--text-secondary); }
.mk .mk-panel .mk-pedidos { margin-top: 6px !important; }
.mk-cifras { gap: 20px; margin: 0 0 24px; }
.mk-cifra {
position: relative;
overflow: hidden;
padding: 22px 22px 20px 26px;
border: 1px solid var(--border);
border-radius: var(--mk-r);
background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
transition: transform var(--mk-t), border-color var(--dur-rapida), box-shadow var(--mk-t);
}
.mk-cifra::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-cyan); }
.mk-cifra:nth-child(2)::before { background: var(--accent-yellow); }
.mk-cifra:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--mk-sombra); }
.mk-cifra dt { font-size: var(--fs-small); font-weight: 600; }
.mk-cifra dd { margin: 8px 0 10px; font-size: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-pie {
grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
gap: 24px 44px;
align-items: center;
margin-top: clamp(64px, 7vw, 96px);
padding: 30px 32px;
border: 1px solid var(--border);
border-radius: var(--mk-r-g);
background: linear-gradient(115deg, color-mix(in srgb, var(--success) 5%, var(--bg-surface)), var(--bg-surface) 40%);
}
.mk-pie-promesa { display: flex; align-items: flex-start; gap: 16px; }
.mk-pie-ico { flex: none; }
.mk .mk-pie-promesa .mk-pie-titulo { margin-bottom: 6px; font-size: 19px; font-weight: 800; color: var(--text-primary); }
.mk .mk-pie-promesa p { font-size: var(--fs-small); line-height: 1.55; color: var(--text-secondary); }
.mk .mk-pie-enlaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.mk .mk-pie-enlaces a {
justify-content: space-between;
gap: 10px;
min-height: 50px;
padding: 0 14px 0 16px;
border: 1px solid var(--mk-linea);
border-radius: var(--mk-r-c);
background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-primary);
transition: border-color var(--dur-rapida), background var(--dur-rapida), color var(--dur-rapida);
}
.mk .mk-pie-enlaces a > span:last-child { flex: none; color: var(--text-muted); transition: transform var(--mk-t), color var(--dur-rapida); }
.mk .mk-pie-enlaces a:hover { border-color: color-mix(in srgb, var(--accent-cyan) 55%, var(--border-strong)); background: var(--mk-cian-suave); color: var(--accent-cyan); }
.mk .mk-pie-enlaces a:hover > span:last-child { color: var(--accent-cyan); transform: translateX(3px); }
@keyframes mk-sube { from { opacity: 0; transform: translateY(12px); } }
@keyframes mk-aparece { from { opacity: 0; transform: scale(1.04); } }
#mk:not([data-quieto]) > .pc-cabecera .pc-contenedor > * { animation: mk-sube 460ms var(--curva) both; }
#mk:not([data-quieto]) > .pc-cabecera .pc-contenedor > :nth-child(2) { animation-delay: 50ms; }
#mk:not([data-quieto]) > .pc-cabecera .pc-contenedor > :nth-child(3) { animation-delay: 100ms; }
#mk:not([data-quieto]) > .pc-cabecera .pc-contenedor > :nth-child(n + 4) { animation-delay: 150ms; }
#mk:not([data-quieto]) > .pc-cabecera .pc-cabecera-arte { animation: mk-aparece 800ms var(--curva) both; }
#mk:not([data-quieto]) :is(.mk-categorias, .mk-cifras, .mk-pasos-fila) > * { animation: mk-sube 420ms var(--curva) both; }
#mk:not([data-quieto]) :is(.mk-categorias, .mk-cifras, .mk-pasos-fila) > :nth-child(2) { animation-delay: 50ms; }
#mk:not([data-quieto]) :is(.mk-categorias, .mk-cifras, .mk-pasos-fila) > :nth-child(3) { animation-delay: 100ms; }
#mk:not([data-quieto]) :is(.mk-categorias, .mk-cifras, .mk-pasos-fila) > :nth-child(4) { animation-delay: 150ms; }
#mk:not([data-quieto]) :is(.mk-categorias, .mk-cifras, .mk-pasos-fila) > :nth-child(5) { animation-delay: 200ms; }
#mk:not([data-quieto]) :is(.mk-categorias, .mk-cifras, .mk-pasos-fila) > :nth-child(n + 6) { animation-delay: 250ms; }
@media (min-width: 1024px) {
.mk-filtros-cerrar, .mk-filtros-pie { display: none; }
}
@media (max-width: 1180px) {
.mk-rejilla, .mk-rejilla--listado { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-carrusel-pista { grid-auto-columns: calc((100% - 2 * var(--mk-hueco)) / 3); }
.mk-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-bloques--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-campos-fila, .mk-campos-fila:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-campo--ancho { grid-column: 1 / -1; }
.mk-ficha--sin-ofertas { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: 'arte cabeza'; }
.mk-ficha { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: 'arte cabeza' 'compra compra'; }
.mk-vendedor { grid-template-columns: auto minmax(0, 1fr); }
.mk-vendedor-cifras { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
.mk-listado { grid-template-columns: minmax(0, 1fr); }
.mk .mk-abrir-filtros { display: inline-flex; }
.mk-filtros {
position: fixed;
z-index: var(--z-modal);
inset: auto 0 0 0;
top: auto;
display: flex;
flex-direction: column;
max-height: 86dvh;
padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
border-width: 2px 0 0;
border-color: var(--accent-cyan);
background: var(--bg-primary);
transform: translateY(100%);
visibility: hidden;
transition: transform var(--dur-media) var(--curva), visibility 0s var(--dur-media);
}
.mk-filtros[data-abierto] { transform: none; visibility: visible; transition: transform var(--dur-media) var(--curva); }
.mk-filtros-cerrar { display: grid; }
.mk-filtros-campos { overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-filtros-pie { display: flex; gap: 18px; padding: 16px 4px 6px; }
.mk-filtros-pie .pc-btn { flex: 1; }
.mk-filtros-velo { position: fixed; z-index: calc(var(--z-modal) - 1); inset: 0; background: var(--bg-overlay); }
.mk-dos { grid-template-columns: minmax(0, 1fr); }
.mk-resumen { position: static; }
}
@media (max-width: 640px) {
.mk { --mk-hueco: 12px; padding-top: 12px; }
.mk-rejilla, .mk-rejilla--listado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-carrusel-pista { grid-auto-columns: 62%; }
.mk-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-bloques--3, .mk-bloques--4, .mk-detalles, .mk-garantia, .mk-metodos, .mk-filtros-campos { grid-template-columns: minmax(0, 1fr); }
.mk-nav { margin-bottom: 20px; }
.mk-nav { gap: 4px; }
.mk .mk-nav-enlace { padding: 0 7px; font-size: 14px; }
.mk .mk-nav-carrito { padding: 0 10px; font-size: 14px; }
.mk .mk-nav-enlace > span, .mk .mk-nav-palabra { display: none; }
.mk .mk-carrusel .pc-enlace-accion { display: none; }
.mk .mk-sugerencia-detalle { display: none; }
.mk .mk-buscador--grande { height: auto; flex-wrap: wrap; padding: 8px 12px 12px; margin: 20px 4px 8px; }
.mk .mk-buscador--grande input { flex: 1 1 60%; height: 44px; font-size: 16px; }
.mk .mk-buscador--grande .pc-btn { flex: 1 1 100%; }
.mk :is(input, select) { font-size: 16px !important; }
.mk-tarjeta-cuerpo { padding: 10px 10px 12px; }
.mk .mk-tarjeta-titulo { font-size: 14px; }
.mk .mk-tarjeta-precio strong { font-size: 20px; }
.mk-barra { flex-wrap: wrap; gap: 14px; }
.mk .mk-barra .mk-buscador { flex: 1 1 100%; }
.mk .mk-abrir-filtros, .mk .mk-orden { flex: 1 1 0; min-width: 0; }
.mk .mk-orden .pc-select { width: 100%; height: 44px; }
.mk-ficha { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: 'arte cabeza' 'compra compra'; gap: 16px; }
.mk-ficha-meta { margin-top: 12px !important; gap: 6px; }
.mk-ficha-meta li { min-width: 0; padding: 6px 10px; }
.mk .mk-ficha-desde { margin-top: 12px; }
.mk-compra { padding: 16px; }
.mk .mk-compra-precio strong { font-size: 32px; }
.mk-tabla, .mk-tabla tbody, .mk-tabla tr, .mk-tabla td { display: block; }
.mk-tabla { border: 0; background: none; }
.mk-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mk-tabla tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--border); }
.mk-tabla tr[data-recomendada] { border-color: var(--accent-cyan); }
.mk-tabla td { padding: 0; border: 0; background: none !important; }
.mk-tabla td:first-child, .mk-tabla td:last-child { grid-column: 1 / -1; }
.mk-tabla td[data-rotulo]:not(:first-child)::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: var(--fs-tiny); color: var(--text-muted); }
.mk-tabla td:last-child { padding: 4px; }
.mk-tabla td:last-child .pc-btn { width: 100%; }
.mk-vendedor { grid-template-columns: minmax(0, 1fr); padding: 16px; }
.mk-vendedor-ico { width: 60px; height: 60px; }
.mk-vendedor-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-linea { grid-template-columns: 92px minmax(0, 1fr) 44px; grid-template-areas: 'arte datos quitar' 'cantidad cantidad importe'; gap: 10px 12px; }
.mk-linea-arte { grid-area: arte; align-self: start; }
.mk-linea-datos { grid-area: datos; }
.mk-linea-cantidad { grid-area: cantidad; justify-self: start; }
.mk-linea-importe { grid-area: importe; grid-column: 2 / 4; }
.mk-linea-quitar { grid-area: quitar; align-self: start; }
.mk-linea--mal > .mk-linea-datos:first-child { grid-column: 1 / 3; }
.mk-bloque-pago { padding: 16px; }
.mk-acceso { padding: 16px; }
.mk-cifras, .mk-campos-fila, .mk-campos-fila:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
.mk-ficha--sin-ofertas { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: 'arte cabeza'; }
.mk-pedido-fila--admin { grid-template-columns: minmax(0, 1fr) auto; }
.mk-pedido-fila--admin .mk-admin-botones { grid-column: 1 / -1; }
.mk-admin-botones .pc-btn { flex: 1 1 0; }
.mk-tabla--inventario td:first-child { padding: 0; }
.mk-pilares { grid-template-columns: minmax(0, 1fr); }
.mk-pie nav { display: grid; }
.mk-acceso-caminos { grid-template-columns: minmax(0, 1fr); }
.mk .mk-acceso-camino .pc-btn { justify-self: stretch; }
.mk .mk-nav-cuenta { padding: 0 8px; margin-left: 0; }
.mk-mensaje { max-width: 100%; }
.mk .mk-disputa .pc-btn, .mk .mk-pedido-detalle > .pc-btn { justify-self: stretch; }
.mk-pedido { padding: 18px; }
.mk .mk-pedido-botones .pc-btn { flex: 1 1 100%; min-width: 0; white-space: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; }
.mk-pedido-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
.mk-pedido-fila > .pc-btn { grid-column: 1 / -1; margin: 4px; }
.mk .mk-pedido-total { text-align: left; }
.mk-entrada { grid-template-columns: minmax(0, 1fr); }
.mk-entrada .mk-linea-arte { max-width: 200px; }
.mk-clave .pc-btn { flex: 1 1 0; }
.mk .mk-clave-texto { font-size: 19px; }
.mk:has(.mk-cta-fija) { padding-bottom: calc(var(--seccion) + 84px); }
.mk-cta-fija {
position: fixed;
z-index: var(--z-sticky);
inset: auto 0 0 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 20px calc(16px + env(safe-area-inset-bottom)) 16px;
background: var(--bg-primary);
border-top: 2px solid var(--accent-cyan);
}
.mk-cta-fija p { display: grid; min-width: 0; }
.mk .mk-cta-fija span { font-size: var(--fs-tiny); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-cta-fija strong { font-size: 20px; font-weight: 800; }
.mk .mk-cta-fija .pc-btn { flex: none; min-height: 48px; --s: transparent; }
.mk:has(.mk-cta-fija) .mk-resumen-cta { display: none; }
}
@media (max-width: 1180px) {
.mk-respaldo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-respaldo-punto:nth-child(3) { border-left: 0; }
.mk-respaldo-punto:nth-child(n + 3) { border-top: 1px solid var(--mk-linea); }
.mk-pie { grid-template-columns: minmax(0, 1fr); }
.mk .mk-pie-enlaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.mk-pasos-fila { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.mk-paso { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-paso-cabeza { flex-direction: column; gap: 8px; }
.mk-paso:not(:last-child) .mk-paso-cabeza::after { display: none; }
}
@media (max-width: 640px) {
.mk { --mk-hueco: 12px; }
.mk-nav { flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 20px; }
.mk-nav-enlaces { flex: 1 1 100%; }
.mk .mk-nav-enlace { flex: 1 1 0; justify-content: center; padding: 0 8px; }
.mk .mk-nav-prefs .pc-select { min-width: 104px; }
.mk .mk-nav-cuenta { margin-left: auto; }
.mk .mk-nav-carrito { padding: 0 6px 0 10px; gap: 6px; }
.mk-pestanas { margin-bottom: 20px; }
.mk .mk-buscador--grande { height: auto; margin: 20px 0 0; padding: 8px 10px 10px; }
.mk .mk-buscador--grande input { font-size: 18px; }
.mk .pc-seccion { margin-top: 48px; }
.mk .pc-seccion-cabecera { margin-bottom: 18px; }
.mk-categorias { gap: 12px; }
.mk .mk-categoria { min-height: 0; padding: 14px; }
.mk .mk-categoria-ir { opacity: 1; transform: none; }
.mk-tarjeta-arte { margin: 6px 6px 0; }
.mk-tarjeta-cuerpo { padding: 10px 10px 12px; }
.mk .mk-tarjeta-titulo { font-size: 14px; }
.mk .mk-tarjeta-precio strong { font-size: 20px; }
.mk-fav { top: 6px; right: 6px; }
.mk-respaldo { grid-template-columns: minmax(0, 1fr); }
.mk-respaldo-punto { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; }
.mk-respaldo-punto + .mk-respaldo-punto { border-left: 0; border-top: 1px solid var(--mk-linea); }
.mk .pc-vacio { padding: 36px 18px 32px; }
.mk-aviso-fila--con-ico { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 14px; }
.mk-aviso-ico { width: 44px; height: 44px; }
.mk-cifras { gap: 12px; }
.mk-cifra dd { font-size: 28px; }
.mk-panel { padding: 18px; }
.mk-pie { padding: 20px 18px; }
.mk .mk-pie-enlaces { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) {
.mk-tarjeta:hover, .mk .mk-categoria:hover, .mk-cifra:hover, .mk .pc-btn:hover, .mk-bloque:hover, .mk-pilar:hover, .mk-aviso-fila--con-ico:hover { transform: none; box-shadow: none; }
.mk-tarjeta:hover .mk-tarjeta-arte img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.mk *, .mk *::before, .mk *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
.mk :is(.mk-tarjeta, .mk-categoria, .mk-fav, .pc-btn, .mk-cifra, .mk-bloque, .mk-pilar, .mk-metodo, .mk-aviso-fila--con-ico):is(:hover, :focus-within, :active) { transform: none; }
.mk :is(.mk-tarjeta-arte img, .mk-categoria-ico, .mk-paso-ico, .mk-respaldo-ico, .mk-categoria-ir) { transform: none !important; }
}
.mk-v-barra { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.mk-v-barra .mk-pestanas { flex: 1 1 auto; min-width: 0; margin: 0; }
.mk .mk-v-nueva { flex: 0 0 auto; min-height: 48px; gap: 8px; white-space: nowrap; }
.mk-v-como { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.mk-v-como li { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk-v-como strong { font-size: 16px; color: var(--text-primary); }
.mk-v-como li > span:last-child { font-size: 14px; color: var(--text-secondary); }
.mk-v-como-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-pink-relleno); color: #fff; font-weight: 800; }
.mk-v-inicio { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.mk-v-tarjeta { display: grid; gap: 8px; align-content: start; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--mk-r); background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface)); }
.mk-v-tarjeta--saldo { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.mk .mk-v-tarjeta-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.mk .mk-v-tarjeta-t > span { color: var(--success); }
.mk .mk-v-saldo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 2px 0 4px; }
.mk .mk-v-saldo strong { font-size: 34px; font-weight: 900; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mk .mk-v-saldo-ret { font-size: 16px; font-weight: 700; color: var(--warning); font-variant-numeric: tabular-nums; }
.mk-v-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.mk-v-kpis > div { display: grid; gap: 4px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk-v-kpis dt { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.mk-v-kpis dd { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mk-v-kpis dd small { font-size: 15px; color: var(--text-muted); }
.mk-v-kpis dd.mk-v-kpi-aviso { color: var(--warning); }
.mk .mk-v-kpis p { margin: 0; font-size: 13px; color: var(--text-muted); }
.mk .mk-panel-titulo small { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.mk-v-checklist { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.mk-v-checklist li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-primary); }
.mk-v-checklist li[data-hecho] { color: var(--text-muted); text-decoration: line-through; }
.mk-v-check { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border: 2px solid var(--border-strong); border-radius: 6px; }
.mk-v-checklist li[data-hecho] .mk-v-check { border-color: var(--success); background: var(--success); color: var(--bg-sunken); }
.mk-v-avisos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-v-aviso { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px 12px 16px; border: 1px solid var(--border); border-left: 4px solid var(--tono, var(--accent-cyan)); border-radius: var(--mk-r-c, 8px); background: var(--bg-surface); font-size: 15px; }
.mk-v-aviso--aviso { --tono: var(--warning); }
.mk-v-aviso--info { --tono: var(--accent-cyan); }
.mk-v-aviso--espera { --tono: var(--text-secondary); }
.mk-v-aviso .pc-btn { flex: 0 0 auto; }
.mk-v-cabeza-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mk-v-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
section + .mk-v-filtros { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.mk-v-filtro-q { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 380px; }
.mk-v-filtro-q > span[aria-hidden] { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; display: grid; }
.mk .mk-v-filtro-q input { width: 100%; min-height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elevated); color: var(--text-primary); font: inherit; }
.mk-v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk .mk-v-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mk .mk-v-chip span { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--bg-sunken); font-size: 12px; text-align: center; }
.mk .mk-v-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.mk .mk-v-chip[aria-pressed="true"] { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 14%, var(--bg-surface)); color: var(--text-primary); }
.mk-v-ofertas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mk-v-oferta { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); transition: border-color var(--dur-rapida, .15s); }
.mk-v-oferta:hover { border-color: var(--border-strong); }
.mk-v-oferta-arte { display: block; aspect-ratio: 460 / 215; overflow: hidden; border-radius: 6px; background: var(--bg-sunken); }
.mk-v-oferta-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-v-oferta-arte--poster { width: 64px; aspect-ratio: 2 / 3; justify-self: center; }
.mk-v-oferta-cuerpo { display: grid; gap: 4px; min-width: 0; }
.mk .mk-v-oferta-titulo { margin: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.mk .mk-v-oferta-titulo a { color: var(--text-primary); text-decoration: none; }
.mk .mk-v-oferta-titulo a:hover { text-decoration: underline; }
.mk .mk-v-oferta-que { margin: 0; font-size: 14px; color: var(--text-secondary); }
.mk .mk-v-oferta-cifras { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--text-muted); }
.mk-v-oferta-lado { display: grid; justify-items: end; gap: 6px; }
.mk .mk-v-oferta-precio { margin: 0; font-size: 20px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mk .mk-v-sin { padding: 18px; text-align: center; }
.mk-v-asistente { display: grid; gap: 22px; scroll-margin-top: 90px; }
.mk-v-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-v-paso { position: relative; }
.mk-v-paso-boton { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 700; text-align: left; }
.mk-v-paso { display: flex; align-items: stretch; }
.mk-v-paso:not(:has(button)) { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); color: var(--text-muted); font-size: 14px; font-weight: 700; }
.mk-v-paso-n { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; font-size: 13px; font-weight: 900; }
.mk-v-paso--actual:not(:has(button)) { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 12%, var(--bg-surface)); color: var(--text-primary); }
.mk-v-paso--actual .mk-v-paso-n { border-color: var(--accent-cyan); background: var(--accent-cyan); color: var(--bg-sunken); }
.mk-v-paso-boton { cursor: pointer; color: var(--success); }
.mk-v-paso-boton .mk-v-paso-n { border-color: var(--success); background: var(--success); color: var(--bg-sunken); }
.mk-v-paso-boton > span:nth-child(2) { color: var(--text-secondary); }
.mk-v-paso-boton:hover { border-color: var(--border-strong); }
.mk-v-paso-boton:hover > span:nth-child(2) { color: var(--text-primary); text-decoration: underline; }
.mk-v-asistente-cuerpo { display: grid; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk .mk-v-asistente-cuerpo > .pc-h2 { margin: 0; outline: none; }
.mk-v-asistente-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.mk-v-pie-derecha { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-v-tipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk .mk-v-tipo-op { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--border); border-radius: 12px; background: var(--bg-elevated); color: var(--text-secondary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mk .mk-v-tipo-op > span:first-child { grid-row: span 2; color: var(--text-muted); }
.mk .mk-v-tipo-op strong { font-size: 16px; color: var(--text-primary); }
.mk .mk-v-tipo-op:hover { border-color: var(--border-strong); }
.mk .mk-v-tipo-op[aria-checked="true"] { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 10%, var(--bg-elevated)); }
.mk .mk-v-tipo-op[aria-checked="true"] > span:first-child { color: var(--accent-cyan); }
.mk-v-buscador { position: relative; display: flex; align-items: center; }
.mk-v-buscador-ico { position: absolute; left: 16px; display: grid; color: var(--accent-cyan); pointer-events: none; }
.mk .mk-v-buscador input { width: 100%; min-height: 58px; padding: 0 18px 0 54px; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--bg-elevated); color: var(--text-primary); font: inherit; font-size: 18px; }
.mk .mk-v-buscador input:focus { border-color: var(--accent-cyan); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-cyan) 22%, transparent); }
.mk-v-juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mk-v-juegos--tarjetas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mk .mk-v-juego { display: grid; gap: 6px; align-content: start; width: 100%; height: 100%; padding: 8px 8px 10px; border: 2px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-rapida, .15s), transform var(--dur-rapida, .15s); }
.mk .mk-v-juego:hover, .mk .mk-v-juego:focus-visible { border-color: var(--accent-cyan); transform: translateY(-2px); }
.mk-v-juego-arte { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; background: var(--bg-sunken); }
.mk-v-juego-arte--apaisado { aspect-ratio: 460 / 215; }
.mk-v-juego-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-v-juego-titulo { font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--text-primary); }
.mk-v-juego-dato { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.mk-v-sin-juego { display: grid; gap: 6px; padding: 20px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.mk .mk-v-sin-juego p { margin: 0; }
.mk-v-eleccion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-sunken); }
.mk-v-eleccion-arte { display: block; width: 120px; aspect-ratio: 460 / 215; overflow: hidden; border-radius: 6px; background: var(--bg-elevated); }
.mk-v-eleccion-arte--poster { width: 56px; aspect-ratio: 2 / 3; }
.mk-v-eleccion-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk .mk-v-eleccion .pc-ante, .mk .mk-v-eleccion .mk-avisos-nota { margin: 0; }
.mk .mk-v-eleccion-titulo { margin: 2px 0; font-size: 18px; font-weight: 900; color: var(--text-primary); }
.mk-v-grupo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mk .mk-v-grupo legend { margin-bottom: 8px; padding: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.mk-v-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.mk-v-op { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--border); border-radius: 10px; background: var(--bg-elevated); cursor: pointer; }
.mk-v-op:hover { border-color: var(--border-strong); }
.mk-v-op:has(input:checked) { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 10%, var(--bg-elevated)); }
.mk-v-op:has(input:focus-visible) { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.mk-v-op input { margin: 3px 0 0; accent-color: var(--accent-cyan); }
.mk-v-op > span { display: grid; gap: 2px; }
.mk-v-op strong { font-size: 15px; color: var(--text-primary); }
.mk-v-op small { font-size: 12px; color: var(--text-muted); }
.mk-v-campo-corto { max-width: 320px; }
.mk-v-ayuda-fila { display: flex; justify-content: space-between; gap: 12px; }
.mk-v-ayuda-fila > span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.mk .mk-v-enlace-boton { padding: 0; border: 0; background: none; color: var(--accent-cyan); font: inherit; font-size: 14px; font-weight: 700; text-align: left; text-decoration: underline; cursor: pointer; }
.mk .mk-v-asistente-cuerpo textarea, .mk .mk-v-asistente-cuerpo input[type="text"], .mk .mk-v-asistente-cuerpo input[type="number"] { width: 100%; }
.mk-v-precio { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 460px); gap: 24px; align-items: start; }
.mk-v-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: start; }
.mk-v-previa { display: grid; gap: 0; margin: 6px 0 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-elevated); }
.mk-v-previa-arte { display: block; aspect-ratio: 460 / 215; overflow: hidden; background: var(--bg-sunken); }
.mk-v-previa-arte--poster { aspect-ratio: 16 / 9; }
.mk-v-previa-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-v-previa figcaption { display: grid; gap: 4px; padding: 12px 14px 14px; }
.mk .mk-v-previa figcaption p { margin: 0; }
.mk .mk-v-previa-titulo { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.mk .mk-v-previa-precio { font-size: 22px; font-weight: 900; color: var(--accent-cyan); }
.mk-v-hecho { justify-items: center; text-align: center; padding: 40px 24px; }
.mk-v-hecho-ico { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.mk .mk-v-hecho .mk-pedido-botones { justify-content: center; flex-wrap: wrap; }
.mk-v-saldo-detalle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.mk-v-saldo-detalle dt { font-size: 13px; color: var(--text-secondary); }
.mk-v-saldo-detalle dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mk-v-lista-numerada { display: grid; gap: 8px; margin: 0; padding-left: 22px; font-size: 15px; color: var(--text-secondary); }
.mk-v-nota { grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.mk .mk-v-nota-cifra { margin: 0; font-size: 48px; font-weight: 900; line-height: 1; color: var(--accent-yellow); }
.mk .mk-v-nota-cifra small { font-size: 20px; color: var(--text-muted); }
.mk-v-reparto { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-width: 420px; }
.mk-v-reparto li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 13px; color: var(--text-secondary); }
.mk-v-barra-nota { height: 8px; overflow: hidden; border-radius: 4px; background: var(--bg-sunken); }
.mk-v-barra-nota > span { display: block; height: 100%; background: var(--accent-yellow); }
.mk-v-resenas { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.mk-v-resena { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); }
.mk .mk-v-resena p { margin: 0; }
.mk-v-resena-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-weight: 700; }
.mk-v-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 4px 0; }
.mk-v-datos dt { font-size: 13px; color: var(--text-secondary); }
.mk-v-datos dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.mk-v-avanzado { border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk-v-avanzado > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; font-weight: 800; cursor: pointer; }
.mk-v-avanzado-cuerpo { display: grid; gap: 12px; padding: 0 20px 20px; }
.mk-v-oferta-cabeza { display: flex; align-items: center; gap: 16px; }
.mk-v-oferta-cabeza .mk-v-oferta-arte { width: 140px; flex: 0 0 auto; }
.mk-v-ficha-pedida-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1180px) {
.mk-v-inicio { grid-template-columns: minmax(0, 1fr); }
.mk-v-como { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.mk-v-barra { flex-direction: column; align-items: stretch; }
.mk .mk-v-nueva { justify-content: center; }
.mk-v-kpis, .mk-v-saldo-detalle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-v-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mk-v-paso:not(:has(button)), .mk-v-paso-boton { justify-content: center; padding: 6px; }
.mk-v-paso:not(:has(button)) > span:last-child, .mk-v-paso-boton > span:nth-child(2) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-v-asistente-cuerpo { padding: 16px; }
.mk-v-tipo, .mk-v-precio, .mk-v-dos, .mk-v-nota { grid-template-columns: minmax(0, 1fr); }
.mk-v-juegos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.mk-v-oferta { grid-template-columns: 84px minmax(0, 1fr); }
.mk-v-oferta-lado { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; }
.mk-v-oferta-lado .mk-v-oferta-precio { justify-self: end; }
.mk-v-aviso { flex-direction: column; align-items: stretch; }
.mk-v-eleccion { grid-template-columns: auto minmax(0, 1fr); }
.mk-v-eleccion > .pc-btn { grid-column: 1 / -1; }
.mk-v-eleccion-arte { width: 84px; }
.mk-v-como { grid-template-columns: minmax(0, 1fr); }
.mk-v-oferta-cabeza { align-items: flex-start; }
.mk-v-oferta-cabeza .mk-v-oferta-arte { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
.mk .mk-v-juego:hover, .mk .mk-v-juego:focus-visible { transform: none; }
}
.mk .mk-chat-aviso { display: grid; gap: 4px; max-width: 760px; margin: 0 0 24px; }
.mk-chat { margin-top: 4px; }
.mk-chat-vacio { padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--mk-r); color: var(--text-secondary); font-size: 15px; list-style: none; }
.mk-mensaje--oculto { opacity: .7; }
.mk-mensaje--oculto .mk-mensaje-texto { color: var(--text-muted); }
.mk .mk-chat-denunciar { justify-self: start; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-tiny); text-decoration: underline; cursor: pointer; }
.mk .mk-chat-denunciar:hover { color: var(--danger); }
.mk .mk-chat-denunciado { font-size: var(--fs-tiny); color: var(--warning); }
.mk-chat-denuncia { display: grid; gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.mk-chat-denuncia .mk-puntos { display: grid; gap: 6px; }
.mk-v-venta-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mk .mk-v-panel {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 18px 0 16px;
border: 1px solid color-mix(in srgb, var(--accent-yellow) 70%, transparent);
border-radius: var(--mk-r-c, 8px);
background: linear-gradient(135deg, color-mix(in srgb, var(--accent-yellow) 22%, var(--bg-elevated)), var(--bg-surface));
color: var(--accent-yellow);
font-weight: 800;
white-space: nowrap;
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-yellow) 45%, transparent);
transition: transform var(--dur-rapida), box-shadow var(--dur-rapida), background var(--dur-rapida);
}
.mk .mk-v-panel:hover { transform: translateY(-1px); box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--accent-yellow) 70%, transparent); color: var(--accent-yellow); }
.mk .mk-v-panel[aria-current="page"] { background: var(--accent-yellow); color: #14110a; }
.mk-v-panel-nuevo {
padding: 2px 6px;
border-radius: 4px;
background: var(--accent-pink-relleno);
color: #fff;
font-family: var(--font-pixel);
font-size: 8px;
letter-spacing: .06em;
line-height: 1.4;
animation: mk-pc-brillo 2.4s ease-in-out infinite;
}
@keyframes mk-pc-brillo { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 37, 133, 0); } 50% { box-shadow: 0 0 10px 1px rgba(247, 37, 133, .55); } }
@media (prefers-reduced-motion: reduce) { .mk-v-panel-nuevo { animation: none; } }
.mk-pc .mk-pc-pestanas { margin: 0 0 22px; }
.mk .mk-pc-pestanas button.mk-pestana { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.mk .mk-pc-pestanas button.mk-pestana[aria-current="page"] { background: var(--accent-pink-relleno); color: #fff; }
.mk-pc-cuenta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bg-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 800; }
.mk-pc-cuenta--alerta { background: var(--warning); color: #1a1205; }
.mk-pc-cuerpo { display: grid; gap: 22px; }
.mk-pc-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-pc-periodo > span { font-size: 14px; color: var(--text-secondary); }
.mk .mk-pc-periodo .mk-chip[aria-pressed="true"] { border-color: var(--accent-yellow); background: color-mix(in srgb, var(--accent-yellow) 16%, var(--bg-elevated)); color: var(--accent-yellow); }
.mk-pc-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mk-pc-pendiente ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-pc-aviso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--tono, var(--accent-cyan)); border-radius: var(--mk-r-c, 8px); background: var(--bg-surface); }
.mk-pc-aviso--mal { --tono: var(--danger); }
.mk-pc-aviso--aviso { --tono: var(--warning); }
.mk-pc-aviso--info { --tono: var(--accent-cyan); }
.mk-pc-aviso-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--tono) 16%, transparent); color: var(--tono); }
.mk .mk-pc-todo-bien { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border)); border-radius: var(--mk-r-c, 8px); color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--bg-surface)); }
.mk-pc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.mk-pc-kpi { display: grid; gap: 4px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk-pc-kpi--destacado { border-color: color-mix(in srgb, var(--accent-yellow) 55%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent-yellow) 10%, var(--bg-surface)), var(--bg-surface)); }
.mk-pc-kpi dt { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.mk-pc-kpi dd { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mk-pc-kpi--destacado dd { color: var(--accent-yellow); }
.mk-pc-kpi dd.mk-pc-kpi-mal { color: var(--danger); }
.mk .mk-pc-kpi p { margin: 0; font-size: 13px; color: var(--text-muted); }
.mk-pc-cambio { font-weight: 800; color: var(--text-secondary); }
.mk-pc-cambio--sube { color: var(--success); }
.mk-pc-cambio--baja { color: var(--danger); }
.mk-pc-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mk-pc-ancha { grid-column: span 2; }
.mk-pc-tarjeta { display: grid; gap: 10px; align-content: start; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--mk-r); background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface)); }
.mk .mk-pc-tarjeta-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.mk .mk-pc-tarjeta-t svg { color: var(--accent-yellow); }
.mk .mk-pc-grande { margin: 0; font-size: 26px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mk-pc-mini { display: grid; gap: 6px; margin: 0; }
.mk-pc-mini > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.mk-pc-mini dt { color: var(--text-secondary); }
.mk-pc-mini dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-pc-verif--si { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.mk-pc-verif--si .mk-pc-grande, .mk-pc-verif--si .mk-pc-tarjeta-t svg { color: var(--success); }
.mk-pc-progreso { width: 100%; height: 10px; border: 0; border-radius: 6px; background: var(--bg-sunken); overflow: hidden; -webkit-appearance: none; appearance: none; }
.mk-pc-progreso::-webkit-progress-bar { background: var(--bg-sunken); border-radius: 6px; }
.mk-pc-progreso::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-cyan), var(--success)); border-radius: 6px; }
.mk-pc-progreso::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-cyan), var(--success)); border-radius: 6px; }
.mk-pc-grafica { margin: 0; }
.mk-pc-grafica svg { display: block; width: 100%; height: 170px; }
.mk-pc-barra { fill: color-mix(in srgb, var(--accent-yellow) 75%, var(--accent-pink)); transition: fill var(--dur-rapida); }
.mk-pc-barra:hover { fill: var(--accent-cyan); }
.mk-pc-grafica figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.mk-pc-grafica-vacia { display: grid; place-items: center; gap: 6px; min-height: 170px; border: 1px dashed var(--border-strong); border-radius: var(--mk-r-c, 8px); color: var(--text-muted); }
.mk-pc-grafica-vacia p { margin: 0; }
.mk-pc-top { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: top; }
.mk-pc-top li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; counter-increment: top; }
.mk-pc-top li::before { content: counter(top); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--bg-sunken); color: var(--accent-yellow); font-weight: 900; font-size: 13px; }
.mk-pc-top-t, .mk-pc-top-c { display: grid; min-width: 0; font-weight: 700; }
.mk-pc-top-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pc-top-c { text-align: right; font-variant-numeric: tabular-nums; }
.mk-pc-top small, .mk-pc-tabla small, .mk-pc-encurso small, .mk-pc-elegir-t small { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.mk .mk-pc-explica { margin: 0; }
.mk-pc-incidencias, .mk-pc-chats, .mk-pc-encurso { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mk-pc-incidencia { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk-pc-incidencia--abierta { border-left: 4px solid var(--warning); }
.mk .mk-pc-incidencia-t { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 16px; }
.mk-pc-incidencia .mk-mensajes { margin-bottom: 0 !important; }
.mk-pc-chat { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--mk-r); background: var(--bg-surface); }
.mk-pc-chat--pendiente { border-left: 4px solid var(--warning); }
.mk .mk-pc-chat-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.mk .mk-pc-chat-ultimo { margin: 4px 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-pc-tabla-caja { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--mk-r); }
.mk-pc-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.mk-pc-tabla th { padding: 10px 14px; background: var(--bg-elevated); text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.mk-pc-tabla td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: middle; }
.mk-pc-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-pc-tabla tbody tr:hover { background: color-mix(in srgb, var(--bg-elevated) 60%, transparent); }
.mk-pc-tabla .pc-btn { min-height: 36px; }
.mk-pc-antes { color: var(--text-muted); text-decoration: line-through; }
.mk-pc-rebaja { color: var(--accent-yellow); }
.mk-pc-mal { color: var(--danger); font-weight: 800; }
.mk-pc-poco { color: var(--warning); font-weight: 800; }
.mk-pc-descuento { display: grid; gap: 16px; }
.mk-pc-descuento fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-pc-descuento legend { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 0; font-weight: 800; }
.mk-pc-pct { grid-template-columns: 1fr; }
.mk-pc-campo-corto { max-width: 220px; }
.mk-pc-pct { display: flex !important; flex-wrap: wrap; align-items: end; gap: 12px 16px !important; }
.mk-pc-elegir ul { display: grid; gap: 6px; max-height: 360px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.mk-pc-elegir label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--mk-r-c, 8px); background: var(--bg-surface); cursor: pointer; }
.mk-pc-elegir label:has(input:checked) { border-color: var(--accent-yellow); background: color-mix(in srgb, var(--accent-yellow) 8%, var(--bg-surface)); }
.mk-pc-elegir input { width: 18px; height: 18px; accent-color: var(--accent-yellow); }
.mk-pc-elegir-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.mk-pc-elegir-p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-pc-elegir-p strong { color: var(--accent-yellow); }
.mk-pc-encurso li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--mk-r-c, 8px); background: var(--bg-surface); }
@media (max-width: 1000px) {
.mk-pc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.mk .mk-v-panel { justify-content: center; }
.mk-pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-pc-kpi dd { font-size: 22px; }
.mk-pc-rejilla { grid-template-columns: minmax(0, 1fr); }
.mk-pc-ancha { grid-column: auto; }
.mk-pc-aviso { grid-template-columns: auto minmax(0, 1fr); }
.mk-pc-aviso .pc-btn { grid-column: 1 / -1; }
.mk-pc-chat { flex-direction: column; align-items: stretch; }
.mk-pc-encurso li { grid-template-columns: minmax(0, 1fr); }
.mk-pc-elegir label { grid-template-columns: auto minmax(0, 1fr); }
.mk-pc-elegir-p { grid-column: 2; }
}
.mk .mk-pc-grande small { font-size: 15px; color: var(--text-muted); }
.mk .mk-pc-enlace { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent-cyan); cursor: pointer; }
.mk-alta { max-width: 860px; }
.mk-alta-paso { display: grid; gap: 14px; margin: 0; padding: 18px 0 4px; border: 0; border-top: 1px solid var(--border); min-width: 0; }
.mk .mk-alta-paso legend { display: flex; align-items: center; gap: 10px; padding: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.mk-alta-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-alta-tipo { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 2px solid var(--border); border-radius: 10px; background: var(--bg-elevated); cursor: pointer; }
.mk-alta-tipo:hover { border-color: var(--border-strong); }
.mk-alta-tipo:has(input:checked) { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 10%, var(--bg-elevated)); }
.mk-alta-tipo:has(input:focus-visible) { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.mk-alta-tipo input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent-cyan); }
.mk-alta-tipo > span { display: grid; gap: 4px; }
.mk .mk-alta-tipo strong { font-size: 15px; color: var(--text-primary); }
.mk .mk-alta-tipo small { font-size: 13px; color: var(--text-muted); }
.mk-alta-pro { display: grid; gap: 14px; }
.mk-alta-pro[hidden], [data-mk-alta-particular][hidden] { display: none; }
.mk .mk-alta-casilla { align-items: flex-start; font-weight: 600; line-height: 1.45; }
.mk .mk-alta-casilla input { margin-top: 2px; }
.mk-alta-consulta { margin: 0; color: var(--text-primary); }
.mk .mk-enlace-legal { color: #5ab0ff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mk .mk-enlace-legal:hover { color: #8cc8ff; }
.mk .mk-enlace-legal:focus-visible { outline: 2px solid #5ab0ff; outline-offset: 2px; }
.mk .mk-alta input[type="date"] { max-width: 220px; }
.mk-alta-acuse-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin: 0 0 12px; }
.mk-alta-acuse-datos dt { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk-alta-acuse-datos dd { margin: 0; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.mk-alta-acuse-docs { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: var(--fs-small); }
.mk-alta-acuse-docs li { overflow-wrap: anywhere; }
.mk-v-op--cerrado { opacity: .55; cursor: not-allowed; }
.mk-v-tipo-op:disabled { opacity: .55; cursor: not-allowed; }
.mk .mk-v-declara { margin: 0 0 6px; font-size: 13px; }
.mk-admin-legal { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--bg-elevated); }
.mk-admin-legal .mk-alta-acuse-docs small { color: var(--text-muted); }
.mk-quien-vende { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent-cyan); background: var(--bg-surface); font-size: var(--fs-small); }
.mk-quien-vende--particular { border-left-color: var(--warning); }
.mk .mk-quien-vende p { margin: 0; }
.mk-condicion { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: var(--fs-tiny); font-weight: 800; letter-spacing: .02em; color: var(--accent-cyan); }
.mk-condicion--particular { color: var(--warning); }
.mk-info-previa { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--fs-tiny); color: var(--text-secondary); }
.mk-denunciar { margin-top: 12px; }
.mk-denunciar summary { cursor: pointer; font-size: var(--fs-small); font-weight: 700; color: var(--text-muted); }
.mk-denunciar form { display: grid; gap: 12px; margin-top: 10px; }
@media (max-width: 760px) {
.mk-alta-tipos { grid-template-columns: minmax(0, 1fr); }
}
.mk-alta-contacto { display: grid; gap: 8px; margin-top: -6px; }
.mk .mk-alta-verificado { margin: -6px 0 0; font-size: var(--fs-small); font-weight: 700; color: var(--success, var(--accent-cyan)); }
.mk .mk-alta-telefono { display: grid; gap: 10px; }
.mk .mk-alta-fijo { margin: 2px 0 0; }
.mk .mk-categorias.mk-categorias--pocas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk .mk-categorias--pocas .mk-categoria { min-height: 132px; }
.mk .mk-categorias-pronto { margin-top: 14px; font-size: 14px; color: var(--text-muted); }
.mk .mk-categorias-pronto strong { color: var(--accent-series, #ffd60a); }
@media (max-width: 560px) {
.mk .mk-categorias.mk-categorias--pocas { grid-template-columns: minmax(0, 1fr); }
}
.mk .mk-populares-vacio {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 28px;
padding: 28px;
border: 2px dashed rgba(255, 214, 10, .4);
border-radius: var(--mk-r, 12px);
background: rgba(255, 214, 10, .04);
}
.mk .mk-populares-vacio-ico { color: #ffd60a; }
.mk .mk-populares-vacio-texto { flex: 1 1 320px; min-width: 0; }
.mk .mk-populares-vacio h3 { margin: 0 0 6px; font-size: 20px; color: var(--text-primary); }
.mk .mk-populares-vacio p { max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.mk .mk-populares-vacio-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-stripe { display: grid; gap: 10px; }
.mk-stripe .pc-h2 { margin: 0; }
.mk-stripe--aviso { border-left: 4px solid var(--accent-yellow); }
.mk-stripe--listo { border-left: 4px solid var(--success); }
.mk .mk-nav-enlace--resaltado:not([aria-current="page"]) {
color: var(--text-primary);
background:
linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
linear-gradient(100deg, var(--accent-cyan), var(--accent-pink)) border-box;
border: 1px solid transparent;
box-shadow: 0 0 14px rgba(247, 37, 133, .22);
}
.mk .mk-nav-enlace--resaltado:not([aria-current="page"]) svg { color: var(--accent-cyan); }
.mk .mk-nav-enlace--resaltado:not([aria-current="page"]):hover { box-shadow: 0 0 18px rgba(0, 245, 212, .32); background:
linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
linear-gradient(100deg, var(--accent-cyan), var(--accent-pink)) border-box; }
.mk .mk-boton-indies { border-color: var(--accent-pink); color: var(--text-primary); }
.mk .mki-contacto {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
align-items: center;
gap: 28px 40px;
margin: 8px 0 var(--seccion, 56px);
padding: 30px 34px;
border: 1px solid transparent;
border-radius: 14px;
background:
radial-gradient(90% 140% at 100% 0%, rgba(247, 37, 133, .12), transparent 60%) padding-box,
radial-gradient(90% 140% at 0% 100%, rgba(0, 245, 212, .09), transparent 60%) padding-box,
linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
linear-gradient(120deg, var(--accent-cyan), var(--accent-pink)) border-box;
}
.mk .mki-contacto .pc-ante { margin: 0 0 8px; }
.mk .mki-contacto .pc-h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); }
.mk .mki-contacto-sub { margin: 0 0 16px; color: var(--text-secondary); max-width: 54ch; }
.mk .mki-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk .mki-lista li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-primary); }
.mk .mki-lista li svg { flex: none; margin-top: 3px; color: var(--accent-cyan); }
.mk .mki-contacto-accion { display: grid; gap: 12px; justify-items: start; }
.mk .mki-boton { gap: 10px; }
.mk .mki-correo { margin: 0; color: var(--text-secondary); font-size: var(--fs-small, 14px); }
.mk .mki-correo a { color: var(--accent-cyan); font-weight: 700; word-break: break-all; }
.mk .mki-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk .mki-escaparate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mk .mki-juego { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.mk .mki-juego-arte { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 10px; border: 1px solid var(--border-color, rgba(255, 255, 255, .1)); background: var(--bg-sunken); transition: transform var(--mk-t, .18s), border-color var(--mk-t, .18s); }
.mk .mki-juego-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk .mki-juego:is(:hover, :focus-visible) .mki-juego-arte { transform: translateY(-3px); border-color: var(--accent-cyan); }
.mk .mki-juego-titulo { font-weight: 700; line-height: 1.25; }
.mk .mki-juego-meta { color: var(--text-secondary); font-size: var(--fs-tiny, 12px); }
.mk .mki-cierre { display: grid; justify-items: center; gap: 10px; text-align: center; margin: var(--seccion, 56px) 0; padding: 36px 20px; border-top: 1px solid var(--border-color, rgba(255, 255, 255, .1)); }
.mk .mki-cierre .pc-h2 { margin: 0; }
.mk .mki-cierre p { margin: 0 0 8px; color: var(--text-secondary); }
@media (max-width: 1000px) {
.mk .mki-escaparate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.mk .mki-contacto { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
.mk .mki-contacto-accion { justify-items: stretch; }
.mk .mki-boton { justify-content: center; }
.mk .mki-tres { grid-template-columns: minmax(0, 1fr); }
.mk .mki-escaparate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.mk .mki-juego-arte { transition: none; }
.mk .mki-juego:is(:hover, :focus-visible) .mki-juego-arte { transform: none; }
}
.mk .mki-contacto-accion .mki-boton + .mki-boton { margin-top: -2px; }
.mk .mki-cierre .mki-boton + .mki-boton { margin-top: 4px; }
.mk .mki-dos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.mk .mki-form textarea { width: 100%; min-height: 110px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sunken); color: var(--text-primary); font: inherit; resize: vertical; }
.mk .mki-form textarea:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.mk .mki-reglas .mki-lista { margin-top: 10px; }
.mk .mki-reglas .mki-lista li { color: var(--text-secondary); }
.mk .mki-envio { align-items: start; }
.mk .mki-envio .mk-enlace { white-space: nowrap; }
.mk .mki-motivo { margin: 10px 0 0; }
.mk .mki-descripcion { margin: 8px 0 0; color: var(--text-secondary); max-width: 70ch; white-space: pre-line; }
.mk .mki-envio--revision { grid-template-columns: minmax(0, 1fr); }
.mk .mki-rechazo { display: grid; gap: 10px; margin-top: 14px; max-width: 520px; }
.mk .mki-presentados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mk .mki-presentado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); }
.mk .mki-presentado-titulo { margin: 0; font-weight: 800; font-size: 17px; color: var(--text-primary); }
.mk .mki-presentado-estudio { margin: 2px 0 0; color: var(--accent-cyan); font-size: var(--fs-small, 14px); font-weight: 600; }
.mk .mki-presentado-texto { margin: 8px 0 0; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
.mk .mki-dos, .mk .mki-presentados { grid-template-columns: minmax(0, 1fr); }
.mk .mki-presentado { grid-template-columns: minmax(0, 1fr); }
}
.mk .mk-como-ordenamos { margin: 6px 0 0; text-align: right; font-size: var(--fs-tiny, 12px); }
@media (max-width: 760px) { .mk .mk-como-ordenamos { text-align: left; } }
.mk .mki-dominio { color: var(--text-muted, #9aa3b5); font-size: var(--fs-tiny, 12px); overflow-wrap: anywhere; }
.mk .mk-regalo { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border-color, rgba(255,255,255,.12)); border-radius: 8px; }
.mk .mk-regalo p { margin: 4px 0; }
.mk .mk-regalo-form .mk-campo { margin: 6px 0; }
.mk .tk-filtros { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 12px; align-items: center; }
.mk .tk-buscar { margin: 0; }
.mk .tk-orden { margin: 0; }
.mk .tk-orden .pc-select { width: 100%; }
.mk .tk-stock { margin: 0; white-space: nowrap; }
.mk .tk-cuenta { margin: 14px 0 18px; }
.mk .tk-mas { display: flex; justify-content: center; margin-top: 28px; }
.mk .tk-sin-stock { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.mk .tk-steam { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-tiny); font-weight: 600; color: var(--text-secondary); }
.mk .tk-steam-marca { padding: 1px 6px; border: 1px solid var(--border-strong); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.mk .tk-steam--positivo { color: var(--success); }
.mk .tk-steam--variado { color: var(--warning); }
.mk .tk-steam--negativo { color: var(--danger); }
.mk .tk-steam .tk-steam-marca { color: var(--text-muted); }
.mk .tk-resumen { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.mk .tk-resumen li { font-size: var(--fs-small); color: var(--text-secondary); }
.mk .tk-descripcion { margin-top: 18px; max-width: 68ch; color: var(--text-secondary); line-height: var(--line-height-normal); }
.mk .tk-compra-linea { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.mk .tk-compra-linea:last-of-type { border-bottom: 0; padding-bottom: 0; }
.mk .tk-compra-plataforma { font-size: var(--fs-small); font-weight: 700; color: var(--accent-cyan); }
.mk .tk-compra-nada { font-size: 17px; font-weight: 600; }
.mk .tk-bloque { margin-top: var(--pc-ritmo-corto); }
.mk .tk-steam-caja { display: grid; gap: 10px; max-width: 560px; padding: 20px 22px; background: var(--bg-surface); border: 1px solid var(--border); }
.mk .tk-steam-rotulo { font-size: 22px; font-weight: 800; }
.mk .tk-steam-cifras { color: var(--text-secondary); }
.mk .tk-steam-cifras strong { color: var(--text-primary); }
.mk .tk-barra { height: 10px; background: var(--bg-sunken); border: 1px solid var(--border-strong); }
.mk .tk-barra span { display: block; height: 100%; background: var(--accent-cyan); }
.mk .tk-nota-pie { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .tk-creadores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mk .tk-creador { display: grid; gap: 12px; align-content: start; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border); }
.mk .tk-creador-quien { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.mk .tk-creador-quien img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-full); flex: none; }
.mk .tk-creador-quien > span { display: grid; gap: 2px; }
.mk .tk-creador-quien > span > span { font-size: var(--fs-tiny); color: var(--text-muted); }
.mk .tk-creador-quien:hover strong { color: var(--accent-cyan); }
.mk .tk-creador-opinion { display: grid; gap: 8px; color: var(--text-secondary); }
.mk .tk-creador-nota strong { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.mk .tk-creador-opinion blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--accent-cyan); color: var(--text-primary); font-style: italic; }
@media (max-width: 900px) {
.mk .tk-filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mk .tk-buscar { grid-column: 1 / -1; }
.mk .tk-creadores { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
.mk .tk-filtros { grid-template-columns: minmax(0, 1fr); }
.mk .tk-stock { white-space: normal; }
}
.mk.tk--tienda #mk-cuerpo > .tk-tienda { margin-top: 0; }
.mk.tk--tienda > .tk-cabecera { margin-bottom: 8px; }
.mk.tk--tienda > .tk-cabecera { min-height: clamp(220px, 13vw, 250px); padding: 30px 0 22px; }
.mk.tk--tienda > .tk-cabecera > .pc-cabecera-arte {
width: min(60%, 1100px); opacity: 1;
background-size: cover; background-position: 50% 50%; image-rendering: auto;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(0deg, transparent 0, #000 12%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(0deg, transparent 0, #000 12%);
mask-composite: intersect;
}
.mk.tk--tienda .tk-cabecera .pc-contenedor { position: relative; }
.mk.tk--tienda .tk-titulo { display: flex; align-items: center; gap: 22px; margin: 6px 0 18px; font-size: clamp(42px, 3.4vw, 54px); line-height: 1; }
.mk-titulo-ico { display: inline-grid; color: var(--accent-pink, #f72585); filter: drop-shadow(0 0 12px rgba(247, 37, 133, .45)); }
.tk-valores { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 0; padding: 0; list-style: none; }
.tk-valores > li { display: flex; align-items: center; gap: 14px; }
.tk-valores > li > span:last-child { display: grid; gap: 2px; }
.tk-valores strong { font-size: 14.5px; font-weight: 600; color: #fff; }
.tk-valores strong + span { font-size: 12.5px; color: var(--text-secondary); }
.tk-valores .mk-enlace { font-size: 12.5px; }
.tk-valor-ico { display: inline-grid; }
.tk-valor-ico--rosa { color: var(--accent-pink, #f72585); filter: drop-shadow(0 0 8px rgba(247, 37, 133, .4)); }
.tk-valor-ico--cian { color: var(--accent-cyan, #00f5d4); filter: drop-shadow(0 0 8px rgba(0, 245, 212, .35)); }
.tk-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 16px; }
.tk-herr-secciones { display: flex; gap: 12px; }
.tk-herr-seccion, .tk-herr-buscar, .tk-herr .pc-select, .tk-herr-vista, .tk-herr-carrito {
min-height: 46px; box-sizing: border-box; border-radius: 6px;
border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 14, 26, .92);
}
.tk-herr-seccion {
display: inline-flex; align-items: center; gap: 12px; padding: 0 22px;
font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap;
transition: border-color .15s, background .15s;
}
.tk-herr-seccion svg { color: var(--accent-cyan, #00f5d4); }
.tk-herr-seccion:hover { color: #fff; border-color: rgba(245, 34, 128, .6); }
.tk-herr-seccion[aria-current="page"] { background: #f52280; border-color: #f52280; box-shadow: 0 0 18px rgba(245, 34, 128, .35); }
.tk-herr-seccion[aria-current="page"] svg { color: #fff; }
.tk-herr-buscar { flex: 1 1 300px; display: flex; align-items: center; gap: 12px; padding: 0 16px; min-width: 0; }
.tk-herr-buscar:focus-within { border-color: #f52280; }
.tk-herr-buscar input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; }
.tk-herr-buscar input::placeholder { color: #8f93a8; }
.tk-herr .pc-select { height: 46px; padding: 0 38px 0 14px; color: #fff; font-size: 14px; font-weight: 600; }
.tk-herr-orden .pc-select { min-width: 190px; }
.tk-herr .mk-nav-prefs { margin: 0; }
.tk-herr-stock { display: inline-flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; cursor: pointer; }
.tk-herr-stock input { width: 20px; height: 20px; accent-color: #f52280; }
.tk-herr-vistas { display: flex; gap: 8px; }
.tk-herr-vista { display: grid; place-items: center; width: 46px; padding: 0; color: #c9cbe0; cursor: pointer; }
.tk-herr-vista[aria-pressed="true"] { color: #f52280; border-color: #f52280; box-shadow: inset 0 0 0 1px rgba(245, 34, 128, .4), 0 0 14px rgba(245, 34, 128, .25); }
.tk-herr-vista:focus-visible, .tk-herr-seccion:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tk-herr .mk-nav-carrito, .tk-herr .mk-nav-avisos { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 14, 26, .92); }
.tk-carrito-flotante {
position: fixed; right: 24px; bottom: 24px; z-index: 800;
display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
color: #fff; text-decoration: none; background: #f52280;
box-shadow: 0 0 0 3px rgba(6, 8, 15, .9), 0 0 24px rgba(245, 34, 128, .55), 0 10px 26px rgba(0, 0, 0, .5);
transition: transform .15s, box-shadow .15s;
}
.tk-carrito-flotante:hover { color: #fff; transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 3px rgba(6, 8, 15, .9), 0 0 32px rgba(245, 34, 128, .75), 0 12px 30px rgba(0, 0, 0, .55); }
.tk-carrito-flotante:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.tk-carrito-n {
position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
display: none; place-items: center; border-radius: 12px;
font-size: 13px; font-weight: 800; color: #06080f; background: #00f5d4; box-shadow: 0 0 0 2px #06080f;
}
.tk-carrito-flotante[data-hay] .tk-carrito-n { display: grid; }
body:has(.aviso-correo) .tk-carrito-flotante { bottom: 104px; }
@media (max-width: 720px) {
.tk-carrito-flotante { right: 16px; bottom: 16px; width: 56px; height: 56px; }
body:has(.aviso-correo) .tk-carrito-flotante { bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { .tk-carrito-flotante { transition: none; } .tk-carrito-flotante:hover { transform: none; } }
.tk-cuenta { margin: 0 0 16px; font-size: 14px; color: var(--text-secondary); }
.tk-cuenta .mk-enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tk-cartas--rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: 20px; }
.tk-carta {
position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;
border-radius: 8px; background: rgba(12, 14, 26, .94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
transition: transform .2s, box-shadow .2s;
}
.tk-carta:hover, .tk-carta:focus-within { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(245, 34, 128, .7), 0 12px 28px rgba(0, 0, 0, .4), 0 0 22px rgba(245, 34, 128, .18); }
.tk-carta-arte { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; background: #0b0f1a; }
.tk-carta-arte img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tk-carta:hover .tk-carta-arte img { transform: scale(1.04); }
.tk-carta-vertical img { object-position: 50% 22%; }
.tk-carta-dto, .tk-carta-nota { position: absolute; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 4px; font-size: 14px; font-weight: 800; line-height: 1.1; color: #fff; }
.tk-carta-dto { left: 10px; background: #f52280; box-shadow: 0 2px 10px rgba(245, 34, 128, .45); }
.tk-carta-nota { right: 10px; background: rgba(6, 8, 16, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tk-carta-nota > span { color: #ffc83d; }
.tk-carta-cuerpo { display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px; padding: 12px 14px 14px; min-width: 0; }
.tk-carta-titulo { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-carta-titulo a { color: #fff; text-decoration: none; }
.tk-carta-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.tk-carta-meta { margin: 0; font-size: 13.5px; color: var(--text-secondary); }
.tk-carta-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 4px; font-size: 13px; }
.tk-carta-plat { padding: 3px 9px; border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e7e6ef; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.tk-carta-stock { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.tk-carta-stock > span { width: 9px; height: 9px; border-radius: 50%; }
.tk-carta-stock--si { color: #3fe08a; }
.tk-carta-stock--si > span { background: #3fe08a; box-shadow: 0 0 8px rgba(63, 224, 138, .7); }
.tk-carta-stock--no { color: var(--text-muted); }
.tk-carta-stock--no > span { background: var(--text-muted); }
.tk-carta-steam { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #3fe08a; font-weight: 600; }
.tk-carta-pie { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; align-self: end; margin-top: 6px; }
.tk-carta-precio { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.tk-carta-precio strong { font-size: 21px; font-weight: 800; color: #fff; }
.tk-carta-precio s { font-size: 13px; color: #8f93a8; }
.tk-carta-precio--sin { font-size: 15px; font-weight: 700; color: #8f93a8; }
.tk-carta-boton {
display: grid; place-items: center; width: 46px; height: 38px; padding: 0; border-radius: 6px; cursor: pointer;
color: #fff; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .24);
transition: border-color .15s, background .15s, color .15s;
}
.tk-carta-boton:hover { color: #fff; border-color: #f52280; background: rgba(245, 34, 128, .16); }
.tk-carta-boton:disabled { opacity: .45; cursor: not-allowed; }
.tk-carta-boton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tk-cartas--lista { display: grid; gap: 12px; }
.tk-cartas--lista .tk-carta { grid-template-rows: none; grid-template-columns: 240px minmax(0, 1fr); }
.tk-cartas--lista .tk-carta-arte { aspect-ratio: auto; min-height: 112px; }
.tk-cartas--lista .tk-carta-cuerpo { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 24px; align-items: center; padding: 14px 18px; }
.tk-cartas--lista .tk-carta-titulo, .tk-cartas--lista .tk-carta-meta, .tk-cartas--lista .tk-carta-datos { grid-column: 1; }
.tk-cartas--lista .tk-carta-steam { margin-left: 0; }
.tk-cartas--lista .tk-carta-pie { grid-column: 2; grid-row: 1 / 4; margin: 0; gap: 18px; }
@media (max-width: 1100px) {
.tk-herr-buscar { order: 5; flex-basis: 100%; }
}
@media (max-width: 720px) {
.mk.tk--tienda > .tk-cabecera { padding-top: 132px; }
.mk.tk--tienda > .tk-cabecera > .pc-cabecera-arte {
width: 100%; bottom: auto; height: 150px; background-position: 64% 50%;
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.tk-valores { gap: 12px 24px; }
.tk-herr-secciones { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
.tk-herr-seccion { padding: 0 16px; }
.tk-herr-orden { flex: 1 1 auto; }
.tk-herr-orden .pc-select { min-width: 0; width: 100%; }
.tk-cartas--lista .tk-carta { grid-template-columns: 120px minmax(0, 1fr); }
.tk-cartas--lista .tk-carta-cuerpo { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
.tk-cartas--lista .tk-carta-pie { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.tk-carta, .tk-carta-arte img { transition: none; }
.tk-carta:hover { transform: none; }
.tk-carta:hover .tk-carta-arte img { transform: none; }
}