/* ============================================================
   cuenta.css — Acceso, Mi cuenta y avisos de cuenta en checkout
   Usa los mismos tokens que el resto del sitio (variables.css)
   ============================================================ */

/* -------------------------------------------------------
   ACCESO (entrar / crear cuenta / recuperar)
   ------------------------------------------------------- */
.acceso-card {
  width: 100%;
  max-width: 440px;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: var(--radio-lg);
  background: var(--color-grafito);
  box-shadow: var(--sombra-md);
}

.acceso-pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: var(--espacio-md);
  padding: 4px;
  border-radius: var(--radio-md);
  background: var(--color-negro);
}

.acceso-pestanas[hidden] { display: none; }

.acceso-pestana {
  min-height: 40px;
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-blanco-dim);
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}

.acceso-pestana.activa {
  background: var(--color-blanco);
  color: var(--color-negro);
}

.acceso-titulo {
  margin-bottom: 0.4rem;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.1;
  text-wrap: balance;
}

.acceso-subtitulo {
  margin-bottom: var(--espacio-md);
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
  text-wrap: pretty;
}

.acceso-form [hidden],
.acceso-card [hidden] { display: none !important; }

.acceso-label-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.acceso-password { position: relative; }
.acceso-password .checkout-input { padding-right: 5rem; }

.acceso-ver {
  position: absolute;
  top: 50%;
  right: 6px;
  min-height: 36px;
  padding: 0 0.7rem;
  border-radius: var(--radio-sm);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
  transform: translateY(-50%);
}

.acceso-ayuda {
  display: block;
  margin-top: 4px;
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
}

.acceso-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
  cursor: pointer;
}

.acceso-aviso input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  /* base.css quita la apariencia nativa de los inputs */
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--color-acento);
}

.acceso-mensaje {
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--color-error);
  border-radius: var(--radio-sm);
  background: rgba(168, 35, 26, 0.08);
  font-size: var(--texto-sm);
  color: var(--color-blanco);
}

.acceso-mensaje[data-tipo="exito"] {
  border-left-color: var(--color-exito);
  background: rgba(61, 107, 79, 0.1);
}

.acceso-alternativas {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  margin-top: var(--espacio-sm);
}

.acceso-link,
.acceso-link-chico {
  min-height: 40px;
  padding: 0 0.25rem;
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-blanco);
  text-decoration: underline;
  text-decoration-color: var(--color-borde);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transicion-rapida), color var(--transicion-rapida);
}

.acceso-link-chico {
  min-height: 0;
  padding: 0;
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
}

.acceso-link--peligro { color: var(--color-error); }

/* --- Entrar con Google --- */
.acceso-google { display: grid; gap: var(--espacio-sm); }

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 50px;
  padding: 0 1.25rem;
  border-radius: var(--radio-full);
  background-color: #fff;
  color: #1f1f1f;
  box-shadow: inset 0 0 0 1px var(--color-borde);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  font-weight: 600;
  transition: box-shadow var(--transicion-rapida), transform var(--transicion-rapida);
}
.btn-google svg { flex-shrink: 0; }
.btn-google:active:not(:disabled) { transform: scale(0.98); }
.btn-google:disabled { opacity: 0.6; cursor: wait; }
.btn-google:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 3px; }

.acceso-google-nota {
  margin-top: -0.35rem;
  font-size: var(--texto-xs);
  text-align: center;
  color: var(--color-blanco-dim);
}
.acceso-google-nota a { color: var(--color-blanco); text-underline-offset: 3px; }

.acceso-separador {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0.25rem 0 var(--espacio-sm);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
}
.acceso-separador::before,
.acceso-separador::after { content: ''; flex: 1; height: 1px; background-color: var(--color-borde); }

.acceso-listo .confirmacion-icono { margin-bottom: var(--espacio-sm); }
.acceso-listo .btn-secundario { width: 100%; }

.acceso-invitado {
  margin-top: var(--espacio-md);
  padding-top: var(--espacio-sm);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-xs);
  text-align: center;
  color: var(--color-blanco-dim);
}

