/* ============================================================================
   PORTAL DE ASOCIADOS - Pagina de bienvenida
   2026-08-02 - David Caicedo
   ----------------------------------------------------------------------------
   Rediseno PURAMENTE VISUAL de views/notificacion.php ( home del portal ).

   - Se carga solo desde esa vista, y TODO cuelga de "body.portal-home", clase
     que la propia vista enciende y que js/panel.js apaga al navegar a otra
     seccion. Fuera del home nada de esto aplica.
   - El hero azul reutiliza el mismo degradado del navbar ( navbar-glass.css ).
     Ambos usan background-attachment:fixed para que se vean como una sola
     superficie continua, sin costura, aun con la barra en sticky.
   - Los colores salen de tbl_confport a traves de --portal-c1 / --portal-c2,
     que componentes/menu_on.php publica en :root.
   ========================================================================== */

/* ======================================== Saludo en la linea del breadcrumb ==
   2026-08-21 - David Caicedo - El saludo ocupaba un renglon entero debajo de la
   ruta, con la pildora sola a la izquierda y todo el ancho de la derecha vacio.
   Sube a esa misma linea y el home gana esa altura completa.

   Las dos medidas las publica el script de views/notificacion.php, que las saca
   del ancho REAL de la pildora ( "Inicio > Notificaciones" cambia de largo por
   cliente, y quemarlas aqui las dejaria montadas o con un hueco ). Ese mismo
   script explica por que el saludo no se mueve en el DOM.

   Sin script no hay clase ni variables, y el saludo queda debajo como siempre. */
body.portal-home.home-saludo-linea .home-hero {
    margin-top: var(--saludo-sube, 0);
}

/* El saludo se va contra el borde DERECHO, no pegado a la ruta: asi la linea queda
   equilibrada ( ruta a la izquierda, saludo a la derecha ) y el renglon se aprovecha
   entero. La sangria de la izquierda no es decoracion: es lo que garantiza que el
   saludo NUNCA se monte sobre la pildora, por largo que sea el nombre; si no cabe,
   el navegador lo baja de linea dentro del propio saludo, no encima de la ruta.
   El centrado vertical lo da min-height contra el alto real de la pildora.        */
body.portal-home.home-saludo-linea .home-hero .portal-hello {
    justify-content: flex-end;
    text-align: right;
    padding-left: var(--saludo-sangria, 0);
    min-height: var(--saludo-alto, 0);
}

/* 2026-08-21 - David Caicedo - La bienvenida se alinea con el saludo, no con la
   ruta: los dos cierran contra el mismo borde y se leen como un bloque. Sigue
   ocupando el ancho completo ( max-width:none, mas abajo ), asi que entra en una
   sola linea; lo que cambia es de que lado termina.                             */
body.portal-home.home-saludo-linea .home-hero .portal-hello-sub {
    text-align: right;
}

@media (max-width: 991px) {
    /* En pantalla angosta la ruta ya ocupa su linea: el saludo vuelve abajo.
       El script tambien se abstiene, esto es el respaldo por si se aplico la
       clase antes de girar el telefono. */
    body.portal-home.home-saludo-linea .home-hero {
        margin-top: 0;
    }

    body.portal-home.home-saludo-linea .home-hero .portal-hello {
        justify-content: flex-start;
        text-align: left;
        padding-left: 0;
    }

    body.portal-home.home-saludo-linea .home-hero .portal-hello-sub {
        text-align: left;
    }
}

/* 2026-08-21 - David Caicedo - portal-shell.css le pone max-width:580px, que era lo
   que partia la frase en dos renglones. Aqui abajo ya no hay nada al lado con que
   competir: la linea ocupa el mismo ancho de la tarjeta de la hoja de vida y entra
   completa. No se toca portal-shell.css: ese archivo lo comparten todas las
   pantallas del portal, y alli el limite de 580px si tiene sentido.               */
body.portal-home .portal-hello-sub {
    max-width: none;
}

