/* CAFCI Cloud v2 - Estilos personalizados */

:root {
  --color-primary: #0d6efd;
  --color-primary-dark: #0a58ca;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 80px;
  --navbar-height: 64px;
  --transition-speed: 0.3s;
}

/* Font global */
body {
  font-family: 'Outfit', sans-serif;
}

/* ============================================
   LOGIN - Trama geométrica (no se puede con Tailwind)
   ============================================ */

.login-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.login-left-panel {
  flex: 0 0 70%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

/* Geometric pattern (trama) */
.login-left-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background-image:
    linear-gradient(30deg, #0d6efd 12%, transparent 12.5%, transparent 87%, #0d6efd 87.5%, #0d6efd),
    linear-gradient(150deg, #0d6efd 12%, transparent 12.5%, transparent 87%, #0d6efd 87.5%, #0d6efd),
    linear-gradient(30deg, #0d6efd 12%, transparent 12.5%, transparent 87%, #0d6efd 87.5%, #0d6efd),
    linear-gradient(150deg, #0d6efd 12%, transparent 12.5%, transparent 87%, #0d6efd 87.5%, #0d6efd),
    linear-gradient(60deg, #0a58ca 25%, transparent 25.5%, transparent 75%, #0a58ca 75%, #0a58ca),
    linear-gradient(60deg, #0a58ca 25%, transparent 25.5%, transparent 75%, #0a58ca 75%, #0a58ca);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

.login-left-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 50%, rgba(13, 110, 253, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(10, 88, 202, 0.1) 0%, transparent 50%);
}

.login-branding {
  position: relative;
  z-index: 2;
  text-align: center;
}

.login-logo {
  max-width: 500px;
}

.login-right-panel {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background: #ffffff;
}

.login-form-container {
  width: 100%;
  max-width: 480px;
}

@media (max-width: 992px) {
  .login-wrapper {
    flex-direction: column;
  }
  .login-left-panel {
    flex: 0 0 auto;
    min-height: 30vh;
    padding: 40px 20px;
  }
  .login-right-panel {
    flex: 1;
    padding: 40px 20px;
  }
  .login-logo {
    max-width: 250px;
  }
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

.main-wrapper {
  display: flex;
  min-height: 100vh;
  background: #f1f5f9;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left var(--transition-speed) ease;
}

.main-wrapper.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-speed) ease;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.sidebar-logo {
  max-width: 160px;
  height: auto;
  transition: all var(--transition-speed) ease;
}

.sidebar-nav {
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-section {
  padding: 0 20px;
  margin-bottom: 10px;
}

.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  margin: 2px 0;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-left-color: rgba(59, 130, 246, 0.5);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, transparent 100%);
  border-left-color: #3b82f6;
}

.nav-icon {
  width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}

.nav-text {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-speed) ease;
}

/* Nav Submenu */
.nav-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 24px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  margin: 2px 0;
  cursor: pointer;
  background: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.nav-submenu-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-left-color: rgba(59, 130, 246, 0.5);
}

.nav-submenu-toggle.active {
  color: #fff;
  border-left-color: #3b82f6;
}

.nav-submenu-toggle .nav-submenu-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-submenu-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: rgba(255, 255, 255, 0.4);
}

.nav-submenu-arrow.rotate-90 {
  transform: rotate(90deg);
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px 10px 58px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.nav-subitem:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-subitem.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
  border-left-color: #3b82f6;
}

/* Nested submenu: un nav-subitem que también es toggle de un sub-submenú */
.nav-subitem.nav-submenu-toggle {
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  background: none;
}

/* Items del sub-submenú: indentación más profunda */
.nav-subitems .nav-subitems .nav-subitem {
  padding-left: 78px;
}

/* Collapsed sidebar: hide submenu text and items */
.main-wrapper.sidebar-collapsed .nav-submenu-arrow,
.main-wrapper.sidebar-collapsed .nav-submenu-toggle .nav-text {
  opacity: 0;
  width: 0;
}

.main-wrapper.sidebar-collapsed .nav-submenu-toggle {
  justify-content: center;
  padding: 14px;
}

.main-wrapper.sidebar-collapsed .nav-subitems {
  display: none;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0;
}

/* Sidebar Collapsed State */
.main-wrapper.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}

.main-wrapper.sidebar-collapsed .sidebar-logo {
  max-width: 40px;
}

.main-wrapper.sidebar-collapsed .nav-section-title,
.main-wrapper.sidebar-collapsed .nav-text {
  opacity: 0;
  width: 0;
}

.main-wrapper.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 14px;
}

.main-wrapper.sidebar-collapsed .sidebar-footer .nav-text {
  display: none;
}