.acceso-invitado a,
.checkout-cuenta a,
.confirmacion-nota a {
  color: var(--color-blanco);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .acceso-link:hover,
  .acceso-link-chico:hover { text-decoration-color: currentColor; }
  .acceso-pestana:not(.activa):hover { color: var(--color-blanco); }
  .acceso-ver:hover { color: var(--color-blanco); }
  .btn-google:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-blanco-dim), var(--sombra-md); }
}

/* -------------------------------------------------------
   AVISOS EN CHECKOUT Y CONFIRMACIÓN
   ------------------------------------------------------- */
.checkout-cuenta {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radio-sm);
  background: var(--color-negro);
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
}

.checkout-cuenta:empty { display: none; }
.checkout-input[readonly] { opacity: 0.7; cursor: not-allowed; }

.confirmacion-cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: var(--espacio-md);
  padding: 1rem;
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
}

.confirmacion-cuenta p { flex: 1 1 240px; }
.confirmacion-cuenta strong { color: var(--color-blanco); }

/* -------------------------------------------------------
   MI CUENTA
   ------------------------------------------------------- */
.cuenta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cuenta-page {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--espacio-lg) var(--padding-lateral) var(--espacio-xl);
}

.cuenta-cargando {
  display: flex;
  justify-content: center;
  padding: var(--espacio-2xl) 0;
}

.cuenta-cargando[hidden] { display: none; }

.cuenta-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--espacio-md);
}

.cuenta-identidad {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.cuenta-avatar {
  flex: none;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ocre);
  color: var(--tinta);
  font-family: var(--fuente-display);
  font-size: 1.9rem;
  font-weight: 700;
}

.cuenta-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 480px) {
  .cuenta-avatar { width: 56px; height: 56px; font-size: 1.5rem; }
}

.cuenta-saludo {
  font-size: var(--texto-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
}

.cuenta-email {
  margin-top: 0.4rem;
  font-family: var(--fuente-mono);
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
  overflow-wrap: anywhere;
}

.cuenta-aviso {
  margin-bottom: var(--espacio-md);
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--color-aviso);
  border-radius: var(--radio-sm);
  background: rgba(184, 139, 116, 0.14);
  font-size: var(--texto-sm);
}

.cuenta-pestanas {
  display: flex;
  gap: 0.25rem;
  margin-bottom: var(--espacio-md);
  border-bottom: 1px solid var(--color-borde);
  overflow-x: auto;
  scrollbar-width: none;
}

.cuenta-pestana {
  flex-shrink: 0;
  min-height: 46px;
  padding: 0 1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-blanco-dim);
  transition: color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.cuenta-pestana.activa {
  border-bottom-color: var(--color-acento);
  color: var(--color-blanco);
}

.cuenta-panel[hidden] { display: none; }

.cuenta-subtitulo {
  margin-bottom: var(--espacio-sm);
  font-size: var(--texto-lg);
}

.cuenta-opcional {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  font-weight: 400;
}

.cuenta-form {
  margin-bottom: var(--espacio-md);
  padding: clamp(1.1rem, 4vw, 1.75rem);
  border-radius: var(--radio-lg);
  background: var(--color-grafito);
}

.cuenta-form[hidden] { display: none; }

.cuenta-form-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* --- Estado vacío --- */
.cuenta-vacio {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: var(--espacio-xl) var(--espacio-md);
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-lg);
  text-align: center;
  color: var(--color-blanco-dim);
}

.cuenta-vacio .pieza-svg {
  position: static;
  width: 72px;
  height: 72px;
  color: var(--color-borde);
}
.cuenta-vacio-titulo { font-size: var(--texto-lg); font-weight: 600; color: var(--color-blanco); }

.cuenta-vacio-texto {
  max-width: 40ch;
  margin-bottom: 0.5rem;
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
  text-wrap: pretty;
}

/* --- Tarjetas de pedido --- */
.lista-pedidos {
  display: grid;
  gap: var(--espacio-sm);
}

.pedido-tarjeta {
  padding: clamp(1.1rem, 4vw, 1.5rem);
  border-radius: var(--radio-lg);
  background: var(--color-grafito);
}

