/* nforms-core.css
   Núcleo mínimo y seguro (MVP visual).
   Objetivo: unificar SOLO colores de fondo/tarjeta y bordes, sin tocar layout.

   ✅ Sin reglas de layout
   ✅ Sin overrides agresivos
   ✅ Solo tokens + alias de compatibilidad
*/

:root{
  /* Base (app) */
  --nf-bg: #ffffff;
  --nf-card: #f5f5f5;
  --nf-border: #888a90;
  --nf-border-w: 1px;

  /* Radios (solo como token; no se aplica automáticamente) */
  --nf-radius-card: 12px;
  --nf-radius-control: 10px;

  /* Texto (token; no se aplica automáticamente) */
  --nf-text: #1f2937;
  --nf-muted: #6b7280;

  /* Primario (token; no se aplica automáticamente) */
  --nf-primary: #355c9a;
}

/* Global sizing model: prevents padding/border from inflating declared widths */
*, *::before, *::after{ box-sizing: border-box; }


/* =========================
   Botones (fuente de verdad)
   Objetivo: que un cambio aquí afecte a toda la app.
   - .nf-btn: botón nforms
   - Override global Bootstrap: .btn-primary
   ========================= */

:root{
  /* Botones (tokens) */
  --nf-btn-pad-y: 10px;
  --nf-btn-pad-x: 14px;
  --nf-btn-font-w: 600;
  --nf-btn-font-size: 14px;
  --nf-btn-line-h: 1;

  --nf-btn-border: #cbd5e1;
  --nf-btn-bg: #ffffff;
  --nf-btn-text: var(--nf-text);

  /* Paleta de acciones */
  --nf-btn-primary-bg: var(--nf-primary);
  --nf-btn-primary-border: var(--nf-primary);
  --nf-btn-primary-text: #ffffff;

  --nf-btn-secondary-bg: #0f3a66;
  --nf-btn-secondary-border: #0f3a66;
  --nf-btn-secondary-text: #ffffff;

  --nf-btn-neutral-bg: #6b7280;
  --nf-btn-neutral-border: #6b7280;
  --nf-btn-neutral-text: #ffffff;

  --nf-btn-danger-bg: #b91c1c;
  --nf-btn-danger-border: #b91c1c;
  --nf-btn-danger-text: #ffffff;

  /* Ghost (discreto) */
  --nf-btn-ghost-bg: transparent;
  --nf-btn-ghost-border: var(--nf-border);
  --nf-btn-ghost-text: #111827;
  --nf-btn-ghost-font-w: 400;

  /* Elevación (para botones flotantes) */
  --nf-btn-shadow: 0 6px 18px rgba(0,0,0,.18);
  --nf-btn-shadow-hover: 0 8px 22px rgba(0,0,0,.22);

}

/* Base (nforms)
   Nota: NO usamos :where() aquí porque tiene especificidad 0 y se deja pisar
   fácilmente por reglas locales (por ejemplo, button{}, .row button{}, etc.). */
.nf-btn{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--nf-btn-pad-y) var(--nf-btn-pad-x);
  border-radius: var(--nf-radius-control);
  border: 1px solid var(--nf-btn-border);
  background: var(--nf-btn-bg);
  color: var(--nf-btn-text);
  font-weight: var(--nf-btn-font-w);
  font-size: var(--nf-btn-font-size);
  line-height: var(--nf-btn-line-h);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.nf-btn:hover{ filter: brightness(0.97); }

.nf-btn:active{ transform: translateY(0.5px); }

.nf-btn:focus{ outline: none; }

.nf-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.nf-btn[disabled],
.nf-btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* =========================
   Variantes (nforms)
   - primario: acción principal
   - secundario: acción importante alternativa
   - neutro: navegación/volver
   - peligro: eliminar
   - ghost: discreto
   ========================= */

/* Primario */
.nf-btn--primary{
  background: var(--nf-btn-primary-bg);
  border-color: var(--nf-btn-primary-border);
  color: var(--nf-btn-primary-text);
}
.nf-btn--primary:hover{ filter: brightness(0.94); }

/* Secundario */
.nf-btn--secondary{
  background: var(--nf-btn-secondary-bg);
  border-color: var(--nf-btn-secondary-border);
  color: var(--nf-btn-secondary-text);
}
.nf-btn--secondary:hover{ filter: brightness(0.94); }

/* Neutro */
.nf-btn--neutral{
  background: var(--nf-btn-neutral-bg);
  border-color: var(--nf-btn-neutral-border);
  color: var(--nf-btn-neutral-text);
}
.nf-btn--neutral:hover{ filter: brightness(0.94); }

