*{box-sizing:border-box}

body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#f3f6f4;
color:#243029;
}

.contenedor{
width:min(1450px,95%);
margin:25px auto;
}

.pequeno-contenedor{
max-width:700px;
}

.encabezado{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:25px;
}

.encabezado h1,
.login-card h1{
color:#146b39;
margin:0;
}

.encabezado p{
color:#66746c;
}

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

.usuario-info{
color:#59655f;
font-size:14px;
}

.tarjeta,
.login-card{
background:#fff;
border-radius:15px;
padding:25px;
box-shadow:0 5px 18px rgba(0,0,0,.07);
}

.tarjeta{
margin-bottom:25px;
}

.formulario{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.campo{
display:flex;
flex-direction:column;
margin-bottom:14px;
}

.campo label{
font-weight:bold;
margin-bottom:7px;
}

.campo small{
font-weight:normal;
color:#777;
}

.campo input,
.campo select{
padding:12px;
border:1px solid #ccd6d0;
border-radius:8px;
font-size:15px;
background:white;
}

.campo-check{
display:flex;
align-items:center;
gap:8px;
margin:15px 0;
}

.acciones{
display:flex;
gap:10px;
margin-top:20px;
}

.btn{
border:0;
border-radius:8px;
padding:12px 18px;
text-decoration:none;
font-weight:bold;
cursor:pointer;
display:inline-block;
font-size:14px;
}

.pequeno{
padding:8px 11px;
font-size:13px;
}

.verde{background:#247942;color:#fff}
.azul{background:#326fd9;color:#fff}
.rojo{background:#953b3b;color:#fff}
.gris{background:#e9edeb;color:#222}
.morado{background:#6a45b8;color:#fff}
.naranja{background:#d67a1f;color:#fff}

.mensaje{
padding:13px 16px;
border-radius:8px;
margin-bottom:20px;
}

.success{
background:#dcf2e3;
color:#176633;
}

.error{
background:#fde4e4;
color:#991d1d;
}

.titulo-tabla{
display:flex;
justify-content:space-between;
align-items:center;
}

.titulo-tabla span{
background:#edf4ef;
padding:7px 12px;
border-radius:20px;
}

.tabla-contenedor{
overflow-x:auto;
}

table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

th,td{
padding:12px 10px;
border-bottom:1px solid #e4e9e6;
text-align:center;
white-space:nowrap;
}

th{
background:#edf5ef;
color:#315740;
}

.acciones-tabla{
display:flex;
gap:6px;
justify-content:center;
align-items:center;
}

.form-inline{
display:inline;
margin:0;
}

.badge{
display:inline-block;
padding:6px 10px;
border-radius:15px;
font-size:12px;
font-weight:bold;
}

.badge.admin{
background:#eee6ff;
color:#6333a8;
}

.badge.usuario{
background:#e9f1ff;
color:#2d5f9c;
}

.badge.activo{
background:#dff4e6;
color:#176633;
}

.badge.inactivo{
background:#fbe4e4;
color:#9b2b2b;
}

.login{
min-height:100vh;
display:grid;
place-items:center;
padding:20px;
}

.login-card{
width:min(420px,100%);
}

.login-btn{
width:100%;
}

@media(max-width:900px){
.formulario{
grid-template-columns:repeat(2,1fr);
}
}

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

.encabezado{
flex-direction:column;
align-items:flex-start;
}

.acciones-tabla{
flex-direction:column;
}

.filtro-fecha {
    margin-bottom: 20px;
    padding: 15px;
    background: #f3f7f4;
    border-radius: 10px;
}

.filtro-fecha form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filtro-fecha label {
    font-weight: bold;
}

.filtro-fecha input[type="date"] {
    padding: 10px 12px;
    border: 1px solid #ccd6d0;
    border-radius: 8px;
    font-size: 14px;
}

}