/* ════════════════════════════════════════════════════════════════════════════════
   Pantallas de seguimiento de tres paneles (filtros a la izquierda, lista arriba a la
   derecha y detalle abajo): la comparten Seguimiento Cotizaciones y Seguimiento Orden
   Compra, así que vive aquí y no en el CSS aislado de una de las dos.
   ════════════════════════════════════════════════════════════════════════════════ */

.sc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.sc-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1E2D3D;
    margin: 0;
}

.sc-sub { font-size: .82rem; color: #64748b; }

.sc-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas:
        "filtros lista"
        "filtros detalle";
    gap: 12px;
    align-items: start;
}

.sc-lista { grid-area: lista; }
.sc-detalle { grid-area: detalle; }
.sc-filtros { grid-area: filtros; }

.sc-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.sc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: .5rem .85rem;
    background: #f1f5f9;
    border-bottom: 2px solid #26C6DA;
    font-weight: 700;
    font-size: .85rem;
    color: #334155;
}

.sc-panel-info { font-weight: 400; font-size: .78rem; color: #64748b; }

/* Cada panel se desplaza por dentro: así los tres siguen a la vista. */
.sc-panel-body {
    padding: .35rem .5rem .5rem;
    overflow: auto;
}

.sc-lista .sc-panel-body { max-height: 38vh; }
.sc-detalle .sc-panel-body { max-height: 38vh; }

.sc-vacio {
    margin: 0;
    padding: 1.1rem .5rem;
    text-align: center;
    color: #64748b;
    font-size: .84rem;
}

/* ───────── Grillas ───────── */
.sc-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    white-space: nowrap;
}

.sc-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #334155;
    font-weight: 600;
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid #cbd5e1;
}

.sc-grid td {
    padding: 4px 8px;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
}

.sc-num { text-align: right; font-variant-numeric: tabular-nums; }
.sc-grid code { color: #00ACC1; font-weight: 600; }

/* La lista alimenta el detalle: se marca la fila elegida. */
.sc-lista tbody tr { cursor: pointer; }
.sc-lista tbody tr:hover { background: #f1f5f9; }
.sc-lista tbody tr.is-sel { background: #e0f7fa; }
.sc-lista tbody tr.is-sel td { font-weight: 600; }

/* Vigencia pasada: se atenúa, no se oculta. */
.sc-vencida { color: #b45309; }

.sc-check { color: #0f9d58; font-weight: 700; }
.sc-check.off { color: #cbd5e1; }

/* Iconos del detalle: bonificación (estrella para tipbon='L', regalo el resto) y observación. */
.sc-bon { color: #b45309; }
.sc-bon.es-linea { color: #0f9d58; }
.sc-obs { color: #0f6e7d; cursor: help; }

/* Totales del pie, con las fórmulas del DataWindow. */
.sc-grid tfoot td {
    padding: 3px 8px;
    border: 0;
    color: #334155;
    font-size: .78rem;
}

.sc-grid tfoot tr:first-child td { border-top: 1px solid #cbd5e1; padding-top: 6px; }
.sc-grid tfoot tr.sc-total td { font-weight: 700; color: #0f172a; font-size: .84rem; }

/* ───────── Panel de filtros ───────── */
.sc-filtros .sc-panel-body { padding: .7rem .85rem 1rem; }

.sc-campo { margin-bottom: .6rem; }
.sc-campo .form-label { font-size: .76rem; margin-bottom: .15rem; color: #475569; }

.sc-radios {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .6rem;
}
.sc-radios .form-check-label { font-size: .82rem; }

/* La secuencia al lado de su radio, y el sentido del orden al lado de su columna:
   los dos pares quedan en una línea en vez de ocupar una fila cada uno. */
.sc-radio-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-radio-fila .form-check { margin-bottom: 0; flex: 0 0 auto; }

.sc-secuencia {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.sc-orden {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: .6rem;
}

.sc-asc { flex: 0 0 auto; }
.sc-asc .form-check-label { font-size: .82rem; }

.sc-sep { margin: .5rem 0 .7rem; }

/* Subtítulo "Orden": igual al encabezado del panel, pero dentro del cuerpo. */
.sc-sub-head {
    margin: .2rem -.85rem .6rem;
    padding: .35rem .85rem;
}

.sc-acciones {
    display: flex;
    gap: .5rem;
    margin-top: .9rem;
}

/* Pantallas angostas: los filtros pasan arriba y los paneles quedan uno bajo otro. */
@media (max-width: 1100px) {
    .sc-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "filtros"
            "lista"
            "detalle";
    }
    .sc-lista .sc-panel-body,
    .sc-detalle .sc-panel-body { max-height: 50vh; }
}