:root {
    --bg: #0b1229;
    --bg-card: #131c3a;
    --text: #e8ecf7;
    --text-dim: #9aa5c7;
    --accent: #4f7cff;
    --accent-hover: #6b91ff;
    --border: #262f57;
}

* { box-sizing: border-box; }

body {
    background: var(--bg) url('/img/fondo.jpg') center top / cover no-repeat;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 2.5rem 1.25rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.5;
}

.logo { margin-bottom: 1rem; }
.logo img { display: block; max-width: 150px; margin: 0 auto; }

h1, h2, h3 { text-align: center; }
h1 { font-size: 1.6rem; margin-bottom: 1.25rem; }
h2 { font-size: 1.2rem; color: var(--text-dim); margin-top: 2rem; }

p, ul, form, table, #feed, .card {
    width: 100%;
    max-width: 440px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

button, input[type=submit] {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.65rem 1.3rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin: 0.5rem auto 0;
}
button:hover, input[type=submit]:hover { background: var(--accent-hover); }
button.sugerencia {
    display: inline-block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 400;
    padding: 0.3rem 0.7rem;
    margin: 0.2rem 0.3rem 0.2rem 0;
    font-size: 0.9rem;
}
button.sugerencia:hover { background: var(--border); }

input[type=text], input[type=email], input[type=number], input[type=password],
input[type=file], input[type=tel], select, textarea {
    width: 100%;
    padding: 0.55rem;
    margin-top: 0.3rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); }

label { display: block; margin-bottom: 1rem; }

table { border-collapse: collapse; background: var(--bg-card); border-radius: 8px; overflow: hidden; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; }
th { color: var(--text-dim); }

textarea[readonly] { background: var(--bg-card); color: var(--text-dim); }

hr { width: 100%; max-width: 440px; border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

img { max-width: 100%; border-radius: 8px; }

small { color: var(--text-dim); }