/* Kairós — vidrio, profundidad y los colores de Google. Nada plano. */

:root {
  color-scheme: light dark;

  --radio: 18px;
  --radio-chico: 12px;
  --rail: 268px;
  --panel: 384px;
  --barra: 68px;

  --tinta: #10131a;
  --tinta-2: #545a68;
  --tinta-3: #8b91a1;
  --linea: rgba(16, 19, 26, .09);
  --linea-fuerte: rgba(16, 19, 26, .16);

  --vidrio: rgba(255, 255, 255, .62);
  --vidrio-2: rgba(255, 255, 255, .44);
  --vidrio-borde: rgba(255, 255, 255, .75);
  --sombra: 0 1px 2px rgba(16, 19, 26, .06), 0 8px 24px rgba(16, 19, 26, .08);
  --sombra-alta: 0 2px 6px rgba(16, 19, 26, .10), 0 24px 60px rgba(16, 19, 26, .18);

  --acento: #1a73e8;
  --acento-suave: rgba(26, 115, 232, .12);
  --hoy: #d93025;
  --hoy-tinte: rgba(217, 48, 37, .065);

  --lienzo: rgba(255, 255, 255, .58);
  --fila-alt: rgba(16, 19, 26, .022);
  --celda: rgba(16, 19, 26, .034);
  --celda-finde: rgba(16, 19, 26, .062);
}

:root[data-tema="oscuro"] {
  --tinta: #eef1f7;
  --tinta-2: #a2a9bb;
  --tinta-3: #6b7284;
  --linea: rgba(255, 255, 255, .09);
  --linea-fuerte: rgba(255, 255, 255, .18);
  --vidrio: rgba(28, 32, 42, .66);
  --vidrio-2: rgba(38, 43, 55, .5);
  --vidrio-borde: rgba(255, 255, 255, .10);
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --sombra-alta: 0 2px 8px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .55);
  --acento: #7cb2ff;
  --acento-suave: rgba(124, 178, 255, .16);
  --hoy: #ff6b5e;
  --hoy-tinte: rgba(255, 107, 94, .11);
  --lienzo: rgba(22, 26, 34, .5);
  --fila-alt: rgba(255, 255, 255, .022);
  --celda: rgba(255, 255, 255, .045);
  --celda-finde: rgba(255, 255, 255, .082);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  color: var(--tinta);
  background: #eef1f7;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}
