/* =====================================================================
   pantallas.css: lo propio de cada pantalla, en el orden en que aparecen.
   ===================================================================== */

/* ---------- Logo ---------- */
.logo-isotipo path{fill:none;stroke-width:7.5;stroke-linecap:round}
.logo-isotipo .barra-1{stroke:var(--logo-1)}
.logo-isotipo .barra-2{stroke:var(--logo-2)}
.logo-isotipo .barra-3{stroke:var(--logo-3)}
.marca{display:inline-flex;align-items:center;gap:8px;font-family:var(--letra-titulo);font-size:15px;letter-spacing:-.02em;font-weight:500}
.marca b{font-weight:700}

/* ---------- Entrar ---------- */
.login{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--fondo)}
.login-foto{position:relative;flex:1 1 56%;min-height:300px;background:#1D1E21 url(../img/login.jpg) 50% 40%/cover no-repeat;overflow:hidden}
.login-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,18,20,.55) 0%,rgba(17,18,20,.05) 34%,rgba(17,18,20,.25) 62%,rgba(17,18,20,.92) 100%)}
.login-foto .marca{position:absolute;z-index:1;left:var(--margen);top:calc(var(--seguro-arriba) + 22px);color:#fff;font-size:20px}
.login-foto .logo-isotipo .barra-1{stroke:#8C9096}
.login-foto .logo-isotipo .barra-2{stroke:#C9CDD2}
.login-foto .logo-isotipo .barra-3{stroke:#F0B457}
.login-lema{position:absolute;z-index:1;left:var(--margen);right:var(--margen);bottom:22px;margin:0;color:#fff;
  font-family:var(--letra-titulo);font-weight:700;font-size:64px;line-height:.95;letter-spacing:-.045em}
.login-lema em{display:block;font-family:var(--letra-acento);font-style:italic;font-weight:400;font-size:72px;letter-spacing:-.01em;
  line-height:1.05;padding-bottom:4px;color:#FF9500}
.login-panel{flex:none;padding:26px var(--margen) calc(var(--seguro-abajo) + 26px)}
.login-intro{font-size:17px;line-height:1.4;color:var(--tinta-2);margin:0 0 20px;max-width:34ch}
.login-intro b{color:var(--tinta);font-weight:600}
.boton-google{gap:12px}
.boton-google-g{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center}
.login-nota{text-align:center;font-size:13.5px;color:var(--tinta-3);margin:16px 0 0}

/* ---------- Unirse a una empresa / servicio pausado ---------- */
.unirse-cabecera{margin:22px 0 22px}
.unirse-cabecera .hoja-texto{max-width:36ch}
.unirse-buscador{margin-bottom:14px}
.icono-grande{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--relleno);color:var(--tinta);margin-bottom:6px}
.icono-grande--ambar{background:color-mix(in srgb,var(--ambar) 22%,transparent);color:var(--ambar-texto)}
.pantalla--centrada .titulo-pantalla{font-size:28px}
.pantalla--centrada .hoja-texto{max-width:32ch}

/* ---------- Inicio ---------- */
.inicio-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.inicio-saludo{font-size:16px;color:var(--tinta-2);margin:14px 0 4px}
.nota-demo{margin-top:10px}
.cabecera-empresas{margin-top:22px}

/* Aviso de solicitudes para el administrador. */
.aviso-solicitudes{display:flex;align-items:center;gap:12px;width:100%;margin-top:22px;padding:12px 14px 12px 12px;border-radius:var(--radio-tarjeta);
  background:var(--superficie);box-shadow:var(--sombra-tarjeta);text-align:left}
.aviso-solicitudes .fila-cuerpo{font-size:15px}

/* "Llevas": lo que tiene el usuario, en la tarjeta ámbar de la web. */
.llevas{background:var(--tarjeta-ambar);box-shadow:inset 0 0 0 1px var(--borde-ambar)}
.llevas .fila + .fila::before{border-color:var(--borde-ambar)}
.llevas-vacio{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--radio-tarjeta);box-shadow:inset 0 0 0 1px var(--linea);color:var(--tinta-2);font-size:15px}

/* El equipo hoy. */
.equipo-hoy{padding:18px;border-radius:var(--radio-tarjeta);background:var(--superficie);box-shadow:var(--sombra-tarjeta)}
.equipo-hoy-cifra{font-family:var(--letra-titulo);font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.equipo-hoy-cifra span{font-size:17px;font-weight:600;color:var(--tinta-2);letter-spacing:-.01em}
.progreso{height:8px;border-radius:4px;background:var(--relleno);margin:14px 0 12px;overflow:hidden}
.progreso-relleno{height:100%;border-radius:4px;background:var(--ambar);transform-origin:left;transform:scaleX(var(--avance,0));transition:transform 600ms var(--curva-salida)}
.equipo-hoy-datos{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--tinta-2)}
.equipo-hoy-datos b{color:var(--tinta);font-weight:600}
.equipo-hoy .botones{margin-top:16px;grid-template-columns:1fr 1fr}

/* ---------- Tareas y activos ---------- */
.segmentos-pantalla{margin-bottom:22px}
.grupo + .grupo{margin-top:26px}
.grupo-cabecera{display:flex;align-items:center;gap:10px;margin:0 0 10px 4px;font-family:var(--letra-titulo);font-weight:600;font-size:16px;letter-spacing:-.015em}
.grupo-cabecera .avatar{width:28px;height:28px;font-size:11px}
.grupo-cabecera .texto-3{font-family:var(--letra-texto);font-weight:500;font-size:14px;letter-spacing:0}
.activos-filtros{margin-top:12px;margin-bottom:18px}

/* Ficha de la tarea (hoja). */
.tarea-descripcion{margin:-6px 0 18px;font-size:16px;line-height:1.5;color:var(--tinta);white-space:pre-line;overflow-wrap:anywhere}
.tarea-en-curso{display:flex;align-items:center;gap:8px;margin:-4px 0 16px}
.archivar-hechas{display:flex;justify-content:center;margin-top:22px}
.archivar-hechas .enlace{gap:8px}
.avatares{display:flex;flex:none}
.avatares .avatar + .avatar{margin-left:-6px;box-shadow:0 0 0 3px var(--fondo)}
.fila-archivo .fila-titulo{color:var(--tinta)}

/* Ficha del activo (hoja). */
.activo-estado{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--fondo);margin-bottom:14px}
.activo-estado .fila-titulo{font-size:16px}
.qr{display:grid;place-items:center;gap:14px;padding:18px;border-radius:22px;background:#fff;color:#17181A;text-align:center}
.qr svg{width:min(62vw,240px);height:auto}
.qr-nombre{font-family:var(--letra-titulo);font-weight:600;font-size:15px;letter-spacing:-.01em}

/* ---------- Ajustes ---------- */
.ajustes-cabecera{display:flex;align-items:center;gap:10px;margin:-4px 0 14px -8px}
.perfil{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 0 6px}
.perfil .avatar{margin-bottom:8px}
.perfil-nombre{font-family:var(--letra-titulo);font-weight:700;font-size:24px;letter-spacing:-.03em}
.perfil-foto{position:relative;cursor:pointer;border-radius:50%}
.perfil-foto-camara{position:absolute;right:-2px;bottom:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--boton-fondo);color:var(--boton-texto);box-shadow:0 0 0 3px var(--fondo)}

/* ---------- Escáner a pantalla completa ---------- */
.escaner{position:absolute;inset:0;z-index:var(--capa-pantalla);background:#000;color:#fff;animation:aparecer 240ms var(--curva) both}
.escaner video{position:absolute;inset:0}
.escaner-cerrar{position:absolute;z-index:2;top:calc(var(--seguro-arriba) + 12px);right:var(--margen);background:rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.escaner-visor{position:absolute;z-index:1;left:50%;top:42%;width:min(72vw,280px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:30px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.52)}
.escaner-esquinas{position:absolute;inset:0;width:100%;height:100%;color:#F0B457}
.escaner-esquinas path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.escaner-texto{position:absolute;z-index:1;left:var(--margen);right:var(--margen);top:calc(42% + min(36vw,140px) + 26px);text-align:center;
  font-size:16px;font-weight:500;color:rgba(255,255,255,.9);text-wrap:balance}
.escaner-pie{position:absolute;z-index:2;left:var(--margen);right:var(--margen);bottom:calc(var(--seguro-abajo) + 22px)}
.escaner-pie .boton{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* ---------- Panel de empresas (superadmin) ---------- */
.empresa-acciones{display:flex;gap:8px}

/* ---------- Inicio (rediseño UI/UX) ---------- */
.inicio-cabecera{align-items:center}
.inicio-saludo{margin:26px 0 0;font-size:inherit;color:inherit}
.inicio-saludo .titulo-pantalla{margin-top:6px;font-size:38px}
.inicio-saludo em{font-family:var(--letra-acento);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em;color:var(--ambar-texto)}
.inicio-empresa{margin:6px 0 0;font-size:15px;color:var(--tinta-2)}

/* "Tu día": tarjeta oscura con anillo de avance y las tres barras del isotipo de fondo. */
.tu-dia{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;margin-top:22px;padding:20px;border-radius:26px;
  background:var(--tarjeta-oscura);color:var(--sobre-oscura);box-shadow:var(--sombra-flotante)}
.tu-dia .antetitulo{color:var(--sobre-oscura-2)}
.tu-dia-texto{position:relative;z-index:1;flex:1;min-width:0;padding-right:48px}
.tu-dia-frase{margin:6px 0 0;font-family:var(--letra-titulo);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.tu-dia-anillo{position:relative;z-index:1;flex:none;width:76px;height:76px;display:grid;place-items:center}
.tu-dia-anillo svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tu-dia-anillo circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.anillo-fondo{stroke:color-mix(in srgb,var(--sobre-oscura) 14%,transparent)}
.anillo-relleno{stroke:var(--ambar);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--avance,0) * 100);transition:stroke-dashoffset 700ms var(--curva-salida)}
.tu-dia-cifra{font-family:var(--letra-titulo);font-size:24px;font-weight:700;letter-spacing:-.03em}
.tu-dia-cifra small{font-size:14px;font-weight:600;color:var(--sobre-oscura-2)}
.tu-dia-barras{position:absolute;right:22px;bottom:-12px;display:flex;align-items:flex-end;gap:9px}
.tu-dia-barras i{display:block;width:14px;border-radius:7px;background:color-mix(in srgb,var(--sobre-oscura) 10%,transparent)}
.tu-dia-barras i:nth-child(1){height:34px}
.tu-dia-barras i:nth-child(2){height:62px}
.tu-dia-barras i:nth-child(3){height:98px;background:color-mix(in srgb,var(--ambar) 38%,transparent)}

/* Mosaicos: dos accesos con cifra grande. */
.mosaicos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mosaico{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:124px;padding:16px;border-radius:var(--radio-tarjeta);text-align:left;
  background:var(--superficie);box-shadow:var(--sombra-tarjeta),inset 0 0 0 1px var(--linea)}
.mosaico--ambar{background:var(--tarjeta-ambar);box-shadow:inset 0 0 0 1px var(--borde-ambar)}
.mosaico-icono{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--relleno);color:var(--tinta)}
.mosaico--ambar .mosaico-icono{background:color-mix(in srgb,var(--ambar) 24%,transparent);color:var(--ambar-texto)}
.mosaico .avatares{min-height:36px}
.mosaico .avatares .avatar + .avatar{box-shadow:0 0 0 3px var(--superficie)}
.mosaico-cifra{margin-top:auto;font-family:var(--letra-titulo);font-size:30px;font-weight:700;line-height:1;letter-spacing:-.035em}
.mosaico-cifra small{font-size:16px;font-weight:600;color:var(--tinta-3)}
.mosaico-texto{margin-top:-4px;font-size:13.5px;font-weight:500;color:var(--tinta-2)}

/* ---------- Activos y tareas: resumen con barra ---------- */
.resumen-activos,.avance-tareas{margin:-4px 0 16px;padding:14px 16px 4px;border-radius:18px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea)}
.resumen-cifras{display:flex;justify-content:space-between;font-size:14px;color:var(--tinta-2)}
.resumen-cifras b,.avance-tareas b{font-family:var(--letra-titulo);font-size:18px;font-weight:700;color:var(--tinta);letter-spacing:-.02em;margin-right:2px}
.resumen-fuera b{color:var(--ambar-texto)}
.resumen-activos .progreso,.avance-tareas .progreso{margin:10px 0 12px}
.avance-tareas{margin-top:-8px}
.grupo-cabecera .pastilla{margin-left:auto}