/* Página (decidido 2026-10-19, como el proyecto Angular): fondo gris suave y "hojas" blancas con borde fino encima
   (filtros y grilla de los listados, paneles de los detalles, saludo y tarjetas de Inicio). Texto gris muy oscuro en
   vez de negro. Todos los valores de la página están aquí. */
:root {
    --page-bg: #f5f6f8;
    --page-text: #1f2937;
    --sheet-bg: #fff;
    --sheet-border: #e3e6ec;
    --sheet-radius: 8px;
    --sheet-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --sheet-gutter: 1.2rem;                         /* margen de las hojas a los costados (= .container-header) */
    --nav-height: 50px;                             /* alto del header fijo: la fila de títulos de las grillas se pega debajo */
}

body {
    font-size: 12px;
    background: var(--page-bg);
    color: var(--page-text);
}

/* Breadcrumb de cada página: sin caja gris, sobre el fondo de la página */
.breadcrumb,
.breadcrumb-admin {
    background: transparent;
}

.container-header {
    padding: 0 1.2rem 1rem 1.2rem;
}

.img-loading {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: black;
    z-index: 100;
    transition: color 0.8s linear 0.2s;
}

.layout-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    grid-template-areas: "main aside";
    gap: 10px;
}

.main-section {
    grid-area: main
}

.aside-section {
    grid-area: aside
}

@media (max-width: 992px) {
    .layout-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "aside";
        gap: 10px;
    }
}

.page-header-admin {
    padding: 1rem 0;
}

.page-actions {
    display: flex;
    gap: 8px;
}

.page-header-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.page-header-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.tabs-admin {
    display: flex;
    gap: 5px;
}

@media (max-width:992px) {

    .page-header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-bottom {
        justify-content: flex-end;
    }
}

@media (max-width:576px) {

    .tabs-admin {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .page-header-bottom {
        justify-content: flex-start;
    }
}

.breadcrumb-admin {
    font-size: 16px;
    padding: .8rem;
    border-radius: .5rem;
}

.breadcrumb-admin a {
    color: #337ab7;
    font-weight: 700;
}

.breadcrumb-admin span {
    margin: 0 6px;
    color: #777;
}

/*================== Loader ==================*/
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.65);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.loader-box {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    user-select: none;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top: 4px solid #0D1B6C;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*================== Header (uc:Navigator) ==================*/
/* Barra azul (colores del bootstrap.min.css personalizado: #0D1B6C, texto blanco, hover #72b6f6) */
.nav-central {
    /* Efectos del header (logo, Inicio, áreas, íconos, paneles y menús): todos los valores están aquí, para
       ajustarlos en un solo lugar. Con "reducir movimiento" (Windows/navegador) no hay animaciones. */
    --nav-ease: cubic-bezier(.2, .8, .2, 1);        /* curva: arranca rápido y frena suave */
    --nav-hover-duration: .25s;                     /* brillo y color al pasar el mouse (áreas, Inicio, íconos, logo) */
    --nav-hover-glow: rgba(255, 255, 255, .08);     /* fondo de un área o ícono al pasar el mouse */
    --nav-open-glow: rgba(255, 255, 255, .14);      /* fondo de un área o ícono con su panel o menú abierto */
    --nav-open-line: #72b6f6;                       /* línea bajo el área abierta (crece desde abajo) */
    --nav-open-line-size: 3px;
    --nav-logo-bg: #f97316;                         /* cuadro naranja del logo */
    --nav-logo-hover-bg: #fb923c;                   /* al pasar el mouse el cuadro se aclara por dentro (sin borde) */
    --nav-press-scale: .9;                          /* tamaño al hacer clic (logo, Inicio, íconos): efecto "presionado" */
    --nav-press-duration: .12s;
    --nav-open-duration: .22s;                      /* aparición de paneles, menús y caja de búsqueda */
    --nav-open-offset: -6px;                        /* bajan desde esta altura mientras aparecen */
    --nav-item-duration: .15s;                      /* ítems dentro de los paneles: pastilla, punto, flecha */
    /* Navy suave + vidrio (decidido 2026-10-19): textos e íconos gris claro, blancos al pasar el mouse; el header queda
       fijo arriba y, al bajar por la página, se vuelve vidrio (deja ver la página desenfocada) con una sombra suave. */
    --nav-bg: #0D1B6C;
    --nav-ink: rgba(255, 255, 255, .8);             /* textos (áreas, Inicio) e íconos */
    --nav-ink-hover: #fff;
    --nav-logo-shadow: 0 2px 6px rgba(0, 0, 0, .35); /* sombra bajo el cuadro de la "C" */
    --nav-glass-bg: rgba(13, 27, 108, .85);         /* navy con 85%: lo que pasa por debajo se ve desenfocado */
    --nav-glass-blur: 12px;
    --nav-glass-saturate: 160%;
    --nav-scrolled-shadow: 0 6px 18px rgba(13, 27, 108, .2);
    --nav-scroll-duration: .25s;                    /* paso de sólido a vidrio y vuelta */
    /* Búsqueda global (paso 11, Paul 2026-10-23): la caja se abre en la misma barra. En pantalla grande va desde la
       lupa hacia la izquierda hasta cerca de la última área (TI), sin taparla, y cubre el "+"; en pantalla chica cubre
       toda la barra. El ancho lo mide Assets/js/navigator.js (fitSearch) con estos valores. */
    --nav-search-height: 36px;
    --nav-search-gap: 24px;                         /* espacio libre entre la última área y la caja */
    --nav-search-min-width: 260px;                  /* si no hay tanto espacio, al menos esto */
    --nav-search-max-width: 900px;                  /* en pantallas muy anchas, no más que esto */
    --nav-search-open-offset: 16px;                 /* al abrirse aparece corriéndose estos px hacia la izquierda */
    --nav-search-loading-opacity: .55;              /* buscando: los resultados de antes, apagados hasta que llegan */
    --nav-search-results-width: 460px;              /* la lista de resultados (pantallas y registros) */
    --nav-search-icon: #8a93a0;                     /* ⌂ de una pantalla y 📄 de un registro */
    --nav-search-module-bg: #e8f0fe;                /* la etiqueta del módulo de un registro ("CUENTAS POR COBRAR") */
    --nav-search-module-text: #1d4ed8;
    /* Botón de apps (junto al logo): su cuadro, como el de Gmail */
    --nav-apps-width: 300px;                        /* tres apps por fila */
    --nav-apps-radius: 12px;
    --nav-apps-text: #4b5a8a;                       /* nombre de cada app: el gris navy de los totales de las grillas */
    --nav-apps-icon: #0D1B6C;                       /* el nombre al pasar el mouse y el borde con el teclado */
    --nav-apps-hover-bg: #f1f3f6;                   /* el gris de la columna derecha de los paneles */
    --nav-apps-hover-duration: .15s;                /* al pasar de una app a otra, el fondo de cada una (y su cuadrito)
                                                       aparece y se desvanece así de lento; 0s = al instante */
    --nav-apps-hover-ease: ease-in-out;             /* parejo al entrar y al salir */
    --nav-apps-active-mix: 12%;                     /* en Inicio, la app abierta: un tinte de su color (0% = sin tinte) */
    --nav-apps-icon-box: 40px;                      /* el cuadrito de cada app: de su color y con el ícono en blanco,
                                                       como en el lanzador (colores y transparencia: --home-app-*) */
    --nav-apps-icon-radius: 10px;
    --nav-apps-icon-size: 22px;
    background: var(--nav-bg);
    border: 0;
    border-radius: 0;
}

/* Áreas e Inicio: el color, el brillo y la línea del área abierta aparecen suave (no de golpe) */
.nav-central .navbar-nav > li > a {
    padding-left: 10px;
    padding-right: 10px;
    color: var(--nav-ink);
    box-shadow: inset 0 0 0 var(--nav-open-line);
    transition: color var(--nav-hover-duration) var(--nav-ease),
                background-color var(--nav-hover-duration) var(--nav-ease),
                box-shadow var(--nav-hover-duration) var(--nav-ease);
}

/* Bootstrap deja el texto celeste mientras el enlace tiene el foco del clic; aquí vuelve al gris claro */
.nav-central .nav-areas > li > a:focus {
    color: var(--nav-ink);
}

.nav-central .nav-areas > li > a:hover,
.nav-central .nav-areas > li > a:focus-visible {
    background: var(--nav-hover-glow);
    color: var(--nav-ink-hover);
}

/* Áreas (Configuración, Comercial…): 13px, un poco más grandes que el resto (12px) para señalarlas fácil */
.nav-central .nav-areas > li > a {
    font-size: 13px;
}

/* Bootstrap fija 14px en los dropdowns; se usa el mismo tamaño del resto del sistema */
.nav-central .dropdown-menu {
    font-size: inherit;
}

/* bootstrap.min.css (personalizado) abre los dropdowns con hover solo por CSS; en el header el hover lo maneja
   el script del Navigator (clase "open"), para ubicar el panel y cerrar las demás áreas */
.nav-central .navbar-nav li:hover > ul.dropdown-menu {
    display: none;
}

.nav-central .navbar-nav > li.open > ul.dropdown-menu {
    display: block;
}

/* Área abierta */
.nav-central .navbar-nav > .open > a,
.nav-central .navbar-nav > .open > a:hover,
.nav-central .navbar-nav > .open > a:focus {
    color: #fff;
    background: var(--nav-open-glow);
    box-shadow: inset 0 calc(-1 * var(--nav-open-line-size)) 0 var(--nav-open-line);
}

/* Paneles de las áreas, menús (Crear, usuario), caja de búsqueda y menú de pantalla chica: aparecen con un fundido,
   bajando un poco. Al cerrarse desaparecen al instante (Bootstrap los oculta con display: none). */
@keyframes nav-drop-in {
    from {
        opacity: 0;
        transform: translateY(var(--nav-open-offset));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes nav-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.nav-central .open > .dropdown-menu,
.nav-central .nav-search-results:not([hidden]),
.nav-central .navbar-collapse.collapse.in {
    animation: nav-drop-in var(--nav-open-duration) var(--nav-ease);
}

/* La caja de búsqueda, en la barra: aparece con un fundido, corriéndose un poco hacia la izquierda (desde la lupa) */
@keyframes nav-search-in {
    from {
        opacity: 0;
        transform: translateX(var(--nav-search-open-offset));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.nav-central .nav-search.is-open .nav-search-box {
    animation: nav-search-in var(--nav-open-duration) var(--nav-ease);
}

/* "+ Crear" de Inicio: aparece igual que el + del header (sus variables --nav-* son del header; aquí, los valores) */
.home-create.open > .dropdown-menu {
    animation: nav-drop-in .22s cubic-bezier(.2, .8, .2, 1);
    --nav-open-offset: -6px;
}

/* Columna derecha del panel: al pasar de una carpeta a otra, sus páginas aparecen con un fundido */
.nav-central .nav-panel-sub.is-active {
    animation: nav-fade-in var(--nav-open-duration) var(--nav-ease);
}

/* Botón del menú en pantallas chicas */
.nav-central .navbar-toggle {
    border-color: rgba(255, 255, 255, .4);
    transition: background-color var(--nav-hover-duration) var(--nav-ease),
                transform var(--nav-press-duration) var(--nav-ease);
}

/* Bootstrap lo deja gris (#ddd) mientras tiene el foco del clic; aquí el brillo es solo con el mouse, con el teclado
   o con el menú abierto */
.nav-central .navbar-toggle:focus {
    background: transparent;
}

.nav-central .navbar-toggle:hover,
.nav-central .navbar-toggle:focus-visible {
    background: var(--nav-hover-glow);
}

.nav-central .navbar-toggle:not(.collapsed) {
    background: var(--nav-open-glow);
}

.nav-central .navbar-toggle:active {
    transform: scale(var(--nav-press-scale));
}

.nav-central .navbar-toggle .icon-bar {
    background: #fff;
}

.nav-central .navbar-collapse {
    border-color: rgba(255, 255, 255, .15);
}

/* Panel de cada área (como el menú de NetSuite): columna izquierda blanca con el nivel 2 y, si el área
   tiene carpetas, columna derecha gris con las páginas de la carpeta señalada. Se abre debajo de su área;
   si se sale por la derecha, el script del Navigator lo corre a la izquierda. */
.nav-central .dropdown-menu.nav-panel {
    left: 0;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: 12px;
}

.nav-central .navbar-nav > li.open > .dropdown-menu.nav-panel {
    display: flex;
    align-items: stretch;
}

.nav-central .nav-panel-list,
.nav-central .nav-panel-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Columnas de ancho fijo: el panel no cambia de ancho al plegar un grupo o al pasar de una carpeta a otra
   (si se achicara bajo el mouse, el panel se cerraría). Los nombres largos bajan a otra línea. */
.nav-central .nav-panel-list,
.nav-central .nav-panel-side {
    overflow-wrap: break-word;
}

/* Columna izquierda */
.nav-central .nav-panel-list {
    flex: 0 0 220px;
    width: 220px;
    padding: 8px 0;
    background: #fff;
}

.nav-central .nav-panel-list > li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    color: #222;
    transition: background-color var(--nav-item-duration) var(--nav-ease), color var(--nav-item-duration) var(--nav-ease);
}

.nav-central .nav-panel-list > li > a:not(.nav-pending):hover,
.nav-central .nav-panel-list > li > a:not(.nav-pending):focus,
.nav-central .nav-panel-list > li.is-active > a {
    background: #f1f3f6;
    color: #0D1B6C;
    text-decoration: none;
}

/* Flecha de las carpetas (tienen páginas a la derecha) */
.nav-central .nav-panel-folder > a::after {
    content: "\203A";
    margin-left: 20px;
    color: #8a93a0;
    font-size: 18px;
    line-height: 1;
}

/* Columna derecha: mismo gris que la carpeta marcada, para que se lean como una sola pieza */
.nav-central .nav-panel-side {
    flex: 0 0 260px;
    width: 260px;
    padding: 8px 0;
    background: #f1f3f6;
}

.nav-central .nav-panel-sub {
    display: none;
}

.nav-central .nav-panel-sub.is-active {
    display: block;
}

/* Páginas de la columna derecha: al pasar el mouse aparece una "pastilla" blanca y el texto se corre un poco */
.nav-central .nav-panel-links > li > a {
    position: relative;
    display: block;
    margin: 1px 10px;
    padding: 5px 8px 5px 10px;
    border-radius: 6px;
    color: #333;
    transition: background-color var(--nav-item-duration) var(--nav-ease), color var(--nav-item-duration) var(--nav-ease),
                padding var(--nav-item-duration) var(--nav-ease);
}

.nav-central .nav-panel-links > li > a:not(.nav-pending):hover,
.nav-central .nav-panel-links > li > a:not(.nav-pending):focus {
    padding-left: 12px;
    padding-right: 6px;
    background: #fff;
    color: #0D1B6C;
    text-decoration: none;
}

/* Carpeta recién plegada: sin resaltar aunque el mouse siga encima, para que se note que se cerró */
.nav-central .nav-panel-list > li.is-folded > a:hover,
.nav-central .nav-panel-list > li.is-folded > a:focus {
    background: #f7f8fa;
}

.nav-central .nav-panel.is-collapsed .nav-panel-side {
    display: none;
}

/* Grupo (carpeta de nivel 3): subtítulo plegable y sus páginas debajo. Al pasar el mouse tiene la misma
   pastilla blanca que las páginas (sin punto), y su texto queda alineado con ellas. */
.nav-central .nav-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 20px);
    margin: 1px 10px;
    padding: 5px 8px 5px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #0D1B6C;
    font-size: inherit;
    font-weight: normal;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--nav-item-duration) var(--nav-ease), padding var(--nav-item-duration) var(--nav-ease);
}

.nav-central .nav-panel-heading:hover,
.nav-central .nav-panel-heading:focus {
    padding-left: 12px;
    padding-right: 6px;
    background: #fff;
}

.nav-central .nav-panel-heading:focus {
    outline: none;
}

/* El nombre del grupo ocupa el ancho libre (y baja a otra línea si es largo); la flecha queda siempre al borde derecho */
.nav-central .nav-fold-text {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-central .nav-fold .caret {
    flex: 0 0 auto;
    margin-left: 12px;
    transition: transform var(--nav-item-duration) var(--nav-ease);
}

.nav-central .is-folded > .nav-fold .caret {
    transform: rotate(-90deg);
}

.nav-central .nav-panel-group.is-folded > .nav-panel-links {
    display: none;
}

/* Páginas del grupo: línea guía vertical a su izquierda */
.nav-central .nav-panel-group > .nav-panel-links {
    position: relative;
    margin: 0 0 4px 26px;
}

.nav-central .nav-panel-group > .nav-panel-links::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 1px;
    background: #d5dae1;
}

/* Punto sobre la línea guía junto a la página señalada: solo existe donde hay línea (páginas dentro de un grupo).
   Aparece creciendo y se desvanece al salir, así parece seguir al mouse. */
.nav-central .nav-panel-group .nav-panel-links > li > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background: #0D1B6C;
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--nav-item-duration) var(--nav-ease), transform var(--nav-item-duration) var(--nav-ease);
    pointer-events: none;
}

.nav-central .nav-panel-group .nav-panel-links > li > a:hover::before,
.nav-central .nav-panel-group .nav-panel-links > li > a:focus::before {
    opacity: 1;
    transform: scale(1);
}

.nav-central .nav-panel-group .nav-panel-links > li > a.nav-pending::before {
    background: #c3c8cf;
}

/* Si el usuario pidió reducir el movimiento (Windows/navegador), sin animaciones */
@media (prefers-reduced-motion: reduce) {
    .nav-central .nav-panel-list > li > a,
    .nav-central .nav-panel-links > li > a,
    .nav-central .nav-panel-group .nav-panel-links > li > a::before,
    .nav-central .nav-panel-heading,
    .nav-central .nav-fold .caret {
        transition: none;
    }
}

/* Páginas sin ruta (en construcción) */
.nav-central .navbar-nav li a.nav-pending,
.nav-central .navbar-nav li a.nav-pending:hover,
.nav-central .navbar-nav li a.nav-pending:focus {
    color: #a0a7b0;
    cursor: not-allowed;
    text-decoration: none;
}

/* Áreas sin ruta sobre la barra azul */
.nav-central .navbar-nav > li > a.nav-pending,
.nav-central .navbar-nav > li > a.nav-pending:hover,
.nav-central .navbar-nav > li > a.nav-pending:focus {
    color: rgba(255, 255, 255, .45);
    background: transparent;
}

/* ⚡ de cada página con ruta (Módulos de Inicio, Assets/js/navigator.js): aparece al pasar el mouse por la
   página; si ya es acceso directo queda siempre visible, en amarillo. Las carpetas y las páginas en construcción no
   lo tienen. Colores y tiempo: variables --home-* de la sección "Inicio". */
.nav-central .nav-has-bolt {
    position: relative;
}

.nav-central .nav-bolt {
    position: absolute;
    top: 50%;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--home-action-size);
    height: var(--home-action-size);
    margin-top: calc(var(--home-action-size) / -2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--home-action-off);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--home-bolt-hint-duration) ease, background-color var(--home-bolt-hint-duration) ease,
                color var(--home-bolt-hint-duration) ease;
}

.nav-central .nav-bolt svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill var(--home-toggle-duration) ease;
}

.nav-central .nav-has-bolt:hover > .nav-bolt,
.nav-central .nav-search-row:hover > .nav-bolt,
.nav-central .nav-search-item.is-active + .nav-bolt,
.nav-central .nav-bolt:focus-visible,
.nav-central .nav-bolt.is-on {
    opacity: 1;
}

.nav-central .nav-bolt:hover,
.nav-central .nav-bolt:focus-visible {
    background: var(--home-action-hover-bg);
    color: var(--home-accent);
    outline: none;
}

.nav-central .nav-bolt.is-on {
    color: var(--home-bolt-on-stroke);
}

