body {font-family: Arial, sans-serif;margin:0;padding:0;background:#f5f6fa;color:#222;}
header {background:#1f4e79;color:#fff;padding:1rem;}
header h1 {margin:0;font-size:1.4rem;}
nav ul {list-style:none;margin:0;padding:0;display:flex;gap:1rem;}
nav a {color:#fff;text-decoration:none;font-weight:bold;}
nav a:hover {text-decoration:underline;}
main {padding:1rem 1.25rem;}
/* Estilos para formularios */
form {background:#fff;padding:1rem 1.2rem;border-radius:6px;max-width:620px;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
input[type=text], input[type=password], input[type=email], input[type=date], input[type=file], select {
    width:100%;
    padding:0.55rem;
    margin:0.35rem 0 0.8rem;
    border:1px solid #bbb;
    border-radius:4px;
    font-size:14px;
    font-family:inherit;
    box-sizing:border-box;
    display:block;
    clear:both;
}
select {
    background:#fff;
    cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23666" d="M6 8L0 2h12z"/></svg>');
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:12px 8px;
    padding-right:35px;
    width:100%;
    display:block;
}
select:focus, input:focus {outline:none;border-color:#1f4e79;box-shadow:0 0 0 2px rgba(31,78,121,0.2);}
label {display:block;font-weight:bold;margin-top:0.5rem;color:#333;margin-bottom:0.2rem;clear:both;}

/* Asegurar que todos los elementos del formulario estén en bloque */
form > * {
    display:block;
    width:100%;
}
form > input, form > select {
    margin-bottom:0.8rem;
}
form > label {
    margin-bottom:0.2rem;
    width:auto;
}
button, .btn {background:#1f4e79;color:#fff;border:none;padding:0.6rem 1.1rem;border-radius:4px;cursor:pointer;font-size:0.95rem;}
button:hover, .btn:hover {background:#2d6aa4;}
.table-wrapper {overflow-x:auto;background:#fff;padding:1rem;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,0.08);}
table {width:100%;border-collapse:collapse;font-size:0.9rem;}
th, td {padding:0.55rem 0.6rem;border:1px solid #ddd;text-align:left;}
th {background:#eee;}
.alert {padding:0.7rem 0.9rem;border-radius:4px;margin-bottom:1rem;}
.alert-error {background:#ffe2e2;color:#7d0000;border:1px solid #ffb1b1;}
.alert-success {background:#e2ffe9;color:#004d1a;border:1px solid #9ae3b0;}
.actions a {margin-right:0.4rem;}
.search-bar {display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.badge {display:inline-block;padding:0.15rem 0.45rem;background:#1f4e79;color:#fff;border-radius:3px;font-size:0.7rem;}
.pagination {margin-top:1rem;display:flex;gap:0.4rem;flex-wrap:wrap;align-items:center;}
.pagination .page, .pagination a.page {padding:0.35rem 0.6rem;border:1px solid #1f4e79;border-radius:4px;text-decoration:none;color:#1f4e79;background:#fff;font-size:0.85rem;}
.pagination .page.current {background:#1f4e79;color:#fff;font-weight:bold;}

/* ===== ESTILOS PARA LOGIN CENTRADO ===== */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    box-sizing: border-box;
}

.login-card {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-card h2 {
    color: #333;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
}

.login-form {
    text-align: left;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.login-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.login-btn:active {
    transform: translateY(0);
}

/* Alertas de error mejoradas */
.alert.alert-error {
    background-color: #fee;
    color: #c33;
    padding: 12px;
    border-radius: 5px;
    border-left: 4px solid #c33;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Responsive para móviles */
@media (max-width: 480px) {
    .login-container {
        padding: 10px;
    }
    
    .login-card {
        padding: 30px 20px;
        margin: 0 10px;
    }
    
    .login-card h2 {
        font-size: 20px;
    }
    
    .form-group input,
    .login-btn {
        font-size: 14px;
    }
}