/* TRADA · Componentes visuales estilo shadcn/ui
   Implementación CSS para el sistema PHP existente: no requiere React.
   Preserva la navegación, componentes de negocio y comportamiento de app.js.
*/
:root {
  --background: #f5f8fd;
  --surface: #fff;
  --surface-subtle: #fafcff;
  --foreground: #0f172a;
  --muted-foreground: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --primary: #1655bd;
  --primary-foreground: #fff;
  --ring: rgba(37, 99, 235, .18);
  --trada-blue: #1655bd;
  --trada-navy: #0a2e69;
  --radius-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.055), 0 1px 2px rgba(15,23,42,.025);
  --shadow-md: 0 8px 30px rgba(15,23,42,.095);
}
/* Layout y menú superior siguen en flujo (sin superponerse al contenido). */
.workspace-topbar {
  position: relative;
  top: auto;
  z-index: 10;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
}
.workspace-topbar::after { height: 2px; width: 78px; background: var(--primary); }
.workspace-heading strong, .page-heading h2 { color: #0f172a; letter-spacing: -.027em; }
.workspace-actions .top-role-badge { border-radius: 7px; }
.sidebar { background: #fff; border-right: 1px solid var(--border); box-shadow: none; }
.nav-item { border-radius: 8px; font-weight: 540; }
.nav-item.is-active { background: #eaf2ff; color: #1555bd; border-color: transparent; box-shadow: none; }
.nav-item.is-active .icon { color: #1555bd; }
.nav-item:hover { background: #f1f5fb; }
.page-shell { position: relative; z-index: 1; }

/* Tarjetas shadcn: superficies limpias, bordes neutros y sombras discretas. */
.panel, .boards-panel, .feature-card, .stats-dashboard-v2 .stats-kpi-card,
.stats-dashboard-v2 .stats-chart-card, .stats-kpi-card, .managed-board-card,
.client-meta-strip > span, .client-drawer, .dialog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
.feature-card { border-top: 1px solid var(--border) !important; transition: border-color .16s ease, box-shadow .16s ease; }
.feature-card:hover { border-color: #bdd3f5; box-shadow: var(--shadow-sm); transform: none; }
.panel, .boards-panel { box-shadow: var(--shadow-sm); }
.panel h3, .clients-toolbar h3, .boards-management-header h4 { font-weight: 650; letter-spacing: -.018em; color: #111827; }
.panel p, .clients-toolbar p, .boards-management-header p { color: var(--muted-foreground); }

/* Buttons & icon buttons — dimensiones y focus estilo shadcn. */
.button, button.button-primary, .button-outline, .button-danger {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  font-size: 12px;
  font-weight: 580;
  letter-spacing: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.button-sm { min-height: 32px; padding: 0 11px; font-size: 11px; }
.button-primary, .auth-submit { background: #1655bd; color: #fff; border: 1px solid #1655bd; box-shadow: var(--shadow-xs); }
.button-primary:hover, .auth-submit:hover { background: #0f48a5; border-color: #0f48a5; box-shadow: var(--shadow-sm); }
.button-outline { background: #fff; color: #1e293b; border: 1px solid #dce3eb; }
.button-outline:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.button:active { transform: none; }
.button:disabled, button:disabled { cursor: not-allowed; opacity: .56; }
.icon-button, .bordered-icon-button, .pagination-button { border-radius: 8px; box-shadow: none; }
.icon-button:hover { background: #f1f5f9; }
:where(.button,.icon-button,.nav-item,.drawer-tab,.trada-permission-option):focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Inputs / select / textarea */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea) {
  border: 1px solid #dce3ed;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: var(--shadow-xs);
  color: #0f172a;
  font-size: 12px;
  font-weight: 450;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select) { min-height: 39px; }
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus { border-color: #7eacf0; box-shadow: 0 0 0 3px var(--ring); }
input::placeholder, textarea::placeholder { color: #94a3b8; }
select { cursor: pointer; }
label { color: #334155; font-size: 12px; font-weight: 560; gap: 7px; }
.form-grid { gap: 16px !important; }
.form-message.error { color: #b91c1c; }
.form-message.success { color: #047857; }
.field-hint { font-weight: 440; color: #64748b; font-size: 11px; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: #1655bd; }

/* Tablas y paginación */
.table-wrap, .modern-table-wrap { border: 1px solid var(--border); border-radius: 10px; box-shadow: none; background: #fff; }
table { border-collapse: collapse; }
th { height: 43px; background: #fafbfd; color: #64748b; font-size: 11px; font-weight: 650; text-transform: none; border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid #edf2f7; font-size: 12px; }
tbody tr:hover, .clients-table tbody tr:hover { background: #f8fafc; }
.table-footer { border-color: var(--border); background: #fff; }
.badge, .badge-success, .badge-muted, .badge-warning { border-radius: 999px; font-size: 10px; font-weight: 610; box-shadow: none; }
.badge-success { background: #ecfdf5; color: #047857; }
.badge-warning { background: #fffbeb; color: #92400e; }
.badge-muted { background: #f1f5f9; color: #475569; }

/* Dialogs and drawer */
.modal-backdrop, .drawer-backdrop { background: rgba(15,23,42,.55); }
.dialog-card { border-radius: 12px; box-shadow: 0 22px 70px rgba(15,23,42,.18); }
.dialog-header, .drawer-header { background: #fff; border-bottom: 1px solid var(--border); }
.dialog-title-group h3, .drawer-header h3 { color: #0f172a; font-size: 16px; font-weight: 650; }
.dialog-title-group p, .drawer-header p { color: #64748b; font-size: 11px; }
.dialog-icon { border-radius: 9px; background: #eff6ff; color: #1555bd; }
.client-drawer { border-radius: 14px 0 0 14px; }
.drawer-content { background: #fff; }
.drawer-tabs {
  height: auto;
  padding: 6px;
  margin: 14px 20px 12px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  border: 0;
  border-radius: 9px;
  background: #f1f5f9;
  overflow-x: auto;
}
.drawer-tab {
  height: 36px;
  padding: 0 12px;
  flex: 1;
  border: 1px solid transparent;
  border-radius: 7px;
  white-space: nowrap;
  color: #64748b;
  background: transparent;
  font-size: 11px;
  font-weight: 575;
}
.drawer-tab.is-active { color: #0f172a; background: #fff; border-color: #e2e8f0; box-shadow: var(--shadow-xs); }
.drawer-tab::after, .drawer-tab.is-active::after { display: none; }
.tab-count { border-radius: 6px; background: #f1f5f9; color: #475569; }
.section-divider { border-color: #edf2f7; }

/* Las fichas de departamentos y carpetas usan los mismos componentes base. */
.trada-organization-form {
  margin: 17px 0;
  padding: 20px;
  display: grid;
  gap: 17px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.trada-organization-form > h4 { font-size: 14px; font-weight: 650; color: #0f172a; }
.trada-organization-form label { font-size: 12px; font-weight: 560; color: #334155; }
.trada-organization-form label input, .trada-organization-form label select { min-height: 39px; border-color: #dce3ed; border-radius: 8px; color: #0f172a; }
.trada-organization-form label input:focus, .trada-organization-form label select:focus { border-color: #7eacf0; box-shadow: 0 0 0 3px var(--ring); }
.trada-org-item { padding: 14px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 9px; gap: 12px; background: #fff; }
.trada-org-copy strong { color: #0f172a; font-size: 12px; font-weight: 630; }
.trada-org-copy small { color: #64748b; font-size: 11px; }
.trada-folder-symbol { min-width: 39px; background: #eff6ff; border-radius: 9px; color: #1555bd; }
.trada-access-fieldset { border: 1px solid var(--border); border-radius: 9px; padding: 14px; }
.trada-access-fieldset legend { color: #334155; font-size: 12px; font-weight: 650; padding: 0 5px; }
.trada-board-permissions { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 8px; max-height: 220px; padding: 2px; }
.trada-organization-form .trada-permission-option { display: flex; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-weight: 550; }
.trada-organization-form .trada-permission-option:hover { border-color: #abc7ed; background: #f8fbff; }
.trada-organization-form .trada-permission-option:has(input:checked) { border-color: #9dc2f8; background: #f0f6ff; }
.trada-organization-form .trada-permission-option input { width: 16px; height: 16px; min-height: 16px; accent-color: #1655bd; }
.trada-new-credentials { background: #f0fdf4; border-color: #bbf7d0; color: #166534; border-radius: 9px; }

/* Personalización del tablero */
.board-icon-choice > span { border-radius: 9px; }
.board-icon-choice input:checked + span { background: #eff6ff; border-color: #1655bd; color: #1655bd; box-shadow: inset 0 0 0 1px #1655bd; }
.board-color-choice { border-radius: 8px; }
.board-color-choice:has(input:checked) { border-color: #1655bd; box-shadow: inset 0 0 0 1px #1655bd; }
.trada-favorite-filter { color: #334155; }
.trada-favorite-button { background: #fff; border: 1px solid var(--border); border-radius: 8px; color: #1655bd; }
.trada-favorite-button:hover { background: #eff6ff; }

/* Login compacto y consistente, sin texto promocional. */
.auth-layout.auth-layout-single { background: #fff; border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 12px 35px rgba(15,23,42,.075); }
.auth-layout-single .auth-card-heading h1 { color: #0f172a; letter-spacing: -.03em; }
.auth-layout-single .auth-input-wrap input { height: 42px; border: 1px solid #dce3ed; border-radius: 8px; box-shadow: var(--shadow-xs); }
.auth-layout-single .auth-input-wrap input:focus { border-color: #7eacf0; box-shadow: 0 0 0 3px var(--ring); }
.auth-layout-single .auth-submit { min-height: 42px; border-radius: 8px; }
.auth-login-footer { color: #64748b; }

@media(max-width:900px) {
  .workspace-topbar { position: relative; }
  .drawer-tabs { margin: 12px 12px 10px; }
  .drawer-tab { padding: 0 10px; }
}
@media(max-width:680px) {
  .trada-organization-form { padding: 15px; }
  .trada-board-permissions { grid-template-columns: minmax(0,1fr); }
  .dialog-card { border-radius: 12px; }
  .drawer-tab { min-width: max-content; }
  .trada-org-item { padding: 12px; }
}