/* Shell de la aplicación (menú lateral, barra superior, pie, login y overlays).
   Tomado de Alpha.PostMaria.Reingenieria y recoloreado en verde. */
:root {
    --app-sidebar-width: 250px;
    --app-verde: #1d5a3a;
    --app-verde-oscuro: #133f28;
    --app-accent: #1f9d55;
    --app-bg: #f4f6f9;
    --app-border: #e2e6ee;
}

/* Base font size drives every rem-based size in the app; bumped 5% for readability. */
html {
    font-size: 14.7px;
}

@media (min-width: 768px) {
    html {
        font-size: 15.75px;
    }
}

body {
    margin: 0;
    background: var(--app-bg);
    color: #24303f;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(31, 157, 85, 0.25);
}

/* ============================ App shell ============================ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* Menú lateral con la estética de "Pro Sidebar" (codepen azouaoui-med/wpBadb): verde muy
   oscuro, texto gris azulado que se aclara al pasar el mouse, títulos de sección espaciados y
   tenues, e íconos dentro de cuadraditos más oscuros que se balancean al pasar el mouse. Cada
   herramienta conserva su color, pero sólo en el ícono activo o al pasar el mouse: en reposo el
   menú es monocromo, como en el original. */
.app-sidebar {
    --sb-bg: #0b2a1b;
    --sb-bg-dark: #08221a;
    --sb-bg-box: #14402a;
    /* Más claro que el #7dab8f del original: sobre este fondo aquel no se llegaba a leer. */
    --sb-text: #c6e3d1;
    --sb-text-hi: #ffffff;
    width: var(--app-sidebar-width);
    background: var(--sb-bg);
    color: var(--sb-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .03), 4px 0 18px rgba(11, 42, 27, .18);
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 76px;
    padding: 0 1.25rem;
}

/* As a link (to Oficializaciones) it keeps the brand's look. */
.app-sidebar__brand--link,
.app-sidebar__brand--link:hover,
.app-sidebar__brand--link:focus {
    color: inherit;
    text-decoration: none;
}

.app-sidebar__brand--link:hover .app-sidebar__title {
    opacity: .85;
}

.app-sidebar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 37px;
    height: 37px;
    border-radius: 8px;
    /* The isologo is red on an opaque white background, so it needs a white
       plate to sit on — red straight onto the verde sidebar barely reads. */
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

    .app-sidebar__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.app-sidebar__title {
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--sb-text-hi);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El menú es lo único que se estira, así que es lo único que scrollea: la marca de arriba
   queda siempre fija. min-height:0 es lo que deja encoger al hijo flex — sin eso crece hasta
   pasarse del alto de la barra y las últimas secciones quedan cortadas contra el borde. */
