/* Cronograma Khipu — tablero público (solo lectura).
   Todo bajo .ck-root para no filtrar estilos al tema del sitio; las variables
   de color viven en .ck-root en vez de :root para no pisar variables globales
   del tema activo. */
.ck-root{
  --ck-bg:#FFFFFF;
  --ck-surface:#FBF8F3;
  --ck-surface-2:#F2EBDF;
  --ck-border:rgba(34,24,16,0.10);
  --ck-border-strong:rgba(34,24,16,0.22);
  --ck-text:#221C18;
  --ck-text-soft:#786A5C;
  --ck-esc:#EA652C;
  --ck-adm:#E68733;
  --ck-min:#EFAE50;
  --ck-accent:#4E9CA0;
  --ck-today:#285E60;
  --ck-ok:#3F8F5B;
  --ck-err:#C23B3B;
  --ck-grad: linear-gradient(90deg, var(--ck-esc), var(--ck-adm) 55%, var(--ck-min));

  background:
    radial-gradient(900px 480px at 50% 0%, rgba(255,179,115,0.08) 0%, transparent 65%),
    var(--ck-bg);
  color:var(--ck-text);
  font-family:'Roboto', sans-serif;
  line-height:1.5;
  padding-bottom:40px;
  box-sizing:border-box;
}
.ck-root *, .ck-root *::before, .ck-root *::after{ box-sizing:border-box; }

.ck-loading{ padding:30px; text-align:center; color:var(--ck-text-soft); }

/* Topbar */
.ck-topbar{ max-width:1300px; margin:0 auto; padding:8px 4px 6px; display:flex; align-items:baseline; gap:9px; }
.ck-brand-name{ font-family:'Bebas Neue', sans-serif; font-weight:400; letter-spacing:0.02em; font-size:1.3rem; color:var(--ck-text); }
.ck-brand-tag{ font-family:'Roboto Mono', monospace; font-size:0.62rem; letter-spacing:0.1em; color:var(--ck-text-soft); text-transform:uppercase; }
.ck-admin-link{ margin-left:auto; font-size:0.74rem; color:var(--ck-text-soft); text-decoration:none; border:1px solid var(--ck-border-strong); border-radius:7px; padding:5px 10px; }
.ck-admin-link:hover{ background:var(--ck-surface-2); }

/* Toolbar */
.ck-toolbar{ max-width:1300px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; background:var(--ck-surface); border:1px solid var(--ck-border); border-radius:10px; padding:7px 12px; }
.ck-field{ display:flex; flex-direction:column; gap:2px; min-width:118px; }
.ck-field.ck-grow{ flex:1 1 200px; position:relative; min-width:160px; }
.ck-field label{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ck-text-soft); font-weight:700; }
.ck-root select, .ck-root input[type="text"]{
  font-family:'Roboto', sans-serif; font-size:0.82rem; padding:6px 9px;
  border-radius:7px; border:1px solid var(--ck-border-strong); background:var(--ck-surface-2); color:var(--ck-text);
}
.ck-root select:focus, .ck-root input:focus{ outline:2px solid var(--ck-min); outline-offset:1px; }

.ck-btn-today{
  font-family:'Roboto',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.02em;
  padding:7px 14px; border-radius:7px; border:none; cursor:pointer; background:var(--ck-grad); color:#221C18; white-space:nowrap;
}
.ck-btn-today:hover{ filter:brightness(1.08); }

.ck-cat-toggle{ display:flex; gap:5px; flex-wrap:wrap; }
.ck-cat-pill{
  display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px;
  border:1.5px solid var(--ck-border-strong); background:var(--ck-surface-2); font-size:0.66rem;
  cursor:pointer; color:var(--ck-text-soft); font-weight:600;
}
.ck-cat-pill .ck-cat-icon{ font-size:0.82rem; line-height:1; }
.ck-cat-pill.ck-active{ background:var(--ck-surface); color:var(--ck-text); border-color:var(--ck-text-soft); }
.ck-cat-pill.ck-off{ opacity:0.6; }
.ck-cat-pill.ck-locked{ border-style:dashed; opacity:0.85; }

/* Se abre hacia ARRIBA (bottom, no top): la barra de búsqueda ahora vive en la
   cabecera pegada al fondo de la pantalla, así que abrir hacia abajo la cortaría
   contra el borde inferior de la ventana. */
