* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f0f2f5; }
#map-container { position: relative; width: 100%; height: 100%; }
#map { width: 100%; height: 100%; background: #d4d4d4; z-index: 1; }
#logo-overlay { position: absolute; top: 8px; left: 8px; z-index: 1000; background: rgba(10, 34, 64, .9); padding: 1px; border-radius: 1px; box-shadow: 0 2px 5px rgba(0,0,0,.3); pointer-events: none; }
#logo-overlay a { pointer-events: auto; display: block; }
.logo { max-height: 60px; display: block; }
#map.loading::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.1); z-index: 999; pointer-events: none; }
.ship-marker-icon svg, .sprite-icon { filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.popup-content { font-size: 13px; line-height: 1.3; }
.popup-content b { color: #333; }
.popup-content hr { border: 0; border-top: 1px solid #ddd; margin: 3px 0; }
.leaflet-popup-content-wrapper { border-radius: 8px; }
.error-message { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: #d32f2f; color: #fff; padding: 12px 20px; border-radius: 6px; z-index: 2000; font-size: 14px; display: none; max-width: min(92vw, 600px); }
.poi-marker-image { object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.poi-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border: 1px solid #243746; border-radius: 9px; }
.poi-popup .leaflet-popup-content { width: 278px !important; margin: 0; }
.poi-popup-content { color: #173042; font-size: 12px; line-height: 1.35; }
.poi-popup-banner { display: block; width: 100%; height: 108px; object-fit: cover; background: #e7eef2; }
.poi-popup-title { padding: 8px 10px 3px; font-size: 15px; font-weight: 700; text-transform: uppercase; }
.poi-popup-type { margin: 0 10px 6px; padding-bottom: 5px; border-bottom: 2px solid #173042; color: #087f9d; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.poi-popup-description, .poi-popup-contacts { padding: 0 10px; }
.poi-popup-description { margin-bottom: 7px; }
.poi-popup-contacts { padding-bottom: 9px; }
.poi-popup-contacts div { margin-top: 2px; white-space: nowrap; }
.poi-popup-contacts a { color: #087f9d; font-weight: 600; overflow-wrap: anywhere; }
.poi-popup-contacts a[href^="http"] { white-space: nowrap; }
.alert-marker { color: #fff; font-weight: 800; text-align: center; line-height: 28px; border: 2px solid #fff; border-radius: 50%; background: #d00000; box-shadow: 0 1px 5px rgba(0,0,0,.65); }
.alert-popup { font-size: 13px; line-height: 1.4; }

.poi-marker-fallback { display: flex; align-items: center; justify-content: center; width: 34px !important; height: 34px !important; border: 2px solid #fff; border-radius: 50%; background: #008b8b; color: #fff; font-size: 21px; box-shadow: 0 1px 4px rgba(0,0,0,.55); }

/* Atalho SOS recolhido e lista de alertas sobre o mapa */
.alert-launcher { position: absolute; z-index: 1200; top: 132px; left: 14px; right: auto; width: 76px; height: 76px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.alert-sos-icon { display: flex; width: 72px; height: 72px; align-items: center; justify-content: center; border-radius: 15px; background: linear-gradient(145deg, #ff9e22, #f04400); box-shadow: 0 2px 5px rgba(0,0,0,.35); color: #fff; font-size: 27px; font-weight: 900; letter-spacing: -1px; }
.alert-launcher-count { position: absolute; top: -1px; right: -1px; display: flex; min-width: 30px; height: 30px; align-items: center; justify-content: center; padding: 0 6px; border: 2px solid #fff; border-radius: 18px; background: #263746; color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.alert-panel { position: absolute; z-index: 1100; top: 132px; left: 14px; right: auto; width: min(390px, calc(100vw - 28px)); max-height: min(48vh, 440px); overflow: hidden; border: 1px solid #b42318; border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 3px 14px rgba(0,0,0,.28); color: #172b3a; }
.alert-panel[hidden], .alert-modal[hidden] { display: none !important; }
.alert-panel-header { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px; color: #fff; background: #c62828; }
.alert-panel-header strong { flex: 1; }
.alert-panel-header .alert-close { width: 30px; height: 30px; background: rgba(255,255,255,.18); color: #fff; }
.alert-count { min-width: 23px; padding: 2px 7px; border-radius: 12px; background: #fff; color: #b71c1c; text-align: center; font-size: 12px; font-weight: 800; }
.alert-list { max-height: calc(min(48vh, 440px) - 45px); overflow-y: auto; }
.alert-empty { padding: 18px 12px; color: #526775; font-size: 13px; text-align: center; }
.alert-row { display: block; width: 100%; padding: 9px 11px; border: 0; border-bottom: 1px solid #e2e6e9; background: #fff; color: #172b3a; text-align: left; cursor: pointer; }
.alert-row:hover, .alert-row:focus-visible { background: #fff2f1; outline: 2px solid #c62828; outline-offset: -2px; }
.alert-row-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #b71c1c; font-size: 13px; }
.alert-row-data { display: grid; grid-template-columns: 1.2fr 1.25fr .75fr; gap: 7px; font-size: 11px; }
.alert-row-data > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-row-data small { display: block; margin-bottom: 2px; color: #687783; font-size: 10px; }
.mob-alert-icon { object-fit: contain; z-index: 10000 !important; }
.alert-modal { position: fixed; z-index: 4000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(7,18,28,.62); }
.alert-dialog { width: min(600px, 100%); max-height: min(92vh, 850px); overflow-y: auto; border: 1px solid #c9d2d9; border-radius: 12px; background: #fff; color: #172b3a; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.alert-dialog-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; background: #fff; border-bottom: 1px solid #e1e6e9; }
.alert-dialog-header h2 { margin-top: 3px; font-size: 19px; }
.alert-type-badge { color: #b71c1c; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.alert-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #edf1f3; color: #263746; font-size: 26px; cursor: pointer; }
.alert-detail-summary, .alert-messages-section { padding: 12px 16px; border-bottom: 1px solid #e7ebee; }
.alert-detail-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; font-size: 12px; }
.alert-detail-summary a { color: #075ed1; font-weight: 700; text-decoration: underline; }
.alert-dialog h3 { margin-bottom: 8px; font-size: 14px; }
.alert-events { max-height: 220px; overflow-y: auto; padding: 2px; }
.alert-event { margin-bottom: 6px; padding: 7px 9px; border-left: 3px solid #73899a; border-radius: 5px; background: #f2f5f7; color: #3d5261; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.alert-event time { color: #687783; font-size: 11px; white-space: nowrap; }
.alert-loading, .alert-inline-error { padding: 10px 4px; color: #687783; font-size: 12px; }
.alert-inline-error { color: #b42318; }
.alert-secondary-button { margin-top: 7px; border: 1px solid #b7c2ca; border-radius: 6px; padding: 7px 10px; background: #fff; color: #244154; cursor: pointer; }
.alert-secondary-button[hidden] { display: none; }
.alert-secondary-button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 600px) {
    .alert-launcher { top: 132px; left: 10px; right: auto; width: 64px; height: 64px; }
    .alert-sos-icon { width: 60px; height: 60px; border-radius: 13px; font-size: 23px; }
    .alert-launcher-count { min-width: 27px; height: 27px; font-size: 13px; }
    .alert-panel { top: 132px; left: 8px; right: auto; width: min(360px, calc(100vw - 16px)); max-height: 34vh; }
    .alert-list { max-height: calc(34vh - 45px); }
    .alert-detail-summary { grid-template-columns: 1fr 1fr; font-size: 11px; }
    .alert-dialog-header h2 { font-size: 17px; }
}
.alert-row-type { display: inline-flex; align-items: center; gap: 6px; }
.alert-row-type img { width: 23px; height: 17px; object-fit: contain; }