@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);


:root {
    --body-backg: #FF9F9;
    --accent: #0ea5a4;
    --muted: #6b7280;
    --menu-hoover: #fff; /*#ffc20a;#F4DA71; */
    --link-color: #ffc20a; /*#ffc20a;  #D0B242; #E6C34A ;  #D4AC0D;*/
    --link-focus: #7D868C;
    --link-grid: #1D1D1B;
    --card-header: #7D868C;
    --btn-backg: #7D868C;
    --btn-hover: #979A9A;
    --btn-toggle: #5F6A6A;
    --ctl-border: #ABABAB;
    --ctl-text: #495057; /* #222222; */
    --ctl-backg: #fff;
    --ctl-shadow: #AAAAAA55;
    --error-color: #D38E56;
}

body {
    margin: 0;
    margin-top: 5px;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #1f1e1e;
    background-color: var(--body-backg);
}

.ocultar {
    visibility: hidden;
}

.container {
    max-width: 1900px;
}

.form-container {
    flex: 1;
    margin-right: 20px; /* Ajusta el margen entre el formulario y las instrucciones */
    margin-left: 20px;
}

.gridtext-sm-left{
    font-size:.8rem;
    text-align:left;
}

h1 {
    font-size: 18px;
    margin: 0 0 12px;
    color: var(--accent);
}
.value2 {
    font-weight:bold;
}

.campos-container {
    display: flex;
    flex-direction: column;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    --border: #e6e9ef;
}
.grid1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
    --border: #e6e9ef;
}

.grupo-titulo {
    font-weight: bold;
    font-size: 1.1em;
    margin: 16px 0 8px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    color: #444;
}

.field2 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), transparent);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.field1 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), transparent);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 560px) {
    .grid2 {
        grid-template-columns: 1fr;
    }
}

.instructions-container {
    flex: 1;
    background-color: #f7f7f7;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.piepagina {
    font-size: small;
}

.usuario {
    font-weight: 500;
    font-size: medium;
    padding-bottom: 15px;
}

.cardGrid {
    /*min-width: 800px;*/
    min-width: 935px;
}

.documentos-main {
    flex-grow: 1;
    overflow-y: auto;
    /*background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 80%);*/

    padding-bottom: .1rem !important;
    padding-top: .1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.documentos-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 25rem);
    grid-gap: 2rem;
    justify-content: center;
    padding-left: 0;
}

.documentos-cards > li {
    height: 12rem;
    position: relative;
    background-size: cover;
    border-radius: 0.5rem;
    list-style-type: none;
    /*box-shadow: 0 3px 4px rgb(0 0 0 / 40%);*/
    transition: 0.1s ease-out;
}

.documentos-thumb {
    display: grid;
    grid-template-columns: repeat(auto-fill, 25rem);
    grid-gap: 2rem;
    justify-content: center;
    padding-left: 0;
}

.documentos-info {
    border-radius: 0.5rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%);
    padding: 1rem 1rem;
    color: #fff2cc;
    cursor: pointer;
    /*text-shadow: 0 2px 2px rgb(0 0 0 / 50%);*/
    line-height: 1.25rem;
}

.textoCapturado {
    font-weight: 300;
}

.textoNoCapturado {
   /* font-weight: 500;*/
}

a.disabled {
    pointer-events: none;
}

.margen-abajo {
    margin-bottom: 1rem;
}

.card-header {
    color: var(--link-color);
    font-weight: 600;
    font-size: small;
    background-color: var(--card-header);
}

.card-body {
    padding-top: 0.25rem;
}

.card-body-flex {
    padding-top: 0.25rem;
    display: flex;
    justify-content: space-between;
}

.nopad {
    padding: 0;
}

.btn-integrado {
   
    background: #eec20a !important;
    box-shadow: .2rem .2rem 0 0 var(--ctl-border);
    border-width: .15rem !important;
    font-weight: bolder;
    font-size: larger;
    padding: .375rem;
}

.form-control:focus {
    color: var(--ctl-text);
    background-color: var(--ctl-backg);
    border-color: var(--ctl-border);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--ctl-shadow);
    -webkit-box-shadow: inset 0 1px 1px var(--ctl-shadow), 0 0 8px var(--ctl-shadow);
}

.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 1);
}

