/*  ============================================================================
    ESTRUCTURA Y COMPORTAMIENTO DEL PORTAL. Aquí NO hay ni un color literal:
    todos los colores viven en tema-codelink.css, el único archivo de tema
    (Bloque 0.7.3). Este archivo sólo coloca cosas en el espacio.

    Las medidas laterales usan propiedades LÓGICAS (inline-start en vez de
    left) para que el portal funcione también de derecha a izquierda, como
    pide el Bloque 0.7.
    ============================================================================ */

/* ------------------------------------------------------------ estructura */

.cdl-cuerpo {
    background-color: var(--bg-base);
    min-height: 100vh;
}

.cdl-principal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .cdl-principal {
        margin-inline-start: var(--lateral-ancho);
        transition: margin-inline-start .2s ease;
    }

    body.cdl-lateral-oculta .cdl-principal { margin-inline-start: 0; }
    /*  Ocultar la columna la saca por su propio lado: hacia la izquierda en
        escritura de izquierda a derecha, hacia la derecha en la contraria. */
    body.cdl-lateral-oculta .cdl-lateral { transform: translateX(-100%); visibility: hidden; }
    [dir="rtl"] body.cdl-lateral-oculta .cdl-lateral { transform: translateX(100%); }
}

/* ------------------------------------------------------- columna lateral */

.cdl-lateral {
    width: var(--lateral-ancho);
    /*  !important porque .offcanvas-lg EXPANDIDO (≥lg) declara
        background-color transparent !important y color inherit !important;
        sin esto la columna pierde su fondo oscuro en escritorio y el texto
        queda sin contraste, que es justo lo que el Bloque 0.7.2 prohíbe. */
    background-color: var(--lateral-fondo) !important;
    color: var(--lateral-texto) !important;
    border-inline-end: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .cdl-lateral {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        position: fixed;
        transition: transform .2s ease, visibility .2s ease;
    }
}

.cdl-marca {
    height: 3.5rem;
    color: var(--lateral-texto-activo);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

/*  La placa del logotipo: el símbolo de Codelink va SIEMPRE sobre Ink, que es
    su uso preferente en la hoja de marca. Sus corchetes son blancos y sobre un
    fondo claro desaparecerían; el logotipo no se recolorea, así que se le da
    el fondo que le corresponde. */
.cdl-marca-placa {
    background-color: var(--marca-placa);
    border-radius: .5rem;
    padding: .3rem;
    display: inline-flex;
    flex-shrink: 0;
}

.cdl-marca-simbolo { width: 1.6rem; height: 1.6rem; display: block; }

.cdl-marca-dte { color: var(--accion-texto); }

.cdl-lateral-cuerpo { overflow-y: auto; padding: .75rem 0 1.5rem; }

.cdl-grupo { margin-top: .75rem; }

.cdl-grupo-titulo {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lateral-texto);
    opacity: .75;
    padding: .25rem 1rem;
}

.cdl-enlace {
    color: var(--lateral-texto);
    padding: .5rem 1rem;
    border-inline-start: 3px solid transparent;
    border-radius: 0;
}

.cdl-enlace:hover, .cdl-enlace:focus-visible {
    color: var(--lateral-texto-activo);
    background-color: var(--bg-surface-alt);
}

.cdl-enlace.active {
    color: var(--lateral-texto-activo);
    background-color: var(--lateral-activo-tinte);
    border-inline-start-color: var(--action-primary);
    font-weight: 600;
}

/* El foco por teclado se ve SIEMPRE (Bloque 0.7.2). */
.cdl-enlace:focus-visible,
.cdl-boton-icono:focus-visible,
.cdl-salto:focus-visible {
    outline: 2px solid var(--foco-anillo);
    outline-offset: -2px;
}

/* -------------------------------------------------------------- encabezado */

.cdl-encabezado {
    height: 3.5rem;
    background-color: var(--encabezado-fondo);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1020;
    flex-shrink: 0;
}

.cdl-boton-icono {
    --bs-btn-border-color: transparent;
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
}

.cdl-contexto { min-width: 0; }

.cdl-contexto-bloque {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.cdl-contexto-etiqueta {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
}

.cdl-contexto-valor {
    font-size: .9rem;
    font-weight: 600;
    max-width: 18rem;
}

/* --------------------------------------------------------------- contenido */

.cdl-contenido {
    padding: 1.5rem;
    flex-grow: 1;
}

@media (max-width: 575.98px) {
    .cdl-contenido { padding: 1rem; }
    .cdl-contexto-valor { max-width: 9rem; }
}

/* --------------------------------------------------- panel de indicadores */

.cdl-indicador-titulo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary);
}

