/** * CIAM Integration — Estilos del Frontend * * @package CiamIntegration * @since 1.0.0 */ /* ── Barra de herramientas ───────────────────────────────────────────────────── */ .ciam-toolbar-wrapper { position: relative; } #ciam-toolbar { display: flex; align-items: center; gap: 8px; } /* ── Botones ─────────────────────────────────────────────────────────────────── */ .ciam-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color 0.2s, transform 0.1s; text-decoration: none; } .ciam-btn:active { transform: scale( 0.98 ); } .ciam-btn-login { background-color: #2271b1; color: #ffffff; } .ciam-btn-login:hover { background-color: #135e96; color: #ffffff; } .ciam-btn-logout { background-color: #cc1818; color: #ffffff; } .ciam-btn-logout:hover { background-color: #a11010; color: #ffffff; } .ciam-btn-register { background-color: #2ea44f; color: #ffffff; } .ciam-btn-register:hover { background-color: #248040; color: #ffffff; } /* ── Contenido protegido ─────────────────────────────────────────────────────── */ .ciam-protected-message { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff3cd; border: 1px solid #ffc107; border-left: 4px solid #ffc107; border-radius: 4px; color: #6a4a00; font-size: 14px; } /* ── Estado de sesión ────────────────────────────────────────────────────────── */ .ciam-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } .ciam-status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ciam-status-active::before { background: #2ea44f; } .ciam-status-inactive::before { background: #c3c4c7; } /* ── Anti-FOUC: oculta el saludo del tema antes de que JS actualice el texto ──── */ /* * Cuando PHP detecta sesión activa añade .ciam-logged-in al . * El elemento .btn-header-login contiene "Ingreso/Registro" en el HTML, * pero JS lo cambiará a "¡Hola {nombre}!". Lo ocultamos hasta que JS * haga la actualización para evitar el parpadeo del texto incorrecto. */ body.ciam-logged-in .btn-header-login { opacity: 0; transition: opacity 0.15s ease; } /* ── Responsivo ──────────────────────────────────────────────────────────────── */ @media ( max-width: 480px ) { .ciam-btn { padding: 7px 12px; font-size: 13px; } .ciam-protected-message { flex-direction: column; align-items: flex-start; } }