/* ═══════════════════════════════════════════════════════════
   EG · estilos compartidos: puerta de acceso, roles,
   herramientas de admin, visor espacial, modales y avisos.
═══════════════════════════════════════════════════════════ */

.eg-oculto { display: none !important; }

/* ═══ PUERTA DE ACCESO ═══ */
#eg-acceso {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(232,196,184,.35), transparent 70%),
    linear-gradient(180deg, #fff 0%, #f9f4ee 100%);
  opacity: 1; transition: opacity .55s ease;
}
#eg-acceso.eg-fuera { opacity: 0; pointer-events: none; }
.eg-acceso-caja { text-align: center; padding: 24px; max-width: 420px; width: 100%; }
.eg-acceso-logo {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 9vw, 76px);
  font-weight: 300; letter-spacing: 6px; color: #2a1e16;
}
.eg-acceso-logo em { font-style: italic; color: #e5989b; }
.eg-acceso-sub {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 11px;
  letter-spacing: 5px; text-transform: uppercase; color: #9e8f85;
  margin: 10px 0 36px;
}
.eg-acceso-cargando { display: flex; gap: 8px; justify-content: center; padding: 14px 0; }
.eg-acceso-cargando span {
  width: 7px; height: 7px; border-radius: 50%; background: #e5989b;
  animation: egPuntito 1.2s ease-in-out infinite;
}
.eg-acceso-cargando span:nth-child(2) { animation-delay: .18s; }
.eg-acceso-cargando span:nth-child(3) { animation-delay: .36s; }
@keyframes egPuntito { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

#egAccesoForm { display: flex; flex-direction: column; gap: 14px; align-items: center; }
#egCodigo {
  width: min(300px, 80vw); padding: 14px 18px; text-align: center;
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 18px; letter-spacing: 8px;
  color: #2a1e16; background: rgba(255,255,255,.8);
  border: 1px solid rgba(158,143,133,.35); border-radius: 100px; outline: none;
  transition: border-color .3s, box-shadow .3s;
}
#egCodigo:focus { border-color: #e5989b; box-shadow: 0 0 0 4px rgba(229,152,155,.12); }
#egCodigo::placeholder { letter-spacing: 3px; color: #c4b8ae; }
#egAccesoForm button {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase;
  padding: 13px 42px; border: none; border-radius: 100px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, #e5989b, #e8b4a8);
  box-shadow: 0 8px 28px rgba(229,152,155,.35);
  transition: transform .25s, box-shadow .25s, opacity .25s;
}
#egAccesoForm button:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(229,152,155,.45); }
#egAccesoForm button:disabled { opacity: .6; transform: none; cursor: default; }
.eg-acceso-error {
  font-family: 'Jost', sans-serif; font-size: 13px; color: #c0605f;
  margin-top: 18px; min-height: 18px;
}

/* ═══ ROLES ═══ */
/* Invitados: solo Inicio y Regalos */
body.rol-invitado a[href*="Nosotros"],
body.rol-invitado a[href*="Aniversario"] { display: none !important; }
/* Herramientas de admin ocultas para los demás */
.solo-admin { display: none !important; }
body.rol-admin .solo-admin { display: revert !important; }
body.rol-admin .solo-admin.eg-flex { display: flex !important; }

