/* Estilos generales */
:root {
    --color--primary: #ffffff;
    --color-secondary: rgb(49, 122, 93);
    --color-text: #1c1b1b;
    --color-bg-user-cards: #dfdbdb;
    --linear-grad: linear-gradient(to right, #14302f, #245552);
    --grad-clr1: #142c30;
    --grad-clr2: #243B55;
    --bg-color: #ebebeb;
    --color-text-description: #99A1AA;
    --color-hover-dark: #303035;
    --color-borders: #E3E6E9;
    --color-text-body: #525260;
}

* {
    font-family: cinzel, serif;
    text-decoration: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    margin: 0;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    background-color: var(--bg-color);
}

th,
td {
    text-align: center;
}

.layout,
.layout__accounting,
.layout__cases,
.layout__recordcases,
.layout__user-management,
.layout__clientfile,
.layout__calendar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.layout__header {
    width: 100%;
    background-color: var(--color--primary);
}

.layout__menu {
    width: 100%;
    border-bottom: var(--color-secondary);
}

.layout__states {
    width: 100%;
    display: grid;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: flex-start;
    justify-content: center;
    margin: 1rem 2rem;
    font-size: 0.9rem;
}

.layout__footer,
.layout__mycase {
    width: 100%;
}

.layout__mycase {
    width: 50%;
    margin: 5rem;
}

.layout__accounting,
.layout__cases,
.layout__recordcases,
.layout__user-management {
    margin: 4rem;
}

.layout__cases,
.layout__recordcases {
    margin-bottom: 2rem;
}

.layout__calendar {
    flex-direction: column;
    gap: 4rem;
    padding: 4rem;
}

.calendar__container {
    border-radius: 20px;
    width: 60%;
    height: 600px;
}

.layout__cases--documentation {
    margin-top: 0;
}


/* Navegador */
.layout__menu {
    width: 100%;
    padding: 3.5rem 3rem;
}

.menu__navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    /*Centrado en el eje y.*/
}

.menu__navbar--fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
    background-color: var(--color--primary);
    box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 10%);

}

.navbar__logo {
    width: 80px;
}

.navbar__logo-light {
    margin: 1rem;
    width: 100%;
}