/* ================================================ Pestana sin pendientes ==
   2026-08-21 - David Caicedo - Diseno 2a ( Claude Design ): estado vacio centrado,
   con el icono de la propia pestana dentro de un halo y un check verde encima.

   Reemplaza la tabla de texto plano con los chips de Usuario y Fecha. Los chips
   se quitan a proposito: repetian en las siete pestanas el correo del que ya
   inicio sesion y la fecha de hoy, justo cuando no hay nada que hacer ahi.

   El azul del prototipo ( #1668a8 ) NO se quema: sale de --home-500, que viene de
   tbl_confport, para que cada tenant conserve su marca. El unico color fijo es el
   verde del check, que es semantico ( "al dia" ) y tiene que leerse encima de
   cualquier color de marca.                                                     */
body.portal-home .home-nada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 32px;
    border-radius: 18px;
    background: var(--card-bg, #fff);
    box-shadow: 0 2px 12px rgba(22, 50, 74, .08);
    text-align: center;
}

body.portal-home .home-nada-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #e8f2fb;
    color: var(--home-500);
}

@supports (background: color-mix(in srgb, red 10%, white)) {
    body.portal-home .home-nada-ico {
        background: color-mix(in srgb, var(--home-500) 12%, #fff);
    }
}

body.portal-home .home-nada-ico > svg {
    width: 34px;
    height: 34px;
}

/* El check va pegado al borde del halo, no dentro: se lee como un sello. */
body.portal-home .home-nada-ok {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 3px solid var(--card-bg, #fff);
    border-radius: 50%;
    background: #2fa46a;
    color: #fff;
}

body.portal-home .home-nada-ok > svg {
    width: 13px;
    height: 13px;
}

body.portal-home .home-nada-tit {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink, #16324a);
}

body.portal-home .home-nada-txt {
    max-width: 380px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6b7d;
}

/* Entrada suave: la pestana cambia sin recargar y el salto se notaba. */
body.portal-home .tab-pane.active .home-nada {
    animation: home-nada-entra .2s ease-out both;
}

@keyframes home-nada-entra {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
    body.portal-home .home-nada {
        padding: 36px 20px;
    }
}

/* ================================================== Alerta de hoja de vida ==
   Tarjeta CTA que se superpone al hero.                                      */
body.portal-home .home-alert {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 26px;
    padding: 16px 20px;
    border: 1px solid #d3e5f6;
    border-radius: 16px;
    background: linear-gradient(100deg, #eaf3fd 0%, #f2f8ff 100%);
    box-shadow: 0 10px 30px rgba(22, 50, 74, .12);
    text-align: left;
}

body.portal-home .home-alert-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--home-500), var(--home-accent));
    box-shadow: 0 6px 14px rgba(43, 98, 143, .30);
}

body.portal-home .home-alert-ico i {
    font-size: 20px;
}

body.portal-home .home-alert-text {
    flex: 1 1 240px;
    min-width: 220px;
}

body.portal-home .home-alert-text b {
    display: block;
    font-size: 15px;
    color: var(--home-700);
}

body.portal-home .home-alert-text span {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
}

body.portal-home .home-alert-text span a {
    color: var(--home-500);
    font-weight: 600;
    text-decoration: underline;
}

body.portal-home .home-alert-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
    background: linear-gradient(135deg, var(--home-500), var(--home-accent));
    box-shadow: 0 6px 16px rgba(43, 98, 143, .30);
    transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}

body.portal-home .home-alert-cta:hover,
body.portal-home .home-alert-cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(43, 98, 143, .40);
    color: #fff !important;
}

body.portal-home .home-alert-cta i {
    font-size: 13px;
    transition: transform .22s var(--ease-smooth);
}

body.portal-home .home-alert-cta:hover i {
    transform: translateX(4px);
}

/* ======================================================== Accesos rapidos ==
   2026-08-21 - David Caicedo - Diseno 1b: UN panel dividido, no cinco tarjetas.

   Lo que habia eran cinco tarjetas independientes, cada una con su boton
   ( "Ver mas" / "Ingresar" / "Acceder" ), icono en degradado, resplandor y
   levantada al pasar. Se veia cargado y ocupaba casi media pantalla para lo
   que son cinco enlaces. Ahora es una sola superficie blanca partida en
   celdas: el ojo la lee como un bloque y no como cinco cosas que compiten.

   Del prototipo se respetan medidas y jerarquia. El unico color que NO se
   copia tal cual es el azul #1668A8: aqui sale de --home-500 ( tbl_confport ),
   como en el resto del portal, para que cada tenant conserve su marca. El
   fondo del circulo se calcula del mismo color con color-mix, con respaldo
   para el navegador que no lo soporte.

   Las celdas son <button>: el navegador ya les da foco y teclado. Se les
   quita la apariencia nativa, no el comportamiento.                          */

