/* Navegación común: se carga después de los estilos de cada pantalla. */
.app-shell{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:100vh}
.app-shell>.sidebar{position:fixed;inset:0 auto 0 0;width:214px;height:100dvh;overflow-y:auto;z-index:40;display:flex;flex-direction:column;box-sizing:border-box}
.app-shell>.main-area{grid-column:2;min-width:0}
.sidebar .brand img{object-position:center}.sidebar .brand small{text-align:center}
.main-area>.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:flex-end}
.sidebar-toggle{display:none}.main-area>.mobile-actions{display:none}
.main-area .record-main{max-width:1180px;width:100%;box-sizing:border-box;padding:35px clamp(20px,4vw,65px) 50px}
.main-area .mail-check,.main-area .backup-page,.main-area .recovery-panel{width:calc(100% - 40px);box-sizing:border-box}
.main-area .auth-page{min-height:calc(100dvh - 81px);grid-template-columns:minmax(0,460px) minmax(0,440px)}
.extranet-skip{position:fixed;left:230px;top:-70px;padding:12px 18px;background:#fff;color:#514900;z-index:100;border:2px solid #d7c000}.extranet-skip:focus{top:8px}
.sidebar-toggle:focus-visible,.sidebar a:focus-visible{outline:2px solid #b09d00;outline-offset:3px}
@media(max-width:1000px){.main-area .auth-page{grid-template-columns:minmax(0,470px)}.main-area .auth-product{display:none}}
@media(max-width:720px){
.app-shell{display:block}.app-shell>.main-area{width:100%}.app-shell>.sidebar{width:min(280px,85vw);transform:translateX(-100%);transition:transform .18s ease;visibility:hidden;top:68px;height:calc(100dvh - 68px);box-shadow:8px 0 20px #0002}
.app-shell.menu-open>.sidebar{transform:translateX(0);visibility:visible}
.main-area>.topbar{justify-content:space-between;gap:10px;height:68px;padding:0 14px}
.sidebar-toggle{display:flex;align-items:center;gap:7px;padding:9px 11px;background:#f7f6eb;color:#514900;border:1px solid #ded9b5;cursor:pointer;font:600 13px Arial}
.main-area .mobile-brand{display:block}.main-area .mobile-brand img{width:80px}.main-area .topbar-right{margin-left:auto}.main-area .private-pill{display:none}
.main-area .record-main{padding:25px 18px 40px}.main-area .mail-check,.main-area .backup-page,.main-area .recovery-panel{width:calc(100% - 28px);margin:24px auto;padding:22px}
.main-area .auth-page{min-height:calc(100dvh - 68px);padding:18px}.extranet-skip{left:14px}
}
@media(prefers-reduced-motion:reduce){.app-shell>.sidebar{transition:none}}

/* Barras de las secciones de fichas: amarillo corporativo Tifell. */
.main-area .record-main .record-info{border-top-color:#d7c000!important}
.main-area .record-main .record-info>h2{border-bottom-color:#d7c000!important}
.main-area .record-main .filter-empty{border-left-color:#d7c000!important}

/* Botones estándar de Extranet: altura de Nuevo contacto (40 px). */
.primary-button, .account-button, .topbar-logout button {min-height:40px;box-sizing:border-box;}

/* Tipografía coherente en los controles generales de Extranet. */
@media screen { .primary-button, .account-button, .topbar-logout button {font-family:Arial,sans-serif;font-size:14px;font-weight:600;} }

/* Botón de retorno a la web corporativa. */
.sidebar a.nav-link[href="https://www.tifell.com/"]{
    background:#d7c000;
    color:#252519;
    font-weight:700;
}
.sidebar a.nav-link[href="https://www.tifell.com/"]:hover{
    background:#c5b100;
    color:#252519;
}
.sidebar a.nav-link[href="https://www.tifell.com/"]:focus-visible{
    outline:2px solid #514900;
    outline-offset:3px;
}