/**
 * client-timeline.css — Client Service History UI v1.0
 * Trust-first design. Clear language. No internal data exposed.
 * Namespace: .ct-
 */

/* ── TOKENS ──────────────────────────────────────────── */
:root {
  --ct-blue:     #2563EB;
  --ct-green:    #10B981;
  --ct-amber:    #F59E0B;
  --ct-red:      #EF4444;
  --ct-gray:     #6B7280;
  --ct-done:     var(--ct-green);
  --ct-active:   var(--ct-blue);
  --ct-pending:  #D1D5DB;
  --ct-node-sz:  40px;
  --ct-radius:   16px;
}

/* ══════════════════════════════════════════════════════
   1. WRAPPER
══════════════════════════════════════════════════════ */
.ct-wrapper {
  max-width: 680px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1F2937;
}

/* ══════════════════════════════════════════════════════
   2. HEADER CARD
══════════════════════════════════════════════════════ */
.ct-header {
  background: linear-gradient(135deg, #EDE9FE 0%, #DBEAFE 100%);
  border-radius: var(--ct-radius);
  padding: 24px 28px;
  margin-bottom: 20px;
  color: #1F2937;
  position: relative;
  overflow: hidden;
}
.ct-header::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: rgba(124,58,237,.06); border-radius: 50%;
}
.ct-header__logo {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; opacity: .7; margin-bottom: 8px;
}
.ct-header__title {
  font-size: 20px; font-weight: 800; margin-bottom: 4px;
}
.ct-header__sub {
  font-size: 13px; opacity: .75;
}
.ct-header__badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px; padding: 5px 12px;
  background: rgba(124,58,237,.10); border-radius: 99px;
  font-size: 12px; font-weight: 700; backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════════════
   3. PROGRESS STEPPER