/* La banda azul del hero baja 110px POR DEBAJO de donde termina el hero
   ( .portal-hero::before, bottom:-110px ): esta hecha asi a proposito, para que la
   tarjeta de la hoja de vida se le monte encima. El problema era el encabezado de esta
   seccion, que caia justo en la costura: texto azul oscuro sobre fondo azul, ilegible y
   feo. Con este margen la seccion arranca ya en el fondo claro, con aire.

   El margen NO se le quita al hero: ese ::before lo comparten las demas pantallas del
   portal ( .portal-hero vive en portal-shell.css ) y moverlo las cambiaria todas.

   2026-08-21 - David Caicedo - Quien tapa la franja sobrante es la TARJETA DE AVISO de
   la hoja de vida, que mide casi esos 110px. Cuando el cliente apaga el modulo
   "Formulario Actualización HV", o el proveedor ya la tiene al dia, no hay tarjeta: esos
   110px quedan de puro color debajo del saludo, y ademas empujan todo hacia abajo.

   Antes se resolvia bajando la seccion de accesos para que el titulo no cayera sobre el
   color. Eso evitaba el choque pero dejaba el hueco: se cambia por lo correcto, que es
   ENCOGER la banda cuando no hay nada que superponerle. Ver .home-hero--sinaviso. */
body.portal-home .home-accesos {
    margin: 32px 0 0;
}

@media (max-width: 767px) {
    body.portal-home .home-accesos {
        margin-top: 26px;
    }
}

/* La banda baja 110px por debajo del hero SOLO para que la tarjeta del aviso se le monte
   encima. Sin tarjeta, esa caida no tapa nada: la banda termina donde termina el hero,
   que ya trae 30px de padding-bottom propios para que el texto no quede al borde.

   La clase la pone la vista ( $avisoHv ), porque el aviso se pinta en otro contenedor y
   no hay selector CSS que lo relacione con el hero sin :has(), que no se puede dar por
   seguro en todos los navegadores del portal.

   El ::before NO se toca en portal-shell.css: ese archivo lo comparten todas las
   pantallas y esta caida es la que sostiene el diseno del resto.                      */
body.portal-home .home-hero--sinaviso::before {
    bottom: 0;
}

body.portal-home .home-accesos-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 12px;
    text-align: left;
}

body.portal-home .home-accesos-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink);
}

body.portal-home .home-accesos-head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6b7d;
}

/* El panel. overflow:hidden es lo que recorta el fondo del hover contra las
   esquinas redondeadas; sin el, la primera y la ultima celda se salen.

   2026-08-21 - David Caicedo - Los divisores ya no son bordes de cada celda: son el
   FONDO del panel asomandose por un gap de 1px. Los bordes servian mientras el panel
   fuera una sola fila de cinco; con el catalogo completo puede tener dos filas y un
   numero de columnas que decide la vista, y con :nth-child no se puede seguir un
   numero variable de columnas. Asi las lineas salen solas, horizontales y verticales,
   sea cual sea la rejilla.                                                          */
body.portal-home .home-accesos-panel {
    display: grid;
    grid-template-columns: repeat(var(--acc-cols, 5), minmax(0, 1fr));
    gap: 1px;
    border-radius: 16px;
    background: #eef3f8;
    box-shadow: 0 2px 12px rgba(22, 50, 74, .08);
    overflow: hidden;
}

body.portal-home .home-acceso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 18px;
    border: 0;
    /* Opaco a proposito: es lo que tapa el fondo del panel y deja ver solo el gap. */
    background: var(--card-bg);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background .15s var(--ease-smooth);
}

body.portal-home .home-acceso:hover {
    background: #f2f8fd;
}

