/************************************************************
   UM – Perfil de usuario personalizado
   Estilos específicos del header, foto y redes sociales
   Autor: Mauro Lopez Rodriguez
*************************************************************/

/* Tamaños y grosores (ajusta a tu gusto) */
:root{
  --pf-avatar: 250px;      /* tamaño del círculo en desktop */
  --pf-ring:   6px;        /* grosor del aro blanco */
  --pf-gap:    1px;       /* separación entre avatar y texto */
}

/* Estructura del header del perfil */
.um-profile .um-header,
.um-profile .um-form { position: relative; }

/* Avatar SIEMPRE del tamaño marcado, con aro y recorte circular */
.um-profile .um-profile-photo{
  position: absolute;
  left: clamp(12px, 3vw, 36px);
  bottom: calc(-1 * var(--pf-avatar) / 2);   /* que “muerda” un poco el contenido */
  width: var(--pf-avatar);
  height: var(--pf-avatar);
  border-radius: 50%;
  padding: var(--pf-ring);                   /* aro blanco */
  background: #fff;
  box-shadow: 0 8px 28px rgba(10,24,40,.18);
  z-index: 3;
}

/* El enlace y la imagen heredan el círculo y ocupan TODO el contenedor */
.um-profile .um-profile-photo a,
.um-profile .um-profile-photo img{
  display: block !important;
  width: 100%  !important;
  height: 100% !important;
  max-width: none !important;                
  max-height: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

/* Banner: ocupa el ancho del contenedor, con esquinas y sombra suave */
.um-profile .um-cover-e{
  width: calc(100% - 48px);                  /* deja un “dedo” por lado */
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(10,24,40,.10);
}
.um-profile .um-cover-e img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Responsive: avatar más pequeño en pantallas estrechas */
@media (max-width: 1024px){
  :root{ --pf-avatar: 150px; }
}
@media (max-width: 768px){
  :root{ --pf-avatar: 120px; --pf-ring: 5px; --pf-gap: 12px; }
  .um-profile .um-profile-photo{ left: 14px; }
}

/* Oculta visualmente cualquier duplicado vacío de .um-profile-photo */
.um-profile .um-form .um-profile-photo {
  background: transparent !important;
  box-shadow: none !important;

  pointer-events: none !important; /* evita clics fantasma */
}

/* Ajuste fino: bajar el avatar un poco más */
.um-profile .um-profile-photo {
  bottom: calc(-1 * var(--pf-avatar) / 1.3); /* aumenta el divisor para bajarlo más */
}

.firm-panel {
  background: #fff !important;
  border: 1px solid #000 !important;          
  border-radius: 0 0 26px 26px !important;
             /* esquinas redondeadas */
  padding: 30px 40px !important;
  margin: 30px auto !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;

  /* ancho completo y centrado */
  width: 100% !important;                      
  max-width: 1600px !important;            
  min-height: auto !important;               
  box-sizing: border-box;
}

/* Responsivo */
@media (max-width: 1024px) {
  .firm-panel {
    width: 100% !important;
    padding: 25px 20px !important;
  }
}



/* Campos dentro de la fila: líneas separadoras tipo “tabla” */
.firm-panel .um-field{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(10,24,40,.15);
  padding:10px 0 14px;
  margin:0;
  box-shadow:none;
}

/* Si quieres una fila a una columna fija */
.firm-one-col{
  display:grid;
  grid-template-columns:1fr;
  gap:10px 24px;
}

/* Etiquetas arriba, con icono en verde */
.firm-panel .um-field-label,
.firm-panel .um-field-label > span{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 0 4px !important;
  color:#0A1828 !important;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.firm-panel .um-field-label i,
.firm-panel .um-field-label svg{
  color:border-radius: 0 0 26px 26px !important;
 !important;
  width:16px; height:16px;
}

/* Valor del campo */
.firm-panel .um-field-area,
.firm-panel .um-field-value{
  font-size:15px;
  line-height:1.5;
  color:#0A1828;
}

/* Enlaces (LinkedIn, web…) */
.firm-panel .um-field a{
  color:#178582;
  text-decoration:none;
  border-bottom:1px dashed rgba(23,133,130,.35);
}
.firm-panel .um-field a:hover{
  color:#0A1828;
  border-bottom-color:transparent;
}


/* Forzar panel ancho completo dentro del contenedor padre */
.elementor .firm-panel,
.um .firm-panel {
  width: 100% !important;        /* usar todo el ancho del contenedor */
  max-width: none !important;    /* eliminar límites heredados */
}

/* Si el padre es el contenedor de UM, amplíalo también */
.um-profile-body,
.um-profile {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 4vw !important;     /* margen lateral visual */
  box-sizing: border-box;
}

/* === Estilo del encabezado de sección (Datos personales, Empresa, etc.) === */
.um-row-heading {
  font-weight: 700;
  padding: 14px 24px !important;
  border-radius: 12px 12px 0 0 !important; /* Bordes superiores redondeados */
  border: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Icono dentro del encabezado */
.um-row-heading i {
  color: #fff !important;
  font-size: 16px;
}

/* === Eliminar la línea gris separadora bajo el perfil (debajo de la foto/nombre) === */
.um-profile-header {
  border-bottom: none !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}

/* Opcional: reduce el espacio entre encabezado y caja blanca */
.um-r/* === Estilo del encabezado de sección (Datos personales, Empresa, etc.) === */
.um-row-heading {
  font-weight: 700;
  padding: 14px 24px !important;
  border-radius: 12px 12px 0 0 !important; /* Bordes superiores redondeados */
  border: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Icono dentro del encabezado */
.um-row-heading i {
  color: #fff !important;
  font-size: 16px;
}

/* === Eliminar la línea gris separadora bajo el perfil (debajo de la foto/nombre) === */
.um-profile-header {
  border-bottom: none !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}

/* Opcional: reduce el espacio entre encabezado y caja blanca */
.um-row-heading + .firm-panel {
  margin-top: 0 !important;
}
ow-heading + .firm-panel {
  margin-top: 0 !important;
}

/* Elimina el padding verde del contenedor principal del perfil */
.um-profile-body.main.main-default {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}


/* Imagen de fondo del perfil */
/* Elimina fondo gris y ajusta bordes del cover */
.um-cover.has-cover {
  background: transparent !important; 
  overflow: hidden !important;       
  border-radius: 16px !important;    
  padding: 0 !important;
  margin: 0 !important;
}

/* Imagen de fondo del perfil redondeada */
.um-cover-e {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Perfil: muestra solo los primeros 6 enlaces en .um-profile-connect
   y oculta el resto. No afecta cuando el perfil está en edición. */
.um-profile:not(.um-editing) .um-profile-connect a:nth-of-type(n + 7) {
  display: none !important;
}

/* 
   Oculta las redes SOLO en la vista normal del perfil.
   No afecta al formulario de edición.
*/
.um-profile:not(.um-editing) .um-field-linkedin,
.um-profile:not(.um-editing) .um-field-instagram,
.um-profile:not(.um-editing) .um-field-youtube,
.um-profile:not(.um-editing) .um-field-telegram,
.um-profile:not(.um-editing) .um-field-tiktok,
.um-profile:not(.um-editing) .um-field-facebook,
.um-profile:not(.um-editing) .um-field-twitter,
.um-profile:not(.um-editing) .um-field-discord {
  display: none !important;
}


/* === UNIFICAR BLANCO + SOMBRA MÁS FUERTE === */

/* Encabezado de sección */
.um-row-heading {
  background: #ffffff !important;            /* Blanco puro */
  color: #0A1828 !important;                 /* Azul corporativo */
  font-weight: 700 !important;
  padding: 16px 24px !important;
  border-radius: 16px 16px 0 0 !important;   /* Bordes superiores */
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin-bottom: 0 !important;
  box-shadow: none !important;               /* Sin sombra */
}

/* Icono */
.um-row-heading i {
  color: #0A1828 !important;
  font-size: 16px !important;
}

/* Panel blanco con sombra fuerte */
.firm-panel {
  background: #ffffff !important;            /* Blanco unificado */
  border: none !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 8px 28px rgba(10, 24, 40, 0.15) !important;  /* sombra más potente */
  padding: 30px 40px !important;
}

/* Unión visual entre encabezado y caja */
.um-row-heading + .firm-panel {
  margin-top: 0 !important;
}

/* Texto y enlaces */
.firm-panel .um-field-label,
.firm-panel .um-field-area,
.firm-panel .um-field-value {
  color: #0A1828 !important;
}

.firm-panel .um-field a {
  color: #178582 !important;
  border-bottom: 1px dashed rgba(23,133,130,.35);
}
.firm-panel .um-field a:hover {
  color: #0A1828 !important;
  border-bottom-color: transparent;
}

/* === UNIFICAR COLOR DE CABECERAS Y CAJAS === */
.um-row-heading {
  background: #ffffff !important;              /* mismo blanco que el panel */
  color: #0A1828 !important;                   /* azul corporativo para texto */
  font-weight: 700 !important;
  padding: 16px 24px !important;
  border-radius: 16px 16px 0 0 !important;     /* bordes superiores redondeados */
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin-bottom: 0 !important;
  box-shadow: none !important;                 /* elimina sombra gris */
}

/* Icono dentro del encabezado */
.um-row-heading i {
  color: #0A1828 !important;
  font-size: 16px !important;
}

/* Panel blanco (unificado) */
.firm-panel {
  background: #ffffff !important;              /* blanco puro */
  border: none !important;
  border-radius: 0 0 16px 16px !important;     /* bordes inferiores */
  box-shadow: 0 8px 28px rgba(10, 24, 40, 0.12) !important;  /* sombra suave */
  padding: 30px 40px !important;
  margin-top: 0 !important;
}

/* Unir visualmente el header con el panel */
.um-row-heading + .firm-panel {
  margin-top: 0 !important;
  border-top: 1px solid #ffffff !important;    /* unión invisible */
}

/* Color de fondo del contenedor del perfil */
.um-profile-body {
  background: transparent !important;
}

/* Elimina fondo gris o degradado heredado de UM */
.um-profile .um-form .um-row-heading {
  background: #ffffff !important;
}

/* (Opcional) hover sutil si quieres un efecto */
.um-row-heading:hover {
  background: #fafafa !important;
}

/* Contenedor de redes de empresa (misma estética que las del perfil) */
.firm-company-connect{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:4px 0 16px;
}

.firm-company-connect .firm-social{
  width:44px;
  height:44px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(10,24,40,.12);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.firm-company-connect .firm-social:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(10,24,40,.18);
  opacity:.95;
}

/* Asegura que el <i> de UM se vea centrado y grande */
.firm-company-connect .firm-social i{
  font-size:18px;          /* si tu pack de iconos necesita otro tamaño, ajusta aquí */
  line-height:1;
  display:inline-block;
}

/* Colores de marca (mismos tonos que en el perfil) */
.firm-company-connect .brand-linkedin{  background:#0A66C2; }
.firm-company-connect .brand-telegram{  background:#2AABEE; }
.firm-company-connect .brand-tiktok{    background:#0a0a0a; }
.firm-company-connect .brand-youtube{   background:#FF0000; }
.firm-company-connect .brand-discord{   background:#5865F2; }

/* Instagram con degradado tipo app */
.firm-company-connect .brand-instagram{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Oculta filas originales que clonamos */
.um-field.firm-hidden{ display:none !important; }

/* Quitar la línea separadora entre la descripción y los iconos sociales */
.um-field-company_description {
  border-bottom: none !important;
}

/* Opción más genérica: si antes del bloque de iconos hay un borde, elimínalo */
.um-field[data-key*="company_description"] {
  border-bottom: none !important;
  margin-bottom: 4px !important;
}

/* También eliminar cualquier borde que la columna esté aplicando */
.um-col-131,
.um-col-1 .firm-company-connect {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Cover a ancho completo */
.um-profile .um-cover-e {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 16px !important;   /* déjalo si quieres redondeo */
  overflow: hidden !important;
}

/* Quitar la altura fija que UM mete inline */
.um-profile .um-cover.has-cover[style] {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Asegurar que la imagen llena el contenedor sin dejar “bandas” */
.um-profile .um-cover-e img {
  display: block !important;
  width: 100% !important;
  height: auto !important;          /* usa la altura natural de la imagen */
  object-fit: cover !important;     /* si quieres recorte elegante en alturas pequeñas */
  object-position: center !important;
}

/* (Opcional) Si UM aplica padding en el wrapper del cover, elimínalo */
.um-profile .um-cover {
  padding: 0 !important;
  background: transparent !important;
}

/* Banner nítido a pantalla completa */
.um-profile .um-cover-e img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* llena sin deformar */
  object-position: center !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  filter: none !important;
  transform: none !important;
}

/* Quitar efectos que UM aplica */
.um-profile .um-cover.has-cover {
  background: none !important;
  filter: none !important;
  transform: none !important;
}

.um-meta-text {
    color: #0a1828 !important;
    font-size: 18px !important;
}

.um-profile.um .um-name a {
    color: #0a1828 !important;
}

.um-name a {
    font-size: 30px !important; 
}

.um-row-heading {
    padding: 5px 0;
    font-size: 20px !important; 
}

.um-row-heading i {
    color: #0A1828 !important;
    font-size: 19px !important;
}

.um-field-label label {
    font-size: 17px !important;
    line-height: 22px !important;
    font-weight: 600;
}

.firm-panel .um-field a {
    color: #0A1828 !important;
    border-bottom: 1px dashed rgba(23, 133, 130, .35);
}

/* Unificar tamaño/altura de texto en el perfil */
.um-profile .um-field .um-field-label label,
.um-profile .um-field .um-field-area,
.um-profile .um-field .um-field-value,
.um-profile .um-field .um-field-area * {
  font-size: 17px !important;      /* el tamaño que quieras */
  line-height: 1.55 !important;     /* usa factor, no px fijos */
  color: #0A1828 !important;        /* azul corporativo si lo necesitas */
}

/* Asegura que cada fila crezca y no se solape */
.um-profile .um-field { 
  padding: 10px 0 !important;
}

/* Limpieza de floats para que la fila coja la altura del contenido */
.um-profile .um-field::after {
  content: "";
  display: block;
  clear: both;
}

/* NO editar: desactiva clics solo en vista normal del perfil */
.um-profile:not(.um-editing) .um-form .um-profile-photo {
  pointer-events: none !important;
}

/* SÍ editar: al entrar en modo edición, vuelve a permitir clics */
.um-profile.um-editing .um-form .um-profile-photo {
  pointer-events: auto !important;
  z-index: 5; /* por si el cover queda por encima */
}

.um-profile .um-profile-photo .um-dropdown,
.um-profile .um-profile-photo .um-profile-photo-overlay .um-dropdown {
  position: absolute !important;
  top: -10% !important;           /* justo debajo del avatar */
  left: 50% !important;           /* centramos horizontalmente */
  transform: translateX(-50%) translateY(10px);
  margin: 0 !important;
  z-index: 9999;
}

/* Añadir espacio entre la descripción y los datos personales */
.um-profile .um-meta-text {
  margin-bottom: 35px !important;  /* puedes subir o bajar el valor */
}

/* Alternativamente, si la clase es diferente */
.um-profile .um-meta {
  margin-bottom: 35px !important;
}

/* === Tipografías del perfil de usuario === */

/* Nombre del usuario (en la cabecera del perfil) */
.um-profile .um-profile-name,
.um-profile .um-name a {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #0A1828 !important; /* azul corporativo */
}

/* Títulos de secciones (por ejemplo: Datos Personales) */
.um-profile .um-profile-meta .um-field-label,
.um-profile .um-profile-body .um-section-title,
.um-profile .um-profile-meta .um-header .um-name,
.um-profile h3,
.um-profile h4 {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  color: #0A1828 !important;
}

/* Contenido general (texto de campos, descripciones, valores, etc.) */
.um-profile .um-field-value,
.um-profile .um-profile-meta,
.um-profile .um-profile-body,
.um-profile .um-field-label span,
.um-profile .um-field-value span,
.um-profile .um-field-value a,
.um-profile .um-profile-meta p {
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  color: #0A1828 !important;
}