@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

html {
    font-size: 16px;
}

body {
    font-family: 'DM Sans', sans-serif;
    min-width: 358px;
    background-color: #F1F1F1;
}

* {
    box-sizing: border-box;
}

/* Variables de color*/
:root {

    /* Primario */

    --P50: #FFE3E1;
    --P100: #FFF2F1;
    --P200: #FFCBC8;
    --P300: #FFA6A1;
    --P400: #FE726B;
    --P500: #F7453C;
    --P600: #E1251B;
    --P700: #C01E15;
    --P800: #9F1C15;
    --P900: #831E19;
    --P950: #480A07;

    /* Shark */

    --S50: #f5f6f6;
    --S100: #e5e8e8;
    --S200: #cdd2d4;
    --S300: #aab3b6;
    --S400: #808c90;
    --S500: #657175;
    --S600: #565f64;
    --S700: #4a5154;
    --S800: #414649;
    --S900: #393d40;
    --S950: #26292b;

    /* Error */

    --error50: #fef2f2;
    --error100: #fde3e3;
    --error200: #fdcbcb;
    --error300: #faa7a7;
    --error400: #f46a6a;
    --error500: #eb4848;
    --error600: #d82a2a;
    --error700: #b52020;
    --error800: #961e1e;
    --error900: #7d1f1f;
    --error950: #440b0b;

    /* Exito */
    --exito50: #f0fdf5;
    --exito100: #dcfce8;
    --exito200: #bbf7d1;
    --exito300: #86efad;
    --exito400: #4ade80;
    --exito500: #22c55e;
    --exito600: #16a34a;
    --exito700: #15803c;
    --exito800: #166533;
    --exito900: #14532b;
    --exito950: #052e14;

    /* Alerta */

    --alerta50: #fef9e8;
    --alerta100: #fef0c3;
    --alerta200: #fee28a;
    --alerta300: #fdd147;
    --alerta400: #fac215;
    --alerta500: #eab308;
    --alerta600: #ca9a04;
    --alerta700: #a17c07;
    --alerta800: #85680e;
    --alerta900: #715a12;
    --alerta950: #423306;

    /* Información */

    --info50: #f0faff;
    --info100: #e0f5fe;
    --info200: #bae8fd;
    --info300: #7dd5fc;
    --info400: #38bcf8;
    --info500: #0ea5e9;
    --info600: #028ac7;
    --info700: #0370a1;
    --info800: #075e85;
    --info900: #0c506e;
    --info950: #083549;

    /* Variables de espacio */

    --medida8: 0.5rem;
    --medida12: 0.75rem;
    --medida16: 1rem;
    --medida20: 1.25rem;
    --medida24: 1.5rem;
    --medida28: 1.75rem;
    --medida32: 2rem;
    --medida36: 2.25rem;
    --medida40: 2.5rem;
    --medida44: 2.75rem;
    --medida48: 3rem;
    --medida52: 3.25rem;
    --medida56: 3.5rem;

    /* Variables de bordes radius */
    --radiusSm: 0.25rem;
    --radiusMd: 0.5rem;
    --radiusLg: 0.75rem;
}

/***** Textos *****/

h1, h2, h3, h4 {
    color: var(--S900);
    margin: 0px !important;
}
span, label, p, small {
    color: var(--S950);
}

h1 {
	font-size: 28px;
	line-height: 32px;
    font-weight: bold;
}

h2 {
    font-size: 1.75;
    line-height: 2.25rem;
    font-weight: bold;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: bold;
}

h4 {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: bold;
}

span, label, p {
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
}

p {
    margin: 0rem;
}

strong {
    font-weight: bold;
    margin: 0px;
}

small {
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 400;
}

i {
    font-size: var(--medida24);
}

