/* ============================================================
   portal.css — Mi Albacetea: acceso (/cuenta/) y portal (/mi/)
   Sobre tokens.css, main.css y sitio.css. Ambar, unico acento.
   ============================================================ */

/* Lo que el JS esconde se esconde siempre: .formulario, .tarjeta... ponen
   su propio display y le ganarian al atributo hidden. */
.panel [hidden], .portal [hidden] { display: none !important; }

/* ---------- /cuenta/: marca a la izquierda, panel a la derecha ---------- */
.acceso {
  display: grid;
  gap: var(--space-2xl);
  padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-2xl);
  align-items: start;
}
@media (min-width: 60rem) {
  .acceso { grid-template-columns: 1fr minmax(0, 28rem); gap: var(--space-3xl); align-items: center; min-height: min(var(--vh-full), 900px); }
}

.panel {
  padding: var(--space-xl) var(--space-lg);
  border-radius: 18px;
  background: rgba(var(--paper-rgb), 0.04);
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
@media (min-width: 40rem) { .panel { padding: var(--space-2xl); } }
.panel .formulario { max-width: none; gap: var(--space-md); }
.panel__cargando { min-height: 320px; }
.panel__titulo { margin: 0 0 var(--space-sm); font-size: 1.5rem; line-height: 1.15; }
.panel .texto { margin: 0 0 var(--space-md); }

/* Pestanas Crear cuenta / Entrar. */
.pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-lg);
  border-radius: 12px;
  background: rgba(var(--paper-rgb), 0.06);
}
.pestanas__boton {
  min-height: var(--tap-min);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(var(--paper-rgb), 0.7);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-spring);
}
.pestanas__boton[aria-selected='true'] { background: var(--paper); color: var(--ink); }

/* Contrasena con boton Mostrar dentro del campo. */
.campo__clave { position: relative; }
.campo__clave .campo__control { padding-right: 6rem; }
.campo__ver {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--paper-rgb), 0.08);
  color: var(--paper);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

/* Accion secundaria con pinta de enlace, pero es un boton. */
.enlace-boton {
  justify-self: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-sm);
  border: 0;
  background: none;
  color: rgba(var(--paper-rgb), 0.75);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: rgba(var(--amber-rgb), 0.6);
  text-underline-offset: 4px;
  cursor: pointer;
}
@media (hover: hover) { .enlace-boton:hover { color: var(--paper); } }

.panel .form__consent { margin: 0; }

/* ---------- /mi/: el portal ---------- */
.portal {
  display: grid;
  gap: var(--space-lg);
  padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-3xl);
}
.portal__cabecera { display: grid; gap: var(--space-2xs); }
.portal__saludo { margin: 0; font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; }

/* Menu de secciones: fila con scroll en movil, columna en escritorio. */
.portal__menu {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.portal__enlace {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-md);
  border-radius: 999px;
  color: rgba(var(--paper-rgb), 0.8);
  text-decoration: none;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.14);
  transition: background var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-spring);
}
.portal__enlace[aria-current='page'] { background: var(--amber); color: var(--ink); box-shadow: none; }
@media (hover: hover) { .portal__enlace:not([aria-current]):hover { color: var(--paper); background: rgba(var(--paper-rgb), 0.06); } }

@media (min-width: 60rem) {
  .portal { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-2xl); align-items: start; }
  .portal__cabecera { grid-column: 1 / -1; }
  .portal__menu { flex-direction: column; margin: 0; padding: 0; position: sticky; top: calc(var(--nav-h) + var(--space-lg)); }
  .portal__enlace { border-radius: 10px; }
}

.portal__cuerpo { min-width: 0; }
.portal__titulo { margin: 0 0 var(--space-md); font-size: 1.75rem; }
.portal__subtitulo { margin: var(--space-2xl) 0 var(--space-md); font-size: 1.125rem; color: rgba(var(--paper-rgb), 0.85); }
.portal__rejilla { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .portal__rejilla { grid-template-columns: 2fr 1fr; } }
.portal__fecha { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); color: var(--amber); line-height: 1.1; }
.portal__proximo .btn { align-self: flex-start; margin-top: var(--space-sm); }
.portal__ok { margin: var(--space-xs) 0 0; font-weight: 700; color: var(--paper); }
.portal__cifra { margin: 0; font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--amber); }
.portal__pronto .tarjeta { opacity: 0.8; }
.portal__pronto .tarjeta__titulo { font-size: 1.0625rem; }

.portal__nota { margin: 0 0 var(--space-lg); max-width: 44rem; }
.portal__lista { display: grid; gap: var(--space-md); }
.portal__pedido .btn { align-self: flex-start; margin-top: var(--space-xs); }
.portal__marca-prueba { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--amber); }

.portal__bloque { padding-block: var(--space-lg); border-top: 1px solid rgba(var(--paper-rgb), 0.08); }
.portal__bloque:first-of-type { border-top: 0; padding-top: 0; }
.portal__bloque .portal__subtitulo { margin-top: 0; }
.portal__bloque .texto { margin: 0 0 var(--space-md); max-width: 40rem; }
.portal__dato { margin: 0; min-height: var(--control-h); display: flex; align-items: center; color: rgba(var(--paper-rgb), 0.8); }

/* Borrar la cuenta: el unico sitio sin ambar en el boton, a proposito. */
.btn--peligro { background: #b3261e; color: #fff; }
@media (hover: hover) { .btn--peligro:hover { background: #8f1d17; color: #fff; } }

/* En el portal los botones de formulario van a su medida, no a todo el ancho. */
.portal .formulario .btn, .portal__bloque .btn { justify-self: start; width: auto; }
.portal .formulario { max-width: 32rem; }

/* Acceso de pruebas (solo local): separado y con aviso, que no se confunda. */
.panel__pruebas { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px dashed rgba(var(--amber-rgb), 0.5); display: grid; gap: var(--space-sm); }
.panel__pruebas-aviso { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); text-align: center; }

/* Registro: selects de provincia y localidad con la flecha de la marca. */
select.campo__control { appearance: none; padding-right: 2.4rem; background-image: linear-gradient(45deg, transparent 50%, var(--amber) 50%), linear-gradient(135deg, var(--amber) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
select.campo__control:disabled { opacity: 0.55; }
select.campo__control option { background: var(--ink); color: var(--paper); }

/* Continuar con Google: boton blanco, como pide Google (logo a color,
   fondo claro). Encima de las pestañas de correo. */
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper); color: #1f1f1f; font: inherit; font-weight: 700; font-size: 1rem;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-spring);
}
.boton-google:disabled { opacity: 0.6; cursor: wait; }
@media (hover: hover) { .boton-google:hover { box-shadow: 0 0 0 3px rgba(var(--amber-rgb), 0.55); } }
.boton-google:active { transform: scale(0.98); }
.boton-google__g { flex: none; }
.acceso__o { display: flex; align-items: center; gap: 12px; margin: var(--space-md) 0; color: var(--smoke); font-size: var(--step-caption); }
.acceso__o::before, .acceso__o::after { content: ''; flex: 1; height: 1px; background: rgba(var(--paper-rgb), 0.12); }

/* Mi cuenta: falta completar el perfil (recien entrado con Google). */
.cuenta__completar { margin: 0 0 var(--space-md); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(var(--amber-rgb), 0.5); background: rgba(var(--amber-rgb), 0.1); color: var(--paper); font-weight: 600; }

.acceso__legal { margin: 8px 0 0; text-align: center; font-size: var(--step-caption); color: var(--smoke); }
.acceso__legal a { color: var(--smoke); }