/* ---------------------------------------------------------------------------
   Tablero de KleanPro.

   Barra lateral fija y contenido a la derecha. En el telefono la barra se va
   abajo, como una app, porque el pulgar llega ahi y no al borde superior.

   Es blanco siempre, sin tema oscuro: esto se abre desde la calle y con el sol
   de mediodia un fondo oscuro no se lee.
--------------------------------------------------------------------------- */
:root{
  --verde:#0cb460; --verde-hondo:#0a9350; --verde-mas-hondo:#105431;
  --lima:#9ccc60; --verde-suave:#EAF8F0; --verde-mas-suave:#F4FBF7;
  --tinta:#1D2320; --tinta-2:#5C6260; --tinta-3:#949B97; --tinta-4:#B9C0BC;
  --linea:#E6EDE8; --linea-fuerte:#CFDAD3;
  --ground:#F7F9F8; --superficie:#fff; --superficie-2:#F1F5F2;
  --alerta:#B4531A; --alerta-suave:#FDF3EA;
  --azul:#2C5C9E; --azul-suave:#EDF3FB;
  --morado:#6B4E9E; --morado-suave:#F2EEF9;
  /* Los tres verdes de la proyeccion del mes (19 oct 2026): vendido, agendado y probable.
     Los usan el Inicio y Metricas, para que la misma cifra tenga el mismo color en las dos. */
  --proy-firme:#0A7A43; --proy-medio:#2FB673; --proy-claro:#9BDDBA;
  /* Los colores del equipo en el calendario. Son nuevos porque no hay nada en la
     paleta que sirva: hacen falta ocho tonos que se distingan entre si de un
     vistazo, que se lean sobre blanco con sol y que aguanten texto blanco
     encima. Por eso son todos oscuros y saturados, ni uno pastel. El cero es el
     de los trabajos que todavia no tienen dueno. */
  --persona-0:#6E7672; --persona-1:#0F7A47; --persona-2:#2C5C9E; --persona-3:#A5461A;
  --persona-4:#6B4E9E; --persona-5:#0B6E77; --persona-6:#9B2F5F; --persona-7:#4F6B18;
  --persona-8:#8A5A12;
  --r:14px; --r-s:10px; --r-g:20px;
  --lateral:244px;
  --sombra-1:0 1px 2px rgba(29,35,32,.04);
  --sombra-2:0 1px 3px rgba(29,35,32,.05), 0 8px 20px -12px rgba(29,35,32,.18);
  --sombra-3:0 2px 6px rgba(29,35,32,.06), 0 24px 48px -24px rgba(29,35,32,.34);
  --titulo:'Montserrat',Helvetica,Arial,sans-serif;
  --boton:'Fira Sans',Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--tinta);
  font:400 15px/1.5 var(--titulo);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;letter-spacing:-.018em;font-weight:800}
button{font:inherit;color:inherit}
a{color:var(--verde-mas-hondo)}
::selection{background:var(--verde-suave)}

/* ------------------------------ tipografia ----------------------------- */
.rot{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:700}
.apagado{color:var(--tinta-3)}
.num{font-variant-numeric:tabular-nums}

/* -------------------------------- botones ------------------------------ */
.b{cursor:pointer;border-radius:var(--r-s);padding:11px 17px;border:1px solid transparent;
  font:600 14.5px var(--boton);text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;transition:background-color .14s,border-color .14s,color .14s}
.b svg{width:16px;height:16px;flex:none}
.b-1{background:var(--verde);color:#fff;border-color:var(--verde);box-shadow:var(--sombra-1)}
.b-1:hover{background:var(--verde-hondo);border-color:var(--verde-hondo)}
.b-1:disabled{opacity:.5;cursor:default}
.b-2{background:#fff;color:var(--tinta-2);border-color:var(--linea-fuerte)}
.b-2:hover{border-color:var(--tinta-4);color:var(--tinta);background:var(--superficie-2)}
.b-3{background:var(--superficie-2);color:var(--tinta-2);border-color:transparent}
.b-3:hover{background:var(--linea);color:var(--tinta)}
.b-mal{background:#fff;color:#A93B2C;border-color:#EFD0CA}
.b-mal:hover{background:#FDF3F1}
.b-chico{padding:8px 13px;font-size:13.5px;border-radius:9px}
.b-chico svg{width:14px;height:14px}
.ancho{width:100%}
.icono{background:none;border:0;cursor:pointer;color:var(--tinta-3);padding:8px;border-radius:9px;
  display:inline-flex;transition:background-color .14s,color .14s}
.icono:hover{background:var(--superficie-2);color:var(--tinta)}
.icono svg{width:18px;height:18px}

/* -------------------------------- campos ------------------------------- */
label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--tinta-2)}
input,select,textarea{width:100%;font:inherit;padding:11px 13px;border-radius:var(--r-s);
  border:1px solid var(--linea-fuerte);background:#fff;color:var(--tinta);transition:border-color .14s,box-shadow .14s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(12,180,96,.15)}
input[type=checkbox]{width:auto;accent-color:var(--verde)}
.campo{margin-bottom:15px}
.pista{font-size:12.5px;color:var(--tinta-3);margin-top:6px;line-height:1.45}

/* -------------------------------- avisos ------------------------------- */
.mal,.bien,.nota-azul{border-radius:var(--r-s);padding:13px 15px;font-size:14px;
  line-height:1.55;margin-bottom:16px;border-left:3px solid}
.mal{background:var(--alerta-suave);border-color:var(--alerta)}
.mal b{display:block;color:var(--alerta)}
.bien{background:var(--verde-suave);border-color:var(--verde)}
.bien b{display:block;color:var(--verde-mas-hondo)}
.nota-azul{background:var(--azul-suave);border-color:var(--azul)}
.nota-azul b{display:block;color:var(--azul)}
code{background:var(--superficie-2);border-radius:5px;padding:1.5px 6px;
  font:600 12.5px ui-monospace,Consolas,monospace;color:var(--verde-mas-hondo)}

/* ================================ entrada ============================== */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#F7F9F8 0%,#EAF8F0 100%)}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r-g);padding:38px 34px;
  box-shadow:var(--sombra-3);width:100%;max-width:400px}
.tarjeta img{height:32px;display:block;margin-bottom:26px}
.tarjeta h1{font-size:22px;margin-bottom:5px}
.tarjeta .baja{color:var(--tinta-2);font-size:14.5px;margin:0 0 24px;line-height:1.55}
.pie-tarjeta{color:var(--tinta-3);font-size:12.5px;margin-top:20px;line-height:1.55}
/* El separador entre las dos maneras de entrar. La raya se dibuja con un borde y el
   "o" se recorta encima, para no montar dos elementos que haya que alinear a mano. */
.o-bien{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--tinta-3);
  font-size:12.5px}
.o-bien::before,.o-bien::after{content:'';flex:1;height:1px;background:var(--linea)}
.paso-setup{display:flex;gap:13px;align-items:flex-start;padding:16px 0;
  border-top:1px solid var(--linea);font-size:14px;line-height:1.55;color:var(--tinta-2)}
.paso-setup b{color:var(--tinta)}
.paso-setup .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--verde);color:#fff;
  display:grid;place-items:center;font:700 13px var(--boton);margin-top:1px}

/* ============================== estructura ============================= */
.marco{display:flex;min-height:100vh}

.lateral{width:var(--lateral);flex:none;background:#fff;border-right:1px solid var(--linea);
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:20}
.lateral .arriba{padding:22px 20px 16px}
.lateral .arriba img{height:26px;display:block}
.lateral nav{flex:1;overflow-y:auto;padding:6px 12px}
.lateral .grupo{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-4);
  font-weight:700;padding:16px 10px 7px}
.lateral a,.lateral .item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--tinta-2);cursor:pointer;border:0;background:none;
  width:100%;text-align:left;text-decoration:none;transition:background-color .14s,color .14s}
