/* ====================================
   SIGE ANGOSCHOOL - TEMA GLOBAL
   Sistema Integrado de Gestão Escolar
   ==================================== */

/* ====================================
   VARIÁVEIS CSS
   ==================================== */
:root {
    /* Cores Primárias (Liquid Glass - suavizadas) */
    --sige-green: linear-gradient(135deg, #3d9e78, #2d8a65);
    --sige-blue: linear-gradient(135deg, var(--sige-primary), var(--sige-primary-hover));
    --sige-purple: linear-gradient(135deg, #8878b8, #7666a8);
    --sige-orange: linear-gradient(135deg, #c99a50, #b38040);
    --sige-cyan: linear-gradient(135deg, #3aa5b8, #2d8fa0);
    --sige-indigo: linear-gradient(135deg, #6d70b5, #5c569e);
    --sige-pink: linear-gradient(135deg, #b86f96, #a55580);
    --sige-red: linear-gradient(135deg, #d46a6a, #c25454);
    --sige-teal: linear-gradient(135deg, #2da89a, #258a7e);
    --sige-amber: linear-gradient(135deg, #c99a50, #b38040);
    --sige-emerald: linear-gradient(135deg, #3d9e78, #2d8a65);
    --sige-rose: linear-gradient(135deg, #c96274, #b44d62);
    --sige-violet: linear-gradient(135deg, #8878b8, #7666a8);
    --sige-sky: linear-gradient(135deg, #4a9dc0, #3888ab);
    --sige-lime: linear-gradient(135deg, #7aad3c, #628f30);
    --sige-gray: linear-gradient(135deg, #6b7280, #4b5563);

    /* Cores Sólidas (Liquid Glass - suavizadas) */
    --color-green: #3d9e78;
    --color-blue: var(--sige-primary);
    --color-purple: #8878b8;
    --color-orange: #c99a50;
    --color-cyan: #3aa5b8;
    --color-indigo: #6d70b5;
    --color-pink: #b86f96;
    --color-red: #d46a6a;
    --color-teal: #2da89a;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Bordas */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transições */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.2s ease;
    --transition-slow: all 0.3s ease;
}

/* ====================================
   PAGE HEADERS
   ==================================== */
.sige-header {
    text-align: center;
    padding: 20px;
    border-radius: var(--radius-lg);
    color: white;
    margin-bottom: 20px;
}

.sige-header .header-icon,
.sige-header .sige-header-icon,
.sige-header-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.sige-header .header-title,
.sige-header .sige-header-title,
.sige-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.sige-header .header-subtitle,
.sige-header .sige-header-subtitle,
.sige-header-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 5px 0 0 0;
}

/* Header Colors - UNIFIED with system theme (Blue Primary) + Glass */
.sige-header,
.sige-header.green, .sige-header-green,
.sige-header.blue, .sige-header-blue,
.sige-header.purple, .sige-header-purple,
.sige-header.orange, .sige-header-orange,
.sige-header.cyan, .sige-header-cyan,
.sige-header.indigo, .sige-header-indigo,
.sige-header.pink, .sige-header-pink,
.sige-header.teal, .sige-header-teal,
.sige-header.amber, .sige-header-amber,
.sige-header.emerald, .sige-header-emerald,
.sige-header.violet, .sige-header-violet,
.sige-header.sky, .sige-header-sky,
.sige-header.lime, .sige-header-lime,
.sige-header.gray, .sige-header-gray,
.sige-header.rose, .sige-header-rose {
    background: var(--layout-header-bg);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Red header — mesmo estilo que os outros (cor primaria do sistema) */
.sige-header.red, .sige-header-red {
    background: var(--layout-header-bg);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* ====================================
   STATS CONTAINER
   ==================================== */
.sige-stats {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.sige-stats.left {
    justify-content: flex-start;
}

.sige-stats.center {
    justify-content: center;
}

.sige-stat {
    border-radius: var(--radius-md);
    padding: 10px 18px;
    text-align: center;
    color: white;
    min-width: 80px;
}

.sige-stat.green, .sige-stat-green { background: var(--glass-stat-green); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.blue, .sige-stat-blue { background: var(--glass-stat-blue); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.purple, .sige-stat-purple { background: var(--glass-stat-purple); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.orange, .sige-stat-orange { background: var(--glass-stat-orange); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.pink, .sige-stat-pink { background: var(--glass-stat-pink); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.cyan, .sige-stat-cyan { background: var(--glass-stat-cyan); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.red, .sige-stat-red { background: var(--glass-stat-red); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.teal, .sige-stat-teal { background: var(--glass-stat-teal); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.indigo, .sige-stat-indigo { background: var(--glass-stat-indigo); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.amber, .sige-stat-amber { background: var(--glass-stat-amber); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.gray, .sige-stat-gray { background: var(--glass-stat-gray); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.sige-stat.black, .sige-stat-black { background: var(--glass-stat-black); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }

.sige-stat-label {
    display: block;
    font-size: 0.7rem;
    opacity: 0.85;
    text-transform: uppercase;
}

.sige-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ====================================
   LIST CARDS
   ==================================== */
/* .list-card e .turma-card são aliases de .sige-card — consolidados aqui */
.sige-card,
.list-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-teal);
    border-radius: var(--radius-lg);
    padding: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: var(--transition-normal);
    border-left: 4px solid var(--sige-primary);
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle);
}

.sige-card:hover,
.list-card:hover {
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-hover);
    transform: translateX(3px);
}

.sige-card.green, .sige-card-green, .list-card.green { border-left-color: var(--color-green); }
.sige-card.blue, .sige-card-blue, .list-card.blue { border-left-color: var(--color-blue); }
.sige-card.purple, .sige-card-purple, .list-card.purple { border-left-color: var(--color-purple); }
.sige-card.orange, .sige-card-orange, .list-card.orange { border-left-color: var(--color-orange); }
.sige-card.cyan, .sige-card-cyan, .list-card.cyan { border-left-color: var(--color-cyan); }
.sige-card.indigo, .sige-card-indigo, .list-card.indigo { border-left-color: var(--color-indigo); }
.sige-card.pink, .sige-card-pink, .list-card.pink { border-left-color: var(--color-pink); }
.sige-card.teal, .sige-card-teal, .list-card.teal { border-left-color: var(--color-teal); }
.sige-card.red, .sige-card-red, .list-card.red { border-left-color: var(--color-red); }
.sige-card.amber, .sige-card-amber, .list-card.amber { border-left-color: #c99a50; }
.sige-card.gray, .sige-card-gray, .list-card.gray { border-left-color: #6b7280; }

/* .card-order é alias de .sige-card-order */
.sige-card-order,
.card-order {
    background: #e5e7eb;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 700;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* .card-photo é alias de .sige-card-photo */
.sige-card-photo,
.card-photo {
    width: 55px;
    height: 55px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--sige-primary);
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--glass-border-teal);
}

.sige-card-photo.green, .card-photo.green { border-color: var(--color-green); }
.sige-card-photo.blue, .card-photo.blue { border-color: var(--color-blue); }
.sige-card-photo.purple, .card-photo.purple { border-color: var(--color-purple); }
.sige-card-photo.orange, .card-photo.orange { border-color: var(--color-orange); }
.sige-card-photo.cyan, .card-photo.cyan { border-color: var(--color-cyan); }
.sige-card-photo.indigo, .card-photo.indigo { border-color: var(--color-indigo); }
.sige-card-photo.teal, .card-photo.teal { border-color: var(--color-teal); }
.sige-card-photo.pink, .card-photo.pink { border-color: var(--color-pink); }
.sige-card-photo.red, .card-photo.red { border-color: var(--color-red); }

/* ====================================
   PHOTO WITH INITIALS FALLBACK
   ==================================== */
.photo-container,
.sige-photo-container {
    position: relative;
    flex-shrink: 0;
}

.photo-initials,
.sige-photo-initials {
    display: none;
    width: 55px;
    height: 55px;
    border-radius: var(--radius-full);
    background: var(--sige-blue);
    border: 2px solid var(--sige-primary);
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.photo-container.show-initials img,
.sige-photo-container.show-initials img {
    display: none !important;
}

.photo-container.show-initials .photo-initials,
.sige-photo-container.show-initials .sige-photo-initials,
.photo-container.show-initials .sige-photo-initials,
.sige-photo-container.show-initials .photo-initials {
    display: flex;
}

/* Tamanhos de iniciais */
.photo-initials.lg,
.sige-photo-initials.lg {
    width: 70px;
    height: 70px;
    font-size: 1.5rem;
}

.photo-initials.xl,
.sige-photo-initials.xl {
    width: 90px;
    height: 90px;
    font-size: 2rem;
}

.photo-initials.xxl,
.sige-photo-initials.xxl {
    width: 110px;
    height: 140px;
    border-radius: var(--radius-lg);
    font-size: 2.5rem;
    letter-spacing: 2px;
}

/* Cores das iniciais */
.photo-initials.green { background: var(--sige-green); border-color: var(--color-green); }
.photo-initials.purple { background: var(--sige-purple); border-color: var(--color-purple); }
.photo-initials.orange { background: var(--sige-orange); border-color: var(--color-orange); }
.photo-initials.cyan { background: var(--sige-cyan); border-color: var(--color-cyan); }
.photo-initials.indigo { background: var(--sige-indigo); border-color: var(--color-indigo); }
.photo-initials.pink { background: var(--sige-pink); border-color: var(--color-pink); }
.photo-initials.teal { background: var(--sige-teal); border-color: var(--color-teal); }

/* Dark mode */
[data-theme="dark"] .photo-initials,
[data-theme="dark"] .sige-photo-initials {
    border-color: #334155;
}

/* Photo container sizes */
.photo-container,
.sige-photo-container {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    display: inline-block;
}

.photo-container-sm { width: 40px !important; height: 40px !important; }
.photo-container-md { width: 55px !important; height: 55px !important; }
.photo-container-lg { width: 70px !important; height: 70px !important; }
.photo-container-xl { width: 90px !important; height: 90px !important; }
.photo-container-xxl { width: 110px !important; height: 140px !important; }

/* Photo img inside container */
.photo-container img,
.photo-container .photo,
.sige-photo-container img,
.sige-photo-container .photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
    border: 2px solid var(--sige-primary) !important;
    display: block !important;
    box-shadow: 0 2px 8px var(--glass-border-teal) !important;
}

.photo-container-xxl img,
.photo-container-xxl .photo {
    border-radius: 12px !important;
}

/* Photo container initials match size */
.photo-container-sm .photo-initials { width: 40px !important; height: 40px !important; font-size: 0.9rem; }
.photo-container-lg .photo-initials { width: 70px !important; height: 70px !important; font-size: 1.5rem; }
.photo-container-xl .photo-initials { width: 90px !important; height: 90px !important; font-size: 2rem; }
.photo-container-xxl .photo-initials { width: 110px !important; height: 140px !important; font-size: 2.5rem; border-radius: 12px !important; }

/* .card-info, .card-name, .card-badges, .card-actions são aliases */
.sige-card-info,
.card-info {
    flex: 1;
    min-width: 0;
}

.sige-card-name,
.card-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sige-card-name a,
.card-name a {
    color: #1f2937;
    text-decoration: none;
}

.sige-card-name a:hover,
.card-name a:hover {
    color: var(--sige-primary);
}

.sige-card-badges,
.card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sige-card-actions,
.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sige-card-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-blue);
    border-radius: var(--radius-lg);
    z-index: 5;
}

/* ====================================
   CONTRACT CARDS (uses sige-card + sige-card-panel)
   ==================================== */

/* Wrapper adjustments for contract cards */
.contrato-card-wrapper {
    cursor: default;
}
.contrato-card-wrapper .sige-card-badges {
    margin-top: 4px;
}

/* Save status indicators */
.contrato-save-status {
    min-width: 90px;
    text-align: right;
}
.contrato-saving {
    font-size: 0.78rem;
    color: #f59e0b;
    font-weight: 500;
    animation: contrato-pulse 1.5s infinite;
}
@keyframes contrato-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.contrato-saving i { margin-right: 4px; }
.contrato-save-ok {
    font-size: 0.78rem;
    color: #16a34a;
    font-weight: 600;
}
.contrato-save-ok i { margin-right: 4px; }
.contrato-save-error {
    font-size: 0.75rem;
    color: #dc2626;
    font-weight: 500;
}
.contrato-save-error i { margin-right: 4px; }

/* Collapsible form panel */
.contrato-card-collapse {
    max-height: 900px;
    overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.3s ease;
    opacity: 1;
}
.contrato-card-collapse.contrato-collapsed {
    max-height: 0;
    opacity: 0;
}

/* Panel wrapper */
.contrato-panel-wrapper {
    margin-top: -4px;
    margin-bottom: 14px;
    background: var(--glass-bg, #ffffff);
    border: 1px solid var(--glass-border-teal, #e2e8f0);
    border-top: none;
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--glass-shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
}

/* ── Mini dashboard strip ── */
.contrato-valor-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--glass-border-teal, #e2e8f0);
}
.contrato-valor-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 0 12px;
}
.contrato-valor-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: white;
    flex-shrink: 0;
}
.contrato-valor-icon.bg-green { background: linear-gradient(135deg, #3d9e78, #2d8a65); }
.contrato-valor-icon.bg-blue { background: linear-gradient(135deg, var(--sige-primary), var(--sige-primary-hover)); }
.contrato-valor-icon.bg-purple { background: linear-gradient(135deg, #8878b8, #7666a8); }
.contrato-valor-data {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.contrato-valor-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 600;
}
.contrato-valor-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.contrato-valor-divider {
    width: 1px;
    height: 36px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* ── Info cards grid (form) ── */
.contrato-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px 20px 20px;
}
.contrato-info-card {
    background: var(--glass-bg, #ffffff);
    border: 1px solid var(--glass-border-teal, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}
.contrato-info-header {
    padding: 10px 16px;
    background: linear-gradient(135deg, #F0F5FB, #e8f4f5);
    border-bottom: 1px solid var(--glass-border-teal, #e2e8f0);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sige-primary-active);
    display: flex;
    align-items: center;
    gap: 8px;
}
.contrato-info-header i {
    font-size: 0.9rem;
    opacity: 0.8;
}
.contrato-info-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contrato-info-body .sige-form-group {
    margin-bottom: 0;
}

/* Inline row for checkbox + PDF link */
.contrato-inline-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.contrato-ver-pdf {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c3aed;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f3e8ff;
    transition: all 0.2s;
}
.contrato-ver-pdf:hover {
    background: #ede9fe;
    color: #6d28d9;
}

/* Ordem de Saque checkbox styled */
.contrato-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    transition: all 0.2s;
    white-space: nowrap;
}
.contrato-checkbox:hover {
    background: #dcfce7;
    border-color: #86efac;
}
.contrato-checkbox input[type="checkbox"] {
    accent-color: #16a34a;
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .contrato-valor-strip {
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px;
    }
    .contrato-valor-item {
        padding: 4px 0;
    }
    .contrato-valor-divider {
        width: 100%;
        height: 1px;
    }
    .contrato-info-grid {
        grid-template-columns: 1fr;
        padding: 12px 14px 16px;
    }
}

/* Dark mode - contract-specific */
[data-theme="dark"] .contrato-panel-wrapper {
    background: var(--glass-bg, #1e293b) !important;
    border-color: var(--glass-border-teal, #334155) !important;
}
[data-theme="dark"] .contrato-valor-strip {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .contrato-valor-number {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .contrato-valor-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .contrato-valor-divider {
    background: #334155 !important;
}
[data-theme="dark"] .contrato-info-card {
    background: var(--glass-bg, #0f172a) !important;
    border-color: var(--glass-border-teal, #334155) !important;
}
[data-theme="dark"] .contrato-info-header {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border-bottom-color: #334155 !important;
    color: #8DBBF0 !important;
}
[data-theme="dark"] .contrato-ver-pdf {
    background: rgba(124,58,237,0.2) !important;
    color: #a78bfa !important;
}
[data-theme="dark"] .contrato-ver-pdf:hover {
    background: rgba(124,58,237,0.3) !important;
}
[data-theme="dark"] .contrato-checkbox {
    background: rgba(22,163,74,0.1) !important;
    border-color: rgba(22,163,74,0.3) !important;
    color: #86efac !important;
}
[data-theme="dark"] .contrato-checkbox:hover {
    background: rgba(22,163,74,0.2) !important;
}

/* ====================================
   BADGES
   ==================================== */
.sige-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--glass-inset-subtle);
}

.sige-badge i { font-size: 0.65rem; }

.sige-badge.blue, .sige-badge-blue { background: #d5eef0; color: var(--sige-primary-active); }
.sige-badge.green, .sige-badge-green { background: #dff0e8; color: #2d8a65; }
.sige-badge.orange, .sige-badge-orange { background: #f5ecd6; color: #8f6930; }
.sige-badge.purple, .sige-badge-purple { background: #eceaf4; color: #5c569e; }
.sige-badge.pink, .sige-badge-pink { background: #f2e5ed; color: #8f4d70; }
.sige-badge.red, .sige-badge-red { background: #f5e0e0; color: #b54e4e; }
.sige-badge.gray, .sige-badge-gray { background: #f3f4f6; color: #4b5563; }
.sige-badge.cyan, .sige-badge-cyan { background: #dff0f4; color: #2d8fa0; }
.sige-badge.teal, .sige-badge-teal { background: #dff0ed; color: #258a7e; }
.sige-badge.indigo, .sige-badge-indigo { background: #e8e8f2; color: #5c569e; }
.sige-badge.amber, .sige-badge-amber { background: #f5ecd6; color: #966b35; }

/* ====================================
   ACTION BUTTONS (Icon Buttons)
   .btn-action é alias de .sige-btn
   ==================================== */
.sige-btn,
.sige-btn-action,
.btn-action {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: var(--transition-normal);
    text-decoration: none;
    color: inherit;
}

.sige-btn:hover,
.sige-btn-action:hover,
.btn-action:hover {
    transform: scale(1.05);
}

.sige-btn-action-disabled {
    background: #e5e7eb;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: auto;
}
.sige-btn-action-disabled:hover { transform: none; }

/* Tamanho compacto para tabelas */
.sige-btn.sm, .btn-action.sm {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
}

/* Variantes de cor — .btn-edit/.btn-delete/etc. são aliases */
.sige-btn.edit, .sige-btn-edit, .btn-edit { background: rgba(213, 238, 240, 0.8); color: var(--sige-primary-active); border: 1px solid var(--glass-border-teal); }
.sige-btn.edit:hover, .sige-btn-edit:hover, .btn-edit:hover { background: var(--sige-primary-active); color: white; }

.sige-btn.delete, .sige-btn-delete, .btn-delete { background: rgba(245, 224, 224, 0.8); color: #b54e4e; border: 1px solid rgba(212, 106, 106, 0.12); }
.sige-btn.delete:hover, .sige-btn-delete:hover, .btn-delete:hover { background: #c25454; color: white; }

.sige-btn.print, .sige-btn-print, .btn-print { background: rgba(223, 240, 232, 0.8); color: #2d8a65; border: 1px solid rgba(61, 158, 120, 0.12); }
.sige-btn.print:hover, .sige-btn-print:hover, .btn-print:hover { background: #2d8a65; color: white; }

.sige-btn.check, .sige-btn-check, .btn-check { background: rgba(223, 240, 232, 0.8); color: #2d8a65; border: 1px solid rgba(61, 158, 120, 0.12); }
.sige-btn.check:hover, .sige-btn-check:hover, .btn-check:hover { background: #2d8a65; color: white; }

.sige-btn.transfer, .sige-btn-transfer, .btn-transfer { background: rgba(236, 234, 244, 0.8); color: #5c569e; border: 1px solid rgba(109, 112, 181, 0.12); }
.sige-btn.transfer:hover, .sige-btn-transfer:hover, .btn-transfer:hover { background: #5c569e; color: white; }

.sige-btn.view, .sige-btn-view, .btn-view { background: rgba(245, 236, 214, 0.8); color: #8f6930; border: 1px solid rgba(201, 154, 80, 0.12); }
.sige-btn.view:hover, .sige-btn-view:hover, .btn-view:hover { background: #966b35; color: white; }

.sige-btn.info, .sige-btn-info, .btn-info { background: rgba(223, 240, 244, 0.8); color: #2d8fa0; border: 1px solid rgba(58, 165, 184, 0.12); }
.sige-btn.info:hover, .sige-btn-info:hover, .btn-info:hover { background: #2d8fa0; color: white; }

/* Botão download (de processos) */
.sige-btn.download, .btn-download { background: rgba(209, 250, 229, 0.8); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.12); }
.sige-btn.download:hover, .btn-download:hover { background: #10b981; color: white; }

/* Add button — maior (45px) */
.sige-btn.add,
.btn-add {
    width: 45px;
    height: 45px;
    border-radius: var(--radius-lg);
    background: var(--layout-header-bg);
    color: white;
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sige-btn.add:hover,
.btn-add:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--shadow-brand);
    color: white;
}

/* ====================================
   TEXT ACTION BUTTONS (with labels)
   ==================================== */
.sige-action-buttons,
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Base de botões com texto e cor
   .sige-btn-save = .sige-btn-green (consolidados)
   .sige-btn-stats = .sige-btn-green (consolidados)
   .sige-btn-report = .sige-btn-purple (consolidados) */
button.sige-btn-action,
.sige-btn-action[class*="sige-btn-blue"],
.sige-btn-action[class*="sige-btn-orange"],
.sige-btn-action[class*="sige-btn-purple"],
.sige-btn-action[class*="sige-btn-green"],
.sige-btn-action[class*="sige-btn-save"],
.sige-btn-blue,
.sige-btn-orange,
.sige-btn-purple,
.sige-btn-green,
.sige-btn-save,
.sige-btn-report,
.sige-btn-stats,
.sige-btn-red {
    width: auto !important;
    height: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-normal);
    text-decoration: none;
    color: white !important;
}

/**
 * ⛔ REPOSIÇÃO das variantes SUAVES em `<button>` (2026-08-16).
 *
 * O bloco acima apanha `button.sige-btn-action` para dar forma aos botões de cor forte
 * (`sige-btn-blue`, `-orange`, …), mas força `color: white !important` e
 * `width/height: auto !important` a **qualquer** `<button>` com `.sige-btn-action`. Quem lhe
 * junta uma variante suave — fundo claro e cor própria **sem** `!important` — fica com
 * **ícone branco sobre fundo claro**, invisível, e deixa de ser quadrado.
 *
 * Medido em 2026-08-16: **83 ocorrências em 27 ficheiros**, todas ilegíveis. Passou
 * despercebido porque com `<a class="sige-btn-action sige-btn-view">` — o padrão de metade
 * das páginas — o selector `button.…` não se aplica e a cor certa vinga.
 *
 * ⚠️ `edit`, `report`, `success` e `danger` **ficam de fora**: têm cor forte própria com
 * `!important` em `theme.css` e já se lêem — repor-lhes a cor suave daria ícone escuro sobre
 * fundo escuro.
 * ⚠️ O **dark mode continua a mandar**: `[data-theme="dark"] .sige-btn-action.sige-btn-X`
 * tem especificidade superior a estas regras.
 */
button.sige-btn-action.sige-btn-view,
button.sige-btn-action.sige-btn-print,
button.sige-btn-action.sige-btn-check,
button.sige-btn-action.sige-btn-transfer,
button.sige-btn-action.sige-btn-info,
button.sige-btn-action.sige-btn-delete {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center;
}

/* As mesmas cores das variantes (ver acima) — aqui só com o peso necessário para vencer o
   `color: white !important` do bloco anterior. */
button.sige-btn-action.sige-btn-view   { color: #8f6930 !important; }
button.sige-btn-action.sige-btn-print,
button.sige-btn-action.sige-btn-check  { color: #2d8a65 !important; }
button.sige-btn-action.sige-btn-transfer { color: #5c569e !important; }
button.sige-btn-action.sige-btn-info   { color: #2d8fa0 !important; }
button.sige-btn-action.sige-btn-delete { color: #b54e4e !important; }

/* No hover o fundo passa a sólido escuro — o texto volta a branco. */
button.sige-btn-action.sige-btn-view:hover,
button.sige-btn-action.sige-btn-print:hover,
button.sige-btn-action.sige-btn-check:hover,
button.sige-btn-action.sige-btn-transfer:hover,
button.sige-btn-action.sige-btn-info:hover,
button.sige-btn-action.sige-btn-delete:hover { color: #fff !important; }

/* Cores — aliases consolidados */
.sige-btn-blue,
.sige-btn-action.sige-btn-blue {
    background: linear-gradient(135deg, var(--sige-primary), var(--sige-primary-hover)) !important;
}

.sige-btn-orange,
.sige-btn-action.sige-btn-orange {
    background: linear-gradient(135deg, #c99a50, #b38040) !important;
}

/* .sige-btn-report é alias de .sige-btn-purple */
.sige-btn-purple,
.sige-btn-action.sige-btn-purple,
.sige-btn-report {
    background: linear-gradient(135deg, #8878b8, #7666a8) !important;
}

/* .sige-btn-save e .sige-btn-stats são aliases de .sige-btn-green */
.sige-btn-green,
.sige-btn-action.sige-btn-green,
.sige-btn-save,
.sige-btn-action.sige-btn-save,
.sige-btn-stats {
    background: linear-gradient(135deg, #3d9e78, #2d8a65) !important;
}

.sige-btn-red {
    background: linear-gradient(135deg, #d46a6a, #c25454) !important;
}

/* Hover unificado para todos */
button.sige-btn-action:hover,
.sige-btn-blue:hover,
.sige-btn-orange:hover,
.sige-btn-purple:hover,
.sige-btn-green:hover,
.sige-btn-save:hover,
.sige-btn-report:hover,
.sige-btn-stats:hover,
.sige-btn-red:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ====================================
   EMPTY STATE
   ==================================== */
.sige-empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    background: var(--glass-bg-subtle);
    border: 1px dashed var(--glass-border-teal);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-inset-subtle);
}

.sige-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
    display: block;
}

.sige-empty h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.sige-empty p {
    font-size: 0.9rem;
    margin: 0;
}

/* ====================================
   LOADING STATE
   ==================================== */
.sige-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--sige-primary);
}

.sige-loading i {
    font-size: 2rem;
    margin-bottom: 12px;
}

/* ====================================
   SEARCH BOX
   ==================================== */
.sige-search-box {
    background: #f8fafc;
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.sige-search-hint {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 8px;
}

/* ====================================
   TOOLBAR - Search, Stats & Actions
   ==================================== */
.sige-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 16px;
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    flex-wrap: wrap;
    border: 1px solid var(--glass-border-teal);
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle);
}

.sige-toolbar-search {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border-teal);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    transition: var(--transition-normal);
}

.sige-toolbar-search:focus-within {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px var(--glass-border-teal);
}

.sige-toolbar-search i {
    color: #94a3b8;
    font-size: 0.9rem;
}

.sige-search-input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.9rem;
    color: #334155;
}

.sige-search-input::placeholder {
    color: #94a3b8;
}

.sige-toolbar-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sige-mini-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border-teal);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    font-size: 0.85rem;
    color: #475569;
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle);
}

.sige-mini-stat i {
    color: var(--color-blue);
    font-size: 0.9rem;
}

.sige-mini-stat span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-blue);
}

.sige-mini-stat small {
    color: #64748b;
    font-size: 0.75rem;
}

.sige-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .sige-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .sige-toolbar-search {
        width: 100%;
        min-width: 100%;
        order: 1;
    }

    .sige-toolbar-stats {
        width: 100%;
        justify-content: center;
        order: 2;
        /* Sem `wrap`, N chips numa linha só ficam esmagados a ~70px cada e o
           rótulo é cortado a meio da palavra (medido a 390px com 4 chips). */
        flex-wrap: wrap;
        gap: 8px;
    }

    .sige-toolbar-actions {
        width: 100%;
        justify-content: center;
        order: 3;
    }

    .sige-toolbar-actions button,
    .sige-toolbar-actions .btn,
    .sige-toolbar-actions a {
        width: 100%;
        justify-content: center;
    }

    .sige-mini-stat {
        /* `flex: 1` repartia a linha por TODOS os chips (4 chips = 70px cada).
           Com base de ~metade da linha ficam 2 por linha e o rótulo cabe. */
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-width: 0;
    }

    /* Campos de filtro da barra: a barra já é `column` + `stretch` neste
       ecrã, mas um `max-width` (quase sempre INLINE, logo imbatível sem
       !important) prende-os a ~180px, deixando a linha ragged e o texto
       da opção cortado. */
    .sige-toolbar > select,
    .sige-toolbar > input,
    .sige-toolbar > .sige-form-input,
    .sige-toolbar > .sige-form-group,
    .sige-toolbar > .sige-auto-searchable,
    .sige-toolbar > div:not(.sige-toolbar-search):not(.sige-toolbar-stats):not(.sige-toolbar-actions) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
    .sige-toolbar {
        gap: 10px;
        padding: 10px;
    }

    .sige-toolbar-search {
        padding: 10px 12px;
    }

    .sige-search-input {
        font-size: 0.85rem;
    }

    .sige-mini-stat {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .sige-mini-stat span {
        font-size: 1rem;
    }

    .sige-mini-stat small {
        font-size: 0.7rem;
    }
}

/* ====================================
   TAB NAVIGATION
   ==================================== */
.sige-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sige-tab {
    padding: 10px 20px;
    border: 2px solid var(--glass-border-teal);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--glass-inset-subtle);
}

.sige-tab:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
}

.sige-tab.active {
    background: var(--layout-header-bg);
    border-color: var(--glass-border-strong);
    color: white;
    box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sige-tab i {
    margin-right: 6px;
}

.sige-tab-badge {
    background: #d46a6a;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
}

.sige-tab.active .sige-tab-badge {
    background: white;
    color: var(--sige-primary);
}

/* Tab Panels */
.sige-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.sige-tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form Section Headers */
.sige-form-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}

.sige-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sige-form-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sige-form-section-title i {
    color: var(--sige-primary);
}

/* Required Field Indicator */
.sige-required-indicator {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.8rem;
    color: #64748b;
    border: 1px solid #e5e7eb;
}

.sige-required-indicator span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sige-required-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.sige-required-dot.required {
    background: #d46a6a;
}

.sige-required-dot.optional {
    background: #3d9e78;
}

/* Field Labels with Required Indicator */
.sige-field-required label::after {
    content: " *";
    color: #d46a6a;
    font-weight: 600;
}

.sige-field-optional label::after {
    content: " (opcional)";
    color: #3d9e78;
    font-size: 0.75rem;
    font-weight: 400;
}

/* Tab Navigation on Mobile */
@media (max-width: 768px) {
    .sige-tabs {
        /* `nowrap` + scroll escondia tabs SEM qualquer indicação visual: medido a
           390px, a Formação tinha 329px fora do ecrã (2 das 4 tabs invisíveis) e as
           Apresentações 309px. Com `wrap` ficam todas à vista; o máximo em todo o
           Sistema são 4 tabs, logo no pior caso 2 linhas (~95px em vez de 45px).
           O `overflow-x` fica como rede para um rótulo isolado maior que o ecrã. */
        overflow-x: auto;
        flex-wrap: wrap;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .sige-tab {
        /* 2 por linha (grelha previsível, igual à dos contadores) em vez de wrap
           guloso, que com 4 tabs dava 3 linhas irregulares (142px). */
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        text-align: center;
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .sige-tab span.tab-text-full {
        display: none;
    }

    .sige-tab span.tab-text-short {
        display: inline;
    }
}

@media (min-width: 769px) {
    .sige-tab span.tab-text-short {
        display: none;
    }
}

/* ====================================
   CARDS GRID
   ==================================== */
.sige-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 15px;
}

/* ====================================
   TURMA CARD (GRID LAYOUT)
   ==================================== */
/* .sige-turma-card e .turma-card herdam de .sige-card com cor purple */
.sige-turma-card,
.turma-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-teal);
    border-radius: var(--radius-lg);
    padding: 15px;
    transition: var(--transition-normal);
    border-left: 4px solid var(--color-purple);
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle);
}

.sige-turma-card:hover,
.turma-card:hover {
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-hover);
    transform: translateX(3px);
}

.sige-turma-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sige-turma-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.sige-turma-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
}

.sige-turma-stat {
    text-align: center;
}

.sige-turma-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sige-primary);
}

.sige-turma-stat-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
}

/* ====================================
   FORM SELECT IN CARDS
   ==================================== */
.sige-card-select {
    padding: 8px 12px;
    border: 1px solid var(--glass-border-teal);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    min-width: 100px;
    background: var(--glass-bg-subtle);
    backdrop-filter: var(--glass-true-blur);
    -webkit-backdrop-filter: var(--glass-true-blur);
    box-shadow: var(--glass-inset-subtle);
    transition: var(--transition-normal);
}

.sige-card-select:focus {
    outline: none;
    border-color: var(--sige-primary);
    box-shadow: 0 0 0 2px var(--glass-border-strong), var(--glass-inset-subtle);
    background: rgba(255, 255, 255, 0.70);
}

.sige-card-select option {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 8px 12px;
    font-weight: 500;
    border-bottom: 1px solid var(--glass-border);
}

.sige-card-select option:hover,
.sige-card-select option:checked {
    background: var(--glass-border-teal);
}

/* ====================================
   INFO BOX
   ==================================== */
.sige-info-box {
    background: rgba(240, 249, 255, 0.8);
    border: 1px solid rgba(186, 230, 253, 0.7);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0369a1;
    font-size: 0.9rem;
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle);
}

.sige-info-box.warning {
    background: rgba(254, 243, 199, 0.8);
    border-color: rgba(252, 211, 77, 0.7);
    color: #92400e;
}

.sige-info-box.success {
    background: rgba(209, 250, 229, 0.8);
    border-color: rgba(110, 231, 183, 0.7);
    color: #257555;
}

.sige-info-box.error {
    background: rgba(254, 226, 226, 0.8);
    border-color: rgba(252, 165, 165, 0.7);
    color: #a84545;
}

/* ====================================
   DATA TABLE (COMPACT)
   ==================================== */
.sige-table {
    width: 100%;
    border-collapse: collapse;
}

.sige-table th,
.sige-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.sige-table th {
    background: var(--glass-bg);
    font-weight: 600;
    color: #374151;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--glass-border-teal);
}

.sige-table tr:hover {
    background: var(--glass-bg-teal);
}

/* ====================================
   RESPONSIVE
   ==================================== */
@media (max-width: 768px) {
    .sige-card,
    .list-card {
        flex-wrap: wrap;
    }

    .sige-card-info,
    .card-info {
        flex: 1 1 calc(100% - 100px);
    }

    .sige-card-actions,
    .card-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 10px;
    }

    .sige-stats {
        display: none;
    }

    .sige-grid,
    .sige-grid-cards {
        grid-template-columns: 1fr;
    }

    .sige-header {
        padding: 15px;
    }

    .sige-header .header-icon {
        font-size: 2rem;
    }

    .sige-header .header-title {
        font-size: 1.2rem;
    }

    .sige-card-panel {
        border-radius: 10px;
    }
}

/* ====================================
   CLASSES BASE REUTILIZÁVEIS
   Card Panel, Icon Circle, Grid Cards
   ==================================== */

/* Card com Header + Body (substitui data-card, info-card, notas-classe-card, form-section, etc.) */
.sige-card-panel {
    background: var(--glass-bg, white);
    border: 1px solid var(--glass-border-teal, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--glass-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sige-card-panel:hover {
    box-shadow: var(--glass-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.08));
    transform: translateY(-1px);
}

.sige-card-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid var(--glass-border-teal, #e2e8f0);
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
}

.sige-card-panel-header.header-primary {
    background: linear-gradient(135deg, var(--sige-primary), var(--sige-primary-active));
    color: white;
    border-bottom-color: transparent;
}

.sige-card-panel-header.header-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-bottom-color: transparent;
}

.sige-card-panel-body {
    padding: 16px 18px;
}

.sige-card-panel-body.compact {
    padding: 4px 0;
}

/* Ícone circular reutilizável (substitui stat-icon, card-icon, etc.) */
.sige-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.sige-icon-circle.sm {
    width: 32px;
    height: 32px;
}

.sige-icon-circle.md {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.sige-icon-circle.lg {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
}

/* Ícone quadrado (usado em headers de card-panel) */
.sige-icon-square {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
}

.sige-icon-square.md {
    width: 36px;
    height: 36px;
}

.sige-icon-square.primary {
    background: linear-gradient(135deg, var(--sige-primary), var(--sige-primary-active));
    color: white;
}

.sige-icon-square.green {
    background: linear-gradient(135deg, #3d9e78, #2d8a65);
    color: white;
}

.sige-icon-square.purple {
    background: linear-gradient(135deg, #8878b8, #7666a8);
    color: white;
}

.sige-icon-square.orange {
    background: linear-gradient(135deg, #c99a50, #b38040);
    color: white;
}

/* Cores de fundo suave para ícones */
.sige-icon-circle.bg-blue,
.sige-icon-square.bg-blue {
    background: linear-gradient(135deg, #d5eef0, #bfdbfe);
    color: var(--sige-primary-active);
}

.sige-icon-circle.bg-green,
.sige-icon-square.bg-green {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.sige-icon-circle.bg-purple,
.sige-icon-square.bg-purple {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #7c3aed;
}

.sige-icon-circle.bg-orange,
.sige-icon-square.bg-orange {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}

.sige-icon-circle.bg-red,
.sige-icon-square.bg-red {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}

/* Grid de cards reutilizável */
.sige-grid-cards {
    display: grid;
    gap: 16px;
}

.sige-grid-cards.cols-auto-sm {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.sige-grid-cards.cols-auto-md {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.sige-grid-cards.cols-auto-lg {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.sige-grid-cards.cols-auto-xl {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.sige-grid-cards.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.sige-grid-cards.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sige-grid-cards.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .sige-grid-cards.cols-3,
    .sige-grid-cards.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sige-grid-cards {
        grid-template-columns: 1fr !important;
    }
}

/* Card-panel row (linha de dados dentro de card-panel-body) */
.sige-card-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.sige-card-panel-row:last-child {
    border-bottom: none;
}

/* Dark Mode - Classes Base */
[data-theme="dark"] .sige-card-panel {
    background: var(--glass-bg, #1e293b);
    border-color: var(--glass-border-teal, #334155);
}

[data-theme="dark"] .sige-card-panel:hover {
    box-shadow: var(--glass-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.3));
}

[data-theme="dark"] .sige-card-panel-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: var(--glass-border-teal, #334155);
    color: #f1f5f9;
}

[data-theme="dark"] .sige-card-panel-body {
    color: #e2e8f0;
}

[data-theme="dark"] .sige-card-panel-row {
    border-color: #334155;
}

/* ====================================
   ZEBRA STRIPING / ALTERNATING COLORS
   ==================================== */

/* Explicit zebra classes with background + border */
.sige-card.sige-card-blue {
    border-left-color: var(--color-blue);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.sige-card.sige-card-teal {
    border-left-color: var(--color-green);
    background: linear-gradient(135deg, #f9fefb 0%, #f3faf5 100%);
}

/* Alternative color pairs */
.sige-card.sige-card-white {
    border-left-color: var(--color-blue);
    background: #ffffff;
}

.sige-card.sige-card-gray-light {
    border-left-color: var(--color-indigo);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Blue/Slate pair */
.sige-card.sige-card-blue-soft {
    border-left-color: var(--color-blue);
    background: linear-gradient(135deg, #F0F5FB 0%, #e0f2fe 100%);
}

.sige-card.sige-card-slate-soft {
    border-left-color: var(--color-indigo);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Green pair for variety */
.sige-card.sige-card-green-soft {
    border-left-color: var(--color-green);
    background: linear-gradient(135deg, #ecfdf5 0%, #dff0e8 100%);
}

/* Purple pair */
.sige-card.sige-card-purple-soft {
    border-left-color: var(--color-purple);
    background: linear-gradient(135deg, #f5f3ff 0%, #eceaf4 100%);
}

/* Orange pair */
.sige-card.sige-card-orange-soft {
    border-left-color: var(--color-orange);
    background: linear-gradient(135deg, #fffbeb 0%, #f5ecd6 100%);
}

/* Hover effects for zebra cards */
.sige-card.sige-card-blue:hover,
.sige-card.sige-card-teal:hover,
.sige-card.sige-card-blue-soft:hover,
.sige-card.sige-card-slate-soft:hover,
.sige-card.sige-card-green-soft:hover,
.sige-card.sige-card-purple-soft:hover,
.sige-card.sige-card-orange-soft:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

/* ====================================
   UTILITIES
   ==================================== */
.sige-mt-1 { margin-top: 0.25rem; }
.sige-mt-2 { margin-top: 0.5rem; }
.sige-mt-3 { margin-top: 0.75rem; }
.sige-mt-4 { margin-top: 1rem; }
.sige-mb-1 { margin-bottom: 0.25rem; }
.sige-mb-2 { margin-bottom: 0.5rem; }
.sige-mb-3 { margin-bottom: 0.75rem; }
.sige-mb-4 { margin-bottom: 1rem; }

.sige-text-center { text-align: center; }
.sige-text-right { text-align: right; }
.sige-text-left { text-align: left; }

.sige-flex { display: flex; }
.sige-flex-wrap { flex-wrap: wrap; }
.sige-items-center { align-items: center; }
.sige-justify-between { justify-content: space-between; }
.sige-justify-end { justify-content: flex-end; }
.sige-gap-2 { gap: 0.5rem; }
.sige-gap-3 { gap: 0.75rem; }
.sige-gap-4 { gap: 1rem; }

/* ====================================
   MODAL MODERNO
   ==================================== */
.sige-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: var(--glass-true-blur-overlay);
    -webkit-backdrop-filter: var(--glass-true-blur-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.sige-modal-overlay.hidden {
    display: none;
}

.sige-modal {
    background: var(--glass-bg-strong);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg), var(--glass-inset);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

/* Tamanhos: xs(30%) sm(40%) md(50%) lg(60%) xl(70%) xxl(85%) full(95%) */
.sige-modal.sige-modal-xs  { width: 30% !important; max-width: 30% !important; min-width: 280px !important; }
.sige-modal.sige-modal-sm  { width: 40% !important; max-width: 40% !important; min-width: 300px !important; }
.sige-modal.sige-modal-md  { width: 50% !important; max-width: 50% !important; min-width: 400px !important; }
.sige-modal.sige-modal-lg  { width: 60% !important; max-width: 60% !important; min-width: 500px !important; }
.sige-modal.sige-modal-xl  { width: 70% !important; max-width: 70% !important; min-width: 600px !important; }
.sige-modal.sige-modal-xxl { width: 85% !important; max-width: 85% !important; min-width: 800px !important; }
.sige-modal.sige-modal-full{ width: 95% !important; max-width: 95% !important; }

/* ====================================
   FIELDSET & CHECKBOX GRID
   ==================================== */
.sige-fieldset {
    border: 1px solid var(--glass-border-teal);
    border-radius: var(--radius-md);
    padding: 15px;
    background: var(--glass-bg);
    box-shadow: var(--glass-inset-subtle);
}

.sige-fieldset legend {
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
    padding: 0 8px;
}

.sige-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sige-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-teal);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.sige-checkbox-item:hover {
    border-color: var(--sige-purple);
    background: #faf5ff;
}

.sige-checkbox-item input[type="checkbox"] {
    accent-color: var(--sige-purple);
}

.sige-checkbox-item input[type="checkbox"]:checked + span {
    color: var(--sige-purple);
    font-weight: 500;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
}

/* Modal Header */
.sige-modal-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    flex-shrink: 0;
}

/* Modal Header Colors - UNIFIED with system theme (Blue Primary) + Glass */
.sige-modal-header,
.sige-modal-header-green,
.sige-modal-header-blue,
.sige-modal-header-purple,
.sige-modal-header-orange,
.sige-modal-header-teal,
.sige-modal-header-indigo {
    background: var(--layout-header-bg);
    border-bottom: 1px solid var(--glass-border-strong);
}

/* Special case: Error/Danger modal keeps red */
.sige-modal-header-red { background: var(--sige-red); }

.sige-modal-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sige-modal-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.sige-modal-title-group {
    display: flex;
    flex-direction: column;
}

.sige-modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.sige-modal-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.95;
    margin: 4px 0 0 0;
}

.sige-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--glass-border-strong);
    background: rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
    font-size: 1rem;
}

.sige-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--glass-border-strong);
    transform: rotate(90deg);
}

/* Modal Body */
.sige-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/*
 * Um `<form>` que envolve o CORPO e o RODAPÉ de um modal tem de ser ele próprio a coluna
 * flex — o `.sige-modal` é `display:flex; flex-direction:column`, e sem isto o form entra
 * como um item de altura livre: o corpo **não rola** e o rodapé **cai fora** do modal
 * (medido: modal a acabar aos 723px com o rodapé aos 961–1043 → botão inalcançável).
 *
 * ⚠️ `:not(.sige-modal-body)` é essencial — a esmagadora maioria dos formulários do
 * Sistema é o próprio modal (`<form class="sige-modal">`) ou o próprio corpo
 * (`<form class="sige-modal-body">`), e esses não podem virar contentor flex.
 */
.sige-modal > form:not(.sige-modal-body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Form Elements */
.sige-form-group {
    margin-bottom: 10px;
}

.sige-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.sige-form-label i {
    color: var(--color-blue);
    margin-right: 6px;
    font-size: 0.8rem;
}

/* ─── Marcadores de campo (gerados por form_elements.php) ───
   * = obrigatório · cadeado = só o Administrador (Master) altera.
   Ver shared/FRONTEND_COMMON.md § "Marcadores de campo". */
.sige-form-label .sige-form-required {
    color: var(--color-red);
    font-weight: 700;
    margin-left: 2px;
}

.sige-form-label i.sige-form-master,
.sige-checkbox-text i.sige-form-master {
    color: var(--color-orange);
    margin-left: 4px;
    margin-right: 0;
    font-size: 0.7rem;
    cursor: help;
}

/* Campo bloqueado por não ser Master (aplicado por campos_master.js) */
.sige-form-group.campo-bloqueado-master .sige-form-input,
.sige-form-group.campo-bloqueado-master .sige-form-textarea,
.sige-form-group.campo-bloqueado-master .sige-searchable-input {
    background: var(--ui-input-bg);
    opacity: 0.7;
    cursor: not-allowed;
}

/* Aviso de formulário reservado ao Master (data-form-master) */
.sige-form-aviso-master {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.8rem;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
    border-left: 3px solid var(--color-orange);
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.sige-form-aviso-master i {
    color: var(--color-orange);
    margin-top: 0.15rem;
}

/* Legenda dos marcadores (opcional, por formulário) */
.sige-form-legenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.sige-form-legenda .sige-form-required { color: var(--color-red); }
.sige-form-legenda i.sige-form-master { color: var(--color-orange); }

.sige-form-input,
.sige-form-select,
.sige-form-textarea {
    width: 100%;
    /* border-box: sem isto o padding+borda somam-se ao width:100% e o campo
       transborda a sua coluna do grid ~26px (bug visível em todos os formulários,
       sobretudo na última coluna e em colunas estreitas) — corrigido 2026-07-25 */
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--input-border);
    border-radius: var(--input-radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--input-text);
    background: var(--input-bg);
    transition: var(--input-transition);
    box-shadow: var(--glass-inset-subtle);
}

.sige-form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.sige-form-select option {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: var(--layout-content-text, #111827);
    padding: 8px 12px;
    font-weight: 500;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.15s ease;
}

.sige-form-select option:hover,
.sige-form-select option:checked {
    background: var(--glass-border-teal);
}

.sige-form-input:focus,
.sige-form-select:focus,
.sige-form-textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    background: var(--input-bg-focus);
    box-shadow: 0 0 0 var(--input-ring-size) var(--input-ring), var(--glass-inset-subtle);
}

.sige-form-input::placeholder {
    color: var(--input-placeholder);
    font-weight: 400;
}

.sige-form-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    margin-bottom: 10px;
}

.sige-form-col-1  { grid-column: span 1; }
.sige-form-col-2  { grid-column: span 2; }
.sige-form-col-3  { grid-column: span 3; }
.sige-form-col-4  { grid-column: span 4; }
.sige-form-col-5  { grid-column: span 5; }
.sige-form-col-6  { grid-column: span 6; }
.sige-form-col-7  { grid-column: span 7; }
.sige-form-col-8  { grid-column: span 8; }
.sige-form-col-9  { grid-column: span 9; }
.sige-form-col-10 { grid-column: span 10; }
.sige-form-col-11 { grid-column: span 11; }
.sige-form-col-12 { grid-column: span 12; }

.sige-form-row .sige-form-group {
    margin-bottom: 0;
}

/* Modal Footer */
.sige-modal-footer {
    padding: 16px 24px;
    background: var(--glass-bg-subtle);
    border-top: 1px solid var(--glass-border-teal);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* Modal Footer with Tab Navigation */
.sige-modal-footer.sige-footer-with-nav {
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.sige-tab-nav-footer {
    flex: 1;
}

.sige-tab-nav-footer:last-child {
    text-align: right;
}

.sige-modal-footer-actions {
    display: flex;
    gap: 10px;
}

/* Navigation Button */
.sige-btn-nav {
    padding: 10px 18px;
    border: 2px solid var(--sige-primary);
    border-radius: var(--radius-md, 8px);
    background: white;
    color: var(--sige-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sige-btn-nav:hover {
    background: var(--sige-primary);
    color: white;
}

.sige-btn-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Botao Cancelar - Estilo Danger (Vermelho) + Glass */
.sige-btn-cancel,
button.sige-btn-cancel,
.sige-btn-primary.sige-btn-cancel {
    padding: 12px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, rgba(212, 106, 106, 0.92) 0%, rgba(220, 38, 38, 0.96) 100%) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-normal);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sige-btn-cancel:hover,
button.sige-btn-cancel:hover,
.sige-btn-primary.sige-btn-cancel:hover {
    background: linear-gradient(135deg, #c25454 0%, #a84545 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 106, 106, 0.4) !important;
}

/* Botao Salvar/Submit - Estilo Success (Verde) + Glass */
.sige-btn-submit,
button.sige-btn-submit,
.sige-btn-primary.sige-btn-submit {
    padding: 12px 26px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, rgba(61, 158, 120, 0.92) 0%, rgba(5, 150, 105, 0.96) 100%) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-normal);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sige-btn-submit:hover,
button.sige-btn-submit:hover,
.sige-btn-primary.sige-btn-submit:hover {
    background: linear-gradient(135deg, #2d8a65 0%, #257555 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(61, 158, 120, 0.4) !important;
}

.sige-btn-submit i,
.sige-btn-cancel i {
    font-size: 0.9rem;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .sige-modal-overlay {
        position: fixed;
        align-items: flex-start;
        overflow-y: auto;
        padding: 20px 5%;
    }

    .sige-modal,
    .sige-modal[class*="sige-modal-"] {
        width: 90% !important;
        max-width: 90% !important;
        min-width: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 16px !important;
    }

    .sige-modal-header {
        padding: 12px 14px;
        border-radius: 16px 16px 0 0;
    }

    .sige-modal-header-content {
        gap: 10px;
    }

    .sige-modal-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .sige-modal-title {
        font-size: 0.95rem;
    }

    .sige-modal-subtitle {
        font-size: 0.72rem;
    }

    .sige-modal-close {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .sige-modal-body {
        padding: 14px;
        max-height: none;
        overflow: visible;
    }

    .sige-modal-footer {
        padding: 10px 14px;
        gap: 8px;
        flex-direction: row;
        justify-content: flex-end;
        border-radius: 0 0 16px 16px;
    }

    .sige-modal-footer-actions {
        gap: 8px;
    }

    .sige-btn-cancel,
    .sige-btn-submit {
        padding: 8px 14px !important;
        font-size: 0.75rem !important;
        gap: 5px;
    }

    .sige-btn-submit i,
    .sige-btn-cancel i {
        font-size: 0.7rem;
    }

    .sige-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sige-form-col-1, .sige-form-col-2, .sige-form-col-3,
    .sige-form-col-4, .sige-form-col-5, .sige-form-col-6,
    .sige-form-col-7, .sige-form-col-8, .sige-form-col-9,
    .sige-form-col-10, .sige-form-col-11, .sige-form-col-12 {
        grid-column: span 1;
    }

    .sige-form-row .sige-form-group {
        margin-bottom: 10px;
    }

    .sige-modal-footer.sige-footer-with-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sige-modal-footer.sige-footer-with-nav .sige-tab-nav-footer {
        order: 2;
        flex: 0 0 50%;
    }

    .sige-modal-footer.sige-footer-with-nav .sige-modal-footer-actions {
        order: 1;
        flex: 0 0 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    .sige-btn-cancel,
    .sige-btn-submit {
        width: 100%;
        justify-content: center;
    }

    .sige-modal-footer.sige-footer-with-nav .sige-btn-cancel,
    .sige-modal-footer.sige-footer-with-nav .sige-btn-submit {
        width: auto;
    }
}

/* ====================================
   TOAST NOTIFICATIONS (Mensagens)
   ==================================== */
.sige-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    min-width: 320px;
    max-width: 420px;
    background: var(--glass-bg-strong);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg), var(--glass-inset);
    display: none;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    z-index: 5000;
    animation: toastSlideIn 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
    overflow: hidden;
}

.sige-toast.alert-message_active {
    display: flex !important;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Toast Icon */
.sige-toast-icon {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.sige-toast-icon-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3d9e78, #2d8a65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    animation: iconPop 0.5s cubic-bezier(0.21, 1.02, 0.73, 1) 0.2s both;
}

.sige-toast-icon-circle.sige-toast-icon-error {
    background: linear-gradient(135deg, #d46a6a, #c25454);
}

@keyframes iconPop {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.sige-toast-icon-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    border: 3px solid #3d9e78;
    border-radius: 50%;
    animation: ringPulse 1.5s ease-out infinite;
    opacity: 0;
}

.sige-toast-icon-ring.sige-toast-ring-error {
    border-color: #d46a6a;
}

@keyframes ringPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Toast Content */
.sige-toast-content {
    flex: 1;
    min-width: 0;
}

.sige-toast-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.sige-toast-success .sige-toast-title {
    color: #2d8a65;
}

.sige-toast-error .sige-toast-title {
    color: #c25454;
}

.sige-toast-message {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
    line-height: 1.4;
}

/* Toast Close Button */
.sige-toast-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
    font-size: 0.8rem;
}

.sige-toast-close:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Toast Progress Bar */
.sige-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
}

.sige-toast-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    animation: progressShrink 5s linear forwards;
}

.sige-toast-progress-success::after {
    background: linear-gradient(90deg, #3d9e78, #2d8a65);
}

.sige-toast-progress-error::after {
    background: linear-gradient(90deg, #d46a6a, #c25454);
}

@keyframes progressShrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* ====================================
   CONFIRMATION DIALOG (Pergunta)
   ==================================== */
.sige-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: var(--glass-true-blur-overlay);
    -webkit-backdrop-filter: var(--glass-true-blur-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7000;
    padding: 20px;
}

.sige-confirm-overlay.hidden {
    display: none;
}

.sige-confirm-dialog {
    background: var(--glass-bg-strong);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg), var(--glass-inset);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: confirmBounce 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
}

@keyframes confirmBounce {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes confirmSlideOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
}

.sige-confirm-header {
    background: var(--layout-header-bg);
    padding: 30px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--glass-border-strong);
}

.sige-confirm-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--glass-border-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconBounce 0.6s ease 0.2s both;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.sige-confirm-icon i {
    color: white;
    font-size: 2.5rem;
    animation: questionMark 1s ease infinite;
}

@keyframes iconBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes questionMark {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.sige-confirm-body {
    padding: 28px 24px;
    text-align: center;
}

.sige-confirm-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.sige-confirm-message {
    font-size: 1rem;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

.sige-confirm-footer {
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.sige-confirm-btn {
    flex: 1;
    max-width: 160px;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-normal);
}

.sige-confirm-btn-cancel {
    background: var(--glass-bg);
    color: #4b5563;
    border: 2px solid var(--glass-border-teal);
    box-shadow: var(--glass-inset-subtle);
}

.sige-confirm-btn-cancel:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
}

.sige-confirm-btn-yes {
    background: var(--layout-header-bg);
    color: white;
    border: 1px solid var(--glass-border-strong);
    box-shadow: 0 4px 12px var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sige-confirm-btn-yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-brand);
}

.sige-confirm-btn i {
    font-size: 0.9rem;
}

/* Responsive Toast */
@media (max-width: 768px) {
    .sige-toast {
        left: 16px;
        right: 16px;
        min-width: auto;
        max-width: none;
    }

    .sige-confirm-dialog {
        max-width: 90%;
    }

    .sige-confirm-footer {
        flex-direction: column;
    }

    .sige-confirm-btn {
        max-width: 100%;
    }
}

/* ====================================
   LOADER / JANELA DE ESPERA MODERNA
   ==================================== */
.sige-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.95) 100%);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 8000;
    animation: loaderFadeIn 0.3s ease;
}

.sige-loader-overlay[style*="display: block"],
.sige-loader-overlay[style*="display:block"] {
    display: flex !important;
}

@keyframes loaderFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sige-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Animação dos círculos */
.sige-loader-animation {
    position: relative;
    width: 120px;
    height: 120px;
}

.sige-loader-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--sige-primary);
    animation: loaderSpin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.sige-loader-circle-2 {
    width: 85%;
    height: 85%;
    top: 7.5%;
    left: 7.5%;
    border-top-color: #6FA8EE;
    animation-duration: 2s;
    animation-direction: reverse;
}

.sige-loader-circle-3 {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-top-color: #8878b8;
    animation-duration: 1s;
}

@keyframes loaderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ícone central */
.sige-loader-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--sige-primary), #6FA8EE);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: loaderPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 30px var(--shadow-brand);
}

.sige-loader-icon i {
    color: white;
    font-size: 1.4rem;
}

@keyframes loaderPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 30px var(--shadow-brand);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 50px var(--shadow-brand);
    }
}

/* Texto */
.sige-loader-text {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sige-loader-message {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

/* Pontos animados */
.sige-loader-dots {
    display: flex;
    gap: 4px;
    padding-left: 2px;
}

.sige-loader-dots span {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: loaderDots 1.4s ease-in-out infinite;
}

.sige-loader-dots span:nth-child(1) { animation-delay: 0s; }
.sige-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.sige-loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loaderDots {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Barra de progresso */
.sige-loader-progress {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.sige-loader-progress-bar {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, var(--sige-primary), #6FA8EE, #8878b8);
    border-radius: 2px;
    animation: loaderProgress 1.5s ease-in-out infinite;
}

@keyframes loaderProgress {
    0% {
        transform: translateX(-100%);
        width: 40%;
    }
    50% {
        width: 60%;
    }
    100% {
        transform: translateX(350%);
        width: 40%;
    }
}

/* ====================================
   BACKWARD COMPATIBILITY
   Keep old class names working
   ==================================== */
.page-header { text-align: center; padding: 20px; border-radius: 12px; color: white; margin-bottom: 20px; }
.page-header .header-icon { font-size: 2.5rem; margin-bottom: 8px; }
.page-header .header-title { font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; margin: 0; text-transform: uppercase; }
.page-header .header-subtitle { font-size: 0.9rem; opacity: 0.9; margin: 5px 0 0 0; }
/* Legacy Header Colors - UNIFIED with system theme (Blue Primary) + Glass */
.header-green,
.header-blue,
.header-purple,
.header-orange,
.header-cyan,
.header-indigo,
.header-pink,
.header-teal { background: var(--layout-header-bg); border: 1px solid var(--glass-border-strong); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.08); }

/* Special case: Error/Danger header keeps red */
.header-red { background: var(--sige-red); }

.stats-container { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.stat-item { border-radius: 10px; padding: 10px 18px; text-align: center; color: white; min-width: 80px; }
.stat-item.green { background: var(--glass-stat-green); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.blue { background: var(--glass-stat-blue); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.purple { background: var(--glass-stat-purple); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.orange { background: var(--glass-stat-orange); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.pink { background: var(--glass-stat-pink); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.cyan { background: var(--glass-stat-cyan); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.red { background: var(--glass-stat-red); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.teal { background: var(--glass-stat-teal); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-item.indigo { background: var(--glass-stat-indigo); border: 1px solid rgba(255,255,255,0.15); box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.06); }
.stat-label { display: block; font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; }
.stat-value { font-size: 1.5rem; font-weight: 700; }

/* .list-card, .card-order, .card-photo, .card-info, .card-name, .card-badges, .card-actions
   → consolidados com .sige-card-* no topo do ficheiro */

.badge { font-size: 0.7rem; padding: 3px 10px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--glass-inset-subtle); }
.badge i { font-size: 0.65rem; }
.badge-blue { background: #d5eef0; color: var(--sige-primary-active); }
.badge-green { background: #dff0e8; color: #2d8a65; }
.badge-orange { background: #f5ecd6; color: #966b35; }
.badge-purple { background: #e0e7ff; color: #504898; }
.badge-pink { background: #f2e5ed; color: #8f4d70; }
.badge-red { background: #f5e0e0; color: #c25454; }
.badge-gray { background: #f3f4f6; color: #4b5563; }
.badge-cyan { background: #dff0f4; color: #2d8fa0; }
.badge-teal { background: #ccfbf1; color: #258a7e; }
.badge-indigo { background: #e0e7ff; color: #5c569e; }
.badge-amber { background: #f5ecd6; color: #b38040; }

/* .btn-action, .btn-edit, .btn-delete, .btn-print, .btn-check, .btn-transfer, .btn-view, .btn-add
   → consolidados com .sige-btn na secção ACTION BUTTONS */

.empty-state { text-align: center; padding: 60px 20px; color: #64748b; background: var(--glass-bg-subtle); border: 1px dashed var(--glass-border-teal); border-radius: 12px; box-shadow: var(--glass-inset-subtle); }
.empty-state i { font-size: 48px; margin-bottom: 16px; opacity: 0.5; display: block; }
.empty-state h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px 0; }
.empty-state p { font-size: 0.9rem; margin: 0; }

.loading-state { text-align: center; padding: 40px 20px; color: var(--sige-primary); }
.loading-state i { font-size: 2rem; margin-bottom: 12px; }

.search-box { background: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.search-hint { font-size: 0.85rem; color: #64748b; margin-top: 8px; }

.tab-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn { padding: 10px 20px; border: 2px solid var(--glass-border-teal); border-radius: 10px; background: var(--glass-bg); font-weight: 500; cursor: pointer; transition: all 0.2s ease; box-shadow: var(--glass-inset-subtle); }
.tab-btn:hover { background: var(--glass-bg-strong); border-color: rgba(30, 98, 184,0.3); }
.tab-btn.active { background: linear-gradient(135deg, rgba(30, 98, 184,0.92), rgba(20,85,96,0.95)); border-color: rgba(111, 168, 238,0.25); color: white; box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 15px; }

/* .turma-card → consolidado com .sige-turma-card no topo */
.turma-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.turma-name { font-size: 1.1rem; font-weight: 700; color: #1f2937; }
.turma-stats { display: flex; gap: 15px; margin-bottom: 12px; }
.turma-stat { text-align: center; }
.turma-stat-value { font-size: 1.25rem; font-weight: 700; color: var(--sige-primary); }
.turma-stat-label { font-size: 0.7rem; color: #6b7280; text-transform: uppercase; }

.card-select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem; min-width: 100px; background: white; }
.card-select:focus { outline: none; border-color: var(--sige-primary); box-shadow: 0 0 0 2px var(--glass-border-strong); }

/* Responsive de .list-card/.card-* → consolidado na secção RESPONSIVE principal */
@media (max-width: 768px) {
    .stats-container { justify-content: center; }
    .cards-grid { grid-template-columns: 1fr; }
    .page-header { padding: 15px; }
    .page-header .header-icon { font-size: 2rem; }
    .page-header .header-title { font-size: 1.2rem; }
}

/* ====================================
   SIGE BUTTONS (Primary & Secondary)
   ==================================== */
.sige-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--sige-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-normal);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.sige-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow-brand);
}

.sige-btn-primary:active {
    transform: translateY(0);
}

.sige-btn-primary i {
    font-size: 0.9rem;
}

.sige-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: var(--color-blue);
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    text-decoration: none;
}

.sige-btn-secondary:hover {
    background: var(--color-blue);
    color: white;
}

.sige-btn-secondary i {
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .sige-btn-primary {
        padding: 8px 12px;
        font-size: 0.75rem;
        gap: 5px;
    }
    .sige-btn-primary i {
        font-size: 0.7rem;
    }
    .sige-btn-secondary {
        padding: 7px 12px;
        font-size: 0.75rem;
        gap: 5px;
    }
    .sige-btn-secondary i {
        font-size: 0.7rem;
    }
}

/* ====================================
   SIGE CHECKBOX TOGGLE
   ==================================== */
.sige-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.sige-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sige-checkbox-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    background: #d1d5db;
    border-radius: 26px;
    transition: var(--transition-normal);
    flex-shrink: 0;
}

.sige-checkbox-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: var(--transition-normal);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sige-checkbox:checked + .sige-checkbox-toggle {
    background: var(--sige-blue);
}

.sige-checkbox:checked + .sige-checkbox-toggle::after {
    transform: translateX(22px);
}

.sige-checkbox:focus + .sige-checkbox-toggle {
    box-shadow: 0 0 0 3px var(--glass-border-strong);
}

.sige-checkbox-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #374151;
}

/* ====================================
   SIGE SEARCHABLE SELECT DROPDOWN
   ==================================== */
.sige-searchable-dropdown {
    position: fixed;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(200, 200, 200, 0.45);
    border-radius: var(--radius-lg);
    box-shadow:
        0 12px 40px var(--glass-border-strong),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.sige-searchable-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: var(--transition-fast);
}

/* Cabecalho de grupo (estilo <optgroup>) no dropdown pesquisavel */
.sige-searchable-group-header {
    padding: 7px 14px 5px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--ui-input-bg);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: default;
}

/* Legenda das fórmulas — transparência de como as notas são calculadas
   (partilhada por mini-pautas, comissão de exame e pauta geral) */
.mp-formulas-legenda {
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
    border-left: 4px solid var(--color-teal);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.mp-formulas-titulo {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.mp-formulas-seccao {
    margin-top: 8px;
}
.mp-formulas-subtitulo {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 5px;
}
.mp-formulas-subtitulo i {
    opacity: 0.7;
    margin-right: 4px;
}
.mp-formulas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.mp-formula-item {
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-primary);
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: 8px;
    padding: 4px 10px;
}
.mp-formula-item strong {
    color: var(--color-teal-dark, var(--color-teal));
}
.mp-formula-intervalo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.mp-formula-intervalo b {
    color: var(--text-primary);
    font-weight: 700;
}

.sige-searchable-item:last-child {
    border-bottom: none;
}

.sige-searchable-item:hover,
.sige-searchable-item.focused {
    background: var(--glass-bg-teal-medium);
}

.sige-searchable-item.selected {
    background: var(--glass-bg-teal-strong);
}

.sige-searchable-item-content {
    flex: 1;
    min-width: 0;
}

.sige-searchable-item-img {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid var(--glass-border-teal);
    background: rgba(255, 255, 255, 0.6);
}

.sige-searchable-item-img-fallback {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sige-primary-light);
    font-size: 0.7rem;
    border: 1px solid var(--glass-bg-teal-medium);
}

[data-theme="dark"] .sige-searchable-item-img {
    border-color: var(--glass-border-strong);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sige-searchable-item-img-fallback {
    background: var(--glass-border);
    border-color: var(--glass-border-teal);
    color: var(--sige-primary-light);
}

.sige-searchable-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e3a40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sige-searchable-secondary {
    font-size: 0.78rem;
    color: var(--sige-primary);
    margin-top: 2px;
}

.sige-searchable-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sige-searchable-check {
    color: var(--color-blue);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.sige-searchable-empty {
    padding: 24px;
    text-align: center;
    color: var(--sige-primary-light);
    font-size: 0.85rem;
}

.sige-searchable-empty i {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.sige-searchable-container {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--input-radius);
    transition: var(--input-transition);
}

.sige-searchable-input {
    padding-right: 35px !important;
    cursor: pointer;
}

.sige-searchable-arrow {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    width: 30%;
    color: var(--input-icon);
    font-size: 12px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
}

.sige-searchable-container:hover .sige-searchable-arrow {
    color: var(--input-icon-focus);
}

.sige-auto-searchable:has(.sige-searchable-dropdown:not(.hidden)) .sige-searchable-arrow {
    transform: rotate(180deg);
    color: var(--input-icon-focus);
}

.sige-searchable-selected {
    border-color: var(--input-border-selected) !important;
    background: var(--input-bg-selected) !important;
}

.sige-searchable-readonly {
    cursor: not-allowed !important;
    background: var(--glass-bg-teal) !important;
    opacity: 0.7;
}

/* Estado de erro para campos required vazios */
.sige-searchable-invalid {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.sige-searchable-invalid:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* Data de nascimento impossível (futura ou com mais de 120 anos) — ver
   `sigeAvisarNascimento()` em app/core/components/form_validation.js */
.sige-nasc-invalida {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Dark Mode for new components */
[data-theme="dark"] .sige-btn-secondary {
    background: var(--corFundoCard);
    border-color: var(--color-blue);
}

[data-theme="dark"] .sige-checkbox-toggle {
    background: #4b5563;
}

[data-theme="dark"] .sige-checkbox-text {
    color: var(--corTexto);
}

[data-theme="dark"] .sige-searchable-dropdown {
    background: rgba(30, 41, 59, 0.6) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-color: var(--glass-border-strong) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .sige-searchable-item {
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sige-searchable-item:hover,
[data-theme="dark"] .sige-searchable-item.focused {
    background: var(--glass-border-teal) !important;
}

[data-theme="dark"] .sige-searchable-item.selected {
    background: var(--glass-border-strong) !important;
}

[data-theme="dark"] .sige-searchable-item-name {
    color: var(--corTexto);
}

[data-theme="dark"] .sige-searchable-secondary {
    color: var(--corTextoSecundario);
}

[data-theme="dark"] .sige-searchable-empty {
    color: var(--corTextoTerciario);
}

[data-theme="dark"] .sige-searchable-selected {
    background: var(--input-bg-selected) !important;
    border-color: var(--input-border-selected) !important;
}

[data-theme="dark"] .sige-searchable-readonly {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .sige-searchable-invalid,
[data-theme="dark"] .sige-nasc-invalida {
    border-color: #f87171 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Fallback para browsers sem backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .sige-searchable-dropdown {
        background: rgba(255, 255, 255, 0.92);
    }
    [data-theme="dark"] .sige-searchable-dropdown {
        background: rgba(30, 41, 59, 0.95) !important;
    }
}

/* ====================================
   DARK MODE - SUPORTE COMPLETO
   ==================================== */

/* Cards */
[data-theme="dark"] .sige-card,
[data-theme="dark"] .list-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-teal) !important;
    color: #e2e8f0 !important;
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-card:hover,
[data-theme="dark"] .list-card:hover {
    background: var(--glass-bg-strong) !important;
    box-shadow: var(--glass-shadow-hover) !important;
}

[data-theme="dark"] .sige-card-name,
[data-theme="dark"] .card-name,
[data-theme="dark"] .sige-card-name a,
[data-theme="dark"] .card-name a {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .sige-card-name a:hover,
[data-theme="dark"] .card-name a:hover {
    color: #4F8FDC !important;
}

[data-theme="dark"] .sige-card-order,
[data-theme="dark"] .card-order {
    background: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .sige-card-info,
[data-theme="dark"] .card-info {
    color: #e2e8f0 !important;
}

/* Cards Zebra - Dark Mode */
[data-theme="dark"] .sige-card.sige-card-blue,
[data-theme="dark"] .sige-card.sige-card-white {
    background: linear-gradient(135deg, #1e293b 0%, #0e3d45 100%) !important;
}

[data-theme="dark"] .sige-card.sige-card-teal,
[data-theme="dark"] .sige-card.sige-card-gray-light {
    background: linear-gradient(135deg, #1e293b 0%, #1e3a3f 100%) !important;
}

[data-theme="dark"] .sige-card.sige-card-blue-soft {
    background: linear-gradient(135deg, #172554 0%, var(--layout-sidebar-bg-solid) 100%) !important;
}

[data-theme="dark"] .sige-card.sige-card-slate-soft {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
}

[data-theme="dark"] .sige-card.sige-card-green-soft {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
}

[data-theme="dark"] .sige-card.sige-card-purple-soft {
    background: linear-gradient(135deg, #3b0764 0%, #581c87 100%) !important;
}

[data-theme="dark"] .sige-card.sige-card-orange-soft {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%) !important;
}

/* Badges - Dark Mode */
[data-theme="dark"] .sige-badge,
[data-theme="dark"] .badge {
    opacity: 0.95;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .sige-badge-blue,
[data-theme="dark"] .badge-blue {
    background: var(--glass-border-strong) !important;
    color: #8DBBF0 !important;
}

[data-theme="dark"] .sige-badge-green,
[data-theme="dark"] .badge-green {
    background: rgba(61, 158, 120, 0.25) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .sige-badge-orange,
[data-theme="dark"] .badge-orange,
[data-theme="dark"] .sige-badge-amber,
[data-theme="dark"] .badge-amber {
    background: rgba(201, 154, 80, 0.25) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .sige-badge-purple,
[data-theme="dark"] .badge-purple {
    background: rgba(136, 120, 184, 0.25) !important;
    color: #c4b5fd !important;
}

[data-theme="dark"] .sige-badge-pink,
[data-theme="dark"] .badge-pink {
    background: rgba(184, 111, 150, 0.25) !important;
    color: #f9a8d4 !important;
}

[data-theme="dark"] .sige-badge-red,
[data-theme="dark"] .badge-red {
    background: rgba(212, 106, 106, 0.25) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .sige-badge-gray,
[data-theme="dark"] .badge-gray {
    background: rgba(107, 114, 128, 0.3) !important;
    color: #d1d5db !important;
}

[data-theme="dark"] .sige-badge-cyan,
[data-theme="dark"] .badge-cyan {
    background: rgba(6, 182, 212, 0.25) !important;
    color: #67e8f9 !important;
}

[data-theme="dark"] .sige-badge-teal,
[data-theme="dark"] .badge-teal {
    background: rgba(20, 184, 166, 0.25) !important;
    color: #5eead4 !important;
}

[data-theme="dark"] .sige-badge-indigo,
[data-theme="dark"] .badge-indigo {
    background: rgba(109, 112, 181, 0.25) !important;
    color: #a5b4fc !important;
}

/* Action Buttons - Dark Mode (inclui aliases .btn-edit, .btn-delete, etc.) */
[data-theme="dark"] .sige-btn-action.sige-btn-edit,
[data-theme="dark"] .btn-action.btn-edit,
[data-theme="dark"] .sige-btn.edit,
[data-theme="dark"] .sige-btn-edit,
[data-theme="dark"] .btn-edit {
    background: var(--glass-border-strong) !important;
    color: #8DBBF0 !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-edit:hover,
[data-theme="dark"] .btn-action.btn-edit:hover,
[data-theme="dark"] .sige-btn.edit:hover,
[data-theme="dark"] .sige-btn-edit:hover,
[data-theme="dark"] .btn-edit:hover {
    background: var(--sige-primary) !important;
    color: white !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-delete,
[data-theme="dark"] .btn-action.btn-delete,
[data-theme="dark"] .sige-btn.delete,
[data-theme="dark"] .sige-btn-delete,
[data-theme="dark"] .btn-delete {
    background: rgba(212, 106, 106, 0.2) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-delete:hover,
[data-theme="dark"] .btn-action.btn-delete:hover,
[data-theme="dark"] .sige-btn.delete:hover,
[data-theme="dark"] .sige-btn-delete:hover,
[data-theme="dark"] .btn-delete:hover {
    background: #d46a6a !important;
    color: white !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-print,
[data-theme="dark"] .sige-btn-action.sige-btn-check,
[data-theme="dark"] .btn-action.btn-print,
[data-theme="dark"] .btn-action.btn-check,
[data-theme="dark"] .btn-print,
[data-theme="dark"] .btn-check {
    background: rgba(61, 158, 120, 0.2) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-print:hover,
[data-theme="dark"] .sige-btn-action.sige-btn-check:hover,
[data-theme="dark"] .btn-action.btn-print:hover,
[data-theme="dark"] .btn-action.btn-check:hover,
[data-theme="dark"] .btn-print:hover,
[data-theme="dark"] .btn-check:hover {
    background: #3d9e78 !important;
    color: white !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-view,
[data-theme="dark"] .btn-action.btn-view,
[data-theme="dark"] .btn-view {
    background: rgba(201, 154, 80, 0.2) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-view:hover,
[data-theme="dark"] .btn-action.btn-view:hover,
[data-theme="dark"] .btn-view:hover {
    background: #c99a50 !important;
    color: white !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-info,
[data-theme="dark"] .btn-action.btn-info,
[data-theme="dark"] .btn-info {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-info:hover,
[data-theme="dark"] .btn-action.btn-info:hover,
[data-theme="dark"] .btn-info:hover {
    background: #3aa5b8 !important;
    color: white !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-transfer,
[data-theme="dark"] .btn-action.btn-transfer,
[data-theme="dark"] .btn-transfer {
    background: rgba(109, 112, 181, 0.2) !important;
    color: #a5b4fc !important;
}

[data-theme="dark"] .sige-btn-action.sige-btn-transfer:hover,
[data-theme="dark"] .btn-action.btn-transfer:hover,
[data-theme="dark"] .btn-transfer:hover {
    background: #6d70b5 !important;
    color: white !important;
}

/* Toolbar - Dark Mode */
[data-theme="dark"] .sige-toolbar {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-teal) !important;
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-toolbar-search {
    background: var(--glass-bg-strong) !important;
    border-color: var(--glass-border-teal) !important;
}

[data-theme="dark"] .sige-toolbar-search:focus-within {
    border-color: #4F8FDC !important;
    box-shadow: 0 0 0 3px var(--glass-border-strong) !important;
}

[data-theme="dark"] .sige-toolbar-search i {
    color: #64748b !important;
}

[data-theme="dark"] .sige-search-input {
    color: #f1f5f9 !important;
    background: transparent !important;
}

[data-theme="dark"] .sige-search-input::placeholder {
    color: #64748b !important;
}

[data-theme="dark"] .sige-mini-stat {
    background: var(--glass-bg-strong) !important;
    border-color: var(--glass-border-teal) !important;
    color: #94a3b8 !important;
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-mini-stat span {
    color: #4F8FDC !important;
}

[data-theme="dark"] .sige-mini-stat small {
    color: #64748b !important;
}

/* Empty State - Dark Mode */
[data-theme="dark"] .sige-empty,
[data-theme="dark"] .empty-state {
    color: #94a3b8 !important;
    background: var(--glass-bg-subtle) !important;
    border-color: var(--glass-border-teal) !important;
}

[data-theme="dark"] .sige-empty i,
[data-theme="dark"] .empty-state i {
    color: #64748b !important;
}

[data-theme="dark"] .sige-empty h3,
[data-theme="dark"] .empty-state h3 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .sige-empty p,
[data-theme="dark"] .empty-state p {
    color: #94a3b8 !important;
}

/* Modal - Dark Mode */
[data-theme="dark"] .sige-modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: var(--glass-true-blur-overlay) !important;
    -webkit-backdrop-filter: var(--glass-true-blur-overlay) !important;
}

[data-theme="dark"] .sige-modal {
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
}

[data-theme="dark"] .sige-modal-body {
    background: var(--glass-bg-strong) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .sige-modal-footer {
    background: var(--glass-bg-subtle) !important;
    border-color: var(--glass-border-teal) !important;
}

[data-theme="dark"] .sige-btn-nav {
    background: #1e293b;
    border-color: var(--sige-primary);
    color: #4F8FDC;
}

[data-theme="dark"] .sige-btn-nav:hover {
    background: var(--sige-primary);
    color: white;
}

[data-theme="dark"] .sige-form-label {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .sige-form-label i {
    color: #4F8FDC !important;
}

[data-theme="dark"] .sige-form-input,
[data-theme="dark"] .sige-form-select,
[data-theme="dark"] .sige-form-textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
    box-shadow: var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

[data-theme="dark"] .sige-form-select option,
[data-theme="dark"] .sige-card-select option {
    background: rgba(30, 41, 59, 0.75) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    color: #f1f5f9 !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

[data-theme="dark"] .sige-form-select option:hover,
[data-theme="dark"] .sige-form-select option:checked,
[data-theme="dark"] .sige-card-select option:hover,
[data-theme="dark"] .sige-card-select option:checked {
    background: var(--glass-border-strong) !important;
}

[data-theme="dark"] .sige-card-select {
    background: var(--glass-bg-subtle) !important;
    border-color: var(--glass-border-teal) !important;
    color: #f1f5f9 !important;
    backdrop-filter: var(--glass-true-blur) !important;
    -webkit-backdrop-filter: var(--glass-true-blur) !important;
}

[data-theme="dark"] .sige-card-select:focus {
    background: rgba(30, 41, 59, 0.80) !important;
    border-color: #4F8FDC !important;
    box-shadow: 0 0 0 2px var(--glass-border-strong), var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-form-input:focus,
[data-theme="dark"] .sige-form-select:focus,
[data-theme="dark"] .sige-form-textarea:focus {
    background: var(--input-bg-focus) !important;
    border-color: var(--input-border-focus) !important;
    box-shadow: 0 0 0 var(--input-ring-size) var(--input-ring), var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-form-input::placeholder {
    color: var(--input-placeholder) !important;
}

[data-theme="dark"] .sige-btn-cancel {
    background: linear-gradient(135deg, #c25454 0%, #a84545 100%) !important;
    color: white !important;
}

[data-theme="dark"] .sige-btn-cancel:hover {
    background: linear-gradient(135deg, #a84545 0%, #991b1b 100%) !important;
    box-shadow: 0 6px 16px rgba(212, 106, 106, 0.5) !important;
}

[data-theme="dark"] .sige-btn-submit {
    background: linear-gradient(135deg, #2d8a65 0%, #257555 100%) !important;
}

[data-theme="dark"] .sige-btn-submit:hover {
    background: linear-gradient(135deg, #257555 0%, #065f46 100%) !important;
    box-shadow: 0 6px 16px rgba(61, 158, 120, 0.5) !important;
}

/* Form Sections - Dark Mode */
[data-theme="dark"] .sige-form-section {
    border-color: #334155 !important;
}

[data-theme="dark"] .sige-form-section-title {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .sige-form-section-title i {
    color: #4F8FDC !important;
}

/* Required Indicator - Dark Mode */
[data-theme="dark"] .sige-required-indicator {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Tab Panels - Dark Mode */
[data-theme="dark"] .sige-tab-panel {
    color: #e2e8f0 !important;
}

/* Field Labels - Dark Mode */
[data-theme="dark"] .sige-field-required label::after {
    color: #f87171 !important;
}

[data-theme="dark"] .sige-field-optional label::after {
    color: #5eb896 !important;
}

/* Toast - Dark Mode */
[data-theme="dark"] .sige-toast {
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
}

[data-theme="dark"] .sige-toast-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .sige-toast-message {
    color: #94a3b8 !important;
}

[data-theme="dark"] .sige-toast-close {
    background: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .sige-toast-close:hover {
    background: #475569 !important;
    color: #e2e8f0 !important;
}

/* Confirm Dialog - Dark Mode */
[data-theme="dark"] .sige-confirm-dialog {
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
}

[data-theme="dark"] .sige-confirm-body {
    background: var(--glass-bg-strong) !important;
}

[data-theme="dark"] .sige-confirm-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .sige-confirm-message {
    color: #94a3b8 !important;
}

[data-theme="dark"] .sige-confirm-btn-cancel {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-teal) !important;
    color: #e2e8f0 !important;
    box-shadow: var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-confirm-btn-cancel:hover {
    background: var(--glass-bg-strong) !important;
}

/* Search Box - Dark Mode */
[data-theme="dark"] .sige-search-box,
[data-theme="dark"] .search-box {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-teal) !important;
}

[data-theme="dark"] .sige-search-hint,
[data-theme="dark"] .search-hint {
    color: #64748b !important;
}

/* Tabs - Dark Mode */
[data-theme="dark"] .sige-tab,
[data-theme="dark"] .tab-btn {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-teal) !important;
    color: #e2e8f0 !important;
    box-shadow: var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-tab:hover,
[data-theme="dark"] .tab-btn:hover {
    background: var(--glass-bg-strong) !important;
    border-color: var(--glass-border-strong) !important;
}

[data-theme="dark"] .sige-tab.active,
[data-theme="dark"] .tab-btn.active {
    background: var(--layout-header-bg) !important;
    border-color: var(--glass-border-strong) !important;
    color: white !important;
    box-shadow: var(--glass-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Table - Dark Mode */
[data-theme="dark"] .sige-table {
    background: var(--glass-bg) !important;
}

[data-theme="dark"] .sige-table th {
    background: var(--glass-bg-strong) !important;
    color: #e2e8f0 !important;
    border-color: var(--glass-border-teal) !important;
}

[data-theme="dark"] .sige-table td {
    color: #e2e8f0 !important;
    border-color: var(--glass-border-teal) !important;
}

[data-theme="dark"] .sige-table tr:hover {
    background: var(--glass-bg-teal) !important;
}

/* Card Select - Dark Mode */
[data-theme="dark"] .sige-card-select,
[data-theme="dark"] .card-select {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .sige-card-select:focus,
[data-theme="dark"] .card-select:focus {
    border-color: #4F8FDC !important;
    box-shadow: 0 0 0 2px var(--glass-border-strong) !important;
}

/* Info Box - Dark Mode */
[data-theme="dark"] .sige-info-box {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #7dd3fc !important;
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-info-box.warning {
    background: rgba(201, 154, 80, 0.1) !important;
    border-color: rgba(201, 154, 80, 0.3) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .sige-info-box.success {
    background: rgba(61, 158, 120, 0.1) !important;
    border-color: rgba(61, 158, 120, 0.3) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .sige-info-box.error {
    background: rgba(212, 106, 106, 0.1) !important;
    border-color: rgba(212, 106, 106, 0.3) !important;
    color: #fca5a5 !important;
}

/* Turma Card - Dark Mode */
[data-theme="dark"] .sige-turma-card,
[data-theme="dark"] .turma-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-teal) !important;
    box-shadow: var(--glass-shadow-sm), var(--glass-inset-subtle) !important;
}

[data-theme="dark"] .sige-turma-card:hover,
[data-theme="dark"] .turma-card:hover {
    background: var(--glass-bg-strong) !important;
    box-shadow: var(--glass-shadow-hover) !important;
}

[data-theme="dark"] .sige-turma-name,
[data-theme="dark"] .turma-name {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .sige-turma-stat-value,
[data-theme="dark"] .turma-stat-value {
    color: #4F8FDC !important;
}

[data-theme="dark"] .sige-turma-stat-label,
[data-theme="dark"] .turma-stat-label {
    color: #94a3b8 !important;
}

/* Stats - Dark Mode */
[data-theme="dark"] .sige-stat,
[data-theme="dark"] .stat-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Header - Dark Mode (glass gradient darker) */
[data-theme="dark"] .sige-header,
[data-theme="dark"] .page-header {
    background: var(--layout-header-bg) !important;
    border-color: var(--glass-border-teal) !important;
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
}


/* Grid - Dark Mode */
[data-theme="dark"] .sige-grid,
[data-theme="dark"] .cards-grid {
    gap: 15px;
}

/* Loading State - Dark Mode */
[data-theme="dark"] .sige-loading,
[data-theme="dark"] .loading-state {
    color: #4F8FDC !important;
}

/* ====================================
   MENU LATERAL - ICONES (LIMPO)
   ==================================== */

/* Icones do menu - estado base */
#menuList li a i,
#menuList li button i,
#menuList i.corIconesAside,
#menuList i.fa {
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

/* Icones do menu - hover */
#menuList li a:hover i,
#menuList li button:hover i {
    color: #8ed4db !important;
    transform: scale(1.08) !important;
}

/* Dark mode */
[data-theme="dark"] #menuList li a:hover i,
[data-theme="dark"] #menuList li button:hover i {
    color: #8ed4db !important;
}

/* ==========================================
   HEADER SEARCH WRAPPER - Super Acesso Pesquisa
   (overrides para searchable select no header)
   ========================================== */
.header-search-wrapper.sige-form-group {
    margin: 0;
    width: 280px;
    max-width: 50vw;
}

.header-search-wrapper .sige-searchable-container {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.header-search-wrapper .sige-searchable-container:hover,
.header-search-wrapper .sige-searchable-container:focus-within {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.header-search-wrapper .sige-form-input.sige-searchable-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 14px 6px 32px;
    letter-spacing: 0.01em;
    box-shadow: none;
}

.header-search-wrapper .sige-form-input.sige-searchable-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

.header-search-wrapper .sige-form-input.sige-searchable-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.header-search-wrapper .sige-form-input.sige-searchable-input:focus {
    box-shadow: none;
    border: none;
}

.header-search-wrapper .sige-form-input.sige-searchable-selected {
    background: transparent !important;
    border: none !important;
}

/* Trocar chevron por search icon e reposicionar a esquerda */
.header-search-wrapper .sige-searchable-arrow {
    right: auto;
    left: 10px;
    width: auto;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.header-search-wrapper .sige-searchable-arrow.fa-chevron-down::before {
    content: "\f002"; /* fa-search */
}

.header-search-wrapper .sige-searchable-container:focus-within .sige-searchable-arrow {
    color: rgba(255, 255, 255, 0.95);
    transform: none; /* Nao rodar o icone search */
}

/* Dropdown com glass morphism */
.header-search-wrapper .sige-searchable-dropdown {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 12px;
    box-shadow:
        0 12px 40px var(--glass-border-teal),
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    max-height: 360px;
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.header-search-wrapper .sige-searchable-item {
    font-size: 0.84rem;
    color: #1e3a40;
    border-bottom-color: var(--glass-border);
}

.header-search-wrapper .sige-searchable-item:hover,
.header-search-wrapper .sige-searchable-item.focused {
    background: var(--glass-bg-teal-medium);
    color: var(--layout-sidebar-bg-solid);
}

/* Pesquisa de menus — na BARRA LATERAL, logo abaixo do ano lectivo (mesmo aspecto do cartão dele) */
.sidebar-pesquisa-menu-wrapper {
    width: 100%;
    padding: 0 16px 8px;
}

.sidebar-pesquisa-menu.sige-form-group {
    margin: 0;
    width: 100%;
}

.sidebar-pesquisa-menu .sige-searchable-container {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.25s ease;
}

.sidebar-pesquisa-menu .sige-searchable-container:hover,
.sidebar-pesquisa-menu .sige-searchable-container:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.sidebar-pesquisa-menu .sige-form-input.sige-searchable-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 9px 14px 9px 36px;
    box-shadow: none;
}

.sidebar-pesquisa-menu .sige-form-input.sige-searchable-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

.sidebar-pesquisa-menu .sige-form-input.sige-searchable-input:focus {
    box-shadow: none;
    border: none;
}

.sidebar-pesquisa-menu .sige-form-input.sige-searchable-selected {
    background: transparent !important;
    border: none !important;
}

/* Lupa à esquerda no lugar da seta */
.sidebar-pesquisa-menu .sige-searchable-arrow {
    right: auto;
    left: 12px;
    width: auto;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    pointer-events: none;
}

.sidebar-pesquisa-menu .sige-searchable-arrow.fa-chevron-down::before {
    content: "\f002"; /* fa-search */
}

.sidebar-pesquisa-menu .sige-searchable-container:focus-within .sige-searchable-arrow {
    color: rgba(255, 255, 255, 0.95);
    transform: none;
}

[data-theme="dark"] .sidebar-pesquisa-menu .sige-searchable-container {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-pesquisa-menu .sige-searchable-container:hover,
[data-theme="dark"] .sidebar-pesquisa-menu .sige-searchable-container:focus-within {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .sidebar-pesquisa-menu-wrapper {
        padding: 0 12px 6px;
    }
}

/* Telemóvel/tablet: a regra anti-zoom do iOS (§ «MOBILE: Prevenir auto-zoom», ≤1024px) põe
   o texto a 16px e o campo ficava maior do que os menus. ⛔ O font-size do texto ESCRITO fica
   nos 16px (abaixo disso o iOS faz zoom ao tocar); encolhe-se a altura, o placeholder e a lupa. */
@media screen and (max-width: 1024px) {
    .sidebar-pesquisa-menu .sige-form-input.sige-searchable-input {
        padding: 5px 12px 5px 32px !important;
        line-height: 20px;
        height: auto;
    }
    .sidebar-pesquisa-menu .sige-form-input.sige-searchable-input::placeholder {
        font-size: 0.8rem;
    }
    .sidebar-pesquisa-menu .sige-searchable-arrow {
        left: 11px;
        font-size: 12px;
    }
    .sidebar-pesquisa-menu .sige-searchable-container {
        border-radius: 12px;
    }
}

/* A lista de menus só aparece depois de se escrever (o dropdown é movido para o body,
   por isso o selector é pelo id). !important: o componente mexe na classe `hidden` e
   no `visibility` inline.
   ⛔ visibility, NUNCA display:none — o componente posiciona a lista na abertura e
   «auto-corrige» o desvio medido; com display:none mede 0×0 e soma o top/left outra vez
   (a lista abria ~220 px abaixo do campo). */
#pesquisaMenuHeaderDropdown.pm-sem-texto {
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    .header-search-wrapper.sige-form-group {
        max-width: 36vw;
    }
}

/* Cabeçalho — grupo das pesquisas (hoje só a de escola; a de menus foi para a barra lateral) */
.cabecalho-pesquisas {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

/* Cabeçalho — telemóvel/tablet em retrato (abaixo do breakpoint `paisagem-tablet`, 900px).
   ⛔ A pesquisa de INSTITUIÇÕES fica NA MESMA LINHA do botão do menu, compacta (160px), como
   estava até 2026-09-13 (decisão do dono, 2026-09-14). A 2.ª linha a toda a largura só existiu
   enquanto havia DUAS pesquisas no cabeçalho — a de menus foi para a barra lateral.
   O grupo da esquerda encolhe (min-width:0) para a foto e o nome nunca saírem do ecrã. */
@media (max-width: 899px) {
    .cabecalho-topo {
        gap: 8px;
    }
    .cabecalho-esquerda {
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }
    .cabecalho-esquerda > .hide_show_menu {
        flex-shrink: 0;
    }
    .cabecalho-direita {
        flex-shrink: 0;
        min-width: 0;
    }
    .cabecalho-pesquisas {
        flex: 0 1 auto;
        min-width: 0;
        gap: 8px;
    }
    .cabecalho-pesquisas > div {
        min-width: 0;
    }
    .cabecalho-pesquisas .header-search-wrapper.sige-form-group {
        width: 160px;
        max-width: 100%;
    }
    .cabecalho-pesquisas .header-search-wrapper .sige-searchable-container {
        border-radius: 10px;
    }
    /* O texto escrito fica nos 16px (anti-zoom do iOS); encolhe-se a altura e o placeholder */
    .cabecalho-pesquisas .header-search-wrapper .sige-form-input.sige-searchable-input {
        padding: 5px 10px 5px 28px !important;
        line-height: 20px;
    }
    .cabecalho-pesquisas .header-search-wrapper .sige-form-input.sige-searchable-input::placeholder {
        font-size: 0.78rem;
    }
    .cabecalho-pesquisas .header-search-wrapper .sige-searchable-arrow {
        font-size: 12px;
        left: 8px;
    }
    /* Primeiro nome ao lado da foto, cortado com reticências se não couber */
    .cabecalho-direita .buttonMainMenu {
        min-width: 0;
    }
    .cabecalho-nome {
        display: inline-flex !important;
        min-width: 0;
        max-width: 30vw;
    }
    .cabecalho-nome p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Telemóvel estreito: sem o nome (como até 2026-09-13), senão a pesquisa de instituições
       ficava com ~80px e não se lia o nome da escola. A foto continua. */
    @media (max-width: 479px) {
        .cabecalho-nome {
            display: none !important;
        }
    }
    /* O cabeçalho ficou mais alto: o menu do perfil abre logo abaixo dele */
    .cabecalho-topo > .main_menu {
        top: calc(100% + 6px);
    }
}

/* Header Search Wrapper - Dark Mode */
[data-theme="dark"] .header-search-wrapper .sige-searchable-container {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .header-search-wrapper .sige-searchable-container:hover,
[data-theme="dark"] .header-search-wrapper .sige-searchable-container:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .header-search-wrapper .sige-searchable-dropdown {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-color: var(--glass-border-strong);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .header-search-wrapper .sige-searchable-item {
    color: #cbd5e1;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .header-search-wrapper .sige-searchable-item:hover,
[data-theme="dark"] .header-search-wrapper .sige-searchable-item.focused {
    background: var(--glass-border-teal);
    color: #8DBBF0;
}

[data-theme="dark"] .header-search-wrapper .sige-form-input.sige-searchable-selected {
    background: transparent !important;
    border: none !important;
}

/* ==========================================
   ANO LECTIVO - Selector no Sidebar
   ========================================== */
.ano-lectivo-wrapper {
    width: 100%;
    padding: 16px 16px 8px;
}

.ano-lectivo-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.ano-lectivo-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Ano em uso que NÃO é o vigente (SG-2026-0053) — a barra lateral é escura, por isso a
   marca é o âmbar, que se lê nos dois temas. Não esconde nem bloqueia: assinala. */
.ano-lectivo-card.ano-lectivo-antigo {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.12);
}

.ano-lectivo-aviso {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: #fbbf24;
    font-size: 0.72rem;
    line-height: 1.35;
}

.ano-lectivo-aviso i { margin-top: 2px; flex-shrink: 0; }
.ano-lectivo-aviso b { color: #fde68a; }

.ano-lectivo-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sige-primary), var(--sige-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--shadow-brand-light);
}

.ano-lectivo-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ano-lectivo-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: center;
}

.ano-lectivo-card {
    position: relative;
}

.ano-lectivo-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    border: none;
    outline: none;
}

.ano-lectivo-ano {
    color: #4ade80;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}

.ano-lectivo-chevron {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    margin-left: 2px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.ano-lectivo-card:hover .ano-lectivo-chevron {
    color: rgba(255, 255, 255, 0.7);
}

.ano-lectivo-select option {
    background: var(--layout-content-bg, #ffffff);
    color: var(--layout-content-text, #1e293b);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px;
    text-align: center;
}

/* Ano Lectivo - Dark Mode */
[data-theme="dark"] .ano-lectivo-card {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ano-lectivo-card:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .ano-lectivo-icon {
    background: linear-gradient(135deg, var(--layout-sidebar-bg-solid), var(--layout-sidebar-bg-solid));
    box-shadow: 0 4px 12px var(--glass-border-strong);
}

[data-theme="dark"] .ano-lectivo-select option {
    background: var(--layout-content-bg, #1e293b);
    color: var(--layout-content-text, #e2e8f0);
}

/* Ano Lectivo - Responsivo */
@media (max-width: 768px) {
    .ano-lectivo-wrapper {
        padding: 12px 12px 6px;
    }

    .ano-lectivo-card {
        padding: 8px 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .ano-lectivo-icon {
        width: 34px;
        height: 34px;
        font-size: 13px;
        border-radius: 8px;
    }

    .ano-lectivo-ano {
        font-size: 1.05rem;
    }

    .ano-lectivo-label {
        font-size: 0.62rem;
    }
}

/* Trimestre Global (selector na sidebar) */
.trimestre-card {
    padding: 6px 12px !important;
}

.trimestre-card .trimestre-icon {
    width: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.30);
}

.trimestre-texto {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .trimestre-texto {
    color: #f1f5f9;
}

@media (max-width: 768px) {
    .trimestre-card .trimestre-icon { width: 28px; height: 28px; font-size: 11px; }
    .trimestre-texto { font-size: 0.85rem; }
}

/* Header Search Wrapper - Responsivo */
@media (max-width: 768px) {
    .header-search-wrapper.sige-form-group {
        width: 160px;
        max-width: 40vw;
    }

    .header-search-wrapper .sige-searchable-container {
        border-radius: 10px;
    }

    .header-search-wrapper .sige-form-input.sige-searchable-input {
        font-size: 0.78rem;
        padding: 5px 10px 5px 28px;
    }

    .header-search-wrapper .sige-searchable-arrow {
        font-size: 12px;
        left: 8px;
    }

    .header-search-wrapper .sige-searchable-dropdown {
        border-radius: 10px;
        max-height: 280px;
    }

    .header-search-wrapper .sige-searchable-item {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
}

/* =====================================================
   DARK MODE GLOBAL - Cobertura para todas as paginas
   Cobre padroes comuns usados em style.css locais
   ===================================================== */

/* --- Filters Section (usado em quase todas as paginas) --- */
[data-theme="dark"] .filters-section,
[data-theme="dark"] .sige-filters-section {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
    color: var(--layout-content-text) !important;
}

/* --- Cards genericos (student, agent, teacher, staff, history, honor, divisao, etc.) --- */
[data-theme="dark"] .student-card,
[data-theme="dark"] .agent-card,
[data-theme="dark"] .teacher-card,
[data-theme="dark"] .staff-card,
[data-theme="dark"] .history-card,
[data-theme="dark"] .honor-card,
[data-theme="dark"] .classmate-card,
[data-theme="dark"] .divisao-card,
[data-theme="dark"] .sige-student-card,
[data-theme="dark"] .student-result,
[data-theme="dark"] .log-card,
[data-theme="dark"] .name-card,
[data-theme="dark"] .grade-card,
[data-theme="dark"] .payment-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .aula-card,
[data-theme="dark"] .tool-card {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
    color: var(--layout-content-text) !important;
}

[data-theme="dark"] .student-card:hover,
[data-theme="dark"] .agent-card:hover,
[data-theme="dark"] .teacher-card:hover,
[data-theme="dark"] .staff-card:hover,
[data-theme="dark"] .history-card:hover,
[data-theme="dark"] .honor-card:hover,
[data-theme="dark"] .classmate-card:hover,
[data-theme="dark"] .divisao-card:hover,
[data-theme="dark"] .sige-student-card:hover,
[data-theme="dark"] .student-result:hover,
[data-theme="dark"] .log-card:hover,
[data-theme="dark"] .name-card:hover,
[data-theme="dark"] .grade-card:hover,
[data-theme="dark"] .aula-card:hover,
[data-theme="dark"] .tool-card:hover {
    background: #273548 !important;
}

/* --- Cards com super-mini-pauta-active --- */
[data-theme="dark"] .divisao-card.super-mini-pauta-active {
    background: rgba(61, 158, 120, 0.1) !important;
}

/* --- Stat cards e stat items --- */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .sige-stat,
[data-theme="dark"] .stat-badge {
    color: #fff !important;
}

[data-theme="dark"] .stat-card {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
}

/* --- Titulos, subtitulos e textos dentro de cards --- */
[data-theme="dark"] .divisao-title,
[data-theme="dark"] .student-name,
[data-theme="dark"] .agent-name,
[data-theme="dark"] .teacher-name,
[data-theme="dark"] .honor-name,
[data-theme="dark"] .history-title,
[data-theme="dark"] .log-title,
[data-theme="dark"] .name-new,
[data-theme="dark"] .card-title,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .grade-value,
[data-theme="dark"] .info-value,
[data-theme="dark"] .detail-value {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .divisao-subtitle,
[data-theme="dark"] .student-num,
[data-theme="dark"] .student-info,
[data-theme="dark"] .agent-info,
[data-theme="dark"] .teacher-info,
[data-theme="dark"] .honor-info,
[data-theme="dark"] .history-subtitle,
[data-theme="dark"] .log-subtitle,
[data-theme="dark"] .log-date,
[data-theme="dark"] .card-subtitle,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .grade-label,
[data-theme="dark"] .info-label,
[data-theme="dark"] .detail-label,
[data-theme="dark"] .detail-item,
[data-theme="dark"] .name-before,
[data-theme="dark"] .name-after {
    color: #94a3b8 !important;
}

/* --- Badges --- */
[data-theme="dark"] .sige-badge,
[data-theme="dark"] .detail-badge {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

/* --- Elementos de ordem/ranking --- */
[data-theme="dark"] .student-order,
[data-theme="dark"] .card-order,
[data-theme="dark"] .history-order,
[data-theme="dark"] .rank-normal {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

/* --- Search boxes --- */
[data-theme="dark"] .search-box,
[data-theme="dark"] .search-box input {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
    color: var(--layout-content-text) !important;
}

[data-theme="dark"] .search-box input::placeholder {
    color: #64748b !important;
}

/* --- Labels e textos de formularios --- */
[data-theme="dark"] .bulk-label,
[data-theme="dark"] .filter-label {
    color: #cbd5e1 !important;
}

/* --- Bulk buttons (gerenciadorTrimestres etc.) --- */
[data-theme="dark"] .bulk-btn {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .bulk-btn-I:hover,
[data-theme="dark"] .bulk-btn-I.active {
    background: var(--sige-primary) !important;
    border-color: var(--sige-primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .bulk-btn-II:hover,
[data-theme="dark"] .bulk-btn-II.active {
    background: #3d9e78 !important;
    border-color: #3d9e78 !important;
    color: #fff !important;
}

[data-theme="dark"] .bulk-btn-III:hover,
[data-theme="dark"] .bulk-btn-III.active {
    background: #c99a50 !important;
    border-color: #c99a50 !important;
    color: #fff !important;
}

[data-theme="dark"] .bulk-btn-conselho:hover,
[data-theme="dark"] .bulk-btn-conselho.active {
    background: #8878b8 !important;
    border-color: #8878b8 !important;
    color: #fff !important;
}

[data-theme="dark"] .bulk-btn-todos:hover,
[data-theme="dark"] .bulk-btn-todos.active {
    background: #d46a6a !important;
    border-color: #d46a6a !important;
    color: #fff !important;
}

/* --- Toggle checkboxes --- */
[data-theme="dark"] .toggle-slider {
    background-color: #475569 !important;
}

[data-theme="dark"] .toggle-checkbox input:checked + .toggle-slider {
    background: linear-gradient(135deg, #8878b8, #7666a8) !important;
}

[data-theme="dark"] .toggle-checkbox.toggle-I input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--sige-primary), var(--sige-primary-hover)) !important;
}

[data-theme="dark"] .toggle-checkbox.toggle-II input:checked + .toggle-slider {
    background: linear-gradient(135deg, #3d9e78, #2d8a65) !important;
}

[data-theme="dark"] .toggle-checkbox.toggle-III input:checked + .toggle-slider {
    background: linear-gradient(135deg, #c99a50, #b38040) !important;
}

[data-theme="dark"] .toggle-checkbox.toggle-conselho input:checked + .toggle-slider {
    background: linear-gradient(135deg, #8878b8, #7666a8) !important;
}

[data-theme="dark"] .toggle-checkbox.toggle-todos input:checked + .toggle-slider {
    background: linear-gradient(135deg, #d46a6a, #c25454) !important;
}

/* --- Trimestre toggle labels --- */
[data-theme="dark"] .trimestre-toggle label {
    color: #94a3b8 !important;
}

/* --- Super Mini Pauta buttons --- */
[data-theme="dark"] .super-mini-pauta-btn.inactive {
    background: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .super-mini-pauta-toggle {
    border-color: var(--ui-card-border) !important;
}

/* --- Grade boxes e items --- */
[data-theme="dark"] .grade-box,
[data-theme="dark"] .grade-item,
[data-theme="dark"] .grade-header {
    background: #273548 !important;
    border-color: var(--ui-card-border) !important;
    color: var(--layout-content-text) !important;
}

/* --- Info cards e sections --- */
[data-theme="dark"] .info-card,
[data-theme="dark"] .info-card-header,
[data-theme="dark"] .comments-section,
[data-theme="dark"] .eval-form-section,
[data-theme="dark"] .indicators-legend,
[data-theme="dark"] .school-list,
[data-theme="dark"] .history-changes,
[data-theme="dark"] .academic-course {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
    color: var(--layout-content-text) !important;
}

/* --- Tabelas --- */
[data-theme="dark"] .sige-table th {
    background: var(--ui-table-header-bg) !important;
    color: var(--layout-content-text) !important;
    border-color: var(--ui-card-border) !important;
}

[data-theme="dark"] .sige-table td {
    border-color: var(--ui-card-border) !important;
    color: var(--layout-content-text) !important;
}

[data-theme="dark"] .sige-table tbody tr:nth-child(odd) {
    background: var(--ui-table-row-odd) !important;
}

[data-theme="dark"] .sige-table tbody tr:nth-child(even) {
    background: var(--ui-table-row-even) !important;
}

[data-theme="dark"] .sige-table tbody tr:hover {
    background: #273548 !important;
}

/* --- Sige cards container --- */
[data-theme="dark"] .sige-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-teal) !important;
    color: var(--layout-content-text) !important;
}

/* --- Podium (quadro de honra) --- */
[data-theme="dark"] .podium-container {
    background: linear-gradient(135deg, #1e293b 0%, #273548 100%) !important;
}

[data-theme="dark"] .podium-card {
    background: var(--ui-card-bg) !important;
    color: var(--layout-content-text) !important;
}

/* --- Horarios - dia columns --- */
[data-theme="dark"] .dia-column {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
}

[data-theme="dark"] .dia-header {
    background: #273548 !important;
    color: #cbd5e1 !important;
}

/* --- Diff added/removed (historico) --- */
[data-theme="dark"] .diff-added {
    background: rgba(61, 158, 120, 0.15) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .diff-removed {
    background: rgba(212, 106, 106, 0.15) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .name-before {
    background: rgba(212, 106, 106, 0.1) !important;
    border-color: rgba(212, 106, 106, 0.2) !important;
}

[data-theme="dark"] .name-after {
    background: rgba(61, 158, 120, 0.1) !important;
    border-color: rgba(61, 158, 120, 0.2) !important;
}

/* --- Modais locais --- */
[data-theme="dark"] .modal-evaluation,
[data-theme="dark"] .modal-admin-eval {
    background: var(--ui-card-bg) !important;
    color: var(--layout-content-text) !important;
}

/* --- Fotos/avatares com borda --- */
[data-theme="dark"] .student-photo,
[data-theme="dark"] .agent-photo,
[data-theme="dark"] .teacher-photo,
[data-theme="dark"] .classmate-photo {
    border-color: var(--ui-card-border) !important;
}

/* --- Selects dentro de cards (reconfirmados, relatorioDasTurmas) --- */
[data-theme="dark"] .turmaSeleccionar,
[data-theme="dark"] .sige-card-select {
    background: var(--ui-input-bg) !important;
    border-color: var(--ui-input-border) !important;
    color: var(--ui-input-text) !important;
}

/* --- Searchable dropdown --- */
[data-theme="dark"] .searchable-dropdown {
    background: var(--glass-bg-strong) !important;
    border-color: var(--glass-border-teal) !important;
    box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
}

[data-theme="dark"] .searchable-item:hover,
[data-theme="dark"] .searchable-item.focused {
    background: var(--glass-border-teal) !important;
}

[data-theme="dark"] .searchable-item.selected {
    background: var(--glass-border-strong) !important;
}

/* --- Filter items (quadro honra etc.) --- */
[data-theme="dark"] .filter-item {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
    color: var(--layout-content-text) !important;
}

[data-theme="dark"] .honor-select,
[data-theme="dark"] .honor-search {
    background: var(--ui-input-bg) !important;
    border-color: var(--ui-input-border) !important;
    color: var(--ui-input-text) !important;
}

/* --- Chat IA --- */
[data-theme="dark"] .sofia-chat.light {
    background: var(--ui-card-bg) !important;
    color: var(--layout-content-text) !important;
}

[data-theme="dark"] .sofia-chat.light .sofia-message.assistant .sofia-message-bubble {
    background: #273548 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .sofia-chat.light .sofia-input-wrapper {
    background: #273548 !important;
    border-color: var(--ui-card-border) !important;
}

[data-theme="dark"] .sofia-chat.light .sofia-suggestion {
    background: #273548 !important;
    border-color: var(--ui-card-border) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .sofia-chat.light .sofia-header-btn {
    background: #273548 !important;
    color: #cbd5e1 !important;
}

/* --- Mensagens (chat) --- */
[data-theme="dark"] #message {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .submit-button {
    background-color: #0e7490 !important;
}

/* --- Empty state --- */
[data-theme="dark"] .sige-empty,
[data-theme="dark"] .empty-state {
    color: #94a3b8 !important;
}

/* --- Paginacao --- */
[data-theme="dark"] .pagination-btn,
[data-theme="dark"] .page-btn {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-card-border) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .pagination-btn:hover,
[data-theme="dark"] .page-btn:hover {
    background: #334155 !important;
}

/* --- Tool cards (ferramentasDoAdmin) --- */
[data-theme="dark"] .tool-card-body {
    color: #94a3b8 !important;
}

[data-theme="dark"] .tool-card-title {
    color: #f1f5f9 !important;
}

/* ====================================
   MOBILE: Prevenir auto-zoom em inputs
   iOS Safari faz zoom quando font-size < 16px
   ==================================== */
@media screen and (max-width: 1024px) {
    .sige-form-input,
    .sige-form-select,
    .sige-form-textarea,
    .sige-search-input,
    .sige-card-select,
    .glass-select-trigger,
    .header-search-wrapper .sige-searchable-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ====================================
   SIGE SELECT DROPDOWN (JS create_select)
   ==================================== */
.sige-select-wrapper {
    position: relative;
}

/* Fix z-index quando dropdown esta aberto - eleva o wrapper acima de outros elementos */
.sige-select-wrapper:focus-within {
    z-index: 1001;
}

.sige-select-wrapper:has(.sige-select-dropdown:not(.hidden)) {
    z-index: 1001;
}

/* Fix: Elementos pai com transforms precisam de z-index alto quando contêm dropdown aberto */
.sige-card:has(.sige-select-dropdown:not(.hidden)),
.sige-card:focus-within,
.formularioNotas:has(.sige-select-dropdown:not(.hidden)),
.formularioNotas:focus-within {
    z-index: 100;
    position: relative;
    transform: none !important; /* Remove transform para evitar stacking context issues */
}

.sige-select-container {
    position: relative;
    display: flex;
    align-items: center;
}

.sige-select-search {
    cursor: pointer;
    padding-right: 35px !important;
}

.sige-select-search:not([readonly]) {
    cursor: text;
}

.sige-select-arrow {
    position: absolute;
    right: 12px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.sige-select-wrapper:has(.sige-select-dropdown:not(.hidden)) .sige-select-arrow {
    transform: rotate(180deg);
}

.sige-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
    background: var(--glass-bg-strong, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--glass-border, rgba(148, 163, 184, 0.3));
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--glass-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.15));
    margin-top: 4px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sige-select-dropdown.hidden {
    display: none;
}

.sige-select-option {
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 14px;
    color: var(--text-primary, #1e293b);
    border-bottom: 1px solid var(--glass-border-light, rgba(148, 163, 184, 0.1));
}

.sige-select-option:last-child {
    border-bottom: none;
}

.sige-select-option:hover,
.sige-select-option.highlighted,
.sige-select-option.focused {
    background: var(--accent-primary-light, rgba(59, 130, 246, 0.1));
}

.sige-select-option.selected {
    background: var(--accent-primary, #3b82f6);
    color: #ffffff;
}

.sige-select-option.selected:hover {
    background: var(--accent-primary-hover, #2563eb);
}

.sige-select-empty {
    padding: 12px 14px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    font-style: italic;
}

/* Dark theme para select dropdown */
[data-theme="dark"] .sige-select-dropdown {
    background: var(--ui-card-bg, #1e293b);
    border-color: var(--ui-card-border, #334155);
}

[data-theme="dark"] .sige-select-option {
    color: #e2e8f0;
    border-bottom-color: rgba(148, 163, 184, 0.1);
}

[data-theme="dark"] .sige-select-option:hover,
[data-theme="dark"] .sige-select-option.highlighted,
[data-theme="dark"] .sige-select-option.focused {
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .sige-select-option.selected {
    background: var(--accent-primary, #3b82f6);
    color: #ffffff;
}

[data-theme="dark"] .sige-select-empty {
    color: #64748b;
}

[data-theme="dark"] .sige-select-arrow {
    color: #94a3b8;
}

/* ===== Validação BI ↔ Província ===== */
.bi-prov-ok {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; margin-top: 4px;
    font-size: 0.72rem; font-weight: 500;
    color: #15803d; background: #f0fdf4;
    border-radius: 6px; border: 1px solid #bbf7d0;
}
.bi-prov-erro {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 10px; margin-top: 4px;
    font-size: 0.72rem; font-weight: 500;
    color: #dc2626; background: #fef2f2;
    border-radius: 6px; border: 1px solid #fecaca;
}
.bi-prov-erro strong, .bi-prov-ok strong { font-weight: 700; }
[data-theme="dark"] .bi-prov-ok { background: #052e16; color: #4ade80; border-color: #166534; }
[data-theme="dark"] .bi-prov-erro { background: #450a0a; color: #f87171; border-color: #991b1b; }

/* ═══ Validação de telefone (campos de formulário) ═══ */
.ag-tel-erro {
    font-size: 0.72rem;
    color: #dc2626;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    animation: ag-shake 0.25s ease;
}
@keyframes ag-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

/* ═══ Visualizador de Documentos (modal com o relatório renderizado) ═══
   Usado por `shared/js/domain/visualizador_documento.js` +
   `shared/php/components/modal_visualizador_documento.php`. */
/* Janela: 90% da largura, altura toda do ecrã (o documento é o conteúdo, não
   um detalhe dentro de um formulário — merece o espaço todo). */
.vdoc-overlay { padding: 0 !important; }
.sige-modal.vdoc-modal {
    width: 90vw !important;
    max-width: 90vw !important;
    min-width: 0 !important;
    height: 100vh;
    height: 100dvh;          /* barra de endereço do telemóvel não corta o fundo */
    max-height: none;
    border-radius: 0;
}

/* Cabeçalho compacto — rouba o mínimo de altura ao documento */
.vdoc-modal .sige-modal-header { padding: 9px 14px 9px 18px; gap: 14px; }
.vdoc-modal .sige-modal-icon   { width: 34px; height: 34px; font-size: .95rem; }
.vdoc-modal .sige-modal-title  { font-size: 1.02rem; line-height: 1.25; }
.vdoc-modal .sige-modal-subtitle {
    font-size: .74rem;
    opacity: .85;
    margin: 1px 0 0;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Acções do cabeçalho ─────────────────────────────────────────────────
   Botões translúcidos sobre a cor do cabeçalho: legíveis nos dois temas sem
   depender de tokens de superfície (o cabeçalho é sempre colorido). */
.vdoc-acoes {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
}
.vdoc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vdoc-btn i { font-size: .92rem; opacity: .95; }
.vdoc-btn:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.vdoc-btn:active { transform: translateY(0); box-shadow: none; }
.vdoc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Alunos com baixa (ocultar/mostrar) — o número fica visível mesmo no telemóvel,
   onde o texto do botão se esconde. */
.vdoc-baixa-n {
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: .72rem;
    text-align: center;
    background: rgba(255, 255, 255, .9);
    color: #1f2937;
}
.vdoc-baixa-ocultos { border-style: dashed; }

/* Bloqueado enquanto o documento está a ser gerado (ver estadoAccoes()).
   `pointer-events: none` é o que trava a ÂNCORA do Descarregar — um `<a>` não
   respeita o atributo `disabled`. */
.vdoc-btn-off {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Acção principal — sólida, para se distinguir das secundárias */
.vdoc-btn-primario {
    background: #fff;
    border-color: #fff;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
.vdoc-btn-primario:hover { background: #fff; color: #0f172a; box-shadow: 0 8px 20px rgba(0, 0, 0, .24); }

/* Confirmação de "endereço copiado" — o ícone troca para um visto durante ~1,6s.
   Verde fixo (não token): a barra do visualizador tem fundo escuro próprio em
   qualquer tema, tal como o .vdoc-btn-primario já assume. */
.vdoc-btn-copiado {
    background: var(--color-green, #22c55e) !important;
    border-color: var(--color-green, #22c55e) !important;
    color: #fff !important;
}

/* Ferramentas do documento — só ícone, quadradas, com o nome no `title` */
.vdoc-btn-ico {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 9px;
}
.vdoc-btn-ico i { font-size: .95rem; }

/* Atalho de teclado impresso no botão */
.vdoc-kbd {
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
    opacity: .9;
}
.vdoc-btn-primario .vdoc-kbd {
    background: rgba(15, 23, 42, .08);
    border-color: rgba(15, 23, 42, .12);
}
/* ═══ Descarregar: botão (PDF) + seta (Word/Excel) ═══
   O par forma um botão só — cantos arredondados apenas nas pontas de fora. */
.vdoc-dl { position: relative; display: inline-flex; align-items: center; }
.vdoc-dl .vdoc-btn-primario {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.vdoc-btn-seta {
    padding: 0;
    width: 24px;
    height: 36px;
    justify-content: center;
    border-radius: 0 9px 9px 0;
    border-left: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
    border-color: #fff;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
.vdoc-btn-seta:hover { background: #fff; color: #0f172a; box-shadow: 0 8px 20px rgba(0, 0, 0, .24); }
.vdoc-btn-seta i { font-size: .7rem; }

.vdoc-dl-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 168px;
    padding: 6px;
    border-radius: 10px;
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.vdoc-dl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: .85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.vdoc-dl-item:hover { background: var(--ui-input-bg); }
.vdoc-dl-item i { width: 16px; text-align: center; font-size: .95rem; }
.vdoc-dl-item[data-vdoc-formato="pdf"] i { color: var(--color-red); }
.vdoc-dl-item[data-vdoc-formato="word"] i { color: var(--color-blue); }
.vdoc-dl-item[data-vdoc-formato="excel"] i { color: var(--color-green); }
/* CSV noutra cor que não o verde do Excel: abre no Excel, mas não é a folha
   formatada — é só a tabela de dados. */
.vdoc-dl-item[data-vdoc-formato="csv"] i { color: var(--color-teal, #0d9488); }

.vdoc-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 3px;
    background: rgba(255, 255, 255, .28);
}

.vdoc-body {
    padding: 0;
    background: var(--ui-input-bg);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;   /* âncora do véu de espera (.vdoc-espera) */
}

/* Véu "a carregar" por cima do iframe — usado enquanto o editor arranca */
.vdoc-espera {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--ui-input-bg);
}

/* ── Espera do documento: livro a folhear-se ─────────────────────────────────
   Substitui o spinner genérico. As folhas são SEMPRE brancas, em qualquer tema
   — mesma convenção (e mesmo motivo) do `.vdoc-frame`: representam o papel do
   documento, não uma superfície da aplicação. Por isso os tons do miolo são
   cinzentos sobre branco e NÃO usam os tokens de superfície. A legenda, os
   passos e a barra, esses sim, seguem os tokens. */
.vdoc-load {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 42px;            /* o livro tem sombra e inclinação — precisa de ar */
    width: 100%;
}

/* ── O livro ──────────────────────────────────────────────────────────────── */
.vdoc-livro {
    position: relative;
    width: 340px;
    height: 238px;
    flex-shrink: 0;
    perspective: 1400px;          /* dá profundidade real ao virar das páginas */
    perspective-origin: 50% 40%;
    animation: vdocLivroRespira 4s ease-in-out infinite;
}
@keyframes vdocLivroRespira {
    0%, 100% { transform: rotateX(11deg) rotateZ(-0.6deg); }
    50%      { transform: rotateX(8deg)  rotateZ(0.6deg); }
}

/* Capa/sombra por baixo — o livro assenta em algo */
.vdoc-livro-capa {
    position: absolute;
    inset: -8px -10px -6px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, .10), rgba(15, 23, 42, .04));
    box-shadow: 0 22px 38px rgba(15, 23, 42, .22);
}

/* As duas folhas abertas */
.vdoc-folha {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    /* SEM isto o padding soma-se aos 50% (198px em vez de 170) e a folha direita
       sobrepõe-se à esquerda, tapando-lhe o timbre e a frase. Mesmo defeito que a
       regra 27d apanhou nos campos de formulário. */
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 14px;
    overflow: hidden;
    text-align: left;   /* o .vdoc-estado à volta é center — não herdar aqui */
}
.vdoc-folha-esq {
    left: 0;
    border-radius: 8px 2px 2px 8px;
    box-shadow: inset -14px 0 18px -14px rgba(15, 23, 42, .28);
}
.vdoc-folha-dir {
    right: 0;
    border-radius: 2px 8px 8px 2px;
    box-shadow: inset 14px 0 18px -14px rgba(15, 23, 42, .28);
}

/* Vinco central */
.vdoc-lombada {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        rgba(15, 23, 42, .16), rgba(15, 23, 42, .05), rgba(15, 23, 42, .16));
    z-index: 4;
}

/* Miolo das folhas */
.vdoc-lin {
    height: 6px;
    border-radius: 3px;
    background: rgba(15, 23, 42, .11);
    flex-shrink: 0;
    animation: vdocEscrever 2.4s ease-in-out infinite;
}
.vdoc-folha .vdoc-lin:nth-child(2)  { animation-delay: .05s; }
.vdoc-folha .vdoc-lin:nth-child(3)  { animation-delay: .15s; }
.vdoc-folha .vdoc-lin:nth-child(4)  { animation-delay: .25s; }
.vdoc-folha .vdoc-lin:nth-child(5)  { animation-delay: .35s; }
.vdoc-folha .vdoc-lin:nth-child(6)  { animation-delay: .45s; }
.vdoc-folha .vdoc-lin:nth-child(7)  { animation-delay: .55s; }
@keyframes vdocEscrever { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.vdoc-lin-tit { height: 9px; background: rgba(15, 23, 42, .2); }
/* ── Timbre e texto da folha esquerda ─────────────────────────────────────── */
.vdoc-timbre { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.vdoc-marca {
    display: flex;
    flex-direction: column;
    min-width: 0;              /* sem isto o subtítulo estica a caixa e transborda */
    overflow: hidden;
    line-height: 1.15;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: rgba(15, 23, 42, .62);
}
.vdoc-marca em {
    font-style: normal;
    font-size: 5.6px;
    font-weight: 500;
    letter-spacing: .015em;
    color: rgba(15, 23, 42, .34);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vdoc-regua {
    height: 1px;
    background: rgba(15, 23, 42, .12);
    flex-shrink: 0;
    margin: 1px 0 2px;
}
/* A frase do sistema — é o "texto" que a folha mostra enquanto o documento
   verdadeiro não chega. Escolhida ao acaso pelo JS a cada abertura. */
.vdoc-frase {
    margin: 0;
    font-size: 8.5px;
    line-height: 1.5;
    font-weight: 500;
    color: rgba(15, 23, 42, .5);
    flex-shrink: 0;
    animation: vdocFraseEntra .8s ease both;
}
@keyframes vdocFraseEntra { from { opacity: 0; transform: translateY(4px); } }
.vdoc-frase-entra { animation: vdocFraseEntra .7s ease both; }
.vdoc-frase-b { animation-delay: .12s; }

/* Timbre da folha esquerda: o logótipo real do sistema. Sem fundo — o logo tem
   transparência e assenta directamente no branco da folha, como num relatório. */
.vdoc-selo {
    width: 30px; height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vdoc-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* respira ao mesmo ritmo das linhas a serem escritas */
    animation: vdocLogoRespira 2.4s ease-in-out infinite;
}
@keyframes vdocLogoRespira {
    0%, 100% { transform: scale(1);     opacity: .9; }
    50%      { transform: scale(1.08);  opacity: 1; }
}
/* Fallback do `onerror`: volta ao círculo cinzento de sempre. */
.vdoc-selo-vazio {
    border-radius: 50%;
    background: rgba(15, 23, 42, .13);
}
.vdoc-mini-tab {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.vdoc-mini-tab span {
    height: 13px;
    border-radius: 2px;
    background: rgba(15, 23, 42, .07);
    border: 1px solid rgba(15, 23, 42, .07);
}

/* ── As páginas que viram ─────────────────────────────────────────────────── */
.vdoc-paginas {
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    z-index: 3;
}
.vdoc-pag {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    animation: vdocVirar 3.9s cubic-bezier(.62, .04, .38, .96) infinite;
    /* páginas escalonadas -> folhear contínuo, nunca duas ao mesmo tempo */
}
.vdoc-pag-1 { animation-delay: 0s; }
.vdoc-pag-2 { animation-delay: 1.3s; }
.vdoc-pag-3 { animation-delay: 2.6s; }

@keyframes vdocVirar {
    0%        { transform: rotateY(0deg)    translateZ(0);    opacity: 1; }
    15%       { transform: rotateY(-90deg)  translateZ(16px); opacity: 1; }  /* a meio, levantada */
    /* Desvanece ANTES de assentar na folha esquerda: se aterrasse por completo
       tapava o timbre e a frase — que são precisamente o que há para ler
       enquanto se espera. Lê-se como a página a ser absorvida pelo maço. */
    22%       { transform: rotateY(-140deg) translateZ(9px);  opacity: .85; }
    30%, 100% { transform: rotateY(-180deg) translateZ(0);    opacity: 0; }
}

/* Sombreado que acompanha o virar — a folha apanha menos luz a meio do gesto,
   que é o que torna o movimento legível em vez de um rectângulo a rodar. */
.vdoc-pag-face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(15, 23, 42, .22), rgba(15, 23, 42, 0) 65%);
    opacity: 0;
    animation: vdocSombraVirar 3.9s cubic-bezier(.62, .04, .38, .96) infinite;
    animation-delay: inherit;
    pointer-events: none;
}
.vdoc-pag-1 .vdoc-pag-face::after { animation-delay: 0s; }
.vdoc-pag-2 .vdoc-pag-face::after { animation-delay: 1.3s; }
.vdoc-pag-3 .vdoc-pag-face::after { animation-delay: 2.6s; }
@keyframes vdocSombraVirar {
    0%        { opacity: 0; }
    15%       { opacity: 1; }
    24%, 100% { opacity: 0; }
}

.vdoc-pag-face {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    backface-visibility: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 14px;
    overflow: hidden;
    text-align: left;
}
.vdoc-pag-frente {
    border-radius: 2px 8px 8px 2px;
    box-shadow: inset 14px 0 18px -14px rgba(15, 23, 42, .28), 0 6px 16px rgba(15, 23, 42, .14);
}
.vdoc-pag-verso {
    transform: rotateY(180deg);
    border-radius: 8px 2px 2px 8px;
    box-shadow: inset -14px 0 18px -14px rgba(15, 23, 42, .28);
}
/* as linhas das páginas em movimento não pulsam — seria ruído a mais */
.vdoc-pag .vdoc-lin { animation: none; opacity: .85; }

/* ── Legenda, passos e barra ──────────────────────────────────────────────── */
.vdoc-load-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.vdoc-load-fase {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text-primary);
    text-align: center;
}
.vdoc-load-fase i {
    font-size: 1.15rem;
    color: var(--color-green);
    animation: vdocIconePulsa 1.6s ease-in-out infinite;
}
@keyframes vdocIconePulsa {
    0%, 100% { transform: scale(1);    opacity: .85; }
    50%      { transform: scale(1.16); opacity: 1; }
}
/* entrada da legenda a cada troca de fase (classe posta pelo JS) */
.vdoc-fase-entra { animation: vdocFaseEntra .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes vdocFaseEntra {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* Ritmo — três pontos em perseguição. NÃO é uma barra de passos: como as
   mensagens ciclam indefinidamente, uma régua de progresso prometeria um fim
   que ela própria desmentiria ao dar a volta. Isto só diz "está a trabalhar". */
.vdoc-pontos { display: flex; align-items: center; gap: 9px; }
.vdoc-pontos i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--color-green);
    opacity: .28;
    animation: vdocPonto 1.35s ease-in-out infinite;
}
.vdoc-pontos i:nth-child(2) { animation-delay: .18s; }
.vdoc-pontos i:nth-child(3) { animation-delay: .36s; }
@keyframes vdocPonto {
    0%, 70%, 100% { opacity: .28; transform: scale(1); }
    35%           { opacity: 1;   transform: scale(1.45); }
}

/* Barra INDETERMINADA — não finge saber a percentagem (ver o JS) */
.vdoc-load-barra {
    display: block;
    width: 230px;
    max-width: 62vw;
    height: 5px;
    border-radius: 999px;
    background: var(--ui-card-border);
    overflow: hidden;
}
.vdoc-load-barra i {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--color-green) 45%, transparent), var(--color-green));
    animation: vdocBarra 1.4s ease-in-out infinite;
}
@keyframes vdocBarra {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(270%); }
}

/* Quem pediu menos movimento fica com o livro parado e a legenda a mudar. */
@media (prefers-reduced-motion: reduce) {
    .vdoc-livro,
    .vdoc-pag,
    .vdoc-lin,
    .vdoc-logo,
    .vdoc-frase,
    .vdoc-pontos i,
    .vdoc-load-fase i,
    .vdoc-fase-entra { animation: none; }
    .vdoc-pag { display: none; }             /* nada a virar */
    .vdoc-pontos i { opacity: .5; }
    .vdoc-livro { transform: none; }
    .vdoc-load-barra i { animation: vdocBarraSuave 2s ease-in-out infinite; width: 100%; }
    @keyframes vdocBarraSuave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

/* Ecrã pequeno: o modal ocupa o ecrã todo, o livro encolhe para dar ar */
@media (max-width: 900px) {
    .vdoc-livro { width: 244px; height: 172px; }
    .vdoc-load { gap: 28px; }
    .vdoc-load-fase { font-size: 1.08rem; }
    .vdoc-folha, .vdoc-pag-face { padding: 13px 11px; gap: 7px; }
    .vdoc-lin { height: 5px; }
    .vdoc-selo { width: 26px; height: 26px; }
    .vdoc-marca { font-size: 10px; }
    .vdoc-marca em { font-size: 5.5px; }
    .vdoc-frase { font-size: 7px; }
}

.vdoc-espera p { margin: 0; }
.vdoc-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;      /* a folha do documento é sempre branca, em qualquer tema */
    min-height: 0;
}
/* Vista de leitura (telemóvel): a folha é montada à largura REAL e encolhida
   com transform até caber. O palco dá-lhe o espaço já encolhido, para o modal
   saber quanto tem de rolar — um `scale()` não altera o tamanho ocupado.
   Ver `ajustarLeituraAoEcra()` em visualizador_documento.js. */
.vdoc-palco-leitura {
    width: 100%;
    flex: none;            /* a altura é a do documento encolhido, não a do modal */
    overflow: hidden;      /* a folha encolhida nunca empurra a página para o lado */
    background: #fff;
}
/* Na vista de leitura o corpo do modal é que rola (o iframe tem a altura toda
   do documento, para não haver duas barras de deslocação encavalitadas). */
.vdoc-body-leitura {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* A barra explica o que se está a ver e dá o PDF — na vista de leitura tem de
   aparecer mesmo em ecrã grande (um desktop com o visualizador de PDF
   desligado cai aqui), e fica colada ao topo enquanto se rola o documento. */
.vdoc-body-leitura .vdoc-barra-movel {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
}
.vdoc-palco-leitura > .vdoc-frame {
    flex: none;
    transform-origin: 0 0;
    display: block;
}
.vdoc-estado {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}
.vdoc-estado > i      { font-size: 2.2rem; color: var(--color-green); }
.vdoc-estado h3       { color: var(--text-primary); font-weight: 600; margin: 0; }
.vdoc-estado p        { margin: 0; max-width: 460px; }
.vdoc-estado-erro > i { color: var(--color-red); }

/* ── Modo 'ficheiro' — anexos, comprovativos, processos ──────────────────────
   Um relatório é sempre PDF e vive num iframe; um ficheiro guardado pode ser
   imagem, vídeo, áudio ou texto. O fundo da área de média é ESCURO e neutro
   (não segue o tema): é a convenção dos visualizadores de imagem, e é o que faz
   um talão fotografado destacar-se do papel branco à volta. */
.vdoc-anexo-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px;
    box-sizing: border-box;
    background: #1e293b;
    overflow: auto;
}
.vdoc-anexo-img,
.vdoc-anexo-video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.vdoc-anexo-video { background: #000; }
.vdoc-anexo-audio { width: 100%; max-width: 520px; }

.vdoc-anexo-texto {
    flex: 1;
    margin: 0;
    padding: 16px 20px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--ui-input-bg);
}

.vdoc-anexo-cartao > i { color: var(--text-muted); font-size: 3.4rem; }
.vdoc-anexo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--color-blue);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vdoc-anexo-btn:hover { filter: brightness(1.08); color: #fff; }

/* Página embutida num iframe (editor dentro do modal): sem barra lateral nem
   cabeçalho da aplicação — ver `layouts::inicioEmbutido()`. */
.app-embutido { width: 100%; height: 100%; }
.app-embutido-main { display: block; width: 100%; height: 100%; overflow-y: auto; padding: 0; }
/* Editor dentro do modal.
   Medido: com `width:98%` (ou 100% com 12px de padding) o conteúdo ficava a
   ~1061px num contentor de 1085 — praticamente encostado às bordas, e por isso
   "largo demais". Além disso a barra de deslocação come 15px só do lado direito,
   deixando as goteiras assimétricas (12px à esquerda, 27px à direita), o que
   desequilibra a leitura. Agora: goteiras largas e IGUAIS dos dois lados. */
.app-embutido-main { scrollbar-gutter: stable both-edges; }
.ed-embutido {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 28px;
    margin: 10px auto 0;
}
@media (max-width: 900px) {
    .ed-embutido { padding: 0 12px; }   /* no telemóvel o espaço é precioso */
}

/* Dentro do iframe não se repetem os elementos flutuantes da aplicação — já
   existem na página de fora e aqui só roubavam espaço ao documento. */
html.embutido #cwDock,
html.embutido #cwPanel { display: none !important; }

/* Com um documento aberto a página está em modo de leitura: os botões
   flutuantes do chat/jogos ficariam por cima do documento (e no telemóvel
   tapam mesmo o texto). */
body.vdoc-aberto #cwDock { display: none !important; }

/* Barra de escape do PDF em telemóvel (ver visualizador_documento.js) */
.vdoc-barra-movel {
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    font-size: .78rem;
    color: var(--text-secondary);
    background: var(--ui-card-bg);
    border-bottom: 1px solid var(--ui-card-border);
}
.vdoc-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--color-blue-dark);
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
    cursor: pointer;
}
.vdoc-mini-btn:active { transform: scale(.97); }

@media (max-width: 1250px) {
    .vdoc-kbd { display: none; }       /* espaço curto — fica só o ícone e o texto */
}

/* ── Telemóvel ──────────────────────────────────────────────────────────
   O documento passa a ocupar o ecrã todo (não faz sentido 90% num telefone) e
   as acções ficam só com ícone, com área de toque suficiente. */
@media (max-width: 900px) {
    .sige-modal.vdoc-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh;
        height: 100dvh;
        border-radius: 0 !important;   /* ecrã inteiro não leva cantos redondos */
    }
    .vdoc-modal .sige-modal-header { border-radius: 0 !important; }
    .vdoc-modal .sige-modal-header { padding: 8px 8px 8px 12px; gap: 8px; }
    .vdoc-modal .sige-modal-icon { display: none; }          /* espaço para o título */
    .vdoc-modal .sige-modal-title { font-size: .92rem; }
    .vdoc-modal .sige-modal-subtitle { display: none; }
    .vdoc-modal .sige-modal-header-content { min-width: 0; } /* deixa o título encolher */
    .vdoc-modal .sige-modal-title-group { min-width: 0; }
    .vdoc-modal .sige-modal-title {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .vdoc-btn-txt { display: none; }   /* só ícones */
    .vdoc-btn { padding: 9px 11px; }   /* alvo de toque ≥ 36px */
    .vdoc-btn i { font-size: 1rem; }
    .vdoc-acoes { gap: 5px; }
    .vdoc-sep { display: none; }
    /* A seta acompanha o botão maior do toque, e o menu abre para dentro */
    .vdoc-btn-seta { height: auto; align-self: stretch; width: 22px; }
    .vdoc-dl-menu { right: 0; min-width: 152px; }

    .vdoc-barra-movel { display: flex; }
}

/* Impressão — rede de segurança (só para quem imprime pelo MENU do browser).
   O caminho normal é o Ctrl+P/botão Imprimir, interceptados em JS e
   reencaminhados para o iframe do documento (ver visualizador_documento.js) —
   é esse que imprime o relatório INTEIRO. Isto aqui só evita que uma impressão
   feita pelo menu saia com a aplicação à volta.

   ⚠️ NÃO acrescentar overrides de layout (position/display/height no overlay,
   no .sige-modal ou no #vdocBody): testado, e qualquer um deles faz a página
   sair EM BRANCO — o iframe deixa de ser pintado. Só a troca de `visibility`
   funciona.

   Limitação conhecida (do browser, não do CSS): a página anfitriã não pagina o
   conteúdo de um iframe, logo sai apenas a parte visível do documento — 1
   página. Para o documento completo é o Ctrl+P/botão. */
@media print {
    body.vdoc-aberto * { visibility: hidden !important; }
    body.vdoc-aberto #modalVisualizadorDoc,
    body.vdoc-aberto #modalVisualizadorDoc .sige-modal,
    body.vdoc-aberto #vdocBody,
    body.vdoc-aberto .vdoc-frame,
    /* Modo 'ficheiro': imagem/texto não vivem num iframe */
    body.vdoc-aberto .vdoc-anexo-media,
    body.vdoc-aberto .vdoc-anexo-img,
    body.vdoc-aberto .vdoc-anexo-texto { visibility: visible !important; }

    /* O cabeçalho do modal (título e botões) não pertence ao documento */
    body.vdoc-aberto #modalVisualizadorDoc .sige-modal-header { display: none !important; }
}

/* ═══ Pergunta "gerar o comprovativo?" (PerguntaDocumento) ═══
   Componente do modal: shared/php/components/modal_pergunta_documento.php */
.pdoc-body { padding: 18px 20px 8px; }
.pdoc-pergunta {
    margin: 0 0 14px;
    font-size: .95rem;
    color: var(--text-primary);
}
.pdoc-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.pdoc-nota i { margin-top: 2px; color: var(--color-blue); }
.pdoc-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 16px; }
.pdoc-footer .sige-btn-primary,
.pdoc-footer .sige-btn-secondary { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 600px) {
    .pdoc-footer { flex-direction: column-reverse; }
    .pdoc-footer .sige-btn-primary,
    .pdoc-footer .sige-btn-secondary { width: 100%; justify-content: center; }
}

/* ── Opção "Editar documento" dos modais de relatórios ──────────────────────
   Ver app/formularios/opcao_editar_documento.php. Substituiu o bloco "Opções
   de Visualização" (Formato + Pré-visualizar), removido em 2026-08-01. */
.oed-bloco {
    margin: 4px 0 10px;
}
.oed-check {
    width: 100%;
    justify-content: flex-start;
}
.oed-check span i {
    margin-right: 4px;
    opacity: .75;
}
.oed-nota {
    margin: 6px 2px 0;
    font-size: .74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ═══ Modal de reemissão de documento (Proposta / Pré-Contrato) ═══ */
.emdoc-estado {
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.emdoc-estado-linhas { font-size: 12px; color: var(--text-primary); line-height: 1.7; }
.emdoc-estado-linhas i { color: var(--color-orange); margin-right: 4px; }
.emdoc-sep { margin: 0 8px; color: var(--text-muted); }
.emdoc-pergunta { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px 0; }
.emdoc-opcoes { display: flex; flex-direction: column; gap: 8px; }
.emdoc-opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 10px;
    border: 1.5px solid var(--ui-card-border);
    background: var(--ui-card-bg);
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.emdoc-opcao:hover {
    border-color: var(--color-teal);
    transform: translateX(2px);
    box-shadow: var(--ui-card-shadow);
}
.emdoc-opcao-ic {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px;
}
.emdoc-ic-via  { background: var(--color-blue); }
.emdoc-ic-nova { background: var(--color-purple); }
.emdoc-opcao-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.emdoc-opcao-txt strong { font-size: 13px; color: var(--text-primary); }
.emdoc-opcao-txt small { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.emdoc-opcao-seta { color: var(--text-muted); font-size: 12px; }
.emdoc-motivo { margin-top: 4px; }
.emdoc-motivo-accoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.emdoc-historico { margin-top: 14px; }
.emdoc-hist-titulo { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.emdoc-hist-titulo i { color: var(--color-orange); margin-right: 4px; }
.emdoc-hist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.emdoc-hist li {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-left: 2px solid var(--ui-card-border);
    background: var(--ui-input-bg);
    border-radius: 0 6px 6px 0;
}
.emdoc-hist-motivo { color: var(--text-muted); font-style: italic; }

/* =====================================================
   Visualizador — Enviar por e-mail
   ===================================================== */

/* Cartão do anexo: diz o que vai seguir, antes de se carregar em enviar. */
.vdoc-mail-anexo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: rgba(37, 99, 235, .06);
    border: 1px solid rgba(37, 99, 235, .18);
    font-size: .84rem;
    color: var(--text-primary, #1e293b);
}
.vdoc-mail-anexo i { color: #dc2626; font-size: 1.1rem; }

.vdoc-mail-dica {
    margin: -6px 0 12px;
    font-size: .74rem;
    color: var(--text-muted, #94a3b8);
}

.vdoc-mail-guardar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: .82rem;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
}
/* ⚠️ `display:flex` na classe anula o atributo `hidden` e a classe `.hidden`
   (regra 27h) — sem isto a caixa aparecia mesmo escondida. */
.vdoc-mail-guardar[hidden],
.vdoc-mail-guardar.hidden { display: none; }

.vdoc-mail-estado {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: .82rem;
}
.vdoc-mail-estado-info { background: rgba(37, 99, 235, .08); color: #1d4ed8; }
.vdoc-mail-estado-ok   { background: rgba(34, 197, 94, .10); color: #15803d; }
.vdoc-mail-estado-erro { background: rgba(239, 68, 68, .10); color: #b91c1c; }
.vdoc-mail-estado[hidden] { display: none; }

[data-theme="dark"] .vdoc-mail-anexo,
.dark .vdoc-mail-anexo { background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .28); }

/* ============================================================
   MENÇÕES — «chamaram-me a este registo»
   Partilhado pelas 5 páginas de Clientes/Equipa (modal_mencao.php + mencao.js).
   ⛔ O DESTAQUE é só para quem foi mencionado e ainda não deu por visto — se
   fosse para toda a gente deixava de ser um sinal e passava a ser decoração.
   ============================================================ */
.mencao-destaque {
    border-left: 4px solid #d97706 !important;
    background: rgba(217, 119, 6, .07) !important;
    box-shadow: 0 0 0 1px rgba(217, 119, 6, .18);
}
.mencao-destaque:hover { background: rgba(217, 119, 6, .11) !important; }

.mencao-registo {
    background: var(--glass-bg, rgba(255,255,255,.6));
    border: 1px solid var(--sige-border, rgba(0,0,0,.08));
    border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
    font-weight: 600; font-size: 14px;
}
.mencao-erro { color: #b91c1c; font-weight: 600; }

/* ⛔ Sem scroll PRÓPRIO: num modal a única barra de deslocação é a do `.sige-modal-body` (regra do dono, 2026-08-23). Duas barras encavalitadas escondem o tamanho real da lista e obrigam a duas rodas de rato. */
.mencao-equipa { display: flex; flex-direction: column; gap: 2px;
    border: 1px solid var(--sige-border, rgba(0,0,0,.08)); border-radius: 8px; padding: 6px; }
.mencao-pessoa { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.mencao-pessoa:hover { background: rgba(10, 125, 149, .08); }
.mencao-pessoa-nome { font-weight: 600; font-size: 13.5px; }
.mencao-pessoa-cargo { font-size: 12px; opacity: .7; }
.mencao-sem-email { margin-left: auto; font-size: 11.5px; color: #b45309; white-space: nowrap; }
.mencao-dica { display: block; font-size: 12px; opacity: .75; margin-top: 5px; }
.mencao-vazio { font-size: 13px; opacity: .75; padding: 8px; }

/* A mensagem da menção, à vista no cartão enquanto estiver por ler. */
.mencao-aviso {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 8px 0 2px; padding: 8px 12px; border-radius: 8px;
    background: rgba(217, 119, 6, .10); border: 1px solid rgba(217, 119, 6, .22);
}
.mencao-aviso-icone { color: #b45309; margin-top: 2px; }
.mencao-aviso-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mencao-aviso-quem { font-size: 12px; font-weight: 700; color: #b45309; }
.mencao-aviso-quando { font-weight: 500; opacity: .8; }
.mencao-aviso-dep { font-weight: 500; opacity: .8; font-style: italic; }
/* ⛔ A mensagem NÃO é truncada — é para ser lida antes de se marcar como visto. */
.mencao-aviso-msg { font-size: 13px; line-height: 1.4; white-space: pre-line; word-break: break-word; }
.mencao-aviso-mais { font-size: 11.5px; opacity: .8; }

[data-theme="dark"] .mencao-aviso,
.dark .mencao-aviso { background: rgba(217, 119, 6, .18); border-color: rgba(245, 158, 11, .35); }
[data-theme="dark"] .mencao-aviso-quem,
[data-theme="dark"] .mencao-aviso-icone,
.dark .mencao-aviso-quem, .dark .mencao-aviso-icone { color: #fbbf24; }

/* Atalho por departamento — marca a equipa toda de uma vez. */
.mencao-deps { margin-bottom: 8px; }
.mencao-dep-titulo { font-size: 12px; font-weight: 600; opacity: .7; margin-bottom: 5px; }
.mencao-dep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mencao-dep {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    background: rgba(10, 125, 149, .10); color: #0a7d95;
    border: 1px solid rgba(10, 125, 149, .22); cursor: pointer;
}
.mencao-dep:hover { background: rgba(10, 125, 149, .18); }
.mencao-dep-on { background: #0a7d95; color: #fff; }
.mencao-dep-n { font-size: 11px; background: rgba(0,0,0,.12); border-radius: 999px; padding: 1px 6px; }
.mencao-dep-on .mencao-dep-n { background: rgba(255,255,255,.25); }
/* ⛔ Equipa sem ninguém atribuído: fica visível mas inerte — escondê-la faria parecer que o
   departamento não existe, e clicá-la só daria um erro. */
.mencao-dep-off { opacity: .45; cursor: not-allowed; }
.mencao-dep-vazio { font-size: 12px; opacity: .75; margin-top: 6px; }

/* ══════════ Lembretes / Pendentes (2026-08-18) — modal + bloco «ficou pendente» ══════════
   Reutiliza o visual das menções (.mencao-pessoa/.mencao-registo); aqui só o que é próprio. */
.lembrete-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lembrete-chip {
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    background: rgba(183, 121, 31, .10); color: #b7791f;
    border: 1px solid rgba(183, 121, 31, .25); cursor: pointer;
}
.lembrete-chip-on { background: #b7791f; color: #fff; }
.lembrete-data { max-width: 170px; }
.lembrete-hora { max-width: 110px; }

/* O selo de prazo — a conta feita por quem desenha, não por quem lê. */
.lembrete-prazo { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.lembrete-prazo-perto  { color: #b7791f; }
.lembrete-prazo-hoje   { color: #b7791f; }
.lembrete-prazo-atraso { color: #dc2626; }
[data-theme="dark"] .lembrete-prazo-perto, [data-theme="dark"] .lembrete-prazo-hoje { color: #fbbf24; }
[data-theme="dark"] .lembrete-prazo-atraso { color: #f87171; }

/* Pendentes já existentes no registo, dentro do modal. */
.lembrete-exist-titulo { font-size: 12px; font-weight: 700; opacity: .75; margin: 10px 0 4px; }
.lembrete-exist {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px; margin-bottom: 4px;
    background: var(--ui-input-bg); border: 1px solid var(--ui-card-border);
}
.lembrete-exist-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.lembrete-exist-nota { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* Bloco «ficou pendente?» dos formulários de interacção/acompanhamento. */
.lembrete-bloco {
    margin-top: 10px; padding: 9px 12px; border-radius: 8px;
    background: rgba(183, 121, 31, .07); border: 1px dashed rgba(183, 121, 31, .35);
}
.lembrete-bloco-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-primary); }
.lembrete-bloco-check i { color: #b7791f; }
/* ⛔ regra 27h: um `display` de classe anularia o atributo `hidden` — e o `.hidden` do
   Tailwind pode não vencer o flex; a guarda explícita fica cá. */
.lembrete-bloco-campos { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.lembrete-bloco-campos.hidden { display: none !important; }
.lembrete-bloco-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lembrete-bloco-rotulo { font-size: 12px; font-weight: 700; opacity: .75; min-width: 84px; }
.lembrete-bloco-data { max-width: 160px; }
.lembrete-bloco-equipa { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.lembrete-bloco-equipa .mencao-pessoa { padding: 3px 7px; }
[data-theme="dark"] .lembrete-bloco { background: rgba(217, 119, 6, .12); border-color: rgba(245, 158, 11, .4); }
[data-theme="dark"] .lembrete-chip { color: #fbbf24; border-color: rgba(245, 158, 11, .4); background: rgba(217, 119, 6, .15); }
[data-theme="dark"] .lembrete-chip-on { background: #b7791f; color: #fff; }

.mencao-existentes { margin-top: 16px; }
.mencao-lista-titulo { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-bottom: 6px; }
.mencao-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 0;
    border-top: 1px solid var(--sige-border, rgba(0,0,0,.07)); font-size: 13px; }
.mencao-item-nome { font-weight: 600; }
.mencao-item-msg { flex: 1 1 100%; opacity: .8; font-size: 12.5px; }
.mencao-item-autor { font-size: 11.5px; opacity: .6; }
.mencao-visto { font-size: 11.5px; color: #2d8a65; }
.mencao-por-ver { font-size: 11.5px; color: #b45309; }

[data-theme="dark"] .mencao-destaque,
.dark .mencao-destaque { background: rgba(217, 119, 6, .16) !important; border-left-color: #f59e0b !important; }
[data-theme="dark"] .mencao-registo,
.dark .mencao-registo { background: rgba(255,255,255,.05); }

/* ====================================
   RESUMO DO MÊS — Leads / Apresentações / Formação (2026-08-19)
   Componente partilhado `resumo_mensal_crm.js`. Prefixo `.rmes-`.
   ==================================== */

.rmes { display: flex; flex-direction: column; gap: 16px; }

.rmes-faixa { border-left: 4px solid var(--color-indigo); background: rgba(109, 112, 181, .07);
    border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.rmes-faixa-mes { font-size: 15px; color: var(--text-primary); }
.rmes-faixa-mes i { color: var(--color-indigo); margin-right: 6px; }
.rmes-faixa-nota-mes { font-size: 12px; opacity: .7; margin-left: 8px; font-style: italic; }
.rmes-faixa-nota { font-size: 12.5px; line-height: 1.5; opacity: .82; color: var(--text-primary); }
.rmes-faixa-nota i { color: var(--color-indigo); margin-right: 4px; }

/* Barra do selector de mês próprio da tab (ver `resumo_mensal_crm.js`). */
.rmes-toolbar { margin-bottom: 14px; }
.rmes-toolbar-rotulo { display: flex; align-items: center; gap: 7px; font-size: 13px;
    font-weight: 700; opacity: .8; color: var(--text-primary); }
.rmes-toolbar-rotulo i { color: var(--color-indigo); }
.rmes-filtro-mes { max-width: 220px; margin-bottom: 0; }

.rmes-stats { display: flex; flex-wrap: wrap; gap: 10px; }

/* ⛔ O dark do design system pinta `.sige-mini-stat span` com `!important` e
   especificidade (0,2,1) — uma regra própria (0,1,1) desaparecia em escuro e todos os
   contadores ficavam da mesma cor. Duplicar com o mesmo prefixo (FRONTEND_COMMON § 6.1). */
.rmes-stat-forte span, .rmes-stat-forte i { color: var(--color-indigo); }
[data-theme="dark"] .rmes-stat-forte span,
[data-theme="dark"] .rmes-stat-forte i { color: #a5a8e0 !important; }

.rmes-painel { padding: 14px 16px; }
.rmes-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; opacity: .78; margin: 0 0 12px;
    color: var(--text-primary); }
.rmes-titulo i { opacity: .8; }
.rmes-titulo-n { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600;
    font-size: 12px; opacity: .8; }

/* ── Ritmo do mês ── */
.rmes-ritmo { display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; padding-bottom: 2px; }
.rmes-ritmo-col { flex: 1 1 0; min-width: 16px; display: flex; flex-direction: column;
    align-items: center; gap: 3px; }
.rmes-ritmo-valor { font-size: 10.5px; font-weight: 700; opacity: .7; height: 13px;
    color: var(--text-primary); }
.rmes-ritmo-barra { width: 100%; height: 68px; display: flex; align-items: flex-end;
    background: rgba(127, 127, 127, .09); border-radius: 4px; overflow: hidden; }
.rmes-ritmo-cheio { width: 100%; background: var(--color-indigo); border-radius: 4px;
    transition: height .2s ease; }
.rmes-ritmo-vazio { background: transparent; }
.rmes-ritmo-dia { font-size: 10px; opacity: .6; color: var(--text-primary); }

/* ── O que foi feito ── */
.rmes-tipos { display: flex; flex-direction: column; gap: 7px; }
.rmes-tipo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-primary); }
.rmes-tipo-nome { flex: 0 0 260px; display: flex; align-items: center; gap: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmes-tipo-nome i { opacity: .65; width: 14px; text-align: center; }
.rmes-tipo-barra { flex: 1 1 auto; height: 9px; background: rgba(127, 127, 127, .1);
    border-radius: 6px; overflow: hidden; }
.rmes-tipo-cheio { display: block; height: 100%; border-radius: 6px; background: var(--color-blue); }
.rmes-tipo-soma { flex: 0 0 auto; font-size: 11.5px; opacity: .7; white-space: nowrap; }
.rmes-tipo-n { flex: 0 0 34px; text-align: right; font-weight: 700; }
.rmes-tipo-pct { flex: 0 0 40px; text-align: right; font-size: 11.5px; opacity: .6; }

.rmes-cor-blue   { background: var(--color-blue); }
.rmes-cor-cyan   { background: var(--color-cyan); }
.rmes-cor-purple { background: var(--color-purple); }
.rmes-cor-teal   { background: var(--color-teal); }
.rmes-cor-green  { background: var(--color-green); }
.rmes-cor-indigo { background: var(--color-indigo); }
.rmes-cor-pink   { background: var(--color-pink); }
.rmes-cor-amber  { background: var(--color-orange); }
.rmes-cor-gray   { background: #9ca3af; }

/* ── Quem trabalhou ── */
.rmes-pessoas { display: flex; flex-direction: column; gap: 7px; }
.rmes-pessoa { border: 1px solid var(--sige-border, rgba(0, 0, 0, .08)); border-radius: 10px;
    overflow: hidden; }
.rmes-pessoa.aberta { border-color: var(--color-indigo); }
.rmes-pessoa-cab { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    background: transparent; border: 0; cursor: pointer; text-align: left; font-size: 13.5px;
    color: var(--text-primary); }
.rmes-pessoa-cab:hover { background: rgba(127, 127, 127, .07); }
.rmes-pessoa-seta { font-size: 11px; opacity: .5; transition: transform .15s ease; }
.rmes-pessoa.aberta .rmes-pessoa-seta { transform: rotate(90deg); }
.rmes-pessoa-pos { flex: 0 0 22px; text-align: center; font-weight: 700; opacity: .55; font-size: 12px; }
.rmes-pessoa-nome { flex: 1 1 auto; font-weight: 600; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmes-pessoa-nums { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* ⛔ regra 27h: um `display: flex` de classe anula o atributo `hidden` — o corpo ficava
   à vista com a seta a dizer o contrário. A guarda tem de ser explícita. */
.rmes-pessoa-corpo { display: flex; flex-direction: column; gap: 3px; padding: 4px 12px 10px 44px;
    border-top: 1px solid var(--sige-border, rgba(0, 0, 0, .06)); }
.rmes-pessoa-corpo[hidden] { display: none !important; }
.rmes-pessoa-linha { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
    padding: 3px 0; color: var(--text-primary); }
.rmes-pessoa-linha span:first-child { flex: 1 1 auto; opacity: .85; }
.rmes-pessoa-linha-n { flex: 0 0 auto; font-weight: 700; }
.rmes-pessoa-ultimo { font-size: 11.5px; opacity: .6; margin-top: 5px; color: var(--text-primary); }

/* ── Cronologia ── */
/* ⛔ **Sem scroll próprio** (pedido do dono, 2026-08-19): a lista cresce e quem lê usa o
   scroll da página. Uma caixa com scroll interno esconde o tamanho real do mês e obriga a
   duas rodas de rato na mesma página. */
.rmes-crono { display: flex; flex-direction: column; }
.rmes-acto { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 2px;
    border-bottom: 1px solid var(--sige-border, rgba(0, 0, 0, .06)); font-size: 12.5px;
    color: var(--text-primary); }
.rmes-acto:last-child { border-bottom: 0; }
.rmes-acto-data { flex: 0 0 108px; font-variant-numeric: tabular-nums; opacity: .65; font-size: 12px; }
.rmes-acto-q { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; opacity: .75;
    background: rgba(127, 127, 127, .12); border-radius: 5px; padding: 1px 6px; }
.rmes-acto-registo { flex: 1 1 180px; font-weight: 600; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmes-acto-quem { flex: 0 0 auto; opacity: .72; }
/* Tempo que o caso levou a resolver (2026-08-20) — só o Atendimento o traz. */
.rmes-acto-dur {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    color: var(--text-secondary);
    background: rgba(127, 127, 127, .12);
    border-radius: 999px; padding: 1px 8px;
}
.rmes-acto-dur i { opacity: .7; font-size: 10.5px; }
.rmes-acto-nota { flex: 1 1 100%; opacity: .62; font-size: 12px; padding-left: 116px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

[data-theme="dark"] .rmes-faixa { background: rgba(109, 112, 181, .16); }
[data-theme="dark"] .rmes-pessoa { border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .rmes-pessoa-cab:hover { background: rgba(255, 255, 255, .05); }

@media (max-width: 860px) {
    .rmes-tipo-nome { flex: 0 0 140px; }
    .rmes-acto-nota { padding-left: 0; }
    .rmes-ritmo-valor { display: none; }
}

/*
 * Telemóvel. Duas correcções medidas a 390 px (2026-08-20):
 *
 * ⛔ **O ritmo do mês não pode ter scroll lateral próprio** — 31 colunas a 16 px de mínimo
 * dão 586 px dentro de um painel de 295, e o gráfico passava a arrastar-se de lado. As
 * colunas encolhem (~7 px cada) e só se numeram os dias 1, 6, 11… — a leitura que se quer
 * dali é a FORMA do mês, não ler cada dia.
 *
 * ⛔ **A linha de «o que foi feito» passa a duas linhas** — com o nome do indicador a
 * ocupar 140 px de 295, a barra ficava com 51 px e deixava de comparar coisa nenhuma.
 * Nome em cima, barra e números por baixo.
 */
@media (max-width: 560px) {
    /* O `padding` dá margem aos rótulos do 1.º e do último dia, que ficam centrados numa
       coluna de ~7 px e eram cortados pela borda do painel. */
    .rmes-ritmo { padding: 0 8px; }
    .rmes-ritmo-col { min-width: 0; }
    .rmes-ritmo-col:not(:nth-child(5n+1)) .rmes-ritmo-dia { visibility: hidden; }
    .rmes-ritmo-dia { white-space: nowrap; }

    .rmes-tipo { flex-wrap: wrap; }
    .rmes-tipo-nome { flex: 1 1 100%; }
    .rmes-tipo-barra { flex: 1 1 auto; }

    /* O nome da pessoa vale mais do que os selos: fica com a linha inteira e os números
       passam para baixo, à esquerda. Antes lia-se «Miguel …» e «Diwantes…». */
    .rmes-pessoa-cab { flex-wrap: wrap; }
    .rmes-pessoa-nums { flex: 1 1 100%; justify-content: flex-start; }

    .rmes-acto-data { flex: 0 0 auto; }
    .rmes-acto-registo { flex: 1 1 100%; }
}

/* ====================================
   AUTORIA DE REGISTOS DO CRM (2026-08-20)
   Campo «Registar em nome de» — Atendimento e Actividades. Ver `autoria_crm.js`.
   ==================================== */

.acrm-campo { margin-bottom: 12px; }
.acrm-campo .sige-form-label i { color: var(--color-purple); margin-right: 4px; }
.acrm-select { width: 100%; }

/* O aviso é a consequência dita por extenso: o registo passa a contar para outra pessoa. */
.acrm-aviso {
    margin-top: 6px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--ui-input-bg);
    border-left: 3px solid var(--color-orange);
    border-radius: 6px;
    padding: 7px 10px;
}
.acrm-aviso i { color: var(--color-orange); margin-right: 5px; }

/* ⛔ `hidden` perde para qualquer `display` de classe (regra 27h). */
.acrm-aviso.hidden { display: none !important; }

.acrm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: .72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.acrm-badge i { color: var(--color-purple); font-size: .68rem; }

/* «Oculto» (2026-09-25): só aparece quando o registo é em nome de outra pessoa. */
.acrm-oculto {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; cursor: pointer;
    font-size: .82rem; line-height: 1.4; color: var(--text-primary);
    background: var(--ui-input-bg); border: 1px dashed var(--color-purple); border-radius: 8px; padding: 7px 10px;
}
.acrm-oculto input { margin-top: 3px; accent-color: var(--color-purple); }
.acrm-oculto i { color: var(--color-purple); }
.acrm-oculto.hidden { display: none !important; }
.acrm-badge-oculto { border-color: var(--color-purple); color: var(--color-purple); font-weight: 600; }

/* ====================================
   ESTRELAS E PONTOS NEGATIVOS DO CRM (2026-08-20)
   Componente partilhado `avaliacao_crm.js` + `modal_avaliacao_crm.php`. Prefixo `.avc-`.
   ==================================== */

/* ── Faixa por baixo do cartão (2026-08-20) ──────────────────────────────────
   Pedido do dono: as estrelas e os pontos negativos aparecem por baixo do cartão e
   ABREM para se ver quem os recebeu e porquê. É `display:block` para ocupar a linha
   toda mesmo quando cai no meio de uma fila de badges. */
.avc-faixa {
    display: block; width: 100%; margin-top: 8px;
    border-top: 1px dashed var(--ui-card-border); padding-top: 7px;
}
.avc-faixa-cab {
    display: flex; align-items: center; gap: 7px; width: 100%;
    background: transparent; border: 0; padding: 2px 0; cursor: pointer; text-align: left;
}
.avc-faixa-cab:hover .avc-faixa-ver { text-decoration: underline; }
.avc-seta { font-size: .68rem; opacity: .5; transition: transform .15s ease; color: var(--text-muted); }
.avc-seta.aberta { transform: rotate(90deg); }
.avc-faixa-ver { margin-left: auto; font-size: .72rem; color: var(--text-muted); }

/* ⛔ `hidden` perde para qualquer `display` de classe (regra 27h). */
.avc-detalhe { display: flex; flex-direction: column; gap: 5px; padding: 8px 0 2px 18px; }
.avc-detalhe[hidden] { display: none !important; }

.avc-linha { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; color: var(--text-primary); }
.avc-linha-p { flex: 0 0 auto; font-weight: 700; white-space: nowrap; font-size: .78rem; }
.avc-linha-p.e { color: #b45309; }
.avc-linha-p.n { color: #b91c1c; }
[data-theme="dark"] .avc-linha-p.e { color: #fcd34d; }
[data-theme="dark"] .avc-linha-p.n { color: #fca5a5; }
/* As PESSOAS primeiro — é o que o dono quer explorar na faixa. */
.avc-linha-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.avc-linha-motivo { color: var(--text-secondary); }
.avc-linha-meta { font-size: .71rem; color: var(--text-muted); }
.avc-retirar {
    flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted); font-size: .78rem; padding: 2px 4px;
}
.avc-retirar:hover { color: var(--color-red); }

/* Selos — agora dentro da faixa. */
.avc-selo {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 999px; padding: 1px 9px;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.avc-selo small { font-weight: 600; opacity: .8; }
.avc-selo-estrela  { background: rgba(245, 158, 11, .16); color: #b45309; }
.avc-selo-negativo { background: rgba(239, 68, 68, .16);  color: #b91c1c; }
[data-theme="dark"] .avc-selo-estrela  { background: rgba(245, 158, 11, .22); color: #fcd34d; }
[data-theme="dark"] .avc-selo-negativo { background: rgba(239, 68, 68, .22);  color: #fca5a5; }

/* O botão do cartão. `!important` porque `button.sige-btn-action` força cor branca
   (ver FRONTEND_COMMON § 10.0b — foi o defeito que deixou 83 ícones invisíveis). */
.avc-btn i { color: var(--color-orange) !important; }

/* ── Modal ── */
.avc-alvo {
    background: var(--ui-input-bg); border-left: 3px solid var(--color-purple);
    border-radius: 6px; padding: 7px 10px; margin-bottom: 12px;
    font-size: .84rem; color: var(--text-primary);
}
.avc-alvo i { opacity: .6; margin-right: 5px; }

.avc-tipos { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.avc-tipo {
    flex: 1 1 200px; display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--ui-card-border); border-radius: 10px;
    padding: 10px 12px; background: var(--ui-card-bg); cursor: pointer; text-align: left;
}
.avc-tipo i { font-size: 1.15rem; color: var(--color-orange); }
.avc-tipo-neg i { color: var(--color-red); }
.avc-tipo span { display: flex; flex-direction: column; color: var(--text-primary); font-size: .87rem; }
.avc-tipo small { color: var(--text-muted); font-size: .74rem; }
.avc-tipo.activo { border-color: var(--color-orange); background: var(--ui-input-bg); }
.avc-tipo-neg.activo { border-color: var(--color-red); }

.avc-escala { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.avc-ponto {
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--ui-card-border); background: var(--ui-card-bg);
    color: var(--text-muted); font-size: 1rem;
}
.avc-ponto.aceso { color: var(--color-orange); border-color: var(--color-orange); }
.avc-modo-neg .avc-ponto.aceso { color: var(--color-red); border-color: var(--color-red); }
.avc-escala-txt { margin-left: 6px; font-size: .83rem; color: var(--text-secondary); }
/* Estrelas acima das 15 de escolha rápida (2026-09-25): o tecto passou a 50. */
.avc-escala-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.avc-escala { flex-direction: column; align-items: flex-start; }
.avc-mais {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px;
    border: 1px dashed var(--ui-card-border); background: var(--ui-input-bg);
}
.avc-mais.activo { border-color: var(--color-orange); border-style: solid; }
.avc-mais-rot { font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-right: 4px; }
.avc-mais-rot i { color: var(--color-orange); }
.avc-mais-btn {
    min-width: 32px; height: 30px; padding: 0 8px; border-radius: 8px; cursor: pointer; font-weight: 700;
    border: 1px solid var(--ui-card-border); background: var(--ui-card-bg); color: var(--text-primary);
}
.avc-mais-btn:hover { border-color: var(--color-orange); color: var(--color-orange); }
.avc-mais-atalho { font-size: .78rem; color: var(--color-orange); }
.avc-mais-n {
    width: 64px; height: 30px; text-align: center; font-weight: 700; font-size: .95rem; border-radius: 8px;
    border: 1px solid var(--ui-card-border); background: var(--ui-card-bg); color: var(--text-primary);
}
.avc-mais-lim { font-size: .74rem; color: var(--text-muted); }
.avc-escala-txt { margin-left: 0; margin-top: 2px; }

.avc-pessoas-cab {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-secondary); margin: 12px 0 7px;
}
.avc-conta { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-purple); }
.avc-filtro { margin-bottom: 8px; }
.avc-pessoas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3px;
    /* ⛔ Sem scroll próprio — a barra do modal é a única (regra do dono, 2026-08-23). */
    border: 1px solid var(--ui-card-border); border-radius: 10px;
    padding: 7px; background: var(--ui-input-bg);
}
.avc-pessoa {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px;
    cursor: pointer; font-size: .84rem; color: var(--text-primary); min-width: 0;
}
.avc-pessoa:hover { background: var(--ui-card-bg); }
.avc-pessoa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avc-vazio { padding: 10px; font-size: .85rem; color: var(--text-muted); }

.avc-nota {
    margin-top: 12px; font-size: .8rem; line-height: 1.45; color: var(--text-secondary);
    background: var(--ui-input-bg); border-radius: 8px; padding: 8px 10px;
}
.avc-nota i { color: var(--color-blue); margin-right: 5px; }

/* ── Uma avaliação por actividade (2026-10-01): editar em vez de somar ── */
.avc-btn-editar { position: relative; }
.avc-btn-lapis {
    position: absolute; right: 3px; bottom: 3px;
    font-size: .55rem !important; color: var(--color-blue) !important;
}
.avc-unica {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 12px; padding: 10px 14px;
    border: 1px dashed rgba(245, 158, 11, .55); border-radius: 10px;
    background: rgba(245, 158, 11, .07);
}
.avc-unica > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avc-unica small { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.avc-unica strong { font-size: .95rem; color: var(--text-primary); }
.avc-unica strong i { color: #f59e0b; }
.avc-unica-antes strong { opacity: .7; text-decoration: line-through; text-decoration-thickness: 1px; }
.avc-unica-seta { color: var(--text-muted); }
.avc-dif { font-style: normal; font-size: .74rem; font-weight: 700; margin-left: 4px; color: var(--text-muted); }
.avc-dif.mais  { color: var(--color-green-dark, #047857); }
.avc-dif.menos { color: var(--color-red); }
.avc-outro {
    width: 100%; margin-top: 10px;
    display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--ui-card-border); background: var(--ui-input-bg); color: var(--text-primary);
}
.avc-outro:hover { border-color: var(--color-blue); }
.avc-outro > i { font-size: 1.2rem; color: var(--color-blue); }
.avc-outro span { display: flex; flex-direction: column; gap: 2px; }
.avc-outro small { color: var(--text-secondary); font-size: .76rem; }
.avc-editada { color: var(--text-secondary); }
.avc-editada s { opacity: .75; }
[data-theme="dark"] .avc-dif.mais { color: #6ee7b7; }

@media (max-width: 768px) {
    .avc-pessoas { grid-template-columns: 1fr; max-height: 180px; }
}

/* Destinatário FIXO (Atendimento e Actividades) — a estrela é de quem fez o trabalho. */
.avc-destino {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--ui-input-bg); border-left: 3px solid var(--color-green);
    border-radius: 8px; padding: 9px 11px; margin: 12px 0 4px;
    font-size: .88rem; color: var(--text-primary);
}
.avc-destino i { color: var(--color-green); margin-right: 5px; }
.avc-destino small { color: var(--text-muted); font-size: .74rem; }

/* ── Disciplina de opção: campo reservado ao II Ciclo ───────────────────────
   O campo é escondido pelo atributo `hidden` (ver shared/js/domain/linguas_opcoes.js).
   ⛔ `hidden` é ANULADO por qualquer `display` de classe — e estes campos vivem em
   grelhas cujo grupo tem `display` próprio; sem esta regra o campo continuava à vista
   (regra 27h do FRONTEND_COMMON). */
.sige-form-group.disc-opcao-oculta,
[class*="col-span"].disc-opcao-oculta,
.disc-opcao-oculta[hidden] { display: none !important; }

.disc-opcao-nota {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.disc-opcao-nota i { margin-right: 4px; color: var(--color-orange); }

/* ============================================================
   Apoio Técnico — ícone discreto (todas as páginas) e painel.
   Marcação: shared/php/components/modal_apoio_tecnico.php
   Lógica:   shared/js/domain/apoio_tecnico.js
   ============================================================ */

/* Ícone no CABEÇALHO do `.mainContainer`, ao lado do selector de tema.
   ⛔ Não é flutuante: `position: fixed` à esquerda cai por cima da barra lateral e à
   direita colide com o widget da SofIA (medido em 2026-09-04). Aqui herda a cor do
   cabeçalho (`corLetrasTop`), o que o torna discreto sem regra nenhuma de cor. */
.apoio-fab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
    cursor: pointer; background: transparent; color: inherit;
    opacity: .75; transition: opacity .2s, background-color .2s, transform .2s;
}
.apoio-fab:hover { opacity: 1; background: rgba(255,255,255,.16); transform: translateY(-1px); }
.apoio-fab i { font-size: 1rem; }
/* ⛔ `hidden` como atributo perde para o `display:inline-flex` da classe (regra 27h). */
.apoio-fab[hidden] { display: none !important; }
@media (max-width: 560px) { .apoio-fab { width: 30px; height: 30px; } }

/* Nome da instituição, entre o cabeçalho e o corpo do painel. */
.apoio-escola {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--ui-card-border, #e2e8f0);
    background: var(--ui-input-bg, #f8fafc);
    font-size: .86rem; font-weight: 700; color: var(--text-secondary, #64748b);
}
.apoio-escola[hidden] { display: none !important; }
.apoio-escola i { color: var(--color-teal, #0d9488); }

.apoio-nota { margin: 0 0 14px; font-size: .9rem; color: var(--text-secondary, #64748b); }

.apoio-contacto {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 10px;
    border: 1px solid var(--ui-card-border, #e2e8f0); border-radius: 12px;
    background: var(--ui-input-bg, #f8fafc);
}
.apoio-contacto-ic {
    width: 42px; height: 42px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(13,148,136,.12); color: var(--color-teal, #0d9488);
    font-size: 1.1rem;
}
.apoio-contacto-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.apoio-contacto-txt strong { font-size: .88rem; color: var(--text-primary, #1f2937); }
.apoio-tel { font-size: 1.05rem; font-weight: 800; color: var(--color-teal, #0d9488); text-decoration: none; letter-spacing: .5px; }
.apoio-tel:hover { text-decoration: underline; }
.apoio-btn-ligar {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 8px 14px; border-radius: 9px; text-decoration: none;
    font-size: .82rem; font-weight: 700; color: #fff; background: var(--color-teal, #0d9488);
}
.apoio-btn-ligar:hover { filter: brightness(1.06); color: #fff; }

.apoio-grupo {
    margin-top: 4px; padding: 14px;
    border: 1px solid var(--ui-card-border, #e2e8f0); border-left: 4px solid #25D366; border-radius: 12px;
    background: var(--ui-input-bg, #f8fafc);
}
.apoio-grupo-tit { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .88rem; color: var(--text-primary, #1f2937); }
.apoio-grupo-tit i { color: #25D366; font-size: 1.05rem; }
.apoio-grupo-nome { margin: 4px 0 10px; font-size: .86rem; color: var(--text-secondary, #64748b); }
.apoio-grupo-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 9px; text-decoration: none;
    font-size: .85rem; font-weight: 700; color: #fff; background: #25D366;
}
.apoio-grupo-link:hover { filter: brightness(1.05); color: #fff; }

@media (max-width: 560px) {
    .apoio-contacto { flex-wrap: wrap; }
    .apoio-btn-ligar { margin-left: 54px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAMPO «ENCARREGADO(A) DE EDUCAÇÃO» — 2026-09-20
   Componente partilhado `encarregado_select.js` + `campo_encarregado.php`.
   Prefixo `.enc-`. Tokens do tema (regra 20, modo escuro incluído).
   ═══════════════════════════════════════════════════════════════════════════ */

.enc-campo { position: relative; }

/* ── Estado 1: por escolher ── */
.enc-procura-campo { position: relative; }
.enc-procura-icone {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--text-muted);
    pointer-events: none;
}
.enc-procura-input { padding-left: 34px !important; padding-right: 34px !important; }
.enc-procura-estado {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--color-blue, #2563eb);
}

/* ── Lista de resultados ──
   `position:absolute` de propósito: abrir a lista NÃO pode empurrar o
   formulário, senão o campo seguinte foge de debaixo do rato. */
.enc-resultados {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 296px;
    overflow-y: auto;
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}
.enc-res {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--ui-card-border);
    background: none;
    cursor: pointer;
    position: relative;
}
.enc-res:last-child { border-bottom: 0; }
.enc-res:hover { background: var(--ui-input-bg); }
.enc-res-nome {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    color: var(--text-primary);
}
.enc-res-meta {
    display: block;
    font-size: .74rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.enc-res-selo {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-purple);
    background: var(--ui-input-bg);
    border: 1px solid var(--color-purple);
    border-radius: 100px;
    padding: 2px 9px;
    white-space: nowrap;
}
.enc-res-vazio {
    padding: 12px;
    font-size: .82rem;
    color: var(--text-muted);
    text-align: center;
}
.enc-res-novo {
    color: var(--color-blue, #2563eb);
    font-weight: 600;
    font-size: .84rem;
    border-top: 1px dashed var(--ui-card-border);
}
.enc-res-novo i { margin-right: 6px; }

/* ── Estado 2: escolhido ── */
/* O cartão tem DUAS linhas: em cima a pessoa, em baixo as acções (pedido do dono,
   2026-09-20). Com os 3 botões ao lado do nome sobravam-lhe ~100 px e um nome angolano
   normal saía cortado com reticências — «Pedro Lundoloka Kuanzambi» é o caso reportado.
   As acções descem por `flex-basis: 100%`, sem mexer no HTML do componente. */
.enc-escolhido {
    display: flex;
    flex-wrap: wrap;
    /* ⛔ `flex-start`, não `center`: centrada, a foto descia para o meio do bloco e
       ficava ao lado do TELEFONE em vez do nome. Alinhada ao topo, lê-se «foto + nome». */
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--ui-card-border);
    border-radius: 10px;
    background: var(--ui-input-bg);
    min-height: 44px;                 /* a mesma altura do input que substitui */
}
/* ⛔ `flex-basis: 0` (não `auto`) — é o que mantém a FOTO e o NOME na mesma linha
   (pedido do dono, 2026-09-20). Com base `auto`, a largura do nome entra na conta da
   quebra e num cartão estreito o corpo descia para baixo da foto. Com base 0 só as
   acções é que quebram, que é o que se quer. */
.enc-escolhido-corpo { flex: 1 1 0; min-width: 0; }
.enc-escolhido-nome {
    display: block;
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.25;
    color: var(--text-primary);
    /* ⛔ Sem `nowrap`/ellipsis: com a linha toda para si, o nome mostra-se INTEIRO — é
       o nome de uma pessoa, e um nome cortado não identifica ninguém. */
    white-space: normal;
    overflow-wrap: break-word;
}
.enc-escolhido-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--text-muted);
    margin-top: 2px;
}
.enc-escolhido-meta i { font-size: .63rem; margin-right: 3px; }
/* O ícone nunca se separa do valor quando o detalhe passa à linha seguinte. */
.enc-meta-item { white-space: nowrap; }
.enc-sep { margin: 0 6px; opacity: .5; }
.enc-vazio { font-style: italic; }

.enc-escolhido-accoes {
    display: flex;
    gap: 6px;
    flex: 0 0 100%;                   /* linha própria, por baixo da pessoa */
    justify-content: flex-end;
    margin-top: 2px;
}
.enc-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-card-border);
    border-radius: 7px;
    background: var(--ui-card-bg);
    color: var(--text-muted);
    font-size: .74rem;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.enc-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.enc-btn-tirar:hover { color: #dc2626; border-color: #dc2626; }

/* ── Modal de cadastro ── */
.enc-aviso-dup {
    margin-bottom: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .82rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
}
.enc-nota {
    margin-top: 10px;
    font-size: .78rem;
    color: var(--text-muted);
}
.enc-nota i { margin-right: 5px; color: var(--color-blue, #2563eb); }

@media (max-width: 600px) {
    .enc-res-selo { position: static; transform: none; display: inline-block; margin-top: 4px; }
}

/* Resultado de FORA da instituição — a pesquisa do encarregado é de todo o Sistema
   (decisão do dono, 2026-09-20) e quem vem de fora tem de se distinguir. */
.enc-res-fora { border-left: 3px solid var(--color-orange, #f59e0b); }
.enc-res-fora .enc-res-meta { color: var(--color-orange, #f59e0b); }

/* Foto nos resultados e no cartão — como na pesquisa de «adicionar um aluno»
   (pedido do dono, 2026-09-20). */
.enc-res-foto { display: flex; align-items: center; gap: 10px; }
.enc-escolhido-foto { flex: 0 0 auto; }
.enc-res-img,
.enc-escolhido-foto {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
}
.enc-res-txt { min-width: 0; flex: 1 1 auto; }

/* Modal «Onde quer entrar?» — quem é funcionário/aluno E encarregado (2026-09-20). */
.pe-opcao {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--ui-card-border);
    border-radius: 12px;
    background: var(--ui-card-bg);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.pe-opcao:last-child { margin-bottom: 0; }
.pe-opcao:hover { border-color: var(--color-blue, #2563eb); transform: translateY(-1px); }
.pe-opcao i {
    font-size: 1.15rem;
    color: var(--color-blue, #2563eb);
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}
.pe-opcao span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-opcao strong { color: var(--text-primary); font-size: .92rem; }
.pe-opcao small {
    color: var(--text-muted);
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Já existe no Sistema?» — dropdown POR BAIXO do campo do nome (2026-09-20).
   ⛔ Mesma gramática do «Nome Completo» da Gestão de Matrículas: grupos com título,
   avatar + nome + detalhe + selo. `position:absolute` para abrir sem empurrar o
   formulário — abrir a lista não pode fazer os campos fugirem de debaixo do rato. */
.enc-pesq-wrapper { position: relative; }
#encJaExiste {
    display: none;
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}
#encJaExiste.visivel { display: block; }

.enc-pesq-aviso {
    padding: 8px 12px;
    font-size: .78rem;
    color: #92400e;
    background: #fef3c7;
    border-bottom: 1px solid #fcd34d;
}
.enc-pesq-aviso i { margin-right: 5px; color: #d97706; }

.enc-pesq-grupo:not(:last-child) { border-bottom: 1px solid var(--ui-card-border); }
.enc-pesq-grupo-tit {
    padding: 6px 12px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--ui-input-bg);
}
.enc-pesq-grupo-tit i { margin-right: 5px; font-size: .7rem; }

.enc-pesq-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    border: 0;
    background: none;
    cursor: pointer;
}
.enc-pesq-item:hover:not(:disabled) { background: var(--ui-input-bg); }
.enc-pesq-nao { opacity: .55; cursor: default; }

.enc-pesq-foto {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.enc-pesq-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ⛔ `display:block` nos dois — em `flex` os spans ficavam na MESMA linha e o nome
   saía colado ao telefone («Pedrina João André944967895»), que foi o defeito reportado. */
.enc-pesq-info { flex: 1 1 auto; min-width: 0; }
.enc-pesq-nome {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enc-pesq-det {
    display: block;
    font-size: .73rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enc-pesq-selo {
    flex-shrink: 0;
    font-size: .66rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 2px 9px;
    white-space: nowrap;
}
.enc-selo-nesta { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.enc-selo-outra { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
.enc-selo-aluno { background: var(--ui-input-bg); color: var(--text-muted); border: 1px solid var(--ui-card-border); }

/* «Não existe» — confirma e desaparece, como o «Novo aluno» das Matrículas. */
.enc-pesq-novo {
    padding: 9px 12px;
    font-size: .8rem;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    text-align: center;
}
.enc-pesq-novo i { margin-right: 6px; }

/* Avatar (foto ou iniciais) — a mesma porta `htmlFotoComIniciais()` do resto do Sistema. */
.enc-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-card-border);
}
.enc-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enc-avatar .photo-initials {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.enc-avatar.show-initials .enc-avatar-img { display: none; }
.enc-avatar.show-initials .photo-initials { display: flex; }
.enc-escolhido-foto { display: block; flex-shrink: 0; }

/* «Há um aluno com este nome» — aviso de UMA linha, nunca uma lista (2026-09-20).
   Fica mais tempo no ecrã do que o «Encarregado novo» porque é para ser lido. */
.enc-pesq-atencao {
    color: #92400e;
    background: #fef3c7;
    font-weight: 500;
    text-align: left;
    line-height: 1.35;
}
.enc-pesq-atencao i { color: #d97706; }

/* Campo trancado na edição de quem tem ficha própria noutro sítio (2026-09-20). */
.enc-campo-trancado { background: var(--ui-input-bg) !important; cursor: not-allowed; opacity: .75; }
.enc-nota-trancado { color: #92400e; }
.enc-nota-trancado i { color: #d97706; }

/* ── Comunicados da escola — ícone do cabeçalho e caixa de entrada (2026-10-11) ── */
.comunicados-fab { position: relative; }
.comunicados-badge {
    position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #e53e3e; color: #fff; font-size: .62rem; font-weight: 700;
    line-height: 16px; text-align: center;
}
.comunicados-badge[hidden] { display: none !important; }
/* Área do Aluno: tarefas que precisam de atenção, ao lado do menu «Conteúdos & Tarefas»
   (2026-10-15 — shared/js/domain/avisos_tarefas_aluno.js). Vermelho só com prazo em causa. */
.tarefas-badge {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--color-teal, #0d9488); color: #fff; font-size: .65rem; font-weight: 700;
    line-height: 18px; text-align: center; flex-shrink: 0;
}
.tarefas-badge.tarefas-badge-urgente { background: var(--color-red, #e53e3e); }
.tarefas-badge[hidden] { display: none !important; }
.cmx-item {
    border: 1px solid var(--ui-card-border, #e2e8f0); border-radius: 12px; padding: 12px 14px;
    margin-bottom: 10px; background: var(--ui-card-bg, #fff); color: var(--text-primary);
}
.cmx-nao-lido { border-left: 4px solid var(--color-teal, #0d9488); background: var(--glass-bg-teal, #f0fdfa); cursor: pointer; }
.cmx-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: .78rem; margin-bottom: 6px; }
.cmx-de { font-weight: 700; color: var(--text-primary); }
.cmx-data { color: var(--text-secondary, #64748b); }
.cmx-nao-lido .cmx-data::after { content: ' · por ler'; font-weight: 700; color: var(--color-teal, #0d9488); }
.cmx-texto { font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.cmx-anexo { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; }
.cmx-por { margin-top: 6px; font-size: .74rem; color: var(--text-secondary, #64748b); }
.cmx-mais { width: 100%; }

/* ============================================================
   .sige-btn-imprimir — botão de imprimir/abrir documento com TEXTO
   (2026-10-11, Área do Aluno: Ficha Académica, Horário, Colegas de Turma, Boletim)
   Usar junto com uma cor forte: class="sige-btn-green sige-btn-imprimir".
   É quase sempre um <a>: tira o sublinhado e alinha ícone e texto.
   ============================================================ */
.sige-btn-imprimir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    font-weight: 600;
    white-space: nowrap;
}
.sige-btn-imprimir i { font-size: 1rem; }
@media (max-width: 640px) {
    /* `!important` porque o .sige-btn-green força `width: auto !important` */
    .sige-btn-imprimir { width: 100% !important; }
}