/* Ajustes sobre el CSS de OpenWA (owa.css) para las columnas propias del panel ISUP */
.logs-page .logs-table { min-width: 760px; }
.logs-page .logs-table .table-row { grid-template-columns: 180px 90px 1fr 110px; }
.logs-page .logs-table .message {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: JetBrains Mono Variable, JetBrains Mono, monospace;
  font-size: .75rem;
  color: var(--text-secondary);
}
.logs-page .filters-bar { flex-wrap: wrap; }
@media (width <= 600px) {
  .logs-page .filters-bar { flex-direction: column; gap: .75rem; }
  .logs-page .search-input { max-width: none; }
  .logs-page .filter-group { justify-content: space-between; width: 100%; }
}
.sessions-page .card-header h3 { font-family: JetBrains Mono Variable, JetBrains Mono, monospace; font-size: 1rem; }
.sessions-page .btn-secondary, .logs-page .btn-secondary { display: inline-flex; align-items: center; gap: .5rem; }
.spin-slow, .animate-spin { animation: isup-spin 1s linear infinite; }
@keyframes isup-spin { to { transform: rotate(360deg); } }
.empty-table-state { padding: 3rem 1rem; text-align: center; color: var(--text-muted); }
.empty-table-state svg { margin-bottom: .75rem; }
.empty-table-state h3 { color: var(--text-primary); margin: 0 0 .25rem; }
.empty-table-state p { margin: 0; font-size: .875rem; }

/* el atributo hidden debe ganar a display:flex de .error-banner / .pagination */
[hidden] { display: none !important; }
/* los contenedores del selector personalizado ocupan el ancho disponible, como CustomSelect en OpenWA */
.login-language > div, .filter-group > div { flex: 1; min-width: 0; display: flex; }
.login-help .help-link { color: var(--primary-text); font-weight: 600; }

/* ------------------------------------------------------------------ Gestion: selector de equipo, formularios, tablas */
.device-picker { padding: .75rem 1rem .25rem; display: flex; flex-direction: column; gap: .35rem; }
.device-picker-label { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.device-picker .filter-group { padding: 0 .75rem; }
.device-picker .custom-select-trigger { font-size: .8125rem; padding: .55rem 0; }
.sidebar.collapsed .device-picker { display: none; }
.sessions-page.modal-host { padding: 0; width: 0; height: 0; }
.sessions-page .modal.modal-wide { max-width: 820px; }
.modal-body .form-field { margin-bottom: 1rem; }
.modal-body .form-field > label, .page-form .form-field > label { display: block; font-size: .8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .4rem; }
.sessions-page .modal-body select, .sessions-page .modal-body textarea, .page-form select, .page-form textarea, .page-form input:not([type=checkbox]), .form-select {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-light); color: var(--text-primary);
  box-sizing: border-box; width: 100%; padding: .75rem 1rem; font-size: .9375rem; font-family: inherit;
}
.sessions-page .modal-body textarea, .page-form textarea { min-height: 7rem; font-family: JetBrains Mono Variable, JetBrains Mono, monospace; font-size: .8125rem; }
.sessions-page .modal-body input.error { border-color: var(--error); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
@media (width <= 600px) { .form-grid { grid-template-columns: 1fr; } }
.check-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .9rem; }
.check-row input { width: auto !important; }
.json-view { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 0; max-height: 26rem; overflow: auto;
  font-family: JetBrains Mono Variable, JetBrains Mono, monospace; font-size: .75rem; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); }
.panel-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 1.5rem; margin-bottom: 1.5rem; }
.panel-card h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.panel-card .row-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (width <= 900px) { .cards-2 { grid-template-columns: 1fr; } }
.page-form .toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1.25rem; }
.page-form .toolbar .form-field { margin: 0; flex: 1 1 11rem; }
.btn-sm-text { cursor: pointer; background: var(--bg-light); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: .35rem .65rem; font-size: .75rem; font-weight: 600; font-family: inherit; }
.btn-sm-text:hover { background: var(--bg-white); color: var(--text-primary); border-color: var(--text-muted); }
.btn-sm-text.danger { color: var(--error-text); }
.btn-sm-text.danger:hover { background: #ef44441f; border-color: #ef44444d; }
.dt-wrap { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dt th { text-align: left; background: var(--bg-light); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; font-weight: 700; padding: .85rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dt td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dt tr:last-child td { border-bottom: none; }
.dt tbody tr:hover { background: #25d3660d; }
.dt .mono { font-family: JetBrains Mono Variable, JetBrains Mono, monospace; font-size: .8125rem; }
.dt .actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.dt .muted { color: var(--text-muted); }
.pagination-host { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.pagination-host button { padding: .5rem .85rem; border: 1px solid var(--border); background: var(--bg-white); color: var(--text-primary); border-radius: 8px; cursor: pointer; font-family: inherit; }
.pagination-host button.active { background: var(--primary); color: #0f172a; border-color: var(--primary); font-weight: 700; }
.pagination-host button:disabled { opacity: .45; cursor: not-allowed; }
.pagination-host .page-numbers { display: flex; gap: .35rem; }
/* "Ultima llamada" */
.call-dock { position: fixed; right: 1rem; bottom: 1rem; z-index: 150; width: min(560px, calc(100vw - 2rem)); font-size: .75rem; }
.call-dock .dock-toggle { width: 100%; text-align: left; background: var(--bg-white); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .85rem;
  box-shadow: var(--shadow-md); cursor: pointer; font-family: JetBrains Mono Variable, JetBrains Mono, monospace; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-dock .dock-body { display: none; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); margin-bottom: .4rem; position: absolute; bottom: 100%; left: 0; right: 0; }
.call-dock.open .dock-body { display: grid; grid-template-columns: 11rem 1fr; max-height: 55vh; }
@media (width <= 600px) { .call-dock.open .dock-body { grid-template-columns: 1fr; } .call-dock .dock-list { max-height: 6rem; } }
.dock-list { overflow: auto; border-right: 1px solid var(--border); }
.dock-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: .4rem .55rem; cursor: pointer; color: var(--text-secondary); font-family: inherit; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-item:hover { background: var(--bg-light); }
.dock-json { margin: 0; padding: .75rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .7rem; color: var(--text-primary); }
.dock-st { font-weight: 700; padding: 0 .3rem; border-radius: 4px; }
.dock-st.ok { color: var(--success-text); background: #22c55e1a; }
.dock-st.bad { color: var(--error-text); background: #ef44441f; }
.main-content { padding-bottom: 4rem; }

.device-picker .filter-group { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-white); padding: 0 .75rem; }
.device-picker .filter-group svg { color: var(--text-muted); flex-shrink: 0; }
.dt .nowrap { white-space: nowrap; }