* {
    box-sizing: border-box;                                      /* Asegura que width y height incluyan padding y borde */
    padding: 0;                                                  /* Elimina el padding por defecto general */
    margin: 0;                                                   /* Elimina el margen por defecto general */
}

html, body {
    font-family: Arial, Helvetica, sans-serif;                  /* Evita forzar la fuente en todos los elementos (*) como inputs, buttons o pseudo-elementos */
    background-size: cover;                                     /* La imagen ocupa todo el viewport sin deformarse */
    background:                                                 /* NOTA: ******* inicio_usuario.html no necesita imagen de fondo */
        linear-gradient(135deg, rgba(8, 48, 109, 0.6), rgba(1, 12, 29, 0.6)),       /* Overlay semitransparente para mejorar contraste */
        url('../img/fondologin.jpeg') no-repeat center center;                                 /* Imagen centrada y sin repetición */
}

:root {                                                     /* Variables globales de color */
    --deep-1: rgb(1, 12, 29); /* color oscuro base (ej: fondo muy oscuro) */
    --deep-2: rgb(8, 48, 109); /* azul profundo (ej: botones/gradientes) */
    --panel-bg: rgba(29, 53, 86, 0.85); /* fondo de tarjetas semitransparente (ej: paneles) */
    --panel-bg-soft: rgba(29, 53, 86, 0.75); /* variante más suave (ej: barra de búsqueda) */
    --text-light: rgba(255, 255, 255, 0.95);                 /* Color texto principal (ej: títulos blancos) */
    --text-muted: rgba(255, 255, 255, 0.75);                 /* Color texto secundario (ej: subtítulos grises) */
    --accent-grad: linear-gradient(135deg, rgb(8, 48, 109), rgb(3, 25, 57)); /* gradiente principal (ej: botones) */
    --accent-grad-hover: linear-gradient(135deg, rgb(3, 25, 57), rgb(8, 48, 109)); /* gradiente invertido (ej: hover) */
    --glass: rgba(255, 255, 255, 0.08); /* efecto vidrio translúcido (ej: iconos dentro del sidebar) */
    --sidebar-w: 260px; /* ancho fijo de la barra lateral (ej: 260px a la izquierda) */
}

/* ====================================================== */
/* ====================== (BODIES) ====================== */
/* ====================================================== */

.inicio-admin {
    min-height: 100vh; /* fuerza a ocupar toda la altura de la ventana (ej: pantalla completa) */
    color: var(--text-light); /* color de texto por defecto (ej: blanco) */
    display: flex; /* layout principal en fila (ej: sidebar + main) */
    align-items: stretch; /* estira columnas para la misma altura (ej: sidebar igual alto que main) */
    gap: 24px; /* espacio entre columnas (ej: separación sidebar-main) */
    padding: 24px; /* espacio interior en todo el body (ej: margen visual desde el borde) */
}

/* ====================================================== */
/* ===================== (LOGIN.html) =================== */
/* ====================================================== */

.login-container {
    display: flex;                                                  /* Flexbox para centrar de forma moderna */
    justify-content: center;                                        /* Centra horizontal con Flexbox*/
    align-items: center;                                            /* Centra vertical con Flexbox*/
    min-height: 100vh;                                              /* Ocupa toda la pantalla */
}

.login-form {                                                       /* Formulario de login de dentro del div */
    padding: 4.2rem 4rem 1.4rem 4rem;                               /* Espacio interno:  */
    width: 434px;                                                   /* Ancho fijo */
    max-width: 90%;                                                 /* Opcional para pantallas muy pequeñas */

    background: rgb(29, 53, 86, 0.8);                             /* Fondo azul oscuro con 80% opacidad */
    border-radius: 1px;                                             /* Bordes ligeramente redondeados (muy sutil) */
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);                   /* Sombra para dar profundidad */
}

.login-form h2 {
    text-align: center;                                             /* Centra el h2 horizontalmente */
    margin-bottom: 0.1rem;                                          /* Espacio debajo del h2 */
    font-size: 1.7rem;                                              /* Tamaño de fuente del h2 */

    color: white;                                                 /* Color del texto del h2 */
}