.pedido-tarjeta[data-estado="cancelado"] { opacity: 0.72; }

.pedido-tarjeta-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pedido-tarjeta-id {
  font-family: var(--fuente-mono);
  font-size: var(--texto-sm);
  font-weight: 500;
}

.pedido-tarjeta-fecha {
  margin-top: 2px;
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
}

.pedido-estado {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-sm);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  background: var(--color-negro);
  color: var(--color-blanco-dim);
}

.pedido-estado--pagado,
.pedido-estado--en_produccion,
.pedido-estado--enviado { background: rgba(47, 92, 88, 0.12); color: var(--cobalto); }
.pedido-estado--entregado { background: rgba(61, 107, 79, 0.12); color: var(--color-exito); }
.pedido-estado--pendiente { background: rgba(184, 139, 116, 0.18); color: var(--color-aviso); }
.pedido-estado--cancelado { background: rgba(168, 35, 26, 0.1); color: var(--color-error); }

/* Recorrido: pagado → producción → enviado → entregado */
.pedido-recorrido {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 1.1rem;
  counter-reset: paso;
}

.pedido-recorrido li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

/* Línea que une cada punto con el anterior */
.pedido-recorrido li + li::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-borde);
}

.pedido-recorrido li.hecho + li::before,
.pedido-recorrido li.hecho + li.actual::before { background: var(--color-acento); }

.pedido-recorrido-punto {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-borde);
  border-radius: 50%;
  background: var(--color-grafito);
}

.pedido-recorrido li.hecho .pedido-recorrido-punto { border-color: var(--color-acento); background: var(--color-acento); }
.pedido-recorrido li.actual .pedido-recorrido-punto {
  border-color: var(--color-acento);
  box-shadow: 0 0 0 4px rgba(141, 95, 74, 0.18);
}

.pedido-recorrido-texto {
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--color-blanco-dim);
}

.pedido-recorrido li.actual .pedido-recorrido-texto { font-weight: 600; color: var(--color-blanco); }

.pedido-tarjeta-nota {
  margin-bottom: 1rem;
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
}

.pedido-piezas {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
}

.pedido-piezas li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--texto-sm);
}

.pedido-pieza-img {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--radio-sm);
  background: var(--color-negro);
}

.pedido-pieza-img img { width: 100%; height: 100%; object-fit: cover; }
.pedido-pieza-nombre { font-weight: 500; }
.pedido-pieza-cant { font-weight: 400; color: var(--color-blanco-dim); }
.pedido-pieza-precio { font-variant-numeric: tabular-nums; }

.pedido-tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
}

.pedido-tarjeta-total {
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
}

.pedido-tarjeta-total strong {
  margin-left: 0.35rem;
  font-size: var(--texto-lg);
  color: var(--color-blanco);
  font-variant-numeric: tabular-nums;
}

.pedido-tarjeta-envio {
  margin-top: 0.6rem;
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
}

/* --- Direcciones --- */
.lista-direcciones {
  display: grid;
  gap: 0.75rem;
  margin-bottom: var(--espacio-sm);
}

.direccion-tarjeta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radio-lg);
  background: var(--color-grafito);
}

.direccion-tarjeta.predeterminada { border-color: var(--color-acento); }

.direccion-etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.direccion-badge {
  padding: 0.1rem 0.45rem;
  border-radius: var(--radio-sm);
  background: var(--color-acento);
  color: var(--color-negro);
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
  font-weight: 500;
}

.direccion-texto {
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
}

.direccion-acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

@media (hover: hover) {
  .cuenta-pestana:not(.activa):hover { color: var(--color-blanco); }
}

@media (max-width: 560px) {
  .cuenta-header .btn-chico { display: none; }
  .cuenta-encabezado { flex-direction: column; align-items: flex-start; }
  .direccion-tarjeta { flex-direction: column; }
  .direccion-acciones { flex-direction: row; align-items: center; gap: 1rem; }
  .pedido-tarjeta-pie { flex-direction: column; align-items: stretch; }
  .pedido-tarjeta-pie .btn-secundario { width: 100%; }
}

/* ==========================================================================
   Páginas legales (aviso de privacidad)
   ========================================================================== */
