/* Layout publico (sin sidebar de dashboard), usado por layouts/app_v2_public.blade.php
   y compartido por rastreo, cobertura, puntos-recoleccion y calculadora. */

.v2-public-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.v2-public-topbar {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.v2-public-brand {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--tx-strong);
  letter-spacing: -.02em;
}

.v2-public-brand-img {
  width: auto;
  max-width: 100%;
  max-height: 32px;
  height: auto;
}

.v2-public-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Contenido: por defecto se comporta igual que .page (layout con sidebar) para que
   los componentes compartidos (mapas, formularios) luzcan igual en ambos layouts.
   Paginas que necesiten un ancho distinto (p.ej. rastreo) lo sobreescriben en su
   propio css, cargado despues via @section('styles'). */
.v2-public-page {
  flex: 1;
  width: 100%;
  padding: 36px 40px;
}

@media (max-width: 780px) {
  .v2-public-page { padding: 24px 20px 100px; }
}

@media (max-width: 480px) {
  .v2-public-page { padding: 20px 16px 90px; }
}

/* Menu de navegacion (Cotizar envio, Rastrear envio, Registro nuevos clientes) con iconos */
.v2-public-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.v2-public-navlink {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-base);
  list-style: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.v2-public-navlink:hover { background: var(--bg-hover); color: var(--tx-strong); }

.v2-public-navlink.active { color: var(--orange-d); }

/* Onboarding: boton de Ayuda por WhatsApp */

/* Iconos del menu de arriba: mismos de la barra de abajo, un poco mas chicos */
.v2-public-navlink .v2-ico,
.v2-public-login .v2-ico {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .v2-public-navlink { padding: 8px; font-size: 12px; }
}

/* En celular el menu e "Iniciar sesion" se van a la barra de abajo (partials/v2/public_mobile_nav) */
@media (max-width: 780px) {
  .v2-public-nav,
  .v2-public-login { display: none; }
}


