/* EoIPv6 Sync — estilos propios (sin estilos inline: CSP estricta) */
:root { --eo-accent: #0d6efd; }
body { background: #f4f6f9; }
.navbar-brand small { font-size: .7rem; opacity: .7; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { background: #fff; font-weight: 600; }
.kpi { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.kpi-label { font-size: .8rem; text-transform: uppercase; color: #6c757d; letter-spacing: .03em; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; word-break: break-all; }
.state { display: inline-block; padding: .15rem .5rem; border-radius: 1rem; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.state-ok { background: #d1e7dd; color: #0f5132; }
.state-bad { background: #f8d7da; color: #842029; }
.state-warn { background: #fff3cd; color: #664d03; }
.state-idle { background: #e2e3e5; color: #41464b; }
.state-info { background: #cfe2ff; color: #084298; }
.table td, .table th { vertical-align: middle; }
.table-sm td { font-size: .9rem; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.reason { font-size: .82rem; color: #495057; }
.secret-box { background: #212529; color: #ffc107; padding: .6rem .9rem; border-radius: .4rem; font-size: 1.05rem; }
.form-text-err { color: #dc3545; font-size: .85rem; }
.nav-tabs .nav-link { cursor: pointer; }
.pre-wrap { white-space: pre-wrap; }
@media (max-width: 576px) { .kpi { font-size: 1.4rem; } .hide-sm { display: none; } }