/* =======================================================================
   RBValue – Sistema de diseño SaaS corporativo
   Tipografía : Inter (Google Fonts)
   Paleta base: Tailwind Slate  |  Color de marca: --app-primary (appsettings)
   ======================================================================= */

/* ── Variables de diseño ──────────────────────────────────────────── */
:root {
  --ds-bg:        #F8FAFC;
  --ds-surface:   #FFFFFF;
  --ds-border:    #E2E8F0;
  --ds-border-xs: #F1F5F9;
  --ds-text:      #0F172A;
  --ds-text-2:    #475569;
  --ds-text-3:    #94A3B8;
  --ds-radius:    12px;
  --ds-radius-sm: 8px;
  --ds-radius-xs: 6px;
  --ds-shadow:    0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --ds-shadow-lg: 0 10px 30px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05);
}

/* ── Base ─────────────────────────────────────────────────────────── */
html { font-size: 14px; }

@media (min-width: 768px) {
  html { font-size: 15px; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--ds-bg);
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 60px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}

/* ── Focus ring ───────────────────────────────────────────────────── */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(31, 110, 124, 0.15);
  outline: none;
}

/* ── Navbar ───────────────────────────────────────────────────────── */
.navbar-app {
  background-color: var(--app-primary);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.navbar-app .brand-logo img {
  filter: invert(1) grayscale(1) contrast(2) brightness(1.2);
  mix-blend-mode: screen;
}

.navbar-app .navbar-toggler-icon { filter: invert(1); }

.nav-link-app {
  color: var(--app-navbar-text) !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.4rem 0.65rem !important;
  border-radius: var(--ds-radius-xs);
  transition: background 0.15s;
}

.nav-link-app:visited { color: var(--app-navbar-text) !important; }

.nav-link-app:hover,
.nav-link-app:focus {
  color: var(--app-navbar-text-hover) !important;
  background: rgba(255,255,255,0.12);
}

.navbar-app .nav-item        { margin-right: 0.2rem; }
.navbar-app .navbar-nav:last-child .nav-item { margin-right: 0; }

/* ── Dropdown ─────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  box-shadow: var(--ds-shadow-lg);
  padding: 0.375rem;
  min-width: 210px;
}

.dropdown-item,
.dropdown-item:visited {
  border-radius: var(--ds-radius-xs);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #334155;
  background-color: transparent;
  transition: background 0.1s, color 0.1s;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: var(--ds-border-xs);
  color: var(--ds-text);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--app-primary);
  color: #FFFFFF;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  background: var(--ds-surface);
}

.card-header {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border-xs);
  border-radius: calc(var(--ds-radius) - 1px) calc(var(--ds-radius) - 1px) 0 0 !important;
  padding: 0.875rem 1.25rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ds-text-2);
  letter-spacing: 0.01em;
}

.card-body { padding: 1.25rem; }

.card-footer {
  background: #FAFBFC;
  border-top: 1px solid var(--ds-border-xs);
  border-radius: 0 0 calc(var(--ds-radius) - 1px) calc(var(--ds-radius) - 1px) !important;
  font-size: 0.8125rem;
  color: var(--ds-text-2);
}

/* ── Tablas ───────────────────────────────────────────────────────── */
.table { font-size: 0.875rem; color: var(--ds-text); }

.table > thead > tr > th {
  background: var(--ds-bg);
  color: var(--ds-text-2);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ds-border);
  padding: 0.75rem 1rem;
}

.table > tbody > tr > td {
  border-color: var(--ds-border-xs);
  padding: 0.75rem 1rem;
  color: #334155;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > td { background: #F8FAFC; }

/* ── Botones ──────────────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--ds-radius-sm);
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.btn-sm { border-radius: var(--ds-radius-xs); font-size: 0.8125rem; }
.btn-lg { border-radius: 10px; }

.btn-primary {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  box-shadow: 0 4px 12px rgba(31, 110, 124, 0.28);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-outline-primary:hover {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-outline-secondary {
  color: var(--ds-text-2);
  border-color: var(--ds-border);
  background: var(--ds-surface);
}

.btn-outline-secondary:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: var(--ds-text);
}

/* Alias de marca */
.btn-app {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: #ffffff;
  border-radius: var(--ds-radius-sm);
}

.btn-app:hover, .btn-app:focus {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: #ffffff;
}

.btn-outline-app {
  background-color: #ffffff;
  border-color: var(--app-primary);
  color: var(--app-primary);
  border-radius: var(--ds-radius-sm);
}

.btn-outline-app:hover, .btn-outline-app:focus {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: #ffffff;
}

/* ── Inputs y selects ─────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--ds-radius-sm);
  border-color: var(--ds-border);
  font-size: 0.875rem;
  color: var(--ds-text);
  background-color: var(--ds-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus, .form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(31, 110, 124, 0.12);
}

.form-control-sm, .form-select-sm {
  border-radius: var(--ds-radius-xs);
  font-size: 0.8125rem;
}

.form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ds-text-2);
}

.form-label-sm {
  font-size: 0.8125rem;
}

/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  border-radius: var(--ds-radius-xs);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* ── Alertas ──────────────────────────────────────────────────────── */
.alert {
  border-radius: 10px;
  border: none;
  font-size: 0.875rem;
}

.alert-info    { background: #EFF6FF; color: #1E40AF; }
.alert-success { background: #F0FDF4; color: #166534; }
.alert-warning { background: #FFFBEB; color: #92400E; }
.alert-danger  { background: #FEF2F2; color: #991B1B; }

/* ── Links ────────────────────────────────────────────────────────── */
.page-title { color: var(--app-primary); }

a { color: var(--app-primary); }

a:visited:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item) {
  color: var(--app-primary);
}

a:hover, a:focus { color: var(--app-primary-hover); }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer {
  font-size: 0.8125rem;
  color: var(--ds-text-3);
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border) !important;
  padding: 0.875rem 0;
}

/* ── Alertify ─────────────────────────────────────────────────────── */
.alertify .ajs-header {
  background-color: var(--app-primary);
  color: var(--app-navbar-text);
  border-bottom: 1px solid var(--app-primary-hover);
}

.ajs-footer .ajs-buttons .ajs-button {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  padding: .375rem .75rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
}

.ajs-footer .ajs-buttons .ajs-ok {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
}

.ajs-footer .ajs-buttons .ajs-ok:hover {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: #fff;
}

.ajs-footer .ajs-buttons .ajs-cancel {
  background-color: #fff;
  border-color: var(--ds-border);
  color: var(--ds-text-2);
}

.ajs-footer .ajs-buttons .ajs-cancel:hover {
  background-color: #F1F5F9;
  border-color: #CBD5E1;
  color: var(--ds-text);
}

/* ── Form floating placeholder ────────────────────────────────────── */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}