.nav__list {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav__item {
    position: relative;
    margin: 0 2.4rem;
    /*Se puede hacer con gap:2.4rem en nav__list pero distancia menos.*/
}

.nav__title {
    position: relative;
    display: inline-block;
    /*En línea.*/
    font-weight: 500;
    color: var(--color-text);
    line-height: 6rem;
    /*NECESARIO para que al desplazarnos por los submenús el submenú no desaparezca. Descuadrará ligeramente la posición por lo que se debe reajustar.*/
    transition: all 300ms ease-in-out;
}

.nav__icon {
    font-size: 1rem;
    font-weight: bold;
    padding-left: 0.2rem;
    vertical-align: middle;
    /*Hereda el font-weight del eelemento madre.*/
}

/*Estilos hover menú desplegable*/
.nav__title:hover {
    color: var(--color-primary);
}

.nav__title::before {
    /*Pseudoelemento creado en css*/
    content: "";
    height: 0.2rem;
    width: 0%;
    /*Se da visibilidad, si está en 0 no. Al hacer hover se verá como se alarga la línea.*/
    background-color: var(--color-secondary);
    position: absolute;
    bottom: 1.2rem;
    left: 0;
    opacity: 0;
    transition: all 350ms linear;
    /*500ms solo para que la transición sea más inmediata.*/
}

.nav__title:hover::before {
    /*Efecto*/
    width: 100%;
    opacity: 1;
}

.nav__submenu {
    display: block;
    /*Se ocultan momentáneamente mientras se coloca el menú con none.*/
    position: absolute;
    top: 100%;
    /*Aparece naturalmente, se fuerza igualmente con 100%.*/
    left: 2rem;
    min-width: 19rem;
    /*De esta manera no se separan en dos líneas (Diseño Web y no Diseño /n Web)*/
    /*border: 1px solid red; Al inciio para diferenciar el contenedor*/
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background-color: var(--color--primary);
    box-shadow: 0px 13px 48px 0 rgba(0, 0, 0, 15%);
    opacity: 0;
    /*Para lograr el efecto*/
    visibility: hidden;
    /*Oculto, así no se podrán clickar los elementos.*/
    transition: all 300ms ease-in-out;
}

.submenu__item {
    opacity: 0;
    /*Importante para que se vea la animación posterior*/
    transform: translateX(2rem);
    transition: all 100ms ease-in-out;

}

.submenu__title {
    display: block;
    position: relative;
    font-size: 1rem;
    /*text-transform: capitalize;*/
    text-decoration: none;
    font-weight: 500;
    color: var(--color-text);
    padding: 0.7rem 1.5rem;
    transition: all 300ms ease-in-out;
}

/*Aparecen los títulos del submenú de manera escalonada.*/
.submenu__item:nth-child(1) {
    /*Selección del hijo que se necesite*/
    transition-delay: 100ms;
}

.submenu__item:nth-child(2) {
    transition-delay: 200ms;
}

.submenu__item:nth-child(3) {
    transition-delay: 300ms;
}

.submenu__item:nth-child(4) {
    transition-delay: 400ms;
}

.submenu__item:nth-child(5) {
    transition-delay: 500ms;
}

.submenu__item:nth-child(6) {
    transition-delay: 600ms;
}

.submenu__item:nth-child(7) {
    transition-delay: 700ms;
}

.submenu__item:nth-child(8) {
    transition-delay: 800ms;
}

.submenu__item:nth-child(9) {
    transition-delay: 900ms;
}

.nav__item:hover>.nav__submenu {
    opacity: 1;
    visibility: visible;
    z-index: 999;
    left: 0;
}

.nav__item:hover .submenu__item {
    opacity: 1;
    transform: translateX(0);
}

.submenu__title:hover {
    color: var(--color-secondary);
}

.submenu__title::after {
    content: "";
    height: 0.1rem;
    width: 0;
    background-color: var(--color-primary);
    position: absolute;
    top: 50%;
    left: 0;
    transition: all 300ms ease-in-out;
}

.submenu__title:hover::after {
    width: 100%;
}

/* Secciones de los estados */
.states__pendiente,
.states__archivado,
.states__en-proceso,
.states__estudio {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.states__pendiente,
.states__en-proceso,
.states__estudio {
    width: 100%;
    border-right: 1px solid var(--color-bg-user-cards);
    padding: 2rem;
    border-radius: 15px;
}

.states__archivado {
    width: 95%;
    padding: 2rem;
    border-radius: 15px;
}

/* Tarjetas de usuario*/
.states__title {
    color: var(--grad-clr1);
    font-size: 0.85rem;
    font-weight: 700;
}

.states__card {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--color--primary);
    padding: 1rem;
    padding-bottom: 1.5rem;
    margin-top: 1rem;
    border-radius: 15px;
}

.card__header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
}

.users__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


/* LOGIN / REGISTER / Formularios emergentes */

.layout__login {
    position: relative;
    width: 850px;
    height: 500px;
    margin: 5rem;
    background-color: #ffffff;
    box-shadow: 25px 30px 55px #5557;
    border-radius: 13px;
    overflow: hidden;
}

.login__form,
.cases__form,
.accounting__form,
.clientfile__form,
.notes__form {
    position: absolute;
    width: 60%;
    height: 100%;
}

.cases__form,
.accounting__form,
.clientfile__form,
.notes__form {
    z-index: 5;
    display: none;
    width: 40%;
    height: 660px;
    background-color: var(--color--primary);
    box-shadow: 25px 30px 55px #5557;
    border-radius: 13px;
    top: 2rem;
}

.clientfile__form {
    height: 740px;
    top: 0.5rem;
}

.cases__form,
.accounting__form {
    min-height: 760px;
    top: 1rem;
}

.notes__form {
    background-color: #fff;
    height: 300px;
    top: 10rem;
}

textarea {
    max-width: 100%;
    max-height: 110px;
}

.login__sign-up {
    z-index: 1;
}

.login__sign-in {
    z-index: 2;
}