.ck-search-suggest{
  position:absolute; bottom:calc(100% + 6px); left:0; right:0; z-index:12; background:var(--ck-surface-2);
  border:1px solid var(--ck-border-strong); border-radius:10px; max-height:270px; overflow-y:auto;
  display:none; box-shadow:0 -14px 34px rgba(0,0,0,0.35);
}
.ck-search-suggest.ck-open{ display:block; }
.ck-suggest-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--ck-border); font-size:0.82rem; }
.ck-suggest-item:last-child{ border-bottom:none; }
.ck-suggest-item:hover{ background:var(--ck-surface); }
.ck-suggest-item .ck-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.ck-suggest-text{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ck-text); }
.ck-suggest-meta{ flex:none; font-family:'Roboto Mono', monospace; font-size:0.68rem; color:var(--ck-text-soft); white-space:nowrap; }
.ck-suggest-empty{ padding:14px 12px; font-size:0.8rem; color:var(--ck-text-soft); }

/* Cabecera fija: va DESPUÉS del timeline en el documento (así el mes actual es
   lo primero que se ve al cargar), pero queda pegada (sticky) al fondo de la
   ventana mientras se recorre el calendario, para que los filtros sigan a mano.
   --ck-sticky-bottom existe para subirla si el tema de WordPress ya tiene su
   propia barra fija abajo (si no se ajusta, podrían superponerse). */
.ck-sticky-header{
  position:sticky; bottom:var(--ck-sticky-bottom, 0px); z-index:30;
  background:var(--ck-bg);
  padding-top:2px; padding-bottom:2px;
  border-top:1px solid var(--ck-border-strong);
  box-shadow:0 -6px 16px rgba(0,0,0,0.06);
}

/* Tablero: timeline horizontal (el mes actual queda centrado al cargar; se
   recorre arrastrando, con el scroll del mouse/trackpad, o con las flechas). */
.ck-kanban-board{ max-width:1300px; margin:6px auto 0; position:relative; }
.ck-timeline-viewport{
  display:flex; gap:14px; align-items:start;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 6px 16px;
}
.ck-timeline-viewport:focus-visible{ outline:2px solid var(--ck-min); outline-offset:2px; }

.ck-timeline-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--ck-border-strong);
  background:var(--ck-surface); color:var(--ck-text); font-size:1.05rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.15);
}
.ck-timeline-nav:hover{ filter:brightness(1.06); }
.ck-timeline-nav-prev{ left:-4px; }
.ck-timeline-nav-next{ right:-4px; }
@media (max-width:900px){ .ck-timeline-nav{ display:none; } } /* en móvil ya hay swipe táctil */

.ck-month-card{
  background:var(--ck-surface); border:1px solid var(--ck-border-strong); border-radius:14px; border-top:4px solid var(--ck-border-strong);
  padding:8px 11px 5px; display:flex; flex-direction:column; gap:3px; transition:opacity .15s;
  scroll-snap-align:center;
  flex:0 0 calc((100% - (var(--ck-meses-por-fila, 4) - 1) * 14px) / var(--ck-meses-por-fila, 4));
  min-width:230px;
}
@media (max-width:640px){ .ck-month-card{ flex-basis:88%; min-width:0; } }
.ck-month-card.ck-is-current{ border-color:var(--ck-today); box-shadow:0 0 0 1.5px var(--ck-today); }
.ck-month-card.ck-is-past{ opacity:0.5; }
.ck-month-card h3{
  font-family:'Bebas Neue', sans-serif; font-weight:400; letter-spacing:0.03em; font-size:1.14rem; margin:0; text-align:center;
  color:var(--ck-text); border-bottom:2px solid var(--ck-border-strong); padding-bottom:4px; display:flex; align-items:center; justify-content:center; gap:6px;
}
.ck-month-card.ck-is-current h3::after{
  content:'HOY'; font-family:'Roboto Mono', monospace; font-size:0.5rem; font-weight:700; letter-spacing:0.06em;
  color:#FFF7EC; background:var(--ck-today); border-radius:999px; padding:1px 7px;
}

.ck-month-table-header, .ck-month-table-row{ display:grid; grid-template-columns:32px 1fr 1fr 1fr 38px; gap:2px; align-items:stretch; }
.ck-month-table-header{
  font-family:'Roboto Mono', monospace; font-size:0.5rem; text-transform:uppercase; letter-spacing:0.01em; color:var(--ck-text-soft);
  font-weight:700; padding-bottom:2px; border-bottom:2px solid var(--ck-border-strong); margin-bottom:0;
}
.ck-month-table-header > div{ text-align:center; line-height:1.1; overflow-wrap:break-word; }
.ck-th-esc{ color:var(--ck-esc); }
.ck-th-min{ color:var(--ck-min); }
.ck-th-adm{ color:var(--ck-adm); }