.login-form input[type="text"],                                     /* Selecciona input de tipo "text" dentro de .login-form */
.login-form input[type="email"],
.login-form input[type="password"] {                                /* Selecciona input de tipo "password" dentro de .login-form */
    font-size: 1rem;                                                /* Tamaño de letra dentro del input */
    width: 100%;                                                    /* El input ocupa todo el ancho del contenedor */
    padding: 4% 0% 4% 7%;                                           /* Damos espacios y separamos Email y Password del recuadro de la izquierda  */
    margin-bottom: 1.2rem;                                          /* Margen para debajo del input */

    border: none;                                                   /* Sin borde */
    border-radius: 5px;                                             /* Bordes redondeados para suavizar visualmente */
    background: rgba(255, 255, 255, 0.15);                        /* Fondo semitransparente (15% opacidad) */
    color: white;                                                 /* Color del texto escrito */
}

.login-form input::placeholder {                                    /* Selecciona el texto placeholder de los inputs */
    color: rgba(255, 255, 255, 0.7);                              /* Color base del placeholder (70% opaco) */
    transition: color 0.3s ease;                                    /* Transición suave de color cuando cambia (luego con hover o focus) */
}

.login-form input:hover::placeholder {                              /* Cuando el usuario pasa el cursor sobre el input */
    color: rgba(255, 255, 255, 1);                                /* Se pone blanco completo al pasar el cursor */
}

.login-form input:focus::placeholder {                              /* Cuando el input está activo/clickeado */
    color: rgba(255, 255, 255, 0.4);                              /* Se atenúa (cuando el usuario puede escribir) */
                                                                    /* El orden Sobrescribe hover si el cursor sigue encima */
}

.login-form button {
    width: 100%;                                                    /* Ocupa todo el ancho del contenedor */
    padding: 1rem;                                                  /* Espacio interno */

    border: none;                                                   /* Sin borde */
    border-radius: 6px;                                             /* Bordes redondeados */
    background: linear-gradient(135deg, rgb(8, 48, 109), rgb(3, 25, 57));  /* Gradiente azul del botón */
    color: white;                                                 /* Texto del botón */
    font-size: 1.2rem;                                              /* Tamaño de letra */
    cursor: pointer;                                                /* Cambia el cursor al pasar encima */
    transition: background 0.3s ease;                               /* Transición suave del fondo al hacer hover */
}

.login-form button:hover {
    /* Cambio de color gradiente al pasar el mouse */
    background: linear-gradient(135deg, rgb(8, 48, 109), rgb(1, 12, 27)); 
}

.login-form a {                                                     /* Selecciona los enlaces opcionales (Registrarse, olvidar contraseña...) */
    text-decoration: none;                                          /* Sin subrayado */
    display: block;                                                 /* Se comporta como bloque para centrar con text-align */
    text-align: center;                                             /* Centra el texto */
    margin-top: 0.8rem;                                             /* Separación hacia arriba del elemento anterior */
    font-size: 0.9rem;                                              /* Tamaño de fuente */

    color: rgba(255, 255, 255, 0.7);                              /* Color semitransparente */
}

.login-form a:hover {                                               /* Hover de los enlaces */
    color: white;                                                 /* Color blanco completo al pasar el mouse */
}

.login-form #Registrate {
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: 52px;
} 
.login-form .registrate {
    display: inline-flex;                                           /* Flex para centrar icono y texto */
    gap: 10px;                                                      /* Espacio entre icono y texto */
    align-items: center;                                            /* Centra verticalmente */
    justify-content: center;                                        /* Centra horizontalmente */
    padding: 8px 14px;                                              /* Espacio interno */
    margin: 0.6rem auto 1rem auto;                                  /* Centrado y espacio vertical */
    
    border-radius: 999px;                                           /* Borde muy redondeado */
    color: rgba(255,255,255,0.95);                                /* Texto casi blanco */
    font-weight: 600;                                               /* Texto seminegrita */
    text-decoration: none;                                          /* Sin subrayado */
    border: 1px solid rgba(255,255,255,0.06);                                               /* Borde muy suave */
    box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 -2px 6px rgba(0,0,0,0.12);           /* Sombra suave */
    transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s ease;           /* Animaciones */
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));  /* Fondo suave */
}

.login-form .registrate i {
    font-size: 0.95rem;                                             /* Tamaño del icono */
    color: rgba(255,255,255,0.9);                                 /* Color del icono */
}

.login-form .registrate:hover {
    transform: translateY(-3px);                                    /* Levanta el botón en hover */
    box-shadow: 0 14px 30px rgba(3,25,57,0.45);                   /* Sombra más fuerte */
    color: #fff;                                                  /* Texto blanco */
    background: linear-gradient(135deg, rgba(8,48,109,0.9), rgba(3,25,57,0.9)); /* Gradiente más oscuro */
}

