/* ==========================================
   PORTAL TRIBUTARIO - PÁGINA INICIO
   Archivo: home.css

   Contiene únicamente los estilos
   exclusivos de la página principal:

   - Bienvenida
   - Tarjetas de servicios
   - Modal de Industria y Comercio
   - Responsive del Home

========================================== */

/* ==========================================
   TARJETAS DE SERVICIOS

   Corresponde a:

   - Impuesto Predial
   - Paz y Salvo Predial
   - Validación de Paz y Salvo
   - Industria y Comercio

========================================== */

.services-grid{
   display:grid;
   grid-template-columns:repeat(2, minmax(320px, 1fr));
   gap:32px;
   margin-top:35px;
   max-width:900px;
   margin-left:auto;
   margin-right:auto;
}

@media (max-width:768px){

   .services-grid{
      grid-template-columns:1fr;
   }

}
.service-card{
   background:#ffffff;
   border-radius:22px;
   padding:32px 28px;
   text-decoration:none;
   border:1px solid #dbe4ee;
   transition:all .25s ease;
   box-shadow:0 8px 22px rgba(15,23,42,.05);
   display:flex;
   flex-direction:column;
   align-items:center;
   text-align:center;
}

.service-card:hover{
   transform:translateY(-6px);
   box-shadow:0 16px 35px rgba(15,23,42,.12);
   border-color:#0d5ea8;
}