:root[data-tema="oscuro"] body { background: #0b0d12; }

/* Fondo vivo: manchas de color muy difusas bajo el vidrio. Es lo que hace que
   el cristal se lea como cristal y no como un rectángulo gris. */
.fondo { position: fixed; inset: -20vh -20vw; z-index: 0; overflow: hidden; filter: blur(90px); opacity: .55; }
.fondo span { position: absolute; border-radius: 50%; display: block; }
.fondo span:nth-child(1) { width: 46vw; height: 46vw; left: -6vw; top: -8vh; background: #4285f4; opacity: .40; }
.fondo span:nth-child(2) { width: 40vw; height: 40vw; right: -8vw; top: 6vh; background: #0b8043; opacity: .30; }
.fondo span:nth-child(3) { width: 44vw; height: 44vw; left: 34vw; bottom: -22vh; background: #8e24aa; opacity: .26; }
:root[data-tema="oscuro"] .fondo { opacity: .40; }

.vidrio {
  background: var(--vidrio);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .5);
}
:root[data-tema="oscuro"] .vidrio { box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .06); }
.vidrio-suave {
  background: var(--vidrio-2);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--vidrio-borde);
}

/* ---------- Barra superior ---------- */
.barra {
  position: relative; z-index: 30;
  height: var(--barra); flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr) minmax(0, auto);
  align-items: center; gap: 16px;
  padding: 0 16px 0 14px;
  border-width: 0 0 1px; border-radius: 0;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--barra) + env(safe-area-inset-top));
}
.barra-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.marca-icono {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #4285f4, #1a73e8 55%, #174ea6);
  color: #fff; font-weight: 700; font-size: 17px;
  box-shadow: 0 2px 5px rgba(26, 115, 232, .45), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(0, 0, 0, .2);
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-texto strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.02em; }
.marca-texto span { font-size: 11.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barra-centro { display: flex; align-items: center; gap: 12px; min-width: 0; }
.titulo-periodo {
  font-size: 21px; font-weight: 640; letter-spacing: -.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-flechas { display: flex; gap: 2px; }
.barra-der { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barra-centro .titulo-periodo { flex: 1 1 auto; min-width: 0; }

/* Dentro de la app de Mac el cristal sube hasta el borde y los botones del
   semáforo quedan encima, en su franja. */
:root[data-app="mac"] .barra {
  height: calc(var(--barra) + 26px);
  padding-top: 26px;
}
:root[data-app="mac"] .fondo { top: -26px; }

/* ---------- Botones ---------- */
.btn3d {
  font: inherit; font-weight: 570; color: var(--tinta); white-space: nowrap;
  padding: 9px 17px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--linea-fuerte);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(244, 246, 251, .82));
  box-shadow: 0 1px 1px rgba(16, 19, 26, .05), 0 3px 8px rgba(16, 19, 26, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: transform .10s ease, box-shadow .16s ease, filter .16s ease;
}
:root[data-tema="oscuro"] .btn3d {
  background: linear-gradient(180deg, rgba(72, 79, 96, .85), rgba(46, 51, 64, .85));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .13);
}
.btn3d:hover { filter: brightness(1.05); }
.btn3d:active { transform: translateY(1.5px) scale(.985); box-shadow: 0 1px 2px rgba(16, 19, 26, .18), inset 0 2px 5px rgba(0, 0, 0, .12); }
.btn3d.primario {
  color: #fff; border-color: rgba(0, 0, 0, .12);
  background: linear-gradient(180deg, #4a90f7, #1a73e8 60%, #1665d8);
  box-shadow: 0 1px 1px rgba(23, 78, 166, .3), 0 5px 14px rgba(26, 115, 232, .42), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 5px rgba(0, 0, 0, .18);
}
.btn3d.chico { padding: 7px 13px; font-size: 13.5px; border-radius: 10px; }
.btn3d.peligro { color: #fff; background: linear-gradient(180deg, #e8544a, #d93025 60%, #c5221f); box-shadow: 0 5px 14px rgba(217, 48, 37, .38), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn3d.fantasma { background: transparent; box-shadow: none; border-color: var(--linea-fuerte); }

.icono {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  color: var(--tinta-2); background: transparent; border: 1px solid transparent;
  transition: background .15s, color .15s, transform .1s;
}
.icono:hover { background: var(--vidrio-2); color: var(--tinta); border-color: var(--vidrio-borde); }
.icono:active { transform: scale(.92); }

.segmentado {
  position: relative; display: flex; padding: 3px; gap: 2px; border-radius: 12px;
  background: rgba(16, 19, 26, .06); border: 1px solid var(--linea);
  box-shadow: inset 0 1px 3px rgba(16, 19, 26, .07);
}
:root[data-tema="oscuro"] .segmentado { background: rgba(0, 0, 0, .3); }
.segmentado button {
  position: relative; z-index: 2; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 560; color: var(--tinta-2); white-space: nowrap;
  padding: 6px 11px; border-radius: 9px; transition: color .2s;
}
.segmentado button.activo { color: var(--tinta); }
.segmento-fondo {
  position: absolute; z-index: 1; top: 3px; bottom: 3px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 248, 252, .9));
  box-shadow: 0 1px 3px rgba(16, 19, 26, .16), inset 0 1px 0 #fff;
  transition: transform .28s cubic-bezier(.32, 1.3, .5, 1), width .28s cubic-bezier(.32, 1.3, .5, 1);
}
:root[data-tema="oscuro"] .segmento-fondo { background: linear-gradient(180deg, #59617a, #454c60); box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14); }
.segmentado.chico button { padding: 5px 14px; font-size: 13px; }
.segmentado .etq-corta { display: none; }

.buscador { display: flex; align-items: center; gap: 7px; padding: 0 12px; height: 36px; border-radius: 11px; }
.buscador span { color: var(--tinta-3); font-size: 16px; }
.buscador input { border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--tinta); width: 130px; outline: none; }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Tablero de 3 columnas ---------- */
.tablero {
  position: relative; z-index: 10; flex: 1; min-height: 0;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--panel);
  gap: 14px; padding: 14px;
}

/* ---------- Columna 1 ---------- */
.rail {
  border-radius: var(--radio); overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 4px;
}
.rail-bloque { padding: 8px 4px 4px; border-top: 1px solid var(--linea); margin-top: 8px; }
.rail-bloque:first-of-type { border-top: 0; }
.rail-titulo {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 4px 6px 8px;
  border: 0; background: transparent; cursor: pointer; font: inherit;
}
.rail-titulo h2 { font-size: 11px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
.rail-titulo .flecha { color: var(--tinta-3); font-size: 11px; transition: transform .22s; }
.rail-bloque.cerrado .flecha { transform: rotate(-90deg); }
.rail-bloque.cerrado .rail-cuerpo { display: none; }
.rail-pie { margin-top: auto; }

.minimes { padding: 2px 4px 10px; }
.minimes-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-left: 6px; }
.minimes-cab strong { font-size: 14px; font-weight: 620; letter-spacing: -.02em; }
.minimes-cab div { display: flex; }
.minimes-cab .icono { width: 26px; height: 26px; font-size: 15px; border-radius: 8px; }
.minimes-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.minimes-grid b { font-size: 10px; font-weight: 600; color: var(--tinta-3); text-align: center; padding-bottom: 4px; }
.minidia {
  aspect-ratio: 1; border: 0; background: transparent; cursor: pointer; position: relative;
  font: inherit; font-size: 12px; color: var(--tinta); border-radius: 8px;
  display: grid; place-items: center; transition: background .14s;
}
.minidia:hover { background: var(--acento-suave); }
.minidia.fuera { color: var(--tinta-3); opacity: .5; }
.minidia.hoy { color: var(--hoy); font-weight: 700; }
.minidia.sel { background: var(--acento); color: #fff; font-weight: 640; box-shadow: 0 2px 6px rgba(26, 115, 232, .45); }
.minidia.hoy.sel { background: var(--hoy); box-shadow: 0 2px 6px rgba(217, 48, 37, .45); }
.minidia i { position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.minidia.sel i { background: #fff; opacity: .9; }

.lista-calendarios { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.lista-calendarios li {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 9px;
  font-size: 13.5px; transition: background .14s;
}
.lista-calendarios li:hover { background: var(--vidrio-2); }
.lista-calendarios li.oculto { opacity: .42; }
.marca-color {
  cursor: pointer; width: 15px; height: 15px; border-radius: 5px; flex: 0 0 auto; position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .22);
}
.lista-calendarios li.oculto .marca-color { background: transparent !important; border: 2px solid var(--tinta-3); box-shadow: none; }
.lista-calendarios li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seccion-icono { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .18); }
.agregar { width: 100%; text-align: left; padding: 7px 8px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; color: var(--tinta-3); border-radius: 9px; margin-top: 2px; }
.agregar:hover { background: var(--vidrio-2); color: var(--acento); }

/* Próximos festivos.
   El hueco que quedaba bajo los calendarios contestando una pregunta que se
   hace de verdad: cuándo cae el próximo puente. Van aquí y no en los hitos:
   un hito lo pide Ivan, un festivo lo publica Google. */
.lista-festivos { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.lista-festivos li {
  display: flex; align-items: center; gap: 9px; padding: 5px 7px 5px 5px; border-radius: 9px;
  cursor: pointer; transition: background .14s;
}
.lista-festivos li:hover { background: var(--vidrio-2); }
.lista-festivos li.proximo { background: var(--hoy-tinte); }
.lista-festivos time {
  flex: 0 0 auto; width: 30px; text-align: center; line-height: 1;
  display: flex; flex-direction: column; gap: 1px; color: var(--hoy);
}
.lista-festivos time b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.lista-festivos time span { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.festivo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.festivo-texto strong { font-size: 12.5px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.festivo-texto span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--tinta-3); min-width: 0; }
.festivo-texto u { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-festivos .puente {
  flex: 0 0 auto; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-style: normal; color: #b26a00; background: rgba(230, 145, 0, .16);
  padding: 1px 5px; border-radius: 5px;
}
.lista-festivos i { flex: 0 0 auto; font-style: normal; font-weight: 660; color: var(--tinta-2); }
.lista-festivos li.proximo i { color: var(--hoy); }

.estado-conexion { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tinta-3); padding: 0 6px 6px; }
.estado-conexion i { width: 7px; height: 7px; border-radius: 50%; background: #0b8043; box-shadow: 0 0 0 3px rgba(11, 128, 67, .18); }
.estado-conexion.caido i { background: #d93025; box-shadow: 0 0 0 3px rgba(217, 48, 37, .18); }
.nota-secretaria { font-size: 11px; line-height: 1.4; color: var(--tinta-3); padding: 8px 8px 2px; border-top: 1px solid var(--linea); }

/* ---------- Columna 2: el calendario ---------- */
.lienzo {
  border-radius: var(--radio); overflow: hidden; min-width: 0;
  background: var(--lienzo);
  backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .5);
  display: flex; flex-direction: column;
}
:root[data-tema="oscuro"] .lienzo { box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .05); }

/* Cabecera de días */
.cab-dias { display: grid; border-bottom: 1px solid var(--linea); flex: 0 0 auto; background: var(--vidrio-2); }
.cab-dia { padding: 9px 6px 8px; text-align: center; border-left: 1px solid var(--linea); }
.cab-dia:first-child { border-left: 0; }
.cab-dia small { display: block; font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.cab-dia b {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; margin-top: 3px;
  font-size: 19px; font-weight: 560; letter-spacing: -.02em; border-radius: 50%;
}
.cab-dia.hoy small { color: var(--hoy); }
.cab-dia.hoy b { background: var(--hoy); color: #fff; font-weight: 620; box-shadow: 0 2px 8px rgba(217, 48, 37, .45); }
.cab-dia.finde { background: var(--fila-alt); }
.cab-dia.hoy { background: var(--hoy-tinte); box-shadow: inset 0 3px 0 var(--hoy); }

/* Franja de todo el día */
.todo-dia { display: grid; border-bottom: 1px solid var(--linea-fuerte); flex: 0 0 auto; max-height: 92px; overflow-y: auto; }
.todo-dia-etq { font-size: 10px; color: var(--tinta-3); padding: 5px 8px; text-align: right; }
.todo-dia .celda { border-left: 1px solid var(--linea); padding: 3px; min-height: 24px; display: flex; flex-direction: column; gap: 2px; }
.todo-dia .celda:first-child { border-left: 0; }

/* Rejilla horaria */
.rejilla-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.rejilla { display: grid; position: relative; }
.columna-horas { border-right: 1px solid var(--linea); position: sticky; left: 0; z-index: 4; background: var(--vidrio-2); backdrop-filter: blur(12px); }
.hora-etq { height: var(--alto-hora); position: relative; }
.hora-etq span {
  position: absolute; top: -8px; right: 9px; font-size: 10.5px; font-weight: 560;
  color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.col-dia { position: relative; border-left: 1px solid var(--linea); }
.col-dia.finde { background: var(--fila-alt); }
/* El día en que estamos, teñido: suave, pero se ve al instante. */
.col-dia.hoy, .todo-dia .celda.hoy { background: var(--hoy-tinte); }
.col-dia.hoy.finde { background: var(--hoy-tinte); }
.franja { height: var(--alto-hora); border-bottom: 1px solid var(--linea); }
.franja.media { border-bottom-style: dashed; border-bottom-color: color-mix(in srgb, var(--linea) 55%, transparent); }

.ahora { position: absolute; left: 0; right: 0; height: 0; z-index: 12; pointer-events: none; }
.ahora::before { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--hoy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoy) 22%, transparent); }
.ahora::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--hoy); border-radius: 2px; }

/* Bloques de evento */
.evento {
  position: absolute; border-radius: 8px; padding: 3px 7px 3px 9px; cursor: pointer;
  overflow: hidden; font-size: 12px; line-height: 1.28; color: #fff;
  background: var(--c); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 2px rgba(16, 19, 26, .16), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s;
}
.evento::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(0, 0, 0, .16); }
.evento:hover { filter: brightness(1.06); box-shadow: 0 3px 10px rgba(16, 19, 26, .24), inset 0 1px 0 rgba(255, 255, 255, .35); z-index: 20; transform: translateY(-1px); }
.evento b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento i { font-style: normal; opacity: .88; font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento.corto { padding-top: 1px; display: flex; align-items: center; gap: 5px; }
.evento.corto b, .evento.corto i { display: inline; font-size: 11px; }
.evento.repite b::after { content: ' ⟳'; opacity: .7; font-size: 10px; }
.evento.dia-entero { position: static; height: auto; padding: 3px 8px; font-size: 11.5px; }

/* ---------- Vistas de 3, 6 y 12 meses ---------- */
/* Rejilla que llena el lienzo: 3 en fila, 6 en dos filas, 12 en tres.
   Todos los meses del mismo tamaño exacto. */
.meses { flex: 1; overflow: auto; padding: 18px; display: grid; gap: 20px 22px; align-content: center; }
/* Las fichas miden lo que midan sus días. Los días son cuadrados (abajo), así que
   la ficha sale sola con la proporción correcta: ni barras estiradas ni celdas
   aplastadas, se abra la app en la ventana que se abra. */
.meses-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meses-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meses-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Cada mes es una ficha con su propio papel: así los tres, seis o doce se leen
   como piezas ordenadas y no como números sueltos flotando en el fondo. */
.mm-mes {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  padding: 13px 12px 12px; border-radius: var(--radio);
  background: var(--vidrio-2); border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}

.mm-mes h3 {
  display: flex; align-items: baseline; gap: 7px;
  padding: 0 3px 9px; margin-bottom: 8px;
  border-bottom: 1px solid var(--linea);
  font-size: 14.5px; font-weight: 660; letter-spacing: -.02em; color: var(--acento);
}
/* El mes en que estamos, no solo el día: una ficha con un poco más de peso
   entre las demás, para encontrarla sin tener que leer los doce títulos. */
.mm-mes.actual {
  border-color: color-mix(in srgb, var(--acento) 38%, var(--linea));
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px color-mix(in srgb, var(--acento) 20%, transparent);
}
.mm-mes.actual h3 { color: var(--hoy); }
.mm-mes h3 em { font-style: normal; font-size: 11.5px; color: var(--tinta-3); font-weight: 560; }
/* Seis filas siempre, todas del mismo alto: los meses alinean entre sí. */
.mm-grid {
  display: grid; gap: 3px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, auto);
}
.mm-grid > b {
  font-size: 9.5px; color: var(--tinta-3); text-align: center;
  font-weight: 700; letter-spacing: .06em; padding-bottom: 5px;
}
/* Viernes y domingo: los días de culto, cada uno con su propio color, para
   reconocer la semana de un vistazo en vez de tratar el finde como un bloque. */
.mm-grid > b.vie { color: color-mix(in srgb, var(--hoy) 75%, var(--tinta-3)); }
.mm-grid > b.dom { color: color-mix(in srgb, var(--acento) 80%, var(--tinta-3)); }
/* El cuadrito del día. El papel se ve, pero muy justo: da estructura sin ruido. */
.mm-dia {
  /* Cuadrado. Es lo que hace que la rejilla se lea como una rejilla. */
  aspect-ratio: 1; min-width: 0; border: 0; cursor: pointer; font-family: inherit;
  background: var(--celda); color: var(--tinta);
  border-radius: 7px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: background .14s ease, transform .1s ease;
}
.mm-dia.finde { background: var(--celda-finde); }
.mm-dia.finde > span { color: var(--tinta-2); }
.mm-dia.vie { background: color-mix(in srgb, var(--hoy) 10%, var(--celda)); }
.mm-dia.dom { background: color-mix(in srgb, var(--acento) 11%, var(--celda)); }
.mm-dia.vie.fuera, .mm-dia.dom.fuera { background: transparent; }
/* Un hito ese día: un anillo fino alrededor del número, sin pelearse con el
   círculo sólido de «hoy» si coinciden —ese manda, este se ve por fuera. */
.mm-dia.con-hito > span { box-shadow: 0 0 0 1.6px var(--acento-hito, var(--acento)); }
.mm-dia.con-hito.hoy > span { box-shadow: 0 0 0 1.6px var(--acento-hito, var(--acento)), 0 2px 7px color-mix(in srgb, var(--hoy) 45%, transparent); }
/* Los del mes de al lado siguen ahí, apagados: la rejilla nunca tiene agujeros. */
.mm-dia.fuera { background: transparent; opacity: .3; }
.mm-dia.fuera .mm-puntos { display: none; }
.mm-dia:hover { background: var(--acento-suave); }
.mm-dia:active { transform: scale(.94); }

.mm-dia > span {
  font-size: 12.5px; font-weight: 540; line-height: 1;
  /* Nunca más ancho que su celda: en la vista de año la celda mide 17 px y un
     disco fijo de 23 se salía por los lados. */
  width: min(100%, 23px); aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
/* Hoy: solo el disco, como en el resto del sistema. Teñir además la celda hacía
   que el círculo y el fondo se fundieran en una pastilla ancha. */
.mm-dia.hoy > span {
  background: var(--hoy); color: #fff; font-weight: 700;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--hoy) 45%, transparent);
}

.mm-puntos { display: flex; gap: 2.5px; height: 5px; align-items: center; }
.mm-puntos i {
  width: 4.5px; height: 4.5px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16);
}
.meses-12 .mm-puntos i { width: 3.5px; height: 3.5px; }
.meses-12 .mm-dia > span { font-size: 10.5px; width: min(100%, 19px); }
.meses-12 .mm-mes { padding: 11px 10px 10px; }
.meses-12 .mm-mes h3 { font-size: 13px; padding-bottom: 7px; margin-bottom: 6px; }

/* ---------- Vista de día ---------- */
.dia-cab { padding: 16px 22px 14px; border-bottom: 1px solid var(--linea); display: flex; align-items: baseline; gap: 14px; flex: 0 0 auto; }
.dia-cab h2 { font-size: 27px; font-weight: 650; letter-spacing: -.035em; }
.dia-cab p { color: var(--tinta-3); font-size: 13px; }

/* ---------- Columna 3: recordatorios ---------- */
.panel { border-radius: var(--radio); display: flex; flex-direction: column; overflow: hidden; }
.panel-cabecera {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--linea);
}
.panel-cabecera h2 { flex: 1; font-size: 16px; font-weight: 660; letter-spacing: -.025em; }
.panel-acciones { display: flex; gap: 2px; }
.icono.encendido { color: var(--acento); background: var(--acento-suave); border-color: transparent; }
.panel-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 6px; }

