/** * App unificada del portal (gestor + cliente), a petición de María: * acceso al panel sin pasar por wp-admin, con contenido según el rol. * Diseño propio, inspirado en paneles de administración modernos * (menú lateral oscuro, tarjeta de bienvenida en gradiente, tarjetas de * métricas, gráficos, actividad reciente), con el azul de marca de * Sephor Consulting. Completamente aislado bajo .sephor-support-app, * sin depender del tema activo — mismo criterio que portal.css. * * #wpadminbar oculta también por CSS, además del filtro show_admin_bar * en PHP (Sephor_Support_Portal::maybe_enqueue_assets()): ese filtro se * registra en el hook 'wp', pero WordPress ya decide si mostrar la * barra antes de eso (en 'init', dentro de _wp_admin_bar_init()), así * que por sí solo no es fiable — esta regla es la que realmente * garantiza que no se vea, sea cual sea el orden de los hooks. No va * dentro de .sephor-support-app porque #wpadminbar vive fuera de ese * contenedor en el HTML. */ #wpadminbar { display: none !important; } html { margin-top: 0 !important; } * html body { margin-top: 0 !important; } /** * Reutiliza los MISMOS nombres de clase que generan las clases PHP * compartidas (Sephor_Support_Admin_Render::status_badge()/donut_chart()/ * stat_bars()/line_chart()), pero con su aspecto definido aquí, aislado * — igual que ya hace portal.css con .ss-badge. */ .sephor-support-app { --app-blue: #009bdb; --app-blue-dark: #0a6fa0; --app-navy: #0f1b2e; --app-navy-soft: #16263d; --app-border: #e5e8ee; --app-bg: #f4f6fa; --app-surface: #ffffff; --app-text: #1a2338; --app-muted: #6b7385; --app-green: #16a34a; --app-orange: #f59e0b; --app-red: #dc2626; --app-purple: #7c3aed; display: flex; min-height: 100vh; background: var(--app-bg); color: var(--app-text); font-family: 'Segoe UI', Inter, system-ui, -apple-system, sans-serif; } .sephor-support-app *, .sephor-support-app *::before, .sephor-support-app *::after { box-sizing: border-box; } .sephor-support-app a { color: inherit; /* !important porque el shortcode se imprime dentro de the_content(): el tema activo puede dar su propio subrayado a los enlaces con una especificidad que empate con la nuestra, y entonces ganaría quien cargue en último lugar en el — esto lo hace inequívoco. */ text-decoration: none !important; } .sephor-support-app .ss-icon { display: inline-block; vertical-align: middle; } /* --- Sidebar ------------------------------------------------------------ */ .sephor-support-app .app-sidebar { flex: 0 0 250px; background: var(--app-navy); color: #cbd3e1; padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; } .sephor-support-app .app-sidebar-brand { display: flex; align-items: center; padding: 0 8px; } .sephor-support-app .app-sidebar-brand img { max-width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .95; } .sephor-support-app .app-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sephor-support-app .app-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; color: #aab2c5; } .sephor-support-app .app-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .sephor-support-app .app-nav a.is-active { background: var(--app-blue); color: #fff; } .sephor-support-app .app-nav .ss-icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .75; } .sephor-support-app .app-nav a.is-active .ss-icon, .sephor-support-app .app-nav a:hover .ss-icon { opacity: 1; } .sephor-support-app .app-nav-badge { margin-left: auto; background: var(--app-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; flex: 0 0 auto; } .sephor-support-app .app-sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; display: flex; flex-direction: column; gap: 8px; } .sephor-support-app .app-sidebar-footer a { color: #aab2c5; text-decoration: none; } .sephor-support-app .app-sidebar-footer a:hover { color: #fff; } /* --- Contenido principal -------------------------------------------------*/ .sephor-support-app .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .sephor-support-app .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; background: var(--app-surface); border-bottom: 1px solid var(--app-border); } .sephor-support-app .app-topbar-title { font-size: 18px; font-weight: 700; margin: 0; } .sephor-support-app .app-topbar-user { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--app-muted); } .sephor-support-app .app-logout { color: var(--app-muted); text-decoration: none; font-size: 13px; border: 1px solid var(--app-border); border-radius: 6px; padding: 6px 12px; } .sephor-support-app .app-logout:hover { color: var(--app-red); border-color: var(--app-red); } .sephor-support-app .app-content { flex: 1 1 auto; padding: 24px 28px 40px; width: 100%; } /* --- Tarjeta de bienvenida (gradiente) ----------------------------------- */ .sephor-support-app .app-welcome { background: linear-gradient(120deg, var(--app-blue) 0%, var(--app-blue-dark) 100%); color: #fff; border-radius: 16px; padding: 26px 28px; margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sephor-support-app .app-welcome h1 { margin: 0 0 4px; font-size: 24px; } .sephor-support-app .app-welcome p { margin: 0; opacity: .88; font-size: 14px; } .sephor-support-app .app-welcome-date { background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 6px 14px; font-size: 13px; white-space: nowrap; } /* --- Botones --------------------------------------------------------------*/ .sephor-support-app .app-button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.4; } .sephor-support-app .app-button-primary { background: var(--app-blue); color: #fff; } .sephor-support-app .app-button-primary:hover { background: var(--app-blue-dark); color: #fff; } .sephor-support-app .app-button-secondary { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } .sephor-support-app .app-button-secondary:hover { background: var(--app-bg); } .sephor-support-app .app-button-ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); } .sephor-support-app .app-button-secondary.is-danger { color: var(--app-red); border-color: var(--app-red); } .sephor-support-app .app-button-secondary.is-danger:hover { background: var(--app-red); color: #fff; } /* --- Tarjetas de métricas -------------------------------------------------*/ .sephor-support-app .app-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; } .sephor-support-app .app-stat-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; } .sephor-support-app .app-stat-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 4px; } .sephor-support-app .app-stat-icon .ss-icon { width: 18px; height: 18px; } .sephor-support-app .app-stat-label { color: var(--app-muted); font-size: 13px; font-weight: 600; } .sephor-support-app .app-stat-value { font-size: 26px; font-weight: 700; } .sephor-support-app .app-stat-note { color: var(--app-muted); font-size: 12px; } /* --- Paneles genéricos ----------------------------------------------------*/ .sephor-support-app .app-panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; padding: 20px 22px; margin-bottom: 22px; } .sephor-support-app .app-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .sephor-support-app .app-panel-header h2 { margin: 0 0 2px; font-size: 16px; } .sephor-support-app .app-panel-header p { margin: 0; color: var(--app-muted); font-size: 13px; } .sephor-support-app .app-panel-header a:not(.app-button) { color: var(--app-blue); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; } .sephor-support-app .app-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-bottom: 22px; } /* --- Acciones rápidas -------------------------------------------------- */ .sephor-support-app .app-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .sephor-support-app .app-quick-action { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; text-decoration: none; color: #fff; font-weight: 600; font-size: 14px; } .sephor-support-app .app-quick-action-title { text-transform: uppercase; letter-spacing: .02em; } .sephor-support-app .app-quick-action small { font-weight: 400; opacity: .85; font-size: 12px; } .sephor-support-app .app-quick-action.is-blue { background: var(--app-blue); } .sephor-support-app .app-quick-action.is-green { background: var(--app-green); } .sephor-support-app .app-quick-action.is-orange { background: var(--app-orange); } .sephor-support-app .app-quick-action.is-purple { background: var(--app-purple); } .sephor-support-app .app-quick-action.is-red { background: var(--app-red); } /* --- Actividad reciente / listas -------------------------------------- */ .sephor-support-app .app-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .sephor-support-app .app-activity-item { display: flex; gap: 12px; align-items: flex-start; } .sephor-support-app .app-activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-blue); margin-top: 6px; flex: 0 0 auto; } .sephor-support-app .app-activity-link { display: block; color: inherit; border-radius: 6px; margin: -4px -6px; padding: 4px 6px; } .sephor-support-app .app-activity-link:hover { background: var(--app-bg); } .sephor-support-app .app-activity-text { font-size: 13px; line-height: 1.4; } .sephor-support-app .app-activity-text strong { font-weight: 600; } .sephor-support-app .app-activity-meta { color: var(--app-muted); font-size: 12px; } .sephor-support-app .app-empty { color: var(--app-muted); font-size: 14px; padding: 20px 0; text-align: center; } /* --- Tabla de incidencias ------------------------------------------------ */ .sephor-support-app .app-table { width: 100%; border-collapse: collapse; } .sephor-support-app .app-table th, .sephor-support-app .app-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--app-border); font-size: 13px; } .sephor-support-app .app-table thead th { color: var(--app-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .sephor-support-app .app-table tbody tr:last-child td { border-bottom: none; } .sephor-support-app .app-table a.app-row-link { color: var(--app-text); font-weight: 600; text-decoration: none; } .sephor-support-app .app-table a.app-row-link:hover { color: var(--app-blue); } /* --- Filtros --------------------------------------------------------------*/ .sephor-support-app .app-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; } .sephor-support-app .app-field { display: flex; flex-direction: column; gap: 4px; } .sephor-support-app .app-field label { font-size: 12px; font-weight: 600; color: var(--app-muted); } .sephor-support-app .app-field input, .sephor-support-app .app-field select, .sephor-support-app .app-field textarea { padding: 8px 10px; border: 1px solid var(--app-border); border-radius: 8px; font-size: 13px; background: var(--app-surface); color: var(--app-text); font-family: inherit; } .sephor-support-app .app-field textarea { width: 100%; resize: vertical; } /* --- Paginación ------------------------------------------------------------*/ .sephor-support-app .app-pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; } .sephor-support-app .app-page-link { display: inline-block; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--app-border); text-decoration: none; font-size: 13px; } .sephor-support-app .app-page-link.is-current { background: var(--app-blue); border-color: var(--app-blue); color: #fff; } /* --- Badges de estado/facturación (mismo criterio que portal.css) --------*/ .sephor-support-app .ss-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; } .sephor-support-app .ss-badge-status-new { background: #dbeafe; color: #1e3a8a; } .sephor-support-app .ss-badge-status-pending { background: #fef3c7; color: #92400e; } .sephor-support-app .ss-badge-status-in_progress { background: #dcfce7; color: #166534; } .sephor-support-app .ss-badge-status-waiting_client { background: #ede9fe; color: #5b21b6; } .sephor-support-app .ss-badge-status-resolved { background: #ccfbf1; color: #115e59; } .sephor-support-app .ss-badge-status-closed { background: #e5e7eb; color: #374151; } .sephor-support-app .ss-badge-status-cancelled { background: #fee2e2; color: #991b1b; } .sephor-support-app .ss-badge-billing-hours_pack { background: #dcfce7; color: #166534; } .sephor-support-app .ss-badge-comm-sent { background: #dcfce7; color: #166534; } .sephor-support-app .ss-badge-comm-error { background: #fee2e2; color: #991b1b; } .sephor-support-app .ss-badge-priority-low { background: #e5e7eb; color: #374151; } .sephor-support-app .ss-badge-priority-normal { background: #dbeafe; color: #1e3a8a; } .sephor-support-app .ss-badge-priority-high { background: #fef3c7; color: #92400e; } .sephor-support-app .ss-badge-priority-urgent { background: #fee2e2; color: #991b1b; } .sephor-support-app .ss-badge-visibility-client { background: #dbeafe; color: #1e3a8a; } .sephor-support-app .ss-badge-visibility-internal { background: #e5e7eb; color: #374151; } /* --- Gráficos compartidos (donut/barras/línea): mismas clases que Sephor_Support_Admin_Render genera para wp-admin, aspecto propio --- */ .sephor-support-app .ss-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .sephor-support-app .ss-donut-chart { width: 180px; height: 180px; flex: 0 0 auto; } .sephor-support-app .ss-donut-segment { fill: none; } .sephor-support-app .ss-donut-total-value { font-size: 24px; font-weight: 700; fill: var(--app-text); } .sephor-support-app .ss-donut-total-label { font-size: 12px; fill: var(--app-muted); } .sephor-support-app .ss-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .sephor-support-app .ss-donut-legend li { display: flex; align-items: center; gap: 8px; } .sephor-support-app .ss-donut-swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; } .sephor-support-app .ss-donut-legend-value { color: var(--app-muted); margin-left: auto; } .sephor-support-app .ss-stat-bars { display: flex; flex-direction: column; gap: 10px; } .sephor-support-app .ss-stat-bar-row { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 10px; font-size: 12px; } .sephor-support-app .ss-stat-bar-label { color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sephor-support-app .ss-stat-bar-track { background: var(--app-bg); border-radius: 4px; height: 8px; overflow: hidden; } .sephor-support-app .ss-stat-bar-fill { background: var(--app-blue); height: 100%; border-radius: 4px; } .sephor-support-app .ss-stat-bar-value { text-align: right; font-weight: 600; } .sephor-support-app .ss-line-chart-wrap { width: 100%; } .sephor-support-app .ss-line-chart { width: 100%; height: 200px; display: block; overflow: visible; } .sephor-support-app .ss-line-chart-baseline { stroke: var(--app-border); stroke-width: 1; } .sephor-support-app .ss-line-chart-area { fill: rgba(0, 155, 219, .12); stroke: none; } .sephor-support-app .ss-line-chart-line { fill: none; stroke: var(--app-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .sephor-support-app .ss-line-chart-hit { fill: transparent; } .sephor-support-app .ss-line-chart-hit:hover { fill: rgba(0, 155, 219, .25); } .sephor-support-app .ss-line-chart-xlabel, .sephor-support-app .ss-line-chart-ylabel { font-size: 10px; fill: var(--app-muted); } .sephor-support-app .ss-chart-table { margin-top: 10px; font-size: 13px; } .sephor-support-app .ss-chart-table summary { cursor: pointer; color: var(--app-blue); font-weight: 600; } .sephor-support-app .ss-field-note { color: var(--app-muted); font-size: 13px; } /* --- Accesibilidad ----------------------------------------------------- */ .sephor-support-app .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .sephor-support-app a:focus-visible, .sephor-support-app button:focus-visible, .sephor-support-app input:focus-visible, .sephor-support-app select:focus-visible { outline: 2px solid var(--app-blue); outline-offset: 2px; } /* --- Pestañas de la ficha (Fase D; rediseño "a modo de pestañas" a petición de María, 18/08/2026: antes era un enlace subrayado por debajo, ahora un control segmentado con la activa resaltada) ---- */ .sephor-support-app .app-tabs { display: flex; flex-wrap: wrap; gap: 2px; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 10px; padding: 4px; margin-bottom: 18px; width: fit-content; max-width: 100%; } .sephor-support-app .app-tab { padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--app-muted); white-space: nowrap; } .sephor-support-app .app-tab:hover { color: var(--app-text); } .sephor-support-app .app-tab.is-active { color: var(--app-text); background: var(--app-surface); box-shadow: 0 1px 2px rgba(15, 27, 46, .1); } /* --- Iconos de acción (editar/eliminar) en tablas --------------------- !important en varias de estas propiedades: mismo motivo que el subrayado de enlaces (18/08/2026) — el tema activo (Astra) da su propio fondo/color a los