/*
    Barra de navegacion inferior.

    Vive en su propio fichero para no mezclarse con la hoja principal: es una
    pieza cerrada y asi se puede leer y ajustar entera de un vistazo. Usa los
    mismos tokens de color que el resto del portal, de modo que el tema claro y
    el oscuro salen sin escribir un solo color suelto.
*/

.dock {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* La capa solo intercepta el raton donde hay algo que pulsar. */
    pointer-events: none;
}

/* ── Fondo que atenua la pantalla con el menu abierto ── */

.dock-scrim {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(3, 8, 20, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

html[data-portal-dock="open"] .dock-scrim {
    opacity: 1;
    pointer-events: auto;
}

.dock-shell {
    position: relative;
    width: min(100%, 34rem);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding:
        0
        calc(0.75rem + var(--safe-area-right))
        calc(0.75rem + var(--safe-area-bottom))
        calc(0.75rem + var(--safe-area-left));
    pointer-events: none;
}

/* ── Panel desplegable ── */

.dock-panel {
    pointer-events: auto;
    border-radius: 1.5rem;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
        0 24px 60px rgba(3, 8, 20, 0.42),
        0 2px 0 rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
    transform: translateY(14px) scale(0.98);
    opacity: 0;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.dock-panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.dock-panel-inner {
    max-height: min(62vh, 30rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1rem 1.1rem;
}

.dock-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.25rem 0.85rem;
}

.dock-panel-head strong {
    display: block;
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--text);
}

.dock-panel-head small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dock-panel-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.dock-panel-close:hover {
    color: var(--text);
    border-color: var(--accent);
    transform: rotate(90deg);
}

.dock-panel-close svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.dock-section-title {
    margin: 0.85rem 0.35rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.dock-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dock-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid transparent;
    color: var(--text);
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.dock-link-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.dock-link-text span {
    font-weight: 600;
    font-size: 0.94rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-link-text small {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-link-chevron {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.35;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.dock-link:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    transform: translateX(2px);
}

.dock-link:hover .dock-link-chevron {
    opacity: 0.9;
    transform: translateX(2px);
}

.dock-link.is-current {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.dock-link.is-current .dock-link-text span {
    color: var(--accent);
}

.dock-empty,
.dock-signature {
    margin: 0.6rem 0.35rem 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dock-signature a {
    color: var(--accent-soft);
}

/* ── Bloque de cuenta ── */

.dock-account {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.dock-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid var(--panel-border);
}

.dock-account-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted);
}

/*
    El tamano elegido se aplica a todo el portal, no solo a la aplicacion
    instalada: la escala ya existia, pero solo tenia efecto ahi y desde el
    navegador el control no cambiaba nada.

    Se escala la medida base de la que cuelga todo el diseno, en lugar de aplicar
    zoom al documento. El zoom obliga al navegador a rehacer las capas de las
    zonas con desenfoque, y en un telefono eso tumbaba la pestana.
*/
:root {
    font-size: calc(16px * var(--pwa-zoom, 1));
}

/* Ya lo aplica la medida base; dejarlo aqui lo escalaria dos veces. */
html.is-pwa-standalone body {
    zoom: 1;
}

/* ── Tamaño de la interfaz ── */

.dock-zoom-buttons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dock-zoom-buttons button {
    display: grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    border-radius: 0.65rem;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text);
    font-family: var(--body);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.dock-zoom-buttons button:hover:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.dock-zoom-buttons button:disabled {
    opacity: 0.35;
    cursor: default;
}

.dock-zoom-value {
    min-width: 3.6rem !important;
    font-size: 0.82rem !important;
}

.dock-zoom-value strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dock-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.72rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

.dock-signout:hover {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    transform: translateY(-1px);
}

.dock-signout svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Barra fija ── */

.dock-bar {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.4rem;
    border-radius: 1.35rem;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
        0 18px 44px rgba(3, 8, 20, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Marca que se desliza hasta la pestana abierta. */
.dock-indicator {
    position: absolute;
    top: 0.28rem;
    left: 0;
    height: 2px;
    width: var(--dock-indicator-w, 26px);
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    transform: translateX(calc(var(--dock-indicator-x, 50%) - (var(--dock-indicator-w, 26px) / 2)));
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s ease;
}

.dock-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.6rem 0.2rem 0.5rem;
    border: 0;
    border-radius: 1rem;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--body);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.dock-tab-icon {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
}

.dock-tab-icon svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.dock-tab-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-tab:hover {
    color: var(--text);
}

.dock-tab:hover .dock-tab-icon svg {
    transform: translateY(-2px);
}

.dock-tab.is-active {
    color: var(--accent);
}

.dock-tab.is-open {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.dock-tab.is-open .dock-tab-icon svg {
    transform: translateY(-2px) scale(1.06);
}

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

/* ── Hueco para que la barra no tape el final del contenido ── */

.app-shell.has-dock .main-content {
    padding-bottom: calc(6.5rem + var(--safe-area-bottom));
}

/* El boton de actualizar flotaba justo donde ahora esta la barra. */
.app-shell.has-dock .portal-refresh-button {
    bottom: calc(6.1rem + var(--safe-area-bottom));
}

html[data-portal-dock="open"] .portal-refresh-button {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

@media (max-width: 640px) {
    .dock-shell {
        width: 100%;
        padding-left: calc(0.5rem + var(--safe-area-left));
        padding-right: calc(0.5rem + var(--safe-area-right));
        padding-bottom: calc(0.5rem + var(--safe-area-bottom));
    }

    .dock-bar {
        border-radius: 1.25rem;
    }

    .dock-tab {
        padding: 0.55rem 0.15rem 0.45rem;
    }

    .dock-tab-label {
        font-size: 0.64rem;
    }

    .dock-panel-inner {
        max-height: min(68vh, 26rem);
    }
}

/* En pantallas anchas la barra flota separada del borde. */
@media (min-width: 1024px) {
    .dock-shell {
        padding-bottom: 1.35rem;
    }

    .dock-tab-label {
        font-size: 0.72rem;
    }

    .app-shell.has-dock .main-content {
        padding-bottom: 7.5rem;
    }
}

/*
    Con la aplicacion instalada seguia habiendo un boton flotante arriba para
    volver. Antes compartia sitio con el del menu, que ya no existe: se mueve al
    borde y el contenido vuelve a reservar el hueco que ocupa.
*/
@media (max-width: 800px) {
    html.is-pwa-standalone .app-shell.has-dock .main-content {
        padding-top: calc(4.5rem + var(--safe-area-top));
    }

    html.is-pwa-standalone .pwa-back-button {
        left: calc(0.85rem + var(--safe-area-left));
    }
}

@media (prefers-reduced-motion: reduce) {
    .dock-panel,
    .dock-indicator,
    .dock-tab,
    .dock-tab-icon svg,
    .dock-link,
    .dock-scrim {
        transition-duration: 0.01ms;
    }
}