/* ===========================================================
   JuntoCompra — Panel lateral de cuenta

   Vive dentro de .drawer, así que hereda su ancho, su animación y
   su pie fijo. Aquí solo va lo de dentro: el menú, las fichas y
   los formularios.
   =========================================================== */

/* ── Flecha de volver, en la cabecera del panel ─────────── */
.drawer__atras{
  /* Mismo tamaño que la ✕ de al lado, para que la cabecera no baile.
     Los 36px se quedan por debajo de los 44 recomendados, pero eso
     ya es así en los cuatro paneles y está en la lista de mejoras. */
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  margin-right:calc(var(--s2) * -1);
  border-radius:var(--r-pill);
  color:var(--ink-60);
  transition:background var(--t-fast), color var(--t-fast);
}
.drawer__atras:hover{background:rgba(36,36,68,.07);color:var(--ink)}
.drawer__atras svg{width:19px;height:19px}
/* El título va pegado a la flecha, no centrado a la fuerza. */
.acct .drawer__head{justify-content:flex-start;gap:var(--s3)}
.acct .drawer__head h2{flex:1}

/* ── Quién eres ─────────────────────────────────────────── */
.acct-yo{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4);
  background:var(--surface);
  border-radius:var(--r-md);
  margin-bottom:var(--s5);
}
.acct-yo__ini{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;
  border-radius:var(--r-pill);
  background:var(--ink);color:var(--white);
  font-weight:700;font-size:1.05rem;
}
.acct-yo__txt{display:flex;flex-direction:column;min-width:0}
.acct-yo__txt b{color:var(--ink);font-weight:700;line-height:1.3}
.acct-yo__txt em{
  font-style:normal;color:var(--ink-60);font-size:var(--fs-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Menú de secciones ──────────────────────────────────── */
.acct-menu{display:flex;flex-direction:column}
.acct-fila{
  display:flex;align-items:center;gap:var(--s4);
  width:100%;text-align:left;
  padding:var(--s4) 2px;
  border-bottom:1px solid rgba(36,36,68,.08);
  transition:background var(--t-fast);
}
.acct-fila:first-child{border-top:1px solid rgba(36,36,68,.08)}
.acct-fila:hover{background:rgba(36,36,68,.035)}
.acct-fila__ico{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;
  border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);
}
.acct-fila__ico svg{width:18px;height:18px}
.acct-fila__txt{display:flex;flex-direction:column;flex:1;min-width:0}
.acct-fila__txt b{color:var(--ink);font-weight:600;line-height:1.35}
.acct-fila__txt em{font-style:normal;color:var(--ink-40);font-size:var(--fs-sm)}
.acct-fila__mas{color:var(--ink-40);flex:none;display:grid;place-items:center}
.acct-fila__mas svg{width:15px;height:15px}
.acct-fila:hover .acct-fila__mas{color:var(--red)}

/* ── Fichas: un pedido, una dirección, una tarjeta ──────── */
.acct-item{
  padding:var(--s4) 0;
  border-bottom:1px solid rgba(36,36,68,.08);
}
.acct-item:first-child{padding-top:0}
.acct-item__cab{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:5px;
}
.acct-item__cab b{color:var(--ink);font-weight:700}
.acct-item__txt{
  color:var(--ink-60);font-size:var(--fs-sm);line-height:1.6;
  overflow-wrap:anywhere;
}
.acct-item__acc{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3)}
.acct-item__acc button{
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-60);
  transition:color var(--t-fast);
}
.acct-item__acc button:hover{color:var(--red)}

/* Cifras del pedido, alineadas en columna */
.acct-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
  gap:var(--s3);margin:var(--s3) 0 0;
}
.acct-datos dt{
  font-size:var(--fs-xs);color:var(--ink-40);
  letter-spacing:var(--track-label);text-transform:uppercase;
  margin-bottom:1px;
}
.acct-datos dd{
  margin:0;color:var(--ink);font-weight:700;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
}

