/* Quantum Real Estate Management — app movil.
   La direccion visual sale de las 7 pantallas que paso Dani el 19-ago-2026, no de un
   gusto mio: crema calido, una sola familia (Satoshi), acento dorado usado solo para lo
   que importa (el neto, las etiquetas, la pestana activa) y tarjetas muy redondeadas
   sobre fondo, sin sombras duras. */

@font-face{font-family:Satoshi;src:url(fonts/satoshi-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-900.woff2)format('woff2');font-weight:900;font-display:swap}

:root{
  --crema:#F2EFE9;
  --superficie:#FCFBF8;
  --superficie-2:#F7F4EE;
  --tinta:#14120F;
  --apagado:#8B857B;
  --oro:#B8862B;
  --oro-claro:#E2CDA0;
  --oro-fondo:#FBF3E2;
  --linea:#E7E2D8;
  --oscuro:#121110;
  --r-tarjeta:22px;
  --r-pildora:999px;
  --sombra:0 1px 2px rgba(20,18,15,.04), 0 8px 24px rgba(20,18,15,.045);
  --ancho:460px;
}

*{box-sizing:border-box}
/* La pagina NO se puede arrastrar de lado. `overflow-x:hidden` sola no basta en iOS:
   hace falta cortar tambien el rebote horizontal con overscroll-behavior-x. */
html,body{margin:0;padding:0;width:100%;max-width:100%;overflow-x:hidden;
          overscroll-behavior-x:none}
body{
  font-family:Satoshi,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--crema);color:var(--tinta);
  -webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.4;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit}

/* ---------------------------------------------------------------- estructura */
.app{max-width:var(--ancho);margin:0 auto;min-height:100dvh;position:relative;
     padding:0 20px calc(104px + env(safe-area-inset-bottom));}
.marca-top{display:flex;align-items:center;justify-content:center;position:relative;
           padding:18px 0 6px}
.marca-top .q{width:34px;height:36px;display:block}
.marca-top .campana{position:absolute;right:0;top:16px;width:38px;height:38px;
                    display:grid;place-items:center;border-radius:50%}
.marca-top .campana:active{background:var(--superficie-2)}
/* Sin esto la campana sale con su tamano natural y pesa mas que el propio logo. */
.marca-top .campana svg{width:21px;height:21px}
.campana .punto{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
                background:var(--oro);border:2px solid var(--crema)}

h1.titulo{font-size:clamp(1.5rem, 1.18rem + 1.3vw, 1.72rem);font-weight:700;letter-spacing:-.03em;
          margin:14px 0 2px;line-height:1.05}
.sub{color:var(--apagado);font-size:.94rem;margin:0 0 16px}
.cab{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:start}
.cab > div:first-child{display:contents}
.cab .titulo{grid-column:1;grid-row:1}
.cab .sub{grid-column:1 / -1;grid-row:2}
.cab .acciones{grid-column:2;grid-row:1}
.cab .acciones{display:flex;gap:4px;padding-top:12px}
.icono-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%}
.icono-btn:active{background:var(--superficie-2)}
.icono-btn svg{width:21px;height:21px}

/* ---------------------------------------------------------------- tarjetas */
.tarjeta{background:var(--superficie);border-radius:var(--r-tarjeta);box-shadow:var(--sombra);
         padding:20px;margin-bottom:16px}
.tarjeta.sin-relleno{padding:0;overflow:hidden}
.tarjeta h2{font-size:1.12rem;font-weight:700;margin:0 0 14px;letter-spacing:-.01em}

.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.tres > div{padding:0 12px}
.tres > div + div{border-left:1px solid var(--linea)}
.tres > div:first-child{padding-left:0}
.tres > div:last-child{padding-right:0}
.et{color:var(--apagado);font-size:.92rem;margin:0 0 4px}
.cifra{font-size:1.55rem;font-weight:700;letter-spacing:-.03em;margin:0;white-space:nowrap}
.cifra .eu{font-size:1.05rem;font-weight:500;margin-left:2px}
.oro{color:var(--oro)}

