/*
 * Bandeja de control de calidad de lentes (Ventas → Control de calidad).
 *
 * Todo va acotado bajo .ccl-screen para no tocar el resto del ERP. El objetivo es que la
 * pantalla se pueda recorrer de un vistazo con 50-100 trabajos al día: los filtros no compiten
 * con el trabajo, el estado de cada orden se ve sin leer, y marcar conforme/rechazado es un
 * blanco grande y no un radio de 12 px.
 */

.ccl-screen {
    --ccl-borde: #e4e6ec;
    --ccl-texto-suave: #8f8f8f;
    --ccl-ok: #3e884f;
    --ccl-ok-suave: #eaf5ec;
    --ccl-mal: #c43d3d;
    --ccl-mal-suave: #fdeded;
    --ccl-aviso: #b8860b;
    --ccl-azul: #2f5fa8;
    --ccl-fondo-suave: #f7f8fa;
}

/* ============================================================
 * Cabecera
 * ========================================================== */

.ccl-screen .ccl-titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.ccl-screen .ccl-titulo h1 {
    margin-bottom: 0;
}

.ccl-screen .ccl-ayuda {
    color: var(--ccl-texto-suave);
    font-size: 0.85rem;
    margin: 6px 0 14px;
}

/* ============================================================
 * Barra de filtros
 * ========================================================== */

.ccl-screen .ccl-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ccl-borde);
    border-radius: 8px;
    margin-bottom: 14px;
}

/* Grupos segmentados (estado del control, rango rápido) */
.ccl-screen .ccl-seg {
    display: inline-flex;
    border: 1px solid var(--ccl-borde);
    border-radius: 6px;
    overflow: hidden;
}

.ccl-screen .ccl-seg button {
    border: 0;
    background: #fff;
    padding: 7px 14px;
    font-size: 0.82rem;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
}

.ccl-screen .ccl-seg button + button {
    border-left: 1px solid var(--ccl-borde);
}

.ccl-screen .ccl-seg button:hover {
    background: var(--ccl-fondo-suave);
}

.ccl-screen .ccl-seg button.activo {
    background: var(--ccl-azul);
    color: #fff;
}

/* Etiqueta que dice a qué se refieren los botones de periodo. */
.ccl-screen .ccl-etiqueta {
    font-size: 0.8rem;
    color: var(--ccl-texto-suave);
    white-space: nowrap;
}

.ccl-screen .ccl-periodo {
    color: var(--ccl-texto-suave);
    font-size: 0.82rem;
}

.ccl-screen .ccl-buscador {
    flex: 1 1 240px;
    min-width: 200px;
}

.ccl-screen .ccl-barra .ccl-sep {
    flex: 1 1 auto;
}

/* Panel de filtros avanzados */
.ccl-screen .ccl-avanzados {
    background: #fff;
    border: 1px solid var(--ccl-borde);
    border-radius: 8px;
    padding: 14px 14px 2px;
    margin: -6px 0 14px;
}

.ccl-screen .ccl-avanzados label {
    font-size: 0.78rem;
    color: var(--ccl-texto-suave);
    margin-bottom: 3px;
}

/* ============================================================
 * Resumen y avisos
 * ========================================================== */

.ccl-screen .ccl-resumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.88rem;
    color: #555;
}

.ccl-screen .ccl-resumen b {
    color: #222;
}

.ccl-screen .ccl-nota {
    font-size: 0.8rem;
    color: var(--ccl-texto-suave);
    margin-bottom: 10px;
}

/* ============================================================
 * Tarjeta de orden
 * ========================================================== */

.ccl-screen .ccl-tarjeta {
    background: #fff;
    border: 1px solid var(--ccl-borde);
    border-left: 4px solid var(--ccl-borde);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: border-color .15s, box-shadow .15s;
}

.ccl-screen .ccl-tarjeta.ccl-pendiente {
    border-left-color: var(--ccl-azul);
}

.ccl-screen .ccl-tarjeta.ccl-hecha {
    border-left-color: var(--ccl-ok);
}

.ccl-screen .ccl-tarjeta.ccl-abierta {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.ccl-screen .ccl-cab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.ccl-screen .ccl-cab:hover {
    background: var(--ccl-fondo-suave);
    border-radius: 6px;
}

.ccl-screen .ccl-orden {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ccl-azul);
    white-space: nowrap;
}

