/* =====================================
   ESTILO GENERAL IGUAL QUE INICIO
===================================== */
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #fff0e3, #ffd5b8);
    color: #5e554c;
    font-family: "Poppins", Arial, sans-serif;
    overflow-x: hidden;
}

/* Título principal */
h2 {
    text-align: center;
    font-size: 34px;
    color: #d87a38;
    margin-top: 28px;
    text-shadow: 3px 4px 10px rgba(216,122,56,0.35);
    letter-spacing: 1px;
    font-weight: 700;
}

/* Texto descriptivo */
p {
    width: 92%;
    max-width: 650px;
    margin: 14px auto 25px;
    text-align: center;
    font-size: 17px;
    color: #6b5e52;
    line-height: 1.7;
}

/* =====================================
   SECCIÓN CREAR TAREA
===================================== */
#crearTarea {
    width: 80%;
    max-width: 480px;
    margin: 25px auto;
    background: #fff5eb;
    border-radius: 22px;
    padding: 24px;
    border: 3px solid #ffcaa1;
    box-shadow: 0 12px 26px rgba(0,0,0,0.17);
    transform: scale(1.02);
}

#crearTarea label {
    font-weight: bold;
    color: #c06a2c;
    font-size: 16px;
}

#crearTarea input {
    width: 90%;
    padding: 12px;
    margin-top: 8px;
    border-radius: 14px;
    border: 2px solid #ffcaa1;
    font-size: 16px;
}

#crearTarea button {
    margin-top: 16px;
    width: 100%;
    background: linear-gradient(120deg, #ffa86b, #ff8a33);
    border: none;
    color: white;
    padding: 14px;
    border-radius: 16px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.20);
    font-weight: 600;
    transition: transform .2s ease;
}

#crearTarea button:hover {
    transform: scale(1.08);
}

/* =====================================
   TABLAS (PENDIENTES Y REALIZADAS)
===================================== */
section table {
    width: 92%;
    max-width: 700px;
    margin: 22px auto;
    border-collapse: collapse;
    background: #fff7f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

section table tr {
    border-bottom: 1px solid #ffe1c7;
}

section table td {
    padding: 16px;
    font-size: 17px;
    color: #5e4f45;
}

/* Nombre de la tarea */
td#nombre {
    font-weight: 700;
    color: #c06a2c;
    font-size: 18px;
}

/* Estado */
td#estado {
    font-style: italic;
    color: #856d57;
}

/* Botones (OK y borrar) */
table button {
    border: none;
    background: transparent;
    font-size: 26px;
    cursor: pointer;
    margin-right: 8px;
    transition: transform 0.2s ease;
}

table button:hover {
    transform: scale(1.3);
}

/* Botón Borrar ❌ */
button[name="tareaBorrada"] {
    color: #ff4444;
}

/* Botón Realizar ✅ */
button[name="tareaRealizada"] {
    color: #30b94d;
}

/* =====================================
   SECCIÓN REALIZADA (colores distintos)
===================================== */
#tareasRealizada table {
    background: #dbffe0;
}

#tareasRealizada td#estado {
    color: #1f8b32;
    font-weight: bold;
    font-size: 15px;
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 430px) {
    h2 { font-size: 28px; }
    p { font-size: 15px; }

    section table td {
        padding: 12px;
        font-size: 15px;
    }

    table button {
        font-size: 22px;
    }

    #crearTarea {
        padding: 18px;
    }
}
body,
html {
    overflow-x: hidden !important;
}