/* Shared interface foundation. Page-specific CSS can extend these tokens without
   reintroducing different palettes, controls or focus treatment. */
:root {
    --ui-navy: #052f50;
    --ui-navy-deep: #031f35;
    --ui-blue: #0a4e80;
    --ui-red: #d90715;
    --ui-red-dark: #b70612;
    --ui-ink: #102b3e;
    --ui-muted: #536b7c;
    --ui-line: #d7e1e7;
    --ui-soft: #f4f7f9;
    --ui-radius-sm: 6px;
    --ui-radius: 10px;
    --ui-focus: 0 0 0 3px rgba(217, 7, 21, .22);
    --ui-tap-size: 44px;
}

html { color-scheme: light; }
body { color: var(--ui-ink); }
::selection { color: #fff; background: var(--ui-red); }

:where(a, button, input, select, textarea, summary, iframe):focus-visible {
    outline: 3px solid var(--ui-red);
    outline-offset: 3px;
}

:where(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: rgba(217, 7, 21, .14); }
:where(button, [role="button"], .btn) { min-height: var(--ui-tap-size); }

.btn {
    min-height: 46px;
    border-radius: var(--ui-radius-sm);
    font-weight: 800;
    letter-spacing: .005em;
}

.btn-primary { background: var(--ui-red); }
.btn-primary:hover { background: var(--ui-red-dark); }
.btn-outline { border-color: var(--ui-red); color: var(--ui-red); }

/* One compact utility bar for every public page. */
.top-utility {
    height: 30px;
    color: #d9e7f2;
    background: #062e51;
    font-size: .68rem;
}

.top-utility .container,
.top-utility .container > div {
    display: flex;
    align-items: center;
    height: 100%;
}

.top-utility .container { justify-content: space-between; gap: 25px; }
.top-utility .container > div { gap: 22px; min-width: 0; }
.top-utility a:hover { color: #fff; }
.top-utility .icon { margin-right: 3px; color: #ff5660; }

/* Home call-to-action and footer: keep the brand and message balanced at every width. */
.cta-strip {
    padding: 28px 0;
    background: #e30613;
}

.cta-strip .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.cta-strip .container > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-width: 0;
}

.cta-strip .container > div > div { min-width: 0; }
.cta-strip .cta-icon { flex: 0 0 52px; }
.cta-strip b { display: block; line-height: 1.2; }
.cta-strip .btn { min-width: 190px; }

.site-footer .footer-company > .brand {
    display: grid;
    grid-template-columns: auto 28px auto;
    align-items: center;
    gap: 2px;
    width: max-content;
    font-size: 1.55rem;
    line-height: 1;
}

.site-footer .footer-company > .brand i {
    width: 27px;
    height: 27px;
}

.site-footer .footer-company > .brand small {
    width: 100%;
    font-size: .49rem;
    letter-spacing: .12em;
}

/* Avatares sin foto: una presencia limpia y consistente con la marca. */
.site-nav .nav-profile-avatar {
    color: var(--ui-red);
    border: 2px solid var(--ui-red);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(217, 7, 21, .08);
}

.profile-avatar:not(.has-image) {
    color: var(--ui-red);
    border: 3px solid var(--ui-red);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(217, 7, 21, .16);
}

main :where(input, select, textarea) {
    color: var(--ui-ink);
    border-color: var(--ui-line);
}

main :where(input, select, textarea):focus-visible {
    border-color: var(--ui-red);
    box-shadow: var(--ui-focus);
}

@media (max-width: 760px) {
    :root { --ui-tap-size: 46px; }
    .container { width: min(100% - 28px, var(--container)); }
    .btn { min-height: 46px; }
    main :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { min-height: 46px; }

    .cta-strip { padding: 30px 0 26px; }
    .cta-strip .container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        text-align: center;
    }
    .cta-strip .container > div {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
    .cta-strip .cta-icon { width: 52px; height: 52px; }
    .cta-strip b { font-size: 1.08rem; }
    .cta-strip .container > div > div p { margin: 5px 0 0; }
    .cta-strip .btn { width: 100%; min-width: 0; }

    .site-footer .footer-company {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .site-footer .footer-company > .brand {
        font-size: 1.55rem !important;
        grid-template-columns: auto 28px auto;
        margin: 0;
        padding-bottom: 20px;
    }
    .site-footer .footer-company > .brand i { width: 27px; height: 27px; }
    .site-footer .footer-tagline { max-width: 290px; }
    .site-footer .footer-company-detail { margin-top: 16px; }
}

@media (prefers-contrast: more) {
    :root { --ui-muted: #344c5d; --ui-line: #8294a1; }
    .btn, main :where(input, select, textarea) { border-width: 2px; }
}