/* ============================================================
   Chatkitect Base
   Defaults globales que aplican a TODOS los paneles existentes
   sin necesidad de cambiar su HTML. Usa selectores genéricos
   (body, h1-h6, table, input, .card, .modal) y tokens semánticos.
   ============================================================ */

/* color-scheme avisa al navegador para scrollbars/inputs nativos */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

html, body {
  font-family: var(--ck-font-family);
  font-size: var(--ck-text-md);
  line-height: var(--ck-leading-normal);
  color: var(--ck-text-primary);
  background: var(--ck-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Form controls heredan la fuente del body */
input, button, select, textarea {
  font-family: inherit;
}

a {
  color: var(--ck-text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: var(--ck-leading-tight);
  color: var(--ck-text-primary);
}
h1 { font-size: var(--ck-text-4xl); }
h2 { font-size: var(--ck-text-3xl); }
h3 { font-size: var(--ck-text-2xl); }
h4 { font-size: var(--ck-text-xl); }
h5 { font-size: var(--ck-text-lg); }
h6 { font-size: var(--ck-text-md); }

p { margin: 0 0 var(--ck-space-3); }

hr {
  border: 0;
  border-top: 1px solid var(--ck-border-subtle);
  margin: var(--ck-space-4) 0;
}

code, kbd, samp, pre {
  font-family: var(--ck-font-mono);
  font-size: 0.95em;
}

/* Scrollbars sobrios */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ck-border-default); border-radius: var(--ck-radius-sm); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ck-border-strong); border: 2px solid transparent; background-clip: padding-box; }

/* ============================================================
   Soft defaults para clases comunes que viven en los paneles
   actuales (.card, .modal, etc). Reemplazan colores hardcoded
   por tokens semánticos. Especificidad mínima para que cada
   panel pueda seguir sobreescribiendo si necesita.
   ============================================================ */

.card {
  background: var(--ck-bg-surface);
  color: var(--ck-text-primary);
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-lg);
}

.modal,
.modal-content,
.modal-dialog {
  background: var(--ck-bg-surface);
  color: var(--ck-text-primary);
  border-color: var(--ck-border-subtle);
}

table {
  border-collapse: collapse;
  color: var(--ck-text-primary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
  background: var(--ck-bg-surface);
  color: var(--ck-text-primary);
  border: 1px solid var(--ck-border-default);
  border-radius: var(--ck-radius-md);
  font-size: var(--ck-text-md);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--ck-border-focus);
  box-shadow: 0 0 0 1px var(--ck-border-focus);
}

::placeholder { color: var(--ck-text-tertiary); opacity: 1; }

/* Iconos SVG inline (Lucide via sprite) */
.ck-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ck-icon-xs { width: var(--ck-icon-xs); height: var(--ck-icon-xs); }
.ck-icon-sm { width: var(--ck-icon-sm); height: var(--ck-icon-sm); }
.ck-icon-md { width: var(--ck-icon-md); height: var(--ck-icon-md); }
.ck-icon-lg { width: var(--ck-icon-lg); height: var(--ck-icon-lg); }