.eg-salir { opacity: .55; font-size: 10px !important; }
.nav-drawer .eg-salir { font-size: 18px !important; font-family: 'Jost', sans-serif !important; letter-spacing: 4px; text-transform: uppercase; color: #9e8f85 !important; }

/* ═══ GALERÍA: tarjetas de video y herramientas ═══ */
.gallery-card video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gallery-video-sello {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.4); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; pointer-events: none;
}
.gcard-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.gcard-tools button {
  width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); color: #2a1e16; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .2s, background .2s;
}
.gcard-tools button:hover { transform: scale(1.12); background: #fff; }

/* Tarjeta "subir recuerdo" (solo admin) */
.gallery-add {
  border: 1.5px dashed rgba(158,143,133,.5); border-radius: 12px;
  background: rgba(255,255,255,.5); cursor: pointer; aspect-ratio: 4/3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #9e8f85; transition: border-color .3s, background .3s, transform .3s;
}
.gallery-add:hover { border-color: #e5989b; background: rgba(255,255,255,.85); transform: translateY(-3px); }
.gallery-add .mas { font-size: 38px; font-weight: 200; line-height: 1; color: #e5989b; }
.gallery-add span { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.gallery-vacia {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; color: #9e8f85;
}

/* Botones discretos de admin bajo el pastel / mensaje */
.eg-btn-mini {
  font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 9px 20px; margin-top: 14px; cursor: pointer;
  color: #9e8f85; background: transparent; border: 1px solid rgba(158,143,133,.4); border-radius: 100px;
  transition: color .25s, border-color .25s;
}
.eg-btn-mini:hover { color: #e5989b; border-color: #e5989b; }

/* ═══ VISOR ESPACIAL ═══ */
.visor {
  position: fixed; inset: 0; z-index: 100001;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 20px;
}
.visor.open { display: flex; }
.visor-fondo {
  position: absolute; inset: 0; cursor: pointer;
  background: radial-gradient(ellipse 80% 60% at 50% 42%, #241a1b 0%, #0c0809 72%);
  animation: visorFondo .45s ease forwards;
}
@keyframes visorFondo { from { opacity: 0; } to { opacity: 1; } }

.visor-escena { position: relative; z-index: 2; perspective: 1300px; animation: visorLevitar 7s ease-in-out infinite; }
@keyframes visorLevitar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.visor-tilt { position: relative; transform-style: preserve-3d; transition: transform .18s ease-out; animation: visorEntra .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes visorEntra { from { opacity: 0; transform: translateY(34px) scale(.92); } to { opacity: 1; transform: none; } }

/* luz trasera: el propio medio, difuminado detrás */
.visor-glow { position: absolute; inset: 0; z-index: 0; filter: blur(64px) saturate(1.7) brightness(1.2); transform: scale(1.22); opacity: .9; pointer-events: none; animation: visorRespira 7s ease-in-out infinite; }
.visor-glow img, .visor-glow video { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes visorRespira { 0%, 100% { opacity: .75; } 50% { opacity: .95; } }

.visor-media { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); }
.visor-media img, .visor-media video { display: block; max-width: min(86vw, 900px); max-height: 62vh; width: auto; height: auto; }

.visor-info { position: relative; z-index: 2; text-align: center; margin-top: 36px; max-width: 620px; animation: visorEntra .6s .12s cubic-bezier(.22,1,.36,1) both; }
.visor-titulo { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 3.4vw, 32px); font-weight: 300; color: #fdf7f2; letter-spacing: .5px; }
.visor-desc { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.8; color: rgba(253,247,242,.6); margin-top: 10px; }
.visor-cerrar {
  position: absolute; top: 22px; right: 24px; z-index: 5;
  width: 46px; height: 46px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px); color: rgba(255,255,255,.85);
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.visor-cerrar:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }

@media (max-width: 600px) {
  .visor-media img, .visor-media video { max-width: 92vw; max-height: 54vh; }
  .visor-info { margin-top: 24px; }
}

/* ═══ MODAL GENÉRICO (admin) ═══ */
.eg-modal {
  position: fixed; inset: 0; z-index: 100002;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,14,10,.5); backdrop-filter: blur(6px);
  animation: visorFondo .3s ease forwards;
}
.eg-modal-caja {
  background: #fff; border-radius: 18px; padding: 30px 28px;
  width: min(94vw, 470px); max-height: 86vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  animation: visorEntra .4s cubic-bezier(.22,1,.36,1) both;
}
.eg-modal-caja h3 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: #2a1e16; margin-bottom: 20px; }
.eg-modal-caja label {
  display: block; font-family: 'Jost', sans-serif; font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase; color: #9e8f85; margin: 14px 0 6px;
}
.eg-modal-caja input[type="text"], .eg-modal-caja textarea {
  width: 100%; padding: 11px 14px; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 14px;
  color: #2a1e16; background: #faf6f1; border: 1px solid rgba(158,143,133,.3); border-radius: 10px;
  outline: none; resize: vertical; transition: border-color .25s;
}
.eg-modal-caja input:focus, .eg-modal-caja textarea:focus { border-color: #e5989b; }
.eg-modal-caja input[type="file"] { width: 100%; font-family: 'Jost', sans-serif; font-size: 13px; color: #9e8f85; padding: 8px 0; }
.eg-modal-progreso { height: 5px; border-radius: 100px; background: #f0e8e0; margin-top: 18px; overflow: hidden; }
.eg-modal-progreso div { height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, #e5989b, #e8b4a8); transition: width .25s ease; }
.eg-modal-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.eg-btn, .eg-btn-sec {
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 11px 26px; border-radius: 100px; cursor: pointer; border: none; transition: transform .2s, opacity .2s;
}
.eg-btn { color: #fff; background: linear-gradient(135deg, #e5989b, #e8b4a8); box-shadow: 0 6px 20px rgba(229,152,155,.35); }
.eg-btn:hover { transform: translateY(-1px); }
.eg-btn:disabled { opacity: .55; transform: none; cursor: default; }
.eg-btn-sec { color: #9e8f85; background: transparent; border: 1px solid rgba(158,143,133,.35); }
.eg-modal-error { font-family: 'Jost', sans-serif; font-size: 12px; color: #c0605f; margin-top: 12px; min-height: 14px; }

/* ═══ AVISO FLOTANTE ═══ */
.eg-aviso {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 16px); z-index: 100003;
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; background: rgba(42,30,22,.92); padding: 12px 26px; border-radius: 100px;
  opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.eg-aviso-visible { opacity: 1; transform: translate(-50%, 0); }