.nav-central .nav-bolt.is-on svg {
    fill: var(--home-bolt-on);
}

/* Lugar para el ⚡: el nombre de la página no pasa por debajo */
.nav-central .nav-panel-list > li.nav-has-bolt > a {
    padding-right: 36px;
}

.nav-central .nav-panel-links > li.nav-has-bolt > a,
.nav-central .nav-panel-links > li.nav-has-bolt > a:hover,
.nav-central .nav-panel-links > li.nav-has-bolt > a:focus {
    padding-right: 30px;
}

.nav-central .nav-panel-links > li.nav-has-bolt > .nav-bolt {
    right: 14px;
}

/* En pantallas táctiles no hay "pasar el mouse": el ⚡ se ve siempre */
@media (hover: none) {
    .nav-central .nav-bolt {
        opacity: 1;
    }
}

/* Flecha de las áreas con panel: separación fija, sin depender del espacio en el texto. Todas las áreas
   tienen el mismo padding, así el espacio entre una y otra es siempre el mismo. */
.nav-central .navbar-nav > li > a > .caret {
    margin-left: 5px;
}

/* Barra: logo | Inicio y áreas | herramientas. Los clearfix de Bootstrap (::before/::after) no deben ocupar lugar.
   Pantalla grande: tres columnas; las de los costados miden lo mismo, así Inicio y las áreas quedan al centro exacto.
   Pantalla chica (menos de 1200px, mismo valor en Assets/js/navigator.js): logo y botón del menú | herramientas;
   el menú (Inicio y áreas) se abre debajo, a todo el ancho.
   El header queda fijo arriba (sticky) en todas las páginas; z-index 1030 = el de Bootstrap para barras fijas: encima de la
   página, debajo de las ventanas modales, los avisos y los "cargando". */
.nav-central {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background-color var(--nav-scroll-duration) var(--nav-ease),
                box-shadow var(--nav-scroll-duration) var(--nav-ease);
}

/* Al bajar por la página (clase is-scrolled, Assets/js/navigator.js): vidrio navy con sombra */
.nav-central.is-scrolled {
    background: var(--nav-glass-bg);
    -webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
    backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
    box-shadow: var(--nav-scrolled-shadow);
}

/* Navegadores sin desenfoque: navy sólido (solo la sombra) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-central.is-scrolled {
        background: var(--nav-bg);
    }
}

/* Opción guardada para probar algún día (Paul, 2026-10-19): header "claro" como el proyecto Angular, del color de la
   página (--page-bg), con textos e íconos gris oscuro (#4b5563, navy al pasar el mouse) y, al bajar, una línea fina
   (#e3e5e8) en lugar de la sombra. No es un cambio de una línea: hay que redefinir los colores de la barra (logo, áreas,
   íconos, avatar, botón del menú, fila de búsqueda en pantalla chica). Se ve en la maqueta "Central Visual Options"
   (claude.ai, privada de Paul), opción "Claro (Angular)". */

.nav-central .nav-bar {
    display: flex;
    align-items: center;
}

.nav-central .nav-bar::before,
.nav-central .nav-bar::after {
    display: none;
}

.nav-central .nav-start,
.nav-central .nav-tools {
    display: flex;
    align-items: center;
}

@media (min-width: 1200px) {
    .nav-central .nav-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .nav-central .nav-start {
        justify-self: start;
    }

    .nav-central .nav-tools {
        justify-self: end;
        margin-right: -6px;
    }

    /* Solo en pantalla chica: botón del menú y Notificaciones dentro del menú del usuario */
    .nav-central .navbar-toggle,
    .nav-central .nav-compact-only {
        display: none;
    }
}

/* Logo: cuadro naranja con la "C" blanca y "Central" en blanco (como el proyecto Angular). Va a Inicio. */
.nav-central .nav-bar .nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    padding: 0 12px 0 0;
}

.nav-central .nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--nav-logo-bg);
    box-shadow: var(--nav-logo-shadow);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    transition: background-color var(--nav-hover-duration) var(--nav-ease),
                transform var(--nav-press-duration) var(--nav-ease);
}

/* Logo: el cuadro brilla por dentro (se aclara) al pasar el mouse; "presionado" al hacer clic */
.nav-central .nav-brand:hover .nav-logo,
.nav-central .nav-brand:focus-visible .nav-logo {
    background: var(--nav-logo-hover-bg);
}

.nav-central .nav-brand:active .nav-logo {
    transform: scale(var(--nav-press-scale));
}

.nav-central .nav-brand-text {
    color: #fff;
    font-size: 17px;
    font-weight: bold;
}

/* Inicio: la casa y su nombre, con el mismo padding que las áreas */
.nav-central .nav-home svg {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--nav-press-duration) var(--nav-ease);
}

.nav-central .nav-home > a:active svg {
    transform: scale(var(--nav-press-scale));
}

.nav-central .nav-home-label {
    margin-left: 6px;
}

/* Íconos redondos sobre la barra azul (lupa, Tareas, Crear, notificaciones, usuario): brillo suave al pasar el
   mouse y "presionado" al hacer clic */
.nav-central .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 8px 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nav-ink);
    cursor: pointer;
    transition: background-color var(--nav-hover-duration) var(--nav-ease),
                color var(--nav-hover-duration) var(--nav-ease),
                transform var(--nav-press-duration) var(--nav-ease);
}

.nav-central .nav-icon:focus {
    outline: none;
}

.nav-central .nav-icon:hover,
.nav-central .nav-icon:focus-visible {
    background: var(--nav-hover-glow);
    color: var(--nav-ink-hover);
}

.nav-central .nav-icon:active {
    transform: scale(var(--nav-press-scale));
}

.nav-central .nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ícono dentro de un ítem del menú del usuario (Cerrar Sesión) y de Crear (también el de Inicio) */
.nav-central .nav-menu-icon,
.home-create .nav-menu-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tareas: en construcción hasta la Fase 2 (blanco apagado, sin hover) */
.nav-central .nav-icon.is-pending,
.nav-central .nav-icon.is-pending:hover,
.nav-central .nav-icon.is-pending:focus {
    background: transparent;
    color: rgba(255, 255, 255, .45);
    cursor: not-allowed;
    transform: none;
}

/* Ícono con su menú o su caja abiertos */
.nav-central .open > .nav-icon,
.nav-central .nav-search.is-open > .nav-search-toggle {
    background: var(--nav-open-glow);
    color: var(--nav-ink-hover);
}

/* Número rojo de notificaciones: el único número del header. Sobre la campana y, en pantalla chica, en "•••". */
.nav-central .nav-bell {
    position: relative;
}

.nav-central .nav-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
}

.nav-central .nav-badge[hidden] {
    display: none;
}

/* Botón de apps (como los puntos de Gmail; Assets/js/home-apps.js): un cuadro blanco con Inicio y las apps de Inicio en
   filas de tres, cada una con su ícono y su nombre. El candado marca la que se abre primero y, en Inicio, la app abierta
   lleva un tinte. Se abre como los demás menús del header (aparece bajando un poco y se cierra al instante). */
.nav-central .nav-apps {
    margin-right: 6px;
}

.nav-central .nav-apps-toggle {
    margin-left: -6px;      /* el ícono queda alineado con el borde, como las herramientas de la derecha */
}

.nav-central .nav-apps-menu {
    width: var(--nav-apps-width);
    max-width: calc(100vw - 16px);
    padding: 8px;
    border: 0;
    border-radius: var(--nav-apps-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.nav-central .open > .nav-apps-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.nav-central .nav-apps-menu > li {
    min-width: 0;
}

.nav-central .nav-apps-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border-radius: 10px;
    color: var(--nav-apps-text);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--nav-apps-hover-duration) var(--nav-apps-hover-ease),
                color var(--nav-apps-hover-duration) var(--nav-apps-hover-ease);
}

.nav-central .nav-apps-item svg {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* El cuadrito de la app (sus dos colores: --home-app-fill en la sección "Inicio"): se aclara al pasar el mouse y se
   achica al hacer clic, como la "C" del logo */
.nav-central .nav-apps-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-apps-icon-box);
    height: var(--nav-apps-icon-box);
    border-radius: var(--nav-apps-icon-radius);
    background: var(--home-app-fill);
    transition: background-color var(--nav-apps-hover-duration) var(--nav-apps-hover-ease),
                transform var(--nav-press-duration) var(--nav-ease);
}

.nav-central .nav-apps-icon svg {
    width: var(--nav-apps-icon-size);
    height: var(--nav-apps-icon-size);
    stroke: var(--home-tile-icon-color);
}

.nav-central .nav-apps-item:hover .nav-apps-icon,
.nav-central .nav-apps-item:focus .nav-apps-icon {
    background: var(--home-app-fill-hover);
}

.nav-central .nav-apps-item:active .nav-apps-icon {
    transform: scale(var(--nav-press-scale));
}

.nav-central .nav-apps-item:hover,
.nav-central .nav-apps-item:focus {
    background: var(--nav-apps-hover-bg);
    color: var(--nav-apps-icon);
    text-decoration: none;
    outline: none;
}

.nav-central .nav-apps-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--nav-apps-icon);
}

/* En Inicio, la app abierta: solo un tinte de su color (sin negrita) */
.nav-central .nav-apps-item.is-active {
    background: color-mix(in srgb, var(--home-app-color) var(--nav-apps-active-mix), #fff);
    color: var(--nav-apps-icon);
}

.nav-central .nav-apps-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El candado: la app que se abre primero (como en home_2_desktop.png, junto a Inicio) */
.nav-central .nav-apps-lock {
    position: absolute;
    top: 6px;
    right: 10px;
    display: flex;
}

.nav-central .nav-apps-item .nav-apps-lock svg {
    width: 11px;
    height: 11px;
    stroke: var(--home-app-color);
    stroke-width: 2;
}

/* Menús de las herramientas (Crear y usuario): ítems con ícono; los que están en construcción, en gris.
   "+ Crear" de Inicio (.home-create) es el mismo menú: se ve igual. */
.nav-central .nav-menu,
.home-create .nav-menu {
    min-width: 210px;
    padding: 6px 0;
}

.nav-central .nav-menu > li > a,
.home-create .nav-menu > li > a {
    display: flex;
    align-items: center;
    padding: 7px 16px;
    color: #333;
}

.nav-central .nav-menu > li > a:hover,
.nav-central .nav-menu > li > a:focus,
.home-create .nav-menu > li > a:hover,
.home-create .nav-menu > li > a:focus {
    background: #f1f3f6;
    color: #0D1B6C;
}

.nav-central .nav-menu > li > a.nav-pending,
.nav-central .nav-menu > li > a.nav-pending:hover,
.nav-central .nav-menu > li > a.nav-pending:focus,
.home-create .nav-menu > li > a.nav-pending,
.home-create .nav-menu > li > a.nav-pending:hover,
.home-create .nav-menu > li > a.nav-pending:focus {
    background: transparent;
    color: #a0a7b0;
    cursor: not-allowed;
}

.nav-central .nav-menu .nav-menu-icon,
.home-create .nav-menu .nav-menu-icon {
    flex: 0 0 auto;
    margin-right: 8px;
}

.nav-central .nav-menu .nav-badge {
    position: static;
    margin-left: auto;
}

/* Búsqueda de pantallas: caja redonda semitransparente sobre la barra; blanca al escribir */
.nav-central .nav-search {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-central .nav-search-box {
    position: relative;
    width: 100%;
}

.nav-central .nav-search-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
    transition: background-color var(--nav-hover-duration) var(--nav-ease),
                border-color var(--nav-hover-duration) var(--nav-ease);
}

.nav-central .nav-search-field:hover {
    background: rgba(255, 255, 255, .16);
}

.nav-central .nav-search-field:focus-within {
    border-color: #fff;
    background: #fff;
}

.nav-central .nav-search-glass {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: rgba(255, 255, 255, .75);
    pointer-events: none;
}

.nav-central .nav-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 30px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    outline: none;
}

.nav-central .nav-search-input::placeholder {
    color: rgba(255, 255, 255, .7);
    opacity: 1;
}

/* Bootstrap le da a <kbd> fondo oscuro; aquí es solo una pista con borde */
.nav-central .nav-search-kbd {
    flex: 0 0 auto;
    margin-right: 8px;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, .75);
    font-family: inherit;
    font-size: 10px;
    line-height: 16px;
}

.nav-central .nav-search-field:focus-within .nav-search-glass,
.nav-central .nav-search-field:focus-within .nav-search-input::placeholder,
.nav-central .nav-search-field:focus-within .nav-search-kbd {
    color: #8a93a0;
}

.nav-central .nav-search-field:focus-within .nav-search-input {
    color: #333;
}

.nav-central .nav-search-field:focus-within .nav-search-kbd {
    border-color: #d5dae1;
}

/* En pantallas táctiles no se muestra la pista del atajo */
@media (hover: none) {
    .nav-central .nav-search-kbd {
        display: none;
    }
}

/* × de la caja: la cierra (como Esc). Gris sobre la caja blanca, a la derecha. */
.nav-central .nav-search-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a93a0;
    transition: background-color var(--nav-hover-duration) var(--nav-ease), color var(--nav-hover-duration) var(--nav-ease);
}

.nav-central .nav-search-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-central .nav-search-close:hover,
.nav-central .nav-search-close:focus-visible {
    background: #eef0f3;
    color: #0D1B6C;
    outline: none;
}

/* Con la búsqueda abierta el "+" queda debajo de la caja: se oculta (no se alcanza con Tab) */
.nav-central.is-searching .nav-create {
    visibility: hidden;
}

/* Pantalla grande: solo la lupa; con un clic o Ctrl+K la caja (blanca) se abre en la misma barra, desde la lupa hacia
   la izquierda, del ancho que mide navigator.js (--nav-search-open-width) */
@media (min-width: 1200px) {
    .nav-central .nav-search-box {
        display: none;
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 1050;
        width: var(--nav-search-open-width, 360px);
        margin-top: calc(var(--nav-search-height) / -2);
    }

    .nav-central .nav-search.is-open .nav-search-box {
        display: block;
    }

    .nav-central .nav-search-field,
    .nav-central .nav-search-field:hover {
        height: var(--nav-search-height);
        border-color: #fff;
        border-radius: calc(var(--nav-search-height) / 2);
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    }

    .nav-central .nav-search-glass,
    .nav-central .nav-search-input::placeholder,
    .nav-central .nav-search-kbd {
        color: #8a93a0;
    }

    .nav-central .nav-search-input {
        color: #333;
    }

    .nav-central .nav-search-kbd {
        border-color: #d5dae1;
    }
}

/* Resultados: lista blanca debajo de la caja, alineada a su derecha */
.nav-central .nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    width: var(--nav-search-results-width);
    min-width: 100%;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 6px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    color: #333;
    text-align: left;
}

.nav-central .nav-search-results[hidden] {
    display: none;
}

.nav-central .nav-search-group {
    padding: 6px 8px 4px;
    color: #8a93a0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Cada resultado: el nombre en la primera línea, la ruta debajo (solo páginas activas: las en construcción no salen) */
/* Cada resultado (Paul, 2026-10-23, como su referencia _cot_): ícono, el texto (nombre; en un registro, su N° de
   documento; las carpetas) y, en un registro, su módulo como etiqueta a la derecha */
.nav-central .nav-search-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    color: #222;
    cursor: pointer;
}

.nav-central a.nav-search-item:hover,
.nav-central a.nav-search-item:focus {
    color: #222;
    text-decoration: none;
}

.nav-central .nav-search-item.is-active {
    background: #f1f3f6;
}

.nav-central .nav-search-name {
    flex: 1 1 auto;
    font-weight: 600;
}

.nav-central .nav-search-item.is-active .nav-search-name {
    color: #0D1B6C;
}

.nav-central .nav-search-name mark {
    padding: 0;
    border-radius: 2px;
    background: #e3ecfb;
    color: inherit;
}

.nav-central .nav-search-path {
    overflow: hidden;
    color: #8a93a0;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-central .nav-search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--nav-search-icon);
}

.nav-central .nav-search-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-central .nav-search-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.nav-central .nav-search-code {
    color: #4b5563;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.nav-central .nav-search-module {
    flex: 0 0 auto;
    align-self: center;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--nav-search-module-bg);
    color: var(--nav-search-module-text);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Buscando: los resultados de antes se ven apagados hasta que llegan los nuevos */
.nav-central .nav-search-results.is-loading .nav-search-row {
    opacity: var(--nav-search-loading-opacity);
}

/* Resultado con su ⚡ al lado, a la altura del nombre */
.nav-central .nav-search-row {
    position: relative;
}

.nav-central .nav-search-row > .nav-search-item {
    padding-right: 38px;
}

.nav-central .nav-search-row > .nav-bolt {
    top: 5px;
    right: 8px;
    margin-top: 0;
}

/* Avisos: sin resultados, "escribe al menos 2 letras", "Buscando…" y el error con Reintentar */
.nav-central .nav-search-empty {
    padding: 12px 10px;
    color: #8a93a0;
}

.nav-central .nav-search-empty.is-error {
    color: #b42318;
}

.nav-central .nav-search-retry {
    padding: 0;
    border: 0;
    background: none;
    color: #0D1B6C;
    font-weight: 600;
    text-decoration: underline;
}

.nav-central .nav-search-foot {
    margin-top: 4px;
    padding: 6px 8px 2px;
    border-top: 1px solid #eef0f3;
    color: #a0a7b0;
    font-size: 10px;
}

@media (hover: none) {
    .nav-central .nav-search-foot {
        display: none;
    }
}

/* "Reducir movimiento" (Windows/navegador): sin transiciones, sin animaciones de aparición y sin "presionado" */
@media (prefers-reduced-motion: reduce) {
    .nav-central,
    .nav-central .navbar-nav > li > a,
    .nav-central .navbar-toggle,
    .nav-central .nav-logo,
    .nav-central .nav-home svg,
    .nav-central .nav-icon,
    .nav-central .nav-avatar,
    .nav-central .nav-search-field,
    .nav-central .nav-search-close,
    .nav-central .nav-bolt,
    .nav-central .nav-bolt svg,
    .nav-central .nav-apps-item,
    .nav-central .nav-apps-icon {
        transition: none;
    }

    .nav-central .open > .dropdown-menu,
    .nav-central .nav-search.is-open .nav-search-box,
    .nav-central .nav-search-results:not([hidden]),
    .nav-central .navbar-collapse.collapse.in,
    .nav-central .nav-panel-sub.is-active {
        animation: none;
    }

    .nav-central .navbar-toggle:active,
    .nav-central .nav-brand:active .nav-logo,
    .nav-central .nav-apps-item:active .nav-apps-icon,
    .nav-central .nav-home > a:active svg,
    .nav-central .nav-icon:active {
        transform: none;
    }
}

