:root {
    --primary-red: #b10000;
    --crema: #f5e4c8;
    --bg: #fdf6ec;
    --header-height: 80px;
}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Inter', system-ui; }

/* BODY */
body { background: var(--bg); min-height:100vh; display:flex; flex-direction:column; }

/* HEADER */
.header {
    position: fixed; top:0; left:0;
    width:100%; height: var(--header-height);
    background: var(--primary-red); color:#fff;
    display:flex; align-items:center; padding:0 20px; z-index:1000;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
}
.header img { height:50px; margin-right:15px; }
.header h1 { font-size:20px; }

/* CONTAINER FORMULARIO */
.container {
    max-width: 600px; 
    margin: 120px auto 50px auto; 
    background: #fff; 
    padding: 30px 25px; 
    border-radius: 15px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.container:hover { transform: translateY(-3px); box-shadow:0 12px 25px rgba(0,0,0,0.15); }

h2 { color:var(--primary-red); margin-bottom: 25px; text-align:center; }

label { display:block; margin-bottom:5px; font-weight:600; color:#333; }
input { width:100%; padding:12px; margin-bottom:20px; border-radius:8px; border:1px solid #ccc; font-size:15px; transition: border-color 0.3s; }
input:focus { border-color: var(--primary-red); outline:none; }

button { width:100%; padding:14px; background:var(--primary-red); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:16px; font-weight:bold; transition: background 0.3s; }
button:hover { background:#8a0000; }

.alert { padding:12px; background:#d4edda; color:#155724; border-radius:6px; margin-bottom:20px; text-align:center; font-weight:600; }

a.logout-link { color:var(--primary-red); text-decoration:none; font-weight:bold; transition:color 0.3s; }
a.logout-link:hover { color:#8a0000; }

@media(max-width:650px){
    .container { margin:100px 20px; padding:20px; }
}