/**********************************************************************************************
 * @Name:        site.css
 * @Description: Base visual styles for the opendataV2 administrative layout.
 * @Author:      Motfware Technologies Inside SAS
 * @Date:        2026/05/14
 **********************************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --odv-bg: #f3f5f8;
    --odv-surface: #ffffff;
    --odv-surface-soft: #f7f9fb;
    --odv-text: #16202b;
    --odv-muted: #6b7785;
    --odv-border: #e4e9ef;
    --odv-border-strong: #d3dae2;
    --odv-primary: #f03040;
    --odv-primary-dark: #c82a36;
    --odv-primary-soft: #fdeaec;
    --odv-green: #157a4d;
    --odv-green-soft: #e7f6ee;
    --odv-blue: #2563a8;
    --odv-blue-soft: #e8f0fa;
    --odv-amber: #b96a18;
    --odv-amber-soft: #fbf1e0;
    --odv-violet: #6b4aa8;
    --odv-violet-soft: #f0ebfa;
    --odv-teal: #0f6f79;
    --odv-teal-soft: #e2f2f3;
    --odv-graphite: #343941;
    --odv-sidebar: #ffffff;
    /* Sombras suaves: superficies planas, no flotantes */
    --odv-shadow: 0 1px 2px rgba(16, 36, 62, 0.05);
    --odv-shadow-sm: 0 1px 2px rgba(16, 36, 62, 0.04);
    --odv-shadow-pop: 0 8px 24px rgba(16, 36, 62, 0.10);
    /* Escala de espaciado sistemática (4/8/12/16/24/32) */
    --odv-space-1: 4px;
    --odv-space-2: 8px;
    --odv-space-3: 12px;
    --odv-space-4: 16px;
    --odv-space-5: 24px;
    --odv-space-6: 32px;
    /* Radios */
    --odv-radius-sm: 6px;
    --odv-radius-md: 9px;
    --odv-radius-lg: 12px;
    /* Anillo de foco */
    --odv-focus-ring: 0 0 0 3px rgba(240, 48, 64, 0.14);
    --odv-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--odv-bg);
    color: var(--odv-text);
    font-family: var(--odv-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:has(.odv-auth-shell) {
    overflow: hidden;
}

body:has(.odv-login--split) {
    overflow: auto;
}

.odv-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.odv-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    background: var(--odv-bg);
    transition: grid-template-columns 0.18s ease;
}

body.odv-sidebar-collapsed .odv-shell,
.odv-shell.is-sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr);
}

.odv-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 14px 10px 10px;
    border-right: 1px solid var(--odv-border);
    background: var(--odv-sidebar);
    overflow: hidden;
}

.odv-sidebar__brand {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px 12px;
    border-bottom: 1px solid var(--odv-border);
}

.odv-brand__logo {
    width: 124px;
    max-width: 100%;
    height: auto;
    display: block;
}

.odv-brand__icon {
    width: 34px;
    height: 34px;
    display: none;
    object-fit: contain;
}

.odv-nav {
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 10px;
    /* The menu can hold more entries than a short laptop screen fits: it scrolls on its own so
       the last ones stay reachable and the footer stays put. */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.odv-nav__section {
    margin: 12px 10px 4px;
    color: #8792a0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.odv-nav__section:first-child {
    margin-top: 2px;
}

.odv-nav__link {
    min-width: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px 0 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--odv-graphite);
    font: inherit;
    font-size: 13.5px;
    font-weight: 750;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.odv-nav__text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.odv-nav__link:hover,
.odv-nav__link:focus {
    background: #f1f4f7;
    color: var(--odv-primary-dark);
    outline: 0;
}

.odv-nav__link.is-active {
    background: #fff0f2;
    color: var(--odv-primary-dark);
    box-shadow: inset 3px 0 0 var(--odv-primary);
}

.odv-nav__link:disabled {
    color: #9aa5b1;
    cursor: not-allowed;
}

.odv-nav__icon {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 6px;
    background: #f3f5f7;
    color: currentColor;
}

.odv-nav__icon .odv-icon {
    width: 16px;
    height: 16px;
}

.odv-sidebar__footer {
    display: grid;
    gap: 1px;
    margin-top: 10px;
    padding: 10px 10px 2px;
    border-top: 1px solid var(--odv-border);
}

.odv-sidebar__install {
    min-height: 34px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 8px;
    border: 1px solid var(--odv-border-strong);
    border-radius: var(--odv-radius-sm);
    background: #ffffff;
    color: var(--odv-graphite);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.odv-sidebar__install:hover,
.odv-sidebar__install:focus-visible {
    border-color: var(--odv-primary);
    color: var(--odv-primary-dark);
    outline: 0;
}

.odv-sidebar__install .odv-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--odv-primary);
}

.odv-sidebar__footer strong {
    color: var(--odv-graphite);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.odv-sidebar__footer span {
    color: var(--odv-muted);
    font-size: 11px;
    font-weight: 600;
}

.odv-sidebar__footer-short {
    display: none;
    color: var(--odv-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

body.odv-sidebar-collapsed .odv-brand__logo,
body.odv-sidebar-collapsed .odv-nav__text,
body.odv-sidebar-collapsed .odv-sidebar__footer strong,
body.odv-sidebar-collapsed .odv-sidebar__footer span,
.odv-shell.is-sidebar-collapsed .odv-brand__logo,
.odv-shell.is-sidebar-collapsed .odv-nav__text,
.odv-shell.is-sidebar-collapsed .odv-sidebar__footer strong,
.odv-shell.is-sidebar-collapsed .odv-sidebar__footer span {
    display: none;
}

/* Collapsed there is no room for the group name, but the grouping still helps: it becomes a rule. */
body.odv-sidebar-collapsed .odv-nav__section,
.odv-shell.is-sidebar-collapsed .odv-nav__section {
    height: 1px;
    margin: 8px 12px;
    padding: 0;
    overflow: hidden;
    background: var(--odv-border);
    text-indent: -999px;
}

body.odv-sidebar-collapsed .odv-sidebar__footer,
.odv-shell.is-sidebar-collapsed .odv-sidebar__footer {
    justify-items: center;
    padding: 10px 0 2px;
}

body.odv-sidebar-collapsed .odv-sidebar__footer-short,
.odv-shell.is-sidebar-collapsed .odv-sidebar__footer-short {
    display: block;
}

body.odv-sidebar-collapsed .odv-sidebar__install span,
.odv-shell.is-sidebar-collapsed .odv-sidebar__install span {
    display: none;
}

body.odv-sidebar-collapsed .odv-sidebar__install,
.odv-shell.is-sidebar-collapsed .odv-sidebar__install {
    width: 34px;
    gap: 0;
    padding: 0;
}

body.odv-sidebar-collapsed .odv-brand__icon,
.odv-shell.is-sidebar-collapsed .odv-brand__icon {
    display: block;
}

body.odv-sidebar-collapsed .odv-nav__link,
.odv-shell.is-sidebar-collapsed .odv-nav__link {
    justify-content: center;
    padding: 0;
}

.odv-main {
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.odv-topbar {
    min-height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
    border-bottom: 1px solid var(--odv-border);
    background: var(--odv-surface);
}

.odv-topbar__left,
.odv-topbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.odv-page-title {
    display: grid;
    gap: 2px;
}

.odv-page-title strong {
    color: var(--odv-graphite);
    font-size: 16px;
    line-height: 1.15;
}

.odv-page-title span {
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 650;
}

.odv-topbar-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
    color: var(--odv-graphite);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.odv-topbar-link:hover,
.odv-topbar-link:focus {
    border-color: rgba(240, 48, 64, 0.42);
    background: #ffffff;
    outline: 0;
}

.odv-menu-toggle,
.odv-icon-button,
.odv-profile-button,
.odv-profile-dropdown button {
    min-width: 42px;
    min-height: 42px;
    border: 1px solid var(--odv-border);
    border-radius: 7px;
    background: #ffffff;
    color: var(--odv-graphite);
    font: inherit;
    cursor: pointer;
}

.odv-menu-toggle,
.odv-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.odv-icon-button {
    position: relative;
    padding: 0;
    text-decoration: none;
}

.odv-notification-menu {
    position: relative;
}

.odv-notification-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: min(380px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid var(--odv-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--odv-shadow);
}

.odv-notification-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--odv-border);
}

.odv-notification-popover__header strong,
.odv-notification-popover__header span,
.odv-notification-popover__item strong,
.odv-notification-popover__item p,
.odv-notification-popover__item time {
    display: block;
}

.odv-notification-popover__header strong {
    color: var(--odv-graphite);
    font-size: 14px;
}

.odv-notification-popover__header span {
    margin-top: 2px;
    color: var(--odv-muted);
    font-size: 12px;
}

.odv-notification-popover__count {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff0f2;
    color: var(--odv-primary-dark) !important;
    font-size: 11px !important;
    font-weight: 800;
}

.odv-notification-popover__list {
    max-height: min(390px, calc(100vh - 150px));
    overflow-y: auto;
}

.odv-notification-popover__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--odv-border);
    background: #ffffff;
}

.odv-notification-popover__item:last-child {
    border-bottom: 0;
}

/* A notification is a link to what it talks about; it keeps the look of the list, not of a link. */
a.odv-notification-popover__item,
a.odv-event-item {
    color: inherit;
    text-decoration: none;
}

a.odv-notification-popover__item:hover,
a.odv-event-item:hover,
a.odv-notification-popover__item:focus-visible,
a.odv-event-item:focus-visible {
    background: var(--odv-surface-soft);
}

.odv-notification-popover__item.is-unread {
    background: #fff7f8;
}

.odv-notification-popover__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eef1f4;
    color: var(--odv-graphite);
}

.odv-notification-popover__item.is-unread .odv-notification-popover__icon {
    background: #fff0f2;
    color: var(--odv-primary-dark);
}

.odv-notification-popover__item strong {
    color: var(--odv-graphite);
    font-size: 13px;
    line-height: 1.35;
}

.odv-notification-popover__item p {
    margin: 3px 0 0;
    color: var(--odv-muted);
    font-size: 12px;
    line-height: 1.4;
}

.odv-notification-popover__item time {
    margin-top: 5px;
    color: var(--odv-muted);
    font-size: 11px;
    font-weight: 700;
}

.odv-notification-popover__empty {
    padding: 22px 16px;
    color: var(--odv-muted);
    text-align: center;
}

.odv-notification-popover__empty strong,
.odv-notification-popover__empty span {
    display: block;
}

.odv-notification-popover__empty strong {
    color: var(--odv-graphite);
    font-size: 13px;
}

.odv-notification-popover__empty span {
    margin-top: 4px;
    font-size: 12px;
}

.odv-icon-button--edit {
    border-color: rgba(37, 99, 168, 0.28);
    background: #eef6ff;
    color: var(--odv-blue);
}

.odv-icon-button--success {
    border-color: rgba(22, 138, 91, 0.28);
    background: #edf8f2;
    color: var(--odv-green);
}

.odv-icon-button--danger {
    border-color: rgba(240, 48, 64, 0.28);
    background: #fff0f2;
    color: var(--odv-primary-dark);
}

.odv-icon-button--edit:hover,
.odv-icon-button--edit:focus {
    border-color: var(--odv-blue);
    background: var(--odv-blue);
    color: #ffffff;
}

.odv-icon-button--success:hover,
.odv-icon-button--success:focus {
    border-color: var(--odv-green);
    background: var(--odv-green);
    color: #ffffff;
}

.odv-icon-button--danger:hover,
.odv-icon-button--danger:focus {
    border-color: var(--odv-primary);
    background: var(--odv-primary);
    color: #ffffff;
}

.odv-is-hidden {
    display: none !important;
}

/* Accessible foreground Firebase notification; payload details stay server-side. */
.odv-push-toast {
    position: fixed;
    /* J-03: top right, under the top bar, above every floating control (install, Salu). */
    z-index: 2000;
    right: 1rem;
    top: 76px;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: .875rem 2.25rem .875rem 1rem;
    border-radius: .75rem;
    background: #1f2937;
    color: #fff;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .28);
    font-size: .875rem;
    line-height: 1.4;
}

/* J-03: a foreground push with a page to open is a link; it keeps the toast look. */
a.odv-push-toast { display: block; color: #fff; text-decoration: none; }
a.odv-push-toast:hover, a.odv-push-toast:focus-visible { background: #111827; }
.odv-push-toast__close { position: absolute; top: .35rem; right: .5rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.odv-push-toast__close:hover, .odv-push-toast__close:focus-visible { background: rgba(255, 255, 255, .15); }

.odv-icon-button--passkey {
    position: relative;
    border-color: rgba(240, 48, 64, 0.38);
    background: #fff7f8;
    color: var(--odv-primary-dark);
    animation: odvPasskeyPulse 1.65s ease-in-out infinite;
}

.odv-icon-button--passkey[data-odv-passkey-state="active"] {
    border-color: rgba(20, 125, 79, 0.44);
    background: #ecf9f1;
    color: #147d4f;
    animation: none;
    cursor: default;
    opacity: 1;
}

.odv-icon-button--passkey[data-odv-passkey-state="active"]::after {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 13px;
    height: 13px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #147d4f;
    color: #ffffff;
    content: "✓";
    font-size: 10px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
}

.odv-icon-button--push {
    position: relative;
    border-color: rgba(202, 113, 0, 0.42);
    background: #fff4e5;
    color: #ae5f00;
    animation: odvPushPulse 1.9s ease-in-out infinite;
}

.odv-icon-button--push::after {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: none;
    width: 13px;
    height: 13px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
}

.odv-icon-button--push[data-odv-push-state="pending"]:hover,
.odv-icon-button--push[data-odv-push-state="pending"]:focus {
    border-color: #d97706;
    background: #d97706;
    color: #ffffff;
}

.odv-icon-button--push[data-odv-push-state="active"] {
    border-color: rgba(20, 125, 79, 0.44);
    background: #ecf9f1;
    color: #147d4f;
    animation: none;
}

.odv-icon-button--push[data-odv-push-state="active"]::after {
    display: block;
    background: #147d4f;
    content: "✓";
}

.odv-icon-button--push[data-odv-push-state="blocked"] {
    border-color: rgba(185, 44, 57, 0.42);
    background: #fff0f1;
    color: #b92c39;
    animation: none;
}

.odv-icon-button--push[data-odv-push-state="blocked"]::after {
    display: block;
    background: #b92c39;
    content: "/";
    font-size: 13px;
}

.odv-icon-button--lock {
    border-color: rgba(31, 41, 51, 0.18);
    background: #ffffff;
    color: var(--odv-graphite);
}

.odv-icon-button--passkey .odv-icon {
    width: 22px;
    height: 22px;
}

.odv-icon-button--passkey:hover,
.odv-icon-button--passkey:focus,
.odv-icon-button--lock:hover,
.odv-icon-button--lock:focus {
    background: var(--odv-primary);
    color: #ffffff;
}

.odv-topbar-form {
    margin: 0;
    display: inline-flex;
}

.odv-topbar-status {
    max-width: 190px;
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

@keyframes odvPasskeyPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 48, 64, 0.32);
        transform: translateY(0);
    }

    55% {
        box-shadow: 0 0 0 7px rgba(240, 48, 64, 0);
        transform: translateY(-1px);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(240, 48, 64, 0);
        transform: translateY(0);
    }
}

@keyframes odvPushPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(19, 130, 160, 0.28);
        transform: translateY(0);
    }

    55% {
        box-shadow: 0 0 0 7px rgba(19, 130, 160, 0);
        transform: translateY(-1px);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(19, 130, 160, 0);
        transform: translateY(0);
    }
}

.odv-notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--odv-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

.odv-user-chip {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff0f2;
    color: var(--odv-primary-dark);
    font-size: 13px;
    font-weight: 900;
}

.odv-profile-menu {
    position: relative;
}

.odv-profile-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 3px 9px 3px 4px;
}

.odv-profile-button__text {
    display: grid;
    text-align: left;
}

.odv-profile-button__text strong,
.odv-profile-dropdown__header strong {
    color: var(--odv-graphite);
    font-size: 13px;
    line-height: 1.2;
}

/* A full clinical name («GUSTAVO ADOLFO MONSALVE JIMENEZ») wrapped into four lines and crowded the
   bar: it stays on one line and the full name lives in the dropdown. */
