:root{
    --villa-guinda:#8b0d0d;
    --villa-guinda-oscuro:#650909;
    --villa-dorado:#d98b19;
    --villa-verde:#26664a;
    --villa-tinta:#263238;
    --villa-muted:#667085;
    --villa-linea:#e4e7ec;
    --villa-fondo:#f6f7f9;
    --villa-card:#ffffff;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--villa-fondo);
    color:var(--villa-tinta);
    text-rendering:optimizeLegibility;
}

a,
button,
input,
select,
textarea{
    font:inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(217,139,25,.35);
    outline-offset:2px;
}

.banner{
    box-shadow:0 1px 0 rgba(16,24,40,.08);
}

.wrap{
    width:min(100%,1320px);
}

.card,
.stat,
.docitem,
.formcard,
.estadofinalbox{
    border:1px solid var(--villa-linea);
    border-radius:8px;
    box-shadow:0 12px 28px rgba(16,24,40,.07);
}

.topbar h1,
.titulo,
.head h2,
.encabezado h1{
    letter-spacing:0;
}

.topactions a,
.topbar a,
.salir,
.ver,
.enlacepaso,
.acciones a,
.filtros button,
.filtros a,
.formrow button,
.btn,
.boton{
    border-radius:8px;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.topactions a:hover,
.topbar a:hover,
.salir:hover,
.ver:hover,
.enlacepaso:hover,
.acciones a:hover,
.filtros button:hover,
.filtros a:hover,
.formrow button:hover,
.btn:hover,
.boton:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(16,24,40,.14);
}

.badge,
.estado,
.estatus{
    border-radius:999px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="file"],
select,
textarea{
    border-color:#cfd4dc;
}

table{
    border-collapse:separate;
    border-spacing:0;
}

th{
    position:sticky;
    top:0;
    z-index:1;
}

@media (max-width:700px){
    .wrap{
        margin:18px auto 32px;
        padding:0 14px;
    }

    .topbar h1{
        font-size:24px;
    }

    .cardbody,
    .body,
    .head{
        padding:18px;
    }

    .topactions,
    .acciones{
        width:100%;
    }

    .topactions a,
    .acciones a,
    .formrow button,
    .btn,
    .boton{
        width:100%;
        justify-content:center;
        text-align:center;
    }
}