/* Cuenta del cliente (etapa 5). «Entrar» y «Mi cuenta» usan las piezas de la muestra aprobada por Paula, que ya
   están en tienda.css (.acceso-pag, .promo, .tarjeta, .campo, .cab-cuenta, .menu-cuenta, .losas, .contenido);
   aquí va solo lo nuevo: el botón de arriba, el código, las tarjetas de pedidos, los ID y los avisos. */

#vista-cuenta,#vista-entrar{--rol:var(--lila)}   /* el color del cliente en la muestra */

/* ---- botón de arriba ---- */
.btn-cuenta{display:flex;align-items:center;gap:8px;flex:none;border:1px solid var(--fucsia);background:#FF2E931f;padding:9px 14px;clip-path:var(--corte);
  font:700 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--texto);text-decoration:none;white-space:nowrap}
.btn-cuenta:hover{background:#FF2E9340}
.btn-cuenta.con-cuenta{border-color:var(--lila);background:#9A5CFF26}
@media (max-width:520px){.btn-cuenta{padding:9px 12px}.btn-cuenta span:last-child{display:none}}   /* en celular, solo el ícono */

/* ---- Entrar ---- */
.promo .ventajas li div{min-width:0}
.campo input.codigo-6{font:700 30px/1 var(--hud);letter-spacing:.5em;text-align:center;padding:14px 10px 14px calc(10px + .5em)}
.tarjeta .paso{margin:0}
.tarjeta .comprar{margin:0}
.tarjeta .error[hidden]{display:none}

/* ---- Mi cuenta ---- */
a.losa{text-decoration:none}
.contenido h2 em{font-style:normal;color:var(--fucsia)}
.cuenta-vacio{display:grid;gap:12px;justify-items:start;padding:18px;border:1px dashed var(--borde);background:var(--noche)}
.cuenta-vacio p{margin:0;color:var(--suave)}
.cuenta-vacio b{color:var(--texto);overflow-wrap:anywhere}
.contenido .error{margin:0;color:var(--rosa)}
.contenido .ayuda,.ventana-pago .ayuda{margin:0;color:var(--suave);font-size:13px}
.ventana-pago .ayuda a{color:var(--menta)}

/* «Mis pedidos» en filas (13/oct, Paula: «queda mejor organizarlos por filas y un poco más de orden») */
.mis-lista{display:grid;border:1px solid var(--borde);background:var(--noche)}
.mis-cab,.mi-pedido{display:grid;grid-template-columns:56px 118px minmax(0,1fr) 196px 118px;align-items:center;gap:14px;padding:12px 16px}
.mis-cab{padding-block:10px;border-bottom:1px solid var(--borde);color:var(--suave);font:700 10.5px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase}
.mis-cab span:last-child{text-align:right;padding-right:22px}
.mi-pedido{color:inherit;text-decoration:none;border-bottom:1px solid var(--borde);transition:background .15s}
.mi-pedido:last-child{border-bottom:0}
.mi-pedido:hover{background:#ffffff0a}
.mi-pedido:hover .mp-tot i{color:var(--rosa)}
.mp-img{width:56px;aspect-ratio:4/3;overflow:hidden;background:var(--jc);display:grid;place-items:center;border-radius:4px}
.mp-img img{width:100%;height:100%;object-fit:cover}
.mp-img b{font:400 15px/1 var(--titulo);color:#fff}
.mp-cod,.mp-det{display:grid;gap:4px;min-width:0}
.mp-cod b{font:700 14px/1 var(--hud);letter-spacing:.08em;color:var(--rosa)}
.mp-det b{font-size:14px}
.mp-cod small,.mp-det small{color:var(--suave);font-size:12.5px;overflow-wrap:anywhere}
.mp-est{display:flex;gap:6px;flex-wrap:wrap}
.mp-tot{display:flex;align-items:center;justify-content:flex-end;gap:10px;font:700 15px/1 var(--hud);font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-tot i{font-style:normal;color:var(--suave);font-size:18px;transition:color .15s}
@media (max-width:760px){
  .mis-cab{display:none}
  .mi-pedido{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"img cod cod" "img det det" "img est tot";gap:6px 12px;padding:12px}
  .mp-img{grid-area:img;width:44px;align-self:start}
  .mp-cod b{white-space:nowrap}
  .mp-cod{grid-area:cod}.mp-det{grid-area:det}.mp-est{grid-area:est}.mp-tot{grid-area:tot}
}
.est{font:700 10.5px/1 var(--hud);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border:1px solid currentColor}
.est.esp{color:var(--oro)}
.est.ok{color:var(--menta)}
.est.env{color:#B98CFF}
.est.mal{color:var(--rosa)}
.est.res{color:#7CC7FF}

/* «➕ Agregar ID» (13/oct) */
.nid-abrir{justify-self:start;margin-bottom:14px}
.nid{display:grid;gap:12px;padding:16px;margin-bottom:14px;border:1px solid var(--borde);border-left:3px solid var(--rol, var(--fucsia));background:var(--noche)}
.nid h3{margin:0;font:700 16px/1.2 var(--body)}
.nid .ayuda{margin:0}
.nid-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.nid-acc{display:flex;gap:10px;flex-wrap:wrap}
.mis-ids{display:grid;gap:8px}
.mi-id{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--borde);border-left:3px solid var(--rol);background:var(--noche)}
.mi-id-dato{display:grid;gap:3px;min-width:0}
.mi-id-dato b{font-size:15px}
.mi-id-dato code{font:700 16px/1.2 var(--hud);letter-spacing:.06em;color:var(--lima);overflow-wrap:anywhere}
.mi-id-dato small{color:var(--suave);font-size:12px}
.mi-id-acc{display:flex;gap:8px;flex-wrap:wrap}

.cuenta-datos{display:grid;gap:14px;max-width:480px}
.cuenta-datos .comprar{margin:0}
.campo-t input[readonly],.ventana-pago input[readonly]{color:var(--suave);background:#ffffff08;cursor:default}

/* ---- ID guardados en la página del juego ---- */
.ids-guardados{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:13px;color:var(--suave)}
.ids-guardados button{border:1px solid var(--borde);background:var(--noche);padding:6px 10px;cursor:pointer;font:700 12px/1 var(--hud);letter-spacing:.04em;color:var(--texto);clip-path:var(--corte)}
.ids-guardados button:hover{border-color:var(--lima);color:var(--lima)}

/* ---- avisos de la cuenta en «Mis pedidos» y en el pedido ---- */
.invita-cuenta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;border:1px solid #9A5CFF66;background:#9A5CFF14;font-size:14px}
.invita-cuenta span{flex:1;min-width:min(100%,220px)}
.nota-cuenta{margin:0;padding:12px 14px;border-left:4px solid var(--menta);background:#3EE6A614;font-size:14px}

/* «📋 Datos guardados» y «💾 Guardar estos datos» (13/oct) */
.ids-guardados{display:grid;gap:6px;margin:0 0 12px;padding:10px 12px;border:1px solid #C6F43244;background:#C6F4320d;clip-path:var(--corte);font-size:13px;color:var(--texto)}
.ids-guardados>b{font:700 12px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--lima)}
.ids-lista{display:flex;flex-wrap:wrap;gap:6px}
.ids-guardados button{display:grid;gap:3px;text-align:left;padding:8px 11px}
.ids-guardados button small{font:600 11px/1.1 var(--body);letter-spacing:0;text-transform:none;color:var(--menta)}
.ids-guardados button[aria-pressed="true"]{border-color:var(--lima);box-shadow:inset 0 0 0 1px var(--lima)}
.guardar-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.guardar-id:empty{display:none}
.guardar-id .ayuda{margin:0}
.guardado-ok{margin:0;font-size:13px;color:var(--menta)}
.guardar-msg{font-size:12.5px;color:#ff8fb8}
.ids-guardados>b small{font:500 11px/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--suave)}

/* «Mi ícono» (13/oct): íconos redondos por juego; el elegido, con borde lima */
.icono-perfil{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#ffffff14}
.icono-perfil.chico{width:24px;height:24px;flex:none;box-shadow:0 0 0 1.5px #ffffffaa}
.cab-cuenta .av.con-icono{padding:0;overflow:hidden;background:none;display:block;clip-path:none;border-radius:50%;box-shadow:0 0 0 5px #ffffff40,0 8px 24px #0006}
@media (max-width:600px){.cab-cuenta .av.con-icono{display:block;width:64px;height:64px;justify-self:start}}
.iconos-grupo{margin:0 0 10px;border:1px solid var(--borde);background:#ffffff06;border-radius:14px}
.iconos-grupo>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.iconos-grupo>summary::-webkit-details-marker{display:none}
.iconos-grupo>summary:focus-visible{outline:2px solid var(--lila);outline-offset:-2px;border-radius:14px}
.ig-t{font:700 14px/1.2 var(--body);color:var(--texto);margin-right:auto}
.ig-muestra{display:flex}
.ig-muestra .icono-perfil{width:30px;height:30px;box-shadow:0 0 0 2px #1B0F28}
.ig-muestra .icono-perfil+.icono-perfil{margin-left:-9px}
.iconos-grupo>summary small{color:var(--suave);font-size:12px;white-space:nowrap}
.ig-flecha{width:9px;height:9px;flex:none;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.iconos-grupo[open] .ig-flecha{transform:rotate(225deg) translate(-2px,0)}
.iconos-grupo[open]>summary{border-bottom:1px solid var(--borde)}
.iconos-grupo[open]>summary .ig-muestra{display:none}
.iconos-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px;padding:14px}
@media (max-width:420px){.iconos-rejilla{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}.iconos-grupo>summary small{display:none}}
.icono-op{aspect-ratio:1;max-width:100%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;box-shadow:0 0 0 2px var(--borde);transition:transform .15s,box-shadow .15s}
.icono-op:hover,.icono-op:focus-visible{transform:scale(1.05);outline:none;box-shadow:0 0 0 2px var(--lila)}
.icono-op[aria-pressed="true"]{box-shadow:0 0 0 3px var(--lima),0 0 18px #C6F43266}
.icono-op:disabled{opacity:.6}