/* =======================================================
   Archidoc UI — appStyle.css
   Paleta violeta basada en logo #8640b1
   ======================================================= */

/* ========== 0) TOKENS & THEME VARIABLES (branding) ========== */
:root{
    /* Paleta Archidoc base (violeta principal) */
    --arch-primary-900:#4f236c;
    --arch-primary-800:#6b2f92;
    --arch-primary-700:#8640b1; /* color del logo */
    --arch-primary-600:#9354ba;
    --arch-primary-500:#a46cc4;
    --arch-primary-400: #b194cb;
    --arch-primary-300: #d0bde3;
    --arch-primary-200:#f6e8ff;
    --arch-primary-100:#f1e5fb;

    /* Acento secundario (teal suave para contrastar) */
    --arch-accent-700:#0f766e;
    --arch-accent-500:#14b8a6;
    --arch-accent-100:#e0f8f5;

    /* Neutros / texto / bordes */
    --ink-900:#111827;
    --ink-700:#374151;
    --ink-500:#6b7280;

    --line-300:#D7DCE3;
    --panel-50:#F7F9FC;

    --success-200:#BFE6C9;
    --danger-200:#FFC9CC;
    --warn-200:#FFF2A6;

    /* “alias” genéricos que usa tu CSS */
    --primary: var(--arch-primary-700);
    --primary-hover: var(--arch-primary-600);
    --primary-weak: var(--arch-primary-100);
    --primary-contrast:#FFFFFF;

    --accent: var(--arch-accent-500);
    --accent-hover: var(--arch-accent-700);

    /* Header Archidoc */
    --arch-header-bg: linear-gradient(90deg, #4f236c, #8640b1, #b37ad7);
    --arch-header-fg:#F9FAFB;

    /* Altura filtros tablas (igual que antes) */
    --dt-filter-height: 32px;
}


/* ========== 0.1) UTILIDADES PALETA ARCHIDOC (fondos, texto, bordes) ========== */

/* Backgrounds Archidoc (para paneles, headers, chips, etc.) */
.bg-arch-900  { background-color: var(--arch-primary-900) !important; }
.bg-arch-800  { background-color: var(--arch-primary-800) !important; }
.bg-arch-700  { background-color: var(--arch-primary-700) !important; }
.bg-arch-600  { background-color: var(--arch-primary-600) !important; }
.bg-arch-500  { background-color: var(--arch-primary-500) !important; }
.bg-arch-400  { background-color: var(--arch-primary-400) !important; }
.bg-arch-300  { background-color: var(--arch-primary-300) !important; }
.bg-arch-200  { background-color: var(--arch-primary-200) !important; }
.bg-arch-100  { background-color: var(--arch-primary-100) !important; }

/* Texto Archidoc (titulares, badges, etc.) */
.text-arch-900 { color: var(--arch-primary-900) !important; }
.text-arch-800 { color: var(--arch-primary-800) !important; }
.text-arch-700 { color: var(--arch-primary-700) !important; }
.text-arch-500 { color: var(--arch-primary-500) !important; }

/* Bordes Archidoc (cards, botones outline, etc.) */
.border-arch-900 { border-color: var(--arch-primary-900) !important; }
.border-arch-700 { border-color: var(--arch-primary-700) !important; }
.border-arch-500 { border-color: var(--arch-primary-500) !important; }


/* ========== 1) BASE & TIPOGRAFÍAS ========== */
html, body{
    color:var(--ink-900);
    background:#FFF;
}

body .ui-widget,
.font-sitio{
    font-family:Trebuchet MS, Helvetica, sans-serif !important;
}

.label_sub_titulo_pagina{
    font-size:23px;
    font-weight:700;
    margin-right:10px;
}
.text-no-existen-datos{
    font-size:20px;
    font-weight:700;
    margin-top:20px;
    text-align:center;
}
.font-verde{ color:green !important; }
.font-rojo{ color:red !important; }

.text-base-bold {
    font-size: 1rem !important;
    font-weight:700;
}


/* ========== 2) BOTONES ========== */
body .ui-button{
    background:var(--primary);
    border:1px solid var(--primary);
    color:var(--primary-contrast);
}
body .ui-button.ui-state-hover,
body .ui-button.ui-state-focus,
body .ui-button.ui-state-active{
    background:var(--primary-hover);
    border-color:var(--primary);
    color:var(--primary-contrast);
}

.btn_deshacer{
    background:#B94A48 !important;
    color:#FFF !important;
}
.btn_deshacer:hover{
    background:#953B39 !important;
    color:#FFF !important;
}

.btnHeight30{height:30px;}
.btnHeight33{height:33px;}
.btnHeight40{height:40px;}
.btnHeight50{height:50px;}
.btnHeight55{height:55px;}
.btnHeight65{height:65px;}
.btnHeight75{height:75px;}

.btn_width_35{width:35px;}
.btn_width_120{width:120px;}
.btn_width_150{width:150px;}
.btn_width_180{width:180px;}
.btn_width_200{width:200px;}
.btn_width_225{width:225px;}
.btn_width_250{width:250px;}
.btn_width_300{width:300px;}
.btn_width_350{width:350px;}
.btn_width_400{width:400px;}


/* ========== 3) FORM CONTROLS ========== */
body .ui-chkbox .ui-chkbox-box.ui-state-active{
    background:#FFF;
    border-color:var(--primary);
    color:var(--ink-900);
}
.select-verde .ui-selectlistbox-item.ui-state-highlight{
    background:var(--primary) !important;
    color:#FFF !important;
}
.ui-selectmanycheckbox.ui-widget td,
.ui-selectoneradio.ui-widget td{
    padding:5px;
}
body .ui-fileupload .ui-fileupload-content{
    display:none;
}

/* Capas del modal */
body .ui-widget-overlay { z-index: 10010 !important; }
body .ui-dialog         { z-index: 10020 !important; }

body .ui-selectonemenu-panel { z-index: 10040 !important; }
body .ui-autocomplete-panel  { z-index: 10040 !important; }
body .ui-datepicker,
body .ui-datepicker.ui-widget { z-index: 10040 !important; }

body .ui-growl { z-index: 10050 !important; }


/* ========== 4) PAGINADOR & CALENDARIO ========== */
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active{
    background:var(--primary);
    color:#FFF;
}
body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active{
    background:var(--primary);
    color:#FFF;
    border:0;
}


/* ========== 5) TABLAS ========== */
.ui-datatable thead th{
    text-align:center !important;
}

body .ui-datatable .ui-datatable-data > tr > td{
    height:50px;
}

.ui-widget-content.ui-datatable-odd.ui-datatable-selectable{
    background:#F4F4F4;
}

body .ui-datatable .ui-datatable-data > tr.ui-state-highlight{
    background:var(--primary);
    color:#FFF;
}
.ui-state-highlight .bg-green-100,
.ui-state-highlight .bg-pink-100,
.ui-state-highlight .bg-yellow-100{
    background:var(--primary) !important;
    color:#FFF;
}

.filter-width-60 {width: 60% !important;}
.filter-width-80 {width: 80% !important;}

/* altura filtros header */
.ui-datatable thead select.ui-column-filter {
    height: var(--dt-filter-height);
    line-height: var(--dt-filter-height);
}

.rowBackgroundVerde{ background:#4DA86A !important; }
.ui-datatable-selectable.rowBackgroundVerde:hover,
.ui-datatable-selectable.rowBackgroundVerde.ui-state-highlight{
    background:#25B44E !important;
    color:#000 !important;
    font-weight:700 !important;
}

.rowBackgroundRojo{ background:#FF9C9D !important; }
.ui-datatable-selectable.rowBackgroundRojo:hover,
.ui-datatable-selectable.rowBackgroundRojo.ui-state-highlight{
    background:#EA686C !important;
    color:#000 !important;
    font-weight:700 !important;
}

.rowBackgroundAmarillo{ background:#FFF38B !important; }
.ui-datatable-selectable.rowBackgroundAmarillo:hover,
.ui-datatable-selectable.rowBackgroundAmarillo.ui-state-highlight{
    background:#E1D71D !important;
    color:#000 !important;
    font-weight:700 !important;
}

.rowVidaUtilVerde{ background:var(--success-200) !important; }
.rowVidaUtilAmarillo{ background:var(--warn-200) !important; }
.rowVidaUtilRojo{ background:var(--danger-200) !important; }
.rowVidaUtilVacio{ background:darkgray !important; }

.filter-width-60{
    width:60% !important;
    height:30px;
}

body .ui-datatable .ui-selection-column .ui-chkbox-all{
    margin:auto;
}


/* ========== 6) TABS (TabView) ========== */
.ui-tabs .ui-tabs-nav li.ui-tabs-header{
    background:#FFF !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active{
    /*background:var(--primary-weak) !important;*/
    background:var(--primary-hover) !important;
}
body .ui-tabs.ui-tabs-top > .ui-tabs-panels{
    border:2px solid var(--line-300);
    border-radius:0 0 10px 10px;
    overflow:auto;
    min-height:500px;
}
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header{
    border-top:1px solid var(--line-300);
    border-right:1px solid var(--line-300);
    border-left:1px solid var(--line-300);
}
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-hover{
    background:#EDEFF3 !important;
}
body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-hover a{
    color:#000;
}
.tabViewCamion .ui-tabs-panel{
    height:350px;
}


/* ========== 7) PANELMENU (menú lateral) ========== */
#menuForm .ui-panelmenu{
    border:1px solid var(--line-300);
    background:#FFF;
    border-radius:12px;
    overflow:hidden;
}

#menuForm .ui-panelmenu .ui-panelmenu-panel + .ui-panelmenu-panel{
    border-top:1px solid var(--line-300);
}

/* Header base (cerrado) */
#menuForm .ui-panelmenu .ui-panelmenu-header{
    background:#f6e8ff;
    color:var(--ink-900);
    padding:0.75rem 0.75rem;
    font-weight:700;
    line-height:1.2;
}

/* Header abierto sin item activo */
#menuForm .ui-panelmenu .ui-panelmenu-header.ui-state-active{
    background:#e3cffb;
    border-bottom:1px solid var(--line-300);
}

