:root {
  --azul: #48459c;
  --gris: #5b6772;
  --gris-light: #f7f7f7;
  --rojo: #e73f27;
  --verde: #25d366;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* POLIZAS ESTILOS */

.boton-volver {
  display: inline-flex;
  align-items: center;
  color: var(--gris);
  text-decoration: none;
  margin-bottom: 30px;
  font-size: 16px;
  transition: color 0.3s ease;
}

.boton-volver:hover {
  color: var(--azul);
}

.boton-volver .material-icons {
  margin-right: 5px;
}

.ver-anteriores {
  display: block;
  width: 250px;
  margin: 0 auto 40px;
  padding: 12px;
  text-align: center;
  border: 2px solid var(--azul);
  border-radius: 30px;
  text-decoration: none;
  color: var(--azul);
  font-weight: bold;
  transition: all 0.3s ease;
}

.ver-anteriores:hover {
  background-color: var(--azul);
  color: white;
}

.contenedor-polizas {
  display: flex;
  flex-flow: row wrap;
}
.pagination {
  margin-top: 10px;
  text-align: center;
  .page {
    color: black;
    font-weight: 300;
    margin: 0 5px;
    &.active {
      font-weight: 600;
      text-decoration: underline;
    }
  }
}

.poliza {
  background-color: var(--gris-light);
  border: 1px solid transparent;
  border-radius: 15px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-right: 2%;
  position: relative;
  padding: 25px;
  transition: 0.2s ease-in-out;
  width: 49%;
  &:hover {
    border-color: var(--gris);
  }
  &:nth-of-type(2n + 2) {
    margin-right: 0;
    &::after {
      display: none;
    }
  }
  &:last-child::after {
    display: none;
  }

  .poliza__imagen {
    width: 30%;
    margin: 0 !important;
    margin-bottom: 20px;
    margin-right: 10%;
    img {
      margin: 0 auto;
      width: 100%;
      height: auto;
      border-radius: 10px;
    }
  }

  .poliza__contenido {
    flex: 1;
    padding-left: 20px;
    position: relative;
    top: -3px;
    .poliza__contenido__estado {
      color: black;
      display: inline-flex;
      align-items: center;
      flex-flow: row wrap;
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: 600;
      width: fit-content;
      .poliza__contenido__estado__indicador {
        background: var(--gris);
        border-radius: 100%;
        height: 10px;
        width: 10px;
        margin-right: 5px;
        &.no-vigente {
          background: var(--rojo);
        }
        &.vigente {
          background: var(--verde);
        }
      }
      .poliza__contenido__estado__vigencia {
        text-transform: uppercase;
      }
      .poliza__contenido__estado__numero {
        color: var(--gris);
        font-size: 11px;
        width: 100%;
      }
    }

    .poliza__contenido__titulo {
      font-size: 20px;
      font-weight: 900;
      margin-bottom: 0;
      color: var(--gris);
      padding-bottom: 10px;
    }

    .poliza__contenido__cuotas,
    .poliza__contenido__saldo,
    .poliza__contenido__vencimiento,
    .poliza__contenido__proximacuota {
      display: flex;
      align-items: center;
      color: var(--gris);
      font-size: 14px;
      padding-bottom: 5px;
      img {
        margin-right: 6px;
        opacity: 0.8;
        width: 17px;
      }
      strong {
        font-weight: 900;
        color: var(--gris);
        font-size: 14px;
        margin-left: auto;
      }
    }

    .poliza__contenido__acciones {
      display: block;
      margin-top: 20px;
      .boton-secundario {
        margin-left: 5px;
      }
    }
  }
}

.descripcion-poliza {
  color: var(--gris);
  font-size: 16px;
  margin-bottom: 0;
  width: calc(100% - 210px);
}

.pago-poliza {
  color: black;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gris);
  width: calc(100% - 210px);
}

.boton {
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  flex: 1;
}

.boton-primario {
  background-color: var(--azul);
  color: white;
  border: none;
}

.boton-primario:hover {
  background-color: #33307aff;
}

.boton-secundario {
  background-color: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
}

.boton-secundario:hover {
  background-color: var(--azul);
  color: white;
}

.page-id-11744 .main_title {
  display: none;
}

.page-id-11744 .container {
  max-width: none;
  padding-top: 0;
  width: 100%;
}

