/* Estilos propios del portal: sólo maquetación alrededor de los componentes del
 * DCC UI Kit. Nada de esto redefine al kit — si hace falta cambiar un
 * componente, se cambia en el kit, no acá.
 *
 * El prefijo es `portal-` a propósito: `dcc-` es el espacio de nombres del kit.
 */

/* Fila de filtros sobre la rejilla de aplicaciones. */
/* Buscador y filtro de unidad, uno junto al otro. No se estiran a lo ancho del
 * contenedor: el select tiene que quedar pegado al campo de nombre, no al
 * borde opuesto de la pantalla. */
.portal-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    margin: 24px 0;
}

.portal-filtros > .dcc-field { flex: 0 1 320px; min-width: 0; }

@media (max-width: 720px) {
    .portal-filtros > .dcc-field { flex: 1 1 100%; }
}

/* El título de la tarjeta lleva el enlace a la aplicación. El kit deja los
 * enlaces heredando color dentro de sus componentes, así que basta con darle
 * el área de clic y el foco visible. */
.dcc-ccard__title a {
    display: block;
    outline-offset: 3px;
}

/* Toda la tarjeta abre la aplicación, no sólo el texto del título.
 *
 * Se hace estirando el enlace del título sobre la tarjeta con un pseudo-elemento
 * en vez de poner un segundo <a> en la portada. Con dos enlaces al mismo destino
 * habría dos paradas de tabulador y el lector de pantalla anunciaría la misma
 * aplicación dos veces; así hay un solo enlace y el área de clic es la tarjeta
 * entera —ícono incluido, que es lo que costaba apuntar.
 *
 * El corazón se levanta por encima de esa capa para seguir siendo suyo. */
.portal-grid-apps .dcc-ccard {
    position: relative;
}

.portal-grid-apps .dcc-ccard__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.portal-grid-apps .dcc-ccard__fav {
    position: relative;
    z-index: 1;
}

/* Realce al pasar por encima, para que se lea como una sola superficie que
 * responde. En el teléfono no hay tarjeta que realzar, sólo el ícono. */
.portal-grid-apps .dcc-ccard:hover {
    border-color: var(--dcc-grey-light);
}

/* Separación entre los tabs de ambiente y la rejilla. */
.dcc-tabs__panel > .dcc-ccard-grid {
    margin-top: 8px;
}

/* Tabs de ambiente.
 *
 * El riel bajo los tabs lo dibuja el kit con --dcc-grey-ultralight, que es el
 * mismo color que el fondo de .dcc-root: la línea existe, pero acá no se ve.
 * Se sube un paso en la misma familia para que tenga contraste; el grosor y la
 * posición siguen siendo los del kit.
 *
 * El tab activo va en el azul de la barra superior en vez del rojo del kit,
 * para que la página tenga un solo acento.
 *
 * Va bajo .portal-tabs y no suelto: es una decisión de esta página, no un
 * arreglo del componente. */
.portal-tabs .dcc-tabs__list {
    border-bottom-color: var(--dcc-lightblue-light);
}

.portal-tabs .dcc-tabs__tab[aria-selected="true"] {
    color: var(--dcc-grey-default);
    border-bottom-color: var(--dcc-grey-default);
}

/* Las pestañas se reparten todo el ancho, en una sola fila. El kit las deja
 * envolverse y del tamaño de su texto, con lo que un ambiente de nombre largo
 * quedaba mucho más ancho que el resto y, si no cabían, se iban a un segundo
 * renglón que dejaba el riel partido. */
.portal-tabs .dcc-tabs__list {
    flex-wrap: nowrap;
}

.portal-tabs .dcc-tabs__tab {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding-inline: 8px;
}

/* El contador no se encoge nunca: es lo más corto y lo que más se mira. Lo que
 * cede es el nombre. */
.portal-tabs .dcc-tabs__tab .dcc-badge {
    flex: none;
}

/* Último recurso, cuando ni la versión corta cabe. */
.portal-tabs__largo,
.portal-tabs__corto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nombre corto cuando el entero ya no cabe.
 *
 * El corte va con display:none y no con visibility o una clase de sólo-lectura
 * a propósito: display:none saca el elemento del árbol de accesibilidad, así
 * que el lector de pantalla anuncia una etiqueta y no las dos seguidas. */
.portal-tabs__corto {
    display: none;
}

@media (max-width: 780px) {
    .portal-tabs__largo { display: none; }
    .portal-tabs__corto { display: inline; }

    .portal-tabs .dcc-tabs__tab {
        gap: 6px;
        padding-inline: 4px;
    }
}


