/* PRONS Obras Inteligentes — identidad tomada de prons.com.ar (Outfit + Inter, azules #2c7de3 / #193d76). */
@font-face { font-family: 'Outfit'; src: url('/fuentes/Outfit.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fuentes/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  --azul: #2c7de3; --azul-hondo: #193d76; --azul-noche: #0d2346; --azul-suave: #dcedff; --azul-claro: #eef5fe;
  --texto: #10233c; --gris: #60748f; --gris-claro: #94a3b8; --linea: #dce7f4; --fondo: #f5f8fc; --fondo-2: #ebf1f8; --blanco: #fff;
  --verde: #0f9f6e; --verde-suave: #dcf5ea; --ambar: #d98a04; --ambar-suave: #fff1d6; --rojo: #d63b3b; --rojo-suave: #fde4e4;
  --sombra: 0 1px 2px rgba(16, 35, 60, .04), 0 8px 24px rgba(16, 35, 60, .06);
  --sombra-alta: 0 24px 60px rgba(13, 35, 70, .18);
  --radio: 20px; --radio-chico: 12px;
  --t: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Inter, system-ui, sans-serif; color: var(--texto); background: var(--fondo); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .titulo { font-family: Outfit, Inter, sans-serif; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 30px; font-weight: 700; } h2 { font-size: 22px; font-weight: 650; } h3 { font-size: 17px; font-weight: 600; }
a { color: var(--azul); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.ico { flex: none; }
.muted { color: var(--gris); } .chico { font-size: 12.5px; } .num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 22px 14px; background: var(--blanco); border-right: 1px solid var(--linea); z-index: 20; }
.lateral .logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.lateral .logo img { height: 30px; }
.lateral .logo small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-top: 2px; }
.nav-titulo { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-claro); padding: 14px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--gris); font-weight: 500; transition: background .2s, color .2s; }
.nav a:hover { background: var(--fondo); color: var(--texto); }
.nav a.activo { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.nav a.activo .ico { stroke-width: 2.1; }
.lateral .pie { margin-top: auto; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, var(--azul-hondo), var(--azul)); color: #fff; }
.lateral .pie .nombre { font-weight: 600; } .lateral .pie .rol { font-size: 12px; opacity: .8; text-transform: capitalize; }
.lateral .pie button { margin-top: 10px; width: 100%; background: rgba(255,255,255,.14); border: 0; color: #fff; padding: 8px; border-radius: 10px; cursor: pointer; display: flex; gap: 8px; justify-content: center; align-items: center; }
.lateral .pie button:hover { background: rgba(255,255,255,.24); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.superior { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 14px; padding: 14px 32px; background: rgba(245, 248, 252, .82); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; }
.superior.con-borde { border-color: var(--linea); }
.migas { display: flex; align-items: center; gap: 8px; color: var(--gris); font-weight: 500; min-width: 0; }
.migas b { color: var(--texto); font-family: Outfit; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; color: var(--gris); cursor: pointer; min-width: 240px; transition: border-color .2s, box-shadow .2s; }
.buscador:hover { border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-claro); }
.buscador kbd { margin-left: auto; font-family: Inter; font-size: 11px; background: var(--fondo-2); padding: 2px 7px; border-radius: 6px; }
.contenido { padding: 8px 32px 64px; max-width: 1480px; width: 100%; animation: entra .45s var(--t); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Componentes ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px; min-width: 0; }
.tarjeta > header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tabla td .fila { flex-wrap: nowrap; }
.tarjeta > header h3 { display: flex; align-items: center; gap: 9px; }
.tarjeta > header .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.grilla { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .g-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.pila { display: flex; flex-direction: column; gap: 18px; }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.kpi { position: relative; overflow: hidden; }
.kpi .etq { color: var(--gris); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.kpi .val { font-family: Outfit; font-size: 30px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }
.kpi .sub { font-size: 12.5px; color: var(--gris); margin-top: 2px; }
.kpi .ico-fondo { position: absolute; right: -8px; bottom: -10px; opacity: .07; color: var(--azul); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); cursor: pointer; font-weight: 550; transition: all .18s var(--t); white-space: nowrap; }
.btn:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-1px); }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(44, 125, 227, .3); }
.btn-primario:hover { background: #1f6fd4; color: #fff; }
.btn-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; } .btn-peligro:hover { color: #fff; background: #bf2f2f; }
.btn-chico { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-icono { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 0; background: transparent; cursor: pointer; color: var(--gris); }
.btn-icono:hover { background: var(--fondo-2); color: var(--texto); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--fondo-2); color: var(--gris); }
.chip.azul { background: var(--azul-suave); color: var(--azul-hondo); } .chip.verde { background: var(--verde-suave); color: #08724f; }
.chip.ambar { background: var(--ambar-suave); color: #8a5800; } .chip.rojo { background: var(--rojo-suave); color: #a32323; }
.chip .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip .punto.vivo { animation: latido 1.6s infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 4px transparent; } }

label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 550; color: var(--gris); }
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], input[type=tel], select, textarea {
  width: 100%; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--linea); background: var(--blanco); color: var(--texto); font-weight: 450; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-claro); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .ancho { grid-column: 1 / -1; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 550; color: var(--texto); }
.interruptor input { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--linea); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--t); }
.interruptor input:checked { background: var(--azul); } .interruptor input:checked::after { transform: translateX(16px); }
.acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 12px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 12px; border-bottom: 1px solid var(--fondo-2); vertical-align: middle; }
.tabla tr:hover td { background: #f9fbfe; }
.tabla td.acc { text-align: right; white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--azul), var(--azul-hondo)); flex: none; }