/* DETALLES DE POLIZA */
#poliza-details {
  div {
    display: block !important;
  }
  .seguro-detalles {
    .seguro-detalles__img {
      background: radial-gradient(circle, transparent, white),
        url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjA1KSIgaGVpZ2h0PSI0MHB4IiB3aWR0aD0iMTEycHgiIHZpZXdCb3g9IjAgMCAxMTIgNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAsMzUsNTYsMGw1NiwzNXY1TDU2LDUsMCw0MFoiLz48L3N2Zz4=);
      text-align: center;
      img {
        max-width: 300px;
      }
    }
    .seguro-detalles__estado {
      .estado {
        text-align: center;
        font-size: 13px;
        font-weight: 900;
        color: black;
        &::before {
          background: red;
          display: inline-block;
          clip-path: circle();
          content: "";
          height: 10px;
          margin-right: 10px;
          width: 10px;
        }
      }
      .vigente::before{
        background: var(--verde);
      }
    }
    .seguro-detalles__titulo {
      padding-top: 15px;
      text-align: center;
      h1 {
        color: var(--azul);
        font-weight: 900;
        font-size: 31px;
      }
      p {
        color: black;
        font-size: 15px;
        padding-bottom: 5px;
        text-align: center;
        strong {
          font-weight: 600;
        }
      }
    }
    .seguro-detalles__cuotas {
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      padding: 15px;
      width: 40%;
      margin: 15px auto 0;
      p {
        display: flex;
        align-items: center;
        img {
          margin-right: 15px;
          opacity: 0.8;
          width: 22px;
        }
        strong {
          color: black;
          margin-left: auto;
        }
      }
      .seguro-detalles__cuotas__pagas {
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 5px;
        padding-bottom: 5px;
      }
    }

    .seguro-detalles__botones {
      margin: 50px 0;
      text-align: center;
      .et_pb_button {
        margin-right: 10px;
      }
      .boton-dark {
        margin: 0 5px;
        font-size: 20px !important;
      }
      .boton-secundario {
        background-color: transparent !important;
        color: var(--azul) !important;
        border: 2px solid var(--azul) !important;
      }

      .boton-secundario:hover {
        background-color: var(--azul) !important;
        color: white !important;
      }
    }
    .seguro-detalles__cuotas-list {
      display: flex !important;
      align-items: center;
      flex-flow: row wrap;
      justify-content: center;
      .seguro-detalles__cuota {
        border: 1px solid;
        border-radius: 5px;
        padding: 16px;
        display: flex !important;
        align-items: center;
        margin-bottom: 25px;
        margin-right: 2%;
        overflow: hidden;
        position: relative;
        width: 32%;
        &:nth-child(3n + 3) {
          margin-right: 0;
        }
        @media only screen and (max-width: 1250px) {
          width: 49%;
          &:nth-child(2n + 2) {
            margin-right: 0;
          }
        }
        @media only screen and (max-width: 767px) {
          margin-right: 0;
          width: 100%;
        }

        &::after {
          background: url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjAyKSIgaGVpZ2h0PSIxOTRweCIgd2lkdGg9IjExMnB4IiB2aWV3Qm94PSIwIDAgMTEyIDE5NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTYsMTI5LjMzLDAsOTcsNTYsNjQuNjcsMTEyLDk3Wk01NiwwSDBWMzIuMzNabTU2LDMyLjMzVjBINTZaTTU2LDE5NGg1NlYxNjEuNjdaTTAsMTYxLjY3VjE5NEg1NloiLz4KCQkJCQkJCQkJCTxwYXRoIGZpbGwtb3BhY2l0eT0iLjUiIGQ9Ik01NiwwVjY0LjY3TDAsOTdWMzIuMzNabTAsMTI5LjMzVjE5NGw1Ni0zMi4zM1Y5N1oiLz48L3N2Zz4=);
          content: "";
          height: 100%;
          left: 0;
          opacity: 0.4;
          position: absolute;
          top: 0;
          width: 100%;
        }
        .seguro-detalles__cuota__nro {
          margin-right: 0;
          text-align: center;
          width: 30%;
          span {
            color: black;
            display: block;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          strong {
            font-size: 30px;
            font-weight: 900;
            font-family: "Arial";
          }
        }
        .seguro-detalles__cuota__moneda,
        .seguro-detalles__cuota__pago,
        .seguro-detalles__cuota__vencimiento {
          color: #686868;
          font-size: 13px;
          padding-bottom: 5px;
        }
        .seguro-detalles__cuota__moneda {
          padding-right: 40px;
        }
        .seguro-detalles__cuota__vencimiento {
          padding-bottom: 0;
          span {
            display: block;
          }
        }

        > div {
          border-left: 1px solid;
          padding-left: 20px;
        }
      }

      .seguro-detalles__cuota.pendiente {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath style='fill: %23fd7171' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E")
            no-repeat calc(100% - 16px) 15px/ 15px,
          #fdf8f8;
        border-color: #ffcaca;
        .seguro-detalles__cuota__nro {
          span {
            color: #fd7171;
          }
          strong {
            color: #fd7171;
          }
        }
        > div {
          border-color: #fd7171;
        }
      }
      .seguro-detalles__cuota.paga {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath style='fill: %234ad54a' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E")
            no-repeat calc(100% - 16px) 15px/ 15px,
          #f9fff9;
        border-color: #ccf8cc;
        .seguro-detalles__cuota__nro {
          span {
            color: #4ad54a;
          }
          strong {
            color: #4ad54a;
          }
        }

        > div {
          border-color: #4ad54a;
        }
      }

      .seguro-detalles__cuota.intermedio {
        background: #fffef5;
        border-color: #ffe0bd;
        .seguro-detalles__cuota__nro {
          span {
            color: #ffdc4b;
          }
          strong {
            color: #ffdc4b;
          }
        }
        > div {
          border-color: #ffdc4b;
        }
      }

      #msg {
        text-align: center;
        font-size: 12px;
        color: black;
        margin-bottom: 30px;
      }
    }
    .seguro-detalles__archivos {
      background: #fcfcfc;
      border-radius: 5px;
      display: flex !important;
      column-gap: 15px;
      align-items: center;
      flex-flow: row wrap;
      justify-content: center;
      margin-top: 50px;
      padding: 30px;
      text-align: center;
      h2 {
        color: var(--gris);
        font-size: 21px;
        font-weight: 600;
        padding-bottom: 30px;
        width: 100%;
      }
      .et_pb_button {
        display: flex;
        align-items: center;
        border-radius: 30px !important;
        line-height: 1.5em !important;
        gap: 10px;
        img {
          opacity: 0.8;
          width: 19px;
        }
        &:hover {
          img {
            filter: invert(1);
          }
        }
      }
    }

    .seguro-detalles__corredor {
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      margin: 20px auto 0;
      padding: 20px;
      width: fit-content;
      h2 {
        color: var(--gris);
        font-size: 21px;
        font-weight: 600;
        text-align: center;
      }
      p,
      a {
        display: flex;
        align-items: center;
        gap: 10px;
        img {
          width: 21px;
        }
      }
      p {
        padding-bottom: 5px;
      }
      a {
        color: var(--gris);
        font-weight: 600;
      }
    }

    .seguro-detalles__relacionados {
      border-top: 1px solid var(--gris);
      margin-top: 45px;
      padding-top: 40px;
      h2 {
        color: var(--azul);
        font-weight: 600;
        text-align: center;
      }
      .seguro-detalles__relacionados__list {
        display: flex !important;
        flex-flow: row wrap;
        margin-top: 30px;
        .seguro-detalles__relacionados__list__producto {
          border: 1px solid var(--gris-light);
          border-radius: 10px;
          padding: 20px;
          margin-right: 2%;
          text-align: center;
          transition: 0.2s linear all;
          width: 32%;
          &:nth-child(3) {
            margin-right: 0;
          }
          .seguro-detalles__relacionados__list__producto_imagen {
            text-align: center;
            img {
              max-width: 250px;
            }
          }
          .seguro-detalles__relacionados__list__producto_nombre {
            text-align: center;
            font-weight: 600;
            margin-top: 10px;
          }
          .seguro-detalles__relacionados__list__producto_boton {
            background: var(--azul);
            border-radius: 25px;
            color: #fff;
            text-decoration: none;
            margin-bottom: 30px;
            font-size: 16px;
            padding: 7px 20px;
            transition: 0.2s linear;
          }
          .seguro-detalles__relacionados__list__producto_boton:hover {
            background: #262469;
          }
        }
        .seguro-detalles__relacionados__list__producto:hover {
          border-color: var(--gris);
        }
      }

      .seguro-detalles__relacionados__wsp {
        margin-top: 40px;
        text-align: center;
        p {
          font-weight: 600;
          margin-bottom: 20px;
        }
        a {
          background: var(--gris);
          border-radius: 25px;
          color: #fff;
          text-decoration: none;
          margin-bottom: 30px;
          font-size: 16px;
          padding: 7px 20px;
          transition: 0.2s linear;
        }
        a:hover {
          background: #4b535a;
        }
      }
    }
  }
}