/* Pantallas medianas: todas las áreas en una sola línea junto a la búsqueda */
@media (min-width: 1200px) and (max-width: 1365px) {
    .nav-central .navbar-nav > li > a {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* Pantallas chicas (menos de 1200px): el menú se abre con el botón; el panel va en una columna y las páginas
   de la carpeta tocada aparecen debajo de la lista. Bootstrap pasa a este modo recién bajo 768px, por eso
   aquí se repiten sus reglas de pantalla chica para el rango 768-1199px. */
@media (max-width: 1199px) {
    .nav-central .nav-bar {
        flex-wrap: wrap;
    }

    .nav-central .nav-start {
        order: 1;
        margin-right: auto;
    }

    .nav-central .nav-tools {
        order: 2;
        margin-right: -6px;
    }

    /* La fila de búsqueda se ubica respecto de toda la barra (a todo el ancho) */
    .nav-central .nav-search {
        position: static;
    }

    .nav-central .navbar-toggle {
        display: block;
        float: none;
        margin: 8px 0 8px 4px;
    }

    /* Sin campana: Notificaciones va dentro del menú del avatar */
    .nav-central .nav-bell {
        display: none;
    }

    .nav-central .navbar-collapse {
        order: 3;
        flex: 0 0 100%;
        margin: 0 -15px;
        padding: 0 15px;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .nav-central .navbar-collapse.collapse {
        display: none !important;
    }

    .nav-central .navbar-collapse.collapse.in {
        display: block !important;
        max-height: calc(100vh - 50px);
        overflow-y: auto !important;
    }

    .nav-central .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

    .nav-central .navbar-nav > li {
        float: none;
    }

    .nav-central .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav-central .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        border: 0;
        box-shadow: none;
    }

    /* La lupa abre la caja sobre toda la barra (como Facebook), con × para volver; los resultados, debajo */
    .nav-central .nav-search-box {
        display: none;
    }

    .nav-central .nav-search.is-open .nav-search-box {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        width: auto;
        padding: 0 15px;
        background: var(--nav-bg);
    }

    .nav-central .nav-search.is-open .nav-search-field {
        flex: 1 1 auto;
        height: var(--nav-search-height);
        border-radius: calc(var(--nav-search-height) / 2);
    }

    /* 16px: con menos, el iPhone hace zoom al escribir */
    .nav-central .nav-search-input {
        font-size: 16px;
    }

    .nav-central .nav-search-results {
        top: calc(100% - 2px);
        left: 15px;
        right: 15px;
        width: auto;
        min-width: 0;
        max-height: calc(100vh - 110px);
    }

    .nav-central .navbar-nav .open .dropdown-menu {
        background: #fff;
    }

    .nav-central .navbar-nav > li.open > .dropdown-menu.nav-panel {
        display: block;
        width: auto;
        max-width: none;
        max-height: none;
        box-shadow: none;
    }

    .nav-central .nav-panel-list {
        width: auto;
        padding: 4px 0;
    }

    .nav-central .nav-panel-list > li > a {
        padding: 8px 15px 8px 25px;
    }

    .nav-central .nav-panel-side {
        width: auto;
        padding: 4px 0 8px 15px;
    }
}

/* Celular (paso 11, 2026-10-22): sin botón del menú ni áreas; en el celular nadie recorre menús, se busca. A la
   izquierda el botón de apps y el logo; a la derecha +, búsqueda y el avatar. */
@media (max-width: 767px) {
    .nav-central .navbar-toggle,
    .nav-central .navbar-collapse,
    .nav-central .navbar-collapse.collapse.in {
        display: none !important;
    }
}

/* Avatar del usuario (foto o iniciales) y su menú: tarjeta con nombre, tipo de usuario y usuario */
.nav-central .nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    overflow: hidden;
    background: #72b6f6;
    color: #0D1B6C;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    transition: border-color var(--nav-hover-duration) var(--nav-ease);
}

.nav-central .nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-central .nav-user-toggle:hover .nav-avatar,
.nav-central .nav-user-toggle:focus .nav-avatar,
.nav-central .nav-user.open .nav-user-toggle .nav-avatar {
    border-color: #72b6f6;
}

.nav-central .nav-avatar-lg {
    width: 40px;
    height: 40px;
    border-color: #e3e7ed;
    font-size: 14px;
}

.nav-central .nav-user-menu {
    min-width: 230px;
}

.nav-central .nav-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px 4px;
}

.nav-central .nav-user-info {
    min-width: 0;
    line-height: 1.4;
}

.nav-central .nav-user-name {
    font-weight: bold;
    color: #0D1B6C;
}

.nav-central .nav-user-type {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    background: #eef1f5;
    color: #5a6370;
    font-size: 11px;
    vertical-align: 1px;
}

.nav-central .nav-user-login {
    display: block;
    color: #6b7480;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Celular: solo el cuadro de la "C" (sin "Central"), para que entren los íconos de la derecha */
@media (max-width: 575px) {
    .nav-central .nav-brand-text {
        display: none;
    }
}

/*================== Inicio (sistema/menu/default.aspx) ==================*/
/* Saludo y el lanzador de apps; una app abierta con su cabecera (⌂, nombre con ">") (Assets/js/home-launcher.js). Las
   tarjetas de cada app: Assets/js/home.js; arrastrar y soltar: home-drag.js; Preferencias: home-preferences.js. El
   botón de apps del header tiene sus estilos en la sección "Header". Todos los valores que se ajustan están en este
   bloque, agrupados por propósito: colores, tamaños y animaciones. Los scripts leen de aquí la duración de las
   animaciones que manejan con JavaScript (--home-move-duration, --home-remove-duration, --home-enter-duration,
   --home-switch-out-duration). El ⚡ del menú y de la búsqueda (sección "Header") usa los mismos colores. */
:root {
    /* Colores */
    --home-accent: #0D1B6C;                         /* azul del header: íconos, títulos, 📌 fijado */
    --home-text: var(--page-text);
    --home-muted: #6b7480;                          /* fecha, pista y textos de los bloques vacíos */
    --home-pending: #a0a7b0;                        /* enlaces en construcción */
    --home-hero-bg: var(--sheet-bg);                /* saludo y tarjetas: hojas blancas sobre el fondo de la página */
    --home-hero-border: var(--sheet-border);
    --home-card-bg: var(--sheet-bg);
    --home-card-border: var(--sheet-border);
    --home-card-border-hover: #7fb8e6;
    --home-card-shadow-hover: 0 4px 12px rgba(13, 27, 108, .10);
    --home-empty-border: #c9d3df;                   /* bloque vacío: borde punteado */
    --home-action-off: #8a93a0;                     /* ⚡ / 📌 / ✕ sin marcar (transparentes) */
    --home-action-hover-bg: rgba(13, 27, 108, .08);
    --home-bolt-on: #f5b400;                        /* ⚡ amarillo: la página está en Módulos */
    --home-bolt-on-stroke: #a87800;
    --home-pin-on: #0D1B6C;                         /* 📌 fijado */
    --home-remove-hover: #c62828;                   /* ✕ al pasar el mouse */

    /* Tamaños */
    --home-cards-per-row: 5;                        /* filas de 5: maxShortcuts y maxCards (5, una fila) y maxTaskCards
                                                       (10, dos filas) en home-store.js */
    --home-card-min-width: 180px;                   /* si no entran, la fila se desliza de lado (ver @media abajo) */
    --home-width: 1040px;                           /* columna centrada de Inicio (con aire a los costados) */
    --home-section-gap: 20px;                       /* espacio arriba del saludo y entre el saludo y el lanzador o la
                                                       app abierta */
    --home-card-min-height: 56px;                   /* también la altura del bloque vacío */
    --home-progress-height: 6px;                    /* barra de avance de una tarea con subtareas */
    --home-progress-track: #e3e6ec;                 /* fondo de la barra: gris claro, se ve aunque no haya avance */
    --home-progress-fill: #22a06b;                  /* lo terminado, en verde */
    /* Animaciones de Tareas (Paul, 2026-10-23): al entrar a la app y al refrescar (clic en la pestaña elegida), los
       números de las pestañas cuentan desde 0 y las barras de avance se llenan con su "2/3" contando; al pasar a otro
       estado, las barras se llenan solo la primera vez que se ve ese estado (Assets/js/home-tasks.js). 0s = sin animación */
    --home-progress-fill-duration: .8s;             /* la barra se llena hasta su valor */
    --home-progress-fill-delay: .25s;               /* espera a que la tarjeta aparezca */
    --home-tasks-count-up-duration: .6s;            /* el número de cada pestaña cuenta de 0 a su valor */
    --home-card-color-width: 4px;                   /* franja del color de una tarea (🎨), a la izquierda */
    /* Módulos (Paul, 2026-10-20): el azul del botón "Exportar" (btn-primary de bootstrap.min.css) con texto blanco,
       y más bajas que las demás */
    --home-module-card-bg: #428bca;
    --home-module-card-bg-hover: #3071a9;
    --home-module-card-border: #357ebd;
    --home-module-card-border-hover: #285e8e;
    --home-module-card-text: #fff;
    --home-module-card-min-height: 40px;
    /* Búsquedas Recientes (Paul, 2026-10-20): tinte navy claro, como la cabecera de las grillas; título navy y la
       página en gris (contraste 4.8:1) */
    --home-record-card-bg: #e9edf7;
    --home-record-card-bg-hover: #dfe5f4;
    --home-record-card-border: #d5dcee;
    /* Botones del saludo (Paul, 2026-10-20), con los colores de los botones de las pantallas: "+ Crear" = verde de
       "+ Nuevo" (btn-success); Reportes = naranja de "Refrescar" (Cuentas por Cobrar), apagado mientras esté en
       construcción */
    --home-btn-create-bg: #5cb85c;
    --home-btn-create-border: #4cae4c;
    --home-btn-create-hover-bg: #449d44;
    --home-btn-create-hover-border: #398439;
    --home-btn-reports-bg: #f0ad4e;
    --home-btn-reports-border: #eea236;
    --home-btn-pending-opacity: .6;
    /* Colores para marcar una tarea (🎨): las claves están en home-store.js (taskColors). Pocos y bien distintos. */
    --home-task-color-rojo: #e5484d;
    --home-task-color-naranja: #f76b15;
    --home-task-color-amarillo: #f5b400;
    --home-task-color-verde: #30a46c;
    --home-task-color-azul: #0090ff;
    --home-task-color-morado: #8e4ec6;
    /* Prioridad de una tarea: etiqueta con fondo suave y texto oscuro del mismo tono (contraste sobre 4.5:1) */
    --home-priority-high-bg: #fdecec;
    --home-priority-high-text: #b42318;
    --home-priority-medium-bg: #fff4e0;
    --home-priority-medium-text: #a15c07;
    --home-priority-low-bg: #eef1f5;
    --home-priority-low-text: #4b5563;
    --home-card-gap: 14px;
    --home-card-radius: 8px;
    --home-action-size: 22px;                       /* botones ⚡ / 📌 / ✕ (también en el menú) */
    /* Lanzador de apps (Paul, 2026-10-23: cuadros sólidos): cada app es un cuadro de su color con su ícono en blanco
       y debajo su nombre, como en la pantalla de un celular; las que están en construcción dicen "Próximamente". Tres
       por fila (en el celular, dos). Tareas lleva un número: navy (el rojo es solo de las notificaciones del header). */
    --home-tiles-per-row: 3;
    --home-tile-width: 124px;
    --home-tile-box: 72px;                          /* el cuadro de cada app */
    --home-tile-radius: 18px;
    --home-tile-icon: 32px;                         /* el ícono dentro del cuadro */
    --home-tile-icon-color: #fff;
    --home-tile-gap-x: 36px;
    --home-tile-gap-y: 24px;
    --home-tile-badge-bg: #0D1B6C;
    --home-tile-soon: #8a93a0;                      /* "Próximamente", bajo el nombre */
    /* Colores de las apps (Paul, 2026-10-23): uno por app, de colores que CENTRAL ya usa (sin rojo: es de las
       notificaciones y los errores). Cada app lleva el suyo en el lanzador, en el cuadro de apps del header (su ícono
       en un cuadrito), en la cabecera de la app abierta y en Preferencias. */
    --home-app-color-home: #0D1B6C;                 /* Inicio: el navy del header */
    --home-app-color-tasks: #1f8f5f;                /* Tareas: el verde del ✓ y de las barras de avance */
    --home-app-color-records: #4b5a8a;              /* Recientes: el navy de sus tarjetas */
    --home-app-color-shortcuts: #2f78b7;            /* Módulos: el azul de sus tarjetas (btn-primary) */
    --home-app-color-projects: #d9620f;             /* Proyectos: naranja (colores de las tareas) */
    --home-app-color-teams: #8048b8;                /* Equipos: morado */
    --home-app-color-dashboard: #b07d00;            /* Dashboard: ámbar */
    --home-app-alpha: 90%;                          /* cuánto se ve el color del cuadro: 100% = completamente sólido;
                                                       menos deja pasar un poco el fondo de la página */
    --home-app-hover-light: 18%;                    /* al pasar el mouse el cuadro se aclara por dentro (blanco que se le
                                                       mezcla), como la "C" del logo; 0% = no cambia */
    --home-app-press-scale: .9;                     /* al hacer clic se achica, como el logo (--nav-press-scale) */
    --home-app-press-duration: .12s;                /* como el logo (--nav-press-duration) */
    --home-app-shadow-size: 0 4px 12px;             /* sombra bajo el cuadro, del color de la app */
    --home-app-shadow-mix: 30%;                     /* cuánto color lleva esa sombra; 0% = sin sombra */
    --home-app-color: var(--home-app-color-home);   /* el de cada app lo pone "Colores de las apps", más abajo */
    /* Brillo que sigue al mouse dentro del cuadro de cada app del lanzador (Assets/js/home-glow.js; Paul, 2026-10-23):
       una luz blanca tenue que nunca sale del cuadro, debajo del ícono. No va en el botón de apps del header. */
    --home-glow-size: 125px;                        /* diámetro de la luz: mucho más grande que el cuadro (--home-tile-box,
                                                       72px), pero el cuadro la recorta, así nunca sale del ícono */
    --home-glow-color: #fff;
    --home-glow-opacity: .12;                       /* intensidad en el centro (se apaga hacia el borde); 0 = sin brillo */
    --home-glow-fade: .3s;                          /* aparece y se desvanece así al entrar y salir del cuadro */
    /* Cabecera de una app: el nombre (vuelve a mostrar la app) y, aparte, ">" (la siguiente app), solo la flecha */
    --home-app-next-size: 28px;                     /* lo que se puede tocar alrededor de la flecha */
    --home-app-next-shift: translateX(3px);         /* al pasar el mouse la flecha se corre a la derecha (hacia donde
                                                       lleva); "none" = quieta */
    --home-app-next-duration: .2s;
    /* App Tareas (paso 9): la barra con las pestañas por estado, buscar, filtro y ••• */
    --home-tasks-tab-text: #4b5a8a;                 /* pestaña sin elegir: el gris navy de los totales de las grillas */
    --home-tasks-count-bg: #e9edf7;                 /* número de cada pestaña: el tinte de la cabecera de las grillas */
    --home-tasks-count-empty: #9aa2ae;              /* una pestaña sin tareas: su 0, más claro */
    /* Las pestañas como un control segmentado (Paul, 2026-10-23; referencia color_reference.png): una tira blanca con
       las cuatro adentro y solo la elegida pintada con el pastel de su estado, con los colores de los estados de Cuentas
       por Cobrar (cuenta_cobrar_listado.aspx); por código de estado, nunca por nombre */
    --home-tasks-tab-pending-bg: #FFE2C2;           /* Pendiente: naranja pálido */
    --home-tasks-tab-progress-bg: #FFFFCC;          /* En proceso: el de "Por Cobrar" */
    --home-tasks-tab-done-bg: #B5E6A2;              /* Ejecutado: el de "Cancelado" */
    --home-tasks-tab-annulled-bg: #F4AF8C;          /* Anulado: el de "Anulado" */
    --home-tasks-tab-status-text: #1F2937;          /* texto oscuro sobre el pastel, como en Cuentas por Cobrar */
    --home-tasks-tab-hover-mix: 45%;                /* una pestaña sin elegir, al pasar el mouse: un poco de su color
                                                       (cuánto de su pastel); 0% = sin color */
    --home-tasks-tab-active-shadow: 0 1px 2px rgba(13, 27, 108, .15); /* la elegida: su color, negrita y esta sombra
                                                       suave; "none" = sin sombra */
    --home-tasks-tab-radius: 6px;                   /* esquinas de cada pestaña: las de los botones del saludo */
    --home-tasks-tab-height: 28px;
    --home-tasks-tab-gap: 4px;                      /* espacio entre una pestaña y otra (sin nada detrás: Paul, 2026-10-23) */
    --home-tasks-chip-height: 36px;                 /* celular: el botón de estado, más alto para el dedo */
    /* Agregar rápido: el "+" al final de las tarjetas de cada estado, como Trello (home-tasks-quick.js; Paul, 2026-10-23) */
    --home-quick-border: #c9d3df;                   /* el "+": una tarjeta vacía con borde punteado */
    --home-quick-icon: #8a93a0;
    --home-quick-min-height: 76px;                  /* como una tarjeta de tarea */
    --home-quick-saving-opacity: .55;               /* la tarjeta que se está guardando, apagada */
    /* Mover a otro estado arrastrando una tarjeta a una pestaña (home-tasks-move.js) */
    --home-move-fly-duration: .25s;                 /* la copia vuela a la pestaña (o vuelve a su lugar) */
    --home-move-tilt: 2deg;                         /* la copia va un poco inclinada mientras se arrastra; 0deg = derecha */
    --home-move-source-opacity: .35;                /* la tarjeta que se arrastra, en su lugar */
    --home-move-over-scale: .5;                     /* la copia sobre una pestaña: más chica, para ver la pestaña; 1 = igual */
    --home-drop-zone-mix: 40%;                      /* las pestañas de destino, con un poco de su color */
    --home-drop-target-scale: 1.08;                 /* la pestaña bajo el mouse, un poco más grande */
    --home-count-bump-duration: .45s;               /* el número de la pestaña que recibe tarjetas da un salto */
    --home-count-bump-scale: 1.35;
    /* Seleccionar varias (home-tasks-select.js) */
    --home-select-color: #0D1B6C;                   /* la casilla marcada y el borde de la tarjeta elegida */
    --home-select-bg: #eef3ff;                      /* la tarjeta elegida, un tinte azul */
    --home-select-ring: 0 0 0 3px rgba(13, 27, 108, .12); /* aura suave alrededor de la elegida (Paul, 2026-10-23: antes una
                                                       segunda línea navy, de golpe: 0 0 0 1px #0D1B6C) */
    --home-select-fade: .25s;                       /* elegir o quitar: el borde, el tinte y la casilla aparecen y se van
                                                       suave (también pasando por encima); 0s = de golpe */
    --home-select-box-radius: 4px;                  /* la casilla es cuadrada (el círculo es terminar) */
    --home-select-unselectable-opacity: .5;         /* las que no puedo mover, apagadas */
    --home-select-bar-bottom: 20px;                 /* la barra de abajo, a esta distancia del borde */
    --home-select-bar-radius: 12px;
    --home-select-bar-shadow: 0 8px 24px rgba(13, 27, 108, .22);
    --home-select-bar-space: 90px;                  /* lugar que deja la página abajo mientras se ve la barra */
    --home-select-move-hover-mix: 8%;               /* "Mover a": al pasar el mouse, su color un poco más oscuro */
    /* Caras de una tarea en su tarjeta (Paul, 2026-10-23, en vez de "Creada por"): quien la creó y sus responsables */
    --home-face-size: 24px;
    --home-face-overlap: -7px;                      /* cuánto se monta cada cara sobre la anterior; 0 = separadas */
    --home-face-ring: #fff;                         /* el borde que separa una cara de otra */
    --home-face-bg: #72b6f6;                        /* sin foto: las iniciales sobre este color (como el avatar del header) */
    --home-face-text: #0D1B6C;
    --home-face-more-bg: #e9edf7;                   /* "+N" */
    --home-private-color: #8a93a0;                  /* 🔒 de una tarea privada */
    /* Etiquetas en la tarjeta (home-tasks-labels.js): personales */
    --home-label-bg: #f4f6fb;
    --home-label-border: #d5dcee;
    --home-label-text: #4b5a8a;
    --home-label-height: 20px;
    /* Filtros puestos, debajo de las pestañas (home-tasks-chips.js) */
    --home-chip-bg: #eef3ff;
    --home-chip-border: #b9cdf3;
    --home-chip-text: #0D1B6C;
    --home-chip-key: #4b5a8a;                       /* "Área:", más suave que el valor */
    --home-chip-height: 26px;
    --home-tasks-count-on-tab-bg: rgba(255, 255, 255, .75); /* el número dentro de la elegida: pastilla blanca */
    --home-tasks-search-width: 220px;
    --home-tasks-archived-opacity: .62;             /* Archivadas: las tarjetas se ven apagadas */
    --home-tasks-loading-opacity: .55;              /* al buscar: lo que se veía, apagado hasta que llega lo nuevo */

    /* Animaciones: duración y curva de cada una */
    --home-ease: cubic-bezier(.2, .8, .2, 1);
    --home-hover-duration: .15s;                    /* hover de la tarjeta: borde, sombra y elevación */
    --home-hover-lift: -2px;
    --home-toggle-duration: .3s;                    /* ⚡ / 📌 al marcarse o desmarcarse: rebota y toma color */
    --home-remove-duration: .2s;                    /* tarjeta que se quita: se desvanece y se achica */
    --home-move-duration: .3s;                      /* tarjetas que cambian de lugar (fijar, quitar, soltar) */
    --home-enter-duration: .25s;                    /* tarjeta nueva en un bloque: aparece */
    --home-appear-duration: .25s;                   /* entrada al cargar Inicio: cada tarjeta, con un fundido */
    --home-appear-offset: -8px;                     /* y corriéndose estos px hacia la derecha (sutil) */
    --home-appear-stagger: 40ms;                    /* cada columna empieza esto después de la anterior (izq. a der.) */
    --home-check-duration: .25s;                    /* ✓ de una tarea: el círculo verde se ve esto antes de que la
                                                       tarjeta se desvanezca */
    --home-check-size: 16px;
    --home-skeleton-bg: #e5e8ee;                    /* esqueleto de Reporte Tareas mientras cargan: gris de las líneas */
    --home-skeleton-pulse: 2s;                      /* late (opacity 1 → .5 → 1) cada 2s, como Flowbite */
    --home-skeleton-card-height: 80px;              /* alto de una tarjeta de tarea típica (no se mueve nada al llegar) */
    --home-check-border: #b8c0cc;                   /* círculo vacío */
    --home-lifted-scale: 1.04;                      /* tarjeta que se mueve o se arrastra: va por encima de las demás */
    --home-lifted-shadow: 0 10px 24px rgba(13, 27, 108, .22);
    --home-bolt-hint-duration: .15s;                /* ⚡ del menú y de la búsqueda: aparece al pasar el mouse */
    /* Cambiar de app (Paul, 2026-10-22: que se note, sin deslizar nada): lo que se deja se desvanece y después lo nuevo
       entra como al cargar Inicio (--home-appear-*) */
    --home-switch-out-duration: .15s;               /* las tarjetas de la app que se deja (o todo el lanzador) */
    --home-switch-duration: .15s;                   /* la cabecera de la app o el título del lanzador, al aparecer */
}

.home {
    max-width: var(--home-width);
    margin: 0 auto;
    padding: var(--home-section-gap) 15px 48px;
}

/* Íconos Tabler en SVG: trazo del color del texto */
.home svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Saludo (como figma_1.png, compacto desde 2026-10-20): fecha y "Hola, …" a la izquierda; Reportes y Crear a la
   derecha, centrados en su alto. Preferencias pasó al menú del usuario del header (se usa poco). En el celular, una
   fila de botones con nombre debajo del saludo (ver @media abajo). */
.home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 20px 24px;
    border: 1px solid var(--home-hero-border);
    border-radius: var(--home-card-radius);
    background: var(--home-hero-bg);
    box-shadow: var(--sheet-shadow);
}