.app-sidebar__nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: .4rem 0 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Que la rueda no siga arrastrando la página cuando el menú llegó al final. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.app-sidebar__nav:hover { scrollbar-color: #1a5c38 transparent; }

/* Como en el original: barra finita que sólo aparece al pasar el mouse por el menú. */
.app-sidebar__nav::-webkit-scrollbar { width: 6px; }
.app-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar__nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.app-sidebar__nav:hover::-webkit-scrollbar-thumb { background: #1a5c38; }

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 46px;
    padding: .3rem 1.1rem;
    color: var(--sb-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .3s ease, background-color .3s ease;
}

.app-nav-link:hover {
    color: var(--sb-text-hi);
}

/* La opción en la que está el usuario va en gris: fondo gris y el ícono sin su color. Es la
   inversa del resto del menú, donde cada ícono lleva su color, y por eso se distingue. */
.app-nav-link.active {
    color: #fff;
    font-weight: 600;
    background: rgba(198, 227, 209, .16);
    box-shadow: inset 3px 0 0 #c6e3d1;
}

/* El ícono va en un cuadradito más oscuro que el fondo, como en el original, con el color
   propio de cada herramienta siempre visible. Sólo el de la opción activa queda en gris. */
.app-nav-link__icon {
    --ico: var(--sb-text-hi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    background: var(--sb-bg-dark);
    color: var(--ico);
    transition: color .3s ease, background-color .3s ease;
}

.app-nav-link__icon svg { width: 18px; height: 18px; }

.app-nav-link:hover .app-nav-link__icon svg { animation: app-nav-swing .5s ease-in-out 1; }

.app-nav-link.active .app-nav-link__icon {
    color: #c6e3d1;
    background: rgba(255, 255, 255, .1);
}

@keyframes app-nav-swing {
    0%, 30%, 50%, 70%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-nav-link:hover .app-nav-link__icon svg { animation: none; }
}

.app-nav-link__icon--inicio { --ico: #7cc4ff; }
.app-nav-link__icon--oficializaciones { --ico: #ffd166; }
.app-nav-link__icon--generador { --ico: #7ee0c9; }
.app-nav-link__icon--visualizador { --ico: #c4a7f5; }
.app-nav-link__icon--cotizaciones { --ico: #7bd88f; }
.app-nav-link__icon--herramientas { --ico: #ffa373; }
.app-nav-link__icon--psad { --ico: #6fd3e8; }
.app-nav-link__icon--enviosmail { --ico: #f5c76f; }
.app-nav-link__icon--endo { --ico: #f0a6c8; }
.app-nav-link__icon--legajos { --ico: #ffb454; }
.app-nav-link__icon--estadisticas { --ico: #9fe0b8; }
.app-nav-link__icon--kitmaria { --ico: #b6b8ff; }
.app-nav-link__icon--configurar { --ico: #9fe0c0; }
.app-nav-link__icon--estadoservicio { --ico: #7fe3a0; }

.app-nav-link--disabled {
    opacity: .55;
    cursor: not-allowed;
}
.app-nav-link--disabled:hover { color: var(--sb-text); }
.app-nav-link--disabled:hover .app-nav-link__icon { color: var(--ico); }
.app-nav-link--disabled:hover .app-nav-link__icon svg { animation: none; }

/* El grupo de los dos "reportes" es como un submenú del original: fondo más oscuro y sangría. */
.app-nav-group {
    margin: .15rem 0;
    padding: .2rem 0 .2rem .6rem;
    background: var(--sb-bg-dark);
}

.app-nav-group .app-nav-link__icon { background: var(--sb-bg); }

.app-nav-section + .app-nav-section { margin-top: .6rem; }

.app-nav-section__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.55rem .35rem;
    color: var(--sb-text);
    opacity: .85;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Marks the section a Bank user can see but not open. */
.app-nav-section__badge {
    padding: .15rem .4rem;
    border-radius: .25rem;
    background: #6c757d;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: none;
}

.app-sidebar__backdrop {
    display: none;
}

/* Main column */
.app-main {
    flex: 1;
    margin-left: var(--app-sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 60px;
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-topbar__spacer {
    flex: 1;
}

.app-topbar__user {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.app-topbar__username {
    font-weight: 600;
    color: var(--app-verde);
}

.app-topbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 36px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.app-topbar__toggle span {
    display: block;
    height: 2px;
    width: 20px;
    margin: 0 auto;
    background: var(--app-verde);
}

.app-content {
    padding: 1.5rem;
    flex: 1;
}

/* ============================ Cards / panels ============================ */
.panel {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.panel__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
    color: var(--app-verde);
}

.panel__body {
    padding: 1.25rem;
}

/* #7 Username copy (top bar) */
/* The username is a pill button: avatar + name + chevron, so it reads as "opens something". */
.app-topbar__username {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 360px;
    padding: .25rem .7rem .25rem .25rem;
    font-size: .88rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    background: #f3f7ff;
    border: 1.5px solid #c4ecd4;
    border-radius: 999px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.app-topbar__username:hover {
    background: #e7f0ff;
    border-color: var(--app-accent);
    box-shadow: 0 2px 8px rgba(31, 157, 85, .18);
}

.app-topbar__username:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 157, 85, .35);
}

.app-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--app-accent), #178a48);
    border-radius: 50%;
}

.app-user__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user__chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--app-accent);
    transition: transform .15s ease;
}

.app-topbar__username:hover .app-user__chevron {
    transform: translateY(2px);
}

/* Narrow screens: just the avatar and the chevron. */
@media (max-width: 520px) {
    .app-user__nombre {
        display: none;
    }

    .app-topbar__username {
        padding-right: .45rem;
    }
}

.app-topbar__username.is-copied::after {
    content: "¡Copiado!";
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #1b7f4b;
    color: #fff;
    padding: .2rem .5rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1050;
}

/* Logout ("Cerrar sesión") button in the top bar */
.app-logout {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    /* Bordó suave desde el reposo, el mismo de Limpiar / Restablecer filtros. */
    color: #7a1f33;
    background: #fbf0f2;
    border: 1.5px solid #dfb0ba;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.app-logout__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.app-logout:hover {
    color: #fff;
    background: #8b2439;
    border-color: #8b2439;
    box-shadow: 0 4px 12px rgba(139, 36, 57, .3);
}

.app-logout:active {
    transform: translateY(1px);
}

.app-logout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 36, 57, .35);
}

/* On narrow screens the label collapses, leaving just the icon. */
@media (max-width: 520px) {
    .app-logout__label {
        display: none;
    }

    .app-logout {
        padding: .4rem;
    }
}

/* #5 Scroll-to-top button */
.scroll-top {
    position: fixed;
    right: 1.5rem;
    /* Stacked above the WhatsApp button, which owns the bottom-right corner. Clears
       both the 60px button and the 16px translateY of this button's hidden state. */
    bottom: 7.5rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
    box-shadow: 0 10px 26px -6px rgba(16, 24, 40, .45);
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background .15s ease;
}

.scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top:hover {
    background: #178a48;
}

.scroll-top__icon {
    width: 22px;
    height: 22px;
}

/* Hover hint (slides in to the left of the button) */
.scroll-top__label {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: var(--app-verde);
    color: #fff;
    padding: .3rem .6rem;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.scroll-top:hover .scroll-top__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ============================ Loading overlay ============================ */
/* Sits above every modal that can start a request behind it — .digi-modal (2050)
   included — otherwise the spinner and its Cancelar button hide behind the open
   modal and the page looks frozen. Only .app-confirm (2100) outranks it. */
.app-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(19, 63, 40, .55);
    backdrop-filter: blur(2px);
    z-index: 2060;
    align-items: center;
    justify-content: center;
}

.app-loading.is-visible {
    display: flex;
}

.app-loading__card {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 2.25rem;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.app-loading__spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto .9rem;
    border: 4px solid #d6eadd;
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: app-spin .8s linear infinite;
}

@keyframes app-spin {
    to { transform: rotate(360deg); }
}

.app-loading__text {
    font-weight: 600;
    color: var(--app-verde);
}

.app-loading__timer {
    font-size: .85rem;
    color: #6b7891;
    margin-top: .35rem;
}

/* Revealed when a request outlives apiFetch's slowNoticeMs; the request is still
   running, so this informs without interrupting. */
.app-loading__notice {
    max-width: 380px;
    margin: .75rem auto 0;
    padding: .6rem .75rem;
    background: #fff8e6;
    border: 1px solid #f0d79a;
    border-radius: 8px;
    color: #6b5312;
    font-size: .82rem;
    line-height: 1.45;
    text-align: left;
}

.app-loading__notice a { color: #1f6f3f; font-weight: 700; }

/* ============================ Confirm dialog (styled window.confirm) ============================ */
.app-confirm {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2100;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(19, 63, 40, .55);
    backdrop-filter: blur(2px);
}

.app-confirm.is-visible {
    display: flex;
}

.app-confirm__card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 20px 55px rgba(16, 24, 40, .35);
    animation: app-confirm-in .18s ease-out;
}

@keyframes app-confirm-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.app-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: #fff5e6;
    color: #ef6c00;
}

.app-confirm__icon svg {
    width: 28px;
    height: 28px;
}

.app-confirm__title {
    margin: 0 0 .5rem;
    font-weight: 700;
    color: var(--app-verde);
}

.app-confirm__message {
    margin: 0 0 1rem;
    color: #4a5769;
    font-size: .95rem;
}

.app-confirm__detail {
    margin: 0 auto 1.25rem;
    padding: .6rem .9rem;
    background: #eef4ff;
    border: 1px solid #c4ecd4;
    border-radius: 10px;
    max-width: 100%;
}

.app-confirm__detail-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7891;
    margin-bottom: .15rem;
}

.app-confirm__detail-value {
    display: block;
    font-weight: 700;
    color: var(--app-verde);
    word-break: break-word;
}

.app-confirm__actions {
    display: flex;
    justify-content: center;
    gap: .6rem;
}

.app-confirm__actions .btn {
    min-width: 130px;
    font-weight: 600;
}

/* ============================ WhatsApp chatbot (FAB) ============================
   Mirrors the floating button on alpha2000.com.ar: WhatsApp green, pulsing ring and a
   "¡Escribinos!" tooltip on hover. `animate-ping` there is Tailwind's keyframe, so it
   is reproduced here rather than pulled in. */
.wa-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 30px -6px rgba(0, 0, 0, .45);
    transition: transform .3s ease, box-shadow .3s ease;
}

.wa-fab:hover {
    transform: scale(1.1);
    color: #fff;
    box-shadow: 0 14px 34px -4px rgba(37, 211, 102, .5);
}

/* The glyph sets its own colour rather than inheriting from the anchor. The default
   template leftover Views/Shared/_Layout.cshtml.css carries `a[b-<scope>]
   { color: #1a7f45 }`, which outranks `.wa-fab` (attribute+type beats one class) but
   not `.wa-fab:hover` — so the logo came out blue and only turned white under the
   mouse. The svg is not an <a>, so that rule can't reach it here. */
.wa-fab__icon {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1;
    color: #fff;
}

/* The expanding ring — Tailwind's `animate-ping`. */
.wa-fab__ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    opacity: .4;
    animation: wa-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes wa-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* Tooltip to the left of the button, revealed on hover/focus. */
.wa-fab__tip {
    position: absolute;
    right: 100%;
    margin-right: 1rem;
    padding: .35rem .75rem;
    border-radius: 8px;
    background: var(--app-verde);
    color: #fff;
    font-size: .8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .3);
}

.wa-fab:hover .wa-fab__tip,
.wa-fab:focus-visible .wa-fab__tip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .wa-fab__ping { animation: none; }
    .wa-fab:hover { transform: none; }
}

/* ============================ Footer ============================
   Mirrors the alpha2000.com.ar footer (same blocks, same links) but recoloured to
   this app: the sidebar's verde instead of slate-950, and the accent blue instead of
   the site's brand red on hover. */
.app-footer {
    margin-top: auto;
    background: linear-gradient(180deg, var(--app-verde) 0%, var(--app-verde-oscuro) 100%);
    border-top: 1px solid #2c7249;
    padding: 2rem 1.5rem;
}

.app-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
}

@media (min-width: 992px) {
    .app-footer__inner { flex-direction: row; align-items: center; }
}

/* ---- Brand / social ---- */
.app-footer__brand { flex: 0 0 auto; }
.app-footer__logo { height: 38px; width: auto; object-fit: contain; }

.app-footer__copy {
    margin: .5rem 0 0;
    color: #8fc0a3;
    font-size: .8rem;
    line-height: 1.5;
}

.app-footer__social { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }

/* The `.app-footer` prefix is load-bearing: Views/Shared/_Layout.cshtml.css (default
   template leftover) carries `a[b-<scope>] { color: #1a7f45 }`, which has the same
   specificity as `.app-footer__col a` and is served after this file — so the plain
   class selectors lose and the links render an unreadable blue on the verde. */
.app-footer .app-footer__social a {
    display: inline-flex;
    color: #8fc0a3;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

.app-footer .app-footer__social a:hover { color: var(--app-accent); transform: translateY(-2px); }
.app-footer__social svg { width: 20px; height: 20px; }

/* ---- Legal links + badges ---- */
.app-footer__right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    width: 100%;
}

@media (min-width: 992px) {
    .app-footer__right { flex-direction: row; align-items: center; gap: 2rem; width: auto; }
}

.app-footer__links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 3rem;
}

@media (min-width: 768px) {
    .app-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.app-footer__col { display: flex; flex-direction: column; gap: .85rem; }

.app-footer .app-footer__col a {
    color: #a9d4b9;
    font-size: .8rem;
    text-decoration: none;
    max-width: 320px;
    transition: color .15s ease;
}

.app-footer .app-footer__col a:hover { color: #fff; text-decoration: underline; }

.app-footer__badges { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.app-footer .app-footer__badges a { display: block; height: 86px; transition: opacity .15s ease; }
.app-footer .app-footer__badges a:hover { opacity: .8; }
.app-footer__badges img { height: 100%; width: auto; object-fit: contain; }

/* ============================ Auth (login / recover) ============================ */
/* Altura fija y sin desborde: la pantalla de login entra entera en la ventana y no scrollea.
   Lo que puede crecer —la lista de novedades— scrollea adentro de su propio panel. */
.auth {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--app-bg);
}

/* ---- Brand panel ---- */
/* The container-ship photo sits behind the brand copy. A verde scrim on top keeps the
   panel on-palette and stops the busy parts of the photo from fighting the text. */
.auth__brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3.5rem;
    color: #fff;
    background-color: var(--app-verde-oscuro);
    background-image:
        linear-gradient(120deg, rgba(12, 44, 28, .82) 0%, rgba(19, 63, 40, .62) 55%, rgba(29, 90, 58, .45) 100%),
        url("../img/login-ship.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
    isolation: isolate;
}

/* A solid white card over the ship photo. Opaque by design: this is what guarantees the
   copy is readable regardless of what part of the photo falls behind it (the sky and
   water are bright enough that a translucent panel left the bullets under 4.5:1). */
/* 30% larger than the 460px/2.25rem it was, so the panel carries the extra copy. */
.auth__brand-content {
    position: relative;
    z-index: 1;
    max-width: 598px;
    padding: 2.9rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
    /* The panel is white, so the copy has to invert with it — .auth__brand sets
       color:#fff for the panel-on-verde design this replaces. */
    color: #24303f;
    animation: auth-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.auth__brand-title {
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 1.25rem 0 .5rem;
    line-height: 1.15;
    color: var(--app-verde);
}

/* Slightly darker than the usual #6b7891 muted grey, which lands at 4.45:1 on white —
   just under the bar for text this size. */
.auth__brand-tagline {
    color: #5f6c85;
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 2rem;
}

.auth__brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .85rem;
}

.auth__brand-features li {
    position: relative;
    padding-left: 2rem;
    color: #3a4a63;
    line-height: 1.4;
}

.auth__brand-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: .8rem;
    color: var(--app-accent);
    background: rgba(31, 157, 85, .12);
    border: 1px solid rgba(31, 157, 85, .35);
    border-radius: 50%;
    font-weight: 700;
}

/* ---- Form panel ---- */
/* The blue the brand panel used to carry now lives here, so the login card reads as a
   white sheet on verde. Same family as the sidebar/footer rather than the old
   translucent value, which only made sense composited over the photo. */
.auth__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    /* min-height: 0 deja que el contenido se encoja dentro del alto fijo en vez de
       empujar hacia afuera; overflow auto es la red para ventanas muy bajas, donde es
       preferible scrollear este panel antes que cortar el formulario. */
    min-height: 0;
    overflow: auto;
    background:
        radial-gradient(1000px 500px at 100% 0%, rgba(31, 157, 85, .28), transparent 65%),
        linear-gradient(160deg, #247a4a 0%, var(--app-verde) 45%, var(--app-verde-oscuro) 100%);
}

.auth__form-inner {
    width: 100%;
    max-width: 410px;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: 2.75rem;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 24px 60px -20px rgba(16, 24, 40, .18);
    animation: auth-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

/* The Alpha 2000 wordmark: a wide (~3.6:1) image, not the square badge it replaced. */
.auth__logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Único logo de marca, centrado en el panel (antes iba junto al de BANK, con divisor). */
.auth__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}


.auth__logo--mobile {
    display: none;
    height: 38px;
    margin: 0 auto 1.25rem;
}

.auth__heading {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--app-verde);
    margin-bottom: .35rem;
}

.auth__subheading {
    color: #6b7891;
    margin-bottom: 1.75rem;
}

/* Refined form controls within the auth card */
.auth__form-inner .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: #3a4a63;
    margin-bottom: .4rem;
}

.auth__form-inner .form-control,
.auth__form-inner .input-group {
    border-radius: 12px;
}

.auth__form-inner .form-control {
    border-color: #dce1ec;
    padding-top: .7rem;
    padding-bottom: .7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth__form-inner .form-control:hover {
    border-color: #c2cbdb;
}

.auth__form-inner .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth__form-inner .input-group:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(31, 157, 85, .18);
    border-radius: 12px;
}

.auth__form-inner .input-group:focus-within .form-control,
.auth__form-inner .input-group:focus-within .auth__toggle {
    border-color: var(--app-accent);
    box-shadow: none;
}

.auth__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7891;
    background: #fff;
    border-color: #dce1ec;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: color .15s ease, background .15s ease;
}

.auth__toggle:hover {
    color: var(--app-accent);
    background: #f2faf5;
    border-color: #dce1ec;
}

.auth__form-inner .form-check-input {
    border-color: #c2cbdb;
    cursor: pointer;
}

.auth__form-inner .form-check-label {
    color: #4a5772;
    cursor: pointer;
    user-select: none;
}

.auth__link {
    color: var(--app-accent);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: color .15s ease;
}

.auth__link:hover {
    color: #178a48;
    text-decoration: underline;
}

/* Primary submit button */
.auth__form-inner .btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    background: linear-gradient(135deg, var(--app-accent) 0%, #178a48 100%);
    border: none;
    border-radius: 12px;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 8px 20px -6px rgba(31, 157, 85, .55);
    transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}

.auth__form-inner .btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(31, 157, 85, .6);
}

.auth__form-inner .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px -6px rgba(31, 157, 85, .5);
}

.auth__form-inner .alert-danger {
    border-radius: 12px;
    border-color: #f3c6c6;
    background: #fdecec;
    color: #9b2c2c;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes auth-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, 30px) scale(1.08); }
}

/* Stack to a single column on tablets/phones; hide the brand panel. */
@media (max-width: 767.98px) {
    .auth {
        grid-template-columns: 1fr;
    }

    .auth__brand {
        display: none;
    }

    .auth__logo--mobile {
        display: block;
    }

    .auth__form-inner {
        padding: 2.25rem 1.75rem;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth__brand-content,
    .auth__form-inner {
        animation: none;
    }
}

/* ============================ Responsive ============================ */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .app-sidebar.is-open {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }

    .app-topbar__toggle {
        display: flex;
    }

    .app-sidebar__backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1025;
    }
}

/* ===== Novedades de la plataforma (pantalla de login) =====

   El panel va debajo de la tarjeta de login, bajito, y al pasar el mouse se estira
   hacia arriba hasta cubrirla por completo para poder leer cómodo. Va posicionado en
   absoluto sobre la tarjeta y no como un bloque más del flujo: animar el alto de un
   bloque en flujo empuja todo lo que tiene alrededor en cada cuadro, y acá lo único
   que tiene que moverse es el panel.

   El padding-bottom del stack es lo que le reserva el lugar: como el panel está fuera
   del flujo, sin eso se superpondría a la tarjeta en vez de quedar abajo. */

/* Mismo ancho que la tarjeta (.auth__form-inner tiene max-width: 410px) para que el panel
   quede alineado con ella y no sobresalga por los costados. */
.auth__stack {
    position: relative;
    width: 100%;
    max-width: 410px;
    padding-bottom: 11.5rem;
    max-height: 100%;
}

.auth__novedades {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Colapsado ocupa la franja de abajo; expandido arranca en el borde superior del
       stack, o sea encima de toda la tarjeta de login. */
    top: calc(100% - 10.5rem);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 24px 60px -20px rgba(16, 24, 40, .18);
    cursor: pointer;
    overflow: hidden;
    transition: top .28s ease, box-shadow .28s ease;
}

.auth__novedades:hover,
.auth__novedades:focus-within,
.auth__novedades.is-open {
    top: 0;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 30px 70px -20px rgba(16, 24, 40, .32);
}

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

.auth__novedades-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.auth__novedades-head svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--app-accent);
}

