/* ============================================================
   SearchMAS — reputacion.css
   Estilos específicos del template Agente de Reputación (tr-*)
   Depende de producto.css (clases tp-* compartidas)
   ============================================================ */

/* ── Hero: H1 más chico para que entre en 3 líneas ──────────── */
.tp-hero .tp-h1 {
    font-size: clamp(28px, 3.2vw, 48px);
}

/* ── Panel inbox de reseñas ─────────────────────────────────── */
.tr-panel {
    background: #0f1520;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 80px rgba(0,0,0,.5);
}

.tr-chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.tr-chrome-dots { display: flex; gap: 5px; }
.tr-chrome-dots span { width: 8px; height: 8px; border-radius: 50%; }
.tr-chrome-dots span:nth-child(1) { background: #FF5F57; }
.tr-chrome-dots span:nth-child(2) { background: #FEBC2E; }
.tr-chrome-dots span:nth-child(3) { background: #28C840; }

.tr-chrome-url {
    flex: 1;
    font-size: 10px;
    color: rgba(255,255,255,.32);
    text-align: center;
    font-family: monospace;
    letter-spacing: .3px;
}

.tr-agent-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    color: #00d4aa;
    letter-spacing: .5px;
    white-space: nowrap;
}
.tr-alive-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #00d4aa;
    animation: pulseDot 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* Panel body */
.tr-panel-body {
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
}

.tr-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}
.tr-pt-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.tr-new-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    background: rgba(204,255,0,.1);
    color: #CCFF00;
    border: 1px solid rgba(204,255,0,.22);
    border-radius: 100px;
    padding: 3px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Step cards: alineación vertical centrada */
.tp-how .tp-sc {
    align-items: center;
}

/* ── Resultados: 3 stats a ancho completo ────────────────────── */
.tp-res .tp-stats-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Impedir que el diagrama fuerce el grid a crecer más que su contenedor.
   Sin min-width:0 el track 1fr toma el min-content del diagrama (~430px)
   y desborda en mobile. overflow:hidden clipea el resto dentro del nodo. */
.tp-how .tp-flow {
    min-width: 0;
    overflow: hidden;
}

/* ── Diagrama en cruz ────────────────────────────────────────── */
.tr-flow-cross {
    display: grid;
    grid-template-columns: 1fr 100px min-content 100px 1fr;
    grid-template-rows: 100px 52px 60px 52px 100px;
    gap: 0;
    align-items: stretch;
}

/* Hub en cruz: stretch completo para que las líneas lleguen */
.tr-hub-cross {
    align-self: stretch;
    display: flex;
    align-items: center;
}
.tr-hub-cross .tp-fn-inner {
    flex: 1;
    height: 100%;
    padding: 0;
    align-items: stretch;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Conector vertical bidireccional */
.tr-cv-bidir {
    width: 2px;
    height: 100%;
    min-height: 52px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(0,242,255,.5), rgba(204,255,0,.5));
    border-radius: 1px;
    position: relative;
    overflow: hidden;
    align-self: stretch;
}
.tr-cv-bidir::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: #00F2FF;
    border-radius: 50%;
    left: -3px;
    box-shadow: 0 0 8px rgba(0,242,255,.9);
    animation: tpFlowV 2s linear infinite;
}
.tr-cv-bidir::before {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    background: #CCFF00;
    border-radius: 50%;
    left: -2px;
    box-shadow: 0 0 6px rgba(204,255,0,.9);
    animation: tpFlowV 2s linear infinite reverse;
    animation-delay: 1s;
}

/* Nodos no-hub: estirados para igualar dimensiones con hub */
.tr-flow-cross .tp-fn:not(.tr-hub-cross) {
    align-self: stretch;
}

/* Conector vertical con etiqueta (Alertas ↓) */
.tr-cv-labeled {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    align-self: stretch;
    justify-content: center;
    padding: 3px 0;
}
.tr-cv-labeled .tr-cv-bidir {
    flex: 1;
    height: auto;
    min-height: 0;
}

/* Conector horizontal doble (Clientes ↔ Hub) */
.tr-ch-double {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-self: center;
    padding: 2px 0;
}

/* Conector horizontal simple (Hub → Equipo) */
.tr-ch-single {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    align-self: center;
}

/* Etiqueta de conector */
.tr-ch-lbl {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255,255,255,.38);
    letter-spacing: .3px;
    white-space: nowrap;
    text-align: center;
}

/* Línea de conector horizontal */
.tr-ch-line {
    height: 2px;
    background: linear-gradient(90deg, rgba(0,242,255,.5), rgba(204,255,0,.5));
    border-radius: 1px;
    position: relative;
    overflow: hidden;
}
.tr-ch-line::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: #00F2FF;
    border-radius: 50%;
    top: -3px;
    box-shadow: 0 0 8px rgba(0,242,255,.9);
    animation: tpFlowH 1.8s linear infinite;
}
.tr-ch-line-rev {
    background: linear-gradient(270deg, rgba(0,242,255,.5), rgba(204,255,0,.5));
}
.tr-ch-line-rev::after {
    animation: trFlowHRev 1.8s linear infinite;
}
@keyframes trFlowHRev {
    from { left: 100%; }
    to   { left: -8px; }
}