.cdl-indicador-numero {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
}

.cdl-indicador .stretched-link { position: relative; }

/* ---------------------------------------------------------------- tablas */

.cdl-tabla th a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.cdl-tabla th a:hover, .cdl-tabla th a:focus-visible { text-decoration: underline; }

.cdl-estado { font-size: .78rem; }

/*  EL CODIGO DE ENROLAMIENTO, PARA COPIARLO A UN PAPEL SIN EQUIVOCARSE.
    Monoespaciado para que los grupos queden alineados, con la letra separada
    para que nadie confunda dos caracteres pegados, y seleccionable de un
    golpe. El color sale de la variable de la marca: aqui no se escribe
    ninguno literal (Bloque 0.7.3). */
.cdl-codigo-enrolamiento {
    font-family: var(--bs-font-monospace);
    letter-spacing: .18em;
    color: var(--accion-texto);
    user-select: all;
    word-break: break-all;
}

/*  Controles que van DENTRO de una celda de acción —el desplegable de
    certificado y el motivo del retiro— y que sin un ancho mínimo se encogen
    hasta que no se lee lo que traen. En pantallas estrechas manda el 100%: la
    tabla ya scrollea, pero un control más ancho que su celda no. */
.cdl-ancho-14 { min-width: 14rem; max-width: 100%; }

/*  La ruta del nodo y los valores del informe de validación: monoespaciados y
    partibles, porque una ruta como /EnvioDTE/SetDTE/DTE[2]/Documento/... no
    cabe en una celda y cortarla con puntos suspensivos perdería justo el
    final, que es donde está el nodo culpable. */
.cdl-nodo {
    font-size: .8rem;
    overflow-wrap: anywhere;
}

/*  La glosa del SII se muestra TAL CUAL, sin capitalizar ni recortar por CSS
    que pierda información al copiarla. */
.cdl-glosa { font-family: var(--bs-font-monospace); font-size: .8rem; }

/*  El timbre PDF417 se lee por contraste: va siempre sobre blanco, en los dos
    modos, porque un lector óptico no entiende de temas. */
.cdl-timbre { max-width: 100%; image-rendering: pixelated; background: var(--brand-light); padding: .5rem; }

/* ------------------------------------------------------ página de acceso */

.cdl-acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(60rem 30rem at 110% -10%, var(--accion-tinte), transparent),
        radial-gradient(50rem 25rem at -10% 110%, var(--estado-info-fondo), transparent),
        var(--bg-base);
    padding: 1rem;
}

.cdl-acceso-tarjeta {
    width: 100%;
    max-width: 24rem;
}

/*  Un span .visually-hidden (posicionado absoluto) dentro de una tabla ancha
    se ESCAPA del recorte de .table-responsive si este no está posicionado, y
    estira la página entera: en tableta aparecía scroll horizontal (criterio 4,
    cazado por la prueba de resolución real). Con el contenedor posicionado,
    el absoluto queda contenido y el recorte vuelve a funcionar. */
.table-responsive {
    position: relative;
}

/*  ============================== LA BANDA DE BASE DE PRUEBAS ==============
    Deliberadamente fea y deliberadamente inevitable.

    Va arriba del todo, ocupa el ancho completo y NO tiene botón de cerrar: el
    aviso tiene que seguir ahí dentro de dos horas, cuando quien lo cerró ya no
    se acuerde y esté mirando un listado que cree de operación.

    Las rayas no son decoración: distinguen esto de cualquier aviso normal del
    portal —los de error, los de éxito— de un vistazo y sin leer. Un aviso que
    se parece a los demás se lee como los demás, o sea que se deja de leer.
    ------------------------------------------------------------------------ */
.cdl-banda-pruebas {
    position: sticky;
    top: 0;
    z-index: 1080;
    padding: .5rem 1rem;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--banda-pruebas-texto);
    border-bottom: 2px solid var(--banda-pruebas-borde);
    background-image: repeating-linear-gradient(
        45deg,
        var(--banda-pruebas-raya-clara), var(--banda-pruebas-raya-clara) 12px,
        var(--banda-pruebas-raya-oscura) 12px, var(--banda-pruebas-raya-oscura) 24px);
}

.cdl-banda-pruebas code {
    color: inherit;
    font-weight: 700;
    background: var(--banda-pruebas-realce);
    padding: 0 .25rem;
    border-radius: .2rem;
}

/*  Al imprimir NO se ve: una impresión no lleva la barra de navegación y la
    banda ahí sólo estorbaría. El riesgo que cubre es el de quien mira la
    pantalla, no el de quien lee un papel. */
@media print {
    .cdl-banda-pruebas { display: none; }
}