.home-hero-text {
    min-width: 0;
}

.home-date {
    color: var(--home-muted);
}

.home-greeting {
    margin: 4px 0 0;
    color: var(--home-accent);
    font-size: 22px;
    font-weight: 600;
}

.home-hero-actions {
    display: flex;
    flex: 0 0 auto;
}

.home-hero-buttons {
    display: flex;
    gap: 8px;
}

/* Reportes y Crear: botones blancos con borde, ícono y nombre */
.home-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #cfd5df;
    border-radius: 6px;
    background: #fff;
    color: var(--home-text);
    font-weight: 600;
    transition: border-color var(--home-hover-duration) ease, color var(--home-hover-duration) ease,
                background-color var(--home-hover-duration) ease;
}

.home-hero-btn svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

/* + Crear: verde de "+ Nuevo", más oscuro al pasar el mouse o con su menú abierto */
.home-create > .home-hero-btn {
    border-color: var(--home-btn-create-border);
    background: var(--home-btn-create-bg);
    color: #fff;
}

.home-create > .home-hero-btn:hover,
.home-create > .home-hero-btn:focus-visible,
.home-create.open > .home-hero-btn {
    border-color: var(--home-btn-create-hover-border);
    background: var(--home-btn-create-hover-bg);
    color: #fff;
}

/* Reportes: naranja de "Refrescar", apagado y sin hover mientras esté en construcción */
.home-hero-btn.is-pending,
.home-hero-btn.is-pending:hover,
.home-hero-btn.is-pending:focus-visible {
    border-color: var(--home-btn-reports-border);
    background: var(--home-btn-reports-bg);
    color: #fff;
    opacity: var(--home-btn-pending-opacity);
    cursor: not-allowed;
}

/* Celular (decidido 2026-10-20, en vez de los íconos apilados de figma_responsive.png): el saludo arriba y debajo una
   fila de botones con ícono y nombre (Crear, Reportes), de 40px de alto para tocarlos fácil; ocupan todo el ancho,
   cada uno según su nombre. Los íconos solos no se entienden en un celular (no hay tooltip). */
@media (max-width: 767px) {
    .home-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    /* Reportes y después + Crear, el mismo orden que en pantalla grande (paso 10) */
    .home-hero-buttons {
        flex: 1 1 auto;
    }

    .home-create {
        display: flex;
    }

    .home-hero-buttons > .home-hero-btn,
    .home-create,
    .home-create > .home-hero-btn {
        flex: 1 1 0;
    }

    .home-hero-btn {
        justify-content: center;
        height: 40px;
        padding: 0 8px;
    }
}

/* Cambiar de app (home-launcher.js, switchTo): lo que se deja se desvanece (entre dos apps, solo su contenido; desde o
   hacia el lanzador, toda la vista; al volver a mostrar la misma vista con su nombre, solo su contenido: las tarjetas o
   las apps del lanzador) y ya no responde al mouse. Después lo nuevo entra como al cargar Inicio y la
   cabecera de la app o el título del lanzador aparecen con un fundido corto. Solo opacity y una sola vez. */
.home-view.is-switching-out,
.home-app-body.is-switching-out,
.home-launcher-body.is-switching-out {
    pointer-events: none;
    animation: home-switch-out var(--home-switch-out-duration) ease-in forwards;
}

@keyframes home-switch-out {
    to {
        opacity: 0;
    }
}

.home-app-head.is-appearing,
.home-launcher-title.is-appearing {
    animation: home-switch var(--home-switch-duration) ease-out backwards;
}

@keyframes home-switch {
    from {
        opacity: 0;
    }
}

/* Colores de las apps (los valores, en --home-app-color-*): cada app toma el suyo en el lanzador (.home-tile), la app
   abierta (.home-app), el cuadro de apps del header (.nav-apps-item) y Preferencias (.home-pref). Inicio usa el que
   viene por defecto (--home-app-color). Una app nueva = una línea aquí y su color arriba. */
.home-tile[data-id="tasks"], .home-app[data-app="tasks"], .nav-apps-item[data-app="tasks"], .home-pref[data-key="tasks"] { --home-app-color: var(--home-app-color-tasks); }
.home-tile[data-id="records"], .home-app[data-app="records"], .nav-apps-item[data-app="records"], .home-pref[data-key="records"] { --home-app-color: var(--home-app-color-records); }
.home-tile[data-id="shortcuts"], .home-app[data-app="shortcuts"], .nav-apps-item[data-app="shortcuts"], .home-pref[data-key="shortcuts"] { --home-app-color: var(--home-app-color-shortcuts); }
.home-tile[data-id="projects"], .home-app[data-app="projects"], .nav-apps-item[data-app="projects"], .home-pref[data-key="projects"] { --home-app-color: var(--home-app-color-projects); }
.home-tile[data-id="teams"], .home-app[data-app="teams"], .nav-apps-item[data-app="teams"], .home-pref[data-key="teams"] { --home-app-color: var(--home-app-color-teams); }
.home-tile[data-id="dashboard"], .home-app[data-app="dashboard"], .nav-apps-item[data-app="dashboard"], .home-pref[data-key="dashboard"] { --home-app-color: var(--home-app-color-dashboard); }

/* Lanzador: "⌂ Inicio" al centro y las apps en filas de tres, centradas */
.home-launcher {
    margin-top: calc(var(--home-section-gap) + 8px);
}

.home-launcher-title,
.home-app-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: var(--home-text);
    font-size: 16px;
    font-weight: 600;
}

.home-launcher-title {
    margin-bottom: 20px;
}

.home-launcher-title svg {
    width: 20px;
    height: 20px;
    color: var(--home-accent);
}

.home-tiles {
    position: relative;     /* home-drag.js mide las apps con offsetLeft/offsetTop respecto de aquí */
    display: grid;
    grid-template-columns: repeat(var(--home-tiles-per-row), var(--home-tile-width));
    justify-content: center;
    gap: var(--home-tile-gap-y) var(--home-tile-gap-x);
}

.home-tile {
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

/* El brillo que sigue al mouse dentro del cuadro de una app (home-glow.js): una capa del tamaño del cuadro, recortada
   con sus mismas esquinas (nunca sale del cuadro), debajo del ícono y del número; adentro, la luz se mueve con
   transform y aparece o se desvanece con opacity */
.home-glow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--home-glow-fade) ease;
}

.home-glow.is-on {
    opacity: var(--home-glow-opacity);
}

.home-glow-spot {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--home-glow-size);
    height: var(--home-glow-size);
    margin: calc(var(--home-glow-size) / -2) 0 0 calc(var(--home-glow-size) / -2);
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--home-glow-color), transparent);
}

.home-tile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--home-text);
    cursor: pointer;
}

.home-tile-btn:focus-visible {
    outline: 2px solid var(--home-accent);
    outline-offset: 2px;
}

.home-tile-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 13px;
    font-weight: 600;
}

.home-tile-soon {
    color: var(--home-tile-soon);
    font-size: 11px;
    font-weight: normal;
}

/* El cuadro de la app: su color (--home-app-alpha deja pasar un poco el fondo) con su ícono en blanco. Como la "C" del
   logo: al pasar el mouse se aclara por dentro y al hacer clic se achica. El cuadrito de cada app en el cuadro de apps
   del header (sección "Header") usa los mismos dos colores. */
.home-tile-box,
.nav-central .nav-apps-icon {
    --home-app-fill: color-mix(in srgb, var(--home-app-color) var(--home-app-alpha), transparent);
    --home-app-fill-hover: color-mix(in srgb, color-mix(in srgb, var(--home-app-color), #fff var(--home-app-hover-light)) var(--home-app-alpha), transparent);
}

.home-tile-box {
    position: relative;
    isolation: isolate;     /* el brillo (z-index 0), el ícono (1) y el número (2) se ordenan solo dentro del cuadro */
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--home-tile-box);
    height: var(--home-tile-box);
    border-radius: var(--home-tile-radius);
    background: var(--home-app-fill);
    box-shadow: var(--home-app-shadow-size) color-mix(in srgb, var(--home-app-color) var(--home-app-shadow-mix), transparent);
    color: var(--home-tile-icon-color);
    transition: background-color var(--home-hover-duration) ease, box-shadow var(--home-hover-duration) ease,
                transform var(--home-app-press-duration) var(--home-ease);
}

.home-tile-box svg {
    position: relative;
    z-index: 1;
    width: var(--home-tile-icon);
    height: var(--home-tile-icon);
    stroke-width: 1.7;
}

.home-tile-btn:hover .home-tile-box,
.home-tile-btn:focus-visible .home-tile-box {
    background: var(--home-app-fill-hover);
}

.home-tile-btn:active .home-tile-box {
    transform: scale(var(--home-app-press-scale));
}

/* Número de Tareas (mis tareas abiertas), arriba a la derecha del cuadro */
.home-tile-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 2px solid var(--page-bg);
    border-radius: 10px;
    background: var(--home-tile-badge-bg);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.home-tile-badge[hidden] {
    display: none;
}

/* Arrastrar una app (home-drag.js): va por encima de las demás; las otras no reaccionan al mouse mientras tanto */
.home-tile.is-moving {
    transition: transform var(--home-move-duration) var(--home-ease);
}

.home-tile.is-lifted,
.home-tile.is-dragging {
    z-index: 3;
}

.home-tile.is-lifted .home-tile-box {
    box-shadow: var(--home-lifted-shadow);
    transform: scale(var(--home-lifted-scale));
}

.home-tiles.is-sorting,
.home-tiles.is-sorting * {
    cursor: grabbing !important;
}

.home-tiles.is-sorting .home-tile:not(.is-lifted) .home-tile-box {
    background: var(--home-app-fill);
    transform: none;
}

.home-tile.is-appearing {
    animation: home-appear var(--home-appear-duration) var(--home-ease) var(--home-appear-delay, 0ms) backwards;
}

/* Una app abierta: arriba ⌂ (vuelve al lanzador) y, al centro, su nombre con ">" (la siguiente app) */
.home-app {
    margin-top: var(--home-section-gap);
}

.home-app-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 0 0 12px;
}

.home-app-home {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--home-accent);
    transition: background-color var(--home-hover-duration) ease;
}

.home-app-home svg {
    width: 20px;
    height: 20px;
}

/* El nombre de la vista con su ícono (también "⌂ Inicio" en el lanzador): un botón que la vuelve a mostrar, como
   refrescar (Paul, 2026-10-23): Tareas vuelve a leer sus tarjetas, el lanzador vuelve a mostrar sus apps */
.home-app-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--home-text);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--home-hover-duration) ease, color var(--home-hover-duration) ease;
}

.home-app-name svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--home-app-color);
}

.home-app-home:hover,
.home-app-home:focus-visible,
.home-app-name:hover,
.home-app-name:focus-visible {
    background: var(--home-action-hover-bg);
    color: var(--home-accent);
    outline: none;
}

/* ">": la siguiente app, separada del nombre. Solo la flecha, sin fondo: al pasar el mouse se corre un poco a la
   derecha, hacia donde lleva */
.home-app-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--home-app-next-size);
    height: var(--home-app-next-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--home-accent);
    cursor: pointer;
}

.home-app-next:focus-visible {
    outline: 2px solid var(--home-accent);
    outline-offset: 1px;
}

.home-app-next .home-app-chevron {
    width: 16px;
    height: 16px;
    transition: transform var(--home-app-next-duration) var(--home-ease);
}

.home-app-next:hover .home-app-chevron,
.home-app-next:focus-visible .home-app-chevron {
    transform: var(--home-app-next-shift);
}

/* Proyectos, Equipos y Dashboard: se entran como las demás y dicen que están en construcción */
.home-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    border: 1px dashed var(--home-empty-border);
    border-radius: var(--home-card-radius);
    color: var(--home-muted);
    text-align: center;
}

.home-pending-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: var(--home-hero-bg);
    color: var(--home-accent);
}

.home-pending-icon svg {
    width: 24px;
    height: 24px;
}

.home-pending-title {
    color: var(--home-text);
    font-size: 14px;
}

.home-pending.is-appearing {
    animation: home-appear var(--home-appear-duration) var(--home-ease) backwards;
}

/* App Tareas (Assets/js/home-tasks.js, home-tasks-bar.js, home-tasks-filter.js; diseño home_2_desktop.png): una barra
   con las pestañas por estado a la izquierda (o "‹ Archivadas") y buscar, filtro y ••• a la derecha; debajo, las
   tarjetas de a 15 y "Ver más". */
.home-tasks-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 12px;
}

.home-tasks-tabs,
.home-tasks-archived,
.home-tasks-tools {
    display: flex;
    align-items: center;
}

.home-tasks-tabs {
    position: relative;     /* home-drag.js mide las pestañas con offsetLeft respecto de aquí */
    gap: var(--home-tasks-tab-gap);
    min-width: 0;
}

.home-tasks-tabs[hidden],
.home-tasks-archived[hidden] {
    display: none;
}

/* Pestaña: su nombre y su número; la elegida, una hoja blanca con borde (como un botón apretado) */
.home-tasks-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: var(--home-tasks-tab-text);
    white-space: nowrap;
    transition: background-color var(--home-hover-duration) ease, color var(--home-hover-duration) ease,
                border-color var(--home-hover-duration) ease;
}

.home-tasks-tab:hover,
.home-tasks-tab:focus-visible {
    background: var(--home-action-hover-bg);
    color: var(--home-accent);
    outline: none;
}

.home-tasks-tab.is-active {
    border-color: var(--sheet-border);
    background: var(--sheet-bg);
    box-shadow: var(--sheet-shadow);
    color: var(--home-accent);
    font-weight: 600;
}

.home-tasks-tab:focus-visible {
    box-shadow: 0 0 0 2px var(--home-accent);
}

.home-tasks-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--home-tasks-count-bg);
    color: var(--home-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.home-tasks-count:empty {
    display: none;
}

/* Las pestañas como en la referencia color_reference.png (Paul, 2026-10-23), sin ningún contenedor detrás: solo la
   elegida se pinta con el pastel de su estado (--home-tasks-tab-*-bg), texto oscuro, negrita y una sombra suave; las
   demás quedan sin color y al pasar el mouse muestran un poco del suyo (--home-tasks-tab-hover-mix). Sin bordes;
   esquinas como los botones del saludo (--home-tasks-tab-radius). El número: pastilla blanca en la elegida, gris en las
   demás; una pestaña sin tareas, su 0 en gris claro. */
/* El color de cada estado: en las pestañas, en el botón de estado del celular y su menú, y en los botones "Mover a" de
   Seleccionar */
.home-tasks-tab[data-status="TAREA_PENDIENTE"], .home-tasks-chip[data-status="TAREA_PENDIENTE"], .home-tasks-status-menu [data-key="TAREA_PENDIENTE"], .home-select-move[data-status="TAREA_PENDIENTE"] { --home-tasks-tab-bg: var(--home-tasks-tab-pending-bg); }
.home-tasks-tab[data-status="TAREA_EN_PROCESO"], .home-tasks-chip[data-status="TAREA_EN_PROCESO"], .home-tasks-status-menu [data-key="TAREA_EN_PROCESO"], .home-select-move[data-status="TAREA_EN_PROCESO"] { --home-tasks-tab-bg: var(--home-tasks-tab-progress-bg); }
.home-tasks-tab[data-status="TAREA_EJECUTADO"], .home-tasks-chip[data-status="TAREA_EJECUTADO"], .home-tasks-status-menu [data-key="TAREA_EJECUTADO"], .home-select-move[data-status="TAREA_EJECUTADO"] { --home-tasks-tab-bg: var(--home-tasks-tab-done-bg); }
.home-tasks-tab[data-status="TAREA_ANULADO"], .home-tasks-chip[data-status="TAREA_ANULADO"], .home-tasks-status-menu [data-key="TAREA_ANULADO"], .home-select-move[data-status="TAREA_ANULADO"] { --home-tasks-tab-bg: var(--home-tasks-tab-annulled-bg); }

.home-tasks-tab[data-status] {
    height: var(--home-tasks-tab-height);
    border-color: transparent;
    border-radius: var(--home-tasks-tab-radius);
}

.home-tasks-tab[data-status]:hover,
.home-tasks-tab[data-status]:focus-visible {
    background: color-mix(in srgb, var(--home-tasks-tab-bg) var(--home-tasks-tab-hover-mix), transparent);
    color: var(--home-accent);
}

.home-tasks-tab[data-status].is-active,
.home-tasks-tab[data-status].is-active:hover {
    border-color: transparent;
    background: var(--home-tasks-tab-bg);
    box-shadow: var(--home-tasks-tab-active-shadow);
    color: var(--home-tasks-tab-status-text);
    font-weight: 600;
}

.home-tasks-tab[data-status]:focus-visible {
    box-shadow: 0 0 0 2px var(--home-accent);
}

.home-tasks-tab[data-status].is-active .home-tasks-count {
    background: var(--home-tasks-count-on-tab-bg);
    color: var(--home-tasks-tab-status-text);
}

.home-tasks-tab[data-status].is-empty .home-tasks-count {
    color: var(--home-tasks-count-empty);
}

/* Arrastrar una pestaña para cambiar su lugar (home-tasks-bar.js con home-drag.js, solo con mouse): va por encima de las
   demás con la sombra de lo que se arrastra; las otras se deslizan para dejarle lugar */
.home-tasks-tab.is-draggable {
    -webkit-user-select: none;
    user-select: none;
}

.home-tasks-tab.is-moving {
    transition: transform var(--home-move-duration) var(--home-ease);
}

.home-tasks-tab[data-status].is-lifted,
.home-tasks-tab[data-status].is-dragging {
    position: relative;
    z-index: 3;
    box-shadow: var(--home-lifted-shadow);
}

.home-tasks-tabs.is-sorting,
.home-tasks-tabs.is-sorting * {
    cursor: grabbing !important;
}

/* Celular (paso 10): en vez de las pestañas (no entran), un botón con el estado elegido, pintado como la pestaña
   elegida (su color, negrita, el número en la pastilla blanca) y ▾; abre los cuatro estados en un menú (menu.js), cada
   uno con un punto de su color y el elegido pintado */
.home-tasks-chip {
    display: none;
    align-items: center;
    gap: 6px;
    height: var(--home-tasks-chip-height);
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: var(--home-tasks-tab-radius);
    background: var(--home-tasks-tab-bg);
    box-shadow: var(--home-tasks-tab-active-shadow);
    color: var(--home-tasks-tab-status-text);
    font-weight: 600;
    white-space: nowrap;
}

/* Filtros puestos (home-tasks-chips.js): una etiqueta por filtro, con ✕; "Quitar filtros" al final con dos o más */
.home-tasks-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: -4px 0 12px;
}