/* Dos tercios para recordatorios, un tercio para hitos: es lo que se escribe
   más y lo que hay que rodar más. Cada mitad rueda por dentro — por muchos
   recordatorios que haya, nunca empujan a los hitos fuera de la pantalla, ni
   al revés — así que la proporción no depende de cuánto haya en cada una. */
.panel-mitad { flex: 2 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel-mitad:last-child { flex: 1 1 0; }
.panel-mitad + .panel-mitad { border-top: 1px solid var(--linea); }
.panel-cabecera em {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--tinta-3);
  background: var(--vidrio-2); padding: 1px 8px; border-radius: 20px; font-variant-numeric: tabular-nums;
}
.panel-pie { flex: 0 0 auto; padding: 11px 12px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }

.grupo {
  margin-bottom: 12px; border-radius: 14px; transition: background .16s, box-shadow .16s;
  background: color-mix(in srgb, var(--c, transparent) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, transparent) 16%, transparent);
  padding: 2px 4px 6px;
}
:root[data-tema="oscuro"] .grupo { background: color-mix(in srgb, var(--c, transparent) 13%, transparent); }
.grupo-cab h3 { color: color-mix(in srgb, var(--c, var(--tinta)) 78%, var(--tinta)); }
:root[data-tema="oscuro"] .grupo-cab h3 { color: color-mix(in srgb, var(--c, var(--tinta)) 55%, #fff); }
.grupo.caer-dentro { background: var(--acento-suave); box-shadow: inset 0 0 0 2px var(--acento); }
.grupo-cab { display: flex; align-items: center; gap: 8px; padding: 5px 6px 7px; }
.grupo-cab .flecha { color: var(--tinta-3); font-size: 11px; cursor: pointer; width: 16px; text-align: center; transition: transform .22s; }
.grupo.cerrado .flecha { transform: rotate(-90deg); }
.grupo.cerrado .grupo-cuerpo { display: none; }
.grupo-cab .seccion-icono { width: 26px; height: 26px; font-size: 14px; }
.grupo-cab h3 { flex: 1; font-size: 14px; font-weight: 640; letter-spacing: -.02em; }
.grupo-cab em {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--tinta-3);
  background: var(--vidrio-2); padding: 1px 8px; border-radius: 20px; font-variant-numeric: tabular-nums;
}
.grupo-cuerpo { display: flex; flex-direction: column; gap: 5px; min-height: 6px; }

/* Fila de recordatorio: alto cómodo, se escribe encima, se arrastra por el asa. */
.recordatorio {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 4px;
  border-radius: var(--radio-chico); position: relative;
  background: var(--vidrio-2); border: 1px solid var(--vidrio-borde);
  box-shadow: 0 1px 2px rgba(16, 19, 26, .05), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: box-shadow .16s, opacity .25s, transform .12s;
}
:root[data-tema="oscuro"] .recordatorio { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05); }
.recordatorio:hover { box-shadow: 0 4px 14px rgba(16, 19, 26, .11), inset 0 1px 0 rgba(255, 255, 255, .55); }
.recordatorio.hecho { opacity: .4; }
.recordatorio.hecho .rec-input { text-decoration: line-through; }
.recordatorio.moviendo { opacity: .35; }
.recordatorio.caer-antes::before, .recordatorio.caer-despues::after {
  content: ''; position: absolute; left: 10px; right: 10px; height: 2.5px;
  background: var(--acento); border-radius: 3px; box-shadow: 0 0 0 3px var(--acento-suave);
}
.recordatorio.caer-antes::before { top: -4px; }
.recordatorio.caer-despues::after { bottom: -4px; }