/* Sidebar Overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* Mobile Sidebar */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
  }

  .main-wrapper.sidebar-collapsed .sidebar {
    width: var(--sidebar-width);
  }

  .main-wrapper.sidebar-collapsed .sidebar-logo {
    max-width: 160px;
  }

  .main-wrapper.sidebar-collapsed .nav-section-title,
  .main-wrapper.sidebar-collapsed .nav-text {
    opacity: 1;
    width: auto;
  }

  .main-wrapper.sidebar-collapsed .nav-item {
    justify-content: flex-start;
    padding: 14px 24px;
  }
}

/* ============================================
   TOP NAVBAR
   ============================================ */

.top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--navbar-height);
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.sidebar-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.sidebar-toggle:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.navbar-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.navbar-icon-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-menu-btn:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

/* Avatar colors by user type */
.user-avatar.avatar-owner,
.user-avatar-lg.avatar-owner {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.user-avatar.avatar-cafci,
.user-avatar-lg.avatar-cafci {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.user-avatar.avatar-asociada,
.user-avatar-lg.avatar-asociada {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.user-avatar.avatar-no_asociada,
.user-avatar-lg.avatar-no_asociada {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.user-avatar.avatar-cnv,
.user-avatar-lg.avatar-cnv {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.user-avatar.avatar-mercado,
.user-avatar-lg.avatar-mercado {
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  z-index: 1000;
}

.dropdown-header {
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.dropdown-body {
  padding: 8px;
}

.dropdown-footer {
  padding: 8px;
  border-top: 1px solid #e2e8f0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.dropdown-item:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.dropdown-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.user-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.badge-purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.badge-blue {
  background: #dbeafe;
  color: #2563eb;
}

.badge-green {
  background: #dcfce7;
  color: #16a34a;
}

.badge-amber {
  background: #fef3c7;
  color: #d97706;
}

.badge-slate {
  background: #f1f5f9;
  color: #475569;
}

.badge-teal {
  background: #ccfbf1;
  color: #0d9488;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title i {
  color: #3b82f6;
}

/* ============================================
   CARDS & PANELS
   ============================================ */

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.card.card--overflow-visible {
  overflow: visible;
}

.card.card--overflow-visible > *:first-child {
  border-radius: 16px 16px 0 0;
}

.card.card--overflow-visible tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

.card.card--overflow-visible tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafafa;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title i {
  color: #64748b;
}

.card-body {
  padding: 24px;
}

/* ============================================
   DATA TABLE
   ============================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: #f8fafc;
}

.data-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e2e8f0;
}

.data-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table Cell Variants */
.cell-primary {
  font-weight: 500;
  color: #1e293b;
}

.cell-secondary {
  font-size: 13px;
  color: #64748b;
}

.cell-muted {
  color: #94a3b8;
}

/* ============================================
   BADGES
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.badge-success {
  background: #dcfce7;
  color: #16a34a;
}

.badge-danger {
  background: #fee2e2;
  color: #dc2626;
}

.badge-warning {
  background: #fef3c7;
  color: #d97706;
}

.badge-info {
  background: #dbeafe;
  color: #2563eb;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.btn-secondary {
  background: #f1f5f9;
  color: #475569;
}

.btn-secondary:hover {
  background: #e2e8f0;
}

/* Action buttons container */
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

/* Fix for button_to forms */
.action-buttons form {
  display: flex;
  margin: 0;
  padding: 0;
}

.btn-icon,
a.btn-icon,
button.btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-icon:hover {
  background: #f1f5f9;
}

.btn-icon:disabled,
.btn-icon[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon.text-blue-600:hover {
  background: #dbeafe;
}

.btn-icon.text-amber-600:hover {
  background: #fef3c7;
}

.btn-icon.text-red-600:hover {
  background: #fee2e2;
}

.btn-icon.text-green-600:hover {
  background: #dcfce7;
}

.btn-icon.text-indigo-600:hover {
  background: #e0e7ff;
}

/* ============================================
   STAT CARDS
   ============================================ */

.stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.stat-icon.indigo {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #4f46e5;
}

.stat-icon.green {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
}

.stat-icon.amber {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
}

.stat-icon.blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
}

.stat-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #1e293b;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

.form-label i {
  color: #94a3b8;
  margin-right: 6px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: #fff;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
  color: #94a3b8;
}

.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 20px;
  appearance: none;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Form Error States */
.form-input.field-error,
.form-select.field-error {
  border-color: #dc2626;
  background-color: #fef2f2;
}

.form-input.field-error:focus,
.form-select.field-error:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.field-error-message {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #dc2626;
}

.field-error-message i {
  font-size: 12px;
}

/* Form group with error */
.form-group.has-error .form-label {
  color: #dc2626;
}

.form-group.has-error .form-label i {
  color: #dc2626;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.quick-action-btn:hover {
  transform: translateY(-2px);
}

.quick-action-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quick-action-btn.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-muted {
  color: #64748b;
}

.font-medium {
  font-weight: 500;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  gap: 16px;
  flex-wrap: wrap;
}

.pagination-limit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

.pagination-select {
  padding: 6px 28px 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #1e293b;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 6px center;
  background-size: 16px;
  appearance: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.pagination-info {
  font-size: 13px;
  color: #64748b;
}

.pagination-info strong {
  color: #1e293b;
  font-weight: 600;
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-btn {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-btn:hover:not(.disabled):not(.active) {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}

.pagination-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-color: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.pagination-btn.disabled {
  color: #cbd5e1;
  background: #f8fafc;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.pagination-gap {
  padding: 0 8px;
  color: #94a3b8;
  font-size: 13px;
}

@media (max-width: 768px) {
  .pagination-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .pagination-limit,
  .pagination-info,
  .pagination-nav {
    justify-content: center;
  }
}

/* ============================================
   FILTERS BAR
   ============================================ */

.filters-bar {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filters-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-search {
  position: relative;
  flex: 1;
  min-width: 250px;
}

.filter-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
}

.filter-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: #f8fafc;
}

.filter-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-input::placeholder {
  color: #94a3b8;
}

.filter-group {
  flex-shrink: 0;
}

.filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
  letter-spacing: 0.025em;
}

.filter-select {
  padding: 10px 36px 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #475569;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 18px;
  appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
}

.filter-select:focus {
  outline: none;
  border-color: #3b82f6;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-clear-filters {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fee2e2;
  color: #dc2626;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-clear-filters:hover {
  background: #fecaca;
}

@media (max-width: 768px) {
  .filters-form {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search {
    min-width: 100%;
  }

  .filter-group {
    width: 100%;
  }

  .filter-select {
    width: 100%;
  }
}

/* ============================================
   SORTABLE TABLE HEADERS
   ============================================ */

.sortable-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.sortable-header:hover {
  color: #3b82f6;
}

.sortable-header.active {
  color: #3b82f6;
}

.sortable-header i {
  font-size: 10px;
  opacity: 0.5;
}

.sortable-header:hover i,
.sortable-header.active i {
  opacity: 1;
}

/* Fix for sortable headers inside table cells */
th.sortable-header {
  display: table-cell;
}

th.sortable-header i {
  margin-left: 4px;
}

/* ============================================
   TABULAR NUMBERS (MONOSPACE)
   ============================================ */

.tabular-nums {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   Business Date Picker
   ============================================ */

.bdp-display {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 160px;
  color: #334155;
}

.bdp-display:hover {
  border-color: #3b82f6;
}

.bdp-display-icon {
  color: #94a3b8;
  font-size: 14px;
  transition: color 0.15s ease;
}

.bdp-display:hover .bdp-display-icon {
  color: #3b82f6;
}

.bdp-calendar {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: 12px;
  margin-top: 4px;
  width: 280px;
}

.bdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bdp-month-year {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.bdp-nav {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f1f5f9;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s ease;
}

.bdp-nav:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.bdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}

.bdp-weekdays span {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  padding: 4px 0;
}

/* Sábado y Domingo headers */
.bdp-weekdays span:nth-child(6),
.bdp-weekdays span:nth-child(7) {
  color: #cbd5e1;
}

.bdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.bdp-day {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0 auto;
}

.bdp-day:hover:not(.bdp-disabled):not(.bdp-empty):not(.bdp-selected) {
  background: #eff6ff;
  color: #2563eb;
}

.bdp-day.bdp-selected {
  background: #3b82f6;
  color: #fff;
  font-weight: 600;
}

.bdp-day.bdp-today {
  border: 1.5px solid #3b82f6;
  font-weight: 600;
}

.bdp-day.bdp-disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.bdp-day.bdp-weekend.bdp-disabled {
  color: #e2e8f0;
}

.bdp-day.bdp-holiday.bdp-disabled {
  color: #fca5a5;
  text-decoration: line-through;
}

.bdp-day.bdp-empty {
  cursor: default;
}

.bdp-calendar.hidden {
  display: none;
}

/* ============================================
   Toggle Switch
   ============================================ */

.bdp-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
}

.bdp-toggle:hover {
  background: #94a3b8;
}

.bdp-toggle:focus {
  outline: none;
}

.bdp-toggle-on {
  background: #22c55e;
}

.bdp-toggle-on:hover {
  background: #16a34a;
}

.bdp-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.bdp-toggle-on .bdp-toggle-knob {
  transform: translateX(20px);
}

/* Cabecera de la grilla de importación de Operaciones Excepcionales.
   Queda pegada bajo el navbar mientras se scrollea la lista de archivos, para que
   el contador global (4 de 11) se vea siempre, sin importar en qué fila estés.
   El z-index queda por debajo del navbar (100) y por encima de la tabla. */
.oe-sticky-header {
  position: sticky;
  top: var(--navbar-height);
  z-index: 20;
}

/* Botón "Importar" de esa misma pantalla, deshabilitado.
   `.btn` no trae ningún estilo para disabled, así que el botón conservaba el
   gradiente azul de .btn-primary y el cursor pointer; peor todavía, .btn-primary:hover
   le aplicaba el translateY y el glow igual que a uno activo, y al pasar por encima
   no se distinguía de uno que funciona.
   Se cambia el color en vez de bajar la opacidad: un azul al 40% sobre fondo blanco
   se sigue leyendo como un botón celeste, no como uno apagado.
   Va acotado a este botón a propósito. La misma regla sobre `.btn` alcanzaría a toda
   la app, incluidos los botones que form_submit_controller deshabilita mientras el
   formulario viaja — y ahí "deshabilitado" significa "ocupado", no "todavía no podés".
   Sin pointer-events: none, que anularía el cursor: not-allowed, que es justamente
   la señal que falta. */
.oe-import-btn:disabled,
.oe-import-btn[disabled] {
  background: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

/* Sin esto .btn-primary:hover empata en especificidad y depende del orden. */
.oe-import-btn:disabled:hover,
.oe-import-btn[disabled]:hover {
  background: #e2e8f0;
  transform: none;
  box-shadow: none;
}

/* Botón "Empezar de nuevo", deshabilitado mientras la tanda está en vuelo.
   Se deshabilita en vez de esconderse: recargar no cancela nada —los jobs ya están en
   Sidekiq y se siguen insertando—, así que lo que hay que comunicar es "ahora no",
   no "esto no existe". Escondiéndolo, además, el grupo de botones saltaba de ancho
   justo cuando el usuario está mirando esa zona.
   Mismo criterio que .oe-import-btn: color propio en vez de opacity, acotado a este
   botón para no pisar los disabled de toda la app, y sin pointer-events: none para
   conservar el cursor: not-allowed. Los tonos son los de .btn-secondary, un escalón
   más apagados. */
.oe-restart-btn:disabled,
.oe-restart-btn[disabled] {
  background: #f8fafc;
  color: #cbd5e1;
  cursor: not-allowed;
}

.oe-restart-btn:disabled:hover,
.oe-restart-btn[disabled]:hover {
  background: #f8fafc;
  transform: none;
  box-shadow: none;
}

/* Píldora de "Finalizado" en la cabecera de la grilla. Entra con un destello corto:
   mientras importa el usuario está mirando las filas, no la cabecera, y sin algo de
   movimiento el cambio pasa desapercibido.
   Una sola vez, no en loop: llamar la atención una vez es un aviso, repetirlo es
   ruido al lado de una tabla que el usuario todavía tiene que leer. */
@keyframes oe-summary-in {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.oe-summary-done {
  animation: oe-summary-in 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .oe-summary-done { animation: none; }
}

/* Avance de toda la tanda, debajo del "Importando 3 de 11" de la cabecera.
   Antes era una línea de 2px pegada al borde inferior de la cabecera, sin carril:
   crecía sobre el borde y no se veía contra qué. Acá el carril gris da la referencia
   —cuánto falta— que una línea suelta no puede dar, y estando bajo el texto se lee
   junto con el número en vez de competir con las barras de cada fila.
   El ancho es fijo: el texto de arriba cambia de largo (de "Importando 3 de 11" a la
   píldora con chips) y si la barra lo siguiera, se estiraría y encogería sola. */
.oe-batch-bar {
  width: 180px;
  height: 4px;
  border-radius: 9999px;
  background: #e5e7eb;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Visible desde que se manda la tanda y queda visible al terminar: el verde al 100%
   es el que cierra la lectura. Se apaga sólo cuando no hay tanda que mostrar. */
.oe-batch-bar.is-active {
  opacity: 1;
}

.oe-batch-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #3b82f6;
  transition: width 0.3s ease, background-color 0.4s ease;
}

/* Al terminar cambia de color en vez de desaparecer. Verde contesta "¿ya está?",
   la misma pregunta que contesta la píldora de Finalizado, y por el mismo criterio
   es verde aunque algún archivo haya fallado: eso lo dicen los chips. */
.oe-batch-bar.is-done .oe-batch-bar-fill {
  background: #22c55e;
}

/* Destello de la fila a la que llevó un chip del resumen. Sin esto el scroll te deja
   en algún lugar de la tabla y no sabés a cuál de las filas te trajo.
   Es un fundido de color, no un movimiento, así que no se anula con
   prefers-reduced-motion; lo que sí se desactiva ahí es el scroll suave, desde el JS. */
@keyframes oe-row-flash {
  0%   { background-color: rgba(59, 130, 246, 0.18); }
  100% { background-color: transparent; }
}

.oe-row-flash {
  animation: oe-row-flash 1.2s ease-out;
}