#map {
      height: 100%;
      width: 100%; 
}  
.login-registro {
   display: none; /* Ocultar formularios por defecto */
}

.emergency-stat-card .card-body {
   display: grid;
   gap: 6px;
}

.emergency-stat-card i {
   color: #673ab7;
   font-size: 24px;
}

.emergency-stat-card span,
.community-card small {
   color: #64748b;
}

.emergency-stat-card strong {
   color: #111827;
   font-size: 28px;
   line-height: 1;
}

.community-card,
.info-card {
   border: 1px solid #edf0f5;
   box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.map-popup-actions {
   display: flex;
   gap: 6px;
   align-items: stretch;
}

.map-popup-actions form {
   margin: 0;
}

.map-popup-actions .map-popup-action {
   border: 0;
   display: inline-flex;
   height: 100%;
   cursor: pointer;
}

.pc-sidebar .pc-micon.sidebar-emoji {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   line-height: 1;
}

.community-location-actions {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.community-location-actions .btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.community-location-status {
   margin-top: 8px;
   color: #64748b;
   font-size: 12px;
   line-height: 1.35;
}

.community-location-status.success {
   color: #15803d;
}

.community-location-status.warning {
   color: #b42318;
}
.login-registro.active {
   display: block; /* Mostrar solo el formulario activo */
}

/* Fuerza los márgenes en los formularios */
#form1, #form2 {
   margin-top: 20px !important;
   margin-bottom: 20px !important;
}

.auth-switch-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   justify-self: center;
   width: fit-content;
   min-height: 34px;
   margin: 12px auto 0;
   padding: 6px 12px;
   color: var(--safe-primary);
   background: transparent;
   border: 0;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 800;
}

.auth-switch-link:hover,
.auth-switch-link:focus {
   color: var(--safe-primary-strong);
   background: rgba(103, 58, 183, .08);
}

.map-legend {
   background-color: #f8f9fa;
   padding: 15px;
   border-top: 1px solid #ddd;
   border-radius: 5px;
}
.map-legend h5 {
   font-size: 16px;
   color: #333;
   margin-bottom: 10px;
}
.map-legend img {
   display: inline-block;
   vertical-align: middle;
}
.map-legend span {
   font-size: 14px;
   color: #555;
}
.map-legend .d-flex {
   flex-wrap: wrap; /* Por si el espacio es pequeño */
}
.map-legend .d-flex > div {
   margin: 0 10px; /* Espaciado entre elementos */
}


.maintenance-block {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%
}

.error-card {
   box-shadow: none;
   text-align: center
}

.error-card .error-image-block {
   position: relative;
   text-align: center;
   display: inline-flex
}

.error-card .error-image-block .img-404 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%
}

.error-card .error-image-block .img-404.error-text {
   animation: 3s ease-in-out 0s infinite normal none running bounce
}

.error-card .error-image-block .img-404.error-primary {
   animation: 15s ease-in-out 0s infinite normal none running wings
}

.error-card .error-image-block .img-404.error-secondary {
   animation: 12s ease-in-out 0s infinite normal none running wings
}

:root {
   --safe-bg: #f5f7fb;
   --safe-surface: #ffffff;
   --safe-text: #172033;
   --safe-muted: #667085;
   --safe-primary: #673ab7;
   --safe-primary-strong: #512da8;
   --safe-accent: #7e57c2;
   --safe-warning: #f59e0b;
   --safe-border: #e5e9f2;
   --safe-shadow: 0 12px 32px rgba(16, 24, 40, .08);
}

html {
   scroll-behavior: smooth;
}

body {
   background: var(--safe-bg);
   color: var(--safe-text);
}

a {
   text-decoration: none;
}

.pc-sidebar {
   border-right: 1px solid var(--safe-border);
   box-shadow: 8px 0 24px rgba(16, 24, 40, .04);
}

.m-header {
   min-height: 82px;
   padding: 14px 18px;
   gap: 12px;
}

.app-logo {
   width: 74px;
   height: 74px;
   object-fit: contain;
   background: #fff;
   border-radius: 8px;
}

.app-brand-title {
   margin: 0 0 0 -2px;
   font-size: 20px;
   font-weight: 800;
   color: var(--safe-text);
   line-height: 1.1;
}

.pc-navbar .pc-caption label {
   color: var(--safe-muted);
   font-size: 11px;
   letter-spacing: 0;
   text-transform: uppercase;
}

