﻿/* ============================================
   VARIABLES CSS - PALETA DE COLORES
   ============================================ */
:root {
    /* Colores primarios */
    --primary-50: #086378;
    --primary-50-liquid: #064350E5;
    --primary-100: #064350;
    --primary-2: #E4EDEF;
    --primary-dim: #042C34;
    /* Colores secundarios */
    --jade-50: #00AE8B;
    --green-10: #BAD431;
    /* Colores de acento */
    --orange-100: #F49020;
    --orange-40: #FFCD34;
    /* Escala de grises */
    --gray-00: #FCFCFC;
    --gray-05: #F7F7F7;
    --gray-20: #E7EBED;
    --gray-35: #D6D6D6;
    --gray-55: #ACB0B2;
    --gray-83: #2A2C2E;
    --gray-85: #1B1D1F;
    --gray-70: #5D5D5D;
    /* Colores con transparencia */
    --gray-00-trans: rgba(252, 252, 252, 0.03);
    --gray-25-trans: rgba(226, 226, 226, 0.2);
    --gray-55-trans: rgba(226, 226, 226, 0.2);
    --focus-input-default: #C2DBFE;
    --info-85: #5590C6;
    --info-10: #F3F8FB;
    --green-10: #BAD431;
}

/* ============================================
   FUENTES - OPEN SANS
   ============================================ */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* ============================================
   ESTILOS BASE
   ============================================ */
body {
    font-family: 'Open Sans', 'Roboto', Arial, sans-serif !important;
}

.ins-ff-base {
    font-family: 'Open Sans', 'Roboto', Arial, sans-serif !important;
}

/* ============================================
   UTILIDADES DE TIPOGRAFÍA
   ============================================ */

/* Tamaños de fuente */
.ins-fs-10 {
    font-size: 10px !important;
}

.ins-fs-11 {
    font-size: 11px !important;
}

.ins-fs-12 {
    font-size: 12px !important;
}

.ins-fs-13 {
    font-size: 13px !important;
}

.ins-fs-14 {
    font-size: 14px !important;
}

.ins-fs-15 {
    font-size: 15px !important;
}

.ins-fs-16 {
    font-size: 16px !important;
}

.ins-fs-17 {
    font-size: 17px !important;
}

.ins-fs-18 {
    font-size: 18px !important;
}

.ins-fs-19 {
    font-size: 19px !important;
}

.ins-fs-20 {
    font-size: 20px !important;
}

.ins-fs-21 {
    font-size: 21px !important;
}

.ins-fs-26 {
    font-size: 26px !important;
}

.ins-fs-28 {
    font-size: 28px !important;
}

.ins-fs-32 {
    font-size: 32px !important;
}

.ins-fs-38 {
    font-size: 38px !important;
}

.ins-fs-53 {
    font-size: 53px !important;
}

/* Altura de línea */
.ins-lh-115 {
    line-height: 115% !important;
}

.ins-lh-125 {
    line-height: 125% !important;
}

.ins-lh-133 {
    line-height: 133% !important;
}

/* Peso de fuente */
.ins-fw-400 {
    font-weight: 400 !important;
}

.ins-fw-600 {
    font-weight: 600 !important;
}

.ins-fw-700 {
    font-weight: 700 !important;
}

/* Estilo de fuente */
.ins-fs-normal {
    font-style: normal !important;
}

.ins-fs-italic {
    font-style: italic !important;
}

/* Espaciado de letras */
.ins-ls-0 {
    letter-spacing: 0 !important;
}

.ins-ls-012 {
    letter-spacing: 0.12px !important;
}

/* ============================================
   UTILIDADES DE COLOR DE TEXTO
   ============================================ */

/* Colores primarios */
.ins-fc-primary-50 {
    color: var(--primary-50) !important;
}

.ins-fc-primary-50-liquid {
    color: var(--primary-50-liquid) !important;
}

.ins-fc-primary-100 {
    color: var(--primary-100) !important;
}

.ins-fc-primary-2 {
    color: var(--primary-2) !important;
}

/* Colores secundarios */
.ins-fc-jade-50 {
    color: var(--jade-50) !important;
}

.ins-fc-green-10 {
    color: var(--green-10) !important;
}

/* Colores de acento */
.ins-fc-orange-100 {
    color: var(--orange-100) !important;
}

.ins-fc-orange-40 {
    color: var(--orange-40) !important;
}

/* Escala de grises */
.ins-fc-gray-00 {
    color: var(--gray-00) !important;
}
.ins-fc-gray-05 {
    color: var(--gray-05) !important;
}
.ins-fc-gray-20 {
    color: var(--gray-20) !important;
}


