/* ════════════════════════════════════════════════════════════════════════════
   seguimiento.css — Transotel.Web
   Ubicación: wwwroot/css/seguimiento.css
   Estilos específicos del panel público de tracking
   ════════════════════════════════════════════════════════════════════════════ */

/* ── HERO COMPACTO ────────────────────────────────────────────────────────── */
.seg-hero {
    background: linear-gradient(135deg, var(--color-teal-darker) 0%, var(--color-azul) 100%);
    padding:    2.5rem 0 2rem;
    color:      var(--color-white);
}

.seg-hero-inner {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}
@media (min-width: 768px) {
    .seg-hero-inner {
        flex-direction:  row;
        align-items:     center;
        gap:             3rem;
    }
    .seg-hero-text    { flex: 0 0 38%; }
    .seg-search-form  { flex: 1; }
}

.seg-hero h1 {
    font-size:     clamp(1.5rem, 3vw, 2rem);
    color:         var(--color-white);
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    margin-bottom: 0.5rem;
}
.seg-hero .lead { color: rgba(255,255,255,0.80); margin: 0; }

/* ── FORMULARIO DE BÚSQUEDA ───────────────────────────────────────────────── */
.seg-search-form { width: 100%; }

.seg-search-group {
    display:  flex;
    position: relative;
    gap:      0;
}

.seg-search-icon {
    position:   absolute;
    left:       0.9rem;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--color-mid-gray);
    pointer-events: none;
    font-size:  1.1rem;
    z-index:    1;
}

.seg-search-input {
    flex:          1;
    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
    border-right:  none !important;
    padding-left:  2.75rem !important;
    font-size:     1rem !important;
    height:        48px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight:   var(--font-weight-medium);
    background:    rgba(255,255,255,0.97);
}
.seg-search-input:focus { z-index: 1; }

.seg-search-btn {
    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
    height:        48px;
    padding:       0 1.5rem !important;
    font-size:     0.95rem !important;
    white-space:   nowrap;
    flex-shrink:   0;
}

.seg-search-hint {
    font-size:   var(--font-size-sm);
    color:       rgba(255,255,255,0.65);
    margin-top:  0.5rem;
    margin-bottom: 0;
}


/* ── ÁREA DE RESULTADOS ───────────────────────────────────────────────────── */
.seg-results { padding: 2rem 0 3rem; }

/* ── PEDIDO NO ENCONTRADO ─────────────────────────────────────────────────── */
.seg-not-found {
    text-align:  center;
    padding:     3rem 1rem;
    max-width:   500px;
    margin:      0 auto;
}
.seg-not-found-icon {
    font-size:   4rem;
    color:       var(--color-danger);
    display:     block;
    margin-bottom: 1rem;
}
.seg-not-found h2 { margin-bottom: 0.5rem; }

.seg-not-found-tips {
    text-align:  left;
    display:     flex;
    flex-direction: column;
    gap:         0.4rem;
    margin-top:  1rem;
    background:  var(--color-off-white);
    border-radius: var(--border-radius);
    padding:     1rem 1.25rem;
    font-size:   var(--font-size-sm);
}
.seg-not-found-tips li {
    display:     flex;
    align-items: flex-start;
    gap:         0.5rem;
    color:       var(--color-dark-gray);
}
.seg-not-found-tips .fa-check {
    color:      var(--color-teal);
    margin-top: 3px;
    flex-shrink: 0;
}

/* ── TARJETA DE PEDIDO ────────────────────────────────────────────────────── */
.seg-card {
    max-width:    780px;
    margin:       0 auto;
    border-radius: var(--border-radius-lg) !important;
    box-shadow:   var(--shadow-lg) !important;
}

.seg-card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             1rem;
    padding:         1.25rem 1.5rem !important;
    background:      linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%) !important;
    color:           var(--color-white) !important;
    border-bottom:   none !important;
    border-radius:   var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}

.seg-pedido-id {
    display:     flex;
    align-items: center;
    gap:         1rem;
}
.seg-pedido-id > i {
    font-size:   2.5rem;
    opacity:     0.85;
}
.seg-pedido-label {
    font-size:  0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:      rgba(255,255,255,0.70) !important;
    margin:     0;
}
.seg-pedido-numero {
    font-size:     1.35rem;
    font-weight:   var(--font-weight-bold);
    color:         var(--color-white);
    letter-spacing: 0.04em;
    margin:        0;
}

.seg-estado-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.5rem 1.1rem;
    border-radius: var(--border-radius-pill);
    font-weight:   var(--font-weight-semibold);
    font-size:     var(--font-size-sm);
    background:    rgba(255,255,255,0.15) !important;
    color:         var(--color-white) !important;
    border:        1px solid rgba(255,255,255,0.30);
}

.seg-card-body { padding: 1.75rem !important; }

/* ── RUTA ORIGEN → DESTINO ────────────────────────────────────────────────── */
.seg-ruta {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-bottom:  2rem;
}
@media (min-width: 576px) {
    .seg-ruta {
        flex-direction:  row;
        align-items:     center;
        gap:             1rem;
    }
    .seg-ruta-punto { flex: 1; }
}

.seg-ruta-punto {
    display:       flex;
    align-items:   flex-start;
    gap:           0.875rem;
    padding:       1rem 1.25rem;
    background:    var(--color-off-white);
    border-radius: var(--border-radius);
    border:        1px solid var(--color-light-gray);
}