/* Etiqueta form */
.login__form-to-send,
.cases__form-to-send,
.accounting__form-to-send,
.clientfile__form-to-send,
.notes__form-to-send {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 50px;
}

.overlay-panel__title,
.login__title {
    color: var(--grad-clr1);
}

.login__title {
    margin: 1rem;
    text-align: center;
}

.form__social-container {
    margin: 20px 0px;
}

.social-container a {
    border: 1px solid #DDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    height: 40px;
    width: 40px;
}

.form__login-span,
.menu__overlay {
    font-size: 12px;
}

.form__login-infield,
.form__cases-infield,
.form__accounting-infield,
.form__clientfile-infield,
.form__notes-infield {
    position: relative;
    margin: 8px 0px;
    width: 100%;
}

.form__login-input,
.form__cases-input,
.form__accounting-input,
.form__clientfile-input,
.form__notes-textarea {
    width: 100%;
    padding: 12px 8px;
    background-color: #f3f3f3;
    border: none;
    outline: none;
}

/*Formularios de modificación encontrados en cases y accounting*/
.form__cases-infield,
.form__accounting-infield,
.form__clientfile-infield {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form__cases-input,
.form__accounting-input,
.form__clientfile-input {
    width: 70%;
}

.form__cases-label--modify,
.form__accounting-label--modify {
    color: var(--color-text-body);
    font-weight: 600;
}

.form__login-label,
.form__cases-label,
.form__accounting-label,
.form__clientfile-label,
.form__notes-label {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    background-color: var(--linear-grad);
    transition: 0.3s;
}

.form__login-input:focus~.form__login-label,
.form__cases-input:focus~.form__cases-label,
.form__accounting-input:focus~.form__accounting-label,
.form__clientfile-input:focus~.form__clientfile-label,
.form__notes-textarea:focus~.form__notes-label {
    width: 100%;
}

.social-container__social,
.forgot {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0px;
}

.forgot {
    padding-bottom: 3px;
    border-bottom: 2px solid #EEE;
}

.form__login-button,
.form__cases-button,
.form__accounting-button,
.form__clientfile-button,
.form__notes-button,
.overlay-panel__button,
.info__modify-button,
.info__modify-button--notes,
.cases__modify-button,
#overlayBtn {
    border-radius: 20px;
    border: 1px solid var(--grad-clr1);
    background: var(--grad-clr1);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.overlay-panel__button:hover,
.info__modify-button:hover,
.info__modify-button--notes:hover,
.cases__modify-button:hover,
.form__cases-button:hover,
.form__accounting-button:hover,
.form__clientfile-button:hover,
.form__notes-button:hover {
    opacity: 0.7;
}

.login__form button {
    margin-top: 17px;
    transition: 250ms ease-in;
}

.login__form button:hover {
    background-color: #fff;
    color: var(--grad-clr1);
}

.form__cases-button,
.form__accounting-button,
.form__clientfile-button,
.form__notes-button {
    margin-top: 2rem;
}

.form__cases-button,
.form__accounting-button {
	margin-top: 0.6rem;
}

.cases__xicon,
.accounting__xicon,
.clientfile__xicon,
.notes__xicon {
    position: absolute;
    font-size: 1rem;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    transition: 300ms ease-in-out;
}

.cases__xicon:hover,
.accounting__xicon:hover,
.clientfile__xicon:hover,
.notes__xicon:hover {
    opacity: 0.7;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 60%;
    width: 40%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 9;
}

#overlayBtn {
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 304px;
    transform: translateX(-50%);
    width: 143.67px;
    height: 40px;
    border: 1px solid #fff;
    background: transparent;
    border-radius: 20px;
}

.overlay {
    position: relative;
    background: var(--linear-grad);
    /* linear grad */
    color: #fff;
    left: -150%;
    height: 100%;
    width: 250%;
    transition: transform 0.6 ease-in-out;
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 40px;
    text-align: center;
    height: 100%;
    width: 340px;
    transition: 0.6s ease-in-out;
}

.overlay-left {
    right: 60%;
    transform: translateX(-12%);
}

.overlay-right {
    right: 0;
    transform: translateX(0%);
}

.overlay-panel h1 {
    color: #fff;
}