/* ---------------------------------------------------------------- pildoras */
.filtros{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 16px;margin:0 -20px;
         scrollbar-width:none;overscroll-behavior-x:contain;
         -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
         mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.filtros::-webkit-scrollbar{display:none}
.pildora{flex:0 0 auto;padding:7px 14px;border-radius:var(--r-pildora);
         border:1px solid var(--linea);color:var(--apagado);font-size:.85rem;
         background:transparent;transition:background .15s,color .15s,border-color .15s}
.pildora[aria-pressed="true"]{background:var(--oscuro);color:#fff;border-color:var(--oscuro);
         font-weight:500}

.etiqueta{display:inline-block;padding:5px 11px;border-radius:9px;border:1px solid var(--oro-claro);
          color:var(--oro);font-size:.8rem;line-height:1.1}
.etiquetas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---------------------------------------------------------------- propiedad */
.prop{background:var(--superficie);border-radius:var(--r-tarjeta);box-shadow:var(--sombra);
      overflow:hidden;margin-bottom:16px;width:100%;text-align:left;display:block}
.prop img{width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;display:block}
.prop .cuerpo{padding:16px}
.prop .fila{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.prop h3{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin:0}
.prop .dir{color:var(--apagado);font-size:.9rem;margin:3px 0 0}
.prop .lado{text-align:left;padding-left:14px;border-left:1px solid var(--linea);flex:0 0 auto}
.prop .lado .cifra{font-size:1.08rem}
.prop .lado .et{font-size:.78rem;margin:0 0 2px}
.prop .lado .sep{height:1px;background:var(--linea);margin:10px 0}

.metricas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:12px}
.metricas > div{padding:0 8px}
.metricas > div + div{border-left:1px solid var(--linea)}
.metricas > div:first-child{padding-left:0}
.metricas .cifra{font-size:1.04rem}
.metricas .et{font-size:.76rem;margin:2px 0 0}

.canales{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:12px;
         border-top:1px solid var(--linea);font-size:.8rem;color:var(--apagado)}
.canales b{color:var(--tinta);font-weight:500}
.canales svg{width:18px;height:18px;flex:0 0 auto;color:var(--tinta)}

.bloque{background:var(--superficie-2);border-radius:14px;padding:13px;margin-top:12px}
.bloque h4{margin:0 0 10px;font-size:.94rem;font-weight:700}
.gastos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gastos > div + div{border-left:1px solid var(--linea);padding-left:10px}
.gastos .cifra{font-size:.98rem}
.gastos .et{font-size:.76rem}

.alerta{display:flex;align-items:center;gap:9px;background:var(--oro-fondo);
        border:1px solid var(--oro-claro);border-radius:11px;padding:10px 12px;margin-top:10px;
        width:100%;text-align:left;font-size:.85rem}
.alerta svg{width:18px;height:18px;color:var(--oro);flex:0 0 auto}
.alerta .flecha{margin-left:auto;color:var(--apagado)}
.nota{display:flex;align-items:center;gap:8px;color:var(--apagado);font-size:.78rem;margin-top:10px}
.nota svg{width:15px;height:15px;flex:0 0 auto}

/* ---------------------------------------------------------------- mapa */
#mapa{height:44vh;min-height:280px;margin:0 -20px;background:var(--superficie-2)}
.leaflet-container{background:#EEE9E0;font:inherit}
/* El mapa de serie es de colores saturados y desentona con todo lo demas. Se le baja el
   color y se le da el mismo tono calido de la aplicacion, que es lo que se pidio en el
   diseno. Es solo presentacion: los datos del mapa siguen siendo los mismos. */
#mapa .leaflet-tile-pane{filter:grayscale(.85) sepia(.34) brightness(1.06) contrast(.92)}
.leaflet-control-attribution{font-size:9px;background:rgba(252,251,248,.8);
  padding:1px 5px;border-radius:6px 0 0 0;color:var(--apagado)}
.leaflet-control-attribution a{color:var(--apagado)}
.leaflet-control-attribution svg{display:none}
.chincheta{width:44px;height:44px;border-radius:50%;background:var(--oscuro);color:#fff;
           display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.chincheta svg{width:22px;height:22px}
.chincheta.activa{box-shadow:0 0 0 3px var(--crema),0 0 0 5px var(--oro)}
.ficha-mapa{display:flex;gap:14px;padding:14px}
.ficha-mapa img{width:124px;aspect-ratio:4/3;object-fit:cover;border-radius:14px;flex:0 0 auto}
.ficha-mapa h3{font-size:1.15rem;margin:0;letter-spacing:-.02em}
.ficha-mapa .dir{font-size:.9rem}
.ficha-mapa .etiqueta{padding:4px 10px;font-size:.8rem}
.tres-mini{display:flex;gap:0;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)}
.tres-mini > div{padding-right:14px}
.tres-mini .cifra{font-size:1.05rem}
.tres-mini .et{font-size:.82rem}
.ver-prop{display:flex;align-items:center;justify-content:space-between;width:100%;
          padding:14px;border-top:1px solid var(--linea);color:var(--oro);font-weight:500}

/* ---------------------------------------------------------------- finanzas */
.selector-mes{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
              border:1px solid var(--linea);border-radius:var(--r-pildora);background:var(--superficie)}
.selector-mes select{border:0;background:none;appearance:none;font-weight:500;padding-right:4px}
.neto-grande{text-align:center;padding:6px 0 4px}
.neto-grande .et{font-size:1.05rem;color:var(--tinta)}
.neto-grande .cifra{font-size:3rem;letter-spacing:-.045em;margin:6px 0 0}
.neto-grande .delta{color:var(--apagado);font-size:.98rem;margin:6px 0 0}
.reglon{border-top:1px solid var(--linea);margin-top:18px;padding-top:18px}
.grafico{width:100%;height:auto;display:block;margin-top:4px}
.leyenda{display:flex;gap:20px;justify-content:center;margin-top:12px;font-size:.95rem;
         color:var(--apagado)}
.leyenda i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:7px;
           vertical-align:-2px}
.lista-prop{display:block;width:100%}
.lista-prop .linea{display:flex;align-items:center;gap:14px;padding:14px 0;
                   border-top:1px solid var(--linea);width:100%;text-align:left}
.lista-prop .linea:first-child{border-top:0;padding-top:2px}
.lista-prop img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.lista-prop .nom{flex:1;min-width:0;font-size:1.1rem;font-weight:500;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
.lista-prop .der{text-align:right;flex:0 0 auto}
.lista-prop .der .cifra{font-size:1.15rem}
.lista-prop .der .et{font-size:.85rem;margin:2px 0 0}
.lista-prop .flecha{color:var(--apagado);flex:0 0 auto}

.cargo{display:flex;align-items:center;gap:14px;background:var(--oro-fondo);
       border:1px solid var(--oro-claro);border-radius:14px;padding:12px 14px;width:100%;
       text-align:left;margin-top:10px}
.cargo .redondo{width:40px;height:40px;border-radius:50%;background:#F3E3C4;display:grid;
                place-items:center;flex:0 0 auto}
.cargo .redondo svg{width:19px;height:19px;color:var(--oro)}
.cargo .txt{flex:1;min-width:0}
.cargo .txt b{display:block;font-weight:500}
.cargo .txt span{color:var(--apagado);font-size:.9rem}

/* ---------------------------------------------------------------- perfil */
.perfil-cab{display:flex;align-items:center;gap:16px}
.avatar{width:66px;height:66px;border-radius:50%;background:#EDE6DA;display:grid;
        place-items:center;font-size:1.35rem;font-weight:700;flex:0 0 auto}
.perfil-cab .nom{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin:0}
.perfil-cab .mail{color:var(--apagado);margin:2px 0 0}
.btn-borde{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;
           border:1px solid var(--linea);border-radius:12px;background:var(--superficie);
           font-size:.98rem}
.btn-borde svg{width:17px;height:17px}
.rol{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;
     border-top:1px solid var(--linea);color:var(--apagado);font-size:.98rem}
.rol .redondo{width:34px;height:34px;border-radius:50%;background:var(--superficie-2);
              display:grid;place-items:center}
.rol .redondo svg{width:17px;height:17px;color:var(--tinta)}
.menu-lista .item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
                  padding:15px 0;border-top:1px solid var(--linea)}
.menu-lista .item:first-child{border-top:0;padding-top:0}
.menu-lista .cuadro{width:44px;height:44px;border-radius:13px;background:var(--superficie-2);
                    display:grid;place-items:center;flex:0 0 auto}
.menu-lista .cuadro svg{width:21px;height:21px}
.menu-lista .txt{flex:1;min-width:0}
.menu-lista .txt b{display:block;font-weight:500;font-size:1.08rem}
.menu-lista .txt span{color:var(--apagado);font-size:.93rem}
.menu-lista .flecha{color:var(--oro)}
.salir{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
       padding:16px;border:1px solid var(--oro-claro);border-radius:14px;color:var(--oro);
       font-weight:500}
.pie-version{text-align:center;color:var(--apagado);font-size:.92rem;margin:18px 0 0}

/* ---------------------------------------------------------------- barra inferior */
.barra{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));
       width:min(calc(var(--ancho) - 24px),calc(100vw - 24px));
       background:var(--superficie);border-radius:26px;box-shadow:0 2px 6px rgba(20,18,15,.05),0 12px 30px rgba(20,18,15,.10);
       display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:10px 2px 9px;z-index:500}
