/*style.css*/
   
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background-color: #f4f7f6;
        }
        h1, h2 { color: #333; }
        form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        .btn-submit { background-color: #28a745; color: white; }
        .btn-edit { background-color: #ffc107; color: black; margin-right: 5px; }
        .btn-delete { background-color: #dc3545; color: white; }
        .btn-cancel { background-color: #6c757d; color: white; }
        
        .tarea-card {
            background: white;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

/*----------------------------------------------------------
    Status Message
    Mensajes informativos del sistema
----------------------------------------------------------*/
.status-message{
    width:100%;
    margin:20px 0;
    padding:15px;
    text-align:center;
    font-size:1rem;
    font-weight:600;
    color:#555;
    background:#f8f9fa;
    border:1px solid #dcdcdc;
    border-radius:8px;
    box-shadow:0 2px 4px rgba(0,0,0,.08);
    animation:fadeIn .4s ease-in-out;
}

/*----------------------------------------------------------
    Animación de entrada
----------------------------------------------------------*/

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}