/* ============================================================
   Identidad institucional (Gobierno de Chile / digital.gob.cl)
   aplicada sobre Bootstrap 5.3 sin migrar de framework.
   Paleta y tipografia segun framework.digital.gob.cl (colors.html / typography.html).
   ============================================================ */

/* Fuentes servidas desde el propio sitio (Content/fonts, licencia SIL OFL 1.1) en vez de
   Google Fonts: sin dependencia de internet ni envio de IP de usuarios a terceros, y la
   CSP (Web.config) puede quedar en font-src 'self'. Subconjunto latin (incluye tildes y ñ). */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-slab-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-slab-latin-700-normal.woff2') format('woff2');
}

:root {
    --gobcl-primary: #006FB3;
    --gobcl-primary-dark: #00507F;
    --gobcl-secondary: #FE6565;
    --gobcl-tertiary: #0A132D;
    --gobcl-accent: #A8B7C7;
    --gobcl-neutral: #EEEEEE;
    --gobcl-gray-dark: #4A4A4A;
    --gobcl-gray-medium: #8A8A8A;
    --gobcl-black: #111111;

    /* Variables de utilidad de Bootstrap que si se leen en tiempo de ejecucion
       (bg-primary, text-primary, border-primary, links) */
    --bs-primary: var(--gobcl-primary);
    --bs-primary-rgb: 0, 111, 179;
    --bs-link-color: var(--gobcl-primary);
    --bs-link-color-rgb: 0, 111, 179;
    --bs-link-hover-color: var(--gobcl-primary-dark);
    --bs-link-hover-color-rgb: 0, 80, 127;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: var(--gobcl-gray-dark);
}

h1, h2, h3, h5, h6,
.h1, .h2, .h3, .h5, .h6 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
    color: var(--gobcl-black);
}

h4, .h4 {
    font-family: 'Roboto', sans-serif;
    color: var(--gobcl-black);
}

/* Componentes compilados de Bootstrap fijan sus propios colores; se sobrescriben
   explicitamente para que la identidad institucional se aplique de forma confiable. */

.navbar.bg-primary {
    background-color: var(--gobcl-primary) !important;
}

.btn-primary {
    --bs-btn-bg: var(--gobcl-primary);
    --bs-btn-border-color: var(--gobcl-primary);
    --bs-btn-hover-bg: var(--gobcl-primary-dark);
    --bs-btn-hover-border-color: var(--gobcl-primary-dark);
    --bs-btn-active-bg: var(--gobcl-primary-dark);
    --bs-btn-active-border-color: var(--gobcl-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--gobcl-primary);
    --bs-btn-border-color: var(--gobcl-primary);
    --bs-btn-hover-bg: var(--gobcl-primary);
    --bs-btn-hover-border-color: var(--gobcl-primary);
    --bs-btn-active-bg: var(--gobcl-primary);
    --bs-btn-active-border-color: var(--gobcl-primary);
}

.text-primary {
    color: var(--gobcl-primary) !important;
}

.border-primary {
    border-color: var(--gobcl-primary) !important;
}

.card {
    border-color: var(--gobcl-accent);
}

.card-header {
    background-color: var(--gobcl-neutral);
    color: var(--gobcl-black);
}

/* Encabezado destacado: usa el azul institucional en vez del neutro por defecto
   de ".card-header", para darle mayor jerarquia visual a secciones principales
   como "Proyectos de Ley" en la Bandeja. */
.gobcl-card-header-highlight {
    background-color: var(--gobcl-primary);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.15rem;
}

a,
.btn-link {
    color: var(--gobcl-primary);
}

a:hover,
.btn-link:hover {
    color: var(--gobcl-primary-dark);
}

/* Header institucional */

.gobcl-header .navbar-brand {
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: 400;
}

.gobcl-logo {
    height: 40px;
    width: auto;
    border: 1px solid #FFFFFF;
    border-radius: 0;
}

.gobcl-brand-text {
    line-height: 1.15;
}

/* Usuario conectado y "Cerrar sesion" siempre visibles (sin menu hamburguesa). */
.gobcl-header-usuario {
    margin-left: auto;
}

