/* ═══════════════════════════════════════════════════════════
   Nimboo Cloud — Shell de aplicacion
   Logo, barra lateral, encabezado de pagina y tarjetas de
   metricas. Reutilizable por todos los dashboards de rol.
   Importar DESPUES de tokens.css y base.css.
   ═══════════════════════════════════════════════════════════ */

/* ─── Logotipo ──────────────────────────────────────────────
   Un solo archivo vectorial oficial, /assets/img/logo.svg.
   Nunca se redibuja ni se arma con texto: es el original.
   La proporcion del lockup es 4.31 a 1. */

.logo {
  display: block;
  width: 170px;
  height: auto;
  flex-shrink: 0;
}

.logo-sm { width: 140px; }
.logo-lg { width: 210px; }

@media (max-width: 520px) {
  .logo-lg { width: 175px; }
}

/* ─── Marco general ─────────────────────────────────────── */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  background: var(--paper);
}

/* ─── Barra lateral ─────────────────────────────────────── */

.sidebar {
  background: var(--white);
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
}

.sidebar-brand {
  padding: 0 24px 18px;
  border-bottom: 1px solid var(--line-soft);
}

/* ─── La campana ──────────────────────────────────────────── */
/* Flota en la esquina superior derecha, como en saleskit.
   Estuvo un rato dentro de la barra lateral, junto al logotipo,
   y su panel caia encima del titulo de la pantalla.
   Aqui no tapa nada: esa esquina esta vacia en todas las vistas,
   asi que el panel se abre sobre el margen. */

.campana { position: relative; flex-shrink: 0; }

/* Alineada con el contenido, no pegada a la esquina.
   Estaba a 22 y 26 del borde y se veia perdida, sin relacion con
   nada. Ahora respeta el mismo margen lateral que usa .main, asi
   que cae en la misma columna que el resto de la pantalla. */
.campana-flota {
  position: fixed;
  top: 34px;
  right: 48px;
  z-index: var(--z-sticky);
}

@media (max-width: 980px) {
  .campana-flota { top: 12px; right: 16px; }
}

.campana-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--ink-60);
  cursor: pointer;
  transition: background var(--d-fast), color var(--d-fast),
              box-shadow var(--d-fast), transform var(--d-fast);
}

.campana-btn:hover {
  color: var(--cloud-deep);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.campana-globo {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--cloud);
  color: var(--cloud-ink);
  font-family: var(--display);
  font-size: 9px;
  font-weight: var(--w-bold);
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}

/* Se abre HACIA LA IZQUIERDA porque el boton esta pegado al
   borde derecho: anclado a la izquierda se saldria de pantalla. */
.campana-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  animation: fade-in-up var(--d-fast);
}

.campana-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-60);
}

.campana-cuenta {
  letter-spacing: 0;
  text-transform: none;
  color: var(--cloud-deep);
}

.campana-item {
  display: block;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background var(--d-fast);
}

.campana-item:last-child { border-bottom: none; }
.campana-item:hover { background: var(--cloud-mist); }

/* Lo no leido lleva una raya azul y fondo casi blanco. Es la
   misma marca que usa el resto de la plataforma para decir
   "esto todavia te toca a ti". */
.campana-item.es-nuevo {
  border-left: 3px solid var(--cloud);
  background: var(--cloud-pale);
}

.campana-item-titulo {
  font-size: 12px;
  font-weight: var(--w-semibold);
  color: var(--black);
  line-height: var(--lh-normal);
}

.campana-item-texto {
  font-size: 11px;
  color: var(--ink-60);
  margin-top: 3px;
  line-height: var(--lh-normal);
}

.campana-item-cuando {
  font-size: 10px;
  color: var(--ink-40);
  margin-top: 5px;
}

.campana-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--ink-40);
  font-size: 12px;
}

/* Apretado a proposito. El menu de Direccion son 19 renglones y
   4 titulos de seccion: con el espaciado de antes no cabia en la
   pantalla de una portatil y Ajustes quedaba fuera de la vista.
   Se recortan los huecos, no el tamaño de la letra. */
