/* ==========================================================================
   ERP-Pro — armazon del portal del cliente.
   --------------------------------------------------------------------------
   QUE ES ESTO Y QUE NO ES. Es GEOMETRIA, no estilo: donde va la barra
   superior, cuanto ocupa la lateral, como se comporta en un movil. El color,
   la tipografia y los componentes los pone la capa de diseño del panel
   (`assets/theme/erp-modern.css`), que ahora tambien se carga en el portal;
   con la capa `classic` esa hoja NI SE CARGA, asi que cada regla de aqui usa
   `var(--erp-x, respaldo)` y el respaldo es el color del tema de siempre.
   Un `var()` sin respaldo se queda TRANSPARENTE sin error y sin log.

   POR QUE HACIA FALTA. El portal usaba una `navbar` de Bootstrap sin barra
   lateral y el logotipo se pintaba sin acotar -de ahi que saliera gigante,
   porque `company_logo_html()` no pone alto y la cabecera del panel lo limita
   desde FUERA, con `[&_img]:tw-h-9`-. Ya cargaba el mismo Tailwind, asi que
   la paridad visual era un trabajo de maquetacion.

   LA CLAVE DEL DISEÑO: MISMO MARCADO QUE EL PANEL. El armazon usa `#header`,
   `aside#menu.sidebar`, `#wrapper` y `.content`, que son exactamente los
   selectores que la capa de diseño ya viste. Asi el portal hereda el modo
   oscuro, la densidad, el acento y el estado activo del menu sin duplicar ni
   una regla; lo unico que falta es la geometria, porque esa vive en
   `assets/css/style.css` -la hoja del PANEL, que el portal no carga- y no en
   `assets/themes/default/css/style.css`, que es la del portal y trae una
   columna flex con navbar y pie.

   Por lo mismo el <body> del portal lleva la clase `app`: es la que usa
   `erp-modern.css` para la tipografia base y el fondo (`body.app`). La hoja
   del portal no declara ni una regla `.app`, comprobado, asi que añadirla no
   pisa nada.
   ========================================================================== */

/* ---------------------------------------------------------------- medidas */

:root {
    --portal-topbar-h: 57px;
    --portal-menu-w: 244px;
    --portal-rail-w: 64px;
}

/* ---------------------------------------------------------------- cimiento */

/*
 | La hoja del portal declara `body{display:flex; flex-direction:column;
 | min-height:100vh}` para su columna navbar/contenido/pie. El armazon nuevo no
 | es una columna: son tres hermanos posicionados, como en el panel.
 */
body.portal {
    display: block;
    min-height: 100vh;
    background: var(--erp-bg, #f4f6fa);
}

/* --------------------------------------------------------------- cabecera */

body.portal #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--portal-topbar-h);
    z-index: 1030;
    background: var(--erp-topbar, #ffffff);
    border-bottom: 1px solid var(--erp-border, #e2e8f0);
}

/* El logotipo, ACOTADO EN ALTO. Es el arreglo del bicho: `company_logo_html()`
   pinta un <img> sin dimensiones y el contenedor tiene que ponerle el techo,
   igual que hace la cabecera del panel. */
body.portal #logo {
    display: flex;
    align-items: center;
    height: var(--portal-topbar-h);
    padding: 0 16px;
    overflow: hidden;
}

body.portal #logo img {
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

body.portal #logo .logo-text {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    color: var(--erp-ink, #1e293b);
    text-decoration: none;
}

body.portal .portal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--portal-topbar-h);
}

body.portal .portal-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-inline-end: 12px;
}

/* Los dos botones redondos de la barra -idioma y cuenta- con el mismo aire que
   los del panel, sin depender de las utilidades `tw-` que alli van en la vista. */
body.portal .portal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--erp-radius-sm, 8px);
    color: var(--erp-ink-soft, #475569);
    text-decoration: none;
    background: transparent;
    border: 0;
    line-height: 1.2;
}

