/* Seguimiento FV — carcasa de la aplicación a pantalla completa.
   Solo se carga en las páginas del plugin, donde no se usa el tema. */

.sfv-html{ -webkit-text-size-adjust:100%; }
.sfv-shell,.sfv-shell *,.sfv-shell *::before,.sfv-shell *::after{ box-sizing:border-box; }
body.sfv-shell{
  --bar:#0f172a; --bar-fg:#e2e8f0; --bar-fg2:#94a3b8; --bar-act:#38bdf8;
  --fondo:#f1f5f9;
  margin:0; padding:0; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  background:var(--fondo); color:#0f172a;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  overflow-x:hidden;
}
@media (prefers-color-scheme:dark){
  body.sfv-shell{ --fondo:#070d18; color:#e2e8f0; }
}

/* ---------------------------------------------------------- barra superior */
.sfv-bar{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:14px;
  padding:9px 14px; padding-top:calc(9px + env(safe-area-inset-top));
  padding-left:calc(14px + env(safe-area-inset-left));
  padding-right:calc(14px + env(safe-area-inset-right));
  background:var(--bar); color:var(--bar-fg);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(15,23,42,.18);
}
body.sfv-shell.admin-bar .sfv-bar{ top:32px; }
@media screen and (max-width:782px){ body.sfv-shell.admin-bar .sfv-bar{ top:46px; } }

.sfv-bar__marca{
  flex:none;
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  color:var(--bar-fg); text-decoration:none; white-space:nowrap;
}
.sfv-bar__logo{ display:block; width:28px; height:28px; border-radius:8px; flex:none; }
@media (max-width:420px){ .sfv-bar__marca span{ display:none; } }
.sfv-bar__nav{
  display:flex; gap:2px; align-items:center; flex:1 1 0; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.sfv-bar__nav::-webkit-scrollbar{ display:none; }
.sfv-bar__menu{ position:relative; }
.sfv-bar__menu > summary{ list-style:none; cursor:pointer; }
.sfv-bar__menu > summary::-webkit-details-marker{ display:none; }
.sfv-bar__menu > summary::after{ content:""; display:inline-block; margin-left:6px; border:4px solid transparent; border-top-color:currentColor; vertical-align:middle; }
.sfv-bar__menu[open] > summary{ color:var(--bar-fg); background:rgba(255,255,255,.07); }
.sfv-bar__sub{
  position:absolute; top:calc(100% + 8px); left:0; z-index:950; min-width:260px;
  background:#132038; border:1px solid #2b3d5c; border-radius:10px; padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.sfv-bar__subln{
  display:block; padding:9px 12px; border-radius:7px; text-decoration:none;
  color:#cbd8ea; font-size:13px; font-weight:600; white-space:nowrap;
}
.sfv-bar__subln:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sfv-bar__subln.es-activo{ background:var(--bar-act); color:#0f172a; }
@media (max-width:640px){ .sfv-bar__sub{ left:auto; right:0; } }

.sfv-bar__yo{ flex:none; display:flex; gap:8px; align-items:center; white-space:nowrap; }
.sfv-bar__nom{ color:var(--bar-fg2); font-size:12.5px; max-width:22ch; overflow:hidden; text-overflow:ellipsis; }

.sfv-bar__ln{
  display:inline-block; padding:6px 10px; border-radius:8px;
  color:var(--bar-fg2); text-decoration:none; font-size:12.5px; font-weight:600;
  white-space:nowrap;
}
.sfv-bar__ln:hover{ color:var(--bar-fg); background:rgba(255,255,255,.07); }
.sfv-bar__ln.es-activo{ color:#0f172a; background:var(--bar-act); }

/* ------------------------------------------------------------- contenido */
.sfv-main{
  flex:1; width:100%; max-width:min(1680px,100%); min-width:0; margin:0 auto;
  padding:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
.sfv-main .sfv-app{ background:transparent; }
.sfv-main > .sfv-muro{ margin:40px auto; }

@media (max-width:640px){
  .sfv-bar{ flex-wrap:wrap; gap:8px; }
  .sfv-bar__nav{ order:3; flex-basis:100%; }
  .sfv-bar__yo{ margin-left:auto; }
  .sfv-main{ padding:12px 10px 24px; }
}

/* La cuadrícula ocupa el alto disponible cuando la app es la página entera. */
.sfv-shell .sfv-scroll{ max-height:calc(100dvh - 210px); }

/* ---------------------------------------------- tablet (641 a 1024 px) */
@media (max-width:1024px){
  .sfv-bar{ gap:10px; padding-left:calc(12px + env(safe-area-inset-left)); padding-right:calc(12px + env(safe-area-inset-right)); }
  .sfv-bar__marca{ font-size:14px; }
  .sfv-bar__ln{ padding:6px 9px; }
  .sfv-main{ padding:14px 12px calc(20px + env(safe-area-inset-bottom)); }
  .sfv-shell .sfv-scroll{ max-height:calc(100dvh - 250px); }
}

/* -------------------------------------------------- móvil (hasta 640 px) */
@media (max-width:640px){
  .sfv-bar__nom{ display:none; }
  .sfv-shell .sfv-scroll{ max-height:calc(100dvh - 300px); }
}

/* Pantalla apaisada y baja: la cuadrícula necesita todo el alto que haya. */
@media (max-height:560px){
  .sfv-shell .sfv-scroll{ max-height:calc(100dvh - 150px); }
  .sfv-bar{ padding-top:calc(5px + env(safe-area-inset-top)); padding-bottom:5px; }
}

/* Dedos, no ratón: objetivos más grandes. */
@media (pointer:coarse){
  .sfv-bar__ln{ padding:9px 12px; }
}

/* Etiquetas cortas de los departamentos cuando no cabe la barra entera. */
.sfv-ln-corto{ display:none; }
@media (max-width:1180px){
  .sfv-ln-largo{ display:none; }
  .sfv-ln-corto{ display:inline; }
}