/* Equipo: roles y permisos, supervisor, visita previa y préstamo de herramientas (web y celular). */

.role-supervisor { background: var(--ok-50); color: var(--ok); }
.role-otro { background: var(--acero-100); color: var(--acero-700); }
.surface-switch { display: flex; align-items: center; gap: 10px; }

/* Barra inferior con menos pestañas (según el rol). */
.tabbar.one { grid-template-columns: 1fr; }
.tabbar.two { grid-template-columns: repeat(2, 1fr); }
.tabbar.three { grid-template-columns: repeat(3, 1fr); }
.tabbar.one .tab-ind { width: calc(100% - 12px); }
.tabbar.two .tab-ind { width: calc((100% - 12px) / 2); }
.tabbar.three .tab-ind { width: calc((100% - 12px) / 3); }
.tabbar.four .tab-ind { width: calc((100% - 12px) / 4); }

/* R52 · Cliente 360 → Portal del cliente */
.c360-portal .card-head { display: flex; align-items: center; gap: 10px; }
.c360-portal-users { display: grid; gap: 8px; }
.c360-portal-u { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--acero-200); border-radius: 12px; }
.c360-portal-link { background: var(--oro-50); border: 1px solid var(--oro-100); border-radius: 12px; padding: 10px 12px; font-size: .9rem; }
.c360-portal-form { border-top: 1px solid var(--acero-100); padding-top: 12px; }
.c360-portal-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 240px; overflow: auto; }
/* R52 · Equipos de la tienda */
.asset-row { border-bottom: 1px solid var(--acero-100); }
.asset-row .list-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.asset-more { padding: 0 12px 12px; }
.asset-events { display: grid; gap: 4px; font-size: .86rem; }