/* ── Variables de diseño del sistema — paleta Saphir (compartida con el CRM) ── */
:root {
    --color-primary:         #2D5A8E;
    --color-accent:          #C9935A;
    --color-success:         #2E9E5A;
    --color-warning:         #E09B30;
    --color-danger:          #CC3333;
    --color-bg:              #F5F6FA;
    --color-surface:         #FFFFFF;
    --color-text:            #1A1D2B;
    --color-text-secondary:  #6B7186;
    --color-border:          #E0E3ED;

    --color-primary-dark:    #1a3a5c;
    --color-primary-light:   #F0F4FA;
    --color-bg-hover:        #FAFBFF;
    --color-on-primary:      #FFFFFF;

    /* Tipografía. IBM Plex, auto-alojada en /fonts (ver css/fonts.css). Las de
       reserva son las del sistema, para que un fallo de carga no deje la app en
       Times: Segoe UI en Windows, San Francisco en Mac. */
    --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --sidebar-width:         220px;
    --topbar-height:         56px;
    --bottomnav-height:      56px;

    --app-100vh: 100vh;
}

@supports (height: 100dvh) {
    :root { --app-100vh: 100dvh; }
}

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: clamp(14px, 0.5vw + 12px, 16px);
    /* Cifras de ancho fijo en toda la app: esto es una herramienta de tablas
       —versiones, fechas, medidas, contadores— y los números tienen que cuadrar
       en columna. Plex las trae; sin esto el 1 es más estrecho y las cifras
       bailan de fila en fila. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Plex tiene una caja ancha y a tamaño de titular abre demasiado: un poco de
   tracking negativo lo compacta. Solo en los títulos; el cuerpo se deja intacto,
   que es donde la anchura ayuda a leer. */
h1, h2, h3 { font-weight: 600; color: var(--color-text); letter-spacing: -0.015em; }
h1 { letter-spacing: -0.02em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.layout { display: flex; flex-direction: column; height: var(--app-100vh); }
/* Franja de entorno de pruebas (preproducción). Rayada para que no se confunda con un aviso normal. */
.env-bar {
    flex: 0 0 auto; text-align: center; padding: 0.3rem 1rem;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: #1A1D2B;
    background: repeating-linear-gradient(135deg, #F6D58E 0 12px, #F2C66A 12px 24px);
}

.topbar {
    height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 100;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 0.5rem; }
.topbar__logo { height: 28px; }
.topbar__product { font-weight: 700; color: var(--color-primary); }
.topbar__company { color: var(--color-text-secondary); font-size: 0.9rem; }
.topbar__user { color: var(--color-text-secondary); font-size: 0.9rem; }
.topbar__avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.topbar__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Botón de icono en la topbar (p. ej. ayuda) */
.topbar__iconbtn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: none; border: none; cursor: pointer;
    color: var(--color-text-secondary); font-size: 1.15rem;
}
.topbar__iconbtn:hover { background: var(--color-bg-hover); color: var(--color-primary); }
/* Botón del menú: abre/cierra el panel (móvil) o pliega la barra (escritorio). */
.topbar__menubtn { font-size: 1.3rem; margin-right: 0.15rem; }

/* Botón de perfil (abre el menú de usuario) */
.topbar__profile {
    display: flex; align-items: center; gap: 0.5rem;
    background: none; border: none; cursor: pointer;
    padding: 0.2rem 0.35rem; border-radius: 999px;
}
.topbar__profile:hover { background: var(--color-bg-hover); }
.topbar__caret { color: var(--color-text-secondary); font-size: 0.75rem; transition: transform 0.15s ease; }
.topbar__caret--open { transform: rotate(180deg); }

/* Menú de usuario */
.profile-backdrop { position: fixed; inset: 0; z-index: 200; background: transparent; }
.profile-dropdown {
    position: fixed; top: calc(var(--topbar-height) + 6px); right: 1rem; z-index: 201;
    width: min(280px, calc(100vw - 2rem));
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    overflow: hidden;
}
.profile-dropdown__header { display: flex; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--color-border); }
.profile-dropdown__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1.25rem;
}
.profile-dropdown__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-dropdown__info { min-width: 0; }
.profile-dropdown__name { font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dropdown__email { color: var(--color-text-secondary); font-size: 0.82rem; margin: 0.1rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dropdown__role { color: var(--color-text-secondary); font-size: 0.82rem; margin: 0.35rem 0 0; }
.profile-dropdown__role strong { color: var(--color-text); }
.profile-dropdown__menu { list-style: none; margin: 0; padding: 0.35rem; }
.profile-dropdown__item {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.6rem 0.7rem; border-radius: 8px; cursor: pointer;
    color: var(--color-text); font-size: 0.92rem;
}
.profile-dropdown__item:hover { background: var(--color-bg-hover); }
.profile-dropdown__item i { font-size: 1.05rem; color: var(--color-text-secondary); }
.profile-dropdown__item--empty { color: var(--color-text-secondary); }
.profile-dropdown__item--empty i { color: var(--color-accent); }

.layout__body { display: flex; flex: 1 1 auto; min-height: 0; position: relative; }
.sidebar {
    width: var(--sidebar-width);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto; overflow-x: hidden;
}

/* Móvil: la barra es un panel que se desliza sobre el contenido, por debajo de
   la topbar (para que el botón de cerrar siga a la vista). Cerrado por defecto. */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed; left: 0; z-index: 300;
        top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)); bottom: 0;
        width: min(82vw, 320px);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
    }
    .sidebar--open { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
        top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
        background: rgba(0, 0, 0, 0.35);
    }
}