#que-hacer {
  background: #101e88 !important;
  .et_pb_column {
    background: transparent !important;
  }
  .et_pb_text {
    display: block;
  }
  h2,
  p {
    color: white;
  }
  h2 {
    font-size: 21px !important;
    text-align: center;
  }
}

.perfil-usuario {
  display: flex;
  flex-direction: column;
  /* border: 1px solid var(--gris-light);
    border-radius: 20px; */
  justify-content: center;
  /* padding: 25px; */
  .col1 {
    border-bottom: 1px solid var(--azul);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-bottom: 20px;
    justify-content: center;
    text-align: center;
    .icon {
      font-size: 60px;
      margin-bottom: 20px;
    }
    .nombre {
      p {
        color: var(--azul);
        font-size: 22px;
        font-weight: 600;
      }
    }
  }
  .col2 {
    position: relative;
    div:not(.contrasena) {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      margin-bottom: 20px;
      i {
        color: var(--azul);
        font-size: 16px;
      }
      p {
        padding-bottom: 0;
        width: 100%;
      }
      p:first-child {
        color: #000;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .contrasena {
      align-items: center;
      color: white;
      background: var(--azul);
      border-color: var(--azul);
      cursor: pointer;
      display: flex;
      font-size: 15px;
      gap: 10px;
      justify-content: center;
      border-radius: 20px;
      padding: 7px 15px;
      transition: 0.2s linear;
      i {
        color: white;
      }
    }
    .contrasena:hover {
      background: #272566;
    }

    .contrasena-form{
      /* display: block !important; */
      padding: 30px 0 0;
      #passw-form{
        width: 100%;
        div{
          display: block;
          input[type="password"]{
            border-color: #6dc8c2;
            border-radius: 20px;
            padding: 12px 10px;
            transition: 0.2s linear all;
            width: 100%;
          }
          input[type="password"]:focus{
            border-color: var(--azul);
          }
        }

        #passw-btn{
          background: #6dc8c2;
          border: 1px solid transparent;
          border-radius: 20px;
          color: white;
          cursor: pointer;
          font-size: 15px;
          line-height: 2em;
          padding: 5px 10px;
          transition: 0.2s linear all;
        }
        #passw-btn:hover{
          background: transparent;
          border-color: #6dc8c2;
          color: #6dc8c2;
        }
        #passw-msg{
          line-height: 1.2em;
          color: black;
          border-left: 5px solid #6dc8c2;
          padding-left: 10px;
        }
      }
    }
  }
}