.odv-profile-button__text strong {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On a tablet the side menu takes 268px and the six top controls no longer fit next to a name:
   the bar keeps the avatar and compacts its buttons, as on a phone, and the page title gives way
   before the controls do. */
@media (max-width: 1100px) {
    .odv-profile-button__text {
        display: none;
    }

    .odv-topbar__actions {
        gap: 4px;
        /* The bar shrank this block while its buttons kept their size, so they spilled past the
           screen: the controls keep their width and the title is the one that gives way. */
        flex: 0 0 auto;
    }

    .odv-topbar__actions .odv-icon-button {
        width: 36px;
        height: 36px;
    }

    .odv-page-title {
        min-width: 0;
        overflow: hidden;
    }

    .odv-page-title strong,
    .odv-page-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.odv-profile-button__text small,
.odv-profile-dropdown__header small {
    color: var(--odv-muted);
    font-size: 11px;
    font-weight: 700;
}

.odv-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    width: 268px;
    display: none;
    padding: 8px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--odv-shadow);
}

.odv-profile-dropdown.is-open {
    display: block;
}

.odv-profile-dropdown__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--odv-border);
}

.odv-profile-dropdown a,
.odv-profile-dropdown button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--odv-graphite);
    font-size: 13px;
    font-weight: 750;
    text-align: left;
    text-decoration: none;
}

.odv-profile-dropdown a:hover,
.odv-profile-dropdown a:focus,
.odv-profile-dropdown button:hover,
.odv-profile-dropdown button:focus,
.odv-menu-toggle:hover,
.odv-menu-toggle:focus,
.odv-icon-button:hover,
.odv-icon-button:focus,
.odv-profile-button:hover,
.odv-profile-button:focus {
    border-color: var(--odv-primary);
    color: var(--odv-primary-dark);
    outline: 0;
}

.odv-profile-logout-form {
    margin: 0;
}

.odv-content {
    flex: 1;
    background: var(--odv-bg);
}

.odv-flash {
    margin: 16px 24px 0;
    padding: 12px 14px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--odv-graphite);
    font-size: 14px;
    font-weight: 750;
}

.odv-flash--success {
    border-color: rgba(22, 138, 91, 0.28);
    background: #edf8f2;
    color: #126b49;
}

.odv-flash--error {
    border-color: rgba(240, 48, 64, 0.25);
    background: #fff0f2;
    color: var(--odv-primary-dark);
}

.odv-dashboard {
    max-width: 1480px;
    margin: 0 auto;
    padding: 24px;
}

/* Leaves the bottom right free for the floating «Descargar app» button and the Salu bubble, so the
   last block and its actions can always be scrolled above them (cut-over screen, T2). Two classes
   so the phone rules of .odv-dashboard further down do not take the space back. */
.odv-dashboard.odv-dashboard--despeje-flotante {
    padding-bottom: 160px;
}

.odv-dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.odv-dashboard-header > div:first-child,
.odv-status-card,
.odv-panel,
.odv-metric-card {
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-lg);
    background: var(--odv-surface);
    box-shadow: var(--odv-shadow);
}

.odv-dashboard-header > div:first-child {
    min-height: 132px;
    padding: 24px;
}

.odv-kicker {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--odv-primary-dark);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.odv-dashboard h1,
.odv-login h1,
.odv-login h2 {
    margin: 0 0 8px;
    color: var(--odv-graphite);
    font-weight: 850;
}

.odv-dashboard h1 {
    font-size: 30px;
    line-height: 1.14;
}

.odv-dashboard p,
.odv-login p {
    margin: 0;
    color: var(--odv-muted);
    line-height: 1.55;
}

.odv-status-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    border-top: 4px solid var(--odv-green);
}

.odv-status-card span,
.odv-status-card small {
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 800;
}

.odv-status-card strong {
    margin: 7px 0;
    color: var(--odv-green);
    font-size: 26px;
}

.odv-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.odv-metric-card {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    box-shadow: none;
}

.odv-metric-card__icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #f3f5f7;
    color: var(--odv-graphite);
}

.odv-metric-card span:not(.odv-metric-card__icon) {
    display: block;
    margin-bottom: 7px;
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.odv-metric-card strong {
    color: var(--odv-graphite);
    font-size: 30px;
    line-height: 1;
}

.odv-metric-card.is-red .odv-metric-card__icon {
    background: #fff0f2;
    color: var(--odv-primary-dark);
}

.odv-metric-card.is-green .odv-metric-card__icon {
    background: #edf8f2;
    color: var(--odv-green);
}

.odv-metric-card.is-graphite .odv-metric-card__icon {
    background: #eef1f4;
    color: var(--odv-graphite);
}

.odv-metric-card.is-amber .odv-metric-card__icon {
    background: #fff6e8;
    color: var(--odv-amber);
}

/* The request list carries eleven columns: fixed widths from the colgroup keep them inside the
   panel, and what does not fit is cut with an ellipsis, never with a horizontal scrollbar. */
.odv-request-index .odv-table {
    table-layout: fixed;
    font-size: 13px;
}

/* Eleven columns in the width of the panel: the cells give back the room the padding took, and
   whatever still does not fit is cut here instead of pushing the table sideways. */
.odv-request-index .odv-table th,
.odv-request-index .odv-table td {
    padding: 10px 8px;
    overflow: hidden;
}

.odv-request-index .odv-table .odv-state-pill,
.odv-request-index .odv-table .odv-crew-member,
.odv-request-index .odv-table .odv-alerta {
    max-width: 100%;
    font-size: 11px;
}

/* Each crew member and each alert on its own line: side by side they stretched the cell and the
   whole table with it. */
.odv-request-index .odv-table .odv-crew-member,
.odv-request-index .odv-table td .odv-alerta {
    display: flex;
    width: fit-content;
    margin-top: 2px;
}

.odv-request-index .odv-row-menu__toggle {
    padding: 6px 8px;
    font-size: 12px;
}

.odv-request-index .odv-table .odv-table-muted {
    display: block;
    font-size: 11px;
}

.odv-request-index .odv-table td,
.odv-request-index .odv-table th {
    overflow-wrap: anywhere;
}

.odv-request-index .odv-table .odv-cell-corta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Twelve cards in three groups: they fit as many per row as the width allows, instead of the
   fixed four of the dashboard grid. */
.odv-metric-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

/* Two more tones for the state cards: the states the table already paints blue and purple. */
.odv-metric-card.is-blue .odv-metric-card__icon {
    background: #eaf1fa;
    color: #2563a8;
}

.odv-metric-card.is-purple .odv-metric-card__icon {
    background: #f1ecfd;
    color: #7c3aed;
}

.odv-metric-card.is-ocre .odv-metric-card__icon {
    background: #fbf1e2;
    color: #8a5a12;
}

/* A state with nothing in it still filters, so it stays clickable, only quieter. */
.odv-metric-card--button.is-vacia:not(.is-active) .odv-metric-card__body strong,
.odv-metric-card--button.is-vacia:not(.is-active) .odv-metric-card__icon {
    opacity: .55;
}

.odv-list-header {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Title and actions share one line while they fit; on a tablet the actions drop below instead
       of pushing the page sideways. */
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface);
    box-shadow: var(--odv-shadow);
}

.odv-request-index > .odv-list-header {
    display: none;
}

.odv-list-header h1 {
    margin: 0;
    color: var(--odv-text);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.odv-metric-grid--compact .odv-metric-card {
    min-height: 88px;
    padding: 14px 16px;
}

.odv-metric-card--button {
    width: 100%;
    border: 1px solid var(--odv-border);
    cursor: pointer;
    text-align: left;
}

.odv-metric-card--button:hover,
.odv-metric-card--button:focus,
.odv-metric-card--button.is-active {
    border-color: rgba(240, 48, 64, 0.42);
    background: #ffffff;
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(240, 48, 64, 0.08);
}

.odv-metric-card__body {
    display: block;
    margin: 0;
    text-transform: none;
}

.odv-list-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(240, 48, 64, 0.34);
    border-radius: var(--odv-radius-md);
    background: #fff7f8;
    color: var(--odv-primary-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.odv-list-action--new {
    border-color: rgba(240, 48, 64, 0.34);
    background: #fff7f8;
    color: var(--odv-primary-dark);
}

.odv-list-action--search {
    border-color: rgba(37, 99, 168, 0.28);
    background: #eef6ff;
    color: var(--odv-blue);
}

.odv-list-action--excel {
    border-color: rgba(22, 138, 91, 0.30);
    background: #edf8f2;
    color: var(--odv-green);
}

.odv-list-action .odv-icon {
    width: 17px;
    height: 17px;
}

.odv-list-action:hover,
.odv-list-action:focus {
    background: #ffffff;
    outline: 0;
}

.odv-list-action--new:hover,
.odv-list-action--new:focus {
    border-color: var(--odv-primary);
    color: var(--odv-primary-dark);
}

.odv-list-action--search:hover,
.odv-list-action--search:focus {
    border-color: var(--odv-blue);
    color: var(--odv-blue);
}

.odv-list-action--excel:hover,
.odv-list-action--excel:focus {
    border-color: var(--odv-green);
    color: var(--odv-green);
}

.odv-list-action--muted {
    border-color: var(--odv-border);
    background: #ffffff;
    color: var(--odv-graphite);
}

.odv-request-list {
    display: grid;
    gap: 14px;
}

.odv-request-filter-form {
    display: grid;
    gap: 14px;
}

.odv-filter-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.odv-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.odv-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Which format «Excel historias» downloads, next to the button (2026-10-16). */
.odv-filter-actions .odv-excel-formato {
    align-self: center;
    font-size: 12px;
    white-space: nowrap;
}

/* Without «Consulta» or «Traslado» the histories Excel is not downloaded (Jorge, 2026-10-16). */
.odv-filter-actions .odv-list-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.odv-patient-lookup {
    min-height: 40px;
    align-self: end;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--odv-border);
    border-radius: 6px;
    background: var(--odv-surface-soft);
    color: var(--odv-muted);
    font-size: 13px;
    font-weight: 800;
}

.odv-patient-lookup:empty {
    display: none;
}

.odv-patient-lookup.is-found {
    border-color: rgba(22, 138, 91, 0.28);
    background: #edf8f2;
    color: var(--odv-green);
}

.odv-patient-lookup.is-new {
    border-color: rgba(185, 106, 24, 0.28);
    background: #fff6e8;
    color: var(--odv-amber);
}

.odv-patient-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
}

.odv-patient-card__title {
    font-size: 14px;
    color: var(--odv-text);
}

.odv-patient-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 16px;
}

.odv-patient-card__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.odv-patient-card__item span {
    color: var(--odv-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.odv-patient-lookup__link {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
}

.odv-patient-lookup__link:hover,
.odv-patient-lookup__link:focus {
    text-decoration: none;
}

.odv-patient-lookup.is-loading {
    border-color: rgba(37, 99, 168, 0.24);
    background: #eef6ff;
    color: var(--odv-blue);
}

.odv-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
}

.odv-workspace-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.odv-request-workspace {
    display: grid;
    gap: 16px;
}

.odv-request-form-panel {
    order: -1;
}

.odv-request-form-panel > .odv-form-stack {
    display: grid;
    gap: 16px;
}

.odv-request-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--odv-space-3) var(--odv-space-4);
    padding: var(--odv-space-4);
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-md);
    background: var(--odv-surface-soft);
}

.odv-request-section__header {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    color: var(--odv-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.odv-request-section__header span {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--odv-radius-sm);
    background: var(--odv-primary-soft);
    color: var(--odv-primary);
}

.odv-request-section__header .odv-icon {
    width: 16px;
    height: 16px;
}

.odv-request-section > .odv-form-grid {
    display: contents;
}

.odv-request-section--notes > .odv-field {
    grid-column: span 2;
}

.odv-request-section > .odv-patient-lookup,
.odv-request-section > .odv-field--wide,
.odv-request-section > .odv-field:has(textarea) {
    grid-column: 1 / -1;
}

.odv-inline-patient {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--odv-space-3) var(--odv-space-4);
    padding: 14px;
    border: 1px solid rgba(240, 48, 64, 0.16);
    border-radius: 8px;
    background: var(--odv-surface-soft);
}

.odv-inline-patient[hidden] {
    display: none;
}

.odv-inline-patient .odv-form-grid {
    display: contents;
}

.odv-inline-patient .odv-request-section__header {
    grid-column: 1 / -1;
}

.odv-inline-patient > .odv-field--wide,
.odv-inline-patient > .odv-field:has(textarea) {
    grid-column: 1 / -1;
}

.odv-request-branch {
    grid-column: 1 / -1;
    padding: var(--odv-space-4);
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-md);
    background: var(--odv-surface-soft);
}

.odv-request-branch:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--odv-space-3) var(--odv-space-4);
}

.odv-request-branch .odv-form-grid {
    display: contents;
}

.odv-request-branch .odv-side-divider,
.odv-request-branch .odv-request-section__header {
    grid-column: 1 / -1;
}

.odv-request-branch > .odv-field--wide,
.odv-request-branch > .odv-field:has(textarea) {
    grid-column: 1 / -1;
}

.odv-request-form-panel .odv-primary-action {
    width: auto;
    min-width: 220px;
    justify-self: end;
    padding: 0 18px;
}

.odv-admin-hub {
    display: grid;
    gap: 12px;
}

.odv-admin-hub__header {
    min-height: auto;
    display: block;
    padding: 18px 20px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface);
}

.odv-admin-hub__header h1 {
    margin: 3px 0 0;
    font-size: 28px;
    line-height: 1.12;
}

.odv-panel.odv-admin-hub__panel {
    padding: 16px;
}

.odv-admin-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.odv-admin-tile {
    min-height: 78px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
    color: inherit;
    text-decoration: none;
}

.odv-admin-tile:hover,
.odv-admin-tile:focus {
    border-color: rgba(240, 48, 64, 0.42);
    background: #ffffff;
    outline: 0;
}

.odv-admin-tile__icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: #fff0f2;
    color: var(--odv-primary-dark);
}

.odv-admin-tile strong,
.odv-admin-tile small {
    display: block;
}

.odv-admin-tile strong {
    color: var(--odv-graphite);
    font-size: 15px;
    line-height: 1.2;
}

.odv-admin-tile small {
    margin-top: 3px;
    color: var(--odv-muted);
    font-size: 12px;
    line-height: 1.25;
}

.odv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.odv-panel {
    min-width: 0;
    padding: 18px 20px;
}

.odv-user-admin {
    display: grid;
    gap: 14px;
}

.odv-user-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.odv-user-toolbar__search {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--odv-shadow);
}

.odv-user-toolbar__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--odv-text);
    font: inherit;
    font-size: 14px;
}

.odv-user-summary {
    display: grid;
    /* As many cards as fit: Usuarios has five since «Sin acceso», Pacientes four. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.odv-user-card {
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--odv-graphite);
    text-align: left;
    box-shadow: var(--odv-shadow);
    cursor: pointer;
    text-decoration: none;
}

.odv-user-card__icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: #f3f5f7;
    color: var(--odv-graphite);
}

.odv-user-card span {
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 850;
}

.odv-user-card strong {
    color: var(--odv-graphite);
    font-size: 22px;
    line-height: 1;
}

.odv-patient-admin .odv-user-summary {
    gap: 12px;
    margin: 2px 0 14px;
}

.odv-patient-admin .odv-user-toolbar {
    grid-template-columns: minmax(320px, 1fr) 40px auto auto;
    gap: 8px;
}

.odv-patient-search-button {
    border: 1px solid var(--odv-border);
    background: #ffffff;
}

.odv-patient-new-button,
.odv-patient-clear-button {
    min-height: 40px;
    padding: 0 11px;
    white-space: nowrap;
}

.odv-patient-admin .odv-user-card {
    min-height: 64px;
    /* The count keeps its full width (45.500 patients after the legacy load); the label wraps. */
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
}

.odv-patient-admin .odv-user-card__icon {
    width: 32px;
    height: 32px;
}

.odv-patient-admin .odv-user-card strong {
    font-size: 20px;
    text-align: right;
    white-space: nowrap;
}

.odv-user-card:hover,
.odv-user-card:focus,
.odv-user-card.is-active {
    border-color: rgba(240, 48, 64, 0.42);
    background: #fff7f8;
    outline: 0;
}

.odv-user-card:hover .odv-user-card__icon,
.odv-user-card:focus .odv-user-card__icon,
.odv-user-card.is-active .odv-user-card__icon {
    background: #fff0f2;
    color: var(--odv-primary-dark);
}

.odv-user-role-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.odv-user-role-card {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 210px;
    padding: 0 9px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--odv-graphite);
    font: inherit;
    cursor: pointer;
}

.odv-user-role-card span {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: #eef6ff;
    color: var(--odv-blue);
}

.odv-user-role-card strong {
    min-width: 0;
    overflow: hidden;
    color: var(--odv-graphite);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odv-user-role-card small {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f1f3f5;
    color: var(--odv-muted);
    font-size: 11px;
    font-weight: 900;
}

.odv-user-role-card:hover,
.odv-user-role-card:focus,
.odv-user-role-card.is-active {
    border-color: rgba(37, 99, 168, 0.38);
    background: #eef6ff;
    outline: 0;
}

.odv-user-filter-panel {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(180px, 260px) minmax(130px, 180px) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--odv-shadow);
}

