/* EL PORTAL DE ENTRADA sobre la escena de Valencia (crm#107).
   La escena es img/escena.jpg (2560 x 1440, 16:9): solo arquitectura y los siete cristales con sus
   dibujos. Todo lo que se lee o se pulsa es HTML encima, colocado en las coordenadas de la imagen:
   1 rem = 1/167,2 del ancho de la escena (a 1672 px de ancho, 1 rem = 10 px).
   La escena se ve ENTERA siempre (se ajusta por el lado que manda y las franjas sobrantes las
   rellena la misma imagen desenfocada): asi ninguna ventana queda fuera ni tapa un cristal,
   tambien en pantallas 4:3. En pantallas estrechas (moviles) las ventanas bajan debajo de la escena. */

:root {
  --marino: #050936;        /* titulos y rotulos */
  --azul: #0f10e8;          /* boton principal, enlaces y lo activo: el mismo azul de comun/muvail.css (crm#117: sin el, los botones salian en blanco) */
  --texto: #14163a;
  --gris: #3b4066;
  --gris-claro: #5b6080;
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { font-size: calc(min(100vw, 100vh * 1.77778) / 167.2); }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  font-family: var(--fuente);
  color: var(--texto);
  background: #dfe9f5;
  -webkit-font-smoothing: antialiased;
}
/* las franjas que deja la escena al ajustarse: la misma imagen, desenfocada (no pesa mas: es el mismo fichero) */
body::before {
  content: ''; position: fixed; inset: -4rem; z-index: -1;
  background: url(img/escena.jpg) center / cover no-repeat; filter: blur(3rem) brightness(1.05);
}

/* ---------------------------------------------------------------- la escena */
.escena {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 167.2rem;
  aspect-ratio: 16 / 9;
  background: url(img/escena.jpg) center / cover no-repeat;
}
.escena > * { position: absolute; }

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  left: 0; right: 0; top: 0; height: 8rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18));
  backdrop-filter: blur(0.8rem); border-bottom: 0.1rem solid rgba(255, 255, 255, .6);
}
.logo {
  position: absolute; left: 6rem; top: 1.7rem;
  display: flex; align-items: center; gap: 1.2rem;
  color: #1b1f8a; text-decoration: none;
}
/* crm#234: el logo y el nombre de la empresa (o de su cliente); sin logo, su inicial; sin sesión, el de Muvail. */
.logo { top: 1.2rem; height: 5.6rem; }
.logo-imagen { height: 5.6rem; width: auto; max-width: 22rem; object-fit: contain; }
.logo-inicial { display: inline-flex; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: #1b1f8a; color: #fff; font-size: 2.4rem; font-weight: 700; }
.logo-nombre { font-size: 3rem; font-weight: 700; letter-spacing: -0.05rem; line-height: 1; max-width: 50rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera-derecha {
  position: absolute; right: 5rem; top: 2.2rem; height: 3.6rem;
  display: flex; align-items: center; gap: 0;
  font-size: 1.7rem; color: var(--marino); white-space: nowrap;
}
.cabecera-derecha button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; cursor: pointer;
}
.grupo { gap: 1rem; white-space: nowrap; }
/* EN PRUEBAS (muvail-core#73): la empresa marcada lo dice al lado de su nombre, en todas las pantallas. */
.en-pruebas { display: inline-block; margin-left: 0.6rem; padding: 0.15rem 0.7rem; border-radius: 999px; background: #ffb020; color: #3a2400; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }
.en-pruebas[hidden] { display: none; }
.chevron { width: 1.1rem; height: 0.8rem; }
.separador { width: 0.1rem; height: 3rem; background: rgba(5, 9, 54, .2); margin: 0 1.6rem; }
.icono { width: 3.2rem; height: 3.2rem; justify-content: center; position: relative; }
.icono svg { width: 2.4rem; height: 2.4rem; }
.punto {
  position: absolute; right: -0.2rem; top: -0.2rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--marino); border: 0.2rem solid #fff;
}
.punto.con-numero { width: auto; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.95rem; font-weight: 700; line-height: 1.5rem; text-align: center; color: #fff; }
.separador[hidden] { display: none; }
.usuario { gap: 1rem; }
.avatar {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; margin-right: 0.4rem;
  background: rgba(255, 255, 255, .75); color: var(--marino);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.7rem;
}

/* ---------------------------------------------------------------- los cristales */
.paneles { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.panel {
  position: absolute; display: block; pointer-events: auto;
  border-radius: 0.6rem; text-decoration: none; color: var(--marino);
  transition: box-shadow .18s ease, background-color .18s ease;
}
/* EL DIBUJO, aparte (crm#152): 1 x 2, de lado a lado del cristal y pegado arriba. Va en su propia caja para
   que el rotulo se coloque sobre el dibujo y no sobre el cristal: los siete cristales tienen proporciones
   distintas, y el hueco libre del dibujo (entre el icono y la ilustracion) esta siempre al 31-36 % de su alto. */
.panel .dibujo {
  position: absolute; left: 6%; right: 6%; top: 3%; aspect-ratio: 1 / 2;
  background: center top / contain no-repeat; transition: filter .18s ease;
}
/* el rotulo, en HTML, en ese hueco libre del dibujo: empieza justo debajo del icono y, si ocupa dos lineas
   («Gestor documental» en un cristal estrecho), crece hacia abajo, donde la ilustracion empieza mas tarde */
.panel .rotulo {
  position: absolute; left: 50%; top: 30.5%; transform: translateX(-50%);
  width: 96%; text-align: center; line-height: 1.15;
  font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02rem;
  text-shadow: 0 0 0.6rem rgba(255, 255, 255, .95), 0 0 1.2rem rgba(255, 255, 255, .8);
}
.panel:hover, .panel:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .10);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .85), 0 0 3rem rgba(120, 150, 255, .55);
}
/* ORDENAR LOS CRISTALES (crm#183): el cristal pintado se queda; lo que se mueve es su contenido. Mientras se
   arrastra, una copia translucida sigue al raton, el de origen se atenua y el de destino se ilumina; al
   soltar, los dos se cambian el sitio con un fundido corto. Sin sesion no se arrastra nada. */
