/* ========================================================= * VS Clics Sociedades - nombre de sociedad * v1.8.6 * * El botón ocupa TODO el ancho de la celda para que su centro sea * inequívoco. El globo/zoom se aplica a un span interior, no al botón. * Esto evita conflictos con VS Diseño Global y con el CSS del inventario. * ========================================================= */ .vsi-table td.vsi-cell-name { text-align: center !important; vertical-align: middle !important; } .vsi-table td.vsi-cell-name .vsi-name-wrap { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } /* * Botón contenedor: ancho completo y contenido centrado. * Se anulan también los estilos !important del CSS global. */ .vsi-table td.vsi-cell-name .vsi-name-wrap > button.vsi-society-name-button, .vsi-table td.vsi-cell-name .vsi-name-wrap > button.vsi-society-name-button.vsi-name, .vsi-table td.vsi-cell-name button.vsi-society-name-button.vscs-name-centered { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 0 !important; color: #102b40 !important; background: transparent !important; box-shadow: none !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; overflow: visible !important; } .vsi-table td.vsi-cell-name button.vsi-society-name-button.vscs-name-centered:hover, .vsi-table td.vsi-cell-name button.vsi-society-name-button.vscs-name-centered:focus, .vsi-table td.vsi-cell-name button.vsi-society-name-button.vscs-name-centered:focus-visible { color: #102b40 !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* Globo real alrededor SOLO del texto. */ .vsi-table td.vsi-cell-name .vscs-name-pill { display: inline-flex !important; width: auto !important; max-width: calc(100% - 12px) !important; min-width: 0 !important; margin: 0 auto !important; padding: 6px 12px !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; color: #102b40 !important; background: transparent !important; box-shadow: none !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; transform: scale(1) !important; transform-origin: center center !important; transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 170ms ease, color 170ms ease, box-shadow 180ms ease !important; } @media (hover: hover) and (pointer: fine) and (min-width: 783px) { .vsi-table td.vsi-cell-name button.vsi-society-name-button.vscs-name-centered:hover > .vscs-name-pill, .vsi-table td.vsi-cell-name button.vsi-society-name-button.vscs-name-centered:focus-visible > .vscs-name-pill { transform: scale(1.055) !important; color: #0a6f89 !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 8px 22px rgba(15,63,82,.14), 0 0 0 1px rgba(10,111,137,.10) !important; text-decoration: none !important; } } @media (max-width: 782px) { .vsi-table td.vsi-cell-name, .vsi-table td.vsi-cell-name .vsi-name-wrap, .vsi-table td.vsi-cell-name button.vsi-society-name-button.vscs-name-centered, .vsi-table td.vsi-cell-name .vscs-name-pill { text-align: center !important; } } @media (prefers-reduced-motion: reduce) { .vsi-table td.vsi-cell-name .vscs-name-pill { transition: none !important; transform: none !important; } } \n\n /* ========================================================= * v1.8.6 - Ficha móvil: cierre visible + acciones pegadas abajo * ========================================================= */ @media (max-width: 680px) { /* * Dejamos aire SOLO arriba. Abajo no hay margen: el diálogo * termina exactamente en el borde inferior del viewport. */ body .vsi-profile-modal.is-open { align-items: flex-start !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; min-height: 100svh !important; padding: calc(env(safe-area-inset-top, 0px) + 14px) 10px 0 !important; overflow: hidden !important; } body .vsi-profile-modal.is-open .vsi-profile-dialog { width: 100% !important; height: calc(100dvh - env(safe-area-inset-top, 0px) - 14px) !important; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 14px) !important; min-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 1px solid rgba(217,232,239,.96) !important; border-bottom: 0 !important; border-radius: 20px 20px 0 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } /* La X no depende del scroll interno del diálogo. */ body .vsi-profile-modal.is-open .vsi-profile-close { position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 24px) !important; right: 20px !important; z-index: 100080 !important; float: none !important; display: flex !important; width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border: 2px solid rgba(255,255,255,.95) !important; border-radius: 50% !important; background: #2b3240 !important; color: #fff !important; box-shadow: 0 8px 22px rgba(15,23,42,.28) !important; font-size: 28px !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Hueco superior real para nombre, NIF y estado. */ body .vsi-profile-modal.is-open .vsi-profile-hero { min-height: 0 !important; padding: calc(66px + env(safe-area-inset-top, 0px)) 18px 22px !important; text-align: center !important; } body .vsi-profile-modal.is-open .vsi-profile-title, body .vsi-profile-modal.is-open .vsi-profile-name, body .vsi-profile-modal.is-open .vsi-profile-content h2:first-of-type { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } /* * Barra Reservar / Consultar / WhatsApp: sticky al fondo REAL. * El safe-area del iPhone queda dentro de la propia barra, no debajo. */ body .vsi-profile-modal.is-open .vsi-profile-actions { position: sticky !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 100060 !important; margin: 0 !important; padding: 13px 14px max(14px, env(safe-area-inset-bottom, 0px)) !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 50px !important; background: rgba(255,255,255,.99) !important; border-top: 1px solid #d9e8ef !important; box-shadow: 0 -8px 20px rgba(15,23,42,.06) !important; transform: translateZ(0) !important; } }