/* ===================================================================
   Plataforma S1V — capa 2 de 3: APPSHELL (PASO 14, Tarea 2)
   Sidebar grafito de vidrio ahumado, topbar flotante, fondo
   institucional, toast, modal, drawer, skeleton, login y error.
   Se carga SOLO desde base.html (el Libro de reportes no lo usa).
   Las clases heredadas .barra / .lateral / .cuerpo / .contenido se
   conservan: las plantillas y las pruebas siguen viéndolas.
   =================================================================== */

/* ---------------------------------------------- fondo institucional */
.s1v-fondo { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.s1v-fondo .foto {
  position: absolute; inset: 0; background-image: url("/static/img/fondo.jpg");
  background-size: cover; background-position: center right; background-repeat: no-repeat; opacity: .5;
}
.s1v-fondo .halo { position: absolute; border-radius: 999px; pointer-events: none; }
.s1v-fondo .halo-rojo {
  right: -150px; top: -130px; width: 520px; height: 520px; opacity: .12; filter: blur(86px);
  background: radial-gradient(circle, rgba(208,18,28,.45) 0%, rgba(208,18,28,0) 70%);
  animation: s1v-drift 18s ease-in-out infinite;
}
.s1v-fondo .halo-oro {
  left: -120px; bottom: -160px; width: 460px; height: 460px; opacity: .14; filter: blur(94px);
  background: radial-gradient(circle, rgba(217,178,106,.5) 0%, rgba(217,178,106,0) 70%);
  animation: s1v-drift 24s ease-in-out infinite reverse;
}
.s1v-marca-rincon {
  position: fixed; right: 26px; bottom: 22px; width: 78px; height: 78px; z-index: 0;
  pointer-events: none; opacity: .45;
}
.s1v-marca-rincon .esfera {
  position: absolute; inset: 0; border-radius: 999px;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.9) 0%, rgba(247,246,244,.55) 55%, rgba(27,28,30,.06) 100%);
  box-shadow: inset -4px -6px 14px rgba(20,18,16,.1), inset 4px 4px 10px rgba(255,255,255,.7), 0 10px 18px -12px rgba(20,18,16,.28);
}
.s1v-marca-rincon img {
  position: absolute; left: 50%; top: 50%; margin: -23px 0 0 -23px; width: 46px; height: 46px;
  object-fit: contain; opacity: .55; animation: s1v-spinmark 20s linear infinite;
}
@keyframes s1v-spinmark { to { transform: rotate(360deg); } }
@keyframes s1v-drift { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-10px,8px,0); } }
@keyframes s1v-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes s1v-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes s1v-sheet { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes s1v-slidein { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes s1v-shimmer { 0% { background-position: -260px 0; } 100% { background-position: 260px 0; } }
@keyframes s1v-nudge { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-9deg); } 92% { transform: rotate(7deg); } 96% { transform: rotate(-3deg); } }

/* ------------------------------------------------------- estructura */
.cuerpo { position: relative; z-index: 1; display: flex; align-items: stretch; min-height: 100vh; }
.s1v-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contenido { flex: 1; min-width: 0; padding: 24px 26px 48px 20px; position: relative; }
.contenido > * { position: relative; z-index: 1; }
.contenido.solo { max-width: 470px; margin: 8vh auto; padding: 0 18px; }

/* ---------------------------------------------------------- sidebar */
.lateral {
  position: sticky; top: 14px; z-index: 30; flex-shrink: 0; display: flex; flex-direction: column;
  width: 252px; height: calc(100vh - 28px); margin: 14px 0 14px 14px;
  border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(160deg, rgba(32,35,40,.86) 0%, rgba(17,19,22,.84) 46%, rgba(12,13,15,.9) 100%);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset -1px 0 0 rgba(255,255,255,.05);
  transition: width var(--motion-base) var(--spring-standard);
}
.lateral::before, .lateral::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-xl); }
.lateral::before { background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 38%, transparent 62%); }
.lateral::after { background: radial-gradient(360px circle at calc(var(--mx) - 14px) var(--my), rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 44%, transparent 74%); }