/* Agrupa "Mantenedor de usuarios" (si el usuario tiene acceso, ver
   Autorizacion.PuedeAdministrarUsuarios en Site.Master.cs) junto con el bloque de
   usuario/cerrar sesion, para poder alinear ambos juntos a la derecha en escritorio
   sin romper el apilado vertical que ya funciona bien en mobile.
   "display:contents" en mobile hace que este wrapper "desaparezca" del layout: cada
   hijo queda como si fuera hijo directo de ".container-fluid", exactamente igual que
   antes de que existiera este wrapper (el toggle/expandido del menu no cambia en nada).
   Solo en escritorio (bloque >= 992px mas abajo) el wrapper pasa a ser un contenedor
   flex real. */
.gobcl-header-derecha {
    display: contents;
}

/* Mobile: titulo institucional en 2 lineas y usuario en una fila propia bajo el logo. */
@media (max-width: 991.98px) {
    .gobcl-header .navbar-brand {
        margin-right: 0;
        min-width: 0;
    }

    .gobcl-brand-text {
        font-size: 0.75rem;
    }

    .gobcl-header-usuario {
        width: 100%;
        margin-left: 0;
        padding-top: 0.35rem;
        padding-bottom: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }
}

/* Escritorio: ".navbar-collapse" (Bootstrap) trae "flex-grow:1" de fabrica - sin este
   bloque, "Mantenedor de usuarios" se estira y ocupa solo el ocupa todo el ancho
   sobrante de la barra ANTES de que el "margin-left:auto" de ".gobcl-header-usuario"
   (mas arriba) alcance a empujar nada: flex-grow ya consumio todo el espacio libre
   disponible, dejando a ".gobcl-header-usuario" sin nada que absorber y pegado al
   costado del logo en vez de a la derecha (bug ya visto en pantalla).
   Por eso el empuje a la derecha pasa a hacerlo el wrapper ".gobcl-header-derecha"
   completo (como un solo grupo), y no cada hijo por separado: con dos margenes "auto"
   independientes (uno en el menu, otro en el usuario) el espacio libre se reparte
   entre ambos y aparece un hueco no deseado entre "Mantenedor de usuarios" y el
   nombre de usuario, en vez de quedar pegados. "order" reordena visualmente el menu
   antes que el usuario sin tocar el orden real en el HTML (el que mobile necesita
   para apilar en el orden que ya funciona). */
@media (min-width: 992px) {
    .gobcl-header-derecha {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: auto;
    }

    .gobcl-header-usuario {
        margin-left: 0;
        order: 2;
    }

    .gobcl-menu-principal {
        flex-grow: 0;
        order: 1;
    }
}

/* asp:RadioButtonList (RepeatLayout Table por defecto) no aplica clases de Bootstrap:
   el <input> y su <label> quedan como elementos inline sueltos dentro del <td>, lo que
   en pantallas angostas los separa en lineas distintas. Se fuerza un layout de fila
   flex por opcion para que el texto arranque junto al circulo y solo el sobrante
   pase a la linea siguiente. */
.gobcl-radiolist {
    width: 100%;
    border-collapse: collapse;
}