/* auto-columns en vez de repeat(5): al anadir Agenda como sexta pestana, un 5 fijo
   dejaba la ultima fuera de la barra. */
.barra button{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--apagado);
              font-size:.66rem;position:relative;padding-top:4px;letter-spacing:-.01em;
              white-space:nowrap;overflow:hidden}
.barra svg{width:22px;height:22px}
.barra button[aria-current="page"]{color:var(--tinta);font-weight:500}
.barra button[aria-current="page"]::before{content:"";position:absolute;top:-10px;width:26px;
              height:3px;border-radius:2px;background:var(--oro)}

/* ---------------------------------------------------------------- portada y acceso */
.portada{min-height:100dvh;background:var(--oscuro);color:#fff;display:flex;flex-direction:column;
         align-items:center;position:relative;overflow:hidden}
.portada .foto{position:absolute;inset:auto 0 0 0;height:72%;object-fit:cover;width:100%;
               opacity:.95}
.portada .foto::after{content:""}
.portada .velo{position:absolute;inset:0;background:linear-gradient(180deg,#121110 0%,rgba(18,17,16,.75) 34%,rgba(18,17,16,.15) 55%,rgba(18,17,16,.85) 100%)}
.portada .dentro{position:relative;z-index:2;width:100%;max-width:var(--ancho);padding:0 24px;
                 display:flex;flex-direction:column;align-items:center;min-height:100dvh}
.portada .logo-grande{margin-top:14vh;text-align:center;width:100%}
.portada .logo-grande img{width:min(78%,300px);height:auto;display:block;margin:0 auto}
.portada .nombre{font-size:2.1rem;font-weight:700;letter-spacing:.22em;margin:16px 0 0;
                 text-transform:uppercase}
.portada .claim{color:#E7C87F;letter-spacing:.2em;font-size:.82rem;margin:10px 0 0;
                text-transform:uppercase}
.portada .abajo{margin-top:auto;width:100%;padding-bottom:38px}
.btn-crema{display:block;width:100%;background:#F7F3EA;color:var(--tinta);border-radius:var(--r-pildora);
           padding:19px;font-size:1.12rem;font-weight:500;text-align:center;
           box-shadow:0 0 0 1px rgba(226,205,160,.55)}
/* `display:block` en un <button> no lo estira: sigue midiendo lo que mide su texto, asi
   que el text-align:center no centraba nada y el enlace quedaba pegado a la izquierda. */
.enlace-oro{display:block;width:100%;text-align:center;margin-top:20px;color:#F1EBE0;
            text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:6px}

.acceso{min-height:100dvh;max-width:var(--ancho);margin:0 auto;padding:0 24px 40px;
        display:flex;flex-direction:column}
.acceso .q{width:70px;height:74px;margin:12vh auto 0;display:block}
.acceso h1{font-size:2.35rem;font-weight:700;letter-spacing:-.03em;text-align:center;margin:26px 0 0}
.acceso p.entradilla{color:var(--apagado);text-align:center;margin:12px 0 0;font-size:1.08rem}
.campo{margin-top:22px}
.campo label{display:block;font-size:1rem;margin-bottom:9px}
.campo input{width:100%;padding:17px 18px;border-radius:14px;border:1px solid var(--linea);
             background:transparent;font-size:1.05rem}
.campo input:focus{outline:0;border-color:var(--oro)}
.campo .conojo{position:relative}
.campo .conojo button{position:absolute;right:12px;top:50%;transform:translateY(-50%);
                      width:38px;height:38px;display:grid;place-items:center;color:var(--apagado)}
.olvido{display:block;margin:12px 0 0;text-align:right;text-decoration:underline;
        text-underline-offset:4px;font-size:.98rem}
.btn-negro{display:block;width:100%;margin-top:34px;background:var(--oscuro);color:#fff;
           border-radius:16px;padding:19px;font-size:1.08rem;font-weight:500;text-align:center}
.acceso .fin{margin-top:auto;padding-top:34px;border-top:1px solid var(--linea);text-align:center;
             color:var(--apagado)}
.acceso .fin a{display:block;margin-top:8px;color:var(--tinta);text-decoration:underline;
               text-underline-offset:4px}
.error{color:#B3261E;font-size:.96rem;margin:14px 0 0;text-align:center}

/* ---------------------------------------------------------------- hoja inferior */
.velo-modal{position:fixed;inset:0;background:rgba(20,18,15,.4);z-index:900}
.hoja{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:901;
      width:min(var(--ancho),100vw);background:var(--crema);border-radius:26px 26px 0 0;
      max-height:92dvh;overflow:auto;padding:10px 20px calc(28px + env(safe-area-inset-bottom))}
.hoja .asa{width:44px;height:5px;border-radius:3px;background:var(--linea);margin:6px auto 14px}
.hoja h2{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.hoja .cerrar{position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:50%;
              display:grid;place-items:center;background:var(--superficie)}
.oculto{display:none !important}
.rejilla2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo select,.campo textarea{width:100%;padding:15px 16px;border-radius:14px;
      border:1px solid var(--linea);background:var(--superficie);font-size:1.02rem}
.aviso-flotante{position:fixed;left:50%;transform:translateX(-50%);bottom:110px;z-index:1000;
      background:var(--oscuro);color:#fff;padding:13px 20px;border-radius:14px;font-size:.98rem;
      opacity:0;pointer-events:none;transition:opacity .2s}
.aviso-flotante.visible{opacity:1}
.vacio{text-align:center;color:var(--apagado);padding:40px 10px}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---------------------------------------------------------------- agenda
   Equipo, portales y clientes en un solo apartado. Lo pidio Dani el 20-ago para tener
   el respaldo del CRM bien estructurado antes de conectarlo a GoHighLevel. */
.solapas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
         background:var(--superficie-2);border-radius:var(--r-pildora);padding:4px;margin:0 0 18px}
.solapas button{padding:9px 4px;border-radius:var(--r-pildora);font-size:.88rem;
                color:var(--apagado);transition:background .15s,color .15s}
.solapas button[aria-selected="true"]{background:var(--superficie);color:var(--tinta);
                font-weight:500;box-shadow:var(--sombra)}

h3.grupo{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado);
         font-weight:600;margin:22px 0 10px}
h3.grupo:first-child{margin-top:4px}

.ficha{background:var(--superficie);border-radius:var(--r-tarjeta);box-shadow:var(--sombra);
       padding:14px 16px 16px;margin-bottom:12px}
.cab-ficha{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.cab-ficha .ini{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;
       place-items:center;background:var(--oro-fondo);color:var(--oro);
       font-weight:700;font-size:1.02rem}
/* En columna con gap y no dos bloques sueltos: entre `</b>` y el <span> del rol quedaba
   un salto de linea del literal, y ese hueco anonimo pintaba una raya gris entre el
   nombre y el subtitulo. Con flex no hay caja anonima que pintar. */
.cab-ficha .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.cab-ficha b{display:block;font-size:1.04rem;font-weight:700;letter-spacing:-.01em}
.cab-ficha .rol-ficha{display:block;color:var(--apagado);font-size:.82rem}
.cab-ficha svg{width:18px;height:18px;color:var(--apagado);flex:0 0 auto}

.ficha .datos{margin:10px 0 0;font-size:.86rem}
.ficha .datos.apagado{color:var(--apagado)}
.ficha .punto-sep{margin:0 7px;color:var(--linea)}
.ficha .nota-ficha{margin:10px 0 0;font-size:.84rem;color:var(--apagado);
       border-left:2px solid var(--linea);padding-left:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:.72rem;padding:4px 9px;border-radius:8px;background:var(--superficie-2);
      color:var(--apagado)}

.anuncios{margin-top:12px;border-top:1px solid var(--linea);padding-top:4px}
.anuncio{display:flex;align-items:center;justify-content:space-between;gap:10px;
         padding:9px 0;border-bottom:1px solid var(--linea);font-size:.88rem}
.anuncio:last-child{border-bottom:0}
.anuncio .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anuncio .ver{display:inline-flex;align-items:center;gap:5px;color:var(--oro);
              text-decoration:none;flex:0 0 auto;font-size:.82rem}
.anuncio .ver svg{width:15px;height:15px}
.anuncio .sin{color:var(--apagado);font-size:.8rem;flex:0 0 auto}

.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.casillas{display:grid;gap:2px;margin-top:6px;background:var(--superficie-2);
          border-radius:14px;padding:10px 12px}
.casilla{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.94rem}
.casilla input{width:19px;height:19px;accent-color:var(--oscuro);flex:0 0 auto}

.btn-borrar{display:block;width:100%;margin-top:12px;padding:15px;border-radius:var(--r-pildora);
            color:#A4462F;background:rgba(164,70,47,.07);font-weight:500;text-align:center}

/* ---------------------------------------------------------------- coste de equipo */
.btn-borde.chico{padding:8px 13px;font-size:.83rem;margin-top:12px}
.btn-borde.chico svg{width:15px;height:15px}
.ficha .datos .apagado{color:var(--apagado)}

/* La tarjeta del resumen va sin foto: alli mandan los numeros. */
.prop.sin-foto .cuerpo{padding:15px 16px}
.marca-top.solo-campana{justify-content:flex-end;padding:10px 0 0;min-height:0}
.marca-top.solo-campana .campana{position:static}

/* ------------------------------------------------ logos de portal y vencimientos */
/* (21-ago-2026). Los nombres de color son los de :root de arriba: --tinta, --apagado,
   --oro, --linea. No inventar variables nuevas: si no existen, la regla se queda sin
   color y no se ve desde el servidor. */

:root{ --rojo:#B8492A; }

.logo-portal{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--superficie-2)}
/* Sin alto fijo: fotocasa es 31x24 y no es cuadrado. Fijar los dos lo deformaria, que
   es justo la leccion L001. Se limita la caja y la imagen decide su proporcion. */
.logo-portal img{max-width:22px;max-height:22px;width:auto;height:auto;display:block}

.aviso-legal{font-size:.84rem;line-height:1.5;color:var(--apagado);background:var(--superficie-2);
  border-radius:12px;padding:11px 13px;margin:2px 0 16px}

.pastilla-num{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--rojo);
  color:#fff;font-size:.7rem;font-weight:700;line-height:1}

.venc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--superficie);
  border:1px solid var(--linea);border-left:3px solid var(--linea);border-radius:14px;
  padding:12px 13px;margin-bottom:8px;cursor:pointer;font:inherit;color:inherit}
.venc:active{background:var(--superficie-2)}
.venc .cuando{flex:0 0 90px;display:flex;flex-direction:column;gap:2px}
.venc .cuando b{font-size:.95rem;font-variant-numeric:tabular-nums}
.venc .cuando span{font-size:.76rem;color:var(--apagado)}
.venc .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.venc .txt b{font-size:.97rem}
.venc .rol-ficha{font-size:.84rem;color:var(--apagado)}
.venc .nota-venc{font-size:.82rem;color:var(--apagado);overflow-wrap:anywhere}
.venc svg{width:17px;height:17px;flex:0 0 auto;opacity:.45}
.venc.pasado{border-left-color:var(--rojo)}
.venc.pasado .cuando span{color:var(--rojo);font-weight:600}
.venc.cerca{border-left-color:var(--oro)}
.venc.cerca .cuando span{color:var(--oro);font-weight:600}
.venc.hecho{opacity:.55}

.aviso-fechas{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--linea);border-left:3px solid var(--oro)}
.aviso-fechas .fila{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.aviso-fechas h2{margin:0 0 3px}
.aviso-fechas .et{color:var(--apagado)}
.aviso-fechas .flecha svg{width:17px;height:17px;opacity:.45}
.mini-venc{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip-venc{font-size:.78rem;padding:4px 9px;border-radius:var(--r-pildora);background:var(--superficie-2);
  color:var(--apagado);white-space:nowrap}
.chip-venc b{color:var(--tinta);font-variant-numeric:tabular-nums}
.chip-venc.pasado{background:rgba(184,73,42,.1);color:var(--rojo)}
.chip-venc.cerca{background:var(--oro-fondo);color:var(--oro)}

.pista{font-size:.84rem;line-height:1.5;color:var(--tinta);background:var(--superficie-2);
  border-radius:11px;padding:10px 12px;margin:-4px 0 14px}
.pista .apagado{color:var(--apagado)}
.casilla.suelta{margin:2px 0 16px}