/* El foco se ve. Es la unica forma de recorrer los accesos con el teclado.   */
body.portal-home .home-acceso:focus-visible {
    outline: 2px solid var(--home-500);
    outline-offset: -3px;
    background: #f2f8fd;
}

body.portal-home .home-acceso-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--home-500);
    background: color-mix(in srgb, var(--home-500) 12%, #fff);
}

body.portal-home .home-acceso-ico svg {
    width: 20px;
    height: 20px;
}

body.portal-home .home-acceso-tit {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

body.portal-home .home-acceso-desc {
    font-size: 12px;
    line-height: 1.4;
    color: #7b8a99;
}

@supports not (color: color-mix(in srgb, #000, #fff)) {
    body.portal-home .home-acceso-ico {
        background: #e8f2fb;
    }
}

/* Responsive. El panel no se parte en tarjetas: se reacomoda por dentro, y los
   divisores se acomodan solos porque son el gap de la rejilla.                */
@media (max-width: 1100px) {
    body.portal-home .home-accesos-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 767px) {
    /* En movil el circulo pasa a la izquierda y el texto se alinea a su lado:
       apilar cinco bloques centrados dejaba una columna larguisima.           */
    body.portal-home .home-accesos-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    body.portal-home .home-acceso {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        row-gap: 2px;
        padding: 16px 18px;
        text-align: left;
    }

    body.portal-home .home-acceso-ico  { grid-row: 1 / span 2; }
    body.portal-home .home-acceso-tit  { grid-column: 2; align-self: end; }
    body.portal-home .home-acceso-desc { grid-column: 2; align-self: start; }

}

/* El mismo encabezado de "Accesos rapidos", reutilizado sobre las pestanas. Solo
   cambia la separacion: alli abre la pantalla, aqui separa un bloque del anterior.

   2026-08-21 - David Caicedo - De 34px a 20px: los dos bloques son la misma idea
   ( arriba se ENTRA, abajo se ve lo que ESPERA ) y separados se leian como dos
   pantallas distintas. 20px alcanza para que se note el corte. */
body.portal-home .home-tabs-head {
    margin: 20px 0 14px;
}

/* ======================================================= Tabs segmentados ==
   2026-08-21 - David Caicedo - Rediseno "Cotizaciones Final" ( Claude Design ).

   Las pestanas pasan de una fila de pildoras con la etiqueta al lado del contador,
   a pestanas de ANCHO UNIFORME ( flex:1 ) con el icono arriba y la etiqueta debajo,
   y el contador como badge flotante en la esquina.

   El azul del prototipo ( #2b6cb0 ) NO se quema: la activa usa --home-500 /
   --home-300, que salen de tbl_confport, para que cada tenant conserve su marca.
   El unico color fijo es el naranja del contador, que es semantico ( "tienes
   pendientes" ) y tiene que leerse encima de cualquier color de marca.           */
body.portal-home .home-tabs-space {
    margin-top: 38px;
}

/* 2026-08-21 - David Caicedo - El margen superior era 38px, de cuando las pestanas
   abrian el bloque solas. Ahora arriba va el encabezado "Pendientes por gestionar" y
   ese hueco dejaba el texto flotando lejos de lo que describe: la separacion la da
   el margen inferior del encabezado ( .home-tabs-head ), no las pestanas. */
body.portal-home ul.faq-cat-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f6f9fc;
    box-shadow: 0 1px 3px rgba(18, 58, 86, .08);
    scrollbar-width: none;
}

body.portal-home ul.faq-cat-tabs::-webkit-scrollbar {
    display: none;
}

/* Todas ocupan lo mismo, sin importar cuantas queden visibles segun
   tbl_confport.menusPortal. flex-basis 0 es lo que iguala los anchos: con
   "auto" mandaria el largo de cada etiqueta.                                   */
body.portal-home ul.faq-cat-tabs > li {
    float: none;
    flex: 1 1 0;
    min-width: 96px;
    margin: 0;
}

body.portal-home ul.faq-cat-tabs > li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 100%;
    margin: 0;
    padding: 10px 8px !important;
    border: none !important;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    color: #4a6a85 !important;
    background-color: transparent !important;
    transition: background-color .15s var(--ease-smooth), color .15s var(--ease-smooth);
}