.overlay-panel__text {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 25px 0px 35px;
    margin-bottom: 47px;
}

.overlay-panel__button--login {
    border: 1px solid #fff;
    background: transparent;
    padding: 12px 18px;
}

/* Toggles para deslizar las pantallas con js. */
.right-panel-active .overlay-container {
    transform: translateX(-150%);
}

.right-panel-active .overlay {
    transform: translateX(50%);
}

.right-panel-active .overlay-left {
    transform: translateX(25%);
}

.right-panel-active .overlay-right {
    transform: translateX(35%);
}

.right-panel-active .login__sign-in {
    transform: translateX(20%);
    opacity: 0;
}

.right-panel-active .login__sign-up {
    transform: translateX(66.7%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {

    0%,
    50% {
        opacity: 0;
        z-index: 1;
    }

    50.1%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

.btnScaled {
    animation: scaleBtn 0.6s;
}

/* Suaviza la transición que desliza las opciones. */
@keyframes scaleBtn {
    0% {
        width: 143.67px;
    }

    50% {
        width: 143.67px;
    }

    100% {
        width: 143.67px;
    }
}


/* Documents: zona de drag and drop*/
.form__documents,
.form__mycase {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2rem;
}

.layout__dragdrop {
    border: 2px dashed var(--color--primary);
    border-radius: 15px;
    height: 190px;
    /*350*/
    width: 700px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2rem;
    margin-bottom: 3rem;
}

.layout__dragdrop--clientfile{
    width: 100%;
    height: 100%;

}

.layout__dragdrop.active {
    border: 2px solid var(--color--primary);
}

.dragdrop__icon-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dragdrop__file--clientfile{
    margin: 0.5rem;
}

.dragdrop__icon {
    font-size: 90px;
    color: var(--color--primary);
}

.dragdrop__text {
    font-size: 1.7rem;
    font-weight: 500;
}

.dragdrop__text--o {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color--primary);
    margin: 1 rem 0 1.5rem 0;
}

.dragdrop__text--button,
.form__button {
    margin-top: 1rem;
    padding: 10px 25px;
    border-radius: 15px;
    background-color: var(--grad-clr1);
    color: var(--color--primary);
    cursor: pointer;
}


.dragdrop__text--button:hover,
.form__button:hover {
    opacity: 0.8;
}

.form__button {
    font-size: 1rem;
    border: none;
}

/* Estilos de la sección de documentos y mycase.html */
.layout__uploadDocuments {
    max-width: 700px;
    background-color: var(--color--primary);
    padding: 20px 30px;
    width: 100%;
    border-radius: 15px;
}

.uploadDocuments__title,
.documents__title,
.mycase__title,
.accounting__title,
.cases__title,
.recordcases__title,
.clientfile__title,
.user-management__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--grad-clr2);
}

.accounting__title,
.cases__title,
.recordcases__title,
.clientfile__title,
.user-management__title {
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.documents__input,
.mycase__input,
.users__options {
    width: 50%;
    padding: 12px 8px;
    background-color: #f3f3f3;
    border: none;
    outline: none;
    margin: 1rem;
}

.users__options {
    margin: 0;
    border-radius: 6px;
    font-size: 0.7rem;
}

.mycase__input {
    width: 200px;
}

.uploadDocuments__showfilebox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    padding: 10px 15px;
    box-shadow: #0000000d 0px 0px 0px 1px,
        #d1d5db3d 0px 0px 0px 1px inset;
}

.uploadDocuments__left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filetype {
    background-color: var(--grad-clr1);
    color: var(--color--primary);
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 1rem;
    text-transform: uppercase;
}

.uploadDocuments__left h3 {
    font-weight: 600;
    font-size: 1rem;
}

.uploadDocuments__icon,
.user-management__icon,
.clientfile__icon {
    color: var(--grad-clr1);
    font-size: 17px;
    cursor: pointer;
}

.clientfile__form--documents{
	background-color: var(--bg-color);
    height: 333px;
    top: 50%;
}

/* Estilos de la timeline que muestra los estados en el que se encuentran los casos. */
.mycase__states {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
}

.states__state {
    font-size: 1rem;
    font-weight: 700;
}