/* ── Distintivos ────────────────────────────────────────── */
.acct-pin{
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  padding:3px 7px;border-radius:5px;white-space:nowrap;
}
.acct-pin--principal{background:var(--ink);color:var(--white)}
.acct-pin--reservado{background:rgba(216,56,92,.12);color:var(--red)}
.acct-pin--pagado   {background:rgba(31,122,90,.14);color:#1f7a5a}
.acct-pin--enviado  {background:rgba(36,36,68,.10);color:var(--ink-80)}
.acct-pin--entregado{background:rgba(31,122,90,.14);color:#1f7a5a}
.acct-pin--cancelado{background:rgba(36,36,68,.08);color:var(--ink-40)}

/* ── Estados vacíos ─────────────────────────────────────── */
.acct-vacio{
  background:var(--surface);
  border-radius:var(--r-md);
  padding:var(--s6) var(--s5);
  text-align:center;
}
.acct-vacio__ico{
  display:grid;place-items:center;
  width:40px;height:40px;margin:0 auto var(--s3);
  border-radius:var(--r-pill);
  background:var(--ink);color:var(--white);
}
.acct-vacio__ico svg{width:19px;height:19px}
.acct-vacio b{display:block;color:var(--ink);font-weight:700;margin-bottom:5px}
.acct-vacio p{color:var(--ink-60);font-size:var(--fs-sm);line-height:1.6;margin:0}
.acct-vacio .btn{margin-top:var(--s5)}

/* ── Formularios ────────────────────────────────────────── */
.acct-form{display:flex;flex-direction:column;gap:var(--s4)}
.acct-form__par{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.acct-campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.acct-campo > span{font-size:var(--fs-sm);font-weight:600;color:var(--ink-80)}
.acct-campo > span em{font-style:normal;font-weight:400;color:var(--ink-40)}
.acct-campo input,
.acct-campo select{
  width:100%;
  padding:11px 12px;
  border:1px solid rgba(36,36,68,.16);
  border-radius:var(--r-sm);
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.acct-campo input:focus,
.acct-campo select:focus{
  outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(216,56,92,.14);
}
.acct-campo input:disabled{background:var(--surface-2);color:var(--ink-40)}
.acct-campo input[aria-invalid="true"]{border-color:var(--red)}
.acct-pista{font-size:var(--fs-xs);color:var(--ink-40);font-style:normal}

.acct-check{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-sm);color:var(--ink-80);cursor:pointer;
}
.acct-check input{width:17px;height:17px;accent-color:var(--red);flex:none}

.acct-form__acc{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.acct-add{margin-top:var(--s5)}

/* ── Avisos ─────────────────────────────────────────────── */
.acct-aviso{
  padding:10px 13px;margin-bottom:var(--s4);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:1.5;
  background:rgba(216,56,92,.10);color:var(--red);
}
.acct-aviso.es-ok{background:rgba(31,122,90,.12);color:#1f7a5a}
.acct-cargando{color:var(--ink-40);font-size:var(--fs-sm)}

/* ── Nota de pagos y bloque de borrado ──────────────────── */
.acct-nota,
.acct-borrado{
  margin-top:var(--s5);
  padding:var(--s4);
  border:1px solid rgba(36,36,68,.14);
  border-radius:var(--r-md);
}
.acct-nota b,
.acct-borrado b{display:block;color:var(--ink);font-weight:700;margin-bottom:5px}
.acct-nota p,
.acct-borrado p{color:var(--ink-60);font-size:var(--fs-sm);line-height:1.65;margin:0}
.acct-borrado a{
  display:inline-block;margin-top:var(--s3);
  font-size:var(--fs-sm);font-weight:600;color:var(--red);
}

@media (max-width:400px){
  .acct-form__par{grid-template-columns:1fr}
}

/* ── Alta de tarjeta con Stripe ─────────────────────────── */
.acct-pago-intro{
  color:var(--ink-60);font-size:var(--fs-sm);line-height:1.6;
  margin-bottom:var(--s5);
}
/* El formulario lo pinta Stripe dentro de su propio iframe: aquí solo
   se le reserva el sitio y se evita que el salto de altura al cargar
   dé un tirón. */
.acct-stripe{min-height:190px}
.acct-pago-sello{
  margin-top:var(--s5);
  text-align:center;
  font-size:var(--fs-xs);color:var(--ink-40);
}