/* ==========================================
   ESTILOS DE OVERLAYS: POP-UP Y BOTÓN FLOTANTE (FAB)
   ========================================== */

/* 1. POP-UP MODAL */
.popup-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 16, 60, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--curva), visibility 200ms var(--curva);
}

.popup-backdrop.activo {
  opacity: 1;
  visibility: visible;
}

.popup-tarjeta {
  background-color: var(--lino-alto);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
  max-width: 520px;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: var(--e-6);
  transform: translateY(16px) scale(0.97);
  transition: transform 280ms var(--curva);
  color: var(--tinta);
}

.popup-backdrop.activo .popup-tarjeta {
  transform: translateY(0) scale(1);
}

/* Franja superior con degradado de la ruta formativa */
.popup-franja-superior {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--etapa-raiz) 0%, var(--etapa-suelo) 20%, var(--etapa-tallo) 40%, var(--etapa-poda) 60%, var(--etapa-fruto) 80%, var(--etapa-semilla) 100%);
}

/* Botón de cierre (44x44px accesible) */
.popup-btn-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--tinta-media);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.popup-btn-cerrar:hover {
  background-color: var(--niebla);
  color: var(--tinta);
}

.popup-btn-cerrar svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
}

.popup-header {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  margin-top: var(--e-2);
  margin-bottom: var(--e-4);
}

.popup-header-texto h3 {
  font-size: var(--t-xl);
  font-weight: 800;
  margin-top: 4px;
}

.popup-form {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.popup-form .form-control {
  background-color: var(--lino);
  color: var(--tinta);
  border-color: var(--borde-claro);
}

.popup-form .form-control:focus {
  border-color: var(--accion);
}

.popup-form .form-label {
  color: var(--tinta);
}

.popup-footer-texto {
  text-align: center;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-top: var(--e-3);
}

.popup-btn-ahora-no {
  display: block;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  text-decoration: underline;
  margin-top: var(--e-3);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
}
.popup-btn-ahora-no:hover {
  color: var(--tinta);
}


/* 2. BOTÓN FLOTANTE (FAB) */
.fab-contenedor {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateY(120%);
  transition: transform var(--medio) var(--curva);
}

.fab-contenedor.visible {
  transform: translateY(0);
}

/* Ocultar FAB en pantallas móviles (< 768px) pues la sticky bar ya cubre la función */
@media (max-width: 767px) {
  .fab-contenedor {
    display: none !important;
  }
  .popup-backdrop {
    padding: 12px;
  }
  .popup-tarjeta {
    padding: 20px 16px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--r-lg);
  }
}

.fab-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--accion);
  color: #FFFFFF;
  border: none;
  box-shadow: var(--sombra-accion);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
  position: relative;
}

.fab-btn:hover {
  transform: scale(1.06);
  background-color: var(--accion-alta);
  box-shadow: 0 8px 24px var(--accion-sombra);
}

.fab-btn svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform var(--medio) var(--curva);
}

.fab-btn[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Pulso único al aparecer */
@keyframes fabPulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 122, 44, 0.6); }
  70% { box-shadow: 0 0 0 16px rgba(224, 122, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 122, 44, 0); }
}

.fab-btn.pulsar {
  animation: fabPulse 1000ms ease-out 1;
}

/* Menú de Acciones Flotante */
.fab-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility var(--medio) var(--curva);
  list-style: none;
}

.fab-menu.abierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fab-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.fab-action-btn {
  background-color: var(--noche);
  color: var(--sobre-oscuro);
  border: 1px solid var(--borde-oscuro);
  border-radius: var(--r-full);
  padding: 10px 18px;
  font-family: var(--f);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-md);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}

.fab-action-btn:hover {
  background-color: var(--noche-alta);
  transform: translateX(-4px);
}

.fab-action-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}


/* Prefers Reduced Motion Overrides */
@media (prefers-reduced-motion: reduce) {
  .popup-backdrop, .popup-tarjeta, .fab-contenedor, .fab-menu, .fab-btn {
    transition: none !important;
    animation: none !important;
  }
  .popup-tarjeta {
    transform: none !important;
  }
}