/* ═══════════════════════════════════════════
   KeeCRM v6 — Estilos compartidos "Tinta"
   ═══════════════════════════════════════════ */

/* ── Variables globales ── */
:root {
  --mesh-1: radial-gradient(circle at 18% 14%, rgba(14, 165, 164, 0.14) 0, transparent 42%);
  --mesh-2: radial-gradient(circle at 82% 16%, rgba(249, 115, 22, 0.12) 0, transparent 36%);
  --mesh-3: radial-gradient(circle at 62% 78%, rgba(16, 26, 43, 0.09) 0, transparent 42%);
}

/* ── Base ── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: linear-gradient(160deg, #f8fbff 0%, #f3f7fb 45%, #eef3f8 100%);
  color: #101A2B;
}

.display-font { font-family: 'Space Grotesk', sans-serif; }
.mesh { background-image: var(--mesh-1), var(--mesh-2), var(--mesh-3); }

.glass {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(10px);
}

/* ── Sidebar ── */
.sidebar-link { transition: all .15s ease; border-radius: 0.5rem; }
.sidebar-link:hover { background: #FFFFFF; }
.sidebar-link.active { background: #101A2B; color: #FFFFFF; }

.menu-group-content { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.menu-group.open .menu-group-content { max-height: 250px; }
.menu-group .chev { transition: transform .2s ease; }
.menu-group.open .chev { transform: rotate(90deg); }

/* ── Scrollbar ── */
.scroll-thin::-webkit-scrollbar { width: 4px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08); border-radius: 99px; }

/* ── Card hover ── */
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(16, 26, 43, 0.18); }

/* ── Stagger animation ── */
.stagger > * { animation: rise .55s cubic-bezier(.22,1,.36,1) both; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .18s; }
.stagger > *:nth-child(5) { animation-delay: .24s; }

/* ── Command Palette backdrop ── */
.cmd-backdrop { background: rgba(16, 26, 43, 0.55); backdrop-filter: blur(4px); }

/* ── Formularios ── */
.form-input {
  width: 100%;
  font-size: 0.875rem;
  background: #FFFFFF;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: #0EA5A4;
  box-shadow: 0 0 0 3px rgba(14, 165, 164, 0.15);
}
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #101A2B;
  margin-bottom: 0.375rem;
}
.form-hint {
  font-size: 0.75rem;
  color: #7C8AA1;
  margin-top: 0.25rem;
}

/* ── Detail pages ── */
.detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #7C8AA1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
}
.detail-value {
  font-size: 0.9375rem;
  color: #101A2B;
  font-weight: 500;
}

/* ── Tabla → Cards en móvil ── */
@media (max-width: 767px) {
  .table-responsive thead { display: none; }
  .table-responsive tbody { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; }
  .table-responsive tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.7);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(16, 26, 43, 0.03), 0 6px 20px -6px rgba(16, 26, 43, 0.08);
  }
  .table-responsive td { padding: 0; }
  .table-responsive td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7C8AA1;
    margin-bottom: 0.125rem;
  }
  .table-responsive td.cell-primary { grid-column: 1 / -1; }
  .table-responsive td.cell-actions {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    padding-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
  }
  .table-responsive td.cell-checkbox { display: none; }
}