/* ====== ÁMBITO AISLADO ======
   Todo vive bajo .seguimiento-page para no afectar otras vistas
=============================================================== */

/* Variables locales (no globales) */
.seguimiento-page{
    --azul:#0b2e59;
    --azul-700:#133e7c;
    --naranja:#ff7b00;
    --naranja-700:#e66a00;
    --borde:#ddd;
    --fondo:#ffffff;
    --fondo-bloque:#f9f9f9;
    --texto:#0b2e59;
    color:var(--texto);
    font-family:Arial,Helvetica,sans-serif;
    background:var(--fondo);
  }
  
  .seguimiento-page img{max-width:100%;height:auto;}
  .seguimiento-page .muted{color:#6b7280;font-size:12px;}
  .seguimiento-page .oculto{display:none;}
  
  /* ===== Header ===== */
  .seguimiento-page header,
  .seguimiento-page .app-header{
    background: linear-gradient(90deg, var(--azul) 0%, var(--azul) 60%, var(--naranja) 60%, var(--naranja) 100%);
    color:#fff;
    position:sticky; top:0; z-index:50;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .seguimiento-page header .header-inner{
    max-width:1100px;margin:0 auto;padding:14px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .seguimiento-page header .brand{display:flex;align-items:center;gap:12px;}
  .seguimiento-page header .logo{height:46px;width:auto;}
  .seguimiento-page header .title,
  .seguimiento-page h1,
  .seguimiento-page h2{margin:0;line-height:1.2;color:#fff;}
  .seguimiento-page header .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .seguimiento-page header .btn-outline{
    display:inline-block;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85);
    padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:700;
  }
  .seguimiento-page header .btn-outline:hover{background:rgba(255,255,255,.12);}
  
  /* ===== Contenedor y bloques ===== */
  .seguimiento-page .contenido{max-width:1100px;margin:18px auto;padding:0 20px;}
  .seguimiento-page .bloque{margin-bottom:18px;padding:16px;background:var(--fondo-bloque);border:1px solid var(--borde);border-radius:10px;}
  .seguimiento-page .bloque h3{margin:0 0 12px;color:var(--azul);}
  
  /* ===== Botones ===== */
  .seguimiento-page .btn-azul,
  .seguimiento-page .btn-naranja{
    border:0;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:700;color:#fff;
  }
  .seguimiento-page .btn-azul{background:var(--azul);}
  .seguimiento-page .btn-azul:hover{background:var(--azul-700);}
  .seguimiento-page .btn-naranja{background:var(--naranja);}
  .seguimiento-page .btn-naranja:hover{background:var(--naranja-700);}
  .seguimiento-page .btn-sm{padding:8px 12px;}
  .seguimiento-page .btn-link{
    display:inline-block;padding:10px 12px;text-decoration:none;border-radius:8px;
    border:1px solid #cbd5e1;color:var(--azul);background:#fff;font-weight:700;
  }
  .seguimiento-page .btn-link:hover{background:#f3f4f6;}
  
  /* ===== Tablas ===== */
  .seguimiento-page .tabla-wrap{overflow:auto;}
  .seguimiento-page .tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;}
  .seguimiento-page .tabla th,.seguimiento-page .tabla td{padding:10px 12px;border-bottom:1px solid #eee;vertical-align:top;}
  .seguimiento-page .tabla thead th{background:#eff6ff;color:var(--azul);font-weight:700;}
  .seguimiento-page .tabla tbody tr:hover{background:#fafafa;}
  
  /* Badges de estado */
  .seguimiento-page .badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;line-height:1;}
  .seguimiento-page .b-pendiente{background:#fff7ed;color:#9a3412;}
  .seguimiento-page .b-en_transito{background:#eff6ff;color:#1e3a8a;}
  .seguimiento-page .b-reprogramado{background:#fef2f2;color:#991b1b;}
  .seguimiento-page .b-entregado{background:#ecfdf5;color:#065f46;}
  /* Badge para estado: recibido */
  .seguimiento-page .badge.b-recibido { background-color:#eff4f1; color:#015830; }
  .seguimiento-page .badge.b-recibido.badge-light,
  .seguimiento-page .badge-light.b-recibido{
    background-color:#fefefe; color:#015830; border-color:#badbcc;
  }
  
  /* ===== Formularios ===== */
  .seguimiento-page .form-accion{
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto;
    gap:8px 12px;align-items:start;
  }
  .seguimiento-page .label-inline{align-self:center;font-weight:700;color:var(--azul);}
  .seguimiento-page .select-accion{
    padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--texto);
  }
  .seguimiento-page .textarea-observacion{
    grid-column:1 / span 2;min-height:70px;padding:8px 10px;
    border:1px solid #34d15b;border-radius:8px;resize:vertical;background:#fcfcfc;color:#fff;
  }
  
  /* ===== Navbar/Paginación (scoped) ===== */
  .seguimiento-page .navbar { background-color:#ffffff; }
  .seguimiento-page .navbar-brand { font-weight:700; color:#0d6efd !important; }
  .seguimiento-page .nav-link { color:#333 !important; font-weight:500; margin-right:0.8rem; transition:color .3s ease; }
  .seguimiento-page .nav-link:hover { color:#0d6efd !important; }
  .seguimiento-page .nav-link.active { color:#0d6efd !important; border-bottom:2px solid #0d6efd; }
  
  .seguimiento-page .pagination .page-link { border:1px solid var(--bs-border-color); }
  .seguimiento-page .pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color:#fff;
  }
  .seguimiento-page .pagination .page-item.disabled .page-link { color: var(--bs-secondary-color); }
  
  /* ===== Timeline horizontal (tracking) ===== */
  .seguimiento-page .tracking-timeline-h {
    --line:#e5e7eb; --done:#16a34a; --current:#f59e0b; --text:#374151; --muted:#6b7280;
    display:flex; align-items:center; gap:0; margin-top:14px; overflow-x:auto;
    padding:10px 8px; border-radius:10px; background:#fff;
  }
  .seguimiento-page .tracking-step-h {
    display:grid; grid-template-rows:36px auto; grid-template-columns:1fr; justify-items:center;
    min-width:160px; padding:0 12px; position:relative; text-align:center;
  }
  .seguimiento-page .tracking-step-h::before,
  .seguimiento-page .tracking-step-h::after{
    content:""; position:absolute; top:18px; height:2px; background:var(--line); width:50%;
  }
  .seguimiento-page .tracking-step-h::before{ left:0; transform:translateX(-50%); }
  .seguimiento-page .tracking-step-h::after{ right:0; transform:translateX(50%); }
  .seguimiento-page .tracking-step-h:first-child::before{ display:none; }
  .seguimiento-page .tracking-step-h:last-child::after{ display:none; }
  .seguimiento-page .tracking-dot-h{
    width:36px;height:36px;border-radius:999px;border:2px solid var(--line);
    background:#fff;display:grid;place-items:center;font-weight:700;
  }
  .seguimiento-page .tracking-title-h{ font-weight:600; margin:8px 0 2px; color:var(--text); }
  .seguimiento-page .tracking-meta-h{ font-size:.9rem; color:var(--muted); margin:0; }
  .seguimiento-page .tracking-step-h.done .tracking-dot-h{ border-color:var(--done); background:var(--done); color:#fff; }
  .seguimiento-page .tracking-step-h.current .tracking-dot-h{ border-color:var(--current); background:#fff; color:var(--current); }
  .seguimiento-page .tracking-step-h.skipped .tracking-title-h,
  .seguimiento-page .tracking-step-h.skipped .tracking-meta-h{ color:#9ca3af; }
  .seguimiento-page .tracking-timeline-h::-webkit-scrollbar{ height:8px; }
  .seguimiento-page .tracking-timeline-h::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }
  .seguimiento-page .tracking-step-h.done::before,
  .seguimiento-page .tracking-step-h.done::after{ background:var(--done); }
  .seguimiento-page .tracking-step-h.current::before{ background:var(--done); }
  
  /* ===== Galería de evidencias ===== */
  .seguimiento-page .evidencias-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap:12px;
  }
  .seguimiento-page .evidencia-thumb{
    position:relative;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#f8fafc;
    aspect-ratio:1/1; display:block;
  }
  .seguimiento-page .evidencia-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .seguimiento-page .evidencia-meta{
    font-size:.78rem; color:#6b7280; margin-top:4px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  
  /* ===== Responsive ===== */
  @media (max-width:1024px){
    .seguimiento-page header .header-inner{padding:12px 16px;}
    .seguimiento-page header .logo{height:42px;}
    .seguimiento-page .contenido{padding:0 16px;}
  }
  @media (max-width:768px){
    .seguimiento-page header .header-inner{flex-direction:column;align-items:center;gap:10px;}
    .seguimiento-page header .actions{width:100%;justify-content:space-between;}
    .seguimiento-page header .title{font-size:18px;}
    .seguimiento-page .bloque{padding:14px;}
    .seguimiento-page .form-accion{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:10px;}
    .seguimiento-page .textarea-observacion{grid-column:1 / -1;}
    .seguimiento-page .tabla th,.seguimiento-page .tabla td{padding:10px;}
  }
  @media (max-width:480px){
    .seguimiento-page header .logo{height:36px;}
    .seguimiento-page header .title{font-size:16px;}
    .seguimiento-page .btn-azul,
    .seguimiento-page .btn-naranja,
    .seguimiento-page .btn-link{width:100%;text-align:center;}
    .seguimiento-page .btn-sm{padding:10px 12px;}
  }