.pc-navbar .pc-link {
   border-radius: 8px;
   margin: 3px 12px;
   transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.pc-navbar .pc-link:hover,
.pc-navbar .pc-item.active > .pc-link {
   background: rgba(103, 58, 183, .1);
   color: var(--safe-primary);
}

.pc-navbar .pc-link:hover {
   transform: translateX(2px);
}

.pc-header {
   background: rgba(255, 255, 255, .92);
   border-bottom: 1px solid var(--safe-border);
   backdrop-filter: blur(10px);
}

.pc-header .header-wrapper {
   min-height: 70px;
   padding-inline: clamp(14px, 2vw, 28px);
}

.pc-head-link {
   border-radius: 8px;
}

.pc-header .header-user-profile .pc-head-link {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   width: auto;
   min-width: 150px;
   max-width: min(260px, 34vw);
   height: auto;
   min-height: 44px;
   padding: 7px 12px;
}

.pc-header .header-user-profile .user-avtar {
   flex: 0 0 auto;
}

.app-user-summary {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   min-width: 0;
   margin-left: 10px;
   line-height: 1.15;
}

.app-user-summary strong {
   max-width: 190px;
   overflow: hidden;
   color: var(--safe-text);
   font-size: 13px;
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.app-user-summary small {
   color: var(--safe-muted);
   font-size: 12px;
}

.app-header-actions {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 0;
}

.view-mode-toggle {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 36px;
   white-space: nowrap;
}

.pc-container .pc-content {
   padding: clamp(18px, 2.2vw, 32px);
}

.page-header {
   margin-bottom: 22px;
}

.page-header-title h5 {
   margin-bottom: 4px;
   color: var(--safe-text);
   font-size: clamp(21px, 2vw, 28px);
   font-weight: 800;
   text-transform: none;
}

.breadcrumb {
   gap: 4px;
   margin-bottom: 0;
   color: var(--safe-muted);
}

.card {
   overflow: hidden;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: var(--safe-shadow);
}

.card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 58px;
   padding: 16px 18px;
   background: var(--safe-surface);
   border-bottom: 1px solid var(--safe-border);
}

.card-header h5 {
   margin: 0;
   color: var(--safe-text);
   font-size: 16px;
   font-weight: 800;
}

.card-body {
   padding: clamp(16px, 2vw, 24px);
}

.form-label {
   color: #344054;
   font-weight: 700;
}

.form-control,
.form-select {
   min-height: 44px;
   border-color: #d0d5dd;
   border-radius: 8px;
   color: var(--safe-text);
}

.form-control:focus,
.form-select:focus {
   border-color: var(--safe-primary);
   box-shadow: 0 0 0 4px rgba(103, 58, 183, .12);
}

.btn {
   border-radius: 8px;
   font-weight: 700;
}

.btn-primary,
.btn-secondary {
   border-color: var(--safe-primary);
   background: var(--safe-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
   border-color: var(--safe-primary-strong);
   background: var(--safe-primary-strong);
}

.badge {
   padding: 7px 10px;
   font-weight: 700;
}

#map,
#mapa {
   width: 100%;
   min-height: 460px;
   border-radius: 8px;
   background: #dbe5ee;
}

#mapa[style] {
   height: min(62vh, 620px) !important;
}

.leaflet-container {
   font: inherit;
}

.map-legend {
   border: 1px solid var(--safe-border);
   box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
}

.map-legend .d-flex {
   gap: 12px;
   justify-content: center !important;
}

.map-legend .d-flex > div {
   margin: 0;
   padding: 8px 10px;
   background: #fff;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
}

