/* Estilos propios del portal. Lo general lo pone Tabler (Bootstrap 5.3 con su aspecto, servido desde
   wwwroot/lib/tabler, ver _Layout.cshtml); aqui solo esta lo que no da: la barra de progreso de subida,
   los detalles del explorador de ficheros y poco mas. */

/* ---------------------------------------------------------------- Tabler

   Tabler llama a sus variables --tblr-* en vez de --bs-*. Las paginas y este fichero usan las de Bootstrap
   en unos pocos sitios: se redirigen aqui, en cada raiz de tema, para que sigan cambiando con el claro y el
   oscuro. Si se usa una variable --bs-* nueva, se anade a la lista. */
:root, [data-bs-theme] {
    --bs-body-color: var(--tblr-body-color);
    --bs-body-bg: var(--tblr-body-bg);
    --bs-border-color: var(--tblr-border-color);
    --bs-border-color-translucent: var(--tblr-border-color-translucent);
    --bs-secondary-color: var(--tblr-secondary-color);
    --bs-secondary-bg: var(--tblr-secondary-bg);
    --bs-tertiary-bg: var(--tblr-tertiary-bg);
    --bs-primary: var(--tblr-primary);
}

/* El boton de plegar el menu ensena el icono de lo que va a hacer. */
.icono-desplegar { display: none; }
[data-bs-sidebar] .icono-plegar { display: none; }
[data-bs-sidebar] .icono-desplegar { display: inline-block; }

/* Las paginas titulan sus tarjetas con h2.h5. En Tabler el .h5 es mas pequeno que el texto y no se veia como
   titulo; se le devuelve el tamano de Bootstrap. */
.card h2.h5, .card h3.h5 { font-size: 1.0625rem; font-weight: 600; }
.modal-title.h5 { font-size: 1.0625rem; font-weight: 600; }
.modal-body h3.h6 { font-size: .9375rem; font-weight: 600; }

/* Las cajas alert-light (notas e indicaciones dentro de las tarjetas): Tabler les pone el texto en gris claro y
   sobre blanco no se leia. Con el color del texto normal, en claro y en oscuro. */
.alert.alert-light { --tblr-alert-color: var(--tblr-body-color); color: var(--tblr-body-color); }

/* ---------------------------------------------------------------- Modo oscuro */

