/* ============================================================================
   TEMA DATA21 2026 · AJUSTES
   Retoques hechos en revision con el cliente, DESPUES de la primera pasada del
   rediseno. Este fichero carga el ULTIMO del bloque del tema, asi que puede
   corregir reglas de data21-{tokens,layout,forms,components,shell}.css sin
   editarlas: cada ajuste queda aqui, junto y trazable.
   Borrar el <link> de este fichero revierte solo estos retoques.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) El nombre del cliente se salia de su tarjeta (.profile-detail, col-md-3).
      .nombreTitulo2 recibe por JS un <h3> con la razon social, que en nombres
      largos o sin espacios (correos, NIF pegados) desbordaba el ancho de la
      columna. Se fuerza el corte de palabra y se ajusta la escala del titulo
      a la anchura real de la tarjeta.
   clientes.php:450  ->  $('.nombreTitulo2').html('<strong><h3>'+razon+'</h3></strong>')
--------------------------------------------------------------------------- */
.profile-detail .nombreTitulo2,
.profile-detail .emailTitulo2{
  width:100%;
  overflow-wrap:break-word;
  word-wrap:break-word;      /* nombres/correos largos sin espacios */
  word-break:break-word;
  hyphens:auto;
}
.profile-detail .nombreTitulo2 h3{
  font-size:16px;
  line-height:1.3;
  margin:0 0 2px;
  overflow-wrap:break-word;
  word-break:break-word;
}
.profile-detail .emailTitulo2{
  font-size:13px;
}

/* ---------------------------------------------------------------------------
   2) Las pestanas del detalle del cliente (10 tabs) se veian con scroll
      lateral. El cliente prefiere que se repartan en DOS lineas antes que
      desplazarse. Se desactiva el scroll y se deja que envuelvan.
      Solo afecta a la tira de pestanas dentro del detalle (.col-md-9), no a
      otras .nav-tabs mas cortas del panel, que ya caben en una linea.
   data21-components.css:864  ->  .nav.nav-tabs{flex-wrap:nowrap;overflow-x:auto}
--------------------------------------------------------------------------- */
.nav.nav-tabs{
  flex-wrap:wrap;             /* envuelve en varias lineas */
  overflow-x:visible;         /* sin scroll horizontal */
  overflow-y:visible;
  row-gap:2px;                /* separacion entre las dos filas */
  -webkit-mask-image:none;    /* quita el degradado de "hay mas a la derecha" */
          mask-image:none;
}
/* La barra de desplazamiento del tema ya no hace falta */
.nav.nav-tabs::-webkit-scrollbar{height:0}
/* Cada pestana no se encoge: mantiene su ancho y salta de linea completa */
.nav.nav-tabs > li{
  flex:0 0 auto;
}

/* ---------------------------------------------------------------------------
   3) Tarjeta del avatar (clientes / manager / profesionales).
      Problemas: el circulo se veia cuadrado, y "Click para agregar" y el boton
      "Eliminar" (inyectado por JS con width:150px inline) quedaban pegados y
      con anchos distintos. Se reordena la zona con jerarquia y aire:
        · circulo redondo de verdad, con aro suave
        · los dos botones al MISMO ancho, centrados y separados
        · "Eliminar" como accion secundaria (contorno rojo, no bloque solido)
        · la nota "*Imagen cuadrada" pequena y centrada
--------------------------------------------------------------------------- */
/* Circulo del avatar */
.profile-detail .square.img-circle{
  width:150px;
  height:150px;
  margin:0 auto 14px !important;
  border-radius:50%;
  /* El logo se ve ENTERO dentro del circulo. Con 'cover' la imagen se ampliaba
     hasta rellenar los 150px y se recortaba (efecto de zoom); el .square original
     de pages.css usaba 'background-size:100% auto', que tampoco ampliaba.
     El !important es necesario para ganar al estilo inline que pinta pie.php. */
  background-size:contain !important;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#fff;                      /* logos con transparencia */
  /* Un poco de aire: el logo se dibuja dentro del area de contenido, asi que el
     padding le deja margen y queda algo mas pequeno que el circulo (~87%). */
  padding:10px !important;
  background-origin:content-box !important;
  box-sizing:border-box;
  box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--d21-borde), var(--d21-sombra);
}
.profile-detail .square.img-circle.panoramico{
  background-size:contain !important;         /* ni las panoramicas se recortan */
}
.profile-detail .square.img-circle:before{ content:none; } /* sobra el truco cuadrado */