.gobcl-radiolist td {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.gobcl-radiolist input[type="radio"] {
    flex-shrink: 0;
    margin-top: 0.3em;
}

.gobcl-radiolist label {
    margin-bottom: 0;
}

/* Validadores con Display="Dynamic": ASP.NET oculta el <span> con un style="display:none"
   en linea cuando el campo es valido. La utilidad .d-block de Bootstrap usa "!important",
   lo que anula ese estilo en linea y deja el mensaje de error visible siempre, sin importar
   el estado real. Esta clase da el mismo layout (bloque + separacion) sin !important, para
   que el display:none en linea de ASP.NET vuelva a funcionar. */
.gobcl-validator-msg {
    display: block;
    margin-top: 0.25rem;
}

/* Mobile: el indicador de pasos del wizard (1 Proyecto / 2 Urgencia / 3 Revision)
   usa .nav-pills, que por defecto permite que los items envuelvan a una fila nueva
   (flex-wrap: wrap) cuando no caben; en pantallas angostas el paso 3 se cortaba a
   una segunda linea. Se fuerza una sola linea, compactando espacio y tipografia. */
@media (max-width: 575.98px) {
    .gobcl-wizard-steps {
        flex-wrap: nowrap;
        font-size: 0.8rem;
    }

    .gobcl-wizard-steps .nav-item {
        white-space: nowrap;
    }

    .gobcl-wizard-steps .ms-3 {
        margin-left: 0.4rem !important;
    }

    .gobcl-wizard-steps .badge {
        padding: 0.3em 0.5em;
    }
}

/* Bandeja: recuadro que destaca toda la tarjeta de busqueda y filtros. */
.gobcl-search-highlight {
    background-color: #F7F7F7;
}

/* Bandeja: recuadro que destaca toda la tarjeta de resultados (grilla de
   proyectos), con un celeste muy suave acorde a la paleta institucional. */
.gobcl-results-highlight {
    background-color: #EAF4FB;
}

.gobcl-search-label {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Bandeja (telefono): la tarjeta de busqueda y filtros ocupa casi toda la pantalla
   y empuja la grilla hacia abajo, asi que se colapsa tras un boton con icono de
   filtro (Bootstrap collapse, sin JS propio). Colapsada, el boton queda solo a la
   izquierda; expandida, pasa a la esquina superior derecha junto al primer label.
   Boton y contenido comparten la misma celda de una grilla (grid-area 1 / 1) en vez
   de sacar el boton del flujo con "position: absolute": asi el alto de la tarjeta
   nunca baja del alto del boton y no da un salto al iniciar la animacion de apertura
   (en ".collapsing" el contenido parte desde height 0).
   En tablet y escritorio (>= 768px) el boton no se muestra y el contenido se ve
   siempre, aunque conserve la clase ".collapse". */
.gobcl-filtros-toggle {
    display: none;
}

@media (min-width: 768px) {
    .gobcl-filtros-contenido.collapse:not(.show) {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .gobcl-filtros > .card-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .gobcl-filtros-toggle,
    .gobcl-filtros-contenido {
        grid-area: 1 / 1;
    }

    .gobcl-filtros-toggle {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        justify-self: start;
        align-self: start;
        padding: 0;
        border: 0;
        border-radius: 0.75rem;
        background: none;
    }

    /* Expandida: se sube un poco para centrarlo con la linea del label y no pisar
       el borde superior del input de busqueda. */
    .gobcl-filtros-toggle:not(.collapsed) {
        justify-self: end;
        top: -0.45rem;
    }

    .gobcl-filtros-toggle:focus-visible {
        outline: 2px solid var(--gobcl-primary);
        outline-offset: 2px;
    }

    .gobcl-filtros-icono {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.75rem;
        background-color: #E3F0F9;
        color: var(--gobcl-primary);
    }

    .gobcl-filtros-chevron {
        color: var(--gobcl-gray-medium);
    }

    .gobcl-filtros-toggle:not(.collapsed) .gobcl-filtros-chevron {
        transform: rotate(180deg);
    }

    /* Reserva a la derecha del label el ancho del boton (icono + chevron). */
    .gobcl-filtros-label-principal {
        padding-right: 4.5rem;
    }
}

/* Bandeja: chips de "Filtros aplicados" al pie de la tarjeta de busqueda (ver
   CargarFiltrosAplicados en Bandeja.aspx.cs). Van fuera del bloque colapsable, asi
   que en el telefono siguen visibles con la tarjeta cerrada y avisan que la grilla
   esta filtrada; la "x" de cada chip quita ese filtro.
   Solo se muestran en el telefono (ver el media query mas abajo): en tablet y
   escritorio los filtros estan siempre a la vista, asi que los chips sobran. */
.gobcl-filtros-aplicados {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gobcl-accent);
}

.gobcl-filtros-aplicados-label {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--gobcl-gray-medium);
}

.gobcl-filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.35rem 0.15rem 0.6rem;
    border: 1px solid var(--gobcl-accent);
    border-radius: 0.4rem;
    background-color: #FFFFFF;
    font-size: 0.875rem;
    color: var(--gobcl-gray-dark);
}

.gobcl-filtro-chip-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    color: var(--gobcl-gray-medium);
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
}

.gobcl-filtro-chip-quitar:hover,
.gobcl-filtro-chip-quitar:focus {
    background-color: var(--gobcl-neutral);
    color: var(--gobcl-black);
}