.pestanas { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--fondo-2); border-radius: 14px; margin: 6px 0 22px; }
.pestanas a { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 11px; color: var(--gris); font-weight: 550; white-space: nowrap; transition: all .2s; }
.pestanas a:hover { color: var(--texto); }
.pestanas a.activo { background: var(--blanco); color: var(--azul); box-shadow: var(--sombra); }
.secciones { display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 20px; }
.secciones a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); color: var(--gris); font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.secciones a:hover { color: var(--texto); }
.secciones a.activo { background: var(--azul); border-color: var(--azul); color: #fff; }

.vacio { text-align: center; padding: 48px 20px; color: var(--gris); }
.vacio .ico-grande { width: 64px; height: 64px; border-radius: 20px; display: inline-grid; place-items: center; background: var(--azul-claro); color: var(--azul); margin-bottom: 14px; }
.vacio h3 { color: var(--texto); margin-bottom: 6px; }
.esqueleto { background: linear-gradient(90deg, var(--fondo-2), #f6f9fc, var(--fondo-2)); background-size: 200% 100%; animation: brillo 1.3s infinite; border-radius: var(--radio); min-height: 120px; }
@keyframes brillo { to { background-position: -200% 0; } }

.barra { height: 10px; background: var(--fondo-2); border-radius: 99px; overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--azul), #5aa2f0); transition: width 1s var(--t); }

.modal-fondo { position: fixed; inset: 0; z-index: 100; background: rgba(13, 35, 70, .42); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: aparece .2s; }
.modal-fondo.sale { opacity: 0; transition: opacity .18s; }
@keyframes aparece { from { opacity: 0; } }
.modal { width: 100%; max-height: 92vh; overflow: auto; background: var(--blanco); border-radius: 24px; box-shadow: var(--sombra-alta); animation: sube .3s var(--t); }
@keyframes sube { from { transform: translateY(16px) scale(.98); opacity: 0; } }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.modal-cuerpo { padding: 18px 24px 24px; }

.avisos { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.aviso { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--azul-noche); color: #fff; box-shadow: var(--sombra-alta); font-weight: 500; animation: sube .3s var(--t); }
.aviso-ok .ico { color: #5ee0a8; } .aviso-error { background: #7a1f1f; }
.aviso.sale { opacity: 0; transform: translateY(8px); transition: all .35s; }

/* ---------- Ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); }
.ingreso .escena { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 20% 0%, #2c7de3 0%, transparent 60%), linear-gradient(160deg, #0d2346 0%, #193d76 55%, #1d5bb0 100%); color: #fff; padding: 44px 52px; display: flex; flex-direction: column; }
.ingreso .escena::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 60% 60%, #000 30%, transparent 75%); }
.ingreso .escena h1 { font-size: 46px; line-height: 1.05; max-width: 560px; margin-top: 28px; position: relative; }
.ingreso .escena h1 em { font-style: normal; background: linear-gradient(90deg, #8cc0f5, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ingreso .escena p { max-width: 520px; opacity: .82; font-size: 16px; position: relative; }
.ingreso .escena .gemelo { position: relative; flex: 1; min-height: 300px; margin-top: 10px; }
.ingreso .escena .fecha-anim { position: relative; display: flex; gap: 10px; align-items: center; font-family: Outfit; font-size: 15px; opacity: .9; }
.ingreso .escena .fecha-anim .barra { flex: 1; max-width: 340px; background: rgba(255,255,255,.15); height: 6px; }
.ingreso .formulario { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 6vw, 80px); background: var(--blanco); }
.ingreso .formulario img { height: 40px; align-self: flex-start; margin-bottom: 34px; }
.ingreso .formulario form { display: flex; flex-direction: column; gap: 14px; }
.ingreso .formulario .btn-primario { justify-content: center; padding: 13px; font-size: 15px; margin-top: 6px; }
.demo-cuentas { margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--linea); }
.demo-cuentas .lista { display: grid; gap: 8px; margin-top: 10px; }
.demo-cuentas button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--linea); background: var(--fondo); border-radius: 14px; cursor: pointer; text-align: left; transition: all .2s var(--t); }
.demo-cuentas button:hover { border-color: var(--azul); background: var(--azul-claro); transform: translateX(3px); }
.demo-cuentas button b { display: block; } .demo-cuentas button span { font-size: 12.5px; color: var(--gris); }
.error-form { color: var(--rojo); font-weight: 500; min-height: 20px; }

/* ---------- Gemelo digital ---------- */
.gemelo { position: relative; }
.gemelo-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.g-lote { fill: #cfe3d2; stroke: #b5d1ba; stroke-width: 1; opacity: .9; }
.g-suelo { opacity: .55; } .g-suelo.d { fill: #a57f5d; } .g-suelo.i { fill: #8c6a4d; }
.g-estrato { stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 5; }
.g-pilote { fill: #4b3a2c; stroke: #c9b49d; stroke-width: .8; }
.g-fantasma { fill: rgba(44,125,227,.03); stroke: rgba(44,125,227,.35); stroke-width: 1; stroke-dasharray: 4 4; }
.g-columna { stroke: #8a97a8; stroke-width: 3.2; stroke-linecap: round; }
.g-encofrado { fill: rgba(217,138,4,.22); stroke: #d98a04; stroke-width: 1.4; stroke-dasharray: 5 3; }
.g-montante { stroke: rgba(255,255,255,.45); stroke-width: 1; }
.g-luz { fill: #ffd98a; opacity: .92; filter: drop-shadow(0 0 3px #ffc44d); }
.g-borde-resaltado { fill: rgba(44,125,227,.18); stroke: #2c7de3; stroke-width: 3; filter: url(#g-brillo); animation: resalta 2s ease-in-out infinite; }
@keyframes resalta { 50% { fill: rgba(44,125,227,.38); } }
.g-acero { stroke: #f2b01e; stroke-width: 2.2; } .g-acero.fino { stroke-width: 1.1; } .g-acero.grueso { stroke-width: 3.2; }
.g-cable { stroke: #44505e; stroke-width: 1; } .g-carga { fill: #d98a04; }
.g-rotulo { font: 600 10.5px Inter; fill: var(--gris); } .g-rotulo.sub { fill: #a57f5d; }
.g-pin line { stroke: var(--azul); stroke-width: 1.5; } .g-pin circle { fill: var(--azul); }
.g-pin .onda { fill: none; stroke: var(--azul); animation: onda 1.8s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }
.g-pin rect { fill: var(--azul); filter: drop-shadow(0 4px 10px rgba(44,125,227,.45)); }
.g-pin text { font: 600 12px Inter; fill: #fff; }
.g-piso { transition: opacity .3s; } .g-piso:hover { opacity: .85; cursor: pointer; }
.escena .g-rotulo { fill: rgba(255,255,255,.6); } .escena .g-lote { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.2); }
.escena .g-fantasma { stroke: rgba(255,255,255,.3); fill: rgba(255,255,255,.02); }

/* ---------- Máquina del tiempo ---------- */
.maquina { padding: 0; overflow: hidden; }
.maquina .escenario { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 440px; }
.maquina .foto { position: relative; background: #0d2346; overflow: hidden; }
.maquina .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.maquina .foto .velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,35,70,.55) 0%, transparent 28%, transparent 62%, rgba(13,35,70,.75) 100%); pointer-events: none; }
.maquina .foto .arriba { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; gap: 8px; align-items: center; color: #fff; }
.maquina .foto .abajo { position: absolute; bottom: 16px; left: 20px; right: 20px; color: #fff; display: flex; align-items: flex-end; gap: 16px; }
.maquina .foto .fecha-grande { font-family: Outfit; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.maquina .foto .etapa { font-size: 14px; opacity: .9; margin-top: 6px; }
.maquina .foto .vidrio { background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.maquina .proyeccion-sello { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); border: 2px solid #fff; color: #fff; padding: 10px 20px; border-radius: 12px; font-family: Outfit; font-weight: 700; letter-spacing: .12em; background: rgba(44,125,227,.35); backdrop-filter: blur(4px); text-align: center; }
.maquina .proyeccion-sello small { display: block; font-family: Inter; font-weight: 500; letter-spacing: 0; font-size: 12px; opacity: .9; }
.maquina .modelo { position: relative; background: radial-gradient(500px 300px at 50% 30%, #eef5fe, #fff 70%); padding: 18px; display: flex; flex-direction: column; }
.maquina .modelo .gemelo { flex: 1; min-height: 300px; }
.maquina .modelo .leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--gris); justify-content: center; }
.maquina .modelo .leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.maquina .metricas { position: absolute; top: 16px; right: 16px; display: grid; gap: 8px; }
.maquina .metricas div { background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border: 1px solid var(--linea); border-radius: 12px; padding: 6px 12px; font-size: 12px; color: var(--gris); text-align: right; }
.maquina .metricas b { display: block; font-family: Outfit; font-size: 18px; color: var(--texto); }
.control-tiempo { padding: 16px 22px 20px; border-top: 1px solid var(--linea); display: flex; gap: 16px; align-items: center; }
.btn-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--azul); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 8px 20px rgba(44,125,227,.4); transition: transform .2s var(--t); }
.btn-play:hover { transform: scale(1.06); }
.pista { position: relative; flex: 1; height: 54px; cursor: pointer; user-select: none; touch-action: none; }
.pista .segmentos { position: absolute; left: 0; right: 0; top: 22px; height: 10px; border-radius: 99px; overflow: hidden; display: flex; background: var(--fondo-2); }
.pista .segmentos span { height: 100%; opacity: .85; }
.pista .futuro { position: absolute; top: 22px; height: 10px; border-radius: 0 99px 99px 0; background: repeating-linear-gradient(-45deg, var(--fondo-2) 0 6px, #dfe8f3 6px 12px); }
.pista .marca { position: absolute; top: 14px; width: 3px; height: 26px; margin-left: -1.5px; border-radius: 2px; background: var(--azul-hondo); opacity: .55; }
.pista .marca:hover { opacity: 1; }
.pista .marca::after { content: attr(data-t); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--azul-noche); color: #fff; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.pista .marca:hover::after { opacity: 1; }
.pista .perilla { position: absolute; top: 13px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: #fff; border: 3px solid var(--azul); box-shadow: 0 4px 14px rgba(44,125,227,.45); transition: left .08s linear; }
.pista .hoy { position: absolute; top: 4px; height: 46px; width: 0; border-left: 2px dashed var(--azul); }
.pista .hoy::before { content: 'Última foto'; position: absolute; top: -12px; left: 4px; font-size: 10.5px; color: var(--azul); font-weight: 600; white-space: nowrap; }
.pista .eje { position: absolute; top: 38px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--gris); }

/* ---------- Comprador: inicio ---------- */
.hogar { position: relative; border-radius: 28px; overflow: hidden; color: #fff; min-height: 420px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #0d2346; }
.hogar .fondo { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(2px) saturate(1.1); transform: scale(1.05); opacity: .55; }
.hogar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(13,35,70,.95) 0%, rgba(13,35,70,.7) 45%, rgba(13,35,70,.2) 100%); }
.hogar > * { position: relative; z-index: 1; }
.hogar .texto { padding: 38px 40px; display: flex; flex-direction: column; gap: 14px; }
.hogar h1 { font-size: 40px; line-height: 1.05; }
.hogar .gemelo { min-height: 380px; padding: 10px; }
.hogar .gemelo .g-lote { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.25); }
.hogar .gemelo .g-rotulo { fill: rgba(255,255,255,.7); }
.hogar .gemelo .g-fantasma { stroke: rgba(255,255,255,.4); }
.anillos { display: flex; gap: 22px; margin-top: 8px; flex-wrap: wrap; }
.anillo { display: flex; align-items: center; gap: 12px; }
.anillo svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 7; } .anillo .fondo-a { stroke: rgba(255,255,255,.15); }
.anillo .valor-a { stroke: #8cc0f5; stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--t); }
.anillo b { font-family: Outfit; font-size: 26px; display: block; line-height: 1; } .anillo span { font-size: 12.5px; opacity: .8; }
.cuenta { display: flex; gap: 8px; margin-top: 4px; }
.cuenta div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 8px 12px; text-align: center; min-width: 70px; }
.cuenta b { font-family: Outfit; font-size: 24px; display: block; } .cuenta span { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }

/* Historias */
.historias { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.historia { flex: none; width: 82px; text-align: center; cursor: pointer; background: none; border: 0; padding: 0; }
.historia .aro { width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #2c7de3, #8cc0f5, #0ea5b7, #2c7de3); transition: transform .2s var(--t); }
.historia.vista .aro { background: var(--linea); }
.historia:hover .aro { transform: scale(1.06); }
.historia img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; display: block; }
.historia span { display: block; font-size: 11.5px; margin-top: 6px; color: var(--texto); font-weight: 550; line-height: 1.25; }
.visor { position: fixed; inset: 0; z-index: 150; background: #050d1a; display: grid; place-items: center; animation: aparece .2s; }
.visor .marco { position: relative; width: min(440px, 100vw); height: min(780px, 100vh); border-radius: 22px; overflow: hidden; background: #0d2346; }
.visor .marco img { width: 100%; height: 100%; object-fit: cover; animation: zoom 6s linear forwards; }
@keyframes zoom { from { transform: scale(1.0); } to { transform: scale(1.12); } }
.visor .progreso { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 2; }
.visor .progreso i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.visor .progreso i b { display: block; height: 100%; width: 0; background: #fff; }
.visor .progreso i.hecho b { width: 100%; } .visor .progreso i.actual b { animation: llena 6s linear forwards; }
@keyframes llena { to { width: 100%; } }
.visor .cab { position: absolute; top: 26px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; color: #fff; z-index: 2; font-weight: 600; }
.visor .cab img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 4px; animation: none; object-fit: contain; }
.visor .pie-h { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 22px 28px; background: linear-gradient(transparent, rgba(5,13,26,.92)); color: #fff; }
.visor .pie-h h2 { font-size: 26px; } .visor .pie-h p { opacity: .85; margin: 6px 0 0; }
.visor .zona { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 1; cursor: pointer; } .visor .zona.izq { left: 0; } .visor .zona.der { right: 0; }
.visor .cerrar { position: absolute; top: 18px; right: 18px; z-index: 3; color: #fff; }

/* ---------- Calendario de fotos ---------- */
.cal-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-cab h3 { min-width: 170px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dn { text-align: center; font-size: 11.5px; color: var(--gris); font-weight: 600; padding: 4px 0; }
.cal .d { aspect-ratio: 1.15; border-radius: 12px; background: var(--fondo); border: 1px solid transparent; position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--gris-claro); }
.cal .d.con { color: #fff; cursor: pointer; background-size: cover; background-position: center; }
.cal .d.con::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,35,70,.55), rgba(13,35,70,.1)); transition: background .2s; }
.cal .d.con:hover::before { background: rgba(44,125,227,.35); }
.cal .d.con span, .cal .d.con em { position: relative; }
.cal .d.con em { position: absolute; left: 7px; bottom: 6px; font-style: normal; font-size: 11px; background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 6px; }
/* Calendario de actividad: color según horas trabajadas */
.cal-act .d { flex-direction: column; align-items: flex-start; justify-content: space-between; aspect-ratio: auto; min-height: 74px; padding: 6px 8px; }
.cal-act .d.hay { cursor: pointer; color: var(--texto); border-color: var(--linea); background: var(--blanco); }
.cal-act .d.hay.n1 { background: #eef5fe; } .cal-act .d.hay.n2 { background: #dcedff; } .cal-act .d.hay.n3 { background: #b9d8fb; } .cal-act .d.hay.n4 { background: #8ec0f7; }
.cal-act .d.sel { border: 2px solid var(--azul); }
.cal-act .d.hay.sin-act { background: var(--rojo-suave); border-color: #f5c2c2; }
.leyenda-act { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--gris); }
.leyenda-act span { display: flex; align-items: center; gap: 6px; }
.leyenda-act i { width: 12px; height: 12px; border-radius: 4px; background: var(--fondo); border: 1px solid var(--linea); }
.leyenda-act i.con { background: #8ec0f7; border-color: #8ec0f7; } .leyenda-act i.sin { background: var(--rojo-suave); border-color: #f5c2c2; }
.cal-act .d small { font-size: 11px; color: var(--gris); font-weight: 600; line-height: 1.2; }
.cal-act .d em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--azul-hondo); }
.horas-dia { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 90px; background: var(--fondo); border-radius: 10px; padding: 6px; }
.horas-dia i { display: block; background: var(--linea); border-radius: 3px; }
.horas-dia i.con { background: var(--azul); }
.horas-eje { display: flex; justify-content: space-between; font-size: 11px; color: var(--gris); margin-top: 4px; }
.cal .d.sel { outline: 3px solid var(--azul); outline-offset: 1px; }
.cal .d.fuera { visibility: hidden; }
.mapa-calor { display: flex; gap: 3px; flex-wrap: wrap; }
.mapa-calor i { width: 13px; height: 13px; border-radius: 3px; background: var(--fondo-2); cursor: pointer; }
.mapa-calor i.n1 { background: #b9d6f7; } .mapa-calor i.n2 { background: #6aa8ee; } .mapa-calor i.n3 { background: #2c7de3; } .mapa-calor i.n4 { background: #193d76; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galeria figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; cursor: zoom-in; aspect-ratio: 16/10; background: var(--fondo-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--t); }
.galeria figure:hover img { transform: scale(1.06); }
.galeria figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; color: #fff; background: rgba(13,35,70,.6); padding: 2px 8px; border-radius: 8px; }
.lightbox { position: fixed; inset: 0; z-index: 160; background: rgba(5,13,26,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; animation: aparece .2s; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 14px; box-shadow: var(--sombra-alta); }
.lightbox .barra-l { display: flex; gap: 10px; align-items: center; color: #fff; }
.lightbox .btn { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }

/* Antes / después */
.comparador { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; user-select: none; touch-action: none; cursor: ew-resize; background: #0d2346; }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparador .despues { clip-path: inset(0 0 0 50%); }
.comparador .divisor { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.4); }
.comparador .divisor::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--azul); display: grid; place-items: center; font-size: 20px; font-weight: 700; box-shadow: var(--sombra-alta); }
.comparador .rot { position: absolute; top: 14px; padding: 5px 12px; border-radius: 99px; background: rgba(13,35,70,.65); color: #fff; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(6px); }
.comparador .rot.a { left: 14px; } .comparador .rot.b { right: 14px; }

/* ---------- En vivo ---------- */
.envivo { position: relative; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; background: #050d1a; color: #fff; }
.envivo video, .envivo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.envivo .hud { position: absolute; inset: 0; pointer-events: none; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 25%, transparent 75%, rgba(0,0,0,.5)); }
.envivo .hud .fila { justify-content: space-between; }
.envivo .rec { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: .08em; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; background: rgba(214,59,59,.9); }
.envivo .rec i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: titila 1.2s infinite; }
@keyframes titila { 50% { opacity: .2; } }
.envivo .espera { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 50%, #12305e, #050d1a 70%); }
.radar { position: relative; width: 170px; height: 170px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid rgba(140,192,245,.35); background: radial-gradient(circle, transparent 32%, rgba(140,192,245,.18) 33%, transparent 34%, transparent 65%, rgba(140,192,245,.18) 66%, transparent 67%); }
.radar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(44,125,227,.65), transparent 25%); animation: gira 2.6s linear infinite; }
.radar::after { content: ''; position: absolute; inset: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #8cc0f5; box-shadow: 0 0 18px #8cc0f5; }
@keyframes gira { to { transform: rotate(360deg); } }
.envivo .ruido { position: absolute; inset: 0; opacity: .06; background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); animation: barrido 8s linear infinite; pointer-events: none; }
@keyframes barrido { to { background-position: 0 300px; } }
.pasos { display: grid; gap: 10px; }
.paso { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--fondo); }
.paso .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--fondo-2); color: var(--gris); flex: none; }
.paso.ok .n { background: var(--verde); color: #fff; } .paso.actual .n { background: var(--azul); color: #fff; box-shadow: 0 0 0 5px var(--azul-claro); }
.paso b { display: block; } .paso span { font-size: 12.5px; color: var(--gris); }
.cam-mini { display: flex; gap: 10px; align-items: center; }
.led { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--gris-claro); }
.led.verde { background: #19c37d; box-shadow: 0 0 0 4px rgba(25,195,125,.18); } .led.ambar { background: #f0a30a; box-shadow: 0 0 0 4px rgba(240,163,10,.18); animation: titila 1.6s infinite; } .led.rojo { background: var(--rojo); box-shadow: 0 0 0 4px rgba(214,59,59,.18); }

/* ---------- Clima ---------- */
.clima-hoy { display: flex; align-items: center; gap: 22px; padding: 26px; border-radius: var(--radio); color: #fff; background: linear-gradient(135deg, #1d5bb0, #2c7de3 55%, #5aa2f0); position: relative; overflow: hidden; }
.clima-hoy .t { font-family: Outfit; font-size: 64px; font-weight: 300; line-height: 1; }
.clima-hoy .em { font-size: 64px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.2)); }
.horas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.hora { flex: none; width: 58px; text-align: center; padding: 10px 4px; border-radius: 14px; background: var(--fondo); font-size: 12px; }
.hora .e { font-size: 20px; margin: 4px 0; } .hora b { font-family: Outfit; font-size: 15px; }
.semaforo { display: grid; grid-template-columns: 180px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.semaforo .cab-d { text-align: center; font-size: 12px; color: var(--gris); font-weight: 600; }
.semaforo .cab-d b { display: block; font-size: 18px; color: var(--texto); font-family: Outfit; }
.semaforo .tarea { font-weight: 600; font-size: 13px; }
.semaforo .s { height: 40px; border-radius: 12px; display: grid; place-items: center; cursor: help; transition: transform .15s; }
.semaforo .s:hover { transform: scale(1.06); }
.semaforo .s.ok { background: var(--verde-suave); color: var(--verde); } .semaforo .s.precaucion { background: var(--ambar-suave); color: var(--ambar); } .semaforo .s.no { background: var(--rojo-suave); color: var(--rojo); }

/* ---------- Centro de control ---------- */
.mapa { height: 360px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); z-index: 0; }
.obra-tarjeta { cursor: pointer; padding: 0; overflow: hidden; transition: transform .25s var(--t), box-shadow .25s; }
.obra-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.obra-tarjeta .img { height: 168px; background: linear-gradient(135deg, #193d76, #2c7de3); background-size: cover; background-position: center; position: relative; }
.obra-tarjeta .img .chips { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.obra-tarjeta .img .mini-gemelo { position: absolute; inset: 10px 10px 0; }
.obra-tarjeta .cuerpo { padding: 16px 18px 18px; }
.obra-tarjeta h3 { font-size: 18px; } .obra-tarjeta .pie-t { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--gris); }
.marcador-obra { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--azul); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(13,35,70,.35); display: grid; place-items: center; }
.marcador-obra span { transform: rotate(45deg); color: #fff; font-weight: 700; font-size: 12px; }
.marcador-obra.pendiente { background: var(--ambar); }

/* ---------- Unidades (planta por pisos) ---------- */
.torre { display: flex; flex-direction: column-reverse; gap: 6px; }
.torre .nivel { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; }
.torre .nivel > b { font-family: Outfit; color: var(--gris); text-align: right; font-size: 13px; }
.torre .deptos { display: grid; gap: 6px; }
.depto { border-radius: 10px; padding: 9px 8px; font-weight: 600; font-size: 13px; text-align: center; cursor: pointer; border: 2px solid transparent; transition: transform .15s var(--t); }
.depto:hover { transform: translateY(-2px); }
.depto.disponible { background: var(--verde-suave); color: #08724f; } .depto.reservada { background: var(--ambar-suave); color: #8a5800; } .depto.vendida { background: var(--azul-suave); color: var(--azul-hondo); }
.depto small { display: block; font-weight: 500; font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Paleta de comandos ---------- */
.paleta { position: fixed; inset: 0; z-index: 180; background: rgba(13,35,70,.35); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: aparece .15s; }
.paleta .caja { width: min(620px, 92vw); background: #fff; border-radius: 20px; box-shadow: var(--sombra-alta); overflow: hidden; animation: sube .2s var(--t); }
.paleta input { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 18px 22px; font-size: 17px; box-shadow: none !important; }
.paleta ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.paleta li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; cursor: pointer; }
.paleta li.sel { background: var(--azul-claro); color: var(--azul); }
.paleta li small { margin-left: auto; color: var(--gris); }

/* ---------- Asistente ---------- */
.fab { position: fixed; right: 26px; bottom: 26px; z-index: 90; height: 56px; padding: 0 22px 0 18px; border-radius: 999px; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--azul-hondo), var(--azul)); box-shadow: 0 14px 34px rgba(25,61,118,.45); transition: transform .2s var(--t); }
.fab:hover { transform: translateY(-3px); }
.fab .chispa { animation: gira 6s linear infinite; }
.chat { position: fixed; right: 26px; bottom: 96px; z-index: 95; width: min(400px, calc(100vw - 32px)); height: min(560px, 70vh); background: #fff; border-radius: 24px; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; overflow: hidden; animation: sube .25s var(--t); }
.chat header { padding: 16px 18px; color: #fff; background: linear-gradient(135deg, var(--azul-hondo), var(--azul)); display: flex; align-items: center; gap: 10px; }
.chat header .btn-icono { color: #fff; margin-left: auto; } .chat header .btn-icono:hover { background: rgba(255,255,255,.15); }
.chat .mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fondo); }
.msj { max-width: 86%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; animation: sube .25s var(--t); }
.msj.yo { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.msj.obra { align-self: flex-start; background: #fff; border: 1px solid var(--linea); border-bottom-left-radius: 6px; }
.msj.obra small { display: block; color: var(--gris-claro); font-size: 11px; margin-top: 4px; }
.escribiendo span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--gris-claro); animation: salta 1s infinite; }
.escribiendo span:nth-child(2) { animation-delay: .15s; } .escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes salta { 50% { transform: translateY(-5px); } }
.chat .sugerencias { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px 0; }
.chat .sugerencias button { border: 1px solid var(--linea); background: #fff; border-radius: 99px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.chat .sugerencias button:hover { border-color: var(--azul); color: var(--azul); }
.chat form { display: flex; gap: 8px; padding: 12px 14px 14px; }
.chat form input { border-radius: 99px; }

/* ---------- Varios ---------- */
.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.reel { position: relative; border-radius: 18px; overflow: hidden; background: #0d2346; aspect-ratio: 9/16; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel .pie-r { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; display: flex; gap: 6px; background: linear-gradient(transparent, rgba(13,35,70,.85)); color: #fff; font-size: 12.5px; font-weight: 600; align-items: center; }
.reel .pie-r .btn-icono { color: #fff; margin-left: auto; width: 30px; height: 30px; } .reel .pie-r .btn-icono:hover { background: rgba(255,255,255,.2); }
.codigo { background: var(--azul-noche); color: #cfe3ff; border-radius: 14px; padding: 16px; font: 12.5px/1.6 ui-monospace, Menlo, monospace; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.navegador { border-radius: 16px; border: 1px solid var(--linea); overflow: hidden; box-shadow: var(--sombra); }
.navegador .cab-n { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: var(--fondo-2); }
.navegador .cab-n i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; } .navegador .cab-n i:nth-child(2) { background: #fbbf24; } .navegador .cab-n i:nth-child(3) { background: #34d399; }
.navegador .cab-n span { margin-left: 10px; background: #fff; border-radius: 8px; padding: 3px 12px; font-size: 12px; color: var(--gris); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navegador iframe { width: 100%; height: 520px; border: 0; display: block; background: #fff; }
.linea-hitos { position: relative; padding-left: 26px; }
.linea-hitos::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--linea); }
.hito { position: relative; padding: 0 0 18px; }
.hito::before { content: ''; position: absolute; left: -23px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--azul); }
.hito.losa::before { border-color: var(--azul-hondo); background: var(--azul-hondo); } .hito.etapa_fin::before { border-color: var(--verde); }
.hito b { display: block; } .hito span { font-size: 12.5px; color: var(--gris); }
.burbuja-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.envio-fila .canal { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; }
.canal.email { background: var(--azul-suave); color: var(--azul); } .canal.whatsapp { background: #d9f7e5; color: #128c4a; }
.vista-correo { width: 100%; height: 560px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; }
.burbuja-wa { background: #e7ffdb; border-radius: 14px 14px 14px 4px; padding: 12px 14px; white-space: pre-wrap; max-width: 420px; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 14px; }
.fondo-wa { background: #efe7dd; border-radius: 16px; padding: 22px; }

@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-7-5, .g-8-4, .g3 { grid-template-columns: minmax(0, 1fr); }
  .maquina .escenario, .hogar { grid-template-columns: minmax(0, 1fr); }
  .maquina .foto { min-height: 300px; }
  .semaforo { grid-template-columns: 120px repeat(7, minmax(44px, 1fr)); overflow-x: auto; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px 8px; border-right: 0; border-top: 1px solid var(--linea); overflow-x: auto; gap: 2px; }
  .lateral .logo, .lateral .pie, .nav-titulo { display: none; }
  .lateral .nav { display: contents; }
  .nav a { flex-direction: column; gap: 2px; font-size: 10.5px; padding: 7px 10px; flex: none; }
  .superior { padding: 12px 16px; } .buscador { min-width: 0; } .buscador span, .buscador kbd { display: none; }
  .contenido { padding: 4px 16px 96px; }
  .g2, .g4, .form { grid-template-columns: minmax(0, 1fr); }
  .ingreso { grid-template-columns: minmax(0, 1fr); } .ingreso .escena { min-height: 360px; padding: 28px; } .ingreso .escena h1 { font-size: 32px; }
  .hogar .texto { padding: 26px; } .hogar h1 { font-size: 30px; }
  .fab { bottom: 84px; right: 16px; } .fab span { display: none; } .chat { bottom: 150px; right: 16px; }
  .control-tiempo { padding: 12px 14px 16px; }
}
.visor .marco::before { content: ''; position: absolute; inset: 0 0 auto; height: 140px; background: linear-gradient(rgba(5,13,26,.7), transparent); z-index: 1; pointer-events: none; }

/* ---------- Generar reels ---------- */
.dialogo-reels { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; align-items: start; }
.celular { border-radius: 34px; padding: 10px; background: #0b1424; box-shadow: var(--sombra-alta); }
.celular .pantalla { position: relative; aspect-ratio: 9/16; border-radius: 26px; overflow: hidden; background: #193d76 center/cover; font-family: Outfit; color: #fff; text-align: center; }
.celular .pantalla::before { content: ''; position: absolute; inset: 0; background: rgba(5,13,26,.25); }
.celular .pantalla > * { position: relative; }
.celular .p-marca { display: inline-block; margin-top: 22px; padding: 4px 10px; font-weight: 700; font-size: 13px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celular .p-titulo { display: inline-block; margin: 92px auto 0; padding: 6px 12px; font-weight: 700; font-size: 20px; }
.celular .p-cta { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.celular .p-cta span { background: rgba(25,61,118,.88); padding: 3px 9px; font-size: 12px; font-weight: 600; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celular .p-cta span:empty { display: none; }
.celular .p-pie { position: absolute; left: 0; right: 0; bottom: 16px; font-size: 10px; opacity: .8; font-family: Inter; }
.generando { padding: 16px 18px; border-radius: 16px; background: var(--azul-claro); border: 1px solid var(--azul-suave); margin-bottom: 18px; }
.generando b { display: inline-flex; gap: 8px; align-items: center; color: var(--azul-hondo); }
.generando b .ico { animation: gira 3s linear infinite; }
.generando .barra > i { background: linear-gradient(90deg, var(--azul), #5aa2f0, var(--azul)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
.pasitos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pasitos span { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--gris); }
.pasitos span.ok { background: var(--verde-suave); color: #08724f; } .pasitos span.actual { background: var(--azul); color: #fff; }
@media (max-width: 820px) { .dialogo-reels { grid-template-columns: minmax(0, 1fr); } .celular { max-width: 230px; margin: 0 auto; } }
.maquina.sin-modelo .escenario { grid-template-columns: minmax(0, 1fr); min-height: 520px; }
.maquina.sin-modelo .modelo { position: absolute; top: 0; right: 0; background: none; padding: 0; pointer-events: none; }
.maquina.sin-modelo .modelo .gemelo, .maquina.sin-modelo .modelo .leyenda { display: none; }
.maquina.sin-modelo .metricas { top: 60px; }
.maquina.sin-modelo .escenario { position: relative; }

/* ---------- Análisis con IA ---------- */
.ia-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.ia-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font-weight: 600; cursor: pointer; transition: all .2s var(--t); }
.ia-chip span { font-size: 18px; }
.ia-chip.activo { background: var(--azul-claro); color: var(--azul); border-color: var(--azul); }
.ia-nav select { width: auto; min-width: 170px; }
.ia-visor-t { padding: 0; overflow: hidden; }
.ia-barra { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.segmentado { display: inline-flex; padding: 3px; background: var(--fondo-2); border-radius: 12px; }
.segmentado button { border: 0; background: none; padding: 6px 14px; border-radius: 9px; font-weight: 600; color: var(--gris); cursor: pointer; }
.segmentado button.activo { background: #fff; color: var(--azul); box-shadow: var(--sombra); }
.ia-visor { position: relative; overflow: hidden; background: #0d2346; }
.ia-visor.con-lupa { cursor: zoom-in; }
.ia-lienzo { position: relative; transition: transform .15s ease-out; }
.ia-lienzo img { display: block; width: 100%; }
.ia-lienzo .ia-zona { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.ia-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ia-det { animation: aparece-punto .45s var(--t) both; transform-box: fill-box; transform-origin: center; }
@keyframes aparece-punto { from { opacity: 0; transform: scale(.2); } }
.ia-punto { fill: #22c55e; stroke: #fff; opacity: .92; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); transition: r .15s; cursor: pointer; }
.ia-det:hover .ia-punto { fill: #facc15; }
.ia-caja { fill: rgba(34,197,94,.13); stroke: #22c55e; }
.ia-det:hover .ia-caja { fill: rgba(250,204,21,.25); stroke: #facc15; }
.ia-escaneo { position: absolute; inset: 0; background: rgba(13,35,70,.35); display: grid; place-items: center; color: #fff; font-weight: 600; }
.ia-escaneo span { display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border-radius: 999px; background: rgba(13,35,70,.8); }
.ia-escaneo .linea { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #4ade80, transparent); box-shadow: 0 0 18px #4ade80; animation: escanea 1.6s ease-in-out infinite; }
@keyframes escanea { 0% { top: 0; } 50% { top: calc(100% - 3px); } 100% { top: 0; } }
.ia-total { border-radius: var(--radio); padding: 22px; color: var(--texto); background: var(--blanco); box-shadow: var(--sombra); }
.ia-total .chico { color: var(--gris); }
.ia-total .n { font-family: Outfit; font-size: 58px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
input[type=range] { accent-color: var(--azul); padding: 0; border: 0; }

@media (max-width: 820px) { .pestanas, .secciones { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

/* ---------- Ventas, cobranzas y portales ---------- */
.aviso-demo { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 16px; border-radius: 14px; background: var(--ambar-suave); color: #6b4500; font-size: 13.5px; }
.kpi-rojo { background: linear-gradient(135deg, #fff, var(--rojo-suave)); border-color: #f6c4c4; } .kpi-rojo .val { color: #a32323; }
.tarjeta-alerta { border-color: #f6c4c4; box-shadow: 0 10px 26px rgba(214,59,59,.10); } .tarjeta-alerta header h3 { color: #a32323; }
.depto { position: relative; }
.depto.sit-al_dia, .depto.sit-cancelada { background: var(--verde-suave); color: #08724f; } .depto.sit-atrasado { background: var(--ambar-suave); color: #8a5800; }
.depto.sit-moroso { background: var(--rojo-suave); color: #a32323; border-color: #f2a5a5; animation: latido-borde 2s infinite; }
.depto.libre { background: var(--fondo); color: var(--gris-claro); border: 2px dashed var(--linea); }
.depto .portales { position: absolute; top: -7px; right: -5px; font-style: normal; font-size: 9px; font-weight: 700; background: var(--azul); color: #fff; padding: 1px 5px; border-radius: 6px; letter-spacing: .03em; }
@keyframes latido-borde { 50% { border-color: transparent; } }
.morosos { display: flex; flex-direction: column; gap: 8px; }
.morosos .moroso { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linea); background: var(--blanco); cursor: pointer; color: var(--texto); font: inherit; transition: all .2s var(--t); }
.morosos .moroso:hover { border-color: #f2a5a5; transform: translateX(3px); }
.morosos .moroso small { display: block; color: var(--gris); font-size: 12px; }
.morosos .cod { min-width: 48px; height: 40px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font-family: Outfit; font-weight: 700; background: var(--ambar-suave); color: #8a5800; }
.morosos .cod.moroso { background: var(--rojo); color: #fff; }
.morosos .monto { color: #a32323; white-space: nowrap; }
.fila-morosos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ficha-datos { margin: 8px 0 0; padding-left: 18px; color: var(--gris); font-size: 13px; line-height: 1.6; }
.tabla tr.clic { cursor: pointer; }
.tabla.compacta td { padding: 8px 10px; font-size: 13.5px; } .tabla.compacta th { padding: 8px 10px; }
.tabla tr.fila-roja td { background: #fff7f7; }
.mini-kpis { gap: 10px; } .mini-kpis > div { background: var(--fondo); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.mini-kpis span { font-size: 12px; color: var(--gris); } .mini-kpis b { font-family: Outfit; font-size: 20px; } .mini-kpis small { font-size: 12px; color: var(--gris); }
.historial-pagos .hito.h-pago::before { border-color: var(--verde); background: var(--verde); }
.historial-pagos .hito.h-pago_tarde::before { border-color: var(--ambar); }
.historial-pagos .hito.h-vencida::before { border-color: var(--rojo); background: var(--rojo); }
.historial-pagos .hito.h-recordatorio::before { border-color: var(--gris-claro); }
.historial-pagos .hito.h-boleto::before { border-color: var(--azul-hondo); background: var(--azul-hondo); }
.historial-pagos .hito b { font-weight: 550; font-size: 13.5px; }
.portal-caja { border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; background: var(--fondo); }
.portal-caja.activa { background: var(--blanco); border-color: var(--azul-suave); box-shadow: var(--sombra); }
.aviso-previa { margin-top: 14px; } .aviso-previa summary { cursor: pointer; color: var(--azul); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.aviso-carta { display: grid; grid-template-columns: 180px 1fr; gap: 16px; margin-top: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--linea); background: var(--blanco); }
.aviso-carta img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 3 / 4; background: var(--fondo); }
.aviso-carta .precio { font-family: Outfit; font-size: 24px; font-weight: 700; margin: 4px 0 6px; }
.aviso-carta pre { white-space: pre-wrap; font-family: inherit; font-size: 12.5px; color: var(--gris); margin: 0 0 10px; max-height: 150px; overflow: auto; }
.aviso-carta .atributos { display: flex; flex-wrap: wrap; gap: 6px; } .aviso-carta .atributos span { background: var(--fondo); border-radius: 8px; padding: 3px 8px; font-size: 12px; }
.aviso-carta .atributos small { display: block; font-size: 9px; color: var(--gris-claro); letter-spacing: .04em; }
.resumen-plan { padding: 10px 14px; border-radius: 12px; background: var(--azul-claro); color: var(--azul-hondo); font-size: 13.5px; min-height: 20px; }
.resumen-plan:empty { display: none; }
.mis-cuotas .anillo-pago { display: flex; align-items: center; gap: 12px; }
.mis-cuotas .anillo-pago svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.mis-cuotas .anillo-pago circle { fill: none; stroke-width: 8; } .mis-cuotas .fondo-a { stroke: var(--fondo-2); } .mis-cuotas .valor-a { stroke: var(--verde); stroke-linecap: round; }
.mis-cuotas .anillo-pago b { font-family: Outfit; font-size: 26px; display: block; line-height: 1; } .mis-cuotas .anillo-pago span { font-size: 12.5px; color: var(--gris); }
.proxima-cuota { padding: 12px 14px; border-radius: 14px; background: var(--azul-claro); color: var(--azul-hondo); }
.proxima-cuota.vencida { background: var(--rojo-suave); color: #a32323; }
@media (max-width: 820px) { .mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aviso-carta { grid-template-columns: 1fr; } .aviso-carta img { aspect-ratio: 16 / 9; } }
.tabla td.num { white-space: nowrap; }
.tabla.compacta td { white-space: nowrap; }

/* Panel de cámara conectada: vivo, foto al instante, clips, estado del equipo */
.cam-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cam-grupo { display: inline-flex; align-items: stretch; }
.cam-grupo > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cam-grupo select { width: auto; flex: none; border-radius: 0; box-shadow: none; border: 1px solid var(--linea); border-left: 0; background: var(--blanco); color: var(--texto); font: 500 13px Inter, sans-serif; padding: 0 10px; min-height: 40px; }
.cam-grupo select:last-child { border-radius: 0 12px 12px 0; }
.cam-grupo select:disabled, .cam-acciones .btn:disabled { opacity: .55; cursor: not-allowed; }
.cam-nota { margin: 10px 0 0; display: flex; gap: 6px; align-items: center; }
.btn.trabajando .ico { animation: titila 1s infinite; }
.cam-dato { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; }
.cam-dato .etq { color: var(--gris); font-size: 13px; font-weight: 500; }
.cam-dato .v { text-align: right; }
.cam-dato .v b { font: 700 22px Outfit, sans-serif; }
.cam-estimacion { margin-top: 10px; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--fondo); font-size: 12.5px; color: var(--gris); line-height: 1.45; }
.cam-estimacion .chip { padding: 2px 8px; font-size: 11px; margin-right: 4px; }
.cam-senal { display: inline-flex; align-items: flex-end; gap: 3px; vertical-align: middle; }
.cam-senal i { width: 5px; border-radius: 2px; background: var(--fondo-2); }
.cam-senal i.on { background: var(--verde); }
.cam-sesiones { margin-top: 12px; border-top: 1px solid var(--linea); padding-top: 10px; }
.cam-sesiones summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--gris); }
.cam-sesiones .fila { justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--linea); flex-wrap: nowrap; }
.cam-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cam-video { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--blanco); }
.cam-video video { width: 100%; aspect-ratio: 16/9; display: block; background: #050d1a; }
.cam-video .fila { justify-content: space-between; padding: 8px 10px; flex-wrap: nowrap; }
.envivo [data-cuadro] { width: 100%; height: 100%; object-fit: contain; background: #050d1a; display: block; }
@media (max-width: 640px) {
  .cam-grupo { width: 100%; } .cam-grupo > .btn { flex: 1; } .cam-acciones > .btn { flex: 1 1 45%; }
  .envivo .espera .radar { width: 80px; height: 80px; margin-bottom: 8px; } .envivo .espera h2 { font-size: 16px; } .envivo .espera p { display: none; }
}
.cam-tabs { flex-wrap: wrap; max-width: 100%; }

.envivo .hud .cam-alerta { color: #ffd166; }
.envivo .cam-otra { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 16px; }
.envivo .cam-otra .btn:not(.btn-primario) { color: #0d2346; }
.tabla .chip { white-space: nowrap; }
.fotos-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.foto-act { border: 1px solid var(--linea); background: var(--blanco); border-radius: 12px; padding: 0; overflow: hidden; cursor: zoom-in; text-align: left; font: inherit; }
.foto-act img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.foto-act span { display: block; padding: 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--azul); }
.foto-act:hover { border-color: var(--azul); }
.cal-act .d { min-height: 112px; }
.cal-act .d-links { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; width: 100%; }
.cal-act .d-links a { font-size: 10.5px; font-weight: 700; color: var(--azul); background: rgba(255,255,255,.75); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
.cal-act .d-links a:hover { background: var(--azul); color: #fff; }
.cal-act .d.hay.sin-foto { border-style: dashed; border-color: #9cc3ee; }
.leyenda-act i.emu { background: #dcedff; border: 1px dashed #9cc3ee; }
.sd-linea { position: relative; height: 22px; background: var(--fondo); border-radius: 8px; overflow: hidden; }
.sd-linea i { position: absolute; top: 3px; bottom: 3px; background: var(--azul); border-radius: 2px; min-width: 2px; }
.sd-linea i.ev { background: var(--ambar); }
.sd-est { background: var(--fondo); border-radius: 12px; padding: 12px 14px; }
.sd-est > div b { font-family: Outfit; font-size: 22px; margin-right: 10px; } .sd-est > div span { color: var(--gris); font-size: 13px; }
.cal .d .tag-sd { position: absolute; right: 6px; bottom: 6px; font-size: 10px; font-weight: 700; color: #fff; background: var(--azul-hondo); border-radius: 5px; padding: 1px 5px; }
.leyenda-act i.sd { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.cam-modo { align-items: center; gap: 8px; }

/* ---------- Celular: ingreso arriba, obras sin mapa y menú de funciones de la obra ---------- */
.volver-obra { display: none; }
@media (max-width: 820px) {
  .ingreso { display: flex; flex-direction: column; }
  .ingreso .formulario { order: -1; justify-content: flex-start; padding: 26px 22px 30px; }
  .ingreso .formulario img { height: 32px; margin-bottom: 18px; }
  .ingreso .escena { min-height: 0; padding: 24px 22px 28px; }
  .ingreso .escena > img, .ingreso .escena .gemelo, .ingreso .escena .fecha-anim { display: none; }
  .ingreso .escena h1 { font-size: 24px; margin-top: 0; }

  .vista-control { display: flex; flex-direction: column; }
  .vista-control h1 { font-size: 24px; }
  .vista-control .ctl-saludo { order: 0; margin: 2px 0 16px !important; }
  .vista-control .ctl-titulo { order: 1; margin: 0 0 10px !important; font-size: 18px; }
  .vista-control .ctl-obras { order: 2; gap: 12px; }
  .vista-control .ctl-kpis { order: 3; margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vista-control .ctl-estado { order: 4; }
  .vista-control .ctl-mapa { display: none; }
  .vista-control .obra-tarjeta .img { height: 130px; }

  .superior .migas { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .volver-obra { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-weight: 600; font-size: 14px; color: var(--azul); }
  .volver-obra ~ .pestanas { display: none; }
  .volver-obra ~ .secciones { margin: 12px 0 16px; }
  .menu-obra { display: grid; gap: 12px; margin-top: 14px; padding-bottom: 64px; }
  .grilla.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; } .kpi .ico-fondo { display: none; } .kpi .val { font-size: 24px; }
  .mo-foto { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; flex-wrap: wrap;
             height: 190px; padding: 12px; border-radius: 18px; background: #193d76 center/cover; box-shadow: var(--sombra); }
  .mo-foto .chip { background: rgba(255,255,255,.92); }
  .mo-grupo { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); }
  .mo-cab { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; color: var(--texto); }
  .mo-cab > .ico:last-child { color: var(--gris); flex: none; }
  .mo-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; flex: none; }
  .mo-txt { flex: 1; min-width: 0; } .mo-txt b { display: block; font-family: Outfit; font-size: 16.5px; }
  .mo-txt span { display: block; font-size: 13px; color: var(--gris); line-height: 1.35; }
  .mo-secs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px 70px; }
  .mo-secs a { padding: 6px 12px; border-radius: 999px; background: var(--fondo-2); color: var(--azul); font-size: 13px; font-weight: 600; }
}