/* =========================================================
   SEMED PORTAL — Design system compartilhado
   Usado por: portal-responsavel.html (login),
              portal-dashboard.html  (área logada do responsável)
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
    /* superfícies */
    --sp-bg:           #f6f8fc;
    --sp-bg-card:      #ffffff;
    --sp-bg-soft:      #eef2f8;
    --sp-bg-tint:      #f0f4fb;
    --sp-line:         #e3e8f0;
    --sp-line-strong:  #cdd5e2;

    /* texto */
    --sp-ink-0:        #0f172a;
    --sp-ink-1:        #1f2937;
    --sp-ink-2:        #4b5563;
    --sp-ink-3:        #6b7280;
    --sp-ink-4:        #9ca3af;

    /* brand */
    --sp-brand:        #1e6dff;
    --sp-brand-600:    #1858d6;
    --sp-brand-700:    #1448ad;
    --sp-brand-50:     #eaf1ff;
    --sp-brand-100:    #d6e3ff;

    /* acentos */
    --sp-success:      #15a665;
    --sp-success-soft: #e3f7ec;
    --sp-warn:         #d98a00;
    --sp-warn-soft:    #fff5e0;
    --sp-danger:       #dc2545;
    --sp-danger-soft:  #fde8eb;
    --sp-violet:       #7c3aed;
    --sp-violet-soft:  #efe7fe;
    --sp-cyan:         #0891b2;
    --sp-cyan-soft:    #e0f5fb;

    /* sombras */
    --sp-shadow-sm:    0 1px 2px rgba(15,23,42,0.06);
    --sp-shadow:       0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --sp-shadow-lg:    0 12px 32px -8px rgba(15,23,42,0.18), 0 4px 12px -4px rgba(15,23,42,0.08);

    /* gradient hero (público) */
    --sp-grad-brand:   linear-gradient(135deg, #1e6dff 0%, #6a3df2 100%);
    --sp-grad-soft:    linear-gradient(135deg, #eaf1ff 0%, #efe7fe 100%);

    /* tipografia fluida */
    --sp-fs-h1:        clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    --sp-fs-h2:        clamp(1.25rem, .95rem + 1.1vw, 1.55rem);
    --sp-fs-h3:        clamp(1.05rem, .9rem + .6vw, 1.2rem);
    --sp-fs-display:   clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --sp-fs-body:      clamp(.92rem, .88rem + .15vw, 1rem);
    --sp-fs-sm:        clamp(.78rem, .74rem + .1vw, .84rem);
    --sp-fs-xs:        clamp(.7rem, .68rem + .08vw, .76rem);

    /* radius e espaços */
    --sp-r-sm:         .5rem;
    --sp-r:            .75rem;
    --sp-r-lg:         1rem;
    --sp-r-xl:         1.25rem;
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: auto; }

body.semed-portal {
    background: var(--sp-bg);
    color: var(--sp-ink-1);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--sp-fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    text-rendering: optimizeLegibility;
}

/* Foco acessível padrão para teclado */
.semed-portal *:focus-visible {
    outline: 3px solid rgba(30, 109, 255, 0.4);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduz motion pra usuários com preferência */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.semed-portal .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.semed-portal a:not(.sp-btn) {
    color: var(--sp-brand);
    text-decoration: none;
}

.semed-portal a:not(.sp-btn):hover {
    color: var(--sp-brand-600);
    text-decoration: underline;
}

.semed-portal hr {
    border: 0;
    border-top: 1px solid var(--sp-line);
    margin: 1.25rem 0;
}

/* ---------- Header institucional ---------- */
.sp-topbar {
    background: var(--sp-bg-card);
    border-bottom: 1px solid var(--sp-line);
    padding: .85rem clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: var(--sp-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 575px) {
    .sp-topbar { padding: .65rem 1rem; gap: .5rem; }
}

.sp-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
    color: var(--sp-ink-0);
    min-width: 0;
}

.sp-brand:hover { color: var(--sp-ink-0); text-decoration: none; }

/* Logo SEMED em wordmark (preta sobre fundo claro) */
.sp-brand-logo {
    height: 38px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 575px) {
    .sp-brand-logo { height: 30px; max-width: 150px; }
}

.sp-brand-divider {
    width: 1px;
    height: 28px;
    background: var(--sp-line-strong);
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .sp-brand-divider { display: none; }
}

.sp-brand-text {
    line-height: 1.2;
    min-width: 0;
}

.sp-brand-title {
    font-weight: 700;
    color: var(--sp-ink-0);
    font-size: clamp(.85rem, .8rem + .15vw, .95rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-brand-sub {
    font-size: var(--sp-fs-xs);
    color: var(--sp-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

@media (max-width: 575px) {
    .sp-brand-text { display: none; }
}

/* Variante: quadrado com gradient (fallback / decorativo) — preservada para casos
   onde queremos um símbolo compacto, ex.: avatar do usuário no header. */
.sp-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: .65rem;
    background: var(--sp-grad-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: 0 4px 12px -3px rgba(30,109,255,0.4);
    flex-shrink: 0;
}

.sp-topbar-end {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

/* ---------- User chip (header logado) ---------- */
.sp-userchip {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    background: var(--sp-bg-soft);
    border: 1px solid var(--sp-line);
    padding: .35rem .85rem .35rem .35rem;
    border-radius: 999px;
    font-size: var(--sp-fs-sm);
    color: var(--sp-ink-1);
    max-width: 100%;
    min-width: 0;
}

.sp-userchip > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 575px) {
    .sp-userchip > span:last-child {
        max-width: 140px;
    }
}

.sp-userchip .avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--sp-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}

.sp-userchip strong {
    color: var(--sp-ink-0);
    font-weight: 600;
}

/* ---------- Botões ---------- */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border-radius: .55rem;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--sp-fs-sm);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    min-height: 40px;
}

.sp-btn:active { transform: translateY(1px); }
.sp-btn:focus { outline: 3px solid rgba(30,109,255,0.35); outline-offset: 1px; }

.sp-btn-primary {
    background: var(--sp-brand);
    color: #fff;
}
.sp-btn-primary:hover { background: var(--sp-brand-600); color: #fff; text-decoration: none; }
.sp-btn-primary:disabled { background: var(--sp-line-strong); cursor: not-allowed; }

.sp-btn-ghost {
    background: transparent;
    color: var(--sp-ink-1);
    border-color: var(--sp-line-strong);
}
.sp-btn-ghost:hover {
    background: var(--sp-bg-soft);
    color: var(--sp-ink-0);
    text-decoration: none;
}

.sp-btn-danger {
    background: transparent;
    color: var(--sp-danger);
    border-color: var(--sp-danger);
}
.sp-btn-danger:hover { background: var(--sp-danger); color: #fff; text-decoration: none; }

.sp-btn-block { width: 100%; }
.sp-btn-lg { padding: .85rem 1.4rem; font-size: 1rem; min-height: 48px; }
.sp-btn-sm { padding: .4rem .8rem; font-size: var(--sp-fs-xs); min-height: 32px; }

/* spinner inline em botão */
.sp-btn .sp-spinner {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    display: inline-block;
    animation: sp-spin .8s linear infinite;
}

@keyframes sp-spin { to { transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.sp-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-sm);
    overflow: hidden;
}

.sp-card-pad {
    padding: clamp(1rem, 1.6vw, 1.5rem);
}

.sp-card-elev {
    box-shadow: var(--sp-shadow);
}

.sp-card-hd {
    padding: 1rem clamp(1rem, 1.6vw, 1.5rem);
    border-bottom: 1px solid var(--sp-line);
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.sp-card-hd .ico {
    width: 32px; height: 32px;
    border-radius: .55rem;
    background: var(--sp-brand-50);
    color: var(--sp-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sp-card-hd .title {
    font-size: var(--sp-fs-h3);
    font-weight: 700;
    color: var(--sp-ink-0);
    line-height: 1.2;
    margin: 0;
}

.sp-card-hd .sub {
    color: var(--sp-ink-3);
    font-size: var(--sp-fs-xs);
    margin-top: .15rem;
}

.sp-card-hd .end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ---------- Kicker (label de seção) ---------- */
.sp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--sp-fs-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sp-ink-3);
    font-weight: 700;
    margin-bottom: .35rem;
}

/* ---------- Pills, badges e status ---------- */
.sp-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: var(--sp-fs-xs);
    font-weight: 600;
    background: var(--sp-bg-soft);
    color: var(--sp-ink-1);
    border: 1px solid var(--sp-line);
    line-height: 1;
}

.sp-pill.t-info    { background: var(--sp-brand-50);    color: var(--sp-brand);     border-color: transparent; }
.sp-pill.t-ok      { background: var(--sp-success-soft); color: var(--sp-success);  border-color: transparent; }
.sp-pill.t-warn    { background: var(--sp-warn-soft);    color: var(--sp-warn);     border-color: transparent; }
.sp-pill.t-danger  { background: var(--sp-danger-soft);  color: var(--sp-danger);   border-color: transparent; }
.sp-pill.t-violet  { background: var(--sp-violet-soft);  color: var(--sp-violet);   border-color: transparent; }
.sp-pill.t-cyan    { background: var(--sp-cyan-soft);    color: var(--sp-cyan);     border-color: transparent; }

.sp-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    position: relative;
}

.sp-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    animation: sp-pulse 1.6s ease-out infinite;
    opacity: 0;
}

@keyframes sp-pulse {
    0%   { transform: scale(.6); opacity: .8; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- Alertas ---------- */
.sp-alert {
    border-radius: .65rem;
    padding: .85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: var(--sp-fs-sm);
    line-height: 1.5;
    border: 1px solid transparent;
}

.sp-alert i {
    margin-top: 1px;
    flex-shrink: 0;
}

.sp-alert.t-info    { background: var(--sp-brand-50);     color: var(--sp-brand-700); border-color: var(--sp-brand-100); }
.sp-alert.t-warn    { background: var(--sp-warn-soft);    color: #8a4a00;             border-color: #fbe5b8; }
.sp-alert.t-danger  { background: var(--sp-danger-soft);  color: #8e1424;             border-color: #f3c0c8; }
.sp-alert.t-ok      { background: var(--sp-success-soft); color: #0e7a4d;             border-color: #c0e5d2; }

.sp-alert strong { font-weight: 700; }

/* ---------- Forms ---------- */
.sp-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.sp-label {
    font-size: var(--sp-fs-sm);
    color: var(--sp-ink-2);
    font-weight: 600;
}

.sp-label .sp-required {
    color: var(--sp-danger);
    margin-left: 2px;
}

.sp-input,
.sp-select,
.sp-textarea {
    width: 100%;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-line-strong);
    border-radius: .55rem;
    padding: .65rem .85rem;
    font-size: var(--sp-fs-body);
    color: var(--sp-ink-0);
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
    min-height: 42px;
}

.sp-input:focus,
.sp-select:focus,
.sp-textarea:focus {
    outline: none;
    border-color: var(--sp-brand);
    box-shadow: 0 0 0 3px rgba(30,109,255,0.15);
    background: var(--sp-bg-card);
}

.sp-input::placeholder { color: var(--sp-ink-4); }

.sp-input.sp-input-lg {
    padding: .9rem 1rem;
    font-size: 1.05rem;
    min-height: 50px;
}

.sp-help {
    font-size: var(--sp-fs-xs);
    color: var(--sp-ink-3);
}

/* input com ícone esquerdo */
.sp-input-icon {
    position: relative;
}

.sp-input-icon > i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sp-ink-4);
    pointer-events: none;
}

.sp-input-icon > .sp-input { padding-left: 2.4rem; }

/* segmented control (radio bonito) */
.sp-segmented {
    display: inline-flex;
    background: var(--sp-bg-soft);
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.sp-segmented label {
    margin: 0;
    cursor: pointer;
}

.sp-segmented input[type="radio"] { display: none; }

.sp-segmented label > span {
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: var(--sp-fs-xs);
    font-weight: 600;
    color: var(--sp-ink-2);
    transition: background .15s, color .15s;
}

.sp-segmented input[type="radio"]:checked + span {
    background: var(--sp-bg-card);
    color: var(--sp-brand);
    box-shadow: var(--sp-shadow-sm);
}

/* ---------- Tabelas ---------- */
.sp-table-wrap {
    overflow-x: auto;
    border-radius: var(--sp-r);
}

.sp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sp-bg-card);
}

.sp-table thead th {
    text-align: left;
    font-size: var(--sp-fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--sp-ink-3);
    padding: .85rem 1rem;
    background: var(--sp-bg-soft);
    border-bottom: 1px solid var(--sp-line);
    white-space: nowrap;
}

.sp-table tbody td {
    padding: .85rem 1rem;
    border-top: 1px solid var(--sp-line);
    font-size: var(--sp-fs-sm);
    color: var(--sp-ink-1);
    vertical-align: middle;
}

.sp-table tbody tr:hover { background: var(--sp-bg-tint); }

.sp-table .num-cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
}

/* ---------- Avatar ---------- */
.sp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sp-brand-50);
    color: var(--sp-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

.sp-avatar.t-violet  { background: var(--sp-violet-soft); color: var(--sp-violet); }
.sp-avatar.t-cyan    { background: var(--sp-cyan-soft);   color: var(--sp-cyan); }
.sp-avatar.t-success { background: var(--sp-success-soft);color: var(--sp-success); }
.sp-avatar.t-warn    { background: var(--sp-warn-soft);   color: var(--sp-warn); }

.sp-avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }

/* ---------- Skeleton loader ---------- */
.sp-skel {
    background: linear-gradient(90deg, var(--sp-bg-soft) 0%, #f9fbff 50%, var(--sp-bg-soft) 100%);
    background-size: 200% 100%;
    animation: sp-skel 1.4s ease-in-out infinite;
    border-radius: .35rem;
    color: transparent !important;
    display: inline-block;
    min-height: 1em;
}

.sp-skel-block { display: block; height: 1em; }

@keyframes sp-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Footer ---------- */
.sp-footer {
    border-top: 1px solid var(--sp-line);
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    color: var(--sp-ink-3);
    font-size: var(--sp-fs-xs);
    text-align: center;
    background: var(--sp-bg-card);
    margin-top: 3rem;
}

/* ---------- Layout helpers ---------- */
.sp-page {
    min-height: calc(100vh - 64px - 80px);
    padding: clamp(1rem, 2.5vw, 2rem);
    max-width: 1320px;
    margin: 0 auto;
}

.sp-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.6vw, 1.5rem); }
.sp-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
.sp-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }

@media (max-width: 991px) {
    .sp-grid-2, .sp-grid-3, .sp-grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 1199px) {
    .sp-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .sp-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* utilitários de espaço */
.sp-mt-0 { margin-top: 0; }
.sp-mt-1 { margin-top: .5rem; }
.sp-mt-2 { margin-top: 1rem; }
.sp-mt-3 { margin-top: 1.5rem; }
.sp-mt-4 { margin-top: 2rem; }
.sp-mb-0 { margin-bottom: 0; }
.sp-mb-1 { margin-bottom: .5rem; }
.sp-mb-2 { margin-bottom: 1rem; }
.sp-mb-3 { margin-bottom: 1.5rem; }
.sp-text-muted { color: var(--sp-ink-3); }
.sp-text-strong { color: var(--sp-ink-0); font-weight: 600; }
.sp-mono { font-family: 'JetBrains Mono', 'Menlo', monospace; }

/* loading spinner full block */
.sp-loading-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    color: var(--sp-ink-3);
    font-size: var(--sp-fs-sm);
    padding: 2rem;
}

.sp-loading-block .sp-spinner {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--sp-brand-100);
    border-top-color: var(--sp-brand);
    display: inline-block;
    animation: sp-spin .8s linear infinite;
}

/* ---------- Empty state ---------- */
.sp-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--sp-ink-3);
}

.sp-empty .ico {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--sp-bg-soft);
    color: var(--sp-ink-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .85rem;
}

.sp-empty .t {
    color: var(--sp-ink-1);
    font-weight: 600;
    font-size: var(--sp-fs-body);
    margin-bottom: .35rem;
}

.sp-empty .s {
    color: var(--sp-ink-3);
    font-size: var(--sp-fs-sm);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}