/* Mediamix — el estilo de mediamix.do: blanco, tipografía negra grande y
   apretada (Inter Tight), filas numeradas «01.» con filete, píldoras negras,
   la cinta en degradado del logo y el cierre en negro. Rubik para el texto. */
:root{
  --fondo:#fff; --tarjeta:#fff; --top-bg:rgba(255,255,255,.92); --aviso-bg:#fff1f3; --aviso-ok:#eefbf2;
  --tinta:#0b0b0f; --suave:#696687; --morado:#3b3663; --linea:#e4e3ec; --gris:#f4f4f7; --gris2:#ececf1;
  --rosa:#ef4d6b; --naranja:#f6923a; --teal:#33b5b0; --verde:#46c06b; --lila:#b84f9e; --azul:#1090e0; --ambar:#f8ae00;
  --radio:18px; --sombra:0 18px 50px rgba(11,11,15,.10);
  --degradado:linear-gradient(90deg,var(--rosa),var(--naranja) 35%,var(--teal) 70%,var(--verde));
}
/* Modo oscuro: sólo por el interruptor (data-theme); por defecto la casa es blanca */
:root[data-theme="dark"]{--fondo:#0f0f14;--tarjeta:#16161d;--top-bg:rgba(15,15,20,.9);--aviso-bg:#3a1520;--aviso-ok:#12301c;
  --tinta:#f3f2f8;--suave:#a39fbf;--linea:#2a2a36;--gris:#1c1c25;--gris2:#262633;--sombra:0 18px 50px rgba(0,0,0,.45)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--tinta);font:400 16px/1.5 Rubik,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:'Inter Tight',sans-serif;font-weight:500;letter-spacing:-.04em;line-height:1}
.cargando-app{padding:40px;color:var(--suave)}
.ancho{max-width:1280px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.eti{font:500 12px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;color:var(--suave)}
.eti.negra{color:var(--tinta)}
.cinta{height:10px;background:var(--degradado)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── píldoras y botones ── */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--tinta);color:var(--fondo);border:1.5px solid var(--tinta);border-radius:999px;padding:11px 20px;font:500 11px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.pill:hover{background:var(--fondo);color:var(--tinta)}
.pill.linea{background:var(--fondo);color:var(--tinta)}.pill.linea:hover{background:var(--tinta);color:var(--fondo)}
.pill.chica{padding:7px 13px;font-size:10px}
.pill.grande{padding:16px 28px;font-size:12px}
.pill.color{border-color:transparent;color:#fff}
.pill:disabled{opacity:.45;cursor:default}
.circ{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--tinta);background:var(--fondo);cursor:pointer;flex:none;transition:transform .15s,background .15s,color .15s}
.circ:hover{background:var(--tinta);color:var(--fondo);transform:rotate(45deg)}
.circ.negro{background:var(--tinta);color:var(--fondo)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font:500 11px Rubik,sans-serif;letter-spacing:.04em;text-transform:uppercase;background:var(--gris);color:var(--tinta)}
.chip.estado{color:#fff}
.chip .punto{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.prio{display:inline-flex;align-items:center;gap:6px;font:500 11px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.prio::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,#9ca3af)}
.prio.urgent{--c:#f87171}.prio.high{--c:#fbbf24}.prio.normal{--c:#60a5fa}.prio.low{--c:#9ca3af}

/* ── barra superior ── */
.top{position:sticky;top:0;z-index:20;background:var(--top-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.top .ancho{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;flex-wrap:wrap}
.top img{height:28px;width:auto;display:block}
.top nav{display:flex;gap:2px;flex-wrap:wrap}
/* Sólo iconos (Lucide, cada sección con su color); el nombre sale al pasar el ratón y en la activa */
.top nav a{--c:var(--suave);display:inline-flex;align-items:center;height:36px;padding:0 9px;border-radius:999px;font:500 10.5px Rubik,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta);transition:background .35s cubic-bezier(.2,.8,.2,1),color .25s,padding .35s cubic-bezier(.34,1.4,.64,1)}
.top nav a svg{color:var(--c);flex:none;transition:color .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
/* el nombre se abre con muelle: de 0 a su ancho, sin saltos */
.top nav a span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-left:0;transform:translateX(-6px);transition:max-width .4s cubic-bezier(.34,1.3,.64,1),opacity .25s .05s,margin .4s cubic-bezier(.34,1.3,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}
.top nav a:hover{background:var(--gris)}
.top nav a.activo span{max-width:160px;opacity:1;margin-left:7px;transform:none}
/* Al pasar el ratón el nombre flota bajo el icono (no empuja a los vecinos) y nace de él con muelle */
.top nav a{position:relative}
.top nav a:not(.activo) span{position:absolute;top:calc(100% + 6px);left:50%;max-width:none;margin:0;padding:6px 11px;border-radius:999px;background:var(--tinta);color:var(--fondo);pointer-events:none;z-index:5;
  transform:translate(-50%,-6px) scale(.8);transform-origin:top center;transition:opacity .16s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.top nav a:not(.activo):hover span,.top nav a:not(.activo):focus-visible span{opacity:1;transform:translate(-50%,0) scale(1)}
.top nav a.activo{color:var(--fondo);background:var(--tinta);padding:0 14px 0 10px}
.top nav a.activo svg{color:var(--fondo);transform:scale(1.08)}
.top nav a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:0;transform:scale(0);max-width:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),margin .35s,max-width .35s}
.top nav a.activo::before{transform:scale(1);max-width:8px;margin-right:6px}
@media (prefers-reduced-motion:reduce){.top nav a,.top nav a span,.top nav a svg,.top nav a::before{transition:none}}
.top .yo{display:flex;align-items:center;gap:8px;font-size:13px}
.top .yo>span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.top .yo .chip{font-size:10px;padding:4px 8px}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tinta);color:var(--fondo);font:600 11px Rubik,sans-serif;letter-spacing:.04em;flex:none}
.avatar.chico{width:24px;height:24px;font-size:9px}
.avatares{display:inline-flex}
.avatares .avatar{margin-left:-8px;border:2px solid var(--fondo)}
.avatares .avatar:first-child{margin-left:0}

/* ── landing ── */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:end;padding-block:64px 80px;overflow:hidden}
.hero .play{position:absolute;right:-6%;top:-14%;width:min(62vw,720px);opacity:.95;pointer-events:none;z-index:0}
.hero>*:not(.play){position:relative;z-index:1}
.hero h1{font-size:clamp(54px,10vw,148px);line-height:.86;letter-spacing:-.055em;text-wrap:balance}
.hero h1 em{font-style:normal;background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent}
.lado{display:flex;flex-direction:column;gap:22px;max-width:460px;justify-self:end;background:var(--tarjeta);border-radius:22px;padding:26px 28px;box-shadow:var(--sombra)}
.lado p{margin:0;font-size:16px;line-height:1.55}
.datos{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 12px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.botones{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grupo{border-top:1px solid var(--linea);padding-block:44px 56px}
.fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px;margin-bottom:32px}
.fila .num{font:400 clamp(56px,7vw,92px)/.9 'Inter Tight',sans-serif;letter-spacing:-.05em}
.cuenta{margin:8px 0 0;font-size:15px;max-width:30ch}
.grupo h2{justify-self:end;text-align:right;font-size:clamp(30px,3.4vw,44px);font-weight:400}
.grupo h2 small{display:block;margin-top:10px;font:500 11px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 24px}
.tarjeta{background:var(--gris);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tarjeta h3{font-size:20px;letter-spacing:-.02em}
.tarjeta .meta{margin:0;font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:40px;border-top:1px solid var(--linea)}
.cifras b{display:block;font:500 clamp(40px,6vw,80px)/1 'Inter Tight',sans-serif;letter-spacing:-.05em}
.cifras span{font:500 12px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
footer.fin{background:#0b0b0f;color:#fff;margin-top:40px}
footer.fin .ancho{padding-block:72px 56px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
footer.fin h2{font-size:clamp(48px,7vw,104px);line-height:.9;letter-spacing:-.05em;font-weight:400}
footer.fin .eti{color:#c9c7d8}
footer.fin address{font-style:normal;font-size:15px;line-height:1.7;color:#d9d8e4}
footer.fin img{height:28px;width:auto;filter:brightness(0) invert(1);margin-bottom:18px;display:block}
footer.fin a{text-decoration:underline;text-underline-offset:3px}

/* ── páginas internas ── */
.pagina{padding-block:36px 80px}
.cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.cabeza h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.05em;line-height:.92}
.cabeza h1 small{display:block;margin-top:10px;font:500 12px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.vacio{color:var(--suave);padding:24px;background:var(--gris);border-radius:var(--radio);text-align:center}
.aviso{padding:12px 16px;border-radius:12px;background:var(--aviso-bg);color:#e0456e;font-size:14px;margin-bottom:16px}
.aviso.ok{background:var(--aviso-ok);color:#2fae63}

/* escritorio tipo ventanas */
.escritorio{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.ventana{grid-column:span 12;background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:0 8px 30px rgba(11,11,15,.06);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ventana.c4{grid-column:span 4}.ventana.c5{grid-column:span 5}.ventana.c6{grid-column:span 6}.ventana.c7{grid-column:span 7}.ventana.c8{grid-column:span 8}.ventana.c12{grid-column:span 12}
.ventana>header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linea);background:var(--gris)}
.ventana>header .ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--tarjeta);color:var(--tinta);border:1px solid var(--linea)}
.ventana>header .ico svg{width:15px;height:15px}
.ventana>header .semaforo i{width:10px;height:10px;border-radius:50%;display:block}
.ventana>header .semaforo i:nth-child(1){background:var(--rosa)}.ventana>header .semaforo i:nth-child(2){background:var(--ambar)}.ventana>header .semaforo i:nth-child(3){background:var(--verde)}
.ventana>header h3{font:500 13px Rubik,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-left:4px;flex:1}
.ventana>header .acciones{display:flex;gap:6px}
.ventana>.cuerpo{padding:16px;flex:1;min-width:0}
.ventana>.cuerpo.sin{padding:0}
.stat{display:flex;flex-direction:column;gap:4px}
.stat b{font:500 clamp(34px,4vw,56px)/1 'Inter Tight',sans-serif;letter-spacing:-.05em}
.stat span{font:500 11px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px}
.barra-prio{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--gris2)}
.barra-prio i{display:block;height:100%}

/* listas de tareas */
.tareas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tareas li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--linea)}
.tareas li:first-child{border-top:0}
.tareas .puesto{font:400 28px/1 'Inter Tight',sans-serif;letter-spacing:-.05em;min-width:44px;color:var(--suave)}
.tareas .puesto.top{color:var(--tinta)}
.tareas .titulo{font-weight:500;letter-spacing:-.01em;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tareas .sub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--suave);margin-top:3px}
.tareas .fecha{font:500 12px Rubik,sans-serif;text-align:right;white-space:nowrap}
.tareas .fecha.vencida{color:var(--rosa)}
.tareas .fecha.hoy{color:var(--naranja)}
.puntito{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}

/* clientes */
.clientes-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.cliente-tarjeta{position:relative;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--tarjeta);transition:transform .15s,box-shadow .15s;overflow:hidden}
.cliente-tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.cliente-tarjeta::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c,var(--tinta))}
.cliente-tarjeta h3{font-size:24px}
.cliente-tarjeta .sector{font:500 11px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
.cliente-tarjeta .numeros{display:flex;gap:14px 18px;flex-wrap:wrap}.cliente-tarjeta .numeros>div{min-width:0}
.cliente-tarjeta .numeros b{display:block;font:500 28px/1 'Inter Tight',sans-serif;letter-spacing:-.04em}
.cliente-tarjeta .numeros span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.proyectos{list-style:none;margin:0;padding:0}
.proyectos li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linea);flex-wrap:wrap}
.proyectos li:first-child{border-top:0}
.proyectos .nombre{font-weight:500;flex:1;min-width:160px}
.proyectos .grafo{font-size:12px;color:var(--suave);font-family:ui-monospace,monospace}
.enlaces{display:flex;gap:6px;flex-wrap:wrap}

/* formularios */
.form{display:grid;gap:16px;max-width:760px}
.form.ancho2{grid-template-columns:1fr 1fr;max-width:none}
.form .fila2{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font:500 11px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.campo input,.campo select,.campo textarea{border:1.5px solid var(--linea);border-radius:12px;padding:12px 14px;background:var(--tarjeta);font-size:15px;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--tinta);outline:none}
.campo textarea{min-height:110px;resize:vertical}
.campo .ayuda{font-size:12px;color:var(--suave)}
.campo.lleno{grid-column:1/-1}
.buscador{position:relative}
.buscador .opciones{position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);max-height:280px;overflow:auto;padding:6px}
.buscador .opciones button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:10px;cursor:pointer}
.buscador .opciones button:hover,.buscador .opciones button.activa{background:var(--gris)}
.buscador .elegido{display:flex;align-items:center;gap:10px;border:1.5px solid var(--tinta);border-radius:12px;padding:10px 14px}
.colores{display:flex;gap:8px;flex-wrap:wrap}
.colores button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.colores button.activo{border-color:var(--tinta);transform:scale(1.15)}
.radios{display:flex;gap:8px;flex-wrap:wrap}
.radios button{border:1.5px solid var(--linea);background:var(--tarjeta);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:13px}
.radios button.activo{border-color:var(--tinta);background:var(--tinta);color:var(--fondo)}

/* tablas */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font:500 11px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);padding:10px 8px;border-bottom:1px solid var(--linea)}
.tabla td{padding:12px 8px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla td.num,.tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla tr.enlace{cursor:pointer}.tabla tr.enlace:hover td{background:var(--gris)}
.tabla input{border:1px solid var(--linea);border-radius:8px;padding:8px 10px;width:100%;font-size:14px;background:var(--tarjeta)}
.tabla input.num{text-align:right}
.tabla .quitar{border:0;background:none;cursor:pointer;color:var(--suave);font-size:18px}

/* documento (cotización / factura) */
.documento{background:var(--tarjeta);border:1px solid var(--linea);border-radius:22px;padding:40px;max-width:900px;margin:0 auto;box-shadow:var(--sombra)}
.documento .cab{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin-bottom:28px}
.documento .cab img{height:30px}
.documento .cab h1{font-size:clamp(34px,5vw,56px)}
.documento .cab .numero{text-align:right}
.documento .cab .numero b{display:block;font:500 22px 'Inter Tight',sans-serif;letter-spacing:-.03em}
.documento .partes{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-size:14px}
.documento .partes b{display:block;margin-bottom:4px}
.documento .cp-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:24px 0}
.cp-tarjeta{background:var(--gris);border-radius:14px;padding:14px 16px}
.cp-tarjeta .cp-tapa{font:500 11px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
.cp-tarjeta .cp-cifra{font:500 22px/1.1 'Inter Tight',sans-serif;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.cp-tarjeta.total{background:var(--tinta);color:var(--fondo)}.cp-tarjeta.total .cp-tapa{color:#c9c7d8}
.documento .condiciones{font-size:13px;color:var(--suave);margin-top:24px;white-space:pre-wrap}
.documento .sello{display:inline-block;border:2px solid currentColor;border-radius:8px;padding:4px 10px;font:600 12px Rubik,sans-serif;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-4deg)}
.sello.anulada{color:var(--rosa)}.sello.pagada{color:var(--verde)}.sello.proforma{color:var(--naranja)}
.acciones-doc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:20px 0}

/* munus: ocupa desde el ancla hasta abajo */
#cu-app.cu-app{--cu-left:0px}

/* login */
.login{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:24px}
.login .caja{width:min(420px,100%);background:var(--tarjeta);border-radius:22px;box-shadow:var(--sombra);padding:36px;display:grid;gap:18px}
.login h1{font-size:40px}

/* público */
.publico .hero{padding-block:48px 56px}

@media print{
  .top,.acciones-doc,.no-imprimir{display:none!important}
  .documento{box-shadow:none;border:0;padding:0;max-width:none}
  body{font-size:13px}
}
@media (max-width:980px){
  .ventana.c4,.ventana.c6,.ventana.c8{grid-column:span 12}
  .hero{grid-template-columns:1fr;padding-block:24px 48px}.lado{justify-self:start}.hero .play{width:92vw;right:-24%;top:-4%;opacity:.25}
  .fila{grid-template-columns:auto 1fr}.grupo h2{grid-column:1/-1;justify-self:start;text-align:left}
  footer.fin .ancho{grid-template-columns:1fr}
  .form.ancho2{grid-template-columns:1fr}.form .fila2{grid-template-columns:1fr}
  .documento{padding:22px}.documento .partes{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── historial / entregas ── */
.linea-tiempo{position:relative;padding-left:26px}
.linea-tiempo::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--linea)}
.linea-tiempo .mes{position:relative;margin:0 0 10px;padding-top:4px}
.linea-tiempo .mes::before{content:"";position:absolute;left:-23px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--tinta)}
.linea-tiempo .mes h4{font:500 13px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.entrega{position:relative;padding:12px 0 14px;border-bottom:1px solid var(--linea)}
.entrega::before{content:"";position:absolute;left:-21px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--c,#87909e)}
.entrega .cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.entrega .cab b{font-weight:500}
.entrega .fecha{margin-left:auto;font:500 12px Rubik,sans-serif;color:var(--suave)}
.minis{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.mini{display:flex;flex-direction:column;gap:4px;width:120px;min-width:0}
.mini img,.mini video,.mini .ficha{width:120px;height:90px;object-fit:cover;border-radius:10px;background:var(--gris);display:grid;place-items:center;font:600 12px Rubik,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
.mini .nombre{font-size:11px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subir{border:2px dashed var(--linea);border-radius:var(--radio);padding:16px;display:grid;gap:12px}
.subir input[type=file]{font-size:13px}
.piezas-tabla td{vertical-align:middle}
.piezas-tabla select{border:1px solid var(--linea);border-radius:8px;padding:8px 10px;width:100%;font-size:13px;background:var(--tarjeta)}
.piezas-tabla .buscador input{border:1px solid var(--linea);border-radius:8px;padding:8px 10px;width:100%;font-size:14px}
.vista-toggle{display:inline-flex;border:1.5px solid var(--linea);border-radius:999px;overflow:hidden}
.vista-toggle button{border:0;background:var(--tarjeta);padding:8px 14px;cursor:pointer;font:500 11px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.vista-toggle button.activo{background:var(--tinta);color:var(--fondo)}

.ico-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--linea);background:var(--tarjeta);cursor:pointer;color:var(--tinta)}
.ico-btn svg{width:16px;height:16px}
.ico-btn:hover{border-color:var(--tinta)}
.mini.entregable img,.mini.entregable video,.mini.entregable .ficha{outline:2px solid var(--verde);outline-offset:-2px}
.mini .marcar{border:1px solid var(--linea);border-radius:999px;background:var(--tarjeta);font:500 9px Rubik,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;cursor:pointer;color:var(--suave)}
.mini .marcar.si{background:var(--verde);border-color:var(--verde);color:#fff}
.entregables-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.entregable-card{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--tarjeta);display:flex;flex-direction:column}
.entregable-card .vista{display:grid;place-items:center;background:var(--gris);aspect-ratio:4/3;overflow:hidden}
.entregable-card .vista img,.entregable-card .vista video{width:100%;height:100%;object-fit:contain}
.entregable-card .vista .ficha{font:600 14px Rubik,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.entregable-card .pie{padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.entregable-card .pie b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entregable-card.si{border-color:var(--verde)}

/* ── ⌘G: la barra de comandos ── */
.top .cmdg{display:inline-flex;align-items:center;width:auto;padding:0 10px 0 9px;gap:6px;border-radius:999px;transform:none!important}
.top .cmdg kbd{font:500 10px Rubik,sans-serif;letter-spacing:.04em;color:var(--suave)}
.top .cmdg:hover kbd{color:inherit}
.pal-fondo{position:fixed;inset:0;z-index:200;background:rgba(11,11,15,.45);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;animation:pal-fondo .18s ease-out}
@keyframes pal-fondo{from{opacity:0}to{opacity:1}}
.pal{width:min(680px,100%);background:var(--tarjeta);color:var(--tinta);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:76vh;animation:pal-entra .32s cubic-bezier(.34,1.4,.64,1)}
@keyframes pal-entra{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.pal-cinta{height:8px;background:var(--degradado)}
.pal-busca{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linea);color:var(--suave)}
.pal-busca input{flex:1;border:0;outline:0;background:none;font:400 18px/1.3 'Inter Tight',sans-serif;letter-spacing:-.02em;color:var(--tinta);min-width:0}
.pal-busca kbd,.pal-fila kbd{font:500 10px Rubik,sans-serif;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--linea);border-radius:6px;padding:3px 6px;color:var(--suave)}
.pal-lista{overflow:auto;padding:8px}
.pal-tit{font:500 10.5px Rubik,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);padding:10px 12px 4px}
.pal-fila{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;border-radius:12px;padding:9px 12px;cursor:pointer;color:inherit;font:inherit}
.pal-fila.activo{background:var(--tinta);color:var(--fondo)}
.pal-fila.activo kbd{border-color:transparent;color:inherit;opacity:.7}
.pal-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gris);flex:none}
.pal-fila.activo .pal-ico{background:rgba(255,255,255,.12)}
.pal-ico.logo{background:#fff;padding:3px}.pal-ico.logo img{width:100%;height:100%;object-fit:contain;border-radius:6px}
.pal-txt{display:flex;flex-direction:column;min-width:0}.pal-txt b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pal-txt small{font-size:12px;opacity:.65}
.pal-pie{display:flex;gap:18px;padding:10px 20px;border-top:1px solid var(--linea);font:500 11px Rubik,sans-serif;letter-spacing:.04em;color:var(--suave)}

/* ── Ficha de usuario ── */
.cabeza .quien{display:flex;gap:22px;align-items:center;min-width:0}
.foto{border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;color:#fff;font:600 1em Rubik,sans-serif;flex:none;vertical-align:middle}
.foto.iniciales{letter-spacing:.02em}
.ficha-usuario .contacto{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--suave);margin-top:8px}
.ficha-usuario .contacto a{text-decoration:underline;text-underline-offset:3px;color:var(--tinta)}
.ficha-usuario .bio{max-width:62ch;margin:10px 0 0;font-size:15px;color:var(--suave)}
.tabla.clicable tbody tr{cursor:pointer}.tabla.clicable tbody tr:hover td{background:var(--gris)}
.ventana .cuerpo.alto{max-height:620px;overflow:auto}
.ventana header .vista-toggle{margin:0}
.entrega.paso{padding:9px 0 10px}.entrega.paso .cab{font-size:14px}.entrega.paso .cab .enl{text-decoration:underline;text-underline-offset:3px}
.linea-tiempo .mes>h4{margin-bottom:4px}

/* ── Subir imagen (logo, foto) ── */
.subir-imagen{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.subir-imagen .marco{position:relative;display:grid;place-items:center;min-width:120px;max-width:260px;padding:8px 12px;border:1.5px dashed var(--linea);border-radius:14px;background:var(--gris);cursor:pointer;overflow:hidden}
.subir-imagen .marco img{max-height:100%;max-width:100%;object-fit:contain;display:block}
.subir-imagen .marco .sin{font:500 11px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.subir-imagen .marco .cambiar{position:absolute;right:8px;bottom:8px;background:var(--tinta);color:var(--fondo);border-radius:999px;font:500 9.5px Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;opacity:0;transition:opacity .15s}
.subir-imagen .marco:hover .cambiar,.subir-imagen .marco:not(:has(img)) .cambiar{opacity:1}
.subir-imagen.redonda .marco{width:96px;min-width:96px;height:96px;border-radius:50%;padding:0}.subir-imagen.redonda .marco img{width:100%;height:100%;object-fit:cover}
.subir-imagen .quitar-img{border:0;background:none;font:500 11px Rubik,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);cursor:pointer;text-decoration:underline}

/* ── Logos de clientes ── */
.cliente-tarjeta .marca{display:flex;gap:12px;align-items:center}
.cliente-tarjeta .marca .logo{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid var(--linea);padding:5px;flex:none}
.cliente-tarjeta .marca .logo img{max-width:100%;max-height:100%;object-fit:contain}
.logo-cliente{display:grid;place-items:center;width:84px;height:84px;border-radius:18px;background:#fff;border:1px solid var(--linea);padding:8px;flex:none}
.logo-cliente img{max-width:100%;max-height:100%;object-fit:contain}

/* enlaces dentro de las filas de tareas: cliente y personas */
.tareas .enl:hover{text-decoration:underline;text-underline-offset:3px}
.tareas a.titulo{display:inline-block}

/* foto de perfil */
img.avatar.foto,.top .yo img.avatar{width:34px;height:34px;object-fit:cover;padding:0;border-radius:50%}
.cambiar-foto{position:relative;cursor:pointer;display:inline-block;flex:none}
.cambiar-foto .lapiz{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--fondo);border:2px solid var(--fondo);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.cambiar-foto:hover .lapiz{transform:scale(1.12)}
.cambiar-foto:hover .foto{filter:brightness(.92)}
.hero .quien{display:flex;gap:22px;align-items:center;min-width:0}
.logo-cliente.grande{width:120px;height:120px;border-radius:24px;padding:12px}
@media (max-width:700px){.hero .quien{flex-direction:column;align-items:flex-start}}

/* aviso del OmniREPL */
.mm-toast{position:fixed;right:22px;bottom:22px;z-index:300;max-width:min(620px,calc(100vw - 44px));max-height:60vh;overflow:auto;background:#F5DF4D;color:#000;border:2px solid #000;box-shadow:-6px 8px 0 #000;border-radius:14px;padding:12px 16px;font:500 13px/1.4 'JetBrains Mono',Rubik,monospace;box-shadow:0 18px 50px rgba(11,11,15,.3);white-space:pre-wrap;animation:pal-entra .3s cubic-bezier(.34,1.4,.64,1)}
.mm-toast.error{background:#ef4d6b;color:#fff}

/* tarifario: la fila para agregar */
.tarifa-nueva .fila-nueva{display:grid;grid-template-columns:minmax(150px,1fr) minmax(200px,2fr) 110px minmax(120px,1fr) minmax(160px,2fr) auto;gap:8px;align-items:center}
.tarifa-nueva .fila-nueva select,.tarifa-nueva .fila-nueva input{width:100%;min-width:0}
.tabla select{border:1px solid var(--linea);border-radius:10px;padding:8px 10px;background:var(--tarjeta);color:var(--tinta);font:inherit;max-width:100%}
.tabla tr.cambiada td{background:var(--aviso-ok)}
@media (max-width:900px){.tarifa-nueva .fila-nueva{grid-template-columns:1fr 1fr}}

/* El logo: en oscuro, blanco */
:root[data-theme="dark"] img.logo{filter:brightness(0) invert(1)}

/* login */
.login .caja img.logo{height:36px;width:auto;justify-self:start}
.login h1{font-size:40px}

/* hablemos */
.hablemos .dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.hablemos h1{font-size:clamp(40px,6vw,72px);margin-bottom:18px}
.hablemos .sub{font-size:17px;color:var(--suave);max-width:50ch}
.hablemos .puntos{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;font-size:15px}
.hablemos .puntos li{padding-left:22px;position:relative}.hablemos .puntos li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--degradado)}
.hablemos .caja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:22px;box-shadow:var(--sombra);padding:28px}
.hablemos .caja select,.hablemos .caja textarea{width:100%;border:1px solid var(--linea);border-radius:12px;padding:12px 14px;background:var(--tarjeta);color:var(--tinta);font:inherit}
.hablemos .gracias{max-width:60ch;padding:40px 0}.hablemos .gracias h1{font-size:clamp(40px,6vw,72px);margin:10px 0 14px}.hablemos .gracias p{font-size:18px;color:var(--suave)}
@media (max-width:860px){.hablemos .dos{grid-template-columns:1fr}}