/*
 * FACTURATica - Estilos principales
 * Versión: 2.4.0
 * Organizado y optimizado
 */

 /* Definiciones de fuentes */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   RESET Y ESTILOS BASE
   ============================================================ */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  body {
    margin: 0;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 1rem;
    font-weight: 100;
    color: #999;
    background: url(/images/fondo-ingreso-facturatica.jpg);
    background-size: cover;
    background-position: center;
    -webkit-overflow-Y: hidden;
    -moz-overflow-Y: hidden;
    -o-overflow-Y: hidden;
    overflow-y: hidden;
    -webkit-animation: fadeIn 1 1s ease-out;
    -moz-animation: fadeIn 1 1s ease-out;
    -o-animation: fadeIn 1 1s ease-out;
    animation: fadeIn 1 1s ease-out;
  }
  
  a {
    color: #999;
  }
  
  a:hover {
    color: #494949;
    text-decoration: none;
  }
  
  .h3, h3 {
    font-size: 1rem;
  }
  
  /* ============================================================
     ESTRUCTURA DE LAYOUT
     ============================================================ */
  
  /* Contenedor principal de login */
  .login-container {
    width: 100%;
    max-width: 700px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    display: flex;
    position: relative;
    overflow: hidden;
  }
  
  /* Panel de login */
  .login-panel {
    flex: 1;
    padding: 1rem;
    min-width: 320px;
  }
  
  .login-block {
    margin: 0;
  }
  
  .login-block .auth-box {
    margin: 5px auto 0 auto;
  }
  
  .card {
    border-radius: 7px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 0 7px 23px 0 rgb(244, 244, 244);
    
    /* Borde estilizado con degradado */
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 5px, transparent 5px) 0% 0%/8px 8px no-repeat,
        radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 5px, transparent 5px) 100% 0%/8px 8px no-repeat,
        radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 5px, transparent 5px) 0% 100%/8px 8px no-repeat,
        radial-gradient(circle at 0 0, #ffffff 0, #ffffff 5px, transparent 5px) 100% 100%/8px 8px no-repeat,
        linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 6px) calc(100% - 16px) no-repeat,
        linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 6px) no-repeat,
        linear-gradient(98deg, transparent 0%, #ff670f 100%),
        linear-gradient(143deg, transparent 0%, #ffffff 100%),
        linear-gradient(179deg, transparent 0%, #a5dc86 100%);
    border-radius: 8px;
    padding: 7px;
    box-sizing: border-box;
  }
  
  .card-block {
    padding: 0.5rem;
  }
  
  /* Header con logo */
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0rem;
  }
  
  .imgLogoFACTURATICA {
    padding-top: 8px;
    z-index: 1000;
  }
  
  /* Panel de características de escritorio */
  .features-panel-desktop {
    width: 280px;
    border-left: 1px solid #e5e7eb;
    background: linear-gradient(to bottom, #f9fafb, #ffffff);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  
  .features-header-desktop {
    padding: 1.25rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .features-header-desktop p {
    margin: 0;
    color: #666;
    font-style: italic;
    font-size: 0.875rem;
  }
  
  .features-list-desktop {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .feature-item-desktop {
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #666;
    transition: all 0.3s;
    position: relative;
    background: transparent;
  }
  
  .feature-item-desktop svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }
  
  /* Encabezado de pasos/tabs para mobile */
  .mobile-step-header {
    display: none; /* Oculto en escritorio */
    width: 100%;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem;
    box-sizing: border-box;
    text-align: center;
  }
  
  .mobile-step-header-phrase {
    margin-bottom: 0.1rem;
    color: #666;
    font-style: italic;
    font-size: 0.6rem;
  }
  
  .mobile-step-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  
  .mobile-step-header-top svg {
    width: 20px;
    height: 20px;
    color: #777;
  }
  
  .mobile-step-header-top h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #444;
  }
  
  .mobile-step-indicators {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
  }
  
  .mobile-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db; /* gris */
    transition: all 0.2s;
  }
  
  .mobile-step-dot.active {
    background: #707070; /* Verde */
    width: 16px;
    border-radius: 8px;
  }
  
  /* Footer */
  .footer, .footer2 {
    padding: 0;
    color: #494949;
    font-size: smaller;
    font-variant: small-caps;
    background-color: transparent;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
  }
  
  .footer a {
    color: #494949 !important;
  }
  
  /* ============================================================
     FORMULARIOS E INPUTS
     ============================================================ */
  
  /* Estilos base para grupos de formulario */
  .form-group {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  /* Estilos para los campos de texto e input */
  .form-control {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ddd;
    padding: 10px 0;
    background-color: transparent;
    border-radius: 0;
    font-size: 16px;
    transition: all 0.3s ease;
  }
  
  .form-control:focus {
    outline: none;
    border-bottom: 2px solid #a5dc86;
    box-shadow: none;
  }
  
  /* Animación de la barra inferior */
  .form-bar {
    position: relative;
    display: block;
    width: 0;
    margin: 0 auto;
    height: 2px;
    background: #a5dc86;
    transition: 0.3s ease all;
  }
  
  .form-control:focus~.form-bar {
    width: 100%;
  }
  
  /* Estilos para las etiquetas flotantes */
  .float-label {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    transition: 0.2s ease all;
    color: #999;
  }
  
  .form-control:focus~.float-label,
  .form-control:valid~.float-label {
    top: -20px;
    font-size: 14px;
    color: #a5dc86;
  }
  
  /* Estilos para formularios específicos */
  .form-material .form-primary .form-control:focus~label {
    color: #a5dc86;
  }
  
  .form-material .form-primary .form-control:focus~.form-bar:after,
  .form-material .form-primary .form-control:focus~.form-bar:before {
    background: #a5dc86;
  }
  
  .form-material .form-primary.form-static-label .float-label {
    color: #a5dc86;
  }
  
  .form-material .form-primary.form-static-label .form-control {
    border-bottom-color: #a5dc86;
  }
  
  .form-material .material-group-primary .material-addone i,
  .form-material .material-group-primary .material-addone span {
    color: #a5dc86;
  }
  
  /* Estilo para los mensajes de error */
  #popup, #popup_clave {
    display: none; /* Oculto por defecto, se mostrará con JS cuando haya un error */
    color: #f44336;
    font-size: 12px;
    margin-top: 5px;
  }

  div#error-message {
    font-size: small;
}
  
  .fa-exclamation-triangle {
    margin-right: 5px;
  }
  
  /* Elementos específicos de formularios */
  #recuperar {
    display: none;
  }
  
  #volver {
    display: none;
    font-size: smaller;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  #volver_texto {
    padding-left: 3px;
  }
  
  #submit_solicitar {
    display: none;
  }
  
  #KEY {
    display: none;
  }
  
  #le_enviamos_su_clave, #le_enviamos_su_codigo, .textoRecuperar {
    display: none;
  }

  .alert-recuperar {
    color: #ffffff;
    background-color: #707070;
    border-color: #eaeaea;
}
  
  #olvido_su_clave {
    cursor: pointer;
  }

  #loading_ajax_olvido_confirmar_codigo {
    display: none;
    margin-top: 30px;
    max-height: 20px;
  }
  
  /* Radio buttons para idiomas */
  .rowIdioma {
    text-align: center;
  }
  
  .md_radio {
    display: inline-flex;
    align-items: center;
    margin: 5px 0;
  }
  
  .md_radio .md_radio__button {
    position: relative;
    cursor: pointer;
    margin: 0 3px;
  }
  
  .md_radio [type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  .md_radio .md_radio__button::before,
  .md_radio .md_radio__button::after {
    content: '';
    box-sizing: border-box;
    display: block;
    transition: all 100ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  
  .md_radio .md_radio__button::before {
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    border: 0.15em solid #BDBDBD;
  }
  
  .md_radio .md_radio__button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0.65em;
    width: 0.65em;
    border-radius: 50%;
    transform-origin: 50%, 50%;
    transform: scale(0, 0) translate(-50%, -50%);
    background: #a5dc86;
  }
  
  .md_radio [type=radio]:checked+.md_radio__button::after {
    transform: scale(1, 1) translate(-50%, -50%);
  }
  
  .md_radio [type=radio]:checked+.md_radio__button::before {
    border-color: #a5dc86;
  }
  
  .md_radio [type=radio]:disabled+.md_radio__button {
    cursor: not-allowed;
    filter: grayscale(100%);
    opacity: 0.6;
  }
  
  .md_radio [type=radio]:focus+.md_radio__button {
    outline: #5d9dd5 solid 1px;
    box-shadow: 0 0 8px #a5dc86;
  }
  
  /* ============================================================
     BOTONES
     ============================================================ */
  
  /* Botón AI con efecto líquido */
  .container-ai-button {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .ai-button {
    position: relative;
    padding: 10px 25px;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    background: linear-gradient(45deg, #b0b0b0, #d3d3d3);
    cursor: pointer;
    overflow: hidden;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    text-shadow: 0px 1px 0px #ffffff;
    text-align: center;
  }
  
  .ai-button:hover {
    background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
    background-color: #89c403;
    box-shadow: inset 0px 1px 0px 0px #a4e271;
    border: 1px solid #74b807;
    color: #ffffff;
    text-shadow: 0px 1px 0px #528009;
  }
  
  .ai-button span {
    position: relative;
    z-index: 1;
  }
  
  .ai-button .liquid {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.2);
    transition: 0.5s;
  }
  
  .ai-button .liquid::after,
  .ai-button .liquid::before {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -75%);
  }
  
  .ai-button .liquid::before {
    border-radius: 45%;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 5s linear infinite;
  }
  
  .ai-button .liquid::after {
    border-radius: 40%;
    background: rgba(255, 255, 255, 0.3);
    animation: animate 10s linear infinite;
  }
  
  .ai-button:hover .liquid {
    top: -120px;
  }
  
  .ai-button svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    fill: white;
  }
  
  /* Botón con efecto hover */
  .container_boton_v2 {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #FFF;
    padding: 0px;
    width: 100%;
  }
  
  .button_hover_v2 {
    letter-spacing: 0.1em;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 45px;
    max-width: 160px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    color: #494949;
    border: 1px solid #eaeaea;
    box-shadow: 0px 0px 0px 3px #fff inset;
    background-color: #f9f9f9;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
  }
  
  .button_hover_v2:hover {
    border: 1px solid #666;
    background-color: #a5dc86;
    box-shadow: 0px 0px 0px 3px #90EE90 inset;
    color: #494949;
    text-decoration: none;
  }
  
  .button_hover_v2 span {
    transition: all 0.2s ease-out;
    z-index: 2;
  }
  
  .button_hover_v2:hover span {
    letter-spacing: 0.13em;
    color: #FFF;
  }
  
  .button_hover_v2:after {
    background: #FFF;
    border: 0px solid #000;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .8;
    position: absolute;
    top: -50px;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    width: 50px;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); /*easeOutCirc*/
    z-index: 1;
  }
  
  .button_hover_v2:hover:after {
    background: #FFF;
    border: 20px solid #000;
    opacity: 0;
    left: 120%;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  
  .button_hover_v2:hover span,
  .button_hover_v2:active span {
    color: #a5dc86 !important;
  }
  
  .button_hover_v2:before {
    color: #FFF;
    font-weight: bolder;
    content: attr(data-hover);
    display: none;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 100%;
    text-shadow: 1px 1px 0 #494949;
  }
  
  .button_hover_v2_eng:before {
    content: attr(data-hoverEng) !important;
  }
  
  .button_hover_v2:hover:before,
  .button_hover_v2:active:before {
    display: block;
  }
  
  /* Enlace de olvido de clave */
  .olvido_su_clave:hover {
    color: #a5dc86;
    text-decoration: underline #a5dc86;
  }
  
  /* ============================================================
     COMPONENTE CHECKOUT
     ============================================================ */
  .checkout {
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    background: #f3f3f3;
    border: 1px solid;
    border-color: #c2cadb #bbc5d6 #b7c0cd;
    border-radius: 7px;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  }
  
  .checkout>p {
    zoom: 1;
  }
  
  .checkout>p:before,
  .checkout>p:after {
    content: '';
    display: table;
  }
  
  .checkout>p:after {
    clear: both;
  }
  
  .checkout>p+p {
    margin-top: 15px;
  }
  
  .checkout-header {
    position: relative;
    margin: -15px -15px 15px;
  }
  
  .checkout-title {
    padding: 0 15px;
    line-height: 38px;
    font-size: 13px;
    font-weight: bold;
    color: #7f889e;
    text-shadow: 0 1px rgba(255, 255, 255, 0.7);
    background: #eceff5;
    border-bottom: 1px solid #c5ccdb;
    border-radius: 7px 7px 0 0;
    background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3);
    background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3);
    background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3);
    background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3);
    -webkit-box-shadow: inset 0 1px white;
    box-shadow: inset 0 1px white;
    text-align: left;
  }
  
  .checkout-title:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  
  .checkout-price {
    position: absolute;
    top: -5px;
    right: -10px;
    width: 70px;
    font: 14px/40px Helvetica, Arial, sans-serif;
    color: white;
    text-align: center;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
    text-indent: -1px;
    letter-spacing: -1px;
    border: 1px solid;
    border-color: #49b323 #23ab52 #3f981f;
    border-radius: 21px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: linear-gradient(to bottom, #3bf73e, #0d790f);
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  .checkout-price:before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    border: 2px solid #f5f8fb;
    border-radius: 18px;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25);
  }
  
  .checkout-input {
    float: left;
    padding: 0 7px;
    height: 32px;
    color: #525864;
    background: white;
    border: 1px solid;
    border-color: #b3c0e2 #bcc5e2 #c0ccea;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, #f6f8fa, white);
    background-image: -moz-linear-gradient(top, #f6f8fa, white);
    background-image: -o-linear-gradient(top, #f6f8fa, white);
    background-image: linear-gradient(to bottom, #f6f8fa, white);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
  }
  
  .checkout-input:focus {
    border-color: #46aefe;
    outline: none;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;
  }
  
  .checkout-name {
    width: 100%;
  }
  
  .checkout-card {
    width: 100% !important;
  }
  
  .checkout-exp, .checkout-cvc {
    width: 100%;
    margin: 0 auto;
  }
  
  .checkout-btn {
    width: 100%;
    padding: 10px 25px;
    font-weight: bold;
    color: white;
    text-align: center;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
    border: 1px solid;
    border-color: #1486f9 #0f7de9 #0d6acf;
    -moz-box-shadow: inset 0px 1px 0px 0px #d9fbbe;
    -webkit-box-shadow: inset 0px 1px 0px 0px #d9fbbe;
    box-shadow: inset 0px 1px 0px 0px #d9fbbe;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52));
    background: -moz-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
    background: -webkit-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
    background: -o-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
    background: -ms-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
    background: linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52', GradientType=0);
    background-color: #b8e356;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #83c41a;
    display: inline-block;
    cursor: pointer;
    font-family: Arial;
    font-size: 16px;
  }
  
  .checkout-btn:active {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    border-color: #075bba #0c69d2 #0f7de9;
    background-image: -webkit-linear-gradient(top, #1281dc, #1593fc);
    background-image: -moz-linear-gradient(top, #1281dc, #1593fc);
    background-image: -o-linear-gradient(top, #1281dc, #1593fc);
    background-image: linear-gradient(to bottom, #1281dc, #1593fc);
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
  }
  
  /* Otros elementos de checkout */
  #cajaPagoTarjeta {
    margin: 0 auto;
    max-width: 271px;
  }
  
  #cajaPagoTarjeta p {
    margin-bottom: 6px;
    overflow: auto;
  }
  
  #cajaPagoTarjeta .container .row {
    margin-bottom: 0px;
  }
  
  .logoCCs {
    max-width: 27px;
  }
  
  #CajaLogosTarjetas {
    margin-bottom: 8px;
    text-align: center;
    margin: 0 auto;
  }
  
  #CajaLogosTarjetas #inner {
    display: inline-flex;
    margin: 0 auto;
  }
  
  #inner .col-xs-2 {
    padding: 3px;
  }
  
  .col-xs-2.col-md-2 {
    padding: 0 !important;
    margin: 0 auto;
  }
  
  button[disabled=disabled], button:disabled {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
  }
  
  /* Estado de carga */
  .loading {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -46px;
    width: 80px;
    padding: 10px;
    background: linear-gradient(to bottom, #EEE, #CCC);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid #888;
    border-radius: 5px;
    text-align: center;
    opacity: 0.8;
    z-index: 1000;
  }
  
  .loading div {
    position: relative;
    top: 2px;
    text-transform: uppercase;
    font: 10px/1.21 'Helvetica Neue', helvetica, arial, sans-serif;
    letter-spacing: 0.04em;
    color: #888;
  }
  
  .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-left-color: rgba(0, 0, 0, 0.6);
    border-bottom-color: rgba(0, 0, 0, 0.4);
    border-right-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    -webkit-animation: rotate 600ms linear infinite;
  }
  
  /* Footer de la ventana de renovación */
  span.PLAN_PERIODO_FLECHA, span.PLAN_CONTRIBUYENTE_FLECHA {
    cursor: pointer;
}
  .footer_ventana_renovacion {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: x-small;
    color: #999;
  }
  
  .footer_ventana_renovacion p,
  .footer_ventana_renovacion a {
    font-size: x-small;
    margin-bottom: 0px;
    color: #999;
  }
  
  .footer_ventana_renovacion .conexion_segura,
  .footer_ventana_renovacion:hover .whatsapp_ayuda {
    display: block;
  }
  
  .footer_ventana_renovacion .whatsapp_ayuda,
  .footer_ventana_renovacion:hover .conexion_segura {
    display: none;
  }
  
  .img_tab_ventana_renovacion {
    padding-bottom: 3px;
  }
  
  /* UI específicos */
  .ui-state-active,
  .ui-widget-content .ui-state-active,
  .ui-widget-header .ui-state-active,
  a.ui-button:active,
  .ui-button:active,
  .ui-button.ui-state-active:hover {
    border: 1px solid #48e14b;
    background: #0e7e10;
    font-weight: normal;
    color: #ffffff;
  }
  
  .swal2-popup {
    padding: 0 0.5em;
  }
  
  .swal2-container {
    z-index: 9999;
  }
  
  .swal2-container.swal2-shown {
    background-color: rgba(255, 255, 255, 1);
  }
  
  .ui-widget-content {
    background: #ffffff !important;
  }
  
  .swal2-popup .swal2-title {
    font-size: 1.1em;
  }
  
  .ui-tabs .ui-tabs-panel {
    padding: 0.4em 0.4em;
  }
  
  .ui-tabs-tab {
    min-height: 30.9px !important;
  }
  
  /* ============================================================
     ELEMENTOS DECORATIVOS Y EFECTOS
     ============================================================ */
  
  /* Línea divisora con texto */
  .divider_medio {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }
  
  .divider_medio>label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }
  
  .divider_medio>hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #ccc;
  }
  
  .divider_medio.fixed {
    width: 100%;
  }
  
  .divider_medio.center>:first-child {
    margin-right: 5px;
  }
  
  .divider_medio.center>:last-child {
    margin-left: 5px;
  }
  
  /* Efectos de fondo flotantes */
  .light {
    position: absolute;
    width: 0px;
    opacity: .75;
    background-color: white;
    box-shadow: #ffffff 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
  }
  
  .x1 {
    -webkit-animation: floatUp 4s infinite linear;
    -moz-animation: floatUp 4s infinite linear;
    -o-animation: floatUp 4s infinite linear;
    animation: floatUp 4s infinite linear;
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
  }
  
  .x2 {
    -webkit-animation: floatUp 7s infinite linear;
    -moz-animation: floatUp 7s infinite linear;
    -o-animation: floatUp 7s infinite linear;
    animation: floatUp 7s infinite linear;
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    left: 15%;
  }
  
  .x3 {
    -webkit-animation: floatUp 2.5s infinite linear;
    -moz-animation: floatUp 2.5s infinite linear;
    -o-animation: floatUp 2.5s infinite linear;
    animation: floatUp 2.5s infinite linear;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5);
    left: -15%;
  }
  
  .x4 {
    -webkit-animation: floatUp 4.5s infinite linear;
    -moz-animation: floatUp 4.5s infinite linear;
    -o-animation: floatUp 4.5s infinite linear;
    animation: floatUp 4.5s infinite linear;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    left: -34%;
  }
  
  .x5 {
    -webkit-animation: floatUp 8s infinite linear;
    -moz-animation: floatUp 8s infinite linear;
    -o-animation: floatUp 8s infinite linear;
    animation: floatUp 8s infinite linear;
    -webkit-transform: scale(2.2);
    -moz-transform: scale(2.2);
    -o-transform: scale(2.2);
    transform: scale(2.2);
    left: -57%;
  }
  
  .x6 {
    -webkit-animation: floatUp 3s infinite linear;
    -moz-animation: floatUp 3s infinite linear;
    -o-animation: floatUp 3s infinite linear;
    animation: floatUp 3s infinite linear;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    left: -81%;
  }
  
  .x7 {
    -webkit-animation: floatUp 5.3s infinite linear;
    -moz-animation: floatUp 5.3s infinite linear;
    -o-animation: floatUp 5.3s infinite linear;
    animation: floatUp 5.3s infinite linear;
    -webkit-transform: scale(3.2);
    -moz-transform: scale(3.2);
    -o-transform: scale(3.2);
    transform: scale(3.2);
    left: 37%;
  }
  
  .x8 {
    -webkit-animation: floatUp 4.7s infinite linear;
    -moz-animation: floatUp 4.7s infinite linear;
    -o-animation: floatUp 4.7s infinite linear;
    animation: floatUp 4.7s infinite linear;
    -webkit-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
    left: 62%;
  }
  
  .x9 {
    -webkit-animation: floatUp 4.1s infinite linear;
    -moz-animation: floatUp 4.1s infinite linear;
    -o-animation: floatUp 4.1s infinite linear;
    animation: floatUp 4.1s infinite linear;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    left: 85%;
  }
  
  /* Logo de Inteligencia Viva */
  .by_inteligenciaviva_developer_logo {
    position: relative;
    padding: 0;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: inherit;
  }
  
  .by_inteligenciaviva_developer_logo:hover {
    color: inherit;
    text-decoration: none;
  }
  
  .by_inteligenciaviva_developer_logo img {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
    transition: opacity 0.3s ease;
  }
  
  .by_inteligenciaviva_developer_logo .hover-image {
    display: none;
  }
  
  .by_inteligenciaviva_developer_logo:hover .default-image {
    display: none;
  }
  
  .by_inteligenciaviva_developer_logo:hover .hover-image {
    display: inline-block;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
  }
  
  .by_inteligenciaviva_developer_text {
    font-size: 10px;
    color: #707070;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .by_inteligenciaviva_developer_text img {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    filter: invert(44%) sepia(10%) saturate(14%) hue-rotate(314deg) brightness(94%) contrast(89%);
  }
  
  .by_inteligenciaviva_developer_logo:hover .by_inteligenciaviva_developer_text img {
    filter: invert(44%) sepia(10%) saturate(14%) hue-rotate(314deg) brightness(94%) contrast(89%);
  }
  
  /* Loader/preloader */
  .theme-loader {
    height: 100%;
    width: 100%;
    background: #fff;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    background: linear-gradient(-45deg, #FAFAFA, #9E9E9E, #FFFFFF, #EEEEEE);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
  }
  
  .theme-loader .loader-track {
    left: 50%;
    top: 50%;
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
  }
  
  .spinner_loading {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #FFF 95%, #0000) 50% 2px/21px 21px no-repeat,
        radial-gradient(farthest-side, #0000 calc(100% - 15px), #e2e2e2 0);
    animation: spin-aur408 1.5s infinite linear;
  }
  
  .loadingLogoFT {
    content: url("/images/facturatica-logo-blanco.png");
    transform: scale(0.7);
    position: absolute;
  }
  
  /* Animación para los features de escritorio */
  .features-list-desktop .feature-item-desktop:nth-child(1) {
    animation: highlightDesktop 15s infinite 0s;
  }
  
  .features-list-desktop .feature-item-desktop:nth-child(2) {
    animation: highlightDesktop 15s infinite 3s;
  }
  
  .features-list-desktop .feature-item-desktop:nth-child(3) {
    animation: highlightDesktop 15s infinite 6s;
  }
  
  .features-list-desktop .feature-item-desktop:nth-child(4) {
    animation: highlightDesktop 15s infinite 9s;
  }
  
  .features-list-desktop .feature-item-desktop:nth-child(5) {
    animation: highlightDesktop 15s infinite 12s;
  }
  
  /* Ventana de mantenimiento */
  #ModalMaintenance .modal-title {
    color: darkblue;
    font-size: 1em;
  }
  
  #ModalMaintenance .modal-body {
    color: #494949;
    font-weight: 500;
  }
  
  #ModalMaintenance .modal-body>strong {
    font-weight: bolder;
  }
  
  #ModalMaintenance .modal-footer>p {
    font-weight: 500;
    font-size: 0.7em;
  }
  
  #ModalMaintenance .modal-header .close {
    display: none;
  }
  
  /* Otros elementos específicos */
  .no_tarjeta {
    display: none;
  }
  
  .navbar-wrapper {
    background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%) !important;
    min-height: 37px;
  }
  
  .navbar.header-navbar.pcoded-header {
    border-top: none;
  }
  
  .header-navbar {
    min-height: 37px;
    padding: 0;
  }
  
  .logoClass {
    position: absolute;
    text-align: center;
    width: 100%;
  }
  
  /* ============================================================
     ANIMACIONES
     ============================================================ */
  
  @-webkit-keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }
  
  @keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }
  
  @keyframes animate {
    0% {
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -75%) rotate(360deg);
    }
  }
  
  @-webkit-keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        top: 0vh;
        opacity: .8;
    }
    75% {
        opacity: 1;
    }
    100% {
        top: -100vh;
        opacity: 0;
    }
  }
  
  @-moz-keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        top: 0vh;
        opacity: .8;
    }
    75% {
        opacity: 1;
    }
    100% {
        top: -100vh;
        opacity: 0;
    }
  }
  
  @-o-keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        top: 0vh;
        opacity: .8;
    }
    75% {
        opacity: 1;
    }
    100% {
        top: -100vh;
        opacity: 0;
    }
  }
  
  @keyframes floatUp {
    0% {
        top: 100vh;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        top: 0vh;
        opacity: .8;
    }
    75% {
        opacity: 1;
    }
    100% {
        top: -100vh;
        opacity: 0;
    }
  }
  
  @-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  @-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  @-o-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  @keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
  }
  
  @keyframes spin-aur408 {
    to {
        transform: rotate(1turn);
    }
  }
  
  @keyframes highlightDesktop {
    0%, 15%, 100% {
        background: transparent;
        color: #666;
        transform: translateX(0);
    }
    3%, 12% {
        background: #707070;
        color: #FFFFFF;
        transform: translateX(8px);
        font-weight: bold;
    }
  }
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  
  @media only screen and (max-width: 780px) {
    #LogoSmall {
        display: none;
    }
    .rwd-break {
        display: inline;
    }
  }
  
  @media only screen and (max-width: 640px) {
    .login-container {
        flex-direction: column;
        margin: 0rem;
        max-width: none;
    }
    
    /* Se oculta el panel de escritorio */
    .features-panel-desktop {
        display: none;
    }
    
    /* Se muestra el "header" de tabs/pasos */
    .mobile-step-header {
        display: block;
    }
    
    .login-panel {
        padding: 0.5rem;
        width: 100%;
        min-width: auto;
    }
    
    .logo {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
  }
  
  @media only screen and (max-width: 375px) {
    .brdesktop-break {
        display: none;
    }
  }

  @media only screen and (max-width: 640px) {
    body {
      align-items: flex-start;
      padding-top: 2rem;
      height: auto;
      min-height: 100vh;
    }
    
    .login-container {
      margin-top: 0;
      margin-bottom: auto;
    }
  }