/* ==========================================================================
   Cronograma · Orissa Claver

   Misma estructura que el cronograma de Area Group; otra piel. La marca NO se
   inventó aquí: es la de Twenty Sixth & 2nd, la que ya usamos en su inventario
   (26and2.orissaclaver.com) y en su agenda. Crema de fondo —nunca negro, que en
   un cliente de lujo no lee premium sino plantilla—, cobre de acento único,
   tinta cálida, Cormorant Garamond para lo que se lee despacio y Jost para lo
   que se opera.

   Los nombres de los símbolos son los mismos que en la versión en blanco y
   negro. Cambiar de dirección visual es cambiar este bloque, no las 800 líneas
   de abajo.
   ========================================================================== */

@font-face {
  font-family: "Cormorant";
  src: url("/fonts/cormorant.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2-variations");
  font-weight: 300 600;
  font-display: swap;
}

:root {
  /* Tinta cálida, no negra. Es la misma idea que en la versión Notion —bajar el
     contraste duro— pero corrida hacia el marrón de la marca. */
  --tinta:        #3d332b;
  --tinta-fuerte: #261e18;
  --gris-1:       rgba(38, 30, 24, 0.72);  /* 6,0:1  texto secundario         */
  --gris-2:       rgba(38, 30, 24, 0.63);  /* 4,5:1  el mínimo para texto chico */
  --gris-3:       rgba(38, 30, 24, 0.50);  /* 3,1:1  atenuado a propósito       */

  /* Superficies cálidas. El calendario va en hueso para que las tareas respiren;
     los paneles y la barra, en crema, que es el color de la marca. */
  --fondo:        #fffdfa;
  --fondo-panel:  #faf6f0;
  --fondo-hundido:#f4ede4;

  /* Las líneas son cobre muy diluido, no gris: un gris frío sobre crema se ve
     sucio. */
  --linea:        #ebe1d5;
  --linea-suave:  #f2eae0;
  --linea-fuerte: #dccbb7;

  --hover:        rgba(158, 104, 65, 0.055);
  --hover-fuerte: rgba(158, 104, 65, 0.10);
  --seleccion:    rgba(158, 104, 65, 0.12);

  /* El acento es el cobre, y es el único. */
  --acento:       #9e6841;
  --acento-claro: #c08a5e;
  --acento-suave: #f4ebe1;
  --acento-oscuro: #98643f;  /* el cobre un punto más oscuro: para cuando el cobre ES texto pequeño.
                               No confundir con el color del texto SOBRE el cobre, que es --fondo. */
  --acento-borde: rgba(158, 104, 65, 0.30);
  --peligro:      #96513f;  /* el único rojo, y solo para errores */

  --sombra-flota: rgba(38, 30, 24, 0.06) 0 0 0 1px, rgba(38, 30, 24, 0.08) 0 3px 8px,
                  rgba(38, 30, 24, 0.16) 0 18px 40px -12px;
  --sombra-carta: rgba(38, 30, 24, 0.05) 0 0 0 1px, rgba(38, 30, 24, 0.05) 0 2px 4px;
  --sombra-bloque:rgba(38, 30, 24, 0.06) 0 1px 2px;

  --ancho-lateral: 248px;
  --alto-barra: 45px;
  --alto-hora: 52px;
  --ancho-horas: 58px;

  /* El lujo no lleva esquinas redondas. 2px, no 5. */
  --radio: 2px;
  --radio-grande: 3px;

  --serif: "Cormorant", Georgia, "Times New Roman", serif;
  --ui: "Jost", Optima, Candara, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  --rapido: 20ms ease-in;
  --suave: 140ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Color por tipo de tarea. La página sigue siendo crema y tinta: el color entra
   solo en los eventos, como en el calendario de Apple. Pero los colores puros de
   iOS sobre crema se ven de plantilla —el azul eléctrico al lado del cobre pelea—
   así que son diez TIERRAS, cada una a la misma temperatura que la marca. Se
   distinguen entre sí y ninguna le gana al cobre. */
/* Cada tipo trae DOS tonos, y la diferencia importa:

     --tono        la señal: la barra de 3px, el punto, el relleno. Sobre su
                   fondo pasa el 3:1 que pide un componente gráfico, y puede
                   ser vivo.
     --tono-texto  el mismo color oscurecido hasta 4.5:1 sobre ese fondo, para
                   los sitios donde el color ES texto (la etiqueta de tipo de
                   la vista Lista).

   Un solo valor para las dos cosas obliga a elegir: o el naranja se lee y deja
   de ser naranja, o es naranja y no se lee. Medido, no estimado: el naranja
   vivo daba 3,36:1 con texto de 12px. */
.c-azul     { --tono: #4a6580; --tono-texto: #4a6580; --suave: #eaeef2 }  /* pizarra   */
.c-morado   { --tono: #7a4f6b; --tono-texto: #7a4f6b; --suave: #f2eaef }  /* ciruela   */
.c-rosa     { --tono: #a8556a; --tono-texto: #a15266; --suave: #f7ebee }  /* frambuesa */
.c-rojo     { --tono: #a2453a; --tono-texto: #a2453a; --suave: #f7eae7 }  /* óxido     */
.c-naranja  { --tono: #b8722c; --tono-texto: #975e24; --suave: #f8efe1 }  /* naranja   */
.c-ambar    { --tono: #9a7526; --tono-texto: #866621; --suave: #f6efdd }  /* ocre      */
.c-verde    { --tono: #5a7a5f; --tono-texto: #55735a; --suave: #ecf1ec }  /* salvia    */
.c-turquesa { --tono: #3e6f6b; --tono-texto: #3e6f6b; --suave: #e8f0ef }  /* verdemar  */
.c-indigo   { --tono: #5d5a7d; --tono-texto: #5d5a7d; --suave: #eeedf3 }  /* lavanda   */
.c-gris     { --tono: #7b6b5e; --tono-texto: #76675a; --suave: #f2ece5 }  /* topo      */

/* Escala vieja en tonos de tinta: sobrevive como respaldo si un tipo no tiene
   color. Ya no son grises fríos, son la tinta cálida diluida. */
.t0 { --tono: #d8ccbe } .t1 { --tono: #c9baa8 } .t2 { --tono: #b5a491 }
.t3 { --tono: #a08e7b } .t4 { --tono: #8a7867 } .t5 { --tono: #756454 }
.t6 { --tono: #605144 } .t7 { --tono: #4c3f34 } .t8 { --tono: #382d25 }
.t9 { --tono: #261e18 }

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  /* Sin esto, iOS espera un posible doble toque antes de responder al primero. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--ui);
  /* Jost es más estrecha que Inter al mismo cuerpo: a 14px la cuadrícula se veía
     apretada, y a 15px las columnas del día no cambian de ancho pero sí respiran. */
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--acento); outline-offset: 2px; border-radius: var(--radio); }
::selection { background: rgba(158, 104, 65, 0.18); }

/* Scrollbars discretas, como las del propio Notion. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(38, 30, 24, 0.18); border-radius: var(--radio-grande); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(38, 30, 24, 0.34); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.oculto { display: none !important; }

/* ============================ acceso ============================ */

.acceso {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--fondo-panel);
  padding: 24px;
}
.acceso-caja { width: 100%; max-width: 320px; text-align: center; }
.acceso-marca { height: 86px; width: auto; margin: 0 auto 26px; display: block; }
.acceso h1 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: 0; line-height: 1.15; margin: 0 0 8px; color: var(--tinta-fuerte); }
.acceso p { margin: 0 0 26px; font-size: 14px; color: var(--gris-1); }
.acceso form { display: grid; gap: 10px; }
.acceso input {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--fondo-hundido);
  border: 1px solid transparent; border-radius: var(--radio);
  transition: background var(--rapido), box-shadow var(--rapido);
}
.acceso input:focus { outline: none; background: var(--fondo); box-shadow: 0 0 0 1px var(--acento); }
.acceso-error { font-size: 13px; color: var(--peligro); min-height: 18px; margin-top: 2px; }
.acceso-pie { margin-top: 30px; font-size: 12px; color: var(--gris-2); }

.boton-solido {
  height: 38px; padding: 0 16px;
  background: var(--acento); color: var(--fondo);
  border-radius: var(--radio); font-weight: 500; font-size: 14px;
  transition: opacity var(--rapido);
}
.boton-solido:hover { opacity: 0.85; }
.boton-solido:disabled { opacity: 0.4; cursor: default; }

/* ============================ armazón ============================ */

.app { display: flex; height: 100vh; overflow: hidden; }
/* En iOS la barra del navegador se come parte del 100vh y el final del día queda
   debajo. dvh mide el alto realmente visible. */
@supports (height: 100dvh) { .app { height: 100dvh; } }

/* ---- barra lateral ---- */
.lateral {
  width: var(--ancho-lateral); flex: 0 0 var(--ancho-lateral);
  background: var(--fondo-panel);
  border-right: 1px solid var(--linea);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.lateral-cabeza {
  height: var(--alto-barra); flex: 0 0 var(--alto-barra);
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px 0 14px;
}
.lateral-cabeza img { height: 22px; width: auto; }
.lateral-cabeza .marca { min-width: 0; }
.lateral-cabeza .marca b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: 0; line-height: 1.15; color: var(--tinta-fuerte); }
.lateral-cabeza .marca span { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento-oscuro); line-height: 1.4; }

.lateral-cuerpo { flex: 1; overflow-y: auto; padding: 4px 8px 20px; }

.nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 28px; padding: 0 8px;
  border-radius: var(--radio); font-size: 14px; color: var(--gris-1);
  transition: background var(--rapido);
  text-align: left;
}
.nav-item:hover { background: var(--hover); }
.nav-item.activo { background: var(--hover-fuerte); color: var(--tinta-fuerte); font-weight: 500; }
.nav-item svg { flex: 0 0 16px; opacity: 0.75; }
.nav-item .atajo { margin-left: auto; font-size: 11px; color: var(--gris-3); }

.grupo { margin-top: 20px; }
.grupo-titulo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; margin-bottom: 4px; height: 22px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gris-2);
}
.grupo-titulo button { color: var(--gris-2); font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: var(--radio); }
.grupo-titulo button:hover { background: var(--hover); color: var(--tinta); }

/* filtros: una fila por persona / tipo, con casilla */
.filtro {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 27px; padding: 0 8px;
  border-radius: var(--radio); font-size: 13.5px; color: var(--gris-1);
  transition: background var(--rapido);
  text-align: left;
}
.filtro:hover { background: var(--hover); }
.filtro.apagado { opacity: 0.4; }
.filtro .punto {
  width: 9px; height: 9px; border-radius: var(--radio); background: var(--tono, var(--gris-2)); flex: 0 0 9px;
  position: relative; cursor: pointer;
}
/* El punto mide 9px pero el dedo necesita más: se le amplía el área de toque. */
.filtro .punto::after { content: ""; position: absolute; inset: -8px -6px; }
.filtro .punto:hover { box-shadow: 0 0 0 3px var(--suave, var(--hover)); }
.filtro .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro .cuenta { margin-left: auto; font-size: 11px; color: var(--gris-2); font-variant-numeric: tabular-nums; }
.filtro .quitar { margin-left: 4px; opacity: 0; color: var(--gris-2); font-size: 14px; line-height: 1; padding: 0 2px; }
.filtro:hover .quitar { opacity: 1; }
.filtro .quitar:hover { color: var(--tinta-fuerte); }

/* avatar de iniciales, monocromo */
.avatar {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta-fuerte); color: var(--fondo);
  font-size: 9px; font-weight: 600; letter-spacing: 0.02em;
}
.avatar.hueco { background: transparent; color: var(--gris-1); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.avatar.grande { width: 24px; height: 24px; flex-basis: 24px; font-size: 10px; }

/* mini calendario */
.mini { padding: 2px 6px 0; }
.mini-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px; }
.mini-cabeza b { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; text-transform: capitalize; }
.mini-cabeza div { display: flex; gap: 1px; }
.mini-cabeza button { width: 20px; height: 20px; border-radius: var(--radio); color: var(--gris-2); display: grid; place-items: center; }
.mini-cabeza button:hover { background: var(--hover); color: var(--tinta); }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mini-grid span {
  height: 22px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 500; color: var(--gris-2);
}
.mini-grid button {
  height: 22px; border-radius: var(--radio); font-size: 11.5px; color: var(--gris-1);
  position: relative; font-variant-numeric: tabular-nums;
  transition: background var(--rapido);
}
.mini-grid button:hover { background: var(--hover-fuerte); }
.mini-grid button.fuera { color: var(--gris-3); }
.mini-grid button.hoy { color: var(--tinta-fuerte); font-weight: 700; }
.mini-grid button.en-vista { background: var(--seleccion); color: var(--tinta-fuerte); }
.mini-grid button .marca-dia {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--gris-2);
}

/* actividad reciente */
.actividad { display: grid; gap: 9px; padding: 2px 8px 0; }
.actividad-fila { font-size: 11.5px; color: var(--gris-2); line-height: 1.4; }
.actividad-fila b { color: var(--gris-1); font-weight: 500; }

/* ---- zona principal ---- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fondo); }

.barra {
  height: var(--alto-barra); flex: 0 0 var(--alto-barra);
  display: flex; align-items: center; gap: 4px;
  padding: 0 14px; border-bottom: 1px solid var(--linea);
}
.migas {
  display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; overflow: hidden;
  cursor: pointer; padding: 3px 6px; margin-left: -6px; border-radius: var(--radio);
  transition: background var(--rapido);
}
.migas:hover { background: var(--hover); }
.chevron-migas { flex: 0 0 12px; color: var(--gris-3); }
.migas .raiz { color: var(--gris-1); }
.migas .sep { color: var(--gris-3); }
.migas .hoja { font-weight: 500; color: var(--tinta-fuerte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.selector-vista {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 7px 0 9px; border-radius: var(--radio);
  font-size: 13.5px; color: var(--tinta-fuerte); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  transition: background var(--rapido);
  margin-left: 8px; white-space: nowrap;
}
.selector-vista:hover { background: var(--hover); }
.selector-vista svg { opacity: 0.5; }

.menu .marca-activa { margin-left: auto; color: var(--tinta-fuerte); }

.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.boton-barra {
  height: 28px; padding: 0 8px; border-radius: var(--radio);
  font-size: 14px; color: var(--gris-1);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--rapido);
  white-space: nowrap;
}
.boton-barra:hover { background: var(--hover); color: var(--tinta-fuerte); }
.boton-barra.icono { width: 28px; padding: 0; justify-content: center; }
.boton-barra.principal-cta { background: var(--acento); color: var(--fondo); padding: 0 10px; font-weight: 500; }
.boton-barra.principal-cta:hover { background: var(--acento); opacity: 0.88; color: var(--fondo); }

.nav-fechas { display: flex; align-items: center; gap: 1px; margin-left: 10px; flex: 0 0 auto; }
.nav-fechas button { width: 26px; height: 26px; border-radius: var(--radio); color: var(--gris-1); display: grid; place-items: center; }
.nav-fechas button:hover { background: var(--hover); color: var(--tinta-fuerte); }
.nav-fechas .hoy { width: auto; padding: 0 9px; font-size: 13px; }

.buscador {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 9px; border-radius: var(--radio);
  background: transparent; transition: background var(--rapido);
}
.buscador:focus-within { background: var(--fondo-hundido); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.buscador input { width: 130px; border: 0; background: transparent; font-size: 13.5px; }
.buscador input:focus { outline: none; }
.buscador input::placeholder { color: var(--gris-3); }
.buscador svg { color: var(--gris-2); flex: 0 0 14px; }

/* franja de resumen bajo la barra */
.resumen {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; border-bottom: 1px solid var(--linea-suave);
  font-size: 12.5px; color: var(--gris-2);
}
.resumen .barra-progreso {
  width: 120px; height: 4px; border-radius: 2px;
  background: var(--linea-fuerte); overflow: hidden;
}
.resumen .barra-progreso i { display: block; height: 100%; background: var(--acento); border-radius: 2px; transition: width var(--suave); }
.resumen b { color: var(--tinta-fuerte); font-weight: 600; font-variant-numeric: tabular-nums; }
.resumen .sep-punto { color: var(--gris-3); }

.lienzo { flex: 1; overflow: auto; position: relative; }

@keyframes entra-derecha { from { opacity: 0; transform: translateX(16px) } to { opacity: 1; transform: none } }
@keyframes entra-izquierda { from { opacity: 0; transform: translateX(-16px) } to { opacity: 1; transform: none } }
.entra-derecha { animation: entra-derecha 170ms cubic-bezier(0.2, 0, 0.2, 1); }
.entra-izquierda { animation: entra-izquierda 170ms cubic-bezier(0.2, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .entra-derecha, .entra-izquierda { animation: none; }
}

/* ============================ vista semana ============================ */

.semana { min-width: 780px; }
.semana.un-dia { min-width: 0; }
/* Un solo día estirado a 1400px se ve desierto; en pantalla ancha se centra. */
@media (min-width: 1000px) { .semana.un-dia { max-width: 900px; margin: 0 auto; } }
.semana.un-dia .dia-cabeza { padding: 10px 6px 9px; }
.semana.un-dia .dia-cabeza .nombre { font-size: 11px; }

.semana-fija { position: sticky; top: 0; z-index: 6; background: var(--fondo); }

.semana-cabeza {
  display: grid; grid-template-columns: var(--ancho-horas) repeat(var(--dias, 7), minmax(0, 1fr));
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.semana-cabeza .esquina { border-right: 1px solid var(--linea-suave); }
.dia-cabeza {
  padding: 9px 6px 8px; text-align: center;
  border-right: 1px solid var(--linea-suave);
  cursor: pointer;
}
.dia-cabeza:last-child { border-right: 0; }
.dia-cabeza:hover .numero { background: var(--hover-fuerte); }
.dia-cabeza .nombre {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris-2); margin-bottom: 4px;
}
.dia-cabeza .numero {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 15px; font-weight: 500; color: var(--tinta);
  font-variant-numeric: tabular-nums;
  transition: background var(--rapido);
}
.dia-cabeza.es-hoy .nombre { color: var(--tinta-fuerte); }
.dia-cabeza.es-hoy .numero { background: var(--acento); color: var(--fondo); font-weight: 600; }
.dia-cabeza.finde .nombre, .dia-cabeza.finde .numero { color: var(--gris-2); }
.dia-cabeza.finde.es-hoy .numero { color: var(--fondo); }

/* fila de "sin hora" */
.sin-hora {
  display: grid; grid-template-columns: var(--ancho-horas) repeat(var(--dias, 7), minmax(0, 1fr));
  border-bottom: 1px solid var(--linea);
  min-height: 30px;
  background: var(--fondo);
}
.sin-hora .etiqueta {
  font-size: 10px; color: var(--gris-2); text-align: right; padding: 7px 8px 0 0;
  border-right: 1px solid var(--linea-suave); letter-spacing: 0.02em;
}
.sin-hora .celda { border-right: 1px solid var(--linea-suave); padding: 4px; display: grid; gap: 3px; align-content: start; }
.sin-hora .celda:last-child { border-right: 0; }

.semana-cuerpo {
  display: grid; grid-template-columns: var(--ancho-horas) repeat(var(--dias, 7), minmax(0, 1fr));
  position: relative;
  /* Aire arriba y abajo: sin él, la etiqueta de la primera hora quedaba medio
     tapada por la fila fija y la última se cortaba contra el borde. */
  padding: 14px 0 30px;
}
.columna-horas { border-right: 1px solid var(--linea-suave); }
.columna-horas .hora {
  height: var(--alto-hora); position: relative;
  font-size: 10.5px; color: var(--gris-2); text-align: right; padding-right: 8px;
  font-variant-numeric: tabular-nums;
}
.columna-horas .hora span { position: relative; top: -6px; }

.columna-dia {
  position: relative;
  border-right: 1px solid var(--linea-suave);
  /* Las guías horarias son fondo, no elementos: mantiene el DOM liviano al arrastrar. */
  background-image:
    repeating-linear-gradient(to bottom,
      var(--linea) 0, var(--linea) 1px,
      transparent 1px, transparent var(--alto-hora));
  background-position: 0 -1px;
}
.columna-dia:last-child { border-right: 0; }
.columna-dia.finde { background-color: rgba(38, 30, 24, 0.016); }
.columna-dia.arrastre-encima { background-color: var(--hover); }

/* la media hora, apenas insinuada */
.columna-dia::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--alto-hora) / 2 - 1px),
    var(--linea-suave) calc(var(--alto-hora) / 2 - 1px), var(--linea-suave) calc(var(--alto-hora) / 2),
    transparent calc(var(--alto-hora) / 2), transparent var(--alto-hora));
  background-position: 0 -1px;
}

.linea-ahora { position: absolute; left: 0; right: 0; height: 0; z-index: 4; pointer-events: none; }
.linea-ahora::before {
  content: ""; position: absolute; left: -4px; top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--acento);
}
.linea-ahora::after { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1.5px solid var(--acento); }

