/* ============================================
   NEXTCONTACT - Panel de administración
   Reutiliza variables y lenguaje visual de styles.css
   ============================================ */

.admin-body { background: var(--color-surface-secondary); }

.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

/* SIDEBAR */
.admin-sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.admin-logo { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; padding: 6px 10px 24px 10px; }
.admin-logo-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--color-accent); flex-shrink: 0; }
.admin-logo-icon svg { width: 24px; height: 24px; }
.admin-logo-icon .nc-logo-img { width: 24px; height: 24px; }
.admin-logo small { display: block; font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); margin-top: 1px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; background: transparent; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; text-align: left; font-family: inherit; transition: all 0.2s; }
.admin-nav-item svg { flex-shrink: 0; }
.admin-nav-item:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.admin-nav-item.active { background: var(--color-text-primary); color: #fff; }
.admin-back-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; color: var(--color-text-tertiary); text-decoration: none; border-top: 1px solid var(--color-border); margin-top: 12px; padding-top: 18px; transition: color 0.2s; }
.admin-back-link:hover { color: var(--color-accent); }

/* MAIN */
.admin-main { padding: 36px 44px; max-width: 1080px; }
.admin-tab { display: none; }
.admin-tab.active { display: block; animation: fadein 0.25s ease; }
.admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.admin-header h1 { font-size: 26px; font-weight: 600; margin: 0 0 6px 0; letter-spacing: -0.4px; }
.admin-header p { font-size: 14px; color: var(--color-text-secondary); margin: 0; }

/* SUMMARY */
.admin-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.summary-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 22px; }
.summary-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.summary-icon.blue { background: rgba(37,99,235,0.1); color: var(--color-accent); }
.summary-icon.purple { background: rgba(124,58,237,0.1); color: var(--color-purple); }
.summary-icon.green { background: rgba(22,163,74,0.1); color: var(--color-positive); }
.summary-value { font-size: 26px; font-weight: 600; }
.summary-label { font-size: 13px; color: var(--color-text-tertiary); margin-top: 2px; }

/* PANEL genérico */
.admin-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 26px 28px; margin-bottom: 20px; }
.admin-panel h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px 0; }
.admin-panel .field-hint { font-size: 13px; color: var(--color-text-tertiary); margin: 0 0 14px 0; line-height: 1.6; }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.quick-action { padding: 10px 16px; background: var(--color-surface-secondary); border: 1px solid var(--color-border); border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); cursor: pointer; font-family: inherit; transition: all 0.2s; }
.quick-action:hover { border-color: var(--color-text-primary); }