.auth-main {
   min-height: 100vh;
   background:
      radial-gradient(circle at 12% 10%, rgba(103, 58, 183, .16), transparent 28%),
      linear-gradient(135deg, #f7fbff 0%, #edf4f7 46%, #f9fafb 100%);
}

.auth-wrapper {
   min-height: 100vh;
}

.auth-form {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: min(100%, 470px);
   padding: clamp(18px, 3vw, 34px);
}

.auth-form .card {
   margin-block: 0 !important;
}

.auth-form .card-body {
   padding: clamp(22px, 3vw, 34px);
}

.auth-header h2 {
   color: var(--safe-primary) !important;
   font-size: clamp(28px, 4vw, 38px);
}

.rand-logo {
   width: min(220px, 78vw);
   max-height: 150px;
   object-fit: contain;
}

.btn-group {
   width: 100%;
   padding: 4px;
   background: #eef2f6;
   border-radius: 8px;
}

.btn-group .btn {
   border-radius: 6px !important;
}

.field-feedback {
   display: none;
   align-items: flex-start;
   gap: 8px;
   margin-top: 7px;
   padding: 9px 10px;
   color: #8a1f11;
   background: #fff5f3;
   border: 1px solid #fecdca;
   border-radius: 8px;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.35;
}

.field-feedback.is-visible {
   display: flex;
}

.field-feedback i {
   flex: 0 0 auto;
   margin-top: 1px;
   font-size: 16px;
}

.phone-input-group {
   display: grid;
   grid-template-columns: minmax(132px, 38%) 1fr;
   gap: 8px;
}

.phone-input-group .form-select,
.phone-input-group .form-control {
   min-height: 44px;
}

.phone-prefix-lock {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 10px 12px;
   color: var(--safe-text);
   background: #f8fafc;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   font-size: 13px;
   font-weight: 800;
}

.form-control.is-invalid,
.form-select.is-invalid {
   border-color: #f04438;
   box-shadow: 0 0 0 4px rgba(240, 68, 56, .1);
}

.form-control.is-valid,
.form-select.is-valid {
   border-color: #12b76a;
}

.map-container {
   flex: 1 1 auto;
   min-width: 0;
}

.map-container #map {
   min-height: 100vh;
   border-radius: 0;
}

.auth-map-container {
   display: flex;
   align-items: center;
   padding: clamp(18px, 3vw, 34px) clamp(18px, 4vw, 44px) clamp(18px, 3vw, 34px) 0;
}

.auth-map-card {
   overflow: hidden;
   width: 100%;
   height: min(74vh, 760px);
   min-height: 560px;
   background: #dbe5ee;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: var(--safe-shadow);
}

.auth-map-card #map,
#map.auth-map {
   width: 100%;
   height: 100%;
   min-height: 0;
   border-radius: 0;
}

.table {
   margin-bottom: 0;
   vertical-align: middle;
}

.table thead th {
   color: #475467;
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   white-space: nowrap;
}

.table tbody td {
   color: var(--safe-text);
}

.table-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
}

.table-actions form {
   margin: 0;
}

.btn-danger {
   border-color: #dc2626;
   background: #dc2626;
}

.btn-danger:hover,
.btn-danger:focus {
   border-color: #b91c1c;
   background: #b91c1c;
}

.dataTables_wrapper {
   width: 100%;
}

.dataTables_wrapper .row,
.dataTables_wrapper .dt-buttons,
.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate {
   row-gap: 10px;
}

.dataTables_wrapper .dt-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 14px;
}

.dataTables_wrapper .btn {
   padding: 7px 11px;
   font-size: 12px;
}

.dataTables_filter input,
.dataTables_length select {
   min-height: 38px;
   border: 1px solid #d0d5dd;
   border-radius: 8px;
}

.table-responsive,
.dataTables_scroll {
   overflow-x: auto;
}

.dropdown-menu {
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: var(--safe-shadow);
}

.dropdown-header h2 {
   color: var(--safe-text);
   font-size: 18px;
   font-weight: 800;
}

.map-help-note {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 14px;
   padding: 12px 14px;
   color: #344054;
   background: #f0f7f5;
   border: 1px solid rgba(103, 58, 183, .18);
   border-radius: 8px;
   font-size: 13px;
   line-height: 1.4;
}

.map-help-note i {
   color: var(--safe-primary);
   font-size: 18px;
}

.report-flow-hint {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-bottom: 18px;
}

.report-flow-hint div {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   min-height: 38px;
   color: #475467;
   background: #f8fafc;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   font-size: 12px;
   font-weight: 800;
}

.report-flow-hint span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   color: #fff;
   background: var(--safe-primary);
   border-radius: 50%;
   font-size: 11px;
}

.location-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 14px;
   padding: 10px 12px;
   background: #fff;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
}

.location-toolbar span {
   color: var(--safe-muted);
   font-size: 13px;
   line-height: 1.35;
}

.location-toolbar span.is-ready {
   color: var(--safe-primary);
   font-weight: 800;
}

.report-map-frame {
   position: relative;
}

.report-map-escape {
   display: none;
}

.address-search {
   position: relative;
   margin-bottom: 14px;
}

.address-search-box {
   position: relative;
}

