@media(min-width:761px){
  .content:has(.settings-workspace){
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 38px 16px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }
  .settings-workspace{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .settings-tabs{
    flex-shrink: 0 !important;
    margin-bottom: 14px !important;
  }
  #settings-panel{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
  }
}
.content:has(.settings-workspace){padding-top:12px}
.settings-tabs{margin-bottom:18px}
.settings-intro{margin-bottom:20px;flex-shrink:0}
.settings-intro h2{font-size:20px;margin:0 0 7px}
.settings-intro p{font-size:13px;color:var(--muted);margin:0}
.settings-workspace .card-body>button{margin:4px 4px 4px 0}
.settings-workspace .card-body{font-size:14px}
.settings-workspace .card-header{flex-wrap:wrap}
.maps-connection-card{margin-bottom:20px}.maps-connection-card .card-header h2{display:flex;align-items:center;gap:9px}.maps-connection-card .card-body{display:grid;gap:14px}.maps-key-form{display:flex;align-items:flex-end;gap:10px;max-width:760px}.maps-key-control{position:relative;flex:1;min-width:0}.maps-key-label{display:flex;align-items:center;gap:7px}.maps-key-label label{font-size:12px;font-weight:600}.maps-key-help{width:20px;height:20px;min-height:20px;flex-basis:20px;font-size:10px}.maps-key-form input{display:block;width:100%;margin-top:7px}.maps-key-form>button{flex-shrink:0}.maps-key-tooltip{position:absolute;z-index:30;left:0;top:29px;width:min(360px,calc(100vw - 40px));padding:14px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:var(--radius-md, 8px);box-shadow:0 10px 30px #17383d24;color:var(--ink)}.maps-key-tooltip[hidden]{display:none}.maps-key-tooltip>strong{display:block;font-size:13px;margin-bottom:9px}.maps-key-tooltip ol{margin:0;padding-left:20px;font-size:11px;line-height:1.55}.maps-key-tooltip li+li{margin-top:5px}.maps-key-tooltip code{font-size:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-xs, 4px);padding:2px 4px;overflow-wrap:anywhere}.maps-key-guide-links{display:grid;gap:6px;border-top:1px solid var(--line);margin-top:11px;padding-top:10px}.maps-key-guide-links a{font-size:11px;font-weight:600}.maps-connection-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.maps-connection-note{font-size:11px;color:var(--muted);line-height:1.6;margin:0}.settings-connection-loading{margin-bottom:20px;color:var(--muted)}
.settings-pending{display:flex;align-items:flex-start;gap:20px;padding:30px;min-height:210px}
.settings-feature-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;background:#fff;border:1px solid var(--line);color:var(--primary);border-radius:var(--radius-lg, 12px)}
.settings-feature-icon .icon{width:25px;height:25px}
.settings-pending h2{font-size:21px;margin:16px 0 9px}
.settings-pending p{max-width:650px;font-size:14px;line-height:1.7;color:var(--muted);margin:0}
@media(max-width:760px){.settings-tabs{margin-bottom:20px}.settings-tabs button{padding:13px 12px;font-size:12px}.settings-pending{padding:20px;gap:14px}.settings-feature-icon{flex-basis:40px;height:40px;width:40px}.settings-pending h2{font-size:19px}.settings-pending p{font-size:13px}.maps-key-form{align-items:stretch;flex-direction:column}.maps-key-form input{font-size:16px}.maps-key-form>button{width:100%}.maps-key-tooltip{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:calc(100vh - 24px);overflow:auto}}

/* A top-layer guide avoids clipping by the settings card. */
.maps-key-tooltip[popover]{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg, 12px);box-shadow:0 8px 30px #17383d24}
.maps-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14px}
.maps-guide-intro{font-size:11px;color:var(--muted);margin:0 0 12px}
.maps-key-tooltip li+li{margin-top:10px}.maps-key-tooltip li>strong:first-child{display:block;margin-bottom:3px;color:var(--primary-dark)}
.maps-key-tooltip .maps-guide-domain{display:block;margin:6px 0;padding:7px 9px;font-size:12px;user-select:all}
.maps-guide-troubleshooting{margin-top:12px;padding:10px;background:var(--bg);border-radius:var(--radius-sm, 6px);font-size:11px;line-height:1.6}.maps-guide-troubleshooting summary{cursor:pointer;font-weight:600}.maps-guide-troubleshooting p{margin:8px 0 0;font-size:11px}