.home-tasks-chips[hidden] {
    display: none;
}

.home-chip {
    display: inline-flex;
    align-items: center;
    height: var(--home-chip-height);
    overflow: hidden;
    border: 1px solid var(--home-chip-border);
    border-radius: calc(var(--home-chip-height) / 2);
    background: var(--home-chip-bg);
    color: var(--home-chip-text);
}

.home-chip-text {
    height: 100%;
    padding: 0 4px 0 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.home-chip-key {
    color: var(--home-chip-key);
    font-weight: normal;
}

.home-chip-more {
    display: inline-block;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--home-chip-border);
    color: var(--home-chip-text);
    font-size: 10px;
    line-height: 16px;
}

.home-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
    padding: 0 4px 0 0;
    border: 0;
    background: transparent;
    color: var(--home-chip-key);
}

.home-chip-remove svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.home-chip-remove:hover,
.home-chip-remove:focus-visible,
.home-chip-text:hover {
    color: var(--home-accent);
    outline: none;
}

.home-chip-clear {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--home-muted);
}

.home-chip-clear:hover {
    color: var(--home-accent);
    text-decoration: underline;
}

.home-tasks-chip .home-tasks-count {
    background: var(--home-tasks-count-on-tab-bg);
    color: var(--home-tasks-tab-status-text);
}

/* Las caras de una tarea (Paul, 2026-10-23): quien la creó y sus responsables, superpuestas; foto o iniciales; el
   nombre al pasar el mouse. 🔒 antes, si es privada. */
.home-card-people {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.home-faces {
    display: inline-flex;
    align-items: center;
}

.home-face {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--home-face-size);
    height: var(--home-face-size);
    margin-left: var(--home-face-overlap);
    overflow: hidden;
    border: 2px solid var(--home-face-ring);
    border-radius: 50%;
    background: var(--home-face-bg);
    color: var(--home-face-text);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.home-face:first-child {
    margin-left: 0;
}

.home-face img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-face.is-extra {
    background: var(--home-face-more-bg);
    color: var(--home-label-text);
}

.home-private {
    display: inline-flex;
    color: var(--home-private-color);
}

.home-private svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* La tarjeta de una tarea, en columna: el contenido arriba y, al pie, mis etiquetas (home-tasks-labels.js) */
.home-card.is-task .home-card-face {
    display: flex;
    flex-direction: column;
}

.home-card.is-task .home-card-link {
    flex: 1 1 auto;
    height: auto;
}

.home-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0 12px 10px;
}

.home-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: var(--home-label-height);
    max-width: 100%;
    padding: 0 2px 0 6px;
    border: 1px solid var(--home-label-border);
    border-radius: calc(var(--home-label-height) / 2);
    background: var(--home-label-bg);
    color: var(--home-label-text);
    font-size: 11px;
}

.home-label svg,
.home-label-remove svg {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-label-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}

.home-label-remove:hover,
.home-label-remove:focus-visible {
    background: var(--home-label-border);
    color: var(--home-accent);
    outline: none;
}

/* La caja para agregar: "Nueva etiqueta…" con la lista de mis otras etiquetas debajo; la tarjeta queda encima de las
   demás mientras está abierta */
.home-card:has(.home-label-box) {
    z-index: 4;
}

.home-label-box {
    position: relative;
    flex: 1 1 100%;
}

.home-label-input {
    width: 100%;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--home-accent);
    border-radius: 13px;
    background: var(--home-card-bg);
    color: var(--home-text);
    font-size: 12px;
    outline: none;
}

.home-label-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    max-width: 260px;
    padding: 4px;
    border-radius: 8px;
    background: var(--home-card-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.home-label-suggest[hidden] {
    display: none;
}

.home-label-option {
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--home-text);
    font-size: 12px;
    text-align: left;
}

.home-label-option.is-active,
.home-label-option:hover {
    background: var(--nav-apps-hover-bg, #f1f3f6);
}

.home-label-option.is-create {
    color: var(--home-accent);
    font-weight: 600;
}

/* Filtro: los subproyectos del proyecto elegido, cada uno con su casilla ("Todos" primero) */
.home-filter-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.home-filter-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: normal;
}

.home-filter-sub.is-all {
    font-weight: 600;
}

.home-filter-subs-group {
    margin-top: 12px;
}

.home-filter-subs-group[hidden] {
    display: none;
}

.home-tasks-chip svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-tasks-status-menu .cmenu-item {
    align-items: center;
}

.home-tasks-status-menu .cmenu-icon {
    margin-top: 0;
    fill: var(--home-tasks-tab-bg);
    stroke: color-mix(in srgb, var(--home-tasks-tab-bg), #000 25%);
    stroke-width: 1.5;
}

.home-tasks-status-menu .cmenu-item.is-current {
    background: var(--home-tasks-tab-bg);
    font-weight: 600;
}

/* El número a la derecha del nombre, en la pastilla de las pestañas */
.home-tasks-status-menu .cmenu-text {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-tasks-status-menu .cmenu-hint {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--home-tasks-count-bg);
    color: var(--home-tasks-tab-status-text);
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.home-tasks-status-menu .cmenu-item.is-current .cmenu-hint {
    background: var(--home-tasks-count-on-tab-bg);
}

@media (max-width: 767px) {
    .home-tasks-tabs {
        display: none;
    }

    .home-tasks-chip:not([hidden]) {
        display: inline-flex;
    }
}

/* Agregar rápido (home-tasks-quick.js; Paul, 2026-10-23, como Trello): al final de las tarjetas, un "+" con la forma de
   una tarjeta vacía (borde punteado); al tocarlo, una tarjeta blanca con el cursor listo para escribir el título */
.home-quick {
    display: flex;
    min-height: var(--home-quick-min-height);
}

.home-cards-quick {
    margin-top: var(--home-card-gap);
}

.home-quick-open {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px dashed var(--home-quick-border);
    border-radius: var(--home-card-radius);
    background: transparent;
    color: var(--home-quick-icon);
    transition: border-color var(--home-hover-duration) ease, color var(--home-hover-duration) ease,
                background-color var(--home-hover-duration) ease;
}

.home-quick-open svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-quick-open:hover,
.home-quick-open:focus-visible {
    border-color: var(--home-accent);
    background: var(--home-card-bg);
    color: var(--home-accent);
    outline: none;
}

.home-quick.is-open {
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--home-accent);
    border-radius: var(--home-card-radius);
    background: var(--home-card-bg);
    box-shadow: var(--home-card-shadow-hover);
}

.home-quick-input {
    flex: 1 1 auto;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--home-accent);
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
    resize: none;
    outline: none;
}

.home-quick-hint {
    color: var(--home-muted);
    font-size: 11px;
}

/* La que se está guardando: apagada y quieta */
.home-card.is-saving .home-card-face {
    opacity: var(--home-quick-saving-opacity);
}

.home-card.is-saving .home-card-link {
    cursor: default;
}

/* Mover a otro estado (home-tasks-move.js): la tarjeta que se arrastra queda apagada en su lugar y una copia sigue al
   mouse (un poco inclinada, con la sombra de lo que se arrastra); las pestañas de los otros estados muestran un poco de
   su color y la que está bajo el mouse se pinta y crece. Al soltar, la copia vuela a la pestaña. */
.home-card.is-drag-source .home-card-face {
    opacity: var(--home-move-source-opacity);
}

.home-card.home-drag-ghost {
    position: fixed;
    z-index: 1060;
    margin: 0;
    pointer-events: none;
    transition: scale var(--home-hover-duration) var(--home-ease);
}

/* Sobre una pestaña, la copia se achica hacia el mouse para que se vea la pestaña que la recibe */
.home-card.home-drag-ghost.is-over-target {
    scale: var(--home-move-over-scale);
}

.home-card.home-drag-ghost .home-card-face {
    border-color: var(--home-card-border-hover);
    box-shadow: var(--home-lifted-shadow);
}

.home-card.home-drag-ghost.is-flying {
    transition: transform var(--home-move-fly-duration) var(--home-ease), opacity var(--home-move-fly-duration) ease;
}

body.is-moving-task,
body.is-moving-task * {
    cursor: grabbing !important;
}

.home-tasks-tabs.is-drop-zone .home-tasks-tab[data-status] {
    transition: background-color var(--home-hover-duration) ease, transform var(--home-hover-duration) var(--home-ease);
}

.home-tasks-tabs.is-drop-zone .home-tasks-tab[data-status]:not(.is-active) {
    background: color-mix(in srgb, var(--home-tasks-tab-bg) var(--home-drop-zone-mix), transparent);
}

.home-tasks-tabs.is-drop-zone .home-tasks-tab[data-status].is-drop-target {
    background: var(--home-tasks-tab-bg);
    color: var(--home-tasks-tab-status-text);
    transform: scale(var(--home-drop-target-scale));
}

/* El número de la pestaña que recibe tarjetas da un salto (home-tasks-bar.js, bump) */
.home-tasks-count.is-bumped {
    animation: home-count-bump var(--home-count-bump-duration) var(--home-ease);
}

@keyframes home-count-bump {
    40% {
        transform: scale(var(--home-count-bump-scale));
    }
}

/* Seleccionar varias (home-tasks-select.js): en el lugar del círculo, una casilla cuadrada; la tarjeta elegida, con
   borde y tinte azul; las que no puedo mover, apagadas. Sin los botones de la tarjeta. */
.home-card.is-task .home-select-box {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--home-check-size);
    height: var(--home-check-size);
    margin-top: 1px;
    border: 1.5px solid var(--home-check-border);
    border-radius: var(--home-select-box-radius);
    background: #fff;
    color: transparent;
    pointer-events: none;
    transition: background-color var(--home-select-fade) ease, border-color var(--home-select-fade) ease,
                color var(--home-select-fade) ease;
}

.home-select-box svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-card.is-task .home-select-box.is-on {
    border-color: var(--home-select-color);
    background: var(--home-select-color);
    color: #fff;
}

.home-card.is-selecting .home-card-actions {
    display: none;
}

/* Pasando por encima para elegir varias (home-tasks-select.js): las tarjetas no se elevan bajo el mouse */
body.is-sweeping .home-card .home-card-face {
    transform: none;
}

/* Elegir o quitar una tarjeta se funde suave (home.js cambia solo sus clases, sin volver a armar las tarjetas, para que
   la transición corra; volver atrás pasando por encima la deshace a mitad de camino) */
.home-card.is-selecting .home-card-face {
    transition: border-color var(--home-select-fade) ease, box-shadow var(--home-select-fade) ease,
                background-color var(--home-select-fade) ease, transform var(--home-hover-duration) ease;
}

/* La elegida se ve igual con el mouse encima (y en el celular, tocada): solo suma la sombra del hover */
.home-card.is-selected .home-card-face,
.home-card.is-selected:hover .home-card-face,
.home-card.is-selected:focus-within .home-card-face {
    border-color: var(--home-select-color);
    background: var(--home-select-bg);
    box-shadow: var(--home-select-ring);
}

@media (hover: hover) {
    .home-card.is-selected:hover .home-card-face {
        box-shadow: var(--home-select-ring), var(--home-card-shadow-hover);
    }
}

.home-card.is-unselectable .home-card-face {
    opacity: var(--home-select-unselectable-opacity);
}

.home-card.is-unselectable .home-card-link {
    cursor: not-allowed;
}

/* La barra de abajo: cuántas hay elegidas, "Seleccionar todas" y "Mover a" con cada estado en su color */
body.has-select-bar {
    padding-bottom: var(--home-select-bar-space);
}

.home-select-bar {
    position: fixed;
    bottom: var(--home-select-bar-bottom);
    left: 50%;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 8px 10px 8px 6px;
    border-radius: var(--home-select-bar-radius);
    background: var(--sheet-bg);
    box-shadow: var(--home-select-bar-shadow);
    color: var(--page-text);
    transform: translateX(-50%);
    animation: home-select-bar-in var(--nav-open-duration, .22s) var(--home-ease);
}

@keyframes home-select-bar-in {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

.home-select-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--home-muted);
}

.home-select-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.home-select-close:hover,
.home-select-close:focus-visible {
    background: var(--home-action-hover-bg);
    color: var(--home-accent);
    outline: none;
}

.home-select-count {
    min-width: 108px;
    font-weight: 600;
    white-space: nowrap;
}

.home-select-all {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--home-accent);
    font-weight: 600;
    white-space: nowrap;
}

.home-select-all:hover {
    text-decoration: underline;
}

.home-select-moves {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--sheet-border);
}

.home-select-label {
    color: var(--home-muted);
    white-space: nowrap;
}

.home-select-move {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--home-tasks-tab-radius);
    background: var(--home-tasks-tab-bg);
    color: var(--home-tasks-tab-status-text);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--home-hover-duration) ease;
}

.home-select-move:hover:not(:disabled),
.home-select-move:focus-visible {
    background: color-mix(in srgb, var(--home-tasks-tab-bg), #000 var(--home-select-move-hover-mix));
    outline: none;
}

.home-select-move:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Celular: la barra de todo el ancho, con los estados en una segunda fila */
@media (max-width: 767px) {
    .home-select-bar {
        left: 12px;
        right: 12px;
        flex-wrap: wrap;
        transform: none;
        animation: none;
    }

    .home-select-count {
        flex: 1 1 auto;
        min-width: 0;
    }

    .home-select-moves {
        flex: 1 1 100%;
        flex-wrap: wrap;
        padding-left: 0;
        border-left: 0;
    }

    body.has-select-bar {
        padding-bottom: calc(var(--home-select-bar-space) + 40px);
    }
}

/* "Reducir movimiento": sin el salto del número, sin la entrada de la barra y sin que la pestaña de destino crezca (la
   copia que se arrastra no vuela: home-tasks-move.js usa duración 0) */
@media (prefers-reduced-motion: reduce) {
    .home-tasks-count.is-bumped,
    .home-select-bar {
        animation: none;
    }

    .home-tasks-tabs.is-drop-zone .home-tasks-tab[data-status].is-drop-target {
        transform: none;
    }
}

/* Archivadas: "‹" vuelve a las pestañas; el título con su número */
.home-tasks-archived {
    gap: 6px;
}

.home-tasks-archived-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--home-accent);
    font-weight: 600;
}

.home-tasks-archived-title svg {
    width: 16px;
    height: 16px;
}

/* Buscar, filtro y •••: botones redondos como ⌂ */
.home-tasks-tools {
    gap: 2px;
    margin-left: auto;
}

.home-tasks-tool {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--home-accent);
    transition: background-color var(--home-hover-duration) ease;
}

.home-tasks-tool svg {
    width: 18px;
    height: 18px;
}

.home-tasks-tool:hover,
.home-tasks-tool:focus-visible,
.home-tasks-tool[aria-expanded="true"],
.home-tasks-tool.is-on {
    background: var(--home-action-hover-bg);
    outline: none;
}

.home-tasks-tool:focus-visible {
    box-shadow: 0 0 0 2px var(--home-accent);
}

/* Cuántos filtros hay puestos, arriba a la derecha del embudo */
.home-tasks-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border: 2px solid var(--page-bg);
    border-radius: 8px;
    background: var(--home-tile-badge-bg);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    line-height: 11px;
    text-align: center;
}

.home-tasks-badge[hidden] {
    display: none;
}

.home-tasks-search {
    display: flex;
    align-items: center;
    gap: 2px;
}

.home-tasks-search .home-tasks-search-input {
    width: var(--home-tasks-search-width);
    height: 32px;
    border-radius: 16px;
}

.home-tasks-search-input[hidden] {
    display: none;
}

/* Al buscar, lo que se veía queda apagado hasta que llega lo nuevo */
.home-tasks-cards .home-cards {
    transition: opacity var(--home-hover-duration) ease;
}

.home-tasks-cards.is-loading .home-cards {
    opacity: var(--home-tasks-loading-opacity);
}

/* "Ver más": las 15 siguientes, centrado debajo de las tarjetas */
.home-more-row {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.home-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--sheet-border);
    border-radius: 16px;
    background: var(--sheet-bg);
    color: var(--home-accent);
    font-weight: 600;
    transition: border-color var(--home-hover-duration) ease, box-shadow var(--home-hover-duration) ease;
}

.home-more svg {
    width: 16px;
    height: 16px;
}

.home-more:hover,
.home-more:focus-visible {
    border-color: var(--home-card-border-hover);
    box-shadow: var(--home-card-shadow-hover);
    outline: none;
}

.home-more[aria-disabled="true"] {
    cursor: progress;
    opacity: .7;
}

/* Archivadas: la tarjeta apagada (se sigue abriendo y mostrando su avance) */
.home-card.is-archived .home-card-face {
    opacity: var(--home-tasks-archived-opacity);
}

.home-card.is-archived:hover .home-card-face,
.home-card.is-archived:focus-within .home-card-face {
    opacity: 1;
}

/* Una tarea terminada: el ✓ verde, quieto (no es un botón: el clic pasa a la tarjeta y abre la tarea) */
.home-check.is-static {
    pointer-events: none;
    animation: none;
}

/* Estado de una tarea (en Archivadas, en vez de la prioridad): las pastillas de la ventana de Tareas */
.home-priority.home-status.is-pending {
    background: var(--tasks-status-pending-bg);
    color: var(--tasks-status-pending-text);
}

.home-priority.home-status.is-progress {
    background: var(--tasks-status-progress-bg);
    color: var(--tasks-status-progress-text);
}

.home-priority.home-status.is-done {
    background: var(--tasks-status-done-bg);
    color: var(--tasks-status-done-text);
}

.home-priority.home-status.is-annulled {
    background: var(--tasks-status-annulled-bg);
    color: var(--tasks-status-annulled-text);
}

/* Ventana del filtro: Sólo asignados / Ver todo como dos opciones con su explicación; las fechas lado a lado */
.home-filter-scope {
    display: grid;
    gap: 6px;
}

.home-filter-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--sheet-border);
    border-radius: 8px;
    font-weight: normal;
    cursor: pointer;
}

