@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

    .flat-cntndr {
        width: 400px;
        height: 468px;
        margin: 0 auto;
        background-image: url(https://i.imgur.com/SXYkXhw.png);
        background-size: cover;
        position: relative;
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
        line-height: 15px;
        color: var(--letra);
        /* --color2: rgba(255, 255, 255, .6);
        --letra: #000;
        --btn1:#fff;
        --btn2:#a7a7a7;
        --deg1: #00C9FF;
        --deg2: #92FE9D; */
    }

    .flat-cntndr br {
        display: none;
    }

    .blue    {background-image: url(https://i.imgur.com/kCA5Odg.png);}
    .blueosc {background-image: url(https://i.imgur.com/f57P5hP.png);}
    .cyan    {background-image: url(https://i.imgur.com/w2YoERE.png);}
    .fucsia  {background-image: url(https://i.imgur.com/SqRZWpu.png);}
    .green   {background-image: url(https://i.imgur.com/pWZ3AZD.png);}
    .grey    {background-image: url(https://i.imgur.com/7fagpKp.png);}
    .orange  {background-image: url(https://i.imgur.com/kvn2g6H.png);}
    .purple  {background-image: url(https://i.imgur.com/tY6rQXV.png);}
    .red     {background-image: url(https://i.imgur.com/gBEFFmd.png);}
    .rose    {background-image: url(https://i.imgur.com/FCHNwGN.png);}
    .yellow  {background-image: url(https://i.imgur.com/5r4Wjhk.png);}


    .flat-bss {
        --w: 335px;
        --h: 322px;
        --w2: calc(var(--w) / 2);
        --h2: calc(var(--h) / 2);
        width: var(--w);
        height: var(--h);
        padding: 15px 0;
        box-sizing: border-box;
        border-radius: 18px;
        background-image: linear-gradient(180deg, var(--deg1) 0.06%, var(--deg2) 83.15%);
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        top: calc(47% - var(--h2));
        left: calc(50.3% - var(--w2));
        mask-image: url(https://i.imgur.com/3LoTCw8.png);
        mask-size: cover;
        -webkit-mask-image: url(https://i.imgur.com/3LoTCw8.png);
        -webkit-mask-size: cover;
    }


    /* flat-carrsl */
    .checkbox {
        display: none;
    }

    #section1:checked ~ .flat-bss .flat-nnv label[for='section1'],
    #section2:checked ~ .flat-bss .flat-nnv label[for='section2'],
    #section3:checked ~ .flat-bss .flat-nnv label[for='section3'],
    #section4:checked ~ .flat-bss .flat-nnv label[for='section4'] {
        background-color: var(--btn2);
        flex-grow: 2;
        transition: 0.5s ease-in-out;
    }

    #section1:checked ~ .flat-bss .flat-cards .flat-uno,
    #section2:checked ~ .flat-bss .flat-cards .flat-dos,
    #section3:checked ~ .flat-bss .flat-cards .flat-tres,
    #section4:checked ~ .flat-bss .flat-cards .flat-cuatro {
        z-index: 999;
        left: 0;
        transition: left 0.5s ease-in-out;
    }

    .flat-cards {
        width: 100%;
        height: 260px;
        position: relative;
        overflow: hidden;
    }

    .flat-carrsl {
        width: 100%;
        height: 100%;
        padding: 10px 15px ;
        box-sizing: border-box;
        background-image: linear-gradient(180deg, var(--deg1) 0.06%, var(--deg2) 83.15%);
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: justify;
        position: absolute;
        left: 100%;
        top: 0;
        transition-delay: .5s;
    }

    /* Contenido flat-cards */

    /* Hora */

    .flat-uno {
        justify-content: center;
        align-items: center;
        line-height: 30px;
    }

    .flat-uno span:first-child {
        font-size: 80px;
        font-weight: bold;
    }

    /* Usuario */

    .flat-spprr {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .flat-spprr img {
        width: 90px;
        height: 90px;
        border-radius: 100%;
        object-fit: cover;
    }

    .flat-spprr > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .flat-spprr > div > span:first-child {
        font-size: 30px;
        font-weight: bold;
    }

    .flat-spprr > div > span:nth-child(2) {
        text-transform: uppercase;
    }

    .flat-dos > div[info] {
        display: flex;
        justify-content: space-evenly;
        gap: 20px;
        color: var(--letra2);
    }

    .flat-dos > div[info] span,
    .flat-dos > div[info] a {
        width: 60px;
        height: 60px;
        background-color: var(--color2);
        border-radius: 100%;
        display: flex;
        padding: 10px;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .flat-dos > div[info] span br {
        display: none;
    }

    .flat-dos > div[info] a {
        width: 50px;
        height: 50px;
        font-size: 23px;
        color: currentColor;
        text-decoration: none;
    }

    .flat-dos > div[info] span i {
        font-size: 23px;
    }

    /* Mensajes  y llamadas*/

    .flat-currp {
        padding-right: 5px;
        box-sizing: border-box;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: .5s linear;
    }

    .flat-ntti {
        padding: 10px 15px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: var(--color2);
    }

    .flat-ntti img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        object-fit: cover;
    }

    .flat-ntti i {
        font-size: 30px;
    }

    .flat-ntti i + span {
        font-size: 14px;
    }

    .flat-ntti i.fa-phone-missed {
        color: #ff0000;
    }

    .flat-ntti i.fa-phone-arrow-up-right {
        color: #ffa500;
    }

    .flat-ntti i.fa-phone-plus {
        color: #19ee2b;
    }

    .flat-ntti > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .flat-ntti > div span:first-child {
        font-size: 16px;
        font-weight: bold;
    }

    /* Botones */
    .flat-nnv {
        width: 40%;
        padding: 0 15px;
        display: flex;
        justify-content: space-around;
        gap: 5px;
    }

    .flat-item {
        height: 10px;
        border-radius: 5px;
        background-color: var(--btn1);
        flex-grow: 1;
        cursor: pointer;
        transition: 0.5s ease-in-out;
    }

    /* Finaliza botones */

    .flat-cntndr > a {
        position: absolute;
        top: 30px;
        right: -40px;
        text-align: center;
        --crdt: #fff;
        color: var(--crdt);
        text-decoration: none;
        text-transform: uppercase;
        transform: rotate(90deg);
    }

    .flat-cntndr.blue    > a {--crdt: hsl(203, 88%, 30%);}
    .flat-cntndr.blueosc > a {--crdt: hsl(215, 88%, 30%);}
    .flat-cntndr.cyan    > a {--crdt: hsl(175, 88%, 30%);}
    .flat-cntndr.fucsia  > a {--crdt: hsl(302, 88%, 30%);}
    .flat-cntndr.green   > a {--crdt: hsl(105, 88%, 30%);}
    .flat-cntndr.grey    > a {--crdt: hsl(0,   0%,  30%);}
    .flat-cntndr.orange  > a {--crdt: hsl(30,  88%, 30%);}
    .flat-cntndr.purple  > a {--crdt: hsl(271, 88%, 30%);}
    .flat-cntndr.red     > a {--crdt: hsl(0,   88%, 30%);}
    .flat-cntndr.rose    > a {--crdt: hsl(324, 88%, 30%);}
    .flat-cntndr.yellow  > a {--crdt: hsl(60,  88%, 30%);}