/* ============================================================
   WaterGo · assets/css/cuenta.css — el área de cliente

   Solo lo que /cuenta necesita y no está ya en tokens.css,
   estilo.css y pagina.css. Todo lo demás —la cabecera, el pie, los
   botones, .limite, .forma, .prosa— se reutiliza tal cual: el área
   de cliente tiene que parecer la web, no el panel interno.

   Tres reglas que gobiernan este fichero:

     1. POCO SCROLL. Es lo que más se pide y lo que más se
        incumple. Una cuenta con tres pedidos tiene que caber de un
        vistazo: tarjetas compactas, sin cabeceras gigantes y sin
        aire de página de marketing.
     2. Los colores de estado salen de los tokens semánticos
        (--color-success y compañía), no de hexadecimales nuevos.
     3. Móvil primero. Quien mira «¿dónde está mi pedido?» lo hace
        casi siempre desde el teléfono, y muchas veces de pie.
   ============================================================ */


/* ------------------------------------------------------------
   Armazón
   ------------------------------------------------------------ */

.cuenta {
  padding-block: var(--e-7) var(--e-9);
}

/* La cabeza del área: más pequeña que la de una página pública.
   Aquí nadie viene a que le convenzan de nada. */
.cuenta-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-5);
}

.cuenta-cabeza h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  margin: 0;
}

.cuenta-cabeza p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--t-small);
}


/* ------------------------------------------------------------
   La navegación de la cuenta

   Píldoras, no pestañas: en móvil una fila de pestañas con
   subrayado se corta a la mitad y no se entiende. Las píldoras se
   envuelven solas.
   ------------------------------------------------------------ */

.cuenta-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--color-border);
}

/* El botón de salir es un <button> y no un <a> —no navega, cierra la
   sesión— así que la regla tenía que nombrarlo. Escrita solo para `a`,
   al de salir no le llegaba nada y aparecía como un botón gris de
   fábrica, con serifa y borde biselado, junto a tres píldoras. */
.cuenta-nav a,
.cuenta-nav button {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--e-4);
  border-radius: var(--r-l);
  font-family: var(--f-display);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-secondary);
  background: transparent;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.cuenta-nav a:hover,
.cuenta-nav button:hover { background: var(--color-surface-alt); color: var(--color-on-background); }

.cuenta-nav a[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cuenta-nav .cuenta-nav__salir {
  margin-left: auto;
  font-weight: 500;
  font-size: var(--t-small);
  color: var(--color-muted);
}
.cuenta-nav .cuenta-nav__salir:hover { color: var(--color-destructive); background: transparent; }


/* ------------------------------------------------------------
   Superficies
   ------------------------------------------------------------ */

.cuenta-caja {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-m);
  padding: var(--e-5);
}

.cuenta-caja + .cuenta-caja { margin-top: var(--e-4); }

.cuenta-caja > h2 {
  margin: 0 0 var(--e-4);
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

.cuenta-rejilla {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .cuenta-rejilla[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cuenta-rejilla[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------
   Cifras del resumen

   Cuatro números y ninguno más. Un área de cliente no es un
   cuadro de mando: si hay que explicar la cifra, sobra.
   ------------------------------------------------------------ */

.cuenta-cifras {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--e-5);
}

@media (min-width: 720px) {
  .cuenta-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cuenta-cifra {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-m);
  padding: var(--e-4);
}

.cuenta-cifra__et {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--e-2);
}

.cuenta-cifra__valor {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.cuenta-cifra__pie {
  display: block;
  margin-top: var(--e-2);
  font-size: 0.8rem;
  color: var(--color-muted);
}


/* ------------------------------------------------------------
   Estados del pedido

   El color dice lo mismo que la palabra, nunca en su lugar: un
   punto verde sin texto no lo lee un daltónico ni un lector de
   pantalla.
   ------------------------------------------------------------ */

.cuenta .estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px;
  border-radius: var(--r-l);
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
}

.cuenta .estado::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.cuenta .estado[data-t="camino"] { color: var(--color-warning);     border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);     background: color-mix(in srgb, var(--color-warning) 9%, var(--blanco)); }
.cuenta .estado[data-t="hecho"] { color: var(--color-success);     border-color: color-mix(in srgb, var(--color-success) 32%, transparent);     background: color-mix(in srgb, var(--color-success) 9%, var(--blanco)); }
.cuenta .estado[data-t="malo"] { color: var(--color-destructive); border-color: color-mix(in srgb, var(--color-destructive) 32%, transparent); background: color-mix(in srgb, var(--color-destructive) 9%, var(--blanco)); }


/* ------------------------------------------------------------
   Tarjeta de pedido

   ⚠️ La tarjeta es un DIV y el enlace va dentro, no al revés.

   La primera versión era `<a class="pedido">` con toda la tarjeta
   dentro, y el enlace de «seguir el envío» quedaba anidado en él.
   Un <a> dentro de otro <a> es HTML inválido: el navegador cierra
   el de fuera por su cuenta, y la mitad de la tarjeta se salía y se
   pintaba suelta debajo. No daba error en consola ni se veía en el
   código: solo se ve mirando la página.
   ------------------------------------------------------------ */

.cuenta .pedido {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}

.cuenta .pedido:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--sombra-s);
}

