/* ========================================================= AS APP · 18B1 · EDITAR PERFIL · UI ÚNICO PROPIETARIO DE: - estilos base del editor de perfil - presentación de Editar perfil - recorte de foto - botón Guardar siempre visible ========================================================= */ /* BASE EXTRAÍDA DE 582 */ .as-profile-editor{max-width:760px;margin:0 auto} .as-profile-form{display:grid;gap:14px} .as-profile-card{background:var(--as-surface);border:1px solid var(--as-border);border-radius:var(--as-radius-lg);padding:18px;color:var(--as-text);box-shadow:0 10px 26px var(--as-palette-rgba-0-0-0-0p18)} .as-profile-photo-card{display:flex;align-items:center;gap:var(--as-space-4)} .as-profile-photo-wrap{width:82px;height:82px;flex:0 0 82px;border-radius:50%;overflow:hidden} .as-profile-photo-preview,.as-profile-default-avatar,.as-profile-default-avatar svg{width:82px;height:82px;border-radius:50%;display:block;object-fit:cover} .as-profile-default-avatar .as-profile-avatar-bg{fill:var(--as-surface-deep);stroke:var(--as-gold)} .as-profile-default-avatar .as-profile-avatar-accent{fill:var(--as-gold)} .as-profile-photo-preview{transform-origin:center center} .as-profile-photo-copy h2{margin:0 0 5px;font:var(--as-weight-semibold) 18px/1.2 var(--as-font-title);color:var(--as-text)} .as-profile-photo-copy p{margin:0 0 10px;color:var(--as-text-muted);font-size:var(--as-size-small)} .as-upload-btn{display:inline-flex;background:var(--as-gold);color:var(--as-text-inverse);padding:9px 13px;border-radius:11px;font-size:var(--as-size-small);font-weight:800;cursor:pointer} .as-upload-btn input{display:none} .as-profile-zoom-label{display:grid;gap:5px;margin-top:10px;color:var(--as-text-muted);font-size:var(--as-size-meta);font-weight:700} .as-profile-zoom{width:150px;accent-color:var(--as-gold)} .as-profile-section-title{font:var(--as-weight-semibold) 19px/1.2 var(--as-font-title);color:var(--as-text);margin-bottom:14px} .as-profile-help{margin:-6px 0 14px;color:var(--as-text-secondary);font-size:var(--as-size-small);line-height:1.45} .as-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--as-space-3)} .as-profile-grid label{display:grid;gap:6px} .as-profile-grid label span{font-size:var(--as-size-meta);color:var(--as-text-muted);font-weight:700} .as-profile-grid label em{font-style:normal;color:var(--as-text-soft);font-weight:500} .as-profile-grid input{width:100%;box-sizing:border-box;background:var(--as-surface-input)!important;color:var(--as-text)!important;border:1px solid var(--as-border-input)!important;border-radius:12px;padding:var(--as-space-3) 13px;font-size:var(--as-size-ui)} .as-profile-grid input[readonly]{opacity:.7} .as-profile-wide{grid-column:1/-1} .as-profile-save{width:100%;border:0;border-radius:var(--as-radius-md);background:var(--as-gold)!important;color:var(--as-text-inverse)!important;padding:14px 18px;font-size:var(--as-size-ui);font-weight:800;cursor:pointer} .as-profile-msg{border-radius:12px;padding:11px 13px;font-size:var(--as-size-body);margin-bottom:var(--as-space-3)} .as-profile-msg.ok{background:var(--as-success-bg);color:var(--as-success-text);border:1px solid var(--as-success-border)} .as-profile-msg.error{background:var(--as-error-bg);color:var(--as-error-text);border:1px solid var(--as-error-border)} @media(max-width:620px){ .as-profile-grid{grid-template-columns:1fr} .as-profile-wide{grid-column:auto} .as-profile-photo-card{align-items:flex-start} } /* AJUSTES ESPECÍFICOS CONSOLIDADOS */ /* ========================================================= AS APP · 18B1 · EDITAR PERFIL · UI ÚNICO PROPIETARIO DE: - presentación de Editar perfil - botón Guardar siempre visible ========================================================= */ /* === AS APP · PROFILE === */ body.as-route-profile .as-subpage{ padding:14px 14px 94px!important; } /* Cabecera Editar Perfil consolidada en 970 · AS APP · 12 · Cabeceras de pantallas. */ body.as-route-profile .as-profile-grid input[type="date"]{ width:100%!important; height:44px!important; min-height:44px!important; max-height:44px!important; padding:10px var(--as-space-3)!important; font-size:var(--as-size-ui)!important; line-height:1.2!important; border-radius:12px!important; box-sizing:border-box!important; -webkit-appearance:none!important; appearance:none!important; } body.as-route-profile .as-profile-grid input[type="date"]::-webkit-date-and-time-value{ text-align:left!important; } body.as-route-profile .as-profile-photo-card{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; text-align:center!important; gap:10px!important; } body.as-route-profile .as-profile-photo-wrap{ margin:0 auto!important; } body.as-route-profile .as-profile-photo-copy{ width:100%!important; display:flex!important; flex-direction:column!important; align-items:center!important; text-align:center!important; } body.as-route-profile .as-profile-photo-copy h2{ margin:0 0 var(--as-space-1)!important; font-size:21px!important; } body.as-route-profile .as-profile-photo-copy p{ margin:0 0 10px!important; font-size:var(--as-size-body)!important; } body.as-route-profile .as-upload-btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; min-width:132px!important; min-height:42px!important; padding:10px var(--as-space-4)!important; border-radius:12px!important; background:var(--as-gold)!important; color:var(--as-text-inverse)!important; font-size:var(--as-size-ui)!important; font-weight:800!important; line-height:1!important; box-shadow:none!important; } body.as-route-profile .as-upload-btn::before{ content:"＋"; font-size:17px!important; line-height:1!important; color:var(--as-text-inverse)!important; } body.as-route-profile .as-upload-btn,body.as-route-profile .as-upload-btn *{ color:var(--as-text-inverse)!important; } body.as-route-profile .as-profile-zoom-label{display:none!important} body.as-route-profile .as-photo-cropper{position:fixed;inset:0;z-index:var(--as-z-profile-cropper);background:var(--as-overlay-strong);display:none;align-items:center;justify-content:center;padding:18px;box-sizing:border-box} body.as-route-profile .as-photo-cropper.is-open{display:flex} body.as-route-profile .as-photo-cropper-card{width:min(100%,360px);background:var(--as-surface-card-2);border:1px solid var(--as-border);border-radius:24px;padding:var(--as-space-5);box-sizing:border-box;text-align:center;color:var(--as-text)} body.as-route-profile .as-photo-cropper-card h2{margin:0 0 6px;font:var(--as-weight-semibold) 24px/1.1 var(--as-font-title);color:var(--as-text)} body.as-route-profile .as-photo-cropper-card p{margin:0 0 var(--as-space-4);color:var(--as-text-muted);font-size:var(--as-size-small);line-height:1.35} body.as-route-profile .as-photo-crop-area{width:260px;height:260px;margin:0 auto var(--as-space-4);position:relative;overflow:hidden;border-radius:50%;background:var(--as-surface-deep);border:2px solid var(--as-gold);touch-action:none;cursor:grab} body.as-route-profile .as-photo-crop-area:active{cursor:grabbing} body.as-route-profile .as-photo-crop-area img{position:absolute;max-width:none!important;user-select:none;-webkit-user-drag:none;pointer-events:none;transform:none!important;border-radius:0!important} body.as-route-profile .as-photo-crop-zoom{width:260px;margin:0 auto 18px;display:grid;gap:7px} body.as-route-profile .as-photo-crop-zoom span{font-size:var(--as-size-meta);color:var(--as-text-muted);font-weight:700} body.as-route-profile .as-photo-crop-zoom input{width:100%;accent-color:var(--as-gold)} body.as-route-profile .as-photo-crop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} body.as-route-profile .as-photo-crop-actions button{height:44px;border-radius:12px;font-size:var(--as-size-body);font-weight:800;cursor:pointer} body.as-route-profile .as-photo-crop-cancel{background:var(--as-surface-hover);color:var(--as-text);border:1px solid var(--as-border-control)} body.as-route-profile .as-photo-crop-accept{background:var(--as-gold);color:var(--as-text-inverse);border:0} body.as-route-profile .as-profile-section-title{ font-size:22px!important; line-height:1.2!important; margin-bottom:var(--as-space-4)!important; } body.as-route-profile .as-profile-grid label span{ font-size:var(--as-size-ui)!important; line-height:1.25!important; color:var(--as-text-bright)!important; font-weight:700!important; } body.as-route-profile .as-profile-grid label em{ font-size:var(--as-size-small)!important; color:var(--as-text-soft)!important; } body.as-route-profile .as-profile-grid input{ min-height:48px!important; padding:13px 14px!important; font-size:var(--as-size-body-lg)!important; line-height:1.25!important; } body.as-route-profile .as-profile-help{ font-size:var(--as-size-body)!important; line-height:1.5!important; } body.as-route-profile .as-profile-save{ min-height:50px!important; font-size:var(--as-size-body-lg)!important; } body.as-route-profile.as-profile-embedded .as-subpage{padding-bottom:22px!important} body.as-route-profile.as-profile-embedded{ overflow-x:hidden!important; } /* === /AS APP · PROFILE === */ /* === AS APP · PROFILE · GUARDAR SIEMPRE VISIBLE === */ body.as-route-profile.as-profile-embedded .as-profile-form{ padding-bottom:150px!important; } body.as-route-profile.as-profile-embedded .as-profile-save{ display:block!important; position:fixed!important; left:50%!important; transform:translateX(-50%)!important; bottom:88px!important; width:calc(100% - 28px)!important; max-width:402px!important; min-height:52px!important; margin:0!important; z-index:var(--as-z-profile-overlay)!important; border:0!important; border-radius:var(--as-radius-md)!important; background:var(--as-gold)!important; color:var(--as-text-inverse)!important; font-size:var(--as-size-body-lg)!important; font-weight:800!important; box-shadow:0 10px 30px var(--as-palette-rgba-0-0-0-0p45)!important; } /* 2.3.4 · EDITAR PERFIL · SUBIR FOTO Contraste explícito: evita que reglas genéricas de label/texto apaguen el texto. */ html.as-theme-light body.as-route-profile .as-upload-btn, html.as-theme-light body.as-route-profile .as-upload-btn::before, html.as-theme-dark body.as-route-profile .as-upload-btn, html.as-theme-dark body.as-route-profile .as-upload-btn::before{ color:var(--as-white)!important; } body.as-route-profile .as-upload-btn{ text-shadow:0 1px 1px var(--as-palette-rgba-0-0-0-0p18)!important; }