@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cor-azul: #0028f4;
    --cor-azul-escuro: #0020c0;
    --cor-texto: #1a1a1a;
    --cor-texto-leve: #666666;
    --cor-borda: #e0e0e0;
    --cor-bg: #f8f9fb;
}

body {
    font-family: 'Roboto', sans-serif;
    background: var(--cor-bg);
    color: var(--cor-texto);
    /* O footer é fixo (ver app/includes/footer.php), por isso reservamos espaço.
       O valor real é ajustado via JS no footer para corresponder à altura exata. */
    padding-bottom: var(--footer-fixed-height, 90px);
}

/* ===== STICKY FOOTER (footer sempre no fundo) ===== */
html, body { height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.page-content {
  flex: 1;
}

/* HEADER */
header {
    background: linear-gradient(135deg, var(--cor-azul) 0%, var(--cor-azul-escuro) 100%);
    color: white;
    padding: 12px 0;
    box-shadow: 0 2px 8px rgba(0, 40, 244, 0.15);
    position: sticky;
    top: 0;
    /* Garante que nada (cards/menus/modais) passa por cima do header ao fazer scroll */
    z-index: 10000;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 28px;
    width: auto;
}

nav {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 12px;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    font-weight: 500;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

nav a:hover {
    opacity: 0.8;
}

/* CONTAINER */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 16px;
}

.dashboard-header {
    margin-bottom: 16px;
}

.dashboard-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

/* GRID */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

/* CARDS COMPACT */
.dashboard-card {
    background: white;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cor-azul);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.dashboard-card:hover {
    border-color: var(--cor-azul);
    box-shadow: 0 4px 12px rgba(0, 40, 244, 0.12);
    transform: translateY(-3px);
}

.dashboard-card:hover::before {
    transform: scaleX(1);
}

.card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-icon {
    font-size: 32px;
    margin-bottom: 6px;
    display: inline-block;
}

.dashboard-card h3 {
    color: var(--cor-azul);
    margin: 0 0 3px 0;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-card p {
    color: var(--cor-texto-leve);
    font-size: 10px;
    margin: 0;
}

.dashboard-card .btn-small {
    background: var(--cor-azul);
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-size: 10px;
    margin-top: 8px;
    transition: all 0.3s;
    box-shadow: 0 1px 4px rgba(0, 40, 244, 0.2);
}

.dashboard-card .btn-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 40, 244, 0.3);
}

/* =====================
   DASHBOARD V2 (hero + kpis + panels)
   ===================== */

.dash-hero {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 14px;
    margin: 6px 0 14px;
}

.dash-hero__left,
.dash-hero__right {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.dash-hero__kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--cor-texto-leve);
    font-size: 12px;
}

.dash-hero__hello {
    font-weight: 700;
    color: var(--cor-texto);
}

.dash-hero__title {
    margin: 10px 0 6px;
    font-size: 18px;
    font-weight: 800;
}

.dash-hero__sub {
    color: var(--cor-texto-leve);
    font-size: 12px;
    margin-bottom: 10px;
}

.dash-progress {
    margin-top: 8px;
}

.dash-progress__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    color: var(--cor-texto-leve);
}

.dash-progress__label { font-weight: 700; }
.dash-progress__value { font-variant-numeric: tabular-nums; }

.dash-progress__bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    margin-top: 8px;
    overflow: hidden;
}

.dash-progress__fill {
    height: 100%;
    background: var(--cor-azul);
    border-radius: 999px;
}

.dash-spotlight {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-spotlight__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
}

.dash-spotlight__label {
    font-size: 12px;
    color: var(--cor-texto-leve);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-spotlight__value {
    font-size: 12px;
    font-weight: 800;
    color: var(--cor-texto);
    text-align: right;
}

.dash-spotlight__sub {
    font-weight: 600;
    color: var(--cor-texto-leve);
    margin-left: 6px;
}

.dash-spotlight__link {
    margin-left: 8px;
    font-weight: 800;
    text-decoration: none;
    color: var(--cor-azul);
}

.dash-spotlight__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--cor-borda);
    background: #fff;
    color: var(--cor-texto);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-mini:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.kpi__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 40, 244, 0.10);
    color: var(--cor-azul);
    flex: 0 0 auto;
}

