/* ==========================================================================
   Cronograma · Area Group Florida
   Blanco y negro, densidad y microdetalles de Notion: texto cálido casi negro,
   líneas de un solo píxel, sombras de tres capas y radios cortos.
   ========================================================================== */

:root {
  /* La tinta de Notion no es negro puro: es un gris cálido. Eso baja el contraste
     duro del papel blanco y es la mitad del "se ve caro". */
  --tinta:        rgb(55, 53, 47);
  --tinta-fuerte: rgb(25, 23, 17);
  --gris-1:       rgba(55, 53, 47, 0.65);
  --gris-2:       rgba(55, 53, 47, 0.45);
  --gris-3:       rgba(55, 53, 47, 0.28);

  --fondo:        #ffffff;
  --fondo-panel:  #fbfbfa;
  --fondo-hundido:#f7f7f5;

  --linea:        rgba(55, 53, 47, 0.09);
  --linea-suave:  rgba(55, 53, 47, 0.055);
  --linea-fuerte: rgba(55, 53, 47, 0.16);

  --hover:        rgba(55, 53, 47, 0.055);
  --hover-fuerte: rgba(55, 53, 47, 0.09);
  --seleccion:    rgba(55, 53, 47, 0.08);

  --sombra-flota: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 3px 6px,
                  rgba(15, 15, 15, 0.2) 0 9px 24px;
  --sombra-carta: rgba(15, 15, 15, 0.04) 0 0 0 1px, rgba(15, 15, 15, 0.06) 0 2px 4px;
  --sombra-bloque:rgba(15, 15, 15, 0.06) 0 1px 2px;

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

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

/* Color por tipo de tarea. La página sigue siendo blanco y negro: el color entra
   solo en los eventos, como en el calendario de Apple. Cada uno trae el tono
   fuerte (barra y texto) y el fondo tenue, escritos a mano para que el texto se
   lea sobre blanco — los colores puros de iOS no contrastan lo suficiente. */
.c-azul     { --tono: #0a69d1; --suave: #e8f1fd }
.c-morado   { --tono: #8a3fd1; --suave: #f3ebfb }
.c-rosa     { --tono: #d6246e; --suave: #fce9f1 }
.c-rojo     { --tono: #d3382f; --suave: #fceceb }
.c-naranja  { --tono: #c06400; --suave: #fdf0e0 }
.c-ambar    { --tono: #8f7100; --suave: #fbf4da }
.c-verde    { --tono: #1e8e43; --suave: #e7f6ec }
.c-turquesa { --tono: #0e7c97; --suave: #e4f4f8 }
.c-indigo   { --tono: #4b49c6; --suave: #ececfb }
.c-gris     { --tono: #6b6a66; --suave: #f1f1ef }

/* Escala vieja en grises: sobrevive como respaldo si un tipo no tiene color. */
.t0 { --tono: #d3d2d0 } .t1 { --tono: #c3c2bf } .t2 { --tono: #b0aeaa }
.t3 { --tono: #9b9995 } .t4 { --tono: #85837e } .t5 { --tono: #6f6d68 }
.t6 { --tono: #595752 } .t7 { --tono: #45433e } .t8 { --tono: #302e2a }
.t9 { --tono: #191715 }

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, "Apple Color Emoji", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; border-radius: 3px; }
::selection { background: rgba(55, 53, 47, 0.14); }

/* Scrollbars discretas, como las del propio Notion. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(55,53,47,0.16); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(55,53,47,0.3); 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);
  padding: 24px;
}
.acceso-caja { width: 100%; max-width: 320px; text-align: center; }
.acceso-marca { height: 34px; width: auto; margin: 0 auto 28px; display: block; opacity: 0.9; }
.acceso h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; 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: 5px;
  transition: background var(--rapido), box-shadow var(--rapido);
}
.acceso input:focus { outline: none; background: var(--fondo); box-shadow: 0 0 0 1px var(--tinta-fuerte); }
.acceso-error { font-size: 13px; color: var(--tinta-fuerte); 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(--tinta-fuerte); color: #fff;
  border-radius: 5px; 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; }

/* ---- 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: 17px; width: auto; }
.lateral-cabeza .marca { min-width: 0; }
.lateral-cabeza .marca b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.lateral-cabeza .marca span { display: block; font-size: 11px; color: var(--gris-2); line-height: 1.3; }

.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: 4px; 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: 11px; font-weight: 600; letter-spacing: 0.03em; 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: 3px; }
.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: 4px; 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: 3px; 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-3); 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: #fff;
  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: 3px; 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-3);
}
.mini-grid button {
  height: 22px; border-radius: 3px; 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); opacity: 0.55; }
.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: 4px;
  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: 5px;
  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: 4px;
  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(--tinta-fuerte); color: #fff; padding: 0 10px; font-weight: 500; }
.boton-barra.principal-cta:hover { background: var(--tinta-fuerte); opacity: 0.85; color: #fff; }

.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: 4px; 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: 4px;
  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(--tinta-fuerte); 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; }

/* ============================ 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: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gris-2); margin-bottom: 3px;
}
.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(--tinta-fuerte); color: #fff; font-weight: 600; }
.dia-cabeza.finde .nombre, .dia-cabeza.finde .numero { color: var(--gris-3); }
.dia-cabeza.finde.es-hoy .numero { color: #fff; }

/* 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-3); 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-3); 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(55, 53, 47, 0.014); }
.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(--tinta-fuerte);
}
.linea-ahora::after { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1.5px solid var(--tinta-fuerte); }

/* 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: 5px;
  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: 600; color: var(--tono, 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(--tono, var(--gris-2)); opacity: 0.75; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.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-2); }
.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; }
.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: 4px;
  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;
}
.pista-vacia b { font-size: 14px; font-weight: 600; color: var(--tinta-fuerte); }
.pista-vacia span { font-size: 13px; color: var(--gris-2); }

/* ============================ 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.06em; 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(55, 53, 47, 0.02); }
.celda-mes.arrastre-encima { background: var(--hover); }
.celda-mes.otro-mes { background: var(--fondo-panel); }
.celda-mes.finde { background-color: rgba(55, 53, 47, 0.014); }
.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(--tinta-fuerte); color: #fff; font-weight: 600; }
.celda-mes .mas { font-size: 11px; color: var(--gris-2); padding: 1px 5px; border-radius: 3px; 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: 4px;
  font-size: 11.5px; line-height: 1.35; text-align: left;
  background: var(--suave, transparent);
  color: var(--tono, var(--tinta)); 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(--tono, var(--gris-2)); opacity: 0.75; 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-2); }
.chip.hecha .raya { background: var(--gris-3); }
.chip.hecha .texto { color: var(--gris-2); 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-size: 28px; font-weight: 700; letter-spacing: -0.025em; 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: 12px; font-weight: 600; letter-spacing: 0.04em; 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-3); 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-2); 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: 4px; background: var(--suave, var(--fondo-hundido));
  font-size: 11.5px; color: var(--tono, 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: 3px;
  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: #fff; }
.casilla.marcada { background: var(--tinta-fuerte); box-shadow: inset 0 0 0 1.3px var(--tinta-fuerte); }
.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; }

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

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(15, 15, 15, 0.25);
  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: 8px;
  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: 4px; 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: 4px;
  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); }
.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: 5px; }
.segmentos button {
  padding: 3px 10px; border-radius: 3px; 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 .nota-pie { font-size: 11.5px; color: var(--gris-3); margin-right: auto; }
.boton-suave {
  height: 32px; padding: 0 12px; border-radius: 5px;
  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: 6px; 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: 4px;
  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: 4px;
  background: var(--tono); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.menu .encabezado { padding: 5px 9px 4px; font-size: 11px; color: var(--gris-3); font-weight: 600; letter-spacing: 0.03em; 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: #fff;
  padding: 9px 14px; border-radius: 6px;
  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: #fff; 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(15, 15, 15, 0.28);
  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) {
  .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: 12px 12px 0 0; }
}
@media (max-width: 760px) {
  .selector-vista { display: none; }
  .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: 3px; }
  .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; }
}

@media (max-width: 620px) {
  .resumen { display: none; }
  .etiqueta-nueva { display: none; }
  /* 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; }
}