.legal {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--espacio-lg) var(--padding-lateral) var(--espacio-xl);
  color: var(--color-blanco-dim);
  line-height: 1.7;
}

.legal-titulo {
  margin: 0.4rem 0 0.5rem;
  font-size: var(--texto-3xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
}

.legal-fecha {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
}

.legal-indice {
  margin: var(--espacio-md) 0 var(--espacio-lg);
  padding: var(--espacio-sm) var(--espacio-md);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}

.legal-indice ol {
  margin: 0;
  padding-left: 1.2rem;
  list-style: decimal;
  font-size: var(--texto-sm);
}

.legal section { scroll-margin-top: 1.5rem; margin-bottom: var(--espacio-lg); }

.legal h2 {
  margin-bottom: 0.6rem;
  font-size: var(--texto-xl);
  line-height: 1.2;
  color: var(--color-blanco);
}

.legal p { max-width: 65ch; margin-bottom: 0.9rem; text-wrap: pretty; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.2rem; list-style: disc; }
.legal li { margin-bottom: 0.4rem; }
.legal strong { color: var(--color-blanco); font-weight: 600; }

.legal a {
  color: var(--color-blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:hover { color: var(--color-acento); }

.footer-legal { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.checkout-nota a,
.acceso-aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* El renglón de envío no lleva foto: solo el hueco para alinear */
.pedido-pieza-envio .pedido-pieza-img { background: none; }
.pedido-pieza-envio .pedido-pieza-nombre { color: var(--color-blanco-dim); }

/* Guía de envío en Mis pedidos */
.pedido-guia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radio-sm);
  background: rgba(47, 92, 88, 0.08);
  font-size: var(--texto-sm);
}

.pedido-guia-num {
  font-family: var(--fuente-mono);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------
   RESEÑAS DESDE "MIS PEDIDOS"
   ------------------------------------------------------- */
.pedido-pieza-resena {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.35rem;
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
}

.pedido-pieza-monedero .pedido-pieza-precio { color: var(--color-exito); font-weight: 600; }

.pedido-tarjeta-iva {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--texto-xs);
}

.pedido-piezas li.resena-form {
  display: block;
  padding: 1rem;
  border-radius: var(--radio-md);
  background: var(--color-negro);
}

.resena-form form { display: grid; gap: 0.6rem; }

/* Estrellas con radios: de derecha a izquierda para pintar las anteriores */
.resena-calificar { margin: 0; padding: 0; border: 0; }

.resena-calificar legend {
  margin-bottom: 0.3rem;
  padding: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
}

.resena-estrellas {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.15rem;
}

.resena-calificar input { position: absolute; opacity: 0; pointer-events: none; }

.resena-calificar label {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-borde);
  cursor: pointer;
  transition: color var(--transicion-rapida), transform var(--transicion-rapida);
}

.resena-calificar label:hover,
.resena-calificar label:hover ~ label,
.resena-calificar input:checked ~ label { color: var(--ocre); }
.resena-calificar label:active { transform: scale(0.92); }
.resena-calificar input:focus-visible + label { outline: 2px solid var(--cobalto); outline-offset: 2px; border-radius: 6px; }

/* -------------------------------------------------------
   MONEDERO
   ------------------------------------------------------- */
.monedero-tarjeta {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--espacio-md);
  padding: clamp(1.4rem, 5vw, 2rem);
  border-radius: var(--radio-lg);
  background: linear-gradient(125deg, var(--pino) 0%, color-mix(in oklab, var(--pino) 55%, var(--cobalto)) 55%, var(--cobalto) 100%);
  color: var(--hueso);
}

.monedero-tarjeta::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--ocre) 55%, transparent), transparent 70%);
  pointer-events: none;
}

.monedero-tarjeta p { color: var(--hueso); }

.cotizacion-tarjeta .pedido-tarjeta-id {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  font-weight: 600;
}

