* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }

        html, body {
          height: 100%;
          width: 100%;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background: #0f4c2e;
          color: #fff;
          overflow: hidden;
        }

        /* Tela de loading inicial */
        .loading-screen {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          width: 100vw;
          background: linear-gradient(135deg, #0f4c2e 0%, #1a6040 50%, #0f4c2e 100%);
          z-index: 1000;
          position: fixed;
          top: 0;
          left: 0;
        }

        .loading-screen h1 {
          font-size: 3rem;
          margin-bottom: 20px;
          text-shadow: 0 0 20px #28a745;
          background: linear-gradient(45deg, #28a745, #20c997);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .loading-text {
          font-size: 1.2rem;
          margin-bottom: 30px;
          opacity: 0.9;
          color: #20c997;
        }

        .spinner {
          width: 50px;
          height: 50px;
          border: 4px solid #1a6040;
          border-top: 4px solid #28a745;
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin-bottom: 20px;
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        .status-text {
          font-size: 1rem;
          color: #28a745;
          text-align: center;
          margin-top: 20px;
        }

        /* Container principal */
        .main-container {
          display: none;
          height: 100vh;
          width: 100vw;
          position: relative;
        }

        /* Mapa ocupando toda a tela */
        #touristMap {
        height: 100vh !important;
        width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1 !important;
        }

        .leaflet-container {
          height: 100vh !important;
          width: 100vw !important;
          background: #0f4c2e !important;
        }

        /* Barra de informações no rodapé */
        .footer-info {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(15, 76, 46, 0.95);
          backdrop-filter: blur(10px);
          padding: 15px;
          text-align: center;
          border-top: 3px solid #28a745;
          z-index: 1000;
        }

        .footer-info .info-text {
          color: #28a745;
          font-size: 1.1rem;
          font-weight: 600;
        }

        .footer-info .stats-text {
          color: #fff;
          font-size: 0.9rem;
          margin-top: 5px;
          opacity: 0.9;
        }

        /* Controles do mapa */
        .map-controls {
          position: fixed;
          top: 20px;
          right: 20px;
          background: rgba(15, 76, 46, 0.9);
          backdrop-filter: blur(10px);
          border-radius: 10px;
          padding: 15px;
          z-index: 1001;
          border: 2px solid #28a745;
          width: 120px;
        }

        .control-btn {
          background: #28a745;
          color: #fff;
          border: none;
          padding: 10px 15px;
          margin: 5px 0;
          border-radius: 5px;
          cursor: pointer;
          font-size: 0.9rem;
          width: 100%;
          transition: all 0.3s ease;
        }

        .control-btn:hover {
          background: #20c997;
          transform: translateY(-1px);
        }

        .control-btn.active {
          background: #20c997;
          box-shadow: 0 0 10px #20c997;
        }

        /* Customização dos marcadores */
        .poi-marker {
          transition: all 0.3s ease;
          filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
        }

        .poi-marker:hover {
          transform: scale(1.1);
          filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
        }

        /* Popup customizado */
        .leaflet-popup-content-wrapper {
          background: rgba(15, 76, 46, 0.95) !important;
          color: #fff !important;
          border: 2px solid #28a745 !important;
          border-radius: 10px !important;
        }

        .leaflet-popup-content {
          margin: 15px !important;
          color: #fff !important;
          min-width: 280px !important;
        }

        .leaflet-popup-tip {
          background: rgba(15, 76, 46, 0.95) !important;
        }

        .popup-header {
          color: #28a745;
          font-size: 1.2rem;
          font-weight: bold;
          margin-bottom: 10px;
        }

        .popup-category {
          background: #28a745;
          color: white;
          padding: 2px 8px;
          border-radius: 10px;
          font-size: 0.8rem;
          display: inline-block;
          margin-bottom: 8px;
        }

        .popup-description {
          margin-bottom: 10px;
          line-height: 1.4;
        }

        .popup-address {
          font-size: 0.9em;
          opacity: 0.8;
          border-top: 1px solid #28a745;
          padding-top: 8px;
          margin-top: 8px;
        }

        /* Error screen */
        .error-screen {
          display: none;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: linear-gradient(135deg, #0f4c2e 0%, #1a6040 50%, #0f4c2e 100%);
          text-align: center;
          padding: 20px;
          z-index: 1000;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
        }

        .error-screen h2 {
          color: #dc3545;
          font-size: 2rem;
          margin-bottom: 20px;
        }

        .error-screen p {
          color: #fff;
          font-size: 1.1rem;
          margin-bottom: 30px;
        }

        .retry-btn {
          background: #28a745;
          color: #fff;
          border: none;
          padding: 15px 30px;
          font-size: 1rem;
          font-weight: 600;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .retry-btn:hover {
          background: #20c997;
          transform: translateY(-2px);
          box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        }

        /* Responsividade */
        @media (max-width: 768px) {
          .loading-screen h1 {
            font-size: 2rem;
          }

          .footer-info {
            padding: 10px;
          }

          .footer-info .info-text {
            font-size: 1rem;
          }

          .map-controls {
            top: 10px;
            right: 10px;
            padding: 10px;
          }

          .control-btn {
            font-size: 0.8rem;
            padding: 8px 12px;
          }
        }

        /* Legenda */
        .legend {
          position: fixed;
          bottom: 80px;
          left: 20px;
          background: rgba(15, 76, 46, 0.9);
          backdrop-filter: blur(10px);
          border-radius: 10px;
          padding: 15px;
          z-index: 1001;
          border: 2px solid #28a745;
          max-width: 250px;
        }

        .legend h4 {
          color: #28a745;
          margin-bottom: 10px;
          font-size: 1rem;
        }

        .legend-item {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          font-size: 0.9rem;
        }

        .legend-icon {
          margin-right: 10px;
          font-size: 1.2rem;
        }

        @media (max-width: 768px) {
          .legend {
            display: none;
          }
        }