:root {
    --color-rosado: #edbbbb;
    --color-celeste: #c1ddee;
    --color-crema: #faebd7;
}

* {
    box-sizing: border-box;
    overflow-x: hidden;
    font-size: .8rem ;
    & p {
        font-size: 1rem ;
    }
    & h1 {
        font-size: 2rem;
    }
    & h2 {
        font-size: 1rem;
    }
}

header {
    background-color: bisque;
    & p {
        padding: .2rem;
        padding-inline: 1rem;
        margin: 0;padding-top: .5rem;
    }
    & h1 {
        text-align: center;
        margin: 0;
        padding-bottom: 1rem;
    }
}

main {
    padding: .3rem;
    & h2{
        text-align: center;
        padding: 0;
        margin: 0;
    }
}

table {
    margin-bottom: .5rem;
    margin-inline: .1rem;
    width: 100%;
}

.dat-ref {
    border-collapse: collapse;
    & thead th {
        text-align: center;
        background-color: var(--color-rosado);
    }
    & th, td {
        border: thin solid;
    }
    & th {
        width: 30%;
        text-align: left;
        background-color: var(--color-celeste);
        font-size: .8rem;
    }
    & td input {
        width: 100%;
        border: none;
        min-height: 1.8rem;
    }
    & select {
        width: 100%;
    }
}

.psp, .obh, .perf-sal, .cont {
    border-collapse: collapse;
        & th {
            border: thin solid;
            text-align: left;
            background-color: var(--color-rosado);
        }
        & td{
            border: thin solid;

        & input {
            width: 100%;
            border: none;
        }
    }
}

p {
    text-align: justify;
}

.area {
    width: 100%;
    border-collapse: collapse;
    & th {
        background-color: var(--color-celeste);
        text-align: left;
        border: thin solid;
    }
    & td {
        width: 80%;
        padding: .3rem;
        border: thin solid;
     & input  {
        width: 100%;
        border: none;
        height: 100%;
        box-sizing: border-box;
        }
    }
}

.cont {
    & th {
        background-color: var(--color-celeste);
    }
    & thead th {
        background-color: var(--color-rosado);
        text-align: center;
    }
}
    
.dess {
    table-layout: fixed;
    border-collapse: collapse;
    border: thin solid;
    font-size: .8rem;
    & th, td {
        border-left: thin solid;
        width: 100%;
     }
    & th {
        font-size: .5rem;
        background-color:var(--color-crema);
        border: thin solid;
     }
    & td input {
        width: 100%;
        border: none;
    }
    &.dess th:nth-child(1), .dess td:nth-child(1) {
        width: 40%;
    }
    &.dess th:nth-child(2), .dess td:nth-child(2) {
        width: 20%;
    }
    &.dess th:nth-child(3), .dess td:nth-child(3) {
        width: 25%;
    }
    &.dess th:nth-child(4), .dess td:nth-child(4) {
        width: 15%;
    }
    & .prac, .teo, .val, .pro, .ser, .saber, .hacer, .decir {
        height: 100px;
        vertical-align: top;
        & textarea {
            width: 100%;
            min-height: 100px;
            box-sizing: border-box;
            border: none;
            field-sizing: content;
        }
    }
    & .inst, .rec-mat {
        height: 100px;
        vertical-align: top;
        border-bottom: none;
        & textarea {
            width: 100%;
            min-height: 100%;
            border: none;
            field-sizing: content;
            box-sizing: border-box;
            overflow-x: hidden;
        }
    }
}

.Groq {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    & th {
        background-color: var(--color-celeste);
        text-align: left;
    }
    & td {
        border: thin solid;
        padding: .3rem;
        text-align: center;
        & textarea {
            display: block;
            width: 100%;
            min-height: 50px;
            field-sizing: content;
            box-sizing: border-box;
            border: none;
            resize: vertical;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            word-break: break-all;
        }
        & button {
            cursor: pointer;
            &:hover  {
                background-color: black;
                color: var(--color-crema);
            }
        }
    }
    & th:nth-child(1), & td:nth-child(1) {
        width: 70%;
    }
    & th:nth-child(2), & td:nth-child(2) {
        width: 30%;
    }
}

#textarea-contenidos {
    width: 100%;
    min-height: 100%;
    border: none;
    field-sizing: content;
    box-sizing: border-box;
    overflow: hidden;
}

@media (min-width: 600px) {
*{
    font-size: 1rem;
    }
}