.home-filter-option:has(input:checked) {
    border-color: var(--home-accent);
    background: var(--home-tasks-count-bg);
}

.home-filter-option input {
    margin: 2px 0 0;
}

.home-filter-option strong,
.home-filter-option small {
    display: block;
}

.home-filter-option small {
    color: var(--home-muted);
    font-size: 11px;
}

.home-filter-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.home-filter-dates .form-group {
    margin-bottom: 0;
}

.home-filter-hint {
    margin: 4px 0 6px;
}

.home-filter-clear {
    padding-left: 0;
    padding-right: 0;
}

.home-filter-clear[hidden] {
    display: none;
}

/* Celular: la caja de buscar más angosta (las pestañas son un solo botón: ver "home-tasks-chip") */
@media (max-width: 767px) {
    :root {
        --home-tasks-search-width: 150px;
    }
}

/* Vista previa de un registro (Assets/js/home-preview.js): cuándo se vio arriba y unos pocos datos, solo para ver */
.home-preview-seen {
    margin: 0 0 12px;
    color: var(--home-accent);
    font-weight: 600;
}

.home-preview-stamp {
    color: var(--home-muted);
    font-weight: normal;
    font-variant-numeric: tabular-nums;
}

/* "Cargando más datos…" (solo si el servidor tarda) o el aviso de error, debajo de los datos */
.home-preview-more {
    margin: 10px 0 0;
    color: var(--home-muted);
}

.home-preview-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
    color: var(--home-text);
}

.home-preview-fields dt {
    color: var(--home-muted);
    font-weight: normal;
}

.home-preview-fields dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Sin apps a la vista (todas ocultas): el aviso lleva a Preferencias */
.home-none {
    width: 100%;
    margin-top: var(--home-section-gap);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--home-hover-duration) ease, color var(--home-hover-duration) ease;
}

.home-none:hover,
.home-none:focus-visible {
    border-color: var(--home-card-border-hover);
    color: var(--home-accent);
}

/* Fila de 5 tarjetas del mismo ancho (con menos tarjetas, quedan a la izquierda) */
.home-cards {
    position: relative;     /* home.js mide las tarjetas con offsetLeft/offsetTop respecto del bloque */
    display: grid;
    grid-template-columns: repeat(var(--home-cards-per-row), minmax(var(--home-card-min-width), 1fr));
    gap: var(--home-card-gap);
}

/* Si las 5 no entran (5 × --home-card-min-width + espacios + márgenes de la página ≈ 1000px), la fila se desliza
   de lado (las dos filas de Reporte Tareas, juntas). El padding (compensado con margen negativo) deja lugar a la
   sombra y a la tarjeta que se eleva. */
@media (max-width: 999px) {
    .home-cards {
        grid-template-columns: repeat(var(--home-cards-per-row), var(--home-card-min-width));
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        margin: -6px -6px -10px;
        padding: 6px 6px 10px;
        scrollbar-width: thin;                      /* barra de desplazamiento fina y clara, no la gruesa gris */
        scrollbar-color: var(--home-empty-border) transparent;
    }

    .home-cards::-webkit-scrollbar {
        height: 6px;
    }

    .home-cards::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: var(--home-empty-border);
    }

    .home-cards::-webkit-scrollbar-track {
        background: transparent;
    }

    .home-card {
        scroll-snap-align: start;
    }
}

/* Celular (paso 10): una tarjeta por fila, de todo el ancho, hacia abajo (nada se desliza de lado). Sin hover, los
   botones (👁 📌 ✕, 🎨 Archivar) se ven siempre. */
@media (max-width: 767px) {
    .home-cards {
        grid-template-columns: minmax(0, 1fr);
        overflow-x: visible;
        scroll-snap-type: none;
        margin: 0;
        padding: 0;
    }
}

/* Tarjeta: el contenedor se mueve (cambiar de lugar, arrastrar); la cara (.home-card-face) se ve y se eleva.
   Así el movimiento y el hover no se pisan. Una tarjeta que se mueve o se arrastra va por encima de las demás. */
.home-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    -webkit-user-select: none;
    user-select: none;
}

.home-card.is-moving {
    transition: transform var(--home-move-duration) var(--home-ease);
}

.home-card.is-lifted,
.home-card.is-dragging {
    z-index: 3;
}

.home-cards.is-sorting,
.home-cards.is-sorting * {
    cursor: grabbing !important;
}

/* Contraste sobre #f0f9ff: textos azules 14.2:1, módulo 14.9:1, ruta 6.5:1, hora 5.1:1 (mínimo 4.5:1).
   Si se cambia --home-card-bg, revisar que los grises sigan sobre 4.5:1. */
.home-card-face {
    position: relative;
    height: 100%;
    min-height: var(--home-card-min-height);
    border: 1px solid var(--home-card-border);
    border-radius: var(--home-card-radius);
    background: var(--home-card-bg);
    box-shadow: var(--sheet-shadow);
    transition: border-color var(--home-hover-duration) ease, box-shadow var(--home-hover-duration) ease,
                transform var(--home-hover-duration) ease;
}

.home-card:hover .home-card-face,
.home-card:focus-within .home-card-face {
    border-color: var(--home-card-border-hover);
    box-shadow: var(--home-card-shadow-hover);
    transform: translateY(var(--home-hover-lift));
}

.home-card.is-lifted .home-card-face {
    border-color: var(--home-card-border-hover);
    box-shadow: var(--home-lifted-shadow);
    transform: scale(var(--home-lifted-scale));
}

/* Mientras se arrastra, las demás tarjetas no reaccionan al mouse */
.home-cards.is-sorting .home-card:not(.is-lifted) .home-card-face {
    border-color: var(--home-card-border);
    box-shadow: none;
    transform: none;
}

/* Tarjeta que se quita: se desvanece y se achica */
.home-card.is-leaving {
    pointer-events: none;
}

.home-card.is-leaving .home-card-face {
    opacity: 0;
    transform: scale(.9);
    transition: opacity var(--home-remove-duration) ease, transform var(--home-remove-duration) ease;
}

/* Esqueleto de Reporte Tareas mientras cargan sus tareas (home.js, skeletonHtml; como el "skeleton" de Flowbite):
   tarjetas grises con la forma de las de verdad. Late solo la fila (opacity: una sola animación, la hace la tarjeta de
   video) y desaparece en cuanto llegan los datos o un error. Con "reducir movimiento", gris quieto. */
@keyframes home-pulse {
    50% {
        opacity: .5;
    }
}

.home-cards.is-skeleton {
    animation: home-pulse var(--home-skeleton-pulse) cubic-bezier(.4, 0, .6, 1) infinite;
}

.home-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: var(--home-skeleton-card-height);
    padding: 12px;
    border: 1px solid var(--home-card-border);
    border-radius: var(--home-card-radius);
    background: var(--home-card-bg);
}

.home-skeleton-line {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--home-skeleton-bg);
}

.home-skeleton-line.is-title {
    width: 85%;
}

.home-skeleton-line.is-title-end {
    width: 55%;
}

.home-skeleton-line.is-meta {
    width: 45%;
    margin-top: auto;
}

/* Entrada al cargar Inicio (home.js, appearIn): las tarjetas de los bloques (el saludo no) aparecen con un fundido,
   corriéndose unos px hacia la derecha, columna por columna. Solo opacity y transform (no recalculan la página) y una
   sola vez: ninguna animación queda corriendo. "backwards": mientras espera su turno, la tarjeta no se ve. */
@keyframes home-appear {
    from {
        opacity: 0;
        transform: translateX(var(--home-appear-offset));
    }
}

.home-card.is-appearing .home-card-face,
.home-empty.is-appearing {
    animation: home-appear var(--home-appear-duration) var(--home-ease) var(--home-appear-delay, 0ms) backwards;
}

/* Tarjeta nueva en el bloque: aparece */
.home-card.is-entering .home-card-face {
    animation: home-enter var(--home-enter-duration) var(--home-ease);
}

@keyframes home-enter {
    from {
        opacity: 0;
        transform: scale(.9);
    }
}

/* Contenido: solo el texto, sin ícono (decidido 2026-10-20: el título del bloque ya dice qué son y el nombre necesita
   el lugar). Los botones van arriba a la derecha, en la línea del nombre. */
.home-card-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px 12px;
    border-radius: inherit;
    color: var(--home-text);
}

.home-card-link:hover,
.home-card-link:focus {
    color: var(--home-text);
    text-decoration: none;
}

.home-card-link:focus-visible {
    outline: 2px solid var(--home-accent);
    outline-offset: 2px;
}

.home-card-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

/* El nombre: hasta dos líneas (un código sin espacios, como "FFF1-00000574", también se corta para bajar); si no
   entra, "…" y el nombre completo al pasar el mouse. Las demás líneas, una sola. */
.home-card-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

/* Línea gris pequeña bajo el nombre: la página de un registro, "Creada por: ABR" de una tarea */
.home-card-meta {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #5f6b7a;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La línea del nombre deja lugar a los botones (ver .home-card-actions): 1 en páginas, 2 en tareas (🎨 📌) y 3 en
   los registros (👁 📌 ✕) */
.home-card.is-page .home-card-title {
    padding-right: var(--home-action-size);
}

.home-card.is-task .home-card-title {
    padding-right: calc(2 * var(--home-action-size) + 2px);
}

/* Tareas: 1 a 3 botones (🎨 y 📌 solo si van; Archivar siempre). En pantallas táctiles se ven siempre: el título les
   deja su lugar. Con mouse (ver @media (hover: hover) abajo), el título usa todo el ancho menos el lugar de un 📌
   fijado, y los botones aparecen encima del final del título, sobre un fundido blanco: nada se mueve. */
.home-card.is-task[data-actions="1"] .home-card-title {
    padding-right: var(--home-action-size);
}

.home-card.is-task[data-actions="3"] .home-card-title {
    padding-right: calc(3 * var(--home-action-size) + 4px);
}

.home-card.is-task[data-actions="4"] .home-card-title {
    padding-right: calc(4 * var(--home-action-size) + 6px);
}

@media (hover: hover) {
    .home-card.is-task[data-actions] .home-card-title {
        padding-right: var(--home-action-size);
    }

    .home-card.is-task:hover .home-card-actions,
    .home-card.is-task:focus-within .home-card-actions {
        padding-left: 10px;
        border-radius: 0 var(--home-card-radius) 0 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--home-card-bg) 10px);
    }
}

/* Sin ✓ (Anulado, Archivadas, las ajenas): el título empieza en el borde */
.home-card.is-task.has-no-check .home-card-title {
    padding-left: 0;
}

.home-card.is-record .home-card-title {
    padding-right: calc(3 * var(--home-action-size) + 4px);
}

/* Color de una tarea (🎨): franja a la izquierda de la tarjeta, sobre su borde */
.home-card[data-color] .home-card-face::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: var(--home-card-color-width);
    border-radius: var(--home-card-radius) 0 0 var(--home-card-radius);
    background: var(--home-card-color);
}

/* Tareas y registros (Paul, 2026-10-20): el nombre arriba y la última línea siempre abajo de la tarjeta, así las
   tarjetas de una fila quedan alineadas aunque una tenga barra de subtareas o un nombre de dos líneas y otra no */
.home-card.is-task .home-card-link,
.home-card.is-record .home-card-link {
    align-items: stretch;
}

.home-card.is-task .home-card-body,
.home-card.is-record .home-card-body {
    display: flex;
    flex-direction: column;
}

.home-card.is-task .home-card-foot,
.home-card.is-record .home-card-meta {
    margin-top: auto;
    padding-top: 4px;
}

/* Última línea de una tarea: "Creada por: ABR" a la izquierda y la prioridad a la derecha */
.home-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.home-card-foot .home-card-meta {
    min-width: 0;
    margin-top: 0;
}

.home-priority {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--home-priority-low-bg);
    color: var(--home-priority-low-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
}

.home-priority.is-high {
    background: var(--home-priority-high-bg);
    color: var(--home-priority-high-text);
}

.home-priority.is-medium {
    background: var(--home-priority-medium-bg);
    color: var(--home-priority-medium-text);
}

/* Página (Módulos): tarjeta baja con el azul de "Exportar"; solo el nombre, en blanco y mayúsculas (su ruta ya está
   en la búsqueda) */
.home-card.is-page .home-card-face {
    min-height: var(--home-module-card-min-height);
    border-color: var(--home-module-card-border);
    background: var(--home-module-card-bg);
    transition: border-color var(--home-hover-duration) ease, box-shadow var(--home-hover-duration) ease,
                transform var(--home-hover-duration) ease, background-color var(--home-hover-duration) ease;
}

.home-card.is-page:hover .home-card-face,
.home-card.is-page:focus-within .home-card-face {
    border-color: var(--home-module-card-border-hover);
    background: var(--home-module-card-bg-hover);
}

/* Registro (Búsquedas Recientes): tarjeta con tinte navy claro */
.home-card.is-record .home-card-face {
    border-color: var(--home-record-card-border);
    background: var(--home-record-card-bg);
    transition: border-color var(--home-hover-duration) ease, box-shadow var(--home-hover-duration) ease,
                transform var(--home-hover-duration) ease, background-color var(--home-hover-duration) ease;
}

.home-card.is-record:hover .home-card-face,
.home-card.is-record:focus-within .home-card-face {
    border-color: var(--home-card-border-hover);
    background: var(--home-record-card-bg-hover);
}

/* ⚡ sobre el azul: blanco; el ⚡ encendido sigue amarillo */
.home-card.is-page .home-action {
    color: rgba(255, 255, 255, .85);
}

.home-card.is-page .home-action:hover,
.home-card.is-page .home-action:focus-visible {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.home-card.is-page .home-card-link:focus-visible {
    outline-color: var(--home-module-card-border-hover);
}

.home-card.is-page .home-card-link {
    padding-top: 7px;
    padding-bottom: 7px;
}

.home-card.is-page .home-card-actions {
    top: 50%;
    transform: translateY(-50%);
}

.home-card.is-page .home-card-title {
    color: var(--home-module-card-text);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Registro (Búsquedas Recientes) y tarea (Reporte Tareas): nombre en azul */
.home-card.is-record .home-card-title,
.home-card.is-task .home-card-title {
    color: var(--home-accent);
    font-weight: 600;
}

/* Tarea: el círculo para terminarla, a la izquierda del título (siempre a la vista, como en Google Tasks o To Do).
   Vacío; al pasar el mouse muestra el ✓ en verde; al tocarlo se llena de verde y la tarjeta se desvanece. */
.home-check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--home-check-size);
    height: var(--home-check-size);
    margin-top: 1px;
    padding: 0;
    border: 1.5px solid var(--home-check-border);
    border-radius: 50%;
    background: #fff;
    color: transparent;
    cursor: pointer;
    transition: border-color var(--home-hover-duration) ease, background-color var(--home-hover-duration) ease,
                color var(--home-hover-duration) ease;
}

.home-card .home-check svg {
    width: 10px;
    height: 10px;
    stroke-width: 3;
}

.home-check:hover,
.home-check:focus-visible {
    border-color: var(--home-progress-fill);
    color: var(--home-progress-fill);
    outline: none;
}

.home-check.is-done {
    border-color: var(--home-progress-fill);
    background: var(--home-progress-fill);
    color: #fff;
    animation: home-pop var(--home-toggle-duration) var(--home-ease);
}

/* Avance de una tarea con subtareas: barra (verde lo terminado, sobre un gris claro que se ve aunque no haya nada
   terminado) y "2/3" a su derecha, en una sola línea */
.home-card-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.home-progress-track {
    flex: 1 1 auto;
    height: var(--home-progress-height);
    overflow: hidden;
    border-radius: 999px;
    background: var(--home-progress-track);
}

.home-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--home-progress-fill);
    transform-origin: left center;
}

/* La barra se llena desde 0 hasta su valor (home-tasks.js, fillBars: pone la clase y la quita al terminar). Solo
   transform, una vez. */
.home-tasks-cards.is-filling .home-progress-fill {
    animation: home-progress-fill var(--home-progress-fill-duration) var(--home-ease) var(--home-progress-fill-delay) backwards;
}

@keyframes home-progress-fill {
    from {
        transform: scaleX(0);
    }
}

.home-progress-count {
    flex: 0 0 auto;
    color: #5f6b7a;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Tarea (paso 6 de la Fase 2): toda la tarjeta es un botón que abre la tarea en la ventana de Tareas (con el mouse o
   el teclado) y se eleva al pasar el mouse, como las demás tarjetas. El círculo ✓ va encima, a la izquierda del
   título (un botón no puede ir dentro de otro): el título le deja su lugar. */
button.home-card-link {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
}

.home-card.is-task .home-card-link {
    cursor: pointer;
}

.home-card.is-task .home-card-title {
    padding-left: calc(var(--home-check-size) + 6px);
}

.home-card.is-task .home-check {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 1;
}

/* Botones de la tarjeta, arriba a la derecha en la línea del nombre: ⚡ (páginas), 📌 y ✕ (registros) o 📌 (tareas) */
.home-card-actions {
    position: absolute;
    top: 7px;
    right: 8px;
    display: flex;
    gap: 2px;
}

.home-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--home-action-size);
    height: var(--home-action-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--home-action-off);
    cursor: pointer;
    transition: background-color var(--home-hover-duration) ease, color var(--home-hover-duration) ease,
                opacity var(--home-hover-duration) ease;
}

/* Menos ruido (Paul, 2026-10-20): con mouse, los botones de la tarjeta aparecen solo al pasar el mouse por ella o al
   llegar con el teclado (como el ⚡ del menú). Quedan a la vista los que dicen algo: un 📌 fijado y el 🎨 con su
   selector abierto. El ⚡ de Módulos también se oculta: todas esas tarjetas son accesos directos. En pantallas
   táctiles (sin hover) se ven siempre. El nombre ya les deja su lugar: no se mueve nada al aparecer. */
@media (hover: hover) {
    .home-card .home-action {
        opacity: 0;
    }

    .home-card:hover .home-action,
    .home-card:focus-within .home-action,
    .home-card .home-action.is-pin.is-on,
    .home-card .home-action[aria-expanded="true"] {
        opacity: 1;
    }
}

.home-action svg {
    width: 14px;
    height: 14px;
    transition: fill var(--home-toggle-duration) ease;
}

.home-action:hover,
.home-action:focus-visible {
    background: var(--home-action-hover-bg);
    color: var(--home-accent);
    outline: none;
}

.home-action.is-remove:hover,
.home-action.is-remove:focus-visible {
    color: var(--home-remove-hover);
}

.home-action.is-bolt.is-on {
    color: var(--home-bolt-on-stroke);
}

.home-action.is-bolt.is-on svg {
    fill: var(--home-bolt-on);
}

.home-action.is-pin.is-on {
    color: var(--home-pin-on);
}

.home-action.is-pin.is-on svg {
    fill: var(--home-pin-on);
}

/* ⚡ / 📌 recién marcado o desmarcado: rebota */
.home-card.is-toggled .home-action.is-bolt,
.home-card.is-toggled .home-action.is-pin {
    animation: home-pop var(--home-toggle-duration) var(--home-ease);
}

@keyframes home-pop {
    0% {
        transform: scale(.6);
    }

    60% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

/* Bloque vacío: tarjeta horizontal de todo el ancho que explica cómo se llena */
.home-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--home-card-min-height);
    padding: 14px 18px;
    border: 1px dashed var(--home-empty-border);
    border-radius: var(--home-card-radius);
    color: var(--home-muted);
}

.home-empty-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--home-hero-bg);
    color: var(--home-accent);
}

.home-empty-icon svg {
    width: 16px;
    height: 16px;
}

/* ⚡ dentro del texto de Módulos vacío: como se ve en el menú cuando la página ya es acceso directo */
.home-empty-bolt svg {
    width: 13px;
    height: 13px;
    margin: 0 1px;
    vertical-align: -2px;
    color: var(--home-bolt-on-stroke);
    fill: var(--home-bolt-on);
}