.s1v-marca { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; flex-shrink: 0; }
.s1v-marca .emblema {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 999px; background: #fff;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
}
.s1v-marca .emblema img { width: 34px; height: 34px; object-fit: contain; }
.s1v-marca .wordmark { flex: 1; min-width: 0; }
.s1v-marca .wordmark img { display: block; width: 100%; max-width: 150px; height: auto; }

.s1v-nav { position: relative; z-index: 2; flex: 1; overflow-y: auto; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.s1v-nav::-webkit-scrollbar { width: 6px; }
.s1v-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.s1v-nav-grupo { display: flex; flex-direction: column; }
.s1v-nav-titulo {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 16px 12px 6px;
  font-family: var(--fuente-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(242,240,238,.62); text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.s1v-nav-grupo.activo .s1v-nav-titulo { color: rgba(255,255,255,.9); }
.s1v-nav-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 100%); }
.lateral a {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius-md);
  color: rgba(242,240,238,.82); font-size: 13.5px; font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.lateral a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.lateral a .ic { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; flex-shrink: 0; }
.lateral a .ic svg { width: 19px; height: 19px; }
.lateral a .etiqueta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral a.activo {
  border-color: rgba(255,255,255,.14); color: #fff; font-weight: 600;
  background: linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 100%);
  box-shadow: 0 8px 18px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.lateral a::before {
  content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px;
  border-radius: 0 3px 3px 0; background: transparent;
  transition: top var(--motion-base) var(--spring-standard), bottom var(--motion-base) var(--spring-standard), background var(--motion-fast) var(--ease-standard);
}
.lateral a.activo::before { top: 11px; bottom: 11px; background: var(--s1v-rojo-vivo); }
.lateral a .pill { margin-left: auto; background: rgba(255,255,255,.1); color: rgba(242,240,238,.8); font-family: var(--fuente-mono); font-size: 10px; }

.lateral-pie { position: relative; z-index: 2; flex-shrink: 0; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.s1v-usuario { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.s1v-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.18); color: #f2f0ee; font-family: var(--fuente-titulo);
  font-size: 15px; font-weight: 600;
}
.s1v-usuario .datos { min-width: 0; }
.s1v-usuario .nombre { display: block; font-size: 13.5px; font-weight: 600; color: #f2f0ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s1v-usuario .rol { display: block; font-size: 11.5px; color: rgba(242,240,238,.5); margin-top: 2px; }
.lateral-pie a {
  min-height: 40px; padding: 0 8px; border-radius: var(--radius-sm); color: rgba(242,240,238,.78);
  font-size: 13px; font-weight: 500; border: 0;
}
.lateral-pie a::before { display: none; }
.lateral-pie a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral-pie a.salir:hover { background: rgba(208,18,28,.16); color: #f2c9cb; }
.s1v-lema { display: flex; justify-content: center; padding-top: 12px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }
.s1v-lema img { height: 30px; width: auto; object-fit: contain; filter: brightness(1.9); opacity: .9; }
.s1v-version { text-align: center; font-family: var(--fuente-mono); font-size: 9.5px; letter-spacing: .12em; color: rgba(242,240,238,.35); padding-top: 8px; }

/* --- sidebar colapsada (escritorio) --- */
.s1v-colapsada .lateral { width: 76px; }
.s1v-colapsada .lateral .s1v-marca { padding: 0; justify-content: center; }
.s1v-colapsada .lateral .wordmark,
.s1v-colapsada .lateral .etiqueta,
.s1v-colapsada .lateral .s1v-nav-titulo,
.s1v-colapsada .lateral .s1v-usuario .datos,
.s1v-colapsada .lateral .s1v-lema,
.s1v-colapsada .lateral .s1v-version,
.s1v-colapsada .lateral a .pill { display: none; }
.s1v-colapsada .lateral a, .s1v-colapsada .lateral-pie a { justify-content: center; padding: 0; }
.s1v-colapsada .s1v-usuario { justify-content: center; }

/* ----------------------------------------------------------- topbar */
.barra {
  position: sticky; top: 14px; z-index: 40; height: 62px; flex-shrink: 0; display: flex;
  align-items: center; gap: 12px; padding: 0 16px; margin: 14px 14px 0;
  border-radius: var(--radius-lg); background: var(--glass-light);
  backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid rgba(255,255,255,.7); color: var(--s1v-tinta);
  box-shadow: 0 18px 40px -28px rgba(20,18,16,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.barra a { color: var(--s1v-tinta); }
.burger {
  width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--s1v-mudo);
  cursor: pointer; font-size: 18px;
}
.burger:hover { background: rgba(27,28,30,.06); color: var(--s1v-tinta); }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.marca .logo {
  font-family: var(--fuente-mono); font-size: 10.5px; letter-spacing: .12em; background: var(--s1v-rojo-vivo);
  color: #fff; padding: 3px 8px; border-radius: 7px;
}
.s1v-ruta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--s1v-mudo); }
.s1v-ruta .sep { color: #c8c5c0; }
.s1v-ruta .actual { font-weight: 600; color: var(--s1v-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icono-barra {
  position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--s1v-mudo); font-size: 17px;
}
.icono-barra:hover { background: rgba(27,28,30,.06); color: var(--s1v-tinta); text-decoration: none; }
.icono-barra svg { width: 20px; height: 20px; }
.icono-barra .pill { position: absolute; top: 4px; right: 4px; border: 2px solid rgba(255,255,255,.92); }
.icono-barra.campana svg { animation: s1v-nudge 8s ease-in-out infinite; transform-origin: 50% 20%; }
.quien { display: flex; align-items: center; gap: 10px; padding-left: 8px; margin-left: 4px; border-left: 1px solid rgba(27,28,30,.08); }
.quien .s1v-avatar { width: 34px; height: 34px; font-size: 13px; background: linear-gradient(140deg, #23262b, #0f1113); border-color: rgba(0,0,0,.12); }
.quien .textos { display: flex; flex-direction: column; line-height: 1.2; }
.quien strong { font-size: 13px; font-weight: 600; }
.quien small { color: var(--s1v-mudo); font-size: 11.5px; }
/* «Cerrar sesión» vive en el pie de la barra lateral (fondo oscuro). El estilo
   de píldora clara sólo se aplica si algún día vuelve a la barra superior. */
.barra .salir {
  height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid rgba(27,28,30,.1); background: rgba(255,255,255,.7);
  font-size: 12.5px; font-weight: 600; color: var(--s1v-tinta-2);
}
.barra .salir:hover { background: #fdecec; border-color: rgba(208,18,28,.25); color: var(--s1v-rojo); text-decoration: none; }

/* ------------------------------------------------------------- toast */
/* El aviso del servidor (flash) se presenta como TOAST. El marcado es el mismo
   de siempre —<div class="flash" id="flash">texto</div>— para no romper nada que
   lo lea; el toast se consigue por #id, así que .flash suelto sigue siendo la
   caja de aviso en línea de otras plantillas. El icono es un ::before (no añade
   marcado dentro del div). */
#flash.flash {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px));
  margin: 0; padding: 13px 20px; border-radius: var(--radius-pill); background: rgba(22,24,27,.92);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 24px 50px -22px rgba(20,18,16,.5), inset 0 1px 0 rgba(255,255,255,.18);
  animation: s1v-slidein 280ms var(--spring-standard) both;
}
#flash.flash::before {
  content: ""; flex-shrink: 0; width: 17px; height: 17px; background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d9b26a' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v4.6M12 16v.01'/></svg>");
}
#flash.flash.se-va { opacity: 0; transform: translate(-50%, 10px); transition: opacity var(--motion-base) var(--ease-exit), transform var(--motion-base) var(--ease-exit); }

/* --------------------------------------------------- modal y drawer */
.s1v-modal-fondo {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20,18,16,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.s1v-modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: #fff;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--sombra-alta); padding: 22px 24px;
  animation: s1v-sheet 280ms var(--spring-standard) both;
}
.s1v-modal h2 { margin-top: 0; }
.s1v-modal .sub { color: var(--s1v-mudo); font-size: 13px; margin: -4px 0 16px; }
.s1v-modal .pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.s1v-drawer {
  position: fixed; right: 14px; top: 14px; bottom: 14px; width: min(420px, calc(100vw - 28px)); z-index: 80;
  background: rgba(255,255,255,.92); backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); box-shadow: var(--sombra-alta);
  padding: 20px; overflow-y: auto; animation: s1v-pop 280ms var(--spring-standard) both;
}

/* ---------------------------------------------------------- skeleton */
.s1v-skel {
  display: block; border-radius: 8px; background: linear-gradient(90deg, #ecebe8 0%, #f6f5f3 40%, #ecebe8 80%);
  background-size: 260px 100%; animation: s1v-shimmer 1.6s linear infinite;
}
.s1v-cargando { display: inline-flex; align-items: center; gap: 8px; color: var(--s1v-mudo); font-size: 13px; }
.s1v-spinner {
  width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(27,28,30,.12);
  border-top-color: var(--s1v-rojo-vivo); animation: s1v-spin .8s linear infinite;
}
@keyframes s1v-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- login */
body.sin-sesion { background: var(--s1v-grafito); }
body.sin-sesion .s1v-fondo .foto { opacity: .22; }
.login {
  position: relative; z-index: 1; background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-xl); padding: 34px 32px;
  box-shadow: 0 34px 80px -40px rgba(0,0,0,.7); animation: s1v-pop 420ms var(--ease-enter) both;
}
.login .s1v-marca-login { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 20px; }
.login .s1v-marca-login img.emb { width: 64px; height: 64px; object-fit: contain; }
.login .s1v-marca-login img.wm { width: 180px; height: auto; object-fit: contain; }
.login h1 { text-align: center; font-size: 20px; margin-bottom: 18px; }
.ayuda { font-size: 12.5px; color: var(--s1v-mudo); margin-top: 12px; text-align: center; }

/* --------------------------------------------- páginas de error */
.s1v-error { max-width: 620px; }
.s1v-error .codigo {
  font-family: var(--fuente-mono); font-size: 46px; font-weight: 500; letter-spacing: .04em;
  color: var(--s1v-linea-campo); margin: 0; line-height: 1;
}
.s1v-error h1 { margin: 10px 0 12px; }
.s1v-error .ref {
  font-family: var(--fuente-mono); font-size: 11.5px; color: var(--s1v-mudo-2);
  background: var(--s1v-linea-suave); border-radius: 8px; padding: 8px 12px; display: inline-block; margin: 4px 0;
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .quien .textos { display: none; }
}
@media (max-width: 900px) {
  .lateral {
    position: fixed; top: 0; left: -300px; bottom: 0; height: 100vh; margin: 0; width: 264px;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0; transition: left var(--motion-base) var(--ease-standard);
  }
  .lateral.abierto { left: 0; box-shadow: 0 0 0 100vmax rgba(20,18,16,.45), var(--glass-shadow); }
  .s1v-colapsada .lateral { width: 264px; }
  .s1v-colapsada .lateral .wordmark, .s1v-colapsada .lateral .etiqueta,
  .s1v-colapsada .lateral .s1v-nav-titulo, .s1v-colapsada .lateral .s1v-usuario .datos,
  .s1v-colapsada .lateral .s1v-lema, .s1v-colapsada .lateral .s1v-version { display: revert; }
  .s1v-colapsada .lateral a, .s1v-colapsada .lateral-pie a { justify-content: flex-start; padding: 0 12px; }
  .s1v-colapsada .lateral .s1v-marca { padding: 0 16px; justify-content: flex-start; }
  .barra { margin: 10px 10px 0; padding: 0 10px; gap: 8px; }
  .contenido { padding: 16px 12px 40px; }
  .s1v-marca-rincon { display: none; }
  .s1v-fondo .foto { opacity: .26; }
}
@media (max-width: 560px) {
  .marca .texto, .s1v-ruta { display: none; }
  .barra .salir { width: 40px; padding: 0; }
  .barra .salir .texto { display: none; }
  .barra { height: 58px; }
}