.kpi__value {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.kpi__label {
    font-size: 12px;
    color: var(--cor-texto-leve);
    margin-top: 2px;
}

.dash-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: 8px;
}

.panel {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.panel__head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
}

.panel__link {
    font-size: 12px;
    font-weight: 800;
    color: var(--cor-azul);
    text-decoration: none;
}

.panel__empty {
    color: var(--cor-texto-leve);
    font-size: 12px;
    padding: 8px 0;
}

.panel__note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--cor-borda);
    background: rgba(0,0,0,0.02);
    font-size: 12px;
}

.panel__note a {
    margin-left: 6px;
    font-weight: 900;
    text-decoration: none;
    color: var(--cor-azul);
}

.panel__note--warn {
    border-color: rgba(255, 169, 0, 0.55);
    background: rgba(255, 169, 0, 0.08);
}

.tasklist { display: flex; flex-direction: column; gap: 8px; }
.taskrow {
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: rgba(0,0,0,0.02);
}

.taskrow__time {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 900;
}

.taskrow__title {
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--cor-borda);
    background: #fff;
}
.chip--ok { border-color: rgba(0, 160, 90, 0.45); background: rgba(0, 160, 90, 0.10); }
.chip--warn { border-color: rgba(255, 169, 0, 0.55); background: rgba(255, 169, 0, 0.10); }
.chip--muted { background: rgba(0,0,0,0.03); color: var(--cor-texto-leve); }

.table-like {
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    overflow: hidden;
}
.table-like__head,
.table-like__row {
    display: grid;
    grid-template-columns: 1fr 70px 70px 70px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
}
.table-like__head {
    background: rgba(0,0,0,0.03);
    font-size: 12px;
    font-weight: 900;
    color: var(--cor-texto-leve);
}
.table-like__row {
    background: #fff;
    border-top: 1px solid var(--cor-borda);
    font-size: 12px;
}
.t-right { text-align: right; font-variant-numeric: tabular-nums; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 40, 244, 0.10);
    color: var(--cor-azul);
    border: 1px solid rgba(0, 40, 244, 0.18);
    font-weight: 900;
}

.muted { color: var(--cor-texto-leve); font-weight: 700; }

@media (max-width: 980px) {
    .dash-hero { grid-template-columns: 1fr; }
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-panels { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .dash-hero__kicker { flex-direction: column; align-items: flex-start; }
    .dash-kpis { grid-template-columns: 1fr; }
    .taskrow { grid-template-columns: 80px 1fr; }
    .taskrow__chip { grid-column: 1 / -1; justify-self: flex-start; }
    .dash-spotlight__row { flex-direction: column; align-items: flex-start; }
    .dash-spotlight__value { text-align: left; }
}

/* LOGIN */
body.login-page {
    background: linear-gradient(-45deg, #0028f4, #0020c0, #4d69ff, #0028f4);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.login-container {
    background: white;
    border-radius: 10px;
    padding: 36px 28px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 16px 48px rgba(0, 40, 244, 0.25);
}

.logo-container {
    text-align: center;
    margin-bottom: 24px;
}

.logo-img {
    max-width: 200px;
    height: auto;
}

.login-container .form-group {
    margin-bottom: 14px;
}

.login-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.login-container input {
    width: 100%;
    padding: 11px 9px;
    border: 2px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.3s;
}

.login-container input:focus {
    outline: none;
    border-color: var(--cor-azul);
    box-shadow: 0 0 0 3px rgba(0, 40, 244, 0.1);
}

.login-container button {
    width: 100%;
    padding: 11px;
    background: var(--cor-azul);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-top: 14px;
    transition: all 0.3s;
}

.login-container button:hover {
    background: var(--cor-azul-escuro);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 40, 244, 0.3);
}

.login-container .error {
    color: #d32f2f;
    font-size: 11px;
    text-align: center;
    margin-top: 11px;
    background: rgba(211, 47, 47, 0.08);
    padding: 7px;
    border-radius: 4px;
    border: 1px solid rgba(211, 47, 47, 0.2);
}

/* ===== FOOTER GLOBAL (legado) =====
   Nota: o footer atual usa a classe .app-footer e é fixo.
   Mantemos este bloco apenas para páginas antigas que usem <footer class="site-footer">. */
footer.site-footer {
    background: linear-gradient(135deg, #0028f4 0%, #1a4d8f 100%);
    padding: 20px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    text-align: center;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-heart {
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    animation: heartBeat 0.6s ease-in-out;
}

.footer-heart i {
    color: white;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.footer-heart.liked i {
    color: #ff3333;
    text-shadow: 0 0 8px rgba(255, 51, 51, 0.8);
    animation: heartPulse 0.6s ease-in-out;
}

.footer-author {
    font-weight: 800;
    text-decoration: none;
    /* Branco com rebordo/preto + glow branco animado */
    color: #ffffff;
    -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.85);
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.85),
         1px -1px 0 rgba(0, 0, 0, 0.85),
        -1px  1px 0 rgba(0, 0, 0, 0.85),
         1px  1px 0 rgba(0, 0, 0, 0.85),
        0 0 6px rgba(255, 255, 255, 0.55),
        0 0 18px rgba(255, 255, 255, 0.20);
    animation: glowPulse 2.4s ease-in-out infinite;
}

.footer-author:hover {
    animation-duration: 1.6s;
}

.footer-role {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-top: 6px;
    font-weight: 400;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1.1); }
}

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

