@import url("./base.css");
@import url("./theme.css");
@import url("./layout.css");
@import url("./dashboard.css");
@import url("./parking.css");
@import url("./login.css");
@import url("./modal.css");
@import url("./toast.css");
@import url("./responsive.css");

#notificaciones {
  position: relative;
}

#bell {
  cursor: pointer;
  position: relative;
  font-size: 18px;
}

#notifPanel {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notif-item {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.05);
  transition: 0.2s;
}

.notif-item:hover {
  background: rgba(255,255,255,0.1);
}

.notif-text {
  font-size: 13px;
  margin-bottom: 3px;
}

.notif-date {
  font-size: 10px;
  opacity: 0.6;
}

#notifCount {
  position: absolute;
  top: -5px;
  right: -10px;

  background: red;
  color: white;

  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50%;
}


.hidden {
  display: none;
}

.notif-item {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
}

#topBar {
  position: relative;
  overflow: visible; /* 🔥 CLAVE */
}

#notifPanel {
  position: absolute;
  right: 10px;
  top: 45px;

  width: 280px;
  max-height: 320px;
  overflow-y: auto;

  background: rgba(20,20,20,0.95);
  backdrop-filter: blur(10px);

  border-radius: 12px;
  padding: 12px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.6);

  z-index: 9999; /* 🔥 IMPORTANTÍSIMO */
}

.modal-content button {
  display: block;
  width: 100%;
  margin-top: 5px;
}

body {
  overflow-x: hidden;
}

/* fuerza tu app al frente */
.layout, .main, .sidebar {
  position: relative;
  z-index: 10;
}

/* evita overlays fantasmas */
video, canvas, iframe {
  position: relative !important;
  z-index: 1 !important;
}

/* 🔥 SOLUCIÓN SOMBRA FANTASMA GLOBAL */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.5);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 5000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 12px;
  z-index: 5001;
}

/* 🔔 notificaciones por debajo del modal */
#notifPanel {
  z-index: 2000;
}

/* 🧼 evita sombras invisibles */
.modal.hidden,
#notifPanel.hidden {
  display: none !important;
}

#installBtn {
  background: linear-gradient(145deg, #2ecc71, #27ae60);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

#installBtn:hover {
  transform: scale(1.05);
}

#usuariosPanel {
  margin-top: 30px;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}

.form-usuario {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.form-usuario input,
.form-usuario select {
  padding: 8px;
  border-radius: 6px;
  border: none;
}

.usuario-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin-bottom: 5px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}

.usuario-item span {
  font-size: 13px;
}

/* FIX: Forzar visibilidad de campos de formulario */
.form-usuario input,
.form-usuario select,
.form-usuario button {
    display: block !important;
    visibility: visible !important;
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 10px !important;
    margin: 5px !important;
    border-radius: 8px !important;
}

.form-usuario input[type="password"] {
    background-color: white !important;
    color: #333 !important;
}

#userPassword {
    display: block !important;
    background: white !important;
    color: black !important;
}

/* ==================== MAPA INTERACTIVO ==================== */
.mapa-btn {
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.mapa-btn:hover {
    background: rgba(76,175,80,0.3);
    transform: translateY(-2px);
}

.mapa-btn.active {
    background: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 2px 10px rgba(76,175,80,0.3);
}

.zona-mapa {
    position: absolute;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
    backdrop-filter: blur(3px);
    border: 2px solid transparent;
}

.zona-mapa:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    z-index: 10;
}

.zona-mapa.seleccionada {
    border: 3px solid #4caf50;
    box-shadow: 0 0 20px rgba(76,175,80,0.5);
    background: rgba(76,175,80,0.15) !important;
}

.estado-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.estado-badge.disponible { background: #4caf50; }
.estado-badge.ocupado { background: #ff9800; }
.estado-badge.reservado { background: #2196f3; }

.slot-mapa {
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
    font-size: 12px;
}

.slot-mapa:hover {
    transform: scale(1.05);
}

.slot-mapa.disponible { background: #4caf50; }
.slot-mapa.ocupado { background: #ff9800; }
.slot-mapa.reservado { background: #2196f3; }

/* Estilo para campos obligatorios */
.modal-content input:required {
    border-left: 3px solid #4caf50;
}

.modal-content input:required:invalid {
    border-left: 3px solid #ff6b6b;
}

.modal-content label span {
    color: #ff6b6b;
    font-weight: bold;
}

/* Mejorar visualización de campos de hora */
input[type="time"] {
    font-family: monospace;
    letter-spacing: 1px;
}

/* Pequeño helper para los labels */
label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
}

small {
    display: block;
    margin-top: 4px;
}

/* Forzar visibilidad de inputs time */
input[type="time"] {
    display: block !important;
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

/* Para tema oscuro */
.tema-oscuro input[type="time"],
.tema-verde input[type="time"],
.tema-negro input[type="time"] {
    background-color: #2a2a2a !important;
    color: white !important;
    border-color: #555 !important;
}

/* Para tema blanco */
.tema-blanco input[type="time"] {
    background-color: white !important;
    color: #333 !important;
    border-color: #ccc !important;
}