.login-form .registrate:focus,
.login-form .registrate:focus-visible {
    outline: 3px solid rgba(8,48,109,0.35);                       /* Contorno accesible */
    outline-offset: 3px;                                            /* Separación del contorno */
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);                      /* Sombra al focus */
}

.login-form .registrate:active {
    transform: translateY(-1px) scale(0.995);                       /* Pulsación */
}

/* ====================================================== */
/* =================== (REGISTRO.html) ================== */
/* ====================================================== */

.checkbox-line {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.checkbox-line a { 
    display: inline; 
}

/* ====================================================== */
/* ================ (INICIO_ADMIN.html) ================= */
/* ====================================================== */

.app {                                                /* Contenedor principal: sidebar + content */
    display: flex;                                    /* Layout horizontal (sidebar izquierda, main derecha) */
    width: 100%;                                      /* Ocupa todo el ancho disponible del body */
    align-items: stretch; /* estira verticalmente los hijos (ej: mismas alturas) */
    gap: 24px;            /* Separación entre elementos hijo (ej: espacio entre grid y sidebar) */
    margin: 0 auto;                                   /* Centra el contenedor si tiene max-width */
    max-width: 1200px;                                /* Ancho máximo */
    }

.admin-sidebar {
    display: flex; /* flex para organizar contenido (ej: brand arriba, meta abajo) */
    flex-direction: column; /* apilar en columna (ej: menú vertical) */
    width: 200px;
    justify-content: space-between; /* separa top y bottom (ej: logo arriba, logout abajo) */
    padding: 20px;

    background: rgba(19, 34, 56, 0.88);  
     /* fondo gradiente vertical (ej: azul oscuro) */
    border-radius: 5px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45); /* sombra profunda (ej: eleva visualmente la barra) */
    position: relative; /* posicionamiento relativo (ej: para elementos absolutos hijos si los hubiera) */
}

.admin-sidebar .brand {
    display: flex;                        /* Pone logo y texto en una fila */
    gap: 12px;                            /* Separación entre logo y texto */
    align-items: center;                  /* CSentra verticalmente (ej: icono y título alineados) */
}

.admin-sidebar .logo {
    display: flex;                        /* Centra contenido interno (ej: texto CR) */
    align-items: center;                  /* Centra verticalmente dentro del logo */
    justify-content: center;              /* Centra horizontalmente dentro del logo */
    width: 44px;                          /* Ancho del cuadrado de logo (ej: 44px) */
    height: 44px;                         /* Alto del logo (ej: 44px) */
      
    border-radius: 20px; 
    background: var(--panel-bg);          /* Fondo del logo (ej: bloque oscuro translúcido) */
    font-weight: 700;                     /* Texto en negrita (ej: CR) */
    color: var(--text-light);             /* Color del texto del logo (ej: blanco) */
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.25); /* Sombreado interno (ej: relieve sutil) */
}

.admin-sidebar h1 {
    font-size: 1.1rem;                    /* Tamaño del título (ej: CivicRadar) */
    color: var(--text-light);              /* Color del título (ej: blanco) */
    letter-spacing: 1px;                   /* Espaciado entre letras */
}

.admin-nav {
    display: flex;                        /* layout en fila/columna según dirección */
    margin-top: 18px;                     /* Separación superior del nav (distancia al logo) */
    flex-direction: column;               /* El menú se pone en vertical */
    gap: 8px;                             /* Espacio entre items (Tablero, Mapa, etc...) */
}

.admin-nav a {
    display: flex;                        /* Cada enlace es un contenedor flexible (ej: icono + texto) */
    align-items: center;                  /* Alinea icono y texto verticalmente */
    gap: 12px;                            /* Espacio entre icono y texto */
    padding: 12px 10px;                   /* Padding interno (área clicable más grande o iconos separados) */
      
    border-radius: 8px;                   /* Esquinas redondeadas */
    text-decoration: none;                /* Quitamos subrayado */
    font-size: 0.95rem;                   /* Tamaño del texto del enlace */
    color: var(--text-light);                       /* Color del enlace (ej: blanco) */
    transition: background 0.18s, transform 0.12s;  /* Animaciones suaves (ej: hover) */
}

.admin-nav a .ico {
    display: flex;                        /* Centra letra/icono dentro del recuadro */
    align-items: center;                  /* Centra verticalmente */
    justify-content: center;              /* Centra horizontalmente */
    width: 34px;                          /* Anchura del recuadro del icono (ej: 34x34) */
    height: 34px;                         /* Altura del recuadro del icono (ej: 34x34) */
    font-weight: 700;                     /* Peso de la letra/icono */
    font-size: 0.9rem;                    /* Tamaño del texto del icono */

    background: var(--glass);             /* Fondo translúcido (ej: icono con efecto vidrio) */
    border-radius: 8px;                   /* Esquinas redondeadas del recuadro */
    color: var(--text-light);             /* color del icono (ej: blanco) */
}