.address-search-box i {
   position: absolute;
   top: 50%;
   left: 13px;
   color: var(--safe-muted);
   transform: translateY(-50%);
   pointer-events: none;
   z-index: 1;
}

.address-search-box .form-control {
   padding-left: 40px;
}

.address-results {
   position: absolute;
   top: calc(100% - 18px);
   left: 0;
   right: 0;
   z-index: 1050;
   overflow: hidden;
   max-height: 260px;
   overflow-y: auto;
   background: #fff;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: 0 18px 35px rgba(16, 24, 40, .16);
}

.address-result-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   width: 100%;
   padding: 12px 14px;
   color: var(--safe-text);
   background: #fff;
   border: 0;
   border-bottom: 1px solid var(--safe-border);
   font-size: 13px;
   line-height: 1.35;
   text-align: left;
}

.address-result-item:last-child {
   border-bottom: 0;
}

.address-result-item:hover,
.address-result-item:focus {
   color: var(--safe-primary);
   background: rgba(103, 58, 183, .08);
   outline: 0;
}

.address-result-item i {
   margin-top: 2px;
   color: var(--safe-primary);
}

.address-result-empty {
   padding: 12px 14px;
   color: var(--safe-muted);
   font-size: 13px;
   line-height: 1.35;
}

.app-map-card-header {
   gap: 12px;
   flex-wrap: wrap;
}

.app-map-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.app-map-body {
   position: relative;
   padding: 0;
}

.app-page-hero {
   padding: 18px;
   background: linear-gradient(135deg, rgba(103, 58, 183, .1), rgba(126, 87, 194, .08));
   border: 1px solid var(--safe-border);
   border-radius: 8px;
}

.app-hero-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   flex-wrap: wrap;
}

.app-map-shell {
   position: relative;
   overflow: hidden;
   min-height: 720px;
   background: #dbe5ee;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: var(--safe-shadow);
}

#map.app-full-map {
   width: 100%;
   min-height: 720px;
   border-radius: 0;
}

.app-map-toolbar {
   position: absolute;
   z-index: 430;
   top: 16px;
   left: 16px;
   max-width: calc(100% - 230px);
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.app-map-tool {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 40px;
   padding: 8px 12px;
   color: var(--safe-text);
   background: rgba(255, 255, 255, .94);
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
   font-size: 13px;
   font-weight: 800;
}

.app-map-tool.active {
   color: #fff;
   background: var(--safe-primary);
   border-color: var(--safe-primary);
}

.app-map-create-report {
   position: absolute;
   z-index: 435;
   top: 16px;
   right: 16px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 42px;
   padding: 9px 14px;
   color: #fff;
   background: var(--safe-primary);
   border-radius: 8px;
   box-shadow: 0 12px 28px rgba(103, 58, 183, .24);
   font-size: 13px;
   font-weight: 800;
}

.app-map-create-report:hover,
.app-map-create-report:focus {
   color: #fff;
   background: var(--safe-primary-strong);
}

.app-map-floating {
   position: absolute;
   z-index: 425;
   top: 70px;
   left: 16px;
   width: min(560px, calc(100% - 32px));
   padding: 12px;
   background: rgba(255, 255, 255, .94);
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: var(--safe-shadow);
   backdrop-filter: blur(10px);
}

.floating-title {
   margin-bottom: 10px;
}

.floating-title strong {
   display: block;
   color: var(--safe-text);
}

.floating-title small {
   color: var(--safe-muted);
}

.filter-chip-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.map-filter-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 11px;
   color: var(--safe-text);
   background: #fff;
   border: 1px solid #d0d5dd;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 800;
}

.map-filter-chip span {
   min-width: 24px;
   padding: 2px 7px;
   color: var(--safe-muted);
   background: #eef2f6;
   border-radius: 999px;
   text-align: center;
}

.map-filter-chip.active {
   color: #fff;
   background: var(--safe-primary);
   border-color: var(--safe-primary);
}

.map-filter-chip.active span {
   color: var(--safe-primary);
   background: #fff;
}

.app-map-legend-panel {
   display: flex;
   flex-direction: column;
   max-width: 430px;
   gap: 10px;
}

.app-map-help-panel {
   max-width: 430px;
}

.map-help-actions {
   display: grid;
   gap: 8px;
}

.map-help-actions a,
.map-help-actions button {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   min-height: 42px;
   padding: 10px 12px;
   color: var(--safe-text);
   background: #fff;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   font-size: 13px;
   font-weight: 800;
   text-align: left;
}

