/* ============================= */
/*      GENERAL      */
/* ============================= */
/* Estas reglas son globales */
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

:root {
    /* --variables CSS no aceptan !important */
  --label-red: #e83929;
  --light-red: #e01e25;
  --dark-red: #a21d20;
  --light-gray: #ffffff;
  --medium-gray: #dcdddf;
  --dark-gray: #c2c2c2;
}


/* ==================================================== */
/* ESTILOS APLICADOS SOLO DENTRO DEL MODAL .modal.fade  */
/* ==================================================== */

/* Clases de utilidad que solo aplicarán dentro del modal */

.bg-label-red-light .text-light-gray p {
	text-align: center !important;
	color: white !important;
}

.text-center{
  text-align: center !important;
}

.modal.fade .text-light{
  color: white !important;
}

.modal.fade p{
  padding: 0px !important;
}

.modal.fade h3{
color: #383838 !important;
}

.modal.fade td{
text-align: initial !important;
font-size: 1em !important;
}

.modal.fade th{
color: #383838 !important;
}

.modal.fade {
  padding: 0px !important;
}

.modal.fade .medium-gray {
  background-color: var(--medium-gray) !important;
}

.modal.fade .lightk-gray {
  background-color: var(--light-gray) !important;
}

.modal.fade .light-gray {
  background-color: var(--light-gray) !important;
}

.modal.fade .dark-gray {
  background-color: var(--dark-gray) !important;
}

.modal.fade .red-text-table {
  color: var(--label-red) !important;
}

.modal.fade .red-text-tittle {
  color: var(--light-red) !important;
}

/* ============================= */
/*    TABLAS Y ESTILOS   */
/* ============================= */

#cumplimientoleyFATCAESP .modal-footer {
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
border: none !important;
}

#leyFATCAESP .modal-footer {
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
border: none !important;
}

#reporteESP .modal-footer {
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
border: none !important;
}

#cumplimientoleyFATCAENG .modal-footer {
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
border: none !important;
}

#leyFATCAENG .modal-footer {
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
border: none !important;
}

#reporteENG .modal-footer {
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
border: none !important;
}

.modal.fade .media{
margin: 10px 0px 10px;
}

.modal.fade .text-right {
  text-align: right !important;
}

.modal.fade .text-left {
  text-align: left !important;
}

.modal.fade .text-center {
  text-align: center !important;
}

.modal.fade .table-borderless {
  width: 100% !important;
  table-layout: auto !important;
}

.modal.fade .table-borderless th {
  padding: 0.2vh !important;
  background: var(--dark-gray) !important;
}

.modal.fade .table-borderless tr td {
 border-top: none !important;
 border-bottom: none !important;
}

.modal.fade .table-borderless td {
  padding: 0.2vh !important;
  background-color: var(--medium-gray) !important;
color: #383838 !important;
}

.modal.fade .table-light-red {
  margin-bottom: 0 !important;
}

.modal.fade .table-light-red th {
  padding: 0.1vh !important;
  background: var(--light-red) !important;
  color: var(--light-gray) !important;
}

.modal.fade .table-light-red.text-center,
.modal.fade .table-light-red .text-center {
  vertical-align: middle !important;
  text-align: center !important;
}

/* ============================= */
/*    TÍTULOS / CABECERA  */
/* ============================= */
.modal.fade .tittle-background {
  background: linear-gradient(to top right, var(--light-red) 5%, var(--dark-red) 95%) !important;
  color: var(--light-gray) !important;
  padding: 1vh 0 !important;
  margin: 8vh 0 10vh 0 !important;
  text-align: center !important;
}

.modal.fade .tittle-background h1,
.modal.fade .tittle-background h2 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important;
}

.modal.fade .bg-label-red-light {
 background-color: var(--light-red) !important;
}

.modal.fade .text-light-gray {
 color: var(--light-gray) !important;
}