/* Compact Modern Connection Cards */
.settings-connection-card{display:flex;align-items:flex-start;gap:18px;padding:20px 22px;margin-bottom:16px;border-radius:var(--radius-lg, 12px);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease;flex-shrink:0}
.settings-connection-card:hover{box-shadow:var(--shadow)}
.settings-connection-card .settings-feature-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:var(--radius-lg, 12px);background:#fff;border:1px solid var(--line);color:var(--primary);flex-shrink:0}
.settings-connection-card .settings-feature-icon .icon{width:22px;height:22px}
.settings-connection-content{flex:1;min-width:0}

/* Header & Status */
.settings-connection-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.settings-connection-header-left{display:flex;flex-direction:column;gap:3px;flex:1;min-width:200px}
.settings-connection-header h2{font-size:17px;font-weight:700;margin:0;color:var(--ink);display:flex;align-items:center;gap:8px}
.settings-connection-subtitle{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
.settings-connection-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Branded Feature Icons */
.settings-connection-card.is-drive .settings-feature-icon{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 25%,var(--line));background:var(--tint)}
.settings-connection-card.is-calendar .settings-feature-icon{color:#0284c7;border-color:rgba(2,132,199,0.25);background:#f0f9ff}
.settings-connection-card.is-whatsapp .settings-feature-icon{color:#16a34a;border-color:rgba(22,163,74,0.25);background:#f0fdf4}

/* Compact Info Chips */
.connection-chips-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
.connection-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:var(--radius-sm, 6px);background:var(--bg);border:1px solid var(--line);color:var(--ink);max-width:100%}
.connection-chip strong{color:var(--ink);font-weight:600}
.connection-chip.is-account{background:var(--tint);border-color:color-mix(in srgb,var(--primary) 22%,var(--line));color:var(--primary-dark)}
.connection-chip.is-active{background:var(--success-tint);border-color:#bbf7d0;color:var(--success-dark)}
.connection-chip.is-warning{background:var(--warning-tint);border-color:#fef08a;color:var(--warning-dark)}
.connection-chip .icon{width:13px;height:13px;stroke-width:2;flex-shrink:0}
.panda-chip-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0;border-radius:var(--radius-xs, 4px);display:inline-block;vertical-align:middle}
.connection-chip #panda-wa-status-indicator{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;border:none}
.connection-chip #panda-wa-status-indicator.connected{background:#16a34a;box-shadow:0 0 0 2px rgba(22,163,74,0.25)}
.connection-chip #panda-wa-status-indicator.disconnected{background:var(--danger, #dc2626);box-shadow:0 0 0 2px rgba(220,38,38,0.25)}
.connection-chip #panda-wa-status-indicator.offline{background:var(--warning, #f59e0b);box-shadow:0 0 0 2px rgba(245,158,11,0.25)}

/* Badges */
.badge.is-active{background:var(--success-tint);border:1px solid #bbf7d0;color:var(--success-dark);font-weight:600}
.badge.warning{background:var(--warning-tint);border:1px solid #fef08a;color:var(--warning-dark);font-weight:600}
.badge.neutral{background:var(--bg, #f3f7f6);border:1px solid var(--line, #e2eae9);color:var(--muted, #526b70)}

/* Actions Toolbar */
.settings-connection-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,0.05)}
.settings-connection-actions .button,
.settings-connection-actions button{padding:6px 13px;font-size:12px;height:auto}
.settings-connection-actions .danger{color:var(--danger-dark);border-color:transparent;background:transparent;padding:6px 9px;font-size:12px}
.settings-connection-actions .danger:hover{background:var(--danger-tint);border-color:#fca5a5}

/* Accordion for Credentials & Advanced Parameters */
.connection-accordion{margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-md, 8px);background:var(--bg);overflow:hidden}
.connection-accordion summary{padding:8px 12px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;transition:background .15s ease}
.connection-accordion summary:hover{background:var(--tint)}
.connection-accordion-body{padding:12px 14px;background:#fff;border-top:1px solid var(--line);display:grid;gap:10px}

/* 2-Column Responsive Layout for Connection Sections */
.settings-connection-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:10px}
.connection-col-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.connection-col-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.connection-col-left .connection-accordion,
.connection-col-right .connection-accordion{margin-top:0}
.connection-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md, 8px);padding:12px 14px}
.connection-box-title{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;margin-bottom:8px}
[hidden]{display:none !important}
@media(max-width:920px){
  .settings-connection-2col{grid-template-columns:1fr;gap:14px}
}

/* WhatsApp Compact View */
.connection-wa-panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg, 12px);padding:14px;margin:8px 0}
.connection-wa-unlinked{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.connection-wa-qr-box{width:150px;height:150px;min-width:150px;border:2px dashed var(--line, #e2eae9);border-radius:var(--radius-lg, 12px);background:#fff;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .2s ease;overflow:hidden}
.connection-wa-qr-box:hover{border-color:#22c55e;box-shadow:0 3px 12px rgba(34,197,94,.16)}
.connection-wa-qr-box img{width:136px;height:136px;object-fit:contain}
.connection-wa-guide{flex:1;min-width:240px}
.connection-wa-tabs{display:flex;gap:6px;margin-bottom:10px}
.connection-wa-tab{padding:4px 10px;font-size:11.5px;font-weight:600;border-radius:var(--radius-sm, 6px);border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s ease}
.connection-wa-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.connection-wa-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.connection-wa-step{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--ink-secondary, #3d585c);line-height:1.4}
.connection-wa-step-num{display:inline-grid;place-items:center;width:17px;height:17px;min-width:17px;border-radius:50%;background:var(--tint);color:var(--primary);font-size:10px;font-weight:700;flex-shrink:0}

/* Inline Test Widget */
.connection-test-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg, #f3f7f6);border:1px solid var(--line);padding:8px 12px;border-radius:var(--radius-md, 8px);margin-top:10px}
.connection-test-inline label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;margin:0;display:flex;align-items:center;gap:6px;flex-shrink:0}
.connection-test-inline input{height:30px;padding:3px 9px;font-size:12px;border:1px solid var(--line);border-radius:var(--radius-sm, 6px);flex:1;min-width:170px;background:#fff}
.connection-test-inline button{height:30px;padding:0 12px;font-size:11.5px}

@media(max-width:760px){
  .settings-connection-card{flex-direction:column;gap:12px;padding:16px}
  .settings-connection-card .settings-feature-icon{width:38px;height:38px;flex-basis:38px}
  .settings-connection-header{flex-direction:column;align-items:flex-start;gap:6px}
  .connection-wa-unlinked{flex-direction:column;align-items:center}
}

/* Audit Log (Registro) Toolbar, Controls, Table & Pagination */
.audit-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.audit-header .settings-intro{margin-bottom:0}
.audit-header .settings-intro h2{font-size:18px;margin:0 0 2px}
.audit-header .settings-intro p{font-size:12px;margin:0}
.audit-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.audit-control{display:flex;flex-direction:column;gap:2px}
.audit-control-label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.audit-search-wrap{position:relative;display:flex;align-items:center}
.audit-search-icon{position:absolute;left:9px;color:var(--muted);pointer-events:none;width:13px;height:13px}
.audit-search-input{width:220px;padding:5px 10px 5px 28px;border:1px solid var(--line);border-radius:var(--radius-sm, 6px);font-size:var(--font-sm, 12px);height:32px;background:#fff;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
.audit-search-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-glow, rgba(8,126,133,0.16))}
.audit-select{padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius-sm, 6px);font-size:var(--font-sm, 12px);height:32px;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.audit-select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-glow, rgba(8,126,133,0.16))}
.audit-action-tag{display:inline-block;font-family:var(--font-mono, monospace);font-size:10.5px;padding:1px 6px;border-radius:var(--radius-xs, 4px);background:var(--bg);color:var(--ink-secondary);border:1px solid var(--line)}

#audit-results{margin-bottom:0}
#audit-results table{width:100%;border-collapse:collapse}
#audit-results th{padding:8px 16px;font-size:9.5px;letter-spacing:.8px}
#audit-results td{padding:5px 16px;font-size:12px;line-height:1.35}
#audit-results tbody tr{height:34px}

.audit-pagination, .patient-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 18px;border-top:1px solid var(--line);background:var(--bg);flex-wrap:wrap}
.audit-pagination-info{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.audit-pagination-info strong{color:var(--ink)}
.audit-page-badge{display:inline-flex;padding:2px 7px;border-radius:var(--radius-xs, 4px);background:var(--tint);color:var(--primary);font-size:10.5px;font-weight:600}
.audit-pagination-controls{display:flex;align-items:center;gap:4px}
.audit-page-btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:4px 10px;font-size:11.5px;font-weight:600;border-radius:var(--radius-sm, 6px);cursor:pointer;height:28px;transition:all .15s ease}
.audit-page-btn:hover:not(:disabled){background:var(--tint);color:var(--primary);border-color:var(--primary)}
.audit-page-btn:disabled{opacity:.45;cursor:not-allowed;background:var(--bg);border-color:var(--line)}
.audit-page-numbers{display:flex;align-items:center;gap:3px}
.audit-page-number{min-width:28px;height:28px;padding:0 6px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:11.5px;font-weight:600;border-radius:var(--radius-sm, 6px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}
.audit-page-number:hover{background:var(--tint);color:var(--primary);border-color:var(--primary)}
.audit-page-number.active{background:var(--primary);color:#fff;border-color:var(--primary);cursor:default}
.audit-page-ellipsis{padding:0 3px;color:var(--muted);font-size:11px}
.audit-refresh-btn{padding:5px 9px;font-size:12px;height:32px;border-radius:var(--radius-sm, 6px);display:inline-flex;align-items:center;justify-content:center}

@media(min-width:761px){
  .content:has(#audit-results){
    overflow:hidden!important;
    display:flex;
    flex-direction:column;
    padding-top:10px;
    padding-bottom:12px;
  }
  .content:has(#audit-results) .settings-workspace{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    height:100%;
  }
  .content:has(#audit-results) .settings-tabs{
    flex-shrink:0;
    margin-bottom:10px;
  }
  .content:has(#audit-results) #settings-panel{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    height:100%;
  }
  #audit-results{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
  }
  #audit-results .table-wrap{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
  }
  #audit-results .audit-pagination{
    flex-shrink:0;
  }
}

