/* ============================================================
   URBEX Real Estate - Hoja de estilos del sistema
   (base copiada del sistema de DR Desarrollos)
   ============================================================ */

/* --- CSS Variables / Design Tokens --- */
:root {
  /* Sidebar */
  --sidebar-bg: #252526;
  --sidebar-hover: #313133;
  --sidebar-active: #3b3b3e;
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 60px;
  --sidebar-text: #a0aec0;
  --sidebar-text-active: #ffffff;

  /* Color de marca: dorado oscuro (el dorado claro no se lee con letra blanca encima). */
  --primary: #8a7543;
  --primary-dark: #6f5e35;
  --primary-light: #beaf87;
  --primary-bg: rgba(190, 175, 135, 0.18);

  /* "Accion" / "exito" - INDEPENDIENTE del color de marca.
     Lo usan botones primarios de accion (Sincronizar, Confirmar, Marcar,
     Aplicar), badges de estado positivo (Pagada, Entregado, Listo) y toasts
     de exito. Asi siguen siendo verdes aunque se cambie la marca. */
  --success: #10b981;
  --success-dark: #059669;
  --success-bg: rgba(16, 185, 129, 0.12);

  /* Semantic colors */
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);

  /* Backgrounds */
  --bg: #f0f2f5;
  --card-bg: #ffffff;
  --topbar-bg: #ffffff;

  /* Text */
  --text-primary: #1a1a2e;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;

  /* Misc */
  --border: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --topbar-height: 56px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fadeIn 0.4s ease;
}

.login-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  color: #ffffff;
}

.login-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
}

.login-logo svg {
  width: 100%;
  height: 100%;
}

.login-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.login-header p {
  font-size: 0.85rem;
  opacity: 0.9;
}

.login-body {
  padding: 1.5rem 2rem;
}

.login-error {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.login-error.visible {
  display: flex;
}

.login-footer {
  padding: 1rem 2rem;
  text-align: center;
  border-top: 1px solid var(--border);
  background: #f8fafc;
}

.login-footer p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.login-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition);
  margin-top: 0.5rem;
}

.login-btn:hover {
  background: var(--primary-dark);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.form-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
  background: #ffffff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.form-input::placeholder {
  color: var(--text-muted);
}

/* ============================================================
   LAYOUT - SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width var(--transition), transform var(--transition);
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
  flex-shrink: 0;
}

.sidebar-brand-icon svg {
  width: 100%;
  height: 100%;
}

.sidebar-brand-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

/* --- Sidebar Navigation --- */
.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0.5rem;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition);
  margin-bottom: 0.125rem;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}

.nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
}

.nav-item.active .nav-icon {
  color: var(--primary);
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
}

.nav-label {
  white-space: nowrap;
  flex: 1;
}

.nav-badge {
  background: #f97316;          /* orange-500 */
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  min-width: 1.25rem;
  text-align: center;
  margin-left: auto;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
}

/* --- Nav Group (Collapsible Menu) --- */
.nav-group {
  margin-bottom: 0.125rem;
}

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition);
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.nav-group-header:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}

.nav-group.has-active > .nav-group-header {
  color: var(--sidebar-text-active);
}

.nav-group.has-active > .nav-group-header .nav-icon {
  color: var(--primary);
}

.nav-group-arrow {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.5;
}

.nav-group-arrow svg {
  width: 100%;
  height: 100%;
}

.nav-group.expanded > .nav-group-header .nav-group-arrow {
  transform: rotate(90deg);
  opacity: 0.8;
}

.nav-group-children {
  padding-left: 0.5rem;
  overflow: hidden;
}

.nav-group-children .nav-item {
  padding-left: 1.25rem;
  font-size: 0.85rem;
}

.nav-group-children .nav-icon {
  width: 17px;
  height: 17px;
}

/* Subgrupo anidado (ej: "Full" adentro de MercadoLibre, "Armado de pedidos" adentro de
   Gestion): mismo sangrado que un item de primer nivel, y sus propios hijos un escalon
   mas adentro todavia. */
.nav-group-children .nav-group-header {
  padding-left: 1.25rem;
  font-size: 0.85rem;
}

.nav-group-children .nav-group-children .nav-item {
  padding-left: 2rem;
}

/* Collapsed sidebar: hide group labels and arrows, show only icon */
.sidebar.collapsed .nav-group-header {
  justify-content: center;
  padding: 0.625rem;
  gap: 0;
}

.sidebar.collapsed .nav-group-arrow {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

.sidebar.collapsed .nav-group-children {
  padding-left: 0;
}

.sidebar.collapsed .nav-group-children .nav-item {
  padding-left: 0.625rem;
}

/* --- Sidebar User Profile --- */
.sidebar-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sidebar-active);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.sidebar-user-avatar svg {
  width: 18px;
  height: 18px;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  display: block;
  font-size: 0.7rem;
  color: var(--sidebar-text);
  text-transform: capitalize;
}

/* --- Sidebar User Menu Button & Dropdown --- */
.sidebar-menu-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  transition: all var(--transition);
  flex-shrink: 0;
}

.sidebar-menu-btn:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}

.sidebar-menu-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}

.sidebar-menu-icon.rotated {
  transform: rotate(180deg);
}

.sidebar-user-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0.5rem;
  right: 0.5rem;
  background: #232340;
  border-radius: var(--radius-sm);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  padding: 0.375rem;
  margin-bottom: 0.375rem;
  animation: fadeIn 0.15s ease;
  z-index: 110;
}

.sidebar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sidebar-text);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  background: none;
}

.sidebar-dropdown-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}

.sidebar-dropdown-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.sidebar-dropdown-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-dropdown-icon svg {
  width: 100%;
  height: 100%;
}

/* --- Sidebar Collapse Button (inside brand header) --- */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  background: none;
  flex-shrink: 0;
  padding: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}

.sidebar-collapse-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-collapse-icon svg {
  width: 100%;
  height: 100%;
}

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

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-menu-btn,
.sidebar.collapsed .sidebar-dropdown-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--transition);
}

.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 1.25rem 0.5rem;
  gap: 0;
}

.sidebar.collapsed .sidebar-collapse-btn {
  margin-left: 0;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 0.625rem;
  gap: 0;
}

.sidebar.collapsed .sidebar-nav {
  padding: 0.75rem 0.25rem;
}

.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 0.875rem 0.5rem;
  gap: 0;
}

.sidebar.collapsed .sidebar-user-dropdown {
  left: calc(var(--sidebar-collapsed-width) - 8px);
  right: auto;
  bottom: 0;
  width: 180px;
  margin-bottom: 0;
}

.main-collapsed {
  margin-left: var(--sidebar-collapsed-width) !important;
}

/* ============================================================
   LAYOUT - MAIN AREA
   ============================================================ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}

/* --- Top Bar --- */
.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-height);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-menu-btn {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.topbar-menu-btn svg {
  width: 20px;
  height: 20px;
}

.topbar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: all var(--transition);
}

.topbar-btn:hover {
  background: var(--primary-bg);
  color: var(--primary);
}

.topbar-btn svg {
  width: 18px;
  height: 18px;
}

/* --- Content Area --- */
.content {
  flex: 1;
  padding: 1.5rem;
}

/* ============================================================
   VIEW HEADER
   ============================================================ */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.view-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.view-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 3px solid transparent;
  transition: box-shadow var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
}

.stat-card--primary {
  border-top-color: var(--primary);
}

.stat-card--info {
  border-top-color: var(--info);
}

.stat-card--warning {
  border-top-color: #f59e0b;
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card--primary .stat-card-icon {
  background: var(--primary-bg);
  color: var(--primary);
}

.stat-card--info .stat-card-icon {
  background: var(--info-bg);
  color: var(--info);
}

.stat-card--warning .stat-card-icon {
  background: #fef3c7;
  color: #d97706;
}

.stat-card-icon svg {
  width: 22px;
  height: 22px;
}

.stat-card-body {
  display: flex;
  flex-direction: column;
}

.stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-card-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

/* ============================================================
   TEMPLATE MESSAGE (welcome / CTA)
   ============================================================ */
.template-message {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--border);
}

.template-message-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--primary);
}

.template-message-icon svg {
  width: 100%;
  height: 100%;
}

.template-message h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.template-message p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto 1.25rem;
  line-height: 1.6;
}

.template-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.suggestion-tag {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--primary-bg);
  color: var(--primary-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* ============================================================
   CARDS (generic)
   ============================================================ */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.card-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card-body {
  padding: 1.25rem;
}

/* ============================================================
   CONFIG GRID
   ============================================================ */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Config stat cards row */
.config-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.config-stat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.config-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.config-stat-icon svg {
  width: 22px;
  height: 22px;
}

.config-stat-info {
  display: flex;
  flex-direction: column;
}

.config-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.config-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Config tables list */
.config-tables-body {
  padding: 0 !important;
}

.config-tables-list {
  width: 100%;
  border-collapse: collapse;
}

.config-tables-list thead th {
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: whitesmoke;
}

.config-tables-list tbody td {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.config-tables-list tbody tr:last-child td {
  border-bottom: none;
}

.config-tables-total {
  background: #f9fafb;
}

.config-tables-total td {
  border-top: 2px solid var(--border) !important;
}

.config-table-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Config section titles */
.config-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

.config-section-title svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.config-section-subtitle {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

/* Usage bars */
.config-usage-bar {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.config-usage-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.usage-ok { background: #10b981; }
.usage-warning { background: #f59e0b; }
.usage-critical { background: #ef4444; }

/* CPU detail */
.config-cpu-detail {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 1rem;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.config-cpu-detail .info-label {
  font-weight: 600;
  color: var(--text-primary);
}

/* Brand config section */
.config-brand-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  width: fit-content;
}

.config-brand-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
}

.config-brand-icon svg {
  width: 32px;
  height: 32px;
}

.config-brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
}

.config-marca-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.config-marca-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.config-marca-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.config-marca-colors {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.config-color-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.config-color-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.config-color-row input[type="color"] {
  width: 44px;
  height: 44px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
  background: white;
}

.config-color-hex {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: #f1f5f9;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
}

/* Icon grid selector */
.config-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 0.5rem;
  max-width: 500px;
}

.config-icon-option {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.config-icon-option svg {
  width: 22px;
  height: 22px;
}

.config-icon-option:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.config-icon-option.selected {
  color: var(--primary);
  border-width: 2px;
}

/* Logo upload */
.config-brand-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
}

.config-logo-upload {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.config-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--primary-bg);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.config-upload-btn:hover {
  background: var(--primary);
  color: white;
}

.config-upload-btn input[type="file"],
.config-upload-btn ::deep input[type="file"] {
  display: none;
}

.config-remove-logo {
  padding: 0.35rem 0.75rem;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.config-remove-logo:hover {
  background: var(--danger);
  color: white;
}

/* Sidebar brand logo image */
.sidebar-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: contain;
}

/* Collapsible config sections */
.config-section-chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}

.config-section-chevron svg {
  width: 18px;
  height: 18px;
}

.config-section-chevron.open {
  transform: rotate(90deg);
}

.config-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.config-section-body.expanded {
  max-height: 5000px;
  opacity: 1;
}

.config-collapsible {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  transition: background 0.2s ease;
}

.config-collapsible:hover {
  background: #f1f5f9;
  opacity: 1;
}

/* Card collapsible - secciones dentro de un card */
.config-card-collapsible {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.config-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.config-card-header:hover {
  background: #f1f5f9;
}

.config-card-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.config-card-header-left svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.config-card-header-title {
  font-size: 1.05rem;
}

.config-card-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.config-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.config-card-body.expanded {
  max-height: 5000px;
  opacity: 1;
  padding: 1rem;
}

/* Mini brand preview in card header */
.config-brand-mini-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  color: #fff;
}

.config-brand-mini-img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
}

.config-brand-mini-icon svg {
  width: 18px;
  height: 18px;
}

.config-brand-mini-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Config stat card with usage bar */
.config-stat-card {
  flex-wrap: wrap;
}

.config-stat-clickable {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.config-stat-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ============================================================
   INFO TABLE (key-value pairs)
   ============================================================ */
.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table tr:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.info-table td {
  padding: 0.75rem 0;
  font-size: 0.9rem;
}

.info-label {
  color: var(--text-secondary);
  font-weight: 500;
  width: 40%;
}

.info-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* ============================================================
   STATUS BADGE
   ============================================================ */
.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-active {
  background: var(--success-bg);
  color: var(--success-dark);
}

/* Stock badges */
.stock-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 2rem;
  text-align: center;
}

.stock-critical {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.stock-warning {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #fdba74;
}

.stock-healthy {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

/* Publicacion en Mercado Envios Full */
.full-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  vertical-align: middle;
}

.full-badge-sin-stock {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* Permission tree */
.permission-tree {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.75rem;
  max-height: 340px;
  overflow-y: auto;
  background: #fafafa;
}

.permission-group {
  margin-bottom: 0.5rem;
}

.permission-group:last-child {
  margin-bottom: 0;
}

.permission-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.25rem;
  cursor: pointer;
  border-radius: 4px;
}

.permission-group-header:hover {
  background: #f0f0f0;
}

.permission-group-count {
  font-size: 0.8rem;
  color: #888;
  margin-left: auto;
}

.permission-group-items {
  padding-left: 1.75rem;
  border-left: 2px solid #e8e8e8;
  margin-left: 0.5rem;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.92rem;
}

.permission-item:hover {
  background: #f0f0f0;
}

.permission-tree input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
  cursor: pointer;
}

.permission-admin-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  color: #1e40af;
  font-size: 0.92rem;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 3rem));
}

.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: auto;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background: var(--success);
}

.toast-error {
  background: var(--danger);
}

.toast-info {
  background: var(--info);
}

.toast-warning {
  background: var(--warning);
}