.link {
    color: var(--P600);
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

.link--strong {
    font-weight: bold;
}

.link--txt {
    text-decoration: none;
}

.link--textLinea {
    text-decoration: underline;
}

.relative {
    position: relative;
}
.tipo-cambio p{ color:#5D5D5D;}


/* Scroll */
/* ::-webkit-scrollbar {
    width: 9px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d5d6d9;
} */

/* Clases adicionales */
.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.gap8Column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gap24Column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mgtop24 {
    margin-top: 24px !important;
}

.mgBt24 {
    margin-bottom: 24px !important;
}
.mgBt32 {
    margin-bottom: 32px !important;
}


.dBlock {
    display: block;
}

.row {
    display: flex;
    flex-direction: row !important;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.row--noWrap {
    flex-wrap: nowrap;
}

.row--gap24 {
    gap: 24px !important;
}

.row--gap60 {
    gap: 60px !important;
}

.row--start {
    align-items: flex-start !important;
}

.row--alignEnd {
    align-items: flex-end !important;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.color--grey {
    color: #B0B0B0;
}

.color--black {
    color: var(--S800);
}

.fz14 {
    font-size: 14px;
	line-height:18px;
}

/* Login */
.login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    align-items: center;
    width: 100%;
    height: 100vh;
    gap: 40px;
    background-color: white;
}

.contenedorLogin__form {
    display: flex;
    justify-content: center;
    width: 100%;
}

.contenedorLogin__form .form {
    justify-content: center;
    align-items: center;
    width: 400px;
}

.contenedorLogin__form .form .form__group {
    width: 100%;
}

.login__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 0px 140px; */
    width: 400px;
}

.login__form .form__group {
    width: 100%;
}

.login__img {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background-image: url(/image/img-login.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login__logo {
    margin-bottom: 60px;
    width: 200px;
}

.ver-pass {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.retrocederLogin {
    position: absolute;
    top: 60px;
}

/* Header */
.header {
    display: grid;
    grid-template-columns: 140px 1fr 334px;
    align-items: center;
    gap: 10px;
    padding: 0px 30px;
    width: 100%;
    height: 85px;
    background-color: white;
}

.login__top {
    width: 135px;
}

.header__botones__perfil {
    /* height: 32px; */
    border-radius: 32px;
}

.header__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
}

.header__menu__option {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    color: var(--S900);
    height: 42px;
    border-radius: 42px;
    padding: 0px 18px;
}

.header__menu__option:hover {
    background-color: var(--S200);
}

.header__menu__option--active {
    background-color: var(--P600);
    color: #F1F1F1;
}

.header__menu__option--active:hover {
    background-color: var(--P600);
    color: #F1F1F1;
}

.header__botones__perfil,
.header__botones__mantenedores,
.header__botones__notificaciones {
    position: relative;
}

.header__botones__mantenedores__drop {
    display: none;
    flex-direction: column;
    background-color: white;
    width: 400px;
    height: auto;
    border-radius: 1rem;
    position: absolute;
    border: 1px solid #E7E7E7;
    right: 0px;
    top: 55px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.295);
    z-index: 1;
}

.header__botones__mantenedores__drop>* {
    padding: 16px 24px;
}

.mantenedores__drop__link {
    text-decoration: none;
    color: black;
    border-top: 1px solid #E4E4E4;
}

.mantenedores__drop__link--active {
    background-color: var(--P50);
}

.header__botones__notificaciones__drop {
    display: none;
    flex-direction: column;
    background-color: white;
    width: 400px;
    height: auto;
    border-radius: 1rem;
    position: absolute;
    border: 1px solid #E7E7E7;
    right: 0px;
    top: 55px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.295);
    z-index: 1;
}

.header__botones__notificaciones__drop>* {
    padding: 16px 24px;
}

.notificaciones__drop__link {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #E4E4E4;
}

.notificaciones__drop__link--active {
    background-color: #F4F4F4;
}

.ciruloNoti {
    width: 9px;
    height: 9px;
    border-radius: 9px;
    background-color: var(--P600);
}

.ciruloNoti--absolute {
    position: absolute;
    top: 2px;
    right: 0px;
}


.header__botones__perfil__drop {
    display: none;
    flex-direction: column;
    background-color: white;
    width: 250px;
    height: auto;
    border-radius: 1rem;
    position: absolute;
    border: 1px solid #E7E7E7;
    right: 0px;
    top: 55px;
    z-index: 1;
}

.header__botones__perfil__drop>* {
    padding: 16px 24px;
}

.perfil__drop__link {
    text-decoration: none;
    color: black;
    padding: 12px 24px;
}

.perfil__drop__link__user {
    border-bottom: 1px solid #E4E4E4;
}

/* Menu responsivo */
.contenedor__header__menuResponsivo__cerrar,
.header__menuResponsivo {
    display: none;
}

/* Contenido */
.contenido { padding: 10px 30px; }
.contenido--admin {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
}

/* Admin */
.admin__menu {
    background-color: white;
    padding: 16px 24px 24px 24px;
    height: 100%;
    border-radius: 0.75rem;
}

.contenidoDiv {
    background-color: white;
    padding: 20px 24px;
    height: auto;
    border-radius: 0.75rem;
}
.contenidoDiv--h100 { height: 100vh;}
.contenidoDivAdmin {
    background-color: white;
    padding: 20px 24px;
    height: auto;
    border-radius: 0.75rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.titulo__seccion { margin-bottom: 24px;}
.admin__menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin__menu__option {
    text-decoration: none;
    padding: 12px 20px;
    width: 100%;
    border-radius: 0.75rem;
    color: black;
}
.admin__menu__option--active {
    background-color: var(--P600);
    color: white;
}
.admin__menu__boton { display: none;}

/* Web */
.titulo__boton {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 24px;
}
.titulo__boton--sinMargen { margin: 0px;}

.contenidoDiv--lineas {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: white;
    padding: 24px;
    height: auto;
    border-radius: 0.75rem;
    border: 1px solid #E7E7E7;
}
.contenidoDiv--lineasFitContent{ width: fit-content;}

/* DX */
.dx-datagrid {
    border-radius: 12px !important;
    border: 1px solid #E7E7E7 !important;
    font-family: 'DM Sans', sans-serif !important;
}
.dx-datagrid .dx-column-lines>td {
    border-left: 0px !important;
    border-right: 0px !important;
    border-top: 1px solid #E7E7E7 !important;
    border-bottom: 1px solid #E7E7E7 !important;
}
.dx-datagrid-headers { border-bottom: 0px !important;}
.dx-datagrid-text-content {
    font-weight: 700 !important;
    color: #323232 !important;
}
/* th:first-child, */
td:first-child { text-align: left !important;}
.dx-datagrid .dx-row>td {
    padding: 20px 25px !important;
    font-size: 16px !important;
    text-align: center;
}
.dx-datagrid-content .dx-datagrid-table .dx-row .dx-editor-cell {
    background: #F3F3F3;
}
.dx-checkbox-checked .dx-checkbox-icon {
    color: white !important;
    background: #454545;
    padding: 10px;
    border-radius: 8px;
}
.dx-checkbox-icon {
    border: 1px solid #454545 !important;
    background-color: #fff;
    color: white !important;
    padding: 10px;
    border-radius: 8px !important;
}

.dx-datagrid-focus-overlay { border: 0px !important;}
.dx-datagrid .dx-link { color: #454545 !important;}

.dx-editor-cell .dx-texteditor,
.dx-editor-cell .dx-texteditor .dx-texteditor-input {
    border-radius: 16px !important;
}

.dx-datagrid-headers .dx-texteditor-input,
.dx-datagrid-rowsview .dx-texteditor-input {
    padding: 0px 10px 0px 30px !important;
}

.dx-datagrid-header-panel { padding: 0px !important;}

.dx-toolbar .dx-toolbar-items-container { margin-bottom: 20px !important;}
.dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-menu { border: 0px !important;}
.dx-context-menu { border: 0px !important;}
.dx-editor-with-menu .dx-filter-menu .dx-menu-item-content .dx-icon.dx-icon-filter-operation-default, .dx-filter-menu .dx-menu-item-content .dx-icon.dx-icon-filter-operation-default {
    margin-top: 4px !important;
}
tr.dx-row.dx-column-lines.dx-datagrid-filter-row { background:#F3F3F3;}

.dx-datagrid-form-buttons-container [aria-label="Cancelar"]{background: #D1D1D1 !important;}
.dx-widget.dx-button.dx-button-mode-contained.dx-button-normal.dx-button-has-text { background: #E1251B;}
.dx-button-mode-contained .dx-icon{ color: white !important;}
span.dx-button-text { color: white;}
.dx-datagrid-form-buttons-container [aria-label="Cancelar"] span.dx-button-text { color: #262626 !important;}

/**************************/

.edit-absolute{
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Tabla */
.tablaMtg{
	background-color: #FFF;
    width: 100%;
    text-align: left;
    border: 1px solid #E7E7E7;
    border-bottom: 0px;
    border-radius: 12px;
}
th{
    font-size: 16px;
    font-weight: 700;
}
td, th{
    padding: 20px 10px 20px 24px;
    border-bottom: 1px solid #E7E7E7;
}
.tablaMtg tr:last-child td{ border-bottom: none;}


.contenidoDiv__grid2{
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 28px 24px;
}
.tipo_moneda {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 4px;
	min-height: 44px;
}


@media (max-width: 1781px) {

/* Header */
.header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 0px 0px 0px 30px;
	width: 100%;
	height: 85px;
	background-color: white;
}

/* Menu responsivo */
.header__menuResponsivo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 85px;
	height: 100%;
	background-color: var(--P600);
	color: white;
	cursor: pointer;
}
.contenedor__header__menuResponsivo__cerrar {
	display: flex;
	width: 100%;
	color: white;
	margin-bottom: 20px;
	cursor: pointer;
}

.header__menu {
	display: flex;
	position: fixed;
	width: 400px;
	height: 100vh;
	background-color: var(--P600);
	right: -400px;
	top: 0px;
	z-index: 10;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 36px;
	transition: all 300ms;
}
.header__menu__option--active {
	background-color: var(--P800);
	color: #F1F1F1;
}
.header__menu__option {
	justify-content: flex-start;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	color: white;
}
.header__menu__option:hover {
	color: white;
	background-color: transparent;
}
.header__menu__option--active:hover { background-color: var(--P800);}

}


@media (max-width: 992px) {

/* Login */
.login { grid-template-columns: 1fr;}
.login__img { display: none;}

.tipo_moneda { grid-template-columns: 1fr 1fr;}
    

/* Admin */
.contenido--admin { grid-template-columns: 1fr;}
.admin__menu { display: none; height: auto;}
.admin__menu__boton {
	display: block;
	position: absolute;
	top: 6px;
	right: 30px;
	background-color: var(--P600);
	color: white;
	padding: 8px;
	border-radius: 4px;
}
}

@media (max-width: 790px) {
.contenidoDiv__grid2 { grid-template-columns: 1fr;}
}
@media (max-width: 768px) {
.row--gap60 { gap: 20px;}
.login__top { width: 120px;}
}


@media (max-width: 576px) {
.header { position:relative; height: 90px; padding: 10px 70px 20px 30px;}
.tipo-cambio { display:flex !important; position:absolute; bottom:0;}
.header__menuResponsivo { width: 70px; position: absolute; right: 0;}

/* Login */
.login__form {
	width: 100%;
	padding: 0px 20px;
}
.contenedorLogin__form .form {
	justify-content: center;
	align-items: center;
	width: 90%;
}
.login__logo { width: 150px; margin-bottom: 30px;}

.retrocederLogin { position: absolute; top: 40px; }
.deleteFactura{ width: 100% !important;}
}


/* EXTRAS */
#todosAdjuntar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#divAdjuntar { align-items: flex-end;}
.deleteFactura{
    display: inline-flex;
    width: max-content;
    align-items: center;
    border-radius: 2rem;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    gap: 8px;
    justify-content: center;
    color: var(--P50);
    background-color: var(--P600);
    transition: all 300ms;
    font-size: 1rem;
    height: 44px;
    padding: 0px 20px;
}