.seg-ruta-icon {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.25rem;
    flex-shrink:     0;
}
.seg-ruta-icon-origen  { background: var(--color-teal-alpha15); color: var(--color-teal-dark); }
.seg-ruta-icon-destino { background: var(--color-dorado-alpha20); color: var(--color-azul); }

.seg-ruta-label {
    font-size:  0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin:     0;
}
.seg-ruta-valor {
    font-weight:   var(--font-weight-semibold);
    font-size:     0.95rem;
    margin:        0.15rem 0;
}
.seg-ruta-fecha {
    font-size: 0.8rem;
    margin:    0;
    display:   flex;
    align-items: center;
    gap:       0.3rem;
}

.seg-ruta-linea {
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.5rem;
    color:           var(--color-teal);
    padding:         0.5rem;
    flex-shrink:     0;
}
@media (max-width: 575.98px) {
    .seg-ruta-linea { transform: rotate(90deg); }
}

/* ── BULTOS ───────────────────────────────────────────────────────────────── */
.seg-bultos { margin-bottom: 2rem; }
.seg-section-title {
    font-size:     1rem;
    font-weight:   var(--font-weight-semibold);
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    margin-bottom: 1rem;
    color:         var(--color-azul);
}

.seg-bultos-list {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}
.seg-bulto-item {
    display:         flex;
    align-items:     center;
    gap:             0.875rem;
    padding:         0.75rem 1rem;
    background:      var(--color-off-white);
    border-radius:   var(--border-radius);
    border:          1px solid var(--color-light-gray);
}
.seg-bulto-num {
    width:           32px;
    height:          32px;
    background:      var(--color-teal);
    color:           var(--color-white);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.75rem;
    font-weight:     var(--font-weight-bold);
    flex-shrink:     0;
}
.seg-bulto-info { flex: 1; }
.seg-bulto-desc { font-size: var(--font-size-sm); margin: 0 0 0.2rem; font-weight: var(--font-weight-medium); }
.seg-bulto-dims { font-size: 0.78rem; margin: 0; }
.seg-bulto-label { font-size: 0.7rem; flex-shrink: 0; }

/* ── TIMELINE ─────────────────────────────────────────────────────────────── */
.seg-timeline { margin-bottom: 1.5rem; }

.timeline-list {
    position:      relative;
    padding-left:  1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0;
}
.timeline-list::before {
    content:    '';
    position:   absolute;
    left:       7px;
    top:        12px;
    bottom:     12px;
    width:      2px;
    background: linear-gradient(to bottom, var(--color-teal), var(--color-light-gray));
    border-radius: 2px;
}

.timeline-item {
    position:    relative;
    padding:     0 0 1.25rem 1.25rem;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
    position:  absolute;
    left:      -1.5rem;
    top:       2px;
    color:     var(--color-mid-gray);
    font-size: 0.875rem;
    background: var(--color-white);
    padding:   2px 0;
}
.timeline-item-active .timeline-dot { color: var(--color-teal); }
.timeline-item-active .timeline-date,
.timeline-item-active .timeline-estado { font-weight: var(--font-weight-semibold); }

.timeline-date {
    font-size:   0.78rem;
    color:       var(--color-text-muted);
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    margin-bottom: 0.2rem;
}
.timeline-estado {
    font-size:   0.9rem;
    color:       var(--color-text);
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    margin:      0 0 0.2rem;
}
.timeline-comentario { font-size: 0.82rem; margin: 0; }

/* ── TRACKING EXTERNO ─────────────────────────────────────────────────────── */
.seg-external-tracking {
    padding-top:   1rem;
    border-top:    1px solid var(--color-light-gray);
    margin-top:    1rem;
}

/* ── PIE DE TARJETA ───────────────────────────────────────────────────────── */
.seg-card-footer {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    flex-wrap:       wrap !important;
    gap:             0.5rem !important;
}
.seg-update-hint { font-size: var(--font-size-sm); margin: 0; }

/* ── ESTADO VACÍO ─────────────────────────────────────────────────────────── */
.seg-empty {
    text-align:  center;
    padding:     3rem 1rem;
    max-width:   480px;
    margin:      0 auto;
}
.seg-empty-icon {
    display:       flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.seg-empty h2 { margin-bottom: 0.5rem; color: var(--color-azul); }
.seg-empty p  { color: var(--color-text-muted); }

/* ── FAQ COMPACTO ─────────────────────────────────────────────────────────── */
.faq-compact {
    max-width:      680px;
    margin:         0 auto;
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.faq-item {
    background:    var(--color-white);
    border:        1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    overflow:      hidden;
    transition:    box-shadow var(--transition-fast);
}
.faq-item[open] {
    box-shadow:   var(--shadow-sm);
    border-color: var(--color-teal);
}

.faq-item summary {
    display:        flex;
    align-items:    center;
    gap:            0.6rem;
    padding:        0.875rem 1.25rem;
    font-weight:    var(--font-weight-medium);
    cursor:         pointer;
    user-select:    none;
    list-style:     none;
    color:          var(--color-azul);
    transition:     background-color var(--transition-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--color-teal-alpha15); }
.faq-item[open] summary { color: var(--color-teal-dark); }
.faq-item[open] summary .fa-chevron-right { transform: rotate(90deg); }
.faq-item summary .fa-chevron-right {
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.faq-item p {
    padding:    0 1.25rem 1rem;
    font-size:  var(--font-size-sm);
    color:      var(--color-dark-gray);
    margin:     0;
    line-height: 1.6;
}