<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Lista de Pendientes</title>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Abel&family=Lato:ital,wght@1,300&display=swap" rel="stylesheet"> 

        <style>
            body {
                background-color: #E5D4D1;
                font-family: 'Abel', sans-serif;
                padding-top: 60px;
            }

            .container {
                max-width: 550px;
                margin: auto;
                background-color: #E1DFDE;
                -webkit-box-shadow: 2px 2px 13px -4px rgba(0,0,0,0.21);
                box-shadow:  2px 2px 13px -4px rgba(0,0,0,0.21);
                border-radius: 10px 10px 0 0;
            }

            h1,h2,h3,h4,h5,h6 {
                font-family: 'Lato', sans-serif;
                text-align: center;
            }

            a {
                text-decoration: none;
                color: #996E66;
            }

            .barra_superior {
                display: flex;
                justify-content: space-between;
                color: #fff;
                padding: 10px;
                border-radius: 10px 10px 0 0;
                background: linear-gradient(90deg, #1e7dcb 0%, #547482 65%, #77c2e2 100%);
            }

            .barra_superior a {
                color: #fff;
            }

            .envoltorio-tarea {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px;
                background-color: #fff;
                border-top: 1px solid rgb(225,225,225);
            }

            .titulo-tarea {
                display: flex;
            }

            .titulo-tarea a {
                text-decoration: none;
                color: #4B5156;
                margin-left: 10px;
            }

            .icono-tarea-completa {
                width: 20px;
                height: 20px;
                background-color: #4CAF50;
                border-radius: 50%;
            }

            .icono-tarea-incompleta {
                width: 20px;
                height: 20px;
                background-color: #FFC107;
                border-radius: 50%;
            }

            .enlace-eliminar {
                text-decoration: none;
                font-weight: 900;
                color: #FF0000;
                font-size: 22px;
                line-height: 0;
            }

        </style>

    </head>
    <body>

        <div class="container">
            {% block content %}



            {% endblock content %}

        </div>


    </body>
</html>