.ins-fc-gray-70 {
    color: var(--gray-70) !important;
}

.ins-fc-gray-83 {
    color: var(--gray-83) !important;
}

.ins-fc-gray-85 {
    color: var(--gray-85) !important;
}

/* Colores con transparencia */
.ins-fc-gray-00-trans {
    color: var(--gray-00-trans) !important;
}

.ins-fc-gray-25-trans {
    color: var(--gray-25-trans) !important;
}

.ins-fc-info-85 {
    color: var(--info-85)!important;
}
/* ============================================
   UTILIDADES DE COLOR DE FONDO
   ============================================ */
/* Colores primarios */
.ins-bg-primary-50 {
    background-color: var(--primary-50) !important;
}

.ins-bg-primary-50-liquid {
    background-color: var(--primary-50-liquid) !important;
}

.ins-bg-primary-100 {
    background-color: var(--primary-100) !important;
}

.ins-bg-primary-2 {
    background-color: var(--primary-2) !important;
}

.ins-bg-primary-dim {
    background-color: var(--primary-dim) !important;
}

/* Colores secundarios */
.ins-bg-jade-50 {
    background-color: var(--jade-50) !important;
}

.ins-bg-green-10 {
    background-color: var(--green-10) !important;
}

/* Colores de acento */
.ins-bg-orange-100 {
    background-color: var(--orange-100) !important;
}

.ins-bg-orange-40 {
    background-color: var(--orange-40) !important;
}

/* Escala de grises */
.ins-bg-gray-00 {
    background-color: var(--gray-00) !important;
}
.ins-bg-gray-05 {
    background-color: var(--gray-05) !important;
}

.ins-bg-gray-20 {
    background-color: var(--gray-20) !important;
}
.ins-bg-gray-35{
    background-color: var(--gray-35) !important;
}

.ins-bg-gray-85 {
    background-color: var(--gray-85) !important;
}

.ins-bg-gray-83 {
    background-color: var(--gray-83) !important;
}
/* Colores con transparencia */
.ins-bg-gray-00-trans {
    background-color: var(--gray-00-trans) !important;
}

.ins-bg-gray-25-trans {
    background-color: var(--gray-25-trans) !important;
}


.ins-bg-info-85 {
    background-color: var(--info-85) !important;
}

/* ============================================
   SISTEMA DE BOTONES - ESTILOS BASE
   ============================================ */
