/* Menú de herramientas del equipo. Se carga después de /css/marca.css (tokens y fuente). */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fuente);background:var(--crema);color:var(--texto);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

header{background:var(--noche);color:var(--blanco);padding:22px 16px 30px}
.wrap{width:100%;max-width:560px;margin:0 auto}
.logos{display:flex;align-items:center;gap:14px}
.logos .remax{height:46px;width:auto;display:block}
.logos .sep{width:1px;height:34px;background:var(--sobre-noche-2)}
.logos .equipo{height:26px;width:auto;display:block}
h1{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(34px,10vw,50px);margin-top:28px}

main{flex:1;padding:8px 16px 28px}
section{margin-top:26px}
.etapa{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.etapa .n{font-weight:800;font-size:13px;color:var(--azul)}
.etapa h2{font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase}

.btn{display:flex;align-items:center;gap:14px;background:var(--blanco);border:1px solid var(--linea);padding:16px 14px;margin-bottom:8px;min-height:76px;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.btn:hover{border-color:var(--noche)}
.btn:active{transform:scale(.985);background:var(--crema)}
.ico{flex:0 0 46px;height:46px;background:var(--noche);color:var(--blanco);display:grid;place-items:center}
.ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.txt{flex:1;min-width:0}
.txt b{display:block;font-weight:700;font-size:16px;line-height:1.2}
.txt span{display:block;font-weight:500;font-size:13px;color:var(--texto-2);margin-top:3px;line-height:1.35}
.flecha{flex:0 0 auto;width:20px;height:20px;stroke:var(--noche);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Botón clave (Reportar): el único uso del rojo en la vista */
.btn.clave{background:var(--noche);border-color:var(--noche);color:var(--blanco)}
.btn.clave .ico{background:var(--rojo)}
.btn.clave .txt span{color:var(--sobre-noche)}
.btn.clave .flecha{stroke:var(--blanco)}
.btn.clave:active{background:var(--noche);opacity:.9}

.nota{font-size:12.5px;font-weight:500;color:var(--texto-2);line-height:1.5;padding:2px 2px 0}
.nota a{font-weight:600;color:var(--azul);display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}

.contacto{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{display:flex;flex-direction:column;justify-content:center;gap:4px;background:var(--blanco);border:1px solid var(--linea);padding:14px;min-height:72px;transition:transform .12s ease,border-color .12s ease}
.mini:hover{border-color:var(--noche)}
.mini:active{transform:scale(.985)}
.mini b{font-weight:700;font-size:14px}
.mini span{font-weight:500;font-size:13px;color:var(--texto-2);overflow-wrap:anywhere}
.mini.ancho{grid-column:1 / -1}

.crm{margin-top:26px;background:var(--blanco);border-left:4px solid var(--azul);padding:14px;font-size:14px;font-weight:600;line-height:1.45}

@media (min-width:700px){
  header{padding:30px 16px 40px}
  .logos .remax{height:56px}
  .logos .equipo{height:32px}
}

/* Barra de sesión del asesor (login con Google) */
.barra-asesor{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--blanco);border:1px solid var(--linea);border-left:4px solid var(--azul);padding:10px 14px;margin-top:18px;font-size:13px;font-weight:600;color:var(--texto-2)}
.barra-asesor b{color:var(--noche)}
.barra-asesor .salir{font-weight:700;color:var(--azul);min-height:24px;display:inline-flex;align-items:center}

/* Herramienta aún no publicada: tarjeta sin enlace con etiqueta "Pronto" */
.btn.pronto{background:transparent;border-style:dashed;border-color:var(--texto-3);cursor:default}
.btn.pronto:hover{border-color:var(--texto-3)}
.btn.pronto:active{transform:none;background:transparent}
.btn.pronto .ico{background:var(--texto-3)}
.btn.pronto .txt b{color:var(--texto-2)}
.etiqueta{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--noche);border:1px solid var(--noche);padding:4px 8px}

.barra-asesor .barra-acc{display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Herramientas en mosaico: cuadros grandes con icono y nombre, dos por fila.
   Un cuadro solo al final de la fila ocupa el ancho completo. */
.mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{display:flex;flex-direction:column;gap:8px;background:var(--blanco);border:1px solid var(--linea);padding:14px;min-height:132px;min-width:0;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.tile:hover{border-color:var(--noche)}
.tile:active{transform:scale(.98);background:var(--crema)}
.tile .ico{flex:0 0 auto;width:46px;height:46px}
.tile b{font-weight:800;font-size:16px;line-height:1.15;margin-top:auto}
.tile small{font-weight:500;font-size:12.5px;line-height:1.3;color:var(--texto-2)}
.tile:last-child:nth-child(odd){grid-column:1 / -1;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-items:center;min-height:84px}
.tile:last-child:nth-child(odd) .ico{grid-row:1 / 3}
.tile:last-child:nth-child(odd) b{margin-top:0;align-self:end}
.tile:last-child:nth-child(odd) small{align-self:start}
/* Reportar: el único uso del rojo en la vista */
.tile.clave{background:var(--noche);border-color:var(--noche);color:var(--blanco)}
.tile.clave .ico{background:var(--rojo)}
.tile.clave small{color:var(--sobre-noche)}
.mosaico + .nota{margin-top:6px}

/* Portada del menú: los logos entran como el globo REMAX. La foto del equipo queda de fondo,
   difuminada y teñida de azul noche, solo para dar identidad. Los logos no se alteran. */
.portada{position:relative;overflow:hidden;isolation:isolate}
.portada::before{content:"";position:absolute;inset:-20px;z-index:-1;background:url("/img/equipo-banda.webp") center 35%/cover no-repeat;filter:blur(5px) grayscale(1);opacity:.1;mix-blend-mode:luminosity}
.portada .logos .remax{animation:globo 1s cubic-bezier(.2,.9,.25,1.15) both}
.portada .logos .sep{transform-origin:50% 50%;animation:linea .45s .55s ease-out both}
.portada .logos .equipo{animation:entra .6s .75s cubic-bezier(.2,.8,.2,1) both}
.portada h1{animation:sube .7s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes globo{0%{opacity:0;transform:translateY(26px) scale(.92)}60%{opacity:1;transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes linea{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .portada *{animation:none!important}
}

/* App instalada: barra de "Instala la app" / "Hay una versión nueva" */
.app-barra{display:flex;align-items:center;gap:10px;background:var(--blanco);border:1px solid var(--linea);border-left:4px solid var(--azul);padding:12px 12px 12px 14px;margin-top:18px;text-align:left;color:var(--texto)}
.app-barra[hidden]{display:none}
.app-txt{flex:1;min-width:0}
.app-txt b{display:block;font-size:14px;font-weight:800}
.app-txt span{display:block;font-size:12.5px;font-weight:500;color:var(--texto-2);line-height:1.35;margin-top:2px}
.app-btn{flex:0 0 auto;font-family:var(--fuente);font-weight:700;font-size:14px;min-height:44px;padding:0 16px;border:0;background:var(--noche);color:var(--blanco);cursor:pointer}
.app-cerrar{flex:0 0 auto;width:44px;height:44px;border:0;background:none;font-size:24px;line-height:1;color:var(--texto-2);cursor:pointer}
/* App instalada en iPhone: la barra de estado va sobre el encabezado azul noche. */
@media (display-mode:standalone){header{padding-top:calc(22px + env(safe-area-inset-top))}}