.recordatorio.urgente {
  border-color: color-mix(in srgb, var(--hoy) 45%, transparent);
  background: color-mix(in srgb, var(--hoy) 8%, var(--vidrio-2));
}
.icono.mini.alarma { opacity: .4; }
.icono.mini.alarma.encendida { opacity: 1; }
.recordatorio:hover .icono.mini.alarma { opacity: 1; }

.agarre {
  width: 14px; flex: 0 0 auto; cursor: grab; color: var(--tinta-3); font-size: 13px;
  line-height: 22px; text-align: center; opacity: 0; transition: opacity .16s; user-select: none;
}
.recordatorio:hover .agarre { opacity: .65; }
.agarre:active { cursor: grabbing; }

.tilde {
  width: 21px; height: 21px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px; cursor: pointer;
  border: 2px solid var(--c, var(--tinta-3)); background: transparent;
  display: grid; place-items: center; color: #fff; font-size: 11px;
  transition: background .18s, transform .12s;
}
.tilde:active { transform: scale(.86); }
.recordatorio.hecho .tilde { background: var(--c, var(--tinta-3)); }

.rec-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-input {
  width: 100%; border: 0; background: transparent; outline: none; padding: 1px 4px;
  font: inherit; font-size: 14px; line-height: 1.4; color: var(--tinta); border-radius: 6px;
  resize: none; overflow: hidden; display: block; transition: background .14s;
}
.rec-input:focus { background: var(--acento-suave); }
.rec-input::placeholder { color: var(--tinta-3); }
.rec-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 11.5px; color: var(--tinta-3); padding-left: 4px; }
.rec-meta .vencido { color: var(--hoy); font-weight: 600; }
.rec-meta .nota { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }

.rec-acciones { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.prioridad { color: var(--hoy); font-weight: 700; letter-spacing: -1px; font-size: 13px; padding-right: 2px; }
.icono.mini { width: 24px; height: 24px; font-size: 14px; border-radius: 7px; opacity: 0; }
.recordatorio:hover .icono.mini, .grupo-cab .icono.mini, .lista-calendarios li:hover .icono.mini { opacity: 1; }
.icono.mini:focus-visible { opacity: 1; }
.icono.borrar:hover { color: var(--hoy); background: color-mix(in srgb, var(--hoy) 12%, transparent); }

/* ---------- Hitos ---------- */
.hito {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 7px 7px 9px;
  border-radius: var(--radio-chico); position: relative; margin-bottom: 4px;
  background: var(--vidrio-2); border: 1px solid var(--vidrio-borde);
  box-shadow: 0 1px 2px rgba(16, 19, 26, .05), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: box-shadow .16s;
}
:root[data-tema="oscuro"] .hito { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05); }
.hito:hover { box-shadow: 0 4px 14px rgba(16, 19, 26, .11), inset 0 1px 0 rgba(255, 255, 255, .55); }

/* El más próximo es el que más se mira: letra propia, no solo un borde de
   color. Letras condensadas y de más peso en la fecha —la misma familia del
   sistema, pero tratada distinto— para que se lea como un titular. */
