/* ════════════════════════════════════════════════════════════════
   TWENTYSIX CRM · CALENDARIO — Capa premium [CAL-CSS-C1-V1]
   Archivo:  calendario.css
   Servidor: /public_html/crm/calendario.css
   Se carga DESPUÉS de style.css → gana por orden de cascada.
   No redefine maquetación (grid, alturas, anchos): solo color,
   tipografía, decoración y micro-interacción.
   Firma de marca: "hoy" = sello tinta con halo neón --accent.
   ════════════════════════════════════════════════════════════════ */

/* ── Tipografía editorial ───────────────────────────────────────── */
.gcal-title,
.gcal-mini-month {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
.gcal-title       { font-weight: 700; font-size: 22px; color: var(--ink); }
.gcal-mini-month  { font-weight: 700; font-size: 13px; color: var(--ink); }

/* Datos / horas / números → mono */
.gcal-mini-cell,
.gcal-day-num,
.gcal-week-day-num,
.gcal-time-slot,
.gcal-agenda-time {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

/* ── Botón Crear → píldora tinta premium ────────────────────────── */
.gcal-create-btn {
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.gcal-create-btn:hover {
    background: var(--ink-2);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}
.gcal-create-btn:active { transform: translateY(0); }

/* ── Mini calendario ────────────────────────────────────────────── */
.gcal-mini-cell.today {
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--accent);          /* halo neón = firma */
}
.gcal-mini-cell.selected {
    background: var(--accent-dim);
    color: var(--ink);
    font-weight: 700;
}
.gcal-mini-cell.has-events::after { background: var(--ink); }
.gcal-mini-arrow:hover { background: var(--grey-5); color: var(--ink); }

/* ── Cabeceras de sección de calendarios ────────────────────────── */
.gcal-cal-section-header {
    font-family: var(--font-ui);
    color: var(--grey-60);
    letter-spacing: 0.6px;
}
.gcal-cal-dot { box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.gcal-cal-item:hover { background: var(--accent-dim); }

/* ── Toolbar superior ───────────────────────────────────────────── */
.gcal-today-btn {
    border-radius: var(--radius-sm);
    border-color: var(--grey-20);
    font-family: var(--font-ui);
    font-weight: 600;
}
.gcal-today-btn:hover { background: var(--grey-5); border-color: var(--grey-40); }
.gcal-nav-btn:hover   { background: var(--grey-5); color: var(--ink); }

/* Control de vistas → segmentado, activo = tinta sólida */
.gcal-view-switch {
    border: 1px solid var(--grey-20);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}
.gcvs-btn {
    font-family: var(--font-ui);
    border-right-color: var(--grey-10);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.gcvs-btn:hover { background: var(--grey-5); color: var(--ink); }
.gcvs-btn.active {
    background: var(--ink);
    color: var(--white);
}

/* ── Vista MES ──────────────────────────────────────────────────── */
.gcal-month-header > div { font-family: var(--font-ui); color: var(--grey-40); }
.gcal-month-cell:hover { background: rgba(232,255,71,0.05); }   /* tinte neón muy sutil */
.gcal-month-cell.today { background: rgba(232,255,71,0.04); }
.gcal-month-cell.today .gcal-day-num {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 0 0 2px var(--accent);          /* halo neón = firma */
}

/* Chips de evento (all-day con color de calendario) */
.gcal-ev-chip {
    border-radius: 5px;
    font-weight: 600;
    padding: 2px 7px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), opacity 0.12s var(--ease);
}
.gcal-ev-chip:hover {
    opacity: 1;
    transform: translateX(1px);
    box-shadow: 0 2px 7px rgba(0,0,0,0.18);
}
.gcal-ev-chip.timed { font-weight: 600; color: var(--ink); }

/* ── Vista SEMANA ───────────────────────────────────────────────── */
.gcal-week-day-name { font-family: var(--font-ui); color: var(--grey-40); }
.gcal-week-day-num.today {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 0 0 2px var(--accent);          /* halo neón = firma */
}
.gcal-week-event {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.14);
    transition: opacity 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.gcal-week-event:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.22); }

/* ── Vista AGENDA ───────────────────────────────────────────────── */
.gcal-agenda-date-label {
    font-family: var(--font-ui);
    color: var(--grey-40);
}
.gcal-agenda-date-label.today-label {
    color: var(--ink);
    position: relative;
}
.gcal-agenda-date-label.today-label::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);                     /* barra neón = firma */
}
.gcal-agenda-title { font-family: var(--font-ui); color: var(--ink); }
.gcal-agenda-time  { color: var(--grey-60); }
.gcal-agenda-event { border-radius: var(--radius-sm); }
.gcal-agenda-event:hover { background: var(--accent-dim); }

/* ── Accesibilidad: foco visible con la tinta de marca ──────────── */
.gcal-create-btn:focus-visible,
.gcal-today-btn:focus-visible,
.gcal-nav-btn:focus-visible,
.gcvs-btn:focus-visible,
.gcal-cal-item:focus-visible,
.gcal-mini-cell:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ── Scrollbars discretas ───────────────────────────────────────── */
.gcal-view-area::-webkit-scrollbar,
.gcal-sidebar::-webkit-scrollbar { width: 8px; height: 8px; }
.gcal-view-area::-webkit-scrollbar-thumb,
.gcal-sidebar::-webkit-scrollbar-thumb {
    background: var(--grey-20);
    border-radius: 8px;
}
.gcal-view-area::-webkit-scrollbar-thumb:hover,
.gcal-sidebar::-webkit-scrollbar-thumb:hover { background: var(--grey-40); }

/* ── Respeto a "reduce motion" ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gcal-create-btn,
    .gcal-ev-chip,
    .gcal-week-event,
    .gcvs-btn { transition: none; }
    .gcal-create-btn:hover { transform: none; }
    .gcal-ev-chip:hover { transform: none; }
}