body.portal .portal-chip:hover,
body.portal .portal-chip:focus,
body.portal .open > .portal-chip {
    background: var(--erp-surface-3, #eef2f8);
    color: var(--erp-ink, #0f172a);
    text-decoration: none;
}

body.portal .portal-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    border-radius: 999px;
    background: var(--erp-surface-3, #eef2f8);
    color: var(--erp-ink-soft, #475569);
}

body.portal .portal-account-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El boton que abre el menu en un movil. De 768 en adelante no hace falta. */
body.portal .portal-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    color: var(--erp-ink-soft, #475569);
}

/* ----------------------------------------------------------- barra lateral */

body.portal aside#menu.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: var(--portal-menu-w);
    padding-top: var(--portal-topbar-h);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1020;
    background: var(--erp-rail, #f8fafc);
    border-inline-end: 1px solid var(--erp-border, #e2e8f0);
    transition: transform .2s ease;
}

body.portal aside#menu.sidebar > ul.nav {
    padding: 12px 10px;
    margin: 0;
}

body.portal aside#menu.sidebar ul.nav > li {
    position: relative;
    list-style: none;
}

body.portal aside#menu.sidebar ul.nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--erp-menu-y, 8px) 11px;
    color: var(--erp-ink-soft, #475569);
    font-weight: 500;
    font-size: var(--erp-size, 14px);
    border-radius: var(--erp-radius-sm, 8px);
    text-decoration: none;
}

body.portal aside#menu.sidebar ul.nav li a .menu-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--erp-ink-faint, #94a3b8);
    flex: 0 0 20px;
}

body.portal aside#menu.sidebar ul.nav > li > a:hover,
body.portal aside#menu.sidebar ul.nav > li > a:focus {
    background: var(--erp-surface-3, #eef2f8);
    color: var(--erp-ink, #0f172a);
}

body.portal aside#menu.sidebar ul.nav > li.active > a {
    background: var(--erp-a-14, rgba(37, 99, 235, .12));
    color: var(--erp-accent-text, #1d4ed8);
    font-weight: 650;
}

body.portal aside#menu.sidebar ul.nav > li.active > a .menu-icon {
    color: var(--erp-accent, #2563eb);
}

/* El filo de acento del elemento activo, igual que en el panel. */
body.portal aside#menu.sidebar ul.nav > li.active > a::before {
    content: "";
    position: absolute;
    inset-inline-start: -6px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 999px;
    background: var(--erp-accent, #2563eb);
}

/* Submenu: lista sangrada, no botones pequeños. */
body.portal aside#menu.sidebar ul.nav-second-level {
    padding: 0 0 4px 0;
    margin: 0;
    list-style: none;
}

body.portal aside#menu.sidebar ul.nav-second-level li a {
    padding: 4px 12px 4px 41px;
    font-size: var(--erp-size-sm, 12.5px);
    color: var(--erp-ink-muted, #64748b);
}

body.portal aside#menu.sidebar ul.nav-second-level li.active a {
    color: var(--erp-accent-text, #1d4ed8);
    font-weight: 650;
}

body.portal aside#menu.sidebar .portal-menu-arrow {
    margin-inline-start: auto;
    font-size: 11px;
    color: var(--erp-ink-faint, #94a3b8);
}

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

body.portal #wrapper {
    margin-inline-start: var(--portal-menu-w);
    padding-top: var(--portal-topbar-h);
    min-height: 100vh;
    background: var(--erp-bg, #f4f6fa);
    /* La hoja del portal lo declara `flex:1` para su columna; aqui no hay
       columna que rellenar. */
    flex: none;
}

body.portal #wrapper > .content {
    padding: var(--erp-content-pad, 24px);
}

/* La hoja del portal fija el pie en 50 px de alto con fondo propio, que con la
   barra lateral queda como una franja suelta. Aqui es una linea discreta al
   final del contenido. */
body.portal footer.footer {
    background: transparent;
    border-top: 1px solid var(--erp-border-soft, #e9eef5);
    height: auto;
    margin-top: 28px;
    padding: 16px 0 4px;
    /* Es texto: muted, no faint (daba 2,4:1; 2.3.0). */
    color: var(--erp-ink-muted, #5b6577);
    font-size: var(--erp-size-sm, 12.5px);
}

/* ---------------------------------------------- portal SIN sesion (acceso) */

/*
 | Las pantallas de acceso, recuperacion y segundo factor no pintan armazon
 | (`navigationEnabled = false`), asi que no llevan la clase `portal` y se
 | quedan con la hoja del tema tal cual. Nada que hacer aqui.
 */

/* ------------------------------------------------------ menu en carril */

/*
 | Con `clients_portal_menu = rail` el menu queda en 64 px y solo iconos, como
 | el del panel. El defecto es el menu con NOMBRES: el carril se justifica en
 | quien entra ocho horas al dia y se aprende los iconos, y un cliente entra
 | una vez al mes. Se deja como ajuste porque hay portales de uso diario.
 |
 | Acotado a partir de 768 px A PROPOSITO: en el movil el menu es un cajon que
 | se desliza, y alli el carril no significa nada. Deshacerlo abajo con
 | `display: revert` se llevaria por delante el `.collapse` de Bootstrap.
 */
@media (min-width: 768px) {
    body.portal.portal--rail aside#menu.sidebar {
        width: var(--portal-rail-w);
    }

    body.portal.portal--rail aside#menu.sidebar ul.nav li a {
        justify-content: center;
        padding-inline: 0;
    }

    body.portal.portal--rail aside#menu.sidebar .menu-text,
    body.portal.portal--rail aside#menu.sidebar .portal-menu-arrow,
    body.portal.portal--rail aside#menu.sidebar ul.nav-second-level {
        display: none;
    }

    body.portal.portal--rail #wrapper {
        margin-inline-start: var(--portal-rail-w);
    }

    body.portal.portal--rail #logo {
        width: var(--portal-rail-w);
        justify-content: center;
        padding: 0 6px;
    }

    body.portal.portal--rail #logo img {
        max-width: 48px;
    }

    body.portal.portal--rail #logo .logo-text {
        max-width: 52px;
        font-size: 15px;
    }
}