body.con-sesion .panel { touch-action: none; }
.panel.origen { opacity: .35; }
.panel.destino {
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, .95), 0 0 3.5rem rgba(120, 200, 255, .75);
}
/* El fantasma (la copia que sigue al ratón) lo coloca arrastre.js; aquí sólo su aspecto. */
.fantasma { opacity: .75; transition: none; }
.panel.cambiando .dibujo, .panel.cambiando .rotulo { animation: fundido-cristal .3s ease; }
@keyframes fundido-cristal { from { opacity: 0; } to { opacity: 1; } }
body.arrastrando, body.arrastrando * { cursor: grabbing !important; user-select: none; }

/* ---------------------------------------------------------------- las tres ventanas (crm#107) */
/* Tres marcos de cristal 16:9 en el hueco izquierdo (hasta el cristal de Contabilidad, a 32,3 %).
   El que no tiene contenido NO SE PINTA (Javier, 23/10/2026, crm#152: con los cristales «Bosque elegante» la
   cupula de la izquierda tiene que verse): conserva su sitio, para que los demas no se muevan, y deja ver Valencia. */
.marcos { left: 5rem; top: 10rem; width: 44rem; display: flex; flex-direction: column; gap: 1.5rem; }
.marco {
  position: relative; width: 44rem; aspect-ratio: 16 / 9; box-sizing: border-box; overflow: hidden;
  border-radius: 1.4rem; border: 0.12rem solid rgba(255, 255, 255, .8);
  background: linear-gradient(160deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .26) 100%);
  box-shadow: 0 1.2rem 3rem rgba(40, 60, 140, .14), inset 0 0.1rem 0 rgba(255, 255, 255, .85), inset 0 -0.1rem 0 rgba(255, 255, 255, .35);
  backdrop-filter: blur(1rem) saturate(1.1);
  display: flex; flex-direction: column; color: var(--texto);
}
.marco::after {
  content: ''; position: absolute; left: -30%; top: -60%; width: 55%; height: 220%; transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); pointer-events: none;
}
.marco.vacio { visibility: hidden; }
.marco.vacio > * { display: none; }
.marco-cab {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: 1.1rem 1.6rem 0.7rem; border-bottom: 0.1rem solid rgba(255, 255, 255, .55);
}
.marco-cab h2 { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--marino); display: flex; align-items: center; gap: 0.7rem; }
.marco-cab .cuenta { min-width: 2rem; height: 2rem; padding: 0 .5rem; box-sizing: border-box; border-radius: 999px; background: var(--marino); color: #fff; font-size: 1.1rem; line-height: 2rem; text-align: center; }
.marco-cab .cuenta:empty { display: none; }
.marco-cab a, .marco-cab button {
  font: inherit; font-size: 1.2rem; color: var(--marino); text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .88); border: 0.1rem solid rgba(255, 255, 255, .95); border-radius: 0.7rem; padding: 0.3rem 0.9rem;
}
.marco-cab a:hover, .marco-cab button:hover { background: #fff; }
.marco-cuerpo { flex: 1; overflow: auto; padding: 0.4rem 0.8rem; position: relative; z-index: 1; }
.marco-texto { margin: 0; padding: 1.4rem 1.6rem; font-size: 1.35rem; line-height: 2rem; color: var(--gris); }
.marco-texto a, .marco-texto button { font: inherit; color: var(--marino); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
/* sin sesion: la primera ventana invita a entrar */
.entrar-portal {
  margin: auto; font-size: 2rem; font-weight: 700; color: var(--marino); text-decoration: none;
  padding: 1rem 2.6rem; border-radius: 999px; background: rgba(255, 255, 255, .9); border: 0.1rem solid rgba(255, 255, 255, .95);
  position: relative; z-index: 1;
}
.entrar-portal:hover { background: #fff; }
.marco:has(.entrar-portal) { justify-content: center; align-items: center; }
/* los avisos */
.avisos { margin: 0; padding: 0; list-style: none; }
.avisos li { padding: 0.7rem 0.8rem; border-bottom: 0.1rem solid rgba(255, 255, 255, .45); font-size: 1.3rem; line-height: 1.8rem; cursor: pointer; border-radius: 0.5rem; }
.avisos li:last-child { border-bottom: 0; }
.avisos li:hover { background: rgba(255, 255, 255, .35); }
.avisos .tipo { display: inline-block; font-size: 1rem; font-weight: 700; line-height: 1.6rem; padding: 0 .55rem; border-radius: .45rem; margin-right: .5rem; color: #fff; background: #b4302a; vertical-align: .1rem; }
.avisos .tipo.ambar { background: #c27a10; }
.avisos .tipo.verde { background: #2f8f5b; } /* la cita de hoy (crm#146): agenda, no retraso */
.avisos .detalle { display: block; color: var(--gris); font-size: 1.2rem; }
/* el video: miniatura y boton; el reproductor solo al pulsar */
.video-cuerpo { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gris); font-size: 1.3rem; line-height: 2rem; }
.video-cuerpo .miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video-cuerpo .play { position: relative; z-index: 1; width: 5.6rem; height: 5.6rem; border-radius: 50%; border: 0.15rem solid rgba(5, 9, 54, .5); background: rgba(255, 255, 255, .85); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; cursor: pointer; }
.video-cuerpo .play i { display: block; width: 0; height: 0; border-left: 1.8rem solid var(--marino); border-top: 1.1rem solid transparent; border-bottom: 1.1rem solid transparent; margin-left: 0.4rem; }
.video-cuerpo .titulo-video { position: relative; z-index: 1; }
.enlace-pantalla { font: inherit; color: var(--marino); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.video-cuerpo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.marco.con-video .marco-cab { position: absolute; left: 0; right: 0; top: 0; z-index: 2; border: 0; }
/* las metricas del CRM, directamente en el cristal */
.metricas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem 1.2rem; padding: 0.8rem 1.6rem; }
.metrica { display: flex; flex-direction: column; gap: 0.2rem; }
.metrica .etiqueta { font-size: 1.15rem; color: var(--gris); }
.metrica .valor { font-size: 2.2rem; font-weight: 700; color: var(--marino); letter-spacing: -0.05rem; }
.metrica .nota { font-size: 1.1rem; color: var(--gris); }
.barras { display: flex; align-items: flex-end; gap: 0.3rem; height: 3.6rem; margin-top: 0.3rem; }
.barras i { display: block; width: 0.8rem; height: calc(var(--h) * 100%); min-height: 0.2rem; border-radius: 0.15rem; background: rgba(5, 9, 54, .55); }
.barras i.rojo { background: #b4302a; } .barras i.ambar { background: #c27a10; } .barras i.verde { background: #2f8f5b; }
.etapas { grid-column: 1 / -1; display: flex; gap: 1.2rem; align-items: flex-end; padding-top: 0.2rem; }
.etapa { flex: 1; text-align: center; font-size: 1.05rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa b { display: block; font-size: 1.6rem; color: var(--marino); }
.etapa i { display: block; height: calc(var(--h) * 3rem); min-height: 0.2rem; background: rgba(5, 9, 54, .35); border-radius: 0.2rem 0.2rem 0 0; margin: 0.3rem 0.8rem 0; }
/* ampliar: el marco ocupa la pantalla */
.marco:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; font-size: 1.6rem; background: #0b1020; color: #fff; }
.marco:fullscreen .marco-cab h2, .marco:fullscreen .marco-cab button { color: #fff; }

/* ---------------------------------------------------------------- notas */
.nota { margin: 0; top: 90.2rem; font-size: 1.2rem; color: var(--gris-claro); }
.nota-izquierda { left: 5rem; }

/* ---------------------------------------------------------------- pantallas estrechas (moviles) */
/* La escena se queda arriba, entera, y las ventanas bajan debajo, a todo el ancho: nada se solapa
   y los siete cristales siguen a mano. La pagina pasa a desplazarse. */
@media (max-width: 700px) {
  html { font-size: calc(100vw / 40); }
  body { overflow: auto; }
  body::before { display: none; }
  /* alto fijo: si no, el minimo automatico del aspect-ratio haria crecer la escena con las ventanas de debajo */
  .escena { position: relative; left: 0; top: 0; transform: none; width: 100vw; height: calc(100vw * 9 / 16); min-height: 0; overflow: visible; display: flow-root; }
  /* flow-root: el margen de arriba de las ventanas no se "cuela" fuera de la escena y la empuja hacia abajo */
  body { padding-top: 5.4rem; }
  .cabecera { position: fixed; left: 0; right: 0; top: 0; height: 5.4rem; z-index: 5; background: rgba(240, 245, 255, .92); }
  .logo { left: 1.4rem; top: 1.2rem; gap: 0.6rem; }
  .logo { top: 0.7rem; height: 4rem; }
  .logo-imagen { height: 4rem; max-width: 14rem; }
  .logo-inicial { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; }
  .logo-nombre { font-size: 1.8rem; max-width: 22rem; }
  .cabecera-derecha { right: 1rem; top: 1.3rem; font-size: 1.3rem; }
  .separador { margin: 0 0.8rem; }
  .avatar { width: 2.8rem; height: 2.8rem; font-size: 1.3rem; margin-right: 0.2rem; }
  .panel .rotulo { font-size: 0.75rem; top: 32%; }
  #menu-sociedades, #menu-usuario { left: auto; right: 1rem; top: 5.6rem; position: fixed; }
  .marcos { position: relative; left: 0; top: 0; width: auto; margin: calc(100vw * 9 / 16) 1.5rem 2rem; padding-top: 1.5rem; }
  .marco { width: 100%; }
  .nota { display: none; }
}