/* Identidad de marca */
.brand-editor { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.brand-preview { width: 76px; height: 76px; border-radius: 16px; background: var(--color-surface-secondary); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-preview-icon { display: flex; align-items: center; justify-content: center; color: var(--color-accent); }
.brand-preview-icon svg { width: 34px; height: 34px; }
.brand-preview-icon .nc-logo-img { width: 60px; height: 60px; border-radius: 12px; object-fit: contain; }
.brand-fields { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }
.field-label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); }
.admin-input { padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 9px; font-size: 14px; font-family: inherit; font-weight: 400; color: var(--color-text-primary); background: var(--color-surface); }
.admin-input:focus { outline: none; border-color: var(--color-accent); }
.field-label input[type="file"] { font-size: 13px; font-family: inherit; color: var(--color-text-secondary); }
.danger-zone p { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 14px 0; line-height: 1.6; }
.btn-danger-outline { padding: 10px 16px; background: transparent; border: 1px solid var(--color-danger); color: var(--color-danger); border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn-danger-outline:hover { background: var(--color-danger); color: #fff; }

/* FORM elements */
.admin-textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--color-text-primary); background: var(--color-surface); resize: vertical; line-height: 1.6; }
.admin-textarea:focus { outline: none; border-color: var(--color-accent); }
.admin-actions-row { display: flex; align-items: center; gap: 14px; }
.btn-primary-admin { padding: 11px 20px; background: var(--color-text-primary); color: #fff; border: none; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.2s; }
.btn-primary-admin:hover { opacity: 0.85; }
.btn-secondary-admin { padding: 11px 20px; background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn-secondary-admin:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.save-confirm { font-size: 13px; font-weight: 600; color: var(--color-positive); opacity: 0; transition: opacity 0.3s; }
.save-confirm.show { opacity: 1; }

.ai-test-box { display: flex; gap: 10px; margin-bottom: 14px; }
.ai-test-box input { flex: 1; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 9px; font-size: 14px; font-family: inherit; }
.ai-test-box input:focus { outline: none; border-color: var(--color-accent); }
.ai-test-result { padding: 14px 16px; background: var(--color-surface-secondary); border-radius: 10px; font-size: 13.5px; color: var(--color-text-primary); line-height: 1.6; min-height: 20px; }
.ai-test-result:empty { display: none; }

/* LISTA de apps (admin) */
.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-list-item { display: flex; align-items: center; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; }
.admin-list-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--color-surface-secondary); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-list-info { flex: 1; min-width: 0; }
.admin-list-info h4 { font-size: 14.5px; font-weight: 600; margin: 0 0 2px 0; }
.admin-list-info p { font-size: 13px; color: var(--color-text-tertiary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-list-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(37,99,235,0.08); color: var(--color-accent); flex-shrink: 0; }
.admin-list-actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.icon-btn:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.icon-btn.delete:hover { border-color: var(--color-danger); color: var(--color-danger); }
.admin-empty { text-align: center; padding: 48px 20px; color: var(--color-text-tertiary); font-size: 14px; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 14px; }

/* GRID de componentes (admin) */
.admin-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.admin-card-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.admin-card-img { height: 130px; background-size: cover; background-position: center; background-color: var(--color-surface-secondary); }
.admin-card-body { padding: 14px 16px 16px; }
.admin-card-body h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px 0; }
.admin-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-card-price { font-size: 15px; font-weight: 600; }
.admin-card-status { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.admin-card-status.nuevo { background: rgba(22,163,74,0.1); color: var(--color-positive); }
.admin-card-status.usado { background: rgba(217,119,6,0.1); color: var(--color-warning); }
.admin-card-actions { display: flex; gap: 8px; }

/* MODAL de formularios (admin) */
.admin-modal { max-width: 620px; }
.admin-modal-body { padding: 32px; }
.admin-modal-body h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px 0; }
.admin-modal-body code { background: var(--color-surface-secondary); padding: 2px 7px; border-radius: 5px; font-size: 12.5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea, .form-grid select { padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 9px; font-size: 14px; font-family: inherit; color: var(--color-text-primary); font-weight: 400; background: var(--color-surface); }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { outline: none; border-color: var(--color-accent); }
.form-grid textarea { resize: vertical; }

/* Archivos de aplicación (subida) */
.files-upload-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.upload-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--color-surface-secondary); border: 1px dashed var(--color-border); border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); cursor: pointer; transition: all 0.2s; }
.upload-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.files-list { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; max-height: 260px; overflow-y: auto; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; }
.file-row-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.file-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); text-decoration: none; }
.file-row-name:hover { color: var(--color-accent); text-decoration: underline; }
.file-row-size { color: var(--color-text-tertiary); font-size: 12px; flex-shrink: 0; }
.file-row .icon-btn { width: 28px; height: 28px; flex-shrink: 0; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: relative; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .admin-logo { display: none; }
  .admin-nav { flex-direction: row; }
  .admin-back-link { border-top: none; margin-top: 0; padding-top: 10px; white-space: nowrap; }
  .admin-main { padding: 24px 20px; }
  .admin-summary-grid, .admin-cards-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-header { flex-direction: column; }
  .brand-editor { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .admin-nav-item { padding: 9px 10px; font-size: 13px; }
  .admin-nav-item svg { width: 16px; height: 16px; }
  .admin-header h1 { font-size: 21px; }
  .admin-panel, .admin-list-item, .admin-modal-body { padding: 18px; }
  .ai-test-box { flex-direction: column; }
  .ai-test-box button { width: 100%; }
  .admin-list-item { flex-wrap: wrap; }
  .admin-list-tag { order: 3; }
  .quick-actions { flex-direction: column; }
  .quick-action { width: 100%; text-align: center; }
}