.admin-nav a:hover {
    background: rgba(255, 255, 255, 0.03);  /* Ligero fondo en hover (ej: resalta el enlace) */
    transform: translateX(4px);               /* Mueve 4px a la derecha en hover (ej: efecto flotante) */
}

.admin-nav a.active {
    /* Fondo activo (ej: pestaña seleccionada) */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); /* Sombra en el estado activo (ej: destaca la opción) */
}

.admin-sidebar .meta {
    display: flex;                        /* flex para apilar elementos */
    flex-direction: column;               /* Apila verticalmente */
    margin-top: 14px;                     /* Espacio arriba para separar de la sección meta (ej: del nav) */
    gap: 10px;                            /* Separación entre líneas */
    font-size: 0.85rem; 
    color: var(--text-muted);             /* Color atenuado (ej: gris claro) */
}

.admin-logout {
    display: block;                       /* Se comporta como bloque (ej: ocupa su línea) */
    text-align: center;                   /* Centra el texto dentro del botón */
    margin-top: 8px;                      /* Margen encima del botón "Cerrar sesión" */
    padding: 10px;                        /* Relleno interno (ej: área clicable) */

    border-radius: 8px;                   /* Esquinas redondeadas */
    background: transparent;              /* Fondo transparente (ej: solo borde visible) */
    color: var(--text-muted);             /* Color del texto */
    text-decoration: none;                /* Sin subrayado */
    border: 1px solid rgba(255, 255, 255, 0.04); /* Borde sutil (ej: delimita el botón) */
}

.admin-logout:hover {
    background: rgba(255, 255, 255, 0.03); /* Ligero fondo en hover (ej: feedback visual) */
    color: var(--text-light);                /* Texto blanco al pasar el ratón (ej: más contraste) */
}

.main {             /* Contenedor que engloba todo lo de la derecha */
      flex: 1; /* ocupa todo el espacio restante (ej: contenido principal amplio) */
      display: flex; /* flex vertical para organizar secciones */
      flex-direction: column; /* apilar elementos (topbar, kpis, grid...) */
      gap: 18px; /* separación entre secciones (ej: 18px) */
      overflow: auto; /* permite scroll si el contenido es mayor que el alto (ej: scroll en main) */
    }

.topbar {
    display: flex;                                      /* Fila para título y búsqueda (ej: lado a lado) */
    justify-content: space-between;                     /* Separa título y búsqueda */
    align-items: center;                                /* Centra verticalmente (ej: input alineado con título) */
}

.topbar .search {
    display: flex;                                      /* En fila para icono + input */
    align-items: center;                                /* Centra verticalmente icono e input */
    gap: 8px;                                           /* Espacio entre icono e input */
    padding: 8px 14px;                                  /* Relleno de la caja */
    width: 60%;                                         /* Ocupa el 60% del ancho del topbar */
    max-width: 230px;                                   /* Ancho máximo para no crecer mucho */

    border-radius: 5px;
    color: var(--text-muted);                           /* Color del texto de la búsqueda */
    background: var(--panel-bg-soft);                   /* Fondo suave para la caja de búsqueda */
}

.topbar .search input {
    width: 100%;                                        /* Ocupa todo el ancho disponible dentro de la caja */
      
    background: transparent;                            /* input sin fondo (usa fondo del contenedor) */
    border: none;                                       /* Quita borde nativo */
    outline: none;                                      /* Quita outline por defecto del navegador */
    color: var(--text-light);                           /* Texto blanco en el input */
}

.kpis {                                                 /* Contenedor de las tarjetas KPI */
    display: flex;                                      /* Fila de tarjetas KPI */
    gap: 12px;                                          /* Espacio entre tarjetas */
}

.kpi {                                                  /* Tarjetas KPI */
    flex: 1;                                            /* Cada tarjeta toma el mismo espacio (ej: 5 kpis comparten fila) */
    background: var(--panel-bg);                        /* Fondo de tarjeta (ej: panel semitransparente) */
    padding: 12px 25px 8px 25px;                        /* Espacio interno */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.35);        /* Sombra suave (ej: elevación) */
}

.kpi h3 {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 5px;
}

