/* ============================================================
   CRM · Ventas Corporativas — Fiat Venezuela
   navegacion-movil.css · Armazón móvil
   Barra inferior, cabecera compacta, hojas inferiores, acción fija
   de vista, avisos con acciones y densidad común del armazón.
   Se carga después de los vista-*.css. Los ajustes propios de cada
   vista viven en su CSS.

   Media de navegación móvil (idéntica en js/navegacion-movil.js):
     (max-width: 900px),
     (max-width: 1200px) and (max-height: 500px)
       and (orientation: landscape) and (pointer: coarse)
   Densidad por vista: (max-width: 600px).

   Capas: encabezados de tabla 1 · columna fija 2 · barra masiva 30 ·
   cabecera 40 · acción móvil 55 · lateral o barra inferior 60 ·
   tooltip de Dirección 70 · modal 120 · avisos 160 · saltar 200.
   No aplicar transform, filter ni contain a .app o .zona: cambiarían
   el bloque de referencia de los elementos fijos.
   ============================================================ */

:root{
  --alto-inferior:64px;
  --reserva-inferior:0px;
  --reserva-accion:0px;
  --borde-control:#7B8797;

  --estado-info-fondo:#E9F5FC;
  --estado-ok-fondo:#EFF8F2;
  --estado-alerta-fondo:#FFF5E6;
  --estado-peligro-fondo:#FBEFED;
}

html{
  scroll-padding-top:calc(var(--barra) + 12px);
  scroll-padding-bottom:calc(var(--reserva-inferior) + var(--reserva-accion) + 16px);
}

/* ---------------- Contraste compartido ----------------
   Blanco sobre --cyan da 3,65:1: el botón usa la tinta (6,08:1).
   El cyan puro queda para indicadores y gráficos. */