/* bloque de tarea */
.bloque {
  position: absolute; left: 3px; right: 5px; z-index: 2;
  background: var(--suave, var(--fondo));
  border: 1px solid transparent;
  border-left: 3px solid var(--tono, var(--gris-2));
  border-radius: var(--radio);
  padding: 3px 6px 3px 7px;
  overflow: hidden; cursor: pointer; text-align: left;
  transition: box-shadow var(--rapido), filter var(--rapido);
}
.bloque:hover { box-shadow: var(--sombra-carta); filter: brightness(0.975); z-index: 3; }
.bloque .titulo {
  font-size: 12px; font-weight: 500; color: var(--tinta-fuerte); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bloque .meta {
  font-size: 10.5px; color: var(--gris-1); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Bloque bajo: el título a una línea y sin rayita de estirar, que si no se
   sentaba encima de la hora. */
.bloque.apretado .titulo { -webkit-line-clamp: 1; }
.bloque.apretado .agarre::after { display: none; }
.bloque.corto { padding-top: 1px; padding-bottom: 1px; display: flex; align-items: center; gap: 5px; }
.bloque.corto .titulo { -webkit-line-clamp: 1; }
.bloque.corto .meta { margin-top: 0; }
.bloque.hecha { background: var(--fondo-hundido); border-left-color: var(--gris-3); }
.bloque.hecha .titulo, .bloque.hecha .meta { color: var(--gris-1); }
.bloque.hecha .titulo { text-decoration: line-through; text-decoration-thickness: 1px; }
.bloque.en-curso { border-style: dashed; }
.bloque.alta::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--tono, var(--tinta-fuerte));
}
.bloque.arrastrando { opacity: 0.4; }
/* Confirma que el toque largo prendió y el dedo ya manda sobre la tarea. */
.bloque.listo-arrastrar, .chip.listo-arrastrar {
  transform: scale(1.03);
  box-shadow: var(--sombra-flota);
  z-index: 12;
}
.bloque.atenuada { opacity: 0.25; }
.bloque .agarre {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  cursor: ns-resize;
}
.bloque .agarre::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 1px; background: var(--gris-3);
  opacity: 0; transition: opacity var(--rapido);
}
.bloque:hover .agarre::after { opacity: 1; }