.map-help-actions a:hover,
.map-help-actions button:hover,
.map-help-actions a:focus,
.map-help-actions button:focus {
   color: var(--safe-primary);
   border-color: rgba(103, 58, 183, .35);
   background: #f7f2ff;
}

.map-help-actions i {
   color: var(--safe-primary);
   font-size: 18px;
}

.legend-item {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 2px 10px;
   align-items: center;
}

.legend-item small {
   grid-column: 2;
   color: var(--safe-muted);
}

.legend-emoji,
.legend-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   background: #fff;
   border: 1px solid var(--safe-border);
   border-radius: 999px;
   box-shadow: 0 8px 16px rgba(16, 24, 40, .08);
   font-size: 17px;
   color: var(--safe-primary);
}

.legend-icon i {
   font-size: 17px;
}

.legend-dot {
   width: 13px;
   height: 13px;
   border-radius: 50%;
   box-shadow: 0 0 0 4px rgba(16, 24, 40, .06);
}

.legend-pending {
   background: #dc2626;
}

.legend-progress {
   background: #2563eb;
}

.legend-resolved {
   background: #16a34a;
}

.legend-center {
   background: var(--safe-primary);
}

.legend-user {
   background: #0ea5e9;
}

.app-map-summary {
   position: absolute;
   z-index: 420;
   left: 16px;
   bottom: 16px;
   display: grid;
   grid-template-columns: auto auto auto;
   align-items: center;
   gap: 8px 12px;
   max-width: min(430px, calc(100% - 120px));
   padding: 9px 12px;
   background: rgba(255, 255, 255, .94);
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: var(--safe-shadow);
   backdrop-filter: blur(10px);
}

.app-map-summary strong {
   color: var(--safe-text);
   font-size: 13px;
   white-space: nowrap;
}

.app-map-summary span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: var(--safe-muted);
   font-size: 12px;
   white-space: nowrap;
}

.app-map-summary i {
   color: var(--safe-primary);
   font-size: 15px;
}

.app-map-summary b {
   color: var(--safe-primary);
}

.app-map-status {
   position: absolute;
   z-index: 430;
   right: 16px;
   top: 16px;
   display: flex;
   align-items: flex-start;
   gap: 10px;
   max-width: min(360px, calc(100% - 32px));
   padding: 10px 12px;
   color: #344054;
   background: rgba(255, 255, 255, .96);
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: var(--safe-shadow);
   font-size: 13px;
   font-weight: 700;
}

.app-map-status span {
   flex: 1 1 auto;
}

.app-map-status-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   flex: 0 0 auto;
   color: currentColor;
   background: rgba(255, 255, 255, .55);
   border: 1px solid currentColor;
   border-radius: 8px;
   opacity: .8;
}

.app-map-status-close:hover,
.app-map-status-close:focus {
   opacity: 1;
}

.app-map-status.success {
   color: #512da8;
   background: #f3eefc;
   border-color: #d8c7f3;
}

.app-map-status.warning {
   color: #92400e;
   background: #fffbeb;
   border-color: #fedf89;
}

.app-map-scroll-grip,
.mobile-map-toggle {
   display: none !important;
   visibility: hidden !important;
   pointer-events: none !important;
   opacity: 0 !important;
   width: 0 !important;
   height: 0 !important;
   overflow: hidden !important;
}

.app-map-shell .leaflet-container {
   touch-action: none;
}

.emoji-map-marker {
   width: 42px !important;
   height: 42px !important;
   margin: 0 !important;
   background: transparent;
}

.emoji-map-marker span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   background: rgba(255, 255, 255, .96);
   border: 3px solid #fff;
   border-radius: 999px;
   box-shadow: 0 12px 26px rgba(16, 24, 40, .24);
   color: var(--safe-primary);
   font-size: 22px;
   line-height: 1;
   transform-origin: center;
   animation: marker-pop .28s ease-out both;
}

.emoji-map-marker-pending span {
   color: #dc2626;
   box-shadow: 0 0 0 4px rgba(220, 38, 38, .16), 0 12px 26px rgba(16, 24, 40, .24);
}

.emoji-map-marker-progress span {
   color: #2563eb;
   box-shadow: 0 0 0 4px rgba(37, 99, 235, .16), 0 12px 26px rgba(16, 24, 40, .24);
}

.emoji-map-marker-resolved span {
   color: #16a34a;
   box-shadow: 0 0 0 4px rgba(22, 163, 74, .16), 0 12px 26px rgba(16, 24, 40, .24);
}