/* Selector de usuario de desarrollo: una columna centrada y angosta. */
.portal-dev-login {
    max-width: 640px;
    margin: 32px auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* Rejilla de aplicaciones: tres columnas en pantallas anchas, dos en el
 * teléfono. El kit deja la suya en `auto-fill` con un mínimo de 320px, que da
 * un número de columnas variable; acá el número es fijo a propósito. */
.portal-grid-apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .portal-grid-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Barra inferior: existe sólo en el teléfono. El kit le da display:flex, así
 * que apagarla necesita un selector que pese más que su propia clase. */
.dcc-bottom-nav.portal-bottom-nav {
    display: none;
}

/* Conteo sobre el ícono de la barra inferior.
 *
 * El kit sólo trae .dcc-bottom-nav__ico--badge, que es un punto rojo sin número,
 * así que el número se arma con su badge de conteo colocado en el hueco que deja
 * .dcc-bottom-nav__ico —ya viene con position:relative.
 *
 * El tamaño se baja redefiniendo las variables del propio kit y no sus
 * propiedades: 20px de alto sobre un ícono de 24 tapaba media figura.
 *
 * El borde del color de la barra es el mismo recurso que usa el punto del kit:
 * despega el badge del ícono que tiene debajo. Cambia en la pestaña activa,
 * porque ahí el fondo es más oscuro. */
.portal-bottom-nav .dcc-badge {
    --dcc-badge-height: 16px;
    --dcc-badge-px: 4px;

    position: absolute;
    top: -6px;
    right: -12px;
    min-width: 16px;
    border-color: var(--dcc-grey-default);
    font-size: 10px;
}

.portal-bottom-nav .dcc-bottom-nav__item[aria-current="page"] .dcc-badge {
    border-color: var(--dcc-grey-dark);
}

/* Hoja de cuenta: lo que en pantalla ancha vive en el menú del encabezado.
 *
 * En pantalla ancha es una tarjeta centrada; en teléfono sube desde el borde
 * inferior, pegada a la barra, que es de donde se la llama. Es un <dialog>
 * nativo: el modo modal, el cierre con Escape y la captura del foco los pone el
 * navegador. */
.portal-cuenta {
    width: min(320px, calc(100% - 32px));
    padding: 16px;
    border: 0;
    border-radius: var(--dcc-radius-md);
    background: var(--dcc-white);
    box-shadow: var(--dcc-shadow);
}

/* Disparador del menú de cuenta en el encabezado.
 *
 * El kit define .dcc-nav-app__user como un <div>. Acá tiene que ser <button>
 * —teclado, foco y aria-haspopup—, y eso arrastra el cromo por defecto del
 * navegador: fondo gris y borde outset. Se neutraliza sin tocar nada del kit.
 *
 * El nombre va con clase propia porque .dcc-nav-app__user-name existe sólo en
 * main del kit, no en la versión publicada. */
.portal-usuario {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.portal-usuario:focus-visible {
    outline: 2px solid var(--dcc-white);
    outline-offset: 3px;
    border-radius: 4px;
}

.portal-usuario__nombre {
    white-space: nowrap;
}

.portal-cuenta::backdrop {
    background: rgba(48, 59, 77, .55);
}

.portal-cuenta__nombre {
    margin: 0 0 8px;
    padding: 0 16px;
    color: var(--dcc-grey-light);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.portal-cuenta__cerrar {
    width: 100%;
    margin-top: 16px;
}

/* --- Teléfono: cajón de aplicaciones y navegación abajo -------------------
 *
 * En pantalla angosta el portal cambia de forma. La barra de arriba y las
 * pestañas se van al borde inferior, que es donde llega el pulgar, y las
 * tarjetas se despojan hasta quedar en ícono y nombre, como el cajón de
 * aplicaciones de un teléfono.
 */
@media (max-width: 560px) {
    /* Los controles se van abajo, pero el encabezado se queda como marca: sin
     * título y sin menú de usuario —ese vive en la barra inferior—, con el
     * logotipo centrado y la barra más baja. */
    .portal-tabs .dcc-tabs__list {
        display: none;
    }

    .dcc-nav-app {
        justify-content: flex-start;
        padding-block: 10px;
    }

    .dcc-nav-app__title,
    .dcc-nav-app .portal-usuario {
        display: none;
    }

    /* El pie se va: en un teléfono son cuatro renglones de letra chica entre el
     * cajón de aplicaciones y la barra de navegación. */
    .dcc-footer {
        display: none;
    }

    /* La hoja de cuenta sube desde el borde inferior, pegada a la barra desde
     * donde se la llama. */
    .portal-cuenta {
        width: 100%;
        max-width: none;
        margin: auto auto 0;
        border-radius: var(--dcc-radius-md) var(--dcc-radius-md) 0 0;
    }

    .dcc-bottom-nav.portal-bottom-nav {
        display: flex;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 20;
    }

    /* Hueco para que la barra fija no tape el final de la página. Los 88px son
     * el alto de la barra más aire; el env() es la franja de gestos de los
     * teléfonos sin botón de inicio, que la barra ya suma a su relleno.
     *
     * Con :has() y no a secas: la pantalla de entrada no lleva barra inferior y
     * se quedaría con ese hueco muerto abajo. */
    body:has(.portal-bottom-nav) {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .dcc-tabs__panel {
        padding-top: 4px;
    }

    /* La rejilla deja de ser de tarjetas y pasa a ser de íconos: cuatro por
     * línea, fijas. Con auto-fill el número cambiaba con el ancho y la
     * cuadrícula se reacomodaba entre un teléfono y otro. */
    .portal-grid-apps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 2px;
    }

    /* Se le quita a la tarjeta todo lo que la hace tarjeta: fondo, borde,
     * sombra y relleno. Queda el ícono y, debajo, el nombre. */
    .portal-grid-apps .dcc-ccard {
        max-width: none;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .portal-grid-apps .dcc-ccard--media {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    /* Lo que no cabe en un ícono: unidad, versión, descripción y el corazón. */
    .portal-grid-apps .dcc-ccard__eyebrow,
    .portal-grid-apps .dcc-ccard__ver,
    .portal-grid-apps .dcc-ccard__desc,
    .portal-grid-apps .dcc-ccard__fav {
        display: none;
    }

    .portal-grid-apps .dcc-ccard__body {
        flex: none;
        width: 100%;
        align-items: center;
    }

    .portal-grid-apps .dcc-ccard__top {
        display: none;
    }

    /* El nombre, hasta dos renglones. Más que eso empuja las filas de forma
     * despareja y la rejilla deja de leerse como una cuadrícula. */
    .portal-grid-apps .dcc-ccard__title {
        width: 100%;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.25;
        text-align: center;
    }

    .portal-grid-apps .dcc-ccard__title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* El pie se queda al final de la ventana aunque la página sea corta. El <body>
 * ya es una columna flex de alto mínimo 100vh; basta con que el contenido
 * crezca para empujar el pie hacia abajo.
 * Va acá y no como `mt-auto` sobre .dcc-footer para no maquetar un componente
 * del kit desde fuera. */
.portal-contenido {
    flex: 1 0 auto;
}

/* Pie delgado: una sola línea de texto.
 *
 * Se conserva .dcc-footer por el fondo y los márgenes laterales del kit, pero
 * sin el bloque de enlaces ni los logotipos no hay nada que separar, así que
 * el gap de 60px y el padding de 32px sobran. */
.portal-footer {
    gap: 0;
    padding-block: 12px;
}

.portal-footer__linea {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

/* En pantallas angostas el texto no cabe en una línea, así que cae a un renglón
 * por parte —igual que el pie anterior— y los separadores se esconden: un punto
 * medio suelto al inicio de un renglón se lee peor que nada.
 *
 * Los dos selectores llevan `.portal-footer__linea >` para que pesen lo mismo:
 * si el de la clase queda más liviano, `display: block` gana y los separadores
 * reaparecen, cada uno en su propia línea. */
@media (max-width: 560px) {
    .portal-footer__linea > span { display: block; }
    .portal-footer__linea > .portal-footer__sep { display: none; }
}

/* Inicial en la portada, cuando la app no tiene ícono elegido. La portada del
 * kit ya centra su contenido; acá sólo se le da tamaño y peso de monograma. */
.portal-inicial {
    font-family: var(--dcc-font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

/* Aviso de error de las acciones que van por fetch: el corazón y el ícono. Sólo
 * aparece cuando algo falla, así que no ocupa espacio mientras todo va bien. */
.portal-aviso {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--dcc-radius-md);
    background: var(--dcc-red-ultralight);
    color: var(--dcc-red-dark);
    font-size: 14px;
}

/* El corazón marcado se queda en contorno.
 *
 * El kit rellena el ícono del botón al marcarlo
 * (.dcc-ccard__fav[aria-pressed=true] svg { fill: currentColor }). Anclado o no
 * se distingue igual: el contorno pasa de gris a rojo, y aria-pressed lo dice
 * para quien no ve el color.
 *
 * El selector repite el del kit —misma especificidad— y gana porque portal.css
 * se enlaza después. */
.dcc-ccard__fav[aria-pressed="true"] svg {
    fill: none;
}

/* Panel de las pantallas de sesión (entrar, y el paso previo a abrir una app).
 *
 * El kit no trae un panel genérico —.dcc-box es la casilla de un checkbox y
 * .dcc-stack sólo vive dentro de .dcc-alert—, así que la caja se arma acá con
 * sus tokens. Lo de adentro sí son componentes del kit: tipografías, botón y
 * alerta. */
.portal-panel {
    /* El descuento de 32px es lo que deja aire a los lados en un teléfono: con
     * un 100% pelado el panel quedaba pegado a los dos bordes de la pantalla. */
    width: min(440px, calc(100% - 32px));
    margin: 48px auto;
    overflow: hidden;
    border-radius: var(--dcc-radius-md);
    background: var(--dcc-white);
    box-shadow: var(--dcc-shadow);
}

/* Franja del logotipo. Va en el gris de la barra superior porque el logotipo
 * del kit es blanco: sobre el fondo claro de .dcc-root no se vería. */
.portal-panel__cab {
    display: grid;
    place-items: center;
    padding: 28px 24px;
    background: var(--dcc-grey-default);
}

.portal-panel__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 24px;
    text-align: center;
}

.portal-panel__titulo {
    margin: 0;
}

/* La alerta trae su propia disposición —ícono a un lado, texto alineado con
 * él—, y centrarle el interior la desarma: la última línea queda suelta bajo un
 * bloque irregular. Se centra la caja dentro del panel, no lo de dentro de la
 * caja. Y ocupa el ancho: una alerta angosta en medio de un panel ancho parece
 * un recorte. */
.portal-panel__cuerpo .dcc-alert {
    align-self: stretch;
    text-align: left;
}

/* La pantalla de entrada va en oscuro.
 *
 * El logotipo del kit es blanco y macizo, y sobre el blanco del panel se perdía:
 * se leía apenas el contorno. Con el panel entero en el gris de la barra se lee
 * de una, y el botón pasa a la variante blanca, que es la que el kit trae
 * justamente para fondos oscuros.
 *
 * Todo esto va bajo --login: la pantalla de paso usa el mismo panel en claro y
 * no tiene por qué cambiar. */
.portal-panel--login {
    background: var(--dcc-grey-default);
    color: var(--dcc-white);
}

/* La franja deja de ser franja: el panel completo es del mismo color, así que
 * sólo queda separar el logotipo de lo que viene abajo. */
.portal-panel--login .portal-panel__cab {
    padding-bottom: 4px;
    background: none;
}

/* Las tipografías del kit traen su propio color oscuro, que acá no se vería. */
.portal-panel--login .portal-panel__titulo,
.portal-panel--login .portal-panel__bajada {
    color: var(--dcc-white);
}

/* La pantalla de paso ya tiene el encabezado del portal encima, así que su
 * panel no lleva franja ni tanto aire. */
.portal-panel--simple {
    margin: 32px auto;
}

/* Girador de espera. El kit no trae uno; son doce líneas y evita cargar un GIF
 * que no se adapta al color ni al tamaño. */
.portal-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--dcc-grey-ultralight);
    border-top-color: var(--dcc-grey-default);
    border-radius: 50%;
    animation: portal-girar .8s linear infinite;
}

@keyframes portal-girar {
    to { transform: rotate(360deg); }
}

/* Quien pide menos movimiento ve un disco quieto, no un giro más lento: la
 * página igual dice con palabras que está esperando. */
@media (prefers-reduced-motion: reduce) {
    .portal-spinner { animation: none; }
}

/* Enlaces que son componentes del kit: el rojo de Bootstrap no los toca.
 *
 * bootstrap.custom.min.css trae `a:hover { color: #b5091d }` para todos los
 * enlaces del portal. Contra un componente del kit eso gana, porque `a:hover`
 * pesa (0,1,1) y la clase del kit (0,1,0) —y no se arregla cambiando el orden
 * de las hojas, porque lo que manda es la especificidad.
 *
 * Se nota donde el kit cambia el fondo al pasar el mouse y da por hecho que el
 * color del texto de su clase sigue en pie: el botón principal quedaba con
 * texto rojo sobre fondo rojo, ilegible. Vale para <button>, no para <a>.
 *
 * Cada regla repone el color de reposo del propio componente, con el `a`
 * delante para pesar más. Los que el kit sí pinta al pasar por encima
 * —.dcc-link, .dcc-btn--secondary-*— se dejan en paz. */
a.dcc-btn--primary-grey:hover,
a.dcc-btn--primary-white:hover {
    color: var(--dcc-white);
}

a.dcc-list__item:hover {
    color: var(--dcc-grey-dark);
}

/* En un teléfono el login se queda con el logotipo y el botón: delante de la
 * única acción posible, el título y la bajada son ruido.
 *
 * Sólo alcanza al panel del login. La pantalla de paso usa .portal-panel--simple
 * y su título —"Abriendo tal aplicación"— es justamente lo que hay que leer.
 *
 * El h1 se esconde de la vista pero no del lector de pantalla: con display:none
 * la página se quedaría sin encabezado. */
@media (max-width: 560px) {
    .portal-panel--login .portal-panel__titulo {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .portal-panel--login .portal-panel__bajada {
        display: none;
    }

    .portal-panel--login .portal-panel__cuerpo {
        padding: 24px;
    }
}