/* Identidade visual Marina Albatroz */
:root {
    --bg: #f6f8fb;
    --card: #ffffff;
    --text: #102033;
    --muted: #64748b;
    --line: #e2e8f0;
    --primary: #005aa5;
    --primary-dark: #003f78;
    --secondary: #f47a1c;
    --secondary-dark: #d95f0a;
    --accent-red: #c7192a;
    --success: #16a34a;
    --warning: #ca8a04;
    --danger: #dc2626;
    --soft-blue: #e6f2fb;
    --soft-orange: #fff1e4;
    --soft-green: #dcfce7;
    --soft-red: #fee2e2;
    --soft-yellow: #fef9c3;
    --shadow: 0 14px 32px rgba(0, 63, 120, 0.10);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
        radial-gradient(circle at top left, rgba(244, 122, 28, .25), transparent 32%),
        radial-gradient(circle at bottom right, rgba(0, 90, 165, .20), transparent 38%),
        linear-gradient(135deg, #fff8f1 0%, #eef7ff 55%, #f8fafc 100%);
}
.login-card {
    width: 100%;
    max-width: 410px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 28px;
}
.brand-area { text-align: center; margin-bottom: 22px; }
.brand-area-logo { margin-bottom: 24px; }
.brand-logo-login {
    width: 220px;
    max-width: 82%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0 12px 20px rgba(0, 63, 120, .12));
}
.brand-logo-sidebar {
    width: 58px;
    height: 58px;
    object-fit: contain;
    background: rgba(255,255,255,.94);
    border-radius: 16px;
    padding: 5px;
    box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.sidebar-brand-logo strong {
    font-size: 16px;
    letter-spacing: .01em;
}
.login-card {
    border-top: 5px solid var(--secondary);
}
.app-card {
    position: relative;
    overflow: hidden;
}
.app-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent-red));
}
.card-embarcacao:after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 190px;
    height: 190px;
    background: url('../img/logo-marina-albatroz.png') center/contain no-repeat;
    opacity: .055;
    pointer-events: none;
}

