con mas especificidad. */
#team_members_list .tmp-row-right .tmp-role-options {
background: #fff !important;
max-width: 342px !important;
}
/* Con los dos fondos tintados y sin separacion, las opciones se leian como un
solo bloque continuo y no se distinguia donde acababa una y empezaba la otra. */
.tmp-role-options--roles .tmp-role-opt + .tmp-role-opt { margin-top: 6px; }
.tmp-role-opt:hover { background: var(--eb-gris-hover, #F2F2F5); }
.tmp-role-opt--on { background: var(--eb-indigo-soft, #F0EFFA); }
.tmp-role-opt--on:hover { background: var(--eb-indigo-press-soft, #E5E1FA); }
.tmp-role-opt-txt { min-width: 0; }
.tmp-role-opt-txt b,
.tmp-role-opt-txt em { white-space: normal !important; overflow-wrap: anywhere; }
/* Circulo vacio en reposo, relleno indigo con la marca en blanco al estar
seleccionado. Antes solo habia una marca suelta que aparecia y desaparecia,
asi que en reposo no habia nada que indicara que la fila era seleccionable. */
.tmp-role-opt-check {
flex: none;
box-sizing: border-box;
width: 18px;
height: 18px;
margin-top: 1px;
position: relative;
border-radius: 50%;
border: 1.5px solid var(--eb-circulo-borde, #C9CAD4);
background: #fff;
transition: border-color .13s ease, background .13s ease;
}
.tmp-role-opt:hover .tmp-role-opt-check { border-color: var(--eb-circulo-hover, #9FA1B0); }
.tmp-role-opt--on .tmp-role-opt-check {
border-color: var(--eb-indigo, #3533AD);
background: var(--eb-indigo, #3533AD);
}
/* El CSS global tiene "a, button, input { outline: 0 !important }", asi que el
anillo de foco va por box-shadow como en el resto del sistema. */
.tmp-role-opt:focus-visible {
outline: none;
box-shadow: var(--eb-focus, 0 0 0 2px #fff, 0 0 0 4px #A9A7E6);
}
.tmp-role-opt--on:hover .tmp-role-opt-check {
border-color: var(--eb-indigo-hover, #2A288C);
background: var(--eb-indigo-hover, #2A288C);
}
.tmp-role-opt--on .tmp-role-opt-check::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.tmp-role-opt-txt { display: flex; flex-direction: column; gap: 2px; }
.tmp-role-opt-txt b { font-size: 13.5px; font-weight: 600; color: var(--eb-indigo-ink, #241D63); }
.tmp-role-opt-txt em { font-style: normal; font-size: 12px; line-height: 1.45; color: #6f7189; }
/* --- acciones: la destructiva separada y en rojo --- */
.tmp-role-options--acciones { min-width: 220px; }
.tmp-role-options--acciones .tmp-opt-remove {
border-top: 1px solid #ececef;
color: var(--eb-danger, #C0223C) !important;
}
.tmp-role-options--acciones .tmp-opt-remove:hover { background: #fdf2f4 !important; }
/* --- bloque administrar cuenta --- */
.tmp-account {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 14px;
padding: 14px 16px;
border-radius: var(--eb-radio, 8px);
background: var(--eb-indigo-soft, #F0EFFA);
}
.tmp-account-txt { display: flex; flex-direction: column; gap: 3px; }
.tmp-account-title { font-size: 14px; font-weight: 600; color: var(--eb-indigo-ink, #241D63); }
.tmp-account-desc { font-size: 12.5px; color: #6f7189; }
.tmp-account-btn {
display: inline-grid;
place-items: center;
box-sizing: border-box;
flex: none;
height: var(--eb-h-sm, 36px);
padding: 0 16px;
border: 0;
border-radius: var(--eb-radio, 8px);
background: #fff;
box-shadow: inset 0 0 0 1px var(--eb-indigo-border, #DDD9F4);
font-family: inherit;
font-size: 13.5px;
font-weight: var(--eb-peso, 600);
line-height: 1;
color: var(--eb-indigo-ink, #241D63);
cursor: pointer;
white-space: nowrap;
}
/* CLAVE: sin position:relative el
absolute busca ancestro posicionado
mas arriba y aparece con left negativo, fuera del modal. */
.tmp-row-right .tmp-role-select { position: relative; }
/* La posicion la calcula team_toggle_menu() en coordenadas de ventana, porque
la lista recorta con overflow-y: auto. Aqui solo forma y tamano. */
.tmp-row-right .tmp-role-options {
width: max-content;
min-width: 220px;
max-width: 342px;
z-index: 9999;
background: #fff;
box-shadow: 0 8px 24px rgba(26,26,46,.14), 0 0 0 1px rgba(26,26,46,.06);
}
.tmp-row-right .tmp-role-options--acciones { min-width: 190px; max-width: 220px; }
/* El menu flota sobre las filas de abajo y se veia el texto a traves. Con el id
del contenedor la especificidad gana a cualquier regla legacy sobre
. */
#team_members_list .tmp-row-right .tmp-role-options {
background: #fff !important;
background-color: #fff !important;
opacity: 1 !important;
backdrop-filter: none !important;
}
/* La lista hace scroll propio: con overflow visible las filas se pintaban
encima de TEAM SEATS y de Manage my account al pasar de 6 miembros.
El scroll vive aqui y NO en .tmp-shell, para que cabecera, fila de invitar
y bandas inferiores queden siempre fijas.
Los menus de rol se sacan del flujo con position: fixed desde el JS, asi que
este overflow ya no los recorta. */
/* Con overflow-y: auto el navegador convierte el overflow-x en auto tambien, y
recorta a ras de caja: los avatares (que llevan margin-left: -2px de
compensacion optica) se cortaban por la izquierda, y la barra de scroll se
comia el boton de tres puntos por la derecha.
El padding da el aire, y el margen negativo lo devuelve para que la lista
siga alineada con el resto del panel. */
.tmp-list {
overflow-y: auto !important;
overflow-x: hidden;
min-height: 0;
flex: 1 1 auto;
padding-left: 4px;
padding-right: 12px;
margin-left: -4px;
margin-right: -12px;
scrollbar-gutter: stable;
}
.tmp-left { overflow: hidden !important; }
.tmp-row { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
/* El shell deja de hacer scroll: lo hace la lista */
.tmp-modal-overlay .tmp-modal .tmp-shell { overflow-y: hidden !important; }
/* El scroll vive SOLO en el shell, y el modal deja de recortar */
.tmp-modal-overlay .tmp-modal { overflow: visible !important; }
.tmp-modal-overlay .tmp-modal .tmp-shell {
max-height: calc(90vh - 40px);
overflow-y: auto;
overflow-x: visible;
}
/* La direccion la decide team_toggle_menu() midiendo el hueco real: una regla
por posicion de fila abria hacia arriba aunque hubiera sitio de sobra debajo,
y el menu tapaba la fila anterior. */
.tmp-role-select.open-up .tmp-role-options {
top: auto;
bottom: calc(100% + 6px);
}
.tmp-account-btn:hover { background: var(--eb-indigo-soft, #F0EFFA); }
/* ============================================================
BOTON INVITAR desactivado (hasta que haya email valido)
============================================================ */
.tmp-invite-btn.tmp-disabled {
opacity: .45;
cursor: default;
pointer-events: none;
}
/* ============================================================
Columna derecha: mismo inicio que el mockup
(padding-top alineado con el contenido, sin titulo)
============================================================ */
.tmp-modal-overlay .tmp-modal .tmp-right {
padding-top: 32px !important;
}
/* ============================================================
MINIPOPUP de confirmacion (eliminar miembro)
============================================================ */
.tmp-confirm-overlay {
position: fixed;
inset: 0;
background: rgba(20,25,45,.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 100010;
padding: 20px;
}
.tmp-confirm-box {
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,.3);
padding: 26px 26px 20px;
max-width: 380px;
width: 100%;
text-align: center;
}
.tmp-confirm-msg {
font-size: 16px;
font-weight: 600;
color: #1c2333;
margin: 0 0 22px;
line-height: 1.4;
}
.tmp-confirm-btns {
display: flex;
gap: 10px;
justify-content: center;
}
.tmp-confirm-cancel,
.tmp-confirm-ok {
border: none;
border-radius: 10px;
padding: 11px 22px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.tmp-confirm-cancel {
background: #fff;
color: #3533AD;
border: 1px solid #d7d9e0;
}
.tmp-confirm-cancel:hover { background: #f5f5f7; }
.tmp-confirm-ok {
background: #E02424;
color: #fff;
}
.tmp-confirm-ok:hover { background: #c81e1e; }
/* etiqueta "Plantilla de equipo" clicable: abre el popup de compartir */
.brand_template_click { cursor: pointer; }
.brand_template_click:hover { opacity: .85; }
/* nivel "todo el equipo": se ocultan las filas de permisos por usuario
(rigen los roles de equipo). Sus data-role siguen en el DOM, asi que al
volver a "personas especificas" reaparecen con el estado que tuvieran.
Los invitados nuevos (email aun sin equipo) si se muestran, con su selector */
/* (la ocultacion por nivel la gestiona el JS con la clase row-team-hidden) */
/* red de seguridad: si por lo que sea una fila de miembro quedara visible
en modo equipo, al menos sin selector de rol */
.share-system-folder[data-access="team"] .box-fila-select[data-target-type="user"] .select-invite,
.share-system-folder[data-access="team"] .box-fila-select[data-target-type="email"][data-invited="1"] .select-invite {
display: none !important;
}
/* nivel "todo el equipo": filas de miembros ocultas.
Lleva #id + clase extra para ganar al display:flex !important de arriba */
.share-system-folder #share_members_list .box-fila-select.row-team-hidden {
display: none !important;
}
/* la X propia del panel done se retiro: la pone el popup contenedor */
.share-panel-done .done-close-x { display: none !important; }
/* ============================================================
CARPETAS rediseño: chips de acceso (compartidos entre superficies)
============================================================ */
.tmf-pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 9px 0 7px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
box-sizing: border-box;
}
.tmf-pill-only { border: 1px dashed #d4d4dc; color: #8b8b96; background: #fff; }
.tmf-pill-team { background: #e8e5ff; color: #3a2ecb; }
.tmf-mails { display: inline-flex; align-items: center; }
.tmf-bolita {
width: 24px;
height: 24px;
border-radius: 999px;
border: 2px solid #fff;
box-sizing: border-box;
display: inline-grid;
place-items: center;
font-size: 11px;
font-weight: 600;
background: #e6e6ea;
color: #555;
text-indent: 0;
line-height: 1;
z-index: 1;
}
.tmf-bolita + .tmf-bolita { margin-left: -8px; }
/* fila de carpeta del menu de equipo */
.tmf-item { position: relative; }
.tmf-item .tmf-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 36px 10px 8px; /* hueco a la derecha para los 3 puntitos */
border-radius: 9px;
cursor: pointer;
}
.tmf-item .tmf-row:hover { background: #f5f5f7; }
.tmf-icon { flex: none; width: 46px; height: 44px; position: relative; }
.tmf-tab {
position: absolute; left: 0; top: 6%;
width: 52%; height: 16%;
background: #dfe2e4;
border-radius: 4px 4px 0 0;
}
.tmf-body {
position: absolute; left: 0; right: 0; top: 17%; bottom: 6%;
background: #eceef0;
border-radius: 6px;
overflow: hidden;
}
.tmf-inner {
position: absolute;
inset: 14% 10% 12%;
background: #fff;
border: 1px solid #e2e5e8;
box-sizing: border-box;
}
.tmf-item .tmf-txt { flex: 1; min-width: 0; }
.tmf-item .tmf-txt p {
margin: 0;
font-size: 14px;
font-weight: 500;
color: #16151a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tmf-item .tmf-txt small { font-size: 12.5px; color: #8b8b96; }
.tmf-access { flex: none; display: flex; align-items: center; }
/* movil: los 3 puntitos siempre visibles y clicables */
@media (max-width: 900px) {
.tmf-item .accionesFold,
.tmf-item .more-buttons-box {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
/* miniatura del ultimo diseño dentro de la mini carpeta */
.tmf-inner { overflow: hidden; }
.tmf-inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* cabecera minimal del popup de compartir: titulo + subtitulo */
.share-system-folder > .title .share-title-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.share-system-folder > .title .share-title-sub {
font-size: 13px;
font-weight: 400;
color: #8b8b96;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* la fila antigua del nombre, por si quedara en algun flujo cacheado */
.share-system-folder .folder-name { display: none !important; }
/* ============================================================
PANEL MI EQUIPO (rediseño mockup): cabecera, tabs, nota y
pantalla inicial sin equipo
============================================================ */
.mtp-head {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0 10px;
min-width: 0;
}
.mtp-head svg { flex: none; }
.mtp-head-name {
font-size: 20px;
font-weight: 600;
color: #16151a;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.mtp-head-btn {
flex: none;
margin-left: auto;
height: 32px;
padding: 0 12px 0 9px;
border: 1px solid #dcdce3;
border-radius: 8px;
background: #fff;
color: #56555f;
font-family: inherit;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
white-space: nowrap;
}
.mtp-head-btn:hover { border-color: #3a2ecb; color: #3a2ecb; }
.mtp-tabs {
display: flex;
gap: 2px;
padding: 0 2px;
border-bottom: 1px solid #ececf0;
margin-bottom: 14px;
overflow-x: auto;
}
.mtp-tabs { scrollbar-width: none; -ms-overflow-style: none; }
.mtp-tabs::-webkit-scrollbar { display: none; }
.mtp-tab {
border: none;
background: transparent;
padding: 0 10px 12px;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
font-family: inherit;
font-size: 13.5px;
font-weight: 500;
color: #6a6a76;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.mtp-tab span { font-size: 12px; color: #a8a8b3; }
.mtp-tab:hover { color: #16151a; }
.mtp-tab.active {
border-bottom-color: #3a2ecb;
font-weight: 600;
color: #16151a;
}
.mtp-note {
margin: 18px 2px 8px;
padding-top: 16px;
border-top: 1px solid #ececf0;
font-size: 12.5px !important;
line-height: 1.55;
color: #8b8b96 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
text-align: left;
}
.mtp-note strong { font-weight: 600; color: #6a6a76; }
/* ---------- aviso "todavia no hay nada aqui" ---------- */
.mtp-empty {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 52px;
margin: 4px 2px 18px;
padding: 14px 44px 14px 24px;
background: #fff;
border: 1px solid #ececf0;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(22, 21, 26, .05);
}
.mtp-empty-txt {
margin: 0 !important;
font-size: 14px !important;
line-height: 1.45;
font-weight: 400 !important;
color: #6a6a76 !important;
text-align: center;
text-transform: none !important;
letter-spacing: 0 !important;
}
.mtp-empty-x {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
flex: none;
}
.mtp-empty-x::before,
.mtp-empty-x::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 1.6px;
background: #56555f;
border-radius: 2px;
}
.mtp-empty-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.mtp-empty-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mtp-empty-x:hover { background: #f2f2f5; }
.mtp-empty-x:hover::before,
.mtp-empty-x:hover::after { background: #16151a; }
@media (max-width: 700px) {
.mtp-empty { padding: 13px 40px 13px 16px; }
.mtp-empty-txt { font-size: 13.5px !important; }
}
/* ---------- pantalla inicial sin equipo ---------- */
.mtp-noteam {
background: #fff;
border-radius: 12px;
padding: 28px 24px 24px;
display: flex;
flex-direction: column;
text-align: left;
}
.mtp-noteam-ico {
width: 52px;
height: 52px;
border-radius: 14px;
background: #efedff;
display: grid;
place-items: center;
}
.mtp-noteam-ico svg { stroke: #3a2ecb; }
.mtp-noteam-title {
margin: 20px 0 0;
font-size: 26px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.02em;
color: #16151a;
}
.mtp-noteam-sub {
margin: 12px 0 0;
font-size: 15px;
line-height: 1.6;
color: #6a6a76;
}
.mtp-noteam-feats {
display: flex;
flex-direction: column;
gap: 14px;
margin: 24px 0 0;
}
.mtp-noteam-feat {
display: flex;
align-items: center;
gap: 12px;
}
.mtp-noteam-feat svg { flex: none; stroke: #3a2ecb; }
.mtp-noteam-feat span { font-size: 14.5px; color: #16151a; }
.mtp-noteam-cta {
margin: 24px 0 0;
height: 52px;
border: none;
border-radius: 10px;
color: #fff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
z-index: 9;
overflow: hidden;
}
.mtp-noteam-cta:before, .mtp-noteam-cta:after{
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.mtp-noteam-cta:before{
z-index: -2;
background: #CF0873;
transition: opacity .35s ease, transform .35s ease ;
}
.mtp-noteam-cta:after{
z-index: -1;
background: transparent linear-gradient(90deg, #3533AD -10%, #E3097E 80%) 0% 0% no-repeat padding-box;
transition: .75s;
}
.mtp-noteam-cta:hover:after { opacity:0; }
.mtp-noteam-img {
margin: 26px 0 0;
border-radius: 12px;
overflow: hidden;
background: #f2f2f5;
}
.mtp-noteam-img img {
width: 100%;
height: auto;
display: block;
}
/* ---------- panel Mi Equipo: ajustes vista "Todos" ---------- */
/* sin boton "Añadir fotos" en la seccion resumida (la pestaña Fotos abre la vista completa) */
#teams_photos #add_photos_team { display: none !important; }
/* pestaña de icono (Tipografias) */
.mtp-tab-ico svg { display: block; }
/* ---------- boton "Crear carpeta compartida" (estilo mockup, compacto) ---------- */
.mtp-create-folder {
height: 36px !important;
width: 89% !important;
padding: 0 14px 0 11px !important;
margin: 0 auto 10px !important;
border: 1px solid #dcdce3 !important;
border-radius: 8px !important;
background: #fff !important;
color: #16151a !important;
font-family: inherit;
font-size: 13.5px !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer;
white-space: nowrap;
box-shadow: none !important;
}
.mtp-create-folder:hover { border-color: #3a2ecb !important; color: #3a2ecb !important; }
.mtp-create-folder svg { flex: none; }
.mtp-create-folder p { margin: 0 !important; font-size: inherit !important; color: inherit !important; }
.mtp-create-folder span { display: none !important; }
/* solo visible en la pestaña Carpetas (mtp-all), no en la inicial "Todos" */
#my_team_folders:not(.mtp-all) .mtp-create-folder { display: none !important; }
/* sin SimpleBar la rejilla crece sola. OJO: aqui habia un overflow:visible con
selector de id que ganaba a .tmfg-fijo .tmfg, y por eso en modo fijo la
segunda fila se salia de la caja en vez de recortarse */
#my_team_folders:not(.mtp-all),
#my_designs_folders:not(.mtp-all) {
max-height: none;
height: auto;
overflow: visible;
}
/* ===== títulos de sección (modo "Cualquier contenido") ===== */
.home-seccion-titulo {
margin: 4px 0 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #a8a8b3;
}
.contenedor-padre_list + .contenedor-padre_list { margin-top: 26px; }
/* ===== badge privada (gris punteado) — reutiliza .tmf-pill ===== */
.tmf-pill-priv { border: 1px dashed #d4d4dc; color: #8b8b96; background: #fff; }
/* ===== carpeta: badge en su fila, conteo + bolitas debajo ===== */
.folder-card2 .fc2-badge { margin-top: 2px; }
.folder-card2 .fc2-mails { display: inline-flex; align-items: center; }
/* ===== imagen: mismo pie que diseños ===== */
.image-card .home-badge-row { margin: 4px 0 2px; }
.image-card .fc2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.image-card .fc2-mails { display: inline-flex; align-items: center; }
/* ===== reserva de altura de bolitas: evita el salto privado↔equipo ===== */
.home-reserva-mails .home-mails,
.home-reserva-mails .fc2-mails { min-height: 24px; }
.home-mails-empty { display: inline-block; min-height: 24px; }
/* las bolitas de recurso comparten el estilo de .home-mails de diseños */
.fc2-mails .home-mails > div,
.image-card .home-mails > div {
width: 24px; height: 24px; border-radius: 999px;
display: grid; place-items: center;
font-size: 9.5px; font-weight: 600;
box-shadow: 0 0 0 2px #fff; overflow: hidden;
line-height: 1;
z-index: 1;
}
.fc2-mails .home-mails > div + div,
.image-card .home-mails > div + div { margin-left: -9px; }
.fc2-mails .home-mails > div.number,
.image-card .home-mails > div.number { background: #e6e6ea; color: #555; }
/* ============================================================
POPUP "Cambiar tamano del equipo" (asientos PRO Teams)
Clases aisladas con prefijo tseats- (no comparten nada con el CSS del sitio)
============================================================ */
.tseats-modal {
width: 560px;
max-width: calc(100vw - 32px);
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(10,12,20,.32);
overflow: hidden;
display: flex;
flex-direction: column;
font-family: inherit;
box-sizing: border-box;
}
/* ---------- cabecera ---------- */
.tseats-modal .tseats-head {
height: 72px;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #eceef3;
box-sizing: border-box;
flex: none;
}
.tseats-modal .tseats-title {
font-size: 18px;
font-weight: 800;
color: #14161c;
}
.tseats-modal .tseats-x {
width: 32px;
height: 32px;
border: 0;
background: transparent;
border-radius: 8px;
cursor: pointer;
padding: 0;
position: relative;
flex: none;
}
.tseats-modal .tseats-x:hover { background: #f1f2f5; }
.tseats-modal .tseats-x::before,
.tseats-modal .tseats-x::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: #8b93a5;
border-radius: 2px;
}
.tseats-modal .tseats-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.tseats-modal .tseats-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* ---------- cuerpo ---------- */
.tseats-modal .tseats-body {
padding: 24px 28px 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.tseats-modal .tseats-intro {
margin: 0;
font-size: 14.5px;
color: #3c4356;
line-height: 1.5;
}
.tseats-modal .tseats-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.tseats-modal .tseats-row-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tseats-modal .tseats-row-title {
font-size: 15px;
font-weight: 700;
color: #14161c;
}
.tseats-modal .tseats-row-sub {
font-size: 12.5px;
color: #8b93a5;
}
/* ---------- stepper de asientos ---------- */
.tseats-modal .tseats-stepper {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
.tseats-modal .tseats-btn-step {
width: 40px;
height: 40px;
border-radius: 999px;
border: 1.5px solid #3f2fb8;
background: #fff;
color: #3f2fb8;
font-size: 20px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s, border-color .15s, color .15s;
}
.tseats-modal .tseats-btn-step:hover:not(:disabled) { background: #f3f1fd; }
.tseats-modal .tseats-btn-step:disabled {
border-color: #e0e3ea;
color: #c3c8d4;
cursor: default;
}
.tseats-modal .tseats-value {
width: 84px;
height: 44px;
border: 1.5px solid #d5d9e3;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #14161c;
}
/* ---------- banda de importes ---------- */
.tseats-modal .tseats-band {
margin: 0 28px 24px;
background: #f1f2f5;
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.tseats-modal .tseats-band-main {
font-size: 14.5px;
color: #14161c;
line-height: 1.5;
}
.tseats-modal .tseats-band-sub {
font-size: 12.5px;
color: #6b7280;
line-height: 1.45;
}
.tseats-modal .tseats-amounts {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid #e0e3ea;
}
.tseats-modal .tseats-amounts > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.tseats-modal .tseats-amounts span {
font-size: 13.5px;
color: #3c4356;
}
.tseats-modal .tseats-amounts strong {
font-size: 15px;
font-weight: 800;
color: #14161c;
white-space: nowrap;
}
/* ---------- pie ---------- */
.tseats-modal .tseats-foot {
min-height: 84px;
padding: 0 28px;
display: flex;
align-items: center;
gap: 20px;
border-top: 1px solid #eceef3;
box-sizing: border-box;
flex: none;
}
.tseats-modal .tseats-cta {
height: 48px;
padding: 0 24px;
border: 0;
border-radius: 10px;
background: #3f2fb8;
color: #fff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
}
.tseats-modal .tseats-cta:hover:not(:disabled) { background: #2a1f8a; }
.tseats-modal .tseats-cta:disabled,
.tseats-modal .tseats-cta.tseats-cta-off {
background: #c9c4ea;
cursor: default;
}
.tseats-modal .tseats-cancel {
height: 48px;
padding: 0 8px;
border: 0;
background: transparent;
color: #3f2fb8;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.tseats-modal .tseats-cancel:hover { text-decoration: underline; }
/* ---------- boton "Ampliar mi equipo" en la banda de plazas ---------- */
.tmp-seats-upgrade {
border: 0;
background: transparent;
color: #3f2fb8;
font-size: 14px;
font-weight: 700;
cursor: pointer;
padding: 0;
}
.tmp-seats-upgrade:hover { text-decoration: underline; }
/* ---------- movil ---------- */
@media (max-width: 640px) {
.tseats-modal .tseats-head,
.tseats-modal .tseats-body,
.tseats-modal .tseats-foot { padding-left: 18px; padding-right: 18px; }
.tseats-modal .tseats-band { margin-left: 18px; margin-right: 18px; }
.tseats-modal .tseats-row {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.tseats-modal .tseats-foot {
flex-direction: column-reverse;
align-items: stretch;
gap: 10px;
padding-top: 16px;
padding-bottom: 16px;
}
.tseats-modal .tseats-cta,
.tseats-modal .tseats-cancel { width: 100%; }
}
/* centrado: #groupFolder no posiciona su contenido, lo hacemos desde el modal */
#groupFolder:has(.tseats-modal) {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.tseats-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: calc(100vh - 48px);
overflow-y: auto;
z-index: 10001;
}
/* los emails del panel de equipo deben poder copiarse */
.tmp-modal .tmp-row-info p, .tmp-modal .tmp-row-info span{
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* badge con la carpeta a la que pertenece el diseño */
.container_template { position: relative; }
.badge-folder {
position: absolute !important;
top: auto !important;
left: auto !important;
right: 8px !important;
bottom: 8px !important;
z-index: 5;
display: inline-flex !important;
align-items: center;
gap: 5px;
width: auto !important;
max-width: 75%;
height: 22px !important;
padding: 0 9px !important;
border-radius: 999px;
background: rgba(255,255,255,.94);
border: 1px solid #e2e5e8;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
cursor: pointer;
box-sizing: border-box;
}
/* el svg del sitio se estira por defecto: lo fijamos a 11x11 */
.badge-folder > svg {
flex: 0 0 11px !important;
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
max-width: 11px !important;
display: block !important;
color: #56555f;
}
/* el span colapsaba a width 0 por el flex */
.badge-folder > span {
flex: 1 1 auto !important;
min-width: 0;
width: auto !important;
display: inline-block !important;
color: #56555f !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 22px !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.badge-folder:hover { background: #fff; border-color: #c9c9d4; }
.badge-folder:hover > span,
.badge-folder:hover > svg { color: #3a2ecb; }
.tmp-msg-error .tmp-err-cta {
display: inline-flex;
align-items: center;
height: 26px;
margin-left: 8px;
padding: 0 12px;
border-radius: 999px;
background: #3f2fb8;
color: #fff;
font-size: 12px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.tmp-msg-error .tmp-err-cta:hover { background: #2a1f8a; color: #fff; }
/* overlay propio del popup de asientos: independiente del sistema de foggy */
.tseats-overlay {
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(20,22,28,.55);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
overflow-y: auto;
}
/* ================================================================
CARPETAS DE EQUIPO EN REJILLA (namespace tmfg-)
Clases propias: no reutilizamos folders_container / object-wrap /
box-folder / click-folder / captionObject, cuyo CSS antiguo
imponia la fila unica y ganaba por especificidad.
================================================================ */
.tmfg {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
align-items: start;
}
/* el boton de crear ocupa el ancho completo, encima de la rejilla.
Dos clases distintas: mtp-create-folder en Mi equipo, create-folder-new
en Mis diseños */
.tmfg > *:not(.tmfg-card),
.tmfg > .mtp-create-folder,
.tmfg > .create-folder-new {
grid-column: 1 / -1;
width: 100%;
max-width: none;
margin: 0 0 4px;
box-sizing: border-box;
}
/* mismo aspecto en los dos paneles */
.tmfg > .create-folder-new {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 12px 16px;
border: 1px dashed #cfcfdb;
border-radius: 12px;
background: #fff;
font-size: 13.5px;
font-weight: 700;
color: #3f2fb8;
cursor: pointer;
}
.tmfg > .create-folder-new:hover { border-color: #5b4bd6; background: #f7f6ff; }
.tmfg-card { position: relative; min-width: 0; }
.tmfg-card:hover, .tmf-bolita:hover{z-index: 9999}
.tmfg-inner {
display: flex;
flex-direction: column;
border: 1px solid #ececf1;
border-radius: 12px;
/* overflow: hidden; */
background: #fff;
cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease;
}
.tmfg-inner:hover {
border-color: #5b4bd6;
box-shadow: 0 6px 18px rgba(91, 75, 214, .13);
}
.tmfg-card.active-folder .tmfg-inner { border-color: #5b4bd6; }
/* ---------- portada ---------- */
.tmfg-cover {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: #f4f4f7;
overflow: hidden;
border-radius:12px 12px 0 0;
}
.tmf-thumb {
position: absolute;
inset: 0;
display: flex;
gap: 2px;
padding: 2px;
box-sizing: border-box;
}
.tmf-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 3px;
}
.tmf-thumb-empty { align-items: center; justify-content: center; padding: 0; }
.tmf-thumb-2 > span,
.tmf-thumb-big { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 3px; }
.tmf-thumb-side { width: 34%; flex: none; display: flex; flex-direction: column; gap: 2px; }
.tmf-thumb-side > span { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; border-radius: 3px; }
.tmf-thumb-mas {
position: absolute;
inset: 0;
background: rgba(23, 23, 28, .52);
color: #fff;
font-size: 10.5px;
font-weight: 800;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
}
/* ---------- datos ---------- */
.tmfg-meta {
display: flex;
flex-direction: column;
gap: 8px;
padding: 11px 12px 12px;
}
.tmfg-txt { min-width: 0; }
.tmfg-txt p {
margin: 0;
font-size: 12.5px;
font-weight: 700;
color: #17171c;
/* overflow: hidden;*/
text-overflow: ellipsis;
/* white-space: nowrap;*/
}
.tmfg-txt small {
display: block;
font-size: 10.5px;
color: #8a8a95;
white-space: nowrap;
}
.tmfg-txt { text-transform: none !important;
overflow: initial;
white-space: normal;
}
.tmfg-access { display: flex; align-self: flex-start; align-items: center; }
/* los 3 puntitos, arriba a la izquierda, con el mismo circulo gris que en
el menu de inicio (.dropdownExample .dropbtn).
El CSS antiguo de .accionesFold los deja en opacity:0 y los mostraba al
pasar por encima de .box-folder, clase que estas tarjetas ya no tienen:
por eso no volvian a aparecer */
.tmfg-card .tmfg-dots {
position: absolute !important;
top: 8px !important;
left: 8px !important;
right: auto !important;
bottom: auto !important;
z-index: 3;
opacity: 0;
transition: opacity .12s ease;
}
.tmfg-card:hover .tmfg-dots,
.tmfg-card .tmfg-dots:hover,
.tmfg-card .tmfg-dots:focus-within,
.tmfg-card .tmfg-dots.open { opacity: 1 !important; }
/* el disparador toma el aspecto del boton de inicio.
La flecha antigua se dibuja con bordes en un ::after, asi que un
background-image no la tapa: hay que anular el pseudoelemento */
.tmfg-card .tmfg-dots .more-button-aperture::before,
.tmfg-card .tmfg-dots .more-button-aperture::after {
content: none !important;
display: none !important;
border: 0 !important;
background: none !important;
}
.tmfg-card .tmfg-dots .more-button-aperture {
display: block !important;
width: 30px !important;
height: 30px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
box-shadow: 0 0 20px 0 rgba(255, 255, 255, .5);
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
background-color: transparent !important;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.6' d='M15 0C17.9667 0 20.8668 0.879734 23.3335 2.52796C25.8003 4.17618 27.7229 6.51886 28.8582 9.25975C29.9935 12.0006 30.2905 15.0166 29.7118 17.9263C29.133 20.8361 27.7044 23.5088 25.6066 25.6066C23.5088 27.7044 20.8361 29.133 17.9263 29.7118C15.0166 30.2905 12.0006 29.9935 9.25975 28.8582C6.51886 27.7229 4.17618 25.8003 2.52796 23.3335C0.879734 20.8668 0 17.9667 0 15C0 11.0217 1.58035 7.20644 4.3934 4.3934C7.20644 1.58035 11.0217 0 15 0Z' fill='black'/%3E%3Cpath d='M15.0009 11.2847C15.7868 11.2847 16.424 10.6475 16.424 9.86154C16.424 9.07557 15.7868 8.43842 15.0009 8.43842C14.2149 8.43842 13.5777 9.07557 13.5777 9.86154C13.5777 10.6475 14.2149 11.2847 15.0009 11.2847Z' fill='white'/%3E%3Cpath d='M15.0009 16.6556C15.7868 16.6556 16.424 16.0185 16.424 15.2325C16.424 14.4465 15.7868 13.8094 15.0009 13.8094C14.2149 13.8094 13.5777 14.4465 13.5777 15.2325C13.5777 16.0185 14.2149 16.6556 15.0009 16.6556Z' fill='white'/%3E%3Cpath d='M15.0009 22.0265C15.7868 22.0265 16.424 21.3894 16.424 20.6034C16.424 19.8174 15.7868 19.1803 15.0009 19.1803C14.2149 19.1803 13.5777 19.8174 13.5777 20.6034C13.5777 21.3894 14.2149 22.0265 15.0009 22.0265Z' fill='white'/%3E%3C/svg%3E%0A") !important;
opacity: .6;
transform: scale(1);
transition: none;
}
.tmfg-card .tmfg-dots .more-button-aperture:hover { opacity: 1; }
/* el desplegable cuelga de la izquierda, no de la derecha */
.tmfg-card .tmfg-dots .more-buttons { left: 0; right: auto; }
/* ================================================================
CARPETAS: TRES ESTADOS
1) al entrar -> 1 fila exacta, sin scroll ni sticky
2) .mtp-all -> franja fija arriba, fila y media con degradado
3) + .tmfg-todas -> todas las carpetas, sin limite de alto
El max-height lo pone el JS en pixeles midiendo una tarjeta real:
en max-height los porcentajes se resuelven contra el ALTO del padre,
no contra el ancho, asi que calc() con % no sirve aqui.
================================================================ */
/* --- 1) al entrar: una sola fila = 2 carpetas + el boton de crear.
nth-of-type cuenta solo los