html, body {
    font-size: 16px;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ocupa el espacio que sobra entre el header y el footer */
main {
    flex: 1;
}

/* ajuste tamaño texto por resolucion de pantalla */

@media (max-width: 1440px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    html {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    html {
        font-size: 10px;
    }
}

:root {

    /* colores */
    --color-font-default: #323232;      /* Negro */
    --color-white-bold: #FFFFFF;        /* Blanco */
    --color-font-difused: #A8A8A8;      /* Gris */
    --color-light-grey:#DDDDDD;         /* Gris claro */
    --color-blue-title:#01325F;         /* Azul */
    --color-ok: #dff0d8;                /* fondo Verde claro */
    --color-warning: #faebcc;           /* fondo Amarillo claro */
    --color-error: #f2dede;             /* fondo Rojo claro */
    --color-font-ok: #3c763d;           /* font verde */
    --color-font-warning: #8a6d3b;      /* font amarillo */
    --color-font-error: #a94442;        /* font rojo */
    --color-strong-error: #ff4d4f;      /* rojo fuerte */
    --color-strong-warning: #ffc107;    /* amarillo fuerte */
    --color-strong-ok: #28a745;         /* verde fuerte */
    --color-black-op: #232323;          /* negro opaco */
    --color-grey:#555555;               /* gris */
    --color-orange: #FF5A30;            /* Naranja */
    --color-orange-hover:#E04A26;       /* Naranja mas oscuro */
    --color-lightblue:#2196f3;          /* Celeste default PF */
    --color-cian:#00b2ef;               /* Celeste cian */
    --color-cian-hover:#009fd6;         /* Celeste cian mas oscuro */
    --color-pink:rgba(221,61,145,1);    /* Rosa */

    --color-blue-title-hover: #011A3F; /* Azul más oscuro */

    --color-blue-linear-gradient: linear-gradient(0deg, #0f7cf0, #080da1); /* gradiente azul y celeste */

    --color-orange-linear-gradient: linear-gradient(180deg, rgb(254, 145, 80), rgb(254, 100, 70));

    --color-orange-linear-gradient-hover: linear-gradient(180deg, rgb(230, 120, 60), rgb(210, 80, 50));

    --color-lightblue-pink-gradient:linear-gradient(45deg, rgba(221,61,145,1) 0%, rgba(9,172,230,1) 100%);

    /* medidas */
    --header-max-height: 255px;

    .background-white-bold {
        background-color: var(--color-white-bold);
    }

    .background-light-grey{
        background-color: var(--color-light-grey);
    }

    .background-orange{
        background-color: var(--color-orange);
    }

    .background-blue-title{
        background-color: var(--color-blue-title);
    }

    .background-black-op {
        background-color: var(--color-black-op);
    }

    .background-ok {
        background-color: var(--color-ok);
    }

    .background-warning {
        background-color: var(--color-warning);
    }

    .background-error {
        background-color: var(--color-error);
    }

    .color-blue-title {
        color: var(--color-blue-title);
    }

    .color-white-bold {
        color: var(--color-white-bold) !important;
    }

    .color-light-grey{
        color: var(--color-light-grey);
    }

    .color-orange{
        color: var(--color-orange);
    }

    .color-lightblue{
        color: var(--color-lightblue);
    }

    .color-cian{
        color: var(--color-cian);
    }

    .color-ok {
        color: var(--color-ok);
    }

    .color-warning {
        color: var(--color-warning);
    }

    .color-error {
        color: var(--color-error);
    }

    .color-black {
        color: var(--color-black-op);
    }

    .color-strong-ok{
        color: var(--color-strong-ok);
    }

    .color-strong-warning{
        color: var(--color-strong-warning);
    }

    .color-strong-error{
        color: var(--color-strong-error);
    }

    /* fuentes */

    @font-face {
        font-family: 'Gotham';
        src: url('../fonts/gotham/GothamBook.ttf') format('ttf'),
        url('../fonts/gotham/GothamMedium.ttf') format('ttf'),
        url('../fonts/gotham/Gotham-Thin.otf') format('otf');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Gotham-thin';
        src: url('../fonts/gotham/Gotham-Thin.otf') format('otf');
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-family: 'Gotham', sans-serif !important;
        background-color: var(--color-white-bold);
        font-size: 1rem;
        letter-spacing: 0.025rem;
    }

    body .ui-widget:not(.pi), body .ui-widget .ui-widget:not(.pi) {
        font-family: 'Gotham', sans-serif !important;
        font-size: 1rem;
    }

    /* primefaces growl messages */

    .ui-growl-item {
        display: flex;
        gap: 1rem;
    }

    .ui-growl-image {
        float: none;
        width: 3rem;
        height: auto;
    }

    body .ui-growl-message {
        float: none;
        line-height: 1.25rem;
        overflow: hidden;
    }

    body .ui-growl-title {
        line-height: 1rem;
    }

    /* primefaces static message */
    /* icono static message */
    .ui-message-info-icon,
    .ui-message-warn-icon,
    .ui-message-error-icon,
    .ui-message-fatal-icon{
        height: auto;
    }

    /* static message text */
    body .ui-message.ui-message-info .ui-message-info-detail,
    body .ui-message.ui-message-info .ui-message-info-summary{
        line-height: 1.25rem;
    }

    /* scroll */

    body.no-scroll {
        overflow: hidden;
        height: 100vh; /* Fija la altura para evitar scroll */
    }

    /* tamaños */

    .w-45 {
        width: 45%;
    }

    .w-100 {
        width: 100%;
    }

    .w-75 {
        width: 75%;
    }

    .w-50 {
        width: 50%;
    }

    .w-25 {
        width: 25%;
    }

    .h-100 {
        height: 100%;
    }

    /* margenes y padding */

    .mt-05{
        margin-top: .5rem;
    }

    .mt-1 {
        margin-top: 1rem;
    }

    .mt-3 {
        margin-top: 3rem;
    }

    .mb-05{
        margin-top: .5rem;
    }

    .mb-1 {
        margin-bottom: 1rem;
    }

    .mb-3 {
        margin-bottom: 3rem;
    }

    .pb-5 {
        padding-bottom: 5rem;
    }

    .mb-5 {
        margin-bottom: 5rem;
    }

    .mr-05{
        margin-right: .5rem;
    }

    .mr-1 {
        margin-right: 1rem;
    }

    .ml-05{
        margin-left: .5rem;
    }

    .ml-1 {
        margin-left: 1rem;
    }

    .m-05{
        margin: .5rem;
    }

    .m-1{
        margin: 1rem;
    }

    .m-2{
        margin: 2rem;
    }

    .m-3{
        margin: 3rem;
    }

    .m-0-3{
        margin: 0 3rem;
    }

    .pb-3 {
        padding-bottom: 3rem;
    }

    .pt-3 {
        padding-top: 3rem;
    }

    .pt-2 {
        padding-top: 2rem;
    }

    .pb-2 {
        padding-bottom: 2rem;
    }

    .pb-1 {
        padding-bottom: 1rem !important;
    }

    .pb-05{
        padding-bottom: .5rem;
    }

    .pt-05{
        padding-top: .5rem;
    }

    .pt-1 {
        padding-top: 1rem !important;
    }

    .pl-05{
        padding-left: .5rem;
    }

    .pl-1{
        padding-left: 1rem !important;
    }

    .pr-05{
        padding-right: .5rem;
    }

    .pr-1{
        padding-right: 1rem !important;
    }

    .p-05{
        padding: .5rem !important;
    }

    .p-1 {
        padding: 1rem !important;
    }

    .p-2 {
        padding: 2rem !important;
    }

    .p-3 {
        padding: 3rem !important;
    }

    .hidden {
        visibility: hidden !important;
    }

    .display-none {
        display: none;
    }

    /* border */

    .border-black {
        border: 1px solid black;
    }

    .border-radius-05{
        border-radius: .5rem;
    }

    /* texto */

    strong{
        font-weight: bold;
    }

    .letter-spacing-little {
        letter-spacing: 0.025rem;
    }

    .letter-spacing {
        letter-spacing: 0.05rem;
    }

    .uppercase {
        text-transform: uppercase;
    }

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

    .ws-no {
        white-space: nowrap;
    }

    .elipsis {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-break-word{
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* titulos */

    .title-section {
        text-align: center;
        font-size: 2.5rem !important;
        padding: 5rem 2rem;
        font-weight: 600;
        letter-spacing: 0.05rem;
    }

    @media (max-width: 640px) {
        #otros-tramites .title-section {
            padding-top: 12rem;
        }
    }

    /* imagenes */

    .img-original-size {
        object-fit: none;
        flex-shrink: 0;
        flex-grow: 0;
    }

    .img-responsive {
        max-width: fit-content;
        width: 10rem;
        object-fit: scale-down;
    }

    .bubble-img-responsive {
        max-width: fit-content;
        width: 8rem;
        object-fit: scale-down;
    }

    /* flex-box */

    .flex-space-around {
        display: flex;
        justify-content: space-around;
    }

    .flex-evenly {
        display: flex;
        justify-content: space-evenly;
    }

    .align-center {
        align-items: center;
    }

    .flex-column {
        display: flex;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-center {
        display: flex;
        justify-content: center;
    }

    .flex-center-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex-items-center {
        display: flex;
        align-items: center;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .gap-05{
        gap: .5rem;
    }

    .gap-1 {
        gap: 1rem;
    }

    .gap-2 {
        gap: 2rem;
    }

    /* grid css */

    /* elementos internos del grid */

    .ui-xl-1, .ui-xl-2, .ui-xl-3, .ui-xl-4, .ui-xl-5, .ui-xl-6,
    .ui-xl-7, .ui-xl-8, .ui-xl-9, .ui-xl-10, .ui-xl-11, .ui-xl-12 {
        padding: 1rem;
    }

    /* panel grid */

    /* quitar estilos por defecto */
    /* aplica los heredados del contenedor superior */

    .ui-panelgrid .ui-panelgrid-content {
        background-color: transparent !important;
        border: 0;
    }

    .ui-panelgrid .ui-panelgrid-cell {
        background-color: transparent !important;
    }

    /* float */

    .float-end {
        float: right !important;
    }

    .float-start {
        float: left !important;
    }

    /* cursor */

    .cursor-not-allowed {
        cursor: not-allowed;
    }

    /* bubble icon */

    .bubble-icon {
        width: 6rem;
        height: auto;
    }

    .bubble{
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 50%;
    }

    .bubble-small{
        width: 2rem;
        height: 2rem;
    }

    .bubble-medium{
        width: 5rem;
        height: 5rem;
    }

    .bubble-large{
        width: 8rem;
        height: 8rem;
    }

    .bubble-cian{
        background-color: var(--color-cian);
    }

    .bubble-lightblue{
        background-color: var(--color-lightblue);
    }

    .bubble-orange{
        background-color: var(--color-orange);
    }

    .bubble-grey{
        background-color: var(--color-grey);
    }

    .bubble-green{
        background-color: var(--color-strong-ok);
    }

    .bubble-yellow{
        background-color: var(--color-strong-warning);
    }

    .bubble-red{
        background-color: var(--color-strong-error);
    }

    /* links */

    .link {
        color: #007ad9 !important;
        text-decoration: underline !important;
        font-size: 1rem !important;
        font-weight: normal;
    }

    .link:hover {
        cursor: pointer;
    }

}