/* Header con submenu “activo” (hay alguna opción activa dentro) */
#menuForm .ui-panelmenu .ui-panelmenu-panel.submenu-active > .ui-panelmenu-header{
    background:#ede7ff;
    border-left:4px solid var(--arch-primary-500);
}
#menuForm .ui-panelmenu .ui-panelmenu-panel.submenu-active
> .ui-panelmenu-header.ui-state-active{
    background:var(--arch-primary-700);
    color:#FFFFFF;
}
#menuForm .ui-panelmenu .ui-panelmenu-panel.submenu-active
> .ui-panelmenu-header .ui-panelmenu-icon{
    color:inherit;
}

/* Lista e ítems (más aire) */
#menuForm .ui-panelmenu .ui-panelmenu-content{
    background:#FFF;
    padding:0.5rem 0.5rem;
}
#menuForm .ui-panelmenu .ui-menuitem{
    margin: 6px 0 6px 10px;
}
#menuForm .ui-panelmenu .ui-menuitem-link{
    width:90%;
    line-height:20px;
    padding: .6rem .9rem;
    border-radius:10px;
    color:var(--ink-900);
    display:block;
}
#menuForm .ui-panelmenu .ui-menuitem-link:hover{
    background:var(--panel-50);
}

/* Item ACTIVO (ruta actual) */
#menuForm .ui-panelmenu .ui-menuitem-link.active{
    background:var(--arch-primary-300);
    color:black;
    border-left:4px solid var(--arch-primary-900);
}

