/* css/screens/config.css */
.cfg-card { display:flex; flex-direction:column; gap:12px; }

.cfg-row { display:flex; align-items:center; gap:12px; }

.cfg-avatar {
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:var(--card-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:16px; color:var(--blue-2);
  }

.cfg-who { flex:1; min-width:0; }

/* Nombre + lápiz para entrar en modo edición (ver cfg-name-edit más abajo) — mismo
     ícono/idea que ya usa el coach para su propio nombre en su panel de Configuración,
     ahora disponible también para el cliente por si se equivocó al escribirlo al
     registrarse o simplemente lo quiere cambiar. */
.cfg-name-row { display:flex; align-items:center; gap:6px; min-width:0; }

/* Botón cuadrado con borde (mismo lenguaje que .top-btn / botones secundarios):
     antes era un ícono gris de 14px suelto, difícil de ver y de tocar. */
.cfg-edit-name-btn { flex-shrink:0; width:32px; height:32px; padding:0; border-radius:8px;
    background:color-mix(in srgb, var(--gize-blue) 12%, transparent); border:1px solid color-mix(in srgb, var(--gize-blue) 45%, transparent); color:var(--gize-blue);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background-color .15s, border-color .15s, color .15s, transform .12s; }

.cfg-edit-name-btn svg { width:16px; height:16px; }

.cfg-edit-name-btn:hover { background:color-mix(in srgb, var(--gize-blue) 22%, transparent); border-color:var(--gize-blue); color:var(--gize-text); }

.cfg-edit-name-btn:active { transform:scale(.95); }

/* flex:0 1 auto + min-width:0: ocupa solo lo que mide el texto (así el lápiz queda pegado
     al nombre y no empujado al borde derecho contra el badge), pero puede achicarse: sin
     min-width:0 un nombre largo no baja de su ancho de contenido y en una pantalla angosta
     el lápiz terminaba recortado por el overflow:hidden de la card en vez de mostrarse
     al lado del nombre truncado con "…". */
.cfg-name { flex:0 1 auto; min-width:0; font-size:var(--text-emphasis); font-weight:700; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cfg-email { font-size:var(--text-meta); color:var(--txt-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cfg-badge {
    flex-shrink:0; font-size:var(--text-meta); font-weight:700; color:var(--blue-2);
    background:var(--card-2); border:1px solid var(--border); border-radius:3px;
    padding:4px 9px;
  }

.cfg-empty { color:var(--txt-2); font-size:var(--text-body); text-align:center; padding:6px 0; }

.cfg-row-simple { display:flex; align-items:center; justify-content:space-between; font-size:var(--text-body); color:var(--txt); }

/* .cfg-ok ahora es un <button> (antes era un <span> puramente informativo) para poder
     desvincularse del coach con un solo click — reseteo el chrome nativo de botón para
     que en reposo se vea IDÉNTICO al texto de antes, y solo con :hover insinúo que es
     una acción (se tiñe de rojo apagado, mismo tono que ya usa .cfg-danger más abajo
     para "Borrar datos"), sin agregar ningún elemento visual nuevo a la pantalla. */
.cfg-ok { background:none; border:none; padding:0; font:inherit; cursor:pointer;
    display:inline-flex; align-items:center; gap:5px;
    color:var(--blue-2); font-weight:700; font-size:var(--text-meta); transition:color .15s ease; }

.cfg-ok svg { width:14px; height:14px; }

.cfg-ok:hover { color:var(--gize-danger); }
.cfg-sub { font-size:var(--text-meta); color:var(--txt-2); font-weight:600; margin-bottom:2px; }

.cfg-about { display:flex; justify-content:center; margin-top:12px; padding-bottom:8px; }

.cfg-about img { height:18px; width:auto; display:block; opacity:.7; }

/* .logout-btn trae margin-top:24px global, que acá se sumaba al gap:12px de .cfg-card
     y dejaba ~36px entre el título de la card y su botón. El gap ya separa. */
.cfg-card .logout-btn { margin-top:0; }

.cfg-danger { border-color:color-mix(in srgb, var(--gize-danger) 35%, transparent) !important; color:var(--gize-danger) !important; }

/* Fix: .card trae opacity:.45/scale:.90 por defecto (pensado para el foco de
     scroll de Entreno, ver .ex-focused) y acá nunca se activa. Misma especificidad
     que .card pero definida después → gana en la cascada sin !important. */
.cfg-card { opacity: 1; transform: none;
    transition: transform var(--duration-standard) var(--ease-drawer),
                border-color var(--duration-standard) ease,
                box-shadow var(--duration-standard) ease;
  }

/* Elevación + iluminación de borde al pasar el cursor — mismo verde de marca
     que ya usan el borde y el glow de las cajas (--glow, --border en modo silk-on),
     así queda del mismo lenguaje visual en vez de un efecto ajeno a la estética. */
.cfg-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gize-blue) 50%, transparent);
    box-shadow: var(--shadow-card), 0 0 16px var(--glow); }

@media (prefers-reduced-motion: reduce) {
    .cfg-card:hover { transform: none; }
  }

/* Fila de Notificaciones: ícono + texto + switch, mismo layout base que .cfg-row. */
.cfg-notif-row { display:flex; align-items:center; gap:12px; }

.cfg-notif-ic { flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--card-2);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--txt-2); }

