body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:#111;
    color:#fff;
    margin:0;
    padding:0;
}

.contenedor {
    max-width:900px;
    margin:50px auto 100px auto; /* espacio inferior para footer */
    background:#1c1c1c;
    padding:30px 25px;
    border-radius:15px;
    box-shadow:0 8px 30px rgba(212,175,55,0.3);
}

h1 {
    text-align:center;
    color:#d4af37;
    margin-bottom:20px;
}

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

th, td {
    padding:12px;
    text-align:left;
}

th {
    background:#d4af37;
    color:#000;
    font-weight:normal;
    border-bottom:2px solid #b38f20;
}

.vigente { background:#2a2a2a; }  /* gris oscuro fila vigente */
.vencida { background:#660000; }  /* rojo oscuro fila vencida */
.pagada  { background:#006600; }  /* verde fila pagada */

input[type="text"], input[type="password"] {
    width:100%;
    padding:12px;
    margin:10px 0;
    border-radius:8px;
    border:1px solid #d4af37;
    background:#222;
    color:#fff;
    font-size:15px;
}

input[type="text"]:focus, input[type="password"]:focus {
    outline:none;
    border-color:#fff;
}

button, input[type="submit"], .btn-pagar {
    width:100%;
    padding:16px;
    margin-top:15px;
    font-size:16px;
    font-weight:600;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:0.3s;
}

.btn-pagar {
    background:#d4af37;
    color:#000;
}

.btn-pagar:hover:not(.disabled) {
    background:#fff;
    color:#d4af37;
}

.btn-pagar.disabled {
    background:#333;
    color:#888;
    cursor:not-allowed;
}

#resumen {
    margin-top:15px;
    font-weight:bold;
    font-size:16px;
}

.error {
    color:#ff4d4d;
    margin-top:12px;
    font-weight:500;
    text-align:center;
}

/* Links */
a {
    color:#d4af37;
    text-decoration:none;
    transition:0.3s;
}

a:hover {
    color:#fff;
}

/* Footer corporativo fijo */
.site-footer {
    width:100%;
    text-align:center;
    background:#111;
    color:#d4af37;
    padding:10px 0;
    font-size:12px;
    border-top:2px solid #d4af37;
    box-shadow:0 -2px 5px rgba(212,175,55,0.3);
    position:fixed;
    bottom:0;
}

/* Resumen de total y número de deudas */
#resumen span {
    color:#d4af37;
}

/* Contenedores de mensajes */
p, .security-message {
    background:#222;
    padding:12px;
    border-radius:8px;
    text-align:center;
    margin-top:15px;
}

@media(max-width:450px){
    .contenedor { padding:20px; }
    .site-footer { font-size:11px; padding:8px 0; }
    #resumen { font-size:14px; }
}