/* fantasma que sigue al puntero mientras se arrastra */
.fantasma {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--fondo); border: 1px solid var(--tinta-fuerte);
  border-left: 3px solid var(--tinta-fuerte); border-radius: var(--radio);
  padding: 3px 7px; box-shadow: var(--sombra-flota);
  font-size: 12px; font-weight: 500; color: var(--tinta-fuerte);
  overflow: hidden;
}
.fantasma .hora-fantasma { font-size: 10.5px; color: var(--gris-1); font-variant-numeric: tabular-nums; }

.pista-vacia {
  position: absolute; left: calc(var(--ancho-horas) / 2); right: 0; top: 46%;
  z-index: 3; pointer-events: none;   /* el hueco de abajo sigue siendo clicable */
  display: grid; gap: 3px; justify-items: center; text-align: center;
}
/* Si hay eventos debajo, el aviso necesita su propio fondo o no se lee. */
.pista-vacia.sobre-agenda {
  left: 64%; right: auto; transform: translateX(-50%);
  max-width: min(400px, 60%);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-carta);
  padding: 12px 18px;
}
.pista-vacia b { font-size: 14px; font-weight: 600; color: var(--tinta-fuerte); }
.pista-vacia span { font-size: 13px; color: var(--gris-2); }

/* ══════════════ espejo de su agenda de GHL ══════════════

   Es de otra fuente y tiene que leerse como tal: sin relleno de color, con un
   rayado diagonal muy tenue y en el gris cálido de la marca. Los colores están
   reservados para los tipos de tarea del equipo; si sus 50 eventos semanales
   también fueran de colores, no se distinguiría lo propio de lo espejado. */