.hito.proximo {
  padding: 11px 10px 11px 12px; margin-bottom: 8px;
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background: color-mix(in srgb, var(--acento) 9%, var(--vidrio-2));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--acento) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.hito.proximo::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--acento);
}
.hito.proximo .hito-cuando b { font-size: 15px; font-weight: 760; letter-spacing: -.02em; color: var(--acento); }
.hito.proximo .hito-cuando span { font-size: 11px; }
.hito.proximo .hito-titulo { font-size: 15.5px; font-weight: 660; letter-spacing: -.015em; }

.hito-cuando { flex: 0 0 auto; width: 80px; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.hito-cuando b {
  font-size: 11px; font-weight: 660; color: var(--tinta-2, var(--tinta)); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.hito-cuando span { font-size: 10px; font-weight: 600; color: var(--acento); }
.hito-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hito-titulo { font-size: 13.5px; line-height: 1.3; letter-spacing: -.01em; }
.hito-nota {
  font-size: 11.5px; color: var(--tinta-3); line-height: 1.4; cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hito-nota:hover { color: var(--acento); }
.hito-nota-edit {
  width: 100%; border: 1px solid var(--vidrio-borde); background: var(--acento-suave); border-radius: 8px;
  font: inherit; font-size: 12px; line-height: 1.45; color: var(--tinta); padding: 6px 8px; resize: vertical; outline: none;
}
.hito-acciones { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.hito:hover .icono.mini { opacity: 1; }

.vacio { text-align: center; padding: 40px 20px; color: var(--tinta-3); font-size: 13px; line-height: 1.6; }
.vacio b { display: block; font-size: 30px; margin-bottom: 8px; opacity: .5; }

.entrada-rapida { display: flex; gap: 8px; padding: 6px; border-radius: 13px; align-items: center; }
.entrada-rapida input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--tinta); outline: none; padding-left: 8px; }
.lectura { font-size: 11.5px; color: var(--tinta-3); padding: 7px 10px 0; line-height: 1.45; min-height: 0; }
.lectura b { color: var(--acento); font-weight: 600; }

/* ---------- Hoja / editor ---------- */
.velo { position: fixed; inset: 0; z-index: 90; background: rgba(10, 12, 18, .34); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.velo.abierto { opacity: 1; pointer-events: auto; }
.hoja {
  position: fixed; z-index: 100; top: 50%; left: 50%; width: min(560px, calc(100vw - 32px));
  max-height: min(86dvh, 800px); overflow-y: auto; border-radius: 22px; padding: 22px;
  transform: translate(-50%, -46%) scale(.96); opacity: 0; pointer-events: none;
  transition: opacity .24s ease, transform .3s cubic-bezier(.22, 1.2, .4, 1);
  box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.hoja.abierta { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.hoja h2 { font-size: 19px; font-weight: 650; letter-spacing: -.03em; margin-bottom: 4px; }
.hoja-sub { font-size: 12.5px; color: var(--tinta-3); margin-bottom: 18px; }

.campo { margin-bottom: 14px; }
.campo > label { display: block; font-size: 11px; font-weight: 660; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px; }
.campo input[type=text], .campo input[type=date], .campo input[type=time], .campo textarea, .campo select {
  width: 100%; font: inherit; font-size: 14px; color: var(--tinta); padding: 10px 12px;
  border-radius: 11px; border: 1px solid var(--linea-fuerte); background: var(--vidrio-2); outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento); box-shadow: 0 0 0 3.5px var(--acento-suave); }
.campo textarea { resize: vertical; min-height: 62px; line-height: 1.45; }
.campo-titulo input { font-size: 18px !important; font-weight: 600; padding: 12px 14px !important; }
.fila { display: flex; gap: 10px; }
.fila > * { flex: 1; min-width: 0; }
.campo > label.interruptor { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--tinta); font-weight: 500; margin-bottom: 0; }
.interruptor, .campo > label.interruptor { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 11px; background: var(--vidrio-2); border: 1px solid var(--linea); cursor: pointer; font-size: 14px; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--acento); cursor: pointer; }

/* Repeticiones: a la vista, no escondidas en un submenú */
.repeticiones { display: flex; flex-wrap: wrap; gap: 7px; }
.rep {
  padding: 8px 13px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 540;
  border: 1px solid var(--linea-fuerte); background: var(--vidrio-2); color: var(--tinta-2);
  transition: all .16s; font-family: inherit;
}
.rep:hover { border-color: var(--acento); color: var(--acento); }
.rep.activo {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, #4a90f7, #1a73e8 60%, #1665d8);
  box-shadow: 0 3px 10px rgba(26, 115, 232, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.rep.estrella::after { content: ' ★'; font-size: 10px; opacity: .8; }

.colores { display: flex; flex-wrap: wrap; gap: 9px; }
.color-op { width: 30px; height: 30px; border-radius: 9px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 5px rgba(0, 0, 0, .2); transition: transform .14s; position: relative; }
.color-op:hover { transform: scale(1.12); }
.color-op.activo::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

.iconos-op { display: flex; flex-wrap: wrap; gap: 7px; }
.icono-op { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--linea-fuerte); background: var(--vidrio-2); cursor: pointer; font-size: 16px; transition: all .14s; }
.icono-op.activo { border-color: var(--acento); background: var(--acento-suave); transform: scale(1.06); }

.hoja-acciones { display: flex; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.hoja-acciones .crece { flex: 1; }

.detalle-linea { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.detalle-linea:first-of-type { border-top: 0; }
.detalle-linea span:first-child { width: 22px; flex: 0 0 auto; text-align: center; opacity: .65; }
.detalle-linea div { flex: 1; min-width: 0; }
.detalle-linea small { display: block; color: var(--tinta-3); font-size: 12px; margin-top: 2px; }

/* Avisos */
.avisos { position: fixed; z-index: 200; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aviso {
  padding: 11px 20px; border-radius: 13px; font-size: 13.5px; font-weight: 540; color: var(--tinta);
  background: var(--vidrio); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-alta);
  animation: entra .32s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.aviso.saliendo { opacity: 0; transform: translateY(10px); transition: all .28s; }

.tabs-movil { display: none; }
.solo-movil { display: none; }

/* ---------- Teléfono ---------- */
@media (max-width: 1320px) {
  .buscador { display: none; }
}
@media (max-width: 1180px) {
  :root { --panel: 330px; --rail: 232px; }
  .marca-texto span { display: none; }
}
@media (max-width: 980px) {
  .tablero { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; }
  .rail {
    position: fixed; z-index: 80; left: 10px; top: calc(var(--barra) + env(safe-area-inset-top) + 10px);
    bottom: 84px; width: 288px; border-radius: var(--radio);
    transform: translateX(calc(-100% - 20px)); transition: transform .32s cubic-bezier(.3, 1.1, .4, 1);
  }
  .rail.abierto { transform: none; box-shadow: var(--sombra-alta); }
  .panel { display: none; }
  body.tab-recordatorios .lienzo { display: none; }
  body.tab-recordatorios .panel { display: flex; }
  .solo-movil { display: flex; }
  .tabs-movil {
    position: fixed; z-index: 70; left: 10px; right: 10px; bottom: 10px; height: 62px;
    border-radius: 20px; display: flex; padding: 6px; gap: 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom)); height: calc(62px + env(safe-area-inset-bottom));
  }
  .tabs-movil button {
    flex: 1; border: 0; background: transparent; cursor: pointer; border-radius: 15px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 18px; color: var(--tinta-3); font-family: inherit; transition: background .18s, color .18s;
  }
  .tabs-movil button span { font-size: 10px; font-weight: 600; }
  .tabs-movil button.activo { color: var(--acento); background: var(--acento-suave); }
  .tablero { padding-bottom: 84px; }
  /* En el teléfono la barra usa dos filas: arriba navegar, abajo elegir vista.
     Nada se pisa y el título nunca desaparece. */
  .barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    height: auto; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top));
  }
  .barra-izq { order: 1; }
  .barra-centro { order: 2; flex: 1; min-width: 0; }
  .barra-der { order: 3; width: 100%; gap: 8px; }
  .barra-der .segmentado { flex: 1; }
  .barra-der .segmentado button { flex: 1; padding: 7px 4px; font-size: 13px; }
  .marca, .buscador, .barra-der .icono { display: none; }
  .barra-izq #btnRail { display: grid; }
  .titulo-periodo { font-size: 17px; }

  /* En el teléfono los meses van uno debajo de otro, a tamaño cómodo. */
  .meses { padding: 14px; gap: 18px; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(240px, auto); }
  .meses-6, .meses-12 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
  .mm-dia > span { font-size: 13px; }
  .hoja { width: calc(100vw - 20px); border-radius: 24px 24px 20px 20px; max-height: 90dvh; }
}
@media (max-width: 620px) {
  .barra-centro .titulo-periodo { font-size: 15.5px; }
  .btn3d { padding: 8px 13px; font-size: 13.5px; }
  .barra-der .segmentado button { padding: 7px 2px; font-size: 12px; }
  .barra-der #btnCrear { padding: 8px 11px; }
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--tinta-3) 32%, transparent); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--tinta-3) 55%, transparent); background-clip: content-box; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Menú del botón derecho ---------- */
/* Mismo vidrio y mismo radio que el resto: parece parte de la app, no un
   añadido. Las filas miden todas igual, para que la columna de iconos quede
   en línea perfecta de arriba abajo. */