body.portal-home ul.faq-cat-tabs > li > a b {
    display: block;
    font-weight: inherit;
}

body.portal-home ul.faq-cat-tabs .home-tab-ico {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

body.portal-home ul.faq-cat-tabs > li > a:hover,
body.portal-home ul.faq-cat-tabs > li > a:focus {
    background-color: #e7eff7 !important;
    color: var(--home-500) !important;
}

body.portal-home ul.faq-cat-tabs > li.active > a,
body.portal-home ul.faq-cat-tabs > li.active > a:hover,
body.portal-home ul.faq-cat-tabs > li.active > a:focus {
    color: #fff !important;
    font-weight: 800;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, var(--home-500), var(--home-300));
    box-shadow: 0 6px 16px rgba(43, 98, 143, .28);
}

/* Contador: badge flotante arriba a la derecha. La vista solo lo imprime cuando
   hay elementos, asi que aqui no hay estado "cero".                            */
body.portal-home .home-tab-count {
    position: absolute;
    top: 6px;
    right: 10px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    background: #d8e4ef;
    color: #3c5a71;
}

body.portal-home .home-tab-count.has {
    background: #ff9d4d;
    color: #fff;
    box-shadow: 0 1px 4px rgba(168, 103, 43, .35);
}

body.portal-home ul.faq-cat-tabs > li.active .home-tab-count {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

body.portal-home ul.faq-cat-tabs > li.active .home-tab-count.has {
    background: #ff9d4d;
    color: #fff;
}

/* ====================================================== Panel de contenido == */
body.portal-home .faq-cat-content {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
}

/* ------------------------------------------------- Tarjetas de los listados
   Cotizaciones, ordenes, contratos, facturas y documentos comparten la misma
   tabla heredada ( .home-table ): aqui se relee como tarjeta, sin tocar el
   HTML ni los datos. Fila 1 = cuerpo, fila 2 = pie con usuario/fecha/boton.  */
body.portal-home .faq-cat-content .home-table {
    margin-bottom: 16px !important;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform .28s var(--ease-smooth), box-shadow .28s var(--ease-smooth), border-color .28s var(--ease-smooth);
}

body.portal-home .faq-cat-content .home-table:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
}

body.portal-home .faq-cat-content .home-table td {
    border: 0;
    background: transparent;
    line-height: 1.55 !important;
    font-size: 14px !important;
    color: var(--ink);
}

/* Cuerpo */
body.portal-home .faq-cat-content .home-table tr:first-child > td {
    padding: 20px 22px 16px;
}

body.portal-home .faq-cat-content .home-table tr:first-child > td > br:first-child {
    display: none;
}

/* Titulo del registro ( "Asunto:", "Contratos:", ... ) */
body.portal-home .faq-cat-content .home-pendiente-tipo {
    display: block;
    margin-bottom: 8px;
    font-size: 16px !important;
    line-height: 1.35;
    color: var(--home-700) !important;
    padding-right: 0;
}

body.portal-home .faq-cat-content .home-pendiente-tipo i {
    margin-right: 6px;
    color: var(--home-500);
}

body.portal-home .faq-cat-content .home-pendiente-texto {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
}

/* Pie: banda gris clara con los metadatos y la accion */
body.portal-home .faq-cat-content .home-table tr + tr > td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: #f7fafd;
}

body.portal-home .faq-cat-content .home-table tr + tr > td .home-pendiente-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px !important;
    color: #48627a;
    float: none;
}

body.portal-home .faq-cat-content .home-table tr + tr > td .home-pendiente-info b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--home-700);
}

body.portal-home .faq-cat-content .home-table tr + tr > td .home-pendiente-info i {
    color: var(--home-500);
}

/* La celda que trae el boton no lleva forma de chip */
body.portal-home .faq-cat-content .home-table tr + tr > td .home-pendiente-info:has(.btn),
body.portal-home .faq-cat-content .home-table tr + tr > td .home-pendiente-info:has(a[href]) {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Boton de accion del registro */
body.portal-home .faq-cat-content .home-table .btn,
body.portal-home .faq-cat-content .home-table .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    border: none !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    font-weight: 700;
    color: #fff !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, var(--home-500), var(--home-accent)) !important;
    box-shadow: 0 6px 16px rgba(43, 98, 143, .28);
    transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth), filter .2s var(--ease-smooth);
}