/* ============================================================
   SIDEBAR OVERLAY (mobile)
   ============================================================ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--transition);
}

.sidebar-overlay.visible {
  opacity: 1;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
  }

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

  .sidebar.collapsed .sidebar-brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .sidebar-user-info,
  .sidebar.collapsed .sidebar-menu-btn,
  .sidebar.collapsed .sidebar-dropdown-text {
    opacity: 1;
    width: auto;
    pointer-events: auto;
  }

  .sidebar.collapsed .sidebar-brand,
  .sidebar.collapsed .nav-item,
  .sidebar.collapsed .sidebar-user {
    justify-content: initial;
    gap: 0.75rem;
  }

  .sidebar.collapsed .nav-group-header {
    justify-content: initial;
    gap: 0.75rem;
  }

  .sidebar.collapsed .nav-group-arrow {
    opacity: 0.5;
    width: 16px;
    overflow: visible;
    pointer-events: auto;
  }

  .sidebar.collapsed .nav-group-children .nav-item {
    padding-left: 1.25rem;
  }

  .sidebar-collapse-btn {
    display: none;
  }

  .sidebar-overlay {
    display: block;
  }

  .main-wrapper,
  .main-collapsed {
    margin-left: 0 !important;
  }

  .topbar-menu-btn {
    display: flex;
  }

  .content {
    padding: 1rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .config-grid {
    grid-template-columns: 1fr;
  }

  .template-message {
    padding: 1.5rem 1rem;
  }
}

/* ============================================================
   RESPONSIVE - SMALL MOBILE
   ============================================================ */
@media (max-width: 480px) {
  html {
    font-size: 13px;
  }

  .login-card {
    border-radius: var(--radius-md);
  }

  .login-header {
    padding: 1.5rem 1.5rem 1.25rem;
  }

  .login-body {
    padding: 1.25rem 1.5rem;
  }

  .view-header h2 {
    font-size: 1.25rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-card-value {
    font-size: 1.25rem;
  }

  .suggestion-tag {
    font-size: 0.75rem;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}

.btn-primary {
  background: var(--success);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--success-dark);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border);
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
}

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

.btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.btn-edit {
  color: var(--info);
}

.btn-edit:hover {
  background: var(--info-bg);
}

.btn-delete {
  color: var(--danger);
}

.btn-delete:hover {
  background: var(--danger-bg);
}

/* Dar de baja una propiedad (Cartera -> Activas) */
.btn-baja {
  color: var(--text-secondary, #6b7280);
}

.historial-bajas {
  margin: 0 0 1rem;
  padding: .6rem .9rem;
  border-left: 3px solid var(--border, #e2e8f0);
}

.btn-baja:hover {
  background: var(--bg-tertiary, #f1f5f9);
}

/* ============================================================
   DATA TABLE
   ============================================================ */
.table-responsive {
  overflow: auto;
  max-height: calc(100vh - 280px);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.data-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.data-table tbody tr:hover {
  background: rgba(16, 185, 129, 0.03);
}

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

.actions-cell {
  white-space: nowrap;
  vertical-align: middle;
}
.actions-cell > * {
  margin-right: 0.25rem;
  vertical-align: middle;
}
.actions-cell > *:last-child {
  margin-right: 0;
}

.role-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--primary-bg);
  color: var(--primary-dark);
  text-transform: capitalize;
}

.status-inactive {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Estado de la orden como un circulito, para que la columna ocupe casi nada.
   El nombre del estado se ve al pasar el mouse (atributo title). */
.estado-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.estado-dot-ok { background: var(--success-dark); }
.estado-dot-no { background: var(--danger); }
.estado-dot-medio { background: var(--warning); }

.td-estado { text-align: center; }

.status-shipping {
  background: #dbeafe;
  color: #1d4ed8;
}

.status-warning {
  background: #fef3c7;
  color: #92400e;
}

.status-handling {
  background: #e0e7ff;
  color: #3730a3;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-delivered {
  background: #d1fae5;
  color: #065f46;
}

/* Shipping status layout */
.shipping-status-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.shipping-substatus-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 1px 7px;
  border-radius: 8px;
  line-height: 1.4;
  white-space: nowrap;
}

.td-shipping-status {
  min-width: 130px;
  text-align: center;
  vertical-align: middle;
}

/* Discounted price - original crossed out */
.price-original {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 0.75rem;
  margin-right: 4px;
}

/* Order thumbnail in grid */
.order-thumbnail {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.td-thumbnail {
  text-align: center;
  width: 50px;
  padding: 4px !important;
}

.text-muted {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.2s ease;
}

.modal-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 1rem;
}

.modal-small {
  max-width: 400px;
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: whitesmoke;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.btn-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
}

.btn-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-error {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.form-success {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.form-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   INTEGRATIONS PAGE
   ============================================================ */
/* Add integration dropdown */
.add-integration-wrapper {
  position: relative;
}

.add-integration-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 320px;
  z-index: 100;
  overflow: hidden;
}

.add-integration-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.add-integration-option:hover {
  background: #f0f4ff;
}

.add-integration-option + .add-integration-option {
  border-top: 1px solid var(--border);
}

.add-integration-option div {
  display: flex;
  flex-direction: column;
}

.add-integration-option strong {
  font-size: 0.9rem;
  color: var(--text);
}

.add-integration-option small {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: white;
  border: 2px dashed var(--border);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-state h3 {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 400px;
  margin: 0 auto;
}

.integrations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.integration-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--border);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.integration-card.integration-active {
  border-left-color: var(--primary);
}

.integration-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.integration-logo {
  flex-shrink: 0;
}

.integration-logo-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #ffffff;
}

.ml-logo {
  background: linear-gradient(135deg, #ffe600 0%, #f5c800 100%);
  color: #2d3277 !important;
}

.claude-logo {
  background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%);
  color: #ffffff !important;
  font-weight: 700;
}

.email-logo {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
}

.openai-logo {
  background: linear-gradient(135deg, #10a37f 0%, #0d7f6a 100%);
  color: #ffffff !important;
  font-weight: 700;
}

.whatsapp-logo {
  background: #25D366;
  color: #ffffff !important;
  font-weight: 700;
}

.instagram-logo {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
  color: #ffffff !important;
  font-weight: 700;
}

.onedrive-logo {
  background: #0364B8;
  color: #ffffff !important;
  font-weight: 700;
}

.gdrive-logo {
  background: linear-gradient(135deg, #1FA463 0%, #1A73E8 50%, #FBBC04 100%);
  color: #ffffff !important;
  font-weight: 700;
}

.tn-logo {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff !important;
  font-weight: 700;
}

/* "ARCA WS" son dos palabras: sin centrarlo y sin bajar el interlineado el texto
   se desborda del cuadrado del logo. */
.arcaws-logo {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: #ffffff !important;
  font-weight: 700;
  text-align: center;
  line-height: 1.05;
  padding: 2px;
}

/* Ambiente de un certificado de ARCA */
.ambiente-badge {
  display: inline-block;
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.ambiente-prod { background: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; }
.ambiente-homo { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }

.venc-vencido { color: #b91c1c; font-weight: 600; }
.venc-pronto { color: #c2410c; font-weight: 600; }

/* Pedidos de certificado que quedaron esperando el .crt de ARCA */
.csr-pendientes {
  margin: 0 1.5rem 1rem;
  padding: .75rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  font-size: .85rem;
}
.csr-pendiente-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .5rem;
}

/* Asistente de generacion de certificado */
.wizard-pasos {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.wizard-paso {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.wizard-paso-activo { color: var(--text-primary); font-weight: 600; }
.wizard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: .72rem;
  font-weight: 700;
}
.wizard-paso-activo .wizard-num { background: #1e3a8a; color: #fff; }
.wizard-linea { flex: 1; height: 1px; background: var(--border); }

.pasos-wizard { padding-left: 1.2rem; line-height: 1.7; margin-top: 0; }

.aviso-homo {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .85rem;
  margin: 1rem 0;
}

/* Detalle de los ultimos comprobantes que informa ARCA */
.ultimos-cbtes { font-size: .82rem; padding: .25rem 0; }
.ultimos-cbtes-tabla {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
  margin-top: .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ultimos-cbtes-tabla .num { text-align: right; }
.ultimos-cbtes-tabla .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.res-aprobado { color: #166534; font-weight: 600; }
.res-rechazado { color: #b91c1c; font-weight: 600; }

/* Emision de un comprobante de prueba */
.sub-titulo { margin: 1.25rem 0 .5rem; font-size: .95rem; }

.items-emision td { padding: .25rem; vertical-align: middle; }
.items-emision .form-input { padding: .3rem .45rem; font-size: .82rem; }
.items-emision .num { text-align: right; }

.totales-emision {
  margin-top: 1rem;
  margin-left: auto;
  width: 260px;
  font-size: .88rem;
}
.totales-emision > div {
  display: flex;
  justify-content: space-between;
  padding: .2rem 0;
}
.totales-emision .total {
  border-top: 1px solid var(--border);
  margin-top: .25rem;
  padding-top: .4rem;
  font-size: 1rem;
}

.cert-generado {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .85rem;
}
.cert-generado code {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  word-break: break-all;
}

/* Selector de archivo propio: el del browser no se puede estilar.
   El input real se esconde (pero sigue existiendo, para que el click del label lo abra)
   y lo que se ve es el recuadro de abajo. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-drop {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-secondary, #f8fafc);
  transition: border-color .15s, color .15s;
}
.file-drop:hover { border-color: #1e3a8a; color: var(--text-primary); }
.file-drop i { font-size: 1.1rem; }

/* Campo de clave con el boton de mostrar/ocultar al costado */
.input-con-ojito {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.input-con-ojito .form-input { flex: 1; }
.btn-ojito {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .45rem .6rem;
  cursor: pointer;
  color: var(--text-secondary);
}
.btn-ojito:hover { color: var(--text-primary); }

.form-range {
  width: 100%;
  height: 6px;
  cursor: pointer;
  accent-color: var(--primary);
}

.integration-info {
  flex: 1;
}

.integration-info h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.integration-info p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.integration-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-sm {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
}

.integration-card-body {
  padding: 1.5rem;
}

.integration-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.input-with-hint {
  display: flex;
  flex-direction: column;
}

.input-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.integration-accounts {
  border-top: 1px solid var(--border);
}

.integration-accounts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.integration-accounts-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Connect button dropdown */
.connect-btn-wrapper {
  position: relative;
}

.connect-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  min-width: 200px;
  overflow: hidden;
}

.connect-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: background var(--transition);
}

.connect-dropdown-item:hover {
  background: var(--bg);
}

.connect-dropdown-item + .connect-dropdown-item {
  border-top: 1px solid var(--border);
}

/* Code input section */
.code-input-section {
  padding: 1rem 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.code-input-instructions {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.code-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.code-input-row .form-input {
  flex: 1;
  margin: 0;
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .modal-card {
    margin: 0.5rem;
  }

  .data-table {
    font-size: 0.8rem;
  }

  .data-table thead th,
  .data-table tbody td {
    padding: 0.5rem 0.625rem;
  }
}

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.product-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.product-thumb-placeholder {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.product-thumb-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Formularios grandes (ficha de producto, con su tabla de precios por lista).
   Se usa min() para que en pantallas chicas siga entrando sin scroll horizontal. */
.modal-wide {
  max-width: min(1000px, 96vw);
}

.photo-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

.photo-upload-slot {
  position: relative;
  aspect-ratio: 1;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: border-color var(--transition);
}

.photo-upload-slot:hover {
  border-color: var(--primary);
}

.photo-upload-slot.has-photo {
  border-style: solid;
}

.photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--transition);
}

.photo-upload-slot:hover .photo-remove-btn {
  opacity: 1;
}

.photo-upload-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.photo-upload-label input[type="file"] {
  display: none;
}

.photo-upload-placeholder {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

textarea.form-input {
  resize: vertical;
  min-height: 60px;
}

/* --- Product Linking in Publicaciones --- */
.td-product {
    min-width: 140px;
    max-width: 180px;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #166534;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.product-badge > a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-badge > a:hover {
    text-decoration: underline;
}

.product-badge-unlink {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.product-badge-unlink:hover {
    opacity: 1;
}

.product-actions-inline {
    display: flex;
    gap: 4px;
    align-items: center;
}

.create-product-btn,
.link-product-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #6b7280;
    transition: all 0.15s;
    padding: 0;
}
.create-product-btn:hover {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}
.link-product-btn:hover {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

/* Ventana de "Vincular a un producto" (MercadoLibre y Tienda Nube).
   Se elige un producto de una lista, asi que la letra tiene que leerse comoda:
   el SKU es el dato con el que uno compara, va oscuro, en negrita y grande. */
.link-product-list {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.link-product-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    background: white;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.link-product-option:last-child {
    border-bottom: none;
}
.link-product-option:hover {
    background: #f0fdf4;
}

.link-product-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.link-product-meta {
    font-size: 0.9rem;
    color: #4b5563;
}
.link-product-sku {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .01em;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.link-product-highlighted {
    background: #f0fdf4 !important;
    border-left: 3px solid #22c55e;
}
.link-product-highlighted .link-product-sku { background: #dcfce7; color: #14532d; }
.link-match-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Create Product Image Previews --- */
.create-product-images {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    padding: 8px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.create-product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

/* ============================================================
   Publish Wizard Styles
   ============================================================ */

/* Wizard Steps Indicator */
.publish-wizard-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 0 20px;
}

.publish-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #94a3b8;
  position: relative;
}

.publish-step .step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  background: #e2e8f0;
  color: #64748b;
  flex-shrink: 0;
}

.publish-step.active .step-number {
  background: var(--primary);
  color: #fff;
}

.publish-step.completed .step-number {
  background: var(--primary);
  color: #fff;
}

.publish-step.active {
  color: var(--primary-dark);
  font-weight: 600;
}

.publish-step.completed {
  color: var(--primary);
}

.publish-step-connector {
  width: 40px;
  height: 2px;
  background: #e2e8f0;
  align-self: center;
}

.publish-step-connector.completed {
  background: var(--primary);
}

/* Category Prediction Card */
.category-prediction {
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 14px 18px;
  background: var(--primary-bg);
  margin-bottom: 16px;
}

.category-prediction .category-path {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.category-prediction .category-id {
  font-size: 0.78rem;
  color: #64748b;
}

.category-predictions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.category-option {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}

.category-option:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.category-option.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 0 0 1px var(--primary);
}

.category-option .cat-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1e293b;
}

.category-option .cat-path {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}

/* Attribute Grid */
.attribute-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

@media (max-width: 768px) {
  .attribute-grid {
    grid-template-columns: 1fr;
  }
}

.attribute-item label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 4px;
}

.attribute-item label .attr-required {
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
}

.attribute-item select,
.attribute-item input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
  color: #1e293b;
  transition: border-color 0.15s;
}

.attribute-item select:focus,
.attribute-item input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-bg);
}

/* AI Suggest Button */
.btn-ai-suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ai-suggest:hover {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-ai-suggest:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Review Summary */
.publish-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 18px;
  background: #f8fafc;
}

.review-section h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.review-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.88rem;
}

.review-row .review-label {
  color: #64748b;
}

.review-row .review-value {
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}

/* Publish Success */
.publish-success {
  text-align: center;
  padding: 30px 20px;
}

.publish-success .success-icon {
  width: 64px;
  height: 64px;
  background: var(--primary-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 2rem;
}

.publish-success h3 {
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.publish-success p {
  color: #64748b;
  margin-bottom: 16px;
}

.publish-success a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.publish-success a:hover {
  text-decoration: underline;
}

/* Publish wizard photo previews */
.publish-photos-preview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.publish-photos-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* Condition selector (new/used) */
.condition-selector {
  display: flex;
  gap: 10px;
}

.condition-option {
  flex: 1;
  padding: 10px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
  font-size: 0.9rem;
  background: #fff;
}

.condition-option:hover {
  border-color: var(--primary);
}

.condition-option.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary-dark);
}

/* Listing type selector */
.listing-type-selector {
  display: flex;
  gap: 10px;
}

.listing-type-option {
  flex: 1;
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}

.listing-type-option:hover {
  border-color: var(--primary);
}

.listing-type-option.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.listing-type-option .lt-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1e293b;
}

.listing-type-option .lt-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}

/* Publish button in table */
.btn-publish {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--primary);
  transition: all 0.15s;
}

.btn-publish:hover {
  background: var(--primary-bg);
  color: var(--primary-dark);
}

.btn-publish svg {
  width: 18px;
  height: 18px;
}

/* Wizard modal body scrollable */
.publish-wizard-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
}

/* Loading spinner for AI */
.ai-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6366f1;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 0;
}

.ai-loading .spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mas Filtros dropdown */
.more-filters-wrapper {
  position: relative;
  margin-left: auto;
}

.more-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  color: #4b5563;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.more-filters-btn:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.more-filters-btn.has-active {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
}

.more-filters-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 100;
  min-width: 200px;
}

.more-filters-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #374151;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.more-filters-item:hover {
  background: #f3f4f6;
}