.kpi .value {                                           /* Valor de tarjeta KPI (Ej: numeros) */
    font-size: 1.4rem; 
    font-weight: 700;
    color: var(--text-light);
}


.grid {                                                 /* Contenedor de mapa y barra derecha */
    display: grid; /* usa grid layout (ej: dos columnas: mapa + side) */
    grid-template-columns: 1fr 360px; /* columna flexible + columna fija de 360px (ej: mapa grande + panel derecho) */
    gap: 18px; /* espacio entre columnas */
    align-items: start; /* alinea inicio (ej: no centra verticalmente) */
}

.map-panel {
    background: linear-gradient(180deg, rgba(8, 48, 109, 0.2), rgba(1, 12, 29, 0.2)), rgba(255, 255, 255, 0.02); /* fondo con ligera variación */
    border-radius: 2px; /* esquinas suaves */
    padding: 12px;
    height: 440px; /* altura fija del panel del mapa (ej: mapa visible) */
    display: flex; /* flex para organizar cabecera, mapa y acciones */
    flex-direction: column; /* apilar cabecera, mapa, acciones */
    gap: 10px; /* separación vertical entre elementos del panel */
      
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); /* sombra para dar profundidad */
}

.map-panel-topbar {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.map-panel .map {
    flex: 1; /* ocupa el resto del espacio vertical dentro del panel (ej: mapa crece) */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); /* fondo sutil */
    border: px solid rgba(255, 255, 255, 0.03); /* borde muy suave */
    display: flex; /* flex para centrar el contenido placeholder */
    align-items: center; /* centra verticalmente */
    justify-content: center; /* centra horizontalmente */
    color: var(--text-muted); /* texto del placeholder atenuado */
    font-size: 0.95rem; /* tamaño del texto del placeholder */
}

    


/* Right column: activity, moderation */
    .side-panel {
      background: var(--panel-bg); /* fondo del panel derecho */
      border-radius: 12px; /* redondeo de esquinas */
      padding: 12px; /* padding interno */
      height: 440px; /* igual altura que map-panel para simetría */
      overflow: auto; /* permite scroll si el contenido excede la altura */
    }

    /* Recent reports table */
    .table {
      width: 100%; /* la tabla ocupa todo el ancho del contenedor (ej: no queda espacio en los laterales) */
      border-collapse: collapse; /* colapsa bordes de la tabla para un aspecto limpio */
      margin-top: 10px; /* espacio superior a la tabla */
    }

    .table thead th {
      text-align: left; /* títulos alineados a la izquierda */
      font-size: 0.8rem; /* tamaño del texto de encabezado */
      color: var(--text-muted); /* color atenuado para encabezados */
      padding: 8px 6px; /* padding interno de las celdas */
      border-bottom: 1px solid rgba(255, 255, 255, 0.04); /* línea fina separadora */
    }

    .table tbody td {
      padding: 10px 6px; /* padding interno de las filas */
      border-bottom: 1px solid rgba(255, 255, 255, 0.02); /* separador suave entre filas */
      font-size: 0.92rem; /* tamaño de texto de las celdas */
      color: var(--text-light); /* color claro para el contenido */
    }

    .badge {
      display: inline-block; /* se comporta como bloque en línea (ej: pegar texto con fondo) */
      padding: 6px 8px; /* padding de la etiqueta */
      border-radius: 999px; /* forma pill para la etiqueta */
      font-size: 0.75rem; /* tamaño pequeño en la etiqueta */
      color: white; /* texto blanco */
      background: rgba(0, 0, 0, 0.18); /* fondo oscuro semitransparente para contraste */
    }

    /* Action buttons */
    .btn {
      padding: 8px 10px; /* padding interno */
      border-radius: 8px; /* esquinas redondeadas */
      border: none; /* sin borde */
      cursor: pointer; /* cursor tipo puntero */
      font-weight: 600; /* texto seminegrita */
      font-size: 0.85rem; /* tamaño del texto del botón */
      color: white; /* texto blanco */
      background: var(--accent-grad); /* fondo con gradiente (ej: botón principal) */
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); /* sombra para elevación */
    }

    .btn.ghost {
      background: transparent; /* botón estilo ghost (ej: contorno sin fondo) */
      border: 1px solid rgba(255, 255, 255, 0.06); /* borde sutil para el ghost */
      color: var(--text-light); /* texto blanco para visibilidad */
    }

    .btn.small {
      padding: 6px 8px; /* padding reducido para botones pequeños */
      font-size: 0.8rem; /* texto más pequeño */
      border-radius: 6px; /* radio más pequeño */
    }

    /* Small cards inside side-panel */
    .event {
      display: flex; /* layout en fila para dot + texto + acciones */
      gap: 10px; /* separación entre columnas internas */
      align-items: flex-start; /* alinea inicio (ej: dot en la parte superior) */
      padding: 10px; /* padding interno */
      border-radius: 8px; /* bordes redondeados */
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.00)); /* fondo muy suave */
      margin-bottom: 8px; /* separación entre eventos */
      border: 1px solid rgba(255, 255, 255, 0.02); /* borde sutil */
    }

    .event .dot {
      width: 10px; /* diámetro del punto indicador */
      height: 10px; /* diámetro del punto indicador */
      border-radius: 50%; /* hace el punto circular */
      margin-top: 6px; /* separa el punto del borde superior (ej: alineación visual) */
    }

    .dot.fight {
      background: #E95656; /* rojo para peleas (ej: alerta visual) */
    }

    .dot.drugs {
      background: #FFA62B; /* naranja para drogas (ej: advertencia) */
    }

    .dot.robbery {
      background: #FFD166; /* amarillo para robos (ej: menos crítico que rojo) */
    }

    .event strong {
      display: block; /* fuerza bloque para después poder poner small debajo */
      color: var(--text-light); /* título del evento en color claro (ej: 'Pelea — Parque Central') */
    }

    .event small {
      color: var(--text-muted); /* texto secundario con menor contraste (ej: 'hace 12 min') */
    }

    
    /* Small detail: scrollbars subtle */
    .main::-webkit-scrollbar,
    .side-panel::-webkit-scrollbar {
      height: 8px; /* altura de la scrollbar (ej: más fina) */
      width: 8px; /* ancho de la scrollbar */
    }

    .main::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.04); /* color del pulgar (ej: sutil) */
      border-radius: 8px; /* redondea la barra de scroll */
    }

    .side-panel::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.04); /* mismo estilo para el panel lateral */
      border-radius: 8px; /* redondeo */
    }