.sidebar-nav {
  padding: 14px 14px 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sidebar-section-label {
  padding: 13px 12px 6px;
  font-size: 9px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.sidebar-section-label:first-child { padding-top: 4px; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--ink-80);
  transition: all var(--d-base);
  cursor: pointer;
  position: relative;
}

.sidebar-link:hover {
  background: var(--cloud-mist);
  color: var(--cloud-deeper);
  transform: translateX(2px);
}

.sidebar-link.is-active {
  /* Plano. Era un degradado de dos tonos que ya de por si son
     casi el mismo, asi que no se distinguia de un fondo liso y
     solo servia para tener una regla mas que mantener. */
  background: var(--cloud-pale);
  color: var(--cloud-deeper);
  font-weight: var(--w-semibold);
}

.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--cloud);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

/* Secciones que todavia no existen: visibles pero apagadas */
.sidebar-link.is-soon {
  color: var(--ink-40);
  cursor: default;
}

.sidebar-link.is-soon:hover {
  background: transparent;
  color: var(--ink-40);
  transform: none;
}

.sidebar-link-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.sidebar-link-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: var(--w-semibold);
  color: var(--ink-60);
  background: var(--cloud-mist);
  padding: 2px 9px;
  border-radius: var(--r-pill);
}

.sidebar-link.is-active .sidebar-link-count {
  background: var(--cloud);
  color: var(--on-cloud);
}

.sidebar-link.is-soon .sidebar-link-count {
  background: var(--line);
  color: var(--ink-40);
}

/* ═══════════════════════════════════════════════════════════
   El pie: una sola fila que se toca

   Fue de una fila con dos botones dentro (y el nombre cortado a
   72 pixeles), luego de dos filas (y el menu perdio alto, Ajustes
   quedo fuera de la vista), y ahora de una fila sin botones.

   Sin ellos el nombre se queda con 160 pixeles y el pie ocupa lo
   mismo que un renglon del menu. Las dos acciones viven en el
   menu que abre al tocarla.
   ═══════════════════════════════════════════════════════════ */
.sidebar-foot {
  position: relative;
  padding: 6px 14px 8px;
  border-top: 1px solid var(--line-soft);
}

.sidebar-yo {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 7px 8px;
  border-radius: var(--r-md);
  text-align: left;
  transition: background var(--d-fast);
}

.sidebar-yo:hover { background: var(--cloud-mist); }

.sidebar-yo-flecha {
  flex-shrink: 0;
  color: var(--ink-40);
  transition: transform var(--d-fast);
}

.sidebar-yo[aria-expanded="true"] .sidebar-yo-flecha { transform: rotate(180deg); }

/* Abre HACIA ARRIBA: esta pegado al fondo de la pantalla y hacia
   abajo no hay sitio. */
.sidebar-yo-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  bottom: calc(100% - 6px);
  left: 16px;
  right: 16px;
  padding: 5px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: fade-in var(--d-fast);
}

.sidebar-yo-op {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-xs);
  font-family: var(--display);
  font-size: 12.5px;
  color: var(--ink-80);
  text-align: left;
  transition: all var(--d-fast);
}

.sidebar-yo-op:hover { background: var(--cloud-mist); color: var(--black); }
.sidebar-yo-op svg { flex-shrink: 0; color: var(--ink-40); }

.sidebar-yo-op.es-salir:hover { background: var(--red-pale); color: var(--red); }
.sidebar-yo-op.es-salir:hover svg { color: var(--red); }

.sidebar-foot-info { flex: 1; min-width: 0; }

.sidebar-foot-name {
  /* Van en bloque: al pasar de <div> a <span> dentro del boton
     se quedaron en la misma linea, con el rol pegado al nombre. */
  display: block;
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-foot-role {
  display: block;
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--cloud-deep);
  margin-top: 3px;
  font-weight: var(--w-semibold);
}

.logout-btn {
  color: var(--ink-40);
  transition: all var(--d-base);
  padding: 6px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
}