/* RERSPONSIVE */
@media only screen and (max-width: 1250px) {
  #dashboard-autonomy .et_pb_row,
  #mi-perfil-autonomy .et_pb_row,
  #mis-polizas-autonomy .et_pb_row,
  #detalle-poliza-autonomy .et_pb_row {
    width: 90% !important;
  }
}
@media only screen and (max-width: 1100px) {
  .poliza {
    flex-direction: column;
    .poliza__contenido {
      padding-bottom: 50px;
      padding-left: 0;
      .poliza__contenido__acciones {
        bottom: 0;
        position: absolute;
        text-align: center;
        width: 100%;
      }
    }
  }
}
@media only screen and (max-width: 980px) {
  .seguro-detalles__cuotas {
    width: 100% !important;
    p {
      font-size: 15px;
    }
  }
  .seguro-detalles__botones {
    a {
      font-size: 18px !important;
      line-height: 1.5em !important;
    }
  }
  .seguro-detalles__archivos,
  .seguro-detalles__corredor {
    h2 {
      font-size: 18px !important;
    }
  }

  .seguro-detalles__archivos {
    row-gap: 15px;
  }
  .seguro-detalles__corredor {
    p,
    a {
      font-size: 15px !important;
    }
    img {
      width: 17px;
    }
  }
}

@media only screen and (max-width: 1250px) {
  @media only screen and (min-width: 768px) {
    .seguro-detalles__relacionados {
      .seguro-detalles__relacionados__list__producto {
        margin-bottom: 20px;
        margin-right: 2% !important;
        width: 49% !important;
      }
      .seguro-detalles__relacionados__list__producto:nth-child(2n + 2) {
        margin-right: 0 !important;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .poliza {
    margin-right: 0;
    width: 100%;
    .poliza__imagen {
      width: 60%;
    }
    .poliza__contenido {
      padding-bottom: 110px;
      .poliza__contenido__acciones {
        a {
          display: block;
        }
        a:first-child {
          margin-bottom: 10px;
        }
      }
    }
  }
  .seguro-detalles__botones {
    a {
      display: block;
      margin: 15px 0 !important;
    }
  }
  .seguro-detalles__relacionados__list__producto {
    margin-bottom: 20px;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

@media only screen and (max-width: 480px) {
  .poliza__contenido {
    .poliza__contenido__estado {
      justify-content: center;
      .poliza__contenido__estado__numero {
        text-align: center;
      }
    }

    .poliza__contenido__titulo {
      text-align: center;
    }

    p {
      margin-bottom: 15px;
      flex-direction: column;
      strong {
        margin: 0 auto;
      }
    }
  }
}