/* Preferencias (ventana de Assets/js/home-preferences.js): una fila por app con su casilla (se ve) y, a la derecha, el
   candado (se abre primero: cerrado y navy en la elegida, abierto y gris en las demás). La ventana va fuera de .home:
   aquí también el trazo de los íconos. */
.home-prefs-hint {
    margin: 0 0 12px;
    color: var(--home-muted);
}

.home-prefs {
    display: grid;
    gap: 2px;
}

.home-prefs svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 2px 8px;
    border-radius: 6px;
}

.home-pref:hover {
    background: #f1f3f6;
}

.home-pref-check {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 0;
    font-weight: normal;
    cursor: pointer;
}

.home-pref-check input {
    margin: 0;
}

.home-pref-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--home-app-color);
}

.home-pref-check input:disabled ~ span {
    color: var(--home-muted);
}

/* El candado: un radio (uno solo elegido) que se ve como el ícono; se toca y se enfoca con el teclado como un radio */
.home-pref-lock {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 6px;
    color: #9aa2ae;
    cursor: pointer;
}

.home-pref-lock input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.home-pref-lock-icon {
    display: flex;
    border-radius: 4px;
    pointer-events: none;
}

.home-pref-lock svg {
    width: 16px;
    height: 16px;
}

.home-pref-lock .is-closed,
.home-pref-lock input:checked + .home-pref-lock-icon .is-open {
    display: none;
}

.home-pref-lock input:checked + .home-pref-lock-icon .is-closed {
    display: block;
}

.home-pref-lock:hover,
.home-pref-lock input:checked + .home-pref-lock-icon {
    color: var(--home-accent);
}

.home-pref-lock input:focus-visible + .home-pref-lock-icon {
    outline: 2px solid var(--home-accent);
    outline-offset: 3px;
}

.home-pref-lock input:disabled,
.home-pref-lock input:disabled + .home-pref-lock-icon {
    cursor: not-allowed;
    opacity: .35;
}

/* Celular: dos apps por fila en el lanzador */
@media (max-width: 767px) {
    :root {
        --home-tiles-per-row: 2;
        --home-tile-gap-x: 28px;
    }
}

/* En pantallas táctiles no hay hover (ni se arrastran las apps ni las tarjetas) */
@media (hover: none) {
    .home-tile-btn:hover .home-tile-box {
        background: var(--home-app-fill);
    }

    .home-card:hover .home-card-face {
        border-color: var(--home-card-border);
        box-shadow: none;
        transform: none;
    }

    .home-card.is-page:hover .home-card-face {
        border-color: var(--home-module-card-border);
        background: var(--home-module-card-bg);
    }

    .home-card.is-record:hover .home-card-face {
        border-color: var(--home-record-card-border);
        background: var(--home-record-card-bg);
    }

    .home-create > .home-hero-btn:hover {
        border-color: var(--home-btn-create-border);
        background: var(--home-btn-create-bg);
    }
}

/* Si el usuario pidió reducir el movimiento (Windows/navegador), sin animaciones (home.js tampoco anima) */
@media (prefers-reduced-motion: reduce) {
    .home-card-face,
    .home-card.is-page .home-card-face,
    .home-card.is-record .home-card-face,
    .home-card.is-moving,
    .home-card.is-leaving .home-card-face,
    .home-action,
    .home-action svg,
    .home-hero-btn,
    .home-check,
    .home-none,
    .home-tile-box,
    .home-tile.is-moving,
    .home-app-home,
    .home-app-name,
    .home-app-next .home-app-chevron,
    .home-glow,
    .home-tasks-tab,
    .home-tasks-tool,
    .home-tasks-cards .home-cards,
    .home-more,
    .home-card.is-selecting .home-card-face,
    .home-card.is-task .home-select-box {
        transition: none;
    }

    .home-check.is-done,
    .home-cards.is-skeleton,
    .home-view.is-switching-out,
    .home-app-body.is-switching-out,
    .home-app-head.is-appearing,
    .home-launcher-title.is-appearing,
    .home-tile.is-appearing,
    .home-pending.is-appearing {
        animation: none;
    }

    .home-tile-btn:active .home-tile-box,
    .home-app-next:hover .home-app-chevron,
    .home-app-next:focus-visible .home-app-chevron {
        transform: none;
    }

    .home-create.open > .dropdown-menu {
        animation: none;
    }

    .home-card:hover .home-card-face,
    .home-card:focus-within .home-card-face {
        transform: none;
    }

    .home-card.is-entering .home-card-face,
    .home-card.is-appearing .home-card-face,
    .home-empty.is-appearing,
    .home-card.is-toggled .home-action.is-bolt,
    .home-card.is-toggled .home-action.is-pin {
        animation: none;
    }
}

/*================== Cajitas flotantes (Assets/js/popover.js, menu.js) ==================*/
/* Lo común de las cajitas que se abren desde un botón: el selector de color y los menús (⋯ del Listado de Tareas,
   "Duplicar"). Hoja blanca con sombra, por encima de las tarjetas y de las ventanas (modal.js, --modal-z 1050), como
   las listas de los combos (--combo-z). Aparece con un fundido corto y se cierra al instante. */
:root {
    --popover-z: 1060;
    --popover-shadow: 0 8px 24px rgba(13, 27, 108, .18);
    --popover-duration: .15s;
    --menu-hover: #eef3ff;                          /* opción del menú al pasar el mouse (el de las grillas) */
    --menu-pending: #9aa2ae;                        /* opción en construcción */
}

.cpop {
    position: fixed;
    z-index: var(--popover-z);
    border: 1px solid var(--sheet-border);
    border-radius: 8px;
    background: var(--sheet-bg);
    box-shadow: var(--popover-shadow);
    animation: cpop-in var(--popover-duration) cubic-bezier(.2, .8, .2, 1);
}

@keyframes cpop-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Menú: opciones con su ícono y, debajo del nombre, una pista gris */
.cmenu {
    min-width: 190px;
    max-width: 280px;
    padding: 4px 0;
}

.cmenu svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cmenu-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: var(--page-text);
    text-align: left;
    cursor: pointer;
}

.cmenu-item:hover,
.cmenu-item:focus-visible,
.cmenu-item:focus {
    background: var(--menu-hover);
    outline: none;
}

.cmenu-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--tasks-accent, #0D1B6C);
}

.cmenu-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmenu-hint {
    color: var(--tasks-muted, #6b7480);
    font-size: 11px;
}

.cmenu-item[aria-disabled="true"],
.cmenu-item[aria-disabled="true"] .cmenu-icon {
    color: var(--menu-pending);
    cursor: default;
}

@media (pointer: coarse) {
    .cmenu-item {
        padding: 10px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpop {
        animation: none;
    }
}

/*================== Selector de color (Assets/js/color-picker.js) ==================*/
/* Pocos colores y "Sin color" en una cajita flotante (.cpop, arriba): 🎨 de Reporte Tareas y color de una tarea en la
   ventana de Tareas. Cada color es un círculo; el elegido lleva un ✓ blanco. */
.color-picker {
    display: flex;
    gap: 6px;
    padding: 8px;
}

.color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.color-swatch:hover,
.color-swatch:focus-visible {
    box-shadow: 0 0 0 2px var(--sheet-bg), 0 0 0 4px #0D1B6C;
    outline: none;
    transform: scale(1.08);
}

.color-swatch svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* "Sin color": círculo blanco con borde y una raya gris */
.color-swatch.is-none {
    border: 1px solid #cfd5df;
    background: #fff;
    color: #8a93a0;
}

.color-swatch.is-none svg {
    stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
    .color-swatch {
        transition: none;
    }

    .color-swatch:hover,
    .color-swatch:focus-visible {
        transform: none;
    }
}

/*================== Ventanas (Assets/js/modal.js) ==================*/
/* Ventana centrada sobre un fondo oscuro: título con su ícono y ✕, contenido y botones (Cancelar y el principal).
   La usan las opciones de Crear (Assets/js/create.js). Aparece con un fundido, subiendo un poco; se cierra al
   instante, como los menús del header. Los campos usan las clases de Bootstrap (form-group, control-label,
   form-control, help-block, has-error). Todos los valores que se ajustan están aquí. */
:root {
    --modal-z: 1050;                                /* encima del header fijo (1030); los avisos (toastr) quedan encima */
    --modal-backdrop: rgba(15, 23, 42, .45);
    --modal-bg: var(--sheet-bg);
    --modal-line: var(--sheet-border);              /* líneas bajo el título y sobre los botones */
    --modal-foot-bg: #fafbfc;
    --modal-radius: 10px;
    --modal-shadow: 0 20px 48px rgba(13, 27, 108, .25);
    --modal-width: 480px;
    --modal-width-wide: 760px;                      /* ventana ancha (size: 'wide', la de Tareas) */
    --modal-max-height-wide: 85vh;
    --modal-gutter: 16px;                           /* margen mínimo a los bordes de la pantalla */
    --modal-accent: #0D1B6C;                        /* título, ícono y botón principal */
    --modal-accent-hover: #1a2c8f;
    --modal-muted: #6b7480;
    --modal-ease: cubic-bezier(.2, .8, .2, 1);
    --modal-open-duration: .22s;
    --modal-open-offset: 8px;                       /* sube desde esta distancia mientras aparece */
}

/* Sin barra de desplazamiento detrás de la ventana (modal.js compensa su ancho) */
body.cmodal-open {
    overflow: hidden;
}

.cmodal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--modal-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--modal-gutter);
}

.cmodal svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes cmodal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cmodal-in {
    from {
        opacity: 0;
        transform: translateY(var(--modal-open-offset));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cmodal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--modal-backdrop);
    animation: cmodal-fade var(--modal-open-duration) var(--modal-ease);
}

/* Si el contenido es más alto que la pantalla, solo el contenido se desliza (título y botones quedan a la vista) */
.cmodal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--modal-width);
    max-height: 100%;
    background: var(--modal-bg);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    outline: none;
    animation: cmodal-in var(--modal-open-duration) var(--modal-ease);
}

/* Ventana ancha (la de Tareas): hasta 85% del alto de la pantalla; en el celular, pantalla completa (abajo) */
.cmodal-wide .cmodal-dialog {
    max-width: var(--modal-width-wide);
    max-height: var(--modal-max-height-wide);
}

.cmodal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px 20px;
    border-bottom: 1px solid var(--modal-line);
}

.cmodal-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--modal-accent);
}

.cmodal-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--modal-accent);
}

.cmodal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--modal-muted);
}

.cmodal-close svg {
    width: 18px;
    height: 18px;
}

.cmodal-close:hover,
.cmodal-close:focus-visible {
    background: rgba(13, 27, 108, .08);
    color: var(--modal-accent);
}

.cmodal-body {
    padding: 16px 20px;
    overflow-y: auto;
}

.cmodal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--modal-line);
    border-radius: 0 0 var(--modal-radius) var(--modal-radius);
    background: var(--modal-foot-bg);
}

.cmodal-btn {
    min-width: 90px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid #cfd5df;
    border-radius: 6px;
    background: #fff;
    color: var(--page-text);
    font-weight: 600;
}

.cmodal-btn:hover,
.cmodal-btn:focus-visible {
    border-color: var(--modal-accent);
    color: var(--modal-accent);
}

.cmodal-btn-primary,
.cmodal-btn-primary:hover,
.cmodal-btn-primary:focus-visible {
    border-color: var(--modal-accent);
    background: var(--modal-accent);
    color: #fff;
}

.cmodal-btn-primary:hover,
.cmodal-btn-primary:focus-visible {
    border-color: var(--modal-accent-hover);
    background: var(--modal-accent-hover);
}

.cmodal-btn[disabled],
.cmodal-close[disabled] {
    opacity: .6;
    cursor: default;
}

/* Una vista sin botón principal (modal.setPrimary(null)) */
.cmodal-btn[hidden] {
    display: none;
}

/* Guardando: el contenido no recibe clics */
.cmodal-dialog.is-busy .cmodal-body {
    pointer-events: none;
    opacity: .7;
}

/* Borrador recuperado: aviso gris arriba del contenido, con "Empezar de nuevo" (vacía los campos) */
.cmodal-draft {
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f1f3f6;
    color: var(--modal-muted);
}

.cmodal-draft-reset {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--modal-accent);
    font-weight: 600;
    text-decoration: underline;
}

.cmodal-draft-reset:hover,
.cmodal-draft-reset:focus-visible {
    color: var(--modal-accent-hover);
}

/* Campos (clases de Bootstrap) con el tamaño del resto del sistema */
.cmodal .form-group:last-child {
    margin-bottom: 0;
}

.cmodal .control-label {
    margin-bottom: 4px;
    font-weight: 600;
}

.cmodal .form-control {
    height: 32px;
    font-size: inherit;
}

.cmodal .help-block {
    margin: 4px 0 0;
    color: var(--modal-muted);
}

.cmodal .has-error .help-block {
    color: #a94442;
}

/* Crear Cliente: "DNI" o "RUC" dentro del campo, a la derecha, cuando la cantidad de dígitos ya corresponde */
.create-document {
    position: relative;
}

.create-document .form-control {
    padding-right: 52px;
    font-variant-numeric: tabular-nums;
}

.create-document-type {
    position: absolute;
    top: 50%;
    right: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #eef1f8;
    color: var(--modal-accent);
    font-size: 11px;
    font-weight: 700;
    transform: translateY(-50%);
}

.create-document-type[hidden] {
    display: none;
}

/* Crear Proyecto: subproyectos (una fila por cada uno, con su ✕) y "+ Agregar subproyecto" */
.create-subs-title {
    margin-bottom: 6px;
    font-weight: 600;
}

.create-optional {
    color: var(--modal-muted);
    font-weight: normal;
}

.create-sub {
    margin-bottom: 8px;
}

.create-sub-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.create-sub-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--modal-muted);
}

.create-sub-remove svg {
    width: 16px;
    height: 16px;
}

.create-sub-remove:hover,
.create-sub-remove:focus-visible {
    background: rgba(198, 40, 40, .08);
    color: #c62828;
}

/* Separado de la última fila (Paul, 2026-10-20: se veía pegado al cuadro de texto, sobre todo con su fondo de hover) */
.create-sub-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin: 6px 0 0 -8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--modal-accent);
    font-weight: 600;
}

.create-sub-add svg {
    width: 16px;
    height: 16px;
}

.create-sub-add:hover,
.create-sub-add:focus-visible {
    background: rgba(13, 27, 108, .08);
}

/* Celular: la ventana arriba (el teclado ocupa la mitad de abajo de la pantalla). La ancha ocupa toda la pantalla:
   el contenido se desliza entre el título y los botones. */
@media (max-width: 767px) {
    .cmodal {
        align-items: flex-start;
        padding-top: 24px;
    }

    .cmodal.cmodal-wide {
        padding: 0;
    }

    .cmodal-wide .cmodal-dialog {
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .cmodal-wide .cmodal-body {
        flex: 1 1 auto;
    }

    .cmodal-wide .cmodal-foot {
        border-radius: 0;
    }
}

/* "Reducir movimiento" (Windows/navegador): la ventana aparece sin animación */
@media (prefers-reduced-motion: reduce) {
    .cmodal-backdrop,
    .cmodal-dialog {
        animation: none;
    }
}

/*================== Combos (Assets/js/combo.js) ==================*/
/* Campo para elegir uno o varios de una lista escribiendo para buscar, con "+ Crear «X»" al final cuando lo escrito
   no está (cliente / proveedor, proyecto, subproyecto, responsables y etiquetas de Tareas). El campo es un
   form-control de Bootstrap (mismo borde, mismo foco azul y mismo rojo de error); varios = chips dentro del campo.
   La lista va al final del <body>, encima de las ventanas, y aparece con un fundido corto (se cierra al instante).
   Todos los valores que se ajustan están aquí. */
:root {
    --combo-z: 1060;                                /* encima de las ventanas (--modal-z: 1050); los avisos quedan encima */
    --combo-accent: #0D1B6C;                        /* chips, ✓ y "+ Crear" */
    --combo-muted: #6b7480;
    --combo-line: var(--sheet-border);
    --combo-option-hover: #eef3ff;                  /* el mismo del hover de las grillas */
    --combo-chip-bg: #eef1f8;
    --combo-disabled-bg: #eee;                      /* el de los campos deshabilitados de Bootstrap */
    --combo-list-max-height: 240px;
    --combo-list-shadow: 0 8px 24px rgba(13, 27, 108, .18);
    --combo-open-duration: .15s;
    --combo-ease: cubic-bezier(.2, .8, .2, 1);
}

.ccombo.form-control {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    height: auto;
    min-height: 32px;
    padding: 3px 30px 3px 8px;                      /* a la derecha, la flecha */
    cursor: text;
}

/* Uno con algo elegido: también el ✕ para dejarlo vacío */
.ccombo.form-control.has-value {
    padding-right: 52px;
}

/* El foco de un form-control de Bootstrap, aunque el foco esté en el cuadro de texto de adentro */
.ccombo:focus-within {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.has-error .ccombo:focus-within {
    border-color: #843534;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

.ccombo svg,
.ccombo-list svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ccombo-input {
    flex: 1 1 60px;
    min-width: 60px;
    height: 24px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.ccombo-caret {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    color: var(--combo-muted);
    pointer-events: none;
    transition: transform var(--combo-open-duration) var(--combo-ease);
}

.ccombo-caret svg {
    width: 16px;
    height: 16px;
}

.ccombo.is-open .ccombo-caret {
    transform: rotate(180deg);
}

.ccombo-clear {
    position: absolute;
    top: 50%;
    right: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--combo-muted);
}

.ccombo-clear[hidden] {
    display: none;
}

.ccombo-clear svg {
    width: 14px;
    height: 14px;
}

.ccombo-clear:hover {
    background: rgba(13, 27, 108, .08);
    color: var(--combo-accent);
}

/* Varios: cada elegido es un chip con su ✕ (el último no se quita cuando hace falta al menos uno) */
.ccombo-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    height: 22px;
    padding: 0 2px 0 8px;
    border-radius: 11px;
    background: var(--combo-chip-bg);
    color: var(--combo-accent);
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.ccombo-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccombo-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .7;
}

.ccombo-chip-remove svg {
    width: 12px;
    height: 12px;
}

.ccombo-chip-remove:hover {
    background: rgba(13, 27, 108, .12);
    opacity: 1;
}

.ccombo-chip-remove.is-locked,
.ccombo-chip-remove.is-locked:hover {
    background: transparent;
    opacity: .3;
    cursor: default;
}

/* Bloqueado (se lee, no se cambia): el gris de los campos deshabilitados; el motivo, al pasar el mouse */
.ccombo.is-disabled {
    background: var(--combo-disabled-bg);
    cursor: default;
}

.ccombo.is-disabled .ccombo-input {
    cursor: default;
}

.ccombo.is-disabled .ccombo-caret {
    opacity: .4;
}

/* Lista */
@keyframes ccombo-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.ccombo-list {
    position: fixed;
    z-index: var(--combo-z);
    max-height: var(--combo-list-max-height);
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain;                   /* desplazar la lista no desplaza la ventana de atrás */
    list-style: none;
    border: 1px solid var(--combo-line);
    border-radius: 8px;
    background: var(--sheet-bg);
    box-shadow: var(--combo-list-shadow);
    color: var(--page-text);
    animation: ccombo-in var(--combo-open-duration) var(--combo-ease);
}

.ccombo-list.is-above {
    animation-name: ccombo-in-above;
}

@keyframes ccombo-in-above {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.ccombo-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    line-height: 1.35;
    cursor: pointer;
}

.ccombo-option.is-active {
    background: var(--combo-option-hover);
}

.ccombo-check {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--combo-accent);
}

.ccombo-check svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.ccombo-option-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ccombo-option.is-selected .ccombo-option-text {
    font-weight: 600;
}

.ccombo-option-hint {
    flex: 0 0 auto;
    color: var(--combo-muted);
    font-size: 11px;
}

.ccombo-option.is-locked {
    cursor: default;
}

.ccombo-option.is-locked .ccombo-check {
    opacity: .5;
}

/* "+ Crear «X»": al final, separado de los resultados por una línea */
.ccombo-create {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--combo-line);
    color: var(--combo-accent);
    font-weight: 600;
}