/* Bootstrap 5.3 cambia todo solo con data-bs-theme="dark" (lo pone _Layout.cshtml). Lo unico
   que no adapta son las clases de color fijo que usa el portal: las cabeceras table-light y las
   etiquetas text-bg-dark, que en oscuro se funden con el fondo.

   El !important de las etiquetas NO es un parche que se pueda quitar: las utilidades .text-bg-*
   de Bootstrap se declaran ellas mismas con !important, asi que sin el no hay forma de cambiarlas
   desde aqui. La alternativa seria dejar de usar esas utilidades en las 28 paginas que las llevan
   y poner una clase propia; no compensa. */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --tblr-table-bg: var(--tblr-tertiary-bg);
    --tblr-table-color: var(--tblr-body-color);
    --tblr-table-border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .badge.text-bg-dark {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .badge.text-bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .explorador tbody tr:hover {
    background-color: rgba(110, 168, 254, .12);
}

/* ---------------------------------------------------------------- Textos de ejemplo de los campos */

/* Un campo vacío con su ejemplo tiene que verse vacío (Romeo, 29/09/2026): con el color de Bootstrap, y
   sobre todo en oscuro, «wcf-vpn.cliente.lan» se leía como si alguien ya lo hubiera escrito. En cursiva,
   con mucho menos contraste que el texto de verdad, y el campo vacío con el borde discontinuo. Los
   ejemplos, además, llevan «p. ej.» delante en el propio texto. */
.form-control::placeholder {
    color: #a3a9b0;
    font-style: italic;
    opacity: 1;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #5b626a;
}

.form-control:placeholder-shown:not(:focus) {
    border-style: dashed;
}

/* ---------------------------------------------------------------- Explorador de ficheros */

/* Filas de carpeta y fichero: el nombre manda, el resto se ajusta. */
.explorador td.nombre {
    max-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explorador td.marca,
.explorador th.marca {
    width: 1.75rem;
    padding-right: 0;
    text-align: center;
}

.explorador td.tam,
.explorador th.tam {
    text-align: right;
    white-space: nowrap;
}

.explorador td.fecha,
.explorador th.fecha {
    white-space: nowrap;
}

.explorador tbody tr:hover {
    background-color: rgba(13, 110, 253, .06);
}

/* Cabeceras ordenables (explorador con ordenar.js, listados con tablas.js). */
th.ordenable {
    cursor: pointer;
    user-select: none;
}

th.ordenable::after {
    content: "";
    display: inline-block;
    width: .8em;
    opacity: .5;
}

th.ordenable.asc::after { content: "▲"; }
th.ordenable.desc::after { content: "▼"; }

.tabla-buscador input { max-width: 22rem; }

/* ---------------------------------------------------------------- Subida en curso */

.subida-progreso {
    display: none;
}

.subida-progreso.activa {
    display: block;
}

.subida-progreso .progress {
    height: 1.25rem;
}

/* Nombre del fichero que se esta subiendo, sin romper el ancho de la tarjeta. */
.subida-nombre {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- Tablas del portal */

/* Anchos por tipo de columna. Sin esto, el navegador reparte el ancho a ojo y acaba partiendo
   un código de versión en tres líneas mientras una columna de texto corto se queda enorme.
   El truco del `width: 1%` con `nowrap` es el de toda la vida: la columna pide lo mínimo y el
   resto del ancho se lo llevan las que tienen texto de verdad. */
.col-codigo,
.col-version,
.col-fecha,
.col-tam,
.col-si-no,
.col-acciones {
    white-space: nowrap;
    width: 1%;
}

.col-tam {
    text-align: right;
}

.col-si-no {
    text-align: center;
}

/* Columna de texto largo: que se corte con puntos suspensivos en vez de estirar la tabla y
   sacar una barra horizontal. El `max-width: 0` es lo que hace que el navegador respete el
   ellipsis dentro de una tabla. */
.col-texto {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tirador para ajustar el ancho de una columna: una franja estrecha pegada al borde derecho de
   la cabecera. Solo se ve al pasar por encima, para no llenar la tabla de líneas. */
.table th.con-tirador {
    position: relative;
}

.tirador-columna {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

.table th.con-tirador:hover .tirador-columna {
    background-color: var(--bs-primary);
    opacity: .35;
}

/* Mientras se arrastra, el cursor manda en toda la página y no se selecciona texto sin querer. */
body.ajustando-columna {
    cursor: col-resize;
    user-select: none;
}

/* ---------------------------------------------------------------- Secciones plegables */

/* La cabecera entera es el interruptor, no un iconito de 16 px: en una ficha larga se pliega
   mucho y afinar el ratón cansa. El botón de acción de la derecha queda FUERA a propósito, que
   si no plegarías la sección cada vez que quieres pulsarlo. */
.plegable-cabecera {
    cursor: pointer;
    user-select: none;
}

.plegable-flecha {
    display: inline-block;
    transition: transform .15s ease;
    color: var(--bs-secondary-color);
}

.plegable-cabecera[aria-expanded="false"] .plegable-flecha {
    transform: rotate(-90deg);
}

/* ---------------------------------------------------------------- Release notes */

/* Cada item va en dos columnas: el tipo con ANCHO FIJO y el texto detrás. Con el badge en flujo
   normal cada línea empezaba en un sitio, porque "Corrección" mide más que "Mejora" y el texto
   se corría; así todos los títulos caen a plomo. El detalle va debajo del título, en la misma
   columna, y no pegado a él en la misma línea. */
.rn-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    column-gap: .75rem;
    align-items: start;
    padding: .4rem 0;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.rn-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.rn-tipo {
    width: 100%;
    font-weight: 500;
}

.rn-titulo {
    font-weight: 600;
}

/* Segunda fila de la rejilla, bajo el título: el tipo no se repite. El detalle se escribe en un
   textarea, así que los saltos de línea que ponga quien lo redacta se respetan al mostrarlo. */
.rn-desc {
    grid-column: 2;
    font-size: .9em;
    white-space: pre-line;
}

/* En pantalla estrecha no caben dos columnas: el tipo pasa a ser una etiqueta encima. */
@media (max-width: 575.98px) {
    .rn-item {
        grid-template-columns: 1fr;
        row-gap: .15rem;
    }

    .rn-tipo {
        width: auto;
        justify-self: start;
    }

    .rn-desc {
        grid-column: 1;
    }
}

/* El editor: el tipo estrecho, el título con todo el ancho que sobre y el detalle en un
   textarea debajo, que es donde se escribe de verdad. Antes eran cuatro columnas y el detalle
   era un input de una línea en un cuarto de pantalla. */
.rn-edit-tipo {
    width: 8.5rem;
    flex: 0 0 auto;
}

.rn-edit-desc {
    resize: vertical;
    min-height: 2.5rem;
}

/* Idioma del item (solo los productos multiidioma lo rellenan): selector estrecho en el editor
   y etiqueta pequeña delante del título en el listado. */
.rn-edit-idioma {
    width: 7.5rem;
    flex: 0 0 auto;
}

.rn-idioma {
    font-size: .7em;
    vertical-align: middle;
    margin-right: .25rem;
}

/* ---------------------------------------------------------------- Enlaces compartidos */

.enlace-url {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .8rem;
    word-break: break-all;
}

/* Tablas que en estrecho pasan a tarjetas: cada fila, una tarjeta; cada celda, un campo con su
   etiqueta delante. js/tarjetas.js pone la clase a todas las tablas del contenido (salvo las que
   lleven «sin-tarjetas») y la etiqueta de cada celda, sacada de la cabecera de su columna. Una columna
   con la cabecera vacía no lleva etiqueta: es para lo que se explica solo, como una insignia o los
   botones. */
@media (max-width: 767.98px) {
    table.tabla-tarjetas thead { display: none; }
    table.tabla-tarjetas, table.tabla-tarjetas tbody, table.tabla-tarjetas tr,
    table.tabla-tarjetas td, table.tabla-tarjetas tbody th {
        display: block;
        width: 100% !important;
    }
    table.tabla-tarjetas tr {
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem .75rem;
        background: var(--bs-body-bg);
    }
    table.tabla-tarjetas td, table.tabla-tarjetas tbody th { border: 0; padding: .15rem 0; white-space: normal !important; }
    /* Una tabla dentro de una tarjeta no lleva otro recuadro: sus filas se separan con una raya. */
    table.tabla-tarjetas table.tabla-tarjetas tr { border: 0; border-top: 1px solid var(--bs-border-color); border-radius: 0; margin: 0; padding: .35rem 0; }
    table.tabla-tarjetas td[data-etiqueta]:not([data-etiqueta=""])::before,
    table.tabla-tarjetas tbody th[data-etiqueta]:not([data-etiqueta=""])::before {
        content: attr(data-etiqueta);
        display: block;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--bs-secondary-color);
    }
    table.tabla-tarjetas .text-truncate { white-space: normal; }
}