.cfg-notif-ic svg { width:18px; height:18px; }

.cfg-notif-txt { flex:1; min-width:0; }

.cfg-notif-label { font-size:var(--text-body); font-weight:700; color:var(--txt); }

.cfg-notif-desc { font-size:var(--text-meta); color:var(--txt-2); margin-top:1px; }
.cfg-notif-desc.cfg-notif-ios { color:var(--gize-warning); margin-top:6px; line-height:1.4; }

/* Switch a mano (no <input type="checkbox">, para mantener el mismo lenguaje de botón
     custom que ya usa el resto de la app — ver .done en components.css). Botón chico
     con una perilla que se desliza; el verde de marca marca el estado "on". */
.cfg-switch { flex-shrink:0; width:44px; height:26px; border-radius:20px; padding:2px;
    background:var(--card-2); border:1px solid var(--border); cursor:pointer;
    display:flex; align-items:center; transition:background .18s ease, border-color .18s ease; }

.cfg-switch-knob { width:20px; height:20px; border-radius:50%; background:var(--txt-3);
    transition:transform .18s cubic-bezier(.23,1,.32,1), background .18s ease; }

.cfg-switch.on { background:var(--green); border-color:var(--green); }

.cfg-switch.on .cfg-switch-knob { background:var(--gize-bg); transform:translateX(18px); }

@media (prefers-reduced-motion: reduce) {
    .cfg-switch, .cfg-switch-knob { transition:none; }
  }

/* Filas de link (Términos, Instagram, Sitio web, Email, WhatsApp): mismo look de fila
     clicable que el resto de Configuración, con ícono a la izquierda y chevron a la
     derecha para que se lean como navegación y no como un dato estático. */
.cfg-link-row { display:flex; align-items:center; gap:12px; padding:4px 0;
    color:var(--txt); text-decoration:none; }

.cfg-link-row + .cfg-link-row { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }

.cfg-link-ic { flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--card-2);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--txt-2); }

.cfg-link-ic svg { width:18px; height:18px; }

.cfg-link-label { flex:1; min-width:0; font-size:var(--text-body); font-weight:700; }

.cfg-link-chev { flex-shrink:0; color:var(--txt-3); display:flex; }

.cfg-link-chev svg { width:16px; height:16px; }

.cfg-link-row:hover .cfg-link-chev { color:var(--blue-2); }

/* Formulario inline de edición de nombre (reemplaza el bloque nombre+email de
     .cfg-who mientras State.cfgEditingName está en true — ver screens/config.js).
     Reutiliza .form-input/.form-save/.logout-btn (mismos botones que el resto de la
     app) solo pisando el margin-top que traen por defecto, para que queden en fila
     en vez de apilados con espacio de sobra. */
.cfg-name-edit { display:flex; flex-direction:column; gap:8px; }

.cfg-name-input { padding:9px 10px; font-size:var(--text-body); }

.cfg-name-edit-actions { display:flex; gap:8px; }

.cfg-name-save-btn, .cfg-name-cancel-btn { margin-top:0; width:auto; flex:1; }

/* ===== Foto de perfil ===== */
.cfg-avatar-pick { position:relative; flex-shrink:0; cursor:pointer; border-radius:50%; }
.cfg-avatar-pick:focus-within { outline:2px solid var(--gize-blue); outline-offset:3px; }
.cfg-avatar.has-photo, .co-avatar.has-photo { padding:0; overflow:hidden; background:var(--gize-surface-2); }
.cfg-avatar.has-photo img, .co-avatar.has-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.avatar-cam { position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; background:var(--gize-text); color:var(--gize-bg);
    display:flex; align-items:center; justify-content:center; border:2px solid var(--gize-surface); }
.avatar-cam svg { width:12px; height:12px; }
.cfg-photo-rm, .cs-photo-rm { background:none; border:0; padding:0; font:600 var(--text-meta) var(--gize-font); color:var(--txt-3);
    text-decoration:underline; text-underline-offset:3px; cursor:pointer; align-self:flex-start; }
.cfg-photo-rm:hover, .cs-photo-rm:hover { color:var(--gize-danger); }
.cs-photo-btn { display:inline-flex; align-items:center; cursor:pointer; }
body.avatar-busy { cursor:progress; }
body.avatar-busy .cfg-avatar-pick, body.avatar-busy .cs-photo-btn { opacity:.5; pointer-events:none; }