@media(max-width:760px){
  .audit-header{flex-direction:column;align-items:stretch;gap:10px}
  .audit-toolbar{flex-direction:column;align-items:stretch;gap:8px}
  .audit-search-input{width:100%}
  .audit-select{width:100%}
  .audit-pagination{flex-direction:column;align-items:center;gap:10px;padding:12px}
  .audit-pagination-controls{flex-wrap:wrap;justify-content:center}
}

/* ==========================================================================
   LAYOUT ELÁSTICO VERTICAL ANCLADO AL VIEWPORT (CONFIGURACIÓN)
   Aplica a: Apariencia, Notificaciones, Amigos, Backup, Suscripción y Soporte
   ========================================================================== */
@media(min-width:761px){
  .content:has(#appearance-root, #notifications-root, #friends-root, #backup-root, #subscription-root, #support-root){
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 32px 12px !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  .content:has(#appearance-root, #notifications-root, #friends-root, #backup-root, #subscription-root, #support-root) .settings-tabs{
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
  }
  #settings-panel:has(#appearance-root, #notifications-root, #friends-root, #backup-root, #subscription-root, #support-root){
    overflow: hidden !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  #settings-panel:has(#appearance-root, #notifications-root, #friends-root, #backup-root, #subscription-root, #support-root) > .settings-intro{
    flex-shrink: 0 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  #settings-panel:has(#appearance-root, #notifications-root, #friends-root, #backup-root, #subscription-root, #support-root) > .settings-intro h2{
    font-size: 16.5px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
  }
  #settings-panel:has(#appearance-root, #notifications-root, #friends-root, #backup-root, #subscription-root, #support-root) > .settings-intro p{
    font-size: 12px !important;
    margin: 0 !important;
    color: var(--muted) !important;
  }
}

