@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


.PrincipalContentContainer h1, .PrincipalContentContainer h1 span, .PrincipalContentContainer h1 a, body,
.PrincipalContentContainer h2, .PrincipalContentContainer h2 span, .PrincipalContentContainer h2 a,
.PrincipalContentContainer h2, .PrincipalContentContainer h2 span, .PrincipalContentContainer h2 a,
.PrincipalContentContainer a, .PrincipalContentContainer a span,
p.MsoNormal, li.MsoNormal, div.MsoNormal, .MsoListParagraph, p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle, p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst, p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast, #HERMES_FORM_Container, #HERMES_FORM_Container label, #HERMES_FORM_Container select, .PrincipalContentContainer, .VTabsPages, .MsoTableGrid, .ui-widget-header,
.FooterInfoContainer
 {
  /*font-family: 'Roboto', sans-serif !important;*/
   font-family: 'Montserrat', sans-serif  !important;
   font-weight: 300 !important;
}

    .card {
      height: 360px;
/*      perspective: initial;*/
	  border: 0px;
    }

    .card-inner:not(.expanded,.flipped):hover{
      transform: scale(1.07);
      /*box-shadow: rgba(0,0,0, 0.2) 1px 4px 4px;*/
      transition: transform 0.3s ease-in, box-shadow 0.5s ease-in;
	   z-index: 101;
    }


    .card-inner {
      margin:auto;
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      display: block;
      transition: transform 0.7s ease-in-out;
	  /*border: 1px solid black;*/
    }

    /* Expansión sin afectar el layout */
    .card-inner.expanded {
      position: fixed;
      width: 80%;
      height: calc(100vh - 10%) !important;
      opacity: 1 !important;
      top: 5%;
      left: 10%;
      /*transform: translate(-50%, -50%) rotateY(180deg);*/
      z-index: 1001; /* por encima del overlay */
    }

    .card-inner.flipped {
      /*transition: transform 0.7s, all 1s ease-in-out;*/
      height: 0;
      /*width: 90%;*/
      /*box-shadow: 0 10px 12px rgba(0,0,0,0.2) !important;*/
      transform: rotateY(180deg);
    }

    .card-inner.toOpen {
      transition: all 0.7s ease-in;
      /*height: 0 !important;
      width: 0 !important;*/
	  z-index:10000;
    }

    .card-inner.toClose {
      height: 0 !important;
      width: 0 !important;
      box-shadow: none !important;
      opacity: 0 !important;
      transform: scale(0.0);
      transition: all 0.7s !important;
    }

    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #eee;
      border-radius: 10px;
      /*box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);*/
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: all 1.5s;
      opacity: 1;
	  z-index:1001;
	  cursor: pointer;
     /* padding: 20px 10px 20px 20px;*/
    }


    /* Aplica estos estilos al contenedor interno, por ejemplo, con la clase .container */
    /* Para navegadores basados en Webkit (Chrome, Safari, Opera) */
    .card-body::-webkit-scrollbar {
      width: 4px; /* Ancho del scroll */
    }
    .card-body::-webkit-scrollbar-track {
      background: rgba(237, 221, 221, 0.1); /* Color de fondo de la pista */
      border-radius: 10px; /* Esquinas redondeadas */
    }
    .card-body::-webkit-scrollbar-thumb {
      background: #194d74; /* Color del "thumb" (la parte que se mueve) */
      border-radius: 10px; /* Esquinas redondeadas */
    }
    .card-body::-webkit-scrollbar-thumb:hover {
      background: #555; /* Color al hacer hover sobre el thumb */
    }
    /* Para Firefox */
    .card-body {
      max-height: 100%;
      overflow: auto;
      scrollbar-width: thin; /* Opciones: auto, thin */
      scrollbar-color: #194d74 rgba(237, 221, 221, 0.1); /* Primer color: thumb, segundo: track */
      scrollbar-gutter: stable;
      padding: 10px;
      margin:10px 0;
	  

    }


    .card-back {
      background-color: #fff;
      transform: rotateY(180deg);
      flex-direction: column;
	  z-index: 1002;
    }

    .flipped:not(.toClose) .card-front{
      opacity: 0;
    }

    .close-btn {
      position: absolute;
      top: -12px;
      right: -3px;
      background: transparent;
      border: none;
      padding: 5px 8px;
     cursor: pointer;
      border-radius: 10%;
      /*transition: all 0.3s;*/
      font-size: 3.5rem;
      transform: rotate(45deg);
      color: black;
    }

    .close-btn:hover{
      /*background: rgba(173, 173, 173, 0.75);*/
      scale: 0.85;
      font-weight: bolder;
      transition: scale 0.3s;
      /*color: white;*/
    }


    /* Overlay global para foco en tarjeta abierta */
    #GridCardsOverlay {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      /*en caso de que quiera tener fondo*/
      background: rgba(0, 0, 0, 0.5);
      /*transition: all 1s ease;*/
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 10; /* menor que .card-inner.expanded */
    }
.card-inner.expanded .card-back {
    z-index: 1002;
    position: relative; /* o absolute, pero dentro del expanded */
}
    body.gridcards-overlay-active #GridCardsOverlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
	   z-index: 10;
	   background: rgba(0, 0, 0, 0.5);
    }
	
	
/*INICIO overrides*/	
.row > .card {

     padding: 12px !important;
}


.CardModal .card-body{
	width:94%;
	background-color:white;
	margin:44px 20px 20px;
}

.card-body {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  height:100%;
}

.card-body * {
  max-width: 100% !important;
  box-sizing: border-box;
     font-family: 'Montserrat', sans-serif  !important;
   font-weight: 300 !important;
}

.card-body img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}


.card-body table {
  width: 100%;
}

.card-body td {
  width: initial !important;
}

.card-body iframe {
  height: calc(53vh) !important;	
  width: 100% !important;
  
}

/*FIN overrides*/	
	
	
/*
    @media (max-width: 992px) {
      .card {
        width: 45%
      }
    }


    @media (min-width: 1400px) {
      .card-inner.expanded {
        width: 60% !important;
        left: 20%;
      }
    }

    @media (min-width: 2000px) {
      .card-inner.expanded {
        width: 40% !important;
        left: 30%;
      }
    }
*/

    @media (max-width: 600px) {
      .card {
        position:relative;
        width: 100%; /* 1 tarjeta por fila */
      }
      /* Expansión sin afectar el layout */
      .card-inner.expanded {
        width: 95%;
        /*height: 600px;*/
		 height: calc(100vh - 10%) !important;
        top: 5%;
        left: 2.5%;
        z-index: 1001; /* por encima del overlay */
      }

      /*body, .container{
        padding: 0 15px !important;
        margin: 0 !important;
      }*/

      .containerx{
        overflow:initial;
      }

      .close-btn {
        position: absolute;
        top: 5px;
        right: 10px;
      }
	  
	.card-body iframe {
	  height: calc(85vh) !important;	
}	  
	  
    }