/* Entrada y páginas públicas, con el lenguaje de la aplicación: lienzo gris, una hoja blanca
   con sombra suave y, en la entrada, las fichas de las cuatro vistas con sus colores. */
html[data-ui="coss"] body.publico{min-height:100dvh;display:flex;flex-direction:column;align-items:center;background:#E9ECF1;padding:0 20px;font-family:"Cal Sans UI",var(--font);color:#18181B}
html[data-ui="coss"] body.publico .centro{flex:1;width:100%;display:grid;place-items:center;min-height:auto;padding:40px 0 20px}
.pub-marco{display:grid;grid-template-columns:minmax(0,1fr);width:min(440px,100%);border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(26,32,48,.05),0 24px 60px -28px rgba(26,32,48,.32),0 0 0 1px rgba(26,32,48,.05);overflow:hidden}
.publico-doble .pub-marco{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:min(880px,100%)}
html[data-ui="coss"] body.publico .tarjeta-entrada{width:auto;max-width:none;margin:0;padding:44px 44px 38px;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;display:flex;flex-direction:column;justify-content:center}
html[data-ui="coss"] body.publico .pub-logo{display:block;width:150px;height:auto;margin:0 0 56px}
html[data-ui="coss"] body.publico h1{margin:0 0 8px;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:#18181B}
html[data-ui="coss"] body.publico .texto-suave{margin:0 0 28px;color:#74747C;font-size:14.5px;line-height:1.5}
html[data-ui="coss"] body.publico .texto-suave b{color:#18181B;font-weight:500}
html[data-ui="coss"] body.publico .boton-google{display:flex;align-items:center;justify-content:center;width:100%;height:48px;min-height:48px;gap:11px;border:0;border-radius:12px;background:#15171C;color:#F4F4F2;font:500 15px "Cal Sans UI",var(--font);text-decoration:none;box-shadow:0 1px 2px rgba(10,12,18,.2),0 10px 22px -12px rgba(10,12,18,.55);cursor:pointer;transition:background .12s,transform .1s}
html[data-ui="coss"] body.publico .boton-google svg{padding:4px;width:26px;height:26px;border-radius:99px;background:#fff}
html[data-ui="coss"] body.publico .boton-google:hover{background:#20232B}
html[data-ui="coss"] body.publico .boton-google:active{transform:scale(.995)}
html[data-ui="coss"] body.publico .boton-google:focus-visible{outline:2px solid #15171C;outline-offset:3px}
html[data-ui="coss"] body.publico form{margin:0}
html[data-ui="coss"] body.publico .nota{margin:22px 0 0;color:#74747C;font-size:13px;line-height:1.5}
html[data-ui="coss"] body.publico .nota-local{margin-top:14px;padding:10px 12px;border-radius:10px;background:#F5F6F9;font-size:12.5px}
html[data-ui="coss"] body.publico .aviso{padding:10px 12px;border-radius:10px;background:var(--orange-soft);color:var(--orange-ink);font-size:13px}
html[data-ui="coss"] body.publico .mensajes{list-style:none;margin:-28px 0 28px;padding:0}
html[data-ui="coss"] body.publico .mensaje{padding:10px 12px;border-radius:10px;background:#F5F6F9;font-size:13px;color:#46464D}
html[data-ui="coss"] body.publico .mensaje.error{background:#FDECEA;color:#B42318}
html[data-ui="coss"] body.publico .boton-secundario{margin-top:8px;align-self:flex-start}
.pub-pie{margin:0;padding:0 0 20px;font-size:12px;color:#8A8D96}
html[data-ui="coss"] body.publico .volver{display:inline-block;margin:0 0 18px;font-size:13px;color:#74747C;text-decoration:none}
html[data-ui="coss"] body.publico .volver::before{content:"← "}
html[data-ui="coss"] body.publico .volver:hover{color:#18181B}

/* El lado derecho: la bandeja gris de la aplicación con una ficha por vista. */
.pub-lado{display:flex;flex-direction:column;justify-content:center;gap:6px;margin:8px;padding:26px 22px;border-radius:16px;background:#DDE1E9}
.pub-lado-t{margin:0 2px 10px;font-size:13px;font-weight:500;color:#46464D}
.pub-lado-p{margin:12px 2px 0;font-size:12.5px;line-height:1.45;color:#5E626C}
.pub-v{--acc:#3F4654;--acc-s:#E9EBEF;position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 20px;border-radius:11px;background:#fff;box-shadow:0 1px 1px rgba(26,32,48,.05),0 2px 5px -2px rgba(26,32,48,.1),0 0 0 1px rgba(26,32,48,.05);overflow:hidden}
.pub-v::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--acc)}
.pub-v b{font-size:14px;font-weight:600;color:#18181B}
.pub-v span{font-size:12.5px;line-height:1.4;color:#5E626C}
.pub-v[data-foco="compras"]{--acc:#2563EB}.pub-v[data-foco="diseno"]{--acc:#C026A3}.pub-v[data-foco="analista"]{--acc:#0E9384}.pub-v[data-foco="direccion"]{--acc:#DE6B0B}
@media (max-width:760px){.publico-doble .pub-marco{grid-template-columns:minmax(0,1fr);width:min(440px,100%)}.pub-lado{margin:0 8px 8px}html[data-ui="coss"] body.publico .tarjeta-entrada{padding:32px 28px 28px}html[data-ui="coss"] body.publico .pub-logo{margin-bottom:36px}}

/* Copia local: las cuentas de prueba, una lista por tipo de usuario con el color de su vista. */
html[data-ui="coss"] body.publico.publico-ancho .centro{place-items:start center}
.publico-ancho .pub-marco{width:min(800px,100%)}
html[data-ui="coss"] body.publico.publico-ancho .pub-logo{margin-bottom:28px}
html[data-ui="coss"] body.publico.publico-ancho .tarjeta-entrada{justify-content:flex-start}
.entrar{display:flex;flex-direction:column;gap:22px;margin:0}
.entrar-g{--acc:#3F4654;--acc-t:#2B303A;--acc-s:#E9EBEF}
.entrar-g[data-foco="compras"]{--acc:#2563EB;--acc-t:#1D4ED8;--acc-s:#E8EFFE}
.entrar-g[data-foco="diseno"]{--acc:#C026A3;--acc-t:#9D1C85;--acc-s:#FBE8F7}
.entrar-g[data-foco="analista"]{--acc:#0E9384;--acc-t:#0B7468;--acc-s:#DDF4F0}
.entrar-g[data-foco="direccion"]{--acc:#DE6B0B;--acc-t:#A64B00;--acc-s:#FDEEDD}
.entrar-g[data-foco="responsable"]{--acc:#8A6A00;--acc-t:#6B5200;--acc-s:#F4EED6}
html[data-ui="coss"] .entrar-g h2{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;padding-bottom:7px;border-bottom:2px solid var(--acc);font-size:13px;font-weight:600;color:var(--acc-t)}
.entrar-g h2 small{font-weight:400;color:var(--text-3)}
.entrar-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:8px}
html[data-ui="coss"] .entrar-l button{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 12px 8px 9px;border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s}
html[data-ui="coss"] .entrar-l button:hover{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-s)}
html[data-ui="coss"] .entrar-l button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.entrar-l button[data-actual]{border-color:var(--acc)}
.entrar-av{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:99px;background:var(--acc-s);color:var(--acc-t);font-size:12.5px;font-weight:600}
.entrar-l button>span:last-child{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.entrar-l b{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entrar-l small{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}