/* La cuenta de la tienda: `#/acceso`, `#/registro`, `#/recuperar` y `#/cuenta`
   (`cuenta-vista.js`). Encargo textual, 30 sep 2026: la filosofía de tres referencias —
   lienzo partido con panel de imagen y pasos, formulario limpio, cuenta con barra lateral
   agrupada y secciones separadas por líneas—. Los colores son los cuatro de
   `marca/tokens.css` (S65): ninguna transparencia de un tono, ningún gris inventado; lo
   que en las referencias es un gris suave aquí es mantequilla. */

.route-view[data-view='cuenta'], .route-view[data-view='acceso'],
.route-view[data-view='registro'], .route-view[data-view='recuperar'] { min-height: 0; }
.account-region { margin-block: 1.25rem 5rem; }

/* ── Lienzo partido ─────────────────────────────────────────────────────── */
.cuenta-lienzo {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: .5rem;
  min-height: min(46rem, calc(100vh - 8rem));
  padding: .5rem;
  border: 1px solid var(--ink);
  border-radius: 2rem;
  background: var(--paper);
}
.cuenta-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 1.5rem;
  overflow: hidden;
  color: var(--soft);
  background:
    linear-gradient(180deg, var(--ink) 0%, transparent 30%, transparent 34%, var(--ink) 70%),
    url('assets/pollo-al-horno-hero.webp') 60% center / cover,
    var(--ink);
}
.cuenta-panel-logo {
  display: block;
  width: 8.5rem;
  aspect-ratio: 1080 / 709;
  background: var(--soft);
  -webkit-mask: url('assets/brand/wordmark-mantequilla.svg') center / contain no-repeat;
  mask: url('assets/brand/wordmark-mantequilla.svg') center / contain no-repeat;
}
.cuenta-panel-copia { margin-top: auto; }
.cuenta-chip {
  display: inline-flex;
  margin-bottom: 1.25rem;
  padding: .45rem 1rem;
  border: 1px solid var(--soft);
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .08em;
}
.cuenta-panel-frase {
  margin-bottom: .75rem;
  font-family: var(--fuente-encabezado), var(--fuente-interfaz), sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.cuenta-panel-texto { max-width: 26rem; margin: 0; color: var(--paper); }
.cuenta-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuenta-paso {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 7.5rem;
  padding: .9rem;
  border: 1px solid var(--soft);
  border-radius: 1.1rem;
  color: var(--soft);
}
.cuenta-paso-primero { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.cuenta-paso-numero {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .85rem;
}
.cuenta-paso-primero .cuenta-paso-numero { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.cuenta-paso-texto { font-weight: 600; line-height: 1.2; }

.cuenta-forma {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}
.cuenta-titulo {
  margin-bottom: .75rem;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
}
.cuenta-lede { margin-bottom: 2rem; }
.cuenta-aviso { padding: .9rem 1rem; border: 1px dashed var(--ink); border-radius: .9rem; }
.cuenta-botones { display: grid; gap: .75rem; }
.cuenta-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .8rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: .9rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-align: center;
  transition: transform .2s var(--ease-out);
}
.cuenta-boton-secundario { background: var(--paper); color: var(--ink); }
.cuenta-boton:active { transform: scale(.98); }
.cuenta-separador {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.5rem 0;
  font-size: .85rem;
}
.cuenta-separador::before, .cuenta-separador::after { content: ''; flex: 1; border-top: 1px solid var(--ink); }
.cuenta-google {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .85rem 1rem;
  border-radius: .9rem;
  background: var(--soft);
  font-size: .92rem;
  line-height: 1.35;
}
.cuenta-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 1.5rem 0 0; }
.cuenta-enlaces a, .cuenta-legal a { text-decoration: underline; text-underline-offset: .2em; }
.cuenta-legal { margin: 2rem 0 0; font-size: .78rem; text-align: center; }
.cuenta-legal .aviso-simplificado { margin: 0; padding: 0; border: 0; font-size: .72rem; line-height: 1.5; text-align: left; opacity: .8; }

/* ── Cuenta con sesión ──────────────────────────────────────────────────── */
.cuenta-perfil {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 2rem;
  background: var(--paper);
}
.cuenta-lado { display: flex; flex-direction: column; gap: .2rem; padding: 1.5rem 1rem; border-right: 1px solid var(--ink); }
.cuenta-quien { display: flex; align-items: center; gap: .75rem; padding: .25rem .5rem 1rem; }
.cuenta-quien-datos { display: grid; min-width: 0; line-height: 1.3; }
.cuenta-quien-datos span { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--soft);
  font-family: var(--fuente-encabezado), var(--fuente-interfaz), sans-serif;
  font-size: 1.1rem;
  letter-spacing: .04em;
}
.cuenta-avatar-grande { width: 5rem; height: 5rem; font-size: 1.9rem; }
.cuenta-grupo { margin: 1.1rem .5rem .35rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.cuenta-nav { display: grid; gap: .15rem; }
.cuenta-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 2.9rem;
  padding: .6rem .75rem;
  border: 1px solid transparent;
  border-radius: .8rem;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}