.odv-user-filter-panel .odv-small-button {
    min-height: 40px;
    white-space: nowrap;
}

.odv-user-table td {
    vertical-align: middle;
}

.odv-user-table td:first-child strong,
.odv-table-muted {
    display: block;
}

.odv-user-table td:first-child {
    min-width: 260px;
}

.odv-user-table td:last-child,
.odv-user-table th:last-child {
    /* Four actions in a row since «acceso» (edit, signature, access, activate). */
    width: 196px;
    text-align: right;
    white-space: nowrap;
}

.odv-role-pill {
    max-width: 240px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(37, 99, 168, 0.22);
    border-radius: 4px;
    background: #eef6ff;
    color: var(--odv-blue);
    font-size: 12px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odv-user-table td:first-child .odv-role-pill {
    max-width: 100%;
    margin: 5px 0 3px;
}

.odv-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.odv-row-actions form {
    /* A block form wrapping an inline-flex button sits on a text baseline, and the descender space
       left the button a few pixels above the links beside it. As a flex box there is no line. */
    display: flex;
    margin: 0;
}

.odv-primary-action--fit {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 14px;
    white-space: nowrap;
}

.odv-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.odv-drawer.is-open {
    display: block;
}

.odv-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 41, 51, 0.38);
}

.odv-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(560px, 100vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: -18px 0 48px rgba(31, 41, 51, 0.18);
}

.odv-drawer__header,
.odv-drawer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.odv-drawer__header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--odv-border);
}

.odv-drawer__header h2 {
    margin: 0;
    color: var(--odv-graphite);
    font-size: 20px;
    line-height: 1.2;
}

.odv-drawer__actions {
    justify-content: flex-end;
    padding-top: 2px;
}

.odv-form-section {
    display: grid;
    gap: var(--odv-space-3);
    padding: var(--odv-space-4);
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-md);
    background: var(--odv-surface-soft);
}

.odv-form-section > strong {
    color: var(--odv-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
}

body.odv-drawer-open {
    overflow: hidden;
}

.odv-submit-status {
    min-height: 1.25rem;
    margin: .5rem 0 0;
    color: var(--odv-muted);
    font-size: .8125rem;
    font-weight: 650;
    line-height: 1.4;
}

form[aria-busy="true"] {
    cursor: progress;
}

.odv-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.odv-panel__header h2,
.odv-next-actions h3 {
    margin: 0 0 4px;
    color: var(--odv-text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.odv-panel__header p,
.odv-next-actions p {
    margin: 0;
    color: var(--odv-muted);
    font-size: 14px;
    line-height: 1.45;
}

.odv-action-grid {
    display: grid;
    gap: 10px;
}

.odv-action-row {
    min-height: 74px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
    color: inherit;
    text-decoration: none;
}

.odv-action-row:hover,
.odv-action-row:focus {
    border-color: rgba(240, 48, 64, 0.4);
    background: #ffffff;
    outline: 0;
}

.odv-action-row.is-disabled {
    opacity: 0.68;
}

.odv-action-row__icon {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: #fff0f2;
    color: var(--odv-primary-dark);
}

.odv-action-row strong,
.odv-action-row small {
    display: block;
}

.odv-action-row strong {
    margin-bottom: 4px;
    color: var(--odv-graphite);
    font-size: 15px;
}

.odv-action-row small {
    color: var(--odv-muted);
    font-size: 13px;
    line-height: 1.35;
}

.odv-event-list {
    display: grid;
    gap: 10px;
}

.odv-event-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
}

.odv-event-item__icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: #eef1f4;
    color: var(--odv-graphite);
}

.odv-event-item strong,
.odv-event-item span {
    display: block;
}

.odv-event-item strong {
    margin-bottom: 3px;
    color: var(--odv-graphite);
    font-size: 14px;
}

.odv-event-item span {
    color: var(--odv-muted);
    font-size: 12px;
    line-height: 1.4;
}

.odv-empty-state {
    padding: 18px;
    border: 1px dashed var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
    color: var(--odv-muted);
}

.odv-empty-state strong,
.odv-empty-state span {
    display: block;
}

.odv-empty-state strong {
    margin-bottom: 5px;
    color: var(--odv-graphite);
}

.odv-panel__badge,
.odv-state-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--odv-border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--odv-graphite);
    font-size: 12px;
    font-weight: 850;
}

.odv-state-pill {
    border-color: rgba(22, 138, 91, 0.22);
    background: #edf8f2;
    color: var(--odv-green);
}

.odv-state-pill.is-muted {
    border-color: var(--odv-border);
    background: #f1f3f5;
    color: var(--odv-muted);
}

/* Alertas de bodega: la pastilla verde es el estado normal; estas marcan lo que hay que mirar. */
.odv-state-pill.is-red {
    border-color: rgba(240, 48, 64, 0.22);
    background: var(--odv-primary-soft);
    color: var(--odv-primary-dark);
}

.odv-state-pill.is-amber {
    border-color: rgba(185, 106, 24, 0.22);
    background: var(--odv-amber-soft);
    color: var(--odv-amber);
}

.odv-state-pill.is-blue {
    border-color: rgba(37, 99, 168, 0.22);
    background: var(--odv-blue-soft);
    color: var(--odv-blue);
}

/* A state is read by its colour before its word: the pill used to be green for every one of them.
   These two complete the set of the request states, with the tones of the catalog. */
.odv-state-pill.is-purple {
    border-color: rgba(124, 58, 237, 0.22);
    background: #f1ecfd;
    color: #6d31d6;
}

.odv-state-pill.is-ocre {
    border-color: rgba(138, 90, 18, 0.24);
    background: #fbf1e2;
    color: #8a5a12;
}

.odv-state-pill.is-green {
    border-color: rgba(22, 138, 91, 0.22);
    background: #edf8f2;
    color: var(--odv-green);
}

.odv-state-pill.is-graphite {
    border-color: var(--odv-border);
    background: #eef1f4;
    color: var(--odv-graphite);
}

.odv-table-note {
    margin: var(--odv-space-3) 0 0;
    color: var(--odv-muted);
    font-size: 12px;
    line-height: 1.5;
}

.odv-table-wrap {
    overflow-x: auto;
    /* A grid or flex child defaults to min-width: auto and grows with its content, so the wrapper
       never scrolled: the wide table pushed the page instead. */
    min-width: 0;
    max-width: 100%;
}

.odv-main,
.odv-content,
.odv-dashboard,
.odv-panel {
    min-width: 0;
}

.odv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.odv-table th,
.odv-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--odv-border);
    text-align: left;
    white-space: nowrap;
}

.odv-table th {
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.odv-inline-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) auto;
    gap: 8px;
}

.odv-inline-form input,
.odv-form-stack input,
.odv-form-stack select,
.odv-form-stack textarea,
.odv-field input,
.odv-field select,
.odv-field textarea {
    min-height: 38px;
    width: 100%;
    padding: 0 11px;
    border: 1px solid var(--odv-border-strong);
    border-radius: var(--odv-radius-md);
    background: #ffffff;
    color: var(--odv-text);
    font-family: var(--odv-font);
    font-size: 13.5px;
    font-weight: 400;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.odv-form-stack input::placeholder,
.odv-field input::placeholder,
.odv-field textarea::placeholder {
    color: #9aa6b2;
}

.odv-form-stack input:focus,
.odv-form-stack select:focus,
.odv-form-stack textarea:focus,
.odv-field input:focus,
.odv-field select:focus,
.odv-field textarea:focus {
    outline: 0;
    border-color: var(--odv-primary);
    box-shadow: var(--odv-focus-ring);
}

.odv-field textarea {
    min-height: 92px;
    padding: 9px 11px;
    resize: vertical;
}

.odv-form-stack {
    display: grid;
    gap: var(--odv-space-4);
}

.odv-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--odv-space-3) var(--odv-space-4);
}

.odv-field {
    display: grid;
    gap: 5px;
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

/* The grid display of these blocks would override the native [hidden]: whatever the request type
   hides stays hidden. */
.odv-field[hidden],
.odv-request-section[hidden] {
    display: none;
}

/* On a phone a form is one column and every control is reachable with a thumb: 44px is the
   minimum touch target, below that the finger hits the neighbour. */
@media (max-width: 760px) {
    .odv-form-grid,
    .odv-request-section,
    .odv-inline-patient,
    .odv-request-branch {
        grid-template-columns: 1fr;
    }

    .odv-field input,
    .odv-field select,
    .odv-field textarea,
    .odv-field .select2-container--krajee-bs5 .select2-selection {
        min-height: 44px;
    }

    .odv-primary-action,
    .odv-small-button,
    .odv-list-action {
        min-height: 44px;
    }

    /* A form action that spans the width is easier to hit than one floating to the right. */
    .odv-form-stack > .odv-primary-action,
    .odv-drawer__actions .odv-primary-action {
        width: 100%;
        justify-content: center;
    }
}

/* On a phone the top bar carries six controls and the name of whoever signed in, which together
   are wider than the screen and push the whole page sideways. The chip keeps its avatar, which is
   what identifies the session at a glance, and drops the text. */
@media (max-width: 760px) {
    .odv-profile-button__text {
        display: none;
    }

    .odv-profile-button {
        padding: 4px;
    }

    .odv-topbar__actions {
        gap: 4px;
        min-width: 0;
    }

    .odv-topbar__actions .odv-icon-button {
        width: 36px;
        height: 36px;
    }
}

/* A 13 column table does not fit in a phone, and sideways scrolling hides half the request. On
   a phone each row becomes a card: the label of the column travels with its value. */
@media (max-width: 760px) {
    .odv-table-wrap {
        overflow: visible;
    }

    .odv-table,
    .odv-table tbody,
    .odv-table tr,
    .odv-table td {
        display: block;
        width: auto;
    }

    .odv-table thead {
        /* Every cell carries its own column name (data-col, below), for the eye and for a screen
           reader. The header used to be hidden off-screen, but its cells kept their width and
           pushed the whole page sideways: up to 2,153px on a 375px phone. */
        display: none;
    }

    /* The block display above would override the native [hidden], and every filter that hides
       rows in the browser (stores, fleet) would show them all on a phone. */
    .odv-table tr[hidden] {
        display: none;
    }

    .odv-table tr {
        margin-bottom: var(--odv-space-3);
        padding: var(--odv-space-3);
        border: 1px solid var(--odv-border);
        border-radius: 12px;
        background: #fff;
    }

    .odv-table td {
        display: flex;
        flex-wrap: wrap;
        gap: 2px var(--odv-space-3);
        align-items: baseline;
        justify-content: space-between;
        padding: 5px 0;
        border: 0;
        text-align: right;
        /* Desktop cells may keep one line; on a card a long drug name, address or IHCE message
           must wrap, or it pushes the whole page sideways. */
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* A cell with several values —the crew— stacks them instead of running off the card. */
    .odv-table td .odv-crew-member {
        width: 100%;
        text-align: right;
    }

    .odv-table td::before {
        content: attr(data-col);
        flex: none;
        color: var(--odv-muted);
        font-size: 11px;
        font-weight: 600;
        text-align: left;
        text-transform: uppercase;
    }

    /* The actions lead the card, full width, as the first thing within reach of the thumb. */
    .odv-table td.odv-row-menu-cell {
        justify-content: flex-start;
        padding-bottom: var(--odv-space-3);
        border-bottom: 1px solid var(--odv-border);
        margin-bottom: 4px;
    }

    .odv-table td.odv-row-menu-cell::before {
        content: none;
    }

    .odv-table td.odv-row-menu-cell .odv-row-menu,
    .odv-table td.odv-row-menu-cell .odv-row-menu__toggle {
        width: 100%;
        justify-content: center;
    }

    /* A cell with no value says nothing on a phone: it is simply not shown. */
    .odv-table td:empty {
        display: none;
    }
}

/* App-style bar. Only on phones: on a desktop the side menu is always visible and a second
   navigation would just compete with it. */
.odv-tabbar,
.odv-sidebar-backdrop {
    display: none;
}

@media (max-width: 760px) {
    .odv-tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: grid;
        /* minmax(0, 1fr) and not 1fr: a column of 1fr never shrinks below its content, so a long
           label pushed the bar —and with it the whole page— wider than the phone. */
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        border-top: 1px solid var(--odv-border);
        background: #fff;
        /* The device keeps its own space at the bottom for the gesture bar. */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
    }

    .odv-tabbar__item {
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: center;
        justify-content: center;
        /* 56px: a finger, not a cursor. */
        min-height: 56px;
        padding: 8px 4px;
        border: 0;
        background: none;
        color: var(--odv-muted);
        font-family: var(--odv-font);
        font-size: 10.5px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .odv-tabbar__item.is-active {
        color: var(--odv-primary);
    }

    .odv-tabbar__icon svg {
        width: 20px;
        height: 20px;
    }

    .odv-tabbar__text {
        max-width: 100%;
        overflow: hidden;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Room so the bar never covers the last row or the primary action of a form. */
    .odv-shell,
    .odv-dashboard {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    }
}

/* Agenda of transfers. One grid of days serves the three views: the month lays seven columns, the
   week keeps the seven with room to breathe, and the day is a single column. */
.odv-agenda__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odv-space-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--odv-space-3);
}

.odv-agenda__nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

.odv-agenda__next svg {
    transform: rotate(180deg);
}

.odv-agenda__titulo {
    margin-left: 6px;
    font-size: 15px;
}

.odv-agenda__vistas {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--odv-border);
    border-radius: 9px;
}

