/* portal-marco.css — La barra de arriba del portal (idiomas, color de la
   interfaz, tema y usuario). La comparten el portal, la cotizacion y el
   buzon de sugerencias, para que sean iguales (Luis, 24-09-2026). */

/* Selector de idioma de la barra superior (con banderas, igual que el inicio) */
.portal-lang{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;}
.portal-lang a{display:inline-flex;align-items:center;gap:6px;font-size:13px;text-decoration:none;color:var(--muted);padding:3px 9px;border-radius:999px;
    border:1px solid var(--linea);transition:border-color .15s ease,color .15s ease;}
.portal-lang a .flag{width:20px;height:14px;flex:none;border-radius:3px;object-fit:cover;
    box-shadow:0 0 0 1px rgba(0,0,0,.14);filter:saturate(.92);opacity:.82;transition:opacity .15s ease;}
.portal-lang a:hover .flag,.portal-lang a.is-active .flag{opacity:1;filter:none;}
.portal-lang a:hover{border-color:var(--acento);color:var(--acento-osc);}
.portal-lang a.is-active{background:var(--acento);border-color:var(--acento);color:#fff;font-weight:700;}
.portal-lang a.is-active .flag{box-shadow:0 0 0 1px rgba(255,255,255,.55);}
/* Barra de preferencias (idioma + color + tema) arriba a la derecha. */
.portal-prefs{position:fixed;top:16px;right:16px;z-index:50;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.portal-lang--prefs{margin:0;gap:5px;background:var(--card);border:1px solid var(--linea);border-radius:999px;padding:4px 6px;box-shadow:0 4px 14px rgba(0,0,0,.14);}
.portal-lang--prefs a{padding:3px 8px;border:0;font-size:12.5px;}
.portal-lang--prefs a.is-active{background:var(--acento);color:#fff;}
/* El botón de tema ya no flota solo: va dentro de la barra. */
.theme-toggle--inline{position:static !important;top:auto !important;right:auto !important;}
/* Selector de color de la interfaz */
.portal-color{position:relative;}
.portal-color__btn{width:40px;height:40px;border-radius:999px;border:1px solid var(--linea);background:var(--card);color:var(--acento);
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.14);transition:border-color .15s ease;}
.portal-color__btn:hover{border-color:var(--acento);}
.portal-color__btn svg{width:19px;height:19px;}
.portal-color__menu{position:absolute;top:48px;right:0;width:238px;background:var(--card);border:1px solid var(--linea);border-radius:12px;
    padding:14px;box-shadow:0 10px 28px rgba(0,0,0,.22);}
.portal-color__t{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--pizarra);}
.portal-color__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.portal-color__dot{width:100%;aspect-ratio:1;border-radius:999px;background:var(--c);border:2px solid transparent;cursor:pointer;padding:0;
    box-shadow:0 0 0 1px var(--linea);transition:transform .12s ease;}
.portal-color__dot:hover{transform:scale(1.12);}
.portal-color__dot.is-active{border-color:var(--pizarra);}
.portal-color__custom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:12.5px;color:var(--muted);}
.portal-color__custom input[type=color]{width:38px;height:26px;border:1px solid var(--linea);border-radius:6px;background:none;cursor:pointer;padding:2px;}
.portal-color__reset{width:100%;margin-top:10px;padding:7px;border-radius:8px;border:1px solid var(--linea);background:transparent;color:var(--muted);
    font-size:12.5px;cursor:pointer;font-family:inherit;}
.portal-color__reset:hover{border-color:var(--acento);color:var(--acento);}
@media (max-width:720px){ .portal-prefs{position:static;margin:0 0 14px;} }
/* Deja espacio a la derecha para la barra de preferencias. */
.portal-topbar{padding-right:52px;}
/* Acciones de la barra superior como BOTONES (no enlaces azules).
   Van con el color que el cliente eligió; "Cerrar sesión" en rojo. */
.portal-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.portal-btn-top{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;
    text-decoration:none;cursor:pointer;font-family:inherit;border:1px solid var(--acento);background:transparent;color:var(--acento);
    transition:background .15s ease,color .15s ease,border-color .15s ease;}
.portal-btn-top:hover{background:var(--acento);color:#fff;}
.portal-btn-top svg{width:15px;height:15px;flex:none;}
.portal-btn-top--yo{background:var(--acento);color:#fff;}
.portal-btn-top--yo:hover{filter:brightness(1.08);}
.portal-btn-top--salir{border-color:#e0574a;color:#e0574a;}
.portal-btn-top--salir:hover{background:#e0574a;color:#fff;}
/* Menú de usuario (arriba a la derecha, como en cualquier web) */
.portal-user{position:relative;}
.portal-user__btn{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;cursor:pointer;
    border:1px solid var(--linea);background:var(--card);color:var(--pizarra);font-family:inherit;font-size:13.5px;font-weight:600;
    box-shadow:0 4px 14px rgba(0,0,0,.14);transition:border-color .15s ease;}
.portal-user__btn:hover{border-color:var(--acento);}
.portal-user__avatar{width:30px;height:30px;border-radius:999px;background:var(--acento);color:#fff;display:flex;align-items:center;
    justify-content:center;font-size:12.5px;font-weight:700;flex:none;}
.portal-user__nom{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.portal-user__chev{width:14px;height:14px;color:var(--muted);flex:none;}
.portal-user__menu{position:absolute;top:48px;right:0;min-width:238px;background:var(--card);border:1px solid var(--linea);
    border-radius:12px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.22);z-index:60;}
.portal-user__head{padding:10px 12px 12px;border-bottom:1px solid var(--linea);margin-bottom:6px;display:flex;flex-direction:column;gap:2px;}
.portal-user__head strong{font-size:13.5px;color:var(--pizarra);}
.portal-user__head span{font-size:12px;color:var(--muted);word-break:break-all;}
.portal-user__it{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;
    border:0;background:transparent;color:var(--pizarra);font-family:inherit;font-size:13.5px;font-weight:600;text-align:left;
    text-decoration:none;cursor:pointer;transition:background .12s ease,color .12s ease;}
.portal-user__it svg{width:17px;height:17px;flex:none;color:var(--acento);stroke-width:2;}
.portal-user__it:hover{background:var(--suave);color:var(--acento);}
.portal-user__it:hover svg{color:var(--acento);}
.portal-user__it--salir{color:#e0574a;}
.portal-user__it--salir svg{color:#e0574a;}
.portal-user__it--salir:hover{background:rgba(224,87,74,.12);color:#e0574a;}
.portal-user__it--salir:hover svg{color:#e0574a;}


/* La foto de perfil en el boton de usuario */
.portal-user__avatar--foto { padding: 0; overflow: hidden; }
.portal-user__avatar--foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; }

/* Sin sesion: el boton de entrar, con la forma del de usuario */
.portal-entrar { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--linea); background: var(--card); color: var(--pizarra); font-size: 13.5px; font-weight: 600;
    text-decoration: none; transition: border-color .15s ease; }
.portal-entrar:hover { border-color: var(--acento); }
.portal-entrar svg { width: 16px; height: 16px; color: var(--acento); }

/* Sin sesion no hay menu de la izquierda: contenido y columna de ayuda */
.p-layout--solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .p-layout--solo { grid-template-columns: minmax(0, 1fr) 300px; } }