.menu-ctx {
  position: fixed; z-index: 3000; min-width: 232px; padding: 6px;
  border-radius: var(--radio-chico); background: var(--vidrio);
  border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-alta);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  animation: menu-entra .11s cubic-bezier(.2, .9, .3, 1);
}
@keyframes menu-entra { from { opacity: 0; transform: scale(.97) translateY(-3px); } }

.menu-ctx hr { border: 0; height: 1px; background: var(--linea); margin: 5px 8px; }

.menu-op {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--tinta); text-align: left;
  cursor: pointer; white-space: nowrap;
}
.menu-op:hover:not(:disabled), .menu-op:focus-visible { background: var(--acento); color: #fff; }
.menu-op:disabled { opacity: .38; cursor: default; }
.menu-op.peligro { color: #d93b3b; }
.menu-op.peligro:hover { background: #d93b3b; color: #fff; }
.menu-op.activo::after { content: '✓'; margin-left: auto; opacity: .75; }
.menu-op > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Columna fija para el icono: sin esto los textos bailan de fila en fila. */
.menu-ic { width: 17px; flex: 0 0 17px; text-align: center; font-size: 13px; opacity: .78; }
.menu-op:hover .menu-ic { opacity: 1; }
.menu-ctx kbd {
  margin-left: auto; font: inherit; font-size: 11px; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.menu-flecha { margin-left: auto; opacity: .55; font-size: 15px; }

/* Submenú: se despliega al lado, como en el resto del sistema. */
.menu-conmas { position: relative; }
.menu-sub {
  display: none; position: absolute; left: calc(100% + 4px); top: -6px;
  min-width: 190px; max-height: 62vh; overflow-y: auto; padding: 6px;
  border-radius: var(--radio-chico); background: var(--vidrio);
  border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-alta);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.menu-conmas:hover > .menu-sub, .menu-conmas:focus-within > .menu-sub { display: block; }
.menu-conmas:hover > .menu-op { background: var(--acento); color: #fff; }
/* De qué lado y a qué altura sale, lo decide el propio menú al abrirse. */

/* ---------- Arrastrar eventos ---------- */
.evento.arrastrable { cursor: grab; touch-action: none; }
/* La franja de abajo estira el evento: el cursor lo dice antes de tocar. */
.evento.arrastrable::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  cursor: ns-resize;
}
.evento.moviendo, .evento.estirando {
  z-index: 60; cursor: grabbing; opacity: .93;
  box-shadow: 0 10px 26px rgba(16, 19, 26, .34), inset 0 1px 0 rgba(255, 255, 255, .4);
  transform: scale(1.015); transition: none;
}
.evento.estirando { cursor: ns-resize; }
/* Mientras se arrastra, nada de la página selecciona texto por accidente. */
body.arrastrando { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.arrastrando .evento:not(.moviendo):not(.estirando) { pointer-events: none; }

/* ---------- Deshacer y rehacer ---------- */
#grupoHistoria button { font-size: 15px; }
#grupoHistoria button:disabled { opacity: .3; cursor: default; }
@media (max-width: 1340px) { #grupoHistoria { display: none; } }

/* ---------- Aire para el título del periodo ---------- */
/* La fecha que estás mirando es lo más importante de la barra: nunca se corta.
   Lo que cede es lo de la derecha, que se aprieta un poco antes de tocarla. */
.barra-centro { flex: 1 1 auto; }
.barra-centro .titulo-periodo { flex: 0 1 auto; }
.barra-der { flex: 0 1 auto; justify-content: flex-end; }

/* El centro no lleva suelo de píxeles. Un suelo desborda la rejilla, y lo de la
   derecha —alineado al final— se derrama hacia la izquierda, encima del título.
   Con `minmax(0, 1fr)` la columna cede y nada se pisa nunca, a ningún ancho. */
@media (min-width: 1000px) {
  .barra { grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr) minmax(0, auto); }
}
/* Por debajo de 1520 px el selector de vistas y el buscador se estrechan:
   siguen siendo cómodos y le devuelven al título los píxeles que le faltaban. */
@media (max-width: 1520px) {
  .barra-der .segmentado button { padding: 6px 8px; }
  .barra-der .buscador { padding: 0 10px; }
  .barra-der .buscador input { width: 92px; }
}
/* A media pantalla el selector pasa a sus etiquetas cortas: es lo primero que
   cede, y es lo que le devuelve al título los píxeles que necesita. El límite
   no está puesto a ojo — es el ancho en el que la fecha más larga («Jueves 27
   agosto 2026») deja de caber con las etiquetas enteras. */
@media (max-width: 1440px) {
  .segmentado .etq-larga { display: none; }
  .segmentado .etq-corta { display: inline; }
}
/* Más estrecho todavía: deshacer y rehacer se van (siguen en ⌘Z y ⇧⌘Z), la
   fecha baja un punto y todo se aprieta un poco. */
@media (max-width: 1340px) {
  .titulo-periodo { font-size: 19px; }
  .barra { gap: 12px; }
  .barra-centro { gap: 10px; }
  .barra-der .segmentado button { padding: 6px 6px; }
}
/* Y en el último tramo antes de que la barra pase a dos filas, la marca deja de
   guardar el ancho de la barra lateral y ocupa solo lo suyo. Se pierde esa
   alineación durante ochenta píxeles; se gana que la fecha nunca se corte, que
   es lo que de verdad se lee. */
@media (max-width: 1060px) {
  .barra { grid-template-columns: auto minmax(0, 1fr) minmax(0, auto); }
}
@media (max-width: 1180px) {
  .barra-der .buscador span { display: none; }
  .barra-der .buscador input { width: 74px; }
  .titulo-periodo { font-size: 19px; }
}