/* Sistema visual ampliado del panel de plataforma. Se carga después de platform.css. */
:root { --tb-success:#059669; --tb-warn:#d97706; --tb-danger:#dc2626; --tb-sidebar-collapsed:78px; }
body.platform-body { -webkit-font-smoothing:antialiased; }
:focus-visible { outline:2px solid var(--tb-blue-2); outline-offset:2px; }

/* Breadcrumbs */
.tb-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; padding:0; list-style:none; color:var(--tb-muted); font-size:.76rem; font-weight:600; }
.tb-crumbs a { color:var(--tb-muted); text-decoration:none; }
.tb-crumbs a:hover { color:var(--tb-blue); }
.tb-crumbs li + li::before { content:"/"; margin-right:6px; color:#c3ccd8; }
.tb-crumbs li[aria-current] { color:var(--tb-ink); }

/* Sidebar colapsable (escritorio) */
.platform-sidebar, .platform-main { transition:width .2s ease, margin-left .2s ease, transform .25s ease; }
.nav-caption, .platform-nav-link span, .brand-word, .brand-product { white-space:nowrap; }
@media (min-width:992px) {
    body.sidebar-collapsed .platform-sidebar { width:var(--tb-sidebar-collapsed); padding-inline:12px; }
    body.sidebar-collapsed .platform-main { margin-left:var(--tb-sidebar-collapsed); }
    body.sidebar-collapsed .platform-brand > span:last-child,
    body.sidebar-collapsed .platform-nav-link span,
    body.sidebar-collapsed .logout-link span,
    body.sidebar-collapsed .sidebar-environment { display:none; }
    body.sidebar-collapsed .nav-caption { height:1px; margin:14px 10px; overflow:hidden; background:rgba(255,255,255,.08); font-size:0; }
    body.sidebar-collapsed .platform-nav-link, body.sidebar-collapsed .logout-link { justify-content:center; padding-inline:0; }
    body.sidebar-collapsed .platform-brand { justify-content:center; padding-inline:0; }
}
.collapse-toggle { display:none; }
@media (min-width:992px) { .collapse-toggle { display:inline-grid; } }
.sidebar-toggle, .collapse-toggle { width:42px; height:42px; place-items:center; border:1px solid var(--tb-line); border-radius:12px; background:#fff; color:var(--tb-navy); }
.sidebar-toggle:hover, .collapse-toggle:hover { color:var(--tb-blue); border-color:#bfd2f5; }
.collapse-toggle svg { width:19px; }

/* Topbar: búsqueda, campana y menú de usuario */
.topbar-search { margin-left:auto; }
.topbar-search input { cursor:not-allowed; }
.topbar-search .soon { position:absolute; top:50%; right:10px; transform:translateY(-50%); padding:2px 8px; border-radius:99px; background:#e8eef7; color:#5b6b82; font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.topbar-bell { position:relative; }
.bell-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:99px; background:var(--tb-warn); color:#fff; font-size:.62rem; font-weight:800; border:2px solid #fff; }
.tb-dropdown { min-width:290px; padding:8px; border:1px solid var(--tb-line); border-radius:14px; box-shadow:0 18px 45px rgba(15,31,55,.16); }
.tb-dropdown .dropdown-item { border-radius:9px; padding:9px 12px; font-size:.82rem; }
.tb-dropdown .dropdown-header { color:#8491a5; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.user-trigger { display:flex; align-items:center; gap:11px; padding:4px 8px 4px 4px; border:1px solid transparent; border-radius:14px; background:transparent; text-align:left; }
.user-trigger:hover, .user-trigger[aria-expanded="true"] { border-color:var(--tb-line); background:#f8fafc; }
.user-trigger .chev { width:15px; color:#94a3b8; }

/* Botones y estados */
.btn-techbot.btn-sm, .btn-soft.btn-sm { border-radius:9px; }
.btn-danger-soft { border:1px solid #f5cccc; border-radius:11px; background:#fff; color:#b42318; font-weight:650; }
.btn-danger-soft:hover { background:#fff3f2; border-color:#eea6a1; color:#912018; }
.btn.is-loading { position:relative; pointer-events:none; opacity:.75; }
.btn.is-loading::after { content:""; display:inline-block; width:.9em; height:.9em; margin-left:.55em; vertical-align:-.12em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:tb-spin .7s linear infinite; }
@keyframes tb-spin { to { transform:rotate(360deg); } }
.status-vence-pronto { color:#a15c07; background:#fff4d6; }
.status-vencido { color:#b42318; background:#fee9e7; }
.status-inactivo { color:#64748b; background:#eef2f6; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px; background:#f1f5fb; color:#41546f; font-size:.68rem; font-weight:700; }
.chip-list { display:flex; flex-wrap:wrap; gap:6px; }

/* Barras de herramientas y tablas */
.tb-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 22px; border-bottom:1px solid #edf1f6; }
.tb-toolbar .grow { flex:1 1 260px; position:relative; }
.tb-toolbar .grow svg { position:absolute; top:50%; left:14px; width:17px; color:#94a3b8; transform:translateY(-50%); pointer-events:none; }
.tb-toolbar .grow input { padding-left:42px; }
.text-muted-sm { color:#8491a5; font-size:.72rem; }
.num-col { font-variant-numeric:tabular-nums; }
.row-actions { display:inline-flex; gap:6px; align-items:center; }
.order-btns { display:inline-flex; flex-direction:column; gap:2px; }
.order-btns button { width:26px; height:18px; display:grid; place-items:center; padding:0; border:1px solid var(--tb-line); border-radius:6px; background:#fff; color:#64748b; }
.order-btns button:hover:not(:disabled) { color:var(--tb-blue); border-color:#bfd2f5; }
.order-btns button:disabled { opacity:.35; }
.order-btns svg { width:11px; }

/* Switch de estado */
.tb-switch.form-check-input { width:2.6em; height:1.4em; margin:0; cursor:pointer; border-color:#cbd5e1; background-color:#cbd5e1; }
.tb-switch.form-check-input:checked { background-color:var(--tb-success); border-color:var(--tb-success); }
.tb-switch.form-check-input:focus { box-shadow:0 0 0 .2rem rgba(5,150,105,.18); }

/* Tarjetas de plan / KPI compactos */
.plan-tile { height:100%; display:flex; flex-direction:column; }
.plan-tile .panel-card-body { flex:1; }
.plan-tile.is-inactive { opacity:.8; }
.plan-tile.is-inactive .metric-icon { color:#64748b; background:#eef2f6; }
.plan-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.plan-fact { padding:10px 12px; border:1px solid var(--tb-line); border-radius:12px; background:#fbfcfe; }
.plan-fact b { display:block; color:var(--tb-ink); font-size:1.05rem; }
.plan-fact span { color:#8491a5; font-size:.68rem; font-weight:700; }
.metric-card.compact { min-height:120px; padding:17px; }
.metric-card.compact .metric-value { margin-top:12px; font-size:1.65rem; }

/* Tabs de detalle */
.tb-tabs { display:flex; gap:4px; padding:6px; margin-bottom:20px; overflow-x:auto; background:#fff; border:1px solid var(--tb-line); border-radius:14px; scrollbar-width:thin; }
.tb-tabs .nav-link { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:0; border-radius:10px; color:#64748b; font-size:.82rem; font-weight:700; white-space:nowrap; }
.tb-tabs .nav-link svg { width:16px; }
.tb-tabs .nav-link:hover { color:var(--tb-blue); background:#f5f8ff; }
.tb-tabs .nav-link.active { color:#fff; background:var(--tb-blue); box-shadow:0 6px 16px rgba(18,104,255,.22); }

/* Hero de organización */
.detail-hero .status-badge { background:rgba(255,255,255,.14); color:#fff; }
.detail-hero .status-badge.status-activo::before { background:#34d399; }
.detail-actions .btn.disabled, .detail-actions .btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }

/* Auditoría y actividad */
.audit-detail { max-width:520px; }
.audit-detail summary { cursor:pointer; color:var(--tb-blue); font-size:.74rem; font-weight:700; }
.audit-detail pre { margin:8px 0 0; padding:10px 12px; max-height:220px; overflow:auto; border-radius:10px; background:#f6f8fb; color:#334155; font-size:.7rem; white-space:pre-wrap; }
.timeline { margin:0; padding:0; list-style:none; }
.timeline li { position:relative; padding:0 0 18px 24px; border-left:2px solid #e3eaf4; margin-left:6px; }
.timeline li::before { content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--tb-blue-2); }
.timeline li:last-child { border-left-color:transparent; padding-bottom:0; }

/* Formularios: validación Bootstrap en lugar de avisos nativos */
.form-control.is-invalid, .form-select.is-invalid { border-color:var(--tb-danger); background-image:none; padding-right:.75rem; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow:0 0 0 .2rem rgba(220,38,38,.12); }
.invalid-feedback { font-size:.72rem; font-weight:600; }
.form-label .req { color:var(--tb-danger); margin-left:2px; }
.modal-content { border:0; border-radius:20px; box-shadow:0 28px 70px rgba(7,17,31,.28); }
.modal-header { padding:20px 24px; border-bottom:1px solid #edf1f6; }
.modal-title { display:flex; align-items:center; gap:12px; color:var(--tb-ink); font-size:1.02rem; font-weight:780; }
.modal-title .form-section-icon { width:36px; height:36px; }
.modal-body { padding:22px 24px; }
.modal-footer { padding:16px 24px; background:#fbfcfe; border-top:1px solid #edf1f6; border-radius:0 0 20px 20px; gap:10px; }
.modal-footer > * { margin:0; }
.kv { display:grid; grid-template-columns:170px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid #edf1f6; font-size:.82rem; margin:0; }
.kv:last-child { border-bottom:0; }
.kv dt { color:#8a97a9; font-weight:700; }
.kv dd { margin:0; color:#273449; font-weight:600; word-break:break-word; }

/* Skeleton */
.skeleton { position:relative; overflow:hidden; border-radius:8px; background:#eaf0f7; min-height:14px; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:tb-shimmer 1.3s infinite; }
@keyframes tb-shimmer { to { transform:translateX(100%); } }

/* Tablas → tarjetas en móvil */
@media (max-width:767.98px) {
    .saas-table.stack thead { display:none; }
    .saas-table.stack tbody tr { display:block; padding:14px 16px; border-bottom:1px solid #edf1f6; }
    .saas-table.stack tbody td { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:6px 0 !important; border:0 !important; text-align:right; }
    .saas-table.stack tbody td::before { content:attr(data-label); flex:0 0 auto; color:#8491a5; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-align:left; }
    .saas-table.stack tbody td:first-child { display:block; text-align:left; padding-top:0 !important; }
    .saas-table.stack tbody td:first-child::before { display:none; }
    .saas-table.stack tbody tr:hover { background:#fff; }
    .saas-table.stack td[colspan] { display:block; text-align:center; }
    .saas-table.stack td[colspan]::before { display:none; }
    .tb-toolbar { padding:14px 16px; }
    .kv { grid-template-columns:1fr; gap:3px; }
    .modal-dialog { margin:.6rem; }
}
@media (prefers-reduced-motion:reduce) { *, ::before, ::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Tablas densas: sin cortes raros en badges y celdas */
.status-badge, .plan-badge, .chip, .domain-pill { white-space:nowrap; }
.saas-table > :not(caption) > * > * { padding:14px 14px; }
.org-cell { min-width:170px; }

/* Menús de acciones: siempre por encima de cards, tablas y barra superior */
.dropdown-menu.tb-dropdown { z-index:1050; }
.saas-table .dropdown-menu { min-width:210px; }
.brand-mark.has-logo { background:#fff; padding:4px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.brand-mark .brand-logo { width:100%; height:100%; object-fit:contain; border-radius:9px; }
.logo-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.logo-slot { display:flex; flex-direction:column; gap:10px; }
.logo-slot .slot-label { color:#8491a5; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.logo-preview { min-height:150px; display:grid; place-items:center; padding:18px; border:1px dashed #cdd8e6; border-radius:14px; background:repeating-conic-gradient(#f4f7fb 0% 25%, #fff 0% 50%) 50% / 18px 18px; }
.logo-preview img { max-width:100%; max-height:120px; object-fit:contain; }
.logo-preview.empty { color:#8491a5; font-size:.8rem; text-align:center; }
.logo-preview.is-new { border-style:solid; border-color:#9dbcf3; }