/* Animaciones off para evitar parpadeo */
#menuForm .ui-panelmenu .ui-panelmenu-content { transition: none !important; }
#menuForm .ui-panelmenu .ui-panelmenu-header  { transition: none !important; }


/* ========== 8) MISC (compat restos) ========== */
#menuForm .ui-widget-header{
    height:50px;
    border:1px solid var(--primary);
}
#menuForm .ui-widget-header .ui-icon{
    display:none;
}
#menuForm .ui-menu .ui-menu-list .ui-widget-header h3{
    margin-top:3px;
}
.background-block-ui{
    text-align:center;
    background:#FFF !important;
}
.preformatted{
    white-space:pre-wrap;
}


/* ========== 9) PANELS & CONTENEDORES ========== */
.pnlSinBorde,
.pnlSinBorde td,
.pnlSinBorde tr{
    border-style:hidden !important;
    background:transparent;
}
.pnlConBorde,
.pnlConBorde td,
.pnlConBorde tr{
    border:1px solid var(--line-300) !important;
}
.padding-panel-grid-6 td{
    padding:6px 4px;
}
.div_vertical_align_center{
    display:grid !important;
    align-content:center !important;
}
.panel_align_center{ text-align:center; }
.panel_vertical_align_center{ vertical-align:middle !important; }
.panel_align_top{ vertical-align:top !important; }
.panel_align_bottom{ vertical-align:bottom; }

/* Header de página genérico */
.box-header-pagina {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--arch-primary-100);
    padding: .5rem 1rem;
    border-radius: 10px;
    width: max-content;
    margin: 0 auto;
    color: var(--arch-primary-900);
    /*font-weight: 700;*/
}

.box-sub-header-pagina {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    width: max-content;
    margin: .75rem auto 0;
    color: var(--arch-primary-900);
    font-weight: 700;
}


