:root { --tc-primario: #1f4e79; --tc-primario-oscuro: #163a5a; --tc-fondo: #f4f6f9; }
body { background: var(--tc-fondo); }
.tc-acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.tc-acceso-caja { width: 100%; max-width: 420px; padding: 16px; }
.tc-marca { font-size: 1.5rem; font-weight: 700; color: var(--tc-primario); }
.tc-qr svg { width: 200px; height: 200px; }
.btn-primary { background-color: var(--tc-primario); border-color: var(--tc-primario); }
.btn-primary:hover { background-color: var(--tc-primario-oscuro); border-color: var(--tc-primario-oscuro); }
.tc-envoltura { display: flex; min-height: 100vh; }
.tc-lateral { width: 230px; flex: none; background: var(--tc-primario-oscuro); color: #fff; }
.tc-lateral a { color: #d7e3ef; text-decoration: none; display: block; padding: .55rem 1rem; border-radius: .35rem; }
.tc-lateral a:hover, .tc-lateral a.active { background: rgba(255,255,255,.12); color: #fff; }
.tc-contenido { flex: 1; min-width: 0; }
.tc-tabla-scroll { max-height: 70vh; overflow: auto; }
.tc-tabla-scroll thead th { position: sticky; top: 0; background: #f8f9fa; z-index: 1; }
.tc-estado-vacio { text-align: center; color: #6c757d; padding: 2rem 1rem; }
.tc-tarjeta-instancia { border-left: 5px solid #198754; }
.tc-tarjeta-instancia.tc-caida { border-left-color: #dc3545; }
.tc-tarjeta-instancia.tc-aviso { border-left-color: #ffc107; }
.tc-modal-fondo { background: rgba(0,0,0,.5); }
.tc-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 2000; width: 340px; max-width: calc(100vw - 2rem); }
.tc-secreto { font-family: monospace; word-break: break-all; }
@media (max-width: 767px) { .tc-envoltura { flex-direction: column; } .tc-lateral { width: 100%; } }


/* ───────── Aviso de reconexión de Blazor Server (propio, para no depender de un <style> en línea; ver la política de contenido) ───────── */
#components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .6); color: #fff; align-items: center; justify-content: center; text-align: center; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
#components-reconnect-modal .tc-reconexion-caja { background: #1f2937; border-radius: .5rem; padding: 1.25rem 1.5rem; max-width: 28rem; }
#components-reconnect-modal .tc-reconexion-caja a { color: #fff; text-decoration: underline; }
#components-reconnect-modal .tc-reconexion-intentando,
#components-reconnect-modal .tc-reconexion-fallo,
#components-reconnect-modal .tc-reconexion-rechazo { display: none; }
#components-reconnect-modal.components-reconnect-show .tc-reconexion-intentando,
#components-reconnect-modal.components-reconnect-failed .tc-reconexion-fallo,
#components-reconnect-modal.components-reconnect-rejected .tc-reconexion-rechazo { display: block; }