/* "Mis datos" agrupado en celdas. Cada grupo con su encabezado y los campos
   adentro, para que se lea de a bloques y no como una lista larga. */
.grupos{display:grid;gap:14px;margin-top:18px;max-width:720px}

/* Dos celdas lado a lado, para pantallas de pocos campos (usuario y contraseña).
   "stretch" las deja de la misma altura aunque una tenga menos texto adentro. */
.grupos.dos{grid-template-columns:1fr 1fr;align-items:stretch;max-width:820px}

.grupo{border:1px solid var(--line);border-radius:12px;background:var(--paper);
  overflow:hidden;display:flex;flex-direction:column}
.grupo .gh{background:var(--surf);border-bottom:1px solid var(--line);padding:12px 18px}
.grupo .gh b{display:block;font-size:15px;font-weight:600;margin-bottom:2px}
.grupo .gh span{display:block;font-size:12.5px;color:var(--mut2);line-height:1.4}
.grupo .gb{padding:16px 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1}
/* "una" apila los campos en vez de ponerlos a dos columnas */
.grupo .gb.una{grid-template-columns:1fr;align-content:start}

/* el encabezado centrado, para las celdas que van de a pares */
.grupos.dos .gh{text-align:center}

.grupo.clave{border-color:var(--line2)}

.gc{display:flex;flex-direction:column;min-width:0}
.gc.ancho{grid-column:1 / -1}
.gc label{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px}
.gc .fld{margin-bottom:0;border-radius:10px;padding:10px 12px;font-size:14px}
.gc .ghint{font-size:12px;color:var(--mut2);margin-top:5px;line-height:1.4}
.gc .ck{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:400;color:var(--ink);margin:0 0 7px}
.gc .ck input{width:auto;margin:0}

.guardar{display:flex;align-items:center;gap:14px;margin-top:18px;max-width:820px}
.guardar .gok{font-size:12.5px;color:var(--ok)}

/* --- Ficha de maquina ---
   Los datos en dos columnas adentro de la celda. La garantia ocupa el ancho
   entero porque lleva la barra de progreso. */
.grupos.maqs{max-width:820px}
.grupo.mq .gh span{font-size:13.5px;color:var(--ink);font-weight:600}
.grupo.mq .gb.dat{grid-template-columns:1fr 1fr;gap:14px 22px;align-content:start}
.grupo.mq .kv span{display:block;font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#6C6C73;margin-bottom:3px}
.grupo.mq .kv b{font-size:14px;font-weight:600;color:var(--ink)}
.grupo.mq .kv.gar{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.grupo.mq .kv .estado{margin-top:0}
.grupo.mq .bar{margin-top:6px}
.grupo.mq .warrow{margin-top:5px}

@media(max-width:820px){.grupos.dos{grid-template-columns:1fr}}
@media(max-width:700px){.grupo .gb{grid-template-columns:1fr}}