/* ── Lista estática de reseñas ───────────────────────────────── */
.tr-reviews-list {
    display: flex;
    flex-direction: column;
}

/* ── Review rows — layout horizontal igual que campaign rows ── */
.tr-review {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.tr-rv-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tr-rv-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.82);
}
.tr-rv-src {
    font-size: 9px;
    color: rgba(255,255,255,.32);
}

.tr-rv-stars-inline {
    font-size: 10px;
    color: #FBBC05;
    white-space: nowrap;
    flex-shrink: 0;
}
.tr-stars-mid { color: #FBBC05; }
.tr-stars-low { color: rgba(251,188,5,.45); }

.tr-rv-status {
    font-size: 9px;
    font-weight: 600;
    border-radius: 100px;
    padding: 2px 7px;
    letter-spacing: .3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tr-s-done    { background: rgba(0,212,170,.1);  color: #00d4aa; border: 1px solid rgba(0,212,170,.22); }
.tr-s-typing  { background: rgba(0,242,255,.08); color: #00F2FF; border: 1px solid rgba(0,242,255,.22); }
.tr-s-pending { background: rgba(251,188,5,.1);  color: #FBBC05; border: 1px solid rgba(251,188,5,.22); }

/* ── Metrics bar ─────────────────────────────────────────────── */
.tr-panel-mets {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 2px;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 6px;
}
.tr-pmet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    padding: 0 4px;
    border-right: 1px solid rgba(255,255,255,.06);
}
.tr-pmet:last-child { border-right: none; }
.tr-pmet-val {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1;
}
.tr-pmet-lime .tr-pmet-val { color: #CCFF00; }
.tr-pmet-lbl {
    font-size: 8px;
    color: rgba(255,255,255,.32);
    text-align: center;
    line-height: 1.3;
}

/* ── Platforms node (diagrama) ───────────────────────────────── */
.tr-plat-logos {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.tr-ta-icon {
    width: 14px; height: 14px;
    border-radius: 3px;
    background: #34E0A1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: #0a2a1e;
    line-height: 1;
}

.tp-fn-plat .tp-fn-inner {
    border-color: rgba(66,133,244,.28);
    background: rgba(66,133,244,.05);
}
.tp-fn-plat .tp-fn-inner:hover {
    border-color: rgba(66,133,244,.55);
    box-shadow: 0 12px 28px rgba(66,133,244,.12);
}

/* ── Alert badge ─────────────────────────────────────────────── */
.tp-b-alert {
    background: rgba(251,188,5,.12);
    color: #d4970a;
    border: 1px solid rgba(251,188,5,.28);
}

/* Hub-row side nodes — extra padding so they breathe in the 60px row */
.tp-fn-clientes .tp-fn-inner,
.tp-fn-contexto .tp-fn-inner {
    padding: 20px 14px;
}

/* Hub pill — altura fija para consistencia con Agente de Anuncios */
.tr-hub-cross .tp-fn-hub-pill {
    align-self: center;
    max-height: 60px !important;
}

/* ── Responsive: colapsar a columna única ────────────────────── */
@media (max-width: 1024px) {
    .tp-how .tp-how-layout { grid-template-columns: 1fr; }
    .tp-how .tp-sec-head   { text-align: center; }
}

/* ── Mobile: step cards centrados ───────────────────────────── */
@media (max-width: 768px) {
    .tp-how .tp-how-layout { justify-items: center; }
    .tp-how .tp-steps-col  { max-width: 480px; margin: 0 auto; width: 100%; }
}

/* ── Mobile: diagrama compacto (misma lógica que agente-de-anuncios) */
@media (max-width: 640px) {
    .tr-flow-cross {
        grid-template-columns: 1fr 32px min-content 32px 1fr;
        grid-template-rows: 80px 40px 60px 40px 80px;
    }
    .tr-hub-cross .tp-fn-hub-pill                { font-size: 9px; padding: .25rem .55rem; }
    .tr-hub-cross .tp-fn-hub-pill .sm-pill-dot   { width: 5px; height: 5px; }
    .tr-flow-cross .tp-fn-inner                  { padding: 8px 4px; }
    .tr-flow-cross .tp-fn-name                   { font-size: 8px; }
    .tr-ch-lbl                                   { display: none; }
    /* Forzar mismo alto y ancho en nodos laterales */
    .tp-fn-clientes,
    .tp-fn-contexto                              { align-self: stretch; }
    .tp-fn-clientes .tp-fn-inner,
    .tp-fn-contexto .tp-fn-inner                 { width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; }
}