/* El icono del boton va en blanco: la regla de los chips del pie lo pintaba
   de azul y se perdia sobre el degradado. */
body.portal-home .faq-cat-content .home-table .btn i,
body.portal-home .faq-cat-content .home-table .btn-primary i {
    color: #fff !important;
}

body.portal-home .faq-cat-content .home-table .btn:hover,
body.portal-home .faq-cat-content .home-table .btn:focus {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(43, 98, 143, .38);
}

/* Enlaces sueltos dentro del pie ( "Ver Documento" ) */
body.portal-home .faq-cat-content .home-table tr + tr > td a {
    color: var(--home-500) !important;
    font-weight: 600;
}

/* --------------------------------------------------- Carrusel de cotizaciones */
body.portal-home .cotizaciones-carousel {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    padding: 4px 4px 18px;
    margin: 0 -4px;
}

body.portal-home .cotizacion-card {
    flex: 0 0 340px;
    padding: 0;
}

body.portal-home .cotizacion-card .home-table {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

body.portal-home .cotizacion-card .home-table tbody {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.portal-home .cotizacion-card .home-table tr {
    display: block;
}

body.portal-home .cotizacion-card .home-table tr:first-child {
    flex: 1;
}

body.portal-home .cotizacion-card .home-table tr > td {
    display: block;
    width: 100%;
}

body.portal-home .cotizacion-card .home-table tr + tr > td {
    display: flex;
}

/* ------------------------------------------- Cotizaciones: rejilla de tarjetas
   2026-08-21 - David Caicedo - Rediseno "Cotizaciones Final" ( Claude Design ).

   Solo la pestana de Cotizaciones. Las demas ( ordenes, contratos, facturas,
   directas ) siguen con .cotizaciones-carousel + .home-table, que quedan intactos
   arriba: si mas adelante se quiere el mismo formato alla, basta con cambiarles el
   marcado a .coti-card, sin tocar nada de esta hoja.

   Como en las pestanas, el azul del prototipo sale de --home-500 / --home-300 para
   respetar el color de marca de cada tenant.                                     */
body.portal-home .home-coti-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 760px) {
    body.portal-home .home-coti-grid {
        grid-template-columns: 1fr;
    }
}

/* text-align explicito: el contenedor de la vista hereda .text-center. */
body.portal-home .coti-card {
    display: flex;
    overflow: hidden;
    border: 1px solid #e3ecf4;
    border-radius: 14px;
    background: var(--card-bg);
    text-align: left;
    transition: box-shadow .2s var(--ease-smooth);
}

body.portal-home .coti-card:hover {
    box-shadow: 0 6px 16px rgba(43, 108, 176, .12);
}

body.portal-home .coti-card-band {
    flex: 0 0 6px;
    background: linear-gradient(180deg, var(--home-500), var(--home-300));
}

body.portal-home .coti-card-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Encabezado: Asunto a la izquierda, fecha a la derecha */
body.portal-home .coti-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f2f7fb, #e8f1f9);
}

body.portal-home .coti-card-asunto {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.portal-home .coti-card-label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7d9ab1;
}

body.portal-home .coti-card-valor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}

body.portal-home .coti-card-fecha {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: #5a7a94;
}

/* ---- Cuerpo */
body.portal-home .coti-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    padding: 14px 20px 16px;
}

body.portal-home .coti-card-obs {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #3c6584;
}

body.portal-home .coti-card-obs b {
    color: var(--ink);
}

/* margin-top:auto deja el pie pegado abajo aunque las observaciones sean cortas:
   asi las dos tarjetas de una fila alinean chips y boton a la misma altura.     */