.cuenta-principal { padding: clamp(1.5rem, 4vw, 3rem); }
.cuenta-principal .cuenta-titulo { margin-bottom: 1.5rem; }
.cuenta-seccion { display: grid; gap: 1.25rem; padding-block: 1.75rem; border-top: 1px solid var(--ink); scroll-margin-top: 6rem; }
.cuenta-seccion-fila { grid-auto-columns: auto; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr); align-items: center; }
.cuenta-subtitulo {
  margin-bottom: .25rem;
  font-family: var(--fuente-interfaz), system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
}
.cuenta-ayuda { margin: 0; font-size: .9rem; }
.cuenta-foto { display: flex; align-items: center; gap: 1rem; }
.cuenta-foto strong { display: block; font-size: 1.1rem; }
.cuenta-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cuenta-campo { display: grid; gap: .4rem; }
.cuenta-campo-etiqueta { font-size: .9rem; font-weight: 600; }
.cuenta-campo-valor { padding: .85rem 1rem; border-radius: .9rem; background: var(--soft); overflow-wrap: anywhere; }
.cuenta-fila-accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cuenta-folio { margin: 0; font-family: ui-monospace, monospace; font-weight: 700; overflow-wrap: anywhere; }
.cuenta-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; padding-top: 1.75rem; border-top: 1px solid var(--ink); }
.cuenta-acciones .cuenta-boton { min-width: 10rem; }

/* Iconos de trazo como máscara: el trazo toma `currentColor`, así que no traen color propio.
   Son ARCHIVOS (`assets/cuenta/*.svg`), no `data:`: la CSP de la tienda es `img-src 'self'`
   y una máscara en `data:` no carga (medido el 30 sep 2026, ya publicado: la barra lateral
   salía sin iconos). */