@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1);
        text-shadow:
            -1px -1px 0 rgba(0, 0, 0, 0.85),
             1px -1px 0 rgba(0, 0, 0, 0.85),
            -1px  1px 0 rgba(0, 0, 0, 0.85),
             1px  1px 0 rgba(0, 0, 0, 0.85),
            0 0 6px rgba(255, 255, 255, 0.55),
            0 0 18px rgba(255, 255, 255, 0.20);
    }
    50% {
        filter: brightness(1.12);
        text-shadow:
            -1px -1px 0 rgba(0, 0, 0, 0.85),
             1px -1px 0 rgba(0, 0, 0, 0.85),
            -1px  1px 0 rgba(0, 0, 0, 0.85),
             1px  1px 0 rgba(0, 0, 0, 0.85),
            0 0 10px rgba(255, 255, 255, 0.78),
            0 0 28px rgba(255, 255, 255, 0.30);
    }
}

@media (max-width: 768px) {
    .footer-text { font-size: 12px; gap: 6px; }
    .footer-heart { width: 18px; height: 18px; font-size: 14px; }
    .footer-role { font-size: 11px; }
}

@media (max-width: 600px) {
    footer { padding: 16px; }
    .footer-text { font-size: 11px; flex-wrap: wrap; }
    .footer-role { width: 100%; margin-top: 4px; }
}

/* TABLET */
@media (min-width: 640px) {
    .header-container { padding: 0 20px; }
    .container { padding: 24px 20px; }
    .dashboard-header h1 { font-size: 26px; }
    .dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .dashboard-card { min-height: 160px; padding: 16px 12px; }
    .card-icon { font-size: 36px; }
}

/* DESKTOP */
@media (min-width: 1024px) {
    .header-container { padding: 0 24px; }
    .container { padding: 28px 24px; }
    .dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .dashboard-card { min-height: 170px; padding: 18px 14px; }
    .card-icon { font-size: 40px; }
}

/* ==========================================================
   PLANO DE TAREFAS (A + B) — visual com identidade por slot
   - barras laterais por slot
   - tarefas em blocos com ícone + chips
   (apenas nesta página: body.page-plano-tarefas)
   ========================================================== */

.page-plano-tarefas .pt-wrap{max-width:1200px;margin:0 auto;}
/* Reduz espaço vazio entre topo (barra/legenda) e cards */
.page-plano-tarefas .ui-wrap.pt-wrap{padding-bottom:0 !important;}
.page-plano-tarefas .pt-head{margin:4px 0 14px 0;}
.page-plano-tarefas .pt-title{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:0;color:var(--cor-texto);}
.page-plano-tarefas .pt-subtitle{margin-top:6px;color:var(--cor-texto-leve);font-size:12px;}

/* Cabeçalho do plano: título + data na mesma linha (desktop) */
.page-plano-tarefas .pt-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;}
.page-plano-tarefas .pt-head__date{display:flex;align-items:flex-end;}
.page-plano-tarefas .pt-head__date .pt-field{margin:0;}
@media (max-width:720px){
  .page-plano-tarefas .pt-head--row{flex-direction:column;align-items:flex-start;}
  .page-plano-tarefas .pt-head__date{width:100%;}
  .page-plano-tarefas .pt-head__date .pt-input{width:100%;min-width:0;}
}