body.portal-home .coti-card-pie {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

body.portal-home .coti-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

body.portal-home .coti-chip svg {
    flex-shrink: 0;
}

body.portal-home .coti-chip--user {
    background: #eef4fa;
    color: var(--home-500);
}

body.portal-home .coti-chip--user > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.portal-home .coti-chip--dias {
    background: #fdf1e2;
    color: #a8672b;
    font-weight: 800;
    white-space: nowrap;
}

/* ====================================== Distintivo de cotizada / pendiente ==
   2026-08-24 - David Caicedo - El proveedor no tenia como saber, mirando la
   tarjeta, si ya habia presentado esta oferta. Amarillo = le falta ( sin cotizar
   o cotizada a medias ), verde = ya la presento completa.

   Los mismos dos colores que ya usa el portal en otras partes: el ambar es el de
   .coti-chip--dias, aqui arriba, y el verde el del "Estas al dia" ( .home-nada ).
   No se inventa paleta nueva.                                                 */
body.portal-home .coti-chip--pend {
    background: #fdf1e2;
    color: #a8672b;
    font-weight: 800;
    white-space: nowrap;
}

body.portal-home .coti-chip--ok {
    background: #e8f6ee;
    color: #177245;
    font-weight: 800;
    white-space: nowrap;
}

/* !important en color y fondo: Foundation y Bootstrap traen sus propias reglas
   para <button>, y sin esto el degradado se pierde.                            */
body.portal-home .coti-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 10px 18px !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 800;
    color: #fff !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, var(--home-500), var(--home-accent)) !important;
    box-shadow: 0 6px 16px rgba(43, 98, 143, .28);
    cursor: pointer;
    transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth), filter .2s var(--ease-smooth);
}

body.portal-home .coti-btn:hover,
body.portal-home .coti-btn:focus {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(43, 98, 143, .38);
}

/* ------------------------------------------------------ Estado vacio bonito */
body.portal-home .home-empty {
    padding: 32px 20px 12px;
    text-align: center;
}

body.portal-home .home-empty-illo {
    position: relative;
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border: 1px solid #ddebf8;
    border-radius: 34px;
    background: linear-gradient(135deg, #eaf3fd, #f4f9ff);
}

body.portal-home .home-empty-illo i {
    font-size: 44px;
    color: var(--home-300);
}

body.portal-home .home-empty-illo .home-empty-dot {
    position: absolute;
    top: 24px;
    right: 26px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--home-accent), var(--home-500));
}

body.portal-home .home-empty h4 {
    margin: 22px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

body.portal-home .home-empty .home-empty-sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted);
}

body.portal-home .home-meta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

body.portal-home .home-meta-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f2f6fa;
    font-size: 13px;
    font-weight: 500;
    color: #48627a;
}

body.portal-home .home-meta-chip i {
    font-size: 13px;
    color: var(--home-500);
}

body.portal-home .home-meta-chip b {
    color: var(--home-700);
    font-weight: 700;
}

/* ================================================================ Celular == */
@media (max-width: 767px) {

    body.portal-home .home-alert {
        gap: 14px;
    }

    body.portal-home .home-alert-cta {
        width: 100%;
        justify-content: center;
    }

    body.portal-home .faq-cat-content {
        padding: 16px;
    }

    /* 2026-08-21 - David Caicedo - En celular la barra vuelve a desplazarse: con
       flex:1 y siete pestanas cada una quedaria de unos 40px y el texto se
       partiria letra por letra. */
    body.portal-home ul.faq-cat-tabs > li {
        flex: 0 0 92px;
    }

    body.portal-home .coti-card-head {
        flex-wrap: wrap;
        gap: 6px;
    }

    body.portal-home .coti-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* ====================================================== Movimiento reducido */
@media (prefers-reduced-motion: reduce) {

    /* 2026-08-21 - Los accesos rapidos ya no se mueven al pasar ( solo cambian de
       fondo ), asi que no hay nada que frenar aqui. Quedan los que si lo hacen. */
    body.portal-home .home-alert-cta,
    body.portal-home .home-alert-cta i,
    body.portal-home .coti-btn {
        transition-property: opacity, background-color, box-shadow, filter, color;
    }

    /* 2026-08-21 - La entrada del estado "sin pendientes" es decorativa: si el
       usuario pidio menos movimiento, aparece y ya. */
    body.portal-home .tab-pane.active .home-nada {
        animation: none;
    }

    body.portal-home .home-alert-cta:hover,
    body.portal-home .home-alert-cta:hover i,
    body.portal-home .coti-btn:hover,
    body.portal-home .coti-btn:focus {
        transform: none;
    }
}

/* ============================================================================
   AVISO DE PENDIENTES
   2026-08-21 - David Caicedo
   ----------------------------------------------------------------------------
   Ventana que se abre al entrar al portal con las consultas sin responder y
   las cotizaciones abiertas ( ver el bloque final de views/notificacion.php ).

   Propia, sin depender de ningún plugin de modales: esta vista llega por AJAX
   y el que hubiera cargado la página anterior no siempre está disponible.

   El color sale de --home-500 / --home-accent ( tbl_confport ): no se quema
   ningún azul, cada tenant conserva su marca.
   ========================================================================== */

body.portal-home .pnd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(14, 30, 44, .55);
    backdrop-filter: blur(2px);
}