.emoji-map-marker-center span {
   color: #0f766e;
   box-shadow: 0 0 0 4px rgba(20, 184, 166, .18), 0 12px 26px rgba(16, 24, 40, .24);
}

.emoji-map-marker-safe span {
   color: #0369a1;
   box-shadow: 0 0 0 4px rgba(14, 165, 233, .18), 0 12px 26px rgba(16, 24, 40, .24);
}

.emoji-map-marker-help span {
   color: #dc2626;
   box-shadow: 0 0 0 4px rgba(239, 68, 68, .2), 0 12px 26px rgba(16, 24, 40, .24);
}

.emoji-map-marker-volunteer span {
   color: #15803d;
   box-shadow: 0 0 0 4px rgba(22, 163, 74, .18), 0 12px 26px rgba(16, 24, 40, .24);
}

.emoji-map-marker-user span {
   color: #0284c7;
   box-shadow: 0 0 0 8px rgba(14, 165, 233, .2), 0 12px 26px rgba(16, 24, 40, .24);
   animation: marker-pop .28s ease-out both, user-pulse 1.8s ease-in-out infinite;
}

@keyframes marker-pop {
   from {
      opacity: 0;
      transform: scale(.72);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes user-pulse {
   0%,
   100% {
      box-shadow: 0 0 0 8px rgba(14, 165, 233, .18), 0 12px 26px rgba(16, 24, 40, .24);
   }

   50% {
      box-shadow: 0 0 0 13px rgba(14, 165, 233, .07), 0 12px 26px rgba(16, 24, 40, .24);
   }
}

.map-popup {
   display: grid;
   gap: 7px;
   min-width: 190px;
   max-width: 230px;
   padding: 0;
}

.map-popup-head {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 8px;
   align-items: center;
}

.map-popup-emoji {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   background: #f8fafc;
   border: 1px solid var(--safe-border);
   border-radius: 999px;
   font-size: 17px;
   color: var(--safe-primary);
}

.legend-icon i {
   font-size: 17px;
}

.map-popup strong {
   display: block;
   margin-bottom: 2px;
   color: var(--safe-text);
   font-size: 12px;
   line-height: 1.2;
}

.map-popup-grid {
   display: grid;
   gap: 4px;
}

.map-popup small {
   display: grid;
   gap: 1px;
   color: #475467;
   font-size: 11px;
   line-height: 1.2;
}

.map-popup small b {
   color: #667085;
   font-size: 9px;
   text-transform: uppercase;
}

.map-popup-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 28px;
   padding: 6px 8px;
   color: #fff;
   background: var(--safe-primary);
   border-radius: 8px;
   font-size: 11px;
   font-weight: 800;
}

.map-popup-action:hover,
.map-popup-action:focus {
   color: #fff;
   background: var(--safe-primary-strong);
}

.popup-status {
   justify-self: start;
   padding: 3px 7px;
   color: #fff;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 800;
}

.popup-status.status-1 {
   background: #dc2626;
}

.popup-status.status-2 {
   background: #2563eb;
}

.popup-status.status-3 {
   background: #16a34a;
}

.popup-status.status-center {
   background: var(--safe-primary);
}

.supply-center-list {
   display: grid;
   gap: 12px;
}

.supply-center-overview {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 14px;
   padding: 12px;
   background: #f8fafc;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
}

.supply-center-overview h5 {
   margin: 0 0 4px;
   color: var(--safe-text);
   font-size: 20px;
}

.supply-center-overview p {
   margin: 0;
   color: #475467;
   font-size: 14px;
   line-height: 1.35;
}

.supply-center-search {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
   padding: 0 12px;
   min-height: 46px;
   background: #fff;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: 0 8px 18px rgba(16, 24, 40, .05);
}

.supply-center-search i {
   color: var(--safe-primary);
   font-size: 18px;
}

.supply-center-search input {
   width: 100%;
   min-width: 0;
   border: 0;
   outline: 0;
   color: var(--safe-text);
   background: transparent;
   font-weight: 700;
}

.supply-center-search input::placeholder {
   color: #98a2b3;
   font-weight: 600;
}

.supply-center-card {
   display: grid;
   gap: 10px;
   padding: 16px;
   background: linear-gradient(180deg, #fff, #f9fafb);
   border: 1px solid var(--safe-border);
   border-radius: 8px;
   box-shadow: 0 10px 24px rgba(16, 24, 40, .06);
}

.supply-center-card-head {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.supply-center-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   flex: 0 0 auto;
   color: #fff;
   background: var(--safe-primary);
   border-radius: 8px;
   box-shadow: 0 10px 18px rgba(103, 58, 183, .18);
}

.supply-center-kicker {
   display: inline-flex;
   margin-bottom: 4px;
   color: var(--safe-primary);
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
}

.supply-center-card h6 {
   margin: 0;
   color: var(--safe-text);
   font-size: 16px;
   line-height: 1.25;
}

.supply-center-card p {
   margin: 0;
   color: #475467;
   line-height: 1.45;
}

.supply-center-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.supply-center-meta span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
   padding: 7px 9px;
   color: #344054;
   background: #f8fafc;
   border: 1px solid #e4e7ec;
   border-radius: 8px;
   font-size: 12px;
   font-weight: 700;
}

.supply-center-meta .supply-center-contact,
.supply-center-meta .supply-center-location {
   width: 100%;
   justify-content: flex-start;
   overflow-wrap: anywhere;
   word-break: normal;
   line-height: 1.35;
}

.supply-center-meta .supply-center-contact a,
.supply-center-meta .supply-center-contact a[x-apple-data-detectors],
.supply-center-meta .supply-center-location a,
.supply-center-meta .supply-center-location a[x-apple-data-detectors] {
   color: inherit !important;
   text-decoration: none !important;
   font: inherit !important;
}

.supply-center-meta i {
   flex: 0 0 auto;
}

.supply-center-empty {
   display: grid;
   place-items: center;
   gap: 6px;
   padding: 24px;
   color: #475467;
   background: #fff;
   border: 1px dashed #cbd5e1;
   border-radius: 8px;
   text-align: center;
}

.supply-center-empty i {
   color: var(--safe-primary);
   font-size: 24px;
}

.supply-center-empty strong {
   color: var(--safe-text);
}

@media (max-width: 767.98px) {
   .pc-header .header-wrapper {
      min-height: 62px;
   }

   .pc-container .pc-content {
      padding: 16px;
   }

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

   .app-page-hero {
      display: none;
   }

   .card-header,
   .card-body {
      padding: 15px;
   }

   .app-user-summary {
      display: none;
   }

   .pc-header .header-user-profile .pc-head-link {
      min-width: 44px;
      max-width: 44px;
      width: 44px;
      min-height: 44px;
      padding: 0;
      justify-content: center;
   }

   .auth-wrapper {
      display: block !important;
   }

   .auth-form {
      width: 100%;
      min-height: auto;
      padding: 16px;
   }

   .auth-form .card {
      margin-top: 10px !important;
   }

   .auth-form h5 {
      font-size: 14px;
      line-height: 1.35;
      text-align: center;
   }

   .map-container {
      min-height: 420px;
   }

   .map-container #map {
      min-height: 420px;
   }

   .auth-map-container {
      min-height: auto;
      padding: 0 16px 22px;
   }

   .auth-map-card {
      height: min(38vh, 300px);
      min-height: 230px;
      border-radius: 8px;
   }

   .auth-map-card #map,
   #map.auth-map {
      height: 100% !important;
      min-height: 0 !important;
   }

   #map:not(.auth-map),
   #mapa,
   #mapa[style] {
      min-height: 360px;
      height: 58vh !important;
   }

   .map-legend {
      margin-top: 14px !important;
   }

   .map-legend h5 {
      text-align: left !important;
   }

   .map-legend .d-flex {
      justify-content: flex-start !important;
   }

   .map-legend .d-flex > div {
      flex: 1 1 190px;
   }

   .dataTables_wrapper .dt-buttons,
   .dataTables_filter,
   .dataTables_length,
   .dataTables_info,
   .dataTables_paginate {
      float: none !important;
      width: 100%;
      text-align: left !important;
   }

   .dataTables_filter label,
   .dataTables_length label {
      width: 100%;
   }

   .dataTables_filter input,
   .dataTables_length select {
      width: 100% !important;
      margin: 6px 0 0 !important;
   }

   .app-hero-actions {
      justify-content: stretch;
   }

   .app-hero-actions .btn {
      flex: 1 1 180px;
   }

   .location-toolbar {
      align-items: stretch;
      flex-direction: column;
   }

   .report-map-frame {
      margin: 16px 10px 18px;
      padding: 10px;
      background: #f8fafc;
      border: 1px solid var(--safe-border);
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
   }

   .report-map-frame #mapa,
   .report-map-frame #mapa[style] {
      height: min(52vh, 430px) !important;
      min-height: 340px;
      border-radius: 8px;
      border: 1px solid #d0d5dd;
   }

   .report-map-escape {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 34px;
      margin-top: 8px;
      padding: 7px 8px;
      color: #475467;
      background: #fff;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.2;
      text-align: center;
      touch-action: pan-y;
   }

   .report-map-escape span {
      width: 30px;
      height: 4px;
      flex: 0 0 auto;
      background: #98a2b3;
      border-radius: 999px;
   }

   .phone-input-group {
      grid-template-columns: 1fr;
   }

   .app-map-shell {
      min-height: 0;
      border-radius: 8px;
   }

   #map.app-full-map {
      min-height: min(520px, 68vh);
   }

   .app-map-toolbar {
      top: 12px;
      left: 12px;
      right: auto;
      max-width: none;
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
   }

   .app-map-tool {
      justify-content: center;
      flex: 0 0 40px;
      width: 40px;
      min-width: 40px;
      min-height: 40px;
      padding: 0;
      font-size: 0;
      border-radius: 7px;
   }

   .app-map-tool i {
      font-size: 18px;
   }

   .app-map-tool span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
   }

   .app-map-floating {
      top: 62px;
      left: 12px;
      width: calc(100% - 24px);
      max-height: calc(100% - 150px);
      overflow-y: auto;
      padding: 10px;
   }

   .app-map-floating .floating-title {
      display: none;
   }

   .app-map-create-report {
      top: 12px;
      left: auto;
      right: 12px;
      justify-content: center;
      min-height: 40px;
      padding: 8px 12px;
      font-size: 12px;
   }

   .app-map-status {
      top: auto;
      right: 12px;
      left: 12px;
      bottom: 82px;
      max-width: none;
   }

   .app-map-summary {
      right: 76px;
      left: 12px;
      bottom: 12px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 3px;
      max-width: none;
      width: auto;
      padding: 10px;
      font-size: 12px;
      line-height: 1.25;
   }

   .app-map-summary strong {
      font-size: 13px;
   }

   .app-map-summary span {
      white-space: nowrap;
   }

   .emoji-map-marker,
   .emoji-map-marker span {
      width: 36px !important;
      height: 36px !important;
   }

   .emoji-map-marker span {
      font-size: 19px;
   }

   .map-popup {
      min-width: 185px;
      max-width: 220px;
   }

   .filter-chip-grid {
      gap: 7px;
   }

   .map-filter-chip {
      flex: 1 1 140px;
      justify-content: space-between;
      min-height: 42px;
      padding: 8px 10px;
   }

   .supply-center-card {
      padding: 14px;
   }

   .supply-center-overview {
      align-items: center;
      flex-direction: row;
      padding: 10px;
   }

   .supply-center-overview .btn {
      flex: 0 0 auto;
      justify-content: center;
      width: auto;
   }

   .supply-center-overview h5 {
      font-size: 18px;
   }

   .supply-center-meta {
      display: grid;
   }

   .supply-center-meta span {
      width: 100%;
   }
}

@media (max-width: 575.98px) {
   .page-header-title h5 {
      font-size: 22px;
   }

   .breadcrumb {
      font-size: 12px;
   }

   .btn-group {
      display: grid;
      grid-template-columns: 1fr;
   }

   .btn-group .btn {
      width: 100%;
   }

   .table thead th,
   .table tbody td {
      white-space: nowrap;
   }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
   .auth-form {
      width: min(44vw, 460px);
   }

   .pc-container .row > [class*="col-md-4"],
   .pc-container .row > [class*="col-md-8"] {
      width: 100%;
   }

   #mapa[style] {
      height: 520px !important;
   }
}

.status-dot.pending { color: #dc2626; }


.auth-map-legend .auth-legend-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
}

.auth-map-legend .legend-item {
   display: grid;
   grid-template-columns: 34px 1fr;
   gap: 2px 10px;
   align-items: center;
   padding: 10px 12px;
   background: #fff;
   border: 1px solid var(--safe-border);
   border-radius: 8px;
}

.auth-map-legend .legend-item strong {
   color: var(--safe-text);
   font-size: 13px;
}

.auth-map-legend .legend-item small {
   grid-column: 2;
   color: var(--safe-muted);
   font-size: 11px;
   line-height: 1.35;
}