/* La tarjeta ya trae un "Limpiar filtros" junto al boton Buscar; el de la fila de
   chips solo hace falta cuando ese bloque esta oculto, es decir, en el telefono con
   la tarjeta colapsada. Asi nunca se ven los dos a la vez. */
.gobcl-filtros-limpiar-chips {
    display: none;
    font-weight: 600;
    text-decoration: none;
}

.gobcl-filtros-limpiar-chips:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .gobcl-filtros-aplicados {
        display: flex;
    }

    .gobcl-filtros-toggle.collapsed ~ .gobcl-filtros-aplicados .gobcl-filtros-limpiar-chips {
        display: inline;
    }
}

/* DetalleProyecto/NuevaUrgencia: recuadro de aviso de urgencia vigente, con un
   amarillo muy suave (coherente con el borde "border-warning" que ya tenian). */
.gobcl-urgencia-vigente-highlight {
    background-color: #FFF8E1;
}

/* Titulos de seccion que necesitan mas jerarquia visual que un simple "h6"
   (ej. "Contexto de presentacion" / "Datos de la urgencia" en NuevaUrgencia). */
.gobcl-section-title {
    font-weight: 700;
    color: var(--gobcl-primary-dark);
}

/* Contraste entre la fila de encabezados y las filas de datos en las tablas */

.gobcl-table-header {
    background-color: var(--gobcl-primary) !important;
    color: #FFFFFF !important;
    font-weight: 700;
    border-bottom: 2px solid var(--gobcl-primary-dark) !important;
    white-space: nowrap;
}

/* Bandeja: separador horizontal entre registros y mayor contraste del rayado
   de filas pares/impares. El "table-striped" por defecto de Bootstrap usa un
   5% de negro para el sombreado ("--bs-table-striped-bg"), casi imperceptible
   sobre el fondo celeste de la card de resultados (".gobcl-results-highlight");
   se sube esa variable en vez de pelear con selectores propios. El borde por
   defecto de ".table" tampoco se nota sobre ese mismo fondo, asi que se agrega
   uno explicito bajo cada celda de cada fila. */
.gobcl-grid-proyectos {
    --bs-table-striped-bg: rgba(0, 111, 179, 0.09);
}

.gobcl-grid-proyectos > tbody > tr > td,
.gobcl-grid-proyectos > tbody > tr > th {
    border-bottom: 1px solid var(--gobcl-accent);
}

/* Escritorio: la columna "Proyecto de ley" debe ocupar la mitad del ancho de
   la grilla y el resto de las columnas se reparten la otra mitad. Con
   table-layout "auto" (el default) el navegador redistribuye el ancho segun
   el contenido y una sola columna con "width" no alcanza a fijar el 50/50;
   se fuerza "table-layout: fixed" para que el ancho de la primera columna sea
   autoritativo y las columnas restantes (sin width explicito) se repartan el
   50% sobrante en partes iguales.
   IMPORTANTE: se usa una clase propia (".gobcl-grid-proyectos"/".gobcl-grid-resultados"
   en el CssClass del GridView) en vez de "#gvProyectos"/"#gvResultadosExistente":
   al vivir estos controles dentro de un ContentPlaceHolder de la Master Page,
   ASP.NET renderiza su "id" real con el prefijo del placeholder (ej.
   "MainContent_gvProyectos", ClientIDMode "Predictable"), por lo que un
   selector "#gvProyectos" nunca coincide con el elemento real. */