══════════════════════════════════════════════════════ */
.ct-stepper {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: var(--ct-radius);
  padding: 20px 24px 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.ct-stepper__label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: #9CA3AF; margin-bottom: 16px;
}
.ct-steps {
  display: flex; position: relative;
  margin-bottom: 8px;
}
/* Connecting line */
.ct-steps::before {
  content: '';
  position: absolute;
  top: 17px; left: 20px; right: 20px; height: 3px;
  background: var(--ct-pending);
  border-radius: 2px; z-index: 0;
}
.ct-steps__fill {
  position: absolute;
  top: 17px; left: 20px; height: 3px;
  background: linear-gradient(90deg, var(--ct-green), var(--ct-blue));
  border-radius: 2px; z-index: 1;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.ct-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  z-index: 2; position: relative;
}
.ct-step__node {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  background: var(--ct-pending);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--ct-pending);
  transition: background .3s, box-shadow .3s;
  margin-bottom: 8px;
}
.ct-step.done   .ct-step__node { background:var(--ct-done);   box-shadow:0 0 0 2px var(--ct-done);   color:#fff; }
.ct-step.active .ct-step__node { background:var(--ct-active); box-shadow:0 0 0 3px var(--ct-active),0 0 0 6px rgba(37,99,235,.2); color:#fff; animation:ctPulse 2s infinite; }
.ct-step.cancelled .ct-step__node { background:var(--ct-red); box-shadow:0 0 0 2px var(--ct-red); color:#fff; }

.ct-step__text {
  font-size: 10px; font-weight: 700; color: var(--ct-gray);
  text-align: center; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 64px;
}
.ct-step.done   .ct-step__text { color: var(--ct-done); }
.ct-step.active .ct-step__text { color: var(--ct-active); font-weight: 900; }

/* Progress bar below stepper */
.ct-progress-bar {
  height: 4px; background: #F3F4F6; border-radius: 2px; overflow: hidden; margin-top: 4px;
}
.ct-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ct-green), var(--ct-blue));
  border-radius: 2px;
  transition: width .6s ease;
}
.ct-stepper__pct {
  text-align: right; font-size: 11px; font-weight: 800; color: var(--ct-blue);
  margin-top: 6px;
}
.ct-estado-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 700;
  margin-top: 10px;
}
.ct-estado-pill--activo    { background:#DBEAFE; color:var(--ct-blue); }
.ct-estado-pill--completo  { background:#D1FAE5; color:var(--ct-green); }
.ct-estado-pill--cancelado { background:#FEE2E2; color:var(--ct-red); }
.ct-estado-pill--pendiente { background:#FEF9C3; color:var(--ct-amber); }

@keyframes ctPulse { 0%,100%{box-shadow:0 0 0 3px var(--ct-active),0 0 0 6px rgba(37,99,235,.2)} 50%{box-shadow:0 0 0 3px var(--ct-active),0 0 0 10px rgba(37,99,235,.08)} }

/* ══════════════════════════════════════════════════════
   4. TIMELINE
══════════════════════════════════════════════════════ */
.ct-timeline {
  position: relative;
  padding-left: 56px;
}
.ct-timeline::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 19px;
  width: 2px; background: #E5E7EB; border-radius: 1px;
}

/* ── EVENT ────────────────────────────────────────────── */
.ct-event {
  position: relative; margin-bottom: 6px;
}
.ct-event__node {
  position: absolute;
  left: -55px; top: 10px;
  width: var(--ct-node-sz); height: var(--ct-node-sz);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #E5E7EB;
  transition: transform .18s, box-shadow .18s;
  z-index: 1;
}
.ct-event:hover .ct-event__node { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ct-blue); }
.ct-event.is-hito .ct-event__node { background: #EFF6FF; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ct-blue); }
.ct-event.is-last .ct-event__node { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ct-done), 0 0 0 9px rgba(16,185,129,.15); }

/* Card */
.ct-event__card {
  background: #fff;
  border: 1px solid #F3F4F6;
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color .15s, box-shadow .15s;
}
.ct-event.is-hito .ct-event__card {
  border-color: #DBEAFE;
  background: linear-gradient(135deg,#FAFEFF,#F0F7FF);
}
.ct-event:hover .ct-event__card { border-color: #DBEAFE; box-shadow: 0 2px 10px rgba(37,99,235,.06); }

.ct-event__top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ct-event__title {
  font-size: 14px; font-weight: 800; color: #1F2937; flex: 1;
}
.ct-event.is-hito .ct-event__title { color: var(--ct-blue); }
.ct-event__time {
  font-size: 11px; color: #9CA3AF; flex-shrink: 0; white-space: nowrap;
}
.ct-event__nota {
  margin-top: 6px; padding: 8px 12px;
  background: #F9FAFB; border-radius: 8px;
  font-size: 13px; color: #374151; line-height: 1.5;
  border-left: 3px solid #E5E7EB;
}
.ct-event.is-hito .ct-event__nota { border-left-color: var(--ct-blue); background: #EFF6FF; }
.ct-event__plazo {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 3px 8px;
  background: #FFFBEB; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #92400E;
}
.ct-hito-badge {
  font-size: 9px; font-weight: 800; padding: 2px 6px;
  border-radius: 99px; background: #DBEAFE; color: var(--ct-blue);
  text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0;
}

/* Current state highlight */
.ct-event.is-current .ct-event__card {
  border-left: 3px solid var(--ct-active);
  background: linear-gradient(135deg, #F0F7FF, #FAFEFF);
  border-color: var(--ct-active);
}

/* ══════════════════════════════════════════════════════
   5. EMPTY + SKELETON
══════════════════════════════════════════════════════ */
.ct-empty {
  padding: 50px 24px; text-align: center;
}
.ct-empty__icon  { font-size: 36px; display:block; margin-bottom: 10px; }
.ct-empty__title { font-size: 15px; font-weight: 700; color: #374151; }
.ct-empty__sub   { font-size: 13px; color:#9CA3AF; margin-top:4px; }

.ct-skel { padding-left: 56px; }
.ct-skel-event { display:flex; gap:12px; margin-bottom:8px; }
.ct-skel-node  { width:40px; height:40px; border-radius:50%; flex-shrink:0; background:linear-gradient(90deg,#F3F4F6 25%,#E9EAED 50%,#F3F4F6 75%); background-size:200% 100%; animation:ctShim 1.4s infinite; }
.ct-skel-card  { flex:1; height:60px; border-radius:12px; background:linear-gradient(90deg,#F3F4F6 25%,#E9EAED 50%,#F3F4F6 75%); background-size:200% 100%; animation:ctShim 1.4s infinite; }
@keyframes ctShim { 0%{background-position:200% 0}100%{background-position:-200% 0} }

/* ══════════════════════════════════════════════════════
   6. TRUST FOOTER
══════════════════════════════════════════════════════ */
.ct-trust-footer {
  text-align: center; padding: 20px 16px 8px;
  border-top: 1px solid #F3F4F6; margin-top: 20px;
}
.ct-trust-footer p {
  font-size: 11px; color: #9CA3AF; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

/* ══════════════════════════════════════════════════════
   7. MODAL (full history popup)
══════════════════════════════════════════════════════ */
.ct-modal-backdrop {
  display: none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,.35); backdrop-filter:blur(3px);
  animation: ctFadeIn .2s ease;
}
.ct-modal-backdrop.open { display:flex; align-items:flex-end; justify-content:center; }
@media(min-width:640px) { .ct-modal-backdrop.open { align-items:center; } }

.ct-modal {
  background:#fff; border-radius:20px 20px 0 0; width:100%; max-width:640px;
  max-height:90vh; display:flex; flex-direction:column;
  animation: ctSlideUp .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
@media(min-width:640px) { .ct-modal { border-radius:20px; max-height:85vh; } }

.ct-modal__hdr {
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; border-bottom:1px solid #F3F4F6; flex-shrink:0;
  font-size:15px; font-weight:800; color:#1F2937;
}
.ct-modal__close {
  margin-left:auto; width:34px; height:34px; border-radius:8px;
  border:none; background:#F3F4F6; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.ct-modal__close:hover { background:#E5E7EB; }
.ct-modal__body { flex:1; overflow-y:auto; padding:16px 20px; -webkit-overflow-scrolling:touch; }

@keyframes ctFadeIn   { from{opacity:0} to{opacity:1} }
@keyframes ctSlideUp  { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ══════════════════════════════════════════════════════
   8. INLINE WIDGET (embed in OS/Client detail panel)
══════════════════════════════════════════════════════ */
.ct-widget {
  border:1px solid #F3F4F6; border-radius:12px; overflow:hidden; background:#fff;
}
.ct-widget__hdr {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid #F3F4F6;
  font-size:13px; font-weight:800; color:#1F2937;
}
.ct-widget__hdr-btn {
  margin-left:auto; font-size:11px; font-weight:700;
  color:var(--ct-blue); background:none; border:none; cursor:pointer;
  padding:4px 8px; border-radius:5px; transition:background .12s;
}
.ct-widget__hdr-btn:hover { background:#EFF6FF; }
.ct-widget__body { padding:12px 16px; }

/* ══════════════════════════════════════════════════════
   9. RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:480px) {
  .ct-header    { padding:18px 18px; }
  .ct-timeline  { padding-left:46px; }
  .ct-timeline::before { left:14px; }
  .ct-event__node { left:-45px; }
  .ct-step__text { font-size:9px; max-width:52px; }
  .ct-stepper   { padding:16px 16px 12px; }
}