.more-filters-item.active {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}

.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}


/* Dashboard section */
.dashboard-section {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.dashboard-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

/* Dashboard detail card */
.dashboard-detail-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--primary);
  margin-top: 1.5rem;
  overflow: hidden;
}
.detail-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}
.detail-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-bg);
  color: var(--primary);
  flex-shrink: 0;
}
.detail-card-icon svg {
  width: 22px;
  height: 22px;
}
.detail-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  display: block;
}
.detail-card-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.detail-card-badge {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.detail-card-badge.warning {
  background: #fef3c7;
  color: #92400e;
}
.detail-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.detail-card-table thead {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}
.detail-card-table th {
  padding: 8px 16px;
  text-align: right;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.detail-card-table th:first-child {
  text-align: left;
}
.detail-card-table td {
  padding: 10px 16px;
  text-align: right;
  border-top: 1px solid #f3f4f6;
}
.detail-card-table td:first-child {
  text-align: left;
}
.detail-card-table tbody tr:hover {
  background: #f9fafb;
}
.text-warning-bold {
  color: #d97706;
  font-weight: 600;
}

/* Dashboard cards row */
.dashboard-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 900px) {
  .dashboard-cards-row {
    grid-template-columns: 1fr;
  }
}
.detail-card-icon.primary {
  background: var(--primary-bg);
  color: var(--primary);
}
.detail-card-icon.info {
  background: var(--info-bg);
  color: var(--info);
}


/* ============================================
   Shared Grid Filter/Sort Styles
   Used by: Publicaciones, Productos, Ordenes
   ============================================ */
.th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.th-label { flex: 1; }
.th-icons {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
}
.th-dropdown {
  position: relative;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-dropdown.filter-open {
  z-index: 1002;
}
.th-filterable {
  white-space: nowrap;
  padding: 0.3rem 0.4rem !important;
}
.th-filter-inner {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.th-filter-input {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.8rem;
  outline: none;
  background: white;
  color: #1f2937;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.th-filter-input::placeholder {
  color: #6b7280;
  font-weight: 600;
}
.th-filter-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}
.th-filter-input.has-filter {
  border-color: #4f46e5;
  background: #f5f3ff;
}
.sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.sort-icon:hover { background: rgba(0,0,0,0.06); }
.sort-icon span {
  display: block;
  font-size: 0.5rem;
  line-height: 1;
  color: #c8ccd4;
  transition: color 0.15s;
}
.sort-icon .sort-up-active { color: #4f46e5; }
.sort-icon .sort-down-active { color: #4f46e5; }
.filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.25rem;
  display: inline-flex;
  align-items: center;
  color: #c8ccd4;
  font-size: 0.7rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.filter-btn:hover {
  color: #6b7280;
  background: rgba(0,0,0,0.06);
}
.filter-btn.filter-active {
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
}
.column-filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 180px;
  max-width: 250px;
  padding: 0.5rem;
  margin-top: 0.25rem;
}
.filter-checkbox-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 0.4rem;
}
.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.3rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}
.filter-checkbox-item:hover { background: #f3f4f6; }
.filter-checkbox-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.filter-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.3rem;
  border-top: 1px solid #e5e7eb;
}
.filter-clear-btn {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.filter-clear-btn:hover { background: #fef2f2; }
.filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.th-checkbox {
  width: 40px;
  text-align: center;
}
.td-checkbox {
  text-align: center;
}
.row-selected {
  background: #f5f3ff !important;
}
/* Toda la fila abre "Editar producto": solo el cursor cambia, el resaltado al
   pasar el mouse ya lo hace la fila de la tabla en general. */
.row-clickable {
  cursor: pointer;
}
/* Productos sin stock: rosa clarito, suficiente para que salte a la vista
   sin tapar el texto ni parecer un error. */
.row-sin-stock {
  background: #fdf2f6;
}
.row-sin-stock:hover {
  background: #fce7f0;
}
.bulk-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f5f3ff;
  border-bottom: 1px solid #e5e7eb;
}

/* Publication link badges and tooltip */
.pub-link-wrapper {
  position: relative;
  display: inline-block;
}
.pub-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #ecfdf5;
  color: #059669;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
}
/* Tienda Nube se distingue en celeste de las cuentas de MercadoLibre (verde) */
.pub-link-badge-tn {
  background: #e0f2fe;
  color: #0284c7;
  margin-left: 0.25rem;
}
.pub-link-extra {
  color: #6b7280;
  font-weight: 400;
  font-size: 0.75rem;
}
.pub-link-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 100;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pub-link-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
.pub-link-wrapper:hover .pub-link-tooltip {
  display: block;
}
.pub-link-tooltip-row {
  padding: 0.15rem 0;
}
.pub-link-count {
  color: #9ca3af;
  margin-left: 0.25rem;
}

/* === Sync Progress Bar === */
.sync-progress-bar-container {
  width: 100%;
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
}
.sync-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 5px;
  transition: width 0.4s ease;
}
.sync-progress-detail {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.sync-detail-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}
.sync-detail-badge {
  background: #e0e7ff;
  color: #3b4fa8;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
}