.monedero-etiqueta {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.monedero-saldo {
  margin: 0.3rem 0 0.2rem;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.monedero-vence { font-size: var(--texto-sm); opacity: 0.9; }

.monedero-reglas {
  display: grid;
  gap: 0.45rem;
  margin-bottom: var(--espacio-lg);
  padding-left: 1.1rem;
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
}

.monedero-movimientos { display: grid; gap: 0.5rem; }

.monedero-movimientos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radio-md);
  background: var(--color-grafito);
  font-size: var(--texto-sm);
}

.monedero-movimientos small { display: block; font-size: var(--texto-xs); color: var(--color-blanco-dim); }
.monedero-monto { font-weight: 700; color: var(--color-exito); font-variant-numeric: tabular-nums; }
.monedero-monto.negativo { color: var(--color-blanco); }
.monedero-movimientos .monedero-sin-movs { justify-content: center; color: var(--color-blanco-dim); }

/* -------------------------------------------------------
   COTIZACIONES
   ------------------------------------------------------- */
.cotizacion-estado--nueva { background: rgba(184, 139, 116, 0.18); color: var(--color-aviso); }
.cotizacion-estado--cotizada { background: rgba(47, 92, 88, 0.12); color: var(--cobalto); }
.cotizacion-estado--pagada { background: rgba(61, 107, 79, 0.12); color: var(--color-exito); }
.cotizacion-estado--rechazada,
.cotizacion-estado--cancelada,
.cotizacion-estado--vencida { background: rgba(168, 35, 26, 0.1); color: var(--color-error); }

.cotizacion-tarjeta[data-estado="cancelada"] { opacity: 0.72; }

.cotizacion-descripcion {
  margin-bottom: 0.6rem;
  font-size: var(--texto-sm);
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.cotizacion-archivos {
  margin-bottom: 0.8rem;
  font-size: var(--texto-xs);
  color: var(--color-blanco-dim);
  overflow-wrap: anywhere;
}

.cotizacion-precio li { grid-template-columns: 1fr auto; }

.cotizacion-respuesta {
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radio-md);
  background: linear-gradient(120deg, color-mix(in oklab, var(--cobalto) 10%, var(--color-negro)), color-mix(in oklab, var(--rubor) 30%, var(--color-negro)));
  font-size: var(--texto-sm);
  line-height: 1.5;
}

.cotizacion-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

#btn-nueva-cotizacion { margin-top: var(--espacio-md); }

/* Página de cotización */
.cotizar-pasos {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0 var(--espacio-lg);
  font-size: var(--texto-sm);
  color: var(--color-blanco-dim);
}

.cotizar-pasos li { display: flex; gap: 0.7rem; }
.cotizar-pasos span { font-family: var(--fuente-mono); color: var(--color-acento); }

.cotizar-caja {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.2rem, 5vw, 2rem);
  border-radius: var(--radio-lg);
  background: var(--color-grafito);
}

.cotizar-caja[hidden] { display: none; }
.cotizar-listo { justify-items: start; }
.cotizar-listo:focus { outline: none; }
.cotizar-listo .confirmacion-icono { margin: 0; }

.cotizar-zona {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 1.4rem 1rem;
  border: 2px dashed var(--color-borde);
  border-radius: var(--radio-lg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--cobalto) 6%, transparent), color-mix(in oklab, var(--rubor) 18%, transparent));
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.cotizar-zona:hover,
.cotizar-zona.arrastrando { border-color: var(--cobalto); }
.cotizar-zona:focus-within { outline: 2px solid var(--cobalto); outline-offset: 2px; }
.cotizar-zona input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cotizar-zona strong { font-size: var(--texto-sm); }
.cotizar-zona small { font-size: var(--texto-xs); color: var(--color-blanco-dim); }

.cotizar-archivos { display: grid; gap: 0.4rem; margin-top: 0.6rem; }

.cotizar-archivos li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radio-md);
  background: var(--color-grafito);
  font-size: var(--texto-sm);
}

.cotizar-archivo-ext {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radio-full);
  background: var(--cobalto);
  color: var(--hueso);
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
}

.cotizar-archivo-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotizar-archivo-peso { font-size: var(--texto-xs); color: var(--color-blanco-dim); font-variant-numeric: tabular-nums; }

textarea.checkout-input { min-height: 7rem; resize: vertical; line-height: 1.5; }