/**
 * PROHIBITED ROAD CSS — Estilos para lógica inteligente de via proibida
 * v1.1.0 — 2026-04-20
 *
 * Componentes:
 *   1. Warning Card (estado ALERT) — card vermelho no topo com siren pulsando
 *   2. Decision Prompt (estado DECIDING) — overlay fullscreen com botões Sim/Não
 *   3. Risk Banner (estado RISK_ACCEPTED) — banner laranja persistente
 */

/* ═══════════════════════════════════════════════════════════
   1. WARNING CARD — Estado ALERT (~500m da via proibida)
   ═══════════════════════════════════════════════════════════ */

.prohibited-warning-card {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-nav-ui) + 8);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    padding: 14px 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.6);
    animation: prohibitedPulse 1.5s ease-in-out infinite;
}

.prohibited-warning-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.prohibited-siren {
    font-size: 20px;
    animation: sirenPulse 0.8s ease-in-out infinite alternate;
}

.prohibited-warning-body {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.95;
}

.prohibited-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.prohibited-distance {
    font-size: 14px;
    font-weight: 700;
}

.prohibited-attempts {
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.8;
}

@keyframes prohibitedPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.88; }
}

@keyframes sirenPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.25); }
}

/* ═══════════════════════════════════════════════════════════
   2. DECISION PROMPT — Estado DECIDING (Sim/Não)
   ═══════════════════════════════════════════════════════════ */

.prohibited-decision-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-nav-ui) + 10);
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlayFadeIn 0.3s ease-out;
}

.prohibited-decision-card {
    background: white;
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: cardSlideUp 0.3s ease-out;
}

.prohibited-decision-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: sirenPulse 0.8s ease-in-out infinite alternate;
}

.prohibited-decision-title {
    font-size: 18px;
    font-weight: 800;
    color: #dc2626;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.prohibited-decision-name {
    font-size: 14px;
    color: #374151;
    font-weight: 600;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.prohibited-decision-question {
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.4;
}

.prohibited-decision-buttons {
    display: flex;
    gap: 12px;
}

.prohibited-btn {
    flex: 1;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.prohibited-btn:active {
    transform: scale(0.97);
}

.prohibited-btn-yes {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

.prohibited-btn-no {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
}

.prohibited-decision-disclaimer {
    margin-top: 16px;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.3;
}

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

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

/* ═══════════════════════════════════════════════════════════
   🆕 v11.2.81 (Etapa B2): PREVIEW antecipado — banner laranja
   Dispara a 1.5km/90s antes do DECIDING atual (500m). Mensagem
   antecipada permite decisão consciente com tempo de reação.
   Cor laranja diferencia do DECIDING (vermelho) e do RISK banner.
   ═══════════════════════════════════════════════════════════ */

.prohibited-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-nav-ui) + 9); /* abaixo do decision (1050) — se DECIDING entrar, sobrepõe */
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlayFadeIn 0.3s ease-out;
}

.prohibited-preview-card {
    background: white;
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    animation: cardSlideUp 0.3s ease-out;
    border-top: 6px solid #f59e0b; /* faixa laranja indicando antecipação */
}

.prohibited-preview-icon {
    font-size: 44px;
    margin-bottom: 10px;
}

.prohibited-preview-title {
    font-size: 17px;
    font-weight: 800;
    color: #d97706;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.prohibited-preview-name {
    font-size: 14px;
    color: #374151;
    font-weight: 600;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: #fff7ed;
    border-radius: 8px;
    border: 1px solid #fed7aa;
}

.prohibited-preview-question {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.5;
}

.prohibited-preview-question strong {
    color: #d97706;
}

.prohibited-preview-buttons {
    display: flex;
    gap: 12px;
}

.prohibited-preview-btn {
    flex: 1;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.prohibited-preview-btn:active {
    transform: scale(0.97);
}

/* 🆕 v11.2.247: "(recalcula)" na segunda linha do botao. O aviso de que a rota
   vai mudar precisa estar ONDE O DEDO VAI — o motorista a 45 km/h le o botao,
   nao o paragrafo. Fica menor e translucido para nao competir com o rotulo. */
.prohibited-preview-btn small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
    line-height: 1.2;
}

.prohibited-preview-btn-divert {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
}

.prohibited-preview-btn-continue {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4);
}

.prohibited-preview-disclaimer {
    margin-top: 16px;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.3;
}

body.night-mode .prohibited-preview-card {
    background: #1f2937;
    border-top-color: #fbbf24;
}

body.night-mode .prohibited-preview-title {
    color: #fbbf24;
}

body.night-mode .prohibited-preview-name {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

body.night-mode .prohibited-preview-question {
    color: #e5e7eb;
}

body.night-mode .prohibited-preview-question strong {
    color: #fbbf24;
}

body.night-mode .prohibited-preview-disclaimer {
    color: #6b7280;
}

/* ═══════════════════════════════════════════════════════════
   3. RISK BANNER — Estado RISK_ACCEPTED
   ═══════════════════════════════════════════════════════════ */

/* ─── Inline dentro do navigation-panel (compacto, 1 linha) ─── */
.prohibited-risk-banner {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    color: white;
    padding: 4px 10px;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 4px;
    animation: riskPulse 3s ease-in-out infinite;
}

.prohibited-risk-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
}

.prohibited-risk-header .prohibited-siren {
    font-size: 12px;
}

.prohibited-risk-sub {
    display: none;
}

@keyframes riskPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/* ═══════════════════════════════════════════════════════════
   4. RECALC ENTRY BANNER — Situação 2 (entrada via recálculo)
   Mais suave que o risk banner padrão: fundo vermelho escuro.
   ═══════════════════════════════════════════════════════════ */

.prohibited-recalc-entry {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    animation: recalcEntryPulse 2s ease-in-out infinite;
}

/* ─── Fallback: banner fora do panel (ex: panel não visível) ─── */
.prohibited-risk-banner.prohibited-risk-floating {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-nav-ui) + 7);
    border-radius: 0;
    margin-bottom: 0;
    padding: 10px 16px;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.5);
}

.prohibited-risk-floating .prohibited-risk-header {
    font-size: 13px;
    gap: 8px;
}

.prohibited-risk-floating .prohibited-risk-header .prohibited-siren {
    font-size: 20px;
}

.prohibited-risk-floating .prohibited-risk-sub {
    font-size: 11px;
}

@keyframes recalcEntryPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.92; }
}

/* ═══════════════════════════════════════════════════════════
   5. PRE-START CARD ADJUSTMENT
   Ajustes no dialog de confirmação pré-início (reutiliza decision prompt)
   ═══════════════════════════════════════════════════════════ */

.prestart-restriction-card .prohibited-decision-name {
    max-height: 80px;
    overflow-y: auto;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   NIGHT MODE — Suporte tema escuro
   ═══════════════════════════════════════════════════════════ */

body.night-mode .prohibited-decision-card {
    background: #1f2937;
}

body.night-mode .prohibited-decision-title {
    color: #f87171;
}

body.night-mode .prohibited-decision-name {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

body.night-mode .prohibited-decision-question {
    color: #e5e7eb;
}

body.night-mode .prohibited-decision-disclaimer {
    color: #6b7280;
}