.modal.fade .py-4 {
 padding-top: 4vh !important;
 padding-bottom: 4vh !important;
}

.modal.fade .media-luna {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 60vw !important;
  height: 10vh !important;
  background: var(--light-red) !important;
  border-bottom-left-radius: 100% 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

.modal.fade .center-vertical-horizontal {
 position: absolute !important;
 top: 50% !important;
 left: 50% !important;
 transform: translate(-50%, -50%) !important;
 z-index: 1 !important;
}

/* ============================= */
/*   DECORATIVOS (SVG, FLECHAS) */
/* ============================= */
.modal.fade .red-arrow {
  width: 24px !important;
  height: 24px !important;
  color: var(--label-red) !important;
}

.modal.fade .gray-arrow {
  width: 24px !important;
  height: 24px !important;
  color: var(--dark-gray) !important;
}

.modal.fade .background-mosaic-1 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 80vw !important;
  height: 30vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.modal.fade .background-mosaic-2 {
  position: fixed !important; /* Cuidado con fixed y !important en modales */
  bottom: 0 !important;
  right: 0 !important;
  width: 80vw !important;
  height: 30vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.modal.fade .background-mosaic-3 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important; /* Cuidado con vw y !important en contenedores */
  height: 100vh !important; /* Cuidado con vh y !important en contenedores */
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.modal.fade .mosaic-icon-3 {
  position: absolute !important;
  stroke: var(--medium-gray) !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

.modal.fade .mosaic-icon,
.modal.fade .mosaic-icon-2 {
  position: absolute !important;
  stroke: var(--light-gray) !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

.modal.fade .size-sm { width: 5.5vw !important; height: 5.5vw !important; }
.modal.fade .size-md { width: 10vw !important; height: 10vw !important; }
.modal.fade .size-lg { width: 20vw !important; height: 20vw !important; }
.modal.fade .size-xs { width: 3vw !important; height: 3vw !important; }

.modal.fade .rotate-0  { transform: rotate(0deg) !important; }
.modal.fade .rotate-90 { transform: rotate(90deg) !important; }
.modal.fade .rotate-180 { transform: rotate(180deg) !important; }
.modal.fade .rotate-270 { transform: rotate(270deg) !important; }

/* Mosaicos */
.modal.fade .mosaic-icon:nth-child(1) { top: 0vh !important;  left: 2vw !important; }
.modal.fade .mosaic-icon:nth-child(2) { top: 10vh !important;  left: 6vw !important; }
.modal.fade .mosaic-icon:nth-child(3) { top: 18vh !important;  left: 11vw !important; }
.modal.fade .mosaic-icon:nth-child(4) { top: 0vh !important;  left: 12vw !important; }
.modal.fade .mosaic-icon:nth-child(5) { top: 10vh !important;  left: 22vw !important; }
.modal.fade .mosaic-icon:nth-child(6) { top: 1vh !important;  left: 27vw !important; }
.modal.fade .mosaic-icon:nth-child(7) { top: 5vh !important;  left: 34vw !important; }
.modal.fade .mosaic-icon:nth-child(8) { top: 1vh !important;  left: 38vw !important; }
.modal.fade .mosaic-icon:nth-child(9) { top: 2vh !important;  left: 45vw !important; }
.modal.fade .mosaic-icon:nth-child(10) { top: 2vh !important;  left: 50vw !important; }
.modal.fade .mosaic-icon:nth-child(11) { top: 0vh !important;  left: 55vw !important; }

.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(1) { bottom: 0vh !important; right: 2vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(2) { bottom: 10vh !important; right: 6vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(3) { bottom: 7vh !important; right: 13vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(4) { bottom: 0vh !important; right: 12vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(5) { bottom: 5vh !important; right: 23vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(6) { bottom: 1vh !important; right: 27vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(7) { bottom: 5vh !important; right: 31vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(8) { bottom: 1vh !important; right: 38vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(9) { bottom: 2vh !important; right: 45vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(10) { bottom: 2vh !important; right: 50vw !important; }
.modal.fade .background-mosaic-2 .mosaic-icon-2:nth-child(11) { bottom: 0vh !important; right: 55vw !important; }

.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(1) { bottom: 20vh !important; left: 20vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(2) { bottom: 24vh !important; left: 24vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(3) { bottom: 28vh !important; left: 28vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(4) { bottom: 32vh !important; left: 32vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(5) { bottom: 37vh !important; left: 35vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(6) { bottom: 42vh !important; left: 40vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(7) { bottom: 47vh !important; left: 45vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(8) { bottom: 50vh !important; left: 52vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(9) { bottom: 59vh !important; left: 59vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(10) { bottom: 65vh !important; left: 65vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(11) { bottom: 72vh !important; left: 75vw !important; }
.modal.fade .background-mosaic-3 .mosaic-icon-3:nth-child(12) { bottom: 77vh !important; left: 80vw !important; }

.input-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 0.25vh;
}

.input-row-label {
  white-space: nowrap;
  font-size: 16px;
  margin-right: 0.5vw;
}

.input-underline.inline {
  display: inline-block;
  flex-grow: 1;
  min-height: 3.25vh;
  padding-top: 0.5vh;
  background-color: rgba(194, 220, 255, 0.25);
  border-bottom: 1.5px solid black;
}

.input-underline.inline-red {
  display: inline-block;
  flex-grow: 1;
  min-height: 3.25vh;
  padding-top: 0.5vh;
  background-color: rgba(224, 30, 37, 0.20);
  border-bottom: 1.5px solid black;
}

/* ============================= */
/*   UTILIDADES TIPOGRAFÍA  */
/* ============================= */
.modal.fade .fs-1 { font-size: 36px !important; }
.modal.fade .fs-2 { font-size: 30px !important; }
.modal.fade .fs-3 { font-size: 24px !important; }
.modal.fade .fs-4 { font-size: 20px !important; }
.modal.fade .fs-5 { font-size: 16px !important; }
.modal.fade .fs-6 { font-size: 12px !important; }

.modal.fade .fw-light  { font-weight: 300 !important; }
.modal.fade .fw-normal  { font-weight: 400 !important; }
.modal.fade .fw-semibold { font-weight: 600 !important; }
.modal.fade .fw-bold   { font-weight: 700 !important; }
.modal.fade .fw-bolder  { font-weight: 900 !important; }

.modal.fade .fst-italic { font-style: italic !important; }
.modal.fade .fst-normal { font-style: normal !important; }

.modal.fade .text-uppercase { text-transform: uppercase !important; }
.modal.fade .text-lowercase { text-transform: lowercase !important; }
.modal.fade .text-capitalize { text-transform: capitalize !important; }

.modal.fade .text-start { text-align: left !important; }
.modal.fade .text-center { text-align: center !important; }
.modal.fade .text-end  { text-align: right !important; }

.modal.fade .pl-5 { padding-left: 50px !important; }

.modal.fade td.li-in,
.modal.fade .li-in {
 padding-left: 2vw !important;
 padding-top: 0.5vh !important;
}

/* ============================= */
/*    SISTEMA DE COLUMNAS  */
/* ============================= */
.modal.fade .col-1 { width: 8.33vw !important; }
.modal.fade .col-2 { width: 16.66vw !important; }
.modal.fade .col-3 { width: 25vw !important; }
.modal.fade .col-4 { width: 33.33vw !important; }
.modal.fade .col-5 { width: 41.66vw !important; }
.modal.fade .col-6 { width: 50vw !important; }
.modal.fade .col-7 { width: 58.33vw !important; }
.modal.fade .col-8 { width: 66.66vw !important; }
.modal.fade .col-9 { width: 75vw !important; }
.modal.fade .col-10 { width: 83.33vw !important; }
.modal.fade .col-11 { width: 91.66vw !important; }
.modal.fade .col-12 { width: 100vw !important; }

/* ============================= */
/*   COVER SVG + TEXTO    */
/* ============================= */
.modal.fade .cover-container {
 height: 100vh !important;
 padding: 0 !important;
 overflow: hidden !important;
}

.modal.fade .cover-row {
 height: 100vh !important;
 margin: 0 !important;
}

.modal.fade .cover-text-col {
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
 height: 100vh !important;
}

.modal.fade .cover-text-wrapper p {
 font-size: 36px !important;
}

.modal.fade .cover-svg-col {
 position: relative !important;
 height: 100vh !important;
 padding: 0 !important;
}

.modal.fade .cover-svg {
 position: absolute !important;
 right: -8vw !important;
 top: 50vh !important;
 transform: translateY(-50%) scaleX(-1) !important;
 width: 50vw !important;
 height: auto !important;
 stroke: var(--light-red) !important;
}

.table-limits {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin: 1vh 0 2vh 0;
}

.table-limits th,
.table-limits td {
  border: 1px solid black;
  vertical-align: top;
  padding: 0 1vw 0 1vw;
}

.table-limits th {
  background-color: var(--dark-gray);
  font-weight: bold;
  text-align: center;
}

/* ============================= */
/*   TABLAS RESPONSIVAS MOVIL */
/* ============================= */
@media screen and (max-width: 767px) {
  .modal.fade .responsive-table-thead {
    display: none !important;
  }

  .modal.fade .responsive-table-tbody > tr {
    display: block !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 1vh 0 !important;
    padding: 1vh !important;
  }

  .modal.fade .responsive-table-tbody td {
    display: block !important;
    text-align: left !important;
    padding: 1.5vh !important;
    border: none !important;
  }

  .modal.fade .responsive-table-title {
    display: block !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
  }

  .modal.fade .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .modal.fade .col-1, .modal.fade .col-2, .modal.fade .col-3, .modal.fade .col-4, .modal.fade .col-5, .modal.fade .col-6,
  .modal.fade .col-7, .modal.fade .col-8, .modal.fade .col-9, .modal.fade .col-10, .modal.fade .col-11, .modal.fade .col-12 {
    width: auto !important;
  }

  .modal.fade .cover-text-col,
  .modal.fade .cover-svg-col {
    float: none !important;
    width: 100vw !important;
    text-align: center !important;
  }

  .modal.fade .cover-text-wrapper p {
    font-size: 20px !important;
  }

  .modal.fade .cover-svg {
    left: 50% !important;
    right: auto !important;
    top: 60% !important;
    transform: translate(-50%, -50%) scaleX(-1) !important;
    width: 80vw !important;
  }
}

/* 4K */
@media only screen and (max-width: 3840px) {
  /* Asegúrate de añadir !important a las reglas dentro de este bloque si son para el modal */
}

/* 2K */
@media only screen and (max-width: 2560px) {
  /* Asegúrate de añadir !important a las reglas dentro de este bloque si son para el modal */
}

/* 1080p */
@media only screen and (max-width: 1920px) {
  /* Asegúrate de añadir !important a las reglas dentro de este bloque si son para el modal */
}

/* 720p */
@media only screen and (max-width: 1366px) {
  /* Asegúrate de añadir !important a las reglas dentro de este bloque si son para el modal */
}

/* TABLET */
@media only screen and (max-width: 1024px) {
  /* Asegúrate de añadir !important a las reglas dentro de este bloque si son para el modal */
}

/* MOBILE */
@media only screen and (max-width: 768px) {
  /* Asegúrate de añadir !important a las reglas dentro de este bloque si son para el modal */
}

/* SMALL MOBILE */
@media only screen and (max-width: 440px) {
  /* Asegúrate de añadir !important a las reglas dentro de este bloque si son para el modal */
}