.cuenta-icono {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.cuenta-icono-perfil { --icono: url('assets/cuenta/perfil.svg'); }
.cuenta-icono-candado { --icono: url('assets/cuenta/candado.svg'); }
.cuenta-icono-bolsa { --icono: url('assets/cuenta/bolsa.svg'); }
.cuenta-icono-menu { --icono: url('assets/cuenta/menu.svg'); }
.cuenta-icono-ayuda { --icono: url('assets/cuenta/ayuda.svg'); }
.cuenta-icono-panel { --icono: url('assets/cuenta/panel.svg'); }
.cuenta-icono-ubicacion { --icono: url('assets/cuenta/ubicacion.svg'); }
.cuenta-icono-datos { --icono: url('assets/cuenta/datos.svg'); }
.cuenta-icono-campana { --icono: url('assets/cuenta/campana.svg'); }
.cuenta-icono-google { --icono: url('assets/cuenta/google.svg'); }

@media (hover: hover) {
  .cuenta-boton:hover { transform: translateY(-1px); }
  .cuenta-nav-item:hover { border-color: var(--ink); }
}

@media (max-width: 860px) {
  .cuenta-lienzo { grid-template-columns: 1fr; min-height: 0; }
  .cuenta-panel { min-height: 24rem; }
  .cuenta-perfil { grid-template-columns: minmax(0, 1fr); }
  .cuenta-lado { min-width: 0; border-right: 0; border-bottom: 1px solid var(--ink); }
  .cuenta-nav { display: flex; flex-wrap: wrap; gap: .25rem; }
  .cuenta-nav-item { width: auto; }
}

@media (max-width: 560px) {
  .account-region { margin-bottom: 7rem; }
  .cuenta-lienzo, .cuenta-perfil { border-radius: 1.5rem; }
  .cuenta-panel { min-height: 0; gap: 1.25rem; }
  .cuenta-panel-texto { display: none; }
  .cuenta-pasos { grid-template-columns: 1fr; }
  .cuenta-paso { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 0; padding: .6rem .75rem; }
  .cuenta-campos { grid-template-columns: 1fr; }
  .cuenta-seccion-fila { grid-auto-flow: row; }
  .cuenta-acciones .cuenta-boton { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cuenta-boton { transition: none; }
}

/* ── Tus pedidos (historial del servidor) ───────────────────────────────── */
.cuenta-pedidos-caja { display: grid; gap: 1rem; justify-items: start; }
.cuenta-pedidos { display: grid; gap: .75rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.cuenta-pedido { display: grid; gap: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--ink); border-radius: 1.1rem; }
.cuenta-pedido-cabeza, .cuenta-pedido-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.cuenta-pedido-cabeza > div { display: grid; line-height: 1.3; }
.cuenta-pedido-cifras { justify-items: end; text-align: right; }
.cuenta-pedido-folio { font-family: ui-monospace, monospace; }
.cuenta-pedido-estado { padding: .1rem .6rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .78rem; text-transform: capitalize; }
.cuenta-pedido-lineas { display: grid; gap: .2rem; margin: 0; padding: .75rem 1rem; border-radius: .9rem; background: var(--soft); list-style: none; font-size: .92rem; }
.cuenta-pedido-extra { padding-left: 1rem; }
.cuenta-pedido .cuenta-boton { min-height: 2.6rem; padding: .5rem 1.1rem; }
.cuenta-pedido > .cuenta-ayuda:empty { display: none; }

/* ── Direcciones (la libreta del servidor) ──────────────────────────────── */
.cuenta-direcciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.cuenta-direccion { display: grid; align-content: start; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid var(--ink); border-radius: 1.1rem; }
.cuenta-direccion-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.cuenta-direccion-datos { display: grid; gap: .15rem; margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.cuenta-direccion-acciones { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.cuenta-enlace { min-width: 0; min-height: 2rem; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.cuenta-direccion-forma { display: grid; gap: 1rem; width: 100%; max-width: 34rem; padding: 1.1rem; border: 1px solid var(--ink); border-radius: 1.1rem; }
.cuenta-entrada { width: 100%; min-height: 3rem; padding: .7rem 1rem; border: 1px solid var(--soft); border-radius: .9rem; background: var(--soft); color: var(--ink); }
.cuenta-entrada:focus { border-color: var(--ink); }
.cuenta-direccion-forma .field-error:empty, .cuenta-pedidos-caja > .cuenta-ayuda:empty { display: none; }
.carrito-direcciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.carrito-direcciones .cuenta-boton { min-height: 2.4rem; padding: .4rem 1rem; }
.carrito-direcciones:empty { display: none; }

/* ── Tus datos ──────────────────────────────────────────────────────────── */
.cuenta-zona-eliminar { display: grid; gap: .75rem; justify-items: start; max-width: 34rem; }
.cuenta-zona-eliminar .cuenta-subtitulo { margin: 0; }
.cuenta-zona-eliminar .cuenta-campo { width: 100%; }
.cuenta-boton[disabled] { border-style: dashed; cursor: not-allowed; opacity: .55; }
.cuenta-pedidos-caja > .cuenta-campos, .cuenta-pedidos-caja > .cuenta-fila-accion { width: 100%; }

/* ── Aviso de privacidad (`aviso-privacidad.js`) ────────────────────────── */
.aviso-privacidad { max-width: 46rem; }
.aviso-privacidad h2 { margin: 2.25rem 0 .75rem; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.aviso-privacidad p, .aviso-privacidad li { line-height: 1.6; }
.aviso-privacidad ul, .aviso-privacidad ol { padding-left: 1.25rem; }
.aviso-privacidad li { margin-bottom: .4rem; }
.aviso-simplificado { margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed var(--ink); border-radius: .9rem; font-size: .78rem; }
.aviso-simplificado p { margin: 0 0 .5rem; }
.aviso-simplificado p:last-child { margin-bottom: 0; }
.aviso-simplificado a { text-decoration: underline; text-underline-offset: .2em; }