.brand-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: var(--soft-blue);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 10px;
}
.brand-icon.small { width: 42px; height: 42px; font-size: 18px; margin: 0; border-radius: 14px; }
.brand-area h1 { margin: 0; font-size: 26px; font-weight: 800; }
.brand-area p { color: var(--muted); margin-top: 4px; }
.login-msg { margin-top: 12px; color: var(--danger); text-align: center; font-size: 13px; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-esqueceu { margin-top: 10px; }

.app-shell { min-height: 100vh; display: flex; }
.app-sidebar {
    width: 250px;
    background:
        linear-gradient(180deg, #003f78 0%, #005aa5 52%, #0f2d48 100%);
    color: #fff;
    padding: 18px;
    position: fixed;
    left: 0; top: 0; bottom: 0;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-brand small { display: block; color: #94a3b8; margin-top: 2px; }
.sidebar-nav { margin-top: 18px; display: grid; gap: 8px; }
.nav-item {
    border: 0;
    width: 100%;
    text-align: left;
    background: transparent;
    color: #cbd5e1;
    border-radius: 14px;
    padding: 12px 13px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 4px 0 0 var(--secondary); }

.app-main {
    flex: 1;
    margin-left: 250px;
    padding: 22px;
    padding-bottom: 90px;
}
.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.app-topbar h2 { margin: 0; font-size: 28px; font-weight: 800; }
.app-topbar p { margin: 4px 0 0; color: var(--muted); }
.top-actions { display: flex; gap: 8px; align-items: center; }
#selectBarco { min-width: 230px; }

.top-date-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 8px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}
.top-date-inline label {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.top-date-inline .form-control {
    width: 145px;
    height: 30px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 8px;
}
.app-card-previsao { padding-top: 14px; }


.tela { display: none; }
.tela.ativa { display: block; }

.alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.alert-card {
    border-radius: 15px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.alert-card.warning { background: var(--soft-yellow); }
.alert-card.danger { background: var(--soft-red); }
.alert-card.info { background: var(--soft-blue); }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
}
.app-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
}
.card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.card-head.compact { align-items: center; }
.card-head h3 { margin: 0; font-size: 21px; font-weight: 800; }
.card-head p { margin: 4px 0 0; color: var(--muted); }
.eyebrow {
    display: block;
    color: var(--secondary-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.badge-status {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--soft-green);
    color: #166534;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.badge-status.bloqueado { background: var(--soft-red); color: #991b1b; }
.badge-status.alerta { background: var(--soft-yellow); color: #854d0e; }
.info-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.info-item {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    padding: 10px;
}
.info-item small { color: var(--muted); display: block; }
.info-item strong { display: block; margin-top: 4px; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.muted-icon { color: #94a3b8; font-size: 22px; }
.timeline-mini, .weather-mini, .service-mini { display: grid; gap: 10px; }
.mini-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #edf2f7;
}
.mini-row span { color: var(--muted); font-size: 13px; }

.responsive-head { align-items: center; }
.segmented {
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px;
    display: flex;
}
.seg {
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
}
.seg.active { background: #fff; color: var(--primary); box-shadow: 0 3px 10px rgba(15, 23, 42, .08); }
.agenda-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.agenda-controls .form-group { min-width: 210px; }
.resumo-agendamento {
    display: none;
    margin-top: 10px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
}
.resumo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.resumo-grid div { background:#fff; border:1px solid #edf2f7; padding:9px; border-radius:12px; }
.resumo-grid small { color: var(--muted); display:block; }

.grid-horarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.card-horario {
    border-radius: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.card-horario-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.card-horario-topo strong { font-size: 24px; }
.slot-tag {
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    font-weight: 800;
}
.card-horario-info { font-size: 13px; color: #475569; line-height: 1.75; }
.card-horario-acao { margin-top: 12px; }
.slot-ok { border-color: #bbf7d0; }
.slot-ok .slot-tag { background: var(--soft-green); color: #166534; }
.slot-bloqueado { opacity: .72; background: #f8fafc; }
.slot-bloqueado .slot-tag { background: var(--soft-red); color: #991b1b; }
.slot-ocupado .slot-tag { background: #e2e8f0; color: #475569; }
.slot-motivo { font-size: 12px; color: #991b1b; background: var(--soft-red); padding: 8px; border-radius: 10px; }

.slot-agendado {
    opacity: 1;
    background: #fff7ed;
    border-color: #fb923c;
    box-shadow: 0 10px 24px rgba(251, 146, 60, .16);
}
.slot-agendado .slot-tag {
    background: #ffedd5;
    color: #9a3412;
}
.slot-indisponivel-agenda .slot-tag {
    background: #e2e8f0;
    color: #475569;
}
.slot-indisponivel-agenda .btn[disabled] {
    opacity: .82;
    cursor: not-allowed;
}

.forecast-grid, .servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.forecast-card, .servico-card {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 14px;
}
.forecast-card i, .servico-card i { color: var(--primary); font-size: 22px; margin-bottom: 10px; }
.forecast-card:nth-child(2) i, .servico-card:nth-child(2) i { color: var(--secondary); }
.forecast-card:nth-child(3) i, .servico-card:nth-child(3) i { color: var(--accent-red); }
.forecast-card h4, .servico-card h4 { margin: 0 0 6px; font-weight: 800; }
.forecast-card p, .servico-card p { margin: 0; color: var(--muted); }
.servico-card { cursor: pointer; }
.servico-card.active { border-color: var(--primary); background: var(--soft-blue); }
.servico-card h4 { margin-bottom: 0; }
.obs-servico { margin-top: 14px; }
.inline-message { margin-top: 10px; font-weight: 700; }
.inline-message.ok { color: var(--success); }
.inline-message.erro { color: var(--danger); }

.historico-list { display: grid; gap: 10px; }
.hist-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    padding: 12px;
}
.hist-item small { color: var(--muted); display:block; }
.date-small { min-width: 190px; margin-bottom: 0; }

.mobile-nav { display: none; }

@media (max-width: 900px) {
    .top-actions { flex-wrap: wrap; justify-content: flex-end; }
    .top-date-inline { order: 3; width: 100%; justify-content: space-between; }
    .top-date-inline .form-control { width: 160px; }
    .app-sidebar { display: none; }
    .app-main { margin-left: 0; padding: 16px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .app-topbar { align-items: flex-start; }
    .top-actions { flex: 1; justify-content: flex-end; }
    #selectBarco { min-width: 160px; width: 100%; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .info-list { grid-template-columns: 1fr; }
    .responsive-head { flex-direction: column; align-items: stretch; }
    .segmented { align-self: flex-start; }
    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        background:
        linear-gradient(180deg, #003f78 0%, #005aa5 52%, #0f2d48 100%);
        border-radius: 18px 18px 0 0;
        padding: 5px max(6px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
        z-index: 50;
        box-shadow: 0 -6px 18px rgba(15, 23, 42, .18);
        min-height: 58px;
        max-height: calc(62px + env(safe-area-inset-bottom));
        align-items: center;
    }
    .mob-item {
        background: transparent;
        color: #94a3b8;
        border: 0;
        border-radius: 12px;
        padding: 5px 2px 4px;
        font-size: 10px;
        line-height: 1.05;
        min-width: 0;
        min-height: 46px;
    }
    .mob-item i { display: block; font-size: 15px; margin-bottom: 2px; line-height: 1; }
    .mob-item.active { background: rgba(255,255,255,.11); color: #fff; }
}

@media (max-width: 520px) {
    .app-topbar { flex-direction: column; }
    .top-actions { width: 100%; }
    .app-topbar h2 { font-size: 24px; }
    .card-head { flex-direction: column; }
    .hist-item { flex-direction: column; }
}

/* Plano de navegação */
.plano-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.plano-full { grid-column: 1 / -1; }
.check-row {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #f8fafc;
    border-radius: 14px;
    color: var(--text);
}
.check-row label { margin: 0; font-weight: 500; }
.check-row input { margin-right: 8px; }
.aviso-plano {
    display: none;
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    font-size: 13px;
}
.aviso-plano i { margin-right: 6px; }
.aviso-plano.ok {
    background: var(--soft-green);
    color: #166534;
    border-color: #bbf7d0;
}
.aviso-plano.pendente {
    background: var(--soft-yellow);
    color: #854d0e;
    border-color: #fde68a;
}
.aviso-plano .btn { margin-left: 8px; }

/* Gráficos de previsão */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.chart-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    min-width: 0;
}
.chart-card canvas {
    width: 100% !important;
    max-height: 220px;
}

.chart-card-full {
    grid-column: 1 / -1;
}
.chart-card-chuva canvas {
    max-height: 190px;
}
.chart-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.chart-title strong { font-size: 15px; }
.chart-title span {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .04em;
}

@media (max-width: 760px) {
    .plano-grid,
    .charts-grid {
        grid-template-columns: 1fr;
    }
    .mobile-nav {
        grid-template-columns: repeat(6, 1fr);
    }
    .mob-item span { font-size: 10px; }
}

/* Ajustes v5: previsão com temperatura e cabeçalhos compactos no mobile */
.alert-card-compact {
    min-height: 58px;
    align-items: center;
}
.alert-card-compact i {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.65);
    color: var(--primary);
    flex: 0 0 auto;
}
.alert-card-compact strong { line-height: 1.15; }
.alert-card-compact small {
    color: #334155;
    line-height: 1.25;
}
.weather-mini .mini-row small {
    color: var(--muted);
    font-weight: 700;
}
.forecast-card strong {
    color: var(--text);
}

@media (max-width: 760px) {
    .alert-grid {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 10px;
    }
    .alert-card {
        border-radius: 12px;
        padding: 8px 10px;
        gap: 8px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    }
    .alert-card-compact {
        min-height: auto;
    }
    .alert-card-compact i {
        width: 24px;
        height: 24px;
        border-radius: 9px;
        font-size: 12px;
    }
    .alert-card-compact strong {
        font-size: 13px;
    }
    .alert-card-compact small {
        display: block;
        font-size: 11px;
        line-height: 1.2;
    }
    .forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .forecast-card {
        border-radius: 13px;
        padding: 10px;
    }
    .forecast-card i {
        font-size: 17px;
        margin-bottom: 6px;
    }
    .forecast-card h4 {
        font-size: 13px;
        margin-bottom: 3px;
    }
    .forecast-card p {
        font-size: 11px;
        line-height: 1.25;
    }
    .forecast-card p strong {
        font-size: 13px;
    }
    .card-head.responsive-head {
        gap: 8px;
        margin-bottom: 10px;
    }
    .card-head.responsive-head h3 {
        font-size: 18px;
    }
    .card-head.responsive-head p {
        font-size: 12px;
        line-height: 1.25;
    }
    .date-small {
        min-width: 0;
        width: 100%;
    }
    .chart-card {
        padding: 10px;
        border-radius: 14px;
    }
}

@media (max-width: 420px) {
    .forecast-grid {
        grid-template-columns: 1fr;
    }
    .alert-card-compact small {
        white-space: normal;
    }
}

.forecast-alertas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 2px;
}
.forecast-alerta {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #7c2d12;
}
.forecast-alerta i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, .16);
    color: #b45309;
    font-size: 20px;
}
.forecast-alerta strong,
.forecast-alerta span {
    display: block;
}
.forecast-alerta span {
    font-size: 12px;
    line-height: 1.35;
    color: #854d0e;
}
.forecast-alerta.severo {
    border-color: #fecaca;
    background: #fef2f2;
    color: #7f1d1d;
}
.forecast-alerta.severo i {
    background: rgba(239, 68, 68, .14);
    color: #b91c1c;
}
.forecast-alerta.severo span {
    color: #991b1b;
}

/* Agendamento existente */
.agendamento-existente {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .22);
}
.agendamento-existente strong {
    color: #9f1d2a;
}
.agendamento-existente span {
    color: #667085;
    font-size: 13px;
}
@media (max-width: 767px) {
    .agendamento-existente {
        align-items: stretch;
        flex-direction: column;
    }
    .agendamento-existente .btn {
        width: 100%;
    }
}

/* Status operacional mostrado para o proprietário */
.owner-status-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: #eef7ff;
    border: 1px solid #cfe8ff;
}
.owner-status-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0b6cae;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.owner-status-box small {
    display: block;
    color: #597083;
    margin-top: 3px;
}
.midias-proprietario {
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;
    background: #fffaf0;
    border: 1px solid #f3dfb0;
}
.midias-proprietario strong { display: block; margin-bottom: 8px; }
.midias-proprietario a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    color: #775300;
    text-decoration: none;
    border-top: 1px dashed #ecd494;
}
.midias-proprietario a:first-of-type { border-top: 0; }
.midias-proprietario small { color: #9b7b32; }
.midias-aviso-validade {
    margin: 4px 0 8px;
    padding: 7px 9px;
    border-radius: 10px;
    background: #fff4d8;
    color: #8a5d05;
    font-size: 12px;
}
.midias-proprietario a span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.midias-proprietario a small {
    max-width: 55%;
    text-align: right;
}


/* Ajuste global anti-overflow mobile/iPhone */
html {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}
.app-shell, .mobile-shell, .admin-shell, .card, .painel, .modal-content, .modal-body {
    min-width: 0;
    max-width: 100%;
}
@media (max-width: 767px) {
    html, body {
        min-width: 0;
        overflow-x: hidden !important;
    }
    input, select, textarea {
        max-width: 100%;
        font-size: 16px;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
    }
    .modal-open {
        overflow: hidden !important;
        padding-right: 0 !important;
    }
    .modal {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }
    .modal-dialog {
        max-width: 100vw !important;
    }
}

/* PWA / logos com área segura */
.brand-logo-login,
.brand-logo-sidebar,
.admin-brand img,
.tv-brand img {
    object-fit: contain;
}
.brand-logo-login {
    max-height: 220px;
}
.brand-logo-sidebar {
    background: rgba(255, 255, 255, .98);
    padding: 2px;
}
.pwa-install-box {
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
    background: #f7fbfd;
    border: 1px solid #d9e7ef;
    text-align: center;
}
.pwa-install-box .btn {
    border-radius: 999px;
    font-weight: 800;
}
.pwa-install-box small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    line-height: 1.35;
}
@media (display-mode: standalone) {
    .pwa-install-box { display: none !important; }
}


/* PWA instalado: evita zoom por pinça e estouro lateral no mobile */
html,
body {
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
    overscroll-behavior-x: none;
}

html.pwa-no-zoom,
html.pwa-no-zoom body {
    max-width: 100%;
    overflow-x: hidden;
}

button,
a,
input,
select,
textarea,
.btn {
    touch-action: manipulation;
}

@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Ajuste mobile: select da embarcação + sair na mesma linha, sem quebrar layout */
@media (max-width: 900px) {
    .app-topbar {
        display: block;
        margin-bottom: 10px;
    }
    .app-topbar > div:first-child {
        margin-bottom: 8px;
    }
    .app-topbar h2 {
        font-size: 21px;
        line-height: 1.15;
    }
    .app-topbar p {
        font-size: 12px;
        margin-top: 3px;
    }
    .top-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 7px;
        align-items: center;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }
    #selectBarco {
        grid-column: 1;
        min-width: 0 !important;
        width: 100% !important;
        height: 34px;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 14px !important;
    }
    #btnSair {
        grid-column: 2;
        width: 42px;
        min-width: 42px;
        height: 34px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        line-height: 1;
        border-radius: 8px;
    }
    .top-date-inline {
        grid-column: 1 / -1;
        order: initial !important;
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 420px) {
    .app-main {
        padding-left: 13px;
        padding-right: 13px;
    }
    .top-actions {
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 6px;
    }
    #btnSair {
        width: 38px;
        min-width: 38px;
    }
}

/* Mídias operacionais: vídeo inline para evitar download no Android */
.midia-video-card {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    border: 1px dashed #e4c985;
}
.midia-video-card strong {
    display: block;
    margin-bottom: 8px;
    color: #775300;
}
.midia-video-card video {
    display: block;
    width: 100%;
    max-height: 280px;
    border-radius: 12px;
    background: #000;
}
.midia-video-card small {
    display: block;
    margin-top: 7px;
    color: #9b7b32;
    line-height: 1.35;
}


/* Ajustes v21: serviços pendentes na tela Serviços */
.servicos-pendentes-box {
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 16px;
    padding: 12px;
    margin: 12px 0 14px;
}
.servicos-pendentes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.servicos-pendentes-head strong {
    color: var(--text);
    font-weight: 800;
}
.servicos-pendentes-head small {
    color: var(--muted);
    font-weight: 600;
}
.servicos-pendentes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.servico-pendente-item {
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.servico-pendente-item strong {
    display: block;
    color: var(--text);
    font-weight: 800;
}
.servico-pendente-item small {
    display: block;
    color: var(--muted);
    margin-top: 2px;
}
.servico-pendente-item span {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 9px;
    background: var(--soft-blue);
    color: var(--primary);
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .servicos-pendentes-head {
        display: block;
    }
    .servicos-pendentes-head small {
        display: block;
        margin-top: 2px;
    }
    .servicos-pendentes-list {
        grid-template-columns: 1fr;
    }
    .servico-pendente-item {
        align-items: flex-start;
    }
}


/* Ajustes v23: serviços pendentes abaixo da solicitação e plano no admin */
.servicos-pendentes-aba {
    margin-top: 16px;
    margin-bottom: 0;
}
.op-plano-box {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    display: grid;
    gap: 4px;
}
.op-plano-box strong { color: #0f172a; }
.op-plano-box small { display: block; color: #64748b; line-height: 1.35; }
.op-plano-box.ok { border-color: rgba(34, 197, 94, .28); background: rgba(240, 253, 244, .9); }
.op-plano-box.pendente { border-color: rgba(245, 158, 11, .35); background: rgba(255, 251, 235, .95); }


/* v25 - Plano de navegação obrigatório antes da descida */
.planos-historico-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(148, 163, 184, .24); }
.plano-historico-item small { display: block; }
.admin-plano-box { margin: 8px 0 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, .35); background: #f8fafc; }
.admin-plano-box strong { display: block; margin-bottom: 4px; }
.admin-plano-box small { display: block; color: #475569; line-height: 1.35; }
.admin-plano-box.ok { border-color: rgba(34,197,94,.35); background: #f0fdf4; }
.admin-plano-box.pendente { border-color: rgba(245,158,11,.35); background: #fffbeb; }
.admin-planos-versoes { margin: 6px 0 10px; }


/* v27 - plano em modal e serviços com ícone parametrizado */
.modal-plano-agendamento .modal-content {
    border-radius: 18px;
    border: 0;
    overflow: hidden;
}
.modal-plano-agendamento .modal-header {
    background: linear-gradient(135deg, rgba(0,90,165,.10), rgba(244,122,28,.10));
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.modal-plano-agendamento .modal-title { font-weight: 900; color: var(--text); }
.modal-plano-agendamento .modal-subtitle { margin: 6px 0 0; color: var(--muted); }
.modal-plano-agendamento .modal-footer { border-top: 1px solid rgba(15,23,42,.08); }
@media (max-width: 760px) {
    .modal-plano-agendamento .modal-dialog { width: 100vw; max-width: 100vw; height: 100dvh; margin: 0; }
    .modal-plano-agendamento .modal-content { min-height: 100dvh; border-radius: 0; }
    .modal-plano-agendamento .modal-body { max-height: calc(100dvh - 170px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Ajustes v34: login salvo e reset de senha */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -4px 0 14px;
    font-size: 13px;
}
.remember-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}
.remember-login input { margin: 0; }
.btn-forget-login {
    padding: 0;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none !important;
}
.modal-reset-senha .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}
.modal-reset-senha .modal-header {
    background: linear-gradient(135deg, var(--primary), #0f75bc);
    color: #fff;
    border: 0;
}
.modal-reset-senha .modal-header .close { color: #fff; opacity: .95; }
.modal-reset-senha .modal-title { font-weight: 900; }
.reset-info {
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 12px;
}
.inline-message.erro,
.login-msg.erro { color: var(--danger); }
.inline-message.ok,
.login-msg.ok { color: var(--success); }
@media (max-width: 520px) {
    .login-options { font-size: 12px; }
    .modal-reset-senha {
        width: auto;
        margin: 10px;
    }
    .modal-reset-senha input,
    .modal-reset-senha select,
    .modal-reset-senha textarea {
        font-size: 16px;
    }
}

.reset-senha-regra {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 5px;
}


/* Aviso de nova versão do PWA */
.pwa-update-box {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 99999;
    pointer-events: none;
}
.pwa-update-content {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(0, 90, 165, .18);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
    pointer-events: auto;
}
.pwa-update-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--soft-blue);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 18px;
}
.pwa-update-text {
    min-width: 0;
    flex: 1;
}
.pwa-update-text strong,
.pwa-update-text span {
    display: block;
}
.pwa-update-text strong {
    font-size: 14px;
    color: var(--text);
    line-height: 1.15;
}
.pwa-update-text span {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.25;
    margin-top: 2px;
}
.pwa-update-content .btn {
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .pwa-update-content {
        align-items: stretch;
        gap: 9px;
        padding: 10px;
    }
    .pwa-update-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-size: 15px;
    }
    .pwa-update-content .btn {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px;
    }
}


/* v45 - fallback para vídeos MOV/iPhone antes da conversão */
.midia-video-card .marina-video-player { width: 100%; border-radius: 14px; background: #000; display: block; }
.marina-video-fallback { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 245, 210, .95); color: #806000; font-size: 13px; line-height: 1.35; }
.marina-video-fallback span { display: block; margin-bottom: 8px; }
.btn-abrir-video-externo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #0b2a4a; color: #fff !important; text-decoration: none !important; font-weight: 700; }
.btn-abrir-video-externo:hover, .btn-abrir-video-externo:focus { color: #fff !important; text-decoration: none !important; }


/* v47 - barra inferior mobile compacta no iOS/Android */
@media (max-width: 900px) {
    .mobile-nav {
        border-radius: 14px 14px 0 0;
        padding-top: 5px;
        padding-bottom: calc(5px + env(safe-area-inset-bottom));
    }
    .mob-item span {
        display: block;
        font-size: 10px;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 390px) {
    .mobile-nav {
        padding-left: max(4px, env(safe-area-inset-left));
        padding-right: max(4px, env(safe-area-inset-right));
    }
    .mob-item {
        font-size: 9px;
        min-height: 43px;
        padding-top: 4px;
    }
    .mob-item i {
        font-size: 14px;
    }
    .mob-item span {
        font-size: 9px;
    }
}

/* v48 - barra inferior ainda mais compacta e com respiro lateral no iOS */
@media (max-width: 900px) {
    .app-main {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    .mobile-nav {
        border-radius: 12px 12px 0 0;
        padding-top: 3px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom));
        padding-left: 10px;
        padding-right: 10px;
        min-height: 48px;
        max-height: calc(54px + env(safe-area-inset-bottom));
        align-items: center;
        column-gap: 2px;
    }

    .mob-item {
        border-radius: 10px;
        min-height: 38px;
        padding: 3px 1px 2px;
        font-size: 9px;
        line-height: 1;
    }

    .mob-item i {
        font-size: 13px;
        margin-bottom: 1px;
        line-height: 1;
    }

    .mob-item span {
        font-size: 8.8px;
        line-height: 1;
    }

    .mob-item.active {
        background: rgba(255,255,255,.10);
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        .mobile-nav {
            padding-left: max(18px, env(safe-area-inset-left));
            padding-right: max(18px, env(safe-area-inset-right));
            padding-top: 3px;
            padding-bottom: calc(2px + env(safe-area-inset-bottom));
            min-height: 46px;
            max-height: calc(52px + env(safe-area-inset-bottom));
        }

        .mob-item {
            min-height: 36px;
            padding-top: 2px;
            padding-bottom: 1px;
        }

        .mob-item i {
            font-size: 12.5px;
        }

        .mob-item span {
            font-size: 8.5px;
        }
    }
}

@media (max-width: 390px) {
    .mobile-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mob-item i {
        font-size: 12px;
    }

    .mob-item span {
        font-size: 8.2px;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 390px) {
        .mobile-nav {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }
}

/* v49 - ajuste fino iOS: barra menor, itens mais baixos e mais respiro lateral */
@media (max-width: 900px) {
    .app-main {
        padding-bottom: 68px !important;
    }

    .mobile-nav {
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        align-items: end !important;
        border-radius: 14px 14px 0 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mob-item {
        min-height: 48px !important;
        height: 48px !important;
        padding: 6px 1px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateY(3px);
        border-radius: 13px !important;
    }

    .mob-item i {
        font-size: 15px !important;
        line-height: 1 !important;
        margin: 0 0 3px !important;
    }

    .mob-item span {
        font-size: 9px !important;
        line-height: 1 !important;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        .app-main {
            padding-bottom: 66px !important;
        }

        .mobile-nav {
            height: 60px !important;
            min-height: 60px !important;
            max-height: 60px !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
            padding-left: max(30px, env(safe-area-inset-left)) !important;
            padding-right: max(30px, env(safe-area-inset-right)) !important;
            align-items: end !important;
        }

        .mob-item {
            min-height: 48px !important;
            height: 48px !important;
            padding-top: 7px !important;
            padding-bottom: 3px !important;
            transform: translateY(4px);
        }

        .mob-item i {
            font-size: 15px !important;
            margin-bottom: 3px !important;
        }

        .mob-item span {
            font-size: 9px !important;
        }
    }
}

@media (max-width: 390px) {
    .mobile-nav {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .mob-item i {
        font-size: 14px !important;
    }

    .mob-item span {
        font-size: 8.5px !important;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 390px) {
        .mobile-nav {
            padding-left: max(26px, env(safe-area-inset-left)) !important;
            padding-right: max(26px, env(safe-area-inset-right)) !important;
        }
    }
}


/* v50 - ajuste final barra mobile: sobe ícones/textos e mantém respiro lateral no iOS */
@media (max-width: 900px) {
    .mobile-nav {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        align-items: center !important;
    }

    .mob-item {
        transform: translateY(-3px) !important;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        .mobile-nav {
            height: 60px !important;
            min-height: 60px !important;
            max-height: 60px !important;
            padding-left: max(30px, env(safe-area-inset-left)) !important;
            padding-right: max(30px, env(safe-area-inset-right)) !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
            align-items: center !important;
        }

        .mob-item {
            transform: translateY(-3px) !important;
        }
    }
}

/* v50 - pull to refresh visual dentro do PWA/iOS */
.pull-refresh-indicator {
    position: fixed;
    left: 50%;
    top: max(10px, env(safe-area-inset-top));
    transform: translate(-50%, -80px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .25);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
}

.pull-refresh-indicator.visivel {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pull-refresh-indicator.atualizando i {
    animation: marinaSpin .8s linear infinite;
}

@keyframes marinaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* v54 - card do plano de navegacao mais visual */
.plano-historico-item {
    display: block;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .26);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
.plano-historico-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.plano-historico-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,90,165,.14), rgba(244,122,28,.14));
    color: var(--primary);
    font-size: 18px;
    flex: 0 0 42px;
}
.plano-historico-head strong {
    display: block;
    color: var(--text);
    font-weight: 900;
    font-size: 16px;
    line-height: 1.15;
}
.plano-historico-head span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.plano-historico-meta {
    display: grid;
    gap: 8px;
}
.plano-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid transparent;
    background: #fff;
}
.plano-meta-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.plano-meta-value {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    text-align: right;
    line-height: 1.2;
}
.plano-meta-row.inclusao {
    background: rgba(241,245,249,.92);
    border-color: rgba(148,163,184,.22);
}
.plano-meta-row.inclusao .plano-meta-label { color: #475569; }
.plano-meta-row.inclusao .plano-meta-value { color: #334155; }
.plano-meta-row.saida {
    background: rgba(255,247,237,.95);
    border-color: rgba(249,115,22,.18);
}
.plano-meta-row.saida .plano-meta-label { color: #c2410c; }
.plano-meta-row.saida .plano-meta-value { color: #9a3412; }
.plano-meta-row.retorno {
    background: rgba(239,246,255,.96);
    border-color: rgba(59,130,246,.18);
}
.plano-meta-row.retorno .plano-meta-label { color: #1d4ed8; }
.plano-meta-row.retorno .plano-meta-value { color: #1e3a8a; }
@media (max-width: 760px) {
    .plano-historico-item {
        padding: 12px;
    }
    .plano-historico-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 16px;
        flex-basis: 38px;
    }
    .plano-historico-head strong {
        font-size: 15px;
    }
    .plano-meta-row {
        padding: 9px 10px;
    }
    .plano-meta-label {
        font-size: 11px;
    }
    .plano-meta-value {
        font-size: 13px;
        max-width: 55%;
    }
}


/* v55 - simplifica o card do plano: sem boxes externos nas linhas */
.plano-historico-head span { display: none !important; }
.plano-historico-meta {
    gap: 10px;
}
.plano-meta-row {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.plano-meta-label {
    padding: 7px 12px;
    border-radius: 999px;
}
.plano-meta-row.inclusao .plano-meta-label {
    background: rgba(241,245,249,.96);
    border: 1px solid rgba(148,163,184,.18);
}
.plano-meta-row.saida .plano-meta-label {
    background: rgba(255,247,237,.96);
    border: 1px solid rgba(249,115,22,.16);
}
.plano-meta-row.retorno .plano-meta-label {
    background: rgba(239,246,255,.98);
    border: 1px solid rgba(59,130,246,.16);
}
.plano-meta-value {
    background: transparent !important;
    padding: 0 !important;
    font-size: 15px;
    font-weight: 900;
}
@media (max-width: 760px) {
    .plano-meta-value {
        font-size: 14px;
    }
    .plano-meta-label {
        padding: 6px 10px;
    }
}