.skills__progressbar {
    /*width: 100%; No es necesario si no se pone display: inline-block;*/
    height: 1rem;
    border: 1px solid var(--color-secondary);
    border-radius: 1rem;
    background-color: var(--color-principal);
    margin-bottom: 1.5rem;
}

.skills__percentage {
    width: 40%;
    height: 0.9rem;
    background-color: var(--grad-clr1);
    border: 2px solid var(--color-principal);
    border-radius: 1rem;
    transition: width 1.5s ease-in-out;
}

/*Modificadores de procentaje para el nivel de la progressbar.*/
.skills__percentage--p1 {
    width: 10%;
}

.skills__percentage--p2 {
    width: 20%;
}

.skills__percentage--p3 {
    width: 30%;
}

.skills__percentage--p4 {
    width: 40%;
}

.skills__percentage--p5 {
    width: 50%;
}

.skills__percentage--p6 {
    width: 60%;
}

.skills__percentage--p7 {
    width: 70%;
}

.skills__percentage--p8 {
    width: 80%;
}

.skills__percentage--p9 {
    width: 90%;
}

.skills__percentage--p10 {
    width: 100%;
}

/* Contabilidad */
.accounting__table,
.cases__table,
.recordcases__table,
.user-management__table {
    border-collapse: collapse;
    margin: 25px 70px;
    font-size: 1em;
    min-width: 400px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 15%);
    overflow-x: auto;
    /* Añadir scroll */
}

.cases__table--documentation {
    width: 60%;
}

.accounting__table thead tr,
.cases__table thead tr,
.recordcases__table thead tr,
.user-management__table thead tr {
    background-color: var(--grad-clr1);
    color: var(--color--primary);
    text-align: left;
    font-weight: bold;
}

.accounting__table th,
.accounting__table td,
.cases__table th,
.cases__table td,
.recordcases__table th,
.recordcases__table td,
.user-management__table th,
.user-management__table td {
    padding: 12px 15px;
}

.accounting__table tbody tr,
.cases__table tbody tr,
.recordcases__table tbody tr,
.user-management__table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.accounting__table tbody tr:nth-of-type(even),
.cases__table tbody tr:nth-of-type(even),
.recordcases__table tbody tr:nth-of-type(even),
.user-management__table tbody tr:nth-child(even) {
    background-color: #f3f3f3;
}

/* Iconos para eliminar filas en user__management. */
.user-management__iconContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ficha de cliente. */
.clientfile__container {
    font-size: 0.9rem;
    width: 85%;
    height: 525px;
    min-height: 525px;
    min-width: 1200px;
    display: grid;
    grid-template-areas:
        'title title'
        'info notes';
    grid-template-columns: 45% 55%;
    grid-template-rows: 15% 90%;
    gap: 10px;
    background-color: var(--color--primary);
    margin-top: 4rem;
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 15%);
    overflow: hidden;
}

.clientfile__title {
    position: relative;
    width: 100%;
    grid-area: title;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.clientfile__username,
.card__username {
    font-size: 1.2rem;
    font-weight: 700;
    padding-left: 10px;
    color: var(--grad-clr1);
}

.card__username {
    font-size: 0.9rem;
}

.clientfile__icon {
    color: var(--color-text-);
    font-size: 1.5rem;
}

/* Añadido hover para el "botón" de añadir nuevos doucmentos en client_file.php */
.clientfile__icon--documents {
    transition: all 300ms ease-in-out;
}

.clientfile__icon--documents:hover {
    opacity: 0.7;
}

.clientfile__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 90%;
    height: 1px;
    background-color: #dcdee2;
    transform: translateX(-50%);
    /* Ajusta el punto de inicio para centrar el borde */
}

.clientfile__info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
    grid-area: info;
    gap: 3rem;
    padding: 1rem;
}

.clientfile__notes {
    display: flex;
    justify-content: center;
    width: 100%;
    grid-area: notes;
    padding-bottom: 1.5rem;
    overflow-y: auto;
}

.notes__notes-container {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    width: 90%;
    height: 88%;
    max-height: 565px;
    border-radius: 20px;
    background-color: var(--bg-color);
    overflow-y: auto;
    /* Añadir scroll */
}

