/* Pantallas del picking (Control de Dispensación y Control de Entrega): los filtros a la
   izquierda, y a la derecha la lista con el detalle debajo. Las clases salieron del aislamiento
   por componente porque las comparten los componentes de las dos pantallas. */

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

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

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

/* Los filtros ocupan la columna izquierda completa; la lista y el detalle se reparten la derecha. */
.cd-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas:
        "filtros lista"
        "filtros detalle";
    gap: 12px;
    align-items: start;
}

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

.cd-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;
}

.cd-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;
}

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

/* Barra del detalle: el conteo a la izquierda del botón, ambos al fondo derecho. */
.cd-panel-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

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

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

/* ───────── Grillas (mismo aire que el detalle de Facturación) ───────── */
.cd-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    white-space: nowrap;
}

.cd-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;
}

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

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

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

.cd-cod {
    margin-left: 6px;
    font-family: 'Consolas', monospace;
    font-size: .72rem;
    color: #94a3b8;
}

/* Campos de captura del picking: al ras, para no engordar la fila. */
.cd-pick {
    font-size: .78rem;
    padding: .1rem .35rem;
    height: auto;
}

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

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

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

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

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

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

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

/* Lista de responsables en el modal. */
.cd-resp-lista {
    max-height: 45vh;
    overflow-y: auto;
}
.cd-resp-fila { cursor: pointer; }

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

/* En el modo completado el detalle no se edita: se muestra como texto, alineado igual
   que los campos de captura del modo pendientes. */
.cd-solo-lectura { color: #334155; font-variant-numeric: tabular-nums; }

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

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

.cd-invnum {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

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

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