.cuenta .pedido__enlace {
  display: block;
  padding: var(--e-4) var(--e-5);
  text-decoration: none;
  color: inherit;
}

.cuenta .pedido + .pedido { margin-top: var(--e-3); }

.pedido__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
}

.pedido__num {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.pedido__fecha {
  color: var(--color-muted);
  font-size: var(--t-small);
}

.pedido__total {
  margin-left: auto;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.pedido__que {
  color: var(--color-secondary);
  font-size: var(--t-small);
  line-height: 1.5;
  margin: 0;
}

/* Va FUERA del enlace de la tarjeta, por lo explicado arriba: lleva
   dentro el enlace al seguimiento del transportista. */
.pedido__seguimiento {
  margin: 0 var(--e-5);
  padding: var(--e-3) 0;
  border-top: 1px dashed var(--color-border);
  font-size: var(--t-small);
  color: var(--color-secondary);
}

.pedido__seguimiento .mono { font-family: var(--f-mono); font-size: 0.84rem; }


/* ------------------------------------------------------------
   Detalle: líneas y totales
   ------------------------------------------------------------ */

.cuenta .lineas { margin: 0; }

.cuenta .linea {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.cuenta .linea:last-child { border-bottom: 0; }

.linea__que { flex: 1 1 auto; min-width: 0; }
.linea__nombre { display: block; font-weight: 600; font-size: 0.98rem; }
.linea__detalle { display: block; color: var(--color-muted); font-size: var(--t-small); }
.linea__n { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.linea__eur { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cuenta .totales {
  margin: var(--e-4) 0 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--e-3);
  font-size: var(--t-small);
}

.cuenta .totales div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding: 3px 0;
}

.cuenta .totales dt { color: var(--color-muted); }
.cuenta .totales dd { margin: 0; font-variant-numeric: tabular-nums; }

.cuenta .totales .total {
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--color-border);
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--f-display);
  letter-spacing: -0.02em;
}
.cuenta .totales .total dt { color: var(--color-on-surface); }


/* ------------------------------------------------------------
   Línea de tiempo del pedido
   ------------------------------------------------------------ */

.cuenta .hitos { list-style: none; margin: 0; padding: 0; }

.cuenta .hitos li {
  position: relative;
  padding: 0 0 var(--e-4) var(--e-6);
  font-size: var(--t-small);
}
.cuenta .hitos li:last-child { padding-bottom: 0; }

/* la línea vertical, y el punto encima */
.cuenta .hitos li::before {
  content: "";
  position: absolute;
  left: 5px; top: 14px; bottom: -2px;
  width: 1px;
  background: var(--color-border);
}
.cuenta .hitos li:last-child::before { display: none; }

.cuenta .hitos li::after {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
}

.cuenta .hitos li[data-hecho]::after { background: var(--color-success); border-color: var(--color-success); }

.cuenta .hitos strong { display: block; font-weight: 600; }
.cuenta .hitos time { color: var(--color-muted); }


/* ------------------------------------------------------------
   Pantalla vacía

   Nunca en blanco. Si alguien llega aquí y no hay nada, la página
   tiene que decirle qué pasa y qué puede hacer.
   ------------------------------------------------------------ */

.cuenta .vacio {
  text-align: center;
  padding: var(--e-8) var(--e-5);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--r-m);
}