.odv-agenda__vista {
    min-height: 34px;
    padding: 7px 14px;
    border-right: 1px solid var(--odv-border);
    color: var(--odv-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.odv-agenda__vista:last-child {
    border-right: 0;
}

.odv-agenda__vista.is-active {
    background: var(--odv-primary);
    color: #fff;
}

.odv-agenda__resumen {
    margin: 0 0 var(--odv-space-3);
    color: var(--odv-muted);
    font-size: 12.5px;
}

.odv-agenda__encabezado {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
    color: var(--odv-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.odv-agenda__grid {
    display: grid;
    gap: 6px;
}

.odv-agenda__grid--mes {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.odv-agenda__grid--semana {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.odv-agenda__grid--dia {
    grid-template-columns: minmax(0, 1fr);
}

.odv-agenda__dia {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 92px;
    padding: 6px;
    border: 1px solid var(--odv-border);
    border-radius: 9px;
    background: #fff;
}

.odv-agenda__grid--dia .odv-agenda__dia {
    min-height: 200px;
}

/* A day of the neighbouring month is there to complete the week, not to be read. */
.odv-agenda__dia.is-fuera {
    background: var(--odv-surface-muted, #f7f8fa);
    opacity: .55;
}

.odv-agenda__dia.is-hoy {
    border-color: var(--odv-primary);
    box-shadow: inset 0 2px 0 var(--odv-primary);
}

.odv-agenda__fecha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--odv-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.odv-agenda__conteo {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--odv-surface-muted, #eef1f5);
    font-size: 10.5px;
}

.odv-agenda__evento {
    display: block;
    padding: 5px 7px;
    border-left: 3px solid var(--odv-muted);
    border-radius: 6px;
    background: var(--odv-surface-muted, #f4f6f8);
    color: var(--odv-text);
    font-size: 11.5px;
    text-decoration: none;
}

.odv-agenda__evento:hover {
    border-color: var(--odv-primary);
}

.odv-agenda__hora {
    font-weight: 700;
}

.odv-agenda__paciente {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odv-agenda__ruta {
    display: block;
    overflow: hidden;
    color: var(--odv-muted);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The state colours the edge; the alert, when there is one, wins because it is what has to be seen. */
.odv-agenda__evento.is-pendiente { border-left-color: #8a94a6; }
.odv-agenda__evento.is-asignado { border-left-color: #4254c5; }
.odv-agenda__evento.is-proceso { border-left-color: #0f8a5f; }
.odv-agenda__evento.is-finalizado { border-left-color: #b6bcc7; }
.odv-agenda__evento.has-atencion { border-left-color: #e08e0b; }
.odv-agenda__evento.has-critico { border-left-color: var(--odv-primary); }

/* The coordination agenda holds three kinds of event on the same grid, so the kind is read by its
   icon before its words. The state keeps the edge; this only tints the glyph. */
.odv-agenda__evento svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    color: var(--odv-muted);
}

.odv-agenda__evento--consulta svg { color: #2563a8; }
.odv-agenda__evento--traslado svg { color: #0f8a5f; }
.odv-agenda__evento--teleconsulta svg { color: #7c3aed; }

/* A calendar cell is the same size as its neighbours whatever it holds: the events scroll inside
   the cell instead of stretching the row. A week with twenty-eight services in one day used to be
   a 1.737 px column with six empty ones beside it. */
.odv-agenda__eventos {
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-height: 0;
}

.odv-agenda__grid--semana .odv-agenda__dia,
.odv-agenda__grid--mes .odv-agenda__dia {
    height: 100%;
}

.odv-agenda__grid--semana {
    grid-auto-rows: minmax(190px, 190px);
}

.odv-agenda__grid--mes {
    grid-auto-rows: minmax(128px, 128px);
}

/* The date stays readable while its events scroll under it. */
.odv-agenda__grid--semana .odv-agenda__fecha,
.odv-agenda__grid--mes .odv-agenda__fecha {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--odv-border);
    background: inherit;
}

.odv-agenda__sin {
    display: block;
    color: #8a5a12;
    font-size: 10.5px;
    font-weight: 600;
}

/* Hiding an event is the job of the filters, and [hidden] alone loses against the display above:
   every element the filters hide says so again here. */
.odv-agenda__evento[hidden],
.odv-agenda__conteo[hidden],
.odv-agenda .odv-cx-card[hidden],
.odv-agenda__vacio[hidden] {
    display: none;
}

/* The filters are one bar, not four fields floating over the calendar: a title that says what they
   do, the four selects sharing the width, and the actions at the end. */
.odv-agenda__filtros {
    display: grid;
    align-items: end;
    gap: 8px 12px;
    /* Two deliberate rows: what the bar is for and what it can do, then the four filters sharing
       the width. Left to themselves they wrapped wherever they fit and the bar read as a pile. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--odv-border);
    border-radius: 10px;
    background: var(--odv-surface-muted, #f7f8fa);
}

.odv-agenda__filtros-titulo {
    grid-row: 1;
    grid-column: 1 / 3;
}

.odv-agenda__filtros-acciones {
    grid-row: 1;
    grid-column: 3 / 5;
}

.odv-agenda__filtros .odv-field {
    grid-row: 2;
}

.odv-agenda__filtros-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.odv-agenda__filtros-titulo svg {
    width: 15px;
    height: 15px;
}

.odv-agenda__filtros .odv-field {
    min-width: 0;
    margin: 0;
}

.odv-agenda__filtros-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.odv-agenda__filtros-acciones .odv-small-button[hidden] {
    display: none;
}

.odv-agenda__filtros-acciones svg {
    width: 14px;
    height: 14px;
}

.odv-agenda__vacio {
    margin: 0 0 14px;
    color: var(--odv-muted);
    font-size: 13px;
}

/* Who attends the event, and the kind of event, as chips that read the same in a card and in a
   grid cell. */
.odv-agenda-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--odv-border);
    border-radius: 999px;
    background: var(--odv-surface-muted, #f4f6f8);
    color: var(--odv-text);
    font-size: 11.5px;
    font-weight: 600;
}

.odv-agenda-chip svg {
    width: 13px;
    height: 13px;
}

.odv-agenda-chip--consulta { border-color: rgba(37, 99, 168, 0.22); background: var(--odv-blue-soft, #eef3fa); color: #2563a8; }
.odv-agenda-chip--traslado { border-color: rgba(22, 138, 91, 0.22); background: #edf8f2; color: var(--odv-green, #168a5b); }
.odv-agenda-chip--teleconsulta { border-color: rgba(124, 58, 237, 0.22); background: #f1ecfd; color: #6d31d6; }

/* Nobody assigned is not a neutral fact: it is the one the agenda exists to surface. */
.odv-agenda-chip--vacia {
    border-color: rgba(138, 90, 18, 0.24);
    background: #fbf1e2;
    color: #8a5a12;
}

@media (max-width: 760px) {
    /* Stacked on a phone there is one column and all the room in the world: the cells grow with
       what they hold instead of scrolling inside a box the size of a stamp. */
    .odv-agenda__grid--semana,
    .odv-agenda__grid--mes {
        grid-auto-rows: auto;
    }

    .odv-agenda__eventos {
        overflow: visible;
        max-height: none;
    }

    /* A day the filters emptied collapses like a day that was already empty, so a phone does not
       scroll through six headers with nothing under them. */
    .odv-agenda__grid--mes .odv-agenda__dia.is-filtrado-vacio:not(.is-hoy) {
        display: none;
    }

    /* On a phone each filter takes the whole width: four selects in a row are four slivers. */
    .odv-agenda__filtros {
        grid-template-columns: minmax(0, 1fr);
    }

    .odv-agenda__filtros-titulo,
    .odv-agenda__filtros-acciones,
    .odv-agenda__filtros .odv-field {
        grid-row: auto;
        grid-column: 1;
    }

    .odv-agenda__filtros-acciones {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    /* Seven columns in a phone are seven unreadable slivers: the month becomes a list of days that
       actually hold something, and the week stacks. */
    .odv-agenda__encabezado {
        display: none;
    }

    .odv-agenda__grid--mes,
    .odv-agenda__grid--semana {
        grid-template-columns: minmax(0, 1fr);
    }

    .odv-agenda__grid--mes .odv-agenda__dia.is-fuera,
    .odv-agenda__grid--mes .odv-agenda__dia:not(.is-hoy):has(.odv-agenda__fecha:only-child) {
        display: none;
    }

    .odv-agenda__bar {
        gap: 8px;
    }

    .odv-agenda__vistas {
        width: 100%;
    }

    .odv-agenda__vista {
        flex: 1;
        min-height: 44px;
        text-align: center;
    }
}

/* Time alerts in the listing. The legacy painted the whole row in pure red with white text, which
   does not reach the contrast ratio and says nothing to somebody who cannot tell the colours apart.
   Here the colour is a soft tint plus a left edge, and it always travels with a text and an icon. */
.odv-alerta {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.odv-alerta svg {
    width: 12px;
    height: 12px;
}

.odv-alerta--atencion {
    background: #fdf2dc;
    color: #8a5a00;
}

.odv-alerta--critico {
    background: #fdeaec;
    color: #a3182a;
}

.odv-alerta--detenida {
    background: #eef1fb;
    color: #33418a;
}

.odv-table tr.is-atencion > td:first-child {
    box-shadow: inset 3px 0 0 #e08e0b;
}

.odv-table tr.is-critico > td:first-child {
    box-shadow: inset 3px 0 0 var(--odv-primary);
}

.odv-table tr.is-detenida > td:first-child {
    box-shadow: inset 3px 0 0 #4254c5;
}

.odv-table tr.is-atencion {
    background: #fffaf1;
}

.odv-table tr.is-critico {
    background: #fff7f8;
}

.odv-table tr.is-detenida {
    background: #f7f8fe;
}

@media (max-width: 760px) {
    /* In a card the edge goes down the whole side, not on one cell. */
    .odv-table tr.is-atencion > td:first-child,
    .odv-table tr.is-critico > td:first-child,
    .odv-table tr.is-detenida > td:first-child {
        box-shadow: none;
    }

    .odv-table tr.is-atencion {
        border-left: 4px solid #e08e0b;
    }

    .odv-table tr.is-critico {
        border-left: 4px solid var(--odv-primary);
    }

    .odv-table tr.is-detenida {
        border-left: 4px solid #4254c5;
    }
}

/* Crew of a request: one line per assigned role, so three names do not run into one blob. */
.odv-crew-member {
    display: block;
    line-height: 1.35;
    white-space: nowrap;
}

/* Row actions menu. One button per row that opens its list, the same shape the operators already
   use in the system in use, instead of a strip of icons whose meaning has to be guessed. */
.odv-row-menu-cell {
    width: 1%;
    white-space: nowrap;
}

.odv-row-menu {
    position: relative;
    display: inline-block;
}

.odv-row-menu__toggle {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: #fff;
    color: var(--odv-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.odv-row-menu__toggle:hover,
.odv-row-menu.is-open .odv-row-menu__toggle {
    border-color: var(--odv-primary);
    color: var(--odv-primary);
}

.odv-row-menu__toggle svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
}

.odv-row-menu.is-open .odv-row-menu__toggle svg {
    transform: rotate(180deg);
}

/* Fixed, not absolute: the table scrolls horizontally with 13 columns, and an absolute menu is
   clipped by that overflow. Its position is set when it opens. */
.odv-row-menu__list {
    position: fixed;
    z-index: 1100;
    display: none;
    min-width: 176px;
    padding: 6px;
    border: 1px solid var(--odv-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}

.odv-row-menu.is-open .odv-row-menu__list {
    display: block;
}

.odv-row-menu__list a,
.odv-row-menu__list button {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--odv-text);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.odv-row-menu__list a:hover,
.odv-row-menu__list button:hover,
.odv-row-menu__list a:focus-visible,
.odv-row-menu__list button:focus-visible {
    background: var(--odv-surface-muted, #f4f5f7);
    color: var(--odv-primary);
}

.odv-row-menu__list svg {
    width: 15px;
    height: 15px;
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .odv-row-menu__toggle svg {
        transition: none;
    }
}

/* Floating notice shown when a submit is refused. It repeats, in a cordial tone, what the list
   above the button already says, for the operator who clicked without looking down. */
.odv-toast {
    position: fixed;
    right: 20px;
    /* Raised above the floating assistant button, which lives in the same corner. */
    bottom: 96px;
    z-index: 1200;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: min(380px, calc(100vw - 40px));
    padding: 14px 16px;
    border: 1px solid var(--odv-primary);
    border-left-width: 4px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
    color: #1f2937;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease;
}

.odv-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.odv-toast__body {
    flex: 1;
}

.odv-toast__title {
    display: block;
    margin-bottom: 2px;
    color: var(--odv-primary);
    font-weight: 600;
}

.odv-toast__close {
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--odv-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.odv-toast__close:hover {
    color: #1f2937;
}

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

@media (max-width: 600px) {
    .odv-toast {
        right: 16px;
        left: 16px;
        max-width: none;
    }
}

/* Missing mandatory fields after a submit attempt. The browser cannot show its own validation
   bubble on a Select2 control, so the form states what is missing and marks each field. */
.odv-form-errors {
    margin: var(--odv-space-3) 0 0;
    padding: 12px 14px;
    border: 1px solid var(--odv-primary);
    border-radius: 10px;
    background: rgba(240, 48, 64, .06);
    color: var(--odv-primary);
    font-size: 13px;
}

.odv-form-errors ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.odv-form-errors li {
    margin: 2px 0;
}

.odv-field.is-missing > span {
    color: var(--odv-primary);
}

.odv-field.is-missing input,
.odv-field.is-missing textarea,
.odv-field.is-missing select,
.odv-field.is-missing .select2-container--krajee-bs5 .select2-selection {
    border-color: var(--odv-primary);
}

/* Mandatory field mark. The IHCE badge says the field belongs to the RDA; this asterisk says the
   field cannot be left empty, whether the IHCE or the platform is the one demanding it. */
.odv-req {
    margin-left: 2px;
    color: var(--odv-primary);
    font-weight: 700;
}

.odv-req[hidden] {
    display: none;
}

.odv-field em {
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--odv-green-soft);
    color: var(--odv-green);
    font-size: 9.5px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.odv-field .select2-container {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 400;
}

.odv-field .select2-container--krajee-bs5 .select2-selection,
.odv-field .select2-container--krajee .select2-selection,
.odv-field .select2-container--default .select2-selection--single {
    min-height: 38px;
    display: flex;
    align-items: center;
    border: 1px solid var(--odv-border-strong);
    border-radius: var(--odv-radius-md);
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color: var(--odv-text);
    box-shadow: none;
}

.odv-field .select2-container--open .select2-selection,
.odv-field .select2-container--krajee-bs5.select2-container--focus .select2-selection,
.odv-field .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--odv-primary);
    box-shadow: var(--odv-focus-ring);
}

.odv-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    max-width: 100%;
    padding-left: 11px;
    padding-right: 30px;
    overflow: hidden;
    color: var(--odv-text);
    line-height: 36px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odv-field .select2-container--krajee-bs5 .select2-selection__rendered,
.odv-field .select2-container--krajee .select2-selection__rendered {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odv-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    min-height: 38px;
}

.select2-dropdown {
    border-color: var(--odv-border-strong);
    border-radius: var(--odv-radius-md);
    box-shadow: var(--odv-shadow-pop);
    overflow: hidden;
}

.odv-small-button,
.odv-primary-action,
.odv-login__button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--odv-radius-md);
    background: var(--odv-primary);
    color: #ffffff;
    font-family: var(--odv-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.odv-small-button {
    gap: 7px;
}

.odv-small-button .odv-icon {
    width: 16px;
    height: 16px;
}

.odv-small-button--ghost {
    border: 1px solid var(--odv-border-strong);
    background: #ffffff;
    color: var(--odv-graphite);
}

.odv-small-button--ghost:hover,
.odv-small-button--ghost:focus {
    background: var(--odv-surface-soft);
    border-color: var(--odv-border-strong);
}

.odv-primary-action {
    width: 100%;
    margin: 12px 0 10px;
    gap: 8px;
}

.odv-small-button:not(.odv-small-button--ghost):hover,
.odv-small-button:not(.odv-small-button--ghost):focus,
.odv-primary-action:hover,
.odv-primary-action:focus,
.odv-login__button:hover,
.odv-login__button:focus {
    background: var(--odv-primary-dark);
    outline: 0;
}

.odv-primary-action:disabled {
    background: #8792a0;
    cursor: not-allowed;
}

.odv-passkey-status {
    min-height: 18px;
    margin: 8px 0 0;
    color: var(--odv-muted);
    font-size: 13px;
    line-height: 1.35;
}

.odv-profile-stack {
    display: grid;
    gap: 18px;
}

.odv-passkey-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.odv-passkey-item,
.odv-empty-state {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
}

.odv-empty-state {
    grid-template-columns: minmax(0, 1fr);
}

.odv-passkey-item__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ffffff;
    color: var(--odv-primary);
}

.odv-passkey-item__icon .odv-icon {
    width: 22px;
    height: 22px;
}

.odv-passkey-item strong,
.odv-passkey-item span,
.odv-empty-state strong,
.odv-empty-state span {
    display: block;
}

.odv-passkey-item strong,
.odv-empty-state strong {
    color: var(--odv-graphite);
    font-size: 14px;
}

.odv-passkey-item span,
.odv-empty-state span {
    margin-top: 4px;
    color: var(--odv-muted);
    font-size: 13px;
}

.odv-push-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
}

.odv-push-card strong,
.odv-push-card small {
    display: block;
}

.odv-push-card strong {
    margin-bottom: 5px;
    color: var(--odv-graphite);
    font-size: 15px;
}

.odv-push-card small {
    color: var(--odv-muted);
    font-size: 13px;
    line-height: 1.35;
}

/* One line per datum: the label in a narrow column, the value beside it, a hairline between
   rows. A boxed card per field cost twice the height and said nothing more —a box 76px tall to
   hold the word "No". Consultas has read its records this way since it was built; the rest of
   the platform now shares the same rule instead of each module inventing its own. */
.odv-cx-ficha { padding: 4px 14px; }

.odv-cx-ficha > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
}

.odv-cx-facts {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    /* Without this the label of a long name ends where its value starts and the two read as one. */
    column-gap: 12px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35;
}

.odv-cx-facts dt,
.odv-cx-facts dd {
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid var(--odv-border);
}

.odv-cx-facts dt {
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 600;
}

.odv-cx-facts dd { overflow-wrap: anywhere; }
.odv-cx-facts dt:last-of-type,
.odv-cx-facts dd:last-of-type { border-bottom: 0; }

.odv-cx-facts__tel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    color: var(--odv-blue);
    font-weight: 650;
    text-decoration: none;
    /* Calling is done with a thumb: the padding gives the link the 44px it needs to be hit, and
       the negative margin takes them back from the layout so the line does not move. */
    padding-block: 13px;
    margin-block: -13px;
}

.odv-cx-facts__tel .odv-icon { width: 14px; height: 14px; }

/* A transfer carries fifteen fields. In one column that is a screen and a half of scroll on a
   desktop, so from 900px the list holds two label/value pairs per row and from 1400px three.
   The phone always keeps one: side by side nothing would be readable. */
@media (min-width: 761px) {
    .odv-cx-facts { grid-template-columns: 130px minmax(0, 1fr); }
}

@media (min-width: 900px) {
    .odv-cx-facts--densa {
        grid-template-columns: repeat(2, 118px minmax(0, 1fr));
        column-gap: 20px;
    }
}

@media (min-width: 1400px) {
    .odv-cx-facts--densa {
        grid-template-columns: repeat(3, 112px minmax(0, 1fr));
    }
}

/* ================= Record: fixed action, folded sections, two columns =================
   Written for the consultation record and now read by the transfer record too. Any screen that
   sends someone out to do something needs the same three pieces: the action always reachable,
   what is secondary out of the way, and a side column when there is room. They live here so the
   two modules cannot drift apart. */

.odv-cx-block { display: grid; gap: 12px; padding: 14px; }
.odv-cx-block__title { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Writes into the field beside it (the normal of one system); it acts, so it is a button. */
.odv-cx-link {
    border: 0; background: none; padding: 0; margin-left: 6px;
    color: var(--odv-primary); font: inherit; font-size: 11.5px; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}
.odv-cx-link:hover, .odv-cx-link:focus-visible { color: var(--odv-text); }
.odv-cx-muted,
.odv-cx-empty { margin: 0; color: var(--odv-muted); font-size: 13px; }

/* Secondary sections stay folded: whoever opens the record is going out, not reading history. */
.odv-cx-fold-panel,
.odv-cx-danger { display: block; padding: 2px 14px; }
.odv-cx-fold-panel[open],
.odv-cx-danger[open] { padding-bottom: 12px; }
.odv-cx-fold-panel[open] > * + *,
.odv-cx-danger[open] > * + * { margin-top: 10px; }

.odv-cx-fold-panel > summary,
.odv-cx-danger > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
}

.odv-cx-danger > summary { color: var(--odv-primary-dark); }
.odv-cx-danger form { display: grid; gap: 10px; }

/* The main action sits above the tab bar, within thumb reach, and never under it. */
.odv-cx-startbar {
    position: fixed;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 1030;
    padding: 8px 12px;
    border-top: 1px solid var(--odv-border);
    background: rgba(255, 255, 255, .97);
}

.odv-cx:has(.odv-cx-startbar) { padding-bottom: 96px; }

.odv-cx-columns { display: grid; gap: 14px; }

.odv-cx-columns__main,
.odv-cx-columns__side {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
}

/* A field with a value below it, for long text a facts row would squeeze. */
.odv-cx-dl { display: grid; gap: 4px; margin: 0; }

.odv-cx-dl dt {
    margin-top: 8px;
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.odv-cx-dl dd { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

/* A notice on a record: what is happening, or why there is nothing to press. It exists because
   the records were borrowing .odv-home__notice, which belongs to the dashboard block, is amber
   whatever it says, and squashes its icon to a dot once the text wraps. Any module that has to
   explain itself on a record needs this, so it lives here and not in one module's stylesheet.
   The tones are the ones the chips already use, so a notice and a chip never disagree. */
.odv-cx-aviso {
    display: flex;
    /* Aligned to the first line: centred, the icon floated mid-paragraph on a four-line notice. */
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--odv-radius-md);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Never shrink: inside a flex row a wrapping text was squeezing the icon down to a dot. */
.odv-cx-aviso > .odv-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.odv-cx-aviso > span { min-width: 0; overflow-wrap: anywhere; }
.odv-cx-aviso strong { font-weight: 650; }

/* Something is under way and going well. */
.odv-cx-aviso--info {
    border-color: var(--odv-blue);
    background: var(--odv-blue-soft);
    color: var(--odv-blue);
}

/* Something needs attention. */
.odv-cx-aviso--alerta {
    border-color: var(--odv-amber);
    background: var(--odv-amber-soft);
    color: var(--odv-amber);
}

/* Nothing is wrong, but this person cannot act: neutral, never alarming. */
.odv-cx-aviso--bloqueo {
    border-color: var(--odv-border-strong);
    background: var(--odv-surface-soft);
    color: var(--odv-muted);
}

.odv-cx-aviso--bloqueo strong { color: var(--odv-text); }

/* A confirmation the platform draws itself. Copied here from consultas.css unchanged: the native
   window.confirm carries none of the product's styling and looks like a browser error, and any
   module that asks before a destructive move needs the same box. */
.odv-cx-dialog {
    width: min(480px, calc(100vw - 32px));
    padding: 18px;
    border: 0;
    border-radius: var(--odv-radius-lg);
    box-shadow: var(--odv-shadow-pop);
}

.odv-cx-dialog::backdrop { background: rgba(16, 24, 40, .45); }
.odv-cx-dialog form { display: grid; gap: 12px; }
.odv-cx-dialog h2 { margin: 0; font-size: 17px; font-weight: 700; }
.odv-cx-dialog p { margin: 0; color: var(--odv-muted); font-size: 14px; line-height: 1.45; }
.odv-cx-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* The list of movements of a record. Copied here from consultas.css unchanged: the transfer
   record reads its history the same way, and the rule stopped belonging to one module. */
.odv-cx-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.odv-cx-timeline li { display: grid; gap: 3px; padding-left: 10px; border-left: 2px solid var(--odv-border-strong); font-size: 13px; }
.odv-cx-timeline span { color: var(--odv-muted); font-size: 12px; overflow-wrap: anywhere; }
.odv-cx-timeline p { margin: 0; }

/* The form that adds a note, inside its fold. */
.odv-cx-add { display: grid; gap: 10px; }

/* A hidden element is hidden: a display rule of a component must not bring it back. */
.odv-cx [hidden] { display: none !important; }

/* Phones only: 16px keeps iOS from zooming the page when a field takes focus, and 44px is the
   touch target. On wider screens the fields keep the request form size (38px, 13.5px). */
@media (max-width: 760px) {
    .odv-cx .odv-field input,
    .odv-cx .odv-field select,
    .odv-cx .odv-field textarea { min-height: 44px; font-size: 16px; }
}

@media (min-width: 761px) {
    .odv-cx-startbar { position: static; max-width: 420px; padding: 0; border: 0; background: none; }
    .odv-cx:has(.odv-cx-startbar) { padding-bottom: 24px; }
}

@media (min-width: 1100px) {
    .odv-cx-columns { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ================= Agenda: chips, buttons, day strip and cards =================
   Written for the consultation agenda and now read by the transfers agenda too. One
   definition, so the two screens cannot drift apart. */

/* ---------- Chips ---------- */
.odv-cx-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--odv-surface-soft);
    color: var(--odv-muted);
}

.odv-cx-chip .odv-icon { width: 13px; height: 13px; }
.odv-cx-chip--blue { background: var(--odv-blue-soft); color: var(--odv-blue); }
.odv-cx-chip--amber { background: var(--odv-amber-soft); color: var(--odv-amber); }
.odv-cx-chip--green { background: var(--odv-green-soft); color: var(--odv-green); }
.odv-cx-chip--red { background: var(--odv-primary-soft); color: var(--odv-primary-dark); }
.odv-cx-chip--outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Buttons: 44px targets everywhere ---------- */
.odv-cx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--odv-radius-md);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.odv-cx-btn .odv-icon { width: 18px; height: 18px; }
.odv-cx-btn:focus-visible { outline: none; box-shadow: var(--odv-focus-ring); }
.odv-cx-btn[disabled] { opacity: .5; cursor: not-allowed; }
.odv-cx-btn--primary { background: var(--odv-primary); color: #fff; }
.odv-cx-btn--primary:hover { background: var(--odv-primary-dark); color: #fff; }
.odv-cx-btn--ghost { background: var(--odv-surface); border-color: var(--odv-border-strong); color: var(--odv-text); }
.odv-cx-btn--ghost:hover { background: var(--odv-surface-soft); color: var(--odv-text); }
.odv-cx-btn--success { background: var(--odv-green); color: #fff; }
.odv-cx-btn--danger { background: var(--odv-primary-soft); border-color: rgba(240, 48, 64, .3); color: var(--odv-primary-dark); }
.odv-cx-btn--block { width: 100%; }

/* ---------- Day strip ---------- */
.odv-cx-daynav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.odv-cx-daynav__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--odv-radius-md);
    color: var(--odv-text);
}

.odv-cx-daynav__arrow:hover { background: var(--odv-surface); }

.odv-cx-daynav__strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.odv-cx-daynav__day {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 0;
    border-radius: var(--odv-radius-md);
    color: var(--odv-muted);
    text-decoration: none;
    font-size: 11px;
    text-transform: capitalize;
}

.odv-cx-daynav__day strong { font-size: 17px; color: var(--odv-text); }
.odv-cx-daynav__day.is-today strong { color: var(--odv-primary); }
.odv-cx-daynav__day.is-active { background: var(--odv-text); color: #fff; }
.odv-cx-daynav__day.is-active strong { color: #fff; }

.odv-cx-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 14px;
    color: var(--odv-muted);
    font-size: 13px;
}

.odv-cx-summary strong { color: var(--odv-text); font-size: 15px; }
.odv-cx-summary__today { margin-left: auto; font-weight: 650; color: var(--odv-primary); }

/* ---------- Cards ---------- */
.odv-cx-group { margin-bottom: 18px; }

.odv-cx-group > h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--odv-amber);
}

.odv-cx-group > h2 span {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--odv-amber-soft);
}

.odv-cx-group > h2 .odv-icon { width: 16px; height: 16px; }

.odv-cx-list { display: grid; gap: 10px; }

.odv-cx-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--odv-border);
    border-left: 4px solid var(--odv-border-strong);
    border-radius: var(--odv-radius-lg);
    background: var(--odv-surface);
    box-shadow: var(--odv-shadow-sm);
}

.odv-cx-card.is-asignado { border-left-color: var(--odv-blue); }
.odv-cx-card.is-proceso { border-left-color: var(--odv-amber); }
.odv-cx-card.is-finalizado { border-left-color: var(--odv-green); }
.odv-cx-card.is-fallido { border-left-color: var(--odv-primary); opacity: .85; }
.odv-cx-card.is-urgente { box-shadow: 0 0 0 1px rgba(240, 48, 64, .25), var(--odv-shadow-sm); }

/* Follow-up teleconsultations use the same card; their states are named in the feminine. */
.odv-cx-card.is-pendiente { border-left-color: var(--odv-amber); }
.odv-cx-card.is-asignada { border-left-color: var(--odv-blue); }
.odv-cx-card.is-finalizada { border-left-color: var(--odv-green); }
.odv-cx-card.is-fallida { border-left-color: var(--odv-primary); opacity: .85; }
.odv-cx-card.is-cancelada { border-left-color: var(--odv-graphite); opacity: .85; }

.odv-cx-card__time { display: grid; align-content: start; gap: 2px; }
.odv-cx-card__time strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.odv-cx-card__time span { color: var(--odv-muted); font-size: 11.5px; }
.odv-cx-card__body { min-width: 0; display: grid; gap: 4px; }
.odv-cx-card__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.odv-cx-card__name { margin: 2px 0 0; font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.odv-cx-card__meta,
.odv-cx-card__address,
.odv-cx-card__reason { margin: 0; color: var(--odv-muted); font-size: 13px; }
.odv-cx-card__address { display: flex; gap: 4px; align-items: flex-start; }
.odv-cx-card__address .odv-icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; }
.odv-cx-card__reason { color: var(--odv-text); }

.odv-cx-card__actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.odv-cx-card__actions > *,
.odv-cx-card__form { flex: 1 1 0; }
.odv-cx-card__form .odv-cx-btn { width: 100%; }

@media (min-width: 761px) {
    .odv-cx-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
    .odv-cx-daynav { max-width: 560px; }
}

.odv-catalog-grid {
    display: grid;
    grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
    gap: 18px;
}

.odv-catalog-list {
    display: grid;
    align-content: start;
    gap: 8px;
}

.odv-catalog-link {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
    color: var(--odv-graphite);
    text-decoration: none;
}

.odv-catalog-link.is-active,
.odv-catalog-link:hover,
.odv-catalog-link:focus {
    border-color: var(--odv-primary);
    background: #fff7f8;
    outline: 0;
}

.odv-catalog-link strong,
.odv-catalog-link span {
    display: block;
}

.odv-catalog-link strong {
    font-size: 14px;
}

.odv-catalog-link span,
.odv-table-muted {
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 700;
}

.odv-catalog-detail {
    min-width: 0;
}

.odv-catalog-summary {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
}

/* Catalog items one page at a time, with a search (2026-10-14). */
.odv-catalog-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 6px;
}

.odv-catalog-search .odv-field {
    flex: 1 1 240px;
    margin: 0;
}

.odv-catalog-pages {
    justify-content: flex-end;
    margin-top: 12px;
}

.odv-ihce-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--odv-border);
    border-radius: 8px;
    background: var(--odv-surface-soft);
}

.odv-catalog-summary h3,
.odv-catalog-summary p {
    margin: 0;
}

.odv-catalog-summary h3 {
    color: var(--odv-graphite);
    font-size: 18px;
}

.odv-catalog-summary p {
    margin-top: 4px;
    color: var(--odv-muted);
    font-size: 13px;
}

.odv-ihce-strip__label,
.odv-ihce-strip__meta strong,
.odv-ihce-strip__meta small,
.odv-ihce-cell__content strong,
.odv-ihce-cell__content span {
    display: block;
    min-width: 0;
}

.odv-ihce-strip__label {
    width: max-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--odv-primary-dark);
    font-size: 12px;
    font-weight: 850;
}

.odv-ihce-strip__meta {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.odv-ihce-strip__meta strong,
.odv-ihce-strip__meta small,
.odv-ihce-cell__content strong,
.odv-ihce-cell__content span {
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.odv-ihce-strip__meta small {
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 700;
}

.odv-table td.odv-ihce-cell {
    min-width: 190px;
    max-width: 320px;
    white-space: normal;
    vertical-align: top;
}

.odv-ihce-cell__content {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.odv-side-divider {
    height: 1px;
    margin: 20px 0;
    background: var(--odv-border);
}

.odv-subgroup {
    grid-column: 1 / -1;
    margin: 6px 0 -2px;
    padding-top: 12px;
    border-top: 1px solid var(--odv-border);
    color: var(--odv-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.odv-field--span2 {
    grid-column: span 2;
}

.odv-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 0;
    background-color: var(--odv-graphite);
    background-image:
        linear-gradient(rgba(31, 41, 51, 0.42), rgba(31, 41, 51, 0.42)),
        url("../img/login-background-opensalud.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

body:has(.odv-login--split) .odv-auth-shell,
.odv-auth-shell--full {
    display: block;
    padding: 0;
    background: var(--odv-surface);
}

.odv-login {
    width: min(420px, calc(100% - 32px));
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(31, 41, 51, 0.24);
}

.odv-login--split {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

.odv-login__visual {
    min-width: 0;
    min-height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
    padding: 40px 40px 28px;
    border-right: 1px solid var(--odv-border);
    background:
        radial-gradient(circle at 50% 58%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(160deg, var(--odv-primary-soft) 0%, #f6f8fb 48%, #eef2f6 100%);
}

.odv-login__visual-figure {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
}

.odv-login__visual-image {
    width: min(100%, 440px);
    height: auto;
    max-height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(31, 41, 51, 0.10));
}

.odv-login__visual-content {
    max-width: 440px;
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.odv-login__eyebrow,
.odv-login__kicker {
    display: inline-flex;
    width: fit-content;
    color: var(--odv-primary-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.odv-login__eyebrow {
    padding: 6px 10px;
    border: 1px solid rgba(240, 48, 64, 0.18);
    border-radius: 999px;
    background: #ffffff;
}

.odv-login__visual-content h2 {
    max-width: 420px;
    margin: 0;
    color: var(--odv-graphite);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.odv-login__visual-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--odv-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--odv-graphite);
    font-size: 12px;
    font-weight: 700;
}

.odv-login__visual-note .odv-icon {
    width: 16px;
    height: 16px;
    color: var(--odv-green);
}

.odv-login__panel {
    padding: 32px 34px 22px;
    border-radius: 8px;
    background: #ffffff;
}

.odv-login--split .odv-login__panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 48px 28px;
    border-radius: 0;
}

.odv-login--split .odv-login__main {
    width: 100%;
    max-width: 410px;
    margin: auto;
}

.odv-login__brand {
    width: 178px;
    max-width: 100%;
    margin: 0 auto 24px;
}

.odv-login--split .odv-login__brand {
    width: 150px;
    margin: 0 auto 24px;
}

.odv-login__logo {
    width: 100%;
    height: auto;
    display: block;
}

.odv-login h1 {
    font-size: 28px;
    line-height: 1.16;
}

.odv-login h2 {
    font-size: 32px;
    line-height: 1.16;
}

.odv-login__heading {
    margin-bottom: 16px;
}

.odv-login--split .odv-login__heading {
    display: grid;
    gap: 6px;
    margin-bottom: 22px;
}

.odv-login--split .odv-login__heading h1 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.035em;
}

.odv-login__heading p {
    margin: 6px 0 0;
    color: var(--odv-muted);
    font-size: 14px;
    font-weight: 750;
}

.odv-locked-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
}

.odv-locked-user__avatar {
    width: 64px;
    height: 64px;
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--odv-primary-soft);
    box-shadow: 0 0 0 1px var(--odv-border), 0 6px 16px rgba(31, 41, 51, 0.08);
    color: var(--odv-primary-dark);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.odv-locked-user__badge {
    width: 26px;
    height: 26px;
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--odv-primary);
    color: #ffffff;
}

.odv-locked-user__badge .odv-icon {
    width: 12px;
    height: 12px;
    stroke-width: 2.4;
}

.odv-login--locked .odv-locked-user h1 {
    margin: 4px 0;
    font-size: 28px;
    letter-spacing: -0.035em;
}

.odv-locked-user p {
    color: var(--odv-muted);
    font-size: 14px;
    line-height: 1.5;
}

.odv-locked-user strong {
    color: var(--odv-text);
    font-weight: 700;
}

.odv-locked-user__switch {
    margin: 16px 0 0 !important;
    color: var(--odv-muted);
    font-size: 13px;
    text-align: center;
}

.odv-locked-user__switch a {
    color: var(--odv-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.odv-locked-user__switch a:hover,
.odv-locked-user__switch a:focus-visible {
    text-decoration: underline;
}

.odv-passkey-button {
    min-height: 46px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--odv-border-strong);
    border-radius: var(--odv-radius-md);
    background: #ffffff;
    color: var(--odv-graphite);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.odv-passkey-button:hover,
.odv-passkey-button:focus-visible {
    border-color: var(--odv-primary);
    color: var(--odv-primary-dark);
    outline: 0;
    box-shadow: var(--odv-focus-ring);
}

.odv-passkey-button:active {
    transform: translateY(1px);
}

.odv-passkey-button__icon svg,
.odv-passkey-button__icon {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    color: var(--odv-primary);
}

.odv-login__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 600;
}

.odv-login__divider::before,
.odv-login__divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--odv-border);
}

.odv-login__form {
    display: grid;
    gap: 16px;
}

.odv-login__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.odv-login__label-row a {
    color: var(--odv-primary-dark);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.odv-login__label-row a:hover,
.odv-login__label-row a:focus-visible {
    text-decoration: underline;
}

.odv-login__input {
    position: relative;
}

.odv-login__input > .odv-icon {
    width: 17px;
    height: 17px;
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--odv-muted);
    pointer-events: none;
}

.odv-login__input:focus-within > .odv-icon {
    color: var(--odv-primary);
}

.odv-login .odv-field input {
    min-height: 46px;
    padding: 0 13px 0 40px;
    background: var(--odv-surface-soft);
    font-size: 14px;
}

.odv-login .odv-field input:focus {
    background: #ffffff;
}

.odv-login .odv-field input[aria-invalid="true"] {
    border-color: var(--odv-primary);
}

.odv-password-input {
    position: relative;
}

.odv-password-input input {
    padding-right: 84px !important;
}

.odv-password-toggle {
    min-height: 34px;
    position: absolute;
    top: 6px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--odv-primary-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.odv-password-toggle:hover,
.odv-password-toggle:focus-visible {
    background: var(--odv-primary-soft);
    outline: 0;
}

.odv-login__error {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(240, 48, 64, 0.25);
    border-radius: var(--odv-radius-md);
    background: var(--odv-primary-soft);
    color: var(--odv-primary-dark);
    font-size: 13px;
    font-weight: 600;
}

.odv-login__error .odv-icon,
.odv-login__notice .odv-icon {
    flex: 0 0 auto;
}

.odv-login__notice {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(21, 122, 77, 0.25);
    border-radius: var(--odv-radius-md);
    background: var(--odv-green-soft);
    color: var(--odv-green);
    font-size: 13px;
    font-weight: 600;
}

.odv-login__text-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--odv-primary-dark);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.odv-login__button {
    min-height: 46px;
    gap: 8px;
    font-size: 14px;
}

.odv-login__remember {
    margin-top: -2px;
    color: var(--odv-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.odv-login__spinner {
    width: 16px;
    height: 16px;
    display: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: odv-login-spin 0.7s linear infinite;
}

.odv-login__form.is-loading .odv-login__button {
    opacity: 0.8;
    pointer-events: none;
}

.odv-login__form.is-loading .odv-login__spinner {
    display: block;
}

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

.odv-login__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
    align-items: center;
    color: var(--odv-graphite);
    font-size: 13px;
}

.odv-login__options--center {
    justify-content: center;
    margin-top: 12px;
}

.odv-login__options a {
    color: var(--odv-primary-dark);
    font-weight: 800;
    text-decoration: none;
}

.odv-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.odv-check--field {
    min-height: 40px;
    align-self: end;
    padding: 0 11px;
    border: 1px solid var(--odv-border);
    border-radius: 6px;
    background: #ffffff;
}

.odv-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--odv-primary);
}

.odv-switch-field {
    min-height: 38px;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--odv-border-strong);
    border-radius: var(--odv-radius-md);
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: var(--odv-text);
    color: var(--odv-graphite);
    font-weight: 800;
}

.odv-switch-field input[type="checkbox"] {
    position: absolute;
    /* The generic input rule gives it width: 100%; hidden and absolute, it still pushed the page
       425px wide on a phone. */
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.odv-switch-field__control {
    width: 38px;
    height: 21px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #d9dee4;
    transition: background 0.18s ease;
}

.odv-switch-field__control::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(21, 31, 45, 0.24);
    transition: transform 0.18s ease;
}

.odv-switch-field input[type="checkbox"]:checked + .odv-switch-field__control {
    background: var(--odv-primary);
}

.odv-switch-field input[type="checkbox"]:checked + .odv-switch-field__control::after {
    transform: translateX(17px);
}

.odv-switch-field input[type="checkbox"]:focus-visible + .odv-switch-field__control {
    outline: 2px solid rgba(240, 48, 64, 0.34);
    outline-offset: 2px;
}

.odv-login__footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--odv-border);
    color: var(--odv-muted);
    font-size: 12px;
}

.odv-login__security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px !important;
    color: var(--odv-muted);
    font-size: 11.5px;
    text-align: center;
}

.odv-login__security-note .odv-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--odv-green);
}

.odv-login--split .odv-login__footer {
    max-width: 410px;
    margin-right: auto;
    margin-left: auto;
}

.odv-login__powered {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--odv-muted);
    font-size: 12px;
    font-weight: 800;
}

.odv-login__motfware {
    width: auto;
    height: 20px;
    display: block;
}

.odv-footer {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    border-top: 1px solid var(--odv-border);
    background: var(--odv-surface);
    color: var(--odv-muted);
    font-size: 13px;
}

.odv-footer__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.odv-footer__logo {
    width: auto;
    height: 22px;
    display: block;
}

@media (max-width: 1040px) {
    .odv-user-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odv-user-filter-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .odv-user-filter-panel .odv-small-button {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .odv-workspace-grid {
        grid-template-columns: 1fr;
    }

    .odv-request-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odv-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odv-request-branch:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odv-inline-patient {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .odv-login--split {
        min-height: 100dvh;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .odv-login__visual {
        min-height: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        padding: 24px 32px;
        border-right: 0;
        border-bottom: 1px solid var(--odv-border);
    }

    .odv-login__visual-figure {
        width: 132px;
        flex: 0 0 auto;
        order: -1;
    }

    .odv-login__visual-content {
        justify-items: start;
        text-align: left;
    }

    .odv-login__visual-content h2 {
        font-size: 22px;
    }

    .odv-login__visual-note {
        display: none;
    }

    .odv-login--split .odv-login__panel {
        padding: 32px 24px 24px;
    }
}

@media (max-width: 760px) {
    body:has(.odv-auth-shell) {
        overflow: auto;
    }

    .odv-shell {
        grid-template-columns: 1fr;
    }

    .odv-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 30;
        width: min(300px, 86vw);
        height: 100vh;
        transform: translateX(-105%);
        transition: transform 0.18s ease;
        box-shadow: 18px 0 42px rgba(31, 41, 51, 0.18);
    }

    body.odv-sidebar-open .odv-sidebar {
        transform: translateX(0);
    }

    /* Over the app-style bar (z-index 1040), otherwise the bar covers the drawer and its last
       entries cannot be reached. */
    .odv-sidebar {
        z-index: 1050;
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
    }

    .odv-sidebar-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 1045;
        display: block;
        background: rgba(16, 24, 40, 0.45);
    }

    .odv-topbar {
        min-height: 62px;
        display: flex;
        padding: 10px 14px;
    }

    .odv-page-title span,
    .odv-profile-button__text,
    .odv-topbar-status {
        display: none;
    }

    .odv-topbar__actions {
        margin-left: auto;
    }

    .odv-dashboard {
        padding: 18px 14px 24px;
    }

    .odv-user-toolbar,
    .odv-user-summary,
    .odv-user-filter-panel {
        grid-template-columns: 1fr;
    }

    .odv-patient-admin .odv-user-toolbar {
        grid-template-columns: 1fr 40px;
    }

    .odv-patient-new-button,
    .odv-patient-clear-button {
        width: 100%;
        grid-column: 1 / -1;
    }

    .odv-user-filter-panel .odv-small-button {
        width: 100%;
        justify-self: stretch;
    }

    .odv-primary-action--fit {
        width: 100%;
    }

    .odv-drawer__panel {
        width: 100vw;
        padding: 18px 14px;
    }

    .odv-dashboard-header,
    .odv-metric-grid,
    .odv-catalog-grid {
        grid-template-columns: 1fr;
    }

    /* On a phone the state cards go two by two and lose height: otherwise twelve cards push the
       filters and the list a whole screen down. */
    .odv-metric-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .odv-metric-grid--compact .odv-metric-card {
        min-height: 60px;
        padding: 10px 12px;
        gap: 10px;
    }

    .odv-metric-grid--compact .odv-metric-card strong {
        font-size: 22px;
    }

    .odv-metric-grid--compact .odv-metric-card__icon {
        width: 32px;
        height: 32px;
    }

    .odv-profile-dropdown {
        right: -46px;
    }

    .odv-footer {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 12px 16px;
    }
}

@media (max-width: 520px) {
    .odv-dashboard h1 {
        font-size: 26px;
    }

    .odv-dashboard-header > div:first-child,
    .odv-status-card,
    .odv-panel,
    .odv-login__panel {
        padding: 20px;
    }

    .odv-login__visual {
        gap: 14px;
        padding: 18px 20px;
    }

    .odv-login__visual-figure {
        width: 92px;
    }

    .odv-login__visual-content h2 {
        font-size: 18px;
    }

    .odv-login__eyebrow {
        display: none;
    }

    .odv-login--split .odv-login__panel {
        padding: 28px 22px 20px;
    }

    .odv-login--split .odv-login__brand {
        width: 150px;
        margin: 0 auto 20px;
    }

    .odv-login--split .odv-login__heading h1 {
        font-size: 28px;
    }

    .odv-inline-form,
    .odv-form-grid,
    .odv-filter-grid,
    .odv-request-section,
    .odv-inline-patient,
    .odv-request-branch:not([hidden]) {
        grid-template-columns: 1fr;
    }

    .odv-request-section--notes > .odv-field {
        grid-column: 1 / -1;
    }

    .odv-list-header,
    .odv-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .odv-passkey-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .odv-passkey-item .odv-small-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .odv-auth-shell {
        min-height: 100vh;
        padding: 16px 0;
        overflow-y: auto;
    }

    .odv-login {
        width: calc(100% - 28px);
    }

    .odv-auth-shell--full {
        padding: 0;
    }

    .odv-login--split {
        width: 100%;
    }

    .odv-login__footer,
    .odv-login__options {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── Paginación ──────────────────────────────────────────────────────────── */
.odv-pager {
    display: flex;
    justify-content: flex-end;
    padding: 14px 4px 4px;
}

.odv-pager__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.odv-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--odv-border);
    border-radius: 9px;
    background: var(--odv-surface, #fff);
    color: var(--odv-text, #1d3a5f);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.odv-pager__link:hover {
    border-color: var(--odv-accent, #1f8a70);
    background: var(--odv-surface-soft, #f4f7fa);
}

.odv-pager__item.active .odv-pager__link {
    background: var(--odv-accent, #1f8a70);
    border-color: var(--odv-accent, #1f8a70);
    color: #fff;
}

.odv-pager__link.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.odv-patient-lookup--ihce:not(:empty) {
    margin-top: 6px;
}

/* ── Historia clínica (IHCE) ─────────────────────────────────────────────── */
.odv-history-list {
    margin: 6px 0 0;
    padding-left: 18px;
}

.odv-history-list li {
    margin: 4px 0;
    font-size: 14px;
}

.odv-history-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.odv-history-actions form {
    margin: 0;
}

/* Botones de descarga por tipo de documento (icono propio, estilo minimalista) */
.odv-doc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--odv-border-strong);
    border-radius: var(--odv-radius-sm);
    background: var(--odv-surface);
    color: var(--odv-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.odv-doc-button .odv-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.odv-doc-button:hover,
.odv-doc-button:focus-visible {
    color: var(--odv-primary);
    border-color: var(--odv-primary);
    background: var(--odv-primary-soft);
    outline: 0;
}

.odv-doc-button:focus-visible {
    box-shadow: var(--odv-focus-ring);
}

/* Un color por tipo de documento: icono coloreado en reposo, tinte suave al interactuar */
.odv-doc-button--historia {
    --odv-doc-color: var(--odv-blue);
    --odv-doc-soft: var(--odv-blue-soft);
}

.odv-doc-button--formula {
    --odv-doc-color: var(--odv-green);
    --odv-doc-soft: var(--odv-green-soft);
}

.odv-doc-button--incapacidad {
    --odv-doc-color: var(--odv-amber);
    --odv-doc-soft: var(--odv-amber-soft);
}

.odv-doc-button--ordenes {
    --odv-doc-color: var(--odv-violet);
    --odv-doc-soft: var(--odv-violet-soft);
}

.odv-doc-button--plan {
    --odv-doc-color: var(--odv-teal);
    --odv-doc-soft: var(--odv-teal-soft);
}

.odv-doc-button[class*="odv-doc-button--"] {
    color: var(--odv-doc-color, var(--odv-muted));
}

.odv-doc-button[class*="odv-doc-button--"]:hover,
.odv-doc-button[class*="odv-doc-button--"]:focus-visible {
    color: var(--odv-doc-color, var(--odv-primary));
    border-color: var(--odv-doc-color, var(--odv-primary));
    background: var(--odv-doc-soft, var(--odv-primary-soft));
}

.odv-doc-button--primary {
    border-color: var(--odv-doc-color, var(--odv-border-strong));
    background: var(--odv-doc-soft, var(--odv-surface-soft));
}

.odv-doc-button--labelled {
    width: auto;
    gap: 7px;
    padding: 0 12px;
    font-family: var(--odv-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--odv-graphite);
}

.odv-doc-button.odv-doc-button--labelled {
    color: var(--odv-graphite);
}

.odv-doc-button--labelled .odv-icon {
    color: var(--odv-doc-color, var(--odv-muted));
}

.odv-doc-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.odv-history-actions .odv-submit-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.odv-table.odv-history-table {
    table-layout: auto;
    width: 100%;
}

.odv-history-table__column-historia,
.odv-history-table__header-historia {
    width: 10%;
    min-width: 78px;
}

.odv-history-table__column-solicitud,
.odv-history-table__header-solicitud {
    width: 11%;
    min-width: 92px;
}

.odv-history-table__column-fecha,
.odv-history-table__header-fecha,
.odv-table .odv-history-table__cell-fecha {
    width: 180px;
    min-width: 108px;
}

.odv-history-table__column-tipo,
.odv-history-table__header-tipo,
.odv-table .odv-history-table__cell-tipo {
    width: 130px;
    min-width: 118px;
}

.odv-history-table__column-motivo,
.odv-history-table__header-motivo,
.odv-table .odv-history-table__cell-motivo {
    width: auto;
    min-width: 210px;
}

.odv-history-table__column-acciones,
.odv-history-table__header-acciones,
.odv-table .odv-history-table__cell-acciones {
    width: 1%;
    min-width: 0;
    white-space: nowrap;
}

.odv-table .odv-history-table__cell,
.odv-table .odv-history-table__header {
    overflow-wrap: anywhere;
}

.odv-table .odv-history-table__cell {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    border-top: 1px solid var(--odv-border);
}

.odv-table.odv-history-table tbody tr:first-child .odv-history-table__cell {
    border-top: 0;
}

.odv-table.odv-history-table .odv-history-table__header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--odv-muted);
}

.odv-table.odv-history-table tbody tr:nth-child(even) {
    background: var(--odv-surface-soft);
}

.odv-table.odv-history-table tbody tr:hover {
    background: var(--odv-primary-soft);
}

.odv-table .odv-history-table__cell-fecha {
    font-variant-numeric: tabular-nums;
    color: var(--odv-graphite);
}

.odv-history-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid var(--odv-border-strong);
    border-radius: 999px;
    background: var(--odv-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--odv-graphite);
    white-space: nowrap;
}

.odv-table .odv-history-table__cell-fecha,
.odv-table .odv-history-table__cell-tipo {
    white-space: normal;
}

.odv-table td.odv-history-table__cell-motivo,
.odv-table td.odv-history-reason {
    max-width: 360px;
    white-space: normal;
    word-break: break-word;
}
.odv-field--action {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Tablas como tarjetas en móvil (estándar Motfware) ───────────────────── */
@media (max-width: 760px) {
    .odv-table-wrap {
        overflow-x: visible;
    }

    .odv-patient-admin .odv-table,
    .odv-patient-admin .odv-table tbody,
    .odv-patient-admin .odv-table tr,
    .odv-patient-admin .odv-table td,
    .odv-request-index .odv-table,
    .odv-request-index .odv-table tbody,
    .odv-request-index .odv-table tr,
    .odv-request-index .odv-table td {
        display: block;
        width: 100%;
    }

    .odv-patient-admin .odv-table thead,
    .odv-request-index .odv-table thead {
        display: none;
    }

    .odv-patient-admin .odv-table tr,
    .odv-request-index .odv-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--odv-border);
        border-radius: 12px;
        padding: 10px 12px;
        background: var(--odv-surface, #fff);
    }

    .odv-patient-admin .odv-table td,
    .odv-request-index .odv-table td {
        border-bottom: 0;
        padding: 6px 0;
        white-space: normal;
    }

    /* As cards there is no table to keep inside the panel, so nothing is cut. */
    .odv-request-index .odv-table {
        table-layout: auto;
    }

    .odv-request-index .odv-table .odv-cell-corta {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .odv-patient-admin .odv-table td + td,
    .odv-request-index .odv-table td + td {
        border-top: 1px dashed var(--odv-border);
    }

    .odv-patient-admin .odv-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: var(--odv-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .odv-table.odv-history-table tbody tr:nth-child(even),
    .odv-table.odv-history-table tbody tr:hover {
        background: var(--odv-surface);
    }

    .odv-table.odv-history-table tbody tr .odv-history-table__cell,
    .odv-table.odv-history-table tbody tr:first-child .odv-history-table__cell {
        border-top: 0;
    }

    .odv-patient-admin .odv-table td + td {
        border-top: 1px dashed var(--odv-border);
    }

    .odv-history-actions {
        gap: 8px;
    }

    .odv-history-actions .odv-doc-button {
        width: 44px;
        height: 44px;
    }

    .odv-history-actions .odv-doc-button--labelled {
        width: auto;
        min-height: 44px;
        height: auto;
    }

    .odv-pager {
        justify-content: center;
    }
}

/* Login a pantalla completa: sin scroll vertical en escritorio */
.odv-passkey-status:empty {
    min-height: 0;
    margin: 0;
}

@media (min-width: 901px) {
    body:has(.odv-login--split) {
        overflow: hidden;
    }

    .odv-login--split {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
    }

    .odv-login--split .odv-login__panel {
        padding: 28px 48px 18px;
        overflow-y: auto;
    }

    .odv-login--split .odv-login__brand {
        width: 150px;
        margin: 0 auto 16px;
    }

    .odv-login--split .odv-login__heading {
        gap: 4px;
        margin-bottom: 18px;
    }

    .odv-login--split .odv-login__heading h1 {
        font-size: 28px;
    }

    .odv-login--split .odv-login__form {
        gap: 13px;
    }

    .odv-login--split .odv-login__divider {
        margin: 14px 0;
    }

    .odv-login--split .odv-login__security-note {
        margin-top: 14px !important;
    }

    .odv-login--split .odv-login__visual {
        padding: 28px 40px 22px;
    }
}

@media (min-width: 901px) and (max-height: 640px) {
    .odv-login--split .odv-login__panel {
        padding: 18px 48px 12px;
    }

    .odv-login--split .odv-login__brand {
        width: 124px;
        margin: 0 auto 10px;
    }

    .odv-login--split .odv-login__heading {
        margin-bottom: 12px;
    }

    .odv-login--split .odv-login__heading h1 {
        font-size: 24px;
    }

    .odv-login--split .odv-login__form {
        gap: 10px;
    }

    .odv-login .odv-field input,
    .odv-login__button,
    .odv-passkey-button {
        min-height: 40px;
    }

    .odv-login--split .odv-login__divider {
        margin: 10px 0;
    }

    .odv-login--split .odv-login__security-note {
        margin-top: 10px !important;
    }

    .odv-login--split .odv-login__visual {
        padding: 20px 32px 16px;
    }

    .odv-login__visual-content h2 {
        font-size: 22px;
    }
}

@media (min-width: 901px) and (max-height: 560px) {
    .odv-login--split .odv-login__security-note {
        display: none;
    }

    .odv-login--split .odv-login__panel {
        padding-top: 10px;
        padding-bottom: 8px;
    }
}

/* ============================================================================================
 * Salu - asistente contextual (2026/09/16, pixel)
 * Botón flotante inferior derecho, panel con pestañas y estados vacíos amigables.
 * ============================================================================================ */

.odv-salu {
    position: fixed;
    right: var(--odv-space-4);
    bottom: var(--odv-space-4);
    z-index: 1050;
    font-family: var(--odv-font);
}

.odv-salu__launcher {
    position: relative;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid var(--odv-surface);
    border-radius: 50%;
    background: var(--odv-primary-soft);
    box-shadow: var(--odv-shadow-pop);
    cursor: pointer;
    transition: transform 0.18s ease;
}

.odv-salu__launcher:hover {
    transform: translateY(-2px);
}

.odv-salu__launcher:focus-visible,
.odv-salu__close:focus-visible,
.odv-salu__tabs button:focus-visible,
.odv-salu__form-check button:focus-visible {
    outline: none;
    box-shadow: var(--odv-focus-ring);
}

.odv-salu__launcher picture,
.odv-salu__launcher-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

.odv-salu__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 2px solid var(--odv-surface);
    border-radius: 11px;
    background: var(--odv-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

.odv-salu__badge[hidden] {
    display: none;
}

.odv-salu__panel {
    position: absolute;
    right: 0;
    bottom: calc(64px + var(--odv-space-3));
    width: min(380px, calc(100vw - 2 * var(--odv-space-4)));
    max-height: min(580px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-lg);
    background: var(--odv-surface);
    box-shadow: var(--odv-shadow-pop);
    color: var(--odv-text);
}

.odv-salu__panel[hidden] {
    display: none;
}

.odv-salu__header {
    display: flex;
    align-items: center;
    gap: var(--odv-space-3);
    padding: var(--odv-space-3) var(--odv-space-4);
    background: linear-gradient(135deg, var(--odv-primary) 0%, var(--odv-primary-dark) 100%);
    color: #fff;
}

.odv-salu__header picture {
    display: block;
    flex: 0 0 auto;
}

.odv-salu__header-img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    object-position: top;
}

.odv-salu__header > div {
    flex: 1;
    min-width: 0;
}

.odv-salu__header strong,
.odv-salu__header span {
    display: block;
}

.odv-salu__header strong {
    font-size: 16px;
}

.odv-salu__header span {
    font-size: 12px;
    opacity: 0.9;
}

.odv-salu__close {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--odv-radius-sm);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
}

.odv-salu__close .odv-icon {
    width: 18px;
    height: 18px;
}

.odv-salu__tabs {
    display: flex;
    gap: 2px;
    padding: 0 var(--odv-space-2);
    border-bottom: 1px solid var(--odv-border);
    overflow-x: auto;
}

.odv-salu__tabs button {
    flex: 0 0 auto;
    padding: 10px var(--odv-space-2);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--odv-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.odv-salu__tabs button[aria-selected="true"] {
    border-bottom-color: var(--odv-primary);
    color: var(--odv-primary-dark);
}

.odv-salu__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--odv-space-4);
    font-size: 13px;
    line-height: 1.5;
}

.odv-salu__body h3 {
    margin: var(--odv-space-4) 0 var(--odv-space-2);
    color: var(--odv-graphite);
    font-size: 13px;
}

.odv-salu__pane[hidden] {
    display: none;
}

.odv-salu__bubble {
    margin: 0;
    padding: var(--odv-space-3);
    border: 1px solid var(--odv-border);
    border-radius: 4px var(--odv-radius-lg) var(--odv-radius-lg) var(--odv-radius-lg);
    background: var(--odv-surface-soft);
}

.odv-salu__list {
    margin: 0;
    padding-left: 20px;
}

.odv-salu__list li + li {
    margin-top: 4px;
}

.odv-salu__form-check {
    margin-top: var(--odv-space-3);
    padding: var(--odv-space-3);
    border: 1px solid #f2d3a8;
    border-radius: var(--odv-radius-md);
    background: var(--odv-amber-soft);
}

.odv-salu__form-check.is-complete {
    border-color: #bfe3cf;
    background: var(--odv-green-soft);
}

.odv-salu__form-check[hidden] {
    display: none;
}

.odv-salu__form-check p {
    margin: 4px 0;
}

.odv-salu__form-check ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.odv-salu__form-check button {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--odv-amber);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.odv-salu__news {
    margin: 0;
    padding: 0;
    list-style: none;
}

.odv-salu__news li {
    padding: var(--odv-space-2) 0;
    border-bottom: 1px solid var(--odv-border);
}

.odv-salu__news time {
    display: block;
    color: var(--odv-muted);
    font-size: 11px;
}

.odv-salu__faq {
    border-bottom: 1px solid var(--odv-border);
}

.odv-salu__faq summary {
    padding: var(--odv-space-2) 0;
    font-weight: 600;
    cursor: pointer;
}

.odv-salu__faq p {
    margin: 0 0 var(--odv-space-2);
    color: var(--odv-muted);
}

.odv-salu__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odv-space-2);
}

.odv-salu__links p {
    margin: 0;
}

.odv-salu__footer {
    padding: var(--odv-space-2) var(--odv-space-4);
    border-top: 1px solid var(--odv-border);
    background: var(--odv-surface-soft);
    color: var(--odv-muted);
    font-size: 11px;
    line-height: 1.4;
}

.odv-salu-empty {
    display: flex;
    align-items: center;
    gap: var(--odv-space-3);
    padding: var(--odv-space-3) var(--odv-space-4);
    border: 1px dashed var(--odv-border-strong);
    border-radius: var(--odv-radius-md);
    background: var(--odv-surface-soft);
    color: var(--odv-muted);
    text-align: left;
}

.odv-salu-empty--error {
    border-style: solid;
    border-color: #f5c2c7;
    background: var(--odv-primary-soft);
}

.odv-salu-empty picture {
    flex: 0 0 auto;
}

.odv-salu-empty__img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.odv-salu-empty strong,
.odv-salu-empty span {
    display: block;
}

.odv-salu-empty strong {
    color: var(--odv-graphite);
}

.odv-salu-empty .odv-list-action {
    margin-top: var(--odv-space-2);
}

@media (max-width: 760px) {
    .odv-salu {
        right: var(--odv-space-3);
        bottom: var(--odv-space-3);
    }

    .odv-salu__launcher {
        width: 54px;
        height: 54px;
    }

    .odv-salu__panel {
        position: fixed;
        right: var(--odv-space-3);
        left: var(--odv-space-3);
        bottom: calc(54px + 2 * var(--odv-space-3));
        width: auto;
    }
}

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

@media print {
    .odv-salu {
        display: none !important;
    }
}

/* ==========================================================================================
 * Home dashboard por rol: encabezado, avisos, graficas (columnas y barras) y paneles laterales.
 * ========================================================================================== */

.odv-home {
    --odv-series-1: #2a78d6;
    --odv-series-2: #eb6834;
    --odv-chart-grid: #e9edf2;
}

.odv-home__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-lg);
    background: var(--odv-surface);
    box-shadow: var(--odv-shadow);
}

.odv-home__header h1 {
    margin-bottom: 4px;
}

.odv-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.odv-home__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-md);
    background: var(--odv-surface-soft);
    color: var(--odv-graphite);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.odv-home__action:hover,
.odv-home__action:focus-visible {
    border-color: var(--odv-primary);
    color: var(--odv-primary-dark);
    outline: none;
    box-shadow: var(--odv-focus-ring);
}

.odv-home__action .odv-icon {
    width: 16px;
    height: 16px;
}

.odv-home__notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid #f1d5a8;
    border-radius: var(--odv-radius-md);
    background: var(--odv-amber-soft);
    color: #7a4510;
    font-size: 13.5px;
}

.odv-home .odv-metric-card small {
    display: block;
    margin-top: 6px;
    color: var(--odv-muted);
    font-size: 12px;
}

.odv-home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.odv-home__charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.odv-home__side {
    display: grid;
    gap: 18px;
}

.odv-home__side .odv-event-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.odv-home__badge {
    align-self: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.odv-home__badge.is-green {
    background: var(--odv-green-soft);
    color: var(--odv-green);
}

.odv-home__badge.is-amber {
    background: var(--odv-amber-soft);
    color: #8a4f12;
}

.odv-home__badge.is-red {
    background: var(--odv-primary-soft);
    color: var(--odv-primary-dark);
}

.odv-home__health {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.odv-home__health li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--odv-border);
    font-size: 13px;
}

.odv-home__health li:last-child {
    border-bottom: 0;
}

.odv-home__health li.is-ok .odv-icon {
    color: var(--odv-green);
}

.odv-home__health li.is-warn .odv-icon {
    color: var(--odv-amber);
}

.odv-home__health strong {
    color: var(--odv-graphite);
    font-weight: 600;
}

/* Graficas */

.odv-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.odv-chart__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
}

.odv-chart__header h2 {
    margin: 0 0 2px;
    color: var(--odv-text);
    font-size: 15px;
    font-weight: 600;
}

.odv-chart__header p {
    margin: 0;
    color: var(--odv-muted);
    font-size: 12.5px;
}

.odv-chart__legend {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--odv-muted);
    font-size: 12px;
}

.odv-chart__legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.odv-chart__key {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.odv-chart .is-s1 {
    background: var(--odv-series-1);
}

.odv-chart .is-s2 {
    background: var(--odv-series-2);
}

.odv-chart__empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    border: 1px dashed var(--odv-border);
    border-radius: var(--odv-radius-md);
    color: var(--odv-muted);
    font-size: 13px;
}

.odv-chart__columns {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    height: 200px;
}

.odv-chart__y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 22px;
    color: var(--odv-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
}

.odv-chart__plot {
    display: flex;
    align-items: stretch;
    gap: 4px;
    background:
        linear-gradient(var(--odv-chart-grid), var(--odv-chart-grid)) left top / 100% 1px no-repeat,
        linear-gradient(var(--odv-chart-grid), var(--odv-chart-grid)) left calc((100% - 22px) / 2) / 100% 1px no-repeat;
}

.odv-chart__col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    border-radius: 4px;
    outline: none;
}

.odv-chart__col:hover,
.odv-chart__col:focus-visible {
    background: rgba(22, 32, 43, 0.04);
}

.odv-chart__stack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column-reverse;
    gap: 2px;
    width: 100%;
    max-width: 24px;
    border-bottom: 1px solid var(--odv-border-strong);
}

.odv-chart__segment {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: 2px;
}

.odv-chart__stack .odv-chart__segment:last-child {
    border-radius: 4px 4px 0 0;
}

.odv-chart__x {
    height: 22px;
    padding-top: 6px;
    color: var(--odv-muted);
    font-size: 11px;
    white-space: nowrap;
}

.odv-chart__bars {
    display: grid;
    gap: 6px;
}

.odv-chart__row {
    display: grid;
    grid-template-columns: minmax(90px, 42%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 3px 4px;
    border-radius: 6px;
    outline: none;
}

.odv-chart__row:hover,
.odv-chart__row:focus-visible {
    background: rgba(22, 32, 43, 0.04);
}

.odv-chart__label {
    overflow: hidden;
    color: var(--odv-text);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odv-chart__track {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.odv-chart__bar {
    height: 14px;
    border-radius: 0 4px 4px 0;
    background: var(--odv-series-1);
}

.odv-chart__value {
    flex: 0 0 auto;
    color: var(--odv-graphite);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.odv-chart__table summary {
    width: fit-content;
    color: var(--odv-muted);
    font-size: 12px;
    cursor: pointer;
}

.odv-chart__table table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 12px;
}

.odv-chart__table th,
.odv-chart__table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--odv-border);
    text-align: left;
}

.odv-chart__table td {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.odv-chart-tip {
    position: fixed;
    z-index: 1200;
    display: grid;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--odv-graphite);
    color: #ffffff;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--odv-shadow-pop);
}

.odv-chart-tip[hidden] {
    display: none;
}

@media (max-width: 1280px) {
    .odv-home__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .odv-home .odv-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odv-home__charts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .odv-home .odv-metric-grid {
        gap: 10px;
    }

    .odv-home .odv-metric-card {
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .odv-home .odv-metric-card strong {
        font-size: 24px;
    }

    .odv-home__header {
        padding: 18px 16px;
    }
}

/* Home dashboard: tercera serie, etiqueta técnica, tarjeta de maletín/móvil y su diálogo. */

.odv-home {
    --odv-series-3: #1baf7a;
}

.odv-chart .is-s3 {
    background: var(--odv-series-3);
}

.odv-home .odv-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.odv-home__tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef1f4;
    color: var(--odv-muted);
    font-size: 11px;
    font-weight: 600;
}

.odv-kit {
    padding: 0;
    overflow: hidden;
}

.odv-kit__trigger {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    background: linear-gradient(135deg, #fff5f6 0%, var(--odv-surface) 70%);
    color: var(--odv-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.odv-kit__trigger.is-static {
    cursor: default;
}

.odv-kit__trigger:not(.is-static):hover,
.odv-kit__trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--odv-primary);
}

.odv-kit__icon {
    width: 56px;
    height: 56px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: var(--odv-primary);
    color: #ffffff;
}

.odv-kit__icon .odv-icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.7;
}

.odv-kit__text strong,
.odv-kit__text small {
    display: block;
}

.odv-kit__text strong {
    color: var(--odv-graphite);
    font-size: 16px;
    font-weight: 700;
}

.odv-kit__text small {
    margin-top: 3px;
    color: var(--odv-muted);
    font-size: 12.5px;
}

.odv-kit__cta {
    grid-column: 2;
    width: fit-content;
    color: var(--odv-primary-dark);
    font-size: 12.5px;
    font-weight: 600;
}

.odv-kit__cta::after {
    content: ' →';
}

.odv-kit-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-lg);
    background: var(--odv-surface);
    color: var(--odv-text);
    box-shadow: var(--odv-shadow-pop);
}

.odv-kit-dialog::backdrop {
    background: rgba(16, 24, 34, 0.45);
}

.odv-kit-dialog header {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--odv-border);
}

.odv-kit-dialog h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.odv-kit-dialog header p {
    margin: 2px 0 0;
    color: var(--odv-muted);
    font-size: 12.5px;
}

.odv-kit-dialog__close {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-sm);
    background: var(--odv-surface);
    color: var(--odv-graphite);
    cursor: pointer;
}

.odv-kit-dialog .odv-empty-state {
    margin: 20px;
}

.odv-kit-dialog__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.odv-kit-dialog__table th,
.odv-kit-dialog__table td {
    padding: 10px 20px;
    border-bottom: 1px solid var(--odv-border);
    text-align: left;
}

.odv-kit-dialog__table td:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.odv-kit-dialog__table tr.is-expiring td,
.odv-kit-dialog__table tr.is-expiring th {
    background: var(--odv-amber-soft);
}

@media (max-width: 1280px) {
    .odv-home.is-medico .odv-home__side,
    .odv-home.is-aph .odv-home__side,
    .odv-home.is-conductor .odv-home__side {
        order: -1;
    }
}

/* Reserva espacio para Salu y evita que tape el logo del footer */
body:has(.odv-salu) .odv-footer {
    padding-right: calc(24px + 64px + var(--odv-space-4));
}

@media (max-width: 760px) {
    body:has(.odv-salu) .odv-footer {
        padding-right: calc(54px + 2 * var(--odv-space-3));
    }
}

/* Sesión bloqueada: huella como acción principal */
.odv-passkey-button--primary {
    border-color: transparent;
    background: var(--odv-primary);
    color: #ffffff;
}

.odv-passkey-button--primary .odv-passkey-button__icon,
.odv-passkey-button--primary .odv-passkey-button__icon svg {
    color: #ffffff;
}

.odv-passkey-button--primary:hover,
.odv-passkey-button--primary:focus-visible {
    border-color: transparent;
    background: var(--odv-primary-dark);
    color: #ffffff;
}

.odv-login__button--ghost {
    border-color: var(--odv-border-strong);
    background: #ffffff;
    color: var(--odv-graphite);
    font-weight: 700;
}

.odv-login__button--ghost:hover,
.odv-login__button--ghost:focus {
    border-color: var(--odv-primary);
    background: #ffffff;
    color: var(--odv-primary-dark);
    box-shadow: var(--odv-focus-ring);
}

.odv-login__button--ghost .odv-login__spinner {
    border-color: rgba(52, 57, 65, 0.25);
    border-top-color: var(--odv-graphite);
}

@media (min-width: 901px) and (max-height: 640px) {
    .odv-locked-user {
        margin-bottom: 12px;
    }

    .odv-locked-user__avatar {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
        font-size: 17px;
    }

    .odv-locked-user__badge {
        width: 22px;
        height: 22px;
    }

    .odv-login--locked .odv-locked-user h1 {
        font-size: 24px;
    }

    .odv-locked-user__switch {
        margin-top: 10px !important;
    }
}

@media (min-width: 901px) and (max-height: 560px) {
    .odv-login--locked .odv-login__kicker {
        display: none;
    }
}

/* Kept at the end on purpose: the base rule of .odv-salu lives further down in this file, so an
   override placed earlier loses by order and the assistant stayed on top of the bar. */
@media (max-width: 760px) {
    .odv-salu {
        bottom: calc(76px + env(safe-area-inset-bottom, 0));
    }

    /* Above the fixed action bar, so the assistant never covers the only button on the screen. */
    body:has(.odv-cx-startbar) .odv-salu {
        bottom: calc(56px + 72px + env(safe-area-inset-bottom, 0));
    }

    .odv-toast {
        bottom: calc(80px + env(safe-area-inset-bottom, 0));
    }
}

/* Phones: the top bar must fit the menu, the page title, four actions and the profile chip
   without pushing anything off screen. Base buttons keep a 42px min-size, so shrink it here. */
@media (max-width: 520px) {
    .odv-topbar {
        gap: 8px;
        padding: 8px 10px;
    }

    .odv-topbar__left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 8px;
    }

    .odv-topbar__actions {
        flex: 0 0 auto;
        gap: 4px;
    }

    .odv-menu-toggle,
    .odv-topbar__actions .odv-icon-button,
    .odv-profile-button {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .odv-profile-button {
        justify-content: center;
        padding: 0;
        border-color: transparent;
    }

    .odv-profile-button > .odv-icon {
        display: none;
    }

    .odv-profile-button .odv-user-chip {
        width: 32px;
        height: 32px;
    }

    .odv-page-title {
        min-width: 0;
    }

    .odv-page-title strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .odv-topbar-link {
        width: 34px;
        min-height: 34px;
        flex: 0 0 auto;
        justify-content: center;
        padding: 0;
    }

    .odv-topbar-link span {
        display: none;
    }

    .odv-profile-dropdown {
        right: 0;
    }
}

/* Very narrow phones: the side menu already leads back to Administración, so the title keeps
   the room instead of a second back control. */
@media (max-width: 400px) {
    .odv-topbar-link {
        display: none;
    }
}

/* Home dashboard: listas enlazadas, contador de alertas y cuerpo desplazable del maletín. */

.odv-event-item.is-link {
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.odv-event-item.is-link:hover,
.odv-event-item.is-link:focus-visible {
    border-color: var(--odv-primary);
    background: var(--odv-surface);
    outline: none;
    box-shadow: var(--odv-focus-ring);
}

.odv-home__tag.is-red {
    background: var(--odv-primary-soft);
    color: var(--odv-primary-dark);
}

.odv-home__list-hint {
    margin: -6px 0 10px;
    color: var(--odv-muted);
    font-size: 12px;
}

.odv-kit-dialog__body {
    max-height: min(60vh, 480px);
    overflow-y: auto;
}

.odv-kit-dialog__table td:nth-child(2) {
    color: var(--odv-muted);
    font-size: 12px;
}

.odv-kit-dialog__table td:last-child {
    white-space: nowrap;
}

/* Salu empty state: never widen the page. Table cells and list rows set white-space: nowrap
   on their strong/span; the empty state must wrap inside its container instead. */
.odv-content .odv-salu-empty {
    max-width: 100%;
    min-width: 0;
}

.odv-content .odv-salu-empty > div {
    min-width: 0;
}

.odv-content .odv-salu-empty strong,
.odv-content .odv-salu-empty span,
td:has(> .odv-salu-empty) {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Installing the app is offered while the site runs in a browser: a floating button that does not
   depend on the browser firing its own install prompt. It stacks over the assistant launcher so it
   never covers the side menu, and clears the phone bar. */
.odv-install-fab {
    position: fixed;
    right: var(--odv-space-4);
    bottom: calc(var(--odv-space-4) + 76px);
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--odv-primary);
    color: #ffffff;
    font-family: var(--odv-font);
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--odv-shadow-pop);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.odv-install-fab[hidden] {
    display: none;
}

/* Jorge, 2026-10-08: installing is not offered inside Administración, nor while a drawer or a
   confirmation is open, where the button covered the actions at the bottom of the panel. */
body.odv-en-administracion .odv-install-fab,
body.odv-drawer-open .odv-install-fab,
body.odv-panel-abierto .odv-install-fab {
    display: none;
}

.odv-install-fab .odv-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #ffffff;
}

.odv-install-fab:hover,
.odv-install-fab:focus-visible {
    background: var(--odv-primary-dark);
    outline: 0;
    transform: translateY(-1px);
}

.odv-install-fab:focus-visible {
    box-shadow: var(--odv-shadow-pop), 0 0 0 3px rgba(240, 48, 64, 0.28);
}

.odv-install-hint {
    position: fixed;
    right: var(--odv-space-4);
    bottom: calc(var(--odv-space-4) + 128px);
    z-index: 1050;
    max-width: min(300px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-md);
    background: #ffffff;
    color: var(--odv-graphite);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: var(--odv-shadow-pop);
}

.odv-install-hint[hidden] {
    display: none;
}

@media (max-width: 760px) {
    /* Clear of the app-style bar and of the assistant launcher above it. */
    .odv-install-fab {
        bottom: calc(54px + 2 * var(--odv-space-3) + 76px);
    }

    .odv-install-hint {
        bottom: calc(54px + 2 * var(--odv-space-3) + 128px);
    }
}

@media print {
    .odv-install-fab,
    .odv-install-hint {
        display: none;
    }
}

/* Home dashboard: los paneles de alerta van juntos y un nombre IUM largo se recorta a dos líneas. */

.odv-home__alerts {
    display: grid;
    gap: 18px;
}

.odv-event-item strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

/* ============================================================================
   No cubierto: la IPS no puede prestar el servicio. Ámbar, no rojo: el rojo es
   la acción principal y lo destructivo, y esto no es ninguna de las dos.
   Bloque entregado por Open-diseño (J-10); los nombres son neutros a propósito,
   porque lo usan el listado de solicitudes, la consulta y el traslado.
   ========================================================================= */
.odv-btn--warn {
    border-color: var(--odv-amber);
    background: var(--odv-amber-soft);
    color: var(--odv-amber);
}

.odv-btn--warn:hover,
.odv-btn--warn:focus-visible {
    border-color: var(--odv-amber);
    background: #f6e6cc;
    color: #8a4f12;
    outline: 0;
}

.odv-btn--warn:focus-visible {
    box-shadow: 0 0 0 3px rgba(185, 106, 24, 0.22);
}

.odv-btn--warn[hidden] {
    display: none;
}

/* The state as it reads later, in the list and in the agenda. */
.odv-nc-chip:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--odv-amber-soft);
    color: var(--odv-amber);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.odv-nc-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* A closed <dialog> is hidden by the browser with `dialog:not([open])`, and any author rule beats
   a browser rule whatever its specificity: a display set on the class showed the closed dialog on
   top of the listing as soon as the page loaded. The display belongs to the open state only, and
   the closed one says so again in case another rule ever sets a display on the class. */
.odv-nc-dialog:not([open]) {
    display: none;
}

.odv-nc-dialog[open] {
    display: grid;
    width: min(460px, calc(100vw - 24px));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--odv-border);
    border-radius: var(--odv-radius-lg);
    background: var(--odv-surface);
    color: var(--odv-text);
    box-shadow: var(--odv-shadow-pop);
}

