/**
* Portal Challenge HUB — Corporate Mobile-First Styles
* Navy / Gold / Teal brand palette.
*
* @since 2.2.0 Initial mobile-first design
* @since 2.4.0 Challenge HUB rebrand, desktop table, 3-col detail
*/
/* ===========================
RESET & BASE
=========================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
/* ── Redireccionamento para tokens do tema HUB ──────────────────────
O tokens.css do tema é carregado antes deste ficheiro (ver
template-shell.php), portanto as variáveis --ph-* já estão na
cascata e podem ser referenciadas aqui. Mantemos todos os nomes
--portal-* existentes para não tocar nas 1800+ linhas abaixo. */
--portal-bg: var(--ph-paper);
--portal-surface: var(--ph-white);
--portal-text: var(--ph-ink);
--portal-text-secondary: var(--ph-ink-soft);
--portal-border: var(--ph-line);
/* Brand palette → tokens */
--portal-navy: var(--ph-accent-media);
--portal-navy-light: var(--ph-accent-media);
--portal-teal: var(--ph-accent-media);
--portal-teal-hover: var(--ph-ink-soft);
--portal-gold: var(--ph-gold);
--portal-gold-light: var(--ph-paper-warm);
--portal-gold-dark: var(--ph-gold-deep);
/* Functional aliases → tokens */
--portal-primary: var(--ph-ink);
--portal-primary-hover: var(--ph-ink-soft);
--portal-accent: var(--ph-accent-media);
--portal-accent-hover: var(--ph-ink-soft);
--portal-success: var(--ph-accent-lotes);
--portal-error: #A04848;
--portal-error-bg: rgba(168, 72, 72, 0.08);
--portal-warning: var(--ph-accent-challenge);
/* Layout → tokens (mantemos topbar/bottomnav que são alturas, não cores) */
--portal-radius: var(--ph-radius-md);
--portal-radius-sm: var(--ph-radius-sm);
--portal-shadow: var(--ph-shadow-sm);
--portal-shadow-lg: var(--ph-shadow-md);
--portal-topbar-h: 56px;
--portal-bottomnav-h: 64px;
--portal-font: var(--ph-sans);
/* ── Status colors (paleta dessaturada conforme mockup Lote A) ──
Usadas via PHP get_state_color() + overrides CSS abaixo.
Mantemos sincronizadas com class-cha-helpers.php::get_state_color(). */
--status-pending: #C97B3F;
--status-pending-tint: #FAEBD9;
--status-validated: #3F8DAB;
--status-validated-tint: #DEEBF1;
--status-paid: #4A8E5E;
--status-paid-tint: #DDEAE0;
--status-irregularity: #B85555;
--status-irregularity-tint: #F2DDDD;
--status-duplicate: #8A8A8A;
--status-duplicate-tint: #E8E8E8;
/* ── Aliases PT (alinhamento com PORTAL-OVERHAUL-COMPLETO.md §P1) ── */
--status-pendente: var(--status-pending);
--status-pendente-tint: var(--status-pending-tint);
--status-validado: var(--status-validated);
--status-validado-tint: var(--status-validated-tint);
--status-pago: var(--status-paid);
--status-pago-tint: var(--status-paid-tint);
--status-irregular: var(--status-irregularity);
--status-irregular-tint: var(--status-irregularity-tint);
--status-duplicado: var(--status-duplicate);
--status-duplicado-tint: var(--status-duplicate-tint);
/* ── Aviso (cor dedicada, distinta dos estados) — §P1 ── */
--alert: #D4A53A;
--alert-tint: #FAF1D6;
--alert-soft: #E8C56B;
/* ── Arquivar (v2.15.41) — cor própria (= Montras #B23B3B / handoff
#b23b2e). NÃO reutiliza --status-irregularity (significado distinto). ── */
--cha-archive: #b23b2e;
--cha-archive-tint: #f7eae7;
--cha-archive-border: #eccdc8;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body.cha-portal {
font-family: var(--portal-font);
background: var(--portal-bg);
color: var(--portal-text);
line-height: 1.5;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ===========================
SCREENS
=========================== */
.cha-screen {
min-height: 100vh;
min-height: 100dvh;
}
/* ===========================
LOGIN SCREEN
=========================== */
#cha-screen-login {
display: flex;
align-items: center;
justify-content: center;
background: #146a8c;
padding: 24px 20px;
}
.cha-login-wrapper {
width: 100%;
max-width: 400px;
background: var(--portal-surface);
border-radius: 16px;
padding: 36px 28px 32px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cha-login-header {
text-align: center;
margin-bottom: 32px;
}
.cha-login-logo {
width: 200px;
height: auto;
margin-bottom: 8px;
}
/* ===========================
FORMS
=========================== */
.cha-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.cha-form-desc {
font-size: 0.875rem;
color: var(--portal-text-secondary);
line-height: 1.5;
}
.cha-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.cha-form-group label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--portal-text);
}
.cha-form-group input[type="email"],
.cha-form-group input[type="password"],
.cha-form-group input[type="text"] {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--portal-border);
border-radius: var(--portal-radius-sm);
font-family: var(--portal-font);
font-size: 0.9375rem;
color: var(--portal-text);
background: var(--portal-surface);
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.cha-form-group input:focus {
border-color: var(--portal-accent);
box-shadow: 0 0 0 3px rgba(20,106,140,0.15);
}
.cha-form-group input::placeholder {
color: #b0b6c2;
}
/* Password toggle */
.cha-password-wrapper {
position: relative;
}
.cha-password-wrapper input {
padding-right: 44px;
}
.cha-toggle-pw {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--portal-text-secondary);
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.cha-toggle-pw:hover {
color: var(--portal-text);
}
/* Remember checkbox */
.cha-remember {
flex-direction: row !important;
}
.cha-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
color: var(--portal-text-secondary);
cursor: pointer;
}
.cha-checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--portal-navy);
cursor: pointer;
}
/* Form messages */
.cha-form-error {
padding: 10px 14px;
background: var(--portal-error-bg);
color: var(--portal-error);
border-radius: var(--portal-radius-sm);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
}
.cha-form-message {
padding: 10px 14px;
border-radius: var(--portal-radius-sm);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
}
.cha-form-message.success {
background: #ecfdf5;
color: var(--portal-success);
}
.cha-form-message.error {
background: var(--portal-error-bg);
color: var(--portal-error);
}
/* Buttons */
.cha-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border: none;
border-radius: var(--portal-radius-sm);
font-family: var(--portal-font);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
-webkit-appearance: none;
}
.cha-btn:active {
transform: scale(0.98);
}
.cha-btn-primary {
background: var(--portal-navy);
color: #ffffff;
width: 100%;
}
.cha-btn-primary:hover {
background: var(--portal-navy-light);
}
.cha-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Spinner */
.cha-spinner {
animation: cha-spin 0.8s linear infinite;
}
@keyframes cha-spin {
to { transform: rotate(360deg); }
}
/* Links */
.cha-link-forgot {
display: block;
text-align: center;
font-size: 0.8125rem;
color: var(--portal-accent);
text-decoration: none;
margin-top: 4px;
}
.cha-link-forgot:hover {
text-decoration: underline;
}
/* ===========================
AVATAR
=========================== */
.cha-avatar-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--portal-gold);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.cha-avatar-wrap.cha-avatar-lg {
width: 44px;
height: 44px;
font-size: 0.875rem;
}
.cha-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
position: absolute;
inset: 0;
}
.cha-avatar-initials {
line-height: 1;
}
/* ===========================
TOP BAR
=========================== */
.cha-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--portal-topbar-h);
background: var(--portal-navy);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cha-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
max-width: 1400px;
padding: 0 16px;
}
.cha-topbar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.cha-topbar-logo {
height: 24px;
width: auto;
flex-shrink: 0;
}
.cha-topbar-nav {
display: flex;
align-items: center;
gap: 2px;
margin-left: 8px;
}
.cha-topbar-nav-btn {
background: none;
border: none;
color: #ffffff;
font-family: var(--portal-font);
font-size: 0.8125rem;
font-weight: 600;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.cha-topbar-nav-btn:hover {
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.08);
}
.cha-topbar-nav-btn.active {
color: #ffffff;
background: var(--portal-gold);
}
.cha-topbar-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.cha-role-badge {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: 20px;
background: var(--portal-gold);
color: #ffffff;
}
.cha-btn-avatar {
background: none;
border: 2px solid var(--portal-gold);
cursor: pointer;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
flex-shrink: 0;
width: 38px;
height: 38px;
-webkit-tap-highlight-color: transparent;
}
.cha-btn-avatar:hover {
border-color: var(--portal-gold-light);
}
/* ===========================
USER MENU DROPDOWN
=========================== */
.cha-user-menu {
position: fixed;
top: calc(var(--portal-topbar-h) + 4px);
right: 12px;
width: 260px;
background: var(--portal-surface);
border-radius: var(--portal-radius);
box-shadow: var(--portal-shadow-lg);
z-index: 110;
overflow: hidden;
border: 1px solid var(--portal-border);
}
.cha-user-menu-header {
padding: 14px 16px;
}
.cha-menu-avatar-row {
display: flex;
align-items: center;
gap: 12px;
}
.cha-menu-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--portal-text);
display: block;
}
.cha-menu-email {
font-size: 0.75rem;
color: var(--portal-text-secondary);
word-break: break-all;
display: block;
}
.cha-menu-role {
display: inline-block;
margin-top: 4px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 20px;
background: var(--portal-gold);
color: #ffffff;
}
.cha-user-menu hr {
border: none;
border-top: 1px solid var(--portal-border);
margin: 0;
}
.cha-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
background: none;
border: none;
font-family: var(--portal-font);
font-size: 0.8125rem;
font-weight: 500;
color: var(--portal-text);
cursor: pointer;
transition: background 0.15s;
text-align: left;
}
.cha-menu-item:hover {
background: var(--portal-bg);
}
.cha-menu-upload {
cursor: pointer;
}
.cha-menu-logout {
color: var(--portal-error);
}
/* ===========================
MAIN CONTENT
=========================== */
.cha-main {
padding-top: calc(var(--portal-topbar-h) + 16px);
padding-bottom: 24px;
padding-left: 16px;
padding-right: 16px;
min-height: 100vh;
min-height: 100dvh;
max-width: 1400px;
margin: 0 auto;
}
/* ===========================
OVERLAY (menu backdrop)
=========================== */
.cha-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.2);
z-index: 105;
}
/* ===========================
TOOLBAR (search + filters)
=========================== */
.cha-toolbar {
margin-bottom: 16px;
}
.cha-search-bar {
margin-bottom: 10px;
}
.cha-search-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.cha-search-icon {
position: absolute;
left: 12px;
color: var(--portal-text-secondary);
pointer-events: none;
}
.cha-search-input-wrap input {
width: 100%;
padding: 10px 36px 10px 38px;
border: 1.5px solid var(--portal-border);
border-radius: var(--portal-radius);
font-family: var(--portal-font);
font-size: 0.875rem;
background: var(--portal-surface);
color: var(--portal-text);
outline: none;
transition: border-color 0.2s;
}
.cha-search-input-wrap input:focus {
border-color: var(--portal-accent);
}
.cha-search-clear {
position: absolute;
right: 8px;
background: none;
border: none;
color: var(--portal-text-secondary);
cursor: pointer;
padding: 4px;
}
/* Filters row */
.cha-filters-row {
display: flex;
gap: 8px;
/* v2.11.2 — center alignment: as pills, o dropdown de idioma, o
dropdown de tipo e o Exportar CSV têm alturas ligeiramente
diferentes; flex-start fazia o lang filter parecer desalinhado.
center alinha pelo eixo vertical e fica visualmente correcto. */
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.cha-filter-select {
flex-shrink: 0;
padding: 7px 28px 7px 10px;
border: 1.5px solid var(--portal-border);
border-radius: 20px;
font-family: var(--portal-font);
font-size: 0.75rem;
font-weight: 500;
color: var(--portal-text-secondary);
background: var(--portal-surface);
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color 0.2s;
}
.cha-filter-select:focus {
border-color: var(--portal-accent);
}
.cha-filter-select.active {
border-color: var(--portal-accent);
color: var(--portal-accent);
background-color: rgba(20,106,140,0.06);
}
/* Date range filter — desktop only */
.cha-date-range-filter {
display: none;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.cha-filter-date {
padding: 7px 10px;
border: 1.5px solid var(--portal-border);
border-radius: 20px;
font-family: var(--portal-font);
font-size: 0.75rem;
font-weight: 500;
color: var(--portal-text-secondary);
background: var(--portal-surface);
outline: none;
cursor: pointer;
transition: border-color 0.2s;
}
.cha-filter-date:focus {
border-color: var(--portal-accent);
}
.cha-filter-date.active {
border-color: var(--portal-accent);
color: var(--portal-accent);
background-color: rgba(20,106,140,0.06);
}
.cha-date-separator {
font-size: 0.75rem;
color: var(--portal-text-secondary);
}
/* ===========================
STATE FILTER TABS
=========================== */
.cha-state-tabs {
display: flex;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex: 1;
min-width: 0;
}
.cha-state-tabs::-webkit-scrollbar {
display: none;
}
.cha-tab {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px;
border: 1.5px solid var(--portal-border);
border-radius: 20px;
background: var(--portal-surface);
font-family: var(--portal-font);
font-size: 0.75rem;
font-weight: 500;
color: var(--portal-text-secondary);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.cha-tab.active {
background: var(--portal-navy);
border-color: var(--portal-navy);
color: #ffffff;
}
.cha-tab-count {
font-size: 0.6875rem;
font-weight: 600;
opacity: 0.75;
}
/* ═══ v2.15.37 · Filtro de estado multi-selecção ═══════════════════
Desktop: chip activo preenche-se com a COR DO ESTADO (fonte: mapa dos
badges, vars --status-*); vários podem estar activos. O chip "Todas"
(data-state="") mantém o navy do .cha-tab.active base. */
.cha-tab.active[data-state="pending"] { background: var(--status-pending); border-color: var(--status-pending); }
.cha-tab.active[data-state="validated"] { background: var(--status-validated); border-color: var(--status-validated); }
.cha-tab.active[data-state="paid"] { background: var(--status-paid); border-color: var(--status-paid); }
.cha-tab.active[data-state="irregularity"] { background: var(--status-irregularity); border-color: var(--status-irregularity); }
.cha-tab.active[data-state="duplicate"] { background: var(--status-duplicate); border-color: var(--status-duplicate); }
.cha-tab.active[data-state] .cha-tab-count { opacity: 0.9; }
/* Badge de contagem na pill "Estado" (mobile) */
.cha-state-filter-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; margin: 0 2px;
border-radius: 999px;
background: var(--ph-accent-challenge, #B8854A); color: #fff;
font-size: 11px; font-weight: 700; line-height: 1;
}
/* ── Sheet multi-selecção: opção "Todas" (largura total) ── */
.cha-state-sheet-all {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px; border-radius: 16px; min-height: 44px;
border: 1.5px solid var(--portal-border); background: var(--portal-surface);
cursor: pointer; transition: all .15s;
}
.cha-state-all-check {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
border: 2px solid #cdd4d2; background: transparent; color: transparent;
display: inline-flex; align-items: center; justify-content: center;
}
.cha-state-all-text { display: flex; flex-direction: column; }
.cha-state-all-title { font-size: 16px; font-weight: 600; color: var(--portal-text); }
.cha-state-all-sub { font-size: 13px; color: var(--portal-text-secondary); }
.cha-state-sheet-all.is-selected { background: var(--portal-navy); border-color: var(--portal-navy); }
.cha-state-sheet-all.is-selected .cha-state-all-title { color: #fff; }
.cha-state-sheet-all.is-selected .cha-state-all-sub { color: rgba(255,255,255,.7); }
.cha-state-sheet-all.is-selected .cha-state-all-check { background: #fff; border-color: #fff; color: var(--portal-navy); }
/* ── Sheet: label + chips específicos ── */
.cha-state-sheet-hint {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .12em; color: var(--portal-text-secondary); margin: 22px 4px 12px;
}
.cha-state-sheet-chips { display: flex; flex-wrap: wrap; gap: 11px; }
.cha-state-sheet-chip {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 17px; border-radius: 999px; min-height: 44px;
border: 1.5px solid var(--portal-border); background: var(--portal-surface);
font-family: var(--portal-font); font-size: 15px; font-weight: 600;
color: var(--portal-text); cursor: pointer; transition: all .15s;
}
.cha-state-chip-dot { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; }
.cha-state-chip-check { display: none; color: #fff; }
.cha-state-sheet-chip[data-state="pending"] .cha-state-chip-dot { background: var(--status-pending); }
.cha-state-sheet-chip[data-state="validated"] .cha-state-chip-dot { background: var(--status-validated); }
.cha-state-sheet-chip[data-state="paid"] .cha-state-chip-dot { background: var(--status-paid); }
.cha-state-sheet-chip[data-state="irregularity"] .cha-state-chip-dot { background: var(--status-irregularity); }
.cha-state-sheet-chip[data-state="duplicate"] .cha-state-chip-dot { background: var(--status-duplicate); }
/* seleccionado: preenche com a cor do estado, esconde o dot, mostra o ✓ */
.cha-state-sheet-chip.is-selected { color: #fff; }
.cha-state-sheet-chip.is-selected .cha-state-chip-dot { display: none; }
.cha-state-sheet-chip.is-selected .cha-state-chip-check { display: inline-block; }
.cha-state-sheet-chip[data-state="pending"].is-selected { background: var(--status-pending); border-color: var(--status-pending); }
.cha-state-sheet-chip[data-state="validated"].is-selected { background: var(--status-validated); border-color: var(--status-validated); }
.cha-state-sheet-chip[data-state="paid"].is-selected { background: var(--status-paid); border-color: var(--status-paid); }
.cha-state-sheet-chip[data-state="irregularity"].is-selected { background: var(--status-irregularity); border-color: var(--status-irregularity); }
.cha-state-sheet-chip[data-state="duplicate"].is-selected { background: var(--status-duplicate); border-color: var(--status-duplicate); }
/* ===========================
DESKTOP TABLE
=========================== */
.cha-table-wrap {
display: none;
}
.cha-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--portal-surface);
border-radius: var(--portal-radius);
box-shadow: var(--portal-shadow);
overflow: hidden;
}
.cha-table thead th {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--portal-text-secondary);
padding: 12px 14px;
text-align: left;
background: var(--portal-bg);
border-bottom: 1px solid var(--portal-border);
white-space: nowrap;
}
.cha-table tbody tr {
cursor: pointer;
transition: background 0.15s;
}
.cha-table tbody tr:hover {
background: rgba(20,106,140,0.04);
}
.cha-table tbody td {
padding: 12px 14px;
font-size: 0.8125rem;
border-bottom: 1px solid var(--portal-bg);
vertical-align: middle;
}
.cha-table tbody tr:last-child td {
border-bottom: none;
}
.cha-table-pharmacy {
font-weight: 600;
color: var(--portal-text);
}
.cha-table-collaborator {
font-size: 0.6875rem;
color: var(--portal-text-secondary);
margin-top: 1px;
}
.cha-table-type {
font-size: 0.75rem;
color: var(--portal-text-secondary);
}
.cha-table-prize {
font-size: 0.75rem;
}
/* Three-dot action button */
.cha-table-actions {
text-align: center;
width: 40px;
}
.cha-dots-btn {
background: none;
border: none;
color: var(--portal-text-secondary);
cursor: pointer;
padding: 6px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.cha-dots-btn:hover {
background: var(--portal-bg);
color: var(--portal-text);
}
/* Row action dropdown */
.cha-row-menu {
position: absolute;
right: 14px;
background: var(--portal-surface);
border-radius: var(--portal-radius-sm);
box-shadow: var(--portal-shadow-lg);
border: 1px solid var(--portal-border);
z-index: 50;
min-width: 180px;
overflow: hidden;
}
.cha-row-menu-item {
display: block;
width: 100%;
padding: 10px 14px;
border: none;
background: none;
font-family: var(--portal-font);
font-size: 0.8125rem;
color: var(--portal-text);
cursor: pointer;
text-align: left;
transition: background 0.15s;
}
.cha-row-menu-item:hover {
background: var(--portal-bg);
}
/* ===========================
SUBMISSIONS LIST (cards — mobile)
=========================== */
.cha-submissions-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.cha-sub-card {
background: var(--portal-surface);
border-radius: var(--portal-radius);
box-shadow: var(--portal-shadow);
padding: 14px 16px;
cursor: pointer;
transition: box-shadow 0.2s, transform 0.1s;
-webkit-tap-highlight-color: transparent;
}
.cha-sub-card:active {
transform: scale(0.99);
}
.cha-sub-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.cha-state-chip {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.6875rem;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.cha-state-chip-lg {
font-size: 0.75rem;
padding: 4px 14px;
}
.cha-sub-date {
font-size: 0.6875rem;
color: var(--portal-text-secondary);
}
.cha-sub-pharmacy {
font-size: 0.9375rem;
font-weight: 600;
color: var(--portal-text);
margin-bottom: 4px;
}
.cha-sub-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 0.8125rem;
color: var(--portal-text-secondary);
line-height: 1.4;
}
.cha-sub-meta-secondary {
margin-top: 2px;
font-size: 0.75rem;
}
.cha-sub-meta-doc {
margin-top: 4px;
font-size: 0.75rem;
color: var(--portal-success);
font-weight: 500;
}
/* v2.15.28 — Linha 3 do card mobile: chip de marca + prémio (encolhe com
ellipsis) + badge PT (cola à direita), tudo numa só linha sem quebrar.
Sobrepõe o flex-wrap/gap herdados de .cha-sub-meta (mesma especificidade,
ganha por ordem de origem). */
.cha-sub-line3 {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.cha-sub-prize-mob {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cha-sub-line3 .cha-lang-badge {
margin-left: auto;
flex-shrink: 0;
}
.cha-lang-badge {
padding: 1px 6px;
border-radius: 4px;
background: var(--portal-bg);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.04em;
}
/* ===========================
LOADING & EMPTY STATE
=========================== */
.cha-loading {
display: flex;
justify-content: center;
padding: 32px 0;
color: var(--portal-text-secondary);
}
.cha-empty-state {
text-align: center;
padding: 40px 20px;
color: var(--portal-text-secondary);
}
.cha-empty-state svg {
margin-bottom: 12px;
opacity: 0.5;
}
.cha-empty-state p {
font-size: 0.875rem;
}
.cha-error-msg {
text-align: center;
padding: 32px;
color: var(--portal-error);
}
/* ===========================
PAGINATION (v2.15.43)
Rodapé completo desktop + compacto mobile. Mobile-first: a base é o
compacto; @media (min-width:768px) liga o desktop (mesmo padrão do
toggle tabela/cards). Cores/raios/fonte só via tokens --ph-*.
=========================== */
/* Contador de resultados — desktop (acima da tabela, à esquerda).
Escondido no mobile: lá vale o contador dentro do paginador. */
.cha-results-summary {
display: none;
font-family: var(--portal-font);
font-size: 0.875rem; /* ~14px */
font-weight: 500;
color: var(--ph-ink-soft);
padding: 4px 2px 10px;
}
/* PMC (Media Center) reutiliza .cha-pagination + .cha-page-btn/.cha-page-info
no #pmc-pagination — MANTIDOS intactos (fora do âmbito desta tarefa). As
regras novas do paginador de Submissões são scoped a #cha-pagination. */
.cha-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 16px 0;
}
.cha-page-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1.5px solid var(--portal-border);
border-radius: 50%;
background: var(--portal-surface);
color: var(--portal-text);
cursor: pointer;
transition: all 0.2s;
}
.cha-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cha-page-btn:not(:disabled):hover { background: var(--portal-bg); }
.cha-page-info { font-size: 0.75rem; color: var(--portal-text-secondary); }
/* Submissões (v2.15.43) — reshape do contentor, scoped ao id (não toca PMC).
Base (mobile): coluna; mostra o compacto, esconde o completo. */
#cha-pagination {
flex-direction: column;
gap: 10px;
padding: 14px 0 6px;
}
.cha-pag-desktop { display: none; }
.cha-pag-mobile {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.cha-pag-mobile-ctrls {
display: flex;
align-items: center;
gap: 10px;
}
/* Botões — estilos partilhados (só renderizam onde o contentor os mostra). */
.cha-pag-pill,
.cha-pag-sq,
.cha-pag-num,
.cha-pag-round {
font-family: var(--portal-font);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ph-line);
background: var(--ph-white);
color: var(--ph-ink);
cursor: pointer;
transition: background var(--ph-duration) var(--ph-ease),
border-color var(--ph-duration) var(--ph-ease);
}
/* Desktop: pills / quadrados / números — altura 38, raio 10. */
.cha-pag-pill,
.cha-pag-sq,
.cha-pag-num {
height: 38px;
border-radius: var(--ph-radius-md); /* 10px */
}
.cha-pag-sq,
.cha-pag-num { min-width: 38px; }
.cha-pag-pill {
padding: 0 14px;
gap: 6px;
font-size: 0.8125rem;
font-weight: 600;
}
.cha-pag-pill svg { width: 16px; height: 16px; }
.cha-pag-num {
font-size: 0.875rem;
font-weight: 600;
padding: 0 6px;
}
.cha-pag-pill:not(:disabled):hover,
.cha-pag-sq:not(:disabled):hover,
.cha-pag-num:not(.is-active):hover,
.cha-pag-round:not(:disabled):hover {
border-color: var(--ph-line-strong);
background: var(--ph-paper-tint);
}
/* Página activa — mesmo dourado que o portal já usa no activo. */
.cha-pag-num.is-active {
background: var(--ph-accent-challenge);
border-color: var(--ph-accent-challenge);
color: var(--ph-ink);
font-weight: 700;
cursor: default;
}
.cha-pag-pill:disabled,
.cha-pag-sq:disabled,
.cha-pag-round:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cha-pag-nums {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cha-pag-ellipsis {
color: var(--ph-ink-soft);
padding: 0 2px;
user-select: none;
}
.cha-pag-sep {
width: 1px;
height: 26px;
background: var(--ph-line);
margin: 0 4px;
}
.cha-pag-goto {
font-family: var(--portal-font);
font-size: 0.8125rem;
color: var(--ph-ink-soft);
display: inline-flex;
align-items: center;
gap: 8px;
}
.cha-pag-goto-input {
width: 52px;
height: 36px;
text-align: center;
border: 1px solid var(--ph-line);
border-radius: 9px;
background: var(--ph-white);
color: var(--ph-ink);
font-family: var(--portal-font);
font-size: 0.875rem;
font-weight: 600;
-moz-appearance: textfield;
}
.cha-pag-goto-input:focus {
outline: none;
border-color: var(--ph-accent-challenge);
}
.cha-pag-goto-input::-webkit-outer-spin-button,
.cha-pag-goto-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Compacto mobile: botões redondos + pill navy com {page}/{N} + contador. */
.cha-pag-round {
width: 40px;
height: 40px;
border-radius: 50%;
}
.cha-pag-round svg { width: 18px; height: 18px; }
.cha-pag-mobile-info {
min-width: 64px;
height: 40px;
padding: 0 14px;
border-radius: var(--ph-radius-pill);
background: var(--ph-ink);
color: var(--ph-white);
font-family: var(--portal-font);
font-size: 0.875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cha-pag-mobile-summary {
font-family: var(--portal-font);
font-size: 0.78rem; /* ~12.5px */
color: var(--ph-ink-soft);
text-align: center;
}
@media (min-width: 768px) {
.cha-results-summary:not([hidden]) { display: block; }
#cha-pagination { flex-direction: row; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 18px 0 8px; }
.cha-pag-mobile { display: none; }
.cha-pag-desktop {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
}
/* ===========================
DETAIL VIEW
=========================== */
.cha-back-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: none;
font-family: var(--portal-font);
font-size: 0.875rem;
font-weight: 500;
color: var(--portal-accent);
cursor: pointer;
padding: 4px 0;
margin-bottom: 16px;
}
.cha-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
/* Mobile state summary — shown only on mobile below the header chip */
.cha-detail-state-summary {
margin-bottom: 16px;
padding: 10px 14px;
background: var(--portal-surface);
border-radius: var(--portal-radius-sm);
border-left: 4px solid var(--portal-navy);
}
.cha-detail-state-date {
font-size: 0.8125rem;
color: var(--portal-text-secondary);
}
.cha-detail-state-note {
font-size: 0.8125rem;
color: var(--portal-text);
font-style: italic;
margin-top: 4px;
}
.cha-detail-id {
font-size: 0.8125rem;
color: var(--portal-text-secondary);
font-weight: 600;
}
/* Detail grid — stacked on mobile, 3-col on desktop */
.cha-detail-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.cha-detail-section {
background: var(--portal-surface);
border-radius: var(--portal-radius);
box-shadow: var(--portal-shadow);
padding: 16px;
margin-bottom: 20px;
}
.cha-detail-section h3 {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--portal-text-secondary);
margin-bottom: 10px;
}
.cha-detail-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid var(--portal-bg);
font-size: 0.875rem;
}
.cha-detail-row:last-child {
border-bottom: none;
}
.cha-detail-label {
color: var(--portal-text-secondary);
font-size: 0.8125rem;
flex-shrink: 0;
margin-right: 12px;
}
.cha-detail-row span:last-child {
text-align: right;
word-break: break-word;
}
/* Detail — Billing section (Dados para Faturação) */
.cha-billing-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0 4px 0;
font-size: 0.875rem;
color: var(--portal-text);
}
.cha-billing-text {
flex: 1;
word-break: break-word;
line-height: 1.4;
}
.cha-billing-copy {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 4px;
color: var(--portal-accent);
transition: background 0.15s;
}
.cha-billing-copy:hover {
background: var(--portal-bg);
}
/* Alert icon in list views */
.cha-alert-icon {
vertical-align: middle;
margin-left: 6px;
flex-shrink: 0;
}
/* Alert filter button */
.cha-alert-filter-btn {
background: none;
border: 2px solid transparent;
border-radius: var(--portal-radius);
cursor: pointer;
padding: 4px;
line-height: 0;
transition: border-color 0.15s, opacity 0.15s;
opacity: 0.6;
}
.cha-alert-filter-btn:hover { opacity: 1; }
.cha-alert-filter-btn.active {
border-color: #edb264;
opacity: 1;
}
/* Alert section in detail center column */
.cha-alert-section {
border-left: 3px solid #edb264;
}
.cha-alert-body {
display: flex;
align-items: flex-start;
gap: 12px;
}
.cha-alert-text {
flex: 1;
font-size: 0.875rem;
line-height: 1.5;
color: var(--portal-text);
white-space: pre-wrap;
}
.cha-alert-meta {
font-size: 0.75rem;
color: var(--portal-text-secondary);
margin-top: 6px;
}
.cha-alert-response {
font-size: 0.8125rem;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--portal-bg);
color: var(--portal-text);
}
.cha-alert-ack-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
flex-shrink: 0;
opacity: 0.8;
transition: opacity 0.15s, transform 0.15s;
}
.cha-alert-ack-btn:hover {
opacity: 1;
transform: scale(1.1);
}
.cha-alert-ack-done {
flex-shrink: 0;
opacity: 0.7;
}
/* Alert acknowledge modal */
.cha-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.cha-alert-modal-content {
background: var(--portal-surface);
border-radius: 12px;
padding: 28px 24px;
max-width: 420px;
width: 90%;
position: relative;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.cha-alert-modal-icon {
display: block;
margin: 0 auto 12px auto;
}
.cha-alert-modal-content h3 {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--portal-text-secondary);
margin-bottom: 14px;
}
.cha-alert-modal-content textarea {
width: 100%;
border: 2px solid #edb264;
border-radius: 8px;
padding: 12px;
font-size: 0.875rem;
font-family: inherit;
resize: vertical;
background: var(--portal-navy);
color: #ffffff;
}
.cha-alert-modal-content textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.cha-alert-modal-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.cha-alert-modal-btn-confirm {
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.15s;
}
.cha-alert-modal-btn-confirm:hover {
transform: scale(1.1);
}
.cha-alert-modal-close {
position: absolute;
top: 8px;
right: 12px;
background: none;
border: none;
font-size: 1.5rem;
color: var(--portal-text-secondary);
cursor: pointer;
line-height: 1;
}
/* Detail — Action Panel (dark navy + gold accent) */
.cha-detail-actions-panel {
background: var(--portal-navy);
border-radius: var(--portal-radius);
box-shadow: var(--portal-shadow);
padding: 20px 16px;
color: #ffffff;
margin-bottom: 10px;
}
.cha-detail-actions-panel h3 {
color: var(--portal-gold);
margin-bottom: 12px;
}
.cha-detail-actions-panel .cha-select {
background: var(--portal-navy-light);
border-color: rgba(212,192,164,0.3);
color: #ffffff;
}
.cha-detail-actions-panel .cha-select:focus {
border-color: var(--portal-gold);
}
.cha-detail-actions-panel .cha-select option {
background: var(--portal-navy);
color: #ffffff;
}
.cha-detail-actions-panel .cha-conditional-field label {
color: var(--portal-gold-light);
}
.cha-detail-actions-panel .cha-conditional-field input,
.cha-detail-actions-panel .cha-conditional-field textarea {
background: var(--portal-navy-light);
border-color: rgba(212,192,164,0.3);
color: #ffffff;
}
.cha-detail-actions-panel .cha-conditional-field input:focus,
.cha-detail-actions-panel .cha-conditional-field textarea:focus {
border-color: var(--portal-gold);
}
.cha-detail-actions-panel .cha-conditional-field input::placeholder,
.cha-detail-actions-panel .cha-conditional-field textarea::placeholder {
color: rgba(255,255,255,0.4);
}
.cha-btn-gold {
background: var(--portal-gold);
color: var(--portal-navy);
font-weight: 700;
width: 100%;
}
.cha-btn-gold:hover {
background: var(--portal-gold-light);
}
.cha-btn-dark-outline {
background: transparent;
color: var(--portal-gold-light);
border: 1.5px solid rgba(212,192,164,0.4);
width: 100%;
}
.cha-btn-dark-outline:hover {
background: rgba(212,192,164,0.1);
border-color: var(--portal-gold);
}
.cha-detail-actions-panel .cha-form-message.success {
background: var(--ph-tint-lotes);
color: var(--ph-accent-lotes);
}
.cha-detail-actions-panel .cha-form-message.error {
background: rgba(239,68,68,0.15);
color: #fca5a5;
}
.cha-detail-actions-panel .cha-detail-note {
color: var(--portal-gold-dark);
}
/* Detail — Files */
.cha-detail-files {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px;
}
.cha-file-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
color: var(--portal-text);
padding: 6px;
border-radius: var(--portal-radius-sm);
transition: background 0.15s;
}
.cha-file-item:hover {
background: var(--portal-bg);
}
.cha-file-thumb {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--portal-radius-sm);
}
.cha-file-ext {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
background: var(--portal-bg);
border-radius: var(--portal-radius-sm);
font-size: 0.6875rem;
font-weight: 700;
color: var(--portal-text-secondary);
}
.cha-file-name {
font-size: 0.625rem;
color: var(--portal-text-secondary);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Detail — State actions (light variant for non-panel) */
.cha-detail-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.cha-select {
width: 100%;
padding: 10px 12px;
border: 1.5px solid var(--portal-border);
border-radius: var(--portal-radius-sm);
font-family: var(--portal-font);
font-size: 0.875rem;
color: var(--portal-text);
background: var(--portal-surface);
outline: none;
}
.cha-select:focus {
border-color: var(--portal-accent);
}
.cha-conditional-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cha-conditional-field label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--portal-text-secondary);
}
.cha-conditional-field input,
.cha-conditional-field textarea {
width: 100%;
padding: 10px 12px;
border: 1.5px solid var(--portal-border);
border-radius: var(--portal-radius-sm);
font-family: var(--portal-font);
font-size: 0.875rem;
color: var(--portal-text);
background: var(--portal-surface);
outline: none;
resize: vertical;
}
.cha-conditional-field input:focus,
.cha-conditional-field textarea:focus {
border-color: var(--portal-accent);
}
.cha-btn-sm {
padding: 10px 16px;
font-size: 0.8125rem;
}
.cha-btn-outline {
background: var(--portal-surface);
color: var(--portal-text);
border: 1.5px solid var(--portal-border);
}
.cha-btn-outline:hover {
background: var(--portal-bg);
}
.cha-detail-note {
font-size: 0.75rem;
color: var(--portal-text-secondary);
font-style: italic;
}
/* Detail — History */
.cha-history-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.cha-history-item {
padding: 8px 0;
border-bottom: 1px solid var(--portal-bg);
}
.cha-history-item:last-child {
border-bottom: none;
}
.cha-history-states {
font-size: 0.8125rem;
font-weight: 600;
color: var(--portal-text);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.cha-history-state-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 10px;
font-size: 0.6875rem;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.cha-history-meta {
font-size: 0.6875rem;
color: var(--portal-text-secondary);
margin-top: 2px;
}
.cha-history-note {
font-size: 0.75rem;
color: var(--portal-text-secondary);
font-style: italic;
margin-top: 2px;
}
/* ===========================
ANIMATIONS
=========================== */
.cha-fade-in {
animation: cha-fade-in 0.25s ease-out;
}
@keyframes cha-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===========================
PRODUCTS VIEW (v2.5.0)
=========================== */
.cha-products-header {
margin-bottom: 16px;
}
.cha-products-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--portal-text);
}
/* Mobile product cards */
.cha-products-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.cha-product-card {
background: var(--portal-surface);
border-radius: var(--portal-radius);
padding: 14px;
box-shadow: var(--portal-shadow);
display: flex;
align-items: center;
gap: 12px;
}
.cha-product-card-thumb {
width: 48px;
height: 48px;
border-radius: var(--portal-radius-sm);
object-fit: cover;
background: var(--portal-bg);
flex-shrink: 0;
}
.cha-product-card-noimg {
width: 48px;
height: 48px;
border-radius: var(--portal-radius-sm);
background: var(--portal-bg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--portal-text-secondary);
font-size: 0.625rem;
}
.cha-product-card-info {
flex: 1;
min-width: 0;
}
.cha-product-card-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--portal-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.cha-product-card-meta {
font-size: 0.75rem;
color: var(--portal-text-secondary);
margin-top: 2px;
}
.cha-product-toggle {
flex-shrink: 0;
}
/* Product toggle switch */
.cha-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.cha-switch input {
opacity: 0;
width: 0;
height: 0;
}
.cha-switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #ccc;
border-radius: 24px;
transition: 0.3s;
}
.cha-switch-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: 0.3s;
}
.cha-switch input:checked + .cha-switch-slider {
background: var(--portal-success);
}
.cha-switch input:checked + .cha-switch-slider:before {
transform: translateX(20px);
}
/* ===========================
MOBILE-FIRST DEFAULTS (v2.5.1)
=========================== */
/* Mobile: state tabs hidden, dropdown shown */
.cha-state-tabs {
display: none;
}
.cha-state-dropdown-mobile {
display: inline-block;
}
/* Mobile: hide role badge in topbar */
.cha-role-badge {
display: none;
}
/* Products toolbar */
.cha-products-toolbar {
margin-bottom: 16px;
}
/* ===========================
RESPONSIVE — TABLET (768px+)
=========================== */
@media (min-width: 768px) {
.cha-login-wrapper {
padding: 44px 40px 38px;
}
/* Show table, hide cards on tablet+ */
.cha-table-wrap {
display: block;
}
.cha-submissions-list,
.cha-products-list {
display: none !important;
}
/* Desktop: show state tabs, hide mobile dropdown */
.cha-state-tabs {
display: flex;
}
.cha-state-dropdown-mobile {
display: none !important;
}
/* Desktop: show role badge */
.cha-role-badge {
display: inline-block;
}
/* Desktop: show date range filter */
.cha-date-range-filter {
display: flex;
}
/* Desktop: hide mobile state summary */
.cha-detail-state-summary {
display: none;
}
}
/* ===========================
RESPONSIVE — DESKTOP (1024px+)
=========================== */
@media (min-width: 1024px) {
/* 3-column detail layout */
.cha-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr 320px;
grid-template-rows: auto;
gap: 16px;
align-items: start;
}
.cha-detail-col-left {
display: flex;
flex-direction: column;
gap: 12px;
}
.cha-detail-col-center {
display: flex;
flex-direction: column;
gap: 12px;
}
.cha-detail-col-right {
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: calc(var(--portal-topbar-h) + 16px);
}
.cha-topbar-logo {
height: 30px;
}
.cha-topbar-nav {
margin-left: 16px;
gap: 4px;
}
.cha-topbar-nav-btn {
font-size: 0.875rem;
padding: 7px 18px;
}
}
/* ============================================================
MOCKUP COMPLIANCE OVERRIDES (cha-v2.7.6 — Release 1)
───────────────────────────────────────────────────────────
Alinha o portal com o design definido no
mockup Lote A (docs/mockups-referencia/papillon-portal-loteA-v1.html). Aplicado no fim do ficheiro
para vencer por especificidade/cascata sem tocar nas regras
originais (rollback mais simples se necessário).
============================================================ */
/* ─── Topbar ─── */
.cha-topbar {
background: var(--ph-ink);
color: var(--ph-paper);
}
/* Tabs no topbar como pills outlined gold (mockup §portal-header) */
.cha-topbar-nav-btn {
padding: 8px 18px;
border-radius: 100px;
border: 1px solid transparent;
background: transparent;
color: var(--ph-paper);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: all 0.18s ease;
cursor: pointer;
}
.cha-topbar-nav-btn:hover {
background: rgba(212, 192, 164, 0.10);
color: var(--ph-gold);
}
.cha-topbar-nav-btn.active {
background: var(--ph-gold);
color: var(--ph-ink);
border-color: var(--ph-gold);
}
/* ─── Login ─── */
#cha-screen-login {
background: var(--ph-ink);
}
/* O base.css do tema força `img { display: block }`. Isso faz com que
o `text-align: center` no .cha-login-header deixe de centrar o logo.
Margin auto resolve o problema mantendo o block display. */
.cha-login-logo {
display: block;
margin: 0 auto 8px;
}
/* ─── Botões primários (.cha-btn-primary) ─── */
.cha-btn-primary {
background: var(--ph-ink);
color: var(--ph-paper);
}
.cha-btn-primary:hover {
background: var(--ph-ink-soft);
}
.cha-btn-primary:disabled {
background: var(--ph-paper-warm);
color: var(--ph-ink-muted);
}
/* ─── Botões "Guardar" (anteriormente gold) → ink uppercase ─── */
.cha-btn-gold {
background: var(--ph-ink);
color: var(--ph-paper);
border: none;
font-family: var(--ph-sans);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: var(--ph-radius-sm);
padding: 12px 16px;
}
.cha-btn-gold:hover {
background: var(--ph-ink-soft);
}
/* ─── Botões secundários (.cha-btn-dark-outline) → outlined navy ─── */
.cha-btn-dark-outline {
background: var(--ph-paper);
color: var(--ph-ink);
border: 1px solid var(--ph-line-strong);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: var(--ph-radius-sm);
padding: 11px 16px;
}
.cha-btn-dark-outline:hover {
background: var(--ph-paper-tint);
border-color: var(--ph-ink);
color: var(--ph-ink);
}
/* ─── Cards do detalhe (.cha-detail-actions-panel) ───
Antes: fundo navy sólido com texto branco/gold.
Agora: branco com border-left colorido conforme mockup. */
.cha-detail-actions-panel {
background: var(--ph-white);
color: var(--ph-ink);
border: 1px solid var(--ph-line);
border-left: 3px solid var(--ph-accent-media);
box-shadow: var(--ph-shadow-sm);
padding: 18px 18px 20px;
margin-bottom: 12px;
}
/* H3 dentro dos cards = eyebrow gold-deep uppercase */
.cha-detail-actions-panel h3 {
color: var(--ph-gold-deep);
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.30em;
text-transform: uppercase;
margin-bottom: 14px;
line-height: 1.4;
}
/* Select dentro dos cards (escolha de estado).
v2.11.2 — appearance:none + chevron SVG inline para esconder o
styling nativo do browser (caixa cinzenta no Chrome, wheel no iOS).
border-radius md + padding consistente com os outros campos do
portal (drawer inputs, etc.). */
.cha-detail-actions-panel .cha-select {
background: var(--ph-white);
border: 1px solid var(--ph-line-strong);
color: var(--ph-ink);
border-radius: var(--ph-radius-md, 10px);
padding: 11px 36px 11px 14px;
font-family: var(--ph-sans);
font-size: 14px;
line-height: 1.3;
width: 100%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
cursor: pointer;
transition: border-color 0.15s ease;
}
.cha-detail-actions-panel .cha-select:focus {
border-color: var(--ph-accent-challenge, #B8854A);
outline: none;
}
.cha-detail-actions-panel .cha-select option {
background: var(--ph-white);
color: var(--ph-ink);
}
/* Labels e inputs condicionais (Documento de pagamento, Motivo) */
.cha-detail-actions-panel .cha-conditional-field label {
color: var(--ph-gold-deep);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.cha-detail-actions-panel .cha-conditional-field input,
.cha-detail-actions-panel .cha-conditional-field textarea {
background: var(--ph-white);
border: 1px solid var(--ph-line-strong);
color: var(--ph-ink);
border-radius: var(--ph-radius-sm);
}
.cha-detail-actions-panel .cha-conditional-field input:focus,
.cha-detail-actions-panel .cha-conditional-field textarea:focus {
border-color: var(--ph-accent-media);
outline: none;
}
.cha-detail-actions-panel .cha-conditional-field input::placeholder,
.cha-detail-actions-panel .cha-conditional-field textarea::placeholder {
color: var(--ph-ink-muted);
}
/* "Alterar estado" — stripe lateral SEGUE o estado actual da submissão.
data-state-context é populado pelo JS (initial + on select change). */
.cha-detail-actions-panel[data-state-context="pending"] { border-left-color: var(--status-pending); }
.cha-detail-actions-panel[data-state-context="validated"] { border-left-color: var(--status-validated); }
.cha-detail-actions-panel[data-state-context="paid"] { border-left-color: var(--status-paid); }
.cha-detail-actions-panel[data-state-context="irregularity"] { border-left-color: var(--status-irregularity); }
.cha-detail-actions-panel[data-state-context="duplicate"] { border-left-color: var(--status-duplicate); }
/* "Aviso ao administrador" — stripe lateral amber (challenge gold) */
.cha-detail-actions-panel:has(#cha-input-alert) {
border-left-color: var(--ph-accent-challenge);
}
/* "Ações" panel (Reenviar...) — stripe lateral ink */
.cha-detail-actions-panel:has(.cha-action-btn) {
border-left-color: var(--ph-ink);
}
/* ─── Botão "Voltar" no detalhe ─── */
.cha-back-btn {
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.cha-back-btn:hover {
color: var(--ph-ink);
}
/* ─── Eyebrows / detail row labels ─── */
.cha-detail-section h3 {
color: var(--ph-gold-deep);
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.30em;
text-transform: uppercase;
line-height: 1.4;
}
.cha-detail-label {
color: var(--ph-ink-muted);
font-weight: 500;
}
/* ─── State pills (.cha-state-chip / .cha-history-state-badge) ───
Reescrita completa com pill shape + dot circular + tint background.
Aplicado via [data-state] (JS populates data attr, não inline style).
─── */
.cha-state-chip,
.cha-history-state-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 9px;
border-radius: 100px;
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
border: none;
color: inherit;
}
.cha-state-chip::before,
.cha-history-state-badge::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.cha-state-chip-lg {
font-size: 11px;
padding: 6px 14px 6px 12px;
}
.cha-state-chip-lg::before {
width: 8px;
height: 8px;
}
/* Cada estado: tint background + cor dessaturada */
.cha-state-chip[data-state="pending"],
.cha-history-state-badge[data-state="pending"] {
background: var(--status-pending-tint);
color: var(--status-pending);
}
.cha-state-chip[data-state="validated"],
.cha-history-state-badge[data-state="validated"] {
background: var(--status-validated-tint);
color: var(--status-validated);
}
.cha-state-chip[data-state="paid"],
.cha-history-state-badge[data-state="paid"] {
background: var(--status-paid-tint);
color: var(--status-paid);
}
.cha-state-chip[data-state="irregularity"],
.cha-history-state-badge[data-state="irregularity"] {
background: var(--status-irregularity-tint);
color: var(--status-irregularity);
}
.cha-state-chip[data-state="duplicate"],
.cha-history-state-badge[data-state="duplicate"] {
background: var(--status-duplicate-tint);
color: var(--status-duplicate);
}
/* Fallback (sem data-state ou estado desconhecido) */
.cha-state-chip:not([data-state]),
.cha-state-chip[data-state=""],
.cha-history-state-badge:not([data-state]),
.cha-history-state-badge[data-state=""] {
background: var(--ph-paper-tint);
color: var(--ph-ink-muted);
}
/* ─── Filter tabs no topo da listagem: adicionar dot por data-state ───
Selectors cobrem .cha-state-chip dentro de .cha-state-tabs caso existam. */
.cha-state-tabs .cha-state-tab {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ============================================================
RELEASE 2 (cha-v2.7.8) — Componentes estruturais
============================================================ */
/* ─── Topbar right: role badge + admin link + avatar como pills ─── */
.cha-role-badge,
.cha-admin-link {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border: 1px solid rgba(212, 192, 164, 0.45);
border-radius: 100px;
background: transparent;
color: var(--ph-gold);
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
transition: all 0.18s ease;
}
.cha-admin-link:hover {
background: rgba(212, 192, 164, 0.12);
border-color: var(--ph-gold);
color: var(--ph-gold);
text-decoration: none;
}
/* ─── Linhas com aviso: faixa lateral via pseudo-elemento (v2.15.7) ───
A faixa é um ::before absoluto na 1ª célula — NÃO um background no .
Motivo: background-no-
+ border-collapse:separate fazia o Safari/
WebKit pintar o gradiente célula-a-célula (faixa fragmentada por coluna,
~7 cópias). Uma faixa absoluta de 110px na td:first-child é pintada como
UMA peça contínua nos dois motores (provado ao vivo Chromium + WebKit).
Stops convertidos dos 0/3/8% da row antiga (~1305px) para a escala dos
110px da faixa: sólido→35%, fade→transparente a 95%. */
.cha-table tr[data-has-alert="1"] > td:first-child,
.cha-table tr.has-alert > td:first-child {
position: relative;
}
.cha-table tr[data-has-alert="1"] > td:first-child::before,
.cha-table tr.has-alert > td:first-child::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 110px;
pointer-events: none;
z-index: 0;
background: linear-gradient(90deg, var(--alert-tint) 0%, var(--alert-tint) 35%, transparent 95%);
}
/* dot da coluna de aviso sempre por cima da faixa */
.cha-table tr[data-has-alert="1"] .cha-alert-dot,
.cha-table tr.has-alert .cha-alert-dot {
position: relative;
z-index: 1;
}
/* ─── Filtro "Com avisos" como pill outlined amber ─── */
/* P1 (afinações finais): pill "Com avisos" agora usa as vars --alert*
dedicadas (amarelo warning, distintas do challenge gold brand). */
.cha-alert-filter-btn {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 11px;
border: 1px solid var(--alert-soft);
border-radius: 100px;
background: var(--alert-tint);
color: var(--ph-gold-deep);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: all 0.18s ease;
}
.cha-alert-filter-btn[style*="display:none"],
.cha-alert-filter-btn[style*="display: none"] {
display: none !important;
}
.cha-alert-filter-btn:hover {
background: var(--alert-soft);
border-color: var(--alert);
}
.cha-alert-filter-btn.active {
background: var(--alert);
border-color: var(--alert);
color: var(--ph-paper);
}
.cha-alert-filter-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--alert);
flex-shrink: 0;
}
.cha-alert-filter-btn.active .cha-alert-filter-dot {
background: var(--ph-paper);
}
.cha-alert-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 100px;
background: rgba(212, 165, 58, 0.18); /* var(--alert) a 18% */
color: var(--ph-gold-deep);
font-family: var(--ph-mono);
font-size: 10px;
font-weight: 600;
line-height: 1;
}
.cha-alert-filter-btn.active .cha-alert-filter-count {
background: rgba(255, 255, 255, 0.22);
color: var(--ph-paper);
}
/* ─── Date presets (pill group) ─── */
.cha-date-presets {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 100px;
border: 1px solid var(--ph-line-strong);
background: var(--ph-white);
}
.cha-date-preset {
padding: 5px 12px;
border: none;
background: transparent;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 100px;
cursor: pointer;
transition: all 0.18s ease;
line-height: 1.4;
white-space: nowrap;
}
.cha-date-preset:hover {
color: var(--ph-ink);
}
.cha-date-preset.is-active {
background: var(--ph-ink);
color: var(--ph-paper);
}
/* ============================================================
FIXES (cha-v2.7.9) — pós-feedback Release 2
============================================================ */
/* Empty state ('Nenhuma submissão encontrada'): o base.css do tema
força svg { display: block }, o que anula o text-align:center do
parent. Centramos com margin auto. */
.cha-empty-state svg {
display: block;
margin: 0 auto 12px;
}
/* Custom dropdown idioma (Release 3): pill outlined com bandeira emoji + chevron */
.cha-lang-filter {
position: relative;
display: inline-block;
}
.cha-lang-filter-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
/* v2.11.2 — Aproximar do padding das .cha-tab (7px + border 1.5px)
para que o trigger fique à mesma altura. Antes a soma dava ~31px
vs pills ~33px e ficava ligeiramente desalinhado mesmo com
align-items:center. */
padding: 6px 12px;
border-radius: 100px;
border: 1px solid var(--ph-line-strong);
background: var(--ph-white);
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.4;
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
}
.cha-lang-filter-trigger:hover {
border-color: var(--ph-ink);
color: var(--ph-ink);
}
.cha-lang-filter.is-active .cha-lang-filter-trigger {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
}
.cha-lang-filter.is-open .cha-lang-filter-trigger {
border-color: var(--ph-ink);
color: var(--ph-ink);
}
.cha-lang-filter.is-active.is-open .cha-lang-filter-trigger {
color: var(--ph-paper);
}
.cha-lang-filter-flag {
font-size: 14px;
line-height: 1;
}
.cha-lang-filter-chevron {
transition: transform 0.18s ease;
}
.cha-lang-filter.is-open .cha-lang-filter-chevron {
transform: rotate(180deg);
}
.cha-lang-filter-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 200px;
max-height: 320px;
overflow-y: auto;
margin: 0;
padding: 6px;
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-md);
box-shadow: var(--ph-shadow-md);
z-index: 100;
list-style: none;
}
.cha-lang-filter-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--ph-radius-sm);
cursor: pointer;
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
transition: background 0.12s ease;
}
.cha-lang-filter-option:hover {
background: var(--ph-paper-tint);
}
.cha-lang-filter-option-flag {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
/* ─── Mobile fixes (< 768px) ─── */
@media (max-width: 767px) {
/* Topbar: logo mais pequeno + nav de tabs com scroll horizontal
(antes estava display:none, o que escondia Produtos/Media Center
completamente em mobile — sem alternative nav, ficava intocável). */
.cha-topbar-logo {
height: 22px;
}
.cha-topbar-nav {
display: flex;
gap: 4px;
flex: 1;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.cha-topbar-nav::-webkit-scrollbar { display: none; } /* WebKit */
.cha-topbar-nav-btn {
flex-shrink: 0;
padding: 4px 10px;
font-size: 10px;
letter-spacing: 0.10em;
}
.cha-topbar-inner {
gap: 8px;
padding: 0 12px;
}
/* Toolbar: filtros em wrap (não overflow) */
.cha-filters-row {
flex-wrap: wrap;
gap: 6px;
row-gap: 8px;
}
/* Date presets em mobile: scroll horizontal em vez de wrap (cabem
melhor numa linha) */
.cha-date-presets {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
padding: 3px;
}
.cha-date-preset {
padding: 4px 10px;
font-size: 10px;
}
/* Date range custom inputs também em scroll suave */
.cha-date-range-filter {
flex-wrap: wrap;
}
/* Filter alert: um pouco mais compacto */
.cha-alert-filter-btn {
font-size: 10px;
padding: 5px 10px;
}
/* User menu mobile: ocupar quase toda a largura, abaixo do topbar */
.cha-user-menu {
right: 8px !important;
left: 8px;
width: auto;
max-width: 320px;
margin-left: auto;
}
}
/* ============================================================
PORTAL OVERHAUL — Sessão 1 · Prioridades 2-5
(cha-v2.7.11) — alinha com PORTAL-OVERHAUL-COMPLETO.md
============================================================ */
/* ─── P2: .cha-state-badge como alias de .cha-state-chip ───
O JS gera .cha-state-chip; o doc usa .cha-state-badge.
Esta regra herda todos os estilos (pill + dot via ::before +
tint por data-state) que já estão definidos para .cha-state-chip.
Vencemos a ordem dos seletores duplicando-os abaixo. */
.cha-state-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 9px;
border-radius: 100px;
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
border: none;
}
.cha-state-badge::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Por data-state (inglês — usado pelo JS) */
.cha-state-badge[data-state="pending"] { background: var(--status-pending-tint); color: var(--status-pending); }
.cha-state-badge[data-state="validated"] { background: var(--status-validated-tint); color: var(--status-validated); }
.cha-state-badge[data-state="paid"] { background: var(--status-paid-tint); color: var(--status-paid); }
.cha-state-badge[data-state="irregularity"] { background: var(--status-irregularity-tint); color: var(--status-irregularity); }
.cha-state-badge[data-state="duplicate"] { background: var(--status-duplicate-tint); color: var(--status-duplicate); }
/* Por modifier classes (PT — alinha com doc) */
.cha-state-badge.pendente { background: var(--status-pendente-tint); color: var(--status-pendente); }
.cha-state-badge.validado { background: var(--status-validado-tint); color: var(--status-validado); }
.cha-state-badge.pago { background: var(--status-pago-tint); color: var(--status-pago); }
.cha-state-badge.irregular { background: var(--status-irregular-tint); color: var(--status-irregular); }
.cha-state-badge.duplicado { background: var(--status-duplicado-tint); color: var(--status-duplicado); }
/* ─── P3: Filter pills (.cha-tab) — active com cor de estado ───
O .cha-tab.active genérico estava navy ink. Quando há data-state
na pill, o active passa a usar a cor do estado correspondente,
conforme mockup. */
.cha-tab.active[data-state="pending"] {
background: var(--status-pending);
border-color: var(--status-pending);
color: var(--ph-paper);
}
.cha-tab.active[data-state="validated"] {
background: var(--status-validated);
border-color: var(--status-validated);
color: var(--ph-paper);
}
.cha-tab.active[data-state="paid"] {
background: var(--status-paid);
border-color: var(--status-paid);
color: var(--ph-paper);
}
.cha-tab.active[data-state="irregularity"] {
background: var(--status-irregularity);
border-color: var(--status-irregularity);
color: var(--ph-paper);
}
.cha-tab.active[data-state="duplicate"] {
background: var(--status-duplicate);
border-color: var(--status-duplicate);
color: var(--ph-paper);
}
/* P3: Animação pulse no dot do filtro "Com avisos" */
.cha-alert-filter-btn .cha-alert-filter-dot {
animation: alertPulse 2s ease-in-out infinite;
}
.cha-alert-filter-btn.active .cha-alert-filter-dot {
animation: none; /* pausa quando o filtro está activo (já estás no estado) */
}
@keyframes alertPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.6; }
}
/* ─── P4: Table header — gold-deep, 9px, tracking 0.22em ───
Override da regra base .cha-table thead th. */
.cha-table thead th {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line-strong);
padding: 14px 18px;
white-space: nowrap;
}
/* ─── P5: Rows com aviso — gradient horizontal lateral ───
Substitui a stripe 3px hard pelo wash de cor amber-tint que o
mockup mostra (linear-gradient da edge esquerda fading para
transparent ao longo dos primeiros 8%).
Aceitamos AMBOS data-has-alert="1" (JS actual) e .has-alert
(classe esperada pelo doc) para retrocompatibilidade. */
/* v2.15.7: gradiente-no-
removido (era a causa da fragmentação no
Safari). A faixa vive agora no ::before da 1ª célula (ver acima). */
/* v2.15.7: a faixa de aviso passou a SER este ::before (110px · acima).
O antigo display:none que escondia a stripe foi removido. */
/* P5: .cha-alert-dot na coluna dedicada à esquerda (alinha com
mockup §.cell-alert + .alert-dot-cell). Ring animado opcional. */
.cha-alert-dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--alert);
border-radius: 50%;
position: relative;
vertical-align: middle;
}
.cha-alert-dot::after {
content: '';
position: absolute;
inset: -3px;
border: 1.5px solid var(--alert-soft);
border-radius: 50%;
opacity: 0.5;
}
/* Coluna dedicada do alert dot (sempre presente para manter
alinhamento; só renderiza o dot quando has_alert é true) */
.cha-table .cha-alert-cell {
width: 26px;
min-width: 26px;
text-align: center;
padding-left: 8px;
padding-right: 0;
}
/* ============================================================
FIXES pós-feedback (cha-v2.7.12)
============================================================ */
/* Fix A: .cha-tab.active default deve ser INK (navy escuro #112833),
não teal media. A regra base usa --portal-navy que aponta para
--ph-accent-media (teal #166A8E). Override forte aqui. */
.cha-tab.active:not([data-state]),
.cha-tab.active[data-state=""] {
background: var(--ph-ink);
border-color: var(--ph-ink);
color: var(--ph-paper);
}
/* Fix A: Reasserir regras de cor por estado com !important defensive
contra a regra base .cha-tab.active de specificity igual */
.cha-tab.active[data-state="pending"] {
background: var(--status-pending) !important;
border-color: var(--status-pending) !important;
color: var(--ph-paper) !important;
}
.cha-tab.active[data-state="validated"] {
background: var(--status-validated) !important;
border-color: var(--status-validated) !important;
color: var(--ph-paper) !important;
}
.cha-tab.active[data-state="paid"] {
background: var(--status-paid) !important;
border-color: var(--status-paid) !important;
color: var(--ph-paper) !important;
}
.cha-tab.active[data-state="irregularity"] {
background: var(--status-irregularity) !important;
border-color: var(--status-irregularity) !important;
color: var(--ph-paper) !important;
}
.cha-tab.active[data-state="duplicate"] {
background: var(--status-duplicate) !important;
border-color: var(--status-duplicate) !important;
color: var(--ph-paper) !important;
}
/* v2.15.7 — O gradiente das rows de aviso (antes aqui, no
, com
!important) foi movido para o ::before da 1ª célula (ver bloco
"Linhas com aviso: faixa lateral via pseudo-elemento" acima). O
já não tem background: o hover/selected da linha (tr:hover, .is-selected)
pintam por baixo da faixa sem a alterar — faixa constante no hover. */
/* Fix D: Kebab — mais visível e estilizado conforme mockup
- Aumentar área clicável
- Hover com background paper-tint
- Tamanho do ícone interno */
.cha-dots-btn {
width: 32px;
height: 32px;
padding: 0;
border: none;
background: transparent;
border-radius: 8px;
display: inline-grid;
place-items: center;
cursor: pointer;
color: var(--ph-ink-muted);
transition: all 0.15s;
}
.cha-dots-btn:hover {
background: var(--ph-paper-tint);
color: var(--ph-ink);
}
.cha-dots-btn svg {
width: 4px;
height: 18px;
display: block;
}
/* O SVG actual tem fill="#727272" hardcoded; sobrescrevemos com currentColor via rect */
/* v2.15.27 — só os 3 pontos do KEBAB levam fill (o SVG do kebab tem
fill="#727272" hardcoded → forçamos currentColor). O botão de cópia
partilha .cha-dots-btn só pela cor, mas o seu ícone é em contorno
(fill="none"); excluí-lo daqui evita encher o quadrado de cinzento. */
.cha-dots-btn:not(.cha-copy-btn) svg rect {
fill: currentColor !important;
}
/* Garantir que a coluna .cha-table-actions é compacta e alinhada à direita */
.cha-table-actions {
width: 80px; /* v2.15.24 — acomoda o botão de cópia + kebab */
text-align: right;
padding-right: 12px;
white-space: nowrap;
}
/* Botão directo "Copiar dados de faturação" (v2.15.24) — partilha a cor de
.cha-dots-btn (currentColor); só acrescenta a margem face ao kebab. */
.cha-copy-btn {
margin-right: 2px;
}
/* v2.15.26 — alinhamento vertical dos dois botões da célula de acções. Eram
`vertical-align: baseline` e, como os SVGs têm alturas diferentes (16 vs 18),
ficavam ~1px desfasados. `middle` alinha-os pelo centro. */
.cha-table-actions .cha-copy-btn,
.cha-table-actions .cha-dots-btn {
vertical-align: middle;
}
/* v2.15.25 — o SVG de cópia herdava .cha-dots-btn svg { width:4px;height:18px }
(geometria dos 3 pontos do kebab) e aparecia esmagado. Devolve-lhe o seu
tamanho próprio (16×16). Só o tamanho muda — a cor continua por currentColor. */
.cha-copy-btn svg {
width: 16px;
height: 16px;
}
/* Modal "Resposta ao aviso" — redesenho cha-v2.7.13 alinhado com
mockup §"Resposta ao comercial" do Lote A. */
.cha-alert-modal-content {
background: var(--ph-white);
border-radius: 16px;
box-shadow: 0 30px 60px -10px rgba(17, 40, 51, 0.4);
width: 460px;
max-width: 90%;
overflow: hidden;
text-align: left;
padding: 0;
}
.cha-alert-modal-header {
padding: 22px 26px 18px;
border-bottom: 1px solid var(--ph-line);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.cha-alert-modal-eyebrow {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--alert);
font-weight: 700;
margin-bottom: 4px;
}
.cha-alert-modal-title {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 400;
color: var(--ph-ink);
line-height: 1.1;
letter-spacing: -0.2px;
}
.cha-alert-modal-close {
width: 30px;
height: 30px;
border-radius: 7px;
background: transparent;
border: none;
color: var(--ph-ink-muted);
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
position: static;
font-size: inherit;
}
.cha-alert-modal-close:hover {
background: var(--ph-paper-tint);
color: var(--ph-ink);
}
.cha-alert-modal-close svg {
width: 16px;
height: 16px;
display: block;
}
.cha-alert-modal-body {
padding: 22px 26px;
}
.cha-alert-modal-original {
background: var(--alert-tint);
border-left: 2px solid var(--alert);
padding: 12px 14px;
border-radius: var(--ph-radius-sm);
font-size: 13px;
color: var(--ph-ink);
line-height: 1.55;
margin-bottom: 18px;
font-family: var(--ph-sans);
}
.cha-alert-modal-original[hidden] {
display: none;
}
.cha-alert-modal-original .who {
display: block;
font-size: 10px;
color: var(--ph-ink-muted);
margin-top: 6px;
font-weight: 500;
}
.cha-alert-modal-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.cha-alert-modal-field label {
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-gold-deep);
}
.cha-alert-modal-body textarea {
width: 100%;
background: var(--ph-white);
color: var(--ph-ink);
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-sm);
padding: 10px 12px;
font-family: var(--ph-sans);
font-size: 14px;
resize: vertical;
min-height: 80px;
}
.cha-alert-modal-body textarea::placeholder {
color: var(--ph-ink-muted);
}
.cha-alert-modal-body textarea:focus {
outline: none;
border-color: var(--ph-accent-media);
}
.cha-alert-modal-footer {
padding: 16px 26px 22px;
border-top: 1px solid var(--ph-line);
display: flex;
gap: 10px;
background: var(--ph-paper);
align-items: center;
}
.cha-alert-modal-btn-cancel {
background: transparent;
border: none;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 12px 16px;
cursor: pointer;
}
.cha-alert-modal-btn-cancel:hover {
color: var(--ph-ink);
}
.cha-alert-modal-btn-primary {
flex: 1;
background: var(--ph-ink);
color: var(--ph-paper);
border: none;
padding: 12px 16px;
border-radius: var(--ph-radius-sm);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.18s ease;
}
.cha-alert-modal-btn-primary:hover {
background: var(--ph-ink-soft);
}
.cha-alert-modal-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ============================================================
PORTAL OVERHAUL — Sessão 2 (cha-v2.7.14)
Bottom-sheet system responsive · mobile detail headers · action bar
============================================================ */
/* ─── Sheet system (bottom-sheet em mobile / modal centrado em desktop) ─── */
.cha-sheet-overlay {
position: fixed;
inset: 0;
background: rgba(17, 40, 51, 0.5);
z-index: 9999;
display: flex;
align-items: flex-end; /* mobile: sheet do fundo */
justify-content: center;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
animation: cha-sheet-fade-in 0.18s ease-out;
}
@media (min-width: 768px) {
.cha-sheet-overlay {
align-items: center; /* desktop: modal centrado */
}
}
.cha-sheet {
background: var(--ph-white);
width: 100%;
max-width: 480px;
padding: 14px 0 24px;
box-shadow: 0 30px 60px -10px rgba(17, 40, 51, 0.4);
border-radius: 20px 20px 0 0;
animation: cha-sheet-slide-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 768px) {
.cha-sheet {
border-radius: 16px;
max-width: 460px;
margin: 24px;
animation-name: cha-sheet-pop-in;
}
}
@keyframes cha-sheet-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes cha-sheet-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes cha-sheet-pop-in {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.cha-sheet-handle {
width: 40px;
height: 4px;
background: var(--ph-line-strong);
border-radius: 2px;
margin: 0 auto 14px;
}
@media (min-width: 768px) {
.cha-sheet-handle {
display: none;
}
}
.cha-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 24px 14px;
}
@media (min-width: 768px) {
.cha-sheet-header {
padding: 18px 26px;
border-bottom: 1px solid var(--ph-line);
}
}
.cha-sheet-title {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 700;
text-align: center;
flex: 1;
}
@media (min-width: 768px) {
.cha-sheet-title {
text-align: left;
font-size: 9px;
letter-spacing: 0.30em;
}
}
.cha-sheet-close {
width: 30px;
height: 30px;
border-radius: 7px;
background: transparent;
border: none;
color: var(--ph-ink-muted);
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
}
.cha-sheet-close:hover {
background: var(--ph-paper-tint);
color: var(--ph-ink);
}
.cha-sheet-close svg {
width: 16px;
height: 16px;
display: block;
}
.cha-sheet-body {
padding: 4px 18px 18px;
}
@media (min-width: 768px) {
.cha-sheet-body {
padding: 22px 26px;
}
}
.cha-sheet-footer {
padding: 0 18px;
display: flex;
gap: 10px;
align-items: center;
}
@media (min-width: 768px) {
.cha-sheet-footer {
padding: 14px 26px 18px;
border-top: 1px solid var(--ph-line);
background: var(--ph-paper);
margin-top: 8px;
}
}
.cha-sheet-btn-text {
background: transparent;
border: none;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 12px 16px;
cursor: pointer;
}
.cha-sheet-btn-text:hover { color: var(--ph-ink); }
.cha-sheet-btn-primary {
flex: 1;
background: var(--ph-ink);
color: var(--ph-paper);
border: none;
padding: 12px 16px;
border-radius: var(--ph-radius-sm);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.18s ease;
}
.cha-sheet-btn-primary:hover { background: var(--ph-ink-soft); }
/* ─── Sheet de DATAS (date range) ─── */
.cha-sheet-date-range {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: end;
box-sizing: border-box;
width: 100%;
}
.cha-sheet-date-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0; /* permite shrinking dentro do grid */
}
.cha-sheet-date-field input[type="date"] {
width: 100%;
box-sizing: border-box;
}
/* v2.12.1 — Em viewports estreitos (≤420px) o iOS Safari renderiza o
com largura mínima ~110px que estoira o grid de
1fr-auto-1fr. Stack vertical resolve. */
@media (max-width: 420px) {
.cha-sheet-date-range {
grid-template-columns: 1fr;
gap: 12px;
}
.cha-sheet-date-dash {
display: none;
}
}
.cha-sheet-date-label {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
}
.cha-sheet-date-field input[type="date"] {
padding: 11px 12px;
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-sm);
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
background: var(--ph-white);
text-align: center;
font-variant-numeric: tabular-nums;
}
.cha-sheet-date-field input[type="date"]:focus {
outline: none;
border-color: var(--ph-accent-media);
}
.cha-sheet-date-dash {
color: var(--ph-ink-muted);
font-size: 18px;
padding-bottom: 10px;
}
/* ─── Bottom-sheet IDIOMA (mobile only) ───
Em mobile, o custom dropdown idioma transforma-se num bottom-sheet.
No desktop mantém-se o popup absolute existente. */
@media (max-width: 767px) {
/* Backdrop quando o menu está aberto — usamos um pseudo no body via
classe injectada pelo JS (cha-lang-sheet-open). */
body.cha-lang-sheet-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(17, 40, 51, 0.5);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 9998;
animation: cha-sheet-fade-in 0.18s ease-out;
}
.cha-lang-filter.is-open .cha-lang-filter-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
max-height: 70vh;
margin: 0;
padding: 14px 0 24px;
border: none;
border-radius: 20px 20px 0 0;
box-shadow: 0 -30px 60px -10px rgba(17, 40, 51, 0.4);
z-index: 9999;
min-width: 0;
background: var(--ph-white);
animation: cha-sheet-slide-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Handle bar visual */
.cha-lang-filter.is-open .cha-lang-filter-menu::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: var(--ph-line-strong);
border-radius: 2px;
margin: 0 auto 14px;
}
.cha-lang-filter-option {
padding: 16px 22px;
font-size: 15px;
border-radius: 0;
}
.cha-lang-filter-option:last-child {
padding-bottom: 28px;
}
.cha-lang-filter-option-flag {
font-size: 22px;
}
}
/* ─── Mobile: card headers gold-deep + divider (P9 mockup §m-info-card) ─── */
@media (max-width: 767px) {
/* Seleccionar todos os section headers dentro do detail */
.cha-detail-section h3,
.cha-detail-actions-panel h3 {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ph-line);
}
/* O painel de detalhe ganha padding bottom para a action bar fixa
não tapar o botão "Ações" (inclui safe-area-inset do home indicator iOS).
v2.14.2+ — Reduzido 96→56: a soma anterior (96 + safe-area + 24px da
.cha-main padding-bottom) dava ~154px no iPhone, e descontando os ~64px
visíveis da action bar sobravam ~90px de gap morto entre o último card
e a barra. 56 + 34 + 24 - 64 ≈ 50px → alinha com o spec. */
#cha-view-detail {
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
}
/* ─── Mobile action bar fixa (P9 mockup §m-action-bar) ─── */
.cha-mobile-action-bar {
display: none; /* só visível em mobile */
}
@media (max-width: 767px) {
.cha-mobile-action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--ph-paper);
border-top: 1px solid var(--ph-line);
/* v2.14.2+ — Buffer bottom reduzido 14→4: o env(safe-area-inset-bottom)
já protege o home indicator iOS; o 14px adicional era apenas
breathing room exagerado. Em scroll-down (Safari esconde a address
bar e safe-area passa para ~34px) a barra parecia inchar — agora
a transição é mais contida. */
padding: 10px 14px calc(4px + env(safe-area-inset-bottom, 0));
display: flex;
gap: 8px;
align-items: center;
box-shadow: 0 -8px 24px -10px rgba(17, 40, 51, 0.12);
z-index: 50;
}
}
.cha-mobile-action-bar .cha-mab-stripe {
width: 4px;
height: 38px;
border-radius: 4px;
background: var(--status-pending);
flex-shrink: 0;
}
.cha-mobile-action-bar[data-state-context="pending"] .cha-mab-stripe { background: var(--status-pending); }
.cha-mobile-action-bar[data-state-context="validated"] .cha-mab-stripe { background: var(--status-validated); }
.cha-mobile-action-bar[data-state-context="paid"] .cha-mab-stripe { background: var(--status-paid); }
.cha-mobile-action-bar[data-state-context="irregularity"] .cha-mab-stripe { background: var(--status-irregularity); }
.cha-mobile-action-bar[data-state-context="duplicate"] .cha-mab-stripe { background: var(--status-duplicate); }
.cha-mab-btn-main {
flex: 1;
padding: 12px 14px;
border-radius: var(--ph-radius-sm);
border: none;
background: var(--ph-ink);
color: var(--ph-paper);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cha-mab-btn-main:hover { background: var(--ph-ink-soft); }
.cha-mab-btn-main svg { width: 14px; height: 14px; }
.cha-mab-btn-kebab {
width: 38px;
height: 38px;
border-radius: var(--ph-radius-sm);
background: var(--ph-paper-tint);
border: 1px solid var(--ph-line);
color: var(--ph-ink-soft);
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
}
.cha-mab-btn-kebab:hover {
background: var(--ph-paper-warm);
color: var(--ph-ink);
}
.cha-mab-btn-kebab svg {
width: 4px;
height: 18px;
}
.cha-mab-btn-kebab svg rect { fill: currentColor; }
/* Popup do kebab da mobile action bar (aparece acima do botão) */
.cha-mab-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 14px;
width: 240px;
background: var(--ph-white);
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-md);
box-shadow: 0 18px 40px -10px rgba(17, 40, 51, 0.25);
padding: 6px;
z-index: 51;
}
.cha-mab-menu button {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: var(--ph-radius-sm);
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
cursor: pointer;
}
.cha-mab-menu button:hover {
background: var(--ph-paper-tint);
}
/* ============================================================
PORTAL OVERHAUL — Sessão 3+4 (cha-v2.7.15)
Mobile cards com warning · history timeline · alert section
============================================================ */
/* ─── Mobile sub cards com aviso (P10) ───
Border-left 3px amber alinhado com mockup §.m-card.has-alert.
O dot amarelo do header já existe via alertIcon na renderização. */
.cha-sub-card.has-alert {
border-left: 3px solid var(--alert);
}
/* ─── Card 'Aviso ao administrador' no detail desktop (P9) ───
.cha-alert-section ganha border-left amber e fundo amber-tint subtil
para destacar visualmente. */
.cha-alert-section {
border-left: 3px solid var(--alert);
background: linear-gradient(90deg, var(--alert-tint) 0%, transparent 25%);
padding-left: 16px !important;
}
.cha-alert-section h3 {
color: var(--alert) !important;
}
.cha-alert-section .cha-alert-text {
color: var(--ph-ink);
font-size: 14px;
line-height: 1.55;
font-family: var(--ph-sans);
}
.cha-alert-section .cha-alert-meta {
font-size: 11px;
color: var(--ph-ink-muted);
margin-top: 6px;
}
.cha-alert-section .cha-alert-response {
background: var(--ph-paper-tint);
border-left: 2px solid var(--ph-accent-lotes);
padding: 10px 12px;
border-radius: var(--ph-radius-sm);
font-size: 13px;
color: var(--ph-ink);
margin-top: 10px;
font-family: var(--ph-sans);
}
.cha-alert-section .cha-alert-response strong {
color: var(--ph-accent-lotes);
font-weight: 700;
}
/* ─── Timeline de histórico de estados (P9) ───
Adiciona linha vertical à esquerda + dots para cada item.
Visual alinhado com timelines de challenge frontend. */
.cha-history-list {
position: relative;
padding-left: 22px;
}
.cha-history-list::before {
/* Linha vertical contínua atrás dos dots */
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 6px;
width: 1px;
background: var(--ph-line-strong);
}
.cha-history-item {
position: relative;
margin-bottom: 16px;
}
.cha-history-item:last-child {
margin-bottom: 0;
}
.cha-history-item::before {
/* Dot na timeline (cobre a linha onde aparece) */
content: '';
position: absolute;
left: -22px;
top: 6px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--ph-white);
border: 2px solid var(--ph-gold-deep);
box-sizing: border-box;
}
.cha-history-states {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.cha-history-states::after {
/* Seta '→' entre os badges from→to já é renderizada no JS;
este pseudo é defensive caso esteja em falta. */
content: '';
}
.cha-history-meta {
font-family: var(--ph-sans);
font-size: 11px;
color: var(--ph-ink-muted);
margin-top: 2px;
}
.cha-history-note {
font-family: var(--ph-sans);
font-size: 12px;
color: var(--ph-ink-soft);
margin-top: 4px;
font-style: italic;
padding-left: 0;
}
/* ============================================================
AFINAÇÕES FINAIS (cha-v2.7.16+) — Grupo 2
Classes genéricas de modal header reutilizáveis em qualquer
popup (alert, date sheet, idioma sheet, etc.).
============================================================ */
/* P2 — Eyebrow gold-deep + título Playfair, padrão único para todos
os modais/sheets do portal. */
.cha-modal-eyebrow {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin-bottom: 4px;
line-height: 1.4;
}
.cha-modal-title {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 500;
color: var(--ph-ink);
line-height: 1.1;
letter-spacing: -0.2px;
}
/* Compatibilidade: o cha-alert-modal-eyebrow/title já tinha estes
estilos (definidos em v2.7.13). Mantemos as duas classes válidas
para evitar quebrar sítios que dependam da nomenclatura antiga. */
.cha-alert-modal-eyebrow {
font-size: 9px;
letter-spacing: 0.22em;
color: var(--ph-gold-deep);
}
.cha-alert-modal-title {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 500;
}
/* Override do .cha-sheet-title em modais com novo formato:
quando o sheet usa o novo header (eyebrow + title), o título
antigo .cha-sheet-title é substituído por .cha-modal-title.
Adicionado um divider visual no header. */
.cha-sheet-header.cha-sheet-header--rich {
flex-direction: row;
align-items: flex-start;
}
.cha-sheet-header.cha-sheet-header--rich > div:first-child {
text-align: left;
flex: 1;
}
@media (min-width: 768px) {
.cha-sheet-header.cha-sheet-header--rich {
border-bottom: 1px solid var(--ph-line);
}
}
/* Em mobile, header rico tem divider próprio abaixo */
@media (max-width: 767px) {
.cha-sheet-header.cha-sheet-header--rich {
border-bottom: 1px solid var(--ph-line);
padding-bottom: 14px;
}
}
/* P3 — Título do bottom-sheet de idioma (mobile only).
Renderizado como dentro
do , escondido em desktop. */
.cha-lang-filter-sheet-title {
display: none;
}
@media (max-width: 767px) {
.cha-lang-filter.is-open .cha-lang-filter-sheet-title {
display: block;
padding: 0 22px 14px;
border-bottom: 1px solid var(--ph-line);
margin-bottom: 8px;
list-style: none;
}
}
/* P8 — Textarea de aviso do comercial (cha-alert-textarea).
Aplicado dentro do panel "Aviso ao administrador" (admin pode
ver via .cha-alert-section ou comercial escreve via panel). */
.cha-alert-textarea,
textarea.cha-alert-textarea,
.cha-detail-actions-panel #cha-input-alert {
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-md);
padding: 14px 18px;
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
background: var(--ph-white);
transition: border-color 0.2s;
width: 100%;
min-height: 80px;
resize: vertical;
}
/* v2.11.1 — Styling consistente para os campos de detalhe da submissão
(Documento de pagamento + Motivo de irregularidade). Antes eram inputs
plain sem border-radius nem padding consistente com o resto do portal. */
.cha-detail-actions-panel #cha-input-payment-doc,
.cha-detail-actions-panel #cha-input-irreg-reason {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-md);
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
background: var(--ph-white);
transition: border-color 0.2s;
box-sizing: border-box;
}
.cha-detail-actions-panel #cha-input-payment-doc:focus,
.cha-detail-actions-panel #cha-input-irreg-reason:focus {
outline: none;
border-color: var(--ph-ink);
}
.cha-detail-actions-panel #cha-input-irreg-reason {
min-height: 80px;
resize: vertical;
}
.cha-alert-textarea:focus,
textarea.cha-alert-textarea:focus,
.cha-detail-actions-panel #cha-input-alert:focus {
border-color: var(--ph-ink);
outline: none;
}
.cha-alert-textarea::placeholder,
textarea.cha-alert-textarea::placeholder,
.cha-detail-actions-panel #cha-input-alert::placeholder {
color: var(--ph-ink-muted);
}
/* P8 — O panel wrapper do aviso (.cha-detail-actions-panel que tem
o textarea de aviso) já ganha border-left challenge-gold via :has().
Override para usar var(--alert) (a cor dedicada de aviso). */
.cha-detail-actions-panel:has(#cha-input-alert) {
border-left-color: var(--alert) !important;
border-radius: var(--ph-radius-md);
}
/* ============================================================
AFINAÇÕES FINAIS — Grupo 3 (P7, P12, P9)
============================================================ */
/* P7 — Lang badge com mini-bandeira (refresh do estilo) */
.cha-lang-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: var(--ph-paper-tint);
border-radius: 4px;
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ph-ink-soft);
text-transform: uppercase;
}
/* Mini-bandeiras CSS (10x8px) — sem dependências externas */
.cha-flag {
display: inline-block;
width: 10px;
height: 8px;
border-radius: 1px;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.cha-flag-pt {
background: linear-gradient(90deg, #006600 0%, #006600 40%, #FF0000 40%, #FF0000 100%);
}
.cha-flag-es {
background: linear-gradient(180deg, #C60B1E 25%, #FFC400 25%, #FFC400 75%, #C60B1E 75%);
}
.cha-flag-en {
background: #00247D;
}
.cha-flag-en::before {
content: '';
position: absolute;
top: 50%; left: 0; right: 0;
height: 2px;
transform: translateY(-50%);
background: white;
}
.cha-flag-en::after {
content: '';
position: absolute;
left: 50%; top: 0; bottom: 0;
width: 2px;
transform: translateX(-50%);
background: white;
}
.cha-flag-fr {
background: linear-gradient(90deg, #0055A4 0%, #0055A4 33%, #FFFFFF 33%, #FFFFFF 66%, #EF4135 66%);
}
.cha-flag-de {
background: linear-gradient(180deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCC00 66%);
}
.cha-flag-it {
background: linear-gradient(90deg, #009246 0%, #009246 33%, #FFFFFF 33%, #FFFFFF 66%, #CE2B37 66%);
}
/* P12 — Ícone copiar dados de faturação: ink em vez de teal */
.cha-billing-copy {
color: var(--ph-ink);
}
.cha-billing-copy:hover {
background: var(--ph-paper-tint);
}
/* P12 — Feedback "Copiado!" temporário */
.cha-copy-feedback {
display: inline-block;
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
color: var(--ph-accent-lotes);
margin-left: 8px;
vertical-align: middle;
animation: chaCopyFadeInOut 2s ease forwards;
pointer-events: none;
}
@keyframes chaCopyFadeInOut {
0% { opacity: 0; transform: translateY(2px); }
15% { opacity: 1; transform: translateY(0); }
85% { opacity: 1; }
100% { opacity: 0; transform: translateY(-2px); }
}
/* P9 — Ícone reply no .cha-alert-ack-btn (já estava amber)
Ajustar sizing do SVG novo (era ![]()
28x28; SVG agora 20x20). */
.cha-alert-ack-btn svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
display: block;
}
/* P11 — Alert section em modo TOPO (renderizado antes do grid quando
há aviso pendente não-resolvido). Margin negativa não é necessária
porque já vive fora do grid. Visual: mais largo + sombra subtil
para chamar à atenção. */
.cha-alert-section--top {
margin-bottom: 18px;
box-shadow: 0 4px 12px -4px rgba(212, 165, 58, 0.18);
}
@media (min-width: 768px) {
.cha-alert-section--top {
max-width: 100%;
}
}
/* ============================================================
AFINAÇÕES FINAIS — Grupo 5 (P4, P5, P6)
Bottom-sheets para state filter, date filter, state edit.
Triggers mobile-only que substituem dropdowns nativos.
============================================================ */
/* Mobile-only triggers (Estado / Período) — ocultos em desktop */
.cha-mob-filter-trigger {
display: none;
}
@media (max-width: 767px) {
.cha-mob-filter-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--ph-line-strong);
border-radius: 100px;
background: var(--ph-white);
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: all 0.18s ease;
}
.cha-mob-filter-trigger:hover,
.cha-mob-filter-trigger.is-active {
border-color: var(--ph-ink);
color: var(--ph-ink);
}
.cha-mob-filter-trigger.is-active {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
}
.cha-mob-filter-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ph-line-strong);
flex-shrink: 0;
}
.cha-mob-filter-trigger.is-active .cha-mob-filter-dot {
background: var(--ph-paper);
}
/* Por estado activo, o dot herda a cor do estado */
.cha-mob-filter-trigger[data-state="pending"] .cha-mob-filter-dot { background: var(--status-pending); }
.cha-mob-filter-trigger[data-state="validated"] .cha-mob-filter-dot { background: var(--status-validated); }
.cha-mob-filter-trigger[data-state="paid"] .cha-mob-filter-dot { background: var(--status-paid); }
.cha-mob-filter-trigger[data-state="irregularity"] .cha-mob-filter-dot { background: var(--status-irregularity); }
.cha-mob-filter-trigger[data-state="duplicate"] .cha-mob-filter-dot { background: var(--status-duplicate); }
/* Esconder as tabs de estado e date-presets em mobile (substituídos
pelos triggers acima que abrem bottom-sheets). */
.cha-state-tabs { display: none !important; }
.cha-date-presets { display: none !important; }
.cha-date-range-filter { display: none !important; }
}
/* Sheet radio list (radio buttons custom com dot + check) */
.cha-sheet-radio-list {
list-style: none;
margin: 0;
padding: 0;
}
.cha-sheet-radio {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px;
border-radius: var(--ph-radius-sm);
cursor: pointer;
font-family: var(--ph-sans);
font-size: 14px;
color: var(--ph-ink);
transition: background 0.12s ease;
}
.cha-sheet-radio:hover {
background: var(--ph-paper-tint);
}
.cha-sheet-radio.is-selected {
background: var(--ph-paper-tint);
font-weight: 600;
}
.cha-sheet-radio:focus-visible {
outline: 2px solid var(--ph-accent-media);
outline-offset: -2px;
}
.cha-sheet-radio-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--ph-line-strong);
flex-shrink: 0;
display: inline-block;
}
.cha-sheet-radio-dot[data-state-dot="all"] { background: var(--ph-ink); }
.cha-sheet-radio-dot[data-state-dot="pending"] { background: var(--status-pending); }
.cha-sheet-radio-dot[data-state-dot="validated"] { background: var(--status-validated); }
.cha-sheet-radio-dot[data-state-dot="paid"] { background: var(--status-paid); }
.cha-sheet-radio-dot[data-state-dot="irregularity"] { background: var(--status-irregularity); }
.cha-sheet-radio-dot[data-state-dot="duplicate"] { background: var(--status-duplicate); }
.cha-sheet-radio-label {
flex: 1;
}
.cha-sheet-radio-check {
display: none;
color: var(--ph-ink);
flex-shrink: 0;
}
.cha-sheet-radio.is-selected .cha-sheet-radio-check {
display: block;
}
/* Sheet chip grid (atalhos de data no sheet) */
.cha-sheet-chip-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.cha-sheet-chip {
padding: 12px 14px;
border-radius: var(--ph-radius-sm);
border: 1px solid var(--ph-line-strong);
background: var(--ph-white);
font-family: var(--ph-sans);
font-size: 12px;
font-weight: 600;
color: var(--ph-ink);
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
}
.cha-sheet-chip:hover {
border-color: var(--ph-ink);
}
.cha-sheet-chip.is-active {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
}
/* Sheet divider "OU PERSONALIZADO" */
.cha-sheet-divider {
height: 1px;
background: var(--ph-line);
margin: 6px 8px 14px;
position: relative;
}
.cha-sheet-divider span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--ph-white);
padding: 0 12px;
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.20em;
color: var(--ph-ink-muted);
font-weight: 700;
text-transform: uppercase;
}
/* ============================================================
MEDIA CENTER — Fase 1 (Tab + KPIs + Downloads listing)
Aligned with the Lote B (part 1) mockup (docs/mockups-referencia/papillon-portal-loteB-part1-v1.html).
Prefix: .pmc-* · Accent: var(--ph-accent-media) (#166A8E)
============================================================ */
/* ── Topbar nav active state (media accent on the MC tab) ──── */
.cha-topbar-nav-btn--media.active {
background: var(--ph-accent-media);
color: var(--ph-white);
border-color: var(--ph-accent-media);
}
.cha-topbar-nav-btn--media:not(.active):hover {
color: var(--ph-accent-media);
}
/* v2.14.3 — Montras tab button (terracota).
Espelha o pattern de --media: cor accent quando activo + hover de
accent quando inactivo. Token --ph-accent-montras vem do tema 0.3.4
(tokens.css); fallback inline para tema antigo. */
.cha-topbar-nav-btn--montras.active {
background: var(--ph-accent-montras, #9a3d2a);
color: var(--ph-white);
border-color: var(--ph-accent-montras, #9a3d2a);
}
.cha-topbar-nav-btn--montras:not(.active):hover {
color: var(--ph-accent-montras, #9a3d2a);
}
/* ── Sub-nav (mockup §sub-nav)
Strip between topbar and page header — paper-tint background,
uppercase 11px tracking, active item underlined in accent-media. */
.pmc-subnav {
background: var(--ph-paper-tint);
/* Full-bleed flush against the topbar (Option A from the mockup).
Three pieces are needed:
1. `margin-top: -16px` cancels the 16px gap that .cha-main adds
below the topbar (.cha-main padding-top = topbar-h + 16).
2. `margin-left/right: calc(50% - 50vw)` is the classic full-bleed
trick — escapes BOTH .cha-main's 16px lateral padding AND any
centered max-width gap on wide viewports. Pure `margin: -16px`
(what we had before) only handled .cha-main's padding, leaving
the strip short by `(viewport - 1400) / 2` on > 1400px screens.
3. `padding-left/right` restores content alignment with the rest
of the page (.pmc-page-header has 28px padding inside .cha-main).
Formula: full-bleed offset `(50vw - 50%)` + original 28px = items
sit in the same column as page-header content.
`z-index: 101` puts the strip above the topbar's
`box-shadow: 0 2px 8px rgba(0,0,0,0.15)`, which would otherwise
paint a dark line across the top of the sub-nav.
v2.14.2 — `position: sticky; top: var(--portal-topbar-h)` em vez
de `position: relative`. Sem isto, ao scrollar a sub-nav passava
POR CIMA do topbar fixed (z-index 101 > 100). Sticky cola-a
permanentemente debaixo do topbar (top:56px = altura exacta do
topbar) sem qualquer gap. Z-index 101 mantém-se: cobre o
box-shadow do topbar quando os dois se tocam visualmente. */
position: sticky;
top: var(--portal-topbar-h);
z-index: 101;
margin-top: -16px;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc((50vw - 50%) + 28px);
padding-right: calc((50vw - 50%) + 28px);
border-bottom: 1px solid var(--ph-line);
display: flex;
gap: 0;
align-items: stretch;
height: 46px;
/* `overflow-x: auto` alone makes WebKit reserve a vertical scrollbar
gutter — appears as a thin bar on the right of the sub-nav even
when nothing scrolls. Explicitly clipping the Y axis and hiding
both scrollbars keeps the strip clean while still letting items
scroll horizontally on very narrow viewports (mobile rule below). */
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
}
.pmc-subnav::-webkit-scrollbar { display: none; } /* WebKit / Blink */
.pmc-subnav-item {
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
padding: 0 18px;
border: none;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
white-space: nowrap;
transition: color 0.18s var(--ph-ease);
}
.pmc-subnav-item:hover { color: var(--ph-ink); }
.pmc-subnav-item.active { color: var(--ph-accent-media); }
.pmc-subnav-item.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 18px;
right: 18px;
height: 2px;
background: var(--ph-accent-media);
}
.pmc-subnav-count {
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: var(--ph-radius-pill);
background: var(--ph-white);
color: var(--ph-ink-muted);
border: 1px solid var(--ph-line);
}
/* Hide the badge while the count is still empty — otherwise a stray
placeholder character (e.g. an em-dash) reads as a vertical
separator between sub-nav items. JS populates the text content
on load; CSS reveals the badge automatically. */
.pmc-subnav-count:empty {
display: none;
}
.pmc-subnav-item.active .pmc-subnav-count {
background: var(--ph-accent-media);
color: var(--ph-white);
border-color: var(--ph-accent-media);
}
/* ── Page header (mockup §page-header) ─────────────────────── */
.pmc-page-header {
padding: 22px 28px 18px;
background: var(--ph-paper);
border-bottom: 1px solid var(--ph-line);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.pmc-page-title-wrap {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pmc-page-eyebrow {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ph-accent-media);
font-weight: 700;
}
.pmc-page-title {
font-family: var(--ph-serif);
font-size: 28px;
font-weight: 400;
color: var(--ph-ink);
letter-spacing: -0.3px;
line-height: 1;
}
.pmc-page-meta {
font-family: var(--ph-sans);
font-size: 12px;
color: var(--ph-ink-muted);
margin-top: 6px;
}
.pmc-page-actions { display: flex; gap: 10px; flex-shrink: 0; }
.pmc-btn-primary {
padding: 10px 18px;
border-radius: var(--ph-radius-sm);
border: none;
background: var(--ph-ink);
color: var(--ph-paper);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background 0.18s var(--ph-ease);
}
.pmc-btn-primary:hover { background: var(--ph-ink-soft); }
.pmc-btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.pmc-btn-primary--media { background: var(--ph-accent-media); }
.pmc-btn-primary--media:hover { background: #0F4D69; }
/* ── KPI strip (mockup §kpi-strip)
4 cells in a continuous strip — separated by 1px lines, NOT cards.
Values render in Playfair Display (serif) per the mockup. */
.pmc-kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--ph-line);
border-bottom: 1px solid var(--ph-line);
}
.pmc-kpi {
background: var(--ph-paper);
padding: 18px 22px;
}
.pmc-kpi-label {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin-bottom: 4px;
}
.pmc-kpi-value {
font-family: var(--ph-serif);
font-size: 30px;
font-weight: 400;
color: var(--ph-ink);
letter-spacing: -0.5px;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 4px;
}
.pmc-kpi-value--media { color: var(--ph-accent-media); }
.pmc-kpi-value--text {
font-size: 22px;
padding-top: 4px;
letter-spacing: -0.2px;
}
.pmc-kpi-meta {
font-size: 11px;
color: var(--ph-ink-muted);
}
/* ── Toolbar (mockup §toolbar) ─────────────────────────────── */
.pmc-toolbar {
padding: 16px 28px;
background: var(--ph-paper);
/* v2.15.10 — border-bottom removida no desktop: encostava ao topo
arredondado da .pmc-table-wrap (reta tangente à curva). Restaurada
só no mobile (@media ≤767px), onde abaixo há .pmc-m-card (sem curva). */
}
.pmc-toolbar-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.pmc-toolbar-row + .pmc-toolbar-row { margin-top: 12px; }
.pmc-search {
flex: 1;
position: relative;
min-width: 280px;
max-width: 420px;
}
.pmc-search input {
width: 100%;
height: 38px;
padding: 0 14px 0 38px;
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-sm);
/* White (not paper) so the field stands out against the surrounding
paper-coloured toolbar — pure white reads as "input here", paper
was reading as decorative panel. */
background: var(--ph-white);
font-family: var(--ph-sans);
font-size: 12.5px;
color: var(--ph-ink);
outline: none;
transition: border-color 0.18s var(--ph-ease);
}
.pmc-search input:focus { border-color: var(--ph-ink); }
.pmc-search svg {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
stroke: var(--ph-ink-muted);
fill: none; stroke-width: 2;
}
.pmc-filter-pill {
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 7px 14px;
border-radius: var(--ph-radius-pill);
background: var(--ph-white);
border: 1px solid var(--ph-line-strong);
color: var(--ph-ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: border-color 0.18s var(--ph-ease), color 0.18s var(--ph-ease);
}
.pmc-filter-pill:hover { border-color: var(--ph-ink); color: var(--ph-ink); }
.pmc-pill-count { font-weight: 700; color: var(--ph-ink-muted); font-size: 11px; }
.pmc-filter-pill.active {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
}
.pmc-filter-pill.active .pmc-pill-count { color: var(--ph-gold); }
.pmc-filter-label {
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
}
.pmc-filter-select {
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
padding: 7px 32px 7px 14px;
border-radius: var(--ph-radius-pill);
border: 1px solid var(--ph-line-strong);
background: var(--ph-white);
color: var(--ph-ink-soft);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
/* ── Table (mockup §table) ─────────────────────────────────── */
.pmc-table-wrap {
background: var(--ph-paper);
/* Match the categorias list pattern (.pmc-cat-list): border +
border-radius on the wrap, overflow:hidden clips the thead's
top corners so they appear rounded without per-cell border-radius. */
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
overflow: hidden;
}
.pmc-table {
width: 100%;
border-collapse: collapse;
}
.pmc-table thead th {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
text-align: left;
padding: 12px 14px;
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line-strong);
white-space: nowrap;
}
.pmc-table thead th.pmc-th-num { text-align: right; }
.pmc-table tbody tr {
cursor: default;
transition: background 0.12s;
border-bottom: 1px solid var(--ph-line);
}
.pmc-table tbody tr:hover { background: var(--ph-paper-tint); }
.pmc-table td {
padding: 12px 14px;
font-family: var(--ph-sans);
font-size: 12.5px;
color: var(--ph-ink);
vertical-align: middle;
}
.pmc-table .pmc-td-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.pmc-table .pmc-td-date {
font-family: var(--ph-mono);
font-size: 11px;
color: var(--ph-ink-muted);
white-space: nowrap;
}
/* Download name cell (thumb + title + meta) */
.pmc-name-cell {
display: flex;
align-items: center;
gap: 12px;
min-width: 240px;
}
.pmc-name-info { flex: 1; min-width: 0; }
.pmc-name-info strong {
font-weight: 600;
font-size: 13px;
color: var(--ph-ink);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pmc-name-meta {
font-size: 10.5px;
color: var(--ph-ink-muted);
margin-top: 2px;
}
/* Download thumbnail (mockup §download-thumb)
50×38 rounded box. Image fills it; if no image, gradient class
colors the box. 5 gradient variants rotate per row index. */
.pmc-thumb {
width: 50px;
height: 38px;
border-radius: 6px;
background: var(--ph-paper-tint);
border: 1px solid var(--ph-line);
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.pmc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pmc-thumb-grad-1 { background: linear-gradient(135deg, #B8854A 0%, #8E5F2C 100%); border: none; }
.pmc-thumb-grad-2 { background: linear-gradient(135deg, #166A8E 0%, #0F4D69 100%); border: none; }
.pmc-thumb-grad-3 { background: linear-gradient(135deg, #2DA38F 0%, #1F8A77 100%); border: none; }
.pmc-thumb-grad-4 { background: linear-gradient(135deg, #756F9B 0%, #524D70 100%); border: none; }
.pmc-thumb-grad-5 { background: linear-gradient(135deg, #B85555 0%, #8E3737 100%); border: none; }
/* Brand thumb (mockup §brand-thumb)
28×28 rounded 6px square with 3-letter code. Papillon: ink+gold.
Bow: teal gradient + white. */
.pmc-brand-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--ph-ink);
}
.pmc-brand-name { font-size: 12px; }
.pmc-brand-thumb {
width: 28px;
height: 28px;
border-radius: 6px;
display: grid;
place-items: center;
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
flex-shrink: 0;
border: 1px solid var(--ph-line);
background: var(--ph-ink-soft);
color: var(--ph-white);
}
.pmc-brand-thumb--papillon {
background: var(--ph-ink);
color: var(--ph-gold);
border-color: var(--ph-ink);
}
.pmc-brand-thumb--bow {
background: linear-gradient(135deg, #2DA38F 0%, #1F8A77 100%);
color: var(--ph-white);
border-color: transparent;
}
.pmc-brand-thumb--compact {
width: 18px;
height: 18px;
font-size: 7px;
letter-spacing: 0.04em;
border-radius: 4px;
}
/* Category cell — small uppercase ink-soft */
.pmc-cat {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-soft);
}
/* Language chips (mockup §lang-chip) */
.pmc-lang-chips {
display: inline-flex;
gap: 4px;
align-items: center;
}
.pmc-lang-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
background: var(--ph-paper-tint);
border-radius: var(--ph-radius-pill);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--ph-ink-soft);
}
.pmc-lang-chip--missing { opacity: 0.4; }
.pmc-lang-chip--global {
background: var(--ph-tint-media);
color: var(--ph-accent-media);
}
/* Mini-flag inside lang chips (mockup §flag.tiny) */
.pmc-flag {
display: inline-block;
vertical-align: middle;
border-radius: 2px;
width: 13px;
height: 10px;
}
.pmc-flag--pt { background: linear-gradient(90deg, #006600 0%, #006600 40%, #FF0000 40%, #FF0000 100%); }
.pmc-flag--es { background: linear-gradient(180deg, #C60B1E 25%, #FFC400 25%, #FFC400 75%, #C60B1E 75%); }
.pmc-flag--en {
background: #00247D;
position: relative;
overflow: hidden;
}
.pmc-flag--en::before,
.pmc-flag--en::after {
content: '';
position: absolute;
background: var(--ph-white);
}
.pmc-flag--en::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.pmc-flag--en::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
/* Download count cell (mockup §dl-count) */
.pmc-dl-count {
display: inline-flex;
align-items: center;
gap: 5px;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--ph-ink-soft);
}
.pmc-dl-count--high { color: var(--ph-accent-media); }
.pmc-dl-count svg {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2;
opacity: 0.6;
}
/* Status pill (mockup §status-pill) */
.pmc-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--ph-radius-pill);
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.pmc-status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.pmc-status-pill--publish {
background: var(--status-paid-tint);
color: var(--status-paid);
}
.pmc-status-pill--draft {
background: var(--ph-paper-tint);
color: var(--ph-ink-muted);
}
.pmc-status-pill--trash {
background: var(--status-irregularity-tint);
color: var(--status-irregularity);
}
.pmc-status-pill--compact {
padding: 2px 8px;
font-size: 9px;
letter-spacing: 0.1em;
}
/* ── Mobile cards (mockup §m-card) ─────────────────────────── */
.pmc-cards-list { display: none; padding: 14px; }
@media (max-width: 767px) {
.pmc-table-wrap { display: none; }
.pmc-cards-list { display: block; }
/* Sub-nav: tighter inside-padding on phones. The full-bleed offset
formula stays the same — only the trailing 14px (was 28px on
desktop) changes, keeping items closer to the visible edge. */
.pmc-subnav {
padding-left: calc((50vw - 50%) + 14px);
padding-right: calc((50vw - 50%) + 14px);
}
.pmc-subnav-item { padding: 0 14px; }
.pmc-subnav-item.active::after { left: 14px; right: 14px; }
/* Page header stacks vertically on mobile */
.pmc-page-header {
flex-direction: column;
align-items: stretch;
padding: 18px 16px 16px;
/* v2.15.10 — sem border-bottom no mobile: encostava ao topo
arredondado dos cartões .pmc-kpi (reta tangente). Desktop mantém. */
border-bottom: 0;
}
.pmc-page-actions { width: 100%; }
.pmc-btn-primary { width: 100%; justify-content: center; }
/* KPI strip → 2 columns on tablet, 1 column on phone */
.pmc-kpi-strip { grid-template-columns: repeat(2, 1fr); }
.pmc-kpi { padding: 14px 16px; }
.pmc-kpi-value { font-size: 26px; }
.pmc-kpi-value--text { font-size: 18px; }
.pmc-toolbar { padding: 14px 16px; border-bottom: 1px solid var(--ph-line); }
.pmc-search { min-width: 0; max-width: none; width: 100%; }
/* Issue 6 — search input legibility on phones.
- height ≥44px so the touch target meets WCAG.
- font-size 16px stops iOS Safari from triggering its "zoom to
input" behaviour (anything <16px triggers it).
- explicit white background even on mobile (the desktop rule
now sets it, but we re-assert in case a theme adds a shadow). */
.pmc-search input {
min-height: 44px;
height: 44px;
font-size: 16px;
background: var(--ph-white);
}
/* Toolbar row 1: search occupies its own row above the status pills,
pills get their own scrollable row below. */
.pmc-toolbar-row { flex-wrap: wrap; row-gap: 10px; }
.pmc-toolbar-row:first-child .pmc-search { flex: 1 0 100%; }
}
@media (max-width: 539px) {
.pmc-kpi-strip { grid-template-columns: 1fr; }
}
.pmc-m-card {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
padding: 12px;
margin-bottom: 10px;
display: flex;
gap: 12px;
cursor: default;
}
.pmc-m-thumb {
width: 56px;
height: 56px;
border-radius: var(--ph-radius-sm);
background: var(--ph-paper-tint);
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.pmc-m-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pmc-m-card-info { flex: 1; min-width: 0; }
.pmc-m-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
gap: 8px;
}
.pmc-m-cat {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-accent-media);
}
.pmc-m-card-title {
font-size: 13.5px;
font-weight: 600;
color: var(--ph-ink);
line-height: 1.3;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.pmc-m-card-meta {
font-size: 10.5px;
color: var(--ph-ink-muted);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pmc-m-card-langs { display: inline-flex; }
.pmc-m-card-stats {
display: flex;
align-items: center;
gap: 12px;
margin-top: 6px;
font-size: 10px;
color: var(--ph-ink-muted);
font-variant-numeric: tabular-nums;
}
/* ── "Em construção" placeholder for Fase 2 subviews ───────── */
.pmc-coming-soon {
padding: 60px 24px;
text-align: center;
}
.pmc-coming-soon svg { color: var(--ph-ink-muted); }
.pmc-coming-soon-sub {
margin-top: 6px;
font-size: 12px;
color: var(--ph-ink-muted);
}
/* ============================================================
MEDIA CENTER — Fase 2
Categorias + Import/Export + Editor shell
============================================================ */
/* Reusable form field (drawer + editor) */
.pmc-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.pmc-field label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-soft);
}
.pmc-field input[type="text"],
.pmc-field input[type="number"],
.pmc-field textarea,
.pmc-field select {
width: 100%;
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
padding: 10px 12px;
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-sm);
background: var(--ph-paper);
outline: none;
transition: border-color 0.18s var(--ph-ease);
}
.pmc-field input[type="text"]:focus,
.pmc-field input[type="number"]:focus,
.pmc-field textarea:focus,
.pmc-field select:focus {
border-color: var(--ph-accent-media);
}
.pmc-field input.pmc-mono,
.pmc-mono {
font-family: var(--ph-mono);
font-size: 12px;
}
.pmc-field-help {
font-size: 11px;
color: var(--ph-ink-muted);
line-height: 1.5;
}
.pmc-char-counter {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ph-ink-muted);
font-weight: 600;
}
.pmc-char-counter--warn { color: var(--ph-gold-deep); }
.pmc-char-counter--error { color: var(--status-irregularity); }
.pmc-shortcode {
font-family: var(--ph-mono);
font-size: 11px;
background: var(--ph-paper-tint);
padding: 3px 8px;
border-radius: 4px;
color: var(--ph-ink);
}
.pmc-btn-text {
background: transparent;
border: none;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
padding: 9px 12px;
border-radius: var(--ph-radius-sm);
}
.pmc-btn-text:hover { background: var(--ph-paper-tint); color: var(--ph-ink); }
.pmc-btn-text--danger { color: var(--status-irregularity); }
.pmc-btn-text--danger:hover { background: var(--status-irregularity-tint); color: var(--status-irregularity); }
.pmc-btn-fullwidth { width: 100%; justify-content: center; }
/* ── Categorias ──────────────────────────────── */
.pmc-cat-toolbar {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
padding: 22px 28px 18px;
background: var(--ph-paper);
border-bottom: 1px solid var(--ph-line);
}
.pmc-cat-title {
font-family: var(--ph-serif);
font-size: 28px;
font-weight: 400;
color: var(--ph-ink);
letter-spacing: -0.3px;
line-height: 1;
}
.pmc-cat-subtitle {
font-family: var(--ph-sans);
font-size: 12px;
color: var(--ph-ink-muted);
margin-top: 6px;
}
.pmc-cat-list-wrap {
padding: 24px 28px 32px;
}
.pmc-cat-list {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
overflow: hidden;
}
.pmc-cat-list-header {
background: var(--ph-paper-tint);
padding: 12px 16px;
display: grid;
grid-template-columns: 32px 60px 1fr 140px 80px 80px;
gap: 14px;
border-bottom: 1px solid var(--ph-line-strong);
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
align-items: center;
}
.pmc-cat-list-header .right { text-align: right; }
.pmc-cat-row {
padding: 12px 16px;
display: grid;
grid-template-columns: 32px 60px 1fr 140px 80px 80px;
gap: 14px;
border-bottom: 1px solid var(--ph-line);
align-items: center;
background: var(--ph-white);
transition: background 0.18s var(--ph-ease);
cursor: pointer;
}
.pmc-cat-row:hover { background: var(--ph-paper-tint); }
.pmc-cat-row:last-child { border-bottom: none; }
.pmc-cat-row.pmc-dragging { opacity: 0.4; }
.pmc-cat-row.pmc-drag-over {
box-shadow: inset 0 2px 0 var(--ph-accent-media);
}
.pmc-cat-drag {
color: var(--ph-ink-muted);
display: grid;
place-items: center;
cursor: grab;
}
.pmc-cat-drag svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.pmc-cat-drag:active { cursor: grabbing; }
.pmc-cat-order-badge {
width: 26px; height: 26px;
background: var(--ph-paper-tint);
border: 1px solid var(--ph-line);
border-radius: 6px;
display: grid;
place-items: center;
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 700;
color: var(--ph-ink);
font-variant-numeric: tabular-nums;
}
.pmc-cat-name {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pmc-cat-name strong {
font-weight: 600;
font-size: 13px;
color: var(--ph-ink);
letter-spacing: 0.06em;
}
.pmc-cat-lang-names {
display: flex;
gap: 8px;
flex-wrap: wrap;
font-size: 10.5px;
color: var(--ph-ink-muted);
}
.pmc-cat-lang-names span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.pmc-cat-lang-names .pmc-flag {
width: 10px; height: 8px;
}
.pmc-cat-slug {
display: flex;
min-width: 0;
}
.pmc-cat-qty {
text-align: right;
font-family: var(--ph-mono);
font-weight: 600;
font-size: 13px;
color: var(--ph-ink);
font-variant-numeric: tabular-nums;
}
.pmc-cat-actions {
text-align: right;
}
.pmc-row-action {
width: 28px; height: 28px;
border-radius: 6px;
border: none;
background: transparent;
display: inline-grid;
place-items: center;
color: var(--ph-ink-muted);
cursor: pointer;
margin-left: 2px;
transition: background 0.18s var(--ph-ease), color 0.18s var(--ph-ease);
}
.pmc-row-action:hover { background: var(--ph-paper-tint); color: var(--ph-ink); }
.pmc-row-action--danger:hover { color: var(--status-irregularity); }
.pmc-row-action[disabled] { opacity: 0.35; cursor: not-allowed; }
.pmc-row-action[disabled]:hover { background: transparent; color: var(--ph-ink-muted); }
.pmc-row-action svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ── Drawer (right-side slide-in) ────────────── */
.pmc-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(17, 40, 51, 0.4);
/* Above .cha-topbar (z-index: 100) and .cha-user-menu (110), so the
drawer fully covers the rest of the SPA. Sheets/popups elsewhere
in the portal use 9998-9999, drawer + overlay sit just above. */
z-index: 10000;
animation: pmcOverlayIn 0.2s var(--ph-ease);
}
@keyframes pmcOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.pmc-drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 420px;
max-width: 92vw;
background: var(--ph-white);
border-left: 1px solid var(--ph-line);
box-shadow: -20px 0 40px -16px rgba(17, 40, 51, 0.3);
display: flex;
flex-direction: column;
z-index: 10001;
transform: translateX(100%);
transition: transform 0.22s var(--ph-ease);
}
.pmc-drawer.is-open { transform: translateX(0); }
.pmc-drawer-header {
padding: 22px 26px 14px;
border-bottom: 1px solid var(--ph-line);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
}
.pmc-drawer-eyebrow {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 700;
margin-bottom: 6px;
}
.pmc-drawer-title {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 400;
color: var(--ph-ink);
letter-spacing: -0.2px;
line-height: 1.2;
}
.pmc-drawer-close {
background: transparent;
border: none;
width: 32px;
height: 32px;
border-radius: var(--ph-radius-sm);
color: var(--ph-ink-muted);
cursor: pointer;
display: grid;
place-items: center;
}
.pmc-drawer-close:hover { background: var(--ph-paper-tint); color: var(--ph-ink); }
.pmc-drawer-body {
flex: 1;
overflow-y: auto;
padding: 18px 26px;
display: flex;
flex-direction: column;
gap: 14px;
}
.pmc-drawer-footer {
padding: 18px 26px;
border-top: 1px solid var(--ph-line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.pmc-drawer-footer-right {
display: flex;
gap: 10px;
margin-left: auto;
}
.pmc-drawer-footer .pmc-btn-primary { min-width: 140px; }
.pmc-lang-group {
background: var(--ph-paper-tint);
border-radius: var(--ph-radius-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pmc-lang-group-title {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin-bottom: 6px;
}
.pmc-lang-field {
background: var(--ph-white);
border-radius: var(--ph-radius-sm);
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
}
.pmc-lang-field .pmc-lang-code {
font-family: var(--ph-sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ph-ink-soft);
min-width: 26px;
}
.pmc-lang-field input {
flex: 1;
border: none;
padding: 0;
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
outline: none;
background: transparent;
}
.pmc-lang-field input::placeholder {
color: var(--ph-ink-muted);
font-style: italic;
}
/* ── Import / Export ──────────────────────────── */
.pmc-ie-header {
padding: 22px 28px 6px;
background: var(--ph-paper);
}
.pmc-server-config {
margin: 12px 28px 24px;
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
padding: 18px 22px;
}
.pmc-server-config h3 {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ph-line);
}
.pmc-server-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.pmc-server-item { display: flex; flex-direction: column; gap: 4px; }
.pmc-server-lbl {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
font-weight: 700;
}
.pmc-server-val {
font-family: var(--ph-mono);
font-size: 13px;
color: var(--ph-ink);
font-weight: 600;
}
.pmc-ie-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 0 28px 28px;
align-items: start;
}
.pmc-ie-card {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
overflow: hidden;
}
.pmc-ie-card-header {
padding: 18px 22px 16px;
border-bottom: 1px solid var(--ph-line);
display: flex;
align-items: center;
gap: 14px;
}
.pmc-ie-card-icon {
width: 44px; height: 44px;
border-radius: var(--ph-radius-md);
display: grid;
place-items: center;
flex-shrink: 0;
}
.pmc-ie-icon--export {
background: var(--ph-tint-media);
color: var(--ph-accent-media);
}
.pmc-ie-icon--import {
background: var(--alert-tint);
color: var(--ph-gold-deep);
}
.pmc-ie-card-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.pmc-ie-info { flex: 1; min-width: 0; }
.pmc-ie-eyebrow {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 2px;
}
.pmc-ie-eyebrow--export { color: var(--ph-accent-media); }
.pmc-ie-eyebrow--import { color: var(--ph-gold-deep); }
.pmc-ie-title {
font-family: var(--ph-serif);
font-size: 20px;
font-weight: 400;
color: var(--ph-ink);
letter-spacing: -0.2px;
}
.pmc-ie-card-body { padding: 18px 22px 22px; }
.pmc-ie-stats {
background: var(--ph-paper-tint);
border-radius: var(--ph-radius-md);
padding: 14px 16px;
margin-bottom: 16px;
}
.pmc-ie-stats-title {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin-bottom: 10px;
}
.pmc-ie-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.pmc-ie-stat { display: flex; flex-direction: column; gap: 2px; }
.pmc-ie-stat-val {
font-family: var(--ph-serif);
font-size: 20px;
color: var(--ph-ink);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.pmc-ie-stat-lbl {
font-size: 10.5px;
color: var(--ph-ink-muted);
font-weight: 500;
}
.pmc-ie-text {
font-size: 12.5px;
color: var(--ph-ink-soft);
line-height: 1.6;
margin-bottom: 16px;
}
.pmc-upload-zone {
display: block;
border: 2px dashed var(--ph-line-strong);
border-radius: var(--ph-radius-md);
padding: 24px 18px;
background: var(--ph-paper);
text-align: center;
cursor: pointer;
transition: border-color 0.18s var(--ph-ease), background 0.18s var(--ph-ease);
margin-bottom: 14px;
}
.pmc-upload-zone:hover,
.pmc-upload-zone.is-drag {
border-color: var(--ph-accent-media);
background: var(--ph-tint-media);
}
.pmc-upload-icon {
width: 40px; height: 40px;
margin: 0 auto 10px;
background: var(--ph-white);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--ph-ink-muted);
border: 1px solid var(--ph-line);
}
.pmc-upload-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.pmc-upload-cta {
font-size: 12.5px;
font-weight: 600;
color: var(--ph-ink);
margin-bottom: 4px;
}
.pmc-upload-cta strong { color: var(--ph-accent-media); }
.pmc-upload-hint {
font-size: 10.5px;
color: var(--ph-ink-muted);
}
.pmc-checkbox-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--ph-paper-tint);
border-radius: var(--ph-radius-sm);
margin-bottom: 14px;
cursor: pointer;
}
.pmc-check {
width: 18px; height: 18px;
border: 1.5px solid var(--ph-line-strong);
border-radius: 4px;
background: var(--ph-white);
flex-shrink: 0;
margin-top: 1px;
position: relative;
}
.pmc-check.checked {
background: var(--ph-ink);
border-color: var(--ph-ink);
}
.pmc-check.checked::after {
content: '';
position: absolute;
left: 5px; top: 1px;
width: 4px; height: 9px;
border: solid var(--ph-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pmc-check-info { flex: 1; }
.pmc-check-label {
font-size: 12.5px;
font-weight: 600;
color: var(--ph-ink);
margin-bottom: 2px;
}
.pmc-check-help {
font-size: 11px;
color: var(--ph-ink-muted);
line-height: 1.4;
}
.pmc-import-progress {
margin: 0 28px 28px;
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
padding: 18px 22px;
}
.pmc-import-progress-title {
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin-bottom: 12px;
}
.pmc-import-log {
margin: 0;
padding: 12px 14px;
list-style: none;
font-family: var(--ph-mono);
font-size: 12px;
line-height: 1.6;
max-height: 360px;
overflow-y: auto;
background: var(--ph-paper-tint);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-sm);
}
.pmc-import-step { padding: 2px 0; }
.pmc-import-step--phase { color: var(--ph-accent-media); font-weight: 600; }
.pmc-import-step--phase::before { content: '→ '; }
.pmc-import-step--done { color: var(--status-paid); }
.pmc-import-step--done::before { content: '✓ '; }
.pmc-import-step--tick { color: var(--ph-ink-soft); padding-left: 18px; font-size: 11px; }
.pmc-import-step--tick::before { content: '· '; }
.pmc-import-step--warn { color: var(--alert); font-weight: 600; }
.pmc-import-step--warn::before { content: '! '; }
.pmc-import-step--error { color: var(--status-irregularity); font-weight: 700; }
.pmc-import-step--error::before { content: '✗ '; }
/* Editor active state: hides the MC listing chrome (sub-nav, page
header, KPI strip, all subviews) so only #pmc-editor is visible.
Crucially this leaves the categorias drawer + overlay alone —
they retain their inline `display: none` until the user explicitly
opens the drawer. Replaces an earlier per-child display reset
that was un-hiding the drawer overlay on editor close. */
.pmc-is-editing > .pmc-subnav,
.pmc-is-editing > .pmc-page-header,
.pmc-is-editing > .pmc-kpi-strip,
.pmc-is-editing > .pmc-subview {
display: none !important;
}
/* ── Editor shell ────────────────────────────── */
.pmc-editor {
padding: 24px 28px 32px;
background: var(--ph-paper);
}
.pmc-editor-back {
background: transparent;
border: none;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 6px 0;
}
.pmc-editor-back:hover { color: var(--ph-ink); }
.pmc-editor-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.pmc-editor-headline { margin-bottom: 24px; }
.pmc-editor-eyebrow {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 700;
margin-bottom: 6px;
}
.pmc-editor-title {
font-family: var(--ph-serif);
font-size: 30px;
font-weight: 400;
color: var(--ph-ink);
letter-spacing: -0.4px;
line-height: 1.15;
}
.pmc-editor-grid {
display: grid;
grid-template-columns: 1fr 300px;
gap: 24px;
}
@media (max-width: 1023px) {
.pmc-editor-grid { grid-template-columns: 1fr; }
}
.pmc-editor-main {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
padding: 22px;
}
.pmc-editor-lang-tabs {
display: none;
gap: 4px;
margin-bottom: 16px;
border-bottom: 1px solid var(--ph-line);
}
.pmc-editor-lang-tab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 10px 14px;
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--ph-ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.pmc-editor-lang-tab.active {
color: var(--ph-accent-media);
border-bottom-color: var(--ph-accent-media);
}
.pmc-editor-langs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 1199px) {
.pmc-editor-langs { grid-template-columns: 1fr; gap: 18px; }
.pmc-editor-lang { display: none; }
.pmc-editor-lang.is-mobile-active { display: block; }
/* PT was previously force-shown via `.pmc-editor-lang--pt { display:
block }` here, which kept it visible even when the user tapped ES
or EN — both columns would stack. The default-PT-visible behaviour
now lives in JS (pmcEditorOpen applies `is-mobile-active` to PT
on open), letting the tab click handler swap correctly. */
.pmc-editor-lang-tabs { display: flex; }
}
.pmc-editor-lang {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-md);
padding: 14px;
}
.pmc-editor-lang-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ph-line);
}
.pmc-editor-lang-name {
flex: 1;
font-family: var(--ph-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ph-ink);
}
.pmc-editor-lang-code {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--ph-ink-muted);
}
.pmc-editor-lang-thumb {
margin-top: 6px;
margin-bottom: 14px;
}
.pmc-editor-lang-thumb-label {
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-soft);
margin-bottom: 6px;
}
.pmc-editor-lang-thumb-preview {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--ph-radius-sm);
background: var(--ph-paper-tint);
border: 1px dashed var(--ph-line-strong);
display: grid;
place-items: center;
overflow: hidden;
}
.pmc-editor-lang-thumb-preview img {
width: 100%; height: 100%; object-fit: cover;
}
.pmc-editor-lang-thumb-empty {
font-size: 10.5px;
color: var(--ph-ink-muted);
font-style: italic;
}
.pmc-editor-files {
border-top: 1px solid var(--ph-line);
padding-top: 12px;
}
.pmc-editor-files-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-soft);
}
.pmc-editor-files-count {
color: var(--ph-ink-muted);
font-weight: 600;
}
.pmc-editor-files-list {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 4px;
}
.pmc-editor-file {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-sm);
padding: 8px 10px;
font-size: 11.5px;
}
.pmc-editor-file-name {
color: var(--ph-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
margin-right: 8px;
}
.pmc-editor-file-size {
font-family: var(--ph-mono);
font-size: 10.5px;
color: var(--ph-ink-muted);
flex-shrink: 0;
}
.pmc-editor-files-note {
margin-top: 8px;
font-size: 11px;
color: var(--ph-ink-muted);
font-style: italic;
}
.pmc-editor-sidebar {
display: flex;
flex-direction: column;
gap: 14px;
}
.pmc-editor-sidebar-card {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg);
padding: 16px 18px;
}
.pmc-editor-sidebar-card h3 {
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ph-gold-deep);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ph-line);
}
.pmc-editor-sidebar-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px 0;
font-family: var(--ph-sans);
font-size: 12px;
}
.pmc-editor-sidebar-row + .pmc-editor-sidebar-row { border-top: 1px dashed var(--ph-line); }
.pmc-editor-sidebar-lbl { color: var(--ph-ink-muted); }
.pmc-editor-sidebar-val { color: var(--ph-ink); font-weight: 600; }
.pmc-editor-sidebar-val.pmc-editor-stat-big {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 400;
}
/* Mobile tweaks for Fase 2 */
@media (max-width: 767px) {
.pmc-cat-toolbar { flex-direction: column; align-items: stretch; padding: 18px 16px; }
.pmc-cat-list-wrap { padding: 16px; }
.pmc-cat-list-header { display: none; }
.pmc-cat-row {
grid-template-columns: 32px 60px 1fr;
grid-template-rows: auto auto;
gap: 8px 12px;
}
.pmc-cat-row .pmc-cat-slug,
.pmc-cat-row .pmc-cat-qty,
.pmc-cat-row .pmc-cat-actions {
grid-column: 1 / -1;
}
.pmc-cat-row .pmc-cat-actions { text-align: right; }
.pmc-drawer { width: 100%; max-width: 100%; }
.pmc-server-grid { grid-template-columns: repeat(2, 1fr); }
.pmc-ie-grid { grid-template-columns: 1fr; padding: 0 16px 24px; }
.pmc-ie-header { padding: 18px 16px 6px; }
.pmc-server-config { margin: 12px 16px 18px; }
.pmc-import-progress { margin: 0 16px 24px; }
/* Issue 5 — Editor on phones.
The desktop 3-col grid already collapses to 1 col at ≤1199px
(tabs visible). These rules tune the smaller screen specifically:
tighter padding, smaller hero title, full-width inputs/buttons,
thumbnail constrained to its container, sidebar stacked below. */
.pmc-editor { padding: 18px 16px; }
.pmc-editor-main { padding: 16px; }
.pmc-editor-title { font-size: 22px; letter-spacing: -0.2px; }
.pmc-editor-eyebrow { font-size: 9px; letter-spacing: 0.22em; }
/* All form controls inside the editor occupy 100% width on phones —
prevents the title input from sticking out past its lang card
and lets the description textarea grow. */
.pmc-editor-main input,
.pmc-editor-main textarea,
.pmc-editor-main select {
width: 100%;
box-sizing: border-box;
font-size: 16px; /* stops iOS zoom on focus */
}
.pmc-editor-lang-thumb-preview img {
max-width: 100%;
height: auto;
display: block;
}
/* Sidebar stacks below the form (the 1023px rule already moves it
to its own grid row; here we tighten spacing). */
.pmc-editor-sidebar { margin-top: 8px; }
.pmc-editor-sidebar-card { padding: 14px 16px; }
/* Save / trash buttons full-width on phones so they're tap-friendly. */
.pmc-editor-sidebar .pmc-btn-primary,
.pmc-editor-sidebar .pmc-btn-text { width: 100%; justify-content: center; }
}
/* ============================================================
MEDIA CENTER — Fase 2b (Uploads + Thumbnails + Modo Global)
============================================================ */
/* Mode toggle (Multilíngue / Global) — chip-style buttons */
.pmc-editor-mode-toggle {
display: inline-flex;
gap: 6px;
margin: 0 0 18px;
background: var(--ph-paper-tint);
padding: 4px;
border-radius: var(--ph-radius-pill);
}
.pmc-mode-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: none;
background: transparent;
border-radius: var(--ph-radius-pill);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ph-ink-soft);
cursor: pointer;
transition: background 0.18s var(--ph-ease), color 0.18s var(--ph-ease);
}
.pmc-mode-btn:hover { color: var(--ph-ink); }
.pmc-mode-btn.is-active {
background: var(--ph-white);
color: var(--ph-accent-media);
box-shadow: var(--ph-shadow-sm);
}
.pmc-mode-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid var(--ph-line-strong);
background: var(--ph-white);
}
.pmc-mode-btn.is-active .pmc-mode-dot {
border-color: var(--ph-accent-media);
background: var(--ph-accent-media);
box-shadow: inset 0 0 0 2px var(--ph-white);
}
/* ── File upload zone (per-lang + global) ────── */
.pmc-file-upload-zone {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 12px;
margin-top: 10px;
border: 1.5px dashed var(--ph-line-strong);
border-radius: var(--ph-radius-sm);
background: var(--ph-white);
text-align: center;
cursor: pointer;
transition: border-color 0.18s var(--ph-ease), background 0.18s var(--ph-ease);
}
.pmc-file-upload-zone:hover,
.pmc-file-upload-zone.is-drag {
border-color: var(--ph-accent-media);
background: var(--ph-tint-media);
}
.pmc-file-upload-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--ph-paper-tint);
display: grid;
place-items: center;
color: var(--ph-ink-muted);
}
.pmc-file-upload-cta {
font-family: var(--ph-sans);
font-size: 11.5px;
color: var(--ph-ink);
font-weight: 500;
}
.pmc-file-upload-cta strong { color: var(--ph-accent-media); font-weight: 700; }
.pmc-file-upload-hint {
font-size: 10px;
color: var(--ph-ink-muted);
}
/* ── File row in the editor list ─────────────── */
.pmc-editor-file {
display: grid;
grid-template-columns: 16px 24px 1fr auto 24px;
gap: 8px;
align-items: center;
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-sm);
padding: 6px 10px;
font-size: 11.5px;
transition: opacity 0.15s var(--ph-ease), box-shadow 0.15s var(--ph-ease);
}
.pmc-editor-file.is-dragging { opacity: 0.4; }
.pmc-editor-file.is-drop-target {
box-shadow: inset 0 2px 0 var(--ph-accent-media);
}
.pmc-editor-file.pmc-editor-file--uploading {
background: var(--ph-paper-tint);
border-style: dashed;
}
.pmc-editor-file-drag {
color: var(--ph-ink-muted);
display: grid;
place-items: center;
cursor: grab;
}
.pmc-editor-file-drag:active { cursor: grabbing; }
.pmc-editor-file-spinner {
display: grid;
place-items: center;
color: var(--ph-accent-media);
}
.pmc-editor-file-icon {
width: 24px;
height: 24px;
border-radius: 5px;
display: grid;
place-items: center;
color: var(--ph-white);
}
.pmc-editor-file-icon--pdf { background: #B85555; }
.pmc-editor-file-icon--image { background: var(--ph-accent-media); }
.pmc-editor-file-icon--video { background: var(--ph-ink); }
.pmc-editor-file-icon--audio { background: var(--ph-accent-campanhas, #756F9B); }
.pmc-editor-file-icon--archive { background: var(--ph-accent-challenge); }
.pmc-editor-file-icon--other { background: var(--ph-ink-soft); }
.pmc-editor-file-name {
color: var(--ph-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.pmc-editor-file-size {
font-family: var(--ph-mono);
font-size: 10.5px;
color: var(--ph-ink-muted);
white-space: nowrap;
}
.pmc-editor-file-remove {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: var(--ph-ink-muted);
display: grid;
place-items: center;
border-radius: 4px;
cursor: pointer;
transition: color 0.18s var(--ph-ease), background 0.18s var(--ph-ease);
}
.pmc-editor-file-remove:hover {
color: var(--status-irregularity);
background: var(--status-irregularity-tint);
}
/* ── Thumbnail picker actions ────────────────── */
.pmc-editor-lang-thumb-actions {
display: flex;
gap: 4px;
margin-top: 6px;
}
.pmc-editor-lang-thumb-actions .pmc-btn-text {
padding: 5px 8px;
font-size: 10px;
letter-spacing: 0.1em;
}
.pmc-editor-lang-thumb-help {
font-size: 10px;
color: var(--ph-ink-muted);
margin-top: 4px;
font-style: italic;
}
.pmc-thumb-uploading {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
background: rgba(17, 40, 51, 0.7);
color: var(--ph-white);
font-size: 9px;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pmc-editor-lang-thumb-preview { position: relative; }
/* ── Global section ──────────────────────────── */
.pmc-editor-global {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--ph-line);
display: grid;
grid-template-columns: 200px 1fr;
gap: 22px;
align-items: start;
}
@media (max-width: 1023px) {
.pmc-editor-global { grid-template-columns: 1fr; }
}
.pmc-editor-global-thumb {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-md);
padding: 14px;
}
/* Mobile tightening for Fase 2b */
@media (max-width: 767px) {
.pmc-editor-mode-toggle { width: 100%; justify-content: center; }
.pmc-mode-btn { flex: 1; justify-content: center; }
.pmc-file-upload-zone { min-height: 80px; }
.pmc-editor-file {
grid-template-columns: 16px 24px 1fr 24px;
}
.pmc-editor-file-size {
grid-column: 3 / 4;
font-size: 10px;
margin-top: 2px;
}
.pmc-editor-global { grid-template-columns: 1fr; }
}
/* ============================================================
Fase 2b afinações — display name input + thumb drag-drop
============================================================ */
/* File row gains a label input + filename muted below.
Grid changes: drag · icon · info (input+filename) · size · remove. */
.pmc-editor-file {
grid-template-columns: 16px 24px 1fr auto 24px;
}
.pmc-editor-file-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pmc-editor-file-label {
width: 100%;
padding: 4px 8px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
font-family: var(--ph-sans);
font-size: 12.5px;
font-weight: 600;
color: var(--ph-ink);
outline: none;
transition: border-color 0.18s var(--ph-ease), background 0.18s var(--ph-ease);
}
.pmc-editor-file-label:hover {
border-color: var(--ph-line);
}
.pmc-editor-file-label:focus {
border-color: var(--ph-accent-media);
background: var(--ph-white);
}
.pmc-editor-file-label::placeholder {
color: var(--ph-ink-muted);
font-style: italic;
font-weight: 400;
}
.pmc-editor-file-filename {
padding: 0 8px;
font-family: var(--ph-mono);
font-size: 10.5px;
color: var(--ph-ink-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Thumb preview accepts drag-drop. Visual feedback is identical to the
file upload zone for consistency. When the preview has an image, the
`is-drag` state lays a translucent media-tint overlay on top so the
user knows the drop will replace the current thumb. */
.pmc-editor-lang-thumb-preview {
border: 1px dashed var(--ph-line-strong);
border-radius: var(--ph-radius-sm);
transition: border-color 0.18s var(--ph-ease), background 0.18s var(--ph-ease);
}
.pmc-editor-lang-thumb-preview.is-drag {
border-color: var(--ph-accent-media);
border-style: dashed;
background: var(--ph-tint-media);
}
.pmc-editor-lang-thumb-preview[data-has-thumb="1"].is-drag::after {
content: 'Largar para trocar';
position: absolute;
inset: 0;
background: rgba(22, 106, 142, 0.78);
color: var(--ph-white);
display: grid;
place-items: center;
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: inherit;
}
/* Mobile: row stays 5-col (drag, icon, info wraps in its own column,
size next to label, remove). Filename hides below 480px to save space. */
@media (max-width: 767px) {
.pmc-editor-file {
grid-template-columns: 16px 24px 1fr 24px;
}
.pmc-editor-file-size {
grid-column: 3 / 4;
font-size: 10px;
margin-top: 2px;
padding: 0 8px;
}
}
@media (max-width: 480px) {
.pmc-editor-file-filename { display: none; }
}
/* ============================================================
v2.8.0 — Toast system + Bulk actions + Export CSV + SVG flags
============================================================ */
/* ── Toast container + toasts ── */
.cha-toast-container {
position: fixed;
top: 80px;
/* v2.11.1 — Em viewports largos (>1400px), o conteúdo principal está
centrado com max-width. O toast antes ficava no canto direito do
viewport, longe do conteúdo. Agora alinhamos com a borda direita
da área de conteúdo via max(): em viewports estreitos mantém
right:20px; acima de 1320px desloca-se para acompanhar o conteúdo. */
right: max(20px, calc((100vw - 1280px) / 2 + 20px));
z-index: 10002;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: 380px;
}
.cha-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: var(--ph-radius-md, 10px);
font-family: var(--ph-sans);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--ph-ink);
background: var(--ph-white);
border-left: 3px solid var(--ph-ink-soft);
box-shadow: 0 6px 18px -6px rgba(17,40,51,0.18), 0 2px 4px rgba(17,40,51,0.06);
animation: chaToastIn 0.24s var(--ph-ease, ease-out);
transition: opacity 0.24s ease, transform 0.24s ease;
}
.cha-toast.is-leaving {
opacity: 0;
transform: translateX(20px);
}
.cha-toast__icon {
flex: 0 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-top: 1px;
}
.cha-toast__icon svg {
width: 16px;
height: 16px;
}
.cha-toast__msg {
flex: 1 1 auto;
min-width: 0;
word-wrap: break-word;
}
.cha-toast__close {
flex: 0 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 4px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--ph-ink-muted);
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
.cha-toast__close:hover {
color: var(--ph-ink);
background: var(--ph-paper-tint);
}
.cha-toast__close svg { width: 12px; height: 12px; }
.cha-toast--success {
background: var(--ph-tint-lotes);
color: var(--ph-accent-lotes);
border-left-color: var(--ph-accent-lotes);
}
.cha-toast--success .cha-toast__close { color: var(--ph-accent-lotes); }
.cha-toast--error {
background: #FBEAEA;
color: #A04848;
border-left-color: #A04848;
}
.cha-toast--error .cha-toast__close { color: #A04848; }
.cha-toast--warning {
background: rgba(212, 165, 58, 0.12);
color: #8C6A1F;
border-left-color: var(--alert, #D4A53A);
}
.cha-toast--warning .cha-toast__close { color: #8C6A1F; }
.cha-toast--info {
background: var(--ph-tint-media);
color: var(--ph-accent-media);
border-left-color: var(--ph-accent-media);
}
.cha-toast--info .cha-toast__close { color: var(--ph-accent-media); }
@keyframes chaToastIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 767px) {
.cha-toast-container {
top: 70px;
right: 12px;
left: 12px;
max-width: none;
}
.cha-toast { font-size: 12.5px; padding: 11px 14px; }
}
/* ── Checkbox column (table + cards) ── */
.cha-checkbox-cell {
width: 34px;
padding-left: 8px !important;
padding-right: 0 !important;
text-align: center;
}
.cha-checkbox {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid var(--ph-line-strong);
border-radius: 4px;
background: var(--ph-white);
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: middle;
transition: border-color 0.15s ease, background 0.15s ease;
flex: 0 0 16px;
}
.cha-checkbox:hover {
border-color: var(--ph-accent-challenge);
}
.cha-checkbox:checked {
background: var(--ph-accent-challenge);
border-color: var(--ph-accent-challenge);
}
.cha-checkbox:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid var(--ph-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cha-checkbox:indeterminate {
background: var(--ph-accent-challenge);
border-color: var(--ph-accent-challenge);
}
.cha-checkbox:indeterminate::after {
content: '';
position: absolute;
left: 3px;
top: 6px;
width: 8px;
height: 2px;
background: var(--ph-white);
border-radius: 1px;
}
.cha-checkbox:focus-visible {
outline: 2px solid var(--ph-accent-challenge);
outline-offset: 2px;
}
/* Row hover/selected feedback */
.cha-table tbody tr.is-selected {
background: var(--ph-tint-challenge);
}
.cha-sub-card.is-selected {
border-color: var(--ph-accent-challenge);
box-shadow: 0 0 0 1px var(--ph-accent-challenge) inset;
}
/* Mobile card: checkbox lives in the card header next to state chip */
.cha-sub-card-check {
display: inline-flex;
align-items: center;
margin-right: 4px;
}
/* Click-zone for the checkbox should not propagate to row click */
.cha-checkbox-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── Bulk actions bar (fixed bottom) ── */
.cha-bulk-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: var(--ph-ink);
color: var(--ph-white);
box-shadow: 0 -8px 24px -10px rgba(17,40,51,0.45);
transform: translateY(100%);
transition: transform 0.24s var(--ph-ease, ease-out);
font-family: var(--ph-sans);
}
.cha-bulk-bar.is-visible {
transform: translateY(0);
}
.cha-bulk-bar__count {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
padding-right: 14px;
border-right: 1px solid rgba(255,255,255,0.18);
}
.cha-bulk-bar__count strong {
color: var(--ph-gold);
font-weight: 700;
}
.cha-bulk-bar__actions {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.cha-bulk-bar__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--ph-radius-pill, 100px);
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
color: var(--ph-white);
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cha-bulk-bar__btn:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.35);
}
.cha-bulk-bar__btn svg {
width: 13px;
height: 13px;
}
.cha-bulk-bar__btn--primary {
background: var(--ph-accent-challenge);
border-color: var(--ph-accent-challenge);
}
.cha-bulk-bar__btn--primary:hover {
background: #A6753C;
border-color: #A6753C;
}
/* ═══ v2.15.38 · Documento de pagamento em massa ═══════════════════ */
/* Botão "Documento" — outline dourado (do token, não do literal do handoff). */
.cha-bulk-bar__btn--doc {
background: transparent;
border: 1.5px solid var(--ph-accent-challenge);
color: var(--ph-accent-challenge);
font-weight: 700;
}
.cha-bulk-bar__btn--doc:not(:disabled):hover {
background: rgba(184, 133, 74, 0.14);
}
.cha-bulk-bar__btn--doc:disabled,
.cha-bulk-bar__btn--doc.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Mobile — botão "Documento" fica só-ícone (círculo dourado). Desktop intocado.
O outline dourado e o inactivo (opacity .4) mantêm-se das regras acima. */
@media (max-width: 767px) {
.cha-bulk-bar__btn--doc {
width: 48px; min-width: 48px; height: 48px;
padding: 0; gap: 0;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.cha-bulk-bar__btn--doc .cha-bulk-bar__btn-label { display: none; }
.cha-bulk-bar__btn--doc svg { margin: 0; }
}
/* Overlay (scrim) — espelha .cha-sheet-overlay: mobile bottom · desktop centro. */
.cha-doc-overlay {
position: fixed; inset: 0;
background: rgba(17, 40, 51, 0.55);
z-index: 10000; /* acima da bulk bar sticky + sheets */
display: flex; align-items: flex-end; justify-content: center;
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
animation: cha-sheet-fade-in 0.2s ease-out;
}
.cha-doc-card {
width: 100%; max-width: 100%;
background: var(--ph-white);
border-radius: 26px 26px 0 0;
padding: 22px 20px 26px;
box-shadow: 0 -12px 40px -12px rgba(0,0,0,.25);
animation: cha-doc-sheet 0.3s cubic-bezier(0.2,0.8,0.2,1);
max-height: 90vh; overflow-y: auto;
}
.cha-doc-grabber {
width: 44px; height: 5px; border-radius: 999px;
background: var(--ph-gold-soft, #D4BB91);
margin: 0 auto 14px;
}
@media (min-width: 768px) {
.cha-doc-overlay { align-items: center; }
.cha-doc-card {
width: 480px; max-width: 92vw;
border-radius: 20px;
border-left: 5px solid var(--status-paid); /* acento verde (do token) */
padding: 30px 30px 26px;
box-shadow: var(--ph-shadow-lg);
animation: cha-doc-pop 0.28s cubic-bezier(0.2,0.8,0.2,1);
}
.cha-doc-grabber { display: none; }
}
@keyframes cha-doc-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cha-doc-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.cha-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cha-doc-scope {
margin: 18px 0 20px;
background: #F4F8F2; border: 1px solid #DCEBDC; border-radius: 14px;
padding: 14px 16px;
}
.cha-doc-scope-line {
display: flex; align-items: center; gap: 10px;
font-size: 14px; font-weight: 700; color: var(--ph-ink, #112833);
}
.cha-doc-scope-check {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
background: var(--status-paid); display: inline-flex; align-items: center; justify-content: center;
}
.cha-doc-scope-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cha-doc-chip {
background: var(--ph-white); border: 1px solid var(--ph-line-strong, rgba(17,40,51,.18));
border-radius: 999px; padding: 5px 12px;
font-size: 13px; font-weight: 700; color: var(--ph-ink-soft, #2C4858);
}
.cha-doc-label {
display: block; margin-bottom: 8px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ph-gold-deep, #917143);
}
.cha-doc-input {
width: 100%; box-sizing: border-box;
border: 1.5px solid var(--ph-line-strong, rgba(17,40,51,.18)); border-radius: 12px;
padding: 15px 16px; font-family: var(--ph-sans); font-size: 17px; color: var(--ph-ink);
transition: border-color 0.15s ease;
}
.cha-doc-input:focus { outline: none; border-color: var(--ph-accent-challenge); }
.cha-doc-hint { margin-top: 10px; font-size: 13px; color: var(--ph-ink-muted, rgba(17,40,51,.55)); }
.cha-doc-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.cha-doc-apply {
flex: 1; border: none; border-radius: 12px; padding: 15px 20px;
background: var(--ph-ink, #112833); color: var(--ph-white);
font-family: var(--ph-sans); font-size: 16px; font-weight: 700; cursor: pointer;
transition: opacity 0.15s ease;
}
.cha-doc-apply:disabled { opacity: 0.5; cursor: default; }
/* Indicador "Doc:" na tabela desktop (verde, como o card mobile). */
.cha-table-doc {
font-size: 0.75rem;
font-weight: 700;
color: var(--status-paid);
margin-top: 2px;
}
.cha-bulk-bar__clear {
flex: 0 0 auto;
background: transparent;
border: 0;
color: rgba(255,255,255,0.65);
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
padding: 6px 10px;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
.cha-bulk-bar__clear:hover {
color: var(--ph-white);
background: rgba(255,255,255,0.08);
}
/* Make sure the bulk bar doesn't hide the pagination on long lists.
Activado pelo JS via body.has-bulk-bar. */
.cha-portal.has-bulk-bar .cha-main {
padding-bottom: 96px;
}
@media (max-width: 767px) {
.cha-portal.has-bulk-bar .cha-main {
padding-bottom: 110px;
}
}
@media (max-width: 767px) {
.cha-bulk-bar {
padding: 10px 12px;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cha-bulk-bar__count {
font-size: 12px;
padding-right: 8px;
white-space: nowrap;
}
.cha-bulk-bar__actions {
flex-wrap: nowrap;
gap: 6px;
}
.cha-bulk-bar__btn {
padding: 7px 11px;
font-size: 11.5px;
white-space: nowrap;
}
.cha-bulk-bar__clear { white-space: nowrap; }
.cha-bulk-bar-spacer { height: 80px; }
}
/* ── Export CSV button (toolbar) ── */
.cha-export-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--ph-radius-pill, 100px);
background: var(--ph-white);
border: 1px solid var(--ph-line-strong);
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
text-decoration: none;
}
.cha-export-btn:hover {
border-color: var(--ph-accent-challenge);
color: var(--ph-accent-challenge);
background: var(--ph-tint-challenge);
}
.cha-export-btn svg {
width: 13px;
height: 13px;
}
/* ── SVG flag inline (replaces .cha-flag CSS gradients) ── */
.cha-flag-svg {
display: inline-block;
width: 16px;
height: 11px;
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
vertical-align: middle;
box-shadow: 0 0 0 0.5px rgba(17,40,51,0.10);
}
.cha-flag-svg svg {
display: block;
width: 100%;
height: 100%;
}
.cha-flag-svg--lg {
width: 24px;
height: 17px;
}
/* Filter trigger flag (replaces emoji span content) */
.cha-lang-filter-flag.cha-flag-svg {
width: 16px;
height: 11px;
}
/* Pílula de idioma selecionada: a flag chega com caixa dupla
(.cha-flag-svg no markup + wrapper .cha-flag-svg injetado por chaFlagSvg).
Centrar a caixa interna como item flex. NÃO afeta o globo (svg cru,
sem .cha-flag-svg filho) nem a lista (.cha-lang-filter-option-flag). */
.cha-lang-filter-flag.cha-flag-svg:has(> .cha-flag-svg) {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── v2.9.2: Generic mobile bottom-sheet replacing native