body.portal-home .pnd-overlay.is-open {
    display: flex;
    animation: pndEntra .18s var(--ease-smooth);
}

@keyframes pndEntra { from { opacity: 0; } to { opacity: 1; } }

body.portal-home .pnd-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 86vh;
    overflow: hidden;
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: 0 30px 70px rgba(14, 30, 44, .35);
    text-align: left;
}

/* ------------------------------------------------------------- Cabecera --- */
body.portal-home .pnd-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 18px;
    color: #fff;
    background-image: linear-gradient(135deg, var(--home-700), var(--home-500));
}

body.portal-home .pnd-head-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .18);
}

body.portal-home .pnd-head-ico svg { width: 21px; height: 21px; }

body.portal-home .pnd-head-text { flex: 1; min-width: 0; }

body.portal-home .pnd-head-text h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

body.portal-home .pnd-head-text p {
    margin: 3px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
}

body.portal-home .pnd-cerrar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9px;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    transition: background .15s var(--ease-smooth);
}

body.portal-home .pnd-cerrar:hover { background: rgba(255, 255, 255, .28); }

/* ---------------------------------------------------------------- Cuerpo --- */
body.portal-home .pnd-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 4px;
}

body.portal-home .pnd-seccion { margin-bottom: 18px; }

body.portal-home .pnd-seccion-tt {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #7d92a6;
}

body.portal-home .pnd-seccion-tt svg {
    width: 15px;
    height: 15px;
    color: var(--home-500);
}

body.portal-home .pnd-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--home-500);
    border-radius: 12px;
    background: #fbfdff;
}

/* Las consultas piden respuesta: se marcan en ámbar para distinguirlas. */
body.portal-home .pnd-item--consulta {
    border-left-color: #f0a132;
    background: #fffcf6;
}

body.portal-home .pnd-item-main { flex: 1; min-width: 0; }

body.portal-home .pnd-item-tt {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Máximo tres líneas: el mensaje puede ser largo y no debe empujar el botón. */
body.portal-home .pnd-item-txt {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: #5b7086;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.portal-home .pnd-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

body.portal-home .pnd-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

body.portal-home .pnd-chip--pend { background: #fbefe0; color: #b4690e; }
body.portal-home .pnd-chip--dias { background: #e9f1f9; color: var(--home-700); }

body.portal-home .pnd-fecha { font-size: 12px; color: #8a9bab; }

body.portal-home .pnd-btn {
    flex: 0 0 auto;
    padding: 9px 17px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(135deg, var(--home-500), var(--home-accent));
    box-shadow: 0 6px 16px rgba(43, 98, 143, .28);
    cursor: pointer;
    transition: transform .18s var(--ease-smooth), filter .18s var(--ease-smooth);
}

body.portal-home .pnd-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* --------------------------------------------------------------- Pie ------- */
body.portal-home .pnd-pie {
    display: flex;
    justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line);
    background: #f8fafc;
}

body.portal-home .pnd-btn--ghost {
    color: var(--muted);
    background-image: none;
    background-color: #eef2f6;
    box-shadow: none;
}

@media (max-width: 560px) {
    body.portal-home .pnd-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body.portal-home .pnd-btn { width: 100%; }
    body.portal-home .pnd-item-tt { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-home .pnd-overlay.is-open { animation: none; }
    body.portal-home .pnd-btn:hover { transform: none; }
}