/* The dialog brings its own layout. It is a descendant of the bar the module puts the button in,
   and the transfer record puts it in `.odv-row-actions`, whose `form { display: flex }` laid the
   whole dialog out in one row with the reason squeezed to a 25 px column. These selectors are more
   specific than any bar rule of the kind (element + class, twice), so the dialog reads the same in
   the listing, the agenda, the request record, the transfer record and the consultation. */
dialog.odv-nc-dialog > form.odv-nc-dialog__form {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 0;
}

dialog.odv-nc-dialog .odv-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

dialog.odv-nc-dialog textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    resize: vertical;
}

dialog.odv-nc-dialog .odv-nc-dialog__actions > * {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.odv-nc-dialog::backdrop {
    background: rgba(16, 24, 40, 0.45);
}

.odv-nc-dialog h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.odv-nc-dialog__hint {
    margin: 0;
    color: var(--odv-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.odv-nc-dialog__actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

/* On a phone the two actions stack: side by side they are two small targets. */
@media (max-width: 480px) {
    .odv-nc-dialog__actions {
        grid-template-columns: 1fr;
    }
}

/* J-05. The day's transfers printed from the request listing: a compact bar with its title, the day,
   the driver and the button in one row, stacked on a phone. It posts to the transfers generator. */
.odv-imprimir-traslados__form {
    display: grid;
    align-items: end;
    gap: 10px 12px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
}

.odv-imprimir-traslados__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 9px;
    font-size: 14px;
    font-weight: 700;
}

.odv-imprimir-traslados__titulo svg {
    width: 18px;
    height: 18px;
    color: var(--odv-muted);
}

.odv-imprimir-traslados .odv-field {
    min-width: 0;
    margin: 0;
}

@media (max-width: 760px) {
    .odv-imprimir-traslados__form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* «Elegir imagen» of the stamp: the file box stays in the form (required, keyboard) but out of sight. */
.odv-file-pick {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.odv-file-pick input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.odv-file-pick input[type="file"]:focus-visible + .odv-small-button {
    box-shadow: var(--odv-focus-ring);
}

/* Mejoras móviles (Jorge, 2026-10-14; auditoría de Open-Helix a 375 px). Touch targets of at
   least 44x44 (accessibility_wcag.md) on phones only: the desktop design does not change. */
@media (max-width: 760px) {
    .odv-icon-button,
    .odv-menu-toggle,
    .odv-profile-button,
    .odv-pager__link,
    .odv-password-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .odv-nav__link,
    .odv-primary-action,
    .odv-list-action,
    .odv-home__action,
    .odv-small-button,
    .odv-row-menu__toggle,
    .odv-row-menu-toggle,
    .odv-row-action,
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        min-height: 44px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 42px;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 42px;
    }

    .odv-cx-daynav__day {
        min-width: 44px;
    }

    /* The top bar fixed its controls at 34 px with a more specific rule: the same selectors here. */
    .odv-menu-toggle,
    .odv-topbar__actions .odv-icon-button,
    .odv-profile-button,
    .odv-topbar-link {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Login: the link, the remember-me box and the Motfware logo get a finger-sized area. */
    .odv-login__label-row a,
    .odv-login__powered a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .odv-login__remember {
        min-height: 44px;
        align-items: center;
    }

    .odv-login__remember input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    /* The top bar keeps alerts and the profile; fingerprint, notifications and lock move into
       the profile menu, so the screen title is no longer cut. */
    .odv-topbar__actions .odv-icon-button--passkey,
    .odv-topbar__actions .odv-icon-button--push,
    .odv-topbar__actions .odv-topbar-form {
        display: none;
    }

    .odv-profile-menu .odv-profile-dropdown .odv-profile-dropdown__movil {
        display: flex;
    }

    /* «Descargar app» becomes a round icon button by the assistant, and steps aside while the
       person scrolls, so it does not sit over the cards being read. */
    .odv-install-fab {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        transition: opacity 0.2s ease;
    }

    .odv-install-fab > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    body.odv-desplazando .odv-install-fab {
        opacity: 0;
        pointer-events: none;
    }

    /* The floating «Descargar app» and Salu stay over the bottom bar: the content ends above them. */
    .odv-content {
        padding-bottom: 88px;
    }

    /* Pacientes: the count cards two by two and compact, so the list starts in sight. */
    .odv-patient-admin .odv-user-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odv-patient-admin .odv-user-summary > .odv-user-card {
        min-height: 48px;
        padding: 6px 9px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .odv-patient-admin .odv-user-summary > .odv-user-card .odv-user-card__icon {
        display: none;
    }

    .odv-patient-admin .odv-user-summary > .odv-user-card:not([hidden]):last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Entries of the profile menu that only phones use (the top bar has them on wider screens). */
.odv-profile-dropdown .odv-profile-dropdown__movil {
    display: none;
}