@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

.flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row {
    width: 275px;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    flex-direction: column !important;
    background: linear-gradient(180deg, #0a3b21, #3e623d, #2ab438);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}

.p-divider .p-divider-content {
    background-color: transparent !important;
}

.p-grid.grid.p-nogutter.grid-nogutter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end !important;
    height: 55vh !important;
    gap: 0px;
}

.p-sidebar-content,
.slim-scrool-bar {
    scrollbar-width: none !important;
}

.px-4.py-5.md\:px-6.lg\:px-8 {
    padding: 0 !important;
}

.p-sidebar-mask.p-component-overlay {
    pointer-events: auto;
    border-radius: 22px;
}

.flex.md\:align-items-center.md\:justify-content-between.flex-column.md\:flex-row.pb-4.border-bottom-1.surface-border {
    display: none !important;
}

svg {
    fill: #fff;
    width: 51px;
    height: 51px;
}

span.uppercase.text-lg.text-gray-500 {
    color: #fff !important;
}

.col-12.p-2 {
    width: 25%;
    padding: 0 .5rem !important;
}

.col-12 {
    flex: 0 0 auto;
    padding: .5rem;
    width: 80%;
}

.h-screen,
body {
    height: 100vh !important;
    background: transparent;
}

h5.m-0 {
    font-size: 1.5rem;
    color: #fff;
}

.text-3xl {
    font-size: 3.75rem !important;
    color: #ffffff !important;
    font-weight: 600;
    font-family: 'Heebo', sans-serif;
}

p-sidebar-left .p-sidebar,
.p-sidebar-right .p-sidebar {
    width: 20rem;
    height: 100%;
    background: #77b727;
}

.p-sidebar h2 {
    color: #fff;
}

.p-accordion-header-text,
.react-kanban-column>div:first-child {
    width: 100% !important;
    background: #fff;
}

.field>label {
    display: inline-block;
    margin-bottom: .5rem;
    color: #fff;
}

.p-divider-solid.p-divider-vertical:before {
    border-left-style: none;
}

i.pi.pi-user.text-blue-600.text-2xl.md\:text-4xl.mb-2.md\:mb-0.mr-0.md\:mr-3 {
    color: #003018 !important;
}

.surface-card .text-blue-600 {
    color: #003018 !important;
}

.text-2xl {
    font-size: 1.5rem !important;
    margin-top: 16px;
}

.fc-popover,
.p-dialog-content,
.p-dialog-footer,
.p-dialog-header,
.p-tabview-nav-next,
.p-tabview-nav-prev,
.surface-0 {
    background-color: #00330C !important;
}

.p-fluid .p-autocomplete-dd .p-autocomplete-input {
    width: 1%;
    border-color: #fff;
}

.p-icon {
    display: inline-block;
    color: #fff;
}

.text-3xl svg {
    width: 39px;
    height: 39px;
}

.col-12.lg\:col-10 {
    width: 70%;
}

.fixed.max-h-screen.overflow-auto.bottom-0.left-0.lg\:static.lg\:col-2.p-4.lg\:border-left-1.border-top-1.lg\:border-top-none.border-50.col-12 {
    color: #01330c;
    width: 30%;
    border: 1px solid #01330c !important;
    margin: 0 auto;
    border-radius: 12px;
}

.p-dataview .p-dataview-content {
    background: transparent;
    color: #1b1b1b;
    border: 0;
    padding: 0;
}

.p-dialog .p-dialog-header .p-dialog-title {
    font-weight: 500;
    font-size: 1.143rem;
    color: #fff;
}

.p-overlaypanel .p-overlaypanel-content {
    padding: 1.143rem;
    background: #01330c;
    border-radius: 14px;
}

.p-overlaypanel.p-component.max-w-screen.mx-3.p-ripple-disabled.p-overlaypanel-flipped.p-overlaypanel-enter-done {
    background: transparent;
}

.text-900.font-bold.text-2xl.mb-2 {
    color: #fff !important;
}

.text-2xl.mb-2 {
    display: none !important;
}

.flex.flex-column.justify-content-between.md\:flex-row {
    flex-direction: column !important;
}

.lg\:w-min {
    width: -webkit-max-content !important;
    width: max-content !important;
}

.ml-2,
.p-dialog-title {
    margin-left: .5rem !important;
    color: #fff !important;
}

.text-4xl {
    font-size: 2rem !important;
    color: #76c018 !important;
}

.wmde-markdown>:last-child {
    margin-bottom: 0 !important;
    color: #fff !important;
}

.md\:flex-grow-0 {
    flex-grow: 0 !important;
    display: none !important;
}

.p-button.p-button-secondary.p-button-outlined,
.p-buttonset.p-button-secondary>.p-button.p-button-outlined,
.p-splitbutton.p-button-secondary>.p-button.p-button-outlined {
    background-color: rgb(27 27 27) !important;
    color: #fff;
}

.fixed.max-h-screen.overflow-auto.bottom-0.left-0.lg\:static.lg\:col-2.p-4.lg\:border-left-1.border-top-1.lg\:border-top-none.border-50.col-12 {

    color: #01330c;
    background-color: #fff;
}

button.p-button.p-component {

    background: #76c018;

    color: #fff;
}

.text-3xl::after {
    content: "/ mes IVA incluido";
    display: flex;
    font-size: 24px;
    justify-content: flex-end;
}

span.text-blue-700 {
    color: #01330c !important;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 10px;
    font-weight: 900;
}

span.text-600.ml-1::after {
    content: "€";
}

span.text-blue-700::before {
    content: "Primeros dos meses ";
    font-weight: 900;
}

span.text-blue-700::after {
    content: "€";
}

span.text-blue-700 {

    color: #01330c !important;
}

h5.m-0 {

    font-size: 1.5rem;
}

.fixed.max-h-screen.overflow-auto.bottom-0.left-0.lg\:static.lg\:col-2.p-4.lg\:border-left-1.border-top-1.lg\:border-top-none.border-50.col-12 .flex .flex-grow-1 .flex {

    flex-direction: column;
}

.pi-times:before {

    content: "\e90b";
    color: #fff;
}

.field input {
    background: #fff;
}

.p-sidebar.p-component.p-ripple-disabled.p-sidebar-enter-done {
    background: #003018 !important;
    border-radius: 24px;
}

.fixed.max-h-screen.overflow-auto.bottom-0.left-0.lg\:static.lg\:col-2.p-4.lg\:border-left-1.border-top-1.lg\:border-top-none.border-50.col-12 h5.m-0 {
    color: #01330c;
}

/* .flex.flex-grow-1.flex-column{
    display: none !important;
} */
button.p-button.p-component.border-radius.p-button-sm[aria-label="+Info"] {
    display: none;
}

.mb-1.mr-2.text-green-300 {
    display: none !important;
}

span.uppercase.text-lg.text-gray-500 {
    color: #fff !important;
    display: none;
}

.flex.flex-grow-1.flex-column {
    flex-direction: row-reverse !important;
    align-items: flex-start;
    margin: 0;
    padding: 10px 0;
    justify-content: flex-end;
}

.col-12.p-2:nth-child(1) .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row {
    position: relative;
    /* Para pseudo-elementos */
}

/* Título "Móvil" */
.col-12.p-2:nth-child(1) .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row::before {
    content: url(https://greentel.es/wp-content/uploads/2025/02/movil.png)" Móvil";
    display: block;
    font-weight: 600;
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 0.5rem;
    font-family: "Nunito", Sans-serif;
}

/* Lista con ticks */
.col-12.p-2:nth-child(1) .flex.flex-grow-1.flex-column::after {
    content: "✅ Llamadas ilimitadas\A✅ 100Gb/mes 5G acumulables\A✅  Sin permanencia";
    white-space: pre-line;
    /* o 'pre' */
    display: block;
    color: #fff;
    margin-top: 0.5rem;
    width: 100%;
    line-height: 27px;
    font-size: 16px;
    font-family: "Nunito", Sans-serif;
}

/* Título "Móvil" */
.col-12.p-2:nth-child(2) .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row::before {
    content: url(https://greentel.es/wp-content/uploads/2025/02/movil.png)" Móvil";
    display: block;
    font-weight: 600;
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 0.5rem;
    font-family: "Nunito", Sans-serif;
}

/* Lista con ticks */
.col-12.p-2:nth-child(2) .flex.flex-grow-1.flex-column::after {
    content: "✅ Llamadas ilimitadas\A✅ Datos ilimitados 5G\A✅  Sin permanencia";
    white-space: pre-line;
    /* o 'pre' */
    display: block;
    color: #fff;
    margin-top: 0.5rem;
    width: 100%;
    line-height: 27px;
    font-size: 16px;
    font-family: "Nunito", Sans-serif;
}

/*****************************************
 * TARJETA 3 (Fibra)
 *****************************************/
.col-12.p-2:nth-child(3) .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row {
    position: relative;
}

/* Título "Fibra" */
.col-12.p-2:nth-child(3) .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row::before {
    content: url(https://greentel.es/wp-content/uploads/2025/02/router.png)" Fibra";
    display: block;
    font-weight: 600;
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 0.5rem;
    font-family: "Nunito", Sans-serif;
}

/* Lista con ticks */
.col-12.p-2:nth-child(3) .flex.flex-grow-1.flex-column::after {
    content: "✅ Fibra 300Mb\A✅ Instalación y router incluido\A✅ Sin permanencia";
    white-space: pre-line;
    /* o 'pre' */
    display: block;
    color: #fff;
    margin-top: 0.5rem;
    width: 100%;
    line-height: 27px;
    font-size: 16px;
    font-family: "Nunito", Sans-serif;

}

/*****************************************
 * TARJETA 3 (Fibra)
 *****************************************/
.col-12.p-2:nth-child(4) .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row {
    position: relative;
}

/* Título "Fibra" */
.col-12.p-2:nth-child(4) .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row::before {
    content: url(https://greentel.es/wp-content/uploads/2025/02/router.png)" Fibra";
    display: block;
    font-weight: 600;
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 0.5rem;
    font-family: "Nunito", Sans-serif;
}

/* Lista con ticks */
.col-12.p-2:nth-child(4) .flex.flex-grow-1.flex-column::after {
    content: "✅ Fibra 1GB\A✅ Instalación y router incluido\A✅ Sin permanencia";
    white-space: pre-line;
    display: block;
    color: #fff;
    margin-top: 0.5rem;
    width: 100%;
    line-height: 27px;
    font-size: 16px;
    font-family: "Nunito", Sans-serif;
}

.p-divider-vertical.p-divider-center {
    align-items: center;
    display: none !important;
}

.mb-2 {
    padding: 2rem 0;
}

.text-sm {
    font-size: .875rem !important;
    display: flex;
    justify-content: flex-end;
}

span.text-gray-600.text-sm::after {
    content: " € / mes";
}

.p-icon {
    display: inline-block;
    color: #fff !important;
    width: 25px;
}

.p-dropdown-clear-icon {
    position: absolute;
    top: 0 !important;
    margin-top: 0 !important;
}

.p-dropdown .p-dropdown-label {
    background: transparent;
    border: 1px solid #fff !important;
    color: #fff !important;
}

.p-dropdown {
    border: 1px solid #fff !important;
    color: #fff !important;
}

.font-italic {
    color: #fff !important;
}

.border-blue-500 {
    border-color: #64ff80 !important;
    background: #45ffaa !important;
}

.p-button .p-button-icon-left {
    margin-right: .5rem;
    fill: #fff;
    color: #fff;
}

span.p-button-label.p-c {
    color: #fff;
}

.p-fieldset-legend-text {
    line-height: 1;
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    color: green;
}
i.pi.text-3xl.mb-2.pi-wallet {
    color: #003018 !important;
    padding: 0;
}
i.pi.text-3xl.mb-2.pi-wallet::after {
    color: #003018 !important;
    content: "" !important;
}
.text-900.font-medium.text-3xl.mb-5 {
    font-family: 'Nunito';
    color: #fff !important;
}
.p-fluid .p-inputtextarea {
    width: 100%;
    border-color: #fff;
}
.text-900.font-medium.text-3xl.mb-5::after{
    content:"" !important
}
.flex.flex-column.border-round.border-1.p-4.cursor-pointer.hover\:border-primary.transition-duration-150.surface-border {
    display: flex !important
;
    flex-direction: row !important;
    gap: 10px;
}
.pi-wallet:before {
    content: "Pago:";
    font-size: 25px;
    font-family: 'Nunito';
}
.surface-card .text-blue-600.text-lg  {
    color: #fff !important;
    font-size: 35px !important;
    font-family: 'Nunito';
    background: #24961b;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 20px;
}

.field-checkbox,
.field-radiobutton {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    color: #fff;
}

@media (max-width: 1600px) {
    .col-12.p-2 {
        width: 24%;
        padding: 0 .5rem !important;
        min-height: 445px;
    }

    .p-grid.grid.p-nogutter.grid-nogutter {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end !important;
        height: 55vh !important;
        gap: 10px;
    }

    .text-3xl::after {
        content: "/ mes IVA incluido";
        display: flex;
        font-size: 19px;
        justify-content: flex-end;
    }

    .col-12 {
        flex: 0 0 auto;
        padding: .5rem;
        width: 80%;
    }

    .flex.border-round.shadow-3.flex.p-4.flex-column.md\:flex-row {
        width: 237px;
        height: 445px;
    }
}

@media (max-width:898px) {
    .p-grid.grid.p-nogutter.grid-nogutter {
        align-items: center !important;
        height: auto !important;
    }

    span.text-blue-700 {
        color: #ffffff !important;
    }

    .text-sm {
        font-size: .875rem !important;
        color: #fff !important;
    }

    .fixed.max-h-screen.overflow-auto.bottom-0.left-0.lg\:static.lg\:col-2.p-4.lg\:border-left-1.border-top-1.lg\:border-top-none.border-50.col-12 h5.m-0 {
        color: #fff;
    }

    .col-12 {
        flex: 0 0 auto;
        padding: .5rem;
        width: 100%;
    }

    .col-12.p-2 {
        width: 85%;
    }

    .text-3xl {
        font-size: 2.75rem !important;
    }

    .text-3xl svg {
        width: 35px;
        height: 31px;
    }

    .p-button:enabled:hover,
    .p-button:not(button):not(a):not(.p-disabled):hover {
        background: #0e734a;
        color: #fff;
        border-color: #12ff67;
    }

    .p-button.p-button-text.p-button-plain:enabled:hover,
    .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover {
        background: rgb(229 68 68 / 77%);
    }

    .font-medium {
        font-weight: 500 !important;
        color: #fff !important;
    }

    .surface-50 .font-medium {
        color: #003018 !important;
    }

    .ml-1 {
        margin-left: .25rem !important;
        color: #fff !important;
    }

    .col-12.lg\:col-10 {
        width: 100%;
    }

    .fixed.max-h-screen.overflow-auto.bottom-0.left-0.lg\:static.lg\:col-2.p-4.lg\:border-left-1.border-top-1.lg\:border-top-none.border-50.col-12 {
        color: #ffffff;
        width: 100%;
        bottom: 15% !important;
    }

    .p-sidebar-left .p-sidebar,
    .p-sidebar-right .p-sidebar {
        width: 20rem;
        height: 100%;
        background: #0a3b21;
    }

    .p-grid.grid.p-nogutter.grid-nogutter {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 25px;
        align-items: center;
    }

    .fixed.max-h-screen.overflow-auto.bottom-0.left-0.lg\:static.lg\:col-2.p-4.lg\:border-left-1.border-top-1.lg\:border-top-none.border-50.col-12 {
        color: #ffffff;
        width: 100%;
        bottom: 1% !important;
    }

}