.btn-primary {
    color: #fff;
    background-color: var(--btn-backg);
    border-color: var(--btn-backg);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--btn-hover);
    border-color: var(--btn-hover);
}

.btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: var(--btn-hover);
    border-color: var(--btn-hover);
    box-shadow: 0 0 0 0.2rem var(--ctl-shadow);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--btn-toggle);
    border-color: var(--btn-toggle);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--btn-toggle);
    border-color: var(--btn-toggle);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--ctl-shadow);
}

.pendiente {
    color: var(--error-color);
}

.btn-link {
    font-weight: 500;
    color: var(--link-color);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--link-focus);
    text-decoration: underline;
}

.btn-link:focus, .btn-link.focus {
    border-color: #fff;
    text-decoration: underline;
}

.navbar-laravel {
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

.navbar-brand, .nav-link, .my-form, .login-form {
    font-family: Raleway, sans-serif;
}

.steptext {
    white-space: pre;
}

.espacios {
    white-space: pre;
}


.espacios > span {
    white-space: pre;
}

.my-form {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.my-form .row {
    margin-left: 0;
    margin-right: 0;
}

.login-form {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.login-form .row {
    margin-left: 0;
    margin-right: 0;
}

.txtGrid {
    font-weight: 400;
    font-size: medium;
    color: var(--link-grid);
    text-decoration: none;
}

a {
    color: var(--link-focus);
    font-size: small;
    text-decoration: underline;
}

a:hover {
    color: var(--link-color);
    font-size: small;
    text-decoration: underline;
}


a.linkTxtGrid {
    font-weight: 400;
    font-size: medium;
    color: var(--link-grid);
    text-decoration: none;
    text-decoration: underline;
}

a.linkTxtGrid:hover {
    color: var(--link-focus);
    font-size: medium;
    text-decoration: underline;
}

a.linkTxtGrid:focus, a.linkTxtGrid.focus {
    border-color: #fff;
    text-decoration: underline;
}

a.linkGrid {
    font-weight: 400;
    color: var(--link-grid);
    text-decoration: none;
    text-decoration: underline;
}

a.linkGrid:hover {
    color: var(--link-focus);
    text-decoration: underline;
}

a.linkGrid:focus, a.linkGrid.focus {
    border-color: #fff;
    text-decoration: underline;
}

.table {
    color: #1D1D1B !important;
}

.table-centered {
    margin-left: 15%;
    margin-right: 15%;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #C1C1C1 !important;
}

.TextError {
    font-size: small;
    color: var(--error-color);
}

.btn-default {
    color: #fff;
    background-color: var(--btn-backg);
    border-color: var(--btn-backg);
}

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    color: #fff;
    background-color: var(--btn-toggle);
    border-color: var(--btn-toggle);
}

.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-image: none
}

.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active {
    background-color: var(--btn-backg);
    border-color: var(--btn-backg);
}

.btn-default .badge {
    color: #fff;
    background-color: var(--btn-backg);
}


.btn-success {
    color: #fff;
    background-color: var(--btn-backg);
    border-color: var(--btn-backg);
}

.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: var(--btn-backg);
    border-color: var(--btn-toggle);
}

.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    background-image: none
}

.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active {
    background-color: var(--btn-backg);
    border-color: var(--btn-backg);
}

.btn-success .badge {
    color: #fff;
    background-color: var(--btn-backg);
}

.pasoCompleto {
    background-color: var(--link-color);
}

.form-group {
    margin-bottom: 10px;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
    font-size: small;
    padding-inline: 15px 15px;
    color: var(--link-focus);
    text-decoration: none;
    stroke: var(--link-focus);
    background-color: #ffffff;
    letter-spacing: 1px;
}

.nav-link-inicio {
    font-size: large !important;
    padding: 0.2rem 1rem;
   /* color: var(--link-focus);
    text-decoration: none;
    stroke: var(--link-focus);
    background-color: #ffffff;
    letter-spacing: 1px;*/
}

.navbar-light:hover .navbar-nav:hover .nav-link:hover {
    font-weight: 600;
    font-size: small;
    color: var(--menu-hoover);
    text-decoration: none;
    background-color: var(--btn-backg); /* #808080; var(--ctl-border);*/
}

/*.table {
    padding: 0.5rem
}*/

.table td, .table th {
    padding: .15rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}