/* ------------------------------------------------------------------ movil */

@media (max-width: 767px) {
    body.portal .portal-menu-toggle {
        display: inline-flex;
        align-items: center;
    }

    body.portal aside#menu.sidebar {
        transform: translateX(-100%);
        box-shadow: var(--erp-shadow-3, 0 18px 40px -12px rgba(15, 23, 42, .22));
    }

    [dir="rtl"] body.portal aside#menu.sidebar {
        transform: translateX(100%);
    }

    body.portal.portal--menu-open aside#menu.sidebar {
        transform: none;
    }

    body.portal #wrapper {
        margin-inline-start: 0;
    }

    /* 15 px a los lados y no 14: las `.row` de Bootstrap se salen 15 px por
       cada lado, y con 14 la pagina medía un pixel mas que el telefono
       (desplazamiento horizontal en todas las pantallas del portal). */
    body.portal #wrapper > .content {
        padding: 16px 15px;
    }

    /* El velo que cierra el cajon al tocar fuera. Sin JavaScript no seria
       posible cerrarlo, asi que el velo se pinta solo cuando esta abierto. */
    body.portal.portal--menu-open .portal-scrim {
        display: block;
    }

    body.portal #logo {
        padding-inline-start: 0;
    }

    body.portal #logo img {
        max-width: 150px;
    }

    body.portal #logo .logo-text {
        max-width: 150px;
        font-size: 17px;
    }
}

body.portal .portal-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1010;
    background: rgba(15, 23, 42, .35);
}

/* -------------------------------------------------- piezas de las pantallas */

/* Tarjeta de la portada. Se escribe aqui y no con utilidades `tw-` porque son
   seis reglas y asi no depende de que el bundle purgado traiga cada una. */
.portal-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

a.portal-card:hover,
a.portal-card:focus {
    text-decoration: none;
    color: inherit;
}

.portal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.portal-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    border-radius: var(--erp-radius-sm, 8px);
    background: var(--erp-a-10, rgba(37, 99, 235, .1));
    color: var(--erp-accent, #2563eb);
    flex: 0 0 34px;
}

.portal-card-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--erp-ink, #0f172a);
    margin: 6px 0 0;
    word-break: break-word;
}

.portal-card-label {
    color: var(--erp-ink-muted, #64748b);
    font-size: var(--erp-size-sm, 12.5px);
}

.portal-card--warn .portal-card-icon {
    background: var(--erp-warn-bg, #fdf1dd);
    color: var(--erp-warn, #a55a00);
}

.portal-card--danger .portal-card-icon {
    background: var(--erp-danger-bg, #fdeaea);
    color: var(--erp-danger, #b91c1c);
}

.portal-card--ok .portal-card-icon {
    background: var(--erp-ok-bg, #e7f6ed);
    color: var(--erp-ok, #15803d);
}

/* Lista de datos de solo lectura de «Mi empresa». Un `<dl class="dl-horizontal">`
   de Bootstrap 3 parte la etiqueta en dos lineas en cuanto es larga; esto es
   una rejilla que respira. */
.portal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 24px;
    margin: 0;
}

.portal-fact-label {
    display: block;
    color: var(--erp-ink-muted, #64748b);
    font-size: var(--erp-size-sm, 12.5px);
    margin-bottom: 2px;
}

.portal-fact-value {
    display: block;
    color: var(--erp-ink, #0f172a);
    word-break: break-word;
}

/* Aviso «este campo esta pendiente de aprobacion». */
.portal-pending {
    display: block;
    margin-top: 4px;
    color: var(--erp-warn, #a55a00);
    font-size: var(--erp-size-sm, 12.5px);
}

/* Cabecera de pantalla del portal. */
.portal-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.portal-page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    color: var(--erp-ink, #0f172a);
}

.portal-page-sub {
    margin: 2px 0 0;
    color: var(--erp-ink-muted, #64748b);
    font-size: var(--erp-size-sm, 12.5px);
}

/* Las pestañas de «Mi empresa» tienen que poder desplazarse en un movil: seis
   pestañas no caben en 420 px y sin esto la pagina entera se desplaza en
   horizontal. */
.portal-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.portal-tabs > .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}