.ck-month-table-row{ border-bottom:1px solid var(--ck-border); min-height:14px; }
.ck-month-table-row:last-child{ border-bottom:none; }
.ck-month-table-row.ck-weekend, .ck-month-table-row.ck-no-laborable{ background:rgba(34,24,16,0.04); }
.ck-month-table-row.ck-feriado-row{ background:repeating-linear-gradient(45deg, rgba(194,59,59,0.07) 0 5px, transparent 5px 10px); }
.ck-month-table-row.ck-is-today{ background:rgba(202,40,81,0.07); box-shadow:inset 0 0 0 1.5px var(--ck-today); border-radius:4px; }

.ck-td-fecha{ font-family:'Roboto Mono', monospace; font-size:0.54rem; font-weight:700; color:var(--ck-text-soft); display:flex; align-items:center; justify-content:center; padding:0; }
.ck-month-table-row.ck-is-today .ck-td-fecha{ color:var(--ck-today); font-weight:900; }
/* Tamaño de letra, tipo de letra, padding y alto de celda son configurables
   desde el panel de administrador (pestaña Ciclo lectivo → Visualización);
   estas variables las fija public.js con los valores guardados. */
.ck-td-cat{
  font-family:var(--ck-cell-font-family, 'Roboto', sans-serif);
  font-size:var(--ck-cell-font-size, 0.52rem); line-height:1.15;
  padding:var(--ck-cell-padding, 1px); overflow:hidden; word-break:break-word; display:flex; flex-direction:column;
  align-items:stretch; justify-content:center; gap:2px; text-align:center; border-radius:3px; cursor:default;
  margin:0.5px 0; min-height:var(--ck-cell-height, 12px);
}
.ck-td-cat.ck-has-items{ font-weight:700; }
.ck-td-cat.ck-multi{ gap:3px; }
.ck-td-cat.ck-match-search{ outline:2px solid var(--ck-text); outline-offset:-1px; }
.ck-activity-chip{
  cursor:pointer; padding:1px 3px; border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ck-td-cat.ck-multi .ck-activity-chip{ margin-bottom:1px; }
.ck-td-cat.ck-multi .ck-activity-chip:last-child{ margin-bottom:0; }
.ck-activity-chip:hover{ filter:brightness(1.15); }

.ck-td-dia{
  font-family:'Roboto Mono', monospace; font-size:0.52rem; font-weight:700; color:#4A3A22; display:flex; align-items:center;
  justify-content:center; border-radius:3px; margin:0.5px 0;
}
.ck-td-dia.ck-dia-lectivo{ background:var(--ck-accent); }
.ck-td-dia.ck-no-cuenta{ color:var(--ck-text-soft); font-weight:400; opacity:0.5; }

.ck-empty{ padding:30px 10px; text-align:center; color:var(--ck-text-soft); font-family:'Roboto Mono', monospace; font-size:0.82rem; }


/* Modal */
.ck-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.65); display:none; align-items:center; justify-content:center; padding:20px; z-index:100000; }
.ck-modal-overlay.ck-open{ display:flex; }
.ck-modal-box{ background:var(--ck-surface); border-radius:14px; max-width:440px; width:100%; max-height:80vh; overflow-y:auto; padding:26px 24px 22px; position:relative; border:1px solid var(--ck-border-strong); }
.ck-modal-close{ position:absolute; top:14px; right:14px; border:none; background:transparent; font-size:1.2rem; cursor:pointer; color:var(--ck-text-soft); line-height:1; }
.ck-modal-date{ font-family:'Roboto Mono', monospace; font-size:0.78rem; color:var(--ck-text-soft); margin-bottom:12px; }
.ck-modal-item{ border-top:1px solid var(--ck-border); padding:12px 0; }
.ck-modal-item:first-of-type{ border-top:none; padding-top:0; }
.ck-modal-badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.7rem; font-weight:700; margin-bottom:6px; }
.ck-modal-badge.ck-esc{ background:var(--ck-esc); color:#F6EFE4; }
.ck-modal-badge.ck-adm{ background:var(--ck-adm); color:#221C18; }
.ck-modal-badge.ck-min{ background:var(--ck-min); color:#221C18; }
.ck-modal-item h4{ margin:0 0 4px; font-family:'Bebas Neue', sans-serif; font-weight:400; letter-spacing:0.02em; font-size:1.35rem; color:var(--ck-text); }
.ck-modal-item p{ margin:0; font-size:0.86rem; color:var(--ck-text-soft); }

@media (prefers-color-scheme: dark){
  .ck-root{
    --ck-bg:#1B1712; --ck-surface:#241F19; --ck-surface-2:#2C251D;
    --ck-border:rgba(255,240,222,0.10); --ck-border-strong:rgba(255,240,222,0.22);
    --ck-text:#F3EAE0; --ck-text-soft:#B7A996;
  }
}