/* Barra de abajo (celular): se esconde al bajar y regresa al subir (script en public_mobile_nav) */
.v2-public-shell .mobile-nav {
  transition: transform .25s ease;
}
.v2-public-shell .mobile-nav.is-hidden {
  transform: translateY(100%);
}
@media (prefers-reduced-motion: reduce) {
  .v2-public-shell .mobile-nav { transition: none; }
}
/* 5 opciones (con Cobertura): repartir el ancho parejo para que quepan en celulares chicos */
.v2-public-shell .mobile-nav .mn-tab {
  flex: 1 1 0; min-width: 0; padding: 4px 2px;
}
/* Barra de precio flotante (.xp-bar, cotizador): va encima del menu y baja con el cuando se esconde */
@media (max-width: 780px) {
  .v2-public-shell .xp-bar { transition: bottom .25s ease, padding-bottom .25s ease; }
  body.mn-is-hidden .v2-public-shell .xp-bar { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-public-shell .xp-bar { transition: none; }
}
/* Adornos como en registro y rastreo (solo computadora, solo vistas publicas): anillo arriba a la derecha
   y cuadricula de puntos abajo a la izquierda. Van detras de las tarjetas (z-index -1 con isolation) */
@media (min-width: 781px) {
  .v2-public-shell .xp-page.is-public,
  .v2-public-shell .cov { position: relative; isolation: isolate; }
  .v2-public-shell .xp-page.is-public::before,
  .v2-public-shell .xp-page.is-public::after,
  .v2-public-shell .cov::before,
  .v2-public-shell .cov::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
  .v2-public-shell .xp-page.is-public::before,
  .v2-public-shell .cov::before {
    width: 120px; height: 120px; border: 14px solid rgba(var(--orange-rgb), .22); border-radius: 50%;
  }
  .v2-public-shell .xp-page.is-public::after,
  .v2-public-shell .cov::after {
    width: 76px; height: 76px; opacity: .45;
    background: radial-gradient(circle, var(--orange) 0 3.5px, transparent 4px) 0 0 / 16px 16px;
  }
  /* Cotizar: en el margen, junto al titulo y abajo a la izquierda */
  .v2-public-shell .xp-page.is-public::before { top: -24px; right: -40px; }
  .v2-public-shell .xp-page.is-public::after { left: -96px; bottom: 24px; }
  /* Cobertura: a la derecha del titulo (arriba del mapa) y bajo el buscador */
  .v2-public-shell .cov::before { top: -30px; right: 24px; }
  .v2-public-shell .cov::after { left: 0; bottom: 24px; }
}

/* Celular: titulo de Cotizar y Cobertura mas grande y con aire arriba, como en Rastrear */
@media (max-width: 780px) {
  .v2-public-shell .xp-page.is-public .xp-hero,
  .v2-public-shell .cov-head { padding-top: 16px; }
  .v2-public-shell .xp-page.is-public .xp-hero .t-h1,
  .v2-public-shell .cov-head .t-h1 { font-size: 42px; line-height: 1.15; margin-bottom: 10px; }
}

@media (max-width: 359px) {
  .v2-public-shell .xp-page.is-public .xp-hero .t-h1,
  .v2-public-shell .cov-head .t-h1 { font-size: 34px; }
  .v2-public-shell .cov-head .t-h1 { font-size: 30px; }
}

/* Cobertura tiene titulo mas largo: un poco mas chico para que no ocupe 3 renglones */
@media (min-width: 360px) and (max-width: 780px) {
  .v2-public-shell .cov-head .t-h1 { font-size: 36px; }
}

@media (min-width: 360px) and (max-width: 389px) {
  .v2-public-shell .cov-head .t-h1 { font-size: 33px; }
}

/* Computadora: titulo de Cotizar y Cobertura del mismo tamaño y aire que el de Registro */
@media (min-width: 781px) {
  .v2-public-shell .xp-page.is-public .xp-hero,
  .v2-public-shell .cov-head { padding-top: 24px; }
  .v2-public-shell .xp-page.is-public .xp-hero { margin-bottom: 28px; }
  .v2-public-shell .cov > .cov-head { margin-bottom: 12px; }
  .v2-public-shell .xp-page.is-public .xp-hero .t-h1,
  .v2-public-shell .cov-head .t-h1 { font-size: 48px; line-height: 1.04; letter-spacing: -.035em; margin-bottom: 14px; }
  .v2-public-shell .xp-page.is-public .xp-hero .t-sub,
  .v2-public-shell .cov-head .t-sub { max-width: 640px; font-size: 18px; line-height: 1.45; }
  .v2-public-shell .xp-page.is-public .xp-hero .xp-switch { margin-top: 22px; }
}

/* Cajita naranja inclinada con lineas de velocidad (la misma del Registro), en Acceder, Rastrear, Cotizar y Cobertura.
   Solo celular y sin sesion: en computadora y adentro de la app no se ve */
.v2-mhead-art {
  display: none;
}

@media (max-width: 780px) {
  .v2-public-shell .v2-mhead,
  .v2-public-shell .v2-msub {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .v2-public-shell .v2-mhead-text,
  .v2-public-shell .v2-msub .t-sub {
    flex: 1;
    min-width: 0;
  }
  .v2-public-shell .v2-mhead-art {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-right: 4px;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffd3a8, #f7a35c);
    box-shadow: 0 14px 30px rgba(var(--orange-d-rgb), .3);
    transform: rotate(-8deg);
    color: var(--tx-white);
    font-size: 32px;
  }
  .v2-public-shell .v2-mhead-art::before,
  .v2-public-shell .v2-mhead-art::after {
    content: '';
    position: absolute;
    left: -22px;
    height: 5px;
    border-radius: 5px;
    background: var(--orange);
    opacity: .55;
  }
  .v2-public-shell .v2-mhead-art::before { top: 26px; width: 16px; }
  .v2-public-shell .v2-mhead-art::after { top: 40px; width: 11px; left: -17px; }
  /* Junto al subtitulo (Cotizar y Cobertura) va mas chica para no empujar el buscador */
  .v2-public-shell .v2-mhead-art--sm {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 24px;
    transform: rotate(8deg);
  }
  .v2-public-shell .v2-mhead-art--sm::before { top: 19px; }
  .v2-public-shell .v2-mhead-art--sm::after { top: 31px; }
  /* Acceder y Rastrear: las palomitas pasan a cuadritos con icono, como los beneficios del Registro */
  .v2-public-shell .v2-login-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
  }
  .v2-public-shell .v2-login-checks li {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border-radius: var(--r-lg);
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--orange) 10%, var(--border));
    box-shadow: 0 6px 16px rgba(var(--orange-d-rgb), .08);
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
  }
  .v2-public-shell .v2-login-checks li::before {
    display: none;
  }
  .v2-public-shell .v2-login-checks li i {
    display: block;
    font-size: 20px;
    color: var(--orange);
  }
  /* El formulario en tarjeta blanca con sombra naranja, igual que el del Registro */
  .v2-public-shell .v2-login form {
    padding: 22px 18px 20px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--orange) 12%, var(--border));
    border-radius: var(--r-xl);
    box-shadow: 0 18px 44px rgba(var(--orange-d-rgb), .12);
  }
}

@media (max-width: 359px) {
  .v2-public-shell .v2-mhead-art { width: 60px; height: 60px; font-size: 26px; border-radius: 18px; }
  .v2-public-shell .v2-mhead-art--sm { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
  .v2-public-shell .v2-login-checks li { font-size: 11px; padding: 10px 2px 8px; }
}

/* Borde calido y sombra naranja difuminada (la del form del Registro) en las tarjetas de Cotizar y Cobertura,
   en celular y computadora */
.v2-public-shell .xp-page.is-public .flow-card,
.v2-public-shell .xp-page.is-public .side-card,
.v2-public-shell .cov .card {
  border-color: color-mix(in srgb, var(--orange) 12%, var(--border));
  box-shadow: 0 18px 44px rgba(var(--orange-d-rgb), .06);
}

/* Computadora: la caja de Acceder y Rastrear con el mismo efecto */
@media (min-width: 781px) {
  .v2-public-shell .v2-login {
    border-color: color-mix(in srgb, var(--orange) 12%, var(--border));
    box-shadow: 0 24px 60px rgba(var(--orange-d-rgb), .14);
  }
}