.notes__note {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 1rem;
    border-bottom: 1px solid var(--color--primary);

}

.note__title {
    font-weight: 700;
    margin-top: 0.7rem;
}

.note__text {
    margin: 0.5rem;
}

.note__writter {
    color: var(--grad-clr2);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.info__left,
.info__right {
    display: flex;
    justify-content: center;
    align-items: space-around;
    flex-direction: column;
    gap: 1rem;
}

.info__title {
    font-weight: 700;
}

.info__text {
    background-color: #f3f3f3;
    padding: 4px;
    border-radius: 7px;
}



/* Estilos para el menú versión móvil. */

.navbar__mobile-btn {
    display: none;
    /* Mostrando */
}

.mobile-btn__wrap {
    height: 4rem;
    width: 4rem;
    background-color: var(--color-text-body);
    border: none;
    border-radius: 3.2rem;
    transition: all 300ms ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.mobile-btn__line {
    /* display block sería neceario para visualizarlo en caso de que nno hubiese display flex */
    width: 2rem;
    height: 0.2rem;
    background-color: var(--color-secondary);
    margin-bottom: 0.4rem;
    transition: all 300ms ease-in-out;
}

.mobile-btn__line:last-child {
    width: 1rem;
    margin-right: -1rem;
}

.menu-mobile {
    /* display: none; Se elimina porque impide la transición */
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 10;
    width: 30rem;
    height: 100%;
    background-color: var(--color--primary);
    padding: 5rem 1rem;
    padding-top: 0;
    box-shadow: 0px 0px 85px -35px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    /* Añadir scroll */
    transition: all 800ms cubic-bezier(0.77, 0.2, 0.05, 1);
}

.menu-mobile--show {
    visibility: visible;
    opacity: 1;
    left: 0;
}

.menu-mobile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1rem;
    padding: 2rem 0rem;
    border-bottom: 1px solid var(--color-borders);
}

.menu-mobile__container-logo {
    width: 100px;
}

.menu-mobile__logo {
    width: 100%;
}

.menu-mobile__btn-close {
    background-color: transparent;
    height: 3rem;
    width: 3rem;
    border: 2px solid var(--color-text-description);
    border-radius: 1rem;
    color: var(--color-text-body);
    font-size: 1.6rem;
    cursor: pointer;
}

.menu-mobile__list {
    display: block;
    height: 100%;
    overflow: auto;
}

.menu-mobile__item {
    position: relative;
    border-bottom: 1px solid var(--color-borders);
    margin: 0 1rem;
}

.menu-mobile__link {
    position: relative;
    height: 5rem;
    line-height: 5rem;
    color: var(--color-text-body);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-mobile__icon {
    font-size: 1.4rem;
}

.menu-mobile__submenu-mobile {
    display: none;
    visibility: visible;
    opacity: 1;
    min-width: 100%;
    padding: 0;
    padding-bottom: 1rem;
}

.submenu-mobile__link {
    display: block;
    text-decoration: none;
    position: relative;
    padding: 0.7rem 1rem;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--color-text-body);
}

/* Formularios emergentes. */
.info__modify-button,
.info__modify-button--notes,
.cases__modify-button {
    height: 3rem;
    width: 4rem;
    background-color: var(--color-text-body);
    border: none;
    border-radius: 3.2rem;
    transition: all 300ms ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: 0.5rem;
}

.info__modify-button--notes,
.cases__modify-button {
    position: fixed;
    z-index: 7;
    width: 9rem;
    bottom: 0.5rem;
    right: 0.5rem;
    gap: 1rem;
}

.info__modify-button {
    position: fixed;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 7;
}

/* Tabla responsive */
.responsive__table {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Paginación y filtros */
.pagination__container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    padding-top: 0rem;
}

.pagination__container--table{ /* Disponible para las tablas de cases, accounting u otras */
	width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    padding-top: 0rem;
}

.form__mycase--row{
    flex-direction: row;
	margin: 1rem;
}

.form__button--filter{
    margin-top: 0;
}

.layout__cases--filter{
	margin: 0;	
}