.auth__novedades-titulo {
    font-weight: 700;
    color: var(--app-verde);
    white-space: nowrap;
}

.auth__novedades-badge {
    min-width: 1.4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

.auth__novedades-ayuda {
    flex: 0 0 auto;
    margin: .15rem 0 .6rem;
    font-size: .75rem;
    color: #8b98a6;
}

/* Una vez expandido el cartel de "pasá el mouse" ya cumplió su función. */
.auth__novedades:hover .auth__novedades-ayuda,
.auth__novedades:focus-within .auth__novedades-ayuda,
.auth__novedades.is-open .auth__novedades-ayuda {
    visibility: hidden;
}

.novedades {
    list-style: none;
    margin: 0;
    padding: 0 .35rem 0 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.novedad {
    padding: .8rem 0;
    border-top: 1px solid var(--app-border);
}

.novedad:first-child {
    border-top: 0;
    padding-top: 0;
}

.novedad__cabecera {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
}

.novedad__titulo {
    font-weight: 700;
    color: var(--app-verde);
}

.novedad__fecha {
    margin-left: auto;
    font-size: .78rem;
    color: #8b98a6;
    white-space: nowrap;
}

.novedad__tag {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #e9edf3;
    color: #52606d;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.novedad__tag.es-nuevo {
    background: #e3f5ec;
    color: #17794f;
}

.novedad__tag.es-mejora {
    background: #e4f5ea;
    color: #1f8a4c;
}

.novedad__tag.es-correccion {
    background: #fdeceb;
    color: #a8322c;
}

/* white-space: la descripción se inserta como texto plano, así que los saltos de línea
   que escribió quien la cargó se respetan desde el CSS y no armando HTML. */
.novedad__texto {
    margin: .3rem 0 0;
    color: #3f4b59;
    font-size: .88rem;
    white-space: pre-line;
}

/* Colapsado el texto largo sólo estorba: se muestran las primeras líneas y el resto
   aparece cuando el panel se abre. */
.auth__novedades .novedad__texto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.auth__novedades:hover .novedad__texto,
.auth__novedades:focus-within .novedad__texto,
.auth__novedades.is-open .novedad__texto {
    display: block;
    overflow: visible;
}

/* En táctil no hay hover, así que nada puede depender de él: el panel queda en el flujo,
   siempre desplegado, y la pantalla vuelve a poder scrollear — forzar el alto fijo en un
   teléfono cortaría el formulario, que es lo único que no puede fallar acá. */
@media (max-width: 991.98px) {
    .auth {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .auth__form {
        overflow: visible;
    }

    .auth__stack {
        padding-bottom: 0;
        max-height: none;
    }

    .auth__novedades {
        position: static;
        top: auto;
        margin-top: 1rem;
        max-height: 300px;
        cursor: default;
    }

    .auth__novedades-ayuda {
        display: none;
    }

    .auth__novedades .novedad__texto {
        display: block;
        overflow: visible;
    }
}

/* Ventanas bajas (los portátiles de 768px de alto son mayoría): el panel colapsado se
   achica para que tarjeta + panel sigan entrando sin scroll. Expandido ocupa lo mismo
   de siempre, así que no se pierde nada al leer. */
@media (min-width: 992px) and (max-height: 820px) {
    .auth__stack {
        padding-bottom: 8.5rem;
    }

    .auth__novedades {
        top: calc(100% - 7.5rem);
    }
}

@media (min-width: 992px) and (max-height: 700px) {
    .auth__stack {
        padding-bottom: 5.75rem;
    }

    .auth__novedades {
        top: calc(100% - 4.75rem);
    }

    .auth__novedades-ayuda {
        display: none;
    }
}

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

/* ============================================================
   Achicar / expandir el menú lateral
   ============================================================ */

/* Al pie, en un recuadro como el del original: un poco más claro que el fondo y con el
   ícono en un círculo turquesa. */
.app-sidebar__colapsar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    width: calc(100% - 1.5rem);
    margin: .5rem .75rem .9rem;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 8px;
    background: #14402a;
    color: #c6e3d1;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease;
}

.app-sidebar__colapsar:hover,
.app-sidebar__colapsar:focus-visible {
    background: #1a583a;
    color: #dee2ec;
    outline: none;
}

.app-sidebar__colapsar-icono {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 4px;
    border-radius: 50%;
    background: #00829f;
    color: #fff;
    box-shadow: 1px 1px 4px #0b2a1b;
    transition: transform .2s ease;
}

/* Sólo en escritorio: en pantallas chicas la barra ya se abre y se cierra entera con el botón
   de la barra superior, y una tercera forma de esconderla no ayudaría a nadie. */
@media (min-width: 992px) {
    /* Ancho, márgenes y transición salen todos de la variable: al pisarla acá, la columna
       principal se corre sola sin una sola regla más. */
    body.sidebar-colapsado {
        --app-sidebar-width: 68px;
    }

    .app-sidebar,
    .app-main {
        transition: width .18s ease, margin-left .18s ease;
    }

    /* El botón invierte las flechas cuando está achicado: apuntan hacia afuera, que es lo que
       va a pasar si se lo vuelve a apretar. */
    body.sidebar-colapsado .app-sidebar__colapsar-icono {
        transform: rotate(180deg);
    }

    body.sidebar-colapsado .app-sidebar__title,
    body.sidebar-colapsado .app-nav-section__title,
    body.sidebar-colapsado .app-sidebar__colapsar-texto {
        display: none;
    }

    body.sidebar-colapsado .app-sidebar__brand,
    body.sidebar-colapsado .app-sidebar__colapsar {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* El texto de cada opción es un nodo suelto dentro del <a>, sin span propio, así que no hay
       nada que ocultar con display:none. font-size:0 lo colapsa, y el ícono recupera el suyo. */
    body.sidebar-colapsado .app-nav-link {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        font-size: 0;
    }

    body.sidebar-colapsado .app-nav-link__icon {
        font-size: 1rem;
    }

    body.sidebar-colapsado .app-nav-group {
        padding: .2rem .1rem;
    }

    body.sidebar-colapsado .app-nav-section + .app-nav-section {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
}

/* Aviso de fecha inválida (app.js): flota debajo del campo que se restauró. */
.fecha-aviso {
    position: absolute;
    z-index: 2000;
    max-width: 290px;
    padding: .4rem .6rem;
    font-size: .8rem;
    color: #fff;
    background: #b3261e;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}