@media (min-width: 768px) {
    .gobcl-grid-proyectos {
        table-layout: fixed;
    }

    .gobcl-grid-proyectos th:nth-child(1),
    .gobcl-grid-proyectos td:nth-child(1) {
        width: 50%;
    }

    .gobcl-grid-proyectos td {
        overflow-wrap: break-word;
    }

    /* Las columnas restantes quedan muy angostas (50% repartido entre 6 columnas);
       ".gobcl-table-header" fuerza "white-space: nowrap" en los encabezados, lo que
       hace que el texto se desborde de su celda y se superponga con el de las
       columnas vecinas. Se permite el salto de línea solo en esta grilla.
       Encabezados de una sola palabra sin espacio donde cortar ("Vencimiento",
       "Corporación") no tienen otro punto de quiebre valido para el navegador, y
       "overflow-wrap: break-word" a secas corta en cualquier caracter (ej.
       "Corporació" + "n"). "hyphens: auto" le pide al navegador cortar por
       silaba con guion cuando hace falta partir la palabra (requiere lang="es",
       ya declarado en <html> en Site.Master); "overflow-wrap" queda como
       respaldo para el caso en que la palabra no tenga un punto de silabeo util. */
    .gobcl-grid-proyectos th {
        white-space: normal;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
}

/* Mobile: en la grilla de RegistrarProyecto la columna de accion (ultima) queda
   fija al borde derecho. La grilla de Bandeja fija la primera columna (ver abajo). */
@media (max-width: 767.98px) {
    .gobcl-grid-resultados td:last-child,
    .gobcl-grid-resultados th:last-child {
        position: sticky;
        right: 0;
        background-color: #FFFFFF;
        box-shadow: -4px 0 4px -2px rgba(0, 0, 0, 0.12);
    }
}

/* Paginador de la grilla de proyectos (Bandeja.aspx): el renderizado por defecto
   del GridView (enlaces sueltos separados por espacios) se estiliza para que
   parezca un grupo de botones, acorde al resto de la interfaz. */
.gobcl-pager {
    background-color: #FFFFFF;
}

.gobcl-pager td {
    text-align: center;
    padding: 0.75rem 0 0.25rem;
}

.gobcl-pager a,
.gobcl-pager span {
    display: inline-block;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    margin: 0 0.15rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--gobcl-primary);
}

.gobcl-pager a:hover {
    background-color: var(--gobcl-neutral);
}

.gobcl-pager span {
    background-color: var(--gobcl-primary);
    color: #FFFFFF;
}

/* Menu de acciones (kebab) de las grillas: boton "..." compacto que abre un
   dropdown con las acciones de la fila (Nueva urgencia / Ver detalle). Bootstrap
   solo abre el dropdown al hacer click; se agrega apertura por hover exclusivamente
   en dispositivos con mouse real (media hover:hover) para no afectar touch, donde
   el tap sigue funcionando via el data-bs-toggle nativo de Bootstrap.
   El wrapper usa ".dropstart" (despliegue lateral hacia la izquierda del boton)
   en vez del ".dropdown" por defecto (hacia abajo). OJO: Bootstrap solo aplica
   "top/right/left" de ".dropstart .dropdown-menu" cuando el atributo
   "[data-bs-popper]" esta presente, y ese atributo solo lo agrega Popper cuando
   el dropdown se abrio via su JS (click) - ver bootstrap.min.css, regla
   ".dropstart .dropdown-menu[data-bs-popper]". Como aqui tambien se abre por
   CSS puro (hover), sin pasar por Popper, hace falta fijar esa misma posicion
   de forma incondicional (sin el gate "[data-bs-popper]") para que abra hacia
   la izquierda tanto por click como por hover; si no, cae con la posicion base
   (hacia abajo/derecha) y, al ser la ultima columna pegada al borde derecho, el
   menu queda fuera del viewport.
   El menu se centra verticalmente respecto al boton (top:50% + translateY) en
   vez de alinear su borde superior con el del boton: alineado arriba, el menu
   crece solo hacia abajo y en filas mas bajas de la grilla se corta contra el
   borde inferior de ".table-responsive" (que clippea overflow vertical por su
   "overflow-x: auto"); centrado, crece mitad arriba/mitad abajo del boton y dejan
   de cortarse en la mayoria de las filas. Ademas se quita el margin-right (gap)
   entre boton y menu: ese hueco sin elemento debajo del cursor era una "zona
   muerta" que le hacia perder el estado :hover al mover el mouse en diagonal
   desde la parte superior del boton hacia el menu, escondiendolo antes de
   llegar. Con margin-right:0 el menu queda pegado al boton, sin hueco. */
.gobcl-actions-toggle {
    line-height: 1;
    padding: 0.25rem 0.6rem;
    font-size: 1.1rem;
}

.gobcl-actions-dropdown .dropdown-menu {
    top: 50%;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: 0;
    transform: translateY(-50%);
}

