/* MAIN */
#main {
    width: 100%;
}

/* CATEGORIA */
#row_categorias {
    width: 100%;
    margin-top: 1vw;
    display: flex;
    flex-direction: row;
    gap: 1vw;
}

#barra_editor {
    display: flex;
    flex-direction: row;
}

#editor {
    padding: 0.5rem;
    min-height: 10rem;
    border: solid grey 1px;
    outline: none;
}

.categoria {
    font-size: 1vw;
    border-radius: 8px;
    padding: 0.5vw;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    border: solid var(--color_borde) 1px;
    background-color: var(--color_difuminado);
    color: var(--color_texto_uno);
}

.categoria a {
    text-decoration: none;
    margin-left: 0.5vw;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.categoria a i {
    font-size: 1vw;
    color: var(--color_texto_uno);
    display: flex;
    justify-content: center;
    align-items: center;
}

#form_categoria {
    display: flex;
    flex-direction: row;
}

#form_categoria #buscador_categorias {
    outline: none;
    padding: 0.5vw;
    border: solid var(--color_borde) 1px;
    font-size: 1vw;
    border-radius: 16px;

    width: 100%;
    border-radius: 8px 0 0 8px;
}

#form_categoria #submit_categoria {
    cursor: pointer;
    display: flex;
    flex-direction: row;;

    border-radius: 0 8px 8px 0;
    padding: 0 3vw;
    font-size: 1vw;
    background-color: var(--color_difuminado);
    border: solid var(--color_borde);
    border-width: 1px 1px 1px 0;
}

/* ARTICULOS */
.articulos {
    padding: 3vw 10vw;
}

.articulos h2 {
    font-size: 2vw;
}

#articulos_gap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
}

.crear {
    padding: 2vw;
    text-decoration: none;
    font-size: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 16px;
    border: solid var(--color_borde) 1px;
    color: #767676;
    border-style: dashed;
}

.crear:hover {
    color: #262626;
    border-color: #262626;
}

.crear b {
    font-size: 3vw;
}

.article {
    overflow: hidden;
    position: relative;
    color: black;
    border-radius: 16px;
    text-decoration: none;
    border: solid var(--color_borde) 1px;
    text-align: center;

    height: 20vw;
    display: flex;
    flex-direction: column;
}

.article_top {
    position: relative;
    text-align: left;
    font-size: 1vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1vw;
}

.article_top p {
    width: 85%;
}

.iconos_articles {
    top: 0;
    right: 0;
    position: absolute;
    background: linear-gradient(to left, rgb(255, 255, 255) 70%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
    height: 100%;
    padding: 1vw 1vw 1vw 3vw;
}

.iconos_articles i {
    color: white;
    font-size: 1vw;
    margin-top: 0.4vw;
}

.iconos_articles .eliminar_articulo {
    background-color: rgb(207, 65, 65);
}

.iconos_articles a {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;
    cursor: pointer;
    border-radius: 16px;
    background-color: rgb(97, 202, 97);
    color: white;
    width: 2vw;
    height: 2vw;
    font-size: 1vw;
}

#inputs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    margin-bottom: 1vw;
}

.busqueda {
    outline: none;
    font-size: 1vw;
    border: solid var(--color_borde) 1px;
    border-radius: 16px;
    padding: 0.5vw;
    width: 50%;
}

.article_bottom {
    height: 100%;
}

.imagen_articulo {
    width: 100%;
    height: 100%;

    object-fit: cover; /* Ajusta la imagen sin deformarla */
    aspect-ratio: 16/9; /* Opcional: Define una relación de aspecto */
}



/* SESION */
#form_sesion {
    display: flex; 
    flex-direction: column;
}

#form_sesion label {
    margin-top: 1vw;
    font-size: 1vw;
}

#form_sesion input {
    outline: none;
    padding: 0.5vw;
    border: solid var(--color_borde) 1px;
    font-size: 1vw;
    border-radius: 16px;
}

#form_sesion button {
    margin-top: 1vw;
    font-size: 1vw;
    width: 100%;
}

/* CREAR ARTÍCULO */
#form_articulo {
    display: flex; 
    flex-direction: column;
}

#form_articulo label {
    margin-top: 1vw;
    font-size: 1vw;
}

#form_articulo input {
    outline: none;
    padding: 0.5vw;
    border: solid var(--color_borde) 1px;
    font-size: 1vw;
    border-radius: 16px;
}

#form_articulo select {
    outline: none;
    padding: 0.5vw;
    border: solid var(--color_borde) 1px;
    font-size: 1vw;
    border-radius: 16px;
}

#form_articulo textarea {
    border-radius: 16px;
    resize: vertical;
    padding: 0.5vw;
    font-size: 1vw;
}

#form_articulo button {
    margin-top: 1vw;
    font-size: 1vw;
    width: 100%;
}