/* ====================================================== */
/* ===================== (MAPA.html) ==================== */
/* ====================================================== */

.page--inicio-usuario {            /* Contenedor padre que ocupa toda la pantalla y engloba a los demás */
    display: flex;                 /* Convierte el contenedor en un layout vertical (header → map → footer) */
    flex-direction: column;        /* Acomoda los hijos en columna, uno debajo del otro */
    min-height: 100vh;             /* Obliga a que .principal-container ocupe toda la altura de la ventana */
}

.header {
    display: flex;
    align-items: center;                /* Centra verticalmente los elementos dentro del nav (logo, links, etc.) */
    justify-content: space-between;     /* Separa la marca a la izquierda y la navegación a la derecha */
    gap: 16px;                          /* Separa elementos entre sí cuando hay espacio (espaciado consistente) */    
    padding: 14px 20px;
    background: var(--panel-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.header__brand {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: var(--text-light);
}

.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.02));
}

.header__list {
    display: flex;                      /* Pone la lista en horizontal */
    align-items: center;                /* Centra verticalmente los items del menú */
    margin: 0;
    padding: 0;
    gap: 14px;
    list-style: none;
}

.header__item a {
    color: var(--text-light);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
}

.header__item a:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
    transition: all .15s ease;
}

.header__item a.active {
    background: rgba(255, 255, 255, 0.1); /* Un fondo más clarito que el hover */
    color: #ffffff;                      /* Texto blanco puro */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Una pizca de relieve */
}

.header__logout {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    line-height: inherit;
    color: var(--text-light);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-block;
    width: 100%;
    text-align: left;
    transition: all 0.15s ease;
}

.header__logout:hover {
    background: rgba(233, 86, 86, 0.15); /* Un rojo muy suave al hover */
    color: #ff8a8a;
}

.page--inicio-usuario main {
    flex: 1 1 auto; /* main ocupa todo el espacio disponible entre header y footer */
    display: flex;   /* opcional, para que #map también pueda usar flex */
    flex-direction: column;
}