.btn--cyan{background:var(--cyan-tinta);color:#fff;}
.btn--cyan:hover{background:#02557F;text-decoration:none;}
.btn--ok{background:var(--ok-tinta);color:#fff;}
.btn--ok:hover{background:#1A5C36;text-decoration:none;}

/* --linea no alcanza como única señal de un campo */
.campo input,.campo textarea,.campo select,.select,.entrada,.buscador input{border-color:var(--borde-control);}
.campo--error input,.campo--error textarea,.campo--error select{border-color:var(--peligro);}
.campo input:focus,.campo textarea:focus,.campo select:focus,.select:focus,.entrada:focus,.buscador input:focus{border-color:var(--cyan);}

/* ---------------- Utilidades de visibilidad ----------------
   .solo-movil y .accion-movil se ocultan fuera de la media móvil;
   .solo-escritorio, dentro. La consulta de escritorio es el
   complemento exacto de la media móvil. */
@media (min-width: 1200.02px),
       (min-width: 900.02px) and (min-height: 500.02px),
       (min-width: 900.02px) and (orientation: portrait),
       (min-width: 900.02px) and (pointer: fine),
       (min-width: 900.02px) and (pointer: none){
  .solo-movil,.accion-movil{display:none !important;}
}

/* ---------------- Piezas que solo existen en móvil ---------------- */
.barra-inferior{display:none;}
.barra-inferior[hidden]{display:none !important;}
.barra-inferior__lista{margin:0;padding:0;list-style:none;}
.barra-sup__buscar,.barra-sup__cerrar-busqueda{display:none;}
.modal__asa{display:none;}

/* ---------------- Cuenta en la cabecera (todas las medidas) ---------------- */
.usuario-sup__cuenta{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:50%;
}
.usuario-sup__cuenta:hover .avatar{box-shadow:0 0 0 3px rgba(0,54,95,.14);}

/* ---------------- Hoja «Más» (también como modal centrado en escritorio) ---------------- */
.modal--mas{max-width:420px;}
.hoja-mas__lista{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;}
.hoja-mas__enlace{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:8px;
  color:var(--texto);font-size:16px;line-height:22px;font-weight:600;font-size-adjust:none;
}
.hoja-mas__enlace:hover{background:#F1F5F9;text-decoration:none;}
.hoja-mas__enlace[aria-current="page"]{
  background:var(--estado-info-fondo);color:var(--cyan-tinta);box-shadow:inset 3px 0 0 var(--cyan);
}
.hoja-mas__icono{display:inline-flex;width:20px;height:20px;flex:0 0 20px;color:var(--marca);}
.hoja-mas__enlace[aria-current="page"] .hoja-mas__icono{color:var(--cyan-tinta);}
.hoja-mas__icono svg{width:20px;height:20px;}
.hoja-mas__texto{min-width:0;flex:1 1 auto;}
/* la insignia (.insignia del armazón) se alinea al final de la fila */
.hoja-mas__insignia{margin-left:auto;}
.hoja-mas__instalar{width:100%;height:auto;min-height:48px;margin-top:8px;font-size:16px;}
.hoja-mas__instalar[hidden]{display:none;}
.modal--mas .modal__pie{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;
  background:var(--panel);
}
.hoja-mas__cuenta{display:flex;align-items:center;gap:12px;min-width:0;}
.hoja-mas__avatar{width:36px;height:36px;flex:0 0 36px;font-size:13px;}
.hoja-mas__identidad{min-width:0;}
.hoja-mas__nombre{font-size:16px;line-height:22px;font-weight:600;font-size-adjust:none;overflow-wrap:anywhere;}
.hoja-mas__perfil{font-size:14px;line-height:20px;color:var(--suave);font-size-adjust:none;}
.hoja-mas__error{font-size:14px;line-height:20px;font-weight:600;color:var(--peligro-tinta);}
.hoja-mas__error[hidden]{display:none;}
.hoja-mas__salir{
  width:100%;min-height:48px;padding:0 16px;border:1px solid var(--linea);border-radius:8px;
  background:var(--panel);color:var(--rojo);font-size:16px;font-weight:600;font-size-adjust:none;
}
.hoja-mas__salir:hover{background:var(--estado-peligro-fondo);}
.hoja-mas__salir[disabled]{opacity:.7;cursor:wait;}

/* ---------------- Avisos con acciones (toastAccion) ----------------
   Persistentes y operables: reciben puntero aunque .avisos no. */
.toast--accion{pointer-events:auto;flex-wrap:wrap;max-width:420px;}
.toast__texto{flex:1 1 180px;min-width:0;}
.toast__acciones{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;}
.toast__btn{
  min-height:36px;padding:0 12px;border-radius:6px;border:1px solid rgba(255,255,255,.55);
  background:transparent;color:#fff;font-size:13px;font-weight:600;
}
.toast__btn:hover{background:rgba(255,255,255,.12);}
.toast__btn:first-child{background:#fff;color:var(--nav);border-color:#fff;}
.toast__btn:first-child:hover{background:var(--estado-info-fondo);}

/* ---------------- Verificación de sesión al volver del historial ---------------- */
.verificando-sesion .app,
.verificando-sesion .modal-fondo,
.verificando-sesion .avisos{visibility:hidden;}
.verificacion-sesion{
  position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:24px;background:var(--fondo);color:var(--texto);
  text-align:center;font-size:16px;line-height:24px;
}
.verificacion-sesion[hidden]{display:none;}

/* ============================================================
   Media de navegación móvil
   ============================================================ */
@media (max-width: 900px),
       (max-width: 1200px) and (max-height: 500px)
       and (orientation: landscape) and (pointer: coarse){
  :root{
    --alto-tactil:48px;
    --reserva-inferior:calc(var(--alto-inferior) + env(safe-area-inset-bottom, 0px));
    --barra:calc(56px + env(safe-area-inset-top, 0px));
  }

  .solo-escritorio{display:none !important;}

  /* el lateral vuelve a partir de 901px */
  .menu-lateral{display:none;}
  .zona{margin-left:0;}

  /* ---------- Cabecera ---------- */
  .barra-sup{
    height:var(--barra);flex:0 0 var(--barra);gap:4px;
    padding:env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    background:var(--panel);border-bottom:1px solid var(--linea);
  }
  .barra-sup__titulo{
    flex:1 1 auto;min-width:0;
    font-family:var(--tipo-titulo);font-size-adjust:none;font-size:18px;line-height:24px;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .barra-sup__espacio{display:none;}
  .barra-sup__buscar,.barra-sup__cerrar-busqueda{
    width:44px;height:44px;flex:0 0 44px;border-radius:8px;color:var(--marca);
    align-items:center;justify-content:center;
  }
  .barra-sup__buscar{display:inline-flex;}
  .barra-sup__buscar svg,.barra-sup__cerrar-busqueda svg{width:22px;height:22px;}
  .barra-sup__buscar:active,.barra-sup__cerrar-busqueda:active{background:#EEF2F7;}
  .buscador{display:none;}
  .usuario-sup{padding-left:0;border-left:0;gap:0;}
  .usuario-sup__datos,.barra-sup__salir{display:none;}
  .usuario-sup__cuenta{width:44px;height:44px;flex:0 0 44px;}
  .usuario-sup__cuenta .avatar{width:32px;height:32px;flex:0 0 32px;}

  /* búsqueda expandida: ocupa la cabecera sin cambiar su alto */
  .barra-sup--buscando .barra-sup__titulo,
  .barra-sup--buscando .barra-sup__buscar,
  .barra-sup--buscando .usuario-sup{display:none;}
  .barra-sup--buscando .barra-sup__cerrar-busqueda{display:inline-flex;}
  .barra-sup--buscando .buscador{display:block;flex:1 1 auto;animation:buscadorEntra 120ms ease-out;}
  .barra-sup--buscando .buscador input{height:44px;font-size:16px;font-size-adjust:none;border-radius:8px;}

  /* ---------- Barra inferior ---------- */
  .barra-inferior{
    display:block;position:fixed;inset:auto 0 0;z-index:60;
    padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background:var(--nav);border-top:1px solid var(--nav-2);
    box-shadow:0 -4px 16px rgba(11,27,43,.12);
  }
  .barra-inferior__interior{position:relative;max-width:720px;margin-inline:auto;}
  .barra-inferior__lista{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);
  }
  .barra-inferior__lista > li{min-width:0;}
  .barra-inferior__enlace{
    position:relative;display:flex;width:100%;min-height:var(--alto-inferior);
    flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 2px;
    margin:0;border:0;background:transparent;font:inherit;cursor:pointer;
    color:#C7D5E4;text-align:center;text-decoration:none;border-radius:8px 8px 0 0;
    transition:background-color 120ms ease-out;
  }
  .barra-inferior__icono,
  .barra-inferior__icono > svg{display:block;width:22px;height:22px;flex:0 0 22px;}
  .barra-inferior__icono > svg{stroke-width:1.8;}
  .barra-inferior__rotulo{
    font-family:var(--tipo-texto);font-size-adjust:none;font-size:.75rem;line-height:1rem;font-weight:600;
    overflow-wrap:anywhere;
  }
  .barra-inferior__enlace[aria-current]{background:var(--nav-2);color:#FFFFFF;}
  .barra-inferior__enlace[aria-current] .barra-inferior__rotulo{font-weight:700;}
  .barra-inferior__enlace:active{background:var(--nav-2);color:#FFFFFF;}
  .barra-inferior__enlace:hover{text-decoration:none;}
  .barra-inferior__enlace:focus-visible{outline:3px solid var(--foco-oscuro);outline-offset:-4px;}

  .barra-inferior__indicador{
    position:absolute;z-index:1;top:0;left:0;width:calc(100% / var(--ranuras, 5));height:3px;
    pointer-events:none;
    transform:translateX(calc(var(--indice-activo, 0) * 100%));
    transition:transform 180ms cubic-bezier(.22, 1, .36, 1);
  }
  .barra-inferior__indicador::after{
    content:"";display:block;width:24px;height:3px;margin-inline:auto;
    background:var(--cyan);border-radius:0 0 3px 3px;
  }
  .barra-inferior__interior[data-sin-activo] .barra-inferior__indicador{display:none;}

  /* .insignia del armazón (ámbar con cifra oscura, 9:1) sobre el icono;
     el anillo del color de la barra la separa del trazo */
  .barra-inferior__insignia{
    position:absolute;top:4px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;
    font-size:11px;line-height:1;box-shadow:0 0 0 2px var(--nav);
  }
  .barra-inferior__insignia[hidden]{display:none;}

  /* ---------- Área de trabajo ---------- */
  .trabajo{
    padding:
      16px
      max(16px, env(safe-area-inset-right, 0px))
      calc(24px + var(--reserva-inferior) + var(--reserva-accion))
      max(16px, env(safe-area-inset-left, 0px));
  }

  /* ---------- Acción fija de vista ----------
     Las vistas la pintan como último hijo de su contenedor; solo se
     reserva espacio para la última visible. */
  .accion-movil{
    position:fixed;z-index:55;inset:auto 0 var(--reserva-inferior);
    display:flex;gap:8px;
    padding:8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
    background:var(--panel);border-top:1px solid var(--linea);
    box-shadow:0 -2px 8px rgba(11,27,43,.06);
  }
  .accion-movil > .btn{flex:1 1 auto;height:auto;min-height:48px;}

  /* ---------- Avisos ---------- */
  .avisos{
    left:12px;right:12px;
    bottom:calc(12px + var(--reserva-inferior) + var(--reserva-accion));
    max-width:none;align-items:stretch;
  }
  .toast{max-width:none;font-size:14px;pointer-events:auto;}
  .toast__btn{min-height:44px;font-size:15px;}

  /* ---------- Modales como hojas inferiores ---------- */
  .modal-fondo{
    align-items:flex-end;padding:0;overflow:hidden;
    animation:fondoEntra 160ms ease-out;
  }
  .modal{
    width:100%;max-width:600px;margin:0 auto;
    border-radius:20px 20px 0 0;
    max-height:min(720px, 88vh);
    max-height:min(720px, 88dvh);
    animation:hojaEntra 220ms cubic-bezier(.22, 1, .36, 1);
  }
  .modal__asa{
    display:block;width:32px;height:4px;flex:0 0 4px;margin:8px auto 0;
    border-radius:2px;background:#5F6F86;
  }
  .modal__cab{min-height:56px;padding:8px 16px;}
  .modal__cab h2{font-size:20px;line-height:26px;font-weight:600;}
  .modal__x{width:44px;height:44px;flex:0 0 44px;}
  .modal__cuerpo{padding:8px 16px 16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .modal--mas .modal__cuerpo{padding:8px 12px;}
  .modal__pie{
    padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius:0;
  }
  .modal:has(.modal__pie:empty) .modal__cuerpo{padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));}
  .modal__pie .btn{height:auto;min-height:48px;}
  .modal-fondo--cerrando{animation:fondoSale 140ms ease-in forwards;pointer-events:none;}
  .modal-fondo--cerrando .modal{animation:hojaSale 180ms cubic-bezier(.4, 0, 1, 1) forwards;}

  /* ---------- Teclado abierto ----------
     La barra sale de la pantalla y del orden de foco; la acción fija
     vuelve al flujo; la hoja se ajusta al viewport visual. */
  body.teclado-abierto .barra-inferior{display:none;}
  body.teclado-abierto .accion-movil{
    position:static;inset:auto;margin-top:16px;padding:0;border-top:0;box-shadow:none;background:transparent;
  }
  body.teclado-abierto .modal-fondo{
    top:var(--desplazamiento-visual, 0px);bottom:auto;height:var(--alto-visual, 100%);
  }
  body.teclado-abierto .modal{max-height:calc(var(--alto-visual, 100vh) - 8px);}
}

/* Hover solo con puntero fino */
@media (hover: hover) and (pointer: fine){
  .barra-inferior__enlace:hover{background:var(--nav-2);color:#FFFFFF;text-decoration:none;}
  .barra-sup__buscar:hover,.barra-sup__cerrar-busqueda:hover{background:#EEF2F7;}
}

/* ---------------- Horizontal compacto ---------------- */
@media (max-width: 1200px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse),
       (max-width: 900px) and (max-height: 500px) and (orientation: landscape){
  :root{
    --alto-inferior:56px;
    --barra:calc(48px + env(safe-area-inset-top, 0px));
  }
  .barra-sup__titulo{font-size:17px;}
  .barra-inferior__enlace{gap:2px;padding:4px 2px;}
  /* acciones de vista en flujo normal */
  .accion-movil{
    position:static;inset:auto;margin-top:16px;padding:0;border-top:0;box-shadow:none;background:transparent;
  }
  .modal{
    max-height:calc(100vh - 8px);
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  }
}

/* ============================================================
   Densidad común a 600px o menos (armazón y controles globales)
   ============================================================ */
@media (max-width: 600px){
  body{font-size:16px;line-height:24px;}
  .cab-vista{margin-bottom:16px;}
  .cab-vista h1{font-size:24px;line-height:30px;font-weight:600;}
  .cab-vista h2,.tarjeta__cab h2{font-size:20px;line-height:26px;font-weight:600;}
  .cab-vista p,.estado__texto,.vacio__texto{font-size:14px;line-height:20px;}
  .estado__titulo,.vacio__titulo{font-size:16px;line-height:22px;}
  .tarjeta__cab{padding:12px 16px;}
  .tarjeta__cuerpo{padding:16px;}
  .rejilla{gap:16px;}

  .kpi{padding:16px;}
  .kpi__valor{font-size:26px;line-height:30px;font-weight:500;}
  .kpi__rotulo{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.2px;font-size-adjust:none;}

  .btn{height:auto;min-height:48px;padding:0 16px;font-size:16px;line-height:20px;font-size-adjust:none;}
  .btn--pequeno{min-height:44px;padding:0 12px;font-size:14px;}
  .btn--icono{width:48px;min-width:48px;padding:0;}

  .campo>label,.campo__rotulo{font-size:14px;line-height:20px;font-weight:600;font-size-adjust:none;}
  .campo input,.campo select,.select,.entrada{
    height:48px;font-size:16px;font-size-adjust:none;border-radius:8px;
  }
  .campo input:where([type="checkbox"],[type="radio"]){height:auto;width:auto;}
  .campo textarea,textarea.entrada{
    height:auto;min-height:120px;padding:12px;font-size:16px;line-height:24px;font-size-adjust:none;border-radius:8px;
  }
  .campo__ayuda{font-size:14px;line-height:20px;}
}

/* ---------------- Movimiento ---------------- */
@keyframes hojaEntra{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes hojaSale{from{transform:translateY(0);}to{transform:translateY(100%);}}
@keyframes fondoEntra{from{background-color:rgba(11,27,43,0);}to{background-color:rgba(11,27,43,.5);}}
@keyframes fondoSale{from{background-color:rgba(11,27,43,.5);}to{background-color:rgba(11,27,43,0);}}
@keyframes buscadorEntra{from{opacity:0;}to{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .barra-inferior__indicador,
  .modal,
  .modal-fondo,
  .buscador{
    transition:none !important;
    animation:none !important;
  }
}

@media print{
  .barra-inferior,.accion-movil,.verificacion-sesion{display:none !important;}
}