/** * Estilos para el plugin AF Ges Notificaciones */ /* Contenedor de notificaciones */ .notifications-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; width: 420px !important; box-sizing: border-box !important; } /* Notificación individual */ .notifications-container .notification { background: white; border-radius: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-bottom: 0.75rem; padding: 1.25rem; border-left: 4px solid #0078d4; animation: slideInRight 0.3s ease; position: relative; width: 100% !important; box-sizing: border-box !important; min-height: 75px; max-width: none !important; min-width: 0 !important; display: block !important; margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; right: auto !important; text-align: left !important; } /* Tipos de notificación */ .notifications-container .notification.success { border-left-color: #28a745; padding: 1.25rem !important; } .notifications-container .notification.error { border-left-color: #dc3545; padding: 1.25rem !important; } .notifications-container .notification.warning { border-left-color: #ffc107; padding: 1.25rem !important; } /* Header de la notificación */ .notifications-container .notification-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; margin-top: 0 !important; padding: 0 !important; } .notifications-container .notification-title { font-weight: 600; margin: 0 !important; font-size: 1rem; word-wrap: break-word; flex: 1; margin-right: 0.5rem !important; text-align: left !important; padding: 0 !important; } .notifications-container .notification-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #999; padding: 0 !important; line-height: 1; margin: 0 !important; } .notifications-container .notification-close:hover { color: #666; } /* Cuerpo de la notificación */ .notifications-container .notification-body { font-size: 0.95rem; color: #666; margin: 0 !important; word-wrap: break-word; line-height: 1.4; width: 100% !important; box-sizing: border-box !important; text-align: left !important; padding: 0 !important; } /* Animación de entrada */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Responsive */ @media screen and (max-width: 768px) { .notifications-container { left: 1rem; right: 1rem; width: calc(100% - 2rem); max-width: 360px; } } @media screen and (max-width: 480px) { .notifications-container { left: 0.5rem; right: 0.5rem; width: calc(100% - 1rem); max-width: 320px; } .notification { padding: 1rem; min-height: 65px; } } /* Estilos específicos para admin de WordPress */ .wp-admin .notifications-container { top: 32px; width: 420px !important; } .wp-admin .notifications-container .notification, .wp-admin .notifications-container .notification.success, .wp-admin .notifications-container .notification.warning, .wp-admin .notifications-container .notification.error { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; display: block !important; float: none !important; clear: both !important; } @media (max-width: 782px) { .wp-admin .notifications-container { top: 46px; width: 420px !important; } } /* === GES Notificaciones - Widget y Layout === */ .af-ges-notif-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9999; background: #fff; border-left: 4px solid #0073aa; box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 12px 14px; border-radius: 0; cursor: pointer; display: flex; align-items: center; gap: 8px; } /* Cuando existe el widget, subir el badge de reCAPTCHA encima (sin solaparse). */ html.af-has-ges-notif-widget .grecaptcha-badge{ bottom: calc(20px + var(--af-ges-notif-widget-h, 0px) + 12px) !important; } .af-ges-notif-widget:hover { box-shadow: 0 6px 16px rgba(0,0,0,.18); } .af-ges-notif-icon { margin-right: 4px; } .af-ges-notif-minimize { background: transparent; border: none; color: #555; font-size: 16px; line-height: 1; margin-left: 4px; cursor: pointer; padding: 2px 4px; } .af-ges-notif-minimize:hover { color: #111; } .af-ges-notif-enable{ background: rgba(0, 115, 170, 0.08); border: 1px solid rgba(0, 115, 170, 0.22); color: #065a87; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; } .af-ges-notif-enable:hover{ background: rgba(0, 115, 170, 0.14); } .af-ges-notif-widget.is-minimized { padding: 10px 12px; } .af-ges-notif-widget.is-minimized .af-ges-notif-text { display: none; } .af-ges-notif-widget.is-minimized .af-ges-notif-enable { display: none; } .af-ges-notif-icon { position: relative; } .af-ges-notif-count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: #d63638; color: #fff; border-radius: 0; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* Paginación (solo dentro de Notificaciones) */ .af-notificaciones-wrapper .af-pagination { margin-top:12px; } .af-notificaciones-wrapper .af-page { display:inline-block; margin-right:6px; padding:6px 10px; border:1px solid #ddd; border-radius: 0; text-decoration:none; color:#333; } .af-notificaciones-wrapper .af-page.active { background:#0073aa; color:#fff; border-color:#0073aa; } .af-notificaciones-wrapper .af-page[disabled] { opacity: 0.6; cursor: not-allowed; } /* Tabla genérica se toma del theme (ges-pages.css): af-ges-table* */ .af-notificaciones-inline-form { display: inline-flex; } /* Layout de cabecera/acciones de la página */ .af-notificaciones-summary { margin: 8px 0 0; opacity: .8; } .af-notificaciones-per-page { margin-top: 14px; } .af-notificaciones-per-page__label { display: block; font-size: 13px; opacity: .9; margin-bottom: 6px; color: rgba(238, 242, 255, 0.95); } .af-notificaciones-per-page__select { width: 100%; max-width: 220px; } /* Embedded: el menú lateral lo controla af-ges-menu (sin