/* Lo propio de las pantallas de cuenta. Tokens, cabecera, pie, .btn y .field vienen de styles.css
   (vendoreado). El contenido arranca en el borde izquierdo del .wrap de la cabecera, sin centrarse
   (regla del sitio); los formularios no pasan de 28rem. El pie queda abajo aunque la pantalla sea corta. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.acc { flex: 1; width: 100%; display: grid; align-content: start; gap: var(--space-5); padding-block: var(--space-8); }
.acc > * { max-width: 28rem; }
.acc h1 { margin: 0; }
.acc .lead, .acc .cap { margin: 0; }
.acc form { display: grid; gap: var(--space-3); }
.acc label { font-weight: 600; }
.acc .field { max-width: none; }
.acc .btn { width: 100%; }
.acc__code { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: 0.3em; }
.acc__or { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--muted); }
.acc__or::before, .acc__or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.acc__error { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--danger-subtle); color: var(--danger); }
.acc dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.acc dt { color: var(--muted); }
.acc dd { margin: 0; overflow-wrap: anywhere; }
/* Botón de Google según su guía de marca: fondo blanco, borde y la G a color. */
.btn--google { gap: var(--space-3); background: var(--base); color: var(--contrast); border: 1px solid var(--muted); }
.btn--google:hover { background: var(--surface); color: var(--contrast); }
/* Tabla de «Mis herramientas» en /account: dos columnas, sin el ancho mínimo de la .table del sitio. */
.acc .table { min-width: 0; }
.acc .table th, .acc .table td { padding: var(--space-3) var(--space-4); }

/* Administración del dueño (/admin): ocupa el ancho del .wrap. Es una herramienta densa: los tamaños
   de texto del sitio al 80 % (se redefinen los tokens dentro de .adm, así títulos, campos y botones
   escalan juntos), tablas compactas, pestañas y cada formulario de acción en un recuadro. */
.adm {
  --text-caption: calc(0.7875rem * 0.8);
  --text-body: calc(0.9rem * 0.8);
  --text-lg: calc(1.125rem * 0.8);
  --text-h3: calc(1.40625rem * 0.8);
  --text-h2: calc(1.74375rem * 0.8);
  --text-h1: calc(2.19375rem * 0.8);
  /* el cuerpo del sitio usa --t-*: los mismos valores de styles.css, al 80 % */
  --t-cap: calc(0.7875rem * 0.8);
  --t-body: calc(clamp(0.95625rem, 0.9rem + 0.27vw, 1.0125rem) * 0.8);
  --t-lead: calc(clamp(0.95625rem, 0.855rem + 0.54vw, 1.2375rem) * 0.8);
  font-size: var(--text-body);
  gap: var(--space-4);
}
.adm > * { max-width: none; }
.adm h2 { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.adm h2 > a { font-size: var(--text-caption); font-weight: 400; letter-spacing: 0; }
.adm .lead { max-width: var(--measure-text); }
/* Pestañas de la administración */
.adm__nav { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--border); }
.adm__nav a { padding: var(--space-2) var(--space-4); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.adm__nav a:hover { color: var(--contrast); }
.adm__nav a[aria-current="page"] { color: var(--contrast); font-weight: 600; border-bottom-color: var(--accent); }
/* Fichas de datos */
.adm dl { grid-template-columns: minmax(9rem, max-content) 1fr; gap: var(--space-2) var(--space-5); }
/* Tablas: todas las columnas iguales (la .table del sitio está pensada para dos columnas) */
.adm .table { min-width: 0; }
.adm .table th { padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--muted); }
.adm .table td { width: auto; padding: var(--space-2) var(--space-4); color: var(--contrast); background: var(--base); vertical-align: middle; }
.adm .table th + th, .adm .table td + td { border-left: 0; }
.adm .table tbody tr:hover td { background: var(--surface); }
/* Botones y campos más bajos */
.adm .btn { min-height: 36px; padding: var(--space-2) var(--space-4); width: auto; }
.adm .field { padding: var(--space-2) var(--space-3); }
.adm label { display: grid; gap: var(--space-1); font-weight: 600; }
.adm form.adm__inline { display: inline-flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.adm form.adm__row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; max-width: 60rem; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.adm .table form.adm__inline { display: inline; }
.adm__ok { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--accent-subtle); color: var(--contrast); }