/* ==========================================================================
   PESTAÑA BACKUP — INTERFAZ ELÁSTICA ANCLADA AL VIEWPORT
   ========================================================================== */
.backup-workspace{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.backup-stats-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex-shrink: 0;
}
.backup-stat-card{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.backup-stat-icon{
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.backup-stat-icon.is-drive{
  background: #eff6ff;
  color: #2563eb;
}
.backup-stat-icon.is-shield{
  background: #ecfdf5;
  color: #059669;
}
.backup-stat-icon.is-hash{
  background: #f5f3ff;
  color: #7c3aed;
}
.backup-stat-meta{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.backup-stat-val{
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backup-stat-lbl{
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

.backup-elastic-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.backup-col-left{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}
.backup-hero-card{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
}
.backup-hero-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.backup-hero-title{
  display: flex;
  align-items: center;
  gap: 10px;
}
.backup-hero-title h3{
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
}
.backup-hero-title small{
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.backup-checklist-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.backup-check-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg, #f6f9f9);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.backup-check-item .icon{
  width: 14px;
  height: 14px;
  color: var(--primary);
  flex-shrink: 0;
}
.backup-drive-shield-card{
  background: linear-gradient(135deg, var(--tint-subtle, #f2f8f7) 0%, #ffffff 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: var(--radius-lg, 12px);
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.backup-drive-shield-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.backup-drive-shield-head strong{
  font-size: 13.5px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.backup-drive-shield-card p{
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

.backup-patients-card{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.backup-patients-head{
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, var(--tint-subtle) 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.backup-patients-head-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.backup-patients-head-top h3{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.backup-patients-list{
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.backup-patient-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .14s ease;
}
.backup-patient-row:last-child{
  border-bottom: 0;
}
.backup-patient-row:hover{
  background: var(--tint-subtle);
}
.backup-patient-meta{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.backup-patient-meta strong{
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backup-patient-meta small{
  font-size: 11px;
  color: var(--muted);
}

@media(max-width:960px){
  .backup-stats-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .backup-elastic-grid{
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}
@media(max-width:760px){
  .backup-workspace{
    height: auto;
    overflow: visible;
  }
  .backup-stats-grid,
  .backup-checklist-grid{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PESTAÑA APARIENCIA — ESTUDIO VISUAL INTERACTIVO Y ACABADO 3D CLÍNICO
   ========================================================================== */
.appearance-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.appearance-elastic-grid {
  display: grid;
  grid-template-columns: 1.38fr 0.92fr;
  gap: 14px;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.appearance-col-left,
.appearance-col-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.appearance-section-card {
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tint-subtle) 26%, #ffffff) 100%);
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--3d-card-shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.appearance-section-card.flex-grow {
  flex: 1 1 0;
}

.appearance-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, var(--tint-subtle) 100%);
  box-shadow: inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.appearance-card-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.appearance-head-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 70%, #ffffff) 0%, var(--tint) 100%);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: var(--3d-icon-box-shadow);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.appearance-head-icon .icon {
  width: 16px;
  height: 16px;
}

.appearance-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.appearance-card-head small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.appearance-card-body {
  padding: 13px 16px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Grid de 6 Tarjetas de Tema Clínico 3D */
.appearance-themes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 auto;
  align-content: stretch;
}

.appearance-theme-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  text-align: left !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--line) !important;
  border-bottom-width: 2px !important;
  border-bottom-color: var(--line-strong) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfb 100%) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 5px rgba(18, 56, 53, 0.045), 0 6px 14px -4px rgba(18, 56, 53, 0.05) !important;
  cursor: pointer !important;
  gap: 8px !important;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s ease,
              border-color 0.18s ease,
              background 0.18s ease !important;
  white-space: normal !important;
}

.appearance-theme-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--theme-swatch, var(--primary)) !important;
  box-shadow: inset 0 1px 0 #ffffff,
              0 6px 16px -4px color-mix(in srgb, var(--theme-swatch, var(--primary)) 26%, transparent),
              0 2px 5px rgba(18, 56, 53, 0.06) !important;
}

.appearance-theme-card:active {
  transform: translateY(0.5px) !important;
}

.appearance-theme-card.active {
  background: linear-gradient(180deg, #ffffff 0%, var(--theme-tint, var(--tint)) 100%) !important;
  border-color: var(--theme-swatch, var(--primary)) !important;
  border-bottom-color: var(--theme-dark, var(--primary-dark)) !important;
  box-shadow: inset 0 1px 0 #ffffff,
              0 0 0 2px color-mix(in srgb, var(--theme-swatch, var(--primary)) 18%, transparent),
              0 8px 20px -4px color-mix(in srgb, var(--theme-swatch, var(--primary)) 28%, transparent) !important;
}

/* Mini-Maqueta 3D de la Interfaz dentro de cada tarjeta */
.appearance-mini-mockup {
  width: 100%;
  height: 60px;
  border-radius: 8px;
  background: var(--theme-tint-subtle, #f2f7f6);
  border: 1px solid color-mix(in srgb, var(--theme-swatch, #087e85) 20%, #dce6e5);
  box-shadow: inset 0 1px 2px rgba(18, 56, 53, 0.06), 0 1px 0 #ffffff;
  display: grid;
  grid-template-columns: 34px 1fr;
  overflow: hidden;
  position: relative;
}

.appearance-mini-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, var(--theme-tint-subtle, #f5faf9) 100%);
  border-right: 1px solid rgba(18, 56, 53, 0.08);
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.appearance-mini-logo {
  width: 11px;
  height: 11px;
  border-radius: 3.5px;
  background: linear-gradient(145deg, var(--theme-light, #0e9aa7) 0%, var(--theme-swatch, #087e85) 60%, var(--theme-dark, #075f66) 100%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.15);
  margin-bottom: 2px;
}

.appearance-mini-nav-pill {
  height: 4px;
  border-radius: 99px;
  background: rgba(18, 56, 53, 0.12);
  width: 85%;
}

.appearance-mini-nav-pill.is-active {
  background: var(--theme-swatch, #087e85);
  width: 100%;
  height: 5px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-swatch, #087e85) 35%, transparent);
}

.appearance-mini-main {
  display: flex;
  flex-direction: column;
  padding: 5px 6px;
  gap: 4px;
}

.appearance-mini-topbar {
  height: 9px;
  background: #ffffff;
  border-radius: 3px;
  border: 1px solid rgba(18, 56, 53, 0.07);
  box-shadow: 0 1px 1px rgba(18, 56, 53, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.appearance-mini-topbar-line {
  width: 32%;
  height: 3px;
  border-radius: 99px;
  background: var(--theme-swatch, #087e85);
  opacity: 0.75;
}

.appearance-mini-topbar-btn {
  width: 14px;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--theme-light, #0e9aa7), var(--theme-swatch, #087e85));
}

.appearance-mini-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  flex: 1;
}

.appearance-mini-card {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(18, 56, 53, 0.08);
  border-bottom: 1.5px solid rgba(18, 56, 53, 0.14);
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(18, 56, 53, 0.04);
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.appearance-mini-card-bar {
  width: 55%;
  height: 3px;
  border-radius: 99px;
  background: var(--theme-swatch, #087e85);
}

.appearance-mini-card-sub {
  width: 80%;
  height: 2.5px;
  border-radius: 99px;
  background: rgba(18, 56, 53, 0.12);
}

/* Esferas Cromáticas 3D */
.appearance-theme-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.appearance-theme-title-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.appearance-theme-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.appearance-theme-desc {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.25;
  margin-top: 2px;
}

.appearance-spheres {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.appearance-sphere {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.25),
              0 1px 3px rgba(0, 0, 0, 0.16);
}

.appearance-sphere + .appearance-sphere {
  margin-left: -5px;
}

.appearance-theme-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(18, 56, 53, 0.07);
  width: 100%;
}

.appearance-theme-hex {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(18, 56, 53, 0.04);
  padding: 1.5px 6px;
  border-radius: 4px;
}

.appearance-theme-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.appearance-theme-card.active .appearance-theme-status {
  color: var(--theme-dark, var(--primary-dark));
}

/* Selector de Nivel de Profundidad 3D */
.appearance-depth-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.appearance-depth-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  text-align: left !important;
  white-space: normal !important;
}

.appearance-depth-btn strong {
  font-size: 12px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: space-between;
}

.appearance-depth-btn span {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.25;
}

.appearance-depth-btn.active {
  background: linear-gradient(180deg, #ffffff 0%, var(--tint) 100%) !important;
  border-color: var(--primary) !important;
  border-bottom-color: var(--primary-dark) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 0 0 2px var(--primary-glow), var(--3d-btn-shadow) !important;
}

.appearance-depth-btn.active strong {
  color: var(--primary-dark);
}

/* Laboratorio de Vista Previa 3D en Tiempo Real (Columna Derecha) */
.appearance-preview-stage {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top-color: var(--line-strong);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--3d-recessed-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: space-between;
}

.appearance-preview-window {
  background: #ffffff;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 11px;
  box-shadow: var(--3d-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.appearance-preview-win-head {
  padding: 9px 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--tint-subtle) 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.appearance-preview-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.appearance-preview-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.12);
}

.appearance-preview-win-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.appearance-preview-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.appearance-preview-mini-kpi {
  background: linear-gradient(180deg, #ffffff 0%, var(--tint-subtle) 100%);
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 9px;
  padding: 8px 10px;
  box-shadow: var(--3d-card-shadow);
  display: flex;
  align-items: center;
  gap: 9px;
}

.appearance-preview-mini-kpi strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}

.appearance-preview-mini-kpi small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.appearance-preview-controls-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--3d-card-shadow);
}

.appearance-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

@media(max-width:1080px){
  .appearance-elastic-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .appearance-themes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:760px){
  .appearance-workspace {
    height: auto;
    overflow: visible;
  }
  .appearance-themes-grid,
  .appearance-depth-bar,
  .appearance-preview-kpi-row {
    grid-template-columns: 1fr;
  }
}





@media (max-width: 1080px) {
  .content:has(.settings-workspace),
  .content:has(#audit-results),
  .content:has(#appearance-root, #notifications-root, #friends-root, #backup-root, #subscription-root, #support-root, #storage-root) {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }
  .settings-workspace,
  #settings-panel,
  .appearance-elastic-grid,
  .appearance-col-left,
  .appearance-col-right {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}