/* Peligro */
.nf-btn--danger{
  background: var(--nf-btn-danger-bg);
  border-color: var(--nf-btn-danger-border);
  color: var(--nf-btn-danger-text);
}
.nf-btn--danger:hover{ filter: brightness(0.94); }

/* Ghost (discreto, sin relleno) */
.nf-btn--ghost{
  background: var(--nf-btn-ghost-bg);
  border-color: var(--nf-btn-ghost-border);
  color: var(--nf-btn-ghost-text);
  font-weight: var(--nf-btn-ghost-font-w);
}
.nf-btn--ghost:hover{ filter: brightness(0.98); }

/* Modificador: apariencia flotante (no posiciona, solo look) */
.nf-btn--floating{
  border-radius: 999px;
  box-shadow: var(--nf-btn-shadow);
}
.nf-btn--floating:hover{
  box-shadow: var(--nf-btn-shadow-hover);
}

.logo-box{
  width: 110px;
  height: 110px;
  min-width: 110px;
  aspect-ratio: 1 / 1;
  flex: 0 0 110px;
  display: flex;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.logo-box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Contenedor general de página */
.nf-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
}

/* Variante full width (para encabezados o barras que deben ocupar toda la pantalla) */
.nf-page--full{
  max-width: none;
}

/* Contenedor interno para alinear contenido al mismo ancho que .nf-page */
.nf-container{
  max-width: 1200px;
  margin: 0 auto;
}
  
/* En móvil, respira igual que el resto */
@media (max-width: 768px){
  .nf-container{ padding: 0 12px; }
}

/* Header como tarjeta */
.nf-header-card{
  margin-bottom: 20px;
}

/* Contenido interno del header */
.nf-header-inner{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
}

/* Si el header vive dentro de .nf-page--full, centra el contenido interno */
.nf-page--full .nf-header-inner{
  max-width: 1200px;
  margin: 0 auto;
}

/* Header reutilizable (logo+marca | titulo | widgets) */
.nf-page-header{
  font-family: "Corbel", "Segoe UI", Roboto, Arial, sans-serif;
}