.page-plano-tarefas .pt-alert{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--cor-borda);
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.05);

  /* ✅ FIX: centrado e alinhado com o conteúdo */
  width: calc(100% - 40px);
  max-width: 1250px;
  margin: 12px auto;
  box-sizing: border-box;
}
.page-plano-tarefas .pt-alert code{background:rgba(0,0,0,.04);padding:2px 6px;border-radius:6px;}
.page-plano-tarefas .pt-alert--ok{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.06);color:#065f46;}
.page-plano-tarefas .pt-alert--err{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.06);color:#7f1d1d;}

.page-plano-tarefas .pt-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between;background:#fff;border:1px solid var(--cor-borda);border-radius:14px;padding:12px 12px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.page-plano-tarefas .pt-toolbar__group{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.page-plano-tarefas .pt-field label{display:block;font-size:11px;font-weight:700;color:var(--cor-texto-leve);text-transform:uppercase;margin-bottom:6px;}
.page-plano-tarefas .pt-input{height:40px;padding:8px 12px;border:1px solid var(--cor-borda);border-radius:12px;background:#fff;min-width:180px;}
.page-plano-tarefas .pt-input:focus{outline:none;border-color:rgba(0,40,244,.45);box-shadow:0 0 0 4px rgba(0,40,244,.10);}

.page-plano-tarefas .pt-btn{height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--cor-borda);background:#fff;color:var(--cor-texto);font-weight:700;font-size:12px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:transform .15s, box-shadow .15s, border-color .15s;}
.page-plano-tarefas .pt-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:rgba(0,40,244,.25);}
.page-plano-tarefas .pt-btn--primary{background:var(--cor-azul);border-color:var(--cor-azul);color:#fff;}
.page-plano-tarefas .pt-btn--primary:hover{border-color:var(--cor-azul-escuro);}
.page-plano-tarefas .pt-btn--ghost{background:#fff;}
.page-plano-tarefas .pt-btn--danger{border-color:rgba(220,38,38,.35);color:#b91c1c;background:#fff;}
.page-plano-tarefas .pt-btn--danger:hover{border-color:rgba(220,38,38,.55);}

.page-plano-tarefas .pt-hint{display:inline-flex;gap:8px;align-items:center;color:var(--cor-texto-leve);font-size:12px;max-width:520px;}

.page-plano-tarefas .pt-empty{margin-top:14px;background:#fff;border:1px solid var(--cor-borda);border-radius:14px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.05);text-align:center;}
.page-plano-tarefas .pt-empty__icon{font-size:26px;margin-bottom:8px;color:var(--cor-azul);}
.page-plano-tarefas .pt-empty__title{font-weight:800;margin-bottom:4px;}
.page-plano-tarefas .pt-empty__text{color:var(--cor-texto-leve);font-size:12px;}

.page-plano-tarefas .pt-slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;}
@media (max-width:980px){.page-plano-tarefas .pt-slot-grid{grid-template-columns:1fr;}}

.page-plano-tarefas .pt-slot{background:#fff;border:1px solid var(--cor-borda);border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:12px;position:relative;overflow:hidden;}
.page-plano-tarefas .pt-slot:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg, rgba(0,40,244,.95), rgba(0,40,244,.25));}
.page-plano-tarefas .pt-slot--light:before{background:linear-gradient(180deg, rgba(22,163,74,.95), rgba(22,163,74,.25));}

.page-plano-tarefas .pt-slot__head{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;padding-left:6px;}
.page-plano-tarefas .pt-slot__time{font-size:16px;font-weight:900;letter-spacing:-0.01em;}
.page-plano-tarefas .pt-slot__kind{margin-top:3px;color:var(--cor-texto-leve);font-size:12px;display:flex;gap:8px;align-items:center;}
.page-plano-tarefas .pt-slot__badges{display:flex;gap:8px;flex-wrap:wrap;}

.page-plano-tarefas .pt-badge{font-size:11px;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:rgba(248,249,251,.8);display:inline-flex;gap:8px;align-items:center;color:var(--cor-texto);}
.page-plano-tarefas .pt-badge--ok{border-color:rgba(22,163,74,.22);background:rgba(22,163,74,.07);color:#0f766e;}
.page-plano-tarefas .pt-badge--warn{border-color:rgba(217,119,6,.22);background:rgba(217,119,6,.07);color:#92400e;}
.page-plano-tarefas .pt-badge--muted{border-color:rgba(100,116,139,.25);background:rgba(100,116,139,.07);color:var(--cor-texto-leve);}

.page-plano-tarefas .pt-task-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-left:6px;}

.page-plano-tarefas .pt-task{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px 10px;border:1px solid rgba(0,0,0,.06);border-radius:14px;background:linear-gradient(180deg,#fff,#fbfbff);transition:transform .12s, box-shadow .12s, border-color .12s;}
.page-plano-tarefas .pt-task:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.08);border-color:rgba(0,40,244,.18);}

.page-plano-tarefas .pt-task__icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,40,244,.08);color:var(--cor-azul);border:1px solid rgba(0,40,244,.12);}
.page-plano-tarefas .pt-slot--light .pt-task__icon{background:rgba(22,163,74,.08);color:#16a34a;border-color:rgba(22,163,74,.18);}

.page-plano-tarefas .pt-task__title{font-weight:800;font-size:13px;color:var(--cor-texto);}
.page-plano-tarefas .pt-task__meta{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;}

.page-plano-tarefas .pt-chip{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.08);display:inline-flex;gap:6px;align-items:center;}
.page-plano-tarefas .pt-chip--ob{border-color:rgba(0,40,244,.18);background:rgba(0,40,244,.06);color:var(--cor-azul);}
.page-plano-tarefas .pt-chip--rot{border-color:rgba(100,116,139,.22);background:rgba(100,116,139,.07);color:var(--cor-texto-leve);}

.page-plano-tarefas .pt-task__right{display:flex;gap:10px;align-items:center;justify-content:flex-end;}
.page-plano-tarefas .pt-task__user{font-weight:800;color:var(--cor-texto);white-space:nowrap;font-size:12px;}
.page-plano-tarefas .pt-task__user--miss{color:#b91c1c;}

.page-plano-tarefas .pt-iconbtn{width:36px;height:36px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:#fff;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s, box-shadow .12s, border-color .12s, color .12s;}
.page-plano-tarefas .pt-iconbtn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.10);border-color:rgba(220,38,38,.35);color:#b91c1c;}

/* ==========================================================
   PLANO (técnico) — ações (✓ / ✕) + estados (verde/vermelho)
   (usa base do bloco .page-plano-tarefas)
   ========================================================== */

.page-plano .pt-task{grid-template-columns:40px 1fr auto;}

.page-plano .pl-actions{display:flex;gap:8px;align-items:center;}
.page-plano .pl-act{width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s, box-shadow .12s, border-color .12s, background .12s;}
.page-plano .pl-act:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.10);}
.page-plano .pl-act svg{width:18px;height:18px;}
.page-plano .pl-act--ok{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.08);}
.page-plano .pl-act--ok:hover{border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.14);}
.page-plano .pl-act--bad{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.06);}
.page-plano .pl-act--bad:hover{border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.12);}
.page-plano .pl-act--ok svg path{stroke:#16a34a;}
.page-plano .pl-act--bad svg path{stroke:#dc2626;}

.page-plano .pl-badge{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.page-plano .pl-badge svg{width:14px;height:14px;}
.page-plano .pl-badge--ok{border-color:rgba(22,163,74,.22);background:rgba(22,163,74,.10);color:#166534;}
.page-plano .pl-badge--bad{border-color:rgba(220,38,38,.22);background:rgba(220,38,38,.10);color:#991b1b;}

.page-plano .pt-task--done{border-color:rgba(22,163,74,.25);background:linear-gradient(180deg, rgba(22,163,74,.06), #fff);}
.page-plano .pt-task--miss{border-color:rgba(220,38,38,.25);background:linear-gradient(180deg, rgba(220,38,38,.05), #fff);}
.page-plano .pt-task--miss .pt-task__user{color:#991b1b;}

.page-plano .pl-just{grid-column:1 / -1;margin-top:10px;padding:10px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:#fff;}
.page-plano .pl-just label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;color:var(--cor-texto-leve);margin-bottom:8px;}
.page-plano .pl-just textarea{width:100%;min-height:78px;resize:vertical;border:1px solid var(--cor-borda);border-radius:12px;padding:10px 12px;font-size:12px;}
.page-plano .pl-just textarea:focus{outline:none;border-color:rgba(220,38,38,.35);box-shadow:0 0 0 4px rgba(220,38,38,.10);}
.page-plano .pl-just__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
.page-plano .pl-btn{height:36px;padding:0 12px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:#fff;font-weight:800;font-size:12px;cursor:pointer;}
.page-plano .pl-btn--danger{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.08);color:#991b1b;}

/* ==========================================================
   PLANO ("O meu plano") — visual clean (como Justificações)
   NOTA: o body tem as classes "page-plano page-plano-tarefas"
   ========================================================== */

.page-plano.page-plano-tarefas .pt-slot{background:#fff;border:1px solid #e8eefc;border-radius:22px;box-shadow:0 14px 30px rgba(10,40,120,.08);padding:14px;overflow:hidden}
.page-plano.page-plano-tarefas .pt-slot:before{display:none}
.page-plano.page-plano-tarefas .pt-slot__head{padding:0 0 10px 0;margin:0 0 10px 0;border-bottom:1px solid #eef2ff;display:flex;align-items:center;justify-content:space-between;gap:10px}
.page-plano.page-plano-tarefas .pt-slot__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-plano.page-plano-tarefas .pt-slot__time{background:#f3f7ff;border:1px solid #dbe6ff;border-radius:999px;padding:8px 12px;font-weight:900;color:#0b1a3a}
.page-plano.page-plano-tarefas .pt-slot__kind{color:#6b7a99;font-weight:700}
.page-plano.page-plano-tarefas .pt-tasks{padding:0}

/* Tarefas dentro do slot: linha (border) por estado */
.page-plano.page-plano-tarefas .pt-task{border:1px solid #eef2ff;border-left:6px solid rgba(0,40,244,.55);border-radius:18px;padding:12px;background:#fff;box-shadow:none}
.page-plano.page-plano-tarefas .pt-task + .pt-task{margin-top:12px}
.page-plano.page-plano-tarefas .pt-task--done{border-left-color:rgba(22,163,74,.60);background:#f6fff8}
.page-plano.page-plano-tarefas .pt-task--miss{border-left-color:rgba(220,38,38,.60);background:#fff5f5}


/* ==========================================================
   AJUSTES FINAIS – PLANO DE TAREFAS (A+B)
   - badges a branco
   - azul do slot mais claro
   - fundo das tarefas mais suave
   ========================================================== */


/* ==========================================================
   PLANO (técnico) — VISUAL "justificações" (sem cabeçalho azul)
   Regras:
   - Desktop: 2 colunas
   - Mobile: 1 por linha
   - Cards com border por estado: pendente=azul, feita=verde, não feita=vermelha
   ========================================================== */

/* Cabeçalho do slot: remove bloco azul e usa pills */
.page-plano-tarefas .pt-slot__head{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.page-plano-tarefas .pt-slot__time{
  background:#ffffff !important;
  border:1px solid rgba(0,40,244,.18) !important;
  color:#0f172a !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.page-plano-tarefas .pt-slot__meta{
  color: var(--cor-texto-leve);
  font-size: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
}

/* Slot container: clean */
.page-plano-tarefas .pt-slot{
  background:#fff;
  border:1px solid #e7eefc;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

/* Task card base (pendente) */
.page-plano .pl-task{
  background:#ffffff !important;
  border:1px solid rgba(0,40,244,.16) !important;
  border-left: 6px solid rgba(0,40,244,.65) !important;
  border-radius: 16px !important;
  padding: 14px 14px !important;
}

/* Feita */
.page-plano .pl-task--done{
  border-color: rgba(22,163,74,.22) !important;
  border-left-color: rgba(22,163,74,.75) !important;
  background: linear-gradient(180deg,#f0fdf4,#ffffff) !important;
}

/* Não feita */
.page-plano .pl-task--miss{
  border-color: rgba(220,38,38,.22) !important;
  border-left-color: rgba(220,38,38,.78) !important;
  background: linear-gradient(180deg,#fef2f2,#ffffff) !important;
}

/* Compacta o espaço entre tasks */
.page-plano .pl-tasks{gap: 12px;}

/* Grid responsivo: 2 colunas desktop / 1 col mobile */
.page-plano-tarefas .pt-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 900px){
  .page-plano-tarefas .pt-grid{grid-template-columns: 1fr;}
}

}
.page-plano-tarefas .pt-done-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f0fdf4;
  border: 1px solid rgba(22,163,74,.22);
  color: #166534;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
.page-plano-tarefas .pt-done-badge .pt-done-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}


/* ==========================================================
   PLANO (técnico) — botões ✓ / ✕ + estado NÃO FEITO (vermelho)
   ========================================================== */
.page-plano-tarefas .pt-act{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.page-plano-tarefas .pt-act:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.10);}
.page-plano-tarefas .pt-act__ico{display:flex;}
.page-plano-tarefas .pt-act svg{display:block;}

.page-plano-tarefas .pt-act--ok{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.22);
  color: #16a34a;
}
.page-plano-tarefas .pt-act--bad{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.22);
  color: #dc2626;
}

.page-plano-tarefas .pt-task--notdone{
  background: linear-gradient(180deg, #fef2f2, #ffffff) !important;
  border-color: rgba(220,38,38,.18) !important;
}

.page-plano-tarefas .pt-chip--ok{
  border-color: rgba(22,163,74,.18);
  background: rgba(22,163,74,.08);
  color: #166534;
}
.page-plano-tarefas .pt-chip--bad{
  border-color: rgba(220,38,38,.18);
  background: rgba(220,38,38,.08);
  color: #7f1d1d;
}

.page-plano-tarefas .pt-just-wrap{margin-top:10px;}
.page-plano-tarefas .pt-just{
  width:100%;
  min-height:42px;
  resize: vertical;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-size:13px;
  font-family: inherit;
  color:#111827;
  transition: all .2s ease;
}
.page-plano-tarefas .pt-just:focus{outline:none;background:#fff;border-color:rgba(0,40,244,.35);box-shadow:0 0 0 4px rgba(0,40,244,.08);}
.page-plano-tarefas .pt-just--error{border-color: rgba(220,38,38,.55) !important; box-shadow: 0 0 0 4px rgba(220,38,38,.10) !important;}
.page-plano-tarefas .pt-just-hint{margin-top:6px;color:var(--cor-texto-leve);font-size:12px;}


/* Plano (técnico) - estado não feito (vermelho) */
.page-plano .pl-task--miss{background:linear-gradient(180deg,#fef2f2,#fff) !important;border-color:rgba(220,38,38,.18) !important;}
.page-plano .pl-pill--miss{background:#fef2f2;border:1px solid rgba(220,38,38,.22);color:#7f1d1d;}
.page-plano .pl-chip--miss{border-color:rgba(220,38,38,.18);background:rgba(220,38,38,.08);color:#7f1d1d;}


/* =============================
   MODAIS (GLOBAL)
   ============================= */
/*
  Estrutura usada em várias páginas (ex: Gestão de Utilizadores):
  <div class="modal" id="modalX">
    <div class="modal-content">...</div>
  </div>
  Abre ao adicionar a classe .is-open.
*/

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 11000;            /* acima do header (header usa 10000) */
  padding: 90px 16px 16px;   /* respiro para o header sticky/fixo */
}

.modal.is-open { display: flex; }

.modal-content {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.20);
  max-height: 90vh;
  overflow: auto;
}

/* Conteúdo padrão dentro do modal */
.modal-content > form,
.modal-content > .modal-body {
  padding: 16px 22px 22px;
}

.modal-content > p {
  padding: 0 22px;
}

.modal-content .form-group { margin-bottom: 12px; }
.modal-content .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px 0;
}

.modal-content .form-group input[type="text"],
.modal-content .form-group input[type="password"],
.modal-content .form-group input[type="file"],
.modal-content .form-group select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.modal-content .form-group input:focus,
.modal-content .form-group select:focus {
  border-color: rgba(0, 40, 244, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 40, 244, 0.12);
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
}

.btn-confirm,
.btn-cancel {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}

.btn-confirm {
  background: var(--cor-azul);
  color: #fff;
}

.btn-confirm:hover { background: var(--cor-azul-escuro); }

.btn-cancel {
  background: #e5e7eb;
  color: #111827;
}

.btn-cancel:hover { background: #d1d5db; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e9e9e9;
  font-weight: 700;
  color: #0c2e8a;
}

.modal-close {
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  color: #1a1a1a;
}

.modal-close:hover { background: rgba(0,0,0,0.06); }

@media (max-height: 700px) {
  .modal { padding-top: 70px; }
}