.ccl-screen .ccl-paciente {
    font-weight: 600;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccl-screen .ccl-meta {
    color: var(--ccl-texto-suave);
    font-size: 0.8rem;
    white-space: nowrap;
}

.ccl-screen .ccl-cab .ccl-crece {
    flex: 1 1 auto;
    min-width: 0;
}

.ccl-screen .ccl-chevron {
    color: #bbb;
    font-size: 0.8rem;
    transition: transform .15s;
}

.ccl-screen .ccl-tarjeta.ccl-abierta .ccl-chevron {
    transform: rotate(180deg);
}

/* Distintivos de estado */
.ccl-screen .ccl-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

.ccl-screen .ccl-badge-pendiente {
    background: #eef2f9;
    color: var(--ccl-azul);
}

.ccl-screen .ccl-badge-hecho {
    background: var(--ccl-ok-suave);
    color: var(--ccl-ok);
}

.ccl-screen .ccl-cuerpo {
    padding: 0 16px 16px;
}

/* ============================================================
 * Lentes: un bloque por lente
 * ========================================================== */

/* Antes era una tabla de siete (luego diez) columnas con min-width de 1420 px: para ver el lote,
   el vencimiento o el resultado había que desplazarse a la derecha. Ahora cada lente es un bloque
   con una rejilla de doce columnas donde cada campo lleva su etiqueta encima; todo cabe a lo
   ancho de la tarjeta y baja de línea solo cuando la pantalla es angosta. */
.ccl-screen .ccl-lentes {
    margin-bottom: 12px;
}

.ccl-screen .ccl-fila {
    padding: 10px 8px 12px;
    border-bottom: 1px solid #f0f1f4;
    border-radius: 6px;
}

.ccl-screen .ccl-fila:last-child {
    border-bottom: 0;
}

.ccl-screen .ccl-fila.ccl-rechazada {
    background: var(--ccl-mal-suave);
}

.ccl-screen .ccl-fila-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 8px;
}

.ccl-screen .ccl-ref {
    font-weight: 600;
    color: #222;
}

.ccl-screen .ccl-nombre {
    color: #666;
    font-size: 0.82rem;
    line-height: 1.3;
}

.ccl-screen .ccl-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px 10px;
}

.ccl-screen .ccl-f {
    min-width: 0;
}

.ccl-screen .ccl-g1 { grid-column: span 1; }
.ccl-screen .ccl-g2 { grid-column: span 2; }
.ccl-screen .ccl-g3 { grid-column: span 3; }
.ccl-screen .ccl-g4 { grid-column: span 4; }
.ccl-screen .ccl-g12 { grid-column: span 12; }

/* ============================================================
 * Línea separada por lote (opcional)
 * ========================================================== */

.ccl-screen .ccl-unidades {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ccl-texto-suave);
}

/* La opción es la excepción: una franja suave con la pregunta que la explica y el botón al lado,
   para que se entienda qué hace sin competir con los campos del lente. */
.ccl-screen .ccl-separar-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 12px;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px dashed var(--ccl-borde);
    border-radius: 6px;
    background: var(--ccl-fondo-suave);
}

.ccl-screen .ccl-separar-ayuda {
    font-size: 0.76rem;
    color: var(--ccl-texto-suave);
    line-height: 1.35;
}

.ccl-screen .ccl-separar {
    padding: 3px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 4px;
}

.ccl-screen .ccl-lotes-ayuda {
    margin: 0 0 6px;
    padding: 6px 10px;
    border-left: 3px solid var(--ccl-azul);
    background: #f4f8ff;
    border-radius: 4px;
    font-size: 0.76rem;
    color: #3d4a5c;
    line-height: 1.4;
}

/* Los lotes cuelgan de la línea con una guía a la izquierda, para leerse como parte de ella. */
.ccl-screen .ccl-lotes {
    margin: 10px 0 0 6px;
    padding-left: 12px;
    border-left: 2px solid var(--ccl-borde);
}

.ccl-screen .ccl-sublote {
    padding: 6px 8px 10px;
    border-radius: 6px;
}

.ccl-screen .ccl-sublote + .ccl-sublote {
    border-top: 1px dashed var(--ccl-borde);
}

.ccl-screen .ccl-sublote.ccl-rechazada {
    background: var(--ccl-mal-suave);
}

.ccl-screen .ccl-sublote-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ccl-screen .ccl-sublote-titulo {
    font-size: 0.75rem;
    font-weight: 600;
    color: #444;
}

.ccl-screen .ccl-quitar-lote {
    border: 0;
    background: transparent;
    color: #9aa0ab;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.ccl-screen .ccl-quitar-lote:hover {
    color: var(--ccl-mal);
}