.nf-page-header__inner{
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 16px;
}
.nf-page-header__left{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nf-page-header__brand{
  min-width: 0;
}
.nf-page-header__company{
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 700;
  color: #1f4877;
}
.nf-page-header__slogan{
  margin: 2px 0 0;
  font-size: 26px;
  line-height: 1.05;
  color: #5d6778;
  font-weight: 400;
}
.nf-page-header__center{
  justify-self: center;
  text-align: center;
}
.nf-page-header__center-extra{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.nf-page-header__right{
  justify-self: end;
}

.nf-page-header .header-clock{
  font-family: "Corbel", "Segoe UI", Roboto, Arial, sans-serif;
}

.payment-alert-banner{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(720px, 72vw);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #FCA5A5;
  background: #FEF2F2;
  color: #7F1D1D;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}
.payment-alert-banner__link{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #B91C1C;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.payment-alert-banner__link:hover{
  background: #991B1B;
}

/* Título */
.nf-title{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--nf-text);
}

/* Tarjeta base (aplica tokens sin tocar layout global) */
.nf-card{
  background: var(--nf-card);
  border: var(--nf-border-w) solid var(--nf-border);
  border-radius: var(--nf-radius-card);
}

/* Base global: solo color de fondo y color de texto (sin layout) */
html, body{
  background: var(--nf-bg);
  color: var(--nf-text);
}

.header-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid #12141700;
  border-radius: 10px;
  background: rgba(147, 149, 149, 0);
  box-shadow: 0 0px 0 rgba(20, 32, 52, 0.868);
  color: #29323d;
  letter-spacing: 0.2px;
}
.header-clock .clock-date {
  font-weight: 500;
  font-size: 30px !important;
  line-height: 1.1;
  color: #0f3a66; /* fecha: color independiente del reloj */
}
.header-clock .clock-time {
  font-weight: 500;
  font-size: 20px !important;
  line-height: 1.1;
  opacity: .75;
}
@media (max-width: 700px){
  .header-clock { display: none; }
}
@media (max-width: 900px){
  .nf-page-header__company{
    font-size: 30px;
  }
  .nf-page-header__slogan{
    font-size: 20px;
  }
  .nf-page-header__inner{
    grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 1fr);
  }
}
@media (max-width: 768px){
  .nf-page-header__inner{
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .nf-page-header__left{
    gap: 0;
  }
  .nf-page-header__brand,
  .nf-page-header__right{
    display: none;
  }
  .nf-page-header__center{
    justify-self: start;
    text-align: left;
  }
  .nf-page-header__center-extra{
    justify-content: flex-start;
  }
  .payment-alert-banner{
    max-width: calc(100vw - 104px);
    flex-direction: column;
    align-items: flex-start;
  }
  .nf-page-header__center .nf-title{
    font-size: 33.6px;
    line-height: 1.12;
  }
}

/* =========================================================
   nforms-core: Mini sidebar (collapsed strip) + Preferencias modal
   Uso:
     - <aside class="nf-mini-sidebar">...</aside>
     - <body class="nf-has-mini-sidebar">
     - Preferencias usa #personalizacion-wrap y #prefBackdrop (lo crea pref_panel.js)
   ========================================================= */

   :root{
    --nf-mini-sidebar-w: 80px;
    --nf-mini-sidebar-bg: #0f172a;
  }
  
  body.nf-has-mini-sidebar{
    padding-left: var(--nf-mini-sidebar-w, 64px);
  }
  
  .nf-mini-sidebar{
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--nf-mini-sidebar-w, 64px);
    background: var(--nf-mini-sidebar-bg);
    border-right: 1px solid rgba(255,255,255,0.08);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    gap: 10px;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  }
  
  .nf-mini-sidebar a,
  .nf-mini-sidebar button{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: #e5e7eb;
    text-decoration: none;
    cursor: pointer;
  }
  
  .nf-mini-sidebar a:hover,
  .nf-mini-sidebar button:hover{
    background: rgba(255,255,255,0.10);
  }
  
  .nf-mini-sidebar a:active,
  .nf-mini-sidebar button:active{
    transform: translateY(1px);
  }
  
  .nf-mini-sidebar .nf-mini-logo img{
    width: 22px;
    height: 22px;
    display: block;
    filter: brightness(0) invert(1);
  }
  
  .nf-mini-sidebar .nf-mini-sep{
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 2px 0;
  }
  
  .nf-mini-sidebar i{
    font-size: 20px;
    line-height: 1;
    display: block;
  }

  /* Variante: mini sidebar con herramientas tipo "colapsado" (icono + abreviatura) */
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool{
    width: 100%;
    height: auto;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 8px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool:hover{
    background: transparent;
    opacity: .95;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool.is-current{
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    opacity: 1;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool:active{
    transform: none;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool i{
    font-size: 26px;
    line-height: 1;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool i svg{
    width: 26px !important;
    height: 26px !important;
    display: block;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool::after{
    content: attr(data-short);
    display: block;
    font-size: 10px;
    line-height: 1.1;
    color: #b7c7cf;
    letter-spacing: .2px;
    text-align: center;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-tool.is-current::after{
    color: #eef6ff;
    font-weight: 600;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-pref{
    width: 100%;
    height: auto;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 8px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 2px;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-pref:hover{
    background: transparent;
    opacity: .95;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-pref:active{
    transform: none;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-pref i{
    font-size: 26px;
    line-height: 1;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    margin: 0 !important;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-pref i svg{
    width: 26px !important;
    height: 26px !important;
    display: block;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-pref::after{
    content: attr(data-short);
    display: block;
    font-size: 10px;
    line-height: 1.1;
    color: #b7c7cf;
    letter-spacing: .2px;
    text-align: center;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-logo{
    width: 100%;
    height: auto;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 8px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-logo img{
    width: 26px;
    height: 26px;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-logo::after{
    content: attr(data-short);
    display: block;
    font-size: 10px;
    line-height: 1.1;
    color: #b7c7cf;
    letter-spacing: .2px;
    text-align: center;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-logo:hover{
    background: transparent;
  }
  .nf-mini-sidebar.nf-mini-sidebar--tools .nf-mini-logo:active{
    transform: none;
  }
  
  /* Ocultar en móvil */
  @media (max-width: 720px){
    body.nf-has-mini-sidebar{ padding-left: 0; }
    .nf-mini-sidebar{ display: none; }
  }
  
  /* Preferencias backdrop */
  #prefBackdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 9998;
  }
  #prefBackdrop.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Preferencias panel base */
  #personalizacion-wrap{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    max-width: 560px;
    width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
  
    background: var(--nf-card);
    color: var(--nf-text);
    border: var(--nf-border-w) solid var(--nf-border);
    border-radius: var(--nf-radius-card);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    padding: 16px;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
  }
  
  /* Preferencias: logo preview */
  .logo-box--preview{
    width: 110px;
    height: 110px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #logoPreview{
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
  }

  /* =========================
     Preferencias: blindaje interno (evita que CSS de cada página rompa el modal)
     Objetivo:
       - Logo preview SIEMPRE a la izquierda
       - "Elegir archivo" SIEMPRE con look de botón
       - Filas (Nombre/RUT/Patente) alineadas como grilla limpia
     ========================= */

  /* Evita que reglas globales (ej: form{display:grid}) afecten el modal */
  #personalizacion-wrap form{
    display: block;
    max-width: none;
    margin: 0;
    gap: 0;
    grid-template-columns: none;
  }

  /* Separadores y títulos internos */
  #personalizacion-wrap .pref-separator,
  #personalizacion-wrap .pref-separator,
  #personalizacion-wrap .pref-separator{
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.18);
    margin: 14px 0;
  }

  /* Filas label + input (usadas en slogan y en datos del profesional) */
  #personalizacion-wrap .pref-row{
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 10px 12px;
    margin: 10px 0;
  }
  #personalizacion-wrap .pref-row label{
    white-space: nowrap;
    margin: 0;
    font-size: 13px;
  }
  #personalizacion-wrap .pref-row input{
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.35);
    border-radius: 8px;
    background: #fff;
    color: var(--nf-text);
    font-size: 13px;
  }

  /* Botones dentro del modal (sin depender de .btn global de la página) */
  #personalizacion-wrap button,
  #personalizacion-wrap a.btn-preferencias,
  #personalizacion-wrap .btn-guardar-pref{
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.22);
    background: #fff;
    color: var(--nf-text);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
  }

  /* Layout del bloque de logo: preview y acciones lado a lado */
  #personalizacion-wrap .pref-logo-row{
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 14px;
    margin: 10px 0 8px;
  }

  #personalizacion-wrap .personaliza-preview{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    grid-column: 1;
  }

  /* Forzar que el wrapper del preview no se estire ni se centre por CSS externo */
  #personalizacion-wrap #logoPreviewWrap{
    justify-content: flex-start;
    align-items: flex-start;
  }

  #personalizacion-wrap .pref-logo-actions{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    grid-column: 2;
  }

  /* "Elegir archivo" debe verse como botón (es un <label class="btn">) */
  #personalizacion-wrap label.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.22);
    background: #fff;
    color: var(--nf-text);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    margin-right: 10px;
  }

  /* Subir logo: que no se vaya a full width por reglas globales */
  #personalizacion-wrap button[type="submit"],
  #personalizacion-wrap button.btn,
  #personalizacion-wrap .btn{
    width: auto;
  }

  /* Botón X del modal: fijo arriba-derecha, inmune a reglas globales de button */
  #personalizacion-wrap .modal__close{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: #fff;
    color: var(--nf-text);
    font-size: 18px;
    line-height: 1;
  }

  /* Datos básicos: centrar el bloque para que no quede pegado al borde */
  #personalizacion-wrap #pref-arquitecto-wrapper{
    max-width: 520px;
    margin: 0 auto;
  }

  /* Responsivo del modal: en pantallas estrechas apila label sobre input */
  @media (max-width: 620px){
    #personalizacion-wrap .pref-row{
      grid-template-columns: 1fr;
      gap: 6px;
    }
    #personalizacion-wrap .pref-row label{ white-space: normal; }
    #personalizacion-wrap .pref-logo-row{
      grid-template-columns: 1fr;
      align-items: flex-start;
    }
    #personalizacion-wrap .personaliza-preview,
    #personalizacion-wrap .pref-logo-actions{
      grid-column: auto;
    }
  }


  /* ===== Dock NAV (3 botones) ===== */
.nf-nav-dock{
  position: fixed;
  left: 18px;
  bottom: 18px; /* fallback cuando env() no existe */
  bottom: calc(18px + env(safe-area-inset-bottom));
  top: auto;
  display: flex;
  gap: 10px;
  z-index: 80;
}

/* ===== Dock ACCIÓN (1-2 botones) ===== */
.nf-action-dock{
  position: fixed;
  right: 18px;
  bottom: 18px; /* fallback cuando env() no existe */
  bottom: calc(18px + env(safe-area-inset-bottom));
  top: auto;
  display: flex;
  gap: 10px;
  z-index: 80;
}

/* ===== MÓVIL: la acción sube una fila ===== */
@media (max-width: 720px){
  .nf-nav-dock{
    left: 12px;
    bottom: 12px; /* fallback */
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .nf-action-dock{
    right: 12px;
    bottom: 64px; /* fallback: una fila arriba */
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
}