/* SIMA HelpDesk — design system (CSS plano, complementa Tailwind CDN) */

:root {
  --sima-50:  #FBF6FA;
  --sima-100: #F3E7EE;
  --sima-200: #E7CFDD;
  --sima-300: #D8AECB;
  --sima-400: #BF77A8;
  --sima-500: #A03B82;
  --sima-600: #7E2E66;
  --sima-700: #6B2C7E;
  --sima-800: #4E1F5B;
  --sima-900: #33133D;
}

[x-cloak] { display: none !important; }

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* Inputs */
.input-base {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid #e5e5e5;
  background: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #262626;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color .15s, box-shadow .15s;
}
.input-base::placeholder { color: #a3a3a3; }
.input-base:focus {
  outline: none;
  border-color: var(--sima-500);
  box-shadow: 0 0 0 3px rgba(160, 59, 130, 0.18);
}
.input-base:disabled { background: #f5f5f5; color: #737373; }

textarea.input-base { min-height: 100px; resize: vertical; }
select.input-base { background-image: none; }

/* Botones */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: transform .08s ease, background-color .15s, color .15s, box-shadow .15s;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--sima-700); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.btn-primary:hover { background: var(--sima-800); }
.btn-primary:active { transform: scale(0.99); }

.btn-secondary { background: #fff; color: #404040; border-color: #e5e5e5; }
.btn-secondary:hover { background: #fafafa; }

.btn-ghost { color: #525252; }
.btn-ghost:hover { background: #f5f5f5; }

.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }

/* Cards */
.card, .card-tight, .card-flat {
  background: #fff;
  border: 1px solid #f5f5f5;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.card-tight { padding: 1rem; }
.card-flat { box-shadow: none; }

/* Badges (semáforo) */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}
.badge-verde    { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.badge-amarillo { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.badge-rojo     { background: #fef2f2; color: #b91c1c; border-color: #fee2e2; }
.badge-gris     { background: #f5f5f5; color: #525252; border-color: #e5e5e5; }
.badge-info     { background: var(--sima-50); color: var(--sima-700); border-color: var(--sima-100); }

/* Sidebar */
.nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem;
  color: #525252;
  font-size: 0.875rem;
  transition: background-color .15s, color .15s;
  text-decoration: none;
}
.nav-item:hover { background: var(--sima-50); color: var(--sima-700); }
.nav-item svg { width: 16px; height: 16px; }
.nav-active { background: var(--sima-50); color: var(--sima-700); font-weight: 600; }

/* KPIs */
.kpi {
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #f5f5f5;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.kpi-num { font-size: 1.875rem; font-weight: 600; color: #262626; letter-spacing: -0.02em; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #737373; }

/* Tabla */
table.t-base { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
table.t-base thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #737373; font-weight: 500;
  padding: 0.85rem 1rem; border-bottom: 1px solid #f5f5f5;
}
table.t-base tbody tr { border-bottom: 1px solid #fafafa; transition: background-color .12s; }
table.t-base tbody tr:hover { background: #fafafa; }
table.t-base tbody td { padding: 0.85rem 1rem; vertical-align: middle; }

/* Timeline */
.tl-item { position: relative; padding-left: 2.25rem; padding-bottom: 1.5rem; }
.tl-item:before {
  content: ""; position: absolute; left: 0.75rem; top: 1rem; bottom: 0;
  width: 1px; background: #e5e5e5;
}
.tl-item:last-child:before { bottom: 1rem; }
.tl-dot {
  position: absolute; left: 0; top: 0.25rem;
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  display: grid; place-items: center;
  background: var(--sima-50); color: var(--sima-700);
  border: 1px solid var(--sima-100);
}
.tl-dot svg { width: 14px; height: 14px; }

/* Signature pad */
.sig-pad {
  width: 100%; height: 200px;
  background: #fff;
  border: 1px dashed #d4d4d4;
  border-radius: 1rem;
  touch-action: none;
}

@media print {
  body { background: white !important; }
  .no-print { display: none !important; }
  .page-break { page-break-before: always; }
  .nav-item, aside, header { display: none !important; }
}