.logout-btn:hover {
  color: var(--red);
  background: var(--red-pale);
}

/* ─── Contenido ─────────────────────────────────────────── */

.main {
  /* El padding vuelve a 48 a los lados, que es lo que se veia
     bien. Se probo bajarlo a 24 y a 12 y las dos veces quedo
     pegado al borde.

     El aprendizaje, para no repetirlo: en un portatil de 1512 el
     tope de ancho NUNCA se alcanza, asi que recortar el padding
     solo mueve el contenido hacia la orilla sin ganar casi nada.
     De 48 a 24 son 60 pixeles de ancho util a cambio de todo el
     respiro visual. El ancho de verdad se gana subiendo el tope,
     que abajo esta en 1440, o angostando la barra lateral. */
  padding: 40px 48px 48px;
  /* Este tope es lo que de verdad limita el ancho en un monitor
     grande, no el padding. Con 1240 y una barra lateral de 260,
     una pantalla de 1920 dejaba 420 pixeles de aire a los lados
     que ningun cambio de padding iba a recuperar.
     Subido a 1440 el 9 agosto 2026. */
  max-width: var(--container-xl);
  width: 100%;
  /* Centrado dentro del espacio que deja la barra lateral. Sin
     esto el contenido quedaba pegado a la izquierda y todo el
     aire sobrante se iba a la derecha. */
  margin-inline: auto;
  position: relative;

  /* La nube decorativa del fondo se sale por la derecha.
  
     Vive en .main::before, pegada al borde derecho, y su
     animacion la corre 20 pixeles hacia fuera y la escala un 5
     por ciento. Entre las dos cosas asomaban 30 pixeles y el
     navegador abria una barra de scroll horizontal. Como es una
     animacion lenta, aparecia y desaparecia sola, que es lo que
     la hacia dificil de ubicar. Adriano la noto el 10 agosto
     2026 en la pantalla del PM, pero estaba en todas.

     `clip` y no `hidden`: hidden convertiria .main en un
     contenedor de scroll y romperia los `position: sticky` de
     dentro, como la columna de nombres de Carga del equipo o el
     pie de Mi perfil. clip recorta y ya. */
  overflow-x: clip;
}

.main::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--cloud-pale) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.5;
  animation: float-cloud 30s var(--ease) infinite;
  z-index: 0;
}

.main > * { position: relative; z-index: 1; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
  gap: 24px;
  flex-wrap: wrap;
  animation: fade-in-up var(--d-slow);
}

.page-header-text { flex: 1; min-width: 280px; }

.page-kicker { margin-bottom: 14px; }

.page-title {
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  color: var(--black);
}

.page-title em {
  font-style: normal;
  font-weight: var(--w-bold);
  color: var(--cloud-deep);
}

.page-subtitle {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink-60);
  margin-top: 10px;
}

.page-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.section { margin-bottom: 56px; }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-title {
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--black);
}

.section-title em {
  font-style: normal;
  font-weight: var(--w-bold);
  color: var(--cloud-deep);
}

.section-link {
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cloud-deep);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--cloud-mist);
  transition: all var(--d-base);
}

.section-link:hover {
  background: var(--cloud-pale);
  color: var(--cloud-deeper);
}

/* ─── Tarjetas de metricas ──────────────────────────────── */

.stats-grid {
  display: grid;
  /* 200px permite cuatro tarjetas en una pantalla de 1280 con
     la barra lateral abierta, que es el caso mas comun. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}

.stat-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: all var(--d-base);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  animation: fade-in-up var(--d-slow) backwards;
}

.stat-card:nth-child(1) { animation-delay: 80ms; }
.stat-card:nth-child(2) { animation-delay: 160ms; }
.stat-card:nth-child(3) { animation-delay: 240ms; }
.stat-card:nth-child(4) { animation-delay: 320ms; }
.stat-card:nth-child(5) { animation-delay: 400ms; }

.stat-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--cloud-pale) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--d-slow);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.stat-card:hover::after { opacity: 1; }

.stat-card.stat-card-feature {
  /* --cloud-deep y --cloud-deeper valen LO MISMO a proposito
     (es un solo azul, ver tokens.css), asi que este degradado
     nunca degrado nada. Plano. */
  background: var(--cloud-deep);
  color: var(--white);
}