.lateral .item svg{width:18px;height:18px;flex:none;opacity:.75}
.lateral .item:hover{background:var(--superficie-2);color:var(--tinta)}
.lateral .item[aria-current="true"]{background:var(--verde-suave);color:var(--verde-mas-hondo)}
.lateral .item[aria-current="true"] svg{opacity:1}
.lateral .item .globo{margin-left:auto;background:var(--verde);color:#fff;border-radius:99px;
  font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
.lateral .item[aria-current="true"] .globo{background:var(--verde-mas-hondo)}
.lateral .abajo{border-top:1px solid var(--linea);padding:12px}
.quien{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.quien .bola{width:32px;height:32px;border-radius:50%;background:var(--verde-suave);
  color:var(--verde-mas-hondo);display:grid;place-items:center;font:700 13px var(--boton);flex:none}
.quien .txt{min-width:0;flex:1}
.quien .nom{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quien .rol{font-size:11.5px;color:var(--tinta-3)}

.cuerpo{flex:1;margin-left:var(--lateral);min-width:0;display:flex;flex-direction:column}
.encabezado{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:10}
.encabezado .in{display:flex;align-items:center;gap:14px;padding:15px 26px;flex-wrap:wrap}
.encabezado h1{font-size:21px}
.encabezado .sub{font-size:13.5px;color:var(--tinta-3);width:100%;margin-top:-6px}
.encabezado .der{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hoja{padding:24px 26px 70px;flex:1}
.buscar{padding:9px 13px 9px 34px;font-size:14px;width:250px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949B97' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center/15px}

@media(max-width:960px){
  :root{--lateral:0px}
  .marco{flex-direction:column}
  .lateral{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;flex-direction:row;
    border-right:0;border-top:1px solid var(--linea);padding:0;box-shadow:0 -4px 20px -12px rgba(29,35,32,.4)}
  .lateral .arriba,.lateral .abajo,.lateral .grupo,.lateral .item .globo{display:none}
  /* Sobre la barra de gestos del telefono, no debajo. */
  .lateral nav{display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow-x:auto;gap:2px}
  .lateral .item{flex-direction:column;gap:3px;font-size:10.5px;padding:8px 6px;min-width:66px;
    justify-content:center;text-align:center;letter-spacing:-.01em}
  .lateral .item svg{width:20px;height:20px}
  .cuerpo{margin-left:0;padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  .encabezado .in{padding:13px 16px}
  .hoja{padding:16px 16px 40px}
  .buscar{width:100%}
}

.cargando{padding:80px 20px;text-align:center;color:var(--tinta-3)}
.vacio{background:#fff;border:1px dashed var(--linea-fuerte);border-radius:var(--r-g);
  padding:56px 28px;text-align:center;color:var(--tinta-3);line-height:1.65}
.vacio b{display:block;color:var(--tinta);font-size:17px;margin-bottom:5px;font-weight:800}
.vacio .icono-grande{width:44px;height:44px;margin:0 auto 14px;color:var(--tinta-4)}
.vacio .icono-grande svg{width:44px;height:44px}

/* ================================ tablero ============================== */
.tablero{display:flex;gap:14px;overflow-x:auto;align-items:flex-start;padding-bottom:12px}
.col{flex:0 0 280px;background:var(--superficie-2);border-radius:var(--r);padding:12px}
.col > h2{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-2);
  font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:3px}
.col .cuantos{background:#fff;border-radius:99px;padding:1px 8px;font-size:11px;color:var(--tinta-2)}
.col .plata{font-size:12.5px;color:var(--verde-mas-hondo);font-weight:700;margin-bottom:12px;
  font-variant-numeric:tabular-nums;min-height:19px}
.col .nada{color:var(--tinta-4);font-size:13px;padding:18px 6px;text-align:center;line-height:1.5}

.lead{background:#fff;border:1px solid var(--linea);border-radius:var(--r-s);padding:13px;
  margin-bottom:9px;cursor:pointer;box-shadow:var(--sombra-1);text-align:left;width:100%;
  display:block;font:inherit;color:inherit;transition:border-color .14s,box-shadow .14s,transform .1s}
.lead:hover{border-color:var(--verde);box-shadow:var(--sombra-2);transform:translateY(-1px)}
.lead .arr{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.lead .nom{font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead .tot{font-weight:800;font-size:14.5px;color:var(--verde-mas-hondo);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.lead .sub{color:var(--tinta-3);font-size:12.5px;margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.etis{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.eti{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2.5px 8px;border-radius:99px;background:var(--superficie-2);color:var(--tinta-2)}
.eti.verde{background:var(--verde-suave);color:var(--verde-mas-hondo)}
.eti.ambar{background:var(--alerta-suave);color:var(--alerta)}
.eti.azul{background:var(--azul-suave);color:var(--azul)}
.eti.morado{background:var(--morado-suave);color:var(--morado)}

/* ================================= panel =============================== */
.velo{position:fixed;inset:0;background:rgba(29,35,32,.4);z-index:30;border:0;
  backdrop-filter:blur(2px);animation:aparecer .16s ease}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:#fff;z-index:31;
  overflow-y:auto;box-shadow:-10px 0 50px -22px rgba(29,35,32,.55);padding:26px 28px 48px;
  animation:entrar .2s cubic-bezier(.22,.8,.3,1)}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes entrar{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.panel .cerrar{position:absolute;top:18px;right:20px}
.panel h2{font-size:21px;padding-right:38px}
.panel .folio{color:var(--tinta-3);font-size:12.5px;font-variant-numeric:tabular-nums;margin:3px 0 20px}
.panel h3{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:700;margin:26px 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px 20px;font-size:14px}
.grid2 .r{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:700;display:block;margin-bottom:2px}
.desglose{background:var(--superficie-2);border-radius:var(--r-s);padding:14px 16px;font-size:13.5px;
  line-height:1.7;white-space:pre-wrap;word-break:break-word}
.granTot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:2px solid var(--verde);margin-top:13px;padding-top:13px}
.granTot .v{font-weight:800;font-size:26px;color:var(--verde-mas-hondo);font-variant-numeric:tabular-nums}
.acciones{display:flex;flex-wrap:wrap;gap:7px}
.estados{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* Con siete estados el ultimo boton queda solo en su fila: se estira para que no parezca
   que falta uno a su lado. */
.estados button:last-child:nth-child(odd){grid-column:1/-1}
.estados button{padding:10px 11px;font-size:13px;border-radius:9px;border:1px solid var(--linea-fuerte);
  background:#fff;color:var(--tinta-2);cursor:pointer;text-align:left;font-weight:600;
  transition:background-color .14s,border-color .14s,color .14s}
.estados button:hover{border-color:var(--verde);color:var(--tinta)}
.estados button[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.nota{background:var(--superficie-2);border-radius:var(--r-s);padding:11px 14px;font-size:13.5px;
  margin-bottom:8px;line-height:1.6}
.nota .cuando{color:var(--tinta-3);font-size:11.5px;margin-top:4px}
.linea-t{font-size:13px;color:var(--tinta-2);padding:7px 0;border-bottom:1px solid var(--superficie-2);
  display:flex;justify-content:space-between;gap:12px}
.copiado{font-size:12.5px;color:var(--verde-mas-hondo);font-weight:600;margin-top:8px}

/* Las fotos que mandó el cliente. Cuadradas y recortadas para que la cuadrícula no
   baile con una vertical en medio; tocarla la abre entera en el visor de abajo, que
   es donde de verdad se ve si la mancha es de vino o de café. */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}
.fotos a{display:block;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;
  border:1px solid var(--linea);background:var(--superficie-2);cursor:zoom-in}
.fotos img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .18s}
.fotos a:hover img{transform:scale(1.05)}
/* Al cerrar el visor el foco vuelve a la miniatura; con teclado tiene que verse. */
.fotos a:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

/* ============================ visor de fotos =========================== */
/* La foto de un lead, encima de todo y sin salir del hub (visor.js). El fondo es oscuro
   aunque el tablero sea blanco siempre: una foto se lee mejor sobre negro, y aquí no
   hay texto largo que el sol de mediodía vaya a borrar. Va por encima del diálogo (40)
   porque se abre desde la ficha, que puede tener uno debajo.

   En el teléfono ocupa la pantalla entera y las flechas bajan al pie, donde llega el
   pulgar; pasar de foto deslizando el dedo funciona igual. Todo lo que se toca mide al
   menos 44 px.

   El fondo es opaco a propósito: con transparencia, el título de la ficha se asomaba
   detrás del contador y se leían los dos encimados. */
.visor{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:#0b0e0c;color:#fff;touch-action:manipulation;color-scheme:dark;
  overscroll-behavior:contain;animation:aparecer .16s ease}
.visor [hidden]{display:none!important}
.visor-barra{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 18px;min-width:0}
.visor-dato{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
.visor-cuenta{font:600 14px var(--boton);font-variant-numeric:tabular-nums;white-space:nowrap}
.visor-cuenta:empty{display:none}
.visor-nombre{font-size:13px;color:rgba(255,255,255,.66);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.visor-boton{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;padding:0 12px;border-radius:var(--r-s);
  border:1px solid transparent;background:none;color:rgba(255,255,255,.84);cursor:pointer;
  text-decoration:none;font:600 13.5px var(--boton);white-space:nowrap;flex:none;
  transition:background-color .14s,color .14s}
.visor-boton:hover{background:rgba(255,255,255,.1);color:#fff}
.visor-boton svg{width:18px;height:18px;flex:none}
.visor-original{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.74)}
.visor-x,.visor-zoom{padding:0}
.visor-x svg{width:22px;height:22px}
.visor-zoom svg{width:20px;height:20px}
.visor-zoom[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff}
/* La celda de la escena tiene que medir lo que mide la pantalla, no lo que mide la foto:
   con una fila automática el max-height:100% de la foto no tiene contra qué medirse, y
   una vertical de teléfono salía a su tamaño natural, 1600 px de alto, cortada. */
.visor-escena{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;
  min-height:0;overflow:hidden;padding:4px 76px 24px}
.visor-escena>*{grid-area:1/1}
.visor.una .visor-escena{padding:4px 24px 24px}
.visor-foto{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:4px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:default;-webkit-user-drag:none}
/* Ampliada (visor.js, ampliar): la foto a su tamaño de verdad y la escena con scroll para
   recorrerla. La escena pasa a flex porque, con la foto más grande que ella, un grid
   centrado la desborda por los dos lados y lo de la izquierda y lo de arriba quedan
   donde el scroll no llega. Con margin:auto se centra si cabe y arranca en el borde si
   no cabe. */
.visor.ampliable .visor-foto{cursor:zoom-in}
.visor.ampliada .visor-escena{display:flex;overflow:auto;padding:0}
.visor.ampliada .visor-foto{max-width:none;max-height:none;margin:auto;flex:none;
  border-radius:0;cursor:zoom-out}
.visor.arrastrando .visor-foto{cursor:grabbing}
.visor-cargando,.visor-falla{margin:0;max-width:360px;text-align:center;font-size:14.5px;
  line-height:1.55}
.visor-cargando{color:rgba(255,255,255,.6)}
.visor-falla{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);padding:18px 20px}
.visor-flecha{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;
  border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;
  place-items:center;cursor:pointer;transition:background-color .14s,opacity .14s}
.visor-flecha:hover{background:rgba(255,255,255,.22)}
.visor-flecha[aria-disabled="true"]{opacity:.25;cursor:default;background:rgba(255,255,255,.12)}
.visor-flecha svg{width:24px;height:24px}
.visor-antes{left:14px}
.visor-despues{right:14px}
.visor :focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:560px){
  .visor-barra{padding:6px 6px 6px 14px;gap:6px}
  .visor-original{padding:0 10px;font-size:13px}
  .visor-escena{padding:0 0 84px}
  .visor.una .visor-escena{padding:0 0 12px}
  .visor-flecha{top:auto;bottom:16px;margin-top:0}
  .visor-antes{left:calc(50% - 64px)}
  .visor-despues{right:calc(50% - 64px)}
}
@media(prefers-reduced-motion:reduce){.visor{animation:none}}

@media(max-width:560px){.grid2{grid-template-columns:1fr}.panel{padding:22px 18px 40px}}

/* ================================= cajas =============================== */
.caja{background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sombra-1);margin-bottom:16px}
.caja > header{padding:16px 20px;border-bottom:1px solid var(--linea);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.caja > header h2{font-size:15px}
.caja > header .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.caja .dentro{padding:20px}
.tabla-envoltura{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:700;padding:13px 20px;border-bottom:1px solid var(--linea);white-space:nowrap;background:#fff}
td{padding:14px 20px;border-bottom:1px solid var(--superficie-2);font-size:14px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.clic{cursor:pointer;transition:background-color .12s}
tbody tr.clic:hover{background:var(--verde-mas-suave)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ================================ metricas ============================= */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:13px;margin-bottom:18px}
.dato{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:17px 19px;
  box-shadow:var(--sombra-1)}
.dato .v{font-size:29px;font-weight:800;letter-spacing:-.025em;margin-top:5px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.dato .v.verde{color:var(--verde-mas-hondo)}
.dato .pie{font-size:12.5px;color:var(--tinta-3);margin-top:5px;line-height:1.45}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
  border-radius:99px;padding:2px 8px;margin-top:7px}
.delta.sube{background:var(--verde-suave);color:var(--verde-mas-hondo)}
.delta.baja{background:var(--alerta-suave);color:var(--alerta)}
.delta.igual{background:var(--superficie-2);color:var(--tinta-3)}

.barras{display:flex;align-items:flex-end;gap:6px;height:150px;padding:0 2px}
.barras .b-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:7px;height:100%;min-width:0}
.barras .tallo{width:100%;max-width:52px;background:var(--verde);border-radius:6px 6px 0 0;min-height:3px;
  transition:background-color .14s}
.barras .b-col:hover .tallo{background:var(--verde-mas-hondo)}
.barras .rotulo{font-size:10.5px;color:var(--tinta-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.medida{height:7px;border-radius:99px;background:var(--superficie-2);overflow:hidden;min-width:80px;flex:1}
.medida span{display:block;height:100%;background:var(--verde);border-radius:99px}

.embudo{display:flex;flex-direction:column;gap:2px}
.paso-embudo{display:flex;align-items:center;gap:14px;padding:11px 0}
.paso-embudo .nombre{width:110px;flex:none;font-weight:600;font-size:14px}
.paso-embudo .riel{flex:1;height:30px;background:var(--superficie-2);border-radius:8px;overflow:hidden;
  position:relative}
.paso-embudo .relleno{height:100%;background:linear-gradient(90deg,var(--verde) 0%,var(--verde-hondo) 100%);
  border-radius:8px;display:flex;align-items:center;padding:0 11px;color:#fff;font-weight:700;font-size:13px;
  min-width:34px}
.paso-embudo .conversion{width:78px;flex:none;text-align:right;font-size:13px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.paso-embudo .nombre{width:88px;font-size:13px}.paso-embudo .conversion{width:56px}}

/* =============================== calendario ============================ */
/* El calendario es una barra lateral fija y el contenido a la derecha, igual que
   la app entera. La barra se queda pegada al hacer scroll porque la rejilla del
   mes es alta y el mini calendario tiene que seguir a mano para saltar de fecha
   sin volver arriba. */
.cal-marco{display:grid;grid-template-columns:236px minmax(0,1fr);gap:18px;align-items:start}
.cal-contenido{min-width:0}
/* La rejilla no traia separacion y las cajas de abajo quedaban pegadas a ella. */
.cal-contenido > .cal{margin-bottom:16px}
/* El estado de Google vive aqui y no en la barra lateral: entre 901 y 1080px la
   barra entera desaparece, y con ella desaparecia el unico boton desde el que se
   conecta la cuenta. Lo que la gente necesita para decidir no puede vivir en el
   trozo de pantalla que se va primero. */
.cal-caja-google .cal-g-txt{margin:0 0 13px;color:var(--tinta-2);font-size:14px;line-height:1.65}
.cal-caja-google .cal-g-txt:last-child{margin-bottom:0}
.cal-caja-google .cal-g-txt b{color:var(--tinta);font-weight:700}

.cal-lateral{background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra-1);padding:14px;position:sticky;top:88px}

/* ------------------------------ mini mes ------------------------------- */
.mini-cabeza{display:flex;align-items:center;justify-content:space-between;gap:2px;margin-bottom:7px}
.mini-cabeza span{font-size:13px;font-weight:700;text-transform:capitalize;letter-spacing:-.01em}
.mini-cabeza .icono{padding:5px}
.mini-cabeza .icono svg{width:15px;height:15px}
.mini-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mini-rot{font-size:9.5px;color:var(--tinta-4);font-weight:700;text-align:center;padding-bottom:4px}
.mini-dia{position:relative;border:0;background:none;cursor:pointer;border-radius:8px;padding:5px 0;
  font:600 12px var(--boton);color:var(--tinta-2);font-variant-numeric:tabular-nums;
  transition:background-color .12s,color .12s}
.mini-dia:hover{background:var(--superficie-2);color:var(--tinta)}
.mini-dia.fuera{color:var(--tinta-4)}
.mini-dia.en-semana{background:var(--verde-mas-suave)}
.mini-dia.hoy{color:var(--verde-mas-hondo);font-weight:800}
.mini-dia.elegido{background:var(--verde);color:#fff}
/* El punto dice que ese dia tiene algo. Va debajo del numero y no al lado para
   que no mueva la rejilla ni descuadre las columnas. */
.mini-dia.con::after{content:'';position:absolute;left:50%;bottom:3px;width:3px;height:3px;
  border-radius:50%;background:var(--verde);transform:translateX(-50%)}
.mini-dia.elegido.con::after{background:#fff}

/* Un punto del color de una persona, para decir de quien es algo sin gastar una
   columna entera en su nombre. Lo usa el panel de horas ocupadas del inicio. */
.punto{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--c,var(--persona-0));margin-right:7px;vertical-align:1px}

/* ------------------------------- la gente ------------------------------ */
.cal-grupo{border-top:1px solid var(--linea);margin-top:14px;padding-top:12px}
.cal-grupo .rot{margin:0 0 8px 7px}
.cal-gente{display:flex;flex-direction:column}
.cal-persona{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:9px;
  cursor:pointer;min-width:0;transition:background-color .12s}
.cal-persona:hover{background:var(--superficie-2)}
/* La casilla se pinta del color de la persona con accent-color, que es la manera
   nativa: sigue siendo una casilla de verdad, con su foco y su teclado, y no una
   imitacion hecha con divs que hay que volver a ensenar a ser accesible. */
.cal-persona input[type=checkbox]{width:15px;height:15px;flex:none;margin:0;padding:0;
  cursor:pointer;accent-color:var(--c)}
.cal-persona .txt{min-width:0;line-height:1.3}
.cal-persona .nn{display:block;font-size:13px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cal-persona .oo{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-persona .oo svg{width:11px;height:11px;flex:none}
/* Apagado es solo la nota, no el nombre: esa persona no tiene Google conectado,
   pero sus trabajos de KleanPro siguen apareciendo y apagarle el nombre entero
   haria creer que no se ve nada suyo. */
.cal-persona.sin-google .oo{color:var(--tinta-4);font-style:italic}
/* Un calendario que no se pudo leer se veia igual que un dia libre. Aqui si grita:
   el color de alerta y el triangulo son para que la diferencia entre "no tiene nada"
   y "no pudimos preguntar" se note sin leer, que es cuando de verdad importa. */
.cal-persona.con-problema .oo{color:var(--alerta);font-style:normal;font-weight:600}
.cal-persona.con-problema .oo svg{width:11px;height:11px;flex:none}

/* El lapiz para cambiarle el color: una muestra redonda del tono de esa persona, al
   final de su fila. Se mantiene a 24px con 44px de area de toque por el padding del
   label: lo pulsa gente de limpieza desde el telefono. */
.cal-tono{margin-left:auto;flex:none;width:17px;height:17px;border-radius:50%;
  border:2px solid var(--superficie);background:var(--c);cursor:pointer;padding:0;
  box-shadow:0 0 0 1px var(--linea);transition:transform .12s,box-shadow .12s}
.cal-tono:hover{transform:scale(1.18);box-shadow:0 0 0 2px var(--c)}
.cal-tono:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* La paleta, dentro del panel lateral. Cuadrados grandes y de sobra separados: esto se
   toca con el dedo, y dos tonos vecinos a 20px se pulsan mal en la calle. */
.tonos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}
.tonos .tono{height:52px;border-radius:12px;border:0;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .1s}
.tonos .tono:hover{transform:scale(1.04)}
.tonos .tono:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
/* El que esta puesto se marca con un anillo y no con un tic: el tic hay que pintarlo
   de un color que contraste con los ocho tonos, y el anillo contrasta con el fondo
   del panel, que es siempre el mismo. */
.tonos .tono.puesto{box-shadow:0 0 0 3px var(--superficie),0 0 0 6px var(--c)}
.cal-google{font-size:11.5px;color:var(--tinta-3);line-height:1.5;padding:9px 7px 2px}
.cal-google .b{width:100%;margin-top:9px}

/* Los recortes que decidio el servidor. Van encima de la rejilla, dentro del
   contenido, porque la barra lateral desaparece entre 901 y 1080px y un aviso que
   dice "esto esta incompleto" no puede irse con ella. */
.cal-avisos{margin-bottom:14px;background:var(--alerta-suave);border-radius:var(--r-s);
  border-left:3px solid var(--alerta);padding:12px 15px}
.cal-avisos p{display:flex;gap:9px;align-items:flex-start;margin:0;font-size:13.5px;
  line-height:1.55;color:var(--tinta-2)}
.cal-avisos p + p{margin-top:10px;padding-top:10px;border-top:1px solid rgba(180,83,26,.16)}
.cal-avisos svg{width:15px;height:15px;flex:none;color:var(--alerta);margin-top:2px}

/* ---------------------------- arriba a la derecha ---------------------- */
.conmutador{display:inline-flex;background:var(--superficie-2);border-radius:10px;padding:3px;gap:2px}
.conmutador button{border:0;background:none;cursor:pointer;border-radius:8px;padding:6px 13px;
  font:600 13.5px var(--boton);color:var(--tinta-2);transition:background-color .14s,color .14s}
.conmutador button:hover{color:var(--tinta)}
.conmutador button[aria-pressed="true"]{background:#fff;color:var(--tinta);box-shadow:var(--sombra-1)}

.cal-sync{display:none;align-items:center;gap:7px;font:600 12.5px var(--boton);
  color:var(--verde-mas-hondo);background:var(--verde-suave);border-radius:99px;padding:5px 12px 5px 9px}
.cal-sync.viendo{display:inline-flex}
.cal-sync::before{content:'';width:12px;height:12px;flex:none;border-radius:50%;
  border:2px solid var(--verde);border-top-color:transparent;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.cal-sync::before{animation-duration:2.4s}}

/* ---------------------------- rejilla de horas ------------------------- */
.cal{background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sombra-1)}
/* Las tres rejillas comparten las columnas en una sola regla. Estaban repetidas y
   bastaba tocar una para que la cabecera quedara corrida respecto a los dias.
   El numero de columnas lo manda el JS con --cols: siete en semana, uno en dia. */
.cal-cabeza,.cal-cuerpo,.cal-todoeldia{display:grid;
  grid-template-columns:56px repeat(var(--cols,7),minmax(0,1fr))}
.cal-cabeza{border-bottom:1px solid var(--linea);position:sticky;top:0;background:#fff;z-index:3}
.cal-cabeza .hueco{border-right:1px solid var(--linea)}
.cal-dia{padding:11px 8px;text-align:center;border-right:1px solid var(--linea)}
.cal-dia:last-child{border-right:0}
.cal-dia .d{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:700}
.cal-dia .n{font-size:20px;font-weight:800;margin-top:3px;letter-spacing:-.02em}
.cal-dia.hoy .d{color:var(--verde-mas-hondo)}
.cal-dia.hoy .n{background:var(--verde);color:#fff;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;margin:3px auto 0;font-size:17px}

/* Los de todo el dia van en su propia tira: no tienen hora y dentro de la rejilla
   se pegarian a las seis de la manana, que es una hora que nadie les puso. */
.cal-todoeldia{border-bottom:1px solid var(--linea);background:#fff}
.cal-todoeldia > .rot{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;
  border-right:1px solid var(--linea);font-size:9px;text-align:right;line-height:1.2}
.cal-todoeldia .celda{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:36px;
  padding:5px 4px;border-right:1px solid var(--linea)}
.cal-todoeldia .celda:last-child{border-right:0}

.cal-cuerpo{position:relative;max-height:min(640px,68vh);overflow-y:auto}
.cal-horas{border-right:1px solid var(--linea);position:relative}
.cal-hora{height:var(--alto-hora,56px);position:relative}
.cal-hora span{position:absolute;top:-7px;right:8px;font-size:11px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}
/* La primera hora se sale por arriba del recuadro y el scroll la corta a la
   mitad. Se baja solo esa etiqueta; mover la franja entera despegaria las citas
   de las lineas. */
.cal-hora:first-child span{top:2px}
.cal-col{border-right:1px solid var(--linea);position:relative}
.cal-col:last-child{border-right:0}
.cal-col.hoy{background:var(--verde-mas-suave)}
.cal-franja{height:var(--alto-hora,56px);border-bottom:1px solid var(--superficie-2)}
.cal-ahora{position:absolute;left:0;right:0;height:2px;background:#D64545;z-index:2;pointer-events:none}
.cal-ahora::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:#D64545}

/* --------------------------------- citas ------------------------------- */
/* El color es el de la persona y no el del estado. En un calendario de equipo lo
   primero que se pregunta es de quien es cada cosa, asi que el color contesta
   eso; el estado se cuenta con la opacidad y el tachado, que no gastan color. */
.cita{position:absolute;left:3px;right:3px;border-radius:8px;padding:6px 8px;overflow:hidden;
  cursor:pointer;border:0;text-align:left;font:inherit;z-index:1;
  background:var(--c,var(--verde));color:#fff;box-shadow:var(--sombra-1);
  transition:filter .14s,transform .1s}
button.cita:hover{filter:brightness(1.07);transform:scale(1.015)}
.cita .h{font-size:10.5px;font-weight:700;opacity:.92;font-variant-numeric:tabular-nums}
.cita .q{font-size:12.5px;font-weight:700;line-height:1.25;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cita .d{font-size:11px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cita.corta{padding:3px 8px}
.cita.corta .d{display:none}
.cita.hecha{opacity:.5}
.cita.hecha .q{text-decoration:line-through}
/* En curso lleva un aro blanco por dentro en vez de cambiar de color: es lo unico
   que pasa ahora mismo y se busca con el rabillo del ojo, sin perder de quien es. */
.cita.encurso{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),var(--sombra-2)}
/* Los eventos de Google van en contorno y los trabajos en relleno. Relleno es lo
   nuestro, lo que se puede abrir, mover y cobrar; contorno es tiempo prestado,
   que solo dice que esa persona esta ocupada. La diferencia se lee de lejos, sin
   leyenda y sin leer una palabra, y aguanta el sol de mediodia en la calle. El
   tono es el mismo de la persona, asi que sigue sabiendose de quien es. */
/* Rellenos los dos, pero no igual. Ricardo pidio que el calendario se vea de colores y
   no "todo en blanco", y tenia razon en el sintoma: en un dia sin trabajos lo unico que
   habia eran bloques de Google, y los bloques de Google eran blancos, asi que el
   calendario entero salia en blanco.
   Rellenar los dos con el mismo tono borraria la diferencia que el contorno protegia, y
   esa diferencia importa: el relleno fuerte es lo nuestro, lo que se puede abrir, mover
   y cobrar; el lavado es tiempo prestado, que solo dice que esa persona esta ocupada.
   Asi que lo ajeno va con el MISMO tono de la persona al 14%, con su filo de 4px a color
   pleno. Se sigue leyendo de quien es y se sigue distinguiendo de un trabajo, de lejos y
   sin leyenda.
   El background plano va primero como respaldo: color-mix lo entienden los navegadores
   de hoy, pero si alguno no lo hiciera, el bloque se queda gris claro y legible en vez
   de transparente. */
.cita.ajena{background:#F2F5F4;background:color-mix(in srgb,var(--c) 14%,#fff);
  color:var(--c);cursor:default;box-shadow:none;
  border:1.5px solid #E3E9E7;border:1.5px solid color-mix(in srgb,var(--c) 38%,#fff);
  border-left:4px solid var(--c)}
/* La rejilla solo llega de las 6 a las 8 de la noche. Lo que empieza antes o acaba
   despues se corta contra el borde, y el filo rayado dice que la caja no cuenta el
   largo entero: sin la raya se lee como un servicio de media hora pegado al borde.
   Desde que entran los Google de la gente esto es rutina, no rareza: un gimnasio a
   las cinco de la manana es un evento normal. */
.cita.recorte-ini{border-top:2px dashed rgba(255,255,255,.85);border-top-left-radius:2px;
  border-top-right-radius:2px}
.cita.recorte-fin{border-bottom:2px dashed rgba(255,255,255,.85);border-bottom-left-radius:2px;
  border-bottom-right-radius:2px}
.cita.ajena.recorte-ini{border-top:2px dashed var(--c)}
.cita.ajena.recorte-fin{border-bottom:2px dashed var(--c)}

/* El "+N" de lo que no cupo en los carriles. Va arriba a la derecha del atasco, que
   es donde el ojo ya esta mirando cuando ve la columna llena, y pequeno para robarle
   lo menos posible a la cita que si se ve. */
.cal-sobran{position:absolute;right:4px;z-index:2;border:1px solid var(--linea-fuerte);
  background:#fff;color:var(--tinta-2);border-radius:99px;padding:1px 7px;cursor:pointer;
  font:700 10.5px var(--boton);font-variant-numeric:tabular-nums;box-shadow:var(--sombra-1);
  transition:background-color .12s,color .12s}
button.cal-sobran:hover{background:var(--superficie-2);color:var(--tinta);
  border-color:var(--tinta-4)}
div.cal-sobran{cursor:default}

/* Pastilla: la casilla del mes y la tira de todo el dia. */
.cal-pastilla{display:flex;align-items:center;gap:5px;width:100%;min-width:0;border:0;padding:3px 6px;
  border-radius:6px;overflow:hidden;text-align:left;font:inherit;cursor:pointer;
  background:var(--c,var(--persona-0));color:#fff;transition:filter .12s}
button.cal-pastilla:hover{filter:brightness(1.08)}
.cal-pastilla .hh{font:700 10.5px var(--boton);opacity:.85;flex:none;font-variant-numeric:tabular-nums}
.cal-pastilla .qq{font-size:11.5px;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cal-pastilla.hecha{opacity:.52}
/* Igual que .cita.ajena: lavado del tono de la persona en vez de blanco. En la vista de
   mes es donde mas se nota, porque ahi un dia son tres o cuatro pastillas pequenas y
   todas en blanco no dicen nada. */
.cal-pastilla.ajena{background:#F2F5F4;background:color-mix(in srgb,var(--c) 16%,#fff);
  color:var(--c);cursor:default;box-shadow:inset 0 0 0 1.5px var(--c)}

/* ------------------------------ vista de mes --------------------------- */
.mes-cabeza{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border-bottom:1px solid var(--linea);background:#fff}
.mes-cabeza div{padding:10px 8px;text-align:center;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3);font-weight:700;border-right:1px solid var(--linea)}
.mes-cabeza div:last-child{border-right:0}
/* Filas de alto igual y minimo de 104px: caben tres pastillas y el "+N mas" sin
   que una semana cargada estire la rejilla y empuje al resto fuera de pantalla. */
.mes-cuerpo{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:minmax(104px,1fr)}
.mes-dia{display:flex;flex-direction:column;gap:3px;min-width:0;padding:5px 5px 7px;
  border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.mes-dia:nth-child(7n){border-right:0}
.mes-cuerpo > .mes-dia:nth-last-child(-n+7){border-bottom:0}
.mes-dia.fuera{background:var(--ground)}
.mes-dia.hoy{background:var(--verde-mas-suave)}
.mes-dia > .n{align-self:flex-start;display:grid;place-items:center;width:26px;height:26px;
  border:0;border-radius:50%;background:none;cursor:pointer;font:700 13px var(--boton);
  color:var(--tinta-2);font-variant-numeric:tabular-nums;transition:background-color .12s,color .12s}
.mes-dia > .n:hover{background:var(--superficie-2);color:var(--tinta)}
.mes-dia.fuera > .n{color:var(--tinta-4)}
.mes-dia.hoy > .n{background:var(--verde);color:#fff}
.mes-dia .mas{border:0;background:none;cursor:pointer;text-align:left;padding:2px 6px;
  border-radius:6px;font:600 11.5px var(--boton);color:var(--tinta-3)}
.mes-dia .mas:hover{background:var(--superficie-2);color:var(--tinta)}

/* --------------------------- telefono y tableta ------------------------ */
/* La barra lateral se va antes que la rejilla. Entre 900 y 1080 la barra de la
   app ya se lleva 244px y las dos juntas dejan las columnas del dia tan
   estrechas que no cabe ni la hora. Manda la rejilla, que es el trabajo. */
@media(max-width:1080px){
  .cal-marco{grid-template-columns:minmax(0,1fr)}
  .cal-lateral{display:none}
}

.cal-lista{display:none}
@media(max-width:900px){
  .cal-cabeza,.cal-cuerpo,.cal-todoeldia,.mes-cabeza,.mes-cuerpo{display:none}
  .cal-lista{display:block}
  /* En el telefono la barra vuelve, pero como una tira encima de la lista y no
     como una columna. El mini calendario sobra, porque la cabecera ya trae
     anterior, Hoy y siguiente; los filtros no sobran, que es lo que el dueno
     abre en la calle para ver de quien es cada trabajo. */
  .cal-marco{gap:12px}
  .cal-lateral{display:block;position:static;padding:11px}
  .cal-mini{display:none}
  .cal-grupo{border-top:0;margin-top:0;padding-top:0}
  .cal-grupo + .cal-grupo{border-top:1px solid var(--linea);margin-top:10px;padding-top:10px}
  .cal-gente{flex-direction:row;flex-wrap:wrap;gap:5px}
  .cal-persona{background:var(--superficie-2);padding:6px 11px 6px 9px;gap:7px}
  /* En el telefono se esconde la nota de cortesia de cada persona, que ocupa y no
     aporta. Pero la de "no se pudo leer su calendario" SI se queda: el hallazgo que la
     puso ahi era justo que un calendario ilegible se veia igual que un dia libre, y quien
     mira la agenda desde la calle es el que menos puede permitirse agendar encima de una
     franja ocupada. Esconderla en movil deshacia el arreglo justo donde hacia falta. */
  .cal-persona .oo{display:none}
  .cal-persona.con-problema .oo{display:flex}
  .cal-persona .nn{font-size:12.5px;max-width:150px}

  .cal-dia-lista{border-bottom:1px solid var(--linea);padding:14px 16px}
  .cal-dia-lista:last-child{border-bottom:0}
  .cal-dia-lista.hoy{background:var(--verde-mas-suave)}
  .cal-dia-lista > h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--tinta-3);font-weight:700;margin-bottom:10px}
  .cal-dia-lista.hoy > h3{color:var(--verde-mas-hondo)}
  /* La marca de color a la izquierda es toda la informacion de quien lo lleva:
     en el telefono no hay sitio para nombres, y el color ya es el mismo que en la
     pantalla grande. */
  /* En el telefono la rejilla se cambia por esta lista de tarjetas, y hasta hoy TODAS
     salian blancas con 4px de color a la izquierda: tambien las nuestras. O sea que el
     "todo en blanco" del que se quejo Ricardo era peor aqui que en el escritorio, y
     justo aqui es donde mira quien esta en la calle. Ahora la tarjeta lleva el tono de
     quien la tiene, al 14%, con su filo a color pleno. */
  .cita-lista{display:flex;gap:12px;align-items:flex-start;width:100%;padding:11px 13px;
    margin-bottom:7px;border:1px solid var(--linea);border-left:4px solid var(--c,var(--persona-0));
    border-radius:10px;background:#fff;
    background:color-mix(in srgb,var(--c,var(--persona-0)) 14%,#fff);
    text-align:left;font:inherit;color:inherit;cursor:pointer}
  /* Al pulsar se oscurece el tono que ya tiene, en vez de pisarlo con un gris: con
     background se perdia el color justo en el momento de tocar la tarjeta. */
  button.cita-lista:active{filter:brightness(.95)}
  .cita-lista .hh{flex:none;width:44px;font:800 13px var(--boton);color:var(--tinta);
    font-variant-numeric:tabular-nums;padding-top:1px}
  .cita-lista .txt{min-width:0}
  .cita-lista .qq{display:block;font-weight:700;font-size:14px}
  .cita-lista .dd{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tinta-2)}
  .cita-lista .dd svg{width:12px;height:12px;flex:none}
  .cita-lista.hecha{opacity:.55}
  .cita-lista.hecha .qq{text-decoration:line-through}
  /* Mismo criterio que en la rejilla: lo de Google va sin relleno blanco y sin
     clic, porque no hay ficha detras. */
  /* El filo de 4px ya trae el color de la persona (ver .cita-lista), asi que aqui basta
     con el lavado de fondo para que no sea una tarjeta blanca mas. */
  .cita-lista.ajena{background:#F2F5F4;
    background:color-mix(in srgb,var(--c) 10%,#fff);cursor:default}
  .cal-dia-lista .nada{color:var(--tinta-4);font-size:13px}
}
/* En el telefono el conmutador y las flechas comparten renglon con el titulo:
   apretados caben los tres modos sin empujar la agenda media pantalla abajo. */
@media(max-width:560px){
  .conmutador button{padding:6px 10px;font-size:13px}
  .cal-sync{padding:5px 10px 5px 8px;font-size:11.5px}
}

/* ================================ dialogo ============================== */
.dialogo{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;
  background:rgba(29,35,32,.42);backdrop-filter:blur(2px);animation:aparecer .16s ease}
.dialogo .caja-d{background:#fff;border-radius:var(--r-g);padding:28px 28px 24px;width:100%;
  max-width:440px;box-shadow:var(--sombra-3);max-height:90vh;overflow-y:auto}
.dialogo h2{font-size:20px;margin-bottom:5px}
.dialogo .baja{color:var(--tinta-2);font-size:14px;margin:0 0 20px;line-height:1.55}
.dialogo .botones{display:flex;gap:8px;margin-top:20px}
.dialogo .botones .b{flex:1}
.clave-nueva{background:var(--verde-suave);border-radius:var(--r-s);padding:18px;text-align:center;
  margin:16px 0}
.clave-nueva .v{font:700 19px ui-monospace,Consolas,monospace;color:var(--verde-mas-hondo);
  word-break:break-all;margin-top:6px}

/* ============================== formularios ============================ */
.formulario-tarjeta{display:flex;gap:18px;align-items:flex-start;padding:20px}
.formulario-tarjeta .marca{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  flex:none;background:var(--verde-suave);color:var(--verde-mas-hondo)}
.formulario-tarjeta .marca svg{width:22px;height:22px}
.formulario-tarjeta .marca.azul{background:var(--azul-suave);color:var(--azul)}
.formulario-tarjeta .txt{flex:1;min-width:0}
.formulario-tarjeta h3{font-size:16px;margin-bottom:3px}
.formulario-tarjeta p{margin:0 0 12px;color:var(--tinta-2);font-size:14px;line-height:1.55}
.enlace-copiable{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.enlace-copiable input{font:600 12.5px ui-monospace,Consolas,monospace;flex:1;min-width:210px}

/* Cada cosa copiable con su rotulo, su campo y su boton. El rotulo dice para
   que sirve, porque tres campos monoespaciados seguidos sin nombre se parecen
   todos y se acaba pegando el iframe en la bio de Instagram. */
.copiable{margin-top:16px}
.copiable .rot{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-3);margin-bottom:6px}
.copiable .rot span{text-transform:none;letter-spacing:0;font-weight:500;
  color:var(--tinta-4);margin-left:7px}
.copiable .fila{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.copiable .botones{display:flex;gap:7px;flex-wrap:wrap}
.copiable input,.copiable textarea{font:600 12.5px/1.6 ui-monospace,Consolas,monospace;
  flex:1;min-width:230px;margin:0;resize:vertical}
/* El codigo, en oscuro: se lee como codigo y no invita a escribir encima. */
.copiable.es-codigo textarea{background:#1D2320;color:#D6E4DC;border-color:#2C3530;
  font-weight:500}
.copiable.es-codigo textarea:focus{border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(12,180,96,.18)}
.aviso-copia:empty{display:none}
.aviso-copia{margin-top:14px}
.aviso-copia .mal{margin:0;padding:11px 14px;font-size:13px}
.codigo{background:#1D2320;color:#D6E4DC;border-radius:var(--r-s);padding:15px 17px;
  font:400 12.5px/1.7 ui-monospace,Consolas,monospace;overflow-x:auto;white-space:pre;
  margin-top:12px}
.contadores{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap}
.contadores div{font-size:13px;color:var(--tinta-3)}
.contadores b{display:block;font-size:19px;color:var(--tinta);font-weight:800;
  font-variant-numeric:tabular-nums}

/* ================================ ajustes ============================== */
.fila-ajuste{display:flex;gap:16px;align-items:flex-start;padding:17px 20px;
  border-bottom:1px solid var(--superficie-2)}
.fila-ajuste:last-child{border-bottom:0}
.fila-ajuste .txt{flex:1;min-width:0}
.fila-ajuste h3{font-size:14.5px;margin-bottom:2px}
.fila-ajuste p{margin:0;font-size:13.5px;color:var(--tinta-3);line-height:1.55}
.fila-ajuste .der{flex:none;display:flex;gap:8px;align-items:center}
.interruptor{position:relative;width:44px;height:25px;flex:none}
.interruptor input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.interruptor .pista-int{position:absolute;inset:0;background:var(--linea-fuerte);border-radius:99px;
  transition:background-color .18s}
.interruptor .bolita{position:absolute;top:3px;left:3px;width:19px;height:19px;background:#fff;
  border-radius:50%;transition:transform .18s;box-shadow:var(--sombra-1)}
.interruptor input:checked ~ .pista-int{background:var(--verde)}
.interruptor input:checked ~ .bolita{transform:translateX(19px)}
.correos{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.correo-chip{display:inline-flex;align-items:center;gap:7px;background:var(--superficie-2);
  border-radius:99px;padding:6px 8px 6px 13px;font-size:13px}
.correo-chip button{background:none;border:0;cursor:pointer;color:var(--tinta-3);
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1}
.correo-chip button:hover{background:var(--linea-fuerte);color:var(--tinta)}
@media(max-width:560px){.fila-ajuste{flex-direction:column;gap:11px}.fila-ajuste .der{width:100%}}

/* ======================= para cuando lo pidio ========================== */
/* La franja al costado de la tarjeta es lo que hace que el "lo antes posible" se
   vea sin abrir la ficha, que es justo para lo que la oficina mira esta lista
   cada manana. Va despues de .lead:hover a proposito: con la misma
   especificidad gana la ultima, y asi la marca no se apaga al pasar el raton
   por encima, que es cuando mas se esta mirando la tarjeta. */
.lead.urge{border-left:3px solid var(--alerta);padding-left:11px}
/* El unico relleno solido de toda la lista. Es lo mas ruidoso que hay en la
   pantalla, y tiene que serlo: es el que hay que llamar primero. */
.eti.urge{background:var(--alerta);color:#fff}

.pedido{background:var(--superficie-2);border-left:3px solid var(--linea-fuerte);
  border-radius:var(--r-s);padding:11px 14px;margin-bottom:12px}
.pedido .rot{display:block;margin-bottom:3px}
.pedido b{font-weight:800;font-size:15px}
.pedido .dia{color:var(--tinta-2);font-size:14px}
.pedido.urge{background:var(--alerta-suave);border-left-color:var(--alerta)}
.pedido.urge .rot,.pedido.urge b{color:var(--alerta)}

/* Los avisos de la fecha van pegados a las casillas y encima del boton de
   guardar, para que se lean antes de apretarlo. Vacio no ocupa nada: la caja
   existe siempre porque el aviso llega despues de pintar la ficha. */
#aviso-agenda:empty{display:none}
#aviso-agenda .mal,#aviso-agenda .nota-azul{margin:12px 0 0}
#aviso-agenda .pista{margin-top:10px}

/* ------------------- el aviso al cliente, en la ficha -------------------- */
/* Una linea, no una caja: aqui van tres o cuatro seguidas (correo si, WhatsApp
   no) y cuatro cajas con borde se comen la ficha entera. El verde dice "salio"
   sin gritarlo, que es justo el peso que tiene el dato. */
.ok-suave{font-size:13px;color:var(--verde-mas-hondo);font-weight:600;
  margin-top:8px;line-height:1.5}
.ok-suave::before{content:"✓ ";font-weight:800}
#aviso-cliente:empty{display:none}
#aviso-cliente{margin-top:10px}
#aviso-cliente .mal{margin:8px 0 0;padding:10px 13px;font-size:13px}
#aviso-cliente .pista{margin-top:6px}

/* ------------------ arrastrar tarjetas entre columnas ------------------- */
/* La que va en la mano se queda puesta y en gris: el navegador ya dibuja la
   copia que sigue al cursor, asi que esconderla dejaria el hueco saltando de
   columna en columna. La columna que recibe se pinta entera, no solo el borde,
   porque a 280px de ancho un borde de un pixel no se ve soltando. */
.lead[draggable="true"]{cursor:grab}
.lead[draggable="true"]:active{cursor:grabbing}
.lead.arrastrando{opacity:.4;border-style:dashed;box-shadow:none;transform:none}
.col{transition:background .12s,box-shadow .12s}
.col.recibiendo{background:var(--verde-suave);
  box-shadow:inset 0 0 0 2px var(--verde)}
.col.recibiendo .nada{color:var(--verde-mas-hondo)}

/* ------------------------ filtros de la tabla --------------------------- */
/* Una fila de selectores por encima de la tabla. Cada uno con su rotulo
   encima y no dentro: un "Zona" que desaparece al elegir deja a la oficina
   mirando "Naco" sin saber de que es. Se envuelven en pantallas estrechas
   antes que encogerse, que un selector de 60px no se puede leer. */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.filtro{display:flex;flex-direction:column;gap:5px}
.filtro > span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:700;padding-left:2px}
.filtro select{min-width:150px;margin:0}
.filtros .b{margin-bottom:1px}

/* El renglon que dice cuantos quedaron despues de filtrar. Sin el, una lista
   corta se lee como "hay pocos clientes" en vez de "filtraste fuerte". */
/* Los filtros de la vista de facturas. Botones y no un desplegable: son cuatro, y
   cuántas hay en cada estado es justo lo que se quiere ver sin abrir nada. */
.filtros-f{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip-f{font:600 13px var(--boton);padding:8px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--linea-fuerte);background:#fff;color:var(--tinta-2);
  display:inline-flex;align-items:center;gap:7px;
  transition:background-color .14s,border-color .14s,color .14s}
.chip-f:hover{border-color:var(--verde);color:var(--tinta)}
.chip-f[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.chip-f .cuantos{font-size:11.5px;font-weight:700;opacity:.65;font-variant-numeric:tabular-nums}

.resumen-tabla{padding:14px 20px;border-bottom:1px solid var(--linea);
  font-size:13px;color:var(--tinta-2)}
.resumen-tabla b{color:var(--tinta);font-weight:800}

td.nowrap{white-space:nowrap}
td a{color:var(--verde-mas-hondo);text-decoration:none;font-weight:600}
td a:hover{text-decoration:underline}

/* El "lo antes posible" de la barra de espera va en ambar y no en verde: es la
   unica fila de todo el bloque sobre la que hay que hacer algo hoy, y en verde
   se lee como que va bien. */
.paso-embudo .relleno.urge{background:linear-gradient(90deg,var(--alerta) 0%,#c2410c 100%)}
/* La carga del equipo mide trabajos, no porcentajes, asi que la barra necesita
   sitio propio y no se encoge a nada dentro de la celda. */
td .medida{min-width:70px;max-width:180px}

/* --------------------- atajos para poner la fecha ----------------------- */
/* Dos tandas, dia y hora, con su rotulo a la izquierda. Envuelven antes que
   encogerse: un chip de "Mañana" recortado a "Maña" no ahorra nada. */
.atajos-fecha{margin:4px 0 14px}
.atajos-fecha .tanda{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:7px}
.atajos-fecha .tanda > .r{width:42px;flex:none;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3);font-weight:700;margin:0}
.atajos-fecha .chip{background:var(--superficie-2);border:1px solid transparent;
  border-radius:99px;padding:6px 13px;font:600 12.5px inherit;color:var(--tinta-2);
  cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.atajos-fecha .chip:hover{background:var(--verde-suave);color:var(--verde-mas-hondo);
  border-color:var(--verde)}
/* Quitar la fecha no es un atajo mas: se aparta para que no se pulse de paso. */
.atajos-fecha .chip.vacia{margin-left:auto;color:var(--tinta-4)}
.atajos-fecha .chip.vacia:hover{background:var(--alerta-suave);color:var(--alerta);
  border-color:var(--alerta)}

/* ------------------------ importar la cartera --------------------------- */
/* El dialogo del mapeo necesita mas ancho que los demas: nueve desplegables y
   una tabla de muestra debajo. En 440px la muestra sale ilegible, y la muestra
   es lo unico que hace que alguien revise el mapeo de verdad en vez de darle a
   importar de una. */
.dialogo .caja-d.ancha{max-width:720px}
.mapeo{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:11px;margin-top:14px}
.mapeo .filtro select{min-width:0;width:100%}
table.muestra td,table.muestra th{padding:8px 11px;font-size:12.5px}
table.muestra td{color:var(--tinta-2);white-space:nowrap;max-width:160px;
  overflow:hidden;text-overflow:ellipsis}
#archivo-importar{display:block;width:100%;padding:22px;border:2px dashed var(--linea-fuerte);
  border-radius:var(--r);background:var(--superficie-2);cursor:pointer;font-size:14px}
#archivo-importar:hover{border-color:var(--verde);background:var(--verde-mas-suave)}
#aviso-importar:empty{display:none}
#aviso-importar{margin-top:14px}
@media(max-width:560px){.mapeo{grid-template-columns:1fr}}

/* ---------------------- de donde vino el lead (19 oct 2026) -------------- */
/* Canal, campana, conjunto y anuncio en la cabecera de la ficha. Va en gris y en
   letra chica: es contexto para la oficina, no lo que hay que hacer con el lead. */
.procedencia{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px 18px;
  background:var(--superficie-2);border-radius:var(--r-s);padding:12px 14px;margin:-8px 0 18px;
  font-size:13px;line-height:1.4}
.procedencia > div{min-width:0;overflow-wrap:anywhere}
.procedencia .r{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:700;display:block;margin-bottom:1px}

/* ------------------------- perdido con motivo --------------------------- */
.perdida{margin-top:12px;border:1px solid var(--linea-fuerte);border-radius:var(--r-s);
  padding:13px 15px;font-size:14px}
.perdida > b{display:block;color:var(--alerta)}
.perdida .nota-perdida{margin-top:6px;color:var(--tinta-2);white-space:pre-wrap;
  overflow-wrap:anywhere}
.perdida .pie-perdida{margin-top:6px;font-size:12.5px;color:var(--tinta-3)}
/* Los seis motivos en dos columnas, como los botones de estado de la ficha: se tocan
   con el pulgar sin apuntar. En un telefono angosto, una sola. */
.motivos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.motivo{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--linea-fuerte);
  border-radius:9px;cursor:pointer;font-size:14px;font-weight:600;color:var(--tinta-2);
  transition:border-color .14s,background-color .14s}
.motivo:hover{border-color:var(--verde)}
/* La regla general de input (ancho completo, relleno y borde) no es para un radio. */
.motivo input[type=radio]{width:16px;height:16px;margin:0;padding:0;border:0;box-shadow:none;
  accent-color:var(--verde);flex:none}
.motivo:has(input:checked){border-color:var(--verde);background:var(--verde-mas-suave);color:var(--tinta)}
@media(max-width:380px){.motivos{grid-template-columns:1fr}}

/* -------------------------- embudo por campana -------------------------- */
/* La tabla puede ser mas ancha que el telefono: el scroll lateral es suyo, dentro de
   .tabla-envoltura, y la pagina no se mueve de lado. */
.tabla-embudo th,.tabla-embudo td{padding:11px 12px;font-size:13.5px}
.tabla-embudo th:first-child,.tabla-embudo td:first-child{padding-left:20px}
.tabla-embudo th:last-child,.tabla-embudo td:last-child{padding-right:20px}
.tabla-embudo .nombre-embudo{min-width:230px;max-width:300px}
/* El nombre se queda quieto al correr la tabla de lado: sin el, en el telefono se ven
   numeros sin saber de que campana son. */
.tabla-embudo th:first-child,.tabla-embudo td:first-child{position:sticky;left:0;z-index:1;background:#fff;
  box-shadow:1px 0 0 var(--linea)}
.tabla-embudo .nombre-embudo > span,.abrir-campana{overflow-wrap:anywhere}
.abrir-campana{display:inline-flex;align-items:flex-start;gap:7px;background:none;border:0;padding:0;
  font-weight:700;cursor:pointer;text-align:left;color:var(--tinta)}
.abrir-campana:hover{color:var(--verde-mas-hondo)}
.abrir-campana .flecha{flex:none;width:0;height:0;margin-top:5px;border-style:solid;
  border-width:5px 0 5px 7px;border-color:transparent transparent transparent currentColor;
  transition:transform .14s}
.abrir-campana[aria-expanded="true"] .flecha{transform:rotate(90deg)}
.tabla-embudo tr.madre > td.nombre-embudo > span{font-weight:700}
.tabla-embudo tr.hija td{background:var(--verde-mas-suave);font-size:13px}
.tabla-embudo tr.hija td:first-child{padding-left:38px;color:var(--tinta-2)}
/* Las filas fijas van en gris: son lo que no se pudo atribuir, no una campana. */
.tabla-embudo tr.madre.fija td{color:var(--tinta-2)}
.tabla-embudo tr.madre.fija td.nombre-embudo > span,
.tabla-embudo tr.madre.fija .abrir-campana{font-weight:600;color:var(--tinta-2)}
.tabla-embudo .motivo-top{font-size:11.5px;color:var(--alerta);white-space:nowrap;margin-top:2px}
@media(max-width:560px){
  .tabla-embudo th:first-child,.tabla-embudo td:first-child{padding-left:14px}
  .tabla-embudo tr.hija td:first-child{padding-left:28px}
  .tabla-embudo .nombre-embudo{min-width:170px}
}

/* ============================ mi perfil ================================ */
/* 19 oct 2026. El nombre de abajo a la izquierda abre Mi perfil, donde cada quien decide
   si el equipo ve su Google Calendar. Es un boton de verdad, con su foco y su teclado,
   pero se ve igual que antes: no hay que ensenarle a nadie un control nuevo. */
.quien-perfil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;
  border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  border-radius:8px}
.quien-perfil:hover .nom{text-decoration:underline;text-underline-offset:2px}
.quien-perfil:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.perfil-bloque > .pista{font-size:13.5px;margin:0 0 6px;line-height:1.55}
.perfil-bloque > .pista b{color:var(--tinta)}
/* La fila del interruptor va sin los bordes ni el relleno de la de Ajustes: aqui vive
   sola dentro del panel. Y su titulo no es la etiqueta en versalitas de .panel h3: es
   la pregunta que la persona esta contestando. */
.panel .perfil-fila{padding:14px 0 0;border:0;margin-top:8px;border-top:1px solid var(--linea)}
.panel .perfil-fila h3{font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--tinta);
  margin:0 0 4px}
.perfil-error{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--alerta);font-weight:600}
.cal-g-botones{display:flex;flex-wrap:wrap;gap:8px}

/* El calendario que su dueno no comparte: sin casilla, porque no hay nada que
   encender, y con un candado de su color en su lugar, porque sus trabajos del hub si
   se ven pintados asi. En el telefono la nota se esconde y el candado es lo que queda
   diciendo que es privado. La nota va en cursiva como la de quien no tiene Google. */
.cal-persona.privada{cursor:default}
.cal-persona.privada:hover{background:none}
.cal-punto{width:15px;height:15px;flex:none;display:grid;place-items:center;color:var(--c)}
.cal-punto svg{width:14px;height:14px;stroke-width:2.2}
.cal-persona.privada .oo{color:var(--tinta-4);font-style:italic}