/* Escritorio: la barra va en el flujo y se puede plegar a solo iconos. */
@media (min-width: 768px) {
    .sidebar { flex: 0 0 auto; transition: width 0.18s ease; }
    .sidebar-backdrop { display: none; }
    .sidebar--collapsed { width: 66px; }
    .sidebar--collapsed .navmenu { padding-left: 0.35rem; padding-right: 0.35rem; }
    .sidebar--collapsed .navmenu__label,
    .sidebar--collapsed .navmenu__group,
    .sidebar--collapsed .navmenu__badge { display: none; }
    .sidebar--collapsed .navmenu__item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
    .sidebar--collapsed .navmenu__item::before { left: -0.35rem; }
    .sidebar--collapsed .navmenu__spacer { margin-left: 0.3rem; margin-right: 0.3rem; }
    .sidebar--collapsed .navmenu__versions { display: none; }
}
.layout__content {
    flex: 1 1 auto; min-width: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 1.5rem;
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
}

/* ── NavMenu ────────────────────────────────────────────────────────────── */
/* width:100% es obligatorio: el <aside>/<nav> contenedor es display:flex, asi que
   el <ul> es un flex item y sin esto toma el ancho de su CONTENIDO. Con el menu
   corto del proveedor (etiquetas breves) la lista se quedaba a media barra y con
   ella el fondo del hover y del item activo; con los menus largos el texto ya
   llenaba los 220px y el fallo no se notaba. */
.navmenu { list-style: none; margin: 0; padding: 0.5rem 0.6rem 0.9rem; display: flex; flex-direction: column; gap: 2px; height: 100%; width: 100%; min-width: 0; }
.navmenu__item {
    position: relative;
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.7rem; border-radius: 10px;
    color: var(--color-text-secondary); font-size: 0.92rem; font-weight: 500;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.navmenu__item:hover { background: var(--color-primary-light); color: var(--color-text); text-decoration: none; }
.navmenu__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* Activa: pastilla tintada, texto en primario y una barra de acento a la
   izquierda que "crece" al entrar. El icono pasa a su versión rellena. */
.navmenu__item.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.navmenu__item::before {
    content: ""; position: absolute; left: -0.6rem; top: 50%;
    width: 3px; height: 0; border-radius: 0 3px 3px 0;
    background: var(--color-primary); transform: translateY(-50%);
    transition: height 0.2s ease;
}
.navmenu__item.active::before { height: 60%; }

.navmenu__icon {
    position: relative; flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.08rem; transition: background-color 0.18s ease, transform 0.18s ease;
}
.navmenu__item:hover .navmenu__icon { transform: translateX(2px); }
.navmenu__item.active .navmenu__icon { background: var(--color-surface); box-shadow: 0 1px 4px rgba(45, 90, 142, 0.18); }
.navmenu__icon-active { display: none; }
.navmenu__item.active .navmenu__icon-idle { display: none; }
.navmenu__item.active .navmenu__icon-active { display: inline; }
.navmenu__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contador de pendientes: mismo peso visual que la campana. */
.navmenu__badge {
    margin-left: auto; min-width: 1.35rem; padding: 0 0.4rem;
    background: var(--color-danger); color: #fff; border-radius: 20px;
    font-size: 0.72rem; font-weight: 700; line-height: 1.35rem; text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface);
    animation: navmenu-pop 0.3s ease-out;
}
/* En la bottom-nav el contador va encima del icono, como en las apps móviles. */
.navmenu__dot {
    position: absolute; top: -3px; right: -7px;
    min-width: 1.1rem; padding: 0 0.28rem; border-radius: 20px;
    background: var(--color-danger); color: #fff;
    font-size: 0.62rem; font-weight: 700; line-height: 1.1rem; text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface);
}
@keyframes navmenu-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.navmenu__group {
    padding: 0.9rem 0.7rem 0.3rem; font-size: 0.68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-secondary); opacity: 0.8;
}
.navmenu__group:first-child { padding-top: 0.4rem; }
/* Separa "Ajustes" del resto sin empujarlo al fondo de la pantalla: con un menú
   corto (el del proveedor son cuatro entradas) quedaba un hueco enorme en medio y
   el ajuste perdido abajo del todo. Con un menú largo el efecto es el mismo de
   antes, porque el contenido ya llena la barra. */