.ccl-screen .ccl-lotes-pie {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ccl-screen .ccl-otro-lote {
    padding: 2px 0;
    font-size: 0.78rem;
}

.ccl-screen .ccl-suma {
    font-size: 0.78rem;
    font-weight: 600;
}

.ccl-screen .ccl-suma-ok { color: var(--ccl-ok); }
.ccl-screen .ccl-suma-mal { color: var(--ccl-mal); }

.ccl-screen .ccl-et {
    display: block;
    margin: 0 0 2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ccl-texto-suave);
    font-weight: 600;
    white-space: nowrap;
}

.ccl-screen .ccl-grid input.form-control {
    width: 100%;
    height: 34px;
    font-size: 0.85rem;
}

.ccl-screen .ccl-in-certificado:disabled {
    background: #f3f4f7;
    cursor: not-allowed;
}

.ccl-screen .ccl-aviso-guardado {
    margin: 4px 0 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--ccl-ok);
    background: var(--ccl-ok-suave);
    color: #2f6b3d;
    font-size: 0.82rem;
    border-radius: 4px;
}

/* Pantallas medianas: tres filas de cuatro, en vez de miniaturas ilegibles. */
@media (max-width: 1150px) {
    .ccl-screen .ccl-g1 { grid-column: span 2; }
    .ccl-screen .ccl-g2 { grid-column: span 4; }
    .ccl-screen .ccl-g3 { grid-column: span 6; }
    .ccl-screen .ccl-g4 { grid-column: span 12; }
}

/* Pantallas angostas: un campo por línea. */
@media (max-width: 640px) {
    .ccl-screen .ccl-g1,
    .ccl-screen .ccl-g2,
    .ccl-screen .ccl-g3,
    .ccl-screen .ccl-g4 { grid-column: span 12; }
}

/* Campo con su botón de "copiar a los demás" */
.ccl-screen .ccl-campo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ccl-screen .ccl-campo input {
    flex: 1 1 auto;
    min-width: 0;
}

.ccl-screen .ccl-copiar {
    border: 1px solid var(--ccl-borde);
    background: #fff;
    color: #9aa0ab;
    border-radius: 4px;
    width: 28px;
    height: 34px;
    flex: 0 0 28px;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}

.ccl-screen .ccl-copiar:hover {
    color: var(--ccl-azul);
    border-color: var(--ccl-azul);
    background: #f4f8ff;
}

/* Destello al recibir el valor copiado: sin él, pulsar el botón no parece hacer nada. */
.ccl-screen .ccl-copiado {
    animation: ccl-destello .6s ease-out;
}