.columna-dia.con-carril .carril-agenda,
.columna-dia.con-carril .carril-tareas { position: absolute; top: 0; bottom: 0; }
/* Poco menos de un tercio: suficiente para leer «Daily Marketing» y que las
   tareas del equipo se queden con el ancho útil. */
/* En la semana, siete columnas dejan ~155px por día: al 30% el carril daba 47px
   y el título era una palabra cortada. Al 40% se lee «Daily Marketing». */
.columna-dia.con-carril .carril-agenda { left: 0; width: 40%; border-right: 1px dashed var(--linea-fuerte); }
.columna-dia.con-carril .carril-tareas { left: 40%; right: 0; }
/* En la vista Día la columna es enorme: con un cuarto sobra, y las tareas del
   equipo se quedan con el sitio que merecen. */
.semana.un-dia .columna-dia.con-carril .carril-agenda { width: 24%; }
.semana.un-dia .columna-dia.con-carril .carril-tareas { left: 24%; }
/* Sin carril, las tareas siguen ocupando la columna entera. */
.columna-dia:not(.con-carril) .carril-tareas { position: absolute; inset: 0; }
/* Los dos carriles dejan pasar el clic al hueco de abajo; los bloques no. */
.carril-agenda, .carril-tareas { pointer-events: none; }
.carril-agenda > *, .carril-tareas > * { pointer-events: auto; }