.map-panel-inicio {
  flex: 1 1 auto;            /* Hace que el mapa se expanda para ocupar TODO el espacio disponible entre header y footer - flex-grow: 1 → puede crecer - flex-shrink: 1 → puede encogerse - flex-basis: auto → su tamaño base es el tamaño natural del contenido */
  min-height: 0;             /* Permite que #map reduzca su altura si hace falta (Evitando overglow)*/
  width: 100%;               /* Asegura que el mapa ocupe todo el ancho del contenedor */
  position: relative;        /* Convierte el #map en el sistema de referencia de Leaflet. Así, todas las capas internas de Leaflet pueden anclarse exactamente dentro de ese contenedor */
  border-top: 1px solid rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.footer {
    display: flex;                  /* Layout en fila para distribuir dos bloques (izq/dcha) */
    justify-content: space-between; /* Separa contenido izquierdo y derecho */
    align-items: center;            /* Centra verticalmente el contenido del footer */
    gap: 12px;                      /* Separación entre elementos dentro del footer */
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(3, 25, 57, 0.9), rgba(8, 48, 109, 0.9));
    color: var(--text-muted);
    font-size: 0.95rem;
}

.footer__link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}

.footer__link:hover {
    color: var(--text-light);
}

/* ====================================================== */
/* =============== (SECCIÓN RESPONSIVE) ================= */
/* ====================================================== */

@media (max-width:720px) {
    .principal-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .principal-nav ul {
        flex-wrap: wrap;
    }

    #map {
        height: 60vh;
    }

    footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
}

/* ====================================================== */
/* ================ (ERROR PARA TUTOR) ================== */
/* ====================================================== */

#error {
    background-color: red;
    padding: 10px;
}

#desactivarerror {
    background-color: green;
    padding: 10px;
}

/* Contenedor del overlay: ocupa todo el mapa pero pointer-events pasa al contenido excepto la caja */
.map-error {
  position: absolute;
  inset: 0;                    /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;        /* deja pasar clics al mapa si quieres (mockup visual) */
  z-index: 800;                /* por encima de los tiles y popups (Leaflet usa z-index altos) */
}

/* Caja visible de error */
.map-error__box {
  pointer-events: auto;        /* si quieres poder hacer click en la caja (por ejemplo, cerrar) */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  max-width: 90%;
  width: max-content;
  backdrop-filter: blur(4px);  /* efecto glass, opcional */
}

/* Variante más "alerta" (rojo) si quieres destacar aún más) */
.map-error__box.important {
  background: linear-gradient(180deg, rgba(233,86,86,0.95), rgba(196,34,34,0.95));
  border: 1px solid rgba(0,0,0,0.25);
  color: #fff;
  box-shadow: 0 12px 28px rgba(233,86,86,0.25);
}

/* Responsive: caja algo más pequeña en pantallas pequeñas */
@media (max-width: 520px) {
  .map-error__box { font-size: 0.95rem; padding: 10px 14px; }
}




















/* ====================================================== */
/* ============= (SOBRE NOSOTROS: REPARACIÓN) =========== */
/* ====================================================== */

/* Contenedor principal: Ocupa el espacio entre header y footer */
.page-about {
    flex: 1; /* Rellena el espacio disponible */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    
    /* FONDO: Reutilizamos tu imagen global pero forzamos que cubra todo el espacio */
    background: 
        linear-gradient(135deg, rgba(1, 12, 29, 0.92), rgba(8, 48, 109, 0.85)),
        url('../img/fondologin.jpeg') no-repeat center center / cover fixed !important;
}

/* El contenedor que agrupa el contenido */
.about-wrapper {
    max-width: 900px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* Tipografía de la intro */
.about-intro {
    text-align: center;
    margin-bottom: 40px;
}

.about-intro__title {
    font-size: 2.8rem;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
}

.about-intro__lead {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Grid de detalles */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.about-grid__item {
    background: rgba(0, 0, 0, 0.2);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.about-grid__item h3 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
}

.about-grid__item p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Bloque de Misión */
.about-mission__box {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.about-mission__box h2 {
    font-size: 1.8rem;
    color: white;
    margin-bottom: 15px;
}

.about-mission__box p {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}

/* Reutilizamos tu animación fadeInUp */
.animate-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Ajuste para pantallas móviles */
@media (max-width: 600px) {
    .about-wrapper { padding: 30px 20px; }
    .about-intro__title { font-size: 2rem; }
}


/* ====================================================== */
/* =================== (LANDING / HOME) ================= */
/* ====================================================== */

/* 1. Entrada suave hacia arriba */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Empieza 30px más abajo e invisible */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina en su sitio y visible */
    }
}

/* 2. Flotación suave y continua */
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* Sube 10px */
    100% { transform: translateY(0px); } /* Baja */
}

.landing-body {
    /* Un poco más oscuro para que resalten más los efectos */
    background-color: rgba(1, 12, 29, 0.5); 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden; /* Evita barras de scroll si las animaciones se salen */
}