.ccombo-create:first-child {
    margin-top: 0;
    padding-top: 6px;
    border-top: 0;
}

.ccombo-create.is-busy {
    color: var(--combo-muted);
    cursor: default;
}

.ccombo-note {
    padding: 6px 10px;
    color: var(--combo-muted);
}

/* Pantallas táctiles: opciones más altas, para tocarlas sin errar */
@media (pointer: coarse) {
    .ccombo-option {
        padding: 10px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccombo-list,
    .ccombo-list.is-above {
        animation: none;
    }

    .ccombo-caret {
        transition: none;
    }
}

/*================== Ventana de Tareas (Assets/js/tasks-window.js, tasks-task.js, tasks-lists.js) ==================*/
/* Una ventana ancha (modal.js, size 'wide': 760px y hasta 85% del alto; pantalla completa en el celular) con sus
   vistas, que se alternan con un fundido. Arriba: el reporte (como el de Inicio) y Listado / + Nuevo con los botones
   de Cuentas por Cobrar (btn-primary y btn-success de Bootstrap; el de la vista actual, deshabilitado). La tarea
   (nueva o guardada): la tarea en letra más grande con su color a la izquierda (como las tarjetas de Inicio), el ✓ y la
   pastilla de estado (guardada), los responsables, "Detalles" plegado con su resumen de una línea y las listas de
   subtareas como pestañas. Todos los valores que se ajustan están aquí. */
:root {
    --tasks-accent: #0D1B6C;
    --tasks-muted: #6b7480;
    --tasks-line: var(--sheet-border);
    --tasks-title-size: 14px;                       /* la tarea, más grande que el resto (12px) */
    --tasks-switch-duration: .15s;                  /* fundido al pasar de una vista a otra */
    --tasks-ease: cubic-bezier(.2, .8, .2, 1);
    --tasks-hover-duration: .15s;                   /* círculos, botones y filas al pasar el mouse */
    --tasks-done: #22a06b;                          /* lo terminado, en verde (el de Inicio: --home-progress-fill) */
    --tasks-check-border: #b8c0cc;                  /* círculo vacío */
    --tasks-check-size: 22px;                       /* ✓ de la tarea */
    --tasks-item-check-size: 16px;                  /* ✓ de una subtarea (el de las tarjetas de Inicio) */
    --tasks-color-size: 22px;                       /* botón del color (🎨) */
    --tasks-color-stripe: 4px;                      /* franja del color a la izquierda de la tarea */
    --tasks-action-size: 24px;                      /* 📌 y 🗑 de una subtarea, duplicar y quitar una lista */
    --tasks-action-off: #8a93a0;                    /* esos botones, sin marcar */
    --tasks-action-hover-bg: rgba(13, 27, 108, .08);
    --tasks-danger: #c62828;                        /* 🗑 al pasar el mouse */
    --tasks-danger-hover-bg: rgba(198, 40, 40, .08);
    --tasks-row-hover: #f6f8fb;                     /* fila de una subtarea al pasar el mouse */
    --tasks-tab-line: 2px;                          /* raya bajo la pestaña (lista) elegida */
    --tasks-notice-bg: #f1f3f6;                     /* aviso de solo lectura (como el del borrador recuperado) */
    /* Pastilla de estado (por su código de catálogo): fondo suave y texto oscuro del mismo tono (contraste sobre
       4.5:1), como la prioridad de las tarjetas de Inicio */
    --tasks-status-pending-bg: #eef1f5;
    --tasks-status-pending-text: #4b5563;
    --tasks-status-progress-bg: #e8f0fe;
    --tasks-status-progress-text: #1d4ed8;
    --tasks-status-done-bg: #e3f5ec;
    --tasks-status-done-text: #17734d;
    --tasks-status-annulled-bg: #fdecec;
    --tasks-status-annulled-text: #b42318;
}

/* Lo oculto (hidden) en la vista de la tarea y en sus listas no se ve, aunque su clase le dé un display */
.tt [hidden],
.tl[hidden],
.tl [hidden],
.tw-bar[hidden] {
    display: none !important;
}

/* En una tarea guardada, arriba a la derecha, "+ Nuevo" (un solo Reporte Tareas: no se elige reporte) */
.tw-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.tw-view-btn {
    min-width: 76px;
    font-weight: 600;
}

.tw-view {
    transition: opacity var(--tasks-switch-duration) ease;
}

.tw-view.is-out {
    opacity: 0;
}

/* Nueva Tarea: la tarea arriba, grande; Enter la crea */
.tt-title.form-control {
    height: auto;
    min-height: 56px;
    padding: 8px 10px;
    font-size: var(--tasks-title-size);
    font-weight: 600;
    line-height: 1.4;
    color: var(--page-text);
    resize: none;
}

.tt-title::placeholder {
    color: #9aa2ae;
    font-weight: normal;
}

/* Detalles: plegado, con el resumen a la derecha; desplegado, los campos en tres columnas */
.tt-details {
    border-top: 1px solid var(--tasks-line);
}

.tt-details-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 0 4px;
    border: 0;
    background: transparent;
    color: var(--tasks-accent);
    font-weight: 600;
    text-align: left;
}

.tt-details-toggle svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    transition: transform var(--tasks-switch-duration) var(--tasks-ease);
}

.tt-details.is-open .tt-details-toggle svg {
    transform: rotate(90deg);
}

.tt-details-toggle:hover .tt-details-label,
.tt-details-toggle:focus-visible .tt-details-label {
    text-decoration: underline;
}

.tt-details-toggle:focus-visible {
    outline: none;
}

.tt-details-summary {
    min-width: 0;
    overflow: hidden;
    color: var(--tasks-muted);
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-details-summary:not(:empty)::before {
    content: '·';
    margin-right: 6px;
}

.tt-details.is-open .tt-details-summary {
    display: none;
}

.tt-details-body[hidden] {
    display: none;
}

/* Detalles: Área, Prioridad y las fechas cuatro por fila (tt-quarter); cliente, proyecto y subproyecto tres por fila;
   la información adicional a todo el ancho (tt-wide). Doce columnas para que las dos filas se repartan parejo. */
.tt-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 12px;
    padding-top: 8px;
}

.tt-grid .form-group {
    grid-column: span 4;
    min-width: 0;
    margin-bottom: 12px;
}

.tt-grid .form-group.tt-quarter {
    grid-column: span 3;
}

.tt-grid .form-group.tt-wide {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.tt-info.form-control {
    height: auto;
    resize: vertical;
}

/* Al abrir una tarea guardada el foco va a la vista (no al título: en el celular abriría el teclado) */
.tt:focus {
    outline: none;
}

/* Mientras se lee la tarea guardada: el título (el de la tarjeta, si se abrió desde Inicio) y nada más */
.tt.is-loading > :not(.tt-head) {
    visibility: hidden;
}

.tt.is-loading .tt-title.form-control[readonly] {
    background: #fff;
}

.tt-failed {
    margin: 0;
    color: #a94442;
}

/* Cabecera: ✓ (guardada), la tarea y, a su derecha, la pastilla de estado (guardada) y el color */
.tt-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tt-head .tt-title-group {
    flex: 1 1 auto;
    min-width: 0;
}

.tt-side {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

/* El color de la tarea: franja a la izquierda del título (el texto no se mueve: el borde crece y el relleno baja) */
.tt.has-color .tt-title.form-control {
    padding-left: calc(10px - var(--tasks-color-stripe) + 1px);
    border-left: var(--tasks-color-stripe) solid var(--tt-color);
}

/* ✓ de la tarea: como el de las tarjetas de Inicio, más grande. Vacío; al pasar el mouse, el ✓ en verde; terminada,
   verde lleno. Deshabilitado (aria-disabled: así se lee su ayuda al pasar el mouse) sin cambiar al pasar el mouse. */
.tt-check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--tasks-check-size);
    height: var(--tasks-check-size);
    margin-top: 8px;
    padding: 0;
    border: 1.5px solid var(--tasks-check-border);
    border-radius: 50%;
    background: #fff;
    color: transparent;
    cursor: pointer;
    transition: border-color var(--tasks-hover-duration) ease, background-color var(--tasks-hover-duration) ease,
                color var(--tasks-hover-duration) ease;
}

.tt-check svg {
    width: 13px;
    height: 13px;
    stroke-width: 3;
}

.tt-check:hover,
.tt-check:focus-visible {
    border-color: var(--tasks-done);
    color: var(--tasks-done);
    outline: none;
}

.tt-check.is-done {
    border-color: var(--tasks-done);
    background: var(--tasks-done);
    color: #fff;
}

.tt-check[aria-disabled="true"] {
    cursor: default;
}

/* Solo lectura: el círculo vacío, apagado (no se puede terminar) */
.tt-check[aria-disabled="true"]:not(.is-done) {
    opacity: .6;
}

.tt-check[aria-disabled="true"]:not(.is-done):hover {
    border-color: var(--tasks-check-border);
    color: transparent;
}

/* Pastilla de estado: un <select> con los estados a los que puede pasar (o solo el nombre, si no puede pasar a
   ninguno). La lista que abre el navegador va en blanco. */
.tt-status {
    display: inline-block;
    height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background-color: var(--tasks-status-pending-bg);
    color: var(--tasks-status-pending-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}

select.tt-status {
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.tt-status:focus-visible {
    outline: 2px solid var(--tasks-accent);
    outline-offset: 1px;
}

select.tt-status option {
    background: #fff;
    color: var(--page-text);
    font-weight: normal;
}

.tt-status.is-progress {
    background-color: var(--tasks-status-progress-bg);
    color: var(--tasks-status-progress-text);
}

.tt-status.is-done {
    background-color: var(--tasks-status-done-bg);
    color: var(--tasks-status-done-text);
}

.tt-status.is-annulled {
    background-color: var(--tasks-status-annulled-bg);
    color: var(--tasks-status-annulled-text);
}

/* Color (🎨): un círculo; sin color, los seis colores en rueda (como en el diseño); con color, ese color */
.tt-color {
    flex: 0 0 auto;
    width: var(--tasks-color-size);
    height: var(--tasks-color-size);
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: conic-gradient(var(--home-task-color-rojo), var(--home-task-color-naranja), var(--home-task-color-amarillo),
                var(--home-task-color-verde), var(--home-task-color-azul), var(--home-task-color-morado), var(--home-task-color-rojo));
    box-shadow: 0 0 0 1px #cfd5df;
    cursor: pointer;
    transition: box-shadow var(--tasks-hover-duration) ease;
}

.tt.has-color .tt-color {
    background: var(--tt-color);
}

.tt-color:hover,
.tt-color:focus-visible,
.tt-color[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--tasks-accent);
    outline: none;
}

.tt-color[aria-disabled="true"],
.tt-color[aria-disabled="true"]:hover {
    box-shadow: 0 0 0 1px #cfd5df;
    cursor: default;
    opacity: .6;
}

/* Solo lectura (no soy responsable ni la creé, o está anulada): por qué, y "Reabrir" */
.tt-notice {
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--tasks-notice-bg);
    color: var(--tasks-muted);
}

.tt-notice .btn {
    margin-left: 6px;
}

/* "Eliminar" una anulada: en rojo, como el 🗑 */
.tt-notice .tt-delete {
    color: var(--tasks-danger);
}

/* Última línea: quién la creó y quién la cambió por última vez (formato de AuditStamp.cs) */
.tt-audit {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--tasks-line);
    color: var(--tasks-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Listas y subtareas (Assets/js/tasks-lists.js): las listas como pestañas, debajo de Detalles */
.tl {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--tasks-line);
}

.tl-title {
    margin: 0 0 6px;
    color: var(--tasks-accent);
    font-size: 12px;
    font-weight: 700;
}

.tl-total {
    margin-left: 6px;
    color: var(--tasks-muted);
    font-weight: normal;
    font-variant-numeric: tabular-nums;
}

.tl-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px 8px;
}

/* Con listas, la fila de pestañas lleva su línea debajo (la pestaña elegida la pisa con la suya) */
.tl.has-lists .tl-bar {
    border-bottom: 1px solid var(--tasks-line);
}

.tl.has-lists .tl-tabs {
    margin-bottom: -1px;
}

.tl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
}

.tl-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    padding: 6px 10px;
    border: 0;
    border-bottom: var(--tasks-tab-line) solid transparent;
    background: transparent;
    color: var(--tasks-muted);
    font-weight: 600;
}

.tl-tab-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-tab-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
}

.tl-tab:hover {
    color: var(--tasks-accent);
}

.tl-tab.is-active {
    border-bottom-color: var(--tasks-accent);
    color: var(--tasks-accent);
}

/* La pestaña elegida se renombra con un clic: el cursor de texto lo sugiere */
.tl:not(.is-readonly) .tl-tab.is-active {
    cursor: text;
}

.tl-tab:focus-visible {
    outline: 2px solid var(--tasks-accent);
    outline-offset: -2px;
}

.cmodal .tl-tab-input.form-control {
    width: auto;
    height: 28px;
    margin-bottom: 3px;
    padding: 2px 8px;
    font-weight: 600;
}

.tl-add-list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tasks-accent);
    font-weight: 600;
}

.tl-add-list svg {
    width: 14px;
    height: 14px;
}

.tl-add-list:hover,
.tl-add-list:focus-visible {
    background: var(--tasks-action-hover-bg);
    outline: none;
}

/* La lista elegida: su subproyecto y sus acciones arriba, las pendientes, "Agregar subtarea" y Terminadas (plegado) */
.tl-panel {
    padding-top: 8px;
}

.tl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 6px;
}

.tl-sub {
    display: flex;
    flex: 0 1 340px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tl-sub-label {
    margin: 0;
    color: var(--tasks-muted);
    font-weight: 600;
    white-space: nowrap;
}

.tl-sub-combo {
    flex: 1 1 auto;
    min-width: 0;
}

.tl-toolbar-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.tl-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    transition: background-color var(--tasks-hover-duration) ease;
}

/* Recién escrita, mientras se guarda */
.tl-row.is-saving {
    opacity: .55;
}

/* ✓ de una subtarea (como el de las tarjetas de Inicio) o, en Nueva Tarea, un punto */
.tl-check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--tasks-item-check-size);
    height: var(--tasks-item-check-size);
    margin-top: 1px;
    padding: 0;
    border: 1.5px solid var(--tasks-check-border);
    border-radius: 50%;
    background: #fff;
    color: transparent;
    cursor: pointer;
    transition: border-color var(--tasks-hover-duration) ease, background-color var(--tasks-hover-duration) ease,
                color var(--tasks-hover-duration) ease;
}

.tl-check svg {
    width: 10px;
    height: 10px;
    stroke-width: 3;
}

.tl-check:hover,
.tl-check:focus-visible {
    border-color: var(--tasks-done);
    color: var(--tasks-done);
    outline: none;
}

.tl-check.is-done {
    border-color: var(--tasks-done);
    background: var(--tasks-done);
    color: #fff;
}

.tl-check[disabled] {
    cursor: default;
}

.tl-check[disabled]:not(.is-done):hover {
    border-color: var(--tasks-check-border);
    color: transparent;
}

.tl-bullet {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 6px 5px 0;
    border-radius: 50%;
    background: var(--tasks-check-border);
}

/* El texto: un clic lo cambia ahí mismo (cursor de texto); hecha, en gris y tachada */
.tl-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.tl-text[data-act] {
    cursor: text;
}

.tl-text:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--tasks-accent);
    outline-offset: 2px;
}

.tl-row.is-done .tl-text {
    color: var(--tasks-muted);
    text-decoration: line-through;
}

.cmodal .tl-edit.form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    min-height: 26px;
    margin: -4px 0;
    padding: 3px 6px;
    overflow: hidden;
    line-height: 1.45;
    resize: none;
}

/* Cuándo y quién la creó (pendiente) o la marcó (hecha): "20/10 · ABR"; el detalle al pasar el mouse */
.tl-stamp {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--tasks-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 📌 y 🗑 de la fila; duplicar y quitar la lista */
.tl-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    margin: -3px 0;
}

.tl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tasks-action-size);
    height: var(--tasks-action-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tasks-action-off);
    cursor: pointer;
    transition: background-color var(--tasks-hover-duration) ease, color var(--tasks-hover-duration) ease,
                opacity var(--tasks-hover-duration) ease;
}

.tl-icon svg {
    width: 14px;
    height: 14px;
}

.tl-icon:hover,
.tl-icon:focus-visible {
    background: var(--tasks-action-hover-bg);
    color: var(--tasks-accent);
    outline: none;
}

.tl-icon.is-danger:hover,
.tl-icon.is-danger:focus-visible {
    background: var(--tasks-danger-hover-bg);
    color: var(--tasks-danger);
}

.tl-pin.is-on {
    color: var(--tasks-accent);
}

.tl-pin.is-on svg {
    fill: var(--tasks-accent);
}

/* Menos ruido (como las tarjetas de Inicio): con mouse, 📌 y 🗑 aparecen al pasar por la fila o al llegar con el
   teclado; un 📌 fijado queda a la vista. En pantallas táctiles se ven siempre. */
@media (hover: hover) {
    .tl-row:hover {
        background: var(--tasks-row-hover);
    }

    .tl-actions .tl-icon {
        opacity: 0;
    }

    .tl-row:hover .tl-icon,
    .tl-row:focus-within .tl-icon,
    .tl-actions .tl-pin.is-on {
        opacity: 1;
    }
}

/* "Agregar subtarea": alineado con el texto de las filas (relleno + círculo + espacio) */
.tl-add {
    margin: 4px 0 2px;
    padding-left: calc(6px + var(--tasks-item-check-size) + 8px);
}

.cmodal .tl-add-input.form-control {
    height: 30px;
    border-style: dashed;
}

.cmodal .tl-add-input.form-control:focus {
    border-style: solid;
}

/* Celular: Detalles en una columna; la pastilla y el color debajo de la tarea; el sello de una subtarea, debajo de
   su texto */
@media (max-width: 575px) {
    .tt-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tt-grid .form-group,
    .tt-grid .form-group.tt-quarter {
        grid-column: 1 / -1;
    }

    .tt-head {
        flex-wrap: wrap;
    }

    .tt-side {
        order: 3;
        width: 100%;
        margin-top: -8px;
        padding: 0 0 10px;
    }

    .tt.is-task .tt-side {
        padding-left: calc(var(--tasks-check-size) + 8px);
    }

    .tl-row {
        flex-wrap: wrap;
    }

    .tl-stamp {
        order: 3;
        flex-basis: 100%;
        padding-left: calc(var(--tasks-item-check-size) + 8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tw-view,
    .tt-details-toggle svg,
    .tt-check,
    .tt-color,
    .tl-row,
    .tl-check,
    .tl-icon {
        transition: none;
    }
}

/*================== Avisos (toastr: Assets/js/toast.js y los que llaman a toastr directamente) ==================*/
/* Arriba al centro, toastr pone los avisos dentro de una caja invisible de todo el ancho, por encima de la página:
   mientras se ve un aviso, esa caja tapaba los clics en el header. Los clics pasan a través de la caja; el aviso
   mismo (su ✕, "Deshacer") sí los recibe. Vale para todos los avisos del sistema. */
#toast-container {
    pointer-events: none;
}

#toast-container > div {
    pointer-events: auto;
}

/* Botón "Deshacer" dentro del aviso (fondo azul de toastr, texto blanco) */
#toast-container .toast-undo {
    margin-left: 10px;
    padding: 1px 10px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 12px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

#toast-container .toast-undo:hover,
#toast-container .toast-undo:focus {
    background: rgba(255, 255, 255, .18);
    outline: none;
}