.evento {
  position: absolute; z-index: 2;
  display: block; overflow: hidden; text-align: left; cursor: pointer;
  padding: 2px 4px 2px 5px;
  border: 1px solid var(--linea-fuerte);
  border-left: 2px solid var(--gris-2);
  border-radius: var(--radio);
  background-color: var(--fondo-panel);
  /* El rayado dice «esto viene de fuera» sin gastar un color. */
  background-image: repeating-linear-gradient(135deg,
    rgba(38, 30, 24, 0.045) 0 3px, transparent 3px 7px);
  transition: box-shadow var(--rapido), filter var(--rapido);
}
.evento:hover { box-shadow: var(--sombra-carta); filter: brightness(0.97); z-index: 3; }
.evento .titulo {
  font-size: 10.5px; font-weight: 500; color: var(--tinta); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.evento .meta { font-size: 9.5px; color: var(--gris-1); font-variant-numeric: tabular-nums; }
.evento.corto .titulo { -webkit-line-clamp: 1; }
.evento.corto .meta { display: none; }

/* En la fila de arriba (cumpleaños, estancias de varios días) y en el mes, el
   evento es un chip en línea, no un bloque colocado. */
.evento.chip-evento {
  position: static; width: 100%;
  display: flex; align-items: center; gap: 5px;
  padding: 2px 6px; min-height: 19px;
}
.evento.chip-evento .titulo { -webkit-line-clamp: 1; font-size: 11px; }

/* El interruptor de la barra lateral y la fila de la vista Lista. El punto no
   lleva color de tipo: lleva el mismo rayado que los eventos, para que se
   reconozca de dónde vienen sin leer la etiqueta. */
.punto-agenda {
  background-color: var(--fondo-panel) !important;
  background-image: repeating-linear-gradient(135deg,
    rgba(38, 30, 24, 0.30) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
.nota-agenda { padding: 2px 9px 0; font-size: 11px; color: var(--gris-2); line-height: 1.35; }
.nota-agenda.es-aviso { color: var(--peligro); }

.fila.fila-evento { color: var(--gris-1); }
.fila.fila-evento .titulo-col { color: var(--tinta); }
.fila-evento .marca-agenda {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: var(--radio);
  background-color: var(--fondo-panel);
  background-image: repeating-linear-gradient(135deg,
    rgba(38, 30, 24, 0.22) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
.etiqueta-agenda { color: var(--gris-1) !important; }
.etiqueta-agenda .nom { font-style: italic; }

/* ============================ vista mes ============================ */

.mes { display: flex; flex-direction: column; min-height: 100%; min-width: 700px; }
.mes-cabeza {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 4; background: var(--fondo);
}
.mes-cabeza div {
  padding: 8px 10px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-2);
  border-right: 1px solid var(--linea-suave);
}
.mes-cabeza div:last-child { border-right: 0; }
.mes-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(112px, 1fr); }
.celda-mes {
  border-right: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  padding: 4px 4px 6px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; position: relative;
  transition: background var(--rapido);
}
.celda-mes:nth-child(7n) { border-right: 0; }
.celda-mes:hover { background: rgba(38, 30, 24, 0.022); }
.celda-mes.arrastre-encima { background: var(--hover); }
.celda-mes.otro-mes { background: var(--fondo-panel); }
.celda-mes.finde { background-color: rgba(38, 30, 24, 0.016); }
.celda-mes .dia-num {
  align-self: flex-start;
  min-width: 22px; height: 22px; padding: 0 5px; margin-bottom: 1px;
  display: inline-grid; place-items: center; border-radius: 11px;
  font-size: 12px; font-weight: 500; color: var(--gris-1);
  font-variant-numeric: tabular-nums;
}
.celda-mes.otro-mes .dia-num { color: var(--gris-3); }
.celda-mes.es-hoy .dia-num { background: var(--acento); color: var(--fondo); font-weight: 600; }
.celda-mes .mas { font-size: 11px; color: var(--gris-2); padding: 1px 5px; border-radius: var(--radio); text-align: left; }
.celda-mes .mas:hover { background: var(--hover-fuerte); color: var(--tinta-fuerte); }

/* chip compacto usado en mes y en la fila sin hora */
.chip {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 6px 2px 5px; border-radius: var(--radio);
  font-size: 11.5px; line-height: 1.35; text-align: left;
  background: var(--suave, transparent);
  color: var(--tinta-fuerte); width: 100%; min-width: 0;
  transition: filter var(--rapido);
  cursor: pointer; font-weight: 500;
}
.chip:hover { filter: brightness(0.955); }
.chip .raya { width: 3px; align-self: stretch; min-height: 13px; border-radius: 2px; background: var(--tono, var(--gris-2)); flex: 0 0 3px; }
.chip .hora { color: var(--gris-1); font-variant-numeric: tabular-nums; flex: 0 0 auto; font-size: 11px; font-weight: 400; }
.chip .texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip.hecha { background: var(--fondo-hundido); color: var(--gris-1); }
.chip.hecha .raya { background: var(--gris-3); }
.chip.hecha .texto { color: var(--gris-1); text-decoration: line-through; }
.chip.atenuada { opacity: 0.25; }
.chip.arrastrando { opacity: 0.4; }

/* ============================ vista lista ============================ */

.lista { max-width: 900px; margin: 0 auto; padding: 26px 40px 80px; }
.lista-titulo { font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: 0; color: var(--tinta-fuerte); margin: 0 0 4px; }
.lista-sub { font-size: 13.5px; color: var(--gris-2); margin: 0 0 26px; }
.lista-dia { margin-bottom: 22px; }
.lista-dia h3 {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gris-2); margin: 0 0 2px; padding: 6px 6px 6px 0;
  border-bottom: 1px solid var(--linea); display: flex; align-items: baseline; gap: 8px;
}
.lista-dia h3 .cuantas { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gris-2); font-size: 11.5px; }
.lista-dia h3.es-hoy { color: var(--tinta-fuerte); }
.fila {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-bottom: 1px solid var(--linea-suave);
  cursor: pointer; transition: background var(--rapido);
}
.fila:hover { background: var(--hover); }
.fila .hora-col { width: 58px; flex: 0 0 58px; font-size: 12.5px; color: var(--gris-2); font-variant-numeric: tabular-nums; }
.fila .titulo-col { flex: 1; min-width: 0; font-size: 14px; color: var(--tinta-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila.hecha .titulo-col { color: var(--gris-1); text-decoration: line-through; }
.fila .etiqueta-tipo {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 1px 8px 1px 7px; border-radius: var(--radio); background: var(--suave, var(--fondo-hundido));
  font-size: 11.5px; color: var(--tono-texto, var(--gris-1)); white-space: nowrap; font-weight: 500;
}
.fila .etiqueta-tipo .punto { width: 6px; height: 6px; border-radius: 2px; background: var(--tono, var(--gris-2)); flex: 0 0 6px; }

/* casilla estilo Notion */
.casilla {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: var(--radio);
  box-shadow: inset 0 0 0 1.3px var(--gris-3);
  display: grid; place-items: center;
  transition: background var(--rapido), box-shadow var(--rapido);
  cursor: pointer; background: transparent;
}
.casilla:hover { box-shadow: inset 0 0 0 1.3px var(--gris-1); }
.casilla svg { opacity: 0; transform: scale(0.6); transition: opacity 90ms ease, transform 90ms cubic-bezier(0.2, 0, 0.2, 1); color: var(--fondo); }
.casilla.marcada { background: var(--acento); box-shadow: inset 0 0 0 1.3px var(--acento); }
.casilla svg, .casilla::after { grid-area: 1 / 1; }
.casilla.a-medias::after {
  content: ""; width: 7px; height: 7px; border-radius: 1.5px; background: var(--gris-1);
}
.casilla.marcada svg { opacity: 1; transform: scale(1); }

/* ============================ vacíos ============================ */

.vacio { display: grid; place-items: center; padding: 90px 20px; text-align: center; }
.vacio-caja { max-width: 300px; }
.vacio svg { color: var(--gris-3); margin-bottom: 14px; }
.vacio h4 { font-size: 15px; font-weight: 600; color: var(--tinta-fuerte); margin: 0 0 5px; }
.vacio p { font-size: 13.5px; color: var(--gris-2); margin: 0 0 16px; line-height: 1.5; }
/* Este botón llevaba `style="height:32px"` en el JS. Un estilo en línea gana a
   las reglas del móvil, así que el objetivo táctil se quedaba en 32px. */
.vacio-cta { height: 34px; }
@media (max-width: 760px) { .vacio-cta { height: 40px; padding: 0 20px; } }

/* ============================ modal ============================ */

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(38, 30, 24, 0.28);
  display: grid; place-items: center; padding: 20px;
  animation: aparecer 110ms ease;
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }
@keyframes subir { from { opacity: 0; transform: translateY(6px) scale(0.99) } to { opacity: 1; transform: none } }

.modal {
  width: 100%; max-width: 560px; max-height: 86vh; overflow: auto;
  background: var(--fondo); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flota);
  animation: subir 130ms cubic-bezier(0.2, 0, 0.2, 1);
}
.modal-cabeza {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 12px 8px 14px;
}
.modal-cabeza .migaja { font-size: 12px; color: var(--gris-2); display: flex; align-items: center; gap: 6px; }
.modal-cabeza .acciones { margin-left: auto; display: flex; gap: 1px; }
.modal-cabeza .acciones button { width: 26px; height: 26px; border-radius: var(--radio); color: var(--gris-1); display: grid; place-items: center; }
.modal-cabeza .acciones button:hover { background: var(--hover); color: var(--tinta-fuerte); }

.modal-cuerpo { padding: 2px 22px 22px; }
.titulo-tarea {
  width: 100%; border: 0; background: transparent; resize: none; overflow: hidden;
  font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25;
  color: var(--tinta-fuerte); padding: 4px 0 10px;
}
.titulo-tarea:focus { outline: none; }
.titulo-tarea::placeholder { color: var(--gris-3); }

.props { display: grid; gap: 1px; margin-bottom: 14px; }
.prop { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.prop > label {
  width: 108px; flex: 0 0 108px;
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--gris-2);
  padding-left: 2px;
}
.prop > label svg { flex: 0 0 14px; opacity: 0.8; }
.prop .valor { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.campo {
  height: 28px; padding: 0 8px; border-radius: var(--radio);
  background: transparent; border: 1px solid transparent;
  font-size: 13.5px; color: var(--tinta-fuerte);
  transition: background var(--rapido), box-shadow var(--rapido);
  min-width: 0;
}
.campo:hover { background: var(--hover); }
/* El campo del menú flotante (agregar persona o tipo). Estaba escrito en línea
   en el JS con height:30px, y eso le ganaba a la regla de móvil de .campo. */
.menu-campo { width: 210px; max-width: calc(100vw - 60px); margin: 2px 4px 4px; box-shadow: 0 0 0 1px var(--linea-fuerte); }
.enlace-suave { text-decoration: underline; color: var(--gris-1); }
@media (max-width: 760px) { .enlace-suave { padding: 6px 4px; } }
.campo:focus { outline: none; background: var(--fondo); box-shadow: 0 0 0 1px var(--tinta-fuerte); }
select.campo { cursor: pointer; appearance: none; padding-right: 22px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2337352f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; }
select.campo:hover { background-color: var(--hover); }
input[type="date"].campo, input[type="time"].campo { font-variant-numeric: tabular-nums; }

/* selector de segmentos (estado, prioridad) */
.segmentos { display: inline-flex; gap: 2px; padding: 2px; background: var(--fondo-hundido); border-radius: var(--radio); }
.segmentos button {
  padding: 3px 10px; border-radius: var(--radio); font-size: 12.5px; color: var(--gris-1);
  transition: background var(--rapido), color var(--rapido);
  white-space: nowrap;
}
.segmentos button:hover { color: var(--tinta-fuerte); }
.segmentos button.activo { background: var(--fondo); color: var(--tinta-fuerte); font-weight: 500; box-shadow: var(--sombra-bloque); }

.notas {
  width: 100%; min-height: 76px; resize: vertical;
  border: 0; background: transparent; padding: 8px 8px 8px 2px;
  font-size: 14px; line-height: 1.55; color: var(--tinta);
  border-top: 1px solid var(--linea);
}
.notas:focus { outline: none; }
.notas::placeholder { color: var(--gris-3); }

.modal-pie {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px 18px;
}
.modal-pie .boton-solido { height: 32px; }
#f-sin-hora { height: 28px; font-size: 12.5px; }
#f-dia-semana { font-size: 12.5px; color: var(--gris-2); text-transform: capitalize; }
.modal-pie .nota-pie { font-size: 11.5px; color: var(--gris-2); margin-right: auto; }
.boton-suave {
  height: 32px; padding: 0 12px; border-radius: var(--radio);
  font-size: 13.5px; color: var(--gris-1);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  transition: background var(--rapido);
}
.boton-suave:hover { background: var(--hover); color: var(--tinta-fuerte); }
.boton-suave.peligro:hover { color: var(--tinta-fuerte); background: var(--hover-fuerte); }

.repite-caja { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris-1); }
.repite-caja input[type="number"] { width: 50px; }

/* ============================ menú contextual ============================ */

.menu {
  position: fixed; z-index: 50; min-width: 190px;
  background: var(--fondo); border-radius: var(--radio-grande); padding: 5px;
  box-shadow: var(--sombra-flota);
  animation: subir 90ms ease;
}
.menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; height: 29px; padding: 0 9px; border-radius: var(--radio);
  font-size: 13.5px; color: var(--tinta); text-align: left;
  transition: background var(--rapido);
}
.menu button:hover { background: var(--hover); }
.menu button svg { flex: 0 0 15px; color: var(--gris-1); }
.menu .separador { height: 1px; background: var(--linea); margin: 5px 0; }
.menu .muestra-color {
  width: 13px; height: 13px; flex: 0 0 13px; border-radius: var(--radio);
  background: var(--tono); box-shadow: inset 0 0 0 1px rgba(38, 30, 24, 0.07);
}
.menu .dato {
  padding: 3px 9px; font-size: 12.5px; color: var(--gris-1); line-height: 1.4;
  max-width: 260px; white-space: normal;
}
.menu .dato.principal { font-size: 13.5px; font-weight: 500; color: var(--tinta-fuerte); padding-top: 1px; }
.menu .encabezado { padding: 6px 9px 4px; font-size: 9.5px; color: var(--acento-oscuro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

/* ============================ avisos ============================ */

.aviso {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 70; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  background: var(--tinta-fuerte); color: var(--fondo);
  padding: 9px 14px; border-radius: var(--radio-grande);
  font-size: 13.5px; box-shadow: var(--sombra-flota);
  transition: opacity var(--suave), transform var(--suave);
}
.aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.aviso button { color: var(--fondo); opacity: 0.7; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.aviso button:hover { opacity: 1; }

/* Sombra detrás del menú lateral cuando se abre en móvil: sin ella no había
   dónde tocar para cerrarlo, y el menú se quedaba pegado. */
.velo-lateral {
  position: fixed; inset: 0; z-index: 29;
  background: rgba(38, 30, 24, 0.30);
  opacity: 0; pointer-events: none;
  transition: opacity var(--suave);
}
.velo-lateral.visible { opacity: 1; pointer-events: auto; }

/* ============================ responsive ============================ */

.abrir-lateral { display: none; }

@media (max-width: 900px) {
  /* Hoja inferior: alto acotado, cuerpo con desplazamiento propio y el pie
     siempre a la vista. Antes el botón Guardar caía fuera de la pantalla. */
  .modal { display: flex; flex-direction: column; max-height: 88dvh; }
  .modal-cuerpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-pie {
    position: sticky; bottom: 0; background: var(--fondo);
    border-top: 1px solid var(--linea);
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  }
  .modal-pie .boton-solido, .modal-pie .boton-suave { height: 42px; font-size: 15px; }
  .modal-cabeza { position: sticky; top: 0; background: var(--fondo); z-index: 2; }
  .modal-cabeza .acciones button { width: 36px; height: 36px; }
  .prop { min-height: 40px; }
  .prop > label { width: 96px; flex-basis: 96px; }
  .campo { height: 34px; font-size: 15px; }   /* 15px evita que iOS haga zoom */
  .titulo-tarea { font-size: 23px; }
  .notas { font-size: 15px; }
  /* Asidero de hoja, para que se lea como algo que se puede cerrar hacia abajo. */
  .modal::before {
    content: ""; display: block; flex: 0 0 4px;
    width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px;
    background: var(--linea-fuerte);
  }

  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 30;
    transform: translateX(-100%); transition: transform var(--suave);
    box-shadow: var(--sombra-flota);
  }
  .lateral.abierta { transform: none; }
  .abrir-lateral { display: grid; }
  .buscador input { width: 92px; }
  .migas .raiz, .migas .sep { display: none; }
  .lista { padding: 20px 18px 70px; }
  .velo { padding: 0; place-items: end center; }
  .modal { max-width: 100%; max-height: 92vh; border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
}
@media (max-width: 760px) {
  .selector-vista { display: none; }

  /* Objetivos de toque: los de 26–28 px se fallan con el dedo. */
  .boton-barra, .boton-barra.icono { height: 38px; min-width: 38px; }
  .boton-barra.principal-cta { height: 38px; padding: 0 13px; }
  .nav-fechas button { width: 34px; height: 38px; }
  /* "Hoy" se muda al menú del título: ocupaba 48 px y dejaba el periodo en "2…". */
  .nav-fechas .hoy { display: none; }
  .buscador { height: 38px; }
  .migas { padding: 7px 8px; }
  .barra { height: 52px; flex-basis: 52px; }
  .menu button { height: 40px; font-size: 15px; }
  .menu { min-width: 210px; padding: 6px; }
  .segmentos button { padding: 8px 13px; font-size: 14px; }
  .nav-item, .filtro { height: 40px; font-size: 15px; }
  /* En el celular no hay teclado: el número del atajo solo ocupa sitio. */
  .nav-item .atajo { display: none; }
  .casilla { width: 20px; height: 20px; flex-basis: 20px; }
  .fila { padding: 11px 6px; }
  .mini-grid button { height: 32px; font-size: 13px; }
  .mini-grid span { height: 26px; }

  /* Sin cursor no hay "hover": estas acciones quedaban inalcanzables. */
  .filtro .quitar { opacity: 1; color: var(--gris-2); padding: 0 6px; }
  /* La franja de agarre de 6 px no se puede tocar; en el dedo se ensancha. */
  .bloque .agarre { height: 18px; }
  .bloque .agarre::after { opacity: 1; bottom: 3px; width: 22px; }
  /* Hueco para la rayita, que si no se sentaba sobre la hora. */
  .bloque:not(.corto):not(.apretado) { padding-bottom: 11px; }

  /* Respeta el notch y la barra inferior del iPhone. */
  .barra { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .lienzo { padding-bottom: env(safe-area-inset-bottom); }
  .aviso { bottom: calc(20px + env(safe-area-inset-bottom)); }
}
  .buscador input { width: 0; padding: 0; }
  .buscador:focus-within { position: absolute; left: 44px; right: 78px; background: var(--fondo); z-index: 2; }
  .buscador:focus-within input { width: 100%; }
  .barra { position: relative; }
  .nav-fechas { margin-left: 6px; }
  .nav-fechas .hoy { padding: 0 7px; }
}

/* El mes en el celular tiene que caber entero: con scroll horizontal solo se
   veían cuatro días de siete y se perdía la foto del mes. */
@media (max-width: 760px) {
  .mes { min-width: 0; }
  .mes-cabeza div { padding: 7px 2px; font-size: 9px; text-align: center; letter-spacing: 0.02em; }
  .mes-grid { grid-auto-rows: minmax(76px, 1fr); }
  .celda-mes { padding: 3px 2px 4px; gap: 1.5px; }
  .celda-mes .dia-num { align-self: center; font-size: 11.5px; min-width: 19px; height: 19px; padding: 0 3px; }
  .celda-mes .chip { font-size: 9.5px; padding: 1px 3px 1px 2px; gap: 3px; border-radius: var(--radio); }
  .celda-mes .chip .hora { display: none; }
  .celda-mes .chip .raya { width: 2px; flex-basis: 2px; min-height: 10px; }
  .celda-mes .mas { font-size: 9px; padding: 0 3px; }
}

/* En el móvil el texto del aviso ya no cabe medio pisando la columna de horas:
   empieza donde ella acaba. Va después del bloque de 760 para que gane. */
@media (max-width: 760px) {
  .pista-vacia { left: var(--ancho-horas); padding: 0 12px; top: 38%; }
  /* La variante con fondo se centra sola: no debe heredar el left de arriba. */
  .pista-vacia.sobre-agenda { left: 66%; top: 34%; max-width: 62%; padding: 10px 13px; }
  .pista-vacia b { font-size: 15px; }
  .pista-vacia span { font-size: 12.5px; line-height: 1.45; }
}

/* En la SEMANA del celular una columna mide 103px: al 40% el carril daba 41px y
   el título era una sílaba, y encima dejaba las tareas del equipo en 61px. Ahí
   el carril se convierte en una franja de ocupación —se ve CUÁNDO está ocupada,
   y tocándola sale qué es—. En la vista Día, que es la de por defecto en el
   celular, hay ancho de sobra y el texto se queda. */
@media (max-width: 760px) {
  .semana:not(.un-dia) .columna-dia.con-carril .carril-agenda { width: 11px; border-right-style: solid; }
  .semana:not(.un-dia) .columna-dia.con-carril .carril-tareas { left: 11px; }
  .semana:not(.un-dia) .evento { padding: 0; border-left-width: 3px; }
  .semana:not(.un-dia) .evento .titulo,
  .semana:not(.un-dia) .evento .meta { display: none; }
  /* La franja es fina: sin esto no se puede tocar con el dedo. */
  .semana:not(.un-dia) .carril-agenda .evento { min-width: 11px; }
}

@media (max-width: 620px) {
  .etiqueta-nueva { display: none; }
  .resumen { gap: 9px; padding: 7px 14px; font-size: 12px; }
  .resumen .barra-progreso { width: 60px; }
  /* El nombre del tipo se come el título; el punto ya lo identifica. */
  .fila .etiqueta-tipo .nom { display: none; }
  .fila .etiqueta-tipo { background: none; padding: 0 2px; }
}

/* ============================ impresión ============================ */

@media print {
  .lateral, .barra, .resumen, .aviso, .menu, .velo { display: none !important; }
  .app, .lienzo { display: block; height: auto; overflow: visible; }
  .bloque, .chip { box-shadow: none; }
  .semana, .mes { min-width: 0; }
  body { font-size: 11px; }
}