/* ==========================================================================
   DI Timeline — "La historia de tu causa en el tiempo"
   Componente compartido: portal de clientes y monitor judicial (10-sep-2026).
   Namespace .ditl-*. Paleta de la Guía de Rediseño (navy #0F2D45, verde #10B981,
   dorado #F4B000). Vertical, escalado por meses, con marcador HOY y futuro punteado.
   ========================================================================== */
.ditl{--navy:#0F2D45;--navy2:#1E3A5F;--verde:#10B981;--verde-cl:#ECFDF5;--dorado:#F4B000;--dorado-cl:#FFF8E6;
      --rojo:#DC2626;--rojo-cl:#FEF2F2;--slate:#64748B;--texto:#334155;--linea:#E2E8F0;--fondo:#F6F8FB;
      --morado:#7C3AED;--morado-cl:#F5F3FF;font-family:Inter,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--texto);}
.ditl *{box-sizing:border-box}
.ditl-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between;margin:0 0 16px}
.ditl-title{margin:0;font-size:22px;line-height:1.25;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.ditl-sub{margin:4px 0 0;font-size:13.5px;color:var(--slate)}
.ditl-stats{display:flex;flex-wrap:wrap;gap:8px}
.ditl-stat{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--texto);white-space:nowrap}
.ditl-stat b{color:var(--navy);font-weight:700}
.ditl-stat.next{border-color:#A7F3D0;background:var(--verde-cl);color:#065F46}
.ditl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.ditl-chip{border:1px solid var(--linea);background:#fff;color:var(--texto);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;line-height:1.2;display:inline-flex;align-items:center;gap:6px}
.ditl-chip svg{width:14px;height:14px}
.ditl-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ditl-chip:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.ditl-orden{margin-left:auto}
/* ---- eje ---- */
.ditl-track{position:relative;padding-left:118px}
.ditl-track::before{content:"";position:absolute;left:88px;top:6px;bottom:6px;width:3px;background:var(--linea);border-radius:3px}
.ditl-track.past::before{background:linear-gradient(180deg,var(--verde) 0,var(--verde) var(--ditl-fill,60%),var(--linea) var(--ditl-fill,60%))}
.ditl-mes{position:relative;padding:6px 0 4px}
.ditl-mes-lbl{position:absolute;left:-118px;top:8px;width:74px;text-align:right;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);line-height:1.3}
.ditl-mes-lbl small{display:block;font-weight:500;letter-spacing:0;text-transform:none;color:#94A3B8}
.ditl-item{position:relative;margin:0 0 14px;padding-left:34px}
.ditl-dot{position:absolute;left:-30px;top:10px;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--slate);display:flex;align-items:center;justify-content:center;color:var(--slate);box-shadow:0 0 0 4px #fff}
.ditl-dot svg{width:17px;height:17px}
.ditl-item.t-escrito .ditl-dot{border-color:var(--navy);color:var(--navy)}
.ditl-item.t-mandamiento .ditl-dot{border-color:var(--navy);color:var(--navy)}
.ditl-item.t-resolucion .ditl-dot{border-color:var(--verde);color:var(--verde)}
.ditl-item.t-notificacion .ditl-dot{border-color:var(--dorado);color:#B45309}
.ditl-item.t-embargo .ditl-dot,.ditl-item.t-remate .ditl-dot{border-color:var(--rojo);color:var(--rojo)}
.ditl-item.t-audiencia .ditl-dot{border-color:var(--morado);color:var(--morado)}
.ditl-item.t-plazo .ditl-dot{border-style:dashed;border-color:var(--verde);color:var(--verde);background:var(--verde-cl)}
.ditl-item.t-plazo.pasado .ditl-dot{border-style:solid;border-color:var(--slate);color:var(--slate);background:#fff}
.ditl-card{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px 14px 12px 16px;position:relative;transition:box-shadow .15s}
.ditl-card:hover{box-shadow:0 6px 18px -10px rgba(15,45,69,.25)}
.ditl-item.t-plazo .ditl-card{border-style:dashed;border-color:#A7F3D0;background:#FBFFFD}
.ditl-item.t-plazo.pasado .ditl-card{border-style:solid;border-color:var(--linea);background:#fff}
.ditl-item.destacado .ditl-card{border-left:4px solid var(--dorado);background:var(--dorado-cl)}
.ditl-fecha{font-size:12px;color:var(--slate);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ditl-fecha b{color:var(--navy);font-weight:700}
.ditl-tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border-radius:6px;padding:2px 7px;background:#F1F5F9;color:var(--slate)}
.ditl-item.t-resolucion .ditl-tag{background:var(--verde-cl);color:#065F46}
.ditl-item.t-notificacion .ditl-tag{background:var(--dorado-cl);color:#92400E}
.ditl-item.t-escrito .ditl-tag,.ditl-item.t-mandamiento .ditl-tag{background:#E8EEF7;color:var(--navy)}
.ditl-item.t-embargo .ditl-tag,.ditl-item.t-remate .ditl-tag{background:var(--rojo-cl);color:#991B1B}
.ditl-item.t-audiencia .ditl-tag{background:var(--morado-cl);color:#5B21B6}
.ditl-titulo{margin:4px 0 2px;font-size:15px;font-weight:700;color:var(--navy);line-height:1.35}
.ditl-expl{margin:4px 0 6px;font-size:14px;line-height:1.55;color:#1F2937}
.ditl-desc{font-size:12.5px;line-height:1.5;color:var(--slate);white-space:pre-line}
.ditl-desc.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ditl-mas{display:inline-block;margin-top:4px;font-size:12.5px;color:var(--navy);font-weight:600;cursor:pointer;background:none;border:0;padding:0}
.ditl-badge{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:#F1F5F9;color:var(--texto)}
.ditl-badge.verde{background:var(--verde-cl);color:#065F46}.ditl-badge.amarillo{background:var(--dorado-cl);color:#92400E}
.ditl-badge.azul{background:#E8EEF7;color:var(--navy)}.ditl-badge.rojo{background:var(--rojo-cl);color:#991B1B}
/* ---- HOY ---- */
.ditl-hoy{position:relative;margin:6px 0 18px;padding-left:34px}
.ditl-hoy::before{content:"";position:absolute;left:-30px;top:14px;width:36px;height:36px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px #fff,0 0 0 8px rgba(15,45,69,.12)}
.ditl-hoy::after{content:"";position:absolute;left:-19px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--verde)}
.ditl-hoy-lbl{display:inline-block;background:var(--navy);color:#fff;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ditl-hoy-sub{display:block;margin-top:6px;font-size:13px;color:var(--slate)}
.ditl-futuro{position:relative}
.ditl-futuro::before{content:"";position:absolute;left:-30px;top:0;bottom:0;width:3px;border-left:3px dashed #A7F3D0;background:none;margin-left:16.5px}
.ditl-futuro .ditl-mes-lbl{color:#059669}
.ditl-empty{padding:28px;text-align:center;color:var(--slate);border:1px dashed var(--linea);border-radius:12px;background:#fff}
.ditl-leyenda{display:flex;flex-wrap:wrap;gap:10px 16px;margin:18px 0 0;font-size:12px;color:var(--slate)}
.ditl-leyenda span{display:inline-flex;align-items:center;gap:6px}
.ditl-leyenda i{width:10px;height:10px;border-radius:50%;display:inline-block;border:2px solid var(--slate)}
/* reveal único al cargar, respeta reduced motion */
@media (prefers-reduced-motion:no-preference){.ditl-item{animation:ditl-in .35s ease both}.ditl-item:nth-child(n+8){animation:none}}
@keyframes ditl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .ditl-track{padding-left:56px}.ditl-track::before{left:26px}
  .ditl-mes-lbl{left:-56px;width:44px;font-size:10px}.ditl-mes-lbl small{display:none}
  .ditl-dot{left:-30px;width:30px;height:30px}.ditl-dot svg{width:14px;height:14px}
  .ditl-hoy::before{width:30px;height:30px;left:-30px}.ditl-hoy::after{left:-21px;top:22px;width:12px;height:12px}
  .ditl-title{font-size:19px}.ditl-orden{margin-left:0}
}