.cuenta .vacio h2 {
  margin: 0 0 var(--e-3);
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.cuenta .vacio p {
  margin: 0 auto var(--e-5);
  max-width: 46ch;
  color: var(--color-secondary);
}


/* ------------------------------------------------------------
   Avisos
   ------------------------------------------------------------ */

.cuenta .nota {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--r-s);
  background: var(--color-surface);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-small);
  line-height: 1.55;
}

.cuenta .nota[data-t="ok"] { border-left-color: var(--color-success);     background: color-mix(in srgb, var(--color-success) 7%, var(--blanco)); }
.cuenta .nota[data-t="malo"] { border-left-color: var(--color-destructive); background: color-mix(in srgb, var(--color-destructive) 7%, var(--blanco)); }
.cuenta .nota[data-t="aviso"] { border-left-color: var(--color-warning);     background: color-mix(in srgb, var(--color-warning) 8%, var(--blanco)); }
.cuenta .nota[hidden] { display: none; }

.cuenta .nota + .nota,
.cuenta .nota + .cuenta-caja,
.cuenta .cuenta-caja + .nota { margin-top: var(--e-4); }


/* ------------------------------------------------------------
   La casilla de la newsletter y las acciones del RGPD
   ------------------------------------------------------------ */

.cuenta .casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  cursor: pointer;
}

.cuenta .casilla input {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--tinta);
  cursor: pointer;
}

.cuenta .casilla span { font-size: var(--t-small); line-height: 1.55; color: var(--color-secondary); }
.cuenta .casilla strong { display: block; color: var(--color-on-surface); font-size: 1rem; font-weight: 600; margin-bottom: 2px; }

.cuenta .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}

/* Botón pequeño y sobrio, para lo que no es la acción principal.
   El .btn de la web es grande a propósito; dentro de una ficha con
   seis controles, seis botones grandes son una pared. */
.cuenta .btn-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--e-4);
  border-radius: var(--r-l);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-on-background);
  font-family: var(--f-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.cuenta .btn-min:hover { background: var(--color-surface-alt); }
.cuenta .btn-min[disabled] { opacity: .5; cursor: default; }
.cuenta .btn-min[data-t="malo"] { color: var(--color-destructive); border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent); }
.cuenta .btn-min[data-t="malo"]:hover { background: color-mix(in srgb, var(--color-destructive) 8%, var(--blanco)); }


/* ------------------------------------------------------------
   Entrar

   Una sola caja, centrada, sin nada alrededor. Es la única
   pantalla del área que ve alguien sin sesión.
   ------------------------------------------------------------ */

.cuenta .entrar {
  display: grid;
  place-items: center;
  padding-block: var(--e-8) var(--e-9);
}

.cuenta .entrar__caja {
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-g);
  padding: var(--e-7) var(--e-6);
  box-shadow: var(--sombra-m);
}

.cuenta .entrar__caja h1 {
  margin: 0 0 var(--e-3);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
}

.cuenta .entrar__caja p { margin: 0 0 var(--e-5); color: var(--color-secondary); font-size: var(--t-small); line-height: 1.6; }

.cuenta .entrar__caja .forma { max-width: none; gap: var(--e-4); }

.cuenta .entrar__pie {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-muted);
}
.cuenta .entrar__pie a { color: inherit; }


/* ------------------------------------------------------------
   Esqueletos de carga
   ------------------------------------------------------------ */

.cuenta .hueso {
  border-radius: var(--r-s);
  background: linear-gradient(90deg,
    var(--color-surface-alt) 25%,
    color-mix(in srgb, var(--color-border) 45%, var(--color-surface-alt)) 37%,
    var(--color-surface-alt) 63%);
  background-size: 400% 100%;
  animation: hueso 1.4s ease-in-out infinite;
  height: 18px;
  margin-bottom: 10px;
}

@keyframes hueso { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  .hueso { animation: none; }
}


/* ------------------------------------------------------------
   Campo bloqueado

   El correo de la cuenta se enseña pero no se toca. Un input
   deshabilitado que se ve exactamente igual que los demás es una
   trampa: la persona escribe encima, no pasa nada, y se va
   pensando que la web está rota.
   ------------------------------------------------------------ */

.cuenta .forma input[disabled],
.cuenta .forma select[disabled],
.cuenta .forma textarea[disabled] {
  background: var(--color-surface-alt);
  color: var(--color-muted);
  border-style: dashed;
  cursor: not-allowed;
}