.service-icon{
   width:82px;
   height:82px;
   border-radius:50%;
   background:linear-gradient(135deg,#0d5ea8,#0b4d88);
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:38px;
   margin-bottom:22px;
   color:#ffffff;
}

.service-title{
   font-size:22px;
   font-weight:700;
   color:#0f172a;
   margin-bottom:14px;
}

.service-description{
   color:#475569;
   line-height:1.6;
   font-size:15px;
}

/* ==========================================
   ENCABEZADO Y MENSAJE DE BIENVENIDA

   Corresponde a:

   - Texto descriptivo del portal
   - Caja de bienvenida principal

========================================== */

.portal-info{
   margin-top:18px;
   color:#dbeafe;
   line-height:1.7;
   max-width:850px;
}

.welcome-box{
   background:#ffffff;
   border-radius:22px;
   padding:35px;
   margin-top:35px;
   box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.welcome-box h2{
   margin-top:0;
   color:#0f172a;
   margin-bottom:15px;
}

.welcome-box p{
   color:#475569;
   line-height:1.8;
}


/* ==========================================
   MODAL DE PAGO INDUSTRIA Y COMERCIO

   Ventana emergente utilizada para:

   - Ingreso valor a pagar
   - Adjuntar declaración
   - Confirmación de envío
   - Integración con WOMPI

========================================== */

.modal-overlay{
   position:fixed;
   inset:0;
   background:rgba(15,23,42,.65);
   backdrop-filter:blur(4px);
   display:none;
   align-items:center;
   justify-content:center;
   z-index:9999;
   padding:20px;

   overflow-y:auto;
   -webkit-overflow-scrolling:touch;
}

.modal-box{
   background:#ffffff;

   width:100%;
   max-width:980px;

   border-radius:30px;

   padding:0;

   overflow:hidden;

   box-shadow:0 25px 60px rgba(0,0,0,.25);

   animation:modalShow .25s ease;
}

.step-title{

   display:inline-flex;

   align-items:center;

   gap:8px;

   background:#eef4ff;

   border:1px solid #cfe0ff;

   color:#0d5ea8;

   font-size:15px;

   font-weight:700;

   padding:8px 14px;

   border-radius:999px;

   margin-bottom:10px;
}

.step-subtitle{

   color:#475569;

   font-size:15px;

   line-height:1.6;

   margin-bottom:18px;
}

/* ==========================================
   ANIMACIONES DEL MODAL

========================================== */

@keyframes modalShow{
   from{
      transform:translateY(15px);
      opacity:0;
   }
   to{
      transform:translateY(0);
      opacity:1;
   }
}

.modal-icon{
   width:85px;
   height:85px;
   border-radius:50%;
   background:linear-gradient(135deg,#0d5ea8,#0b4d88);
   display:flex;
   align-items:center;
   justify-content:center;
   margin:0 auto 20px;
   font-size:42px;
   color:#fff;
}

.modal-title{
   text-align:center;
   font-size:28px;
   font-weight:700;
   color:#0f172a;
   margin-bottom:10px;
}

.modal-text{
   text-align:center;
   color:#475569;
   line-height:1.7;
   margin-bottom:25px;
}

.modal-input{
   width:100%;
   height:58px;
   border:1px solid #dbe4ee;
   border-radius:16px;
   padding:0 18px;
   font-size:22px;
   font-weight:600;
   outline:none;
   transition:.2s;
   box-sizing:border-box;
}

.modal-input:focus{
   border-color:#0d5ea8;
   box-shadow:0 0 0 4px rgba(13,94,168,.12);
}

.modal-buttons{
   display:flex;
   gap:14px;
   margin-top:24px;
}

.modal-btn{
   flex:1;
   height:54px;
   border:none;
   border-radius:16px;
   font-size:16px;
   font-weight:600;
   cursor:pointer;
   transition:.2s;
}

.modal-cancel{
   background:#eef2f7;
   color:#475569;
}

.modal-cancel:hover{
   background:#dbe4ee;
}

.modal-pay{
   background:linear-gradient(135deg,#0d5ea8,#0b4d88);
   color:#fff;
}

.modal-pay:hover{
   transform:translateY(-2px);
   box-shadow:0 10px 20px rgba(13,94,168,.25);
}

.form-btn{
   width:100%;
   height:54px;
   border:none;
   border-radius:16px;
   background:#eef4ff;
   color:#0d5ea8;
   font-size:16px;
   font-weight:600;
   cursor:pointer;
   margin-top:18px;
   transition:.2s;
   border:1px solid #cfe0ff;
}

.form-btn:hover{
   background:#dcecff;
}

.check-container{
   display:flex;
   align-items:flex-start;
   gap:12px;
   margin-top:22px;
   color:#475569;
   font-size:15px;
   line-height:1.5;
}

.check-container input{
   margin-top:3px;
   transform:scale(1.15);
}

.upload-note{
   margin-top:16px;
   background:#fff7ed;
   border:1px solid #fed7aa;
   color:#9a3412;
   padding:14px;
   border-radius:14px;
   font-size:14px;
   line-height:1.6;
}

.modal-pay:disabled{
   opacity:.45;
   cursor:not-allowed;
   transform:none !important;
   box-shadow:none !important;
}

/* ==========================================
   DISTRIBUCIÓN ESCRITORIO

   Panel izquierdo:
      Información

   Panel derecho:
      Formulario de pago

========================================== */

.modal-layout{
   display:flex;
   min-height:620px;
}

.modal-left{
   width:45%;

   background:linear-gradient(135deg,#0d5ea8,#0b4d88);

   padding:50px 40px;

   color:#ffffff;

   display:flex;
   flex-direction:column;
   justify-content:center;
}

.modal-left .modal-icon{
   margin:0 0 25px;
   background:rgba(255,255,255,.12);
   backdrop-filter:blur(10px);
}

.modal-left .modal-title{
   text-align:left;
   color:#ffffff;
   font-size:42px;
   line-height:1.15;
   margin-bottom:22px;
}

.modal-left .modal-text{
   text-align:left;
   color:#dbeafe;
   font-size:18px;
   line-height:1.9;
}

.modal-right{
   width:55%;

   padding:45px 40px;

   display:flex;
   flex-direction:column;
   justify-content:center;
}

/* ==========================================
   SCROLL Y COMPORTAMIENTO DEL MODAL

========================================== */

.modal-overlay{
   overflow-y:auto;
}

.modal-box{

   max-height:92vh;

   overflow-y:auto;

   -webkit-overflow-scrolling:touch;
}

.modal-box::-webkit-scrollbar{

   width:6px;
}

.modal-box::-webkit-scrollbar-thumb{

   background:#cbd5e1;

   border-radius:20px;
}

/* ==========================================
   RESPONSIVE MÓVIL

   Adaptación para:
   - Celulares
   - Tablets

========================================== */

@media(max-width:768px){

   .modal-layout{
      flex-direction:column;
      min-height:auto;
   }

   .modal-left,
   .modal-right{
      width:100%;
   }

   .modal-overlay{

   align-items:flex-start;

   padding:18px;
}

   /* PANEL AZUL */

   .modal-left{

      padding:28px 24px 34px;

      border-radius:24px 24px 0 0;

      min-height:auto;
   }

   .modal-left .modal-icon{

      width:72px;
      height:72px;

      font-size:34px;

      margin:0 auto 18px;
   }

   .modal-left .modal-title{

      text-align:center;

      font-size:26px;

      line-height:1.2;

      margin-bottom:18px;
   }

   .modal-left .modal-text{

      text-align:center;

      font-size:15px;

      line-height:1.9;

      margin-bottom:0;
   }

   /* PANEL BLANCO */

   .modal-right{

      padding:26px 24px 30px;
   }

   /* INPUT */

   .modal-input{

      height:64px;

      font-size:20px;

      border-radius:20px;
   }

   /* BOTÓN FORM */

   .form-btn{

      height:68px;

      border-radius:22px;

      font-size:19px;

      font-weight:700;
   }

   /* BOTONES ABAJO */

   .modal-buttons{

      flex-direction:column;

      gap:16px;
   }

   .modal-btn{

      width:100%;

      height:64px;

      font-size:20px;

      border-radius:20px;
   }

   /* CHECK */

   .check-container{

      font-size:16px;

      line-height:1.7;
   }

   .check-container input{

      transform:scale(1.5);

      margin-top:6px;
   }

}

   /* MODEL INLINE */

.modal-help-text{
   margin-top:12px;
   font-size:14px;
   color:#64748b;
   text-align:center;
   line-height:1.5;
}

.service-card-click{
   cursor:pointer;
}