/* === Topbar Upload Indicator === */
.topbar-upload-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.2s;
  min-width: 170px;
  position: relative;
}
.topbar-upload-indicator:hover { background: #d1fae5; }
.topbar-upload-text { font-weight: 600; white-space: nowrap; flex: 1; }
.topbar-upload-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #d1fae5;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.topbar-upload-bar-fill {
  height: 100%;
  background: #25D366;
  transition: width 0.3s ease;
}
.topbar-upload-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #a7f3d0;
  border-top-color: #25D366;
  border-radius: 50%;
  animation: topbar-spin 0.8s linear infinite;
}
.topbar-upload-cancel {
  background: none;
  border: none;
  color: #047857;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0.15rem;
  line-height: 1;
}
.topbar-upload-cancel:hover { color: #dc2626; }

/* === Topbar Sync Indicator === */
.topbar-sync-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.2s;
  min-width: 100px;
  position: relative;
}
.topbar-sync-indicator:hover {
  background: #e0e7ff;
}
.topbar-sync-indicator.completed {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.topbar-sync-indicator.error {
  background: #fef2f2;
  border-color: #fecaca;
}
.topbar-sync-text {
  font-weight: 600;
  white-space: nowrap;
}
.topbar-sync-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #e0e7ff;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.topbar-sync-bar-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.4s ease;
}
.topbar-sync-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #c7d2fe;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: topbar-spin 0.8s linear infinite;
}
@keyframes topbar-spin {
  to { transform: rotate(360deg); }
}
.topbar-sync-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: #9ca3af;
  padding: 0 0.2rem;
  line-height: 1;
}
.topbar-sync-dismiss:hover {
  color: #374151;
}
.procesos-dropdown-wrap {
  position: relative;
}
.procesos-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0.4rem;
  z-index: 200;
  animation: fadeIn 0.15s ease;
}
.procesos-dropdown-item {
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
}
.procesos-dropdown-item + .procesos-dropdown-item {
  border-top: 1px solid #f1f5f9;
}
.procesos-dropdown-item-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #111827;
}
.procesos-dropdown-bar {
  height: 4px;
  background: #e0e7ff;
  border-radius: 3px;
  margin-top: 0.3rem;
  overflow: hidden;
}
.procesos-dropdown-bar-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.4s ease;
}
.procesos-dropdown-step {
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== CHANGELOG ========== */
.changelog-list {
    padding: 0.5rem 0;
}

.changelog-item {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.changelog-item:hover {
    background: var(--bg-hover, #f9fafb);
}

.changelog-item:last-child {
    border-bottom: none;
}

.changelog-dot {
    position: absolute;
    left: 0.75rem;
    top: 1.1rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color, #10b981);
    flex-shrink: 0;
}

.changelog-item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.changelog-info {
    flex: 1;
    min-width: 0;
}

.changelog-subject {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.changelog-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
}

.changelog-hash {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: var(--bg-secondary, #f3f4f6);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: var(--primary-color, #10b981);
    font-weight: 600;
}

.changelog-hash:hover {
    background: var(--primary-color, #10b981);
    color: white;
}

.changelog-author {
    font-weight: 500;
}

.changelog-date {
    color: var(--text-muted, #9ca3af);
}

.changelog-expand-icon {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    color: var(--text-secondary, #6b7280);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.changelog-expand-icon.open {
    transform: rotate(90deg);
}

.changelog-expand-icon svg {
    width: 16px;
    height: 16px;
}

.changelog-body {
    margin-top: 0.75rem;
    margin-left: 0;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 6px;
    border-left: 3px solid var(--primary-color, #10b981);
}

.changelog-body pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82rem;
    color: var(--text-primary, #1f2937);
    line-height: 1.5;
}

.changelog-body-meta {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
}

.changelog-body-meta code {
    background: var(--bg-primary, #fff);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.78rem;
}

.env-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.env-badge i {
    font-size: 0.65rem;
}

.env-badge-on.env-dev {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.env-badge-on.env-prod {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

.env-badge-on.env-github {
    background: #1f2937;
    color: #f9fafb;
    border-color: #374151;
}

.env-badge-off {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
}

a.env-badge {
    text-decoration: none;
    transition: opacity 0.15s ease;
}

a.env-badge:hover {
    opacity: 0.85;
}

.changelog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.changelog-page-btn {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    background: white;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text-primary, #1f2937);
    transition: all 0.15s;
}

.changelog-page-btn:hover:not(:disabled) {
    background: var(--bg-hover, #f9fafb);
    border-color: var(--primary-color, #10b981);
    color: var(--primary-color, #10b981);
}

.changelog-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.changelog-page-numbers {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.changelog-page-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: white;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text-primary, #1f2937);
    transition: all 0.15s;
}

.changelog-page-num:hover {
    background: var(--bg-hover, #f9fafb);
    border-color: var(--primary-color, #10b981);
}

.changelog-page-num.active {
    background: var(--primary-color, #10b981);
    border-color: var(--primary-color, #10b981);
    color: white;
    font-weight: 600;
}

.changelog-page-dots {
    width: 32px;
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 0.82rem;
}


/* Botones chicos de "como se ve el listado" (Lista / Por Familia / Por Producto).
   Estaban solo dentro de Publicaciones; ahora son globales porque los mismos
   botones se usan para los filtros de Publicaciones y de Productos. */
.view-mode-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.view-mode-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.15s;
}
.view-mode-btn.active { background: #4f46e5; color: white; border-color: #4f46e5; }
.view-mode-btn:hover:not(.active) { background: #f3f4f6; }

/* ============================================================
   Barra de filtros compacta: mismos botones chicos que "Por Producto",
   con el numero adentro. Se usa en Publicaciones de MercadoLibre.
   ============================================================ */
.filtros-bar {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
    padding: .6rem 1rem; border-bottom: 1px solid var(--border);
}
.filtros-bar-titulo {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
    color: #6b7280; margin-right: .35rem;
}
/* El numero adentro del boton: mas chico y apagado, para que mande el texto */
.filtro-cuenta {
    display: inline-block; margin-left: .3rem; padding: 0 .3rem;
    border-radius: 999px; background: #f3f4f6; color: #6b7280;
    font-size: .72rem; font-weight: 700;
}
.view-mode-btn.active .filtro-cuenta { background: rgba(255,255,255,.25); color: #fff; }
.filtros-bar-limpiar {
    margin-left: auto; padding: .375rem .75rem;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: .8125rem; color: #6b7280;
}
.filtros-bar-limpiar:hover { color: #dc2626; text-decoration: underline; }

/* Solapas dentro de una pantalla (Productos, Analisis, Mercado Pago) */
.tabs-bar {
    display: flex; gap: .25rem;
    border-bottom: 1px solid #e5e7eb;
}
.tab-btn {
    background: transparent; border: none;
    padding: .65rem 1.1rem;
    font-size: .9rem; font-weight: 600;
    color: #6b7280; cursor: pointer;
    border-bottom: 3px solid transparent;
    display: inline-flex; align-items: center; gap: .45rem;
    transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: #4f46e5; }
.tab-btn.active { color: #4f46e5; border-bottom-color: #4f46e5; }

/* ============================================================
   Envios a Full: listado, armado con lectora y detalle
   ============================================================ */
.titulo-bloque { margin: 1.5rem 0 .75rem; font-size: 1.1rem; }

    .solapas {
        display: flex;
        gap: .25rem;
        border-bottom: 2px solid var(--border);
        margin-bottom: 1.25rem;
    }
    .solapa {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        padding: .6rem 1.1rem;
        cursor: pointer;
        font-size: .9rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: .4rem;
    }
    .solapa:hover { color: var(--text-primary); }
    .solapa-activa {
        color: var(--primary);
        border-bottom-color: var(--primary);
        font-weight: 600;
    }

    .checkbox-inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; margin-right: .75rem; }

    .fila-clickable { cursor: pointer; }
    .fila-clickable:hover { background: #f8fafc; }

    .barra-armado { height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-bottom: .2rem; }
    .barra-armado-relleno { height: 100%; background: #16a34a; }

    .detalle-cabecera { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

    .resumen-full {
        display: flex; gap: 2rem; flex-wrap: wrap;
        padding: .75rem 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
    .resumen-full > div { display: flex; flex-direction: column; }
    .resumen-full span { font-size: .75rem; color: var(--text-secondary); }
    .resumen-full strong { font-size: 1.15rem; }
    .texto-alerta { color: #b91c1c; }

    .acciones-full { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

    .aviso-ok {
        background: #f0fdf4; border: 1px solid #86efac; color: #166534;
        border-radius: 8px; padding: .6rem .75rem; font-size: .85rem;
    }
    .aviso-ok strong { display: block; }
    .aviso-import { display: block; margin-top: .35rem; color: #92400e; }

    .tabla-armado td { vertical-align: middle; }
    .tabla-armado .num, .num { text-align: right; }
    .fila-completa { background: #f0fdf4; }
    .fila-empezada { background: #fffbeb; }
    .fila-diferencia { background: #fef2f2; }

    .marcar-armado { display: flex; gap: .35rem; align-items: center; }
    .marcar-armado .form-input { width: 80px; padding: .3rem .45rem; }

    /* --- Armado con lectora: todo grande, para usarlo parado en el deposito --- */
    .paso-armado { max-width: 620px; }
    .paso-armado h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
    .paso-armado h3:first-child { margin-top: 0; }

    .input-escaneo {
        font-size: 1.25rem;
        padding: .7rem .9rem;
        letter-spacing: .02em;
    }

    .btn-lg { padding: .7rem 1.4rem; font-size: 1rem; margin-top: .75rem; }

    .producto-cabecera { display: flex; gap: 1rem; align-items: flex-start; }
    .producto-foto {
        width: 74px;
        height: 74px;
        max-width: 74px;
        object-fit: contain;
        flex: 0 0 auto;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
    }

    .cuantas-armar {
        margin-top: 1rem;
        padding: .9rem 1.1rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 10px;
        font-size: 1.1rem;
        color: #1e40af;
    }
    .cuantas-armar strong { font-size: 2rem; vertical-align: middle; margin: 0 .3rem; }

    .aviso-ya-armado {
        margin-top: .75rem;
        background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
        border-radius: 8px; padding: .6rem .75rem; font-size: .85rem;
    }

    .mensaje-armado {
        margin-top: 1.25rem;
        padding: .8rem 1rem;
        border-radius: 8px;
        font-size: .95rem;
    }
    .mensaje-ok { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
    .mensaje-error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
    .mensaje-aviso { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }

    .res-aprobado { color: #166534; font-weight: 600; font-size: .82rem; }
    .res-rechazado { color: #b91c1c; font-weight: 600; font-size: .82rem; }

    .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

/* Verificacion del codigo al armar: el operario tiene que ver al instante si el articulo
   que agarro es el correcto, sin esperar a confirmar. */
.input-escaneo.input-ok { border-color: #16a34a; background: #f0fdf4; }
.input-escaneo.input-mal { border-color: #dc2626; background: #fef2f2; }

.verificacion {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  font-size: .95rem;
  font-weight: 600;
}
.verificacion-ok { color: #166534; }
.verificacion-mal { color: #b91c1c; font-weight: 500; }
.verificacion-mal strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Vincular a mano un renglon del envio con un producto del inventario */
.btn-vincular {
  margin-left: .4rem;
  padding: .1rem .5rem;
  font-size: .72rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  color: var(--text-secondary);
}
.btn-vincular:hover { border-color: var(--primary); color: var(--primary); }

.lista-productos {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.producto-opcion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: .6rem .75rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.producto-opcion:last-child { border-bottom: none; }
.producto-opcion:hover { background: #f1f5f9; }
.producto-opcion:disabled { opacity: .5; cursor: default; }

/* Logo por razon social, en la pantalla de Facturacion */
.logo-razon {
  display: block;
  max-width: 90px;
  max-height: 38px;
  object-fit: contain;
  margin-bottom: .25rem;
}
.btn-logo {
  display: inline-block;
  padding: .1rem .5rem;
  font-size: .72rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  color: var(--text-secondary);
  margin: 0 .2rem .2rem 0;
}
.btn-logo:hover { border-color: var(--primary); color: var(--primary); }
.btn-logo-quitar:hover { border-color: #dc2626; color: #dc2626; }

/* ============================================================
   URBEX - Seguimiento de asesores
   ============================================================ */
.chico { font-size: .78rem; }
.num { text-align: right; }
.form-check-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }

.asesores-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.asesores-acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fila-click { cursor: pointer; }
.fila-click:hover td { background: var(--primary-bg); }
.fila-inactiva td { opacity: .6; }

/* Estadios: el color de cada uno se elige en Administracion -> Estadios y premios */
.estadio-badge {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px; border: 1px solid transparent;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.estadio-tenue { opacity: .55; }

/* Titulo y resumen de la planilla */
.planilla-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.planilla-titulo-acciones { display: flex; gap: .5rem; }
.volver { font-size: .85rem; color: var(--text-secondary); text-decoration: none; }
.volver:hover { color: var(--primary); }
.planilla-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1rem;
}
.resumen-item {
  background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: .75rem 1rem; display: flex; flex-direction: column; gap: .25rem;
}
.resumen-ancho { grid-column: span 2; }
/* Linea de la cartera activa del asesor, arriba de su planilla */
.cartera-linea {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.75rem; margin-bottom: 1rem;
  background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .65rem 1rem;
}
.cartera-linea strong { font-size: 1.05rem; margin-left: .35rem; }
.resumen-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.resumen-valor { font-size: 1.05rem; font-weight: 600; }
.barra { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.barra-chica { height: 6px; min-width: 80px; }
.barra-relleno { height: 100%; background: var(--primary-light); border-radius: 999px; }

.planilla-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* La planilla: ancha, se desplaza de costado con la columna del mes fija */
/* Se desplaza adentro (de costado y para abajo) para que los titulos queden fijos arriba */
.planilla-scroll { overflow: auto; max-height: calc(100vh - 80px); }
.planilla thead { position: sticky; top: 0; z-index: 3; }
.planilla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .8rem; }
.planilla th, .planilla td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: .25rem .3rem; text-align: center; white-space: nowrap; }
.planilla thead th { background: #f8fafc; color: var(--text-secondary); font-weight: 600; font-size: .72rem; line-height: 1.2; }
.planilla thead th small { font-weight: 400; }
.planilla .col-mes {
  position: sticky; left: 0; z-index: 1; background: var(--card-bg); text-align: left; min-width: 104px;
}
.planilla thead .col-mes { background: #f8fafc; z-index: 2; }
.mes-fechas { display: block; font-size: .68rem; color: var(--text-muted); }
.planilla-seccion td {
  background: var(--sidebar-bg); color: #fff; text-align: left; font-weight: 600; font-size: .75rem;
  padding: .35rem .75rem;
}
/* El texto de la franja queda fijo a la izquierda aunque se corra la planilla de costado */
.planilla-seccion td span { position: sticky; left: .75rem; }
.mes-actual td { background: var(--primary-bg); }
.mes-actual .col-mes { background: #f6f2e7; box-shadow: inset 3px 0 0 var(--primary); }
.celda {
  width: 54px; padding: .25rem .3rem; border: 1px solid #e5e7eb; border-radius: 4px;
  background: #fff; text-align: center; font: inherit; color: #111827;
}
.celda-ancha { width: 84px; }
.celda:hover { border-color: #cbd5e1; }
.celda:focus { border-color: var(--primary); background: #fff; outline: none; }
.celda.obj { color: #111827; }
.celda:disabled { color: var(--text-muted); background: #f8fafc; }
.celda::-webkit-outer-spin-button, .celda::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.celda[type=number] { -moz-appearance: textfield; }
/* Lo real que sale solo de Cartera (no se escribe) */
.planilla td.auto { font-weight: 600; background-image: linear-gradient(rgba(190,175,135,.12), rgba(190,175,135,.12)); }
.planilla td.calc { color: var(--text-primary); background-image: linear-gradient(rgba(148,163,184,.06), rgba(148,163,184,.06)); }
.planilla td.premio { font-size: .72rem; text-align: left; color: var(--text-secondary); }
.planilla tfoot td { background: #f8fafc; font-weight: 600; }
.planilla tfoot .col-mes { background: #f8fafc; }
.planilla .pie-nota td { font-weight: 400; font-size: .72rem; color: var(--text-muted); text-align: left; white-space: normal; }

/* Barra de "guardar" que aparece abajo cuando hay cambios */
.planilla-guardar {
  position: sticky; bottom: 0; z-index: 5; display: none; align-items: center; justify-content: flex-end; gap: .75rem;
  margin-top: .75rem; padding: .75rem 1rem; background: var(--card-bg); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); border-left: 4px solid var(--primary);
}
.planilla-guardar.visible { display: flex; }
.planilla-guardar span { margin-right: auto; font-size: .85rem; color: var(--text-secondary); }

.planilla-referencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; margin-top: 1rem; }
.fila-destacada td { background: var(--primary-bg); }
.logrado { color: #047857; font-weight: 600; }

@media (max-width: 600px) {
  .resumen-ancho { grid-column: span 1; }
  .planilla-referencias { grid-template-columns: 1fr; }
  .planilla-guardar { flex-wrap: wrap; }
}

/* Administracion -> Estadios y premios */
.reglas-card { margin-bottom: 1rem; }
.reglas-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.reglas-tabla td { vertical-align: middle; }
.reglas-tabla .form-input { padding: .35rem .5rem; }
.num-corto { width: 80px; }
.num-medio { width: 120px; }
.color-celda { display: flex; align-items: center; gap: .5rem; }
.color-celda input[type=color] { width: 36px; height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; }
.reglas-ayuda { padding: .75rem 1.25rem 0; }
.reglas-acciones { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.25rem 1rem; }

/* Alta de asesor: por donde llego */
.origen-bloque { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem .9rem; }
.origen-opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.origen-opcion {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: .88rem;
}
.origen-opcion.elegida { border-color: var(--primary); background: var(--primary-bg); font-weight: 600; }
.resumen-texto { font-size: .95rem; }

/* Planilla: a quien refirio */
.referidos-card { margin-top: 1rem; }
.referidos-lista { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.referido {
  display: inline-flex; gap: .4rem; align-items: baseline; padding: .35rem .7rem; border-radius: 999px;
  background: var(--primary-bg); color: var(--text-primary); text-decoration: none; font-size: .88rem;
}
a.referido:hover { box-shadow: inset 0 0 0 1px var(--primary); }

/* Planilla: semanas de cada mes */
.mes-toggle {
  display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.mes-toggle:hover strong { color: var(--primary); }
.mes-flecha { display: inline-block; font-size: .7rem; color: var(--text-muted); transition: transform var(--transition); }
.mes-flecha.abierta { transform: rotate(90deg); color: var(--primary); }
.planilla td.suma-semanas { font-weight: 600; }
.fila-semana td { background: #fbfaf6; }
.fila-semana .col-mes { background: #fbfaf6; padding-left: 1.4rem; font-size: .75rem; color: var(--text-secondary); }
.fila-semana .celda { background: #fff; border-color: var(--border); }
.planilla td.total { font-weight: 600; text-align: center; color: #111827; }
.planilla td.total.obj { color: #111827; font-weight: 500; }
.fila-mes-total td { background: #f4f1e8; }
.fila-mes-total .col-mes { background: #f4f1e8; }
.mes-actual.fila-mes-total td { background: #efe8d4; }

/* Real contra objetivo: verde si lo alcanzo o lo supero, rojo si quedo abajo */
.planilla .real-ok, .planilla .celda.real-ok { color: #15803d; font-weight: 700; }
.planilla .real-bajo, .planilla .celda.real-bajo { color: #dc2626; font-weight: 700; }
.planilla td.total.real-ok { color: #15803d; }
.planilla td.total.real-bajo { color: #dc2626; }
.planilla tfoot td.acum-obj { color: #111827; }

/* Metricas */
.metricas-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.mes-selector { display: flex; align-items: center; gap: .5rem; }
.mes-selector .btn { padding: .35rem .75rem; }
.mes-selector-nombre { font-weight: 600; min-width: 140px; text-align: center; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi {
  background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: .8rem 1rem; display: flex; flex-direction: column; gap: .2rem;
}
.kpi-titulo { font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.kpi-valor { font-size: 1.6rem; font-weight: 700; color: #111827; line-height: 1.2; }
.kpi-valor.real-ok { color: #15803d; }
.kpi-valor.real-bajo { color: #dc2626; }
.kpi-sub { font-size: .75rem; color: var(--text-muted); }
.barra-relleno.relleno-ok { background: #16a34a; }
.barra-relleno.relleno-bajo { background: #dc2626; }
.metricas-tabla-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.metricas-tabla .centro { text-align: center; }
.metricas-tabla .real-ok { color: #15803d; font-weight: 700; }
.metricas-tabla .real-bajo { color: #dc2626; font-weight: 700; }
.metricas-tabla tfoot td { background: #f8fafc; font-weight: 600; border-top: 2px solid var(--border); padding: .75rem 1rem; }
.fila-sin-datos td { opacity: .6; }

/* Administracion: bancos y cajas */
.tes-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.tes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.tes-tarjeta {
  background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .8rem 1rem;
  display: flex; flex-direction: column; gap: .25rem; cursor: pointer; border: 2px solid transparent;
}
.tes-tarjeta:hover { border-color: var(--primary-light); }
.tes-tarjeta.elegida { border-color: var(--primary); }
.tes-tarjeta.inactiva { opacity: .6; }
.tes-tarjeta-arriba { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tes-saldo { font-size: 1.35rem; font-weight: 700; color: #111827; margin-top: .2rem; }
.negativo { color: #dc2626 !important; }
.mov-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mov-acciones { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.btn-ingreso { background: #16a34a; color: #fff; border: 0; }
.btn-ingreso:hover { background: #15803d; }
.btn-egreso { background: #dc2626; color: #fff; border: 0; }
.btn-egreso:hover { background: #b91c1c; }
.mov-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-bottom: 1px solid var(--border); }
.mov-resumen > div { padding: .8rem 1.25rem; display: flex; flex-direction: column; gap: .15rem; border-right: 1px solid var(--border); }
.mov-resumen span { font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.mov-resumen strong { font-size: 1.1rem; color: #111827; }
.mov-resumen .ingreso strong, .mov-tabla td.ingreso { color: #15803d; }
.mov-resumen .egreso strong, .mov-tabla td.egreso { color: #dc2626; }
.mov-tabla td.num, .mov-tabla th.num { text-align: right; white-space: nowrap; }
.usuarios-caja { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .3rem .8rem; margin: .2rem 0 .3rem; }

/* Egresos y proveedores */
.egr-filtros { margin-bottom: 1rem; }
.egr-filtros-cuerpo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; }
.egr-tabla td.num, .egr-tabla th.num { text-align: right; white-space: nowrap; }
.etiqueta-gasto { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .75rem; font-weight: 600; }
.etiqueta-egreso { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: .68rem; font-weight: 600; }
.pago-ok { color: #15803d; font-weight: 600; font-size: .85rem; }
.modal-ancho { max-width: 760px; width: 100%; }
.modal-encima { z-index: 1100; }
.form-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 700px) { .form-row-4 { grid-template-columns: 1fr 1fr; } }
.total-calculado { font-size: 1.3rem; font-weight: 700; padding: .35rem 0; color: #111827; }
.pago-bloque { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem .9rem; margin-top: .4rem; }
.buscador { max-width: 320px; }
/* Cartera -> Propietarios -> Contactos (2026-10-22) */
.contactos-filtro { width: auto; max-width: 200px; }
.contactos-nuevo { margin-left: auto; display: flex; gap: .5rem; }
.contactos-excel.deshabilitado { opacity: .55; pointer-events: none; }
.status-badge.contacto-tipo-comprador { background: #dbeafe; color: #1d4ed8; }
.status-badge.contacto-tipo-vendedor { background: #dcfce7; color: #047857; }
.status-badge.contacto-tipo-inquilino { background: #fef3c7; color: #92400e; }
.status-badge.contacto-tipo-inversor { background: #ede9fe; color: #6d28d9; }
.status-badge.contacto-tipo-otro { background: #f3f4f6; color: #4b5563; }

/* Tesoreria y pagos en varias partes */
.tes-total { background: #252526; }
.tes-total strong, .tes-total .tes-saldo { color: #fff; }
.tes-total .text-muted { color: #a0aec0 !important; }
.tes-total.elegida { border-color: var(--primary-light); }
.pago-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.pago-parte { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.pago-parte.ajena { grid-template-columns: 2fr 1fr 1fr 2fr; font-size: .85rem; background: #fff; border: 1px dashed var(--border); border-radius: 6px; padding: .4rem .6rem; }
@media (max-width: 700px) { .pago-parte { grid-template-columns: 1fr 1fr; } }
.pago-parcial { color: #c2410c; font-weight: 600; font-size: .85rem; }
.real-ok { color: #15803d; }
.real-bajo { color: #dc2626; }

/* Conceptos de gastos y cuentas corrientes */
.concepto-nuevo { display: flex; gap: .5rem; align-items: center; }
.concepto-nuevo .btn { white-space: nowrap; }
.imputado { font-size: .75rem; color: #7c3aed; font-weight: 600; margin-top: .15rem; }
.imputar-bloque { background: #faf5ff; border: 1px solid #e9d5ff; border-radius: var(--radius-md); padding: .65rem .9rem; margin: .4rem 0 .6rem; }
.etiqueta-ctacte { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-size: .68rem; font-weight: 600; }
.btn-whatsapp { background: #25d366; color: #fff; border: 0; }
.btn-whatsapp:hover { background: #1ebe5b; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 600px) { .form-row-3 { grid-template-columns: 1fr 1fr; } }

/* Cartera: listado y ficha de propiedades */
.cartera-tabla td { vertical-align: middle; }
.data-table.cartera-tabla thead th, .data-table.cartera-tabla tbody td { padding-left: .55rem; padding-right: .55rem; }
.cartera-tabla td.num, .cartera-tabla th.num { text-align: right; white-space: nowrap; }
.asesores-tabla td.num, .asesores-tabla th.num { text-align: right; white-space: nowrap; }
.cartera-miniatura { width: 72px; padding-top: .35rem !important; padding-bottom: .35rem !important; }
.cartera-miniatura img, .cartera-sin-foto { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; display: block; }
.cartera-sin-foto { background: #f1f5f9; color: #94a3b8; display: flex; align-items: center; justify-content: center; }
.etiqueta-exclusiva { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: var(--primary-bg); color: var(--primary-dark); font-size: .75rem; font-weight: 700; }
.prop-grilla { display: grid; gap: 1rem; }
.prop-seccion .card-header h3 { font-size: 1rem; }
.prop-calle { grid-template-columns: 3fr 1fr 1fr 1fr; gap: .75rem; }
.prop-numeros { grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.prop-checks { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .25rem 0 1rem; }
.prop-checks .form-check-inline { margin: 0; }
.prop-fotos-acciones { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.prop-subir { position: relative; overflow: hidden; cursor: pointer; }
.prop-subir input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.prop-subir.deshabilitado { opacity: .6; pointer-events: none; }
.prop-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-top: 1rem; }
.prop-foto { position: relative; border-radius: 8px; overflow: hidden; background: #f1f5f9; aspect-ratio: 4 / 3; }
.prop-foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.prop-portada { position: absolute; top: .4rem; left: .4rem; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.prop-foto-botones { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .3rem; padding: .35rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.prop-foto-botones button { border: 0; border-radius: 6px; background: rgba(255,255,255,.92); color: #111827; min-width: 30px; height: 28px; cursor: pointer; font-size: .95rem; }
.prop-foto-botones button:disabled { opacity: .35; cursor: default; }
.prop-foto-botones .prop-foto-borrar { color: #dc2626; }
.prop-visor { display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.prop-visor img { max-width: 94vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.prop-pie { display: flex; justify-content: flex-end; gap: .5rem; margin: 1rem 0 2rem; flex-wrap: wrap; }
.prop-pie .prop-borrar { margin-right: auto; color: #dc2626; }
@media (max-width: 800px) {
    .prop-calle { grid-template-columns: 1fr 1fr; }
    .prop-numeros { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .prop-fotos { grid-template-columns: 1fr 1fr; }
}
.prop-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.prop-fieldset:disabled .form-input { background: #fff; color: #111827; opacity: 1; cursor: default; }
.prop-fieldset:disabled .origen-opcion { cursor: default; }

/* Cartera -> Accesos */
.acc-lista { display: grid; gap: .75rem; margin-bottom: 1rem; }
.acc-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.acc-cabecera .etiqueta-gasto { margin-left: .4rem; }
.acc-todo { margin: 0; color: var(--primary-dark); font-weight: 600; }
.acc-asesores { margin: .75rem 0 0; padding: .65rem .9rem; background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-md); }
.prop-fieldset:disabled .form-input::placeholder { color: transparent; }

/* Flyer de WhatsApp de una propiedad */
.prop-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.flyer-modal { max-width: 1060px; width: 100%; }
.flyer-cuerpo { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 1.25rem; align-items: start; }
.flyer-vista { position: relative; }
.flyer-vista img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; display: block; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); background: #f1f5f9; }
.flyer-contacto { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: 14px; }
.flyer-contacto label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.flyer-actualizando { position: absolute; top: .6rem; right: .6rem; background: rgba(0,0,0,.65); color: #fff; font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; }
.flyer-campos .form-group { margin-bottom: .6rem; }
.flyer-fotos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .8rem; }
.flyer-fotos img { width: 68px; height: 51px; object-fit: cover; border-radius: 5px; cursor: pointer; border: 3px solid transparent; opacity: .75; }
.flyer-fotos img.elegida { border-color: var(--primary); opacity: 1; }
.flyer-foto-chica { position: relative; }
.flyer-foto-chica span { position: absolute; top: -6px; right: -6px; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.flyer-restablecer { background: none; border: 0; padding: 0; color: var(--primary-dark); text-decoration: underline; cursor: pointer; font-size: .85rem; }
@media (max-width: 800px) {
    .flyer-cuerpo { grid-template-columns: 1fr; }
    .flyer-vista { max-width: 320px; margin: 0 auto; }
}
.flyer-aviso { margin: 0 1.5rem; padding: .7rem 1rem; border-radius: var(--radius-md); background: #dcfce7; color: #14532d; font-size: .9rem; }

/* Cartera -> Reservadas */
.reserva-cuentas { display: grid; gap: .35rem; margin-top: .5rem; padding: .75rem 1rem; background: var(--primary-bg); border-radius: var(--radius-md); max-width: 460px; }
.reserva-cuentas div { display: flex; justify-content: space-between; gap: 1rem; }
.refuerzo-vencido { color: #dc2626; font-weight: 700; }
.refuerzo-proximo { color: #c2410c; font-weight: 700; }
.etiqueta-reservada { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 700; }
.aviso-reservada { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .75rem 1rem; border-radius: var(--radius-md); background: #fef3c7; color: #78350f; }
.btn-reservar { padding: .3rem .7rem; font-size: .8rem; margin-right: .35rem; white-space: nowrap; }
.link-ficha { font-size: .75rem; color: var(--primary-dark); text-decoration: underline; white-space: nowrap; }

/* Cartera -> Cerradas: cierre y liquidacion */
.liq-tabla { width: 100%; max-width: 620px; border-collapse: collapse; margin-top: .5rem; }
.liq-tabla td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
.liq-tabla td.num { text-align: right; white-space: nowrap; }
.liq-tabla .liq-urbex td { background: var(--primary-bg); font-weight: 700; }
.liq-tabla .liq-asesor td { font-weight: 700; }
.liq-tabla .liq-oficina td { font-weight: 700; color: #15803d; }
.dinero-fila { padding: .65rem 0; border-bottom: 1px solid var(--border); }
.dinero-fila:last-child { border-bottom: 0; }
.dinero-titulo { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.dinero-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .6rem; max-width: 620px; }
.estado-pago { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.estado-pago.ok { color: #15803d; }
.estado-pago.pendiente { color: #c2410c; }
.cerradas-totales { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.cerradas-totales .kpi { flex: 1 1 160px; }
.etiqueta-cierre { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: .68rem; font-weight: 600; text-decoration: none; }
.aviso-cerrada { background: #dcfce7; color: #14532d; }

/* Partes de un cobro o pago (cobro de cierres, pago a la master) */
.partes-dinero { display: grid; gap: .5rem; }
.parte-fila { display: grid; grid-template-columns: minmax(0, 2fr) 150px minmax(0, 1fr) minmax(0, 1fr) 36px; gap: .5rem; align-items: center; }
.parte-fila.ajena { grid-template-columns: 100px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); font-size: .85rem; padding: .35rem .6rem; border: 1px dashed var(--border); border-radius: 6px; }
.parte-equivale { grid-column: 1 / -1; margin-top: -.3rem; }
.partes-resumen { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: .6rem .8rem; margin-top: .25rem; background: var(--primary-bg); border-radius: var(--radius-md); }
.partes-dinero > .btn-reservar { justify-self: start; }
@media (max-width: 800px) { .parte-fila { grid-template-columns: 1fr 1fr; } }
.etiqueta-boton { border: 0; cursor: pointer; font-family: inherit; }

/* Rentabilidad */
.rent-grafico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .5rem; align-items: end; }
.rent-mes { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.rent-barras { height: 160px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.rent-barra { width: 42%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 1px; }
.rent-barra.ingreso, .rent-punto.ingreso { background: #10b981; }
.rent-barra.egreso, .rent-punto.egreso { background: #f87171; }
.rent-etiqueta { font-size: .75rem; color: var(--text-secondary); }
.rent-resultado { font-size: .72rem; font-weight: 700; min-height: 1em; }
.rent-leyenda { display: flex; align-items: center; gap: .4rem; font-size: .8rem; margin-top: .75rem; }
.rent-punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: .5rem; }
.rent-tabla td.num, .rent-tabla th.num { text-align: right; white-space: nowrap; }
.rent-tabla .rent-total td { font-weight: 700; background: var(--primary-bg); }
.rent-concepto { display: grid; grid-template-columns: minmax(0, 220px) 1fr 190px; gap: .75rem; align-items: center; padding: .3rem 0; }
.rent-concepto-nombre { font-size: .9rem; }
.rent-concepto-barra { height: 10px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.rent-concepto-barra div { height: 100%; background: #f87171; border-radius: 5px; }
.rent-concepto-monto { text-align: right; font-weight: 600; font-size: .9rem; }
@media (max-width: 700px) {
    .rent-barras { height: 110px; }
    .rent-resultado { display: none; }
    .rent-concepto { grid-template-columns: 1fr 110px; }
    .rent-concepto-barra { display: none; }
}
.aviso-rechazada { background: #f1f5f9; color: #475569; }
.respuesta-opciones { display: grid; gap: .6rem; margin: 1rem 0 .5rem; }
.respuesta-opciones .btn { justify-content: center; padding: .7rem 1rem; }

/* Asesores Intermedios: camino y plan anual */
.camino-card { margin-top: 1rem; }
.camino-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.camino-lista { display: grid; gap: .5rem; }
.camino-meta { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 320px); gap: .75rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.camino-meta.cumplida { background: #f0fdf4; border-color: #bbf7d0; }
.camino-icono { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
.camino-meta.cumplida .camino-icono { background: #16a34a; border-color: #16a34a; }
.camino-valor { display: grid; gap: .25rem; }
.camino-nota { font-size: .8rem; padding: .3rem .5rem; }
.plan-barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.plan-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.plan-kpi .barra { margin: .4rem 0; }
.plan-de { font-size: .9rem; font-weight: 500; color: var(--text-muted); }
.plan-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rent-barra.plan-obj, .rent-punto.plan-obj { background: #cbd5e1; }
.rent-barra.plan-real, .rent-punto.plan-real { background: var(--primary); }
.plan-mes-actual .rent-etiqueta { font-weight: 700; color: var(--primary-dark); }
.plan-tabla .plan-fila-actual td { background: var(--primary-bg); }
.plan-tabla input.corregida { border-color: var(--primary); background: #fffbeb; }
.plan-repartir { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); }
.plan-repartir .form-input { max-width: 150px; }
.etiqueta-op { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.etiqueta-op.captacion { background: #e0f2fe; color: #0369a1; }
.etiqueta-op.reserva { background: #fef3c7; color: #92400e; }
.etiqueta-op.cierre { background: #dcfce7; color: #15803d; }
.etiqueta-etapa { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: #ede9fe; color: #6d28d9; }
.etiqueta-etapa.etapa-avanzado { background: #dcfce7; color: #15803d; }
.etiqueta-etapa.etapa-inicial { background: #ffedd5; color: #c2410c; }
.etiqueta-etapa.etapa-team { background: #cffafe; color: #0e7490; }
@media (max-width: 900px) { .plan-kpis { grid-template-columns: 1fr; } .camino-meta { grid-template-columns: 28px 1fr; } .camino-valor { grid-column: 2; } }
.metas-lista { display: grid; gap: .6rem; }
.meta-fila { display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 36px; gap: .6rem; align-items: end; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.meta-fila .form-group { margin: 0; }
.meta-orden { display: grid; gap: 2px; align-self: center; }
.meta-orden button { border: 1px solid var(--border); background: #fff; border-radius: 4px; font-size: .6rem; cursor: pointer; padding: 1px 0; }
.meta-orden button:disabled { opacity: .3; cursor: default; }
@media (max-width: 800px) { .meta-fila { grid-template-columns: 30px 1fr 36px; } .meta-fila .form-group:nth-of-type(2), .meta-fila .form-group:nth-of-type(3) { grid-column: 2; } }
.cartera-tabla td.num .chico { white-space: normal; max-width: 190px; margin-left: auto; }

/* Cartera -> Activas: el % vendible se cambia directo en la lista */
.vendible-celda { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.vendible-celda .celda { width: 46px; }

/* Metricas: el monto en dolares de captaciones, ofertas, reservas y cierres */
.kpi-monto { font-size: .95rem; font-weight: 600; color: var(--primary); margin-top: .1rem; }

/* Oferta: los demas oferentes (nombre, DNI y sacar) */
.oferente-fila { display: grid; grid-template-columns: 2fr 1fr auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.referendum-titulo { margin: 1rem 0 .5rem; font-size: .85rem; font-weight: 600; color: var(--text-secondary); }

/* Recibos de una oferta/reserva */
.recibos-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.recibos-pactado { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.recibo-acciones { white-space: nowrap; }
.check-linea { display: flex; gap: .6rem; align-items: flex-start; margin-top: .5rem; font-size: .9rem; cursor: pointer; }
.check-linea input { margin-top: .2rem; }
.reservas-usd-tabla td.num, .reservas-usd-tabla th.num { white-space: nowrap; text-align: right; }
.reservas-usd-tabla td.num .chico { white-space: nowrap; }
.titular-fila { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }

/* Negociacion de una oferta */
.negociacion-estado { font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }
.negociacion-estado.espera { background: #fef3c7; color: #92400e; }
.negociacion-estado.ok { background: #dcfce7; color: #166534; }
.negociacion-estado.mal { background: #fee2e2; color: #991b1b; }
.negociacion-tabla td { vertical-align: top; }
.negociacion-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.negociacion-pregunta { margin-right: .5rem; }
.status-pendiente { background: #fef3c7; color: #92400e; }
.status-neutro { background: #f1f5f9; color: #475569; }
.aviso-chico { background: #fff7ed; color: #9a3412; padding: .5rem .75rem; border-radius: 6px; font-size: .85rem; margin-top: 0; }
.recibos-botones { display: flex; gap: .5rem; }

/* WhatsApp de la oficina */
.wa-estado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.wa-fila { display: flex; align-items: center; gap: .75rem; }
.wa-punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.wa-punto.ok { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.wa-punto.mal { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.wa-acciones { display: flex; gap: .5rem; }
.wa-preparando { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2rem 1rem; background: #f9fafb; border-radius: 8px; text-align: center; }
.wa-spinner { width: 44px; height: 44px; border: 4px solid #ddd; border-top-color: #25D366; border-radius: 50%; animation: wa-giro 1s linear infinite; }
.wa-spinner.chico { width: 16px; height: 16px; border-width: 2px; }
@keyframes wa-giro { to { transform: rotate(360deg); } }
.wa-qr { display: flex; justify-content: center; padding: 1rem; background: #f9fafb; border-radius: 8px; }
.wa-qr img { width: 300px; max-width: 100%; height: auto; }
.wa-esperando { display: flex; align-items: center; gap: .5rem; justify-content: center; margin-top: 1rem; color: var(--text-muted); }

/* Propietario de la propiedad: elegir del registro (Cartera -> Propietarios) */
.prop-propietario { position: relative; }
.prop-propietario-info { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.prop-sugerencias { position: absolute; z-index: 20; left: 0; right: 0; margin-top: 2px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); max-height: 280px; overflow-y: auto; }
.prop-sugerencia { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; width: 100%; padding: .55rem .75rem; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.prop-sugerencia:last-child { border-bottom: 0; }
.prop-sugerencia:hover { background: rgba(138, 117, 67, .08); }
.prop-ajeno { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-link { background: none; border: 0; padding: 0; color: #8a7543; text-decoration: underline; cursor: pointer; font: inherit; }

/* Autorizaciones del broker a distancia: aviso arriba de todo y la lista */
.aviso-autorizaciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.aviso-autorizaciones i { margin-right: .35rem; }
.autorizaciones-tabla .fila-pendiente { background: #fffbeb; }
.autorizaciones-tabla td { vertical-align: top; }

/* Asesores -> Reclutamiento: postulantes del formulario y la seleccion */
.reclutamiento-link { display: flex; gap: .5rem; flex-wrap: wrap; }
.reclutamiento-link .form-input { flex: 1; min-width: 240px; }
.reclutamiento-ultima { margin-top: .6rem; }
.reclutamiento-tabla td { vertical-align: top; }
.reclutamiento-tabla th.paso, .reclutamiento-tabla td.paso { text-align: center; white-space: nowrap; }
.reclutamiento-nombre { font-weight: 600; text-decoration: none; color: inherit; text-align: left; }
.reclutamiento-nombre:hover { text-decoration: underline; }
.reclutamiento-seguimiento { color: #8a7543; margin-top: .15rem; }
.sino { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.sino-btn { border: 0; background: none; padding: .2rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; color: #64748b; }
.sino-btn + .sino-btn { border-left: 1px solid var(--border); }
.sino-btn.si.elegido { background: #dcfce7; color: #166534; font-weight: 600; }
.sino-btn.no.elegido { background: #fee2e2; color: #991b1b; font-weight: 600; }
.sino-btn:disabled { cursor: default; opacity: .7; }
.reclutamiento-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem 1rem; }
.reclutamiento-subtitulo { margin: 1.25rem 0 .5rem; font-size: .95rem; }
.reclutamiento-respuestas dt { font-size: .85rem; color: #64748b; margin-top: .6rem; }
.reclutamiento-respuestas dd { margin: .15rem 0 0; }
.reclutamiento-pasos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.reclutamiento-pasos > div { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.entrevista-fecha { display: inline-flex; gap: .4rem; align-items: center; }
.entrevista-fecha a { color: #8a7543; }
.calendario-ok { color: #166534; }
.google-pasos li { margin-bottom: .6rem; line-height: 1.5; }
.google-uris { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.google-uris code { background: #f1f5f9; padding: .25rem .5rem; border-radius: 6px; font-size: .85rem; user-select: all; width: fit-content; }
.wa-postulante { color: #15803d; text-decoration: none; font-weight: 600; white-space: nowrap; }
.wa-postulante:hover { text-decoration: underline; }
.usuario-nuevo { background: rgba(138, 117, 67, .06); border: 1px solid rgba(138, 117, 67, .25); border-radius: 8px; padding: .75rem .9rem .6rem; margin-bottom: 1rem; }

/* Configuracion -> Logo de la oficina */
.logo-oficina { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.logo-vista { width: 320px; max-width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 10px; padding: 1rem;
    background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f5f9 75%), linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.logo-vista.vacio { background: none; text-align: center; }
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-acciones { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; max-width: 420px; }
.logo-acciones .btn.disabled { opacity: .6; pointer-events: none; }

/* Cierre: la reserva (cobrada, entregada al asesor, aplicada al cobro, en custodia) y la cuenta */
.cierre-reserva { border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; background: rgba(138, 117, 67, .04); }
.cierre-reserva h4 { margin: 0 0 .5rem; font-size: .95rem; }
.cierre-reserva-filas { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.cierre-reserva-aplicar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cierre-reserva-aplicar .form-input { max-width: 240px; }
/* Plata para el cambio en la firma (pedido 2026-10-09) */
.cierre-cambio { border: 1px dashed var(--border); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.cierre-cambio h4 { margin: 0 0 .25rem; font-size: .95rem; }
.cierre-cambio h4 i { color: var(--text-muted); margin-right: .3rem; }
.cierre-trae-titulo { margin: .25rem 0 .5rem; font-size: .95rem; }
.cierre-cuenta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .75rem; font-size: .95rem; }
.cierre-reserva .btn-link { margin-left: .5rem; }
.cierre-liquidar { margin-top: .75rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.cierre-liquidar-cuenta { display: flex; flex-direction: column; gap: .3rem; min-width: min(460px, 100%); }
.cierre-liquidar-cuenta > div { display: flex; justify-content: space-between; gap: 1.5rem; }
.cierre-liquidar-cuenta > div.destacado { border-top: 1px solid var(--border); padding-top: .35rem; color: #8a7543; }
.cierre-liquidar-cajas h5 { margin: 0 0 .3rem; font-size: .85rem; }
.cierre-liquidar-cajas ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.cierre-liquidar-cajas .form-input-sm { display: inline-block; width: auto; padding: .2rem .5rem; font-size: .85rem; }
.cierre-reserva-hecho { margin-top: .6rem; color: #166534; }
.cierre-reserva-hecho i { margin-right: .3rem; }
.cierre-liquidar-cuenta { margin-top: .75rem; }
.cierre-liquidar-cuenta > div.separa { border-top: 1px solid var(--border); padding-top: .35rem; margin-top: .3rem; }
.cierre-deja { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cierre-deja .form-input-sm { width: 130px; text-align: right; display: inline-block; padding: .2rem .5rem; font-size: .9rem; }

/* Proyeccion de pagos */
.proy-sin-factura { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600; }
.proy-tabla tr.proy-atrasado td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* PDF o foto de facturas y pagos */
.comp-archivo { display: inline-flex; align-items: center; gap: .25rem; }
.comp-ver, .comp-subir { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.comp-ver { color: var(--primary); text-decoration: none; }
.comp-ver:hover { text-decoration: underline; }
.comp-ver .fa-file-pdf { color: #dc2626; }
.comp-subir { color: #64748b; cursor: pointer; border: 1px dashed #cbd5e1; border-radius: 999px; padding: .05rem .5rem; }
.comp-subir:hover { color: var(--primary); border-color: var(--primary); }
.comp-subir.ocupado { opacity: .6; cursor: wait; }
.comp-sacar { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 .15rem; }
.comp-sacar:hover { color: #dc2626; }
.proy-factura-acciones { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }

/* Reclutamiento: el alta como asesor la decide el broker */
.alta-espera { color: #b45309; font-weight: 600; }
/* Ya cargado: fijo para todos menos el broker */
.sino.fijo { border-style: dashed; }
.sino.fijo .sino-btn { cursor: not-allowed; }
.sino.fijo .sino-btn:not(.elegido) { opacity: .4; }

/* Proyeccion de pagos: flujo de fondos */
.proy-vistas { margin-bottom: 1rem; }
.proy-flujo { --flujo-barra: #2a78d6; --flujo-linea: #eb6834; --flujo-atrasado: #e34948; }
.proy-flujo-controles { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.proy-flujo-resumen { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: .75rem; }
.proy-flujo-resumen > div { display: flex; flex-direction: column; gap: .1rem; }
.proy-flujo-resumen strong { font-size: 1.25rem; }
.proy-grafico { width: 100%; height: auto; display: block; }
.proy-grafico .grilla { stroke: #eef0f3; stroke-width: 1; }
.proy-grafico .eje { stroke: #cbd5e1; stroke-width: 1; }
.proy-grafico .eje-texto { font-size: 11px; fill: #64748b; }
.proy-grafico .eje-texto.atrasado { fill: #b91c1c; font-weight: 600; }
.proy-grafico .valor { font-size: 11px; fill: #334155; font-weight: 600; }
.proy-grafico .valor.fuerte { fill: #0f172a; font-size: 12px; }
.proy-grafico .barra { fill: var(--flujo-barra); }
.proy-grafico .barra.atrasado { fill: var(--flujo-atrasado); }
.proy-grafico .linea { fill: none; stroke: var(--flujo-linea); stroke-width: 2; stroke-linejoin: round; }
.proy-grafico .punto { fill: var(--flujo-linea); stroke: #fff; stroke-width: 2; }
.proy-grafico .hit { fill: transparent; }
.proy-grafico .proy-tramo:hover .hit { fill: #f1f5f9; }
.proy-flujo-leyenda { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .8rem; color: #475569; margin-top: .4rem; }
.proy-flujo-leyenda i { display: inline-block; vertical-align: middle; margin-right: .35rem; }
.ley-barra { width: 12px; height: 12px; border-radius: 3px; background: #2a78d6; }
.ley-barra.atrasado { background: #e34948; }
.ley-linea { width: 18px; height: 2px; background: #eb6834; position: relative; }
.proy-tarjeta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: .75rem; font-weight: 600; }

/* Reclutamiento: dos pasos en una misma columna (llamado 1 y 2, entrevista 3 y 4) */
.paso-linea { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-bottom: .4rem; }
.paso-etq { font-size: .7rem; color: #64748b; white-space: nowrap; }

/* Propiedad de otra inmobiliaria (para ofertar) */
.etiqueta-externa { display: inline-block; white-space: nowrap; padding: .05rem .45rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .7rem; font-weight: 600; }
.fecha-hora { display: flex; gap: .4rem; }
.fecha-hora input[type=time] { max-width: 130px; }

/* Revision de ofertas y contraofertas por el broker */
.etiqueta-revision { display: inline-block; white-space: nowrap; padding: .05rem .45rem; border-radius: 999px; background: #ede9fe; color: #5b21b6; font-size: .7rem; font-weight: 600; }
.aviso-revision { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }
.acuerdo-firmado { display: inline-flex; align-items: center; padding: 0 .3rem; }
.acuerdo-firmado .comp-ver, .acuerdo-firmado .comp-subir { font-size: .8rem; }

/* IVA de los honorarios en el cierre */
.cierre-iva { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.cierre-iva-parte { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.cierre-iva-pct { display: inline-flex; align-items: center; gap: .4rem; }
.cierre-iva-pct .form-input { width: 6rem; }

/* Reservas USD: filtro por etapa */
.reservas-usd-filtro { margin: 0 0 1rem; flex-wrap: wrap; }

/* Rentabilidad: ingresos con la proyeccion encima (reservas con fecha posible de cierre) */
.rent-pila { width: 42%; max-width: 22px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 1px; }
.rent-pila .rent-barra { width: 100%; max-width: none; border-radius: 0; min-height: 0; }
.rent-pila .rent-barra:first-child { border-radius: 3px 3px 0 0; }
.rent-barra.proyeccion, .rent-punto.proyeccion { background: #facc15; }

/* Revision legal de las propiedades */
.rl-estado { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.rl-preparacion { background: #e2e8f0; color: #334155; }
.rl-revision { background: #fef3c7; color: #92400e; }
.rl-observada { background: #fee2e2; color: #991b1b; }
.rl-activa { background: #dcfce7; color: #166534; }
.rl-aviso { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: 8px; background: #f1f5f9; margin-bottom: 1rem; }
.rl-aviso i { margin-top: .2rem; }
.rl-aviso-espera { background: #fffbeb; }
.rl-aviso-pedido { background: #fef2f2; }
.rl-subtitulo { margin: 1rem 0 .5rem; font-size: .95rem; }
.rl-checklist { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-bottom: .6rem; font-size: .85rem; color: var(--text-muted, #64748b); }
.rl-check.tiene { color: #15803d; font-weight: 600; }
.rl-docs { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.rl-doc { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 6px; }
.rl-doc-tipo { font-weight: 600; min-width: 9rem; }
.rl-subir { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rl-subir .form-input { max-width: 260px; }
.rl-subir .deshabilitado { opacity: .55; pointer-events: none; }
.rl-accion { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); align-items: flex-start; }
.rl-accion textarea { width: 100%; }
.rl-historial { display: flex; flex-direction: column; border-left: 2px solid var(--border); margin-left: .4rem; }
.rl-evento { display: flex; gap: .8rem; padding: .35rem 0 .35rem .8rem; position: relative; font-size: .88rem; }
.rl-evento::before { content: ""; position: absolute; left: -6px; top: .7rem; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.rl-ev-envio::before { background: #f59e0b; }
.rl-ev-pedido::before { background: #ef4444; }
.rl-ev-aprobada::before { background: #22c55e; }
.rl-ev-mensaje::before { background: #3b82f6; }
.rl-evento-fecha { white-space: nowrap; color: var(--text-muted, #64748b); min-width: 7.5rem; }
.rl-evento-texto { margin-top: .15rem; white-space: pre-wrap; }
.rl-tardo { margin-left: .4rem; font-size: .8rem; color: #475569; background: #f1f5f9; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.rl-pedido { max-width: 260px; }

/* Revision legal: lectura automatica de escrituras y DNI */
.rl-lectura { font-size: .8rem; padding: .05rem .5rem; border-radius: 999px; background: #f1f5f9; color: #475569; }
.rl-lectura.leido { background: #eef2ff; color: #3730a3; }
.rl-lectura.error { background: #fef2f2; color: #991b1b; }
.rl-alertas { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-direction: column; gap: .3rem; }
.rl-alerta { padding: .4rem .7rem; border-radius: 6px; font-size: .88rem; }
.rl-alerta i { margin-right: .3rem; }
.rl-alerta-error { background: #fef2f2; color: #991b1b; }
.rl-alerta-aviso { background: #fffbeb; color: #92400e; }
.rl-alerta-ok { background: #f0fdf4; color: #166534; }
.rl-titulares { margin-bottom: .5rem; }
.rl-nota { color: #475569; }

.rl-generar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }

/* Cartera activa: solapas (mi cartera / propiedades de otros asesores) */
.cartera-solapas { margin: 0 0 1rem; flex-wrap: wrap; }

/* Contrato de locacion (2026-10-11): cada persona (locador, locatario, fiador) en un recuadro. */
.contrato-persona { border: 1px solid var(--border); border-radius: 8px; padding: .75rem .75rem .25rem; margin-bottom: .6rem; }
.btn-whatsapp:disabled { opacity: .45; cursor: default; }
/* Reserva aceptada en forma de lista (2026-10-12): dato a la izquierda, valor a la derecha. */
.reserva-resumen { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: .3rem 1rem; margin: 0 0 .5rem; font-size: .9rem; }
.reserva-resumen dt { color: var(--text-secondary); }
.reserva-resumen dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 600px) { .reserva-resumen { grid-template-columns: 1fr; gap: 0; } .reserva-resumen dd { margin-bottom: .4rem; } }
/* DNI de los oferentes (2026-10-12) */
.dni-lista { list-style: none; padding: 0; margin: 0 0 .5rem; }
.dni-lista li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .9rem; }
.dni-lista li a { flex: 1; overflow-wrap: anywhere; }
.dni-subir { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dni-subir select { max-width: 320px; }
.dni-subir .deshabilitado { opacity: .55; pointer-events: none; }

/* Tesoreria -> Impuestos y gastos bancarios (Shared/GastosBancariosModal.razor) */
.gbm { max-width: 860px; width: 100%; }
.gbm-ayuda { margin: 0 0 .6rem; }
.gbm-tabla { display: flex; flex-direction: column; gap: .35rem; }
.gbm-fila { display: grid; grid-template-columns: 140px minmax(150px, 1.1fr) minmax(170px, 1.4fr) 130px 38px; gap: .35rem; align-items: center; }
.gbm-titulos { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.gbm-fila .num { text-align: right; }
.gbm-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gbm-botones { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 720px) {
  .gbm-fila { grid-template-columns: 1fr 1fr 38px; padding-bottom: .45rem; border-bottom: 1px solid var(--border); }
  .gbm-fila > :nth-child(2) { grid-column: span 2; }
  .gbm-fila > :nth-child(3) { grid-column: span 3; }
  .gbm-fila > :nth-child(4) { grid-column: span 2; }
  .gbm-titulos { display: none; }
}

/* Escalas de comision (Configuracion) */
.escalas-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; }
.escala-tabla .form-input { max-width: 160px; }
.escala-tabla .celda-pct { max-width: 90px; text-align: right; margin-left: auto; }
.escala-hoy { margin: .25rem 0 1rem; }

/* ============================================================
   Tareas (/tareas): pedidos a las asistentes, reuniones con el broker y reservas de sala
   ============================================================ */
.tareas-tabs { margin-bottom: 1rem; }
.tareas-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.tareas-chip {
    border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 999px;
    padding: .4rem .9rem; font: inherit; font-size: .85rem; cursor: pointer;
}
.tareas-chip.activo { background: #1f2937; border-color: #1f2937; color: #fff; }
.tareas-filtro-tipo { width: auto; min-width: 150px; }
.tareas-buscar { width: 220px; margin-left: auto; }

.tarea-card {
    display: flex; gap: .85rem; align-items: flex-start;
    background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #d1d5db; border-radius: 10px;
    padding: .9rem 1rem; margin-bottom: .6rem; cursor: pointer; transition: box-shadow .15s;
}
.tarea-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.tarea-card.prioridad-alta { border-left-color: var(--danger); }
.tarea-card.prioridad-media { border-left-color: var(--warning); }
.tarea-card.prioridad-baja { border-left-color: #9ca3af; }
.tarea-card.cerrada { opacity: .75; }
.tarea-estado {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d1d5db;
    display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; margin-top: .1rem;
}
.tarea-estado.estado-en-curso { border-color: var(--info); color: var(--info); }
.tarea-estado.estado-hecha { border-color: var(--success-dark); background: var(--success-dark); color: #fff; }
.tarea-estado.estado-rechazada, .tarea-estado.estado-cancelada { border-color: #9ca3af; color: #9ca3af; }
.tarea-cuerpo { flex: 1; min-width: 0; }
.tarea-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tarea-detalle { color: #4b5563; font-size: .88rem; margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarea-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: #4b5563; margin-top: .35rem; }
.tarea-meta i { color: #9ca3af; margin-right: .2rem; }
.tarea-tiempos { font-size: .75rem; color: #6b7280; margin-top: .3rem; }
.tarea-acciones { display: flex; gap: .4rem; flex: 0 0 auto; align-items: center; }
.tarea-badge { font-size: .7rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: #f3f4f6; color: #374151; white-space: nowrap; }
.tarea-badge.tipo-reunion { background: #ede9fe; color: #5b21b6; }
.tarea-badge.tipo-sala { background: #e0f2fe; color: #075985; }
.tarea-badge.tipo-destaque { background: #fef3c7; color: #92400e; }
.tareas-portales { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.tarea-badge.prio-alta { background: var(--danger-bg); color: #b91c1c; }
.tarea-badge.prio-baja { background: #f3f4f6; color: #6b7280; }
.tarea-badge.est-pendiente { background: var(--warning-bg); color: #b45309; }
.tarea-badge.est-en-curso { background: var(--info-bg); color: #1d4ed8; }
.tarea-badge.est-hecha { background: var(--success-bg); color: #047857; }
.tarea-badge.est-rechazada, .tarea-badge.est-cancelada { background: #f3f4f6; color: #6b7280; }
/* La oficina le comento algo al que pidio y falta que conteste (2026-10-22) */
.tarea-card.para-responder { background: #fffbeb; }
.tarea-badge.comentario { background: #fef3c7; color: #92400e; }
.tareas-aviso-comentario { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 8px; padding: .5rem .75rem; margin: .5rem 0; }
.tareas-rojo { color: #dc2626 !important; font-weight: 600; }

.tareas-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1rem; }
.tareas-tipo {
    display: flex; flex-direction: column; gap: .2rem; text-align: left; cursor: pointer;
    border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; padding: .75rem; font: inherit;
}
.tareas-tipo i { font-size: 1.15rem; color: var(--primary); }
.tareas-tipo span { font-size: .78rem; color: #6b7280; }
.tareas-tipo.activo { border-color: var(--primary); background: var(--primary-bg); }
.tareas-tipo:disabled { opacity: .45; cursor: not-allowed; }
.tareas-ocupacion { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .82rem; margin-bottom: .75rem; color: #374151; }
.tareas-ocupado { background: var(--danger-bg); color: #b91c1c; border-radius: 6px; padding: .1rem .45rem; }
.tareas-aviso-costo { font-size: .85rem; background: var(--warning-bg); border-radius: 8px; padding: .5rem .75rem; color: #92400e; }

.tareas-detalle-texto { white-space: pre-wrap; margin: .75rem 0; }
.tareas-datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .88rem; margin: .75rem 0; }
.tareas-datos dt { color: #6b7280; }
.tareas-datos dd { margin: 0; }
.tareas-historial-titulo { margin: 1rem 0 .4rem; font-size: .95rem; }
.tareas-historial { list-style: none; padding: 0; margin: 0 0 .75rem; border-left: 2px solid #e5e7eb; }
.tareas-historial li { display: flex; flex-direction: column; padding: .3rem 0 .3rem .75rem; font-size: .86rem; }
.tareas-historial-texto { white-space: pre-wrap; color: #374151; }
.tareas-comentar, .tareas-pasar { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.tareas-pasar select { width: auto; }
.tareas-panel { border: 1px solid #e5e7eb; border-radius: 10px; padding: .9rem; margin-top: .75rem; background: #fafafa; }
.tareas-panel h4 { margin: 0 0 .6rem; }
.tareas-panel-botones { display: flex; gap: .5rem; justify-content: flex-end; }
.tareas-footer { flex-wrap: wrap; }

.tareas-agenda-nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.tareas-agenda-salas { margin-left: auto; }
.tareas-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.tareas-dia { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: .6rem; min-height: 120px; }
.tareas-dia.hoy { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tareas-dia-titulo { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; }
.tareas-turno {
    display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; cursor: pointer;
    border-radius: 8px; padding: .4rem .5rem; margin-bottom: .35rem; background: #e0f2fe;
}
.tareas-turno.estado-pendiente { background: var(--warning-bg); }
.tareas-turno.estado-hecha { background: #f3f4f6; }
.tareas-turno-hora { font-weight: 700; }
.tareas-tiempos { margin-bottom: 1rem; }
.tareas-tiempos-filtro { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.tareas-tiempos-filtro .form-input { width: auto; }
.tareas-sala-fila { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }

/* Archivos adjuntos de las tareas */
.tareas-adjuntar-form { padding-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.tareas-adjuntar-form .form-label { width: 100%; margin: 0; }
.tareas-adjuntar { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.tareas-adjuntar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tareas-adjuntos-elegidos { list-style: none; padding: 0; margin: 0; width: 100%; font-size: .85rem; }
.tareas-adjuntos-elegidos li { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.tareas-archivos-titulo { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .5rem; }
.tareas-archivos-titulo h4 { margin: 0; font-size: .95rem; }
.tareas-archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; margin-bottom: .5rem; }
.tareas-archivo { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; min-width: 0; }
.tareas-archivo img, .tareas-archivo-pdf {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; background: #f9fafb;
    display: flex; align-items: center; justify-content: center;
}
.tareas-archivo-pdf i { font-size: 2rem; color: #dc2626; }
.tareas-archivo-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tareas-archivo-botones { display: flex; gap: .6rem; }

@media (max-width: 900px) {
    .tareas-agenda { grid-template-columns: 1fr; }
    .tareas-dia { min-height: 0; }
}
@media (max-width: 900px) {
    .tareas-tipos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tareas-tabs { overflow-x: auto; }
    .tareas-tabs .tab-btn { white-space: nowrap; padding: .6rem .7rem; }
    .tareas-tipos { grid-template-columns: 1fr; }
    .tareas-buscar { width: 100%; margin-left: 0; }
    .tarea-card { flex-wrap: wrap; }
    .tarea-acciones { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   CELULAR: pantallas mas practicas
   - Las tablas pasan a tarjetas (un renglon = una tarjeta, cada dato con el titulo de su
     columna al lado). El titulo lo pone un script de index.html en data-label.
     Para dejar una tabla como planilla con deslizamiento, agregarle la clase "sin-tarjetas".
   - Las solapas se deslizan de costado en vez de cortarse.
   - Los campos van con letra de 16px: con menos, el iPhone agranda la pantalla al tocarlos.
   - Las ventanas ocupan toda la pantalla con los botones siempre a mano abajo.
   ============================================================ */
@media (max-width: 640px) {
  /* Tablas como tarjetas */
  .table-responsive { max-height: none; overflow: visible; }
  .table-responsive:has(.sin-tarjetas) { overflow-x: auto; }
  table.data-table:not(.sin-tarjetas),
  table.data-table:not(.sin-tarjetas) tbody,
  table.data-table:not(.sin-tarjetas) tfoot { display: block; width: 100%; }
  table.data-table:not(.sin-tarjetas) thead { display: none; }
  table.data-table:not(.sin-tarjetas) tr {
    display: block;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 0 0 .6rem;
    padding: .35rem .75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  table.data-table:not(.sin-tarjetas) tbody tr:hover { background: var(--card-bg, #fff); }
  table.data-table:not(.sin-tarjetas) tfoot tr { background: #f9fafb; font-weight: 600; }
  table.data-table:not(.sin-tarjetas) tbody td,
  table.data-table:not(.sin-tarjetas) tfoot td {
    display: flow-root;
    padding: .4rem 0 !important;
    border-bottom: 1px dashed var(--border);
    text-align: right !important;
    white-space: normal !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    word-break: break-word;
  }
  table.data-table:not(.sin-tarjetas) tr td:last-child { border-bottom: none; }
  table.data-table:not(.sin-tarjetas) td::before {
    content: attr(data-label);
    float: left;
    max-width: 45%;
    margin: .15rem .75rem 0 0;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
  }
  /* Celdas sin titulo (foto, botones, mensajes de "no hay nada"): a lo ancho */
  table.data-table:not(.sin-tarjetas) td[data-label=""],
  table.data-table:not(.sin-tarjetas) td:not([data-label]) { text-align: left !important; }
  table.data-table:not(.sin-tarjetas) td[data-label=""]::before,
  table.data-table:not(.sin-tarjetas) td:not([data-label])::before { display: none; }
  table.data-table:not(.sin-tarjetas) td:empty { display: none; }
  table.data-table:not(.sin-tarjetas) td .form-input,
  table.data-table:not(.sin-tarjetas) td .form-select,
  table.data-table:not(.sin-tarjetas) td input,
  table.data-table:not(.sin-tarjetas) td select { min-width: 4.5rem !important; max-width: 60%; }
  table.data-table:not(.sin-tarjetas) td.actions-cell,
  table.data-table:not(.sin-tarjetas) td:has(> .btn-icon) { text-align: right !important; }

  /* Encabezado de la pantalla: titulo arriba, botones abajo si no entran */
  .view-header { flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
  .view-header > .view-subtitle { flex-basis: 100%; }
  .paso-etq { white-space: normal; }
  table.data-table:not(.sin-tarjetas) td img { max-width: 100%; height: auto; }

  /* Solapas: se deslizan de costado */
  .tabs-bar, .solapas {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-bar::-webkit-scrollbar, .solapas::-webkit-scrollbar { display: none; }
  .tab-btn, .solapa { flex: 0 0 auto; white-space: nowrap; padding: .6rem .8rem; }

  /* Campos: sin zoom automatico en iPhone y mas faciles de tocar */
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .form-input, .form-select { font-size: 16px !important; min-height: 40px; }

  /* Ventanas a pantalla completa, botones fijos abajo */
  .modal-overlay { align-items: stretch; }
  .modal-card, .modal-small, .modal-wide, .modal-ancho {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-header { border-radius: 0; padding: .9rem 1rem; position: sticky; top: 0; z-index: 5; }
  .modal-body { padding: 1rem; flex: 1 1 auto; }
  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--card-bg, #fff);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    z-index: 5;
  }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
  .btn-close { width: 40px; height: 40px; }

  /* Tarjetas de numeros de a dos, mas compactas */
  .stats-grid, .kpi-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .75rem; }
  .kpi-valor { font-size: 1.3rem; }
  .tes-lista { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .tes-tarjeta { padding: .75rem; }
  .tes-saldo { font-size: 1.05rem; }
}

/* Agenda (pedido 2026-10-26): eventos de la oficina (azul) y citas (verde), sobre la grilla semanal de Tareas */
.agenda-google { display: flex; gap: .5rem; align-items: center; font-size: .85rem; padding: .5rem .75rem; margin-bottom: 1rem;
    border-radius: 8px; background: #ecfdf5; color: #065f46; }
.agenda-google.aviso { background: var(--warning-bg); color: inherit; }
.agenda-filtro { display: flex; gap: .35rem; margin-left: auto; }
.agenda-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #d1d5db; background: #fff; border-radius: 999px;
    padding: .25rem .7rem; font-size: .8rem; cursor: pointer; }
.agenda-chip.activo { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); font-weight: 600; }
.agenda-punto { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: #16a34a; }
.agenda-punto.oficina { background: #2563eb; }
.agenda-dia { cursor: pointer; }
.agenda-evento.oficina { background: #dbeafe; border-left: 3px solid #2563eb; }
.agenda-evento.cita { background: #dcfce7; border-left: 3px solid #16a34a; }
.agenda-tipos { grid-template-columns: repeat(2, 1fr); }
.agenda-cuando { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .75rem; }
.agenda-todos { margin-bottom: .75rem; }
.agenda-repetir { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.agenda-repetir-dia { display: flex; align-items: center; gap: .5rem; flex-basis: 100%; }
.agenda-repetir-dia .form-input { max-width: 180px; }
.agenda-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .3rem .75rem;
    max-height: 200px; overflow-y: auto; margin-top: .5rem; padding: .5rem; border: 1px solid #e5e7eb; border-radius: 8px; }
.agenda-detalle p { margin: 0 0 .6rem; }
.agenda-detalle i { width: 1.1rem; color: #6b7280; }
.agenda-texto { white-space: pre-wrap; }
@media (max-width: 640px) {
    .agenda-filtro { margin-left: 0; width: 100%; }
    .agenda-cuando { grid-template-columns: 1fr 1fr; }
    .agenda-cuando .form-group:first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ Compras de oficina */
.compras-cuenta { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; }
.compras-cat { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
    background: #fef3c7; color: #92400e; }
.compras-cat.limpieza { background: #dbeafe; color: #1e40af; }
.compras-cat.libreria { background: #ede9fe; color: #5b21b6; }
.compras-urgente { display: inline-block; padding: .05rem .5rem; margin-right: .35rem; border-radius: 999px; font-size: .72rem;
    font-weight: 700; background: #fee2e2; color: #b91c1c; }
.compras-presupuesto .card-body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.compras-totales { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .4rem; font-size: .9rem; }
.compras-total { font-size: 1rem; }
.compras-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.compras-mes { cursor: pointer; }
.compras-mes.activo td { background: #f5f3ff; }
.compras-detalle { background: #fafafa; font-size: .85rem; line-height: 1.8; }
.compras-renglones .form-input { max-width: 140px; }

/* ------------------------------------------------------------ Marketing (flyer de varias propiedades) */
.mkt-grilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.mkt-paso { font-size: 1.05rem; margin: 0 0 .75rem; }
.mkt-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.mkt-filtros .buscador { flex: 1 1 220px; }
.mkt-filtros select { width: auto; }
.mkt-check { display: inline-flex; gap: .35rem; align-items: center; font-size: .9rem; white-space: nowrap; }
.mkt-propiedades { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; max-height: 70vh; overflow-y: auto; padding: 2px; }
.mkt-prop { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 2px solid var(--border, #e2e8f0); border-radius: 10px; background: var(--card-bg, #fff); cursor: pointer; overflow: hidden; color: inherit; font: inherit; }
.mkt-prop.elegida { border-color: #c2b28a; box-shadow: 0 0 0 2px #c2b28a; }
.mkt-prop img, .mkt-sin-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-size: 1.6rem; }
.mkt-numero { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; background: #2b2b2b; color: #c2b28a; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mkt-prop-datos { display: flex; flex-direction: column; gap: 2px; padding: .45rem .55rem .55rem; font-size: .85rem; }
.mkt-titulo { margin: .75rem 0; }
.mkt-vacio { padding: 1rem 0; }
.mkt-imagen img { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; object-fit: contain; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); background: #f1f5f9; }
.mkt-imagen.cuadrado img { aspect-ratio: 1 / 1; max-width: 420px; }
.mkt-botones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1rem 0 .5rem; }
.mkt-vista .flyer-aviso { margin: 0; }
.mkt-envio { margin-top: 1rem; }
.mkt-envio tr.mkt-enviado td { background: #f0fdf4; }
@media (max-width: 900px) {
    .mkt-grilla { grid-template-columns: 1fr; }
    .mkt-propiedades { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}
.mkt-imagen video { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; display: block; margin: 1rem auto 0; border-radius: 8px; background: #000; }
.mkt-placa-estado { position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; background: #c2b28a; color: #2b2b2b; }
.mkt-placa-estado.reservada { background: #2b2b2b; color: #c2b28a; }
.mkt-placa-estado.bajo { background: #b43c3c; color: #fff; }
.mkt-tachado { text-decoration: line-through; }
.mkt-elegir > .card-body > .origen-opciones { margin-bottom: .75rem; }
.mkt-reporte-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.perfil-foto { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.perfil-foto img, .perfil-foto-vacia { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid #c2b28a; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-size: 2.4rem; }
.perfil-foto-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.mkt-periodo { max-width: 260px; margin-bottom: .75rem; }
.mkt-reel-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin: .5rem 0; }
.mkt-reel-numeros div { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: .6rem; display: flex; flex-direction: column; }
.mkt-reel-numeros strong { font-size: 1.6rem; color: #8a7543; }
.mkt-reel-numeros span { font-size: .8rem; color: #64748b; }
.mkt-material { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0; }
.mkt-material-item { display: grid; grid-template-columns: 90px 1fr auto; gap: .5rem; align-items: center; }
.mkt-material-mini { position: relative; }
.mkt-material-mini img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.mkt-material-mini span { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: .72rem; padding: 1px 6px; border-radius: 6px; }
.mkt-material-botones { display: flex; gap: .25rem; }
@media (max-width: 640px) {
    .mkt-material-item { grid-template-columns: 70px 1fr; }
    .mkt-material-mini img { width: 70px; height: 70px; }
    .mkt-material-botones { grid-column: 1 / -1; justify-content: flex-end; }
}