/* Contenedor de los botones: centrado y con ancho unico.
   (clientes usa #imagen_perfil/.inputCat_perfil; manager y profesionales
    usan #imagen/.inputCat — se cubren las tres con selectores agrupados) */
.profile-detail > div > div[style*="max-width"]{
  max-width:170px !important;
  margin:0 auto !important;
}
/* "Click para agregar" (accion primaria de la tarjeta).
   CLAVE: el boton lleva clase col-md-12, que a pantalla completa flota
   (float:left). Ese float colapsaba el contenedor y hacia que el boton
   "Eliminar" se le subiera ENCIMA (pegados). Se quita el float. */
.profile-detail .inputCat{
  display:block;
  width:100%;
  margin:0;
  float:none !important;
}
/* El contenedor del circulo+boton debe contener al boton (sin colapsar) */
.profile-detail > div > div[style*="max-width"]{
  overflow:hidden;
}
/* Zona del boton "Eliminar" inyectado: separacion clara del boton de arriba
   y mismo ancho. El gap se controla SOLO aqui (margin-top) para no acumular. */
.profile-detail #imagen_perfil,
.profile-detail #imagen{
  max-width:170px;
  margin:16px auto 0 !important;
  padding:0;
  float:none !important;
  clear:both;
  text-align:center;
}
.profile-detail #imagen_perfil > div,
.profile-detail #imagen > div{ margin:0; }
.profile-detail #imagen_perfil .btn-danger,
.profile-detail #imagen .btn-danger{
  display:block;
  width:100% !important;                        /* vence el style="width:150px" inline */
  margin:0 auto;
  /* accion secundaria: contorno rojo, no bloque solido (vence el !important
     de data21-components.css para dar jerarquia frente a "Click para agregar") */
  background:#fff !important;
  color:var(--d21-peligro) !important;
  border:1px solid var(--d21-peligro) !important;
  font-weight:600;
}
.profile-detail #imagen_perfil .btn-danger:hover,
.profile-detail #imagen .btn-danger:hover{
  background:var(--d21-peligro) !important;
  color:#fff !important;
}
/* Nota de ayuda "*Imagen cuadrada" */
.profile-detail > div > p{
  width:100% !important;
  float:none !important;
  text-align:center;
  margin:12px 0 0;
}
.profile-detail > div > p small{ color:var(--d21-texto-tenue); font-size:12px; }
/* Separador antes de los datos */
.profile-detail > div > hr{
  margin:16px 0;
  border-color:var(--d21-borde);
}

/* ---------------------------------------------------------------------------
   4) Botones de descarga de documentos (clientes_documentos.php, .btnDoc).
      Dos arreglos que pidio el cliente:
      a) El icono era el de Word (fa-file-word-o); se cambia por la flecha de
         descarga (fa-download) via el content del glyph, sin tocar el HTML.
      b) Al pulsar, el ripple de Waves ensanchaba el boton (36->41px) y
         descolocaba el icono ("un icono invisible desplaza al original"). Se
         fija el tamano del boton y se centra el icono con flex: el ripple es
         position:absolute, asi que ya no altera el tamano ni la posicion.
--------------------------------------------------------------------------- */
.btnDoc .fa-file-word-o:before{
  content:"\f019";   /* fa-download: flecha hacia abajo de descarga */
}
.btnDoc.btn-icon{
  width:38px;
  height:38px;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  box-sizing:border-box;
  line-height:1;
}
.btnDoc.btn-icon > i{
  margin:0;
  line-height:1;
}