.navmenu__spacer { flex: 0 0 auto; height: 1px; margin: 0.6rem 0.3rem; background: var(--color-border); }
/* Versiones del front y del back, abajo del menú (solo administrador). */
.navmenu__versions a {
    display: flex; flex-direction: column; gap: 0.05rem; padding: 0.5rem 0.75rem 0.25rem;
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums; text-decoration: none;
}
.navmenu__versions a:hover { color: var(--color-primary); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .navmenu__item, .navmenu__item::before, .navmenu__icon { transition: none; }
    .navmenu__badge { animation: none; }
}

/* ── Páginas ────────────────────────────────────────────────────────────── */
.page-title { font-size: 1.5rem; margin: 0 0 1rem; }
.page-lead { color: var(--color-text-secondary); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* Dentro de la cabecera el título no lleva su margen inferior: con él, el bloque
   del título quedaba 1rem más alto que los filtros/acciones y la fila se veía
   desalineada. */
.page-header .page-title { margin-bottom: 0; }
/* Acciones + filtros de la derecha (el botón de alta va al final, pegado al borde). */
.page-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.page-header__search { max-width: 280px; }
.page-header__filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.page-header__filters .field { width: auto; }
.empty-state { color: var(--color-text-secondary); padding: 2rem; text-align: center; }

/* Panel "sin acceso asignado" (usuario autenticado sin ninguna empresa) */
.no-access {
    max-width: 440px; margin: 3rem auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; padding: 2.5rem 1.75rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.no-access i { font-size: 2.5rem; color: var(--color-primary); }
.no-access h2 { margin: 0; font-size: 1.25rem; }
.no-access p { margin: 0 0 0.5rem; color: var(--color-text-secondary); }

.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.home-card {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 1.25rem; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); color: var(--color-text);
}
.home-card:hover { text-decoration: none; box-shadow: 0 4px 18px rgba(0,0,0,0.1); }
.home-card i { font-size: 1.6rem; color: var(--color-primary); }
.home-card__title { font-weight: 700; }
.home-card__hint { color: var(--color-text-secondary); font-size: 0.85rem; }

/* ── Spinner global ─────────────────────────────────────────────────────── */
.layout-loading { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 240px; }
.layout-loading__spinner, .sv-loading__spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--color-border); border-top-color: var(--color-primary);
    animation: sv-spin 0.8s linear infinite;
}
.sv-loading { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem; }
.sv-loading--inline { flex-direction: row; padding: 0.5rem; }
.sv-loading__label { color: var(--color-text-secondary); font-size: 0.9rem; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .layout-loading__spinner, .sv-loading__spinner { animation: none; } }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-layout { min-height: var(--app-100vh); display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--color-bg); }
.login-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); padding: 2.5rem; max-width: 380px; width: 100%; text-align: center; }
.login-card__logo { height: 48px; margin-bottom: 1rem; }
.login-card__title { font-size: 1.6rem; margin: 0 0 0.25rem; }
.login-card__subtitle { color: var(--color-text-secondary); margin: 0 0 1.5rem; }
.login-card__btn { width: 100%; justify-content: center; }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff8c4; border-top: 1px solid #e0c000; padding: 0.75rem 1.25rem; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* "Ver la web como" dentro del menú del avatar: bloque separado del resto de
   acciones para que no se confunda con "Cerrar sesión". */
.profile-dropdown__section { border-top: 1px solid var(--color-border); padding: 0.35rem 0 0.15rem; }
.profile-dropdown__sectiontitle {
    margin: 0.35rem 0.75rem 0.15rem; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-text-secondary); font-weight: 700;
}
.profile-dropdown__hint {
    display: block; margin: 0.1rem 0.75rem 0.35rem;
    font-size: 0.76rem; color: var(--color-text-secondary);
}
.profile-dropdown__item .profile-dropdown__hint { margin: 0; }