.stat-card.stat-card-feature .stat-label,
.stat-card.stat-card-feature .stat-trend { color: rgba(255, 255, 255, 0.75); }
.stat-card.stat-card-feature .stat-value { color: var(--white); }
.stat-card.stat-card-feature .stat-value-suffix { color: rgba(255, 255, 255, 0.7); }

.stat-label {
  font-size: 10px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 14px;
  /* Dos lineas reservadas: asi los numeros de todas las
     tarjetas quedan alineados aunque un titulo se parta. */
  min-height: 30px;
}

.stat-value {
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: 36px;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--black);
  margin-bottom: 8px;
}

.stat-value-suffix {
  font-size: 18px;
  font-weight: var(--w-regular);
  color: var(--ink-60);
  margin-left: 4px;
}

.stat-trend {
  font-size: 12px;
  color: var(--ink-60);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-trend.is-up   { color: var(--green); }
.stat-trend.is-down { color: var(--red); }

/* ─── Estado vacio ──────────────────────────────────────── */

.empty-state {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 56px 32px;
  text-align: center;
  animation: fade-in-up var(--d-slow) backwards;
  animation-delay: 400ms;
}

.empty-state-icon {
  width: 58px;
  height: auto;
  margin: 0 auto 20px;
  opacity: 0.55;
}

.empty-state-title {
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 8px;
}

.empty-state-text {
  font-family: var(--display);
  font-size: 14px;
  color: var(--ink-60);
  max-width: 420px;
  margin: 0 auto;
  line-height: var(--lh-normal);
}

/* El boton de un estado vacio quedaba PEGADO al texto, porque el
   texto no llevaba margen abajo y el boton tampoco arriba. Se ve
   en Produccion, en Mis proyectos y en el proyecto del renderista:
   las tres pantallas que ofrecen a donde ir cuando no hay nada.
   Adriano lo señalo el 12 agosto 2026.

   Va aqui y no en cada pantalla: el hueco entre lo que se dice y
   lo que se ofrece hacer es el mismo en todas. */
.empty-state .btn { margin-top: 22px; }

/* ─── Barra movil y cajon lateral ───────────────────────── */

.mobile-bar {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.mobile-bar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--ink-80);
  background: var(--cloud-mist);
  transition: all var(--d-base);
}

.mobile-bar-toggle:hover {
  background: var(--cloud-pale);
  color: var(--cloud-deeper);
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.35);
  z-index: calc(var(--z-drawer) - 1);
  animation: fade-in var(--d-fast);
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .mobile-bar { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--d-base);
    box-shadow: var(--shadow-lg);
  }

  .app.is-drawer-open .sidebar { transform: translateX(0); }
  .app.is-drawer-open .sidebar-scrim { display: block; }

  /* Mismo criterio en movil: arriba se respeta y los lados bajan.
     No a la mitad exacta, porque diez pixeles dejan el texto
     pegado al borde de la pantalla y se lee mal en la mano. */
  .main { padding: 24px 20px 40px; }
  .main::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   La aceptacion de terminos

   Sale una sola vez, al entrar, y no deja seguir sin contestar.
   Sin boton de cerrar y sin salida por la tecla de escape a
   proposito: una aceptacion que se puede esquivar no sirve como
   aceptacion. La salida honesta es cerrar sesion, y ahi esta.
   ═══════════════════════════════════════════════════════════ */

