* { box-sizing: border-box; }
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #e8edf4;
    margin: 0;
    color: #1f2a37;
}
.topbar {
    background: #212d55;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topbar a { color: #fff; text-decoration: none; margin-left: 16px; }
.container {
    max-width: 960px;
    margin: 30px auto;
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.auth-box {
    max-width: 420px;
    margin: 60px auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
h1, h2 { color: #212d55; }
label { display: block; margin-top: 12px; font-weight: bold; font-size: 14px; }
input, select, textarea {
font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #9bb0c6;
    border-radius: 4px;
    font-size: 14px;
}
button, .btn {
font-family: Arial, Helvetica, sans-serif;
    margin-top: 18px;
    background: #212d55;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}
button:hover, .btn:hover { background: #17203c; }
.alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }
.alert-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c2c0; }
.alert-success { background: #e6f4ea; color: #1e7d34; border: 1px solid #b7e1c1; }
.alert-warning { background: #fff4e5; color: #8a5a00; border: 1px solid #ffdca8; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #dbe3ec; font-size: 14px; }
th { background: #dce6f2; color: #212d55; }
.badge { display: inline-block; white-space: nowrap; padding: 3px 8px; border-radius: 10px; font-size: 12px; color: #fff; }
.badge-ok { background: #2e9e4d; }
.badge-warn { background: #d99a00; }
.badge-danger { background: #cc3333; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }


/* === Logo FiberLab en el portal de clientes === */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.marca-portal { display:flex; align-items:center; gap:10px; font-weight:700; }
.marca-portal img { height:32px; width:auto; display:block; background:#fff; border-radius:4px; padding:2px 5px; }
.logo-portal { text-align:center; margin:22px auto 6px auto; }
.logo-portal img { width:220px; max-width:70%; height:auto; }