/* --- Sección Hero (Centro) --- */
.landing-hero {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.hero-content {
    max-width: 800px;
    padding: 0 20px;
    background: transparent;
    /* Aplicamos la animación de flotación al contenedor entero */
    /* Tarda 6s en completar el ciclo, es infinita y tiene un ritmo suave (ease-in-out) */
    animation: floating 6s ease-in-out infinite;
    /* Esperamos un poco a que terminen las entradas para empezar a flotar */
    animation-delay: 1s; 
}

/* --- Elementos con Animación de Entrada --- */

/* Título H1 */
.hero-content h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: white;
    line-height: 1.1;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);

    /* Configuración de la animación de entrada */
    opacity: 0; /* Empieza invisible antes de que arranque la animación */
    animation: fadeInUp 0.8s ease-out forwards; /* forwards asegura que se quede visible al final */
    animation-delay: 0.2s; /* Empieza casi inmediatamente */
}

/* Párrafo */
.hero-content p {
    font-size: 1.35rem;
    color: var(--text-light);
    margin-bottom: 45px;
    line-height: 1.6;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);

    /* Configuración de la animación de entrada */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.4s; /* Empieza un poco después del título */
}

/* Contenedor de Botones */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px; /* Espacio extra para la sombra del hover */

    /* Configuración de la animación de entrada */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.6s; /* Empieza después del texto */
}

/* --- Botones Mejorados --- */

/* Botón Grande Principal (Empezar ahora) */
.btn-hero {
    padding: 16px 40px;
    background: var(--accent-grad);
    color: white;
    text-decoration: none;
    border-radius: 50px; /* Más redondeado, más moderno */
    font-size: 1.2rem;
    font-weight: 700;
    /* Sombra inicial */
    box-shadow: 0 10px 30px -10px rgba(8, 48, 109, 0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más elástica */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden; /* Para efectos internos si quisiéramos */
}

/* Efecto Hover del Botón Principal (Resplandor) */
.btn-hero:hover {
    transform: translateY(-5px) scale(1.03);
    background: var(--accent-grad-hover);
    /* Sombra estilo "resplandor" azul */
    box-shadow: 0 20px 40px -10px rgba(8, 48, 109, 0.8), 0 0 20px rgba(255,255,255,0.2) inset;
}

/* Pequeña animación para la flecha del botón al hacer hover */
.btn-hero:hover i {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}

/* Botón Transparente (Entrar) */
.btn-hero-outline {
    padding: 16px 40px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    border-radius: 50px; /* A juego con el otro */
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.btn-hero-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -10px rgba(255,255,255,0.3);
}

/* --- Footer --- */
.landing-footer {
    text-align: center;
    padding: 20px;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    /* Animación de entrada simple para el footer también */
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 1s;
}

/* Responsive básico */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.8rem; }
    .hero-actions { flex-direction: column; width: 100%; gap: 15px; }
    .btn-hero, .btn-hero-outline { width: 100%; justify-content: center; padding: 14px 20px; font-size: 1.1rem;}
}

















/* --- ESTILOS DEL LOGO CIVICRADAR (PARA FONDO AZUL) --- */
.header__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
    /* IMPORTANTE: Aseguramos que los enlaces no se pongan azules por defecto */
    color: white; 
}

/* Contenedor del icono */
.logo-container {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evita que el logo se aplaste si falta espacio */
}

/* El círculo rojo sólido (Esto se ve genial sobre azul) */
.logo-circle {
    position: relative;
    width: 100%;
    height: 100%;
    background: #E95656; /* Tu color rojo */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra un poco más oscura para el fondo azul */
}

/* Las letras CR dentro */
.logo-initials {
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -1px;
    font-family: sans-serif;
}

/* Animación de "Onda de Radar" */
.radar-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /* Usamos el rojo pero con transparencia */
    background: rgba(233, 86, 86, 0.6);
    border-radius: 50%;
    z-index: 1;
    animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* El contenedor del texto */
.brand-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

/* --- CAMBIOS DE COLOR AQUÍ --- */

.brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    /* CAMBIO: Ahora es BLANCO para que se vea sobre el azul */
    color: #ffffff; 
}

.text-highlight {
    /* El rojo resalta muy bien sobre el azul y sobre el blanco */
    color: #E95656; 
}

.brand-slogan {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-top: 2px;
    /* CAMBIO: Blanco con un poco de transparencia para que sea secundario */
    color: rgba(255, 255, 255, 0.7); 
}

/* Definición de la animación (igual que antes) */
@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}