/* Huellitas modal center */
/* Ensure publish and delete modals are centered. Use !important to override inline styles when necessary. */
#publish-modal, #delete-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.35) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

/* Eliminar todos los bordes del modal */
#publish-modal *, #delete-modal *, .modal-content, .modern-modal {
  border: none !important;
  outline: none !important;
}

/* Hidden state (kept for compatibility with .active toggling) */
#publish-modal:not(.active), #delete-modal:not(.active) {
  display: none !important;
}

/* Bloquear scroll del body cuando modal está abierto */
body.modal-open {
  overflow: hidden;
  /* Quitar position fixed que causaba problemas */
}
#publish-modal .modal-box{ background:#fff; max-width: 520px; width:95%; max-height:60vh; border-radius:12px; padding:0; box-shadow:0 10px 30px rgba(0,0,0,.2); overflow-y:auto; border: none; }
#publish-modal .modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#publish-modal .modal-close{ cursor:pointer; }
.autocomplete-list{ position:absolute; background:#fff; border:1px solid #ccc; max-height:200px; overflow:auto; z-index:10000; width:100%; }
.autocomplete-item{ padding:6px 8px; cursor:pointer; }
.autocomplete-item:hover{ background:#f2f2f2; }

/* Ensure autocomplete inputs fill container and look consistent */
input#direccion, input#direccion-autocomplete {
	width: 100% !important;
	height: 40px !important;
	padding: 8px 10px !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
}

/* Make likely suggestion overlays appear above modal */
.gmaps-places-suggestions, .gmpx-suggestions-list, .gmpx-suggestions, .gmaps-autocomplete-surface, .places-autocomplete-surface, .gmaps-autocomplete-surface {
	z-index: 10050 !important;
	background: #fff !important;
	color: #111 !important;
	border: 1px solid #ccc !important;
	box-shadow: 0 6px 14px rgba(0,0,0,.12) !important;
}
.gmaps-places-suggestions * , .gmaps-autocomplete-surface * , .places-autocomplete-surface * { color: #111 !important; background: transparent !important; }

.gmaps-places-suggestions .autocomplete-item, .gmaps-autocomplete-surface .autocomplete-item, .places-autocomplete-surface .autocomplete-item {
	padding: 8px 10px !important;
}

/* Debug panel in publish modal */
.hu-debug { font-size:12px; color:#333; margin-top:8px; background:#f7f7f7; border:1px dashed #ccc; padding:8px; border-radius:6px; }

/* Autocomplete suggestion container: support both the id and the older class name */
#autocomplete-list, .autocomplete-items {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	background: #fff;
	border: 1px solid #ccc;
	max-height: 200px;
	overflow: auto;
	z-index: 200000 !important; /* Más alto que la navbar */
	width: 100%;
	box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Ensure the label wrapper positions the absolute suggestions container */
#publish-modal .modal-content label { position: relative; }

.autocomplete-item{ padding:6px 8px; cursor:pointer; }
.autocomplete-item:hover{ background:#f2f2f2; }

/* Explicit overrides for Google Places Autocomplete default classes (.pac-*) and PlaceAutocompleteElement surfaces */
.pac-container, .pac-container * {
	background: #fff !important;
	color: #111 !important;
	border: 1px solid #ccc !important;
	box-shadow: 0 6px 14px rgba(0,0,0,.12) !important;
	z-index: 12000 !important; /* above modal */
}
.pac-item {
	background: transparent !important; /* items inherit container bg */
	color: #111 !important;
}
.pac-item:hover, .pac-item:focus {
	background: #f2f2f2 !important;
}

/* PlaceAutocompleteElement may render shadow DOM or custom elements; target common wrapper tags and known attributes */
google-places-autocomplete, place-autocomplete, .place-autocomplete-surface, .place-autocomplete-surface * {
	background: #fff !important;
	color: #111 !important;
	z-index: 12000 !important;
}

/* Ensure input inside modal isn't styled dark by other rules */
#publish-modal input#direccion, #publish-modal input#direccion-autocomplete {
	background: #fff !important;
	color: #111 !important;
}

/* Target PlaceAutocompleteElement / Places input rendered into DOM (aria-based) */
input[aria-autocomplete="list"][role="combobox"],
input[aria-label="Buscar un sitio"],
input[role="combobox"][aria-label="Buscar un sitio"] {
	background: #fff !important;
	color: #111 !important;
	border: 1px solid #ccc !important;
	height: 40px !important;
	box-sizing: border-box !important;
}

/* Also ensure any immediate parent wrappers don't force a dark background */
input[aria-autocomplete="list"][role="combobox"]:not([disabled])::-webkit-input-placeholder { color: #999 !important; }

/* Mobile specific modal improvements */
@media (max-width: 768px) {
  #publish-modal .modal-box {
    width: calc(100vw - 20px);
    max-width: 100vw;
    max-height: 60vh; /* Reducir altura para compensar el espacio arriba */
    margin: 0 10px 20px 10px; /* Quitar margen arriba, dejarlo al padding-top del contenedor */
    padding: 0; /* Eliminar padding que causa el 'borde' */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    position: relative;
    background: white;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  
  #publish-modal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    padding-top: 25px; /* Espacio para la X */
  }
  
  #publish-modal .modal-content label {
    margin-bottom: 0.25rem;
    display: block;
    font-size: 13px;
    font-weight: 600;
  }
  
  #publish-modal input, 
  #publish-modal select, 
  #publish-modal textarea {
    font-size: 14px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 8px;
    width: 100%;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  
  /* Arreglar botones en móvil */
  #publish-modal .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    padding: 16px 0 !important;
    border-top: 2px solid #E9ECEF !important;
    width: 100% !important;
  }
  
  #publish-modal .form-actions button {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  
  #publish-modal button {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
    margin-top: 1rem;
    border-radius: 8px;
    width: 100%;
  }
  
  /* Botón cerrar modal - SUPER visible */
  #publish-modal .modal-close,
  #publish-modal .close-btn {
    position: absolute;
    top: -15px; /* Fuera del modal, arriba */
    right: 10px;
    background: #FF6B35 !important;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    border: 3px solid white;
  }
  
  #publish-modal .modal-close:hover,
  #publish-modal .close-btn:hover {
    background: #F5A623 !important;
    color: white;
    transform: rotate(90deg) scale(1.1);
  }
  
  /* Botón principal verde */
  #publish-modal textarea {
    min-height: 60px;
    max-height: 100px;
    resize: vertical;
  }
  
  /* Asegurar que el formulario tenga scroll si es necesario */
  #publish-modal form {
    overflow-y: auto;
    flex: 1;
    padding-bottom: 10px;
  }
  
  #publish-modal button[type="submit"],
  #publish-modal .cta-btn {
    background: linear-gradient(135deg, #FF6B35 0%, #F5A623 100%) !important;
    color: white !important;
    border: 3px solid #FF6B35 !important;
    border-radius: 25px !important;
    font-weight: bold;
    margin-top: 0.75rem;
    margin-bottom: 15px;
    padding: 14px 28px !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
  }
  
  #publish-modal button[type="submit"]:hover,
  #publish-modal .cta-btn:hover {
    background: linear-gradient(135deg, #F5A623 0%, #FF6B35 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4) !important;
  }
  
  /* Botones específicos del modal moderno - SOBRESCRIBIR TODOS LOS ESTILOS */
  #publish-modal .btn-secondary,
  #publish-modal button.btn-secondary,
  #publish-modal button[id="close-modal-btn"],
  #publish-modal .form-actions button:first-child {
    background: #333 !important;
    color: white !important;
    border: 3px solid #333 !important;
    border-radius: 25px !important;
    padding: 14px 28px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  #publish-modal .btn-secondary:hover,
  #publish-modal button.btn-secondary:hover,
  #publish-modal button[id="close-modal-btn"]:hover,
  #publish-modal .form-actions button:first-child:hover {
    background: #555 !important;
    border-color: #555 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* Botones primarios con máxima especificidad */
  #publish-modal .btn-primary,
  #publish-modal button.btn-primary,
  #publish-modal button[type="submit"],
  #publish-modal .form-actions button:last-child,
  #publish-modal .form-actions .btn-primary,
  .modal#publish-modal .btn-primary,
  .modal#publish-modal button.btn-primary,
  .modal#publish-modal button[type="submit"],
  .modal#publish-modal .form-actions button:last-child {
    background: linear-gradient(135deg, #FF6B35 0%, #F5A623 100%) !important;
    color: white !important;
    border: 3px solid #FF6B35 !important;
    border-radius: 25px !important;
    padding: 14px 28px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }
  
  /* Hover states con máxima especificidad */
  #publish-modal .btn-primary:hover,
  #publish-modal button.btn-primary:hover,
  #publish-modal button[type="submit"]:hover,
  #publish-modal .form-actions button:last-child:hover,
  #publish-modal .form-actions .btn-primary:hover,
  .modal#publish-modal .btn-primary:hover,
  .modal#publish-modal button.btn-primary:hover,
  .modal#publish-modal button[type="submit"]:hover,
  .modal#publish-modal .form-actions button:last-child:hover {
    background: linear-gradient(135deg, #F5A623 0%, #FF6B35 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4) !important;
    border-color: #F5A623 !important;
  }
}