/* ========== 10) CLASES DE FONDO (chips/estados) ========== */
.bkgPolizaActiva{
    background:#B0F3B0 !important;
    color:#000 !important;
}
.bg-rojo-300{ background:#FF797C !important; }
.bg-rojo-100{ background:#FFBCBC !important; }
.bg-rojo-sitio{ background:#FFB0B0 !important; }


/* ========== 11) LEGACY LAYOUT UTILS (para transición) ========== */
.float-right{ float:right; }
.float-left{ float:left; }
.h-25rem{ height:2.5rem !important; }

.colHeigthLarge{ height:70px; }
.colHeigthMedium{ height:50px; }

.colWidth1200{width:1200px;}
.colWidth1150{width:1150px;}
.colWidth1100{width:1100px;}
.colWidth1000{width:1000px;}
.colWidth950{width:950px;}
.colWidth900{width:900px;}
.colWidth850{width:850px;}
.colWidth800{width:800px;}
.colWidth750{width:750px;}
.colWidth700{width:700px;}
.colWidth650{width:650px;}
.colWidth600{width:600px;}
.colWidth550{width:550px;}
.colWidth500{width:500px;}
.colWidth470{width:470px;}
.colWidth450{width:450px;}
.colWidth400{width:400px;}
.colWidth350{width:350px;}
.colWidth335{width:335px;}
.colWidth300{width:300px;}
.colWidth275{width:275px;}
.colWidth250{width:250px;}
.colWidth230{width:230px;}
.colWidth210{width:210px;}
.colWidth200{width:200px;}
.colWidth183{width:183px;}
.colWidth170{width:170px;}
.colWidth150{width:150px;}
.colWidth140{width:140px;}
.colWidth120{width:120px;}
.colWidth115{width:115px;}
.colWidth110{width:110px;}
.colWidth100{width:100px;}
.colWidth90{width:90px;}
.colWidth80{width:80px;}
.colWidth60{width:60px;}
.colWidth50{width:50px;}
.colWidth40{width:40px;}
.colWidth30{width:30px;}

/* PanelGrid que se ajuste al contenido (tabla "compacta") */
.form-fixed {
    margin: 0 auto;
}

table.ui-panelgrid.form-fixed {
    width: auto !important;           /* no 100% */
    table-layout: fixed;
}

/* ========== 12) SIDEBAR COLAPSABLE (sin recarga) ========== */
.arch-sidebar{
    flex: 0 0 320px;
    max-width: 320px;
}

/* Colapsado: sólo visible el botón (≈60px) */
.arch-sidebar.is-collapsed{
    flex: 0 0 60px !important;
    max-width: 60px !important;
    overflow: hidden !important;
}

.arch-sidebar.is-collapsed .ui-panelmenu{
    display: none !important;
}

@media (prefers-reduced-motion: no-preference){
    .arch-sidebar{
        transition: flex-basis 150ms ease, max-width 150ms ease;
    }
}


/* ========== 13) LOGIN ARCHIDOC ========== */
.login-page{
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: start;
    justify-items: center;
    padding: 4rem 1rem 2rem;
    background: radial-gradient(circle at top, #f4e7ff 0, #f9fafb 55%, #e5e7eb 100%);
}

.login-hero{
    margin-bottom: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-logo-img{
    width: min(60vw, 420px);
    max-width: 420px;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.login-card{
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    border: 1px solid var(--line-300, #D7DCE3);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(79,35,108,0.25);
    padding: 2.25rem;
}
@media (min-width: 480px){
    .login-card{ padding: 2.5rem 2.75rem; }
}

.login-card-header{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line-300, #D7DCE3);
    color: var(--arch-primary-800);
}
.login-card-header .title{
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.login-grid{
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: .75rem 1rem;
    align-items: center;
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.login-grid .login-label{
    color: var(--ink-700);
    font-weight: 700;
    font-size: .95rem;
    margin: 0;
}

.login-card .ui-inputfield{
    width: 100%;
    height: 42px;
    border-radius: 10px;
}

.login-actions{
    margin-top: .75rem;
}
.login-actions .ui-button{
    width: 100%;
    height: 48px;
    font-weight: 700;
    border-radius: 10px;
}


/* ========== 14) ESTILOS MENU MAESTRO ========== */
.cfg-searchwrap {
    width: 800px;
    margin: 24px auto 12px;
}

.cfg-searchbar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cfg-search-input {
    width: 70%;
}

@media (max-width: 768px) {
    .cfg-searchwrap {
        width: 100%;
        padding: 0 12px;
    }
    .cfg-search-input {
        width: 100%;
    }
}

.cfg-row {
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.cfg-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 6px;
    opacity: 0.9;
    font-size: 0.95rem;
}


/* ========== 15) PAGINAS LIST DEL MAESTRO ========== */
.maestro-btn-back {
    height: 40px;
    width: 150px;
    font-size: 1.125rem !important;
}

.maestro-btn-add {
    height: 40px;
    width: 120px;
    font-size: 1.125rem !important;
}

.maestro-titulo-tabla {
    background-color: var(--arch-primary-100) !important;
    font-family:Trebuchet MS, Helvetica, sans-serif !important;
    font-size: 1.125rem !important;
    text-align: center;
    font-weight: bold;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    color: var(--arch-primary-800) !important;
}


/* =======================================================
   16) FORM LAYOUT UTILS (grid, botones, acciones, inputs)
   ======================================================= */

.form-max{
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Grids genéricos */
.form-grid-2{
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: .6rem 1rem;
    align-items: center;
}
@media (max-width: 768px){
    .form-grid-2{ grid-template-columns: 1fr; }
    .form-grid-2 > *:nth-child(odd){ margin-top: .25rem; }
}

.form-grid-4{
    display: grid;
    grid-template-columns: 160px 1fr 120px 1fr;
    gap: .6rem 1rem;
    align-items: center;
}
@media (max-width: 992px){
    .form-grid-4{
        grid-template-columns: 160px minmax(0,1fr);
    }
}
@media (max-width: 768px){
    .form-grid-4{ grid-template-columns: 1fr; }
}

/* Inputs full width */
.full-w{
    width:100% !important;
}
.full-w .ui-inputfield,
.full-w .ui-selectonemenu,
.full-w .ui-selectonemenu-label,
.full-w .ui-selectonemenu-label.ui-inputfield{
    width: 100% !important;
}

/* Mayúsculas solo visuales */
.uppercase{
    text-transform: uppercase !important;
}

/* Mensajes de formulario */
.form-messages{
    margin: .5rem auto 1rem;
    max-width: 920px;
}

/* Acciones del formulario */
.form-actions{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 3rem;
}

/* Botón XL */
.btn-xl{
    height: 50px !important;
    min-width: 150px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

/* Botón XXL */
.btn-xxl{
    height: 50px !important;
    min-width: 300px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}


.btn-add-footer{
    height: 50px !important;
    min-width: 100px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

/* Variante outline con paleta Archidoc */
.btn-outline{
    background: #FFF !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}
.btn-outline.ui-state-hover,
.btn-outline.ui-state-focus{
    background: #FFF !important;
    color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Botón cuadrado pequeño (+ rubro) */
.btn-square-30{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin-left: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
}

/* Grupo combo + botón */
.inputgroup-append{
    display: flex;
    align-items: center;
}
.inputgroup-append > .ui-selectonemenu{
    flex: 1 1 auto;
}

/* Diálogo acciones */
.dialog-actions{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 50px;
    padding: 0 15px;
}
.btn-lg{
    height: 40px !important;
    min-width: 140px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

/* Altura mínima inputs */
.form-grid-2 .ui-inputfield,
.form-grid-4 .ui-inputfield{
    min-height: 36px;
}

/* PanelGrid: respetar anchos fijos */
table.ui-panelgrid.form-fixed{
    table-layout: fixed;
    width: 100%;
}
table.ui-panelgrid.form-fixed td{
    vertical-align: middle;
    overflow: visible;
}
table.ui-panelgrid.form-fixed .ui-inputfield,
table.ui-panelgrid.form-fixed .ui-inputnumber,
table.ui-panelgrid.form-fixed .ui-inputmask,
table.ui-panelgrid.form-fixed .ui-selectonemenu,
table.ui-panelgrid.form-fixed .ui-calendar,
table.ui-panelgrid.form-fixed .ui-selectcheckboxmenu {
    width: 100% !important;
    box-sizing: border-box;
}
table.ui-panelgrid.form-fixed .ui-selectonemenu .ui-selectonemenu-label{
    width: 100%;
}


/* ========== 17) HEADER ARCHIDOC ========== */
.arch-header{
    width: 100%;
    min-height: 5.5rem;
    display: grid;

    /* Izq fijo 190, centro flexible, der fijo 190 */
    grid-template-columns: 320px 1fr 0px;

    align-items: center;
    gap: 1rem;
    padding: .75rem 1.5rem;
    background: var(--arch-primary-800);
    color: var(--arch-header-fg);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.arch-header-logo,
.arch-header-logo-right{
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    height: 55px;
    width: 190px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    padding: 8px 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.arch-header-logo-right{
    justify-self: end;
}

.arch-header-title{
    font-family: Trebuchet MS, Helvetica, sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
}