.ins-btn {
    /* Dimensiones */
    min-width: 135px;
    height: 44px;
    padding: 10px 16px;
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Tipografía */
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    /* Apariencia */
    border-radius: 999px;
    cursor: pointer;
    /* Transiciones */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   BOTONES PARA FONDO CLARO
   ============================================ */

/* Botón Primario */
.ins-btn-primary {
    background-color: var(--primary-50) !important;
    border: 2px solid var(--primary-50) !important;
    color: var(--gray-00) !important;
}

.ins-btn-primary:hover {
    background-color: var(--green-10) !important;
    border: 2px solid var(--primary-100) !important;
    color: var(--primary-100) !important;
}

.ins-btn-primary:active {
    background-color: var(--primary-100) !important;
    border: 2px solid var(--primary-100) !important;
    color: var(--green-10) !important;
}

.ins-btn-primary:disabled,
.ins-btn-primary.ins-disabled {
    background-color: var(--gray-20) !important;
    border: 2px solid var(--gray-20) !important;
    color: var(--gray-55) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* Botón Secundario */
.ins-btn-secondary {
    background-color: var(--gray-00) !important;
    border: 2px solid var(--primary-50) !important;
    color: var(--primary-50) !important;
}

.ins-btn-secondary:hover {
    background-color: var(--primary-2) !important;
    border: 2px solid var(--primary-50) !important;
    color: var(--primary-50) !important;
}

.ins-btn-secondary:active {
    background-color: var(--primary-2) !important;
    border: 2px solid var(--primary-2) !important;
    color: var(--primary-50) !important;
}

.ins-btn-secondary:disabled,
.ins-btn-secondary.ins-disabled {
    background-color: var(--gray-00) !important;
    border: 2px solid #E2E2E2 !important;
    color: var(--gray-55) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* Botón Terciario */
.ins-btn-tertiary {
    background-color: var(--primary-2) !important;
    border: 2px solid var(--primary-2) !important;
    color: var(--primary-50) !important;
}

.ins-btn-tertiary:hover {
    background-color: var(--primary-2) !important;
    border: 2px solid var(--primary-50) !important;
    color: var(--primary-50) !important;
}

.ins-btn-tertiary:active {
    background-color: var(--primary-2) !important;
    border: 2px solid var(--primary-2) !important;
    color: var(--primary-50) !important;
}

.ins-btn-tertiary:disabled,
.ins-btn-tertiary.ins-disabled {
    background-color: var(--gray-20) !important;
    border: 2px solid #E7EBED !important;
    color: var(--gray-55) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* ============================================
   BOTONES PARA FONDO OSCURO
   ============================================ */

/* Botón Primario Oscuro */
.ins-btn-primary-dark {
    background-color: var(--green-10) !important;
    border: 2px solid var(--primary-100) !important;
    color: var(--primary-100) !important;
}

.ins-btn-primary-dark:hover {
    background-color: var(--gray-00) !important;
    border: 2px solid var(--primary-50) !important;
    color: var(--primary-50) !important;
}

.ins-btn-primary-dark:active {
    background-color: var(--primary-2) !important;
    border: 2px solid var(--primary-2) !important;
    color: var(--primary-50) !important;
}

.ins-btn-primary-dark:disabled,
.ins-btn-primary-dark.ins-disabled {
    background-color: var(--gray-35) !important;
    border: 2px solid var(--gray-55) !important;
    color: var(--gray-55) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* Botón Secundario Oscuro */
.ins-btn-secondary-dark {
    background-color: var(--gray-25-trans) !important;
    border: 2px solid var(--gray-25-trans) !important;
    color: var(--gray-00) !important;
}

.ins-btn-secondary-dark:hover {
    background-color: var(--gray-25-trans) !important;
    border: 2px solid var(--gray-55-trans) !important;
    color: var(--gray-00) !important;
}

.ins-btn-secondary-dark:active {
    background-color: var(--gray-00-trans) !important;
    border: 2px solid transparent !important;
    color: var(--gray-00) !important;
}

.ins-btn-secondary-dark:disabled,
.ins-btn-secondary-dark.ins-disabled {
    background-color: var(--gray-00-trans) !important;
    border: 2px solid var(--gray-25-trans) !important;
    color: rgba(252, 252, 252, 0.2) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* Botón Terciario Oscuro */
.ins-btn-tertiary-dark {
    background-color: var(--gray-00-trans) !important;
    border: 2px solid transparent !important;
    color: var(--gray-20) !important;
}

.ins-btn-tertiary-dark:hover {
    background-color: var(--gray-00-trans) !important;
    border: 2px solid var(--gray-55-trans) !important;
    color: var(--gray-20) !important;
}

.ins-btn-tertiary-dark:active {
    background-color: var(--gray-00-trans) !important;
    border: 2px solid transparent !important;
    color: var(--gray-20) !important;
}

.ins-btn-tertiary-dark:disabled,
.ins-btn-tertiary-dark.ins-disabled {
    background-color: var(--gray-00-trans) !important;
    border: 2px solid transparent !important;
    color: var(--gray-25-trans) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}



.ins-input {
    width: 300px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 10px 16px;
    opacity: 1;
    outline: none; /* Elimina el borde negro del navegador */
    transition: border-width 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box; /* Consistent sizing across browsers (prevents layout shift on focus) */
    font: inherit; /* Keep typography consistent */
    background-color: #fff; /* Ensure white background on Safari */
}

/* Normalize select appearance across browsers (Safari, iOS, Firefox, Edge) */
select.ins-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 48px; /* Match .ins-input */
    line-height: 1.2;
    padding-right: 40px; /* Space for the chevron */
    cursor: pointer;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A6378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}

/* Hide legacy IE arrow */
select.ins-input::-ms-expand {
    display: none;
}

/* Disabled state consistency */
select.ins-input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Foco cuando es visible (teclado) */
.ins-input:focus-visible {
    border-width: 4px;
    border-color: var(--focus-input-default); /* Ajustalo si tenés un color institucional */
    outline: none; /* Asegura que no aparezca borde negro */
}

/* Si usás solo :focus también funciona para mouse y teclado */
.ins-input:focus {
    border-width: 4px;
    border-color: var(--focus-input-default);
    outline: none;
}

.ins-input-group {
    display: flex;
    flex-direction: column;
    max-width:300px;

}



.ins-card-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
}

.ins-card-info-content {
    border: 2px solid var(--gray-35);
    border-radius: 12px;
    padding: 32px;
}

.ins-card-info-content-icon {
    display: flex;
    gap: 35px;
    border: 2px solid var(--gray-35);
    border-radius: 12px;
    padding: 32px;
    align-items: center;
}



@media (max-width: 768px) {

    .ins-input-group {
        display: flex;
        width: 100%;
        max-width: none;
        flex-direction: column;
        align-content: center;
        flex-wrap: wrap;
        align-items: center;
    }
}

