/** * Crochetts — Cuenta header * Estilos del saludo "Hola, {nombre}" y del panel desplegable de login. * Verde marca Crochetts: #416843. */ /* Icono clicable */ .elementor-widget-icon.cch-clickable { cursor: pointer; } /* Estado logueado: el widget es referencia de posicionamiento para el saludo */ .elementor-widget-icon.cch-logged-in { position: relative; } /* Saludo "Hola, {nombre}" bajo el icono (absoluto para no alterar la fila) */ .cch-greet { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; margin-top: 4px; font-size: 11px; line-height: 1.2; color: #416843; font-weight: 600; pointer-events: none; z-index: 20; } /* Estado no logueado: el icono es clicable (el panel va en fixed) */ /* (la regla .cch-clickable ya esta definida arriba) */ /* Panel desplegable de login (fixed en , anclado al icono por JS) */ .cch-login-panel { position: fixed; width: 280px; max-width: 90vw; max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 20px; z-index: 100000; display: none; text-align: left; box-sizing: border-box; } /* Triangulo superior del panel */ .cch-login-panel::before { content: ""; position: absolute; top: -7px; right: 18px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; } /* Mostrar panel al abrir (la posicion top/left/right la fija el JS) */ .cch-login-panel.is-open { display: block; } /* Boton cerrar */ .cch-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 20px; line-height: 1; color: #9a9a9a; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .cch-close:hover, .cch-close:focus { color: #416843; } /* Titulo del panel */ .cch-login-title { font-weight: 600; color: #416843; font-size: 15px; margin: 0 0 14px; padding-right: 20px; } /* Formulario WooCommerce dentro del panel */ .cch-login-body .woocommerce-form-login, .cch-login-body form.login { display: block !important; margin: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } .cch-login-body label { font-size: 13px; color: #416843; font-weight: 600; display: block; margin: 0 0 4px; } .cch-login-body input[type="text"], .cch-login-body input[type="password"], .cch-login-body input[type="email"] { width: 100%; padding: 8px 10px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; margin-bottom: 12px; box-sizing: border-box; } .cch-login-body input[type="text"]:focus, .cch-login-body input[type="password"]:focus, .cch-login-body input[type="email"]:focus { border-color: #416843; outline: 0; } .cch-login-body .woocommerce-form-login__rememberme, .cch-login-body .rememberme { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b6b6b; margin-bottom: 12px; font-weight: 400; } .cch-login-body .woocommerce-form-login__submit, .cch-login-body form.login .button, .cch-login-body input[type="submit"] { width: 100%; background: #416843; color: #fff; border: 0; border-radius: 6px; padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 10px; } .cch-login-body .woocommerce-form-login__submit:hover, .cch-login-body form.login .button:hover, .cch-login-body input[type="submit"]:hover { background: #355936; } .cch-login-body .lost_password, .cch-login-body .woocommerce-LostPassword { font-size: 12px; text-align: center; display: block; } .cch-login-body .lost_password a, .cch-login-body .woocommerce-LostPassword a { color: #416843; text-decoration: underline; } .cch-login-body .woocommerce-form-login__submit + .lost_password { margin-top: 4px; } /* Mensajes de error/aviso de WC dentro del panel */ .cch-login-body .woocommerce-error, .cch-login-body .woocommerce-message { font-size: 12px; padding: 8px 10px; margin-bottom: 12px; border-radius: 6px; } /* Movil: ocultar saludo y ajustar panel */ @media (max-width: 767px) { .cch-greet { display: none; } .cch-login-panel { width: min(280px, 80vw); } }