/* Estilos de marca Zona 3D que complementan a Tailwind */

[x-cloak] { display: none !important; }

.font-display { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }

/* Botones */
.btn-primary,
.btn-secondary {
  display: inline-block;
  border-radius: 0.5rem;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color .15s, color .15s, border-color .15s;
  cursor: pointer;
}
.btn-primary { background: #206eea; color: #fff; border: 1px solid #206eea; }
.btn-primary:hover { background: #1857c0; border-color: #1857c0; }
.btn-secondary { background: #fff; color: #0b1c3a; border: 1px solid #cbd5e1; }
.btn-secondary:hover { border-color: #0b1c3a; }

/* Formularios: aplica a los formularios propios y a los de django-allauth */
.zform p,
.zform .field { margin-bottom: 1rem; }
.zform label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; color: #0b1c3a; }
.zform input[type="text"],
.zform input[type="email"],
.zform input[type="password"],
.zform input[type="tel"],
.zform input[type="number"],
.zform input[type="date"],
.zform input[type="url"],
.zform input[type="search"],
.zform select,
.zform textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  background: #fff;
}
.zform input:focus,
.zform select:focus,
.zform textarea:focus { outline: 2px solid #206eea; outline-offset: 0; border-color: #206eea; }
.zform input[type="checkbox"] { margin-right: 0.4rem; }
.zform label:has(input[type="checkbox"]),
.zform label:has(input[type="radio"]) { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; }
.zform input[type="radio"] { margin-right: 0.2rem; }
.zform fieldset legend { font-size: 1.05rem; }
.zform .helptext,
.zform .help-text,
.zform span.helptext { display: block; font-size: 0.8rem; color: #64748b; margin-top: 0.3rem; }
.zform .helptext ul { padding-left: 1rem; list-style: disc; }
.zform .errorlist { color: #b91c1c; font-size: 0.85rem; margin: 0.3rem 0; list-style: none; padding: 0; }
.zform button[type="submit"] {
  width: 100%;
  background: #206eea;
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
  font-weight: 600;
  cursor: pointer;
}
.zform button[type="submit"]:hover { background: #1857c0; }

/* Contenido de páginas de cuenta que no tienen plantilla propia */
.auth-content h1 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.6rem; color: #0b1c3a; margin-bottom: 1rem; }
.auth-content p { margin-bottom: 0.9rem; }
.auth-content a { color: #206eea; }
.auth-content form { margin-top: 1rem; }

/* ---------- Animaciones ---------- */
@keyframes z-pop {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes z-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Entrada escalonada del mosaico y del texto de la portada */
.z-tile { animation: z-pop .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 70ms + 150ms); }
.z-hero-text > * { animation: z-pop .7s cubic-bezier(.2, .7, .2, 1) both; }
.z-hero-text > *:nth-child(2) { animation-delay: .08s; }
.z-hero-text > *:nth-child(3) { animation-delay: .16s; }
.z-hero-text > *:nth-child(4) { animation-delay: .24s; }

/* Entrada de tarjetas de la galería (también cuando HTMX trae resultados nuevos) */
.z-enter { animation: z-pop .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(min(var(--d, 0), 12) * 45ms); }

/* Carrusel de diseños en la portada: se ve solo la diapositiva activa */
.z-slide { opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.z-slide.is-on { opacity: 1; pointer-events: auto; }

/* Íconos que flotan suavemente */
.z-float { animation: z-float 4s ease-in-out infinite; }
.z-tile:nth-child(even) .z-float { animation-delay: -2s; }

/* Aparece al bajar con la rueda (lo activa un script en base.html) */
.js .z-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--d, 0) * 120ms); }
.js .z-reveal.is-visible { opacity: 1; transform: none; }

/* Tarjetas que se elevan al pasar el mouse */
.z-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .6s ease; }
.z-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(11, 28, 58, .35); }

/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .z-tile, .z-hero-text > *, .z-float, .z-enter { animation: none !important; }
  .js .z-reveal { opacity: 1; transform: none; transition: none; }
  .z-card:hover { transform: none; }
}

/* Textos largos (términos, privacidad, preguntas frecuentes) */
.z-prose { color: #334155; line-height: 1.7; }
.z-prose h2 { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-weight: 800; color: #0b1c3a;
              font-size: 1.25rem; margin: 2rem 0 .5rem; }
.z-prose p { margin: 0 0 .9rem; }
.z-prose ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 .9rem; }
.z-prose li { margin-bottom: .3rem; }
.z-prose a { color: #206eea; text-decoration: underline; }
.z-prose strong { color: #0b1c3a; }
.z-pending { background: #fef3c7; color: #92400e; border-radius: .25rem; padding: 0 .3rem; }

/* Menú: subrayado animado y sección activa */
.z-navlink { position: relative; padding: 0.25rem 0; color: #334155; font-weight: 500; transition: color .2s ease; }
.z-navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 2px; border-radius: 2px;
                    background: #206eea; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.z-navlink:hover { color: #206eea; }
.z-navlink:hover::after, .z-navlink.is-active::after { transform: scaleX(1); }
.z-navlink.is-active { color: #0b1c3a; }
@media (prefers-reduced-motion: reduce) { .z-navlink::after { transition: none; } }
/* Con el menú fijo arriba, los saltos a una sección (#secciones) no quedan tapados */
[id] { scroll-margin-top: 5rem; }
/* Números alineados en tablas y montos */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Botones con ícono: brand.css define los botones como inline-block; con .inline-flex el ícono queda al lado del texto */
.btn-primary.inline-flex, .btn-secondary.inline-flex { display: inline-flex; }

/* Zona para soltar archivos (static/js/soltar.js) */
[data-soltar] { border: 2px dashed transparent; border-radius: 0.75rem; transition: border-color .15s, background-color .15s; }
[data-soltar].is-soltando { border-color: #206eea; background-color: rgba(32, 110, 234, .06); }

/* ---------- Menús «Zona 3D» y «Comunidad» (partials/nav.html) ---------- */
/* El vidrio del encabezado va en ::before: si lo pusiéramos en el header mismo, el desplegable
   no podría desenfocar la página que tiene detrás. */
.z-header { position: sticky; }
.z-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.z-fly { position: relative; }
.z-fly-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .7rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 600; color: #0b1c3a;
  transition: background-color .15s, color .15s;
}
.z-fly-btn:hover, .z-fly-btn[aria-expanded="true"] { background: rgba(32, 110, 234, .1); color: #206eea; }
.z-fly-btn.is-active { color: #206eea; box-shadow: inset 0 -2px 0 #206eea; border-radius: .5rem .5rem 0 0; }

.z-fly-panel {
  position: absolute; top: calc(100% + .5rem); width: 22rem; z-index: 50;
  padding: .5rem; border-radius: .9rem;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(203, 213, 225, .8);
  box-shadow: 0 18px 40px -12px rgba(11, 28, 58, .25);
}
/* puente invisible para que el mouse no "caiga" entre el botón y el panel */
.z-fly-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }

.z-fly-anim { transition: opacity .22s ease, transform .22s ease; }
.z-fly-from { opacity: 0; transform: translateY(-8px); }
.z-fly-to { opacity: 1; transform: translateY(0); }

.z-fly-title {
  padding: .35rem .6rem .25rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #94a3b8;
}
.z-fly-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .55rem .6rem; border-radius: .6rem; font-size: .875rem;
  transition: background-color .15s;
}
.z-fly-item[href]:hover, .z-fly-item:focus-visible { background: rgba(32, 110, 234, .1); outline: none; }
.z-fly-item.is-active { background: rgba(32, 110, 234, .08); }
.z-fly-item.is-active .z-fly-icon { background: #206eea; color: #fff; }
.z-fly-item[aria-disabled="true"] { cursor: default; opacity: .75; }
.z-fly-item.is-locked { opacity: .7; }
.z-fly-icon {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: .55rem; background: rgba(32, 110, 234, .1); color: #206eea;
}
.z-badge-pro, .z-badge-soon {
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; line-height: 1;
  padding: .2rem .4rem; border-radius: 999px;
}
.z-badge-pro { background: linear-gradient(135deg, #206eea, #0b1c3a); color: #fff; }
.z-badge-soon { background: #f1f5f9; color: #64748b; text-transform: uppercase; }
.z-fly-cta {
  display: block; margin: .35rem .2rem .15rem; padding: .55rem .7rem; border-radius: .6rem;
  background: #0b1c3a; color: #fff; font-size: .8rem; font-weight: 600; text-align: center;
  transition: background-color .15s;
}
.z-fly-cta:hover { background: #206eea; }

/* Cortina del celular */
.z-drawer { background: #fff; box-shadow: -12px 0 40px -10px rgba(11, 28, 58, .35); }
.z-tab { padding: .45rem; border-radius: .4rem; color: #475569; transition: background-color .15s, color .15s; }
.z-tab.is-active { background: #fff; color: #206eea; box-shadow: 0 1px 3px rgba(11, 28, 58, .12); }

@media (prefers-reduced-motion: reduce) {
  .z-fly-anim { transition: none; }
}

/* ---------- Portada: lo de Zonero Pro bloqueado para quien no es Pro (core/_home_card.html) ---------- */
.z-badge-lg { font-size: .8rem; padding: .3rem .7rem; }
.z-locked .z-locked-body { filter: blur(2.5px) saturate(.7); opacity: .75; transition: filter .25s, opacity .25s; }
.z-locked:hover .z-locked-body { filter: blur(1px) saturate(.9); opacity: .9; }
.z-locked-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: rgba(11, 28, 58, .9); color: #fff; box-shadow: 0 8px 24px -8px rgba(11, 28, 58, .5);
}
.z-locked:hover .z-locked-tag { background: #206eea; }
@media (prefers-reduced-motion: reduce) { .z-locked .z-locked-body { transition: none; } }

/* ---------- Paseo guiado (partials/paseo.html, Driver.js) ---------- */
.driver-popover.z-tour { border-radius: 1rem; padding: 1.1rem 1.2rem; max-width: 340px; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; color: #334155; }
.driver-popover.z-tour .driver-popover-title { font-family: "Montserrat", ui-sans-serif, sans-serif; font-weight: 800; font-size: 1.1rem; color: #0b1c3a; }
.driver-popover.z-tour .driver-popover-description { font-size: .9rem; line-height: 1.45; }
.driver-popover.z-tour .driver-popover-progress-text { color: #94a3b8; font-size: .75rem; }
.driver-popover.z-tour .driver-popover-footer button { border-radius: .5rem; padding: .35rem .8rem; font-size: .8rem; text-shadow: none; border: 1px solid #cbd5e1; background: #fff; color: #0b1c3a; }
.driver-popover.z-tour .driver-popover-footer .driver-popover-next-btn { background: #206eea; border-color: #206eea; color: #fff; }
.driver-popover.z-tour .driver-popover-footer .driver-popover-next-btn:hover { background: #1857c0; }
.z-tour-cta { display: inline-block; margin-top: .6rem; padding: .4rem .8rem; border-radius: .5rem; background: #0b1c3a; color: #fff !important; font-weight: 600; text-decoration: none; }
.z-tour-cta:hover { background: #206eea; }

/* Títulos de los menús con la letra del logo (Montserrat extra negrita, en mayúsculas) */
.z-logo-txt { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.z-fly-btn .z-logo-txt { font-size: .82rem; }