/* El centrado de arriba deja de cortar el menu "en la mayoria de las filas",
   pero en la ULTIMA fila no hay ninguna fila debajo que le de margen: la mitad
   inferior del menu (crece mitad arriba/mitad abajo del boton) sigue cayendo
   fuera de ".table-responsive" y se clippea. Agregar padding-bottom no lo
   resuelve: por spec CSS, "overflow-x: auto" fuerza a "overflow-y" a
   computarse tambien como "auto" (no se pueden desacoplar los ejes cuando uno
   es "visible" y el otro no), asi que cualquier alto extra del wrapper sigue
   siendo un contenedor de scroll que recorta el menu igual. La unica forma de
   que no se recorte es que ninguno de los dos ejes clippee: como esta grilla
   ya esta pensada para no depender del scroll horizontal (ver mas abajo el
   wrap/hyphenation de encabezados angostos), se anula el overflow del wrapper
   por completo en vez de solo agregar espacio.
   Con "overflow: visible" el wrapper ya no clippea, pero al ser "position:
   absolute" el menu no empuja contenido: en la ULTIMA fila puede seguir
   asomando por debajo del borde de la card (o del viewport) si no hay nada
   que le reserve ese espacio en el flujo normal. Por eso aqui SI corresponde
   agregar padding-bottom (a diferencia del intento fallido de arriba, que
   era sobre un wrapper que todavia clippeaba): deja hueco en blanco despues
   de la tabla para que el menu, cuando se abre en la ultima fila, tenga
   donde caer. El alto cubre un menu de 3 items (Nueva urgencia / Ver detalle
   / Eliminar urgencia) centrado verticalmente respecto al boton. */
.gobcl-grid-proyectos-wrapper {
    overflow: visible;
    padding-bottom: 6rem;
}

/* Mobile: la grilla no cabe en el ancho del telefono; el wrapper vuelve a hacer
   scroll horizontal y "Proyecto de ley" queda fija a la izquierda. El resto de
   las celdas no se parte en lineas para que la fila no crezca en alto. */
@media (max-width: 767.98px) {
    .gobcl-grid-proyectos-wrapper {
        overflow-x: auto;
    }

    .gobcl-grid-proyectos > tbody > tr > td,
    .gobcl-grid-proyectos > tbody > tr > th {
        white-space: nowrap;
    }

    .gobcl-grid-proyectos > tbody > tr > th:first-child,
    .gobcl-grid-proyectos > tbody > tr:not(.gobcl-pager) > td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 11rem;
        min-width: 11rem;
        max-width: 11rem;
        white-space: normal;
        background-color: var(--bs-body-bg, #FFFFFF);
    }

    .gobcl-grid-proyectos > tbody > tr > th:first-child::after,
    .gobcl-grid-proyectos > tbody > tr:not(.gobcl-pager) > td:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 6px;
        pointer-events: none;
        box-shadow: inset 6px 0 6px -6px rgba(0, 0, 0, 0.25);
    }
}

@media (hover: hover) {
    .gobcl-actions-dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* Semaforo de vencimiento: leyenda sobre la grilla y badges de la columna
   "Dias restantes" (ver Bandeja.aspx.cs, RenderSemaforo). */
.gobcl-semaforo-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    font-size: 0.8rem;
}

.gobcl-semaforo-legend-label {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gobcl-gray-medium);
    letter-spacing: 0.02em;
}

.gobcl-semaforo-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gobcl-gray-dark);
}

.gobcl-semaforo-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gobcl-semaforo-badge {
    color: #FFFFFF;
    font-weight: 600;
}

.gobcl-semaforo-verde {
    background-color: #2E7D32;
}

.gobcl-semaforo-ambar {
    background-color: #B98900;
}

.gobcl-semaforo-rojo {
    background-color: #C62828;
}

.gobcl-semaforo-gris {
    background-color: var(--gobcl-gray-medium);
}

/* Footer institucional */

.gobcl-footer {
    background-color: var(--gobcl-tertiary);
    color: #FFFFFF;
    margin-top: 2rem;
}

.gobcl-footer a {
    color: #FFFFFF;
    text-decoration: underline;
}

.gobcl-footer a:hover {
    color: var(--gobcl-accent);
}

.gobcl-footer .gobcl-footer-institucion {
    font-family: 'Roboto Slab', Georgia, serif;
}