.tos-fondo {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15, 20, 25, .6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in var(--d-base) ease-out;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.tos-caja {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 32px 26px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  animation: fade-in-up var(--d-slow) ease-out;
}

.tos-logo { width: 44px; height: auto; margin-bottom: 16px; }

.tos-caja h2 {
  font-size: 20px;
  font-weight: var(--w-bold);
  color: var(--black);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.tos-texto {
  font-size: 13px;
  color: var(--ink-60);
  line-height: var(--lh-relaxed);
  margin: 0 0 22px;
}

/* Los dos documentos, como dos renglones que se abren en otra
   pestaña. Enlaces sueltos dentro de un parrafo se pasan de
   largo, y estos hay que poder abrirlos sin perder la ventana. */
.tos-ligas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.tos-ligas a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--cloud-ink);
  font-size: 13px;
  font-weight: var(--w-semibold);
  text-decoration: none;
  transition: background var(--d-fast);
}

.tos-ligas a:hover { background: var(--cloud-mist); }
.tos-ligas svg { flex-shrink: 0; color: var(--cloud-deep); }

.tos-acepto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  line-height: var(--lh-normal);
  color: var(--ink-80);
  cursor: pointer;
  margin-bottom: 22px;
}

.tos-pie { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 480px) {
  .tos-fondo { padding: 12px; }
  .tos-caja { padding: 26px 20px 20px; }
}

/* ═══════════════════════════════════════════════════════════
   La franja del contrato sin firmar

   Solo la ve el PM que no ha firmado su contrato marco. Va
   arriba de TODO, empujando la pantalla hacia abajo en vez de
   flotar encima: una franja que flota se lee como un anuncio y
   se ignora; una que mueve la pagina, no.

   No se puede cerrar. Un aviso que se cierra deja de existir a
   los dos minutos, y este tiene que estar hasta que se firme.
   ═══════════════════════════════════════════════════════════ */

.franja-contrato {
  position: relative;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: var(--cloud-pale);
  border-bottom: 1px solid var(--cloud);
  font-size: 13px;
  line-height: var(--lh-normal);
  color: var(--cloud-ink);
}

.franja-contrato svg { flex-shrink: 0; color: var(--cloud-deep); }
.franja-contrato span { flex: 1; min-width: 0; }
.franja-contrato strong { font-weight: var(--w-bold); }
.franja-contrato .btn { flex-shrink: 0; text-decoration: none; }

/* La barra lateral es fija y arranca en el borde de arriba, asi
   que con la franja puesta hay que bajarla o queda encimada. */
.con-franja .sidebar { top: 49px; height: calc(100vh - 49px); }

@media (max-width: 720px) {
  .franja-contrato {
    flex-wrap: wrap;
    padding: 12px 16px;
    font-size: 12px;
  }

  .franja-contrato .btn { width: 100%; text-align: center; }
  .con-franja .sidebar { top: 0; height: 100vh; }
}


/* ═══════════════════════════════════════════════════════════
   Cuando la barra ya esta puesta

   Cada pantalla es una pagina de verdad, asi que cambiar de
   pestaña rearranca todo. La barra lateral se dibuja de memoria
   antes de preguntarle nada a nadie (ver shell-render.js), y en
   cuanto esta puesta el velo de carga se encoge al area del
   contenido.

   Taparla entera mientras carga es mentir: esa parte ya esta
   lista y no va a cambiar. Ese era el "se siente muy torpe" que
   señalo Adriano el 10 agosto 2026.
   ═══════════════════════════════════════════════════════════ */

/* La marca va en el <body> porque el velo esta ANTES de .app en
   el marcado y desde .app no se le llega con un selector
   hermano. */
body.es-armada .boot-screen { left: var(--sidebar-w); }

@media (max-width: 900px) {
  /* En movil la barra es un cajon que no se ve, asi que el velo
     vuelve a cubrir todo: encogerlo dejaria una franja rara. */
  body.es-armada .boot-screen { left: 0; }
}

/* El interruptor de claro y oscuro, en el pie de la barra.
   Junto a salir, porque los dos son "cosas de mi cuenta" y no de
   la pantalla que estoy viendo. */
.tema-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-40);
  cursor: pointer;
  transition: background var(--d-fast), color var(--d-fast);
}

.tema-btn:hover { background: var(--cloud-mist); color: var(--cloud-deep); }