@keyframes ccl-destello {
    from { background: #d6ecff; }
    to   { background: #fff; }
}

/* Etiqueta de procedencia del lote */
.ccl-screen .ccl-origen {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.ccl-screen .ccl-origen-inventario {
    background: #eef2f9;
    color: var(--ccl-azul);
}

/* Ámbar y no azul a propósito: el registro INVIMA no cambia, pero el lote es el de una entrega
   anterior y hay que confirmarlo. No es un dato tan firme como el del inventario. */
/* El registro viene del campo de la ficha de la referencia: dato mantenido a mano, tan fiable
   como el de inventario, así que comparte su azul. */
.ccl-screen .ccl-origen-referencia {
    background: #eaf1fb;
    color: var(--ccl-azul);
}

.ccl-screen .ccl-origen-historico {
    background: #fdf3e2;
    color: #9a6b12;
}

.ccl-screen .ccl-origen-sindato {
    background: #f1f1f1;
    color: #888;
}

/* ============================================================
 * Conforme / Rechazado
 * ========================================================== */

.ccl-screen .ccl-toggle {
    display: inline-flex;
    border: 1px solid var(--ccl-borde);
    border-radius: 6px;
    overflow: hidden;
}

.ccl-screen .ccl-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ccl-screen .ccl-toggle label {
    margin: 0;
    padding: 7px 13px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.ccl-screen .ccl-toggle label + input + label {
    border-left: 1px solid var(--ccl-borde);
}

.ccl-screen .ccl-toggle label:hover {
    background: var(--ccl-fondo-suave);
}

.ccl-screen .ccl-toggle input:checked + label.ccl-si {
    background: var(--ccl-ok);
    color: #fff;
}

.ccl-screen .ccl-toggle input:checked + label.ccl-no {
    background: var(--ccl-mal);
    color: #fff;
}

/* El foco de teclado tiene que verse: el input real está oculto. */
.ccl-screen .ccl-toggle input:focus-visible + label {
    box-shadow: inset 0 0 0 2px var(--ccl-azul);
}

.ccl-screen .ccl-observacion:disabled {
    background: #fafafa;
    border-style: dashed;
}

/* ============================================================
 * Pie del control
 * ========================================================== */

.ccl-screen .ccl-acciones-lote {
    margin-bottom: 14px;
}

.ccl-screen .ccl-acciones-lote button {
    font-size: 0.78rem;
    padding: 4px 12px;
}

.ccl-screen .ccl-pie {
    background: var(--ccl-fondo-suave);
    border: 1px solid var(--ccl-borde);
    border-radius: 6px;
    padding: 14px 14px 4px;
}

.ccl-screen .ccl-pie label {
    font-size: 0.78rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 3px;
}

.ccl-screen .ccl-pie .form-control {
    height: 36px;
    font-size: 0.86rem;
}

.ccl-screen .ccl-pie textarea.form-control {
    height: auto;
}

/* select2 (buscador del proveedor) a la misma altura que el resto de campos del pie. */
.ccl-screen .ccl-pie .select2-container .select2-selection--single,
.ccl-screen .ccl-avanzados .select2-container .select2-selection--single {
    height: 36px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
}

.ccl-screen .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    font-size: 0.86rem;
    padding-left: 10px;
}

/* El proyecto inicializa select2 con theme:"bootstrap" pero solo carga select2.min.css, que trae
   las reglas del tema "default": la flecha se queda en `display:inline` con ancho automático y el
   triángulo no llega a verse, de modo que el campo parece una caja de texto. Se reposiciona aquí,
   acotado a esta pantalla para no alterar el resto del ERP. */
.ccl-screen .select2-container .select2-selection--single {
    position: relative;
}

.ccl-screen .select2-container .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 0;
    right: 4px;
    width: 20px;
    height: 34px;
    display: block;
}

/* El desplegable se abre fuera de .ccl-screen (select2 lo cuelga del body), así que estas dos
   reglas no pueden ir acotadas como las demás. */
.select2-results__option {
    font-size: 0.86rem;
}

.ccl-screen .ccl-formula {
    font-family: "Courier New", monospace;
    font-size: 0.8rem;
    line-height: 1.35;
    background: #fff;
}

.ccl-screen .ccl-formula-vacia {
    color: var(--ccl-texto-suave);
}

.ccl-screen .ccl-guardar-fila {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.ccl-screen .ccl-guardar {
    min-width: 200px;
    font-weight: 600;
}

/* ============================================================
 * Búsqueda en curso
 * ========================================================== */

/* Mientras se busca, la barra se atenúa y no acepta clics: con periodos amplios la respuesta
   tarda, y sin esto el usuario vuelve a pulsar y encadena consultas. */
.ccl-screen .ccl-barra.ccl-ocupada {
    opacity: .6;
    pointer-events: none;
}

.ccl-screen .ccl-buscando {
    text-align: center;
    padding: 46px 20px;
    color: var(--ccl-texto-suave);
    background: #fff;
    border: 1px solid var(--ccl-borde);
    border-radius: 8px;
}

.ccl-screen .ccl-buscando p {
    margin: 12px 0 2px;
    font-weight: 600;
    color: #555;
}

.ccl-screen .ccl-spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border: 3px solid #e4e6ec;
    border-top-color: var(--ccl-azul);
    border-radius: 50%;
    animation: ccl-gira .8s linear infinite;
}

@keyframes ccl-gira {
    to { transform: rotate(360deg); }
}

/* ============================================================
 * Estados vacíos
 * ========================================================== */

.ccl-screen .ccl-vacio {
    text-align: center;
    padding: 46px 20px;
    color: var(--ccl-texto-suave);
    background: #fff;
    border: 1px dashed var(--ccl-borde);
    border-radius: 8px;
}

.ccl-screen .ccl-vacio .ccl-vacio-icono {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 10px;
    color: #cfd3dc;
}

.ccl-screen .ccl-vacio b {
    color: #444;
}

/* ============================================================
 * Pantallas estrechas
 * ========================================================== */

@media (max-width: 991px) {
    .ccl-screen .ccl-nombre {
        max-width: 220px;
        white-space: normal;
    }

    .ccl-screen .ccl-cab {
        flex-wrap: wrap;
        gap: 6px 12px;
    }
}